@longzai-intelligence-liquid-glass/tokens 0.0.1

package/README.md

@@ -0,0 +1,17 @@
+# @longzai-intelligence-liquid-glass/tokens
+
+Liquid Glass 设计令牌包：玻璃海拔分级（1–5）、OKLCH 语义色、折射边框、亮度适配、动效令牌与全部 keyframes，以纯 CSS 发布。
+
+衍生自 [glinui](https://github.com/glincker/glinui) 的 tokens 成果（MIT, Copyright (c) 2026 Glincker LLC），经系统性转译与 house 规范化。
+
+## 用法
+
+```tsx
+import '@longzai-intelligence-liquid-glass/tokens/styles.css';
+```
+
+- CSS 变量：`--glass-{1..5}-{blur,surface,shadow}`、`--color-*`、`--motion-*`、`--easing-*`
+- 工具类：`.glass-1` … `.glass-5`（海拔三件套）、`.glass-gpu-hint` / `.glass-heavy`（性能提示）、`.anim-*`（keyframes 动画）
+- 亮度适配：`.glass-adapt-{neutral,bright,dim}` 或 `data-glass-luminance` 属性
+- 暗色模式：根节点 `.dark` 类；`prefers-reduced-transparency` / `prefers-reduced-motion` 自动降级
+- TS 侧：`GlassElevationLevel`、`GLASS_ELEVATION_LEVELS`、`MOTION_DURATIONS`、`MOTION_EASINGS`

package/dist/index.d.ts

@@ -0,0 +1,79 @@
+//#region src/elevation.types.d.ts
+/**
+ * 玻璃海拔层级类型
+ *
+ * 对应 styles.css 中的 --glass-{level}-* 变量族（blur/surface/shadow 三件套）。
+ */
+/**
+ * 玻璃海拔层级（1 最轻 → 5 最重）
+ */
+type GlassElevationLevel = '1' | '2' | '3' | '4' | '5';
+/**
+ * 背景亮度适配模式
+ */
+type GlassLuminanceMode = 'neutral' | 'bright' | 'dim';
+//#endregion
+//#region src/elevation.constants.d.ts
+/**
+ * 全部合法海拔层级（升序）
+ */
+declare const GLASS_ELEVATION_LEVELS: readonly GlassElevationLevel[];
+/**
+ * 全部合法背景亮度适配模式
+ */
+declare const GLASS_LUMINANCE_MODES: readonly GlassLuminanceMode[];
+/**
+ * 判断值是否为合法海拔层级
+ *
+ * @param value - 待校验值
+ * @returns 是合法层级时为 true
+ */
+declare function isGlassElevationLevel(value: unknown): value is GlassElevationLevel;
+//#endregion
+//#region src/motion.constants.d.ts
+/**
+ * 动效令牌常量
+ *
+ * 与 styles.css 中的 --motion-* / --easing-* CSS 变量保持同值，
+ * 供无法消费 CSS 变量的场景（canvas/Skia/测试断言）读取。
+ */
+/**
+ * 动效时长令牌（毫秒）
+ */
+declare const MOTION_DURATIONS: {
+  /**
+   * 快速（微交互反馈）
+   */
+  readonly fast: 150;
+  /**
+   * 常规（默认过渡）
+   */
+  readonly normal: 250;
+  /**
+   * 缓慢（大面积转场）
+   */
+  readonly slow: 400;
+  /**
+   * 弹簧（带回弹的物理动效）
+   */
+  readonly spring: 500;
+};
+/**
+ * 动效缓动令牌（cubic-bezier 参数）
+ */
+declare const MOTION_EASINGS: {
+  /**
+   * 标准（减速为主，UI 进入常用）
+   */
+  readonly standard: 'cubic-bezier(0.2, 0, 0, 1)';
+  /**
+   * 弹簧（过冲回弹）
+   */
+  readonly spring: 'cubic-bezier(0.34, 1.56, 0.64, 1)';
+  /**
+   * 玻璃（对称缓入缓出）
+   */
+  readonly glass: 'cubic-bezier(0.4, 0, 0.2, 1)';
+};
+//#endregion
+export { GLASS_ELEVATION_LEVELS, GLASS_LUMINANCE_MODES, type GlassElevationLevel, type GlassLuminanceMode, MOTION_DURATIONS, MOTION_EASINGS, isGlassElevationLevel };

package/dist/index.js

@@ -0,0 +1 @@
+const e=[`1`,`2`,`3`,`4`,`5`],t=[`neutral`,`bright`,`dim`];function n(t){return e.includes(t)}const r={fast:150,normal:250,slow:400,spring:500},i={standard:`cubic-bezier(0.2, 0, 0, 1)`,spring:`cubic-bezier(0.34, 1.56, 0.64, 1)`,glass:`cubic-bezier(0.4, 0, 0.2, 1)`};export{e as GLASS_ELEVATION_LEVELS,t as GLASS_LUMINANCE_MODES,r as MOTION_DURATIONS,i as MOTION_EASINGS,n as isGlassElevationLevel};

package/dist/styles.css

@@ -0,0 +1,958 @@
+/**
+ * Liquid Glass 设计令牌（玻璃海拔 / 光学色彩 / 动效）
+ *
+ * 衍生自 glinui tokens（MIT, Copyright (c) 2026 Glincker LLC），转译为纯 CSS 发布。
+ *
+ * 关键原则（源自 Apple Liquid Glass 规范）：
+ * - saturate(180%) 始终与 blur 成对出现在 backdrop-filter 中
+ * - 表面不透明度高于传统玻璃拟态（Apple Beta 3+）
+ * - 暗色模式显著更不透明以保证可读性
+ * - 顶边框亮度高于侧边（光折射边缘）
+ * - 玻璃上文字对比度 4.5:1（WCAG AA）
+ */
+
+:root {
+  /* ── 语义色 ─────────────────────────────── */
+  --color-background: oklch(0.985 0.002 240);
+  --color-foreground: oklch(0.23 0.01 248);
+  --color-surface: oklch(0.997 0.002 245);
+  --color-border: oklch(0.89 0.01 246);
+  --color-accent: oklch(0.2 0.005 250);
+  --color-accent-foreground: oklch(0.98 0.003 250);
+
+  /* ── 玻璃原语 ────────────────────────────── */
+  --glass-blur-sm: 8px;
+  --glass-blur-md: 16px;
+  --glass-blur-lg: 24px;
+  --glass-blur-xl: 40px;
+
+  --glass-adapt-surface-multiplier: 1;
+  --glass-adapt-border-multiplier: 1;
+  --glass-adapt-refraction-multiplier: 1;
+  --glass-adapt-saturate-multiplier: 1;
+
+  --glass-base-rgb: 255 255 255;
+  --glass-saturate-base: 180%;
+  --glass-saturate-subtle-base: 130%;
+  --glass-saturate: calc(var(--glass-saturate-base) * var(--glass-adapt-saturate-multiplier));
+  --glass-saturate-subtle: calc(
+    var(--glass-saturate-subtle-base) * var(--glass-adapt-saturate-multiplier)
+  );
+
+  --glass-border-alpha: 0.2;
+  --glass-border-strong-alpha: 0.35;
+  --glass-refraction-top-alpha: 0.4;
+  --glass-surface: rgb(var(--glass-base-rgb) / calc(0.18 * var(--glass-adapt-surface-multiplier)));
+  --glass-border: rgb(
+    255 255 255 / calc(var(--glass-border-alpha) * var(--glass-adapt-border-multiplier))
+  );
+  --glass-border-strong: rgb(
+    255 255 255 / calc(var(--glass-border-strong-alpha) * var(--glass-adapt-border-multiplier))
+  );
+  --glass-refraction-top: rgb(
+    255 255 255 / calc(var(--glass-refraction-top-alpha) * var(--glass-adapt-refraction-multiplier))
+  );
+
+  /* ── 玻璃不透明度刻度（水晶 → 磨砂）───────── */
+  --glass-opacity-1: 0.06;
+  --glass-opacity-2: 0.08;
+  --glass-opacity-3: 0.1;
+  --glass-opacity-4: 0.12;
+  --glass-opacity-5: 0.16;
+  --glass-opacity-6: 0.18;
+  --glass-opacity-7: 0.22;
+  --glass-opacity-8: 0.25;
+  --glass-opacity-9: 0.3;
+  --glass-opacity-10: 0.35;
+
+  /* ── 玻璃性能提示 ─────────────────────────── */
+  --glass-gpu-transform: translateZ(0);
+  --glass-gpu-backface-visibility: hidden;
+  --glass-gpu-will-change: transform, opacity;
+  --glass-heavy-will-change: backdrop-filter, transform, opacity;
+  --glass-heavy-contain: paint;
+
+  /* ── 玻璃层级（blur + surface + shadow）──── */
+  --glass-1-blur: 8px;
+  --glass-1-opacity: var(--glass-opacity-2);
+  --glass-1-surface: rgb(
+    var(--glass-base-rgb) / calc(var(--glass-1-opacity) * var(--glass-adapt-surface-multiplier))
+  );
+  --glass-1-shadow: var(--shadow-glass-sm);
+
+  --glass-2-blur: 12px;
+  --glass-2-opacity: var(--glass-opacity-4);
+  --glass-2-surface: rgb(
+    var(--glass-base-rgb) / calc(var(--glass-2-opacity) * var(--glass-adapt-surface-multiplier))
+  );
+  --glass-2-shadow: var(--shadow-glass-sm);
+
+  --glass-3-blur: 16px;
+  --glass-3-opacity: var(--glass-opacity-6);
+  --glass-3-surface: rgb(
+    var(--glass-base-rgb) / calc(var(--glass-3-opacity) * var(--glass-adapt-surface-multiplier))
+  );
+  --glass-3-shadow: var(--shadow-glass-md);
+
+  --glass-4-blur: 24px;
+  --glass-4-opacity: var(--glass-opacity-8);
+  --glass-4-surface: rgb(
+    var(--glass-base-rgb) / calc(var(--glass-4-opacity) * var(--glass-adapt-surface-multiplier))
+  );
+  --glass-4-shadow: var(--shadow-glass-lg);
+
+  --glass-5-blur: 40px;
+  --glass-5-opacity: var(--glass-opacity-10);
+  --glass-5-surface: rgb(
+    var(--glass-base-rgb) / calc(var(--glass-5-opacity) * var(--glass-adapt-surface-multiplier))
+  );
+  --glass-5-shadow: var(--shadow-glass-lg);
+
+  /* ── 圆角 ──────────────────────────────── */
+  --radius-sm: 0.5rem;
+  --radius-md: 0.75rem;
+  --radius-lg: 1rem;
+  --radius-xl: 1.25rem;
+  --radius-2xl: 1.75rem;
+
+  /* ── 间距 ───────────────────────────────── */
+  --space-xs: 0.25rem;
+  --space-sm: 0.5rem;
+  --space-md: 0.75rem;
+  --space-lg: 1rem;
+  --space-xl: 1.5rem;
+  --space-2xl: 2rem;
+
+  /* ── 阴影 ───────────────────────────────── */
+  --shadow-glass-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
+  --shadow-glass-md: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
+  --shadow-glass-lg: 0 16px 48px rgba(0, 0, 0, 0.16), 0 4px 8px rgba(0, 0, 0, 0.08);
+  --shadow-glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(0, 0, 0, 0.05);
+
+  /* ── 动效 ───────────────────────────────── */
+  --motion-fast: 150ms;
+  --motion-normal: 250ms;
+  --motion-slow: 400ms;
+  --motion-spring: 500ms;
+  --easing-standard: cubic-bezier(0.2, 0, 0, 1);
+  --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --easing-glass: cubic-bezier(0.4, 0, 0.2, 1);
+
+  color-scheme: light;
+}
+
+.dark {
+  --color-background: oklch(0.18 0.01 250);
+  --color-foreground: oklch(0.95 0.01 247);
+  --color-surface: oklch(0.23 0.01 250);
+  --color-border: oklch(0.34 0.01 250);
+  --color-accent: oklch(0.92 0.005 250);
+  --color-accent-foreground: oklch(0.15 0.005 250);
+
+  --glass-base-rgb: 0 0 0;
+  --glass-border-alpha: 0.1;
+  --glass-border-strong-alpha: 0.18;
+  --glass-refraction-top-alpha: 0.15;
+  --glass-surface: rgb(var(--glass-base-rgb) / calc(0.4 * var(--glass-adapt-surface-multiplier)));
+
+  --glass-opacity-1: 0.16;
+  --glass-opacity-2: 0.2;
+  --glass-opacity-3: 0.25;
+  --glass-opacity-4: 0.3;
+  --glass-opacity-5: 0.35;
+  --glass-opacity-6: 0.4;
+  --glass-opacity-7: 0.48;
+  --glass-opacity-8: 0.55;
+  --glass-opacity-9: 0.62;
+  --glass-opacity-10: 0.7;
+
+  --glass-1-opacity: var(--glass-opacity-2);
+  --glass-1-surface: rgb(
+    var(--glass-base-rgb) / calc(var(--glass-1-opacity) * var(--glass-adapt-surface-multiplier))
+  );
+
+  --glass-2-opacity: var(--glass-opacity-4);
+  --glass-2-surface: rgb(
+    var(--glass-base-rgb) / calc(var(--glass-2-opacity) * var(--glass-adapt-surface-multiplier))
+  );
+
+  --glass-3-opacity: var(--glass-opacity-6);
+  --glass-3-surface: rgb(
+    var(--glass-base-rgb) / calc(var(--glass-3-opacity) * var(--glass-adapt-surface-multiplier))
+  );
+
+  --glass-4-opacity: var(--glass-opacity-8);
+  --glass-4-surface: rgb(
+    var(--glass-base-rgb) / calc(var(--glass-4-opacity) * var(--glass-adapt-surface-multiplier))
+  );
+
+  --glass-5-opacity: var(--glass-opacity-10);
+  --glass-5-surface: rgb(
+    var(--glass-base-rgb) / calc(var(--glass-5-opacity) * var(--glass-adapt-surface-multiplier))
+  );
+
+  color-scheme: dark;
+}
+
+/* ── 玻璃工具类 ────────────────────────────── */
+.glass-surface,
+.glass-1,
+.glass-2,
+.glass-3,
+.glass-4,
+.glass-5 {
+  border: 1px solid var(--glass-border);
+  border-top-color: var(--glass-refraction-top);
+  background-clip: padding-box;
+}
+
+.glass-surface,
+.glass-3 {
+  background: var(--glass-3-surface);
+  backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-3-blur));
+  -webkit-backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-3-blur));
+  box-shadow: var(--glass-3-shadow);
+}
+
+.glass-1 {
+  background: var(--glass-1-surface);
+  backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-1-blur));
+  -webkit-backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-1-blur));
+  box-shadow: var(--glass-1-shadow);
+}
+
+.glass-2 {
+  background: var(--glass-2-surface);
+  backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-2-blur));
+  -webkit-backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-2-blur));
+  box-shadow: var(--glass-2-shadow);
+}
+
+.glass-4 {
+  background: var(--glass-4-surface);
+  backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-4-blur));
+  -webkit-backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-4-blur));
+  box-shadow: var(--glass-4-shadow);
+}
+
+.glass-5 {
+  background: var(--glass-5-surface);
+  backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-5-blur));
+  -webkit-backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-5-blur));
+  box-shadow: var(--glass-5-shadow);
+}
+
+.glass-gpu-hint {
+  transform: var(--glass-gpu-transform);
+  backface-visibility: var(--glass-gpu-backface-visibility);
+  will-change: var(--glass-gpu-will-change);
+}
+
+.glass-heavy {
+  transform: var(--glass-gpu-transform);
+  backface-visibility: var(--glass-gpu-backface-visibility);
+  will-change: var(--glass-heavy-will-change);
+  contain: var(--glass-heavy-contain);
+}
+
+/* ── 背景亮度适配 ──────────────────────────── */
+.glass-adapt-neutral,
+[data-glass-luminance='neutral'] {
+  --glass-adapt-surface-multiplier: 1;
+  --glass-adapt-border-multiplier: 1;
+  --glass-adapt-refraction-multiplier: 1;
+  --glass-adapt-saturate-multiplier: 1;
+}
+
+.glass-adapt-bright,
+[data-glass-luminance='bright'] {
+  --glass-adapt-surface-multiplier: 1.16;
+  --glass-adapt-border-multiplier: 1.08;
+  --glass-adapt-refraction-multiplier: 1.14;
+  --glass-adapt-saturate-multiplier: 1.04;
+}
+
+.glass-adapt-dim,
+[data-glass-luminance='dim'] {
+  --glass-adapt-surface-multiplier: 0.9;
+  --glass-adapt-border-multiplier: 1.15;
+  --glass-adapt-refraction-multiplier: 1.22;
+  --glass-adapt-saturate-multiplier: 0.96;
+}
+
+/* ── 降低透明度偏好 ────────────────────────── */
+@media (prefers-reduced-transparency: reduce) {
+  :root {
+    --glass-1-surface: rgba(255, 255, 255, 0.92);
+    --glass-2-surface: rgba(255, 255, 255, 0.94);
+    --glass-3-surface: rgba(255, 255, 255, 0.95);
+    --glass-4-surface: rgba(255, 255, 255, 0.96);
+    --glass-5-surface: rgba(255, 255, 255, 0.98);
+  }
+
+  .dark {
+    --glass-1-surface: rgba(0, 0, 0, 0.88);
+    --glass-2-surface: rgba(0, 0, 0, 0.9);
+    --glass-3-surface: rgba(0, 0, 0, 0.92);
+    --glass-4-surface: rgba(0, 0, 0, 0.94);
+    --glass-5-surface: rgba(0, 0, 0, 0.96);
+  }
+
+  .glass-surface,
+  .glass-1,
+  .glass-2,
+  .glass-3,
+  .glass-4,
+  .glass-5 {
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+}
+
+/* ── Keyframes ─────────────────────────────── */
+
+@keyframes accordion-down {
+  from {
+    height: 0;
+  }
+
+  to {
+    height: var(--radix-accordion-content-height);
+  }
+}
+
+@keyframes accordion-up {
+  from {
+    height: var(--radix-accordion-content-height);
+  }
+
+  to {
+    height: 0;
+  }
+}
+
+@keyframes skeleton-shimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes border-beam {
+  0% {
+    offset-distance: 0%;
+  }
+
+  100% {
+    offset-distance: 100%;
+  }
+}
+
+@keyframes marquee-x {
+  0% {
+    transform: translateX(0);
+  }
+
+  100% {
+    transform: translateX(calc(-100% - var(--marquee-gap)));
+  }
+}
+
+@keyframes marquee-y {
+  0% {
+    transform: translateY(0);
+  }
+
+  100% {
+    transform: translateY(calc(-100% - var(--marquee-gap)));
+  }
+}
+
+@keyframes ripple-expand {
+  0% {
+    transform: scale(0.8);
+    opacity: 1;
+  }
+
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
+}
+
+@keyframes meteor-fall {
+  0% {
+    transform: rotate(var(--meteor-angle, 215deg)) translateX(0);
+    opacity: 1;
+  }
+
+  70% {
+    opacity: 1;
+  }
+
+  100% {
+    transform: rotate(var(--meteor-angle, 215deg)) translateX(600px);
+    opacity: 0;
+  }
+}
+
+@keyframes gradient-shift {
+  0% {
+    background-position: 0% 50%;
+  }
+
+  50% {
+    background-position: 100% 50%;
+  }
+
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+@keyframes pulsate-ring {
+  0% {
+    transform: scale(1);
+    opacity: 0.8;
+  }
+
+  100% {
+    transform: scale(1.5);
+    opacity: 0;
+  }
+}
+
+@keyframes retro-grid-scroll {
+  0% {
+    background-position: 0 0;
+  }
+
+  100% {
+    background-position: 0 var(--retro-grid-cell, 60px);
+  }
+}
+
+@keyframes orbit {
+  0% {
+    transform: rotate(calc(var(--orbit-start, 0) * 1deg))
+      translateY(calc(var(--orbit-radius, 100) * -1px)) rotate(calc(var(--orbit-start, 0) * -1deg));
+  }
+
+  100% {
+    transform: rotate(calc(var(--orbit-start, 0) * 1deg + 360deg))
+      translateY(calc(var(--orbit-radius, 100) * -1px))
+      rotate(calc(var(--orbit-start, 0) * -1deg - 360deg));
+  }
+}
+
+@keyframes glow-rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes word-rotate-in {
+  0% {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes word-rotate-out {
+  0% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+
+  100% {
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+}
+
+@keyframes blink {
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0;
+  }
+}
+
+@keyframes aurora-shift {
+  0% {
+    transform: translate(0, 0) rotate(0deg) scale(1);
+  }
+
+  33% {
+    transform: translate(30px, -50px) rotate(120deg) scale(1.1);
+  }
+
+  66% {
+    transform: translate(-20px, 20px) rotate(240deg) scale(0.9);
+  }
+
+  100% {
+    transform: translate(0, 0) rotate(360deg) scale(1);
+  }
+}
+
+@keyframes particle-float {
+  0% {
+    transform: translateY(0) translateX(0);
+    opacity: 0;
+  }
+
+  10% {
+    opacity: 1;
+  }
+
+  90% {
+    opacity: 1;
+  }
+
+  100% {
+    transform: translateY(var(--particle-distance, -200px)) translateX(var(--particle-drift, 20px));
+    opacity: 0;
+  }
+}
+
+@keyframes prism-rotate {
+  0% {
+    background-position: 0% 50%;
+  }
+
+  50% {
+    background-position: 100% 50%;
+  }
+
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+@keyframes chromatic-shift {
+  0% {
+    transform: translate(0, 0);
+  }
+
+  25% {
+    transform: translate(var(--chromatic-offset, 2px), calc(var(--chromatic-offset, 2px) * -1));
+  }
+
+  50% {
+    transform: translate(0, var(--chromatic-offset, 2px));
+  }
+
+  75% {
+    transform: translate(calc(var(--chromatic-offset, 2px) * -1), 0);
+  }
+
+  100% {
+    transform: translate(0, 0);
+  }
+}
+
+@keyframes morphing-indicator {
+  0% {
+    transform: scaleX(0.8);
+    opacity: 0.6;
+  }
+
+  100% {
+    transform: scaleX(1);
+    opacity: 1;
+  }
+}
+
+@keyframes dock-bounce {
+  0% {
+    transform: translateY(0);
+  }
+
+  50% {
+    transform: translateY(-6px);
+  }
+
+  100% {
+    transform: translateY(0);
+  }
+}
+
+@keyframes mesh-shift {
+  0% {
+    background-position: 0% 0%;
+  }
+
+  25% {
+    background-position: 100% 0%;
+  }
+
+  50% {
+    background-position: 100% 100%;
+  }
+
+  75% {
+    background-position: 0% 100%;
+  }
+
+  100% {
+    background-position: 0% 0%;
+  }
+}
+
+@keyframes ripple-press {
+  0% {
+    transform: translate(-50%, -50%) scale(0);
+    opacity: 0.5;
+  }
+
+  100% {
+    transform: translate(-50%, -50%) scale(4);
+    opacity: 0;
+  }
+}
+
+@keyframes liquid-fill {
+  0% {
+    transform: translateX(-100%);
+  }
+
+  100% {
+    transform: translateX(0);
+  }
+}
+
+@keyframes light-leak-drift {
+  0% {
+    transform: translate(-30%, -30%) rotate(0deg);
+    opacity: 0;
+  }
+
+  20% {
+    opacity: 1;
+  }
+
+  80% {
+    opacity: 1;
+  }
+
+  100% {
+    transform: translate(30%, 30%) rotate(45deg);
+    opacity: 0;
+  }
+}
+
+@keyframes reveal-wipe {
+  0% {
+    clip-path: inset(0 100% 0 0);
+  }
+
+  100% {
+    clip-path: inset(0 0 0 0);
+  }
+}
+
+@keyframes spotlight-pulse {
+  0% {
+    opacity: 0.6;
+    transform: scale(1);
+  }
+
+  50% {
+    opacity: 0.8;
+    transform: scale(1.05);
+  }
+
+  100% {
+    opacity: 0.6;
+    transform: scale(1);
+  }
+}
+
+/* ── 动画工具类（组件与特效复用）──────────── */
+.anim-accordion-down {
+  animation: accordion-down 200ms ease-out;
+}
+
+.anim-accordion-up {
+  animation: accordion-up 200ms ease-out;
+}
+
+.anim-border-beam {
+  animation: border-beam var(--border-beam-duration, 6s) linear infinite;
+}
+
+.anim-marquee-x {
+  animation: marquee-x var(--marquee-duration, 30s) linear infinite;
+}
+
+.anim-marquee-y {
+  animation: marquee-y var(--marquee-duration, 30s) linear infinite;
+}
+
+.anim-ripple-expand {
+  animation: ripple-expand var(--ripple-duration, 2s) ease-out infinite;
+}
+
+.anim-meteor-fall {
+  animation: meteor-fall var(--meteor-duration, 3s) linear infinite;
+}
+
+.anim-gradient-shift {
+  animation: gradient-shift var(--gradient-duration, 6s) ease infinite;
+}
+
+.anim-pulsate-ring {
+  animation: pulsate-ring var(--pulsate-duration, 2s) ease-out infinite;
+}
+
+.anim-retro-grid-scroll {
+  animation: retro-grid-scroll var(--retro-grid-duration, 10s) linear infinite;
+}
+
+.anim-orbit {
+  animation: orbit var(--orbit-duration, 20s) linear infinite;
+}
+
+.anim-glow-rotate {
+  animation: glow-rotate var(--glow-duration, 4s) linear infinite;
+}
+
+.anim-word-rotate-in {
+  animation: word-rotate-in var(--word-rotate-duration, 0.3s) ease-out forwards;
+}
+
+.anim-word-rotate-out {
+  animation: word-rotate-out var(--word-rotate-duration, 0.3s) ease-out forwards;
+}
+
+.anim-blink {
+  animation: blink 1s step-end infinite;
+}
+
+.anim-aurora-shift {
+  animation: aurora-shift var(--aurora-duration, 8s) ease-in-out infinite;
+}
+
+.anim-particle-float {
+  animation: particle-float var(--particle-duration, 5s) ease-out infinite;
+}
+
+.anim-prism-rotate {
+  animation: prism-rotate var(--prism-duration, 3s) linear infinite;
+}
+
+.anim-chromatic-shift {
+  animation: chromatic-shift var(--chromatic-duration, 4s) ease-in-out infinite;
+}
+
+.anim-morphing-indicator {
+  animation: morphing-indicator 0.2s ease-out;
+}
+
+.anim-dock-bounce {
+  animation: dock-bounce 0.4s ease-out;
+}
+
+.anim-mesh-shift {
+  animation: mesh-shift var(--mesh-duration, 10s) ease-in-out infinite;
+}
+
+.anim-ripple-press {
+  animation: ripple-press 0.6s ease-out forwards;
+}
+
+.anim-liquid-fill {
+  animation: liquid-fill 0.3s ease-out forwards;
+}
+
+.anim-light-leak-drift {
+  animation: light-leak-drift var(--light-leak-duration, 6s) ease-in-out infinite;
+}
+
+.anim-reveal-wipe {
+  animation: reveal-wipe var(--reveal-duration, 0.8s) ease-out forwards;
+}
+
+.anim-skeleton-shimmer {
+  animation: skeleton-shimmer 2s ease-in-out infinite;
+}
+
+.anim-spotlight-pulse {
+  animation: spotlight-pulse var(--spotlight-pulse-duration, 3s) ease-in-out infinite;
+}
+
+/* ── 降低动效偏好 ──────────────────────────── */
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --motion-fast: 1ms;
+    --motion-normal: 1ms;
+    --motion-slow: 1ms;
+    --motion-spring: 1ms;
+  }
+}
+
+/* ── 对话框系 keyframes（modal/sheet/alert-dialog/command 共用）── */
+
+@keyframes dialog-overlay-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes dialog-overlay-out {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes dialog-content-in {
+  from {
+    opacity: 0;
+    transform: translate(-50%, calc(-50% + 12px)) scale(0.95);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+@keyframes dialog-content-out {
+  from {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+
+  to {
+    opacity: 0;
+    transform: translate(-50%, calc(-50% + 8px)) scale(0.98);
+  }
+}
+
+@keyframes dialog-pop-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes dialog-pop-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  to {
+    opacity: 0;
+    transform: scale(0.98);
+  }
+}
+
+@keyframes dialog-slide-in-top {
+  from {
+    transform: translateY(-100%);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes dialog-slide-out-top {
+  from {
+    transform: translateY(0);
+  }
+
+  to {
+    transform: translateY(-100%);
+  }
+}
+
+@keyframes dialog-slide-in-right {
+  from {
+    transform: translateX(100%);
+  }
+
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes dialog-slide-out-right {
+  from {
+    transform: translateX(0);
+  }
+
+  to {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes dialog-slide-in-bottom {
+  from {
+    transform: translateY(100%);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes dialog-slide-out-bottom {
+  from {
+    transform: translateY(0);
+  }
+
+  to {
+    transform: translateY(100%);
+  }
+}
+
+@keyframes dialog-slide-in-left {
+  from {
+    transform: translateX(-100%);
+  }
+
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes dialog-slide-out-left {
+  from {
+    transform: translateX(0);
+  }
+
+  to {
+    transform: translateX(-100%);
+  }
+}

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@longzai-intelligence-liquid-glass/tokens",
+  "version": "0.0.1",
+  "description": "Liquid Glass 设计令牌：玻璃海拔分级、光学色彩与动效令牌（纯 CSS，衍生自 glinui，MIT）",
+  "license": "UNLICENSED",
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "scripts": {
+    "build": "lzi-builder",
+    "build:prod": "NODE_ENV=production bun run build",
+    "prepublishOnly": "bun run build:prod",
+    "typecheck": "bun run typecheck:app && bun run typecheck:node && bun run typecheck:test",
+    "typecheck:app": "lzi-tsgo typecheck tsconfig/app.json",
+    "typecheck:node": "lzi-tsgo typecheck tsconfig/node.json",
+    "typecheck:test": "lzi-tsgo typecheck tsconfig/test.json",
+    "lint": "oxlint && oxfmt --check",
+    "lint:fix": "oxlint --fix && oxfmt",
+    "test": "lzi-bun-cli test",
+    "test:watch": "lzi-bun-cli test --watch",
+    "test:coverage": "lzi-bun-cli test --coverage",
+    "clean": "lzi-dev-cli clean"
+  },
+  "dependencies": {},
+  "packageManager": "bun@1.3.14"
+}