@keyfunc/keybricks-ds 2.1.1 → 2.3.1

package/components/tabs/ViewToggle.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-/** list/grid icon toggle — two IconButtons at the region's tier (sm 24 · md 32 · lg 36), active gets the tinted wash. */
+/** list/grid icon toggle — two IconButtons at the region's tier (sm 28 · md 32 · lg 40), active gets the tinted wash. */
 export interface ViewToggleProps {
   value?: "list" | "grid";
   /** Size tier. Omit to inherit the enclosing region's tier (the default). */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@keyfunc/keybricks-ds",
-  "version": "2.1.1",
-  "description": "Keybricks design system — 352 design tokens, three size tiers and 117 UI components in React and Vue 3, source-only.",
+  "version": "2.3.1",
+  "description": "Keybricks design system — design tokens, three size tiers and 117 UI components in React and Vue 3, source-only.",
   "license": "UNLICENSED",
   "type": "module",
   "sideEffects": [

package/readme.md

@@ -11,7 +11,7 @@ One product: the Keybricks web app (desktop, 1512×~860 design size). Key surfac
 - **Voice**: terse, technical, verb-first. Buttons are imperative: "Run Test", "Submit", "Save Settings", "Continue to Confirmation", "Mark as New", "Skip Selected".
 - **Casing**: Title Case for nav, headings, buttons, table headers ("Import History", "Custom Parameters"); sentence case for helper copy ("Import and manage configuration migrations across systems", "Click to upload or drag and drop", "JSON files only").
 - **Person**: no "I/we/you" — labels are objective and system-centric. Personal touch is limited to the dashboard greeting "Good evening, Felix" + full date "Monday, April 21, 2026".
-- **Terminology**: domain-precise EPM/ETL vocabulary — Detail Sheet, Dimension, Model, Association Match, Multi-Condition Judge, Group Calculation, Concat Merge, Reconciliation, Consolidation. Config codes render in mono ALL_CAPS_SNAKE ("FIN_CURRENCY_DEFAULT").
+- **Terminology**: domain-precise EPM/ETL vocabulary — Detail Sheet, Dimension, Model, Association Match, Multi-Condition Judge, Group Calculation, Concat Merge, Reconciliation, Consolidation. Config codes are ALL_CAPS_SNAKE ("FIN_CURRENCY_DEFAULT") and render as code chips — Menlo 12px on a light inset fill.
 - **Numbers & meta**: counts as "1 document", "2 items", relative time "2 hours ago", log lines "[14:30] Task started: Import".
 - **Status language**: "• Editing" dot-prefixed state chip; steps named as nouns ("Upload & Parse", "Comparison", "Confirmation", "Execution", "Results").
 - **Emoji**: never. Icons carry all decoration.
@@ -25,9 +25,9 @@ One product: the Keybricks web app (desktop, 1512×~860 design size). Key surfac
   3. **Component** — `--cat-*`, `--tooltip-bg`, `--dropzone-border-hover`: one part of one component, added only when no tier-2 role fits.
 
   Rules that don't bend: step 400 and lighter never carry body text on white (they are surfaces, borders, disabled glyphs); `--on-accent` (#FFFFFF) is the only foreground allowed on a saturated fill, in **both** themes; label hues are mechanical (light = 100-step bg + 700-step text, dark = 950-step bg + 300-step text) so a new category needs no judgement; hue means *category*, the four feedback roles mean *severity*. Contrast targets: 4.5:1 body text, 3:1 for 18px+/bold and for UI boundaries. Three Colors cards carry the values: Palette (every ramp), Schemes (sets that work together), Transparency (the alpha scale).
-- **Type**: Inter only (300 stat numerals, 400 body, 500 UI-medium, 600 titles and table headers) on the 14px scale — 12 captions · 14 body and controls · 16 section titles · 20 page titles; 24px only for the greeting + stat numbers (weight 300); 11px for chart ticks and nothing else. Negative tracking from 14px up (-.15 to -.54px), 0 at 12px. Menlo for data/code/logs at the row's own size with tabular figures. Chinese, Japanese and Korean (`lang="zh|ja|ko"`): same sizes, weight 500 → 600, tracking 0, never caps.
+- **Type**: Inter only (300 stat numerals, 400 body, 500 UI-medium, 600 titles and table headers) on the 14px scale — 12 captions · 14 body and controls · 16 section titles · 20 page titles; 24px only for the greeting + stat numbers (weight 300); 11px for chart text and nothing else. Negative tracking from 14px up (-.15 to -.54px), 0 at 12px. Menlo for data/code/logs at the row's own size with tabular figures. Chinese (Simplified and Traditional), Japanese and Korean (`lang="zh|ja|ko"`) follow one rule: below 14px they are one step larger than Latin (12 → 13, 11 → 12, so no CJK text is under 12px), weights 500 and 600 both → 500 (CJK glyphs read heavier at the same number; medium 400 in sm regions, where bold strokes merge), tracking 0, never caps.
 - **Spacing**: 4-px family in practice (2/4/6/8/10/12/16/24/32); page padding 24×32; card padding 21 (dense 17); section gap 24. Inside a bar the gaps come from the size tier: 8 inside a group, 12/16/24 between groups, 12/16 from a card edge to the first control.
-- **Size tiers**: one tier per region — `data-size="sm" | "md" | "lg"` gives 24 / 32 / 36px controls, 12 / 14 / 14px control text and 32 / 40 / 44px rows; every control inside inherits, nothing interactive is below 24px, and heights or text sizes are never mixed in one row. md is the app default; dialogs are lg; dense grids are sm.
+- **Size tiers**: one tier per region — `data-size="sm" | "md" | "lg"` gives 28 / 32 / 40px controls, 12 / 14 / 14px control text (13 / 14 / 14 in CJK) and 36 / 40 / 48px rows; every control inside inherits, nothing interactive is below 24px, and heights or text sizes are never mixed in one row. md is the app default; dialogs are lg; dense grids are sm.
 - **Radii**: 4 small controls · 8 buttons/inputs/nav/chips · 10 cards/search/dropzone · 14 palette tiles · 16 canvas nodes · full circles for ports/steps/pills.
 - **Borders**: hairline everywhere — cards rgba(229,229,229,.6); controls #e5e5e5; row separators #f5f5f5; checkbox #d1d5db 1.5px; ports #d4d4d4 2px; dropzone dashed #d4d4d4 2px.
 - **Shadows**: nearly flat. Canvas nodes only: `0 1px 3px rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1)`; selection = blue-400 border + 2px blue-100 ring; badges get a 2px white ring. Everything else relies on borders.
@@ -36,10 +36,12 @@ One product: the Keybricks web app (desktop, 1512×~860 design size). Key surfac
 - **Motion**: kept minimal by design (see Motion below) — 120–160ms ease-out on hover/selection, nothing bouncy or far-traveling.
 - **Layout chrome**: left sidebar 240px (collapsible to a 64px icon rail), 56px top bar (search left, bell + black "AI Assistant" pill right), optional 240px secondary panel (Documents tree, pipeline palette), 400px right config panel, 250px bottom data-preview drawer.
 - **Cards**: white, radius 10, hairline border, 21px padding, 14px/500 title — never elevated.
-- **Density**: high; table rows 32 (sm) · 40 (md) · 44 (lg); header cells the same size as body cells in weight 600, sentence case; mono cells at the row's size.
+- **Density**: high; table rows 32 (sm) · 40 (md) · 44 (lg); header cells the same size as body cells in weight 600, sentence case; amount cells at the row's size with tabular figures; config codes as 12px code chips.
 
 ## Iconography
 - The product's icons are the **Lucide** stroke set (16/14px at 1.33px effective stroke, `currentColor`). We ship `components/icons/Icon.jsx`, embedding the exact Lucide path data for every glyph the product uses. Usage: `<Icon name="search" size={16}/>`.
+- **Keybricks glyphs**: thirteen icons drawn for Keybricks itself sit in the core set beside the Lucide glyphs — AI (`ai`, `ai-sparkles`), modules (`reconciliation`, `consolidation`, `journal`, `event`, `view-tree`) and actions (`drilldown`, `add-below`, `copy-data`, `task-execution`, `time-future`, `time-restatement`). Search the Icon Gallery before drawing a new one: *hierarchy* turned out to be `layers`, and *change* is `repeat`.
+- **Drawing rules** (every core glyph, and any glyph added later): 24×24 grid; paths stay inside 2–22, which leaves 1px of padding once the stroke is drawn; stroke 2, round caps and joins, no fill, `currentColor`; integer coordinates; at least 2px of clear space between separate elements; rect corners rx 2, or rx 1 at 8px and smaller. Check a new glyph at 14 and 16px before adding it.
 - Icon color follows text color (#525252 default chrome, #a1a1a1 muted, category hue inside tinted tiles).
 - Tinted icon tiles are a signature motif: 40×40 r14 (palette), 48×48 r16 (nodes), 32×32 r8 hairline-bordered (list rows) — 100-tint bg + 600-hue glyph.
 - Emoji or unicode-as-icon: never.
@@ -76,7 +78,6 @@ One product: the Keybricks web app (desktop, 1512×~860 design size). Key surfac
 - `styles.css` — global CSS entry (imports all token files); `keybricks.css` — the package's stylesheet entry (tokens + hover hooks).
 - `assets/` — keybricks-logo.png and the icon keyword indexes.
 - `guidelines/` — foundation showcase cards (Design System tab).
-- `ui_kits/keybricks-app/` — interactive product recreation: Home, Documents, Pipeline editor, System Migration.
 - `SKILL.md` — agent skill entry file.
 
 ## Components

package/readme.zh-CN.md

@@ -13,7 +13,7 @@ Keybricks 是面向财务团队的企业绩效管理（EPM）平台：文档与
 - **语气**：简洁、技术化、动词开头。按钮用祈使句："Run Test"、"Submit"、"Save Settings"、"Continue to Confirmation"、"Mark as New"、"Skip Selected"。
 - **大小写**：导航、标题、按钮、表头用词首大写（Title Case），如 "Import History"、"Custom Parameters"；辅助说明文字用句首大写（sentence case），如 "Import and manage configuration migrations across systems"、"Click to upload or drag and drop"、"JSON files only"。
 - **人称**：不使用"我 / 我们 / 你"——文案客观、以系统为中心。唯一的人性化表达是仪表盘问候语 "Good evening, Felix" 加完整日期 "Monday, April 21, 2026"。
-- **术语**：精确的 EPM/ETL 领域词汇——Detail Sheet、Dimension、Model、Association Match、Multi-Condition Judge、Group Calculation、Concat Merge、Reconciliation、Consolidation。配置代码用等宽字体、全大写下划线格式（"FIN_CURRENCY_DEFAULT"）。
+- **术语**：精确的 EPM/ETL 领域词汇——Detail Sheet、Dimension、Model、Association Match、Multi-Condition Judge、Group Calculation、Concat Merge、Reconciliation、Consolidation。配置代码写作全大写下划线（"FIN_CURRENCY_DEFAULT"），显示为代码标签：Menlo 12px、浅灰底。配置代码用等宽字体、全大写下划线格式（"FIN_CURRENCY_DEFAULT"）。
 - **数字与元信息**：计数写作 "1 document"、"2 items"；相对时间写作 "2 hours ago"；日志行写作 "[14:30] Task started: Import"。
 - **状态文案**：状态标签带圆点前缀，如 "• Editing"；步骤用名词命名（"Upload & Parse"、"Comparison"、"Confirmation"、"Execution"、"Results"）。
 - **Emoji**：从不使用。所有装饰性表达交给图标。
@@ -27,9 +27,9 @@ Keybricks 是面向财务团队的企业绩效管理（EPM）平台：文档与
   3. **组件层** —— `--cat-*`、`--tooltip-bg`、`--dropzone-border-hover`：只属于某个组件的某个部位，仅在第二层确实没有合适角色时才新增。
 
   不可打破的规则：400 及更浅的档位不得在白底上承载正文（它们是表面色、边框色、禁用态图标色）；饱和填充之上的前景色只能用 `--on-accent`（#FFFFFF），**两套主题都是**；标签色相按机械规则取值（浅色 = 100 档底 + 700 档字，深色 = 950 档底 + 300 档字），新增分类无需主观判断；色相表达*分类*，四组反馈色表达*严重程度*。对比度目标：正文 4.5:1，18px 以上或加粗文字及界面边界 3:1。Colors 分组下三张卡片给出全部色值：Palette（完整色阶）、Schemes（可搭配使用的配色组合）、Transparency（透明度阶）。
-- **字体**：只用 Inter（300 用于统计数字，400 正文，500 界面中等字重，600 标题与表头），采用 14px 字号阶梯——12 说明文字 · 14 正文与控件 · 16 区块标题 · 20 页面标题；24px 只用于问候语和统计数字（字重 300）；11px 只用于图表刻度。14px 起使用负字距（-.15 到 -.54px），12px 字距为 0。数据 / 代码 / 日志用 Menlo，与所在行同字号，使用等宽数字。中文、日文、韩文（`lang="zh|ja|ko"`）：字号不变，500 字重改为 600，字距为 0，不做大写转换。
+- **字体**：只用 Inter（300 用于统计数字，400 正文，500 界面中等字重，600 标题与表头），采用 14px 字号阶梯——12 说明文字 · 14 正文与控件 · 16 区块标题 · 20 页面标题；24px 只用于问候语和统计数字（字重 300）；11px 只用于图表文字。14px 起使用负字距（-.15 到 -.54px），12px 字距为 0。数据 / 代码 / 日志用 Menlo，与所在行同字号，使用等宽数字。中文（简体与繁体）、日文、韩文（`lang="zh|ja|ko"`）统一一条规则：14px 以下比西文大一号（12 → 13，11 → 12，任何 CJK 文字都不小于 12px）；500 和 600 字重都改为 500（同样的数字，中日韩文字看起来比字母粗；sm 区域内中等字重改为 400，因为小字号加粗会让笔画粘连）；字距为 0，不做大写转换。
 - **间距**：实际采用 4px 体系（2/4/6/8/10/12/16/24/32）；页面内边距 24×32；卡片内边距 21（紧凑型 17）；区块间距 24。工具栏内的间距由尺寸层级决定：组内 8，组间 12/16/24，卡片边缘到第一个控件 12/16。
-- **尺寸层级**：每个区域只用一档——`data-size="sm" | "md" | "lg"` 对应 24 / 32 / 36px 控件、12 / 14 / 14px 控件文字、32 / 40 / 44px 行高；区域内所有控件自动继承，可交互元素不小于 24px，同一行内绝不混用高度或字号。md 是应用默认，对话框为 lg，密集表格为 sm。
+- **尺寸层级**：每个区域只用一档——`data-size="sm" | "md" | "lg"` 对应 28 / 32 / 40px 控件、12 / 14 / 14px 控件文字（CJK 为 13 / 14 / 14）、36 / 40 / 48px 行高；区域内所有控件自动继承，可交互元素不小于 24px，同一行内绝不混用高度或字号。md 是应用默认，对话框为 lg，密集表格为 sm。
 - **圆角**：4 小型控件 · 8 按钮 / 输入框 / 导航 / 标签 · 10 卡片 / 搜索框 / 上传区 · 14 组件面板图标块 · 16 画布节点 · 端口 / 步骤圆点 / 胶囊用全圆角。
 - **边框**：全局使用发丝级细边框——卡片 rgba(229,229,229,.6)；控件 #e5e5e5；行分隔线 #f5f5f5；复选框 #d1d5db 1.5px；端口 #d4d4d4 2px；上传区虚线 #d4d4d4 2px。
 - **阴影**：几乎全平面。只有画布节点有阴影：`0 1px 3px rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1)`；选中态 = blue-400 边框 + 2px blue-100 光环；徽标带 2px 白色描边。其余一律靠边框区分层次。
@@ -38,10 +38,12 @@ Keybricks 是面向财务团队的企业绩效管理（EPM）平台：文档与
 - **动效**：刻意克制（见下方"动效"一节）——悬停 / 选中 120–160ms 缓出，不弹跳，不大幅位移。
 - **布局框架**：左侧边栏 240px（可收起为 64px 图标栏）；顶栏 56px（左侧搜索，右侧铃铛 + 黑色 "AI Assistant" 胶囊）；可选的 240px 二级面板（文档树、管道组件面板）；右侧配置面板 400px；底部数据预览抽屉 250px。
 - **卡片**：白底、10px 圆角、细边框、21px 内边距、14px / 500 字重标题——从不使用投影抬高。
-- **密度**：高密度；表格行高 32（sm）· 40（md）· 44（lg）；表头与单元格同字号、字重 600、句首大写；等宽单元格与所在行同字号。
+- **密度**：高密度；表格行高 32（sm）· 40（md）· 44（lg）；表头与单元格同字号、字重 600、句首大写；金额单元格与所在行同字号、同字体，只加等宽数字（tabular figures）；配置代码用 12px 代码标签。等宽字体只用于代码。
 
 ## 图标系统
 - 产品图标是 **Lucide** 线性图标集（16/14px，实际描边约 1.33px，颜色为 `currentColor`）。我们提供 `components/icons/Icon.jsx`，内嵌产品用到的每个图形的 Lucide 原始路径数据。用法：`<Icon name="search" size={16}/>`。
+- **Keybricks 自绘图标**：为 Keybricks 自行绘制的 13 个图标与 Lucide 图标一起放在核心集中——AI 类（`ai`、`ai-sparkles`）、模块类（`reconciliation`、`consolidation`、`journal`、`event`、`view-tree`）和操作类（`drilldown`、`add-below`、`copy-data`、`task-execution`、`time-future`、`time-restatement`）。新画图标之前，先在图标库里搜索：*hierarchy* 其实就是 `layers`，*change* 就是 `repeat`。
+- **绘制规范**（所有核心图标，以及今后新增的图标）：24×24 网格；路径限制在 2–22 范围内，描边后四周留 1px 边距；描边 2，圆头圆角，无填充，`currentColor`；坐标取整数；相互独立的元素之间至少留 2px 空隙；矩形圆角 rx 2，8px 及以下的小矩形用 rx 1。新增图标前，先在 14px 和 16px 下检查。
 - 图标颜色跟随文字颜色（默认框架色 #525252，弱化态 #a1a1a1，彩色图标块内为对应分类色）。
 - 彩色图标块是标志性元素：40×40 圆角 14（组件面板）、48×48 圆角 16（节点）、32×32 圆角 8 带细边框（列表行）——100 档浅色底 + 600 档分类色图标。
 - 从不用 emoji 或 unicode 字符充当图标。
@@ -78,7 +80,6 @@ Keybricks 是面向财务团队的企业绩效管理（EPM）平台：文档与
 - `styles.css` —— 全局 CSS 入口（引入所有 token 文件）；`keybricks.css` —— 包的样式入口（token + 悬停钩子）。
 - `assets/` —— keybricks-logo.png 与图标关键词索引。
 - `guidelines/` —— 基础规范展示卡片（Design System 标签页）。
-- `ui_kits/keybricks-app/` —— 可交互的产品复刻：首页、文档、管道编辑器、系统迁移。
 - `SKILL.md` —— Agent 技能入口文件。
 
 ## 组件清单

package/tokens/alpha.css

@@ -15,9 +15,11 @@
 --neutral-alpha-2:rgba(10,10,10,.02);--neutral-alpha-4:rgba(10,10,10,.04);--neutral-alpha-8:rgba(10,10,10,.08);--neutral-alpha-12:rgba(10,10,10,.12);--neutral-alpha-16:rgba(10,10,10,.16);--neutral-alpha-24:rgba(10,10,10,.24);--neutral-alpha-32:rgba(10,10,10,.32);--neutral-alpha-48:rgba(10,10,10,.48);--neutral-alpha-64:rgba(10,10,10,.64);--neutral-alpha-80:rgba(10,10,10,.8);
 --brand-alpha-8:rgba(21,93,252,.08);--brand-alpha-12:rgba(21,93,252,.12);--brand-alpha-16:rgba(21,93,252,.16);--brand-alpha-24:rgba(21,93,252,.24);--brand-alpha-32:rgba(21,93,252,.32);
 /* Semantic overlays built from the ramps above */
---overlay-hover:var(--neutral-alpha-4);--overlay-press:var(--neutral-alpha-8);--overlay-selected:var(--brand-alpha-8);--overlay-drag:var(--brand-alpha-12);
+--overlay-hover:var(--neutral-alpha-4);--overlay-press:var(--neutral-alpha-12); /* on white these equal --bg-hover / --bg-press; on any other surface they darken it by the same step */
+--overlay-selected:var(--brand-alpha-8);--overlay-drag:var(--brand-alpha-12);
 }
 [data-theme="dark"]{
 --neutral-alpha-2:rgba(255,255,255,.02);--neutral-alpha-4:rgba(255,255,255,.04);--neutral-alpha-8:rgba(255,255,255,.08);--neutral-alpha-12:rgba(255,255,255,.12);--neutral-alpha-16:rgba(255,255,255,.16);--neutral-alpha-24:rgba(255,255,255,.24);--neutral-alpha-32:rgba(255,255,255,.32);--neutral-alpha-48:rgba(255,255,255,.48);--neutral-alpha-64:rgba(255,255,255,.64);--neutral-alpha-80:rgba(255,255,255,.8);
 --brand-alpha-8:rgba(43,127,255,.1);--brand-alpha-12:rgba(43,127,255,.14);--brand-alpha-16:rgba(43,127,255,.2);--brand-alpha-24:rgba(43,127,255,.28);--brand-alpha-32:rgba(43,127,255,.36);
+--overlay-hover:var(--neutral-alpha-8);--overlay-press:var(--neutral-alpha-16); /* dark: matches the --bg-hover / --bg-press steps on --bg-surface */
 }

package/tokens/colors.css

@@ -25,7 +25,7 @@
 --on-accent:#ffffff;
 /* Foreground on the neutral "dark pill" (AI Assistant), which inverts in dark */
 --action-dark-fg:#ffffff;
---border-card:rgba(229,229,229,.6);--border-control:var(--neutral-200);--border-subtle:var(--neutral-100);--border-strong:var(--neutral-300);
+--border-card:rgba(229,229,229,.6);--border-control:var(--neutral-200);--border-split:var(--neutral-300);--border-subtle:var(--neutral-100);--border-strong:var(--neutral-300);
 --action-primary:var(--blue-600);--action-primary-hover:var(--blue-700);--action-primary-active:#1039c4;--action-dark:var(--neutral-900);--action-dark-hover:var(--neutral-800);--action-dark-active:var(--neutral-950);
 /* Press (active) fills — one step past the hover value in each family */
 --bg-press:var(--neutral-200);--soft-active:var(--blue-200);--danger-active:var(--red-800);--danger-soft-hover:var(--red-100);--danger-soft-active:var(--red-200);

package/tokens/dark.css

@@ -20,7 +20,7 @@ color-scheme:dark;
 --text-primary:#fafafa;--text-heading:#f5f5f5;--text-strong:#e5e5e5;--text-body:#d4d4d4;--text-secondary:#a1a1a1;--text-muted:#737373;--text-inverse:#0a0a0a;
 --on-accent:#ffffff;--action-dark-fg:#0a0a0a;
 /* Borders */
---border-card:rgba(255,255,255,.09);--border-control:#333333;--border-subtle:#242424;--border-strong:#454545;
+--border-card:rgba(255,255,255,.09);--border-control:#333333;--border-split:#404040;--border-subtle:#242424;--border-strong:#454545;
 /* Actions */
 --action-primary:#1f6feb;--action-primary-hover:#2b7fff;--action-primary-active:#1a5ec9;--action-dark:#fafafa;--action-dark-hover:#e5e5e5;--action-dark-active:#d4d4d4;
 /* Press (active) fills — one step past the hover value in each family */

package/tokens/layout.css

@@ -20,7 +20,7 @@
 /* Size tiers — one scale that every control reads. A region (app root, toolbar, filter bar, form, table,
    dialog, drawer) declares data-size="sm" | "md" | "lg"; everything inside inherits these values, so controls
    that share a row can never disagree. md is the default; the rules below the :root block switch the tier.
-   sm 24 · md 32 · lg 36 for controls; bars and rows are 8px taller; a bar inside a bordered card 16px taller. */
+   sm 28 · md 32 · lg 40 for controls (2.3.0: was 24 / 32 / 36); bars and rows are 8px taller; a bar inside a bordered card 16px taller. */
 --control-h:32px;                                                                         /* buttons, inputs, selects, search, steppers, segmented controls, chips, pagination items */
 --control-text:var(--text-base);--control-leading:var(--leading-base);--control-tracking:var(--tracking-base); /* text inside controls and their labels */
 --control-icon:16px;                                                                      /* icon inside a control */
@@ -34,8 +34,10 @@
 --check-size:16px;                                                                        /* checkbox and radio box */
 --tag-h:24px;                                                                             /* Tag */
 --switch-w:36px;--switch-h:20px;                                                          /* Switch track */
+/* Two-line title cell (Table column `twoLine`): row padding, title → description gap, icon tile, tile → text gap. md row = 10 + 20 + 2 + 16 + 10 = 58px */
+--title-cell-py:10px;--title-cell-gap:2px;--title-cell-tile:32px;--title-cell-icon:16px;--title-cell-tile-r:8px;--title-cell-tile-gap:12px;
 /* Compatibility aliases — superseded by the tier tokens above */
---h-button:var(--control-h);--h-input:var(--control-h);--h-button-sm:24px;
+--h-button:var(--control-h);--h-input:var(--control-h);--h-button-sm:28px;
 /* Page rhythm */
 --page-pad-y:24px;--page-pad-x:32px;--section-gap:24px;--card-pad:21px;--card-pad-sm:17px;
 /* Stacking */
@@ -47,6 +49,6 @@
 --z-tooltip:100; /* @kind other */
 }
 /* The three tiers. Declared after :root so a tier set on <html> itself also wins. */
-[data-size="sm"]{--control-h:24px;--control-text:var(--text-xs);--control-leading:var(--leading-xs);--control-tracking:var(--tracking-xs);--control-icon:14px;--control-px:8px;--control-gap:8px;--group-gap:12px;--bar-h:32px;--bar-card-h:40px;--edge-pad:12px;--cell-px:8px;--check-size:14px;--tag-h:20px;--switch-w:28px;--switch-h:16px}
-[data-size="md"]{--control-h:32px;--control-text:var(--text-base);--control-leading:var(--leading-base);--control-tracking:var(--tracking-base);--control-icon:16px;--control-px:12px;--control-gap:8px;--group-gap:16px;--bar-h:40px;--bar-card-h:48px;--edge-pad:16px;--cell-px:12px;--check-size:16px;--tag-h:24px;--switch-w:36px;--switch-h:20px}
-[data-size="lg"]{--control-h:36px;--control-text:var(--text-base);--control-leading:var(--leading-base);--control-tracking:var(--tracking-base);--control-icon:16px;--control-px:16px;--control-gap:8px;--group-gap:24px;--bar-h:44px;--bar-card-h:52px;--edge-pad:16px;--cell-px:16px;--check-size:16px;--tag-h:28px;--switch-w:44px;--switch-h:24px}
+[data-size="sm"]{--control-h:28px;--control-text:var(--text-xs);--control-leading:var(--leading-xs);--control-tracking:var(--tracking-xs);--control-icon:14px;--control-px:8px;--control-gap:8px;--group-gap:12px;--bar-h:36px;--bar-card-h:44px;--edge-pad:12px;--cell-px:8px;--check-size:14px;--tag-h:20px;--switch-w:28px;--switch-h:16px;--text-code:11px;--leading-code:16px;--title-cell-py:8px;--title-cell-gap:2px;--title-cell-tile:28px;--title-cell-icon:14px;--title-cell-tile-r:8px;--title-cell-tile-gap:8px}
+[data-size="md"]{--control-h:32px;--control-text:var(--text-base);--control-leading:var(--leading-base);--control-tracking:var(--tracking-base);--control-icon:16px;--control-px:12px;--control-gap:8px;--group-gap:16px;--bar-h:40px;--bar-card-h:48px;--edge-pad:16px;--cell-px:12px;--check-size:16px;--tag-h:24px;--switch-w:36px;--switch-h:20px;--text-code:12px;--leading-code:18px;--title-cell-py:10px;--title-cell-gap:2px;--title-cell-tile:32px;--title-cell-icon:16px;--title-cell-tile-r:8px;--title-cell-tile-gap:12px}
+[data-size="lg"]{--control-h:40px;--control-text:var(--text-base);--control-leading:var(--leading-base);--control-tracking:var(--tracking-base);--control-icon:16px;--control-px:16px;--control-gap:8px;--group-gap:24px;--bar-h:48px;--bar-card-h:56px;--edge-pad:16px;--cell-px:16px;--check-size:16px;--tag-h:28px;--switch-w:44px;--switch-h:24px;--text-code:12px;--leading-code:18px;--title-cell-py:14px;--title-cell-gap:4px;--title-cell-tile:40px;--title-cell-icon:20px;--title-cell-tile-r:10px;--title-cell-tile-gap:12px}

package/tokens/tokens.d.ts

@@ -42,6 +42,7 @@ export type TokenName =
   | "--blue-950"
   | "--border-card"
   | "--border-control"
+  | "--border-split"
   | "--border-strong"
   | "--border-subtle"
   | "--brand-alpha-12"
@@ -167,6 +168,7 @@ export type TokenName =
   | "--leading-3xl"
   | "--leading-4xl"
   | "--leading-base"
+  | "--leading-code"
   | "--leading-display"
   | "--leading-lg"
   | "--leading-md"
@@ -306,11 +308,14 @@ export type TokenName =
   | "--teal-950"
   | "--text-2xl"
   | "--text-2xs"
+  | "--text-2xs-mono"
   | "--text-3xl"
   | "--text-4xl"
   | "--text-base"
   | "--text-body"
+  | "--text-code"
   | "--text-display"
+  | "--text-glyph-min"
   | "--text-heading"
   | "--text-inverse"
   | "--text-lg"
@@ -323,6 +328,12 @@ export type TokenName =
   | "--text-strong"
   | "--text-xl"
   | "--text-xs"
+  | "--title-cell-gap"
+  | "--title-cell-icon"
+  | "--title-cell-py"
+  | "--title-cell-tile"
+  | "--title-cell-tile-gap"
+  | "--title-cell-tile-r"
   | "--tooltip-bg"
   | "--tooltip-fg"
   | "--topbar-h"
@@ -395,6 +406,7 @@ export type TokenKey =
   | "blue950"
   | "borderCard"
   | "borderControl"
+  | "borderSplit"
   | "borderStrong"
   | "borderSubtle"
   | "brandAlpha12"
@@ -520,6 +532,7 @@ export type TokenKey =
   | "leading3xl"
   | "leading4xl"
   | "leadingBase"
+  | "leadingCode"
   | "leadingDisplay"
   | "leadingLg"
   | "leadingMd"
@@ -659,11 +672,14 @@ export type TokenKey =
   | "teal950"
   | "text2xl"
   | "text2xs"
+  | "text2xsMono"
   | "text3xl"
   | "text4xl"
   | "textBase"
   | "textBody"
+  | "textCode"
   | "textDisplay"
+  | "textGlyphMin"
   | "textHeading"
   | "textInverse"
   | "textLg"
@@ -676,6 +692,12 @@ export type TokenKey =
   | "textStrong"
   | "textXl"
   | "textXs"
+  | "titleCellGap"
+  | "titleCellIcon"
+  | "titleCellPy"
+  | "titleCellTile"
+  | "titleCellTileGap"
+  | "titleCellTileR"
   | "tooltipBg"
   | "tooltipFg"
   | "topbarH"

package/tokens/tokens.js

@@ -45,6 +45,7 @@ export const cssVar = {
   blue950: "var(--blue-950)",
   borderCard: "var(--border-card)",
   borderControl: "var(--border-control)",
+  borderSplit: "var(--border-split)",
   borderStrong: "var(--border-strong)",
   borderSubtle: "var(--border-subtle)",
   brandAlpha12: "var(--brand-alpha-12)",
@@ -170,6 +171,7 @@ export const cssVar = {
   leading3xl: "var(--leading-3xl)",
   leading4xl: "var(--leading-4xl)",
   leadingBase: "var(--leading-base)",
+  leadingCode: "var(--leading-code)",
   leadingDisplay: "var(--leading-display)",
   leadingLg: "var(--leading-lg)",
   leadingMd: "var(--leading-md)",
@@ -309,11 +311,14 @@ export const cssVar = {
   teal950: "var(--teal-950)",
   text2xl: "var(--text-2xl)",
   text2xs: "var(--text-2xs)",
+  text2xsMono: "var(--text-2xs-mono)",
   text3xl: "var(--text-3xl)",
   text4xl: "var(--text-4xl)",
   textBase: "var(--text-base)",
   textBody: "var(--text-body)",
+  textCode: "var(--text-code)",
   textDisplay: "var(--text-display)",
+  textGlyphMin: "var(--text-glyph-min)",
   textHeading: "var(--text-heading)",
   textInverse: "var(--text-inverse)",
   textLg: "var(--text-lg)",
@@ -326,6 +331,12 @@ export const cssVar = {
   textStrong: "var(--text-strong)",
   textXl: "var(--text-xl)",
   textXs: "var(--text-xs)",
+  titleCellGap: "var(--title-cell-gap)",
+  titleCellIcon: "var(--title-cell-icon)",
+  titleCellPy: "var(--title-cell-py)",
+  titleCellTile: "var(--title-cell-tile)",
+  titleCellTileGap: "var(--title-cell-tile-gap)",
+  titleCellTileR: "var(--title-cell-tile-r)",
   tooltipBg: "var(--tooltip-bg)",
   tooltipFg: "var(--tooltip-fg)",
   topbarH: "var(--topbar-h)",
@@ -400,6 +411,7 @@ export const light = {
   blue950: "#162456",
   borderCard: "rgba(229,229,229,.6)",
   borderControl: "#e5e5e5",
+  borderSplit: "#d4d4d4",
   borderStrong: "#d4d4d4",
   borderSubtle: "#f5f5f5",
   brandAlpha12: "rgba(21,93,252,.12)",
@@ -493,7 +505,7 @@ export const light = {
   fontSans: "'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif",
   groupGap: "16px",
   hButton: "32px",
-  hButtonSm: "24px",
+  hButtonSm: "28px",
   hInput: "32px",
   hNavItem: "36px",
   hSubnavItem: "32px",
@@ -525,6 +537,7 @@ export const light = {
   leading3xl: "46px",
   leading4xl: "56px",
   leadingBase: "20px",
+  leadingCode: "18px",
   leadingDisplay: "68px",
   leadingLg: "28px",
   leadingMd: "24px",
@@ -570,7 +583,7 @@ export const light = {
   orange950: "#461700",
   overlayDrag: "rgba(21,93,252,.12)",
   overlayHover: "rgba(10,10,10,.04)",
-  overlayPress: "rgba(10,10,10,.08)",
+  overlayPress: "rgba(10,10,10,.12)",
   overlaySelected: "rgba(21,93,252,.08)",
   pagePadX: "32px",
   pagePadY: "24px",
@@ -664,11 +677,14 @@ export const light = {
   teal950: "#002f2a",
   text2xl: "30px",
   text2xs: "11px",
+  text2xsMono: "11px",
   text3xl: "38px",
   text4xl: "48px",
   textBase: "14px",
   textBody: "#525252",
+  textCode: "12px",
   textDisplay: "60px",
+  textGlyphMin: "11px",
   textHeading: "#171717",
   textInverse: "#ffffff",
   textLg: "20px",
@@ -681,6 +697,12 @@ export const light = {
   textStrong: "#404040",
   textXl: "24px",
   textXs: "12px",
+  titleCellGap: "2px",
+  titleCellIcon: "16px",
+  titleCellPy: "10px",
+  titleCellTile: "32px",
+  titleCellTileGap: "12px",
+  titleCellTileR: "8px",
   tooltipBg: "#171717",
   tooltipFg: "#ffffff",
   topbarH: "56px",
@@ -755,6 +777,7 @@ export const dark = {
   blue950: "#162456",
   borderCard: "rgba(255,255,255,.09)",
   borderControl: "#333333",
+  borderSplit: "#404040",
   borderStrong: "#454545",
   borderSubtle: "#242424",
   brandAlpha12: "rgba(43,127,255,.14)",
@@ -848,7 +871,7 @@ export const dark = {
   fontSans: "'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif",
   groupGap: "16px",
   hButton: "32px",
-  hButtonSm: "24px",
+  hButtonSm: "28px",
   hInput: "32px",
   hNavItem: "36px",
   hSubnavItem: "32px",
@@ -880,6 +903,7 @@ export const dark = {
   leading3xl: "46px",
   leading4xl: "56px",
   leadingBase: "20px",
+  leadingCode: "18px",
   leadingDisplay: "68px",
   leadingLg: "28px",
   leadingMd: "24px",
@@ -924,8 +948,8 @@ export const dark = {
   orange900: "#612300",
   orange950: "#461700",
   overlayDrag: "rgba(43,127,255,.14)",
-  overlayHover: "rgba(255,255,255,.04)",
-  overlayPress: "rgba(255,255,255,.08)",
+  overlayHover: "rgba(255,255,255,.08)",
+  overlayPress: "rgba(255,255,255,.16)",
   overlaySelected: "rgba(43,127,255,.1)",
   pagePadX: "32px",
   pagePadY: "24px",
@@ -1019,11 +1043,14 @@ export const dark = {
   teal950: "#002f2a",
   text2xl: "30px",
   text2xs: "11px",
+  text2xsMono: "11px",
   text3xl: "38px",
   text4xl: "48px",
   textBase: "14px",
   textBody: "#d4d4d4",
+  textCode: "12px",
   textDisplay: "60px",
+  textGlyphMin: "11px",
   textHeading: "#f5f5f5",
   textInverse: "#0a0a0a",
   textLg: "20px",
@@ -1036,6 +1063,12 @@ export const dark = {
   textStrong: "#e5e5e5",
   textXl: "24px",
   textXs: "12px",
+  titleCellGap: "2px",
+  titleCellIcon: "16px",
+  titleCellPy: "10px",
+  titleCellTile: "32px",
+  titleCellTileGap: "12px",
+  titleCellTileR: "8px",
   tooltipBg: "#f5f5f5",
   tooltipFg: "#0a0a0a",
   topbarH: "56px",
@@ -1067,6 +1100,6 @@ export const dark = {
   zTooltip: "100",
 };
 
-export const tokenNames = ["--action-dark","--action-dark-active","--action-dark-fg","--action-dark-hover","--action-primary","--action-primary-active","--action-primary-hover","--amber-100","--amber-200","--amber-300","--amber-400","--amber-50","--amber-500","--amber-600","--amber-700","--amber-800","--amber-900","--amber-950","--bar-card-h","--bar-h","--bg-active","--bg-app","--bg-hover","--bg-inset","--bg-press","--bg-raised","--bg-scrim","--bg-surface","--bg-table-header","--blue-100","--blue-200","--blue-300","--blue-400","--blue-50","--blue-500","--blue-600","--blue-700","--blue-800","--blue-900","--blue-950","--border-card","--border-control","--border-strong","--border-subtle","--brand-alpha-12","--brand-alpha-16","--brand-alpha-24","--brand-alpha-32","--brand-alpha-8","--card-pad","--card-pad-sm","--cat-join","--cat-join-bg","--cat-merge","--cat-merge-bg","--cat-output","--cat-output-bg","--cat-source","--cat-source-bg","--cat-transform","--cat-transform-bg","--cell-px","--chart-area-alpha","--chart-axis","--chart-blue","--chart-grid","--chart-guide","--chart-heat-1","--chart-heat-2","--chart-heat-3","--chart-heat-4","--chart-heat-5","--chart-heat-ink","--chart-label","--chart-neg","--chart-pos","--chart-total","--chart-track","--check-size","--checkbox-border","--control-gap","--control-h","--control-icon","--control-leading","--control-px","--control-text","--control-tracking","--cyan-100","--cyan-200","--cyan-300","--cyan-400","--cyan-50","--cyan-500","--cyan-600","--cyan-700","--cyan-800","--cyan-900","--cyan-950","--danger","--danger-active","--danger-bg","--danger-soft-active","--danger-soft-hover","--danger-text","--dot-neutral","--drawer-h","--dropzone-border","--dropzone-border-hover","--dur","--dur-fast","--dur-instant","--dur-slow","--dur-slower","--ease-in","--ease-in-out","--ease-out","--edge","--edge-pad","--emerald-100","--emerald-200","--emerald-300","--emerald-400","--emerald-50","--emerald-500","--emerald-600","--emerald-700","--emerald-800","--emerald-900","--emerald-950","--focus-border","--focus-ring","--font-mono","--font-sans","--group-gap","--h-button","--h-button-sm","--h-input","--h-nav-item","--h-subnav-item","--h-tree-item","--hue-amber-bg","--hue-amber-fg","--hue-blue-bg","--hue-blue-fg","--hue-cyan-bg","--hue-cyan-fg","--hue-gray-bg","--hue-gray-fg","--hue-green-bg","--hue-green-fg","--hue-orange-bg","--hue-orange-fg","--hue-pink-bg","--hue-pink-fg","--hue-purple-bg","--hue-purple-fg","--hue-red-bg","--hue-red-fg","--hue-teal-bg","--hue-teal-fg","--info-bg","--info-fg","--leading-2xl","--leading-2xs","--leading-3xl","--leading-4xl","--leading-base","--leading-display","--leading-lg","--leading-md","--leading-num","--leading-sm","--leading-xl","--leading-xs","--link","--link-hover","--neutral-0","--neutral-100","--neutral-200","--neutral-300","--neutral-400","--neutral-50","--neutral-500","--neutral-600","--neutral-700","--neutral-800","--neutral-900","--neutral-950","--neutral-alpha-12","--neutral-alpha-16","--neutral-alpha-2","--neutral-alpha-24","--neutral-alpha-32","--neutral-alpha-4","--neutral-alpha-48","--neutral-alpha-64","--neutral-alpha-8","--neutral-alpha-80","--on-accent","--orange-100","--orange-200","--orange-300","--orange-400","--orange-50","--orange-500","--orange-600","--orange-700","--orange-800","--orange-900","--orange-950","--overlay-drag","--overlay-hover","--overlay-press","--overlay-selected","--page-pad-x","--page-pad-y","--panel-w","--pink-100","--pink-200","--pink-300","--pink-400","--pink-50","--pink-500","--pink-600","--pink-700","--pink-800","--pink-900","--pink-950","--port-border","--press-filter","--press-filter-strong","--purple-100","--purple-200","--purple-300","--purple-400","--purple-50","--purple-500","--purple-600","--purple-700","--purple-800","--purple-900","--purple-950","--radius-full","--radius-lg","--radius-md","--radius-node","--radius-sm","--radius-tile","--rail-w","--red-100","--red-200","--red-300","--red-400","--red-50","--red-500","--red-600","--red-700","--red-800","--red-900","--red-950","--ring-focus","--ring-surface","--section-gap","--selected-border","--series-1","--series-10","--series-2","--series-3","--series-4","--series-5","--series-6","--series-7","--series-8","--series-9","--shadow-menu","--shadow-modal","--shadow-node","--shadow-selected","--sidebar-w","--skeleton","--soft-active","--soft-bg","--soft-border","--soft-hover","--success","--success-bg","--success-strong","--success-text","--switch-h","--switch-w","--t-hover","--t-theme","--tag-h","--teal-100","--teal-200","--teal-300","--teal-400","--teal-50","--teal-500","--teal-600","--teal-700","--teal-800","--teal-900","--teal-950","--text-2xl","--text-2xs","--text-3xl","--text-4xl","--text-base","--text-body","--text-display","--text-heading","--text-inverse","--text-lg","--text-md","--text-muted","--text-num","--text-primary","--text-secondary","--text-sm","--text-strong","--text-xl","--text-xs","--tooltip-bg","--tooltip-fg","--topbar-h","--track","--tracking-2xl","--tracking-2xs","--tracking-3xl","--tracking-4xl","--tracking-base","--tracking-display","--tracking-lg","--tracking-md","--tracking-num","--tracking-sm","--tracking-xl","--tracking-xs","--warning","--warning-bg","--warning-text","--weight-light","--weight-medium","--weight-regular","--weight-semibold","--z-drawer","--z-menu","--z-modal","--z-sticky","--z-toast","--z-tooltip"];
+export const tokenNames = ["--action-dark","--action-dark-active","--action-dark-fg","--action-dark-hover","--action-primary","--action-primary-active","--action-primary-hover","--amber-100","--amber-200","--amber-300","--amber-400","--amber-50","--amber-500","--amber-600","--amber-700","--amber-800","--amber-900","--amber-950","--bar-card-h","--bar-h","--bg-active","--bg-app","--bg-hover","--bg-inset","--bg-press","--bg-raised","--bg-scrim","--bg-surface","--bg-table-header","--blue-100","--blue-200","--blue-300","--blue-400","--blue-50","--blue-500","--blue-600","--blue-700","--blue-800","--blue-900","--blue-950","--border-card","--border-control","--border-split","--border-strong","--border-subtle","--brand-alpha-12","--brand-alpha-16","--brand-alpha-24","--brand-alpha-32","--brand-alpha-8","--card-pad","--card-pad-sm","--cat-join","--cat-join-bg","--cat-merge","--cat-merge-bg","--cat-output","--cat-output-bg","--cat-source","--cat-source-bg","--cat-transform","--cat-transform-bg","--cell-px","--chart-area-alpha","--chart-axis","--chart-blue","--chart-grid","--chart-guide","--chart-heat-1","--chart-heat-2","--chart-heat-3","--chart-heat-4","--chart-heat-5","--chart-heat-ink","--chart-label","--chart-neg","--chart-pos","--chart-total","--chart-track","--check-size","--checkbox-border","--control-gap","--control-h","--control-icon","--control-leading","--control-px","--control-text","--control-tracking","--cyan-100","--cyan-200","--cyan-300","--cyan-400","--cyan-50","--cyan-500","--cyan-600","--cyan-700","--cyan-800","--cyan-900","--cyan-950","--danger","--danger-active","--danger-bg","--danger-soft-active","--danger-soft-hover","--danger-text","--dot-neutral","--drawer-h","--dropzone-border","--dropzone-border-hover","--dur","--dur-fast","--dur-instant","--dur-slow","--dur-slower","--ease-in","--ease-in-out","--ease-out","--edge","--edge-pad","--emerald-100","--emerald-200","--emerald-300","--emerald-400","--emerald-50","--emerald-500","--emerald-600","--emerald-700","--emerald-800","--emerald-900","--emerald-950","--focus-border","--focus-ring","--font-mono","--font-sans","--group-gap","--h-button","--h-button-sm","--h-input","--h-nav-item","--h-subnav-item","--h-tree-item","--hue-amber-bg","--hue-amber-fg","--hue-blue-bg","--hue-blue-fg","--hue-cyan-bg","--hue-cyan-fg","--hue-gray-bg","--hue-gray-fg","--hue-green-bg","--hue-green-fg","--hue-orange-bg","--hue-orange-fg","--hue-pink-bg","--hue-pink-fg","--hue-purple-bg","--hue-purple-fg","--hue-red-bg","--hue-red-fg","--hue-teal-bg","--hue-teal-fg","--info-bg","--info-fg","--leading-2xl","--leading-2xs","--leading-3xl","--leading-4xl","--leading-base","--leading-code","--leading-display","--leading-lg","--leading-md","--leading-num","--leading-sm","--leading-xl","--leading-xs","--link","--link-hover","--neutral-0","--neutral-100","--neutral-200","--neutral-300","--neutral-400","--neutral-50","--neutral-500","--neutral-600","--neutral-700","--neutral-800","--neutral-900","--neutral-950","--neutral-alpha-12","--neutral-alpha-16","--neutral-alpha-2","--neutral-alpha-24","--neutral-alpha-32","--neutral-alpha-4","--neutral-alpha-48","--neutral-alpha-64","--neutral-alpha-8","--neutral-alpha-80","--on-accent","--orange-100","--orange-200","--orange-300","--orange-400","--orange-50","--orange-500","--orange-600","--orange-700","--orange-800","--orange-900","--orange-950","--overlay-drag","--overlay-hover","--overlay-press","--overlay-selected","--page-pad-x","--page-pad-y","--panel-w","--pink-100","--pink-200","--pink-300","--pink-400","--pink-50","--pink-500","--pink-600","--pink-700","--pink-800","--pink-900","--pink-950","--port-border","--press-filter","--press-filter-strong","--purple-100","--purple-200","--purple-300","--purple-400","--purple-50","--purple-500","--purple-600","--purple-700","--purple-800","--purple-900","--purple-950","--radius-full","--radius-lg","--radius-md","--radius-node","--radius-sm","--radius-tile","--rail-w","--red-100","--red-200","--red-300","--red-400","--red-50","--red-500","--red-600","--red-700","--red-800","--red-900","--red-950","--ring-focus","--ring-surface","--section-gap","--selected-border","--series-1","--series-10","--series-2","--series-3","--series-4","--series-5","--series-6","--series-7","--series-8","--series-9","--shadow-menu","--shadow-modal","--shadow-node","--shadow-selected","--sidebar-w","--skeleton","--soft-active","--soft-bg","--soft-border","--soft-hover","--success","--success-bg","--success-strong","--success-text","--switch-h","--switch-w","--t-hover","--t-theme","--tag-h","--teal-100","--teal-200","--teal-300","--teal-400","--teal-50","--teal-500","--teal-600","--teal-700","--teal-800","--teal-900","--teal-950","--text-2xl","--text-2xs","--text-2xs-mono","--text-3xl","--text-4xl","--text-base","--text-body","--text-code","--text-display","--text-glyph-min","--text-heading","--text-inverse","--text-lg","--text-md","--text-muted","--text-num","--text-primary","--text-secondary","--text-sm","--text-strong","--text-xl","--text-xs","--title-cell-gap","--title-cell-icon","--title-cell-py","--title-cell-tile","--title-cell-tile-gap","--title-cell-tile-r","--tooltip-bg","--tooltip-fg","--topbar-h","--track","--tracking-2xl","--tracking-2xs","--tracking-3xl","--tracking-4xl","--tracking-base","--tracking-display","--tracking-lg","--tracking-md","--tracking-num","--tracking-sm","--tracking-xl","--tracking-xs","--warning","--warning-bg","--warning-text","--weight-light","--weight-medium","--weight-regular","--weight-semibold","--z-drawer","--z-menu","--z-modal","--z-sticky","--z-toast","--z-tooltip"];
 
 export default { cssVar, light, dark, tokenNames };