@snack-uikit/toggles 0.11.0 → 0.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/package.json +3 -3
  3. package/src/components/Checkbox/styles.module.scss +24 -26
  4. package/src/components/Favorite/styles.module.scss +10 -12
  5. package/src/components/Radio/styles.module.scss +19 -22
  6. package/src/components/Switch/styles.module.scss +25 -27
  7. package/src/components/TogglePrivate/styles.module.scss +5 -7
  8. package/src/components/styles.module.scss +5 -5
  9. package/src/helperComponents/Spinner/styles.module.scss +3 -4
package/CHANGELOG.md CHANGED
@@ -3,6 +3,17 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # 0.12.0 (2024-10-28)
7
+
8
+
9
+ ### Features
10
+
11
+ * **FF-5782:** sass use/forward approach ([3e53869](https://github.com/cloud-ru-tech/snack-uikit/commit/3e53869ace864a7718e434b7f410c15dbd911cd5))
12
+
13
+
14
+
15
+
16
+
6
17
  # 0.11.0 (2024-10-28)
7
18
 
8
19
 
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "access": "public"
5
5
  },
6
6
  "title": "Toggles",
7
- "version": "0.11.0",
7
+ "version": "0.12.0",
8
8
  "sideEffects": [
9
9
  "*.css",
10
10
  "*.woff",
@@ -36,11 +36,11 @@
36
36
  "license": "Apache-2.0",
37
37
  "scripts": {},
38
38
  "dependencies": {
39
- "@snack-uikit/icons": "0.23.0",
39
+ "@snack-uikit/icons": "0.24.0",
40
40
  "@snack-uikit/utils": "3.5.0",
41
41
  "classnames": "2.3.2",
42
42
  "merge-refs": "1.2.1",
43
43
  "uncontrollable": "8.0.0"
44
44
  },
45
- "gitHead": "62cc21d8606a61a78f80e3a7455b20d6f38474fa"
45
+ "gitHead": "8499829efa0c118b704de17411ae2328a024adb5"
46
46
  }
package/src/components/Checkbox/styles.module.scss CHANGED
@@ -1,61 +1,59 @@
1
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toggles';
2
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
3
- @import '../styles.module';
4
-
5
- $sizes: 's', 'm';
1
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toggles';
2
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
3
+ @use '../styles.module';
6
4
 
7
5
  $icon-sizes: (
8
- 's': $icon-xs,
9
- 'm': $icon-s,
6
+ 's': styles-tokens-element.$icon-xs,
7
+ 'm': styles-tokens-element.$icon-s,
10
8
  );
11
9
 
12
10
  .container {
13
- @include container('checkbox');
11
+ @include styles.container('checkbox');
14
12
  }
15
13
 
16
14
  .box {
17
15
  box-sizing: border-box;
18
- background-color: simple-var($theme-variables, 'sys', 'neutral', 'background2-level');
19
- border-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-activated');
16
+ background-color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'neutral', 'background2-level');
17
+ border-color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'neutral', 'decor-activated');
20
18
  border-style: solid; // это наверное должно быть в композитном токене box
21
19
 
22
20
  &[data-checked=false] {
23
21
  &[data-focusvisible=true],
24
22
  &[data-hover=true] {
25
- background-color: simple-var($theme-variables, 'sys', 'neutral', 'background2-level');
26
- border-color: simple-var($theme-variables, 'sys', 'neutral', 'accent-hovered');
23
+ background-color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'neutral', 'background2-level');
24
+ border-color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'neutral', 'accent-hovered');
27
25
  }
28
26
 
29
27
  &[data-disabled=true] {
30
- background-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-disabled');
31
- border-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-default');
28
+ background-color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'neutral', 'decor-disabled');
29
+ border-color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'neutral', 'decor-default');
32
30
  }
33
31
  }
34
32
 
35
33
  &[data-indeterminate=true],
36
34
  &[data-checked=true] {
37
- background-color: simple-var($theme-variables, 'sys', 'primary', 'accent-default');
38
- border-color: simple-var($theme-variables, 'sys', 'primary', 'accent-default');
35
+ background-color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'primary', 'accent-default');
36
+ border-color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'primary', 'accent-default');
39
37
 
40
38
  &[data-focusvisible=true],
41
39
  &[data-hover=true] {
42
- background-color: simple-var($theme-variables, 'sys', 'primary', 'accent-hovered');
43
- border-color: simple-var($theme-variables, 'sys', 'primary', 'accent-hovered');
40
+ background-color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'primary', 'accent-hovered');
41
+ border-color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'primary', 'accent-hovered');
44
42
  }
45
43
 
46
44
  &[data-disabled=true] {
47
- background-color: simple-var($theme-variables, 'sys', 'neutral', 'text-disabled');
48
- border-color: simple-var($theme-variables, 'sys', 'neutral', 'text-disabled');
45
+ background-color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'neutral', 'text-disabled');
46
+ border-color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'neutral', 'text-disabled');
49
47
  }
50
48
  }
51
49
 
52
- @each $size in $sizes {
50
+ @each $size in styles.$sizes {
53
51
  &[data-size='#{$size}'] {
54
- @include composite-var($toggles, $size, 'checkbox', 'box');
52
+ @include styles-tokens-toggles.composite-var(styles-tokens-toggles.$toggles, $size, 'checkbox', 'box');
55
53
 
56
54
  svg {
57
- width: simple-var($icon-sizes, $size) !important; /* stylelint-disable-line declaration-no-important */
58
- height: simple-var($icon-sizes, $size) !important; /* stylelint-disable-line declaration-no-important */
55
+ width: styles-tokens-toggles.simple-var($icon-sizes, $size) !important; /* stylelint-disable-line declaration-no-important */
56
+ height: styles-tokens-toggles.simple-var($icon-sizes, $size) !important; /* stylelint-disable-line declaration-no-important */
59
57
  }
60
58
  }
61
59
  }
@@ -71,7 +69,7 @@ $icon-sizes: (
71
69
  width: 100%;
72
70
  height: 100%;
73
71
 
74
- color: simple-var($theme-variables, 'sys', 'primary', 'on-accent');
72
+ color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'primary', 'on-accent');
75
73
 
76
74
  &[data-indeterminate=true],
77
75
  &[data-checked=true] {
@@ -79,6 +77,6 @@ $icon-sizes: (
79
77
  }
80
78
 
81
79
  &[data-disabled=true] {
82
- color: simple-var($theme-variables, 'sys', 'neutral', 'decor-disabled');
80
+ color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'neutral', 'decor-disabled');
83
81
  }
84
82
  }
package/src/components/Favorite/styles.module.scss CHANGED
@@ -1,39 +1,37 @@
1
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toggles';
2
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
3
- @import '../styles.module';
1
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toggles';
2
+ @use '../styles.module';
4
3
 
5
- $sizes: 's', 'm';
6
4
  $icons: (
7
5
  'star': 'yellow',
8
6
  'heart': 'red',
9
7
  );
10
8
 
11
9
  .container {
12
- @include container('favourite');
10
+ @include styles.container('favourite');
13
11
 
14
- outline-color: simple-var($theme-variables, 'sys', 'available', 'complementary');
12
+ outline-color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'available', 'complementary');
15
13
 
16
14
  &[data-checked='true'] {
17
- outline-color: simple-var($theme-variables, 'sys', 'available', 'complementary');
15
+ outline-color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'available', 'complementary');
18
16
  }
19
17
  }
20
18
 
21
19
  .icon {
22
- color: simple-var($theme-variables, 'sys', 'neutral', 'text-light');
20
+ color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'neutral', 'text-light');
23
21
 
24
22
  &:not([data-disabled='true']) {
25
23
  &[data-hover='true'] {
26
- color: simple-var($theme-variables, 'sys', 'neutral', 'text-support');
24
+ color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'neutral', 'text-support');
27
25
  }
28
26
 
29
27
  @each $icon, $color in $icons {
30
28
  &[data-icon='#{$icon}'] {
31
29
  &[data-checked='true'] {
32
- color: simple-var($theme-variables, 'sys', $color, 'accent-default');
30
+ color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', $color, 'accent-default');
33
31
 
34
32
  &[data-focusvisible='true'],
35
33
  &[data-hover='true'] {
36
- color: simple-var($theme-variables, 'sys', $color, 'accent-hovered');
34
+ color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', $color, 'accent-hovered');
37
35
  }
38
36
  }
39
37
  }
@@ -41,6 +39,6 @@ $icons: (
41
39
  }
42
40
 
43
41
  &[data-disabled='true'] {
44
- color: $sys-neutral-text-disabled;
42
+ color: styles-tokens-toggles.$sys-neutral-text-disabled;
45
43
  }
46
44
  }
package/src/components/Radio/styles.module.scss CHANGED
@@ -1,11 +1,8 @@
1
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toggles';
2
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
3
- @import '../styles.module';
4
-
5
- $sizes: 's', 'm';
1
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toggles';
2
+ @use '../styles.module';
6
3
 
7
4
  .container {
8
- @include container('radio');
5
+ @include styles.container('radio');
9
6
  }
10
7
 
11
8
  .box {
@@ -13,37 +10,37 @@ $sizes: 's', 'm';
13
10
 
14
11
  box-sizing: border-box;
15
12
 
16
- background-color: simple-var($theme-variables, 'sys', 'neutral', 'background2-level');
17
- border-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-activated');
13
+ background-color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'neutral', 'background2-level');
14
+ border-color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'neutral', 'decor-activated');
18
15
  border-style: solid; // это наверное должно быть в композитном токене box
19
16
 
20
- @each $size in $sizes {
17
+ @each $size in styles.$sizes {
21
18
  &[data-size='#{$size}'] {
22
- @include composite-var($toggles, $size, 'radio', 'box');
19
+ @include styles-tokens-toggles.composite-var(styles-tokens-toggles.$toggles, $size, 'radio', 'box');
23
20
  }
24
21
  }
25
22
 
26
23
  &[data-focusvisible=true],
27
24
  &[data-hover=true] {
28
- background-color: simple-var($theme-variables, 'sys', 'neutral', 'background2-level');
29
- border-color: simple-var($theme-variables, 'sys', 'neutral', 'accent-hovered');
25
+ background-color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'neutral', 'background2-level');
26
+ border-color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'neutral', 'accent-hovered');
30
27
  }
31
28
 
32
29
  &[data-disabled=true] {
33
- background-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-disabled');
34
- border-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-default');
30
+ background-color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'neutral', 'decor-disabled');
31
+ border-color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'neutral', 'decor-default');
35
32
  }
36
33
 
37
34
  &[data-checked=true] {
38
- border-color: simple-var($theme-variables, 'sys', 'primary', 'accent-default');
35
+ border-color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'primary', 'accent-default');
39
36
 
40
37
  &[data-focusvisible=true],
41
38
  &[data-hover=true] {
42
- border-color: simple-var($theme-variables, 'sys', 'primary', 'accent-hovered');
39
+ border-color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'primary', 'accent-hovered');
43
40
  }
44
41
 
45
42
  &[data-disabled=true] {
46
- border-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-default');
43
+ border-color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'neutral', 'decor-default');
47
44
  }
48
45
  }
49
46
  }
@@ -54,23 +51,23 @@ $sizes: 's', 'm';
54
51
  left: 50%;
55
52
  transform: translate(-50%, -50%);
56
53
 
57
- background-color: simple-var($theme-variables, 'sys', 'primary', 'accent-default');
54
+ background-color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'primary', 'accent-default');
58
55
 
59
56
  &[data-hover=true] {
60
- background-color: simple-var($theme-variables, 'sys', 'primary', 'accent-hovered');
57
+ background-color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'primary', 'accent-hovered');
61
58
  }
62
59
 
63
60
  &[data-disabled=true] {
64
- background-color: simple-var($theme-variables, 'sys', 'neutral', 'text-disabled');
61
+ background-color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'neutral', 'text-disabled');
65
62
  }
66
63
 
67
64
  &[data-checked=false] {
68
65
  display: none;
69
66
  }
70
67
 
71
- @each $size in $sizes {
68
+ @each $size in styles.$sizes {
72
69
  &[data-size='#{$size}'] {
73
- @include composite-var($toggles, $size, 'radio', 'flag');
70
+ @include styles-tokens-toggles.composite-var(styles-tokens-toggles.$toggles, $size, 'radio', 'flag');
74
71
  }
75
72
  }
76
73
  }
package/src/components/Switch/styles.module.scss CHANGED
@@ -1,41 +1,39 @@
1
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toggles';
2
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
3
- @import '../styles.module';
1
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toggles';
2
+ @use '../styles.module';
4
3
 
5
- $sizes: 's', 'm';
6
4
  $switchAnimationDuration: 0.1s;
7
5
 
8
6
  .container {
9
- @include container('switch');
7
+ @include styles.container('switch');
10
8
  }
11
9
 
12
10
  .box {
13
11
  position: relative;
14
- background-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-activated');
12
+ background-color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'neutral', 'decor-activated');
15
13
 
16
- @each $size in $sizes {
14
+ @each $size in styles.$sizes {
17
15
  &[data-size='#{$size}'] {
18
- @include composite-var($toggles, $size, 'switch', 'box');
16
+ @include styles-tokens-toggles.composite-var(styles-tokens-toggles.$toggles, $size, 'switch', 'box');
19
17
  }
20
18
  }
21
19
 
22
20
  &[data-hover='true'] {
23
- background-color: simple-var($theme-variables, 'sys', 'neutral', 'accent-hovered');
21
+ background-color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'neutral', 'accent-hovered');
24
22
  }
25
23
 
26
24
  &[data-disabled='true'] {
27
- background-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-default');
25
+ background-color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'neutral', 'decor-default');
28
26
  }
29
27
 
30
28
  &[data-checked='true'] {
31
- background-color: simple-var($theme-variables, 'sys', 'primary', 'accent-default');
29
+ background-color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'primary', 'accent-default');
32
30
 
33
31
  &[data-hover='true'] {
34
- background-color: simple-var($theme-variables, 'sys', 'primary', 'accent-hovered');
32
+ background-color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'primary', 'accent-hovered');
35
33
  }
36
34
 
37
35
  &[data-disabled='true'] {
38
- background-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-default');
36
+ background-color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'neutral', 'decor-default');
39
37
  }
40
38
  }
41
39
  }
@@ -52,32 +50,32 @@ $switchAnimationDuration: 0.1s;
52
50
  transition-duration: $switchAnimationDuration;
53
51
  transition-property: left;
54
52
 
55
- @each $size in $sizes {
53
+ @each $size in styles.$sizes {
56
54
  &[data-size='#{$size}'] {
57
- @include composite-var($toggles, $size, 'switch', 'container-flag');
55
+ @include styles-tokens-toggles.composite-var(styles-tokens-toggles.$toggles, $size, 'switch', 'container-flag');
58
56
  &[data-checked='true'] {
59
- left: calc(100% - #{simple-var($toggles, $size, 'switch', 'container-flag', 'width')});
57
+ left: calc(100% - #{styles-tokens-toggles.simple-var(styles-tokens-toggles.$toggles, $size, 'switch', 'container-flag', 'width')});
60
58
  }
61
59
  }
62
60
  }
63
61
  }
64
62
 
65
63
  .flag {
66
- background-color: simple-var($theme-variables, 'sys', 'neutral', 'background2-level');
64
+ background-color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'neutral', 'background2-level');
67
65
 
68
- @each $size in $sizes {
66
+ @each $size in styles.$sizes {
69
67
  &[data-size='#{$size}'] {
70
- @include composite-var($toggles, $size, 'switch', 'flag');
68
+ @include styles-tokens-toggles.composite-var(styles-tokens-toggles.$toggles, $size, 'switch', 'flag');
71
69
  }
72
70
  }
73
71
 
74
72
  &[data-focusvisible=true],
75
73
  &[data-hover=true] {
76
- background-color: simple-var($theme-variables, 'sys', 'neutral', 'on-accent');
74
+ background-color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'neutral', 'on-accent');
77
75
  }
78
76
 
79
77
  &[data-disabled='true'] {
80
- background-color: simple-var($theme-variables, 'sys', 'neutral', 'background2-level');
78
+ background-color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'neutral', 'background2-level');
81
79
  }
82
80
  }
83
81
 
@@ -89,29 +87,29 @@ $switchAnimationDuration: 0.1s;
89
87
 
90
88
  display: flex;
91
89
 
92
- color: simple-var($theme-variables, 'sys', 'neutral', 'text-disabled');
90
+ color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'neutral', 'text-disabled');
93
91
 
94
92
  fill: transparent;
95
93
 
96
94
  transition: opacity $switchAnimationDuration linear;
97
95
 
98
96
  &[data-hover='true'] {
99
- color: simple-var($theme-variables, 'sys', 'neutral', 'accent-hovered');
97
+ color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'neutral', 'accent-hovered');
100
98
  }
101
99
 
102
100
  &[data-checked='true'] {
103
- color: simple-var($theme-variables, 'sys', 'primary', 'accent-default');
101
+ color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'primary', 'accent-default');
104
102
 
105
103
  &[data-hover='true'] {
106
- color: simple-var($theme-variables, 'sys', 'primary', 'accent-hovered');
104
+ color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'primary', 'accent-hovered');
107
105
  }
108
106
  }
109
107
 
110
108
  &[data-disabled='true'] {
111
- color: simple-var($theme-variables, 'sys', 'neutral', 'text-disabled');
109
+ color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'neutral', 'text-disabled');
112
110
 
113
111
  &[data-hover='true'] {
114
- color: simple-var($theme-variables, 'sys', 'neutral', 'text-disabled');
112
+ color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'neutral', 'text-disabled');
115
113
  }
116
114
  }
117
115
  }
package/src/components/TogglePrivate/styles.module.scss CHANGED
@@ -1,11 +1,9 @@
1
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toggles';
2
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
3
-
4
- $sizes: 's', 'm';
1
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toggles';
2
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
5
3
 
6
4
  $icon-sizes: (
7
- 's': $icon-xs,
8
- 'm': $icon-s,
5
+ 's': styles-tokens-element.$icon-xs,
6
+ 'm': styles-tokens-element.$icon-s,
9
7
  );
10
8
 
11
9
  .toggleLayout {
@@ -21,7 +19,7 @@ $icon-sizes: (
21
19
 
22
20
  &[data-disabled=true] {
23
21
  cursor: not-allowed;
24
- color: $sys-neutral-text-disabled;
22
+ color: styles-tokens-toggles.$sys-neutral-text-disabled;
25
23
  }
26
24
  }
27
25
 
package/src/components/styles.module.scss CHANGED
@@ -1,5 +1,5 @@
1
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
2
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toggles';
1
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
2
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toggles';
3
3
 
4
4
  $sizes: 's', 'm';
5
5
 
@@ -11,14 +11,14 @@ $sizes: 's', 'm';
11
11
 
12
12
  @each $size in $sizes {
13
13
  &[data-size='#{$size}'] {
14
- @include composite-var($toggles, $size, $component, 'container');
14
+ @include styles-tokens-toggles.composite-var(styles-tokens-toggles.$toggles, $size, $component, 'container');
15
15
  }
16
16
  }
17
17
 
18
18
  &[data-focusvisible=true] {
19
- @include outline-var($container-focused-s);
19
+ @include styles-tokens-toggles.outline-var(styles-tokens-element.$container-focused-s);
20
20
  &[data-size='s'] {
21
- outline-offset: simple-var($theme-variables, 'border-width', 'state-focus', 's');
21
+ outline-offset: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'border-width', 'state-focus', 's');
22
22
  }
23
23
  }
24
24
  }
package/src/helperComponents/Spinner/styles.module.scss CHANGED
@@ -1,10 +1,9 @@
1
- @import '@snack-uikit/figma-tokens/build/scss/styles-theme-variables';
2
-
1
+ @use '@snack-uikit/figma-tokens/build/scss/styles-theme-variables';
3
2
 
4
3
  .spinner {
5
4
  pointer-events: none;
6
- width: $dimension-2m;
7
- height: $dimension-2m;
5
+ width: styles-theme-variables.$dimension-2m;
6
+ height: styles-theme-variables.$dimension-2m;
8
7
  animation: spin 1s ease-in-out infinite;
9
8
 
10
9
  & > path {