@snack-uikit/fields 0.30.0 → 0.31.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.31.0 (2024-10-28)
+
+
+### Features
+
+* **FF-5782:** sass use/forward approach ([3e53869](https://github.com/cloud-ru-tech/snack-uikit/commit/3e53869ace864a7718e434b7f410c15dbd911cd5))
+
+
+
+
+
 # 0.30.0 (2024-10-28)
 
 

package/README.md

@@ -239,7 +239,7 @@ FieldStepper в основном предназначен для работы с
 | hint | `string` | - | Подсказка внизу |
 | validationState | enum ValidationState: `"default"`, `"error"`, `"warning"`, `"success"` | default | Состояние валидации |
 | showHintIcon | `boolean` | - | Отображать иконку подсказки |
-| ref | `Ref<HTMLInputElement>` | - | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom |
+| ref | `LegacyRef<HTMLInputElement>` | - | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} |
 | key | `Key` | - |  |
 ## FieldTextArea
 ### Props
@@ -272,7 +272,7 @@ FieldStepper в основном предназначен для работы с
 | hint | `string` | - | Подсказка внизу |
 | validationState | enum ValidationState: `"default"`, `"error"`, `"warning"`, `"success"` | default | Состояние валидации |
 | showHintIcon | `boolean` | - | Отображать иконку подсказки |
-| ref | `Ref<HTMLTextAreaElement>` | - | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom |
+| ref | `LegacyRef<HTMLTextAreaElement>` | - | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} |
 | key | `Key` | - |  |
 ## FieldSecure
 ### Props
@@ -306,7 +306,7 @@ FieldStepper в основном предназначен для работы с
 | hint | `string` | - | Подсказка внизу |
 | validationState | enum ValidationState: `"default"`, `"error"`, `"warning"`, `"success"` | default | Состояние валидации |
 | showHintIcon | `boolean` | - | Отображать иконку подсказки |
-| ref | `Ref<HTMLInputElement>` | - | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom |
+| ref | `LegacyRef<HTMLInputElement>` | - | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} |
 | key | `Key` | - |  |
 ## parseDate
 `helper` 
@@ -341,7 +341,7 @@ FieldStepper в основном предназначен для работы с
 | hint | `string` | - | Подсказка внизу |
 | validationState | enum ValidationState: `"default"`, `"error"`, `"warning"`, `"success"` | default | Состояние валидации |
 | showHintIcon | `boolean` | - | Отображать иконку подсказки |
-| ref | `Ref<HTMLInputElement>` | - | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom |
+| ref | `LegacyRef<HTMLInputElement>` | - | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} |
 | key | `Key` | - |  |
 ## FieldSelect
 ### Props
@@ -395,7 +395,7 @@ FieldStepper в основном предназначен для работы с
 | enableFuzzySearch | `boolean` | - | Включить нечеткий поиск |
 | selectedOptionFormatter | `SelectedOptionFormatter` | - |  |
 | selection | "single" \| "multiple" | - |  |
-| ref | `Ref<HTMLInputElement>` | - | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom |
+| ref | `LegacyRef<HTMLInputElement>` | - | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} |
 | key | `Key` | - |  |
 | removeByBackspace | `boolean` | - |  |
 | resetSearchOnOptionSelection | `boolean` | - | Поведение строки поиска при выборе опции из списка |
@@ -428,7 +428,7 @@ FieldStepper в основном предназначен для работы с
 | hint | `string` | - | Подсказка внизу |
 | validationState | enum ValidationState: `"default"`, `"error"`, `"warning"`, `"success"` | default | Состояние валидации |
 | showHintIcon | `boolean` | - | Отображать иконку подсказки |
-| ref | `Ref<HTMLInputElement>` | - | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom |
+| ref | `LegacyRef<HTMLInputElement>` | - | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} |
 | key | `Key` | - |  |
 ## FieldSlider
 ### Props
@@ -463,7 +463,7 @@ FieldStepper в основном предназначен для работы с
 | labelTooltipPlacement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | top | Расположение подсказки лейбла |
 | hint | `string` | - | Подсказка внизу |
 | showHintIcon | `boolean` | - | Отображать иконку подсказки |
-| ref | `Ref<HTMLInputElement>` | - | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom |
+| ref | `LegacyRef<HTMLInputElement>` | - | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} |
 | key | `Key` | - |  |
 ## FieldColor
 ### Props
@@ -496,7 +496,7 @@ FieldStepper в основном предназначен для работы с
 | hint | `string` | - | Подсказка внизу |
 | validationState | enum ValidationState: `"default"`, `"error"`, `"warning"`, `"success"` | default | Состояние валидации |
 | showHintIcon | `boolean` | - | Отображать иконку подсказки |
-| ref | `Ref<HTMLInputElement>` | - | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom |
+| ref | `LegacyRef<HTMLInputElement>` | - | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} |
 | key | `Key` | - |  |
 
 

package/dist/cjs/components/FieldSelect/styles.module.css

@@ -72,12 +72,8 @@
   color:var(--sys-neutral-text-light, #8b8e9b);
 }
 .container[data-size=s][data-variant=single-line-container] .displayValue{
-  width:calc(100% - (
-            var(--space-fields-single-line-container-s-right, 6px) + var(--space-fields-single-line-container-s-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-xs, 16px) * 2)
-          ));
-  margin-right:calc(
-            var(--space-fields-single-line-container-s-right, 6px) + var(--space-fields-single-line-container-s-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-xs, 16px) * 2)
-          );
+  width:calc(100% - (var(--space-fields-single-line-container-s-right, 6px) + var(--space-fields-single-line-container-s-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-xs, 16px) * 2)));
+  margin-right:calc(var(--space-fields-single-line-container-s-right, 6px) + var(--space-fields-single-line-container-s-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-xs, 16px) * 2));
   padding-left:var(--space-fields-single-line-container-s-left, 6px);
   border-radius:var(--radius-fields-s, 12px);
 }
@@ -95,12 +91,8 @@
   color:var(--sys-neutral-text-light, #8b8e9b);
 }
 .container[data-size=m][data-variant=single-line-container] .displayValue{
-  width:calc(100% - (
-            var(--space-fields-single-line-container-m-right, 8px) + var(--space-fields-single-line-container-m-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2)
-          ));
-  margin-right:calc(
-            var(--space-fields-single-line-container-m-right, 8px) + var(--space-fields-single-line-container-m-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2)
-          );
+  width:calc(100% - (var(--space-fields-single-line-container-m-right, 8px) + var(--space-fields-single-line-container-m-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2)));
+  margin-right:calc(var(--space-fields-single-line-container-m-right, 8px) + var(--space-fields-single-line-container-m-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2));
   padding-left:var(--space-fields-single-line-container-m-left, 8px);
   border-radius:var(--radius-fields-m, 14px);
 }
@@ -118,12 +110,8 @@
   color:var(--sys-neutral-text-light, #8b8e9b);
 }
 .container[data-size=l][data-variant=single-line-container] .displayValue{
-  width:calc(100% - (
-            var(--space-fields-single-line-container-l-right, 10px) + var(--space-fields-single-line-container-l-gap, 8px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2)
-          ));
-  margin-right:calc(
-            var(--space-fields-single-line-container-l-right, 10px) + var(--space-fields-single-line-container-l-gap, 8px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2)
-          );
+  width:calc(100% - (var(--space-fields-single-line-container-l-right, 10px) + var(--space-fields-single-line-container-l-gap, 8px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2)));
+  margin-right:calc(var(--space-fields-single-line-container-l-right, 10px) + var(--space-fields-single-line-container-l-gap, 8px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2));
   padding-left:var(--space-fields-single-line-container-l-left, 10px);
   border-radius:var(--radius-fields-l, 16px);
 }

package/dist/esm/components/FieldSelect/styles.module.css

@@ -72,12 +72,8 @@
   color:var(--sys-neutral-text-light, #8b8e9b);
 }
 .container[data-size=s][data-variant=single-line-container] .displayValue{
-  width:calc(100% - (
-            var(--space-fields-single-line-container-s-right, 6px) + var(--space-fields-single-line-container-s-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-xs, 16px) * 2)
-          ));
-  margin-right:calc(
-            var(--space-fields-single-line-container-s-right, 6px) + var(--space-fields-single-line-container-s-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-xs, 16px) * 2)
-          );
+  width:calc(100% - (var(--space-fields-single-line-container-s-right, 6px) + var(--space-fields-single-line-container-s-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-xs, 16px) * 2)));
+  margin-right:calc(var(--space-fields-single-line-container-s-right, 6px) + var(--space-fields-single-line-container-s-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-xs, 16px) * 2));
   padding-left:var(--space-fields-single-line-container-s-left, 6px);
   border-radius:var(--radius-fields-s, 12px);
 }
@@ -95,12 +91,8 @@
   color:var(--sys-neutral-text-light, #8b8e9b);
 }
 .container[data-size=m][data-variant=single-line-container] .displayValue{
-  width:calc(100% - (
-            var(--space-fields-single-line-container-m-right, 8px) + var(--space-fields-single-line-container-m-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2)
-          ));
-  margin-right:calc(
-            var(--space-fields-single-line-container-m-right, 8px) + var(--space-fields-single-line-container-m-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2)
-          );
+  width:calc(100% - (var(--space-fields-single-line-container-m-right, 8px) + var(--space-fields-single-line-container-m-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2)));
+  margin-right:calc(var(--space-fields-single-line-container-m-right, 8px) + var(--space-fields-single-line-container-m-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2));
   padding-left:var(--space-fields-single-line-container-m-left, 8px);
   border-radius:var(--radius-fields-m, 14px);
 }
@@ -118,12 +110,8 @@
   color:var(--sys-neutral-text-light, #8b8e9b);
 }
 .container[data-size=l][data-variant=single-line-container] .displayValue{
-  width:calc(100% - (
-            var(--space-fields-single-line-container-l-right, 10px) + var(--space-fields-single-line-container-l-gap, 8px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2)
-          ));
-  margin-right:calc(
-            var(--space-fields-single-line-container-l-right, 10px) + var(--space-fields-single-line-container-l-gap, 8px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2)
-          );
+  width:calc(100% - (var(--space-fields-single-line-container-l-right, 10px) + var(--space-fields-single-line-container-l-gap, 8px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2)));
+  margin-right:calc(var(--space-fields-single-line-container-l-right, 10px) + var(--space-fields-single-line-container-l-gap, 8px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2));
   padding-left:var(--space-fields-single-line-container-l-left, 10px);
   border-radius:var(--radius-fields-l, 16px);
 }

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Fields",
-  "version": "0.30.0",
+  "version": "0.31.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -36,20 +36,20 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/button": "0.18.0",
-    "@snack-uikit/calendar": "0.9.0",
-    "@snack-uikit/color-picker": "0.2.0",
-    "@snack-uikit/divider": "3.1.0",
-    "@snack-uikit/dropdown": "0.3.0",
-    "@snack-uikit/icons": "0.23.0",
-    "@snack-uikit/input-private": "4.1.0",
-    "@snack-uikit/list": "0.19.0",
-    "@snack-uikit/scroll": "0.7.0",
-    "@snack-uikit/skeleton": "0.4.0",
-    "@snack-uikit/slider": "0.2.0",
-    "@snack-uikit/tag": "0.10.0",
-    "@snack-uikit/tooltip": "0.14.0",
-    "@snack-uikit/truncate-string": "0.5.0",
+    "@snack-uikit/button": "0.19.0",
+    "@snack-uikit/calendar": "0.10.0",
+    "@snack-uikit/color-picker": "0.3.0",
+    "@snack-uikit/divider": "3.2.0",
+    "@snack-uikit/dropdown": "0.4.0",
+    "@snack-uikit/icons": "0.24.0",
+    "@snack-uikit/input-private": "4.2.0",
+    "@snack-uikit/list": "0.20.0",
+    "@snack-uikit/scroll": "0.8.0",
+    "@snack-uikit/skeleton": "0.5.0",
+    "@snack-uikit/slider": "0.3.0",
+    "@snack-uikit/tag": "0.11.0",
+    "@snack-uikit/tooltip": "0.15.0",
+    "@snack-uikit/truncate-string": "0.6.0",
     "@snack-uikit/utils": "3.5.0",
     "classnames": "2.3.2",
     "copy-to-clipboard": "3.3.3",
@@ -65,5 +65,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "62cc21d8606a61a78f80e3a7455b20d6f38474fa"
+  "gitHead": "8499829efa0c118b704de17411ae2328a024adb5"
 }

package/src/components/FieldColor/styles.module.scss

@@ -1,15 +1,14 @@
-@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
-@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-fields';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
 
 $sizes: 's', 'm', 'l';
 $icons-sizes: (
-  's': $icon-xs,
-  'm': $icon-s,
-  'l': $icon-s,
+  's': styles-tokens-element.$icon-xs,
+  'm': styles-tokens-element.$icon-s,
+  'l': styles-tokens-element.$icon-s,
 );
 
 .triggerClassName {
-  --offset: #{$space-drop-list-drop-offset};
+  --offset: #{styles-tokens-element.$space-drop-list-drop-offset};
 
   display: block;
   width: 100%;
@@ -18,12 +17,12 @@ $icons-sizes: (
 .colorPreview {
   position: relative;
 
-  width: $dimension-2m;
-  height: $dimension-2m;
+  width: styles-tokens-element.$dimension-2m;
+  height: styles-tokens-element.$dimension-2m;
 
   /* stylelint-disable-next-line color-no-hex */
   background-color: #fff;
-  border-radius: $dimension-050m;
+  border-radius: styles-tokens-element.$dimension-050m;
 
   &::after {
     content: '';
@@ -36,6 +35,6 @@ $icons-sizes: (
     height: 100%;
 
     background-color: var(--color);
-    border-radius: $dimension-050m;
+    border-radius: styles-tokens-element.$dimension-050m;
   }
 }

package/src/components/FieldDate/styles.module.scss

@@ -1,15 +1,14 @@
-@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
-@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-fields';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
 
 $sizes: 's', 'm', 'l';
 $icons-sizes: (
-  's': $icon-xs,
-  'm': $icon-s,
-  'l': $icon-s
+  's': styles-tokens-element.$icon-xs,
+  'm': styles-tokens-element.$icon-s,
+  'l': styles-tokens-element.$icon-s
 );
 
 .triggerClassName {
-  --offset: #{$space-drop-list-drop-offset};
+  --offset: #{styles-tokens-element.$space-drop-list-drop-offset};
 
   display: block;
   width: 100%;
@@ -35,25 +34,25 @@ $icons-sizes: (
 
 .container {
   .calendarIcon {
-    color: $sys-neutral-text-light;
+    color: styles-tokens-element.$sys-neutral-text-light;
 
     @each $size in $sizes {
       &[data-size='#{$size}'] {
-        width: simple-var($icons-sizes, $size) !important; /* stylelint-disable-line declaration-no-important */
-        height: simple-var($icons-sizes, $size) !important; /* stylelint-disable-line declaration-no-important */
+        width: styles-tokens-element.simple-var($icons-sizes, $size) !important; /* stylelint-disable-line declaration-no-important */
+        height: styles-tokens-element.simple-var($icons-sizes, $size) !important; /* stylelint-disable-line declaration-no-important */
       }
     }
   }
 
   &:hover, &:focus-within, &[data-focused] {
     .calendarIcon {
-      color: $sys-neutral-text-support;
+      color: styles-tokens-element.$sys-neutral-text-support;
     }
   }
 
   &[data-disabled], &[data-readonly] {
     .calendarIcon {
-      color: $sys-neutral-text-disabled;
+      color: styles-tokens-element.$sys-neutral-text-disabled;
     }
   }
 }

package/src/components/FieldDecorator/styles.module.scss

@@ -1,26 +1,25 @@
-@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-fields';
-@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-fields';
 
 $sizes: 's', 'm', 'l';
 $header-typography: (
-  's': $sans-label-m,
-  'm': $sans-label-l,
-  'l': $sans-label-l,
+  's': styles-tokens-fields.$sans-label-m,
+  'm': styles-tokens-fields.$sans-label-l,
+  'l': styles-tokens-fields.$sans-label-l,
 );
 $footer-typography: (
-  's': $sans-body-s,
-  'm': $sans-body-m,
-  'l': $sans-body-m,
+  's': styles-tokens-fields.$sans-body-s,
+  'm': styles-tokens-fields.$sans-body-m,
+  'l': styles-tokens-fields.$sans-body-m,
 );
 $hint-icon-container: (
-  's': $fields-hint-icon-container-s,
-  'm': $fields-hint-icon-container-m,
-  'l': $fields-hint-icon-container-m,
+  's': styles-tokens-fields.$fields-hint-icon-container-s,
+  'm': styles-tokens-fields.$fields-hint-icon-container-m,
+  'l': styles-tokens-fields.$fields-hint-icon-container-m,
 );
 $caption-typography: (
-  's': $sans-body-s,
-  'm': $sans-body-m,
-  'l': $sans-body-m,
+  's': styles-tokens-fields.$sans-body-s,
+  'm': styles-tokens-fields.$sans-body-m,
+  'l': styles-tokens-fields.$sans-body-m,
 );
 
 .decorator {
@@ -33,50 +32,50 @@ $caption-typography: (
 
   @each $size in $sizes {
     &[data-size='#{$size}'] {
-      @include composite-var($fields, 'decorator', $size);
+      @include styles-tokens-fields.composite-var(styles-tokens-fields.$fields, 'decorator', $size);
     }
   }
 }
 
 .header {
   display: flex;
-  gap: $dimension-050m;
+  gap: styles-tokens-fields.$dimension-050m;
   box-sizing: border-box;
-  color: $sys-neutral-text-support;
+  color: styles-tokens-fields.$sys-neutral-text-support;
 
   @each $size in $sizes {
     &[data-size='#{$size}'] {
-      @include composite-var($header-typography, $size);
+      @include styles-tokens-fields.composite-var($header-typography, $size);
 
       .caption {
-        @include composite-var($caption-typography, $size);
+        @include styles-tokens-fields.composite-var($caption-typography, $size);
 
         margin-left: auto;
-        color: $sys-neutral-text-light;
+        color: styles-tokens-fields.$sys-neutral-text-light;
       }
     }
   }
 }
 
 .labelLayout {
-  @include composite-var($fields-label-label-layout);
+  @include styles-tokens-fields.composite-var(styles-tokens-fields.$fields-label-label-layout);
 
   display: inline-flex;
   align-items: center;
-  color: $sys-neutral-text-light;
+  color: styles-tokens-fields.$sys-neutral-text-light;
 }
 
 .label {
   display: grid;
-  color: $sys-neutral-text-support;
+  color: styles-tokens-fields.$sys-neutral-text-support;
 }
 
 .required {
-  color: $sys-neutral-text-support;
+  color: styles-tokens-fields.$sys-neutral-text-support;
 }
 
 .footer {
-  @include composite-var($fields-hint-container);
+  @include styles-tokens-fields.composite-var(styles-tokens-fields.$fields-hint-container);
 
   display: flex;
   justify-content: space-between;
@@ -84,7 +83,7 @@ $caption-typography: (
 
   @each $size in $sizes {
     &[data-size='#{$size}'] {
-      @include composite-var($footer-typography, $size);
+      @include styles-tokens-fields.composite-var($footer-typography, $size);
     }
   }
 
@@ -94,7 +93,7 @@ $caption-typography: (
 }
 
 .hintLayout {
-  @include composite-var($fields-hint-hint-layout);
+  @include styles-tokens-fields.composite-var(styles-tokens-fields.$fields-hint-hint-layout);
 
   display: inline-flex;
   align-items: flex-start;
@@ -108,7 +107,7 @@ $caption-typography: (
 
   @each $size in $sizes {
     &[data-size='#{$size}'] {
-      @include composite-var($hint-icon-container, $size);
+      @include styles-tokens-fields.composite-var($hint-icon-container, $size);
     }
   }
 }
@@ -119,26 +118,26 @@ $caption-typography: (
   word-break: break-word;
 
   &[data-validation='default'] {
-    color: $sys-neutral-text-light;
+    color: styles-tokens-fields.$sys-neutral-text-light;
   }
 
   &[data-validation='error'] {
-    color: $sys-red-text-main;
+    color: styles-tokens-fields.$sys-red-text-main;
   }
 
   &[data-validation='warning'] {
-    color: $sys-yellow-text-main;
+    color: styles-tokens-fields.$sys-yellow-text-main;
   }
 
   &[data-validation='success'] {
-    color: $sys-green-text-main;
+    color: styles-tokens-fields.$sys-green-text-main;
   }
 }
 
 .icon {
   flex-shrink: 0;
   box-sizing: content-box;
-  color: $sys-neutral-text-light;
+  color: styles-tokens-fields.$sys-neutral-text-light;
 }
 
 .hintIcon {
@@ -146,39 +145,39 @@ $caption-typography: (
   box-sizing: content-box;
 
   &[data-validation='default'] {
-    color: $sys-neutral-accent-default;
+    color: styles-tokens-fields.$sys-neutral-accent-default;
   }
 
   &[data-validation='error'] {
-    color: $sys-red-accent-default;
+    color: styles-tokens-fields.$sys-red-accent-default;
   }
 
   &[data-validation='warning'] {
-    color: $sys-yellow-accent-default;
+    color: styles-tokens-fields.$sys-yellow-accent-default;
   }
 
   &[data-validation='success'] {
-    color: $sys-green-accent-default;
+    color: styles-tokens-fields.$sys-green-accent-default;
   }
 }
 
 .counterLimit {
   > span {
     &[data-validation='default'] {
-      color: $sys-neutral-text-light;
+      color: styles-tokens-fields.$sys-neutral-text-light;
     }
 
     &[data-limit-exceeded],
     &[data-validation='error'] {
-      color: $sys-red-text-light;
+      color: styles-tokens-fields.$sys-red-text-light;
     }
 
     &[data-validation='warning'] {
-      color: $sys-yellow-text-light;
+      color: styles-tokens-fields.$sys-yellow-text-light;
     }
 
     &[data-validation='success'] {
-      color: $sys-green-text-light;
+      color: styles-tokens-fields.$sys-green-text-light;
     }
   }
 }
@@ -186,18 +185,18 @@ $caption-typography: (
 .counterCurrentValue {
   &[data-limit-exceeded] {
     &[data-validation='default'] {
-      color: $sys-neutral-text-main;
+      color: styles-tokens-fields.$sys-neutral-text-main;
     }
     &[data-validation='error'] {
-      color: $sys-red-text-main;
+      color: styles-tokens-fields.$sys-red-text-main;
     }
 
     &[data-validation='warning'] {
-      color: $sys-yellow-text-main;
+      color: styles-tokens-fields.$sys-yellow-text-main;
     }
 
     &[data-validation='success'] {
-      color: $sys-green-text-light;
+      color: styles-tokens-fields.$sys-green-text-light;
     }
   }
 }

package/src/components/FieldSelect/styles.module.scss

@@ -1,18 +1,18 @@
-@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
-@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-fields';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-fields';
 
 $sizes: 's', 'm', 'l';
 $containerVariant: 'single-line-container';
 $icons-sizes: (
-  's': $icon-xs,
-  'm': $icon-s,
-  'l': $icon-s,
+  's': styles-tokens-element.$icon-xs,
+  'm': styles-tokens-element.$icon-s,
+  'l': styles-tokens-element.$icon-s,
 );
 
 $base-min-width: 4px;
 
 .triggerClassName {
-  --offset: #{$space-drop-list-drop-offset};
+  --offset: #{styles-tokens-element.$space-drop-list-drop-offset};
 
   width: 100%;
 }
@@ -33,10 +33,10 @@ $base-min-width: 4px;
 
   @each $size in $sizes {
     &[data-size='#{$size}'] {
-      @include composite-var($fields, 'select-multiple', $size);
+      @include styles-tokens-element.composite-var(styles-tokens-fields.$fields, 'select-multiple', $size);
 
       .contentWrapper {
-        gap: simple-var($fields, 'select-multiple', $size, 'gap');
+        gap: styles-tokens-element.simple-var(styles-tokens-fields.$fields, 'select-multiple', $size, 'gap');
       }
     }
   }
@@ -49,27 +49,27 @@ $base-min-width: 4px;
   @each $size in $sizes {
     &[data-size='#{$size}'] {
       .inputPlug {
-        @include composite-var($theme-variables, 'sans', 'body', $size);
+        @include styles-tokens-element.composite-var(styles-tokens-element.$theme-variables, 'sans', 'body', $size);
       }
 
       .arrowIcon {
-        width: simple-var($icons-sizes, $size) !important; /* stylelint-disable-line declaration-no-important */
-        height: simple-var($icons-sizes, $size) !important; /* stylelint-disable-line declaration-no-important */
-        color: $sys-neutral-text-light;
+        width: styles-tokens-element.simple-var($icons-sizes, $size) !important; /* stylelint-disable-line declaration-no-important */
+        height: styles-tokens-element.simple-var($icons-sizes, $size) !important; /* stylelint-disable-line declaration-no-important */
+        color: styles-tokens-element.$sys-neutral-text-light;
       }
 
       &[data-variant='#{$containerVariant}'] {
         .displayValue {
-          $button-width: simple-var($icons-sizes, $size);
-          $postfix-width: calc(var(#{$space-fields-postfix-gap}) + $button-width * 2);
+          $button-width: styles-tokens-element.simple-var($icons-sizes, $size);
+          $postfix-width: calc(var(#{styles-tokens-element.$space-fields-postfix-gap}) + $button-width * 2);
           $margin-right: calc(
-            #{simple-var($fields, $containerVariant, $size, 'padding-right')} + #{simple-var($fields, $containerVariant, $size, 'gap')} + #{$postfix-width}
+            #{styles-tokens-element.simple-var(styles-tokens-fields.$fields, $containerVariant, $size, 'padding-right')} + #{styles-tokens-element.simple-var(styles-tokens-fields.$fields, $containerVariant, $size, 'gap')} + #{$postfix-width}
           );
 
           width: calc(100% - $margin-right);
           margin-right: $margin-right;
-          padding-left: simple-var($fields, $containerVariant, $size, 'padding-left');
-          border-radius: simple-var($fields, $containerVariant, $size, 'border-radius');
+          padding-left: styles-tokens-element.simple-var(styles-tokens-fields.$fields, $containerVariant, $size, 'padding-left');
+          border-radius: styles-tokens-element.simple-var(styles-tokens-fields.$fields, $containerVariant, $size, 'border-radius');
         }
       }
     }
@@ -79,14 +79,14 @@ $base-min-width: 4px;
   &:focus-within,
   &[data-focused] {
     .arrowIcon {
-      color: $sys-neutral-text-support;
+      color: styles-tokens-element.$sys-neutral-text-support;
     }
   }
 
   &[data-disabled],
   &[data-readonly] {
     .arrowIcon {
-      color: $sys-neutral-text-disabled;
+      color: styles-tokens-element.$sys-neutral-text-disabled;
     }
   }
 }
@@ -125,7 +125,7 @@ $base-min-width: 4px;
 .postfix {
   display: inline-flex;
   flex-shrink: 0;
-  gap: $space-fields-postfix-gap;
+  gap: styles-tokens-element.$space-fields-postfix-gap;
 }
 
 input.readonlyCursor {

package/src/components/FieldSlider/styles.module.scss

@@ -1,5 +1,5 @@
-@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-fields';
-@import '@snack-uikit/figma-tokens/build/scss/styles-theme-variables';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-fields';
+@use '@snack-uikit/figma-tokens/build/scss/styles-theme-variables';
 
 $sizes: 's', 'm', 'l';
 
@@ -14,7 +14,7 @@ $sizes: 's', 'm', 'l';
 
     @each $size in $sizes {
       &[data-size='#{$size}'] {
-        @include composite-var($fields, 'slider-wrap', $size);
+        @include styles-theme-variables.composite-var(styles-tokens-fields.$fields, 'slider-wrap', $size);
 
         height: inherit;
       }
@@ -24,6 +24,6 @@ $sizes: 's', 'm', 'l';
 
 .fieldContainer {
   svg {
-    color: simple-var($theme-variables, 'sys', 'neutral', 'text-disabled');
+    color: styles-theme-variables.simple-var(styles-theme-variables.$theme-variables, 'sys', 'neutral', 'text-disabled');
   }
 }

package/src/components/FieldTextArea/styles.module.scss

@@ -1,25 +1,25 @@
-@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-fields';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-fields';
 
 $sizes: 's', 'm', 'l';
 $padding-right: (
-  's': $fields-buttons-s,
-  'm': $fields-buttons-m,
-  'l': $fields-buttons-m,
+  's': styles-tokens-fields.$fields-buttons-s,
+  'm': styles-tokens-fields.$fields-buttons-m,
+  'l': styles-tokens-fields.$fields-buttons-m,
 );
 $scroll-bar-heights: (
-  's': $dimension-050m,
-  'm': calc($dimension-025m + $dimension-050m),
-  'l': $dimension-1m,
+  's': styles-tokens-fields.$dimension-050m,
+  'm': calc(styles-tokens-fields.$dimension-025m + styles-tokens-fields.$dimension-050m),
+  'l': styles-tokens-fields.$dimension-1m,
 );
 $padding-right: (
-  's': $fields-buttons-s,
-  'm': $fields-buttons-m,
-  'l': $fields-buttons-m,
+  's': styles-tokens-fields.$fields-buttons-s,
+  'm': styles-tokens-fields.$fields-buttons-m,
+  'l': styles-tokens-fields.$fields-buttons-m,
 );
 $scroll-bar-heights: (
-  's': $dimension-050m,
-  'm': calc($dimension-025m + $dimension-050m),
-  'l': $dimension-1m,
+  's': styles-tokens-fields.$dimension-050m,
+  'm': calc(styles-tokens-fields.$dimension-025m + styles-tokens-fields.$dimension-050m),
+  'l': styles-tokens-fields.$dimension-1m,
 );
 
 .container {
@@ -37,18 +37,18 @@ $scroll-bar-heights: (
 
   @each $size in $sizes {
     &[data-size='#{$size}'] {
-      --row-height: #{simple-var($theme-variables, 'sans', 'body', $size, 'line-height')};
-      --horizontal-scroll-bar-height: #{simple-var($scroll-bar-heights, $size)};
+      --row-height: #{styles-tokens-fields.simple-var(styles-tokens-fields.$theme-variables, 'sans', 'body', $size, 'line-height')};
+      --horizontal-scroll-bar-height: #{styles-tokens-fields.simple-var($scroll-bar-heights, $size)};
 
       .textarea {
         overflow: hidden;
-        padding-right: calc(simple-var($padding-right, $size, 'width') + simple-var($fields-scroll-bar-width, 'width'));
+        padding-right: calc(styles-tokens-fields.simple-var($padding-right, $size, 'width') + styles-tokens-fields.simple-var(styles-tokens-fields.$fields-scroll-bar-width, 'width'));
       }
 
       .postfix {
         position: absolute;
-        top: simple-var($fields, 'multi-line-container', $size, 'padding-top');
-        right: calc(simple-var($fields, 'multi-line-container', $size, 'padding-right') + simple-var($fields-scroll-bar-width, 'width'));
+        top: styles-tokens-fields.simple-var(styles-tokens-fields.$fields, 'multi-line-container', $size, 'padding-top');
+        right: calc(styles-tokens-fields.simple-var(styles-tokens-fields.$fields, 'multi-line-container', $size, 'padding-right') + styles-tokens-fields.simple-var(styles-tokens-fields.$fields-scroll-bar-width, 'width'));
       }
     }
   }

package/src/helperComponents/ButtonCopyValue/styles.module.scss

@@ -1,5 +1,5 @@
-@import "../../styles.module";
+@use "../../styles.module";
 
 .buttonCopyValue {
-  @include button-styles();
+  @include styles.button-styles();
 }

package/src/helperComponents/ButtonField/styles.module.scss

@@ -1,5 +1,5 @@
-@import "@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element";
-@import "@snack-uikit/figma-tokens/build/scss/components/styles-tokens-fields";
+@use "@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element";
+@use "@snack-uikit/figma-tokens/build/scss/components/styles-tokens-fields";
 
 $variants: 'before', 'after';
 $sizes: 's', 'm', 'l';
@@ -13,7 +13,7 @@ $sizes: 's', 'm', 'l';
   margin: 0;
   padding: 0;
 
-  color: $sys-neutral-text-support;
+  color: styles-tokens-element.$sys-neutral-text-support;
 
   background-color: transparent;
   border: none;
@@ -22,7 +22,7 @@ $sizes: 's', 'm', 'l';
     &[data-variant='#{$variant}'] {
       @each $size in $sizes {
         &[data-size='#{$size}'] {
-          @include composite-var($fields, 'button-field', $variant, $size);
+          @include styles-tokens-element.composite-var(styles-tokens-fields.$fields, 'button-field', $variant, $size);
         }
       }
     }
@@ -30,19 +30,19 @@ $sizes: 's', 'm', 'l';
 
   &:hover {
     cursor: pointer;
-    background: color-on-background-with-opacity($sys-neutral-accent-default, $sys-neutral-background1-level, $opacity-a008);
+    background: styles-tokens-element.color-on-background-with-opacity(styles-tokens-element.$sys-neutral-accent-default, styles-tokens-element.$sys-neutral-background1-level, styles-tokens-element.$opacity-a008);
   }
 
   &:focus-visible, &[data-arrow-open] {
-    @include outline-var($container-focused-s);
+    @include styles-tokens-element.outline-var(styles-tokens-element.$container-focused-s);
 
-    background: color-on-background-with-opacity($sys-neutral-accent-default, $sys-neutral-background1-level, $opacity-a008);
-    outline-color: $sys-primary-accent-default;
+    background: styles-tokens-element.color-on-background-with-opacity(styles-tokens-element.$sys-neutral-accent-default, styles-tokens-element.$sys-neutral-background1-level, styles-tokens-element.$opacity-a008);
+    outline-color: styles-tokens-element.$sys-primary-accent-default;
   }
 
   &[data-disabled] {
     cursor: not-allowed;
-    opacity: $opacity-a056;
+    opacity: styles-tokens-element.$opacity-a056;
     background-color: transparent;
   }
 }

package/src/helperComponents/ButtonFieldList/styles.module.scss

@@ -1,5 +1,5 @@
-@import "@snack-uikit/figma-tokens/build/scss/styles-theme-variables";
+@use "@snack-uikit/figma-tokens/build/scss/styles-theme-variables";
 
 .triggerClassName {
-  --offset: #{$space-drop-list-drop-offset};
+  --offset: #{styles-theme-variables.$space-drop-list-drop-offset};
 }

package/src/helperComponents/ButtonHideValue/styles.module.scss

@@ -1,5 +1,5 @@
-@import "../../styles.module";
+@use "../../styles.module";
 
 .buttonHideValue {
-  @include button-styles();
+  @include styles.button-styles();
 }

package/src/helperComponents/FieldContainerPrivate/styles.module.scss

@@ -1,30 +1,28 @@
-@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-fields';
-@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
-
-/* stylelint-disable no-descending-specificity */
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-fields';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
 
 $sizes: 's', 'm', 'l';
 $variants: 'single-line-container', 'single-line-container-button-before', 'single-line-container-button-after', 'multi-line-container';
 
 @mixin validationState($state, $rainbowColor, $bgDefault) {
   &[data-validation='#{$state}'] {
-    background-color: simple-var($theme-variables, 'sys', $bgDefault, 'background1-level');
-    border-color: simple-var($theme-variables, 'sys', $bgDefault, 'decor-default');
+    background-color: styles-tokens-fields.simple-var(styles-tokens-fields.$theme-variables, 'sys', $bgDefault, 'background1-level');
+    border-color: styles-tokens-fields.simple-var(styles-tokens-fields.$theme-variables, 'sys', $bgDefault, 'decor-default');
 
     &:hover {
-      background-color: $sys-neutral-background2-level;
-      border-color: simple-var($theme-variables, 'sys', $rainbowColor, 'decor-hovered');
+      background-color: styles-tokens-fields.$sys-neutral-background2-level;
+      border-color: styles-tokens-fields.simple-var(styles-tokens-fields.$theme-variables, 'sys', $rainbowColor, 'decor-hovered');
     }
 
     &:not([data-readonly]):not([data-disable-focus]) {
       &:focus-within,
       &[data-focused] {
         &:not([data-disabled]) {
-          @include outline-var($container-focused-m);
+          @include styles-tokens-fields.outline-var(styles-tokens-element.$container-focused-m);
 
-          background-color: simple-var($sys-neutral-background2-level);
-          border-color: simple-var($theme-variables, 'sys', $rainbowColor, 'accent-default');
-          outline-color: simple-var($theme-variables, 'sys', $rainbowColor, 'decor-activated');
+          background-color: styles-tokens-fields.simple-var(styles-tokens-fields.$sys-neutral-background2-level);
+          border-color: styles-tokens-fields.simple-var(styles-tokens-fields.$theme-variables, 'sys', $rainbowColor, 'accent-default');
+          outline-color: styles-tokens-fields.simple-var(styles-tokens-fields.$theme-variables, 'sys', $rainbowColor, 'decor-activated');
         }
       }
     }
@@ -49,19 +47,19 @@ $variants: 'single-line-container', 'single-line-container-button-before', 'sing
 
   @each $size in $sizes {
     &[data-size='#{$size}'] {
-      @include composite-var($fields, 'container', $size);
+      @include styles-tokens-fields.composite-var(styles-tokens-fields.$fields, 'container', $size);
 
       &,
       input,
       select,
       textarea,
       span {
-        @include composite-var($theme-variables, 'sans', 'body', $size);
+        @include styles-tokens-fields.composite-var(styles-tokens-fields.$theme-variables, 'sans', 'body', $size);
       }
 
       @each $variant in $variants {
         &[data-variant='#{$variant}'] {
-          @include composite-var($fields, $variant, $size);
+          @include styles-tokens-fields.composite-var(styles-tokens-fields.$fields, $variant, $size);
         }
       }
     }
@@ -88,17 +86,17 @@ $variants: 'single-line-container', 'single-line-container-button-before', 'sing
 
     &,
     &:hover {
-      background-color: simple-var($sys-neutral-decor-disabled);
-      border-color: simple-var($sys-neutral-decor-disabled);
+      background-color: styles-tokens-fields.simple-var(styles-tokens-fields.$sys-neutral-decor-disabled);
+      border-color: styles-tokens-fields.simple-var(styles-tokens-fields.$sys-neutral-decor-disabled);
     }
 
     &:not([data-disable-focus]) {
       &:focus-within,
       &[data-focused] {
-        @include outline-var($container-focused-m);
+        @include styles-tokens-fields.outline-var(styles-tokens-element.$container-focused-m);
 
-        background-color: simple-var($sys-neutral-decor-disabled);
-        border-color: simple-var($sys-neutral-decor-disabled);
+        background-color: styles-tokens-fields.simple-var(styles-tokens-fields.$sys-neutral-decor-disabled);
+        border-color: styles-tokens-fields.simple-var(styles-tokens-fields.$sys-neutral-decor-disabled);
         outline: none;
       }
     }
@@ -111,15 +109,15 @@ $variants: 'single-line-container', 'single-line-container-button-before', 'sing
     textarea,
     span {
       cursor: not-allowed;
-      background-color: simple-var($sys-neutral-background);
+      background-color: styles-tokens-fields.simple-var(styles-tokens-fields.$sys-neutral-background);
     }
 
     &,
     &:focus-within,
     &[data-focused],
     &:hover {
-      background-color: simple-var($sys-neutral-background);
-      border-color: simple-var($sys-neutral-decor-disabled);
+      background-color: styles-tokens-fields.simple-var(styles-tokens-fields.$sys-neutral-background);
+      border-color: styles-tokens-fields.simple-var(styles-tokens-fields.$sys-neutral-decor-disabled);
       outline: none;
     }
   }
@@ -128,15 +126,15 @@ $variants: 'single-line-container', 'single-line-container-button-before', 'sing
 .prefix {
   display: inline-flex;
   flex-shrink: 0;
-  gap: $space-fields-postfix-gap;
+  gap: styles-tokens-fields.$space-fields-postfix-gap;
   align-items: center;
 
-  color: $sys-neutral-text-disabled;
+  color: styles-tokens-fields.$sys-neutral-text-disabled;
 }
 
 .postfix {
   display: inline-flex;
   flex-shrink: 0;
-  gap: $space-fields-postfix-gap;
+  gap: styles-tokens-fields.$space-fields-postfix-gap;
   align-items: center;
 }

package/src/helperComponents/TextArea/styles.module.scss

@@ -1,4 +1,4 @@
-@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
 
 .textarea {
   resize: none;
@@ -9,7 +9,7 @@
   margin: 0;
   padding: 0;
 
-  color: simple-var($sys-neutral-text-main);
+  color: styles-tokens-element.simple-var(styles-tokens-element.$sys-neutral-text-main);
 
   background-color: transparent;
   border: none;
@@ -17,7 +17,7 @@
   outline: 0;
 
   &::placeholder {
-    color: simple-var($sys-neutral-text-disabled);
+    color: styles-tokens-element.simple-var(styles-tokens-element.$sys-neutral-text-disabled);
   }
 
   &::-webkit-scrollbar {
@@ -26,10 +26,10 @@
   }
 
   &:read-only {
-    color: simple-var($sys-neutral-text-support);
+    color: styles-tokens-element.simple-var(styles-tokens-element.$sys-neutral-text-support);
   }
 
   &[disabled] {
-    color: simple-var($sys-neutral-text-disabled);
+    color: styles-tokens-element.simple-var(styles-tokens-element.$sys-neutral-text-disabled);
   }
 }

package/src/hooks/styles.module.scss

@@ -1,17 +1,17 @@
-@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-fields';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-fields';
 
 .prefix {
-  color: $sys-neutral-text-support;
+  color: styles-tokens-fields.$sys-neutral-text-support;
 
   &[data-disabled] {
-    opacity: $opacity-a056;
+    opacity: styles-tokens-fields.$opacity-a056;
   }
 }
 
 .postfix {
-  color: $sys-neutral-text-support;
+  color: styles-tokens-fields.$sys-neutral-text-support;
 
   &[data-disabled] {
-    opacity: $opacity-a056;
+    opacity: styles-tokens-fields.$opacity-a056;
   }
 }

package/src/styles.module.scss

@@ -1,10 +1,10 @@
-@import "@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element";
-@import "@snack-uikit/figma-tokens/build/scss/components/styles-tokens-fields";
+@use "@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element";
+@use "@snack-uikit/figma-tokens/build/scss/components/styles-tokens-fields";
 
 $sizes: 's', 'm';
 $icon-sizes: (
-  's': $icon-xs,
-  'm': $icon-s
+  's': styles-tokens-element.$icon-xs,
+  'm': styles-tokens-element.$icon-s
 );
 
 @mixin button-styles {
@@ -15,41 +15,41 @@ $icon-sizes: (
   margin: 0;
   padding: 0;
 
-  color: $sys-neutral-text-light;
+  color: styles-tokens-element.$sys-neutral-text-light;
 
   background-color: transparent;
   border: none;
 
   @each $size in $sizes {
     &[data-size='#{$size}'] {
-      @include composite-var($fields, 'buttons', $size);
+      @include styles-tokens-element.composite-var(styles-tokens-fields.$fields, 'buttons', $size);
 
       svg {
-        width: simple-var($icon-sizes, $size) !important; /* stylelint-disable-line declaration-no-important */
-        height: simple-var($icon-sizes, $size) !important; /* stylelint-disable-line declaration-no-important */
+        width: styles-tokens-element.simple-var($icon-sizes, $size) !important; /* stylelint-disable-line declaration-no-important */
+        height: styles-tokens-element.simple-var($icon-sizes, $size) !important; /* stylelint-disable-line declaration-no-important */
       }
     }
   }
 
   &:hover {
     cursor: pointer;
-    color: $sys-neutral-text-support;
+    color: styles-tokens-element.$sys-neutral-text-support;
   }
 
   &:focus-visible {
-    @include outline-var($container-focused-s);
+    @include styles-tokens-element.outline-var(styles-tokens-element.$container-focused-s);
 
-    color: $sys-neutral-text-support;
-    outline-color: $sys-available-complementary;
-    outline-offset: $spacing-state-focus-offset;
+    color: styles-tokens-element.$sys-neutral-text-support;
+    outline-color: styles-tokens-element.$sys-available-complementary;
+    outline-offset: styles-tokens-element.$spacing-state-focus-offset;
   }
 
   &:active {
-    color: $sys-neutral-text-main;
+    color: styles-tokens-element.$sys-neutral-text-main;
   }
 
   &[data-disabled] {
     cursor: not-allowed;
-    color: $sys-neutral-text-disabled;
+    color: styles-tokens-element.$sys-neutral-text-disabled;
   }
 }