@icen.ai/ui 0.2.0 → 0.3.0

package/dist/tokens.css

@@ -4,10 +4,15 @@
 /*
  * Icen Design System — 色彩 Tokens
  *
- * 5 体系 × 2 模式 = 10 套完整配色
- * 每套: 12 base + 4 glow + 8 derived + 8 semantic + 8 fill + 4 border + 2 shadow + n bridge
+ * 6 预设 × 2 模式 = 12 套完整配色
+ *   clay（默认）/ piano / art / vangogh / ink / retro
  *
- * 用法: import "./colors.css";
+ * 每套包含：
+ *   12 base + 2 glow + 6 derived + 6 semantic + 4 fill + 2 shadow + 3 outline
+ *   + depth 层级（canvas/sidebar/panel/card/control）+ scrollbar + bridge 别名
+ *
+ * 用法: import "./colors.css";  —— 挂在 <html> 的 preset 类决定 base 取值，
+ *                                .dark 类切换明暗，二者正交组合。
  */
 
 /* ══════════════════════════════════════════════════════════════
@@ -1140,6 +1145,16 @@
   --token-shadow-card: 0 1px 2px color-mix(in srgb, var(--token-text) 5%, transparent), 0 6px 18px color-mix(in srgb, var(--token-text) 5%, transparent);
   --token-shadow-inset: inset 0 1px 1px color-mix(in srgb, var(--token-surface) 42%, transparent), inset 0 -1px 1px color-mix(in srgb, var(--token-text) 4%, transparent);
   --token-top-highlight: color-mix(in srgb, var(--token-surface) 36%, transparent);
+
+  /* ── Scrollbar ──
+     由 base.css 的全局滚动条消费；每个预设可在自己的块里覆盖这 5 个 token，
+     以表达品牌色差（如 piano 用金、ink 用青）。retro/terminal 风格在
+     style-profiles.css 里另有像素化硬覆盖。 */
+  --token-scrollbar-size: 8px;
+  --token-scrollbar-track: transparent;
+  --token-scrollbar-thumb: color-mix(in srgb, var(--token-text) 16%, transparent);
+  --token-scrollbar-thumb-hover: color-mix(in srgb, var(--token-accent) 50%, transparent);
+  --token-scrollbar-button: transparent;
 }
 
 .dark {
@@ -1222,93 +1237,6 @@
   --token-top-highlight: color-mix(in srgb, var(--token-surface) 18%, transparent);
 }
 
-/* ── Workbench Chrome Tokens ──
-   Shared spatial hierarchy for Studio and Creation editors. These sit on top
-   of theme depth tokens so light/dark and style profiles keep their own voice
-   while still exposing clear IDE-like regions. */
-:root {
-  --token-workbench-canvas: color-mix(in srgb, var(--token-bg-soft) 78%, var(--token-line-soft) 22%);
-  --token-workbench-sidebar: color-mix(in srgb, var(--token-bg) 76%, var(--token-surface) 24%);
-  --token-workbench-editor: color-mix(in srgb, var(--token-bg) 82%, var(--token-surface) 18%);
-  --token-workbench-panel: color-mix(in srgb, var(--token-card) 82%, var(--token-surface) 18%);
-  --token-workbench-panel-strong: color-mix(in srgb, var(--token-card-strong) 78%, var(--token-surface) 22%);
-  --token-workbench-chrome: color-mix(in srgb, var(--token-workbench-panel) 86%, var(--token-surface) 14%);
-  --token-workbench-rail: color-mix(in srgb, var(--token-sidebar) 84%, var(--token-bg) 16%);
-  --token-workbench-gutter: color-mix(in srgb, var(--token-line-soft) 30%, transparent);
-  --token-workbench-edge: color-mix(in srgb, var(--token-text) 10%, transparent);
-  --token-workbench-edge-soft: color-mix(in srgb, var(--token-text) 7%, transparent);
-  --token-workbench-shadow: 0 1px 1px color-mix(in srgb, var(--token-text) 3%, transparent), 0 8px 22px color-mix(in srgb, var(--token-text) 4%, transparent);
-  --token-workbench-shadow-inset: inset 0 1px 0 color-mix(in srgb, var(--token-surface) 28%, transparent);
-  --token-editor-paper: #f5efe5;
-  --token-editor-paper-soft: color-mix(in srgb, var(--token-editor-paper) 88%, var(--token-bg-soft) 12%);
-  --token-editor-paper-chrome: color-mix(in srgb, var(--token-editor-paper) 92%, var(--token-surface) 8%);
-  --token-editor-paper-edge: color-mix(in srgb, var(--token-text) 7%, transparent);
-}
-
-.dark {
-  --token-workbench-canvas: color-mix(in srgb, var(--token-bg) 72%, black 28%);
-  --token-workbench-sidebar: color-mix(in srgb, var(--token-bg-soft) 72%, black 28%);
-  --token-workbench-editor: color-mix(in srgb, var(--token-bg) 84%, black 16%);
-  --token-workbench-panel: color-mix(in srgb, var(--token-panel) 82%, black 18%);
-  --token-workbench-panel-strong: color-mix(in srgb, var(--token-card-strong) 82%, black 18%);
-  --token-workbench-chrome: color-mix(in srgb, var(--token-workbench-panel) 78%, black 22%);
-  --token-workbench-rail: color-mix(in srgb, var(--token-sidebar) 76%, black 24%);
-  --token-workbench-gutter: color-mix(in srgb, var(--token-line-soft) 44%, transparent);
-  --token-workbench-edge: color-mix(in srgb, var(--token-text) 11%, transparent);
-  --token-workbench-edge-soft: color-mix(in srgb, var(--token-text) 8%, transparent);
-  --token-workbench-shadow: 0 1px 1px rgba(0,0,0,.16), 0 10px 26px rgba(0,0,0,.18);
-  --token-workbench-shadow-inset: inset 0 1px 0 color-mix(in srgb, var(--token-text) 4%, transparent);
-  --token-editor-paper: #26211b;
-  --token-editor-paper-soft: color-mix(in srgb, var(--token-editor-paper) 88%, var(--token-bg-soft) 12%);
-  --token-editor-paper-chrome: color-mix(in srgb, var(--token-editor-paper) 90%, var(--token-surface-strong) 10%);
-  --token-editor-paper-edge: color-mix(in srgb, var(--token-text) 8%, transparent);
-}
-
-.piano {
-  --token-editor-paper: #fbf8ef;
-}
-
-.piano.dark {
-  --token-editor-paper: #1d1b17;
-}
-
-.art {
-  --token-editor-paper: #e9f2ed;
-}
-
-.art.dark {
-  --token-editor-paper: #203a34;
-}
-
-.vangogh {
-  --token-editor-paper: #eee5bf;
-}
-
-.vangogh.dark {
-  --token-editor-paper: #172742;
-}
-
-.ink {
-  --token-editor-paper: #fbf8f1;
-}
-
-.ink.dark {
-  --token-editor-paper: #1b221e;
-}
-
-.retro {
-  --token-editor-paper: #f4f4ea;
-}
-
-.retro.dark {
-  --token-editor-paper: #24243f;
-}
-
-.style-retro {
-  --token-workbench-shadow: var(--token-shadow-card);
-  --token-workbench-shadow-inset: var(--token-shadow-inset);
-}
-
 /* ── 动画 ── */
 @keyframes blink {
   0%, 100% { opacity: 1; }
@@ -1334,6 +1262,10 @@
  *   1. 这些类挂在 <html> 上，与 .clay/.piano/.art/.vangogh/.ink/.retro 共存。
  *   2. 只覆盖与“风格”相关的变量：字体、圆角、阴影硬度、抗锯齿、图像渲染。
  *   3. 颜色仍由 preset 决定，保持正交。
+ *
+ * 注：选择器引用的是 base.css 的交互基元（.pressable / .control / .lift），
+ *     而非源项目 opengal 的 .og-* 命名——切换 profile 时这些基元自动获得
+ *     对应风格的几何/边框/阴影形态。
  */
 
 /* ══════════════════════════════════════════════════════════════
@@ -1488,6 +1420,19 @@
   /* ── 滚动条 ── */
   --token-scrollbar-size: 10px;
 
+  /* ── icen 原语覆盖：retro 的聚焦环/按下/悬停全部像素化 ── */
+  --icen-ring: 2px solid var(--token-accent);
+  --icen-ring-soft: 2px solid var(--token-accent);
+  --icen-ring-error: 2px solid var(--token-error);
+  --icen-ring-success: 2px solid var(--token-success);
+  --icen-press: translate(2px, 2px);
+  --icen-press-soft: translate(1px, 1px);
+  --icen-hover-border: var(--token-accent);
+  --icen-hover-border-strong: var(--token-accent);
+  --icen-control-focus-shadow: inset 2px 2px 0 var(--token-line-soft), inset -1px -1px 0 var(--token-surface-strong);
+  --icen-control-focus-border: var(--token-accent);
+  --icen-control-error-shadow: inset 2px 2px 0 var(--token-line-soft), inset -1px -1px 0 var(--token-surface-strong);
+
   /* ── 渲染 ── */
   image-rendering: pixelated;
   -webkit-font-smoothing: none;
@@ -1516,9 +1461,13 @@
 
 /* ══════════════════════════════════════════════════════════════
    按钮 / 可点击元素 — 8-bit 像素按钮
+   base.css 的 .pressable / 原生 button / [role=button] / 复位按钮
+   注：聚焦环 / 按下形变 / 悬停边框 由 --icen-* 原语驱动，
+       在 .style-retro 块里已统一覆盖；这里只补"按钮的像素投影"，
+       这是 .pressable::after 高光无法表达的形态。
    ══════════════════════════════════════════════════════════════ */
 
-.style-retro .og-pressable,
+.style-retro .pressable,
 .style-retro button,
 .style-retro [role="button"],
 .style-retro input[type="button"],
@@ -1534,42 +1483,42 @@
   transition: all var(--duration-fast) var(--ease-out);
 }
 
-.style-retro .og-pressable::after,
+/* 禁用 .pressable::after 的现代渐变高光，retro 用硬投影表达层级 */
+.style-retro .pressable::after,
 .style-retro button::after {
   display: none;
 }
 
-/* 悬停：像素高亮 */
-.style-retro .og-pressable:hover,
-.style-retro button:hover {
-  outline: 2px solid var(--token-accent);
-  outline-offset: -2px;
+/* 悬停：边框高亮（聚焦环由 --icen-ring 接管，不再硬覆盖 outline） */
+.style-retro .pressable:hover,
+.style-retro button:hover,
+.style-retro [role="button"]:hover {
+  border-color: var(--token-accent);
 }
 
-/* 按下：内移 + 阴影消失 */
-.style-retro .og-pressable:active,
+/* 按下：内移 + 阴影消失（位移值由 --icen-press 驱动） */
+.style-retro .pressable:active,
 .style-retro button:active,
 .style-retro [role="button"]:active {
-  transform: translate(2px, 2px);
   box-shadow:
     inset -2px -2px 0 var(--token-line-soft),
     inset 2px 2px 0 var(--token-surface-strong);
 }
 
 /* 禁用状态 */
-.style-retro .og-pressable:where(:disabled, [aria-disabled="true"], [data-disabled]),
+.style-retro .pressable:where(:disabled, [aria-disabled="true"], [data-disabled]),
 .style-retro button:disabled {
-  transform: none;
   box-shadow: none;
   outline: none;
-  opacity: 0.5;
 }
 
 /* ══════════════════════════════════════════════════════════════
    输入框 / 表单元素 — 像素输入框
+   base.css 的 .control 是 wrapper 基元；原生 input/textarea/select 同样适用
+   注：聚焦阴影/边框已由 --icen-control-focus-* 接管，这里只补像素 inset 阴影
    ══════════════════════════════════════════════════════════════ */
 
-.style-retro .og-control,
+.style-retro .control,
 .style-retro input,
 .style-retro textarea,
 .style-retro select {
@@ -1582,18 +1531,12 @@
   transition: none;
 }
 
-.style-retro .og-control::after {
-  display: none;
-}
-
-/* 被 og-control / vn-editable-field 容器包裹的输入框：自身边框透明化，
+/* 被 .control 容器包裹的输入框：自身边框透明化，
    完全交给外层容器承担像素边框，避免常驻/聚焦状态出现双层内框。 */
-.style-retro .og-control input:not([type="checkbox"]):not([type="radio"]),
-.style-retro .og-control textarea,
-.style-retro .og-control select,
-.style-retro .vn-editable-field input:not([type="checkbox"]):not([type="radio"]),
-.style-retro .vn-editable-field textarea,
-.style-retro .vn-editable-field [contenteditable="true"] {
+.style-retro .control input:not([type="checkbox"]):not([type="radio"]),
+.style-retro .control textarea,
+.style-retro .control select,
+.style-retro .control [contenteditable="true"] {
   border-color: transparent !important;
   box-shadow: none !important;
   background: transparent !important;
@@ -1602,22 +1545,12 @@
 .style-retro input:hover,
 .style-retro textarea:hover,
 .style-retro select:hover,
-.style-retro .og-control:hover,
-.style-retro .vn-editable-field:hover {
-  border-color: var(--token-accent);
+.style-retro .control:hover {
+  border-color: var(--icen-hover-border);
 }
 
-.style-retro .og-control:focus-within,
-.style-retro .vn-editable-field:focus-within {
-  border-color: var(--token-accent);
-  box-shadow:
-    inset 2px 2px 0 var(--token-line-soft),
-    inset -1px -1px 0 var(--token-surface-strong);
-  outline: 2px solid var(--token-accent);
-  outline-offset: -2px;
-}
-
-/* 文本输入区自身无焦点环，完全交给外层容器 */
+/* 文本输入区自身无焦点环，完全交给外层容器；
+   .control:focus-within 的 box-shadow / border 由 --icen-control-focus-* 自动驱动 */
 .style-retro input:focus,
 .style-retro textarea:focus,
 .style-retro select:focus,
@@ -1701,8 +1634,8 @@
   border-color: var(--token-line-strong);
 }
 
-/* 禁用平滑悬停提升 */
-.style-retro .og-surface-lift:hover {
+/* 禁用平滑悬停提升；.lift 在 retro 下用硬投影 + 边框色变化表达悬停 */
+.style-retro .lift:hover {
   transform: none;
   box-shadow:
     2px 2px 0 var(--token-accent);
@@ -1819,7 +1752,7 @@
   box-shadow: var(--token-shadow-card);
 }
 
-/* 非文本元素的硬像素焦点环（已在 retro-effects.css 有基础，这里强化 specificity） */
+/* 非文本元素的硬像素焦点环 */
 .style-retro :focus-visible:not(input):not(textarea):not(select):not([contenteditable="true"]) {
   outline: 2px solid var(--token-accent);
   outline-offset: -2px;
@@ -1827,11 +1760,6 @@
   border-radius: var(--radius-md);
 }
 
-/* 非输入按钮在 retro 下禁用现代渐变高光（::after 渐变由 .og-pressable 提供） */
-.style-retro .og-pressable::after {
-  display: none;
-}
-
 /* ══════════════════════════════════════════════════════════════
    TERMINAL — 命令行 / CRT 终端（预留，可组合任意 dark preset）
    ══════════════════════════════════════════════════════════════ */