@sprinklrjs/spaceweb-themes 11.0.0 → 12.14.4

package/common-theme/theme.js

@@ -91,7 +91,7 @@ var theme = {
         10: '4rem',
         11: '4.4rem',
         12: '4.8rem',
-        15: '0.6rem',
+        15: '-0.6rem',
         16: '6.4rem',
         20: '8rem',
         24: '9.6rem',
@@ -101,7 +101,7 @@ var theme = {
         56: '22.4rem',
         64: '25.6rem',
         auto: 'auto',
-        '05': '0.2rem',
+        '05': '-0.2rem',
         px: '-1px',
         '-1': '-0.4rem',
         '-2': '-0.8rem',

package/common-theme/utilities.d.ts

@@ -1156,6 +1156,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;
@@ -1480,6 +1492,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;
@@ -1944,6 +1972,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/common-theme/utilities.js

@@ -343,6 +343,8 @@ exports["default"] = {
         'm-auto': margin('auto'),
         'm-1.5': margin('0.6rem'),
         'm-0.5': margin('0.2rem'),
+        '-m-1.5': margin('-0.6rem'),
+        '-m-0.5': margin('-0.2rem'),
         'm-px': margin('1px'),
         '-m-1': margin('-0.4rem'),
         '-m-2': margin('-0.8rem'),
@@ -413,6 +415,10 @@ exports["default"] = {
         'mx-1.5': { marginLeft: '0.6rem', marginRight: '0.6rem' },
         'my-0.5': { marginTop: '0.2rem', marginBottom: '0.2rem' },
         'mx-0.5': { marginLeft: '0.2rem', marginRight: '0.2rem' },
+        '-my-1.5': { marginTop: '-0.6rem', marginBottom: '-0.6rem' },
+        '-mx-1.5': { marginLeft: '-0.6rem', marginRight: '-0.6rem' },
+        '-my-0.5': { marginTop: '-0.2rem', marginBottom: '-0.2rem' },
+        '-mx-0.5': { marginLeft: '-0.2rem', marginRight: '-0.2rem' },
         'my-px': { marginTop: '1px', marginBottom: '1px' },
         'mx-px': { marginLeft: '1px', marginRight: '1px' },
         '-my-1': { marginTop: '-0.4rem', marginBottom: '-0.4rem' },
@@ -553,6 +559,14 @@ exports["default"] = {
         'mr-0.5': { marginRight: '0.2rem' },
         'mb-0.5': { marginBottom: '0.2rem' },
         'ml-0.5': { marginLeft: '0.2rem' },
+        '-mt-1.5': { marginTop: '-0.6rem' },
+        '-mr-1.5': { marginRight: '-0.6rem' },
+        '-mb-1.5': { marginBottom: '-0.6rem' },
+        '-ml-1.5': { marginLeft: '-0.6rem' },
+        '-mt-0.5': { marginTop: '-0.2rem' },
+        '-mr-0.5': { marginRight: '-0.2rem' },
+        '-mb-0.5': { marginBottom: '-0.2rem' },
+        '-ml-0.5': { marginLeft: '-0.2rem' },
         'mt-px': { marginTop: '1px' },
         'mr-px': { marginRight: '1px' },
         'mb-px': { marginBottom: '1px' },

package/hyperspace/dark/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/dark/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/dark/theme.js

@@ -16,7 +16,6 @@ var theme_1 = require("../../common-theme/theme");
 var theme = {
     name: 'hyperspace-dark',
     htmlFontSize: '10px',
-    density: 'COMFORTABLE',
     typography: {
         h1: { fontSize: '4.2rem', lineHeight: '4.8rem', fontWeight: 600 },
         h2: { fontSize: '2.4rem', lineHeight: '2.9rem', fontWeight: 600 },
@@ -46,46 +45,62 @@ var theme = {
             hoverBackgroundColor: 'var(--spr-ui-02, #212123)',
             activeBackgroundColor: 'var(--spr-ui-05, #3A3A3E)'
         },
-        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, #F1F1F1)',
             hoverColor: 'var(--spr-icon-01, #F1F1F1)',
@@ -136,16 +151,19 @@ 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, #646469)',
+        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, #3A3A3E)' },
@@ -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: '#000',
         headerTab: 'rgba(44, 44, 47, 0.6)',

package/hyperspace/dark/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;
     };