@hsu-react/ui 1.0.0 → 2.0.0

package/README.md

@@ -5,19 +5,26 @@
 
 一套基于 **React + Ant Design** 的中后台业务组件库，把「列表 + 搜索 + 表单弹窗 + CRUD」这类重复劳动沉淀为页面级组件，并内置 Markdown / CodeMirror / Spreadsheet / Chart / Editor 等内容组件。
 
-📖 **文档与在线示例：https://vitatsui.github.io/hsu-ui**
+📖 **文档与在线示例：https://vitatsui.github.io/hsu-ui-v2**
 
 ## 安装
 
 ```bash
 yarn add @hsu-react/ui
 # peerDependencies
-yarn add react react-dom antd@^5 @ant-design/icons@^5 mobx mobx-react-lite
+yarn add react react-dom antd@^6 @ant-design/icons@^6 mobx mobx-react-lite
 ```
 
-> **这是 1.x 线，对应 antd v5**，只收 bugfix。
->
-> antd v6 请用 2.x —— 同一个包名，代码在 [VitaTsui/hsu-ui-v2](https://github.com/VitaTsui/hsu-ui-v2)，文档在 <https://vitatsui.github.io/hsu-ui-v2>。`npm i @hsu-react/ui` 默认装的就是 2.x；要留在这条线请写 `npm i @hsu-react/ui@1`。
+两条版本线并行，包名同为 `@hsu-react/ui`，但分仓维护：
+
+| 版本线 | 依赖 | 仓库 |
+| --- | --- | --- |
+| **2.x**（本仓库） | antd v6 | [VitaTsui/hsu-ui-v2](https://github.com/VitaTsui/hsu-ui-v2) |
+| **1.x** | antd v5 | [VitaTsui/hsu-ui](https://github.com/VitaTsui/hsu-ui)，`npm i @hsu-react/ui@1` |
+
+## 浏览器支持
+
+Chrome / Edge ≥ 111、Safari ≥ 16.4、Firefox ≥ 121（现代浏览器，不支持 IE），与 antd v6 的口径一致。更老的浏览器不会白屏，但焦点环、选中底色等依赖 `color-mix()` / `:has()` 的样式会失效，详见[文档](https://vitatsui.github.io/hsu-ui-v2/guide#%E6%B5%8F%E8%A7%88%E5%99%A8%E6%94%AF%E6%8C%81)。
 
 ## 使用
 
@@ -66,7 +73,9 @@ yarn docs:build  # 构建文档站静态产物
 
 日常开发在 `develop` 分支进行（feature 分支合入 `develop`），`main` 只接受来自 `develop` 的 PR；合入 `main` 后按 `package.json` 版本自动打 tag 并发布 npm（dist-tag 为 `latest`）。PR 标题遵循 [Conventional Commits](https://www.conventionalcommits.org/)。
 
-本仓库发布的 dist-tag 固定是 `legacy-<major>`（即 `legacy-1`），**永远不会动 `latest`** —— `latest` 归 2.x 仓库。否则一次 1.x 的补丁发布会把所有人的 `npm i @hsu-react/ui` 拽回 antd v5 线。安装本线用 `npm i @hsu-react/ui@1`，走的是 semver，与 dist-tag 无关。
+旧大版本走 `<major>.x` 维护分支，bugfix 直接合进去，push 后同样自动发布，但 dist-tag 是 `legacy-<major>` 而**不是** `latest` —— 否则一次维护版发布会把所有人的 `npm i` 拽回旧大版本。（tag 名不能取 `v2`、`2` 这类，npm 会拒收任何能解析成 semver 范围的 dist-tag。）安装旧线用 `npm i @hsu-react/ui@1` 即可，走的是 semver，与 dist-tag 无关。
+
+1.x（antd v5）线不在本仓库，在 [VitaTsui/hsu-ui](https://github.com/VitaTsui/hsu-ui)。两个仓库发同一个 npm 包，`latest` 只由本仓库产出。
 
 ## License
 

package/es/components/Button/index.d.ts

@@ -1,14 +1,55 @@
 import { ButtonProps as AntdButtonProps } from "antd";
-import React from "react";
-import type { ChakraButtonProps } from "./ChakraButton";
-export type { ChakraButtonProps };
-export interface ButtonProps extends AntdButtonProps {
+import React, { ReactNode } from "react";
+/**
+ * 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.
+ */
+export type ButtonVariant = NonNullable<AntdButtonProps["variant"]> | "surface";
+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>;
-}
-declare const Button: ButtonFC;
+/**
+ * @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;
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export default Button;

package/es/components/Button/index.js

@@ -1,55 +1,98 @@
-var _excluded = ["hasPermi", "hidden", "iconPosition", "className", "children", "title"];
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var _excluded = ["hasPermi", "hidden", "iconPosition", "className", "children", "title", "variant", "colorPalette", "reRender"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import { Button as AntdButton } from "antd";
-import React, { Suspense, lazy } from "react";
+import React from "react";
 import usePermissions from "../../hooks/usePermissions";
 import classNames from "classnames";
 import styles from "./index.module.scss";
-import { jsx as _jsx } from "react/jsx-runtime";
+
 /**
- * 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.
  */
-var InternalChakraButton = /*#__PURE__*/lazy(function () {
-  return import("./ChakraButton");
-});
-var ChakraButton = function ChakraButton(props) {
-  return /*#__PURE__*/_jsx(Suspense, {
-    fallback: null,
-    children: /*#__PURE__*/_jsx(InternalChakraButton, _objectSpread({}, props))
-  });
-};
+
+/**
+ * @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"` |
+ */
+
+/** @deprecated use `ButtonProps` — see the note on `BasicButtonProps` */
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 // 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
-var InternalButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
+var Button = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _buttonConfig$color, _buttonConfig$iconPla;
   var hasPermi = props.hasPermi,
     hidden = props.hidden,
-    _props$iconPosition = props.iconPosition,
-    iconPosition = _props$iconPosition === void 0 ? "start" : _props$iconPosition,
+    iconPosition = props.iconPosition,
     className = props.className,
     children = props.children,
     title = props.title,
+    variant = props.variant,
+    colorPalette = props.colorPalette,
+    reRender = props.reRender,
     buttonConfig = _objectWithoutProperties(props, _excluded);
   var _usePermissions = usePermissions(hasPermi),
     permitted = _usePermissions.permitted;
   if (!permitted || hidden) {
     return null;
   }
-  return /*#__PURE__*/_jsx(AntdButton, _objectSpread(_objectSpread({}, buttonConfig), {}, {
+
+  // `surface` rides antd's `filled` so the whole colour ramp keeps working, and only puts the
+  // border back — see `.surface` in index.module.scss.
+  var isSurface = variant === "surface";
+
+  // 旧的 colorPalette 翻译成 antd 的 color；gray 对应 antd 的 default，其余同名。
+  var mappedColor = (_buttonConfig$color = buttonConfig.color) !== null && _buttonConfig$color !== void 0 ? _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.
+  var needsDefaultColor = !!variant && variant !== "solid" && !mappedColor && !buttonConfig.type && !buttonConfig.danger;
+  var button = /*#__PURE__*/_jsx(AntdButton, _objectSpread(_objectSpread({}, buttonConfig), {}, {
     ref: ref,
-    className: classNames(className, styles.button, _defineProperty({}, styles[iconPosition], iconPosition)),
+    color: needsDefaultColor ? "default" : mappedColor,
+    variant: isSurface ? "filled" : variant
+    // 这里曾经把 iconPosition 拦下来换成一个 styles[iconPosition] 类名，但
+    // index.module.scss 里根本没有 .start / .end —— 结果 iconPosition="end" 完全不起作用，
+    // 还给每个按钮挂上一个字符串 "undefined" 的类。现在翻译成 antd v6 的 iconPlacement。
+    ,
+    iconPlacement: (_buttonConfig$iconPla = buttonConfig.iconPlacement) !== null && _buttonConfig$iconPla !== void 0 ? _buttonConfig$iconPla : iconPosition,
+    className: classNames(className, styles.button, _defineProperty({}, styles.surface, isSurface)),
     children: children !== null && children !== void 0 ? children : title
   }));
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: reRender ? reRender(button) : button
+  });
 });
-var Button = InternalButton;
-Button.Chakra = ChakraButton;
+Button.displayName = "Button";
 export default Button;

package/es/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/es/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/es/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/es/components/ChainGraph/index.js

@@ -137,7 +137,9 @@ var ChainGraph = observer(function (props) {
   });
   return /*#__PURE__*/_jsx(Spin, {
     spinning: loading || isLayouting && !!(data !== null && data !== void 0 && (_data$children = data.children) !== null && _data$children !== void 0 && _data$children.length),
-    wrapperClassName: classNames(styles.spinWrapper, wrapperClassName),
+    classNames: {
+      root: classNames(styles.spinWrapper, wrapperClassName)
+    },
     children: /*#__PURE__*/_jsxs("div", {
       className: "".concat(styles.ChainGraph, " ").concat(className),
       style: {

package/es/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/es/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/es/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/es/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/es/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/es/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;
     }

package/es/components/Chat/ChatInput/_components/AgentToggleButton/index.module.scss

@@ -3,27 +3,27 @@
   align-items: center;
   column-gap: 2px;
   padding: 0 11px;
-  border-radius: 4px;
-  border: 1px solid var(--primary-color);
+  border-radius: var(--vita-radius-xs);
+  border: 1px solid var(--vita-primary);
   font-size: 14px;
   cursor: pointer;
   transition: all 0.3s;
   height: 100%;
-  background-color: var(--cf-surface);
+  background-color: var(--vita-surface);
 
   .icon {
     font-size: 22px;
   }
 
   &.active {
-    color: var(--primary-color);
-    border-color: var(--primary-color);
-    background-color: color-mix(in srgb, var(--primary-color) 13%, transparent);
+    color: var(--vita-primary);
+    border-color: var(--vita-primary);
+    background-color: color-mix(in srgb, var(--vita-primary) 13%, transparent);
   }
 
   &:hover {
-    color: var(--cf-text);
-    border-color: var(--cf-border);
-    background-color: var(--cf-row-hover);
+    color: var(--vita-foreground);
+    border-color: var(--vita-border);
+    background-color: var(--vita-hover);
   }
 }

package/es/components/Chat/ChatInput/_components/FileList/index.module.scss

@@ -11,8 +11,8 @@
     column-gap: 5px;
     padding: 4px 10px;
     font-size: 14px;
-    color: var(--cf-text);
-    background: var(--cf-subtle);
+    color: var(--vita-foreground);
+    background: var(--vita-muted);
     border-radius: 3px;
     transition: box-shadow 0.3s, color 0.3s;
     cursor: pointer;
@@ -22,7 +22,7 @@
     }
     
     &:hover {
-      color: var(--primary-color);
+      color: var(--vita-primary);
     }
   }
 }

package/es/components/Chat/ChatInput/_components/SendButton/index.module.scss

@@ -5,10 +5,10 @@
   }
 
   display: flex;
-  width: 32px;
-  height: 32px;
+  width: var(--vita-control-height);
+  height: var(--vita-control-height);
   border: none;
-  border-radius: 4px;
+  border-radius: var(--vita-radius);
 
   :global(.ant-btn-icon) {
     display: flex;

package/es/components/Chat/ChatInput/_components/StopButton/index.module.scss

@@ -3,8 +3,8 @@
   align-items: center;
   justify-content: center;
 
-  width: 32px;
-  height: 32px;
+  width: var(--vita-control-height);
+  height: var(--vita-control-height);
 
   cursor: pointer;
 }

package/es/components/Chat/ChatInput/_components/UploadButton/index.js

@@ -60,7 +60,7 @@ var UploadButton = function UploadButton(props) {
           icon: /*#__PURE__*/_jsx(Icon, {
             icon: isUpload ? "eos-icons:loading" : "heroicons-outline:paper-clip",
             fontSize: 22,
-            color: "var(--cf-text-3)"
+            color: "var(--vita-subtle-foreground)"
           }),
           onClick: onInterceptClick ? function (e) {
             e.stopPropagation();

package/es/components/Chat/ChatInput/_components/UploadButton/index.module.scss

@@ -1,8 +1,8 @@
 .clip {
-  width: 32px;
-  height: 32px;
+  width: var(--vita-control-height);
+  height: var(--vita-control-height);
 
-  border-radius: 4px;
+  border-radius: var(--vita-radius);
 
   :global(.ant-btn-icon) {
     display: flex;

package/es/components/Chat/ChatInput/_utils/index.js

@@ -1,4 +1,4 @@
-import { notification } from "antd";
+import { notification } from "../../../../feedback";
 
 /**
  * Handle the file upload response