@commercetools-uikit/design-system
Advanced tools
@commercetools-uikit/design-system - npm Package Compare versions
Comparing version 19.1.0 to 19.2.0
@@ -57,50 +57,50 @@ 'use strict'; | ||
| default: { | ||
| colorPrimary: 'hsl(175, 55%, 45%)', | ||
| colorPrimary10: 'hsl(175, 55%, 10%)', | ||
| colorPrimary20: 'hsl(175, 55%, 20%)', | ||
| colorPrimary25: 'hsl(175, 55%, 25%)', | ||
| colorPrimary30: 'hsl(175, 55%, 30%)', | ||
| colorPrimary40: 'hsl(175, 55%, 40%)', | ||
| colorPrimary85: 'hsl(175, 70%, 85%)', | ||
| colorPrimary90: 'hsl(175, 70%, 90%)', | ||
| colorPrimary95: 'hsl(175, 90%, 95%)', | ||
| colorPrimary98: 'hsl(175, 100%, 99%)', | ||
| colorPrimary: 'hsl(240, 64%, 58%)', | ||
| colorPrimary10: 'hsl(240, 66%, 19%)', | ||
| colorPrimary20: 'hsl(240, 45%, 33%)', | ||
| colorPrimary25: 'hsl(240, 46%, 48%)', | ||
| colorPrimary30: 'hsl(240, 46%, 53%)', | ||
| colorPrimary40: 'hsl(240, 100%, 67%)', | ||
| colorPrimary85: 'hsl(244, 100%, 84%)', | ||
| colorPrimary90: 'hsl(243, 100%, 93%)', | ||
| colorPrimary95: 'hsl(244, 100%, 97%)', | ||
| colorPrimary98: 'hsl(244, 100%, 99%)', | ||
| colorAccent: '#213c45', | ||
| colorAccent10: 'hsl(195, 35.2941176471%, 10%)', | ||
| colorAccent20: 'hsl(195, 35.2941176471%, 20%)', | ||
| colorAccent30: 'hsl(195, 35.2941176471%, 30%)', | ||
| colorAccent40: 'hsl(195, 35.2941176471%, 40%)', | ||
| colorAccent50: 'hsl(195, 35%, 50%)', | ||
| colorAccent60: 'hsl(195, 35.2941176471%, 60%)', | ||
| colorAccent85: 'hsl(195, 35%, 85%)', | ||
| colorAccent90: 'hsl(195, 35.2941176471%, 90%)', | ||
| colorAccent95: 'hsl(195, 35.2941176471%, 95%)', | ||
| colorAccent98: 'hsl(195, 35.2941176471%, 98%)', | ||
| colorBrown10: 'hsl(35, 90%, 10%)', | ||
| colorBrown20: 'hsl(35, 50%, 20%)', | ||
| colorBrown35: 'hsl(35, 25%, 35%)', | ||
| colorBrown50: 'hsl(35, 30%, 50%)', | ||
| colorBrown70: 'hsl(35, 40%, 70%)', | ||
| colorBrown85: 'hsl(35, 60%, 85%)', | ||
| colorBrown90: 'hsl(35, 90%, 90%)', | ||
| colorBrown95: 'hsl(35, 80%, 95%)', | ||
| colorBrown98: 'hsl(35, 90%, 98%)', | ||
| colorPurple10: 'hsl(248, 90%, 10%)', | ||
| colorAccent10: 'hsl(195, 100%, 10%)', | ||
| colorAccent20: 'hsl(195, 80%, 20%)', | ||
| colorAccent30: 'hsl(195, 70%, 30%)', | ||
| colorAccent40: 'hsl(195, 70%, 40%)', | ||
| colorAccent50: 'hsl(195, 70%, 50%)', | ||
| colorAccent60: 'hsl(195, 70%, 60%)', | ||
| colorAccent85: 'hsl(195, 85%, 85%)', | ||
| colorAccent90: 'hsl(195, 90%, 90%)', | ||
| colorAccent95: 'hsl(195, 95%, 95%)', | ||
| colorAccent98: 'hsl(195, 100%, 98%)', | ||
| colorBrown10: 'hsl(41, 100%, 10%)', | ||
| colorBrown20: 'hsl(41, 100%, 20%)', | ||
| colorBrown35: 'hsl(41, 96%, 35%)', | ||
| colorBrown50: 'hsl(41, 95%, 44%)', | ||
| colorBrown70: 'hsl(47, 95%, 70%)', | ||
| colorBrown85: 'hsl(47, 100%, 85%)', | ||
| colorBrown90: 'hsl(47, 100%, 90%)', | ||
| colorBrown95: 'hsl(47, 100%, 95%)', | ||
| colorBrown98: 'hsl(48, 100%, 97%)', | ||
| colorPurple10: 'hsl(248, 88%, 10%)', | ||
| colorPurple20: 'hsl(248, 50%, 20%)', | ||
| colorPurple35: 'hsl(248, 25%, 35%)', | ||
| colorPurple50: 'hsl(248, 30%,50%)', | ||
| colorPurple70: 'hsl(248, 40%, 70%)', | ||
| colorPurple85: 'hsl(248, 60%, 85%)', | ||
| colorPurple90: 'hsl(248, 50%, 90%)', | ||
| colorPurple95: 'hsl(248, 80%, 95%)', | ||
| colorPurple98: 'hsl(248, 90%, 98%)', | ||
| colorTurquoise10: 'hsl(180, 90%, 10%)', | ||
| colorTurquoise20: 'hsl(180, 50%, 20%)', | ||
| colorTurquoise35: 'hsl(180, 25%, 35%)', | ||
| colorTurquoise50: 'hsl(180, 30%, 45%)', | ||
| colorTurquoise70: 'hsl(180, 40%, 70%)', | ||
| colorTurquoise85: 'hsl(180, 60%, 85%)', | ||
| colorTurquoise90: 'hsl(180, 40%, 90%)', | ||
| colorTurquoise95: 'hsl(180, 80%, 95%)', | ||
| colorTurquoise98: 'hsl(180, 90%, 98%)', | ||
| colorPurple50: 'hsl(248, 64%, 58%)', | ||
| colorPurple70: 'hsl(248, 80%, 70%)', | ||
| colorPurple85: 'hsl(249, 100%, 85%)', | ||
| colorPurple90: 'hsl(248, 100%, 90%)', | ||
| colorPurple95: 'hsl(248, 100%, 95%)', | ||
| colorPurple98: 'hsl(246, 100%, 98%)', | ||
| colorTurquoise10: 'hsl(180, 88%, 10%)', | ||
| colorTurquoise20: 'hsl(180, 90%, 20%)', | ||
| colorTurquoise35: 'hsl(178, 88%, 35%)', | ||
| colorTurquoise50: 'hsl(178, 67%, 50%)', | ||
| colorTurquoise70: 'hsl(180, 75%, 70%)', | ||
| colorTurquoise85: 'hsl(180, 90%, 85%)', | ||
| colorTurquoise90: 'hsl(180, 88%, 90%)', | ||
| colorTurquoise95: 'hsl(180, 88%, 95%)', | ||
| colorTurquoise98: 'hsl(180, 100%, 98%)', | ||
| colorNeutral: 'hsl(232, 18%, 80%)', | ||
@@ -121,13 +121,13 @@ colorNeutral05: 'hsl(0deg 0% 80% / 5%)', | ||
| colorInfo95: 'hsl(203.05555555555554, 93.9130434783%, 95%)', | ||
| colorWarning: '#f16d0e', | ||
| colorWarning25: 'hsl(25.110132158590307, 89.0196078431%, 25%)', | ||
| colorWarning40: 'hsl(25.110132158590307, 89.0196078431%, 40%)', | ||
| colorWarning60: 'hsl(25.110132158590307, 90%, 60%)', | ||
| colorWarning85: 'hsl(25.110132158590307, 89.0196078431%, 85%)', | ||
| colorWarning95: 'hsl(25.110132158590307, 89.0196078431%, 95%)', | ||
| colorError: '#e60050', | ||
| colorError25: 'hsl(339.1304347826087, 100%, 25%)', | ||
| colorError40: 'hsl(339.1304347826087, 100%, 40%)', | ||
| colorError85: 'hsl(339.1304347826087, 100%, 85%)', | ||
| colorError95: 'hsl(339.1304347826087, 100%, 95%)', | ||
| colorWarning: 'hsl(35, 90%, 45%)', | ||
| colorWarning25: 'hsl(33, 83%, 25%)', | ||
| colorWarning40: 'hsl(33, 80%, 34%)', | ||
| colorWarning60: 'hsl(35, 90%, 55%)', | ||
| colorWarning85: 'hsl(33, 90%, 80%)', | ||
| colorWarning95: 'hsl(45, 100%, 92%)', | ||
| colorError: 'hsl(3, 65%, 58%)', | ||
| colorError25: 'hsl(4, 69%, 37%)', | ||
| colorError40: 'hsl(3, 60%, 46%)', | ||
| colorError85: 'hsl(1, 55%, 74%)', | ||
| colorError95: 'hsl(349, 66%, 92%)', | ||
| colorSolid: '#1a1a1a', | ||
@@ -241,90 +241,32 @@ colorSolid02: 'hsl(0deg 0% 10% / 2%)', | ||
| breakPointJumbodesktop: '1920px', | ||
| backgroundColorForButtonWhenActive: 'hsl(232, 18%, 95%)', | ||
| backgroundColorForButtonWhenHovered: 'hsl(232, 18%, 98%)', | ||
| backgroundColorForButtonWhenDisabled: 'hsl(195, 35.2941176471%, 95%)', | ||
| backgroundColorForIconButtonWhenDisabled: 'hsl(195, 35.2941176471%, 95%)', | ||
| backgroundColorForInput: '#fff', | ||
| backgroundColorForInputWhenSelected: 'hsl(195, 35.2941176471%, 95%)', | ||
| backgroundColorForInputWhenDisabled: 'hsl(232, 18%, 95%)', | ||
| backgroundColorForInputWhenHovered: 'hsl(232, 18%, 98%)', | ||
| backgroundColorForInputWhenFocused: '#fff', | ||
| backgroundColorForInputWhenReadonly: 'hsl(232, 18%, 95%)', | ||
| backgroundColorForInputWhenActive: 'hsl(203.05555555555554, 93.9130434783%, 95%)', | ||
| backgroundColorForInputAsQuiet: 'transparent', | ||
| backgroundColorForInputAsQuietWhenHovered: 'hsl(0deg 0% 10% / 2%)', | ||
| backgroundColorForInputWhenHovered: 'hsl(244, 100%, 99%)', | ||
| backgroundColorForLocalizedInputLabel: '#fff', | ||
| backgroundColorForLocalizedInputLabelWhenReadonly: 'hsl(232, 18%, 95%)', | ||
| backgroundColorForLocalizedInputLabelWhenDisabled: 'hsl(232, 18%, 95%)', | ||
| backgroundColorForButtonAsPrimary: '#15a390', | ||
| backgroundColorForButtonAsPrimaryWhenHovered: 'hsl(175, 55%, 45%)', | ||
| backgroundColorForButtonAsPrimaryAsDefaultWhenHovered: '#17ab97', | ||
| backgroundColorForButtonAsPrimaryAsDefaultWhenActive: '#15a390', | ||
| backgroundColorForButtonAsPrimaryAsUrgent: '#f16d0e', | ||
| backgroundColorForStampAsPrimary: 'hsl(175, 70%, 90%)', | ||
| backgroundColorForStampAsPositive: 'hsl(175, 70%, 90%)', | ||
| backgroundColorForToggleThumbWhenActive: 'hsl(175, 55%, 25%)', | ||
| backgroundColorForToggleTrackWhenActive: 'hsl(175, 55%, 40%)', | ||
| backgroundColorForToggleThumbWhenDisabled: 'hsl(195, 35.2941176471%, 60%)', | ||
| backgroundColorForToggleTrackWhenDisabled: 'hsl(195, 35.2941176471%, 90%)', | ||
| backgroundColorForToggleThumbWhenActiveWhenDisabled: 'hsl(232, 18%, 60%)', | ||
| backgroundColorForToggleTrackWhenActiveWhenDisabled: 'hsl(232, 18%, 90%)', | ||
| backgroundColorForToggleThumbWhenHovered: 'rgba(0, 0, 0, 0.1)', | ||
| backgroundColorForLoadingSpinnerTrack: '#213c45', | ||
| backgroundColorForLoadingSpinnerDot: '#213c45', | ||
| backgroundColorForContentNotificationWhenSuccess: 'hsl(175, 90%, 95%)', | ||
| backgroundColorForViewSwitcherButtonWhenActive: 'hsl(232, 18%, 95%)', | ||
| backgroundColorForCheckboxInputWhenHovered: 'hsl(232, 18%, 90%)', | ||
| backgroundColorForRadioOptionWhenHovered: 'hsl(232, 18%, 90%)', | ||
| backgroundColorForTag: 'hsl(232, 18%, 95%)', | ||
| backgroundColorForTagWhenHovered: 'hsl(232, 18%, 90%)', | ||
| backgroundColorForDropdownWhenHovered: 'hsl(232, 18%, 95%)', | ||
| backgroundColorForDropdownWhenActive: 'hsl(232, 18%, 90%)', | ||
| backgroundColorForDropdownOptionWhenActive: 'hsl(203.05555555555554, 93.9130434783%, 95%)', | ||
| backgroundColorForButtonWhenActive: 'hsl(243, 100%, 93%)', | ||
| backgroundColorForButtonWhenHovered: 'hsl(244, 100%, 97%)', | ||
| backgroundColorForButtonWhenDisabled: 'hsl(232, 18%, 95%)', | ||
| borderColorForInput: 'hsl(232, 18%, 80%)', | ||
| borderColorForInputWhenFocused: 'hsl(175, 55%, 45%)', | ||
| borderColorForInputWhenDisabled: 'hsl(232, 18%, 80%)', | ||
| borderColorForInputWhenReadonly: '#fff', | ||
| borderColorForInputWhenError: '#e60050', | ||
| borderColorForInputWhenWarning: '#f16d0e', | ||
| borderColorForInputWhenError: 'hsl(3, 65%, 58%)', | ||
| borderColorForInputWhenWarning: 'hsl(35, 90%, 45%)', | ||
| borderColorForInputWhenHovered: 'hsl(232, 18%, 80%)', | ||
| borderColorForInputAsQuiet: 'transparent', | ||
| borderColorForButtonAsSecondary: 'hsl(232, 18%, 80%)', | ||
| borderColorForDropdown: 'hsl(232, 18%, 80%)', | ||
| borderColorForContentNotificationWhenSuccess: 'hsl(175, 70%, 85%)', | ||
| borderColorForCheckboxInput: 'hsl(175, 55%, 45%)', | ||
| borderColorForCheckboxInputWhenActive: 'hsl(175, 55%, 45%)', | ||
| borderColorForTag: 'hsl(232, 18%, 85%)', | ||
| borderRadiusForButtonAsBig: '4px', | ||
| borderRadiusForButtonAsMedium: '4px', | ||
| borderColorForInputWhenFocused: 'hsl(240, 100%, 67%)', | ||
| borderColorForButtonAsSecondary: 'hsl(244, 100%, 84%)', | ||
| borderRadiusForInput: '4px', | ||
| borderWidthForInput: '1px', | ||
| borderWidthForInputWhenWarning: '1px', | ||
| borderWidthForInputWhenError: '1px', | ||
| borderWidthForInputWhenFocused: '1px', | ||
| fontColorForInput: '#1a1a1a', | ||
| fontColorForInputWhenDisabled: 'hsl(232, 18%, 60%)', | ||
| fontColorForInputWhenError: '#e60050', | ||
| fontColorForInputWhenError: 'hsl(3, 60%, 46%)', | ||
| fontColorForInputWhenReadonly: 'hsl(232, 18%, 40%)', | ||
| fontColorForInputWhenWarning: '#f16d0e', | ||
| fontColorForButtonAsSecondary: '#1a1a1a', | ||
| fontColorForButtonAsFlatWhenHovered: 'hsl(175, 55%, 45%)', | ||
| fontColorForButtonAsFlatAsCritical: '#e60050', | ||
| fontColorForButtonAsFlatAsCriticalWhenHovered: 'hsl(339.1304347826087, 100%, 25%)', | ||
| fontColorForViewSwitcherButton: 'hsl(232, 18%, 40%)', | ||
| fontColorForStampAsPositive: 'hsl(175, 55%, 25%)', | ||
| fontColorForContentNotificationWhenSuccess: 'hsl(175, 55%, 45%)', | ||
| fontColorForAvatarAsTurquoise: 'hsl(180, 30%, 45%)', | ||
| fontColorForLeadingIconAsTurquoise: 'hsl(180, 30%, 45%)', | ||
| fontColorForTextAsPositive: 'hsl(175, 55%, 25%)', | ||
| fontColorForInputWhenWarning: 'hsl(35, 90%, 45%)', | ||
| fontColorForButtonAsSecondary: 'hsl(240, 64%, 58%)', | ||
| heightForButtonAsBig: '40px', | ||
| heightForButtonAsSmall: '16px', | ||
| heightForButtonAsMedium: '32px', | ||
| heightForButtonAsSmall: '16px', | ||
| heightForInput: '40px', | ||
| heightForInputAsSmall: '32px', | ||
| placeholderFontColorForInput: 'hsl(232, 18%, 60%)', | ||
| fontSizeForButton: '0.875rem', | ||
| fontSizeForInput: '1rem', | ||
| paddingForInput: '0 var(--spacing-30)', | ||
| paddingForInputAsQuiet: '0 var(--spacing-20)', | ||
| paddingForButton: '0 var(--spacing-30)', | ||
| shadowForInput: 'none', | ||
@@ -334,168 +276,53 @@ shadowForInputWhenFocused: 'inset 0 0 0 1px var(--color-primary)', | ||
| shadowForInputWhenWarning: 'inset 0 0 0 1px var(--color-warning)' | ||
| }, | ||
| recolouring: { | ||
| colorPrimary: 'hsl(240, 64%, 58%)', | ||
| colorPrimary10: 'hsl(240, 66%, 19%)', | ||
| colorPrimary20: 'hsl(240, 45%, 33%)', | ||
| colorPrimary25: 'hsl(240, 46%, 48%)', | ||
| colorPrimary30: 'hsl(240, 46%, 53%)', | ||
| colorPrimary40: 'hsl(240, 100%, 67%)', | ||
| colorPrimary85: 'hsl(244, 100%, 84%)', | ||
| colorPrimary90: 'hsl(243, 100%, 93%)', | ||
| colorPrimary95: 'hsl(244, 100%, 97%)', | ||
| colorPrimary98: 'hsl(244, 100%, 99%)', | ||
| colorAccent10: 'hsl(195, 100%, 10%)', | ||
| colorAccent20: 'hsl(195, 80%, 20%)', | ||
| colorAccent30: 'hsl(195, 70%, 30%)', | ||
| colorAccent40: 'hsl(195, 70%, 40%)', | ||
| colorAccent50: 'hsl(195, 70%, 50%)', | ||
| colorAccent60: 'hsl(195, 70%, 60%)', | ||
| colorAccent85: 'hsl(195, 85%, 85%)', | ||
| colorAccent90: 'hsl(195, 90%, 90%)', | ||
| colorAccent95: 'hsl(195, 95%, 95%)', | ||
| colorAccent98: 'hsl(195, 100%, 98%)', | ||
| colorBrown10: 'hsl(41, 100%, 10%)', | ||
| colorBrown20: 'hsl(41, 100%, 20%)', | ||
| colorBrown35: 'hsl(41, 96%, 35%)', | ||
| colorBrown50: 'hsl(41, 95%, 44%)', | ||
| colorBrown70: 'hsl(47, 95%, 70%)', | ||
| colorBrown85: 'hsl(47, 100%, 85%)', | ||
| colorBrown90: 'hsl(47, 100%, 90%)', | ||
| colorBrown95: 'hsl(47, 100%, 95%)', | ||
| colorBrown98: 'hsl(48, 100%, 97%)', | ||
| colorPurple10: 'hsl(248, 88%, 10%)', | ||
| colorPurple20: 'hsl(248, 50%, 20%)', | ||
| colorPurple35: 'hsl(248, 25%, 35%)', | ||
| colorPurple50: 'hsl(248, 64%, 58%)', | ||
| colorPurple70: 'hsl(248, 80%, 70%)', | ||
| colorPurple85: 'hsl(249, 100%, 85%)', | ||
| colorPurple90: 'hsl(248, 100%, 90%)', | ||
| colorPurple95: 'hsl(248, 100%, 95%)', | ||
| colorPurple98: 'hsl(246, 100%, 98%)', | ||
| colorTurquoise10: 'hsl(180, 88%, 10%)', | ||
| colorTurquoise20: 'hsl(180, 90%, 20%)', | ||
| colorTurquoise35: 'hsl(178, 88%, 35%)', | ||
| colorTurquoise50: 'hsl(178, 67%, 50%)', | ||
| colorTurquoise70: 'hsl(180, 75%, 70%)', | ||
| colorTurquoise85: 'hsl(180, 90%, 85%)', | ||
| colorTurquoise90: 'hsl(180, 88%, 90%)', | ||
| colorTurquoise95: 'hsl(180, 88%, 95%)', | ||
| colorTurquoise98: 'hsl(180, 100%, 98%)', | ||
| colorSuccess: 'hsl(152, 77%, 39%)', | ||
| colorSuccess25: 'hsl(155, 84%, 20%)', | ||
| colorSuccess40: 'hsl(155, 90%, 24%)', | ||
| colorSuccess85: 'hsl(144, 69%, 80%)', | ||
| colorSuccess95: 'hsl(141, 76%, 92%)', | ||
| colorWarning: 'hsl(35, 90%, 45%)', | ||
| colorWarning25: 'hsl(33, 83%, 25%)', | ||
| colorWarning40: 'hsl(33, 80%, 34%)', | ||
| colorWarning60: 'hsl(35, 90%, 55%)', | ||
| colorWarning85: 'hsl(33, 90%, 80%)', | ||
| colorWarning95: 'hsl(45, 100%, 92%)', | ||
| colorError: 'hsl(3, 65%, 58%)', | ||
| colorError25: 'hsl(4, 69%, 37%)', | ||
| colorError40: 'hsl(3, 60%, 46%)', | ||
| colorError85: 'hsl(1, 55%, 74%)', | ||
| colorError95: 'hsl(349, 66%, 92%)', | ||
| borderColorForButtonAsSecondary: 'hsl(244, 100%, 84%)', | ||
| borderColorForDropdown: 'hsl(244, 100%, 84%)', | ||
| borderColorForInputWhenFocused: 'hsl(240, 100%, 67%)', | ||
| borderColorForContentNotificationWhenSuccess: 'hsl(144, 69%, 80%)', | ||
| borderColorForCheckboxInput: 'hsl(232, 18%, 60%)', | ||
| borderColorForCheckboxInputWhenActive: 'hsl(240, 64%, 58%)', | ||
| borderColorForTag: 'hsl(243, 100%, 93%)', | ||
| backgroundColorForButtonWhenActive: 'hsl(243, 100%, 93%)', | ||
| backgroundColorForButtonWhenHovered: 'hsl(244, 100%, 97%)', | ||
| backgroundColorForIconButtonWhenDisabled: 'transparent', | ||
| backgroundColorForButtonAsPrimary: 'hsl(240, 64%, 58%)', | ||
| backgroundColorForButtonAsPrimaryWhenHovered: 'hsl(240, 100%, 67%)', | ||
| backgroundColorForButtonAsPrimaryAsDefaultWhenHovered: 'hsl(240, 100%, 67%)', | ||
| backgroundColorForButtonAsPrimaryAsDefaultWhenActive: 'hsl(240, 46%, 48%)', | ||
| backgroundColorForButtonAsPrimaryAsUrgent: 'hsl(35, 90%, 55%)', | ||
| backgroundColorForInputWhenSelected: 'hsl(244, 100%, 97%)', | ||
| backgroundColorForStampAsPrimary: 'hsl(244, 100%, 97%)', | ||
| backgroundColorForStampAsPositive: 'hsl(141, 76%, 92%)', | ||
| backgroundColorForToggleThumbWhenActive: 'hsl(240, 100%, 67%)', | ||
| backgroundColorForToggleTrackWhenActive: 'hsl(244, 100%, 84%)', | ||
| backgroundColorForToggleThumbWhenDisabled: 'hsl(232, 18%, 60%)', | ||
| backgroundColorForToggleTrackWhenDisabled: 'hsl(232, 18%, 90%)', | ||
| backgroundColorForToggleThumbWhenActiveWhenDisabled: 'hsl(244, 100%, 84%)', | ||
| backgroundColorForToggleTrackWhenActiveWhenDisabled: 'hsl(243, 100%, 93%)', | ||
| backgroundColorForToggleThumbWhenHovered: 'hsla(240, 64%, 58%, 4%)', | ||
| backgroundColorForLoadingSpinnerTrack: 'hsl(243, 100%, 93%)', | ||
| backgroundColorForLoadingSpinnerDot: 'hsl(240, 64%, 58%)', | ||
| backgroundColorForContentNotificationWhenSuccess: 'hsl(141, 76%, 92%)', | ||
| backgroundColorForViewSwitcherButtonWhenActive: 'hsl(244, 100%, 97%)', | ||
| backgroundColorForCheckboxInputWhenHovered: 'hsl(244, 100%, 97%)', | ||
| backgroundColorForRadioOptionWhenHovered: 'hsl(244, 100%, 97%)', | ||
| backgroundColorForTag: 'hsl(244, 100%, 97%)', | ||
| backgroundColorForTagWhenHovered: 'hsl(243, 100%, 93%)', | ||
| backgroundColorForDropdownWhenHovered: 'hsl(244, 100%, 97%)', | ||
| backgroundColorForDropdownWhenActive: 'hsl(243, 100%, 93%)', | ||
| backgroundColorForDropdownOptionWhenActive: 'hsl(244, 100%, 97%)', | ||
| backgroundColorForInputAsQuietWhenHovered: 'hsla(240, 64%, 58%, 4%)', | ||
| backgroundColorForInputWhenActive: 'hsl(244, 100%, 97%)', | ||
| backgroundColorForInputWhenHovered: 'hsl(244, 100%, 99%)', | ||
| fontColorForButtonAsSecondary: 'hsl(240, 64%, 58%)', | ||
| fontColorForButtonAsFlatWhenHovered: 'hsl(240, 100%, 67%)', | ||
| fontColorForButtonAsFlatAsCritical: 'hsl(3, 60%, 46%)', | ||
| fontColorForButtonAsFlatAsCriticalWhenHovered: 'hsl(3, 65%, 58%)', | ||
| fontColorForViewSwitcherButton: 'hsl(240, 64%, 58%)', | ||
| fontColorForInputWhenError: 'hsl(3, 60%, 46%)', | ||
| fontColorForStampAsPositive: 'hsl(155, 90%, 24%)', | ||
| fontColorForContentNotificationWhenSuccess: 'hsl(152, 77%, 39%)', | ||
| fontColorForAvatarAsTurquoise: 'hsl(178, 88%, 35%)', | ||
| fontColorForLeadingIconAsTurquoise: 'hsl(178, 88%, 35%)', | ||
| fontColorForTextAsPositive: 'hsl(155, 90%, 24%)' | ||
| } | ||
| }; | ||
| const designTokens = { | ||
| colorPrimary: 'var(--color-primary, hsl(175, 55%, 45%))', | ||
| colorPrimary10: 'var(--color-primary-10, hsl(175, 55%, 10%))', | ||
| colorPrimary20: 'var(--color-primary-20, hsl(175, 55%, 20%))', | ||
| colorPrimary25: 'var(--color-primary-25, hsl(175, 55%, 25%))', | ||
| colorPrimary30: 'var(--color-primary-30, hsl(175, 55%, 30%))', | ||
| colorPrimary40: 'var(--color-primary-40, hsl(175, 55%, 40%))', | ||
| colorPrimary85: 'var(--color-primary-85, hsl(175, 70%, 85%))', | ||
| colorPrimary90: 'var(--color-primary-90, hsl(175, 70%, 90%))', | ||
| colorPrimary95: 'var(--color-primary-95, hsl(175, 90%, 95%))', | ||
| colorPrimary98: 'var(--color-primary-98, hsl(175, 100%, 99%))', | ||
| colorPrimary: 'var(--color-primary, hsl(240, 64%, 58%))', | ||
| colorPrimary10: 'var(--color-primary-10, hsl(240, 66%, 19%))', | ||
| colorPrimary20: 'var(--color-primary-20, hsl(240, 45%, 33%))', | ||
| colorPrimary25: 'var(--color-primary-25, hsl(240, 46%, 48%))', | ||
| colorPrimary30: 'var(--color-primary-30, hsl(240, 46%, 53%))', | ||
| colorPrimary40: 'var(--color-primary-40, hsl(240, 100%, 67%))', | ||
| colorPrimary85: 'var(--color-primary-85, hsl(244, 100%, 84%))', | ||
| colorPrimary90: 'var(--color-primary-90, hsl(243, 100%, 93%))', | ||
| colorPrimary95: 'var(--color-primary-95, hsl(244, 100%, 97%))', | ||
| colorPrimary98: 'var(--color-primary-98, hsl(244, 100%, 99%))', | ||
| colorAccent: 'var(--color-accent, #213c45)', | ||
| colorAccent10: 'var(--color-accent-10, hsl(195, 35.2941176471%, 10%))', | ||
| colorAccent20: 'var(--color-accent-20, hsl(195, 35.2941176471%, 20%))', | ||
| colorAccent30: 'var(--color-accent-30, hsl(195, 35.2941176471%, 30%))', | ||
| colorAccent40: 'var(--color-accent-40, hsl(195, 35.2941176471%, 40%))', | ||
| colorAccent50: 'var(--color-accent-50, hsl(195, 35%, 50%))', | ||
| colorAccent60: 'var(--color-accent-60, hsl(195, 35.2941176471%, 60%))', | ||
| colorAccent85: 'var(--color-accent-85, hsl(195, 35%, 85%))', | ||
| colorAccent90: 'var(--color-accent-90, hsl(195, 35.2941176471%, 90%))', | ||
| colorAccent95: 'var(--color-accent-95, hsl(195, 35.2941176471%, 95%))', | ||
| colorAccent98: 'var(--color-accent-98, hsl(195, 35.2941176471%, 98%))', | ||
| colorBrown10: 'var(--color-brown-10, hsl(35, 90%, 10%))', | ||
| colorBrown20: 'var(--color-brown-20, hsl(35, 50%, 20%))', | ||
| colorBrown35: 'var(--color-brown-35, hsl(35, 25%, 35%))', | ||
| colorBrown50: 'var(--color-brown-50, hsl(35, 30%, 50%))', | ||
| colorBrown70: 'var(--color-brown-70, hsl(35, 40%, 70%))', | ||
| colorBrown85: 'var(--color-brown-85, hsl(35, 60%, 85%))', | ||
| colorBrown90: 'var(--color-brown-90, hsl(35, 90%, 90%))', | ||
| colorBrown95: 'var(--color-brown-95, hsl(35, 80%, 95%))', | ||
| colorBrown98: 'var(--color-brown-98, hsl(35, 90%, 98%))', | ||
| colorPurple10: 'var(--color-purple-10, hsl(248, 90%, 10%))', | ||
| colorAccent10: 'var(--color-accent-10, hsl(195, 100%, 10%))', | ||
| colorAccent20: 'var(--color-accent-20, hsl(195, 80%, 20%))', | ||
| colorAccent30: 'var(--color-accent-30, hsl(195, 70%, 30%))', | ||
| colorAccent40: 'var(--color-accent-40, hsl(195, 70%, 40%))', | ||
| colorAccent50: 'var(--color-accent-50, hsl(195, 70%, 50%))', | ||
| colorAccent60: 'var(--color-accent-60, hsl(195, 70%, 60%))', | ||
| colorAccent85: 'var(--color-accent-85, hsl(195, 85%, 85%))', | ||
| colorAccent90: 'var(--color-accent-90, hsl(195, 90%, 90%))', | ||
| colorAccent95: 'var(--color-accent-95, hsl(195, 95%, 95%))', | ||
| colorAccent98: 'var(--color-accent-98, hsl(195, 100%, 98%))', | ||
| colorBrown10: 'var(--color-brown-10, hsl(41, 100%, 10%))', | ||
| colorBrown20: 'var(--color-brown-20, hsl(41, 100%, 20%))', | ||
| colorBrown35: 'var(--color-brown-35, hsl(41, 96%, 35%))', | ||
| colorBrown50: 'var(--color-brown-50, hsl(41, 95%, 44%))', | ||
| colorBrown70: 'var(--color-brown-70, hsl(47, 95%, 70%))', | ||
| colorBrown85: 'var(--color-brown-85, hsl(47, 100%, 85%))', | ||
| colorBrown90: 'var(--color-brown-90, hsl(47, 100%, 90%))', | ||
| colorBrown95: 'var(--color-brown-95, hsl(47, 100%, 95%))', | ||
| colorBrown98: 'var(--color-brown-98, hsl(48, 100%, 97%))', | ||
| colorPurple10: 'var(--color-purple-10, hsl(248, 88%, 10%))', | ||
| colorPurple20: 'var(--color-purple-20, hsl(248, 50%, 20%))', | ||
| colorPurple35: 'var(--color-purple-35, hsl(248, 25%, 35%))', | ||
| colorPurple50: 'var(--color-purple-50, hsl(248, 30%,50%))', | ||
| colorPurple70: 'var(--color-purple-70, hsl(248, 40%, 70%))', | ||
| colorPurple85: 'var(--color-purple-85, hsl(248, 60%, 85%))', | ||
| colorPurple90: 'var(--color-purple-90, hsl(248, 50%, 90%))', | ||
| colorPurple95: 'var(--color-purple-95, hsl(248, 80%, 95%))', | ||
| colorPurple98: 'var(--color-purple-98, hsl(248, 90%, 98%))', | ||
| colorTurquoise10: 'var(--color-turquoise-10, hsl(180, 90%, 10%))', | ||
| colorTurquoise20: 'var(--color-turquoise-20, hsl(180, 50%, 20%))', | ||
| colorTurquoise35: 'var(--color-turquoise-35, hsl(180, 25%, 35%))', | ||
| colorTurquoise50: 'var(--color-turquoise-50, hsl(180, 30%, 45%))', | ||
| colorTurquoise70: 'var(--color-turquoise-70, hsl(180, 40%, 70%))', | ||
| colorTurquoise85: 'var(--color-turquoise-85, hsl(180, 60%, 85%))', | ||
| colorTurquoise90: 'var(--color-turquoise-90, hsl(180, 40%, 90%))', | ||
| colorTurquoise95: 'var(--color-turquoise-95, hsl(180, 80%, 95%))', | ||
| colorTurquoise98: 'var(--color-turquoise-98, hsl(180, 90%, 98%))', | ||
| colorPurple50: 'var(--color-purple-50, hsl(248, 64%, 58%))', | ||
| colorPurple70: 'var(--color-purple-70, hsl(248, 80%, 70%))', | ||
| colorPurple85: 'var(--color-purple-85, hsl(249, 100%, 85%))', | ||
| colorPurple90: 'var(--color-purple-90, hsl(248, 100%, 90%))', | ||
| colorPurple95: 'var(--color-purple-95, hsl(248, 100%, 95%))', | ||
| colorPurple98: 'var(--color-purple-98, hsl(246, 100%, 98%))', | ||
| colorTurquoise10: 'var(--color-turquoise-10, hsl(180, 88%, 10%))', | ||
| colorTurquoise20: 'var(--color-turquoise-20, hsl(180, 90%, 20%))', | ||
| colorTurquoise35: 'var(--color-turquoise-35, hsl(178, 88%, 35%))', | ||
| colorTurquoise50: 'var(--color-turquoise-50, hsl(178, 67%, 50%))', | ||
| colorTurquoise70: 'var(--color-turquoise-70, hsl(180, 75%, 70%))', | ||
| colorTurquoise85: 'var(--color-turquoise-85, hsl(180, 90%, 85%))', | ||
| colorTurquoise90: 'var(--color-turquoise-90, hsl(180, 88%, 90%))', | ||
| colorTurquoise95: 'var(--color-turquoise-95, hsl(180, 88%, 95%))', | ||
| colorTurquoise98: 'var(--color-turquoise-98, hsl(180, 100%, 98%))', | ||
| colorNeutral: 'var(--color-neutral, hsl(232, 18%, 80%))', | ||
@@ -516,13 +343,13 @@ colorNeutral05: 'var(--color-neutral-05, hsl(0deg 0% 80% / 5%))', | ||
| colorInfo95: 'var(--color-info-95, hsl(203.05555555555554, 93.9130434783%, 95%))', | ||
| colorWarning: 'var(--color-warning, #f16d0e)', | ||
| colorWarning25: 'var(--color-warning-25, hsl(25.110132158590307, 89.0196078431%, 25%))', | ||
| colorWarning40: 'var(--color-warning-40, hsl(25.110132158590307, 89.0196078431%, 40%))', | ||
| colorWarning60: 'var(--color-warning-60, hsl(25.110132158590307, 90%, 60%))', | ||
| colorWarning85: 'var(--color-warning-85, hsl(25.110132158590307, 89.0196078431%, 85%))', | ||
| colorWarning95: 'var(--color-warning-95, hsl(25.110132158590307, 89.0196078431%, 95%))', | ||
| colorError: 'var(--color-error, #e60050)', | ||
| colorError25: 'var(--color-error-25, hsl(339.1304347826087, 100%, 25%))', | ||
| colorError40: 'var(--color-error-40, hsl(339.1304347826087, 100%, 40%))', | ||
| colorError85: 'var(--color-error-85, hsl(339.1304347826087, 100%, 85%))', | ||
| colorError95: 'var(--color-error-95, hsl(339.1304347826087, 100%, 95%))', | ||
| colorWarning: 'var(--color-warning, hsl(35, 90%, 45%))', | ||
| colorWarning25: 'var(--color-warning-25, hsl(33, 83%, 25%))', | ||
| colorWarning40: 'var(--color-warning-40, hsl(33, 80%, 34%))', | ||
| colorWarning60: 'var(--color-warning-60, hsl(35, 90%, 55%))', | ||
| colorWarning85: 'var(--color-warning-85, hsl(33, 90%, 80%))', | ||
| colorWarning95: 'var(--color-warning-95, hsl(45, 100%, 92%))', | ||
| colorError: 'var(--color-error, hsl(3, 65%, 58%))', | ||
| colorError25: 'var(--color-error-25, hsl(4, 69%, 37%))', | ||
| colorError40: 'var(--color-error-40, hsl(3, 60%, 46%))', | ||
| colorError85: 'var(--color-error-85, hsl(1, 55%, 74%))', | ||
| colorError95: 'var(--color-error-95, hsl(349, 66%, 92%))', | ||
| colorSolid: 'var(--color-solid, #1a1a1a)', | ||
@@ -636,90 +463,32 @@ colorSolid02: 'var(--color-solid-02, hsl(0deg 0% 10% / 2%))', | ||
| breakPointJumbodesktop: 'var(--break-point-jumbodesktop, 1920px)', | ||
| backgroundColorForButtonWhenActive: 'var(--background-color-for-button-when-active, hsl(232, 18%, 95%))', | ||
| backgroundColorForButtonWhenHovered: 'var(--background-color-for-button-when-hovered, hsl(232, 18%, 98%))', | ||
| backgroundColorForButtonWhenDisabled: 'var(--background-color-for-button-when-disabled, hsl(195, 35.2941176471%, 95%))', | ||
| backgroundColorForIconButtonWhenDisabled: 'var(--background-color-for-icon-button-when-disabled, hsl(195, 35.2941176471%, 95%))', | ||
| backgroundColorForInput: 'var(--background-color-for-input, #fff)', | ||
| backgroundColorForInputWhenSelected: 'var(--background-color-for-input-when-selected, hsl(195, 35.2941176471%, 95%))', | ||
| backgroundColorForInputWhenDisabled: 'var(--background-color-for-input-when-disabled, hsl(232, 18%, 95%))', | ||
| backgroundColorForInputWhenHovered: 'var(--background-color-for-input-when-hovered, hsl(232, 18%, 98%))', | ||
| backgroundColorForInputWhenFocused: 'var(--background-color-for-input-when-focused, #fff)', | ||
| backgroundColorForInputWhenReadonly: 'var(--background-color-for-input-when-readonly, hsl(232, 18%, 95%))', | ||
| backgroundColorForInputWhenActive: 'var(--background-color-for-input-when-active, hsl(203.05555555555554, 93.9130434783%, 95%))', | ||
| backgroundColorForInputAsQuiet: 'var(--background-color-for-input-as-quiet, transparent)', | ||
| backgroundColorForInputAsQuietWhenHovered: 'var(--background-color-for-input-as-quiet-when-hovered, hsl(0deg 0% 10% / 2%))', | ||
| backgroundColorForInputWhenHovered: 'var(--background-color-for-input-when-hovered, hsl(244, 100%, 99%))', | ||
| backgroundColorForLocalizedInputLabel: 'var(--background-color-for-localized-input-label, #fff)', | ||
| backgroundColorForLocalizedInputLabelWhenReadonly: 'var(--background-color-for-localized-input-label-when-readonly, hsl(232, 18%, 95%))', | ||
| backgroundColorForLocalizedInputLabelWhenDisabled: 'var(--background-color-for-localized-input-label-when-disabled, hsl(232, 18%, 95%))', | ||
| backgroundColorForButtonAsPrimary: 'var(--background-color-for-button-as-primary, #15a390)', | ||
| backgroundColorForButtonAsPrimaryWhenHovered: 'var(--background-color-for-button-as-primary-when-hovered, hsl(175, 55%, 45%))', | ||
| backgroundColorForButtonAsPrimaryAsDefaultWhenHovered: 'var(--background-color-for-button-as-primary-as-default-when-hovered, #17ab97)', | ||
| backgroundColorForButtonAsPrimaryAsDefaultWhenActive: 'var(--background-color-for-button-as-primary-as-default-when-active, #15a390)', | ||
| backgroundColorForButtonAsPrimaryAsUrgent: 'var(--background-color-for-button-as-primary-as-urgent, #f16d0e)', | ||
| backgroundColorForStampAsPrimary: 'var(--background-color-for-stamp-as-primary, hsl(175, 70%, 90%))', | ||
| backgroundColorForStampAsPositive: 'var(--background-color-for-stamp-as-positive, hsl(175, 70%, 90%))', | ||
| backgroundColorForToggleThumbWhenActive: 'var(--background-color-for-toggle-thumb-when-active, hsl(175, 55%, 25%))', | ||
| backgroundColorForToggleTrackWhenActive: 'var(--background-color-for-toggle-track-when-active, hsl(175, 55%, 40%))', | ||
| backgroundColorForToggleThumbWhenDisabled: 'var(--background-color-for-toggle-thumb-when-disabled, hsl(195, 35.2941176471%, 60%))', | ||
| backgroundColorForToggleTrackWhenDisabled: 'var(--background-color-for-toggle-track-when-disabled, hsl(195, 35.2941176471%, 90%))', | ||
| backgroundColorForToggleThumbWhenActiveWhenDisabled: 'var(--background-color-for-toggle-thumb-when-active-when-disabled, hsl(232, 18%, 60%))', | ||
| backgroundColorForToggleTrackWhenActiveWhenDisabled: 'var(--background-color-for-toggle-track-when-active-when-disabled, hsl(232, 18%, 90%))', | ||
| backgroundColorForToggleThumbWhenHovered: 'var(--background-color-for-toggle-thumb-when-hovered, rgba(0, 0, 0, 0.1))', | ||
| backgroundColorForLoadingSpinnerTrack: 'var(--background-color-for-loading-spinner-track, #213c45)', | ||
| backgroundColorForLoadingSpinnerDot: 'var(--background-color-for-loading-spinner-dot, #213c45)', | ||
| backgroundColorForContentNotificationWhenSuccess: 'var(--background-color-for-content-notification-when-success, hsl(175, 90%, 95%))', | ||
| backgroundColorForViewSwitcherButtonWhenActive: 'var(--background-color-for-view-switcher-button-when-active, hsl(232, 18%, 95%))', | ||
| backgroundColorForCheckboxInputWhenHovered: 'var(--background-color-for-checkbox-input-when-hovered, hsl(232, 18%, 90%))', | ||
| backgroundColorForRadioOptionWhenHovered: 'var(--background-color-for-radio-option-when-hovered, hsl(232, 18%, 90%))', | ||
| backgroundColorForTag: 'var(--background-color-for-tag, hsl(232, 18%, 95%))', | ||
| backgroundColorForTagWhenHovered: 'var(--background-color-for-tag-when-hovered, hsl(232, 18%, 90%))', | ||
| backgroundColorForDropdownWhenHovered: 'var(--background-color-for-dropdown-when-hovered, hsl(232, 18%, 95%))', | ||
| backgroundColorForDropdownWhenActive: 'var(--background-color-for-dropdown-when-active, hsl(232, 18%, 90%))', | ||
| backgroundColorForDropdownOptionWhenActive: 'var(--background-color-for-dropdown-option-when-active, hsl(203.05555555555554, 93.9130434783%, 95%))', | ||
| backgroundColorForButtonWhenActive: 'var(--background-color-for-button-when-active, hsl(243, 100%, 93%))', | ||
| backgroundColorForButtonWhenHovered: 'var(--background-color-for-button-when-hovered, hsl(244, 100%, 97%))', | ||
| backgroundColorForButtonWhenDisabled: 'var(--background-color-for-button-when-disabled, hsl(232, 18%, 95%))', | ||
| borderColorForInput: 'var(--border-color-for-input, hsl(232, 18%, 80%))', | ||
| borderColorForInputWhenFocused: 'var(--border-color-for-input-when-focused, hsl(175, 55%, 45%))', | ||
| borderColorForInputWhenDisabled: 'var(--border-color-for-input-when-disabled, hsl(232, 18%, 80%))', | ||
| borderColorForInputWhenReadonly: 'var(--border-color-for-input-when-readonly, #fff)', | ||
| borderColorForInputWhenError: 'var(--border-color-for-input-when-error, #e60050)', | ||
| borderColorForInputWhenWarning: 'var(--border-color-for-input-when-warning, #f16d0e)', | ||
| borderColorForInputWhenError: 'var(--border-color-for-input-when-error, hsl(3, 65%, 58%))', | ||
| borderColorForInputWhenWarning: 'var(--border-color-for-input-when-warning, hsl(35, 90%, 45%))', | ||
| borderColorForInputWhenHovered: 'var(--border-color-for-input-when-hovered, hsl(232, 18%, 80%))', | ||
| borderColorForInputAsQuiet: 'var(--border-color-for-input-as-quiet, transparent)', | ||
| borderColorForButtonAsSecondary: 'var(--border-color-for-button-as-secondary, hsl(232, 18%, 80%))', | ||
| borderColorForDropdown: 'var(--border-color-for-dropdown, hsl(232, 18%, 80%))', | ||
| borderColorForContentNotificationWhenSuccess: 'var(--border-color-for-content-notification-when-success, hsl(175, 70%, 85%))', | ||
| borderColorForCheckboxInput: 'var(--border-color-for-checkbox-input, hsl(175, 55%, 45%))', | ||
| borderColorForCheckboxInputWhenActive: 'var(--border-color-for-checkbox-input-when-active, hsl(175, 55%, 45%))', | ||
| borderColorForTag: 'var(--border-color-for-tag, hsl(232, 18%, 85%))', | ||
| borderRadiusForButtonAsBig: 'var(--border-radius-for-button-as-big, 4px)', | ||
| borderRadiusForButtonAsMedium: 'var(--border-radius-for-button-as-medium, 4px)', | ||
| borderColorForInputWhenFocused: 'var(--border-color-for-input-when-focused, hsl(240, 100%, 67%))', | ||
| borderColorForButtonAsSecondary: 'var(--border-color-for-button-as-secondary, hsl(244, 100%, 84%))', | ||
| borderRadiusForInput: 'var(--border-radius-for-input, 4px)', | ||
| borderWidthForInput: 'var(--border-width-for-input, 1px)', | ||
| borderWidthForInputWhenWarning: 'var(--border-width-for-input-when-warning, 1px)', | ||
| borderWidthForInputWhenError: 'var(--border-width-for-input-when-error, 1px)', | ||
| borderWidthForInputWhenFocused: 'var(--border-width-for-input-when-focused, 1px)', | ||
| fontColorForInput: 'var(--font-color-for-input, #1a1a1a)', | ||
| fontColorForInputWhenDisabled: 'var(--font-color-for-input-when-disabled, hsl(232, 18%, 60%))', | ||
| fontColorForInputWhenError: 'var(--font-color-for-input-when-error, #e60050)', | ||
| fontColorForInputWhenError: 'var(--font-color-for-input-when-error, hsl(3, 60%, 46%))', | ||
| fontColorForInputWhenReadonly: 'var(--font-color-for-input-when-readonly, hsl(232, 18%, 40%))', | ||
| fontColorForInputWhenWarning: 'var(--font-color-for-input-when-warning, #f16d0e)', | ||
| fontColorForButtonAsSecondary: 'var(--font-color-for-button-as-secondary, #1a1a1a)', | ||
| fontColorForButtonAsFlatWhenHovered: 'var(--font-color-for-button-as-flat-when-hovered, hsl(175, 55%, 45%))', | ||
| fontColorForButtonAsFlatAsCritical: 'var(--font-color-for-button-as-flat-as-critical, #e60050)', | ||
| fontColorForButtonAsFlatAsCriticalWhenHovered: 'var(--font-color-for-button-as-flat-as-critical-when-hovered, hsl(339.1304347826087, 100%, 25%))', | ||
| fontColorForViewSwitcherButton: 'var(--font-color-for-view-switcher-button, hsl(232, 18%, 40%))', | ||
| fontColorForStampAsPositive: 'var(--font-color-for-stamp-as-positive, hsl(175, 55%, 25%))', | ||
| fontColorForContentNotificationWhenSuccess: 'var(--font-color-for-content-notification-when-success, hsl(175, 55%, 45%))', | ||
| fontColorForAvatarAsTurquoise: 'var(--font-color-for-avatar-as-turquoise, hsl(180, 30%, 45%))', | ||
| fontColorForLeadingIconAsTurquoise: 'var(--font-color-for-leading-icon-as-turquoise, hsl(180, 30%, 45%))', | ||
| fontColorForTextAsPositive: 'var(--font-color-for-text-as-positive, hsl(175, 55%, 25%))', | ||
| fontColorForInputWhenWarning: 'var(--font-color-for-input-when-warning, hsl(35, 90%, 45%))', | ||
| fontColorForButtonAsSecondary: 'var(--font-color-for-button-as-secondary, hsl(240, 64%, 58%))', | ||
| heightForButtonAsBig: 'var(--height-for-button-as-big, 40px)', | ||
| heightForButtonAsSmall: 'var(--height-for-button-as-small, 16px)', | ||
| heightForButtonAsMedium: 'var(--height-for-button-as-medium, 32px)', | ||
| heightForButtonAsSmall: 'var(--height-for-button-as-small, 16px)', | ||
| heightForInput: 'var(--height-for-input, 40px)', | ||
| heightForInputAsSmall: 'var(--height-for-input-as-small, 32px)', | ||
| placeholderFontColorForInput: 'var(--placeholder-font-color-for-input, hsl(232, 18%, 60%))', | ||
| fontSizeForButton: 'var(--font-size-for-button, 0.875rem)', | ||
| fontSizeForInput: 'var(--font-size-for-input, 1rem)', | ||
| paddingForInput: 'var(--padding-for-input, 0 var(--spacing-30))', | ||
| paddingForInputAsQuiet: 'var(--padding-for-input-as-quiet, 0 var(--spacing-20))', | ||
| paddingForButton: 'var(--padding-for-button, 0 var(--spacing-30))', | ||
| shadowForInput: 'var(--shadow-for-input, none)', | ||
@@ -860,4 +629,7 @@ shadowForInputWhenFocused: 'var(--shadow-for-input-when-focused, inset 0 0 0 1px var(--color-primary))', | ||
| }); | ||
| const themedValue = react.useCallback((defaultThemeValue, newThemeValue) => theme === 'default' ? defaultThemeValue : newThemeValue, [theme]); | ||
| // TODO - make sure old and new theme return same value as new defaultThemeValue | ||
| // At least for the remaining places that we still use this function | ||
| const themedValue = react.useCallback((defaultThemeValue, _newThemeValue) => defaultThemeValue, []); | ||
| // If we use 'useLayoutEffect' here, we would be trying to read the | ||
@@ -876,6 +648,6 @@ // data attribute before it gets set from the effect in the ThemeProvider | ||
| return { | ||
| theme: 'default', | ||
| theme, | ||
| themedValue, | ||
| isNewTheme: false, | ||
| isRecolouringTheme: theme === 'recolouring' | ||
| isRecolouringTheme: true | ||
| }; | ||
@@ -892,3 +664,3 @@ }; | ||
| // NOTE: This string will be replaced on build time with the package version. | ||
| var version = "19.1.0"; | ||
| var version = "19.2.0"; | ||
@@ -895,0 +667,0 @@ exports.ThemeProvider = ThemeProvider; |
@@ -57,50 +57,50 @@ 'use strict'; | ||
| default: { | ||
| colorPrimary: 'hsl(175, 55%, 45%)', | ||
| colorPrimary10: 'hsl(175, 55%, 10%)', | ||
| colorPrimary20: 'hsl(175, 55%, 20%)', | ||
| colorPrimary25: 'hsl(175, 55%, 25%)', | ||
| colorPrimary30: 'hsl(175, 55%, 30%)', | ||
| colorPrimary40: 'hsl(175, 55%, 40%)', | ||
| colorPrimary85: 'hsl(175, 70%, 85%)', | ||
| colorPrimary90: 'hsl(175, 70%, 90%)', | ||
| colorPrimary95: 'hsl(175, 90%, 95%)', | ||
| colorPrimary98: 'hsl(175, 100%, 99%)', | ||
| colorPrimary: 'hsl(240, 64%, 58%)', | ||
| colorPrimary10: 'hsl(240, 66%, 19%)', | ||
| colorPrimary20: 'hsl(240, 45%, 33%)', | ||
| colorPrimary25: 'hsl(240, 46%, 48%)', | ||
| colorPrimary30: 'hsl(240, 46%, 53%)', | ||
| colorPrimary40: 'hsl(240, 100%, 67%)', | ||
| colorPrimary85: 'hsl(244, 100%, 84%)', | ||
| colorPrimary90: 'hsl(243, 100%, 93%)', | ||
| colorPrimary95: 'hsl(244, 100%, 97%)', | ||
| colorPrimary98: 'hsl(244, 100%, 99%)', | ||
| colorAccent: '#213c45', | ||
| colorAccent10: 'hsl(195, 35.2941176471%, 10%)', | ||
| colorAccent20: 'hsl(195, 35.2941176471%, 20%)', | ||
| colorAccent30: 'hsl(195, 35.2941176471%, 30%)', | ||
| colorAccent40: 'hsl(195, 35.2941176471%, 40%)', | ||
| colorAccent50: 'hsl(195, 35%, 50%)', | ||
| colorAccent60: 'hsl(195, 35.2941176471%, 60%)', | ||
| colorAccent85: 'hsl(195, 35%, 85%)', | ||
| colorAccent90: 'hsl(195, 35.2941176471%, 90%)', | ||
| colorAccent95: 'hsl(195, 35.2941176471%, 95%)', | ||
| colorAccent98: 'hsl(195, 35.2941176471%, 98%)', | ||
| colorBrown10: 'hsl(35, 90%, 10%)', | ||
| colorBrown20: 'hsl(35, 50%, 20%)', | ||
| colorBrown35: 'hsl(35, 25%, 35%)', | ||
| colorBrown50: 'hsl(35, 30%, 50%)', | ||
| colorBrown70: 'hsl(35, 40%, 70%)', | ||
| colorBrown85: 'hsl(35, 60%, 85%)', | ||
| colorBrown90: 'hsl(35, 90%, 90%)', | ||
| colorBrown95: 'hsl(35, 80%, 95%)', | ||
| colorBrown98: 'hsl(35, 90%, 98%)', | ||
| colorPurple10: 'hsl(248, 90%, 10%)', | ||
| colorAccent10: 'hsl(195, 100%, 10%)', | ||
| colorAccent20: 'hsl(195, 80%, 20%)', | ||
| colorAccent30: 'hsl(195, 70%, 30%)', | ||
| colorAccent40: 'hsl(195, 70%, 40%)', | ||
| colorAccent50: 'hsl(195, 70%, 50%)', | ||
| colorAccent60: 'hsl(195, 70%, 60%)', | ||
| colorAccent85: 'hsl(195, 85%, 85%)', | ||
| colorAccent90: 'hsl(195, 90%, 90%)', | ||
| colorAccent95: 'hsl(195, 95%, 95%)', | ||
| colorAccent98: 'hsl(195, 100%, 98%)', | ||
| colorBrown10: 'hsl(41, 100%, 10%)', | ||
| colorBrown20: 'hsl(41, 100%, 20%)', | ||
| colorBrown35: 'hsl(41, 96%, 35%)', | ||
| colorBrown50: 'hsl(41, 95%, 44%)', | ||
| colorBrown70: 'hsl(47, 95%, 70%)', | ||
| colorBrown85: 'hsl(47, 100%, 85%)', | ||
| colorBrown90: 'hsl(47, 100%, 90%)', | ||
| colorBrown95: 'hsl(47, 100%, 95%)', | ||
| colorBrown98: 'hsl(48, 100%, 97%)', | ||
| colorPurple10: 'hsl(248, 88%, 10%)', | ||
| colorPurple20: 'hsl(248, 50%, 20%)', | ||
| colorPurple35: 'hsl(248, 25%, 35%)', | ||
| colorPurple50: 'hsl(248, 30%,50%)', | ||
| colorPurple70: 'hsl(248, 40%, 70%)', | ||
| colorPurple85: 'hsl(248, 60%, 85%)', | ||
| colorPurple90: 'hsl(248, 50%, 90%)', | ||
| colorPurple95: 'hsl(248, 80%, 95%)', | ||
| colorPurple98: 'hsl(248, 90%, 98%)', | ||
| colorTurquoise10: 'hsl(180, 90%, 10%)', | ||
| colorTurquoise20: 'hsl(180, 50%, 20%)', | ||
| colorTurquoise35: 'hsl(180, 25%, 35%)', | ||
| colorTurquoise50: 'hsl(180, 30%, 45%)', | ||
| colorTurquoise70: 'hsl(180, 40%, 70%)', | ||
| colorTurquoise85: 'hsl(180, 60%, 85%)', | ||
| colorTurquoise90: 'hsl(180, 40%, 90%)', | ||
| colorTurquoise95: 'hsl(180, 80%, 95%)', | ||
| colorTurquoise98: 'hsl(180, 90%, 98%)', | ||
| colorPurple50: 'hsl(248, 64%, 58%)', | ||
| colorPurple70: 'hsl(248, 80%, 70%)', | ||
| colorPurple85: 'hsl(249, 100%, 85%)', | ||
| colorPurple90: 'hsl(248, 100%, 90%)', | ||
| colorPurple95: 'hsl(248, 100%, 95%)', | ||
| colorPurple98: 'hsl(246, 100%, 98%)', | ||
| colorTurquoise10: 'hsl(180, 88%, 10%)', | ||
| colorTurquoise20: 'hsl(180, 90%, 20%)', | ||
| colorTurquoise35: 'hsl(178, 88%, 35%)', | ||
| colorTurquoise50: 'hsl(178, 67%, 50%)', | ||
| colorTurquoise70: 'hsl(180, 75%, 70%)', | ||
| colorTurquoise85: 'hsl(180, 90%, 85%)', | ||
| colorTurquoise90: 'hsl(180, 88%, 90%)', | ||
| colorTurquoise95: 'hsl(180, 88%, 95%)', | ||
| colorTurquoise98: 'hsl(180, 100%, 98%)', | ||
| colorNeutral: 'hsl(232, 18%, 80%)', | ||
@@ -121,13 +121,13 @@ colorNeutral05: 'hsl(0deg 0% 80% / 5%)', | ||
| colorInfo95: 'hsl(203.05555555555554, 93.9130434783%, 95%)', | ||
| colorWarning: '#f16d0e', | ||
| colorWarning25: 'hsl(25.110132158590307, 89.0196078431%, 25%)', | ||
| colorWarning40: 'hsl(25.110132158590307, 89.0196078431%, 40%)', | ||
| colorWarning60: 'hsl(25.110132158590307, 90%, 60%)', | ||
| colorWarning85: 'hsl(25.110132158590307, 89.0196078431%, 85%)', | ||
| colorWarning95: 'hsl(25.110132158590307, 89.0196078431%, 95%)', | ||
| colorError: '#e60050', | ||
| colorError25: 'hsl(339.1304347826087, 100%, 25%)', | ||
| colorError40: 'hsl(339.1304347826087, 100%, 40%)', | ||
| colorError85: 'hsl(339.1304347826087, 100%, 85%)', | ||
| colorError95: 'hsl(339.1304347826087, 100%, 95%)', | ||
| colorWarning: 'hsl(35, 90%, 45%)', | ||
| colorWarning25: 'hsl(33, 83%, 25%)', | ||
| colorWarning40: 'hsl(33, 80%, 34%)', | ||
| colorWarning60: 'hsl(35, 90%, 55%)', | ||
| colorWarning85: 'hsl(33, 90%, 80%)', | ||
| colorWarning95: 'hsl(45, 100%, 92%)', | ||
| colorError: 'hsl(3, 65%, 58%)', | ||
| colorError25: 'hsl(4, 69%, 37%)', | ||
| colorError40: 'hsl(3, 60%, 46%)', | ||
| colorError85: 'hsl(1, 55%, 74%)', | ||
| colorError95: 'hsl(349, 66%, 92%)', | ||
| colorSolid: '#1a1a1a', | ||
@@ -241,90 +241,32 @@ colorSolid02: 'hsl(0deg 0% 10% / 2%)', | ||
| breakPointJumbodesktop: '1920px', | ||
| backgroundColorForButtonWhenActive: 'hsl(232, 18%, 95%)', | ||
| backgroundColorForButtonWhenHovered: 'hsl(232, 18%, 98%)', | ||
| backgroundColorForButtonWhenDisabled: 'hsl(195, 35.2941176471%, 95%)', | ||
| backgroundColorForIconButtonWhenDisabled: 'hsl(195, 35.2941176471%, 95%)', | ||
| backgroundColorForInput: '#fff', | ||
| backgroundColorForInputWhenSelected: 'hsl(195, 35.2941176471%, 95%)', | ||
| backgroundColorForInputWhenDisabled: 'hsl(232, 18%, 95%)', | ||
| backgroundColorForInputWhenHovered: 'hsl(232, 18%, 98%)', | ||
| backgroundColorForInputWhenFocused: '#fff', | ||
| backgroundColorForInputWhenReadonly: 'hsl(232, 18%, 95%)', | ||
| backgroundColorForInputWhenActive: 'hsl(203.05555555555554, 93.9130434783%, 95%)', | ||
| backgroundColorForInputAsQuiet: 'transparent', | ||
| backgroundColorForInputAsQuietWhenHovered: 'hsl(0deg 0% 10% / 2%)', | ||
| backgroundColorForInputWhenHovered: 'hsl(244, 100%, 99%)', | ||
| backgroundColorForLocalizedInputLabel: '#fff', | ||
| backgroundColorForLocalizedInputLabelWhenReadonly: 'hsl(232, 18%, 95%)', | ||
| backgroundColorForLocalizedInputLabelWhenDisabled: 'hsl(232, 18%, 95%)', | ||
| backgroundColorForButtonAsPrimary: '#15a390', | ||
| backgroundColorForButtonAsPrimaryWhenHovered: 'hsl(175, 55%, 45%)', | ||
| backgroundColorForButtonAsPrimaryAsDefaultWhenHovered: '#17ab97', | ||
| backgroundColorForButtonAsPrimaryAsDefaultWhenActive: '#15a390', | ||
| backgroundColorForButtonAsPrimaryAsUrgent: '#f16d0e', | ||
| backgroundColorForStampAsPrimary: 'hsl(175, 70%, 90%)', | ||
| backgroundColorForStampAsPositive: 'hsl(175, 70%, 90%)', | ||
| backgroundColorForToggleThumbWhenActive: 'hsl(175, 55%, 25%)', | ||
| backgroundColorForToggleTrackWhenActive: 'hsl(175, 55%, 40%)', | ||
| backgroundColorForToggleThumbWhenDisabled: 'hsl(195, 35.2941176471%, 60%)', | ||
| backgroundColorForToggleTrackWhenDisabled: 'hsl(195, 35.2941176471%, 90%)', | ||
| backgroundColorForToggleThumbWhenActiveWhenDisabled: 'hsl(232, 18%, 60%)', | ||
| backgroundColorForToggleTrackWhenActiveWhenDisabled: 'hsl(232, 18%, 90%)', | ||
| backgroundColorForToggleThumbWhenHovered: 'rgba(0, 0, 0, 0.1)', | ||
| backgroundColorForLoadingSpinnerTrack: '#213c45', | ||
| backgroundColorForLoadingSpinnerDot: '#213c45', | ||
| backgroundColorForContentNotificationWhenSuccess: 'hsl(175, 90%, 95%)', | ||
| backgroundColorForViewSwitcherButtonWhenActive: 'hsl(232, 18%, 95%)', | ||
| backgroundColorForCheckboxInputWhenHovered: 'hsl(232, 18%, 90%)', | ||
| backgroundColorForRadioOptionWhenHovered: 'hsl(232, 18%, 90%)', | ||
| backgroundColorForTag: 'hsl(232, 18%, 95%)', | ||
| backgroundColorForTagWhenHovered: 'hsl(232, 18%, 90%)', | ||
| backgroundColorForDropdownWhenHovered: 'hsl(232, 18%, 95%)', | ||
| backgroundColorForDropdownWhenActive: 'hsl(232, 18%, 90%)', | ||
| backgroundColorForDropdownOptionWhenActive: 'hsl(203.05555555555554, 93.9130434783%, 95%)', | ||
| backgroundColorForButtonWhenActive: 'hsl(243, 100%, 93%)', | ||
| backgroundColorForButtonWhenHovered: 'hsl(244, 100%, 97%)', | ||
| backgroundColorForButtonWhenDisabled: 'hsl(232, 18%, 95%)', | ||
| borderColorForInput: 'hsl(232, 18%, 80%)', | ||
| borderColorForInputWhenFocused: 'hsl(175, 55%, 45%)', | ||
| borderColorForInputWhenDisabled: 'hsl(232, 18%, 80%)', | ||
| borderColorForInputWhenReadonly: '#fff', | ||
| borderColorForInputWhenError: '#e60050', | ||
| borderColorForInputWhenWarning: '#f16d0e', | ||
| borderColorForInputWhenError: 'hsl(3, 65%, 58%)', | ||
| borderColorForInputWhenWarning: 'hsl(35, 90%, 45%)', | ||
| borderColorForInputWhenHovered: 'hsl(232, 18%, 80%)', | ||
| borderColorForInputAsQuiet: 'transparent', | ||
| borderColorForButtonAsSecondary: 'hsl(232, 18%, 80%)', | ||
| borderColorForDropdown: 'hsl(232, 18%, 80%)', | ||
| borderColorForContentNotificationWhenSuccess: 'hsl(175, 70%, 85%)', | ||
| borderColorForCheckboxInput: 'hsl(175, 55%, 45%)', | ||
| borderColorForCheckboxInputWhenActive: 'hsl(175, 55%, 45%)', | ||
| borderColorForTag: 'hsl(232, 18%, 85%)', | ||
| borderRadiusForButtonAsBig: '4px', | ||
| borderRadiusForButtonAsMedium: '4px', | ||
| borderColorForInputWhenFocused: 'hsl(240, 100%, 67%)', | ||
| borderColorForButtonAsSecondary: 'hsl(244, 100%, 84%)', | ||
| borderRadiusForInput: '4px', | ||
| borderWidthForInput: '1px', | ||
| borderWidthForInputWhenWarning: '1px', | ||
| borderWidthForInputWhenError: '1px', | ||
| borderWidthForInputWhenFocused: '1px', | ||
| fontColorForInput: '#1a1a1a', | ||
| fontColorForInputWhenDisabled: 'hsl(232, 18%, 60%)', | ||
| fontColorForInputWhenError: '#e60050', | ||
| fontColorForInputWhenError: 'hsl(3, 60%, 46%)', | ||
| fontColorForInputWhenReadonly: 'hsl(232, 18%, 40%)', | ||
| fontColorForInputWhenWarning: '#f16d0e', | ||
| fontColorForButtonAsSecondary: '#1a1a1a', | ||
| fontColorForButtonAsFlatWhenHovered: 'hsl(175, 55%, 45%)', | ||
| fontColorForButtonAsFlatAsCritical: '#e60050', | ||
| fontColorForButtonAsFlatAsCriticalWhenHovered: 'hsl(339.1304347826087, 100%, 25%)', | ||
| fontColorForViewSwitcherButton: 'hsl(232, 18%, 40%)', | ||
| fontColorForStampAsPositive: 'hsl(175, 55%, 25%)', | ||
| fontColorForContentNotificationWhenSuccess: 'hsl(175, 55%, 45%)', | ||
| fontColorForAvatarAsTurquoise: 'hsl(180, 30%, 45%)', | ||
| fontColorForLeadingIconAsTurquoise: 'hsl(180, 30%, 45%)', | ||
| fontColorForTextAsPositive: 'hsl(175, 55%, 25%)', | ||
| fontColorForInputWhenWarning: 'hsl(35, 90%, 45%)', | ||
| fontColorForButtonAsSecondary: 'hsl(240, 64%, 58%)', | ||
| heightForButtonAsBig: '40px', | ||
| heightForButtonAsSmall: '16px', | ||
| heightForButtonAsMedium: '32px', | ||
| heightForButtonAsSmall: '16px', | ||
| heightForInput: '40px', | ||
| heightForInputAsSmall: '32px', | ||
| placeholderFontColorForInput: 'hsl(232, 18%, 60%)', | ||
| fontSizeForButton: '0.875rem', | ||
| fontSizeForInput: '1rem', | ||
| paddingForInput: '0 var(--spacing-30)', | ||
| paddingForInputAsQuiet: '0 var(--spacing-20)', | ||
| paddingForButton: '0 var(--spacing-30)', | ||
| shadowForInput: 'none', | ||
@@ -334,168 +276,53 @@ shadowForInputWhenFocused: 'inset 0 0 0 1px var(--color-primary)', | ||
| shadowForInputWhenWarning: 'inset 0 0 0 1px var(--color-warning)' | ||
| }, | ||
| recolouring: { | ||
| colorPrimary: 'hsl(240, 64%, 58%)', | ||
| colorPrimary10: 'hsl(240, 66%, 19%)', | ||
| colorPrimary20: 'hsl(240, 45%, 33%)', | ||
| colorPrimary25: 'hsl(240, 46%, 48%)', | ||
| colorPrimary30: 'hsl(240, 46%, 53%)', | ||
| colorPrimary40: 'hsl(240, 100%, 67%)', | ||
| colorPrimary85: 'hsl(244, 100%, 84%)', | ||
| colorPrimary90: 'hsl(243, 100%, 93%)', | ||
| colorPrimary95: 'hsl(244, 100%, 97%)', | ||
| colorPrimary98: 'hsl(244, 100%, 99%)', | ||
| colorAccent10: 'hsl(195, 100%, 10%)', | ||
| colorAccent20: 'hsl(195, 80%, 20%)', | ||
| colorAccent30: 'hsl(195, 70%, 30%)', | ||
| colorAccent40: 'hsl(195, 70%, 40%)', | ||
| colorAccent50: 'hsl(195, 70%, 50%)', | ||
| colorAccent60: 'hsl(195, 70%, 60%)', | ||
| colorAccent85: 'hsl(195, 85%, 85%)', | ||
| colorAccent90: 'hsl(195, 90%, 90%)', | ||
| colorAccent95: 'hsl(195, 95%, 95%)', | ||
| colorAccent98: 'hsl(195, 100%, 98%)', | ||
| colorBrown10: 'hsl(41, 100%, 10%)', | ||
| colorBrown20: 'hsl(41, 100%, 20%)', | ||
| colorBrown35: 'hsl(41, 96%, 35%)', | ||
| colorBrown50: 'hsl(41, 95%, 44%)', | ||
| colorBrown70: 'hsl(47, 95%, 70%)', | ||
| colorBrown85: 'hsl(47, 100%, 85%)', | ||
| colorBrown90: 'hsl(47, 100%, 90%)', | ||
| colorBrown95: 'hsl(47, 100%, 95%)', | ||
| colorBrown98: 'hsl(48, 100%, 97%)', | ||
| colorPurple10: 'hsl(248, 88%, 10%)', | ||
| colorPurple20: 'hsl(248, 50%, 20%)', | ||
| colorPurple35: 'hsl(248, 25%, 35%)', | ||
| colorPurple50: 'hsl(248, 64%, 58%)', | ||
| colorPurple70: 'hsl(248, 80%, 70%)', | ||
| colorPurple85: 'hsl(249, 100%, 85%)', | ||
| colorPurple90: 'hsl(248, 100%, 90%)', | ||
| colorPurple95: 'hsl(248, 100%, 95%)', | ||
| colorPurple98: 'hsl(246, 100%, 98%)', | ||
| colorTurquoise10: 'hsl(180, 88%, 10%)', | ||
| colorTurquoise20: 'hsl(180, 90%, 20%)', | ||
| colorTurquoise35: 'hsl(178, 88%, 35%)', | ||
| colorTurquoise50: 'hsl(178, 67%, 50%)', | ||
| colorTurquoise70: 'hsl(180, 75%, 70%)', | ||
| colorTurquoise85: 'hsl(180, 90%, 85%)', | ||
| colorTurquoise90: 'hsl(180, 88%, 90%)', | ||
| colorTurquoise95: 'hsl(180, 88%, 95%)', | ||
| colorTurquoise98: 'hsl(180, 100%, 98%)', | ||
| colorSuccess: 'hsl(152, 77%, 39%)', | ||
| colorSuccess25: 'hsl(155, 84%, 20%)', | ||
| colorSuccess40: 'hsl(155, 90%, 24%)', | ||
| colorSuccess85: 'hsl(144, 69%, 80%)', | ||
| colorSuccess95: 'hsl(141, 76%, 92%)', | ||
| colorWarning: 'hsl(35, 90%, 45%)', | ||
| colorWarning25: 'hsl(33, 83%, 25%)', | ||
| colorWarning40: 'hsl(33, 80%, 34%)', | ||
| colorWarning60: 'hsl(35, 90%, 55%)', | ||
| colorWarning85: 'hsl(33, 90%, 80%)', | ||
| colorWarning95: 'hsl(45, 100%, 92%)', | ||
| colorError: 'hsl(3, 65%, 58%)', | ||
| colorError25: 'hsl(4, 69%, 37%)', | ||
| colorError40: 'hsl(3, 60%, 46%)', | ||
| colorError85: 'hsl(1, 55%, 74%)', | ||
| colorError95: 'hsl(349, 66%, 92%)', | ||
| borderColorForButtonAsSecondary: 'hsl(244, 100%, 84%)', | ||
| borderColorForDropdown: 'hsl(244, 100%, 84%)', | ||
| borderColorForInputWhenFocused: 'hsl(240, 100%, 67%)', | ||
| borderColorForContentNotificationWhenSuccess: 'hsl(144, 69%, 80%)', | ||
| borderColorForCheckboxInput: 'hsl(232, 18%, 60%)', | ||
| borderColorForCheckboxInputWhenActive: 'hsl(240, 64%, 58%)', | ||
| borderColorForTag: 'hsl(243, 100%, 93%)', | ||
| backgroundColorForButtonWhenActive: 'hsl(243, 100%, 93%)', | ||
| backgroundColorForButtonWhenHovered: 'hsl(244, 100%, 97%)', | ||
| backgroundColorForIconButtonWhenDisabled: 'transparent', | ||
| backgroundColorForButtonAsPrimary: 'hsl(240, 64%, 58%)', | ||
| backgroundColorForButtonAsPrimaryWhenHovered: 'hsl(240, 100%, 67%)', | ||
| backgroundColorForButtonAsPrimaryAsDefaultWhenHovered: 'hsl(240, 100%, 67%)', | ||
| backgroundColorForButtonAsPrimaryAsDefaultWhenActive: 'hsl(240, 46%, 48%)', | ||
| backgroundColorForButtonAsPrimaryAsUrgent: 'hsl(35, 90%, 55%)', | ||
| backgroundColorForInputWhenSelected: 'hsl(244, 100%, 97%)', | ||
| backgroundColorForStampAsPrimary: 'hsl(244, 100%, 97%)', | ||
| backgroundColorForStampAsPositive: 'hsl(141, 76%, 92%)', | ||
| backgroundColorForToggleThumbWhenActive: 'hsl(240, 100%, 67%)', | ||
| backgroundColorForToggleTrackWhenActive: 'hsl(244, 100%, 84%)', | ||
| backgroundColorForToggleThumbWhenDisabled: 'hsl(232, 18%, 60%)', | ||
| backgroundColorForToggleTrackWhenDisabled: 'hsl(232, 18%, 90%)', | ||
| backgroundColorForToggleThumbWhenActiveWhenDisabled: 'hsl(244, 100%, 84%)', | ||
| backgroundColorForToggleTrackWhenActiveWhenDisabled: 'hsl(243, 100%, 93%)', | ||
| backgroundColorForToggleThumbWhenHovered: 'hsla(240, 64%, 58%, 4%)', | ||
| backgroundColorForLoadingSpinnerTrack: 'hsl(243, 100%, 93%)', | ||
| backgroundColorForLoadingSpinnerDot: 'hsl(240, 64%, 58%)', | ||
| backgroundColorForContentNotificationWhenSuccess: 'hsl(141, 76%, 92%)', | ||
| backgroundColorForViewSwitcherButtonWhenActive: 'hsl(244, 100%, 97%)', | ||
| backgroundColorForCheckboxInputWhenHovered: 'hsl(244, 100%, 97%)', | ||
| backgroundColorForRadioOptionWhenHovered: 'hsl(244, 100%, 97%)', | ||
| backgroundColorForTag: 'hsl(244, 100%, 97%)', | ||
| backgroundColorForTagWhenHovered: 'hsl(243, 100%, 93%)', | ||
| backgroundColorForDropdownWhenHovered: 'hsl(244, 100%, 97%)', | ||
| backgroundColorForDropdownWhenActive: 'hsl(243, 100%, 93%)', | ||
| backgroundColorForDropdownOptionWhenActive: 'hsl(244, 100%, 97%)', | ||
| backgroundColorForInputAsQuietWhenHovered: 'hsla(240, 64%, 58%, 4%)', | ||
| backgroundColorForInputWhenActive: 'hsl(244, 100%, 97%)', | ||
| backgroundColorForInputWhenHovered: 'hsl(244, 100%, 99%)', | ||
| fontColorForButtonAsSecondary: 'hsl(240, 64%, 58%)', | ||
| fontColorForButtonAsFlatWhenHovered: 'hsl(240, 100%, 67%)', | ||
| fontColorForButtonAsFlatAsCritical: 'hsl(3, 60%, 46%)', | ||
| fontColorForButtonAsFlatAsCriticalWhenHovered: 'hsl(3, 65%, 58%)', | ||
| fontColorForViewSwitcherButton: 'hsl(240, 64%, 58%)', | ||
| fontColorForInputWhenError: 'hsl(3, 60%, 46%)', | ||
| fontColorForStampAsPositive: 'hsl(155, 90%, 24%)', | ||
| fontColorForContentNotificationWhenSuccess: 'hsl(152, 77%, 39%)', | ||
| fontColorForAvatarAsTurquoise: 'hsl(178, 88%, 35%)', | ||
| fontColorForLeadingIconAsTurquoise: 'hsl(178, 88%, 35%)', | ||
| fontColorForTextAsPositive: 'hsl(155, 90%, 24%)' | ||
| } | ||
| }; | ||
| const designTokens = { | ||
| colorPrimary: 'var(--color-primary, hsl(175, 55%, 45%))', | ||
| colorPrimary10: 'var(--color-primary-10, hsl(175, 55%, 10%))', | ||
| colorPrimary20: 'var(--color-primary-20, hsl(175, 55%, 20%))', | ||
| colorPrimary25: 'var(--color-primary-25, hsl(175, 55%, 25%))', | ||
| colorPrimary30: 'var(--color-primary-30, hsl(175, 55%, 30%))', | ||
| colorPrimary40: 'var(--color-primary-40, hsl(175, 55%, 40%))', | ||
| colorPrimary85: 'var(--color-primary-85, hsl(175, 70%, 85%))', | ||
| colorPrimary90: 'var(--color-primary-90, hsl(175, 70%, 90%))', | ||
| colorPrimary95: 'var(--color-primary-95, hsl(175, 90%, 95%))', | ||
| colorPrimary98: 'var(--color-primary-98, hsl(175, 100%, 99%))', | ||
| colorPrimary: 'var(--color-primary, hsl(240, 64%, 58%))', | ||
| colorPrimary10: 'var(--color-primary-10, hsl(240, 66%, 19%))', | ||
| colorPrimary20: 'var(--color-primary-20, hsl(240, 45%, 33%))', | ||
| colorPrimary25: 'var(--color-primary-25, hsl(240, 46%, 48%))', | ||
| colorPrimary30: 'var(--color-primary-30, hsl(240, 46%, 53%))', | ||
| colorPrimary40: 'var(--color-primary-40, hsl(240, 100%, 67%))', | ||
| colorPrimary85: 'var(--color-primary-85, hsl(244, 100%, 84%))', | ||
| colorPrimary90: 'var(--color-primary-90, hsl(243, 100%, 93%))', | ||
| colorPrimary95: 'var(--color-primary-95, hsl(244, 100%, 97%))', | ||
| colorPrimary98: 'var(--color-primary-98, hsl(244, 100%, 99%))', | ||
| colorAccent: 'var(--color-accent, #213c45)', | ||
| colorAccent10: 'var(--color-accent-10, hsl(195, 35.2941176471%, 10%))', | ||
| colorAccent20: 'var(--color-accent-20, hsl(195, 35.2941176471%, 20%))', | ||
| colorAccent30: 'var(--color-accent-30, hsl(195, 35.2941176471%, 30%))', | ||
| colorAccent40: 'var(--color-accent-40, hsl(195, 35.2941176471%, 40%))', | ||
| colorAccent50: 'var(--color-accent-50, hsl(195, 35%, 50%))', | ||
| colorAccent60: 'var(--color-accent-60, hsl(195, 35.2941176471%, 60%))', | ||
| colorAccent85: 'var(--color-accent-85, hsl(195, 35%, 85%))', | ||
| colorAccent90: 'var(--color-accent-90, hsl(195, 35.2941176471%, 90%))', | ||
| colorAccent95: 'var(--color-accent-95, hsl(195, 35.2941176471%, 95%))', | ||
| colorAccent98: 'var(--color-accent-98, hsl(195, 35.2941176471%, 98%))', | ||
| colorBrown10: 'var(--color-brown-10, hsl(35, 90%, 10%))', | ||
| colorBrown20: 'var(--color-brown-20, hsl(35, 50%, 20%))', | ||
| colorBrown35: 'var(--color-brown-35, hsl(35, 25%, 35%))', | ||
| colorBrown50: 'var(--color-brown-50, hsl(35, 30%, 50%))', | ||
| colorBrown70: 'var(--color-brown-70, hsl(35, 40%, 70%))', | ||
| colorBrown85: 'var(--color-brown-85, hsl(35, 60%, 85%))', | ||
| colorBrown90: 'var(--color-brown-90, hsl(35, 90%, 90%))', | ||
| colorBrown95: 'var(--color-brown-95, hsl(35, 80%, 95%))', | ||
| colorBrown98: 'var(--color-brown-98, hsl(35, 90%, 98%))', | ||
| colorPurple10: 'var(--color-purple-10, hsl(248, 90%, 10%))', | ||
| colorAccent10: 'var(--color-accent-10, hsl(195, 100%, 10%))', | ||
| colorAccent20: 'var(--color-accent-20, hsl(195, 80%, 20%))', | ||
| colorAccent30: 'var(--color-accent-30, hsl(195, 70%, 30%))', | ||
| colorAccent40: 'var(--color-accent-40, hsl(195, 70%, 40%))', | ||
| colorAccent50: 'var(--color-accent-50, hsl(195, 70%, 50%))', | ||
| colorAccent60: 'var(--color-accent-60, hsl(195, 70%, 60%))', | ||
| colorAccent85: 'var(--color-accent-85, hsl(195, 85%, 85%))', | ||
| colorAccent90: 'var(--color-accent-90, hsl(195, 90%, 90%))', | ||
| colorAccent95: 'var(--color-accent-95, hsl(195, 95%, 95%))', | ||
| colorAccent98: 'var(--color-accent-98, hsl(195, 100%, 98%))', | ||
| colorBrown10: 'var(--color-brown-10, hsl(41, 100%, 10%))', | ||
| colorBrown20: 'var(--color-brown-20, hsl(41, 100%, 20%))', | ||
| colorBrown35: 'var(--color-brown-35, hsl(41, 96%, 35%))', | ||
| colorBrown50: 'var(--color-brown-50, hsl(41, 95%, 44%))', | ||
| colorBrown70: 'var(--color-brown-70, hsl(47, 95%, 70%))', | ||
| colorBrown85: 'var(--color-brown-85, hsl(47, 100%, 85%))', | ||
| colorBrown90: 'var(--color-brown-90, hsl(47, 100%, 90%))', | ||
| colorBrown95: 'var(--color-brown-95, hsl(47, 100%, 95%))', | ||
| colorBrown98: 'var(--color-brown-98, hsl(48, 100%, 97%))', | ||
| colorPurple10: 'var(--color-purple-10, hsl(248, 88%, 10%))', | ||
| colorPurple20: 'var(--color-purple-20, hsl(248, 50%, 20%))', | ||
| colorPurple35: 'var(--color-purple-35, hsl(248, 25%, 35%))', | ||
| colorPurple50: 'var(--color-purple-50, hsl(248, 30%,50%))', | ||
| colorPurple70: 'var(--color-purple-70, hsl(248, 40%, 70%))', | ||
| colorPurple85: 'var(--color-purple-85, hsl(248, 60%, 85%))', | ||
| colorPurple90: 'var(--color-purple-90, hsl(248, 50%, 90%))', | ||
| colorPurple95: 'var(--color-purple-95, hsl(248, 80%, 95%))', | ||
| colorPurple98: 'var(--color-purple-98, hsl(248, 90%, 98%))', | ||
| colorTurquoise10: 'var(--color-turquoise-10, hsl(180, 90%, 10%))', | ||
| colorTurquoise20: 'var(--color-turquoise-20, hsl(180, 50%, 20%))', | ||
| colorTurquoise35: 'var(--color-turquoise-35, hsl(180, 25%, 35%))', | ||
| colorTurquoise50: 'var(--color-turquoise-50, hsl(180, 30%, 45%))', | ||
| colorTurquoise70: 'var(--color-turquoise-70, hsl(180, 40%, 70%))', | ||
| colorTurquoise85: 'var(--color-turquoise-85, hsl(180, 60%, 85%))', | ||
| colorTurquoise90: 'var(--color-turquoise-90, hsl(180, 40%, 90%))', | ||
| colorTurquoise95: 'var(--color-turquoise-95, hsl(180, 80%, 95%))', | ||
| colorTurquoise98: 'var(--color-turquoise-98, hsl(180, 90%, 98%))', | ||
| colorPurple50: 'var(--color-purple-50, hsl(248, 64%, 58%))', | ||
| colorPurple70: 'var(--color-purple-70, hsl(248, 80%, 70%))', | ||
| colorPurple85: 'var(--color-purple-85, hsl(249, 100%, 85%))', | ||
| colorPurple90: 'var(--color-purple-90, hsl(248, 100%, 90%))', | ||
| colorPurple95: 'var(--color-purple-95, hsl(248, 100%, 95%))', | ||
| colorPurple98: 'var(--color-purple-98, hsl(246, 100%, 98%))', | ||
| colorTurquoise10: 'var(--color-turquoise-10, hsl(180, 88%, 10%))', | ||
| colorTurquoise20: 'var(--color-turquoise-20, hsl(180, 90%, 20%))', | ||
| colorTurquoise35: 'var(--color-turquoise-35, hsl(178, 88%, 35%))', | ||
| colorTurquoise50: 'var(--color-turquoise-50, hsl(178, 67%, 50%))', | ||
| colorTurquoise70: 'var(--color-turquoise-70, hsl(180, 75%, 70%))', | ||
| colorTurquoise85: 'var(--color-turquoise-85, hsl(180, 90%, 85%))', | ||
| colorTurquoise90: 'var(--color-turquoise-90, hsl(180, 88%, 90%))', | ||
| colorTurquoise95: 'var(--color-turquoise-95, hsl(180, 88%, 95%))', | ||
| colorTurquoise98: 'var(--color-turquoise-98, hsl(180, 100%, 98%))', | ||
| colorNeutral: 'var(--color-neutral, hsl(232, 18%, 80%))', | ||
@@ -516,13 +343,13 @@ colorNeutral05: 'var(--color-neutral-05, hsl(0deg 0% 80% / 5%))', | ||
| colorInfo95: 'var(--color-info-95, hsl(203.05555555555554, 93.9130434783%, 95%))', | ||
| colorWarning: 'var(--color-warning, #f16d0e)', | ||
| colorWarning25: 'var(--color-warning-25, hsl(25.110132158590307, 89.0196078431%, 25%))', | ||
| colorWarning40: 'var(--color-warning-40, hsl(25.110132158590307, 89.0196078431%, 40%))', | ||
| colorWarning60: 'var(--color-warning-60, hsl(25.110132158590307, 90%, 60%))', | ||
| colorWarning85: 'var(--color-warning-85, hsl(25.110132158590307, 89.0196078431%, 85%))', | ||
| colorWarning95: 'var(--color-warning-95, hsl(25.110132158590307, 89.0196078431%, 95%))', | ||
| colorError: 'var(--color-error, #e60050)', | ||
| colorError25: 'var(--color-error-25, hsl(339.1304347826087, 100%, 25%))', | ||
| colorError40: 'var(--color-error-40, hsl(339.1304347826087, 100%, 40%))', | ||
| colorError85: 'var(--color-error-85, hsl(339.1304347826087, 100%, 85%))', | ||
| colorError95: 'var(--color-error-95, hsl(339.1304347826087, 100%, 95%))', | ||
| colorWarning: 'var(--color-warning, hsl(35, 90%, 45%))', | ||
| colorWarning25: 'var(--color-warning-25, hsl(33, 83%, 25%))', | ||
| colorWarning40: 'var(--color-warning-40, hsl(33, 80%, 34%))', | ||
| colorWarning60: 'var(--color-warning-60, hsl(35, 90%, 55%))', | ||
| colorWarning85: 'var(--color-warning-85, hsl(33, 90%, 80%))', | ||
| colorWarning95: 'var(--color-warning-95, hsl(45, 100%, 92%))', | ||
| colorError: 'var(--color-error, hsl(3, 65%, 58%))', | ||
| colorError25: 'var(--color-error-25, hsl(4, 69%, 37%))', | ||
| colorError40: 'var(--color-error-40, hsl(3, 60%, 46%))', | ||
| colorError85: 'var(--color-error-85, hsl(1, 55%, 74%))', | ||
| colorError95: 'var(--color-error-95, hsl(349, 66%, 92%))', | ||
| colorSolid: 'var(--color-solid, #1a1a1a)', | ||
@@ -636,90 +463,32 @@ colorSolid02: 'var(--color-solid-02, hsl(0deg 0% 10% / 2%))', | ||
| breakPointJumbodesktop: 'var(--break-point-jumbodesktop, 1920px)', | ||
| backgroundColorForButtonWhenActive: 'var(--background-color-for-button-when-active, hsl(232, 18%, 95%))', | ||
| backgroundColorForButtonWhenHovered: 'var(--background-color-for-button-when-hovered, hsl(232, 18%, 98%))', | ||
| backgroundColorForButtonWhenDisabled: 'var(--background-color-for-button-when-disabled, hsl(195, 35.2941176471%, 95%))', | ||
| backgroundColorForIconButtonWhenDisabled: 'var(--background-color-for-icon-button-when-disabled, hsl(195, 35.2941176471%, 95%))', | ||
| backgroundColorForInput: 'var(--background-color-for-input, #fff)', | ||
| backgroundColorForInputWhenSelected: 'var(--background-color-for-input-when-selected, hsl(195, 35.2941176471%, 95%))', | ||
| backgroundColorForInputWhenDisabled: 'var(--background-color-for-input-when-disabled, hsl(232, 18%, 95%))', | ||
| backgroundColorForInputWhenHovered: 'var(--background-color-for-input-when-hovered, hsl(232, 18%, 98%))', | ||
| backgroundColorForInputWhenFocused: 'var(--background-color-for-input-when-focused, #fff)', | ||
| backgroundColorForInputWhenReadonly: 'var(--background-color-for-input-when-readonly, hsl(232, 18%, 95%))', | ||
| backgroundColorForInputWhenActive: 'var(--background-color-for-input-when-active, hsl(203.05555555555554, 93.9130434783%, 95%))', | ||
| backgroundColorForInputAsQuiet: 'var(--background-color-for-input-as-quiet, transparent)', | ||
| backgroundColorForInputAsQuietWhenHovered: 'var(--background-color-for-input-as-quiet-when-hovered, hsl(0deg 0% 10% / 2%))', | ||
| backgroundColorForInputWhenHovered: 'var(--background-color-for-input-when-hovered, hsl(244, 100%, 99%))', | ||
| backgroundColorForLocalizedInputLabel: 'var(--background-color-for-localized-input-label, #fff)', | ||
| backgroundColorForLocalizedInputLabelWhenReadonly: 'var(--background-color-for-localized-input-label-when-readonly, hsl(232, 18%, 95%))', | ||
| backgroundColorForLocalizedInputLabelWhenDisabled: 'var(--background-color-for-localized-input-label-when-disabled, hsl(232, 18%, 95%))', | ||
| backgroundColorForButtonAsPrimary: 'var(--background-color-for-button-as-primary, #15a390)', | ||
| backgroundColorForButtonAsPrimaryWhenHovered: 'var(--background-color-for-button-as-primary-when-hovered, hsl(175, 55%, 45%))', | ||
| backgroundColorForButtonAsPrimaryAsDefaultWhenHovered: 'var(--background-color-for-button-as-primary-as-default-when-hovered, #17ab97)', | ||
| backgroundColorForButtonAsPrimaryAsDefaultWhenActive: 'var(--background-color-for-button-as-primary-as-default-when-active, #15a390)', | ||
| backgroundColorForButtonAsPrimaryAsUrgent: 'var(--background-color-for-button-as-primary-as-urgent, #f16d0e)', | ||
| backgroundColorForStampAsPrimary: 'var(--background-color-for-stamp-as-primary, hsl(175, 70%, 90%))', | ||
| backgroundColorForStampAsPositive: 'var(--background-color-for-stamp-as-positive, hsl(175, 70%, 90%))', | ||
| backgroundColorForToggleThumbWhenActive: 'var(--background-color-for-toggle-thumb-when-active, hsl(175, 55%, 25%))', | ||
| backgroundColorForToggleTrackWhenActive: 'var(--background-color-for-toggle-track-when-active, hsl(175, 55%, 40%))', | ||
| backgroundColorForToggleThumbWhenDisabled: 'var(--background-color-for-toggle-thumb-when-disabled, hsl(195, 35.2941176471%, 60%))', | ||
| backgroundColorForToggleTrackWhenDisabled: 'var(--background-color-for-toggle-track-when-disabled, hsl(195, 35.2941176471%, 90%))', | ||
| backgroundColorForToggleThumbWhenActiveWhenDisabled: 'var(--background-color-for-toggle-thumb-when-active-when-disabled, hsl(232, 18%, 60%))', | ||
| backgroundColorForToggleTrackWhenActiveWhenDisabled: 'var(--background-color-for-toggle-track-when-active-when-disabled, hsl(232, 18%, 90%))', | ||
| backgroundColorForToggleThumbWhenHovered: 'var(--background-color-for-toggle-thumb-when-hovered, rgba(0, 0, 0, 0.1))', | ||
| backgroundColorForLoadingSpinnerTrack: 'var(--background-color-for-loading-spinner-track, #213c45)', | ||
| backgroundColorForLoadingSpinnerDot: 'var(--background-color-for-loading-spinner-dot, #213c45)', | ||
| backgroundColorForContentNotificationWhenSuccess: 'var(--background-color-for-content-notification-when-success, hsl(175, 90%, 95%))', | ||
| backgroundColorForViewSwitcherButtonWhenActive: 'var(--background-color-for-view-switcher-button-when-active, hsl(232, 18%, 95%))', | ||
| backgroundColorForCheckboxInputWhenHovered: 'var(--background-color-for-checkbox-input-when-hovered, hsl(232, 18%, 90%))', | ||
| backgroundColorForRadioOptionWhenHovered: 'var(--background-color-for-radio-option-when-hovered, hsl(232, 18%, 90%))', | ||
| backgroundColorForTag: 'var(--background-color-for-tag, hsl(232, 18%, 95%))', | ||
| backgroundColorForTagWhenHovered: 'var(--background-color-for-tag-when-hovered, hsl(232, 18%, 90%))', | ||
| backgroundColorForDropdownWhenHovered: 'var(--background-color-for-dropdown-when-hovered, hsl(232, 18%, 95%))', | ||
| backgroundColorForDropdownWhenActive: 'var(--background-color-for-dropdown-when-active, hsl(232, 18%, 90%))', | ||
| backgroundColorForDropdownOptionWhenActive: 'var(--background-color-for-dropdown-option-when-active, hsl(203.05555555555554, 93.9130434783%, 95%))', | ||
| backgroundColorForButtonWhenActive: 'var(--background-color-for-button-when-active, hsl(243, 100%, 93%))', | ||
| backgroundColorForButtonWhenHovered: 'var(--background-color-for-button-when-hovered, hsl(244, 100%, 97%))', | ||
| backgroundColorForButtonWhenDisabled: 'var(--background-color-for-button-when-disabled, hsl(232, 18%, 95%))', | ||
| borderColorForInput: 'var(--border-color-for-input, hsl(232, 18%, 80%))', | ||
| borderColorForInputWhenFocused: 'var(--border-color-for-input-when-focused, hsl(175, 55%, 45%))', | ||
| borderColorForInputWhenDisabled: 'var(--border-color-for-input-when-disabled, hsl(232, 18%, 80%))', | ||
| borderColorForInputWhenReadonly: 'var(--border-color-for-input-when-readonly, #fff)', | ||
| borderColorForInputWhenError: 'var(--border-color-for-input-when-error, #e60050)', | ||
| borderColorForInputWhenWarning: 'var(--border-color-for-input-when-warning, #f16d0e)', | ||
| borderColorForInputWhenError: 'var(--border-color-for-input-when-error, hsl(3, 65%, 58%))', | ||
| borderColorForInputWhenWarning: 'var(--border-color-for-input-when-warning, hsl(35, 90%, 45%))', | ||
| borderColorForInputWhenHovered: 'var(--border-color-for-input-when-hovered, hsl(232, 18%, 80%))', | ||
| borderColorForInputAsQuiet: 'var(--border-color-for-input-as-quiet, transparent)', | ||
| borderColorForButtonAsSecondary: 'var(--border-color-for-button-as-secondary, hsl(232, 18%, 80%))', | ||
| borderColorForDropdown: 'var(--border-color-for-dropdown, hsl(232, 18%, 80%))', | ||
| borderColorForContentNotificationWhenSuccess: 'var(--border-color-for-content-notification-when-success, hsl(175, 70%, 85%))', | ||
| borderColorForCheckboxInput: 'var(--border-color-for-checkbox-input, hsl(175, 55%, 45%))', | ||
| borderColorForCheckboxInputWhenActive: 'var(--border-color-for-checkbox-input-when-active, hsl(175, 55%, 45%))', | ||
| borderColorForTag: 'var(--border-color-for-tag, hsl(232, 18%, 85%))', | ||
| borderRadiusForButtonAsBig: 'var(--border-radius-for-button-as-big, 4px)', | ||
| borderRadiusForButtonAsMedium: 'var(--border-radius-for-button-as-medium, 4px)', | ||
| borderColorForInputWhenFocused: 'var(--border-color-for-input-when-focused, hsl(240, 100%, 67%))', | ||
| borderColorForButtonAsSecondary: 'var(--border-color-for-button-as-secondary, hsl(244, 100%, 84%))', | ||
| borderRadiusForInput: 'var(--border-radius-for-input, 4px)', | ||
| borderWidthForInput: 'var(--border-width-for-input, 1px)', | ||
| borderWidthForInputWhenWarning: 'var(--border-width-for-input-when-warning, 1px)', | ||
| borderWidthForInputWhenError: 'var(--border-width-for-input-when-error, 1px)', | ||
| borderWidthForInputWhenFocused: 'var(--border-width-for-input-when-focused, 1px)', | ||
| fontColorForInput: 'var(--font-color-for-input, #1a1a1a)', | ||
| fontColorForInputWhenDisabled: 'var(--font-color-for-input-when-disabled, hsl(232, 18%, 60%))', | ||
| fontColorForInputWhenError: 'var(--font-color-for-input-when-error, #e60050)', | ||
| fontColorForInputWhenError: 'var(--font-color-for-input-when-error, hsl(3, 60%, 46%))', | ||
| fontColorForInputWhenReadonly: 'var(--font-color-for-input-when-readonly, hsl(232, 18%, 40%))', | ||
| fontColorForInputWhenWarning: 'var(--font-color-for-input-when-warning, #f16d0e)', | ||
| fontColorForButtonAsSecondary: 'var(--font-color-for-button-as-secondary, #1a1a1a)', | ||
| fontColorForButtonAsFlatWhenHovered: 'var(--font-color-for-button-as-flat-when-hovered, hsl(175, 55%, 45%))', | ||
| fontColorForButtonAsFlatAsCritical: 'var(--font-color-for-button-as-flat-as-critical, #e60050)', | ||
| fontColorForButtonAsFlatAsCriticalWhenHovered: 'var(--font-color-for-button-as-flat-as-critical-when-hovered, hsl(339.1304347826087, 100%, 25%))', | ||
| fontColorForViewSwitcherButton: 'var(--font-color-for-view-switcher-button, hsl(232, 18%, 40%))', | ||
| fontColorForStampAsPositive: 'var(--font-color-for-stamp-as-positive, hsl(175, 55%, 25%))', | ||
| fontColorForContentNotificationWhenSuccess: 'var(--font-color-for-content-notification-when-success, hsl(175, 55%, 45%))', | ||
| fontColorForAvatarAsTurquoise: 'var(--font-color-for-avatar-as-turquoise, hsl(180, 30%, 45%))', | ||
| fontColorForLeadingIconAsTurquoise: 'var(--font-color-for-leading-icon-as-turquoise, hsl(180, 30%, 45%))', | ||
| fontColorForTextAsPositive: 'var(--font-color-for-text-as-positive, hsl(175, 55%, 25%))', | ||
| fontColorForInputWhenWarning: 'var(--font-color-for-input-when-warning, hsl(35, 90%, 45%))', | ||
| fontColorForButtonAsSecondary: 'var(--font-color-for-button-as-secondary, hsl(240, 64%, 58%))', | ||
| heightForButtonAsBig: 'var(--height-for-button-as-big, 40px)', | ||
| heightForButtonAsSmall: 'var(--height-for-button-as-small, 16px)', | ||
| heightForButtonAsMedium: 'var(--height-for-button-as-medium, 32px)', | ||
| heightForButtonAsSmall: 'var(--height-for-button-as-small, 16px)', | ||
| heightForInput: 'var(--height-for-input, 40px)', | ||
| heightForInputAsSmall: 'var(--height-for-input-as-small, 32px)', | ||
| placeholderFontColorForInput: 'var(--placeholder-font-color-for-input, hsl(232, 18%, 60%))', | ||
| fontSizeForButton: 'var(--font-size-for-button, 0.875rem)', | ||
| fontSizeForInput: 'var(--font-size-for-input, 1rem)', | ||
| paddingForInput: 'var(--padding-for-input, 0 var(--spacing-30))', | ||
| paddingForInputAsQuiet: 'var(--padding-for-input-as-quiet, 0 var(--spacing-20))', | ||
| paddingForButton: 'var(--padding-for-button, 0 var(--spacing-30))', | ||
| shadowForInput: 'var(--shadow-for-input, none)', | ||
@@ -860,4 +629,7 @@ shadowForInputWhenFocused: 'var(--shadow-for-input-when-focused, inset 0 0 0 1px var(--color-primary))', | ||
| }); | ||
| const themedValue = react.useCallback((defaultThemeValue, newThemeValue) => theme === 'default' ? defaultThemeValue : newThemeValue, [theme]); | ||
| // TODO - make sure old and new theme return same value as new defaultThemeValue | ||
| // At least for the remaining places that we still use this function | ||
| const themedValue = react.useCallback((defaultThemeValue, _newThemeValue) => defaultThemeValue, []); | ||
| // If we use 'useLayoutEffect' here, we would be trying to read the | ||
@@ -876,6 +648,6 @@ // data attribute before it gets set from the effect in the ThemeProvider | ||
| return { | ||
| theme: 'default', | ||
| theme, | ||
| themedValue, | ||
| isNewTheme: false, | ||
| isRecolouringTheme: theme === 'recolouring' | ||
| isRecolouringTheme: true | ||
| }; | ||
@@ -892,3 +664,3 @@ }; | ||
| // NOTE: This string will be replaced on build time with the package version. | ||
| var version = "19.1.0"; | ||
| var version = "19.2.0"; | ||
@@ -895,0 +667,0 @@ exports.ThemeProvider = ThemeProvider; |
@@ -32,50 +32,50 @@ import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty'; | ||
| default: { | ||
| colorPrimary: 'hsl(175, 55%, 45%)', | ||
| colorPrimary10: 'hsl(175, 55%, 10%)', | ||
| colorPrimary20: 'hsl(175, 55%, 20%)', | ||
| colorPrimary25: 'hsl(175, 55%, 25%)', | ||
| colorPrimary30: 'hsl(175, 55%, 30%)', | ||
| colorPrimary40: 'hsl(175, 55%, 40%)', | ||
| colorPrimary85: 'hsl(175, 70%, 85%)', | ||
| colorPrimary90: 'hsl(175, 70%, 90%)', | ||
| colorPrimary95: 'hsl(175, 90%, 95%)', | ||
| colorPrimary98: 'hsl(175, 100%, 99%)', | ||
| colorPrimary: 'hsl(240, 64%, 58%)', | ||
| colorPrimary10: 'hsl(240, 66%, 19%)', | ||
| colorPrimary20: 'hsl(240, 45%, 33%)', | ||
| colorPrimary25: 'hsl(240, 46%, 48%)', | ||
| colorPrimary30: 'hsl(240, 46%, 53%)', | ||
| colorPrimary40: 'hsl(240, 100%, 67%)', | ||
| colorPrimary85: 'hsl(244, 100%, 84%)', | ||
| colorPrimary90: 'hsl(243, 100%, 93%)', | ||
| colorPrimary95: 'hsl(244, 100%, 97%)', | ||
| colorPrimary98: 'hsl(244, 100%, 99%)', | ||
| colorAccent: '#213c45', | ||
| colorAccent10: 'hsl(195, 35.2941176471%, 10%)', | ||
| colorAccent20: 'hsl(195, 35.2941176471%, 20%)', | ||
| colorAccent30: 'hsl(195, 35.2941176471%, 30%)', | ||
| colorAccent40: 'hsl(195, 35.2941176471%, 40%)', | ||
| colorAccent50: 'hsl(195, 35%, 50%)', | ||
| colorAccent60: 'hsl(195, 35.2941176471%, 60%)', | ||
| colorAccent85: 'hsl(195, 35%, 85%)', | ||
| colorAccent90: 'hsl(195, 35.2941176471%, 90%)', | ||
| colorAccent95: 'hsl(195, 35.2941176471%, 95%)', | ||
| colorAccent98: 'hsl(195, 35.2941176471%, 98%)', | ||
| colorBrown10: 'hsl(35, 90%, 10%)', | ||
| colorBrown20: 'hsl(35, 50%, 20%)', | ||
| colorBrown35: 'hsl(35, 25%, 35%)', | ||
| colorBrown50: 'hsl(35, 30%, 50%)', | ||
| colorBrown70: 'hsl(35, 40%, 70%)', | ||
| colorBrown85: 'hsl(35, 60%, 85%)', | ||
| colorBrown90: 'hsl(35, 90%, 90%)', | ||
| colorBrown95: 'hsl(35, 80%, 95%)', | ||
| colorBrown98: 'hsl(35, 90%, 98%)', | ||
| colorPurple10: 'hsl(248, 90%, 10%)', | ||
| colorAccent10: 'hsl(195, 100%, 10%)', | ||
| colorAccent20: 'hsl(195, 80%, 20%)', | ||
| colorAccent30: 'hsl(195, 70%, 30%)', | ||
| colorAccent40: 'hsl(195, 70%, 40%)', | ||
| colorAccent50: 'hsl(195, 70%, 50%)', | ||
| colorAccent60: 'hsl(195, 70%, 60%)', | ||
| colorAccent85: 'hsl(195, 85%, 85%)', | ||
| colorAccent90: 'hsl(195, 90%, 90%)', | ||
| colorAccent95: 'hsl(195, 95%, 95%)', | ||
| colorAccent98: 'hsl(195, 100%, 98%)', | ||
| colorBrown10: 'hsl(41, 100%, 10%)', | ||
| colorBrown20: 'hsl(41, 100%, 20%)', | ||
| colorBrown35: 'hsl(41, 96%, 35%)', | ||
| colorBrown50: 'hsl(41, 95%, 44%)', | ||
| colorBrown70: 'hsl(47, 95%, 70%)', | ||
| colorBrown85: 'hsl(47, 100%, 85%)', | ||
| colorBrown90: 'hsl(47, 100%, 90%)', | ||
| colorBrown95: 'hsl(47, 100%, 95%)', | ||
| colorBrown98: 'hsl(48, 100%, 97%)', | ||
| colorPurple10: 'hsl(248, 88%, 10%)', | ||
| colorPurple20: 'hsl(248, 50%, 20%)', | ||
| colorPurple35: 'hsl(248, 25%, 35%)', | ||
| colorPurple50: 'hsl(248, 30%,50%)', | ||
| colorPurple70: 'hsl(248, 40%, 70%)', | ||
| colorPurple85: 'hsl(248, 60%, 85%)', | ||
| colorPurple90: 'hsl(248, 50%, 90%)', | ||
| colorPurple95: 'hsl(248, 80%, 95%)', | ||
| colorPurple98: 'hsl(248, 90%, 98%)', | ||
| colorTurquoise10: 'hsl(180, 90%, 10%)', | ||
| colorTurquoise20: 'hsl(180, 50%, 20%)', | ||
| colorTurquoise35: 'hsl(180, 25%, 35%)', | ||
| colorTurquoise50: 'hsl(180, 30%, 45%)', | ||
| colorTurquoise70: 'hsl(180, 40%, 70%)', | ||
| colorTurquoise85: 'hsl(180, 60%, 85%)', | ||
| colorTurquoise90: 'hsl(180, 40%, 90%)', | ||
| colorTurquoise95: 'hsl(180, 80%, 95%)', | ||
| colorTurquoise98: 'hsl(180, 90%, 98%)', | ||
| colorPurple50: 'hsl(248, 64%, 58%)', | ||
| colorPurple70: 'hsl(248, 80%, 70%)', | ||
| colorPurple85: 'hsl(249, 100%, 85%)', | ||
| colorPurple90: 'hsl(248, 100%, 90%)', | ||
| colorPurple95: 'hsl(248, 100%, 95%)', | ||
| colorPurple98: 'hsl(246, 100%, 98%)', | ||
| colorTurquoise10: 'hsl(180, 88%, 10%)', | ||
| colorTurquoise20: 'hsl(180, 90%, 20%)', | ||
| colorTurquoise35: 'hsl(178, 88%, 35%)', | ||
| colorTurquoise50: 'hsl(178, 67%, 50%)', | ||
| colorTurquoise70: 'hsl(180, 75%, 70%)', | ||
| colorTurquoise85: 'hsl(180, 90%, 85%)', | ||
| colorTurquoise90: 'hsl(180, 88%, 90%)', | ||
| colorTurquoise95: 'hsl(180, 88%, 95%)', | ||
| colorTurquoise98: 'hsl(180, 100%, 98%)', | ||
| colorNeutral: 'hsl(232, 18%, 80%)', | ||
@@ -96,13 +96,13 @@ colorNeutral05: 'hsl(0deg 0% 80% / 5%)', | ||
| colorInfo95: 'hsl(203.05555555555554, 93.9130434783%, 95%)', | ||
| colorWarning: '#f16d0e', | ||
| colorWarning25: 'hsl(25.110132158590307, 89.0196078431%, 25%)', | ||
| colorWarning40: 'hsl(25.110132158590307, 89.0196078431%, 40%)', | ||
| colorWarning60: 'hsl(25.110132158590307, 90%, 60%)', | ||
| colorWarning85: 'hsl(25.110132158590307, 89.0196078431%, 85%)', | ||
| colorWarning95: 'hsl(25.110132158590307, 89.0196078431%, 95%)', | ||
| colorError: '#e60050', | ||
| colorError25: 'hsl(339.1304347826087, 100%, 25%)', | ||
| colorError40: 'hsl(339.1304347826087, 100%, 40%)', | ||
| colorError85: 'hsl(339.1304347826087, 100%, 85%)', | ||
| colorError95: 'hsl(339.1304347826087, 100%, 95%)', | ||
| colorWarning: 'hsl(35, 90%, 45%)', | ||
| colorWarning25: 'hsl(33, 83%, 25%)', | ||
| colorWarning40: 'hsl(33, 80%, 34%)', | ||
| colorWarning60: 'hsl(35, 90%, 55%)', | ||
| colorWarning85: 'hsl(33, 90%, 80%)', | ||
| colorWarning95: 'hsl(45, 100%, 92%)', | ||
| colorError: 'hsl(3, 65%, 58%)', | ||
| colorError25: 'hsl(4, 69%, 37%)', | ||
| colorError40: 'hsl(3, 60%, 46%)', | ||
| colorError85: 'hsl(1, 55%, 74%)', | ||
| colorError95: 'hsl(349, 66%, 92%)', | ||
| colorSolid: '#1a1a1a', | ||
@@ -216,90 +216,32 @@ colorSolid02: 'hsl(0deg 0% 10% / 2%)', | ||
| breakPointJumbodesktop: '1920px', | ||
| backgroundColorForButtonWhenActive: 'hsl(232, 18%, 95%)', | ||
| backgroundColorForButtonWhenHovered: 'hsl(232, 18%, 98%)', | ||
| backgroundColorForButtonWhenDisabled: 'hsl(195, 35.2941176471%, 95%)', | ||
| backgroundColorForIconButtonWhenDisabled: 'hsl(195, 35.2941176471%, 95%)', | ||
| backgroundColorForInput: '#fff', | ||
| backgroundColorForInputWhenSelected: 'hsl(195, 35.2941176471%, 95%)', | ||
| backgroundColorForInputWhenDisabled: 'hsl(232, 18%, 95%)', | ||
| backgroundColorForInputWhenHovered: 'hsl(232, 18%, 98%)', | ||
| backgroundColorForInputWhenFocused: '#fff', | ||
| backgroundColorForInputWhenReadonly: 'hsl(232, 18%, 95%)', | ||
| backgroundColorForInputWhenActive: 'hsl(203.05555555555554, 93.9130434783%, 95%)', | ||
| backgroundColorForInputAsQuiet: 'transparent', | ||
| backgroundColorForInputAsQuietWhenHovered: 'hsl(0deg 0% 10% / 2%)', | ||
| backgroundColorForInputWhenHovered: 'hsl(244, 100%, 99%)', | ||
| backgroundColorForLocalizedInputLabel: '#fff', | ||
| backgroundColorForLocalizedInputLabelWhenReadonly: 'hsl(232, 18%, 95%)', | ||
| backgroundColorForLocalizedInputLabelWhenDisabled: 'hsl(232, 18%, 95%)', | ||
| backgroundColorForButtonAsPrimary: '#15a390', | ||
| backgroundColorForButtonAsPrimaryWhenHovered: 'hsl(175, 55%, 45%)', | ||
| backgroundColorForButtonAsPrimaryAsDefaultWhenHovered: '#17ab97', | ||
| backgroundColorForButtonAsPrimaryAsDefaultWhenActive: '#15a390', | ||
| backgroundColorForButtonAsPrimaryAsUrgent: '#f16d0e', | ||
| backgroundColorForStampAsPrimary: 'hsl(175, 70%, 90%)', | ||
| backgroundColorForStampAsPositive: 'hsl(175, 70%, 90%)', | ||
| backgroundColorForToggleThumbWhenActive: 'hsl(175, 55%, 25%)', | ||
| backgroundColorForToggleTrackWhenActive: 'hsl(175, 55%, 40%)', | ||
| backgroundColorForToggleThumbWhenDisabled: 'hsl(195, 35.2941176471%, 60%)', | ||
| backgroundColorForToggleTrackWhenDisabled: 'hsl(195, 35.2941176471%, 90%)', | ||
| backgroundColorForToggleThumbWhenActiveWhenDisabled: 'hsl(232, 18%, 60%)', | ||
| backgroundColorForToggleTrackWhenActiveWhenDisabled: 'hsl(232, 18%, 90%)', | ||
| backgroundColorForToggleThumbWhenHovered: 'rgba(0, 0, 0, 0.1)', | ||
| backgroundColorForLoadingSpinnerTrack: '#213c45', | ||
| backgroundColorForLoadingSpinnerDot: '#213c45', | ||
| backgroundColorForContentNotificationWhenSuccess: 'hsl(175, 90%, 95%)', | ||
| backgroundColorForViewSwitcherButtonWhenActive: 'hsl(232, 18%, 95%)', | ||
| backgroundColorForCheckboxInputWhenHovered: 'hsl(232, 18%, 90%)', | ||
| backgroundColorForRadioOptionWhenHovered: 'hsl(232, 18%, 90%)', | ||
| backgroundColorForTag: 'hsl(232, 18%, 95%)', | ||
| backgroundColorForTagWhenHovered: 'hsl(232, 18%, 90%)', | ||
| backgroundColorForDropdownWhenHovered: 'hsl(232, 18%, 95%)', | ||
| backgroundColorForDropdownWhenActive: 'hsl(232, 18%, 90%)', | ||
| backgroundColorForDropdownOptionWhenActive: 'hsl(203.05555555555554, 93.9130434783%, 95%)', | ||
| backgroundColorForButtonWhenActive: 'hsl(243, 100%, 93%)', | ||
| backgroundColorForButtonWhenHovered: 'hsl(244, 100%, 97%)', | ||
| backgroundColorForButtonWhenDisabled: 'hsl(232, 18%, 95%)', | ||
| borderColorForInput: 'hsl(232, 18%, 80%)', | ||
| borderColorForInputWhenFocused: 'hsl(175, 55%, 45%)', | ||
| borderColorForInputWhenDisabled: 'hsl(232, 18%, 80%)', | ||
| borderColorForInputWhenReadonly: '#fff', | ||
| borderColorForInputWhenError: '#e60050', | ||
| borderColorForInputWhenWarning: '#f16d0e', | ||
| borderColorForInputWhenError: 'hsl(3, 65%, 58%)', | ||
| borderColorForInputWhenWarning: 'hsl(35, 90%, 45%)', | ||
| borderColorForInputWhenHovered: 'hsl(232, 18%, 80%)', | ||
| borderColorForInputAsQuiet: 'transparent', | ||
| borderColorForButtonAsSecondary: 'hsl(232, 18%, 80%)', | ||
| borderColorForDropdown: 'hsl(232, 18%, 80%)', | ||
| borderColorForContentNotificationWhenSuccess: 'hsl(175, 70%, 85%)', | ||
| borderColorForCheckboxInput: 'hsl(175, 55%, 45%)', | ||
| borderColorForCheckboxInputWhenActive: 'hsl(175, 55%, 45%)', | ||
| borderColorForTag: 'hsl(232, 18%, 85%)', | ||
| borderRadiusForButtonAsBig: '4px', | ||
| borderRadiusForButtonAsMedium: '4px', | ||
| borderColorForInputWhenFocused: 'hsl(240, 100%, 67%)', | ||
| borderColorForButtonAsSecondary: 'hsl(244, 100%, 84%)', | ||
| borderRadiusForInput: '4px', | ||
| borderWidthForInput: '1px', | ||
| borderWidthForInputWhenWarning: '1px', | ||
| borderWidthForInputWhenError: '1px', | ||
| borderWidthForInputWhenFocused: '1px', | ||
| fontColorForInput: '#1a1a1a', | ||
| fontColorForInputWhenDisabled: 'hsl(232, 18%, 60%)', | ||
| fontColorForInputWhenError: '#e60050', | ||
| fontColorForInputWhenError: 'hsl(3, 60%, 46%)', | ||
| fontColorForInputWhenReadonly: 'hsl(232, 18%, 40%)', | ||
| fontColorForInputWhenWarning: '#f16d0e', | ||
| fontColorForButtonAsSecondary: '#1a1a1a', | ||
| fontColorForButtonAsFlatWhenHovered: 'hsl(175, 55%, 45%)', | ||
| fontColorForButtonAsFlatAsCritical: '#e60050', | ||
| fontColorForButtonAsFlatAsCriticalWhenHovered: 'hsl(339.1304347826087, 100%, 25%)', | ||
| fontColorForViewSwitcherButton: 'hsl(232, 18%, 40%)', | ||
| fontColorForStampAsPositive: 'hsl(175, 55%, 25%)', | ||
| fontColorForContentNotificationWhenSuccess: 'hsl(175, 55%, 45%)', | ||
| fontColorForAvatarAsTurquoise: 'hsl(180, 30%, 45%)', | ||
| fontColorForLeadingIconAsTurquoise: 'hsl(180, 30%, 45%)', | ||
| fontColorForTextAsPositive: 'hsl(175, 55%, 25%)', | ||
| fontColorForInputWhenWarning: 'hsl(35, 90%, 45%)', | ||
| fontColorForButtonAsSecondary: 'hsl(240, 64%, 58%)', | ||
| heightForButtonAsBig: '40px', | ||
| heightForButtonAsSmall: '16px', | ||
| heightForButtonAsMedium: '32px', | ||
| heightForButtonAsSmall: '16px', | ||
| heightForInput: '40px', | ||
| heightForInputAsSmall: '32px', | ||
| placeholderFontColorForInput: 'hsl(232, 18%, 60%)', | ||
| fontSizeForButton: '0.875rem', | ||
| fontSizeForInput: '1rem', | ||
| paddingForInput: '0 var(--spacing-30)', | ||
| paddingForInputAsQuiet: '0 var(--spacing-20)', | ||
| paddingForButton: '0 var(--spacing-30)', | ||
| shadowForInput: 'none', | ||
@@ -309,168 +251,53 @@ shadowForInputWhenFocused: 'inset 0 0 0 1px var(--color-primary)', | ||
| shadowForInputWhenWarning: 'inset 0 0 0 1px var(--color-warning)' | ||
| }, | ||
| recolouring: { | ||
| colorPrimary: 'hsl(240, 64%, 58%)', | ||
| colorPrimary10: 'hsl(240, 66%, 19%)', | ||
| colorPrimary20: 'hsl(240, 45%, 33%)', | ||
| colorPrimary25: 'hsl(240, 46%, 48%)', | ||
| colorPrimary30: 'hsl(240, 46%, 53%)', | ||
| colorPrimary40: 'hsl(240, 100%, 67%)', | ||
| colorPrimary85: 'hsl(244, 100%, 84%)', | ||
| colorPrimary90: 'hsl(243, 100%, 93%)', | ||
| colorPrimary95: 'hsl(244, 100%, 97%)', | ||
| colorPrimary98: 'hsl(244, 100%, 99%)', | ||
| colorAccent10: 'hsl(195, 100%, 10%)', | ||
| colorAccent20: 'hsl(195, 80%, 20%)', | ||
| colorAccent30: 'hsl(195, 70%, 30%)', | ||
| colorAccent40: 'hsl(195, 70%, 40%)', | ||
| colorAccent50: 'hsl(195, 70%, 50%)', | ||
| colorAccent60: 'hsl(195, 70%, 60%)', | ||
| colorAccent85: 'hsl(195, 85%, 85%)', | ||
| colorAccent90: 'hsl(195, 90%, 90%)', | ||
| colorAccent95: 'hsl(195, 95%, 95%)', | ||
| colorAccent98: 'hsl(195, 100%, 98%)', | ||
| colorBrown10: 'hsl(41, 100%, 10%)', | ||
| colorBrown20: 'hsl(41, 100%, 20%)', | ||
| colorBrown35: 'hsl(41, 96%, 35%)', | ||
| colorBrown50: 'hsl(41, 95%, 44%)', | ||
| colorBrown70: 'hsl(47, 95%, 70%)', | ||
| colorBrown85: 'hsl(47, 100%, 85%)', | ||
| colorBrown90: 'hsl(47, 100%, 90%)', | ||
| colorBrown95: 'hsl(47, 100%, 95%)', | ||
| colorBrown98: 'hsl(48, 100%, 97%)', | ||
| colorPurple10: 'hsl(248, 88%, 10%)', | ||
| colorPurple20: 'hsl(248, 50%, 20%)', | ||
| colorPurple35: 'hsl(248, 25%, 35%)', | ||
| colorPurple50: 'hsl(248, 64%, 58%)', | ||
| colorPurple70: 'hsl(248, 80%, 70%)', | ||
| colorPurple85: 'hsl(249, 100%, 85%)', | ||
| colorPurple90: 'hsl(248, 100%, 90%)', | ||
| colorPurple95: 'hsl(248, 100%, 95%)', | ||
| colorPurple98: 'hsl(246, 100%, 98%)', | ||
| colorTurquoise10: 'hsl(180, 88%, 10%)', | ||
| colorTurquoise20: 'hsl(180, 90%, 20%)', | ||
| colorTurquoise35: 'hsl(178, 88%, 35%)', | ||
| colorTurquoise50: 'hsl(178, 67%, 50%)', | ||
| colorTurquoise70: 'hsl(180, 75%, 70%)', | ||
| colorTurquoise85: 'hsl(180, 90%, 85%)', | ||
| colorTurquoise90: 'hsl(180, 88%, 90%)', | ||
| colorTurquoise95: 'hsl(180, 88%, 95%)', | ||
| colorTurquoise98: 'hsl(180, 100%, 98%)', | ||
| colorSuccess: 'hsl(152, 77%, 39%)', | ||
| colorSuccess25: 'hsl(155, 84%, 20%)', | ||
| colorSuccess40: 'hsl(155, 90%, 24%)', | ||
| colorSuccess85: 'hsl(144, 69%, 80%)', | ||
| colorSuccess95: 'hsl(141, 76%, 92%)', | ||
| colorWarning: 'hsl(35, 90%, 45%)', | ||
| colorWarning25: 'hsl(33, 83%, 25%)', | ||
| colorWarning40: 'hsl(33, 80%, 34%)', | ||
| colorWarning60: 'hsl(35, 90%, 55%)', | ||
| colorWarning85: 'hsl(33, 90%, 80%)', | ||
| colorWarning95: 'hsl(45, 100%, 92%)', | ||
| colorError: 'hsl(3, 65%, 58%)', | ||
| colorError25: 'hsl(4, 69%, 37%)', | ||
| colorError40: 'hsl(3, 60%, 46%)', | ||
| colorError85: 'hsl(1, 55%, 74%)', | ||
| colorError95: 'hsl(349, 66%, 92%)', | ||
| borderColorForButtonAsSecondary: 'hsl(244, 100%, 84%)', | ||
| borderColorForDropdown: 'hsl(244, 100%, 84%)', | ||
| borderColorForInputWhenFocused: 'hsl(240, 100%, 67%)', | ||
| borderColorForContentNotificationWhenSuccess: 'hsl(144, 69%, 80%)', | ||
| borderColorForCheckboxInput: 'hsl(232, 18%, 60%)', | ||
| borderColorForCheckboxInputWhenActive: 'hsl(240, 64%, 58%)', | ||
| borderColorForTag: 'hsl(243, 100%, 93%)', | ||
| backgroundColorForButtonWhenActive: 'hsl(243, 100%, 93%)', | ||
| backgroundColorForButtonWhenHovered: 'hsl(244, 100%, 97%)', | ||
| backgroundColorForIconButtonWhenDisabled: 'transparent', | ||
| backgroundColorForButtonAsPrimary: 'hsl(240, 64%, 58%)', | ||
| backgroundColorForButtonAsPrimaryWhenHovered: 'hsl(240, 100%, 67%)', | ||
| backgroundColorForButtonAsPrimaryAsDefaultWhenHovered: 'hsl(240, 100%, 67%)', | ||
| backgroundColorForButtonAsPrimaryAsDefaultWhenActive: 'hsl(240, 46%, 48%)', | ||
| backgroundColorForButtonAsPrimaryAsUrgent: 'hsl(35, 90%, 55%)', | ||
| backgroundColorForInputWhenSelected: 'hsl(244, 100%, 97%)', | ||
| backgroundColorForStampAsPrimary: 'hsl(244, 100%, 97%)', | ||
| backgroundColorForStampAsPositive: 'hsl(141, 76%, 92%)', | ||
| backgroundColorForToggleThumbWhenActive: 'hsl(240, 100%, 67%)', | ||
| backgroundColorForToggleTrackWhenActive: 'hsl(244, 100%, 84%)', | ||
| backgroundColorForToggleThumbWhenDisabled: 'hsl(232, 18%, 60%)', | ||
| backgroundColorForToggleTrackWhenDisabled: 'hsl(232, 18%, 90%)', | ||
| backgroundColorForToggleThumbWhenActiveWhenDisabled: 'hsl(244, 100%, 84%)', | ||
| backgroundColorForToggleTrackWhenActiveWhenDisabled: 'hsl(243, 100%, 93%)', | ||
| backgroundColorForToggleThumbWhenHovered: 'hsla(240, 64%, 58%, 4%)', | ||
| backgroundColorForLoadingSpinnerTrack: 'hsl(243, 100%, 93%)', | ||
| backgroundColorForLoadingSpinnerDot: 'hsl(240, 64%, 58%)', | ||
| backgroundColorForContentNotificationWhenSuccess: 'hsl(141, 76%, 92%)', | ||
| backgroundColorForViewSwitcherButtonWhenActive: 'hsl(244, 100%, 97%)', | ||
| backgroundColorForCheckboxInputWhenHovered: 'hsl(244, 100%, 97%)', | ||
| backgroundColorForRadioOptionWhenHovered: 'hsl(244, 100%, 97%)', | ||
| backgroundColorForTag: 'hsl(244, 100%, 97%)', | ||
| backgroundColorForTagWhenHovered: 'hsl(243, 100%, 93%)', | ||
| backgroundColorForDropdownWhenHovered: 'hsl(244, 100%, 97%)', | ||
| backgroundColorForDropdownWhenActive: 'hsl(243, 100%, 93%)', | ||
| backgroundColorForDropdownOptionWhenActive: 'hsl(244, 100%, 97%)', | ||
| backgroundColorForInputAsQuietWhenHovered: 'hsla(240, 64%, 58%, 4%)', | ||
| backgroundColorForInputWhenActive: 'hsl(244, 100%, 97%)', | ||
| backgroundColorForInputWhenHovered: 'hsl(244, 100%, 99%)', | ||
| fontColorForButtonAsSecondary: 'hsl(240, 64%, 58%)', | ||
| fontColorForButtonAsFlatWhenHovered: 'hsl(240, 100%, 67%)', | ||
| fontColorForButtonAsFlatAsCritical: 'hsl(3, 60%, 46%)', | ||
| fontColorForButtonAsFlatAsCriticalWhenHovered: 'hsl(3, 65%, 58%)', | ||
| fontColorForViewSwitcherButton: 'hsl(240, 64%, 58%)', | ||
| fontColorForInputWhenError: 'hsl(3, 60%, 46%)', | ||
| fontColorForStampAsPositive: 'hsl(155, 90%, 24%)', | ||
| fontColorForContentNotificationWhenSuccess: 'hsl(152, 77%, 39%)', | ||
| fontColorForAvatarAsTurquoise: 'hsl(178, 88%, 35%)', | ||
| fontColorForLeadingIconAsTurquoise: 'hsl(178, 88%, 35%)', | ||
| fontColorForTextAsPositive: 'hsl(155, 90%, 24%)' | ||
| } | ||
| }; | ||
| const designTokens = { | ||
| colorPrimary: 'var(--color-primary, hsl(175, 55%, 45%))', | ||
| colorPrimary10: 'var(--color-primary-10, hsl(175, 55%, 10%))', | ||
| colorPrimary20: 'var(--color-primary-20, hsl(175, 55%, 20%))', | ||
| colorPrimary25: 'var(--color-primary-25, hsl(175, 55%, 25%))', | ||
| colorPrimary30: 'var(--color-primary-30, hsl(175, 55%, 30%))', | ||
| colorPrimary40: 'var(--color-primary-40, hsl(175, 55%, 40%))', | ||
| colorPrimary85: 'var(--color-primary-85, hsl(175, 70%, 85%))', | ||
| colorPrimary90: 'var(--color-primary-90, hsl(175, 70%, 90%))', | ||
| colorPrimary95: 'var(--color-primary-95, hsl(175, 90%, 95%))', | ||
| colorPrimary98: 'var(--color-primary-98, hsl(175, 100%, 99%))', | ||
| colorPrimary: 'var(--color-primary, hsl(240, 64%, 58%))', | ||
| colorPrimary10: 'var(--color-primary-10, hsl(240, 66%, 19%))', | ||
| colorPrimary20: 'var(--color-primary-20, hsl(240, 45%, 33%))', | ||
| colorPrimary25: 'var(--color-primary-25, hsl(240, 46%, 48%))', | ||
| colorPrimary30: 'var(--color-primary-30, hsl(240, 46%, 53%))', | ||
| colorPrimary40: 'var(--color-primary-40, hsl(240, 100%, 67%))', | ||
| colorPrimary85: 'var(--color-primary-85, hsl(244, 100%, 84%))', | ||
| colorPrimary90: 'var(--color-primary-90, hsl(243, 100%, 93%))', | ||
| colorPrimary95: 'var(--color-primary-95, hsl(244, 100%, 97%))', | ||
| colorPrimary98: 'var(--color-primary-98, hsl(244, 100%, 99%))', | ||
| colorAccent: 'var(--color-accent, #213c45)', | ||
| colorAccent10: 'var(--color-accent-10, hsl(195, 35.2941176471%, 10%))', | ||
| colorAccent20: 'var(--color-accent-20, hsl(195, 35.2941176471%, 20%))', | ||
| colorAccent30: 'var(--color-accent-30, hsl(195, 35.2941176471%, 30%))', | ||
| colorAccent40: 'var(--color-accent-40, hsl(195, 35.2941176471%, 40%))', | ||
| colorAccent50: 'var(--color-accent-50, hsl(195, 35%, 50%))', | ||
| colorAccent60: 'var(--color-accent-60, hsl(195, 35.2941176471%, 60%))', | ||
| colorAccent85: 'var(--color-accent-85, hsl(195, 35%, 85%))', | ||
| colorAccent90: 'var(--color-accent-90, hsl(195, 35.2941176471%, 90%))', | ||
| colorAccent95: 'var(--color-accent-95, hsl(195, 35.2941176471%, 95%))', | ||
| colorAccent98: 'var(--color-accent-98, hsl(195, 35.2941176471%, 98%))', | ||
| colorBrown10: 'var(--color-brown-10, hsl(35, 90%, 10%))', | ||
| colorBrown20: 'var(--color-brown-20, hsl(35, 50%, 20%))', | ||
| colorBrown35: 'var(--color-brown-35, hsl(35, 25%, 35%))', | ||
| colorBrown50: 'var(--color-brown-50, hsl(35, 30%, 50%))', | ||
| colorBrown70: 'var(--color-brown-70, hsl(35, 40%, 70%))', | ||
| colorBrown85: 'var(--color-brown-85, hsl(35, 60%, 85%))', | ||
| colorBrown90: 'var(--color-brown-90, hsl(35, 90%, 90%))', | ||
| colorBrown95: 'var(--color-brown-95, hsl(35, 80%, 95%))', | ||
| colorBrown98: 'var(--color-brown-98, hsl(35, 90%, 98%))', | ||
| colorPurple10: 'var(--color-purple-10, hsl(248, 90%, 10%))', | ||
| colorAccent10: 'var(--color-accent-10, hsl(195, 100%, 10%))', | ||
| colorAccent20: 'var(--color-accent-20, hsl(195, 80%, 20%))', | ||
| colorAccent30: 'var(--color-accent-30, hsl(195, 70%, 30%))', | ||
| colorAccent40: 'var(--color-accent-40, hsl(195, 70%, 40%))', | ||
| colorAccent50: 'var(--color-accent-50, hsl(195, 70%, 50%))', | ||
| colorAccent60: 'var(--color-accent-60, hsl(195, 70%, 60%))', | ||
| colorAccent85: 'var(--color-accent-85, hsl(195, 85%, 85%))', | ||
| colorAccent90: 'var(--color-accent-90, hsl(195, 90%, 90%))', | ||
| colorAccent95: 'var(--color-accent-95, hsl(195, 95%, 95%))', | ||
| colorAccent98: 'var(--color-accent-98, hsl(195, 100%, 98%))', | ||
| colorBrown10: 'var(--color-brown-10, hsl(41, 100%, 10%))', | ||
| colorBrown20: 'var(--color-brown-20, hsl(41, 100%, 20%))', | ||
| colorBrown35: 'var(--color-brown-35, hsl(41, 96%, 35%))', | ||
| colorBrown50: 'var(--color-brown-50, hsl(41, 95%, 44%))', | ||
| colorBrown70: 'var(--color-brown-70, hsl(47, 95%, 70%))', | ||
| colorBrown85: 'var(--color-brown-85, hsl(47, 100%, 85%))', | ||
| colorBrown90: 'var(--color-brown-90, hsl(47, 100%, 90%))', | ||
| colorBrown95: 'var(--color-brown-95, hsl(47, 100%, 95%))', | ||
| colorBrown98: 'var(--color-brown-98, hsl(48, 100%, 97%))', | ||
| colorPurple10: 'var(--color-purple-10, hsl(248, 88%, 10%))', | ||
| colorPurple20: 'var(--color-purple-20, hsl(248, 50%, 20%))', | ||
| colorPurple35: 'var(--color-purple-35, hsl(248, 25%, 35%))', | ||
| colorPurple50: 'var(--color-purple-50, hsl(248, 30%,50%))', | ||
| colorPurple70: 'var(--color-purple-70, hsl(248, 40%, 70%))', | ||
| colorPurple85: 'var(--color-purple-85, hsl(248, 60%, 85%))', | ||
| colorPurple90: 'var(--color-purple-90, hsl(248, 50%, 90%))', | ||
| colorPurple95: 'var(--color-purple-95, hsl(248, 80%, 95%))', | ||
| colorPurple98: 'var(--color-purple-98, hsl(248, 90%, 98%))', | ||
| colorTurquoise10: 'var(--color-turquoise-10, hsl(180, 90%, 10%))', | ||
| colorTurquoise20: 'var(--color-turquoise-20, hsl(180, 50%, 20%))', | ||
| colorTurquoise35: 'var(--color-turquoise-35, hsl(180, 25%, 35%))', | ||
| colorTurquoise50: 'var(--color-turquoise-50, hsl(180, 30%, 45%))', | ||
| colorTurquoise70: 'var(--color-turquoise-70, hsl(180, 40%, 70%))', | ||
| colorTurquoise85: 'var(--color-turquoise-85, hsl(180, 60%, 85%))', | ||
| colorTurquoise90: 'var(--color-turquoise-90, hsl(180, 40%, 90%))', | ||
| colorTurquoise95: 'var(--color-turquoise-95, hsl(180, 80%, 95%))', | ||
| colorTurquoise98: 'var(--color-turquoise-98, hsl(180, 90%, 98%))', | ||
| colorPurple50: 'var(--color-purple-50, hsl(248, 64%, 58%))', | ||
| colorPurple70: 'var(--color-purple-70, hsl(248, 80%, 70%))', | ||
| colorPurple85: 'var(--color-purple-85, hsl(249, 100%, 85%))', | ||
| colorPurple90: 'var(--color-purple-90, hsl(248, 100%, 90%))', | ||
| colorPurple95: 'var(--color-purple-95, hsl(248, 100%, 95%))', | ||
| colorPurple98: 'var(--color-purple-98, hsl(246, 100%, 98%))', | ||
| colorTurquoise10: 'var(--color-turquoise-10, hsl(180, 88%, 10%))', | ||
| colorTurquoise20: 'var(--color-turquoise-20, hsl(180, 90%, 20%))', | ||
| colorTurquoise35: 'var(--color-turquoise-35, hsl(178, 88%, 35%))', | ||
| colorTurquoise50: 'var(--color-turquoise-50, hsl(178, 67%, 50%))', | ||
| colorTurquoise70: 'var(--color-turquoise-70, hsl(180, 75%, 70%))', | ||
| colorTurquoise85: 'var(--color-turquoise-85, hsl(180, 90%, 85%))', | ||
| colorTurquoise90: 'var(--color-turquoise-90, hsl(180, 88%, 90%))', | ||
| colorTurquoise95: 'var(--color-turquoise-95, hsl(180, 88%, 95%))', | ||
| colorTurquoise98: 'var(--color-turquoise-98, hsl(180, 100%, 98%))', | ||
| colorNeutral: 'var(--color-neutral, hsl(232, 18%, 80%))', | ||
@@ -491,13 +318,13 @@ colorNeutral05: 'var(--color-neutral-05, hsl(0deg 0% 80% / 5%))', | ||
| colorInfo95: 'var(--color-info-95, hsl(203.05555555555554, 93.9130434783%, 95%))', | ||
| colorWarning: 'var(--color-warning, #f16d0e)', | ||
| colorWarning25: 'var(--color-warning-25, hsl(25.110132158590307, 89.0196078431%, 25%))', | ||
| colorWarning40: 'var(--color-warning-40, hsl(25.110132158590307, 89.0196078431%, 40%))', | ||
| colorWarning60: 'var(--color-warning-60, hsl(25.110132158590307, 90%, 60%))', | ||
| colorWarning85: 'var(--color-warning-85, hsl(25.110132158590307, 89.0196078431%, 85%))', | ||
| colorWarning95: 'var(--color-warning-95, hsl(25.110132158590307, 89.0196078431%, 95%))', | ||
| colorError: 'var(--color-error, #e60050)', | ||
| colorError25: 'var(--color-error-25, hsl(339.1304347826087, 100%, 25%))', | ||
| colorError40: 'var(--color-error-40, hsl(339.1304347826087, 100%, 40%))', | ||
| colorError85: 'var(--color-error-85, hsl(339.1304347826087, 100%, 85%))', | ||
| colorError95: 'var(--color-error-95, hsl(339.1304347826087, 100%, 95%))', | ||
| colorWarning: 'var(--color-warning, hsl(35, 90%, 45%))', | ||
| colorWarning25: 'var(--color-warning-25, hsl(33, 83%, 25%))', | ||
| colorWarning40: 'var(--color-warning-40, hsl(33, 80%, 34%))', | ||
| colorWarning60: 'var(--color-warning-60, hsl(35, 90%, 55%))', | ||
| colorWarning85: 'var(--color-warning-85, hsl(33, 90%, 80%))', | ||
| colorWarning95: 'var(--color-warning-95, hsl(45, 100%, 92%))', | ||
| colorError: 'var(--color-error, hsl(3, 65%, 58%))', | ||
| colorError25: 'var(--color-error-25, hsl(4, 69%, 37%))', | ||
| colorError40: 'var(--color-error-40, hsl(3, 60%, 46%))', | ||
| colorError85: 'var(--color-error-85, hsl(1, 55%, 74%))', | ||
| colorError95: 'var(--color-error-95, hsl(349, 66%, 92%))', | ||
| colorSolid: 'var(--color-solid, #1a1a1a)', | ||
@@ -611,90 +438,32 @@ colorSolid02: 'var(--color-solid-02, hsl(0deg 0% 10% / 2%))', | ||
| breakPointJumbodesktop: 'var(--break-point-jumbodesktop, 1920px)', | ||
| backgroundColorForButtonWhenActive: 'var(--background-color-for-button-when-active, hsl(232, 18%, 95%))', | ||
| backgroundColorForButtonWhenHovered: 'var(--background-color-for-button-when-hovered, hsl(232, 18%, 98%))', | ||
| backgroundColorForButtonWhenDisabled: 'var(--background-color-for-button-when-disabled, hsl(195, 35.2941176471%, 95%))', | ||
| backgroundColorForIconButtonWhenDisabled: 'var(--background-color-for-icon-button-when-disabled, hsl(195, 35.2941176471%, 95%))', | ||
| backgroundColorForInput: 'var(--background-color-for-input, #fff)', | ||
| backgroundColorForInputWhenSelected: 'var(--background-color-for-input-when-selected, hsl(195, 35.2941176471%, 95%))', | ||
| backgroundColorForInputWhenDisabled: 'var(--background-color-for-input-when-disabled, hsl(232, 18%, 95%))', | ||
| backgroundColorForInputWhenHovered: 'var(--background-color-for-input-when-hovered, hsl(232, 18%, 98%))', | ||
| backgroundColorForInputWhenFocused: 'var(--background-color-for-input-when-focused, #fff)', | ||
| backgroundColorForInputWhenReadonly: 'var(--background-color-for-input-when-readonly, hsl(232, 18%, 95%))', | ||
| backgroundColorForInputWhenActive: 'var(--background-color-for-input-when-active, hsl(203.05555555555554, 93.9130434783%, 95%))', | ||
| backgroundColorForInputAsQuiet: 'var(--background-color-for-input-as-quiet, transparent)', | ||
| backgroundColorForInputAsQuietWhenHovered: 'var(--background-color-for-input-as-quiet-when-hovered, hsl(0deg 0% 10% / 2%))', | ||
| backgroundColorForInputWhenHovered: 'var(--background-color-for-input-when-hovered, hsl(244, 100%, 99%))', | ||
| backgroundColorForLocalizedInputLabel: 'var(--background-color-for-localized-input-label, #fff)', | ||
| backgroundColorForLocalizedInputLabelWhenReadonly: 'var(--background-color-for-localized-input-label-when-readonly, hsl(232, 18%, 95%))', | ||
| backgroundColorForLocalizedInputLabelWhenDisabled: 'var(--background-color-for-localized-input-label-when-disabled, hsl(232, 18%, 95%))', | ||
| backgroundColorForButtonAsPrimary: 'var(--background-color-for-button-as-primary, #15a390)', | ||
| backgroundColorForButtonAsPrimaryWhenHovered: 'var(--background-color-for-button-as-primary-when-hovered, hsl(175, 55%, 45%))', | ||
| backgroundColorForButtonAsPrimaryAsDefaultWhenHovered: 'var(--background-color-for-button-as-primary-as-default-when-hovered, #17ab97)', | ||
| backgroundColorForButtonAsPrimaryAsDefaultWhenActive: 'var(--background-color-for-button-as-primary-as-default-when-active, #15a390)', | ||
| backgroundColorForButtonAsPrimaryAsUrgent: 'var(--background-color-for-button-as-primary-as-urgent, #f16d0e)', | ||
| backgroundColorForStampAsPrimary: 'var(--background-color-for-stamp-as-primary, hsl(175, 70%, 90%))', | ||
| backgroundColorForStampAsPositive: 'var(--background-color-for-stamp-as-positive, hsl(175, 70%, 90%))', | ||
| backgroundColorForToggleThumbWhenActive: 'var(--background-color-for-toggle-thumb-when-active, hsl(175, 55%, 25%))', | ||
| backgroundColorForToggleTrackWhenActive: 'var(--background-color-for-toggle-track-when-active, hsl(175, 55%, 40%))', | ||
| backgroundColorForToggleThumbWhenDisabled: 'var(--background-color-for-toggle-thumb-when-disabled, hsl(195, 35.2941176471%, 60%))', | ||
| backgroundColorForToggleTrackWhenDisabled: 'var(--background-color-for-toggle-track-when-disabled, hsl(195, 35.2941176471%, 90%))', | ||
| backgroundColorForToggleThumbWhenActiveWhenDisabled: 'var(--background-color-for-toggle-thumb-when-active-when-disabled, hsl(232, 18%, 60%))', | ||
| backgroundColorForToggleTrackWhenActiveWhenDisabled: 'var(--background-color-for-toggle-track-when-active-when-disabled, hsl(232, 18%, 90%))', | ||
| backgroundColorForToggleThumbWhenHovered: 'var(--background-color-for-toggle-thumb-when-hovered, rgba(0, 0, 0, 0.1))', | ||
| backgroundColorForLoadingSpinnerTrack: 'var(--background-color-for-loading-spinner-track, #213c45)', | ||
| backgroundColorForLoadingSpinnerDot: 'var(--background-color-for-loading-spinner-dot, #213c45)', | ||
| backgroundColorForContentNotificationWhenSuccess: 'var(--background-color-for-content-notification-when-success, hsl(175, 90%, 95%))', | ||
| backgroundColorForViewSwitcherButtonWhenActive: 'var(--background-color-for-view-switcher-button-when-active, hsl(232, 18%, 95%))', | ||
| backgroundColorForCheckboxInputWhenHovered: 'var(--background-color-for-checkbox-input-when-hovered, hsl(232, 18%, 90%))', | ||
| backgroundColorForRadioOptionWhenHovered: 'var(--background-color-for-radio-option-when-hovered, hsl(232, 18%, 90%))', | ||
| backgroundColorForTag: 'var(--background-color-for-tag, hsl(232, 18%, 95%))', | ||
| backgroundColorForTagWhenHovered: 'var(--background-color-for-tag-when-hovered, hsl(232, 18%, 90%))', | ||
| backgroundColorForDropdownWhenHovered: 'var(--background-color-for-dropdown-when-hovered, hsl(232, 18%, 95%))', | ||
| backgroundColorForDropdownWhenActive: 'var(--background-color-for-dropdown-when-active, hsl(232, 18%, 90%))', | ||
| backgroundColorForDropdownOptionWhenActive: 'var(--background-color-for-dropdown-option-when-active, hsl(203.05555555555554, 93.9130434783%, 95%))', | ||
| backgroundColorForButtonWhenActive: 'var(--background-color-for-button-when-active, hsl(243, 100%, 93%))', | ||
| backgroundColorForButtonWhenHovered: 'var(--background-color-for-button-when-hovered, hsl(244, 100%, 97%))', | ||
| backgroundColorForButtonWhenDisabled: 'var(--background-color-for-button-when-disabled, hsl(232, 18%, 95%))', | ||
| borderColorForInput: 'var(--border-color-for-input, hsl(232, 18%, 80%))', | ||
| borderColorForInputWhenFocused: 'var(--border-color-for-input-when-focused, hsl(175, 55%, 45%))', | ||
| borderColorForInputWhenDisabled: 'var(--border-color-for-input-when-disabled, hsl(232, 18%, 80%))', | ||
| borderColorForInputWhenReadonly: 'var(--border-color-for-input-when-readonly, #fff)', | ||
| borderColorForInputWhenError: 'var(--border-color-for-input-when-error, #e60050)', | ||
| borderColorForInputWhenWarning: 'var(--border-color-for-input-when-warning, #f16d0e)', | ||
| borderColorForInputWhenError: 'var(--border-color-for-input-when-error, hsl(3, 65%, 58%))', | ||
| borderColorForInputWhenWarning: 'var(--border-color-for-input-when-warning, hsl(35, 90%, 45%))', | ||
| borderColorForInputWhenHovered: 'var(--border-color-for-input-when-hovered, hsl(232, 18%, 80%))', | ||
| borderColorForInputAsQuiet: 'var(--border-color-for-input-as-quiet, transparent)', | ||
| borderColorForButtonAsSecondary: 'var(--border-color-for-button-as-secondary, hsl(232, 18%, 80%))', | ||
| borderColorForDropdown: 'var(--border-color-for-dropdown, hsl(232, 18%, 80%))', | ||
| borderColorForContentNotificationWhenSuccess: 'var(--border-color-for-content-notification-when-success, hsl(175, 70%, 85%))', | ||
| borderColorForCheckboxInput: 'var(--border-color-for-checkbox-input, hsl(175, 55%, 45%))', | ||
| borderColorForCheckboxInputWhenActive: 'var(--border-color-for-checkbox-input-when-active, hsl(175, 55%, 45%))', | ||
| borderColorForTag: 'var(--border-color-for-tag, hsl(232, 18%, 85%))', | ||
| borderRadiusForButtonAsBig: 'var(--border-radius-for-button-as-big, 4px)', | ||
| borderRadiusForButtonAsMedium: 'var(--border-radius-for-button-as-medium, 4px)', | ||
| borderColorForInputWhenFocused: 'var(--border-color-for-input-when-focused, hsl(240, 100%, 67%))', | ||
| borderColorForButtonAsSecondary: 'var(--border-color-for-button-as-secondary, hsl(244, 100%, 84%))', | ||
| borderRadiusForInput: 'var(--border-radius-for-input, 4px)', | ||
| borderWidthForInput: 'var(--border-width-for-input, 1px)', | ||
| borderWidthForInputWhenWarning: 'var(--border-width-for-input-when-warning, 1px)', | ||
| borderWidthForInputWhenError: 'var(--border-width-for-input-when-error, 1px)', | ||
| borderWidthForInputWhenFocused: 'var(--border-width-for-input-when-focused, 1px)', | ||
| fontColorForInput: 'var(--font-color-for-input, #1a1a1a)', | ||
| fontColorForInputWhenDisabled: 'var(--font-color-for-input-when-disabled, hsl(232, 18%, 60%))', | ||
| fontColorForInputWhenError: 'var(--font-color-for-input-when-error, #e60050)', | ||
| fontColorForInputWhenError: 'var(--font-color-for-input-when-error, hsl(3, 60%, 46%))', | ||
| fontColorForInputWhenReadonly: 'var(--font-color-for-input-when-readonly, hsl(232, 18%, 40%))', | ||
| fontColorForInputWhenWarning: 'var(--font-color-for-input-when-warning, #f16d0e)', | ||
| fontColorForButtonAsSecondary: 'var(--font-color-for-button-as-secondary, #1a1a1a)', | ||
| fontColorForButtonAsFlatWhenHovered: 'var(--font-color-for-button-as-flat-when-hovered, hsl(175, 55%, 45%))', | ||
| fontColorForButtonAsFlatAsCritical: 'var(--font-color-for-button-as-flat-as-critical, #e60050)', | ||
| fontColorForButtonAsFlatAsCriticalWhenHovered: 'var(--font-color-for-button-as-flat-as-critical-when-hovered, hsl(339.1304347826087, 100%, 25%))', | ||
| fontColorForViewSwitcherButton: 'var(--font-color-for-view-switcher-button, hsl(232, 18%, 40%))', | ||
| fontColorForStampAsPositive: 'var(--font-color-for-stamp-as-positive, hsl(175, 55%, 25%))', | ||
| fontColorForContentNotificationWhenSuccess: 'var(--font-color-for-content-notification-when-success, hsl(175, 55%, 45%))', | ||
| fontColorForAvatarAsTurquoise: 'var(--font-color-for-avatar-as-turquoise, hsl(180, 30%, 45%))', | ||
| fontColorForLeadingIconAsTurquoise: 'var(--font-color-for-leading-icon-as-turquoise, hsl(180, 30%, 45%))', | ||
| fontColorForTextAsPositive: 'var(--font-color-for-text-as-positive, hsl(175, 55%, 25%))', | ||
| fontColorForInputWhenWarning: 'var(--font-color-for-input-when-warning, hsl(35, 90%, 45%))', | ||
| fontColorForButtonAsSecondary: 'var(--font-color-for-button-as-secondary, hsl(240, 64%, 58%))', | ||
| heightForButtonAsBig: 'var(--height-for-button-as-big, 40px)', | ||
| heightForButtonAsSmall: 'var(--height-for-button-as-small, 16px)', | ||
| heightForButtonAsMedium: 'var(--height-for-button-as-medium, 32px)', | ||
| heightForButtonAsSmall: 'var(--height-for-button-as-small, 16px)', | ||
| heightForInput: 'var(--height-for-input, 40px)', | ||
| heightForInputAsSmall: 'var(--height-for-input-as-small, 32px)', | ||
| placeholderFontColorForInput: 'var(--placeholder-font-color-for-input, hsl(232, 18%, 60%))', | ||
| fontSizeForButton: 'var(--font-size-for-button, 0.875rem)', | ||
| fontSizeForInput: 'var(--font-size-for-input, 1rem)', | ||
| paddingForInput: 'var(--padding-for-input, 0 var(--spacing-30))', | ||
| paddingForInputAsQuiet: 'var(--padding-for-input-as-quiet, 0 var(--spacing-20))', | ||
| paddingForButton: 'var(--padding-for-button, 0 var(--spacing-30))', | ||
| shadowForInput: 'var(--shadow-for-input, none)', | ||
@@ -835,4 +604,7 @@ shadowForInputWhenFocused: 'var(--shadow-for-input-when-focused, inset 0 0 0 1px var(--color-primary))', | ||
| }); | ||
| const themedValue = useCallback((defaultThemeValue, newThemeValue) => theme === 'default' ? defaultThemeValue : newThemeValue, [theme]); | ||
| // TODO - make sure old and new theme return same value as new defaultThemeValue | ||
| // At least for the remaining places that we still use this function | ||
| const themedValue = useCallback((defaultThemeValue, _newThemeValue) => defaultThemeValue, []); | ||
| // If we use 'useLayoutEffect' here, we would be trying to read the | ||
@@ -851,6 +623,6 @@ // data attribute before it gets set from the effect in the ThemeProvider | ||
| return { | ||
| theme: 'default', | ||
| theme, | ||
| themedValue, | ||
| isNewTheme: false, | ||
| isRecolouringTheme: theme === 'recolouring' | ||
| isRecolouringTheme: true | ||
| }; | ||
@@ -867,4 +639,4 @@ }; | ||
| // NOTE: This string will be replaced on build time with the package version. | ||
| var version = "19.1.0"; | ||
| var version = "19.2.0"; | ||
| export { ThemeProvider, designTokens$1 as customProperties, designTokens$1 as designTokens, themes, transformTokensToCssVarsReferences, transformTokensToCssVarsValues, useTheme, version, withThemeContext }; |
| export declare const themes: { | ||
| readonly default: { | ||
| readonly colorPrimary: "hsl(175, 55%, 45%)"; | ||
| readonly colorPrimary10: "hsl(175, 55%, 10%)"; | ||
| readonly colorPrimary20: "hsl(175, 55%, 20%)"; | ||
| readonly colorPrimary25: "hsl(175, 55%, 25%)"; | ||
| readonly colorPrimary30: "hsl(175, 55%, 30%)"; | ||
| readonly colorPrimary40: "hsl(175, 55%, 40%)"; | ||
| readonly colorPrimary85: "hsl(175, 70%, 85%)"; | ||
| readonly colorPrimary90: "hsl(175, 70%, 90%)"; | ||
| readonly colorPrimary95: "hsl(175, 90%, 95%)"; | ||
| readonly colorPrimary98: "hsl(175, 100%, 99%)"; | ||
| readonly colorPrimary: "hsl(240, 64%, 58%)"; | ||
| readonly colorPrimary10: "hsl(240, 66%, 19%)"; | ||
| readonly colorPrimary20: "hsl(240, 45%, 33%)"; | ||
| readonly colorPrimary25: "hsl(240, 46%, 48%)"; | ||
| readonly colorPrimary30: "hsl(240, 46%, 53%)"; | ||
| readonly colorPrimary40: "hsl(240, 100%, 67%)"; | ||
| readonly colorPrimary85: "hsl(244, 100%, 84%)"; | ||
| readonly colorPrimary90: "hsl(243, 100%, 93%)"; | ||
| readonly colorPrimary95: "hsl(244, 100%, 97%)"; | ||
| readonly colorPrimary98: "hsl(244, 100%, 99%)"; | ||
| readonly colorAccent: "#213c45"; | ||
| readonly colorAccent10: "hsl(195, 35.2941176471%, 10%)"; | ||
| readonly colorAccent20: "hsl(195, 35.2941176471%, 20%)"; | ||
| readonly colorAccent30: "hsl(195, 35.2941176471%, 30%)"; | ||
| readonly colorAccent40: "hsl(195, 35.2941176471%, 40%)"; | ||
| readonly colorAccent50: "hsl(195, 35%, 50%)"; | ||
| readonly colorAccent60: "hsl(195, 35.2941176471%, 60%)"; | ||
| readonly colorAccent85: "hsl(195, 35%, 85%)"; | ||
| readonly colorAccent90: "hsl(195, 35.2941176471%, 90%)"; | ||
| readonly colorAccent95: "hsl(195, 35.2941176471%, 95%)"; | ||
| readonly colorAccent98: "hsl(195, 35.2941176471%, 98%)"; | ||
| readonly colorBrown10: "hsl(35, 90%, 10%)"; | ||
| readonly colorBrown20: "hsl(35, 50%, 20%)"; | ||
| readonly colorBrown35: "hsl(35, 25%, 35%)"; | ||
| readonly colorBrown50: "hsl(35, 30%, 50%)"; | ||
| readonly colorBrown70: "hsl(35, 40%, 70%)"; | ||
| readonly colorBrown85: "hsl(35, 60%, 85%)"; | ||
| readonly colorBrown90: "hsl(35, 90%, 90%)"; | ||
| readonly colorBrown95: "hsl(35, 80%, 95%)"; | ||
| readonly colorBrown98: "hsl(35, 90%, 98%)"; | ||
| readonly colorPurple10: "hsl(248, 90%, 10%)"; | ||
| readonly colorAccent10: "hsl(195, 100%, 10%)"; | ||
| readonly colorAccent20: "hsl(195, 80%, 20%)"; | ||
| readonly colorAccent30: "hsl(195, 70%, 30%)"; | ||
| readonly colorAccent40: "hsl(195, 70%, 40%)"; | ||
| readonly colorAccent50: "hsl(195, 70%, 50%)"; | ||
| readonly colorAccent60: "hsl(195, 70%, 60%)"; | ||
| readonly colorAccent85: "hsl(195, 85%, 85%)"; | ||
| readonly colorAccent90: "hsl(195, 90%, 90%)"; | ||
| readonly colorAccent95: "hsl(195, 95%, 95%)"; | ||
| readonly colorAccent98: "hsl(195, 100%, 98%)"; | ||
| readonly colorBrown10: "hsl(41, 100%, 10%)"; | ||
| readonly colorBrown20: "hsl(41, 100%, 20%)"; | ||
| readonly colorBrown35: "hsl(41, 96%, 35%)"; | ||
| readonly colorBrown50: "hsl(41, 95%, 44%)"; | ||
| readonly colorBrown70: "hsl(47, 95%, 70%)"; | ||
| readonly colorBrown85: "hsl(47, 100%, 85%)"; | ||
| readonly colorBrown90: "hsl(47, 100%, 90%)"; | ||
| readonly colorBrown95: "hsl(47, 100%, 95%)"; | ||
| readonly colorBrown98: "hsl(48, 100%, 97%)"; | ||
| readonly colorPurple10: "hsl(248, 88%, 10%)"; | ||
| readonly colorPurple20: "hsl(248, 50%, 20%)"; | ||
| readonly colorPurple35: "hsl(248, 25%, 35%)"; | ||
| readonly colorPurple50: "hsl(248, 30%,50%)"; | ||
| readonly colorPurple70: "hsl(248, 40%, 70%)"; | ||
| readonly colorPurple85: "hsl(248, 60%, 85%)"; | ||
| readonly colorPurple90: "hsl(248, 50%, 90%)"; | ||
| readonly colorPurple95: "hsl(248, 80%, 95%)"; | ||
| readonly colorPurple98: "hsl(248, 90%, 98%)"; | ||
| readonly colorTurquoise10: "hsl(180, 90%, 10%)"; | ||
| readonly colorTurquoise20: "hsl(180, 50%, 20%)"; | ||
| readonly colorTurquoise35: "hsl(180, 25%, 35%)"; | ||
| readonly colorTurquoise50: "hsl(180, 30%, 45%)"; | ||
| readonly colorTurquoise70: "hsl(180, 40%, 70%)"; | ||
| readonly colorTurquoise85: "hsl(180, 60%, 85%)"; | ||
| readonly colorTurquoise90: "hsl(180, 40%, 90%)"; | ||
| readonly colorTurquoise95: "hsl(180, 80%, 95%)"; | ||
| readonly colorTurquoise98: "hsl(180, 90%, 98%)"; | ||
| readonly colorPurple50: "hsl(248, 64%, 58%)"; | ||
| readonly colorPurple70: "hsl(248, 80%, 70%)"; | ||
| readonly colorPurple85: "hsl(249, 100%, 85%)"; | ||
| readonly colorPurple90: "hsl(248, 100%, 90%)"; | ||
| readonly colorPurple95: "hsl(248, 100%, 95%)"; | ||
| readonly colorPurple98: "hsl(246, 100%, 98%)"; | ||
| readonly colorTurquoise10: "hsl(180, 88%, 10%)"; | ||
| readonly colorTurquoise20: "hsl(180, 90%, 20%)"; | ||
| readonly colorTurquoise35: "hsl(178, 88%, 35%)"; | ||
| readonly colorTurquoise50: "hsl(178, 67%, 50%)"; | ||
| readonly colorTurquoise70: "hsl(180, 75%, 70%)"; | ||
| readonly colorTurquoise85: "hsl(180, 90%, 85%)"; | ||
| readonly colorTurquoise90: "hsl(180, 88%, 90%)"; | ||
| readonly colorTurquoise95: "hsl(180, 88%, 95%)"; | ||
| readonly colorTurquoise98: "hsl(180, 100%, 98%)"; | ||
| readonly colorNeutral: "hsl(232, 18%, 80%)"; | ||
@@ -66,13 +66,13 @@ readonly colorNeutral05: "hsl(0deg 0% 80% / 5%)"; | ||
| readonly colorInfo95: "hsl(203.05555555555554, 93.9130434783%, 95%)"; | ||
| readonly colorWarning: "#f16d0e"; | ||
| readonly colorWarning25: "hsl(25.110132158590307, 89.0196078431%, 25%)"; | ||
| readonly colorWarning40: "hsl(25.110132158590307, 89.0196078431%, 40%)"; | ||
| readonly colorWarning60: "hsl(25.110132158590307, 90%, 60%)"; | ||
| readonly colorWarning85: "hsl(25.110132158590307, 89.0196078431%, 85%)"; | ||
| readonly colorWarning95: "hsl(25.110132158590307, 89.0196078431%, 95%)"; | ||
| readonly colorError: "#e60050"; | ||
| readonly colorError25: "hsl(339.1304347826087, 100%, 25%)"; | ||
| readonly colorError40: "hsl(339.1304347826087, 100%, 40%)"; | ||
| readonly colorError85: "hsl(339.1304347826087, 100%, 85%)"; | ||
| readonly colorError95: "hsl(339.1304347826087, 100%, 95%)"; | ||
| readonly colorWarning: "hsl(35, 90%, 45%)"; | ||
| readonly colorWarning25: "hsl(33, 83%, 25%)"; | ||
| readonly colorWarning40: "hsl(33, 80%, 34%)"; | ||
| readonly colorWarning60: "hsl(35, 90%, 55%)"; | ||
| readonly colorWarning85: "hsl(33, 90%, 80%)"; | ||
| readonly colorWarning95: "hsl(45, 100%, 92%)"; | ||
| readonly colorError: "hsl(3, 65%, 58%)"; | ||
| readonly colorError25: "hsl(4, 69%, 37%)"; | ||
| readonly colorError40: "hsl(3, 60%, 46%)"; | ||
| readonly colorError85: "hsl(1, 55%, 74%)"; | ||
| readonly colorError95: "hsl(349, 66%, 92%)"; | ||
| readonly colorSolid: "#1a1a1a"; | ||
@@ -186,90 +186,32 @@ readonly colorSolid02: "hsl(0deg 0% 10% / 2%)"; | ||
| readonly breakPointJumbodesktop: "1920px"; | ||
| readonly backgroundColorForButtonWhenActive: "hsl(232, 18%, 95%)"; | ||
| readonly backgroundColorForButtonWhenHovered: "hsl(232, 18%, 98%)"; | ||
| readonly backgroundColorForButtonWhenDisabled: "hsl(195, 35.2941176471%, 95%)"; | ||
| readonly backgroundColorForIconButtonWhenDisabled: "hsl(195, 35.2941176471%, 95%)"; | ||
| readonly backgroundColorForInput: "#fff"; | ||
| readonly backgroundColorForInputWhenSelected: "hsl(195, 35.2941176471%, 95%)"; | ||
| readonly backgroundColorForInputWhenDisabled: "hsl(232, 18%, 95%)"; | ||
| readonly backgroundColorForInputWhenHovered: "hsl(232, 18%, 98%)"; | ||
| readonly backgroundColorForInputWhenFocused: "#fff"; | ||
| readonly backgroundColorForInputWhenReadonly: "hsl(232, 18%, 95%)"; | ||
| readonly backgroundColorForInputWhenActive: "hsl(203.05555555555554, 93.9130434783%, 95%)"; | ||
| readonly backgroundColorForInputAsQuiet: "transparent"; | ||
| readonly backgroundColorForInputAsQuietWhenHovered: "hsl(0deg 0% 10% / 2%)"; | ||
| readonly backgroundColorForInputWhenHovered: "hsl(244, 100%, 99%)"; | ||
| readonly backgroundColorForLocalizedInputLabel: "#fff"; | ||
| readonly backgroundColorForLocalizedInputLabelWhenReadonly: "hsl(232, 18%, 95%)"; | ||
| readonly backgroundColorForLocalizedInputLabelWhenDisabled: "hsl(232, 18%, 95%)"; | ||
| readonly backgroundColorForButtonAsPrimary: "#15a390"; | ||
| readonly backgroundColorForButtonAsPrimaryWhenHovered: "hsl(175, 55%, 45%)"; | ||
| readonly backgroundColorForButtonAsPrimaryAsDefaultWhenHovered: "#17ab97"; | ||
| readonly backgroundColorForButtonAsPrimaryAsDefaultWhenActive: "#15a390"; | ||
| readonly backgroundColorForButtonAsPrimaryAsUrgent: "#f16d0e"; | ||
| readonly backgroundColorForStampAsPrimary: "hsl(175, 70%, 90%)"; | ||
| readonly backgroundColorForStampAsPositive: "hsl(175, 70%, 90%)"; | ||
| readonly backgroundColorForToggleThumbWhenActive: "hsl(175, 55%, 25%)"; | ||
| readonly backgroundColorForToggleTrackWhenActive: "hsl(175, 55%, 40%)"; | ||
| readonly backgroundColorForToggleThumbWhenDisabled: "hsl(195, 35.2941176471%, 60%)"; | ||
| readonly backgroundColorForToggleTrackWhenDisabled: "hsl(195, 35.2941176471%, 90%)"; | ||
| readonly backgroundColorForToggleThumbWhenActiveWhenDisabled: "hsl(232, 18%, 60%)"; | ||
| readonly backgroundColorForToggleTrackWhenActiveWhenDisabled: "hsl(232, 18%, 90%)"; | ||
| readonly backgroundColorForToggleThumbWhenHovered: "rgba(0, 0, 0, 0.1)"; | ||
| readonly backgroundColorForLoadingSpinnerTrack: "#213c45"; | ||
| readonly backgroundColorForLoadingSpinnerDot: "#213c45"; | ||
| readonly backgroundColorForContentNotificationWhenSuccess: "hsl(175, 90%, 95%)"; | ||
| readonly backgroundColorForViewSwitcherButtonWhenActive: "hsl(232, 18%, 95%)"; | ||
| readonly backgroundColorForCheckboxInputWhenHovered: "hsl(232, 18%, 90%)"; | ||
| readonly backgroundColorForRadioOptionWhenHovered: "hsl(232, 18%, 90%)"; | ||
| readonly backgroundColorForTag: "hsl(232, 18%, 95%)"; | ||
| readonly backgroundColorForTagWhenHovered: "hsl(232, 18%, 90%)"; | ||
| readonly backgroundColorForDropdownWhenHovered: "hsl(232, 18%, 95%)"; | ||
| readonly backgroundColorForDropdownWhenActive: "hsl(232, 18%, 90%)"; | ||
| readonly backgroundColorForDropdownOptionWhenActive: "hsl(203.05555555555554, 93.9130434783%, 95%)"; | ||
| readonly backgroundColorForButtonWhenActive: "hsl(243, 100%, 93%)"; | ||
| readonly backgroundColorForButtonWhenHovered: "hsl(244, 100%, 97%)"; | ||
| readonly backgroundColorForButtonWhenDisabled: "hsl(232, 18%, 95%)"; | ||
| readonly borderColorForInput: "hsl(232, 18%, 80%)"; | ||
| readonly borderColorForInputWhenFocused: "hsl(175, 55%, 45%)"; | ||
| readonly borderColorForInputWhenDisabled: "hsl(232, 18%, 80%)"; | ||
| readonly borderColorForInputWhenReadonly: "#fff"; | ||
| readonly borderColorForInputWhenError: "#e60050"; | ||
| readonly borderColorForInputWhenWarning: "#f16d0e"; | ||
| readonly borderColorForInputWhenError: "hsl(3, 65%, 58%)"; | ||
| readonly borderColorForInputWhenWarning: "hsl(35, 90%, 45%)"; | ||
| readonly borderColorForInputWhenHovered: "hsl(232, 18%, 80%)"; | ||
| readonly borderColorForInputAsQuiet: "transparent"; | ||
| readonly borderColorForButtonAsSecondary: "hsl(232, 18%, 80%)"; | ||
| readonly borderColorForDropdown: "hsl(232, 18%, 80%)"; | ||
| readonly borderColorForContentNotificationWhenSuccess: "hsl(175, 70%, 85%)"; | ||
| readonly borderColorForCheckboxInput: "hsl(175, 55%, 45%)"; | ||
| readonly borderColorForCheckboxInputWhenActive: "hsl(175, 55%, 45%)"; | ||
| readonly borderColorForTag: "hsl(232, 18%, 85%)"; | ||
| readonly borderRadiusForButtonAsBig: "4px"; | ||
| readonly borderRadiusForButtonAsMedium: "4px"; | ||
| readonly borderColorForInputWhenFocused: "hsl(240, 100%, 67%)"; | ||
| readonly borderColorForButtonAsSecondary: "hsl(244, 100%, 84%)"; | ||
| readonly borderRadiusForInput: "4px"; | ||
| readonly borderWidthForInput: "1px"; | ||
| readonly borderWidthForInputWhenWarning: "1px"; | ||
| readonly borderWidthForInputWhenError: "1px"; | ||
| readonly borderWidthForInputWhenFocused: "1px"; | ||
| readonly fontColorForInput: "#1a1a1a"; | ||
| readonly fontColorForInputWhenDisabled: "hsl(232, 18%, 60%)"; | ||
| readonly fontColorForInputWhenError: "#e60050"; | ||
| readonly fontColorForInputWhenError: "hsl(3, 60%, 46%)"; | ||
| readonly fontColorForInputWhenReadonly: "hsl(232, 18%, 40%)"; | ||
| readonly fontColorForInputWhenWarning: "#f16d0e"; | ||
| readonly fontColorForButtonAsSecondary: "#1a1a1a"; | ||
| readonly fontColorForButtonAsFlatWhenHovered: "hsl(175, 55%, 45%)"; | ||
| readonly fontColorForButtonAsFlatAsCritical: "#e60050"; | ||
| readonly fontColorForButtonAsFlatAsCriticalWhenHovered: "hsl(339.1304347826087, 100%, 25%)"; | ||
| readonly fontColorForViewSwitcherButton: "hsl(232, 18%, 40%)"; | ||
| readonly fontColorForStampAsPositive: "hsl(175, 55%, 25%)"; | ||
| readonly fontColorForContentNotificationWhenSuccess: "hsl(175, 55%, 45%)"; | ||
| readonly fontColorForAvatarAsTurquoise: "hsl(180, 30%, 45%)"; | ||
| readonly fontColorForLeadingIconAsTurquoise: "hsl(180, 30%, 45%)"; | ||
| readonly fontColorForTextAsPositive: "hsl(175, 55%, 25%)"; | ||
| readonly fontColorForInputWhenWarning: "hsl(35, 90%, 45%)"; | ||
| readonly fontColorForButtonAsSecondary: "hsl(240, 64%, 58%)"; | ||
| readonly heightForButtonAsBig: "40px"; | ||
| readonly heightForButtonAsSmall: "16px"; | ||
| readonly heightForButtonAsMedium: "32px"; | ||
| readonly heightForButtonAsSmall: "16px"; | ||
| readonly heightForInput: "40px"; | ||
| readonly heightForInputAsSmall: "32px"; | ||
| readonly placeholderFontColorForInput: "hsl(232, 18%, 60%)"; | ||
| readonly fontSizeForButton: "0.875rem"; | ||
| readonly fontSizeForInput: "1rem"; | ||
| readonly paddingForInput: "0 var(--spacing-30)"; | ||
| readonly paddingForInputAsQuiet: "0 var(--spacing-20)"; | ||
| readonly paddingForButton: "0 var(--spacing-30)"; | ||
| readonly shadowForInput: "none"; | ||
@@ -280,167 +222,52 @@ readonly shadowForInputWhenFocused: "inset 0 0 0 1px var(--color-primary)"; | ||
| }; | ||
| readonly recolouring: { | ||
| readonly colorPrimary: "hsl(240, 64%, 58%)"; | ||
| readonly colorPrimary10: "hsl(240, 66%, 19%)"; | ||
| readonly colorPrimary20: "hsl(240, 45%, 33%)"; | ||
| readonly colorPrimary25: "hsl(240, 46%, 48%)"; | ||
| readonly colorPrimary30: "hsl(240, 46%, 53%)"; | ||
| readonly colorPrimary40: "hsl(240, 100%, 67%)"; | ||
| readonly colorPrimary85: "hsl(244, 100%, 84%)"; | ||
| readonly colorPrimary90: "hsl(243, 100%, 93%)"; | ||
| readonly colorPrimary95: "hsl(244, 100%, 97%)"; | ||
| readonly colorPrimary98: "hsl(244, 100%, 99%)"; | ||
| readonly colorAccent10: "hsl(195, 100%, 10%)"; | ||
| readonly colorAccent20: "hsl(195, 80%, 20%)"; | ||
| readonly colorAccent30: "hsl(195, 70%, 30%)"; | ||
| readonly colorAccent40: "hsl(195, 70%, 40%)"; | ||
| readonly colorAccent50: "hsl(195, 70%, 50%)"; | ||
| readonly colorAccent60: "hsl(195, 70%, 60%)"; | ||
| readonly colorAccent85: "hsl(195, 85%, 85%)"; | ||
| readonly colorAccent90: "hsl(195, 90%, 90%)"; | ||
| readonly colorAccent95: "hsl(195, 95%, 95%)"; | ||
| readonly colorAccent98: "hsl(195, 100%, 98%)"; | ||
| readonly colorBrown10: "hsl(41, 100%, 10%)"; | ||
| readonly colorBrown20: "hsl(41, 100%, 20%)"; | ||
| readonly colorBrown35: "hsl(41, 96%, 35%)"; | ||
| readonly colorBrown50: "hsl(41, 95%, 44%)"; | ||
| readonly colorBrown70: "hsl(47, 95%, 70%)"; | ||
| readonly colorBrown85: "hsl(47, 100%, 85%)"; | ||
| readonly colorBrown90: "hsl(47, 100%, 90%)"; | ||
| readonly colorBrown95: "hsl(47, 100%, 95%)"; | ||
| readonly colorBrown98: "hsl(48, 100%, 97%)"; | ||
| readonly colorPurple10: "hsl(248, 88%, 10%)"; | ||
| readonly colorPurple20: "hsl(248, 50%, 20%)"; | ||
| readonly colorPurple35: "hsl(248, 25%, 35%)"; | ||
| readonly colorPurple50: "hsl(248, 64%, 58%)"; | ||
| readonly colorPurple70: "hsl(248, 80%, 70%)"; | ||
| readonly colorPurple85: "hsl(249, 100%, 85%)"; | ||
| readonly colorPurple90: "hsl(248, 100%, 90%)"; | ||
| readonly colorPurple95: "hsl(248, 100%, 95%)"; | ||
| readonly colorPurple98: "hsl(246, 100%, 98%)"; | ||
| readonly colorTurquoise10: "hsl(180, 88%, 10%)"; | ||
| readonly colorTurquoise20: "hsl(180, 90%, 20%)"; | ||
| readonly colorTurquoise35: "hsl(178, 88%, 35%)"; | ||
| readonly colorTurquoise50: "hsl(178, 67%, 50%)"; | ||
| readonly colorTurquoise70: "hsl(180, 75%, 70%)"; | ||
| readonly colorTurquoise85: "hsl(180, 90%, 85%)"; | ||
| readonly colorTurquoise90: "hsl(180, 88%, 90%)"; | ||
| readonly colorTurquoise95: "hsl(180, 88%, 95%)"; | ||
| readonly colorTurquoise98: "hsl(180, 100%, 98%)"; | ||
| readonly colorSuccess: "hsl(152, 77%, 39%)"; | ||
| readonly colorSuccess25: "hsl(155, 84%, 20%)"; | ||
| readonly colorSuccess40: "hsl(155, 90%, 24%)"; | ||
| readonly colorSuccess85: "hsl(144, 69%, 80%)"; | ||
| readonly colorSuccess95: "hsl(141, 76%, 92%)"; | ||
| readonly colorWarning: "hsl(35, 90%, 45%)"; | ||
| readonly colorWarning25: "hsl(33, 83%, 25%)"; | ||
| readonly colorWarning40: "hsl(33, 80%, 34%)"; | ||
| readonly colorWarning60: "hsl(35, 90%, 55%)"; | ||
| readonly colorWarning85: "hsl(33, 90%, 80%)"; | ||
| readonly colorWarning95: "hsl(45, 100%, 92%)"; | ||
| readonly colorError: "hsl(3, 65%, 58%)"; | ||
| readonly colorError25: "hsl(4, 69%, 37%)"; | ||
| readonly colorError40: "hsl(3, 60%, 46%)"; | ||
| readonly colorError85: "hsl(1, 55%, 74%)"; | ||
| readonly colorError95: "hsl(349, 66%, 92%)"; | ||
| readonly borderColorForButtonAsSecondary: "hsl(244, 100%, 84%)"; | ||
| readonly borderColorForDropdown: "hsl(244, 100%, 84%)"; | ||
| readonly borderColorForInputWhenFocused: "hsl(240, 100%, 67%)"; | ||
| readonly borderColorForContentNotificationWhenSuccess: "hsl(144, 69%, 80%)"; | ||
| readonly borderColorForCheckboxInput: "hsl(232, 18%, 60%)"; | ||
| readonly borderColorForCheckboxInputWhenActive: "hsl(240, 64%, 58%)"; | ||
| readonly borderColorForTag: "hsl(243, 100%, 93%)"; | ||
| readonly backgroundColorForButtonWhenActive: "hsl(243, 100%, 93%)"; | ||
| readonly backgroundColorForButtonWhenHovered: "hsl(244, 100%, 97%)"; | ||
| readonly backgroundColorForIconButtonWhenDisabled: "transparent"; | ||
| readonly backgroundColorForButtonAsPrimary: "hsl(240, 64%, 58%)"; | ||
| readonly backgroundColorForButtonAsPrimaryWhenHovered: "hsl(240, 100%, 67%)"; | ||
| readonly backgroundColorForButtonAsPrimaryAsDefaultWhenHovered: "hsl(240, 100%, 67%)"; | ||
| readonly backgroundColorForButtonAsPrimaryAsDefaultWhenActive: "hsl(240, 46%, 48%)"; | ||
| readonly backgroundColorForButtonAsPrimaryAsUrgent: "hsl(35, 90%, 55%)"; | ||
| readonly backgroundColorForInputWhenSelected: "hsl(244, 100%, 97%)"; | ||
| readonly backgroundColorForStampAsPrimary: "hsl(244, 100%, 97%)"; | ||
| readonly backgroundColorForStampAsPositive: "hsl(141, 76%, 92%)"; | ||
| readonly backgroundColorForToggleThumbWhenActive: "hsl(240, 100%, 67%)"; | ||
| readonly backgroundColorForToggleTrackWhenActive: "hsl(244, 100%, 84%)"; | ||
| readonly backgroundColorForToggleThumbWhenDisabled: "hsl(232, 18%, 60%)"; | ||
| readonly backgroundColorForToggleTrackWhenDisabled: "hsl(232, 18%, 90%)"; | ||
| readonly backgroundColorForToggleThumbWhenActiveWhenDisabled: "hsl(244, 100%, 84%)"; | ||
| readonly backgroundColorForToggleTrackWhenActiveWhenDisabled: "hsl(243, 100%, 93%)"; | ||
| readonly backgroundColorForToggleThumbWhenHovered: "hsla(240, 64%, 58%, 4%)"; | ||
| readonly backgroundColorForLoadingSpinnerTrack: "hsl(243, 100%, 93%)"; | ||
| readonly backgroundColorForLoadingSpinnerDot: "hsl(240, 64%, 58%)"; | ||
| readonly backgroundColorForContentNotificationWhenSuccess: "hsl(141, 76%, 92%)"; | ||
| readonly backgroundColorForViewSwitcherButtonWhenActive: "hsl(244, 100%, 97%)"; | ||
| readonly backgroundColorForCheckboxInputWhenHovered: "hsl(244, 100%, 97%)"; | ||
| readonly backgroundColorForRadioOptionWhenHovered: "hsl(244, 100%, 97%)"; | ||
| readonly backgroundColorForTag: "hsl(244, 100%, 97%)"; | ||
| readonly backgroundColorForTagWhenHovered: "hsl(243, 100%, 93%)"; | ||
| readonly backgroundColorForDropdownWhenHovered: "hsl(244, 100%, 97%)"; | ||
| readonly backgroundColorForDropdownWhenActive: "hsl(243, 100%, 93%)"; | ||
| readonly backgroundColorForDropdownOptionWhenActive: "hsl(244, 100%, 97%)"; | ||
| readonly backgroundColorForInputAsQuietWhenHovered: "hsla(240, 64%, 58%, 4%)"; | ||
| readonly backgroundColorForInputWhenActive: "hsl(244, 100%, 97%)"; | ||
| readonly backgroundColorForInputWhenHovered: "hsl(244, 100%, 99%)"; | ||
| readonly fontColorForButtonAsSecondary: "hsl(240, 64%, 58%)"; | ||
| readonly fontColorForButtonAsFlatWhenHovered: "hsl(240, 100%, 67%)"; | ||
| readonly fontColorForButtonAsFlatAsCritical: "hsl(3, 60%, 46%)"; | ||
| readonly fontColorForButtonAsFlatAsCriticalWhenHovered: "hsl(3, 65%, 58%)"; | ||
| readonly fontColorForViewSwitcherButton: "hsl(240, 64%, 58%)"; | ||
| readonly fontColorForInputWhenError: "hsl(3, 60%, 46%)"; | ||
| readonly fontColorForStampAsPositive: "hsl(155, 90%, 24%)"; | ||
| readonly fontColorForContentNotificationWhenSuccess: "hsl(152, 77%, 39%)"; | ||
| readonly fontColorForAvatarAsTurquoise: "hsl(178, 88%, 35%)"; | ||
| readonly fontColorForLeadingIconAsTurquoise: "hsl(178, 88%, 35%)"; | ||
| readonly fontColorForTextAsPositive: "hsl(155, 90%, 24%)"; | ||
| }; | ||
| }; | ||
| declare const designTokens: { | ||
| readonly colorPrimary: "var(--color-primary, hsl(175, 55%, 45%))"; | ||
| readonly colorPrimary10: "var(--color-primary-10, hsl(175, 55%, 10%))"; | ||
| readonly colorPrimary20: "var(--color-primary-20, hsl(175, 55%, 20%))"; | ||
| readonly colorPrimary25: "var(--color-primary-25, hsl(175, 55%, 25%))"; | ||
| readonly colorPrimary30: "var(--color-primary-30, hsl(175, 55%, 30%))"; | ||
| readonly colorPrimary40: "var(--color-primary-40, hsl(175, 55%, 40%))"; | ||
| readonly colorPrimary85: "var(--color-primary-85, hsl(175, 70%, 85%))"; | ||
| readonly colorPrimary90: "var(--color-primary-90, hsl(175, 70%, 90%))"; | ||
| readonly colorPrimary95: "var(--color-primary-95, hsl(175, 90%, 95%))"; | ||
| readonly colorPrimary98: "var(--color-primary-98, hsl(175, 100%, 99%))"; | ||
| readonly colorPrimary: "var(--color-primary, hsl(240, 64%, 58%))"; | ||
| readonly colorPrimary10: "var(--color-primary-10, hsl(240, 66%, 19%))"; | ||
| readonly colorPrimary20: "var(--color-primary-20, hsl(240, 45%, 33%))"; | ||
| readonly colorPrimary25: "var(--color-primary-25, hsl(240, 46%, 48%))"; | ||
| readonly colorPrimary30: "var(--color-primary-30, hsl(240, 46%, 53%))"; | ||
| readonly colorPrimary40: "var(--color-primary-40, hsl(240, 100%, 67%))"; | ||
| readonly colorPrimary85: "var(--color-primary-85, hsl(244, 100%, 84%))"; | ||
| readonly colorPrimary90: "var(--color-primary-90, hsl(243, 100%, 93%))"; | ||
| readonly colorPrimary95: "var(--color-primary-95, hsl(244, 100%, 97%))"; | ||
| readonly colorPrimary98: "var(--color-primary-98, hsl(244, 100%, 99%))"; | ||
| readonly colorAccent: "var(--color-accent, #213c45)"; | ||
| readonly colorAccent10: "var(--color-accent-10, hsl(195, 35.2941176471%, 10%))"; | ||
| readonly colorAccent20: "var(--color-accent-20, hsl(195, 35.2941176471%, 20%))"; | ||
| readonly colorAccent30: "var(--color-accent-30, hsl(195, 35.2941176471%, 30%))"; | ||
| readonly colorAccent40: "var(--color-accent-40, hsl(195, 35.2941176471%, 40%))"; | ||
| readonly colorAccent50: "var(--color-accent-50, hsl(195, 35%, 50%))"; | ||
| readonly colorAccent60: "var(--color-accent-60, hsl(195, 35.2941176471%, 60%))"; | ||
| readonly colorAccent85: "var(--color-accent-85, hsl(195, 35%, 85%))"; | ||
| readonly colorAccent90: "var(--color-accent-90, hsl(195, 35.2941176471%, 90%))"; | ||
| readonly colorAccent95: "var(--color-accent-95, hsl(195, 35.2941176471%, 95%))"; | ||
| readonly colorAccent98: "var(--color-accent-98, hsl(195, 35.2941176471%, 98%))"; | ||
| readonly colorBrown10: "var(--color-brown-10, hsl(35, 90%, 10%))"; | ||
| readonly colorBrown20: "var(--color-brown-20, hsl(35, 50%, 20%))"; | ||
| readonly colorBrown35: "var(--color-brown-35, hsl(35, 25%, 35%))"; | ||
| readonly colorBrown50: "var(--color-brown-50, hsl(35, 30%, 50%))"; | ||
| readonly colorBrown70: "var(--color-brown-70, hsl(35, 40%, 70%))"; | ||
| readonly colorBrown85: "var(--color-brown-85, hsl(35, 60%, 85%))"; | ||
| readonly colorBrown90: "var(--color-brown-90, hsl(35, 90%, 90%))"; | ||
| readonly colorBrown95: "var(--color-brown-95, hsl(35, 80%, 95%))"; | ||
| readonly colorBrown98: "var(--color-brown-98, hsl(35, 90%, 98%))"; | ||
| readonly colorPurple10: "var(--color-purple-10, hsl(248, 90%, 10%))"; | ||
| readonly colorAccent10: "var(--color-accent-10, hsl(195, 100%, 10%))"; | ||
| readonly colorAccent20: "var(--color-accent-20, hsl(195, 80%, 20%))"; | ||
| readonly colorAccent30: "var(--color-accent-30, hsl(195, 70%, 30%))"; | ||
| readonly colorAccent40: "var(--color-accent-40, hsl(195, 70%, 40%))"; | ||
| readonly colorAccent50: "var(--color-accent-50, hsl(195, 70%, 50%))"; | ||
| readonly colorAccent60: "var(--color-accent-60, hsl(195, 70%, 60%))"; | ||
| readonly colorAccent85: "var(--color-accent-85, hsl(195, 85%, 85%))"; | ||
| readonly colorAccent90: "var(--color-accent-90, hsl(195, 90%, 90%))"; | ||
| readonly colorAccent95: "var(--color-accent-95, hsl(195, 95%, 95%))"; | ||
| readonly colorAccent98: "var(--color-accent-98, hsl(195, 100%, 98%))"; | ||
| readonly colorBrown10: "var(--color-brown-10, hsl(41, 100%, 10%))"; | ||
| readonly colorBrown20: "var(--color-brown-20, hsl(41, 100%, 20%))"; | ||
| readonly colorBrown35: "var(--color-brown-35, hsl(41, 96%, 35%))"; | ||
| readonly colorBrown50: "var(--color-brown-50, hsl(41, 95%, 44%))"; | ||
| readonly colorBrown70: "var(--color-brown-70, hsl(47, 95%, 70%))"; | ||
| readonly colorBrown85: "var(--color-brown-85, hsl(47, 100%, 85%))"; | ||
| readonly colorBrown90: "var(--color-brown-90, hsl(47, 100%, 90%))"; | ||
| readonly colorBrown95: "var(--color-brown-95, hsl(47, 100%, 95%))"; | ||
| readonly colorBrown98: "var(--color-brown-98, hsl(48, 100%, 97%))"; | ||
| readonly colorPurple10: "var(--color-purple-10, hsl(248, 88%, 10%))"; | ||
| readonly colorPurple20: "var(--color-purple-20, hsl(248, 50%, 20%))"; | ||
| readonly colorPurple35: "var(--color-purple-35, hsl(248, 25%, 35%))"; | ||
| readonly colorPurple50: "var(--color-purple-50, hsl(248, 30%,50%))"; | ||
| readonly colorPurple70: "var(--color-purple-70, hsl(248, 40%, 70%))"; | ||
| readonly colorPurple85: "var(--color-purple-85, hsl(248, 60%, 85%))"; | ||
| readonly colorPurple90: "var(--color-purple-90, hsl(248, 50%, 90%))"; | ||
| readonly colorPurple95: "var(--color-purple-95, hsl(248, 80%, 95%))"; | ||
| readonly colorPurple98: "var(--color-purple-98, hsl(248, 90%, 98%))"; | ||
| readonly colorTurquoise10: "var(--color-turquoise-10, hsl(180, 90%, 10%))"; | ||
| readonly colorTurquoise20: "var(--color-turquoise-20, hsl(180, 50%, 20%))"; | ||
| readonly colorTurquoise35: "var(--color-turquoise-35, hsl(180, 25%, 35%))"; | ||
| readonly colorTurquoise50: "var(--color-turquoise-50, hsl(180, 30%, 45%))"; | ||
| readonly colorTurquoise70: "var(--color-turquoise-70, hsl(180, 40%, 70%))"; | ||
| readonly colorTurquoise85: "var(--color-turquoise-85, hsl(180, 60%, 85%))"; | ||
| readonly colorTurquoise90: "var(--color-turquoise-90, hsl(180, 40%, 90%))"; | ||
| readonly colorTurquoise95: "var(--color-turquoise-95, hsl(180, 80%, 95%))"; | ||
| readonly colorTurquoise98: "var(--color-turquoise-98, hsl(180, 90%, 98%))"; | ||
| readonly colorPurple50: "var(--color-purple-50, hsl(248, 64%, 58%))"; | ||
| readonly colorPurple70: "var(--color-purple-70, hsl(248, 80%, 70%))"; | ||
| readonly colorPurple85: "var(--color-purple-85, hsl(249, 100%, 85%))"; | ||
| readonly colorPurple90: "var(--color-purple-90, hsl(248, 100%, 90%))"; | ||
| readonly colorPurple95: "var(--color-purple-95, hsl(248, 100%, 95%))"; | ||
| readonly colorPurple98: "var(--color-purple-98, hsl(246, 100%, 98%))"; | ||
| readonly colorTurquoise10: "var(--color-turquoise-10, hsl(180, 88%, 10%))"; | ||
| readonly colorTurquoise20: "var(--color-turquoise-20, hsl(180, 90%, 20%))"; | ||
| readonly colorTurquoise35: "var(--color-turquoise-35, hsl(178, 88%, 35%))"; | ||
| readonly colorTurquoise50: "var(--color-turquoise-50, hsl(178, 67%, 50%))"; | ||
| readonly colorTurquoise70: "var(--color-turquoise-70, hsl(180, 75%, 70%))"; | ||
| readonly colorTurquoise85: "var(--color-turquoise-85, hsl(180, 90%, 85%))"; | ||
| readonly colorTurquoise90: "var(--color-turquoise-90, hsl(180, 88%, 90%))"; | ||
| readonly colorTurquoise95: "var(--color-turquoise-95, hsl(180, 88%, 95%))"; | ||
| readonly colorTurquoise98: "var(--color-turquoise-98, hsl(180, 100%, 98%))"; | ||
| readonly colorNeutral: "var(--color-neutral, hsl(232, 18%, 80%))"; | ||
@@ -461,13 +288,13 @@ readonly colorNeutral05: "var(--color-neutral-05, hsl(0deg 0% 80% / 5%))"; | ||
| readonly colorInfo95: "var(--color-info-95, hsl(203.05555555555554, 93.9130434783%, 95%))"; | ||
| readonly colorWarning: "var(--color-warning, #f16d0e)"; | ||
| readonly colorWarning25: "var(--color-warning-25, hsl(25.110132158590307, 89.0196078431%, 25%))"; | ||
| readonly colorWarning40: "var(--color-warning-40, hsl(25.110132158590307, 89.0196078431%, 40%))"; | ||
| readonly colorWarning60: "var(--color-warning-60, hsl(25.110132158590307, 90%, 60%))"; | ||
| readonly colorWarning85: "var(--color-warning-85, hsl(25.110132158590307, 89.0196078431%, 85%))"; | ||
| readonly colorWarning95: "var(--color-warning-95, hsl(25.110132158590307, 89.0196078431%, 95%))"; | ||
| readonly colorError: "var(--color-error, #e60050)"; | ||
| readonly colorError25: "var(--color-error-25, hsl(339.1304347826087, 100%, 25%))"; | ||
| readonly colorError40: "var(--color-error-40, hsl(339.1304347826087, 100%, 40%))"; | ||
| readonly colorError85: "var(--color-error-85, hsl(339.1304347826087, 100%, 85%))"; | ||
| readonly colorError95: "var(--color-error-95, hsl(339.1304347826087, 100%, 95%))"; | ||
| readonly colorWarning: "var(--color-warning, hsl(35, 90%, 45%))"; | ||
| readonly colorWarning25: "var(--color-warning-25, hsl(33, 83%, 25%))"; | ||
| readonly colorWarning40: "var(--color-warning-40, hsl(33, 80%, 34%))"; | ||
| readonly colorWarning60: "var(--color-warning-60, hsl(35, 90%, 55%))"; | ||
| readonly colorWarning85: "var(--color-warning-85, hsl(33, 90%, 80%))"; | ||
| readonly colorWarning95: "var(--color-warning-95, hsl(45, 100%, 92%))"; | ||
| readonly colorError: "var(--color-error, hsl(3, 65%, 58%))"; | ||
| readonly colorError25: "var(--color-error-25, hsl(4, 69%, 37%))"; | ||
| readonly colorError40: "var(--color-error-40, hsl(3, 60%, 46%))"; | ||
| readonly colorError85: "var(--color-error-85, hsl(1, 55%, 74%))"; | ||
| readonly colorError95: "var(--color-error-95, hsl(349, 66%, 92%))"; | ||
| readonly colorSolid: "var(--color-solid, #1a1a1a)"; | ||
@@ -581,90 +408,32 @@ readonly colorSolid02: "var(--color-solid-02, hsl(0deg 0% 10% / 2%))"; | ||
| readonly breakPointJumbodesktop: "var(--break-point-jumbodesktop, 1920px)"; | ||
| readonly backgroundColorForButtonWhenActive: "var(--background-color-for-button-when-active, hsl(232, 18%, 95%))"; | ||
| readonly backgroundColorForButtonWhenHovered: "var(--background-color-for-button-when-hovered, hsl(232, 18%, 98%))"; | ||
| readonly backgroundColorForButtonWhenDisabled: "var(--background-color-for-button-when-disabled, hsl(195, 35.2941176471%, 95%))"; | ||
| readonly backgroundColorForIconButtonWhenDisabled: "var(--background-color-for-icon-button-when-disabled, hsl(195, 35.2941176471%, 95%))"; | ||
| readonly backgroundColorForInput: "var(--background-color-for-input, #fff)"; | ||
| readonly backgroundColorForInputWhenSelected: "var(--background-color-for-input-when-selected, hsl(195, 35.2941176471%, 95%))"; | ||
| readonly backgroundColorForInputWhenDisabled: "var(--background-color-for-input-when-disabled, hsl(232, 18%, 95%))"; | ||
| readonly backgroundColorForInputWhenHovered: "var(--background-color-for-input-when-hovered, hsl(232, 18%, 98%))"; | ||
| readonly backgroundColorForInputWhenFocused: "var(--background-color-for-input-when-focused, #fff)"; | ||
| readonly backgroundColorForInputWhenReadonly: "var(--background-color-for-input-when-readonly, hsl(232, 18%, 95%))"; | ||
| readonly backgroundColorForInputWhenActive: "var(--background-color-for-input-when-active, hsl(203.05555555555554, 93.9130434783%, 95%))"; | ||
| readonly backgroundColorForInputAsQuiet: "var(--background-color-for-input-as-quiet, transparent)"; | ||
| readonly backgroundColorForInputAsQuietWhenHovered: "var(--background-color-for-input-as-quiet-when-hovered, hsl(0deg 0% 10% / 2%))"; | ||
| readonly backgroundColorForInputWhenHovered: "var(--background-color-for-input-when-hovered, hsl(244, 100%, 99%))"; | ||
| readonly backgroundColorForLocalizedInputLabel: "var(--background-color-for-localized-input-label, #fff)"; | ||
| readonly backgroundColorForLocalizedInputLabelWhenReadonly: "var(--background-color-for-localized-input-label-when-readonly, hsl(232, 18%, 95%))"; | ||
| readonly backgroundColorForLocalizedInputLabelWhenDisabled: "var(--background-color-for-localized-input-label-when-disabled, hsl(232, 18%, 95%))"; | ||
| readonly backgroundColorForButtonAsPrimary: "var(--background-color-for-button-as-primary, #15a390)"; | ||
| readonly backgroundColorForButtonAsPrimaryWhenHovered: "var(--background-color-for-button-as-primary-when-hovered, hsl(175, 55%, 45%))"; | ||
| readonly backgroundColorForButtonAsPrimaryAsDefaultWhenHovered: "var(--background-color-for-button-as-primary-as-default-when-hovered, #17ab97)"; | ||
| readonly backgroundColorForButtonAsPrimaryAsDefaultWhenActive: "var(--background-color-for-button-as-primary-as-default-when-active, #15a390)"; | ||
| readonly backgroundColorForButtonAsPrimaryAsUrgent: "var(--background-color-for-button-as-primary-as-urgent, #f16d0e)"; | ||
| readonly backgroundColorForStampAsPrimary: "var(--background-color-for-stamp-as-primary, hsl(175, 70%, 90%))"; | ||
| readonly backgroundColorForStampAsPositive: "var(--background-color-for-stamp-as-positive, hsl(175, 70%, 90%))"; | ||
| readonly backgroundColorForToggleThumbWhenActive: "var(--background-color-for-toggle-thumb-when-active, hsl(175, 55%, 25%))"; | ||
| readonly backgroundColorForToggleTrackWhenActive: "var(--background-color-for-toggle-track-when-active, hsl(175, 55%, 40%))"; | ||
| readonly backgroundColorForToggleThumbWhenDisabled: "var(--background-color-for-toggle-thumb-when-disabled, hsl(195, 35.2941176471%, 60%))"; | ||
| readonly backgroundColorForToggleTrackWhenDisabled: "var(--background-color-for-toggle-track-when-disabled, hsl(195, 35.2941176471%, 90%))"; | ||
| readonly backgroundColorForToggleThumbWhenActiveWhenDisabled: "var(--background-color-for-toggle-thumb-when-active-when-disabled, hsl(232, 18%, 60%))"; | ||
| readonly backgroundColorForToggleTrackWhenActiveWhenDisabled: "var(--background-color-for-toggle-track-when-active-when-disabled, hsl(232, 18%, 90%))"; | ||
| readonly backgroundColorForToggleThumbWhenHovered: "var(--background-color-for-toggle-thumb-when-hovered, rgba(0, 0, 0, 0.1))"; | ||
| readonly backgroundColorForLoadingSpinnerTrack: "var(--background-color-for-loading-spinner-track, #213c45)"; | ||
| readonly backgroundColorForLoadingSpinnerDot: "var(--background-color-for-loading-spinner-dot, #213c45)"; | ||
| readonly backgroundColorForContentNotificationWhenSuccess: "var(--background-color-for-content-notification-when-success, hsl(175, 90%, 95%))"; | ||
| readonly backgroundColorForViewSwitcherButtonWhenActive: "var(--background-color-for-view-switcher-button-when-active, hsl(232, 18%, 95%))"; | ||
| readonly backgroundColorForCheckboxInputWhenHovered: "var(--background-color-for-checkbox-input-when-hovered, hsl(232, 18%, 90%))"; | ||
| readonly backgroundColorForRadioOptionWhenHovered: "var(--background-color-for-radio-option-when-hovered, hsl(232, 18%, 90%))"; | ||
| readonly backgroundColorForTag: "var(--background-color-for-tag, hsl(232, 18%, 95%))"; | ||
| readonly backgroundColorForTagWhenHovered: "var(--background-color-for-tag-when-hovered, hsl(232, 18%, 90%))"; | ||
| readonly backgroundColorForDropdownWhenHovered: "var(--background-color-for-dropdown-when-hovered, hsl(232, 18%, 95%))"; | ||
| readonly backgroundColorForDropdownWhenActive: "var(--background-color-for-dropdown-when-active, hsl(232, 18%, 90%))"; | ||
| readonly backgroundColorForDropdownOptionWhenActive: "var(--background-color-for-dropdown-option-when-active, hsl(203.05555555555554, 93.9130434783%, 95%))"; | ||
| readonly backgroundColorForButtonWhenActive: "var(--background-color-for-button-when-active, hsl(243, 100%, 93%))"; | ||
| readonly backgroundColorForButtonWhenHovered: "var(--background-color-for-button-when-hovered, hsl(244, 100%, 97%))"; | ||
| readonly backgroundColorForButtonWhenDisabled: "var(--background-color-for-button-when-disabled, hsl(232, 18%, 95%))"; | ||
| readonly borderColorForInput: "var(--border-color-for-input, hsl(232, 18%, 80%))"; | ||
| readonly borderColorForInputWhenFocused: "var(--border-color-for-input-when-focused, hsl(175, 55%, 45%))"; | ||
| readonly borderColorForInputWhenDisabled: "var(--border-color-for-input-when-disabled, hsl(232, 18%, 80%))"; | ||
| readonly borderColorForInputWhenReadonly: "var(--border-color-for-input-when-readonly, #fff)"; | ||
| readonly borderColorForInputWhenError: "var(--border-color-for-input-when-error, #e60050)"; | ||
| readonly borderColorForInputWhenWarning: "var(--border-color-for-input-when-warning, #f16d0e)"; | ||
| readonly borderColorForInputWhenError: "var(--border-color-for-input-when-error, hsl(3, 65%, 58%))"; | ||
| readonly borderColorForInputWhenWarning: "var(--border-color-for-input-when-warning, hsl(35, 90%, 45%))"; | ||
| readonly borderColorForInputWhenHovered: "var(--border-color-for-input-when-hovered, hsl(232, 18%, 80%))"; | ||
| readonly borderColorForInputAsQuiet: "var(--border-color-for-input-as-quiet, transparent)"; | ||
| readonly borderColorForButtonAsSecondary: "var(--border-color-for-button-as-secondary, hsl(232, 18%, 80%))"; | ||
| readonly borderColorForDropdown: "var(--border-color-for-dropdown, hsl(232, 18%, 80%))"; | ||
| readonly borderColorForContentNotificationWhenSuccess: "var(--border-color-for-content-notification-when-success, hsl(175, 70%, 85%))"; | ||
| readonly borderColorForCheckboxInput: "var(--border-color-for-checkbox-input, hsl(175, 55%, 45%))"; | ||
| readonly borderColorForCheckboxInputWhenActive: "var(--border-color-for-checkbox-input-when-active, hsl(175, 55%, 45%))"; | ||
| readonly borderColorForTag: "var(--border-color-for-tag, hsl(232, 18%, 85%))"; | ||
| readonly borderRadiusForButtonAsBig: "var(--border-radius-for-button-as-big, 4px)"; | ||
| readonly borderRadiusForButtonAsMedium: "var(--border-radius-for-button-as-medium, 4px)"; | ||
| readonly borderColorForInputWhenFocused: "var(--border-color-for-input-when-focused, hsl(240, 100%, 67%))"; | ||
| readonly borderColorForButtonAsSecondary: "var(--border-color-for-button-as-secondary, hsl(244, 100%, 84%))"; | ||
| readonly borderRadiusForInput: "var(--border-radius-for-input, 4px)"; | ||
| readonly borderWidthForInput: "var(--border-width-for-input, 1px)"; | ||
| readonly borderWidthForInputWhenWarning: "var(--border-width-for-input-when-warning, 1px)"; | ||
| readonly borderWidthForInputWhenError: "var(--border-width-for-input-when-error, 1px)"; | ||
| readonly borderWidthForInputWhenFocused: "var(--border-width-for-input-when-focused, 1px)"; | ||
| readonly fontColorForInput: "var(--font-color-for-input, #1a1a1a)"; | ||
| readonly fontColorForInputWhenDisabled: "var(--font-color-for-input-when-disabled, hsl(232, 18%, 60%))"; | ||
| readonly fontColorForInputWhenError: "var(--font-color-for-input-when-error, #e60050)"; | ||
| readonly fontColorForInputWhenError: "var(--font-color-for-input-when-error, hsl(3, 60%, 46%))"; | ||
| readonly fontColorForInputWhenReadonly: "var(--font-color-for-input-when-readonly, hsl(232, 18%, 40%))"; | ||
| readonly fontColorForInputWhenWarning: "var(--font-color-for-input-when-warning, #f16d0e)"; | ||
| readonly fontColorForButtonAsSecondary: "var(--font-color-for-button-as-secondary, #1a1a1a)"; | ||
| readonly fontColorForButtonAsFlatWhenHovered: "var(--font-color-for-button-as-flat-when-hovered, hsl(175, 55%, 45%))"; | ||
| readonly fontColorForButtonAsFlatAsCritical: "var(--font-color-for-button-as-flat-as-critical, #e60050)"; | ||
| readonly fontColorForButtonAsFlatAsCriticalWhenHovered: "var(--font-color-for-button-as-flat-as-critical-when-hovered, hsl(339.1304347826087, 100%, 25%))"; | ||
| readonly fontColorForViewSwitcherButton: "var(--font-color-for-view-switcher-button, hsl(232, 18%, 40%))"; | ||
| readonly fontColorForStampAsPositive: "var(--font-color-for-stamp-as-positive, hsl(175, 55%, 25%))"; | ||
| readonly fontColorForContentNotificationWhenSuccess: "var(--font-color-for-content-notification-when-success, hsl(175, 55%, 45%))"; | ||
| readonly fontColorForAvatarAsTurquoise: "var(--font-color-for-avatar-as-turquoise, hsl(180, 30%, 45%))"; | ||
| readonly fontColorForLeadingIconAsTurquoise: "var(--font-color-for-leading-icon-as-turquoise, hsl(180, 30%, 45%))"; | ||
| readonly fontColorForTextAsPositive: "var(--font-color-for-text-as-positive, hsl(175, 55%, 25%))"; | ||
| readonly fontColorForInputWhenWarning: "var(--font-color-for-input-when-warning, hsl(35, 90%, 45%))"; | ||
| readonly fontColorForButtonAsSecondary: "var(--font-color-for-button-as-secondary, hsl(240, 64%, 58%))"; | ||
| readonly heightForButtonAsBig: "var(--height-for-button-as-big, 40px)"; | ||
| readonly heightForButtonAsSmall: "var(--height-for-button-as-small, 16px)"; | ||
| readonly heightForButtonAsMedium: "var(--height-for-button-as-medium, 32px)"; | ||
| readonly heightForButtonAsSmall: "var(--height-for-button-as-small, 16px)"; | ||
| readonly heightForInput: "var(--height-for-input, 40px)"; | ||
| readonly heightForInputAsSmall: "var(--height-for-input-as-small, 32px)"; | ||
| readonly placeholderFontColorForInput: "var(--placeholder-font-color-for-input, hsl(232, 18%, 60%))"; | ||
| readonly fontSizeForButton: "var(--font-size-for-button, 0.875rem)"; | ||
| readonly fontSizeForInput: "var(--font-size-for-input, 1rem)"; | ||
| readonly paddingForInput: "var(--padding-for-input, 0 var(--spacing-30))"; | ||
| readonly paddingForInputAsQuiet: "var(--padding-for-input-as-quiet, 0 var(--spacing-20))"; | ||
| readonly paddingForButton: "var(--padding-for-button, 0 var(--spacing-30))"; | ||
| readonly shadowForInput: "var(--shadow-for-input, none)"; | ||
@@ -671,0 +440,0 @@ readonly shadowForInputWhenFocused: "var(--shadow-for-input-when-focused, inset 0 0 0 1px var(--color-primary))"; |
| { | ||
| "--color-primary": "hsl(175, 55%, 45%)", | ||
| "--color-primary-10": "hsl(175, 55%, 10%)", | ||
| "--color-primary-20": "hsl(175, 55%, 20%)", | ||
| "--color-primary-25": "hsl(175, 55%, 25%)", | ||
| "--color-primary-30": "hsl(175, 55%, 30%)", | ||
| "--color-primary-40": "hsl(175, 55%, 40%)", | ||
| "--color-primary-85": "hsl(175, 70%, 85%)", | ||
| "--color-primary-90": "hsl(175, 70%, 90%)", | ||
| "--color-primary-95": "hsl(175, 90%, 95%)", | ||
| "--color-primary-98": "hsl(175, 100%, 99%)", | ||
| "--color-primary": "hsl(240, 64%, 58%)", | ||
| "--color-primary-10": "hsl(240, 66%, 19%)", | ||
| "--color-primary-20": "hsl(240, 45%, 33%)", | ||
| "--color-primary-25": "hsl(240, 46%, 48%)", | ||
| "--color-primary-30": "hsl(240, 46%, 53%)", | ||
| "--color-primary-40": "hsl(240, 100%, 67%)", | ||
| "--color-primary-85": "hsl(244, 100%, 84%)", | ||
| "--color-primary-90": "hsl(243, 100%, 93%)", | ||
| "--color-primary-95": "hsl(244, 100%, 97%)", | ||
| "--color-primary-98": "hsl(244, 100%, 99%)", | ||
| "--color-accent": "#213c45", | ||
| "--color-accent-10": "hsl(195, 35.2941176471%, 10%)", | ||
| "--color-accent-20": "hsl(195, 35.2941176471%, 20%)", | ||
| "--color-accent-30": "hsl(195, 35.2941176471%, 30%)", | ||
| "--color-accent-40": "hsl(195, 35.2941176471%, 40%)", | ||
| "--color-accent-50": "hsl(195, 35%, 50%)", | ||
| "--color-accent-60": "hsl(195, 35.2941176471%, 60%)", | ||
| "--color-accent-85": "hsl(195, 35%, 85%)", | ||
| "--color-accent-90": "hsl(195, 35.2941176471%, 90%)", | ||
| "--color-accent-95": "hsl(195, 35.2941176471%, 95%)", | ||
| "--color-accent-98": "hsl(195, 35.2941176471%, 98%)", | ||
| "--color-brown-10": "hsl(35, 90%, 10%)", | ||
| "--color-brown-20": "hsl(35, 50%, 20%)", | ||
| "--color-brown-35": "hsl(35, 25%, 35%)", | ||
| "--color-brown-50": "hsl(35, 30%, 50%)", | ||
| "--color-brown-70": "hsl(35, 40%, 70%)", | ||
| "--color-brown-85": "hsl(35, 60%, 85%)", | ||
| "--color-brown-90": "hsl(35, 90%, 90%)", | ||
| "--color-brown-95": "hsl(35, 80%, 95%)", | ||
| "--color-brown-98": "hsl(35, 90%, 98%)", | ||
| "--color-purple-10": "hsl(248, 90%, 10%)", | ||
| "--color-accent-10": "hsl(195, 100%, 10%)", | ||
| "--color-accent-20": "hsl(195, 80%, 20%)", | ||
| "--color-accent-30": "hsl(195, 70%, 30%)", | ||
| "--color-accent-40": "hsl(195, 70%, 40%)", | ||
| "--color-accent-50": "hsl(195, 70%, 50%)", | ||
| "--color-accent-60": "hsl(195, 70%, 60%)", | ||
| "--color-accent-85": "hsl(195, 85%, 85%)", | ||
| "--color-accent-90": "hsl(195, 90%, 90%)", | ||
| "--color-accent-95": "hsl(195, 95%, 95%)", | ||
| "--color-accent-98": "hsl(195, 100%, 98%)", | ||
| "--color-brown-10": "hsl(41, 100%, 10%)", | ||
| "--color-brown-20": "hsl(41, 100%, 20%)", | ||
| "--color-brown-35": "hsl(41, 96%, 35%)", | ||
| "--color-brown-50": "hsl(41, 95%, 44%)", | ||
| "--color-brown-70": "hsl(47, 95%, 70%)", | ||
| "--color-brown-85": "hsl(47, 100%, 85%)", | ||
| "--color-brown-90": "hsl(47, 100%, 90%)", | ||
| "--color-brown-95": "hsl(47, 100%, 95%)", | ||
| "--color-brown-98": "hsl(48, 100%, 97%)", | ||
| "--color-purple-10": "hsl(248, 88%, 10%)", | ||
| "--color-purple-20": "hsl(248, 50%, 20%)", | ||
| "--color-purple-35": "hsl(248, 25%, 35%)", | ||
| "--color-purple-50": "hsl(248, 30%,50%)", | ||
| "--color-purple-70": "hsl(248, 40%, 70%)", | ||
| "--color-purple-85": "hsl(248, 60%, 85%)", | ||
| "--color-purple-90": "hsl(248, 50%, 90%)", | ||
| "--color-purple-95": "hsl(248, 80%, 95%)", | ||
| "--color-purple-98": "hsl(248, 90%, 98%)", | ||
| "--color-turquoise-10": "hsl(180, 90%, 10%)", | ||
| "--color-turquoise-20": "hsl(180, 50%, 20%)", | ||
| "--color-turquoise-35": "hsl(180, 25%, 35%)", | ||
| "--color-turquoise-50": "hsl(180, 30%, 45%)", | ||
| "--color-turquoise-70": "hsl(180, 40%, 70%)", | ||
| "--color-turquoise-85": "hsl(180, 60%, 85%)", | ||
| "--color-turquoise-90": "hsl(180, 40%, 90%)", | ||
| "--color-turquoise-95": "hsl(180, 80%, 95%)", | ||
| "--color-turquoise-98": "hsl(180, 90%, 98%)", | ||
| "--color-purple-50": "hsl(248, 64%, 58%)", | ||
| "--color-purple-70": "hsl(248, 80%, 70%)", | ||
| "--color-purple-85": "hsl(249, 100%, 85%)", | ||
| "--color-purple-90": "hsl(248, 100%, 90%)", | ||
| "--color-purple-95": "hsl(248, 100%, 95%)", | ||
| "--color-purple-98": "hsl(246, 100%, 98%)", | ||
| "--color-turquoise-10": "hsl(180, 88%, 10%)", | ||
| "--color-turquoise-20": "hsl(180, 90%, 20%)", | ||
| "--color-turquoise-35": "hsl(178, 88%, 35%)", | ||
| "--color-turquoise-50": "hsl(178, 67%, 50%)", | ||
| "--color-turquoise-70": "hsl(180, 75%, 70%)", | ||
| "--color-turquoise-85": "hsl(180, 90%, 85%)", | ||
| "--color-turquoise-90": "hsl(180, 88%, 90%)", | ||
| "--color-turquoise-95": "hsl(180, 88%, 95%)", | ||
| "--color-turquoise-98": "hsl(180, 100%, 98%)", | ||
| "--color-neutral": "hsl(232, 18%, 80%)", | ||
@@ -65,13 +65,13 @@ "--color-neutral-05": "hsl(0deg 0% 80% / 5%)", | ||
| "--color-info-95": "hsl(203.05555555555554, 93.9130434783%, 95%)", | ||
| "--color-warning": "#f16d0e", | ||
| "--color-warning-25": "hsl(25.110132158590307, 89.0196078431%, 25%)", | ||
| "--color-warning-40": "hsl(25.110132158590307, 89.0196078431%, 40%)", | ||
| "--color-warning-60": "hsl(25.110132158590307, 90%, 60%)", | ||
| "--color-warning-85": "hsl(25.110132158590307, 89.0196078431%, 85%)", | ||
| "--color-warning-95": "hsl(25.110132158590307, 89.0196078431%, 95%)", | ||
| "--color-error": "#e60050", | ||
| "--color-error-25": "hsl(339.1304347826087, 100%, 25%)", | ||
| "--color-error-40": "hsl(339.1304347826087, 100%, 40%)", | ||
| "--color-error-85": "hsl(339.1304347826087, 100%, 85%)", | ||
| "--color-error-95": "hsl(339.1304347826087, 100%, 95%)", | ||
| "--color-warning": "hsl(35, 90%, 45%)", | ||
| "--color-warning-25": "hsl(33, 83%, 25%)", | ||
| "--color-warning-40": "hsl(33, 80%, 34%)", | ||
| "--color-warning-60": "hsl(35, 90%, 55%)", | ||
| "--color-warning-85": "hsl(33, 90%, 80%)", | ||
| "--color-warning-95": "hsl(45, 100%, 92%)", | ||
| "--color-error": "hsl(3, 65%, 58%)", | ||
| "--color-error-25": "hsl(4, 69%, 37%)", | ||
| "--color-error-40": "hsl(3, 60%, 46%)", | ||
| "--color-error-85": "hsl(1, 55%, 74%)", | ||
| "--color-error-95": "hsl(349, 66%, 92%)", | ||
| "--color-solid": "#1a1a1a", | ||
@@ -185,90 +185,32 @@ "--color-solid-02": "hsl(0deg 0% 10% / 2%)", | ||
| "--break-point-jumbodesktop": "1920px", | ||
| "--background-color-for-button-when-active": "hsl(232, 18%, 95%)", | ||
| "--background-color-for-button-when-hovered": "hsl(232, 18%, 98%)", | ||
| "--background-color-for-button-when-disabled": "hsl(195, 35.2941176471%, 95%)", | ||
| "--background-color-for-icon-button-when-disabled": "hsl(195, 35.2941176471%, 95%)", | ||
| "--background-color-for-input": "#fff", | ||
| "--background-color-for-input-when-selected": "hsl(195, 35.2941176471%, 95%)", | ||
| "--background-color-for-input-when-disabled": "hsl(232, 18%, 95%)", | ||
| "--background-color-for-input-when-hovered": "hsl(232, 18%, 98%)", | ||
| "--background-color-for-input-when-focused": "#fff", | ||
| "--background-color-for-input-when-readonly": "hsl(232, 18%, 95%)", | ||
| "--background-color-for-input-when-active": "hsl(203.05555555555554, 93.9130434783%, 95%)", | ||
| "--background-color-for-input-as-quiet": "transparent", | ||
| "--background-color-for-input-as-quiet-when-hovered": "hsl(0deg 0% 10% / 2%)", | ||
| "--background-color-for-input-when-hovered": "hsl(244, 100%, 99%)", | ||
| "--background-color-for-localized-input-label": "#fff", | ||
| "--background-color-for-localized-input-label-when-readonly": "hsl(232, 18%, 95%)", | ||
| "--background-color-for-localized-input-label-when-disabled": "hsl(232, 18%, 95%)", | ||
| "--background-color-for-button-as-primary": "#15a390", | ||
| "--background-color-for-button-as-primary-when-hovered": "hsl(175, 55%, 45%)", | ||
| "--background-color-for-button-as-primary-as-default-when-hovered": "#17ab97", | ||
| "--background-color-for-button-as-primary-as-default-when-active": "#15a390", | ||
| "--background-color-for-button-as-primary-as-urgent": "#f16d0e", | ||
| "--background-color-for-stamp-as-primary": "hsl(175, 70%, 90%)", | ||
| "--background-color-for-stamp-as-positive": "hsl(175, 70%, 90%)", | ||
| "--background-color-for-toggle-thumb-when-active": "hsl(175, 55%, 25%)", | ||
| "--background-color-for-toggle-track-when-active": "hsl(175, 55%, 40%)", | ||
| "--background-color-for-toggle-thumb-when-disabled": "hsl(195, 35.2941176471%, 60%)", | ||
| "--background-color-for-toggle-track-when-disabled": "hsl(195, 35.2941176471%, 90%)", | ||
| "--background-color-for-toggle-thumb-when-active-when-disabled": "hsl(232, 18%, 60%)", | ||
| "--background-color-for-toggle-track-when-active-when-disabled": "hsl(232, 18%, 90%)", | ||
| "--background-color-for-toggle-thumb-when-hovered": "rgba(0, 0, 0, 0.1)", | ||
| "--background-color-for-loading-spinner-track": "#213c45", | ||
| "--background-color-for-loading-spinner-dot": "#213c45", | ||
| "--background-color-for-content-notification-when-success": "hsl(175, 90%, 95%)", | ||
| "--background-color-for-view-switcher-button-when-active": "hsl(232, 18%, 95%)", | ||
| "--background-color-for-checkbox-input-when-hovered": "hsl(232, 18%, 90%)", | ||
| "--background-color-for-radio-option-when-hovered": "hsl(232, 18%, 90%)", | ||
| "--background-color-for-tag": "hsl(232, 18%, 95%)", | ||
| "--background-color-for-tag-when-hovered": "hsl(232, 18%, 90%)", | ||
| "--background-color-for-dropdown-when-hovered": "hsl(232, 18%, 95%)", | ||
| "--background-color-for-dropdown-when-active": "hsl(232, 18%, 90%)", | ||
| "--background-color-for-dropdown-option-when-active": "hsl(203.05555555555554, 93.9130434783%, 95%)", | ||
| "--background-color-for-button-when-active": "hsl(243, 100%, 93%)", | ||
| "--background-color-for-button-when-hovered": "hsl(244, 100%, 97%)", | ||
| "--background-color-for-button-when-disabled": "hsl(232, 18%, 95%)", | ||
| "--border-color-for-input": "hsl(232, 18%, 80%)", | ||
| "--border-color-for-input-when-focused": "hsl(175, 55%, 45%)", | ||
| "--border-color-for-input-when-disabled": "hsl(232, 18%, 80%)", | ||
| "--border-color-for-input-when-readonly": "#fff", | ||
| "--border-color-for-input-when-error": "#e60050", | ||
| "--border-color-for-input-when-warning": "#f16d0e", | ||
| "--border-color-for-input-when-error": "hsl(3, 65%, 58%)", | ||
| "--border-color-for-input-when-warning": "hsl(35, 90%, 45%)", | ||
| "--border-color-for-input-when-hovered": "hsl(232, 18%, 80%)", | ||
| "--border-color-for-input-as-quiet": "transparent", | ||
| "--border-color-for-button-as-secondary": "hsl(232, 18%, 80%)", | ||
| "--border-color-for-dropdown": "hsl(232, 18%, 80%)", | ||
| "--border-color-for-content-notification-when-success": "hsl(175, 70%, 85%)", | ||
| "--border-color-for-checkbox-input": "hsl(175, 55%, 45%)", | ||
| "--border-color-for-checkbox-input-when-active": "hsl(175, 55%, 45%)", | ||
| "--border-color-for-tag": "hsl(232, 18%, 85%)", | ||
| "--border-radius-for-button-as-big": "4px", | ||
| "--border-radius-for-button-as-medium": "4px", | ||
| "--border-color-for-input-when-focused": "hsl(240, 100%, 67%)", | ||
| "--border-color-for-button-as-secondary": "hsl(244, 100%, 84%)", | ||
| "--border-radius-for-input": "4px", | ||
| "--border-width-for-input": "1px", | ||
| "--border-width-for-input-when-warning": "1px", | ||
| "--border-width-for-input-when-error": "1px", | ||
| "--border-width-for-input-when-focused": "1px", | ||
| "--font-color-for-input": "#1a1a1a", | ||
| "--font-color-for-input-when-disabled": "hsl(232, 18%, 60%)", | ||
| "--font-color-for-input-when-error": "#e60050", | ||
| "--font-color-for-input-when-error": "hsl(3, 60%, 46%)", | ||
| "--font-color-for-input-when-readonly": "hsl(232, 18%, 40%)", | ||
| "--font-color-for-input-when-warning": "#f16d0e", | ||
| "--font-color-for-button-as-secondary": "#1a1a1a", | ||
| "--font-color-for-button-as-flat-when-hovered": "hsl(175, 55%, 45%)", | ||
| "--font-color-for-button-as-flat-as-critical": "#e60050", | ||
| "--font-color-for-button-as-flat-as-critical-when-hovered": "hsl(339.1304347826087, 100%, 25%)", | ||
| "--font-color-for-view-switcher-button": "hsl(232, 18%, 40%)", | ||
| "--font-color-for-stamp-as-positive": "hsl(175, 55%, 25%)", | ||
| "--font-color-for-content-notification-when-success": "hsl(175, 55%, 45%)", | ||
| "--font-color-for-avatar-as-turquoise": "hsl(180, 30%, 45%)", | ||
| "--font-color-for-leading-icon-as-turquoise": "hsl(180, 30%, 45%)", | ||
| "--font-color-for-text-as-positive": "hsl(175, 55%, 25%)", | ||
| "--font-color-for-input-when-warning": "hsl(35, 90%, 45%)", | ||
| "--font-color-for-button-as-secondary": "hsl(240, 64%, 58%)", | ||
| "--height-for-button-as-big": "40px", | ||
| "--height-for-button-as-small": "16px", | ||
| "--height-for-button-as-medium": "32px", | ||
| "--height-for-button-as-small": "16px", | ||
| "--height-for-input": "40px", | ||
| "--height-for-input-as-small": "32px", | ||
| "--placeholder-font-color-for-input": "hsl(232, 18%, 60%)", | ||
| "--font-size-for-button": "0.875rem", | ||
| "--font-size-for-input": "1rem", | ||
| "--padding-for-input": "0 var(--spacing-30)", | ||
| "--padding-for-input-as-quiet": "0 var(--spacing-20)", | ||
| "--padding-for-button": "0 var(--spacing-30)", | ||
| "--shadow-for-input": "none", | ||
@@ -275,0 +217,0 @@ "--shadow-for-input-when-focused": "inset 0 0 0 1px var(--color-primary)", |
| { | ||
| "name": "@commercetools-uikit/design-system", | ||
| "description": "Core package of the commercetools design system.", | ||
| "version": "19.1.0", | ||
| "version": "19.2.0", | ||
| "bugs": "https://github.com/commercetools/ui-kit/issues", | ||
@@ -28,3 +28,3 @@ "repository": { | ||
| "@babel/runtime-corejs3": "^7.20.13", | ||
| "@commercetools-uikit/hooks": "19.1.0", | ||
| "@commercetools-uikit/hooks": "19.2.0", | ||
| "@emotion/react": "^11.10.5", | ||
@@ -31,0 +31,0 @@ "lodash": "4.17.21", |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-31.62%
211523
- Lines of code
- decreased by-23.9%
3916
Dependency changes
+ Added@commercetools-uikit/hooks@19.2.0(transitive)
+ Added@commercetools-uikit/utils@19.2.0(transitive)
- Removed@commercetools-uikit/hooks@19.1.0(transitive)
- Removed@commercetools-uikit/utils@19.1.0(transitive)