diff --git a/apps/dashboard/src/_variables.scss b/apps/dashboard/src/_variables.scss
index a25c17ab5..bb17dd42a 100644
--- a/apps/dashboard/src/_variables.scss
+++ b/apps/dashboard/src/_variables.scss
@@ -1 +1 @@
-@import '../../../libs/sistema/styles/variables';
+@forward '../../../libs/sistema/styles/variables';
diff --git a/apps/dashboard/src/app/account/account-home/account-home.component.scss b/apps/dashboard/src/app/account/account-home/account-home.component.scss
index 60821b1a6..18da6ecd6 100644
--- a/apps/dashboard/src/app/account/account-home/account-home.component.scss
+++ b/apps/dashboard/src/app/account/account-home/account-home.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .account-home {
   max-width: calc(#{rhythm(90)} * 2);
diff --git a/apps/dashboard/src/app/account/account-kbs/kb-list/kb-list.component.scss b/apps/dashboard/src/app/account/account-kbs/kb-list/kb-list.component.scss
index f9f3393f1..6a1667383 100644
--- a/apps/dashboard/src/app/account/account-kbs/kb-list/kb-list.component.scss
+++ b/apps/dashboard/src/app/account/account-kbs/kb-list/kb-list.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .account-kbs {
   h2 {
diff --git a/apps/dashboard/src/app/account/account-kbs/users-dialog/users-dialog.component.scss b/apps/dashboard/src/app/account/account-kbs/users-dialog/users-dialog.component.scss
index a9979bc2d..57a98c3dc 100644
--- a/apps/dashboard/src/app/account/account-kbs/users-dialog/users-dialog.component.scss
+++ b/apps/dashboard/src/app/account/account-kbs/users-dialog/users-dialog.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .users-dialog {
   position: relative;
diff --git a/apps/dashboard/src/app/account/account-manage/account-delete/account-delete.component.scss b/apps/dashboard/src/app/account/account-manage/account-delete/account-delete.component.scss
index a1437513d..cc1056d96 100644
--- a/apps/dashboard/src/app/account/account-manage/account-delete/account-delete.component.scss
+++ b/apps/dashboard/src/app/account/account-manage/account-delete/account-delete.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 label {
   display: block;
diff --git a/apps/dashboard/src/app/account/account-manage/account-manage.component.scss b/apps/dashboard/src/app/account/account-manage/account-manage.component.scss
index d5b23b683..a81f9f3d0 100644
--- a/apps/dashboard/src/app/account/account-manage/account-manage.component.scss
+++ b/apps/dashboard/src/app/account/account-manage/account-manage.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 h1 {
   margin-bottom: rhythm(4);
diff --git a/apps/dashboard/src/app/account/account-nua/account-nua.component.scss b/apps/dashboard/src/app/account/account-nua/account-nua.component.scss
index 6463e1e51..b330cc4bf 100644
--- a/apps/dashboard/src/app/account/account-nua/account-nua.component.scss
+++ b/apps/dashboard/src/app/account/account-nua/account-nua.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 h2 {
   margin: 0 0 rhythm(1) 0;
diff --git a/apps/dashboard/src/app/account/account-nua/client-dialog/client-dialog.component.scss b/apps/dashboard/src/app/account/account-nua/client-dialog/client-dialog.component.scss
index 7b823b8a3..e952f235f 100644
--- a/apps/dashboard/src/app/account/account-nua/client-dialog/client-dialog.component.scss
+++ b/apps/dashboard/src/app/account/account-nua/client-dialog/client-dialog.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .nua-form {
   display: flex;
diff --git a/apps/dashboard/src/app/account/account-nua/nua-activity/nua-activity.component.scss b/apps/dashboard/src/app/account/account-nua/nua-activity/nua-activity.component.scss
index f402d34b8..8ab019936 100644
--- a/apps/dashboard/src/app/account/account-nua/nua-activity/nua-activity.component.scss
+++ b/apps/dashboard/src/app/account/account-nua/nua-activity/nua-activity.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .nua-activity {
   position: relative;
diff --git a/apps/dashboard/src/app/account/account-status/account-status.component.scss b/apps/dashboard/src/app/account/account-status/account-status.component.scss
index 4b019f2ec..696593670 100644
--- a/apps/dashboard/src/app/account/account-status/account-status.component.scss
+++ b/apps/dashboard/src/app/account/account-status/account-status.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .account-status {
   align-items: center;
diff --git a/apps/dashboard/src/app/account/account-users/account-users.component.scss b/apps/dashboard/src/app/account/account-users/account-users.component.scss
index c63bf184e..d4011adb6 100644
--- a/apps/dashboard/src/app/account/account-users/account-users.component.scss
+++ b/apps/dashboard/src/app/account/account-users/account-users.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .account-users {
   h2 {
diff --git a/apps/dashboard/src/app/account/billing/billing.component.scss b/apps/dashboard/src/app/account/billing/billing.component.scss
index 25266f7b3..6b3e53f47 100644
--- a/apps/dashboard/src/app/account/billing/billing.component.scss
+++ b/apps/dashboard/src/app/account/billing/billing.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .billing {
   background-color: $color-neutral-lightest;
diff --git a/apps/dashboard/src/app/account/billing/checkout/checkout.component.scss b/apps/dashboard/src/app/account/billing/checkout/checkout.component.scss
index 4085178dc..dd23ea8ba 100644
--- a/apps/dashboard/src/app/account/billing/checkout/checkout.component.scss
+++ b/apps/dashboard/src/app/account/billing/checkout/checkout.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .checkout {
   display: flex;
diff --git a/apps/dashboard/src/app/account/billing/history/history.component.scss b/apps/dashboard/src/app/account/billing/history/history.component.scss
index a181b7fa8..27e148780 100644
--- a/apps/dashboard/src/app/account/billing/history/history.component.scss
+++ b/apps/dashboard/src/app/account/billing/history/history.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .history {
   max-width: calc(rhythm(90) + rhythm(24));
diff --git a/apps/dashboard/src/app/account/billing/my-subscription/my-subscription.component.scss b/apps/dashboard/src/app/account/billing/my-subscription/my-subscription.component.scss
index 958b11428..014f75092 100644
--- a/apps/dashboard/src/app/account/billing/my-subscription/my-subscription.component.scss
+++ b/apps/dashboard/src/app/account/billing/my-subscription/my-subscription.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .my-subscription {
   display: flex;
diff --git a/apps/dashboard/src/app/account/billing/my-subscription/unsubscribe.component.scss b/apps/dashboard/src/app/account/billing/my-subscription/unsubscribe.component.scss
index 238f5b468..e363955c6 100644
--- a/apps/dashboard/src/app/account/billing/my-subscription/unsubscribe.component.scss
+++ b/apps/dashboard/src/app/account/billing/my-subscription/unsubscribe.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 h2 {
   margin: 0;
diff --git a/apps/dashboard/src/app/account/billing/review/review.component.scss b/apps/dashboard/src/app/account/billing/review/review.component.scss
index 42ec886c5..2e924c890 100644
--- a/apps/dashboard/src/app/account/billing/review/review.component.scss
+++ b/apps/dashboard/src/app/account/billing/review/review.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 pa-modal-content {
   display: flex;
diff --git a/apps/dashboard/src/app/account/billing/subscriptions/aws-subscription/aws-subscription.component.scss b/apps/dashboard/src/app/account/billing/subscriptions/aws-subscription/aws-subscription.component.scss
index 63f5b811d..ed232bff9 100644
--- a/apps/dashboard/src/app/account/billing/subscriptions/aws-subscription/aws-subscription.component.scss
+++ b/apps/dashboard/src/app/account/billing/subscriptions/aws-subscription/aws-subscription.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 h2 {
   margin: 0 0 rhythm(1);
diff --git a/apps/dashboard/src/app/account/billing/subscriptions/manual-subscription/manual-subscription.component.scss b/apps/dashboard/src/app/account/billing/subscriptions/manual-subscription/manual-subscription.component.scss
index 87ab4618e..3942996d9 100644
--- a/apps/dashboard/src/app/account/billing/subscriptions/manual-subscription/manual-subscription.component.scss
+++ b/apps/dashboard/src/app/account/billing/subscriptions/manual-subscription/manual-subscription.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .manual-subscription {
   display: flex;
diff --git a/apps/dashboard/src/app/account/billing/subscriptions/subscriptions.component.scss b/apps/dashboard/src/app/account/billing/subscriptions/subscriptions.component.scss
index 94649a4bf..9f2e216c6 100644
--- a/apps/dashboard/src/app/account/billing/subscriptions/subscriptions.component.scss
+++ b/apps/dashboard/src/app/account/billing/subscriptions/subscriptions.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .header {
   margin-bottom: rhythm(5);
@@ -61,7 +61,7 @@ h2 {
     }
   }
 
-  pa-icon[name="check"] {
+  pa-icon[name='check'] {
     color: $color-primary-regular;
   }
 
diff --git a/apps/dashboard/src/app/account/billing/usage/budget.component.scss b/apps/dashboard/src/app/account/billing/usage/budget.component.scss
index 74613b26a..6742b2425 100644
--- a/apps/dashboard/src/app/account/billing/usage/budget.component.scss
+++ b/apps/dashboard/src/app/account/billing/usage/budget.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 .budget-input {
   align-items: center;
   color: $color-neutral-regular;
diff --git a/apps/dashboard/src/app/account/billing/usage/usage-table.component.scss b/apps/dashboard/src/app/account/billing/usage/usage-table.component.scss
index 954593da9..f9095a5e7 100644
--- a/apps/dashboard/src/app/account/billing/usage/usage-table.component.scss
+++ b/apps/dashboard/src/app/account/billing/usage/usage-table.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 header {
   display: flex;
diff --git a/apps/dashboard/src/app/account/billing/usage/usage.component.scss b/apps/dashboard/src/app/account/billing/usage/usage.component.scss
index aa17d6788..4863a3cb1 100644
--- a/apps/dashboard/src/app/account/billing/usage/usage.component.scss
+++ b/apps/dashboard/src/app/account/billing/usage/usage.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .usage-container {
   max-width: calc(rhythm(90) + rhythm(6));
diff --git a/apps/dashboard/src/app/account/invite-collaborators-modal/invite-collaborators-modal.component.scss b/apps/dashboard/src/app/account/invite-collaborators-modal/invite-collaborators-modal.component.scss
index 23c9cd5ae..c75bca4c3 100644
--- a/apps/dashboard/src/app/account/invite-collaborators-modal/invite-collaborators-modal.component.scss
+++ b/apps/dashboard/src/app/account/invite-collaborators-modal/invite-collaborators-modal.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .radio-content {
   margin-left: rhythm(2);
diff --git a/apps/dashboard/src/app/account/nuclia-tokens/nuclia-tokens.component.scss b/apps/dashboard/src/app/account/nuclia-tokens/nuclia-tokens.component.scss
index c102473f5..205abac53 100644
--- a/apps/dashboard/src/app/account/nuclia-tokens/nuclia-tokens.component.scss
+++ b/apps/dashboard/src/app/account/nuclia-tokens/nuclia-tokens.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .total {
   margin-bottom: rhythm(4);
@@ -38,4 +38,4 @@
 .unit {
   color: $color-neutral-regular;
   font-weight: $font-weight-regular;
-}
\ No newline at end of file
+}
diff --git a/apps/dashboard/src/app/activity/activity-download.component.scss b/apps/dashboard/src/app/activity/activity-download.component.scss
index b1f17e831..a72e4514d 100644
--- a/apps/dashboard/src/app/activity/activity-download.component.scss
+++ b/apps/dashboard/src/app/activity/activity-download.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .primary-tabs {
   display: block;
diff --git a/apps/dashboard/src/app/app.component.scss b/apps/dashboard/src/app/app.component.scss
index ac90b10a3..98cd785a8 100644
--- a/apps/dashboard/src/app/app.component.scss
+++ b/apps/dashboard/src/app/app.component.scss
@@ -1,11 +1,11 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables';
 
 .version {
   position: fixed;
   bottom: 0;
   right: 0;
-  font-weight: $font-weight-thin;
-  color: $color-neutral-regular;
+  font-weight: variables.$font-weight-thin;
+  color: variables.$color-neutral-regular;
   background-color: transparent;
   font-size: font-size(xxs);
   padding-right: rhythm(0.5);
diff --git a/apps/dashboard/src/app/farewell/farewell.component.scss b/apps/dashboard/src/app/farewell/farewell.component.scss
index 12739eeae..851629095 100644
--- a/apps/dashboard/src/app/farewell/farewell.component.scss
+++ b/apps/dashboard/src/app/farewell/farewell.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .message {
   padding-bottom: rhythm(32);
diff --git a/apps/dashboard/src/app/farewell/feedback.component.scss b/apps/dashboard/src/app/farewell/feedback.component.scss
index b4fb9f521..6fe0238d5 100644
--- a/apps/dashboard/src/app/farewell/feedback.component.scss
+++ b/apps/dashboard/src/app/farewell/feedback.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .message {
   display: flex;
diff --git a/apps/dashboard/src/app/knowledge-box/knowledge-box-home/kb-usage/usage-modal.component.scss b/apps/dashboard/src/app/knowledge-box/knowledge-box-home/kb-usage/usage-modal.component.scss
index a14e91a43..5f6c3ef6b 100644
--- a/apps/dashboard/src/app/knowledge-box/knowledge-box-home/kb-usage/usage-modal.component.scss
+++ b/apps/dashboard/src/app/knowledge-box/knowledge-box-home/kb-usage/usage-modal.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .usage-modal-chart-container {
   margin-left: calc(-1 * #{rhythm(2)});
diff --git a/apps/dashboard/src/app/knowledge-box/knowledge-box-home/knowledge-box-home.component.scss b/apps/dashboard/src/app/knowledge-box/knowledge-box-home/knowledge-box-home.component.scss
index b48083a09..df4a83b7e 100644
--- a/apps/dashboard/src/app/knowledge-box/knowledge-box-home/knowledge-box-home.component.scss
+++ b/apps/dashboard/src/app/knowledge-box/knowledge-box-home/knowledge-box-home.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .knowledge-box-home {
   --width-small-column: #{rhythm(48)};
diff --git a/apps/dashboard/src/app/knowledge-box/knowledge-box-keys/knowledge-box-keys.component.scss b/apps/dashboard/src/app/knowledge-box/knowledge-box-keys/knowledge-box-keys.component.scss
index 824bd1ec4..4c0b50ac8 100644
--- a/apps/dashboard/src/app/knowledge-box/knowledge-box-keys/knowledge-box-keys.component.scss
+++ b/apps/dashboard/src/app/knowledge-box/knowledge-box-keys/knowledge-box-keys.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .knowledge-box-keys {
   h2 {
diff --git a/apps/dashboard/src/app/knowledge-box/knowledge-box-users/knowledge-box-users.component.scss b/apps/dashboard/src/app/knowledge-box/knowledge-box-users/knowledge-box-users.component.scss
index c2d82fa3e..808085a2e 100644
--- a/apps/dashboard/src/app/knowledge-box/knowledge-box-users/knowledge-box-users.component.scss
+++ b/apps/dashboard/src/app/knowledge-box/knowledge-box-users/knowledge-box-users.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 h2 {
   margin-bottom: rhythm(6);
diff --git a/apps/dashboard/src/app/knowledge-box/knowledge-box-users/users-manage/users-manage.component.scss b/apps/dashboard/src/app/knowledge-box/knowledge-box-users/users-manage/users-manage.component.scss
index 82ae4ba36..f8cf900cc 100644
--- a/apps/dashboard/src/app/knowledge-box/knowledge-box-users/users-manage/users-manage.component.scss
+++ b/apps/dashboard/src/app/knowledge-box/knowledge-box-users/users-manage/users-manage.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 h3 {
   margin-bottom: rhythm(2);
diff --git a/apps/dashboard/src/app/knowledge-box/service-access/service-access.component.scss b/apps/dashboard/src/app/knowledge-box/service-access/service-access.component.scss
index a0e2b0b09..8ed6db7a2 100644
--- a/apps/dashboard/src/app/knowledge-box/service-access/service-access.component.scss
+++ b/apps/dashboard/src/app/knowledge-box/service-access/service-access.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .service-access-container {
   h4 {
diff --git a/apps/dashboard/src/app/onboarding/aws-onboarding/aws-onboarding.component.scss b/apps/dashboard/src/app/onboarding/aws-onboarding/aws-onboarding.component.scss
index 2fb10b8ff..acca21594 100644
--- a/apps/dashboard/src/app/onboarding/aws-onboarding/aws-onboarding.component.scss
+++ b/apps/dashboard/src/app/onboarding/aws-onboarding/aws-onboarding.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .main-container {
   display: flex;
diff --git a/apps/dashboard/src/app/onboarding/getting-started/getting-started.component.scss b/apps/dashboard/src/app/onboarding/getting-started/getting-started.component.scss
index 9fa0b478b..54e7a29b5 100644
--- a/apps/dashboard/src/app/onboarding/getting-started/getting-started.component.scss
+++ b/apps/dashboard/src/app/onboarding/getting-started/getting-started.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .step-indicator-container {
   align-items: center;
diff --git a/apps/dashboard/src/app/onboarding/getting-started/processing/processing.component.scss b/apps/dashboard/src/app/onboarding/getting-started/processing/processing.component.scss
index ec3e3397a..92d65587c 100644
--- a/apps/dashboard/src/app/onboarding/getting-started/processing/processing.component.scss
+++ b/apps/dashboard/src/app/onboarding/getting-started/processing/processing.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .main-container {
   display: flex;
diff --git a/apps/dashboard/src/app/onboarding/getting-started/upload-list/upload-list.component.scss b/apps/dashboard/src/app/onboarding/getting-started/upload-list/upload-list.component.scss
index 719117771..a32dff6b9 100644
--- a/apps/dashboard/src/app/onboarding/getting-started/upload-list/upload-list.component.scss
+++ b/apps/dashboard/src/app/onboarding/getting-started/upload-list/upload-list.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .upload-list-container {
   .upload-list {
diff --git a/apps/dashboard/src/app/onboarding/getting-started/upload/upload.component.scss b/apps/dashboard/src/app/onboarding/getting-started/upload/upload.component.scss
index d60352051..1cad2392b 100644
--- a/apps/dashboard/src/app/onboarding/getting-started/upload/upload.component.scss
+++ b/apps/dashboard/src/app/onboarding/getting-started/upload/upload.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .main-container {
   display: flex;
diff --git a/apps/dashboard/src/app/onboarding/invite/invite.component.scss b/apps/dashboard/src/app/onboarding/invite/invite.component.scss
index 9ffdab675..de00f5f19 100644
--- a/apps/dashboard/src/app/onboarding/invite/invite.component.scss
+++ b/apps/dashboard/src/app/onboarding/invite/invite.component.scss
@@ -1,4 +1,4 @@
-@import '../../../variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .setup-invite {
   display: flex;
diff --git a/apps/dashboard/src/app/onboarding/welcome-in-existing-kb/welcome-in-existing-kb.component.scss b/apps/dashboard/src/app/onboarding/welcome-in-existing-kb/welcome-in-existing-kb.component.scss
index 000d48d7f..50a2a07b6 100644
--- a/apps/dashboard/src/app/onboarding/welcome-in-existing-kb/welcome-in-existing-kb.component.scss
+++ b/apps/dashboard/src/app/onboarding/welcome-in-existing-kb/welcome-in-existing-kb.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 pa-modal-content .start {
   margin-top: rhythm(4);
diff --git a/apps/dashboard/src/app/redirect/redirect.component.scss b/apps/dashboard/src/app/redirect/redirect.component.scss
index 2c1e6f287..a9def00f6 100644
--- a/apps/dashboard/src/app/redirect/redirect.component.scss
+++ b/apps/dashboard/src/app/redirect/redirect.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 :host {
   display: block;
diff --git a/apps/dashboard/src/app/synonyms/synonyms.component.scss b/apps/dashboard/src/app/synonyms/synonyms.component.scss
index 52ea75b34..8cc857d8d 100644
--- a/apps/dashboard/src/app/synonyms/synonyms.component.scss
+++ b/apps/dashboard/src/app/synonyms/synonyms.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 :host {
   display: block;
diff --git a/apps/dashboard/src/app/test-page/test-page.component.scss b/apps/dashboard/src/app/test-page/test-page.component.scss
index 847c13f20..68c7a8515 100644
--- a/apps/dashboard/src/app/test-page/test-page.component.scss
+++ b/apps/dashboard/src/app/test-page/test-page.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .topbar {
   background-color: $color-light-stronger;
diff --git a/apps/dashboard/src/styles.scss b/apps/dashboard/src/styles.scss
index ef99479b2..049642c2d 100644
--- a/apps/dashboard/src/styles.scss
+++ b/apps/dashboard/src/styles.scss
@@ -1,6 +1,6 @@
-@import 'libs/sistema/theme/fonts';
-@import 'libs/pastanaga-angular/projects/pastanaga-angular/src/styles/core';
-@import 'libs/sistema/styles/apps-common';
+@use 'libs/sistema/theme/fonts';
+@use 'libs/pastanaga-angular/projects/pastanaga-angular/src/styles/core';
+@use 'libs/sistema/styles/apps-common';
 
 :root {
   --app-background-color: $color-light-stronger;
diff --git a/apps/manager-v2/src/app/app-layout/app-layout.component.scss b/apps/manager-v2/src/app/app-layout/app-layout.component.scss
index 506685c56..07722dfb8 100644
--- a/apps/manager-v2/src/app/app-layout/app-layout.component.scss
+++ b/apps/manager-v2/src/app/app-layout/app-layout.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/manager-v2/src/variables';
+@use 'apps/manager-v2/src/variables' as *;
 
 header {
   align-items: center;
diff --git a/apps/manager-v2/src/app/app.component.scss b/apps/manager-v2/src/app/app.component.scss
index 7c3f663e2..fe95bf723 100644
--- a/apps/manager-v2/src/app/app.component.scss
+++ b/apps/manager-v2/src/app/app.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/manager-v2/src/variables';
+@use 'apps/manager-v2/src/variables' as *;
 
 .version {
   position: fixed;
diff --git a/apps/manager-v2/src/app/manage-accounts/account-details/account-details.component.scss b/apps/manager-v2/src/app/manage-accounts/account-details/account-details.component.scss
index 4a2b33854..6b3e18fd7 100644
--- a/apps/manager-v2/src/app/manage-accounts/account-details/account-details.component.scss
+++ b/apps/manager-v2/src/app/manage-accounts/account-details/account-details.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/manager-v2/src/variables';
+@use 'apps/manager-v2/src/variables' as *;
 
 .account-info {
   background: $color-neutral-lightest;
diff --git a/apps/manager-v2/src/app/manage-accounts/account-details/blocked-features/blocked-features.component.scss b/apps/manager-v2/src/app/manage-accounts/account-details/blocked-features/blocked-features.component.scss
index 4dd649516..837d45685 100644
--- a/apps/manager-v2/src/app/manage-accounts/account-details/blocked-features/blocked-features.component.scss
+++ b/apps/manager-v2/src/app/manage-accounts/account-details/blocked-features/blocked-features.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/manager-v2/src/variables';
+@use 'apps/manager-v2/src/variables' as *;
 
 :host {
   form {
diff --git a/apps/manager-v2/src/app/manage-accounts/account-details/configuration/configuration.component.scss b/apps/manager-v2/src/app/manage-accounts/account-details/configuration/configuration.component.scss
index 316e9ed80..1ba7e82e0 100644
--- a/apps/manager-v2/src/app/manage-accounts/account-details/configuration/configuration.component.scss
+++ b/apps/manager-v2/src/app/manage-accounts/account-details/configuration/configuration.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/manager-v2/src/variables';
+@use 'apps/manager-v2/src/variables' as *;
 
 form {
   gap: rhythm(3);
diff --git a/apps/manager-v2/src/app/manage-accounts/account-details/kb-details/kb-details.component.scss b/apps/manager-v2/src/app/manage-accounts/account-details/kb-details/kb-details.component.scss
index 25186499c..2070e6849 100644
--- a/apps/manager-v2/src/app/manage-accounts/account-details/kb-details/kb-details.component.scss
+++ b/apps/manager-v2/src/app/manage-accounts/account-details/kb-details/kb-details.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/manager-v2/src/variables';
+@use 'apps/manager-v2/src/variables' as *;
 
 :host {
   form {
diff --git a/apps/manager-v2/src/app/manage-accounts/account-details/knowledge-boxes/knowledge-boxes.component.scss b/apps/manager-v2/src/app/manage-accounts/account-details/knowledge-boxes/knowledge-boxes.component.scss
index ddaa131aa..8873c6c26 100644
--- a/apps/manager-v2/src/app/manage-accounts/account-details/knowledge-boxes/knowledge-boxes.component.scss
+++ b/apps/manager-v2/src/app/manage-accounts/account-details/knowledge-boxes/knowledge-boxes.component.scss
@@ -1,4 +1,4 @@
-@import 'variables';
+@use 'apps/manager-v2/src/variables' as *;
 
 .space-between {
   align-items: center;
diff --git a/apps/manager-v2/src/app/manage-accounts/account-details/limits/limits.component.scss b/apps/manager-v2/src/app/manage-accounts/account-details/limits/limits.component.scss
index 2c6e236ab..f91c97456 100644
--- a/apps/manager-v2/src/app/manage-accounts/account-details/limits/limits.component.scss
+++ b/apps/manager-v2/src/app/manage-accounts/account-details/limits/limits.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/manager-v2/src/variables';
+@use 'apps/manager-v2/src/variables' as *;
 
 .limit-form {
   position: relative;
diff --git a/apps/manager-v2/src/app/manage-accounts/account-details/payment-links/payment-links.component.scss b/apps/manager-v2/src/app/manage-accounts/account-details/payment-links/payment-links.component.scss
index 5c87b2221..72fa13ebd 100644
--- a/apps/manager-v2/src/app/manage-accounts/account-details/payment-links/payment-links.component.scss
+++ b/apps/manager-v2/src/app/manage-accounts/account-details/payment-links/payment-links.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/manager-v2/src/variables';
+@use 'apps/manager-v2/src/variables' as *;
 
 form {
   display: flex;
diff --git a/apps/manager-v2/src/app/manage-accounts/account-details/token-consumption/token-consumption.component.scss b/apps/manager-v2/src/app/manage-accounts/account-details/token-consumption/token-consumption.component.scss
index 431253db7..c8a5be354 100644
--- a/apps/manager-v2/src/app/manage-accounts/account-details/token-consumption/token-consumption.component.scss
+++ b/apps/manager-v2/src/app/manage-accounts/account-details/token-consumption/token-consumption.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/manager-v2/src/variables';
+@use 'apps/manager-v2/src/variables' as *;
 
 :host {
   display: flex;
diff --git a/apps/manager-v2/src/app/manage-accounts/account-details/users/users.component.scss b/apps/manager-v2/src/app/manage-accounts/account-details/users/users.component.scss
index b650a0de6..c361d3ca0 100644
--- a/apps/manager-v2/src/app/manage-accounts/account-details/users/users.component.scss
+++ b/apps/manager-v2/src/app/manage-accounts/account-details/users/users.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/manager-v2/src/variables';
+@use 'apps/manager-v2/src/variables' as *;
 
 :host {
   .manager-container {
diff --git a/apps/manager-v2/src/styles.scss b/apps/manager-v2/src/styles.scss
index 479b87e07..b9f3d1b8b 100644
--- a/apps/manager-v2/src/styles.scss
+++ b/apps/manager-v2/src/styles.scss
@@ -1,7 +1,7 @@
+@use 'apps/manager-v2/src/variables' as *;
 @import 'libs/sistema/theme/fonts';
 @import 'libs/pastanaga-angular/projects/pastanaga-angular/src/styles/core';
 @import 'libs/sistema/styles/apps-common';
-@import 'variables';
 
 :root {
   --app-background-color: $color-light-stronger;
diff --git a/apps/nucliadb-admin/src/app/app.component.scss b/apps/nucliadb-admin/src/app/app.component.scss
index 58f352260..e5c3326c9 100644
--- a/apps/nucliadb-admin/src/app/app.component.scss
+++ b/apps/nucliadb-admin/src/app/app.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/nucliadb-admin/src/variables';
+@use 'apps/nucliadb-admin/src/variables' as *;
 
 .version {
   position: fixed;
diff --git a/apps/nucliadb-admin/src/app/home/home-page.component.scss b/apps/nucliadb-admin/src/app/home/home-page.component.scss
index ca2b855b3..90194cd2b 100644
--- a/apps/nucliadb-admin/src/app/home/home-page.component.scss
+++ b/apps/nucliadb-admin/src/app/home/home-page.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/nucliadb-admin/src/variables';
+@use 'apps/nucliadb-admin/src/variables' as *;
 
 .home-page {
   display: flex;
diff --git a/apps/sistema-demo/src/_variables.scss b/apps/sistema-demo/src/_variables.scss
index 1bef0b7e0..a2038223a 100644
--- a/apps/sistema-demo/src/_variables.scss
+++ b/apps/sistema-demo/src/_variables.scss
@@ -1 +1 @@
-@import '../../../libs/pastanaga-angular/projects/pastanaga-angular/src/styles/variables';
+@forward '../../../libs/pastanaga-angular/projects/pastanaga-angular/src/styles/variables';
diff --git a/apps/sistema-demo/src/app/sistema-pages/pastanaga-pages-override/sistema-modal/modal-example/modal-example.component.scss b/apps/sistema-demo/src/app/sistema-pages/pastanaga-pages-override/sistema-modal/modal-example/modal-example.component.scss
index bc5a03494..9771176bb 100644
--- a/apps/sistema-demo/src/app/sistema-pages/pastanaga-pages-override/sistema-modal/modal-example/modal-example.component.scss
+++ b/apps/sistema-demo/src/app/sistema-pages/pastanaga-pages-override/sistema-modal/modal-example/modal-example.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../../variables';
+@use 'apps/sistema-demo/src/variables' as *;
 
 .form-container {
   display: flex;
diff --git a/apps/sistema-demo/src/app/sistema-pages/pastanaga-pages-override/sistema-modal/sistema-modal.component.scss b/apps/sistema-demo/src/app/sistema-pages/pastanaga-pages-override/sistema-modal/sistema-modal.component.scss
index 825b3e83b..cdaed8b2e 100644
--- a/apps/sistema-demo/src/app/sistema-pages/pastanaga-pages-override/sistema-modal/sistema-modal.component.scss
+++ b/apps/sistema-demo/src/app/sistema-pages/pastanaga-pages-override/sistema-modal/sistema-modal.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../variables';
+@use 'apps/sistema-demo/src/variables' as *;
 
 .open-modal-button {
   margin-bottom: rhythm(1);
diff --git a/apps/sistema-demo/src/app/sistema-pages/pastanaga-pages-override/sistema-palette/sistema-palette.component.scss b/apps/sistema-demo/src/app/sistema-pages/pastanaga-pages-override/sistema-palette/sistema-palette.component.scss
index 4072da41c..5a7af0bbc 100644
--- a/apps/sistema-demo/src/app/sistema-pages/pastanaga-pages-override/sistema-palette/sistema-palette.component.scss
+++ b/apps/sistema-demo/src/app/sistema-pages/pastanaga-pages-override/sistema-palette/sistema-palette.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../variables';
+@use 'apps/sistema-demo/src/variables' as *;
 
 .color-success-stronger {
   background-color: $color-success-stronger;
diff --git a/apps/sistema-demo/src/app/sistema-pages/pastanaga-pages-override/sistema-scrollbar/sistema-scrollbar.component.scss b/apps/sistema-demo/src/app/sistema-pages/pastanaga-pages-override/sistema-scrollbar/sistema-scrollbar.component.scss
index e96828d9a..6f0ed2211 100644
--- a/apps/sistema-demo/src/app/sistema-pages/pastanaga-pages-override/sistema-scrollbar/sistema-scrollbar.component.scss
+++ b/apps/sistema-demo/src/app/sistema-pages/pastanaga-pages-override/sistema-scrollbar/sistema-scrollbar.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../variables';
+@use 'apps/sistema-demo/src/variables' as *;
 
 .pa-scrollable {
   padding: 0 rhythm(3);
diff --git a/apps/sistema-demo/src/app/sistema-pages/sistema-badge/sistema-badge.component.scss b/apps/sistema-demo/src/app/sistema-pages/sistema-badge/sistema-badge.component.scss
index fe8f85232..32ac6d66a 100644
--- a/apps/sistema-demo/src/app/sistema-pages/sistema-badge/sistema-badge.component.scss
+++ b/apps/sistema-demo/src/app/sistema-pages/sistema-badge/sistema-badge.component.scss
@@ -1,4 +1,4 @@
-@import 'variables';
+@use 'apps/sistema-demo/src/variables' as *;
 
 .flex-container {
   display: flex;
diff --git a/apps/sistema-demo/src/app/sistema-pages/sistema-dropdown-button/sistema-dropdown-button.component.scss b/apps/sistema-demo/src/app/sistema-pages/sistema-dropdown-button/sistema-dropdown-button.component.scss
index 36e2b4c5c..415df29b8 100644
--- a/apps/sistema-demo/src/app/sistema-pages/sistema-dropdown-button/sistema-dropdown-button.component.scss
+++ b/apps/sistema-demo/src/app/sistema-pages/sistema-dropdown-button/sistema-dropdown-button.component.scss
@@ -1,4 +1,4 @@
-@import 'variables';
+@use 'apps/sistema-demo/src/variables' as *;
 
 .dropdown-container {
   display: flex;
diff --git a/apps/sistema-demo/src/app/sistema-pages/sistema-password-input/sistema-password-input.component.scss b/apps/sistema-demo/src/app/sistema-pages/sistema-password-input/sistema-password-input.component.scss
index 991f92be6..91bc57872 100644
--- a/apps/sistema-demo/src/app/sistema-pages/sistema-password-input/sistema-password-input.component.scss
+++ b/apps/sistema-demo/src/app/sistema-pages/sistema-password-input/sistema-password-input.component.scss
@@ -1,4 +1,4 @@
-@import 'variables';
+@use 'apps/sistema-demo/src/variables' as *;
 
 .options {
   margin-top: rhythm(4);
diff --git a/apps/sistema-demo/src/pastanaga-component-overrides.scss b/apps/sistema-demo/src/pastanaga-component-overrides.scss
index 62b88b9cf..580cc0981 100644
--- a/apps/sistema-demo/src/pastanaga-component-overrides.scss
+++ b/apps/sistema-demo/src/pastanaga-component-overrides.scss
@@ -1 +1 @@
-@import '../../../libs/sistema/theme/pastanaga-component-overrides';
+@forward '../../../libs/sistema/theme/pastanaga-component-overrides';
diff --git a/apps/sistema-demo/src/pastanaga-core-overrides.scss b/apps/sistema-demo/src/pastanaga-core-overrides.scss
index 8f2ed1ed5..e99e6aa68 100644
--- a/apps/sistema-demo/src/pastanaga-core-overrides.scss
+++ b/apps/sistema-demo/src/pastanaga-core-overrides.scss
@@ -1 +1 @@
-@import '../../../libs/sistema/theme/pastanaga-core-overrides';
+@forward '../../../libs/sistema/theme/pastanaga-core-overrides';
diff --git a/apps/sistema-demo/src/styles.scss b/apps/sistema-demo/src/styles.scss
index 98a349e57..2fec119bd 100644
--- a/apps/sistema-demo/src/styles.scss
+++ b/apps/sistema-demo/src/styles.scss
@@ -1,7 +1,8 @@
-@import '../../../libs/sistema/theme/fonts';
-@import '../../../libs/pastanaga-angular/projects/pastanaga-angular/src/styles/core';
-@import '../../../libs/pastanaga-angular/projects/pastanaga-angular/src/styles/grid';
-@import 'libs/sistema/styles/apps-common';
+@use '../../../libs/sistema/theme/fonts';
+@use '../../../libs/pastanaga-angular/projects/pastanaga-angular/src/styles/core';
+@use 'apps/sistema-demo/src/variables' as *;
+@use '../../../libs/pastanaga-angular/projects/pastanaga-angular/src/styles/grid';
+@use 'libs/sistema/styles/apps-common';
 
 .form-field-config {
   .state-option {
diff --git a/libs/common/src/lib/ai-models/ai-models.component.scss b/libs/common/src/lib/ai-models/ai-models.component.scss
index f78c52df2..a26e87a23 100644
--- a/libs/common/src/lib/ai-models/ai-models.component.scss
+++ b/libs/common/src/lib/ai-models/ai-models.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .ai-models {
   display: flex;
diff --git a/libs/common/src/lib/base/dashboard-layout/dashboard-layout.component.scss b/libs/common/src/lib/base/dashboard-layout/dashboard-layout.component.scss
index 8a147ac53..a6c8c9b31 100644
--- a/libs/common/src/lib/base/dashboard-layout/dashboard-layout.component.scss
+++ b/libs/common/src/lib/base/dashboard-layout/dashboard-layout.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 $height-status-bar: rhythm(9);
 
diff --git a/libs/common/src/lib/charts/_charts-common.scss b/libs/common/src/lib/charts/_charts-common.scss
index 8024caafa..65fc75cc5 100644
--- a/libs/common/src/lib/charts/_charts-common.scss
+++ b/libs/common/src/lib/charts/_charts-common.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 $chart-line-color: $color-neutral-light;
 $chart-font-size: font-size(xs);
diff --git a/libs/common/src/lib/charts/bar-chart/bar-chart.component.scss b/libs/common/src/lib/charts/bar-chart/bar-chart.component.scss
index 497898267..d219282d8 100644
--- a/libs/common/src/lib/charts/bar-chart/bar-chart.component.scss
+++ b/libs/common/src/lib/charts/bar-chart/bar-chart.component.scss
@@ -1,7 +1,8 @@
-@import '../charts-common';
+@use '../charts-common' as charts;
+@use 'apps/dashboard/src/variables' as *;
 
 .bar-chart {
-  @include chart();
+  @include charts.chart();
 
   .bar {
     fill: $color-primary-regular;
diff --git a/libs/common/src/lib/charts/bar-chart/grouped-bar-chart.component.scss b/libs/common/src/lib/charts/bar-chart/grouped-bar-chart.component.scss
index 8efb2d060..a437072ed 100644
--- a/libs/common/src/lib/charts/bar-chart/grouped-bar-chart.component.scss
+++ b/libs/common/src/lib/charts/bar-chart/grouped-bar-chart.component.scss
@@ -1,5 +1,5 @@
-@import '../charts-common';
+@use '../charts-common' as charts;
 
 .range-chart {
-  @include chart();
+  @include charts.chart();
 }
diff --git a/libs/common/src/lib/charts/line-chart/line-chart.component.scss b/libs/common/src/lib/charts/line-chart/line-chart.component.scss
index c5cd67978..09863e407 100644
--- a/libs/common/src/lib/charts/line-chart/line-chart.component.scss
+++ b/libs/common/src/lib/charts/line-chart/line-chart.component.scss
@@ -1,7 +1,8 @@
-@import '../charts-common';
+@use '../charts-common' as charts;
+@use 'apps/dashboard/src/variables' as *;
 
 .line-chart {
-  @include chart();
+  @include charts.chart();
 
   .data-line {
     stroke: $color-primary-regular;
diff --git a/libs/common/src/lib/charts/range-chart/range-chart.component.scss b/libs/common/src/lib/charts/range-chart/range-chart.component.scss
index 55b3830fb..9e565d71a 100644
--- a/libs/common/src/lib/charts/range-chart/range-chart.component.scss
+++ b/libs/common/src/lib/charts/range-chart/range-chart.component.scss
@@ -1,11 +1,12 @@
-@import '../charts-common';
+@use '../charts-common' as charts;
+@use 'apps/dashboard/src/variables' as *;
 
 .range-chart {
-  @include chart();
+  @include charts.chart();
 
   .domain,
   .tick line {
-    stroke: $chart-line-color;
+    stroke: charts.$chart-line-color;
   }
 
   .range-point {
diff --git a/libs/common/src/lib/charts/range-chart/range-evolution-chart.component.scss b/libs/common/src/lib/charts/range-chart/range-evolution-chart.component.scss
index 3fd625e02..03d05970a 100644
--- a/libs/common/src/lib/charts/range-chart/range-evolution-chart.component.scss
+++ b/libs/common/src/lib/charts/range-chart/range-evolution-chart.component.scss
@@ -1,7 +1,8 @@
-@import '../charts-common';
+@use '../charts-common' as charts;
+@use 'apps/dashboard/src/variables' as *;
 
 .range-chart {
-  @include chart();
+  @include charts.chart();
 
   .range-area {
     fill: $color-primary-lightest;
diff --git a/libs/common/src/lib/entities/entities.component.scss b/libs/common/src/lib/entities/entities.component.scss
index 5ca6af726..5e7c32cca 100644
--- a/libs/common/src/lib/entities/entities.component.scss
+++ b/libs/common/src/lib/entities/entities.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 $header-height: rhythm(16);
 $header-margin-bottom: rhythm(3);
@@ -58,7 +58,6 @@ $gap-family-selection: rhythm(7);
       top: 0;
       width: 100%;
       z-index: 1;
-
     }
   }
 }
diff --git a/libs/common/src/lib/entities/entity-list/entity-list.component.scss b/libs/common/src/lib/entities/entity-list/entity-list.component.scss
index 69623d6b6..173009f29 100644
--- a/libs/common/src/lib/entities/entity-list/entity-list.component.scss
+++ b/libs/common/src/lib/entities/entity-list/entity-list.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 :host {
   .ner-list-container {
diff --git a/libs/common/src/lib/hint/hint.component.scss b/libs/common/src/lib/hint/hint.component.scss
index 75e2dc430..b89e134ab 100644
--- a/libs/common/src/lib/hint/hint.component.scss
+++ b/libs/common/src/lib/hint/hint.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .hint {
   pre {
diff --git a/libs/common/src/lib/kb-creation/kb-creation.component.scss b/libs/common/src/lib/kb-creation/kb-creation.component.scss
index 869245852..5d521681c 100644
--- a/libs/common/src/lib/kb-creation/kb-creation.component.scss
+++ b/libs/common/src/lib/kb-creation/kb-creation.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 header {
   display: flex;
diff --git a/libs/common/src/lib/knowledge-box-settings/knowledge-box-settings.component.scss b/libs/common/src/lib/knowledge-box-settings/knowledge-box-settings.component.scss
index 4657330c1..d088abc68 100644
--- a/libs/common/src/lib/knowledge-box-settings/knowledge-box-settings.component.scss
+++ b/libs/common/src/lib/knowledge-box-settings/knowledge-box-settings.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .knowledge-box-settings {
   form {
diff --git a/libs/common/src/lib/metrics/metrics-page.component.scss b/libs/common/src/lib/metrics/metrics-page.component.scss
index ace2d7642..57dd64c99 100644
--- a/libs/common/src/lib/metrics/metrics-page.component.scss
+++ b/libs/common/src/lib/metrics/metrics-page.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .remi-metrics {
   display: flex;
diff --git a/libs/common/src/lib/navbar/navbar.component.scss b/libs/common/src/lib/navbar/navbar.component.scss
index a947a149f..08d7295ff 100644
--- a/libs/common/src/lib/navbar/navbar.component.scss
+++ b/libs/common/src/lib/navbar/navbar.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 // Height from which the menu get smaller (prevents scrollbar to appear)
 $height-breakpoint: 856px;
diff --git a/libs/common/src/lib/page-not-found/page-not-found.component.scss b/libs/common/src/lib/page-not-found/page-not-found.component.scss
index 19bef92f8..9180c6e04 100644
--- a/libs/common/src/lib/page-not-found/page-not-found.component.scss
+++ b/libs/common/src/lib/page-not-found/page-not-found.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .user-background {
   height: 100%;
diff --git a/libs/common/src/lib/pagination/pagination.component.scss b/libs/common/src/lib/pagination/pagination.component.scss
index 9021c6b50..3ab304488 100644
--- a/libs/common/src/lib/pagination/pagination.component.scss
+++ b/libs/common/src/lib/pagination/pagination.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .pagination {
   align-items: center;
diff --git a/libs/common/src/lib/rag-lab/_common-lab.scss b/libs/common/src/lib/rag-lab/_common-lab.scss
index 15ea196bf..4039c8eec 100644
--- a/libs/common/src/lib/rag-lab/_common-lab.scss
+++ b/libs/common/src/lib/rag-lab/_common-lab.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .lab-container {
   padding: rhythm(3) 0;
diff --git a/libs/common/src/lib/rag-lab/loading-dialog/loading-dialog.component.scss b/libs/common/src/lib/rag-lab/loading-dialog/loading-dialog.component.scss
index 07d77b4d5..e1fe0be16 100644
--- a/libs/common/src/lib/rag-lab/loading-dialog/loading-dialog.component.scss
+++ b/libs/common/src/lib/rag-lab/loading-dialog/loading-dialog.component.scss
@@ -1,4 +1,5 @@
-@import 'libs/pastanaga-angular/projects/pastanaga-angular/src/lib/modal/confirmation-dialog/confirmation-dialog.component';
+@use 'libs/pastanaga-angular/projects/pastanaga-angular/src/lib/modal/confirmation-dialog/confirmation-dialog.component';
+@use 'apps/dashboard/src/variables' as *;
 
 .pa-confirmation-dialog {
   padding: rhythm(3);
diff --git a/libs/common/src/lib/rag-lab/question-block/question-block.component.scss b/libs/common/src/lib/rag-lab/question-block/question-block.component.scss
index 72b568f93..f171b67a5 100644
--- a/libs/common/src/lib/rag-lab/question-block/question-block.component.scss
+++ b/libs/common/src/lib/rag-lab/question-block/question-block.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 :host {
   display: flex;
diff --git a/libs/common/src/lib/rag-lab/rag-lab-page.component.scss b/libs/common/src/lib/rag-lab/rag-lab-page.component.scss
index 480a51477..c6ffeba45 100644
--- a/libs/common/src/lib/rag-lab/rag-lab-page.component.scss
+++ b/libs/common/src/lib/rag-lab/rag-lab-page.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .rag-lab-page {
   .page-header {
diff --git a/libs/common/src/lib/resources/edit-resource/_edit-resource.tokens.scss b/libs/common/src/lib/resources/edit-resource/_edit-resource.tokens.scss
index 6fdcdad37..b070fe78c 100644
--- a/libs/common/src/lib/resources/edit-resource/_edit-resource.tokens.scss
+++ b/libs/common/src/lib/resources/edit-resource/_edit-resource.tokens.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 $height-header: rhythm(7);
 $padding-vertical-footer: rhythm(3);
@@ -7,7 +7,6 @@ $footer-margin: rhythm(5);
 
 $width-page-content: rhythm(80);
 
-$header-separator: inset 0 -1px 0 $color-neutral-light;
 $footer-separator: inset 0 1px 0 $color-neutral-light;
 
 $annotation-header-height: rhythm(9);
diff --git a/libs/common/src/lib/resources/edit-resource/add-field/add-field.component.scss b/libs/common/src/lib/resources/edit-resource/add-field/add-field.component.scss
index f7c350528..b8916d041 100644
--- a/libs/common/src/lib/resources/edit-resource/add-field/add-field.component.scss
+++ b/libs/common/src/lib/resources/edit-resource/add-field/add-field.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 :host {
   .title-xxs {
     margin-bottom: rhythm(1);
diff --git a/libs/common/src/lib/resources/edit-resource/annotation/paragraph-annotation/paragraph-annotation.component.scss b/libs/common/src/lib/resources/edit-resource/annotation/paragraph-annotation/paragraph-annotation.component.scss
index 3cfb77ce2..9d4c4be2f 100644
--- a/libs/common/src/lib/resources/edit-resource/annotation/paragraph-annotation/paragraph-annotation.component.scss
+++ b/libs/common/src/lib/resources/edit-resource/annotation/paragraph-annotation/paragraph-annotation.component.scss
@@ -1,8 +1,7 @@
-@import 'apps/dashboard/src/variables';
-@import '../../edit-resource.tokens';
+@use 'apps/dashboard/src/variables' as *;
+@use '../../edit-resource.tokens' as tokens;
 
 .paragraph-container {
-
   p {
     margin-bottom: 0;
 
@@ -22,11 +21,11 @@
 
   .ner-families-container {
     max-height: calc(
-      100vh - var(--app-topbar-height) - #{$height-header} - var(--app-layout-padding-top) - #{$height-help-container}
+      100vh - var(--app-topbar-height) - #{tokens.$height-header} - var(--app-layout-padding-top) - #{tokens.$height-help-container}
     );
     position: sticky;
     overflow: auto;
-    top: calc(#{$sticky-top} + #{$height-help-container});
+    top: calc(#{tokens.$sticky-top} + #{tokens.$height-help-container});
   }
 
   pa-expander ::ng-deep .pa-expander-header {
diff --git a/libs/common/src/lib/resources/edit-resource/classification/paragraph-classification/paragraph-classification.component.scss b/libs/common/src/lib/resources/edit-resource/classification/paragraph-classification/paragraph-classification.component.scss
index eae420ef7..72088d8d0 100644
--- a/libs/common/src/lib/resources/edit-resource/classification/paragraph-classification/paragraph-classification.component.scss
+++ b/libs/common/src/lib/resources/edit-resource/classification/paragraph-classification/paragraph-classification.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .paragraphs-container {
   .paragraph-container {
diff --git a/libs/common/src/lib/resources/edit-resource/classification/resource-classification.component.scss b/libs/common/src/lib/resources/edit-resource/classification/resource-classification.component.scss
index 3277b5a38..71f9d9f38 100644
--- a/libs/common/src/lib/resources/edit-resource/classification/resource-classification.component.scss
+++ b/libs/common/src/lib/resources/edit-resource/classification/resource-classification.component.scss
@@ -1,5 +1,5 @@
-@import 'apps/dashboard/src/variables';
-@import '../edit-resource.tokens';
+@use 'apps/dashboard/src/variables' as *;
+@use '../edit-resource.tokens' as tokens;
 
 .classification-container {
   display: flex;
@@ -17,6 +17,6 @@
 .label-selector-container {
   padding-right: rhythm(2);
   position: sticky;
-  top: calc(#{$sticky-top} + #{rhythm(6)});
+  top: calc(#{tokens.$sticky-top} + #{rhythm(6)});
   width: rhythm(32);
 }
diff --git a/libs/common/src/lib/resources/edit-resource/common-page-layout.scss b/libs/common/src/lib/resources/edit-resource/common-page-layout.scss
index 12ab738ee..be38b23ab 100644
--- a/libs/common/src/lib/resources/edit-resource/common-page-layout.scss
+++ b/libs/common/src/lib/resources/edit-resource/common-page-layout.scss
@@ -1,4 +1,5 @@
-@import 'edit-resource.tokens';
+@use 'edit-resource.tokens' as tokens;
+@use 'apps/dashboard/src/variables' as *;
 
 .main-container {
   display: flex;
@@ -14,7 +15,7 @@
   position: absolute;
   background: white;
   top: 0;
-  padding: #{$sticky-top} calc(#{$width-page-content} - #{$width-search-input}) #{rhythm(2)} 0;
+  padding: #{tokens.$sticky-top} calc(#{tokens.$width-page-content} - #{$width-search-input}) #{rhythm(2)} 0;
   z-index: 1;
 
   pa-input {
@@ -28,10 +29,10 @@
 .scrollable-area {
   flex: 1 1 auto;
   padding: 0 0 0 rhythm(1.5);
-  max-width: $width-page-content;
+  max-width: tokens.$width-page-content;
 
   &.with-search-and-footer {
-    margin-top: $annotation-header-height;
+    margin-top: tokens.$annotation-header-height;
   }
 }
 
@@ -43,7 +44,7 @@
 
   > :first-child {
     position: sticky;
-    top: $sticky-top;
+    top: tokens.$sticky-top;
   }
 }
 
@@ -74,10 +75,10 @@
       display: flex;
       flex: 1 0 auto;
       justify-content: center;
-      height: $thumbnail-height;
+      height: tokens.$thumbnail-height;
       text-align: center;
       transition: background-color $transition-hint;
-      width: $thumbnail-width;
+      width: tokens.$thumbnail-width;
 
       &.file-over {
         background-color: $color-neutral-lightest;
diff --git a/libs/common/src/lib/resources/edit-resource/dropzone/dropzone.component.scss b/libs/common/src/lib/resources/edit-resource/dropzone/dropzone.component.scss
index 84627964c..929e26ffe 100644
--- a/libs/common/src/lib/resources/edit-resource/dropzone/dropzone.component.scss
+++ b/libs/common/src/lib/resources/edit-resource/dropzone/dropzone.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../../../../apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .drop-zone {
   align-items: center;
diff --git a/libs/common/src/lib/resources/edit-resource/edit-resource.component.scss b/libs/common/src/lib/resources/edit-resource/edit-resource.component.scss
index 16f8705e9..d0292d70f 100644
--- a/libs/common/src/lib/resources/edit-resource/edit-resource.component.scss
+++ b/libs/common/src/lib/resources/edit-resource/edit-resource.component.scss
@@ -1,5 +1,5 @@
-@import 'apps/dashboard/src/variables';
-@import 'edit-resource.tokens';
+@use 'apps/dashboard/src/variables' as *;
+@use 'edit-resource.tokens' as tokens;
 
 .edit-resource {
   header {
@@ -9,7 +9,7 @@
     align-items: center;
     background: $color-neutral-lightest;
     display: flex;
-    height: $height-header;
+    height: tokens.$height-header;
     justify-content: space-between;
     padding: 0 calc(var(--app-layout-padding-right) - #{rhythm(1)}) 0 var(--app-layout-padding-left);
     position: sticky;
@@ -44,7 +44,7 @@
   .page-container {
     display: flex;
     gap: rhythm(0.5);
-    min-height: calc(100vh - var(--app-topbar-height) - #{$height-header});
+    min-height: calc(100vh - var(--app-topbar-height) - #{tokens.$height-header});
     padding: var(--app-layout-padding-top) var(--app-layout-padding-right) var(--app-layout-padding-bottom)
       var(--app-layout-padding-left);
 
@@ -61,7 +61,7 @@
       ul {
         padding: 0;
         position: sticky;
-        top: $sticky-top;
+        top: tokens.$sticky-top;
       }
 
       li {
@@ -100,10 +100,10 @@
       footer {
         background: $color-light-stronger;
         bottom: 0;
-        box-shadow: $footer-separator;
+        box-shadow: tokens.$footer-separator;
         display: flex;
-        max-width: $width-page-content;
-        padding: $padding-vertical-footer 0;
+        max-width: tokens.$width-page-content;
+        padding: tokens.$padding-vertical-footer 0;
         position: sticky;
         z-index: 100;
 
diff --git a/libs/common/src/lib/resources/edit-resource/preview/preview-table.component.scss b/libs/common/src/lib/resources/edit-resource/preview/preview-table.component.scss
index 64b133a24..73b886d4a 100644
--- a/libs/common/src/lib/resources/edit-resource/preview/preview-table.component.scss
+++ b/libs/common/src/lib/resources/edit-resource/preview/preview-table.component.scss
@@ -1,8 +1,8 @@
-@import 'apps/dashboard/src/variables';
-@import '../edit-resource.tokens';
+@use 'apps/dashboard/src/variables' as *;
+@use '../edit-resource.tokens' as tokens;
 
 .markdown-table {
-  max-width: calc($width-page-content - rhythm(3));
+  max-width: calc(tokens.$width-page-content - rhythm(3));
   overflow-x: auto;
   ::ng-deep table {
     td,
diff --git a/libs/common/src/lib/resources/edit-resource/preview/preview.component.scss b/libs/common/src/lib/resources/edit-resource/preview/preview.component.scss
index b1bbaaa79..81dcf40c9 100644
--- a/libs/common/src/lib/resources/edit-resource/preview/preview.component.scss
+++ b/libs/common/src/lib/resources/edit-resource/preview/preview.component.scss
@@ -1,5 +1,5 @@
-@import 'apps/dashboard/src/variables';
-@import '../edit-resource.tokens';
+@use 'apps/dashboard/src/variables' as *;
+@use '../edit-resource.tokens' as tokens;
 
 .main-container {
   display: flex;
@@ -51,7 +51,7 @@
     padding-bottom: rhythm(1);
     border-bottom: 1px solid $color-neutral-light;
     margin-bottom: rhythm(1.5);
-  }  
+  }
 }
 
 .viewer-button-container {
@@ -59,7 +59,7 @@
 
   pa-button {
     position: sticky;
-    top: calc(#{$height-header} + var(--app-layout-padding-top));
+    top: calc(#{tokens.$height-header} + var(--app-layout-padding-top));
   }
 }
 
diff --git a/libs/common/src/lib/resources/edit-resource/profile/profile.component.scss b/libs/common/src/lib/resources/edit-resource/profile/profile.component.scss
index cc1737917..1bd767699 100644
--- a/libs/common/src/lib/resources/edit-resource/profile/profile.component.scss
+++ b/libs/common/src/lib/resources/edit-resource/profile/profile.component.scss
@@ -1,5 +1,4 @@
-@import 'apps/dashboard/src/variables';
-@import '../edit-resource.tokens';
+@use 'apps/dashboard/src/variables' as *;
 
 .form-section {
   display: flex;
diff --git a/libs/common/src/lib/resources/edit-resource/profile/text/text.component.scss b/libs/common/src/lib/resources/edit-resource/profile/text/text.component.scss
index df0e6ba7a..8e159b937 100644
--- a/libs/common/src/lib/resources/edit-resource/profile/text/text.component.scss
+++ b/libs/common/src/lib/resources/edit-resource/profile/text/text.component.scss
@@ -1,10 +1,11 @@
-@import 'apps/dashboard/src/variables';
-@import '../../edit-resource.tokens';
+@use 'apps/dashboard/src/variables' as *;
+@use '../../edit-resource.tokens' as tokens;
 
 :host {
   pa-textarea ::ng-deep textarea {
     height: calc(
-      100vh - var(--app-topbar-height) - #{$height-header} - var(--app-layout-padding-top) - #{$footer-height} - #{$footer-margin}
+      100vh - var(--app-topbar-height) - #{tokens.$height-header} - var(--app-layout-padding-top) - #{tokens.$footer-height} -
+        #{tokens.$footer-margin}
     );
     min-height: rhythm(10);
   }
diff --git a/libs/common/src/lib/resources/edit-resource/profile/thumbnail/thumbnail.component.scss b/libs/common/src/lib/resources/edit-resource/profile/thumbnail/thumbnail.component.scss
index 5210afd89..422f228ca 100644
--- a/libs/common/src/lib/resources/edit-resource/profile/thumbnail/thumbnail.component.scss
+++ b/libs/common/src/lib/resources/edit-resource/profile/thumbnail/thumbnail.component.scss
@@ -1,18 +1,18 @@
-@import 'apps/dashboard/src/variables';
-@import '../../edit-resource.tokens';
+@use 'apps/dashboard/src/variables' as *;
+@use '../../edit-resource.tokens' as tokens;
 
 .resource-thumbnail-container {
   align-items: center;
   background: $color-neutral-lightest;
   display: flex;
-  height: $thumbnail-height;
+  height: tokens.$thumbnail-height;
   justify-content: center;
   position: relative;
-  width: $thumbnail-width;
+  width: tokens.$thumbnail-width;
 
   img {
-    max-height: calc(#{$thumbnail-height} - #{rhythm(0.25)});
-    max-width: calc(#{$thumbnail-width} - #{rhythm(0.25)});
+    max-height: calc(#{tokens.$thumbnail-height} - #{rhythm(0.25)});
+    max-width: calc(#{tokens.$thumbnail-width} - #{rhythm(0.25)});
   }
 
   &.selected {
diff --git a/libs/common/src/lib/resources/resource-list/error-resources-table/error-resources-table.component.scss b/libs/common/src/lib/resources/resource-list/error-resources-table/error-resources-table.component.scss
index 95c9112e4..94083dad8 100644
--- a/libs/common/src/lib/resources/resource-list/error-resources-table/error-resources-table.component.scss
+++ b/libs/common/src/lib/resources/resource-list/error-resources-table/error-resources-table.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .errors-cell {
   overflow-wrap: break-word;
diff --git a/libs/common/src/lib/resources/resource-list/resource-list.component.scss b/libs/common/src/lib/resources/resource-list/resource-list.component.scss
index babba1ae1..9a43feaba 100644
--- a/libs/common/src/lib/resources/resource-list/resource-list.component.scss
+++ b/libs/common/src/lib/resources/resource-list/resource-list.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .resource-list {
   position: relative;
diff --git a/libs/common/src/lib/resources/resource-list/resources-table.component.scss b/libs/common/src/lib/resources/resource-list/resources-table.component.scss
index 101452a8d..1e6ccac09 100644
--- a/libs/common/src/lib/resources/resource-list/resources-table.component.scss
+++ b/libs/common/src/lib/resources/resource-list/resources-table.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 $height-table-header: rhythm(8);
 $height-pagination: rhythm(9);
@@ -49,7 +49,10 @@ $height-pagination: rhythm(9);
 .table-container {
   position: relative;
   // Always display pagination at the bottom, even when there are few results
-  min-height: calc(100vh - var(--app-topbar-height) - var(--app-layout-padding-top) - var(--filters-header-height) - #{$height-table-header} - #{$height-pagination} + rhythm(3));
+  min-height: calc(
+    100vh - var(--app-topbar-height) - var(--app-layout-padding-top) - var(--filters-header-height) - #{$height-table-header} -
+      #{$height-pagination} + rhythm(3)
+  );
 }
 
 table {
diff --git a/libs/common/src/lib/resources/resource-list/table-pagination/table-pagination.component.scss b/libs/common/src/lib/resources/resource-list/table-pagination/table-pagination.component.scss
index 10d38739c..5de2ecb34 100644
--- a/libs/common/src/lib/resources/resource-list/table-pagination/table-pagination.component.scss
+++ b/libs/common/src/lib/resources/resource-list/table-pagination/table-pagination.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .table-pagination {
   align-items: center;
diff --git a/libs/common/src/lib/resources/resource-list/title-cell/title-cell.component.scss b/libs/common/src/lib/resources/resource-list/title-cell/title-cell.component.scss
index 556c97b56..cf2b67f36 100644
--- a/libs/common/src/lib/resources/resource-list/title-cell/title-cell.component.scss
+++ b/libs/common/src/lib/resources/resource-list/title-cell/title-cell.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 :host {
   width: 100%;
diff --git a/libs/common/src/lib/search-widget/_common-form.scss b/libs/common/src/lib/search-widget/_common-form.scss
index cb95f21ce..1da60256f 100644
--- a/libs/common/src/lib/search-widget/_common-form.scss
+++ b/libs/common/src/lib/search-widget/_common-form.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .config-form-field {
   display: flex;
diff --git a/libs/common/src/lib/search-widget/search-configuration/filter-assistant/filter-assistant-modal.component.scss b/libs/common/src/lib/search-widget/search-configuration/filter-assistant/filter-assistant-modal.component.scss
index 38b8c313a..078611f8a 100644
--- a/libs/common/src/lib/search-widget/search-configuration/filter-assistant/filter-assistant-modal.component.scss
+++ b/libs/common/src/lib/search-widget/search-configuration/filter-assistant/filter-assistant-modal.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 :host {
   .tab-content {
diff --git a/libs/common/src/lib/search-widget/search-configuration/filter-assistant/filter-expression/filter-expression.component.scss b/libs/common/src/lib/search-widget/search-configuration/filter-assistant/filter-expression/filter-expression.component.scss
index f3aeac840..b5ebbd4c3 100644
--- a/libs/common/src/lib/search-widget/search-configuration/filter-assistant/filter-expression/filter-expression.component.scss
+++ b/libs/common/src/lib/search-widget/search-configuration/filter-assistant/filter-expression/filter-expression.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .expression-container {
   align-items: center;
diff --git a/libs/common/src/lib/search-widget/search-configuration/filter-assistant/filter-type-and-value/filter-value.component.scss b/libs/common/src/lib/search-widget/search-configuration/filter-assistant/filter-type-and-value/filter-value.component.scss
index be613adc3..7380a0667 100644
--- a/libs/common/src/lib/search-widget/search-configuration/filter-assistant/filter-type-and-value/filter-value.component.scss
+++ b/libs/common/src/lib/search-widget/search-configuration/filter-assistant/filter-type-and-value/filter-value.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .fields-container {
   display: flex;
diff --git a/libs/common/src/lib/search-widget/search-configuration/generative-answer-form/generative-answer-form.component.scss b/libs/common/src/lib/search-widget/search-configuration/generative-answer-form/generative-answer-form.component.scss
index 5bc23d4a7..d36667b54 100644
--- a/libs/common/src/lib/search-widget/search-configuration/generative-answer-form/generative-answer-form.component.scss
+++ b/libs/common/src/lib/search-widget/search-configuration/generative-answer-form/generative-answer-form.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .subsection-title {
   @include title-m();
diff --git a/libs/common/src/lib/search-widget/search-configuration/save-config-modal/save-config-modal.component.scss b/libs/common/src/lib/search-widget/search-configuration/save-config-modal/save-config-modal.component.scss
index eb1f368bc..17107d2ab 100644
--- a/libs/common/src/lib/search-widget/search-configuration/save-config-modal/save-config-modal.component.scss
+++ b/libs/common/src/lib/search-widget/search-configuration/save-config-modal/save-config-modal.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .form-container {
   padding: rhythm(1) 0;
diff --git a/libs/common/src/lib/search-widget/search-configuration/search-configuration.component.scss b/libs/common/src/lib/search-widget/search-configuration/search-configuration.component.scss
index f9c0c27d5..8baac5ce5 100644
--- a/libs/common/src/lib/search-widget/search-configuration/search-configuration.component.scss
+++ b/libs/common/src/lib/search-widget/search-configuration/search-configuration.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 :host {
   display: flex;
diff --git a/libs/common/src/lib/search-widget/search-configuration/search-request-modal/search-request-modal.component.scss b/libs/common/src/lib/search-widget/search-configuration/search-request-modal/search-request-modal.component.scss
index b10116e64..f793fd080 100644
--- a/libs/common/src/lib/search-widget/search-configuration/search-request-modal/search-request-modal.component.scss
+++ b/libs/common/src/lib/search-widget/search-configuration/search-request-modal/search-request-modal.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .request-details {
   display: flex;
diff --git a/libs/common/src/lib/search-widget/search-page.component.scss b/libs/common/src/lib/search-widget/search-page.component.scss
index 200aeab46..165907ecb 100644
--- a/libs/common/src/lib/search-widget/search-page.component.scss
+++ b/libs/common/src/lib/search-widget/search-page.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .search-page {
   $spacing: rhythm(4);
diff --git a/libs/common/src/lib/search-widget/widgets/dialogs/create-widget-dialog/create-widget-dialog.component.scss b/libs/common/src/lib/search-widget/widgets/dialogs/create-widget-dialog/create-widget-dialog.component.scss
index b3ff772e3..17107d2ab 100644
--- a/libs/common/src/lib/search-widget/widgets/dialogs/create-widget-dialog/create-widget-dialog.component.scss
+++ b/libs/common/src/lib/search-widget/widgets/dialogs/create-widget-dialog/create-widget-dialog.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../../../../../apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .form-container {
   padding: rhythm(1) 0;
diff --git a/libs/common/src/lib/search-widget/widgets/dialogs/duplicate-widget-dialog/duplicate-widget-dialog.component.scss b/libs/common/src/lib/search-widget/widgets/dialogs/duplicate-widget-dialog/duplicate-widget-dialog.component.scss
index b3ff772e3..17107d2ab 100644
--- a/libs/common/src/lib/search-widget/widgets/dialogs/duplicate-widget-dialog/duplicate-widget-dialog.component.scss
+++ b/libs/common/src/lib/search-widget/widgets/dialogs/duplicate-widget-dialog/duplicate-widget-dialog.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../../../../../apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .form-container {
   padding: rhythm(1) 0;
diff --git a/libs/common/src/lib/search-widget/widgets/dialogs/embed-widget-dialog/embed-widget-dialog.component.scss b/libs/common/src/lib/search-widget/widgets/dialogs/embed-widget-dialog/embed-widget-dialog.component.scss
index ee824eae5..53875c24d 100644
--- a/libs/common/src/lib/search-widget/widgets/dialogs/embed-widget-dialog/embed-widget-dialog.component.scss
+++ b/libs/common/src/lib/search-widget/widgets/dialogs/embed-widget-dialog/embed-widget-dialog.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 pre {
   background-color: $color-neutral-lightest;
diff --git a/libs/common/src/lib/search-widget/widgets/dialogs/rename-widget-dialog/rename-widget-dialog.component.scss b/libs/common/src/lib/search-widget/widgets/dialogs/rename-widget-dialog/rename-widget-dialog.component.scss
index b3ff772e3..17107d2ab 100644
--- a/libs/common/src/lib/search-widget/widgets/dialogs/rename-widget-dialog/rename-widget-dialog.component.scss
+++ b/libs/common/src/lib/search-widget/widgets/dialogs/rename-widget-dialog/rename-widget-dialog.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../../../../../apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .form-container {
   padding: rhythm(1) 0;
diff --git a/libs/common/src/lib/search-widget/widgets/widget-form/widget-form.component.scss b/libs/common/src/lib/search-widget/widgets/widget-form/widget-form.component.scss
index 08e4361f3..723598d5f 100644
--- a/libs/common/src/lib/search-widget/widgets/widget-form/widget-form.component.scss
+++ b/libs/common/src/lib/search-widget/widgets/widget-form/widget-form.component.scss
@@ -1,5 +1,5 @@
-@import 'apps/dashboard/src/variables';
-@import '../../common-form';
+@use 'apps/dashboard/src/variables' as *;
+@use '../../common-form';
 
 $vertical-gap: rhythm(4);
 $header-height: rhythm(10) + rhythm(1) + $vertical-gap * 2;
diff --git a/libs/common/src/lib/search-widget/widgets/widget-list.component.scss b/libs/common/src/lib/search-widget/widgets/widget-list.component.scss
index 0b40949d9..4b1fc28d0 100644
--- a/libs/common/src/lib/search-widget/widgets/widget-list.component.scss
+++ b/libs/common/src/lib/search-widget/widgets/widget-list.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .widget-list-page {
   header {
diff --git a/libs/common/src/lib/select-account-kb/_select-account.tokens.scss b/libs/common/src/lib/select-account-kb/_select-account.tokens.scss
index dc4254002..93e71c65b 100644
--- a/libs/common/src/lib/select-account-kb/_select-account.tokens.scss
+++ b/libs/common/src/lib/select-account-kb/_select-account.tokens.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 $height-page-container: 90vh;
 $vertical-padding: rhythm(8);
diff --git a/libs/common/src/lib/select-account-kb/select-account/select-account.component.scss b/libs/common/src/lib/select-account-kb/select-account/select-account.component.scss
index 98481bcd6..e368eea19 100644
--- a/libs/common/src/lib/select-account-kb/select-account/select-account.component.scss
+++ b/libs/common/src/lib/select-account-kb/select-account/select-account.component.scss
@@ -1,12 +1,12 @@
-@import 'apps/dashboard/src/variables';
-@import '../select-account.tokens';
+@use 'apps/dashboard/src/variables' as *;
+@use '../select-account.tokens' as tokens;
 
 .select {
   background-color: $color-light-stronger;
   border-radius: rhythm(1);
   margin: 0 auto;
-  max-height: $height-page-container;
-  padding: $vertical-padding rhythm(12);
+  max-height: tokens.$height-page-container;
+  padding: tokens.$vertical-padding rhythm(12);
   position: relative;
   top: 10vh;
   width: 600px;
@@ -17,7 +17,7 @@
   }
 
   .logo {
-    margin-bottom: $vertical-padding;
+    margin-bottom: tokens.$vertical-padding;
     text-align: center;
 
     img {
@@ -46,7 +46,7 @@
   transition: height $transition-hint;
 
   .select-account-list {
-    max-height: calc(#{$height-page-container} - #{$vertical-padding} * 4 - #{rhythm(5)});
+    max-height: calc(#{tokens.$height-page-container} - #{tokens.$vertical-padding} * 4 - #{rhythm(5)});
     overflow-y: auto;
     overflow-x: hidden;
     // Move scrollbar to the edge
diff --git a/libs/common/src/lib/select-account-kb/select-kb/select-kb.component.scss b/libs/common/src/lib/select-account-kb/select-kb/select-kb.component.scss
index 6a9ab9d45..350f9bc38 100644
--- a/libs/common/src/lib/select-account-kb/select-kb/select-kb.component.scss
+++ b/libs/common/src/lib/select-account-kb/select-kb/select-kb.component.scss
@@ -1,5 +1,5 @@
-@import 'apps/dashboard/src/variables';
-@import '../select-account.tokens';
+@use 'apps/dashboard/src/variables' as *;
+@use '../select-account.tokens' as tokens;
 
 :host {
   height: 100%;
@@ -47,7 +47,7 @@
     // Move scrollbar to the edge
     padding: 0 rhythm(2);
     margin: 0 -#{rhythm(2)};
-    max-height: calc(#{$height-page-container} - #{$vertical-padding} * 4 - #{rhythm(9)});
+    max-height: calc(#{tokens.$height-page-container} - #{tokens.$vertical-padding} * 4 - #{rhythm(9)});
     @include scrollbar-black();
   }
 
diff --git a/libs/common/src/lib/tasks-automation/task-forms/_task-form.common.scss b/libs/common/src/lib/tasks-automation/task-forms/_task-form.common.scss
index 46d238867..25e8472fe 100644
--- a/libs/common/src/lib/tasks-automation/task-forms/_task-form.common.scss
+++ b/libs/common/src/lib/tasks-automation/task-forms/_task-form.common.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 header {
   display: flex;
diff --git a/libs/common/src/lib/tasks-automation/task-forms/graph-extraction/graph-extraction.component.scss b/libs/common/src/lib/tasks-automation/task-forms/graph-extraction/graph-extraction.component.scss
index da19a6c2f..d9580ff64 100644
--- a/libs/common/src/lib/tasks-automation/task-forms/graph-extraction/graph-extraction.component.scss
+++ b/libs/common/src/lib/tasks-automation/task-forms/graph-extraction/graph-extraction.component.scss
@@ -1,5 +1,5 @@
-@import 'apps/dashboard/src/variables';
-@import '../task-form.common';
+@use 'apps/dashboard/src/variables' as *;
+@use '../task-form.common';
 
 .input-with-help {
   align-items: center;
diff --git a/libs/common/src/lib/tasks-automation/task-forms/labeling-configuration/labeling-configuration.component.scss b/libs/common/src/lib/tasks-automation/task-forms/labeling-configuration/labeling-configuration.component.scss
index b767ae36c..1cf4fb67e 100644
--- a/libs/common/src/lib/tasks-automation/task-forms/labeling-configuration/labeling-configuration.component.scss
+++ b/libs/common/src/lib/tasks-automation/task-forms/labeling-configuration/labeling-configuration.component.scss
@@ -1,6 +1,5 @@
-@import 'apps/dashboard/src/variables';
-@import '../task-form.common';
-
+@use 'apps/dashboard/src/variables' as *;
+@use '../task-form.common';
 
 .labelset,
 .labels-list {
diff --git a/libs/common/src/lib/tasks-automation/task-forms/task-form.component.scss b/libs/common/src/lib/tasks-automation/task-forms/task-form.component.scss
index b667c68b9..10b87ea2d 100644
--- a/libs/common/src/lib/tasks-automation/task-forms/task-form.component.scss
+++ b/libs/common/src/lib/tasks-automation/task-forms/task-form.component.scss
@@ -1,5 +1,5 @@
-@import 'apps/dashboard/src/variables';
-@import 'task-form.common';
+@use 'apps/dashboard/src/variables' as *;
+@use 'task-form.common';
 
 :host {
   .filter-form-container {
diff --git a/libs/common/src/lib/tasks-automation/task-forms/task-settings/task-settings.component.scss b/libs/common/src/lib/tasks-automation/task-forms/task-settings/task-settings.component.scss
index df4b24757..edad1af28 100644
--- a/libs/common/src/lib/tasks-automation/task-forms/task-settings/task-settings.component.scss
+++ b/libs/common/src/lib/tasks-automation/task-forms/task-settings/task-settings.component.scss
@@ -1,7 +1,7 @@
-@import 'apps/dashboard/src/variables';
-@import '../task-form.common';
+@use 'apps/dashboard/src/variables' as *;
+@use '../task-form.common';
 
 .filters {
   display: flex;
   gap: rhythm(1);
-}
\ No newline at end of file
+}
diff --git a/libs/common/src/lib/tasks-automation/task-list-item/task-list-item.component.scss b/libs/common/src/lib/tasks-automation/task-list-item/task-list-item.component.scss
index a46044926..e67141c8a 100644
--- a/libs/common/src/lib/tasks-automation/task-list-item/task-list-item.component.scss
+++ b/libs/common/src/lib/tasks-automation/task-list-item/task-list-item.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 :host {
   background-color: $color-light-stronger;
diff --git a/libs/common/src/lib/tasks-automation/task-list/task-list.component.scss b/libs/common/src/lib/tasks-automation/task-list/task-list.component.scss
index 1d87a49a8..3cdbd97ba 100644
--- a/libs/common/src/lib/tasks-automation/task-list/task-list.component.scss
+++ b/libs/common/src/lib/tasks-automation/task-list/task-list.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .page-spacing {
   display: flex;
diff --git a/libs/common/src/lib/token-dialog/token-dialog.component.scss b/libs/common/src/lib/token-dialog/token-dialog.component.scss
index fdf59212d..147499cf7 100644
--- a/libs/common/src/lib/token-dialog/token-dialog.component.scss
+++ b/libs/common/src/lib/token-dialog/token-dialog.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .title-with-button {
   align-items: center;
diff --git a/libs/common/src/lib/topbar/kb-switch/kb-switch.component.scss b/libs/common/src/lib/topbar/kb-switch/kb-switch.component.scss
index ea2963c43..dd010a883 100644
--- a/libs/common/src/lib/topbar/kb-switch/kb-switch.component.scss
+++ b/libs/common/src/lib/topbar/kb-switch/kb-switch.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 :host {
   display: block;
diff --git a/libs/common/src/lib/topbar/standalone-menu/standalone-menu.component.scss b/libs/common/src/lib/topbar/standalone-menu/standalone-menu.component.scss
index 7edfe91ae..6496b4a87 100644
--- a/libs/common/src/lib/topbar/standalone-menu/standalone-menu.component.scss
+++ b/libs/common/src/lib/topbar/standalone-menu/standalone-menu.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/nucliadb-admin/src/variables';
+@use 'apps/nucliadb-admin/src/variables';
 
 .introspection-link {
   color: inherit;
diff --git a/libs/common/src/lib/topbar/topbar.component.scss b/libs/common/src/lib/topbar/topbar.component.scss
index 2a04f73cb..7317a86cc 100644
--- a/libs/common/src/lib/topbar/topbar.component.scss
+++ b/libs/common/src/lib/topbar/topbar.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .topbar {
   align-items: center;
diff --git a/libs/common/src/lib/topbar/user-menu/user-menu.component.scss b/libs/common/src/lib/topbar/user-menu/user-menu.component.scss
index 8ebcbfec1..1ab5a7df5 100644
--- a/libs/common/src/lib/topbar/user-menu/user-menu.component.scss
+++ b/libs/common/src/lib/topbar/user-menu/user-menu.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../../../apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 :host {
   display: block;
diff --git a/libs/common/src/lib/upload/create-link/create-link.component.scss b/libs/common/src/lib/upload/create-link/create-link.component.scss
index aa9b1159c..ca0926793 100644
--- a/libs/common/src/lib/upload/create-link/create-link.component.scss
+++ b/libs/common/src/lib/upload/create-link/create-link.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .link-form {
   margin-top: rhythm(1);
diff --git a/libs/common/src/lib/upload/csv-select/csv-select.component.scss b/libs/common/src/lib/upload/csv-select/csv-select.component.scss
index 59935c930..fe475fc15 100644
--- a/libs/common/src/lib/upload/csv-select/csv-select.component.scss
+++ b/libs/common/src/lib/upload/csv-select/csv-select.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .upload-csv {
   display: flex;
diff --git a/libs/common/src/lib/upload/upload-bar/upload-bar.component.scss b/libs/common/src/lib/upload/upload-bar/upload-bar.component.scss
index 1340f4b7f..71f98691c 100644
--- a/libs/common/src/lib/upload/upload-bar/upload-bar.component.scss
+++ b/libs/common/src/lib/upload/upload-bar/upload-bar.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .upload-bar {
   @include dark-mode();
diff --git a/libs/common/src/lib/upload/upload-data/desktop-sources/desktop-sources.component.scss b/libs/common/src/lib/upload/upload-data/desktop-sources/desktop-sources.component.scss
index 7ac55aa12..a9f8b9d16 100644
--- a/libs/common/src/lib/upload/upload-data/desktop-sources/desktop-sources.component.scss
+++ b/libs/common/src/lib/upload/upload-data/desktop-sources/desktop-sources.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .desktop-sources {
   display: flex;
diff --git a/libs/common/src/lib/upload/upload-data/upload-data.component.scss b/libs/common/src/lib/upload/upload-data/upload-data.component.scss
index 0c6b91285..74d5ee836 100644
--- a/libs/common/src/lib/upload/upload-data/upload-data.component.scss
+++ b/libs/common/src/lib/upload/upload-data/upload-data.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .upload-data-page {
   .upload-options-container {
diff --git a/libs/common/src/lib/upload/upload-data/upload-option/upload-option.component.scss b/libs/common/src/lib/upload/upload-data/upload-option/upload-option.component.scss
index 46fdacce4..175f907cd 100644
--- a/libs/common/src/lib/upload/upload-data/upload-option/upload-option.component.scss
+++ b/libs/common/src/lib/upload/upload-data/upload-option/upload-option.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .upload-option {
   align-items: center;
diff --git a/libs/common/src/lib/upload/upload-files/upload-files.component.scss b/libs/common/src/lib/upload/upload-files/upload-files.component.scss
index f875ad1e9..2ee6c6545 100644
--- a/libs/common/src/lib/upload/upload-files/upload-files.component.scss
+++ b/libs/common/src/lib/upload/upload-files/upload-files.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .dropzone {
   align-items: center;
diff --git a/libs/common/src/lib/upload/upload-progress/upload-progress.component.scss b/libs/common/src/lib/upload/upload-progress/upload-progress.component.scss
index b3b92d6dd..70ce43889 100644
--- a/libs/common/src/lib/upload/upload-progress/upload-progress.component.scss
+++ b/libs/common/src/lib/upload/upload-progress/upload-progress.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 $width-status: rhythm(32);
 $gap-upload-row: rhythm(1);
diff --git a/libs/common/src/lib/upload/upload-qna/upload-qna.component.scss b/libs/common/src/lib/upload/upload-qna/upload-qna.component.scss
index e260bf47c..c2e8344f3 100644
--- a/libs/common/src/lib/upload/upload-qna/upload-qna.component.scss
+++ b/libs/common/src/lib/upload/upload-qna/upload-qna.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .upload-qna-content {
   display: flex;
diff --git a/libs/common/src/lib/upload/upload-sitemap/upload-sitemap.component.scss b/libs/common/src/lib/upload/upload-sitemap/upload-sitemap.component.scss
index 6326065c0..39a50cf19 100644
--- a/libs/common/src/lib/upload/upload-sitemap/upload-sitemap.component.scss
+++ b/libs/common/src/lib/upload/upload-sitemap/upload-sitemap.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .sitemap-form {
   display: flex;
@@ -22,7 +22,7 @@ nsi-info-card {
   flex-direction: column;
   gap: rhythm(2);
   margin: rhythm(2) 0;
-  
+
   .table-title {
     align-items: center;
     display: flex;
diff --git a/libs/common/src/lib/upload/upload-text/upload-text.component.scss b/libs/common/src/lib/upload/upload-text/upload-text.component.scss
index afca23281..090b9ffae 100644
--- a/libs/common/src/lib/upload/upload-text/upload-text.component.scss
+++ b/libs/common/src/lib/upload/upload-text/upload-text.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .dialog-title-with-button {
   align-items: center;
diff --git a/libs/core/src/lib/label/label-dropdown/label-dropdown.component.scss b/libs/core/src/lib/label/label-dropdown/label-dropdown.component.scss
index 0dd111dc9..318f0a261 100644
--- a/libs/core/src/lib/label/label-dropdown/label-dropdown.component.scss
+++ b/libs/core/src/lib/label/label-dropdown/label-dropdown.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .label-selector {
   .level2-option ::ng-deep .pa-option {
diff --git a/libs/core/src/lib/label/label-field/label-field.component.scss b/libs/core/src/lib/label/label-field/label-field.component.scss
index 7e9f21a71..6f201203b 100644
--- a/libs/core/src/lib/label/label-field/label-field.component.scss
+++ b/libs/core/src/lib/label/label-field/label-field.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 :host {
   display: block;
diff --git a/libs/core/src/lib/label/label-list/label-list.component.scss b/libs/core/src/lib/label/label-list/label-list.component.scss
index 4de966789..9fa713050 100644
--- a/libs/core/src/lib/label/label-list/label-list.component.scss
+++ b/libs/core/src/lib/label/label-list/label-list.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .label-list {
   display: flex;
diff --git a/libs/core/src/lib/label/label-sets/label-set-list/label-set-list.component.scss b/libs/core/src/lib/label/label-sets/label-set-list/label-set-list.component.scss
index 477542670..13a880e16 100644
--- a/libs/core/src/lib/label/label-sets/label-set-list/label-set-list.component.scss
+++ b/libs/core/src/lib/label/label-sets/label-set-list/label-set-list.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .label-set-title {
   padding: 0 rhythm(1);
diff --git a/libs/core/src/lib/label/label-sets/label-set/color-picker/color-picker.component.scss b/libs/core/src/lib/label/label-sets/label-set/color-picker/color-picker.component.scss
index 7fc3800a7..73457dbee 100644
--- a/libs/core/src/lib/label/label-sets/label-set/color-picker/color-picker.component.scss
+++ b/libs/core/src/lib/label/label-sets/label-set/color-picker/color-picker.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .color-picker {
   display: flex;
diff --git a/libs/core/src/lib/label/label-sets/label-set/label-set-form/label-set-form.component.scss b/libs/core/src/lib/label/label-sets/label-set/label-set-form/label-set-form.component.scss
index ed2f50750..44b654503 100644
--- a/libs/core/src/lib/label/label-sets/label-set/label-set-form/label-set-form.component.scss
+++ b/libs/core/src/lib/label/label-sets/label-set/label-set-form/label-set-form.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 $page-title-height: rhythm(8);
 $global-width: rhythm(80);
diff --git a/libs/core/src/lib/label/label-sets/label-set/label/label.component.scss b/libs/core/src/lib/label/label-sets/label-set/label/label.component.scss
index e9c6a6485..19d744050 100644
--- a/libs/core/src/lib/label/label-sets/label-set/label/label.component.scss
+++ b/libs/core/src/lib/label/label-sets/label-set/label/label.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .label {
   align-items: center;
diff --git a/libs/core/src/lib/label/label-sets/label-sets.component.scss b/libs/core/src/lib/label/label-sets/label-sets.component.scss
index 8896538a9..e219e7237 100644
--- a/libs/core/src/lib/label/label-sets/label-sets.component.scss
+++ b/libs/core/src/lib/label/label-sets/label-sets.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .label-sets-management {
   display: flex;
diff --git a/libs/core/src/lib/label/label-sets/missing-labels/missing-labels-dialog.component.scss b/libs/core/src/lib/label/label-sets/missing-labels/missing-labels-dialog.component.scss
index cc71c41f5..bfddf17db 100644
--- a/libs/core/src/lib/label/label-sets/missing-labels/missing-labels-dialog.component.scss
+++ b/libs/core/src/lib/label/label-sets/missing-labels/missing-labels-dialog.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .expander-card-container {
   border: 1px solid $color-neutral-light;
diff --git a/libs/core/src/lib/notifications/notification-button/notification-button.component.scss b/libs/core/src/lib/notifications/notification-button/notification-button.component.scss
index a36e57bf3..c3d986de9 100644
--- a/libs/core/src/lib/notifications/notification-button/notification-button.component.scss
+++ b/libs/core/src/lib/notifications/notification-button/notification-button.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../../../apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .notification-button-container {
   position: relative;
diff --git a/libs/core/src/lib/notifications/notification/notification.component.scss b/libs/core/src/lib/notifications/notification/notification.component.scss
index f8bab362c..be5a35507 100644
--- a/libs/core/src/lib/notifications/notification/notification.component.scss
+++ b/libs/core/src/lib/notifications/notification/notification.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../../../apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .notification-container {
   padding: rhythm(1) rhythm(2);
diff --git a/libs/core/src/lib/notifications/notifications-panel/notifications-panel.component.scss b/libs/core/src/lib/notifications/notifications-panel/notifications-panel.component.scss
index 2a1a7ca28..71c24da65 100644
--- a/libs/core/src/lib/notifications/notifications-panel/notifications-panel.component.scss
+++ b/libs/core/src/lib/notifications/notifications-panel/notifications-panel.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../../../apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 $notification-panel-width: rhythm(56);
 
diff --git a/libs/core/src/lib/parameters-table/parameters-table.component.scss b/libs/core/src/lib/parameters-table/parameters-table.component.scss
index 4f4835071..1f6337945 100644
--- a/libs/core/src/lib/parameters-table/parameters-table.component.scss
+++ b/libs/core/src/lib/parameters-table/parameters-table.component.scss
@@ -1,10 +1,10 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .table-header-button {
   padding: rhythm(1);
 }
 
-pa-input  {
+pa-input {
   padding: rhythm(1) 0;
   width: 100%;
-}
\ No newline at end of file
+}
diff --git a/libs/core/src/lib/unauthorized-feature/unauthorized-feature-modal.component.scss b/libs/core/src/lib/unauthorized-feature/unauthorized-feature-modal.component.scss
index a3e16894f..24d411bd8 100644
--- a/libs/core/src/lib/unauthorized-feature/unauthorized-feature-modal.component.scss
+++ b/libs/core/src/lib/unauthorized-feature/unauthorized-feature-modal.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .title-l {
   margin-bottom: rhythm(0.5);
diff --git a/libs/sistema/src/lib/back-button/back-button.component.scss b/libs/sistema/src/lib/back-button/back-button.component.scss
index 8b6a957a8..ba6cdbfdd 100644
--- a/libs/sistema/src/lib/back-button/back-button.component.scss
+++ b/libs/sistema/src/lib/back-button/back-button.component.scss
@@ -1,4 +1,4 @@
-@import '../../../styles/variables';
+@use '../../../styles/variables' as *;
 
 :host {
   pa-icon {
diff --git a/libs/sistema/src/lib/badge/badge.component.scss b/libs/sistema/src/lib/badge/badge.component.scss
index 662892e1a..67d5e6724 100644
--- a/libs/sistema/src/lib/badge/badge.component.scss
+++ b/libs/sistema/src/lib/badge/badge.component.scss
@@ -1,4 +1,5 @@
-@import '../../../styles/variables';
+@use '../../../styles/variables' as *;
+@use '../../../theme/tokens/_typography.tokens.scss' as typography;
 
 :host {
   align-items: center;
@@ -11,6 +12,10 @@
   justify-content: space-between;
   padding: 0 rhythm(1);
 
+  &.overline {
+    @include typography.overline();
+  }
+
   .icon-and-text {
     align-items: center;
     display: flex;
diff --git a/libs/sistema/src/lib/button-mini/button-mini.component.scss b/libs/sistema/src/lib/button-mini/button-mini.component.scss
index 69b94ecc5..198bec0a4 100644
--- a/libs/sistema/src/lib/button-mini/button-mini.component.scss
+++ b/libs/sistema/src/lib/button-mini/button-mini.component.scss
@@ -1,4 +1,4 @@
-@import '../../../styles/variables';
+@use '../../../styles/variables' as *;
 
 .nsi-mini-button {
   @include title-xs();
diff --git a/libs/sistema/src/lib/cards/action-card/action-card.component.scss b/libs/sistema/src/lib/cards/action-card/action-card.component.scss
index 5fe8f2c6f..eed649ac0 100644
--- a/libs/sistema/src/lib/cards/action-card/action-card.component.scss
+++ b/libs/sistema/src/lib/cards/action-card/action-card.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../styles/variables';
+@use '../../../../styles/variables' as *;
 
 $card-height: rhythm(24);
 :host {
diff --git a/libs/sistema/src/lib/cards/info-card/info-card.component.scss b/libs/sistema/src/lib/cards/info-card/info-card.component.scss
index b625dc68c..9c5dd61ee 100644
--- a/libs/sistema/src/lib/cards/info-card/info-card.component.scss
+++ b/libs/sistema/src/lib/cards/info-card/info-card.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../styles/variables';
+@use '../../../../styles/variables' as *;
 
 :host {
   --info-card-background: #{$color-neutral-lightest};
diff --git a/libs/sistema/src/lib/dropdown-button/dropdown-button.component.scss b/libs/sistema/src/lib/dropdown-button/dropdown-button.component.scss
index da2533021..95b5b5b66 100644
--- a/libs/sistema/src/lib/dropdown-button/dropdown-button.component.scss
+++ b/libs/sistema/src/lib/dropdown-button/dropdown-button.component.scss
@@ -1,4 +1,4 @@
-@import '../../../styles/variables';
+@use '../../../styles/variables' as *;
 
 :host {
   display: block;
diff --git a/libs/sistema/src/lib/folder-list/folder-list.component.scss b/libs/sistema/src/lib/folder-list/folder-list.component.scss
index 541aaff22..75fe92f10 100644
--- a/libs/sistema/src/lib/folder-list/folder-list.component.scss
+++ b/libs/sistema/src/lib/folder-list/folder-list.component.scss
@@ -1,4 +1,4 @@
-@import '../../../styles/variables';
+@use '../../../styles/variables' as *;
 
 ul.folder-list {
   margin: 0;
diff --git a/libs/sistema/src/lib/folder-tree/recursive-folder-tree/recursive-folder-tree.component.scss b/libs/sistema/src/lib/folder-tree/recursive-folder-tree/recursive-folder-tree.component.scss
index 9fa8388c8..41b858cda 100644
--- a/libs/sistema/src/lib/folder-tree/recursive-folder-tree/recursive-folder-tree.component.scss
+++ b/libs/sistema/src/lib/folder-tree/recursive-folder-tree/recursive-folder-tree.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../styles/variables';
+@use '../../../../styles/variables' as *;
 
 :host {
   display: block;
diff --git a/libs/sistema/src/lib/home-container/home-container.component.scss b/libs/sistema/src/lib/home-container/home-container.component.scss
index 6dc75b748..030d38abe 100644
--- a/libs/sistema/src/lib/home-container/home-container.component.scss
+++ b/libs/sistema/src/lib/home-container/home-container.component.scss
@@ -1,4 +1,4 @@
-@import '../../../styles/variables';
+@use '../../../styles/variables' as *;
 
 :host {
   display: flex;
diff --git a/libs/sistema/src/lib/json-viewer/json-viewer.component.scss b/libs/sistema/src/lib/json-viewer/json-viewer.component.scss
index b872d688c..52d256d57 100644
--- a/libs/sistema/src/lib/json-viewer/json-viewer.component.scss
+++ b/libs/sistema/src/lib/json-viewer/json-viewer.component.scss
@@ -1,4 +1,4 @@
-@import '../../../styles/variables';
+@use '../../../styles/variables' as *;
 
 :host {
   pa-table ::ng-deep .pa-table-grid {
diff --git a/libs/sistema/src/lib/label/label.component.scss b/libs/sistema/src/lib/label/label.component.scss
index 307be765c..966b9c37d 100644
--- a/libs/sistema/src/lib/label/label.component.scss
+++ b/libs/sistema/src/lib/label/label.component.scss
@@ -1,4 +1,4 @@
-@import '../../../styles/variables';
+@use '../../../styles/variables' as *;
 
 pa-chip-closeable ::ng-deep .body-s {
   font-weight: $font-weight-semi-bold;
diff --git a/libs/sistema/src/lib/labels-expander/labels-expander.component.scss b/libs/sistema/src/lib/labels-expander/labels-expander.component.scss
index 4695e2069..3abf5efbb 100644
--- a/libs/sistema/src/lib/labels-expander/labels-expander.component.scss
+++ b/libs/sistema/src/lib/labels-expander/labels-expander.component.scss
@@ -1,4 +1,4 @@
-@import '../../../styles/variables';
+@use '../../../styles/variables' as *;
 
 .label-selector {
   padding: rhythm(1) 0 rhythm(2) rhythm(1.5);
diff --git a/libs/sistema/src/lib/password-input/password-input.component.scss b/libs/sistema/src/lib/password-input/password-input.component.scss
index c822743f5..182043be7 100644
--- a/libs/sistema/src/lib/password-input/password-input.component.scss
+++ b/libs/sistema/src/lib/password-input/password-input.component.scss
@@ -1,4 +1,4 @@
-@import '../../../styles/variables';
+@use '../../../styles/variables' as *;
 
 .nsi-password-input {
   .pa-field-container {
diff --git a/libs/sistema/src/lib/progress/progress-bar/progress-bar.component.scss b/libs/sistema/src/lib/progress/progress-bar/progress-bar.component.scss
index 6c6c57af5..c3bf827bb 100644
--- a/libs/sistema/src/lib/progress/progress-bar/progress-bar.component.scss
+++ b/libs/sistema/src/lib/progress/progress-bar/progress-bar.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../styles/variables';
+@use '../../../../styles/variables' as *;
 
 :host {
   display: block;
diff --git a/libs/sistema/src/lib/progress/spinner/spinner.component.scss b/libs/sistema/src/lib/progress/spinner/spinner.component.scss
index f31a06745..e3d630ffc 100644
--- a/libs/sistema/src/lib/progress/spinner/spinner.component.scss
+++ b/libs/sistema/src/lib/progress/spinner/spinner.component.scss
@@ -1,4 +1,4 @@
-@import 'variables';
+@use '../../../../styles/variables' as *;
 
 $inner-size-small: rhythm(4);
 $inner-size-medium: rhythm(6);
diff --git a/libs/sistema/src/lib/segmented-buttons/segmented-buttons.component.scss b/libs/sistema/src/lib/segmented-buttons/segmented-buttons.component.scss
index e5207d5fd..2e39bfab8 100644
--- a/libs/sistema/src/lib/segmented-buttons/segmented-buttons.component.scss
+++ b/libs/sistema/src/lib/segmented-buttons/segmented-buttons.component.scss
@@ -1,4 +1,4 @@
-@import '../../../styles/variables';
+@use '../../../styles/variables' as *;
 
 .exclusive-buttons-container {
   align-items: center;
diff --git a/libs/sistema/src/lib/status/status.component.scss b/libs/sistema/src/lib/status/status.component.scss
index e3f31a8e0..76ffc1cd0 100644
--- a/libs/sistema/src/lib/status/status.component.scss
+++ b/libs/sistema/src/lib/status/status.component.scss
@@ -1,4 +1,4 @@
-@import '../../../styles/variables';
+@use '../../../styles/variables' as *;
 
 .processed {
   color: $color-primary-regular;
diff --git a/libs/sistema/src/lib/sticky-footer/sticky-footer.component.scss b/libs/sistema/src/lib/sticky-footer/sticky-footer.component.scss
index 329219906..fe7bbf643 100644
--- a/libs/sistema/src/lib/sticky-footer/sticky-footer.component.scss
+++ b/libs/sistema/src/lib/sticky-footer/sticky-footer.component.scss
@@ -1,4 +1,4 @@
-@import '../../../styles/variables';
+@use '../../../styles/variables' as *;
 
 :host footer {
   align-items: center;
diff --git a/libs/sistema/src/lib/two-columns-configuration-item/two-columns-configuration-item.component.scss b/libs/sistema/src/lib/two-columns-configuration-item/two-columns-configuration-item.component.scss
index ba9837ac0..457a8f09c 100644
--- a/libs/sistema/src/lib/two-columns-configuration-item/two-columns-configuration-item.component.scss
+++ b/libs/sistema/src/lib/two-columns-configuration-item/two-columns-configuration-item.component.scss
@@ -1,4 +1,4 @@
-@import '../../../styles/variables';
+@use '../../../styles/variables' as *;
 
 :host {
   $gap-columns: rhythm(5);
diff --git a/libs/sistema/styles/_apps-common.scss b/libs/sistema/styles/_apps-common.scss
index 8a1849d42..80d855060 100644
--- a/libs/sistema/styles/_apps-common.scss
+++ b/libs/sistema/styles/_apps-common.scss
@@ -1,12 +1,14 @@
-@import 'variables';
+@use 'variables';
+@use '../../pastanaga-angular/projects/pastanaga-angular/src/styles/theme/spacing.tokens' as spacing;
+@use '../../sistema/theme/tokens/_typography.tokens.scss' as typography;
 
 :root {
-  --app-background-color: $color-light-stronger;
-  --app-topbar-height: #{$height-top-bar};
-  --app-layout-padding-bottom: #{$padding-bottom-page};
-  --app-layout-padding-left: #{$padding-left-page};
-  --app-layout-padding-right: #{$padding-right-page};
-  --app-layout-padding-top: #{$padding-top-page};
+  --app-background-color: variables.$color-light-stronger;
+  --app-topbar-height: #{variables.$height-top-bar};
+  --app-layout-padding-bottom: #{variables.$padding-bottom-page};
+  --app-layout-padding-left: #{variables.$padding-left-page};
+  --app-layout-padding-right: #{variables.$padding-right-page};
+  --app-layout-padding-top: #{variables.$padding-top-page};
 
   // z-index
   --app-zindex-topbar: 1000;
@@ -28,10 +30,10 @@ body {
 }
 
 code {
-  font-weight: $font-weight-semi-bold;
+  font-weight: variables.$font-weight-semi-bold;
 }
 pre > code {
-  font-weight: $font-weight-regular;
+  font-weight: variables.$font-weight-regular;
 }
 
 code.endpoint {
@@ -45,7 +47,7 @@ code.endpoint {
 }
 
 .pa-popup {
-  min-width: rhythm(16);
+  min-width: spacing.rhythm(16);
 }
 
 pa-button.full-width {
@@ -63,12 +65,12 @@ pa-button.full-width {
   position: relative;
 
   .page-title {
-    @include display-s();
-    margin-bottom: rhythm(1);
+    @include typography.display-s();
+    margin-bottom: spacing.rhythm(1);
   }
   .page-description {
-    @include body-m();
-    color: $color-neutral-regular;
+    @include typography.body-m();
+    color: variables.$color-neutral-regular;
   }
 }
 
@@ -78,38 +80,38 @@ ul.nsi-list {
   padding: 0;
 
   li {
-    background: $color-neutral-lightest;
+    background: variables.$color-neutral-lightest;
     cursor: pointer;
     display: flex;
-    gap: rhythm(1);
+    gap: spacing.rhythm(1);
     justify-content: space-between;
-    line-height: rhythm(5);
-    padding-right: rhythm(1);
+    line-height: spacing.rhythm(5);
+    padding-right: spacing.rhythm(1);
     text-transform: capitalize;
-    transition: background $transition-hint;
+    transition: background variables.$transition-hint;
 
     .action-buttons-container {
       display: flex;
       align-items: center;
 
       pa-button {
-        height: rhythm(4);
+        height: spacing.rhythm(4);
         opacity: 0;
-        transition: opacity $transition-hint;
+        transition: opacity variables.$transition-hint;
       }
     }
 
     &:not(:last-of-type) {
-      box-shadow: inset 0 -1px 0px $color-neutral-light;
+      box-shadow: inset 0 -1px 0px variables.$color-neutral-light;
     }
 
     &:hover {
-      background: $color-neutral-lighter;
+      background: variables.$color-neutral-lighter;
     }
 
     &.selected {
-      background: $color-dark-stronger;
-      color: $color-light-stronger;
+      background: variables.$color-dark-stronger;
+      color: variables.$color-light-stronger;
     }
 
     &.selected,
@@ -126,38 +128,38 @@ pa-table.header-above .pa-table-grid--head .pa-table-grid--header {
 }
 
 .separator-line {
-  background-color: $color-neutral-lighter;
+  background-color: variables.$color-neutral-lighter;
   height: 1px;
   width: 100%;
 }
 .separator-word {
-  color: $color-neutral-regular;
+  color: variables.$color-neutral-regular;
   text-transform: lowercase;
 }
 
 .form-container {
   display: flex;
   flex-direction: column;
-  gap: rhythm(2);
+  gap: spacing.rhythm(2);
 
   &.small-gap {
-    gap: rhythm(1.5);
+    gap: spacing.rhythm(1.5);
   }
 
   .label-field-container {
     display: flex;
     flex-direction: column;
-    gap: rhythm(1);
+    gap: spacing.rhythm(1);
   }
 }
 
 .inline-form {
   align-items: center;
   display: flex;
-  gap: rhythm(2);
+  gap: spacing.rhythm(2);
 
   &.small-gap {
-    gap: rhythm(1);
+    gap: spacing.rhythm(1);
   }
   &.full-width > *:not(span) {
     flex: 1 0 auto;
@@ -169,16 +171,16 @@ pa-table.header-above .pa-table-grid--head .pa-table-grid--header {
 }
 
 .container-with-border {
-  border: 1px solid $color-neutral-lighter;
-  border-radius: rhythm(1);
-  padding: rhythm(2);
+  border: 1px solid variables.$color-neutral-lighter;
+  border-radius: spacing.rhythm(1);
+  padding: spacing.rhythm(2);
 }
 
 a.accent-link {
-  color: $color-text-link-accent;
+  color: variables.$color-text-link-accent;
 
   &:hover {
-    color: $color-text-link-accent-hover;
+    color: variables.$color-text-link-accent-hover;
   }
 }
 
@@ -197,7 +199,7 @@ pa-checkbox.unauthorized,
 pa-toggle.unauthorized {
   align-items: center;
   display: flex;
-  gap: rhythm(1);
+  gap: spacing.rhythm(1);
   justify-content: space-between;
 
   .pa-toggle {
@@ -205,15 +207,15 @@ pa-toggle.unauthorized {
   }
 }
 pa-toggle.unauthorized {
-  padding-right: rhythm(1);
+  padding-right: spacing.rhythm(1);
 }
 .beta-option {
   align-items: center;
   display: flex;
-  gap: rhythm(1);
+  gap: spacing.rhythm(1);
   pa-radio {
     flex: 1 0 auto;
-    max-width: calc(100% - #{rhythm(5)} - #{rhythm(0.5)});
+    max-width: calc(100% - #{spacing.rhythm(5)} - #{spacing.rhythm(0.5)});
   }
 }
 pa-option pa-icon {
@@ -224,7 +226,7 @@ pa-option pa-icon {
   justify-content: center;
 
   pa-button {
-    min-width: rhythm(16);
+    min-width: spacing.rhythm(16);
     width: unset;
   }
 }
diff --git a/libs/sistema/styles/_variables.scss b/libs/sistema/styles/_variables.scss
index 78753bb17..40114ad08 100644
--- a/libs/sistema/styles/_variables.scss
+++ b/libs/sistema/styles/_variables.scss
@@ -1,15 +1,15 @@
-@import '../../pastanaga-angular/projects/pastanaga-angular/src/styles/variables';
+@use '../../pastanaga-angular/projects/pastanaga-angular/src/styles/variables';
+@use '../../pastanaga-angular/projects/pastanaga-angular/src/styles/theme/spacing.tokens' as spacing;
+@forward 'mixins';
 
-@import 'mixins';
+$color-text-link-accent: variables.$color-primary-regular;
+$color-text-link-accent-hover: variables.$color-primary-strong;
 
-$color-text-link-accent: $color-primary-regular;
-$color-text-link-accent-hover: $color-primary-strong;
+$height-top-bar: spacing.rhythm(9);
+$padding-top-page: spacing.rhythm(4);
+$padding-bottom-page: spacing.rhythm(4);
+$padding-right-page: spacing.rhythm(4);
+$padding-left-page: spacing.rhythm(6);
 
-$height-top-bar: rhythm(9);
-$padding-top-page: rhythm(4);
-$padding-bottom-page: rhythm(4);
-$padding-right-page: rhythm(4);
-$padding-left-page: rhythm(6);
-
-$width-sidenav: rhythm(26);
-$scrollbar-width: rhythm(2);
+$width-sidenav: spacing.rhythm(26);
+$scrollbar-width: spacing.rhythm(2);
diff --git a/libs/sistema/theme/_fonts.scss b/libs/sistema/theme/_fonts.scss
index ca1537328..7a9157581 100644
--- a/libs/sistema/theme/_fonts.scss
+++ b/libs/sistema/theme/_fonts.scss
@@ -1 +1 @@
-@import './fonts/source-code-pro';
+@forward './fonts/source-code-pro';
diff --git a/libs/sistema/theme/tokens/_body.tokens.scss b/libs/sistema/theme/tokens/_body.tokens.scss
index c48d2a282..69e3de68c 100644
--- a/libs/sistema/theme/tokens/_body.tokens.scss
+++ b/libs/sistema/theme/tokens/_body.tokens.scss
@@ -1,4 +1,4 @@
-@import './palette.tokens';
+@forward './palette.tokens';
 
 $color-text-link-regular: inherit;
 $color-text-link-regular-hover: inherit;
diff --git a/libs/sistema/theme/tokens/_buttons.tokens.scss b/libs/sistema/theme/tokens/_buttons.tokens.scss
index 9508f6234..4e8529367 100644
--- a/libs/sistema/theme/tokens/_buttons.tokens.scss
+++ b/libs/sistema/theme/tokens/_buttons.tokens.scss
@@ -1,47 +1,48 @@
-@import './palette.tokens';
-@import '../../../pastanaga-angular/projects/pastanaga-angular/src/styles/theme/spacing.tokens';
-@import '../../../pastanaga-angular/projects/pastanaga-angular/src/styles/theme/typography.tokens';
+@use './palette.tokens' as palette;
+@use '../../../pastanaga-angular/projects/pastanaga-angular/src/styles/theme/_palette.tokens' as pastanaga-palette;
+@use '../../../pastanaga-angular/projects/pastanaga-angular/src/styles/theme/spacing.tokens' as spacing;
+@use '../../../pastanaga-angular/projects/pastanaga-angular/src/styles/theme/typography.tokens';
 
 //=====================================
 // BUTTONS
 //=====================================
-$border-radius-button: $border-radius-default;
+$border-radius-button: spacing.$border-radius-default;
 
 // Borders
-$border-button-primary-basic: 1px solid $color-primary-light;
-$border-button-primary-basic-hover: 1px solid $color-primary-light;
-$border-button-primary-basic-active: 1px solid $color-primary-light;
+$border-button-primary-basic: 1px solid palette.$color-primary-light;
+$border-button-primary-basic-hover: 1px solid palette.$color-primary-light;
+$border-button-primary-basic-active: 1px solid palette.$color-primary-light;
 
-$border-button-secondary-basic: 1px solid $color-neutral-light;
-$border-button-secondary-basic-hover: 1px solid $color-neutral-light;
-$border-button-secondary-basic-active: 1px solid $color-neutral-light;
+$border-button-secondary-basic: 1px solid palette.$color-neutral-light;
+$border-button-secondary-basic-hover: 1px solid palette.$color-neutral-light;
+$border-button-secondary-basic-active: 1px solid palette.$color-neutral-light;
 
-$border-button-inverted-basic: 1px solid $color-neutral-light;
-$border-button-inverted-basic-hover: 1px solid $color-neutral-light;
-$border-button-inverted-basic-active: 1px solid $color-neutral-light;
+$border-button-inverted-basic: 1px solid palette.$color-neutral-light;
+$border-button-inverted-basic-hover: 1px solid palette.$color-neutral-light;
+$border-button-inverted-basic-active: 1px solid palette.$color-neutral-light;
 
-$border-button-destructive-basic: 1px solid $color-secondary-strong;
-$border-button-destructive-basic-hover: 1px solid $color-secondary-strong;
-$border-button-destructive-basic-active: 1px solid $color-secondary-strong;
+$border-button-destructive-basic: 1px solid palette.$color-secondary-strong;
+$border-button-destructive-basic-hover: 1px solid palette.$color-secondary-strong;
+$border-button-destructive-basic-active: 1px solid palette.$color-secondary-strong;
 
-$border-button-basic-disabled: 1px solid $color-neutral-lighter;
-$border-button-inverted-basic-disabled: 1px solid $color-neutral-inverted-lighter;
+$border-button-basic-disabled: 1px solid palette.$color-neutral-lighter;
+$border-button-inverted-basic-disabled: 1px solid pastanaga-palette.$color-neutral-inverted-lighter;
 
 // Sizes
-$padding-sides-button-large: rhythm(2);
+$padding-sides-button-large: spacing.rhythm(2);
 
-$padding-left-button-icon-text-large: rhythm(1.5);
-$padding-right-button-icon-text-large: rhythm(2);
+$padding-left-button-icon-text-large: spacing.rhythm(1.5);
+$padding-right-button-icon-text-large: spacing.rhythm(2);
 
-$padding-button-icon-medium: rhythm(1);
-$padding-button-icon-large: rhythm(1);
+$padding-button-icon-medium: spacing.rhythm(1);
+$padding-button-icon-large: spacing.rhythm(1);
 
-$font-size-button-medium: font-size(s);
-$font-size-button-large: font-size(s);
+$font-size-button-medium: typography.font-size(s);
+$font-size-button-large: typography.font-size(s);
 
-$height-button-small: rhythm(4);
-$height-button-medium: rhythm(5);
-$height-button-large: rhythm(6);
+$height-button-small: spacing.rhythm(4);
+$height-button-medium: spacing.rhythm(5);
+$height-button-large: spacing.rhythm(6);
 
 // Shadows
 $shadow-button-solid-hover: none;
@@ -51,65 +52,65 @@ $shadow-button-basic-hover: none;
 // PRIMARY
 //---------------------------------------------------------------
 
-$color-background-button-primary-solid-hover: $color-primary-strong;
-$color-background-button-primary-solid-active: $color-primary-stronger;
+$color-background-button-primary-solid-hover: palette.$color-primary-strong;
+$color-background-button-primary-solid-active: palette.$color-primary-stronger;
 
-$color-text-button-primary-basic: $color-primary-regular;
-$color-text-button-primary-basic-hover: $color-primary-regular;
-$color-text-button-primary-basic-active: $color-primary-regular;
+$color-text-button-primary-basic: palette.$color-primary-regular;
+$color-text-button-primary-basic-hover: palette.$color-primary-regular;
+$color-text-button-primary-basic-active: palette.$color-primary-regular;
 
 //---------------------------------------------------------------
 // SECONDARY
 //---------------------------------------------------------------
 // solid
-$color-text-button-secondary-solid: $color-light-stronger;
-$color-text-button-secondary-solid-hover: $color-light-stronger;
-$color-text-button-secondary-solid-active: $color-light-stronger;
+$color-text-button-secondary-solid: palette.$color-light-stronger;
+$color-text-button-secondary-solid-hover: palette.$color-light-stronger;
+$color-text-button-secondary-solid-active: palette.$color-light-stronger;
 
-$color-background-button-secondary-solid: $color-dark-stronger;
-$color-background-button-secondary-solid-hover: $color-dark-stronger;
-$color-background-button-secondary-solid-active: $color-neutral-regular;
+$color-background-button-secondary-solid: palette.$color-dark-stronger;
+$color-background-button-secondary-solid-hover: palette.$color-dark-stronger;
+$color-background-button-secondary-solid-active: palette.$color-neutral-regular;
 
 //basic
-$color-background-button-secondary-basic-hover: $color-neutral-light;
-$color-background-button-secondary-basic-active: $color-neutral-regular;
-$color-text-button-secondary-basic-active: $color-light-stronger;
+$color-background-button-secondary-basic-hover: palette.$color-neutral-light;
+$color-background-button-secondary-basic-active: palette.$color-neutral-regular;
+$color-text-button-secondary-basic-active: palette.$color-light-stronger;
 
 //---------------------------------------------------------------
 // DESTRUCTIVE
 //---------------------------------------------------------------
 // solid
-$color-text-button-destructive-solid: $color-dark-stronger;
-$color-text-button-destructive-solid-hover: $color-light-stronger;
-$color-text-button-destructive-solid-active: $color-light-stronger;
+$color-text-button-destructive-solid: palette.$color-dark-stronger;
+$color-text-button-destructive-solid-hover: palette.$color-light-stronger;
+$color-text-button-destructive-solid-active: palette.$color-light-stronger;
 
-$color-background-button-destructive-solid: $color-secondary-regular;
-$color-background-button-destructive-solid-hover: $color-secondary-strong;
-$color-background-button-destructive-solid-active: $color-secondary-stronger;
+$color-background-button-destructive-solid: palette.$color-secondary-regular;
+$color-background-button-destructive-solid-hover: palette.$color-secondary-strong;
+$color-background-button-destructive-solid-active: palette.$color-secondary-stronger;
 
 // basic
-$color-text-button-destructive-basic: $color-secondary-strong;
-$color-text-button-destructive-basic-hover: $color-secondary-stronger;
-$color-text-button-destructive-basic-active: $color-secondary-stronger;
+$color-text-button-destructive-basic: palette.$color-secondary-strong;
+$color-text-button-destructive-basic-hover: palette.$color-secondary-stronger;
+$color-text-button-destructive-basic-active: palette.$color-secondary-stronger;
 
-$color-background-button-destructive-basic-hover: $color-secondary-lightest;
-$color-background-button-destructive-basic-active: $color-secondary-lighter;
+$color-background-button-destructive-basic-hover: palette.$color-secondary-lightest;
+$color-background-button-destructive-basic-active: palette.$color-secondary-lighter;
 
 //---------------------------------------------------------------
 // INVERTED
 //---------------------------------------------------------------
-$color-text-button-inverted-solid: $color-neutral-regular;
-$color-text-button-inverted-solid-hover: $color-dark-stronger;
-$color-text-button-inverted-solid-active: $color-light-stronger;
+$color-text-button-inverted-solid: palette.$color-neutral-regular;
+$color-text-button-inverted-solid-hover: palette.$color-dark-stronger;
+$color-text-button-inverted-solid-active: palette.$color-light-stronger;
 
-$color-background-button-inverted-solid: $color-neutral-lightest;
-$color-background-button-inverted-solid-hover: $color-neutral-lightest;
-$color-background-button-inverted-solid-active: $color-neutral-regular;
+$color-background-button-inverted-solid: palette.$color-neutral-lightest;
+$color-background-button-inverted-solid-hover: palette.$color-neutral-lightest;
+$color-background-button-inverted-solid-active: palette.$color-neutral-regular;
 
 //---------------------------------------------------------------
 // DISABLED
 //---------------------------------------------------------------
-$color-text-button-solid-disabled: $color-light-stronger;
-$color-text-button-basic-disabled: $color-neutral-lighter;
+$color-text-button-solid-disabled: palette.$color-light-stronger;
+$color-text-button-basic-disabled: palette.$color-neutral-lighter;
 
-$color-background-button-solid-disabled: $color-neutral-lighter;
+$color-background-button-solid-disabled: palette.$color-neutral-lighter;
diff --git a/libs/sistema/theme/tokens/_card.tokens.scss b/libs/sistema/theme/tokens/_card.tokens.scss
index d1e4b603b..20b1071fc 100644
--- a/libs/sistema/theme/tokens/_card.tokens.scss
+++ b/libs/sistema/theme/tokens/_card.tokens.scss
@@ -1,3 +1,3 @@
-@import '../../../pastanaga-angular/projects/pastanaga-angular/src/styles/theme/spacing.tokens';
+@use '../../../pastanaga-angular/projects/pastanaga-angular/src/styles/theme/spacing.tokens' as spacing;
 
-$border-radius-card: rhythm(1);
+$border-radius-card: spacing.rhythm(1);
diff --git a/libs/sistema/theme/tokens/_chips.tokens.scss b/libs/sistema/theme/tokens/_chips.tokens.scss
index 928f755e4..8c2cd3fc2 100644
--- a/libs/sistema/theme/tokens/_chips.tokens.scss
+++ b/libs/sistema/theme/tokens/_chips.tokens.scss
@@ -1,12 +1,12 @@
-@import './palette.tokens';
-@import '../../../pastanaga-angular/projects/pastanaga-angular/src/styles/theme/spacing.tokens';
-@import '../../../pastanaga-angular/projects/pastanaga-angular/src/styles/theme/typography.tokens';
+@use './palette.tokens' as palette;
+@use '../../../pastanaga-angular/projects/pastanaga-angular/src/styles/theme/spacing.tokens' as spacing;
+@use '../../../pastanaga-angular/projects/pastanaga-angular/src/styles/theme/typography.tokens' as typography;
 
-$color-background-chip-default-selected: $color-neutral-lightest;
-$border-chip-selected: 1px solid $color-dark-stronger;
+$color-background-chip-default-selected: palette.$color-neutral-lightest;
+$border-chip-selected: 1px solid palette.$color-dark-stronger;
 
-$border-radius-chip: $border-radius-default;
+$border-radius-chip: spacing.$border-radius-default;
 
-$font-size-chip: font-size(xs);
+$font-size-chip: typography.font-size(xs);
 
-$padding-chip: rhythm(0.5) rhythm(1);
+$padding-chip: spacing.rhythm(0.5) spacing.rhythm(1);
diff --git a/libs/sistema/theme/tokens/_expander.tokens.scss b/libs/sistema/theme/tokens/_expander.tokens.scss
index 00b0a5092..c8e08621e 100644
--- a/libs/sistema/theme/tokens/_expander.tokens.scss
+++ b/libs/sistema/theme/tokens/_expander.tokens.scss
@@ -1,19 +1,19 @@
-@import './palette.tokens';
-@import '../../../pastanaga-angular/projects/pastanaga-angular/src/styles/theme/spacing.tokens';
+@use './palette.tokens' as palette;
+@forward '../../../pastanaga-angular/projects/pastanaga-angular/src/styles/theme/spacing.tokens';
 
-$box-shadow-border-bottom: inset 0 -1px 0 $color-neutral-lighter;
-$box-shadow-border-top: inset 0 1px 0 $color-neutral-light;
+$box-shadow-border-bottom: inset 0 -1px 0 palette.$color-neutral-lighter;
+$box-shadow-border-top: inset 0 1px 0 palette.$color-neutral-light;
 
 // Collapsed theme
-$background-color-collapsed-expander-header: $color-neutral-lightest;
-$background-color-collapsed-expander-header-hover: $color-neutral-lighter;
+$background-color-collapsed-expander-header: palette.$color-neutral-lightest;
+$background-color-collapsed-expander-header-hover: palette.$color-neutral-lighter;
 $box-shadow-collapsed-expander-header: $box-shadow-border-bottom;
-$color-collapsed-expander-header-title: $color-dark-stronger;
-$color-collapsed-expander-header-icon: $color-dark-stronger;
+$color-collapsed-expander-header-title: palette.$color-dark-stronger;
+$color-collapsed-expander-header-icon: palette.$color-dark-stronger;
 
 // Expanded theme
-$background-color-expanded-expander-header: $color-neutral-lighter;
-$background-color-expanded-expander-header-hover: $color-neutral-lighter;
+$background-color-expanded-expander-header: palette.$color-neutral-lighter;
+$background-color-expanded-expander-header-hover: palette.$color-neutral-lighter;
 $box-shadow-expanded-expander-header: none;
-$color-expanded-expander-header-title: $color-dark-stronger;
-$color-expanded-expander-header-icon: $color-dark-stronger;
+$color-expanded-expander-header-title: palette.$color-dark-stronger;
+$color-expanded-expander-header-icon: palette.$color-dark-stronger;
diff --git a/libs/sistema/theme/tokens/_menu.tokens.scss b/libs/sistema/theme/tokens/_menu.tokens.scss
index b74787572..92e3f0cc7 100644
--- a/libs/sistema/theme/tokens/_menu.tokens.scss
+++ b/libs/sistema/theme/tokens/_menu.tokens.scss
@@ -1,7 +1,7 @@
-@import './palette.tokens';
+@use './palette.tokens' as palette;
 
-$color-text-menu-option-destructive: $color-secondary-stronger;
-$color-background-menu-option-destructive-hover: $color-secondary-lightest;
-$color-background-menu-option-destructive-active: $color-secondary-lighter;
+$color-text-menu-option-destructive: palette.$color-secondary-stronger;
+$color-background-menu-option-destructive-hover: palette.$color-secondary-lightest;
+$color-background-menu-option-destructive-active: palette.$color-secondary-lighter;
 
-$color-border-menu-separator: $color-neutral-lighter;
+$color-border-menu-separator: palette.$color-neutral-lighter;
diff --git a/libs/sistema/theme/tokens/_modal.tokens.scss b/libs/sistema/theme/tokens/_modal.tokens.scss
index 08cd2064d..eae19d18d 100644
--- a/libs/sistema/theme/tokens/_modal.tokens.scss
+++ b/libs/sistema/theme/tokens/_modal.tokens.scss
@@ -1,3 +1,3 @@
-@import '../../../pastanaga-angular/projects/pastanaga-angular/src/styles/theme/spacing.tokens';
+@use '../../../pastanaga-angular/projects/pastanaga-angular/src/styles/theme/spacing.tokens' as spacing;
 
-$width-confirm-dialog: rhythm(56);
+$width-confirm-dialog: spacing.rhythm(56);
diff --git a/libs/sistema/theme/tokens/_popover.tokens.scss b/libs/sistema/theme/tokens/_popover.tokens.scss
index bb27dc169..87b073390 100644
--- a/libs/sistema/theme/tokens/_popover.tokens.scss
+++ b/libs/sistema/theme/tokens/_popover.tokens.scss
@@ -1,5 +1,5 @@
-@import 'palette.tokens';
-@import 'spacing.tokens';
+@use 'palette.tokens' as palette;
+@forward 'spacing.tokens';
 
-$color-background-popover: $color-dark-stronger;
-$color-text-popover: $color-neutral-lightest;
+$color-background-popover: palette.$color-dark-stronger;
+$color-text-popover: palette.$color-neutral-lightest;
diff --git a/libs/sistema/theme/tokens/_scrollbar.tokens.scss b/libs/sistema/theme/tokens/_scrollbar.tokens.scss
index f2a38026f..255c497d8 100644
--- a/libs/sistema/theme/tokens/_scrollbar.tokens.scss
+++ b/libs/sistema/theme/tokens/_scrollbar.tokens.scss
@@ -1,13 +1,13 @@
-@import './palette.tokens';
-@import '../../../pastanaga-angular/projects/pastanaga-angular/src/styles/theme/spacing.tokens';
+@use './palette.tokens' as palette;
+@use '../../../pastanaga-angular/projects/pastanaga-angular/src/styles/theme/spacing.tokens' as spacing;
 
 $scrollbar-border-radius: 0;
 
 $scrollbar-padding-desktop: 0;
-$scrollbar-width-desktop: rhythm(1);
+$scrollbar-width-desktop: spacing.rhythm(1);
 
-$color-scrollbar-thumb: $color-dark-stronger;
-$color-scrollbar-thumb-active: $color-dark-stronger;
+$color-scrollbar-thumb: palette.$color-dark-stronger;
+$color-scrollbar-thumb-active: palette.$color-dark-stronger;
 
 $color-scrollbar-thumb-border: transparent;
 $color-scrollbar-thumb-border-active: transparent;
diff --git a/libs/sistema/theme/tokens/_side-nav.tokens.scss b/libs/sistema/theme/tokens/_side-nav.tokens.scss
index 8e5c62e52..dc1c8c2fa 100644
--- a/libs/sistema/theme/tokens/_side-nav.tokens.scss
+++ b/libs/sistema/theme/tokens/_side-nav.tokens.scss
@@ -1,6 +1,6 @@
-@import 'typography.tokens';
-@import '../../../pastanaga-angular/projects/pastanaga-angular/src/styles/theme/spacing.tokens';
+@use 'typography.tokens' as typography;
+@use '../../../pastanaga-angular/projects/pastanaga-angular/src/styles/theme/spacing.tokens' as spacing;
 
-$font-size-side-nav-item: font-size(s);
-$line-height-side-nav-item: line-height(m);
-$height-side-nav-item: rhythm(5);
+$font-size-side-nav-item: typography.font-size(s);
+$line-height-side-nav-item: typography.line-height(m);
+$height-side-nav-item: spacing.rhythm(5);
diff --git a/libs/sistema/theme/tokens/_table.tokens.scss b/libs/sistema/theme/tokens/_table.tokens.scss
index af1dd9d4c..4e0cf5823 100644
--- a/libs/sistema/theme/tokens/_table.tokens.scss
+++ b/libs/sistema/theme/tokens/_table.tokens.scss
@@ -1,18 +1,17 @@
-@import './palette.tokens';
-@import './spacing.tokens';
-@import '../../../pastanaga-angular/projects/pastanaga-angular/src/styles/theme/spacing.tokens';
+@use './palette.tokens' as palette;
+@use '../../../pastanaga-angular/projects/pastanaga-angular/src/styles/theme/spacing.tokens' as pastanaga;
 
-$color-text-table-header: $color-dark-stronger;
-$color-text-table-header-row: $color-dark-stronger;
+$color-text-table-header: palette.$color-dark-stronger;
+$color-text-table-header-row: palette.$color-dark-stronger;
 
-$color-border-table: $color-neutral-light;
-$color-border-table-header: $color-neutral-light;
-$color-border-table-header-row: $color-neutral-light;
-$color-border-table-row: $color-neutral-lighter;
+$color-border-table: palette.$color-neutral-light;
+$color-border-table-header: palette.$color-neutral-light;
+$color-border-table-header-row: palette.$color-neutral-light;
+$color-border-table-row: palette.$color-neutral-lighter;
 
-$color-background-table-header: $color-neutral-lightest;
-$color-background-table-header-row: $color-light-stronger;
+$color-background-table-header-row: palette.$color-light-stronger;
+$color-background-table-header: palette.$color-neutral-lightest;
 
-$padding-table-cell-medium: rhythm(0.5) rhythm(2);
-$min-height-table-cell: rhythm(5);
+$padding-table-cell-medium: pastanaga.rhythm(0.5) pastanaga.rhythm(2);
+$min-height-table-cell: pastanaga.rhythm(5);
 $text-transform-table-header: none;
diff --git a/libs/sistema/theme/tokens/_tabs.tokens.scss b/libs/sistema/theme/tokens/_tabs.tokens.scss
index dc0d19267..7e9df6e35 100644
--- a/libs/sistema/theme/tokens/_tabs.tokens.scss
+++ b/libs/sistema/theme/tokens/_tabs.tokens.scss
@@ -1,20 +1,20 @@
-@import './palette.tokens';
-@import './typography.tokens';
-@import '../../../pastanaga-angular/projects/pastanaga-angular/src/styles/theme/spacing.tokens';
+@use './palette.tokens' as palette;
+@use './typography.tokens' as typography;
+@use '../../../pastanaga-angular/projects/pastanaga-angular/src/styles/theme/spacing.tokens' as spacing;
 
-$color-text-tab-link: $color-dark-stronger;
+$color-text-tab-link: palette.$color-dark-stronger;
 
-$color-background-tab-link: $color-light-stronger;
-$color-background-tab-link-active: $color-neutral-lightest;
+$color-background-tab-link: palette.$color-light-stronger;
+$color-background-tab-link-active: palette.$color-neutral-lightest;
 
-$color-tab-slider: $color-neutral-lighter;
+$color-tab-slider: palette.$color-neutral-lighter;
 
-$font-size-tab-item: font-size(m);
-$font-weight-tab-item: $font-weight-regular;
-$font-weight-tab-item-active: $font-weight-semi-bold;
+$font-size-tab-item: typography.font-size(m);
+$font-weight-tab-item: typography.$font-weight-regular;
+$font-weight-tab-item-active: typography.$font-weight-semi-bold;
 
-$gap-between-tabs: rhythm(0.25);
+$gap-between-tabs: spacing.rhythm(0.25);
 
-$padding-tab-item-medium: rhythm(1.5) rhythm(3);
+$padding-tab-item-medium: spacing.rhythm(1.5) spacing.rhythm(3);
 
 $text-transform-tab-item: none;
diff --git a/libs/sistema/theme/tokens/_textfield.tokens.scss b/libs/sistema/theme/tokens/_textfield.tokens.scss
index dbfa780ed..df6c13035 100644
--- a/libs/sistema/theme/tokens/_textfield.tokens.scss
+++ b/libs/sistema/theme/tokens/_textfield.tokens.scss
@@ -1,5 +1,6 @@
-@import './palette.tokens';
-@import './typography.tokens';
+@use './palette.tokens' as palette;
+@use './typography.tokens' as typography;
+@use '../../../pastanaga-angular/projects/pastanaga-angular/src/styles/theme/spacing.tokens' as spacing;
 
 //=====================================
 // SPACING
@@ -9,29 +10,29 @@ $margin-bottom-field: 0;
 //=====================================
 // FONTS
 //=====================================
-$font-weight-label: $font-weight-regular;
+$font-weight-label: typography.$font-weight-regular;
 
 //=====================================
 // COLORS
 //=====================================
-$color-text-field-label-error: $color-secondary-stronger;
-$color-caret-field-control-error: $color-secondary-strong;
+$color-text-field-label-error: palette.$color-secondary-stronger;
+$color-caret-field-control-error: palette.$color-secondary-strong;
 
-$color-background-field-regular: $color-light-stronger;
-$color-background-field-error: $color-secondary-lightest;
+$color-background-field-regular: palette.$color-light-stronger;
+$color-background-field-error: palette.$color-secondary-lightest;
 
 //=====================================
 // BORDERS
 //=====================================
-$border-color-field-regular: $color-neutral-light;
-$border-color-field-regular-hover: $color-neutral-regular;
-$border-color-field-error: $color-secondary-regular;
+$border-color-field-regular: palette.$color-neutral-light;
+$border-color-field-regular-hover: palette.$color-neutral-regular;
+$border-color-field-error: palette.$color-secondary-regular;
 
 //=====================================
 // SPACING and SHADOWS
 //=====================================
-$padding-field-control-top: rhythm(1);
-$height-field-control: calc(#{rhythm(5)} - #{rhythm(0.25)});
+$padding-field-control-top: spacing.rhythm(1);
+$height-field-control: calc(#{spacing.rhythm(5)} - #{spacing.rhythm(0.25)});
 $top-control-label: $padding-field-control-top;
-$translateY-text-field-label: rhythm(3);
-$top-select-chevron: rhythm(1);
+$translateY-text-field-label: spacing.rhythm(3);
+$top-select-chevron: spacing.rhythm(1);
diff --git a/libs/sistema/theme/tokens/_toasts.tokens.scss b/libs/sistema/theme/tokens/_toasts.tokens.scss
index 6ceca2c0d..036604fcf 100644
--- a/libs/sistema/theme/tokens/_toasts.tokens.scss
+++ b/libs/sistema/theme/tokens/_toasts.tokens.scss
@@ -1,33 +1,33 @@
-@import './palette.tokens';
-@import '../../../pastanaga-angular/projects/pastanaga-angular/src/styles/theme/spacing.tokens';
+@use './palette.tokens' as palette;
+@use '../../../pastanaga-angular/projects/pastanaga-angular/src/styles/theme/spacing.tokens' as spacing;
 
 //=====================================
 // COLORS
 //=====================================
-$background-toast-error: $color-secondary-regular;
-$color-toast-error: $color-dark-stronger;
+$background-toast-error: palette.$color-secondary-regular;
+$color-toast-error: palette.$color-dark-stronger;
 
-$background-toast-warning: $color-dark-stronger;
-$color-toast-warning: $color-light-stronger;
+$background-toast-warning: palette.$color-dark-stronger;
+$color-toast-warning: palette.$color-light-stronger;
 
-$background-toast-info: $color-neutral-lighter;
-$color-toast-info: $color-dark-stronger;
+$background-toast-info: palette.$color-neutral-lighter;
+$color-toast-info: palette.$color-dark-stronger;
 
-$background-toast-success: $color-neutral-lighter;
-$color-toast-success: $color-dark-stronger;
+$background-toast-success: palette.$color-neutral-lighter;
+$color-toast-success: palette.$color-dark-stronger;
 
-$background-toast-button-info-hover: rgba($color-dark-stronger, 0.15);
-$background-toast-button-success-hover: rgba($color-dark-stronger, 0.15);
-$background-toast-button-error-hover: rgba($color-dark-stronger, 0.15);
+$background-toast-button-info-hover: rgba(palette.$color-dark-stronger, 0.15);
+$background-toast-button-success-hover: rgba(palette.$color-dark-stronger, 0.15);
+$background-toast-button-error-hover: rgba(palette.$color-dark-stronger, 0.15);
 
-$background-toast-button-info-active: rgba($color-dark-stronger, 0.25);
-$background-toast-button-success-active: rgba($color-dark-stronger, 0.25);
-$background-toast-button-error-active: rgba($color-dark-stronger, 0.25);
+$background-toast-button-info-active: rgba(palette.$color-dark-stronger, 0.25);
+$background-toast-button-success-active: rgba(palette.$color-dark-stronger, 0.25);
+$background-toast-button-error-active: rgba(palette.$color-dark-stronger, 0.25);
 
 //=====================================
 // SPACING
 //=====================================
-$min-width-toast: rhythm(56);
+$min-width-toast: spacing.rhythm(56);
 
-$padding-toast: rhythm(1.5) rhythm(2);
-$padding-toast-with-button: rhythm(1) rhythm(1) rhythm(1) rhythm(2);
+$padding-toast: spacing.rhythm(1.5) spacing.rhythm(2);
+$padding-toast-with-button: spacing.rhythm(1) spacing.rhythm(1) spacing.rhythm(1) spacing.rhythm(2);
diff --git a/libs/sistema/theme/tokens/_toggle.tokens.scss b/libs/sistema/theme/tokens/_toggle.tokens.scss
index 8f47201ec..2726b9325 100644
--- a/libs/sistema/theme/tokens/_toggle.tokens.scss
+++ b/libs/sistema/theme/tokens/_toggle.tokens.scss
@@ -1,24 +1,24 @@
-@import './palette.tokens';
-@import '../../../pastanaga-angular/projects/pastanaga-angular/src/styles/theme/spacing.tokens';
+@use './palette.tokens' as palette;
+@use '../../../pastanaga-angular/projects/pastanaga-angular/src/styles/theme/spacing.tokens' as spacing;
 
 // Checkboxes and radio
-$color-background-toggle-selected: $color-dark-stronger;
-$color-background-toggle-selected-hover: $color-neutral-regular;
-$color-background-toggle-disabled: $color-neutral-lightest;
-$color-background-toggle-unselected-disabled: $color-neutral-lightest;
-$color-background-toggle-indeterminate: $color-light-stronger;
+$color-background-toggle-selected: palette.$color-dark-stronger;
+$color-background-toggle-selected-hover: palette.$color-neutral-regular;
+$color-background-toggle-disabled: palette.$color-neutral-lightest;
+$color-background-toggle-unselected-disabled: palette.$color-neutral-lightest;
+$color-background-toggle-indeterminate: palette.$color-light-stronger;
 
-$color-border-toggle-unselected: $color-dark-stronger;
-$color-border-toggle-unselected-disabled: $color-neutral-light;
+$color-border-toggle-unselected: palette.$color-dark-stronger;
+$color-border-toggle-unselected-disabled: palette.$color-neutral-light;
 
-$color-check-toggle-indeterminate: $color-dark-stronger;
-$color-check-toggle-disabled: $color-neutral-light; //IMPORTANT: it must be an hsl color
+$color-check-toggle-indeterminate: palette.$color-dark-stronger;
+$color-check-toggle-disabled: palette.$color-neutral-light; //IMPORTANT: it must be an hsl color
 
 // Toggles
-$height-toggle: rhythm(2);
-$width-toggle: rhythm(4);
-$margin-toggle-container: rhythm(0.5) 0;
+$height-toggle: spacing.rhythm(2);
+$width-toggle: spacing.rhythm(4);
+$margin-toggle-container: spacing.rhythm(0.5) 0;
 $margin-top-toggle-with-help-label: 0;
 
-$color-background-toggle-slider-selected: $color-success-regular;
-$color-background-toggle-slider-selected-hover: $color-success-strong;
+$color-background-toggle-slider-selected: palette.$color-success-regular;
+$color-background-toggle-slider-selected-hover: palette.$color-success-strong;
diff --git a/libs/sistema/theme/tokens/_typography.tokens.scss b/libs/sistema/theme/tokens/_typography.tokens.scss
index 5eb147c5d..69a99a5fd 100644
--- a/libs/sistema/theme/tokens/_typography.tokens.scss
+++ b/libs/sistema/theme/tokens/_typography.tokens.scss
@@ -1,5 +1,7 @@
-@import './palette.tokens';
-@import './spacing.tokens';
+@use 'sass:map';
+@use './palette.tokens' as palette;
+@use '../../../pastanaga-angular/projects/pastanaga-angular/src/styles/theme/typography.tokens' as typography;
+@use '../../../pastanaga-angular/projects/pastanaga-angular/src/styles/theme/spacing.tokens' as spacing;
 
 // =================================================
 // TYPOGRAPHY
@@ -59,10 +61,10 @@ $font-size: (
   d3-md:  ($font-size-base * 3),      // 48px - 3 rem
 );
 @function font-size($t-shirt-size) {
-  @return map-get($font-size, $t-shirt-size);
+  @return map.get($font-size, $t-shirt-size);
 }
 
-$font-size-overline: rhythm(1);
+$font-size-overline: spacing.rhythm(1);
 $font-size-body-xs: font-size(xxs);
 $font-size-body-s: font-size(xs);
 $font-size-title-xxs: font-size(xs);
@@ -97,7 +99,7 @@ $line-height: (
   d3-md:  ($font-size-base * 2.75),   // 44px - 2.75 rem
 );
 @function line-height($t-shirt-size) {
-  @return map-get($line-height, $t-shirt-size);
+  @return map.get($line-height, $t-shirt-size);
 }
 
 $line-height-body: 1.4;
@@ -142,6 +144,104 @@ $letter-spacing-display-m-md: 0;
 // =================================================
 // SHADOWS
 // =================================================
-$shadow-small: 1px 1px 2px rgba($color-dark-stronger, 0.3);
+$shadow-small: 1px 1px 2px rgba(palette.$color-dark-stronger, 0.3);
 
-$color-text-disabled: $color-neutral-regular;
+$color-text-disabled: palette.$color-neutral-regular;
+
+@mixin overline {
+  font-size: $font-size-overline;
+  line-height: $line-height-overline;
+  letter-spacing: $letter-spacing-overline;
+  font-weight: $font-weight-overline;
+  text-transform: uppercase;
+}
+@mixin body-xs {
+  font-size: $font-size-body-xs;
+  line-height: $line-height-body-xs;
+  letter-spacing: $letter-spacing-body-xs;
+  font-weight: $font-weight-body-xs;
+}
+@mixin body-s {
+  font-size: $font-size-body-s;
+  line-height: $line-height-body-s;
+  letter-spacing: $letter-spacing-body-s;
+  font-weight: $font-weight-body-s;
+}
+@mixin body-m {
+  font-size: typography.$font-size-body-m;
+  line-height: $line-height-body-m;
+  letter-spacing: $letter-spacing-body-m;
+  font-weight: $font-weight-body-m;
+}
+@mixin title-xxs {
+  font-size: $font-size-title-xxs;
+  line-height: $line-height-title-xxs;
+  letter-spacing: $letter-spacing-title-xxs;
+  font-weight: $font-weight-title-xxs;
+}
+@mixin title-xs {
+  font-size: $font-size-title-xs;
+  line-height: $line-height-title-xs;
+  letter-spacing: $letter-spacing-title-xs;
+  font-weight: $font-weight-title-xs;
+}
+@mixin title-s-mobile {
+  font-size: $font-size-title-s;
+  line-height: $line-height-title-s;
+  letter-spacing: $letter-spacing-title-s;
+  font-weight: $font-weight-title-s;
+}
+@mixin title-s {
+  font-size: $font-size-title-s-md;
+  line-height: $line-height-title-s-md;
+  letter-spacing: $letter-spacing-title-s-md;
+  font-weight: $font-weight-title-s;
+}
+@mixin title-m-mobile {
+  font-size: $font-size-title-m;
+  line-height: $line-height-title-m;
+  letter-spacing: $letter-spacing-title-m;
+  font-weight: $font-weight-title-m;
+}
+@mixin title-m {
+  font-size: $font-size-title-m-md;
+  line-height: $line-height-title-m-md;
+  letter-spacing: $letter-spacing-title-m-md;
+  font-weight: $font-weight-title-m;
+}
+@mixin title-l-mobile {
+  font-size: $font-size-title-l;
+  line-height: $line-height-title-l;
+  letter-spacing: $letter-spacing-title-l;
+  font-weight: $font-weight-title-l;
+}
+@mixin title-l {
+  font-size: $font-size-title-l-md;
+  line-height: $line-height-title-l-md;
+  letter-spacing: $letter-spacing-title-l-md;
+  font-weight: $font-weight-title-l;
+}
+@mixin display-s-mobile {
+  font-size: $font-size-display-s;
+  line-height: $line-height-display-s;
+  letter-spacing: $letter-spacing-display-s;
+  font-weight: $font-weight-display-s;
+}
+@mixin display-s {
+  font-size: $font-size-display-s-md;
+  line-height: $line-height-display-s-md;
+  letter-spacing: $letter-spacing-display-s-md;
+  font-weight: $font-weight-display-s;
+}
+@mixin display-m-mobile {
+  font-size: $font-size-display-m;
+  line-height: $line-height-display-m;
+  letter-spacing: $letter-spacing-display-m;
+  font-weight: $font-weight-display-m;
+}
+@mixin display-m {
+  font-size: $font-size-display-m-md;
+  line-height: $line-height-display-m-md;
+  letter-spacing: $letter-spacing-display-m-md;
+  font-weight: $font-weight-display-m;
+}
diff --git a/libs/sync/src/lib/_common-sync.scss b/libs/sync/src/lib/_common-sync.scss
index 1757bd095..9ceda3c5b 100644
--- a/libs/sync/src/lib/_common-sync.scss
+++ b/libs/sync/src/lib/_common-sync.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .page-spacing {
   display: flex;
diff --git a/libs/sync/src/lib/add-sync-page/add-sync-page.component.scss b/libs/sync/src/lib/add-sync-page/add-sync-page.component.scss
index 6df1502cd..f2e077e18 100644
--- a/libs/sync/src/lib/add-sync-page/add-sync-page.component.scss
+++ b/libs/sync/src/lib/add-sync-page/add-sync-page.component.scss
@@ -1,5 +1,5 @@
-@import 'apps/dashboard/src/variables';
-@import '../common-sync';
+@use 'apps/dashboard/src/variables' as *;
+@use '../common-sync';
 
 .inline-form {
   pa-select {
diff --git a/libs/sync/src/lib/configuration-form/configuration-form.component.scss b/libs/sync/src/lib/configuration-form/configuration-form.component.scss
index b1709de2f..68f2619a7 100644
--- a/libs/sync/src/lib/configuration-form/configuration-form.component.scss
+++ b/libs/sync/src/lib/configuration-form/configuration-form.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .toggle-container pa-toggle ::ng-deep .pa-toggle-context {
   justify-content: space-between;
diff --git a/libs/sync/src/lib/folder-selection/folder-selection.component.scss b/libs/sync/src/lib/folder-selection/folder-selection.component.scss
index 3394f2229..5af1987fe 100644
--- a/libs/sync/src/lib/folder-selection/folder-selection.component.scss
+++ b/libs/sync/src/lib/folder-selection/folder-selection.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 header {
   display: flex;
diff --git a/libs/sync/src/lib/home-page/connector/connector.component.scss b/libs/sync/src/lib/home-page/connector/connector.component.scss
index 5d62072da..43cd93387 100644
--- a/libs/sync/src/lib/home-page/connector/connector.component.scss
+++ b/libs/sync/src/lib/home-page/connector/connector.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../../../apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .connector {
   align-items: center;
diff --git a/libs/sync/src/lib/home-page/home-page.component.scss b/libs/sync/src/lib/home-page/home-page.component.scss
index 3b9234023..b7fc7a93f 100644
--- a/libs/sync/src/lib/home-page/home-page.component.scss
+++ b/libs/sync/src/lib/home-page/home-page.component.scss
@@ -1,5 +1,5 @@
-@import 'apps/dashboard/src/variables';
-@import '../common-sync';
+@use 'apps/dashboard/src/variables' as *;
+@use '../common-sync';
 
 section {
   display: flex;
diff --git a/libs/sync/src/lib/sync-details-page/folders-tab/folders-tab.component.scss b/libs/sync/src/lib/sync-details-page/folders-tab/folders-tab.component.scss
index 310c547d6..3214ccc42 100644
--- a/libs/sync/src/lib/sync-details-page/folders-tab/folders-tab.component.scss
+++ b/libs/sync/src/lib/sync-details-page/folders-tab/folders-tab.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .folders-tab {
   position: relative;
diff --git a/libs/sync/src/lib/sync-details-page/sync-details-page.component.scss b/libs/sync/src/lib/sync-details-page/sync-details-page.component.scss
index d5aea9237..045de5ce7 100644
--- a/libs/sync/src/lib/sync-details-page/sync-details-page.component.scss
+++ b/libs/sync/src/lib/sync-details-page/sync-details-page.component.scss
@@ -1,5 +1,5 @@
-@import 'apps/dashboard/src/variables';
-@import '../common-sync';
+@use 'apps/dashboard/src/variables' as *;
+@use '../common-sync';
 
 .details-header {
   align-items: center;
diff --git a/libs/sync/src/lib/sync-details-page/sync-settings/sync-settings.component.scss b/libs/sync/src/lib/sync-details-page/sync-settings/sync-settings.component.scss
index 4bf007dd0..aaccbf4d5 100644
--- a/libs/sync/src/lib/sync-details-page/sync-settings/sync-settings.component.scss
+++ b/libs/sync/src/lib/sync-details-page/sync-settings/sync-settings.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .sync-settings-container {
   display: flex;
diff --git a/libs/user/src/lib/_user-layout.scss b/libs/user/src/lib/_user-layout.scss
index ee5674cc6..98c6ce834 100644
--- a/libs/user/src/lib/_user-layout.scss
+++ b/libs/user/src/lib/_user-layout.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .main-container {
   display: flex;
diff --git a/libs/user/src/lib/check-mail/check-mail.component.scss b/libs/user/src/lib/check-mail/check-mail.component.scss
index 68d39ca25..3613ac5bf 100644
--- a/libs/user/src/lib/check-mail/check-mail.component.scss
+++ b/libs/user/src/lib/check-mail/check-mail.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .check-email-container {
   padding: 0 rhythm(24);
diff --git a/libs/user/src/lib/consent/consent.component.scss b/libs/user/src/lib/consent/consent.component.scss
index 4bf76eea5..bf3d47752 100644
--- a/libs/user/src/lib/consent/consent.component.scss
+++ b/libs/user/src/lib/consent/consent.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .user-background {
   align-items: center;
diff --git a/libs/user/src/lib/login/login.component.scss b/libs/user/src/lib/login/login.component.scss
index 31b9f0f25..a0f9ee6c2 100644
--- a/libs/user/src/lib/login/login.component.scss
+++ b/libs/user/src/lib/login/login.component.scss
@@ -1,5 +1,5 @@
-@import 'apps/dashboard/src/variables';
-@import '../user-layout';
+@use 'apps/dashboard/src/variables' as *;
+@use '../user-layout';
 
 .login_form {
   padding: rhythm(4) 0 0;
diff --git a/libs/user/src/lib/onboarding/_common-step.scss b/libs/user/src/lib/onboarding/_common-step.scss
index 6abe763fa..41f893678 100644
--- a/libs/user/src/lib/onboarding/_common-step.scss
+++ b/libs/user/src/lib/onboarding/_common-step.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .onboarding-form {
   display: flex;
diff --git a/libs/user/src/lib/onboarding/embeddings-model-form/dynamic-fields.component.scss b/libs/user/src/lib/onboarding/embeddings-model-form/dynamic-fields.component.scss
index b9181779b..9fff67237 100644
--- a/libs/user/src/lib/onboarding/embeddings-model-form/dynamic-fields.component.scss
+++ b/libs/user/src/lib/onboarding/embeddings-model-form/dynamic-fields.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .dynamic-fields {
   display: flex;
diff --git a/libs/user/src/lib/onboarding/embeddings-model-form/embeddings-model-form.component.scss b/libs/user/src/lib/onboarding/embeddings-model-form/embeddings-model-form.component.scss
index a4c5c748c..33078cb78 100644
--- a/libs/user/src/lib/onboarding/embeddings-model-form/embeddings-model-form.component.scss
+++ b/libs/user/src/lib/onboarding/embeddings-model-form/embeddings-model-form.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 form.embeddings-model-form {
   display: flex;
diff --git a/libs/user/src/lib/onboarding/onboarding.component.scss b/libs/user/src/lib/onboarding/onboarding.component.scss
index e617ee0e6..48985beb7 100644
--- a/libs/user/src/lib/onboarding/onboarding.component.scss
+++ b/libs/user/src/lib/onboarding/onboarding.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .onboarding-container {
   background: $color-light-stronger;
diff --git a/libs/user/src/lib/onboarding/setting-up/setting-up.component.scss b/libs/user/src/lib/onboarding/setting-up/setting-up.component.scss
index bbedd8ed2..5cb3dafb4 100644
--- a/libs/user/src/lib/onboarding/setting-up/setting-up.component.scss
+++ b/libs/user/src/lib/onboarding/setting-up/setting-up.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .setting-up {
   min-height: rhythm(24);
diff --git a/libs/user/src/lib/onboarding/step1/step1.component.scss b/libs/user/src/lib/onboarding/step1/step1.component.scss
index cfc7612a5..3118b6c3f 100644
--- a/libs/user/src/lib/onboarding/step1/step1.component.scss
+++ b/libs/user/src/lib/onboarding/step1/step1.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .phone-field {
   display: flex;
diff --git a/libs/user/src/lib/onboarding/vector-database-form/vector-database-form.component.scss b/libs/user/src/lib/onboarding/vector-database-form/vector-database-form.component.scss
index 57907c4ef..f043fa0a4 100644
--- a/libs/user/src/lib/onboarding/vector-database-form/vector-database-form.component.scss
+++ b/libs/user/src/lib/onboarding/vector-database-form/vector-database-form.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 :host {
   .toggle-container {
diff --git a/libs/user/src/lib/profile/profile.component.scss b/libs/user/src/lib/profile/profile.component.scss
index e6e03a7c1..94153f1ec 100644
--- a/libs/user/src/lib/profile/profile.component.scss
+++ b/libs/user/src/lib/profile/profile.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .profile {
   padding: 10vh 0;
diff --git a/libs/user/src/lib/recover/recover.component.scss b/libs/user/src/lib/recover/recover.component.scss
index b52ef07d0..19c0399d8 100644
--- a/libs/user/src/lib/recover/recover.component.scss
+++ b/libs/user/src/lib/recover/recover.component.scss
@@ -1,5 +1,5 @@
-@import 'apps/dashboard/src/variables';
-@import '../user-layout';
+@use 'apps/dashboard/src/variables' as *;
+@use '../user-layout';
 
 .main-container {
   gap: rhythm(4);
diff --git a/libs/user/src/lib/reset/reset.component.scss b/libs/user/src/lib/reset/reset.component.scss
index 4dbbf0174..0cbe86e9b 100644
--- a/libs/user/src/lib/reset/reset.component.scss
+++ b/libs/user/src/lib/reset/reset.component.scss
@@ -1,2 +1,2 @@
-@import 'apps/dashboard/src/variables';
-@import '../user-layout';
+@use 'apps/dashboard/src/variables' as *;
+@use '../user-layout';
diff --git a/libs/user/src/lib/signup/signup.component.scss b/libs/user/src/lib/signup/signup.component.scss
index 25603d5ed..f3b71d5f9 100644
--- a/libs/user/src/lib/signup/signup.component.scss
+++ b/libs/user/src/lib/signup/signup.component.scss
@@ -1,5 +1,5 @@
-@import 'apps/dashboard/src/variables';
-@import '../user-layout';
+@use 'apps/dashboard/src/variables' as *;
+@use '../user-layout';
 
 .main-container {
   gap: rhythm(4);
diff --git a/libs/user/src/lib/sso/sso-button.component.scss b/libs/user/src/lib/sso/sso-button.component.scss
index 300eb1289..6bb11e47c 100644
--- a/libs/user/src/lib/sso/sso-button.component.scss
+++ b/libs/user/src/lib/sso/sso-button.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 :host {
   display: flex;
diff --git a/libs/user/src/lib/user-container/user-container.component.scss b/libs/user/src/lib/user-container/user-container.component.scss
index fb9f5f08a..aa7446b1b 100644
--- a/libs/user/src/lib/user-container/user-container.component.scss
+++ b/libs/user/src/lib/user-container/user-container.component.scss
@@ -1,4 +1,4 @@
-@import 'apps/dashboard/src/variables';
+@use 'apps/dashboard/src/variables' as *;
 
 .user-background {
   height: 100%;