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

♻️ Remove duplicated color tokens

Browse source
This commit is contained in:
Eva Marco 2024-07-23 13:07:01 +02:00
parent 00c5d58203
commit 2c5289d338
44 changed files with 264 additions and 357 deletions
Download patch file Download diff file Expand all files Collapse all files

2
frontend/resources/styles/common/base.scss
View file

@ -111,7 +111,7 @@ h4 {
}
hr {
border-top: solid 1px var(--db-primary);
border-top: solid 1px var(--color-background-primary);
border-right: 0;
border-left: 0;
border-bottom: 0;

0
frontend/resources/styles/common/refactor/themes/hljs-dark-theme.scss → frontend/resources/styles/common/dependencies/_hljs-dark-theme.scss
View file

0
frontend/resources/styles/common/refactor/themes/hljs-light-theme.scss → frontend/resources/styles/common/dependencies/_hljs-light-theme.scss
View file

15
frontend/resources/styles/common/dependencies/highlight.scss Normal file
View file

@ -0,0 +1,15 @@
// 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) KALEIDOS INC
@use "sass:meta";
:root {
@include meta.load-css("./_hljs-dark-theme.scss");
}
.light {
@include meta.load-css("./_hljs-light-theme.scss");
}

72
frontend/resources/styles/common/refactor/color-defs.scss
View file

@ -9,83 +9,49 @@
:root {
// DARK
// Dark background
--db-primary: #18181a;
--db-primary-60: #{color.change(#18181a, $alpha: 0.6)};
--db-secondary: #000000;
--db-secondary-30: #{color.change(#000000, $alpha: 0.3)};
--db-secondary-40: #{color.change(#000000, $alpha: 0.4)};
--db-secondary-80: #{color.change(#000000, $alpha: 0.8)};
--db-tertiary: #212426;
--db-quaternary: #2e3434;
--db-primary-60: #{color.change(#18181a, $alpha: 0.6)}; // used on overlay dark mode
//Dark foreground
--df-primary: #ffffff;
--df-secondary: #8f9da3;
--df-secondary-40: #{color.change(#8f9da3, $alpha: 0.4)}; // TODO: Check if needed
--df-secondary: #8f9da3; // Used on button disabled background dark mode, grid metadata and some svg
--df-secondary-40: #{color.change(#8f9da3, $alpha: 0.4)}; // Used on button disabled foreground dark mode
//Dark accent
--da-primary: #7efff5;
--da-primary-muted: #426158;
--da-secondary: #bb97d8;
--da-tertiary: #00d1b8;
--da-tertiary-10: #{color.change(#00d1b8, $alpha: 0.1)};
--da-tertiary-70: #{color.change(#00d1b8, $alpha: 0.7)};
--da-quaternary: #ff6fe0;
--da-tertiary-10: #{color.change(#00d1b8, $alpha: 0.1)}; // selection rect dark mode
--da-tertiary-70: #{color.change(#00d1b8, $alpha: 0.7)}; // selection rect background dark mode
// LIGHT
// Light background
--lb-primary: #ffffff;
--lb-primary-60: #{color.change(#ffffff, $alpha: 0.6)};
--lb-secondary: #e8eaee;
--lb-secondary-30: #{color.change(#e8eaee, $alpha: 0.3)};
--lb-secondary-80: #{color.change(#e8eaee, $alpha: 0.8)};
--lb-tertiary: #f3f4f6;
--lb-quaternary: #eef0f2;
--lb-primary-60: #{color.change(#ffffff, $alpha: 0.6)}; // overlay color light mode
--lb-quaternary: #eef0f2; // background disabled token
//Light foreground
--lf-primary: #000;
--lf-secondary: #495e74;
--lf-secondary-40: #{color.change(#495e74, $alpha: 0.4)};
--lf-secondary-50: #{color.change(#495e74, $alpha: 0.5)};
--lf-secondary-40: #{color.change(#495e74, $alpha: 0.4)}; // foreground disabled token
//Light accent
--la-primary: #6911d4;
--la-primary-muted: #e1d2f5;
--la-secondary: #1345aa;
--la-tertiary: #8c33eb;
--la-tertiary-10: #{color.change(#8c33eb, $alpha: 0.1)};
--la-tertiary-70: #{color.change(#8c33eb, $alpha: 0.7)};
--la-quaternary: #ff6fe0;
--la-tertiary-10: #{color.change(#8c33eb, $alpha: 0.1)}; // selection rect light mode
--la-tertiary-70: #{color.change(#8c33eb, $alpha: 0.7)}; // selection rect background light mode
// STATUS COLOR
--status-color-success-200: #a7e8d9;
--status-color-success-500: #2d9f8f;
--status-color-success-950: #0a2927;
--status-color-success-200: #a7e8d9; // Used on Register confirmation text
--status-color-success-500: #2d9f8f; // Used on accept icon, and status widget
--status-color-warning-200: #ffc8a8;
--status-color-warning-500: #fe4811;
--status-color-warning-950: #440806;
--status-color-warning-500: #fe4811; // Used on status widget, some buttons and warnings icons and elements
--status-color-error-200: #ffcada;
--status-color-error-500: #ff3277;
--status-color-error-950: #500124;
--status-color-error-500: #ff3277; // Used on discard icon, some borders and svg, and on status widget
--status-color-info-200: #bae3fd;
--status-color-info-500: #0e9be9;
--status-color-info-950: #082c49;
// Status color default will change with theme and will be defined on theme files
--status-color-info-500: #0e9be9; // used on pixel grid and status widget
//GENERIC
--color-canvas: #e8e9ea;
--color-canvas: #e8e9ea; // Not defined on DS
// APP COLORS
--app-white: #ffffff;
--app-black: #000;
--app-white: #ffffff; // Used in several places
--app-black: #000; // Used on interactions, measurements and editor files
// SOCIAL LOGIN BUTTONS
--google-login-background: #4285f4;
--google-login-background-hover: #{color.adjust(#4285f4, $lightness: -15%)};
--google-login-foreground: var(--df-primary);
--google-login-foreground: var(--app-white);
--github-login-background: #4c4c4c;
--github-login-background-hover: #{color.adjust(#4c4c4c, $lightness: -15%)};

18
frontend/resources/styles/common/refactor/common-dashboard.scss
View file

@ -53,12 +53,12 @@
align-items: center;
flex-basis: $s-140;
border-bottom: $s-3 solid transparent;
color: $df-secondary;
color: var(--color-foreground-secondary);
height: $s-40;
padding: $s-4 $s-24;
font-weight: $fw400;
&:hover {
color: $db-secondary;
color: var(--color-background-secondary);
text-decoration: none;
}
}
@ -71,7 +71,7 @@
margin-left: $s-12;
h1 {
color: $df-primary;
color: var(--color-foreground-primary);
display: block;
flex-shrink: 0;
font-size: $fs-24;
@ -95,13 +95,13 @@
cursor: pointer;
svg {
stroke: $df-secondary;
stroke: var(--color-foreground-secondary);
fill: none;
width: $s-16;
height: $s-16;
&:hover {
stroke: $da-tertiary;
stroke: var(--color-accent-tertiary);
fill: none;
}
}
@ -122,15 +122,15 @@
li {
a {
font-size: $s-16;
color: $df-secondary;
color: var(--color-foreground-secondary);
border-color: transparent;
&:hover {
color: $df-primary;
color: var(--color-foreground-primary);
}
}
&.active {
a {
color: $df-primary;
color: var(--color-foreground-primary);
}
}
}
@ -146,7 +146,7 @@
.btn-secondary {
@extend .button-secondary;
color: $df-primary;
color: var(--color-foreground-primary);
font-size: $fs-12;
text-transform: uppercase;
padding: 0 $s-16;

16
frontend/resources/styles/common/refactor/common-refactor.scss
View file

@ -18,19 +18,3 @@
@import "common/refactor/focus.scss";
@import "common/refactor/animations.scss";
@import "common/refactor/basic-rules.scss";
// Variables to use the library colors
$db-primary: var(--color-background-primary);
$db-secondary: var(--color-background-secondary);
$db-tertiary: var(--color-background-tertiary);
$db-quaternary: var(--color-background-quaternary);
$db-subtle: var(--color-background-subtle);
$db-disabled: var(--color-background-disabled);
$df-primary: var(--color-foreground-primary);
$df-secondary: var(--color-foreground-secondary);
$df-tertiary: var(--color-accent-quaternary);
$da-primary: var(--color-accent-primary);
$da-primary-muted: var(--color-accent-primary-muted);
$da-secondary: var(--color-accent-secondary);
$da-tertiary: var(--color-accent-tertiary);

29
frontend/resources/styles/common/refactor/design-tokens.scss
View file

@ -215,7 +215,7 @@
--menu-shortcut-foreground-color: var(--color-foreground-secondary);
--menu-shortcut-foreground-color-selected: var(--color-foreground-primary);
--menu-shortcut-foreground-color-hover: var(--color-foreground-primary);
--menu-shadow-color: var(--shadow-color);
--menu-shadow-color: var(--color-shadow);
--menu-background-color-disabled: var(--color-background-primary);
--menu-foreground-color-disabled: var(--color-foreground-secondary);
--menu-border-color-disabled: var(--color-background-quaternary);
@ -242,6 +242,7 @@
--assets-component-border-color: var(--color-background-tertiary);
--assets-component-border-selected: var(--color-accent-tertiary);
--assets-component-second-border-selected: var(--color-background-primary);
--assets-component-hightlight: var(--color-accent-secondary);
--radio-btns-background-color: var(--color-background-tertiary);
--radio-btn-background-color-selected: var(--color-background-quaternary);
@ -323,25 +324,25 @@
--alert-icon-foreground-color-default: var(--color-foreground-primary);
--alert-border-color-default: var(--color-background-quaternary);
--alert-background-color-success: var(--color-success-background);
--alert-background-color-success: var(--color-background-success);
--alert-text-foreground-color-success: var(--color-foreground-primary);
--alert-icon-foreground-color-success: var(--color-success-foreground);
--alert-border-color-success: var(--color-success-foreground);
--alert-icon-foreground-color-success: var(--color-accent-success);
--alert-border-color-success: var(--color-accent-success);
--alert-background-color-warning: var(--color-warning-background);
--alert-background-color-warning: var(--color-background-warning);
--alert-text-foreground-color-warning: var(--color-foreground-primary);
--alert-icon-foreground-color-warning: var(--color-warning-foreground);
--alert-border-color-warning: var(--color-warning-foreground);
--alert-icon-foreground-color-warning: var(--color-accent-warning);
--alert-border-color-warning: var(--color-accent-warning);
--alert-background-color-error: var(--color-error-background);
--alert-background-color-error: var(--color-background-error);
--alert-text-foreground-color-error: var(--color-foreground-primary);
--alert-icon-foreground-color-error: var(--color-error-foreground);
--alert-border-color-error: var(--color-error-foreground);
--alert-icon-foreground-color-error: var(--color-accent-error);
--alert-border-color-error: var(--color-accent-error);
--alert-background-color-info: var(--color-info-background);
--alert-background-color-info: var(--color-background-info);
--alert-text-foreground-color-info: var(--color-foreground-primary);
--alert-icon-foreground-color-info: var(--color-info-foreground);
--alert-border-color-info: var(--color-info-foreground);
--alert-icon-foreground-color-info: var(--color-accent-info);
--alert-border-color-info: var(--color-accent-info);
--alert-text-foreground-color-focus: var(--color-accent-primary);
--alert-border-color-focus: var(--color-accent-primary);
@ -372,7 +373,7 @@
--pill-foreground-color: var(--color-foreground-primary);
--link-foreground-color: var(--color-accent-primary);
--register-confirmation-color: var(--status-color-success-200);
--register-confirmation-color: var(--status-color-success-200); //TODO: review this color
--resize-area-background-color: var(--color-background-primary);
--resize-area-border-color: var(--color-background-quaternary);

32
frontend/resources/styles/common/refactor/themes/default-theme.scss
View file

@ -7,39 +7,9 @@
@use "sass:meta";
:root {
--color-background-primary: var(--db-primary);
--color-background-secondary: var(--db-secondary);
--color-background-tertiary: var(--db-tertiary);
--color-background-quaternary: var(--db-quaternary);
--color-background-subtle: var(--db-secondary-30);
--color-background-disabled: var(--df-secondary);
--color-foreground-primary: var(--df-primary);
--color-foreground-secondary: var(--df-secondary);
--color-foreground-disabled: var(--df-secondary-40);
--color-accent-primary: var(--da-primary);
--color-accent-primary-muted: var(--da-primary-muted);
--color-accent-secondary: var(--da-secondary);
--color-accent-tertiary: var(--da-tertiary);
--color-accent-tertiary-muted: var(--da-tertiary-10);
--color-accent-quaternary: var(--da-quaternary);
--color-component-highlight: var(--da-secondary);
--color-success-background: var(--status-color-success-950);
--color-success-foreground: var(--status-color-success-500);
--color-warning-background: var(--status-color-warning-950);
--color-warning-foreground: var(--status-color-warning-500);
--color-error-background: var(--status-color-error-950);
--color-error-foreground: var(--status-color-error-500);
--color-info-background: var(--status-color-info-950);
--color-info-foreground: var(--status-color-info-500);
--color-accent-tertiary-muted: var(--da-tertiary-10); // selection rect
--overlay-color: var(--db-primary-60);
--shadow-color: var(--db-secondary-30);
--radio-button-box-shadow: 0 0 0 1px var(--db-secondary-30) inset;
@include meta.load-css("hljs-dark-theme");
}

30
frontend/resources/styles/common/refactor/themes/light-theme.scss
View file

@ -7,39 +7,9 @@
@use "sass:meta";
.light {
--color-background-primary: var(--lb-primary);
--color-background-secondary: var(--lb-secondary);
--color-background-tertiary: var(--lb-tertiary);
--color-background-quaternary: var(--lb-quaternary);
--color-background-subtle: var(--lb-secondary-30); //Whatch this¡¡
--color-background-disabled: var(--lb-quaternary);
--color-foreground-primary: var(--lf-primary);
--color-foreground-secondary: var(--lf-secondary);
--color-foreground-disabled: var(--lf-secondary-40);
--color-accent-primary: var(--la-primary);
--color-accent-primary-muted: var(--la-primary-muted);
--color-accent-secondary: var(--la-secondary);
--color-accent-tertiary: var(--la-tertiary);
--color-accent-tertiary-muted: var(--la-tertiary-10);
--color-accent-quaternary: var(--la-quaternary);
--color-component-highlight: var(--la-secondary);
--color-success-background: var(--status-color-success-200);
--color-success-foreground: var(--status-color-success-500);
--color-warning-background: var(--status-color-warning-200);
--color-warning-foreground: var(--status-color-warning-500);
--color-error-background: var(--status-color-error-200);
--color-error-foreground: var(--status-color-error-500);
--color-info-background: var(--status-color-info-200);
--color-info-foreground: var(--status-color-info-500);
--overlay-color: var(--lb-primary-60);
--shadow-color: var(--lf-secondary-40);
--radio-button-box-shadow: 0 0 0 1px var(--lb-secondary) inset;
@include meta.load-css("hljs-light-theme");
}

1
frontend/resources/styles/main-default.scss
View file

@ -12,6 +12,7 @@
@import "common/refactor/color-defs.scss";
@import "common/dependencies/fonts";
@import "common/dependencies/animations";
@import "common/dependencies/highlight.scss";
@import "common/refactor/themes.scss";
@import "common/refactor/design-tokens.scss";