@sprinklrjs/spaceweb-themes 10.1.0 → 12.14.4

package/hyperspace/light/theme.js

@@ -16,7 +16,6 @@ var theme_1 = require("../../common-theme/theme");
 var theme = {
     name: 'hyperspace-light',
     htmlFontSize: '10px',
-    density: 'COMFORTABLE',
     typography: {
         h1: { fontSize: '4.2rem', lineHeight: '4.8rem', fontWeight: 600 },
         h2: { fontSize: '2.4rem', lineHeight: '2.9rem', fontWeight: 600 },
@@ -44,56 +43,72 @@ var theme = {
         variantSecondary: {
             color: 'var(--spr-text-01, #0A0A14)',
             hoverBackgroundColor: 'var(--spr-ui-02, #F8F8FA)',
-            activeBackgroundColor: 'var(--spr-ui-05, #EEEFF1)'
+            activeBackgroundColor: 'var(--spr-ui-05, #EEF0F1)'
         },
-        sizeXs: {
+        sizeXxxs: {
             minWidth: '48px',
             paddingY: '4px',
-            paddingX: '12px',
+            paddingX: '6px',
+            borderRadius: '5px',
+            fontStyles: { fontSize: '12px', lineHeight: '14px', fontWeight: 600 }
+        },
+        sizeXxs: {
+            minWidth: '56px',
+            paddingY: '6px',
+            paddingX: '11px',
+            borderRadius: '6px',
             fontStyles: { fontSize: '12px', lineHeight: '14px', fontWeight: 600 }
         },
+        sizeXs: {
+            minWidth: '72px',
+            paddingY: '7px',
+            paddingX: '11px',
+            borderRadius: '7px',
+            fontStyles: { fontSize: '13px', lineHeight: '16px', fontWeight: 600 }
+        },
         sizeSm: {
-            minWidth: '86px',
-            paddingY: '8px',
-            paddingX: '12px',
-            fontStyles: { fontSize: '13px', lineHeight: '12px', fontWeight: 600 }
+            minWidth: '88px',
+            paddingY: '9px',
+            paddingX: '11px',
+            fontStyles: { fontSize: '13px', lineHeight: '16px', fontWeight: 600 }
         },
         sizeMd: {
-            minWidth: '92px',
-            paddingY: '8px',
-            paddingX: '12px',
-            fontStyles: { fontSize: '13px', lineHeight: '16px', fontWeight: 600 }
+            minWidth: '100px',
+            paddingY: '10px',
+            paddingX: '15px',
+            fontStyles: { fontSize: '14px', lineHeight: '18px', fontWeight: 600 }
         },
         sizeLg: {
-            minWidth: '98px',
-            paddingY: '10px',
-            paddingX: '16px',
+            minWidth: '112px',
+            paddingY: '12px',
+            paddingX: '15px',
             fontStyles: { fontSize: '14px', lineHeight: '18px', fontWeight: 600 }
         },
         sizeXl: {
-            minWidth: '104px',
+            minWidth: '112px',
             paddingY: '12px',
-            paddingX: '16px',
-            fontStyles: { fontSize: '14px', lineHeight: '19px', fontWeight: 600 }
+            paddingX: '15px',
+            fontStyles: { fontSize: '14px', lineHeight: '18px', fontWeight: 600 }
         }
     },
     iconButton: {
         minWidth: '0px',
-        sizeXxxs: { buttonSize: 16, iconSize: 8, squareBorderRadius: 3 },
-        sizeXxs: { buttonSize: 24, iconSize: 10, squareBorderRadius: 5 },
-        sizeXs: { buttonSize: 30, iconSize: 12, squareBorderRadius: 6 },
-        sizeSm: { buttonSize: 30, iconSize: 14, squareBorderRadius: 6 },
+        sizeXxxxs: { buttonSize: 16, iconSize: 8, squareBorderRadius: 3 },
+        sizeXxxs: { buttonSize: 24, iconSize: 10, squareBorderRadius: 5 },
+        sizeXxs: { buttonSize: 28, iconSize: 12, squareBorderRadius: 6 },
+        sizeXs: { buttonSize: 32, iconSize: 12, squareBorderRadius: 7 },
+        sizeSm: { buttonSize: 36, iconSize: 14 },
         sizeMd: { buttonSize: 40, iconSize: 16 },
-        sizeLg: { buttonSize: 50, iconSize: 20 },
-        sizeXl: { buttonSize: 50, iconSize: 20 },
+        sizeLg: { buttonSize: 44, iconSize: 16 },
+        sizeXl: { buttonSize: 44, iconSize: 16 },
         shapeRound: {
             color: 'var(--spr-icon-01, #0A0A14)',
             hoverColor: 'var(--spr-icon-01, #0A0A14)',
             activeColor: 'var(--spr-icon-04, #0E61F6)',
             disabledColor: 'var(--spr-icon-disable, #DBDBDB)',
             backgroundColor: 'transparent',
-            hoverBackgroundColor: 'var(--spr-ui-05, #EEEFF1)',
-            activeBackgroundColor: 'var(--spr-ui-05, #EEEFF1)',
+            hoverBackgroundColor: 'var(--spr-ui-05, #EEF0F1)',
+            activeBackgroundColor: 'var(--spr-ui-05, #EEF0F1)',
             disabledBackgroundColor: 'transparent'
         },
         shapeRoundBordered: {
@@ -101,7 +116,7 @@ var theme = {
             activeColor: 'var(--spr-icon-04, #0E61F6)',
             disabledColor: 'var(--spr-icon-disable, #DBDBDB)',
             backgroundColor: 'var(--spr-ui-01, #FFFFFF)',
-            hoverBackgroundColor: 'var(--spr-ui-05, #EEEFF1)',
+            hoverBackgroundColor: 'var(--spr-ui-05, #EEF0F1)',
             activeBackgroundColor: 'var(--spr-ui-01, #FFFFFF)',
             disabledBackgroundColor: 'var(--spr-ui-01, #FFFFFF)',
             borderColor: 'var(--spr-border-03, #DBDBDB)',
@@ -116,8 +131,8 @@ var theme = {
             activeColor: 'var(--spr-icon-04, #0E61F6)',
             disabledColor: 'var(--spr-icon-disable, #DBDBDB)',
             backgroundColor: 'transparent',
-            hoverBackgroundColor: 'var(--spr-ui-05, #EEEFF1)',
-            activeBackgroundColor: 'var(--spr-ui-05, #EEEFF1)',
+            hoverBackgroundColor: 'var(--spr-ui-05, #EEF0F1)',
+            activeBackgroundColor: 'var(--spr-ui-05, #EEF0F1)',
             disabledBackgroundColor: 'transparent'
         },
         shapeSquareBordered: {
@@ -125,7 +140,7 @@ var theme = {
             activeColor: 'var(--spr-icon-04, #0E61F6)',
             disabledColor: 'var(--spr-icon-disable, #DBDBDB)',
             backgroundColor: 'var(--spr-ui-01, #FFFFFF)',
-            hoverBackgroundColor: 'var(--spr-ui-05, #EEEFF1)',
+            hoverBackgroundColor: 'var(--spr-ui-05, #EEF0F1)',
             activeBackgroundColor: 'var(--spr-ui-01, #FFFFFF)',
             disabledBackgroundColor: 'var(--spr-ui-01, #FFFFFF)',
             borderColor: 'var(--spr-border-03, #DBDBDB)',
@@ -136,19 +151,22 @@ var theme = {
     },
     input: {
         borderRadius: '8px',
-        disabledBorderColor: 'transparent',
-        sizeSm: { paddingX: '12px', paddingY: '8px', fontSize: '12px', lineHeight: '17px' },
-        sizeMd: { paddingX: '12px', paddingY: '10px', fontSize: '14px', lineHeight: '18px' },
-        sizeLg: { paddingX: '16px', paddingY: '11px', fontSize: '16px', lineHeight: '21px' }
+        disabledBorderColor: 'var(--spr-border-03, #DBDBDB)',
+        sizeXxxs: { borderRadius: '5px', paddingX: '7px', paddingY: '3px', fontSize: '13px', lineHeight: '16px' },
+        sizeXs: { borderRadius: '7px', paddingX: '11px', paddingY: '6px', fontSize: '14px', lineHeight: '18px' },
+        sizeSm: { paddingX: '11px', paddingY: '8px', fontSize: '14px', lineHeight: '18px' },
+        sizeMd: { paddingX: '11px', paddingY: '10px', fontSize: '14px', lineHeight: '18px' },
+        sizeLg: { paddingX: '11px', paddingY: '10px', fontSize: '14px', lineHeight: '18px' }
     },
     multiSelect: {
-        tagBorderRadius: '8px',
-        sizeSm: { paddingY: '0px', tagHeight: '27px', tagMarginX: '2px', tagMarginY: '3px' },
-        sizeMd: { paddingY: '0px', tagHeight: '32px', tagMarginX: '2px', tagMarginY: '3px' },
-        sizeLg: { paddingY: '2px', tagHeight: '33px', tagMarginX: '2px', tagMarginY: '3px' }
+        sizeXxxs: { paddingX: '2px', paddingY: '1px', tagMarginX: '2px', tagMarginY: '1px' },
+        sizeXs: { paddingX: '4px', paddingY: '2px', tagMarginY: '2px', tagMarginX: '4px' },
+        sizeSm: { paddingX: '4px', paddingY: '4px', tagMarginY: '2px', tagMarginX: '4px' },
+        sizeMd: { paddingX: '4px', paddingY: '6px', tagMarginY: '2px', tagMarginX: '4px' },
+        sizeLg: { paddingX: '4px', paddingY: '6px', tagMarginY: '2px', tagMarginX: '4px' }
     },
     link: { fontSize: '16px', lineHeight: '15px' },
-    list: { selectedEnhancerBackground: 'transparent', hoverBackgroundColor: 'var(--spr-ui-05, #EEEFF1)' },
+    list: { selectedEnhancerBackground: 'transparent', hoverBackgroundColor: 'var(--spr-ui-05, #EEF0F1)' },
     tab: {
         variantDefault: {
             fontStyles: { fontSize: '18px', lineHeight: '21px', fontWeight: 600 },
@@ -157,13 +175,7 @@ var theme = {
             positionRightStyles: { marginTop: '12px', marginBottom: '12px' }
         }
     },
-    tag: {
-        borderRadius: '4px',
-        actionButtonBorderRadius: '2px',
-        avatarMarginLeft: '4px',
-        sizeSm: { height: '24px' },
-        sizeLg: { height: '28px' }
-    },
+    tag: { actionButtonBorderRadius: '2px', avatarMarginLeft: '4px' },
     app: {
         header: '#0A0A14',
         headerTab: 'rgba(255, 255, 255, 0.1)',
@@ -198,14 +210,14 @@ var theme = {
         ui02: 'var(--spr-ui-02, #F8F8FA)',
         ui03: 'var(--spr-ui-03, #DBDBDB)',
         ui04: 'var(--spr-ui-04, #0E61F6)',
-        ui05: 'var(--spr-ui-05, #EEEFF1)',
+        ui05: 'var(--spr-ui-05, #EEF0F1)',
         ui06: 'var(--spr-ui-06, #E6E6E9)',
         uiFocus: 'var(--spr-ui-focus, rgba(8, 40, 204, 0.07))',
         uiFocusReverse: 'var(--spr-ui-focus-reverse, rgba(255, 255, 255, 0.2))',
         uiHover: 'var(--spr-ui-hover, #F8F8FA)',
         uiHoverReverse: 'var(--spr-ui-hover-reverse, rgba(255, 255, 255, 0.1))',
-        supportError: 'var(--spr-support-error, #DE336A)',
-        supportErrorHighlight: 'var(--spr-support-error-highlight, rgba(255, 51, 106, 0.2))',
+        supportError: 'var(--spr-support-error, #C70F5C)',
+        supportErrorHighlight: 'var(--spr-support-error-highlight, rgba(199, 15, 92, 0.2))',
         supportSuccess: 'var(--spr-support-success, #6AC96E)',
         supportSuccessHighlight: 'var(--spr-support-success-highlight, rgba(106, 201, 110, 0.2))',
         supportWarning: 'var(--spr-support-warning, #F3BF24)',
@@ -248,23 +260,23 @@ var theme = {
         secondaryOrange: 'var(--spr-secondary-orange, #F48749)',
         icon01: 'var(--spr-icon-01, #0A0A14)',
         icon02: 'var(--spr-icon-02, #646470)',
-        icon03: 'var(--spr-icon-03, #646470)',
+        icon03: 'var(--spr-icon-03, #818192)',
         icon04: 'var(--spr-icon-04, #0E61F6)',
         icon05: 'var(--spr-icon-05, #FFFFFF)',
         icon06: 'var(--spr-icon-06, rgba(255, 255, 255, 0.6))',
         iconHover: 'var(--spr-icon-hover, #0A0A14)',
         iconDisable: 'var(--spr-icon-disable, #DBDBDB)',
         iconHoverReverse: 'var(--spr-icon-hover-reverse, #FFFFFF)',
-        iconError: 'var(--spr-icon-error, #DE336A)',
+        iconError: 'var(--spr-icon-error, #C70F5C)',
         link: 'var(--spr-link, #0E61F6)',
         text01: 'var(--spr-text-01, #0A0A14)',
-        text02: 'var(--spr-text-02, #646470)',
+        text02: 'var(--spr-text-02, #434350)',
         text03: 'var(--spr-text-03, #646470)',
         text04: 'var(--spr-text-04, #0E61F6)',
         text05: 'var(--spr-text-05, #FFFFFF)',
         text06: 'var(--spr-text-06, #FFFFFF)',
         textPlaceholder: 'var(--spr-text-placeholder, #646470)',
-        supportErrorText: 'var(--spr-support-error-text, #DE336A)',
+        supportErrorText: 'var(--spr-support-error-text, #C70F5C)',
         supportSuccessText: 'var(--spr-support-success-text, #6AC96E)',
         supportWarningText: 'var(--spr-support-warning-text, #F3BF24)',
         hover: 'var(--spr-hover, #0729a0)',
@@ -272,7 +284,7 @@ var theme = {
         border01: 'var(--spr-border-01, #EEEEEE)',
         border02: 'var(--spr-border-02, #E6E6E9)',
         border03: 'var(--spr-border-03, #DBDBDB)',
-        border04: 'var(--spr-border-04, #A0A0A8)',
+        border04: 'var(--spr-border-04, #818192)',
         border05: 'var(--spr-border-05, #FFFFFF)',
         border06: 'var(--spr-border-06, #0A0A14)',
         cardBorder: 'var(--spr-card-border, #ECECEF)',

package/hyperspace/light/utilities.d.ts

@@ -1244,7 +1244,7 @@ declare const _default: {
     'h-px': {
         height: string;
     };
-    'h-1\\/2': {
+    'h-1/2': {
         height: string;
     };
     'h-full': {
@@ -1506,6 +1506,30 @@ declare const _default: {
         marginLeft: any;
         marginRight: any;
     };
+    'm-1.5': {
+        marginTop: any;
+        marginBottom: any;
+        marginLeft: any;
+        marginRight: any;
+    };
+    'm-0.5': {
+        marginTop: any;
+        marginBottom: any;
+        marginLeft: any;
+        marginRight: any;
+    };
+    '-m-1.5': {
+        marginTop: any;
+        marginBottom: any;
+        marginLeft: any;
+        marginRight: any;
+    };
+    '-m-0.5': {
+        marginTop: any;
+        marginBottom: any;
+        marginLeft: any;
+        marginRight: any;
+    };
     'm-px': {
         marginTop: any;
         marginBottom: any;
@@ -1814,6 +1838,38 @@ declare const _default: {
         marginLeft: string;
         marginRight: string;
     };
+    'my-1.5': {
+        marginTop: string;
+        marginBottom: string;
+    };
+    'mx-1.5': {
+        marginLeft: string;
+        marginRight: string;
+    };
+    'my-0.5': {
+        marginTop: string;
+        marginBottom: string;
+    };
+    'mx-0.5': {
+        marginLeft: string;
+        marginRight: string;
+    };
+    '-my-1.5': {
+        marginTop: string;
+        marginBottom: string;
+    };
+    '-mx-1.5': {
+        marginLeft: string;
+        marginRight: string;
+    };
+    '-my-0.5': {
+        marginTop: string;
+        marginBottom: string;
+    };
+    '-mx-0.5': {
+        marginLeft: string;
+        marginRight: string;
+    };
     'my-px': {
         marginTop: string;
         marginBottom: string;
@@ -2254,6 +2310,54 @@ declare const _default: {
     'ml-auto': {
         marginLeft: string;
     };
+    'mt-1.5': {
+        marginTop: string;
+    };
+    'mr-1.5': {
+        marginRight: string;
+    };
+    'mb-1.5': {
+        marginBottom: string;
+    };
+    'ml-1.5': {
+        marginLeft: string;
+    };
+    'mt-0.5': {
+        marginTop: string;
+    };
+    'mr-0.5': {
+        marginRight: string;
+    };
+    'mb-0.5': {
+        marginBottom: string;
+    };
+    'ml-0.5': {
+        marginLeft: string;
+    };
+    '-mt-1.5': {
+        marginTop: string;
+    };
+    '-mr-1.5': {
+        marginRight: string;
+    };
+    '-mb-1.5': {
+        marginBottom: string;
+    };
+    '-ml-1.5': {
+        marginLeft: string;
+    };
+    '-mt-0.5': {
+        marginTop: string;
+    };
+    '-mr-0.5': {
+        marginRight: string;
+    };
+    '-mb-0.5': {
+        marginBottom: string;
+    };
+    '-ml-0.5': {
+        marginLeft: string;
+    };
     'mt-px': {
         marginTop: string;
     };
@@ -2866,6 +2970,18 @@ declare const _default: {
         paddingLeft: any;
         paddingRight: any;
     };
+    'p-1.5': {
+        paddingTop: any;
+        paddingBottom: any;
+        paddingLeft: any;
+        paddingRight: any;
+    };
+    'p-0.5': {
+        paddingTop: any;
+        paddingBottom: any;
+        paddingLeft: any;
+        paddingRight: any;
+    };
     'p-px': {
         paddingTop: any;
         paddingBottom: any;
@@ -3040,6 +3156,22 @@ declare const _default: {
         paddingLeft: string;
         paddingRight: string;
     };
+    'py-1.5': {
+        paddingTop: string;
+        paddingBottom: string;
+    };
+    'px-1.5': {
+        paddingLeft: string;
+        paddingRight: string;
+    };
+    'py-0.5': {
+        paddingTop: string;
+        paddingBottom: string;
+    };
+    'px-0.5': {
+        paddingLeft: string;
+        paddingRight: string;
+    };
     'py-px': {
         paddingTop: string;
         paddingBottom: string;
@@ -3300,6 +3432,30 @@ declare const _default: {
     'pl-64': {
         paddingLeft: string;
     };
+    'pt-1.5': {
+        paddingTop: string;
+    };
+    'pr-1.5': {
+        paddingRight: string;
+    };
+    'pb-1.5': {
+        paddingBottom: string;
+    };
+    'pl-1.5': {
+        paddingLeft: string;
+    };
+    'pt-0.5': {
+        paddingTop: string;
+    };
+    'pr-0.5': {
+        paddingRight: string;
+    };
+    'pb-0.5': {
+        paddingBottom: string;
+    };
+    'pl-0.5': {
+        paddingLeft: string;
+    };
     'pt-px': {
         paddingTop: string;
     };
@@ -3393,91 +3549,91 @@ declare const _default: {
     'w-px': {
         width: string;
     };
-    'w-1\\/2': {
+    'w-1/2': {
         width: string;
     };
-    'w-1\\/3': {
+    'w-1/3': {
         width: string;
     };
-    'w-1\\/4': {
+    'w-1/4': {
         width: string;
     };
-    'w-2\\/3': {
+    'w-2/3': {
         width: string;
     };
-    'w-2\\/4': {
+    'w-2/4': {
         width: string;
     };
-    'w-3\\/4': {
+    'w-3/4': {
         width: string;
     };
-    'w-1\\/24': {
+    'w-1/24': {
         width: string;
     };
-    'w-2\\/24': {
+    'w-2/24': {
         width: string;
     };
-    'w-3\\/24': {
+    'w-3/24': {
         width: string;
     };
-    'w-4\\/24': {
+    'w-4/24': {
         width: string;
     };
-    'w-5\\/24': {
+    'w-5/24': {
         width: string;
     };
-    'w-6\\/24': {
+    'w-6/24': {
         width: string;
     };
-    'w-7\\/24': {
+    'w-7/24': {
         width: string;
     };
-    'w-8\\/24': {
+    'w-8/24': {
         width: string;
     };
-    'w-9\\/24': {
+    'w-9/24': {
         width: string;
     };
-    'w-10\\/24': {
+    'w-10/24': {
         width: string;
     };
-    'w-11\\/24': {
+    'w-11/24': {
         width: string;
     };
-    'w-12\\/24': {
+    'w-12/24': {
         width: string;
     };
-    'w-13\\/24': {
+    'w-13/24': {
         width: string;
     };
-    'w-14\\/24': {
+    'w-14/24': {
         width: string;
     };
-    'w-15\\/24': {
+    'w-15/24': {
         width: string;
     };
-    'w-16\\/24': {
+    'w-16/24': {
         width: string;
     };
-    'w-17\\/24': {
+    'w-17/24': {
         width: string;
     };
-    'w-18\\/24': {
+    'w-18/24': {
         width: string;
     };
-    'w-19\\/24': {
+    'w-19/24': {
         width: string;
     };
-    'w-20\\/24': {
+    'w-20/24': {
         width: string;
     };
-    'w-21\\/24': {
+    'w-21/24': {
         width: string;
     };
-    'w-22\\/24': {
+    'w-22/24': {
         width: string;
     };
-    'w-23\\/24': {
+    'w-23/24': {
         width: string;
     };
     'w-full': {
@@ -4510,10 +4666,10 @@ declare const _default: {
     '-translate-x-full': {
         '-TransformTranslateX': string;
     };
-    '-translate-x-1\\/2': {
+    '-translate-x-1/2': {
         '-TransformTranslateX': string;
     };
-    'translate-x-1\\/2': {
+    'translate-x-1/2': {
         '-TransformTranslateX': string;
     };
     'translate-x-full': {
@@ -4651,10 +4807,10 @@ declare const _default: {
     '-translate-y-full': {
         '-TransformTranslateY': string;
     };
-    '-translate-y-1\\/2': {
+    '-translate-y-1/2': {
         '-TransformTranslateY': string;
     };
-    'translate-y-1\\/2': {
+    'translate-y-1/2': {
         '-TransformTranslateY': string;
     };
     'translate-y-full': {

package/hyperspace/light/utilities.js

@@ -38,14 +38,14 @@ var utilities = {
     'spr-ui-02': { backgroundColor: 'var(--spr-ui-02, #F8F8FA)' },
     'spr-ui-03': { backgroundColor: 'var(--spr-ui-03, #DBDBDB)' },
     'spr-ui-04': { backgroundColor: 'var(--spr-ui-04, #0E61F6)' },
-    'spr-ui-05': { backgroundColor: 'var(--spr-ui-05, #EEEFF1)' },
+    'spr-ui-05': { backgroundColor: 'var(--spr-ui-05, #EEF0F1)' },
     'spr-ui-06': { backgroundColor: 'var(--spr-ui-06, #E6E6E9)' },
     'spr-ui-focus': { backgroundColor: 'var(--spr-ui-focus, rgba(8, 40, 204, 0.07))' },
     'spr-ui-focus-reverse': { backgroundColor: 'var(--spr-ui-focus-reverse, rgba(255, 255, 255, 0.2))' },
     'spr-ui-hover': { backgroundColor: 'var(--spr-ui-hover, #F8F8FA)' },
     'spr-ui-hover-reverse': { backgroundColor: 'var(--spr-ui-hover-reverse, rgba(255, 255, 255, 0.1))' },
-    'spr-support-error': { backgroundColor: 'var(--spr-support-error, #DE336A)' },
-    'spr-support-error-highlight': { backgroundColor: 'var(--spr-support-error-highlight, rgba(255, 51, 106, 0.2))' },
+    'spr-support-error': { backgroundColor: 'var(--spr-support-error, #C70F5C)' },
+    'spr-support-error-highlight': { backgroundColor: 'var(--spr-support-error-highlight, rgba(199, 15, 92, 0.2))' },
     'spr-support-success': { backgroundColor: 'var(--spr-support-success, #6AC96E)' },
     'spr-support-success-highlight': {
         backgroundColor: 'var(--spr-support-success-highlight, rgba(106, 201, 110, 0.2))'
@@ -90,23 +90,23 @@ var utilities = {
     'spr-secondary-orange': { backgroundColor: 'var(--spr-secondary-orange, #F48749)' },
     'spr-icon-01': { fill: 'var(--spr-icon-01, #0A0A14)' },
     'spr-icon-02': { fill: 'var(--spr-icon-02, #646470)' },
-    'spr-icon-03': { fill: 'var(--spr-icon-03, #646470)' },
+    'spr-icon-03': { fill: 'var(--spr-icon-03, #818192)' },
     'spr-icon-04': { fill: 'var(--spr-icon-04, #0E61F6)' },
     'spr-icon-05': { fill: 'var(--spr-icon-05, #FFFFFF)' },
     'spr-icon-06': { fill: 'var(--spr-icon-06, rgba(255, 255, 255, 0.6))' },
     'spr-icon-hover': { fill: 'var(--spr-icon-hover, #0A0A14)' },
     'spr-icon-disable': { fill: 'var(--spr-icon-disable, #DBDBDB)' },
     'spr-icon-hover-reverse': { fill: 'var(--spr-icon-hover-reverse, #FFFFFF)' },
-    'spr-icon-error': { fill: 'var(--spr-icon-error, #DE336A)' },
+    'spr-icon-error': { fill: 'var(--spr-icon-error, #C70F5C)' },
     'spr-link': { color: 'var(--spr-link, #0E61F6)' },
     'spr-text-01': { color: 'var(--spr-text-01, #0A0A14)' },
-    'spr-text-02': { color: 'var(--spr-text-02, #646470)' },
+    'spr-text-02': { color: 'var(--spr-text-02, #434350)' },
     'spr-text-03': { color: 'var(--spr-text-03, #646470)' },
     'spr-text-04': { color: 'var(--spr-text-04, #0E61F6)' },
     'spr-text-05': { color: 'var(--spr-text-05, #FFFFFF)' },
     'spr-text-06': { color: 'var(--spr-text-06, #FFFFFF)' },
     'spr-text-placeholder': { color: 'var(--spr-text-placeholder, #646470)' },
-    'spr-support-error-text': { color: 'var(--spr-support-error-text, #DE336A)' },
+    'spr-support-error-text': { color: 'var(--spr-support-error-text, #C70F5C)' },
     'spr-support-success-text': { color: 'var(--spr-support-success-text, #6AC96E)' },
     'spr-support-warning-text': { color: 'var(--spr-support-warning-text, #F3BF24)' },
     'spr-hover': { borderColor: 'var(--spr-hover, #0729a0)' },
@@ -114,7 +114,7 @@ var utilities = {
     'spr-border-01': { borderColor: 'var(--spr-border-01, #EEEEEE)' },
     'spr-border-02': { borderColor: 'var(--spr-border-02, #E6E6E9)' },
     'spr-border-03': { borderColor: 'var(--spr-border-03, #DBDBDB)' },
-    'spr-border-04': { borderColor: 'var(--spr-border-04, #A0A0A8)' },
+    'spr-border-04': { borderColor: 'var(--spr-border-04, #818192)' },
     'spr-border-05': { borderColor: 'var(--spr-border-05, #FFFFFF)' },
     'spr-border-06': { borderColor: 'var(--spr-border-06, #0A0A14)' },
     'spr-card-border': { borderColor: 'var(--spr-card-border, #ECECEF)' },