Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-13 02:28:18 -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 {
background-color: $secondary-ui-bg;
color: $light-ui-text;
color: $medium-ui-text;
display: flex;
flex-direction: column;
font-family: "sourcesanspro", sans-serif;

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

@ -3,32 +3,30 @@
// Main color
$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
$primary-ui-bg: $color-white;
$secondary-ui-bg: $color-gray-lighter;
$dark-ui-bg: $color-gray-light;
$bg-ui-color:;
$primary-ui-bg: #ffffff;
$secondary-ui-bg: mix($ui-flavour, $color-white, $mix-percentage-lighter);
$dark-ui-bg: mix($ui-flavour, $color-white, $mix-percentage-light);
// Border color
$dark-ui-border: $color-gray;
$light-ui-border: $color-gray-light;
$bright-ui-border: lighten($light-ui-border, 18%);
$border-ui-color:;
$intense-ui-border: $ui-flavour;
$medium-ui-border: mix($ui-flavour, $color-white, $mix-percentage-light);
$soft-ui-border: lighten($medium-ui-border, 18%);
// Icon colors
$dark-ui-icons: $color-gray-dark;
$light-ui-icons: $color-gray-light;
$bright-ui-icons: $color-gray-lighter;
$icons-ui-color:;
$intense-ui-icons: mix($ui-flavour, $color-black, $mix-percentage-dark);
$medium-ui-icons: mix($ui-flavour, $color-white, $mix-percentage-light);
$soft-ui-icons: mix($ui-flavour, $color-white, $mix-percentage-lighter);
// Text colors
$dark-ui-text: $color-gray-darker;
$light-ui-text: $color-gray;
$bright-ui-text: $color-gray-light;
$text-ui-color:;
$intense-ui-text: mix($ui-flavour, $color-black, $mix-percentage-darker);
$medium-ui-text: $ui-flavour;
$soft-ui-text: mix($ui-flavour, $color-white, $mix-percentage-light);
// Canvas colors
$canvas-bg: $color-gray-lighter;
$scrollbar-bg: $color-gray-light;
$canvas-bg: mix($ui-flavour, $color-white, $mix-percentage-lighter);
$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;
width: 8px;
border-radius: 7px;
background: $dark-ui-icons;
background: $intense-ui-icons;
cursor: pointer;
-webkit-appearance: none;
margin-top: -8px;
@ -710,7 +710,7 @@ input[type=range]::-moz-range-thumb {
height: 24px;
width: 8px;
border-radius: 7px;
background: $dark-ui-icons;
background: $intense-ui-icons;
cursor: pointer;
}
input[type=range]::-ms-track {
@ -741,7 +741,7 @@ input[type=range]::-ms-thumb {
height: 24px;
width: 8px;
border-radius: 7px;
background: $dark-ui-icons;
background: $intense-ui-icons;
cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
@ -782,7 +782,7 @@ input[type=range]:focus::-ms-fill-upper {
&::after {
background-color: $color-white;
border-radius: $br-small;
color: $light-ui-text;
color: $medium-ui-text;
content: attr(alt);
font-size: $fs11;
font-weight: bold;
@ -820,7 +820,7 @@ input[type=range]:focus::-ms-fill-upper {
background-color: rgba(255,255,255,.7);
box-sizing: border-box;
border-radius: 0;
color: $dark-ui-text;
color: $intense-ui-text;
display: flex;
height: 100%;
justify-content: center;

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

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

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

@ -10,7 +10,7 @@
.main-logo {
svg {
fill: $light-ui-icons;
fill: $medium-ui-icons;
height: 40px;
width: 120px;
}
@ -28,11 +28,11 @@
li {
a {
color: $bright-ui-text;
color: $soft-ui-text;
padding: 1rem;
&:hover {
color: $dark-ui-text;
color: $intense-ui-text;
}
}
@ -40,7 +40,7 @@
&.current {
a {
color: $dark-ui-text;
color: $intense-ui-text;
}
}
@ -57,7 +57,7 @@
position: relative;
span {
color: $light-ui-text;
color: $medium-ui-text;
margin: $small;
}
@ -70,7 +70,7 @@
.dropdown {
background-color: $color-white;
border-radius: $br-small;
border: 1px solid $bright-ui-border;
border: 1px solid $soft-ui-border;
box-sizing: border-box;
min-width: 150px;
padding: 0 $small;
@ -86,23 +86,23 @@
padding: $small 0;
svg {
fill: $light-ui-text;
fill: $medium-ui-text;
height: 12px;
width: 12px;
}
span {
color: $light-ui-text;
color: $medium-ui-text;
}
&:hover {
span {
color: $dark-ui-text;
color: $intense-ui-text;
}
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 {
background-color: $primary-ui-bg;
border: 1px solid $bright-ui-border;
border: 1px solid $soft-ui-border;
border-radius: $br-small;
display: flex;
height: 100%;
@ -11,7 +11,7 @@
li {
align-items: center;
border-right: 1px solid $bright-ui-border;
border-right: 1px solid $soft-ui-border;
border-radius: $br-small;
cursor: pointer;
display: flex;
@ -20,7 +20,7 @@
padding: $small;
svg {
fill: $dark-ui-icons;
fill: $intense-ui-icons;
height: 15px;
width: 15px;
}
@ -51,13 +51,13 @@
}
.element-set {
color: $light-ui-text;
color: $medium-ui-text;
margin-left: $x-small;
.element-set-title {
box-sizing: border-box;
border-bottom: 1px dashed $bright-ui-border;
color: $light-ui-text;
border-bottom: 1px dashed $soft-ui-border;
color: $medium-ui-text;
font-weight: bold;
padding: 2px $x-small;
width: 100%;
@ -74,32 +74,32 @@
.input-text {
background-color: transparent;
border-color: $bright-ui-border;
border-color: $soft-ui-border;
box-sizing: border-box;
color: $dark-ui-text;
color: $intense-ui-text;
font-size: $fs13;
margin: $x-small;
padding: $x-small;
width: 100%;
&:focus {
color: darken($dark-ui-text, 8%);
border-color: $dark-ui-border;
color: darken($intense-ui-text, 8%);
border-color: $intense-ui-border;
}
}
.input-select {
color: $dark-ui-text;
color: $intense-ui-text;
&:focus {
color: darken($dark-ui-text, 8%);
color: darken($intense-ui-text, 8%);
}
}
span {
color: $light-ui-text;
color: $medium-ui-text;
font-size: $fs12;
}
@ -108,7 +108,7 @@
width: 20%;
svg {
fill: $light-ui-text;
fill: $medium-ui-text;
height: 15px;
width: 15px;
@ -141,12 +141,12 @@
&.palette-th {
align-items: center;
border: 2px solid $light-ui-icons;
border: 2px solid $medium-ui-icons;
display: flex;
justify-content: center;
svg {
fill: $light-ui-icons;
fill: $medium-ui-icons;
height: 18px;
width: 18px;
}
@ -167,7 +167,7 @@
cursor: pointer;
svg {
fill: $light-ui-icons;
fill: $medium-ui-icons;
height: 20px;
margin: 5px 7px 0 7px;
width: 20px;

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

@ -23,14 +23,14 @@
width: 54px;
svg {
fill: $dark-ui-icons;
fill: $intense-ui-icons;
height: 40px;
width: 40px;
}
&:hover {
background-color: $color-white;
border-color: $bright-ui-border;
border-color: $soft-ui-border;
}
&.selected {

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

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

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

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

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

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