From 2c5289d3381639c09a526b2eb53676623a4328b0 Mon Sep 17 00:00:00 2001
From: Eva Marco <evamarcod@gmail.com>
Date: Tue, 23 Jul 2024 13:07:01 +0200
Subject: [PATCH] :recycle: Remove duplicated color tokens

---
 frontend/resources/styles/common/base.scss    |  2 +-
 .../_hljs-dark-theme.scss}                    |  0
 .../_hljs-light-theme.scss}                   |  0
 .../styles/common/dependencies/highlight.scss | 15 ++++
 .../styles/common/refactor/color-defs.scss    | 72 +++++-------------
 .../common/refactor/common-dashboard.scss     | 18 ++---
 .../common/refactor/common-refactor.scss      | 16 ----
 .../styles/common/refactor/design-tokens.scss | 29 +++----
 .../common/refactor/themes/default-theme.scss | 32 +-------
 .../common/refactor/themes/light-theme.scss   | 30 --------
 frontend/resources/styles/main-default.scss   |  1 +
 frontend/src/app/main/ui/auth.scss            |  2 +-
 frontend/src/app/main/ui/auth/register.scss   |  2 +-
 .../src/app/main/ui/components/forms.scss     |  2 +-
 .../src/app/main/ui/dashboard/comments.scss   | 10 +--
 frontend/src/app/main/ui/dashboard/files.scss |  2 +-
 frontend/src/app/main/ui/dashboard/fonts.scss | 48 ++++++------
 frontend/src/app/main/ui/dashboard/grid.scss  | 44 +++++------
 .../app/main/ui/dashboard/inline_edition.scss |  6 +-
 .../src/app/main/ui/dashboard/libraries.scss  |  2 +-
 .../app/main/ui/dashboard/placeholder.scss    | 22 +++---
 .../src/app/main/ui/dashboard/projects.scss   |  8 +-
 .../src/app/main/ui/dashboard/search.scss     |  8 +-
 frontend/src/app/main/ui/dashboard/team.scss  |  4 +-
 .../src/app/main/ui/dashboard/templates.scss  | 22 +++---
 .../src/app/main/ui/flex_controls/common.cljs |  2 +-
 frontend/src/app/main/ui/settings.scss        | 58 +++++++-------
 .../src/app/main/ui/settings/feedback.scss    |  8 +-
 .../src/app/main/ui/settings/profile.scss     | 76 +++++++++----------
 .../src/app/main/ui/settings/sidebar.scss     |  2 +-
 frontend/src/app/main/ui/static.scss          | 12 +--
 .../src/app/main/ui/viewer/inspect/code.scss  |  2 +-
 .../app/main/ui/workspace/coordinates.scss    |  4 +-
 .../src/app/main/ui/workspace/libraries.scss  |  2 +-
 .../src/app/main/ui/workspace/main_menu.scss  |  2 +-
 .../src/app/main/ui/workspace/plugins.scss    | 28 +++----
 .../workspace/sidebar/debug_shape_info.scss   |  8 +-
 .../main/ui/workspace/sidebar/history.scss    |  2 +-
 .../sidebar/options/menus/component.scss      |  2 +-
 .../options/menus/layout_container.scss       |  8 +-
 .../sidebar/options/menus/svg_attrs.scss      |  2 +-
 .../main/ui/workspace/viewport/outline.cljs   |  2 +-
 .../main/ui/workspace/viewport/selection.cljs |  2 +-
 .../main/ui/workspace/viewport/widgets.cljs   |  2 +-
 44 files changed, 264 insertions(+), 357 deletions(-)
 rename frontend/resources/styles/common/{refactor/themes/hljs-dark-theme.scss => dependencies/_hljs-dark-theme.scss} (100%)
 rename frontend/resources/styles/common/{refactor/themes/hljs-light-theme.scss => dependencies/_hljs-light-theme.scss} (100%)
 create mode 100644 frontend/resources/styles/common/dependencies/highlight.scss

diff --git a/frontend/resources/styles/common/base.scss b/frontend/resources/styles/common/base.scss
index f4f67041f..078593de0 100644
--- a/frontend/resources/styles/common/base.scss
+++ b/frontend/resources/styles/common/base.scss
@@ -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;
diff --git a/frontend/resources/styles/common/refactor/themes/hljs-dark-theme.scss b/frontend/resources/styles/common/dependencies/_hljs-dark-theme.scss
similarity index 100%
rename from frontend/resources/styles/common/refactor/themes/hljs-dark-theme.scss
rename to frontend/resources/styles/common/dependencies/_hljs-dark-theme.scss
diff --git a/frontend/resources/styles/common/refactor/themes/hljs-light-theme.scss b/frontend/resources/styles/common/dependencies/_hljs-light-theme.scss
similarity index 100%
rename from frontend/resources/styles/common/refactor/themes/hljs-light-theme.scss
rename to frontend/resources/styles/common/dependencies/_hljs-light-theme.scss
diff --git a/frontend/resources/styles/common/dependencies/highlight.scss b/frontend/resources/styles/common/dependencies/highlight.scss
new file mode 100644
index 000000000..9d53084cb
--- /dev/null
+++ b/frontend/resources/styles/common/dependencies/highlight.scss
@@ -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");
+}
diff --git a/frontend/resources/styles/common/refactor/color-defs.scss b/frontend/resources/styles/common/refactor/color-defs.scss
index aad5ed19e..ade8d8991 100644
--- a/frontend/resources/styles/common/refactor/color-defs.scss
+++ b/frontend/resources/styles/common/refactor/color-defs.scss
@@ -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%)};
diff --git a/frontend/resources/styles/common/refactor/common-dashboard.scss b/frontend/resources/styles/common/refactor/common-dashboard.scss
index 79ffa2542..ed30f20a2 100644
--- a/frontend/resources/styles/common/refactor/common-dashboard.scss
+++ b/frontend/resources/styles/common/refactor/common-dashboard.scss
@@ -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;
diff --git a/frontend/resources/styles/common/refactor/common-refactor.scss b/frontend/resources/styles/common/refactor/common-refactor.scss
index b06f8723e..952beb6cc 100644
--- a/frontend/resources/styles/common/refactor/common-refactor.scss
+++ b/frontend/resources/styles/common/refactor/common-refactor.scss
@@ -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);
diff --git a/frontend/resources/styles/common/refactor/design-tokens.scss b/frontend/resources/styles/common/refactor/design-tokens.scss
index aefd62bfa..4ca89d408 100644
--- a/frontend/resources/styles/common/refactor/design-tokens.scss
+++ b/frontend/resources/styles/common/refactor/design-tokens.scss
@@ -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);
diff --git a/frontend/resources/styles/common/refactor/themes/default-theme.scss b/frontend/resources/styles/common/refactor/themes/default-theme.scss
index 432906c9e..f7d092338 100644
--- a/frontend/resources/styles/common/refactor/themes/default-theme.scss
+++ b/frontend/resources/styles/common/refactor/themes/default-theme.scss
@@ -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");
 }
diff --git a/frontend/resources/styles/common/refactor/themes/light-theme.scss b/frontend/resources/styles/common/refactor/themes/light-theme.scss
index 8f133cc72..8baec1aa9 100644
--- a/frontend/resources/styles/common/refactor/themes/light-theme.scss
+++ b/frontend/resources/styles/common/refactor/themes/light-theme.scss
@@ -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");
 }
diff --git a/frontend/resources/styles/main-default.scss b/frontend/resources/styles/main-default.scss
index 15d5f2c84..dfd83571d 100644
--- a/frontend/resources/styles/main-default.scss
+++ b/frontend/resources/styles/main-default.scss
@@ -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";
diff --git a/frontend/src/app/main/ui/auth.scss b/frontend/src/app/main/ui/auth.scss
index 8f7e2087d..569fa7b9c 100644
--- a/frontend/src/app/main/ui/auth.scss
+++ b/frontend/src/app/main/ui/auth.scss
@@ -44,7 +44,7 @@
 
   svg {
     width: 100%;
-    fill: $df-primary;
+    fill: var(--color-foreground-primary);
     height: auto;
   }
 
diff --git a/frontend/src/app/main/ui/auth/register.scss b/frontend/src/app/main/ui/auth/register.scss
index 3f484f9fb..0f0497442 100644
--- a/frontend/src/app/main/ui/auth/register.scss
+++ b/frontend/src/app/main/ui/auth/register.scss
@@ -9,7 +9,7 @@
 
 .accept-terms-and-privacy-wrapper {
   :global(a) {
-    color: $df-secondary;
+    color: var(--color-foreground-secondary);
     font-weight: $fw700;
   }
 }
diff --git a/frontend/src/app/main/ui/components/forms.scss b/frontend/src/app/main/ui/components/forms.scss
index cd7551045..b31713aad 100644
--- a/frontend/src/app/main/ui/components/forms.scss
+++ b/frontend/src/app/main/ui/components/forms.scss
@@ -93,7 +93,7 @@
   top: calc(50% - $s-8);
   svg {
     @extend .button-icon-small;
-    stroke: $df-secondary;
+    stroke: var(--color-foreground-secondary);
     width: $s-16;
     height: $s-16;
   }
diff --git a/frontend/src/app/main/ui/dashboard/comments.scss b/frontend/src/app/main/ui/dashboard/comments.scss
index b6e872e52..af55f6dd1 100644
--- a/frontend/src/app/main/ui/dashboard/comments.scss
+++ b/frontend/src/app/main/ui/dashboard/comments.scss
@@ -32,7 +32,7 @@
   font-size: $fs-12;
   padding: $s-24;
   text-align: center;
-  color: $df-secondary;
+  color: var(--color-foreground-secondary);
 }
 
 .comments-icon {
@@ -57,7 +57,7 @@
   }
 
   &:hover {
-    background-color: $db-quaternary;
+    background-color: var(--color-background-quaternary);
     --comment-icon-small-foreground-color: var(--icon-foreground-active);
   }
 }
@@ -69,7 +69,7 @@
 
 .dropdown {
   @include menuShadow;
-  background-color: $db-tertiary;
+  background-color: var(--color-background-tertiary);
   border-radius: $br-8;
   border: $s-1 solid transparent;
   bottom: $s-4;
@@ -82,7 +82,7 @@
 
   hr {
     margin: 0;
-    border-color: $df-secondary;
+    border-color: var(--color-foreground-secondary);
   }
 }
 
@@ -94,7 +94,7 @@
 }
 
 .header-title {
-  color: $df-secondary;
+  color: var(--color-foreground-secondary);
   font-size: $fs-11;
   line-height: 1.28;
   flex-grow: 1;
diff --git a/frontend/src/app/main/ui/dashboard/files.scss b/frontend/src/app/main/ui/dashboard/files.scss
index 98cf1733e..7c37cd57c 100644
--- a/frontend/src/app/main/ui/dashboard/files.scss
+++ b/frontend/src/app/main/ui/dashboard/files.scss
@@ -12,7 +12,7 @@
   margin-right: $s-16;
   overflow-y: auto;
   width: 100%;
-  border-top: $s-1 solid $db-quaternary;
+  border-top: $s-1 solid var(--color-background-quaternary);
 
   &.dashboard-projects {
     user-select: none;
diff --git a/frontend/src/app/main/ui/dashboard/fonts.scss b/frontend/src/app/main/ui/dashboard/fonts.scss
index e520e01a4..fd40fc50d 100644
--- a/frontend/src/app/main/ui/dashboard/fonts.scss
+++ b/frontend/src/app/main/ui/dashboard/fonts.scss
@@ -8,7 +8,7 @@
 @use "common/refactor/common-dashboard";
 
 .dashboard-fonts {
-  border-top: $s-1 solid $db-quaternary;
+  border-top: $s-1 solid var(--color-background-quaternary);
   display: flex;
   flex-direction: column;
   padding-left: $s-120;
@@ -31,18 +31,18 @@
 
   h3 {
     font-size: $fs-14;
-    color: $df-secondary;
+    color: var(--color-foreground-secondary);
     margin: $s-4;
   }
 
   .font-item {
-    color: $db-secondary;
+    color: var(--color-background-secondary);
   }
 }
 
 .installed-fonts-header {
   align-items: center;
-  color: $df-secondary;
+  color: var(--color-foreground-secondary);
   display: flex;
   font-size: $fs-12;
   height: $s-40;
@@ -65,11 +65,11 @@
   justify-content: flex-end;
 
   input {
-    background-color: $db-tertiary;
+    background-color: var(--color-background-tertiary);
     border-color: transparent;
     border-radius: $br-8;
     border: $s-1 solid transparent;
-    color: $df-primary;
+    color: var(--color-foreground-primary);
     font-size: $fs-14;
     height: $s-32;
     margin: 0;
@@ -77,19 +77,19 @@
     width: $s-152;
 
     &:focus {
-      outline: $s-1 solid $da-primary;
+      outline: $s-1 solid var(--color-accent-primary);
     }
     &::placeholder {
-      color: $df-secondary;
+      color: var(--color-foreground-secondary);
     }
   }
 }
 
 .font-item {
   align-items: center;
-  background-color: $db-tertiary;
+  background-color: var(--color-background-tertiary);
   border-radius: $br-4;
-  color: $df-secondary;
+  color: var(--color-foreground-secondary);
   display: flex;
   font-size: $fs-14;
   justify-content: space-between;
@@ -103,13 +103,13 @@
     margin: 0;
     padding: $s-8;
 
-    background-color: $db-tertiary;
+    background-color: var(--color-background-tertiary);
     border-radius: $br-8;
-    color: $df-primary;
+    color: var(--color-foreground-primary);
     font-size: $fs-14;
 
     &:focus {
-      outline: $s-1 solid $da-primary;
+      outline: $s-1 solid var(--color-accent-primary);
     }
   }
 
@@ -152,16 +152,16 @@
 
       &:hover {
         .icon svg {
-          stroke: $df-secondary;
+          stroke: var(--color-foreground-secondary);
         }
       }
     }
   }
 
   .table-field {
-    color: $df-primary;
+    color: var(--color-foreground-primary);
     .variant {
-      background-color: $db-quaternary;
+      background-color: var(--color-background-quaternary);
       border-radius: $br-8;
       margin-right: $s-4;
       padding-right: $s-4;
@@ -189,7 +189,7 @@
       svg {
         width: $s-16;
         height: $s-16;
-        stroke: $df-secondary;
+        stroke: var(--color-foreground-secondary);
         fill: none;
       }
 
@@ -204,7 +204,7 @@
         background: none;
         border: none;
         svg {
-          stroke: $df-secondary;
+          stroke: var(--color-foreground-secondary);
         }
       }
     }
@@ -242,15 +242,15 @@
     display: flex;
     flex-direction: column;
     gap: $s-24;
-    color: $db-secondary;
+    color: var(--color-background-secondary);
     width: $s-500;
 
     h2 {
-      color: $df-primary;
+      color: var(--color-foreground-primary);
       font-weight: 400;
     }
     p {
-      color: $df-secondary;
+      color: var(--color-foreground-secondary);
       font-size: $fs-16;
     }
   }
@@ -263,7 +263,7 @@
 .fonts-placeholder {
   align-items: center;
   border-radius: $br-8;
-  border: $s-1 solid $db-quaternary;
+  border: $s-1 solid var(--color-background-quaternary);
   display: flex;
   flex-direction: column;
   height: $s-160;
@@ -273,14 +273,14 @@
   width: 100%;
 
   .icon svg {
-    stroke: $df-secondary;
+    stroke: var(--color-foreground-secondary);
     fill: none;
     width: $s-32;
     height: $s-32;
   }
 
   .label {
-    color: $df-secondary;
+    color: var(--color-foreground-secondary);
     font-size: $fs-14;
   }
 }
diff --git a/frontend/src/app/main/ui/dashboard/grid.scss b/frontend/src/app/main/ui/dashboard/grid.scss
index 61cb811dc..fe58c4825 100644
--- a/frontend/src/app/main/ui/dashboard/grid.scss
+++ b/frontend/src/app/main/ui/dashboard/grid.scss
@@ -63,7 +63,7 @@ $thumbnail-default-height: $s-168; // Default width
 
   &.dragged {
     border-radius: $br-4;
-    outline: $br-4 solid $da-primary;
+    outline: $br-4 solid var(--color-accent-primary);
     text-align: initial;
     width: calc(var(--th-width) + $s-12);
     height: var(--th-height, #{$thumbnail-default-height});
@@ -71,7 +71,7 @@ $thumbnail-default-height: $s-168; // Default width
 
   &.overlay {
     border-radius: $br-4;
-    border: $s-2 solid $da-tertiary;
+    border: $s-2 solid var(--color-accent-tertiary);
     height: 100%;
     opacity: 0;
     pointer-events: none;
@@ -101,7 +101,7 @@ $thumbnail-default-height: $s-168; // Default width
 
     h3 {
       border: $s-1 solid transparent;
-      color: $df-primary;
+      color: var(--color-foreground-primary);
       font-size: $fs-16;
       font-weight: $fw400;
       height: $s-28;
@@ -120,7 +120,7 @@ $thumbnail-default-height: $s-168; // Default width
     }
 
     .date {
-      color: $df-secondary;
+      color: var(--color-foreground-secondary);
       overflow: hidden;
       text-overflow: ellipsis;
       width: 100%;
@@ -136,7 +136,7 @@ $thumbnail-default-height: $s-168; // Default width
   }
 
   .item-badge {
-    background-color: $da-primary;
+    background-color: var(--color-accent-primary);
     border: none;
     border-radius: $br-6;
     position: absolute;
@@ -149,7 +149,7 @@ $thumbnail-default-height: $s-168; // Default width
     justify-content: center;
 
     svg {
-      stroke: $db-secondary;
+      stroke: var(--color-background-secondary);
       fill: none;
       height: $s-16;
       width: $s-16;
@@ -157,18 +157,18 @@ $thumbnail-default-height: $s-168; // Default width
   }
 
   &.add-file {
-    border: $s-1 dashed $df-secondary;
+    border: $s-1 dashed var(--color-foreground-secondary);
     justify-content: center;
     box-shadow: none;
 
     span {
-      color: $db-primary;
+      color: var(--color-background-primary);
       font-size: $fs-14;
     }
 
     &:hover {
-      background-color: $df-primary;
-      border: $s-2 solid $da-tertiary;
+      background-color: var(--color-foreground-primary);
+      border: $s-2 solid var(--color-accent-tertiary);
     }
   }
 }
@@ -179,9 +179,9 @@ $thumbnail-default-height: $s-168; // Default width
   left: $s-4;
   width: $s-32;
   height: $s-32;
-  background-color: $da-tertiary;
+  background-color: var(--color-accent-tertiary);
   border-radius: $br-circle;
-  color: $db-secondary;
+  color: var(--color-background-secondary);
   font-size: $fs-16;
   display: flex;
   justify-content: center;
@@ -197,7 +197,7 @@ $thumbnail-default-height: $s-168; // Default width
   &:hover,
   &:focus,
   &:focus-within {
-    background-color: $db-tertiary;
+    background-color: var(--color-background-tertiary);
     .project-th-actions {
       opacity: 1;
     }
@@ -208,7 +208,7 @@ $thumbnail-default-height: $s-168; // Default width
 
   .selected {
     .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;
 
   span {
-    color: $db-secondary;
+    color: var(--color-background-secondary);
   }
 }
 
@@ -290,7 +290,7 @@ $thumbnail-default-height: $s-168; // Default width
 }
 
 .grid-item-th.library {
-  background-color: $db-tertiary;
+  background-color: var(--color-background-tertiary);
   flex-direction: column;
   height: 90%;
   justify-content: flex-start;
@@ -299,7 +299,7 @@ $thumbnail-default-height: $s-168; // Default width
 
   .asset-section {
     font-size: $fs-12;
-    color: $df-secondary;
+    color: var(--color-foreground-secondary);
 
     &:not(:first-child) {
       margin-top: $s-16;
@@ -312,7 +312,7 @@ $thumbnail-default-height: $s-168; // Default width
     text-transform: uppercase;
 
     .num-assets {
-      color: $df-secondary;
+      color: var(--color-foreground-secondary);
     }
   }
 
@@ -320,7 +320,7 @@ $thumbnail-default-height: $s-168; // Default width
     align-items: center;
     border-radius: $br-4;
     border: $s-1 solid transparent;
-    color: $df-primary;
+    color: var(--color-foreground-primary);
     display: flex;
     font-size: $fs-12;
     margin-top: $s-4;
@@ -328,7 +328,7 @@ $thumbnail-default-height: $s-168; // Default width
     position: relative;
 
     .name-block {
-      color: $df-secondary;
+      color: var(--color-foreground-secondary);
       width: calc(100% - $s-24 - $s-8);
     }
 
@@ -349,11 +349,11 @@ $thumbnail-default-height: $s-168; // Default width
     }
 
     .color-name {
-      color: $df-primary;
+      color: var(--color-foreground-primary);
     }
 
     .color-value {
-      color: $df-secondary;
+      color: var(--color-foreground-secondary);
       margin-left: $s-4;
       text-transform: uppercase;
     }
diff --git a/frontend/src/app/main/ui/dashboard/inline_edition.scss b/frontend/src/app/main/ui/dashboard/inline_edition.scss
index b2d0276cd..4b4a17eb1 100644
--- a/frontend/src/app/main/ui/dashboard/inline_edition.scss
+++ b/frontend/src/app/main/ui/dashboard/inline_edition.scss
@@ -17,7 +17,7 @@
 input.element-title {
   background-color: var(--input-background-color-active);
   border-radius: $br-8;
-  color: $df-primary;
+  color: var(--color-foreground-primary);
   font-size: $fs-16;
   height: $s-32;
   margin: 0;
@@ -26,7 +26,7 @@ input.element-title {
   width: 100%;
 
   &:focus-visible {
-    border: $s-1 solid $da-primary;
+    border: $s-1 solid var(--color-accent-primary);
     outline: none;
   }
 }
@@ -39,7 +39,7 @@ input.element-title {
   right: calc(-1 * $s-8);
 
   svg {
-    fill: $df-secondary;
+    fill: var(--color-foreground-secondary);
     height: $s-16;
     transform: rotate(45deg) translateY(7px);
     width: $s-16;
diff --git a/frontend/src/app/main/ui/dashboard/libraries.scss b/frontend/src/app/main/ui/dashboard/libraries.scss
index 69660e4f0..5a79d8e33 100644
--- a/frontend/src/app/main/ui/dashboard/libraries.scss
+++ b/frontend/src/app/main/ui/dashboard/libraries.scss
@@ -12,7 +12,7 @@
   margin-right: $s-16;
   overflow-y: auto;
   width: 100%;
-  border-top: $s-1 solid $db-quaternary;
+  border-top: $s-1 solid var(--color-background-quaternary);
 
   &.dashboard-projects {
     user-select: none;
diff --git a/frontend/src/app/main/ui/dashboard/placeholder.scss b/frontend/src/app/main/ui/dashboard/placeholder.scss
index f052481f3..a72ebc451 100644
--- a/frontend/src/app/main/ui/dashboard/placeholder.scss
+++ b/frontend/src/app/main/ui/dashboard/placeholder.scss
@@ -19,7 +19,7 @@
       85% top;
     background-repeat: no-repeat;
     align-items: center;
-    border: $s-1 solid $db-quaternary;
+    border: $s-1 solid var(--color-background-quaternary);
     border-radius: $br-4;
     display: flex;
     flex-direction: column;
@@ -30,7 +30,7 @@
 
     .text {
       a {
-        color: $df-primary;
+        color: var(--color-foreground-primary);
       }
       p {
         max-width: $s-360;
@@ -41,9 +41,9 @@
   }
 
   .create-new {
-    background-color: $db-tertiary;
+    background-color: var(--color-background-tertiary);
     border-radius: $br-8;
-    color: $df-primary;
+    color: var(--color-foreground-primary);
     cursor: pointer;
     height: $s-160;
     margin: $s-8;
@@ -55,23 +55,23 @@
     svg {
       width: $s-32;
       height: $s-32;
-      stroke: $df-secondary;
+      stroke: var(--color-foreground-secondary);
     }
 
     &:hover {
-      border: $s-2 solid $da-tertiary;
-      background-color: $db-quaternary;
-      color: $da-primary;
+      border: $s-2 solid var(--color-accent-tertiary);
+      background-color: var(--color-background-quaternary);
+      color: var(--color-accent-primary);
 
       svg {
-        stroke: $da-tertiary;
+        stroke: var(--color-accent-tertiary);
       }
     }
   }
 
   .text {
     margin-top: $s-12;
-    color: $df-secondary;
+    color: var(--color-foreground-secondary);
     font-size: $fs-16;
   }
 }
@@ -85,7 +85,7 @@
 }
 
 .placeholder-text {
-  color: $df-secondary;
+  color: var(--color-foreground-secondary);
   font-size: $fs-16;
   text-align: center;
 }
diff --git a/frontend/src/app/main/ui/dashboard/projects.scss b/frontend/src/app/main/ui/dashboard/projects.scss
index 62b1e1adb..e544896ee 100644
--- a/frontend/src/app/main/ui/dashboard/projects.scss
+++ b/frontend/src/app/main/ui/dashboard/projects.scss
@@ -155,7 +155,7 @@
 
 // Team hero
 .team-hero {
-  background-color: $db-tertiary;
+  background-color: var(--color-background-tertiary);
   border-radius: $br-8;
   border: none;
   display: flex;
@@ -185,7 +185,7 @@
 
 .title {
   font-size: $fs-24;
-  color: $df-primary;
+  color: var(--color-foreground-primary);
   font-weight: $fw400;
 }
 
@@ -193,11 +193,11 @@
   flex: 1;
   font-size: $fs-16;
   span {
-    color: $df-secondary;
+    color: var(--color-foreground-secondary);
     display: block;
   }
   a {
-    color: $da-primary;
+    color: var(--color-accent-primary);
   }
   padding: $s-8 0;
 }
diff --git a/frontend/src/app/main/ui/dashboard/search.scss b/frontend/src/app/main/ui/dashboard/search.scss
index 7c20671c2..f0180ed41 100644
--- a/frontend/src/app/main/ui/dashboard/search.scss
+++ b/frontend/src/app/main/ui/dashboard/search.scss
@@ -13,7 +13,7 @@
   margin-right: $s-16;
   overflow-y: auto;
   width: 100%;
-  border-top: $s-1 solid $db-quaternary;
+  border-top: $s-1 solid var(--color-background-quaternary);
 
   &.dashboard-projects {
     user-select: none;
@@ -35,14 +35,14 @@
   flex-direction: column;
   height: $s-200;
   background: transparent;
-  border: $s-1 solid $db-quaternary;
+  border: $s-1 solid var(--color-background-quaternary);
   border-radius: $br-8;
 
   .text {
-    color: $df-primary;
+    color: var(--color-foreground-primary);
   }
   .icon svg {
-    stroke: $df-secondary;
+    stroke: var(--color-foreground-secondary);
     width: $s-32;
     height: $s-32;
   }
diff --git a/frontend/src/app/main/ui/dashboard/team.scss b/frontend/src/app/main/ui/dashboard/team.scss
index 959b846c6..d914ea773 100644
--- a/frontend/src/app/main/ui/dashboard/team.scss
+++ b/frontend/src/app/main/ui/dashboard/team.scss
@@ -92,7 +92,7 @@
   width: 100%;
   z-index: $z-index-modal;
   border-radius: $br-circle;
-  background-color: $da-primary;
+  background-color: var(--color-accent-primary);
 }
 
 .image-icon {
@@ -378,7 +378,7 @@
 }
 
 .hero-desc {
-  color: $df-secondary;
+  color: var(--color-foreground-secondary);
   margin-bottom: 0;
   font-size: $fs-16;
   max-width: $s-512;
diff --git a/frontend/src/app/main/ui/dashboard/templates.scss b/frontend/src/app/main/ui/dashboard/templates.scss
index 76cf2f455..909f2cf2d 100644
--- a/frontend/src/app/main/ui/dashboard/templates.scss
+++ b/frontend/src/app/main/ui/dashboard/templates.scss
@@ -43,7 +43,7 @@
   margin-right: $s-32;
   position: relative;
   z-index: $z-index-1;
-  background-color: $db-quaternary;
+  background-color: var(--color-background-quaternary);
 }
 
 .title-text {
@@ -53,7 +53,7 @@
   font-size: $fs-16;
   margin-left: $s-16;
   margin-right: $s-8;
-  color: $df-primary;
+  color: var(--color-foreground-primary);
   font-weight: $fw400;
 }
 
@@ -62,7 +62,7 @@
   vertical-align: middle;
   margin-left: $s-16;
   margin-right: $s-8;
-  color: $df-primary;
+  color: var(--color-foreground-primary);
   margin-left: $s-16;
   margin-right: $s-16;
   transform: rotate(90deg);
@@ -80,20 +80,20 @@
 .move-button {
   position: absolute;
   top: $s-136;
-  border: $s-2 solid $df-secondary;
+  border: $s-2 solid var(--color-foreground-secondary);
   border-radius: 50%;
   text-align: center;
   width: $s-36;
   height: $s-36;
   cursor: pointer;
-  background-color: $df-primary;
+  background-color: var(--color-foreground-primary);
   display: flex;
   align-items: center;
   justify-content: center;
   pointer-events: all;
 
   &:hover {
-    border: $s-2 solid $da-tertiary;
+    border: $s-2 solid var(--color-accent-tertiary);
   }
 }
 
@@ -116,7 +116,7 @@
   height: $s-228;
   margin-left: $s-6;
   border-top-left-radius: $s-8;
-  background-color: $db-quaternary;
+  background-color: var(--color-background-quaternary);
   overflow: scroll hidden;
   scroll-behavior: smooth;
   scroll-snap-type: x mandatory;
@@ -139,12 +139,12 @@
   width: $s-256;
   font-size: $fs-16;
   cursor: pointer;
-  color: $df-primary;
+  color: var(--color-foreground-primary);
   padding: $s-3 $s-6 $s-16 $s-6;
   border-radius: $br-8;
 
   &:hover {
-    background-color: $db-tertiary;
+    background-color: var(--color-background-tertiary);
   }
 }
 
@@ -188,12 +188,12 @@
 
 .template-link-title {
   font-size: $fs-14;
-  color: $df-primary;
+  color: var(--color-foreground-primary);
   font-weight: $fw400;
 }
 
 .template-link-text {
   font-size: $fs-12;
   margin-top: $s-8;
-  color: $df-secondary;
+  color: var(--color-foreground-secondary);
 }
diff --git a/frontend/src/app/main/ui/flex_controls/common.cljs b/frontend/src/app/main/ui/flex_controls/common.cljs
index 032760688..f9f5e15ab 100644
--- a/frontend/src/app/main/ui/flex_controls/common.cljs
+++ b/frontend/src/app/main/ui/flex_controls/common.cljs
@@ -8,7 +8,7 @@
 ;; ------------------------------------------------
 
 (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 warning-color "var(--status-color-warning-500)")
 (def flex-display-pill-width 40)
diff --git a/frontend/src/app/main/ui/settings.scss b/frontend/src/app/main/ui/settings.scss
index 9b2f10851..5c95a0058 100644
--- a/frontend/src/app/main/ui/settings.scss
+++ b/frontend/src/app/main/ui/settings.scss
@@ -28,7 +28,7 @@
   margin-right: $s-16;
   overflow-y: auto;
   width: 100%;
-  border-top: $s-1 solid $db-quaternary;
+  border-top: $s-1 solid var(--color-background-quaternary);
 
   &.dashboard-projects {
     user-select: none;
@@ -49,7 +49,7 @@
   justify-content: center;
   align-items: center;
   a {
-    color: $df-secondary;
+    color: var(--color-foreground-secondary);
   }
 }
 
@@ -79,41 +79,41 @@
       label {
         position: relative;
         text-transform: uppercase;
-        color: $df-primary;
+        color: var(--color-foreground-primary);
         font-size: $fs-11;
         margin-bottom: $s-12;
         margin-left: calc(-1 * $s-4);
       }
       input,
       select {
-        background-color: $db-tertiary;
+        background-color: var(--color-background-tertiary);
         border-radius: $s-8;
         border-color: transparent;
-        color: $df-primary;
+        color: var(--color-foreground-primary);
         padding: 0 $s-16;
         &:focus {
-          outline: $s-1 solid $da-primary;
+          outline: $s-1 solid var(--color-accent-primary);
         }
         ::placeholder {
-          color: $df-secondary;
+          color: var(--color-foreground-secondary);
         }
       }
       .help-icon {
         bottom: $s-12;
         top: auto;
         svg {
-          fill: $df-secondary;
+          fill: var(--color-foreground-secondary);
         }
       }
       &.disabled {
         input {
           background-color: var(--input-background-color-disabled);
-          border-color: $db-quaternary;
-          color: $df-secondary;
+          border-color: var(--color-background-quaternary);
+          color: var(--color-foreground-secondary);
         }
       }
       .input-container {
-        background-color: $db-tertiary;
+        background-color: var(--color-background-tertiary);
         border-radius: $s-8;
         border-color: transparent;
         margin-top: $s-24;
@@ -123,45 +123,45 @@
             top: calc(-1 * $s-24);
           }
           span {
-            color: $df-primary;
+            color: var(--color-foreground-primary);
           }
         }
         &:focus {
-          border: $s-1 solid $da-primary;
+          border: $s-1 solid var(--color-accent-primary);
         }
       }
       textarea {
         border-radius: $s-8;
         padding: $s-12 $s-16;
-        background-color: $db-tertiary;
-        color: $df-primary;
+        background-color: var(--color-background-tertiary);
+        color: var(--color-foreground-primary);
         border: none;
         &:focus {
-          outline: $s-1 solid $da-primary;
+          outline: $s-1 solid var(--color-accent-primary);
         }
       }
     }
 
     .field-title {
-      color: $df-primary;
+      color: var(--color-foreground-primary);
     }
     .field-title:not(:first-child) {
       margin-top: $s-64;
     }
 
     .field-text {
-      color: $df-secondary;
+      color: var(--color-foreground-secondary);
     }
     button,
     .btn-secondary {
       width: 100%;
       font-size: $fs-11;
       text-transform: uppercase;
-      background-color: $db-tertiary;
-      color: $df-primary;
+      background-color: var(--color-background-tertiary);
+      color: var(--color-foreground-primary);
       &:hover {
-        color: $da-primary;
-        background-color: $db-quaternary;
+        color: var(--color-accent-primary);
+        background-color: var(--color-background-quaternary);
       }
     }
     hr {
@@ -180,20 +180,20 @@
   width: 100%;
 
   .newsletter-subs {
-    border-bottom: $s-1 solid $df-secondary;
-    border-top: $s-1 solid $df-secondary;
+    border-bottom: $s-1 solid var(--color-foreground-secondary);
+    border-top: $s-1 solid var(--color-foreground-secondary);
     padding: $s-32 0;
     margin-bottom: $s-32;
 
     .newsletter-title {
       font-family: "worksans", "vazirmatn", sans-serif;
-      color: $df-secondary;
+      color: var(--color-foreground-secondary);
       font-size: $fs-14;
     }
 
     label {
       font-family: "worksans", "vazirmatn", sans-serif;
-      color: $db-primary;
+      color: var(--color-background-primary);
       font-size: $fs-12;
       margin-right: calc(-1 * $s-16);
       margin-bottom: $s-12;
@@ -201,7 +201,7 @@
 
     .info {
       font-family: "worksans", "vazirmatn", sans-serif;
-      color: $df-secondary;
+      color: var(--color-foreground-secondary);
       font-size: $fs-12;
       margin-bottom: $s-8;
     }
@@ -239,10 +239,10 @@
       height: $s-120;
       border-radius: 50%;
       font-size: $fs-24;
-      color: $df-primary;
+      color: var(--color-foreground-primary);
       line-height: 5;
       text-align: center;
-      background: $da-tertiary;
+      background: var(--color-accent-tertiary);
       z-index: 14;
     }
 
diff --git a/frontend/src/app/main/ui/settings/feedback.scss b/frontend/src/app/main/ui/settings/feedback.scss
index f2638a7f5..b319db4eb 100644
--- a/frontend/src/app/main/ui/settings/feedback.scss
+++ b/frontend/src/app/main/ui/settings/feedback.scss
@@ -11,15 +11,15 @@
   textarea {
     border-radius: $br-8;
     padding: $br-12;
-    background-color: $db-tertiary;
-    color: $df-primary;
+    background-color: var(--color-background-tertiary);
+    color: var(--color-foreground-primary);
     border: none;
 
     ::placeholder {
-      color: $db-disabled;
+      color: var(--color-background-disabled);
     }
     &:focus {
-      outline: $s-1 solid $da-primary;
+      outline: $s-1 solid var(--color-accent-primary);
     }
   }
 }
diff --git a/frontend/src/app/main/ui/settings/profile.scss b/frontend/src/app/main/ui/settings/profile.scss
index c1f4c41e7..b08da057c 100644
--- a/frontend/src/app/main/ui/settings/profile.scss
+++ b/frontend/src/app/main/ui/settings/profile.scss
@@ -12,7 +12,7 @@
   justify-content: center;
   align-items: center;
   a:not(.button-primary) {
-    color: $df-secondary;
+    color: var(--color-foreground-secondary);
   }
 }
 
@@ -34,11 +34,11 @@
       width: 100%;
       font-size: $fs-11;
       text-transform: uppercase;
-      background-color: $db-tertiary;
-      color: $df-primary;
+      background-color: var(--color-background-tertiary);
+      color: var(--color-foreground-primary);
       &:hover {
-        color: $da-primary;
-        background-color: $db-quaternary;
+        color: var(--color-accent-primary);
+        background-color: var(--color-background-quaternary);
       }
     }
     hr {
@@ -64,7 +64,7 @@
   }
 
   .field-title {
-    color: $df-primary;
+    color: var(--color-foreground-primary);
 
     &:not(:first-child) {
       margin-top: $s-64;
@@ -72,7 +72,7 @@
   }
 
   .field-text {
-    color: $df-secondary;
+    color: var(--color-foreground-secondary);
   }
 
   .custom-input,
@@ -81,41 +81,41 @@
     label {
       position: relative;
       text-transform: uppercase;
-      color: $df-primary;
+      color: var(--color-foreground-primary);
       font-size: $fs-11;
       margin-bottom: $s-12;
       margin-left: calc(-1 * $s-4);
     }
     input,
     select {
-      background-color: $db-tertiary;
+      background-color: var(--color-background-tertiary);
       border-radius: $br-8;
       border-color: transparent;
-      color: $df-primary;
+      color: var(--color-foreground-primary);
       padding: 0 $s-16;
       &:focus {
-        outline: $s-1 solid $da-primary;
+        outline: $s-1 solid var(--color-accent-primary);
       }
       ::placeholder {
-        color: $df-secondary;
+        color: var(--color-foreground-secondary);
       }
     }
     .help-icon {
       bottom: $s-12;
       top: auto;
       svg {
-        fill: $df-secondary;
+        fill: var(--color-foreground-secondary);
       }
     }
     &.disabled {
       input {
         background-color: var(--input-background-color-disabled);
-        border-color: $db-quaternary;
-        color: $df-secondary;
+        border-color: var(--color-background-quaternary);
+        color: var(--color-foreground-secondary);
       }
     }
     .input-container {
-      background-color: $db-tertiary;
+      background-color: var(--color-background-tertiary);
       border-radius: $br-8;
       border-color: transparent;
       margin-top: $s-24;
@@ -125,21 +125,21 @@
           top: calc(-1 * $s-24);
         }
         span {
-          color: $df-primary;
+          color: var(--color-foreground-primary);
         }
       }
       &:focus {
-        border: $s-1 solid $da-primary;
+        border: $s-1 solid var(--color-accent-primary);
       }
     }
     textarea {
       border-radius: $br-8;
       padding: $s-12 $s-16;
-      background-color: $db-tertiary;
-      color: $df-primary;
+      background-color: var(--color-background-tertiary);
+      color: var(--color-foreground-primary);
       border: none;
       &:focus {
-        outline: $s-1 solid $da-primary;
+        outline: $s-1 solid var(--color-accent-primary);
       }
     }
   }
@@ -152,13 +152,13 @@
 
   h1 {
     font-size: $fs-36;
-    color: $db-tertiary;
+    color: var(--color-background-tertiary);
     margin-bottom: $s-20;
   }
 
   .subtitle {
     font-size: $fs-24;
-    color: $db-tertiary;
+    color: var(--color-background-tertiary);
     margin-bottom: $s-20;
   }
 
@@ -168,7 +168,7 @@
     margin-bottom: $s-48;
 
     svg {
-      fill: $db-primary;
+      fill: var(--color-background-primary);
       height: 40%;
       width: 40%;
     }
@@ -176,14 +176,14 @@
 
   .notification-text {
     font-size: $fs-16;
-    color: $db-primary;
+    color: var(--color-background-primary);
     margin-bottom: $s-20;
   }
 
   .notification-text-email {
-    background: $df-primary;
+    background: var(--color-foreground-primary);
     border-radius: $br-4;
-    color: $db-primary;
+    color: var(--color-background-primary);
     font-size: $fs-16;
     font-weight: $fw500;
     margin: $s-24 0 $s-40 0;
@@ -194,7 +194,7 @@
   h2 {
     font-size: $fs-24;
     font-weight: $fw400;
-    color: $df-primary;
+    color: var(--color-foreground-primary);
     display: flex;
     align-items: center;
     margin: $s-16 0;
@@ -203,7 +203,7 @@
   h3 {
     font-size: $fs-12;
     font-weight: $fw400;
-    color: $df-primary;
+    color: var(--color-foreground-primary);
     display: flex;
     align-items: center;
     margin: $s-8 0;
@@ -217,11 +217,11 @@
   }
 
   p {
-    color: $db-primary;
+    color: var(--color-background-primary);
   }
 
   hr {
-    border-color: $df-secondary;
+    border-color: var(--color-foreground-secondary);
   }
 
   .links {
@@ -258,10 +258,10 @@ form.avatar-form {
     height: 100%;
     border-radius: 50%;
     font-size: $fs-24;
-    color: $df-primary;
+    color: var(--color-foreground-primary);
     line-height: 6;
     text-align: center;
-    background: $da-tertiary;
+    background: var(--color-accent-tertiary);
     z-index: $z-index-modal;
   }
 
@@ -290,27 +290,27 @@ form.avatar-form {
 }
 
 .newsletter-subs {
-  border-bottom: $s-1 solid $df-secondary;
-  border-top: $s-1 solid $df-secondary;
+  border-bottom: $s-1 solid var(--color-foreground-secondary);
+  border-top: $s-1 solid var(--color-foreground-secondary);
   padding: $s-32 0;
   margin-bottom: $s-32;
 
   .newsletter-title {
     font-family: "worksans", "vazirmatn", sans-serif;
-    color: $df-secondary;
+    color: var(--color-foreground-secondary);
     font-size: $fs-14;
   }
 
   label {
     font-family: "worksans", "vazirmatn", sans-serif;
-    color: $db-primary;
+    color: var(--color-background-primary);
     font-size: $fs-12;
     margin-right: calc(-1 * $s-16);
     margin-bottom: $s-12;
   }
 
   .info {
-    color: $df-secondary;
+    color: var(--color-foreground-secondary);
     font-size: $fs-12;
     margin-bottom: $s-8;
   }
diff --git a/frontend/src/app/main/ui/settings/sidebar.scss b/frontend/src/app/main/ui/settings/sidebar.scss
index a02745892..096d6342e 100644
--- a/frontend/src/app/main/ui/settings/sidebar.scss
+++ b/frontend/src/app/main/ui/settings/sidebar.scss
@@ -80,7 +80,7 @@
 }
 
 .back-text {
-  color: $df-primary;
+  color: var(--color-foreground-primary);
 }
 
 .arrow-icon {
diff --git a/frontend/src/app/main/ui/static.scss b/frontend/src/app/main/ui/static.scss
index 6fc83378c..1d2ea861a 100644
--- a/frontend/src/app/main/ui/static.scss
+++ b/frontend/src/app/main/ui/static.scss
@@ -9,7 +9,7 @@
 .exception-layout {
   width: 100%;
   height: 100%;
-  background-color: $db-secondary;
+  background-color: var(--color-background-secondary);
 }
 
 .deco-before,
@@ -19,7 +19,7 @@
 
   svg {
     position: absolute;
-    fill: $df-secondary;
+    fill: var(--color-foreground-secondary);
     height: 1537px;
     width: $s-80;
   }
@@ -48,7 +48,7 @@
   border: none;
   cursor: pointer;
   svg {
-    fill: $df-primary;
+    fill: var(--color-foreground-primary);
     width: $s-48;
     height: auto;
   }
@@ -75,12 +75,12 @@
 
 .main-message {
   @include bigTitleTipography;
-  color: $df-primary;
+  color: var(--color-foreground-primary);
 }
 
 .desc-message {
   @include bigTitleTipography;
-  color: $df-secondary;
+  color: var(--color-foreground-secondary);
 }
 
 .sign-info {
@@ -95,6 +95,6 @@
 
 .image {
   svg {
-    fill: $df-primary;
+    fill: var(--color-foreground-primary);
   }
 }
diff --git a/frontend/src/app/main/ui/viewer/inspect/code.scss b/frontend/src/app/main/ui/viewer/inspect/code.scss
index 1b7b3f9ca..b0caabde2 100644
--- a/frontend/src/app/main/ui/viewer/inspect/code.scss
+++ b/frontend/src/app/main/ui/viewer/inspect/code.scss
@@ -39,7 +39,7 @@
 
   // Overrides background setted in the theme
   :global(.hljs) {
-    background: $db-tertiary;
+    background: var(--color-background-tertiary);
   }
 
   &.collapsed {
diff --git a/frontend/src/app/main/ui/workspace/coordinates.scss b/frontend/src/app/main/ui/workspace/coordinates.scss
index f722e1526..9b8b782bf 100644
--- a/frontend/src/app/main/ui/workspace/coordinates.scss
+++ b/frontend/src/app/main/ui/workspace/coordinates.scss
@@ -9,7 +9,7 @@
 $width-settings-bar: 256px;
 
 .container {
-  background-color: var(--db-primary);
+  background-color: var(--color-background-primary);
   border-radius: $br-4;
   bottom: 0px;
   padding: $s-2 $s-8;
@@ -28,6 +28,6 @@ $width-settings-bar: 256px;
 }
 
 .coordinate {
-  color: var(--df-primary);
+  color: var(--color-foreground-primary);
   font-size: $fs-12;
 }
diff --git a/frontend/src/app/main/ui/workspace/libraries.scss b/frontend/src/app/main/ui/workspace/libraries.scss
index 0762d3b48..dd97685cb 100644
--- a/frontend/src/app/main/ui/workspace/libraries.scss
+++ b/frontend/src/app/main/ui/workspace/libraries.scss
@@ -287,7 +287,7 @@
   height: $s-52;
   margin-top: $s-8;
   border-radius: $br-circle;
-  background: $db-quaternary;
+  background: var(--color-background-quaternary);
   display: flex;
   justify-content: center;
   align-items: center;
diff --git a/frontend/src/app/main/ui/workspace/main_menu.scss b/frontend/src/app/main/ui/workspace/main_menu.scss
index f986ced89..704195050 100644
--- a/frontend/src/app/main/ui/workspace/main_menu.scss
+++ b/frontend/src/app/main/ui/workspace/main_menu.scss
@@ -52,7 +52,7 @@
 .separator {
   margin-top: $s-8;
   height: $s-4;
-  border-top: $s-1 solid $db-secondary;
+  border-top: $s-1 solid var(--color-background-secondary);
 }
 
 .shortcut {
diff --git a/frontend/src/app/main/ui/workspace/plugins.scss b/frontend/src/app/main/ui/workspace/plugins.scss
index 0f334ee98..6dd52c739 100644
--- a/frontend/src/app/main/ui/workspace/plugins.scss
+++ b/frontend/src/app/main/ui/workspace/plugins.scss
@@ -26,7 +26,7 @@
   }
 
   hr {
-    border-color: $db-tertiary;
+    border-color: var(--color-background-tertiary);
   }
 }
 
@@ -148,12 +148,12 @@
 
 .plugin-title {
   @include bodyMediumTypography;
-  color: $df-primary;
+  color: var(--color-foreground-primary);
 }
 
 .plugin-summary {
   @include bodySmallTypography;
-  color: $df-secondary;
+  color: var(--color-foreground-secondary);
 }
 
 .plugins-empty {
@@ -173,19 +173,19 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  background: $db-tertiary;
+  background: var(--color-background-tertiary);
 
   svg {
     width: $s-16;
     height: $s-16;
-    stroke: $df-secondary;
+    stroke: var(--color-foreground-secondary);
     fill: none;
   }
 }
 
 .plugins-empty-text {
   @include bodySmallTypography;
-  color: $df-primary;
+  color: var(--color-foreground-primary);
 }
 
 div.input-error {
@@ -206,7 +206,7 @@ div.input-error {
 }
 
 .plugins-link {
-  color: $da-primary;
+  color: var(--color-accent-primary);
   font-size: $fs-12;
   display: inline-flex;
   align-items: center;
@@ -216,7 +216,7 @@ div.input-error {
     margin-top: calc(-1 * $s-2);
     width: $s-12;
     height: $s-12;
-    stroke: $da-primary;
+    stroke: var(--color-accent-primary);
     fill: none;
   }
 }
@@ -239,7 +239,7 @@ div.input-error {
   svg {
     width: $s-24;
     height: $s-24;
-    stroke: $da-primary;
+    stroke: var(--color-accent-primary);
     fill: none;
   }
 }
@@ -247,14 +247,14 @@ div.input-error {
 .permissions-list-text {
   @include bodySmallTypography;
   margin: 0;
-  color: $df-secondary;
+  color: var(--color-foreground-secondary);
 }
 
 .permissions-disclaimer {
   @include bodySmallTypography;
   padding: $s-16;
-  background: $db-tertiary;
-  color: $df-secondary;
+  background: var(--color-background-tertiary);
+  color: var(--color-foreground-secondary);
   border-radius: $br-4;
 }
 
@@ -265,10 +265,10 @@ div.input-error {
 
 .discover {
   @include bodySmallTypography;
-  color: $df-secondary;
+  color: var(--color-foreground-secondary);
   margin-top: $s-24;
 
   a {
-    color: $da-primary;
+    color: var(--color-accent-primary);
   }
 }
diff --git a/frontend/src/app/main/ui/workspace/sidebar/debug_shape_info.scss b/frontend/src/app/main/ui/workspace/sidebar/debug_shape_info.scss
index 516a1f705..7d3c27352 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/debug_shape_info.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/debug_shape_info.scss
@@ -10,7 +10,7 @@
   display: flex;
   flex-direction: column;
   background-color: var(--panel-background-color);
-  color: $df-primary;
+  color: var(--color-foreground-primary);
   font-size: $fs-12;
   user-select: text;
 }
@@ -54,8 +54,8 @@
 .shape-title {
   font-size: $fs-14;
   padding-bottom: $s-4;
-  background: $db-quaternary;
-  color: $df-primary;
+  background: var(--color-background-quaternary);
+  color: var(--color-foreground-primary);
   padding: $s-8;
   border-radius: $s-8;
   display: flex;
@@ -83,7 +83,7 @@
 }
 
 .shape-link {
-  color: $df-primary;
+  color: var(--color-foreground-primary);
   text-decoration: underline;
 }
 
diff --git a/frontend/src/app/main/ui/workspace/sidebar/history.scss b/frontend/src/app/main/ui/workspace/sidebar/history.scss
index 929205901..865bf6ffd 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/history.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/history.scss
@@ -95,7 +95,7 @@
     }
     .history-entry-summary-text {
       margin: 0 $s-8;
-      color: $df-primary;
+      color: var(--color-foreground-primary);
     }
     .history-entry-summary-button {
       opacity: $op-0;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss
index 02babb274..aa443fa33 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss
@@ -260,7 +260,7 @@
 .component-list-empty {
   @include bodySmallTypography;
   margin: 0 $s-4 0 $s-8;
-  color: $df-secondary;
+  color: var(--color-foreground-secondary);
 }
 
 .component-item {
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss
index 50686a5e2..531b94989 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss
@@ -289,7 +289,7 @@
   }
 
   .track-name {
-    color: $df-primary;
+    color: var(--color-foreground-primary);
   }
 
   .track-detail {
@@ -297,7 +297,7 @@
     white-space: nowrap;
     text-overflow: ellipsis;
     width: 100%;
-    color: $df-secondary;
+    color: var(--color-foreground-secondary);
   }
 
   .expand-icon {
@@ -357,11 +357,11 @@
   button {
     @include buttonStyle;
     padding: $s-8;
-    color: $df-primary;
+    color: var(--color-foreground-primary);
     border-radius: $br-6;
 
     &:hover {
-      background: $db-quaternary;
+      background: var(--color-background-quaternary);
     }
   }
 }
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.scss
index 3f8ca8b21..87ce7989e 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.scss
@@ -65,7 +65,7 @@
   font-size: $fs-10;
   text-transform: uppercase;
   margin-inline-start: $s-4;
-  color: $df-primary;
+  color: var(--color-foreground-primary);
 }
 
 .attr-row {
diff --git a/frontend/src/app/main/ui/workspace/viewport/outline.cljs b/frontend/src/app/main/ui/workspace/viewport/outline.cljs
index 3cd2b3a95..41b67bc99 100644
--- a/frontend/src/app/main/ui/workspace/viewport/outline.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport/outline.cljs
@@ -33,7 +33,7 @@
         ;; NOTE: that we don't use mf/deref to avoid a repaint dependency here
         objects   (deref refs/workspace-page-objects)
         color     (if (ctn/in-any-component? objects shape)
-                    "var(--color-component-highlight)"
+                    "var(--assets-component-hightlight)"
                     "var(--color-accent-tertiary)")
 
         x         (dm/get-prop shape :x)
diff --git a/frontend/src/app/main/ui/workspace/viewport/selection.cljs b/frontend/src/app/main/ui/workspace/viewport/selection.cljs
index be2466409..841661452 100644
--- a/frontend/src/app/main/ui/workspace/viewport/selection.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport/selection.cljs
@@ -32,7 +32,7 @@
 (def resize-point-rect-size 8)
 (def resize-side-height 8)
 (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 min-selrect-side 10)
 (def small-selrect-side 30)
diff --git a/frontend/src/app/main/ui/workspace/viewport/widgets.cljs b/frontend/src/app/main/ui/workspace/viewport/widgets.cljs
index 615ea9db0..1d2ee1948 100644
--- a/frontend/src/app/main/ui/workspace/viewport/widgets.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport/widgets.cljs
@@ -87,7 +87,7 @@
 
         color (if selected?
                 (if (ctn/in-any-component? objects frame)
-                  "var(--color-component-highlight)"
+                  "var(--assets-component-hightlight)"
                   "var(--color-accent-tertiary)")
                 "#8f9da3") ;; TODO: Set this color on the DS