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

package/dist/biz/Tree/index.js

@@ -55,7 +55,7 @@ const Tree = React__default.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",
@@ -83,7 +83,7 @@ const Tree = React__default.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,
@@ -108,7 +108,7 @@ const Tree = React__default.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",
@@ -131,7 +131,7 @@ const Tree = React__default.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"
@@ -152,8 +152,8 @@ const Tree = React__default.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",
@@ -179,18 +179,18 @@ const Tree = React__default.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"
           }

package/dist/primitive/Prism/Prism.cjs

@@ -6,6 +6,6 @@ const prismTheme = require("./prism-theme.cjs");
 const MantineProvider = require("../../node_modules/.pnpm/@mantine_styles@5.10.4_@emotion_react@11.13.0_react-dom@18.3.1_react@18.3.1/node_modules/@mantine/styles/esm/theme/MantineProvider.cjs");
 const MantinePrism = (props) => {
   const theme = MantineProvider.useMantineTheme();
-  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(MantineProvider.MantineProvider, { theme: { colorScheme: theme.colorScheme }, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(index.Prism, { getPrismTheme: prismTheme.getPrismTheme, noCopy: true, scrollAreaComponent: "div", ...props }) });
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(MantineProvider.MantineProvider, { theme: { colorScheme: theme.colorScheme, colors: theme.colors }, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(index.Prism, { getPrismTheme: prismTheme.getPrismTheme, noCopy: true, scrollAreaComponent: "div", ...props }) });
 };
 exports.MantinePrism = MantinePrism;

package/dist/primitive/Prism/Prism.js

@@ -4,7 +4,7 @@ import { getPrismTheme } from "./prism-theme.js";
 import { useMantineTheme, MantineProvider } from "../../node_modules/.pnpm/@mantine_styles@5.10.4_@emotion_react@11.13.0_react-dom@18.3.1_react@18.3.1/node_modules/@mantine/styles/esm/theme/MantineProvider.js";
 const MantinePrism = (props) => {
   const theme = useMantineTheme();
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(MantineProvider, { theme: { colorScheme: theme.colorScheme }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(PrismExport, { getPrismTheme, noCopy: true, scrollAreaComponent: "div", ...props }) });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(MantineProvider, { theme: { colorScheme: theme.colorScheme, colors: theme.colors }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(PrismExport, { getPrismTheme, noCopy: true, scrollAreaComponent: "div", ...props }) });
 };
 export {
   MantinePrism

package/dist/primitive/Prism/prism-theme.cjs

@@ -2,44 +2,44 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const dark = (theme) => ({
   plain: {
-    color: theme.colors.gray[4],
-    backgroundColor: theme.colors.dark[8]
+    color: theme.colors.carbon[5],
+    backgroundColor: theme.colors.carbon[8]
   },
   styles: [
     {
       types: ["comment"],
       style: {
-        color: theme.colors.gray[6]
+        color: theme.colors.carbon[7]
       }
     },
     {
       types: ["string", "inserted", "selector", "atrule"],
       style: {
-        color: theme.colors.teal[4]
+        color: theme.colors.aqua[4]
       }
     },
     {
       types: ["number"],
       style: {
-        color: theme.colors.blue[4]
+        color: theme.colors.peacock[4]
       }
     },
     {
       types: ["builtin", "char", "constant", "function"],
       style: {
-        color: theme.colors.orange[5]
+        color: theme.colors.yellow[5]
       }
     },
     {
       types: ["punctuation"],
       style: {
-        color: theme.colors.gray[5]
+        color: theme.colors.carbon[6]
       }
     },
     {
       types: ["variable"],
       style: {
-        color: theme.colors.gray[5]
+        color: theme.colors.carbon[6]
       }
     },
     {
@@ -57,7 +57,7 @@ const dark = (theme) => ({
     {
       types: ["operator"],
       style: {
-        color: theme.colors.gray[5]
+        color: theme.colors.carbon[6]
       }
     },
     {
@@ -69,39 +69,39 @@ const dark = (theme) => ({
     {
       types: ["keyword"],
       style: {
-        color: theme.colors.indigo[3]
+        color: theme.colors.violet[3]
       }
     },
     {
       types: ["doctype"],
       style: {
-        color: theme.colors.gray[5]
+        color: theme.colors.carbon[6]
       }
     },
     {
       types: ["url"],
       style: {
-        color: theme.colors.gray[5]
+        color: theme.colors.carbon[6]
       }
     }
   ]
 });
 const light = (theme) => ({
   plain: {
-    color: theme.colors.gray[9],
-    backgroundColor: theme.fn.rgba(theme.colors.gray[0], 0.65)
+    color: theme.colors.carbon[9],
+    backgroundColor: theme.fn.rgba(theme.colors.carbon[1], 0.65)
   },
   styles: [
     {
       types: ["comment"],
       style: {
-        color: theme.colors.gray[6]
+        color: theme.colors.carbon[7]
       }
     },
     {
       types: ["string", "inserted"],
       style: {
-        color: theme.colors.indigo[9]
+        color: theme.colors.violet[9]
       }
     },
     {
@@ -113,13 +113,13 @@ const light = (theme) => ({
     {
       types: ["builtin", "char", "constant", "function", "selector", "atrule"],
       style: {
-        color: theme.colors.lime[9]
+        color: theme.colors.thyme[9]
       }
     },
     {
       types: ["punctuation"],
       style: {
-        color: theme.colors.gray[7]
+        color: theme.colors.carbon[8]
       }
     },
     {
@@ -167,13 +167,13 @@ const light = (theme) => ({
     {
       types: ["doctype"],
       style: {
-        color: theme.colors.gray[7]
+        color: theme.colors.carbon[8]
       }
     },
     {
       types: ["url"],
       style: {
-        color: theme.colors.gray[7]
+        color: theme.colors.carbon[8]
       }
     }
   ]

package/dist/primitive/Prism/prism-theme.js

@@ -1,43 +1,43 @@
 const dark = (theme) => ({
   plain: {
-    color: theme.colors.gray[4],
-    backgroundColor: theme.colors.dark[8]
+    color: theme.colors.carbon[5],
+    backgroundColor: theme.colors.carbon[8]
   },
   styles: [
     {
       types: ["comment"],
       style: {
-        color: theme.colors.gray[6]
+        color: theme.colors.carbon[7]
       }
     },
     {
       types: ["string", "inserted", "selector", "atrule"],
       style: {
-        color: theme.colors.teal[4]
+        color: theme.colors.aqua[4]
       }
     },
     {
       types: ["number"],
       style: {
-        color: theme.colors.blue[4]
+        color: theme.colors.peacock[4]
       }
     },
     {
       types: ["builtin", "char", "constant", "function"],
       style: {
-        color: theme.colors.orange[5]
+        color: theme.colors.yellow[5]
       }
     },
     {
       types: ["punctuation"],
       style: {
-        color: theme.colors.gray[5]
+        color: theme.colors.carbon[6]
       }
     },
     {
       types: ["variable"],
       style: {
-        color: theme.colors.gray[5]
+        color: theme.colors.carbon[6]
       }
     },
     {
@@ -55,7 +55,7 @@ const dark = (theme) => ({
     {
       types: ["operator"],
       style: {
-        color: theme.colors.gray[5]
+        color: theme.colors.carbon[6]
       }
     },
     {
@@ -67,39 +67,39 @@ const dark = (theme) => ({
     {
       types: ["keyword"],
       style: {
-        color: theme.colors.indigo[3]
+        color: theme.colors.violet[3]
       }
     },
     {
       types: ["doctype"],
       style: {
-        color: theme.colors.gray[5]
+        color: theme.colors.carbon[6]
       }
     },
     {
       types: ["url"],
       style: {
-        color: theme.colors.gray[5]
+        color: theme.colors.carbon[6]
       }
     }
   ]
 });
 const light = (theme) => ({
   plain: {
-    color: theme.colors.gray[9],
-    backgroundColor: theme.fn.rgba(theme.colors.gray[0], 0.65)
+    color: theme.colors.carbon[9],
+    backgroundColor: theme.fn.rgba(theme.colors.carbon[1], 0.65)
   },
   styles: [
     {
       types: ["comment"],
       style: {
-        color: theme.colors.gray[6]
+        color: theme.colors.carbon[7]
       }
     },
     {
       types: ["string", "inserted"],
       style: {
-        color: theme.colors.indigo[9]
+        color: theme.colors.violet[9]
       }
     },
     {
@@ -111,13 +111,13 @@ const light = (theme) => ({
     {
       types: ["builtin", "char", "constant", "function", "selector", "atrule"],
       style: {
-        color: theme.colors.lime[9]
+        color: theme.colors.thyme[9]
       }
     },
     {
       types: ["punctuation"],
       style: {
-        color: theme.colors.gray[7]
+        color: theme.colors.carbon[8]
       }
     },
     {
@@ -165,13 +165,13 @@ const light = (theme) => ({
     {
       types: ["doctype"],
       style: {
-        color: theme.colors.gray[7]
+        color: theme.colors.carbon[8]
       }
     },
     {
       types: ["url"],
       style: {
-        color: theme.colors.gray[7]
+        color: theme.colors.carbon[8]
       }
     }
   ]

package/dist/primitive/TextInput/TextInput.cjs

@@ -23,13 +23,13 @@ const TextInput = React.forwardRef((props, ref) => {
             icon: {
               position: "relative",
               width: "fit-content",
-              border: `1px solid ${theme.colors.gray[4]}`,
+              border: `1px solid ${theme.colors.carbon[5]}`,
               borderRightWidth: 0,
               paddingLeft: 12,
               paddingRight: 12,
               borderTopLeftRadius: theme.defaultRadius,
               borderBottomLeftRadius: theme.defaultRadius,
-              backgroundColor: theme.colors.gray[1]
+              backgroundColor: theme.colors.carbon[2]
             },
             input: {
               flex: 1,
@@ -46,7 +46,7 @@ const TextInput = React.forwardRef((props, ref) => {
         },
         props.styles
       ]),
-      icon: !!leftLabel ? /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(index.Typography, { variant: "label-lg", c: "gray.6", children: leftLabel }) : icon,
+      icon: !!leftLabel ? /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(index.Typography, { variant: "label-lg", children: leftLabel }) : icon,
       ref
     }
   );

package/dist/primitive/TextInput/TextInput.js

@@ -21,13 +21,13 @@ const TextInput = forwardRef((props, ref) => {
             icon: {
               position: "relative",
               width: "fit-content",
-              border: `1px solid ${theme.colors.gray[4]}`,
+              border: `1px solid ${theme.colors.carbon[5]}`,
               borderRightWidth: 0,
               paddingLeft: 12,
               paddingRight: 12,
               borderTopLeftRadius: theme.defaultRadius,
               borderBottomLeftRadius: theme.defaultRadius,
-              backgroundColor: theme.colors.gray[1]
+              backgroundColor: theme.colors.carbon[2]
             },
             input: {
               flex: 1,
@@ -44,7 +44,7 @@ const TextInput = forwardRef((props, ref) => {
         },
         props.styles
       ]),
-      icon: !!leftLabel ? /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "label-lg", c: "gray.6", children: leftLabel }) : icon,
+      icon: !!leftLabel ? /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "label-lg", children: leftLabel }) : icon,
       ref
     }
   );

package/dist/theme/fns/variant.cjs

@@ -44,10 +44,10 @@ function getVariant(theme) {
       }
       case "default": {
         return {
-          border: theme.colors.gray[4],
-          background: theme.colorScheme === "dark" ? theme.colors.gray[1] : theme.white,
-          color: theme.colors.gray[8],
-          hover: theme.colors.gray[2]
+          border: theme.colors.carbon[5],
+          background: theme.colorScheme === "dark" ? theme.colors.carbon[2] : theme.white,
+          color: theme.colors.carbon[8],
+          hover: theme.colors.carbon[3]
         };
       }
       case "white": {

package/dist/theme/fns/variant.js

@@ -42,10 +42,10 @@ function getVariant(theme) {
       }
       case "default": {
         return {
-          border: theme.colors.gray[4],
-          background: theme.colorScheme === "dark" ? theme.colors.gray[1] : theme.white,
-          color: theme.colors.gray[8],
-          hover: theme.colors.gray[2]
+          border: theme.colors.carbon[5],
+          background: theme.colorScheme === "dark" ? theme.colors.carbon[2] : theme.white,
+          color: theme.colors.carbon[8],
+          hover: theme.colors.carbon[3]
         };
       }
       case "white": {