@itcase/ui 1.8.159 → 1.8.161

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 (99) hide show
  1. package/dist/cjs/components/Modal.js +6 -6
  2. package/dist/components/Modal.js +6 -6
  3. package/dist/css/components/Accordion/Accordion.css +90 -10
  4. package/dist/css/components/Avatar/Avatar.css +219 -12
  5. package/dist/css/components/AvatarStack/AvatarStack.css +54 -8
  6. package/dist/css/components/Badge/Badge.css +1131 -25
  7. package/dist/css/components/Breadcrumbs/Breadcrumbs.css +27 -5
  8. package/dist/css/components/Button/Button.css +467 -21
  9. package/dist/css/components/Cell/Cell.css +31 -6
  10. package/dist/css/components/Checkbox/Checkbox.css +10896 -164
  11. package/dist/css/components/Checkmark/Checkmark.css +60 -9
  12. package/dist/css/components/Chips/Chips.css +53 -7
  13. package/dist/css/components/Choice/Choice.css +123 -13
  14. package/dist/css/components/Choice/css/__item/choice__item_size.css +78 -8
  15. package/dist/css/components/Code/Code.css +55 -11
  16. package/dist/css/components/DatePeriod/DatePeriod.css +61 -11
  17. package/dist/css/components/Divider/Divider.css +35 -15
  18. package/dist/css/components/Dot/Dot.css +41 -7
  19. package/dist/css/components/Dropdown/Dropdown.css +66 -10
  20. package/dist/css/components/Flex/Flex.css +239 -40
  21. package/dist/css/components/Flex/css/__item/flex__item_align.css +51 -8
  22. package/dist/css/components/Flex/css/__item/flex__item_direction.css +11 -4
  23. package/dist/css/components/Flex/css/__item/flex__item_grow.css +5 -4
  24. package/dist/css/components/Flex/css/__item/flex__item_justify-content.css +17 -4
  25. package/dist/css/components/Grid/Grid.css +2207 -106
  26. package/dist/css/components/Grid/css/__item/grid__item_align-self.css +53 -4
  27. package/dist/css/components/Grid/css/__item/grid__item_column.css +270 -9
  28. package/dist/css/components/Grid/css/__item/grid__item_justify-self.css +66 -8
  29. package/dist/css/components/Grid/css/__item/grid__item_row.css +270 -9
  30. package/dist/css/components/Group/Group.css +5220 -117
  31. package/dist/css/components/HeroTitle/HeroTitle.css +27 -4
  32. package/dist/css/components/Icon/Icon.css +7601 -99
  33. package/dist/css/components/Input/Input.css +42 -10
  34. package/dist/css/components/InputPassword/InputPassword.css +42 -10
  35. package/dist/css/components/Label/Label.css +34 -6
  36. package/dist/css/components/Link/Link.css +14 -4
  37. package/dist/css/components/List/List.css +425 -23
  38. package/dist/css/components/Loader/Loader.css +79 -9
  39. package/dist/css/components/Logo/Logo.css +84 -13
  40. package/dist/css/components/MenuItem/MenuItem.css +105 -15
  41. package/dist/css/components/Modal/Modal.css +103 -9
  42. package/dist/css/components/Notification/Notification.css +39 -5
  43. package/dist/css/components/Notification/css/__item/notification__item_size.css +39 -5
  44. package/dist/css/components/Pagination/Pagination.css +82 -19
  45. package/dist/css/components/Pagination/css/__item/pagination__item.css +11 -4
  46. package/dist/css/components/Pagination/css/__item/pagination__item_size.css +15 -5
  47. package/dist/css/components/Radio/Radio.css +11019 -155
  48. package/dist/css/components/RangeSlider/RangeSlider.css +2584 -64
  49. package/dist/css/components/ScrollToView/ScrollToView.css +1974 -10
  50. package/dist/css/components/Search/Search.css +34 -6
  51. package/dist/css/components/Search/css/search-input/search-input_size.css +34 -6
  52. package/dist/css/components/Segmented/Segmented.css +60 -8
  53. package/dist/css/components/Segmented/css/__item/segmaented__item.css +60 -8
  54. package/dist/css/components/Select/Select.css +456 -25
  55. package/dist/css/components/Select/css/__input-container/select__input-container.css +369 -12
  56. package/dist/css/components/Select/css/__menu/select__menu-list-item_size.css +20 -4
  57. package/dist/css/components/Switch/Switch.css +53 -7
  58. package/dist/css/components/Tab/Tab.css +79 -10
  59. package/dist/css/components/Text/Text.css +61 -12
  60. package/dist/css/components/Textarea/Textarea.css +32 -4
  61. package/dist/css/components/Tile/Tile.css +49 -6
  62. package/dist/css/components/Title/Title.css +53 -5
  63. package/dist/css/components/Tooltip/Tooltip.css +21 -5
  64. package/dist/css/components/Warning/Warning.css +6 -8
  65. package/dist/css/styles/align/align.css +20 -3
  66. package/dist/css/styles/align/align_horizontal-reverse.css +188 -4
  67. package/dist/css/styles/align/align_horizontal.css +188 -4
  68. package/dist/css/styles/align/align_vertical-reverse.css +176 -4
  69. package/dist/css/styles/align/align_vertical.css +176 -4
  70. package/dist/css/styles/align-items/align-items.css +16 -3
  71. package/dist/css/styles/align-self/align-self.css +17 -4
  72. package/dist/css/styles/blur/blur.css +78 -5
  73. package/dist/css/styles/border/border.css +224 -10
  74. package/dist/css/styles/border-color/border-color.css +24322 -53
  75. package/dist/css/styles/border-width/border-width.css +52 -4
  76. package/dist/css/styles/bundle.css +96767 -7865
  77. package/dist/css/styles/caret-color/caret-color.css +276 -8
  78. package/dist/css/styles/cursor/cursor.css +21 -5
  79. package/dist/css/styles/elevation/elevation.css +23 -4
  80. package/dist/css/styles/elevation/elevation_hover.css +37 -4
  81. package/dist/css/styles/fill/fill.css +7646 -70
  82. package/dist/css/styles/fill/fill_gradient.css +519 -12
  83. package/dist/css/styles/flex/flex-grow.css +5 -4
  84. package/dist/css/styles/hover/hover-fill-color.css +836 -9
  85. package/dist/css/styles/hover/hover-item-color.css +1074 -9
  86. package/dist/css/styles/hover/hover-text-color.css +1074 -9
  87. package/dist/css/styles/justify-content/justify-content.css +32 -4
  88. package/dist/css/styles/opacity/opacity.css +70 -5
  89. package/dist/css/styles/placeholder-text-color/placeholder-text-color.css +354 -8
  90. package/dist/css/styles/svg-color/svg_fill.css +1018 -9
  91. package/dist/css/styles/svg-color/svg_fill_hover.css +471 -8
  92. package/dist/css/styles/svg-color/svg_path_fill.css +354 -8
  93. package/dist/css/styles/text-align/text-align.css +8 -4
  94. package/dist/css/styles/text-color/text-color.css +3570 -45
  95. package/dist/css/styles/text-decoration/text-decoration.css +5 -4
  96. package/dist/css/styles/text-gradient/text-gradient.css +1182 -12
  97. package/dist/css/styles/text-style/text-style.css +5 -4
  98. package/dist/css/styles/text-weight/text-weight.css +147 -7
  99. package/package.json +7 -7
package/dist/css/components/Input/Input.css CHANGED
@@ -26,24 +26,56 @@
26
26
  }
27
27
  .input {
28
28
  &&_size {
29
- @each $size in xl, l, m, s {
30
- &_$(size) {
31
- min-height: var(--input-$(size)-min-height);
32
- padding: var(--input-$(size)-padding);
29
+ &_xl {
30
+ min-height: var(--input-xl-min-height);
31
+ padding: var(--input-xl-padding);
32
+ }
33
+ &_l {
34
+ min-height: var(--input-l-min-height);
35
+ padding: var(--input-l-padding);
36
+ }
37
+ &_m {
38
+ min-height: var(--input-m-min-height);
39
+ padding: var(--input-m-padding);
40
+ }
41
+ &_s {
42
+ min-height: var(--input-s-min-height);
43
+ padding: var(--input-s-padding);
33
44
  }
34
- }
35
45
  }
36
46
  }
37
47
  .input {
38
48
  &&_state {
39
- @each $state in error, success, require, disabled, focus {
40
- &_$(state) {
49
+ &_error {
41
50
  & .input {
42
- background: var(--input-state-$(state)-background);
43
- border: solid 1px var(--input-state-$(state)-border);
51
+ background: var(--input-state-error-background);
52
+ border: solid 1px var(--input-state-error-border);
53
+ }
54
+ }
55
+ &_success {
56
+ & .input {
57
+ background: var(--input-state-success-background);
58
+ border: solid 1px var(--input-state-success-border);
59
+ }
60
+ }
61
+ &_require {
62
+ & .input {
63
+ background: var(--input-state-require-background);
64
+ border: solid 1px var(--input-state-require-border);
65
+ }
66
+ }
67
+ &_disabled {
68
+ & .input {
69
+ background: var(--input-state-disabled-background);
70
+ border: solid 1px var(--input-state-disabled-border);
71
+ }
72
+ }
73
+ &_focus {
74
+ & .input {
75
+ background: var(--input-state-focus-background);
76
+ border: solid 1px var(--input-state-focus-border);
44
77
  }
45
78
  }
46
- }
47
79
  }
48
80
  }
49
81
  .input {
package/dist/css/components/InputPassword/InputPassword.css CHANGED
@@ -40,25 +40,57 @@
40
40
  .input-password {
41
41
  &__input {
42
42
  &&_size {
43
- @each $size in xl, l, m, s {
44
- &_$(size) {
45
- min-height: var(--input-password-$(size)-min-height);
46
- padding: var(--input-password-$(size)-padding);
43
+ &_xl {
44
+ min-height: var(--input-password-xl-min-height);
45
+ padding: var(--input-password-xl-padding);
46
+ }
47
+ &_l {
48
+ min-height: var(--input-password-l-min-height);
49
+ padding: var(--input-password-l-padding);
50
+ }
51
+ &_m {
52
+ min-height: var(--input-password-m-min-height);
53
+ padding: var(--input-password-m-padding);
54
+ }
55
+ &_s {
56
+ min-height: var(--input-password-s-min-height);
57
+ padding: var(--input-password-s-padding);
47
58
  }
48
- }
49
59
  }
50
60
  }
51
61
  }
52
62
  .input-password {
53
63
  &&_state {
54
- @each $state in error, success, require, disabled, focus {
55
- &_$(state) {
64
+ &_error {
56
65
  & .input {
57
- background: var(--input-state-$(state)-background);
58
- border: solid 1px var(--input-state-$(state)-border);
66
+ background: var(--input-state-error-background);
67
+ border: solid 1px var(--input-state-error-border);
68
+ }
69
+ }
70
+ &_success {
71
+ & .input {
72
+ background: var(--input-state-success-background);
73
+ border: solid 1px var(--input-state-success-border);
74
+ }
75
+ }
76
+ &_require {
77
+ & .input {
78
+ background: var(--input-state-require-background);
79
+ border: solid 1px var(--input-state-require-border);
80
+ }
81
+ }
82
+ &_disabled {
83
+ & .input {
84
+ background: var(--input-state-disabled-background);
85
+ border: solid 1px var(--input-state-disabled-border);
86
+ }
87
+ }
88
+ &_focus {
89
+ & .input {
90
+ background: var(--input-state-focus-background);
91
+ border: solid 1px var(--input-state-focus-border);
59
92
  }
60
93
  }
61
- }
62
94
  }
63
95
  }
64
96
  :root {
package/dist/css/components/Label/Label.css CHANGED
@@ -37,13 +37,41 @@
37
37
  }
38
38
  .label {
39
39
  &_size {
40
- @each $size in xxl, xl, l, m, s, xs, xxs {
41
- &_$(size) {
42
- padding: var(--label-size-$(size)-padding);
43
- gap: var(--label-size-$(size)-gap);
44
- min-height: var(--label-size-$(size)-min-height);
40
+ &_xxl {
41
+ padding: var(--label-size-xxl-padding);
42
+ gap: var(--label-size-xxl-gap);
43
+ min-height: var(--label-size-xxl-min-height);
44
+ }
45
+ &_xl {
46
+ padding: var(--label-size-xl-padding);
47
+ gap: var(--label-size-xl-gap);
48
+ min-height: var(--label-size-xl-min-height);
49
+ }
50
+ &_l {
51
+ padding: var(--label-size-l-padding);
52
+ gap: var(--label-size-l-gap);
53
+ min-height: var(--label-size-l-min-height);
54
+ }
55
+ &_m {
56
+ padding: var(--label-size-m-padding);
57
+ gap: var(--label-size-m-gap);
58
+ min-height: var(--label-size-m-min-height);
59
+ }
60
+ &_s {
61
+ padding: var(--label-size-s-padding);
62
+ gap: var(--label-size-s-gap);
63
+ min-height: var(--label-size-s-min-height);
64
+ }
65
+ &_xs {
66
+ padding: var(--label-size-xs-padding);
67
+ gap: var(--label-size-xs-gap);
68
+ min-height: var(--label-size-xs-min-height);
69
+ }
70
+ &_xxs {
71
+ padding: var(--label-size-xxs-padding);
72
+ gap: var(--label-size-xxs-gap);
73
+ min-height: var(--label-size-xxs-min-height);
45
74
  }
46
- }
47
75
  }
48
76
  }
49
77
  div.label {
package/dist/css/components/Link/Link.css CHANGED
@@ -22,12 +22,22 @@
22
22
  justify-content: center;
23
23
  align-items: center;
24
24
  }
25
- @each $val in row, row-reverse, column, column-reverse {
26
- &_$(val) {
25
+ &_row {
27
26
  display: flex;
28
- flex-direction: $(val);
27
+ flex-direction: row;
28
+ }
29
+ &_row-reverse {
30
+ display: flex;
31
+ flex-direction: row-reverse;
32
+ }
33
+ &_column {
34
+ display: flex;
35
+ flex-direction: column;
36
+ }
37
+ &_column-reverse {
38
+ display: flex;
39
+ flex-direction: column-reverse;
29
40
  }
30
- }
31
41
  }
32
42
  }
33
43
  .link {
package/dist/css/components/List/List.css CHANGED
@@ -10,48 +10,440 @@
10
10
  .list {
11
11
  &_bullet {
12
12
  &-fill {
13
- @each $type in accent, primary, secondary, tertiary, surface, success,
14
- error {
15
- &_$(type) {
13
+ &_accent {
16
14
  &-item {
17
- @each $color in primary, secondary, tertiary, quaternary, accent {
18
- &-$(color) {
15
+ &-primary {
19
16
  & .list__item {
20
17
  &::before {
21
- background: var(--color-$(type)-text-$(color));
18
+ background: var(--color-accent-text-primary);
19
+ }
20
+ }
21
+ }
22
+ &-secondary {
23
+ & .list__item {
24
+ &::before {
25
+ background: var(--color-accent-text-secondary);
26
+ }
27
+ }
28
+ }
29
+ &-tertiary {
30
+ & .list__item {
31
+ &::before {
32
+ background: var(--color-accent-text-tertiary);
33
+ }
34
+ }
35
+ }
36
+ &-quaternary {
37
+ & .list__item {
38
+ &::before {
39
+ background: var(--color-accent-text-quaternary);
40
+ }
41
+ }
42
+ }
43
+ &-accent {
44
+ & .list__item {
45
+ &::before {
46
+ background: var(--color-accent-text-accent);
47
+ }
48
+ }
49
+ }
50
+ }
51
+ }
52
+ &_primary {
53
+ &-item {
54
+ &-primary {
55
+ & .list__item {
56
+ &::before {
57
+ background: var(--color-primary-text-primary);
58
+ }
59
+ }
60
+ }
61
+ &-secondary {
62
+ & .list__item {
63
+ &::before {
64
+ background: var(--color-primary-text-secondary);
65
+ }
66
+ }
67
+ }
68
+ &-tertiary {
69
+ & .list__item {
70
+ &::before {
71
+ background: var(--color-primary-text-tertiary);
72
+ }
73
+ }
74
+ }
75
+ &-quaternary {
76
+ & .list__item {
77
+ &::before {
78
+ background: var(--color-primary-text-quaternary);
79
+ }
80
+ }
81
+ }
82
+ &-accent {
83
+ & .list__item {
84
+ &::before {
85
+ background: var(--color-primary-text-accent);
86
+ }
87
+ }
88
+ }
89
+ }
90
+ }
91
+ &_secondary {
92
+ &-item {
93
+ &-primary {
94
+ & .list__item {
95
+ &::before {
96
+ background: var(--color-secondary-text-primary);
97
+ }
98
+ }
99
+ }
100
+ &-secondary {
101
+ & .list__item {
102
+ &::before {
103
+ background: var(--color-secondary-text-secondary);
104
+ }
105
+ }
106
+ }
107
+ &-tertiary {
108
+ & .list__item {
109
+ &::before {
110
+ background: var(--color-secondary-text-tertiary);
111
+ }
112
+ }
113
+ }
114
+ &-quaternary {
115
+ & .list__item {
116
+ &::before {
117
+ background: var(--color-secondary-text-quaternary);
118
+ }
119
+ }
120
+ }
121
+ &-accent {
122
+ & .list__item {
123
+ &::before {
124
+ background: var(--color-secondary-text-accent);
125
+ }
126
+ }
127
+ }
128
+ }
129
+ }
130
+ &_tertiary {
131
+ &-item {
132
+ &-primary {
133
+ & .list__item {
134
+ &::before {
135
+ background: var(--color-tertiary-text-primary);
136
+ }
137
+ }
138
+ }
139
+ &-secondary {
140
+ & .list__item {
141
+ &::before {
142
+ background: var(--color-tertiary-text-secondary);
143
+ }
144
+ }
145
+ }
146
+ &-tertiary {
147
+ & .list__item {
148
+ &::before {
149
+ background: var(--color-tertiary-text-tertiary);
150
+ }
151
+ }
152
+ }
153
+ &-quaternary {
154
+ & .list__item {
155
+ &::before {
156
+ background: var(--color-tertiary-text-quaternary);
157
+ }
158
+ }
159
+ }
160
+ &-accent {
161
+ & .list__item {
162
+ &::before {
163
+ background: var(--color-tertiary-text-accent);
164
+ }
165
+ }
166
+ }
167
+ }
168
+ }
169
+ &_surface {
170
+ &-item {
171
+ &-primary {
172
+ & .list__item {
173
+ &::before {
174
+ background: var(--color-surface-text-primary);
175
+ }
176
+ }
177
+ }
178
+ &-secondary {
179
+ & .list__item {
180
+ &::before {
181
+ background: var(--color-surface-text-secondary);
182
+ }
183
+ }
184
+ }
185
+ &-tertiary {
186
+ & .list__item {
187
+ &::before {
188
+ background: var(--color-surface-text-tertiary);
189
+ }
190
+ }
191
+ }
192
+ &-quaternary {
193
+ & .list__item {
194
+ &::before {
195
+ background: var(--color-surface-text-quaternary);
196
+ }
197
+ }
198
+ }
199
+ &-accent {
200
+ & .list__item {
201
+ &::before {
202
+ background: var(--color-surface-text-accent);
203
+ }
204
+ }
205
+ }
206
+ }
207
+ }
208
+ &_success {
209
+ &-item {
210
+ &-primary {
211
+ & .list__item {
212
+ &::before {
213
+ background: var(--color-success-text-primary);
214
+ }
215
+ }
216
+ }
217
+ &-secondary {
218
+ & .list__item {
219
+ &::before {
220
+ background: var(--color-success-text-secondary);
221
+ }
222
+ }
223
+ }
224
+ &-tertiary {
225
+ & .list__item {
226
+ &::before {
227
+ background: var(--color-success-text-tertiary);
228
+ }
229
+ }
230
+ }
231
+ &-quaternary {
232
+ & .list__item {
233
+ &::before {
234
+ background: var(--color-success-text-quaternary);
235
+ }
236
+ }
237
+ }
238
+ &-accent {
239
+ & .list__item {
240
+ &::before {
241
+ background: var(--color-success-text-accent);
242
+ }
243
+ }
244
+ }
245
+ }
246
+ }
247
+ &_error {
248
+ &-item {
249
+ &-primary {
250
+ & .list__item {
251
+ &::before {
252
+ background: var(--color-error-text-primary);
253
+ }
254
+ }
255
+ }
256
+ &-secondary {
257
+ & .list__item {
258
+ &::before {
259
+ background: var(--color-error-text-secondary);
260
+ }
261
+ }
262
+ }
263
+ &-tertiary {
264
+ & .list__item {
265
+ &::before {
266
+ background: var(--color-error-text-tertiary);
267
+ }
268
+ }
269
+ }
270
+ &-quaternary {
271
+ & .list__item {
272
+ &::before {
273
+ background: var(--color-error-text-quaternary);
274
+ }
275
+ }
276
+ }
277
+ &-accent {
278
+ & .list__item {
279
+ &::before {
280
+ background: var(--color-error-text-accent);
22
281
  }
23
282
  }
24
283
  }
25
- }
26
284
  }
27
285
  }
28
- }
29
286
  }
30
287
  }
31
288
  }
32
289
  .list {
33
290
  &_bullet {
34
- @each $size in h1, h2, h3, h4, h5, h6 {
35
- &-size_$(size) {
36
- @mixin $(size);
291
+ &-size_h1 {
292
+ @mixin h1;
293
+ }
294
+ &-size_h2 {
295
+ @mixin h2;
296
+ }
297
+ &-size_h3 {
298
+ @mixin h3;
299
+ }
300
+ &-size_h4 {
301
+ @mixin h4;
302
+ }
303
+ &-size_h5 {
304
+ @mixin h5;
305
+ }
306
+ &-size_h6 {
307
+ @mixin h6;
37
308
  }
38
- }
39
309
  }
40
310
  }
41
311
  .list {
42
312
  &_bullet {
43
313
  &-text-color {
44
- @each $type in accent, primary, secondary, tertiary, surface, success, error {
45
- &_$(type) {
314
+ &_accent {
46
315
  &-text {
47
- @each $color in primary, secondary, tertiary, quaternary, accent {
48
- &-$(color) {
49
- color: var(--color-$(type)-text-$(color));
316
+ &-primary {
317
+ color: var(--color-accent-text-primary);
318
+ }
319
+ &-secondary {
320
+ color: var(--color-accent-text-secondary);
321
+ }
322
+ &-tertiary {
323
+ color: var(--color-accent-text-tertiary);
324
+ }
325
+ &-quaternary {
326
+ color: var(--color-accent-text-quaternary);
327
+ }
328
+ &-accent {
329
+ color: var(--color-accent-text-accent);
330
+ }
331
+ }
332
+ }
333
+ &_primary {
334
+ &-text {
335
+ &-primary {
336
+ color: var(--color-primary-text-primary);
337
+ }
338
+ &-secondary {
339
+ color: var(--color-primary-text-secondary);
340
+ }
341
+ &-tertiary {
342
+ color: var(--color-primary-text-tertiary);
343
+ }
344
+ &-quaternary {
345
+ color: var(--color-primary-text-quaternary);
346
+ }
347
+ &-accent {
348
+ color: var(--color-primary-text-accent);
349
+ }
350
+ }
351
+ }
352
+ &_secondary {
353
+ &-text {
354
+ &-primary {
355
+ color: var(--color-secondary-text-primary);
356
+ }
357
+ &-secondary {
358
+ color: var(--color-secondary-text-secondary);
359
+ }
360
+ &-tertiary {
361
+ color: var(--color-secondary-text-tertiary);
362
+ }
363
+ &-quaternary {
364
+ color: var(--color-secondary-text-quaternary);
365
+ }
366
+ &-accent {
367
+ color: var(--color-secondary-text-accent);
368
+ }
369
+ }
370
+ }
371
+ &_tertiary {
372
+ &-text {
373
+ &-primary {
374
+ color: var(--color-tertiary-text-primary);
375
+ }
376
+ &-secondary {
377
+ color: var(--color-tertiary-text-secondary);
378
+ }
379
+ &-tertiary {
380
+ color: var(--color-tertiary-text-tertiary);
381
+ }
382
+ &-quaternary {
383
+ color: var(--color-tertiary-text-quaternary);
384
+ }
385
+ &-accent {
386
+ color: var(--color-tertiary-text-accent);
387
+ }
388
+ }
389
+ }
390
+ &_surface {
391
+ &-text {
392
+ &-primary {
393
+ color: var(--color-surface-text-primary);
394
+ }
395
+ &-secondary {
396
+ color: var(--color-surface-text-secondary);
397
+ }
398
+ &-tertiary {
399
+ color: var(--color-surface-text-tertiary);
400
+ }
401
+ &-quaternary {
402
+ color: var(--color-surface-text-quaternary);
403
+ }
404
+ &-accent {
405
+ color: var(--color-surface-text-accent);
406
+ }
407
+ }
408
+ }
409
+ &_success {
410
+ &-text {
411
+ &-primary {
412
+ color: var(--color-success-text-primary);
413
+ }
414
+ &-secondary {
415
+ color: var(--color-success-text-secondary);
416
+ }
417
+ &-tertiary {
418
+ color: var(--color-success-text-tertiary);
419
+ }
420
+ &-quaternary {
421
+ color: var(--color-success-text-quaternary);
422
+ }
423
+ &-accent {
424
+ color: var(--color-success-text-accent);
425
+ }
426
+ }
427
+ }
428
+ &_error {
429
+ &-text {
430
+ &-primary {
431
+ color: var(--color-error-text-primary);
432
+ }
433
+ &-secondary {
434
+ color: var(--color-error-text-secondary);
435
+ }
436
+ &-tertiary {
437
+ color: var(--color-error-text-tertiary);
438
+ }
439
+ &-quaternary {
440
+ color: var(--color-error-text-quaternary);
441
+ }
442
+ &-accent {
443
+ color: var(--color-error-text-accent);
50
444
  }
51
- }
52
445
  }
53
446
  }
54
- }
55
447
  }
56
448
  }
57
449
  }
@@ -66,12 +458,22 @@
66
458
  flex-direction: column;
67
459
  }
68
460
  }
69
- @each $val in row, row-reverse, column, column-reverse {
70
- &_direction_$(val) {
461
+ &_direction_row {
462
+ display: flex;
463
+ flex-direction: row;
464
+ }
465
+ &_direction_row-reverse {
71
466
  display: flex;
72
- flex-direction: $(val);
467
+ flex-direction: row-reverse;
468
+ }
469
+ &_direction_column {
470
+ display: flex;
471
+ flex-direction: column;
472
+ }
473
+ &_direction_column-reverse {
474
+ display: flex;
475
+ flex-direction: column-reverse;
73
476
  }
74
- }
75
477
  }
76
478
  .list {
77
479
  &_style_dot {