Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-15 09:11:21 -05:00
Code Issues Activity

Merge pull request #175 from uxbox/250/review-color-variables

Browse source 
Change color variables
This commit is contained in:
Hirunatan 2020-04-14 11:20:49 +02:00 • committed by GitHub
commit 043cf27ace
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 93 additions and 1260 deletions
Show stats 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
// 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>
// Copyright (c) 2015-2020 Andrey Antukh <niwi@niwi.nz>
// Copyright (c) 2015-2020 Juan de la Cruz <delacruzgarciajuan@gmail.com>
// Colors
$color-white: #ffffff;
$color-black: #000000;
$color-gray: #90969d;
$color-canvas: #E8E9EA;
// Main color
$color-primary: #31EFB8;
// Secondary colors
$color-success: #b6dd75;
$color-success: #49D793;
$color-complete : #a599c6;
$color-warning: #e6a16f;
$color-danger: #de4762;
$color-warning: #FC8802;
$color-danger: #E65244;
$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
$mix-percentage-dark: 81%;
$mix-percentage-darker: 60%;
@ -28,19 +35,6 @@ $mix-percentage-light: 80%;
$mix-percentage-lighter: 20%;
$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
$color-success-light: mix($color-success, $color-white, $mix-percentage-light);
$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 {
@extend %btn;
background: $color-gray;
background: $color-gray-30;
color: $color-white;
&:hover {
background: $color-gray-dark;
background: $color-gray-40;
}
}
@ -259,7 +259,7 @@ ul.slider-dots {
}
.tag {
background-color: $color-gray-light;
background-color: $color-gray-20;
border-radius: 3px;
color: $color-white;
cursor: pointer;
@ -270,7 +270,7 @@ ul.slider-dots {
text-transform: uppercase;
&:hover {
background-color: $color-gray-dark;
background-color: $color-gray-40;
}
&.tag-primary {
@ -539,7 +539,7 @@ input.element-name {
& + label {
&: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 {
&: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-columns: 14.5rem 1fr;
grid-template-areas: "header header" "sidebar content";
border-right: 1px solid $color-gray;
border-right: 1px solid $color-gray-30;
& .main-bar {
grid-area: header;
@ -47,7 +47,7 @@
.library-header-navigation-item {
margin: 0 $size-6;
color: $color-gray;
color: $color-gray-30;
text-transform: uppercase;
border-bottom: 1px solid transparent;
@ -257,7 +257,7 @@
}
.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;
display: grid;
grid-template-rows: 50% 50%;
@ -289,7 +289,7 @@
}
.library-card-footer-color-label {
color: $color-gray;
color: $color-gray-30;
margin-right: 0.25rem;
}
@ -326,7 +326,7 @@
& .sketch-picker {
box-shadow: none !important;
border: 1px solid $color-gray-lighter !important;
border: 1px solid $color-gray-10 !important;
border-radius: 0 !important;
& input {

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

@ -7,7 +7,7 @@
.login {
align-items: center;
background-color: $color-gray-dark;
background-color: $color-gray-40;
background-image: url("/images/login-bg.jpg");
background-position: center;
background-repeat: no-repeat;
@ -45,7 +45,7 @@
margin-bottom: $big*2;
@include placeholder {
color: $color-gray;
color: $color-gray-30;
}
&:hover {
@ -58,7 +58,7 @@
&:focus {
background-color: $color-white;
border-color: $color-gray-lighter;
border-color: $color-gray-10;
}
&.success {
@ -87,7 +87,7 @@
margin: $big 0;
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 {
color: $color-gray-dark;
color: $color-gray-40;
font-size: $fs16;
font-weight: bold;
margin-bottom: $x-small;
}
.date-ribbon {
background-color: lighten($color-gray-light, 12%);
background-color: lighten($color-gray-20, 12%);
color: $color-white;
font-size: $fs12;
font-weight: bold;
@ -39,7 +39,7 @@
}
.activity-input {
border-bottom: 1px solid $color-gray-lighter;
border-bottom: 1px solid $color-gray-10;
display: flex;
font-size: $fs13;
padding: $small;
@ -70,7 +70,7 @@
}
.activity-time {
color: $color-gray-light;
color: $color-gray-20;
font-size: $fs11;
font-style: italic;
}

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

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

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

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

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

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

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

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

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

@ -62,12 +62,12 @@
.toggle-layout {
svg {
fill: $color-gray;
fill: $color-gray-30;
height: 20px;
width: 20px;
&:hover {
fill: $color-gray-darker;
fill: $color-gray-50;
}
}
@ -134,12 +134,12 @@
margin: 1rem;
.big-svg {
background-color: $color-gray-lighter;
background-color: $color-gray-10;
border-radius: $br-medium;
padding: 3rem;
svg {
fill: $color-gray;
fill: $color-gray-30;
height: 40px;
width: 40px;
}
@ -155,7 +155,7 @@
}
.text {
color: $color-gray-light;
color: $color-gray-20;
margin-top: .5rem;
}
@ -251,8 +251,8 @@
}
.confirm-dialog-cancel-button {
border: 1px solid $color-gray;
background: $color-gray-lightest;
border: 1px solid $color-gray-30;
background: $color-canvas;
border-radius: 2px;
padding: 0.5rem;
margin-right: 1rem;
@ -262,7 +262,7 @@
cursor: pointer;
&: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 {
background-color: $color-gray-50;
border-right: 1px solid $color-gray-lighter;
border-right: 1px solid $color-gray-10;
bottom: 0;
height: 100%;
left: 50px;
@ -27,7 +27,7 @@
padding-top: 60px;
.project-name {
border-bottom: 1px solid $color-gray-lighter;
border-bottom: 1px solid $color-gray-10;
font-size: $fs14;
font-weight: bold;
padding: 0 $small;
@ -57,7 +57,7 @@
position: relative;
svg {
fill: $color-gray-light;
fill: $color-gray-20;
height: 12px;
margin-right: $x-small;
width: 12px;
@ -84,13 +84,13 @@
top: 40%;
svg {
fill: $color-gray-light;
fill: $color-gray-20;
height: 12px;
margin-right: $small;
width: 12px;
&: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 {
height: 16px;
width: 16px;
fill: $color-gray-light;
fill: $color-gray-20;
}
&:hover {
@ -41,7 +41,7 @@
background-color: transparent;
cursor: default;
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 {
background-color: $color-gray-lighter;
background-color: $color-gray-10;
border: 1px solid $color-gray-10;
border-radius: $br-small;
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>
.tool-bar {
background-color: $color-gray-dark;
background-color: $color-gray-40;
bottom: 0;
height: 100%;
position: fixed;
@ -27,7 +27,7 @@
margin-bottom: $big;
svg {
fill: $color-gray-light;
fill: $color-gray-20;
height: 25px;
width: 25px;
}

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

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

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

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