@hsu-react/ui 2.2.14 → 2.3.0

package/README.md

@@ -10,9 +10,9 @@
 ## 安装
 
 ```bash
-yarn add @hsu-react/ui
+pnpm add @hsu-react/ui
 # peerDependencies
-yarn add react react-dom antd@^6 @ant-design/icons@^6 mobx mobx-react-lite
+pnpm add react react-dom antd@^6 @ant-design/icons@^6 mobx mobx-react-lite
 ```
 
 两条版本线并行，包名同为 `@hsu-react/ui`，但分仓维护：
@@ -53,10 +53,10 @@ import "@hsu-react/ui/es/styles/antd-overload.scss";
 ## 开发
 
 ```bash
-yarn          # 安装依赖
-yarn dev      # 启动 dumi 文档站
-yarn build    # father 构建 es/ + lib/ + 类型
-yarn docs:build  # 构建文档站静态产物
+pnpm install  # 安装依赖
+pnpm dev      # 启动 dumi 文档站
+pnpm build    # father 构建 es/ + lib/ + 类型
+pnpm docs:build  # 构建文档站静态产物
 ```
 
 ## 组件一览

package/es/layout/Menu/_components/SecondaryHeader/index.module.scss

@@ -41,7 +41,7 @@
     text-overflow: ellipsis;
   }
 
-  // 明暗两套文字色由 --cf-text 一并承担，不再各写一份字面量
+  // 明暗两套文字色由 --vita-foreground 一并承担，不再各写一份字面量
   .back,
   .title {
     color: var(--vita-foreground);

package/es/layout/Theme/index.d.ts

@@ -24,7 +24,7 @@ export interface ThemeProps {
  * - 自存一份主题色（原来固定是青色）                                -> antd useToken 里当前生效的 colorPrimary
  * - matchMedia 监听系统深色                                       -> useIsDark
  * - borderRadius / colorBorder / Table / Card / Button / Input 等成套 token 覆盖 -> toAntdTheme
- * - 在包裹元素上内联重定义 --cf-*：那会盖掉 tokens.scss 生成的值，属于主动帮倒忙
+ * - 在包裹元素上内联重定义 --vita-*：那会盖掉 tokens.scss 生成的值，属于主动帮倒忙
  */
 declare const Theme: React.FC<ThemeProps>;
 export default Theme;

package/es/layout/Theme/index.js

@@ -23,7 +23,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * - 自存一份主题色（原来固定是青色）                                -> antd useToken 里当前生效的 colorPrimary
  * - matchMedia 监听系统深色                                       -> useIsDark
  * - borderRadius / colorBorder / Table / Card / Button / Input 等成套 token 覆盖 -> toAntdTheme
- * - 在包裹元素上内联重定义 --cf-*：那会盖掉 tokens.scss 生成的值，属于主动帮倒忙
+ * - 在包裹元素上内联重定义 --vita-*：那会盖掉 tokens.scss 生成的值，属于主动帮倒忙
  */
 var Theme = observer(function (props) {
   var _navDarkColors$top, _navDarkColors$bottom;

package/es/styles/tokens.d.ts

@@ -38,8 +38,10 @@ export interface HsuThemeTokens {
     shadow3: string;
 }
 /**
- * 2.0 之前的字段名。CSS 变量那侧留了 `--cf-*` 别名，但这里的 TS 字段是直接改名的 ——
- * 消费方写 `lightTokens.canvas` 会直接拿到 undefined，且没有任何提示。补上映射。
+ * 2.0 之前的字段名。TS 字段是直接改名的，消费方写 `lightTokens.canvas` 会拿到
+ * undefined 且没有任何提示，所以这里补上映射。
+ *
+ * （CSS 变量那侧原本也有一层 `--cf-*` 别名，2.3.0 起已移除，见 docs/guide.md。）
  *
  * `headerBg` 在重命名时被整个删掉了（没有对应的新名），这里指回 `surface`：2.0 之前
  * 两者在浅色下同为 #ffffff、暗色下同为卡片底色，语义上就是「顶栏用的面」。
@@ -98,7 +100,7 @@ export declare const breakpoints: {
     sm: number;
     md: number;
     lg: number;
-    xl: number; /** Default brand colour; consuming projects override it via `ConfigProvider.primaryColor` */
+    xl: number;
     xxl: number;
 };
 /**

package/es/styles/tokens.js

@@ -28,8 +28,10 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 import raw from "./tokens.json";
 
 /**
- * 2.0 之前的字段名。CSS 变量那侧留了 `--cf-*` 别名，但这里的 TS 字段是直接改名的 ——
- * 消费方写 `lightTokens.canvas` 会直接拿到 undefined，且没有任何提示。补上映射。
+ * 2.0 之前的字段名。TS 字段是直接改名的，消费方写 `lightTokens.canvas` 会拿到
+ * undefined 且没有任何提示，所以这里补上映射。
+ *
+ * （CSS 变量那侧原本也有一层 `--cf-*` 别名，2.3.0 起已移除，见 docs/guide.md。）
  *
  * `headerBg` 在重命名时被整个删掉了（没有对应的新名），这里指回 `surface`：2.0 之前
  * 两者在浅色下同为 #ffffff、暗色下同为卡片底色，语义上就是「顶栏用的面」。

package/es/styles/tokens.scss

@@ -1,6 +1,6 @@
 // =============================================================
 // 本文件由 scripts/gen-tokens-scss.cjs 从 src/styles/tokens.json 生成，请勿手改。
-// 改令牌请改 tokens.json，然后跑 `yarn tokens`（build / prepublish 会自动跑并校验）。
+// 改令牌请改 tokens.json，然后跑 `pnpm tokens`（build / prepublish 会自动跑并校验）。
 //
 // 暗色由 html[data-theme="dark"] 激活（消费方主题开关），
 // 或 html[data-prefers-color(-scheme)="dark"]（dumi 文档站）。
@@ -62,30 +62,6 @@
   --vita-screen-lg: 1024px;
   --vita-screen-xl: 1280px;
   --vita-screen-xxl: 1536px;
-
-  // ---- 兼容别名（2.0 前的 --cf-*，单向指向新名）----
-  --cf-canvas: var(--vita-background);
-  --cf-surface: var(--vita-surface);
-  --cf-subtle: var(--vita-muted);
-  --cf-border: var(--vita-border);
-  --cf-border-weak: var(--vita-border-weak);
-  --cf-text: var(--vita-foreground);
-  --cf-text-2: var(--vita-muted-foreground);
-  --cf-text-3: var(--vita-subtle-foreground);
-  --cf-row-hover: var(--vita-hover);
-  --cf-success: var(--vita-success);
-  --cf-warning: var(--vita-warning);
-  --cf-error: var(--vita-error);
-  --cf-font-family: var(--vita-font-family);
-  --cf-font-size-sm: var(--vita-font-size-sm);
-  --cf-font-size: var(--vita-font-size);
-  --cf-font-size-lg: var(--vita-font-size-lg);
-  --cf-radius-sm: var(--vita-radius-sm);
-  --cf-radius: var(--vita-radius);
-  --cf-radius-lg: var(--vita-radius-lg);
-  --cf-shadow-1: var(--vita-shadow-1);
-  --cf-shadow-2: var(--vita-shadow-2);
-  --cf-shadow-3: var(--vita-shadow-3);
 }
 
 html[data-theme="dark"],

package/lib/layout/Menu/_components/SecondaryHeader/index.module.scss

@@ -41,7 +41,7 @@
     text-overflow: ellipsis;
   }
 
-  // 明暗两套文字色由 --cf-text 一并承担，不再各写一份字面量
+  // 明暗两套文字色由 --vita-foreground 一并承担，不再各写一份字面量
   .back,
   .title {
     color: var(--vita-foreground);

package/lib/layout/Theme/index.d.ts

@@ -24,7 +24,7 @@ export interface ThemeProps {
  * - 自存一份主题色（原来固定是青色）                                -> antd useToken 里当前生效的 colorPrimary
  * - matchMedia 监听系统深色                                       -> useIsDark
  * - borderRadius / colorBorder / Table / Card / Button / Input 等成套 token 覆盖 -> toAntdTheme
- * - 在包裹元素上内联重定义 --cf-*：那会盖掉 tokens.scss 生成的值，属于主动帮倒忙
+ * - 在包裹元素上内联重定义 --vita-*：那会盖掉 tokens.scss 生成的值，属于主动帮倒忙
  */
 declare const Theme: React.FC<ThemeProps>;
 export default Theme;

package/lib/layout/Theme/index.js

@@ -32,7 +32,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  * - 自存一份主题色（原来固定是青色）                                -> antd useToken 里当前生效的 colorPrimary
  * - matchMedia 监听系统深色                                       -> useIsDark
  * - borderRadius / colorBorder / Table / Card / Button / Input 等成套 token 覆盖 -> toAntdTheme
- * - 在包裹元素上内联重定义 --cf-*：那会盖掉 tokens.scss 生成的值，属于主动帮倒忙
+ * - 在包裹元素上内联重定义 --vita-*：那会盖掉 tokens.scss 生成的值，属于主动帮倒忙
  */
 const Theme = (0, _mobxReactLite.observer)(props => {
   const {

package/lib/styles/tokens.d.ts

@@ -38,8 +38,10 @@ export interface HsuThemeTokens {
     shadow3: string;
 }
 /**
- * 2.0 之前的字段名。CSS 变量那侧留了 `--cf-*` 别名，但这里的 TS 字段是直接改名的 ——
- * 消费方写 `lightTokens.canvas` 会直接拿到 undefined，且没有任何提示。补上映射。
+ * 2.0 之前的字段名。TS 字段是直接改名的，消费方写 `lightTokens.canvas` 会拿到
+ * undefined 且没有任何提示，所以这里补上映射。
+ *
+ * （CSS 变量那侧原本也有一层 `--cf-*` 别名，2.3.0 起已移除，见 docs/guide.md。）
  *
  * `headerBg` 在重命名时被整个删掉了（没有对应的新名），这里指回 `surface`：2.0 之前
  * 两者在浅色下同为 #ffffff、暗色下同为卡片底色，语义上就是「顶栏用的面」。
@@ -98,7 +100,7 @@ export declare const breakpoints: {
     sm: number;
     md: number;
     lg: number;
-    xl: number; /** Default brand colour; consuming projects override it via `ConfigProvider.primaryColor` */
+    xl: number;
     xxl: number;
 };
 /**

package/lib/styles/tokens.js

@@ -22,8 +22,10 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  */
 
 /**
- * 2.0 之前的字段名。CSS 变量那侧留了 `--cf-*` 别名，但这里的 TS 字段是直接改名的 ——
- * 消费方写 `lightTokens.canvas` 会直接拿到 undefined，且没有任何提示。补上映射。
+ * 2.0 之前的字段名。TS 字段是直接改名的，消费方写 `lightTokens.canvas` 会拿到
+ * undefined 且没有任何提示，所以这里补上映射。
+ *
+ * （CSS 变量那侧原本也有一层 `--cf-*` 别名，2.3.0 起已移除，见 docs/guide.md。）
  *
  * `headerBg` 在重命名时被整个删掉了（没有对应的新名），这里指回 `surface`：2.0 之前
  * 两者在浅色下同为 #ffffff、暗色下同为卡片底色，语义上就是「顶栏用的面」。

package/lib/styles/tokens.scss

@@ -1,6 +1,6 @@
 // =============================================================
 // 本文件由 scripts/gen-tokens-scss.cjs 从 src/styles/tokens.json 生成，请勿手改。
-// 改令牌请改 tokens.json，然后跑 `yarn tokens`（build / prepublish 会自动跑并校验）。
+// 改令牌请改 tokens.json，然后跑 `pnpm tokens`（build / prepublish 会自动跑并校验）。
 //
 // 暗色由 html[data-theme="dark"] 激活（消费方主题开关），
 // 或 html[data-prefers-color(-scheme)="dark"]（dumi 文档站）。
@@ -62,30 +62,6 @@
   --vita-screen-lg: 1024px;
   --vita-screen-xl: 1280px;
   --vita-screen-xxl: 1536px;
-
-  // ---- 兼容别名（2.0 前的 --cf-*，单向指向新名）----
-  --cf-canvas: var(--vita-background);
-  --cf-surface: var(--vita-surface);
-  --cf-subtle: var(--vita-muted);
-  --cf-border: var(--vita-border);
-  --cf-border-weak: var(--vita-border-weak);
-  --cf-text: var(--vita-foreground);
-  --cf-text-2: var(--vita-muted-foreground);
-  --cf-text-3: var(--vita-subtle-foreground);
-  --cf-row-hover: var(--vita-hover);
-  --cf-success: var(--vita-success);
-  --cf-warning: var(--vita-warning);
-  --cf-error: var(--vita-error);
-  --cf-font-family: var(--vita-font-family);
-  --cf-font-size-sm: var(--vita-font-size-sm);
-  --cf-font-size: var(--vita-font-size);
-  --cf-font-size-lg: var(--vita-font-size-lg);
-  --cf-radius-sm: var(--vita-radius-sm);
-  --cf-radius: var(--vita-radius);
-  --cf-radius-lg: var(--vita-radius-lg);
-  --cf-shadow-1: var(--vita-shadow-1);
-  --cf-shadow-2: var(--vita-shadow-2);
-  --cf-shadow-3: var(--vita-shadow-3);
 }
 
 html[data-theme="dark"],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hsu-react/ui",
-  "version": "2.2.14",
+  "version": "2.3.0",
   "description": "一套基于 React + Ant Design 的中后台业务组件库",
   "license": "MIT",
   "type": "module",
@@ -142,5 +142,6 @@
     "react-intl": {
       "optional": true
     }
-  }
+  },
+  "packageManager": "pnpm@9.15.9"
 }

package/src/layout/Menu/_components/SecondaryHeader/index.module.scss

@@ -41,7 +41,7 @@
     text-overflow: ellipsis;
   }
 
-  // 明暗两套文字色由 --cf-text 一并承担，不再各写一份字面量
+  // 明暗两套文字色由 --vita-foreground 一并承担，不再各写一份字面量
   .back,
   .title {
     color: var(--vita-foreground);

package/src/layout/Theme/index.tsx

@@ -30,7 +30,7 @@ export interface ThemeProps {
  * - 自存一份主题色（原来固定是青色）                                -> antd useToken 里当前生效的 colorPrimary
  * - matchMedia 监听系统深色                                       -> useIsDark
  * - borderRadius / colorBorder / Table / Card / Button / Input 等成套 token 覆盖 -> toAntdTheme
- * - 在包裹元素上内联重定义 --cf-*：那会盖掉 tokens.scss 生成的值，属于主动帮倒忙
+ * - 在包裹元素上内联重定义 --vita-*：那会盖掉 tokens.scss 生成的值，属于主动帮倒忙
  */
 const Theme: React.FC<ThemeProps> = observer((props) => {
   const { children, navDarkColors } = props;

package/src/styles/tokens.scss

@@ -1,6 +1,6 @@
 // =============================================================
 // 本文件由 scripts/gen-tokens-scss.cjs 从 src/styles/tokens.json 生成，请勿手改。
-// 改令牌请改 tokens.json，然后跑 `yarn tokens`（build / prepublish 会自动跑并校验）。
+// 改令牌请改 tokens.json，然后跑 `pnpm tokens`（build / prepublish 会自动跑并校验）。
 //
 // 暗色由 html[data-theme="dark"] 激活（消费方主题开关），
 // 或 html[data-prefers-color(-scheme)="dark"]（dumi 文档站）。
@@ -62,30 +62,6 @@
   --vita-screen-lg: 1024px;
   --vita-screen-xl: 1280px;
   --vita-screen-xxl: 1536px;
-
-  // ---- 兼容别名（2.0 前的 --cf-*，单向指向新名）----
-  --cf-canvas: var(--vita-background);
-  --cf-surface: var(--vita-surface);
-  --cf-subtle: var(--vita-muted);
-  --cf-border: var(--vita-border);
-  --cf-border-weak: var(--vita-border-weak);
-  --cf-text: var(--vita-foreground);
-  --cf-text-2: var(--vita-muted-foreground);
-  --cf-text-3: var(--vita-subtle-foreground);
-  --cf-row-hover: var(--vita-hover);
-  --cf-success: var(--vita-success);
-  --cf-warning: var(--vita-warning);
-  --cf-error: var(--vita-error);
-  --cf-font-family: var(--vita-font-family);
-  --cf-font-size-sm: var(--vita-font-size-sm);
-  --cf-font-size: var(--vita-font-size);
-  --cf-font-size-lg: var(--vita-font-size-lg);
-  --cf-radius-sm: var(--vita-radius-sm);
-  --cf-radius: var(--vita-radius);
-  --cf-radius-lg: var(--vita-radius-lg);
-  --cf-shadow-1: var(--vita-shadow-1);
-  --cf-shadow-2: var(--vita-shadow-2);
-  --cf-shadow-3: var(--vita-shadow-3);
 }
 
 html[data-theme="dark"],

package/src/styles/tokens.ts

@@ -42,8 +42,10 @@ export interface HsuThemeTokens {
 }
 
 /**
- * 2.0 之前的字段名。CSS 变量那侧留了 `--cf-*` 别名，但这里的 TS 字段是直接改名的 ——
- * 消费方写 `lightTokens.canvas` 会直接拿到 undefined，且没有任何提示。补上映射。
+ * 2.0 之前的字段名。TS 字段是直接改名的，消费方写 `lightTokens.canvas` 会拿到
+ * undefined 且没有任何提示，所以这里补上映射。
+ *
+ * （CSS 变量那侧原本也有一层 `--cf-*` 别名，2.3.0 起已移除，见 docs/guide.md。）
  *
  * `headerBg` 在重命名时被整个删掉了（没有对应的新名），这里指回 `surface`：2.0 之前
  * 两者在浅色下同为 #ffffff、暗色下同为卡片底色，语义上就是「顶栏用的面」。