Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-15 11:38:24 -05:00
Code Issues Activity

add new color theme variables

Browse source
This commit is contained in:
Juan de la Cruz 2016-02-19 19:41:33 +01:00
parent ab2b4f7caa
commit e7ddd65ee2
11 changed files with 78 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,6 +1,6 @@
body { body {
background-color: $secondary-ui-bg; background-color: $secondary-ui-bg;
color: $light-ui-text; color: $medium-ui-text;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
font-family: "sourcesanspro", sans-serif; font-family: "sourcesanspro", sans-serif;

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

@ -3,32 +3,30 @@
// Main color // Main color
$main-ui-color: $color-primary; $main-ui-color: $color-primary;
$dark-main-ui-color: mix($main-ui-color, $color-black, $mix-percentage-dark); $intense-main-ui-color: darken($main-ui-color, 25%);
$ui-flavour: #90969d;
// Background colors // Background colors
$primary-ui-bg: $color-white; $primary-ui-bg: #ffffff;
$secondary-ui-bg: $color-gray-lighter; $secondary-ui-bg: mix($ui-flavour, $color-white, $mix-percentage-lighter);
$dark-ui-bg: $color-gray-light; $dark-ui-bg: mix($ui-flavour, $color-white, $mix-percentage-light);
$bg-ui-color:;
// Border color // Border color
$dark-ui-border: $color-gray; $intense-ui-border: $ui-flavour;
$light-ui-border: $color-gray-light; $medium-ui-border: mix($ui-flavour, $color-white, $mix-percentage-light);
$bright-ui-border: lighten($light-ui-border, 18%); $soft-ui-border: lighten($medium-ui-border, 18%);
$border-ui-color:;
// Icon colors // Icon colors
$dark-ui-icons: $color-gray-dark; $intense-ui-icons: mix($ui-flavour, $color-black, $mix-percentage-dark);
$light-ui-icons: $color-gray-light; $medium-ui-icons: mix($ui-flavour, $color-white, $mix-percentage-light);
$bright-ui-icons: $color-gray-lighter; $soft-ui-icons: mix($ui-flavour, $color-white, $mix-percentage-lighter);
$icons-ui-color:;
// Text colors // Text colors
$dark-ui-text: $color-gray-darker; $intense-ui-text: mix($ui-flavour, $color-black, $mix-percentage-darker);
$light-ui-text: $color-gray; $medium-ui-text: $ui-flavour;
$bright-ui-text: $color-gray-light; $soft-ui-text: mix($ui-flavour, $color-white, $mix-percentage-light);
$text-ui-color:;
// Canvas colors // Canvas colors
$canvas-bg: $color-gray-lighter; $canvas-bg: mix($ui-flavour, $color-white, $mix-percentage-lighter);
$scrollbar-bg: $color-gray-light; $scrollbar-bg: mix($ui-flavour, $color-white, $mix-percentage-light);

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

@ -686,7 +686,7 @@ input[type=range]::-webkit-slider-thumb {
height: 24px; height: 24px;
width: 8px; width: 8px;
border-radius: 7px; border-radius: 7px;
background: $dark-ui-icons; background: $intense-ui-icons;
cursor: pointer; cursor: pointer;
-webkit-appearance: none; -webkit-appearance: none;
margin-top: -8px; margin-top: -8px;
@ -710,7 +710,7 @@ input[type=range]::-moz-range-thumb {
height: 24px; height: 24px;
width: 8px; width: 8px;
border-radius: 7px; border-radius: 7px;
background: $dark-ui-icons; background: $intense-ui-icons;
cursor: pointer; cursor: pointer;
} }
input[type=range]::-ms-track { input[type=range]::-ms-track {
@ -741,7 +741,7 @@ input[type=range]::-ms-thumb {
height: 24px; height: 24px;
width: 8px; width: 8px;
border-radius: 7px; border-radius: 7px;
background: $dark-ui-icons; background: $intense-ui-icons;
cursor: pointer; cursor: pointer;
} }
input[type=range]:focus::-ms-fill-lower { input[type=range]:focus::-ms-fill-lower {
@ -782,7 +782,7 @@ input[type=range]:focus::-ms-fill-upper {
&::after { &::after {
background-color: $color-white; background-color: $color-white;
border-radius: $br-small; border-radius: $br-small;
color: $light-ui-text; color: $medium-ui-text;
content: attr(alt); content: attr(alt);
font-size: $fs11; font-size: $fs11;
font-weight: bold; font-weight: bold;
@ -820,7 +820,7 @@ input[type=range]:focus::-ms-fill-upper {
background-color: rgba(255,255,255,.7); background-color: rgba(255,255,255,.7);
box-sizing: border-box; box-sizing: border-box;
border-radius: 0; border-radius: 0;
color: $dark-ui-text; color: $intense-ui-text;
display: flex; display: flex;
height: 100%; height: 100%;
justify-content: center; justify-content: center;

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

@ -35,7 +35,7 @@
.input-text { .input-text {
background: rgba(255,255,255,.4); background: rgba(255,255,255,.4);
border: 0; border: 0;
color: $dark-ui-text; color: $intense-ui-text;
padding: 4px 8px; padding: 4px 8px;
margin: 0; margin: 0;
max-width: 160px; max-width: 160px;
@ -50,7 +50,7 @@
padding: 0 5px; padding: 0 5px;
svg { svg {
fill: $light-ui-icons; fill: $medium-ui-icons;
height: 15px; height: 15px;
transform: rotate(45deg); transform: rotate(45deg);
width: 15px; width: 15px;

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

@ -10,7 +10,7 @@
.main-logo { .main-logo {
svg { svg {
fill: $light-ui-icons; fill: $medium-ui-icons;
height: 40px; height: 40px;
width: 120px; width: 120px;
} }
@ -28,11 +28,11 @@
li { li {
a { a {
color: $bright-ui-text; color: $soft-ui-text;
padding: 1rem; padding: 1rem;
&:hover { &:hover {
color: $dark-ui-text; color: $intense-ui-text;
} }
} }
@ -40,7 +40,7 @@
&.current { &.current {
a { a {
color: $dark-ui-text; color: $intense-ui-text;
} }
} }
@ -57,7 +57,7 @@
position: relative; position: relative;
span { span {
color: $light-ui-text; color: $medium-ui-text;
margin: $small; margin: $small;
} }
@ -70,7 +70,7 @@
.dropdown { .dropdown {
background-color: $color-white; background-color: $color-white;
border-radius: $br-small; border-radius: $br-small;
border: 1px solid $bright-ui-border; border: 1px solid $soft-ui-border;
box-sizing: border-box; box-sizing: border-box;
min-width: 150px; min-width: 150px;
padding: 0 $small; padding: 0 $small;
@ -86,23 +86,23 @@
padding: $small 0; padding: $small 0;
svg { svg {
fill: $light-ui-text; fill: $medium-ui-text;
height: 12px; height: 12px;
width: 12px; width: 12px;
} }
span { span {
color: $light-ui-text; color: $medium-ui-text;
} }
&:hover { &:hover {
span { span {
color: $dark-ui-text; color: $intense-ui-text;
} }
svg { svg {
fill: $dark-ui-text; fill: $intense-ui-text;
} }
} }

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

@ -3,7 +3,7 @@
.element-icons { .element-icons {
background-color: $primary-ui-bg; background-color: $primary-ui-bg;
border: 1px solid $bright-ui-border; border: 1px solid $soft-ui-border;
border-radius: $br-small; border-radius: $br-small;
display: flex; display: flex;
height: 100%; height: 100%;
@ -11,7 +11,7 @@
li { li {
align-items: center; align-items: center;
border-right: 1px solid $bright-ui-border; border-right: 1px solid $soft-ui-border;
border-radius: $br-small; border-radius: $br-small;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
@ -20,7 +20,7 @@
padding: $small; padding: $small;
svg { svg {
fill: $dark-ui-icons; fill: $intense-ui-icons;
height: 15px; height: 15px;
width: 15px; width: 15px;
} }
@ -51,13 +51,13 @@
} }
.element-set { .element-set {
color: $light-ui-text; color: $medium-ui-text;
margin-left: $x-small; margin-left: $x-small;
.element-set-title { .element-set-title {
box-sizing: border-box; box-sizing: border-box;
border-bottom: 1px dashed $bright-ui-border; border-bottom: 1px dashed $soft-ui-border;
color: $light-ui-text; color: $medium-ui-text;
font-weight: bold; font-weight: bold;
padding: 2px $x-small; padding: 2px $x-small;
width: 100%; width: 100%;
@ -74,32 +74,32 @@
.input-text { .input-text {
background-color: transparent; background-color: transparent;
border-color: $bright-ui-border; border-color: $soft-ui-border;
box-sizing: border-box; box-sizing: border-box;
color: $dark-ui-text; color: $intense-ui-text;
font-size: $fs13; font-size: $fs13;
margin: $x-small; margin: $x-small;
padding: $x-small; padding: $x-small;
width: 100%; width: 100%;
&:focus { &:focus {
color: darken($dark-ui-text, 8%); color: darken($intense-ui-text, 8%);
border-color: $dark-ui-border; border-color: $intense-ui-border;
} }
} }
.input-select { .input-select {
color: $dark-ui-text; color: $intense-ui-text;
&:focus { &:focus {
color: darken($dark-ui-text, 8%); color: darken($intense-ui-text, 8%);
} }
} }
span { span {
color: $light-ui-text; color: $medium-ui-text;
font-size: $fs12; font-size: $fs12;
} }
@ -108,7 +108,7 @@
width: 20%; width: 20%;
svg { svg {
fill: $light-ui-text; fill: $medium-ui-text;
height: 15px; height: 15px;
width: 15px; width: 15px;
@ -141,12 +141,12 @@
&.palette-th { &.palette-th {
align-items: center; align-items: center;
border: 2px solid $light-ui-icons; border: 2px solid $medium-ui-icons;
display: flex; display: flex;
justify-content: center; justify-content: center;
svg { svg {
fill: $light-ui-icons; fill: $medium-ui-icons;
height: 18px; height: 18px;
width: 18px; width: 18px;
} }
@ -167,7 +167,7 @@
cursor: pointer; cursor: pointer;
svg { svg {
fill: $light-ui-icons; fill: $medium-ui-icons;
height: 20px; height: 20px;
margin: 5px 7px 0 7px; margin: 5px 7px 0 7px;
width: 20px; width: 20px;

4
resources/public/styles/partials/sidebar-icons.scss
View file

@ -23,14 +23,14 @@
width: 54px; width: 54px;
svg { svg {
fill: $dark-ui-icons; fill: $intense-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; border-color: $soft-ui-border;
} }
&.selected { &.selected {

24
resources/public/styles/partials/sidebar-layers.scss
View file

@ -1,5 +1,5 @@
.layers-tools { .layers-tools {
border-top: 1px solid $light-ui-border; border-top: 1px solid $medium-ui-border;
bottom: 0; bottom: 0;
display: flex; display: flex;
height: 30px; height: 30px;
@ -18,12 +18,12 @@
cursor: pointer; cursor: pointer;
svg { svg {
fill: $light-ui-icons; fill: $medium-ui-icons;
height: 16px; height: 16px;
width: 16px; width: 16px;
&:hover { &:hover {
fill: $dark-ui-text; fill: $intense-ui-text;
} }
} }
@ -79,14 +79,14 @@
.element-list-body { .element-list-body {
align-items: center; align-items: center;
border-bottom: 1px solid $bright-ui-border; border-bottom: 1px solid $soft-ui-border;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
padding: $small; padding: $small;
width: 100%; width: 100%;
svg { svg {
fill: $bright-ui-icons; fill: $soft-ui-icons;
height: 13px; height: 13px;
margin-right: 8px; margin-right: 8px;
width: 13px; width: 13px;
@ -103,7 +103,7 @@
.sublevel-element { .sublevel-element {
svg { svg {
fill: $light-ui-icons; fill: $medium-ui-icons;
} }
} }
@ -113,7 +113,7 @@
width: 12px; width: 12px;
svg { svg {
fill: $dark-ui-icons; fill: $intense-ui-icons;
transform: rotate(90deg); transform: rotate(90deg);
width: 12px; width: 12px;
} }
@ -125,7 +125,7 @@
&:hover { &:hover {
svg { svg {
fill: $light-ui-icons; fill: $medium-ui-icons;
} }
} }
@ -150,7 +150,7 @@
} }
span { span {
color: $light-ui-text; color: $medium-ui-text;
font-size: $fs13; font-size: $fs13;
overflow-x: hidden; overflow-x: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -176,7 +176,7 @@
.selected { .selected {
svg { svg {
fill: $dark-ui-icons; fill: $intense-ui-icons;
} }
} }
@ -187,13 +187,13 @@
.element-icon { .element-icon {
svg { svg {
fill: $dark-ui-icons; fill: $intense-ui-icons;
} }
} }
span { span {
color: $dark-ui-text; color: $intense-ui-text;
} }
} }

2
resources/public/styles/partials/sidebar-tools.scss
View file

@ -15,7 +15,7 @@
width: 54px; width: 54px;
svg { svg {
fill: $dark-ui-icons; fill: $intense-ui-icons;
height: 35px; height: 35px;
width: 35px; width: 35px;
} }

8
resources/public/styles/partials/sidebar.scss
View file

@ -23,7 +23,7 @@
height: 100%; height: 100%;
.tool-window { .tool-window {
border-bottom: 1px solid $light-ui-border; border-bottom: 1px solid $medium-ui-border;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1; flex: 1;
@ -31,19 +31,19 @@
.tool-window-bar { .tool-window-bar {
align-items: center; align-items: center;
border-bottom: 1px solid $light-ui-border; border-bottom: 1px solid $medium-ui-border;
display: flex; display: flex;
flex-shrink: 0; flex-shrink: 0;
padding: 2px $x-small; padding: 2px $x-small;
svg { svg {
fill: $dark-ui-icons; fill: $intense-ui-icons;
height: 12px; height: 12px;
width: 12px; width: 12px;
} }
span { span {
color: $dark-ui-text; color: $intense-ui-text;
font-weight: bold; font-weight: bold;
} }

14
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: $primary-ui-bg; background-color: $primary-ui-bg;
border-bottom: 1px solid $bright-ui-border; border-bottom: 1px solid $soft-ui-border;
display: flex; display: flex;
height: 40px; height: 40px;
padding: $x-small $medium $x-small 65px; padding: $x-small $medium $x-small 65px;
@ -24,7 +24,7 @@
height: 35px; height: 35px;
svg { svg {
fill: $light-ui-icons; fill: $medium-ui-icons;
height: 35px; height: 35px;
width: 35px; width: 35px;
@ -53,14 +53,14 @@
padding: $x-small $x-big+$x-small $x-small $medium; padding: $x-small $x-big+$x-small $x-small $medium;
svg { svg {
fill: $dark-ui-icons; fill: $intense-ui-icons;
height: 20px; height: 20px;
margin-right: $small; margin-right: $small;
width: 20px; width: 20px;
} }
span { span {
color: $dark-ui-text; color: $intense-ui-text;
overflow-x: hidden; overflow-x: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
@ -86,7 +86,7 @@
.options-btn { .options-btn {
align-items: center; align-items: center;
border-right: 1px solid $bright-ui-border; border-right: 1px solid $soft-ui-border;
display: flex; display: flex;
margin: 0; margin: 0;
@ -112,14 +112,14 @@
} }
svg { svg {
fill: $dark-ui-icons; fill: $intense-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; border-color: $soft-ui-border;
} }
&.selected { &.selected {