@akinon/ui-theme 0.7.0 → 1.0.1

package/dist/esm/theme.js

@@ -48,14 +48,99 @@ export const theme = {
         fontFamily: "'Jost Variable'," + antdTheme.getDesignToken().fontFamily,
         fontSize: fontSize * 0.875
     },
+    CustomTokens: {
+        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'
+        }
+    },
+    NavCardTokens: {
+        shadow: '2px 2px 4px 0 rgba(0, 0, 0, 0.2)'
+    },
     components: {
+        // TODO: Please order these props alphabetically.
         Button: {
             // type: primary
             colorPrimary: colors.azure['500'],
             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'],
@@ -64,7 +149,6 @@ export const 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
@@ -72,7 +156,6 @@ export const 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'],
@@ -92,7 +175,6 @@ export const theme = {
             colorTextDisabled: colors.neutral['350'],
             borderColorDisabled: colors.neutral['350'],
             // prop: ghost
-            defaultGhostBorderColor: 'transparent',
             defaultGhostColor: colors.azure['500'],
             // all buttons
             contentFontSizeSM: fontSize * 0.75,
@@ -101,13 +183,15 @@ export const theme = {
             paddingInlineSM: 20,
             colorText: colors.neutral['50'],
             colorTextHover: colors.neutral['50'],
-            contentLineHeightSM: 1,
             controlHeight: 40,
             borderRadius: 5,
             paddingBlock: 10,
             paddingInline: 45,
-            contentLineHeight: 1,
-            fontWeight: 600
+            contentLineHeight: 'normal',
+            fontWeight: 600,
+            defaultShadow: 'none',
+            primaryShadow: 'none',
+            dangerShadow: 'none'
         },
         Checkbox: {
             colorPrimary: colors.ebonyClay['25'],
@@ -136,21 +220,44 @@ export const theme = {
         },
         Layout: {
             headerBg: colors.ebonyClay['500'],
-            siderBg: colors.ebonyClay['500']
+            siderBg: colors.ebonyClay['500'],
+            mainBorder: `1px solid ${colors.gray['900']}`
         },
         Dropdown: {
             colorPrimary: colors.neutral['100'], // primary color (azure500) doesn't work well with dropdown bg
             controlPaddingHorizontal: fontSize
         },
         Menu: {
+            minWidth: '250px',
             darkItemBg: colors.ebonyClay['500'],
             darkSubMenuItemBg: colors.ebonyClay['600'],
             darkItemSelectedBg: colors.ebonyClay['700'],
-            itemBorderRadius: 0,
-            itemMarginBlock: 0,
-            itemMarginInline: 0,
             darkItemColor: colors.gray['500'],
-            itemHeight: fontSize * 3.25
+            lightItemBg: `${colors.neutral['50']} !important`,
+            lightItemMainIconColor: `${colors.azure['500']} !important`,
+            lightItemMainTitle: `${colors.ebonyClay['500']} !important`,
+            LightSubItemBg: `${colors.neutral['90']} !important`,
+            lightSubTitleColor: `${colors.gray['500']} !important`,
+            lightSubIconColor: `${colors.ebonyClay['125']} !important`,
+            lightchildItemBg: `${colors.neutral['350']} !important`,
+            lightChildItemColor: `${colors.ebonyClay['500']} !important`,
+            itemHeight: fontSize * 3.25,
+            mainBorder: `1px solid ${colors.gray['900']}`,
+            mainMenuIconSize: '12px !important',
+            mainMenuExpandIconSize: '16px !important',
+            mainMenuColor: `${colors.neutral['50']} !important`,
+            subMenuTitleColor: `${colors.gray['500']} !important`,
+            subMenuTitleIconMargin: '-25px !important',
+            subMenuOnlyChildSize: '6px !important',
+            subMenuItemSelectedChildColor: `${colors.neutral['50']} !important`,
+            subMenuOnlyChildBgColor: `${colors.ebonyClay['125']} !important`,
+            subMenuOnlyChildMargin: '-23px !important',
+            subMenuIconSize: '10px !important',
+            childMenuItemSelectedChildWidth: '10px !important',
+            childMenuItemSelectedChildHeight: '2px !important',
+            childMenuItemSelectedChildRadius: '1px !important',
+            childMenuItemSelectedChildMargin: '-17px !important',
+            childMenuItemSelectedChildBgColor: `${colors.ebonyClay['125']} !important`
         },
         Breadcrumb: {
             fontSize: fontSize * 0.625,
@@ -165,9 +272,7 @@ export const theme = {
             fontWeight: 600,
             lineHeight: 1.5,
             separatorColor: colors.azure['500'],
-            letterSpacing: fontSize * 0.03,
-            marginInline: 0,
-            height: 'auto'
+            letterSpacing: fontSize * 0.03
         },
         Tag: {
             defaultColorSuccess: colors.green['951'],
@@ -185,12 +290,14 @@ export const theme = {
             defaultColorFailed: colors.red['951'],
             defaultBorderColorFailed: colors.red['450'],
             defaultBgFailed: colors.red['952'],
+            defaultColorEmpty: colors.ebonyClay['400'],
+            defaultBorderColorEmpty: colors.neutral['350'],
+            defaultBgEmpty: colors.neutral['200'],
             borderRadius: 5,
             fontSize: fontSize * 0.8125,
             paddingLeft: 15,
             paddingRight: 15,
-            fontSizeClose: fontSize * 0.6875,
-            fontWeight: 500
+            fontSizeClose: fontSize * 0.6875
         },
         Tooltip: {
             bgColor: colors.ebonyClay['951']
@@ -249,14 +356,73 @@ export const theme = {
             verticalErrorPadding: '7px 0'
         },
         Pagination: {
-            colorText: colors.ebonyClay['950'],
-            itemInputBg: colors.neutral['75'],
-            colorBorder: colors.neutral['350'],
-            borderRadius: 4,
-            itemActiveBg: colors.blue['200'],
-            colorTextDisabled: colors.neutral['375'],
-            marginXS: 0,
-            itemSizeSM: 38
+            fontSize: '14px !important',
+            Simple: {
+                minWidth: '68.56px !important',
+                fontWeight: 'normal !important',
+                color: `${colors.gray['500']} !important`,
+                input: {
+                    textColor: `${colors.ebonyClay['960']} !important`
+                },
+                prevNextButton: {
+                    svgWidth: '10px !important',
+                    svgFill: `${colors.gray['500']} !important`
+                },
+                slashPadding: '8px !important',
+                lightInputTextColor: `${colors.ebonyClay['960']} !important`,
+                darkInputTextColor: `${colors.neutral['50']} !important`
+            },
+            Table: {
+                totalText: {
+                    color: `${colors.gray['500']} !important`,
+                    margin: 'auto 32px !important'
+                },
+                prevNextButton: {
+                    svgWidth: '10px !important',
+                    svgFill: `${colors.gray['500']} !important`,
+                    svgPadding: '14px 14px !important',
+                    svgBorder: `1px solid ${colors.neutral['350']} !important`,
+                    prevSvgBorderRadius: '5px 0 0 5px !important',
+                    nextSvgBorderRadius: '0 5px 5px 0 !important'
+                },
+                pageInfo: {
+                    border: `1px solid ${colors.neutral['350']} !important`,
+                    padding: '12px 10px !important',
+                    currentPageBgColor: `${colors.neutral['75']} !important`,
+                    currentPageMinWidth: '18px !important',
+                    currentPageTextColor: `${colors.ebonyClay['960']} !important`,
+                    currentPageFontWeight: '600 !important',
+                    totalPageBgColor: `${colors.neutral['50']} !important`,
+                    totalPageTextColor: `${colors.gray['500']} !important`
+                },
+                sizeChanger: {
+                    bgColor: `${colors.neutral['50']} !important`,
+                    textColor: `${colors.ebonyClay['951']} !important`,
+                    colGap: '10px !important',
+                    border: `1px solid ${colors.neutral['350']} !important`,
+                    borderRadius: '5px !important',
+                    item1: {
+                        bgColor: `${colors.neutral['50']} !important`,
+                        textColor: `${colors.ebonyClay['951']} !important`,
+                        padding: '10px 16px !important'
+                    },
+                    item2: {
+                        textColor: `${colors.gray['500']} !important`
+                    },
+                    icon: {
+                        bgColor: `${colors.neutral['50']} !important`,
+                        textColor: `${colors.gray['500']} !important`,
+                        width: '10px !important'
+                    }
+                }
+            },
+            Jumper: {
+                border: `1px solid ${colors.neutral['350']} !important`,
+                bgColor: `${colors.neutral['75']} !important`,
+                textColor: `${colors.ebonyClay['960']} !important`,
+                minWidth: '18px',
+                height: 'calc(100% - 3px)'
+            }
         },
         Select: {
             colorTextDisabled: colors.ebonyClay['350'],
@@ -264,7 +430,25 @@ export const theme = {
             colorBgContainer: colors.ebonyClay['475'],
             fontSizeLG: fontSize * 0.875,
             colorBorder: colors.ebonyClay['550'],
-            lineWidth: 2
+            lineWidth: 2,
+            colorBgElevated: '#fffcfc',
+            optionActiveBg: 'rgba(68, 130, 255, 0.2)',
+            colorText: '#9b9b9b',
+            selectedOptionColor: 'black',
+            selectItemBorderShadowColor: '#eaeff0',
+            selectItemBgColor: 'rgba(245, 245, 245, 0.5)',
+            selectItemHoverBgColor: 'rgba(68, 130, 255, 0.2)'
+        },
+        Table: {
+            headerBorderRadius: 0,
+            headerBg: 'transparent',
+            headerColor: '#9b9b9b',
+            headerSplitColor: 'transparent',
+            colorBgContainer: 'transparent',
+            rowHoverBg: 'unset',
+            borderColor: colors.neutral['350'],
+            cellPaddingInline: 0,
+            fontSize: fontSize
         },
         Input: {
             colorBgContainer: colors.ebonyClay['475'],
@@ -287,63 +471,52 @@ export const theme = {
         Modal: {
             titleFontSize: 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.green['100'],
-            trailColor: colors.ebonyClay['850'],
-            borderRadius: '0',
+            strokeColor: colors.ebonyClay['625'],
+            trailColor: colors.neutral['50'],
             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 !important',
-            auto: 'auto !important',
-            none: 'none !important',
-            full: '100% !important',
-            flex: 'flex !important',
             rowGap: '10px',
             iconWidthHeight: '38px !important',
             iconSize: '18px !important',
             paddingInlineEnd: '16px',
             tailTop: '16px',
             tailHeight: '3px',
-            titleFontSize: '14px !important',
-            iconColor: 'white',
-            tailColor: 'linear-gradient(to right, #343639 50%, transparent 50%) !important',
-            tailLastChildColor: 'linear-gradient(to right, #4482ff 50%, transparent 50%) !important',
-            tailFirstChildColor: 'linear-gradient(to right, transparent 50%, #4482ff 50%) !important',
-            tailProcessFirstChildColor: 'linear-gradient(to right, transparent 50%, #3b404c 50%) !important',
-            tailProcessColor: 'linear-gradient(to right, #4482ff 50%, #3b404c 50%) !important',
-            tailWaitLastChildColor: 'linear-gradient(to right, #3b404c 50%, transparent 50%) !important',
-            finishIconBgColor: `${colors.green['952']} !important`,
-            finishTailColor: `${colors.azure['500']} !important`,
-            processIconBgColor: `${colors.orange['425']} !important`,
-            waitIconBgColor: `${colors.neutral['50']} !important`,
-            waitIconColor: `${colors.ebonyClay['951']} !important`,
-            waitTitleColor: `${colors.neutral['50']} !important`,
-            waitTailColor: `${colors.gray['900']} !important`,
+            titleFontSize: '14px',
+            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%)',
+            tailProcessFirstChildColor: 'linear-gradient(to right, transparent 50%, #3b404c 50%)',
+            tailProcessColor: 'linear-gradient(to right, #4482ff 50%, #3b404c 50%)',
+            tailWaitLastChildColor: 'linear-gradient(to right, #3b404c 50%, transparent 50%)',
+            tailWaitMiddleChildColor: `linear-gradient(to right, #4482ff 50%, #3b404c 50%)`,
+            tailErrorChildColor: `linear-gradient(to right, ${colors.red['450']} 50%, #3b404c 50%) !important`,
+            finishIconBgColor: `${colors.green['952']}`,
+            finishTailColor: `${colors.azure['500']}`,
+            processIconBgColor: `${colors.orange['425']}`,
+            waitIconBgColor: `${colors.neutral['50']}`,
+            waitIconColor: `${colors.ebonyClay['951']}`,
+            waitTitleColor: `${colors.neutral['50']}`,
+            waitTailColor: `${colors.gray['900']}`,
+            errorIconBgColor: `${colors.red['450']}`,
             manyItemsTransform: 'rotate(-40deg)',
             manyItemsWidth: '90px',
             manyItemsHeight: '80px',
-            manyItemsWhiteSpace: 'break-spaces',
             manyItemsMarginInlineStart: '40px',
-            manyItemsIconWidthHeight: '22px !important',
+            manyItemsIconWidthHeight: '22px',
             manyItemsTailHeight: '4px',
             manyItemsTailBottom: '10px'
         },
@@ -358,8 +531,7 @@ export const theme = {
             colorTextTertiary: colors.gray['300'],
             handleBg: colors.neutral['80'],
             handleShadow: '1px 1px 2px 0 rgba(156, 169, 194, 0.5)',
-            fontSizeSM: fontSize * 0.5625,
-            innerMinMargin: 0
+            fontSizeSM: fontSize * 0.5625
         },
         Divider: {
             colorSplit: colors.ebonyClay['175'],
@@ -368,6 +540,90 @@ export const theme = {
             fontWeight: 500,
             textPaddingInline: 8,
             margin: 48
+        },
+        DatePicker: {
+            general: {
+                fontSize: '14px',
+                fontColor: colors.gray['500'],
+                bgDarkBlue: colors.ebonyClay['475'],
+                wideBorder: `2px solid ${colors.ebonyClay['550']}`,
+                inputMarginBottom: '7px',
+                inputPadding: '7px 16px !important',
+                lightThemeBorder: `1px solid ${colors.neutral['350']}`
+            },
+            title: {
+                lightColor: `${colors.ebonyClay['500']}`
+            },
+            pickerPanel: {
+                shadow: '0 3px 6px 0 rgba(0, 0, 0, 0.2)',
+                width: '292px',
+                header: {
+                    marginY: '20px',
+                    padding: '0 22px',
+                    textSize: '16px',
+                    textColor: colors.neutral['380'],
+                    arrawWidth: '10.2px',
+                    arrowPaddingLeft: '12px',
+                    arrowPaddingRight: '20px',
+                    datePickerarrowPadding: '0.2px 0.2px 0.2px 0'
+                },
+                body: {
+                    padding: '0 20px'
+                },
+                content: {
+                    tableHeaderBorder: `1px solid ${colors.blue['250-10']}`,
+                    tableHeaderFontSize: '12px',
+                    tableHeaderFontColor: colors.neutral['380'],
+                    tableHeaderWidth: '36px',
+                    tableHeaderPaddingBottom: '6px'
+                },
+                row: {
+                    marginY: '5px',
+                    previousCellWidth: '36px',
+                    cellLineHeight: '1.43',
+                    cellFontWeight: 'normal',
+                    cellTextColor: colors.neutral['380'],
+                    cellBg: colors.ebonyClay['825'],
+                    cellBorder: `2px solid ${colors.blue['250-10']}`,
+                    cellBorderRadius: '3px'
+                },
+                separator: {
+                    width: '6px',
+                    height: '2px',
+                    backgroundColor: colors.ebonyClay['550']
+                },
+                range: {
+                    iconPosition: '10px',
+                    iconTransform: 'translateY(-50%)',
+                    inputPadding: '10px 16px !important',
+                    inputRadius: '5px'
+                },
+                footer: {
+                    margin: '4px 20px 0',
+                    lineHeight: 'normal',
+                    fontSize: '12px',
+                    padding: '0 27px',
+                    border: `1px solid ${colors.azure['500']}`,
+                    borderRadius: '11px',
+                    datePickerBorderTop: `1px solid ${colors.blue['250-10']}`,
+                    datePickerPadding: '28px 0 23px',
+                    rangeColGap: '50px',
+                    rangeBorder: `1px solid ${colors.blue['250-20']}`,
+                    rangePadding: '13px 20px 16px',
+                    rangeCol: '12px',
+                    rangeInputPadding: '10px 12px 10px 16px',
+                    rangeInputRadius: '5px'
+                }
+            }
+        },
+        Upload: {
+            borderRadiusLG: 5,
+            colorFillAlter: colors.ebonyClay['475'],
+            colorError: colors.red['450'],
+            lineWidth: 0,
+            controlHeightLG: 30,
+            paddingXS: 0,
+            svgColor: colors.neutral['1000']
         }
     }
 };