@akinon/ui-theme 0.7.0 → 1.0.0

package/dist/esm/theme.js

@@ -48,7 +48,72 @@ 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',
+            positionAbsolute: 'absolute',
+            positionRelative: 'relative',
+            positionFixed: 'fixed',
+            positionSticky: 'sticky',
+            positionStatic: 'static'
+        },
+        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',
+            textDecorationUnderline: 'underline',
+            textDecorationOverline: 'overline',
+            textDecorationLineThrough: 'line-through'
+        },
+        sizing: {
+            sizeMaxContent: 'max-content',
+            sizeMinContent: 'min-content',
+            sizeFitContent: 'fit-content',
+            valueFull: '100%',
+            valueThreeQuarter: '75%',
+            valueHalf: '50%',
+            valueQuarter: '25%',
+            valueZero: '0',
+            valueAuto: 'auto'
+        },
+        others: {
+            colorTransparent: 'transparent',
+            valueHidden: 'hidden',
+            valueUnset: 'unset',
+            emptyContent: '""',
+            lineHeightShort: '1',
+            lineHeightTall: '2'
+        },
+        border: {
+            borderNone: 'none',
+            borderSolid: 'solid',
+            borderDashed: 'dashed',
+            borderDotted: 'dotted',
+            borderWidthThin: '1px',
+            borderWidthThick: '2px'
+        },
+        overflow: {
+            overflowVisible: 'visible',
+            overflowHidden: 'hidden',
+            overflowScroll: 'scroll'
+        }
+    },
     components: {
+        // TODO: Please order these props alphabetically.
         Button: {
             // type: primary
             colorPrimary: colors.azure['500'],
@@ -106,7 +171,7 @@ export const theme = {
             borderRadius: 5,
             paddingBlock: 10,
             paddingInline: 45,
-            contentLineHeight: 1,
+            contentLineHeight: 'normal',
             fontWeight: 600
         },
         Checkbox: {
@@ -136,21 +201,55 @@ 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'],
+            darkItemColor: colors.gray['500'],
+            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`,
             itemBorderRadius: 0,
             itemMarginBlock: 0,
             itemMarginInline: 0,
-            darkItemColor: colors.gray['500'],
-            itemHeight: fontSize * 3.25
+            itemHeight: 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',
+            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: {
             fontSize: fontSize * 0.625,
@@ -185,6 +284,9 @@ 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,
@@ -249,14 +351,99 @@ 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
+            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'
+                },
+                prevNextButton: {
+                    svgWidth: '10px !important',
+                    svgHeight: '100% !important',
+                    svgFill: `${colors.gray['500']} !important`
+                },
+                slashPadding: '8px !important',
+                lightInputTextColor: `${colors.ebonyClay['960']} !important`,
+                darkInputTextColor: `${colors.neutral['50']} !important`
+            },
+            Table: {
+                totalText: {
+                    width: 'fit-content !important',
+                    fontWeight: '500 !important',
+                    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`,
+                    width: 'fit-content !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`,
+                        fontWeight: '600 !important'
+                    },
+                    icon: {
+                        bgColor: `${colors.neutral['50']} !important`,
+                        textColor: `${colors.gray['500']} !important`,
+                        width: '10px !important',
+                        position: 'relative !important',
+                        fontWeight: '600 !important'
+                    }
+                }
+            },
+            Jumper: {
+                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'
+            }
         },
         Select: {
             colorTextDisabled: colors.ebonyClay['350'],
@@ -264,7 +451,19 @@ 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: {
+            colorBgContainer: 'transparent',
+            rowHoverBg: 'unset',
+            borderColor: colors.neutral['350']
         },
         Input: {
             colorBgContainer: colors.ebonyClay['475'],
@@ -305,45 +504,48 @@ export const theme = {
             badgeColorBackgroundColor: colors.red['425']
         },
         Progress: {
-            strokeColor: colors.green['100'],
-            trailColor: colors.ebonyClay['850'],
+            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 !important',
-            auto: 'auto !important',
-            none: 'none !important',
+            zero: '0',
+            auto: 'auto',
+            none: 'none',
             full: '100% !important',
-            flex: 'flex !important',
+            flex: 'flex',
             rowGap: '10px',
             iconWidthHeight: '38px !important',
             iconSize: '18px !important',
             paddingInlineEnd: '16px',
             tailTop: '16px',
             tailHeight: '3px',
-            titleFontSize: '14px !important',
+            titleFontSize: '14px',
             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`,
+            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'
         },
@@ -368,6 +570,103 @@ export const theme = {
             fontWeight: 500,
             textPaddingInline: 8,
             margin: 48
+        },
+        DatePicker: {
+            general: {
+                fontSize: '14px',
+                fontWeight: '600',
+                fontColor: '#788195',
+                bgDarkBlue: `${colors.ebonyClay['475']}`,
+                wideBorder: '2px solid #262e47',
+                itemCenter: 'center',
+                inputMarginBottom: '7px',
+                inputPadding: '10px 16px !important',
+                lightThemeBorder: '1px solid #c8daec'
+            },
+            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',
+                header: {
+                    marginY: '20px',
+                    padding: '0 22px',
+                    textSize: '16px',
+                    textColor: '#b6c2cf',
+                    arrawWidth: '10.2px',
+                    arrowPaddingLeft: '12px',
+                    arrowPaddingRight: '20px',
+                    datePickerarrowPadding: '0.2px 0.2px 0.2px 0'
+                },
+                body: {
+                    padding: '0 20px'
+                },
+                content: {
+                    tableHeaderBorder: '1px solid #a6c5e228',
+                    tableHeaderFontSize: '12px',
+                    tableHeaderFontColor: '#b6c2cf',
+                    tableHeaderWidth: '36px',
+                    tableHeaderPaddingBottom: '6px'
+                },
+                row: {
+                    marginY: '5px',
+                    previousCellWidth: '36px',
+                    cellLineHeight: '1.43',
+                    cellFontWeight: 'normal',
+                    cellTextColor: '#b6c2cf',
+                    cellBg: '#1d2843',
+                    cellBorder: '2px solid #a6c5e228',
+                    cellBorderRadius: '3px'
+                },
+                separator: {
+                    width: '6px',
+                    height: '2px',
+                    backgroundColor: '#262e47'
+                },
+                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 #4482ff',
+                    borderRadius: '11px',
+                    datePickerBorderTop: '1px solid #a6c5e228',
+                    datePickerPadding: '28px 0 23px',
+                    rangeDirection: 'row',
+                    rangeColGap: '50px',
+                    rangeBorder: '1px solid #a6c5e25c',
+                    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
         }
     }
 };