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

Change color variables

Browse source
This commit is contained in:
Juan de la Cruz 2020-04-14 10:15:39 +02:00 • committed by Andrés Moya
parent a4619376d1
commit a739343df5
18 changed files with 93 additions and 1260 deletions
Download patch file Download diff file Expand all files Collapse all files

75
frontend/resources/styles/common/dependencies/colors-v2.scss
View file

@ -1,75 +0,0 @@
// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
// Colors
$color-white: #ffffff;
$color-black: #000000;
$color-gray: #90969d;
// Main color
$color-primary: #78dbbe;
// Secondary colors
$color-success: #b6dd75;
$color-complete : #a599c6;
$color-warning: #e6a16f;
$color-danger: #de4762;
$color-info: #59b9e2;
// Mixing Color varriable for creating both light and dark colors
$mix-percentage-dark: 81%;
$mix-percentage-darker: 60%;
$mix-percentage-light: 80%;
$mix-percentage-lighter: 20%;
// Gray scale
$color-gray-light: mix($color-gray, $color-white, $mix-percentage-light);
$color-gray-lighter: mix($color-gray, $color-white, $mix-percentage-lighter);
$color-gray-dark: mix($color-gray, $color-black, $mix-percentage-dark);
$color-gray-darker: mix($color-gray, $color-black, $mix-percentage-darker);
// Lighter colors
$color-success-light: mix($color-success, $color-white, $mix-percentage-light);
$color-success-lighter: mix($color-success, $color-white, $mix-percentage-lighter);
$color-complete-light: mix($color-complete, $color-white, $mix-percentage-light);
$color-complete-lighter: mix($color-complete, $color-white, $mix-percentage-lighter);
$color-primary-light: mix($color-primary, $color-white, $mix-percentage-light);
$color-primary-lighter: mix($color-primary, $color-white, $mix-percentage-lighter);
$color-warning-light: mix($color-warning, $color-white, $mix-percentage-light);
$color-warning-lighter: mix($color-warning, $color-white, $mix-percentage-lighter);
$color-danger-light: mix($color-danger, $color-white, $mix-percentage-light);
$color-danger-lighter: mix($color-danger, $color-white, $mix-percentage-lighter);
$color-info-light: mix($color-info, $color-white, $mix-percentage-light);
$color-info-lighter: mix($color-info, $color-white, $mix-percentage-lighter);
// Darker colors
$color-success-dark: mix($color-success, $color-black, $mix-percentage-dark);
$color-success-darker: mix($color-success, $color-black, $mix-percentage-darker);
$color-complete-dark: mix($color-complete, $color-black, $mix-percentage-dark);
$color-complete-darker: mix($color-complete, $color-black, $mix-percentage-darker);
$color-primary-dark: mix($color-primary, $color-black, $mix-percentage-dark);
$color-primary-darker: mix($color-primary, $color-black, $mix-percentage-darker);
$color-warning-dark: mix($color-warning, $color-black, $mix-percentage-dark);
$color-warning-darker: mix($color-warning, $color-black, $mix-percentage-darker);
$color-danger-dark: mix($color-danger, $color-black, $mix-percentage-dark);
$color-danger-darker: mix($color-danger, $color-black, $mix-percentage-darker);
$color-info-dark: mix($color-info, $color-black, $mix-percentage-dark);
$color-info-darker: mix($color-info, $color-black, $mix-percentage-darker);
// bg transparent
$color-dark-bg: rgba(0,0,0,.4);
$color-light-bg: rgba(255,255,255,.6);

32
frontend/resources/styles/common/dependencies/colors.scss
View file

@ -2,25 +2,32 @@
// License, v. 2.0. If a copy of the MPL was not distributed with this // License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/. // file, You can obtain one at http://mozilla.org/MPL/2.0/.
// //
// Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz> // Copyright (c) 2015-2020 Andrey Antukh <niwi@niwi.nz>
// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com> // Copyright (c) 2015-2020 Juan de la Cruz <delacruzgarciajuan@gmail.com>
// Colors // Colors
$color-white: #ffffff; $color-white: #ffffff;
$color-black: #000000; $color-black: #000000;
$color-gray: #90969d;
$color-canvas: #E8E9EA; $color-canvas: #E8E9EA;
// Main color // Main color
$color-primary: #31EFB8; $color-primary: #31EFB8;
// Secondary colors // Secondary colors
$color-success: #b6dd75; $color-success: #49D793;
$color-complete : #a599c6; $color-complete : #a599c6;
$color-warning: #e6a16f; $color-warning: #FC8802;
$color-danger: #de4762; $color-danger: #E65244;
$color-info: #59b9e2; $color-info: #59b9e2;
// Gray scale
$color-gray-10: #E3E3E3;
$color-gray-20: #b1b2b5;
$color-gray-30: #7B7D85;
$color-gray-40: #64666A;
$color-gray-50: #303236;
$color-gray-60: #1F1F1F;
// Mixing Color variable for creating both light and dark colors // Mixing Color variable for creating both light and dark colors
$mix-percentage-dark: 81%; $mix-percentage-dark: 81%;
$mix-percentage-darker: 60%; $mix-percentage-darker: 60%;
@ -28,19 +35,6 @@ $mix-percentage-light: 80%;
$mix-percentage-lighter: 20%; $mix-percentage-lighter: 20%;
$mix-percentage-lightest: 10%; $mix-percentage-lightest: 10%;
// Gray scale
$color-gray-light: mix($color-gray, $color-white, $mix-percentage-light);
$color-gray-lighter: mix($color-gray, $color-white, $mix-percentage-lighter);
$color-gray-lightest: mix($color-gray, $color-white, $mix-percentage-lightest);
$color-gray-dark: mix($color-gray, $color-black, $mix-percentage-dark);
$color-gray-darker: mix($color-gray, $color-black, $mix-percentage-darker);
$color-gray-10: #E3E3E3;
$color-gray-20: #b1b2b5;
$color-gray-30: #7B7D85;
$color-gray-40: #64666A;
$color-gray-50: #303236;
$color-gray-60: #1F1F1F;
// Lighter colors // Lighter colors
$color-success-light: mix($color-success, $color-white, $mix-percentage-light); $color-success-light: mix($color-success, $color-white, $mix-percentage-light);
$color-success-lighter: mix($color-success, $color-white, $mix-percentage-lighter); $color-success-lighter: mix($color-success, $color-white, $mix-percentage-lighter);

1091
frontend/resources/styles/common/framework-v2.scss
View file

File diff suppressed because it is too large Load diff

12
frontend/resources/styles/common/framework.scss
View file

@ -67,10 +67,10 @@
.btn-gray { .btn-gray {
@extend %btn; @extend %btn;
background: $color-gray; background: $color-gray-30;
color: $color-white; color: $color-white;
&:hover { &:hover {
background: $color-gray-dark; background: $color-gray-40;
} }
} }
@ -259,7 +259,7 @@ ul.slider-dots {
} }
.tag { .tag {
background-color: $color-gray-light; background-color: $color-gray-20;
border-radius: 3px; border-radius: 3px;
color: $color-white; color: $color-white;
cursor: pointer; cursor: pointer;
@ -270,7 +270,7 @@ ul.slider-dots {
text-transform: uppercase; text-transform: uppercase;
&:hover { &:hover {
background-color: $color-gray-dark; background-color: $color-gray-40;
} }
&.tag-primary { &.tag-primary {
@ -539,7 +539,7 @@ input.element-name {
& + label { & + label {
&:before { &:before {
box-shadow: inset 0 0 0 5px $color-gray-light ; box-shadow: inset 0 0 0 5px $color-gray-20 ;
} }
} }
@ -596,7 +596,7 @@ input[type=radio]:checked + label:before{
& + label { & + label {
&:after { &:after {
background-color: $color-gray-lighter; background-color: $color-gray-10;
} }
} }

10
frontend/resources/styles/main/layouts/library-page.scss
View file

@ -4,7 +4,7 @@
grid-template-rows: 40px 1fr; grid-template-rows: 40px 1fr;
grid-template-columns: 14.5rem 1fr; grid-template-columns: 14.5rem 1fr;
grid-template-areas: "header header" "sidebar content"; grid-template-areas: "header header" "sidebar content";
border-right: 1px solid $color-gray; border-right: 1px solid $color-gray-30;
& .main-bar { & .main-bar {
grid-area: header; grid-area: header;
@ -47,7 +47,7 @@
.library-header-navigation-item { .library-header-navigation-item {
margin: 0 $size-6; margin: 0 $size-6;
color: $color-gray; color: $color-gray-30;
text-transform: uppercase; text-transform: uppercase;
border-bottom: 1px solid transparent; border-bottom: 1px solid transparent;
@ -257,7 +257,7 @@
} }
.library-card-footer { .library-card-footer {
border-top: 1px solid $color-gray-lighter; border-top: 1px solid $color-gray-10;
padding: $size-2 $size-2 $size-2 $size-4; padding: $size-2 $size-2 $size-2 $size-4;
display: grid; display: grid;
grid-template-rows: 50% 50%; grid-template-rows: 50% 50%;
@ -289,7 +289,7 @@
} }
.library-card-footer-color-label { .library-card-footer-color-label {
color: $color-gray; color: $color-gray-30;
margin-right: 0.25rem; margin-right: 0.25rem;
} }
@ -326,7 +326,7 @@
& .sketch-picker { & .sketch-picker {
box-shadow: none !important; box-shadow: none !important;
border: 1px solid $color-gray-lighter !important; border: 1px solid $color-gray-10 !important;
border-radius: 0 !important; border-radius: 0 !important;
& input { & input {

8
frontend/resources/styles/main/layouts/login.scss
View file

@ -7,7 +7,7 @@
.login { .login {
align-items: center; align-items: center;
background-color: $color-gray-dark; background-color: $color-gray-40;
background-image: url("/images/login-bg.jpg"); background-image: url("/images/login-bg.jpg");
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -45,7 +45,7 @@
margin-bottom: $big*2; margin-bottom: $big*2;
@include placeholder { @include placeholder {
color: $color-gray; color: $color-gray-30;
} }
&:hover { &:hover {
@ -58,7 +58,7 @@
&:focus { &:focus {
background-color: $color-white; background-color: $color-white;
border-color: $color-gray-lighter; border-color: $color-gray-10;
} }
&.success { &.success {
@ -87,7 +87,7 @@
margin: $big 0; margin: $big 0;
label { label {
color: $color-gray-light; color: $color-gray-20;
} }
} }

8
frontend/resources/styles/main/partials/activity-bar.scss
View file

@ -22,14 +22,14 @@
} }
h4 { h4 {
color: $color-gray-dark; color: $color-gray-40;
font-size: $fs16; font-size: $fs16;
font-weight: bold; font-weight: bold;
margin-bottom: $x-small; margin-bottom: $x-small;
} }
.date-ribbon { .date-ribbon {
background-color: lighten($color-gray-light, 12%); background-color: lighten($color-gray-20, 12%);
color: $color-white; color: $color-white;
font-size: $fs12; font-size: $fs12;
font-weight: bold; font-weight: bold;
@ -39,7 +39,7 @@
} }
.activity-input { .activity-input {
border-bottom: 1px solid $color-gray-lighter; border-bottom: 1px solid $color-gray-10;
display: flex; display: flex;
font-size: $fs13; font-size: $fs13;
padding: $small; padding: $small;
@ -70,7 +70,7 @@
} }
.activity-time { .activity-time {
color: $color-gray-light; color: $color-gray-20;
font-size: $fs11; font-size: $fs11;
font-style: italic; font-style: italic;
} }

44
frontend/resources/styles/main/partials/color-palette.scss
View file

@ -22,7 +22,7 @@
cursor: pointer; cursor: pointer;
svg { svg {
fill: $color-gray-light; fill: $color-gray-20;
height: 1rem; height: 1rem;
margin: 0 .5rem; margin: 0 .5rem;
width: 1rem; width: 1rem;
@ -30,7 +30,7 @@
&:hover { &:hover {
svg { svg {
fill: $color-gray-darker; fill: $color-gray-50;
} }
} }
&.disabled { &.disabled {
@ -89,7 +89,7 @@
.btn-palette { .btn-palette {
align-items: center; align-items: center;
border: 2px solid $color-gray-lighter; border: 2px solid $color-gray-10;
border-radius: 50%; border-radius: 50%;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
@ -97,14 +97,14 @@
justify-content: center; justify-content: center;
padding: .6rem; padding: .6rem;
svg { svg {
fill: $color-gray-lighter; fill: $color-gray-10;
height: 20px; height: 20px;
width: 20px; width: 20px;
} }
&:hover { &:hover {
border-color: $color-gray-dark; border-color: $color-gray-40;
svg { svg {
fill: $color-gray-dark; fill: $color-gray-40;
} }
} }
&.current { &.current {
@ -143,26 +143,26 @@
flex-basis: 66px; flex-basis: 66px;
.color { .color {
background-color: $color-gray-lighter; background-color: $color-gray-10;
border: 2px solid $color-gray-60; border: 2px solid $color-gray-60;
border-radius: 50%; border-radius: 50%;
flex-shrink: 0; flex-shrink: 0;
padding: 1.5rem; padding: 1.5rem;
} }
.color-text { .color-text {
color: $color-gray-light; color: $color-gray-20;
font-size: $fs12; font-size: $fs12;
} }
&.current { &.current {
.color { .color {
border-color: $color-gray-darker; border-color: $color-gray-50;
} }
.color-text { .color-text {
color: $color-gray-darker; color: $color-gray-50;
font-weight: bold; font-weight: bold;
} }
&::before { &::before {
background-color: $color-gray-darker; background-color: $color-gray-50;
border-radius: 3px; border-radius: 3px;
color: $color-white; color: $color-white;
content: "selected"; content: "selected";
@ -175,10 +175,10 @@
} }
&:hover { &:hover {
.color { .color {
border-color: $color-gray-darker; border-color: $color-gray-50;
} }
.color-text { .color-text {
color: $color-gray-darker; color: $color-gray-50;
} }
} }
&.add-color { &.add-color {
@ -186,14 +186,14 @@
.color { .color {
align-items: center; align-items: center;
background-color: $color-gray-50; background-color: $color-gray-50;
border: 3px dashed $color-gray-lighter; border: 3px dashed $color-gray-10;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
justify-content: center; justify-content: center;
margin-bottom: 1rem; margin-bottom: 1rem;
padding: .6rem; padding: .6rem;
svg { svg {
fill: $color-gray-lighter; fill: $color-gray-10;
height: 30px; height: 30px;
width: 30px; width: 30px;
} }
@ -203,13 +203,13 @@
} }
&:hover { &:hover {
.color { .color {
border-color: $color-gray; border-color: $color-gray-30;
svg { svg {
fill: $color-gray; fill: $color-gray-30;
} }
} }
.color-text { .color-text {
color: $color-gray-dark; color: $color-gray-40;
} }
} }
} }
@ -220,7 +220,7 @@
cursor: pointer; cursor: pointer;
flex-shrink: 0; flex-shrink: 0;
svg { svg {
fill: $color-gray-light; fill: $color-gray-20;
height: 25px; height: 25px;
transform: rotate(45deg); transform: rotate(45deg);
width: 25px; width: 25px;
@ -234,7 +234,7 @@
.color-tooltip { .color-tooltip {
background-color: $color-gray-50; background-color: $color-gray-50;
border: 1px solid $color-gray-lighter; border: 1px solid $color-gray-10;
border-radius: 3px; border-radius: 3px;
left: -102px; left: -102px;
padding: 1rem; padding: 1rem;
@ -251,8 +251,8 @@
&::after { &::after {
background-color: $color-gray-50; background-color: $color-gray-50;
bottom: -32px; bottom: -32px;
border-bottom: 1px solid $color-gray-lighter; border-bottom: 1px solid $color-gray-10;
border-right: 1px solid $color-gray-lighter; border-right: 1px solid $color-gray-10;
content: ""; content: "";
height: 20px; height: 20px;
left: 105px; left: 105px;

23
frontend/resources/styles/main/partials/dashboard-grid.scss
View file

@ -30,7 +30,7 @@
cursor: pointer; cursor: pointer;
svg { svg {
transform: rotate(45deg); transform: rotate(45deg);
fill: $color-gray; fill: $color-gray-30;
height: 20px; height: 20px;
width: 20px; width: 20px;
} }
@ -48,7 +48,7 @@
cursor: pointer; cursor: pointer;
svg { svg {
fill: $color-gray; fill: $color-gray-30;
height: 20px; height: 20px;
margin: 0 10px; margin: 0 10px;
width: 20px; width: 20px;
@ -57,7 +57,7 @@
&:hover { &:hover {
svg { svg {
fill: $color-gray-darker; fill: $color-gray-50;
} }
} }
@ -156,7 +156,7 @@
} }
&.add-file { &.add-file {
border: 1px dashed $color-gray-light; border: 1px dashed $color-gray-20;
justify-content: center; justify-content: center;
box-shadow: none; box-shadow: none;
@ -196,7 +196,7 @@
width: 100%; width: 100%;
svg { svg {
fill: $color-gray-light; fill: $color-gray-20;
height: 14px; height: 14px;
margin-right: $x-small; margin-right: $x-small;
width: 14px; width: 14px;
@ -279,8 +279,8 @@
// IMAGES SECTION // IMAGES SECTION
&.images-th { &.images-th {
border: 1px dashed $color-gray-light; border: 1px dashed $color-gray-20;
border-bottom: 2px solid lighten($color-gray-light, 12%); border-bottom: 2px solid lighten($color-gray-20, 12%);
&:hover { &:hover {
border-color: $color-primary; border-color: $color-primary;
@ -311,7 +311,7 @@
} }
.color-data { .color-data {
color: $color-gray; color: $color-gray-30;
margin-top: 15px; margin-top: 15px;
} }
@ -431,7 +431,7 @@
padding-bottom: $medium; padding-bottom: $medium;
&.title { &.title {
color: $color-gray-darker; color: $color-gray-50;
} }
} }
@ -447,6 +447,11 @@
margin: $size-4; margin: $size-4;
padding: 3rem; padding: 3rem;
width: 100%; width: 100%;
.grid-files-desc {
color: $color-gray-40;
margin-bottom: $medium;
}
} }
.grid-files-link-text { .grid-files-link-text {

2
frontend/resources/styles/main/partials/editable-label.scss
View file

@ -21,7 +21,7 @@
padding: 3px 5px; padding: 3px 5px;
& svg { & svg {
fill: $color-gray; fill: $color-gray-30;
height: 15px; height: 15px;
transform: rotate(45deg) translateY(7px); transform: rotate(45deg) translateY(7px);
width: 15px; width: 15px;

8
frontend/resources/styles/main/partials/library-bar.scss
View file

@ -9,7 +9,7 @@
background-color: $color-white; background-color: $color-white;
.library-bar-inside { .library-bar-inside {
border-right: 1px solid $color-gray-lighter; border-right: 1px solid $color-gray-10;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
@ -26,7 +26,7 @@
li { li {
background-color: $color-white; background-color: $color-white;
border-bottom: 2px solid transparent; border-bottom: 2px solid transparent;
color: $color-gray; color: $color-gray-30;
cursor: pointer; cursor: pointer;
font-size: $fs14; font-size: $fs14;
padding: .6rem; padding: .6rem;
@ -108,7 +108,7 @@
padding: 3px 5px; padding: 3px 5px;
svg { svg {
fill: $color-gray; fill: $color-gray-30;
height: 15px; height: 15px;
transform: rotate(45deg) translateY(7px); transform: rotate(45deg) translateY(7px);
width: 15px; width: 15px;
@ -117,7 +117,7 @@
} }
.element-subtitle { .element-subtitle {
color: $color-gray-light; color: $color-gray-20;
font-style: italic; font-style: italic;
} }

16
frontend/resources/styles/main/partials/lightbox.scss
View file

@ -62,12 +62,12 @@
.toggle-layout { .toggle-layout {
svg { svg {
fill: $color-gray; fill: $color-gray-30;
height: 20px; height: 20px;
width: 20px; width: 20px;
&:hover { &:hover {
fill: $color-gray-darker; fill: $color-gray-50;
} }
} }
@ -134,12 +134,12 @@
margin: 1rem; margin: 1rem;
.big-svg { .big-svg {
background-color: $color-gray-lighter; background-color: $color-gray-10;
border-radius: $br-medium; border-radius: $br-medium;
padding: 3rem; padding: 3rem;
svg { svg {
fill: $color-gray; fill: $color-gray-30;
height: 40px; height: 40px;
width: 40px; width: 40px;
} }
@ -155,7 +155,7 @@
} }
.text { .text {
color: $color-gray-light; color: $color-gray-20;
margin-top: .5rem; margin-top: .5rem;
} }
@ -251,8 +251,8 @@
} }
.confirm-dialog-cancel-button { .confirm-dialog-cancel-button {
border: 1px solid $color-gray; border: 1px solid $color-gray-30;
background: $color-gray-lightest; background: $color-canvas;
border-radius: 2px; border-radius: 2px;
padding: 0.5rem; padding: 0.5rem;
margin-right: 1rem; margin-right: 1rem;
@ -262,7 +262,7 @@
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background: $color-gray-light; background: $color-gray-20;
} }
} }

10
frontend/resources/styles/main/partials/project-bar.scss
View file

@ -7,7 +7,7 @@
.project-bar { .project-bar {
background-color: $color-gray-50; background-color: $color-gray-50;
border-right: 1px solid $color-gray-lighter; border-right: 1px solid $color-gray-10;
bottom: 0; bottom: 0;
height: 100%; height: 100%;
left: 50px; left: 50px;
@ -27,7 +27,7 @@
padding-top: 60px; padding-top: 60px;
.project-name { .project-name {
border-bottom: 1px solid $color-gray-lighter; border-bottom: 1px solid $color-gray-10;
font-size: $fs14; font-size: $fs14;
font-weight: bold; font-weight: bold;
padding: 0 $small; padding: 0 $small;
@ -57,7 +57,7 @@
position: relative; position: relative;
svg { svg {
fill: $color-gray-light; fill: $color-gray-20;
height: 12px; height: 12px;
margin-right: $x-small; margin-right: $x-small;
width: 12px; width: 12px;
@ -84,13 +84,13 @@
top: 40%; top: 40%;
svg { svg {
fill: $color-gray-light; fill: $color-gray-20;
height: 12px; height: 12px;
margin-right: $small; margin-right: $small;
width: 12px; width: 12px;
&:hover { &:hover {
fill: $color-gray-dark; fill: $color-gray-40;
} }
} }

4
frontend/resources/styles/main/partials/sidebar-align-options.scss
View file

@ -27,7 +27,7 @@
svg { svg {
height: 16px; height: 16px;
width: 16px; width: 16px;
fill: $color-gray-light; fill: $color-gray-20;
} }
&:hover { &:hover {
@ -41,7 +41,7 @@
background-color: transparent; background-color: transparent;
cursor: default; cursor: default;
svg { svg {
fill: $color-gray-dark; fill: $color-gray-40;
} }
} }
} }

2
frontend/resources/styles/main/partials/sidebar-element-options.scss
View file

@ -351,7 +351,7 @@
} }
.color-th { .color-th {
background-color: $color-gray-lighter; background-color: $color-gray-10;
border: 1px solid $color-gray-10; border: 1px solid $color-gray-10;
border-radius: $br-small; border-radius: $br-small;
cursor: pointer; cursor: pointer;

4
frontend/resources/styles/main/partials/tool-bar.scss
View file

@ -6,7 +6,7 @@
// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com> // Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
.tool-bar { .tool-bar {
background-color: $color-gray-dark; background-color: $color-gray-40;
bottom: 0; bottom: 0;
height: 100%; height: 100%;
position: fixed; position: fixed;
@ -27,7 +27,7 @@
margin-bottom: $big; margin-bottom: $big;
svg { svg {
fill: $color-gray-light; fill: $color-gray-20;
height: 25px; height: 25px;
width: 25px; width: 25px;
} }

2
frontend/resources/styles/main/partials/user-settings.scss
View file

@ -17,7 +17,7 @@
.nav-item { .nav-item {
margin: 0 $size-6; margin: 0 $size-6;
color: $color-gray; color: $color-gray-30;
text-transform: uppercase; text-transform: uppercase;
border-bottom: 1px solid transparent; border-bottom: 1px solid transparent;

2
frontend/resources/styles/main/partials/workspace.scss
View file

@ -175,7 +175,7 @@
} }
.workspace-frame-label { .workspace-frame-label {
fill: $color-gray-dark; fill: $color-gray-40;
font-size: $fs12; font-size: $fs12;
} }