@tidbcloud/uikit 2.0.0-beta.8 → 2.0.0-beta.9

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @tidbcloud/uikit
 
+## 2.0.0-beta.9
+
+### Minor Changes
+
+- Update button styles and typography colors
+
 ## 2.0.0-beta.8
 
 ### Minor Changes

package/dist/primitive/Typography/index.cjs

@@ -9,7 +9,7 @@ const TYPOGRAPHY_STYLES_MAP = {
     weight: 700,
     size: 18,
     lh: "28px",
-    color: "gray.8"
+    color: "carbon.8"
   },
   display: {
     weight: 700,
@@ -25,31 +25,31 @@ const TYPOGRAPHY_STYLES_MAP = {
     weight: 700,
     size: 16,
     lh: "24px",
-    color: "gray.7"
+    color: "carbon.7"
   },
   body1: {
     weight: 400,
     size: 14,
     lh: "20px",
-    color: "gray.7"
+    color: "carbon.7"
   },
   body2: {
     weight: 500,
     size: 14,
     lh: "20px",
-    color: "gray.8"
+    color: "carbon.8"
   },
   body3: {
     weight: 600,
     size: 14,
     lh: "20px",
-    color: "gray.9"
+    color: "carbon.9"
   },
   btn: {
     weight: 700,
     size: 14,
     lh: "20px",
-    color: "gray.8"
+    color: "carbon.8"
   },
   comment3: {
     size: 12,
@@ -61,103 +61,103 @@ const TYPOGRAPHY_STYLES_MAP = {
     size: 24,
     lh: "32px",
     weight: 700,
-    color: "gray.9"
+    color: "carbon.9"
   },
   "headline-md": {
     size: 20,
     lh: "30px",
     weight: 700,
-    color: "gray.9"
+    color: "carbon.9"
   },
   "headline-sm": {
     size: 18,
     lh: "28px",
     weight: 700,
-    color: "gray.9"
+    color: "carbon.9"
   },
   "title-lg": {
     size: 16,
     lh: "24px",
     weight: 700,
-    color: "gray.9"
+    color: "carbon.9"
   },
   "title-md": {
     size: 14,
     lh: "20px",
     weight: 700,
-    color: "gray.9"
+    color: "carbon.9"
   },
   "title-sm": {
     size: 12,
     lh: "18px",
     weight: 700,
-    color: "gray.9"
+    color: "carbon.9"
   },
   "action-lg": {
     size: 16,
     lh: "24px",
     weight: 600,
-    color: "cyan.7"
+    color: "peacock.7"
   },
   "action-md": {
     size: 14,
     lh: "20px",
     weight: 600,
-    color: "cyan.7"
+    color: "peacock.7"
   },
   "action-sm": {
     size: 12,
     lh: "18px",
     weight: 600,
-    color: "cyan.7"
+    color: "peacock.7"
   },
   "label-lg": {
     size: 14,
     lh: "20px",
     weight: 500,
-    color: "gray.8"
+    color: "carbon.8"
   },
   "label-md": {
     size: 13,
     lh: "18px",
     weight: 500,
-    color: "gray.8"
+    color: "carbon.8"
   },
   "label-sm": {
     size: 12,
     lh: "18px",
     weight: 500,
-    color: "gray.8"
+    color: "carbon.8"
   },
   "label-xs": {
     size: 11,
     lh: "16px",
     weight: 500,
-    color: "gray.8"
+    color: "carbon.8"
   },
   "body-lg": {
     size: 14,
     lh: "20px",
     weight: 400,
-    color: "gray.7"
+    color: "carbon.8"
   },
   "body-md": {
     size: 13,
     lh: "18px",
     weight: 400,
-    color: "gray.7"
+    color: "carbon.8"
   },
   "body-sm": {
     size: 12,
     lh: "18px",
     weight: 400,
-    color: "gray.7"
+    color: "carbon.8"
   },
   "body-xs": {
     size: 11,
     lh: "16px",
     weight: 400,
-    color: "gray.7"
+    color: "carbon.8"
   }
 };
 const _Typography = React.forwardRef(({ children, variant, ...rest }, ref) => {

package/dist/primitive/Typography/index.js

@@ -7,7 +7,7 @@ const TYPOGRAPHY_STYLES_MAP = {
     weight: 700,
     size: 18,
     lh: "28px",
-    color: "gray.8"
+    color: "carbon.8"
   },
   display: {
     weight: 700,
@@ -23,31 +23,31 @@ const TYPOGRAPHY_STYLES_MAP = {
     weight: 700,
     size: 16,
     lh: "24px",
-    color: "gray.7"
+    color: "carbon.7"
   },
   body1: {
     weight: 400,
     size: 14,
     lh: "20px",
-    color: "gray.7"
+    color: "carbon.7"
   },
   body2: {
     weight: 500,
     size: 14,
     lh: "20px",
-    color: "gray.8"
+    color: "carbon.8"
   },
   body3: {
     weight: 600,
     size: 14,
     lh: "20px",
-    color: "gray.9"
+    color: "carbon.9"
   },
   btn: {
     weight: 700,
     size: 14,
     lh: "20px",
-    color: "gray.8"
+    color: "carbon.8"
   },
   comment3: {
     size: 12,
@@ -59,103 +59,103 @@ const TYPOGRAPHY_STYLES_MAP = {
     size: 24,
     lh: "32px",
     weight: 700,
-    color: "gray.9"
+    color: "carbon.9"
   },
   "headline-md": {
     size: 20,
     lh: "30px",
     weight: 700,
-    color: "gray.9"
+    color: "carbon.9"
   },
   "headline-sm": {
     size: 18,
     lh: "28px",
     weight: 700,
-    color: "gray.9"
+    color: "carbon.9"
   },
   "title-lg": {
     size: 16,
     lh: "24px",
     weight: 700,
-    color: "gray.9"
+    color: "carbon.9"
   },
   "title-md": {
     size: 14,
     lh: "20px",
     weight: 700,
-    color: "gray.9"
+    color: "carbon.9"
   },
   "title-sm": {
     size: 12,
     lh: "18px",
     weight: 700,
-    color: "gray.9"
+    color: "carbon.9"
   },
   "action-lg": {
     size: 16,
     lh: "24px",
     weight: 600,
-    color: "cyan.7"
+    color: "peacock.7"
   },
   "action-md": {
     size: 14,
     lh: "20px",
     weight: 600,
-    color: "cyan.7"
+    color: "peacock.7"
   },
   "action-sm": {
     size: 12,
     lh: "18px",
     weight: 600,
-    color: "cyan.7"
+    color: "peacock.7"
   },
   "label-lg": {
     size: 14,
     lh: "20px",
     weight: 500,
-    color: "gray.8"
+    color: "carbon.8"
   },
   "label-md": {
     size: 13,
     lh: "18px",
     weight: 500,
-    color: "gray.8"
+    color: "carbon.8"
   },
   "label-sm": {
     size: 12,
     lh: "18px",
     weight: 500,
-    color: "gray.8"
+    color: "carbon.8"
   },
   "label-xs": {
     size: 11,
     lh: "16px",
     weight: 500,
-    color: "gray.8"
+    color: "carbon.8"
   },
   "body-lg": {
     size: 14,
     lh: "20px",
     weight: 400,
-    color: "gray.7"
+    color: "carbon.8"
   },
   "body-md": {
     size: 13,
     lh: "18px",
     weight: 400,
-    color: "gray.7"
+    color: "carbon.8"
   },
   "body-sm": {
     size: 12,
     lh: "18px",
     weight: 400,
-    color: "gray.7"
+    color: "carbon.8"
   },
   "body-xs": {
     size: 11,
     lh: "16px",
     weight: 400,
-    color: "gray.7"
+    color: "carbon.8"
   }
 };
 const _Typography = forwardRef(({ children, variant, ...rest }, ref) => {

package/dist/theme/index.cjs

@@ -5,6 +5,7 @@ const theme = require("./theme.cjs");
 const variant = require("./fns/variant.cjs");
 exports.FONT_FAMILY = font.FONT_FAMILY;
 exports.MONOSPANCED_FONT_FAMILY = font.MONOSPANCED_FONT_FAMILY;
+exports.Colors = theme.Colors;
 exports.useTheme = theme.useTheme;
 exports.getColorIndexInfo = variant.getColorIndexInfo;
 exports.getVariant = variant.getVariant;

package/dist/theme/index.d.cts

@@ -1,4 +1,4 @@
 export * from './fns/index.js';
 export { FONT_FAMILY, MONOSPANCED_FONT_FAMILY } from './font.js';
-export { useTheme } from './theme.js';
+export { useTheme, Colors } from './theme.js';
 export type { Color, ColorMap } from './theme.js';

package/dist/theme/index.d.ts

@@ -1,4 +1,4 @@
 export * from './fns/index.js';
 export { FONT_FAMILY, MONOSPANCED_FONT_FAMILY } from './font.js';
-export { useTheme } from './theme.js';
+export { useTheme, Colors } from './theme.js';
 export type { Color, ColorMap } from './theme.js';

package/dist/theme/index.js

@@ -1,7 +1,8 @@
 import { FONT_FAMILY, MONOSPANCED_FONT_FAMILY } from "./font.js";
-import { useTheme } from "./theme.js";
+import { Colors, useTheme } from "./theme.js";
 import { getColorIndexInfo, getVariant } from "./fns/variant.js";
 export {
+  Colors,
   FONT_FAMILY,
   MONOSPANCED_FONT_FAMILY,
   getColorIndexInfo,

package/dist/theme/theme.cjs

@@ -4,27 +4,120 @@ const colors_dark = require("./colors.dark.cjs");
 const colors = require("./colors.cjs");
 const font = require("./font.cjs");
 const react = require("@emotion/react");
+const Colors = Object.keys(colors);
 const getButtonStyles = (theme2, params) => {
-  const hoverStyles = params.variant === "subtle" ? theme2.fn.hover({
-    backgroundColor: "transparent"
-  }) : {};
-  const diffSizeStyles = {
+  const getFilledStyles = () => {
+    const color = params.color || theme2.primaryColor;
+    const bgColor = theme2.colors[params.color || theme2.primaryColor];
+    const bgColorShade = color === "carbon" ? 9 : theme2.fn.primaryShade();
+    const hoverBgColorShade = color === "carbon" ? bgColorShade - 1 : bgColorShade + 1;
+    return {
+      color: theme2.white,
+      backgroundColor: bgColor[bgColorShade],
+      ...theme2.fn.hover({
+        backgroundColor: bgColor[hoverBgColorShade]
+      }),
+      "&:disabled": {
+        color: theme2.white,
+        backgroundColor: bgColor[5]
+      }
+    };
+  };
+  const getLightStyles = () => {
+    const mainColor = theme2.colors[params.color || "peacock"];
+    const fontColorShade = 7;
+    const bgColorShade = 1;
+    const borderColorShade = 4;
+    return {
+      color: mainColor[fontColorShade],
+      backgroundColor: mainColor[bgColorShade],
+      borderWidth: 1,
+      borderStyle: "solid",
+      borderColor: mainColor[borderColorShade],
+      ...theme2.fn.hover({
+        color: mainColor[fontColorShade + 1],
+        borderColor: mainColor[borderColorShade + 1],
+        backgroundColor: mainColor[bgColorShade + 1]
+      }),
+      "&:disabled": {
+        color: theme2.colors[theme2.primaryColor][6],
+        borderColor: theme2.colors[theme2.primaryColor][borderColorShade + 1],
+        backgroundColor: theme2.colors[theme2.primaryColor][2]
+      }
+    };
+  };
+  const getDefaultStyles = () => {
+    const color = params.color || theme2.primaryColor;
+    const mainColor = theme2.colors[color];
+    const fontColorShade = color === "carbon" ? 8 : 7;
+    const bgColorShade = 1;
+    const borderColorShade = color === "carbon" ? 5 : 4;
+    return {
+      color: mainColor[fontColorShade],
+      backgroundColor: mainColor[bgColorShade],
+      borderColor: mainColor[borderColorShade],
+      ...theme2.fn.hover({
+        color: mainColor[fontColorShade + 1],
+        borderColor: mainColor[borderColorShade + 1],
+        backgroundColor: mainColor[bgColorShade + 1]
+      }),
+      "&:disabled": {
+        color: theme2.colors[theme2.primaryColor][6],
+        borderColor: theme2.colors[theme2.primaryColor][borderColorShade + 1],
+        backgroundColor: theme2.colors[theme2.primaryColor][2]
+      }
+    };
+  };
+  const getSubtleStyles = () => {
+    const color = params.color || "peacock";
+    const mainColor = theme2.colors[color];
+    const fontColorShade = 7;
+    const bgColorShade = 1;
+    return {
+      color: mainColor[fontColorShade],
+      backgroundColor: theme2.white,
+      ...theme2.fn.hover({
+        color: mainColor[fontColorShade + 1],
+        backgroundColor: mainColor[bgColorShade + 1]
+      }),
+      "&:disabled": {
+        color: theme2.colors[theme2.primaryColor][6],
+        backgroundColor: theme2.white
+      }
+    };
+  };
+  const variantStyles = {
+    filled: getFilledStyles(),
+    light: getLightStyles(),
+    default: getDefaultStyles(),
+    subtle: getSubtleStyles(),
+    outline: getDefaultStyles()
+  };
+  const sizeStyles = {
+    xs: {
+      height: 28
+    },
     sm: {
+      height: 32
+    },
+    md: {
       height: 40
+    },
+    lg: {
+      height: 48
+    },
+    xl: {
+      height: 56
     }
   };
-  const matches = diffSizeStyles[params.size] || {};
-  const withBorder = params.variant === "light" ? {
-    border: `1px solid ${theme2.colors[params.color || "blue"][4]}`
-  } : {};
-  return {
+  const finalStyles = {
     root: {
       fontWeight: 700,
-      ...matches,
-      ...hoverStyles,
-      ...withBorder
+      ...variantStyles[params.variant],
+      ...sizeStyles[params.size]
     }
   };
+  return finalStyles;
 };
 const getInputStyles = (theme2, params) => {
   const inputStyle = {
@@ -96,6 +189,13 @@ const theme = {
     lg: "0px 8px 64px rgba(0, 0, 0, 0.08)",
     xl: "0px 16px 64px rgba(0, 0, 0, 0.08)"
   },
+  fontSizes: {
+    xs: 12,
+    sm: 14,
+    md: 14,
+    lg: 18,
+    xl: 20
+  },
   globalStyles(theme2) {
     var _a, _b;
     return {
@@ -112,6 +212,11 @@ const theme = {
   },
   components: {
     Button: {
+      defaultProps() {
+        return {
+          size: "md"
+        };
+      },
       styles: getButtonStyles
     },
     Loader: {
@@ -546,4 +651,5 @@ const useTheme = (colorScheme) => {
     black: colors$1.carbon[8]
   };
 };
+exports.Colors = Colors;
 exports.useTheme = useTheme;

package/dist/theme/theme.d.cts

@@ -3,6 +3,7 @@ import { MantineThemeOverride } from '@mantine/core';
 import * as light from './colors.js';
 export type ColorMap = typeof light;
 export type Color = keyof ColorMap;
+export declare const Colors: Color[];
 export type Theme = MantineThemeOverride & {
     colors: ColorMap;
 };

package/dist/theme/theme.d.ts

@@ -3,6 +3,7 @@ import { MantineThemeOverride } from '@mantine/core';
 import * as light from './colors.js';
 export type ColorMap = typeof light;
 export type Color = keyof ColorMap;
+export declare const Colors: Color[];
 export type Theme = MantineThemeOverride & {
     colors: ColorMap;
 };

package/dist/theme/theme.js

@@ -2,27 +2,120 @@ import * as colors_dark from "./colors.dark.js";
 import * as colors from "./colors.js";
 import { FONT_FAMILY } from "./font.js";
 import { keyframes } from "@emotion/react";
+const Colors = Object.keys(colors);
 const getButtonStyles = (theme2, params) => {
-  const hoverStyles = params.variant === "subtle" ? theme2.fn.hover({
-    backgroundColor: "transparent"
-  }) : {};
-  const diffSizeStyles = {
+  const getFilledStyles = () => {
+    const color = params.color || theme2.primaryColor;
+    const bgColor = theme2.colors[params.color || theme2.primaryColor];
+    const bgColorShade = color === "carbon" ? 9 : theme2.fn.primaryShade();
+    const hoverBgColorShade = color === "carbon" ? bgColorShade - 1 : bgColorShade + 1;
+    return {
+      color: theme2.white,
+      backgroundColor: bgColor[bgColorShade],
+      ...theme2.fn.hover({
+        backgroundColor: bgColor[hoverBgColorShade]
+      }),
+      "&:disabled": {
+        color: theme2.white,
+        backgroundColor: bgColor[5]
+      }
+    };
+  };
+  const getLightStyles = () => {
+    const mainColor = theme2.colors[params.color || "peacock"];
+    const fontColorShade = 7;
+    const bgColorShade = 1;
+    const borderColorShade = 4;
+    return {
+      color: mainColor[fontColorShade],
+      backgroundColor: mainColor[bgColorShade],
+      borderWidth: 1,
+      borderStyle: "solid",
+      borderColor: mainColor[borderColorShade],
+      ...theme2.fn.hover({
+        color: mainColor[fontColorShade + 1],
+        borderColor: mainColor[borderColorShade + 1],
+        backgroundColor: mainColor[bgColorShade + 1]
+      }),
+      "&:disabled": {
+        color: theme2.colors[theme2.primaryColor][6],
+        borderColor: theme2.colors[theme2.primaryColor][borderColorShade + 1],
+        backgroundColor: theme2.colors[theme2.primaryColor][2]
+      }
+    };
+  };
+  const getDefaultStyles = () => {
+    const color = params.color || theme2.primaryColor;
+    const mainColor = theme2.colors[color];
+    const fontColorShade = color === "carbon" ? 8 : 7;
+    const bgColorShade = 1;
+    const borderColorShade = color === "carbon" ? 5 : 4;
+    return {
+      color: mainColor[fontColorShade],
+      backgroundColor: mainColor[bgColorShade],
+      borderColor: mainColor[borderColorShade],
+      ...theme2.fn.hover({
+        color: mainColor[fontColorShade + 1],
+        borderColor: mainColor[borderColorShade + 1],
+        backgroundColor: mainColor[bgColorShade + 1]
+      }),
+      "&:disabled": {
+        color: theme2.colors[theme2.primaryColor][6],
+        borderColor: theme2.colors[theme2.primaryColor][borderColorShade + 1],
+        backgroundColor: theme2.colors[theme2.primaryColor][2]
+      }
+    };
+  };
+  const getSubtleStyles = () => {
+    const color = params.color || "peacock";
+    const mainColor = theme2.colors[color];
+    const fontColorShade = 7;
+    const bgColorShade = 1;
+    return {
+      color: mainColor[fontColorShade],
+      backgroundColor: theme2.white,
+      ...theme2.fn.hover({
+        color: mainColor[fontColorShade + 1],
+        backgroundColor: mainColor[bgColorShade + 1]
+      }),
+      "&:disabled": {
+        color: theme2.colors[theme2.primaryColor][6],
+        backgroundColor: theme2.white
+      }
+    };
+  };
+  const variantStyles = {
+    filled: getFilledStyles(),
+    light: getLightStyles(),
+    default: getDefaultStyles(),
+    subtle: getSubtleStyles(),
+    outline: getDefaultStyles()
+  };
+  const sizeStyles = {
+    xs: {
+      height: 28
+    },
     sm: {
+      height: 32
+    },
+    md: {
       height: 40
+    },
+    lg: {
+      height: 48
+    },
+    xl: {
+      height: 56
     }
   };
-  const matches = diffSizeStyles[params.size] || {};
-  const withBorder = params.variant === "light" ? {
-    border: `1px solid ${theme2.colors[params.color || "blue"][4]}`
-  } : {};
-  return {
+  const finalStyles = {
     root: {
       fontWeight: 700,
-      ...matches,
-      ...hoverStyles,
-      ...withBorder
+      ...variantStyles[params.variant],
+      ...sizeStyles[params.size]
     }
   };
+  return finalStyles;
 };
 const getInputStyles = (theme2, params) => {
   const inputStyle = {
@@ -94,6 +187,13 @@ const theme = {
     lg: "0px 8px 64px rgba(0, 0, 0, 0.08)",
     xl: "0px 16px 64px rgba(0, 0, 0, 0.08)"
   },
+  fontSizes: {
+    xs: 12,
+    sm: 14,
+    md: 14,
+    lg: 18,
+    xl: 20
+  },
   globalStyles(theme2) {
     var _a, _b;
     return {
@@ -110,6 +210,11 @@ const theme = {
   },
   components: {
     Button: {
+      defaultProps() {
+        return {
+          size: "md"
+        };
+      },
       styles: getButtonStyles
     },
     Loader: {
@@ -545,5 +650,6 @@ const useTheme = (colorScheme) => {
   };
 };
 export {
+  Colors,
   useTheme
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tidbcloud/uikit",
-  "version": "2.0.0-beta.8",
+  "version": "2.0.0-beta.9",
   "description": "tidbcloud uikit",
   "type": "module",
   "main": "dist/primitive/index.cjs",