@teamix-evo/tokens 0.4.0 → 0.5.0

package/variants/opentrek/theme.css

@@ -9,8 +9,8 @@
  *   @import "tailwindcss";
  *   @import "@teamix-evo/tokens/variants/opentrek/theme.css";
  *
- * shadcn 全局偏好(pointer cursor 等)由 @teamix-evo/ui 提供;
- * 业务工程通过 `teamix-evo ui init` 部署到 `src/preferences.css`。
+ * 可交互元素的 `cursor: pointer` 由 @teamix-evo/ui 各组件源码内显式声明,
+ * 不再有全局 preferences.css(见 ADR 0023)。
  */
 
 @theme {
@@ -52,7 +52,7 @@
   --color-chart-3: hsl(197 37% 24%);
   --color-chart-4: hsl(43 74% 66%);
   --color-chart-5: hsl(27 87% 67%);
-  --color-sidebar-background: hsl(0 0% 98%);
+  --color-sidebar: hsl(0 0% 98%);
   --color-sidebar-foreground: hsl(240 5.3% 26.1%);
   --color-sidebar-primary: hsl(240 5.9% 10%);
   --color-sidebar-primary-foreground: hsl(0 0% 98%);
@@ -66,6 +66,10 @@
   --layout-dialog-md: 600px;
   --layout-dialog-lg: 720px;
   --layout-dialog-xl: 800px;
+  --layout-drawer-sm: 400px;
+  --layout-drawer-md: 600px;
+  --layout-drawer-lg: 800px;
+  --layout-drawer-xl: 1200px;
   --layout-panel-sm: 200px;
   --layout-panel-md: 240px;
   --layout-submenu: 160px;
@@ -79,16 +83,76 @@
   --layout-image-preview-max-w: 90vw;
   --layout-image-preview-max-h: 85vh;
 
-  /* ─── Auxiliary Typography ──────────────────────────────── */
-  --text-xxs: 0.625rem;
+  /* ─── Form 间距精确刻度 ─────────────────────────────────── */
+  --spacing-form-label-to-input: 0.25rem; /* 4px */
+  --spacing-form-error-to-input: 0; /* 0px */
+  --spacing-form-help-to-input: 0.25rem; /* 4px */
+  --spacing-form-item-gap: 1.25rem; /* 20px */
+  --spacing-form-section-gap: 2rem; /* 32px */
+  --spacing-form-section-title-gap: 1.25rem; /* 20px */
+
+  /* ─── Input 宽度 5 档 ───────────────────────────────────── */
+  --input-width-xs: 104px;
+  --input-width-s: 216px;
+  --input-width-m: 328px;
+  --input-width-l: 440px;
+  --input-width-xl: 552px;
+
+  /* ─── 响应式断点 5 档(对齐《Teamix UI 表单设计规范》§4.1)─────
+   * XS / S / M / L / XL 五档断点 ± 24×2 ≈ 容器留白。
+   * 用于 FilterBar 多栏响应、Field 单栏 < 432 自动改上下等场景。
+   * JS 侧通过 useBreakpoint hook 读取 matchMedia,CSS 侧可在 @media (min-width: var(--bp-m)) 引用。
+   */
+  --bp-xs: 432px;
+  --bp-s: 672px;
+  --bp-m: 944px;
+  --bp-l: 1200px;
+  --bp-xl: 1600px;
+
+  /* ─── Typography 字号语义(OpenTrek 设计规则)──────────────────────────
+   *
+   * OpenTrek 用 base/lg/xl/2xl 命名口径,与 Tailwind v4 默认 text-* 数值等价,
+   * 业务代码直接用 Tailwind utility 即可,不需要再声明 --font-size-* token。
+   *
+   *   OpenTrek 命名 │ Tailwind utility │ px  │ 用途
+   *   ──────────────┼──────────────────┼─────┼────────────────────────────────
+   *   base          │ text-xs          │ 12  │ 正文 / 标签 / 脚注 / 输入框 /
+   *                 │                  │     │ 表格 / Badge / 分页 / 副标题
+   *   lg            │ text-sm          │ 14  │ 强调正文 / 弹窗标题 /
+   *                 │                  │     │ 抽屉标题 / Tab
+   *   xl            │ text-base        │ 16  │ 小标题 / 卡片标题 / 区块标题
+   *   2xl           │ text-lg          │ 18  │ 页面主标题
+   *
+   * 字重:仅使用 font-normal(400,正文/Tab 常态/表格)与 font-medium(500,
+   * 标签/导航/Tab 激活/弹窗标题/按钮)。**不使用** font-semibold / bold 等其他档位。
+   * ─────────────────────────────────────────────────────────────────────── */
+
+  /* 显式覆盖 Tailwind text-3xl 默认 30px → 28px,对齐 cd Pixel 设计体系
+     font-size-display-2 (28px) / 数据指标-大;两个变体保持一致。 */
+  --text-3xl: 1.75rem; /* 28px — Pixel display-2 / 数据指标-大 */
+
+  /* 辅助 Typography(默认 Tailwind 之外的特殊小字号 / 大字号) */
+  --text-xxs: 0.625rem; /* 10px */
   --text-xs-cal: 0.8rem;
+  --text-display-3: 2rem; /* 32px — Pixel display-3 / 运营标题(超 Tailwind 4xl=36 一档) */
 
   /* ─── Overlay ───────────────────────────────────────────── */
   --overlay-scrim: rgba(0, 0, 0, 0.5);
   --overlay-watermark: rgba(0, 0, 0, 0.15);
 
   /* ─── Border Radius ─────────────────────────────────────── */
-  --radius: 0.5rem;
+  /* OpenTrek 走现代 SaaS 圆润风格，base = 8px。
+     显式声明全部档位，禁止依赖 Tailwind 隐式默认（见 ADR 0027）。 */
+  --radius: 0.5rem; /* 8px — base，rounded-* 派生基准 */
+  --radius-sm: 4px; /* 小圆角（次要装饰、checkbox、复选框） */
+  --radius-md: 6px; /* 表单控件 / 按钮 / Tag 容器 默认档 */
+  --radius-lg: 8px; /* 卡片 / 弹层 / 大容器 */
+  --radius-xl: 12px; /* 大尺寸卡片 / 强调容器 */
+  --radius-2xl: 16px; /* 超大圆角 / 装饰性容器 */
+
+  /* Component Radius (组件级圆角，供下游组件消费) */
+  --radius-dialog: 16px;
+  --radius-tag: 4px;
 
   /* ─── Font Family ───────────────────────────────────────── */
   --font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, Segoe UI,
@@ -138,7 +202,7 @@
     --color-chart-3: hsl(30 80% 55%);
     --color-chart-4: hsl(280 65% 60%);
     --color-chart-5: hsl(340 75% 55%);
-    --color-sidebar-background: hsl(240 5.9% 10%);
+    --color-sidebar: hsl(240 5.9% 10%);
     --color-sidebar-foreground: hsl(240 4.8% 95.9%);
     --color-sidebar-primary: hsl(224.3 76.3% 48%);
     --color-sidebar-primary-foreground: hsl(0 0% 100%);

package/variants/uni-manager/base.tokens.json

@@ -366,12 +366,12 @@
     "ring": {
       "$type": "color",
       "light": {
-        "$value": "#0064C8",
-        "$description": "Focus 环颜色（品牌蓝）"
+        "$value": "transparent",
+        "$description": "Focus 环颜色 — transparent（cd hybridcloud 走 border 深化，不显示品牌色 halo ring）"
       },
       "dark": {
-        "$value": "#2789F2",
-        "$description": "暗色 Focus 环"
+        "$value": "transparent",
+        "$description": "暗色 Focus 环 — 同 light，焦点态走 border 深化"
       }
     },
 
@@ -413,12 +413,18 @@
       },
       "foreground": {
         "$type": "color",
-        "light": { "$value": "#696969", "$description": "侧边栏文字 — color.text1.2" },
+        "light": {
+          "$value": "#696969",
+          "$description": "侧边栏文字 — color.text1.2"
+        },
         "dark": { "$value": "#8C8C8C", "$description": "暗色侧边栏文字" }
       },
       "primary": {
         "$type": "color",
-        "light": { "$value": "#0064C8", "$description": "选中态文字色（品牌蓝）" },
+        "light": {
+          "$value": "#0064C8",
+          "$description": "选中态文字色（品牌蓝）"
+        },
         "dark": { "$value": "#2789F2", "$description": "暗色选中态文字" }
       },
       "primary-foreground": {
@@ -428,8 +434,14 @@
       },
       "accent": {
         "$type": "color",
-        "light": { "$value": "#F0F7FF", "$description": "选中态背景 — color.brand1.1" },
-        "dark": { "$value": "#1C1C1C", "$description": "暗色选中态背景 — color.fill1.4" }
+        "light": {
+          "$value": "#F0F7FF",
+          "$description": "选中态背景 — color.brand1.1"
+        },
+        "dark": {
+          "$value": "#1C1C1C",
+          "$description": "暗色选中态背景 — color.fill1.4"
+        }
       },
       "accent-foreground": {
         "$type": "color",
@@ -438,7 +450,10 @@
       },
       "border": {
         "$type": "color",
-        "light": { "$value": "#D9D9D9", "$description": "侧边栏边框 — color.line1.2" },
+        "light": {
+          "$value": "#D9D9D9",
+          "$description": "侧边栏边框 — color.line1.2"
+        },
         "dark": { "$value": "#1C1C1C", "$description": "暗色侧边栏边框" }
       },
       "ring": {
@@ -557,12 +572,36 @@
       }
     },
     "line-height": {
-      "none": { "$type": "number", "$value": 1, "$description": "leading-none" },
-      "tight": { "$type": "number", "$value": 1.25, "$description": "leading-tight — 大号标题" },
-      "snug": { "$type": "number", "$value": 1.375, "$description": "leading-snug" },
-      "normal": { "$type": "number", "$value": 1.5, "$description": "leading-normal — 正文（cd font.lineheight.* 一致）" },
-      "relaxed": { "$type": "number", "$value": 1.625, "$description": "leading-relaxed" },
-      "loose": { "$type": "number", "$value": 2, "$description": "leading-loose" }
+      "none": {
+        "$type": "number",
+        "$value": 1,
+        "$description": "leading-none"
+      },
+      "tight": {
+        "$type": "number",
+        "$value": 1.25,
+        "$description": "leading-tight — 大号标题"
+      },
+      "snug": {
+        "$type": "number",
+        "$value": 1.375,
+        "$description": "leading-snug"
+      },
+      "normal": {
+        "$type": "number",
+        "$value": 1.5,
+        "$description": "leading-normal — 正文（cd font.lineheight.* 一致）"
+      },
+      "relaxed": {
+        "$type": "number",
+        "$value": 1.625,
+        "$description": "leading-relaxed"
+      },
+      "loose": {
+        "$type": "number",
+        "$value": 2,
+        "$description": "leading-loose"
+      }
     },
     "letter-spacing": {
       "tighter": { "$type": "dimension", "$value": "-0.05em" },
@@ -639,6 +678,21 @@
       "$type": "dimension",
       "$value": "9999px",
       "$description": "完全圆形 — 头像 / 药丸（hybridcloud corner.semicircle）"
+    },
+    "button": {
+      "$type": "dimension",
+      "$value": "8px",
+      "$description": "8px — --radius-button — Button 圆角（组件级，对齐 corner.3）"
+    },
+    "dialog": {
+      "$type": "dimension",
+      "$value": "16px",
+      "$description": "16px — --radius-dialog — Dialog / Sheet 圆角（组件级）"
+    },
+    "tag": {
+      "$type": "dimension",
+      "$value": "4px",
+      "$description": "4px — --radius-tag — Tag 圆角（组件级，对齐 corner.2）"
     }
   },
 
@@ -698,19 +752,51 @@
     "drawer-sm": { "$value": "400px", "$description": "Drawer / Sheet 小宽度" },
     "drawer-md": { "$value": "600px", "$description": "Drawer / Sheet 中宽度" },
     "drawer-lg": { "$value": "800px", "$description": "Drawer / Sheet 大宽度" },
-    "drawer-xl": { "$value": "1200px", "$description": "Drawer / Sheet 超大宽度" },
+    "drawer-xl": {
+      "$value": "1200px",
+      "$description": "Drawer / Sheet 超大宽度"
+    },
     "panel-sm": { "$value": "200px", "$description": "侧边面板小尺寸" },
     "panel-md": { "$value": "240px", "$description": "侧边面板默认尺寸" },
     "submenu": { "$value": "160px", "$description": "子菜单宽度" },
     "menu-min": { "$value": "8rem", "$description": "Menu 最小宽度" },
     "menu-md": { "$value": "12rem", "$description": "Menu 默认宽度" },
     "popover-max": { "$value": "24rem", "$description": "Popover 最大宽度" },
-    "listbox-max": { "$value": "300px", "$description": "Select / Listbox 最大高度" },
+    "listbox-max": {
+      "$value": "300px",
+      "$description": "Select / Listbox 最大高度"
+    },
     "counter": { "$value": "1.25rem", "$description": "Badge 数字徽标尺寸" },
-    "notification": { "$value": "360px", "$description": "Notification 卡片宽度" },
+    "notification": {
+      "$value": "360px",
+      "$description": "Notification 卡片宽度"
+    },
     "textarea-min": { "$value": "80px", "$description": "Textarea 最小高度" },
-    "image-preview-max-w": { "$value": "90vw", "$description": "Image 预览最大宽度" },
-    "image-preview-max-h": { "$value": "85vh", "$description": "Image 预览最大高度" }
+    "image-preview-max-w": {
+      "$value": "90vw",
+      "$description": "Image 预览最大宽度"
+    },
+    "image-preview-max-h": {
+      "$value": "85vh",
+      "$description": "Image 预览最大高度"
+    }
+  },
+
+  "height": {
+    "$type": "dimension",
+    "$description": "组件级高度 Token — 供下游组件（cva 配置）消费；对齐 cd 业务侧 small/medium/large 档",
+    "button-sm": {
+      "$value": "24px",
+      "$description": "24px — --height-button-sm — Button size=sm（cd small，对齐旧库紧凑形态）"
+    },
+    "button-md": {
+      "$value": "32px",
+      "$description": "32px — --height-button-md — Button size=md / default（cd medium）"
+    },
+    "button-lg": {
+      "$value": "36px",
+      "$description": "36px — --height-button-lg — Button size=lg（cd large）"
+    }
   },
 
   "text-aux": {
@@ -742,18 +828,46 @@
   "animation": {
     "$description": "动画 Token — 时长、缓动函数、关键帧",
     "duration": {
-      "fast": { "$type": "duration", "$value": "150ms", "$description": "微交互（hover、focus）" },
-      "normal": { "$type": "duration", "$value": "200ms", "$description": "常规过渡" },
-      "slow": { "$type": "duration", "$value": "300ms", "$description": "面板滑入" },
-      "slower": { "$type": "duration", "$value": "500ms", "$description": "大型展开动画" }
+      "fast": {
+        "$type": "duration",
+        "$value": "150ms",
+        "$description": "微交互（hover、focus）"
+      },
+      "normal": {
+        "$type": "duration",
+        "$value": "200ms",
+        "$description": "常规过渡"
+      },
+      "slow": {
+        "$type": "duration",
+        "$value": "300ms",
+        "$description": "面板滑入"
+      },
+      "slower": {
+        "$type": "duration",
+        "$value": "500ms",
+        "$description": "大型展开动画"
+      }
     },
     "easing": {
       "linear": { "$type": "cubicBezier", "$value": [0, 0, 1, 1] },
       "ease": { "$type": "cubicBezier", "$value": [0.25, 0.1, 0.25, 1] },
-      "ease-in": { "$type": "cubicBezier", "$value": [0.4, 0, 1, 1], "$description": "元素退出" },
-      "ease-out": { "$type": "cubicBezier", "$value": [0, 0, 0.2, 1], "$description": "元素进入" },
+      "ease-in": {
+        "$type": "cubicBezier",
+        "$value": [0.4, 0, 1, 1],
+        "$description": "元素退出"
+      },
+      "ease-out": {
+        "$type": "cubicBezier",
+        "$value": [0, 0, 0.2, 1],
+        "$description": "元素进入"
+      },
       "ease-in-out": { "$type": "cubicBezier", "$value": [0.4, 0, 0.2, 1] },
-      "spring": { "$type": "cubicBezier", "$value": [0.34, 1.56, 0.64, 1], "$description": "弹性进入" }
+      "spring": {
+        "$type": "cubicBezier",
+        "$value": [0.34, 1.56, 0.64, 1],
+        "$description": "弹性进入"
+      }
     },
     "keyframes": {
       "accordion-down": {
@@ -768,13 +882,34 @@
       },
       "fade-in": { "from": { "opacity": "0" }, "to": { "opacity": "1" } },
       "fade-out": { "from": { "opacity": "1" }, "to": { "opacity": "0" } },
-      "slide-in-from-top": { "from": { "transform": "translateY(-100%)" }, "to": { "transform": "translateY(0)" } },
-      "slide-in-from-bottom": { "from": { "transform": "translateY(100%)" }, "to": { "transform": "translateY(0)" } },
-      "slide-in-from-left": { "from": { "transform": "translateX(-100%)" }, "to": { "transform": "translateX(0)" } },
-      "slide-in-from-right": { "from": { "transform": "translateX(100%)" }, "to": { "transform": "translateX(0)" } },
-      "zoom-in-95": { "from": { "opacity": "0", "transform": "scale(0.95)" }, "to": { "opacity": "1", "transform": "scale(1)" } },
-      "zoom-out-95": { "from": { "opacity": "1", "transform": "scale(1)" }, "to": { "opacity": "0", "transform": "scale(0.95)" } },
-      "spin": { "from": { "transform": "rotate(0deg)" }, "to": { "transform": "rotate(360deg)" } },
+      "slide-in-from-top": {
+        "from": { "transform": "translateY(-100%)" },
+        "to": { "transform": "translateY(0)" }
+      },
+      "slide-in-from-bottom": {
+        "from": { "transform": "translateY(100%)" },
+        "to": { "transform": "translateY(0)" }
+      },
+      "slide-in-from-left": {
+        "from": { "transform": "translateX(-100%)" },
+        "to": { "transform": "translateX(0)" }
+      },
+      "slide-in-from-right": {
+        "from": { "transform": "translateX(100%)" },
+        "to": { "transform": "translateX(0)" }
+      },
+      "zoom-in-95": {
+        "from": { "opacity": "0", "transform": "scale(0.95)" },
+        "to": { "opacity": "1", "transform": "scale(1)" }
+      },
+      "zoom-out-95": {
+        "from": { "opacity": "1", "transform": "scale(1)" },
+        "to": { "opacity": "0", "transform": "scale(0.95)" }
+      },
+      "spin": {
+        "from": { "transform": "rotate(0deg)" },
+        "to": { "transform": "rotate(360deg)" }
+      },
       "pulse": { "0%, 100%": { "opacity": "1" }, "50%": { "opacity": "0.5" } }
     }
   },
@@ -783,7 +918,10 @@
     "$type": "number",
     "$description": "层级规范 — shadcn/ui 各组件叠层顺序",
     "base": { "$value": 0 },
-    "dropdown": { "$value": 50, "$description": "DropdownMenu / Select / Popover / Tooltip" },
+    "dropdown": {
+      "$value": 50,
+      "$description": "DropdownMenu / Select / Popover / Tooltip"
+    },
     "sticky": { "$value": 100, "$description": "粘性导航 / 固定表头" },
     "overlay": { "$value": 200, "$description": "Dialog / Sheet 遮罩" },
     "modal": { "$value": 300, "$description": "Dialog / Sheet 内容" },
@@ -795,8 +933,19 @@
     "$description": "样式来源记录 — 当前从 hybridcloud.tokens.json 投影",
     "current-source": "hybridcloud.tokens.json (W3C-format projection of cloud-design fusion-theme + teamix-material)",
     "target-source": "Same — uni-manager design system based on cloud-design hybridcloud variant",
-    "replacement-scope": ["color", "radius", "shadow", "typography.font-family", "layout"],
-    "theme-customizable": ["color.primary", "color.ring", "radius.base", "typography.font-family.sans"],
+    "replacement-scope": [
+      "color",
+      "radius",
+      "shadow",
+      "typography.font-family",
+      "layout"
+    ],
+    "theme-customizable": [
+      "color.primary",
+      "color.ring",
+      "radius.base",
+      "typography.font-family.sans"
+    ],
     "status": "active",
     "$notes": [
       "组件级 token (button.height / dialog.padding 等) 已下沉到 ui 包内的 cva 配置，本文件不再维护 component.* 段落",