@commercetools-uikit/design-system 19.0.0 → 19.2.0

package/dist/commercetools-uikit-design-system.cjs.dev.js

@@ -54,54 +54,54 @@ var kebabCase__default = /*#__PURE__*/_interopDefault(kebabCase);
 */
 const themes = {
   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%)',
     colorNeutral05: 'hsl(0deg 0% 80% / 5%)',
     colorNeutral10: 'hsl(0deg 0% 80% / 10%)',
@@ -117,17 +117,17 @@ const themes = {
     colorInfo85: 'hsl(203.05555555555554, 93.9130434783%, 85%)',
     colorInfo90: '#CEEBFD',
     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',
     colorSolid02: 'hsl(0deg 0% 10% / 2%)',
     colorSolid05: 'hsl(0deg 0% 10% / 5%)',
@@ -236,264 +236,91 @@ const themes = {
     breakPointBiggerdesktop: '1280px',
     breakPointGiantdesktop: '1680px',
     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',
-    heightForButtonAsMedium: '32px',
     heightForButtonAsSmall: '16px',
+    heightForButtonAsMedium: '32px',
     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',
     shadowForInputWhenFocused: 'inset 0 0 0 1px var(--color-primary)',
     shadowForInputWhenError: 'inset 0 0 0 1px var(--color-error)',
     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%))',
   colorNeutral05: 'var(--color-neutral-05, hsl(0deg 0% 80% / 5%))',
   colorNeutral10: 'var(--color-neutral-10, hsl(0deg 0% 80% / 10%))',
@@ -509,17 +336,17 @@ const designTokens = {
   colorInfo85: 'var(--color-info-85, hsl(203.05555555555554, 93.9130434783%, 85%))',
   colorInfo90: 'var(--color-info-90, #CEEBFD)',
   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)',
   colorSolid02: 'var(--color-solid-02, hsl(0deg 0% 10% / 2%))',
   colorSolid05: 'var(--color-solid-05, hsl(0deg 0% 10% / 5%))',
@@ -628,94 +455,36 @@ const designTokens = {
   breakPointBiggerdesktop: 'var(--break-point-biggerdesktop, 1280px)',
   breakPointGiantdesktop: 'var(--break-point-giantdesktop, 1680px)',
   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)',
-  heightForButtonAsMedium: 'var(--height-for-button-as-medium, 32px)',
   heightForButtonAsSmall: 'var(--height-for-button-as-small, 16px)',
+  heightForButtonAsMedium: 'var(--height-for-button-as-medium, 32px)',
   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)',
   shadowForInputWhenFocused: 'var(--shadow-for-input-when-focused, inset 0 0 0 1px var(--color-primary))',
   shadowForInputWhenError: 'var(--shadow-for-input-when-error, inset 0 0 0 1px var(--color-error))',
@@ -851,7 +620,10 @@ const useTheme = function () {
     attributes: true,
     attributeFilter: ['data-theme']
   });
-  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
   // data attribute before it gets set from the effect in the ThemeProvider
@@ -866,10 +638,10 @@ const useTheme = function () {
     }
   }, []);
   return {
-    theme: 'default',
+    theme,
     themedValue,
     isNewTheme: false,
-    isRecolouringTheme: theme === 'recolouring'
+    isRecolouringTheme: true
   };
 };
 const withThemeContext = WrappedComponent => {
@@ -881,7 +653,7 @@ const withThemeContext = WrappedComponent => {
 };
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "19.0.0";
+var version = "19.2.0";
 
 exports.ThemeProvider = ThemeProvider;
 exports.customProperties = designTokens$1;