@commercetools-uikit/design-system 18.0.0 → 18.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.
- package/dist/commercetools-uikit-design-system.cjs.dev.js +90 -2
- package/dist/commercetools-uikit-design-system.cjs.prod.js +90 -2
- package/dist/commercetools-uikit-design-system.esm.js +90 -2
- package/dist/declarations/src/design-tokens.d.ts +88 -0
- package/materials/custom-properties.css +34 -0
- package/materials/custom-properties.json +30 -0
- package/materials/internals/definition.yaml +158 -0
- package/materials/resets.css +2 -2
- package/package.json +2 -2
|
@@ -55,6 +55,7 @@ var kebabCase__default = /*#__PURE__*/_interopDefault(kebabCase);
|
|
|
55
55
|
const themes = {
|
|
56
56
|
default: {
|
|
57
57
|
colorPrimary: 'hsl(175, 55%, 45%)',
|
|
58
|
+
colorPrimary10: 'hsl(240, 66%, 19%)',
|
|
58
59
|
colorPrimary20: 'hsl(175, 55%, 20%)',
|
|
59
60
|
colorPrimary25: 'hsl(175, 55%, 25%)',
|
|
60
61
|
colorPrimary30: 'hsl(175, 55%, 30%)',
|
|
@@ -117,6 +118,7 @@ const themes = {
|
|
|
117
118
|
colorWarning: '#f16d0e',
|
|
118
119
|
colorWarning25: 'hsl(25.110132158590307, 89.0196078431%, 25%)',
|
|
119
120
|
colorWarning40: 'hsl(25.110132158590307, 89.0196078431%, 40%)',
|
|
121
|
+
colorWarning60: 'hsl(35, 90%, 55%)',
|
|
120
122
|
colorWarning85: 'hsl(25.110132158590307, 89.0196078431%, 85%)',
|
|
121
123
|
colorWarning95: 'hsl(25.110132158590307, 89.0196078431%, 95%)',
|
|
122
124
|
colorError: '#e60050',
|
|
@@ -130,6 +132,11 @@ const themes = {
|
|
|
130
132
|
colorSolid10: 'hsl(0deg 0% 10% / 10%)',
|
|
131
133
|
colorSurface: '#fff',
|
|
132
134
|
colorTransparent: 'transparent',
|
|
135
|
+
colorSuccess: 'hsl(152, 77%, 39%)',
|
|
136
|
+
colorSuccess25: 'hsl(155, 84%, 20%)',
|
|
137
|
+
colorSuccess40: 'hsl(155, 90%, 24%)',
|
|
138
|
+
colorSuccess85: 'hsl(144, 69%, 80%)',
|
|
139
|
+
colorSuccess95: 'hsl(141, 76%, 92%)',
|
|
133
140
|
borderRadius1: '1px',
|
|
134
141
|
borderRadius2: '2px',
|
|
135
142
|
borderRadius4: '4px',
|
|
@@ -242,6 +249,20 @@ const themes = {
|
|
|
242
249
|
backgroundColorForLocalizedInputLabel: '#fff',
|
|
243
250
|
backgroundColorForLocalizedInputLabelWhenReadonly: 'hsl(232, 18%, 95%)',
|
|
244
251
|
backgroundColorForLocalizedInputLabelWhenDisabled: 'hsl(232, 18%, 95%)',
|
|
252
|
+
backgroundColorForButtonAsPrimary: '#15a390',
|
|
253
|
+
backgroundColorForButtonAsPrimaryWhenHovered: 'hsl(175, 55%, 45%)',
|
|
254
|
+
backgroundColorForButtonAsPrimaryAsDefaultWhenHovered: '#17ab97',
|
|
255
|
+
backgroundColorForButtonAsPrimaryAsDefaultWhenActive: '#15a390',
|
|
256
|
+
backgroundColorForButtonAsPrimaryAsUrgent: '#f16d0e',
|
|
257
|
+
backgroundColorForStampAsPrimary: 'hsl(175, 70%, 90%)',
|
|
258
|
+
backgroundColorForStampAsPositive: 'hsl(175, 70%, 90%)',
|
|
259
|
+
backgroundColorForToggleThumbWhenActive: 'hsl(175, 55%, 25%)',
|
|
260
|
+
backgroundColorForToggleTrackWhenActive: 'hsl(175, 55%, 40%)',
|
|
261
|
+
backgroundColorForToggleThumbWhenDisabled: 'hsl(232, 18%, 60%)',
|
|
262
|
+
backgroundColorForToggleTrackWhenDisabled: 'hsl(232, 18%, 90%)',
|
|
263
|
+
backgroundColorForLoadingSpinnerTrack: '#213c45',
|
|
264
|
+
backgroundColorForLoadingSpinnerDot: '#213c45',
|
|
265
|
+
backgroundColorForContentNotificationWhenSuccess: 'hsl(175, 90%, 95%)',
|
|
245
266
|
borderColorForInput: 'hsl(232, 18%, 80%)',
|
|
246
267
|
borderColorForInputWhenFocused: 'hsl(175, 55%, 45%)',
|
|
247
268
|
borderColorForInputWhenDisabled: 'hsl(232, 18%, 80%)',
|
|
@@ -250,6 +271,8 @@ const themes = {
|
|
|
250
271
|
borderColorForInputWhenWarning: '#f16d0e',
|
|
251
272
|
borderColorForInputWhenHovered: 'hsl(232, 18%, 80%)',
|
|
252
273
|
borderColorForInputAsQuiet: 'transparent',
|
|
274
|
+
borderColorForButtonAsSecondary: 'hsl(232, 18%, 80%)',
|
|
275
|
+
borderColorForContentNotificationWhenSuccess: 'hsl(175, 70%, 85%)',
|
|
253
276
|
borderRadiusForButtonAsBig: '4px',
|
|
254
277
|
borderRadiusForButtonAsMedium: '4px',
|
|
255
278
|
borderRadiusForInput: '4px',
|
|
@@ -262,6 +285,13 @@ const themes = {
|
|
|
262
285
|
fontColorForInputWhenError: '#e60050',
|
|
263
286
|
fontColorForInputWhenReadonly: 'hsl(232, 18%, 40%)',
|
|
264
287
|
fontColorForInputWhenWarning: '#f16d0e',
|
|
288
|
+
fontColorForButtonAsSecondary: '#1a1a1a',
|
|
289
|
+
fontColorForButtonAsFlatWhenHovered: 'hsl(175, 55%, 45%)',
|
|
290
|
+
fontColorForButtonAsFlatAsCritical: '#e60050',
|
|
291
|
+
fontColorForButtonAsFlatAsCriticalWhenHovered: 'hsl(339.1304347826087, 100%, 25%)',
|
|
292
|
+
fontColorForViewSwitcherButton: 'hsl(232, 18%, 40%)',
|
|
293
|
+
fontColorForStampAsPositive: 'hsl(175, 55%, 25%)',
|
|
294
|
+
fontColorForContentNotificationWhenSuccess: 'hsl(175, 55%, 45%)',
|
|
265
295
|
heightForButtonAsBig: '40px',
|
|
266
296
|
heightForButtonAsMedium: '32px',
|
|
267
297
|
heightForButtonAsSmall: '16px',
|
|
@@ -303,11 +333,40 @@ const themes = {
|
|
|
303
333
|
colorError25: 'hsl(4, 69%, 37%)',
|
|
304
334
|
colorError40: 'hsl(3, 60%, 46%)',
|
|
305
335
|
colorError85: 'hsl(1, 55%, 74%)',
|
|
306
|
-
colorError95: 'hsl(349, 66%, 92%)'
|
|
336
|
+
colorError95: 'hsl(349, 66%, 92%)',
|
|
337
|
+
borderColorForButtonAsSecondary: 'hsl(244, 100%, 84%)',
|
|
338
|
+
borderColorForInputWhenFocused: 'hsl(240, 100%, 67%)',
|
|
339
|
+
borderColorForContentNotificationWhenSuccess: 'hsl(144, 69%, 80%)',
|
|
340
|
+
backgroundColorForButtonWhenActive: 'hsl(243, 100%, 93%)',
|
|
341
|
+
backgroundColorForButtonWhenHovered: 'hsl(244, 100%, 97%)',
|
|
342
|
+
backgroundColorForButtonAsPrimary: 'hsl(240, 64%, 58%)',
|
|
343
|
+
backgroundColorForButtonAsPrimaryWhenHovered: 'hsl(240, 100%, 67%)',
|
|
344
|
+
backgroundColorForButtonAsPrimaryAsDefaultWhenHovered: 'hsl(240, 100%, 67%)',
|
|
345
|
+
backgroundColorForButtonAsPrimaryAsDefaultWhenActive: 'hsl(240, 46%, 48%)',
|
|
346
|
+
backgroundColorForButtonAsPrimaryAsUrgent: 'hsl(35, 90%, 55%)',
|
|
347
|
+
backgroundColorForInputWhenSelected: 'hsl(244, 100%, 97%)',
|
|
348
|
+
backgroundColorForStampAsPrimary: 'hsl(244, 100%, 97%)',
|
|
349
|
+
backgroundColorForStampAsPositive: 'hsl(141, 76%, 92%)',
|
|
350
|
+
backgroundColorForToggleThumbWhenActive: 'hsl(240, 100%, 67%)',
|
|
351
|
+
backgroundColorForToggleTrackWhenActive: 'hsl(244, 100%, 84%)',
|
|
352
|
+
backgroundColorForToggleThumbWhenDisabled: 'hsl(244, 100%, 84%)',
|
|
353
|
+
backgroundColorForToggleTrackWhenDisabled: 'hsl(243, 100%, 93%)',
|
|
354
|
+
backgroundColorForLoadingSpinnerTrack: 'hsl(243, 100%, 93%)',
|
|
355
|
+
backgroundColorForLoadingSpinnerDot: 'hsl(240, 64%, 58%)',
|
|
356
|
+
backgroundColorForContentNotificationWhenSuccess: 'hsl(141, 76%, 92%)',
|
|
357
|
+
fontColorForButtonAsSecondary: 'hsl(240, 64%, 58%)',
|
|
358
|
+
fontColorForButtonAsFlatWhenHovered: 'hsl(240, 100%, 67%)',
|
|
359
|
+
fontColorForButtonAsFlatAsCritical: 'hsl(3, 60%, 46%)',
|
|
360
|
+
fontColorForButtonAsFlatAsCriticalWhenHovered: 'hsl(3, 65%, 58%)',
|
|
361
|
+
fontColorForViewSwitcherButton: 'hsl(240, 64%, 58%)',
|
|
362
|
+
fontColorForInputWhenError: 'hsl(3, 60%, 46%)',
|
|
363
|
+
fontColorForStampAsPositive: 'hsl(155, 90%, 24%)',
|
|
364
|
+
fontColorForContentNotificationWhenSuccess: 'hsl(152, 77%, 39%)'
|
|
307
365
|
}
|
|
308
366
|
};
|
|
309
367
|
const designTokens = {
|
|
310
368
|
colorPrimary: 'var(--color-primary, hsl(175, 55%, 45%))',
|
|
369
|
+
colorPrimary10: 'var(--color-primary-10, hsl(240, 66%, 19%))',
|
|
311
370
|
colorPrimary20: 'var(--color-primary-20, hsl(175, 55%, 20%))',
|
|
312
371
|
colorPrimary25: 'var(--color-primary-25, hsl(175, 55%, 25%))',
|
|
313
372
|
colorPrimary30: 'var(--color-primary-30, hsl(175, 55%, 30%))',
|
|
@@ -370,6 +429,7 @@ const designTokens = {
|
|
|
370
429
|
colorWarning: 'var(--color-warning, #f16d0e)',
|
|
371
430
|
colorWarning25: 'var(--color-warning-25, hsl(25.110132158590307, 89.0196078431%, 25%))',
|
|
372
431
|
colorWarning40: 'var(--color-warning-40, hsl(25.110132158590307, 89.0196078431%, 40%))',
|
|
432
|
+
colorWarning60: 'var(--color-warning-60, hsl(35, 90%, 55%))',
|
|
373
433
|
colorWarning85: 'var(--color-warning-85, hsl(25.110132158590307, 89.0196078431%, 85%))',
|
|
374
434
|
colorWarning95: 'var(--color-warning-95, hsl(25.110132158590307, 89.0196078431%, 95%))',
|
|
375
435
|
colorError: 'var(--color-error, #e60050)',
|
|
@@ -383,6 +443,11 @@ const designTokens = {
|
|
|
383
443
|
colorSolid10: 'var(--color-solid-10, hsl(0deg 0% 10% / 10%))',
|
|
384
444
|
colorSurface: 'var(--color-surface, #fff)',
|
|
385
445
|
colorTransparent: 'var(--color-transparent, transparent)',
|
|
446
|
+
colorSuccess: 'var(--color-success, hsl(152, 77%, 39%))',
|
|
447
|
+
colorSuccess25: 'var(--color-success-25, hsl(155, 84%, 20%))',
|
|
448
|
+
colorSuccess40: 'var(--color-success-40, hsl(155, 90%, 24%))',
|
|
449
|
+
colorSuccess85: 'var(--color-success-85, hsl(144, 69%, 80%))',
|
|
450
|
+
colorSuccess95: 'var(--color-success-95, hsl(141, 76%, 92%))',
|
|
386
451
|
borderRadius1: 'var(--border-radius-1, 1px)',
|
|
387
452
|
borderRadius2: 'var(--border-radius-2, 2px)',
|
|
388
453
|
borderRadius4: 'var(--border-radius-4, 4px)',
|
|
@@ -495,6 +560,20 @@ const designTokens = {
|
|
|
495
560
|
backgroundColorForLocalizedInputLabel: 'var(--background-color-for-localized-input-label, #fff)',
|
|
496
561
|
backgroundColorForLocalizedInputLabelWhenReadonly: 'var(--background-color-for-localized-input-label-when-readonly, hsl(232, 18%, 95%))',
|
|
497
562
|
backgroundColorForLocalizedInputLabelWhenDisabled: 'var(--background-color-for-localized-input-label-when-disabled, hsl(232, 18%, 95%))',
|
|
563
|
+
backgroundColorForButtonAsPrimary: 'var(--background-color-for-button-as-primary, #15a390)',
|
|
564
|
+
backgroundColorForButtonAsPrimaryWhenHovered: 'var(--background-color-for-button-as-primary-when-hovered, hsl(175, 55%, 45%))',
|
|
565
|
+
backgroundColorForButtonAsPrimaryAsDefaultWhenHovered: 'var(--background-color-for-button-as-primary-as-default-when-hovered, #17ab97)',
|
|
566
|
+
backgroundColorForButtonAsPrimaryAsDefaultWhenActive: 'var(--background-color-for-button-as-primary-as-default-when-active, #15a390)',
|
|
567
|
+
backgroundColorForButtonAsPrimaryAsUrgent: 'var(--background-color-for-button-as-primary-as-urgent, #f16d0e)',
|
|
568
|
+
backgroundColorForStampAsPrimary: 'var(--background-color-for-stamp-as-primary, hsl(175, 70%, 90%))',
|
|
569
|
+
backgroundColorForStampAsPositive: 'var(--background-color-for-stamp-as-positive, hsl(175, 70%, 90%))',
|
|
570
|
+
backgroundColorForToggleThumbWhenActive: 'var(--background-color-for-toggle-thumb-when-active, hsl(175, 55%, 25%))',
|
|
571
|
+
backgroundColorForToggleTrackWhenActive: 'var(--background-color-for-toggle-track-when-active, hsl(175, 55%, 40%))',
|
|
572
|
+
backgroundColorForToggleThumbWhenDisabled: 'var(--background-color-for-toggle-thumb-when-disabled, hsl(232, 18%, 60%))',
|
|
573
|
+
backgroundColorForToggleTrackWhenDisabled: 'var(--background-color-for-toggle-track-when-disabled, hsl(232, 18%, 90%))',
|
|
574
|
+
backgroundColorForLoadingSpinnerTrack: 'var(--background-color-for-loading-spinner-track, #213c45)',
|
|
575
|
+
backgroundColorForLoadingSpinnerDot: 'var(--background-color-for-loading-spinner-dot, #213c45)',
|
|
576
|
+
backgroundColorForContentNotificationWhenSuccess: 'var(--background-color-for-content-notification-when-success, hsl(175, 90%, 95%))',
|
|
498
577
|
borderColorForInput: 'var(--border-color-for-input, hsl(232, 18%, 80%))',
|
|
499
578
|
borderColorForInputWhenFocused: 'var(--border-color-for-input-when-focused, hsl(175, 55%, 45%))',
|
|
500
579
|
borderColorForInputWhenDisabled: 'var(--border-color-for-input-when-disabled, hsl(232, 18%, 80%))',
|
|
@@ -503,6 +582,8 @@ const designTokens = {
|
|
|
503
582
|
borderColorForInputWhenWarning: 'var(--border-color-for-input-when-warning, #f16d0e)',
|
|
504
583
|
borderColorForInputWhenHovered: 'var(--border-color-for-input-when-hovered, hsl(232, 18%, 80%))',
|
|
505
584
|
borderColorForInputAsQuiet: 'var(--border-color-for-input-as-quiet, transparent)',
|
|
585
|
+
borderColorForButtonAsSecondary: 'var(--border-color-for-button-as-secondary, hsl(232, 18%, 80%))',
|
|
586
|
+
borderColorForContentNotificationWhenSuccess: 'var(--border-color-for-content-notification-when-success, hsl(175, 70%, 85%))',
|
|
506
587
|
borderRadiusForButtonAsBig: 'var(--border-radius-for-button-as-big, 4px)',
|
|
507
588
|
borderRadiusForButtonAsMedium: 'var(--border-radius-for-button-as-medium, 4px)',
|
|
508
589
|
borderRadiusForInput: 'var(--border-radius-for-input, 4px)',
|
|
@@ -515,6 +596,13 @@ const designTokens = {
|
|
|
515
596
|
fontColorForInputWhenError: 'var(--font-color-for-input-when-error, #e60050)',
|
|
516
597
|
fontColorForInputWhenReadonly: 'var(--font-color-for-input-when-readonly, hsl(232, 18%, 40%))',
|
|
517
598
|
fontColorForInputWhenWarning: 'var(--font-color-for-input-when-warning, #f16d0e)',
|
|
599
|
+
fontColorForButtonAsSecondary: 'var(--font-color-for-button-as-secondary, #1a1a1a)',
|
|
600
|
+
fontColorForButtonAsFlatWhenHovered: 'var(--font-color-for-button-as-flat-when-hovered, hsl(175, 55%, 45%))',
|
|
601
|
+
fontColorForButtonAsFlatAsCritical: 'var(--font-color-for-button-as-flat-as-critical, #e60050)',
|
|
602
|
+
fontColorForButtonAsFlatAsCriticalWhenHovered: 'var(--font-color-for-button-as-flat-as-critical-when-hovered, hsl(339.1304347826087, 100%, 25%))',
|
|
603
|
+
fontColorForViewSwitcherButton: 'var(--font-color-for-view-switcher-button, hsl(232, 18%, 40%))',
|
|
604
|
+
fontColorForStampAsPositive: 'var(--font-color-for-stamp-as-positive, hsl(175, 55%, 25%))',
|
|
605
|
+
fontColorForContentNotificationWhenSuccess: 'var(--font-color-for-content-notification-when-success, hsl(175, 55%, 45%))',
|
|
518
606
|
heightForButtonAsBig: 'var(--height-for-button-as-big, 40px)',
|
|
519
607
|
heightForButtonAsMedium: 'var(--height-for-button-as-medium, 32px)',
|
|
520
608
|
heightForButtonAsSmall: 'var(--height-for-button-as-small, 16px)',
|
|
@@ -691,7 +779,7 @@ const withThemeContext = WrappedComponent => {
|
|
|
691
779
|
};
|
|
692
780
|
|
|
693
781
|
// NOTE: This string will be replaced on build time with the package version.
|
|
694
|
-
var version = "18.
|
|
782
|
+
var version = "18.2.0";
|
|
695
783
|
|
|
696
784
|
exports.ThemeProvider = ThemeProvider;
|
|
697
785
|
exports.customProperties = designTokens$1;
|
|
@@ -55,6 +55,7 @@ var kebabCase__default = /*#__PURE__*/_interopDefault(kebabCase);
|
|
|
55
55
|
const themes = {
|
|
56
56
|
default: {
|
|
57
57
|
colorPrimary: 'hsl(175, 55%, 45%)',
|
|
58
|
+
colorPrimary10: 'hsl(240, 66%, 19%)',
|
|
58
59
|
colorPrimary20: 'hsl(175, 55%, 20%)',
|
|
59
60
|
colorPrimary25: 'hsl(175, 55%, 25%)',
|
|
60
61
|
colorPrimary30: 'hsl(175, 55%, 30%)',
|
|
@@ -117,6 +118,7 @@ const themes = {
|
|
|
117
118
|
colorWarning: '#f16d0e',
|
|
118
119
|
colorWarning25: 'hsl(25.110132158590307, 89.0196078431%, 25%)',
|
|
119
120
|
colorWarning40: 'hsl(25.110132158590307, 89.0196078431%, 40%)',
|
|
121
|
+
colorWarning60: 'hsl(35, 90%, 55%)',
|
|
120
122
|
colorWarning85: 'hsl(25.110132158590307, 89.0196078431%, 85%)',
|
|
121
123
|
colorWarning95: 'hsl(25.110132158590307, 89.0196078431%, 95%)',
|
|
122
124
|
colorError: '#e60050',
|
|
@@ -130,6 +132,11 @@ const themes = {
|
|
|
130
132
|
colorSolid10: 'hsl(0deg 0% 10% / 10%)',
|
|
131
133
|
colorSurface: '#fff',
|
|
132
134
|
colorTransparent: 'transparent',
|
|
135
|
+
colorSuccess: 'hsl(152, 77%, 39%)',
|
|
136
|
+
colorSuccess25: 'hsl(155, 84%, 20%)',
|
|
137
|
+
colorSuccess40: 'hsl(155, 90%, 24%)',
|
|
138
|
+
colorSuccess85: 'hsl(144, 69%, 80%)',
|
|
139
|
+
colorSuccess95: 'hsl(141, 76%, 92%)',
|
|
133
140
|
borderRadius1: '1px',
|
|
134
141
|
borderRadius2: '2px',
|
|
135
142
|
borderRadius4: '4px',
|
|
@@ -242,6 +249,20 @@ const themes = {
|
|
|
242
249
|
backgroundColorForLocalizedInputLabel: '#fff',
|
|
243
250
|
backgroundColorForLocalizedInputLabelWhenReadonly: 'hsl(232, 18%, 95%)',
|
|
244
251
|
backgroundColorForLocalizedInputLabelWhenDisabled: 'hsl(232, 18%, 95%)',
|
|
252
|
+
backgroundColorForButtonAsPrimary: '#15a390',
|
|
253
|
+
backgroundColorForButtonAsPrimaryWhenHovered: 'hsl(175, 55%, 45%)',
|
|
254
|
+
backgroundColorForButtonAsPrimaryAsDefaultWhenHovered: '#17ab97',
|
|
255
|
+
backgroundColorForButtonAsPrimaryAsDefaultWhenActive: '#15a390',
|
|
256
|
+
backgroundColorForButtonAsPrimaryAsUrgent: '#f16d0e',
|
|
257
|
+
backgroundColorForStampAsPrimary: 'hsl(175, 70%, 90%)',
|
|
258
|
+
backgroundColorForStampAsPositive: 'hsl(175, 70%, 90%)',
|
|
259
|
+
backgroundColorForToggleThumbWhenActive: 'hsl(175, 55%, 25%)',
|
|
260
|
+
backgroundColorForToggleTrackWhenActive: 'hsl(175, 55%, 40%)',
|
|
261
|
+
backgroundColorForToggleThumbWhenDisabled: 'hsl(232, 18%, 60%)',
|
|
262
|
+
backgroundColorForToggleTrackWhenDisabled: 'hsl(232, 18%, 90%)',
|
|
263
|
+
backgroundColorForLoadingSpinnerTrack: '#213c45',
|
|
264
|
+
backgroundColorForLoadingSpinnerDot: '#213c45',
|
|
265
|
+
backgroundColorForContentNotificationWhenSuccess: 'hsl(175, 90%, 95%)',
|
|
245
266
|
borderColorForInput: 'hsl(232, 18%, 80%)',
|
|
246
267
|
borderColorForInputWhenFocused: 'hsl(175, 55%, 45%)',
|
|
247
268
|
borderColorForInputWhenDisabled: 'hsl(232, 18%, 80%)',
|
|
@@ -250,6 +271,8 @@ const themes = {
|
|
|
250
271
|
borderColorForInputWhenWarning: '#f16d0e',
|
|
251
272
|
borderColorForInputWhenHovered: 'hsl(232, 18%, 80%)',
|
|
252
273
|
borderColorForInputAsQuiet: 'transparent',
|
|
274
|
+
borderColorForButtonAsSecondary: 'hsl(232, 18%, 80%)',
|
|
275
|
+
borderColorForContentNotificationWhenSuccess: 'hsl(175, 70%, 85%)',
|
|
253
276
|
borderRadiusForButtonAsBig: '4px',
|
|
254
277
|
borderRadiusForButtonAsMedium: '4px',
|
|
255
278
|
borderRadiusForInput: '4px',
|
|
@@ -262,6 +285,13 @@ const themes = {
|
|
|
262
285
|
fontColorForInputWhenError: '#e60050',
|
|
263
286
|
fontColorForInputWhenReadonly: 'hsl(232, 18%, 40%)',
|
|
264
287
|
fontColorForInputWhenWarning: '#f16d0e',
|
|
288
|
+
fontColorForButtonAsSecondary: '#1a1a1a',
|
|
289
|
+
fontColorForButtonAsFlatWhenHovered: 'hsl(175, 55%, 45%)',
|
|
290
|
+
fontColorForButtonAsFlatAsCritical: '#e60050',
|
|
291
|
+
fontColorForButtonAsFlatAsCriticalWhenHovered: 'hsl(339.1304347826087, 100%, 25%)',
|
|
292
|
+
fontColorForViewSwitcherButton: 'hsl(232, 18%, 40%)',
|
|
293
|
+
fontColorForStampAsPositive: 'hsl(175, 55%, 25%)',
|
|
294
|
+
fontColorForContentNotificationWhenSuccess: 'hsl(175, 55%, 45%)',
|
|
265
295
|
heightForButtonAsBig: '40px',
|
|
266
296
|
heightForButtonAsMedium: '32px',
|
|
267
297
|
heightForButtonAsSmall: '16px',
|
|
@@ -303,11 +333,40 @@ const themes = {
|
|
|
303
333
|
colorError25: 'hsl(4, 69%, 37%)',
|
|
304
334
|
colorError40: 'hsl(3, 60%, 46%)',
|
|
305
335
|
colorError85: 'hsl(1, 55%, 74%)',
|
|
306
|
-
colorError95: 'hsl(349, 66%, 92%)'
|
|
336
|
+
colorError95: 'hsl(349, 66%, 92%)',
|
|
337
|
+
borderColorForButtonAsSecondary: 'hsl(244, 100%, 84%)',
|
|
338
|
+
borderColorForInputWhenFocused: 'hsl(240, 100%, 67%)',
|
|
339
|
+
borderColorForContentNotificationWhenSuccess: 'hsl(144, 69%, 80%)',
|
|
340
|
+
backgroundColorForButtonWhenActive: 'hsl(243, 100%, 93%)',
|
|
341
|
+
backgroundColorForButtonWhenHovered: 'hsl(244, 100%, 97%)',
|
|
342
|
+
backgroundColorForButtonAsPrimary: 'hsl(240, 64%, 58%)',
|
|
343
|
+
backgroundColorForButtonAsPrimaryWhenHovered: 'hsl(240, 100%, 67%)',
|
|
344
|
+
backgroundColorForButtonAsPrimaryAsDefaultWhenHovered: 'hsl(240, 100%, 67%)',
|
|
345
|
+
backgroundColorForButtonAsPrimaryAsDefaultWhenActive: 'hsl(240, 46%, 48%)',
|
|
346
|
+
backgroundColorForButtonAsPrimaryAsUrgent: 'hsl(35, 90%, 55%)',
|
|
347
|
+
backgroundColorForInputWhenSelected: 'hsl(244, 100%, 97%)',
|
|
348
|
+
backgroundColorForStampAsPrimary: 'hsl(244, 100%, 97%)',
|
|
349
|
+
backgroundColorForStampAsPositive: 'hsl(141, 76%, 92%)',
|
|
350
|
+
backgroundColorForToggleThumbWhenActive: 'hsl(240, 100%, 67%)',
|
|
351
|
+
backgroundColorForToggleTrackWhenActive: 'hsl(244, 100%, 84%)',
|
|
352
|
+
backgroundColorForToggleThumbWhenDisabled: 'hsl(244, 100%, 84%)',
|
|
353
|
+
backgroundColorForToggleTrackWhenDisabled: 'hsl(243, 100%, 93%)',
|
|
354
|
+
backgroundColorForLoadingSpinnerTrack: 'hsl(243, 100%, 93%)',
|
|
355
|
+
backgroundColorForLoadingSpinnerDot: 'hsl(240, 64%, 58%)',
|
|
356
|
+
backgroundColorForContentNotificationWhenSuccess: 'hsl(141, 76%, 92%)',
|
|
357
|
+
fontColorForButtonAsSecondary: 'hsl(240, 64%, 58%)',
|
|
358
|
+
fontColorForButtonAsFlatWhenHovered: 'hsl(240, 100%, 67%)',
|
|
359
|
+
fontColorForButtonAsFlatAsCritical: 'hsl(3, 60%, 46%)',
|
|
360
|
+
fontColorForButtonAsFlatAsCriticalWhenHovered: 'hsl(3, 65%, 58%)',
|
|
361
|
+
fontColorForViewSwitcherButton: 'hsl(240, 64%, 58%)',
|
|
362
|
+
fontColorForInputWhenError: 'hsl(3, 60%, 46%)',
|
|
363
|
+
fontColorForStampAsPositive: 'hsl(155, 90%, 24%)',
|
|
364
|
+
fontColorForContentNotificationWhenSuccess: 'hsl(152, 77%, 39%)'
|
|
307
365
|
}
|
|
308
366
|
};
|
|
309
367
|
const designTokens = {
|
|
310
368
|
colorPrimary: 'var(--color-primary, hsl(175, 55%, 45%))',
|
|
369
|
+
colorPrimary10: 'var(--color-primary-10, hsl(240, 66%, 19%))',
|
|
311
370
|
colorPrimary20: 'var(--color-primary-20, hsl(175, 55%, 20%))',
|
|
312
371
|
colorPrimary25: 'var(--color-primary-25, hsl(175, 55%, 25%))',
|
|
313
372
|
colorPrimary30: 'var(--color-primary-30, hsl(175, 55%, 30%))',
|
|
@@ -370,6 +429,7 @@ const designTokens = {
|
|
|
370
429
|
colorWarning: 'var(--color-warning, #f16d0e)',
|
|
371
430
|
colorWarning25: 'var(--color-warning-25, hsl(25.110132158590307, 89.0196078431%, 25%))',
|
|
372
431
|
colorWarning40: 'var(--color-warning-40, hsl(25.110132158590307, 89.0196078431%, 40%))',
|
|
432
|
+
colorWarning60: 'var(--color-warning-60, hsl(35, 90%, 55%))',
|
|
373
433
|
colorWarning85: 'var(--color-warning-85, hsl(25.110132158590307, 89.0196078431%, 85%))',
|
|
374
434
|
colorWarning95: 'var(--color-warning-95, hsl(25.110132158590307, 89.0196078431%, 95%))',
|
|
375
435
|
colorError: 'var(--color-error, #e60050)',
|
|
@@ -383,6 +443,11 @@ const designTokens = {
|
|
|
383
443
|
colorSolid10: 'var(--color-solid-10, hsl(0deg 0% 10% / 10%))',
|
|
384
444
|
colorSurface: 'var(--color-surface, #fff)',
|
|
385
445
|
colorTransparent: 'var(--color-transparent, transparent)',
|
|
446
|
+
colorSuccess: 'var(--color-success, hsl(152, 77%, 39%))',
|
|
447
|
+
colorSuccess25: 'var(--color-success-25, hsl(155, 84%, 20%))',
|
|
448
|
+
colorSuccess40: 'var(--color-success-40, hsl(155, 90%, 24%))',
|
|
449
|
+
colorSuccess85: 'var(--color-success-85, hsl(144, 69%, 80%))',
|
|
450
|
+
colorSuccess95: 'var(--color-success-95, hsl(141, 76%, 92%))',
|
|
386
451
|
borderRadius1: 'var(--border-radius-1, 1px)',
|
|
387
452
|
borderRadius2: 'var(--border-radius-2, 2px)',
|
|
388
453
|
borderRadius4: 'var(--border-radius-4, 4px)',
|
|
@@ -495,6 +560,20 @@ const designTokens = {
|
|
|
495
560
|
backgroundColorForLocalizedInputLabel: 'var(--background-color-for-localized-input-label, #fff)',
|
|
496
561
|
backgroundColorForLocalizedInputLabelWhenReadonly: 'var(--background-color-for-localized-input-label-when-readonly, hsl(232, 18%, 95%))',
|
|
497
562
|
backgroundColorForLocalizedInputLabelWhenDisabled: 'var(--background-color-for-localized-input-label-when-disabled, hsl(232, 18%, 95%))',
|
|
563
|
+
backgroundColorForButtonAsPrimary: 'var(--background-color-for-button-as-primary, #15a390)',
|
|
564
|
+
backgroundColorForButtonAsPrimaryWhenHovered: 'var(--background-color-for-button-as-primary-when-hovered, hsl(175, 55%, 45%))',
|
|
565
|
+
backgroundColorForButtonAsPrimaryAsDefaultWhenHovered: 'var(--background-color-for-button-as-primary-as-default-when-hovered, #17ab97)',
|
|
566
|
+
backgroundColorForButtonAsPrimaryAsDefaultWhenActive: 'var(--background-color-for-button-as-primary-as-default-when-active, #15a390)',
|
|
567
|
+
backgroundColorForButtonAsPrimaryAsUrgent: 'var(--background-color-for-button-as-primary-as-urgent, #f16d0e)',
|
|
568
|
+
backgroundColorForStampAsPrimary: 'var(--background-color-for-stamp-as-primary, hsl(175, 70%, 90%))',
|
|
569
|
+
backgroundColorForStampAsPositive: 'var(--background-color-for-stamp-as-positive, hsl(175, 70%, 90%))',
|
|
570
|
+
backgroundColorForToggleThumbWhenActive: 'var(--background-color-for-toggle-thumb-when-active, hsl(175, 55%, 25%))',
|
|
571
|
+
backgroundColorForToggleTrackWhenActive: 'var(--background-color-for-toggle-track-when-active, hsl(175, 55%, 40%))',
|
|
572
|
+
backgroundColorForToggleThumbWhenDisabled: 'var(--background-color-for-toggle-thumb-when-disabled, hsl(232, 18%, 60%))',
|
|
573
|
+
backgroundColorForToggleTrackWhenDisabled: 'var(--background-color-for-toggle-track-when-disabled, hsl(232, 18%, 90%))',
|
|
574
|
+
backgroundColorForLoadingSpinnerTrack: 'var(--background-color-for-loading-spinner-track, #213c45)',
|
|
575
|
+
backgroundColorForLoadingSpinnerDot: 'var(--background-color-for-loading-spinner-dot, #213c45)',
|
|
576
|
+
backgroundColorForContentNotificationWhenSuccess: 'var(--background-color-for-content-notification-when-success, hsl(175, 90%, 95%))',
|
|
498
577
|
borderColorForInput: 'var(--border-color-for-input, hsl(232, 18%, 80%))',
|
|
499
578
|
borderColorForInputWhenFocused: 'var(--border-color-for-input-when-focused, hsl(175, 55%, 45%))',
|
|
500
579
|
borderColorForInputWhenDisabled: 'var(--border-color-for-input-when-disabled, hsl(232, 18%, 80%))',
|
|
@@ -503,6 +582,8 @@ const designTokens = {
|
|
|
503
582
|
borderColorForInputWhenWarning: 'var(--border-color-for-input-when-warning, #f16d0e)',
|
|
504
583
|
borderColorForInputWhenHovered: 'var(--border-color-for-input-when-hovered, hsl(232, 18%, 80%))',
|
|
505
584
|
borderColorForInputAsQuiet: 'var(--border-color-for-input-as-quiet, transparent)',
|
|
585
|
+
borderColorForButtonAsSecondary: 'var(--border-color-for-button-as-secondary, hsl(232, 18%, 80%))',
|
|
586
|
+
borderColorForContentNotificationWhenSuccess: 'var(--border-color-for-content-notification-when-success, hsl(175, 70%, 85%))',
|
|
506
587
|
borderRadiusForButtonAsBig: 'var(--border-radius-for-button-as-big, 4px)',
|
|
507
588
|
borderRadiusForButtonAsMedium: 'var(--border-radius-for-button-as-medium, 4px)',
|
|
508
589
|
borderRadiusForInput: 'var(--border-radius-for-input, 4px)',
|
|
@@ -515,6 +596,13 @@ const designTokens = {
|
|
|
515
596
|
fontColorForInputWhenError: 'var(--font-color-for-input-when-error, #e60050)',
|
|
516
597
|
fontColorForInputWhenReadonly: 'var(--font-color-for-input-when-readonly, hsl(232, 18%, 40%))',
|
|
517
598
|
fontColorForInputWhenWarning: 'var(--font-color-for-input-when-warning, #f16d0e)',
|
|
599
|
+
fontColorForButtonAsSecondary: 'var(--font-color-for-button-as-secondary, #1a1a1a)',
|
|
600
|
+
fontColorForButtonAsFlatWhenHovered: 'var(--font-color-for-button-as-flat-when-hovered, hsl(175, 55%, 45%))',
|
|
601
|
+
fontColorForButtonAsFlatAsCritical: 'var(--font-color-for-button-as-flat-as-critical, #e60050)',
|
|
602
|
+
fontColorForButtonAsFlatAsCriticalWhenHovered: 'var(--font-color-for-button-as-flat-as-critical-when-hovered, hsl(339.1304347826087, 100%, 25%))',
|
|
603
|
+
fontColorForViewSwitcherButton: 'var(--font-color-for-view-switcher-button, hsl(232, 18%, 40%))',
|
|
604
|
+
fontColorForStampAsPositive: 'var(--font-color-for-stamp-as-positive, hsl(175, 55%, 25%))',
|
|
605
|
+
fontColorForContentNotificationWhenSuccess: 'var(--font-color-for-content-notification-when-success, hsl(175, 55%, 45%))',
|
|
518
606
|
heightForButtonAsBig: 'var(--height-for-button-as-big, 40px)',
|
|
519
607
|
heightForButtonAsMedium: 'var(--height-for-button-as-medium, 32px)',
|
|
520
608
|
heightForButtonAsSmall: 'var(--height-for-button-as-small, 16px)',
|
|
@@ -691,7 +779,7 @@ const withThemeContext = WrappedComponent => {
|
|
|
691
779
|
};
|
|
692
780
|
|
|
693
781
|
// NOTE: This string will be replaced on build time with the package version.
|
|
694
|
-
var version = "18.
|
|
782
|
+
var version = "18.2.0";
|
|
695
783
|
|
|
696
784
|
exports.ThemeProvider = ThemeProvider;
|
|
697
785
|
exports.customProperties = designTokens$1;
|
|
@@ -30,6 +30,7 @@ import { jsx } from '@emotion/react/jsx-runtime';
|
|
|
30
30
|
const themes = {
|
|
31
31
|
default: {
|
|
32
32
|
colorPrimary: 'hsl(175, 55%, 45%)',
|
|
33
|
+
colorPrimary10: 'hsl(240, 66%, 19%)',
|
|
33
34
|
colorPrimary20: 'hsl(175, 55%, 20%)',
|
|
34
35
|
colorPrimary25: 'hsl(175, 55%, 25%)',
|
|
35
36
|
colorPrimary30: 'hsl(175, 55%, 30%)',
|
|
@@ -92,6 +93,7 @@ const themes = {
|
|
|
92
93
|
colorWarning: '#f16d0e',
|
|
93
94
|
colorWarning25: 'hsl(25.110132158590307, 89.0196078431%, 25%)',
|
|
94
95
|
colorWarning40: 'hsl(25.110132158590307, 89.0196078431%, 40%)',
|
|
96
|
+
colorWarning60: 'hsl(35, 90%, 55%)',
|
|
95
97
|
colorWarning85: 'hsl(25.110132158590307, 89.0196078431%, 85%)',
|
|
96
98
|
colorWarning95: 'hsl(25.110132158590307, 89.0196078431%, 95%)',
|
|
97
99
|
colorError: '#e60050',
|
|
@@ -105,6 +107,11 @@ const themes = {
|
|
|
105
107
|
colorSolid10: 'hsl(0deg 0% 10% / 10%)',
|
|
106
108
|
colorSurface: '#fff',
|
|
107
109
|
colorTransparent: 'transparent',
|
|
110
|
+
colorSuccess: 'hsl(152, 77%, 39%)',
|
|
111
|
+
colorSuccess25: 'hsl(155, 84%, 20%)',
|
|
112
|
+
colorSuccess40: 'hsl(155, 90%, 24%)',
|
|
113
|
+
colorSuccess85: 'hsl(144, 69%, 80%)',
|
|
114
|
+
colorSuccess95: 'hsl(141, 76%, 92%)',
|
|
108
115
|
borderRadius1: '1px',
|
|
109
116
|
borderRadius2: '2px',
|
|
110
117
|
borderRadius4: '4px',
|
|
@@ -217,6 +224,20 @@ const themes = {
|
|
|
217
224
|
backgroundColorForLocalizedInputLabel: '#fff',
|
|
218
225
|
backgroundColorForLocalizedInputLabelWhenReadonly: 'hsl(232, 18%, 95%)',
|
|
219
226
|
backgroundColorForLocalizedInputLabelWhenDisabled: 'hsl(232, 18%, 95%)',
|
|
227
|
+
backgroundColorForButtonAsPrimary: '#15a390',
|
|
228
|
+
backgroundColorForButtonAsPrimaryWhenHovered: 'hsl(175, 55%, 45%)',
|
|
229
|
+
backgroundColorForButtonAsPrimaryAsDefaultWhenHovered: '#17ab97',
|
|
230
|
+
backgroundColorForButtonAsPrimaryAsDefaultWhenActive: '#15a390',
|
|
231
|
+
backgroundColorForButtonAsPrimaryAsUrgent: '#f16d0e',
|
|
232
|
+
backgroundColorForStampAsPrimary: 'hsl(175, 70%, 90%)',
|
|
233
|
+
backgroundColorForStampAsPositive: 'hsl(175, 70%, 90%)',
|
|
234
|
+
backgroundColorForToggleThumbWhenActive: 'hsl(175, 55%, 25%)',
|
|
235
|
+
backgroundColorForToggleTrackWhenActive: 'hsl(175, 55%, 40%)',
|
|
236
|
+
backgroundColorForToggleThumbWhenDisabled: 'hsl(232, 18%, 60%)',
|
|
237
|
+
backgroundColorForToggleTrackWhenDisabled: 'hsl(232, 18%, 90%)',
|
|
238
|
+
backgroundColorForLoadingSpinnerTrack: '#213c45',
|
|
239
|
+
backgroundColorForLoadingSpinnerDot: '#213c45',
|
|
240
|
+
backgroundColorForContentNotificationWhenSuccess: 'hsl(175, 90%, 95%)',
|
|
220
241
|
borderColorForInput: 'hsl(232, 18%, 80%)',
|
|
221
242
|
borderColorForInputWhenFocused: 'hsl(175, 55%, 45%)',
|
|
222
243
|
borderColorForInputWhenDisabled: 'hsl(232, 18%, 80%)',
|
|
@@ -225,6 +246,8 @@ const themes = {
|
|
|
225
246
|
borderColorForInputWhenWarning: '#f16d0e',
|
|
226
247
|
borderColorForInputWhenHovered: 'hsl(232, 18%, 80%)',
|
|
227
248
|
borderColorForInputAsQuiet: 'transparent',
|
|
249
|
+
borderColorForButtonAsSecondary: 'hsl(232, 18%, 80%)',
|
|
250
|
+
borderColorForContentNotificationWhenSuccess: 'hsl(175, 70%, 85%)',
|
|
228
251
|
borderRadiusForButtonAsBig: '4px',
|
|
229
252
|
borderRadiusForButtonAsMedium: '4px',
|
|
230
253
|
borderRadiusForInput: '4px',
|
|
@@ -237,6 +260,13 @@ const themes = {
|
|
|
237
260
|
fontColorForInputWhenError: '#e60050',
|
|
238
261
|
fontColorForInputWhenReadonly: 'hsl(232, 18%, 40%)',
|
|
239
262
|
fontColorForInputWhenWarning: '#f16d0e',
|
|
263
|
+
fontColorForButtonAsSecondary: '#1a1a1a',
|
|
264
|
+
fontColorForButtonAsFlatWhenHovered: 'hsl(175, 55%, 45%)',
|
|
265
|
+
fontColorForButtonAsFlatAsCritical: '#e60050',
|
|
266
|
+
fontColorForButtonAsFlatAsCriticalWhenHovered: 'hsl(339.1304347826087, 100%, 25%)',
|
|
267
|
+
fontColorForViewSwitcherButton: 'hsl(232, 18%, 40%)',
|
|
268
|
+
fontColorForStampAsPositive: 'hsl(175, 55%, 25%)',
|
|
269
|
+
fontColorForContentNotificationWhenSuccess: 'hsl(175, 55%, 45%)',
|
|
240
270
|
heightForButtonAsBig: '40px',
|
|
241
271
|
heightForButtonAsMedium: '32px',
|
|
242
272
|
heightForButtonAsSmall: '16px',
|
|
@@ -278,11 +308,40 @@ const themes = {
|
|
|
278
308
|
colorError25: 'hsl(4, 69%, 37%)',
|
|
279
309
|
colorError40: 'hsl(3, 60%, 46%)',
|
|
280
310
|
colorError85: 'hsl(1, 55%, 74%)',
|
|
281
|
-
colorError95: 'hsl(349, 66%, 92%)'
|
|
311
|
+
colorError95: 'hsl(349, 66%, 92%)',
|
|
312
|
+
borderColorForButtonAsSecondary: 'hsl(244, 100%, 84%)',
|
|
313
|
+
borderColorForInputWhenFocused: 'hsl(240, 100%, 67%)',
|
|
314
|
+
borderColorForContentNotificationWhenSuccess: 'hsl(144, 69%, 80%)',
|
|
315
|
+
backgroundColorForButtonWhenActive: 'hsl(243, 100%, 93%)',
|
|
316
|
+
backgroundColorForButtonWhenHovered: 'hsl(244, 100%, 97%)',
|
|
317
|
+
backgroundColorForButtonAsPrimary: 'hsl(240, 64%, 58%)',
|
|
318
|
+
backgroundColorForButtonAsPrimaryWhenHovered: 'hsl(240, 100%, 67%)',
|
|
319
|
+
backgroundColorForButtonAsPrimaryAsDefaultWhenHovered: 'hsl(240, 100%, 67%)',
|
|
320
|
+
backgroundColorForButtonAsPrimaryAsDefaultWhenActive: 'hsl(240, 46%, 48%)',
|
|
321
|
+
backgroundColorForButtonAsPrimaryAsUrgent: 'hsl(35, 90%, 55%)',
|
|
322
|
+
backgroundColorForInputWhenSelected: 'hsl(244, 100%, 97%)',
|
|
323
|
+
backgroundColorForStampAsPrimary: 'hsl(244, 100%, 97%)',
|
|
324
|
+
backgroundColorForStampAsPositive: 'hsl(141, 76%, 92%)',
|
|
325
|
+
backgroundColorForToggleThumbWhenActive: 'hsl(240, 100%, 67%)',
|
|
326
|
+
backgroundColorForToggleTrackWhenActive: 'hsl(244, 100%, 84%)',
|
|
327
|
+
backgroundColorForToggleThumbWhenDisabled: 'hsl(244, 100%, 84%)',
|
|
328
|
+
backgroundColorForToggleTrackWhenDisabled: 'hsl(243, 100%, 93%)',
|
|
329
|
+
backgroundColorForLoadingSpinnerTrack: 'hsl(243, 100%, 93%)',
|
|
330
|
+
backgroundColorForLoadingSpinnerDot: 'hsl(240, 64%, 58%)',
|
|
331
|
+
backgroundColorForContentNotificationWhenSuccess: 'hsl(141, 76%, 92%)',
|
|
332
|
+
fontColorForButtonAsSecondary: 'hsl(240, 64%, 58%)',
|
|
333
|
+
fontColorForButtonAsFlatWhenHovered: 'hsl(240, 100%, 67%)',
|
|
334
|
+
fontColorForButtonAsFlatAsCritical: 'hsl(3, 60%, 46%)',
|
|
335
|
+
fontColorForButtonAsFlatAsCriticalWhenHovered: 'hsl(3, 65%, 58%)',
|
|
336
|
+
fontColorForViewSwitcherButton: 'hsl(240, 64%, 58%)',
|
|
337
|
+
fontColorForInputWhenError: 'hsl(3, 60%, 46%)',
|
|
338
|
+
fontColorForStampAsPositive: 'hsl(155, 90%, 24%)',
|
|
339
|
+
fontColorForContentNotificationWhenSuccess: 'hsl(152, 77%, 39%)'
|
|
282
340
|
}
|
|
283
341
|
};
|
|
284
342
|
const designTokens = {
|
|
285
343
|
colorPrimary: 'var(--color-primary, hsl(175, 55%, 45%))',
|
|
344
|
+
colorPrimary10: 'var(--color-primary-10, hsl(240, 66%, 19%))',
|
|
286
345
|
colorPrimary20: 'var(--color-primary-20, hsl(175, 55%, 20%))',
|
|
287
346
|
colorPrimary25: 'var(--color-primary-25, hsl(175, 55%, 25%))',
|
|
288
347
|
colorPrimary30: 'var(--color-primary-30, hsl(175, 55%, 30%))',
|
|
@@ -345,6 +404,7 @@ const designTokens = {
|
|
|
345
404
|
colorWarning: 'var(--color-warning, #f16d0e)',
|
|
346
405
|
colorWarning25: 'var(--color-warning-25, hsl(25.110132158590307, 89.0196078431%, 25%))',
|
|
347
406
|
colorWarning40: 'var(--color-warning-40, hsl(25.110132158590307, 89.0196078431%, 40%))',
|
|
407
|
+
colorWarning60: 'var(--color-warning-60, hsl(35, 90%, 55%))',
|
|
348
408
|
colorWarning85: 'var(--color-warning-85, hsl(25.110132158590307, 89.0196078431%, 85%))',
|
|
349
409
|
colorWarning95: 'var(--color-warning-95, hsl(25.110132158590307, 89.0196078431%, 95%))',
|
|
350
410
|
colorError: 'var(--color-error, #e60050)',
|
|
@@ -358,6 +418,11 @@ const designTokens = {
|
|
|
358
418
|
colorSolid10: 'var(--color-solid-10, hsl(0deg 0% 10% / 10%))',
|
|
359
419
|
colorSurface: 'var(--color-surface, #fff)',
|
|
360
420
|
colorTransparent: 'var(--color-transparent, transparent)',
|
|
421
|
+
colorSuccess: 'var(--color-success, hsl(152, 77%, 39%))',
|
|
422
|
+
colorSuccess25: 'var(--color-success-25, hsl(155, 84%, 20%))',
|
|
423
|
+
colorSuccess40: 'var(--color-success-40, hsl(155, 90%, 24%))',
|
|
424
|
+
colorSuccess85: 'var(--color-success-85, hsl(144, 69%, 80%))',
|
|
425
|
+
colorSuccess95: 'var(--color-success-95, hsl(141, 76%, 92%))',
|
|
361
426
|
borderRadius1: 'var(--border-radius-1, 1px)',
|
|
362
427
|
borderRadius2: 'var(--border-radius-2, 2px)',
|
|
363
428
|
borderRadius4: 'var(--border-radius-4, 4px)',
|
|
@@ -470,6 +535,20 @@ const designTokens = {
|
|
|
470
535
|
backgroundColorForLocalizedInputLabel: 'var(--background-color-for-localized-input-label, #fff)',
|
|
471
536
|
backgroundColorForLocalizedInputLabelWhenReadonly: 'var(--background-color-for-localized-input-label-when-readonly, hsl(232, 18%, 95%))',
|
|
472
537
|
backgroundColorForLocalizedInputLabelWhenDisabled: 'var(--background-color-for-localized-input-label-when-disabled, hsl(232, 18%, 95%))',
|
|
538
|
+
backgroundColorForButtonAsPrimary: 'var(--background-color-for-button-as-primary, #15a390)',
|
|
539
|
+
backgroundColorForButtonAsPrimaryWhenHovered: 'var(--background-color-for-button-as-primary-when-hovered, hsl(175, 55%, 45%))',
|
|
540
|
+
backgroundColorForButtonAsPrimaryAsDefaultWhenHovered: 'var(--background-color-for-button-as-primary-as-default-when-hovered, #17ab97)',
|
|
541
|
+
backgroundColorForButtonAsPrimaryAsDefaultWhenActive: 'var(--background-color-for-button-as-primary-as-default-when-active, #15a390)',
|
|
542
|
+
backgroundColorForButtonAsPrimaryAsUrgent: 'var(--background-color-for-button-as-primary-as-urgent, #f16d0e)',
|
|
543
|
+
backgroundColorForStampAsPrimary: 'var(--background-color-for-stamp-as-primary, hsl(175, 70%, 90%))',
|
|
544
|
+
backgroundColorForStampAsPositive: 'var(--background-color-for-stamp-as-positive, hsl(175, 70%, 90%))',
|
|
545
|
+
backgroundColorForToggleThumbWhenActive: 'var(--background-color-for-toggle-thumb-when-active, hsl(175, 55%, 25%))',
|
|
546
|
+
backgroundColorForToggleTrackWhenActive: 'var(--background-color-for-toggle-track-when-active, hsl(175, 55%, 40%))',
|
|
547
|
+
backgroundColorForToggleThumbWhenDisabled: 'var(--background-color-for-toggle-thumb-when-disabled, hsl(232, 18%, 60%))',
|
|
548
|
+
backgroundColorForToggleTrackWhenDisabled: 'var(--background-color-for-toggle-track-when-disabled, hsl(232, 18%, 90%))',
|
|
549
|
+
backgroundColorForLoadingSpinnerTrack: 'var(--background-color-for-loading-spinner-track, #213c45)',
|
|
550
|
+
backgroundColorForLoadingSpinnerDot: 'var(--background-color-for-loading-spinner-dot, #213c45)',
|
|
551
|
+
backgroundColorForContentNotificationWhenSuccess: 'var(--background-color-for-content-notification-when-success, hsl(175, 90%, 95%))',
|
|
473
552
|
borderColorForInput: 'var(--border-color-for-input, hsl(232, 18%, 80%))',
|
|
474
553
|
borderColorForInputWhenFocused: 'var(--border-color-for-input-when-focused, hsl(175, 55%, 45%))',
|
|
475
554
|
borderColorForInputWhenDisabled: 'var(--border-color-for-input-when-disabled, hsl(232, 18%, 80%))',
|
|
@@ -478,6 +557,8 @@ const designTokens = {
|
|
|
478
557
|
borderColorForInputWhenWarning: 'var(--border-color-for-input-when-warning, #f16d0e)',
|
|
479
558
|
borderColorForInputWhenHovered: 'var(--border-color-for-input-when-hovered, hsl(232, 18%, 80%))',
|
|
480
559
|
borderColorForInputAsQuiet: 'var(--border-color-for-input-as-quiet, transparent)',
|
|
560
|
+
borderColorForButtonAsSecondary: 'var(--border-color-for-button-as-secondary, hsl(232, 18%, 80%))',
|
|
561
|
+
borderColorForContentNotificationWhenSuccess: 'var(--border-color-for-content-notification-when-success, hsl(175, 70%, 85%))',
|
|
481
562
|
borderRadiusForButtonAsBig: 'var(--border-radius-for-button-as-big, 4px)',
|
|
482
563
|
borderRadiusForButtonAsMedium: 'var(--border-radius-for-button-as-medium, 4px)',
|
|
483
564
|
borderRadiusForInput: 'var(--border-radius-for-input, 4px)',
|
|
@@ -490,6 +571,13 @@ const designTokens = {
|
|
|
490
571
|
fontColorForInputWhenError: 'var(--font-color-for-input-when-error, #e60050)',
|
|
491
572
|
fontColorForInputWhenReadonly: 'var(--font-color-for-input-when-readonly, hsl(232, 18%, 40%))',
|
|
492
573
|
fontColorForInputWhenWarning: 'var(--font-color-for-input-when-warning, #f16d0e)',
|
|
574
|
+
fontColorForButtonAsSecondary: 'var(--font-color-for-button-as-secondary, #1a1a1a)',
|
|
575
|
+
fontColorForButtonAsFlatWhenHovered: 'var(--font-color-for-button-as-flat-when-hovered, hsl(175, 55%, 45%))',
|
|
576
|
+
fontColorForButtonAsFlatAsCritical: 'var(--font-color-for-button-as-flat-as-critical, #e60050)',
|
|
577
|
+
fontColorForButtonAsFlatAsCriticalWhenHovered: 'var(--font-color-for-button-as-flat-as-critical-when-hovered, hsl(339.1304347826087, 100%, 25%))',
|
|
578
|
+
fontColorForViewSwitcherButton: 'var(--font-color-for-view-switcher-button, hsl(232, 18%, 40%))',
|
|
579
|
+
fontColorForStampAsPositive: 'var(--font-color-for-stamp-as-positive, hsl(175, 55%, 25%))',
|
|
580
|
+
fontColorForContentNotificationWhenSuccess: 'var(--font-color-for-content-notification-when-success, hsl(175, 55%, 45%))',
|
|
493
581
|
heightForButtonAsBig: 'var(--height-for-button-as-big, 40px)',
|
|
494
582
|
heightForButtonAsMedium: 'var(--height-for-button-as-medium, 32px)',
|
|
495
583
|
heightForButtonAsSmall: 'var(--height-for-button-as-small, 16px)',
|
|
@@ -666,6 +754,6 @@ const withThemeContext = WrappedComponent => {
|
|
|
666
754
|
};
|
|
667
755
|
|
|
668
756
|
// NOTE: This string will be replaced on build time with the package version.
|
|
669
|
-
var version = "18.
|
|
757
|
+
var version = "18.2.0";
|
|
670
758
|
|
|
671
759
|
export { ThemeProvider, designTokens$1 as customProperties, designTokens$1 as designTokens, themes, transformTokensToCssVarsReferences, transformTokensToCssVarsValues, useTheme, version, withThemeContext };
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export declare const themes: {
|
|
2
2
|
readonly default: {
|
|
3
3
|
readonly colorPrimary: "hsl(175, 55%, 45%)";
|
|
4
|
+
readonly colorPrimary10: "hsl(240, 66%, 19%)";
|
|
4
5
|
readonly colorPrimary20: "hsl(175, 55%, 20%)";
|
|
5
6
|
readonly colorPrimary25: "hsl(175, 55%, 25%)";
|
|
6
7
|
readonly colorPrimary30: "hsl(175, 55%, 30%)";
|
|
@@ -63,6 +64,7 @@ export declare const themes: {
|
|
|
63
64
|
readonly colorWarning: "#f16d0e";
|
|
64
65
|
readonly colorWarning25: "hsl(25.110132158590307, 89.0196078431%, 25%)";
|
|
65
66
|
readonly colorWarning40: "hsl(25.110132158590307, 89.0196078431%, 40%)";
|
|
67
|
+
readonly colorWarning60: "hsl(35, 90%, 55%)";
|
|
66
68
|
readonly colorWarning85: "hsl(25.110132158590307, 89.0196078431%, 85%)";
|
|
67
69
|
readonly colorWarning95: "hsl(25.110132158590307, 89.0196078431%, 95%)";
|
|
68
70
|
readonly colorError: "#e60050";
|
|
@@ -76,6 +78,11 @@ export declare const themes: {
|
|
|
76
78
|
readonly colorSolid10: "hsl(0deg 0% 10% / 10%)";
|
|
77
79
|
readonly colorSurface: "#fff";
|
|
78
80
|
readonly colorTransparent: "transparent";
|
|
81
|
+
readonly colorSuccess: "hsl(152, 77%, 39%)";
|
|
82
|
+
readonly colorSuccess25: "hsl(155, 84%, 20%)";
|
|
83
|
+
readonly colorSuccess40: "hsl(155, 90%, 24%)";
|
|
84
|
+
readonly colorSuccess85: "hsl(144, 69%, 80%)";
|
|
85
|
+
readonly colorSuccess95: "hsl(141, 76%, 92%)";
|
|
79
86
|
readonly borderRadius1: "1px";
|
|
80
87
|
readonly borderRadius2: "2px";
|
|
81
88
|
readonly borderRadius4: "4px";
|
|
@@ -188,6 +195,20 @@ export declare const themes: {
|
|
|
188
195
|
readonly backgroundColorForLocalizedInputLabel: "#fff";
|
|
189
196
|
readonly backgroundColorForLocalizedInputLabelWhenReadonly: "hsl(232, 18%, 95%)";
|
|
190
197
|
readonly backgroundColorForLocalizedInputLabelWhenDisabled: "hsl(232, 18%, 95%)";
|
|
198
|
+
readonly backgroundColorForButtonAsPrimary: "#15a390";
|
|
199
|
+
readonly backgroundColorForButtonAsPrimaryWhenHovered: "hsl(175, 55%, 45%)";
|
|
200
|
+
readonly backgroundColorForButtonAsPrimaryAsDefaultWhenHovered: "#17ab97";
|
|
201
|
+
readonly backgroundColorForButtonAsPrimaryAsDefaultWhenActive: "#15a390";
|
|
202
|
+
readonly backgroundColorForButtonAsPrimaryAsUrgent: "#f16d0e";
|
|
203
|
+
readonly backgroundColorForStampAsPrimary: "hsl(175, 70%, 90%)";
|
|
204
|
+
readonly backgroundColorForStampAsPositive: "hsl(175, 70%, 90%)";
|
|
205
|
+
readonly backgroundColorForToggleThumbWhenActive: "hsl(175, 55%, 25%)";
|
|
206
|
+
readonly backgroundColorForToggleTrackWhenActive: "hsl(175, 55%, 40%)";
|
|
207
|
+
readonly backgroundColorForToggleThumbWhenDisabled: "hsl(232, 18%, 60%)";
|
|
208
|
+
readonly backgroundColorForToggleTrackWhenDisabled: "hsl(232, 18%, 90%)";
|
|
209
|
+
readonly backgroundColorForLoadingSpinnerTrack: "#213c45";
|
|
210
|
+
readonly backgroundColorForLoadingSpinnerDot: "#213c45";
|
|
211
|
+
readonly backgroundColorForContentNotificationWhenSuccess: "hsl(175, 90%, 95%)";
|
|
191
212
|
readonly borderColorForInput: "hsl(232, 18%, 80%)";
|
|
192
213
|
readonly borderColorForInputWhenFocused: "hsl(175, 55%, 45%)";
|
|
193
214
|
readonly borderColorForInputWhenDisabled: "hsl(232, 18%, 80%)";
|
|
@@ -196,6 +217,8 @@ export declare const themes: {
|
|
|
196
217
|
readonly borderColorForInputWhenWarning: "#f16d0e";
|
|
197
218
|
readonly borderColorForInputWhenHovered: "hsl(232, 18%, 80%)";
|
|
198
219
|
readonly borderColorForInputAsQuiet: "transparent";
|
|
220
|
+
readonly borderColorForButtonAsSecondary: "hsl(232, 18%, 80%)";
|
|
221
|
+
readonly borderColorForContentNotificationWhenSuccess: "hsl(175, 70%, 85%)";
|
|
199
222
|
readonly borderRadiusForButtonAsBig: "4px";
|
|
200
223
|
readonly borderRadiusForButtonAsMedium: "4px";
|
|
201
224
|
readonly borderRadiusForInput: "4px";
|
|
@@ -208,6 +231,13 @@ export declare const themes: {
|
|
|
208
231
|
readonly fontColorForInputWhenError: "#e60050";
|
|
209
232
|
readonly fontColorForInputWhenReadonly: "hsl(232, 18%, 40%)";
|
|
210
233
|
readonly fontColorForInputWhenWarning: "#f16d0e";
|
|
234
|
+
readonly fontColorForButtonAsSecondary: "#1a1a1a";
|
|
235
|
+
readonly fontColorForButtonAsFlatWhenHovered: "hsl(175, 55%, 45%)";
|
|
236
|
+
readonly fontColorForButtonAsFlatAsCritical: "#e60050";
|
|
237
|
+
readonly fontColorForButtonAsFlatAsCriticalWhenHovered: "hsl(339.1304347826087, 100%, 25%)";
|
|
238
|
+
readonly fontColorForViewSwitcherButton: "hsl(232, 18%, 40%)";
|
|
239
|
+
readonly fontColorForStampAsPositive: "hsl(175, 55%, 25%)";
|
|
240
|
+
readonly fontColorForContentNotificationWhenSuccess: "hsl(175, 55%, 45%)";
|
|
211
241
|
readonly heightForButtonAsBig: "40px";
|
|
212
242
|
readonly heightForButtonAsMedium: "32px";
|
|
213
243
|
readonly heightForButtonAsSmall: "16px";
|
|
@@ -250,10 +280,39 @@ export declare const themes: {
|
|
|
250
280
|
readonly colorError40: "hsl(3, 60%, 46%)";
|
|
251
281
|
readonly colorError85: "hsl(1, 55%, 74%)";
|
|
252
282
|
readonly colorError95: "hsl(349, 66%, 92%)";
|
|
283
|
+
readonly borderColorForButtonAsSecondary: "hsl(244, 100%, 84%)";
|
|
284
|
+
readonly borderColorForInputWhenFocused: "hsl(240, 100%, 67%)";
|
|
285
|
+
readonly borderColorForContentNotificationWhenSuccess: "hsl(144, 69%, 80%)";
|
|
286
|
+
readonly backgroundColorForButtonWhenActive: "hsl(243, 100%, 93%)";
|
|
287
|
+
readonly backgroundColorForButtonWhenHovered: "hsl(244, 100%, 97%)";
|
|
288
|
+
readonly backgroundColorForButtonAsPrimary: "hsl(240, 64%, 58%)";
|
|
289
|
+
readonly backgroundColorForButtonAsPrimaryWhenHovered: "hsl(240, 100%, 67%)";
|
|
290
|
+
readonly backgroundColorForButtonAsPrimaryAsDefaultWhenHovered: "hsl(240, 100%, 67%)";
|
|
291
|
+
readonly backgroundColorForButtonAsPrimaryAsDefaultWhenActive: "hsl(240, 46%, 48%)";
|
|
292
|
+
readonly backgroundColorForButtonAsPrimaryAsUrgent: "hsl(35, 90%, 55%)";
|
|
293
|
+
readonly backgroundColorForInputWhenSelected: "hsl(244, 100%, 97%)";
|
|
294
|
+
readonly backgroundColorForStampAsPrimary: "hsl(244, 100%, 97%)";
|
|
295
|
+
readonly backgroundColorForStampAsPositive: "hsl(141, 76%, 92%)";
|
|
296
|
+
readonly backgroundColorForToggleThumbWhenActive: "hsl(240, 100%, 67%)";
|
|
297
|
+
readonly backgroundColorForToggleTrackWhenActive: "hsl(244, 100%, 84%)";
|
|
298
|
+
readonly backgroundColorForToggleThumbWhenDisabled: "hsl(244, 100%, 84%)";
|
|
299
|
+
readonly backgroundColorForToggleTrackWhenDisabled: "hsl(243, 100%, 93%)";
|
|
300
|
+
readonly backgroundColorForLoadingSpinnerTrack: "hsl(243, 100%, 93%)";
|
|
301
|
+
readonly backgroundColorForLoadingSpinnerDot: "hsl(240, 64%, 58%)";
|
|
302
|
+
readonly backgroundColorForContentNotificationWhenSuccess: "hsl(141, 76%, 92%)";
|
|
303
|
+
readonly fontColorForButtonAsSecondary: "hsl(240, 64%, 58%)";
|
|
304
|
+
readonly fontColorForButtonAsFlatWhenHovered: "hsl(240, 100%, 67%)";
|
|
305
|
+
readonly fontColorForButtonAsFlatAsCritical: "hsl(3, 60%, 46%)";
|
|
306
|
+
readonly fontColorForButtonAsFlatAsCriticalWhenHovered: "hsl(3, 65%, 58%)";
|
|
307
|
+
readonly fontColorForViewSwitcherButton: "hsl(240, 64%, 58%)";
|
|
308
|
+
readonly fontColorForInputWhenError: "hsl(3, 60%, 46%)";
|
|
309
|
+
readonly fontColorForStampAsPositive: "hsl(155, 90%, 24%)";
|
|
310
|
+
readonly fontColorForContentNotificationWhenSuccess: "hsl(152, 77%, 39%)";
|
|
253
311
|
};
|
|
254
312
|
};
|
|
255
313
|
declare const designTokens: {
|
|
256
314
|
readonly colorPrimary: "var(--color-primary, hsl(175, 55%, 45%))";
|
|
315
|
+
readonly colorPrimary10: "var(--color-primary-10, hsl(240, 66%, 19%))";
|
|
257
316
|
readonly colorPrimary20: "var(--color-primary-20, hsl(175, 55%, 20%))";
|
|
258
317
|
readonly colorPrimary25: "var(--color-primary-25, hsl(175, 55%, 25%))";
|
|
259
318
|
readonly colorPrimary30: "var(--color-primary-30, hsl(175, 55%, 30%))";
|
|
@@ -316,6 +375,7 @@ declare const designTokens: {
|
|
|
316
375
|
readonly colorWarning: "var(--color-warning, #f16d0e)";
|
|
317
376
|
readonly colorWarning25: "var(--color-warning-25, hsl(25.110132158590307, 89.0196078431%, 25%))";
|
|
318
377
|
readonly colorWarning40: "var(--color-warning-40, hsl(25.110132158590307, 89.0196078431%, 40%))";
|
|
378
|
+
readonly colorWarning60: "var(--color-warning-60, hsl(35, 90%, 55%))";
|
|
319
379
|
readonly colorWarning85: "var(--color-warning-85, hsl(25.110132158590307, 89.0196078431%, 85%))";
|
|
320
380
|
readonly colorWarning95: "var(--color-warning-95, hsl(25.110132158590307, 89.0196078431%, 95%))";
|
|
321
381
|
readonly colorError: "var(--color-error, #e60050)";
|
|
@@ -329,6 +389,11 @@ declare const designTokens: {
|
|
|
329
389
|
readonly colorSolid10: "var(--color-solid-10, hsl(0deg 0% 10% / 10%))";
|
|
330
390
|
readonly colorSurface: "var(--color-surface, #fff)";
|
|
331
391
|
readonly colorTransparent: "var(--color-transparent, transparent)";
|
|
392
|
+
readonly colorSuccess: "var(--color-success, hsl(152, 77%, 39%))";
|
|
393
|
+
readonly colorSuccess25: "var(--color-success-25, hsl(155, 84%, 20%))";
|
|
394
|
+
readonly colorSuccess40: "var(--color-success-40, hsl(155, 90%, 24%))";
|
|
395
|
+
readonly colorSuccess85: "var(--color-success-85, hsl(144, 69%, 80%))";
|
|
396
|
+
readonly colorSuccess95: "var(--color-success-95, hsl(141, 76%, 92%))";
|
|
332
397
|
readonly borderRadius1: "var(--border-radius-1, 1px)";
|
|
333
398
|
readonly borderRadius2: "var(--border-radius-2, 2px)";
|
|
334
399
|
readonly borderRadius4: "var(--border-radius-4, 4px)";
|
|
@@ -441,6 +506,20 @@ declare const designTokens: {
|
|
|
441
506
|
readonly backgroundColorForLocalizedInputLabel: "var(--background-color-for-localized-input-label, #fff)";
|
|
442
507
|
readonly backgroundColorForLocalizedInputLabelWhenReadonly: "var(--background-color-for-localized-input-label-when-readonly, hsl(232, 18%, 95%))";
|
|
443
508
|
readonly backgroundColorForLocalizedInputLabelWhenDisabled: "var(--background-color-for-localized-input-label-when-disabled, hsl(232, 18%, 95%))";
|
|
509
|
+
readonly backgroundColorForButtonAsPrimary: "var(--background-color-for-button-as-primary, #15a390)";
|
|
510
|
+
readonly backgroundColorForButtonAsPrimaryWhenHovered: "var(--background-color-for-button-as-primary-when-hovered, hsl(175, 55%, 45%))";
|
|
511
|
+
readonly backgroundColorForButtonAsPrimaryAsDefaultWhenHovered: "var(--background-color-for-button-as-primary-as-default-when-hovered, #17ab97)";
|
|
512
|
+
readonly backgroundColorForButtonAsPrimaryAsDefaultWhenActive: "var(--background-color-for-button-as-primary-as-default-when-active, #15a390)";
|
|
513
|
+
readonly backgroundColorForButtonAsPrimaryAsUrgent: "var(--background-color-for-button-as-primary-as-urgent, #f16d0e)";
|
|
514
|
+
readonly backgroundColorForStampAsPrimary: "var(--background-color-for-stamp-as-primary, hsl(175, 70%, 90%))";
|
|
515
|
+
readonly backgroundColorForStampAsPositive: "var(--background-color-for-stamp-as-positive, hsl(175, 70%, 90%))";
|
|
516
|
+
readonly backgroundColorForToggleThumbWhenActive: "var(--background-color-for-toggle-thumb-when-active, hsl(175, 55%, 25%))";
|
|
517
|
+
readonly backgroundColorForToggleTrackWhenActive: "var(--background-color-for-toggle-track-when-active, hsl(175, 55%, 40%))";
|
|
518
|
+
readonly backgroundColorForToggleThumbWhenDisabled: "var(--background-color-for-toggle-thumb-when-disabled, hsl(232, 18%, 60%))";
|
|
519
|
+
readonly backgroundColorForToggleTrackWhenDisabled: "var(--background-color-for-toggle-track-when-disabled, hsl(232, 18%, 90%))";
|
|
520
|
+
readonly backgroundColorForLoadingSpinnerTrack: "var(--background-color-for-loading-spinner-track, #213c45)";
|
|
521
|
+
readonly backgroundColorForLoadingSpinnerDot: "var(--background-color-for-loading-spinner-dot, #213c45)";
|
|
522
|
+
readonly backgroundColorForContentNotificationWhenSuccess: "var(--background-color-for-content-notification-when-success, hsl(175, 90%, 95%))";
|
|
444
523
|
readonly borderColorForInput: "var(--border-color-for-input, hsl(232, 18%, 80%))";
|
|
445
524
|
readonly borderColorForInputWhenFocused: "var(--border-color-for-input-when-focused, hsl(175, 55%, 45%))";
|
|
446
525
|
readonly borderColorForInputWhenDisabled: "var(--border-color-for-input-when-disabled, hsl(232, 18%, 80%))";
|
|
@@ -449,6 +528,8 @@ declare const designTokens: {
|
|
|
449
528
|
readonly borderColorForInputWhenWarning: "var(--border-color-for-input-when-warning, #f16d0e)";
|
|
450
529
|
readonly borderColorForInputWhenHovered: "var(--border-color-for-input-when-hovered, hsl(232, 18%, 80%))";
|
|
451
530
|
readonly borderColorForInputAsQuiet: "var(--border-color-for-input-as-quiet, transparent)";
|
|
531
|
+
readonly borderColorForButtonAsSecondary: "var(--border-color-for-button-as-secondary, hsl(232, 18%, 80%))";
|
|
532
|
+
readonly borderColorForContentNotificationWhenSuccess: "var(--border-color-for-content-notification-when-success, hsl(175, 70%, 85%))";
|
|
452
533
|
readonly borderRadiusForButtonAsBig: "var(--border-radius-for-button-as-big, 4px)";
|
|
453
534
|
readonly borderRadiusForButtonAsMedium: "var(--border-radius-for-button-as-medium, 4px)";
|
|
454
535
|
readonly borderRadiusForInput: "var(--border-radius-for-input, 4px)";
|
|
@@ -461,6 +542,13 @@ declare const designTokens: {
|
|
|
461
542
|
readonly fontColorForInputWhenError: "var(--font-color-for-input-when-error, #e60050)";
|
|
462
543
|
readonly fontColorForInputWhenReadonly: "var(--font-color-for-input-when-readonly, hsl(232, 18%, 40%))";
|
|
463
544
|
readonly fontColorForInputWhenWarning: "var(--font-color-for-input-when-warning, #f16d0e)";
|
|
545
|
+
readonly fontColorForButtonAsSecondary: "var(--font-color-for-button-as-secondary, #1a1a1a)";
|
|
546
|
+
readonly fontColorForButtonAsFlatWhenHovered: "var(--font-color-for-button-as-flat-when-hovered, hsl(175, 55%, 45%))";
|
|
547
|
+
readonly fontColorForButtonAsFlatAsCritical: "var(--font-color-for-button-as-flat-as-critical, #e60050)";
|
|
548
|
+
readonly fontColorForButtonAsFlatAsCriticalWhenHovered: "var(--font-color-for-button-as-flat-as-critical-when-hovered, hsl(339.1304347826087, 100%, 25%))";
|
|
549
|
+
readonly fontColorForViewSwitcherButton: "var(--font-color-for-view-switcher-button, hsl(232, 18%, 40%))";
|
|
550
|
+
readonly fontColorForStampAsPositive: "var(--font-color-for-stamp-as-positive, hsl(175, 55%, 25%))";
|
|
551
|
+
readonly fontColorForContentNotificationWhenSuccess: "var(--font-color-for-content-notification-when-success, hsl(175, 55%, 45%))";
|
|
464
552
|
readonly heightForButtonAsBig: "var(--height-for-button-as-big, 40px)";
|
|
465
553
|
readonly heightForButtonAsMedium: "var(--height-for-button-as-medium, 32px)";
|
|
466
554
|
readonly heightForButtonAsSmall: "var(--height-for-button-as-small, 16px)";
|
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
|
|
8
8
|
:root {
|
|
9
9
|
--color-primary: hsl(175, 55%, 45%);
|
|
10
|
+
--color-primary-10: hsl(240, 66%, 19%);
|
|
10
11
|
--color-primary-20: hsl(175, 55%, 20%);
|
|
11
12
|
--color-primary-25: hsl(175, 55%, 25%);
|
|
12
13
|
--color-primary-30: hsl(175, 55%, 30%);
|
|
@@ -69,6 +70,7 @@
|
|
|
69
70
|
--color-warning: #f16d0e;
|
|
70
71
|
--color-warning-25: hsl(25.110132158590307, 89.0196078431%, 25%);
|
|
71
72
|
--color-warning-40: hsl(25.110132158590307, 89.0196078431%, 40%);
|
|
73
|
+
--color-warning-60: hsl(35, 90%, 55%);
|
|
72
74
|
--color-warning-85: hsl(25.110132158590307, 89.0196078431%, 85%);
|
|
73
75
|
--color-warning-95: hsl(25.110132158590307, 89.0196078431%, 95%);
|
|
74
76
|
--color-error: #e60050;
|
|
@@ -82,6 +84,11 @@
|
|
|
82
84
|
--color-solid-10: hsl(0deg 0% 10% / 10%);
|
|
83
85
|
--color-surface: #fff;
|
|
84
86
|
--color-transparent: transparent;
|
|
87
|
+
--color-success: hsl(152, 77%, 39%);
|
|
88
|
+
--color-success-25: hsl(155, 84%, 20%);
|
|
89
|
+
--color-success-40: hsl(155, 90%, 24%);
|
|
90
|
+
--color-success-85: hsl(144, 69%, 80%);
|
|
91
|
+
--color-success-95: hsl(141, 76%, 92%);
|
|
85
92
|
--border-radius-1: 1px;
|
|
86
93
|
--border-radius-2: 2px;
|
|
87
94
|
--border-radius-4: 4px;
|
|
@@ -211,6 +218,20 @@
|
|
|
211
218
|
18%,
|
|
212
219
|
95%
|
|
213
220
|
);
|
|
221
|
+
--background-color-for-button-as-primary: #15a390;
|
|
222
|
+
--background-color-for-button-as-primary-when-hovered: hsl(175, 55%, 45%);
|
|
223
|
+
--background-color-for-button-as-primary-as-default-when-hovered: #17ab97;
|
|
224
|
+
--background-color-for-button-as-primary-as-default-when-active: #15a390;
|
|
225
|
+
--background-color-for-button-as-primary-as-urgent: #f16d0e;
|
|
226
|
+
--background-color-for-stamp-as-primary: hsl(175, 70%, 90%);
|
|
227
|
+
--background-color-for-stamp-as-positive: hsl(175, 70%, 90%);
|
|
228
|
+
--background-color-for-toggle-thumb-when-active: hsl(175, 55%, 25%);
|
|
229
|
+
--background-color-for-toggle-track-when-active: hsl(175, 55%, 40%);
|
|
230
|
+
--background-color-for-toggle-thumb-when-disabled: hsl(232, 18%, 60%);
|
|
231
|
+
--background-color-for-toggle-track-when-disabled: hsl(232, 18%, 90%);
|
|
232
|
+
--background-color-for-loading-spinner-track: #213c45;
|
|
233
|
+
--background-color-for-loading-spinner-dot: #213c45;
|
|
234
|
+
--background-color-for-content-notification-when-success: hsl(175, 90%, 95%);
|
|
214
235
|
--border-color-for-input: hsl(232, 18%, 80%);
|
|
215
236
|
--border-color-for-input-when-focused: hsl(175, 55%, 45%);
|
|
216
237
|
--border-color-for-input-when-disabled: hsl(232, 18%, 80%);
|
|
@@ -219,6 +240,8 @@
|
|
|
219
240
|
--border-color-for-input-when-warning: #f16d0e;
|
|
220
241
|
--border-color-for-input-when-hovered: hsl(232, 18%, 80%);
|
|
221
242
|
--border-color-for-input-as-quiet: transparent;
|
|
243
|
+
--border-color-for-button-as-secondary: hsl(232, 18%, 80%);
|
|
244
|
+
--border-color-for-content-notification-when-success: hsl(175, 70%, 85%);
|
|
222
245
|
--border-radius-for-button-as-big: 4px;
|
|
223
246
|
--border-radius-for-button-as-medium: 4px;
|
|
224
247
|
--border-radius-for-input: 4px;
|
|
@@ -231,6 +254,17 @@
|
|
|
231
254
|
--font-color-for-input-when-error: #e60050;
|
|
232
255
|
--font-color-for-input-when-readonly: hsl(232, 18%, 40%);
|
|
233
256
|
--font-color-for-input-when-warning: #f16d0e;
|
|
257
|
+
--font-color-for-button-as-secondary: #1a1a1a;
|
|
258
|
+
--font-color-for-button-as-flat-when-hovered: hsl(175, 55%, 45%);
|
|
259
|
+
--font-color-for-button-as-flat-as-critical: #e60050;
|
|
260
|
+
--font-color-for-button-as-flat-as-critical-when-hovered: hsl(
|
|
261
|
+
339.1304347826087,
|
|
262
|
+
100%,
|
|
263
|
+
25%
|
|
264
|
+
);
|
|
265
|
+
--font-color-for-view-switcher-button: hsl(232, 18%, 40%);
|
|
266
|
+
--font-color-for-stamp-as-positive: hsl(175, 55%, 25%);
|
|
267
|
+
--font-color-for-content-notification-when-success: hsl(175, 55%, 45%);
|
|
234
268
|
--height-for-button-as-big: 40px;
|
|
235
269
|
--height-for-button-as-medium: 32px;
|
|
236
270
|
--height-for-button-as-small: 16px;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"--color-primary": "hsl(175, 55%, 45%)",
|
|
3
|
+
"--color-primary-10": "hsl(240, 66%, 19%)",
|
|
3
4
|
"--color-primary-20": "hsl(175, 55%, 20%)",
|
|
4
5
|
"--color-primary-25": "hsl(175, 55%, 25%)",
|
|
5
6
|
"--color-primary-30": "hsl(175, 55%, 30%)",
|
|
@@ -62,6 +63,7 @@
|
|
|
62
63
|
"--color-warning": "#f16d0e",
|
|
63
64
|
"--color-warning-25": "hsl(25.110132158590307, 89.0196078431%, 25%)",
|
|
64
65
|
"--color-warning-40": "hsl(25.110132158590307, 89.0196078431%, 40%)",
|
|
66
|
+
"--color-warning-60": "hsl(35, 90%, 55%)",
|
|
65
67
|
"--color-warning-85": "hsl(25.110132158590307, 89.0196078431%, 85%)",
|
|
66
68
|
"--color-warning-95": "hsl(25.110132158590307, 89.0196078431%, 95%)",
|
|
67
69
|
"--color-error": "#e60050",
|
|
@@ -75,6 +77,11 @@
|
|
|
75
77
|
"--color-solid-10": "hsl(0deg 0% 10% / 10%)",
|
|
76
78
|
"--color-surface": "#fff",
|
|
77
79
|
"--color-transparent": "transparent",
|
|
80
|
+
"--color-success": "hsl(152, 77%, 39%)",
|
|
81
|
+
"--color-success-25": "hsl(155, 84%, 20%)",
|
|
82
|
+
"--color-success-40": "hsl(155, 90%, 24%)",
|
|
83
|
+
"--color-success-85": "hsl(144, 69%, 80%)",
|
|
84
|
+
"--color-success-95": "hsl(141, 76%, 92%)",
|
|
78
85
|
"--border-radius-1": "1px",
|
|
79
86
|
"--border-radius-2": "2px",
|
|
80
87
|
"--border-radius-4": "4px",
|
|
@@ -187,6 +194,20 @@
|
|
|
187
194
|
"--background-color-for-localized-input-label": "#fff",
|
|
188
195
|
"--background-color-for-localized-input-label-when-readonly": "hsl(232, 18%, 95%)",
|
|
189
196
|
"--background-color-for-localized-input-label-when-disabled": "hsl(232, 18%, 95%)",
|
|
197
|
+
"--background-color-for-button-as-primary": "#15a390",
|
|
198
|
+
"--background-color-for-button-as-primary-when-hovered": "hsl(175, 55%, 45%)",
|
|
199
|
+
"--background-color-for-button-as-primary-as-default-when-hovered": "#17ab97",
|
|
200
|
+
"--background-color-for-button-as-primary-as-default-when-active": "#15a390",
|
|
201
|
+
"--background-color-for-button-as-primary-as-urgent": "#f16d0e",
|
|
202
|
+
"--background-color-for-stamp-as-primary": "hsl(175, 70%, 90%)",
|
|
203
|
+
"--background-color-for-stamp-as-positive": "hsl(175, 70%, 90%)",
|
|
204
|
+
"--background-color-for-toggle-thumb-when-active": "hsl(175, 55%, 25%)",
|
|
205
|
+
"--background-color-for-toggle-track-when-active": "hsl(175, 55%, 40%)",
|
|
206
|
+
"--background-color-for-toggle-thumb-when-disabled": "hsl(232, 18%, 60%)",
|
|
207
|
+
"--background-color-for-toggle-track-when-disabled": "hsl(232, 18%, 90%)",
|
|
208
|
+
"--background-color-for-loading-spinner-track": "#213c45",
|
|
209
|
+
"--background-color-for-loading-spinner-dot": "#213c45",
|
|
210
|
+
"--background-color-for-content-notification-when-success": "hsl(175, 90%, 95%)",
|
|
190
211
|
"--border-color-for-input": "hsl(232, 18%, 80%)",
|
|
191
212
|
"--border-color-for-input-when-focused": "hsl(175, 55%, 45%)",
|
|
192
213
|
"--border-color-for-input-when-disabled": "hsl(232, 18%, 80%)",
|
|
@@ -195,6 +216,8 @@
|
|
|
195
216
|
"--border-color-for-input-when-warning": "#f16d0e",
|
|
196
217
|
"--border-color-for-input-when-hovered": "hsl(232, 18%, 80%)",
|
|
197
218
|
"--border-color-for-input-as-quiet": "transparent",
|
|
219
|
+
"--border-color-for-button-as-secondary": "hsl(232, 18%, 80%)",
|
|
220
|
+
"--border-color-for-content-notification-when-success": "hsl(175, 70%, 85%)",
|
|
198
221
|
"--border-radius-for-button-as-big": "4px",
|
|
199
222
|
"--border-radius-for-button-as-medium": "4px",
|
|
200
223
|
"--border-radius-for-input": "4px",
|
|
@@ -207,6 +230,13 @@
|
|
|
207
230
|
"--font-color-for-input-when-error": "#e60050",
|
|
208
231
|
"--font-color-for-input-when-readonly": "hsl(232, 18%, 40%)",
|
|
209
232
|
"--font-color-for-input-when-warning": "#f16d0e",
|
|
233
|
+
"--font-color-for-button-as-secondary": "#1a1a1a",
|
|
234
|
+
"--font-color-for-button-as-flat-when-hovered": "hsl(175, 55%, 45%)",
|
|
235
|
+
"--font-color-for-button-as-flat-as-critical": "#e60050",
|
|
236
|
+
"--font-color-for-button-as-flat-as-critical-when-hovered": "hsl(339.1304347826087, 100%, 25%)",
|
|
237
|
+
"--font-color-for-view-switcher-button": "hsl(232, 18%, 40%)",
|
|
238
|
+
"--font-color-for-stamp-as-positive": "hsl(175, 55%, 25%)",
|
|
239
|
+
"--font-color-for-content-notification-when-success": "hsl(175, 55%, 45%)",
|
|
210
240
|
"--height-for-button-as-big": "40px",
|
|
211
241
|
"--height-for-button-as-medium": "32px",
|
|
212
242
|
"--height-for-button-as-small": "16px",
|
|
@@ -37,6 +37,7 @@ choiceGroupsByTheme:
|
|
|
37
37
|
description: All colors in the system
|
|
38
38
|
choices:
|
|
39
39
|
color-primary: 'hsl(175, 55%, 45%)'
|
|
40
|
+
color-primary-10: 'hsl(240, 66%, 19%)' # design token copied from recolouring theme for export
|
|
40
41
|
color-primary-20: 'hsl(175, 55%, 20%)'
|
|
41
42
|
color-primary-25: 'hsl(175, 55%, 25%)'
|
|
42
43
|
color-primary-30: 'hsl(175, 55%, 30%)'
|
|
@@ -99,6 +100,7 @@ choiceGroupsByTheme:
|
|
|
99
100
|
color-warning: '#f16d0e'
|
|
100
101
|
color-warning-25: 'hsl(25.110132158590307, 89.0196078431%, 25%)'
|
|
101
102
|
color-warning-40: 'hsl(25.110132158590307, 89.0196078431%, 40%)'
|
|
103
|
+
color-warning-60: 'hsl(35, 90%, 55%)' # design token copied from recolouring theme for export
|
|
102
104
|
color-warning-85: 'hsl(25.110132158590307, 89.0196078431%, 85%)'
|
|
103
105
|
color-warning-95: 'hsl(25.110132158590307, 89.0196078431%, 95%)'
|
|
104
106
|
color-error: '#e60050'
|
|
@@ -112,6 +114,11 @@ choiceGroupsByTheme:
|
|
|
112
114
|
color-solid-10: 'hsl(0deg 0% 10% / 10%)'
|
|
113
115
|
color-surface: '#fff'
|
|
114
116
|
color-transparent: 'transparent'
|
|
117
|
+
color-success: 'hsl(152, 77%, 39%)' # design token copied from recolouring theme for export
|
|
118
|
+
color-success-25: 'hsl(155, 84%, 20%)' # design token copied from recolouring theme for export
|
|
119
|
+
color-success-40: 'hsl(155, 90%, 24%)' # design token copied from recolouring theme for export
|
|
120
|
+
color-success-85: 'hsl(144, 69%, 80%)' # design token copied from recolouring theme for export
|
|
121
|
+
color-success-95: 'hsl(141, 76%, 92%)' # design token copied from recolouring theme for export
|
|
115
122
|
|
|
116
123
|
borderRadiuses:
|
|
117
124
|
label: Border Radiuses
|
|
@@ -327,6 +334,21 @@ variants:
|
|
|
327
334
|
description: 'To differentiate component big size'
|
|
328
335
|
quiet:
|
|
329
336
|
description: 'When the element is quiet style'
|
|
337
|
+
# recolouring rollout
|
|
338
|
+
secondary:
|
|
339
|
+
description: 'To differentiate component secondary type'
|
|
340
|
+
primary:
|
|
341
|
+
description: 'To differentiate component primary type'
|
|
342
|
+
flat:
|
|
343
|
+
description: 'To differentiate component flat type'
|
|
344
|
+
default:
|
|
345
|
+
description: 'To differentiate component default type'
|
|
346
|
+
critical:
|
|
347
|
+
description: 'To differentiate component critical type'
|
|
348
|
+
urgent:
|
|
349
|
+
description: 'To differentiate component urgent type'
|
|
350
|
+
positive:
|
|
351
|
+
description: 'To differentiate component positive type'
|
|
330
352
|
|
|
331
353
|
componentGroups:
|
|
332
354
|
button:
|
|
@@ -335,6 +357,21 @@ componentGroups:
|
|
|
335
357
|
description: 'Input elements'
|
|
336
358
|
localized-input-label:
|
|
337
359
|
description: 'Localized multiline text input label elements'
|
|
360
|
+
# recolouring rollout
|
|
361
|
+
view-switcher-button:
|
|
362
|
+
description: 'Viewswitcher Button elements'
|
|
363
|
+
stamp:
|
|
364
|
+
description: 'Stamp elements'
|
|
365
|
+
toggle-track:
|
|
366
|
+
description: 'Toggle track elements'
|
|
367
|
+
toggle-thumb:
|
|
368
|
+
description: 'Toggle thumb elements'
|
|
369
|
+
loading-spinner-track:
|
|
370
|
+
description: 'Loading spinner track elements'
|
|
371
|
+
loading-spinner-dot:
|
|
372
|
+
description: 'Loading spinner dot elements'
|
|
373
|
+
content-notification:
|
|
374
|
+
description: 'Content notification elements'
|
|
338
375
|
|
|
339
376
|
decisionGroupsByTheme:
|
|
340
377
|
default:
|
|
@@ -372,6 +409,35 @@ decisionGroupsByTheme:
|
|
|
372
409
|
choice: color-neutral-95
|
|
373
410
|
background-color-for-localized-input-label-when-disabled:
|
|
374
411
|
choice: color-neutral-95
|
|
412
|
+
# recolouring rollout
|
|
413
|
+
background-color-for-button-as-primary:
|
|
414
|
+
choice: '#15a390'
|
|
415
|
+
background-color-for-button-as-primary-when-hovered:
|
|
416
|
+
choice: color-primary
|
|
417
|
+
background-color-for-button-as-primary-as-default-when-hovered:
|
|
418
|
+
choice: '#17ab97'
|
|
419
|
+
background-color-for-button-as-primary-as-default-when-active:
|
|
420
|
+
choice: '#15a390'
|
|
421
|
+
background-color-for-button-as-primary-as-urgent:
|
|
422
|
+
choice: color-warning
|
|
423
|
+
background-color-for-stamp-as-primary:
|
|
424
|
+
choice: color-primary-90
|
|
425
|
+
background-color-for-stamp-as-positive:
|
|
426
|
+
choice: color-primary-90
|
|
427
|
+
background-color-for-toggle-thumb-when-active:
|
|
428
|
+
choice: color-primary-25
|
|
429
|
+
background-color-for-toggle-track-when-active:
|
|
430
|
+
choice: color-primary-40
|
|
431
|
+
background-color-for-toggle-thumb-when-disabled:
|
|
432
|
+
choice: color-neutral-60
|
|
433
|
+
background-color-for-toggle-track-when-disabled:
|
|
434
|
+
choice: color-neutral-90
|
|
435
|
+
background-color-for-loading-spinner-track:
|
|
436
|
+
choice: color-accent
|
|
437
|
+
background-color-for-loading-spinner-dot:
|
|
438
|
+
choice: color-accent
|
|
439
|
+
background-color-for-content-notification-when-success:
|
|
440
|
+
choice: color-primary-95
|
|
375
441
|
|
|
376
442
|
borderColors:
|
|
377
443
|
label: Border Colors
|
|
@@ -393,6 +459,11 @@ decisionGroupsByTheme:
|
|
|
393
459
|
choice: color-neutral
|
|
394
460
|
border-color-for-input-as-quiet:
|
|
395
461
|
choice: color-transparent
|
|
462
|
+
# recolouring rollout
|
|
463
|
+
border-color-for-button-as-secondary:
|
|
464
|
+
choice: color-neutral
|
|
465
|
+
border-color-for-content-notification-when-success:
|
|
466
|
+
choice: color-primary-85
|
|
396
467
|
|
|
397
468
|
borderRadiuses:
|
|
398
469
|
label: Border Radius
|
|
@@ -432,6 +503,21 @@ decisionGroupsByTheme:
|
|
|
432
503
|
choice: color-neutral-40
|
|
433
504
|
font-color-for-input-when-warning:
|
|
434
505
|
choice: color-warning
|
|
506
|
+
# recolouring rollout
|
|
507
|
+
font-color-for-button-as-secondary:
|
|
508
|
+
choice: color-solid
|
|
509
|
+
font-color-for-button-as-flat-when-hovered:
|
|
510
|
+
choice: color-primary
|
|
511
|
+
font-color-for-button-as-flat-as-critical:
|
|
512
|
+
choice: color-error
|
|
513
|
+
font-color-for-button-as-flat-as-critical-when-hovered:
|
|
514
|
+
choice: color-error-25
|
|
515
|
+
font-color-for-view-switcher-button:
|
|
516
|
+
choice: color-neutral-40
|
|
517
|
+
font-color-for-stamp-as-positive:
|
|
518
|
+
choice: color-primary-25
|
|
519
|
+
font-color-for-content-notification-when-success:
|
|
520
|
+
choice: color-primary
|
|
435
521
|
|
|
436
522
|
heights:
|
|
437
523
|
label: Height
|
|
@@ -490,3 +576,75 @@ decisionGroupsByTheme:
|
|
|
490
576
|
choice: 'inset 0 0 0 1px var(--color-error)'
|
|
491
577
|
shadow-for-input-when-warning:
|
|
492
578
|
choice: 'inset 0 0 0 1px var(--color-warning)'
|
|
579
|
+
|
|
580
|
+
recolouring:
|
|
581
|
+
borderColors:
|
|
582
|
+
label: Border Colors
|
|
583
|
+
prefix: border-color
|
|
584
|
+
decisions:
|
|
585
|
+
border-color-for-button-as-secondary:
|
|
586
|
+
choice: color-primary-85
|
|
587
|
+
border-color-for-input-when-focused:
|
|
588
|
+
choice: color-primary-40
|
|
589
|
+
border-color-for-content-notification-when-success:
|
|
590
|
+
choice: color-success-85
|
|
591
|
+
|
|
592
|
+
backgroundColors:
|
|
593
|
+
label: Background Colors
|
|
594
|
+
prefix: background-color
|
|
595
|
+
decisions:
|
|
596
|
+
background-color-for-button-when-active:
|
|
597
|
+
choice: color-primary-90
|
|
598
|
+
background-color-for-button-when-hovered:
|
|
599
|
+
choice: color-primary-95
|
|
600
|
+
background-color-for-button-as-primary:
|
|
601
|
+
choice: color-primary
|
|
602
|
+
background-color-for-button-as-primary-when-hovered:
|
|
603
|
+
choice: color-primary-40
|
|
604
|
+
background-color-for-button-as-primary-as-default-when-hovered:
|
|
605
|
+
choice: color-primary-40
|
|
606
|
+
background-color-for-button-as-primary-as-default-when-active:
|
|
607
|
+
choice: color-primary-25
|
|
608
|
+
background-color-for-button-as-primary-as-urgent:
|
|
609
|
+
choice: color-warning-60
|
|
610
|
+
background-color-for-input-when-selected:
|
|
611
|
+
choice: color-primary-95
|
|
612
|
+
background-color-for-stamp-as-primary:
|
|
613
|
+
choice: color-primary-95
|
|
614
|
+
background-color-for-stamp-as-positive:
|
|
615
|
+
choice: color-success-95
|
|
616
|
+
background-color-for-toggle-thumb-when-active:
|
|
617
|
+
choice: color-primary-40
|
|
618
|
+
background-color-for-toggle-track-when-active:
|
|
619
|
+
choice: color-primary-85
|
|
620
|
+
background-color-for-toggle-thumb-when-disabled:
|
|
621
|
+
choice: color-primary-85
|
|
622
|
+
background-color-for-toggle-track-when-disabled:
|
|
623
|
+
choice: color-primary-90
|
|
624
|
+
background-color-for-loading-spinner-track:
|
|
625
|
+
choice: color-primary-90
|
|
626
|
+
background-color-for-loading-spinner-dot:
|
|
627
|
+
choice: color-primary
|
|
628
|
+
background-color-for-content-notification-when-success:
|
|
629
|
+
choice: color-success-95
|
|
630
|
+
|
|
631
|
+
fontColors:
|
|
632
|
+
label: Font Colors
|
|
633
|
+
prefix: font-color
|
|
634
|
+
decisions:
|
|
635
|
+
font-color-for-button-as-secondary:
|
|
636
|
+
choice: color-primary
|
|
637
|
+
font-color-for-button-as-flat-when-hovered:
|
|
638
|
+
choice: color-primary-40
|
|
639
|
+
font-color-for-button-as-flat-as-critical:
|
|
640
|
+
choice: color-error-40
|
|
641
|
+
font-color-for-button-as-flat-as-critical-when-hovered:
|
|
642
|
+
choice: color-error
|
|
643
|
+
font-color-for-view-switcher-button:
|
|
644
|
+
choice: color-primary
|
|
645
|
+
font-color-for-input-when-error:
|
|
646
|
+
choice: color-error-40
|
|
647
|
+
font-color-for-stamp-as-positive:
|
|
648
|
+
choice: color-success-40
|
|
649
|
+
font-color-for-content-notification-when-success:
|
|
650
|
+
choice: color-success
|
package/materials/resets.css
CHANGED
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@commercetools-uikit/design-system",
|
|
3
3
|
"description": "Core package of the commercetools design system.",
|
|
4
|
-
"version": "18.
|
|
4
|
+
"version": "18.2.0",
|
|
5
5
|
"bugs": "https://github.com/commercetools/ui-kit/issues",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
"dependencies": {
|
|
26
26
|
"@babel/runtime": "^7.20.13",
|
|
27
27
|
"@babel/runtime-corejs3": "^7.20.13",
|
|
28
|
-
"@commercetools-uikit/hooks": "18.
|
|
28
|
+
"@commercetools-uikit/hooks": "18.2.0",
|
|
29
29
|
"@emotion/react": "^11.10.5",
|
|
30
30
|
"lodash": "4.17.21",
|
|
31
31
|
"prop-types": "15.8.1",
|