@commercetools-uikit/design-system 19.0.0 → 19.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/commercetools-uikit-design-system.cjs.dev.js +143 -371
  2. package/dist/commercetools-uikit-design-system.cjs.prod.js +143 -371
  3. package/dist/commercetools-uikit-design-system.esm.js +143 -371
  4. package/dist/declarations/src/design-tokens.d.ts +136 -367
  5. package/materials/custom-properties.css +68 -158
  6. package/materials/custom-properties.json +68 -126
  7. package/materials/custom-properties_default.css +68 -158
  8. package/materials/custom-properties_recolouring.css +9 -83
  9. package/materials/internals/definition.yaml +71 -457
  10. package/package.json +2 -2
package/dist/declarations/src/design-tokens.d.ts CHANGED
@@ -1,53 +1,53 @@
1
1
  export declare const themes: {
2
2
  readonly default: {
3
- readonly colorPrimary: "hsl(175, 55%, 45%)";
4
- readonly colorPrimary10: "hsl(175, 55%, 10%)";
5
- readonly colorPrimary20: "hsl(175, 55%, 20%)";
6
- readonly colorPrimary25: "hsl(175, 55%, 25%)";
7
- readonly colorPrimary30: "hsl(175, 55%, 30%)";
8
- readonly colorPrimary40: "hsl(175, 55%, 40%)";
9
- readonly colorPrimary85: "hsl(175, 70%, 85%)";
10
- readonly colorPrimary90: "hsl(175, 70%, 90%)";
11
- readonly colorPrimary95: "hsl(175, 90%, 95%)";
12
- readonly colorPrimary98: "hsl(175, 100%, 99%)";
3
+ readonly colorPrimary: "hsl(240, 64%, 58%)";
4
+ readonly colorPrimary10: "hsl(240, 66%, 19%)";
5
+ readonly colorPrimary20: "hsl(240, 45%, 33%)";
6
+ readonly colorPrimary25: "hsl(240, 46%, 48%)";
7
+ readonly colorPrimary30: "hsl(240, 46%, 53%)";
8
+ readonly colorPrimary40: "hsl(240, 100%, 67%)";
9
+ readonly colorPrimary85: "hsl(244, 100%, 84%)";
10
+ readonly colorPrimary90: "hsl(243, 100%, 93%)";
11
+ readonly colorPrimary95: "hsl(244, 100%, 97%)";
12
+ readonly colorPrimary98: "hsl(244, 100%, 99%)";
13
13
  readonly colorAccent: "#213c45";
14
- readonly colorAccent10: "hsl(195, 35.2941176471%, 10%)";
15
- readonly colorAccent20: "hsl(195, 35.2941176471%, 20%)";
16
- readonly colorAccent30: "hsl(195, 35.2941176471%, 30%)";
17
- readonly colorAccent40: "hsl(195, 35.2941176471%, 40%)";
18
- readonly colorAccent50: "hsl(195, 35%, 50%)";
19
- readonly colorAccent60: "hsl(195, 35.2941176471%, 60%)";
20
- readonly colorAccent85: "hsl(195, 35%, 85%)";
21
- readonly colorAccent90: "hsl(195, 35.2941176471%, 90%)";
22
- readonly colorAccent95: "hsl(195, 35.2941176471%, 95%)";
23
- readonly colorAccent98: "hsl(195, 35.2941176471%, 98%)";
24
- readonly colorBrown10: "hsl(35, 90%, 10%)";
25
- readonly colorBrown20: "hsl(35, 50%, 20%)";
26
- readonly colorBrown35: "hsl(35, 25%, 35%)";
27
- readonly colorBrown50: "hsl(35, 30%, 50%)";
28
- readonly colorBrown70: "hsl(35, 40%, 70%)";
29
- readonly colorBrown85: "hsl(35, 60%, 85%)";
30
- readonly colorBrown90: "hsl(35, 90%, 90%)";
31
- readonly colorBrown95: "hsl(35, 80%, 95%)";
32
- readonly colorBrown98: "hsl(35, 90%, 98%)";
33
- readonly colorPurple10: "hsl(248, 90%, 10%)";
14
+ readonly colorAccent10: "hsl(195, 100%, 10%)";
15
+ readonly colorAccent20: "hsl(195, 80%, 20%)";
16
+ readonly colorAccent30: "hsl(195, 70%, 30%)";
17
+ readonly colorAccent40: "hsl(195, 70%, 40%)";
18
+ readonly colorAccent50: "hsl(195, 70%, 50%)";
19
+ readonly colorAccent60: "hsl(195, 70%, 60%)";
20
+ readonly colorAccent85: "hsl(195, 85%, 85%)";
21
+ readonly colorAccent90: "hsl(195, 90%, 90%)";
22
+ readonly colorAccent95: "hsl(195, 95%, 95%)";
23
+ readonly colorAccent98: "hsl(195, 100%, 98%)";
24
+ readonly colorBrown10: "hsl(41, 100%, 10%)";
25
+ readonly colorBrown20: "hsl(41, 100%, 20%)";
26
+ readonly colorBrown35: "hsl(41, 96%, 35%)";
27
+ readonly colorBrown50: "hsl(41, 95%, 44%)";
28
+ readonly colorBrown70: "hsl(47, 95%, 70%)";
29
+ readonly colorBrown85: "hsl(47, 100%, 85%)";
30
+ readonly colorBrown90: "hsl(47, 100%, 90%)";
31
+ readonly colorBrown95: "hsl(47, 100%, 95%)";
32
+ readonly colorBrown98: "hsl(48, 100%, 97%)";
33
+ readonly colorPurple10: "hsl(248, 88%, 10%)";
34
34
  readonly colorPurple20: "hsl(248, 50%, 20%)";
35
35
  readonly colorPurple35: "hsl(248, 25%, 35%)";
36
- readonly colorPurple50: "hsl(248, 30%,50%)";
37
- readonly colorPurple70: "hsl(248, 40%, 70%)";
38
- readonly colorPurple85: "hsl(248, 60%, 85%)";
39
- readonly colorPurple90: "hsl(248, 50%, 90%)";
40
- readonly colorPurple95: "hsl(248, 80%, 95%)";
41
- readonly colorPurple98: "hsl(248, 90%, 98%)";
42
- readonly colorTurquoise10: "hsl(180, 90%, 10%)";
43
- readonly colorTurquoise20: "hsl(180, 50%, 20%)";
44
- readonly colorTurquoise35: "hsl(180, 25%, 35%)";
45
- readonly colorTurquoise50: "hsl(180, 30%, 45%)";
46
- readonly colorTurquoise70: "hsl(180, 40%, 70%)";
47
- readonly colorTurquoise85: "hsl(180, 60%, 85%)";
48
- readonly colorTurquoise90: "hsl(180, 40%, 90%)";
49
- readonly colorTurquoise95: "hsl(180, 80%, 95%)";
50
- readonly colorTurquoise98: "hsl(180, 90%, 98%)";
36
+ readonly colorPurple50: "hsl(248, 64%, 58%)";
37
+ readonly colorPurple70: "hsl(248, 80%, 70%)";
38
+ readonly colorPurple85: "hsl(249, 100%, 85%)";
39
+ readonly colorPurple90: "hsl(248, 100%, 90%)";
40
+ readonly colorPurple95: "hsl(248, 100%, 95%)";
41
+ readonly colorPurple98: "hsl(246, 100%, 98%)";
42
+ readonly colorTurquoise10: "hsl(180, 88%, 10%)";
43
+ readonly colorTurquoise20: "hsl(180, 90%, 20%)";
44
+ readonly colorTurquoise35: "hsl(178, 88%, 35%)";
45
+ readonly colorTurquoise50: "hsl(178, 67%, 50%)";
46
+ readonly colorTurquoise70: "hsl(180, 75%, 70%)";
47
+ readonly colorTurquoise85: "hsl(180, 90%, 85%)";
48
+ readonly colorTurquoise90: "hsl(180, 88%, 90%)";
49
+ readonly colorTurquoise95: "hsl(180, 88%, 95%)";
50
+ readonly colorTurquoise98: "hsl(180, 100%, 98%)";
51
51
  readonly colorNeutral: "hsl(232, 18%, 80%)";
52
52
  readonly colorNeutral05: "hsl(0deg 0% 80% / 5%)";
53
53
  readonly colorNeutral10: "hsl(0deg 0% 80% / 10%)";
@@ -63,17 +63,17 @@ export declare const themes: {
63
63
  readonly colorInfo85: "hsl(203.05555555555554, 93.9130434783%, 85%)";
64
64
  readonly colorInfo90: "#CEEBFD";
65
65
  readonly colorInfo95: "hsl(203.05555555555554, 93.9130434783%, 95%)";
66
- readonly colorWarning: "#f16d0e";
67
- readonly colorWarning25: "hsl(25.110132158590307, 89.0196078431%, 25%)";
68
- readonly colorWarning40: "hsl(25.110132158590307, 89.0196078431%, 40%)";
69
- readonly colorWarning60: "hsl(25.110132158590307, 90%, 60%)";
70
- readonly colorWarning85: "hsl(25.110132158590307, 89.0196078431%, 85%)";
71
- readonly colorWarning95: "hsl(25.110132158590307, 89.0196078431%, 95%)";
72
- readonly colorError: "#e60050";
73
- readonly colorError25: "hsl(339.1304347826087, 100%, 25%)";
74
- readonly colorError40: "hsl(339.1304347826087, 100%, 40%)";
75
- readonly colorError85: "hsl(339.1304347826087, 100%, 85%)";
76
- readonly colorError95: "hsl(339.1304347826087, 100%, 95%)";
66
+ readonly colorWarning: "hsl(35, 90%, 45%)";
67
+ readonly colorWarning25: "hsl(33, 83%, 25%)";
68
+ readonly colorWarning40: "hsl(33, 80%, 34%)";
69
+ readonly colorWarning60: "hsl(35, 90%, 55%)";
70
+ readonly colorWarning85: "hsl(33, 90%, 80%)";
71
+ readonly colorWarning95: "hsl(45, 100%, 92%)";
72
+ readonly colorError: "hsl(3, 65%, 58%)";
73
+ readonly colorError25: "hsl(4, 69%, 37%)";
74
+ readonly colorError40: "hsl(3, 60%, 46%)";
75
+ readonly colorError85: "hsl(1, 55%, 74%)";
76
+ readonly colorError95: "hsl(349, 66%, 92%)";
77
77
  readonly colorSolid: "#1a1a1a";
78
78
  readonly colorSolid02: "hsl(0deg 0% 10% / 2%)";
79
79
  readonly colorSolid05: "hsl(0deg 0% 10% / 5%)";
@@ -182,264 +182,91 @@ export declare const themes: {
182
182
  readonly breakPointBiggerdesktop: "1280px";
183
183
  readonly breakPointGiantdesktop: "1680px";
184
184
  readonly breakPointJumbodesktop: "1920px";
185
- readonly backgroundColorForButtonWhenActive: "hsl(232, 18%, 95%)";
186
- readonly backgroundColorForButtonWhenHovered: "hsl(232, 18%, 98%)";
187
- readonly backgroundColorForButtonWhenDisabled: "hsl(195, 35.2941176471%, 95%)";
188
- readonly backgroundColorForIconButtonWhenDisabled: "hsl(195, 35.2941176471%, 95%)";
189
185
  readonly backgroundColorForInput: "#fff";
190
- readonly backgroundColorForInputWhenSelected: "hsl(195, 35.2941176471%, 95%)";
191
186
  readonly backgroundColorForInputWhenDisabled: "hsl(232, 18%, 95%)";
192
- readonly backgroundColorForInputWhenHovered: "hsl(232, 18%, 98%)";
193
- readonly backgroundColorForInputWhenFocused: "#fff";
194
187
  readonly backgroundColorForInputWhenReadonly: "hsl(232, 18%, 95%)";
195
- readonly backgroundColorForInputWhenActive: "hsl(203.05555555555554, 93.9130434783%, 95%)";
196
- readonly backgroundColorForInputAsQuiet: "transparent";
197
- readonly backgroundColorForInputAsQuietWhenHovered: "hsl(0deg 0% 10% / 2%)";
188
+ readonly backgroundColorForInputWhenHovered: "hsl(244, 100%, 99%)";
198
189
  readonly backgroundColorForLocalizedInputLabel: "#fff";
199
190
  readonly backgroundColorForLocalizedInputLabelWhenReadonly: "hsl(232, 18%, 95%)";
200
191
  readonly backgroundColorForLocalizedInputLabelWhenDisabled: "hsl(232, 18%, 95%)";
201
- readonly backgroundColorForButtonAsPrimary: "#15a390";
202
- readonly backgroundColorForButtonAsPrimaryWhenHovered: "hsl(175, 55%, 45%)";
203
- readonly backgroundColorForButtonAsPrimaryAsDefaultWhenHovered: "#17ab97";
204
- readonly backgroundColorForButtonAsPrimaryAsDefaultWhenActive: "#15a390";
205
- readonly backgroundColorForButtonAsPrimaryAsUrgent: "#f16d0e";
206
- readonly backgroundColorForStampAsPrimary: "hsl(175, 70%, 90%)";
207
- readonly backgroundColorForStampAsPositive: "hsl(175, 70%, 90%)";
208
- readonly backgroundColorForToggleThumbWhenActive: "hsl(175, 55%, 25%)";
209
- readonly backgroundColorForToggleTrackWhenActive: "hsl(175, 55%, 40%)";
210
- readonly backgroundColorForToggleThumbWhenDisabled: "hsl(195, 35.2941176471%, 60%)";
211
- readonly backgroundColorForToggleTrackWhenDisabled: "hsl(195, 35.2941176471%, 90%)";
212
- readonly backgroundColorForToggleThumbWhenActiveWhenDisabled: "hsl(232, 18%, 60%)";
213
- readonly backgroundColorForToggleTrackWhenActiveWhenDisabled: "hsl(232, 18%, 90%)";
214
- readonly backgroundColorForToggleThumbWhenHovered: "rgba(0, 0, 0, 0.1)";
215
- readonly backgroundColorForLoadingSpinnerTrack: "#213c45";
216
- readonly backgroundColorForLoadingSpinnerDot: "#213c45";
217
- readonly backgroundColorForContentNotificationWhenSuccess: "hsl(175, 90%, 95%)";
218
- readonly backgroundColorForViewSwitcherButtonWhenActive: "hsl(232, 18%, 95%)";
219
- readonly backgroundColorForCheckboxInputWhenHovered: "hsl(232, 18%, 90%)";
220
- readonly backgroundColorForRadioOptionWhenHovered: "hsl(232, 18%, 90%)";
221
- readonly backgroundColorForTag: "hsl(232, 18%, 95%)";
222
- readonly backgroundColorForTagWhenHovered: "hsl(232, 18%, 90%)";
223
- readonly backgroundColorForDropdownWhenHovered: "hsl(232, 18%, 95%)";
224
- readonly backgroundColorForDropdownWhenActive: "hsl(232, 18%, 90%)";
225
- readonly backgroundColorForDropdownOptionWhenActive: "hsl(203.05555555555554, 93.9130434783%, 95%)";
192
+ readonly backgroundColorForButtonWhenActive: "hsl(243, 100%, 93%)";
193
+ readonly backgroundColorForButtonWhenHovered: "hsl(244, 100%, 97%)";
194
+ readonly backgroundColorForButtonWhenDisabled: "hsl(232, 18%, 95%)";
226
195
  readonly borderColorForInput: "hsl(232, 18%, 80%)";
227
- readonly borderColorForInputWhenFocused: "hsl(175, 55%, 45%)";
228
196
  readonly borderColorForInputWhenDisabled: "hsl(232, 18%, 80%)";
229
197
  readonly borderColorForInputWhenReadonly: "#fff";
230
- readonly borderColorForInputWhenError: "#e60050";
231
- readonly borderColorForInputWhenWarning: "#f16d0e";
198
+ readonly borderColorForInputWhenError: "hsl(3, 65%, 58%)";
199
+ readonly borderColorForInputWhenWarning: "hsl(35, 90%, 45%)";
232
200
  readonly borderColorForInputWhenHovered: "hsl(232, 18%, 80%)";
233
- readonly borderColorForInputAsQuiet: "transparent";
234
- readonly borderColorForButtonAsSecondary: "hsl(232, 18%, 80%)";
235
- readonly borderColorForDropdown: "hsl(232, 18%, 80%)";
236
- readonly borderColorForContentNotificationWhenSuccess: "hsl(175, 70%, 85%)";
237
- readonly borderColorForCheckboxInput: "hsl(175, 55%, 45%)";
238
- readonly borderColorForCheckboxInputWhenActive: "hsl(175, 55%, 45%)";
239
- readonly borderColorForTag: "hsl(232, 18%, 85%)";
240
- readonly borderRadiusForButtonAsBig: "4px";
241
- readonly borderRadiusForButtonAsMedium: "4px";
201
+ readonly borderColorForInputWhenFocused: "hsl(240, 100%, 67%)";
202
+ readonly borderColorForButtonAsSecondary: "hsl(244, 100%, 84%)";
242
203
  readonly borderRadiusForInput: "4px";
243
- readonly borderWidthForInput: "1px";
244
- readonly borderWidthForInputWhenWarning: "1px";
245
- readonly borderWidthForInputWhenError: "1px";
246
- readonly borderWidthForInputWhenFocused: "1px";
247
204
  readonly fontColorForInput: "#1a1a1a";
248
205
  readonly fontColorForInputWhenDisabled: "hsl(232, 18%, 60%)";
249
- readonly fontColorForInputWhenError: "#e60050";
206
+ readonly fontColorForInputWhenError: "hsl(3, 60%, 46%)";
250
207
  readonly fontColorForInputWhenReadonly: "hsl(232, 18%, 40%)";
251
- readonly fontColorForInputWhenWarning: "#f16d0e";
252
- readonly fontColorForButtonAsSecondary: "#1a1a1a";
253
- readonly fontColorForButtonAsFlatWhenHovered: "hsl(175, 55%, 45%)";
254
- readonly fontColorForButtonAsFlatAsCritical: "#e60050";
255
- readonly fontColorForButtonAsFlatAsCriticalWhenHovered: "hsl(339.1304347826087, 100%, 25%)";
256
- readonly fontColorForViewSwitcherButton: "hsl(232, 18%, 40%)";
257
- readonly fontColorForStampAsPositive: "hsl(175, 55%, 25%)";
258
- readonly fontColorForContentNotificationWhenSuccess: "hsl(175, 55%, 45%)";
259
- readonly fontColorForAvatarAsTurquoise: "hsl(180, 30%, 45%)";
260
- readonly fontColorForLeadingIconAsTurquoise: "hsl(180, 30%, 45%)";
261
- readonly fontColorForTextAsPositive: "hsl(175, 55%, 25%)";
208
+ readonly fontColorForInputWhenWarning: "hsl(35, 90%, 45%)";
209
+ readonly fontColorForButtonAsSecondary: "hsl(240, 64%, 58%)";
262
210
  readonly heightForButtonAsBig: "40px";
263
- readonly heightForButtonAsMedium: "32px";
264
211
  readonly heightForButtonAsSmall: "16px";
212
+ readonly heightForButtonAsMedium: "32px";
265
213
  readonly heightForInput: "40px";
266
214
  readonly heightForInputAsSmall: "32px";
267
- readonly placeholderFontColorForInput: "hsl(232, 18%, 60%)";
268
- readonly fontSizeForButton: "0.875rem";
269
- readonly fontSizeForInput: "1rem";
270
- readonly paddingForInput: "0 var(--spacing-30)";
271
- readonly paddingForInputAsQuiet: "0 var(--spacing-20)";
272
- readonly paddingForButton: "0 var(--spacing-30)";
273
215
  readonly shadowForInput: "none";
274
216
  readonly shadowForInputWhenFocused: "inset 0 0 0 1px var(--color-primary)";
275
217
  readonly shadowForInputWhenError: "inset 0 0 0 1px var(--color-error)";
276
218
  readonly shadowForInputWhenWarning: "inset 0 0 0 1px var(--color-warning)";
277
219
  };
278
- readonly recolouring: {
279
- readonly colorPrimary: "hsl(240, 64%, 58%)";
280
- readonly colorPrimary10: "hsl(240, 66%, 19%)";
281
- readonly colorPrimary20: "hsl(240, 45%, 33%)";
282
- readonly colorPrimary25: "hsl(240, 46%, 48%)";
283
- readonly colorPrimary30: "hsl(240, 46%, 53%)";
284
- readonly colorPrimary40: "hsl(240, 100%, 67%)";
285
- readonly colorPrimary85: "hsl(244, 100%, 84%)";
286
- readonly colorPrimary90: "hsl(243, 100%, 93%)";
287
- readonly colorPrimary95: "hsl(244, 100%, 97%)";
288
- readonly colorPrimary98: "hsl(244, 100%, 99%)";
289
- readonly colorAccent10: "hsl(195, 100%, 10%)";
290
- readonly colorAccent20: "hsl(195, 80%, 20%)";
291
- readonly colorAccent30: "hsl(195, 70%, 30%)";
292
- readonly colorAccent40: "hsl(195, 70%, 40%)";
293
- readonly colorAccent50: "hsl(195, 70%, 50%)";
294
- readonly colorAccent60: "hsl(195, 70%, 60%)";
295
- readonly colorAccent85: "hsl(195, 85%, 85%)";
296
- readonly colorAccent90: "hsl(195, 90%, 90%)";
297
- readonly colorAccent95: "hsl(195, 95%, 95%)";
298
- readonly colorAccent98: "hsl(195, 100%, 98%)";
299
- readonly colorBrown10: "hsl(41, 100%, 10%)";
300
- readonly colorBrown20: "hsl(41, 100%, 20%)";
301
- readonly colorBrown35: "hsl(41, 96%, 35%)";
302
- readonly colorBrown50: "hsl(41, 95%, 44%)";
303
- readonly colorBrown70: "hsl(47, 95%, 70%)";
304
- readonly colorBrown85: "hsl(47, 100%, 85%)";
305
- readonly colorBrown90: "hsl(47, 100%, 90%)";
306
- readonly colorBrown95: "hsl(47, 100%, 95%)";
307
- readonly colorBrown98: "hsl(48, 100%, 97%)";
308
- readonly colorPurple10: "hsl(248, 88%, 10%)";
309
- readonly colorPurple20: "hsl(248, 50%, 20%)";
310
- readonly colorPurple35: "hsl(248, 25%, 35%)";
311
- readonly colorPurple50: "hsl(248, 64%, 58%)";
312
- readonly colorPurple70: "hsl(248, 80%, 70%)";
313
- readonly colorPurple85: "hsl(249, 100%, 85%)";
314
- readonly colorPurple90: "hsl(248, 100%, 90%)";
315
- readonly colorPurple95: "hsl(248, 100%, 95%)";
316
- readonly colorPurple98: "hsl(246, 100%, 98%)";
317
- readonly colorTurquoise10: "hsl(180, 88%, 10%)";
318
- readonly colorTurquoise20: "hsl(180, 90%, 20%)";
319
- readonly colorTurquoise35: "hsl(178, 88%, 35%)";
320
- readonly colorTurquoise50: "hsl(178, 67%, 50%)";
321
- readonly colorTurquoise70: "hsl(180, 75%, 70%)";
322
- readonly colorTurquoise85: "hsl(180, 90%, 85%)";
323
- readonly colorTurquoise90: "hsl(180, 88%, 90%)";
324
- readonly colorTurquoise95: "hsl(180, 88%, 95%)";
325
- readonly colorTurquoise98: "hsl(180, 100%, 98%)";
326
- readonly colorSuccess: "hsl(152, 77%, 39%)";
327
- readonly colorSuccess25: "hsl(155, 84%, 20%)";
328
- readonly colorSuccess40: "hsl(155, 90%, 24%)";
329
- readonly colorSuccess85: "hsl(144, 69%, 80%)";
330
- readonly colorSuccess95: "hsl(141, 76%, 92%)";
331
- readonly colorWarning: "hsl(35, 90%, 45%)";
332
- readonly colorWarning25: "hsl(33, 83%, 25%)";
333
- readonly colorWarning40: "hsl(33, 80%, 34%)";
334
- readonly colorWarning60: "hsl(35, 90%, 55%)";
335
- readonly colorWarning85: "hsl(33, 90%, 80%)";
336
- readonly colorWarning95: "hsl(45, 100%, 92%)";
337
- readonly colorError: "hsl(3, 65%, 58%)";
338
- readonly colorError25: "hsl(4, 69%, 37%)";
339
- readonly colorError40: "hsl(3, 60%, 46%)";
340
- readonly colorError85: "hsl(1, 55%, 74%)";
341
- readonly colorError95: "hsl(349, 66%, 92%)";
342
- readonly borderColorForButtonAsSecondary: "hsl(244, 100%, 84%)";
343
- readonly borderColorForDropdown: "hsl(244, 100%, 84%)";
344
- readonly borderColorForInputWhenFocused: "hsl(240, 100%, 67%)";
345
- readonly borderColorForContentNotificationWhenSuccess: "hsl(144, 69%, 80%)";
346
- readonly borderColorForCheckboxInput: "hsl(232, 18%, 60%)";
347
- readonly borderColorForCheckboxInputWhenActive: "hsl(240, 64%, 58%)";
348
- readonly borderColorForTag: "hsl(243, 100%, 93%)";
349
- readonly backgroundColorForButtonWhenActive: "hsl(243, 100%, 93%)";
350
- readonly backgroundColorForButtonWhenHovered: "hsl(244, 100%, 97%)";
351
- readonly backgroundColorForIconButtonWhenDisabled: "transparent";
352
- readonly backgroundColorForButtonAsPrimary: "hsl(240, 64%, 58%)";
353
- readonly backgroundColorForButtonAsPrimaryWhenHovered: "hsl(240, 100%, 67%)";
354
- readonly backgroundColorForButtonAsPrimaryAsDefaultWhenHovered: "hsl(240, 100%, 67%)";
355
- readonly backgroundColorForButtonAsPrimaryAsDefaultWhenActive: "hsl(240, 46%, 48%)";
356
- readonly backgroundColorForButtonAsPrimaryAsUrgent: "hsl(35, 90%, 55%)";
357
- readonly backgroundColorForInputWhenSelected: "hsl(244, 100%, 97%)";
358
- readonly backgroundColorForStampAsPrimary: "hsl(244, 100%, 97%)";
359
- readonly backgroundColorForStampAsPositive: "hsl(141, 76%, 92%)";
360
- readonly backgroundColorForToggleThumbWhenActive: "hsl(240, 100%, 67%)";
361
- readonly backgroundColorForToggleTrackWhenActive: "hsl(244, 100%, 84%)";
362
- readonly backgroundColorForToggleThumbWhenDisabled: "hsl(232, 18%, 60%)";
363
- readonly backgroundColorForToggleTrackWhenDisabled: "hsl(232, 18%, 90%)";
364
- readonly backgroundColorForToggleThumbWhenActiveWhenDisabled: "hsl(244, 100%, 84%)";
365
- readonly backgroundColorForToggleTrackWhenActiveWhenDisabled: "hsl(243, 100%, 93%)";
366
- readonly backgroundColorForToggleThumbWhenHovered: "hsla(240, 64%, 58%, 4%)";
367
- readonly backgroundColorForLoadingSpinnerTrack: "hsl(243, 100%, 93%)";
368
- readonly backgroundColorForLoadingSpinnerDot: "hsl(240, 64%, 58%)";
369
- readonly backgroundColorForContentNotificationWhenSuccess: "hsl(141, 76%, 92%)";
370
- readonly backgroundColorForViewSwitcherButtonWhenActive: "hsl(244, 100%, 97%)";
371
- readonly backgroundColorForCheckboxInputWhenHovered: "hsl(244, 100%, 97%)";
372
- readonly backgroundColorForRadioOptionWhenHovered: "hsl(244, 100%, 97%)";
373
- readonly backgroundColorForTag: "hsl(244, 100%, 97%)";
374
- readonly backgroundColorForTagWhenHovered: "hsl(243, 100%, 93%)";
375
- readonly backgroundColorForDropdownWhenHovered: "hsl(244, 100%, 97%)";
376
- readonly backgroundColorForDropdownWhenActive: "hsl(243, 100%, 93%)";
377
- readonly backgroundColorForDropdownOptionWhenActive: "hsl(244, 100%, 97%)";
378
- readonly backgroundColorForInputAsQuietWhenHovered: "hsla(240, 64%, 58%, 4%)";
379
- readonly backgroundColorForInputWhenActive: "hsl(244, 100%, 97%)";
380
- readonly backgroundColorForInputWhenHovered: "hsl(244, 100%, 99%)";
381
- readonly fontColorForButtonAsSecondary: "hsl(240, 64%, 58%)";
382
- readonly fontColorForButtonAsFlatWhenHovered: "hsl(240, 100%, 67%)";
383
- readonly fontColorForButtonAsFlatAsCritical: "hsl(3, 60%, 46%)";
384
- readonly fontColorForButtonAsFlatAsCriticalWhenHovered: "hsl(3, 65%, 58%)";
385
- readonly fontColorForViewSwitcherButton: "hsl(240, 64%, 58%)";
386
- readonly fontColorForInputWhenError: "hsl(3, 60%, 46%)";
387
- readonly fontColorForStampAsPositive: "hsl(155, 90%, 24%)";
388
- readonly fontColorForContentNotificationWhenSuccess: "hsl(152, 77%, 39%)";
389
- readonly fontColorForAvatarAsTurquoise: "hsl(178, 88%, 35%)";
390
- readonly fontColorForLeadingIconAsTurquoise: "hsl(178, 88%, 35%)";
391
- readonly fontColorForTextAsPositive: "hsl(155, 90%, 24%)";
392
- };
393
220
  };
394
221
  declare const designTokens: {
395
- readonly colorPrimary: "var(--color-primary, hsl(175, 55%, 45%))";
396
- readonly colorPrimary10: "var(--color-primary-10, hsl(175, 55%, 10%))";
397
- readonly colorPrimary20: "var(--color-primary-20, hsl(175, 55%, 20%))";
398
- readonly colorPrimary25: "var(--color-primary-25, hsl(175, 55%, 25%))";
399
- readonly colorPrimary30: "var(--color-primary-30, hsl(175, 55%, 30%))";
400
- readonly colorPrimary40: "var(--color-primary-40, hsl(175, 55%, 40%))";
401
- readonly colorPrimary85: "var(--color-primary-85, hsl(175, 70%, 85%))";
402
- readonly colorPrimary90: "var(--color-primary-90, hsl(175, 70%, 90%))";
403
- readonly colorPrimary95: "var(--color-primary-95, hsl(175, 90%, 95%))";
404
- readonly colorPrimary98: "var(--color-primary-98, hsl(175, 100%, 99%))";
222
+ readonly colorPrimary: "var(--color-primary, hsl(240, 64%, 58%))";
223
+ readonly colorPrimary10: "var(--color-primary-10, hsl(240, 66%, 19%))";
224
+ readonly colorPrimary20: "var(--color-primary-20, hsl(240, 45%, 33%))";
225
+ readonly colorPrimary25: "var(--color-primary-25, hsl(240, 46%, 48%))";
226
+ readonly colorPrimary30: "var(--color-primary-30, hsl(240, 46%, 53%))";
227
+ readonly colorPrimary40: "var(--color-primary-40, hsl(240, 100%, 67%))";
228
+ readonly colorPrimary85: "var(--color-primary-85, hsl(244, 100%, 84%))";
229
+ readonly colorPrimary90: "var(--color-primary-90, hsl(243, 100%, 93%))";
230
+ readonly colorPrimary95: "var(--color-primary-95, hsl(244, 100%, 97%))";
231
+ readonly colorPrimary98: "var(--color-primary-98, hsl(244, 100%, 99%))";
405
232
  readonly colorAccent: "var(--color-accent, #213c45)";
406
- readonly colorAccent10: "var(--color-accent-10, hsl(195, 35.2941176471%, 10%))";
407
- readonly colorAccent20: "var(--color-accent-20, hsl(195, 35.2941176471%, 20%))";
408
- readonly colorAccent30: "var(--color-accent-30, hsl(195, 35.2941176471%, 30%))";
409
- readonly colorAccent40: "var(--color-accent-40, hsl(195, 35.2941176471%, 40%))";
410
- readonly colorAccent50: "var(--color-accent-50, hsl(195, 35%, 50%))";
411
- readonly colorAccent60: "var(--color-accent-60, hsl(195, 35.2941176471%, 60%))";
412
- readonly colorAccent85: "var(--color-accent-85, hsl(195, 35%, 85%))";
413
- readonly colorAccent90: "var(--color-accent-90, hsl(195, 35.2941176471%, 90%))";
414
- readonly colorAccent95: "var(--color-accent-95, hsl(195, 35.2941176471%, 95%))";
415
- readonly colorAccent98: "var(--color-accent-98, hsl(195, 35.2941176471%, 98%))";
416
- readonly colorBrown10: "var(--color-brown-10, hsl(35, 90%, 10%))";
417
- readonly colorBrown20: "var(--color-brown-20, hsl(35, 50%, 20%))";
418
- readonly colorBrown35: "var(--color-brown-35, hsl(35, 25%, 35%))";
419
- readonly colorBrown50: "var(--color-brown-50, hsl(35, 30%, 50%))";
420
- readonly colorBrown70: "var(--color-brown-70, hsl(35, 40%, 70%))";
421
- readonly colorBrown85: "var(--color-brown-85, hsl(35, 60%, 85%))";
422
- readonly colorBrown90: "var(--color-brown-90, hsl(35, 90%, 90%))";
423
- readonly colorBrown95: "var(--color-brown-95, hsl(35, 80%, 95%))";
424
- readonly colorBrown98: "var(--color-brown-98, hsl(35, 90%, 98%))";
425
- readonly colorPurple10: "var(--color-purple-10, hsl(248, 90%, 10%))";
233
+ readonly colorAccent10: "var(--color-accent-10, hsl(195, 100%, 10%))";
234
+ readonly colorAccent20: "var(--color-accent-20, hsl(195, 80%, 20%))";
235
+ readonly colorAccent30: "var(--color-accent-30, hsl(195, 70%, 30%))";
236
+ readonly colorAccent40: "var(--color-accent-40, hsl(195, 70%, 40%))";
237
+ readonly colorAccent50: "var(--color-accent-50, hsl(195, 70%, 50%))";
238
+ readonly colorAccent60: "var(--color-accent-60, hsl(195, 70%, 60%))";
239
+ readonly colorAccent85: "var(--color-accent-85, hsl(195, 85%, 85%))";
240
+ readonly colorAccent90: "var(--color-accent-90, hsl(195, 90%, 90%))";
241
+ readonly colorAccent95: "var(--color-accent-95, hsl(195, 95%, 95%))";
242
+ readonly colorAccent98: "var(--color-accent-98, hsl(195, 100%, 98%))";
243
+ readonly colorBrown10: "var(--color-brown-10, hsl(41, 100%, 10%))";
244
+ readonly colorBrown20: "var(--color-brown-20, hsl(41, 100%, 20%))";
245
+ readonly colorBrown35: "var(--color-brown-35, hsl(41, 96%, 35%))";
246
+ readonly colorBrown50: "var(--color-brown-50, hsl(41, 95%, 44%))";
247
+ readonly colorBrown70: "var(--color-brown-70, hsl(47, 95%, 70%))";
248
+ readonly colorBrown85: "var(--color-brown-85, hsl(47, 100%, 85%))";
249
+ readonly colorBrown90: "var(--color-brown-90, hsl(47, 100%, 90%))";
250
+ readonly colorBrown95: "var(--color-brown-95, hsl(47, 100%, 95%))";
251
+ readonly colorBrown98: "var(--color-brown-98, hsl(48, 100%, 97%))";
252
+ readonly colorPurple10: "var(--color-purple-10, hsl(248, 88%, 10%))";
426
253
  readonly colorPurple20: "var(--color-purple-20, hsl(248, 50%, 20%))";
427
254
  readonly colorPurple35: "var(--color-purple-35, hsl(248, 25%, 35%))";
428
- readonly colorPurple50: "var(--color-purple-50, hsl(248, 30%,50%))";
429
- readonly colorPurple70: "var(--color-purple-70, hsl(248, 40%, 70%))";
430
- readonly colorPurple85: "var(--color-purple-85, hsl(248, 60%, 85%))";
431
- readonly colorPurple90: "var(--color-purple-90, hsl(248, 50%, 90%))";
432
- readonly colorPurple95: "var(--color-purple-95, hsl(248, 80%, 95%))";
433
- readonly colorPurple98: "var(--color-purple-98, hsl(248, 90%, 98%))";
434
- readonly colorTurquoise10: "var(--color-turquoise-10, hsl(180, 90%, 10%))";
435
- readonly colorTurquoise20: "var(--color-turquoise-20, hsl(180, 50%, 20%))";
436
- readonly colorTurquoise35: "var(--color-turquoise-35, hsl(180, 25%, 35%))";
437
- readonly colorTurquoise50: "var(--color-turquoise-50, hsl(180, 30%, 45%))";
438
- readonly colorTurquoise70: "var(--color-turquoise-70, hsl(180, 40%, 70%))";
439
- readonly colorTurquoise85: "var(--color-turquoise-85, hsl(180, 60%, 85%))";
440
- readonly colorTurquoise90: "var(--color-turquoise-90, hsl(180, 40%, 90%))";
441
- readonly colorTurquoise95: "var(--color-turquoise-95, hsl(180, 80%, 95%))";
442
- readonly colorTurquoise98: "var(--color-turquoise-98, hsl(180, 90%, 98%))";
255
+ readonly colorPurple50: "var(--color-purple-50, hsl(248, 64%, 58%))";
256
+ readonly colorPurple70: "var(--color-purple-70, hsl(248, 80%, 70%))";
257
+ readonly colorPurple85: "var(--color-purple-85, hsl(249, 100%, 85%))";
258
+ readonly colorPurple90: "var(--color-purple-90, hsl(248, 100%, 90%))";
259
+ readonly colorPurple95: "var(--color-purple-95, hsl(248, 100%, 95%))";
260
+ readonly colorPurple98: "var(--color-purple-98, hsl(246, 100%, 98%))";
261
+ readonly colorTurquoise10: "var(--color-turquoise-10, hsl(180, 88%, 10%))";
262
+ readonly colorTurquoise20: "var(--color-turquoise-20, hsl(180, 90%, 20%))";
263
+ readonly colorTurquoise35: "var(--color-turquoise-35, hsl(178, 88%, 35%))";
264
+ readonly colorTurquoise50: "var(--color-turquoise-50, hsl(178, 67%, 50%))";
265
+ readonly colorTurquoise70: "var(--color-turquoise-70, hsl(180, 75%, 70%))";
266
+ readonly colorTurquoise85: "var(--color-turquoise-85, hsl(180, 90%, 85%))";
267
+ readonly colorTurquoise90: "var(--color-turquoise-90, hsl(180, 88%, 90%))";
268
+ readonly colorTurquoise95: "var(--color-turquoise-95, hsl(180, 88%, 95%))";
269
+ readonly colorTurquoise98: "var(--color-turquoise-98, hsl(180, 100%, 98%))";
443
270
  readonly colorNeutral: "var(--color-neutral, hsl(232, 18%, 80%))";
444
271
  readonly colorNeutral05: "var(--color-neutral-05, hsl(0deg 0% 80% / 5%))";
445
272
  readonly colorNeutral10: "var(--color-neutral-10, hsl(0deg 0% 80% / 10%))";
@@ -455,17 +282,17 @@ declare const designTokens: {
455
282
  readonly colorInfo85: "var(--color-info-85, hsl(203.05555555555554, 93.9130434783%, 85%))";
456
283
  readonly colorInfo90: "var(--color-info-90, #CEEBFD)";
457
284
  readonly colorInfo95: "var(--color-info-95, hsl(203.05555555555554, 93.9130434783%, 95%))";
458
- readonly colorWarning: "var(--color-warning, #f16d0e)";
459
- readonly colorWarning25: "var(--color-warning-25, hsl(25.110132158590307, 89.0196078431%, 25%))";
460
- readonly colorWarning40: "var(--color-warning-40, hsl(25.110132158590307, 89.0196078431%, 40%))";
461
- readonly colorWarning60: "var(--color-warning-60, hsl(25.110132158590307, 90%, 60%))";
462
- readonly colorWarning85: "var(--color-warning-85, hsl(25.110132158590307, 89.0196078431%, 85%))";
463
- readonly colorWarning95: "var(--color-warning-95, hsl(25.110132158590307, 89.0196078431%, 95%))";
464
- readonly colorError: "var(--color-error, #e60050)";
465
- readonly colorError25: "var(--color-error-25, hsl(339.1304347826087, 100%, 25%))";
466
- readonly colorError40: "var(--color-error-40, hsl(339.1304347826087, 100%, 40%))";
467
- readonly colorError85: "var(--color-error-85, hsl(339.1304347826087, 100%, 85%))";
468
- readonly colorError95: "var(--color-error-95, hsl(339.1304347826087, 100%, 95%))";
285
+ readonly colorWarning: "var(--color-warning, hsl(35, 90%, 45%))";
286
+ readonly colorWarning25: "var(--color-warning-25, hsl(33, 83%, 25%))";
287
+ readonly colorWarning40: "var(--color-warning-40, hsl(33, 80%, 34%))";
288
+ readonly colorWarning60: "var(--color-warning-60, hsl(35, 90%, 55%))";
289
+ readonly colorWarning85: "var(--color-warning-85, hsl(33, 90%, 80%))";
290
+ readonly colorWarning95: "var(--color-warning-95, hsl(45, 100%, 92%))";
291
+ readonly colorError: "var(--color-error, hsl(3, 65%, 58%))";
292
+ readonly colorError25: "var(--color-error-25, hsl(4, 69%, 37%))";
293
+ readonly colorError40: "var(--color-error-40, hsl(3, 60%, 46%))";
294
+ readonly colorError85: "var(--color-error-85, hsl(1, 55%, 74%))";
295
+ readonly colorError95: "var(--color-error-95, hsl(349, 66%, 92%))";
469
296
  readonly colorSolid: "var(--color-solid, #1a1a1a)";
470
297
  readonly colorSolid02: "var(--color-solid-02, hsl(0deg 0% 10% / 2%))";
471
298
  readonly colorSolid05: "var(--color-solid-05, hsl(0deg 0% 10% / 5%))";
@@ -574,94 +401,36 @@ declare const designTokens: {
574
401
  readonly breakPointBiggerdesktop: "var(--break-point-biggerdesktop, 1280px)";
575
402
  readonly breakPointGiantdesktop: "var(--break-point-giantdesktop, 1680px)";
576
403
  readonly breakPointJumbodesktop: "var(--break-point-jumbodesktop, 1920px)";
577
- readonly backgroundColorForButtonWhenActive: "var(--background-color-for-button-when-active, hsl(232, 18%, 95%))";
578
- readonly backgroundColorForButtonWhenHovered: "var(--background-color-for-button-when-hovered, hsl(232, 18%, 98%))";
579
- readonly backgroundColorForButtonWhenDisabled: "var(--background-color-for-button-when-disabled, hsl(195, 35.2941176471%, 95%))";
580
- readonly backgroundColorForIconButtonWhenDisabled: "var(--background-color-for-icon-button-when-disabled, hsl(195, 35.2941176471%, 95%))";
581
404
  readonly backgroundColorForInput: "var(--background-color-for-input, #fff)";
582
- readonly backgroundColorForInputWhenSelected: "var(--background-color-for-input-when-selected, hsl(195, 35.2941176471%, 95%))";
583
405
  readonly backgroundColorForInputWhenDisabled: "var(--background-color-for-input-when-disabled, hsl(232, 18%, 95%))";
584
- readonly backgroundColorForInputWhenHovered: "var(--background-color-for-input-when-hovered, hsl(232, 18%, 98%))";
585
- readonly backgroundColorForInputWhenFocused: "var(--background-color-for-input-when-focused, #fff)";
586
406
  readonly backgroundColorForInputWhenReadonly: "var(--background-color-for-input-when-readonly, hsl(232, 18%, 95%))";
587
- readonly backgroundColorForInputWhenActive: "var(--background-color-for-input-when-active, hsl(203.05555555555554, 93.9130434783%, 95%))";
588
- readonly backgroundColorForInputAsQuiet: "var(--background-color-for-input-as-quiet, transparent)";
589
- readonly backgroundColorForInputAsQuietWhenHovered: "var(--background-color-for-input-as-quiet-when-hovered, hsl(0deg 0% 10% / 2%))";
407
+ readonly backgroundColorForInputWhenHovered: "var(--background-color-for-input-when-hovered, hsl(244, 100%, 99%))";
590
408
  readonly backgroundColorForLocalizedInputLabel: "var(--background-color-for-localized-input-label, #fff)";
591
409
  readonly backgroundColorForLocalizedInputLabelWhenReadonly: "var(--background-color-for-localized-input-label-when-readonly, hsl(232, 18%, 95%))";
592
410
  readonly backgroundColorForLocalizedInputLabelWhenDisabled: "var(--background-color-for-localized-input-label-when-disabled, hsl(232, 18%, 95%))";
593
- readonly backgroundColorForButtonAsPrimary: "var(--background-color-for-button-as-primary, #15a390)";
594
- readonly backgroundColorForButtonAsPrimaryWhenHovered: "var(--background-color-for-button-as-primary-when-hovered, hsl(175, 55%, 45%))";
595
- readonly backgroundColorForButtonAsPrimaryAsDefaultWhenHovered: "var(--background-color-for-button-as-primary-as-default-when-hovered, #17ab97)";
596
- readonly backgroundColorForButtonAsPrimaryAsDefaultWhenActive: "var(--background-color-for-button-as-primary-as-default-when-active, #15a390)";
597
- readonly backgroundColorForButtonAsPrimaryAsUrgent: "var(--background-color-for-button-as-primary-as-urgent, #f16d0e)";
598
- readonly backgroundColorForStampAsPrimary: "var(--background-color-for-stamp-as-primary, hsl(175, 70%, 90%))";
599
- readonly backgroundColorForStampAsPositive: "var(--background-color-for-stamp-as-positive, hsl(175, 70%, 90%))";
600
- readonly backgroundColorForToggleThumbWhenActive: "var(--background-color-for-toggle-thumb-when-active, hsl(175, 55%, 25%))";
601
- readonly backgroundColorForToggleTrackWhenActive: "var(--background-color-for-toggle-track-when-active, hsl(175, 55%, 40%))";
602
- readonly backgroundColorForToggleThumbWhenDisabled: "var(--background-color-for-toggle-thumb-when-disabled, hsl(195, 35.2941176471%, 60%))";
603
- readonly backgroundColorForToggleTrackWhenDisabled: "var(--background-color-for-toggle-track-when-disabled, hsl(195, 35.2941176471%, 90%))";
604
- readonly backgroundColorForToggleThumbWhenActiveWhenDisabled: "var(--background-color-for-toggle-thumb-when-active-when-disabled, hsl(232, 18%, 60%))";
605
- readonly backgroundColorForToggleTrackWhenActiveWhenDisabled: "var(--background-color-for-toggle-track-when-active-when-disabled, hsl(232, 18%, 90%))";
606
- readonly backgroundColorForToggleThumbWhenHovered: "var(--background-color-for-toggle-thumb-when-hovered, rgba(0, 0, 0, 0.1))";
607
- readonly backgroundColorForLoadingSpinnerTrack: "var(--background-color-for-loading-spinner-track, #213c45)";
608
- readonly backgroundColorForLoadingSpinnerDot: "var(--background-color-for-loading-spinner-dot, #213c45)";
609
- readonly backgroundColorForContentNotificationWhenSuccess: "var(--background-color-for-content-notification-when-success, hsl(175, 90%, 95%))";
610
- readonly backgroundColorForViewSwitcherButtonWhenActive: "var(--background-color-for-view-switcher-button-when-active, hsl(232, 18%, 95%))";
611
- readonly backgroundColorForCheckboxInputWhenHovered: "var(--background-color-for-checkbox-input-when-hovered, hsl(232, 18%, 90%))";
612
- readonly backgroundColorForRadioOptionWhenHovered: "var(--background-color-for-radio-option-when-hovered, hsl(232, 18%, 90%))";
613
- readonly backgroundColorForTag: "var(--background-color-for-tag, hsl(232, 18%, 95%))";
614
- readonly backgroundColorForTagWhenHovered: "var(--background-color-for-tag-when-hovered, hsl(232, 18%, 90%))";
615
- readonly backgroundColorForDropdownWhenHovered: "var(--background-color-for-dropdown-when-hovered, hsl(232, 18%, 95%))";
616
- readonly backgroundColorForDropdownWhenActive: "var(--background-color-for-dropdown-when-active, hsl(232, 18%, 90%))";
617
- readonly backgroundColorForDropdownOptionWhenActive: "var(--background-color-for-dropdown-option-when-active, hsl(203.05555555555554, 93.9130434783%, 95%))";
411
+ readonly backgroundColorForButtonWhenActive: "var(--background-color-for-button-when-active, hsl(243, 100%, 93%))";
412
+ readonly backgroundColorForButtonWhenHovered: "var(--background-color-for-button-when-hovered, hsl(244, 100%, 97%))";
413
+ readonly backgroundColorForButtonWhenDisabled: "var(--background-color-for-button-when-disabled, hsl(232, 18%, 95%))";
618
414
  readonly borderColorForInput: "var(--border-color-for-input, hsl(232, 18%, 80%))";
619
- readonly borderColorForInputWhenFocused: "var(--border-color-for-input-when-focused, hsl(175, 55%, 45%))";
620
415
  readonly borderColorForInputWhenDisabled: "var(--border-color-for-input-when-disabled, hsl(232, 18%, 80%))";
621
416
  readonly borderColorForInputWhenReadonly: "var(--border-color-for-input-when-readonly, #fff)";
622
- readonly borderColorForInputWhenError: "var(--border-color-for-input-when-error, #e60050)";
623
- readonly borderColorForInputWhenWarning: "var(--border-color-for-input-when-warning, #f16d0e)";
417
+ readonly borderColorForInputWhenError: "var(--border-color-for-input-when-error, hsl(3, 65%, 58%))";
418
+ readonly borderColorForInputWhenWarning: "var(--border-color-for-input-when-warning, hsl(35, 90%, 45%))";
624
419
  readonly borderColorForInputWhenHovered: "var(--border-color-for-input-when-hovered, hsl(232, 18%, 80%))";
625
- readonly borderColorForInputAsQuiet: "var(--border-color-for-input-as-quiet, transparent)";
626
- readonly borderColorForButtonAsSecondary: "var(--border-color-for-button-as-secondary, hsl(232, 18%, 80%))";
627
- readonly borderColorForDropdown: "var(--border-color-for-dropdown, hsl(232, 18%, 80%))";
628
- readonly borderColorForContentNotificationWhenSuccess: "var(--border-color-for-content-notification-when-success, hsl(175, 70%, 85%))";
629
- readonly borderColorForCheckboxInput: "var(--border-color-for-checkbox-input, hsl(175, 55%, 45%))";
630
- readonly borderColorForCheckboxInputWhenActive: "var(--border-color-for-checkbox-input-when-active, hsl(175, 55%, 45%))";
631
- readonly borderColorForTag: "var(--border-color-for-tag, hsl(232, 18%, 85%))";
632
- readonly borderRadiusForButtonAsBig: "var(--border-radius-for-button-as-big, 4px)";
633
- readonly borderRadiusForButtonAsMedium: "var(--border-radius-for-button-as-medium, 4px)";
420
+ readonly borderColorForInputWhenFocused: "var(--border-color-for-input-when-focused, hsl(240, 100%, 67%))";
421
+ readonly borderColorForButtonAsSecondary: "var(--border-color-for-button-as-secondary, hsl(244, 100%, 84%))";
634
422
  readonly borderRadiusForInput: "var(--border-radius-for-input, 4px)";
635
- readonly borderWidthForInput: "var(--border-width-for-input, 1px)";
636
- readonly borderWidthForInputWhenWarning: "var(--border-width-for-input-when-warning, 1px)";
637
- readonly borderWidthForInputWhenError: "var(--border-width-for-input-when-error, 1px)";
638
- readonly borderWidthForInputWhenFocused: "var(--border-width-for-input-when-focused, 1px)";
639
423
  readonly fontColorForInput: "var(--font-color-for-input, #1a1a1a)";
640
424
  readonly fontColorForInputWhenDisabled: "var(--font-color-for-input-when-disabled, hsl(232, 18%, 60%))";
641
- readonly fontColorForInputWhenError: "var(--font-color-for-input-when-error, #e60050)";
425
+ readonly fontColorForInputWhenError: "var(--font-color-for-input-when-error, hsl(3, 60%, 46%))";
642
426
  readonly fontColorForInputWhenReadonly: "var(--font-color-for-input-when-readonly, hsl(232, 18%, 40%))";
643
- readonly fontColorForInputWhenWarning: "var(--font-color-for-input-when-warning, #f16d0e)";
644
- readonly fontColorForButtonAsSecondary: "var(--font-color-for-button-as-secondary, #1a1a1a)";
645
- readonly fontColorForButtonAsFlatWhenHovered: "var(--font-color-for-button-as-flat-when-hovered, hsl(175, 55%, 45%))";
646
- readonly fontColorForButtonAsFlatAsCritical: "var(--font-color-for-button-as-flat-as-critical, #e60050)";
647
- readonly fontColorForButtonAsFlatAsCriticalWhenHovered: "var(--font-color-for-button-as-flat-as-critical-when-hovered, hsl(339.1304347826087, 100%, 25%))";
648
- readonly fontColorForViewSwitcherButton: "var(--font-color-for-view-switcher-button, hsl(232, 18%, 40%))";
649
- readonly fontColorForStampAsPositive: "var(--font-color-for-stamp-as-positive, hsl(175, 55%, 25%))";
650
- readonly fontColorForContentNotificationWhenSuccess: "var(--font-color-for-content-notification-when-success, hsl(175, 55%, 45%))";
651
- readonly fontColorForAvatarAsTurquoise: "var(--font-color-for-avatar-as-turquoise, hsl(180, 30%, 45%))";
652
- readonly fontColorForLeadingIconAsTurquoise: "var(--font-color-for-leading-icon-as-turquoise, hsl(180, 30%, 45%))";
653
- readonly fontColorForTextAsPositive: "var(--font-color-for-text-as-positive, hsl(175, 55%, 25%))";
427
+ readonly fontColorForInputWhenWarning: "var(--font-color-for-input-when-warning, hsl(35, 90%, 45%))";
428
+ readonly fontColorForButtonAsSecondary: "var(--font-color-for-button-as-secondary, hsl(240, 64%, 58%))";
654
429
  readonly heightForButtonAsBig: "var(--height-for-button-as-big, 40px)";
655
- readonly heightForButtonAsMedium: "var(--height-for-button-as-medium, 32px)";
656
430
  readonly heightForButtonAsSmall: "var(--height-for-button-as-small, 16px)";
431
+ readonly heightForButtonAsMedium: "var(--height-for-button-as-medium, 32px)";
657
432
  readonly heightForInput: "var(--height-for-input, 40px)";
658
433
  readonly heightForInputAsSmall: "var(--height-for-input-as-small, 32px)";
659
- readonly placeholderFontColorForInput: "var(--placeholder-font-color-for-input, hsl(232, 18%, 60%))";
660
- readonly fontSizeForButton: "var(--font-size-for-button, 0.875rem)";
661
- readonly fontSizeForInput: "var(--font-size-for-input, 1rem)";
662
- readonly paddingForInput: "var(--padding-for-input, 0 var(--spacing-30))";
663
- readonly paddingForInputAsQuiet: "var(--padding-for-input-as-quiet, 0 var(--spacing-20))";
664
- readonly paddingForButton: "var(--padding-for-button, 0 var(--spacing-30))";
665
434
  readonly shadowForInput: "var(--shadow-for-input, none)";
666
435
  readonly shadowForInputWhenFocused: "var(--shadow-for-input-when-focused, inset 0 0 0 1px var(--color-primary))";
667
436
  readonly shadowForInputWhenError: "var(--shadow-for-input-when-error, inset 0 0 0 1px var(--color-error))";