@akinon/ui-theme 1.0.0 → 1.0.1

package/dist/cjs/colors.d.ts

@@ -9,6 +9,7 @@ export declare const neutral: {
     '250': string;
     '300': string;
     '350': string;
+    '380': string;
     '375': string;
     '400': string;
     '500': string;
@@ -40,6 +41,7 @@ export declare const ebonyClay: {
     '625': string;
     '700': string;
     '800': string;
+    '825': string;
     '850': string;
     '900': string;
     '950': string;
@@ -104,6 +106,10 @@ export declare const blue: {
     '50': string;
     '100': string;
     '200': string;
+    '250': string;
+    '251': string;
+    '250-10': string;
+    '250-20': string;
     '300': string;
     '400': string;
     '500': string;
@@ -116,6 +122,7 @@ export declare const blue: {
     '952': string;
     '953': string;
     '954': string;
+    '955': string;
 };
 export declare const purple: {
     '50': string;

package/dist/cjs/colors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/colors.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;CAqBnB,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;CAyBrB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;CAgBhB,CAAC;AAEF,eAAO,MAAM,GAAG;;;;;;;;;;;;;;;;;CAiBf,CAAC;AAEF,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;CAkBjB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;CAgBhB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;CAelB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;;;;;;;;;CAYhB,CAAC;AAGF,eAAO,MAAM,KAAK;;;;;;;;;;;;CAYjB,CAAC;AAGF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;CAkBlB,CAAC;AAGF,eAAO,MAAM,MAAM;;;;;;;;;;;;CAYlB,CAAC"}
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/colors.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;CAsBnB,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BrB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;CAgBhB,CAAC;AAEF,eAAO,MAAM,GAAG;;;;;;;;;;;;;;;;;CAiBf,CAAC;AAEF,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;CAkBjB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;CAqBhB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;CAelB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;;;;;;;;;CAYhB,CAAC;AAGF,eAAO,MAAM,KAAK;;;;;;;;;;;;CAYjB,CAAC;AAGF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;CAkBlB,CAAC;AAGF,eAAO,MAAM,MAAM;;;;;;;;;;;;CAYlB,CAAC"}

package/dist/cjs/colors.js

@@ -13,6 +13,7 @@ exports.neutral = {
     '250': '#d6e1e3',
     '300': '#d4d4d4',
     '350': '#c8daec',
+    '380': '#b6c2cf',
     '375': '#bfbfbf',
     '400': '#a3a3a3',
     '500': '#737373',
@@ -44,6 +45,7 @@ exports.ebonyClay = {
     '625': '#252c40',
     '700': '#1d2331',
     '800': '#171d27',
+    '825': '#1d2843',
     '850': '#131826',
     '900': '#11171e',
     '950': '#0c111a',
@@ -108,6 +110,10 @@ exports.blue = {
     '50': '#f5fcff',
     '100': '#ebf8ff',
     '200': '#cceafc',
+    '250': '#a6c5e2',
+    '251': '#9ca9c2',
+    '250-10': '#a6c5e228',
+    '250-20': '#a6c5e25c',
     '300': '#afd9fa',
     '400': '#74b4f7',
     '500': '#3b82f6',
@@ -119,7 +125,8 @@ exports.blue = {
     '951': '#126a6f',
     '952': '#75e2e7',
     '953': '#c6f0f2',
-    '954': '#363d51'
+    '954': '#363d51',
+    '955': '#062a4a'
 };
 exports.purple = {
     '50': '#fbf7fc',

package/dist/cjs/theme.d.ts

@@ -1,5 +1,5 @@
 import { theme as antdTheme, ThemeConfig } from 'antd';
-import { CustomTokens } from './types';
+import { CustomTokens, NavCardToken } from './types';
 export declare const fontSize = 16;
 type ColorName = 'akinon' | 'azure' | 'blue' | 'orange' | 'red' | 'green' | 'pink' | 'purple' | 'gray' | 'ebonyClay' | 'neutral';
 type Color = {
@@ -8,7 +8,8 @@ type Color = {
 type Colors = Record<ColorName, Color>;
 export type DefaultThemeConfig = ThemeConfig & {
     colors: Colors;
-    customTokens: CustomTokens;
+    NavCardTokens: NavCardToken;
+    CustomTokens: CustomTokens;
 };
 /**
  * Non-editable akinon theme object.

package/dist/cjs/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,SAAS,EAAE,WAAW,EAAE,MAAM,MAAM,CAAC;AAevD,OAAO,EAML,YAAY,EAmBb,MAAM,SAAS,CAAC;AAGjB,eAAO,MAAM,QAAQ,KAAK,CAAC;AAE3B,KAAK,SAAS,GACV,QAAQ,GACR,OAAO,GACP,MAAM,GACN,QAAQ,GACR,KAAK,GACL,OAAO,GACP,MAAM,GACN,QAAQ,GACR,MAAM,GACN,WAAW,GACX,SAAS,CAAC;AAEd,KAAK,KAAK,GAAG;IACX,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB,CAAC;AAEF,KAAK,MAAM,GAAG,MAAM,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;AAevC,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAAG;IAC7C,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,YAAY,CAAC;CAC5B,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,KAAK,EAAE,kBA2oBnB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,QAAQ,EAAE,OAAO,SAAS,CAAC,QAA6B,CAAC;AAEtE;;;;;;;;;GASG;AACH,eAAO,MAAM,eAAe;;CA2B3B,CAAC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,SAAS,EAAE,WAAW,EAAE,MAAM,MAAM,CAAC;AAevD,OAAO,EAML,YAAY,EAUZ,YAAY,EAWb,MAAM,SAAS,CAAC;AAGjB,eAAO,MAAM,QAAQ,KAAK,CAAC;AAE3B,KAAK,SAAS,GACV,QAAQ,GACR,OAAO,GACP,MAAM,GACN,QAAQ,GACR,KAAK,GACL,OAAO,GACP,MAAM,GACN,QAAQ,GACR,MAAM,GACN,WAAW,GACX,SAAS,CAAC;AAEd,KAAK,KAAK,GAAG;IACX,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB,CAAC;AAEF,KAAK,MAAM,GAAG,MAAM,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;AAevC,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAAG;IAC7C,MAAM,EAAE,MAAM,CAAC;IACf,aAAa,EAAE,YAAY,CAAC;IAC5B,YAAY,EAAE,YAAY,CAAC;CAC5B,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,KAAK,EAAE,kBAgmBnB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,QAAQ,EAAE,OAAO,SAAS,CAAC,QAA6B,CAAC;AAEtE;;;;;;;;;GASG;AACH,eAAO,MAAM,eAAe;;CA2B3B,CAAC"}

package/dist/cjs/theme.js

@@ -51,7 +51,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 +59,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 +85,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 +102,8 @@ exports.theme = {
             valueHalf: '50%',
             valueQuarter: '25%',
             valueZero: '0',
-            valueAuto: 'auto'
+            valueAuto: 'auto',
+            valueInherit: 'inherit'
         },
         others: {
             colorTransparent: 'transparent',
@@ -99,7 +111,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 +124,8 @@ exports.theme = {
             borderDashed: 'dashed',
             borderDotted: 'dotted',
             borderWidthThin: '1px',
-            borderWidthThick: '2px'
+            borderWidthThick: '2px',
+            borderRadiusSm: '0.125rem'
         },
         overflow: {
             overflowVisible: 'visible',
@@ -115,6 +133,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 +144,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 +152,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 +159,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 +178,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 +186,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 +244,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 +275,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 +300,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 +359,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 +377,6 @@ exports.theme = {
             },
             Table: {
                 totalText: {
-                    width: 'fit-content !important',
-                    fontWeight: '500 !important',
                     color: `${colors.gray['500']} !important`,
                     margin: 'auto 32px !important'
                 },
@@ -414,7 +401,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 +410,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 +423,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 +443,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 +474,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 +498,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 +518,6 @@ exports.theme = {
             manyItemsTransform: 'rotate(-40deg)',
             manyItemsWidth: '90px',
             manyItemsHeight: '80px',
-            manyItemsWhiteSpace: 'break-spaces',
             manyItemsMarginInlineStart: '40px',
             manyItemsIconWidthHeight: '22px',
             manyItemsTailHeight: '4px',
@@ -563,8 +534,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 +547,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 +564,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 +574,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 +585,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 +606,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,7 +625,8 @@ exports.theme = {
             colorError: colors.red['450'],
             lineWidth: 0,
             controlHeightLG: 30,
-            paddingXS: 0
+            paddingXS: 0,
+            svgColor: colors.neutral['1000']
         }
     }
 };