@hsu-react/ui 1.0.0 → 2.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hsu-react/ui",
-  "version": "1.0.0",
+  "version": "2.0.1",
   "description": "一套基于 React + Ant Design 的中后台业务组件库",
   "license": "MIT",
   "type": "module",
@@ -17,11 +17,11 @@
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/VitaTsui/hsu-ui.git"
+    "url": "git+https://github.com/VitaTsui/hsu-ui-v2.git"
   },
-  "homepage": "https://github.com/VitaTsui/hsu-ui#readme",
+  "homepage": "https://github.com/VitaTsui/hsu-ui-v2#readme",
   "bugs": {
-    "url": "https://github.com/VitaTsui/hsu-ui/issues"
+    "url": "https://github.com/VitaTsui/hsu-ui-v2/issues"
   },
   "publishConfig": {
     "access": "public"
@@ -41,16 +41,17 @@
     "dev": "dumi dev",
     "docs:build": "dumi build",
     "docs:preview": "dumi preview",
-    "build": "father build && node scripts/check-heavy-deps.cjs",
-    "prepublishOnly": "father build && node scripts/check-heavy-deps.cjs",
-    "check:deps": "node scripts/check-heavy-deps.cjs"
+    "build": "node scripts/clean-dist.cjs && node scripts/gen-tokens-scss.cjs && father build && node scripts/check-heavy-deps.cjs",
+    "prepublishOnly": "node scripts/clean-dist.cjs && node scripts/gen-tokens-scss.cjs --check && father build && node scripts/check-heavy-deps.cjs",
+    "check:deps": "node scripts/check-heavy-deps.cjs",
+    "tokens": "node scripts/gen-tokens-scss.cjs",
+    "check:tokens": "node scripts/gen-tokens-scss.cjs --check"
   },
   "dependencies": {
-    "@ant-design/x": "^2.0.1",
+    "@ant-design/x": "^2.9.0",
     "@antv/g": "^6.1.21",
     "@antv/g6": "4.8.24",
     "@antv/g6-plugin": "0.8.24",
-    "@chakra-ui/react": "^3.30.0",
     "@codemirror/lang-json": "^6.0.2",
     "@codemirror/lang-sql": "^6.9.1",
     "@codemirror/lint": "^6.8.5",
@@ -61,9 +62,6 @@
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@emotion/cache": "^11.14.0",
-    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.1",
     "@hsu-react/single-router": ">=0.0.28 <0.1.0",
     "@iconify/json": "^2.2.385",
     "@iconify/react": "^5.0.1",
@@ -90,11 +88,6 @@
     "mermaid": "^11.15.0",
     "mongodb-query-parser": "^4.6.0",
     "node-sql-parser": "^5.3.12",
-    "rc-field-form": "^2.7.0",
-    "rc-picker": "^4.11.3",
-    "rc-select": "^14.15.1",
-    "rc-tree-select": "^5.27.0",
-    "rc-upload": "^4.8.1",
     "react-activation": "^0.13.4",
     "react-markdown": "^9.0.1",
     "react-markdown-editor-lite": "^1.3.4",
@@ -110,15 +103,17 @@
     "zxcvbn": "^4.4.2"
   },
   "peerDependencies": {
-    "@ant-design/icons": ">=5 <6",
-    "antd": ">=5 <6",
+    "@ant-design/icons": ">=6",
+    "antd": ">=6",
     "mobx": ">=6",
     "mobx-react-lite": ">=4",
     "react": ">=18",
-    "react-dom": ">=18"
+    "react-dom": ">=18",
+    "react-intl": ">=6",
+    "react-router": ">=6 <7"
   },
   "devDependencies": {
-    "@ant-design/icons": "^5.3.7",
+    "@ant-design/icons": "^6.3.2",
     "@types/js-cookie": "^3.0.6",
     "@types/lodash": "^4.17.4",
     "@types/markdown-it": "^14.1.2",
@@ -127,14 +122,25 @@
     "@types/react-dom": "^18.3.0",
     "@types/turndown": "^5.0.5",
     "@types/zxcvbn": "^4.4.4",
-    "antd": "5.24.3",
+    "antd": "6.5.4",
     "dumi": "^2.4.0",
     "father": "^4.5.0",
     "mobx": "^6.12.3",
     "mobx-react-lite": "^4.0.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-intl": "^6.6.8",
+    "react-router": "^6.23.1",
+    "react-router-dom": "^6.23.1",
     "sass": "^1.101.0",
     "typescript": "^5.4.5"
+  },
+  "peerDependenciesMeta": {
+    "react-router": {
+      "optional": true
+    },
+    "react-intl": {
+      "optional": true
+    }
   }
 }

package/src/components/Button/index.md

@@ -35,23 +35,65 @@ export default () => (
 );
 ```
 
-## Chakra 按钮
+## 按钮形态
+
+`variant` 与 `color` 直接用 antd v6 的原生能力：6 种形态 × 16 个预设色。
+
+> **2.0 破坏性变更**：`Button.Chakra`（后改名 `Button.Basic`）这个子组件**已删除**。
+>
+> 它当初存在是因为 antd v5 的 Button 只有 `type`，表达不了 outline / subtle / ghost 这些形态，于是引了 Chakra UI 来补。antd v6 原生加了 `color` + `variant`，正好就是它存在的理由，所以整个删掉、`Button` 重新成为唯一的按钮，chakra 全家（约 560 KB）也一并移除。
+>
+> 旧属性对照：
+>
+> | 旧写法 | 新写法 |
+> | --- | --- |
+> | `variant="solid"` | `variant="solid"` |
+> | `variant="outline"` | `variant="outlined"` |
+> | `variant="surface"` | `variant="surface"`（保留，见下） |
+> | `variant="subtle"` | `variant="filled"` |
+> | `variant="ghost"` | `variant="text"` |
+> | `variant="plain"` | `variant="link"` |
+> | `colorPalette="gray"` | `color="default"` |
+> | `colorPalette="blue"` 等 | `color="blue"` 等 |
+> | `size="xs" \| "sm" \| "md" \| "lg"` | `size="small" \| "small" \| "middle" \| "large"` |
+>
+> Chakra 的样式属性（`px`、`bg`、`_hover` 等）不再支持，请改用 `className`。
 
-基于 Chakra UI 的按钮，支持 `hasPermi`、`hidden`、`iconPosition`、`icon` 等扩展属性。
+```tsx
+import React from "react";
+import { Button } from "@hsu-react/ui";
+
+export default () => (
+  <div style={{ display: "flex", gap: 12, alignItems: "center", flexWrap: "wrap" }}>
+    <Button color="primary" variant="solid">实心</Button>
+    <Button variant="surface">浅底边框</Button>
+    <Button variant="outlined">描边</Button>
+    <Button variant="filled">浅底</Button>
+    <Button variant="text">文字</Button>
+    <Button variant="link">链接</Button>
+    <Button variant="dashed">虚线</Button>
+  </div>
+);
+```
+
+### surface：浅底 + 边框
 
-Chakra 的 system 与 emotion cache 由组件**自带**（内部包了一层 `ChakraRoot`），消费方**不需要**在应用入口挂全局 `ChakraProvider` / `CacheProvider`。这样 `@chakra-ui/react` + `@emotion/*` + zag-js（合计约 570 KB）只存在于 `Button.Chakra` 的异步 chunk 里，不进首屏。
+这是本库在 antd 之上唯一扩展的形态，也正是当初引入 Chakra 按钮要补的那个样式 —— antd 没有它：`filled` 有底色但把边框显式设成了透明，`outlined` 有边框但没底色。
 
-> 从 `0.0.23` 起：入口若仍留着全局 Provider，不会出错，但那 570 KB 会照旧留在首屏——要拿到收益需把它删掉。若页面要**直接**使用 chakra 组件（不经 `Button.Chakra`），用库导出的 `ChakraRoot` 自行包一层即可。
+实现上它走 antd 的 `filled`（底色、文字色、hover / active / disabled 全都照旧由 antd 那条色阶算），只把边框变量按同一条色阶调回来。因为改的是 antd 自己的 CSS 变量而不是写死颜色，**16 个预设色与明暗主题都自动跟着走**。
 
 ```tsx
 import React from "react";
 import { Button } from "@hsu-react/ui";
 
 export default () => (
-  <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
-    <Button.Chakra colorPalette="blue">主要按钮</Button.Chakra>
-    <Button.Chakra variant="outline">描边按钮</Button.Chakra>
-    <Button.Chakra disabled>禁用</Button.Chakra>
+  <div style={{ display: "flex", gap: 12, alignItems: "center", flexWrap: "wrap" }}>
+    <Button variant="surface">默认</Button>
+    <Button variant="surface" color="primary">主色</Button>
+    <Button variant="surface" color="danger">危险</Button>
+    <Button variant="surface" color="green">绿</Button>
+    <Button variant="surface" color="purple">紫</Button>
+    <Button variant="surface" disabled>禁用</Button>
   </div>
 );
 ```
@@ -64,6 +106,8 @@ export default () => (
 | --- | --- | --- | --- |
 | hasPermi | 权限码；当前用户不具备时按钮不渲染（配合 `ConfigProvider.permissions`） | `string[]` | - |
 | hidden | 是否隐藏（不渲染） | `boolean` | `false` |
-| iconPosition | 图标位置 | `'start' \| 'end'` | `'start'` |
+| iconPosition | 图标位置。antd v6 起这个属性改名为 `iconPlacement`，两个名字这里都接受，内部统一翻成 `iconPlacement`，不会触发 antd 的弃用告警 | `'start' \| 'end'` | `'start'` |
+| variant | 形态；比 antd 多一个 `surface`（浅底 + 边框） | `'solid' \| 'outlined' \| 'dashed' \| 'filled' \| 'text' \| 'link' \| 'surface'` | - |
+| reRender | 包裹渲染结果，便于套 Tooltip / Popconfirm | `(btn: ReactElement) => ReactNode` | - |
 
-> 另提供 `Button.Chakra`，用于需要 Chakra UI 按钮样式的场景。
+> `variant` / `color` / `size` / `shape` 等其余属性与 [antd Button](https://ant.design/components/button-cn) 一致，`variant` 额外多一个 `surface`。

package/src/components/Button/index.module.scss

@@ -9,3 +9,41 @@
     flex-direction: row-reverse;
   }
 }
+
+// `variant="surface"`：浅底 + 边框。
+//
+// antd v6 没有这个形态 —— `filled` 有底色但把 --ant-btn-border-color 显式设成了 transparent，
+// `outlined` 有边框但没底色。这里让它走 antd 的 `filled`（底色、文字色、hover / active、
+// disabled 全都照旧由 antd 那条色阶算），只把边框变量按同一条色阶调回来。
+//
+// 因为改的是 antd 自己的变量而不是写死颜色，16 个 color 预设（default / primary / danger /
+// blue / purple / … / gold）与明暗主题都自动跟着走，不必逐色枚举。
+// 选择器要连 antd 的两个类一起写：antd 是在 `.ant-btn.ant-btn-variant-filled`（0,2,0）里把
+// --ant-btn-border-color 设成 transparent 的，单靠一个 CSS Module 类（0,1,0）压不过它。
+// 这里写成 (0,3,0)，与注入顺序无关，也就不需要 !important。
+//
+// 边框用满强度的 color-base，不要再乘一个透明度：默认色系下 color-base 本身就是标准边框色
+// #e4e4e7，再乘 25% 之后压在 #f4f4f5 的浅底上等于没有 —— 那样 surface 看起来就和 filled
+// 一模一样。满强度等于「filled 的底 + outlined 的边」，这正是这个形态的定义。
+.surface:global(.ant-btn.ant-btn-variant-filled) {
+  --ant-btn-border-color: var(--ant-btn-color-base);
+  --ant-btn-border-color-hover: var(--ant-btn-color-hover);
+  --ant-btn-border-color-active: var(--ant-btn-color-active);
+
+  // 中性色系要单独抬一档：它的 color-base 就是边框色，而边框色与浅底色在暗色下恰好同值
+  // （--vita-border 与 --vita-muted 都是 #27272a），照抄就等于没有边框。
+  // 往文字色方向混一点即可 —— 浅色下变深、暗色下变浅，一条规则两个主题都成立。
+  &:global(.ant-btn-color-default) {
+    --ant-btn-border-color: color-mix(
+      in srgb,
+      var(--ant-btn-color-base) 62%,
+      var(--vita-foreground)
+    );
+    --ant-btn-border-color-hover: color-mix(
+      in srgb,
+      var(--ant-btn-color-base) 40%,
+      var(--vita-foreground)
+    );
+    --ant-btn-border-color-active: var(--ant-btn-border-color-hover);
+  }
+}

package/src/components/Button/index.tsx

@@ -1,74 +1,130 @@
 import { Button as AntdButton, ButtonProps as AntdButtonProps } from "antd";
 
-import React, { Suspense, lazy } from "react";
+import React, { ReactNode } from "react";
 import usePermissions from "../../hooks/usePermissions";
 import classNames from "classnames";
 import styles from "./index.module.scss";
-import type { ChakraButtonProps } from "./ChakraButton";
-
-export type { ChakraButtonProps };
 
 /**
- * The chakra family weighs about 560 KB and serves only the Button.Chakra variant, yet it
- * lands in every consumer's initial bundle because it hangs off the base Button. Switched to
- * on-demand loading: the type goes through `import type` (erased at compile time), and the
- * chunk is only fetched at runtime once Button.Chakra is actually rendered.
+ * antd v6's own variants plus `surface` — a tinted background *with* a border.
+ *
+ * antd has no such variant: `filled` is tinted but explicitly sets `border-color: transparent`,
+ * and `outlined` has the border but no tint. That combination is the one thing the old
+ * Chakra-backed button was kept around for, so it lives here instead.
  */
-const InternalChakraButton = lazy(() => import("./ChakraButton"));
-
-const ChakraButton: React.FC<ChakraButtonProps> = (props) => (
-  <Suspense fallback={null}>
-    <InternalChakraButton {...props} />
-  </Suspense>
-);
+export type ButtonVariant = NonNullable<AntdButtonProps["variant"]> | "surface";
 
-export interface ButtonProps extends AntdButtonProps {
+export interface ButtonProps extends Omit<AntdButtonProps, "variant"> {
   hasPermi?: string[];
   hidden?: boolean;
+  /**
+   * 图标位置。antd v6 把这个属性改名成了 `iconPlacement`，`iconPosition` 仍然能用但会打
+   * 弃用告警。这里保留旧名（本库一直这么用）并在内部翻成 `iconPlacement`，两个名字都接受。
+   */
   iconPosition?: "start" | "end";
+  variant?: ButtonVariant;
+  /**
+   * @deprecated 用 antd 的 `color`。
+   *
+   * 这是 Chakra 时期的属性名，这里仍然接住并翻译成 `color`，否则它会一路透传到
+   * `<button>` 上，React 会报 “does not recognize the colorPalette prop on a DOM element”。
+   */
+  colorPalette?: "gray" | "blue" | "red" | "green" | "orange";
+  /** Wrap the rendered button, e.g. to put it inside a Tooltip or Popconfirm */
+  reRender?: (btn: React.ReactElement) => ReactNode;
 }
 
-interface ButtonFC
-  extends React.ForwardRefExoticComponent<
-    ButtonProps & React.RefAttributes<HTMLButtonElement>
-  > {
-  Chakra: React.FC<ChakraButtonProps>;
-}
+/**
+ * @deprecated use `ButtonProps`.
+ *
+ * There used to be a second button (`Button.Chakra`, later `Button.Basic`) backed by Chakra UI,
+ * brought in because antd v5's Button only had `type` and could not express variants like
+ * outline / subtle / ghost. antd v6 added `color` (16 presets) and `variant`
+ * (`solid | outlined | dashed | filled | text | link`) natively, which is exactly what that button
+ * existed to provide — so it is gone and `Button` is the only button again.
+ *
+ * Mapping from the old props:
+ * | old | new |
+ * | --- | --- |
+ * | `variant="solid"` | `variant="solid"` |
+ * | `variant="outline"` | `variant="outlined"` |
+ * | `variant="surface"` / `"subtle"` | `variant="filled"` |
+ * | `variant="ghost"` | `variant="text"` |
+ * | `variant="plain"` | `variant="link"` |
+ * | `colorPalette="gray"` | `color="default"` |
+ * | `colorPalette="blue" \| "red" \| "green" \| "orange"` | `color="blue" \| "red" \| "green" \| "orange"` |
+ * | `size="xs" \| "sm" \| "md" \| "lg"` | `size="small" \| "small" \| "middle" \| "large"` |
+ */
+export type BasicButtonProps = ButtonProps;
+
+/** @deprecated use `ButtonProps` — see the note on `BasicButtonProps` */
+export type ChakraButtonProps = ButtonProps;
 
 // forwardRef: when wrapped by overlay components like Tooltip / Popconfirm, the button DOM can be accessed directly,
 // preventing rc libraries from falling back to findDOMNode and triggering React deprecation warnings
-const InternalButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  (props, ref) => {
-    const {
-      hasPermi,
-      hidden,
-      iconPosition = "start",
-      className,
-      children,
-      title,
-      ...buttonConfig
-    } = props;
-    const { permitted } = usePermissions(hasPermi);
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
+  const {
+    hasPermi,
+    hidden,
+    iconPosition,
+    className,
+    children,
+    title,
+    variant,
+    colorPalette,
+    reRender,
+    ...buttonConfig
+  } = props;
+  const { permitted } = usePermissions(hasPermi);
 
-    if (!permitted || hidden) {
-      return null;
-    }
-
-    return (
-      <AntdButton
-        {...buttonConfig}
-        ref={ref}
-        className={classNames(className, styles.button, {
-          [styles[iconPosition]]: iconPosition,
-        })}
-        children={children ?? title}
-      />
-    );
+  if (!permitted || hidden) {
+    return null;
   }
-);
 
-const Button = InternalButton as ButtonFC;
+  // `surface` rides antd's `filled` so the whole colour ramp keeps working, and only puts the
+  // border back — see `.surface` in index.module.scss.
+  const isSurface = variant === "surface";
+
+  // 旧的 colorPalette 翻译成 antd 的 color；gray 对应 antd 的 default，其余同名。
+  const mappedColor =
+    buttonConfig.color ??
+    (colorPalette
+      ? colorPalette === "gray"
+        ? "default"
+        : colorPalette
+      : undefined);
+
+  // antd only honours `variant` when `color` comes with it (`if (color && variant)` in its Button),
+  // so `<Button variant="filled" />` on its own silently falls back to the default outlined look.
+  // The one exception antd makes is `variant="solid"`, which it maps to the primary colour — that
+  // is left alone so the prop keeps meaning what antd's docs say it means.
+  const needsDefaultColor =
+    !!variant &&
+    variant !== "solid" &&
+    !mappedColor &&
+    !buttonConfig.type &&
+    !buttonConfig.danger;
+
+  const button = (
+    <AntdButton
+      {...buttonConfig}
+      ref={ref}
+      color={needsDefaultColor ? "default" : mappedColor}
+      variant={isSurface ? "filled" : variant}
+      // 这里曾经把 iconPosition 拦下来换成一个 styles[iconPosition] 类名，但
+      // index.module.scss 里根本没有 .start / .end —— 结果 iconPosition="end" 完全不起作用，
+      // 还给每个按钮挂上一个字符串 "undefined" 的类。现在翻译成 antd v6 的 iconPlacement。
+      iconPlacement={buttonConfig.iconPlacement ?? iconPosition}
+      className={classNames(className, styles.button, {
+        [styles.surface]: isSurface,
+      })}
+      children={children ?? title}
+    />
+  );
+
+  return <>{reRender ? reRender(button) : button}</>;
+});
 
-Button.Chakra = ChakraButton;
+Button.displayName = "Button";
 
 export default Button;

package/src/components/ChainGraph/_components/ExpandButtons/index.module.scss

@@ -9,10 +9,12 @@
   column-gap: 10px;
 
   .expandBtnItem {
-    width: 100px;
-    height: 32px;
+    // 圆角走令牌，跟其余按钮一致。这里此前写死 2px，在全库统一到 8px 之后
+    // 只有关系图这两个按钮还是直角，很显眼。
+    min-width: 100px;
+    height: var(--vita-control-height);
 
-    border-radius: 2px;
+    border-radius: var(--vita-radius);
   }
 }
 

package/src/components/ChainGraph/_components/SearchSelect/index.module.scss

@@ -6,12 +6,13 @@
   left: 20px;
 
   width: 240px;
-  height: 32px;
+  height: var(--vita-control-height);
 }
 
 .select {
   width: 100%;
   height: 100%;
 
-  border-radius: 2px;
+  // 同上：与其余选择器统一
+  border-radius: var(--vita-radius);
 }

package/src/components/ChainGraph/index.module.scss

@@ -24,9 +24,9 @@
     bottom: 20px;
     left: 20px;
 
-    background-color: var(--cf-surface);
+    background-color: var(--vita-surface);
 
-    border: 1px solid var(--primary-color);
+    border: 1px solid var(--vita-primary);
 
     transition: all 0.5s ease;
 

package/src/components/ChainGraph/index.tsx

@@ -155,7 +155,7 @@ const ChainGraph: React.FC<ChainGraphProps> = observer((props) => {
   return (
     <Spin
       spinning={loading || (isLayouting && !!data?.children?.length)}
-      wrapperClassName={classNames(styles.spinWrapper, wrapperClassName)}
+      classNames={{ root: classNames(styles.spinWrapper, wrapperClassName) }}
     >
       <div
         className={`${styles.ChainGraph} ${className}`}

package/src/components/Chart/Group/index.module.scss

@@ -11,7 +11,7 @@
 
   padding: 20px 20px 15px;
 
-  background: var(--cf-surface);
+  background: var(--vita-surface);
   box-shadow: 0 3px 10px rgba(68, 98, 138, 0.1);
   border-radius: 5px;
 

package/src/components/Chat/ChatHistory/_components/HistoryGroup/index.module.scss

@@ -8,7 +8,7 @@
 
     font-size: 14px;
     font-weight: bold;
-    color: var(--cf-text-3);
+    color: var(--vita-subtle-foreground);
 
     cursor: default;
   }

package/src/components/Chat/ChatHistory/_components/HistoryItem/index.module.scss

@@ -1,7 +1,7 @@
 .renameInput {
   width: 100%;
-  height: 32px;
-  min-height: 32px;
+  height: var(--vita-control-height);
+  min-height: var(--vita-control-height);
 }
 
 .historyItem {
@@ -11,8 +11,8 @@
   align-items: center;
   column-gap: 10px;
 
-  height: 32px;
-  line-height: 32px;
+  height: var(--vita-control-height);
+  line-height: var(--vita-control-height);
   padding: 0 10px;
 
   font-size: 14px;
@@ -21,12 +21,12 @@
 
   overflow: hidden;
 
-  border-radius: 6px;
+  border-radius: var(--vita-radius-sm);
 
   cursor: pointer;
 
   &:hover {
-    background: var(--cf-row-hover);
+    background: var(--vita-hover);
 
     .operation {
       display: flex;
@@ -34,9 +34,9 @@
   }
 
   &.active {
-    background: var(--cf-row-hover);
+    background: var(--vita-hover);
 
-    color: var(--primary-color);
+    color: var(--vita-primary);
   }
 
   .operation {
@@ -45,20 +45,20 @@
     justify-content: center;
 
     width: 24px;
-    height: 24px;
+    height: var(--vita-control-height-sm);
 
     font-size: 16px;
 
-    border-radius: 8px;
+    border-radius: var(--vita-radius);
 
     transition: color 0.3s;
 
     background-color: transparent;
 
-    color: var(--cf-text);
+    color: var(--vita-foreground);
 
     &:hover {
-      color: var(--primary-color);
+      color: var(--vita-primary);
     }
   }
 }
@@ -69,6 +69,6 @@
   column-gap: 8px;
 
   &.delete {
-    color: var(--cf-error);
+    color: var(--vita-error);
   }
 }

package/src/components/Chat/ChatHistory/_components/NewChatButton/index.module.scss

@@ -5,7 +5,7 @@
 
   padding: 0px 10px;
 
-  background-color: var(--cf-subtle);
+  background-color: var(--vita-muted);
 
   .newChat {
     display: flex;
@@ -14,21 +14,21 @@
     column-gap: 8px;
 
     width: 100%;
-    height: 32px;
+    height: var(--vita-control-height);
 
     font-size: 14px;
 
-    background-color: var(--cf-surface);
+    background-color: var(--vita-surface);
 
-    border-radius: 6px;
-    border: 1px solid var(--cf-border-weak);
+    border-radius: var(--vita-radius-sm);
+    border: 1px solid var(--vita-border-weak);
 
     cursor: pointer;
 
     transition: box-shadow 0.3s;
 
     &:hover {
-      box-shadow: var(--cf-shadow-2);
+      box-shadow: var(--vita-shadow-2);
     }
   }
 }

package/src/components/Chat/ChatHistory/index.module.scss

@@ -9,9 +9,9 @@
   height: 100%;
   padding: 10px 0px;
 
-  background-color: var(--cf-subtle);
+  background-color: var(--vita-muted);
 
-  border-right: 1px solid var(--cf-border-weak);
+  border-right: 1px solid var(--vita-border-weak);
 
   .tools {
     display: flex;
@@ -39,7 +39,7 @@
     &::-webkit-scrollbar-thumb {
       width: 10px;
 
-      background-color: var(--cf-border);
+      background-color: var(--vita-border);
 
       border-radius: 10px;
     }