♻️ Remove deprecated @import from scss files (#7347)

* 🐛 Fix import warnings 1 of 2

* 🐛 Fix import warnings 2 of 2

* 🐛 Fix visual tests and format files

* 🐛 Fix mixed declarations on scss

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 ({
-test("Renders a file with text in frames and different strokes, shadows, and blurs", async ({ page }) => {
+  page,
+}) => {
   const workspace = new WasmWorkspacePage(page);
   await workspace.setupEmptyFile();
   await workspace.mockGetFile(

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(
+  await expect(page.getByText("Version 0.0.0 notes")).toBeVisible();
-      page.getByText("Version 0.0.0 notes"),
-    ).toBeVisible();
   await dashboardPage.clickProfileMenuItem("Version");
-  await expect(
+  await expect(page.getByText("new in penpot?")).toBeVisible();
-      page.getByText("new in penpot?"),
-    ).toBeVisible();
-
 });

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

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" }),

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(
+      workspace.librariesModal.getByText("File library"),
-        "There are no Shared Libraries available",
-      ),
     ).toBeVisible();
     await expect(workspace.page).toHaveScreenshot();
   });

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

frontend/resources/styles/common/refactor/borders.scss

@@ -5,12 +5,12 @@
 // Copyright (c) KALEIDOS INC
 
 // Border radius
-$br-0: $s-0;
+$br-0: 0;
-$br-2: $s-2;
+$br-2: 2px;
-$br-4: $s-4;
+$br-4: 4px;
 $br-5: 0.313rem;
-$br-6: $s-6;
+$br-6: 6px;
-$br-8: $s-8;
+$br-8: 8px;
-$br-10: calc($s-8 + $s-2);
+$br-10: 10px;
-$br-12: $s-12;
+$br-12: 12px;
 $br-circle: 50%;

frontend/resources/styles/common/refactor/common-refactor.scss

@@ -8,13 +8,13 @@
 // MAIN STYLES
 //#################################################
 
-@import "common/refactor/fonts.scss";
+@forward "./fonts.scss";
-@import "common/refactor/spacing.scss";
+@forward "./spacing.scss";
-@import "common/refactor/borders.scss";
+@forward "./borders.scss";
-@import "common/refactor/opacity.scss";
+@forward "./opacity.scss";
-@import "common/refactor/shadows.scss";
+@forward "./shadows.scss";
-@import "common/refactor/z-index.scss";
+@forward "./z-index.scss";
-@import "common/refactor/mixins.scss";
+@forward "./mixins.scss";
-@import "common/refactor/focus.scss";
+@forward "./focus.scss";
-@import "common/refactor/animations.scss";
+@forward "./animations.scss";
-@import "common/refactor/basic-rules.scss";
+@forward "./basic-rules.scss";

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 {

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;

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

frontend/resources/styles/common/refactor/themes.scss

@@ -4,5 +4,5 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "./themes/default-theme.scss";
+@forward "./themes/default-theme.scss";
-@import "./themes/light-theme.scss";
+@forward "./themes/light-theme.scss";

frontend/resources/styles/main-default.scss

@@ -8,21 +8,21 @@
 // MAIN STYLES
 //#################################################
 
-@import "common/dependencies/reset";
+@forward "common/dependencies/reset";
-@import "common/refactor/color-defs.scss";
+@forward "common/refactor/color-defs.scss";
-@import "common/dependencies/fonts";
+@forward "common/dependencies/fonts";
-@import "common/dependencies/animations";
+@forward "common/dependencies/animations";
-@import "common/dependencies/highlight.scss";
+@forward "common/dependencies/highlight.scss";
-@import "common/dependencies/storybook.scss";
+@forward "common/dependencies/storybook.scss";
 
-@import "common/refactor/themes.scss";
+@forward "common/refactor/themes.scss";
-@import "common/refactor/design-tokens.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";

frontend/scripts/_worker.js

@@ -26,7 +26,6 @@ async function compileFile(path) {
           "resources/styles",
         ],
         sourceMap: false,
-        silenceDeprecations: ["import", "mixed-decls"],
       });
       // console.dir(result);
       resolve({

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;

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;

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;

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;
+  margin-top: var(--sp-s);
-  padding: $s-12;
+  padding: var(--sp-m);
   background-color: var(--menu-background-color);
   color: var(--input-foreground-color-active);
   overflow: auto;

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;

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;

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;

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;

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;

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 {

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;

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;

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

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;

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;

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;

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;

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

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;

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;

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;

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 {

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 {

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;

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
+  height: calc(100vh - px2rem(128)); // TODO: Fix this hardcoded value
-  padding-top: $s-8;
+  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
 }

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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%;

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;

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;
+  @include t.use-typography("body-small");
-  width: $s-68;
+  width: px2rem(68);
 }
 
+// TODO: change to DS button component
 .picker-btn {
-  @include buttonStyle;
+  display: flex;
-  @include flexCenter;
+  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;
+  background-size: auto px2rem(140);
-  height: $s-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);

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;

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;

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;

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;

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;

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

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;

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;

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;

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;

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 {

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;

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;

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;

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;

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 {

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;

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;

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;