@snack-uikit/card 0.13.0 → 0.14.1

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 (16) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/dist/cjs/helperComponents/FunctionBadgeWrapper/styles.module.css +0 -1
  3. package/dist/esm/helperComponents/FunctionBadgeWrapper/styles.module.css +0 -1
  4. package/package.json +10 -10
  5. package/src/components/Card/styles.module.scss +41 -38
  6. package/src/components/Footer/components/Action/styles.module.scss +2 -2
  7. package/src/components/Footer/components/CallToAction/styles.module.scss +7 -7
  8. package/src/components/Footer/components/Dimension/styles.module.scss +5 -5
  9. package/src/components/Footer/components/Promo/styles.module.scss +0 -2
  10. package/src/components/FunctionBadge/styles.module.scss +12 -12
  11. package/src/components/Header/styles.module.scss +5 -5
  12. package/src/components/Image/styles.module.scss +5 -5
  13. package/src/helperComponents/Check/styles.module.scss +3 -3
  14. package/src/helperComponents/Emblem/styled.module.scss +3 -3
  15. package/src/helperComponents/FunctionBadgeWrapper/styles.module.scss +5 -7
  16. package/src/helperComponents/PromoBadge/styles.module.scss +2 -2
package/CHANGELOG.md CHANGED
@@ -3,6 +3,28 @@
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.14.1 (2024-10-31)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **PDS-438:** stylelint update ([9d40d4e](https://github.com/cloud-ru-tech/snack-uikit/commit/9d40d4eb445eeaaca5a2dc1f6421d496f86aeac3))
12
+
13
+
14
+
15
+
16
+
17
+ # 0.14.0 (2024-10-28)
18
+
19
+
20
+ ### Features
21
+
22
+ * **FF-5782:** sass use/forward approach ([3e53869](https://github.com/cloud-ru-tech/snack-uikit/commit/3e53869ace864a7718e434b7f410c15dbd911cd5))
23
+
24
+
25
+
26
+
27
+
6
28
  # 0.13.0 (2024-10-28)
7
29
 
8
30
 
package/dist/cjs/helperComponents/FunctionBadgeWrapper/styles.module.css CHANGED
@@ -2,7 +2,6 @@
2
2
  padding-top:var(--space-card-padding-function-badge, 8px);
3
3
  padding-right:var(--space-card-padding-function-badge, 8px);
4
4
  position:absolute;
5
- z-index:1;
6
5
  top:0;
7
6
  right:0;
8
7
  box-sizing:border-box;
package/dist/esm/helperComponents/FunctionBadgeWrapper/styles.module.css CHANGED
@@ -2,7 +2,6 @@
2
2
  padding-top:var(--space-card-padding-function-badge, 8px);
3
3
  padding-right:var(--space-card-padding-function-badge, 8px);
4
4
  position:absolute;
5
- z-index:1;
6
5
  top:0;
7
6
  right:0;
8
7
  box-sizing:border-box;
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "access": "public"
5
5
  },
6
6
  "title": "Card",
7
- "version": "0.13.0",
7
+ "version": "0.14.1",
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/icon-predefined": "0.6.0",
41
- "@snack-uikit/icons": "0.23.0",
42
- "@snack-uikit/list": "0.19.0",
43
- "@snack-uikit/promo-tag": "0.5.0",
44
- "@snack-uikit/tag": "0.10.0",
45
- "@snack-uikit/truncate-string": "0.5.0",
46
- "@snack-uikit/typography": "0.7.0",
39
+ "@snack-uikit/button": "0.19.1",
40
+ "@snack-uikit/icon-predefined": "0.7.0",
41
+ "@snack-uikit/icons": "0.24.0",
42
+ "@snack-uikit/list": "0.21.0",
43
+ "@snack-uikit/promo-tag": "0.6.0",
44
+ "@snack-uikit/tag": "0.11.1",
45
+ "@snack-uikit/truncate-string": "0.6.0",
46
+ "@snack-uikit/typography": "0.8.0",
47
47
  "@snack-uikit/utils": "3.5.0",
48
48
  "classnames": "2.3.2"
49
49
  },
50
- "gitHead": "62cc21d8606a61a78f80e3a7455b20d6f38474fa"
50
+ "gitHead": "b7163c6f939105eb34cabec64c9e983ac7958c26"
51
51
  }
package/src/components/Card/styles.module.scss CHANGED
@@ -1,10 +1,11 @@
1
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-card';
2
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
1
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-card';
2
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
3
3
 
4
4
  $sizes: 's', 'm', 'l';
5
5
 
6
6
  .functionBadgeWrapper {
7
7
  position: absolute;
8
+ /* stylelint-disable-next-line declaration-property-value-allowed-list */
8
9
  z-index: 1;
9
10
  top: 0;
10
11
  right: 0;
@@ -17,7 +18,7 @@ $sizes: 's', 'm', 'l';
17
18
  }
18
19
 
19
20
  .composition {
20
- @include composite-var($card-composition-container);
21
+ @include styles-tokens-card.composite-var(styles-tokens-card.$card-composition-container);
21
22
 
22
23
  box-sizing: border-box;
23
24
  height: 100%;
@@ -29,9 +30,10 @@ $sizes: 's', 'm', 'l';
29
30
  }
30
31
 
31
32
  .card {
32
- @include composite-var($card-container);
33
+ @include styles-tokens-card.composite-var(styles-tokens-card.$card-container);
33
34
 
34
35
  position: relative;
36
+ /* stylelint-disable-next-line declaration-property-value-allowed-list */
35
37
  z-index: 0;
36
38
 
37
39
  overflow: hidden;
@@ -44,7 +46,7 @@ $sizes: 's', 'm', 'l';
44
46
 
45
47
  text-align: left;
46
48
 
47
- background-color: $sys-neutral-background1-level;
49
+ background-color: styles-tokens-card.$sys-neutral-background1-level;
48
50
  border: 0;
49
51
  outline-color: transparent;
50
52
 
@@ -55,29 +57,29 @@ $sizes: 's', 'm', 'l';
55
57
  }
56
58
 
57
59
  &[data-outline] {
58
- @include outline-var($container-focused-s);
60
+ @include styles-tokens-card.outline-var(styles-tokens-element.$container-focused-s);
59
61
 
60
- outline-color: $sys-neutral-decor-default;
61
- outline-width: $border-width-card-container;
62
+ outline-color: styles-tokens-card.$sys-neutral-decor-default;
63
+ outline-width: styles-tokens-card.$border-width-card-container;
62
64
  }
63
65
 
64
66
  &:hover,
65
67
  &:focus-visible {
66
- --snack-ui-card-background-color: #{$sys-neutral-background2-level};
68
+ --snack-ui-card-background-color: #{styles-tokens-card.$sys-neutral-background2-level};
67
69
  }
68
70
 
69
71
  &:focus-visible {
70
- @include outline-var($container-focused-l);
72
+ @include styles-tokens-card.outline-var(styles-tokens-element.$container-focused-l);
71
73
 
72
- background-color: $sys-neutral-background2-level;
73
- outline-color: $sys-primary-accent-default;
74
+ background-color: styles-tokens-card.$sys-neutral-background2-level;
75
+ outline-color: styles-tokens-card.$sys-primary-accent-default;
74
76
 
75
77
  .functionBadgeWrapper {
76
78
  display: block;
77
79
  }
78
80
 
79
81
  .check {
80
- background-color: $sys-primary-accent-default;
82
+ background-color: styles-tokens-card.$sys-primary-accent-default;
81
83
  }
82
84
  }
83
85
 
@@ -88,13 +90,13 @@ $sizes: 's', 'm', 'l';
88
90
  }
89
91
 
90
92
  &[data-checked] {
91
- @include outline-var($container-focused-s);
93
+ @include styles-tokens-card.outline-var(styles-tokens-element.$container-focused-s);
92
94
 
93
- outline-color: $sys-primary-decor-activated;
94
- outline-width: $border-width-card-container;
95
+ outline-color: styles-tokens-card.$sys-primary-decor-activated;
96
+ outline-width: styles-tokens-card.$border-width-card-container;
95
97
 
96
98
  &:hover {
97
- outline-color: $sys-primary-decor-hovered;
99
+ outline-color: styles-tokens-card.$sys-primary-decor-hovered;
98
100
  box-shadow: none;
99
101
  }
100
102
 
@@ -107,39 +109,39 @@ $sizes: 's', 'm', 'l';
107
109
  bottom: 0;
108
110
  left: 0;
109
111
 
110
- opacity: $opacity-a008;
111
- background-color: $sys-primary-accent-default;
112
+ opacity: styles-tokens-card.$opacity-a008;
113
+ background-color: styles-tokens-card.$sys-primary-accent-default;
112
114
  }
113
115
 
114
116
  .check {
115
- color: $sys-primary-on-accent;
116
- background-color: $sys-primary-accent-default;
117
+ color: styles-tokens-card.$sys-primary-on-accent;
118
+ background-color: styles-tokens-card.$sys-primary-accent-default;
117
119
  }
118
120
  }
119
121
 
120
122
  &[data-checked]:focus-visible {
121
- @include outline-var($container-focused-l);
123
+ @include styles-tokens-card.outline-var(styles-tokens-element.$container-focused-l);
122
124
 
123
- outline-color: $sys-primary-accent-default;
125
+ outline-color: styles-tokens-card.$sys-primary-accent-default;
124
126
 
125
127
  .check {
126
- color: $sys-primary-on-accent;
127
- background-color: $sys-primary-accent-default;
128
+ color: styles-tokens-card.$sys-primary-on-accent;
129
+ background-color: styles-tokens-card.$sys-primary-accent-default;
128
130
  }
129
131
  }
130
132
 
131
133
  &[data-disabled] {
132
- @include outline-var($container-focused-s);
134
+ @include styles-tokens-card.outline-var(styles-tokens-element.$container-focused-s);
133
135
 
134
136
  cursor: not-allowed;
135
- background-color: $sys-neutral-background;
136
- outline-color: $sys-neutral-decor-default;
137
- outline-width: $border-width-card-container;
137
+ background-color: styles-tokens-card.$sys-neutral-background;
138
+ outline-color: styles-tokens-card.$sys-neutral-decor-default;
139
+ outline-width: styles-tokens-card.$border-width-card-container;
138
140
 
139
141
  &[data-checked] {
140
142
  .check {
141
- color: $sys-neutral-on-accent;
142
- background-color: $sys-neutral-text-disabled;
143
+ color: styles-tokens-card.$sys-neutral-on-accent;
144
+ background-color: styles-tokens-card.$sys-neutral-text-disabled;
143
145
  }
144
146
  }
145
147
 
@@ -155,19 +157,19 @@ $sizes: 's', 'm', 'l';
155
157
 
156
158
  &[data-outline] {
157
159
  &:hover {
158
- outline-color: $sys-neutral-decor-hovered;
160
+ outline-color: styles-tokens-card.$sys-neutral-decor-hovered;
159
161
  box-shadow: none;
160
162
  }
161
163
 
162
164
  &:focus-visible {
163
- @include outline-var($container-focused-l);
165
+ @include styles-tokens-card.outline-var(styles-tokens-element.$container-focused-l);
164
166
 
165
- outline-color: $sys-primary-accent-default;
167
+ outline-color: styles-tokens-card.$sys-primary-accent-default;
166
168
  }
167
169
  }
168
170
 
169
171
  &:hover {
170
- box-shadow: simple-var($theme-variables, 'box-shadow', 'elevation', 'level2');
172
+ box-shadow: styles-tokens-card.simple-var(styles-tokens-card.$theme-variables, 'box-shadow', 'elevation', 'level2');
171
173
  }
172
174
  }
173
175
 
@@ -180,13 +182,14 @@ $sizes: 's', 'm', 'l';
180
182
 
181
183
  .anchor {
182
184
  position: absolute;
185
+ /* stylelint-disable-next-line declaration-property-value-allowed-list */
183
186
  z-index: 1;
184
187
  top: 0;
185
188
  right: 0;
186
189
  bottom: 0;
187
190
  left: 0;
188
191
 
189
- border-radius: $radius-card-container;
192
+ border-radius: styles-tokens-card.$radius-card-container;
190
193
  }
191
194
 
192
195
  .body {
@@ -196,7 +199,7 @@ $sizes: 's', 'm', 'l';
196
199
 
197
200
  width: 100%;
198
201
 
199
- color: $sys-neutral-text-support;
202
+ color: styles-tokens-card.$sys-neutral-text-support;
200
203
  text-align: initial;
201
204
  }
202
205
 
@@ -214,7 +217,7 @@ $sizes: 's', 'm', 'l';
214
217
 
215
218
  @each $size in $sizes {
216
219
  &[data-size='#{$size}'] {
217
- @include composite-var($card, 'content', $size, 'container');
220
+ @include styles-tokens-card.composite-var(styles-tokens-card.$card, 'content', $size, 'container');
218
221
  }
219
222
  }
220
223
  }
package/src/components/Footer/components/Action/styles.module.scss CHANGED
@@ -1,7 +1,7 @@
1
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-card';
1
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-card';
2
2
 
3
3
  .action {
4
- @include composite-var($card-action);
4
+ @include styles-tokens-card.composite-var(styles-tokens-card.$card-action);
5
5
 
6
6
  display: flex;
7
7
  align-items: center;
package/src/components/Footer/components/CallToAction/styles.module.scss CHANGED
@@ -1,8 +1,8 @@
1
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-card';
2
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
1
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-card';
2
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
3
3
 
4
4
  .callToAction {
5
- @include composite-var($card-call-to-action);
5
+ @include styles-tokens-card.composite-var(styles-tokens-card.$card-call-to-action);
6
6
 
7
7
  display: flex;
8
8
  align-items: center;
@@ -14,14 +14,14 @@
14
14
  display: flex;
15
15
  align-items: center;
16
16
  justify-content: center;
17
- color: $sys-primary-accent-default;
17
+ color: styles-tokens-card.$sys-primary-accent-default;
18
18
 
19
19
  svg {
20
- width: $icon-s !important; /* stylelint-disable-line declaration-no-important */
21
- height: $icon-s !important; /* stylelint-disable-line declaration-no-important */
20
+ width: styles-tokens-element.$icon-s !important; /* stylelint-disable-line declaration-no-important */
21
+ height: styles-tokens-element.$icon-s !important; /* stylelint-disable-line declaration-no-important */
22
22
  }
23
23
  }
24
24
 
25
25
  .label {
26
- color: $sys-primary-accent-default;
26
+ color: styles-tokens-card.$sys-primary-accent-default;
27
27
  }
package/src/components/Footer/components/Dimension/styles.module.scss CHANGED
@@ -1,7 +1,7 @@
1
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-card';
1
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-card';
2
2
 
3
3
  .wrapper {
4
- @include composite-var($card-dimension);
4
+ @include styles-tokens-card.composite-var(styles-tokens-card.$card-dimension);
5
5
 
6
6
  display: flex;
7
7
  flex: 1 0 auto;
@@ -19,13 +19,13 @@
19
19
  }
20
20
 
21
21
  .currentValue {
22
- color: $sys-neutral-text-main;
22
+ color: styles-tokens-card.$sys-neutral-text-main;
23
23
  }
24
24
 
25
25
  .oldValue {
26
- color: $sys-neutral-text-light;
26
+ color: styles-tokens-card.$sys-neutral-text-light;
27
27
  }
28
28
 
29
29
  .dimension {
30
- color: $sys-neutral-text-light;
30
+ color: styles-tokens-card.$sys-neutral-text-light;
31
31
  }
package/src/components/Footer/components/Promo/styles.module.scss CHANGED
@@ -1,5 +1,3 @@
1
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-card';
2
-
3
1
  .promo {
4
2
  display: flex;
5
3
  align-items: center;
package/src/components/FunctionBadge/styles.module.scss CHANGED
@@ -1,8 +1,8 @@
1
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-card';
2
- @import "@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element";
1
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-card';
2
+ @use "@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element";
3
3
 
4
4
  .button {
5
- @include composite-var($card-button);
5
+ @include styles-tokens-card.composite-var(styles-tokens-card.$card-button);
6
6
 
7
7
  cursor: pointer;
8
8
 
@@ -12,35 +12,35 @@
12
12
  align-items: center;
13
13
  justify-content: center;
14
14
 
15
- color: $sys-neutral-text-main;
15
+ color: styles-tokens-card.$sys-neutral-text-main;
16
16
 
17
17
  background-color: transparent;
18
18
  border: 0;
19
19
  outline-color: transparent;
20
20
 
21
21
  &:hover {
22
- color: $sys-neutral-text-support;
22
+ color: styles-tokens-card.$sys-neutral-text-support;
23
23
  }
24
24
 
25
25
  &:focus-visible {
26
- @include outline-var($container-focused-s);
26
+ @include styles-tokens-card.outline-var(styles-tokens-element.$container-focused-s);
27
27
 
28
- color: $sys-neutral-text-support;
29
- outline-color: $sys-available-complementary;
28
+ color: styles-tokens-card.$sys-neutral-text-support;
29
+ outline-color: styles-tokens-card.$sys-available-complementary;
30
30
  }
31
31
 
32
32
  &:active {
33
- color: $sys-neutral-text-light;
33
+ color: styles-tokens-card.$sys-neutral-text-light;
34
34
  }
35
35
 
36
36
  svg {
37
- width: $icon-s !important; /* stylelint-disable-line declaration-no-important */
38
- height: $icon-s !important; /* stylelint-disable-line declaration-no-important */
37
+ width: styles-tokens-element.$icon-s !important; /* stylelint-disable-line declaration-no-important */
38
+ height: styles-tokens-element.$icon-s !important; /* stylelint-disable-line declaration-no-important */
39
39
  }
40
40
  }
41
41
 
42
42
  .triggerClassName {
43
- --offset: #{$space-drop-list-drop-offset};
43
+ --offset: #{styles-tokens-card.$space-drop-list-drop-offset};
44
44
  }
45
45
 
46
46
  .wrapper {
package/src/components/Header/styles.module.scss CHANGED
@@ -1,4 +1,4 @@
1
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-card';
1
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-card';
2
2
 
3
3
  $sizes: 's', 'm', 'l';
4
4
 
@@ -10,7 +10,7 @@ $sizes: 's', 'm', 'l';
10
10
 
11
11
  @each $size in $sizes {
12
12
  &[data-size='#{$size}'] {
13
- @include composite-var($card, 'content', $size, 'header');
13
+ @include styles-tokens-card.composite-var(styles-tokens-card.$card, 'content', $size, 'header');
14
14
  }
15
15
  }
16
16
  }
@@ -24,16 +24,16 @@ $sizes: 's', 'm', 'l';
24
24
  .title {
25
25
  display: block;
26
26
  max-width: 100%;
27
- color: $sys-neutral-text-main;
27
+ color: styles-tokens-card.$sys-neutral-text-main;
28
28
  }
29
29
 
30
30
  .metadata {
31
31
  max-width: 100%;
32
- color: $sys-neutral-text-light;
32
+ color: styles-tokens-card.$sys-neutral-text-light;
33
33
  }
34
34
 
35
35
  .description {
36
36
  max-width: 100%;
37
- color: $sys-neutral-text-support;
37
+ color: styles-tokens-card.$sys-neutral-text-support;
38
38
  }
39
39
 
package/src/components/Image/styles.module.scss CHANGED
@@ -1,5 +1,5 @@
1
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-card';
2
- @import '@snack-uikit/figma-tokens/build/scss/styles-theme-variables';
1
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-card';
2
+ @use '@snack-uikit/figma-tokens/build/scss/styles-theme-variables';
3
3
 
4
4
  $modes: 'little', 'middle', 'background';
5
5
 
@@ -25,13 +25,13 @@ $modes: 'little', 'middle', 'background';
25
25
  object-fit: cover;
26
26
 
27
27
  &[data-fading]{
28
- -webkit-mask-image: $gradient-linear-mask-90deg;
29
- mask-image: $gradient-linear-mask-90deg;
28
+ -webkit-mask-image: styles-theme-variables.$gradient-linear-mask-90deg;
29
+ mask-image: styles-theme-variables.$gradient-linear-mask-90deg;
30
30
  }
31
31
  }
32
32
 
33
33
  @else {
34
- @include composite-var($card, 'image', $mode);
34
+ @include styles-theme-variables.composite-var(styles-tokens-card.$card, 'image', $mode);
35
35
  }
36
36
  }
37
37
  }
package/src/helperComponents/Check/styles.module.scss CHANGED
@@ -1,7 +1,7 @@
1
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-card';
1
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-card';
2
2
 
3
3
  .checkWrapper {
4
- @include composite-var($card-check-badge);
4
+ @include styles-tokens-card.composite-var(styles-tokens-card.$card-check-badge);
5
5
 
6
6
  position: absolute;
7
7
  top: 0;
@@ -9,7 +9,7 @@
9
9
  }
10
10
 
11
11
  .checkContainer {
12
- @include composite-var($card-check);
12
+ @include styles-tokens-card.composite-var(styles-tokens-card.$card-check);
13
13
 
14
14
  display: flex;
15
15
  align-items: center;
package/src/helperComponents/Emblem/styled.module.scss CHANGED
@@ -1,4 +1,4 @@
1
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-card';
1
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-card';
2
2
 
3
3
  $sizes: 's', 'm', 'l';
4
4
 
@@ -9,12 +9,12 @@ $sizes: 's', 'm', 'l';
9
9
  box-sizing: border-box;
10
10
 
11
11
  object-fit: cover;
12
- border-color: $sys-neutral-decor-disabled;
12
+ border-color: styles-tokens-card.$sys-neutral-decor-disabled;
13
13
  border-style: solid;
14
14
 
15
15
  @each $size in $sizes {
16
16
  &[data-size='#{$size}'] {
17
- @include composite-var($card, 'picture', $size);
17
+ @include styles-tokens-card.composite-var(styles-tokens-card.$card, 'picture', $size);
18
18
  }
19
19
  }
20
20
  }
package/src/helperComponents/FunctionBadgeWrapper/styles.module.scss CHANGED
@@ -1,13 +1,11 @@
1
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-card';
1
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-card';
2
2
 
3
3
  .functionBadge {
4
- @include composite-var($card-function-badge);
4
+ @include styles-tokens-card.composite-var(styles-tokens-card.$card-function-badge);
5
5
 
6
6
  position: absolute;
7
- z-index: 1;
8
7
  top: 0;
9
8
  right: 0;
10
-
11
9
  box-sizing: border-box;
12
10
  }
13
11
 
@@ -15,7 +13,7 @@
15
13
  position: relative;
16
14
 
17
15
  &::before {
18
- @include composite-var($card-function-row-transparent-background);
16
+ @include styles-tokens-card.composite-var(styles-tokens-card.$card-function-row-transparent-background);
19
17
 
20
18
  content: '';
21
19
 
@@ -26,7 +24,7 @@
26
24
  width: 100%;
27
25
  height: 100%;
28
26
 
29
- background-color: $sys-neutral-background1-level;
30
- box-shadow: $box-shadow-elevation-level2;
27
+ background-color: styles-tokens-card.$sys-neutral-background1-level;
28
+ box-shadow: styles-tokens-card.$box-shadow-elevation-level2;
31
29
  }
32
30
  }
package/src/helperComponents/PromoBadge/styles.module.scss CHANGED
@@ -1,7 +1,7 @@
1
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-card';
1
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-card';
2
2
 
3
3
  .promoBadge {
4
- @include composite-var($card-promo-badge);
4
+ @include styles-tokens-card.composite-var(styles-tokens-card.$card-promo-badge);
5
5
 
6
6
  position: absolute;
7
7
  top: 0;