@sprinklrjs/spaceweb-themes 11.0.0 → 12.14.4

package/hyperspace/light/index.d.ts

@@ -2,7 +2,6 @@ declare const _default: {
     theme: {
         name: string;
         htmlFontSize: string;
-        density: string;
         typography: {
             h1: {
                 fontSize: string;
@@ -110,10 +109,33 @@ declare const _default: {
                 hoverBackgroundColor: string;
                 activeBackgroundColor: string;
             };
+            sizeXxxs: {
+                minWidth: string;
+                paddingY: string;
+                paddingX: string;
+                borderRadius: string;
+                fontStyles: {
+                    fontSize: string;
+                    lineHeight: string;
+                    fontWeight: number;
+                };
+            };
+            sizeXxs: {
+                minWidth: string;
+                paddingY: string;
+                paddingX: string;
+                borderRadius: string;
+                fontStyles: {
+                    fontSize: string;
+                    lineHeight: string;
+                    fontWeight: number;
+                };
+            };
             sizeXs: {
                 minWidth: string;
                 paddingY: string;
                 paddingX: string;
+                borderRadius: string;
                 fontStyles: {
                     fontSize: string;
                     lineHeight: string;
@@ -163,6 +185,11 @@ declare const _default: {
         };
         iconButton: {
             minWidth: string;
+            sizeXxxxs: {
+                buttonSize: number;
+                iconSize: number;
+                squareBorderRadius: number;
+            };
             sizeXxxs: {
                 buttonSize: number;
                 iconSize: number;
@@ -181,7 +208,6 @@ declare const _default: {
             sizeSm: {
                 buttonSize: number;
                 iconSize: number;
-                squareBorderRadius: number;
             };
             sizeMd: {
                 buttonSize: number;
@@ -246,6 +272,20 @@ declare const _default: {
         input: {
             borderRadius: string;
             disabledBorderColor: string;
+            sizeXxxs: {
+                borderRadius: string;
+                paddingX: string;
+                paddingY: string;
+                fontSize: string;
+                lineHeight: string;
+            };
+            sizeXs: {
+                borderRadius: string;
+                paddingX: string;
+                paddingY: string;
+                fontSize: string;
+                lineHeight: string;
+            };
             sizeSm: {
                 paddingX: string;
                 paddingY: string;
@@ -266,24 +306,35 @@ declare const _default: {
             };
         };
         multiSelect: {
-            tagBorderRadius: string;
-            sizeSm: {
+            sizeXxxs: {
+                paddingX: string;
                 paddingY: string;
-                tagHeight: string;
                 tagMarginX: string;
                 tagMarginY: string;
             };
-            sizeMd: {
+            sizeXs: {
+                paddingX: string;
+                paddingY: string;
+                tagMarginY: string;
+                tagMarginX: string;
+            };
+            sizeSm: {
+                paddingX: string;
                 paddingY: string;
-                tagHeight: string;
+                tagMarginY: string;
                 tagMarginX: string;
+            };
+            sizeMd: {
+                paddingX: string;
+                paddingY: string;
                 tagMarginY: string;
+                tagMarginX: string;
             };
             sizeLg: {
+                paddingX: string;
                 paddingY: string;
-                tagHeight: string;
-                tagMarginX: string;
                 tagMarginY: string;
+                tagMarginX: string;
             };
         };
         link: {
@@ -316,15 +367,8 @@ declare const _default: {
             };
         };
         tag: {
-            borderRadius: string;
             actionButtonBorderRadius: string;
             avatarMarginLeft: string;
-            sizeSm: {
-                height: string;
-            };
-            sizeLg: {
-                height: string;
-            };
         };
         app: {
             header: string;
@@ -2320,6 +2364,18 @@ 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-px': {
             marginTop: any;
             marginBottom: any;
@@ -2644,6 +2700,22 @@ 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-px': {
             marginTop: string;
             marginBottom: string;
@@ -3108,6 +3180,30 @@ declare const _default: {
         '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;
         };

package/hyperspace/light/theme.d.ts

@@ -1,7 +1,6 @@
 declare const _default: {
     name: string;
     htmlFontSize: string;
-    density: string;
     typography: {
         h1: {
             fontSize: string;
@@ -109,10 +108,33 @@ declare const _default: {
             hoverBackgroundColor: string;
             activeBackgroundColor: string;
         };
+        sizeXxxs: {
+            minWidth: string;
+            paddingY: string;
+            paddingX: string;
+            borderRadius: string;
+            fontStyles: {
+                fontSize: string;
+                lineHeight: string;
+                fontWeight: number;
+            };
+        };
+        sizeXxs: {
+            minWidth: string;
+            paddingY: string;
+            paddingX: string;
+            borderRadius: string;
+            fontStyles: {
+                fontSize: string;
+                lineHeight: string;
+                fontWeight: number;
+            };
+        };
         sizeXs: {
             minWidth: string;
             paddingY: string;
             paddingX: string;
+            borderRadius: string;
             fontStyles: {
                 fontSize: string;
                 lineHeight: string;
@@ -162,6 +184,11 @@ declare const _default: {
     };
     iconButton: {
         minWidth: string;
+        sizeXxxxs: {
+            buttonSize: number;
+            iconSize: number;
+            squareBorderRadius: number;
+        };
         sizeXxxs: {
             buttonSize: number;
             iconSize: number;
@@ -180,7 +207,6 @@ declare const _default: {
         sizeSm: {
             buttonSize: number;
             iconSize: number;
-            squareBorderRadius: number;
         };
         sizeMd: {
             buttonSize: number;
@@ -245,6 +271,20 @@ declare const _default: {
     input: {
         borderRadius: string;
         disabledBorderColor: string;
+        sizeXxxs: {
+            borderRadius: string;
+            paddingX: string;
+            paddingY: string;
+            fontSize: string;
+            lineHeight: string;
+        };
+        sizeXs: {
+            borderRadius: string;
+            paddingX: string;
+            paddingY: string;
+            fontSize: string;
+            lineHeight: string;
+        };
         sizeSm: {
             paddingX: string;
             paddingY: string;
@@ -265,24 +305,35 @@ declare const _default: {
         };
     };
     multiSelect: {
-        tagBorderRadius: string;
-        sizeSm: {
+        sizeXxxs: {
+            paddingX: string;
             paddingY: string;
-            tagHeight: string;
             tagMarginX: string;
             tagMarginY: string;
         };
-        sizeMd: {
+        sizeXs: {
+            paddingX: string;
+            paddingY: string;
+            tagMarginY: string;
+            tagMarginX: string;
+        };
+        sizeSm: {
+            paddingX: string;
             paddingY: string;
-            tagHeight: string;
+            tagMarginY: string;
             tagMarginX: string;
+        };
+        sizeMd: {
+            paddingX: string;
+            paddingY: string;
             tagMarginY: string;
+            tagMarginX: string;
         };
         sizeLg: {
+            paddingX: string;
             paddingY: string;
-            tagHeight: string;
-            tagMarginX: string;
             tagMarginY: string;
+            tagMarginX: string;
         };
     };
     link: {
@@ -315,15 +366,8 @@ declare const _default: {
         };
     };
     tag: {
-        borderRadius: string;
         actionButtonBorderRadius: string;
         avatarMarginLeft: string;
-        sizeSm: {
-            height: string;
-        };
-        sizeLg: {
-            height: string;
-        };
     };
     app: {
         header: string;

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: 34, 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)',
@@ -255,7 +267,7 @@ var theme = {
         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, #434350)',
@@ -264,7 +276,7 @@ var theme = {
         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)',

package/hyperspace/light/utilities.d.ts

@@ -1518,6 +1518,18 @@ 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-px': {
         marginTop: any;
         marginBottom: any;
@@ -1842,6 +1854,22 @@ 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-px': {
         marginTop: string;
         marginBottom: string;
@@ -2306,6 +2334,30 @@ declare const _default: {
     '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;
     };

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))'
@@ -97,7 +97,7 @@ var utilities = {
     '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, #434350)' },
@@ -106,7 +106,7 @@ var utilities = {
     '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)' },