3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-08 00:15:54 +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
Show stats 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 { hr {
border-top: solid 1px var(--db-primary); border-top: solid 1px var(--color-background-primary);
border-right: 0; border-right: 0;
border-left: 0; border-left: 0;
border-bottom: 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 { :root {
// DARK // DARK
// Dark background // Dark background
--db-primary: #18181a; --db-primary-60: #{color.change(#18181a, $alpha: 0.6)}; // used on overlay dark mode
--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;
//Dark foreground //Dark foreground
--df-primary: #ffffff; --df-secondary: #8f9da3; // Used on button disabled background dark mode, grid metadata and some svg
--df-secondary: #8f9da3; --df-secondary-40: #{color.change(#8f9da3, $alpha: 0.4)}; // Used on button disabled foreground dark mode
--df-secondary-40: #{color.change(#8f9da3, $alpha: 0.4)}; // TODO: Check if needed
//Dark accent //Dark accent
--da-primary: #7efff5; --da-tertiary-10: #{color.change(#00d1b8, $alpha: 0.1)}; // selection rect dark mode
--da-primary-muted: #426158; --da-tertiary-70: #{color.change(#00d1b8, $alpha: 0.7)}; // selection rect background dark mode
--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;
// LIGHT // LIGHT
// Light background // Light background
--lb-primary: #ffffff; --lb-primary-60: #{color.change(#ffffff, $alpha: 0.6)}; // overlay color light mode
--lb-primary-60: #{color.change(#ffffff, $alpha: 0.6)}; --lb-quaternary: #eef0f2; // background disabled token
--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;
//Light foreground //Light foreground
--lf-primary: #000; --lf-secondary-40: #{color.change(#495e74, $alpha: 0.4)}; // foreground disabled token
--lf-secondary: #495e74;
--lf-secondary-40: #{color.change(#495e74, $alpha: 0.4)};
--lf-secondary-50: #{color.change(#495e74, $alpha: 0.5)};
//Light accent //Light accent
--la-primary: #6911d4; --la-tertiary-10: #{color.change(#8c33eb, $alpha: 0.1)}; // selection rect light mode
--la-primary-muted: #e1d2f5; --la-tertiary-70: #{color.change(#8c33eb, $alpha: 0.7)}; // selection rect background light mode
--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;
// STATUS COLOR // STATUS COLOR
--status-color-success-200: #a7e8d9; --status-color-success-200: #a7e8d9; // Used on Register confirmation text
--status-color-success-500: #2d9f8f; --status-color-success-500: #2d9f8f; // Used on accept icon, and status widget
--status-color-success-950: #0a2927;
--status-color-warning-200: #ffc8a8; --status-color-warning-500: #fe4811; // Used on status widget, some buttons and warnings icons and elements
--status-color-warning-500: #fe4811;
--status-color-warning-950: #440806;
--status-color-error-200: #ffcada; --status-color-error-500: #ff3277; // Used on discard icon, some borders and svg, and on status widget
--status-color-error-500: #ff3277;
--status-color-error-950: #500124;
--status-color-info-200: #bae3fd; --status-color-info-500: #0e9be9; // used on pixel grid and status widget
--status-color-info-500: #0e9be9;
--status-color-info-950: #082c49;
// Status color default will change with theme and will be defined on theme files
//GENERIC //GENERIC
--color-canvas: #e8e9ea; --color-canvas: #e8e9ea; // Not defined on DS
// APP COLORS // APP COLORS
--app-white: #ffffff; --app-white: #ffffff; // Used in several places
--app-black: #000; --app-black: #000; // Used on interactions, measurements and editor files
// SOCIAL LOGIN BUTTONS // SOCIAL LOGIN BUTTONS
--google-login-background: #4285f4; --google-login-background: #4285f4;
--google-login-background-hover: #{color.adjust(#4285f4, $lightness: -15%)}; --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: #4c4c4c;
--github-login-background-hover: #{color.adjust(#4c4c4c, $lightness: -15%)}; --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; align-items: center;
flex-basis: $s-140; flex-basis: $s-140;
border-bottom: $s-3 solid transparent; border-bottom: $s-3 solid transparent;
color: $df-secondary; color: var(--color-foreground-secondary);
height: $s-40; height: $s-40;
padding: $s-4 $s-24; padding: $s-4 $s-24;
font-weight: $fw400; font-weight: $fw400;
&:hover { &:hover {
color: $db-secondary; color: var(--color-background-secondary);
text-decoration: none; text-decoration: none;
} }
} }
@ -71,7 +71,7 @@
margin-left: $s-12; margin-left: $s-12;
h1 { h1 {
color: $df-primary; color: var(--color-foreground-primary);
display: block; display: block;
flex-shrink: 0; flex-shrink: 0;
font-size: $fs-24; font-size: $fs-24;
@ -95,13 +95,13 @@
cursor: pointer; cursor: pointer;
svg { svg {
stroke: $df-secondary; stroke: var(--color-foreground-secondary);
fill: none; fill: none;
width: $s-16; width: $s-16;
height: $s-16; height: $s-16;
&:hover { &:hover {
stroke: $da-tertiary; stroke: var(--color-accent-tertiary);
fill: none; fill: none;
} }
} }
@ -122,15 +122,15 @@
li { li {
a { a {
font-size: $s-16; font-size: $s-16;
color: $df-secondary; color: var(--color-foreground-secondary);
border-color: transparent; border-color: transparent;
&:hover { &:hover {
color: $df-primary; color: var(--color-foreground-primary);
} }
} }
&.active { &.active {
a { a {
color: $df-primary; color: var(--color-foreground-primary);
} }
} }
} }
@ -146,7 +146,7 @@
.btn-secondary { .btn-secondary {
@extend .button-secondary; @extend .button-secondary;
color: $df-primary; color: var(--color-foreground-primary);
font-size: $fs-12; font-size: $fs-12;
text-transform: uppercase; text-transform: uppercase;
padding: 0 $s-16; 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/focus.scss";
@import "common/refactor/animations.scss"; @import "common/refactor/animations.scss";
@import "common/refactor/basic-rules.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: var(--color-foreground-secondary);
--menu-shortcut-foreground-color-selected: var(--color-foreground-primary); --menu-shortcut-foreground-color-selected: var(--color-foreground-primary);
--menu-shortcut-foreground-color-hover: 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-background-color-disabled: var(--color-background-primary);
--menu-foreground-color-disabled: var(--color-foreground-secondary); --menu-foreground-color-disabled: var(--color-foreground-secondary);
--menu-border-color-disabled: var(--color-background-quaternary); --menu-border-color-disabled: var(--color-background-quaternary);
@ -242,6 +242,7 @@
--assets-component-border-color: var(--color-background-tertiary); --assets-component-border-color: var(--color-background-tertiary);
--assets-component-border-selected: var(--color-accent-tertiary); --assets-component-border-selected: var(--color-accent-tertiary);
--assets-component-second-border-selected: var(--color-background-primary); --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-btns-background-color: var(--color-background-tertiary);
--radio-btn-background-color-selected: var(--color-background-quaternary); --radio-btn-background-color-selected: var(--color-background-quaternary);
@ -323,25 +324,25 @@
--alert-icon-foreground-color-default: var(--color-foreground-primary); --alert-icon-foreground-color-default: var(--color-foreground-primary);
--alert-border-color-default: var(--color-background-quaternary); --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-text-foreground-color-success: var(--color-foreground-primary);
--alert-icon-foreground-color-success: var(--color-success-foreground); --alert-icon-foreground-color-success: var(--color-accent-success);
--alert-border-color-success: var(--color-success-foreground); --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-text-foreground-color-warning: var(--color-foreground-primary);
--alert-icon-foreground-color-warning: var(--color-warning-foreground); --alert-icon-foreground-color-warning: var(--color-accent-warning);
--alert-border-color-warning: var(--color-warning-foreground); --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-text-foreground-color-error: var(--color-foreground-primary);
--alert-icon-foreground-color-error: var(--color-error-foreground); --alert-icon-foreground-color-error: var(--color-accent-error);
--alert-border-color-error: var(--color-error-foreground); --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-text-foreground-color-info: var(--color-foreground-primary);
--alert-icon-foreground-color-info: var(--color-info-foreground); --alert-icon-foreground-color-info: var(--color-accent-info);
--alert-border-color-info: var(--color-info-foreground); --alert-border-color-info: var(--color-accent-info);
--alert-text-foreground-color-focus: var(--color-accent-primary); --alert-text-foreground-color-focus: var(--color-accent-primary);
--alert-border-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); --pill-foreground-color: var(--color-foreground-primary);
--link-foreground-color: var(--color-accent-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-background-color: var(--color-background-primary);
--resize-area-border-color: var(--color-background-quaternary); --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"; @use "sass:meta";
:root { :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-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-foreground-disabled: var(--df-secondary-40);
--color-accent-primary: var(--da-primary); --color-accent-tertiary-muted: var(--da-tertiary-10); // selection rect
--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);
--overlay-color: var(--db-primary-60); --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"; @use "sass:meta";
.light { .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-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-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-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); --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/refactor/color-defs.scss";
@import "common/dependencies/fonts"; @import "common/dependencies/fonts";
@import "common/dependencies/animations"; @import "common/dependencies/animations";
@import "common/dependencies/highlight.scss";
@import "common/refactor/themes.scss"; @import "common/refactor/themes.scss";
@import "common/refactor/design-tokens.scss"; @import "common/refactor/design-tokens.scss";

2
frontend/src/app/main/ui/auth.scss
View file

@ -44,7 +44,7 @@
svg { svg {
width: 100%; width: 100%;
fill: $df-primary; fill: var(--color-foreground-primary);
height: auto; height: auto;
} }

2
frontend/src/app/main/ui/auth/register.scss
View file

@ -9,7 +9,7 @@
.accept-terms-and-privacy-wrapper { .accept-terms-and-privacy-wrapper {
:global(a) { :global(a) {
color: $df-secondary; color: var(--color-foreground-secondary);
font-weight: $fw700; font-weight: $fw700;
} }
} }

2
frontend/src/app/main/ui/components/forms.scss
View file

@ -93,7 +93,7 @@
top: calc(50% - $s-8); top: calc(50% - $s-8);
svg { svg {
@extend .button-icon-small; @extend .button-icon-small;
stroke: $df-secondary; stroke: var(--color-foreground-secondary);
width: $s-16; width: $s-16;
height: $s-16; height: $s-16;
} }

10
frontend/src/app/main/ui/dashboard/comments.scss
View file

@ -32,7 +32,7 @@
font-size: $fs-12; font-size: $fs-12;
padding: $s-24; padding: $s-24;
text-align: center; text-align: center;
color: $df-secondary; color: var(--color-foreground-secondary);
} }
.comments-icon { .comments-icon {
@ -57,7 +57,7 @@
} }
&:hover { &:hover {
background-color: $db-quaternary; background-color: var(--color-background-quaternary);
--comment-icon-small-foreground-color: var(--icon-foreground-active); --comment-icon-small-foreground-color: var(--icon-foreground-active);
} }
} }
@ -69,7 +69,7 @@
.dropdown { .dropdown {
@include menuShadow; @include menuShadow;
background-color: $db-tertiary; background-color: var(--color-background-tertiary);
border-radius: $br-8; border-radius: $br-8;
border: $s-1 solid transparent; border: $s-1 solid transparent;
bottom: $s-4; bottom: $s-4;
@ -82,7 +82,7 @@
hr { hr {
margin: 0; margin: 0;
border-color: $df-secondary; border-color: var(--color-foreground-secondary);
} }
} }
@ -94,7 +94,7 @@
} }
.header-title { .header-title {
color: $df-secondary; color: var(--color-foreground-secondary);
font-size: $fs-11; font-size: $fs-11;
line-height: 1.28; line-height: 1.28;
flex-grow: 1; flex-grow: 1;

2
frontend/src/app/main/ui/dashboard/files.scss
View file

@ -12,7 +12,7 @@
margin-right: $s-16; margin-right: $s-16;
overflow-y: auto; overflow-y: auto;
width: 100%; width: 100%;
border-top: $s-1 solid $db-quaternary; border-top: $s-1 solid var(--color-background-quaternary);
&.dashboard-projects { &.dashboard-projects {
user-select: none; user-select: none;

48
frontend/src/app/main/ui/dashboard/fonts.scss
View file

@ -8,7 +8,7 @@
@use "common/refactor/common-dashboard"; @use "common/refactor/common-dashboard";
.dashboard-fonts { .dashboard-fonts {
border-top: $s-1 solid $db-quaternary; border-top: $s-1 solid var(--color-background-quaternary);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding-left: $s-120; padding-left: $s-120;
@ -31,18 +31,18 @@
h3 { h3 {
font-size: $fs-14; font-size: $fs-14;
color: $df-secondary; color: var(--color-foreground-secondary);
margin: $s-4; margin: $s-4;
} }
.font-item { .font-item {
color: $db-secondary; color: var(--color-background-secondary);
} }
} }
.installed-fonts-header { .installed-fonts-header {
align-items: center; align-items: center;
color: $df-secondary; color: var(--color-foreground-secondary);
display: flex; display: flex;
font-size: $fs-12; font-size: $fs-12;
height: $s-40; height: $s-40;
@ -65,11 +65,11 @@
justify-content: flex-end; justify-content: flex-end;
input { input {
background-color: $db-tertiary; background-color: var(--color-background-tertiary);
border-color: transparent; border-color: transparent;
border-radius: $br-8; border-radius: $br-8;
border: $s-1 solid transparent; border: $s-1 solid transparent;
color: $df-primary; color: var(--color-foreground-primary);
font-size: $fs-14; font-size: $fs-14;
height: $s-32; height: $s-32;
margin: 0; margin: 0;
@ -77,19 +77,19 @@
width: $s-152; width: $s-152;
&:focus { &:focus {
outline: $s-1 solid $da-primary; outline: $s-1 solid var(--color-accent-primary);
} }
&::placeholder { &::placeholder {
color: $df-secondary; color: var(--color-foreground-secondary);
} }
} }
} }
.font-item { .font-item {
align-items: center; align-items: center;
background-color: $db-tertiary; background-color: var(--color-background-tertiary);
border-radius: $br-4; border-radius: $br-4;
color: $df-secondary; color: var(--color-foreground-secondary);
display: flex; display: flex;
font-size: $fs-14; font-size: $fs-14;
justify-content: space-between; justify-content: space-between;
@ -103,13 +103,13 @@
margin: 0; margin: 0;
padding: $s-8; padding: $s-8;
background-color: $db-tertiary; background-color: var(--color-background-tertiary);
border-radius: $br-8; border-radius: $br-8;
color: $df-primary; color: var(--color-foreground-primary);
font-size: $fs-14; font-size: $fs-14;
&:focus { &:focus {
outline: $s-1 solid $da-primary; outline: $s-1 solid var(--color-accent-primary);
} }
} }
@ -152,16 +152,16 @@
&:hover { &:hover {
.icon svg { .icon svg {
stroke: $df-secondary; stroke: var(--color-foreground-secondary);
} }
} }
} }
} }
.table-field { .table-field {
color: $df-primary; color: var(--color-foreground-primary);
.variant { .variant {
background-color: $db-quaternary; background-color: var(--color-background-quaternary);
border-radius: $br-8; border-radius: $br-8;
margin-right: $s-4; margin-right: $s-4;
padding-right: $s-4; padding-right: $s-4;
@ -189,7 +189,7 @@
svg { svg {
width: $s-16; width: $s-16;
height: $s-16; height: $s-16;
stroke: $df-secondary; stroke: var(--color-foreground-secondary);
fill: none; fill: none;
} }
@ -204,7 +204,7 @@
background: none; background: none;
border: none; border: none;
svg { svg {
stroke: $df-secondary; stroke: var(--color-foreground-secondary);
} }
} }
} }
@ -242,15 +242,15 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: $s-24; gap: $s-24;
color: $db-secondary; color: var(--color-background-secondary);
width: $s-500; width: $s-500;
h2 { h2 {
color: $df-primary; color: var(--color-foreground-primary);
font-weight: 400; font-weight: 400;
} }
p { p {
color: $df-secondary; color: var(--color-foreground-secondary);
font-size: $fs-16; font-size: $fs-16;
} }
} }
@ -263,7 +263,7 @@
.fonts-placeholder { .fonts-placeholder {
align-items: center; align-items: center;
border-radius: $br-8; border-radius: $br-8;
border: $s-1 solid $db-quaternary; border: $s-1 solid var(--color-background-quaternary);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: $s-160; height: $s-160;
@ -273,14 +273,14 @@
width: 100%; width: 100%;
.icon svg { .icon svg {
stroke: $df-secondary; stroke: var(--color-foreground-secondary);
fill: none; fill: none;
width: $s-32; width: $s-32;
height: $s-32; height: $s-32;
} }
.label { .label {
color: $df-secondary; color: var(--color-foreground-secondary);
font-size: $fs-14; font-size: $fs-14;
} }
} }

44
frontend/src/app/main/ui/dashboard/grid.scss
View file

@ -63,7 +63,7 @@ $thumbnail-default-height: $s-168; // Default width
&.dragged { &.dragged {
border-radius: $br-4; border-radius: $br-4;
outline: $br-4 solid $da-primary; outline: $br-4 solid var(--color-accent-primary);
text-align: initial; text-align: initial;
width: calc(var(--th-width) + $s-12); width: calc(var(--th-width) + $s-12);
height: var(--th-height, #{$thumbnail-default-height}); height: var(--th-height, #{$thumbnail-default-height});
@ -71,7 +71,7 @@ $thumbnail-default-height: $s-168; // Default width
&.overlay { &.overlay {
border-radius: $br-4; border-radius: $br-4;
border: $s-2 solid $da-tertiary; border: $s-2 solid var(--color-accent-tertiary);
height: 100%; height: 100%;
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
@ -101,7 +101,7 @@ $thumbnail-default-height: $s-168; // Default width
h3 { h3 {
border: $s-1 solid transparent; border: $s-1 solid transparent;
color: $df-primary; color: var(--color-foreground-primary);
font-size: $fs-16; font-size: $fs-16;
font-weight: $fw400; font-weight: $fw400;
height: $s-28; height: $s-28;
@ -120,7 +120,7 @@ $thumbnail-default-height: $s-168; // Default width
} }
.date { .date {
color: $df-secondary; color: var(--color-foreground-secondary);
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
width: 100%; width: 100%;
@ -136,7 +136,7 @@ $thumbnail-default-height: $s-168; // Default width
} }
.item-badge { .item-badge {
background-color: $da-primary; background-color: var(--color-accent-primary);
border: none; border: none;
border-radius: $br-6; border-radius: $br-6;
position: absolute; position: absolute;
@ -149,7 +149,7 @@ $thumbnail-default-height: $s-168; // Default width
justify-content: center; justify-content: center;
svg { svg {
stroke: $db-secondary; stroke: var(--color-background-secondary);
fill: none; fill: none;
height: $s-16; height: $s-16;
width: $s-16; width: $s-16;
@ -157,18 +157,18 @@ $thumbnail-default-height: $s-168; // Default width
} }
&.add-file { &.add-file {
border: $s-1 dashed $df-secondary; border: $s-1 dashed var(--color-foreground-secondary);
justify-content: center; justify-content: center;
box-shadow: none; box-shadow: none;
span { span {
color: $db-primary; color: var(--color-background-primary);
font-size: $fs-14; font-size: $fs-14;
} }
&:hover { &:hover {
background-color: $df-primary; background-color: var(--color-foreground-primary);
border: $s-2 solid $da-tertiary; border: $s-2 solid var(--color-accent-tertiary);
} }
} }
} }
@ -179,9 +179,9 @@ $thumbnail-default-height: $s-168; // Default width
left: $s-4; left: $s-4;
width: $s-32; width: $s-32;
height: $s-32; height: $s-32;
background-color: $da-tertiary; background-color: var(--color-accent-tertiary);
border-radius: $br-circle; border-radius: $br-circle;
color: $db-secondary; color: var(--color-background-secondary);
font-size: $fs-16; font-size: $fs-16;
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -197,7 +197,7 @@ $thumbnail-default-height: $s-168; // Default width
&:hover, &:hover,
&:focus, &:focus,
&:focus-within { &:focus-within {
background-color: $db-tertiary; background-color: var(--color-background-tertiary);
.project-th-actions { .project-th-actions {
opacity: 1; opacity: 1;
} }
@ -208,7 +208,7 @@ $thumbnail-default-height: $s-168; // Default width
.selected { .selected {
.grid-item-th { .grid-item-th {
outline: $s-4 solid $da-tertiary; outline: $s-4 solid var(--color-accent-tertiary);
} }
} }
} }
@ -223,7 +223,7 @@ $thumbnail-default-height: $s-168; // Default width
width: $s-32; width: $s-32;
span { span {
color: $db-secondary; color: var(--color-background-secondary);
} }
} }
@ -290,7 +290,7 @@ $thumbnail-default-height: $s-168; // Default width
} }
.grid-item-th.library { .grid-item-th.library {
background-color: $db-tertiary; background-color: var(--color-background-tertiary);
flex-direction: column; flex-direction: column;
height: 90%; height: 90%;
justify-content: flex-start; justify-content: flex-start;
@ -299,7 +299,7 @@ $thumbnail-default-height: $s-168; // Default width
.asset-section { .asset-section {
font-size: $fs-12; font-size: $fs-12;
color: $df-secondary; color: var(--color-foreground-secondary);
&:not(:first-child) { &:not(:first-child) {
margin-top: $s-16; margin-top: $s-16;
@ -312,7 +312,7 @@ $thumbnail-default-height: $s-168; // Default width
text-transform: uppercase; text-transform: uppercase;
.num-assets { .num-assets {
color: $df-secondary; color: var(--color-foreground-secondary);
} }
} }
@ -320,7 +320,7 @@ $thumbnail-default-height: $s-168; // Default width
align-items: center; align-items: center;
border-radius: $br-4; border-radius: $br-4;
border: $s-1 solid transparent; border: $s-1 solid transparent;
color: $df-primary; color: var(--color-foreground-primary);
display: flex; display: flex;
font-size: $fs-12; font-size: $fs-12;
margin-top: $s-4; margin-top: $s-4;
@ -328,7 +328,7 @@ $thumbnail-default-height: $s-168; // Default width
position: relative; position: relative;
.name-block { .name-block {
color: $df-secondary; color: var(--color-foreground-secondary);
width: calc(100% - $s-24 - $s-8); width: calc(100% - $s-24 - $s-8);
} }
@ -349,11 +349,11 @@ $thumbnail-default-height: $s-168; // Default width
} }
.color-name { .color-name {
color: $df-primary; color: var(--color-foreground-primary);
} }
.color-value { .color-value {
color: $df-secondary; color: var(--color-foreground-secondary);
margin-left: $s-4; margin-left: $s-4;
text-transform: uppercase; text-transform: uppercase;
} }

6
frontend/src/app/main/ui/dashboard/inline_edition.scss
View file

@ -17,7 +17,7 @@
input.element-title { input.element-title {
background-color: var(--input-background-color-active); background-color: var(--input-background-color-active);
border-radius: $br-8; border-radius: $br-8;
color: $df-primary; color: var(--color-foreground-primary);
font-size: $fs-16; font-size: $fs-16;
height: $s-32; height: $s-32;
margin: 0; margin: 0;
@ -26,7 +26,7 @@ input.element-title {
width: 100%; width: 100%;
&:focus-visible { &:focus-visible {
border: $s-1 solid $da-primary; border: $s-1 solid var(--color-accent-primary);
outline: none; outline: none;
} }
} }
@ -39,7 +39,7 @@ input.element-title {
right: calc(-1 * $s-8); right: calc(-1 * $s-8);
svg { svg {
fill: $df-secondary; fill: var(--color-foreground-secondary);
height: $s-16; height: $s-16;
transform: rotate(45deg) translateY(7px); transform: rotate(45deg) translateY(7px);
width: $s-16; width: $s-16;

2
frontend/src/app/main/ui/dashboard/libraries.scss
View file

@ -12,7 +12,7 @@
margin-right: $s-16; margin-right: $s-16;
overflow-y: auto; overflow-y: auto;
width: 100%; width: 100%;
border-top: $s-1 solid $db-quaternary; border-top: $s-1 solid var(--color-background-quaternary);
&.dashboard-projects { &.dashboard-projects {
user-select: none; user-select: none;

22
frontend/src/app/main/ui/dashboard/placeholder.scss
View file

@ -19,7 +19,7 @@
85% top; 85% top;
background-repeat: no-repeat; background-repeat: no-repeat;
align-items: center; align-items: center;
border: $s-1 solid $db-quaternary; border: $s-1 solid var(--color-background-quaternary);
border-radius: $br-4; border-radius: $br-4;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -30,7 +30,7 @@
.text { .text {
a { a {
color: $df-primary; color: var(--color-foreground-primary);
} }
p { p {
max-width: $s-360; max-width: $s-360;
@ -41,9 +41,9 @@
} }
.create-new { .create-new {
background-color: $db-tertiary; background-color: var(--color-background-tertiary);
border-radius: $br-8; border-radius: $br-8;
color: $df-primary; color: var(--color-foreground-primary);
cursor: pointer; cursor: pointer;
height: $s-160; height: $s-160;
margin: $s-8; margin: $s-8;
@ -55,23 +55,23 @@
svg { svg {
width: $s-32; width: $s-32;
height: $s-32; height: $s-32;
stroke: $df-secondary; stroke: var(--color-foreground-secondary);
} }
&:hover { &:hover {
border: $s-2 solid $da-tertiary; border: $s-2 solid var(--color-accent-tertiary);
background-color: $db-quaternary; background-color: var(--color-background-quaternary);
color: $da-primary; color: var(--color-accent-primary);
svg { svg {
stroke: $da-tertiary; stroke: var(--color-accent-tertiary);
} }
} }
} }
.text { .text {
margin-top: $s-12; margin-top: $s-12;
color: $df-secondary; color: var(--color-foreground-secondary);
font-size: $fs-16; font-size: $fs-16;
} }
} }
@ -85,7 +85,7 @@
} }
.placeholder-text { .placeholder-text {
color: $df-secondary; color: var(--color-foreground-secondary);
font-size: $fs-16; font-size: $fs-16;
text-align: center; text-align: center;
} }

8
frontend/src/app/main/ui/dashboard/projects.scss
View file

@ -155,7 +155,7 @@
// Team hero // Team hero
.team-hero { .team-hero {
background-color: $db-tertiary; background-color: var(--color-background-tertiary);
border-radius: $br-8; border-radius: $br-8;
border: none; border: none;
display: flex; display: flex;
@ -185,7 +185,7 @@
.title { .title {
font-size: $fs-24; font-size: $fs-24;
color: $df-primary; color: var(--color-foreground-primary);
font-weight: $fw400; font-weight: $fw400;
} }
@ -193,11 +193,11 @@
flex: 1; flex: 1;
font-size: $fs-16; font-size: $fs-16;
span { span {
color: $df-secondary; color: var(--color-foreground-secondary);
display: block; display: block;
} }
a { a {
color: $da-primary; color: var(--color-accent-primary);
} }
padding: $s-8 0; padding: $s-8 0;
} }

8
frontend/src/app/main/ui/dashboard/search.scss
View file

@ -13,7 +13,7 @@
margin-right: $s-16; margin-right: $s-16;
overflow-y: auto; overflow-y: auto;
width: 100%; width: 100%;
border-top: $s-1 solid $db-quaternary; border-top: $s-1 solid var(--color-background-quaternary);
&.dashboard-projects { &.dashboard-projects {
user-select: none; user-select: none;
@ -35,14 +35,14 @@
flex-direction: column; flex-direction: column;
height: $s-200; height: $s-200;
background: transparent; background: transparent;
border: $s-1 solid $db-quaternary; border: $s-1 solid var(--color-background-quaternary);
border-radius: $br-8; border-radius: $br-8;
.text { .text {
color: $df-primary; color: var(--color-foreground-primary);
} }
.icon svg { .icon svg {
stroke: $df-secondary; stroke: var(--color-foreground-secondary);
width: $s-32; width: $s-32;
height: $s-32; height: $s-32;
} }

4
frontend/src/app/main/ui/dashboard/team.scss
View file

@ -92,7 +92,7 @@
width: 100%; width: 100%;
z-index: $z-index-modal; z-index: $z-index-modal;
border-radius: $br-circle; border-radius: $br-circle;
background-color: $da-primary; background-color: var(--color-accent-primary);
} }
.image-icon { .image-icon {
@ -378,7 +378,7 @@
} }
.hero-desc { .hero-desc {
color: $df-secondary; color: var(--color-foreground-secondary);
margin-bottom: 0; margin-bottom: 0;
font-size: $fs-16; font-size: $fs-16;
max-width: $s-512; max-width: $s-512;

22
frontend/src/app/main/ui/dashboard/templates.scss
View file

@ -43,7 +43,7 @@
margin-right: $s-32; margin-right: $s-32;
position: relative; position: relative;
z-index: $z-index-1; z-index: $z-index-1;
background-color: $db-quaternary; background-color: var(--color-background-quaternary);
} }
.title-text { .title-text {
@ -53,7 +53,7 @@
font-size: $fs-16; font-size: $fs-16;
margin-left: $s-16; margin-left: $s-16;
margin-right: $s-8; margin-right: $s-8;
color: $df-primary; color: var(--color-foreground-primary);
font-weight: $fw400; font-weight: $fw400;
} }
@ -62,7 +62,7 @@
vertical-align: middle; vertical-align: middle;
margin-left: $s-16; margin-left: $s-16;
margin-right: $s-8; margin-right: $s-8;
color: $df-primary; color: var(--color-foreground-primary);
margin-left: $s-16; margin-left: $s-16;
margin-right: $s-16; margin-right: $s-16;
transform: rotate(90deg); transform: rotate(90deg);
@ -80,20 +80,20 @@
.move-button { .move-button {
position: absolute; position: absolute;
top: $s-136; top: $s-136;
border: $s-2 solid $df-secondary; border: $s-2 solid var(--color-foreground-secondary);
border-radius: 50%; border-radius: 50%;
text-align: center; text-align: center;
width: $s-36; width: $s-36;
height: $s-36; height: $s-36;
cursor: pointer; cursor: pointer;
background-color: $df-primary; background-color: var(--color-foreground-primary);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
pointer-events: all; pointer-events: all;
&:hover { &:hover {
border: $s-2 solid $da-tertiary; border: $s-2 solid var(--color-accent-tertiary);
} }
} }
@ -116,7 +116,7 @@
height: $s-228; height: $s-228;
margin-left: $s-6; margin-left: $s-6;
border-top-left-radius: $s-8; border-top-left-radius: $s-8;
background-color: $db-quaternary; background-color: var(--color-background-quaternary);
overflow: scroll hidden; overflow: scroll hidden;
scroll-behavior: smooth; scroll-behavior: smooth;
scroll-snap-type: x mandatory; scroll-snap-type: x mandatory;
@ -139,12 +139,12 @@
width: $s-256; width: $s-256;
font-size: $fs-16; font-size: $fs-16;
cursor: pointer; cursor: pointer;
color: $df-primary; color: var(--color-foreground-primary);
padding: $s-3 $s-6 $s-16 $s-6; padding: $s-3 $s-6 $s-16 $s-6;
border-radius: $br-8; border-radius: $br-8;
&:hover { &:hover {
background-color: $db-tertiary; background-color: var(--color-background-tertiary);
} }
} }
@ -188,12 +188,12 @@
.template-link-title { .template-link-title {
font-size: $fs-14; font-size: $fs-14;
color: $df-primary; color: var(--color-foreground-primary);
font-weight: $fw400; font-weight: $fw400;
} }
.template-link-text { .template-link-text {
font-size: $fs-12; font-size: $fs-12;
margin-top: $s-8; margin-top: $s-8;
color: $df-secondary; color: var(--color-foreground-secondary);
} }

2
frontend/src/app/main/ui/flex_controls/common.cljs
View file

@ -8,7 +8,7 @@
;; ------------------------------------------------ ;; ------------------------------------------------
(def font-size 11) (def font-size 11)
(def distance-color "var(--da-quaternary)") (def distance-color "var(--color-accent-quaternary)")
(def distance-text-color "var(--app-white)") (def distance-text-color "var(--app-white)")
(def warning-color "var(--status-color-warning-500)") (def warning-color "var(--status-color-warning-500)")
(def flex-display-pill-width 40) (def flex-display-pill-width 40)

58
frontend/src/app/main/ui/settings.scss
View file

@ -28,7 +28,7 @@
margin-right: $s-16; margin-right: $s-16;
overflow-y: auto; overflow-y: auto;
width: 100%; width: 100%;
border-top: $s-1 solid $db-quaternary; border-top: $s-1 solid var(--color-background-quaternary);
&.dashboard-projects { &.dashboard-projects {
user-select: none; user-select: none;
@ -49,7 +49,7 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
a { a {
color: $df-secondary; color: var(--color-foreground-secondary);
} }
} }
@ -79,41 +79,41 @@
label { label {
position: relative; position: relative;
text-transform: uppercase; text-transform: uppercase;
color: $df-primary; color: var(--color-foreground-primary);
font-size: $fs-11; font-size: $fs-11;
margin-bottom: $s-12; margin-bottom: $s-12;
margin-left: calc(-1 * $s-4); margin-left: calc(-1 * $s-4);
} }
input, input,
select { select {
background-color: $db-tertiary; background-color: var(--color-background-tertiary);
border-radius: $s-8; border-radius: $s-8;
border-color: transparent; border-color: transparent;
color: $df-primary; color: var(--color-foreground-primary);
padding: 0 $s-16; padding: 0 $s-16;
&:focus { &:focus {
outline: $s-1 solid $da-primary; outline: $s-1 solid var(--color-accent-primary);
} }
::placeholder { ::placeholder {
color: $df-secondary; color: var(--color-foreground-secondary);
} }
} }
.help-icon { .help-icon {
bottom: $s-12; bottom: $s-12;
top: auto; top: auto;
svg { svg {
fill: $df-secondary; fill: var(--color-foreground-secondary);
} }
} }
&.disabled { &.disabled {
input { input {
background-color: var(--input-background-color-disabled); background-color: var(--input-background-color-disabled);
border-color: $db-quaternary; border-color: var(--color-background-quaternary);
color: $df-secondary; color: var(--color-foreground-secondary);
} }
} }
.input-container { .input-container {
background-color: $db-tertiary; background-color: var(--color-background-tertiary);
border-radius: $s-8; border-radius: $s-8;
border-color: transparent; border-color: transparent;
margin-top: $s-24; margin-top: $s-24;
@ -123,45 +123,45 @@
top: calc(-1 * $s-24); top: calc(-1 * $s-24);
} }
span { span {
color: $df-primary; color: var(--color-foreground-primary);
} }
} }
&:focus { &:focus {
border: $s-1 solid $da-primary; border: $s-1 solid var(--color-accent-primary);
} }
} }
textarea { textarea {
border-radius: $s-8; border-radius: $s-8;
padding: $s-12 $s-16; padding: $s-12 $s-16;
background-color: $db-tertiary; background-color: var(--color-background-tertiary);
color: $df-primary; color: var(--color-foreground-primary);
border: none; border: none;
&:focus { &:focus {
outline: $s-1 solid $da-primary; outline: $s-1 solid var(--color-accent-primary);
} }
} }
} }
.field-title { .field-title {
color: $df-primary; color: var(--color-foreground-primary);
} }
.field-title:not(:first-child) { .field-title:not(:first-child) {
margin-top: $s-64; margin-top: $s-64;
} }
.field-text { .field-text {
color: $df-secondary; color: var(--color-foreground-secondary);
} }
button, button,
.btn-secondary { .btn-secondary {
width: 100%; width: 100%;
font-size: $fs-11; font-size: $fs-11;
text-transform: uppercase; text-transform: uppercase;
background-color: $db-tertiary; background-color: var(--color-background-tertiary);
color: $df-primary; color: var(--color-foreground-primary);
&:hover { &:hover {
color: $da-primary; color: var(--color-accent-primary);
background-color: $db-quaternary; background-color: var(--color-background-quaternary);
} }
} }
hr { hr {
@ -180,20 +180,20 @@
width: 100%; width: 100%;
.newsletter-subs { .newsletter-subs {
border-bottom: $s-1 solid $df-secondary; border-bottom: $s-1 solid var(--color-foreground-secondary);
border-top: $s-1 solid $df-secondary; border-top: $s-1 solid var(--color-foreground-secondary);
padding: $s-32 0; padding: $s-32 0;
margin-bottom: $s-32; margin-bottom: $s-32;
.newsletter-title { .newsletter-title {
font-family: "worksans", "vazirmatn", sans-serif; font-family: "worksans", "vazirmatn", sans-serif;
color: $df-secondary; color: var(--color-foreground-secondary);
font-size: $fs-14; font-size: $fs-14;
} }
label { label {
font-family: "worksans", "vazirmatn", sans-serif; font-family: "worksans", "vazirmatn", sans-serif;
color: $db-primary; color: var(--color-background-primary);
font-size: $fs-12; font-size: $fs-12;
margin-right: calc(-1 * $s-16); margin-right: calc(-1 * $s-16);
margin-bottom: $s-12; margin-bottom: $s-12;
@ -201,7 +201,7 @@
.info { .info {
font-family: "worksans", "vazirmatn", sans-serif; font-family: "worksans", "vazirmatn", sans-serif;
color: $df-secondary; color: var(--color-foreground-secondary);
font-size: $fs-12; font-size: $fs-12;
margin-bottom: $s-8; margin-bottom: $s-8;
} }
@ -239,10 +239,10 @@
height: $s-120; height: $s-120;
border-radius: 50%; border-radius: 50%;
font-size: $fs-24; font-size: $fs-24;
color: $df-primary; color: var(--color-foreground-primary);
line-height: 5; line-height: 5;
text-align: center; text-align: center;
background: $da-tertiary; background: var(--color-accent-tertiary);
z-index: 14; z-index: 14;
} }

8
frontend/src/app/main/ui/settings/feedback.scss
View file

@ -11,15 +11,15 @@
textarea { textarea {
border-radius: $br-8; border-radius: $br-8;
padding: $br-12; padding: $br-12;
background-color: $db-tertiary; background-color: var(--color-background-tertiary);
color: $df-primary; color: var(--color-foreground-primary);
border: none; border: none;
::placeholder { ::placeholder {
color: $db-disabled; color: var(--color-background-disabled);
} }
&:focus { &:focus {
outline: $s-1 solid $da-primary; outline: $s-1 solid var(--color-accent-primary);
} }
} }
} }

76
frontend/src/app/main/ui/settings/profile.scss
View file

@ -12,7 +12,7 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
a:not(.button-primary) { a:not(.button-primary) {
color: $df-secondary; color: var(--color-foreground-secondary);
} }
} }
@ -34,11 +34,11 @@
width: 100%; width: 100%;
font-size: $fs-11; font-size: $fs-11;
text-transform: uppercase; text-transform: uppercase;
background-color: $db-tertiary; background-color: var(--color-background-tertiary);
color: $df-primary; color: var(--color-foreground-primary);
&:hover { &:hover {
color: $da-primary; color: var(--color-accent-primary);
background-color: $db-quaternary; background-color: var(--color-background-quaternary);
} }
} }
hr { hr {
@ -64,7 +64,7 @@
} }
.field-title { .field-title {
color: $df-primary; color: var(--color-foreground-primary);
&:not(:first-child) { &:not(:first-child) {
margin-top: $s-64; margin-top: $s-64;
@ -72,7 +72,7 @@
} }
.field-text { .field-text {
color: $df-secondary; color: var(--color-foreground-secondary);
} }
.custom-input, .custom-input,
@ -81,41 +81,41 @@
label { label {
position: relative; position: relative;
text-transform: uppercase; text-transform: uppercase;
color: $df-primary; color: var(--color-foreground-primary);
font-size: $fs-11; font-size: $fs-11;
margin-bottom: $s-12; margin-bottom: $s-12;
margin-left: calc(-1 * $s-4); margin-left: calc(-1 * $s-4);
} }
input, input,
select { select {
background-color: $db-tertiary; background-color: var(--color-background-tertiary);
border-radius: $br-8; border-radius: $br-8;
border-color: transparent; border-color: transparent;
color: $df-primary; color: var(--color-foreground-primary);
padding: 0 $s-16; padding: 0 $s-16;
&:focus { &:focus {
outline: $s-1 solid $da-primary; outline: $s-1 solid var(--color-accent-primary);
} }
::placeholder { ::placeholder {
color: $df-secondary; color: var(--color-foreground-secondary);
} }
} }
.help-icon { .help-icon {
bottom: $s-12; bottom: $s-12;
top: auto; top: auto;
svg { svg {
fill: $df-secondary; fill: var(--color-foreground-secondary);
} }
} }
&.disabled { &.disabled {
input { input {
background-color: var(--input-background-color-disabled); background-color: var(--input-background-color-disabled);
border-color: $db-quaternary; border-color: var(--color-background-quaternary);
color: $df-secondary; color: var(--color-foreground-secondary);
} }
} }
.input-container { .input-container {
background-color: $db-tertiary; background-color: var(--color-background-tertiary);
border-radius: $br-8; border-radius: $br-8;
border-color: transparent; border-color: transparent;
margin-top: $s-24; margin-top: $s-24;
@ -125,21 +125,21 @@
top: calc(-1 * $s-24); top: calc(-1 * $s-24);
} }
span { span {
color: $df-primary; color: var(--color-foreground-primary);
} }
} }
&:focus { &:focus {
border: $s-1 solid $da-primary; border: $s-1 solid var(--color-accent-primary);
} }
} }
textarea { textarea {
border-radius: $br-8; border-radius: $br-8;
padding: $s-12 $s-16; padding: $s-12 $s-16;
background-color: $db-tertiary; background-color: var(--color-background-tertiary);
color: $df-primary; color: var(--color-foreground-primary);
border: none; border: none;
&:focus { &:focus {
outline: $s-1 solid $da-primary; outline: $s-1 solid var(--color-accent-primary);
} }
} }
} }
@ -152,13 +152,13 @@
h1 { h1 {
font-size: $fs-36; font-size: $fs-36;
color: $db-tertiary; color: var(--color-background-tertiary);
margin-bottom: $s-20; margin-bottom: $s-20;
} }
.subtitle { .subtitle {
font-size: $fs-24; font-size: $fs-24;
color: $db-tertiary; color: var(--color-background-tertiary);
margin-bottom: $s-20; margin-bottom: $s-20;
} }
@ -168,7 +168,7 @@
margin-bottom: $s-48; margin-bottom: $s-48;
svg { svg {
fill: $db-primary; fill: var(--color-background-primary);
height: 40%; height: 40%;
width: 40%; width: 40%;
} }
@ -176,14 +176,14 @@
.notification-text { .notification-text {
font-size: $fs-16; font-size: $fs-16;
color: $db-primary; color: var(--color-background-primary);
margin-bottom: $s-20; margin-bottom: $s-20;
} }
.notification-text-email { .notification-text-email {
background: $df-primary; background: var(--color-foreground-primary);
border-radius: $br-4; border-radius: $br-4;
color: $db-primary; color: var(--color-background-primary);
font-size: $fs-16; font-size: $fs-16;
font-weight: $fw500; font-weight: $fw500;
margin: $s-24 0 $s-40 0; margin: $s-24 0 $s-40 0;
@ -194,7 +194,7 @@
h2 { h2 {
font-size: $fs-24; font-size: $fs-24;
font-weight: $fw400; font-weight: $fw400;
color: $df-primary; color: var(--color-foreground-primary);
display: flex; display: flex;
align-items: center; align-items: center;
margin: $s-16 0; margin: $s-16 0;
@ -203,7 +203,7 @@
h3 { h3 {
font-size: $fs-12; font-size: $fs-12;
font-weight: $fw400; font-weight: $fw400;
color: $df-primary; color: var(--color-foreground-primary);
display: flex; display: flex;
align-items: center; align-items: center;
margin: $s-8 0; margin: $s-8 0;
@ -217,11 +217,11 @@
} }
p { p {
color: $db-primary; color: var(--color-background-primary);
} }
hr { hr {
border-color: $df-secondary; border-color: var(--color-foreground-secondary);
} }
.links { .links {
@ -258,10 +258,10 @@ form.avatar-form {
height: 100%; height: 100%;
border-radius: 50%; border-radius: 50%;
font-size: $fs-24; font-size: $fs-24;
color: $df-primary; color: var(--color-foreground-primary);
line-height: 6; line-height: 6;
text-align: center; text-align: center;
background: $da-tertiary; background: var(--color-accent-tertiary);
z-index: $z-index-modal; z-index: $z-index-modal;
} }
@ -290,27 +290,27 @@ form.avatar-form {
} }
.newsletter-subs { .newsletter-subs {
border-bottom: $s-1 solid $df-secondary; border-bottom: $s-1 solid var(--color-foreground-secondary);
border-top: $s-1 solid $df-secondary; border-top: $s-1 solid var(--color-foreground-secondary);
padding: $s-32 0; padding: $s-32 0;
margin-bottom: $s-32; margin-bottom: $s-32;
.newsletter-title { .newsletter-title {
font-family: "worksans", "vazirmatn", sans-serif; font-family: "worksans", "vazirmatn", sans-serif;
color: $df-secondary; color: var(--color-foreground-secondary);
font-size: $fs-14; font-size: $fs-14;
} }
label { label {
font-family: "worksans", "vazirmatn", sans-serif; font-family: "worksans", "vazirmatn", sans-serif;
color: $db-primary; color: var(--color-background-primary);
font-size: $fs-12; font-size: $fs-12;
margin-right: calc(-1 * $s-16); margin-right: calc(-1 * $s-16);
margin-bottom: $s-12; margin-bottom: $s-12;
} }
.info { .info {
color: $df-secondary; color: var(--color-foreground-secondary);
font-size: $fs-12; font-size: $fs-12;
margin-bottom: $s-8; margin-bottom: $s-8;
} }

2
frontend/src/app/main/ui/settings/sidebar.scss
View file

@ -80,7 +80,7 @@
} }
.back-text { .back-text {
color: $df-primary; color: var(--color-foreground-primary);
} }
.arrow-icon { .arrow-icon {

12
frontend/src/app/main/ui/static.scss
View file

@ -9,7 +9,7 @@
.exception-layout { .exception-layout {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: $db-secondary; background-color: var(--color-background-secondary);
} }
.deco-before, .deco-before,
@ -19,7 +19,7 @@
svg { svg {
position: absolute; position: absolute;
fill: $df-secondary; fill: var(--color-foreground-secondary);
height: 1537px; height: 1537px;
width: $s-80; width: $s-80;
} }
@ -48,7 +48,7 @@
border: none; border: none;
cursor: pointer; cursor: pointer;
svg { svg {
fill: $df-primary; fill: var(--color-foreground-primary);
width: $s-48; width: $s-48;
height: auto; height: auto;
} }
@ -75,12 +75,12 @@
.main-message { .main-message {
@include bigTitleTipography; @include bigTitleTipography;
color: $df-primary; color: var(--color-foreground-primary);
} }
.desc-message { .desc-message {
@include bigTitleTipography; @include bigTitleTipography;
color: $df-secondary; color: var(--color-foreground-secondary);
} }
.sign-info { .sign-info {
@ -95,6 +95,6 @@
.image { .image {
svg { svg {
fill: $df-primary; fill: var(--color-foreground-primary);
} }
} }

2
frontend/src/app/main/ui/viewer/inspect/code.scss
View file

@ -39,7 +39,7 @@
// Overrides background setted in the theme // Overrides background setted in the theme
:global(.hljs) { :global(.hljs) {
background: $db-tertiary; background: var(--color-background-tertiary);
} }
&.collapsed { &.collapsed {

4
frontend/src/app/main/ui/workspace/coordinates.scss
View file

@ -9,7 +9,7 @@
$width-settings-bar: 256px; $width-settings-bar: 256px;
.container { .container {
background-color: var(--db-primary); background-color: var(--color-background-primary);
border-radius: $br-4; border-radius: $br-4;
bottom: 0px; bottom: 0px;
padding: $s-2 $s-8; padding: $s-2 $s-8;
@ -28,6 +28,6 @@ $width-settings-bar: 256px;
} }
.coordinate { .coordinate {
color: var(--df-primary); color: var(--color-foreground-primary);
font-size: $fs-12; font-size: $fs-12;
} }

2
frontend/src/app/main/ui/workspace/libraries.scss
View file

@ -287,7 +287,7 @@
height: $s-52; height: $s-52;
margin-top: $s-8; margin-top: $s-8;
border-radius: $br-circle; border-radius: $br-circle;
background: $db-quaternary; background: var(--color-background-quaternary);
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;

2
frontend/src/app/main/ui/workspace/main_menu.scss
View file

@ -52,7 +52,7 @@
.separator { .separator {
margin-top: $s-8; margin-top: $s-8;
height: $s-4; height: $s-4;
border-top: $s-1 solid $db-secondary; border-top: $s-1 solid var(--color-background-secondary);
} }
.shortcut { .shortcut {

28
frontend/src/app/main/ui/workspace/plugins.scss
View file

@ -26,7 +26,7 @@
} }
hr { hr {
border-color: $db-tertiary; border-color: var(--color-background-tertiary);
} }
} }
@ -148,12 +148,12 @@
.plugin-title { .plugin-title {
@include bodyMediumTypography; @include bodyMediumTypography;
color: $df-primary; color: var(--color-foreground-primary);
} }
.plugin-summary { .plugin-summary {
@include bodySmallTypography; @include bodySmallTypography;
color: $df-secondary; color: var(--color-foreground-secondary);
} }
.plugins-empty { .plugins-empty {
@ -173,19 +173,19 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background: $db-tertiary; background: var(--color-background-tertiary);
svg { svg {
width: $s-16; width: $s-16;
height: $s-16; height: $s-16;
stroke: $df-secondary; stroke: var(--color-foreground-secondary);
fill: none; fill: none;
} }
} }
.plugins-empty-text { .plugins-empty-text {
@include bodySmallTypography; @include bodySmallTypography;
color: $df-primary; color: var(--color-foreground-primary);
} }
div.input-error { div.input-error {
@ -206,7 +206,7 @@ div.input-error {
} }
.plugins-link { .plugins-link {
color: $da-primary; color: var(--color-accent-primary);
font-size: $fs-12; font-size: $fs-12;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@ -216,7 +216,7 @@ div.input-error {
margin-top: calc(-1 * $s-2); margin-top: calc(-1 * $s-2);
width: $s-12; width: $s-12;
height: $s-12; height: $s-12;
stroke: $da-primary; stroke: var(--color-accent-primary);
fill: none; fill: none;
} }
} }
@ -239,7 +239,7 @@ div.input-error {
svg { svg {
width: $s-24; width: $s-24;
height: $s-24; height: $s-24;
stroke: $da-primary; stroke: var(--color-accent-primary);
fill: none; fill: none;
} }
} }
@ -247,14 +247,14 @@ div.input-error {
.permissions-list-text { .permissions-list-text {
@include bodySmallTypography; @include bodySmallTypography;
margin: 0; margin: 0;
color: $df-secondary; color: var(--color-foreground-secondary);
} }
.permissions-disclaimer { .permissions-disclaimer {
@include bodySmallTypography; @include bodySmallTypography;
padding: $s-16; padding: $s-16;
background: $db-tertiary; background: var(--color-background-tertiary);
color: $df-secondary; color: var(--color-foreground-secondary);
border-radius: $br-4; border-radius: $br-4;
} }
@ -265,10 +265,10 @@ div.input-error {
.discover { .discover {
@include bodySmallTypography; @include bodySmallTypography;
color: $df-secondary; color: var(--color-foreground-secondary);
margin-top: $s-24; margin-top: $s-24;
a { a {
color: $da-primary; color: var(--color-accent-primary);
} }
} }

8
frontend/src/app/main/ui/workspace/sidebar/debug_shape_info.scss
View file

@ -10,7 +10,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: var(--panel-background-color); background-color: var(--panel-background-color);
color: $df-primary; color: var(--color-foreground-primary);
font-size: $fs-12; font-size: $fs-12;
user-select: text; user-select: text;
} }
@ -54,8 +54,8 @@
.shape-title { .shape-title {
font-size: $fs-14; font-size: $fs-14;
padding-bottom: $s-4; padding-bottom: $s-4;
background: $db-quaternary; background: var(--color-background-quaternary);
color: $df-primary; color: var(--color-foreground-primary);
padding: $s-8; padding: $s-8;
border-radius: $s-8; border-radius: $s-8;
display: flex; display: flex;
@ -83,7 +83,7 @@
} }
.shape-link { .shape-link {
color: $df-primary; color: var(--color-foreground-primary);
text-decoration: underline; text-decoration: underline;
} }

2
frontend/src/app/main/ui/workspace/sidebar/history.scss
View file

@ -95,7 +95,7 @@
} }
.history-entry-summary-text { .history-entry-summary-text {
margin: 0 $s-8; margin: 0 $s-8;
color: $df-primary; color: var(--color-foreground-primary);
} }
.history-entry-summary-button { .history-entry-summary-button {
opacity: $op-0; opacity: $op-0;

2
frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss
View file

@ -260,7 +260,7 @@
.component-list-empty { .component-list-empty {
@include bodySmallTypography; @include bodySmallTypography;
margin: 0 $s-4 0 $s-8; margin: 0 $s-4 0 $s-8;
color: $df-secondary; color: var(--color-foreground-secondary);
} }
.component-item { .component-item {

8
frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss
View file

@ -289,7 +289,7 @@
} }
.track-name { .track-name {
color: $df-primary; color: var(--color-foreground-primary);
} }
.track-detail { .track-detail {
@ -297,7 +297,7 @@
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
width: 100%; width: 100%;
color: $df-secondary; color: var(--color-foreground-secondary);
} }
.expand-icon { .expand-icon {
@ -357,11 +357,11 @@
button { button {
@include buttonStyle; @include buttonStyle;
padding: $s-8; padding: $s-8;
color: $df-primary; color: var(--color-foreground-primary);
border-radius: $br-6; border-radius: $br-6;
&:hover { &:hover {
background: $db-quaternary; background: var(--color-background-quaternary);
} }
} }
} }

2
frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.scss
View file

@ -65,7 +65,7 @@
font-size: $fs-10; font-size: $fs-10;
text-transform: uppercase; text-transform: uppercase;
margin-inline-start: $s-4; margin-inline-start: $s-4;
color: $df-primary; color: var(--color-foreground-primary);
} }
.attr-row { .attr-row {

2
frontend/src/app/main/ui/workspace/viewport/outline.cljs
View file

@ -33,7 +33,7 @@
;; NOTE: that we don't use mf/deref to avoid a repaint dependency here ;; NOTE: that we don't use mf/deref to avoid a repaint dependency here
objects (deref refs/workspace-page-objects) objects (deref refs/workspace-page-objects)
color (if (ctn/in-any-component? objects shape) color (if (ctn/in-any-component? objects shape)
"var(--color-component-highlight)" "var(--assets-component-hightlight)"
"var(--color-accent-tertiary)") "var(--color-accent-tertiary)")
x (dm/get-prop shape :x) x (dm/get-prop shape :x)

2
frontend/src/app/main/ui/workspace/viewport/selection.cljs
View file

@ -32,7 +32,7 @@
(def resize-point-rect-size 8) (def resize-point-rect-size 8)
(def resize-side-height 8) (def resize-side-height 8)
(def selection-rect-color-normal "var(--color-accent-tertiary)") (def selection-rect-color-normal "var(--color-accent-tertiary)")
(def selection-rect-color-component "var(--color-component-highlight)") (def selection-rect-color-component "var(--assets-component-hightlight)")
(def selection-rect-width 1) (def selection-rect-width 1)
(def min-selrect-side 10) (def min-selrect-side 10)
(def small-selrect-side 30) (def small-selrect-side 30)

2
frontend/src/app/main/ui/workspace/viewport/widgets.cljs
View file

@ -87,7 +87,7 @@
color (if selected? color (if selected?
(if (ctn/in-any-component? objects frame) (if (ctn/in-any-component? objects frame)
"var(--color-component-highlight)" "var(--assets-component-hightlight)"
"var(--color-accent-tertiary)") "var(--color-accent-tertiary)")
"#8f9da3") ;; TODO: Set this color on the DS "#8f9da3") ;; TODO: Set this color on the DS