@snack-uikit/chips 0.17.0 → 0.18.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 (11) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/cjs/components/ChipChoice/components/ChipChoiceBase/styles.module.css +6 -6
  3. package/dist/esm/components/ChipChoice/components/ChipChoiceBase/styles.module.css +6 -6
  4. package/package.json +8 -8
  5. package/src/components/ChipAssist/styles.module.scss +29 -30
  6. package/src/components/ChipChoice/components/ChipChoiceBase/styles.module.scss +23 -40
  7. package/src/components/ChipChoice/styles.module.scss +32 -31
  8. package/src/components/ChipChoiceRow/styles.module.scss +2 -2
  9. package/src/components/ChipToggle/styles.module.scss +45 -46
  10. package/src/helperComponents/ButtonClearValue/styles.module.scss +14 -14
  11. package/src/styles.module.scss +11 -11
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.18.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.17.0 (2024-10-28)
7
18
 
8
19
 
package/dist/cjs/components/ChipChoice/components/ChipChoiceBase/styles.module.css CHANGED
@@ -290,12 +290,12 @@
290
290
  border-width:var(--border-width-chips-single, 1px);
291
291
  }
292
292
  .choiceChip[data-size=m] .label{
293
- font-family:var(--light-label-m-font-family, SB Sans Interface);
294
- font-weight:var(--light-label-m-font-weight, Regular);
295
- line-height:var(--light-label-m-line-height, 16px);
296
- font-size:var(--light-label-m-font-size, 12px);
297
- letter-spacing:var(--light-label-m-letter-spacing, 0px);
298
- paragraph-spacing:var(--light-label-m-paragraph-spacing, 6.6px);
293
+ font-family:var(--sans-label-l-font-family, SB Sans Interface);
294
+ font-weight:var(--sans-label-l-font-weight, Semibold);
295
+ line-height:var(--sans-label-l-line-height, 20px);
296
+ font-size:var(--sans-label-l-font-size, 14px);
297
+ letter-spacing:var(--sans-label-l-letter-spacing, 0px);
298
+ paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
299
299
  }
300
300
  .choiceChip[data-size=m] .labelLayout{
301
301
  padding-left:var(--space-chips-label-layout-padding-m, 8px);
package/dist/esm/components/ChipChoice/components/ChipChoiceBase/styles.module.css CHANGED
@@ -290,12 +290,12 @@
290
290
  border-width:var(--border-width-chips-single, 1px);
291
291
  }
292
292
  .choiceChip[data-size=m] .label{
293
- font-family:var(--light-label-m-font-family, SB Sans Interface);
294
- font-weight:var(--light-label-m-font-weight, Regular);
295
- line-height:var(--light-label-m-line-height, 16px);
296
- font-size:var(--light-label-m-font-size, 12px);
297
- letter-spacing:var(--light-label-m-letter-spacing, 0px);
298
- paragraph-spacing:var(--light-label-m-paragraph-spacing, 6.6px);
293
+ font-family:var(--sans-label-l-font-family, SB Sans Interface);
294
+ font-weight:var(--sans-label-l-font-weight, Semibold);
295
+ line-height:var(--sans-label-l-line-height, 20px);
296
+ font-size:var(--sans-label-l-font-size, 14px);
297
+ letter-spacing:var(--sans-label-l-letter-spacing, 0px);
298
+ paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
299
299
  }
300
300
  .choiceChip[data-size=m] .labelLayout{
301
301
  padding-left:var(--space-chips-label-layout-padding-m, 8px);
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "access": "public"
5
5
  },
6
6
  "title": "Chips",
7
- "version": "0.17.0",
7
+ "version": "0.18.0",
8
8
  "sideEffects": [
9
9
  "*.css",
10
10
  "*.woff",
@@ -36,12 +36,12 @@
36
36
  "license": "Apache-2.0",
37
37
  "scripts": {},
38
38
  "dependencies": {
39
- "@snack-uikit/button": "0.18.0",
40
- "@snack-uikit/calendar": "0.9.0",
41
- "@snack-uikit/dropdown": "0.3.0",
42
- "@snack-uikit/icons": "0.23.0",
43
- "@snack-uikit/list": "0.19.0",
44
- "@snack-uikit/loaders": "0.6.0",
39
+ "@snack-uikit/button": "0.19.0",
40
+ "@snack-uikit/calendar": "0.10.0",
41
+ "@snack-uikit/dropdown": "0.4.0",
42
+ "@snack-uikit/icons": "0.24.0",
43
+ "@snack-uikit/list": "0.20.0",
44
+ "@snack-uikit/loaders": "0.7.0",
45
45
  "@snack-uikit/utils": "3.5.0",
46
46
  "classnames": "2.3.2",
47
47
  "fuzzy-search": "3.2.1",
@@ -54,5 +54,5 @@
54
54
  "peerDependencies": {
55
55
  "@snack-uikit/locale": "*"
56
56
  },
57
- "gitHead": "62cc21d8606a61a78f80e3a7455b20d6f38474fa"
57
+ "gitHead": "8499829efa0c118b704de17411ae2328a024adb5"
58
58
  }
package/src/components/ChipAssist/styles.module.scss CHANGED
@@ -1,60 +1,59 @@
1
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-chips-chipAssist';
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-chips-chipAssist';
2
+ @use '../../styles.module';
4
3
 
5
4
  $sizes: 'xs', 's', 'm', 'l';
6
5
 
7
6
  $typography: (
8
- 'xs': $sans-label-s,
9
- 's': $sans-label-m,
10
- 'm': $sans-label-l,
11
- 'l': $sans-label-l,
7
+ 'xs': styles-tokens-chips-chipAssist.$sans-label-s,
8
+ 's': styles-tokens-chips-chipAssist.$sans-label-m,
9
+ 'm': styles-tokens-chips-chipAssist.$sans-label-l,
10
+ 'l': styles-tokens-chips-chipAssist.$sans-label-l,
12
11
  );
13
12
 
14
13
  .assistChip {
15
- @include chip-defaults;
16
- @include chip-anatomy-styles($chip-assist, $sizes, $typography);
14
+ @include styles.chip-defaults;
15
+ @include styles.chip-anatomy-styles(styles-tokens-chips-chipAssist.$chip-assist, $sizes, $typography);
17
16
 
18
- color: $sys-neutral-text-support;
19
- background-color: $sys-neutral-background1-level;
20
- border-color: $sys-neutral-decor-default;
17
+ color: styles-tokens-chips-chipAssist.$sys-neutral-text-support;
18
+ background-color: styles-tokens-chips-chipAssist.$sys-neutral-background1-level;
19
+ border-color: styles-tokens-chips-chipAssist.$sys-neutral-decor-default;
21
20
 
22
21
  .icon {
23
- color: $sys-neutral-text-light;
22
+ color: styles-tokens-chips-chipAssist.$sys-neutral-text-light;
24
23
  }
25
24
 
26
25
  &:hover {
27
- color: $sys-neutral-text-main;
28
- background-color: $sys-neutral-background2-level;
29
- border-color: $sys-neutral-decor-hovered;
26
+ color: styles-tokens-chips-chipAssist.$sys-neutral-text-main;
27
+ background-color: styles-tokens-chips-chipAssist.$sys-neutral-background2-level;
28
+ border-color: styles-tokens-chips-chipAssist.$sys-neutral-decor-hovered;
30
29
  }
31
30
 
32
31
  &:focus-visible {
33
- @include chip-outline;
32
+ @include styles.chip-outline;
34
33
 
35
- color: $sys-neutral-text-main;
36
- background-color: $sys-neutral-background2-level;
37
- border-color: $sys-neutral-decor-hovered;
34
+ color: styles-tokens-chips-chipAssist.$sys-neutral-text-main;
35
+ background-color: styles-tokens-chips-chipAssist.$sys-neutral-background2-level;
36
+ border-color: styles-tokens-chips-chipAssist.$sys-neutral-decor-hovered;
38
37
  }
39
38
 
40
39
  &:active {
41
- color: $sys-neutral-text-main;
42
- background-color: $sys-neutral-background;
43
- border-color: $sys-neutral-decor-activated;
40
+ color: styles-tokens-chips-chipAssist.$sys-neutral-text-main;
41
+ background-color: styles-tokens-chips-chipAssist.$sys-neutral-background;
42
+ border-color: styles-tokens-chips-chipAssist.$sys-neutral-decor-activated;
44
43
  }
45
44
 
46
45
  &:disabled {
47
46
  cursor: not-allowed;
48
- color: $sys-neutral-text-light;
49
- background-color: $sys-neutral-background;
50
- border-color: $sys-neutral-decor-hovered;
47
+ color: styles-tokens-chips-chipAssist.$sys-neutral-text-light;
48
+ background-color: styles-tokens-chips-chipAssist.$sys-neutral-background;
49
+ border-color: styles-tokens-chips-chipAssist.$sys-neutral-decor-hovered;
51
50
  }
52
51
 
53
52
  &[data-loading] {
54
- @include chip-loading-state($chip-assist, '&[data-variant="label-only"]', label);
53
+ @include styles.chip-loading-state(styles-tokens-chips-chipAssist.$chip-assist, '&[data-variant="label-only"]', label);
55
54
 
56
- color: $sys-neutral-text-main;
57
- background-color: $sys-neutral-background;
58
- border-color: $sys-neutral-decor-activated;
55
+ color: styles-tokens-chips-chipAssist.$sys-neutral-text-main;
56
+ background-color: styles-tokens-chips-chipAssist.$sys-neutral-background;
57
+ border-color: styles-tokens-chips-chipAssist.$sys-neutral-decor-activated;
59
58
  }
60
59
  }
package/src/components/ChipChoice/components/ChipChoiceBase/styles.module.scss CHANGED
@@ -1,22 +1,5 @@
1
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-chips-chipChoice';
2
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
3
- @import '../../styles.module';
4
-
5
- $sizes: 'xs', 's', 'm', 'l';
6
-
7
- $labelTypography: (
8
- 'xs': $light-label-s,
9
- 's': $light-label-m,
10
- 'm': $light-label-m,
11
- 'l': $light-label-l,
12
- );
13
-
14
- $valueTypography: (
15
- 'xs': $sans-label-s,
16
- 's': $sans-label-m,
17
- 'm': $sans-label-l,
18
- 'l': $sans-label-l,
19
- );
1
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-chips-chipChoice';
2
+ @use '../../styles.module';
20
3
 
21
4
  .label,
22
5
  .value {
@@ -25,25 +8,25 @@ $valueTypography: (
25
8
  }
26
9
 
27
10
  .choiceChip {
28
- @include chip-defaults;
29
- @include chip-anatomy-styles($chip-choice, $sizes, $labelTypography);
11
+ @include styles.chip-defaults;
12
+ @include styles.chip-anatomy-styles(styles-tokens-chips-chipChoice.$chip-choice, styles.$sizes, styles.$labelTypography);
30
13
 
31
- background-color: $sys-neutral-background1-level;
32
- border-color: $sys-neutral-decor-default;
14
+ background-color: styles-tokens-chips-chipChoice.$sys-neutral-background1-level;
15
+ border-color: styles-tokens-chips-chipChoice.$sys-neutral-decor-default;
33
16
 
34
17
  .label,
35
18
  .value {
36
- color: $sys-neutral-text-support;
19
+ color: styles-tokens-chips-chipChoice.$sys-neutral-text-support;
37
20
  }
38
21
 
39
22
  .icon {
40
- color: $sys-neutral-text-light;
23
+ color: styles-tokens-chips-chipChoice.$sys-neutral-text-light;
41
24
  }
42
25
 
43
- @each $size in $sizes {
26
+ @each $size in styles.$sizes {
44
27
  &[data-size='#{$size}'] {
45
28
  .value {
46
- @include composite-var($valueTypography, $size);
29
+ @include styles-tokens-chips-chipChoice.composite-var(styles.$valueTypography, $size);
47
30
  }
48
31
  }
49
32
  }
@@ -51,46 +34,46 @@ $valueTypography: (
51
34
  &:hover,
52
35
  &:active,
53
36
  &:focus-visible {
54
- background-color: $sys-neutral-background2-level;
55
- border-color: $sys-neutral-decor-hovered;
37
+ background-color: styles-tokens-chips-chipChoice.$sys-neutral-background2-level;
38
+ border-color: styles-tokens-chips-chipChoice.$sys-neutral-decor-hovered;
56
39
 
57
40
  .label {
58
- color: $sys-neutral-text-support;
41
+ color: styles-tokens-chips-chipChoice.$sys-neutral-text-support;
59
42
  }
60
43
 
61
44
  .value {
62
- color: $sys-neutral-text-main;
45
+ color: styles-tokens-chips-chipChoice.$sys-neutral-text-main;
63
46
  }
64
47
  }
65
48
 
66
49
  &:focus-visible {
67
- @include chip-outline;
50
+ @include styles.chip-outline;
68
51
  }
69
52
 
70
53
  &[data-disabled] {
71
54
  cursor: not-allowed;
72
- background-color: $sys-neutral-background;
73
- border-color: $sys-neutral-decor-disabled;
55
+ background-color: styles-tokens-chips-chipChoice.$sys-neutral-background;
56
+ border-color: styles-tokens-chips-chipChoice.$sys-neutral-decor-disabled;
74
57
 
75
58
  .label,
76
59
  .value {
77
- color: $sys-neutral-text-light;
60
+ color: styles-tokens-chips-chipChoice.$sys-neutral-text-light;
78
61
  }
79
62
  }
80
63
 
81
64
  &[data-loading] {
82
- @include chip-loading-state($chip-choice, '&:not([data-label])', value, null, true);
65
+ @include styles.chip-loading-state(styles-tokens-chips-chipChoice.$chip-choice, '&:not([data-label])', value, null, true);
83
66
 
84
- background-color: $sys-neutral-background;
85
- border-color: $sys-neutral-decor-activated;
67
+ background-color: styles-tokens-chips-chipChoice.$sys-neutral-background;
68
+ border-color: styles-tokens-chips-chipChoice.$sys-neutral-decor-activated;
86
69
 
87
70
  .label,
88
71
  .value {
89
- color: $sys-neutral-text-support;
72
+ color: styles-tokens-chips-chipChoice.$sys-neutral-text-support;
90
73
  }
91
74
  }
92
75
  }
93
76
 
94
77
  .triggerClassName {
95
- --offset: #{$space-drop-list-drop-offset};
78
+ --offset: #{styles-tokens-chips-chipChoice.$space-drop-list-drop-offset};
96
79
  }
package/src/components/ChipChoice/styles.module.scss CHANGED
@@ -1,21 +1,22 @@
1
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-chips-chipChoice';
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-chips-chipChoice';
2
+ @use '../../styles.module';
3
+
4
+ @forward '../../styles.module';
4
5
 
5
6
  $sizes: 'xs', 's', 'm', 'l';
6
7
 
7
8
  $labelTypography: (
8
- 'xs': $light-label-s,
9
- 's': $light-label-m,
10
- 'm': $sans-label-l,
11
- 'l': $light-label-l,
9
+ 'xs': styles-tokens-chips-chipChoice.$light-label-s,
10
+ 's': styles-tokens-chips-chipChoice.$light-label-m,
11
+ 'm': styles-tokens-chips-chipChoice.$sans-label-l,
12
+ 'l': styles-tokens-chips-chipChoice.$light-label-l,
12
13
  );
13
14
 
14
15
  $valueTypography: (
15
- 'xs': $sans-label-s,
16
- 's': $sans-label-m,
17
- 'm': $sans-label-l,
18
- 'l': $sans-label-l,
16
+ 'xs': styles-tokens-chips-chipChoice.$sans-label-s,
17
+ 's': styles-tokens-chips-chipChoice.$sans-label-m,
18
+ 'm': styles-tokens-chips-chipChoice.$sans-label-l,
19
+ 'l': styles-tokens-chips-chipChoice.$sans-label-l,
19
20
  );
20
21
 
21
22
  .label,
@@ -25,25 +26,25 @@ $valueTypography: (
25
26
  }
26
27
 
27
28
  .choiceChip {
28
- @include chip-defaults;
29
- @include chip-anatomy-styles($chip-choice, $sizes, $labelTypography);
29
+ @include styles.chip-defaults;
30
+ @include styles.chip-anatomy-styles(styles-tokens-chips-chipChoice.$chip-choice, $sizes, $labelTypography);
30
31
 
31
- background-color: $sys-neutral-background1-level;
32
- border-color: $sys-neutral-decor-default;
32
+ background-color: styles-tokens-chips-chipChoice.$sys-neutral-background1-level;
33
+ border-color: styles-tokens-chips-chipChoice.$sys-neutral-decor-default;
33
34
 
34
35
  .label,
35
36
  .value {
36
- color: $sys-neutral-text-support;
37
+ color: styles-tokens-chips-chipChoice.$sys-neutral-text-support;
37
38
  }
38
39
 
39
40
  .icon {
40
- color: $sys-neutral-text-light;
41
+ color: styles-tokens-chips-chipChoice.$sys-neutral-text-light;
41
42
  }
42
43
 
43
44
  @each $size in $sizes {
44
45
  &[data-size='#{$size}'] {
45
46
  .value {
46
- @include composite-var($valueTypography, $size);
47
+ @include styles-tokens-chips-chipChoice.composite-var($valueTypography, $size);
47
48
  }
48
49
  }
49
50
  }
@@ -51,46 +52,46 @@ $valueTypography: (
51
52
  &:hover,
52
53
  &:active,
53
54
  &:focus-visible {
54
- background-color: $sys-neutral-background2-level;
55
- border-color: $sys-neutral-decor-hovered;
55
+ background-color: styles-tokens-chips-chipChoice.$sys-neutral-background2-level;
56
+ border-color: styles-tokens-chips-chipChoice.$sys-neutral-decor-hovered;
56
57
 
57
58
  .label {
58
- color: $sys-neutral-text-support;
59
+ color: styles-tokens-chips-chipChoice.$sys-neutral-text-support;
59
60
  }
60
61
 
61
62
  .value {
62
- color: $sys-neutral-text-main;
63
+ color: styles-tokens-chips-chipChoice.$sys-neutral-text-main;
63
64
  }
64
65
  }
65
66
 
66
67
  &:focus-visible {
67
- @include chip-outline;
68
+ @include styles.chip-outline;
68
69
  }
69
70
 
70
71
  &[data-disabled] {
71
72
  cursor: not-allowed;
72
- background-color: $sys-neutral-background;
73
- border-color: $sys-neutral-decor-disabled;
73
+ background-color: styles-tokens-chips-chipChoice.$sys-neutral-background;
74
+ border-color: styles-tokens-chips-chipChoice.$sys-neutral-decor-disabled;
74
75
 
75
76
  .label,
76
77
  .value {
77
- color: $sys-neutral-text-light;
78
+ color: styles-tokens-chips-chipChoice.$sys-neutral-text-light;
78
79
  }
79
80
  }
80
81
 
81
82
  &[data-loading] {
82
- @include chip-loading-state($chip-choice, true, null, null, true);
83
+ @include styles.chip-loading-state(styles-tokens-chips-chipChoice.$chip-choice, true, null, null, true);
83
84
 
84
- background-color: $sys-neutral-background;
85
- border-color: $sys-neutral-decor-activated;
85
+ background-color: styles-tokens-chips-chipChoice.$sys-neutral-background;
86
+ border-color: styles-tokens-chips-chipChoice.$sys-neutral-decor-activated;
86
87
 
87
88
  .label,
88
89
  .value {
89
- color: $sys-neutral-text-support;
90
+ color: styles-tokens-chips-chipChoice.$sys-neutral-text-support;
90
91
  }
91
92
  }
92
93
  }
93
94
 
94
95
  .triggerClassName {
95
- --offset: #{$space-drop-list-drop-offset};
96
+ --offset: #{styles-tokens-chips-chipChoice.$space-drop-list-drop-offset};
96
97
  }
package/src/components/ChipChoiceRow/styles.module.scss CHANGED
@@ -1,7 +1,7 @@
1
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-chips-chipChoice';
1
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-chips-chipChoice';
2
2
 
3
3
  .chipChoiceRow {
4
- @include composite-var($chip-choice-row-container);
4
+ @include styles-tokens-chips-chipChoice.composite-var(styles-tokens-chips-chipChoice.$chip-choice-row-container);
5
5
 
6
6
  display: flex;
7
7
  flex-wrap: wrap;
package/src/components/ChipToggle/styles.module.scss CHANGED
@@ -1,22 +1,21 @@
1
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-chips-chipToggle';
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-chips-chipToggle';
2
+ @use '../../styles.module';
4
3
 
5
4
  $sizes: 'xs', 's', 'm', 'l';
6
5
 
7
6
  $typography: (
8
- 'xs': $sans-label-s,
9
- 's': $sans-label-m,
10
- 'm': $sans-label-l,
11
- 'l': $sans-label-l,
7
+ 'xs': styles-tokens-chips-chipToggle.$sans-label-s,
8
+ 's': styles-tokens-chips-chipToggle.$sans-label-m,
9
+ 'm': styles-tokens-chips-chipToggle.$sans-label-l,
10
+ 'l': styles-tokens-chips-chipToggle.$sans-label-l,
12
11
  );
13
12
 
14
13
  .toggleChipContent {
15
- @include chip-defaults;
14
+ @include styles.chip-defaults;
16
15
 
17
- color: $sys-neutral-text-support;
18
- background-color: $sys-neutral-background1-level;
19
- border-color: $sys-neutral-decor-default;
16
+ color: styles-tokens-chips-chipToggle.$sys-neutral-text-support;
17
+ background-color: styles-tokens-chips-chipToggle.$sys-neutral-background1-level;
18
+ border-color: styles-tokens-chips-chipToggle.$sys-neutral-decor-default;
20
19
  }
21
20
 
22
21
  .toggleChipInput {
@@ -32,16 +31,16 @@ $typography: (
32
31
  opacity: 0;
33
32
 
34
33
  &:focus-visible + .toggleChipContent {
35
- @include chip-outline;
34
+ @include styles.chip-outline;
36
35
 
37
- color: $sys-neutral-text-main;
38
- background-color: $sys-neutral-background2-level;
39
- border-color: $sys-neutral-decor-hovered;
36
+ color: styles-tokens-chips-chipToggle.$sys-neutral-text-main;
37
+ background-color: styles-tokens-chips-chipToggle.$sys-neutral-background2-level;
38
+ border-color: styles-tokens-chips-chipToggle.$sys-neutral-decor-hovered;
40
39
  }
41
40
  }
42
41
 
43
42
  .toggleChip {
44
- @include chip-anatomy-styles($chip-toggle, $sizes, $typography, toggleChipContent);
43
+ @include styles.chip-anatomy-styles(styles-tokens-chips-chipToggle.$chip-toggle, $sizes, $typography, toggleChipContent);
45
44
 
46
45
  position: relative;
47
46
 
@@ -53,100 +52,100 @@ $typography: (
53
52
  outline-offset: 0;
54
53
 
55
54
  .icon {
56
- color: $sys-neutral-text-support;
55
+ color: styles-tokens-chips-chipToggle.$sys-neutral-text-support;
57
56
  }
58
57
 
59
58
  &:hover {
60
59
  .toggleChipContent {
61
- color: $sys-neutral-text-main;
62
- background-color: $sys-neutral-background2-level;
63
- border-color: $sys-neutral-decor-hovered;
60
+ color: styles-tokens-chips-chipToggle.$sys-neutral-text-main;
61
+ background-color: styles-tokens-chips-chipToggle.$sys-neutral-background2-level;
62
+ border-color: styles-tokens-chips-chipToggle.$sys-neutral-decor-hovered;
64
63
  }
65
64
  }
66
65
 
67
66
  &:active {
68
67
  .toggleChipContent {
69
- color: $sys-neutral-text-main;
70
- background-color: $sys-neutral-background;
71
- border-color: $sys-neutral-decor-activated;
68
+ color: styles-tokens-chips-chipToggle.$sys-neutral-text-main;
69
+ background-color: styles-tokens-chips-chipToggle.$sys-neutral-background;
70
+ border-color: styles-tokens-chips-chipToggle.$sys-neutral-decor-activated;
72
71
  }
73
72
  }
74
73
 
75
74
  &[data-loading] {
76
- @include chip-loading-state($chip-toggle, '&[data-variant="label-only"]', label, toggleChipContent);
75
+ @include styles.chip-loading-state(styles-tokens-chips-chipToggle.$chip-toggle, '&[data-variant="label-only"]', label, toggleChipContent);
77
76
 
78
77
  .toggleChipContent {
79
- color: $sys-neutral-text-main;
80
- background-color: $sys-neutral-background;
81
- border-color: $sys-neutral-decor-activated;
78
+ color: styles-tokens-chips-chipToggle.$sys-neutral-text-main;
79
+ background-color: styles-tokens-chips-chipToggle.$sys-neutral-background;
80
+ border-color: styles-tokens-chips-chipToggle.$sys-neutral-decor-activated;
82
81
  }
83
82
  }
84
83
 
85
84
  &[data-disabled] {
86
85
  .toggleChipContent {
87
86
  cursor: not-allowed;
88
- color: $sys-neutral-text-light;
89
- background-color: $sys-neutral-background;
90
- border-color: $sys-neutral-decor-disabled;
87
+ color: styles-tokens-chips-chipToggle.$sys-neutral-text-light;
88
+ background-color: styles-tokens-chips-chipToggle.$sys-neutral-background;
89
+ border-color: styles-tokens-chips-chipToggle.$sys-neutral-decor-disabled;
91
90
  }
92
91
 
93
92
  .icon {
94
- color: $sys-neutral-text-light;
93
+ color: styles-tokens-chips-chipToggle.$sys-neutral-text-light;
95
94
  }
96
95
  }
97
96
 
98
97
  &[data-checked] {
99
98
  .icon {
100
- color: $sys-primary-text-support;
99
+ color: styles-tokens-chips-chipToggle.$sys-primary-text-support;
101
100
  }
102
101
 
103
102
  .toggleChipContent {
104
- color: $sys-primary-text-support;
105
- background-color: $sys-primary-decor-default;
103
+ color: styles-tokens-chips-chipToggle.$sys-primary-text-support;
104
+ background-color: styles-tokens-chips-chipToggle.$sys-primary-decor-default;
106
105
  border-color: transparent;
107
106
  }
108
107
 
109
108
  &:hover {
110
109
  .toggleChipContent {
111
- color: $sys-primary-text-main;
112
- background-color: $sys-primary-decor-hovered;
110
+ color: styles-tokens-chips-chipToggle.$sys-primary-text-main;
111
+ background-color: styles-tokens-chips-chipToggle.$sys-primary-decor-hovered;
113
112
  border-color: transparent;
114
113
  }
115
114
  }
116
115
 
117
116
  &:active {
118
117
  .toggleChipContent {
119
- color: $sys-primary-text-main;
120
- background-color: $sys-primary-decor-activated;
118
+ color: styles-tokens-chips-chipToggle.$sys-primary-text-main;
119
+ background-color: styles-tokens-chips-chipToggle.$sys-primary-decor-activated;
121
120
  border-color: transparent;
122
121
  }
123
122
  }
124
123
 
125
124
  .toggleChipInput {
126
125
  &:focus-visible + .toggleChipContent {
127
- color: $sys-primary-text-main;
128
- background-color: $sys-primary-decor-hovered;
126
+ color: styles-tokens-chips-chipToggle.$sys-primary-text-main;
127
+ background-color: styles-tokens-chips-chipToggle.$sys-primary-decor-hovered;
129
128
  border-color: transparent;
130
129
  }
131
130
  }
132
131
 
133
132
  &[data-loading] {
134
133
  .toggleChipInput + .toggleChipContent {
135
- color: $sys-neutral-text-main;
136
- background-color: $sys-neutral-background;
137
- border-color: $sys-neutral-decor-activated;
134
+ color: styles-tokens-chips-chipToggle.$sys-neutral-text-main;
135
+ background-color: styles-tokens-chips-chipToggle.$sys-neutral-background;
136
+ border-color: styles-tokens-chips-chipToggle.$sys-neutral-decor-activated;
138
137
  }
139
138
  }
140
139
 
141
140
  &[data-disabled] {
142
141
  .toggleChipInput + .toggleChipContent {
143
- color: $sys-neutral-text-light;
144
- background-color: $sys-neutral-decor-disabled;
142
+ color: styles-tokens-chips-chipToggle.$sys-neutral-text-light;
143
+ background-color: styles-tokens-chips-chipToggle.$sys-neutral-decor-disabled;
145
144
  border-color: transparent;
146
145
  }
147
146
 
148
147
  .icon {
149
- color: $sys-neutral-text-light;
148
+ color: styles-tokens-chips-chipToggle.$sys-neutral-text-light;
150
149
  }
151
150
  }
152
151
  }
package/src/helperComponents/ButtonClearValue/styles.module.scss CHANGED
@@ -1,10 +1,10 @@
1
- @import "@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element";
2
- @import "@snack-uikit/figma-tokens/build/scss/components/styles-tokens-chips-chipChoice";
1
+ @use "@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element";
2
+ @use "@snack-uikit/figma-tokens/build/scss/components/styles-tokens-chips-chipChoice";
3
3
 
4
4
  $sizes: 'xxs', 'xs';
5
5
  $icon-sizes: (
6
- 'xxs': $icon-xs,
7
- 'xs': $icon-s
6
+ 'xxs': styles-tokens-element.$icon-xs,
7
+ 'xs': styles-tokens-element.$icon-s
8
8
  );
9
9
 
10
10
  .buttonClearValue {
@@ -15,36 +15,36 @@ $icon-sizes: (
15
15
  margin: 0;
16
16
  padding: 0;
17
17
 
18
- color: $sys-neutral-text-light;
18
+ color: styles-tokens-element.$sys-neutral-text-light;
19
19
 
20
20
  background-color: transparent;
21
21
  border: none;
22
22
 
23
23
  @each $size in $sizes {
24
24
  &[data-size='#{$size}'] {
25
- @include composite-var($chip-choice, 'button-clear-value', $size);
25
+ @include styles-tokens-element.composite-var(styles-tokens-chips-chipChoice.$chip-choice, 'button-clear-value', $size);
26
26
 
27
27
  svg {
28
- width: simple-var($icon-sizes, $size) !important; /* stylelint-disable-line declaration-no-important */
29
- height: simple-var($icon-sizes, $size) !important; /* stylelint-disable-line declaration-no-important */
28
+ width: styles-tokens-element.simple-var($icon-sizes, $size) !important; /* stylelint-disable-line declaration-no-important */
29
+ height: styles-tokens-element.simple-var($icon-sizes, $size) !important; /* stylelint-disable-line declaration-no-important */
30
30
  }
31
31
  }
32
32
  }
33
33
 
34
34
  &:hover {
35
35
  cursor: pointer;
36
- color: $sys-neutral-text-support;
36
+ color: styles-tokens-element.$sys-neutral-text-support;
37
37
  }
38
38
 
39
39
  &:focus-visible {
40
- @include outline-var($container-focused-s);
40
+ @include styles-tokens-element.outline-var(styles-tokens-element.$container-focused-s);
41
41
 
42
- color: $sys-neutral-text-support;
43
- outline-color: $sys-available-complementary;
44
- outline-offset: $spacing-state-focus-offset;
42
+ color: styles-tokens-element.$sys-neutral-text-support;
43
+ outline-color: styles-tokens-element.$sys-available-complementary;
44
+ outline-offset: styles-tokens-element.$spacing-state-focus-offset;
45
45
  }
46
46
 
47
47
  &:active {
48
- color: $sys-neutral-text-main;
48
+ color: styles-tokens-element.$sys-neutral-text-main;
49
49
  }
50
50
  }
package/src/styles.module.scss CHANGED
@@ -1,4 +1,4 @@
1
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
1
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
2
2
 
3
3
  @mixin chip-defaults {
4
4
  cursor: pointer;
@@ -37,21 +37,21 @@
37
37
  @each $size in $sizes {
38
38
  &[data-size='#{$size}'] {
39
39
  .label {
40
- @include composite-var($typography, $size);
40
+ @include styles-tokens-element.composite-var($typography, $size);
41
41
  }
42
42
 
43
43
  .labelLayout {
44
- @include composite-var($chip-theme, 'label-layout', $size);
44
+ @include styles-tokens-element.composite-var($chip-theme, 'label-layout', $size);
45
45
  }
46
46
 
47
47
  @if ($contentClassName) {
48
48
  .#{$contentClassName} {
49
- @include composite-var($chip-theme, 'container', $size);
49
+ @include styles-tokens-element.composite-var($chip-theme, 'container', $size);
50
50
  }
51
51
  }
52
52
 
53
53
  @else {
54
- @include composite-var($chip-theme, 'container', $size);
54
+ @include styles-tokens-element.composite-var($chip-theme, 'container', $size);
55
55
 
56
56
  }
57
57
  }
@@ -63,8 +63,8 @@
63
63
  display: inline-flex;
64
64
 
65
65
  svg {
66
- width: $icon-s !important; /* stylelint-disable-line declaration-no-important */
67
- height: $icon-s !important; /* stylelint-disable-line declaration-no-important */
66
+ width: styles-tokens-element.$icon-s !important; /* stylelint-disable-line declaration-no-important */
67
+ height: styles-tokens-element.$icon-s !important; /* stylelint-disable-line declaration-no-important */
68
68
  }
69
69
  }
70
70
  }
@@ -84,7 +84,7 @@
84
84
  @if $classNamesToHide {
85
85
  @each $className in $classNamesToHide {
86
86
  .#{$className} {
87
- @include composite-var($chip-theme, 'label-layout', 'label', 'load-label-only');
87
+ @include styles-tokens-element.composite-var($chip-theme, 'label-layout', 'label', 'load-label-only');
88
88
  }
89
89
  }
90
90
  }
@@ -107,8 +107,8 @@
107
107
  }
108
108
 
109
109
  @mixin chip-outline {
110
- @include outline-var($container-focused-s);
110
+ @include styles-tokens-element.outline-var(styles-tokens-element.$container-focused-s);
111
111
 
112
- outline-color: $sys-available-complementary;
113
- outline-offset: $spacing-state-focus-offset;
112
+ outline-color: styles-tokens-element.$sys-available-complementary;
113
+ outline-offset: styles-tokens-element.$spacing-state-focus-offset;
114
114
  }