@skbkontur/colors 2.0.0-alpha.0 → 2.0.0-alpha.2

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 (62) hide show
  1. package/dist/cjs/get-base-tokens.d.ts +7 -0
  2. package/dist/cjs/get-base-tokens.js +121 -1
  3. package/dist/cjs/get-colors.d.ts +2 -1
  4. package/dist/cjs/get-colors.js +6 -2
  5. package/dist/cjs/get-default-tokens.d.ts +12 -12
  6. package/dist/cjs/get-default-tokens.js +15 -16
  7. package/dist/cjs/helpers/get-palette.js +3 -3
  8. package/dist/colors.default-dark.js +326 -319
  9. package/dist/colors.default-light.js +329 -319
  10. package/dist/colors.js +319 -319
  11. package/dist/colors.less +319 -319
  12. package/dist/colors.scss +319 -319
  13. package/dist/esm/get-base-tokens.d.ts +7 -0
  14. package/dist/esm/get-base-tokens.js +110 -0
  15. package/dist/esm/get-colors.d.ts +2 -1
  16. package/dist/esm/get-colors.js +7 -3
  17. package/dist/esm/get-default-tokens.d.ts +12 -12
  18. package/dist/esm/get-default-tokens.js +15 -16
  19. package/dist/esm/helpers/get-palette.js +3 -3
  20. package/dist/tokens/brand-blue-deep_accent-brand.css +640 -640
  21. package/dist/tokens/brand-blue-deep_accent-gray.css +640 -640
  22. package/dist/tokens/brand-blue_accent-brand.css +640 -640
  23. package/dist/tokens/brand-blue_accent-gray.css +640 -640
  24. package/dist/tokens/brand-green_accent-brand.css +640 -640
  25. package/dist/tokens/brand-green_accent-gray.css +640 -640
  26. package/dist/tokens/brand-mint_accent-brand.css +640 -640
  27. package/dist/tokens/brand-mint_accent-gray.css +640 -640
  28. package/dist/tokens/brand-orange_accent-gray.css +640 -640
  29. package/dist/tokens/brand-purple_accent-brand.css +640 -640
  30. package/dist/tokens/brand-purple_accent-gray.css +640 -640
  31. package/dist/tokens/brand-red_accent-gray.css +640 -640
  32. package/dist/tokens/brand-violet_accent-brand.css +640 -640
  33. package/dist/tokens/brand-violet_accent-gray.css +640 -640
  34. package/dist/tokens-js/brand-blue-deep_accent-brand.js +15 -15
  35. package/dist/tokens-js/brand-blue-deep_accent-gray.js +15 -15
  36. package/dist/tokens-js/brand-blue_accent-brand.js +15 -15
  37. package/dist/tokens-js/brand-blue_accent-gray.js +15 -15
  38. package/dist/tokens-js/brand-green_accent-brand.js +15 -15
  39. package/dist/tokens-js/brand-green_accent-gray.js +15 -15
  40. package/dist/tokens-js/brand-mint_accent-brand.js +15 -15
  41. package/dist/tokens-js/brand-mint_accent-gray.js +15 -15
  42. package/dist/tokens-js/brand-orange_accent-gray.js +15 -15
  43. package/dist/tokens-js/brand-purple_accent-brand.js +15 -15
  44. package/dist/tokens-js/brand-purple_accent-gray.js +15 -15
  45. package/dist/tokens-js/brand-red_accent-gray.js +15 -15
  46. package/dist/tokens-js/brand-violet_accent-brand.js +15 -15
  47. package/dist/tokens-js/brand-violet_accent-gray.js +15 -15
  48. package/dist/tokens-mobile/brand-blue-deep_accent-brand.json +13 -13
  49. package/dist/tokens-mobile/brand-blue-deep_accent-gray.json +13 -13
  50. package/dist/tokens-mobile/brand-blue_accent-brand.json +13 -13
  51. package/dist/tokens-mobile/brand-blue_accent-gray.json +13 -13
  52. package/dist/tokens-mobile/brand-green_accent-brand.json +13 -13
  53. package/dist/tokens-mobile/brand-green_accent-gray.json +13 -13
  54. package/dist/tokens-mobile/brand-mint_accent-brand.json +13 -13
  55. package/dist/tokens-mobile/brand-mint_accent-gray.json +13 -13
  56. package/dist/tokens-mobile/brand-orange_accent-gray.json +13 -13
  57. package/dist/tokens-mobile/brand-purple_accent-brand.json +13 -13
  58. package/dist/tokens-mobile/brand-purple_accent-gray.json +13 -13
  59. package/dist/tokens-mobile/brand-red_accent-gray.json +13 -13
  60. package/dist/tokens-mobile/brand-violet_accent-brand.json +13 -13
  61. package/dist/tokens-mobile/brand-violet_accent-gray.json +13 -13
  62. package/package.json +2 -2
package/dist/tokens/brand-green_accent-brand.css CHANGED
@@ -1,643 +1,643 @@
1
- [data-k-brand='green'][data-k-accent='brand'] {
2
- --k-text-accent-heavy: #007f34;
3
- --k-text-accent-heavy-hover: #009b41;
4
- --k-text-accent-heavy-pressed: #3a6a43;
5
- --k-text-disabled: rgba(0, 0, 0, 0.32);
6
- --k-text-error-heavy: #c50220;
7
- --k-text-error-heavy-hover: #e62b34;
8
- --k-text-error-heavy-pressed: #943e3b;
9
- --k-text-inverted-accent-heavy: #00c655;
10
- --k-text-inverted-accent-heavy-hover: #4ede76;
11
- --k-text-inverted-accent-heavy-pressed: #4fa161;
12
- --k-text-inverted-disabled: rgba(255, 255, 255, 0.4);
13
- --k-text-inverted-error-heavy: #ff5352;
14
- --k-text-inverted-error-heavy-hover: #ff726b;
15
- --k-text-inverted-error-heavy-pressed: #dd5d58;
16
- --k-text-inverted-neutral-heavy: rgba(255, 255, 255, 0.96);
17
- --k-text-inverted-neutral-pale: rgba(255, 255, 255, 0.48);
18
- --k-text-inverted-neutral-soft: rgba(255, 255, 255, 0.64);
19
- --k-text-inverted-success-heavy: #00c655;
20
- --k-text-inverted-success-heavy-hover: #4ede76;
21
- --k-text-inverted-success-heavy-pressed: #4fa161;
22
- --k-text-inverted-warning-heavy: #f8ae00;
23
- --k-text-inverted-warning-heavy-hover: #ffbf0b;
24
- --k-text-inverted-warning-heavy-pressed: #cc9a51;
25
- --k-text-logo: #26ad50;
26
- --k-text-neutral-heavy: rgba(0, 0, 0, 0.88);
27
- --k-text-neutral-pale: rgba(0, 0, 0, 0.4);
28
- --k-text-neutral-soft: rgba(0, 0, 0, 0.56);
29
- --k-text-success-heavy: #007f34;
30
- --k-text-success-heavy-hover: #009b41;
31
- --k-text-success-heavy-pressed: #3a6a43;
32
- --k-text-warning-heavy: #bc7d00;
33
- --k-text-warning-heavy-hover: #db9400;
34
- --k-text-warning-heavy-pressed: #a37736;
35
- --k-text-const-disabled-black: rgba(0, 0, 0, 0.32);
36
- --k-text-const-disabled-white: rgba(255, 255, 255, 0.4);
37
- --k-text-const-heavy-black: rgba(0, 0, 0, 0.88);
38
- --k-text-const-heavy-white: rgba(255, 255, 255, 0.96);
39
- --k-text-const-pale-black: rgba(0, 0, 0, 0.4);
40
- --k-text-const-pale-white: rgba(255, 255, 255, 0.48);
41
- --k-text-const-soft-black: rgba(0, 0, 0, 0.56);
42
- --k-text-const-soft-white: rgba(255, 255, 255, 0.64);
43
- --k-text-on-accent-bold-disabled: rgba(255, 255, 255, 0.4);
44
- --k-text-on-accent-bold-heavy: rgba(255, 255, 255, 0.96);
45
- --k-text-on-accent-bold-pale: rgba(255, 255, 255, 0.48);
46
- --k-text-on-accent-bold-soft: rgba(255, 255, 255, 0.64);
47
- --k-text-on-brand-original-disabled: rgba(255, 255, 255, 0.4);
48
- --k-text-on-brand-original-heavy: rgba(255, 255, 255, 0.96);
49
- --k-text-on-brand-original-pale: rgba(255, 255, 255, 0.48);
50
- --k-text-on-brand-original-soft: rgba(255, 255, 255, 0.64);
51
- --k-shape-bold-accent: #26ad50;
52
- --k-shape-bold-accent-hover: #00a044;
53
- --k-shape-bold-accent-pressed: #289046;
54
- --k-shape-bold-brand-original: #26ad50;
55
- --k-shape-bold-brand-original-hover: #00a044;
56
- --k-shape-bold-brand-original-pressed: #289046;
57
- --k-shape-bold-error: #f63b40;
58
- --k-shape-bold-error-hover: #e62b34;
59
- --k-shape-bold-error-pressed: #cd3235;
60
- --k-shape-bold-neutral: #525252;
61
- --k-shape-bold-neutral-hover: #3d3d3d;
62
- --k-shape-bold-neutral-pressed: rgba(0, 0, 0, 0.56);
63
- --k-shape-bold-success: #00a948;
64
- --k-shape-bold-success-hover: #009b41;
65
- --k-shape-bold-success-pressed: #178b3f;
66
- --k-shape-bold-warning: #ffbf0b;
67
- --k-shape-bold-warning-hover: #f8ae00;
68
- --k-shape-bold-warning-pressed: #e5a331;
69
- --k-shape-faint-accent: #defbe2;
70
- --k-shape-faint-accent-hover: #c3f3ca;
71
- --k-shape-faint-accent-pressed: #bae4c0;
72
- --k-shape-faint-brand: #d4ffda;
73
- --k-shape-faint-brand-hover: #c3f3ca;
74
- --k-shape-faint-brand-pressed: #d1edd5;
75
- --k-shape-faint-error: #ffedef;
76
- --k-shape-faint-error-hover: #ffdadd;
77
- --k-shape-faint-error-pressed: #f5dee0;
78
- --k-shape-faint-neutral-alpha: rgba(0, 0, 0, 0.06);
79
- --k-shape-faint-neutral-alpha-hover: rgba(0, 0, 0, 0.08);
80
- --k-shape-faint-neutral-alpha-pressed: rgba(0, 0, 0, 0.12);
81
- --k-shape-faint-success: #defbe2;
82
- --k-shape-faint-success-hover: #c3f3ca;
83
- --k-shape-faint-success-pressed: #d1edd5;
84
- --k-shape-faint-warning: #fff3bd;
85
- --k-shape-faint-warning-hover: #f4e5ad;
86
- --k-shape-faint-warning-pressed: #ede5c4;
87
- --k-shape-heavy-error: #6b1f1e;
88
- --k-shape-heavy-neutral: #292929;
89
- --k-shape-heavy-success: #0b4a1f;
90
- --k-shape-heavy-warning: #543600;
91
- --k-shape-other-accent-bold-disabled: rgba(0, 0, 0, 0.32);
92
- --k-shape-other-backless-hover: rgba(0, 0, 0, 0.06);
93
- --k-shape-other-backless-pressed: rgba(0, 0, 0, 0.08);
94
- --k-shape-other-base: #fff;
95
- --k-shape-other-base-hover: #f2f2f2;
96
- --k-shape-other-base-pressed: #e4e4e4;
97
- --k-shape-other-disabled: rgba(0, 0, 0, 0.06);
98
- --k-shape-other-field: #fff;
99
- --k-shape-other-field-hover: #f2f2f2;
100
- --k-shape-other-field-pressed: #e4e4e4;
101
- --k-shape-other-low: rgba(0, 0, 0, 0.06);
102
- --k-shape-other-low-hover: rgba(0, 0, 0, 0.08);
103
- --k-shape-other-low-pressed: rgba(0, 0, 0, 0.12);
104
- --k-shape-other-neutral-faint-solid: #f2f2f2;
105
- --k-shape-other-neutral-faint-solid-hover: #e4e4e4;
106
- --k-shape-other-neutral-faint-solid-pressed: #d7d7d7;
107
- --k-shape-other-neutral-pale-solid: #e4e4e4;
108
- --k-shape-other-neutral-pale-solid-hover: #d7d7d7;
109
- --k-shape-other-neutral-pale-solid-pressed: #cacaca;
110
- --k-shape-other-neutral-soft-solid: #cacaca;
111
- --k-shape-other-neutral-soft-solid-hover: #bebebe;
112
- --k-shape-other-neutral-soft-solid-pressed: #b1b1b1;
113
- --k-shape-pale-accent: #b0fabd;
114
- --k-shape-pale-accent-hover: #a7ebb2;
115
- --k-shape-pale-accent-pressed: #a1dbab;
116
- --k-shape-pale-brand: #b0fabd;
117
- --k-shape-pale-brand-hover: #a7ebb2;
118
- --k-shape-pale-brand-pressed: #bae4c0;
119
- --k-shape-pale-error: #ffdadd;
120
- --k-shape-pale-error-hover: #ffc7c7;
121
- --k-shape-pale-error-pressed: #f2cdcd;
122
- --k-shape-pale-neutral-alpha: rgba(0, 0, 0, 0.08);
123
- --k-shape-pale-neutral-alpha-hover: rgba(0, 0, 0, 0.12);
124
- --k-shape-pale-neutral-alpha-pressed: rgba(0, 0, 0, 0.16);
125
- --k-shape-pale-success: #c3f3ca;
126
- --k-shape-pale-success-hover: #a7ebb2;
127
- --k-shape-pale-success-pressed: #bae4c0;
128
- --k-shape-pale-warning: #fbe48d;
129
- --k-shape-pale-warning-hover: #f2d585;
130
- --k-shape-pale-warning-pressed: #e9d6a5;
131
- --k-shape-soft-accent: #6cd984;
132
- --k-shape-soft-accent-hover: #4ecf70;
133
- --k-shape-soft-accent-pressed: #58be6f;
134
- --k-shape-soft-brand: #6cd984;
135
- --k-shape-soft-brand-hover: #4ecf70;
136
- --k-shape-soft-brand-pressed: #58be6f;
137
- --k-shape-soft-error: #fea09c;
138
- --k-shape-soft-error-hover: #f98e88;
139
- --k-shape-soft-error-pressed: #e8847c;
140
- --k-shape-soft-neutral-alpha: rgba(0, 0, 0, 0.16);
141
- --k-shape-soft-neutral-alpha-hover: rgba(0, 0, 0, 0.24);
142
- --k-shape-soft-neutral-alpha-pressed: rgba(0, 0, 0, 0.32);
143
- --k-shape-soft-success: #6cd984;
144
- --k-shape-soft-success-hover: #4ecf70;
145
- --k-shape-soft-success-pressed: #58be6f;
146
- --k-shape-soft-warning: #fcd35d;
147
- --k-shape-soft-warning-hover: #f4c359;
148
- --k-shape-soft-warning-pressed: #e5b566;
149
- --k-shape-inverted-backless-hover: rgba(255, 255, 255, 0.06);
150
- --k-shape-inverted-backless-pressed: rgba(255, 255, 255, 0.04);
151
- --k-shape-inverted-disabled: rgba(255, 255, 255, 0.06);
152
- --k-shape-inverted-neutral-faint-alpha: rgba(255, 255, 255, 0.06);
153
- --k-shape-inverted-neutral-faint-alpha-hover: rgba(255, 255, 255, 0.08);
154
- --k-shape-inverted-neutral-faint-alpha-pressed: rgba(255, 255, 255, 0.04);
155
- --k-shape-inverted-neutral-heavy: #fff;
156
- --k-shape-inverted-neutral-heavy-hover: rgba(255, 255, 255, 0.88);
157
- --k-shape-inverted-neutral-heavy-pressed: rgba(255, 255, 255, 0.72);
158
- --k-shape-inverted-neutral-pale-alpha: rgba(255, 255, 255, 0.08);
159
- --k-shape-inverted-neutral-pale-alpha-hover: rgba(255, 255, 255, 0.12);
160
- --k-shape-inverted-neutral-pale-alpha-pressed: rgba(255, 255, 255, 0.06);
161
- --k-shape-inverted-neutral-soft-alpha: rgba(255, 255, 255, 0.16);
162
- --k-shape-inverted-neutral-soft-alpha-hover: rgba(255, 255, 255, 0.24);
163
- --k-shape-inverted-neutral-soft-alpha-pressed: rgba(255, 255, 255, 0.12);
164
- --k-shape-const-backless-black-hover: rgba(0, 0, 0, 0.12);
165
- --k-shape-const-backless-black-pressed: rgba(0, 0, 0, 0.16);
166
- --k-shape-const-backless-white-hover: rgba(255, 255, 255, 0.12);
167
- --k-shape-const-backless-white-pressed: rgba(255, 255, 255, 0.06);
168
- --k-shape-const-disabled-black: rgba(0, 0, 0, 0.06);
169
- --k-shape-const-disabled-white: rgba(255, 255, 255, 0.06);
170
- --k-shape-const-faint-black: rgba(0, 0, 0, 0.12);
171
- --k-shape-const-faint-black-hover: rgba(0, 0, 0, 0.16);
172
- --k-shape-const-faint-black-pressed: rgba(0, 0, 0, 0.24);
173
- --k-shape-const-faint-white: rgba(255, 255, 255, 0.12);
174
- --k-shape-const-faint-white-hover: rgba(255, 255, 255, 0.16);
175
- --k-shape-const-faint-white-pressed: rgba(255, 255, 255, 0.08);
176
- --k-shape-const-heavy-black: rgba(0, 0, 0, 0.8);
177
- --k-shape-const-heavy-black-hover: rgba(0, 0, 0, 0.88);
178
- --k-shape-const-heavy-black-pressed: rgba(0, 0, 0, 0.64);
179
- --k-shape-const-heavy-white: rgba(255, 255, 255, 0.96);
180
- --k-shape-const-heavy-white-hover: #fff;
181
- --k-shape-const-heavy-white-pressed: rgba(255, 255, 255, 0.64);
182
- --k-shape-const-pale-black: rgba(0, 0, 0, 0.16);
183
- --k-shape-const-pale-black-hover: rgba(0, 0, 0, 0.24);
184
- --k-shape-const-pale-black-pressed: rgba(0, 0, 0, 0.32);
185
- --k-shape-const-pale-white: rgba(255, 255, 255, 0.16);
186
- --k-shape-const-pale-white-hover: rgba(255, 255, 255, 0.24);
187
- --k-shape-const-pale-white-pressed: rgba(255, 255, 255, 0.12);
188
- --k-shape-const-promo: #00413e;
189
- --k-shape-const-soft-black: rgba(0, 0, 0, 0.24);
190
- --k-shape-const-soft-black-hover: rgba(0, 0, 0, 0.32);
191
- --k-shape-const-soft-black-pressed: rgba(0, 0, 0, 0.4);
192
- --k-shape-const-soft-white: rgba(255, 255, 255, 0.24);
193
- --k-shape-const-soft-white-hover: rgba(255, 255, 255, 0.32);
194
- --k-shape-const-soft-white-pressed: rgba(255, 255, 255, 0.24);
195
- --k-line-accent-bold: #26ad50;
196
- --k-line-accent-bold-hover: #00a044;
197
- --k-line-accent-bold-pressed: #289046;
198
- --k-line-accent-pale: #a7ebb2;
199
- --k-line-accent-pale-hover: #89e39a;
200
- --k-line-accent-pale-pressed: #89d296;
201
- --k-line-accent-soft: #71c882;
202
- --k-line-accent-soft-hover: #009b41;
203
- --k-line-accent-soft-pressed: #3a6a43;
204
- --k-line-brand-original: #26ad50;
205
- --k-line-error-bold: #d6192a;
206
- --k-line-error-bold-hover: #f63b40;
207
- --k-line-error-bold-pressed: #a74541;
208
- --k-line-neutral-faint: rgba(0, 0, 0, 0.08);
209
- --k-line-neutral-pale: rgba(0, 0, 0, 0.16);
210
- --k-line-neutral-pale-hover: rgba(0, 0, 0, 0.24);
211
- --k-line-neutral-pale-pressed: rgba(0, 0, 0, 0.4);
212
- --k-line-on-accent-bold-faint: rgba(255, 255, 255, 0.12);
213
- --k-line-on-accent-bold-pale: rgba(255, 255, 255, 0.24);
214
- --k-line-on-brand-original-faint: rgba(255, 255, 255, 0.12);
215
- --k-line-on-brand-original-pale: rgba(255, 255, 255, 0.24);
216
- --k-line-success-bold: #008d3a;
217
- --k-line-success-bold-hover: #00b74e;
218
- --k-line-success-bold-pressed: #458552;
219
- --k-line-warning-bold: #f8ae00;
220
- --k-line-warning-bold-hover: #db9400;
221
- --k-line-warning-bold-pressed: #bd8f4d;
222
- --k-line-inverted-accent-bold: #26ad50;
223
- --k-line-inverted-accent-bold-hover: #36ba5d;
224
- --k-line-inverted-accent-bold-pressed: #379c52;
225
- --k-line-inverted-accent-pale: #345e3c;
226
- --k-line-inverted-accent-pale-hover: #3a6a43;
227
- --k-line-inverted-accent-pale-pressed: #2d5134;
228
- --k-line-inverted-accent-soft: #3a6a43;
229
- --k-line-inverted-accent-soft-hover: #4ede76;
230
- --k-line-inverted-accent-soft-pressed: #2ca651;
231
- --k-line-inverted-error-bold: #e62b34;
232
- --k-line-inverted-error-bold-hover: #ff5352;
233
- --k-line-inverted-error-bold-pressed: #ba4b47;
234
- --k-line-inverted-neutral-faint: rgba(255, 255, 255, 0.08);
235
- --k-line-inverted-neutral-pale: rgba(255, 255, 255, 0.16);
236
- --k-line-inverted-neutral-pale-hover: rgba(255, 255, 255, 0.24);
237
- --k-line-inverted-neutral-pale-pressed: rgba(255, 255, 255, 0.12);
238
- --k-line-inverted-success-bold: #009b41;
239
- --k-line-inverted-success-bold-hover: #00b74e;
240
- --k-line-inverted-success-bold-pressed: #458552;
241
- --k-line-inverted-warning-bold: #f8ae00;
242
- --k-line-inverted-warning-bold-hover: #ffbf0b;
243
- --k-line-inverted-warning-bold-pressed: #cc9a51;
244
- --k-line-const-faint-black: rgba(0, 0, 0, 0.12);
245
- --k-line-const-faint-white: rgba(255, 255, 255, 0.12);
246
- --k-line-const-pale-black: rgba(0, 0, 0, 0.24);
247
- --k-line-const-pale-black-hover: rgba(0, 0, 0, 0.32);
248
- --k-line-const-pale-black-pressed: rgba(0, 0, 0, 0.16);
249
- --k-line-const-pale-white: rgba(255, 255, 255, 0.24);
250
- --k-line-const-pale-white-hover: rgba(255, 255, 255, 0.32);
251
- --k-line-const-pale-white-pressed: rgba(255, 255, 255, 0.16);
252
- --k-surface-base: #fff;
253
- --k-surface-high: #fff;
254
- --k-surface-low: #f2f2f2;
255
- --k-surface-modal-backdrop: rgba(0, 0, 0, 0.24);
256
- --k-illustration-black: #0d0d0d;
257
- --k-illustration-brand: #26ad50;
258
- --k-illustration-complement: #00413e;
259
- --k-illustration-inverted-neutral: #fff;
260
- --k-illustration-neutral: #000;
261
- --k-illustration-on-brand: rgba(255, 255, 255, 1);
262
- --k-illustration-on-complement: #fff;
263
- --k-illustration-promo: #00413e;
264
- --k-illustration-symbol: #6cd984;
265
- --k-illustration-white: #fff;
266
- --k-customizable-bold-black: #696969;
267
- --k-customizable-bold-blue: #369bff;
268
- --k-customizable-bold-blue-deep: #6592ff;
269
- --k-customizable-bold-gray: #a4a4a4;
270
- --k-customizable-bold-green: #00b74e;
271
- --k-customizable-bold-mint: #01b197;
272
- --k-customizable-bold-orange: #f56600;
273
- --k-customizable-bold-purple: #cf60ec;
274
- --k-customizable-bold-red: #ff5352;
275
- --k-customizable-bold-violet: #a17bff;
276
- --k-customizable-bold-yellow: #dfa700;
277
- --k-customizable-faint-black: #e4e4e4;
278
- --k-customizable-faint-blue: #e2f5ff;
279
- --k-customizable-faint-blue-deep: #e8f3ff;
280
- --k-customizable-faint-gray: #f2f2f2;
281
- --k-customizable-faint-green: #d4ffda;
282
- --k-customizable-faint-mint: #c8fff7;
283
- --k-customizable-faint-orange: #ffeee1;
284
- --k-customizable-faint-purple: #ffeaff;
285
- --k-customizable-faint-red: #ffedef;
286
- --k-customizable-faint-violet: #f1f0ff;
287
- --k-customizable-faint-yellow: #faf5be;
288
- --k-customizable-heavy-black: #3d3d3d;
289
- --k-customizable-heavy-blue: #005dae;
290
- --k-customizable-heavy-blue-deep: #234ece;
291
- --k-customizable-heavy-gray: #747474;
292
- --k-customizable-heavy-green: #00722d;
293
- --k-customizable-heavy-mint: #027b68;
294
- --k-customizable-heavy-orange: #9a3d00;
295
- --k-customizable-heavy-purple: #8b22a4;
296
- --k-customizable-heavy-red: #c50220;
297
- --k-customizable-heavy-violet: #6936c2;
298
- --k-customizable-heavy-yellow: #966c01;
299
- --k-customizable-pale-black: #d7d7d7;
300
- --k-customizable-pale-blue: #c7ebff;
301
- --k-customizable-pale-blue-deep: #d2e7ff;
302
- --k-customizable-pale-gray: #e4e4e4;
303
- --k-customizable-pale-green: #b0fabd;
304
- --k-customizable-pale-mint: #88fdeb;
305
- --k-customizable-pale-orange: #ffddc6;
306
- --k-customizable-pale-purple: #fbd6ff;
307
- --k-customizable-pale-red: #ffdadd;
308
- --k-customizable-pale-violet: #e4e0ff;
309
- --k-customizable-pale-yellow: #f5e78f;
310
- --k-customizable-soft-black: #b1b1b1;
311
- --k-customizable-soft-blue: #80c5ff;
312
- --k-customizable-soft-blue-deep: #99bfff;
313
- --k-customizable-soft-gray: #d7d7d7;
314
- --k-customizable-soft-green: #6cd984;
315
- --k-customizable-soft-mint: #4fe6cc;
316
- --k-customizable-soft-orange: #ffa56f;
317
- --k-customizable-soft-purple: #ea9aff;
318
- --k-customizable-soft-red: #ffa09b;
319
- --k-customizable-soft-violet: #c1b0ff;
320
- --k-customizable-soft-yellow: #f6d65e;
1
+ [data-k-color-brand='green'][data-k-color-accent='brand'] {
2
+ --k-color-text-accent-heavy: #007f34;
3
+ --k-color-text-accent-heavy-hover: #009b41;
4
+ --k-color-text-accent-heavy-pressed: #3a6a43;
5
+ --k-color-text-error-heavy: #c50220;
6
+ --k-color-text-error-heavy-hover: #e62b34;
7
+ --k-color-text-error-heavy-pressed: #943e3b;
8
+ --k-color-text-inverted-accent-heavy: #00c655;
9
+ --k-color-text-inverted-accent-heavy-hover: #4ede76;
10
+ --k-color-text-inverted-accent-heavy-pressed: #4fa161;
11
+ --k-color-text-inverted-error-heavy: #ff5352;
12
+ --k-color-text-inverted-error-heavy-hover: #ff726b;
13
+ --k-color-text-inverted-error-heavy-pressed: #dd5d58;
14
+ --k-color-text-inverted-neutral-faint: rgba(255, 255, 255, 0.4);
15
+ --k-color-text-inverted-neutral-heavy: rgba(255, 255, 255, 0.96);
16
+ --k-color-text-inverted-neutral-pale: rgba(255, 255, 255, 0.48);
17
+ --k-color-text-inverted-neutral-soft: rgba(255, 255, 255, 0.64);
18
+ --k-color-text-inverted-success-heavy: #00c655;
19
+ --k-color-text-inverted-success-heavy-hover: #4ede76;
20
+ --k-color-text-inverted-success-heavy-pressed: #4fa161;
21
+ --k-color-text-inverted-warning-heavy: #f8ae00;
22
+ --k-color-text-inverted-warning-heavy-hover: #ffbf0b;
23
+ --k-color-text-inverted-warning-heavy-pressed: #cc9a51;
24
+ --k-color-text-logo: #26ad50;
25
+ --k-color-text-neutral-faint: rgba(0, 0, 0, 0.32);
26
+ --k-color-text-neutral-heavy: rgba(0, 0, 0, 0.88);
27
+ --k-color-text-neutral-pale: rgba(0, 0, 0, 0.4);
28
+ --k-color-text-neutral-soft: rgba(0, 0, 0, 0.56);
29
+ --k-color-text-success-heavy: #007f34;
30
+ --k-color-text-success-heavy-hover: #009b41;
31
+ --k-color-text-success-heavy-pressed: #3a6a43;
32
+ --k-color-text-warning-heavy: #bc7d00;
33
+ --k-color-text-warning-heavy-hover: #db9400;
34
+ --k-color-text-warning-heavy-pressed: #a37736;
35
+ --k-color-text-const-faint-black: rgba(0, 0, 0, 0.32);
36
+ --k-color-text-const-faint-white: rgba(255, 255, 255, 0.4);
37
+ --k-color-text-const-heavy-black: rgba(0, 0, 0, 0.88);
38
+ --k-color-text-const-heavy-white: rgba(255, 255, 255, 0.96);
39
+ --k-color-text-const-pale-black: rgba(0, 0, 0, 0.4);
40
+ --k-color-text-const-pale-white: rgba(255, 255, 255, 0.48);
41
+ --k-color-text-const-soft-black: rgba(0, 0, 0, 0.56);
42
+ --k-color-text-const-soft-white: rgba(255, 255, 255, 0.64);
43
+ --k-color-text-on-accent-bold-faint: rgba(255, 255, 255, 0.4);
44
+ --k-color-text-on-accent-bold-heavy: rgba(255, 255, 255, 0.96);
45
+ --k-color-text-on-accent-bold-pale: rgba(255, 255, 255, 0.48);
46
+ --k-color-text-on-accent-bold-soft: rgba(255, 255, 255, 0.64);
47
+ --k-color-text-on-brand-original-faint: rgba(255, 255, 255, 0.4);
48
+ --k-color-text-on-brand-original-heavy: rgba(255, 255, 255, 0.96);
49
+ --k-color-text-on-brand-original-pale: rgba(255, 255, 255, 0.48);
50
+ --k-color-text-on-brand-original-soft: rgba(255, 255, 255, 0.64);
51
+ --k-color-shape-bold-accent: #26ad50;
52
+ --k-color-shape-bold-accent-hover: #00a044;
53
+ --k-color-shape-bold-accent-pressed: #289046;
54
+ --k-color-shape-bold-brand-original: #26ad50;
55
+ --k-color-shape-bold-brand-original-hover: #00a044;
56
+ --k-color-shape-bold-brand-original-pressed: #289046;
57
+ --k-color-shape-bold-error: #f63b40;
58
+ --k-color-shape-bold-error-hover: #e62b34;
59
+ --k-color-shape-bold-error-pressed: #cd3235;
60
+ --k-color-shape-bold-neutral: #525252;
61
+ --k-color-shape-bold-neutral-hover: #3d3d3d;
62
+ --k-color-shape-bold-neutral-pressed: rgba(0, 0, 0, 0.56);
63
+ --k-color-shape-bold-success: #00a948;
64
+ --k-color-shape-bold-success-hover: #009b41;
65
+ --k-color-shape-bold-success-pressed: #178b3f;
66
+ --k-color-shape-bold-warning: #ffbf0b;
67
+ --k-color-shape-bold-warning-hover: #f8ae00;
68
+ --k-color-shape-bold-warning-pressed: #e5a331;
69
+ --k-color-shape-faint-accent: #defbe2;
70
+ --k-color-shape-faint-accent-hover: #c3f3ca;
71
+ --k-color-shape-faint-accent-pressed: #bae4c0;
72
+ --k-color-shape-faint-brand: #d4ffda;
73
+ --k-color-shape-faint-brand-hover: #c3f3ca;
74
+ --k-color-shape-faint-brand-pressed: #d1edd5;
75
+ --k-color-shape-faint-error: #ffedef;
76
+ --k-color-shape-faint-error-hover: #ffdadd;
77
+ --k-color-shape-faint-error-pressed: #f5dee0;
78
+ --k-color-shape-faint-neutral-alpha: rgba(0, 0, 0, 0.06);
79
+ --k-color-shape-faint-neutral-alpha-hover: rgba(0, 0, 0, 0.08);
80
+ --k-color-shape-faint-neutral-alpha-pressed: rgba(0, 0, 0, 0.12);
81
+ --k-color-shape-faint-success: #defbe2;
82
+ --k-color-shape-faint-success-hover: #c3f3ca;
83
+ --k-color-shape-faint-success-pressed: #d1edd5;
84
+ --k-color-shape-faint-warning: #fff3bd;
85
+ --k-color-shape-faint-warning-hover: #f4e5ad;
86
+ --k-color-shape-faint-warning-pressed: #ede5c4;
87
+ --k-color-shape-heavy-error: #6b1f1e;
88
+ --k-color-shape-heavy-neutral: #292929;
89
+ --k-color-shape-heavy-success: #0b4a1f;
90
+ --k-color-shape-heavy-warning: #543600;
91
+ --k-color-shape-other-accent-bold-disabled: rgba(0, 0, 0, 0.32);
92
+ --k-color-shape-other-backless-hover: rgba(0, 0, 0, 0.06);
93
+ --k-color-shape-other-backless-pressed: rgba(0, 0, 0, 0.08);
94
+ --k-color-shape-other-base: #fff;
95
+ --k-color-shape-other-base-hover: #f2f2f2;
96
+ --k-color-shape-other-base-pressed: #e4e4e4;
97
+ --k-color-shape-other-disabled: rgba(0, 0, 0, 0.06);
98
+ --k-color-shape-other-field: #fff;
99
+ --k-color-shape-other-field-hover: #f2f2f2;
100
+ --k-color-shape-other-field-pressed: #e4e4e4;
101
+ --k-color-shape-other-low: rgba(0, 0, 0, 0.06);
102
+ --k-color-shape-other-low-hover: rgba(0, 0, 0, 0.08);
103
+ --k-color-shape-other-low-pressed: rgba(0, 0, 0, 0.12);
104
+ --k-color-shape-other-neutral-faint-solid: #f2f2f2;
105
+ --k-color-shape-other-neutral-faint-solid-hover: #e4e4e4;
106
+ --k-color-shape-other-neutral-faint-solid-pressed: #d7d7d7;
107
+ --k-color-shape-other-neutral-pale-solid: #e4e4e4;
108
+ --k-color-shape-other-neutral-pale-solid-hover: #d7d7d7;
109
+ --k-color-shape-other-neutral-pale-solid-pressed: #cacaca;
110
+ --k-color-shape-other-neutral-soft-solid: #cacaca;
111
+ --k-color-shape-other-neutral-soft-solid-hover: #bebebe;
112
+ --k-color-shape-other-neutral-soft-solid-pressed: #b1b1b1;
113
+ --k-color-shape-pale-accent: #b0fabd;
114
+ --k-color-shape-pale-accent-hover: #a7ebb2;
115
+ --k-color-shape-pale-accent-pressed: #a1dbab;
116
+ --k-color-shape-pale-brand: #b0fabd;
117
+ --k-color-shape-pale-brand-hover: #a7ebb2;
118
+ --k-color-shape-pale-brand-pressed: #bae4c0;
119
+ --k-color-shape-pale-error: #ffdadd;
120
+ --k-color-shape-pale-error-hover: #ffc7c7;
121
+ --k-color-shape-pale-error-pressed: #f2cdcd;
122
+ --k-color-shape-pale-neutral-alpha: rgba(0, 0, 0, 0.08);
123
+ --k-color-shape-pale-neutral-alpha-hover: rgba(0, 0, 0, 0.12);
124
+ --k-color-shape-pale-neutral-alpha-pressed: rgba(0, 0, 0, 0.16);
125
+ --k-color-shape-pale-success: #c3f3ca;
126
+ --k-color-shape-pale-success-hover: #a7ebb2;
127
+ --k-color-shape-pale-success-pressed: #bae4c0;
128
+ --k-color-shape-pale-warning: #fbe48d;
129
+ --k-color-shape-pale-warning-hover: #f2d585;
130
+ --k-color-shape-pale-warning-pressed: #e9d6a5;
131
+ --k-color-shape-soft-accent: #6cd984;
132
+ --k-color-shape-soft-accent-hover: #4ecf70;
133
+ --k-color-shape-soft-accent-pressed: #58be6f;
134
+ --k-color-shape-soft-brand: #6cd984;
135
+ --k-color-shape-soft-brand-hover: #4ecf70;
136
+ --k-color-shape-soft-brand-pressed: #58be6f;
137
+ --k-color-shape-soft-error: #fea09c;
138
+ --k-color-shape-soft-error-hover: #f98e88;
139
+ --k-color-shape-soft-error-pressed: #e8847c;
140
+ --k-color-shape-soft-neutral-alpha: rgba(0, 0, 0, 0.16);
141
+ --k-color-shape-soft-neutral-alpha-hover: rgba(0, 0, 0, 0.24);
142
+ --k-color-shape-soft-neutral-alpha-pressed: rgba(0, 0, 0, 0.32);
143
+ --k-color-shape-soft-success: #6cd984;
144
+ --k-color-shape-soft-success-hover: #4ecf70;
145
+ --k-color-shape-soft-success-pressed: #58be6f;
146
+ --k-color-shape-soft-warning: #fcd35d;
147
+ --k-color-shape-soft-warning-hover: #f4c359;
148
+ --k-color-shape-soft-warning-pressed: #e5b566;
149
+ --k-color-shape-inverted-backless-hover: rgba(255, 255, 255, 0.06);
150
+ --k-color-shape-inverted-backless-pressed: rgba(255, 255, 255, 0.04);
151
+ --k-color-shape-inverted-disabled: rgba(255, 255, 255, 0.06);
152
+ --k-color-shape-inverted-neutral-faint-alpha: rgba(255, 255, 255, 0.06);
153
+ --k-color-shape-inverted-neutral-faint-alpha-hover: rgba(255, 255, 255, 0.08);
154
+ --k-color-shape-inverted-neutral-faint-alpha-pressed: rgba(255, 255, 255, 0.04);
155
+ --k-color-shape-inverted-neutral-heavy: #fff;
156
+ --k-color-shape-inverted-neutral-heavy-hover: rgba(255, 255, 255, 0.88);
157
+ --k-color-shape-inverted-neutral-heavy-pressed: rgba(255, 255, 255, 0.72);
158
+ --k-color-shape-inverted-neutral-pale-alpha: rgba(255, 255, 255, 0.08);
159
+ --k-color-shape-inverted-neutral-pale-alpha-hover: rgba(255, 255, 255, 0.12);
160
+ --k-color-shape-inverted-neutral-pale-alpha-pressed: rgba(255, 255, 255, 0.06);
161
+ --k-color-shape-inverted-neutral-soft-alpha: rgba(255, 255, 255, 0.16);
162
+ --k-color-shape-inverted-neutral-soft-alpha-hover: rgba(255, 255, 255, 0.24);
163
+ --k-color-shape-inverted-neutral-soft-alpha-pressed: rgba(255, 255, 255, 0.12);
164
+ --k-color-shape-const-backless-black-hover: rgba(0, 0, 0, 0.12);
165
+ --k-color-shape-const-backless-black-pressed: rgba(0, 0, 0, 0.16);
166
+ --k-color-shape-const-backless-white-hover: rgba(255, 255, 255, 0.12);
167
+ --k-color-shape-const-backless-white-pressed: rgba(255, 255, 255, 0.06);
168
+ --k-color-shape-const-disabled-black: rgba(0, 0, 0, 0.06);
169
+ --k-color-shape-const-disabled-white: rgba(255, 255, 255, 0.06);
170
+ --k-color-shape-const-faint-black: rgba(0, 0, 0, 0.12);
171
+ --k-color-shape-const-faint-black-hover: rgba(0, 0, 0, 0.16);
172
+ --k-color-shape-const-faint-black-pressed: rgba(0, 0, 0, 0.24);
173
+ --k-color-shape-const-faint-white: rgba(255, 255, 255, 0.12);
174
+ --k-color-shape-const-faint-white-hover: rgba(255, 255, 255, 0.16);
175
+ --k-color-shape-const-faint-white-pressed: rgba(255, 255, 255, 0.08);
176
+ --k-color-shape-const-heavy-black: rgba(0, 0, 0, 0.8);
177
+ --k-color-shape-const-heavy-black-hover: rgba(0, 0, 0, 0.88);
178
+ --k-color-shape-const-heavy-black-pressed: rgba(0, 0, 0, 0.64);
179
+ --k-color-shape-const-heavy-white: rgba(255, 255, 255, 0.96);
180
+ --k-color-shape-const-heavy-white-hover: #fff;
181
+ --k-color-shape-const-heavy-white-pressed: rgba(255, 255, 255, 0.64);
182
+ --k-color-shape-const-pale-black: rgba(0, 0, 0, 0.16);
183
+ --k-color-shape-const-pale-black-hover: rgba(0, 0, 0, 0.24);
184
+ --k-color-shape-const-pale-black-pressed: rgba(0, 0, 0, 0.32);
185
+ --k-color-shape-const-pale-white: rgba(255, 255, 255, 0.16);
186
+ --k-color-shape-const-pale-white-hover: rgba(255, 255, 255, 0.24);
187
+ --k-color-shape-const-pale-white-pressed: rgba(255, 255, 255, 0.12);
188
+ --k-color-shape-const-promo: #00413e;
189
+ --k-color-shape-const-soft-black: rgba(0, 0, 0, 0.24);
190
+ --k-color-shape-const-soft-black-hover: rgba(0, 0, 0, 0.32);
191
+ --k-color-shape-const-soft-black-pressed: rgba(0, 0, 0, 0.4);
192
+ --k-color-shape-const-soft-white: rgba(255, 255, 255, 0.24);
193
+ --k-color-shape-const-soft-white-hover: rgba(255, 255, 255, 0.32);
194
+ --k-color-shape-const-soft-white-pressed: rgba(255, 255, 255, 0.24);
195
+ --k-color-line-accent-bold: #26ad50;
196
+ --k-color-line-accent-bold-hover: #00a044;
197
+ --k-color-line-accent-bold-pressed: #289046;
198
+ --k-color-line-accent-pale: #a7ebb2;
199
+ --k-color-line-accent-pale-hover: #89e39a;
200
+ --k-color-line-accent-pale-pressed: #89d296;
201
+ --k-color-line-accent-soft: #71c882;
202
+ --k-color-line-accent-soft-hover: #009b41;
203
+ --k-color-line-accent-soft-pressed: #3a6a43;
204
+ --k-color-line-brand-original: #26ad50;
205
+ --k-color-line-error-bold: #d6192a;
206
+ --k-color-line-error-bold-hover: #f63b40;
207
+ --k-color-line-error-bold-pressed: #a74541;
208
+ --k-color-line-neutral-faint: rgba(0, 0, 0, 0.08);
209
+ --k-color-line-neutral-pale: rgba(0, 0, 0, 0.16);
210
+ --k-color-line-neutral-pale-hover: rgba(0, 0, 0, 0.24);
211
+ --k-color-line-neutral-pale-pressed: rgba(0, 0, 0, 0.4);
212
+ --k-color-line-on-accent-bold-faint: rgba(255, 255, 255, 0.12);
213
+ --k-color-line-on-accent-bold-pale: rgba(255, 255, 255, 0.24);
214
+ --k-color-line-on-brand-original-faint: rgba(255, 255, 255, 0.12);
215
+ --k-color-line-on-brand-original-pale: rgba(255, 255, 255, 0.24);
216
+ --k-color-line-success-bold: #008d3a;
217
+ --k-color-line-success-bold-hover: #00b74e;
218
+ --k-color-line-success-bold-pressed: #458552;
219
+ --k-color-line-warning-bold: #f8ae00;
220
+ --k-color-line-warning-bold-hover: #db9400;
221
+ --k-color-line-warning-bold-pressed: #bd8f4d;
222
+ --k-color-line-inverted-accent-bold: #26ad50;
223
+ --k-color-line-inverted-accent-bold-hover: #36ba5d;
224
+ --k-color-line-inverted-accent-bold-pressed: #379c52;
225
+ --k-color-line-inverted-accent-pale: #345e3c;
226
+ --k-color-line-inverted-accent-pale-hover: #3a6a43;
227
+ --k-color-line-inverted-accent-pale-pressed: #2d5134;
228
+ --k-color-line-inverted-accent-soft: #3a6a43;
229
+ --k-color-line-inverted-accent-soft-hover: #4ede76;
230
+ --k-color-line-inverted-accent-soft-pressed: #2ca651;
231
+ --k-color-line-inverted-error-bold: #e62b34;
232
+ --k-color-line-inverted-error-bold-hover: #ff5352;
233
+ --k-color-line-inverted-error-bold-pressed: #ba4b47;
234
+ --k-color-line-inverted-neutral-faint: rgba(255, 255, 255, 0.08);
235
+ --k-color-line-inverted-neutral-pale: rgba(255, 255, 255, 0.16);
236
+ --k-color-line-inverted-neutral-pale-hover: rgba(255, 255, 255, 0.24);
237
+ --k-color-line-inverted-neutral-pale-pressed: rgba(255, 255, 255, 0.12);
238
+ --k-color-line-inverted-success-bold: #009b41;
239
+ --k-color-line-inverted-success-bold-hover: #00b74e;
240
+ --k-color-line-inverted-success-bold-pressed: #458552;
241
+ --k-color-line-inverted-warning-bold: #f8ae00;
242
+ --k-color-line-inverted-warning-bold-hover: #ffbf0b;
243
+ --k-color-line-inverted-warning-bold-pressed: #cc9a51;
244
+ --k-color-line-const-faint-black: rgba(0, 0, 0, 0.12);
245
+ --k-color-line-const-faint-white: rgba(255, 255, 255, 0.12);
246
+ --k-color-line-const-pale-black: rgba(0, 0, 0, 0.24);
247
+ --k-color-line-const-pale-black-hover: rgba(0, 0, 0, 0.32);
248
+ --k-color-line-const-pale-black-pressed: rgba(0, 0, 0, 0.16);
249
+ --k-color-line-const-pale-white: rgba(255, 255, 255, 0.24);
250
+ --k-color-line-const-pale-white-hover: rgba(255, 255, 255, 0.32);
251
+ --k-color-line-const-pale-white-pressed: rgba(255, 255, 255, 0.16);
252
+ --k-color-surface-base: #fff;
253
+ --k-color-surface-high: #fff;
254
+ --k-color-surface-low: #f2f2f2;
255
+ --k-color-surface-modal-backdrop: rgba(0, 0, 0, 0.24);
256
+ --k-color-illustration-black: #0d0d0d;
257
+ --k-color-illustration-brand: #26ad50;
258
+ --k-color-illustration-complement: #00413e;
259
+ --k-color-illustration-inverted-neutral: #fff;
260
+ --k-color-illustration-neutral: #000;
261
+ --k-color-illustration-on-brand: rgba(255, 255, 255, 1);
262
+ --k-color-illustration-on-complement: #fff;
263
+ --k-color-illustration-promo: #00413e;
264
+ --k-color-illustration-symbol: #6cd984;
265
+ --k-color-illustration-white: #fff;
266
+ --k-color-customizable-bold-black: #696969;
267
+ --k-color-customizable-bold-blue: #369bff;
268
+ --k-color-customizable-bold-blue-deep: #6592ff;
269
+ --k-color-customizable-bold-gray: #a4a4a4;
270
+ --k-color-customizable-bold-green: #00b74e;
271
+ --k-color-customizable-bold-mint: #01b197;
272
+ --k-color-customizable-bold-orange: #f56600;
273
+ --k-color-customizable-bold-purple: #cf60ec;
274
+ --k-color-customizable-bold-red: #ff5352;
275
+ --k-color-customizable-bold-violet: #a17bff;
276
+ --k-color-customizable-bold-yellow: #dfa700;
277
+ --k-color-customizable-faint-black: #e4e4e4;
278
+ --k-color-customizable-faint-blue: #e2f5ff;
279
+ --k-color-customizable-faint-blue-deep: #e8f3ff;
280
+ --k-color-customizable-faint-gray: #f2f2f2;
281
+ --k-color-customizable-faint-green: #d4ffda;
282
+ --k-color-customizable-faint-mint: #c8fff7;
283
+ --k-color-customizable-faint-orange: #ffeee1;
284
+ --k-color-customizable-faint-purple: #ffeaff;
285
+ --k-color-customizable-faint-red: #ffedef;
286
+ --k-color-customizable-faint-violet: #f1f0ff;
287
+ --k-color-customizable-faint-yellow: #faf5be;
288
+ --k-color-customizable-heavy-black: #3d3d3d;
289
+ --k-color-customizable-heavy-blue: #005dae;
290
+ --k-color-customizable-heavy-blue-deep: #234ece;
291
+ --k-color-customizable-heavy-gray: #747474;
292
+ --k-color-customizable-heavy-green: #00722d;
293
+ --k-color-customizable-heavy-mint: #027b68;
294
+ --k-color-customizable-heavy-orange: #9a3d00;
295
+ --k-color-customizable-heavy-purple: #8b22a4;
296
+ --k-color-customizable-heavy-red: #c50220;
297
+ --k-color-customizable-heavy-violet: #6936c2;
298
+ --k-color-customizable-heavy-yellow: #966c01;
299
+ --k-color-customizable-pale-black: #d7d7d7;
300
+ --k-color-customizable-pale-blue: #c7ebff;
301
+ --k-color-customizable-pale-blue-deep: #d2e7ff;
302
+ --k-color-customizable-pale-gray: #e4e4e4;
303
+ --k-color-customizable-pale-green: #b0fabd;
304
+ --k-color-customizable-pale-mint: #88fdeb;
305
+ --k-color-customizable-pale-orange: #ffddc6;
306
+ --k-color-customizable-pale-purple: #fbd6ff;
307
+ --k-color-customizable-pale-red: #ffdadd;
308
+ --k-color-customizable-pale-violet: #e4e0ff;
309
+ --k-color-customizable-pale-yellow: #f5e78f;
310
+ --k-color-customizable-soft-black: #b1b1b1;
311
+ --k-color-customizable-soft-blue: #80c5ff;
312
+ --k-color-customizable-soft-blue-deep: #99bfff;
313
+ --k-color-customizable-soft-gray: #d7d7d7;
314
+ --k-color-customizable-soft-green: #6cd984;
315
+ --k-color-customizable-soft-mint: #4fe6cc;
316
+ --k-color-customizable-soft-orange: #ffa56f;
317
+ --k-color-customizable-soft-purple: #ea9aff;
318
+ --k-color-customizable-soft-red: #ffa09b;
319
+ --k-color-customizable-soft-violet: #c1b0ff;
320
+ --k-color-customizable-soft-yellow: #f6d65e;
321
321
  }
322
322
 
323
- [data-k-brand='green'][data-k-accent='brand'][data-k-theme='dark'] {
324
- --k-text-accent-heavy: #00c655;
325
- --k-text-accent-heavy-hover: #4ede76;
326
- --k-text-accent-heavy-pressed: #4fa161;
327
- --k-text-disabled: rgba(255, 255, 255, 0.4);
328
- --k-text-error-heavy: #ff5352;
329
- --k-text-error-heavy-hover: #ff726b;
330
- --k-text-error-heavy-pressed: #dd5d58;
331
- --k-text-inverted-accent-heavy: #007f34;
332
- --k-text-inverted-accent-heavy-hover: #009b41;
333
- --k-text-inverted-accent-heavy-pressed: #3a6a43;
334
- --k-text-inverted-disabled: rgba(0, 0, 0, 0.32);
335
- --k-text-inverted-error-heavy: #c50220;
336
- --k-text-inverted-error-heavy-hover: #e62b34;
337
- --k-text-inverted-error-heavy-pressed: #943e3b;
338
- --k-text-inverted-neutral-heavy: rgba(0, 0, 0, 0.88);
339
- --k-text-inverted-neutral-pale: rgba(0, 0, 0, 0.4);
340
- --k-text-inverted-neutral-soft: rgba(0, 0, 0, 0.56);
341
- --k-text-inverted-success-heavy: #007f34;
342
- --k-text-inverted-success-heavy-hover: #009b41;
343
- --k-text-inverted-success-heavy-pressed: #3a6a43;
344
- --k-text-inverted-warning-heavy: #bc7d00;
345
- --k-text-inverted-warning-heavy-hover: #db9400;
346
- --k-text-inverted-warning-heavy-pressed: #956c30;
347
- --k-text-logo: #22ad51;
348
- --k-text-neutral-heavy: rgba(255, 255, 255, 0.96);
349
- --k-text-neutral-pale: rgba(255, 255, 255, 0.48);
350
- --k-text-neutral-soft: rgba(255, 255, 255, 0.64);
351
- --k-text-success-heavy: #00c655;
352
- --k-text-success-heavy-hover: #4ede76;
353
- --k-text-success-heavy-pressed: #4fa161;
354
- --k-text-warning-heavy: #f8ae00;
355
- --k-text-warning-heavy-hover: #ffbf0b;
356
- --k-text-warning-heavy-pressed: #cc9a51;
357
- --k-text-const-disabled-black: rgba(0, 0, 0, 0.32);
358
- --k-text-const-disabled-white: rgba(255, 255, 255, 0.4);
359
- --k-text-const-heavy-black: rgba(0, 0, 0, 0.88);
360
- --k-text-const-heavy-white: rgba(255, 255, 255, 0.96);
361
- --k-text-const-pale-black: rgba(0, 0, 0, 0.4);
362
- --k-text-const-pale-white: rgba(255, 255, 255, 0.48);
363
- --k-text-const-soft-black: rgba(0, 0, 0, 0.56);
364
- --k-text-const-soft-white: rgba(255, 255, 255, 0.64);
365
- --k-text-on-accent-bold-disabled: rgba(255, 255, 255, 0.32);
366
- --k-text-on-accent-bold-heavy: rgba(255, 255, 255, 0.96);
367
- --k-text-on-accent-bold-pale: rgba(255, 255, 255, 0.4);
368
- --k-text-on-accent-bold-soft: rgba(255, 255, 255, 0.56);
369
- --k-text-on-brand-original-disabled: rgba(255, 255, 255, 0.4);
370
- --k-text-on-brand-original-heavy: rgba(255, 255, 255, 0.96);
371
- --k-text-on-brand-original-pale: rgba(255, 255, 255, 0.48);
372
- --k-text-on-brand-original-soft: rgba(255, 255, 255, 0.64);
373
- --k-shape-bold-accent: #26ad50;
374
- --k-shape-bold-accent-hover: #36ba5d;
375
- --k-shape-bold-accent-pressed: #379c52;
376
- --k-shape-bold-brand-original: #26ad50;
377
- --k-shape-bold-brand-original-hover: #36ba5d;
378
- --k-shape-bold-brand-original-pressed: #289046;
379
- --k-shape-bold-error: #de3c3e;
380
- --k-shape-bold-error-hover: #ee4948;
381
- --k-shape-bold-error-pressed: #a74541;
382
- --k-shape-bold-neutral: #bebebe;
383
- --k-shape-bold-neutral-hover: #d7d7d7;
384
- --k-shape-bold-neutral-pressed: rgba(255, 255, 255, 0.56);
385
- --k-shape-bold-success: #1d9946;
386
- --k-shape-bold-success-hover: #2ca651;
387
- --k-shape-bold-success-pressed: #3f784b;
388
- --k-shape-bold-warning: #f1b03b;
389
- --k-shape-bold-warning-hover: #f4c359;
390
- --k-shape-bold-warning-pressed: #cc9a51;
391
- --k-shape-faint-accent: #213a25;
392
- --k-shape-faint-accent-hover: #27452d;
393
- --k-shape-faint-accent-pressed: #1a2e1e;
394
- --k-shape-faint-brand: #213a25;
395
- --k-shape-faint-brand-hover: #27452d;
396
- --k-shape-faint-brand-pressed: #1a2e1e;
397
- --k-shape-faint-error: #502421;
398
- --k-shape-faint-error-hover: #602a27;
399
- --k-shape-faint-error-pressed: #411c1a;
400
- --k-shape-faint-neutral-alpha: rgba(255, 255, 255, 0.06);
401
- --k-shape-faint-neutral-alpha-hover: rgba(255, 255, 255, 0.08);
402
- --k-shape-faint-neutral-alpha-pressed: rgba(255, 255, 255, 0.04);
403
- --k-shape-faint-success: #213a25;
404
- --k-shape-faint-success-hover: #27452d;
405
- --k-shape-faint-success-pressed: #1a2e1e;
406
- --k-shape-faint-warning: #402f18;
407
- --k-shape-faint-warning-hover: #4d391c;
408
- --k-shape-faint-warning-pressed: #342614;
409
- --k-shape-heavy-error: #ffdadd;
410
- --k-shape-heavy-neutral: #f2f2f2;
411
- --k-shape-heavy-success: #c3f3ca;
412
- --k-shape-heavy-warning: #fbe48d;
413
- --k-shape-other-accent-bold-disabled: rgba(255, 255, 255, 0.32);
414
- --k-shape-other-backless-hover: rgba(255, 255, 255, 0.06);
415
- --k-shape-other-backless-pressed: rgba(255, 255, 255, 0.04);
416
- --k-shape-other-base: #333;
417
- --k-shape-other-base-hover: #3d3d3d;
418
- --k-shape-other-base-pressed: #292929;
419
- --k-shape-other-disabled: rgba(255, 255, 255, 0.06);
420
- --k-shape-other-field: rgba(0, 0, 0, 0.16);
421
- --k-shape-other-field-hover: rgba(0, 0, 0, 0.04);
422
- --k-shape-other-field-pressed: rgba(0, 0, 0, 0.12);
423
- --k-shape-other-low: rgba(0, 0, 0, 0.24);
424
- --k-shape-other-low-hover: rgba(0, 0, 0, 0.16);
425
- --k-shape-other-low-pressed: rgba(0, 0, 0, 0.32);
426
- --k-shape-other-neutral-faint-solid: #333;
427
- --k-shape-other-neutral-faint-solid-hover: #3d3d3d;
428
- --k-shape-other-neutral-faint-solid-pressed: #292929;
429
- --k-shape-other-neutral-pale-solid: #3d3d3d;
430
- --k-shape-other-neutral-pale-solid-hover: #484848;
431
- --k-shape-other-neutral-pale-solid-pressed: #333;
432
- --k-shape-other-neutral-soft-solid: #525252;
433
- --k-shape-other-neutral-soft-solid-hover: #5d5d5d;
434
- --k-shape-other-neutral-soft-solid-pressed: #484848;
435
- --k-shape-pale-accent: #27452d;
436
- --k-shape-pale-accent-hover: #2d5134;
437
- --k-shape-pale-accent-pressed: #213a25;
438
- --k-shape-pale-brand: #27452d;
439
- --k-shape-pale-brand-hover: #2d5134;
440
- --k-shape-pale-brand-pressed: #213a25;
441
- --k-shape-pale-error: #602a27;
442
- --k-shape-pale-error-hover: #71312e;
443
- --k-shape-pale-error-pressed: #502421;
444
- --k-shape-pale-neutral-alpha: rgba(255, 255, 255, 0.08);
445
- --k-shape-pale-neutral-alpha-hover: rgba(255, 255, 255, 0.12);
446
- --k-shape-pale-neutral-alpha-pressed: rgba(255, 255, 255, 0.06);
447
- --k-shape-pale-success: #27452d;
448
- --k-shape-pale-success-hover: #2d5134;
449
- --k-shape-pale-success-pressed: #213a25;
450
- --k-shape-pale-warning: #4d391c;
451
- --k-shape-pale-warning-hover: #5b4320;
452
- --k-shape-pale-warning-pressed: #402f18;
453
- --k-shape-soft-accent: #3a6a43;
454
- --k-shape-soft-accent-hover: #3f784b;
455
- --k-shape-soft-accent-pressed: #345e3c;
456
- --k-shape-soft-brand: #3a6a43;
457
- --k-shape-soft-brand-hover: #3f784b;
458
- --k-shape-soft-brand-pressed: #345e3c;
459
- --k-shape-soft-error: #943e3b;
460
- --k-shape-soft-error-hover: #a74541;
461
- --k-shape-soft-error-pressed: #823835;
462
- --k-shape-soft-neutral-alpha: rgba(255, 255, 255, 0.16);
463
- --k-shape-soft-neutral-alpha-hover: rgba(255, 255, 255, 0.24);
464
- --k-shape-soft-neutral-alpha-pressed: rgba(255, 255, 255, 0.12);
465
- --k-shape-soft-success: #3a6a43;
466
- --k-shape-soft-success-hover: #3f784b;
467
- --k-shape-soft-success-pressed: #345e3c;
468
- --k-shape-soft-warning: #86612c;
469
- --k-shape-soft-warning-hover: #956c30;
470
- --k-shape-soft-warning-pressed: #775728;
471
- --k-shape-inverted-backless-hover: rgba(0, 0, 0, 0.06);
472
- --k-shape-inverted-backless-pressed: rgba(0, 0, 0, 0.08);
473
- --k-shape-inverted-disabled: rgba(0, 0, 0, 0.06);
474
- --k-shape-inverted-neutral-faint-alpha: rgba(0, 0, 0, 0.06);
475
- --k-shape-inverted-neutral-faint-alpha-hover: rgba(0, 0, 0, 0.08);
476
- --k-shape-inverted-neutral-faint-alpha-pressed: rgba(0, 0, 0, 0.12);
477
- --k-shape-inverted-neutral-heavy: rgba(0, 0, 0, 0.8);
478
- --k-shape-inverted-neutral-heavy-hover: rgba(0, 0, 0, 0.88);
479
- --k-shape-inverted-neutral-heavy-pressed: rgba(0, 0, 0, 0.72);
480
- --k-shape-inverted-neutral-pale-alpha: rgba(0, 0, 0, 0.08);
481
- --k-shape-inverted-neutral-pale-alpha-hover: rgba(0, 0, 0, 0.12);
482
- --k-shape-inverted-neutral-pale-alpha-pressed: rgba(0, 0, 0, 0.16);
483
- --k-shape-inverted-neutral-soft-alpha: rgba(0, 0, 0, 0.16);
484
- --k-shape-inverted-neutral-soft-alpha-hover: rgba(0, 0, 0, 0.24);
485
- --k-shape-inverted-neutral-soft-alpha-pressed: rgba(0, 0, 0, 0.32);
486
- --k-shape-const-backless-black-hover: rgba(0, 0, 0, 0.12);
487
- --k-shape-const-backless-black-pressed: rgba(0, 0, 0, 0.16);
488
- --k-shape-const-backless-white-hover: rgba(255, 255, 255, 0.12);
489
- --k-shape-const-backless-white-pressed: rgba(255, 255, 255, 0.06);
490
- --k-shape-const-disabled-black: rgba(0, 0, 0, 0.06);
491
- --k-shape-const-disabled-white: rgba(255, 255, 255, 0.06);
492
- --k-shape-const-faint-black: rgba(0, 0, 0, 0.12);
493
- --k-shape-const-faint-black-hover: rgba(0, 0, 0, 0.16);
494
- --k-shape-const-faint-black-pressed: rgba(0, 0, 0, 0.24);
495
- --k-shape-const-faint-white: rgba(255, 255, 255, 0.12);
496
- --k-shape-const-faint-white-hover: rgba(255, 255, 255, 0.16);
497
- --k-shape-const-faint-white-pressed: rgba(255, 255, 255, 0.08);
498
- --k-shape-const-heavy-black: rgba(0, 0, 0, 0.8);
499
- --k-shape-const-heavy-black-hover: rgba(0, 0, 0, 0.88);
500
- --k-shape-const-heavy-black-pressed: rgba(0, 0, 0, 0.64);
501
- --k-shape-const-heavy-white: rgba(255, 255, 255, 0.96);
502
- --k-shape-const-heavy-white-hover: #fff;
503
- --k-shape-const-heavy-white-pressed: rgba(255, 255, 255, 0.64);
504
- --k-shape-const-pale-black: rgba(0, 0, 0, 0.16);
505
- --k-shape-const-pale-black-hover: rgba(0, 0, 0, 0.24);
506
- --k-shape-const-pale-black-pressed: rgba(0, 0, 0, 0.32);
507
- --k-shape-const-pale-white: rgba(255, 255, 255, 0.16);
508
- --k-shape-const-pale-white-hover: rgba(255, 255, 255, 0.24);
509
- --k-shape-const-pale-white-pressed: rgba(255, 255, 255, 0.12);
510
- --k-shape-const-promo: #00413e;
511
- --k-shape-const-soft-black: rgba(0, 0, 0, 0.24);
512
- --k-shape-const-soft-black-hover: rgba(0, 0, 0, 0.32);
513
- --k-shape-const-soft-black-pressed: rgba(0, 0, 0, 0.4);
514
- --k-shape-const-soft-white: rgba(255, 255, 255, 0.24);
515
- --k-shape-const-soft-white-hover: rgba(255, 255, 255, 0.32);
516
- --k-shape-const-soft-white-pressed: rgba(255, 255, 255, 0.24);
517
- --k-line-accent-bold: #26ad50;
518
- --k-line-accent-bold-hover: #36ba5d;
519
- --k-line-accent-bold-pressed: #379c52;
520
- --k-line-accent-pale: #2d5134;
521
- --k-line-accent-pale-hover: #345e3c;
522
- --k-line-accent-pale-pressed: #27452d;
523
- --k-line-accent-soft: #3a6a43;
524
- --k-line-accent-soft-hover: #4ede76;
525
- --k-line-accent-soft-pressed: #4fa161;
526
- --k-line-brand-original: #26ad50;
527
- --k-line-error-bold: #e62b34;
528
- --k-line-error-bold-hover: #ff5352;
529
- --k-line-error-bold-pressed: #ba4b47;
530
- --k-line-neutral-faint: rgba(255, 255, 255, 0.08);
531
- --k-line-neutral-pale: rgba(255, 255, 255, 0.16);
532
- --k-line-neutral-pale-hover: rgba(255, 255, 255, 0.24);
533
- --k-line-neutral-pale-pressed: rgba(255, 255, 255, 0.12);
534
- --k-line-on-accent-bold-faint: rgba(255, 255, 255, 0.12);
535
- --k-line-on-accent-bold-pale: rgba(255, 255, 255, 0.24);
536
- --k-line-on-brand-original-faint: rgba(255, 255, 255, 0.12);
537
- --k-line-on-brand-original-pale: rgba(255, 255, 255, 0.24);
538
- --k-line-success-bold: #009b41;
539
- --k-line-success-bold-hover: #00b74e;
540
- --k-line-success-bold-pressed: #458552;
541
- --k-line-warning-bold: #f8ae00;
542
- --k-line-warning-bold-hover: #ffbf0b;
543
- --k-line-warning-bold-pressed: #cc9a51;
544
- --k-line-inverted-accent-bold: #26ad50;
545
- --k-line-inverted-accent-bold-hover: #00a044;
546
- --k-line-inverted-accent-bold-pressed: #289046;
547
- --k-line-inverted-accent-pale: #89e39a;
548
- --k-line-inverted-accent-pale-hover: #6cd984;
549
- --k-line-inverted-accent-pale-pressed: #71c882;
550
- --k-line-inverted-accent-soft: #71c882;
551
- --k-line-inverted-accent-soft-hover: #009b41;
552
- --k-line-inverted-accent-soft-pressed: #3a6a43;
553
- --k-line-inverted-error-bold: #d6192a;
554
- --k-line-inverted-error-bold-hover: #f63b40;
555
- --k-line-inverted-error-bold-pressed: #a74541;
556
- --k-line-inverted-neutral-faint: rgba(0, 0, 0, 0.08);
557
- --k-line-inverted-neutral-pale: rgba(0, 0, 0, 0.16);
558
- --k-line-inverted-neutral-pale-hover: rgba(0, 0, 0, 0.24);
559
- --k-line-inverted-neutral-pale-pressed: rgba(0, 0, 0, 0.32);
560
- --k-line-inverted-success-bold: #008d3a;
561
- --k-line-inverted-success-bold-hover: #00b74e;
562
- --k-line-inverted-success-bold-pressed: #458552;
563
- --k-line-inverted-warning-bold: #f8ae00;
564
- --k-line-inverted-warning-bold-hover: #db9400;
565
- --k-line-inverted-warning-bold-pressed: #bd8f4d;
566
- --k-line-const-faint-black: rgba(0, 0, 0, 0.12);
567
- --k-line-const-faint-white: rgba(255, 255, 255, 0.12);
568
- --k-line-const-pale-black: rgba(0, 0, 0, 0.24);
569
- --k-line-const-pale-black-hover: rgba(0, 0, 0, 0.32);
570
- --k-line-const-pale-black-pressed: rgba(0, 0, 0, 0.16);
571
- --k-line-const-pale-white: rgba(255, 255, 255, 0.24);
572
- --k-line-const-pale-white-hover: rgba(255, 255, 255, 0.32);
573
- --k-line-const-pale-white-pressed: rgba(255, 255, 255, 0.16);
574
- --k-surface-base: #292929;
575
- --k-surface-high: #333;
576
- --k-surface-low: #1f1f1f;
577
- --k-surface-modal-backdrop: rgba(0, 0, 0, 0.4);
578
- --k-illustration-black: #0d0d0d;
579
- --k-illustration-brand: #26ad50;
580
- --k-illustration-complement: #fff;
581
- --k-illustration-inverted-neutral: #000;
582
- --k-illustration-neutral: #fff;
583
- --k-illustration-on-brand: rgba(255, 255, 255, 1);
584
- --k-illustration-on-complement: #00413e;
585
- --k-illustration-promo: #00413e;
586
- --k-illustration-symbol: #6cd984;
587
- --k-illustration-white: #fff;
588
- --k-customizable-bold-black: #b1b1b1;
589
- --k-customizable-bold-blue: #2b8df2;
590
- --k-customizable-bold-blue-deep: #5183ff;
591
- --k-customizable-bold-gray: #696969;
592
- --k-customizable-bold-green: #2ca651;
593
- --k-customizable-bold-mint: #00a38b;
594
- --k-customizable-bold-orange: #d96528;
595
- --k-customizable-bold-purple: #be5ad8;
596
- --k-customizable-bold-red: #ee4948;
597
- --k-customizable-bold-violet: #956ef2;
598
- --k-customizable-bold-yellow: #d19a00;
599
- --k-customizable-faint-black: #484848;
600
- --k-customizable-faint-blue: #1f344d;
601
- --k-customizable-faint-blue-deep: #1e305c;
602
- --k-customizable-faint-gray: #333;
603
- --k-customizable-faint-green: #213a25;
604
- --k-customizable-faint-mint: #163a32;
605
- --k-customizable-faint-orange: #472b1e;
606
- --k-customizable-faint-purple: #44244c;
607
- --k-customizable-faint-red: #502421;
608
- --k-customizable-faint-violet: #362958;
609
- --k-customizable-faint-yellow: #3e3117;
610
- --k-customizable-heavy-black: #f2f2f2;
611
- --k-customizable-heavy-blue: #80c5ff;
612
- --k-customizable-heavy-blue-deep: #88b0ff;
613
- --k-customizable-heavy-gray: #808080;
614
- --k-customizable-heavy-green: #6fe98b;
615
- --k-customizable-heavy-mint: #4af6dd;
616
- --k-customizable-heavy-orange: #ff8f4f;
617
- --k-customizable-heavy-purple: #ea9aff;
618
- --k-customizable-heavy-red: #ff8a84;
619
- --k-customizable-heavy-violet: #b69fff;
620
- --k-customizable-heavy-yellow: #f6c405;
621
- --k-customizable-pale-black: #525252;
622
- --k-customizable-pale-blue: #253f5c;
623
- --k-customizable-pale-blue-deep: #243a6e;
624
- --k-customizable-pale-gray: #3d3d3d;
625
- --k-customizable-pale-green: #27452d;
626
- --k-customizable-pale-mint: #19463d;
627
- --k-customizable-pale-orange: #563324;
628
- --k-customizable-pale-purple: #522a5c;
629
- --k-customizable-pale-red: #602a27;
630
- --k-customizable-pale-violet: #413169;
631
- --k-customizable-pale-yellow: #4b3a1b;
632
- --k-customizable-soft-black: #747474;
633
- --k-customizable-soft-blue: #37608e;
634
- --k-customizable-soft-blue-deep: #3959a5;
635
- --k-customizable-soft-gray: #525252;
636
- --k-customizable-soft-green: #3a6a43;
637
- --k-customizable-soft-mint: #216c5d;
638
- --k-customizable-soft-orange: #844d34;
639
- --k-customizable-soft-purple: #7c428b;
640
- --k-customizable-soft-red: #943e3b;
641
- --k-customizable-soft-violet: #634c9e;
642
- --k-customizable-soft-yellow: #81642a;
323
+ [data-k-color-brand='green'][data-k-color-accent='brand'][data-k-color-theme='dark'] {
324
+ --k-color-text-accent-heavy: #00c655;
325
+ --k-color-text-accent-heavy-hover: #4ede76;
326
+ --k-color-text-accent-heavy-pressed: #4fa161;
327
+ --k-color-text-error-heavy: #ff5352;
328
+ --k-color-text-error-heavy-hover: #ff726b;
329
+ --k-color-text-error-heavy-pressed: #dd5d58;
330
+ --k-color-text-inverted-accent-heavy: #007f34;
331
+ --k-color-text-inverted-accent-heavy-hover: #009b41;
332
+ --k-color-text-inverted-accent-heavy-pressed: #3a6a43;
333
+ --k-color-text-inverted-error-heavy: #c50220;
334
+ --k-color-text-inverted-error-heavy-hover: #e62b34;
335
+ --k-color-text-inverted-error-heavy-pressed: #943e3b;
336
+ --k-color-text-inverted-neutral-faint: rgba(0, 0, 0, 0.32);
337
+ --k-color-text-inverted-neutral-heavy: rgba(0, 0, 0, 0.88);
338
+ --k-color-text-inverted-neutral-pale: rgba(0, 0, 0, 0.4);
339
+ --k-color-text-inverted-neutral-soft: rgba(0, 0, 0, 0.56);
340
+ --k-color-text-inverted-success-heavy: #007f34;
341
+ --k-color-text-inverted-success-heavy-hover: #009b41;
342
+ --k-color-text-inverted-success-heavy-pressed: #3a6a43;
343
+ --k-color-text-inverted-warning-heavy: #bc7d00;
344
+ --k-color-text-inverted-warning-heavy-hover: #db9400;
345
+ --k-color-text-inverted-warning-heavy-pressed: #956c30;
346
+ --k-color-text-logo: #22ad51;
347
+ --k-color-text-neutral-faint: rgba(255, 255, 255, 0.4);
348
+ --k-color-text-neutral-heavy: rgba(255, 255, 255, 0.96);
349
+ --k-color-text-neutral-pale: rgba(255, 255, 255, 0.48);
350
+ --k-color-text-neutral-soft: rgba(255, 255, 255, 0.64);
351
+ --k-color-text-success-heavy: #00c655;
352
+ --k-color-text-success-heavy-hover: #4ede76;
353
+ --k-color-text-success-heavy-pressed: #4fa161;
354
+ --k-color-text-warning-heavy: #f8ae00;
355
+ --k-color-text-warning-heavy-hover: #ffbf0b;
356
+ --k-color-text-warning-heavy-pressed: #cc9a51;
357
+ --k-color-text-const-faint-black: rgba(0, 0, 0, 0.32);
358
+ --k-color-text-const-faint-white: rgba(255, 255, 255, 0.4);
359
+ --k-color-text-const-heavy-black: rgba(0, 0, 0, 0.88);
360
+ --k-color-text-const-heavy-white: rgba(255, 255, 255, 0.96);
361
+ --k-color-text-const-pale-black: rgba(0, 0, 0, 0.4);
362
+ --k-color-text-const-pale-white: rgba(255, 255, 255, 0.48);
363
+ --k-color-text-const-soft-black: rgba(0, 0, 0, 0.56);
364
+ --k-color-text-const-soft-white: rgba(255, 255, 255, 0.64);
365
+ --k-color-text-on-accent-bold-faint: rgba(255, 255, 255, 0.32);
366
+ --k-color-text-on-accent-bold-heavy: rgba(255, 255, 255, 0.96);
367
+ --k-color-text-on-accent-bold-pale: rgba(255, 255, 255, 0.4);
368
+ --k-color-text-on-accent-bold-soft: rgba(255, 255, 255, 0.56);
369
+ --k-color-text-on-brand-original-faint: rgba(255, 255, 255, 0.4);
370
+ --k-color-text-on-brand-original-heavy: rgba(255, 255, 255, 0.96);
371
+ --k-color-text-on-brand-original-pale: rgba(255, 255, 255, 0.48);
372
+ --k-color-text-on-brand-original-soft: rgba(255, 255, 255, 0.64);
373
+ --k-color-shape-bold-accent: #26ad50;
374
+ --k-color-shape-bold-accent-hover: #36ba5d;
375
+ --k-color-shape-bold-accent-pressed: #379c52;
376
+ --k-color-shape-bold-brand-original: #26ad50;
377
+ --k-color-shape-bold-brand-original-hover: #36ba5d;
378
+ --k-color-shape-bold-brand-original-pressed: #289046;
379
+ --k-color-shape-bold-error: #de3c3e;
380
+ --k-color-shape-bold-error-hover: #ee4948;
381
+ --k-color-shape-bold-error-pressed: #a74541;
382
+ --k-color-shape-bold-neutral: #bebebe;
383
+ --k-color-shape-bold-neutral-hover: #d7d7d7;
384
+ --k-color-shape-bold-neutral-pressed: rgba(255, 255, 255, 0.56);
385
+ --k-color-shape-bold-success: #1d9946;
386
+ --k-color-shape-bold-success-hover: #2ca651;
387
+ --k-color-shape-bold-success-pressed: #3f784b;
388
+ --k-color-shape-bold-warning: #f1b03b;
389
+ --k-color-shape-bold-warning-hover: #f4c359;
390
+ --k-color-shape-bold-warning-pressed: #cc9a51;
391
+ --k-color-shape-faint-accent: #213a25;
392
+ --k-color-shape-faint-accent-hover: #27452d;
393
+ --k-color-shape-faint-accent-pressed: #1a2e1e;
394
+ --k-color-shape-faint-brand: #213a25;
395
+ --k-color-shape-faint-brand-hover: #27452d;
396
+ --k-color-shape-faint-brand-pressed: #1a2e1e;
397
+ --k-color-shape-faint-error: #502421;
398
+ --k-color-shape-faint-error-hover: #602a27;
399
+ --k-color-shape-faint-error-pressed: #411c1a;
400
+ --k-color-shape-faint-neutral-alpha: rgba(255, 255, 255, 0.06);
401
+ --k-color-shape-faint-neutral-alpha-hover: rgba(255, 255, 255, 0.08);
402
+ --k-color-shape-faint-neutral-alpha-pressed: rgba(255, 255, 255, 0.04);
403
+ --k-color-shape-faint-success: #213a25;
404
+ --k-color-shape-faint-success-hover: #27452d;
405
+ --k-color-shape-faint-success-pressed: #1a2e1e;
406
+ --k-color-shape-faint-warning: #402f18;
407
+ --k-color-shape-faint-warning-hover: #4d391c;
408
+ --k-color-shape-faint-warning-pressed: #342614;
409
+ --k-color-shape-heavy-error: #ffdadd;
410
+ --k-color-shape-heavy-neutral: #f2f2f2;
411
+ --k-color-shape-heavy-success: #c3f3ca;
412
+ --k-color-shape-heavy-warning: #fbe48d;
413
+ --k-color-shape-other-accent-bold-disabled: rgba(255, 255, 255, 0.32);
414
+ --k-color-shape-other-backless-hover: rgba(255, 255, 255, 0.06);
415
+ --k-color-shape-other-backless-pressed: rgba(255, 255, 255, 0.04);
416
+ --k-color-shape-other-base: rgba(255, 255, 255, 0.06);
417
+ --k-color-shape-other-base-hover: rgba(255, 255, 255, 0.08);
418
+ --k-color-shape-other-base-pressed: rgba(255, 255, 255, 0.04);
419
+ --k-color-shape-other-disabled: rgba(255, 255, 255, 0.06);
420
+ --k-color-shape-other-field: rgba(0, 0, 0, 0.16);
421
+ --k-color-shape-other-field-hover: rgba(0, 0, 0, 0.04);
422
+ --k-color-shape-other-field-pressed: rgba(0, 0, 0, 0.12);
423
+ --k-color-shape-other-low: rgba(0, 0, 0, 0.24);
424
+ --k-color-shape-other-low-hover: rgba(0, 0, 0, 0.16);
425
+ --k-color-shape-other-low-pressed: rgba(0, 0, 0, 0.32);
426
+ --k-color-shape-other-neutral-faint-solid: #333;
427
+ --k-color-shape-other-neutral-faint-solid-hover: #3d3d3d;
428
+ --k-color-shape-other-neutral-faint-solid-pressed: #292929;
429
+ --k-color-shape-other-neutral-pale-solid: #3d3d3d;
430
+ --k-color-shape-other-neutral-pale-solid-hover: #484848;
431
+ --k-color-shape-other-neutral-pale-solid-pressed: #333;
432
+ --k-color-shape-other-neutral-soft-solid: #525252;
433
+ --k-color-shape-other-neutral-soft-solid-hover: #5d5d5d;
434
+ --k-color-shape-other-neutral-soft-solid-pressed: #484848;
435
+ --k-color-shape-pale-accent: #27452d;
436
+ --k-color-shape-pale-accent-hover: #2d5134;
437
+ --k-color-shape-pale-accent-pressed: #213a25;
438
+ --k-color-shape-pale-brand: #27452d;
439
+ --k-color-shape-pale-brand-hover: #2d5134;
440
+ --k-color-shape-pale-brand-pressed: #213a25;
441
+ --k-color-shape-pale-error: #602a27;
442
+ --k-color-shape-pale-error-hover: #71312e;
443
+ --k-color-shape-pale-error-pressed: #502421;
444
+ --k-color-shape-pale-neutral-alpha: rgba(255, 255, 255, 0.08);
445
+ --k-color-shape-pale-neutral-alpha-hover: rgba(255, 255, 255, 0.12);
446
+ --k-color-shape-pale-neutral-alpha-pressed: rgba(255, 255, 255, 0.06);
447
+ --k-color-shape-pale-success: #27452d;
448
+ --k-color-shape-pale-success-hover: #2d5134;
449
+ --k-color-shape-pale-success-pressed: #213a25;
450
+ --k-color-shape-pale-warning: #4d391c;
451
+ --k-color-shape-pale-warning-hover: #5b4320;
452
+ --k-color-shape-pale-warning-pressed: #402f18;
453
+ --k-color-shape-soft-accent: #3a6a43;
454
+ --k-color-shape-soft-accent-hover: #3f784b;
455
+ --k-color-shape-soft-accent-pressed: #345e3c;
456
+ --k-color-shape-soft-brand: #3a6a43;
457
+ --k-color-shape-soft-brand-hover: #3f784b;
458
+ --k-color-shape-soft-brand-pressed: #345e3c;
459
+ --k-color-shape-soft-error: #943e3b;
460
+ --k-color-shape-soft-error-hover: #a74541;
461
+ --k-color-shape-soft-error-pressed: #823835;
462
+ --k-color-shape-soft-neutral-alpha: rgba(255, 255, 255, 0.16);
463
+ --k-color-shape-soft-neutral-alpha-hover: rgba(255, 255, 255, 0.24);
464
+ --k-color-shape-soft-neutral-alpha-pressed: rgba(255, 255, 255, 0.12);
465
+ --k-color-shape-soft-success: #3a6a43;
466
+ --k-color-shape-soft-success-hover: #3f784b;
467
+ --k-color-shape-soft-success-pressed: #345e3c;
468
+ --k-color-shape-soft-warning: #86612c;
469
+ --k-color-shape-soft-warning-hover: #956c30;
470
+ --k-color-shape-soft-warning-pressed: #775728;
471
+ --k-color-shape-inverted-backless-hover: rgba(0, 0, 0, 0.06);
472
+ --k-color-shape-inverted-backless-pressed: rgba(0, 0, 0, 0.08);
473
+ --k-color-shape-inverted-disabled: rgba(0, 0, 0, 0.06);
474
+ --k-color-shape-inverted-neutral-faint-alpha: rgba(0, 0, 0, 0.06);
475
+ --k-color-shape-inverted-neutral-faint-alpha-hover: rgba(0, 0, 0, 0.08);
476
+ --k-color-shape-inverted-neutral-faint-alpha-pressed: rgba(0, 0, 0, 0.12);
477
+ --k-color-shape-inverted-neutral-heavy: rgba(0, 0, 0, 0.8);
478
+ --k-color-shape-inverted-neutral-heavy-hover: rgba(0, 0, 0, 0.88);
479
+ --k-color-shape-inverted-neutral-heavy-pressed: rgba(0, 0, 0, 0.72);
480
+ --k-color-shape-inverted-neutral-pale-alpha: rgba(0, 0, 0, 0.08);
481
+ --k-color-shape-inverted-neutral-pale-alpha-hover: rgba(0, 0, 0, 0.12);
482
+ --k-color-shape-inverted-neutral-pale-alpha-pressed: rgba(0, 0, 0, 0.16);
483
+ --k-color-shape-inverted-neutral-soft-alpha: rgba(0, 0, 0, 0.16);
484
+ --k-color-shape-inverted-neutral-soft-alpha-hover: rgba(0, 0, 0, 0.24);
485
+ --k-color-shape-inverted-neutral-soft-alpha-pressed: rgba(0, 0, 0, 0.32);
486
+ --k-color-shape-const-backless-black-hover: rgba(0, 0, 0, 0.12);
487
+ --k-color-shape-const-backless-black-pressed: rgba(0, 0, 0, 0.16);
488
+ --k-color-shape-const-backless-white-hover: rgba(255, 255, 255, 0.12);
489
+ --k-color-shape-const-backless-white-pressed: rgba(255, 255, 255, 0.06);
490
+ --k-color-shape-const-disabled-black: rgba(0, 0, 0, 0.06);
491
+ --k-color-shape-const-disabled-white: rgba(255, 255, 255, 0.06);
492
+ --k-color-shape-const-faint-black: rgba(0, 0, 0, 0.12);
493
+ --k-color-shape-const-faint-black-hover: rgba(0, 0, 0, 0.16);
494
+ --k-color-shape-const-faint-black-pressed: rgba(0, 0, 0, 0.24);
495
+ --k-color-shape-const-faint-white: rgba(255, 255, 255, 0.12);
496
+ --k-color-shape-const-faint-white-hover: rgba(255, 255, 255, 0.16);
497
+ --k-color-shape-const-faint-white-pressed: rgba(255, 255, 255, 0.08);
498
+ --k-color-shape-const-heavy-black: rgba(0, 0, 0, 0.8);
499
+ --k-color-shape-const-heavy-black-hover: rgba(0, 0, 0, 0.88);
500
+ --k-color-shape-const-heavy-black-pressed: rgba(0, 0, 0, 0.64);
501
+ --k-color-shape-const-heavy-white: rgba(255, 255, 255, 0.96);
502
+ --k-color-shape-const-heavy-white-hover: #fff;
503
+ --k-color-shape-const-heavy-white-pressed: rgba(255, 255, 255, 0.64);
504
+ --k-color-shape-const-pale-black: rgba(0, 0, 0, 0.16);
505
+ --k-color-shape-const-pale-black-hover: rgba(0, 0, 0, 0.24);
506
+ --k-color-shape-const-pale-black-pressed: rgba(0, 0, 0, 0.32);
507
+ --k-color-shape-const-pale-white: rgba(255, 255, 255, 0.16);
508
+ --k-color-shape-const-pale-white-hover: rgba(255, 255, 255, 0.24);
509
+ --k-color-shape-const-pale-white-pressed: rgba(255, 255, 255, 0.12);
510
+ --k-color-shape-const-promo: #00413e;
511
+ --k-color-shape-const-soft-black: rgba(0, 0, 0, 0.24);
512
+ --k-color-shape-const-soft-black-hover: rgba(0, 0, 0, 0.32);
513
+ --k-color-shape-const-soft-black-pressed: rgba(0, 0, 0, 0.4);
514
+ --k-color-shape-const-soft-white: rgba(255, 255, 255, 0.24);
515
+ --k-color-shape-const-soft-white-hover: rgba(255, 255, 255, 0.32);
516
+ --k-color-shape-const-soft-white-pressed: rgba(255, 255, 255, 0.24);
517
+ --k-color-line-accent-bold: #26ad50;
518
+ --k-color-line-accent-bold-hover: #36ba5d;
519
+ --k-color-line-accent-bold-pressed: #379c52;
520
+ --k-color-line-accent-pale: #2d5134;
521
+ --k-color-line-accent-pale-hover: #345e3c;
522
+ --k-color-line-accent-pale-pressed: #27452d;
523
+ --k-color-line-accent-soft: #3a6a43;
524
+ --k-color-line-accent-soft-hover: #4ede76;
525
+ --k-color-line-accent-soft-pressed: #4fa161;
526
+ --k-color-line-brand-original: #26ad50;
527
+ --k-color-line-error-bold: #e62b34;
528
+ --k-color-line-error-bold-hover: #ff5352;
529
+ --k-color-line-error-bold-pressed: #ba4b47;
530
+ --k-color-line-neutral-faint: rgba(255, 255, 255, 0.08);
531
+ --k-color-line-neutral-pale: rgba(255, 255, 255, 0.16);
532
+ --k-color-line-neutral-pale-hover: rgba(255, 255, 255, 0.24);
533
+ --k-color-line-neutral-pale-pressed: rgba(255, 255, 255, 0.12);
534
+ --k-color-line-on-accent-bold-faint: rgba(255, 255, 255, 0.12);
535
+ --k-color-line-on-accent-bold-pale: rgba(255, 255, 255, 0.24);
536
+ --k-color-line-on-brand-original-faint: rgba(255, 255, 255, 0.12);
537
+ --k-color-line-on-brand-original-pale: rgba(255, 255, 255, 0.24);
538
+ --k-color-line-success-bold: #009b41;
539
+ --k-color-line-success-bold-hover: #00b74e;
540
+ --k-color-line-success-bold-pressed: #458552;
541
+ --k-color-line-warning-bold: #f8ae00;
542
+ --k-color-line-warning-bold-hover: #ffbf0b;
543
+ --k-color-line-warning-bold-pressed: #cc9a51;
544
+ --k-color-line-inverted-accent-bold: #26ad50;
545
+ --k-color-line-inverted-accent-bold-hover: #00a044;
546
+ --k-color-line-inverted-accent-bold-pressed: #289046;
547
+ --k-color-line-inverted-accent-pale: #89e39a;
548
+ --k-color-line-inverted-accent-pale-hover: #6cd984;
549
+ --k-color-line-inverted-accent-pale-pressed: #71c882;
550
+ --k-color-line-inverted-accent-soft: #71c882;
551
+ --k-color-line-inverted-accent-soft-hover: #009b41;
552
+ --k-color-line-inverted-accent-soft-pressed: #3a6a43;
553
+ --k-color-line-inverted-error-bold: #d6192a;
554
+ --k-color-line-inverted-error-bold-hover: #f63b40;
555
+ --k-color-line-inverted-error-bold-pressed: #a74541;
556
+ --k-color-line-inverted-neutral-faint: rgba(0, 0, 0, 0.08);
557
+ --k-color-line-inverted-neutral-pale: rgba(0, 0, 0, 0.16);
558
+ --k-color-line-inverted-neutral-pale-hover: rgba(0, 0, 0, 0.24);
559
+ --k-color-line-inverted-neutral-pale-pressed: rgba(0, 0, 0, 0.32);
560
+ --k-color-line-inverted-success-bold: #008d3a;
561
+ --k-color-line-inverted-success-bold-hover: #00b74e;
562
+ --k-color-line-inverted-success-bold-pressed: #458552;
563
+ --k-color-line-inverted-warning-bold: #f8ae00;
564
+ --k-color-line-inverted-warning-bold-hover: #db9400;
565
+ --k-color-line-inverted-warning-bold-pressed: #bd8f4d;
566
+ --k-color-line-const-faint-black: rgba(0, 0, 0, 0.12);
567
+ --k-color-line-const-faint-white: rgba(255, 255, 255, 0.12);
568
+ --k-color-line-const-pale-black: rgba(0, 0, 0, 0.24);
569
+ --k-color-line-const-pale-black-hover: rgba(0, 0, 0, 0.32);
570
+ --k-color-line-const-pale-black-pressed: rgba(0, 0, 0, 0.16);
571
+ --k-color-line-const-pale-white: rgba(255, 255, 255, 0.24);
572
+ --k-color-line-const-pale-white-hover: rgba(255, 255, 255, 0.32);
573
+ --k-color-line-const-pale-white-pressed: rgba(255, 255, 255, 0.16);
574
+ --k-color-surface-base: #292929;
575
+ --k-color-surface-high: #333;
576
+ --k-color-surface-low: #1f1f1f;
577
+ --k-color-surface-modal-backdrop: rgba(0, 0, 0, 0.4);
578
+ --k-color-illustration-black: #0d0d0d;
579
+ --k-color-illustration-brand: #26ad50;
580
+ --k-color-illustration-complement: #fff;
581
+ --k-color-illustration-inverted-neutral: #000;
582
+ --k-color-illustration-neutral: #fff;
583
+ --k-color-illustration-on-brand: rgba(255, 255, 255, 1);
584
+ --k-color-illustration-on-complement: #00413e;
585
+ --k-color-illustration-promo: #00413e;
586
+ --k-color-illustration-symbol: #6cd984;
587
+ --k-color-illustration-white: #fff;
588
+ --k-color-customizable-bold-black: #b1b1b1;
589
+ --k-color-customizable-bold-blue: #2b8df2;
590
+ --k-color-customizable-bold-blue-deep: #5183ff;
591
+ --k-color-customizable-bold-gray: #696969;
592
+ --k-color-customizable-bold-green: #2ca651;
593
+ --k-color-customizable-bold-mint: #00a38b;
594
+ --k-color-customizable-bold-orange: #d96528;
595
+ --k-color-customizable-bold-purple: #be5ad8;
596
+ --k-color-customizable-bold-red: #ee4948;
597
+ --k-color-customizable-bold-violet: #956ef2;
598
+ --k-color-customizable-bold-yellow: #d19a00;
599
+ --k-color-customizable-faint-black: #484848;
600
+ --k-color-customizable-faint-blue: #1f344d;
601
+ --k-color-customizable-faint-blue-deep: #1e305c;
602
+ --k-color-customizable-faint-gray: #333;
603
+ --k-color-customizable-faint-green: #213a25;
604
+ --k-color-customizable-faint-mint: #163a32;
605
+ --k-color-customizable-faint-orange: #472b1e;
606
+ --k-color-customizable-faint-purple: #44244c;
607
+ --k-color-customizable-faint-red: #502421;
608
+ --k-color-customizable-faint-violet: #362958;
609
+ --k-color-customizable-faint-yellow: #3e3117;
610
+ --k-color-customizable-heavy-black: #f2f2f2;
611
+ --k-color-customizable-heavy-blue: #80c5ff;
612
+ --k-color-customizable-heavy-blue-deep: #88b0ff;
613
+ --k-color-customizable-heavy-gray: #808080;
614
+ --k-color-customizable-heavy-green: #6fe98b;
615
+ --k-color-customizable-heavy-mint: #4af6dd;
616
+ --k-color-customizable-heavy-orange: #ff8f4f;
617
+ --k-color-customizable-heavy-purple: #ea9aff;
618
+ --k-color-customizable-heavy-red: #ff8a84;
619
+ --k-color-customizable-heavy-violet: #b69fff;
620
+ --k-color-customizable-heavy-yellow: #f6c405;
621
+ --k-color-customizable-pale-black: #525252;
622
+ --k-color-customizable-pale-blue: #253f5c;
623
+ --k-color-customizable-pale-blue-deep: #243a6e;
624
+ --k-color-customizable-pale-gray: #3d3d3d;
625
+ --k-color-customizable-pale-green: #27452d;
626
+ --k-color-customizable-pale-mint: #19463d;
627
+ --k-color-customizable-pale-orange: #563324;
628
+ --k-color-customizable-pale-purple: #522a5c;
629
+ --k-color-customizable-pale-red: #602a27;
630
+ --k-color-customizable-pale-violet: #413169;
631
+ --k-color-customizable-pale-yellow: #4b3a1b;
632
+ --k-color-customizable-soft-black: #747474;
633
+ --k-color-customizable-soft-blue: #37608e;
634
+ --k-color-customizable-soft-blue-deep: #3959a5;
635
+ --k-color-customizable-soft-gray: #525252;
636
+ --k-color-customizable-soft-green: #3a6a43;
637
+ --k-color-customizable-soft-mint: #216c5d;
638
+ --k-color-customizable-soft-orange: #844d34;
639
+ --k-color-customizable-soft-purple: #7c428b;
640
+ --k-color-customizable-soft-red: #943e3b;
641
+ --k-color-customizable-soft-violet: #634c9e;
642
+ --k-color-customizable-soft-yellow: #81642a;
643
643
  }