glasscn-core 0.2.0

package/src/primitives/surface.css

@@ -0,0 +1,212 @@
+/* ============================================================================
+ * glasscn-core — 表面原语 (Surface Primitives)
+ * ----------------------------------------------------------------------------
+ * 一块玻璃 = 四件事，缺一件就露馅：
+ *
+ *   1. backdrop-filter: blur() saturate()   折射背后的光斑
+ *   2. background: rgba(255,255,255,N)      白色中性填充，绝不带色
+ *   3. box-shadow inset 顶边 1px 高光        玻璃厚度接到顶光 —— 不可省
+ *   4. 1px 描边                             面板在背景上的可读边界 —— 不可省
+ *
+ * 第 3 条是"真玻璃"和"一块模糊的板子"之间唯一的区别。
+ * 第 4 条一去掉，面板边界会溶进背景，整个界面失去结构。
+ * ==========================================================================*/
+
+@utility glass-surface {
+  background-color: rgb(var(--glass-white) / var(--glass-fill-current));
+  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
+  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
+  border: var(--glass-border-width) solid var(--glass-border);
+  box-shadow:
+    var(--glass-specular-size) var(--glass-specular-color) inset,
+    var(--glass-underline),
+    var(--glass-shadow);
+  border-radius: var(--glass-radius-card);
+}
+
+/* --- 高度档位：只改变量 --------------------------------------------------- */
+
+@utility glass-flat {
+  --glass-blur: var(--glass-blur-flat);
+  --glass-fill-current: var(--glass-fill-flat);
+  --glass-shadow: var(--glass-shadow-flat);
+}
+
+@utility glass-raised {
+  --glass-blur: var(--glass-blur-raised);
+  --glass-fill-current: var(--glass-fill-raised);
+  --glass-shadow: var(--glass-shadow-raised);
+}
+
+@utility glass-overlay {
+  --glass-blur: var(--glass-blur-overlay);
+  --glass-fill-current: var(--glass-fill-overlay);
+  --glass-shadow: var(--glass-shadow-overlay);
+}
+
+@utility glass-modal {
+  --glass-blur: var(--glass-blur-modal);
+  --glass-fill-current: var(--glass-fill-modal);
+  --glass-shadow: var(--glass-shadow-modal);
+  --glass-saturate: var(--glass-saturate-modal);
+}
+
+/* --- 形状 ----------------------------------------------------------------- */
+
+@utility glass-panel {
+  border-radius: var(--glass-radius-panel);
+}
+
+@utility glass-pill {
+  border-radius: var(--glass-radius-pill);
+}
+
+/* --- 遮罩层 --------------------------------------------------------------- */
+
+@utility glass-scrim {
+  background-color: var(--glass-scrim);
+  -webkit-backdrop-filter: blur(var(--glass-scrim-blur)) saturate(140%);
+  backdrop-filter: blur(var(--glass-scrim-blur)) saturate(140%);
+}
+
+/* --- 导航：只有下边框，没有投影 ------------------------------------------- */
+/* 导航贴在视口顶部，投影会让它读作"浮在纸上的一条"，
+   而它应该是视口本身的一部分。 */
+
+@utility glass-nav {
+  background-color: rgb(var(--glass-white) / var(--glass-fill-nav));
+  -webkit-backdrop-filter: blur(var(--glass-blur-nav)) saturate(var(--glass-saturate));
+  backdrop-filter: blur(var(--glass-blur-nav)) saturate(var(--glass-saturate));
+  border: 0;
+  /* 描边和高光都比通用玻璃更收敛（0.08 / 0.06 对 0.12 / 0.20）——
+     导航横跨整个视口宽度，用通用强度会显得像一条亮带。 */
+  border-bottom: var(--glass-border-width) solid rgb(var(--glass-white) / 0.08);
+  border-radius: 0;
+  box-shadow: 0 1px 0 0 rgb(var(--glass-white) / 0.06) inset;
+}
+
+/* --- 滚动边缘效果：内容掠过导航下缘时渐现 --------------------------------- */
+/* Apple 材质规范：悬浮 chrome 和内容的交界不用常驻硬分隔线，
+   而是内容真正滚过导航下缘时，一道阴影从无到有渐现 --
+   「滚动边缘效果，不是硬分隔线」。静止在顶部时值为 0，天然干净。
+   scroll(root y) 时间轴驱动，0..80px 滚动距离映射整段渐现；
+   不支持 scroll-driven animation 的浏览器整块 @supports 忽略，
+   退回上面的静态 hairline，行为无回退悬崖。 */
+
+@supports (animation-timeline: scroll()) {
+  .glass-nav {
+    animation: glass-nav-edge linear both;
+    animation-timeline: scroll(root y);
+    animation-range: 0 80px;
+  }
+
+  @keyframes glass-nav-edge {
+    from { box-shadow: 0 1px 0 0 rgb(var(--glass-white) / 0.06) inset; }
+    to {
+      box-shadow:
+        0 1px 0 0 rgb(var(--glass-white) / 0.06) inset,
+        0 8px 16px -12px rgb(0 0 0 / 0.55),
+        0 1px 0 0 rgb(0 0 0 / 0.35);
+    }
+  }
+}
+
+/* --- 菜单 / 上下文菜单 ----------------------------------------------------- */
+/* 规范单列的一档：blur 28 saturate 200%，填充 0.10、描边 0.14。
+   比 modal 稍薄但饱和更高 —— 菜单浮在内容正上方很近的距离，
+   太厚会让下面的内容彻底消失，失去空间关系。 */
+
+@utility glass-menu {
+  background-color: rgb(var(--glass-white) / 0.1);
+  -webkit-backdrop-filter: blur(28px) saturate(200%);
+  backdrop-filter: blur(28px) saturate(200%);
+  border: var(--glass-border-width) solid rgb(var(--glass-white) / 0.14);
+  border-radius: var(--glass-radius-card);
+  box-shadow:
+    0 1px 0 0 rgb(var(--glass-white) / 0.18) inset,
+    0 20px 60px rgb(0 0 0 / 0.4);
+  overflow: hidden;
+}
+
+/* --- 高级卡片：渐变描边 ---------------------------------------------------- */
+/* 光只打在左上角，向右下渐隐 —— 模拟单一光源打在一块有厚度的玻璃棱上。
+   用 mask 做描边而不是 border-image：border-image 不认 border-radius。 */
+
+@utility glass-premium {
+  position: relative;
+  border-color: transparent;
+
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    border-radius: inherit;
+    padding: var(--glass-border-width);
+    pointer-events: none;
+    background: linear-gradient(
+      135deg,
+      rgb(var(--glass-white) / 0.45) 0%,
+      rgb(var(--glass-white) / 0.12) 32%,
+      rgb(var(--glass-white) / 0) 65%
+    );
+    mask:
+      linear-gradient(#000 0 0) content-box,
+      linear-gradient(#000 0 0);
+    mask-composite: exclude;
+    -webkit-mask:
+      linear-gradient(#000 0 0) content-box,
+      linear-gradient(#000 0 0);
+    -webkit-mask-composite: xor;
+  }
+}
+
+/* --- 局部覆写 ------------------------------------------------------------- */
+
+@utility glass-blur-* {
+  --glass-blur: --value([length], --blur- *);
+}
+
+@utility glass-fill-* {
+  /* glass-fill-12 → 填充不透明度 0.12 */
+  --glass-fill-current: calc(--value(integer) / 100);
+}
+
+/* --- 通透度：独立于调色的一条轴 -------------------------------------------- */
+/* <html data-glass-density="sheer"> 整站切换，或挂在任意子树上局部切换。
+   sheer 需要背景足够干净，否则文字会被背后的光斑洗掉；
+   heavy 可读性最好，数据密集界面用它。 */
+
+:root[data-glass-density="sheer"],
+[data-glass-density="sheer"] {
+  --glass-fill-flat: 0.03;
+  --glass-fill-raised: 0.05;
+  --glass-fill-overlay: 0.07;
+  --glass-fill-modal: 0.09;
+  --glass-blur-base: 24px;
+  --glass-saturate: 200%;
+  --glass-border-alpha: 0.08;
+}
+
+:root[data-glass-density="heavy"],
+[data-glass-density="heavy"] {
+  --glass-fill-flat: 0.16;
+  --glass-fill-raised: 0.2;
+  --glass-fill-overlay: 0.24;
+  --glass-fill-modal: 0.28;
+  --glass-blur-base: 14px;
+  --glass-saturate: 160%;
+  --glass-border-alpha: 0.2;
+}
+
+/* --- 嵌套保护 ------------------------------------------------------------- */
+/* 规范硬约束：模糊层最多叠三层。内层玻璃退回"薄玻璃"——
+   保留填充和棱边，去掉背景模糊。再模糊一次已经模糊过的结果，
+   画面会浑，边框也会叠成脏线。 */
+
+@utility glass-nested {
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+  --glass-fill-current: 0.05;
+  --glass-shadow: none;
+}

package/src/tokens/bridge.css

@@ -0,0 +1,108 @@
+/* ============================================================================
+ * glasscn-core — shadcn 变量桥 (Token Bridge)
+ * ----------------------------------------------------------------------------
+ * 与 shadcn 集成的核心策略：接管变量，而不是覆写属性。
+ *
+ * shadcn 组件写的是 `bg-card` `border` `shadow-sm`，都是 Tailwind 工具类
+ * (0,1,0)。如果用 `[data-slot=card] { background: ... }` 去压它，
+ * 会连用户自己写的 `className="bg-white/70"` 一起压掉——库变得不可覆写。
+ *
+ * 所以：shadcn 已经设过的属性只改背后的变量；
+ * 它从不设的属性（backdrop-filter、微光）才由 bridge/auto.css 补。
+ * ==========================================================================*/
+
+:root {
+  /* --- 页面底：不透明，玻璃需要底下有东西可折射 --------------------------- */
+  --background: var(--glass-bg-base);
+  --foreground: var(--glass-text-primary);
+
+  /* --- 表面类 token 全部换成白色中性玻璃 ---------------------------------- */
+  /* 注意这里没有一个是有色的。玻璃的颜色来自背后的光斑，不是这些变量。 */
+  --card: rgb(var(--glass-white) / var(--glass-fill-raised));
+  --card-foreground: var(--glass-text-primary);
+  --popover: rgb(var(--glass-white) / var(--glass-fill-overlay));
+  --popover-foreground: var(--glass-text-primary);
+  --secondary: rgb(var(--glass-white) / var(--glass-fill-raised));
+  --secondary-foreground: var(--glass-text-primary);
+  --muted: rgb(var(--glass-white) / var(--glass-fill-flat));
+  --accent: rgb(var(--glass-white) / var(--glass-fill-hover));
+  --accent-foreground: var(--glass-text-primary);
+  --input: rgb(var(--glass-white) / var(--glass-fill-flat));
+  --sidebar: rgb(var(--glass-white) / var(--glass-fill-overlay));
+  --sidebar-foreground: var(--glass-text-primary);
+  --sidebar-accent: rgb(var(--glass-white) / var(--glass-fill-hover));
+  --sidebar-accent-foreground: var(--glass-text-primary);
+
+  --border: var(--glass-border);
+  --sidebar-border: var(--glass-border);
+  --ring: var(--glass-accent);
+
+  /* --- 主操作是实心强调色，不是玻璃 --------------------------------------- */
+  /* 一屏全是半透明面板时，主按钮再做成玻璃，用户就找不到"该点哪个"。
+     这是规范里明确的一条，也是可供性问题，不是审美偏好。 */
+  --primary: var(--glass-accent);
+  --primary-foreground: var(--glass-accent-fg);
+  --sidebar-primary: var(--glass-accent);
+  --sidebar-primary-foreground: var(--glass-accent-fg);
+
+  --destructive: var(--glass-danger);
+  --destructive-foreground: var(--glass-danger-fg);
+
+  /* --- 次要文字 ----------------------------------------------------------- */
+  /* 映射到 text-secondary (0.68) 而不是 text-muted (0.38)。
+     muted 在 WCAG 下只有约 3.3:1，规范给它的定位是"占位符、标签"，
+     但 shadcn 的 --muted-foreground 承担的是真正的次要正文
+     （CardDescription、表格副标题、表单说明），必须达到 4.5:1。
+     想要 muted 那一档，直接用 var(--glass-text-muted)。 */
+  --muted-foreground: var(--glass-text-secondary);
+  --sidebar-ring: var(--glass-accent);
+
+  /* --- 圆角：药丸是这套设计的形状签名 ------------------------------------- */
+  /* shadcn 用单个 --radius 派生整个量表：
+     sm = r-4, md = r-2, lg = r, xl = r+4
+     卡片写的是 rounded-xl，所以基准取 16px 让 xl 自然落在规范的 20px。
+     按钮/输入框那些药丸形状，在 auto 层里按元素改对应的 --radius-* 变量 ——
+     不能直接写 border-radius 属性，那是 @layer components，
+     会被组件自带的 rounded-md 工具类（@layer utilities）压掉。 */
+  --radius: 16px;
+}
+
+/* ----------------------------------------------------------------------------
+ * 阴影量表接管
+ * ----------------------------------------------------------------------------
+ * shadcn 组件里散落着 shadow-xs / sm / md / lg。把整个量表换成
+ * "玻璃阴影 = 顶边高光 + 外投影"，现有组件不改一行就有了正确的厚度感。
+ * 用户写 shadow-none 依然完全生效。
+ * ==========================================================================*/
+
+@theme inline {
+  --shadow-2xs: var(--glass-specular-size) var(--glass-specular-color) inset;
+
+  --shadow-xs: var(--glass-specular-size) var(--glass-specular-color) inset,
+    var(--glass-underline), 0 2px 8px rgb(0 0 0 / 0.2);
+
+  --shadow-sm: var(--glass-specular-size) var(--glass-specular-color) inset,
+    var(--glass-underline), var(--glass-shadow-flat);
+
+  --shadow-md: var(--glass-specular-size) var(--glass-specular-color) inset,
+    var(--glass-underline), var(--glass-shadow-raised);
+
+  --shadow-lg: var(--glass-specular-size) var(--glass-specular-color) inset,
+    var(--glass-underline), var(--glass-shadow-overlay);
+
+  --shadow-xl: var(--glass-specular-size) var(--glass-specular-color) inset,
+    var(--glass-underline), var(--glass-shadow-modal);
+
+  --shadow-2xl: var(--glass-specular-size) var(--glass-specular-color) inset,
+    var(--glass-underline), var(--glass-shadow-modal);
+
+  /* 材质变量也暴露成 Tailwind 工具类 */
+  --blur-glass: var(--glass-blur-base);
+  --blur-glass-overlay: var(--glass-blur-overlay);
+  --blur-glass-modal: var(--glass-blur-modal);
+  --ease-glass: var(--glass-ease);
+  --ease-glass-out: var(--glass-ease-out);
+  --ease-glass-spring: var(--glass-ease-spring);
+  --radius-pill: var(--glass-radius-pill);
+  --color-glass-accent: var(--glass-accent);
+}

package/src/tokens/elevation.css

@@ -0,0 +1,52 @@
+/* ============================================================================
+ * glasscn-core — 高度阶梯 (Elevation Scale)
+ * ----------------------------------------------------------------------------
+ * 设计说明给的是按组件点名的数值（导航 blur 24、上下文菜单 blur 28 saturate 200%）。
+ * 这里把那些点整理成一条连续的阶梯，组件只声明自己在哪一档。
+ *
+ *   flat    输入框 / 徽章 / 表格      blur 16  fill .06
+ *   raised  卡片 / 次级按钮 / 标签页  blur 20  fill .08   ← 规范里的"默认玻璃"
+ *   overlay 导航 / 浮层 / 侧边栏      blur 24  fill .10
+ *   modal   对话框 / 抽屉 / 命令面板   blur 28  fill .12  saturate 200%
+ *
+ * 规范另一条硬约束：模糊层最多叠三层。再多性能会塌，画面也会浑。
+ * 嵌套保护在 bridge/auto.css 里，内层玻璃自动退回无模糊的薄玻璃。
+ * ==========================================================================*/
+
+:root {
+  /* --- flat --------------------------------------------------------------- */
+  --glass-blur-flat: calc(var(--glass-blur-base) * 0.8);
+  --glass-fill-flat: 0.06;
+  --glass-shadow-flat: 0 2px 8px rgb(0 0 0 / 0.2);
+
+  /* --- raised ------------------------------------------------------------- */
+  --glass-blur-raised: var(--glass-blur-base);
+  --glass-fill-raised: var(--glass-fill);
+  --glass-shadow-raised: var(--glass-shadow-base);
+
+  /* --- overlay ------------------------------------------------------------ */
+  --glass-blur-overlay: calc(var(--glass-blur-base) * 1.2);
+  --glass-fill-overlay: 0.1;
+  --glass-shadow-overlay: 0 16px 48px rgb(0 0 0 / 0.42);
+
+  /* --- modal -------------------------------------------------------------- */
+  --glass-blur-modal: calc(var(--glass-blur-base) * 1.4);
+  --glass-fill-modal: 0.12;
+  --glass-saturate-modal: 200%;
+  --glass-shadow-modal: 0 24px 72px rgb(0 0 0 / 0.55);
+
+  /* --- 导航：规范里单列的一档 --------------------------------------------- */
+  /* 只有下边框、没有投影 —— 导航贴在视口顶部，投影会让它显得"浮在纸上"，
+     而它应该读作视口本身的一部分。 */
+  --glass-fill-nav: 0.06;
+  --glass-blur-nav: calc(var(--glass-blur-base) * 1.2);
+
+  /* --- 遮罩层 ------------------------------------------------------------- */
+  --glass-scrim: rgb(0 0 0 / 0.55);
+  --glass-scrim-blur: calc(var(--glass-blur-base) * 0.4);
+
+  /* 默认档位：raised。各组件在 auto 层里覆写成自己的档。 */
+  --glass-blur: var(--glass-blur-raised);
+  --glass-fill-current: var(--glass-fill-raised);
+  --glass-shadow: var(--glass-shadow-raised);
+}

package/src/tokens/palette.css

@@ -0,0 +1,47 @@
+/* ============================================================================
+ * glasscn-core — 调色 (Palette)
+ * ----------------------------------------------------------------------------
+ * 默认：Ember & Slate —— 带暖调的近黑炭灰底 + 琥珀/赭石光斑。
+ *
+ * 换调色换的是**背景光斑和强调色**，玻璃填充永远是白色中性。
+ * 每套调色只需要定义八个值：底色两级、三个光斑、强调色、文字色调。
+ * 见 palettes/ 目录里另外五套。
+ * ==========================================================================*/
+
+:root {
+  /* --- 底 ----------------------------------------------------------------- */
+  --glass-bg-base: #100d0a;
+  --glass-bg-mid: #1c1510;
+
+  /* --- 光斑：整套视觉的颜色都来自这三团 ---------------------------------- */
+  /* 顺序有讲究：blob-1 是最大最亮的那团（650px, opacity .55），
+     整个画面的主色调由它决定，所以放琥珀而不是赭石。 */
+  --glass-blob-1: #f59e0b;   /* 琥珀 */
+  --glass-blob-2: #c2410c;   /* 赭石 */
+  --glass-blob-3: #78350f;   /* 深琥珀棕 */
+
+  /* --- 强调色：只用于 CTA 和交互态 --------------------------------------- */
+  --glass-accent: #f59e0b;
+  --glass-accent-hover: #fbbf24;
+  --glass-accent-fg: #1a1206;   /* 琥珀底上的文字必须是近黑，不是白 */
+
+  /* --- 文字 --------------------------------------------------------------- */
+  /* 暖白，永远不用纯 #ffffff —— 纯白在暖调背景上会显得脏且刺眼 */
+  --glass-text-rgb: 255 248 240;
+  --glass-text-primary: rgb(var(--glass-text-rgb) / 0.95);
+
+  /* 次要文字用 0.60。规范里 text-secondary 是 rgba(255,235,210,0.60)，
+     这里统一走同一个 rgb 三元组，色相差异交给光斑去表达。 */
+  --glass-text-secondary: rgb(var(--glass-text-rgb) / 0.68);
+
+  /* 弱化文字 0.35 —— 规范定位是"占位符、标签"。
+     注意它在 WCAG 下只有约 3.3:1，达不到 4.5:1，
+     所以只能用于占位符和纯装饰性文字。真正的次要正文走 secondary。
+     bridge.css 里 --muted-foreground 映射到 secondary 而不是这里，
+     就是为了防止这一条被误用。 */
+  --glass-text-muted: rgb(var(--glass-text-rgb) / 0.38);
+
+  /* --- 语义色 ------------------------------------------------------------- */
+  --glass-danger: #f87171;
+  --glass-danger-fg: #1a0a0a;
+}

package/src/tokens/primitives.css

@@ -0,0 +1,103 @@
+/* ============================================================================
+ * glasscn-core — 材质原语 (Material Primitives)
+ * ----------------------------------------------------------------------------
+ * 核心规则，整套体系的地基：
+ *
+ *   玻璃本身没有颜色。它的颜色全部来自背后的背景，
+ *   经过模糊和提亮之后透过面板显出来。
+ *
+ * 所以 glass fill 永远是 rgba(255,255,255,N) —— 白色中性，绝不带色调。
+ * 想换整体气质，换的是背后光斑（blob）的颜色，不是玻璃的颜色。
+ * 这条一破，玻璃立刻变成"有色半透明塑料片"。
+ *
+ * 暗色优先：Ember & Slate 是默认，浅色是 palettes/liquid-light 的变体。
+ * ==========================================================================*/
+
+:root {
+  color-scheme: dark;
+
+  /* --- 折射 -------------------------------------------------------------- */
+  /* 模糊基数。所有档位由它派生，改这一个值整体调厚度。 */
+  --glass-blur-base: 20px;
+
+  /* saturate 必须和 blur 一起用。只有 blur 的话，背后的颜色透过来会发灰，
+     看着像磨砂塑料；saturate 让颜色"绽"出来，这才是玻璃感的真正来源。 */
+  --glass-saturate: 180%;
+  --glass-brightness: 1;
+
+  /* --- 玻璃填充（白色中性，不可改成有色） -------------------------------- */
+  --glass-white: 255 255 255;
+  --glass-fill: 0.08;
+  --glass-fill-hover: 0.13;
+
+  /* 通透度是独立于调色的一条轴。三档，靠 data-glass-density 切换，
+     见 primitives/surface.css 末尾。
+       sheer    几乎全透，背景清晰可见
+       frosted  默认，背景读得出颜色和形状，细节丢失
+       heavy    接近不透明，戏剧化、可读性最好 */
+
+  /* --- 边缘光学 ---------------------------------------------------------- */
+  --glass-border-alpha: 0.12;
+  --glass-border-alpha-hover: 0.22;
+  --glass-border-width: 1px;
+
+  /* 高光 (specular)：顶边 1px 内阴影，模拟玻璃的物理厚度接到顶光。
+     这是 Apple Liquid Glass 的签名，也是"真玻璃"和"一块模糊的板子"
+     之间唯一的区别。不可省。 */
+  --glass-specular: 0.2;
+  --glass-specular-size: 0 1px 0 0;
+
+  /* 底边暗线：暗色下不需要（背景本来就暗），浅色调色里会打开。
+     默认 none，靠调色覆写。 */
+  --glass-underline: 0 0 0 0 transparent;
+
+  /* --- 投影 --------------------------------------------------------------- */
+  /* 比常规暗色 UI 更深，玻璃需要更强的投影才能从背景里分离出来 */
+  --glass-shadow-base: 0 12px 40px rgb(0 0 0 / 0.35);
+  --glass-shadow-hover: 0 20px 60px rgb(0 0 0 / 0.5);
+
+  /* --- 运动 --------------------------------------------------------------- */
+  /* 缓动哲学对齐 Apple（阻尼比 + 响应，见 WWDC「流体界面」）：
+     默认一切临界阻尼（阻尼比 1.0，无过冲）。悬停、入场、位移都不是
+     被甩出去的，不该弹；过冲只属于带着动量的手势（拨开关、倾斜回弹）。
+     旧版把过冲曲线用在所有 hover 上，手感是"弹跳的塑料"，已废弃。 */
+  --glass-duration-fast: 80ms;       /* active 要"啪"地一下，不能拖 */
+  --glass-duration: 240ms;           /* 位移/投影：等效响应 ~0.35s 的弹簧 */
+  --glass-duration-slow: 600ms;      /* 滚动揭示专用，只有它配用慢档 */
+  --glass-duration-color: 150ms;     /* 颜色反馈比位移快一拍 */
+  --glass-duration-enter: 240ms;     /* 浮层物化入场 */
+  --glass-duration-exit: 160ms;      /* 退场比入场快 -- 离开不该有仪式感 */
+
+  /* 阻尼 1.0 · 响应 ~0.35s：transform 和投影的默认曲线 */
+  --glass-ease: cubic-bezier(0.22, 1, 0.36, 1);
+  /* 攻击更快收尾干净：颜色和淡入淡出用它 */
+  --glass-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+  /* 阻尼 ~0.8，轻微过冲。仅限动量交互（开关拨杆、倾斜回弹）--
+     出现在 hover 上就是误用，verify 里有断言盯着。 */
+  --glass-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --glass-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+
+  /* --- 交互位移 ----------------------------------------------------------- */
+  --glass-lift: 4px;
+  --glass-press: 1px;
+  --glass-press-scale: 0.97;
+
+  /* --- 微光扫过 (shimmer) -------------------------------------------------- */
+  --glass-shimmer-alpha: 0.14;
+  --glass-shimmer-angle: -20deg;
+  --glass-shimmer-duration: 900ms;
+
+  /* --- 圆角：五级 ---------------------------------------------------------- */
+  --glass-radius-sm: 10px;    /* 徽章内部、小控件 */
+  --glass-radius-md: 16px;    /* 骨架屏、次级容器 */
+  --glass-radius-card: 20px;  /* 卡片、菜单 */
+  --glass-radius-panel: 28px; /* 大面板、hero */
+  --glass-radius-pill: 999px; /* 按钮、输入框、标签 */
+
+  /* --- 由上面派生的可直接用的颜色 ------------------------------------------ */
+  --glass-bg: rgb(var(--glass-white) / var(--glass-fill));
+  --glass-bg-hover: rgb(var(--glass-white) / var(--glass-fill-hover));
+  --glass-border: rgb(var(--glass-white) / var(--glass-border-alpha));
+  --glass-border-hover: rgb(var(--glass-white) / var(--glass-border-alpha-hover));
+  --glass-specular-color: rgb(var(--glass-white) / var(--glass-specular));
+}

package/src/tokens/typography.css

@@ -0,0 +1,46 @@
+/* ============================================================================
+ * glasscn-core — 字体 (Typography)
+ * ----------------------------------------------------------------------------
+ * 只定义 token，不加载字体。
+ *
+ * 这个库承诺零外部依赖，主题层里塞一个 Google Fonts 的 @import 会让每个
+ * 使用方都多一个跨域阻塞请求（国内网络尤其明显），而且没法退。
+ * 所以字体由消费方自己引，这里给出完整的 fallback 栈，
+ * 不引也不会崩，只是落到系统字体。
+ *
+ * 想要规范里的效果，在你自己的 HTML 里加：
+ *
+ *   <link rel="preconnect" href="https://fonts.googleapis.com">
+ *   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+ *   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Outfit:wght@600;700;800&family=DM+Sans:wght@400;500&display=swap">
+ *
+ * 自托管或用国内 CDN 时，把 font-family 的第一项换掉即可，别的不用动。
+ * ==========================================================================*/
+
+:root {
+  --glass-font-heading: "Outfit", ui-sans-serif, system-ui, -apple-system,
+    "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
+  --glass-font-body: "DM Sans", ui-sans-serif, system-ui, -apple-system,
+    "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
+
+  /* 标题：几何感、字距收紧、随视口流体缩放 */
+  --glass-tracking-heading: -0.02em;
+  /* 小字排印：正字距。全大写的 eyebrow / 徽章字距必须拉开，
+     否则字母糊在一起 -- 这是 tracking 是尺寸函数的另一端。 */
+  --glass-tracking-caps: 0.14em;
+  --glass-text-h1: clamp(2.5rem, 5vw, 4.5rem);
+  --glass-text-h2: clamp(1.8rem, 3vw, 3rem);
+  --glass-text-h3: 1.5rem;
+
+  /* 行高随字号反向走（WWDC「UI 字体排印」）：大标题收紧贴排，
+     正文给足呼吸。玻璃上的长文本需要更多行高。 */
+  --glass-leading-heading: 1.1;
+  --glass-leading-body: 1.75;
+}
+
+@theme inline {
+  --font-heading: var(--glass-font-heading);
+  --font-sans: var(--glass-font-body);
+  --text-display: var(--glass-text-h1);
+  --text-title: var(--glass-text-h2);
+}