@akinon/ui-theme 1.0.0 → 1.0.2

package/dist/cjs/theme.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getCssVariables = exports.useToken = exports.theme = exports.fontSize = void 0;
+exports.getSafeCustomTokens = getSafeCustomTokens;
 const antd_1 = require("antd");
 const colors_1 = require("./colors");
 // antd works with numbers. use this to convert px to rem.
@@ -51,7 +52,7 @@ exports.theme = {
         fontFamily: "'Jost Variable'," + antd_1.theme.getDesignToken().fontFamily,
         fontSize: exports.fontSize * 0.875
     },
-    customTokens: {
+    CustomTokens: {
         layout: {
             displayFlex: 'flex',
             displayGrid: 'grid',
@@ -59,11 +60,18 @@ exports.theme = {
             displayInline: 'inline',
             displayInlineBlock: 'inline-block',
             displayNone: 'none',
+            displayContents: 'contents',
             positionAbsolute: 'absolute',
             positionRelative: 'relative',
             positionFixed: 'fixed',
             positionSticky: 'sticky',
-            positionStatic: 'static'
+            positionStatic: 'static',
+            flexStart: 'start',
+            flexCenter: 'center',
+            flexDirectionRow: 'row',
+            flexDirectionRowReverse: 'row-reverse',
+            flexDirectionColumn: 'column',
+            flexDirectionColumnReverse: 'column-reverse'
         },
         typography: {
             textTransformUppercase: 'uppercase',
@@ -78,9 +86,13 @@ exports.theme = {
             whiteSpacePre: 'pre',
             whiteSpacePreLine: 'pre-line',
             whiteSpacePreWrap: 'pre-wrap',
+            whiteSpaceBreakSpaces: 'break-spaces',
+            wordBreak: 'break-word',
             textDecorationUnderline: 'underline',
             textDecorationOverline: 'overline',
-            textDecorationLineThrough: 'line-through'
+            textDecorationLineThrough: 'line-through',
+            fontWeightBold: '600',
+            fontWeightMedium: '500'
         },
         sizing: {
             sizeMaxContent: 'max-content',
@@ -91,7 +103,8 @@ exports.theme = {
             valueHalf: '50%',
             valueQuarter: '25%',
             valueZero: '0',
-            valueAuto: 'auto'
+            valueAuto: 'auto',
+            valueInherit: 'inherit'
         },
         others: {
             colorTransparent: 'transparent',
@@ -99,7 +112,12 @@ exports.theme = {
             valueUnset: 'unset',
             emptyContent: '""',
             lineHeightShort: '1',
-            lineHeightTall: '2'
+            lineHeightTall: '2',
+            cursorNotAllowed: 'not-allowed',
+            cursorPointer: 'pointer',
+            verticalAlignMiddle: 'middle',
+            opacityFull: '1',
+            opacityNone: '0'
         },
         border: {
             borderNone: 'none',
@@ -107,7 +125,8 @@ exports.theme = {
             borderDashed: 'dashed',
             borderDotted: 'dotted',
             borderWidthThin: '1px',
-            borderWidthThick: '2px'
+            borderWidthThick: '2px',
+            borderRadiusSm: '0.125rem'
         },
         overflow: {
             overflowVisible: 'visible',
@@ -115,6 +134,9 @@ exports.theme = {
             overflowScroll: 'scroll'
         }
     },
+    NavCardTokens: {
+        shadow: '2px 2px 4px 0 rgba(0, 0, 0, 0.2)'
+    },
     components: {
         // TODO: Please order these props alphabetically.
         Button: {
@@ -123,7 +145,6 @@ exports.theme = {
             colorPrimaryHover: colors.azure['600'],
             colorPrimaryActive: colors.azure['700'],
             colorPrimaryText: colors.neutral['50'],
-            primaryShadow: 'unset',
             // type: default (secondary)
             defaultBg: colors.neutral['50'],
             defaultColor: colors.azure['500'],
@@ -132,7 +153,6 @@ exports.theme = {
             defaultActiveBg: colors.neutral['50'],
             defaultActiveColor: colors.azure['500'],
             defaultBorderColor: colors.azure['500'],
-            defaultShadow: 'unset',
             defaultBgSm: colors.gray['750'],
             defaultBgSmHover: colors.gray['800'],
             // prop: danger
@@ -140,7 +160,6 @@ exports.theme = {
             colorErrorHover: colors.red['500'],
             colorErrorActive: colors.red['600'],
             colorErrorBorder: colors.red['500'],
-            dangerShadow: 'unset',
             colorErrorBgSM: colors.red['425'],
             colorErrorBgSMHover: colors.red['450'],
             colorErrorSMHover: colors.neutral['50'],
@@ -160,7 +179,6 @@ exports.theme = {
             colorTextDisabled: colors.neutral['350'],
             borderColorDisabled: colors.neutral['350'],
             // prop: ghost
-            defaultGhostBorderColor: 'transparent',
             defaultGhostColor: colors.azure['500'],
             // all buttons
             contentFontSizeSM: exports.fontSize * 0.75,
@@ -169,13 +187,15 @@ exports.theme = {
             paddingInlineSM: 20,
             colorText: colors.neutral['50'],
             colorTextHover: colors.neutral['50'],
-            contentLineHeightSM: 1,
             controlHeight: 40,
             borderRadius: 5,
             paddingBlock: 10,
             paddingInline: 45,
             contentLineHeight: 'normal',
-            fontWeight: 600
+            fontWeight: 600,
+            defaultShadow: 'none',
+            primaryShadow: 'none',
+            dangerShadow: 'none'
         },
         Checkbox: {
             colorPrimary: colors.ebonyClay['25'],
@@ -225,33 +245,22 @@ exports.theme = {
             lightSubIconColor: `${colors.ebonyClay['125']} !important`,
             lightchildItemBg: `${colors.neutral['350']} !important`,
             lightChildItemColor: `${colors.ebonyClay['500']} !important`,
-            itemBorderRadius: 0,
-            itemMarginBlock: 0,
-            itemMarginInline: 0,
             itemHeight: exports.fontSize * 3.25,
-            none: 'none !important',
-            unset: 'unset !important',
-            iconPosition: 'absolute !important',
             mainBorder: `1px solid ${colors.gray['900']}`,
             mainMenuIconSize: '12px !important',
             mainMenuExpandIconSize: '16px !important',
-            mainMenuColor: colors.neutral['50'],
-            mainMenuFontWeight: '600 !important',
+            mainMenuColor: `${colors.neutral['50']} !important`,
             subMenuTitleColor: `${colors.gray['500']} !important`,
             subMenuTitleIconMargin: '-25px !important',
-            subMenufontWeigth: '500 !important',
             subMenuOnlyChildSize: '6px !important',
             subMenuItemSelectedChildColor: `${colors.neutral['50']} !important`,
-            subMenuOnlyChildRadius: '50% !important',
             subMenuOnlyChildBgColor: `${colors.ebonyClay['125']} !important`,
             subMenuOnlyChildMargin: '-23px !important',
-            subMenuOnlyChildOpacity: '1 !important',
             subMenuIconSize: '10px !important',
             childMenuItemSelectedChildWidth: '10px !important',
             childMenuItemSelectedChildHeight: '2px !important',
             childMenuItemSelectedChildRadius: '1px !important',
             childMenuItemSelectedChildMargin: '-17px !important',
-            childMenuItemSelectedChildOpacity: '1 !important',
             childMenuItemSelectedChildBgColor: `${colors.ebonyClay['125']} !important`
         },
         Breadcrumb: {
@@ -267,9 +276,7 @@ exports.theme = {
             fontWeight: 600,
             lineHeight: 1.5,
             separatorColor: colors.azure['500'],
-            letterSpacing: exports.fontSize * 0.03,
-            marginInline: 0,
-            height: 'auto'
+            letterSpacing: exports.fontSize * 0.03
         },
         Tag: {
             defaultColorSuccess: colors.green['951'],
@@ -294,8 +301,7 @@ exports.theme = {
             fontSize: exports.fontSize * 0.8125,
             paddingLeft: 15,
             paddingRight: 15,
-            fontSizeClose: exports.fontSize * 0.6875,
-            fontWeight: 500
+            fontSizeClose: exports.fontSize * 0.6875
         },
         Tooltip: {
             bgColor: colors.ebonyClay['951']
@@ -354,32 +360,16 @@ exports.theme = {
             verticalErrorPadding: '7px 0'
         },
         Pagination: {
-            zero: '0 !important',
-            none: 'none !important',
-            unset: 'unset !important',
-            maxContent: 'max-content !important',
             fontSize: '14px !important',
-            transparent: 'transparent !important',
-            displayFlex: 'flex !important',
-            displayFlexRow: 'row !important',
-            displayContents: 'contents !important',
-            displayGrid: 'grid !important',
-            center: 'center !important',
-            full: '100% !important',
-            lineHeight: '1 !important',
-            auto: 'auto !important',
-            hidden: 'hidden !important',
             Simple: {
                 minWidth: '68.56px !important',
                 fontWeight: 'normal !important',
                 color: `${colors.gray['500']} !important`,
                 input: {
-                    textColor: `${colors.ebonyClay['960']} !important`,
-                    fontWeight: '600 !important'
+                    textColor: `${colors.ebonyClay['960']} !important`
                 },
                 prevNextButton: {
                     svgWidth: '10px !important',
-                    svgHeight: '100% !important',
                     svgFill: `${colors.gray['500']} !important`
                 },
                 slashPadding: '8px !important',
@@ -388,8 +378,6 @@ exports.theme = {
             },
             Table: {
                 totalText: {
-                    width: 'fit-content !important',
-                    fontWeight: '500 !important',
                     color: `${colors.gray['500']} !important`,
                     margin: 'auto 32px !important'
                 },
@@ -414,7 +402,6 @@ exports.theme = {
                 sizeChanger: {
                     bgColor: `${colors.neutral['50']} !important`,
                     textColor: `${colors.ebonyClay['951']} !important`,
-                    width: 'fit-content !important',
                     colGap: '10px !important',
                     border: `1px solid ${colors.neutral['350']} !important`,
                     borderRadius: '5px !important',
@@ -424,15 +411,12 @@ exports.theme = {
                         padding: '10px 16px !important'
                     },
                     item2: {
-                        textColor: `${colors.gray['500']} !important`,
-                        fontWeight: '600 !important'
+                        textColor: `${colors.gray['500']} !important`
                     },
                     icon: {
                         bgColor: `${colors.neutral['50']} !important`,
                         textColor: `${colors.gray['500']} !important`,
-                        width: '10px !important',
-                        position: 'relative !important',
-                        fontWeight: '600 !important'
+                        width: '10px !important'
                     }
                 }
             },
@@ -440,12 +424,8 @@ exports.theme = {
                 border: `1px solid ${colors.neutral['350']} !important`,
                 bgColor: `${colors.neutral['75']} !important`,
                 textColor: `${colors.ebonyClay['960']} !important`,
-                fontWeight: '600',
                 minWidth: '18px',
-                height: 'calc(100% - 3px)',
-                spanVisibility: 'hidden',
-                spanWhiteSpace: 'pre',
-                spanPosition: 'absolute'
+                height: 'calc(100% - 3px)'
             }
         },
         Select: {
@@ -464,9 +444,15 @@ exports.theme = {
             selectItemHoverBgColor: 'rgba(68, 130, 255, 0.2)'
         },
         Table: {
+            headerBorderRadius: 0,
+            headerBg: 'transparent',
+            headerColor: '#9b9b9b',
+            headerSplitColor: 'transparent',
             colorBgContainer: 'transparent',
             rowHoverBg: 'unset',
-            borderColor: colors.neutral['350']
+            borderColor: colors.neutral['350'],
+            cellPaddingInline: 0,
+            fontSize: exports.fontSize
         },
         Input: {
             colorBgContainer: colors.ebonyClay['475'],
@@ -489,36 +475,23 @@ exports.theme = {
         Modal: {
             titleFontSize: exports.fontSize * 1.25,
             padding: '20px 35px',
-            fontWeight: 500,
             borderBottom: `1px solid ${colors.blue['954']}`,
             footerPadding: '0 35px 20px 35px',
             closeIconColor: colors.neutral['100'],
-            contentPadding: 0,
-            footerMarginTop: 0,
             closeTop: 20,
             closeRight: 27,
-            headerMarginBottom: 0,
-            badgeColorContent: '',
             badgeColorTop: 27,
-            badgeColorLeft: 0,
             badgeColorWidth: 4,
             badgeColorHeight: 16,
-            badgeColorPosition: 'absolute',
             badgeColorBackgroundColor: colors.red['425']
         },
         Progress: {
             strokeColor: colors.ebonyClay['625'],
             trailColor: colors.neutral['50'],
-            borderRadius: '0',
             height: '18px !important',
             successBgColor: 'repeating-linear-gradient(60deg, rgba(36, 180, 19, 1) 0, rgba(36, 180, 19, 1) 5px, rgba(72, 192, 62, 1) 5px, rgba(72, 192, 62, 1) 10px) !important'
         },
         Steps: {
-            zero: '0',
-            auto: 'auto',
-            none: 'none',
-            full: '100% !important',
-            flex: 'flex',
             rowGap: '10px',
             iconWidthHeight: '38px !important',
             iconSize: '18px !important',
@@ -526,7 +499,7 @@ exports.theme = {
             tailTop: '16px',
             tailHeight: '3px',
             titleFontSize: '14px',
-            iconColor: 'white',
+            iconColor: colors.neutral['50'],
             tailColor: 'linear-gradient(to right, #343639 50%, transparent 50%)',
             tailLastChildColor: 'linear-gradient(to right, #4482ff 50%, transparent 50%)',
             tailFirstChildColor: 'linear-gradient(to right, transparent 50%, #4482ff 50%)',
@@ -546,7 +519,6 @@ exports.theme = {
             manyItemsTransform: 'rotate(-40deg)',
             manyItemsWidth: '90px',
             manyItemsHeight: '80px',
-            manyItemsWhiteSpace: 'break-spaces',
             manyItemsMarginInlineStart: '40px',
             manyItemsIconWidthHeight: '22px',
             manyItemsTailHeight: '4px',
@@ -563,8 +535,7 @@ exports.theme = {
             colorTextTertiary: colors.gray['300'],
             handleBg: colors.neutral['80'],
             handleShadow: '1px 1px 2px 0 rgba(156, 169, 194, 0.5)',
-            fontSizeSM: exports.fontSize * 0.5625,
-            innerMinMargin: 0
+            fontSizeSM: exports.fontSize * 0.5625
         },
         Divider: {
             colorSplit: colors.ebonyClay['175'],
@@ -577,29 +548,16 @@ exports.theme = {
         DatePicker: {
             general: {
                 fontSize: '14px',
-                fontWeight: '600',
-                fontColor: '#788195',
-                bgDarkBlue: `${colors.ebonyClay['475']}`,
-                wideBorder: '2px solid #262e47',
-                itemCenter: 'center',
+                fontColor: colors.gray['500'],
+                bgDarkBlue: colors.ebonyClay['475'],
+                wideBorder: `2px solid ${colors.ebonyClay['550']}`,
                 inputMarginBottom: '7px',
-                inputPadding: '10px 16px !important',
-                lightThemeBorder: '1px solid #c8daec'
+                inputPadding: '7px 16px !important',
+                lightThemeBorder: `1px solid ${colors.neutral['350']}`
             },
             title: {
                 lightColor: `${colors.ebonyClay['500']}`
             },
-            pickerTriangle: {
-                transform: 'translateX(-50%)',
-                beforeTop: '-8px',
-                beforeBorderX: '12px solid transparent',
-                beforeBorderBottom: '9px solid #262e47',
-                beforeZIndex: '1',
-                afterTop: '-6px',
-                afterBorderX: '10px solid transparent',
-                afterBorderBottom: '8px solid #2b344c',
-                afterZIndex: '2'
-            },
             pickerPanel: {
                 shadow: '0 3px 6px 0 rgba(0, 0, 0, 0.2)',
                 width: '292px',
@@ -607,7 +565,7 @@ exports.theme = {
                     marginY: '20px',
                     padding: '0 22px',
                     textSize: '16px',
-                    textColor: '#b6c2cf',
+                    textColor: colors.neutral['380'],
                     arrawWidth: '10.2px',
                     arrowPaddingLeft: '12px',
                     arrowPaddingRight: '20px',
@@ -617,9 +575,9 @@ exports.theme = {
                     padding: '0 20px'
                 },
                 content: {
-                    tableHeaderBorder: '1px solid #a6c5e228',
+                    tableHeaderBorder: `1px solid ${colors.blue['250-10']}`,
                     tableHeaderFontSize: '12px',
-                    tableHeaderFontColor: '#b6c2cf',
+                    tableHeaderFontColor: colors.neutral['380'],
                     tableHeaderWidth: '36px',
                     tableHeaderPaddingBottom: '6px'
                 },
@@ -628,15 +586,15 @@ exports.theme = {
                     previousCellWidth: '36px',
                     cellLineHeight: '1.43',
                     cellFontWeight: 'normal',
-                    cellTextColor: '#b6c2cf',
-                    cellBg: '#1d2843',
-                    cellBorder: '2px solid #a6c5e228',
+                    cellTextColor: colors.neutral['380'],
+                    cellBg: colors.ebonyClay['825'],
+                    cellBorder: `2px solid ${colors.blue['250-10']}`,
                     cellBorderRadius: '3px'
                 },
                 separator: {
                     width: '6px',
                     height: '2px',
-                    backgroundColor: '#262e47'
+                    backgroundColor: colors.ebonyClay['550']
                 },
                 range: {
                     iconPosition: '10px',
@@ -649,13 +607,12 @@ exports.theme = {
                     lineHeight: 'normal',
                     fontSize: '12px',
                     padding: '0 27px',
-                    border: '1px solid #4482ff',
+                    border: `1px solid ${colors.azure['500']}`,
                     borderRadius: '11px',
-                    datePickerBorderTop: '1px solid #a6c5e228',
+                    datePickerBorderTop: `1px solid ${colors.blue['250-10']}`,
                     datePickerPadding: '28px 0 23px',
-                    rangeDirection: 'row',
                     rangeColGap: '50px',
-                    rangeBorder: '1px solid #a6c5e25c',
+                    rangeBorder: `1px solid ${colors.blue['250-20']}`,
                     rangePadding: '13px 20px 16px',
                     rangeCol: '12px',
                     rangeInputPadding: '10px 12px 10px 16px',
@@ -669,10 +626,119 @@ exports.theme = {
             colorError: colors.red['450'],
             lineWidth: 0,
             controlHeightLG: 30,
-            paddingXS: 0
+            paddingXS: 0,
+            svgColor: colors.neutral['1000']
         }
     }
 };
+/**
+ * Default CustomTokens fallback values to prevent undefined access errors.
+ * This provides a complete fallback structure matching the CustomTokens interface.
+ */
+const defaultCustomTokens = {
+    layout: {
+        displayFlex: 'flex',
+        displayGrid: 'grid',
+        displayBlock: 'block',
+        displayInline: 'inline',
+        displayInlineBlock: 'inline-block',
+        displayNone: 'none',
+        displayContents: 'contents',
+        positionAbsolute: 'absolute',
+        positionRelative: 'relative',
+        positionFixed: 'fixed',
+        positionSticky: 'sticky',
+        positionStatic: 'static',
+        flexStart: 'start',
+        flexCenter: 'center',
+        flexDirectionRow: 'row',
+        flexDirectionRowReverse: 'row-reverse',
+        flexDirectionColumn: 'column',
+        flexDirectionColumnReverse: 'column-reverse'
+    },
+    typography: {
+        textTransformUppercase: 'uppercase',
+        textTransformLowercase: 'lowercase',
+        textTransformCapitalize: 'capitalize',
+        textAlignLeft: 'left',
+        textAlignCenter: 'center',
+        textAlignRight: 'right',
+        textAlignJustify: 'justify',
+        whiteSpaceNormal: 'normal',
+        whiteSpaceNoWrap: 'nowrap',
+        whiteSpacePre: 'pre',
+        whiteSpacePreLine: 'pre-line',
+        whiteSpacePreWrap: 'pre-wrap',
+        whiteSpaceBreakSpaces: 'break-spaces',
+        wordBreak: 'break-word',
+        textDecorationUnderline: 'underline',
+        textDecorationOverline: 'overline',
+        textDecorationLineThrough: 'line-through',
+        fontWeightBold: '600',
+        fontWeightMedium: '500'
+    },
+    sizing: {
+        sizeMaxContent: 'max-content',
+        sizeMinContent: 'min-content',
+        sizeFitContent: 'fit-content',
+        valueFull: '100%',
+        valueThreeQuarter: '75%',
+        valueHalf: '50%',
+        valueQuarter: '25%',
+        valueZero: '0',
+        valueAuto: 'auto',
+        valueInherit: 'inherit'
+    },
+    others: {
+        colorTransparent: 'transparent',
+        valueHidden: 'hidden',
+        valueUnset: 'unset',
+        emptyContent: '""',
+        lineHeightShort: '1',
+        lineHeightTall: '2',
+        cursorNotAllowed: 'not-allowed',
+        cursorPointer: 'pointer',
+        verticalAlignMiddle: 'middle',
+        opacityFull: '1',
+        opacityNone: '0'
+    },
+    border: {
+        borderNone: 'none',
+        borderSolid: 'solid',
+        borderDashed: 'dashed',
+        borderDotted: 'dotted',
+        borderWidthThin: '1px',
+        borderWidthThick: '2px',
+        borderRadiusSm: '0.125rem'
+    },
+    overflow: {
+        overflowVisible: 'visible',
+        overflowHidden: 'hidden',
+        overflowScroll: 'scroll'
+    }
+};
+/**
+ * Safely retrieves CustomTokens from theme with fallback to default values.
+ * This prevents undefined access errors when theme is not properly initialized.
+ *
+ * @param theme - The theme object from ConfigProvider context
+ * @returns CustomTokens with guaranteed defined values
+ */
+function getSafeCustomTokens(theme) {
+    const themeCustomTokens = theme === null || theme === void 0 ? void 0 : theme.CustomTokens;
+    if (!themeCustomTokens) {
+        return defaultCustomTokens;
+    }
+    // Deep merge to ensure all nested properties are available
+    return {
+        layout: Object.assign(Object.assign({}, defaultCustomTokens.layout), themeCustomTokens.layout),
+        typography: Object.assign(Object.assign({}, defaultCustomTokens.typography), themeCustomTokens.typography),
+        sizing: Object.assign(Object.assign({}, defaultCustomTokens.sizing), themeCustomTokens.sizing),
+        others: Object.assign(Object.assign({}, defaultCustomTokens.others), themeCustomTokens.others),
+        border: Object.assign(Object.assign({}, defaultCustomTokens.border), themeCustomTokens.border),
+        overflow: Object.assign(Object.assign({}, defaultCustomTokens.overflow), themeCustomTokens.overflow)
+    };
+}
 /**
  * Used to access antd's token values from react components.
  * For detailed usage see,