@snack-uikit/list 0.19.0 → 0.20.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 (13) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/README.md +1 -1
  3. package/package.json +12 -12
  4. package/src/components/Items/BaseItem/styles.module.scss +21 -21
  5. package/src/components/Items/PinGroupItem/styles.module.scss +3 -4
  6. package/src/components/Items/SearchItem/styles.module.scss +3 -3
  7. package/src/components/Items/styles.module.scss +9 -9
  8. package/src/components/Lists/ListPrivate/styles.module.scss +11 -11
  9. package/src/components/Lists/styles.module.scss +8 -8
  10. package/src/helperComponents/CollapseBlockPrivate/styles.module.scss +3 -3
  11. package/src/helperComponents/ItemContent/styles.module.scss +21 -22
  12. package/src/helperComponents/ListEmptyState/styles.module.scss +2 -2
  13. package/src/helperComponents/Separator/styles.module.scss +20 -22
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.20.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.19.0 (2024-10-28)
7
18
 
8
19
 
package/README.md CHANGED
@@ -117,7 +117,7 @@
117
117
  | noDataState | `EmptyStateProps` | - | Экран при отстутствии данных |
118
118
  | noResultsState | `EmptyStateProps` | - | Экран при отстутствии результатов поиска или фильтров |
119
119
  | errorDataState | `EmptyStateProps` | - | Экран при ошибке запроса |
120
- | ref | `Ref<HTMLElement>` | - | 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 |
120
+ | ref | `LegacyRef<HTMLElement>` | - | 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} |
121
121
  | key | `Key` | - | |
122
122
  ## ItemContent
123
123
  ### Props
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "access": "public"
5
5
  },
6
6
  "title": "List",
7
- "version": "0.19.0",
7
+ "version": "0.20.0",
8
8
  "sideEffects": [
9
9
  "*.css",
10
10
  "*.woff",
@@ -36,16 +36,16 @@
36
36
  "license": "Apache-2.0",
37
37
  "scripts": {},
38
38
  "dependencies": {
39
- "@snack-uikit/button": "0.18.0",
40
- "@snack-uikit/divider": "3.1.0",
41
- "@snack-uikit/dropdown": "0.3.0",
42
- "@snack-uikit/icons": "0.23.0",
43
- "@snack-uikit/info-block": "0.5.0",
44
- "@snack-uikit/loaders": "0.6.0",
45
- "@snack-uikit/scroll": "0.7.0",
46
- "@snack-uikit/search-private": "0.3.0",
47
- "@snack-uikit/toggles": "0.11.0",
48
- "@snack-uikit/truncate-string": "0.5.0",
39
+ "@snack-uikit/button": "0.19.0",
40
+ "@snack-uikit/divider": "3.2.0",
41
+ "@snack-uikit/dropdown": "0.4.0",
42
+ "@snack-uikit/icons": "0.24.0",
43
+ "@snack-uikit/info-block": "0.6.0",
44
+ "@snack-uikit/loaders": "0.7.0",
45
+ "@snack-uikit/scroll": "0.8.0",
46
+ "@snack-uikit/search-private": "0.4.0",
47
+ "@snack-uikit/toggles": "0.12.0",
48
+ "@snack-uikit/truncate-string": "0.6.0",
49
49
  "@snack-uikit/utils": "3.5.0",
50
50
  "classnames": "2.5.1",
51
51
  "merge-refs": "1.2.2"
@@ -53,5 +53,5 @@
53
53
  "peerDependencies": {
54
54
  "@snack-uikit/locale": "*"
55
55
  },
56
- "gitHead": "62cc21d8606a61a78f80e3a7455b20d6f38474fa"
56
+ "gitHead": "8499829efa0c118b704de17411ae2328a024adb5"
57
57
  }
package/src/components/Items/BaseItem/styles.module.scss CHANGED
@@ -1,5 +1,5 @@
1
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-dropList';
2
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
1
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-dropList';
2
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
3
3
 
4
4
  $sizes: 's', 'm', 'l';
5
5
 
@@ -10,8 +10,8 @@ $sizes: 's', 'm', 'l';
10
10
  align-items: center;
11
11
  justify-content: center;
12
12
 
13
- width: $dimension-3m;
14
- height: $dimension-3m;
13
+ width: styles-tokens-dropList.$dimension-3m;
14
+ height: styles-tokens-dropList.$dimension-3m;
15
15
  }
16
16
 
17
17
  .beforeContent {
@@ -21,10 +21,10 @@ $sizes: 's', 'm', 'l';
21
21
  align-items: center;
22
22
  justify-content: center;
23
23
 
24
- width: $icon-s;
25
- height: $icon-s;
24
+ width: styles-tokens-element.$icon-s;
25
+ height: styles-tokens-element.$icon-s;
26
26
 
27
- color: $sys-neutral-text-light;
27
+ color: styles-tokens-dropList.$sys-neutral-text-light;
28
28
 
29
29
  svg {
30
30
  max-width: 100%;
@@ -35,12 +35,12 @@ $sizes: 's', 'm', 'l';
35
35
  .expandableIcon {
36
36
  display: flex;
37
37
  align-items: center;
38
- color: $sys-neutral-text-light;
38
+ color: styles-tokens-dropList.$sys-neutral-text-light;
39
39
  fill: currentColor;
40
40
  }
41
41
 
42
42
  .markerContainer {
43
- @include composite-var($drop-list, 'item', 'marker-container');
43
+ @include styles-tokens-dropList.composite-var(styles-tokens-dropList.$drop-list, 'item', 'marker-container');
44
44
 
45
45
  pointer-events: none;
46
46
 
@@ -52,7 +52,7 @@ $sizes: 's', 'm', 'l';
52
52
  height: 100%;
53
53
 
54
54
  &:before {
55
- @include composite-var($drop-list, 'item', 'marker');
55
+ @include styles-tokens-dropList.composite-var(styles-tokens-dropList.$drop-list, 'item', 'marker');
56
56
 
57
57
  content: '';
58
58
  display: block;
@@ -65,11 +65,11 @@ $sizes: 's', 'm', 'l';
65
65
  @each $size in $sizes {
66
66
  &[data-size='#{$size}'] {
67
67
  padding-left: calc(
68
- var(--level, 0) * $dimension-050m + simple-var($drop-list, 'item', $size, 'container', 'padding-left')
68
+ var(--level, 0) * styles-tokens-dropList.$dimension-050m + styles-tokens-dropList.simple-var(styles-tokens-dropList.$drop-list, 'item', $size, 'container', 'padding-left')
69
69
  );
70
70
 
71
71
  .headline {
72
- @include composite-var($drop-list, 'item', $size, 'headline');
72
+ @include styles-tokens-dropList.composite-var(styles-tokens-dropList.$drop-list, 'item', $size, 'headline');
73
73
  }
74
74
  }
75
75
  }
@@ -82,11 +82,11 @@ $sizes: 's', 'm', 'l';
82
82
  .innerWrapper {
83
83
  &[data-disabled] {
84
84
  .expandableIcon {
85
- color: $sys-neutral-text-disabled;
85
+ color: styles-tokens-dropList.$sys-neutral-text-disabled;
86
86
  }
87
87
 
88
88
  .beforeContent {
89
- opacity: $opacity-a064;
89
+ opacity: styles-tokens-dropList.$opacity-a064;
90
90
  }
91
91
 
92
92
  .droplistItem {
@@ -98,31 +98,31 @@ $sizes: 's', 'm', 'l';
98
98
  &[data-checked] {
99
99
  &[data-variant='single'] {
100
100
  &::before {
101
- opacity: $opacity-a008;
102
- background-color: $sys-primary-accent-default;
101
+ opacity: styles-tokens-dropList.$opacity-a008;
102
+ background-color: styles-tokens-dropList.$sys-primary-accent-default;
103
103
  }
104
104
 
105
105
  &:hover {
106
106
  &::before {
107
- opacity: $opacity-a016;
108
- background-color: $sys-primary-accent-default;
107
+ opacity: styles-tokens-dropList.$opacity-a016;
108
+ background-color: styles-tokens-dropList.$sys-primary-accent-default;
109
109
  }
110
110
  }
111
111
  }
112
112
 
113
113
  .markerContainer:before {
114
- background-color: $sys-primary-accent-default;
114
+ background-color: styles-tokens-dropList.$sys-primary-accent-default;
115
115
  }
116
116
 
117
117
  .droplistItem:focus-visible {
118
118
  &[data-variant='single'] {
119
- outline-color: $sys-primary-accent-default;
119
+ outline-color: styles-tokens-dropList.$sys-primary-accent-default;
120
120
  }
121
121
  }
122
122
 
123
123
  &[data-disabled] {
124
124
  .markerContainer:before {
125
- background-color: $sys-neutral-text-disabled;
125
+ background-color: styles-tokens-dropList.$sys-neutral-text-disabled;
126
126
  }
127
127
  }
128
128
  }
package/src/components/Items/PinGroupItem/styles.module.scss CHANGED
@@ -1,12 +1,11 @@
1
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-dropList';
2
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
1
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-dropList';
3
2
 
4
3
  $sizes: 's', 'm', 'l';
5
4
 
6
5
  .pinTopItem {
7
6
  @each $size in $sizes {
8
7
  &[data-size='#{$size}'] {
9
- @include composite-var($drop-list, 'item', $size, 'content-pin-top');
8
+ @include styles-tokens-dropList.composite-var(styles-tokens-dropList.$drop-list, 'item', $size, 'content-pin-top');
10
9
  }
11
10
  }
12
11
 
@@ -23,7 +22,7 @@ $sizes: 's', 'm', 'l';
23
22
  .pinBottomItem {
24
23
  @each $size in $sizes {
25
24
  &[data-size='#{$size}'] {
26
- @include composite-var($drop-list, 'item', $size, 'content-pin-bottom');
25
+ @include styles-tokens-dropList.composite-var(styles-tokens-dropList.$drop-list, 'item', $size, 'content-pin-bottom');
27
26
  }
28
27
  }
29
28
 
package/src/components/Items/SearchItem/styles.module.scss CHANGED
@@ -1,13 +1,13 @@
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
  .searchItem {
4
4
  width: 100%;
5
5
 
6
6
  &:focus-within,
7
7
  &:focus-visible {
8
- @include outline-inside-var($container-focused-s);
8
+ @include styles-tokens-element.outline-inside-var(styles-tokens-element.$container-focused-s);
9
9
 
10
10
  max-width: 100%;
11
- outline-color: $sys-primary-decor-activated;
11
+ outline-color: styles-tokens-element.$sys-primary-decor-activated;
12
12
  }
13
13
  }
package/src/components/Items/styles.module.scss CHANGED
@@ -1,5 +1,5 @@
1
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-dropList';
2
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
1
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-dropList';
2
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
3
3
 
4
4
  $sizes: 's', 'm', 'l';
5
5
 
@@ -45,16 +45,16 @@ $sizes: 's', 'm', 'l';
45
45
  &[data-focused],
46
46
  &:focus-visible {
47
47
  &::before {
48
- opacity: $opacity-a008;
49
- background-color: $sys-neutral-accent-default;
48
+ opacity: styles-tokens-dropList.$opacity-a008;
49
+ background-color: styles-tokens-dropList.$sys-neutral-accent-default;
50
50
  }
51
51
  }
52
52
 
53
53
  @media (hover: hover) {
54
54
  &:hover {
55
55
  &::before {
56
- opacity: $opacity-a008;
57
- background-color: $sys-neutral-accent-default;
56
+ opacity: styles-tokens-dropList.$opacity-a008;
57
+ background-color: styles-tokens-dropList.$sys-neutral-accent-default;
58
58
  }
59
59
  }
60
60
  }
@@ -76,7 +76,7 @@ $sizes: 's', 'm', 'l';
76
76
  margin: 0;
77
77
  padding: 0;
78
78
 
79
- color: $sys-neutral-text-main;
79
+ color: styles-tokens-dropList.$sys-neutral-text-main;
80
80
  text-align: start;
81
81
 
82
82
  appearance: unset;
@@ -86,14 +86,14 @@ $sizes: 's', 'm', 'l';
86
86
 
87
87
  @each $size in $sizes {
88
88
  &[data-size='#{$size}'] {
89
- @include composite-var($drop-list, 'item', $size, 'container');
89
+ @include styles-tokens-dropList.composite-var(styles-tokens-dropList.$drop-list, 'item', $size, 'container');
90
90
  }
91
91
  }
92
92
 
93
93
  &:not([data-inactive], [data-disabled]) {
94
94
  &[data-focused],
95
95
  &:focus-visible {
96
- @include outline-inside-var($container-focused-s);
96
+ @include styles-tokens-dropList.outline-inside-var(styles-tokens-element.$container-focused-s);
97
97
  }
98
98
  }
99
99
  }
package/src/components/Lists/ListPrivate/styles.module.scss CHANGED
@@ -1,11 +1,11 @@
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
  $sizes: 's', 'm', 'l';
4
4
 
5
5
  $loader-height: (
6
- 's': $dimension-3m,
7
- 'm': $dimension-4m,
8
- 'l': $dimension-5m,
6
+ 's': styles-tokens-element.$dimension-3m,
7
+ 'm': styles-tokens-element.$dimension-4m,
8
+ 'l': styles-tokens-element.$dimension-5m,
9
9
  );
10
10
 
11
11
  .loader {
@@ -15,10 +15,10 @@ $loader-height: (
15
15
 
16
16
  @each $size in $sizes {
17
17
  &[data-size='#{$size}'] {
18
- height: simple-var($loader-height, $size);
18
+ height: styles-tokens-element.simple-var($loader-height, $size);
19
19
 
20
20
  &[data-no-items] {
21
- $no-items-loading-height: calc(3 * simple-var($loader-height, $size));
21
+ $no-items-loading-height: calc(3 * styles-tokens-element.simple-var($loader-height, $size));
22
22
 
23
23
  min-width: calc(2 * $no-items-loading-height);
24
24
  height: $no-items-loading-height;
@@ -27,15 +27,15 @@ $loader-height: (
27
27
  }
28
28
 
29
29
  &:focus-visible {
30
- @include outline-inside-var($container-focused-s);
30
+ @include styles-tokens-element.outline-inside-var(styles-tokens-element.$container-focused-s);
31
31
 
32
- outline-color: $sys-available-complementary;
32
+ outline-color: styles-tokens-element.$sys-available-complementary;
33
33
  }
34
34
  }
35
35
 
36
36
  .scrollStub {
37
- height: calc($dimension-025m / 2);
38
- margin-top: calc($dimension-025m / -2);
37
+ height: calc(styles-tokens-element.$dimension-025m / 2);
38
+ margin-top: calc(styles-tokens-element.$dimension-025m / -2);
39
39
  background: transparent;
40
40
  }
41
41
 
@@ -43,7 +43,7 @@ $loader-height: (
43
43
  display: flex;
44
44
  flex-direction: column;
45
45
  box-sizing: border-box;
46
- padding: $dimension-050m;
46
+ padding: styles-tokens-element.$dimension-050m;
47
47
  }
48
48
 
49
49
  .content {
package/src/components/Lists/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
  .listContainer {
4
4
  display: flex;
@@ -13,9 +13,9 @@
13
13
  outline: none;
14
14
 
15
15
  &[data-active] {
16
- @include outline-inside-var($container-focused-s);
16
+ @include styles-tokens-element.outline-inside-var(styles-tokens-element.$container-focused-s);
17
17
 
18
- outline-color: $sys-available-complementary;
18
+ outline-color: styles-tokens-element.$sys-available-complementary;
19
19
 
20
20
  * {
21
21
  cursor: inherit;
@@ -39,9 +39,9 @@
39
39
  height: 100%;
40
40
 
41
41
  &:has(.listContainer:focus-visible) {
42
- @include outline-inside-var($container-focused-s);
42
+ @include styles-tokens-element.outline-inside-var(styles-tokens-element.$container-focused-s);
43
43
 
44
- outline-color: $sys-available-complementary;
44
+ outline-color: styles-tokens-element.$sys-available-complementary;
45
45
  }
46
46
  li,
47
47
  ul {
@@ -51,15 +51,15 @@
51
51
 
52
52
  .scrollContainerS {
53
53
  height: auto;
54
- max-height: calc($dimension-1m * 32); // 256px
54
+ max-height: calc(styles-tokens-element.$dimension-1m * 32); // 256px
55
55
  }
56
56
 
57
57
  .scrollContainerM {
58
58
  height: auto;
59
- max-height: calc($dimension-1m * 40); // 320px
59
+ max-height: calc(styles-tokens-element.$dimension-1m * 40); // 320px
60
60
  }
61
61
 
62
62
  .scrollContainerL {
63
63
  height: auto;
64
- max-height: calc($dimension-1m * 48); // 384px
64
+ max-height: calc(styles-tokens-element.$dimension-1m * 48); // 384px
65
65
  }
package/src/helperComponents/CollapseBlockPrivate/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
  $duration: 300ms;
4
4
 
@@ -45,7 +45,7 @@ $duration: 300ms;
45
45
  width: 100%;
46
46
  height: 100%;
47
47
 
48
- opacity: $opacity-a004;
49
- background-color: $sys-neutral-accent-default;
48
+ opacity: styles-tokens-element.$opacity-a004;
49
+ background-color: styles-tokens-element.$sys-neutral-accent-default;
50
50
  }
51
51
  }
package/src/helperComponents/ItemContent/styles.module.scss CHANGED
@@ -1,25 +1,24 @@
1
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-dropList';
2
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
1
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-dropList';
3
2
 
4
3
  $sizes: 's', 'm', 'l';
5
4
  $typography: (
6
5
  's': (
7
- 'label': $sans-body-s,
8
- 'caption': $sans-body-s,
9
- 'description': $sans-body-s,
10
- 'separator': $light-label-m,
6
+ 'label': styles-tokens-dropList.$sans-body-s,
7
+ 'caption': styles-tokens-dropList.$sans-body-s,
8
+ 'description': styles-tokens-dropList.$sans-body-s,
9
+ 'separator': styles-tokens-dropList.$light-label-m,
11
10
  ),
12
11
  'm': (
13
- 'label': $sans-body-m,
14
- 'caption': $sans-body-s,
15
- 'description': $sans-body-s,
16
- 'separator': $light-label-l,
12
+ 'label': styles-tokens-dropList.$sans-body-m,
13
+ 'caption': styles-tokens-dropList.$sans-body-s,
14
+ 'description': styles-tokens-dropList.$sans-body-s,
15
+ 'separator': styles-tokens-dropList.$light-label-l,
17
16
  ),
18
17
  'l': (
19
- 'label': $sans-body-l,
20
- 'caption': $sans-body-m,
21
- 'description': $sans-body-m,
22
- 'separator': $light-label-l,
18
+ 'label': styles-tokens-dropList.$sans-body-l,
19
+ 'caption': styles-tokens-dropList.$sans-body-m,
20
+ 'description': styles-tokens-dropList.$sans-body-m,
21
+ 'separator': styles-tokens-dropList.$light-label-l,
23
22
  ),
24
23
  );
25
24
 
@@ -30,18 +29,18 @@ $typography: (
30
29
  .label {
31
30
  overflow: hidden;
32
31
  flex: 1;
33
- color: $sys-neutral-text-main;
32
+ color: styles-tokens-dropList.$sys-neutral-text-main;
34
33
  }
35
34
 
36
35
  .caption {
37
36
  overflow: hidden;
38
- color: $sys-neutral-text-light;
37
+ color: styles-tokens-dropList.$sys-neutral-text-light;
39
38
  text-overflow: ellipsis;
40
39
  white-space: nowrap;
41
40
  }
42
41
 
43
42
  .description {
44
- color: $sys-neutral-text-support;
43
+ color: styles-tokens-dropList.$sys-neutral-text-support;
45
44
  }
46
45
 
47
46
  .content {
@@ -53,19 +52,19 @@ $typography: (
53
52
  @each $size in $sizes {
54
53
  &[data-size='#{$size}'] {
55
54
  .headline {
56
- @include composite-var($drop-list, 'item', $size, 'headline');
55
+ @include styles-tokens-dropList.composite-var(styles-tokens-dropList.$drop-list, 'item', $size, 'headline');
57
56
  }
58
57
  .label {
59
- @include composite-var($typography, $size, 'label');
58
+ @include styles-tokens-dropList.composite-var($typography, $size, 'label');
60
59
 
61
60
  display: flex;
62
61
  align-items: center;
63
62
  }
64
63
  .caption {
65
- @include composite-var($typography, $size, 'caption');
64
+ @include styles-tokens-dropList.composite-var($typography, $size, 'caption');
66
65
  }
67
66
  .description {
68
- @include composite-var($typography, $size, 'description');
67
+ @include styles-tokens-dropList.composite-var($typography, $size, 'description');
69
68
  }
70
69
  }
71
70
  }
@@ -74,7 +73,7 @@ $typography: (
74
73
  .label,
75
74
  .description,
76
75
  .caption {
77
- color: $sys-neutral-text-disabled;
76
+ color: styles-tokens-dropList.$sys-neutral-text-disabled;
78
77
  }
79
78
  }
80
79
  }
package/src/helperComponents/ListEmptyState/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
  .listEmptyStateWrapper {
4
4
  display: flex;
@@ -7,5 +7,5 @@
7
7
  justify-content: center;
8
8
 
9
9
  box-sizing: border-box;
10
- padding: $dimension-1m;
10
+ padding: styles-tokens-element.$dimension-1m;
11
11
  }
package/src/helperComponents/Separator/styles.module.scss CHANGED
@@ -1,19 +1,18 @@
1
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-button-buttonFunction';
2
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-dropList';
3
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
1
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-button-buttonFunction';
2
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-dropList';
4
3
 
5
4
  $sizes: 's', 'm', 'l';
6
5
 
7
6
  $typography-primary: (
8
- 's': $sans-label-m,
9
- 'm': $sans-label-l,
10
- 'l': $sans-title-m,
7
+ 's': styles-tokens-button-buttonFunction.$sans-label-m,
8
+ 'm': styles-tokens-button-buttonFunction.$sans-label-l,
9
+ 'l': styles-tokens-button-buttonFunction.$sans-title-m,
11
10
  );
12
11
 
13
12
  $typography-secondary: (
14
- 's': $light-label-m,
15
- 'm': $light-label-l,
16
- 'l': $light-title-m,
13
+ 's': styles-tokens-button-buttonFunction.$light-label-m,
14
+ 'm': styles-tokens-button-buttonFunction.$light-label-l,
15
+ 'l': styles-tokens-button-buttonFunction.$light-title-m,
17
16
  );
18
17
 
19
18
  $button-size: (
@@ -26,7 +25,7 @@ $containerSize: 1px;
26
25
 
27
26
  .separatorWithLabel {
28
27
  display: flex;
29
- gap: $dimension-1m;
28
+ gap: styles-tokens-button-buttonFunction.$dimension-1m;
30
29
  align-items: flex-end;
31
30
 
32
31
  box-sizing: border-box;
@@ -35,14 +34,14 @@ $containerSize: 1px;
35
34
 
36
35
  @each $size in $sizes {
37
36
  &[data-size='#{$size}'] {
38
- @include composite-var($drop-list, 'item', $size, 'container-separator-subheader');
37
+ @include styles-tokens-button-buttonFunction.composite-var(styles-tokens-dropList.$drop-list, 'item', $size, 'container-separator-subheader');
39
38
 
40
39
  .label {
41
40
  &[data-mode='primary'] {
42
- @include composite-var(simple-var($typography-primary, $size));
41
+ @include styles-tokens-button-buttonFunction.composite-var(styles-tokens-button-buttonFunction.simple-var($typography-primary, $size));
43
42
  }
44
43
  &[data-mode='secondary'] {
45
- @include composite-var(simple-var($typography-secondary, $size));
44
+ @include styles-tokens-button-buttonFunction.composite-var(styles-tokens-button-buttonFunction.simple-var($typography-secondary, $size));
46
45
  }
47
46
  }
48
47
  }
@@ -55,7 +54,7 @@ $containerSize: 1px;
55
54
 
56
55
  @each $size in $sizes {
57
56
  &[data-size='#{$size}'] {
58
- @include composite-var($drop-list, 'item', $size, 'container-separator');
57
+ @include styles-tokens-button-buttonFunction.composite-var(styles-tokens-dropList.$drop-list, 'item', $size, 'container-separator');
59
58
  }
60
59
  }
61
60
 
@@ -67,11 +66,11 @@ $containerSize: 1px;
67
66
  flex-shrink: 1;
68
67
 
69
68
  &[data-mode='primary'] {
70
- color: $sys-neutral-text-main;
69
+ color: styles-tokens-button-buttonFunction.$sys-neutral-text-main;
71
70
  }
72
71
 
73
72
  &[data-mode='secondary'] {
74
- color: $sys-neutral-text-light;
73
+ color: styles-tokens-button-buttonFunction.$sys-neutral-text-light;
75
74
  }
76
75
  }
77
76
 
@@ -98,15 +97,14 @@ hr.divider {
98
97
  transform: translateY(
99
98
  calc(
100
99
  (
101
- simple-var(
102
- $button-function,
100
+ styles-tokens-button-buttonFunction.simple-var(
101
+ styles-tokens-button-buttonFunction.$button-function,
103
102
  'container',
104
- simple-var($button-size, $size),
103
+ styles-tokens-button-buttonFunction.simple-var($button-size, $size),
105
104
  'label-only',
106
105
  'height'
107
- ) - simple-var($theme-variables, 'sans', 'label', $size, 'line-height')
108
- ) /
109
- 2 - var(--divider-height, 0)
106
+ ) - styles-tokens-button-buttonFunction.simple-var(styles-tokens-button-buttonFunction.$theme-variables, 'sans', 'label', $size, 'line-height')
107
+ ) / 2 - var(--divider-height, 0)
110
108
  )
111
109
  );
112
110
  }