From 49d5987b15918f6b36289c031ed6b1e7122c3d52 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= <belen.albeza@kaleidos.net>
Date: Thu, 25 Sep 2025 11:27:10 +0200
Subject: [PATCH] :lipstick: Add deprecated namespace and fix import for
 remaining scss files (#7379)

---
 frontend/src/app/main/ui/auth.scss            |  26 +-
 frontend/src/app/main/ui/auth/common.scss     |  52 ++--
 frontend/src/app/main/ui/auth/recovery.scss   |   4 +-
 .../app/main/ui/auth/recovery_request.scss    |  10 +-
 frontend/src/app/main/ui/auth/register.scss   |  40 +--
 .../src/app/main/ui/dashboard/comments.scss   |  58 ++--
 frontend/src/app/main/ui/dashboard/files.scss |  16 +-
 frontend/src/app/main/ui/dashboard/fonts.scss | 144 +++++-----
 .../app/main/ui/dashboard/inline_edition.scss |  26 +-
 .../src/app/main/ui/dashboard/libraries.scss  |   8 +-
 .../src/app/main/ui/dashboard/pin_button.scss |  14 +-
 .../app/main/ui/dashboard/placeholder.scss    |  52 ++--
 .../src/app/main/ui/dashboard/projects.scss   | 110 ++++----
 .../src/app/main/ui/dashboard/search.scss     |  22 +-
 .../app/main/ui/dashboard/subscription.scss   |  18 +-
 frontend/src/app/main/ui/dashboard/team.scss  | 260 +++++++++---------
 .../src/app/main/ui/dashboard/templates.scss  | 120 ++++----
 .../src/app/main/ui/debug/icons_preview.scss  |   6 +-
 .../src/app/main/ui/inspect/left_sidebar.scss |   8 +-
 frontend/src/app/main/ui/settings.scss        | 114 ++++----
 .../app/main/ui/settings/access_tokens.scss   |  98 +++----
 .../app/main/ui/settings/notifications.scss   |  12 +-
 .../src/app/main/ui/settings/password.scss    |   6 +-
 .../src/app/main/ui/settings/sidebar.scss     |  26 +-
 .../app/main/ui/settings/subscription.scss    |  34 +--
 frontend/src/app/main/ui/static.scss          | 102 +++----
 frontend/src/app/main/ui/viewer.scss          |  64 ++---
 frontend/src/app/main/ui/viewer/comments.scss |  42 +--
 frontend/src/app/main/ui/viewer/header.scss   | 136 ++++-----
 frontend/src/app/main/ui/viewer/inspect.scss  |  14 +-
 .../src/app/main/ui/viewer/interactions.scss  |  34 +--
 .../src/app/main/ui/viewer/thumbnails.scss    |  56 ++--
 .../app/main/ui/workspace/coordinates.scss    |  12 +-
 .../app/main/ui/workspace/sidebar/debug.scss  |  20 +-
 .../src/app/main/ui/workspace/viewport.scss   |   4 +-
 35 files changed, 884 insertions(+), 884 deletions(-)

diff --git a/frontend/src/app/main/ui/auth.scss b/frontend/src/app/main/ui/auth.scss
index 7a4d67c72d..762430314b 100644
--- a/frontend/src/app/main/ui/auth.scss
+++ b/frontend/src/app/main/ui/auth.scss
@@ -4,17 +4,17 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@use "common/refactor/common-refactor.scss" as *;
+@use "refactor/common-refactor.scss" as deprecated;
 
 .auth-section {
   position: relative;
   align-items: center;
   background: var(--panel-background-color);
   display: grid;
-  gap: $s-32;
+  gap: deprecated.$s-32;
   grid-template-columns: repeat(5, 1fr);
   height: 100%;
-  padding: $s-32;
+  padding: deprecated.$s-32;
   width: 100%;
   overflow: auto;
 
@@ -36,13 +36,13 @@
 
 .logo-container {
   position: absolute;
-  top: $s-20;
-  left: $s-20;
+  top: deprecated.$s-20;
+  left: deprecated.$s-20;
   display: flex;
   justify-content: flex-start;
-  width: $s-120;
-  height: $s-96;
-  margin-block-end: $s-52;
+  width: deprecated.$s-120;
+  height: deprecated.$s-96;
+  margin-block-end: deprecated.$s-52;
 }
 
 .login-illustration {
@@ -67,18 +67,18 @@
   grid-column: 4 / 6;
   display: grid;
   grid-template-rows: 1fr auto;
-  gap: $s-24;
+  gap: deprecated.$s-24;
   height: fit-content;
-  max-width: $s-412;
-  padding-block-end: $s-8;
+  max-width: deprecated.$s-412;
+  padding-block-end: deprecated.$s-8;
   position: relative;
   width: 100%;
 }
 
 .logo-btn {
   svg {
-    width: $s-120;
-    height: $s-40;
+    width: deprecated.$s-120;
+    height: deprecated.$s-40;
     fill: var(--main-icon-foreground);
   }
 }
diff --git a/frontend/src/app/main/ui/auth/common.scss b/frontend/src/app/main/ui/auth/common.scss
index 872ce47ddb..e8605871d8 100644
--- a/frontend/src/app/main/ui/auth/common.scss
+++ b/frontend/src/app/main/ui/auth/common.scss
@@ -4,18 +4,18 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@use "common/refactor/common-refactor.scss" as *;
+@use "refactor/common-refactor.scss" as deprecated;
 
 .auth-form-wrapper {
   width: 100%;
   padding-block-end: 0;
   display: grid;
-  gap: $s-12;
+  gap: deprecated.$s-12;
   form {
     display: flex;
     flex-direction: column;
-    gap: $s-12;
-    margin-top: $s-12;
+    gap: deprecated.$s-12;
+    margin-top: deprecated.$s-12;
   }
 }
 
@@ -23,7 +23,7 @@
   width: 100%;
   padding-block-end: 0;
   display: grid;
-  gap: $s-8;
+  gap: deprecated.$s-8;
 }
 
 .separator {
@@ -32,57 +32,57 @@
 }
 
 .auth-title {
-  @include bigTitleTipography;
+  @include deprecated.bigTitleTipography;
   color: var(--title-foreground-color-hover);
 }
 
 .auth-subtitle {
-  @include smallTitleTipography;
+  @include deprecated.smallTitleTipography;
   color: var(--title-foreground-color);
 }
 
 .auth-tagline {
-  @include smallTitleTipography;
+  @include deprecated.smallTitleTipography;
   margin: 0;
   color: var(--title-foreground-color);
 }
 
 .form-field {
   --input-width: 100%;
-  --input-height: #{$s-40};
+  --input-height: #{deprecated.$s-40};
   --input-min-width: 100%;
 }
 
 .buttons-stack {
   display: grid;
-  gap: $s-8;
+  gap: deprecated.$s-8;
 }
 
 .login-button,
 .login-ldap-button {
   @extend .button-primary;
-  @include uppercaseTitleTipography;
-  height: $s-40;
+  @include deprecated.uppercaseTitleTipography;
+  height: deprecated.$s-40;
   width: 100%;
 }
 
 .go-back {
   display: flex;
   flex-direction: column;
-  gap: $s-12;
+  gap: deprecated.$s-12;
   padding: 0;
   border-block-start: none;
 }
 
 .go-back-link {
   @extend .button-secondary;
-  @include uppercaseTitleTipography;
-  height: $s-40;
+  @include deprecated.uppercaseTitleTipography;
+  height: deprecated.$s-40;
 }
 
 .links {
   display: grid;
-  gap: $s-24;
+  gap: deprecated.$s-24;
 }
 
 .register,
@@ -91,7 +91,7 @@
 .demo-account {
   display: flex;
   justify-content: center;
-  gap: $s-8;
+  gap: deprecated.$s-8;
   padding: 0;
 }
 
@@ -99,7 +99,7 @@
 .account-text,
 .recovery-text,
 .demo-account-text {
-  @include smallTitleTipography;
+  @include deprecated.smallTitleTipography;
   text-align: right;
   color: var(--title-foreground-color);
 }
@@ -109,7 +109,7 @@
 .recovery-link,
 .forgot-pass-link,
 .demo-account-link {
-  @include smallTitleTipography;
+  @include deprecated.smallTitleTipography;
   text-align: left;
   background-color: transparent;
   border: none;
@@ -130,22 +130,22 @@
 .register-btn,
 .recover-btn {
   @extend .button-primary;
-  @include uppercaseTitleTipography;
-  height: $s-40;
+  @include deprecated.uppercaseTitleTipography;
+  height: deprecated.$s-40;
   width: 100%;
 }
 
 .login-btn {
-  @include smallTitleTipography;
+  @include deprecated.smallTitleTipography;
   display: flex;
   align-items: center;
-  gap: $s-6;
+  gap: deprecated.$s-6;
   width: 100%;
-  border-radius: $br-8;
+  border-radius: deprecated.$br-8;
   background-color: var(--button-secondary-background-color-rest);
   color: var(--button-foreground-color-focus);
   span {
-    padding-block-start: $s-2;
+    padding-block-start: deprecated.$s-2;
   }
 
   &:hover {
@@ -156,5 +156,5 @@
 
 .auth-buttons {
   display: flex;
-  gap: $s-8;
+  gap: deprecated.$s-8;
 }
diff --git a/frontend/src/app/main/ui/auth/recovery.scss b/frontend/src/app/main/ui/auth/recovery.scss
index 743034faad..a89055b061 100644
--- a/frontend/src/app/main/ui/auth/recovery.scss
+++ b/frontend/src/app/main/ui/auth/recovery.scss
@@ -4,9 +4,9 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@use "common/refactor/common-refactor.scss" as *;
+@use "refactor/common-refactor.scss" as deprecated;
 @use "./common.scss";
 
 .submit-btn {
-  margin-top: $s-16;
+  margin-top: deprecated.$s-16;
 }
diff --git a/frontend/src/app/main/ui/auth/recovery_request.scss b/frontend/src/app/main/ui/auth/recovery_request.scss
index 8b384e59dd..c774a575a3 100644
--- a/frontend/src/app/main/ui/auth/recovery_request.scss
+++ b/frontend/src/app/main/ui/auth/recovery_request.scss
@@ -4,16 +4,16 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@use "common/refactor/common-refactor.scss" as *;
+@use "refactor/common-refactor.scss" as deprecated;
 @use "./common.scss";
 
 .fields-row {
-  margin-bottom: $s-8;
+  margin-bottom: deprecated.$s-8;
 }
 
 .notification-text-email {
-  @include medTitleTipography;
-  font-size: $fs-20;
+  @include deprecated.medTitleTipography;
+  font-size: deprecated.$fs-20;
   color: var(--register-confirmation-color);
-  margin-inline: $s-36;
+  margin-inline: deprecated.$s-36;
 }
diff --git a/frontend/src/app/main/ui/auth/register.scss b/frontend/src/app/main/ui/auth/register.scss
index f4fd493a1b..182dfddbaa 100644
--- a/frontend/src/app/main/ui/auth/register.scss
+++ b/frontend/src/app/main/ui/auth/register.scss
@@ -4,13 +4,13 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@use "common/refactor/common-refactor.scss" as *;
+@use "refactor/common-refactor.scss" as deprecated;
 @use "./common.scss";
 
 .accept-terms-and-privacy-wrapper {
   :global(a) {
     color: var(--color-foreground-secondary);
-    font-weight: $fw700;
+    font-weight: deprecated.$fw700;
   }
 }
 
@@ -20,13 +20,13 @@
 }
 
 .register-form {
-  gap: $s-24;
+  gap: deprecated.$s-24;
 }
 
 .register-success {
-  gap: $s-24;
+  gap: deprecated.$s-24;
   .auth-title {
-    @include medTitleTipography;
+    @include deprecated.medTitleTipography;
   }
 }
 
@@ -34,30 +34,30 @@
   fill: var(--main-icon-foreground);
   display: flex;
   justify-content: center;
-  margin-bottom: $s-32;
+  margin-bottom: deprecated.$s-32;
   svg {
-    width: $s-92;
-    height: $s-92;
+    width: deprecated.$s-92;
+    height: deprecated.$s-92;
   }
 }
 
 .notification-text {
-  @include bodyMediumTypography;
+  @include deprecated.bodyMediumTypography;
   color: var(--title-foreground-color);
 }
 
 .notification-text-email {
-  @include medTitleTipography;
-  font-size: $fs-20;
+  @include deprecated.medTitleTipography;
+  font-size: deprecated.$fs-20;
   color: var(--register-confirmation-color);
-  margin-inline: $s-36;
+  margin-inline: deprecated.$s-36;
 }
 
 .logo-btn {
-  height: $s-40;
+  height: deprecated.$s-40;
   svg {
-    width: $s-120;
-    height: $s-40;
+    width: deprecated.$s-120;
+    height: deprecated.$s-40;
     fill: var(--main-icon-foreground);
   }
 }
@@ -65,20 +65,20 @@
 .logo-container {
   display: flex;
   justify-content: flex-start;
-  width: $s-120;
-  margin-block-end: $s-24;
+  width: deprecated.$s-120;
+  margin-block-end: deprecated.$s-24;
 }
 
 .terms-register {
-  @include bodySmallTypography;
+  @include deprecated.bodySmallTypography;
   display: flex;
-  gap: $s-4;
+  gap: deprecated.$s-4;
   justify-content: center;
   width: 100%;
 }
 
 .and-text {
-  border-bottom: $s-1 solid transparent;
+  border-bottom: deprecated.$s-1 solid transparent;
   color: var(--title-foreground-color);
 }
 
diff --git a/frontend/src/app/main/ui/dashboard/comments.scss b/frontend/src/app/main/ui/dashboard/comments.scss
index 4d56ef43dd..c81fd1ee71 100644
--- a/frontend/src/app/main/ui/dashboard/comments.scss
+++ b/frontend/src/app/main/ui/dashboard/comments.scss
@@ -4,32 +4,32 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@use "common/refactor/common-refactor.scss" as *;
+@use "refactor/common-refactor.scss" as deprecated;
 
 .dashboard-comments-section {
-  @include flexCenter;
+  @include deprecated.flexCenter;
   position: relative;
-  border-radius: $br-8;
+  border-radius: deprecated.$br-8;
 }
 
 .thread-groups {
-  height: calc(100% - $s-32);
-  max-height: $s-440;
+  height: calc(100% - deprecated.$s-32);
+  max-height: deprecated.$s-440;
   overflow: auto;
 }
 
 .thread-group {
   display: flex;
   flex-direction: column;
-  font-size: $fs-12;
+  font-size: deprecated.$fs-12;
 }
 
 .thread-groups-placeholder {
   align-items: center;
   display: flex;
   flex-direction: column;
-  font-size: $fs-12;
-  padding: $s-24;
+  font-size: deprecated.$fs-12;
+  padding: deprecated.$s-24;
   text-align: center;
   color: var(--color-foreground-secondary);
 }
@@ -37,22 +37,22 @@
 .comments-icon {
   @extend .button-icon;
   stroke: var(--icon-foreground);
-  height: $s-24;
-  width: $s-24;
-  margin-bottom: $s-24;
+  height: deprecated.$s-24;
+  width: deprecated.$s-24;
+  margin-bottom: deprecated.$s-24;
 }
 
 .comment-button {
   position: relative;
   .unread {
     position: absolute;
-    width: $s-8;
-    height: $s-8;
-    border: $s-2 solid var(--color-background-tertiary);
+    width: deprecated.$s-8;
+    height: deprecated.$s-8;
+    border: deprecated.$s-2 solid var(--color-background-tertiary);
     border-radius: 50%;
     background: red;
-    top: $s-6;
-    right: $s-6;
+    top: deprecated.$s-6;
+    right: deprecated.$s-6;
   }
 }
 
@@ -62,18 +62,18 @@
 }
 
 .dropdown {
-  @include menuShadow;
+  @include deprecated.menuShadow;
   background-color: var(--color-background-tertiary);
-  border-radius: $br-8;
-  border: $s-1 solid transparent;
-  bottom: $s-4;
+  border-radius: deprecated.$br-8;
+  border: deprecated.$s-1 solid transparent;
+  bottom: deprecated.$s-4;
   height: 40vh;
-  max-height: $s-480;
-  min-height: $s-200;
+  max-height: deprecated.$s-480;
+  min-height: deprecated.$s-200;
   position: absolute;
   overflow: hidden;
   width: 100%;
-  z-index: $z-index-4;
+  z-index: deprecated.$z-index-4;
 
   hr {
     margin: 0;
@@ -83,15 +83,15 @@
 
 .header {
   display: flex;
-  height: $s-40;
+  height: deprecated.$s-40;
   align-items: center;
-  padding: 0 $s-12;
-  gap: $s-4;
+  padding: 0 deprecated.$s-12;
+  gap: deprecated.$s-4;
 }
 
 .header-title {
   color: var(--color-foreground-secondary);
-  font-size: $fs-11;
+  font-size: deprecated.$fs-11;
   line-height: 1.28;
   flex-grow: 1;
   text-transform: uppercase;
@@ -102,7 +102,7 @@
     cursor: pointer;
   }
   &.mark-all-as-read-button {
-    border-radius: $s-8;
-    border: $s-1 solid;
+    border-radius: deprecated.$s-8;
+    border: deprecated.$s-1 solid;
   }
 }
diff --git a/frontend/src/app/main/ui/dashboard/files.scss b/frontend/src/app/main/ui/dashboard/files.scss
index 692eed37cd..79f3563168 100644
--- a/frontend/src/app/main/ui/dashboard/files.scss
+++ b/frontend/src/app/main/ui/dashboard/files.scss
@@ -4,31 +4,31 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@use "common/refactor/common-refactor.scss" as *;
+@use "refactor/common-refactor.scss" as deprecated;
 @use "common/refactor/common-dashboard";
 
 .dashboard-container {
   flex: 1 0 0;
-  margin-right: $s-16;
+  margin-right: deprecated.$s-16;
   overflow-y: auto;
   width: 100%;
-  border-top: $s-1 solid var(--color-background-quaternary);
+  border-top: deprecated.$s-1 solid var(--color-background-quaternary);
 
   &.dashboard-projects {
     user-select: none;
   }
   &.dashboard-shared {
-    width: calc(100vw - $s-320);
-    margin-right: $s-52;
+    width: calc(100vw - deprecated.$s-320);
+    margin-right: deprecated.$s-52;
   }
 
   &.search {
-    margin-top: $s-12;
+    margin-top: deprecated.$s-12;
   }
 }
 
 .new-file {
-  margin-inline-end: $s-8;
+  margin-inline-end: deprecated.$s-8;
 }
 
 .menu-icon {
@@ -37,5 +37,5 @@
 }
 
 .placeholder-placement {
-  margin: $s-16 $s-32;
+  margin: deprecated.$s-16 deprecated.$s-32;
 }
diff --git a/frontend/src/app/main/ui/dashboard/fonts.scss b/frontend/src/app/main/ui/dashboard/fonts.scss
index a49a10cbf7..021677146c 100644
--- a/frontend/src/app/main/ui/dashboard/fonts.scss
+++ b/frontend/src/app/main/ui/dashboard/fonts.scss
@@ -4,35 +4,35 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@use "common/refactor/common-refactor.scss" as *;
+@use "refactor/common-refactor.scss" as deprecated;
 @use "common/refactor/common-dashboard";
 
 .dashboard-fonts {
-  border-top: $s-1 solid var(--color-background-quaternary);
+  border-top: deprecated.$s-1 solid var(--color-background-quaternary);
   display: flex;
   flex-direction: column;
-  padding-left: $s-120;
+  padding-left: deprecated.$s-120;
   overflow-y: auto;
-  padding-bottom: $s-120;
+  padding-bottom: deprecated.$s-120;
 
   .btn-primary {
-    font-size: $fs-11;
-    height: $s-32;
-    min-width: $s-100;
+    font-size: deprecated.$fs-11;
+    height: deprecated.$s-32;
+    min-width: deprecated.$s-100;
   }
 }
 
 .dashboard-installed-fonts {
-  max-width: $s-1000;
+  max-width: deprecated.$s-1000;
   width: 100%;
   display: flex;
-  margin-top: $s-24;
+  margin-top: deprecated.$s-24;
   flex-direction: column;
 
   h3 {
-    font-size: $fs-14;
+    font-size: deprecated.$fs-14;
     color: var(--color-foreground-secondary);
-    margin: $s-4;
+    margin: deprecated.$s-4;
   }
 
   .font-item {
@@ -44,18 +44,18 @@
   align-items: center;
   color: var(--color-foreground-secondary);
   display: flex;
-  font-size: $fs-12;
-  height: $s-40;
-  padding-left: $s-24;
+  font-size: deprecated.$fs-12;
+  height: deprecated.$s-40;
+  padding-left: deprecated.$s-24;
   text-transform: uppercase;
 
   > .family {
-    min-width: $s-200;
-    width: $s-200;
+    min-width: deprecated.$s-200;
+    width: deprecated.$s-200;
   }
 
   > .variants {
-    padding-left: $s-12;
+    padding-left: deprecated.$s-12;
   }
 }
 
@@ -67,17 +67,17 @@
   input {
     background-color: var(--color-background-tertiary);
     border-color: transparent;
-    border-radius: $br-8;
-    border: $s-1 solid transparent;
+    border-radius: deprecated.$br-8;
+    border: deprecated.$s-1 solid transparent;
     color: var(--color-foreground-primary);
-    font-size: $fs-14;
-    height: $s-32;
+    font-size: deprecated.$fs-14;
+    height: deprecated.$s-32;
     margin: 0;
-    padding: 0 $s-8;
-    width: $s-152;
+    padding: 0 deprecated.$s-8;
+    width: deprecated.$s-152;
 
     &:focus {
-      outline: $s-1 solid var(--color-accent-primary);
+      outline: deprecated.$s-1 solid var(--color-accent-primary);
     }
     &::placeholder {
       color: var(--color-foreground-secondary);
@@ -88,65 +88,65 @@
 .font-item {
   align-items: center;
   background-color: var(--color-background-tertiary);
-  border-radius: $br-4;
+  border-radius: deprecated.$br-4;
   color: var(--color-foreground-secondary);
   display: flex;
-  font-size: $fs-14;
+  font-size: deprecated.$fs-14;
   justify-content: space-between;
-  margin-top: $s-4;
-  max-width: $s-1000;
-  padding: $s-12 $s-24;
+  margin-top: deprecated.$s-4;
+  max-width: deprecated.$s-1000;
+  padding: deprecated.$s-12 deprecated.$s-24;
   width: 100%;
 
   input {
-    border: $s-1 solid transparent;
+    border: deprecated.$s-1 solid transparent;
     margin: 0;
-    padding: $s-8;
+    padding: deprecated.$s-8;
 
     background-color: var(--color-background-tertiary);
-    border-radius: $br-8;
+    border-radius: deprecated.$br-8;
     color: var(--color-foreground-primary);
-    font-size: $fs-14;
+    font-size: deprecated.$fs-14;
 
     &:focus {
-      outline: $s-1 solid var(--color-accent-primary);
+      outline: deprecated.$s-1 solid var(--color-accent-primary);
     }
   }
 
   > .family {
-    min-width: $s-200;
-    width: $s-200;
+    min-width: deprecated.$s-200;
+    width: deprecated.$s-200;
   }
 
   > .filenames {
-    min-width: $s-200;
+    min-width: deprecated.$s-200;
   }
 
   > .variants {
-    font-size: $fs-14;
+    font-size: deprecated.$fs-14;
     display: flex;
     flex-wrap: wrap;
     flex-grow: 1;
-    padding-left: $s-16;
-    gap: $s-6;
+    padding-left: deprecated.$s-16;
+    gap: deprecated.$s-6;
 
     .variant {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      padding: $s-8 $s-12;
+      padding: deprecated.$s-8 deprecated.$s-12;
       cursor: pointer;
-      gap: $s-4;
+      gap: deprecated.$s-4;
       .icon {
         display: flex;
         align-items: center;
         justify-content: center;
-        height: $s-16;
-        width: $s-16;
+        height: deprecated.$s-16;
+        width: deprecated.$s-16;
         svg {
           fill: none;
-          width: $s-12;
-          height: $s-12;
+          width: deprecated.$s-12;
+          height: deprecated.$s-12;
           transform: rotate(45deg);
         }
       }
@@ -166,37 +166,37 @@
     color: var(--color-foreground-primary);
     .variant {
       background-color: var(--color-background-quaternary);
-      border-radius: $br-8;
+      border-radius: deprecated.$br-8;
     }
   }
 
   .filenames {
     display: flex;
     flex-direction: column;
-    font-size: $fs-12;
+    font-size: deprecated.$fs-12;
   }
 
   .options {
     display: flex;
     justify-content: flex-end;
-    min-width: $s-180;
+    min-width: deprecated.$s-180;
 
     .icon {
-      width: $s-24;
+      width: deprecated.$s-24;
       cursor: pointer;
       display: flex;
-      margin-left: $s-12;
+      margin-left: deprecated.$s-12;
       justify-content: center;
       align-items: center;
       svg {
-        width: $s-16;
-        height: $s-16;
+        width: deprecated.$s-16;
+        height: deprecated.$s-16;
         stroke: var(--color-foreground-secondary);
         fill: none;
       }
 
       &.failure {
-        margin-right: $s-12;
+        margin-right: deprecated.$s-12;
         svg {
           stroke: var(--element-foreground-warning);
         }
@@ -214,38 +214,38 @@
 }
 
 .dashboard-fonts-upload {
-  max-width: $s-1000;
+  max-width: deprecated.$s-1000;
   width: 100%;
   display: flex;
   flex-direction: column;
 
   .upload-button {
-    width: $s-100;
+    width: deprecated.$s-100;
   }
 
   .btn-secondary {
-    margin-left: $s-12;
+    margin-left: deprecated.$s-12;
   }
 }
 
 .dashboard-fonts-hero {
-  font-size: $fs-14;
-  padding: $s-32 0;
-  margin-top: $s-80;
+  font-size: deprecated.$fs-14;
+  padding: deprecated.$s-32 0;
+  margin-top: deprecated.$s-80;
   display: flex;
   justify-content: space-between;
 
   .btn-primary {
-    height: $s-40;
+    height: deprecated.$s-40;
     width: 100%;
   }
 
   .desc {
     display: flex;
     flex-direction: column;
-    gap: $s-24;
+    gap: deprecated.$s-24;
     color: var(--color-background-secondary);
-    width: $s-500;
+    width: deprecated.$s-500;
 
     h2 {
       color: var(--color-foreground-primary);
@@ -253,7 +253,7 @@
     }
     p {
       color: var(--color-foreground-secondary);
-      font-size: $fs-16;
+      font-size: deprecated.$fs-16;
     }
   }
 
@@ -264,25 +264,25 @@
 
 .fonts-placeholder {
   align-items: center;
-  border-radius: $br-8;
-  border: $s-1 solid var(--color-background-quaternary);
+  border-radius: deprecated.$br-8;
+  border: deprecated.$s-1 solid var(--color-background-quaternary);
   display: flex;
   flex-direction: column;
-  height: $s-160;
+  height: deprecated.$s-160;
   justify-content: center;
-  margin-top: $s-16;
-  max-width: $s-1000;
+  margin-top: deprecated.$s-16;
+  max-width: deprecated.$s-1000;
   width: 100%;
 
   .icon svg {
     stroke: var(--color-foreground-secondary);
     fill: none;
-    width: $s-32;
-    height: $s-32;
+    width: deprecated.$s-32;
+    height: deprecated.$s-32;
   }
 
   .label {
     color: var(--color-foreground-secondary);
-    font-size: $fs-14;
+    font-size: deprecated.$fs-14;
   }
 }
diff --git a/frontend/src/app/main/ui/dashboard/inline_edition.scss b/frontend/src/app/main/ui/dashboard/inline_edition.scss
index 4b4a17eb1c..4f62033011 100644
--- a/frontend/src/app/main/ui/dashboard/inline_edition.scss
+++ b/frontend/src/app/main/ui/dashboard/inline_edition.scss
@@ -4,29 +4,29 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@use "common/refactor/common-refactor.scss" as *;
+@use "refactor/common-refactor.scss" as deprecated;
 
 .edit-wrapper {
-  border-radius: $br-4;
+  border-radius: deprecated.$br-4;
   display: flex;
-  padding-right: $s-24;
+  padding-right: deprecated.$s-24;
   position: relative;
-  margin-right: $s-24;
+  margin-right: deprecated.$s-24;
 }
 
 input.element-title {
   background-color: var(--input-background-color-active);
-  border-radius: $br-8;
+  border-radius: deprecated.$br-8;
   color: var(--color-foreground-primary);
-  font-size: $fs-16;
-  height: $s-32;
+  font-size: deprecated.$fs-16;
+  height: deprecated.$s-32;
   margin: 0;
   border: none;
-  padding: $s-6;
+  padding: deprecated.$s-6;
   width: 100%;
 
   &:focus-visible {
-    border: $s-1 solid var(--color-accent-primary);
+    border: deprecated.$s-1 solid var(--color-accent-primary);
     outline: none;
   }
 }
@@ -35,14 +35,14 @@ input.element-title {
   cursor: pointer;
   position: absolute;
 
-  top: $s-1;
-  right: calc(-1 * $s-8);
+  top: deprecated.$s-1;
+  right: calc(-1 * deprecated.$s-8);
 
   svg {
     fill: var(--color-foreground-secondary);
-    height: $s-16;
+    height: deprecated.$s-16;
     transform: rotate(45deg) translateY(7px);
-    width: $s-16;
+    width: deprecated.$s-16;
     margin: 0;
   }
   &:hover {
diff --git a/frontend/src/app/main/ui/dashboard/libraries.scss b/frontend/src/app/main/ui/dashboard/libraries.scss
index 5a79d8e33f..07d20bf939 100644
--- a/frontend/src/app/main/ui/dashboard/libraries.scss
+++ b/frontend/src/app/main/ui/dashboard/libraries.scss
@@ -4,21 +4,21 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@use "common/refactor/common-refactor.scss" as *;
+@use "refactor/common-refactor.scss" as deprecated;
 @use "common/refactor/common-dashboard";
 
 .dashboard-container {
   flex: 1 0 0;
-  margin-right: $s-16;
+  margin-right: deprecated.$s-16;
   overflow-y: auto;
   width: 100%;
-  border-top: $s-1 solid var(--color-background-quaternary);
+  border-top: deprecated.$s-1 solid var(--color-background-quaternary);
 
   &.dashboard-projects {
     user-select: none;
   }
 
   &.search {
-    margin-top: $s-12;
+    margin-top: deprecated.$s-12;
   }
 }
diff --git a/frontend/src/app/main/ui/dashboard/pin_button.scss b/frontend/src/app/main/ui/dashboard/pin_button.scss
index 9b00a1307c..49093b223e 100644
--- a/frontend/src/app/main/ui/dashboard/pin_button.scss
+++ b/frontend/src/app/main/ui/dashboard/pin_button.scss
@@ -4,18 +4,18 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@use "common/refactor/common-refactor.scss" as *;
+@use "refactor/common-refactor.scss" as deprecated;
 
 .button {
   --pin-button-icon-color: var(--button-icon-foreground-color);
   --pin-button-bg-color: none;
   --pin-button-border-color: none;
 
-  width: $s-32;
-  height: $s-32;
+  width: deprecated.$s-32;
+  height: deprecated.$s-32;
   background: var(--pin-button-bg-color);
-  border: $s-2 solid var(--pin-button-border-color);
-  border-radius: $br-8;
+  border: deprecated.$s-2 solid var(--pin-button-border-color);
+  border-radius: deprecated.$br-8;
   display: grid;
   place-content: center;
   cursor: pointer;
@@ -28,8 +28,8 @@
 }
 
 .icon {
-  width: $s-16;
-  height: $s-16;
+  width: deprecated.$s-16;
+  height: deprecated.$s-16;
   fill: none;
   stroke: var(--pin-button-icon-color);
 }
diff --git a/frontend/src/app/main/ui/dashboard/placeholder.scss b/frontend/src/app/main/ui/dashboard/placeholder.scss
index 0226ba88ec..ca47399436 100644
--- a/frontend/src/app/main/ui/dashboard/placeholder.scss
+++ b/frontend/src/app/main/ui/dashboard/placeholder.scss
@@ -4,14 +4,14 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@use "common/refactor/common-refactor.scss" as *;
+@use "refactor/common-refactor.scss" as deprecated;
 @use "./grid.scss" as g;
 @use "ds/typography.scss" as t;
 
 .grid-empty-placeholder {
-  border-radius: $br-12;
+  border-radius: deprecated.$br-12;
   display: grid;
-  padding: $s-12 0;
+  padding: deprecated.$s-12 0;
 
   &.libs {
     background-image: url(/images/ph-left.svg), url(/images/ph-right.svg);
@@ -20,13 +20,13 @@
       85% top;
     background-repeat: no-repeat;
     align-items: center;
-    border: $s-1 solid var(--color-background-quaternary);
-    border-radius: $br-4;
+    border: deprecated.$s-1 solid var(--color-background-quaternary);
+    border-radius: deprecated.$br-4;
     display: flex;
     flex-direction: column;
-    height: $s-200;
-    margin: $s-16;
-    padding: $s-48;
+    height: deprecated.$s-200;
+    margin: deprecated.$s-16;
+    padding: deprecated.$s-48;
     justify-content: center;
 
     .text {
@@ -35,32 +35,32 @@
       }
 
       p {
-        max-width: $s-360;
+        max-width: deprecated.$s-360;
         text-align: center;
-        font-size: $fs-16;
+        font-size: deprecated.$fs-16;
       }
     }
   }
 
   .create-new {
     background-color: var(--color-background-tertiary);
-    border-radius: $br-8;
+    border-radius: deprecated.$br-8;
     color: var(--color-foreground-primary);
     cursor: pointer;
-    height: $s-160;
-    margin: $s-8;
-    border: $s-2 solid transparent;
+    height: deprecated.$s-160;
+    margin: deprecated.$s-8;
+    border: deprecated.$s-2 solid transparent;
     width: var(--th-width, #{g.$thumbnail-default-width});
     height: var(--th-height, #{g.$thumbnail-default-height});
 
     svg {
-      width: $s-32;
-      height: $s-32;
+      width: deprecated.$s-32;
+      height: deprecated.$s-32;
       stroke: var(--color-foreground-secondary);
     }
 
     &:hover {
-      border: $s-2 solid var(--color-accent-tertiary);
+      border: deprecated.$s-2 solid var(--color-accent-tertiary);
       background-color: var(--color-background-quaternary);
       color: var(--color-accent-primary);
 
@@ -71,9 +71,9 @@
   }
 
   .text {
-    margin-top: $s-12;
+    margin-top: deprecated.$s-12;
     color: var(--color-foreground-secondary);
-    font-size: $fs-16;
+    font-size: deprecated.$fs-16;
   }
 }
 
@@ -87,7 +87,7 @@
 
 .placeholder-text {
   color: var(--color-foreground-secondary);
-  font-size: $fs-16;
+  font-size: deprecated.$fs-16;
   text-align: center;
 }
 
@@ -100,15 +100,15 @@
 }
 
 .empty-placeholder-libraries {
-  margin: $s-16;
+  margin: deprecated.$s-16;
 }
 
 .empty-project-container {
   width: 100%;
   display: grid;
-  gap: $s-16;
+  gap: deprecated.$s-16;
   grid-template-columns: 1fr 1fr 1fr;
-  margin-top: $s-12;
+  margin-top: deprecated.$s-12;
 }
 
 .empty-project-card {
@@ -121,8 +121,8 @@
   justify-content: center;
   align-items: center;
   background-color: var(--color-card-background);
-  border: $s-2 solid var(--color-background-quaternary);
-  border-radius: $br-8;
+  border: deprecated.$s-2 solid var(--color-background-quaternary);
+  border-radius: deprecated.$br-8;
   padding: var(--sp-m) 0;
 
   &:hover {
@@ -132,7 +132,7 @@
     cursor: pointer;
 
     .empty-project-card-title {
-      font-weight: $fw500;
+      font-weight: deprecated.$fw500;
     }
   }
 
diff --git a/frontend/src/app/main/ui/dashboard/projects.scss b/frontend/src/app/main/ui/dashboard/projects.scss
index 252da62cd8..b72a793890 100644
--- a/frontend/src/app/main/ui/dashboard/projects.scss
+++ b/frontend/src/app/main/ui/dashboard/projects.scss
@@ -4,39 +4,39 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@use "common/refactor/common-refactor.scss" as *;
+@use "refactor/common-refactor.scss" as deprecated;
 @use "common/refactor/common-dashboard";
 
 .dashboard-container {
   flex: 1 0 0;
   width: 100%;
-  margin-right: $s-16;
-  border-top: $s-1 solid var(--panel-border-color);
+  margin-right: deprecated.$s-16;
+  border-top: deprecated.$s-1 solid var(--panel-border-color);
   overflow-y: auto;
-  padding-bottom: $s-32;
+  padding-bottom: deprecated.$s-32;
 }
 
 .dashboard-projects {
   user-select: none;
-  height: calc(100vh - $s-64);
+  height: calc(100vh - deprecated.$s-64);
 }
 
 .with-team-hero {
-  height: calc(100vh - $s-280);
+  height: calc(100vh - deprecated.$s-280);
 }
 
 .dashboard-shared {
-  width: calc(100vw - $s-320);
-  margin-right: $s-52;
+  width: calc(100vw - deprecated.$s-320);
+  margin-right: deprecated.$s-52;
 }
 
 .search {
-  margin-top: $s-12;
+  margin-top: deprecated.$s-12;
 }
 
 .dashboard-project-row {
   --actions-opacity: 0;
-  margin-bottom: $s-24;
+  margin-bottom: deprecated.$s-24;
   position: relative;
 
   &:hover,
@@ -60,12 +60,12 @@
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  gap: $s-8;
+  gap: deprecated.$s-8;
   width: 99%;
-  max-height: $s-40;
-  padding: $s-8 $s-8 $s-8 $s-16;
-  margin-top: $s-16;
-  border-radius: $br-4;
+  max-height: deprecated.$s-40;
+  padding: deprecated.$s-8 deprecated.$s-8 deprecated.$s-8 deprecated.$s-16;
+  margin-top: deprecated.$s-16;
+  border-radius: deprecated.$br-4;
 }
 
 .project-name-wrapper {
@@ -73,30 +73,30 @@
   align-items: center;
   justify-content: flex-start;
   width: 100%;
-  min-height: $s-32;
-  margin-left: $s-8;
+  min-height: deprecated.$s-32;
+  margin-left: deprecated.$s-8;
 }
 
 .project-name {
-  @include bodyLargeTypography;
-  @include textEllipsis;
+  @include deprecated.bodyLargeTypography;
+  @include deprecated.textEllipsis;
   width: fit-content;
-  margin-right: $s-12;
+  margin-right: deprecated.$s-12;
   line-height: 0.8;
   color: var(--title-foreground-color-hover);
   cursor: pointer;
-  height: $s-16;
+  height: deprecated.$s-16;
 }
 
 .info-wrapper {
   display: flex;
   align-items: center;
-  gap: $s-8;
+  gap: deprecated.$s-8;
 }
 
 .info,
 .recent-files-row-title-info {
-  @include bodyMediumTypography;
+  @include deprecated.bodyMediumTypography;
   color: var(--title-foreground-color);
   @media (max-width: 760px) {
     display: none;
@@ -106,16 +106,16 @@
 .project-actions {
   display: flex;
   opacity: var(--actions-opacity);
-  margin-left: $s-32;
+  margin-left: deprecated.$s-32;
 }
 
 .add-file-btn,
 .options-btn {
   @extend .button-tertiary;
-  height: $s-32;
-  width: $s-32;
-  margin: 0 $s-8;
-  padding: $s-8;
+  height: deprecated.$s-32;
+  width: deprecated.$s-32;
+  margin: 0 deprecated.$s-8;
+  padding: deprecated.$s-8;
 }
 
 .add-icon,
@@ -126,24 +126,24 @@
 
 .grid-container {
   width: 100%;
-  padding: 0 $s-4;
+  padding: 0 deprecated.$s-4;
 }
 
 .placeholder-placement {
-  margin: $s-16 $s-32;
+  margin: deprecated.$s-16 deprecated.$s-32;
 }
 
 .show-more {
   --show-more-color: var(--button-secondary-foreground-color-rest);
-  @include buttonStyle;
-  @include bodyMediumTypography;
+  @include deprecated.buttonStyle;
+  @include deprecated.bodyMediumTypography;
   position: absolute;
-  top: $s-8;
-  right: $s-52;
+  top: deprecated.$s-8;
+  right: deprecated.$s-52;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  column-gap: $s-12;
+  column-gap: deprecated.$s-12;
   color: var(--show-more-color);
 
   &:hover {
@@ -152,8 +152,8 @@
 }
 
 .show-more-icon {
-  height: $s-16;
-  width: $s-16;
+  height: deprecated.$s-16;
+  width: deprecated.$s-16;
   fill: none;
   stroke: var(--show-more-color);
 }
@@ -161,16 +161,16 @@
 // Team hero
 .team-hero {
   background-color: var(--color-background-tertiary);
-  border-radius: $br-8;
+  border-radius: deprecated.$br-8;
   border: none;
   display: flex;
-  margin: $s-16;
-  padding: $s-8;
+  margin: deprecated.$s-16;
+  padding: deprecated.$s-8;
   position: relative;
 
   img {
-    border-radius: $br-4;
-    height: $s-200;
+    border-radius: deprecated.$br-4;
+    height: deprecated.$s-200;
     width: auto;
 
     @media (max-width: 1200px) {
@@ -185,18 +185,18 @@
   flex-direction: column;
   align-items: flex-start;
   flex-grow: 1;
-  padding: $s-20 $s-20;
+  padding: deprecated.$s-20 deprecated.$s-20;
 }
 
 .title {
-  font-size: $fs-24;
+  font-size: deprecated.$fs-24;
   color: var(--color-foreground-primary);
-  font-weight: $fw400;
+  font-weight: deprecated.$fw400;
 }
 
 .info {
   flex: 1;
-  font-size: $fs-16;
+  font-size: deprecated.$fs-16;
   span {
     color: var(--color-foreground-secondary);
     display: block;
@@ -204,15 +204,15 @@
   a {
     color: var(--color-accent-primary);
   }
-  padding: $s-8 0;
+  padding: deprecated.$s-8 0;
 }
 
 .close {
   --close-icon-foreground-color: var(--icon-foreground);
   position: absolute;
-  top: $s-20;
-  right: $s-24;
-  width: $s-24;
+  top: deprecated.$s-20;
+  right: deprecated.$s-24;
+  width: deprecated.$s-24;
   background-color: transparent;
   border: none;
   cursor: pointer;
@@ -227,18 +227,18 @@
 }
 
 .invite {
-  height: $s-32;
-  width: $s-180;
+  height: deprecated.$s-32;
+  width: deprecated.$s-180;
 }
 
 .img-wrapper {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: $s-200;
-  height: $s-200;
+  width: deprecated.$s-200;
+  height: deprecated.$s-200;
   overflow: hidden;
-  border-radius: $br-4;
+  border-radius: deprecated.$br-4;
   @media (max-width: 1200px) {
     display: none;
     width: 0;
diff --git a/frontend/src/app/main/ui/dashboard/search.scss b/frontend/src/app/main/ui/dashboard/search.scss
index f0180ed414..c360ac61ac 100644
--- a/frontend/src/app/main/ui/dashboard/search.scss
+++ b/frontend/src/app/main/ui/dashboard/search.scss
@@ -4,27 +4,27 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@use "common/refactor/common-refactor.scss" as *;
+@use "refactor/common-refactor.scss" as deprecated;
 @use "common/refactor/common-dashboard";
 @use "./placeholder.scss";
 
 .dashboard-container {
   flex: 1 0 0;
-  margin-right: $s-16;
+  margin-right: deprecated.$s-16;
   overflow-y: auto;
   width: 100%;
-  border-top: $s-1 solid var(--color-background-quaternary);
+  border-top: deprecated.$s-1 solid var(--color-background-quaternary);
 
   &.dashboard-projects {
     user-select: none;
   }
   &.dashboard-shared {
-    width: calc(100vw - $s-320);
-    margin-right: $s-52;
+    width: calc(100vw - deprecated.$s-320);
+    margin-right: deprecated.$s-52;
   }
 
   &.search {
-    margin-top: $s-12;
+    margin-top: deprecated.$s-12;
   }
 }
 
@@ -33,17 +33,17 @@
   display: flex;
   justify-content: center;
   flex-direction: column;
-  height: $s-200;
+  height: deprecated.$s-200;
   background: transparent;
-  border: $s-1 solid var(--color-background-quaternary);
-  border-radius: $br-8;
+  border: deprecated.$s-1 solid var(--color-background-quaternary);
+  border-radius: deprecated.$br-8;
 
   .text {
     color: var(--color-foreground-primary);
   }
   .icon svg {
     stroke: var(--color-foreground-secondary);
-    width: $s-32;
-    height: $s-32;
+    width: deprecated.$s-32;
+    height: deprecated.$s-32;
   }
 }
diff --git a/frontend/src/app/main/ui/dashboard/subscription.scss b/frontend/src/app/main/ui/dashboard/subscription.scss
index 5a1251ee9c..7dc51ad6d6 100644
--- a/frontend/src/app/main/ui/dashboard/subscription.scss
+++ b/frontend/src/app/main/ui/dashboard/subscription.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@use "common/refactor/common-refactor.scss" as *;
+@use "refactor/common-refactor.scss" as deprecated;
 @use "common/refactor/common-dashboard";
 @use "ds/typography.scss" as t;
 @use "ds/_borders.scss" as *;
@@ -20,7 +20,7 @@
 }
 
 .cta-top-section {
-  @include buttonStyle;
+  @include deprecated.buttonStyle;
   display: grid;
   color: var(--color-foreground-secondary);
   grid-template-columns: 1fr auto;
@@ -37,7 +37,7 @@
 }
 
 .icon-dropdown {
-  @include flexCenter;
+  @include deprecated.flexCenter;
   height: 100%;
   width: var(--sp-l);
 }
@@ -56,7 +56,7 @@
 }
 .cta-bottom-section .content {
   @include t.use-typography("body-medium");
-  @include buttonStyle;
+  @include deprecated.buttonStyle;
   color: var(--color-foreground-secondary);
   display: inline-block;
   text-align: left;
@@ -83,7 +83,7 @@
 }
 
 .cta-link {
-  @include buttonStyle;
+  @include deprecated.buttonStyle;
   align-self: end;
   margin-inline-start: var(--sp-xs);
 }
@@ -92,7 +92,7 @@
   display: grid;
   grid-auto-rows: min-content;
   gap: var(--sp-s);
-  max-width: $s-1000;
+  max-width: deprecated.$s-1000;
   width: 100%;
 }
 
@@ -107,7 +107,7 @@
 }
 
 .manage-subscription-link {
-  @include buttonStyle;
+  @include deprecated.buttonStyle;
   @include t.use-typography("body-medium");
   color: var(--color-accent-tertiary);
   display: flex;
@@ -149,8 +149,8 @@
 .members-cta {
   height: fit-content;
   margin-block-start: var(--sp-s);
-  margin-inline-start: $s-52;
-  max-width: $s-220;
+  margin-inline-start: deprecated.$s-52;
+  max-width: deprecated.$s-220;
 
   .cta-title {
     line-height: 1.2;
diff --git a/frontend/src/app/main/ui/dashboard/team.scss b/frontend/src/app/main/ui/dashboard/team.scss
index f47f603b76..3e2ad7432e 100644
--- a/frontend/src/app/main/ui/dashboard/team.scss
+++ b/frontend/src/app/main/ui/dashboard/team.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@use "common/refactor/common-refactor.scss" as *;
+@use "refactor/common-refactor.scss" as deprecated;
 @use "common/refactor/common-dashboard";
 
 // Dashboard team settings
@@ -13,33 +13,33 @@
   flex-direction: column;
   align-items: center;
   width: 100%;
-  border-top: $s-1 solid var(--panel-border-color);
+  border-top: deprecated.$s-1 solid var(--panel-border-color);
   overflow-y: auto;
-  padding-inline-start: $s-20;
-  padding-block-start: $s-20;
+  padding-inline-start: deprecated.$s-20;
+  padding-block-start: deprecated.$s-20;
 }
 
 .settings-container {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: $s-24;
+  gap: deprecated.$s-24;
 }
 
 .block {
   display: grid;
   grid-auto-rows: min-content;
-  gap: $s-8;
-  max-width: $s-1000;
+  gap: deprecated.$s-8;
+  max-width: deprecated.$s-1000;
   width: 100%;
 }
 
 .info-block {
-  margin-block-start: $s-16;
+  margin-block-start: deprecated.$s-16;
 }
 
 .block-label {
-  @include headlineSmallTypography;
+  @include deprecated.headlineSmallTypography;
   color: var(--title-foreground-color);
 }
 
@@ -49,14 +49,14 @@
 
 .block-content {
   display: grid;
-  grid-template-columns: $s-32 1fr;
+  grid-template-columns: deprecated.$s-32 1fr;
   align-items: center;
-  gap: $s-12;
+  gap: deprecated.$s-12;
 }
 
 .owner-icon {
-  width: $s-32;
-  height: $s-32;
+  width: deprecated.$s-32;
+  height: deprecated.$s-32;
   border-radius: 50%;
 }
 
@@ -71,10 +71,10 @@
 .team-icon {
   --update-button-opacity: 0;
   position: relative;
-  height: $s-120;
-  width: $s-120;
-  padding: $s-16;
-  margin-block-end: $s-32;
+  height: deprecated.$s-120;
+  width: deprecated.$s-120;
+  padding: deprecated.$s-16;
+  margin-block-end: deprecated.$s-32;
 
   &:hover {
     --update-button-opacity: 1;
@@ -86,28 +86,28 @@
   top: 0;
   left: 0;
   border-radius: 50%;
-  width: $s-120;
-  height: $s-120;
+  width: deprecated.$s-120;
+  height: deprecated.$s-120;
 }
 
 .update-overlay {
   opacity: var(--update-button-opacity);
-  @include buttonStyle;
-  @include flexCenter;
+  @include deprecated.buttonStyle;
+  @include deprecated.flexCenter;
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
-  z-index: $z-index-modal;
-  border-radius: $br-circle;
+  z-index: deprecated.$z-index-modal;
+  border-radius: deprecated.$br-circle;
   background-color: var(--color-accent-primary);
 }
 
 .image-icon {
   @extend .button-icon;
-  min-width: $s-24;
-  min-height: $s-24;
+  min-width: deprecated.$s-24;
+  min-height: deprecated.$s-24;
   stroke: var(--icon-foreground-hover);
 }
 
@@ -117,9 +117,9 @@
   justify-content: center;
   width: 100%;
   height: 100%;
-  padding-inline-start: $s-20;
-  padding-block-start: $s-20;
-  border-top: $s-1 solid var(--panel-border-color);
+  padding-inline-start: deprecated.$s-20;
+  padding-block-start: deprecated.$s-20;
+  border-top: deprecated.$s-1 solid var(--panel-border-color);
   overflow-y: auto;
   scrollbar-gutter: stable;
 }
@@ -133,31 +133,31 @@
   display: grid;
   grid-template-rows: auto 1fr;
   height: fit-content;
-  max-width: $s-1000;
+  max-width: deprecated.$s-1000;
   width: 100%;
 }
 
 .table-header {
-  @include headlineSmallTypography;
+  @include deprecated.headlineSmallTypography;
   display: grid;
   align-items: center;
-  grid-template-columns: 43% 1fr $s-108 $s-12;
-  height: $s-40;
+  grid-template-columns: 43% 1fr deprecated.$s-108 deprecated.$s-12;
+  height: deprecated.$s-40;
   width: 100%;
-  max-width: $s-1000;
-  padding: 0 $s-16;
+  max-width: deprecated.$s-1000;
+  padding: 0 deprecated.$s-16;
   user-select: none;
   color: var(--title-foreground-color);
 }
 
 .table-rows {
   display: grid;
-  grid-auto-rows: $s-64;
-  gap: $s-16;
+  grid-auto-rows: deprecated.$s-64;
+  gap: deprecated.$s-16;
   width: 100%;
   height: 100%;
-  max-width: $s-1000;
-  margin-top: $s-16;
+  max-width: deprecated.$s-1000;
+  margin-top: deprecated.$s-16;
   color: var(--title-foreground-color);
 }
 
@@ -165,17 +165,17 @@
   display: grid;
   grid-template-columns: 43% 1fr auto;
   align-items: center;
-  height: $s-64;
+  height: deprecated.$s-64;
   width: 100%;
-  padding: 0 $s-16;
-  border-radius: $br-8;
+  padding: 0 deprecated.$s-16;
+  border-radius: deprecated.$br-8;
   background-color: var(--dashboard-list-background-color);
   color: var(--dashboard-list-foreground-color);
 }
 
 .title-field-name {
   width: 43%;
-  min-width: $s-300;
+  min-width: deprecated.$s-300;
 }
 
 .title-field-roles {
@@ -186,9 +186,9 @@
 .field-name {
   display: grid;
   grid-template-columns: auto 1fr;
-  gap: $s-16;
+  gap: deprecated.$s-16;
   width: 43%;
-  min-width: $s-300;
+  min-width: deprecated.$s-300;
 }
 
 .field-roles {
@@ -202,9 +202,9 @@
 
 // MEMBER INFO
 .member-image {
-  height: $s-32;
-  width: $s-32;
-  border-radius: $br-circle;
+  height: deprecated.$s-32;
+  width: deprecated.$s-32;
+  border-radius: deprecated.$br-circle;
 }
 
 .member-info {
@@ -215,18 +215,18 @@
 
 .member-name,
 .member-email {
-  @include textEllipsis;
-  @include bodyLargeTypography;
+  @include deprecated.textEllipsis;
+  @include deprecated.bodyLargeTypography;
 }
 
 .member-email {
-  @include bodySmallTypography;
+  @include deprecated.bodySmallTypography;
   color: var(--dashboard-list-text-foreground-color);
 }
 
 .you {
   color: var(--dashboard-list-text-foreground-color);
-  margin-left: $s-6;
+  margin-left: deprecated.$s-6;
 }
 
 // ROL INFO
@@ -235,14 +235,14 @@
   display: grid;
   grid-template-columns: 1fr auto;
   align-items: center;
-  height: $s-32;
-  min-width: $s-160;
+  height: deprecated.$s-32;
+  min-width: deprecated.$s-160;
   width: fit-content;
-  padding: $s-4 $s-8;
-  border-radius: $br-8;
+  padding: deprecated.$s-4 deprecated.$s-8;
+  border-radius: deprecated.$br-8;
   border-color: var(--menu-background-color-hover);
   background-color: var(--menu-background-color-hover);
-  font-size: $fs-14;
+  font-size: deprecated.$fs-14;
 }
 
 .has-priv {
@@ -255,9 +255,9 @@
 
 .roles-dropdown {
   @extend .menu-dropdown;
-  bottom: calc(-1 * $s-76);
+  bottom: calc(-1 * deprecated.$s-76);
   width: fit-content;
-  min-width: $s-160;
+  min-width: deprecated.$s-160;
 }
 
 .rol-dropdown-item {
@@ -271,16 +271,16 @@
 }
 
 .menu-btn {
-  @include buttonStyle;
+  @include deprecated.buttonStyle;
 }
 
 .actions-dropdown {
   @extend .menu-dropdown;
-  bottom: calc(-1 * $s-32);
+  bottom: calc(-1 * deprecated.$s-32);
   right: 0;
   left: unset;
   width: fit-content;
-  min-width: $s-160;
+  min-width: deprecated.$s-160;
 }
 
 .action-dropdown-item {
@@ -293,9 +293,9 @@
   justify-content: center;
   width: 100%;
   height: 100%;
-  padding-inline-start: $s-20;
-  padding-block-start: $s-20;
-  border-top: $s-1 solid var(--panel-border-color);
+  padding-inline-start: deprecated.$s-20;
+  padding-block-start: deprecated.$s-20;
+  border-top: deprecated.$s-1 solid var(--panel-border-color);
   overflow-y: auto;
   scrollbar-gutter: stable;
 }
@@ -304,12 +304,12 @@
   display: grid;
   grid-template-rows: auto 1fr;
   height: fit-content;
-  max-width: $s-1000;
+  max-width: deprecated.$s-1000;
   width: 100%;
 }
 
 .table-row-invitations {
-  grid-template-columns: 43% 1fr $s-108 $s-12;
+  grid-template-columns: 43% 1fr deprecated.$s-108 deprecated.$s-12;
   align-items: center;
 }
 
@@ -317,19 +317,19 @@
   display: grid;
   place-items: center;
   align-content: center;
-  height: $s-156;
-  max-width: $s-1000;
+  height: deprecated.$s-156;
+  max-width: deprecated.$s-1000;
   width: 100%;
-  margin-top: $s-16;
-  border: $s-1 solid var(--panel-border-color);
-  border-radius: $br-8;
+  margin-top: deprecated.$s-16;
+  border: deprecated.$s-1 solid var(--panel-border-color);
+  border-radius: deprecated.$br-8;
   color: var(--dashboard-list-text-foreground-color);
 }
 
 .btn-empty-invitations {
   @extend .button-primary;
-  margin-block-start: $s-16;
-  padding-inline: $s-12;
+  margin-block-start: deprecated.$s-16;
+  padding-inline: deprecated.$s-12;
 }
 
 .title-field-status {
@@ -338,15 +338,15 @@
 }
 
 .field-email {
-  @include textEllipsis;
-  @include bodyLargeTypography;
+  @include deprecated.textEllipsis;
+  @include deprecated.bodyLargeTypography;
   display: grid;
   align-items: center;
 }
 
 .invitations-dropdown {
-  bottom: calc(-1 * $s-112);
-  right: calc(-1 * $s-20);
+  bottom: calc(-1 * deprecated.$s-112);
+  right: calc(-1 * deprecated.$s-20);
 }
 
 // WEBHOOKS SECTION
@@ -354,63 +354,63 @@
   display: grid;
   grid-template-rows: auto 1fr;
   justify-items: center;
-  gap: $s-24;
+  gap: deprecated.$s-24;
   width: 100%;
   height: 100%;
-  padding-inline-start: $s-20;
-  padding-block-start: $s-20;
-  border-top: $s-1 solid var(--panel-border-color);
+  padding-inline-start: deprecated.$s-20;
+  padding-block-start: deprecated.$s-20;
+  border-top: deprecated.$s-1 solid var(--panel-border-color);
   overflow-y: auto;
 }
 
 .webhooks-hero-container {
   display: grid;
   grid-template-rows: auto 1fr;
-  margin: $s-80 auto $s-20 auto;
-  gap: $s-24;
+  margin: deprecated.$s-80 auto deprecated.$s-20 auto;
+  gap: deprecated.$s-24;
 }
 
 .webhooks-empty {
   display: grid;
   place-items: center;
   align-content: center;
-  height: $s-156;
-  max-width: $s-1000;
+  height: deprecated.$s-156;
+  max-width: deprecated.$s-1000;
   width: 100%;
-  padding: $s-32;
-  border: $s-1 solid var(--panel-border-color);
-  border-radius: $br-8;
+  padding: deprecated.$s-32;
+  border: deprecated.$s-1 solid var(--panel-border-color);
+  border-radius: deprecated.$br-8;
   color: var(--dashboard-list-text-foreground-color);
 }
 
 .webhooks-hero {
-  font-size: $fs-14;
+  font-size: deprecated.$fs-14;
   display: grid;
   grid-template-rows: auto 1fr auto;
-  gap: $s-32;
-  margin-top: $s-32;
+  gap: deprecated.$s-32;
+  margin-top: deprecated.$s-32;
   margin: 0;
-  padding: $s-32;
+  padding: deprecated.$s-32;
   padding: 0;
-  width: $s-468;
+  width: deprecated.$s-468;
 }
 
 .hero-title {
-  @include bigTitleTipography;
+  @include deprecated.bigTitleTipography;
   color: var(--dashboard-list-foreground-color);
 }
 
 .hero-desc {
   color: var(--color-foreground-secondary);
   margin-bottom: 0;
-  font-size: $fs-16;
-  max-width: $s-512;
+  font-size: deprecated.$fs-16;
+  max-width: deprecated.$s-512;
 }
 
 .hero-btn {
   @extend .button-primary;
-  height: $s-32;
-  max-width: $s-512;
+  height: deprecated.$s-32;
+  max-width: deprecated.$s-512;
 }
 
 .webhook-table {
@@ -421,7 +421,7 @@
   display: grid;
   align-items: center;
   grid-template-columns: auto 1fr auto auto;
-  gap: $s-16;
+  gap: deprecated.$s-16;
 }
 
 .actions {
@@ -430,7 +430,7 @@
 
 .menu-disabled {
   color: var(--icon-foreground);
-  width: $s-28;
+  width: deprecated.$s-28;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -438,10 +438,10 @@
 
 .webhook-actions-dropdown {
   @extend .menu-dropdown;
-  right: calc(-1 * $s-16);
-  bottom: calc(-1 * $s-40);
+  right: calc(-1 * deprecated.$s-16);
+  bottom: calc(-1 * deprecated.$s-40);
   width: fit-content;
-  min-width: $s-160;
+  min-width: deprecated.$s-160;
 }
 
 .webhook-dropdown-item {
@@ -461,35 +461,35 @@
 // INVITE MEMBERS MODAL
 .modal-team-container {
   @extend .modal-container-base;
-  @include menuShadow;
+  @include deprecated.menuShadow;
   position: fixed;
-  top: $s-72;
-  right: $s-12;
+  top: deprecated.$s-72;
+  right: deprecated.$s-12;
   left: unset;
-  width: $s-400;
-  padding: $s-32;
+  width: deprecated.$s-400;
+  padding: deprecated.$s-32;
   background-color: var(--modal-background-color);
 
   &.hero {
-    top: $s-216;
-    right: $s-32;
+    top: deprecated.$s-216;
+    right: deprecated.$s-32;
   }
 }
 
 .modal-team-container-workspace {
-  top: $s-40;
-  z-index: $z-index-modal;
+  top: deprecated.$s-40;
+  z-index: deprecated.$z-index-modal;
 }
 
 .modal-title {
-  @include headlineMediumTypography;
-  height: $s-32;
+  @include deprecated.headlineMediumTypography;
+  height: deprecated.$s-32;
   color: var(--modal-title-foreground-color);
 }
 
 .role-select {
-  @include flexColumn;
-  row-gap: $s-8;
+  @include deprecated.flexColumn;
+  row-gap: deprecated.$s-8;
 }
 
 .arrow-icon {
@@ -499,20 +499,20 @@
 }
 
 .invite-team-member-text {
-  @include bodyLargeTypography;
-  margin: 0 0 $s-16 0;
+  @include deprecated.bodyLargeTypography;
+  margin: 0 0 deprecated.$s-16 0;
   color: var(--modal-title-foreground-color);
 }
 
 .role-title {
-  @include bodyLargeTypography;
+  @include deprecated.bodyLargeTypography;
   margin: 0;
   color: var(--modal-title-foreground-color);
 }
 
 .invitation-row {
-  margin-top: $s-8;
-  margin-bottom: $s-24;
+  margin-top: deprecated.$s-8;
+  margin-bottom: deprecated.$s-24;
 }
 
 .action-buttons {
@@ -535,11 +535,11 @@
 }
 
 .modal-header {
-  margin-bottom: $s-24;
+  margin-bottom: deprecated.$s-24;
 }
 
 .modal-title {
-  @include uppercaseTitleTipography;
+  @include deprecated.uppercaseTitleTipography;
   color: var(--modal-title-foreground-color);
 }
 
@@ -548,18 +548,18 @@
 }
 
 .modal-content {
-  @include flexColumn;
-  gap: $s-24;
-  @include bodySmallTypography;
-  margin-bottom: $s-24;
+  @include deprecated.flexColumn;
+  gap: deprecated.$s-24;
+  @include deprecated.bodySmallTypography;
+  margin-bottom: deprecated.$s-24;
 }
 
 .fields-row {
-  @include flexColumn;
+  @include deprecated.flexColumn;
 }
 
 .select-title {
-  @include bodySmallTypography;
+  @include deprecated.bodySmallTypography;
   color: var(--modal-title-foreground-color);
 }
 
@@ -585,6 +585,6 @@
 
 .email-input {
   @extend .input-base;
-  @include bodySmallTypography;
+  @include deprecated.bodySmallTypography;
   height: auto;
 }
diff --git a/frontend/src/app/main/ui/dashboard/templates.scss b/frontend/src/app/main/ui/dashboard/templates.scss
index 8d5a6ffb52..5fdf142d87 100644
--- a/frontend/src/app/main/ui/dashboard/templates.scss
+++ b/frontend/src/app/main/ui/dashboard/templates.scss
@@ -4,32 +4,32 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@use "common/refactor/common-refactor.scss" as *;
+@use "refactor/common-refactor.scss" as deprecated;
 
 .dashboard-templates-section {
   background-color: var(--color-background-tertiary);
   bottom: 0;
-  border-bottom-left-radius: $br-8;
-  border-bottom-right-radius: $br-8;
-  border-top-right-radius: $br-8;
+  border-bottom-left-radius: deprecated.$br-8;
+  border-bottom-right-radius: deprecated.$br-8;
+  border-top-right-radius: deprecated.$br-8;
   display: flex;
   flex-direction: column;
-  height: $s-244;
+  height: deprecated.$s-244;
   justify-content: flex-end;
-  margin-left: $s-6;
-  margin-right: $s-6;
-  margin-bottom: $s-6;
+  margin-left: deprecated.$s-6;
+  margin-right: deprecated.$s-6;
+  margin-bottom: deprecated.$s-6;
   position: absolute;
   transition: bottom 300ms;
-  width: calc(100% - $s-12);
+  width: calc(100% - deprecated.$s-12);
   pointer-events: none;
   &.collapsed {
-    bottom: calc(-1 * $s-228);
+    bottom: calc(-1 * deprecated.$s-228);
     background-color: transparent;
     transition: bottom 300ms;
     .title-btn {
-      border-bottom-right-radius: $br-8;
-      border-bottom-left-radius: $br-8;
+      border-bottom-right-radius: deprecated.$br-8;
+      border-bottom-left-radius: deprecated.$br-8;
     }
     .content,
     .content-description {
@@ -40,23 +40,23 @@
 
 .title {
   pointer-events: all;
-  width: $s-420;
-  top: calc(-1 * $s-40);
+  width: deprecated.$s-420;
+  top: calc(-1 * deprecated.$s-40);
   text-align: right;
-  height: $s-56;
+  height: deprecated.$s-56;
   position: absolute;
 }
 
 .title-btn {
   border: none;
   cursor: pointer;
-  height: $s-56;
+  height: deprecated.$s-56;
   display: inline-flex;
   align-items: center;
-  border-top-left-radius: $br-8;
-  border-top-right-radius: $br-8;
+  border-top-left-radius: deprecated.$br-8;
+  border-top-right-radius: deprecated.$br-8;
   position: relative;
-  z-index: $z-index-1;
+  z-index: deprecated.$z-index-1;
   background-color: var(--color-background-tertiary);
   width: 100%;
 }
@@ -65,18 +65,18 @@
   display: inline-block;
   vertical-align: middle;
   line-height: 1.2;
-  font-size: $fs-16;
-  margin-left: $s-12;
-  margin-right: $s-8;
+  font-size: deprecated.$fs-16;
+  margin-left: deprecated.$s-12;
+  margin-right: deprecated.$s-8;
   color: var(--color-foreground-primary);
-  font-weight: $fw400;
+  font-weight: deprecated.$fw400;
 }
 
 .title-icon-container {
   display: inline-block;
   vertical-align: middle;
   margin-left: auto;
-  margin-right: $s-8;
+  margin-right: deprecated.$s-8;
   color: var(--color-foreground-primary);
 }
 
@@ -84,12 +84,12 @@
   display: inline-block;
   vertical-align: middle;
   margin-left: auto;
-  margin-right: $s-8;
+  margin-right: deprecated.$s-8;
   transform: rotate(90deg);
 }
 
 .title-icon-text {
-  margin-right: $s-8;
+  margin-right: deprecated.$s-8;
 }
 
 .title-icon-collapsed {
@@ -103,12 +103,12 @@
 
 .move-button {
   position: absolute;
-  top: $s-96;
-  border: $s-2 solid var(--color-foreground-secondary);
+  top: deprecated.$s-96;
+  border: deprecated.$s-2 solid var(--color-foreground-secondary);
   border-radius: 50%;
   text-align: center;
-  width: $s-36;
-  height: $s-36;
+  width: deprecated.$s-36;
+  height: deprecated.$s-36;
   cursor: pointer;
   background-color: var(--button-secondary-background-color-rest);
   display: flex;
@@ -117,7 +117,7 @@
   pointer-events: all;
 
   &:hover {
-    border: $s-2 solid var(--color-background-tertiary);
+    border: deprecated.$s-2 solid var(--color-background-tertiary);
     background-color: var(--color-accent-primary);
     .arrow-icon {
       stroke: var(--color-background-tertiary);
@@ -127,30 +127,30 @@
 
 .move-left {
   left: 0;
-  margin-left: $s-44;
+  margin-left: deprecated.$s-44;
   transform: rotate(180deg);
 }
 
 .move-right {
   right: 0;
-  margin-right: $s-44;
+  margin-right: deprecated.$s-44;
 }
 
 .content-description {
-  font-size: $fs-14;
+  font-size: deprecated.$fs-14;
   color: var(--color-foreground-primary);
   margin-bottom: -8px;
-  margin-top: $s-16;
-  margin-left: $s-16;
+  margin-top: deprecated.$s-16;
+  margin-left: deprecated.$s-16;
   visibility: visible;
 }
 
 .content {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax($s-276, $s-276));
+  grid-template-columns: repeat(auto-fill, minmax(deprecated.$s-276, deprecated.$s-276));
   grid-auto-flow: column;
   pointer-events: all;
-  height: $s-228;
+  height: deprecated.$s-228;
   overflow: scroll hidden;
   scroll-behavior: smooth;
   scroll-snap-type: x mandatory;
@@ -159,8 +159,8 @@
 }
 
 .card-container {
-  width: $s-276;
-  margin-top: $s-20;
+  width: deprecated.$s-276;
+  margin-top: deprecated.$s-20;
   text-align: center;
   vertical-align: top;
   background-color: transparent;
@@ -171,13 +171,13 @@
 
 .template-card {
   display: inline-block;
-  width: $s-256;
-  font-size: $fs-16;
+  width: deprecated.$s-256;
+  font-size: deprecated.$fs-16;
   cursor: pointer;
   color: var(--color-foreground-primary);
-  padding: 0 $s-4 $s-8 $s-4;
-  border-radius: $br-8;
-  border: $s-2 solid transparent;
+  padding: 0 deprecated.$s-4 deprecated.$s-8 deprecated.$s-4;
+  border-radius: deprecated.$br-8;
+  border: deprecated.$s-2 solid transparent;
   &:hover {
     border-color: var(--color-accent-primary);
     .download-icon {
@@ -191,29 +191,29 @@
 
 .img-container {
   width: 100%;
-  height: $s-136;
-  margin-bottom: $s-8;
-  border-radius: $br-5;
+  height: deprecated.$s-136;
+  margin-bottom: deprecated.$s-8;
+  border-radius: deprecated.$br-5;
   display: flex;
   justify-content: center;
   flex-direction: column;
 
   img {
-    border-radius: $br-4;
+    border-radius: deprecated.$br-4;
   }
 }
 
 .card-name {
-  padding: 0 $s-6;
+  padding: 0 deprecated.$s-6;
   display: flex;
   justify-content: space-between;
-  height: $s-24;
+  height: deprecated.$s-24;
   align-items: center;
 }
 
 .card-text {
-  font-weight: $fw400;
-  font-size: $fs-16;
+  font-weight: deprecated.$fw400;
+  font-size: deprecated.$fs-16;
   white-space: nowrap;
   overflow: hidden;
   width: 90%;
@@ -227,19 +227,19 @@
 }
 
 .template-link {
-  border: $s-2 solid transparent;
-  margin: $s-32;
-  padding: $s-32 0;
+  border: deprecated.$s-2 solid transparent;
+  margin: deprecated.$s-32;
+  padding: deprecated.$s-32 0;
 }
 
 .template-link-title {
-  font-size: $fs-14;
+  font-size: deprecated.$fs-14;
   color: var(--color-foreground-primary);
-  font-weight: $fw400;
+  font-weight: deprecated.$fw400;
 }
 
 .template-link-text {
-  font-size: $fs-12;
-  margin-top: $s-8;
+  font-size: deprecated.$fs-12;
+  margin-top: deprecated.$s-8;
   color: var(--color-foreground-secondary);
 }
diff --git a/frontend/src/app/main/ui/debug/icons_preview.scss b/frontend/src/app/main/ui/debug/icons_preview.scss
index 673c1b0658..a8493ed42b 100644
--- a/frontend/src/app/main/ui/debug/icons_preview.scss
+++ b/frontend/src/app/main/ui/debug/icons_preview.scss
@@ -1,4 +1,4 @@
-@use "common/refactor/common-refactor.scss" as *;
+@use "refactor/common-refactor.scss" as deprecated;
 
 .container {
   display: grid;
@@ -9,7 +9,7 @@
 }
 
 .title {
-  @include bigTitleTipography;
+  @include deprecated.bigTitleTipography;
   color: var(--color-foreground-primary);
 }
 
@@ -31,7 +31,7 @@
 
   color: var(--color-foreground-primary);
   word-break: break-word;
-  @include bodySmallTypography;
+  @include deprecated.bodySmallTypography;
 
   svg {
     width: var(--cell-size);
diff --git a/frontend/src/app/main/ui/inspect/left_sidebar.scss b/frontend/src/app/main/ui/inspect/left_sidebar.scss
index 503b80907e..a5b9247b1e 100644
--- a/frontend/src/app/main/ui/inspect/left_sidebar.scss
+++ b/frontend/src/app/main/ui/inspect/left_sidebar.scss
@@ -4,19 +4,19 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@use "common/refactor/common-refactor.scss" as *;
+@use "refactor/common-refactor.scss" as deprecated;
 
 .settings-bar-left {
   background-color: var(--panel-background-color);
   height: 100%;
-  width: $s-256;
+  width: deprecated.$s-256;
 }
 
 .settings-bar-inside {
   display: grid;
   grid-template-columns: 100%;
   grid-template-rows: 100%;
-  height: calc(100% - $s-2);
+  height: calc(100% - deprecated.$s-2);
   overflow-y: auto;
-  padding-top: $s-8;
+  padding-top: deprecated.$s-8;
 }
diff --git a/frontend/src/app/main/ui/settings.scss b/frontend/src/app/main/ui/settings.scss
index 5c95a0058d..2963138812 100644
--- a/frontend/src/app/main/ui/settings.scss
+++ b/frontend/src/app/main/ui/settings.scss
@@ -4,14 +4,14 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@use "common/refactor/common-refactor.scss" as *;
+@use "refactor/common-refactor.scss" as deprecated;
 @use "common/refactor/common-dashboard";
 
 .dashboard {
   background-color: var(--app-background);
   display: grid;
-  grid-template-rows: $s-48 1fr;
-  grid-template-columns: $s-40 $s-256 1fr;
+  grid-template-rows: deprecated.$s-48 1fr;
+  grid-template-columns: deprecated.$s-40 deprecated.$s-256 1fr;
   height: 100vh;
 }
 
@@ -20,26 +20,26 @@
   flex-direction: column;
   position: relative;
   grid-row: 1 / span 2;
-  padding: $s-16 $s-16 0 0;
+  padding: deprecated.$s-16 deprecated.$s-16 0 0;
 }
 
 .dashboard-container {
   flex: 1 0 0;
-  margin-right: $s-16;
+  margin-right: deprecated.$s-16;
   overflow-y: auto;
   width: 100%;
-  border-top: $s-1 solid var(--color-background-quaternary);
+  border-top: deprecated.$s-1 solid var(--color-background-quaternary);
 
   &.dashboard-projects {
     user-select: none;
   }
   &.dashboard-shared {
-    width: calc(100vw - $s-320);
-    margin-right: $s-52;
+    width: calc(100vw - deprecated.$s-320);
+    margin-right: deprecated.$s-52;
   }
 
   &.search {
-    margin-top: $s-12;
+    margin-top: deprecated.$s-12;
   }
 }
 
@@ -54,24 +54,24 @@
 }
 
 .form-container {
-  width: $s-800;
-  margin: $s-48 auto $s-32 $s-120;
+  width: deprecated.$s-800;
+  margin: deprecated.$s-48 auto deprecated.$s-32 deprecated.$s-120;
   display: flex;
-  max-width: $s-368;
+  max-width: deprecated.$s-368;
   width: 100%;
 
   &.two-columns {
-    max-width: $s-520;
+    max-width: deprecated.$s-520;
     justify-content: space-between;
     flex-direction: row;
   }
 
   h2 {
-    margin-bottom: $s-16;
+    margin-bottom: deprecated.$s-16;
   }
 
   form {
-    width: $s-468;
+    width: deprecated.$s-468;
 
     .custom-input,
     .custom-select {
@@ -80,26 +80,26 @@
         position: relative;
         text-transform: uppercase;
         color: var(--color-foreground-primary);
-        font-size: $fs-11;
-        margin-bottom: $s-12;
-        margin-left: calc(-1 * $s-4);
+        font-size: deprecated.$fs-11;
+        margin-bottom: deprecated.$s-12;
+        margin-left: calc(-1 * deprecated.$s-4);
       }
       input,
       select {
         background-color: var(--color-background-tertiary);
-        border-radius: $s-8;
+        border-radius: deprecated.$s-8;
         border-color: transparent;
         color: var(--color-foreground-primary);
-        padding: 0 $s-16;
+        padding: 0 deprecated.$s-16;
         &:focus {
-          outline: $s-1 solid var(--color-accent-primary);
+          outline: deprecated.$s-1 solid var(--color-accent-primary);
         }
         ::placeholder {
           color: var(--color-foreground-secondary);
         }
       }
       .help-icon {
-        bottom: $s-12;
+        bottom: deprecated.$s-12;
         top: auto;
         svg {
           fill: var(--color-foreground-secondary);
@@ -114,30 +114,30 @@
       }
       .input-container {
         background-color: var(--color-background-tertiary);
-        border-radius: $s-8;
+        border-radius: deprecated.$s-8;
         border-color: transparent;
-        margin-top: $s-24;
+        margin-top: deprecated.$s-24;
         .main-content {
           label {
             position: absolute;
-            top: calc(-1 * $s-24);
+            top: calc(-1 * deprecated.$s-24);
           }
           span {
             color: var(--color-foreground-primary);
           }
         }
         &:focus {
-          border: $s-1 solid var(--color-accent-primary);
+          border: deprecated.$s-1 solid var(--color-accent-primary);
         }
       }
       textarea {
-        border-radius: $s-8;
-        padding: $s-12 $s-16;
+        border-radius: deprecated.$s-8;
+        padding: deprecated.$s-12 deprecated.$s-16;
         background-color: var(--color-background-tertiary);
         color: var(--color-foreground-primary);
         border: none;
         &:focus {
-          outline: $s-1 solid var(--color-accent-primary);
+          outline: deprecated.$s-1 solid var(--color-accent-primary);
         }
       }
     }
@@ -146,7 +146,7 @@
       color: var(--color-foreground-primary);
     }
     .field-title:not(:first-child) {
-      margin-top: $s-64;
+      margin-top: deprecated.$s-64;
     }
 
     .field-text {
@@ -155,7 +155,7 @@
     button,
     .btn-secondary {
       width: 100%;
-      font-size: $fs-11;
+      font-size: deprecated.$fs-11;
       text-transform: uppercase;
       background-color: var(--color-background-tertiary);
       color: var(--color-foreground-primary);
@@ -169,41 +169,41 @@
     }
   }
   .links {
-    margin-top: $s-12;
+    margin-top: deprecated.$s-12;
   }
 }
 
 .profile-form {
   display: flex;
   flex-direction: column;
-  max-width: $s-368;
+  max-width: deprecated.$s-368;
   width: 100%;
 
   .newsletter-subs {
-    border-bottom: $s-1 solid var(--color-foreground-secondary);
-    border-top: $s-1 solid var(--color-foreground-secondary);
-    padding: $s-32 0;
-    margin-bottom: $s-32;
+    border-bottom: deprecated.$s-1 solid var(--color-foreground-secondary);
+    border-top: deprecated.$s-1 solid var(--color-foreground-secondary);
+    padding: deprecated.$s-32 0;
+    margin-bottom: deprecated.$s-32;
 
     .newsletter-title {
       font-family: "worksans", "vazirmatn", sans-serif;
       color: var(--color-foreground-secondary);
-      font-size: $fs-14;
+      font-size: deprecated.$fs-14;
     }
 
     label {
       font-family: "worksans", "vazirmatn", sans-serif;
       color: var(--color-background-primary);
-      font-size: $fs-12;
-      margin-right: calc(-1 * $s-16);
-      margin-bottom: $s-12;
+      font-size: deprecated.$fs-12;
+      margin-right: calc(-1 * deprecated.$s-16);
+      margin-bottom: deprecated.$s-12;
     }
 
     .info {
       font-family: "worksans", "vazirmatn", sans-serif;
       color: var(--color-foreground-secondary);
-      font-size: $fs-12;
-      margin-bottom: $s-8;
+      font-size: deprecated.$fs-12;
+      margin-bottom: deprecated.$s-8;
     }
 
     .input-checkbox label {
@@ -215,30 +215,30 @@
 .avatar-form {
   display: flex;
   flex-direction: column;
-  width: $s-120;
-  min-width: $s-120;
+  width: deprecated.$s-120;
+  min-width: deprecated.$s-120;
 
   img {
     border-radius: 50%;
     flex-shrink: 0;
-    height: $s-120;
-    margin-right: $s-16;
-    width: $s-120;
+    height: deprecated.$s-120;
+    margin-right: deprecated.$s-16;
+    width: deprecated.$s-120;
   }
 
   .image-change-field {
     position: relative;
-    width: $s-120;
-    height: $s-120;
+    width: deprecated.$s-120;
+    height: deprecated.$s-120;
 
     .update-overlay {
       opacity: 0;
       cursor: pointer;
       position: absolute;
-      width: $s-120;
-      height: $s-120;
+      width: deprecated.$s-120;
+      height: deprecated.$s-120;
       border-radius: 50%;
-      font-size: $fs-24;
+      font-size: deprecated.$fs-24;
       color: var(--color-foreground-primary);
       line-height: 5;
       text-align: center;
@@ -247,8 +247,8 @@
     }
 
     input[type="file"] {
-      width: $s-120;
-      height: $s-120;
+      width: deprecated.$s-120;
+      height: deprecated.$s-120;
       position: absolute;
       opacity: 0;
       cursor: pointer;
@@ -267,7 +267,7 @@
 .options-form,
 .password-form {
   h2 {
-    font-size: $fs-14;
-    margin-bottom: $s-20;
+    font-size: deprecated.$fs-14;
+    margin-bottom: deprecated.$s-20;
   }
 }
diff --git a/frontend/src/app/main/ui/settings/access_tokens.scss b/frontend/src/app/main/ui/settings/access_tokens.scss
index afb7dc6bab..5e9f139765 100644
--- a/frontend/src/app/main/ui/settings/access_tokens.scss
+++ b/frontend/src/app/main/ui/settings/access_tokens.scss
@@ -4,36 +4,36 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@use "common/refactor/common-refactor.scss" as *;
+@use "refactor/common-refactor.scss" as deprecated;
 
 // ACCESS TOKENS PAGE
 .dashboard-access-tokens {
   display: grid;
   grid-template-rows: auto 1fr;
-  margin: $s-80 auto $s-120 auto;
-  gap: $s-32;
-  width: $s-800;
+  margin: deprecated.$s-80 auto deprecated.$s-120 auto;
+  gap: deprecated.$s-32;
+  width: deprecated.$s-800;
 }
 
 // hero
 .access-tokens-hero {
   display: grid;
   grid-template-rows: auto auto 1fr;
-  gap: $s-32;
-  width: $s-500;
-  font-size: $fs-14;
-  margin: $s-16 auto 0 auto;
+  gap: deprecated.$s-32;
+  width: deprecated.$s-500;
+  font-size: deprecated.$fs-14;
+  margin: deprecated.$s-16 auto 0 auto;
 }
 
 .hero-title {
-  @include bigTitleTipography;
+  @include deprecated.bigTitleTipography;
   color: var(--title-foreground-color-hover);
 }
 
 .hero-desc {
   color: var(--title-foreground-color);
   margin-bottom: 0;
-  font-size: $fs-14;
+  font-size: deprecated.$fs-14;
 }
 
 .hero-btn {
@@ -45,12 +45,12 @@
   display: grid;
   place-items: center;
   align-content: center;
-  height: $s-156;
-  max-width: $s-1000;
+  height: deprecated.$s-156;
+  max-width: deprecated.$s-1000;
   width: 100%;
-  padding: $s-32;
-  border: $s-1 solid var(--panel-border-color);
-  border-radius: $br-8;
+  padding: deprecated.$s-32;
+  border: deprecated.$s-1 solid var(--panel-border-color);
+  border-radius: deprecated.$br-8;
   color: var(--dashboard-list-text-foreground-color);
 }
 
@@ -61,12 +61,12 @@
 
 .table-rows {
   display: grid;
-  grid-auto-rows: $s-64;
-  gap: $s-16;
+  grid-auto-rows: deprecated.$s-64;
+  gap: deprecated.$s-16;
   width: 100%;
   height: 100%;
-  max-width: $s-1000;
-  margin-top: $s-16;
+  max-width: deprecated.$s-1000;
+  margin-top: deprecated.$s-16;
   color: var(--title-foreground-color);
 }
 
@@ -74,33 +74,33 @@
   display: grid;
   grid-template-columns: 43% 1fr auto;
   align-items: center;
-  height: $s-64;
+  height: deprecated.$s-64;
   width: 100%;
-  padding: 0 $s-16;
-  border-radius: $br-8;
+  padding: 0 deprecated.$s-16;
+  border-radius: deprecated.$br-8;
   background-color: var(--dashboard-list-background-color);
   color: var(--dashboard-list-foreground-color);
 }
 
 .field-name {
-  @include textEllipsis;
+  @include deprecated.textEllipsis;
   display: grid;
   width: 43%;
-  min-width: $s-300;
+  min-width: deprecated.$s-300;
 }
 
 .expiration-date {
-  @include flexCenter;
-  min-width: $s-76;
+  @include deprecated.flexCenter;
+  min-width: deprecated.$s-76;
   width: fit-content;
-  height: $s-24;
-  border-radius: $br-8;
+  height: deprecated.$s-24;
+  border-radius: deprecated.$br-8;
   color: var(--dashboard-list-text-foreground-color);
 }
 
 .expired {
-  @include headlineSmallTypography;
-  padding: 0 $s-6;
+  @include deprecated.headlineSmallTypography;
+  padding: 0 deprecated.$s-6;
   color: var(--pill-foreground-color);
   background-color: var(--status-widget-background-color-warning);
 }
@@ -114,7 +114,7 @@
 }
 
 .menu-btn {
-  @include buttonStyle;
+  @include deprecated.buttonStyle;
 }
 
 // Create access token modal
@@ -124,15 +124,15 @@
 
 .modal-container {
   @extend .modal-container-base;
-  min-width: $s-408;
+  min-width: deprecated.$s-408;
 }
 
 .modal-header {
-  margin-bottom: $s-24;
+  margin-bottom: deprecated.$s-24;
 }
 
 .modal-title {
-  @include uppercaseTitleTipography;
+  @include deprecated.uppercaseTitleTipography;
   color: var(--modal-title-foreground-color);
 }
 .modal-close-btn {
@@ -140,46 +140,46 @@
 }
 
 .modal-content {
-  @include flexColumn;
-  gap: $s-24;
-  @include bodySmallTypography;
-  margin-bottom: $s-24;
+  @include deprecated.flexColumn;
+  gap: deprecated.$s-24;
+  @include deprecated.bodySmallTypography;
+  margin-bottom: deprecated.$s-24;
 }
 
 .select-title {
-  @include bodySmallTypography;
+  @include deprecated.bodySmallTypography;
   color: var(--modal-title-foreground-color);
 }
 
 .custon-input-wrapper {
-  @include flexRow;
-  border-radius: $br-8;
-  height: $s-32;
+  @include deprecated.flexRow;
+  border-radius: deprecated.$br-8;
+  height: deprecated.$s-32;
   background-color: var(--input-background-color);
 }
 
 .custom-input-token {
   @extend .input-element;
-  @include bodySmallTypography;
+  @include deprecated.bodySmallTypography;
   margin: 0;
   flex-grow: 1;
   &:focus {
     outline: none;
-    border: $s-1 solid var(--input-border-color-active);
+    border: deprecated.$s-1 solid var(--input-border-color-active);
   }
 }
 
 .token-value {
-  @include textEllipsis;
-  @include bodySmallTypography;
+  @include deprecated.textEllipsis;
+  @include deprecated.bodySmallTypography;
   flex-grow: 1;
 }
 
 .copy-btn {
-  @include flexCenter;
+  @include deprecated.flexCenter;
   @extend .button-secondary;
-  height: $s-28;
-  width: $s-28;
+  height: deprecated.$s-28;
+  width: deprecated.$s-28;
 }
 
 .clipboard-icon {
diff --git a/frontend/src/app/main/ui/settings/notifications.scss b/frontend/src/app/main/ui/settings/notifications.scss
index 7e2cd4ae08..27a2273536 100644
--- a/frontend/src/app/main/ui/settings/notifications.scss
+++ b/frontend/src/app/main/ui/settings/notifications.scss
@@ -4,17 +4,17 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@use "common/refactor/common-refactor.scss" as *;
+@use "refactor/common-refactor.scss" as deprecated;
 @use "./profile" as *;
 
 .update-btn {
-  margin-top: $s-16;
+  margin-top: deprecated.$s-16;
   @extend .button-primary;
-  height: $s-36;
+  height: deprecated.$s-36;
 }
 
 .notifications-form {
-  width: $s-400;
+  width: deprecated.$s-400;
 }
 
 .notifications-page {
@@ -34,9 +34,9 @@
   }
 
   h4 {
-    font-size: $fs-11;
+    font-size: deprecated.$fs-11;
     color: var(--color-foreground-primary);
     text-transform: uppercase;
-    margin: $s-12;
+    margin: deprecated.$s-12;
   }
 }
diff --git a/frontend/src/app/main/ui/settings/password.scss b/frontend/src/app/main/ui/settings/password.scss
index fe44ec71b3..5a0551333e 100644
--- a/frontend/src/app/main/ui/settings/password.scss
+++ b/frontend/src/app/main/ui/settings/password.scss
@@ -4,11 +4,11 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@use "common/refactor/common-refactor.scss" as *;
+@use "refactor/common-refactor.scss" as deprecated;
 @use "./profile" as *;
 
 .update-btn {
-  margin-top: $s-16;
+  margin-top: deprecated.$s-16;
   @extend .button-primary;
-  height: $s-36;
+  height: deprecated.$s-36;
 }
diff --git a/frontend/src/app/main/ui/settings/sidebar.scss b/frontend/src/app/main/ui/settings/sidebar.scss
index 096d6342ec..a072c59b8f 100644
--- a/frontend/src/app/main/ui/settings/sidebar.scss
+++ b/frontend/src/app/main/ui/settings/sidebar.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@use "common/refactor/common-refactor.scss" as *;
+@use "refactor/common-refactor.scss" as deprecated;
 
 .dashboard-sidebar {
   grid-column: 1 / span 2;
@@ -12,9 +12,9 @@
   display: grid;
   grid-template-rows: 1fr auto;
   height: 100%;
-  padding-block-start: $s-16;
-  border-right: $s-1 solid var(--panel-border-color);
-  z-index: $z-index-1;
+  padding-block-start: deprecated.$s-16;
+  border-right: deprecated.$s-1 solid var(--panel-border-color);
+  z-index: deprecated.$z-index-1;
   background-color: var(--panel-background-color);
 }
 
@@ -28,7 +28,7 @@
 
 .sidebar-separator {
   border-color: transparent;
-  margin: $s-12 $s-16;
+  margin: deprecated.$s-12 deprecated.$s-16;
 }
 
 .sidebar-nav-settings {
@@ -44,7 +44,7 @@
   --settings-background-color: transparent;
   display: flex;
   align-items: center;
-  padding: $s-8 $s-8 $s-8 $s-24;
+  padding: deprecated.$s-8 deprecated.$s-8 deprecated.$s-8 deprecated.$s-24;
   color: var(--settings-foreground-color);
   background-color: var(--settings-background-color);
   cursor: pointer;
@@ -63,20 +63,20 @@
 .feedback-icon {
   @extend .button-icon-small;
   stroke: var(--settings-foreground-color);
-  margin-right: $s-8;
+  margin-right: deprecated.$s-8;
 }
 
 .element-title {
-  @include textEllipsis;
-  @include bodyMediumTypography;
+  @include deprecated.textEllipsis;
+  @include deprecated.bodyMediumTypography;
 }
 
 .back-to-dashboard {
-  @include buttonStyle;
+  @include deprecated.buttonStyle;
   display: flex;
   align-items: center;
-  padding: $s-12 $s-16;
-  font-size: $fs-14;
+  padding: deprecated.$s-12 deprecated.$s-16;
+  font-size: deprecated.$fs-14;
 }
 
 .back-text {
@@ -87,5 +87,5 @@
   @extend .button-icon;
   stroke: var(--icon-foreground);
   transform: rotate(180deg);
-  margin-right: $s-12;
+  margin-right: deprecated.$s-12;
 }
diff --git a/frontend/src/app/main/ui/settings/subscription.scss b/frontend/src/app/main/ui/settings/subscription.scss
index 1dfbb958f2..b3632069b7 100644
--- a/frontend/src/app/main/ui/settings/subscription.scss
+++ b/frontend/src/app/main/ui/settings/subscription.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@use "common/refactor/common-refactor.scss" as *;
+@use "refactor/common-refactor.scss" as deprecated;
 @use "ds/typography.scss" as t;
 @use "ds/_borders.scss" as *;
 @use "ds/spacing.scss" as *;
@@ -20,10 +20,10 @@
   display: flex;
   justify-content: center;
   flex-direction: column;
-  max-width: $s-500;
+  max-width: deprecated.$s-500;
   margin-block-end: var(--sp-xxxl);
-  width: $s-580;
-  margin: $s-92 auto $s-120 auto;
+  width: deprecated.$s-580;
+  margin: deprecated.$s-92 auto deprecated.$s-120 auto;
   justify-content: center;
 }
 
@@ -98,7 +98,7 @@
   border-radius: 6px;
   border: 1.75px solid var(--color-foreground-primary);
   stroke-width: 2.25px;
-  padding: $s-1;
+  padding: deprecated.$s-1;
 
   svg {
     block-size: var(--sp-m);
@@ -135,12 +135,12 @@
 }
 
 .other-subscriptions {
-  margin-block-start: $s-52;
+  margin-block-start: deprecated.$s-52;
 }
 
 .cta-button {
   @include t.use-typography("body-medium");
-  @include buttonStyle;
+  @include deprecated.buttonStyle;
   align-items: center;
   color: var(--color-accent-tertiary);
   display: flex;
@@ -173,11 +173,11 @@
   display: grid;
   grid-template-rows: auto 1fr auto;
   max-height: initial;
-  min-width: $s-548;
+  min-width: deprecated.$s-548;
 }
 
 .modal-dialog.subscription-success {
-  min-width: $s-648;
+  min-width: deprecated.$s-648;
 }
 
 .close-btn {
@@ -211,7 +211,7 @@
 .modal-text-medium strong,
 .text-strikethrough strong,
 .modal-text-cap strong {
-  font-weight: $fw700;
+  font-weight: deprecated.$fw700;
 }
 
 .modal-content,
@@ -223,11 +223,11 @@
 
 .modal-success-content {
   display: flex;
-  gap: $s-40;
+  gap: deprecated.$s-40;
 }
 
 .modal-footer {
-  margin-block-start: $s-40;
+  margin-block-start: deprecated.$s-40;
 }
 
 .action-buttons {
@@ -249,7 +249,7 @@
 .modal-start {
   display: flex;
   justify-content: center;
-  max-width: $s-220;
+  max-width: deprecated.$s-220;
 
   svg {
     width: 100%;
@@ -276,19 +276,19 @@
   list-style-position: inside;
   list-style-type: none;
   margin-inline-start: var(--sp-xl);
-  max-height: $s-216;
+  max-height: deprecated.$s-216;
   overflow-y: auto;
 }
 
 .input-field {
   --input-icon-padding: var(--sp-s);
-  width: $s-80;
+  width: deprecated.$s-80;
 }
 
 .error-message {
   @include t.use-typography("body-small");
   color: var(--color-foreground-error);
-  margin-block-start: $s-8;
+  margin-block-start: deprecated.$s-8;
 }
 
 .editors-wrapper {
@@ -307,7 +307,7 @@
   @include t.use-typography("body-small");
   background-color: var(--color-background-tertiary);
   border-radius: var(--sp-s);
-  margin-block-start: $s-40;
+  margin-block-start: deprecated.$s-40;
   padding-block: var(--sp-s);
   padding-inline: var(--sp-m);
 }
diff --git a/frontend/src/app/main/ui/static.scss b/frontend/src/app/main/ui/static.scss
index aff796cee3..77bbfbff5b 100644
--- a/frontend/src/app/main/ui/static.scss
+++ b/frontend/src/app/main/ui/static.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@use "common/refactor/common-refactor.scss" as *;
+@use "refactor/common-refactor.scss" as deprecated;
 
 .exception-layout {
   width: 100%;
@@ -15,13 +15,13 @@
 .deco-before,
 .deco-after {
   position: absolute;
-  left: calc(50% - $s-40);
+  left: calc(50% - deprecated.$s-40);
 
   svg {
     position: absolute;
     fill: var(--color-foreground-secondary);
     height: 1537px;
-    width: $s-80;
+    width: deprecated.$s-80;
   }
 }
 
@@ -46,7 +46,7 @@
 .deco-after2 {
   display: flex;
   justify-content: center;
-  gap: $s-8;
+  gap: deprecated.$s-8;
   width: 100%;
   height: 34vh;
   position: absolute;
@@ -57,7 +57,7 @@
   svg {
     fill: var(--color-foreground-secondary);
     height: 1537px;
-    width: $s-80;
+    width: deprecated.$s-80;
   }
 
   span {
@@ -66,7 +66,7 @@
     justify-content: flex-end;
     height: 100%;
     width: 25%;
-    padding-bottom: $s-28;
+    padding-bottom: deprecated.$s-28;
 
     &:first-child {
       text-align: right;
@@ -76,7 +76,7 @@
 
 .exception-header {
   color: var(--color-foreground-secondary);
-  padding: $s-24 $s-32;
+  padding: deprecated.$s-24 deprecated.$s-32;
   position: fixed;
   background: none;
   border: none;
@@ -87,8 +87,8 @@
 
 .penpot-logo {
   fill: var(--color-foreground-primary);
-  width: $s-48;
-  height: $s-48;
+  width: deprecated.$s-48;
+  height: deprecated.$s-48;
 }
 
 .back-arrow {
@@ -99,18 +99,18 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  gap: $s-8;
-  margin-left: $s-12;
-  font-size: $fs-14;
+  gap: deprecated.$s-8;
+  margin-left: deprecated.$s-12;
+  font-size: deprecated.$fs-14;
 }
 
 .login-header {
   @extend .button-primary;
-  padding: $s-8 $s-16;
-  font-size: $fs-11;
+  padding: deprecated.$s-8 deprecated.$s-16;
+  font-size: deprecated.$fs-11;
   position: fixed;
   right: 0;
-  margin: $s-40 $s-32;
+  margin: deprecated.$s-40 deprecated.$s-32;
 }
 
 .exception-content {
@@ -123,22 +123,22 @@
     align-items: center;
     display: flex;
     flex-direction: column;
-    gap: $s-16;
+    gap: deprecated.$s-16;
     height: 34vh;
     justify-content: center;
     margin-top: 33vh;
     text-align: center;
-    width: $s-640;
+    width: deprecated.$s-640;
   }
 }
 
 .main-message {
-  @include bigTitleTipography;
+  @include deprecated.bigTitleTipography;
   color: var(--color-foreground-primary);
 }
 
 .desc-message {
-  @include bigTitleTipography;
+  @include deprecated.bigTitleTipography;
   color: var(--color-foreground-secondary);
 }
 
@@ -148,8 +148,8 @@
   button {
     @extend .button-primary;
     text-transform: uppercase;
-    padding: $s-8 $s-16;
-    font-size: $fs-11;
+    padding: deprecated.$s-8 deprecated.$s-16;
+    font-size: deprecated.$fs-11;
   }
 }
 
@@ -169,12 +169,12 @@
 
   .workspace-left,
   .workspace-right {
-    padding: $s-12;
-    width: $s-276;
+    padding: deprecated.$s-12;
+    width: deprecated.$s-276;
     height: 100%;
     background-color: var(--color-background-primary);
     display: flex;
-    gap: $s-4;
+    gap: deprecated.$s-4;
 
     svg {
       width: 2rem;
@@ -183,12 +183,12 @@
     }
 
     .project-name {
-      @include uppercaseTitleTipography;
+      @include deprecated.uppercaseTitleTipography;
       color: var(--title-foreground-color);
     }
 
     .file-name {
-      @include smallTitleTipography;
+      @include deprecated.smallTitleTipography;
       text-transform: none;
       color: var(--title-foreground-color-hover);
     }
@@ -200,7 +200,7 @@
   height: 100%;
 
   .dashboard-sidebar {
-    width: $s-300;
+    width: deprecated.$s-300;
     height: 100%;
   }
 }
@@ -226,11 +226,11 @@
   .dialog-login {
     width: 556px;
     background-color: var(--color-background-primary);
-    border-radius: $s-8;
+    border-radius: deprecated.$s-8;
     display: flex;
     flex-direction: column;
     align-content: stretch;
-    padding: $s-36;
+    padding: deprecated.$s-36;
     color: var(--modal-text-foreground-color);
 
     .modal-close {
@@ -243,8 +243,8 @@
 
         svg {
           cursor: pointer;
-          width: $s-24;
-          height: $s-24;
+          width: deprecated.$s-24;
+          height: deprecated.$s-24;
           fill: var(--modal-text-foreground-color);
           stroke: var(--modal-text-foreground-color);
         }
@@ -252,59 +252,59 @@
     }
 
     .dialog-title {
-      font-size: $fs-20;
+      font-size: deprecated.$fs-20;
     }
 
     .sign-info {
       display: flex;
       justify-content: flex-end;
-      margin-top: $s-32;
+      margin-top: deprecated.$s-32;
 
       button {
         @extend .button-primary;
         text-transform: uppercase;
-        padding: $s-8 $s-16;
-        font-size: $fs-11;
+        padding: deprecated.$s-8 deprecated.$s-16;
+        font-size: deprecated.$fs-11;
       }
 
       .cancel-button {
         @extend .button-secondary;
         text-transform: uppercase;
-        padding: $s-8 $s-16;
-        font-size: $fs-11;
-        margin-right: $s-16;
+        padding: deprecated.$s-8 deprecated.$s-16;
+        font-size: deprecated.$fs-11;
+        margin-right: deprecated.$s-16;
       }
     }
   }
 
   .dialog {
-    gap: $s-12;
+    gap: deprecated.$s-12;
   }
 
   .login {
     gap: 0;
-    padding: 0 $s-36 $s-72 $s-36;
+    padding: 0 deprecated.$s-36 deprecated.$s-72 deprecated.$s-36;
 
     .logo {
-      margin-bottom: $s-40;
+      margin-bottom: deprecated.$s-40;
 
       svg {
         fill: var(--color-foreground-primary);
-        width: $s-120;
-        height: $s-40;
+        width: deprecated.$s-120;
+        height: deprecated.$s-40;
       }
     }
 
     .logo-title {
-      font-size: $fs-20;
+      font-size: deprecated.$fs-20;
       color: var(--title-foreground-color-hover);
-      margin-bottom: $s-4;
+      margin-bottom: deprecated.$s-4;
     }
 
     .logo-subtitle {
-      font-size: $fs-14;
+      font-size: deprecated.$fs-14;
       color: var(--title-foreground-color-hover);
-      margin-bottom: $s-24;
+      margin-bottom: deprecated.$s-24;
     }
 
     .change-section {
@@ -317,16 +317,16 @@
     }
 
     hr {
-      margin: $s-20 0;
-      border-top: solid $s-1 var(--modal-separator-backogrund-color);
+      margin: deprecated.$s-20 0;
+      border-top: solid deprecated.$s-1 var(--modal-separator-backogrund-color);
     }
 
     .separator {
-      margin: $s-20 0;
+      margin: deprecated.$s-20 0;
     }
 
     form div {
-      margin-bottom: $s-8;
+      margin-bottom: deprecated.$s-8;
     }
   }
 }
diff --git a/frontend/src/app/main/ui/viewer.scss b/frontend/src/app/main/ui/viewer.scss
index 2ece31cd85..6b46b2d5f4 100644
--- a/frontend/src/app/main/ui/viewer.scss
+++ b/frontend/src/app/main/ui/viewer.scss
@@ -4,12 +4,12 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@use "common/refactor/common-refactor.scss" as *;
+@use "refactor/common-refactor.scss" as deprecated;
 
 .viewer-layout {
   height: 100vh;
   display: grid;
-  grid-template-rows: $s-48 auto;
+  grid-template-rows: deprecated.$s-48 auto;
   grid-template-columns: 1fr;
   user-select: none;
 }
@@ -18,13 +18,13 @@
   overflow: hidden;
   grid-row: 2 / span 1;
   display: grid;
-  grid-template-rows: $s-252 auto;
+  grid-template-rows: deprecated.$s-252 auto;
   grid-template-columns: 1fr;
   background-color: var(--viewer-background-color);
 }
 
 .empty-state {
-  @include bodySmallTypography;
+  @include deprecated.bodySmallTypography;
   color: var(--empty-message-foreground-color);
   display: grid;
   place-items: center;
@@ -38,7 +38,7 @@
 
 .inspect-layout {
   display: grid;
-  grid-template-rows: $s-48 auto;
+  grid-template-rows: deprecated.$s-48 auto;
   grid-template-columns: 1fr;
   height: 100vh;
   margin-top: 0;
@@ -46,10 +46,10 @@
 }
 
 .thumbnails-close {
-  @include buttonStyle;
+  @include deprecated.buttonStyle;
   grid-row: 1 / span 2;
   grid-column: 1 / span 1;
-  z-index: $z-index-10;
+  z-index: deprecated.$z-index-10;
   background-color: var(--overlay-color);
 }
 
@@ -64,7 +64,7 @@
   display: flex;
   align-items: center;
   flex-wrap: nowrap;
-  height: calc(100vh - $s-48);
+  height: calc(100vh - deprecated.$s-48);
   flex-flow: wrap;
   overflow: auto;
 }
@@ -79,13 +79,13 @@
 .viewer-go-prev,
 .viewer-go-next {
   @extend .button-secondary;
-  @include flexCenter;
+  @include deprecated.flexCenter;
   position: absolute;
-  right: $s-8;
-  height: $s-64;
-  width: $s-32;
-  top: calc(50vh - $s-32);
-  z-index: $z-index-2;
+  right: deprecated.$s-8;
+  height: deprecated.$s-64;
+  width: deprecated.$s-32;
+  top: calc(50vh - deprecated.$s-32);
+  z-index: deprecated.$z-index-2;
   background-color: var(--viewer-controls-background-color);
   transition: transform 400ms ease 300ms;
   svg {
@@ -95,11 +95,11 @@
 }
 
 .viewer-go-next.comment-sidebar {
-  right: $s-280;
+  right: deprecated.$s-280;
 }
 
 .viewer-go-prev {
-  left: $s-8;
+  left: deprecated.$s-8;
   right: unset;
   svg {
     transform: rotate(180deg);
@@ -113,19 +113,19 @@
   align-items: flex-start;
   justify-content: space-between;
   width: 100%;
-  height: $s-40;
-  padding-right: 0 $s-8 $s-40 $s-8;
+  height: deprecated.$s-40;
+  padding-right: 0 deprecated.$s-8 deprecated.$s-40 deprecated.$s-8;
   transition: transform 400ms ease 300ms;
-  z-index: $z-index-2;
+  z-index: deprecated.$z-index-2;
   pointer-events: none;
 }
 
 .reset-button {
   @extend .button-secondary;
-  @include flexCenter;
-  height: $s-32;
-  width: $s-28;
-  margin-left: $s-8;
+  @include deprecated.flexCenter;
+  height: deprecated.$s-32;
+  width: deprecated.$s-28;
+  margin-left: deprecated.$s-8;
   background-color: var(--viewer-controls-background-color);
   pointer-events: all;
   svg {
@@ -135,11 +135,11 @@
 }
 
 .counter {
-  @include flexCenter;
-  @include bodySmallTypography;
-  border-radius: $br-8;
-  width: $s-64;
-  height: $s-32;
+  @include deprecated.flexCenter;
+  @include deprecated.bodySmallTypography;
+  border-radius: deprecated.$br-8;
+  width: deprecated.$s-64;
+  height: deprecated.$s-32;
   color: var(--viewer-thumbnails-control-foreground-color);
   background-color: var(--viewer-controls-background-color);
 }
@@ -193,7 +193,7 @@
 
 /** FULLSCREEN */
 [data-fullscreen="true"] .viewer-bottom {
-  transform: translateY($s-40);
+  transform: translateY(deprecated.$s-40);
 }
 
 [data-force-visible="true"] .viewer-bottom {
@@ -201,15 +201,15 @@
 }
 
 [data-fullscreen="true"] .viewer-go-next {
-  transform: translateX($s-40);
+  transform: translateX(deprecated.$s-40);
 }
 
 [data-fullscreen="true"] .viewer-go-prev {
-  transform: translateX(-$s-40);
+  transform: translateX(-#{deprecated.$s-40});
 }
 
 [data-fullscreen="true"] .viewer-content {
-  transform: translateY(-$s-48);
+  transform: translateY(-#{deprecated.$s-48});
   height: 100vh;
 }
 
diff --git a/frontend/src/app/main/ui/viewer/comments.scss b/frontend/src/app/main/ui/viewer/comments.scss
index 7472dc8d2e..f567027f33 100644
--- a/frontend/src/app/main/ui/viewer/comments.scss
+++ b/frontend/src/app/main/ui/viewer/comments.scss
@@ -4,32 +4,32 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@use "common/refactor/common-refactor.scss" as *;
+@use "refactor/common-refactor.scss" as deprecated;
 
 // COMMENT DROPDOWN ON HEADER
 .view-options {
-  @include bodySmallTypography;
+  @include deprecated.bodySmallTypography;
   display: flex;
   align-items: center;
   position: relative;
-  gap: $s-4;
-  height: $s-32;
-  padding: $s-8;
-  border-radius: $br-8;
+  gap: deprecated.$s-4;
+  height: deprecated.$s-32;
+  padding: deprecated.$s-8;
+  border-radius: deprecated.$br-8;
   background-color: var(--input-background-color);
   cursor: pointer;
 }
 
 .dropdown {
   @extend .menu-dropdown;
-  right: $s-2;
-  top: calc($s-2 + $s-48);
-  width: $s-272;
-  padding: $s-6;
+  right: deprecated.$s-2;
+  top: calc(deprecated.$s-2 + deprecated.$s-48);
+  width: deprecated.$s-272;
+  padding: deprecated.$s-6;
 }
 
 .dropdown-title {
-  @include bodySmallTypography;
+  @include deprecated.bodySmallTypography;
   flex-grow: 1;
   color: var(--input-foreground-color-active);
 }
@@ -41,9 +41,9 @@
 
 .icon,
 .icon-dropdown {
-  @include flexCenter;
+  @include deprecated.flexCenter;
   height: 100%;
-  width: $s-16;
+  width: deprecated.$s-16;
   svg {
     @extend .button-icon-small;
     stroke: var(--icon-foreground);
@@ -57,9 +57,9 @@
 .dropdown-element {
   @extend .dropdown-element-base;
   .icon {
-    @include flexCenter;
+    @include deprecated.flexCenter;
     height: 100%;
-    width: $s-16;
+    width: deprecated.$s-16;
     svg {
       @extend .button-icon-small;
       stroke: var(--icon-foreground);
@@ -80,7 +80,7 @@
 }
 
 .separator {
-  height: $s-8;
+  height: deprecated.$s-8;
 }
 
 // FLOATING COMMENT
@@ -90,7 +90,7 @@
   left: 0px;
   width: 100%;
   height: 100%;
-  z-index: $z-index-1;
+  z-index: deprecated.$z-index-1;
 }
 
 .threads {
@@ -103,10 +103,10 @@
 .comments-sidebar {
   position: absolute;
   right: 0;
-  top: $s-44;
-  width: $s-276;
-  height: calc(100vh - $s-48);
-  z-index: $z-index-10;
+  top: deprecated.$s-44;
+  width: deprecated.$s-276;
+  height: calc(100vh - deprecated.$s-48);
+  z-index: deprecated.$z-index-10;
   background-color: var(--panel-background-color);
 }
 
diff --git a/frontend/src/app/main/ui/viewer/header.scss b/frontend/src/app/main/ui/viewer/header.scss
index 1a338aac0b..f9814d3a44 100644
--- a/frontend/src/app/main/ui/viewer/header.scss
+++ b/frontend/src/app/main/ui/viewer/header.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@use "common/refactor/common-refactor.scss" as *;
+@use "refactor/common-refactor.scss" as deprecated;
 
 .viewer-header {
   position: absolute;
@@ -12,12 +12,12 @@
   grid-column: 1 / span 1;
   grid-row: 1 / span 1;
   display: grid;
-  grid-template-columns: 1fr $s-92 1fr;
+  grid-template-columns: 1fr deprecated.$s-92 1fr;
   justify-content: space-between;
   align-items: center;
-  height: $s-48;
+  height: deprecated.$s-48;
   width: 100vw;
-  padding: $s-8 $s-12;
+  padding: deprecated.$s-8 deprecated.$s-12;
   transition: transform 400ms ease 300ms;
   background-color: var(--panel-background-color);
 }
@@ -29,7 +29,7 @@
   justify-content: flex-start;
   flex-basis: min-content;
   width: 100%;
-  gap: $s-12;
+  gap: deprecated.$s-12;
 }
 
 .home-link {
@@ -39,43 +39,43 @@
 }
 
 .logo-icon {
-  width: $s-28;
-  height: $s-28;
+  width: deprecated.$s-28;
+  height: deprecated.$s-28;
   fill: var(--icon-foreground-hover);
 }
 
 .sitemap-zone {
-  @include flexColumn;
+  @include deprecated.flexColumn;
   position: relative;
   width: 100%;
 }
 
 .project-name {
-  @include uppercaseTitleTipography;
+  @include deprecated.uppercaseTitleTipography;
   color: var(--title-foreground-color);
 }
 
 .sitemap-text {
-  @include flexRow;
+  @include deprecated.flexRow;
 }
 
 .breadcrumb {
-  @include bodySmallTypography;
-  @include flexRow;
+  @include deprecated.bodySmallTypography;
+  @include deprecated.flexRow;
   color: var(--title-foreground-color);
   cursor: pointer;
 }
 
 .breadcrumb-text {
-  @include textEllipsis;
+  @include deprecated.textEllipsis;
   max-width: 12vw; // This is a fallback
   max-width: 12cqw; // This is a unit refered to container
 }
 
 .icon {
-  @include flexCenter;
-  height: $s-16;
-  width: $s-16;
+  @include deprecated.flexCenter;
+  height: deprecated.$s-16;
+  width: deprecated.$s-16;
   svg {
     @extend .button-icon-small;
     transform: rotate(90deg);
@@ -90,17 +90,17 @@
 .dropdown-sitemap {
   @extend .menu-dropdown;
   left: 0;
-  top: calc($s-2 + $s-48);
-  width: $s-272;
-  padding: $s-6;
+  top: calc(deprecated.$s-2 + deprecated.$s-48);
+  width: deprecated.$s-272;
+  padding: deprecated.$s-6;
 }
 
 .dropdown-element {
   @extend .dropdown-element-base;
   .icon-check {
-    @include flexCenter;
+    @include deprecated.flexCenter;
     height: 100%;
-    width: $s-16;
+    width: deprecated.$s-16;
     svg {
       @extend .button-icon-small;
       stroke: var(--icon-foreground);
@@ -112,8 +112,8 @@
 }
 
 .current-frame {
-  @include bodySmallTypography;
-  @include flexRow;
+  @include deprecated.bodySmallTypography;
+  @include deprecated.flexRow;
   flex-grow: 1;
   color: var(--title-foreground-color-hover);
   cursor: pointer;
@@ -123,22 +123,22 @@
 }
 
 .frame-name {
-  @include textEllipsis;
+  @include deprecated.textEllipsis;
   max-width: 17vw; // This is a fallback
   max-width: 17cqw; // This is a unit refered to container
 }
 
 // SECTION BUTTONS
 .mode-zone {
-  @include flexRow;
+  @include deprecated.flexRow;
   height: 100%;
 }
 
 .mode-zone-btn {
   @extend .button-tertiary;
-  @include flexCenter;
-  height: $s-32;
-  width: $s-28;
+  @include deprecated.flexCenter;
+  height: deprecated.$s-32;
+  width: deprecated.$s-28;
   padding: 0;
   svg {
     @extend .button-icon;
@@ -151,11 +151,11 @@
 
 // OPTION AREA
 .options-zone {
-  @include flexRow;
+  @include deprecated.flexRow;
   position: relative;
   justify-content: flex-end;
-  gap: $s-8;
-  z-index: $z-index-10;
+  gap: deprecated.$s-8;
+  z-index: deprecated.$z-index-10;
 }
 
 .view-options {
@@ -167,9 +167,9 @@
 
 .fullscreen-btn {
   @extend .button-tertiary;
-  @include flexCenter;
-  height: $s-32;
-  width: $s-28;
+  @include deprecated.flexCenter;
+  height: deprecated.$s-32;
+  width: deprecated.$s-28;
   svg {
     @extend .button-icon;
     stroke: var(--icon-foreground);
@@ -178,16 +178,16 @@
 
 .share-btn {
   @extend .button-primary;
-  height: $s-32;
-  min-width: $s-72;
-  margin-left: $s-4;
+  height: deprecated.$s-32;
+  min-width: deprecated.$s-72;
+  margin-left: deprecated.$s-4;
 }
 
 .edit-btn {
   @extend .button-tertiary;
-  @include flexCenter;
-  height: $s-32;
-  width: $s-28;
+  @include deprecated.flexCenter;
+  height: deprecated.$s-32;
+  width: deprecated.$s-28;
   svg {
     @extend .button-icon;
     stroke: var(--icon-foreground);
@@ -196,22 +196,22 @@
 
 .go-log-btn {
   @extend .button-tertiary;
-  @include bodySmallTypography;
-  height: $s-32;
-  padding: 0 $s-8;
-  border-radius: $br-8;
+  @include deprecated.bodySmallTypography;
+  height: deprecated.$s-32;
+  padding: 0 deprecated.$s-8;
+  border-radius: deprecated.$br-8;
   color: var(--button-tertiary-foreground-color-rest);
 }
 
 // ZOOM WIDGET
 .zoom-widget {
-  @include buttonStyle;
-  @include flexCenter;
-  height: $s-28;
-  min-width: $s-64;
-  border-radius: $br-8;
+  @include deprecated.buttonStyle;
+  @include deprecated.flexCenter;
+  height: deprecated.$s-28;
+  min-width: deprecated.$s-64;
+  border-radius: deprecated.$br-8;
   .label {
-    @include bodySmallTypography;
+    @include deprecated.bodySmallTypography;
     color: var(--button-tertiary-foreground-color-rest);
   }
 
@@ -229,15 +229,15 @@
 
 .dropdown {
   @extend .menu-dropdown;
-  right: $s-2;
-  top: calc($s-2 + $s-48);
-  width: $s-272;
+  right: deprecated.$s-2;
+  top: calc(deprecated.$s-2 + deprecated.$s-48);
+  width: deprecated.$s-272;
 }
 
 .basic-zoom-bar {
   display: flex;
   justify-content: space-between;
-  padding: $s-6;
+  padding: deprecated.$s-6;
   cursor: auto;
 }
 
@@ -247,13 +247,13 @@
 
 .zoom-btn {
   @extend .button-tertiary;
-  height: $s-28;
-  width: $s-28;
-  border-radius: $br-8;
+  height: deprecated.$s-28;
+  width: deprecated.$s-28;
+  border-radius: deprecated.$br-8;
   .zoom-icon {
-    @include flexCenter;
-    width: $s-24;
-    height: $s-32;
+    @include deprecated.flexCenter;
+    width: deprecated.$s-24;
+    height: deprecated.$s-32;
     svg {
       @extend .button-icon;
       stroke: var(--icon-foreground);
@@ -267,19 +267,19 @@
 }
 
 .zoom-text {
-  @include flexCenter;
+  @include deprecated.flexCenter;
   height: 100%;
-  min-width: $s-64;
+  min-width: deprecated.$s-64;
   padding: 0;
-  margin: 0 $s-2;
+  margin: 0 deprecated.$s-2;
   color: var(--modal-title-foreground-color);
 }
 
 .reset-btn {
   @extend .button-tertiary;
   color: var(--button-tertiary-foreground-color-hover);
-  height: $s-28;
-  border-radius: $br-8;
+  height: deprecated.$s-28;
+  border-radius: deprecated.$br-8;
 }
 
 .zoom-option {
@@ -305,13 +305,13 @@
   content: " ";
   position: absolute;
   width: 100%;
-  height: $s-48;
+  height: deprecated.$s-48;
   left: 0;
-  top: $s-48;
+  top: deprecated.$s-48;
 }
 
 [data-fullscreen="true"] .viewer-header {
-  transform: translateY(-$s-48);
+  transform: translateY(-#{deprecated.$s-48});
 }
 
 [data-force-visible="true"] .viewer-header,
diff --git a/frontend/src/app/main/ui/viewer/inspect.scss b/frontend/src/app/main/ui/viewer/inspect.scss
index 340003ce92..2752ffe4b3 100644
--- a/frontend/src/app/main/ui/viewer/inspect.scss
+++ b/frontend/src/app/main/ui/viewer/inspect.scss
@@ -4,13 +4,13 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@use "common/refactor/common-refactor.scss" as *;
+@use "refactor/common-refactor.scss" as deprecated;
 
-$width-settings-bar: $s-276;
-$width-settings-bar-max: $s-500;
+$width-settings-bar: deprecated.$s-276;
+$width-settings-bar-max: deprecated.$s-500;
 
 .inspect-svg-wrapper {
-  @include flexCenter;
+  @include deprecated.flexCenter;
   position: relative;
   flex-direction: column;
   flex: 1;
@@ -35,7 +35,7 @@ $width-settings-bar-max: $s-500;
   width: $width-settings-bar;
 
   background-color: var(--panel-background-color);
-  border-top: $s-1 solid var(--search-bar-input-border-color);
+  border-top: deprecated.$s-1 solid var(--search-bar-input-border-color);
 }
 
 .not-expand {
@@ -49,8 +49,8 @@ $width-settings-bar-max: $s-500;
 .resize-area {
   position: absolute;
   left: 0;
-  width: $s-8;
+  width: deprecated.$s-8;
   height: 100%;
-  z-index: $z-index-10;
+  z-index: deprecated.$z-index-10;
   cursor: ew-resize;
 }
diff --git a/frontend/src/app/main/ui/viewer/interactions.scss b/frontend/src/app/main/ui/viewer/interactions.scss
index 3cd9751b47..8e7d03cab1 100644
--- a/frontend/src/app/main/ui/viewer/interactions.scss
+++ b/frontend/src/app/main/ui/viewer/interactions.scss
@@ -4,22 +4,22 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@use "common/refactor/common-refactor.scss" as *;
+@use "refactor/common-refactor.scss" as deprecated;
 
 .view-options {
-  @include bodySmallTypography;
+  @include deprecated.bodySmallTypography;
   display: flex;
   align-items: center;
   position: relative;
-  gap: $s-4;
-  height: $s-32;
-  border-radius: $br-8;
+  gap: deprecated.$s-4;
+  height: deprecated.$s-32;
+  border-radius: deprecated.$br-8;
   background-color: var(--input-background-color);
-  padding: $s-8;
+  padding: deprecated.$s-8;
   cursor: pointer;
 }
 .dropdown-title {
-  @include bodySmallTypography;
+  @include deprecated.bodySmallTypography;
   flex-grow: 1;
   color: var(--input-foreground-color-active);
 }
@@ -31,21 +31,21 @@
 
 .dropdown {
   @extend .menu-dropdown;
-  right: $s-2;
-  top: calc($s-2 + $s-48);
-  width: $s-272;
-  padding: $s-6;
-  max-height: calc(100vh - 3 * ($s-2 + $s-48));
+  right: deprecated.$s-2;
+  top: calc(deprecated.$s-2 + deprecated.$s-48);
+  width: deprecated.$s-272;
+  padding: deprecated.$s-6;
+  max-height: calc(100vh - 3 * (deprecated.$s-2 + deprecated.$s-48));
   overflow: auto;
 }
 
 .dropdown-element {
   @extend .dropdown-element-base;
-  min-height: $s-32;
+  min-height: deprecated.$s-32;
   .icon {
-    @include flexCenter;
+    @include deprecated.flexCenter;
     height: 100%;
-    width: $s-16;
+    width: deprecated.$s-16;
     svg {
       @extend .button-icon-small;
       stroke: var(--icon-foreground);
@@ -67,9 +67,9 @@
 
 .icon,
 .icon-dropdown {
-  @include flexCenter;
+  @include deprecated.flexCenter;
   height: 100%;
-  width: $s-16;
+  width: deprecated.$s-16;
   svg {
     @extend .button-icon-small;
     stroke: var(--icon-foreground);
diff --git a/frontend/src/app/main/ui/viewer/thumbnails.scss b/frontend/src/app/main/ui/viewer/thumbnails.scss
index c4de6c4153..c0735ddce1 100644
--- a/frontend/src/app/main/ui/viewer/thumbnails.scss
+++ b/frontend/src/app/main/ui/viewer/thumbnails.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@use "common/refactor/common-refactor.scss" as *;
+@use "refactor/common-refactor.scss" as deprecated;
 
 .viewer-thumbnails {
   background-color: var(--viewer-background-color);
@@ -13,7 +13,7 @@
   overflow: hidden;
   display: flex;
   flex-direction: column;
-  z-index: $z-index-10;
+  z-index: deprecated.$z-index-10;
 }
 
 .expanded {
@@ -28,25 +28,25 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  height: $s-32;
-  margin: $s-24 $s-24 0 $s-24;
+  height: deprecated.$s-32;
+  margin: deprecated.$s-24 deprecated.$s-24 0 deprecated.$s-24;
 }
 
 .counter {
-  @include bodySmallTypography;
+  @include deprecated.bodySmallTypography;
   color: var(--viewer-thumbnails-control-foreground-color);
 }
 
 .actions {
-  @include flexRow;
-  width: $s-60;
+  @include deprecated.flexRow;
+  width: deprecated.$s-60;
 }
 
 .expand-btn,
 .close-btn {
   @extend .button-tertiary;
-  height: $s-32;
-  width: $s-28;
+  height: deprecated.$s-32;
+  width: deprecated.$s-28;
   svg {
     @extend .button-icon;
   }
@@ -58,7 +58,7 @@
 
 .thumbnails-content {
   display: grid;
-  grid-template-columns: $s-40 auto $s-40;
+  grid-template-columns: deprecated.$s-40 auto deprecated.$s-40;
   grid-template-rows: auto;
 }
 
@@ -73,13 +73,13 @@
 .right-scroll-handler,
 .left-scroll-handler {
   @extend .button-tertiary;
-  @include flexCenter;
+  @include deprecated.flexCenter;
   grid-column: 3 / span 1;
   grid-row: 1 / span 1;
-  width: $s-32;
-  height: $s-60;
+  width: deprecated.$s-32;
+  height: deprecated.$s-60;
   margin: auto 0;
-  z-index: $z-index-10;
+  z-index: deprecated.$z-index-10;
   opacity: 0;
   &:hover {
     opacity: 1;
@@ -112,18 +112,18 @@
 }
 
 .thumbnail-item {
-  @include buttonStyle;
+  @include deprecated.buttonStyle;
   display: flex;
   flex-direction: column;
-  padding: $s-16;
+  padding: deprecated.$s-16;
 }
 
 .thumbnail-preview {
-  @include flexCenter;
-  width: $s-132;
-  min-height: $s-132;
-  height: $s-132;
-  padding: $s-4;
+  @include deprecated.flexCenter;
+  width: deprecated.$s-132;
+  min-height: deprecated.$s-132;
+  height: deprecated.$s-132;
+  padding: deprecated.$s-4;
 
   svg {
     width: 100%;
@@ -132,21 +132,21 @@
 
   &.selected {
     background-color: var(--viewer-thumbnail-background-color-selected);
-    border-radius: $br-8;
+    border-radius: deprecated.$br-8;
   }
 
   &:hover {
-    border: $s-1 solid var(--viewer-thumbnail-border-color);
-    border-radius: $br-8;
+    border: deprecated.$s-1 solid var(--viewer-thumbnail-border-color);
+    border-radius: deprecated.$br-8;
   }
 }
 
 .thumbnail-info {
-  @include bodySmallTypography;
-  @include textEllipsis;
+  @include deprecated.bodySmallTypography;
+  @include deprecated.textEllipsis;
   text-align: center;
   color: var(--viewer-thumbnails-control-foreground-color);
-  padding: $s-8 0;
+  padding: deprecated.$s-8 0;
   width: 100%;
-  max-width: $s-132;
+  max-width: deprecated.$s-132;
 }
diff --git a/frontend/src/app/main/ui/workspace/coordinates.scss b/frontend/src/app/main/ui/workspace/coordinates.scss
index 9b8b782bfe..b338144d06 100644
--- a/frontend/src/app/main/ui/workspace/coordinates.scss
+++ b/frontend/src/app/main/ui/workspace/coordinates.scss
@@ -4,17 +4,17 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@use "common/refactor/common-refactor.scss" as *;
+@use "refactor/common-refactor.scss" as deprecated;
 
 $width-settings-bar: 256px;
 
 .container {
   background-color: var(--color-background-primary);
-  border-radius: $br-4;
+  border-radius: deprecated.$br-4;
   bottom: 0px;
-  padding: $s-2 $s-8;
+  padding: deprecated.$s-2 deprecated.$s-8;
   position: fixed;
-  right: calc(#{$width-settings-bar} + #{$s-24});
+  right: calc(#{$width-settings-bar} + #{deprecated.$s-24});
   text-align: center;
   white-space: nowrap;
   transition: bottom 0.5s;
@@ -24,10 +24,10 @@ $width-settings-bar: 256px;
 }
 
 .container-color-palette-open {
-  bottom: $s-64;
+  bottom: deprecated.$s-64;
 }
 
 .coordinate {
   color: var(--color-foreground-primary);
-  font-size: $fs-12;
+  font-size: deprecated.$fs-12;
 }
diff --git a/frontend/src/app/main/ui/workspace/sidebar/debug.scss b/frontend/src/app/main/ui/workspace/sidebar/debug.scss
index ecbb8c0d5d..ce9698a180 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/debug.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/debug.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@use "common/refactor/common-refactor.scss" as *;
+@use "refactor/common-refactor.scss" as deprecated;
 
 .debug-panel {
   display: flex;
@@ -13,17 +13,17 @@
 }
 
 .panel-title {
-  @include flexCenter;
-  @include uppercaseTitleTipography;
+  @include deprecated.flexCenter;
+  @include deprecated.uppercaseTitleTipography;
   position: relative;
-  height: $s-32;
-  min-height: $s-32;
-  margin: $s-8 $s-8 0 $s-8;
-  border-radius: $br-8;
+  height: deprecated.$s-32;
+  min-height: deprecated.$s-32;
+  margin: deprecated.$s-8 deprecated.$s-8 0 deprecated.$s-8;
+  border-radius: deprecated.$br-8;
   background-color: var(--panel-title-background-color);
 
   span {
-    @include flexCenter;
+    @include deprecated.flexCenter;
     flex-grow: 1;
     color: var(--title-foreground-color-hover);
   }
@@ -31,7 +31,7 @@
 
 .checkbox-wrapper {
   @extend .input-checkbox;
-  height: $s-32;
+  height: deprecated.$s-32;
   padding: 0;
 }
 
@@ -41,5 +41,5 @@
 }
 
 .debug-panel-inner {
-  padding: $s-16 $s-8;
+  padding: deprecated.$s-16 deprecated.$s-8;
 }
diff --git a/frontend/src/app/main/ui/workspace/viewport.scss b/frontend/src/app/main/ui/workspace/viewport.scss
index aa6c1789fd..89ebd06403 100644
--- a/frontend/src/app/main/ui/workspace/viewport.scss
+++ b/frontend/src/app/main/ui/workspace/viewport.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@use "common/refactor/common-refactor.scss" as *;
+@use "refactor/common-refactor.scss" as deprecated;
 
 .viewport {
   cursor: none;
@@ -35,5 +35,5 @@
   left: 0;
   bottom: 0;
   right: 0;
-  z-index: $z-index-1;
+  z-index: deprecated.$z-index-1;
 }