diff --git a/frontend/playwright/ui/render-wasm-specs/texts.spec.js b/frontend/playwright/ui/render-wasm-specs/texts.spec.js
index 9657ee1393..d4a959e3da 100644
--- a/frontend/playwright/ui/render-wasm-specs/texts.spec.js
+++ b/frontend/playwright/ui/render-wasm-specs/texts.spec.js
@@ -227,7 +227,9 @@ test("Renders a file with multiple emoji", async ({ page }) => {
   await expect(workspace.canvas).toHaveScreenshot();
 });
 
-test("Renders a file with multiple text shadows, strokes, and blur combinations", async ({ page }) => {
+test("Renders a file with multiple text shadows, strokes, and blur combinations", async ({
+  page,
+}) => {
   const workspace = new WasmWorkspacePage(page);
   await workspace.setupEmptyFile();
 
@@ -243,7 +245,9 @@ test("Renders a file with multiple text shadows, strokes, and blur combinations"
   await expect(workspace.canvas).toHaveScreenshot();
 });
 
-test("Renders a file with different text leaves decoration", async ({ page }) => {
+test("Renders a file with different text leaves decoration", async ({
+  page,
+}) => {
   const workspace = new WasmWorkspacePage(page);
   await workspace.setupEmptyFile();
   await workspace.mockGetFile(
@@ -259,7 +263,9 @@ test("Renders a file with different text leaves decoration", async ({ page }) =>
   await expect(workspace.canvas).toHaveScreenshot();
 });
 
-test("Renders a file with different text shadows combinations", async ({ page }) => {
+test("Renders a file with different text shadows combinations", async ({
+  page,
+}) => {
   const workspace = new WasmWorkspacePage(page);
   await workspace.setupEmptyFile();
   await workspace.mockGetFile(
@@ -275,8 +281,9 @@ test("Renders a file with different text shadows combinations", async ({ page })
   await expect(workspace.canvas).toHaveScreenshot();
 });
 
-
-test("Renders a file with text in frames and different strokes, shadows, and blurs", async ({ page }) => {
+test("Renders a file with text in frames and different strokes, shadows, and blurs", async ({
+  page,
+}) => {
   const workspace = new WasmWorkspacePage(page);
   await workspace.setupEmptyFile();
   await workspace.mockGetFile(
diff --git a/frontend/playwright/ui/specs/profile-menu.spec.js b/frontend/playwright/ui/specs/profile-menu.spec.js
index f804e5d26f..fdb35e28e6 100644
--- a/frontend/playwright/ui/specs/profile-menu.spec.js
+++ b/frontend/playwright/ui/specs/profile-menu.spec.js
@@ -24,21 +24,20 @@ test("Navigate to penpot changelog from profile menu", async ({ page }) => {
   ]);
 
   await newPage.waitForLoadState();
-  await expect(newPage).toHaveURL("https://github.com/penpot/penpot/blob/develop/CHANGES.md");
+  await expect(newPage).toHaveURL(
+    "https://github.com/penpot/penpot/blob/develop/CHANGES.md",
+  );
 });
 
-test("Opens release notes from current version from profile menu", async ({ page }) => {
+test("Opens release notes from current version from profile menu", async ({
+  page,
+}) => {
   const dashboardPage = new DashboardPage(page);
   await dashboardPage.goToDashboard();
 
   await dashboardPage.openProfileMenu();
   await dashboardPage.clickProfileMenuItem("About Penpot");
-  await expect(
-      page.getByText("Version 0.0.0 notes"),
-    ).toBeVisible();
+  await expect(page.getByText("Version 0.0.0 notes")).toBeVisible();
   await dashboardPage.clickProfileMenuItem("Version");
-  await expect(
-      page.getByText("new in penpot?"),
-    ).toBeVisible();
-
+  await expect(page.getByText("new in penpot?")).toBeVisible();
 });
diff --git a/frontend/playwright/ui/specs/tokens.spec.js b/frontend/playwright/ui/specs/tokens.spec.js
index 79b1c8cc94..f71397ce28 100644
--- a/frontend/playwright/ui/specs/tokens.spec.js
+++ b/frontend/playwright/ui/specs/tokens.spec.js
@@ -1000,9 +1000,11 @@ test.describe("Tokens: Themes modal", () => {
       };
 
       // Switch to reference tab and back to composite tab
-      const referenceTabButton = tokensUpdateCreateModal.getByTestId("reference-opt");
+      const referenceTabButton =
+        tokensUpdateCreateModal.getByTestId("reference-opt");
       await referenceTabButton.click();
-      const compositeTabButton = tokensUpdateCreateModal.getByTestId("composite-opt");
+      const compositeTabButton =
+        tokensUpdateCreateModal.getByTestId("composite-opt");
       await compositeTabButton.click();
 
       // Verify all values are preserved after switching tabs
@@ -1052,7 +1054,8 @@ test.describe("Tokens: Themes modal", () => {
       await expect(submitButton).toBeDisabled();
 
       // Switch to reference tab, should not be submittable either
-   const referenceTabButton = tokensUpdateCreateModal.getByTestId("reference-opt");
+      const referenceTabButton =
+        tokensUpdateCreateModal.getByTestId("reference-opt");
       await referenceTabButton.click();
       await expect(submitButton).toBeDisabled();
     });
@@ -1073,7 +1076,8 @@ test.describe("Tokens: Themes modal", () => {
       const nameField = tokensUpdateCreateModal.getByLabel("Name");
       await nameField.fill(newTokenTitle);
 
-         const referenceTabButton = tokensUpdateCreateModal.getByTestId("reference-opt");
+      const referenceTabButton =
+        tokensUpdateCreateModal.getByTestId("reference-opt");
       referenceTabButton.click();
 
       const referenceField = tokensUpdateCreateModal.getByLabel("Reference");
diff --git a/frontend/playwright/ui/visual-specs/visual-viewer.spec.js b/frontend/playwright/ui/visual-specs/visual-viewer.spec.js
index ef6901f702..977eb57fcb 100644
--- a/frontend/playwright/ui/visual-specs/visual-viewer.spec.js
+++ b/frontend/playwright/ui/visual-specs/visual-viewer.spec.js
@@ -62,7 +62,7 @@ test("User goes to the Viewer Comments", async ({ page }) => {
   await viewerPage.showComments();
   await viewerPage.showCommentsThread(1);
   await expect(
-    viewerPage.page.getByRole("textbox", { name: "Reply" }),
+    viewerPage.page.getByRole("button", { name: "Post" }),
   ).toBeVisible();
 
   await expect(viewerPage.page).toHaveScreenshot();
@@ -101,7 +101,11 @@ test("User goes to the Viewer Inspect code", async ({ page }) => {
 
   await viewerPage.showCode();
 
-  await expect(viewerPage.page.getByText("Size and position")).toBeVisible();
+  await expect(
+    viewerPage.page.getByRole("button", {
+      name: "Toggle panel Size & Position",
+    }),
+  ).toBeVisible();
 
   await expect(viewerPage.page).toHaveScreenshot();
 });
@@ -117,7 +121,11 @@ test("User goes to the Viewer Inspect code, code tab", async ({ page }) => {
   });
 
   await viewerPage.showCode();
-  await viewerPage.page.getByRole("tab", { name: "code" }).click();
+  await viewerPage.page
+    .getByRole("combobox")
+    .filter({ hasText: "Styles" })
+    .click();
+  await viewerPage.page.getByRole("option", { name: "Code" }).click();
 
   await expect(
     viewerPage.page.getByRole("button", { name: "Copy all code" }),
diff --git a/frontend/playwright/ui/visual-specs/workspace.spec.js b/frontend/playwright/ui/visual-specs/workspace.spec.js
index e594ea343f..418b92861d 100644
--- a/frontend/playwright/ui/visual-specs/workspace.spec.js
+++ b/frontend/playwright/ui/visual-specs/workspace.spec.js
@@ -95,9 +95,7 @@ test.describe("Assets tab", () => {
 
     await workspace.clickLibrary("Testing library 1");
     await expect(
-      workspace.librariesModal.getByText(
-        "There are no Shared Libraries available",
-      ),
+      workspace.librariesModal.getByText("File library"),
     ).toBeVisible();
     await expect(workspace.page).toHaveScreenshot();
   });
diff --git a/frontend/resources/styles/common/refactor/basic-rules.scss b/frontend/resources/styles/common/refactor/basic-rules.scss
index c4e8ea422e..91093d5e0d 100644
--- a/frontend/resources/styles/common/refactor/basic-rules.scss
+++ b/frontend/resources/styles/common/refactor/basic-rules.scss
@@ -4,6 +4,13 @@
 //
 // Copyright (c) KALEIDOS INC
 
+@use "./spacing.scss" as *;
+@use "./borders.scss" as *;
+@use "./mixins.scss" as *;
+@use "./focus.scss" as *;
+@use "./shadows.scss" as *;
+@use "./z-index.scss" as *;
+
 // SCROLLBAR
 .new-scrollbar {
   scrollbar-width: thin;
@@ -52,7 +59,6 @@
 .button-primary {
   @include buttonStyle;
   @include flexCenter;
-  @include focusPrimary;
   @include headlineSmallTypography;
   background-color: var(--button-primary-background-color-rest);
   border: $s-1 solid var(--button-primary-border-color-rest);
@@ -63,15 +69,16 @@
   span svg {
     stroke: var(--button-primary-foreground-color-rest);
   }
+  @include focusPrimary;
   &:hover {
     background-color: var(--button-primary-background-color-hover);
     border: $s-1 solid var(--button-primary-border-color-hover);
     color: var(--button-primary-foreground-color-hover);
+    text-decoration: none;
     svg,
     span svg {
       stroke: var(--button-primary-foreground-color-hover);
     }
-    text-decoration: none;
   }
   &:active {
     background-color: var(--button-primary-background-color-active);
@@ -96,7 +103,6 @@
 .button-secondary {
   @include buttonStyle;
   @include flexCenter;
-  @include focusSecondary;
   border-radius: $br-8;
   background-color: var(--button-secondary-background-color-rest);
   border: $s-1 solid var(--button-secondary-border-color-rest);
@@ -105,6 +111,7 @@
   span svg {
     stroke: var(--button-secondary-foreground-color-rest);
   }
+  @include focusSecondary;
   &:hover {
     background-color: var(--button-secondary-background-color-hover);
     border: $s-1 solid var(--button-secondary-border-color-hover);
@@ -138,7 +145,6 @@
 .button-tertiary {
   @include buttonStyle;
   @include flexCenter;
-  @include focusTertiary;
   --button-tertiary-border-width: #{$s-2};
   border-radius: $br-8;
   color: var(--button-tertiary-foreground-color-rest);
@@ -150,6 +156,7 @@
   span svg {
     stroke: var(--button-tertiary-foreground-color-rest);
   }
+  @include focusTertiary;
   &:hover {
     background-color: var(--button-tertiary-background-color-hover);
     color: var(--button-tertiary-foreground-color-hover);
@@ -197,7 +204,6 @@
 .button-radio {
   @include buttonStyle;
   @include flexCenter;
-  @include focusRadio;
   border-radius: $br-8;
   color: var(--button-radio-foreground-color-rest);
   border-color: $s-1 solid var(--button-radio-background-color-rest);
@@ -205,6 +211,7 @@
   span svg {
     stroke: var(--button-radio-foreground-color-rest);
   }
+  @include focusRadio;
   &:hover {
     background-color: var(--button-radio-background-color-rest);
     color: var(--button-radio-foreground-color-hover);
@@ -324,7 +331,6 @@
 }
 
 .input-element {
-  @include focusInput;
   display: flex;
   align-items: center;
   height: $s-32;
@@ -349,6 +355,7 @@
     color: var(--input-placeholder-color);
   }
 
+  @include focusInput;
   &:hover {
     border: $s-1 solid var(--input-border-color-hover);
     background-color: var(--input-background-color-hover);
diff --git a/frontend/resources/styles/common/refactor/borders.scss b/frontend/resources/styles/common/refactor/borders.scss
index 76949a647f..4c4d27ab00 100644
--- a/frontend/resources/styles/common/refactor/borders.scss
+++ b/frontend/resources/styles/common/refactor/borders.scss
@@ -5,12 +5,12 @@
 // Copyright (c) KALEIDOS INC
 
 // Border radius
-$br-0: $s-0;
-$br-2: $s-2;
-$br-4: $s-4;
+$br-0: 0;
+$br-2: 2px;
+$br-4: 4px;
 $br-5: 0.313rem;
-$br-6: $s-6;
-$br-8: $s-8;
-$br-10: calc($s-8 + $s-2);
-$br-12: $s-12;
+$br-6: 6px;
+$br-8: 8px;
+$br-10: 10px;
+$br-12: 12px;
 $br-circle: 50%;
diff --git a/frontend/resources/styles/common/refactor/common-refactor.scss b/frontend/resources/styles/common/refactor/common-refactor.scss
index 952beb6cc6..a6098ee978 100644
--- a/frontend/resources/styles/common/refactor/common-refactor.scss
+++ b/frontend/resources/styles/common/refactor/common-refactor.scss
@@ -8,13 +8,13 @@
 // MAIN STYLES
 //#################################################
 
-@import "common/refactor/fonts.scss";
-@import "common/refactor/spacing.scss";
-@import "common/refactor/borders.scss";
-@import "common/refactor/opacity.scss";
-@import "common/refactor/shadows.scss";
-@import "common/refactor/z-index.scss";
-@import "common/refactor/mixins.scss";
-@import "common/refactor/focus.scss";
-@import "common/refactor/animations.scss";
-@import "common/refactor/basic-rules.scss";
+@forward "./fonts.scss";
+@forward "./spacing.scss";
+@forward "./borders.scss";
+@forward "./opacity.scss";
+@forward "./shadows.scss";
+@forward "./z-index.scss";
+@forward "./mixins.scss";
+@forward "./focus.scss";
+@forward "./animations.scss";
+@forward "./basic-rules.scss";
diff --git a/frontend/resources/styles/common/refactor/focus.scss b/frontend/resources/styles/common/refactor/focus.scss
index 8efdeebd5e..0ac2dde780 100644
--- a/frontend/resources/styles/common/refactor/focus.scss
+++ b/frontend/resources/styles/common/refactor/focus.scss
@@ -4,6 +4,8 @@
 //
 // Copyright (c) KALEIDOS INC
 
+@use "./spacing.scss" as *;
+
 @mixin focusType($type) {
   $realType: "";
   @if $type {
diff --git a/frontend/resources/styles/common/refactor/mixins.scss b/frontend/resources/styles/common/refactor/mixins.scss
index a9b928834c..c4d07d09e2 100644
--- a/frontend/resources/styles/common/refactor/mixins.scss
+++ b/frontend/resources/styles/common/refactor/mixins.scss
@@ -4,6 +4,9 @@
 //
 // Copyright (c) KALEIDOS INC
 
+@use "./fonts.scss" as *;
+@use "./spacing.scss" as *;
+
 @mixin flexCenter {
   display: flex;
   justify-content: center;
diff --git a/frontend/resources/styles/common/refactor/shadows.scss b/frontend/resources/styles/common/refactor/shadows.scss
index ec1e172d2d..c936ca115d 100644
--- a/frontend/resources/styles/common/refactor/shadows.scss
+++ b/frontend/resources/styles/common/refactor/shadows.scss
@@ -4,6 +4,8 @@
 //
 // Copyright (c) KALEIDOS INC
 
+@use "./spacing.scss" as *;
+
 @mixin menuShadow {
   box-shadow: 0px 0px $s-12 0px var(--menu-shadow-color);
 }
diff --git a/frontend/resources/styles/common/refactor/themes.scss b/frontend/resources/styles/common/refactor/themes.scss
index 3df0c6f253..9a5a9a1e64 100644
--- a/frontend/resources/styles/common/refactor/themes.scss
+++ b/frontend/resources/styles/common/refactor/themes.scss
@@ -4,5 +4,5 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "./themes/default-theme.scss";
-@import "./themes/light-theme.scss";
+@forward "./themes/default-theme.scss";
+@forward "./themes/light-theme.scss";
diff --git a/frontend/resources/styles/main-default.scss b/frontend/resources/styles/main-default.scss
index 341606c7ea..5b6c1cb247 100644
--- a/frontend/resources/styles/main-default.scss
+++ b/frontend/resources/styles/main-default.scss
@@ -8,21 +8,21 @@
 // MAIN STYLES
 //#################################################
 
-@import "common/dependencies/reset";
-@import "common/refactor/color-defs.scss";
-@import "common/dependencies/fonts";
-@import "common/dependencies/animations";
-@import "common/dependencies/highlight.scss";
-@import "common/dependencies/storybook.scss";
+@forward "common/dependencies/reset";
+@forward "common/refactor/color-defs.scss";
+@forward "common/dependencies/fonts";
+@forward "common/dependencies/animations";
+@forward "common/dependencies/highlight.scss";
+@forward "common/dependencies/storybook.scss";
 
-@import "common/refactor/themes.scss";
-@import "common/refactor/design-tokens.scss";
+@forward "common/refactor/themes.scss";
+@forward "common/refactor/design-tokens.scss";
 
 //#################################################
 // Layouts
 //#################################################
 
-@import "common/base";
+@forward "common/base";
 
 //#################################################
 // Commons
@@ -30,4 +30,4 @@
 
 // TODO: remove this stylesheet once the new text editor is in place
 //       https: //tree.taiga.io/project/penpot/us/8165
-@import "main/partials/texts";
+@forward "main/partials/texts";
diff --git a/frontend/scripts/_worker.js b/frontend/scripts/_worker.js
index dab3e68c43..103eac3e99 100644
--- a/frontend/scripts/_worker.js
+++ b/frontend/scripts/_worker.js
@@ -26,7 +26,6 @@ async function compileFile(path) {
           "resources/styles",
         ],
         sourceMap: false,
-        silenceDeprecations: ["import", "mixed-decls"],
       });
       // console.dir(result);
       resolve({
diff --git a/frontend/src/app/main/ui/alert.scss b/frontend/src/app/main/ui/alert.scss
index 6955de2517..74cc5d92b4 100644
--- a/frontend/src/app/main/ui/alert.scss
+++ b/frontend/src/app/main/ui/alert.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .modal-overlay {
   @extend .modal-overlay-base;
diff --git a/frontend/src/app/main/ui/comments.scss b/frontend/src/app/main/ui/comments.scss
index 62cd9977ff..fd333d6ed6 100644
--- a/frontend/src/app/main/ui/comments.scss
+++ b/frontend/src/app/main/ui/comments.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .cursor-grabbing {
   cursor: grabbing;
diff --git a/frontend/src/app/main/ui/components/button_link.scss b/frontend/src/app/main/ui/components/button_link.scss
index 81b0538d9a..492287b2ed 100644
--- a/frontend/src/app/main/ui/components/button_link.scss
+++ b/frontend/src/app/main/ui/components/button_link.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .button {
   appearance: none;
diff --git a/frontend/src/app/main/ui/components/code_block.scss b/frontend/src/app/main/ui/components/code_block.scss
index 5f28cd4624..0e38ae1c80 100644
--- a/frontend/src/app/main/ui/components/code_block.scss
+++ b/frontend/src/app/main/ui/components/code_block.scss
@@ -5,14 +5,14 @@
 // Copyright (c) KALEIDOS INC
 
 @use "../ds/typography.scss" as t;
-@import "refactor/common-refactor.scss";
+@use "../ds/borders" as *;
 
 .code-display {
   @include t.use-typography("code-font");
   user-select: text;
   border-radius: $br-8;
-  margin-top: $s-8;
-  padding: $s-12;
+  margin-top: var(--sp-s);
+  padding: var(--sp-m);
   background-color: var(--menu-background-color);
   color: var(--input-foreground-color-active);
   overflow: auto;
diff --git a/frontend/src/app/main/ui/components/color_bullet.scss b/frontend/src/app/main/ui/components/color_bullet.scss
index 37b733f34d..a04df7986d 100644
--- a/frontend/src/app/main/ui/components/color_bullet.scss
+++ b/frontend/src/app/main/ui/components/color_bullet.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .color-bullet {
   position: relative;
diff --git a/frontend/src/app/main/ui/components/context_menu_a11y.scss b/frontend/src/app/main/ui/components/context_menu_a11y.scss
index d15988775d..0b4fc187e9 100644
--- a/frontend/src/app/main/ui/components/context_menu_a11y.scss
+++ b/frontend/src/app/main/ui/components/context_menu_a11y.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .context-menu {
   position: relative;
diff --git a/frontend/src/app/main/ui/components/copy_button.scss b/frontend/src/app/main/ui/components/copy_button.scss
index ec8e362bb5..bb93e1acc4 100644
--- a/frontend/src/app/main/ui/components/copy_button.scss
+++ b/frontend/src/app/main/ui/components/copy_button.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .copy-button {
   @include buttonStyle;
diff --git a/frontend/src/app/main/ui/components/editable_label.scss b/frontend/src/app/main/ui/components/editable_label.scss
index a8c3991589..432d46f77f 100644
--- a/frontend/src/app/main/ui/components/editable_label.scss
+++ b/frontend/src/app/main/ui/components/editable_label.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .editable-label-input {
   @include textEllipsis;
diff --git a/frontend/src/app/main/ui/components/editable_select.scss b/frontend/src/app/main/ui/components/editable_select.scss
index 6edb393932..d0e7ce8ff1 100644
--- a/frontend/src/app/main/ui/components/editable_select.scss
+++ b/frontend/src/app/main/ui/components/editable_select.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .editable-select {
   @extend .asset-element;
diff --git a/frontend/src/app/main/ui/components/forms.scss b/frontend/src/app/main/ui/components/forms.scss
index 61960d2609..a2c946eadd 100644
--- a/frontend/src/app/main/ui/components/forms.scss
+++ b/frontend/src/app/main/ui/components/forms.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 // INPUT
 .input-wrapper {
diff --git a/frontend/src/app/main/ui/components/radio_buttons.scss b/frontend/src/app/main/ui/components/radio_buttons.scss
index 88c0913387..b88a7e1891 100644
--- a/frontend/src/app/main/ui/components/radio_buttons.scss
+++ b/frontend/src/app/main/ui/components/radio_buttons.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .radio-btn-wrapper {
   @include flexCenter;
diff --git a/frontend/src/app/main/ui/components/search_bar.scss b/frontend/src/app/main/ui/components/search_bar.scss
index 5dfa161079..9a155d68a4 100644
--- a/frontend/src/app/main/ui/components/search_bar.scss
+++ b/frontend/src/app/main/ui/components/search_bar.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .search-box {
   display: flex;
diff --git a/frontend/src/app/main/ui/components/select.scss b/frontend/src/app/main/ui/components/select.scss
index 386ba4db4f..a9096a5a60 100644
--- a/frontend/src/app/main/ui/components/select.scss
+++ b/frontend/src/app/main/ui/components/select.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .custom-select {
   --border-color: var(--menu-background-color);
diff --git a/frontend/src/app/main/ui/components/tab_container.scss b/frontend/src/app/main/ui/components/tab_container.scss
index c01715bd42..2090240177 100644
--- a/frontend/src/app/main/ui/components/tab_container.scss
+++ b/frontend/src/app/main/ui/components/tab_container.scss
@@ -3,7 +3,7 @@
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 //
 // Copyright (c) KALEIDOS INC
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .tab-container {
   display: grid;
diff --git a/frontend/src/app/main/ui/components/title_bar.scss b/frontend/src/app/main/ui/components/title_bar.scss
index 4e9e75f783..06586905cb 100644
--- a/frontend/src/app/main/ui/components/title_bar.scss
+++ b/frontend/src/app/main/ui/components/title_bar.scss
@@ -5,7 +5,7 @@
 // Copyright (c) KALEIDOS INC
 
 @use "../ds/typography.scss" as t;
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .title-bar {
   display: flex;
diff --git a/frontend/src/app/main/ui/confirm.scss b/frontend/src/app/main/ui/confirm.scss
index 3dfec11100..94a72efc65 100644
--- a/frontend/src/app/main/ui/confirm.scss
+++ b/frontend/src/app/main/ui/confirm.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .modal-overlay {
   @extend .modal-overlay-base;
diff --git a/frontend/src/app/main/ui/dashboard/change_owner.scss b/frontend/src/app/main/ui/dashboard/change_owner.scss
index 0e960020e0..0b94ce465e 100644
--- a/frontend/src/app/main/ui/dashboard/change_owner.scss
+++ b/frontend/src/app/main/ui/dashboard/change_owner.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .modal-overlay {
   @extend .modal-overlay-base;
diff --git a/frontend/src/app/main/ui/dashboard/grid.scss b/frontend/src/app/main/ui/dashboard/grid.scss
index fe58c48252..2319611ea8 100644
--- a/frontend/src/app/main/ui/dashboard/grid.scss
+++ b/frontend/src/app/main/ui/dashboard/grid.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 // TODO: Legacy sass variables. We should remove them in favor of DS tokens.
 $bp-max-1366: "(max-width: 1366px)";
diff --git a/frontend/src/app/main/ui/dashboard/import.scss b/frontend/src/app/main/ui/dashboard/import.scss
index 0ce6ae41a5..5df69e82ab 100644
--- a/frontend/src/app/main/ui/dashboard/import.scss
+++ b/frontend/src/app/main/ui/dashboard/import.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .modal-overlay {
   @extend .modal-overlay-base;
diff --git a/frontend/src/app/main/ui/dashboard/team_form.scss b/frontend/src/app/main/ui/dashboard/team_form.scss
index d57cffb82e..6decdde6b4 100644
--- a/frontend/src/app/main/ui/dashboard/team_form.scss
+++ b/frontend/src/app/main/ui/dashboard/team_form.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .modal-overlay {
   @extend .modal-overlay-base;
diff --git a/frontend/src/app/main/ui/delete_shared.scss b/frontend/src/app/main/ui/delete_shared.scss
index c0ee957e6a..e6accaaabd 100644
--- a/frontend/src/app/main/ui/delete_shared.scss
+++ b/frontend/src/app/main/ui/delete_shared.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .modal-overlay {
   @extend .modal-overlay-base;
diff --git a/frontend/src/app/main/ui/exports/assets.scss b/frontend/src/app/main/ui/exports/assets.scss
index 0af4851951..462161c7f9 100644
--- a/frontend/src/app/main/ui/exports/assets.scss
+++ b/frontend/src/app/main/ui/exports/assets.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 // PROGRESS WIDGET
 .export-progress-widget {
diff --git a/frontend/src/app/main/ui/exports/files.scss b/frontend/src/app/main/ui/exports/files.scss
index 8857bd9c0c..370f075930 100644
--- a/frontend/src/app/main/ui/exports/files.scss
+++ b/frontend/src/app/main/ui/exports/files.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 // EXPORT MODAL
 .modal-overlay {
diff --git a/frontend/src/app/main/ui/inspect/annotation.scss b/frontend/src/app/main/ui/inspect/annotation.scss
index 27d27c61c2..bc826bbc73 100644
--- a/frontend/src/app/main/ui/inspect/annotation.scss
+++ b/frontend/src/app/main/ui/inspect/annotation.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .attributes-block {
   @include flexColumn;
diff --git a/frontend/src/app/main/ui/inspect/attributes.scss b/frontend/src/app/main/ui/inspect/attributes.scss
index ddd279ff2b..c70b8a0072 100644
--- a/frontend/src/app/main/ui/inspect/attributes.scss
+++ b/frontend/src/app/main/ui/inspect/attributes.scss
@@ -5,20 +5,20 @@
 // Copyright (c) KALEIDOS INC
 
 @use "../ds/_sizes.scss" as *;
-@import "refactor/common-refactor.scss";
+@use "../ds/utils" as *;
 
 .element-options {
   display: flex;
   flex-direction: column;
-  gap: $s-16;
+  gap: var(--sp-l);
   width: 100%;
-  height: calc(100vh - #{$s-128}); // TODO: Fix this hardcoded value
-  padding-top: $s-8;
+  height: calc(100vh - px2rem(128)); // TODO: Fix this hardcoded value
+  padding-top: var(--sp-s);
   overflow-y: auto;
   overflow-x: hidden;
   scrollbar-gutter: stable;
 }
 
 .workspace-element-options {
-  height: calc(100vh - #{$sz-200}); // TODO: Fix this hardcoded value
+  height: calc(100vh - px2rem(200)); // TODO: Fix this hardcoded value
 }
diff --git a/frontend/src/app/main/ui/inspect/attributes/blur.scss b/frontend/src/app/main/ui/inspect/attributes/blur.scss
index a3f2dc334e..62087b9a9e 100644
--- a/frontend/src/app/main/ui/inspect/attributes/blur.scss
+++ b/frontend/src/app/main/ui/inspect/attributes/blur.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .attributes-block {
   @include flexColumn;
diff --git a/frontend/src/app/main/ui/inspect/attributes/common.scss b/frontend/src/app/main/ui/inspect/attributes/common.scss
index 5ea1fdf411..44f749162d 100644
--- a/frontend/src/app/main/ui/inspect/attributes/common.scss
+++ b/frontend/src/app/main/ui/inspect/attributes/common.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .attributes-image-as-color-row {
   max-width: $s-240;
diff --git a/frontend/src/app/main/ui/inspect/attributes/fill.scss b/frontend/src/app/main/ui/inspect/attributes/fill.scss
index 9515dad3ee..2ccf774305 100644
--- a/frontend/src/app/main/ui/inspect/attributes/fill.scss
+++ b/frontend/src/app/main/ui/inspect/attributes/fill.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .attributes-block {
   @include flexColumn;
diff --git a/frontend/src/app/main/ui/inspect/attributes/geometry.scss b/frontend/src/app/main/ui/inspect/attributes/geometry.scss
index b32c0c1031..c9b8594e06 100644
--- a/frontend/src/app/main/ui/inspect/attributes/geometry.scss
+++ b/frontend/src/app/main/ui/inspect/attributes/geometry.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .attributes-block {
   @include flexColumn;
diff --git a/frontend/src/app/main/ui/inspect/attributes/layout.scss b/frontend/src/app/main/ui/inspect/attributes/layout.scss
index 8a84e1d988..25a7ea8a8c 100644
--- a/frontend/src/app/main/ui/inspect/attributes/layout.scss
+++ b/frontend/src/app/main/ui/inspect/attributes/layout.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .attributes-block {
   @include flexColumn;
diff --git a/frontend/src/app/main/ui/inspect/attributes/layout_element.scss b/frontend/src/app/main/ui/inspect/attributes/layout_element.scss
index 56b174dd58..dc62771306 100644
--- a/frontend/src/app/main/ui/inspect/attributes/layout_element.scss
+++ b/frontend/src/app/main/ui/inspect/attributes/layout_element.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .attributes-block {
   @include flexColumn;
diff --git a/frontend/src/app/main/ui/inspect/attributes/shadow.scss b/frontend/src/app/main/ui/inspect/attributes/shadow.scss
index 1d741ab26e..5a45188c88 100644
--- a/frontend/src/app/main/ui/inspect/attributes/shadow.scss
+++ b/frontend/src/app/main/ui/inspect/attributes/shadow.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .attributes-block {
   @include flexColumn;
diff --git a/frontend/src/app/main/ui/inspect/attributes/stroke.scss b/frontend/src/app/main/ui/inspect/attributes/stroke.scss
index fe0f59df43..47e9d3bd9f 100644
--- a/frontend/src/app/main/ui/inspect/attributes/stroke.scss
+++ b/frontend/src/app/main/ui/inspect/attributes/stroke.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .attributes-block {
   @include flexColumn;
diff --git a/frontend/src/app/main/ui/inspect/attributes/svg.scss b/frontend/src/app/main/ui/inspect/attributes/svg.scss
index 1ad6d6a8fc..b5326f628e 100644
--- a/frontend/src/app/main/ui/inspect/attributes/svg.scss
+++ b/frontend/src/app/main/ui/inspect/attributes/svg.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .attributes-block {
   @include flexColumn;
diff --git a/frontend/src/app/main/ui/inspect/attributes/text.scss b/frontend/src/app/main/ui/inspect/attributes/text.scss
index 5c5a74a534..b6ed44c00e 100644
--- a/frontend/src/app/main/ui/inspect/attributes/text.scss
+++ b/frontend/src/app/main/ui/inspect/attributes/text.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .attributes-block {
   @include flexColumn;
diff --git a/frontend/src/app/main/ui/inspect/attributes/variant.scss b/frontend/src/app/main/ui/inspect/attributes/variant.scss
index ef8af2983d..1c8b3cfca5 100644
--- a/frontend/src/app/main/ui/inspect/attributes/variant.scss
+++ b/frontend/src/app/main/ui/inspect/attributes/variant.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .attributes-block {
   @include flexColumn;
diff --git a/frontend/src/app/main/ui/inspect/attributes/visibility.scss b/frontend/src/app/main/ui/inspect/attributes/visibility.scss
index df8d00a876..086b53bf2e 100644
--- a/frontend/src/app/main/ui/inspect/attributes/visibility.scss
+++ b/frontend/src/app/main/ui/inspect/attributes/visibility.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .attributes-block {
   @include flexColumn;
diff --git a/frontend/src/app/main/ui/inspect/code.scss b/frontend/src/app/main/ui/inspect/code.scss
index 341f269991..7ef5c4ac22 100644
--- a/frontend/src/app/main/ui/inspect/code.scss
+++ b/frontend/src/app/main/ui/inspect/code.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .element-options {
   display: flex;
diff --git a/frontend/src/app/main/ui/inspect/exports.scss b/frontend/src/app/main/ui/inspect/exports.scss
index 1b3b7aa4f6..9c767cc7d6 100644
--- a/frontend/src/app/main/ui/inspect/exports.scss
+++ b/frontend/src/app/main/ui/inspect/exports.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .element-set {
   padding-bottom: $s-16;
diff --git a/frontend/src/app/main/ui/inspect/right_sidebar.scss b/frontend/src/app/main/ui/inspect/right_sidebar.scss
index 5b88d57ba7..705b663d2c 100644
--- a/frontend/src/app/main/ui/inspect/right_sidebar.scss
+++ b/frontend/src/app/main/ui/inspect/right_sidebar.scss
@@ -5,7 +5,7 @@
 // Copyright (c) KALEIDOS INC
 
 @use "../ds/typography.scss" as *;
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .settings-bar-right {
   min-width: $s-252;
diff --git a/frontend/src/app/main/ui/modal.scss b/frontend/src/app/main/ui/modal.scss
index 6dd5b4eda0..abfb094530 100644
--- a/frontend/src/app/main/ui/modal.scss
+++ b/frontend/src/app/main/ui/modal.scss
@@ -1,4 +1,10 @@
-@import "refactor/common-refactor.scss";
+// 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 "refactor/common-refactor.scss" as *;
 
 :global(:root) {
   --s-4: 0.25rem;
diff --git a/frontend/src/app/main/ui/notifications/badge.scss b/frontend/src/app/main/ui/notifications/badge.scss
index b98a5ee88b..cc15455b1e 100644
--- a/frontend/src/app/main/ui/notifications/badge.scss
+++ b/frontend/src/app/main/ui/notifications/badge.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .badge-notification {
   @include smallTitleTipography;
diff --git a/frontend/src/app/main/ui/notifications/context_notification.scss b/frontend/src/app/main/ui/notifications/context_notification.scss
index 69374ac8c7..2b9f1820e6 100644
--- a/frontend/src/app/main/ui/notifications/context_notification.scss
+++ b/frontend/src/app/main/ui/notifications/context_notification.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .context-notification {
   --context-notification-bg-color: var(--alert-background-color-default);
diff --git a/frontend/src/app/main/ui/notifications/inline_notification.scss b/frontend/src/app/main/ui/notifications/inline_notification.scss
index 61381be5bf..3d1e717ed5 100644
--- a/frontend/src/app/main/ui/notifications/inline_notification.scss
+++ b/frontend/src/app/main/ui/notifications/inline_notification.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .new-inline {
   position: absolute;
diff --git a/frontend/src/app/main/ui/onboarding/newsletter.scss b/frontend/src/app/main/ui/onboarding/newsletter.scss
index 20b4230df3..191b2d80fd 100644
--- a/frontend/src/app/main/ui/onboarding/newsletter.scss
+++ b/frontend/src/app/main/ui/onboarding/newsletter.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .modal-overlay {
   @extend .modal-overlay-base;
diff --git a/frontend/src/app/main/ui/onboarding/questions.scss b/frontend/src/app/main/ui/onboarding/questions.scss
index fb4c97f497..d387cc6af0 100644
--- a/frontend/src/app/main/ui/onboarding/questions.scss
+++ b/frontend/src/app/main/ui/onboarding/questions.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .modal-overlay {
   @extend .modal-overlay-base;
diff --git a/frontend/src/app/main/ui/onboarding/team_choice.scss b/frontend/src/app/main/ui/onboarding/team_choice.scss
index 95d275e86c..5bc976e1ba 100644
--- a/frontend/src/app/main/ui/onboarding/team_choice.scss
+++ b/frontend/src/app/main/ui/onboarding/team_choice.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .modal-overlay {
   @extend .modal-overlay-base;
diff --git a/frontend/src/app/main/ui/releases/common.scss b/frontend/src/app/main/ui/releases/common.scss
index d2f7a7f117..f0a4c2e916 100644
--- a/frontend/src/app/main/ui/releases/common.scss
+++ b/frontend/src/app/main/ui/releases/common.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .step-dots {
   display: grid;
diff --git a/frontend/src/app/main/ui/releases/v2_0.scss b/frontend/src/app/main/ui/releases/v2_0.scss
index 0108877b0e..2cbb1a4dab 100644
--- a/frontend/src/app/main/ui/releases/v2_0.scss
+++ b/frontend/src/app/main/ui/releases/v2_0.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .modal-overlay {
   @extend .modal-overlay-base;
diff --git a/frontend/src/app/main/ui/releases/v2_1.scss b/frontend/src/app/main/ui/releases/v2_1.scss
index e305c5d52f..c3b518bf0d 100644
--- a/frontend/src/app/main/ui/releases/v2_1.scss
+++ b/frontend/src/app/main/ui/releases/v2_1.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .modal-overlay {
   @extend .modal-overlay-base;
diff --git a/frontend/src/app/main/ui/releases/v2_10.scss b/frontend/src/app/main/ui/releases/v2_10.scss
index dd1b81c82b..64eeb886bc 100644
--- a/frontend/src/app/main/ui/releases/v2_10.scss
+++ b/frontend/src/app/main/ui/releases/v2_10.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .modal-overlay {
   @extend .modal-overlay-base;
diff --git a/frontend/src/app/main/ui/releases/v2_2.scss b/frontend/src/app/main/ui/releases/v2_2.scss
index dd6adbd8a0..651e112642 100644
--- a/frontend/src/app/main/ui/releases/v2_2.scss
+++ b/frontend/src/app/main/ui/releases/v2_2.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .modal-overlay {
   @extend .modal-overlay-base;
diff --git a/frontend/src/app/main/ui/releases/v2_3.scss b/frontend/src/app/main/ui/releases/v2_3.scss
index dd1b81c82b..64eeb886bc 100644
--- a/frontend/src/app/main/ui/releases/v2_3.scss
+++ b/frontend/src/app/main/ui/releases/v2_3.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .modal-overlay {
   @extend .modal-overlay-base;
diff --git a/frontend/src/app/main/ui/releases/v2_4.scss b/frontend/src/app/main/ui/releases/v2_4.scss
index dd1b81c82b..64eeb886bc 100644
--- a/frontend/src/app/main/ui/releases/v2_4.scss
+++ b/frontend/src/app/main/ui/releases/v2_4.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .modal-overlay {
   @extend .modal-overlay-base;
diff --git a/frontend/src/app/main/ui/releases/v2_5.scss b/frontend/src/app/main/ui/releases/v2_5.scss
index dd1b81c82b..64eeb886bc 100644
--- a/frontend/src/app/main/ui/releases/v2_5.scss
+++ b/frontend/src/app/main/ui/releases/v2_5.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .modal-overlay {
   @extend .modal-overlay-base;
diff --git a/frontend/src/app/main/ui/releases/v2_6.scss b/frontend/src/app/main/ui/releases/v2_6.scss
index dd1b81c82b..64eeb886bc 100644
--- a/frontend/src/app/main/ui/releases/v2_6.scss
+++ b/frontend/src/app/main/ui/releases/v2_6.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .modal-overlay {
   @extend .modal-overlay-base;
diff --git a/frontend/src/app/main/ui/releases/v2_7.scss b/frontend/src/app/main/ui/releases/v2_7.scss
index dd1b81c82b..64eeb886bc 100644
--- a/frontend/src/app/main/ui/releases/v2_7.scss
+++ b/frontend/src/app/main/ui/releases/v2_7.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .modal-overlay {
   @extend .modal-overlay-base;
diff --git a/frontend/src/app/main/ui/releases/v2_8.scss b/frontend/src/app/main/ui/releases/v2_8.scss
index dd1b81c82b..64eeb886bc 100644
--- a/frontend/src/app/main/ui/releases/v2_8.scss
+++ b/frontend/src/app/main/ui/releases/v2_8.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .modal-overlay {
   @extend .modal-overlay-base;
diff --git a/frontend/src/app/main/ui/releases/v2_9.scss b/frontend/src/app/main/ui/releases/v2_9.scss
index dd1b81c82b..64eeb886bc 100644
--- a/frontend/src/app/main/ui/releases/v2_9.scss
+++ b/frontend/src/app/main/ui/releases/v2_9.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .modal-overlay {
   @extend .modal-overlay-base;
diff --git a/frontend/src/app/main/ui/settings/change_email.scss b/frontend/src/app/main/ui/settings/change_email.scss
index fef165d493..565d1f1bea 100644
--- a/frontend/src/app/main/ui/settings/change_email.scss
+++ b/frontend/src/app/main/ui/settings/change_email.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .modal-overlay {
   @extend .modal-overlay-base;
diff --git a/frontend/src/app/main/ui/settings/delete_account.scss b/frontend/src/app/main/ui/settings/delete_account.scss
index fd8e01b55e..bcd9a88f07 100644
--- a/frontend/src/app/main/ui/settings/delete_account.scss
+++ b/frontend/src/app/main/ui/settings/delete_account.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .modal-overlay {
   @extend .modal-overlay-base;
diff --git a/frontend/src/app/main/ui/viewer/login.scss b/frontend/src/app/main/ui/viewer/login.scss
index 614bfa701d..dd0faf2118 100644
--- a/frontend/src/app/main/ui/viewer/login.scss
+++ b/frontend/src/app/main/ui/viewer/login.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .modal-overlay {
   @extend .modal-overlay-base;
diff --git a/frontend/src/app/main/ui/viewer/share_link.scss b/frontend/src/app/main/ui/viewer/share_link.scss
index a883d1355e..c8d690dc37 100644
--- a/frontend/src/app/main/ui/viewer/share_link.scss
+++ b/frontend/src/app/main/ui/viewer/share_link.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .share-modal {
   display: block;
diff --git a/frontend/src/app/main/ui/workspace.scss b/frontend/src/app/main/ui/workspace.scss
index a1c7cec47b..93edc8d843 100644
--- a/frontend/src/app/main/ui/workspace.scss
+++ b/frontend/src/app/main/ui/workspace.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .workspace {
   @extend .new-scrollbar;
diff --git a/frontend/src/app/main/ui/workspace/color_palette.scss b/frontend/src/app/main/ui/workspace/color_palette.scss
index 39cd4d0fe2..34f6ffea6f 100644
--- a/frontend/src/app/main/ui/workspace/color_palette.scss
+++ b/frontend/src/app/main/ui/workspace/color_palette.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .color-palette {
   height: 100%;
diff --git a/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.scss b/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.scss
index 920d6031ba..d6a23e7bb0 100644
--- a/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.scss
+++ b/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .palette-menu {
   position: absolute;
diff --git a/frontend/src/app/main/ui/workspace/colorpicker.scss b/frontend/src/app/main/ui/workspace/colorpicker.scss
index e78c4a28c8..2f68ef9db3 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker.scss
+++ b/frontend/src/app/main/ui/workspace/colorpicker.scss
@@ -8,11 +8,12 @@
 @use "../ds/spacing.scss";
 @use "../ds/_borders.scss" as *;
 @use "../ds/_sizes.scss" as *;
-@import "refactor/common-refactor.scss";
+@use "../ds/utils" as *;
+@use "refactor/basic-rules.scss" as *;
 
 .colorpicker-tooltip {
   @extend .modal-background;
-  left: calc(10 * $s-140);
+  left: calc(10 * px2rem(140));
   width: auto;
   padding: var(--sp-m);
   width: $sz-284;
@@ -31,7 +32,7 @@
   align-items: flex-start;
   flex-direction: row-reverse;
   justify-content: space-between;
-  height: $s-40;
+  height: $sz-40;
 }
 
 .top-actions-right {
@@ -41,13 +42,18 @@
 
 .opacity-input-wrapper {
   @extend .input-element;
-  @include bodySmallTypography;
-  width: $s-68;
+  @include t.use-typography("body-small");
+  width: px2rem(68);
 }
 
+// TODO: change to DS button component
 .picker-btn {
-  @include buttonStyle;
-  @include flexCenter;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  background: none;
+  cursor: pointer;
   border-radius: $br-8;
   background-color: transparent;
   border: $b-1 solid transparent;
@@ -125,7 +131,7 @@
 }
 
 .accept-color {
-  @include uppercaseTitleTipography;
+  @include t.use-typography("headline-small");
   @extend .button-primary;
   width: 100%;
   height: var(--sp-xxxl);
@@ -133,7 +139,9 @@
 }
 
 .picker-detail-wrapper {
-  @include flexCenter;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   position: relative;
   margin: var(--sp-m) 0 var(--sp-s) 0;
 }
@@ -155,7 +163,7 @@
 }
 
 .select {
-  width: $s-116;
+  width: px2rem(116);
 }
 
 .select-image {
@@ -168,8 +176,8 @@
   justify-content: center;
   background-image: url("/images/colorpicker-no-image.png");
   background-position: center;
-  background-size: auto $s-140;
-  height: $s-140;
+  background-size: auto px2rem(140);
+  height: px2rem(140);
   margin-bottom: $sz-6;
   margin-right: $sz-1;
   img {
@@ -183,7 +191,7 @@
 
 .choose-image {
   @extend .button-secondary;
-  @include uppercaseTitleTipography;
+  @include t.use-typography("headline-small");
   width: 100%;
   margin-top: var(--sp-m);
   height: var(--sp-xxxl);
diff --git a/frontend/src/app/main/ui/workspace/colorpicker/color_inputs.scss b/frontend/src/app/main/ui/workspace/colorpicker/color_inputs.scss
index b6d52d6490..22c71fa42d 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker/color_inputs.scss
+++ b/frontend/src/app/main/ui/workspace/colorpicker/color_inputs.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .color-values {
   @include flexColumn;
diff --git a/frontend/src/app/main/ui/workspace/colorpicker/gradients.scss b/frontend/src/app/main/ui/workspace/colorpicker/gradients.scss
index 8bd5b81c45..5a43b9c8ac 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker/gradients.scss
+++ b/frontend/src/app/main/ui/workspace/colorpicker/gradients.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .gradient-panel {
   margin-top: $s-12;
diff --git a/frontend/src/app/main/ui/workspace/colorpicker/harmony.scss b/frontend/src/app/main/ui/workspace/colorpicker/harmony.scss
index 04bc1d46ac..bef7c05aa6 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker/harmony.scss
+++ b/frontend/src/app/main/ui/workspace/colorpicker/harmony.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .harmony-selector {
   display: flex;
diff --git a/frontend/src/app/main/ui/workspace/colorpicker/hsva.scss b/frontend/src/app/main/ui/workspace/colorpicker/hsva.scss
index 4b02ceec61..66cac137b4 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker/hsva.scss
+++ b/frontend/src/app/main/ui/workspace/colorpicker/hsva.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .hsva-selector {
   @include flexColumn;
diff --git a/frontend/src/app/main/ui/workspace/colorpicker/libraries.scss b/frontend/src/app/main/ui/workspace/colorpicker/libraries.scss
index 8b401448db..a2bd7c70b2 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker/libraries.scss
+++ b/frontend/src/app/main/ui/workspace/colorpicker/libraries.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .libraries {
   margin-top: $s-8;
diff --git a/frontend/src/app/main/ui/workspace/colorpicker/ramp.scss b/frontend/src/app/main/ui/workspace/colorpicker/ramp.scss
index 60c94207b9..3366868bbb 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker/ramp.scss
+++ b/frontend/src/app/main/ui/workspace/colorpicker/ramp.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .value-saturation-selector {
   background-color: rgba(var(--hue-rgb));
diff --git a/frontend/src/app/main/ui/workspace/colorpicker/slider_selector.scss b/frontend/src/app/main/ui/workspace/colorpicker/slider_selector.scss
index e2eee80300..aeb341c6f8 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker/slider_selector.scss
+++ b/frontend/src/app/main/ui/workspace/colorpicker/slider_selector.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .slider-selector {
   --gradient-direction: 90deg;
diff --git a/frontend/src/app/main/ui/workspace/comments.scss b/frontend/src/app/main/ui/workspace/comments.scss
index af3fa9d43c..5de7690e8d 100644
--- a/frontend/src/app/main/ui/workspace/comments.scss
+++ b/frontend/src/app/main/ui/workspace/comments.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .comments-section {
   position: relative;
diff --git a/frontend/src/app/main/ui/workspace/context_menu.scss b/frontend/src/app/main/ui/workspace/context_menu.scss
index 66e58c8908..1e870a3ced 100644
--- a/frontend/src/app/main/ui/workspace/context_menu.scss
+++ b/frontend/src/app/main/ui/workspace/context_menu.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .workspace-context-menu {
   position: absolute;
diff --git a/frontend/src/app/main/ui/workspace/left_header.scss b/frontend/src/app/main/ui/workspace/left_header.scss
index c858941ab3..1c4af6260d 100644
--- a/frontend/src/app/main/ui/workspace/left_header.scss
+++ b/frontend/src/app/main/ui/workspace/left_header.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .workspace-header-left {
   display: flex;
diff --git a/frontend/src/app/main/ui/workspace/libraries.scss b/frontend/src/app/main/ui/workspace/libraries.scss
index 979b2b107d..586f63dd41 100644
--- a/frontend/src/app/main/ui/workspace/libraries.scss
+++ b/frontend/src/app/main/ui/workspace/libraries.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 // Library modal
 .modal-overlay {
diff --git a/frontend/src/app/main/ui/workspace/main_menu.scss b/frontend/src/app/main/ui/workspace/main_menu.scss
index c90fb8672d..5290d250b6 100644
--- a/frontend/src/app/main/ui/workspace/main_menu.scss
+++ b/frontend/src/app/main/ui/workspace/main_menu.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .menu {
   @extend .menu-dropdown;
diff --git a/frontend/src/app/main/ui/workspace/nudge.scss b/frontend/src/app/main/ui/workspace/nudge.scss
index 6331cec646..706b83e681 100644
--- a/frontend/src/app/main/ui/workspace/nudge.scss
+++ b/frontend/src/app/main/ui/workspace/nudge.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .modal-overlay {
   @extend .modal-overlay-base;
diff --git a/frontend/src/app/main/ui/workspace/palette.scss b/frontend/src/app/main/ui/workspace/palette.scss
index c4896a1c19..bd55f2754f 100644
--- a/frontend/src/app/main/ui/workspace/palette.scss
+++ b/frontend/src/app/main/ui/workspace/palette.scss
@@ -8,7 +8,7 @@
 @use "../ds/z-index.scss" as *;
 @use "../ds/_sizes.scss" as *;
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .palette-wrapper {
   position: absolute;
diff --git a/frontend/src/app/main/ui/workspace/plugins.scss b/frontend/src/app/main/ui/workspace/plugins.scss
index 82d0bb6cd1..5d1e9fac33 100644
--- a/frontend/src/app/main/ui/workspace/plugins.scss
+++ b/frontend/src/app/main/ui/workspace/plugins.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .modal-overlay {
   @extend .modal-overlay-base;
diff --git a/frontend/src/app/main/ui/workspace/presence.scss b/frontend/src/app/main/ui/workspace/presence.scss
index 22c76e3b02..15e9b68d2e 100644
--- a/frontend/src/app/main/ui/workspace/presence.scss
+++ b/frontend/src/app/main/ui/workspace/presence.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .active-users,
 .active-users-opened {
diff --git a/frontend/src/app/main/ui/workspace/right_header.scss b/frontend/src/app/main/ui/workspace/right_header.scss
index 6f1969d9b3..54848233c0 100644
--- a/frontend/src/app/main/ui/workspace/right_header.scss
+++ b/frontend/src/app/main/ui/workspace/right_header.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .workspace-header-right {
   display: flex;
diff --git a/frontend/src/app/main/ui/workspace/sidebar.scss b/frontend/src/app/main/ui/workspace/sidebar.scss
index aeca991142..0b799eb72a 100644
--- a/frontend/src/app/main/ui/workspace/sidebar.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar.scss
@@ -5,7 +5,7 @@
 // Copyright (c) KALEIDOS INC
 
 @use "../ds/_sizes.scss" as *;
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 $width-settings-bar: $sz-318;
 $width-settings-bar-max: $sz-500;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets.scss b/frontend/src/app/main/ui/workspace/sidebar/assets.scss
index 9223b299c9..011211c97a 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .assets-bar {
   display: grid;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss
index 911df2b633..e2a14dd99b 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 // TODO: we should be using subgrid in the common "assets component" to avoid
 // using this SCSS variable here (we cannot use a CSS var in this CSS module because
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/common.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/common.scss
index 0e21e53702..f10d9ca595 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/common.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets/common.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .title-name {
   @include uppercaseTitleTipography;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss
index 26db8efa7e..6f8d2a9901 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .drop-space {
   height: $s-12;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.scss
index 8e9fbd5232..a655508846 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.scss
@@ -5,7 +5,7 @@
 // Copyright (c) KALEIDOS INC
 
 @use "../../../ds/typography.scss" as t;
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 .tool-window {
   padding: 0 0 $s-24 $s-12;
   display: grid;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/groups.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/groups.scss
index 7b1b9ff740..9e33ea5736 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/groups.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets/groups.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .group-title-wrapper {
   width: 100%;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.scss
index 8393c1bb41..9ffe1e6329 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .assets-list {
   padding: 0 0 0 $s-4;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/collapsable_button.scss b/frontend/src/app/main/ui/workspace/sidebar/collapsable_button.scss
index 3f62cd24b0..8b82a663f7 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/collapsable_button.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/collapsable_button.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .collapsed-sidebar {
   @include flexCenter;
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 7d3c273520..1b34370e2c 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
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .shape-info {
   display: flex;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/history.scss b/frontend/src/app/main/ui/workspace/sidebar/history.scss
index e6d775a353..06888e7fa2 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/history.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/history.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .history-toolbox {
   display: flex;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/layer_item.scss b/frontend/src/app/main/ui/workspace/sidebar/layer_item.scss
index 70de9d49ce..1981c729c0 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/layer_item.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/layer_item.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .layer-row {
   --layer-indentation-size: calc(#{$s-4} * 6);
diff --git a/frontend/src/app/main/ui/workspace/sidebar/layer_name.scss b/frontend/src/app/main/ui/workspace/sidebar/layer_name.scss
index ae32b320a2..c55c181ae3 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/layer_name.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/layer_name.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .element-name {
   --element-name-color: var(--context-hover-color, var(--layer-row-foreground-color));
diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers.scss b/frontend/src/app/main/ui/workspace/sidebar/layers.scss
index a2595ab740..02574cd672 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/layers.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/layers.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .tool-window-bar {
   display: flex;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options.scss b/frontend/src/app/main/ui/workspace/sidebar/options.scss
index 4aad10f018..426f6c5cdb 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options.scss
@@ -5,7 +5,7 @@
 // Copyright (c) KALEIDOS INC
 
 @use "../../ds/_sizes.scss" as *;
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .tool-window {
   position: relative;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/common.scss b/frontend/src/app/main/ui/workspace/sidebar/options/common.scss
index ce1ffb4d6f..a1ef518b76 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/common.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/common.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .advanced-options-wrapper {
   @include flexColumn;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/drawing/frame.scss b/frontend/src/app/main/ui/workspace/sidebar/options/drawing/frame.scss
index 442f03036b..4dc8a6b362 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/drawing/frame.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/drawing/frame.scss
@@ -5,7 +5,7 @@
 // Copyright (c) KALEIDOS INC
 
 @use "../../../../ds/_sizes.scss" as *;
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .presets {
   display: grid;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/align.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/align.scss
index a2ec2aafd2..8e4b5462c3 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/align.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/align.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .align-options {
   display: grid;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.scss
index 962fb292ff..5ff2f2d4f5 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .element-set {
   margin: 0;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.scss
index 3aedcaa593..52487c51c6 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .boolean-options {
   display: grid;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/border_radius.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/border_radius.scss
index 0a93669b5e..10bf582061 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/border_radius.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/border_radius.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .radius {
   display: grid;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.scss
index 0ded56cb7a..0527ccb8dc 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .element-set {
   margin: 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 f0265b807a..bb5dbfea3e 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
@@ -5,7 +5,7 @@
 // Copyright (c) KALEIDOS INC
 
 @use "../../../../ds/typography.scss" as t;
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .element-set {
   margin: 0;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.scss
index 2384facf21..caf44de476 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .element-set {
   margin: 0;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.scss
index 264b658a58..5ba3dcefb1 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .element-set {
   margin: 0;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.scss
index 5646c32f19..6ab4b2d2bf 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .element-set {
   margin: 0;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss
index d2a0bf4caf..dd8c6e2314 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .element-set {
   margin: 0;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.scss
index 9220b1cf82..5f2089204a 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .grid-cell-menu-container {
   @include flexColumn;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss
index a443f17cfb..ae0d95ca39 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .interactions-content {
   display: flex;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.scss
index 33b93f308d..ee63cc8eef 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .element-set-content {
   display: grid;
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 7bcb540945..7adc6e49b7 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
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .element-set {
   margin: 0;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.scss
index eaa53011db..15ee004f93 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .element-set {
   margin: 0;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss
index 96aaf3aa61..f87c1fa204 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .element-set {
   display: grid;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.scss
index a96e67b8c4..c90abe9c44 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.scss
@@ -5,7 +5,7 @@
 // Copyright (c) KALEIDOS INC
 
 @use "../../../../ds/_sizes.scss" as *;
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .element-set {
   margin: 0;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.scss
index 9e5bd41e17..0aa6db27fc 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .element-set {
   margin: 0;
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 87ce7989e6..cb06d0e175 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
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .element-set {
   margin: 0;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.scss
index 873287c59b..c18cf91c80 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .element-set {
   margin: 0;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss
index 1be4468387..aa15b6ec8e 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 $width-settings-bar: $s-276;
 
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/variants_help_modal.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/variants_help_modal.scss
index cb5fc755ee..5986898826 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/variants_help_modal.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/variants_help_modal.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .modal-overlay {
   @extend .modal-overlay-base;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/page.scss b/frontend/src/app/main/ui/workspace/sidebar/options/page.scss
index da131647f1..e883fe94c5 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/page.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/page.scss
@@ -4,4 +4,4 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss
index ff2e897e55..4d2dbe2d38 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .color-data {
   @include flexRow;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.scss b/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.scss
index fc2579a70e..c080c6ec74 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .stroke-data {
   @include flexColumn;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.scss b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.scss
index 06669fb047..6f1dc89058 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .options {
   width: 100%;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.scss b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.scss
index 06669fb047..6f1dc89058 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .options {
   width: 100%;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/shortcuts.scss b/frontend/src/app/main/ui/workspace/sidebar/shortcuts.scss
index 1df0af953c..e87a3b420e 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/shortcuts.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/shortcuts.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .shortcuts {
   display: grid;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss b/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss
index 19ae17f79e..cdf23a57fd 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .sitemap {
   position: relative;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/versions.scss b/frontend/src/app/main/ui/workspace/sidebar/versions.scss
index 62865de402..4f6fb41f33 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/versions.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/versions.scss
@@ -5,7 +5,7 @@
 // Copyright (c) KALEIDOS INC
 
 @use "../../ds/typography.scss" as t;
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .version-toolbox {
   padding: $s-8;
diff --git a/frontend/src/app/main/ui/workspace/text_palette.scss b/frontend/src/app/main/ui/workspace/text_palette.scss
index fcbea076fa..b0ea337762 100644
--- a/frontend/src/app/main/ui/workspace/text_palette.scss
+++ b/frontend/src/app/main/ui/workspace/text_palette.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .text-palette {
   height: 100%;
diff --git a/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.scss b/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.scss
index 6647385623..bcef22b664 100644
--- a/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.scss
+++ b/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .text-context-menu {
   position: absolute;
diff --git a/frontend/src/app/main/ui/workspace/tokens/export.scss b/frontend/src/app/main/ui/workspace/tokens/export.scss
index 0f0e21f66d..ce1c64a32f 100644
--- a/frontend/src/app/main/ui/workspace/tokens/export.scss
+++ b/frontend/src/app/main/ui/workspace/tokens/export.scss
@@ -7,7 +7,7 @@
 @use "../../ds/typography.scss" as t;
 @use "../../ds/_sizes.scss" as *;
 @use "../../ds/_borders.scss" as *;
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .modal-overlay {
   @extend .modal-overlay-base;
diff --git a/frontend/src/app/main/ui/workspace/tokens/export/modal.scss b/frontend/src/app/main/ui/workspace/tokens/export/modal.scss
index 9242470261..7b50b1c350 100644
--- a/frontend/src/app/main/ui/workspace/tokens/export/modal.scss
+++ b/frontend/src/app/main/ui/workspace/tokens/export/modal.scss
@@ -7,7 +7,6 @@
 @use "../../../ds/typography.scss" as t;
 @use "../../../ds/_sizes.scss" as *;
 @use "../../../ds/_borders.scss" as *;
-@import "refactor/common-refactor.scss";
 
 .export-modal-wrapper {
   display: flex;
@@ -51,7 +50,7 @@
   width: 100%;
   cursor: default;
   color: var(--color-foreground-secondary);
-  border: $br-2 solid transparent;
+  border: $b-2 solid transparent;
 }
 
 .file-icon {
@@ -61,7 +60,11 @@
 }
 
 .file-name {
-  @include textEllipsis;
+  display: block;
+  max-width: 99%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   @include t.use-typography("body-medium");
   flex-grow: 1;
   overflow: hidden;
diff --git a/frontend/src/app/main/ui/workspace/tokens/import.scss b/frontend/src/app/main/ui/workspace/tokens/import.scss
index 75cfbe34ae..72320404d6 100644
--- a/frontend/src/app/main/ui/workspace/tokens/import.scss
+++ b/frontend/src/app/main/ui/workspace/tokens/import.scss
@@ -4,10 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@use "../../ds/typography.scss" as t;
-@use "../../ds/_borders.scss" as *;
-@use "../../ds/_sizes.scss" as *;
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .modal-overlay {
   @extend .modal-overlay-base;
diff --git a/frontend/src/app/main/ui/workspace/tokens/import/modal.scss b/frontend/src/app/main/ui/workspace/tokens/import/modal.scss
index e1864ba7aa..ecc537f285 100644
--- a/frontend/src/app/main/ui/workspace/tokens/import/modal.scss
+++ b/frontend/src/app/main/ui/workspace/tokens/import/modal.scss
@@ -7,7 +7,6 @@
 @use "../../../ds/typography.scss" as t;
 @use "../../../ds/_borders.scss" as *;
 @use "../../../ds/_sizes.scss" as *;
-@import "refactor/common-refactor.scss";
 
 .import-modal-wrapper {
   display: flex;
diff --git a/frontend/src/app/main/ui/workspace/tokens/management/context_menu.scss b/frontend/src/app/main/ui/workspace/tokens/management/context_menu.scss
index edffbae1c9..ddf7eebbf4 100644
--- a/frontend/src/app/main/ui/workspace/tokens/management/context_menu.scss
+++ b/frontend/src/app/main/ui/workspace/tokens/management/context_menu.scss
@@ -5,7 +5,7 @@
 // Copyright (c) KALEIDOS INC
 
 @use "../../../ds/typography.scss" as *;
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .token-context-menu {
   position: absolute;
diff --git a/frontend/src/app/main/ui/workspace/tokens/management/create/input_tokens_value.scss b/frontend/src/app/main/ui/workspace/tokens/management/create/input_tokens_value.scss
index 581c14b807..ebcf71ba44 100644
--- a/frontend/src/app/main/ui/workspace/tokens/management/create/input_tokens_value.scss
+++ b/frontend/src/app/main/ui/workspace/tokens/management/create/input_tokens_value.scss
@@ -5,10 +5,9 @@
 // Copyright (c) KALEIDOS INC
 
 @use "../../../../ds/typography.scss" as *;
-@use "../../../../ds/_borders.scss" as *;
 @use "../../../../ds/_sizes.scss" as *;
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .wrapper {
   --label-color: var(--color-foreground-primary);
diff --git a/frontend/src/app/main/ui/workspace/tokens/management/create/modals.scss b/frontend/src/app/main/ui/workspace/tokens/management/create/modals.scss
index 770a503a4a..e494321617 100644
--- a/frontend/src/app/main/ui/workspace/tokens/management/create/modals.scss
+++ b/frontend/src/app/main/ui/workspace/tokens/management/create/modals.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .token-modal-wrapper {
   @extend .modal-container-base;
diff --git a/frontend/src/app/main/ui/workspace/tokens/management/token_pill.scss b/frontend/src/app/main/ui/workspace/tokens/management/token_pill.scss
index f6e276ecf5..cab474f17d 100644
--- a/frontend/src/app/main/ui/workspace/tokens/management/token_pill.scss
+++ b/frontend/src/app/main/ui/workspace/tokens/management/token_pill.scss
@@ -6,7 +6,7 @@
 
 @use "../../../ds/typography.scss" as *;
 @use "../../../ds/borders.scss" as *;
-@import "refactor/common-refactor.scss";
+@use "../../../ds/sizes.scss" as *;
 
 .token-pill {
   @include use-typography("code-font");
@@ -16,7 +16,7 @@
   display: grid;
   grid-template-columns: auto 1fr;
   align-items: center;
-  gap: $s-6;
+  gap: $sz-6;
   border: $b-1 solid var(--token-pill-border);
   outline: $b-2 solid var(--token-pill-outline);
   height: var(--sp-xxl);
@@ -40,7 +40,7 @@
 }
 
 .divided-name-wrapper {
-  height: $s-16;
+  height: var(--sp-l);
   display: flex;
   align-items: center;
   white-space: nowrap;
diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.scss b/frontend/src/app/main/ui/workspace/tokens/sets.scss
index ca1e55d5b3..4deb1e7400 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sets.scss
+++ b/frontend/src/app/main/ui/workspace/tokens/sets.scss
@@ -5,7 +5,7 @@
 // Copyright (c) KALEIDOS INC
 
 @use "../../ds/typography.scss" as *;
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .sets-list {
   width: 100%;
diff --git a/frontend/src/app/main/ui/workspace/tokens/sets/context_menu.scss b/frontend/src/app/main/ui/workspace/tokens/sets/context_menu.scss
index 12438545c8..f6921dc696 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sets/context_menu.scss
+++ b/frontend/src/app/main/ui/workspace/tokens/sets/context_menu.scss
@@ -5,7 +5,7 @@
 // Copyright (c) KALEIDOS INC
 
 @use "../../../ds/typography.scss" as t;
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .token-set-context-menu {
   position: absolute;
diff --git a/frontend/src/app/main/ui/workspace/tokens/sets/lists.scss b/frontend/src/app/main/ui/workspace/tokens/sets/lists.scss
index f0ba86f54d..2c25e3dc0c 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sets/lists.scss
+++ b/frontend/src/app/main/ui/workspace/tokens/sets/lists.scss
@@ -5,7 +5,7 @@
 // Copyright (c) KALEIDOS INC
 
 @use "../../../ds/typography.scss" as *;
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .sets-list {
   width: 100%;
diff --git a/frontend/src/app/main/ui/workspace/tokens/settings/menu.scss b/frontend/src/app/main/ui/workspace/tokens/settings/menu.scss
index 40a297621c..85d78ccaef 100644
--- a/frontend/src/app/main/ui/workspace/tokens/settings/menu.scss
+++ b/frontend/src/app/main/ui/workspace/tokens/settings/menu.scss
@@ -6,7 +6,7 @@
 
 @use "../../../ds/spacing.scss" as *;
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .setting-modal-overlay {
   @extend .modal-overlay-base;
diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.scss b/frontend/src/app/main/ui/workspace/tokens/sidebar.scss
index bd6bacfe1f..02e0303766 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sidebar.scss
+++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.scss
@@ -6,7 +6,7 @@
 
 @use "../../ds/typography.scss" as *;
 @use "../../ds/spacing.scss" as *;
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .sidebar-wrapper {
   display: grid;
diff --git a/frontend/src/app/main/ui/workspace/tokens/themes/create_modal.scss b/frontend/src/app/main/ui/workspace/tokens/themes/create_modal.scss
index 240eba8c6d..e64d0ddf07 100644
--- a/frontend/src/app/main/ui/workspace/tokens/themes/create_modal.scss
+++ b/frontend/src/app/main/ui/workspace/tokens/themes/create_modal.scss
@@ -6,7 +6,7 @@
 
 @use "../../../ds/_sizes.scss" as *;
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .modal-overlay {
   @extend .modal-overlay-base;
diff --git a/frontend/src/app/main/ui/workspace/tokens/themes/theme_selector.scss b/frontend/src/app/main/ui/workspace/tokens/themes/theme_selector.scss
index 7819cfb620..e84620223c 100644
--- a/frontend/src/app/main/ui/workspace/tokens/themes/theme_selector.scss
+++ b/frontend/src/app/main/ui/workspace/tokens/themes/theme_selector.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .custom-select {
   --custom-select-border-color: var(--menu-background-color);
diff --git a/frontend/src/app/main/ui/workspace/top_toolbar.scss b/frontend/src/app/main/ui/workspace/top_toolbar.scss
index d9319525c3..33c0ab1d94 100644
--- a/frontend/src/app/main/ui/workspace/top_toolbar.scss
+++ b/frontend/src/app/main/ui/workspace/top_toolbar.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .main-toolbar {
   cursor: initial;
diff --git a/frontend/src/app/main/ui/workspace/viewport/comments.scss b/frontend/src/app/main/ui/workspace/viewport/comments.scss
index c1fc4cf573..4fbcfa7532 100644
--- a/frontend/src/app/main/ui/workspace/viewport/comments.scss
+++ b/frontend/src/app/main/ui/workspace/viewport/comments.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .workspace-comments-container {
   width: 100%;
diff --git a/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.scss b/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.scss
index 5201ff7dfd..c796931142 100644
--- a/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.scss
+++ b/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .grid-track-marker {
   .marker-shape {
diff --git a/frontend/src/app/main/ui/workspace/viewport/path_actions.scss b/frontend/src/app/main/ui/workspace/viewport/path_actions.scss
index c5e5ecc1b2..20fb1e7180 100644
--- a/frontend/src/app/main/ui/workspace/viewport/path_actions.scss
+++ b/frontend/src/app/main/ui/workspace/viewport/path_actions.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .sub-actions {
   cursor: initial;
diff --git a/frontend/src/app/main/ui/workspace/viewport/presence.scss b/frontend/src/app/main/ui/workspace/viewport/presence.scss
index 26e607a995..e280d6c21e 100644
--- a/frontend/src/app/main/ui/workspace/viewport/presence.scss
+++ b/frontend/src/app/main/ui/workspace/viewport/presence.scss
@@ -1,3 +1,9 @@
+// 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 "refactor/common-refactor.scss" as *;
 
 .profile-name {
diff --git a/frontend/src/app/main/ui/workspace/viewport/top_bar.scss b/frontend/src/app/main/ui/workspace/viewport/top_bar.scss
index 9109d8e8ba..00f8ee4319 100644
--- a/frontend/src/app/main/ui/workspace/viewport/top_bar.scss
+++ b/frontend/src/app/main/ui/workspace/viewport/top_bar.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .viewport-actions,
 .viewport-actions-path {
diff --git a/frontend/src/app/main/ui/workspace/viewport/widgets.scss b/frontend/src/app/main/ui/workspace/viewport/widgets.scss
index 6df8e7a7d4..eec7da4adc 100644
--- a/frontend/src/app/main/ui/workspace/viewport/widgets.scss
+++ b/frontend/src/app/main/ui/workspace/viewport/widgets.scss
@@ -4,15 +4,12 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "refactor/common-refactor.scss" as *;
 
 .flow-element {
   display: flex;
   align-items: center;
 
-  .element-label {
-  }
-
   .flow-name {
     cursor: pointer;
   }