@snack-uikit/card 0.13.0 → 0.14.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 (14) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/package.json +10 -10
  3. package/src/components/Card/styles.module.scss +38 -38
  4. package/src/components/Footer/components/Action/styles.module.scss +2 -2
  5. package/src/components/Footer/components/CallToAction/styles.module.scss +7 -7
  6. package/src/components/Footer/components/Dimension/styles.module.scss +5 -5
  7. package/src/components/Footer/components/Promo/styles.module.scss +0 -2
  8. package/src/components/FunctionBadge/styles.module.scss +12 -12
  9. package/src/components/Header/styles.module.scss +5 -5
  10. package/src/components/Image/styles.module.scss +5 -5
  11. package/src/helperComponents/Check/styles.module.scss +3 -3
  12. package/src/helperComponents/Emblem/styled.module.scss +3 -3
  13. package/src/helperComponents/FunctionBadgeWrapper/styles.module.scss +5 -5
  14. package/src/helperComponents/PromoBadge/styles.module.scss +2 -2
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.14.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.13.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": "Card",
7
- "version": "0.13.0",
7
+ "version": "0.14.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/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.0",
40
+ "@snack-uikit/icon-predefined": "0.7.0",
41
+ "@snack-uikit/icons": "0.24.0",
42
+ "@snack-uikit/list": "0.20.0",
43
+ "@snack-uikit/promo-tag": "0.6.0",
44
+ "@snack-uikit/tag": "0.11.0",
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": "8499829efa0c118b704de17411ae2328a024adb5"
51
51
  }
package/src/components/Card/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/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
 
@@ -17,7 +17,7 @@ $sizes: 's', 'm', 'l';
17
17
  }
18
18
 
19
19
  .composition {
20
- @include composite-var($card-composition-container);
20
+ @include styles-tokens-card.composite-var(styles-tokens-card.$card-composition-container);
21
21
 
22
22
  box-sizing: border-box;
23
23
  height: 100%;
@@ -29,7 +29,7 @@ $sizes: 's', 'm', 'l';
29
29
  }
30
30
 
31
31
  .card {
32
- @include composite-var($card-container);
32
+ @include styles-tokens-card.composite-var(styles-tokens-card.$card-container);
33
33
 
34
34
  position: relative;
35
35
  z-index: 0;
@@ -44,7 +44,7 @@ $sizes: 's', 'm', 'l';
44
44
 
45
45
  text-align: left;
46
46
 
47
- background-color: $sys-neutral-background1-level;
47
+ background-color: styles-tokens-card.$sys-neutral-background1-level;
48
48
  border: 0;
49
49
  outline-color: transparent;
50
50
 
@@ -55,29 +55,29 @@ $sizes: 's', 'm', 'l';
55
55
  }
56
56
 
57
57
  &[data-outline] {
58
- @include outline-var($container-focused-s);
58
+ @include styles-tokens-card.outline-var(styles-tokens-element.$container-focused-s);
59
59
 
60
- outline-color: $sys-neutral-decor-default;
61
- outline-width: $border-width-card-container;
60
+ outline-color: styles-tokens-card.$sys-neutral-decor-default;
61
+ outline-width: styles-tokens-card.$border-width-card-container;
62
62
  }
63
63
 
64
64
  &:hover,
65
65
  &:focus-visible {
66
- --snack-ui-card-background-color: #{$sys-neutral-background2-level};
66
+ --snack-ui-card-background-color: #{styles-tokens-card.$sys-neutral-background2-level};
67
67
  }
68
68
 
69
69
  &:focus-visible {
70
- @include outline-var($container-focused-l);
70
+ @include styles-tokens-card.outline-var(styles-tokens-element.$container-focused-l);
71
71
 
72
- background-color: $sys-neutral-background2-level;
73
- outline-color: $sys-primary-accent-default;
72
+ background-color: styles-tokens-card.$sys-neutral-background2-level;
73
+ outline-color: styles-tokens-card.$sys-primary-accent-default;
74
74
 
75
75
  .functionBadgeWrapper {
76
76
  display: block;
77
77
  }
78
78
 
79
79
  .check {
80
- background-color: $sys-primary-accent-default;
80
+ background-color: styles-tokens-card.$sys-primary-accent-default;
81
81
  }
82
82
  }
83
83
 
@@ -88,13 +88,13 @@ $sizes: 's', 'm', 'l';
88
88
  }
89
89
 
90
90
  &[data-checked] {
91
- @include outline-var($container-focused-s);
91
+ @include styles-tokens-card.outline-var(styles-tokens-element.$container-focused-s);
92
92
 
93
- outline-color: $sys-primary-decor-activated;
94
- outline-width: $border-width-card-container;
93
+ outline-color: styles-tokens-card.$sys-primary-decor-activated;
94
+ outline-width: styles-tokens-card.$border-width-card-container;
95
95
 
96
96
  &:hover {
97
- outline-color: $sys-primary-decor-hovered;
97
+ outline-color: styles-tokens-card.$sys-primary-decor-hovered;
98
98
  box-shadow: none;
99
99
  }
100
100
 
@@ -107,39 +107,39 @@ $sizes: 's', 'm', 'l';
107
107
  bottom: 0;
108
108
  left: 0;
109
109
 
110
- opacity: $opacity-a008;
111
- background-color: $sys-primary-accent-default;
110
+ opacity: styles-tokens-card.$opacity-a008;
111
+ background-color: styles-tokens-card.$sys-primary-accent-default;
112
112
  }
113
113
 
114
114
  .check {
115
- color: $sys-primary-on-accent;
116
- background-color: $sys-primary-accent-default;
115
+ color: styles-tokens-card.$sys-primary-on-accent;
116
+ background-color: styles-tokens-card.$sys-primary-accent-default;
117
117
  }
118
118
  }
119
119
 
120
120
  &[data-checked]:focus-visible {
121
- @include outline-var($container-focused-l);
121
+ @include styles-tokens-card.outline-var(styles-tokens-element.$container-focused-l);
122
122
 
123
- outline-color: $sys-primary-accent-default;
123
+ outline-color: styles-tokens-card.$sys-primary-accent-default;
124
124
 
125
125
  .check {
126
- color: $sys-primary-on-accent;
127
- background-color: $sys-primary-accent-default;
126
+ color: styles-tokens-card.$sys-primary-on-accent;
127
+ background-color: styles-tokens-card.$sys-primary-accent-default;
128
128
  }
129
129
  }
130
130
 
131
131
  &[data-disabled] {
132
- @include outline-var($container-focused-s);
132
+ @include styles-tokens-card.outline-var(styles-tokens-element.$container-focused-s);
133
133
 
134
134
  cursor: not-allowed;
135
- background-color: $sys-neutral-background;
136
- outline-color: $sys-neutral-decor-default;
137
- outline-width: $border-width-card-container;
135
+ background-color: styles-tokens-card.$sys-neutral-background;
136
+ outline-color: styles-tokens-card.$sys-neutral-decor-default;
137
+ outline-width: styles-tokens-card.$border-width-card-container;
138
138
 
139
139
  &[data-checked] {
140
140
  .check {
141
- color: $sys-neutral-on-accent;
142
- background-color: $sys-neutral-text-disabled;
141
+ color: styles-tokens-card.$sys-neutral-on-accent;
142
+ background-color: styles-tokens-card.$sys-neutral-text-disabled;
143
143
  }
144
144
  }
145
145
 
@@ -155,19 +155,19 @@ $sizes: 's', 'm', 'l';
155
155
 
156
156
  &[data-outline] {
157
157
  &:hover {
158
- outline-color: $sys-neutral-decor-hovered;
158
+ outline-color: styles-tokens-card.$sys-neutral-decor-hovered;
159
159
  box-shadow: none;
160
160
  }
161
161
 
162
162
  &:focus-visible {
163
- @include outline-var($container-focused-l);
163
+ @include styles-tokens-card.outline-var(styles-tokens-element.$container-focused-l);
164
164
 
165
- outline-color: $sys-primary-accent-default;
165
+ outline-color: styles-tokens-card.$sys-primary-accent-default;
166
166
  }
167
167
  }
168
168
 
169
169
  &:hover {
170
- box-shadow: simple-var($theme-variables, 'box-shadow', 'elevation', 'level2');
170
+ box-shadow: styles-tokens-card.simple-var(styles-tokens-card.$theme-variables, 'box-shadow', 'elevation', 'level2');
171
171
  }
172
172
  }
173
173
 
@@ -186,7 +186,7 @@ $sizes: 's', 'm', 'l';
186
186
  bottom: 0;
187
187
  left: 0;
188
188
 
189
- border-radius: $radius-card-container;
189
+ border-radius: styles-tokens-card.$radius-card-container;
190
190
  }
191
191
 
192
192
  .body {
@@ -196,7 +196,7 @@ $sizes: 's', 'm', 'l';
196
196
 
197
197
  width: 100%;
198
198
 
199
- color: $sys-neutral-text-support;
199
+ color: styles-tokens-card.$sys-neutral-text-support;
200
200
  text-align: initial;
201
201
  }
202
202
 
@@ -214,7 +214,7 @@ $sizes: 's', 'm', 'l';
214
214
 
215
215
  @each $size in $sizes {
216
216
  &[data-size='#{$size}'] {
217
- @include composite-var($card, 'content', $size, 'container');
217
+ @include styles-tokens-card.composite-var(styles-tokens-card.$card, 'content', $size, 'container');
218
218
  }
219
219
  }
220
220
  }
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,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
  .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
7
  z-index: 1;
@@ -15,7 +15,7 @@
15
15
  position: relative;
16
16
 
17
17
  &::before {
18
- @include composite-var($card-function-row-transparent-background);
18
+ @include styles-tokens-card.composite-var(styles-tokens-card.$card-function-row-transparent-background);
19
19
 
20
20
  content: '';
21
21
 
@@ -26,7 +26,7 @@
26
26
  width: 100%;
27
27
  height: 100%;
28
28
 
29
- background-color: $sys-neutral-background1-level;
30
- box-shadow: $box-shadow-elevation-level2;
29
+ background-color: styles-tokens-card.$sys-neutral-background1-level;
30
+ box-shadow: styles-tokens-card.$box-shadow-elevation-level2;
31
31
  }
32
32
  }
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;