chore: update Sass notation for breaking changes in next version (#2178)

Frontify · Jan 28, 2025 · 425d2f1 · 425d2f1
1 parent 17ea184
commit 425d2f1
Show file tree

Hide file tree

Showing 28 changed files with 499 additions and 402 deletions.
diff --git a/.changeset/modern-camels-agree.md 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
@@ -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
@@ -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
@@ -1,20 +1,20 @@
 /* (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;
 }
 
 .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;