♻️ Remove duplicated color tokens

2025-03-10 14:51:37 -05:00 · 2024-07-23 13:07:01 +02:00 · 2024-07-23 13:07:01 +02:00 · 2c5289d338
commit 2c5289d338
parent 00c5d58203
44 changed files with 264 additions and 357 deletions
--- 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;
--- a/frontend/resources/styles/common/refactor/themes/hljs-dark-theme.scss
+++ b/frontend/resources/styles/common/refactor/themes/hljs-dark-theme.scss
--- a/frontend/resources/styles/common/refactor/themes/hljs-light-theme.scss
+++ b/frontend/resources/styles/common/refactor/themes/hljs-light-theme.scss
--- a/frontend/resources/styles/common/dependencies/highlight.scss
+++ 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");
+}
--- 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%)};
--- 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;
--- 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);
--- 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);
--- 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");
 }
--- 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");
 }
--- 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";
--- 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;
  }

--- 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;
  }
 }
--- 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;
  }
--- 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;
--- 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;
--- 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;
  }
 }
--- 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;
    }
--- 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;
--- 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;
--- 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;
 }
--- 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;
 }
--- 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;
  }
--- 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;
--- 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);
 }
--- 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)
--- 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;
    }

--- 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);
    }
  }
 }
--- 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;
  }
--- 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 {
--- 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);
  }
 }
--- 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 {
--- 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;
 }
--- 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;
--- 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 {
--- 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);
  }
 }
--- 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;
 }

--- 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;
--- 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 {
--- 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);
    }
  }
 }
--- 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 {
--- 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)
--- 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)
--- 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