@tidbcloud/uikit 2.0.0-beta.11 → 2.0.0-beta.13

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @tidbcloud/uikit
 
+## 2.0.0-beta.13
+
+### Patch Changes
+
+- map gray color to carbon
+
+## 2.0.0-beta.12
+
+### Minor Changes
+
+- map gray color to carbon
+
 ## 2.0.0-beta.11
 
 ### Patch Changes

package/dist/biz/CodeBlock/index.cjs

@@ -55,9 +55,9 @@ const CodeBlock = ({
       {
         p: "md",
         mah,
-        bg: "gray.1",
+        bg: "carbon.2",
         sx: (theme) => ({
-          border: `1px solid ${theme.colors.gray[4]}`,
+          border: `1px solid ${theme.colors.carbon[5]}`,
           borderRadius: theme.defaultRadius,
           overflow: "auto"
         }),
@@ -87,7 +87,7 @@ const CodeBlock = ({
         )
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(Group.Group, { spacing: 4, sx: (theme) => ({ position: "absolute", top: 16, right: 16, color: theme.colors.gray[7] }), children: [
+    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(Group.Group, { spacing: 4, sx: (theme) => ({ position: "absolute", top: 16, right: 16, color: theme.colors.carbon[8] }), children: [
       foldIconVisible && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Tooltip.Tooltip, { label: folded ? "Expand" : "Collapse", withArrow: true, position: "top", children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
         ActionIcon.ActionIcon,
         {
@@ -120,7 +120,7 @@ const CopyText = ({ children, value, ...rest }) => {
   return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
     Code.Code,
     {
-      bg: "gray.2",
+      bg: "carbon.3",
       ...rest,
       p: 8,
       sx: (theme) => {

package/dist/biz/CodeBlock/index.js

@@ -53,9 +53,9 @@ const CodeBlock = ({
       {
         p: "md",
         mah,
-        bg: "gray.1",
+        bg: "carbon.2",
         sx: (theme) => ({
-          border: `1px solid ${theme.colors.gray[4]}`,
+          border: `1px solid ${theme.colors.carbon[5]}`,
           borderRadius: theme.defaultRadius,
           overflow: "auto"
         }),
@@ -85,7 +85,7 @@ const CodeBlock = ({
         )
       }
     ),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(Group, { spacing: 4, sx: (theme) => ({ position: "absolute", top: 16, right: 16, color: theme.colors.gray[7] }), children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(Group, { spacing: 4, sx: (theme) => ({ position: "absolute", top: 16, right: 16, color: theme.colors.carbon[8] }), children: [
       foldIconVisible && /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { label: folded ? "Expand" : "Collapse", withArrow: true, position: "top", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         ActionIcon,
         {
@@ -118,7 +118,7 @@ const CopyText = ({ children, value, ...rest }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     Code,
     {
-      bg: "gray.2",
+      bg: "carbon.3",
       ...rest,
       p: 8,
       sx: (theme) => {

package/dist/biz/Dot/index.cjs

@@ -9,7 +9,7 @@ const Dot = ({ color, size = 8, ...rest }) => {
       sx: (theme) => {
         var _a;
         return {
-          backgroundColor: ((_a = theme.colors[color]) == null ? void 0 : _a[5]) ?? theme.colors.gray[5],
+          backgroundColor: ((_a = theme.colors[color]) == null ? void 0 : _a[5]) ?? theme.colors.carbon[6],
           height: size,
           width: size,
           borderRadius: "50%"

package/dist/biz/Dot/index.js

@@ -7,7 +7,7 @@ const Dot = ({ color, size = 8, ...rest }) => {
       sx: (theme) => {
         var _a;
         return {
-          backgroundColor: ((_a = theme.colors[color]) == null ? void 0 : _a[5]) ?? theme.colors.gray[5],
+          backgroundColor: ((_a = theme.colors[color]) == null ? void 0 : _a[5]) ?? theme.colors.carbon[6],
           height: size,
           width: size,
           borderRadius: "50%"

package/dist/biz/Form/CopyText.cjs

@@ -27,8 +27,8 @@ const FormCopyText = ({
           paddingRight: 8,
           height: 40,
           borderRadius: theme.defaultRadius,
-          backgroundColor: theme.colors.gray[1],
-          border: `1px solid ${theme.colors.gray[4]}`
+          backgroundColor: theme.colors.carbon[2],
+          border: `1px solid ${theme.colors.carbon[5]}`
         }),
         props.sx
       ]),
@@ -38,7 +38,7 @@ const FormCopyText = ({
           index.Typography,
           {
             variant: "body-lg",
-            c: "gray.7",
+            c: "carbon.8",
             sx: styles.mergeSxList([
               () => ({
                 flex: "1",
@@ -53,7 +53,7 @@ const FormCopyText = ({
             children: value
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Tooltip.Tooltip, { label: copied ? "Copied" : "Copy", withArrow: true, ...tooltipProps, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ActionIcon.ActionIcon, { color: "gray.7", variant: "transparent", onClick: copy, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Tooltip.Tooltip, { label: copied ? "Copied" : "Copy", withArrow: true, ...tooltipProps, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ActionIcon.ActionIcon, { color: "carbon.8", variant: "transparent", onClick: copy, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
           Copy01,
           {
             size,

package/dist/biz/Form/CopyText.js

@@ -25,8 +25,8 @@ const FormCopyText = ({
           paddingRight: 8,
           height: 40,
           borderRadius: theme.defaultRadius,
-          backgroundColor: theme.colors.gray[1],
-          border: `1px solid ${theme.colors.gray[4]}`
+          backgroundColor: theme.colors.carbon[2],
+          border: `1px solid ${theme.colors.carbon[5]}`
         }),
         props.sx
       ]),
@@ -36,7 +36,7 @@ const FormCopyText = ({
           Typography,
           {
             variant: "body-lg",
-            c: "gray.7",
+            c: "carbon.8",
             sx: mergeSxList([
               () => ({
                 flex: "1",
@@ -51,7 +51,7 @@ const FormCopyText = ({
             children: value
           }
         ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { label: copied ? "Copied" : "Copy", withArrow: true, ...tooltipProps, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ActionIcon, { color: "gray.7", variant: "transparent", onClick: copy, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { label: copied ? "Copied" : "Copy", withArrow: true, ...tooltipProps, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ActionIcon, { color: "carbon.8", variant: "transparent", onClick: copy, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           IconCopy01,
           {
             size,

package/dist/biz/Form/FormActions.cjs

@@ -17,7 +17,7 @@ const FormActions = ({
 }) => {
   const style = index.TYPOGRAPHY_STYLES_MAP["action-md"];
   return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(Flex.Flex, { justify: "flex-end", mt: 24, ...rest, children: [
-    cancelText && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Button.Button, { onClick: onCancel, mr: 16, variant: "default", fw: style.fw, fs: style.fs, c: "gray.7", ...cancelProps, children: cancelText }),
+    cancelText && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Button.Button, { onClick: onCancel, mr: 16, variant: "default", fw: style.fw, fs: style.fs, ...cancelProps, children: cancelText }),
     /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Button.Button, { type: "submit", onClick: onConfirm, loading, disabled, ...confirmProps, children: confirmText })
   ] });
 };

package/dist/biz/Form/FormActions.js

@@ -15,7 +15,7 @@ const FormActions = ({
 }) => {
   const style = TYPOGRAPHY_STYLES_MAP["action-md"];
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(Flex, { justify: "flex-end", mt: 24, ...rest, children: [
-    cancelText && /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { onClick: onCancel, mr: 16, variant: "default", fw: style.fw, fs: style.fs, c: "gray.7", ...cancelProps, children: cancelText }),
+    cancelText && /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { onClick: onCancel, mr: 16, variant: "default", fw: style.fw, fs: style.fs, ...cancelProps, children: cancelText }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { type: "submit", onClick: onConfirm, loading, disabled, ...confirmProps, children: confirmText })
   ] });
 };

package/dist/biz/LabelTooltip/index.cjs

@@ -7,7 +7,7 @@ const HoverCard = require("../../node_modules/.pnpm/@mantine_core@5.10.4_patch_h
 const Box = require("../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Box/Box.cjs");
 function LabelTooltip({ label, ...rest }) {
   return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(HoverCard.HoverCard, { shadow: "md", withArrow: true, withinPortal: true, position: "top", ...rest, children: [
-    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(HoverCard.HoverCard.Target, { children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Box.Box, { sx: { marginLeft: 8, verticalAlign: "middle", position: "relative", top: 1 }, component: "span", children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(InfoCircle, { cursor: "pointer", size: 14, color: "gray.7" }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(HoverCard.HoverCard.Target, { children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Box.Box, { sx: { marginLeft: 8, verticalAlign: "middle", position: "relative", top: 1 }, component: "span", children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(InfoCircle, { cursor: "pointer", size: 14, color: "carbon.8" }) }) }),
     /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(HoverCard.HoverCard.Dropdown, { maw: 480, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(index.Typography, { variant: "body-lg", children: label }) })
   ] });
 }

package/dist/biz/LabelTooltip/index.js

@@ -5,7 +5,7 @@ import { HoverCard } from "../../node_modules/.pnpm/@mantine_core@5.10.4_patch_h
 import { Box } from "../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Box/Box.js";
 function LabelTooltip({ label, ...rest }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(HoverCard, { shadow: "md", withArrow: true, withinPortal: true, position: "top", ...rest, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(HoverCard.Target, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { marginLeft: 8, verticalAlign: "middle", position: "relative", top: 1 }, component: "span", children: /* @__PURE__ */ jsxRuntimeExports.jsx(IconInfoCircle, { cursor: "pointer", size: 14, color: "gray.7" }) }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(HoverCard.Target, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { marginLeft: 8, verticalAlign: "middle", position: "relative", top: 1 }, component: "span", children: /* @__PURE__ */ jsxRuntimeExports.jsx(IconInfoCircle, { cursor: "pointer", size: 14, color: "carbon.8" }) }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(HoverCard.Dropdown, { maw: 480, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body-lg", children: label }) })
   ] });
 }

package/dist/biz/PageShell/index.cjs

@@ -57,10 +57,10 @@ const PageShell = ({
     ActionIcon.ActionIcon,
     {
       variant: "light",
-      bg: "gray.2",
+      bg: "carbon.3",
       sx: (theme) => ({
         ":hover": {
-          backgroundColor: theme.colors.gray[3]
+          backgroundColor: theme.colors.carbon[4]
         }
       }),
       onClick: () => {
@@ -72,7 +72,7 @@ const PageShell = ({
           history.back();
         }
       },
-      children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ChevronLeft, { size: 20, color: "gray" })
+      children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ChevronLeft, { size: 20 })
     }
   );
   const page = /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(jsxRuntime.jsxRuntimeExports.Fragment, { children: [

package/dist/biz/PageShell/index.js

@@ -55,10 +55,10 @@ const PageShell = ({
     ActionIcon,
     {
       variant: "light",
-      bg: "gray.2",
+      bg: "carbon.3",
       sx: (theme) => ({
         ":hover": {
-          backgroundColor: theme.colors.gray[3]
+          backgroundColor: theme.colors.carbon[4]
         }
       }),
       onClick: () => {
@@ -70,7 +70,7 @@ const PageShell = ({
           history.back();
         }
       },
-      children: /* @__PURE__ */ jsxRuntimeExports.jsx(IconChevronLeft, { size: 20, color: "gray" })
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx(IconChevronLeft, { size: 20 })
     }
   );
   const page = /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [

package/dist/biz/PhoneInput/styles.cjs

@@ -16,16 +16,16 @@ const useStyles = createStyles.createStyles((theme, params) => {
       "&.react-tel-input": {
         ".form-control": {
           // see more https://github.com/mantinedev/mantine/blob/master/src/mantine-core/src/Input/Input.styles.ts#LL40C23-L40C89
-          backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.white,
+          backgroundColor: theme.colorScheme === "dark" ? theme.colors.carbon[7] : theme.white,
           fontSize: 14,
-          color: theme.colorScheme === "dark" ? theme.colors.gray[8] : theme.black,
+          color: theme.colorScheme === "dark" ? theme.colors.carbon[8] : theme.black,
           width: "100%",
           height: 40,
           minHeight: 40,
           lineHeight: "38px",
           borderRadius: theme.defaultRadius,
           padding: "0 12px",
-          border: hasError ? `1px solid ${invalidColor}` : `1px solid ${theme.colors.gray[4]}`,
+          border: hasError ? `1px solid ${invalidColor}` : `1px solid ${theme.colors.carbon[5]}`,
           marginBottom: hasError ? 5 : void 0,
           outline: "none",
           "::placeholder": {

package/dist/biz/PhoneInput/styles.js

@@ -14,16 +14,16 @@ const useStyles = createStyles((theme, params) => {
       "&.react-tel-input": {
         ".form-control": {
           // see more https://github.com/mantinedev/mantine/blob/master/src/mantine-core/src/Input/Input.styles.ts#LL40C23-L40C89
-          backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.white,
+          backgroundColor: theme.colorScheme === "dark" ? theme.colors.carbon[7] : theme.white,
           fontSize: 14,
-          color: theme.colorScheme === "dark" ? theme.colors.gray[8] : theme.black,
+          color: theme.colorScheme === "dark" ? theme.colors.carbon[8] : theme.black,
           width: "100%",
           height: 40,
           minHeight: 40,
           lineHeight: "38px",
           borderRadius: theme.defaultRadius,
           padding: "0 12px",
-          border: hasError ? `1px solid ${invalidColor}` : `1px solid ${theme.colors.gray[4]}`,
+          border: hasError ? `1px solid ${invalidColor}` : `1px solid ${theme.colors.carbon[5]}`,
           marginBottom: hasError ? 5 : void 0,
           outline: "none",
           "::placeholder": {

package/dist/biz/PropertyCard/index.cjs

@@ -38,7 +38,7 @@ const Item = ({ label, children, labelProps, valueProps, ...rest }) => {
   ] });
 };
 const Divider = (props) => {
-  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Divider$1.Divider, { color: "gray.3", my: "xs", ...props });
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Divider$1.Divider, { color: "carbon.4", my: "xs", ...props });
 };
 PropertyCard.Item = Item;
 PropertyCard.Divider = Divider;

package/dist/biz/PropertyCard/index.js

@@ -36,7 +36,7 @@ const Item = ({ label, children, labelProps, valueProps, ...rest }) => {
   ] });
 };
 const Divider = (props) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Divider$1, { color: "gray.3", my: "xs", ...props });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Divider$1, { color: "carbon.4", my: "xs", ...props });
 };
 PropertyCard.Item = Item;
 PropertyCard.Divider = Divider;

package/dist/biz/SearchArea/index.cjs

@@ -157,11 +157,11 @@ function SearchArea(props) {
         x.name
       )),
       /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(Box.Box, { sx: SX_Y_MID, children: [
-        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Box.Box, { sx: SX_Y_MID, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(Button.Button, { variant: "subtle", color: "gray.7", onClick: handleReset, children: [
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Box.Box, { sx: SX_Y_MID, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(Button.Button, { variant: "subtle", color: "carbon.8", onClick: handleReset, children: [
           /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Eraser, { size: 16, style: { marginRight: 4 } }),
           "Clear Filters"
         ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Box.Box, { ml: 16, sx: SX_Y_MID, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Button.Button, { variant: "subtle", color: "gray.7", onClick: handleSubmit, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(RefreshCw01, { size: 16 }) }) })
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Box.Box, { ml: 16, sx: SX_Y_MID, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Button.Button, { variant: "subtle", color: "carbon.8", onClick: handleSubmit, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(RefreshCw01, { size: 16 }) }) })
       ] })
     ] }) }),
     props.debugEnabled && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(Box.Box, { sx: { height: 320 }, children: [

package/dist/biz/SearchArea/index.js

@@ -155,11 +155,11 @@ function SearchArea(props) {
         x.name
       )),
       /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: SX_Y_MID, children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: SX_Y_MID, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { variant: "subtle", color: "gray.7", onClick: handleReset, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: SX_Y_MID, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { variant: "subtle", color: "carbon.8", onClick: handleReset, children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(IconEraser, { size: 16, style: { marginRight: 4 } }),
           "Clear Filters"
         ] }) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { ml: 16, sx: SX_Y_MID, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "subtle", color: "gray.7", onClick: handleSubmit, children: /* @__PURE__ */ jsxRuntimeExports.jsx(IconRefreshCw01, { size: 16 }) }) })
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { ml: 16, sx: SX_Y_MID, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "subtle", color: "carbon.8", onClick: handleSubmit, children: /* @__PURE__ */ jsxRuntimeExports.jsx(IconRefreshCw01, { size: 16 }) }) })
       ] })
     ] }) }),
     props.debugEnabled && /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: { height: 320 }, children: [

package/dist/biz/Table/BasicTable/BasicTable.styles.cjs

@@ -12,7 +12,7 @@ const useStyles = createStyles.createStyles((theme, _params, getRef) => {
       borderRadius: theme.defaultRadius,
       tfoot: {
         "tr th": {
-          backgroundColor: theme.colors.gray[0],
+          backgroundColor: theme.colors.carbon[1],
           ":first-of-type": {
             borderBottomLeftRadius: theme.defaultRadius
           },
@@ -24,7 +24,7 @@ const useStyles = createStyles.createStyles((theme, _params, getRef) => {
     },
     thead: {
       "tr th": {
-        backgroundColor: theme.colors.gray[0],
+        backgroundColor: theme.colors.carbon[1],
         ":first-of-type": {
           borderTopLeftRadius: theme.defaultRadius
         },

package/dist/biz/Table/BasicTable/BasicTable.styles.js

@@ -10,7 +10,7 @@ const useStyles = createStyles((theme, _params, getRef) => {
       borderRadius: theme.defaultRadius,
       tfoot: {
         "tr th": {
-          backgroundColor: theme.colors.gray[0],
+          backgroundColor: theme.colors.carbon[1],
           ":first-of-type": {
             borderBottomLeftRadius: theme.defaultRadius
           },
@@ -22,7 +22,7 @@ const useStyles = createStyles((theme, _params, getRef) => {
     },
     thead: {
       "tr th": {
-        backgroundColor: theme.colors.gray[0],
+        backgroundColor: theme.colors.carbon[1],
         ":first-of-type": {
           borderTopLeftRadius: theme.defaultRadius
         },

package/dist/biz/Table/TablePagination.cjs

@@ -12,11 +12,11 @@ const TablePagination = ({ ...rest }) => {
         (theme) => ({
           item: {
             border: "none",
-            color: theme.colors.gray[9],
+            color: theme.colors.carbon[9],
             borderRadius: theme.defaultRadius,
             "&[data-active]": {
-              color: theme.colors.gray[9],
-              background: theme.colors.gray[3]
+              color: theme.colors.carbon[9],
+              background: theme.colors.carbon[4]
             }
           }
         }),

package/dist/biz/Table/TablePagination.js

@@ -10,11 +10,11 @@ const TablePagination = ({ ...rest }) => {
         (theme) => ({
           item: {
             border: "none",
-            color: theme.colors.gray[9],
+            color: theme.colors.carbon[9],
             borderRadius: theme.defaultRadius,
             "&[data-active]": {
-              color: theme.colors.gray[9],
-              background: theme.colors.gray[3]
+              color: theme.colors.carbon[9],
+              background: theme.colors.carbon[4]
             }
           }
         }),

package/dist/biz/TimeRangePicker/AbsoluteTimeRangePicker.cjs

@@ -26,7 +26,7 @@ const AbsoluteTimeRangePicker = ({
   onReturnClick
 }) => {
   const theme = MantineProvider.useMantineTheme();
-  const dayStyle = (_date, modifiers) => modifiers.weekend && !modifiers.disabled && !modifiers.selected && !modifiers.outside && !modifiers.selectedInRange ? { color: theme.colors.gray[7] } : null;
+  const dayStyle = (_date, modifiers) => modifiers.weekend && !modifiers.disabled && !modifiers.selected && !modifiers.outside && !modifiers.selectedInRange ? { color: theme.colors.carbon[8] } : null;
   const [start, setStart] = React.useState(() => new Date(value[0] * 1e3));
   const [end, setEnd] = React.useState(() => new Date(value[1] * 1e3));
   const startAfterEnd = React.useMemo(() => {

package/dist/biz/TimeRangePicker/AbsoluteTimeRangePicker.js

@@ -25,7 +25,7 @@ const AbsoluteTimeRangePicker = ({
   onReturnClick
 }) => {
   const theme = useMantineTheme();
-  const dayStyle = (_date, modifiers) => modifiers.weekend && !modifiers.disabled && !modifiers.selected && !modifiers.outside && !modifiers.selectedInRange ? { color: theme.colors.gray[7] } : null;
+  const dayStyle = (_date, modifiers) => modifiers.weekend && !modifiers.disabled && !modifiers.selected && !modifiers.outside && !modifiers.selectedInRange ? { color: theme.colors.carbon[8] } : null;
   const [start, setStart] = useState(() => new Date(value[0] * 1e3));
   const [end, setEnd] = useState(() => new Date(value[1] * 1e3));
   const startAfterEnd = useMemo(() => {

package/dist/biz/TimeRangePicker/index.cjs

@@ -120,7 +120,7 @@ const TimeRangePicker = ({
             Menu.Menu.Item,
             {
               sx: (theme) => ({
-                background: seconds === selectedRelativeItem ? theme.colors.gray[2] : ""
+                background: seconds === selectedRelativeItem ? theme.colors.carbon[3] : ""
               }),
               onClick: () => onChange == null ? void 0 : onChange({ type: "relative", value: seconds }),
               children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(Text.Text, { children: [
@@ -142,8 +142,8 @@ const DurationBadge = ({ children }) => {
       display: "inline-block",
       w: 35,
       py: 3,
-      bg: "gray.4",
-      c: "gray.7",
+      bg: "carbon.5",
+      c: "carbon.8",
       fz: 10,
       lh: "14px",
       ta: "center",

package/dist/biz/TimeRangePicker/index.js

@@ -119,7 +119,7 @@ const TimeRangePicker = ({
             Menu.Item,
             {
               sx: (theme) => ({
-                background: seconds === selectedRelativeItem ? theme.colors.gray[2] : ""
+                background: seconds === selectedRelativeItem ? theme.colors.carbon[3] : ""
               }),
               onClick: () => onChange == null ? void 0 : onChange({ type: "relative", value: seconds }),
               children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Text, { children: [
@@ -141,8 +141,8 @@ const DurationBadge = ({ children }) => {
       display: "inline-block",
       w: 35,
       py: 3,
-      bg: "gray.4",
-      c: "gray.7",
+      bg: "carbon.5",
+      c: "carbon.8",
       fz: 10,
       lh: "14px",
       ta: "center",

package/dist/biz/TransferTree/index.cjs

@@ -91,7 +91,7 @@ const TransferTree = ({
   });
   return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(Card.Card, { withBorder: true, className: clsx_m(classes.transferTree, className), children: [
     /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("div", { className: classes.transfer, children: [
-      sourceHeader ? sourceHeader : /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Box.Box, { component: "header", p: 16, sx: (theme) => ({ backgroundColor: theme.colors.gray[2] }), children: "Source" }),
+      sourceHeader ? sourceHeader : /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Box.Box, { component: "header", p: 16, sx: (theme) => ({ backgroundColor: theme.colors.carbon[3] }), children: "Source" }),
       /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: classes.treeWrapper, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
         index.Tree,
         {
@@ -108,7 +108,7 @@ const TransferTree = ({
       /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ActionIcon.ActionIcon, { variant: "default", disabled: checkedTarget.size === 0, onClick: ahooks.useMemoizedFn(onMoveToLeft), children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ChevronLeft, { size: 14 }) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("div", { className: classes.transfer, children: [
-      targetHeader ? targetHeader : /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Box.Box, { component: "header", h: 60, p: 16, sx: (theme) => ({ backgroundColor: theme.colors.gray[2] }), children: "Target" }),
+      targetHeader ? targetHeader : /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Box.Box, { component: "header", h: 60, p: 16, sx: (theme) => ({ backgroundColor: theme.colors.carbon[3] }), children: "Target" }),
       /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: classes.treeWrapper, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(index.Tree, { ...treeProps, checkable: true, treeData: renderedTarget, onCheck: ahooks.useMemoizedFn(onCheckRightTree) }) })
     ] })
   ] });

package/dist/biz/TransferTree/index.js

@@ -89,7 +89,7 @@ const TransferTree = ({
   });
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { withBorder: true, className: clsx(classes.transferTree, className), children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: classes.transfer, children: [
-      sourceHeader ? sourceHeader : /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { component: "header", p: 16, sx: (theme) => ({ backgroundColor: theme.colors.gray[2] }), children: "Source" }),
+      sourceHeader ? sourceHeader : /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { component: "header", p: 16, sx: (theme) => ({ backgroundColor: theme.colors.carbon[3] }), children: "Source" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: classes.treeWrapper, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         Tree,
         {
@@ -106,7 +106,7 @@ const TransferTree = ({
       /* @__PURE__ */ jsxRuntimeExports.jsx(ActionIcon, { variant: "default", disabled: checkedTarget.size === 0, onClick: useMemoizedFn(onMoveToLeft), children: /* @__PURE__ */ jsxRuntimeExports.jsx(IconChevronLeft, { size: 14 }) })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: classes.transfer, children: [
-      targetHeader ? targetHeader : /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { component: "header", h: 60, p: 16, sx: (theme) => ({ backgroundColor: theme.colors.gray[2] }), children: "Target" }),
+      targetHeader ? targetHeader : /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { component: "header", h: 60, p: 16, sx: (theme) => ({ backgroundColor: theme.colors.carbon[3] }), children: "Target" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: classes.treeWrapper, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Tree, { ...treeProps, checkable: true, treeData: renderedTarget, onCheck: useMemoizedFn(onCheckRightTree) }) })
     ] })
   ] });

package/dist/biz/Tree/index.cjs

@@ -57,7 +57,7 @@ const Tree = React.forwardRef((props, ref) => {
             lineHeight: "24px"
           },
           ".tc-uikit-tree-title": {
-            color: theme.colors.gray[8]
+            color: theme.colors.carbon[8]
           },
           ".tc-uikit-tree .tc-uikit-tree-treenode": {
             display: "flex",
@@ -85,7 +85,7 @@ const Tree = React.forwardRef((props, ref) => {
             cursor: "default"
           },
           ".tc-uikit-tree-switcher > svg": {
-            color: theme.colors.gray[8],
+            color: theme.colors.carbon[8],
             transition: "transform 0.3s",
             margin: 0,
             fontSize: 12,
@@ -110,7 +110,7 @@ const Tree = React.forwardRef((props, ref) => {
             margin: 0,
             padding: 0,
             marginRight: 6,
-            color: theme.colors.dark[8],
+            color: theme.colors.carbon[8],
             fontSize: 14,
             fontVariant: "tabular-nums",
             listStyle: "none",
@@ -133,7 +133,7 @@ const Tree = React.forwardRef((props, ref) => {
             height: 16,
             direction: "ltr",
             backgroundColor: theme.white,
-            border: `1px solid ${theme.colors.gray[3]}`,
+            border: `1px solid ${theme.colors.carbon[4]}`,
             borderRadius: 2,
             borderCollapse: "separate",
             transition: "all 0.3s"
@@ -154,8 +154,8 @@ const Tree = React.forwardRef((props, ref) => {
             content: '" "'
           },
           ".tc-uikit-tree-checkbox-checked .tc-uikit-tree-checkbox-inner": {
-            backgroundColor: theme.colors.blue[7],
-            borderColor: theme.colors.blue[7]
+            backgroundColor: theme.colors.carbon[8],
+            borderColor: theme.colors.carbon[8]
           },
           ".tc-uikit-tree-checkbox-checked .tc-uikit-tree-checkbox-inner:after": {
             position: "absolute",
@@ -181,18 +181,18 @@ const Tree = React.forwardRef((props, ref) => {
           },
           ".tc-uikit-tree-checkbox-indeterminate .tc-uikit-tree-checkbox-inner": {
             backgroundColor: theme.white,
-            borderColor: theme.colors.gray[3]
+            borderColor: theme.colors.carbon[4]
           },
           ".tc-uikit-tree-checkbox-disabled .tc-uikit-tree-checkbox-inner": {
-            backgroundColor: theme.colors.gray[2],
-            borderColor: theme.colors.gray[3]
+            backgroundColor: theme.colors.carbon[3],
+            borderColor: theme.colors.carbon[4]
           },
           ".tc-uikit-tree-checkbox-disabled.tc-uikit-tree-checkbox-checked .tc-uikit-tree-checkbox-inner:after": {
-            borderColor: theme.colors.gray[5],
+            borderColor: theme.colors.carbon[6],
             animationName: "none"
           },
           ".tc-uikit-tree-checkbox-disabled .tc-uikit-tree-checkbox-inner:after": {
-            borderColor: theme.colors.gray[3],
+            borderColor: theme.colors.carbon[4],
             borderCollapse: "separate",
             animationName: "none"
           }