diff --git a/.changeset/modern-camels-agree.md b/.changeset/modern-camels-agree.md
new file mode 100644
index 0000000000..b53beb6dbb
--- /dev/null
+++ b/.changeset/modern-camels-agree.md
@@ -0,0 +1,5 @@
+---
+"@frontify/fondue-components": patch
+---
+
+chore: update Sass notation for breaking changes in next version
diff --git a/packages/components/src/components/Box/styles/box.module.scss b/packages/components/src/components/Box/styles/box.module.scss
index 538c05e7ea..705ae3a382 100644
--- a/packages/components/src/components/Box/styles/box.module.scss
+++ b/packages/components/src/components/Box/styles/box.module.scss
@@ -1,17 +1,18 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-@import '../../../helpers/layout.module.scss';
+@use "sass:list";
+@use '../../../helpers/layout.module.scss';
 
 $properties: (display);
-$allProperties: join($properties, $layoutProperties);
+$allProperties: list.join($properties, layout.$layoutProperties);
 
 .root {
-    @include responsive-properties($allProperties);
+    @include layout.responsive-properties($allProperties);
 
     // Default values
     @each $property in $allProperties {
-        @include responsive-default-value($property, initial);
+        @include layout.responsive-default-value($property, initial);
     }
 
-    @include responsive-default-value(display, block);
+    @include layout.responsive-default-value(display, block);
 }
diff --git a/packages/components/src/components/ColorPicker/styles/colorInput.module.scss b/packages/components/src/components/ColorPicker/styles/colorInput.module.scss
index 9799bdc7bd..b1195eebfa 100644
--- a/packages/components/src/components/ColorPicker/styles/colorInput.module.scss
+++ b/packages/components/src/components/ColorPicker/styles/colorInput.module.scss
@@ -1,16 +1,14 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
-@import '../../../utilities/sizeToken.module.scss';
-@import '../../../utilities/focusStyle.module.scss';
-@import '../../../utilities/transitions.module.scss';
+@use '../../../utilities/sizeToken.module.scss';
+@use '../../../utilities/focusStyle.module.scss';
+@use '../../../utilities/transitions.module.scss';
 
 .root {
-    @include transition-colors;
-
     width: 100%;
     position: relative;
     justify-content: start;
     align-items: center;
-    gap: sizeToken(2);
+    gap: sizeToken.get(2);
     overflow: hidden;
 
     font-family: var(--body-family-stack);
@@ -25,6 +23,10 @@
     border-radius: var(--radius);
     border: var(--line-width) solid var(--line-color-strong);
 
+    & {
+        @include transitions.transition-colors;
+    }
+
     &:hover {
         border-color: var(--line-color-x-strong);
         color: var(--text-color-weak);
@@ -37,7 +39,7 @@
     }
 
     &:has(button[data-color-input-select]:focus-visible) {
-        @include focus-outline-styles
+        @include focusStyle.focus-outline-styles;
     }
 
     &:has(input:disabled),
@@ -53,40 +55,40 @@
     display: flex;
     justify-content: start;
     align-items: center;
-    gap: sizeToken(2);
+    gap: sizeToken.get(2);
     flex-grow: 1;
-    padding-left: sizeToken(3);
-    padding-right: sizeToken(3);
-    height: sizeToken(9);
+    padding-left: sizeToken.get(3);
+    padding-right: sizeToken.get(3);
+    height: sizeToken.get(9);
     outline: none;
     width: 100%;
 }
 
 .colorIndicator {
-    width: sizeToken(4);
-    height: sizeToken(4);
-    border-radius: sizeToken(1);
+    width: sizeToken.get(4);
+    height: sizeToken.get(4);
+    border-radius: sizeToken.get(1);
 }
 
 .actions {
     position: absolute;
     top: 0;
     bottom: 0;
-    right: sizeToken(3);
+    right: sizeToken.get(3);
     display: flex;
     align-items: center;
     pointer-events: none;
 }
 .clear {
     outline: none;
-    padding: sizeToken(1);
-    margin: sizeToken(1);
-    @include focus-outline;
+    padding: sizeToken.get(1);
+    margin: sizeToken.get(1);
+    @include focusStyle.focus-outline;
     pointer-events: all;
 }
 
 .caret {
-    @include transition-all;
+    @include transitions.transition-all;
 }
 
 [data-state='open'] {
diff --git a/packages/components/src/components/ColorPicker/styles/customColorPicker.module.scss b/packages/components/src/components/ColorPicker/styles/customColorPicker.module.scss
index 739d5b25c4..07f85e8eae 100644
--- a/packages/components/src/components/ColorPicker/styles/customColorPicker.module.scss
+++ b/packages/components/src/components/ColorPicker/styles/customColorPicker.module.scss
@@ -1,12 +1,12 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-@import '../../../utilities/sizeToken.module.scss';
-@import '../../../utilities/focusStyle.module.scss';
+@use '../../../utilities/sizeToken.module.scss';
+@use '../../../utilities/focusStyle.module.scss';
 
 .root {
     display: flex;
     flex-direction: column;
-    gap: sizeToken(4);
+    gap: sizeToken.get(4);
     max-width: 700px;
     container-type: inline-size;
 }
@@ -14,7 +14,7 @@
 .inputs {
     display: grid;
     grid-template-columns: 1fr;
-    gap: sizeToken(2);
+    gap: sizeToken.get(2);
 
     @container (min-width: 19.5rem) {
         grid-template-columns: 100px 1fr 100px;
@@ -29,7 +29,7 @@
 .colorChannelInputGroup {
     display: flex;
     flex-direction: column;
-    gap: sizeToken(2);
+    gap: sizeToken.get(2);
 
     @container (min-width: 19.5rem) {
         flex-direction: row;
@@ -50,7 +50,6 @@
 
 //remove arrows from number inputs
 .valueInput {
-
     input::-webkit-outer-spin-button,
     input::-webkit-inner-spin-button {
         -webkit-appearance: none;
diff --git a/packages/components/src/components/Dialog/styles/dialog.module.scss b/packages/components/src/components/Dialog/styles/dialog.module.scss
index 269b9df16a..0b5f638cc5 100644
--- a/packages/components/src/components/Dialog/styles/dialog.module.scss
+++ b/packages/components/src/components/Dialog/styles/dialog.module.scss
@@ -1,15 +1,15 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-@import '../../../utilities/sizeToken.module.scss';
-@import '../../../utilities/focusStyle.module.scss';
-@import '../../../utilities/transitions.module.scss';
-@import '../../../utilities/mediaQuery.module.scss';
+@use '../../../utilities/sizeToken.module.scss';
+@use '../../../utilities/focusStyle.module.scss';
+@use '../../../utilities/transitions.module.scss';
+@use '../../../utilities/mediaQuery.module.scss';
 
 .content {
     display: block;
     position: fixed;
-    left: sizeToken(2);
-    right: sizeToken(2);
+    left: sizeToken.get(2);
+    right: sizeToken.get(2);
     top: 50%;
     transform: translateY(-50%);
     background-color: var(--base-color);
@@ -24,13 +24,15 @@
     grid-template-rows: auto auto minmax(0, 1fr) auto;
     box-sizing: border-box;
 
-    @include sm {
-        left: 50%;
-        transform: translateX(-50%) translateY(-50%);
-        width: fit-content;
-        min-width: var(--dialog-min-width);
-        grid-template-rows: auto minmax(0, 1fr) auto;
-        grid-template-columns: min-content auto;
+    & {
+        @include mediaQuery.sm {
+            left: 50%;
+            transform: translateX(-50%) translateY(-50%);
+            width: fit-content;
+            min-width: var(--dialog-min-width);
+            grid-template-rows: auto minmax(0, 1fr) auto;
+            grid-template-columns: min-content auto;
+        }
     }
 
     &:has([data-dialog-layout-component]) {
@@ -41,7 +43,7 @@
         top: 5rem;
         transform: translateY(0);
 
-        @include sm {
+        @include mediaQuery.sm {
             transform: translateX(-50%) translateY(0);
         }
     }
@@ -54,40 +56,40 @@
         .header,
         .footer,
         .body {
-            padding: sizeToken(2);
+            padding: sizeToken.get(2);
         }
     }
 
     &[data-dialog-padding='compact'] {
         .header,
         .footer {
-            padding: sizeToken(4);
+            padding: sizeToken.get(4);
         }
 
         .body {
-            padding: sizeToken(2) sizeToken(4);
+            padding: sizeToken.get(2) sizeToken.get(4);
         }
     }
 
     &[data-dialog-padding='comfortable'] {
         .header,
         .footer {
-            padding: sizeToken(6);
+            padding: sizeToken.get(6);
         }
 
         .body {
-            padding: sizeToken(4) sizeToken(6);
+            padding: sizeToken.get(4) sizeToken.get(6);
         }
     }
 
     &[data-dialog-padding='spacious'] {
         .header,
         .footer {
-            padding: sizeToken(10);
+            padding: sizeToken.get(10);
         }
 
         .body {
-            padding: sizeToken(6) sizeToken(10);
+            padding: sizeToken.get(6) sizeToken.get(10);
         }
     }
 
@@ -105,28 +107,30 @@
         }
 
         &[data-dialog-header-padding='none'] {
-            padding: sizeToken(0);
+            padding: sizeToken.get(0);
         }
 
         &[data-dialog-header-padding='tight'] {
-            padding: sizeToken(2);
+            padding: sizeToken.get(2);
         }
 
         &[data-dialog-header-padding='compact'] {
-            padding: sizeToken(4);
+            padding: sizeToken.get(4);
         }
 
         &[data-dialog-header-padding='comfortable'] {
-            padding: sizeToken(6);
+            padding: sizeToken.get(6);
         }
 
         &[data-dialog-header-padding='spacious'] {
-            padding: sizeToken(10);
+            padding: sizeToken.get(10);
         }
 
-        @include sm {
-            grid-row: 1;
-            grid-column: 2;
+        & {
+            @include mediaQuery.sm {
+                grid-row: 1;
+                grid-column: 2;
+            }
         }
 
         > div {
@@ -138,73 +142,77 @@
         display: flex;
         flex-direction: column;
         max-height: 100%;
-        gap: sizeToken(4);
+        gap: sizeToken.get(4);
         overflow: hidden;
         grid-row: 3;
         grid-column: 1;
 
         &[data-dialog-body-padding='none'] {
-            padding: sizeToken(0);
+            padding: sizeToken.get(0);
         }
 
         &[data-dialog-body-padding='tight'] {
-            padding: sizeToken(2);
+            padding: sizeToken.get(2);
         }
 
         &[data-dialog-body-padding='compact'] {
-            padding: sizeToken(2) sizeToken(4);
+            padding: sizeToken.get(2) sizeToken.get(4);
         }
 
         &[data-dialog-body-padding='comfortable'] {
-            padding: sizeToken(4) sizeToken(6);
+            padding: sizeToken.get(4) sizeToken.get(6);
         }
 
         &[data-dialog-body-padding='spacious'] {
-            padding: sizeToken(6) sizeToken(10);
+            padding: sizeToken.get(6) sizeToken.get(10);
         }
 
-        @include sm {
-            grid-row: 2;
-            grid-column: 2;
+        & {
+            @include mediaQuery.sm {
+                grid-row: 2;
+                grid-column: 2;
+            }
         }
     }
 
     .footer {
         display: flex;
         justify-content: flex-end;
-        gap: sizeToken(2);
+        gap: sizeToken.get(2);
         height: fit-content;
         font-weight: var(--font-weight-medium);
         grid-row: 4;
         grid-column: 1;
 
         &[data-dialog-footer-padding='none'] {
-            padding: sizeToken(0);
+            padding: sizeToken.get(0);
         }
 
         &[data-dialog-footer-padding='tight'] {
-            padding: sizeToken(2);
+            padding: sizeToken.get(2);
         }
 
         &[data-dialog-footer-padding='compact'] {
-            padding: sizeToken(4);
+            padding: sizeToken.get(4);
         }
 
         &[data-dialog-footer-padding='comfortable'] {
-            padding: sizeToken(6);
+            padding: sizeToken.get(6);
         }
 
         &[data-dialog-footer-padding='spacious'] {
-            padding: sizeToken(10);
+            padding: sizeToken.get(10);
         }
 
         &[data-show-border='true'] {
             border-top: var(--line-width) solid var(--line-color);
         }
 
-        @include sm {
-            grid-row: 3;
-            grid-column: 2;
+        & {
+            @include mediaQuery.sm {
+                grid-row: 3;
+                grid-column: 2;
+            }
         }
     }
 }
@@ -226,10 +234,12 @@
 .sideContent {
     grid-row: 1;
     grid-column: 1;
-    min-height: sizeToken(10);
-    min-width: sizeToken(10);
+    min-height: sizeToken.get(10);
+    min-width: sizeToken.get(10);
 
-    @include sm {
-        grid-row: 1 / span 3;
+    & {
+        @include mediaQuery.sm {
+            grid-row: 1 / span 3;
+        }
     }
 }
diff --git a/packages/components/src/components/Dropdown/styles/dropdown.module.scss b/packages/components/src/components/Dropdown/styles/dropdown.module.scss
index 187b4c2d97..d671b219ca 100644
--- a/packages/components/src/components/Dropdown/styles/dropdown.module.scss
+++ b/packages/components/src/components/Dropdown/styles/dropdown.module.scss
@@ -1,14 +1,12 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-@import '../../../utilities/sizeToken.module.scss';
-@import '../../../utilities/transitions.module.scss';
-@import '../../../utilities/mediaQuery.module.scss';
-@import '../../../utilities/shadow.module.scss';
+@use '../../../utilities/sizeToken.module.scss';
+@use '../../../utilities/transitions.module.scss';
+@use '../../../utilities/mediaQuery.module.scss';
+@use '../../../utilities/shadow.module.scss';
 
 .content,
 .subContent {
-    @include shadow-lg;
-
     display: block;
     border-radius: var(--radius);
     background-color: var(--base-color);
@@ -17,34 +15,39 @@
     overflow: auto;
     max-height: var(--radix-dropdown-menu-content-available-height);
 
+    & {
+        @include shadow.shadow-lg;
+    }
+
     &:focus-within {
         border-color: var(--line-color-x-strong);
     }
 
     .item,
     .subTrigger {
-        padding: sizeToken(2) sizeToken(3);
+        padding: sizeToken.get(2) sizeToken.get(3);
     }
 
-    @include sm {
-        width: auto;
-        min-width: 250px;
-        max-width: 350px;
+    & {
+        @include mediaQuery.sm {
+            width: auto;
+            min-width: 250px;
+            max-width: 350px;
+        }
     }
 }
 
 .subContent {
-    margin-left: sizeToken(2);
+    margin-left: sizeToken.get(2);
 }
 
 .item,
 .subTrigger {
-    @include transition-colors;
     display: flex;
     align-items: center;
-    gap: sizeToken(1);
-    margin: sizeToken(0.5) sizeToken(2);
-    border-radius: sizeToken(1);
+    gap: sizeToken.get(1);
+    margin: sizeToken.get(0.5) sizeToken.get(2);
+    border-radius: sizeToken.get(1);
     cursor: pointer;
     text-align: start;
     font-size: var(--body-size-medium);
@@ -52,12 +55,16 @@
     color: var(--text-color-weak);
     outline-style: none;
 
+    & {
+        @include transitions.transition-colors;
+    }
+
     &:first-child {
-        margin-top: sizeToken(2);
+        margin-top: sizeToken.get(2);
     }
 
     &:last-child {
-        margin-bottom: sizeToken(2);
+        margin-bottom: sizeToken.get(2);
     }
 
     &[data-state='open'] {
@@ -111,7 +118,7 @@
     display: flex;
     flex-shrink: 0;
     align-items: center;
-    gap: sizeToken(1.5);
+    gap: sizeToken.get(1.5);
 
     // Left slot
     &:not([data-name='right']) {
@@ -124,7 +131,7 @@
         margin-left: auto;
 
         & ~ .subMenuIndicator {
-            margin-left: sizeToken(1.5);
+            margin-left: sizeToken.get(1.5);
         }
     }
 
diff --git a/packages/components/src/components/Flex/styles/flex.module.scss b/packages/components/src/components/Flex/styles/flex.module.scss
index 1566660b38..e5c24d71f8 100644
--- a/packages/components/src/components/Flex/styles/flex.module.scss
+++ b/packages/components/src/components/Flex/styles/flex.module.scss
@@ -1,17 +1,18 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-@import '../../../helpers/layout.module.scss';
+@use "sass:list";
+@use '../../../helpers/layout.module.scss';
 
 $properties: (display, flex-direction, align-items, justify-content, flex-wrap, gap, gap-x, gap-y);
-$allProperties: join($properties, $layoutProperties);
+$allProperties: list.join($properties, layout.$layoutProperties);
 
 .root {
-    @include responsive-properties($allProperties);
+    @include layout.responsive-properties($allProperties);
 
     // Default values
     @each $property in $allProperties {
-        @include responsive-default-value($property, initial);
+        @include layout.responsive-default-value($property, initial);
     }
-    @include responsive-default-value(display, flex);
-    @include responsive-default-value(flex-direction, row);
+    @include layout.responsive-default-value(display, flex);
+    @include layout.responsive-default-value(flex-direction, row);
 }
diff --git a/packages/components/src/components/Flyout/styles/flyout.module.scss b/packages/components/src/components/Flyout/styles/flyout.module.scss
index ec6f99da70..d7cf6347cf 100644
--- a/packages/components/src/components/Flyout/styles/flyout.module.scss
+++ b/packages/components/src/components/Flyout/styles/flyout.module.scss
@@ -1,12 +1,11 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-@import '../../../utilities/mediaQuery.module.scss';
-@import '../../../utilities/sizeToken.module.scss';
-@import '../../../utilities/shadow.module.scss';
-@import '../../../utilities/focusStyle.module.scss';
+@use '../../../utilities/mediaQuery.module.scss';
+@use '../../../utilities/sizeToken.module.scss';
+@use '../../../utilities/shadow.module.scss';
+@use '../../../utilities/focusStyle.module.scss';
 
 .root {
-
     display: block;
     background-color: var(--base-color);
     border: var(--line-width) solid var(--line-color);
@@ -23,23 +22,27 @@
     }
 
     &[data-shadow='medium'] {
-        @include shadow-md;
+        @include shadow.shadow-md;
     }
 
     &[data-shadow='large'] {
-        @include shadow-lg;
+        @include shadow.shadow-lg;
     }
 
-    @include sm {
-        width: var(--flyout-width);
-        max-width: var(--flyout-max-width);
-        margin-top: 0;
-        background-color: var(--base-color);
+    & {
+        @include focusStyle.focus-outline;
+
+        @include mediaQuery.sm {
+            width: var(--flyout-width);
+            max-width: var(--flyout-max-width);
+            margin-top: 0;
+            background-color: var(--base-color);
+        }
     }
 
     // Mobile view flyout -> dialog responsiveness
     body > [data-radix-popper-content-wrapper]:has(&) {
-        @include max-sm {
+        @include mediaQuery.max-sm {
             &:has([data-side='top']),
             &:has([data-side='bottom']) {
                 // Radix always leaves an 8px gap on the left side via its transform property
@@ -49,8 +52,6 @@
             min-width: 0 !important;
         }
     }
-
-    @include focus-outline;
 }
 
 // Responsive dialog background element
@@ -65,8 +66,10 @@
     opacity: 0.3;
     pointer-events: none;
 
-    @include sm {
-        display: none;
+    & {
+        @include mediaQuery.sm {
+            display: none;
+        }
     }
 }
 
@@ -78,69 +81,69 @@
     border-bottom: var(--line-width) solid var(--line-color);
 
     .root[data-flyout-spacing='tight'] & {
-        padding: sizeToken(2);
+        padding: sizeToken.get(2);
     }
 
     .root[data-flyout-spacing='compact'] & {
-        padding: sizeToken(4);
+        padding: sizeToken.get(4);
     }
 
     .root[data-flyout-spacing='comfortable'] & {
-        padding: sizeToken(6);
+        padding: sizeToken.get(6);
     }
 
     .root[data-flyout-spacing='spacious'] & {
-        padding: sizeToken(10);
+        padding: sizeToken.get(10);
     }
 }
 
 .body {
     display: flex;
     flex-direction: column;
-    gap: sizeToken(4);
+    gap: sizeToken.get(4);
 
     .root[data-flyout-spacing='tight'] & {
-        padding: sizeToken(2);
+        padding: sizeToken.get(2);
     }
 
     .root[data-flyout-spacing='compact'] & {
-        padding: sizeToken(2) sizeToken(4);
+        padding: sizeToken.get(2) sizeToken.get(4);
     }
 
     .root[data-flyout-spacing='comfortable'] & {
-        padding: sizeToken(4) sizeToken(6);
+        padding: sizeToken.get(4) sizeToken.get(6);
     }
 
     .root[data-flyout-spacing='spacious'] & {
-        padding: sizeToken(6) sizeToken(10);
+        padding: sizeToken.get(6) sizeToken.get(10);
     }
 }
 
 .footer {
     display: flex;
     justify-content: flex-end;
-    gap: sizeToken(2);
+    gap: sizeToken.get(2);
     font-weight: 400;
     border-top: var(--line-width) solid var(--line-color);
 
     .root[data-flyout-spacing='tight'] & {
-        padding: sizeToken(2);
+        padding: sizeToken.get(2);
     }
 
     .root[data-flyout-spacing='compact'] & {
-        padding: sizeToken(4);
+        padding: sizeToken.get(4);
     }
 
     .root[data-flyout-spacing='comfortable'] & {
-        padding: sizeToken(6);
+        padding: sizeToken.get(6);
     }
 
     .root[data-flyout-spacing='spacious'] & {
-        padding: sizeToken(10);
+        padding: sizeToken.get(10);
     }
 }
 
 .close {
-    @include focus-outline;
+    @include focusStyle.focus-outline;
     cursor: pointer;
 }
diff --git a/packages/components/src/components/Grid/styles/grid.module.scss b/packages/components/src/components/Grid/styles/grid.module.scss
index a6ef86d0f7..6bce793b1a 100644
--- a/packages/components/src/components/Grid/styles/grid.module.scss
+++ b/packages/components/src/components/Grid/styles/grid.module.scss
@@ -1,6 +1,7 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-@import '../../../helpers/layout.module.scss';
+@use "sass:list";
+@use '../../../helpers/layout.module.scss';
 
 $properties: (
     display,
@@ -14,19 +15,19 @@ $properties: (
     justify-items
 );
 
-$allProperties: join($properties, $layoutProperties);
+$allProperties: list.join($properties, layout.$layoutProperties);
 
 .root {
-    @include responsive-properties($allProperties);
+    @include layout.responsive-properties($allProperties);
 
     // Default values
     @each $property in $allProperties {
-        @include responsive-default-value($property, initial);
+        @include layout.responsive-default-value($property, initial);
     }
 
-    @include responsive-default-value(display, grid);
-    @include responsive-default-value(align-items, stretch);
-    @include responsive-default-value(justify-items, start);
-    @include responsive-default-value(grid-template-columns, minmax(0, 1fr));
-    @include responsive-default-value(grid-template-rows, none);
+    @include layout.responsive-default-value(display, grid);
+    @include layout.responsive-default-value(align-items, stretch);
+    @include layout.responsive-default-value(justify-items, start);
+    @include layout.responsive-default-value(grid-template-columns, minmax(0, 1fr));
+    @include layout.responsive-default-value(grid-template-rows, none);
 }
diff --git a/packages/components/src/components/ScrollArea/styles/scrollArea.module.scss b/packages/components/src/components/ScrollArea/styles/scrollArea.module.scss
index 0fd07dac05..eee4d01d93 100644
--- a/packages/components/src/components/ScrollArea/styles/scrollArea.module.scss
+++ b/packages/components/src/components/ScrollArea/styles/scrollArea.module.scss
@@ -1,6 +1,6 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-@import '../../../utilities/transitions.module.scss';
+@use '../../../utilities/transitions.module.scss';
 
 .root {
     height: 100%;
@@ -14,13 +14,12 @@
     height: 100%;
     padding-right: var(--scrollbar-size);
 
-    &[data-show-shadow="true"] {
+    &[data-show-shadow='true'] {
         box-shadow: inset 0 -15px 8px -10px var(--box-neutral-color);
     }
 }
 
 .scrollbar {
-    @include transition-colors;
     display: flex;
 
     user-select: none;
@@ -32,6 +31,10 @@
 
     background: var(--box-neutral-color);
 
+    & {
+        @include transitions.transition-colors;
+    }
+
     &:hover {
         background: var(--box-neutral-color-hover);
     }
diff --git a/packages/components/src/components/Section/styles/section.module.scss b/packages/components/src/components/Section/styles/section.module.scss
index da020c3a32..cb08e05c47 100644
--- a/packages/components/src/components/Section/styles/section.module.scss
+++ b/packages/components/src/components/Section/styles/section.module.scss
@@ -1,16 +1,17 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-@import '../../../helpers/layout.module.scss';
+@use "sass:list";
+@use '../../../helpers/layout.module.scss';
 
 $properties: (display);
-$allProperties: join($properties, $layoutProperties);
+$allProperties: list.join($properties, layout.$layoutProperties);
 
 .root {
-    @include responsive-properties($allProperties);
+    @include layout.responsive-properties($allProperties);
 
     // Default values
     @each $property in $allProperties {
-        @include responsive-default-value($property, initial);
+        @include layout.responsive-default-value($property, initial);
     }
-    @include responsive-default-value(display, block);
+    @include layout.responsive-default-value(display, block);
 }
diff --git a/packages/components/src/components/SegmentedControl/styles/segmentedControl.module.scss b/packages/components/src/components/SegmentedControl/styles/segmentedControl.module.scss
index 68c0a2c2a6..4c6efb2793 100644
--- a/packages/components/src/components/SegmentedControl/styles/segmentedControl.module.scss
+++ b/packages/components/src/components/SegmentedControl/styles/segmentedControl.module.scss
@@ -1,8 +1,8 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-@import '../../../utilities/sizeToken.module.scss';
-@import '../../../utilities/transitions.module.scss';
-@import '../../../utilities/focusStyle.module.scss';
+@use '../../../utilities/sizeToken.module.scss';
+@use '../../../utilities/transitions.module.scss';
+@use '../../../utilities/focusStyle.module.scss';
 
 $radius-without-border: calc(var(--radius) - var(--line-width));
 
@@ -18,7 +18,7 @@ $radius-without-border: calc(var(--radius) - var(--line-width));
     text-align: center;
 
     min-width: max-content;
-    height: sizeToken(9);
+    height: sizeToken.get(9);
     box-sizing: border-box;
 
     background-color: var(--base-color-alt);
@@ -62,9 +62,9 @@ $radius-without-border: calc(var(--radius) - var(--line-width));
     align-items: center;
     justify-content: center;
     border-radius: inherit;
-    padding-left: sizeToken(4);
-    padding-right: sizeToken(4);
-    gap: sizeToken(2);
+    padding-left: sizeToken.get(4);
+    padding-right: sizeToken.get(4);
+    gap: sizeToken.get(2);
 
     font-size: var(--body-size-medium);
     line-height: var(--body-size-medium-line-height);
@@ -81,17 +81,20 @@ $radius-without-border: calc(var(--radius) - var(--line-width));
 }
 
 .itemLabelActive {
-    @include transition-opacity;
     transition-timing-function: ease-in;
 
     display: inline-flex;
-    gap: sizeToken(2);
+    gap: sizeToken.get(2);
     align-items: center;
     justify-content: center;
     opacity: 0;
 
     font-weight: 500;
 
+    & {
+        @include transitions.transition-opacity;
+    }
+
     // Color the label based on the disabled state
     .item:disabled & {
         color: var(--box-disabled-color-inverse);
@@ -103,18 +106,21 @@ $radius-without-border: calc(var(--radius) - var(--line-width));
 }
 
 .itemLabelInactive {
-    @include transition-opacity;
     transition-timing-function: ease-out;
 
     position: absolute;
     display: inline-flex;
-    gap: sizeToken(2);
+    gap: sizeToken.get(2);
     align-items: center;
     justify-content: center;
     opacity: 1;
 
     font-weight: 400;
 
+    & {
+        @include transitions.transition-opacity;
+    }
+
     // Color the label based on the disabled state
     .item:disabled & {
         color: var(--box-disabled-color-inverse);
@@ -126,8 +132,6 @@ $radius-without-border: calc(var(--radius) - var(--line-width));
 }
 
 .activeIndicator {
-    @include transition-transform;
-
     display: none;
     position: absolute;
     z-index: -1;
@@ -137,6 +141,10 @@ $radius-without-border: calc(var(--radius) - var(--line-width));
 
     pointer-events: none;
 
+    & {
+        @include transitions.transition-transform;
+    }
+
     // Outline of active item
     &::before {
         content: '';
@@ -173,7 +181,6 @@ $radius-without-border: calc(var(--radius) - var(--line-width));
 }
 
 .separator {
-    @include transition-opacity;
     // Make separators slow to disappear and fast to appear, in pair with the other `ease-in` transition
     transition-timing-function: ease-out;
 
@@ -184,6 +191,10 @@ $radius-without-border: calc(var(--radius) - var(--line-width));
     margin-right: -0.5px;
     background-color: var(--line-color-strong);
 
+    & {
+        @include transitions.transition-opacity;
+    }
+
     // Hide the separator when the state is on to rely on the active item's border
     .item:first-child &,
     .item:focus-visible &,
diff --git a/packages/components/src/components/Select/styles/select.module.scss b/packages/components/src/components/Select/styles/select.module.scss
index 0d3f3410da..d37f862d84 100644
--- a/packages/components/src/components/Select/styles/select.module.scss
+++ b/packages/components/src/components/Select/styles/select.module.scss
@@ -1,36 +1,35 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-@import '../../../utilities/sizeToken.module.scss';
-@import '../../../utilities/focusStyle.module.scss';
-@import '../../../utilities/transitions.module.scss';
-@import '../../../utilities/mediaQuery.module.scss';
+@use '../../../utilities/sizeToken.module.scss';
+@use '../../../utilities/focusStyle.module.scss';
+@use '../../../utilities/transitions.module.scss';
+@use '../../../utilities/mediaQuery.module.scss';
 
 .root {
-    @include focus-outline;
-    @include transition-colors;
-
-    & {
-        position: relative;
-        display: flex;
-        align-items: stretch;
-        text-align: start;
+    position: relative;
+    display: flex;
+    align-items: stretch;
+    text-align: start;
 
-        font-family: var(--body-family-stack);
-        font-weight: 400;
-        font-size: var(--body-size-medium);
+    font-family: var(--body-family-stack);
+    font-weight: 400;
+    font-size: var(--body-size-medium);
 
-        min-width: 0;
-        width: 100%;
-        line-height: var(--body-size-medium-line-height);
-        height: sizeToken(9);
-        box-sizing: border-box;
+    min-width: 0;
+    width: 100%;
+    line-height: var(--body-size-medium-line-height);
+    height: sizeToken.get(9);
+    box-sizing: border-box;
 
-        color: var(--text-color);
-        background-color: var(--base-color);
+    color: var(--text-color);
+    background-color: var(--base-color);
 
-        border-radius: var(--radius);
-        border: var(--line-width) solid var(--line-color-strong);
-        cursor: pointer;
+    border-radius: var(--radius);
+    border: var(--line-width) solid var(--line-color-strong);
+    cursor: pointer;
+    & {
+        @include focusStyle.focus-outline;
+        @include transitions.transition-colors;
     }
 
     &:hover {
@@ -70,7 +69,7 @@
 .selectedValue {
     width: 100%;
     background-color: transparent;
-    text-indent: sizeToken(3);
+    text-indent: sizeToken.get(3);
     display: inline-block;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -85,7 +84,7 @@
     display: flex;
     align-items: center;
     text-align: inherit;
-    text-indent: sizeToken(3);
+    text-indent: sizeToken.get(3);
     outline: 2px solid transparent;
     outline-offset: 2px;
     border-radius: calc(var(--radius) - var(--line-width));
@@ -128,9 +127,9 @@
     flex-shrink: 0;
     align-items: center;
     cursor: text;
-    gap: sizeToken(1.5);
-    padding-left: sizeToken(3);
-    padding-right: sizeToken(2);
+    gap: sizeToken.get(1.5);
+    padding-left: sizeToken.get(3);
+    padding-right: sizeToken.get(2);
     color: var(--text-color);
 
     // Left slot
@@ -145,7 +144,7 @@
         order: 0;
         margin-left: 0px;
         margin-right: 0px;
-        padding-right: sizeToken(3);
+        padding-right: sizeToken.get(3);
 
         &:has(~ div[data-name='clear']) {
             padding-right: 0;
@@ -158,8 +157,8 @@
         align-items: center;
         cursor: text;
         height: 100%;
-        padding-left: sizeToken(3);
-        padding-right: sizeToken(2);
+        padding-left: sizeToken.get(3);
+        padding-right: sizeToken.get(2);
 
         &:has(~ div[data-name='left']) {
             text-indent: 0px;
@@ -174,7 +173,7 @@
     width: fit-content;
     align-items: center;
     justify-content: center;
-    padding: 0 sizeToken(3);
+    padding: 0 sizeToken.get(3);
     color: var(--text-color-weak);
 
     &:hover {
@@ -184,20 +183,21 @@
 
 .icons {
     display: flex;
-    gap: sizeToken(1);
-    padding: 0 sizeToken(1.5);
+    gap: sizeToken.get(1);
+    padding: 0 sizeToken.get(1.5);
 }
 
 .caret {
-    @include transition-transform;
+    display: flex;
+    height: 100%;
+    width: sizeToken.get(4);
+    align-items: center;
+    justify-content: center;
+    margin: 0 sizeToken.get(1);
+    color: var(--text-color-weak);
+
     & {
-        display: flex;
-        height: 100%;
-        width: sizeToken(4);
-        align-items: center;
-        justify-content: center;
-        margin: 0 sizeToken(1);
-        color: var(--text-color-weak);
+        @include transitions.transition-transform;
     }
 
     &:hover {
@@ -212,13 +212,13 @@
 
 .iconSuccess {
     height: 100%;
-    margin: 0 sizeToken(1);
+    margin: 0 sizeToken.get(1);
     color: var(--text-color-positive);
 }
 
 .iconError {
     height: 100%;
-    margin: 0 sizeToken(1);
+    margin: 0 sizeToken.get(1);
     color: var(--text-color-negative);
 }
 
@@ -227,18 +227,20 @@
     border-radius: var(--radius);
     background-color: var(--base-color);
     border: var(--line-width) solid var(--line-color-x-strong);
-    max-width: calc(100dvw - sizeToken(8));
+    max-width: calc(100dvw - sizeToken.get(8));
     min-width: var(--radix-popover-trigger-width);
     overflow: auto;
     max-height: var(--radix-popover-content-available-height);
-    padding: sizeToken(2) 0;
+    padding: sizeToken.get(2) 0;
 
     &:has(li[role='option']) {
         display: block;
     }
 
-    @include sm {
-        max-width: 500px;
+    & {
+        @include mediaQuery.sm {
+            max-width: 500px;
+        }
     }
 }
 
@@ -246,32 +248,33 @@
     z-index: 30;
 
     &[data-side='bottom'] {
-        margin-top: sizeToken(2);
+        margin-top: sizeToken.get(2);
     }
 
     &[data-side='top'] {
-        margin-bottom: sizeToken(2);
+        margin-bottom: sizeToken.get(2);
     }
 
     &[data-side='left'] {
-        margin-right: sizeToken(2);
+        margin-right: sizeToken.get(2);
     }
 
     &[data-side='right'] {
-        margin-left: sizeToken(2);
+        margin-left: sizeToken.get(2);
     }
 }
 
 .item {
-    @include transition-colors;
+    display: flex;
+    justify-content: space-between;
+    padding: sizeToken.get(3) sizeToken.get(5);
+    cursor: pointer;
+    text-align: start;
+    font-size: var(--body-size-medium);
+    line-height: var(--body-size-medium-line-height);
+
     & {
-        display: flex;
-        justify-content: space-between;
-        padding: sizeToken(3) sizeToken(5);
-        cursor: pointer;
-        text-align: start;
-        font-size: var(--body-size-medium);
-        line-height: var(--body-size-medium-line-height);
+        @include transitions.transition-colors;
     }
 
     &[data-highlighted='true'] {
@@ -301,8 +304,8 @@
 }
 
 .checkmarkIcon {
-    width: sizeToken(4);
-    height: sizeToken(4);
+    width: sizeToken.get(4);
+    height: sizeToken.get(4);
     display: none;
 }
 
diff --git a/packages/components/src/components/Slider/styles/slider.module.scss b/packages/components/src/components/Slider/styles/slider.module.scss
index 59144423d6..2e4b211b97 100644
--- a/packages/components/src/components/Slider/styles/slider.module.scss
+++ b/packages/components/src/components/Slider/styles/slider.module.scss
@@ -1,8 +1,8 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-@import '../../../utilities/sizeToken.module.scss';
-@import '../../../utilities/focusStyle.module.scss';
-@import '../../../utilities/transitions.module.scss';
+@use '../../../utilities/sizeToken.module.scss';
+@use '../../../utilities/focusStyle.module.scss';
+@use '../../../utilities/transitions.module.scss';
 
 .root {
     position: relative;
@@ -31,7 +31,7 @@
     position: relative;
     flex-grow: 1;
     border-radius: 4px;
-    height: sizeToken(1);
+    height: sizeToken.get(1);
 
     .range {
         position: absolute;
@@ -46,9 +46,6 @@
 }
 
 .thumb {
-    @include transition-colors;
-    @include transition(outline);
-
     --slider-thumb-hover-box-shadow-color: color-mix(
         in srgb,
         var(--box-neutral-inverse-color-pressed) 15%,
@@ -59,8 +56,8 @@
 
     display: block;
 
-    width: sizeToken(5);
-    height: sizeToken(5);
+    width: sizeToken.get(5);
+    height: sizeToken.get(5);
 
     background-color: var(--base-color);
     border: 1px solid var(--line-color-strong);
@@ -70,23 +67,28 @@
     cursor: pointer;
     box-sizing: border-box;
 
+    & {
+        @include transitions.transition-colors;
+        @include transitions.transition(outline);
+    }
+
     &:hover {
         box-shadow: 0px 3px 10px 0px var(--slider-thumb-hover-box-shadow-color);
 
         &:active,
         //firefox support requires this additional selector
         &[data-show-focus-ring='false']:focus-visible {
-            outline-width: sizeToken(2);
+            outline-width: sizeToken.get(2);
         }
     }
 
     &[data-show-focus-ring='false']:not(:active) {
-        outline-width: sizeToken(1);
+        outline-width: sizeToken.get(1);
     }
 
     &:not([data-show-focus-ring='false']) {
-        @include transition-box-shadow;
-        @include focus-outline;
+        @include transitions.transition-box-shadow;
+        @include focusStyle.focus-outline;
     }
 
     &[data-disabled] {
diff --git a/packages/components/src/components/Switch/styles/switch.module.scss b/packages/components/src/components/Switch/styles/switch.module.scss
index 672c7a686c..67ebae3aa0 100644
--- a/packages/components/src/components/Switch/styles/switch.module.scss
+++ b/packages/components/src/components/Switch/styles/switch.module.scss
@@ -1,13 +1,10 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-@import '../../../utilities/sizeToken.module.scss';
-@import '../../../utilities/focusStyle.module.scss';
-@import '../../../utilities/transitions.module.scss';
+@use '../../../utilities/sizeToken.module.scss';
+@use '../../../utilities/focusStyle.module.scss';
+@use '../../../utilities/transitions.module.scss';
 
 .root {
-    @include focus-outline;
-    @include transition-colors;
-
     position: relative;
     container-type: size;
     border-radius: 9999px;
@@ -15,23 +12,28 @@
     background-color: var(--box-neutral-color);
     border: 1px solid var(--line-color-x-strong);
 
+    & {
+        @include focusStyle.focus-outline;
+        @include transitions.transition-colors;
+    }
+
     &:enabled:hover {
         background-color: var(--box-neutral-color-hover);
     }
 
     &.small {
-        width: sizeToken(6);
-        height: sizeToken(3);
+        width: sizeToken.get(6);
+        height: sizeToken.get(3);
     }
 
     &.medium {
-        width: sizeToken(7.5);
-        height: sizeToken(4);
+        width: sizeToken.get(7.5);
+        height: sizeToken.get(4);
     }
 
     &.large {
-        width: sizeToken(9);
-        height: sizeToken(5);
+        width: sizeToken.get(9);
+        height: sizeToken.get(5);
     }
 
     &[data-state='checked'] {
@@ -53,8 +55,6 @@
 }
 
 .thumb {
-    @include transition-transform;
-
     display: block;
     transform: translate(-1px, -1px);
     will-change: transform;
@@ -67,6 +67,10 @@
     border-radius: 9999px;
     border: 1px solid var(--box-neutral-inverse-color);
 
+    & {
+        @include transitions.transition-transform;
+    }
+
     &[data-state='checked'] {
         transform: translate(calc(100cqw - 100% + 1px), -1px);
     }
diff --git a/packages/components/src/components/Table/styles/table.module.scss b/packages/components/src/components/Table/styles/table.module.scss
index 093d16dfc9..e9197e1b9a 100644
--- a/packages/components/src/components/Table/styles/table.module.scss
+++ b/packages/components/src/components/Table/styles/table.module.scss
@@ -1,7 +1,7 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-@import '../../../utilities/sizeToken.module.scss';
-@import '../../../utilities/focusStyle.module.scss';
+@use '../../../utilities/sizeToken.module.scss';
+@use '../../../utilities/focusStyle.module.scss';
 
 .table {
     position: relative;
@@ -64,7 +64,7 @@
 }
 
 .caption {
-    padding: sizeToken(3) sizeToken(2);
+    padding: sizeToken.get(3) sizeToken.get(2);
     text-align: left;
     color: var(--text-color);
 }
@@ -72,7 +72,7 @@
 .headerCell {
     font-size: var(--body-size-small);
     font-weight: 400;
-    line-height: sizeToken(4);
+    line-height: sizeToken.get(4);
     color: var(--text-color-weak);
 
     border-top: 1px solid var(--line-color);
@@ -83,7 +83,7 @@
     }
 
     &[data-sortable='false'] {
-        padding: sizeToken(3) sizeToken(2);
+        padding: sizeToken.get(3) sizeToken.get(2);
     }
 
     &[data-no-shrink='true'] {
@@ -98,7 +98,7 @@
     text-align: inherit;
     align-items: center;
     gap: 0.25rem;
-    padding: sizeToken(3) sizeToken(2);
+    padding: sizeToken.get(3) sizeToken.get(2);
 
     appearance: none;
     background: none;
@@ -117,7 +117,7 @@
     }
 
     &:focus-visible {
-        @include focus-outline;
+        @include focusStyle.focus-outline;
     }
 
     .sortIndicator {
@@ -126,7 +126,7 @@
 }
 
 .body {
-    padding: 0 sizeToken(6);
+    padding: 0 sizeToken.get(6);
 }
 
 .row {
@@ -134,7 +134,7 @@
     transition: background-color 0.2s ease;
 
     &:focus-visible {
-        @include focus-outline;
+        @include focusStyle.focus-outline;
         z-index: 1;
     }
 
@@ -163,15 +163,14 @@
     color: var(--text-color);
 
     font-weight: 400;
-    line-height: sizeToken(4);
-    padding: sizeToken(2);
+    line-height: sizeToken.get(4);
+    padding: sizeToken.get(2);
 
     border-bottom: 1px solid var(--line-color);
 }
 
 .headerCell,
 .rowCell {
-
     &[data-align='left'] {
         text-align: left;
 
@@ -196,7 +195,8 @@
         }
     }
 
-    &[data-truncate='true'], &[data-truncate='true'] .buttonText {
+    &[data-truncate='true'],
+    &[data-truncate='true'] .buttonText {
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
diff --git a/packages/components/src/components/Tabs/styles/tabs.module.scss b/packages/components/src/components/Tabs/styles/tabs.module.scss
index 5d84e06e02..9435b71c32 100644
--- a/packages/components/src/components/Tabs/styles/tabs.module.scss
+++ b/packages/components/src/components/Tabs/styles/tabs.module.scss
@@ -1,8 +1,8 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-@import '../../../utilities/sizeToken.module.scss';
-@import '../../../utilities/transitions.module.scss';
-@import '../../../utilities/focusStyle.module.scss';
+@use '../../../utilities/sizeToken.module.scss';
+@use '../../../utilities/transitions.module.scss';
+@use '../../../utilities/focusStyle.module.scss';
 
 $radius-without-border: calc(var(--radius) - var(--line-width));
 
@@ -19,13 +19,14 @@ $radius-without-border: calc(var(--radius) - var(--line-width));
     position: relative;
     flex-shrink: 0;
     display: flex;
-    gap: sizeToken(1);
-    height: sizeToken(12);
+    gap: sizeToken.get(1);
+    height: sizeToken.get(12);
     flex: 1;
     min-width: 0;
     overflow-x: hidden;
+
     &[data-size='large'] {
-        height: sizeToken(14);
+        height: sizeToken.get(14);
     }
 }
 
@@ -34,24 +35,26 @@ $radius-without-border: calc(var(--radius) - var(--line-width));
     width: 100%;
     display: flex;
     align-items: center;
-    padding-left: sizeToken(3);
-    padding-right: sizeToken(3);
-    gap: sizeToken(2);
+    padding-left: sizeToken.get(3);
+    padding-right: sizeToken.get(3);
+    gap: sizeToken.get(2);
     border-bottom: 1px solid var(--line-color);
     box-sizing: border-box;
 }
 
 .trigger {
-    @include focus-outline;
-    @include transition-colors;
-
     color: var(--text-color-weak);
     font-size: var(--body-size-large);
     white-space: nowrap;
-    margin: sizeToken(2);
+    margin: sizeToken.get(2);
     display: flex;
     align-items: center;
-    gap: sizeToken(1);
+    gap: sizeToken.get(1);
+
+    & {
+        @include focusStyle.focus-outline;
+        @include transitions.transition-colors;
+    }
 
     &:hover,
     &:focus {
@@ -70,24 +73,23 @@ $radius-without-border: calc(var(--radius) - var(--line-width));
 
 .content {
     [data-tabs-content-padding='tight'] & {
-        padding: sizeToken(2);
+        padding: sizeToken.get(2);
     }
 
-    [data-tabs-content-padding='compact'] &{
-        padding: sizeToken(3);
+    [data-tabs-content-padding='compact'] & {
+        padding: sizeToken.get(3);
     }
 
-    [data-tabs-content-padding='comfortable'] &{
-        padding: sizeToken(4);
+    [data-tabs-content-padding='comfortable'] & {
+        padding: sizeToken.get(4);
     }
 
-    [data-tabs-content-padding='spacious'] &{
-        padding: sizeToken(6);
+    [data-tabs-content-padding='spacious'] & {
+        padding: sizeToken.get(6);
     }
 }
 
 .activeIndicator {
-    @include transition;
     position: absolute;
     height: 3px;
     border-top-left-radius: var(--radius-x-large);
@@ -96,5 +98,9 @@ $radius-without-border: calc(var(--radius) - var(--line-width));
     bottom: 0;
     left: 0;
     width: 0;
-    margin-left: sizeToken(3);
+    margin-left: sizeToken.get(3);
+
+    & {
+        @include transitions.transition;
+    }
 }
diff --git a/packages/components/src/components/TextInput/styles/text.module.scss b/packages/components/src/components/TextInput/styles/text.module.scss
index 6f8c83ff0c..afb3d8b79a 100644
--- a/packages/components/src/components/TextInput/styles/text.module.scss
+++ b/packages/components/src/components/TextInput/styles/text.module.scss
@@ -1,31 +1,31 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-@import '../../../utilities/sizeToken.module.scss';
-@import '../../../utilities/focusStyle.module.scss';
-@import '../../../utilities/transitions.module.scss';
+@use '../../../utilities/sizeToken.module.scss';
+@use '../../../utilities/focusStyle.module.scss';
+@use '../../../utilities/transitions.module.scss';
 
 .root {
-    @include focus-outline;
-    @include transition-colors;
+    position: relative;
+    display: flex;
+    align-items: stretch;
 
-    & {
-        position: relative;
-        display: flex;
-        align-items: stretch;
+    font-family: var(--body-family-stack);
+    font-weight: 400;
+    font-size: var(--body-size-medium);
 
-        font-family: var(--body-family-stack);
-        font-weight: 400;
-        font-size: var(--body-size-medium);
+    line-height: var(--body-size-medium-line-height);
+    text-align: start;
+    height: sizeToken.get(9);
+    box-sizing: border-box;
 
-        line-height: var(--body-size-medium-line-height);
-        text-align: start;
-        height: sizeToken(9);
-        box-sizing: border-box;
+    color: var(--text-color);
+    background-color: var(--base-color);
+    border-radius: var(--radius);
+    border: var(--line-width) solid var(--line-color-strong);
 
-        color: var(--text-color);
-        background-color: var(--base-color);
-        border-radius: var(--radius);
-        border: var(--line-width) solid var(--line-color-strong);
+    & {
+        @include focusStyle.focus-outline;
+        @include transitions.transition-colors;
     }
 
     &:hover {
@@ -60,7 +60,7 @@
     display: flex;
     align-items: center;
     text-align: inherit;
-    text-indent: sizeToken(3);
+    text-indent: sizeToken.get(3);
     outline: 2px solid transparent;
     outline-offset: 2px;
     border-radius: calc(var(--radius) - var(--line-width));
@@ -115,9 +115,9 @@
     flex-shrink: 0;
     align-items: center;
     cursor: text;
-    gap: sizeToken(1.5);
-    padding-left: sizeToken(3);
-    padding-right: sizeToken(1.5);
+    gap: sizeToken.get(1.5);
+    padding-left: sizeToken.get(3);
+    padding-right: sizeToken.get(1.5);
 
     // Left slot
     &:not([data-name='right']) {
@@ -131,7 +131,7 @@
         order: 0;
         margin-left: 0px;
         margin-right: 0px;
-        padding-right: sizeToken(3);
+        padding-right: sizeToken.get(3);
     }
 
     // 2 slots without any name should be implicitly ordered
@@ -146,8 +146,8 @@
     display: flex;
     align-items: center;
     height: 100%;
-    margin-left: sizeToken(3);
-    margin-right: sizeToken(3);
+    margin-left: sizeToken.get(3);
+    margin-right: sizeToken.get(3);
     color: var(--text-color-positive);
 }
 
@@ -155,8 +155,8 @@
     display: flex;
     align-items: center;
     height: 100%;
-    margin-left: sizeToken(3);
-    margin-right: sizeToken(3);
+    margin-left: sizeToken.get(3);
+    margin-right: sizeToken.get(3);
     color: var(--text-color-negative);
 }
 
@@ -169,10 +169,10 @@
 .loadingStatus {
     display: flex;
     position: absolute;
-    width: sizeToken(6);
-    height: sizeToken(6);
-    top: sizeToken(-3);
-    right: sizeToken(-3);
+    width: sizeToken.get(6);
+    height: sizeToken.get(6);
+    top: sizeToken.get(-3);
+    right: sizeToken.get(-3);
     pointer-events: none;
     align-items: center;
     justify-content: center;
@@ -185,8 +185,8 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        width: sizeToken(4);
-        height: sizeToken(4);
+        width: sizeToken.get(4);
+        height: sizeToken.get(4);
         border: var(--line-width) solid var(--text-color-interactive);
         border-top-color: transparent;
         border-radius: 9999px;
diff --git a/packages/components/src/components/Tooltip/styles/tooltip.module.scss b/packages/components/src/components/Tooltip/styles/tooltip.module.scss
index 05808d0d97..07baee5776 100644
--- a/packages/components/src/components/Tooltip/styles/tooltip.module.scss
+++ b/packages/components/src/components/Tooltip/styles/tooltip.module.scss
@@ -1,25 +1,25 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-@import '../../../utilities/sizeToken.module.scss';
-@import '../../../utilities/text.module.scss';
+@use '../../../utilities/sizeToken.module.scss';
+@use '../../../utilities/text.module.scss';
 
 .root {
     background-color: var(--box-neutral-mighty-color);
     color: var(--box-neutral-mighty-inverse-color);
     border-radius: var(--radius);
-    max-width: sizeToken(48);
+    max-width: sizeToken.get(48);
     overflow: hidden;
     word-wrap: break-word;
     transform-origin: var(--radix-tooltip-content-transform-origin);
 
-    @include text-sm;
+    @include text.text-sm;
 
     &[data-tooltip-spacing='compact'] {
-        padding: sizeToken(1) sizeToken(2);
+        padding: sizeToken.get(1) sizeToken.get(2);
     }
 
     &[data-tooltip-spacing='spacious'] {
-        padding: sizeToken(2) sizeToken(3);
+        padding: sizeToken.get(2) sizeToken.get(3);
     }
 }
 
diff --git a/packages/components/src/helpers/layout.module.scss b/packages/components/src/helpers/layout.module.scss
index 5cd321e8e5..1358fff3a6 100644
--- a/packages/components/src/helpers/layout.module.scss
+++ b/packages/components/src/helpers/layout.module.scss
@@ -1,3 +1,6 @@
+@use "sass:list";
+@use "sass:map";
+@use "sass:meta";
 $screens: (
     base: 0px,
     xs: 390px,
@@ -75,144 +78,144 @@ $layoutProperties: (
             }
         }
 
-        @if (index($additional-properties, 'position')) {
+        @if (list.index($additional-properties, 'position')) {
             position: var(--#{$breakpoint}-position-computed);
         }
 
-        @if (index($additional-properties, 'overflow')) {
+        @if (list.index($additional-properties, 'overflow')) {
             overflow: var(--#{$breakpoint}-overflow-computed);
         }
-        @if (index($additional-properties, 'overflow-x')) {
+        @if (list.index($additional-properties, 'overflow-x')) {
             overflow-x: var(--#{$breakpoint}-overflow-x-computed);
         }
-        @if (index($additional-properties, 'overflow-y')) {
+        @if (list.index($additional-properties, 'overflow-y')) {
             overflow-y: var(--#{$breakpoint}-overflow-y-computed);
         }
 
-        @if (index($additional-properties, 'top')) {
+        @if (list.index($additional-properties, 'top')) {
             top: var(--#{$breakpoint}-top-computed);
         }
-        @if (index($additional-properties, 'right')) {
+        @if (list.index($additional-properties, 'right')) {
             right: var(--#{$breakpoint}-right-computed);
         }
-        @if (index($additional-properties, 'bottom')) {
+        @if (list.index($additional-properties, 'bottom')) {
             bottom: var(--#{$breakpoint}-bottom-computed);
         }
-        @if (index($additional-properties, 'left')) {
+        @if (list.index($additional-properties, 'left')) {
             left: var(--#{$breakpoint}-left-computed);
         }
 
-        @if (index($additional-properties, 'margin')) {
+        @if (list.index($additional-properties, 'margin')) {
             margin: var(--#{$breakpoint}-margin-computed);
         }
-        @if (index($additional-properties, 'margin-left')) {
+        @if (list.index($additional-properties, 'margin-left')) {
             margin-left: var(
                 --#{$breakpoint}-margin-left-computed,
                 var(--#{$breakpoint}-margin-x-computed, var(--#{$breakpoint}-margin-computed))
             );
         }
-        @if (index($additional-properties, 'margin-right')) {
+        @if (list.index($additional-properties, 'margin-right')) {
             margin-right: var(
                 --#{$breakpoint}-margin-right-computed,
                 var(--#{$breakpoint}-margin-x-computed, var(--#{$breakpoint}-margin-computed))
             );
         }
-        @if (index($additional-properties, 'margin-top')) {
+        @if (list.index($additional-properties, 'margin-top')) {
             margin-top: var(
                 --#{$breakpoint}-margin-top-computed,
                 var(--#{$breakpoint}-margin-y-computed, var(--#{$breakpoint}-margin-computed))
             );
         }
-        @if (index($additional-properties, 'margin-bottom')) {
+        @if (list.index($additional-properties, 'margin-bottom')) {
             margin-bottom: var(
                 --#{$breakpoint}-margin-bottom-computed,
                 var(--#{$breakpoint}-margin-y-computed, var(--#{$breakpoint}-margin-computed))
             );
         }
 
-        @if (index($additional-properties, 'padding')) {
+        @if (list.index($additional-properties, 'padding')) {
             padding: var(--#{$breakpoint}-padding-computed);
         }
-        @if (index($additional-properties, 'padding-left')) {
+        @if (list.index($additional-properties, 'padding-left')) {
             padding-left: var(
                 --#{$breakpoint}-padding-left-computed,
                 var(--#{$breakpoint}-padding-x-computed, var(--#{$breakpoint}-padding-computed))
             );
         }
-        @if (index($additional-properties, 'padding-right')) {
+        @if (list.index($additional-properties, 'padding-right')) {
             padding-right: var(
                 --#{$breakpoint}-padding-right-computed,
                 var(--#{$breakpoint}-padding-x-computed, var(--#{$breakpoint}-padding-computed))
             );
         }
-        @if (index($additional-properties, 'padding-top')) {
+        @if (list.index($additional-properties, 'padding-top')) {
             padding-top: var(
                 --#{$breakpoint}-padding-top-computed,
                 var(--#{$breakpoint}-padding-y-computed, var(--#{$breakpoint}-padding-computed))
             );
         }
-        @if (index($additional-properties, 'padding-bottom')) {
+        @if (list.index($additional-properties, 'padding-bottom')) {
             padding-bottom: var(
                 --#{$breakpoint}-padding-bottom-computed,
                 var(--#{$breakpoint}-padding-y-computed, var(--#{$breakpoint}-padding-computed))
             );
         }
 
-        @if index($additional-properties, 'width') {
+        @if list.index($additional-properties, 'width') {
             width: var(--#{$breakpoint}-width-computed);
         }
-        @if index($additional-properties, 'min-width') {
+        @if list.index($additional-properties, 'min-width') {
             min-width: var(--#{$breakpoint}-min-width-computed);
         }
-        @if index($additional-properties, 'max-width') {
+        @if list.index($additional-properties, 'max-width') {
             max-width: var(--#{$breakpoint}-max-width-computed);
         }
 
-        @if index($additional-properties, 'height') {
+        @if list.index($additional-properties, 'height') {
             height: var(--#{$breakpoint}-height-computed);
         }
-        @if index($additional-properties, 'min-height') {
+        @if list.index($additional-properties, 'min-height') {
             min-height: var(--#{$breakpoint}-min-height-computed);
         }
-        @if index($additional-properties, 'max-height') {
+        @if list.index($additional-properties, 'max-height') {
             max-height: var(--#{$breakpoint}-max-height-computed);
         }
 
-        @if index($additional-properties, 'display') {
+        @if list.index($additional-properties, 'display') {
             display: var(--#{$breakpoint}-display-computed);
         }
-        @if index($additional-properties, 'flex-direction') {
+        @if list.index($additional-properties, 'flex-direction') {
             flex-direction: var(--#{$breakpoint}-flex-direction-computed);
         }
-        @if index($additional-properties, 'align-items') {
+        @if list.index($additional-properties, 'align-items') {
             align-items: var(--#{$breakpoint}-align-items-computed);
         }
-        @if index($additional-properties, 'justify-content') {
+        @if list.index($additional-properties, 'justify-content') {
             justify-content: var(--#{$breakpoint}-justify-content-computed);
         }
-        @if index($additional-properties, 'flex-wrap') {
+        @if list.index($additional-properties, 'flex-wrap') {
             flex-wrap: var(--#{$breakpoint}-flex-wrap-computed);
         }
-        @if index($additional-properties, 'gap') {
+        @if list.index($additional-properties, 'gap') {
             gap: var(--#{$breakpoint}-gap-computed);
         }
-        @if index($additional-properties, 'gap-x') {
+        @if list.index($additional-properties, 'gap-x') {
             column-gap: var(--#{$breakpoint}-gap-x-computed, var(--#{$breakpoint}-gap-computed));
         }
-        @if index($additional-properties, 'gap-y') {
+        @if list.index($additional-properties, 'gap-y') {
             row-gap: var(--#{$breakpoint}-gap-y-computed, var(--#{$breakpoint}-gap-computed));
         }
 
-        @if index($additional-properties, 'grid-template-rows') {
+        @if list.index($additional-properties, 'grid-template-rows') {
             grid-template-rows: var(--#{$breakpoint}-grid-template-rows-computed);
         }
-        @if index($additional-properties, 'grid-template-columns') {
+        @if list.index($additional-properties, 'grid-template-columns') {
             grid-template-columns: var(--#{$breakpoint}-grid-template-columns-computed);
         }
-        @if index($additional-properties, 'grid-auto-flow') {
+        @if list.index($additional-properties, 'grid-auto-flow') {
             grid-auto-flow: var(--#{$breakpoint}-grid-auto-flow-computed);
         }
-        @if index($additional-properties, 'justify-items') {
+        @if list.index($additional-properties, 'justify-items') {
             justify-items: var(--#{$breakpoint}-justify-items-computed);
         }
     }
@@ -222,9 +225,9 @@ $layoutProperties: (
  * Apply default values for a property for all breakpoints if the value isn't a list or set the default value per breakpoint if you pass a list.
  */
 @mixin responsive-default-value($property, $value) {
-    @if type-of($value) == map {
+    @if meta.type-of($value) == map {
         @each $breakpoint, $_value in $screens {
-            $value-at-breakpoint: map-get($value, $breakpoint);
+            $value-at-breakpoint: map.get($value, $breakpoint);
 
             @if ($value-at-breakpoint == null) {
                 @error 'Value for "#{$property}" at breakpoint "#{$breakpoint}" is not defined.';
diff --git a/packages/components/src/styles.scss b/packages/components/src/styles.scss
index dd6f770b54..f41173f173 100644
--- a/packages/components/src/styles.scss
+++ b/packages/components/src/styles.scss
@@ -1,5 +1,5 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/packages/components/src/utilities/focusStyle.module.scss b/packages/components/src/utilities/focusStyle.module.scss
index c25989a82f..e15f7bdfe4 100644
--- a/packages/components/src/utilities/focusStyle.module.scss
+++ b/packages/components/src/utilities/focusStyle.module.scss
@@ -1,19 +1,21 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
 @mixin focus-outline-styles {
-    outline-style: none;
-    transition-property: box-shadow;
-    transition-duration: 0ms;
+    & {
+        outline-style: none;
+        transition-property: box-shadow;
+        transition-duration: 0ms;
 
-    box-shadow:
-        0 0 0 2px var(--base-color),
-        0 0 0 6px var(--focus-ring-color);
+        box-shadow:
+            0 0 0 2px var(--base-color),
+            0 0 0 6px var(--focus-ring-color);
+    }
 }
 
 @mixin focus-outline {
     &:focus-visible,
     &:focus-visible:hover,
-    &:has(>[data-show-focus-ring='true']) {
+    &:has(> [data-show-focus-ring='true']) {
         @include focus-outline-styles;
     }
 }
diff --git a/packages/components/src/utilities/mediaQuery.module.scss b/packages/components/src/utilities/mediaQuery.module.scss
index ea0ca76f25..ce2defda3a 100644
--- a/packages/components/src/utilities/mediaQuery.module.scss
+++ b/packages/components/src/utilities/mediaQuery.module.scss
@@ -3,13 +3,17 @@
 $sm-breakpoint: 600px;
 
 @mixin sm {
-    @media (min-width: $sm-breakpoint) {
-        @content;
+    & {
+        @media (min-width: $sm-breakpoint) {
+            @content;
+        }
     }
 }
 
 @mixin max-sm {
-    @media not all and (min-width: $sm-breakpoint) {
-        @content;
+    & {
+        @media not all and (min-width: $sm-breakpoint) {
+            @content;
+        }
     }
 }
diff --git a/packages/components/src/utilities/shadow.module.scss b/packages/components/src/utilities/shadow.module.scss
index b3ea5300c5..c363316d49 100644
--- a/packages/components/src/utilities/shadow.module.scss
+++ b/packages/components/src/utilities/shadow.module.scss
@@ -1,9 +1,13 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
 @mixin shadow-md {
-    box-shadow: 0 3px 10px 0 rgba(8, 8, 8, 0.15);
+    & {
+        box-shadow: 0 3px 10px 0 rgba(8, 8, 8, 0.15);
+    }
 }
 
 @mixin shadow-lg {
-    box-shadow: 0px 25px 80px 0px rgba(8, 8, 8, 0.2);
+    & {
+        box-shadow: 0px 25px 80px 0px rgba(8, 8, 8, 0.2);
+    }
 }
diff --git a/packages/components/src/utilities/sizeToken.module.scss b/packages/components/src/utilities/sizeToken.module.scss
index 9cd5824609..f94a4eee00 100644
--- a/packages/components/src/utilities/sizeToken.module.scss
+++ b/packages/components/src/utilities/sizeToken.module.scss
@@ -1,5 +1,5 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-@function sizeToken($value) {
+@function get($value) {
     @return $value * 0.25rem;
 }
diff --git a/packages/components/src/utilities/text.module.scss b/packages/components/src/utilities/text.module.scss
index a87c783251..f01090ff44 100644
--- a/packages/components/src/utilities/text.module.scss
+++ b/packages/components/src/utilities/text.module.scss
@@ -1,6 +1,8 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
 @mixin text-sm {
-    font-size: 0.875rem;
-    line-height: 1.25rem;
+    & {
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+    }
 }
diff --git a/packages/components/src/utilities/transitions.module.scss b/packages/components/src/utilities/transitions.module.scss
index daa5f18a1f..a11e1a4219 100644
--- a/packages/components/src/utilities/transitions.module.scss
+++ b/packages/components/src/utilities/transitions.module.scss
@@ -15,29 +15,45 @@
 }
 
 @mixin transition-none {
-    @include transition(none);
+    & {
+        @include transition(none);
+    }
 }
 
 @mixin transition-all {
-    @include transition(all);
+    & {
+        @include transition(all);
+    }
 }
 
 @mixin transition-colors {
-    @include transition((color, background-color, border-color, text-decoration-color, outline-color, fill, stroke));
+    & {
+        @include transition(
+            (color, background-color, border-color, text-decoration-color, outline-color, fill, stroke)
+        );
+    }
 }
 
 @mixin transition-opacity {
-    @include transition(opacity);
+    & {
+        @include transition(opacity);
+    }
 }
 
 @mixin transition-transform {
-    @include transition(transform);
+    & {
+        @include transition(transform);
+    }
 }
 
 @mixin transition-box-shadow {
-    @include transition(box-shadow);
+    & {
+        @include transition(box-shadow);
+    }
 }
 
 @mixin transition-transform {
-    @include transition(transform);
+    & {
+        @include transition(transform);
+    }
 }
diff --git a/packages/components/vite.config.ts b/packages/components/vite.config.ts
index 1c8c9948ed..4cf707fd58 100644
--- a/packages/components/vite.config.ts
+++ b/packages/components/vite.config.ts
@@ -23,6 +23,13 @@ export default defineConfig({
         tsConfigPaths(),
         dts({ insertTypesEntry: true, rollupTypes: true, exclude: ['**/*.stories.tsx'] }),
     ],
+    css: {
+        preprocessorOptions: {
+            scss: {
+                api: 'modern-compiler',
+            },
+        },
+    },
     build: {
         lib: {
             entry: './src/index.ts',