初始化提交
This commit is contained in:
chenxin committed
commit
887c1f449e
963 files changed
+166869
No files matched your search
@@ -0,0 +1,199 @@
|
||||
/* ============================================================
|
||||
* design/tokens.css — 铜镜鉴心设计 token（原型层单一事实源）
|
||||
* ============================================================
|
||||
*
|
||||
* 用途：供 design/*.html 原型 <link> 引用，消除此前每个原型
|
||||
* 各存一份 :root 副本、且已开始漂移（如 --patina-wash
|
||||
* 在 card-import / lorebook 误写为 0.07）的问题。
|
||||
*
|
||||
* 源：色值与 src/styles/globals.css 的「铜镜鉴心」主题同源
|
||||
* （globals.css 暗色见 .dark 块、亮色见 :root 块）。
|
||||
* 改 token 时请同步两边；本文件头部「与生产侧差异」段
|
||||
* 列出有意不同的变量。
|
||||
*
|
||||
* 主题切换：原型沿用 [data-theme="dark|light"] 属性切换，
|
||||
* 默认 :root 走暗色（暗色优先）。
|
||||
*
|
||||
* 与生产侧（globals.css）的有意差异：
|
||||
* --surface / --surface-hi
|
||||
* 原型用「半透明玻璃叠加层」语义（rgba），配合 body::before
|
||||
* 极光底产生镜面通透感；生产侧 globals.css 演进为「实色面板」
|
||||
* 语义（#121817 / 实色），利于渲染可预测性。两层各持一套，
|
||||
* 不强行统一——若要原型对齐生产实色，替换这两个变量即可。
|
||||
*
|
||||
* 色值命名：描述名 (hex) — 功能角色（per finesse design-dna §1）
|
||||
* ============================================================ */
|
||||
|
||||
/* ============================================================
|
||||
* 动画 token（过渡时长与缓动，统一全站节奏）
|
||||
* ============================================================ */
|
||||
:root {
|
||||
--duration-fast: 0.12s;
|
||||
--duration-normal: 0.18s;
|
||||
--duration-slow: 0.28s;
|
||||
--ease-out: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
:root,
|
||||
[data-theme="dark"] {
|
||||
color-scheme: dark;
|
||||
|
||||
/* ── 底色族 ── */
|
||||
--ink: #0c0e0d; /* 墨 — 暗底、道体深处 */
|
||||
--night-bronze: #14110d; /* 夜铜 — 暗面，带铜温 */
|
||||
|
||||
/* ── 玻璃面（半透明叠加；与生产实色面板语义不同，见头部说明）── */
|
||||
--surface: rgba(255, 255, 255, 0.022);
|
||||
--surface-hi: rgba(255, 255, 255, 0.045);
|
||||
|
||||
/* ── 鎏金 — 结构 / 发丝线 / 标签 ── */
|
||||
--gilt: #c9a24a;
|
||||
--gilt-dim: rgba(201, 162, 74, 0.32);
|
||||
--gilt-faint: rgba(201, 162, 74, 0.14);
|
||||
|
||||
/* ── 铜绿锈 — 主色：在场 / 活跃 / 健康 / 记忆 ── */
|
||||
--patina: #6fa389;
|
||||
--patina-bright: #84bb9d;
|
||||
--patina-dim: rgba(111, 163, 137, 0.34);
|
||||
--patina-wash: rgba(
|
||||
111,
|
||||
163,
|
||||
137,
|
||||
0.06
|
||||
); /* verdigris 底色晕，把暗底拉向铜绿 */
|
||||
|
||||
/* ── 朱漆 — 仅司命 / 朱批 / 告警（全站唯一热色，克制使用）── */
|
||||
--cinnabar: #b8392e;
|
||||
--cinnabar-dim: rgba(184, 57, 46, 0.4);
|
||||
--cinnabar-wash: rgba(184, 57, 46, 0.15);
|
||||
|
||||
/* ── 文字与发丝线 ── */
|
||||
--fg: #e7e1d2;
|
||||
--fg-dim: #9b958a;
|
||||
--fg-faint: #5e5a52;
|
||||
--rule: rgba(201, 162, 74, 0.16);
|
||||
|
||||
/* ── 镜面光照（复合值，组件内联引用）── */
|
||||
--face-sheen: linear-gradient(
|
||||
165deg,
|
||||
rgba(255, 255, 255, 0.09),
|
||||
rgba(255, 255, 255, 0.02) 42%,
|
||||
rgba(0, 0, 0, 0.18)
|
||||
);
|
||||
--face-in-top: rgba(255, 255, 255, 0.11);
|
||||
--face-in-bot: rgba(0, 0, 0, 0.3);
|
||||
--shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
|
||||
|
||||
/* ── 通用扩展（次要文字 / 玻璃 / 悬停 / 光扫）—— 取自 globals.css ── */
|
||||
--muted: #8a9389;
|
||||
--glass: rgba(255, 255, 255, 0.045);
|
||||
--glass-strong: rgba(255, 255, 255, 0.08);
|
||||
--glass-border: rgba(255, 255, 255, 0.1);
|
||||
--overlay-hover: rgba(255, 255, 255, 0.05);
|
||||
--overlay-active: rgba(255, 255, 255, 0.1);
|
||||
--overlay-light: rgba(255, 255, 255, 0.03);
|
||||
--sweep-gradient: linear-gradient(
|
||||
130deg,
|
||||
transparent 0%,
|
||||
transparent 28%,
|
||||
rgba(201, 162, 74, 0.025) 34%,
|
||||
rgba(255, 255, 255, 0.06) 40%,
|
||||
rgba(201, 162, 74, 0.025) 48%,
|
||||
transparent 55%,
|
||||
transparent 100%
|
||||
);
|
||||
|
||||
/* ── 扩展色板：五行（wuxing）· 玄武 slate（cosmos）· API 标签 blue（admin）── */
|
||||
--wood: #6fa389;
|
||||
--wood-dim: rgba(111, 163, 137, 0.34);
|
||||
--fire: #b8392e;
|
||||
--fire-dim: rgba(184, 57, 46, 0.38);
|
||||
--earth: #b08a3c;
|
||||
--earth-dim: rgba(176, 138, 60, 0.36);
|
||||
--metal: #c9a24a;
|
||||
--metal-dim: rgba(201, 162, 74, 0.34);
|
||||
--water: #5a7fa6;
|
||||
--water-dim: rgba(90, 127, 166, 0.38);
|
||||
--blue: #5b8ab5;
|
||||
--blue-dim: rgba(91, 138, 181, 0.3);
|
||||
--blue-wash: rgba(91, 138, 181, 0.08);
|
||||
--slate: #6b7785;
|
||||
--slate-dim: rgba(107, 119, 133, 0.4);
|
||||
--slate-wash: rgba(107, 119, 133, 0.08);
|
||||
}
|
||||
|
||||
[data-theme="light"] {
|
||||
color-scheme: light;
|
||||
|
||||
/* ── 底色族（素绢暖纸）── */
|
||||
--ink: #e7e1d0;
|
||||
--night-bronze: #ddd4c0;
|
||||
|
||||
--surface: rgba(255, 255, 255, 0.5);
|
||||
--surface-hi: rgba(255, 255, 255, 0.74);
|
||||
|
||||
--gilt: #8a6d28;
|
||||
--gilt-dim: rgba(138, 109, 40, 0.36);
|
||||
--gilt-faint: rgba(138, 109, 40, 0.16);
|
||||
|
||||
--patina: #3f7d68;
|
||||
--patina-bright: #2f6450;
|
||||
--patina-dim: rgba(63, 125, 104, 0.3);
|
||||
--patina-wash: rgba(63, 125, 104, 0.05);
|
||||
|
||||
--cinnabar: #a8342a;
|
||||
--cinnabar-dim: rgba(168, 52, 42, 0.4);
|
||||
--cinnabar-wash: rgba(168, 52, 42, 0.1);
|
||||
|
||||
--fg: #211d16;
|
||||
--fg-dim: #5f594d;
|
||||
--fg-faint: #948f82;
|
||||
--rule: rgba(138, 109, 40, 0.22);
|
||||
|
||||
--face-sheen: linear-gradient(
|
||||
165deg,
|
||||
rgba(255, 255, 255, 0.7),
|
||||
rgba(255, 255, 255, 0.34) 42%,
|
||||
rgba(120, 105, 75, 0.08)
|
||||
);
|
||||
--face-in-top: rgba(255, 255, 255, 0.7);
|
||||
--face-in-bot: rgba(120, 100, 60, 0.1);
|
||||
--shadow: 0 1px 2px rgba(60, 50, 30, 0.08);
|
||||
|
||||
/* ── 通用扩展（亮色）── */
|
||||
--muted: #6b746e;
|
||||
--glass: rgba(255, 255, 255, 0.55);
|
||||
--glass-strong: rgba(255, 255, 255, 0.72);
|
||||
--glass-border: rgba(30, 40, 33, 0.1);
|
||||
--overlay-hover: rgba(0, 0, 0, 0.04);
|
||||
--overlay-active: rgba(0, 0, 0, 0.08);
|
||||
--overlay-light: rgba(255, 255, 255, 0.08);
|
||||
--sweep-gradient: linear-gradient(
|
||||
130deg,
|
||||
transparent 0%,
|
||||
transparent 24%,
|
||||
rgba(200, 170, 130, 0.06) 30%,
|
||||
rgba(255, 248, 235, 0.18) 36%,
|
||||
rgba(200, 170, 130, 0.1) 44%,
|
||||
transparent 52%,
|
||||
transparent 100%
|
||||
);
|
||||
|
||||
/* ── 扩展色板（亮色）── */
|
||||
--wood: #3f7d68;
|
||||
--wood-dim: rgba(63, 125, 104, 0.3);
|
||||
--fire: #a8342a;
|
||||
--fire-dim: rgba(168, 52, 42, 0.36);
|
||||
--earth: #8a6d28;
|
||||
--earth-dim: rgba(138, 109, 40, 0.32);
|
||||
--metal: #8a6d28;
|
||||
--metal-dim: rgba(138, 109, 40, 0.32);
|
||||
--water: #3a5a7a;
|
||||
--water-dim: rgba(58, 90, 122, 0.34);
|
||||
--blue: #3f72a5;
|
||||
--blue-dim: rgba(63, 114, 165, 0.3);
|
||||
--blue-wash: rgba(63, 114, 165, 0.08);
|
||||
--slate: #5b6470;
|
||||
--slate-dim: rgba(91, 100, 112, 0.38);
|
||||
--slate-wash: rgba(91, 100, 112, 0.08);
|
||||
}
|
||||
Reference in new issue
Block a user