3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-07 05:41:38 +02:00
Code Issues Projects Releases Packages Wiki Activity

color and visual refactor

Browse source
This commit is contained in:
Juan de la Cruz 2016-02-17 08:56:02 +01:00 • committed by Andrey Antukh
parent 77fafa85ad
commit 773f67b09b
20 changed files with 149 additions and 104 deletions
Download patch file Download diff file Expand all files Collapse all files

6
resources/public/styles/base.scss
View file

@ -1,6 +1,6 @@
body { body {
background-color: $color-gray-lighter; background-color: $secondary-ui-bg;
color: $color-gray-dark; color: $light-ui-text;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
font-family: "sourcesanspro", sans-serif; font-family: "sourcesanspro", sans-serif;
@ -46,7 +46,7 @@ svg {
a { a {
color: $color-primary; color: $main-ui-color;
&:hover { &:hover {
color: $color-primary-dark; color: $color-primary-dark;

6
resources/public/styles/dependencies/colors.scss
View file

@ -1,7 +1,7 @@
// Colors // Colors
$color-white: #fff; $color-white: #ffffff;
$color-black: #000; $color-black: #000000;
$color-gray: #9e9e9e; $color-gray: #90969d;
// Main color // Main color
$color-primary: #78dbbe; $color-primary: #78dbbe;

30
resources/public/styles/dependencies/uxbox-theme.scss Normal file
View file

@ -0,0 +1,30 @@
// This is a standard color scheme for UXBOX UI
// Hope you like ir and feel free to create your own one!
// Main color
$main-ui-color: $color-primary;
$dark-main-ui-color: mix($main-ui-color, $color-black, $mix-percentage-dark);
// Background colors
$primary-ui-bg: $color-white;
$secondary-ui-bg: $color-gray-lighter;
$dark-ui-bg: $color-gray-light;
// Border color
$dark-ui-border: $color-gray;
$light-ui-border: $color-gray-light;
$bright-ui-border: lighten($light-ui-border, 18%);
// Icon colors
$dark-ui-icons: $color-gray-dark;
$light-ui-icons: $color-gray-light;
$bright-ui-icons: $color-gray-lighter;
// Text colors
$dark-ui-text: $color-gray-darker;
$light-ui-text: $color-gray;
$bright-ui-text: $color-gray-light;
// Canvas colors
$canvas-bg: $color-gray-lighter;
$scrollbar-bg: $color-gray-light;

8
resources/public/styles/framework.scss
View file

@ -28,7 +28,7 @@
.btn-primary { .btn-primary {
@extend %btn; @extend %btn;
align-items: center; align-items: center;
background: $color-primary; background: $main-ui-color;
color: $color-white; color: $color-white;
justify-content: center; justify-content: center;
display: flex; display: flex;
@ -763,11 +763,11 @@ input[type=range]:focus::-ms-fill-upper {
background-color: transparent; background-color: transparent;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background-color: $color-gray; background-color: $scrollbar-bg;
&:hover { &:hover {
background-color: $color-gray-darker; background-color: darken($scrollbar-bg, 14%);
outline: 2px solid $color-primary; outline: 2px solid $main-ui-color;
} }
} }

1
resources/public/styles/main.scss
View file

@ -4,6 +4,7 @@
//################################################# //#################################################
@import 'dependencies/colors'; @import 'dependencies/colors';
@import 'dependencies/uxbox-theme';
@import 'dependencies/helpers'; @import 'dependencies/helpers';
@import 'dependencies/mixin'; @import 'dependencies/mixin';
@import 'dependencies/fonts'; @import 'dependencies/fonts';

2
resources/public/styles/partials/color-palette.scss
View file

@ -68,7 +68,7 @@
} }
} }
&.current { &.current {
background-color: $color-primary; background-color: $main-ui-color;
border-color: $color-white; border-color: $color-white;
svg { svg {
fill: $color-white; fill: $color-white;

4
resources/public/styles/partials/dashboard-grid.scss
View file

@ -109,10 +109,10 @@
border-bottom: 2px solid lighten($color-gray-light, 12%); border-bottom: 2px solid lighten($color-gray-light, 12%);
&:hover { &:hover {
border-color: $color-primary; border-color: $main-ui-color;
h3 { h3 {
color: $color-primary; color: $main-ui-color;
} }
} }

12
resources/public/styles/partials/element-options.scss
View file

@ -29,7 +29,7 @@
&:hover { &:hover {
svg { svg {
fill: $color-primary; fill: $main-ui-color;
} }
} }
@ -38,7 +38,7 @@
background-color: $color-gray-darker; background-color: $color-gray-darker;
svg { svg {
fill: $color-primary; fill: $main-ui-color;
} }
} }
@ -117,7 +117,7 @@
width: 15px; width: 15px;
&:hover { &:hover {
fill: $color-primary; fill: $main-ui-color;
} }
} }
@ -154,9 +154,9 @@
width: 18px; width: 18px;
} }
&:hover { &:hover {
border-color: $color-primary; border-color: $main-ui-color;
svg { svg {
fill: $color-primary; fill: $main-ui-color;
} }
} }
} }
@ -200,7 +200,7 @@
&:hover, &:hover,
&.current { &.current {
svg { svg {
fill: $color-primary; fill: $main-ui-color;
} }
} }
} }

4
resources/public/styles/partials/library-bar.scss
View file

@ -35,7 +35,7 @@
&.current { &.current {
background-color: $color-white; background-color: $color-white;
color: $color-primary; color: $main-ui-color;
} }
} }
@ -69,7 +69,7 @@
&:hover, &:hover,
&.current { &.current {
background-color: $color-primary; background-color: $main-ui-color;
.element-title, .element-title,
.element-subtitle { .element-subtitle {

2
resources/public/styles/partials/lightbox.scss
View file

@ -117,7 +117,7 @@
&:hover { &:hover {
.big-svg { .big-svg {
background-color: $color-primary; background-color: $main-ui-color;
svg { svg {
fill: $color-white; fill: $color-white;

25
resources/public/styles/partials/main-bar.scss
View file

@ -1,6 +1,6 @@
.main-bar { .main-bar {
align-items: center; align-items: center;
background-color: $color-gray; background-color: $primary-ui-bg;
display: flex; display: flex;
height: 50px; height: 50px;
padding: $x-small $medium; padding: $x-small $medium;
@ -10,7 +10,7 @@
.main-logo { .main-logo {
svg { svg {
fill: $color-white; fill: $light-ui-icons;
height: 40px; height: 40px;
width: 120px; width: 120px;
} }
@ -28,11 +28,11 @@
li { li {
a { a {
color: lighten($color-gray-light, 12%); color: $bright-ui-text;
padding: 1rem; padding: 1rem;
&:hover { &:hover {
color: $color-white; color: $dark-ui-text;
} }
} }
@ -40,7 +40,7 @@
&.current { &.current {
a { a {
color: $color-white; color: $dark-ui-text;
} }
} }
@ -57,19 +57,20 @@
position: relative; position: relative;
span { span {
color: $color-gray-lighter; color: $light-ui-text;
margin: $small; margin: $small;
} }
img { img {
border: 2px solid $color-gray-lighter; border: 2px solid $dark-ui-bg;
border-radius: 50%; border-radius: 50%;
width: 32px; width: 32px;
} }
.dropdown { .dropdown {
background-color: $color-white; background-color: $secondary-ui-bg;
border-radius: $br-small; border-radius: $br-small;
border: 1px solid $bright-ui-border;
box-sizing: border-box; box-sizing: border-box;
min-width: 150px; min-width: 150px;
padding: 0 $small; padding: 0 $small;
@ -85,23 +86,23 @@
padding: $small 0; padding: $small 0;
svg { svg {
fill: $color-gray-light; fill: $light-ui-text;
height: 12px; height: 12px;
width: 12px; width: 12px;
} }
span { span {
color: $color-gray-light; color: $light-ui-text;
} }
&:hover { &:hover {
span { span {
color: $color-gray-darker; color: $dark-ui-text;
} }
svg { svg {
fill: $color-gray-darker; fill: $dark-ui-text;
} }
} }

11
resources/public/styles/partials/settings-bar-icons.scss
View file

@ -11,7 +11,9 @@
.figure-btn { .figure-btn {
align-items: center; align-items: center;
background-color: $color-gray-light; background-color: $secondary-ui-bg;
border-radius: 3px;
border: 1px solid transparent;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
flex-shrink: 0; flex-shrink: 0;
@ -21,20 +23,21 @@
width: 54px; width: 54px;
svg { svg {
fill: $color-gray-darker; fill: $dark-ui-icons;
height: 40px; height: 40px;
width: 40px; width: 40px;
} }
&:hover { &:hover {
background-color: $color-white; background-color: $color-white;
border-color: $bright-ui-border;
} }
&.selected { &.selected {
background-color: $color-gray-darker; background-color: $main-ui-color;
svg { svg {
fill: $color-primary; fill: $color-white;
} }
} }

38
resources/public/styles/partials/settings-bar-layers.scss
View file

@ -1,5 +1,4 @@
.layers-tools { .layers-tools {
background-color: $color-gray-darker;
bottom: 0; bottom: 0;
display: flex; display: flex;
height: 30px; height: 30px;
@ -18,12 +17,12 @@
cursor: pointer; cursor: pointer;
svg { svg {
fill: $color-gray; fill: $light-ui-icons;
height: 16px; height: 16px;
width: 16px; width: 16px;
&:hover { &:hover {
fill: $color-white; fill: $dark-ui-text;
} }
} }
@ -79,15 +78,14 @@
.element-list-body { .element-list-body {
align-items: center; align-items: center;
border-bottom: 1px solid $color-gray-darker; border-bottom: 1px solid $bright-ui-border;
box-sizing: border-box; box-sizing: border-box;
background-color: $color-gray-dark;
display: flex; display: flex;
padding: $small; padding: $small;
width: 100%; width: 100%;
svg { svg {
fill: $color-gray; fill: $bright-ui-icons;
height: 13px; height: 13px;
margin-right: 8px; margin-right: 8px;
width: 13px; width: 13px;
@ -104,7 +102,7 @@
.sublevel-element { .sublevel-element {
svg { svg {
fill: $color-gray-darker; fill: $light-ui-icons;
} }
} }
@ -114,7 +112,7 @@
width: 12px; width: 12px;
svg { svg {
fill: $color-gray-darker; fill: $dark-ui-icons;
transform: rotate(90deg); transform: rotate(90deg);
width: 12px; width: 12px;
} }
@ -126,7 +124,7 @@
&:hover { &:hover {
svg { svg {
fill: $color-white; fill: $light-ui-icons;
} }
} }
@ -151,25 +149,25 @@
} }
span { span {
color: darken($color-gray-darker, 8%); color: $light-ui-text;
font-size: $fs13; font-size: $fs13;
overflow-x: hidden; overflow-x: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap;
} }
&.selected { &.selected {
background-color: lighten($color-gray-darker, 5%);
.element-icon { .element-icon {
svg { svg {
fill: $color-primary; fill: $main-ui-color;
} }
} }
span { span {
color: $color-primary; color: $main-ui-color;
} }
} }
@ -177,38 +175,38 @@
.selected { .selected {
svg { svg {
fill: $color-gray-lighter; fill: $dark-ui-icons;
} }
} }
&:hover { &:hover {
border-color: $color-gray-light; border-color: $main-ui-color;
.element-icon { .element-icon {
svg { svg {
fill: $color-gray-lighter; fill: $dark-ui-icons;
} }
} }
span { span {
color: $color-gray-lighter; color: $dark-ui-text;
} }
} }
&.drag-top { &.drag-top {
border-top: 2px solid $color-primary; border-top: 2px solid $main-ui-color;
} }
&.drag-bottom { &.drag-bottom {
border-bottom: 2px solid $color-primary; border-bottom: 2px solid $main-ui-color;
} }
&.drag-inside { &.drag-inside {
border: 2px solid $color-primary; border: 2px solid $main-ui-color;
} }
} }

13
resources/public/styles/partials/settings-bar-tools.scss
View file

@ -1,6 +1,11 @@
.drawing-tools {
max-height: 115px;
}
.tool-btn { .tool-btn {
align-items: center; align-items: center;
background-color: $color-gray-light; background-color: $secondary-ui-bg;
border-radius: 3px;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
flex-shrink: 0; flex-shrink: 0;
@ -10,7 +15,7 @@
width: 54px; width: 54px;
svg { svg {
fill: $color-gray-darker; fill: $dark-ui-icons;
height: 35px; height: 35px;
width: 35px; width: 35px;
} }
@ -20,10 +25,10 @@
} }
&.selected { &.selected {
background-color: $color-gray-darker; background-color: $main-ui-color;
svg { svg {
fill: $color-primary; fill: $color-white;
} }
} }

15
resources/public/styles/partials/settings-bar.scss
View file

@ -1,5 +1,5 @@
.settings-bar { .settings-bar {
background-color: $color-gray-dark; background-color: $primary-ui-bg;
bottom: 0; bottom: 0;
height: 100%; height: 100%;
position: fixed; position: fixed;
@ -21,29 +21,28 @@
height: 100%; height: 100%;
.tool-window { .tool-window {
border-bottom: 1px solid $color-gray-darker; border-bottom: 1px solid $light-ui-border;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 40%;
max-height: 40%;
//flex: 1; //flex: 1;
width: 100%; width: 100%;
.tool-window-bar { .tool-window-bar {
align-items: center; align-items: center;
background-color: $color-gray-darker; border-bottom: 1px solid $light-ui-border;
display: flex; display: flex;
flex-shrink: 0; flex-shrink: 0;
padding: 2px $x-small; padding: 2px $x-small;
svg { svg {
fill: $color-gray; fill: $dark-ui-icons;
height: 12px; height: 12px;
width: 12px; width: 12px;
} }
span { span {
color: $color-gray-light; color: $dark-ui-text;
font-weight: bold; font-weight: bold;
} }
@ -59,7 +58,7 @@
&:hover { &:hover {
svg { svg {
fill: $color-gray-lighter; fill: $color-danger;
} }
} }

43
resources/public/styles/partials/workspace-bar.scss
View file

@ -1,7 +1,7 @@
.workspace-bar { .workspace-bar {
align-items: center; align-items: center;
background-color: $color-gray; background-color: $primary-ui-bg;
border-bottom: 1px solid $color-gray-dark; border-bottom: 1px solid $bright-ui-border;
display: flex; display: flex;
height: 40px; height: 40px;
padding: $x-small $medium $x-small 65px; padding: $x-small $medium $x-small 65px;
@ -10,7 +10,7 @@
.main-icon { .main-icon {
align-items: center; align-items: center;
background-color: $color-gray-dark; background-color: $secondary-ui-bg;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
height: 100%; height: 100%;
@ -24,7 +24,7 @@
height: 35px; height: 35px;
svg { svg {
fill: darken($color-gray-darker, 7%); fill: $light-ui-icons;
height: 35px; height: 35px;
width: 35px; width: 35px;
@ -33,7 +33,7 @@
&:hover { &:hover {
svg { svg {
fill: $color-primary; fill: $main-ui-color;
} }
} }
@ -44,7 +44,7 @@
.project-tree-btn { .project-tree-btn {
align-items: center; align-items: center;
background-color: $color-gray-dark; background-color: $secondary-ui-bg;
border-radius: $br-small; border-radius: $br-small;
box-sizing: border-box; box-sizing: border-box;
cursor: pointer; cursor: pointer;
@ -53,18 +53,30 @@
padding: $x-small $x-big+$x-small $x-small $medium; padding: $x-small $x-big+$x-small $x-small $medium;
svg { svg {
fill: $color-primary; fill: $dark-ui-icons;
height: 20px; height: 20px;
margin-right: $small; margin-right: $small;
width: 20px; width: 20px;
} }
span { span {
color: $color-primary; color: $color-gray-light;
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
&:hover { &:hover {
background-color: $color-gray-darker; background-color: $main-ui-color;
svg {
fill: $color-white;
}
span {
color: $color-white;
}
} }
} }
@ -74,7 +86,7 @@
.options-btn { .options-btn {
align-items: center; align-items: center;
border-right: 1px solid $color-gray-dark; border-right: 1px solid $bright-ui-border;
display: flex; display: flex;
margin: 0; margin: 0;
@ -85,6 +97,7 @@
li { li {
align-items: center; align-items: center;
background-color: $color-gray-lighter; background-color: $color-gray-lighter;
border: 1px solid transparent;
border-radius: $br-small; border-radius: $br-small;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
@ -99,22 +112,18 @@
} }
svg { svg {
fill: $color-gray-dark; fill: $dark-ui-icons;
height: 18px; height: 18px;
width: 18px; width: 18px;
} }
&:hover { &:hover {
background-color: $color-white; background-color: $color-white;
border-color: $bright-ui-border;
svg {
fill: $color-gray-darker;
}
} }
&.selected { &.selected {
background-color: $color-primary; background-color: $main-ui-color;
svg { svg {
fill: $color-white; fill: $color-white;

1
resources/public/styles/partials/workspace-canvas.scss
View file

@ -1,4 +1,5 @@
.workspace-content { .workspace-content {
background-color: $canvas-bg;
display: flex; display: flex;
height: 100%; height: 100%;
width: 100%; width: 100%;

22
src/uxbox/ui/workspace/rules.cljs
View file

@ -30,10 +30,10 @@
:x2 position :x2 position
:y1 5 :y1 5
:y2 step-padding :y2 step-padding
:stroke "#7f7f7f"}] :stroke "#9da2a6"}]
[:text {:x (+ position 2) [:text {:x (+ position 2)
:y 13 :y 13
:fill "#7f7f7f" :fill "#9da2a6"
:style {:font-size "12px"}} :style {:font-size "12px"}}
value]]) value]])
@ -44,7 +44,7 @@
:x2 position :x2 position
:y1 10 :y1 10
:y2 step-padding :y2 step-padding
:stroke "#7f7f7f"}]) :stroke "#9da2a6"}])
:else :else
(html (html
@ -53,7 +53,7 @@
:x2 position :x2 position
:y1 15 :y1 15
:y2 step-padding :y2 step-padding
:stroke "#7f7f7f"}]))) :stroke "#9da2a6"}])))
(defn v-line (defn v-line
[position value] [position value]
@ -65,11 +65,11 @@
:y2 position :y2 position
:x1 5 :x1 5
:x2 step-padding :x2 step-padding
:stroke "#7f7f7f"}] :stroke "#9da2a6"}]
[:text {:y position [:text {:y position
:x 5 :x 5
:transform (str/format "rotate(90 0 %s)" position) :transform (str/format "rotate(90 0 %s)" position)
:fill "#7f7f7f" :fill "#9da2a6"
:style {:font-size "12px"}} :style {:font-size "12px"}}
value]]) value]])
@ -80,7 +80,7 @@
:y2 position :y2 position
:x1 10 :x1 10
:x2 step-padding :x2 step-padding
:stroke "#7f7f7f"}]) :stroke "#9da2a6"}])
:else :else
(html (html
@ -89,7 +89,7 @@
:y2 position :y2 position
:x1 15 :x1 15
:x2 step-padding :x2 step-padding
:stroke "#7f7f7f"}]))) :stroke "#9da2a6"}])))
(defn h-rule-render (defn h-rule-render
[own sidebar?] [own sidebar?]
@ -101,8 +101,8 @@
{:width wb/viewport-width {:width wb/viewport-width
:height 20} :height 20}
[:g [:g
[:rect {:x step-padding :y 0 :width width :height step-padding :fill "#bab7b7"}] [:rect {:x step-padding :y 0 :width width :height step-padding :fill "rgb(233, 234, 235)"}]
[:rect {:x 0 :y 0 :width step-padding :height step-padding :fill "#bab7b7"}]] [:rect {:x 0 :y 0 :width step-padding :height step-padding :fill "rgb(233, 234, 235)"}]]
[:g [:g
(for [tick ticks (for [tick ticks
:let [pos (* (+ tick start-width) zoom)]] :let [pos (* (+ tick start-width) zoom)]]
@ -128,7 +128,7 @@
:y step-padding :y step-padding
:height height :height height
:width step-padding :width step-padding
:fill "#bab7b7"}] :fill "rgb(233, 234, 235)"}]
(for [tick ticks (for [tick ticks
:let [pos (* (+ tick start-height) zoom)]] :let [pos (* (+ tick start-height) zoom)]]
(v-line pos tick))]]))) (v-line pos tick))]])))

2
src/uxbox/ui/workspace/sidebar/drawtools.cljs
View file

@ -71,7 +71,7 @@
tools (->> (into [] +draw-tools+) tools (->> (into [] +draw-tools+)
(sort-by (comp :priority second)))] (sort-by (comp :priority second)))]
(html (html
[:div#form-tools.tool-window [:div#form-tools.tool-window.drawing-tools
[:div.tool-window-bar [:div.tool-window-bar
[:div.tool-window-icon i/window] [:div.tool-window-icon i/window]
[:span (tr "ds.tools")] [:span (tr "ds.tools")]

4
src/uxbox/ui/workspace/sidebar/layers.cljs
View file

@ -152,8 +152,7 @@
:class (when selected? "selected")} :class (when selected? "selected")}
[:div.element-list-body [:div.element-list-body
{:class classes {:class classes
:style {:background-color "gray" :style {:opacity (if (:dragging @local)
:opacity (if (:dragging @local)
"0.5" "0.5"
"1")} "1")}
:on-click select :on-click select
@ -314,4 +313,3 @@
{:render layers-render {:render layers-render
:name "layers" :name "layers"
:mixins [rum/reactive]})) :mixins [rum/reactive]}))