@hsu-react/ui 0.0.13 → 0.0.15

package/lib/components/Upload/_hooks/useUploadOperations.js

@@ -7,7 +7,7 @@ exports.useUploadOperations = useUploadOperations;
 var _react = require("react");
 var _hsuUtils = require("hsu-utils");
 /**
- * 管理上传和下载操作
+ * Manage upload and download operations
  */
 function useUploadOperations({
   onUploadingList
@@ -20,7 +20,7 @@ function useUploadOperations({
     uploadingList: {}
   });
 
-  // 更新时同步到 ref
+  // Sync to the ref on update
   (0, _react.useEffect)(() => {
     operationsRef.current.downloading = downloading;
   }, [downloading]);
@@ -34,7 +34,7 @@ function useUploadOperations({
     }
   }, [uploadingList, lastUploadList, onUploadingList]);
 
-  // 清理函数
+  // Cleanup function
   (0, _react.useEffect)(() => {
     return () => {
       const {

package/lib/components/Upload/_hooks/useUploadPreview.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 /**
- * 管理文件预览状态
+ * Manage the file preview state
  */
 export declare function useUploadPreview(): {
     file: {

package/lib/components/Upload/_hooks/useUploadPreview.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useUploadPreview = useUploadPreview;
 var _react = require("react");
 /**
- * 管理文件预览状态
+ * Manage the file preview state
  */
 function useUploadPreview() {
   const [file, setFile] = (0, _react.useState)({});

package/lib/components/Upload/_utils/chunkUpload.d.ts

@@ -20,7 +20,7 @@ interface ChunkUploadOptions {
     onUploadSuccess?: () => void;
 }
 /**
- * 分片上传
+ * Chunked upload
  */
 export declare function chunkUpload({ file, chunkAction, mergeChunkAction, chunkNum, data, headers, accept, size, en, uploadingList, setUploadingList, onProgress, onSuccess, onError, onUploadSuccess, }: ChunkUploadOptions): Promise<void>;
 export {};

package/lib/components/Upload/_utils/chunkUpload.js

@@ -10,7 +10,7 @@ var _hsuUtils = require("hsu-utils");
 var _ = require(".");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
- * 分片上传
+ * Chunked upload
  */
 async function chunkUpload({
   file,
@@ -29,7 +29,7 @@ async function chunkUpload({
   onError,
   onUploadSuccess
 }) {
-  // 验证文件
+  // Validate the file
   const validation = (0, _.validateFile)({
     file,
     accept,
@@ -42,8 +42,8 @@ async function chunkUpload({
   }
   const name = file.name;
   const uploadId = (0, _utils.getUUID)();
-  const sliceSize = (0, _.toMB)(5); // 切片大小，每个切片5MB
-  const totalSlices = Math.ceil(file.size / sliceSize); // 获取切片数量
+  const sliceSize = (0, _.toMB)(5); // Chunk size, 5MB per chunk
+  const totalSlices = Math.ceil(file.size / sliceSize); // Get the number of chunks
 
   let chunk = 0;
   let postPromises = [];

package/lib/components/Upload/_utils/createFormData.d.ts

@@ -1,4 +1,4 @@
 /**
- * 创建 FormData 并添加数据
+ * Create a FormData instance and append data
  */
 export declare function createFormData(data?: Partial<Record<string, string>>): FormData;

package/lib/components/Upload/_utils/createFormData.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.createFormData = createFormData;
 /**
- * 创建 FormData 并添加数据
+ * Create a FormData instance and append data
  */
 function createFormData(data) {
   const formData = new FormData();

package/lib/components/Upload/_utils/extractFileUrl.d.ts

@@ -1,5 +1,5 @@
 import { UploadFile } from "antd";
 /**
- * 从响应中提取文件 URL
+ * Extract the file URL from the response
  */
 export declare function extractFileUrl(file: UploadFile): UploadFile;

package/lib/components/Upload/_utils/extractFileUrl.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.extractFileUrl = extractFileUrl;
 /**
- * 从响应中提取文件 URL
+ * Extract the file URL from the response
  */
 function extractFileUrl(file) {
   if (file.response?.data?.list?.[0]?.url) {

package/lib/components/Upload/_utils/isSuccessResponse.d.ts

@@ -1,5 +1,5 @@
 /**
- * 检查响应是否成功
+ * Check whether the response is successful
  */
 export declare function isSuccessResponse(response: {
     code?: number;

package/lib/components/Upload/_utils/isSuccessResponse.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.isSuccessResponse = isSuccessResponse;
 /**
- * 检查响应是否成功
+ * Check whether the response is successful
  */
 function isSuccessResponse(response) {
   const code = response.code ?? response.data?.code;

package/lib/components/Upload/_utils/normalUpload.d.ts

@@ -18,7 +18,7 @@ interface NormalUploadOptions {
     onUploadSuccess?: () => void;
 }
 /**
- * 普通文件上传
+ * Normal file upload
  */
 export declare function normalUpload({ file, action, data, headers, accept, size, en, uploadingList, setUploadingList, onProgress, onSuccess, onError, onUploadSuccess, }: NormalUploadOptions): Promise<void>;
 export {};

package/lib/components/Upload/_utils/normalUpload.js

@@ -9,7 +9,7 @@ var _hsuUtils = require("hsu-utils");
 var _ = require(".");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
- * 普通文件上传
+ * Normal file upload
  */
 async function normalUpload({
   file,
@@ -26,7 +26,7 @@ async function normalUpload({
   onError,
   onUploadSuccess
 }) {
-  // 验证文件
+  // Validate the file
   const validation = (0, _.validateFile)({
     file,
     accept,

package/lib/components/Upload/_utils/toMB.d.ts

@@ -1,4 +1,4 @@
 /**
- * 将 MB 转换为字节
+ * Convert MB to bytes
  */
 export declare function toMB(size: number): number;

package/lib/components/Upload/_utils/toMB.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.toMB = toMB;
 /**
- * 将 MB 转换为字节
+ * Convert MB to bytes
  */
 function toMB(size) {
   return size * 1024 * 1024;

package/lib/components/Upload/_utils/validateFile.d.ts

@@ -6,7 +6,7 @@ interface ValidateFileOptions {
     en?: boolean;
 }
 /**
- * 验证文件格式和大小
+ * Validate file format and size
  */
 export declare function validateFile({ file, accept, size, en, }: ValidateFileOptions): {
     valid: boolean;

package/lib/components/Upload/_utils/validateFile.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.validateFile = validateFile;
 var _toMB = require("./toMB");
 /**
- * 验证文件格式和大小
+ * Validate file format and size
  */
 function validateFile({
   file,

package/lib/components/Upload/index.js

@@ -68,7 +68,7 @@ const Upload = props => {
     setFile: setPreviewFile
   } = (0, _hooks.useUploadPreview)();
 
-  // 分片上传
+  // Chunked upload
   const chunkCustomRequest = (0, _react.useCallback)(async options => {
     const {
       file: _file,
@@ -102,7 +102,7 @@ const Upload = props => {
     });
   }, [chunkAction, mergeChunkAction, chunkNum, data, headers, accept, size, en, uploadingList, setUploadingList, onUploadSuccess]);
 
-  // 普通上传
+  // Normal upload
   const customRequest = (0, _react.useCallback)(async options => {
     const {
       file: _file,

package/lib/config-provider/index.d.ts

@@ -1,14 +1,14 @@
 import React from "react";
 import { RequestImpl } from "../request";
 export interface ConfigProviderProps {
-    /** 当前用户权限码列表；传入后 usePermissions / hasPermi 据此校验。不传则默认全部放行 */
+    /** Current user's permission code list; when provided, usePermissions / hasPermi validate against it. If omitted, everything is allowed by default */
     permissions?: string[] | null;
-    /** 注入 HTTP 请求实现，供 ImportForm 等智能组件使用 */
+    /** Inject the HTTP request implementation, used by smart components such as ImportForm */
     request?: Partial<RequestImpl>;
     children?: React.ReactNode;
 }
 /**
- * Hsu UI 全局配置：注入权限与请求实现。
+ * Hsu UI global configuration: injects permissions and the request implementation.
  *
  * @example
  * <ConfigProvider permissions={perms} request={{ get, post, del, put }}>

package/lib/config-provider/index.js

@@ -11,7 +11,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
- * Hsu UI 全局配置：注入权限与请求实现。
+ * Hsu UI global configuration: injects permissions and the request implementation.
  *
  * @example
  * <ConfigProvider permissions={perms} request={{ get, post, del, put }}>
@@ -23,7 +23,7 @@ const ConfigProvider = ({
   request,
   children
 }) => {
-  // 在渲染期同步注入，确保子组件首次交互即可拿到 request 实现
+  // Inject synchronously during render so child components get the request implementation on their very first interaction
   (0, _react.useMemo)(() => {
     if (request) (0, _request.configureRequest)(request);
   }, [request]);

package/lib/hooks/usePermissions.js

@@ -13,17 +13,17 @@ const PermissionsContent = exports.PermissionsContent = /*#__PURE__*/(0, _react.
 function usePermissions(hasPermi) {
   const permissions = (0, _react.useContext)(PermissionsContent).permissions;
   const checkPermission = (0, _react.useCallback)(hasPermi => {
-    // 如果hasPermi或permissions为空，则认为有权限
+    // If hasPermi or permissions is empty, treat as permitted
     if (!hasPermi || !permissions) {
       return true;
     }
 
-    // 如果hasPermi或permissions为空数组，则认为没有权限
+    // If hasPermi or permissions is an empty array, treat as not permitted
     if (Array.isArray(hasPermi) && !hasPermi.length || Array.isArray(permissions) && !permissions.length) {
       return false;
     }
 
-    // 如果hasPermi和permissions都不为空数组，则判断hasPermi是否在permissions中
+    // If neither hasPermi nor permissions is an empty array, check whether hasPermi is included in permissions
     return (0, _hsuUtils.array_is_includes)(permissions, hasPermi);
   }, [permissions]);
   const permitted = (0, _react.useMemo)(() => {

package/lib/index.d.ts

@@ -4,6 +4,8 @@ export { configureRequest, get, post, del, put, } from "./request";
 export type { RequestImpl, RequestConfig, ResType, ListRes, FileRes } from "./request";
 export { usePermissions, PermissionsContent, useLabelWidth } from "./hooks";
 export { getUUID, supportsHasSelector, isLegacyHasSelectorBrowser } from "./utils";
+export { lightTokens, darkTokens, defaultPrimaryColor } from "./styles/tokens";
+export type { HsuThemeTokens } from "./styles/tokens";
 export { default as Button } from "./components/Button";
 export * from "./components/Button";
 export { default as ChainGraph } from "./components/ChainGraph";

package/lib/index.js

@@ -16,6 +16,9 @@ var _exportNames = {
   getUUID: true,
   supportsHasSelector: true,
   isLegacyHasSelectorBrowser: true,
+  lightTokens: true,
+  darkTokens: true,
+  defaultPrimaryColor: true,
   Button: true,
   ChainGraph: true,
   Chart: true,
@@ -266,6 +269,18 @@ Object.defineProperty(exports, "configureRequest", {
     return _request.configureRequest;
   }
 });
+Object.defineProperty(exports, "darkTokens", {
+  enumerable: true,
+  get: function () {
+    return _tokens.darkTokens;
+  }
+});
+Object.defineProperty(exports, "defaultPrimaryColor", {
+  enumerable: true,
+  get: function () {
+    return _tokens.defaultPrimaryColor;
+  }
+});
 Object.defineProperty(exports, "del", {
   enumerable: true,
   get: function () {
@@ -290,6 +305,12 @@ Object.defineProperty(exports, "isLegacyHasSelectorBrowser", {
     return _utils.isLegacyHasSelectorBrowser;
   }
 });
+Object.defineProperty(exports, "lightTokens", {
+  enumerable: true,
+  get: function () {
+    return _tokens.lightTokens;
+  }
+});
 Object.defineProperty(exports, "post", {
   enumerable: true,
   get: function () {
@@ -324,6 +345,7 @@ var _configProvider = _interopRequireDefault(require("./config-provider"));
 var _request = require("./request");
 var _hooks = require("./hooks");
 var _utils = require("./utils");
+var _tokens = require("./styles/tokens");
 var _Button = _interopRequireWildcard(require("./components/Button"));
 Object.keys(_Button).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/request/ResType.d.ts

@@ -1,10 +1,10 @@
-/** 通用响应包装：与后端约定的 { code, data, msg } 结构 */
+/** Generic response wrapper: the { code, data, msg } structure agreed with the backend */
 export interface ResType<T = unknown> {
     code: number;
     data: T;
     msg?: string;
 }
-/** 分页列表响应 */
+/** Paginated list response */
 export interface ListRes<T> {
     list: Array<T>;
     page: {
@@ -13,7 +13,7 @@ export interface ListRes<T> {
         total: number;
     };
 }
-/** 文件响应（二进制下载） */
+/** File response (binary download) */
 export interface FileRes {
     filename: string;
     data: ArrayBuffer;

package/lib/request/index.d.ts

@@ -1,18 +1,18 @@
 import type { ResType } from "./ResType";
 export * from "./ResType";
-/** 请求配置（与常见 axios 封装兼容的子集） */
+/** Request configuration (a subset compatible with common axios wrappers) */
 export interface RequestConfig<P = object> {
     params?: P;
     responseType?: string;
     headers?: Record<string, unknown>;
-    /** 为 true 时该请求 401 不触发全局跳登录 */
+    /** When true, a 401 on this request does not trigger the global redirect to login */
     skipAuthRedirect?: boolean;
     [key: string]: unknown;
 }
 /**
- * 组件库内部「智能组件」依赖的请求实现接口。
- * 由使用方通过 ConfigProvider 的 `request` 或 `configureRequest()` 注入，
- * 组件库自身不绑定任何具体 HTTP 客户端。
+ * Request implementation interface that the library's internal "smart components" depend on.
+ * Injected by consumers via ConfigProvider's `request` or `configureRequest()`;
+ * the component library itself is not bound to any specific HTTP client.
  */
 export interface RequestImpl {
     get<T = unknown>(url: string, config?: any): Promise<ResType<T>>;
@@ -20,7 +20,7 @@ export interface RequestImpl {
     del<T = unknown>(url: string, config?: any): Promise<ResType<T>>;
     put<T = unknown>(url: string, data?: any): Promise<ResType<T>>;
 }
-/** 注入真实的请求实现（可只注入用到的方法） */
+/** Inject the real request implementation (only the methods you use need to be provided) */
 export declare const configureRequest: (request: Partial<RequestImpl>) => void;
 export declare const get: RequestImpl["get"];
 export declare const post: RequestImpl["post"];

package/lib/request/index.js

@@ -23,14 +23,14 @@ Object.keys(_ResType).forEach(function (key) {
     }
   });
 });
-/** 请求配置（与常见 axios 封装兼容的子集） */
+/** Request configuration (a subset compatible with common axios wrappers) */
 
 /**
- * 组件库内部「智能组件」依赖的请求实现接口。
- * 由使用方通过 ConfigProvider 的 `request` 或 `configureRequest()` 注入，
- * 组件库自身不绑定任何具体 HTTP 客户端。
+ * Request implementation interface that the library's internal "smart components" depend on.
+ * Injected by consumers via ConfigProvider's `request` or `configureRequest()`;
+ * the component library itself is not bound to any specific HTTP client.
  */
-// 注意：config/data 用宽松类型，以兼容各类 axios 封装的方法签名差异
+// Note: config/data use loose types to accommodate signature differences across axios wrappers
 
 const notConfigured = () => {
   throw new Error("[@hsu-react/ui] 尚未注入 request。请用 <ConfigProvider request={...}> 包裹应用，" + "或在入口调用 configureRequest({ get, post, del, put })。");
@@ -42,7 +42,7 @@ let impl = {
   put: notConfigured
 };
 
-/** 注入真实的请求实现（可只注入用到的方法） */
+/** Inject the real request implementation (only the methods you use need to be provided) */
 const configureRequest = request => {
   impl = {
     ...impl,

package/lib/styles/antd-overload.scss

@@ -1,3 +1,6 @@
+// Design tokens (colors/fonts/radii/shadows, incl. dark theme) — importing this file brings in the full set of variables
+@use "./tokens";
+
 .ant-layout-sider-children {
   display: flex;
   flex-direction: column;
@@ -21,18 +24,18 @@
   justify-content: center;
 }
 
-// 主色按钮交由 antd colorPrimary 令牌驱动（随亮/暗外观自动取色 + 正确的 hover/active 派生）
+// Primary buttons are driven by the antd colorPrimary token (auto-picks color for light/dark appearance + correct hover/active derivation)
 
 .ant-menu-item,
 .ant-menu-submenu-title {
   column-gap: 5px;
 }
 
-// ===== Cloudflare 风格：侧边菜单（亮/暗通用）=====
+// ===== Cloudflare style: side menu (shared by light/dark) =====
 .ant-layout-sider .ant-menu {
   border-inline-end: none;
 
-  // 选中行左侧水色高亮条 + 中等字重，呼应 CF dashboard 的左缘指示器
+  // Aqua highlight bar on the left of the selected row + medium font weight, echoing the CF dashboard's left-edge indicator
   .ant-menu-item-selected {
     position: relative;
 
@@ -53,7 +56,7 @@
     }
   }
 
-  // CF 分区标题：小号、加粗、字间距、弱色（英文大写）
+  // CF section titles: small size, bold, letter-spaced, muted color (uppercase English)
   .ant-menu-item-group-title {
     padding: 18px 20px 6px;
 
@@ -66,29 +69,29 @@
     color: var(--cf-text-3);
   }
 
-  // 分组内的项左对齐缩进更克制（贴近 CF）
+  // Items within a group use more restrained left-aligned indentation (closer to CF)
   .ant-menu-item-group-list .ant-menu-item {
     padding-left: 20px !important;
   }
 }
 
-// ===== Cloudflare 风格：表格 =====
+// ===== Cloudflare style: tables =====
 .ant-table-wrapper {
   .ant-table {
-    // 表头更细的字重与字间距
+    // Lighter font weight and letter spacing for table headers
     .ant-table-thead > tr > th {
       font-weight: 600;
       font-size: 13px;
     }
 
-    // 去掉单元格右侧默认竖分割线（CF 表格只保留横线）
+    // Remove the default vertical divider on the right of cells (CF tables keep horizontal lines only)
     .ant-table-thead > tr > th::before {
       display: none !important;
     }
   }
 }
 
-// ===== Cloudflare 风格：Tag 走描边轻底 =====
+// ===== Cloudflare style: Tags use outlined style with a light background =====
 .ant-tag {
   border-radius: 6px;
 }

package/lib/styles/tokens.d.ts

@@ -0,0 +1,26 @@
+/**
+ * TS constants for the Hsu UI design tokens (for JS-side consumers such as antd themeConfig).
+ * The CSS-variable version lives in ./tokens.scss; the two must be kept in sync.
+ */
+export interface HsuThemeTokens {
+    /** Page canvas */
+    canvas: string;
+    /** Card/panel background */
+    surface: string;
+    /** Table header/secondary background */
+    subtle: string;
+    /** Border */
+    border: string;
+    /** Lighter border */
+    borderWeak: string;
+    /** Header bar background */
+    headerBg: string;
+    text: string;
+    text2: string;
+    text3: string;
+    rowHover: string;
+}
+export declare const lightTokens: HsuThemeTokens;
+export declare const darkTokens: HsuThemeTokens;
+/** Default primary color (initial value of the CSS variable --primary-color; consuming projects may override at runtime) */
+export declare const defaultPrimaryColor = "#1677ff";

package/lib/styles/tokens.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.lightTokens = exports.defaultPrimaryColor = exports.darkTokens = void 0;
+/**
+ * TS constants for the Hsu UI design tokens (for JS-side consumers such as antd themeConfig).
+ * The CSS-variable version lives in ./tokens.scss; the two must be kept in sync.
+ */
+
+const lightTokens = exports.lightTokens = {
+  canvas: "#f6f7f9",
+  surface: "#ffffff",
+  subtle: "#fafbfc",
+  border: "#e6e8eb",
+  borderWeak: "#eceef1",
+  headerBg: "#ffffff",
+  text: "rgba(0, 0, 0, 0.88)",
+  text2: "rgba(0, 0, 0, 0.45)",
+  text3: "rgba(0, 0, 0, 0.35)",
+  rowHover: "#f6f7f9"
+};
+const darkTokens = exports.darkTokens = {
+  canvas: "#131314",
+  surface: "#1c1c1e",
+  subtle: "#232325",
+  border: "rgba(255, 255, 255, 0.12)",
+  borderWeak: "rgba(255, 255, 255, 0.08)",
+  headerBg: "#1c1c1e",
+  text: "rgba(255, 255, 255, 0.85)",
+  text2: "rgba(255, 255, 255, 0.45)",
+  text3: "rgba(255, 255, 255, 0.35)",
+  rowHover: "rgba(255, 255, 255, 0.04)"
+};
+
+/** Default primary color (initial value of the CSS variable --primary-color; consuming projects may override at runtime) */
+const defaultPrimaryColor = exports.defaultPrimaryColor = "#1677ff";

package/lib/styles/tokens.scss

@@ -0,0 +1,62 @@
+// =============================================================
+// Hsu UI design tokens (single source of truth)
+// Two value sets, light/dark; dark is activated by html[data-theme="dark"] (Theme toggle in consuming projects)
+// or html[data-prefers-color-scheme="dark"] (dumi docs site).
+// TS-side constants live in ./tokens.ts (for JS consumers such as antd themeConfig); the two must be kept in sync.
+// =============================================================
+
+:root {
+  // ---- Colors - neutral ----
+  --cf-canvas: #f6f7f9; // Page canvas
+  --cf-surface: #ffffff; // Card/panel background
+  --cf-subtle: #fafbfc; // Table header/secondary background
+  --cf-border: #e6e8eb; // Border
+  --cf-border-weak: #eceef1; // Lighter border
+  --cf-text: rgba(0, 0, 0, 0.88);
+  --cf-text-2: rgba(0, 0, 0, 0.45);
+  --cf-text-3: rgba(0, 0, 0, 0.35);
+  --cf-row-hover: #f6f7f9;
+
+  // ---- Colors - brand & functional ----
+  --primary-color: #1677ff; // Default primary color (consuming projects may override at runtime)
+  --cf-success: #52c41a;
+  --cf-warning: #faad14;
+  --cf-error: #ff4d4f;
+
+  // ---- Fonts ----
+  --cf-font-family:
+    PingFangSC-Regular, "PingFang SC", -apple-system, BlinkMacSystemFont,
+    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Microsoft YaHei", sans-serif;
+  --cf-font-size-sm: 12px;
+  --cf-font-size: 14px;
+  --cf-font-size-lg: 16px;
+
+  // ---- Border radius ----
+  --cf-radius-sm: 6px;
+  --cf-radius: 8px;
+  --cf-radius-lg: 12px;
+
+  // ---- Shadows (the CF look relies mainly on borders; shadows are for overlays only) ----
+  --cf-shadow-1: 0 1px 2px rgba(16, 24, 40, 0.05);
+  --cf-shadow-2: 0 4px 12px rgba(16, 24, 40, 0.08);
+  --cf-shadow-3: 0 8px 24px rgba(16, 24, 40, 0.12);
+}
+
+html[data-theme="dark"],
+html[data-prefers-color="dark"],
+html[data-prefers-color-scheme="dark"] {
+  --cf-canvas: #131314;
+  --cf-surface: #1c1c1e;
+  --cf-subtle: #232325;
+  --cf-border: rgba(255, 255, 255, 0.12);
+  --cf-border-weak: rgba(255, 255, 255, 0.08);
+  --cf-text: rgba(255, 255, 255, 0.85);
+  --cf-text-2: rgba(255, 255, 255, 0.45);
+  --cf-text-3: rgba(255, 255, 255, 0.35);
+  --cf-row-hover: rgba(255, 255, 255, 0.04);
+
+  // Deeper shadows in dark mode (to distinguish overlays from the dark background)
+  --cf-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
+  --cf-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.45);
+  --cf-shadow-3: 0 8px 24px rgba(0, 0, 0, 0.55);
+}

package/lib/typings.d.ts

@@ -1,5 +1,5 @@
-// 环境声明：为构建期类型检查 / 声明文件生成补充缺失的模块类型。
-// 仅提供类型，不影响运行时行为。
+// Ambient declarations: supply missing module types for build-time type checking / declaration file generation.
+// Types only; no runtime effect.
 
 // CSS / Sass Modules
 declare module "*.module.scss" {
@@ -19,7 +19,7 @@ declare module "*.css" {
   export default content;
 }
 
-// 静态资源
+// Static assets
 declare module "*.png" {
   const src: string;
   export default src;