/* ══════════════════════════════════════════════════════════════════ 悟垣设计系统 · 组件层 —— 照抄自《悟垣设计系统手册 v1.9》, 一个字没改。依赖 wutrix-tokens.css, 自身不写死任何色值字面量。本仓库当前还在用自己那套按钮/卡片样式(base.html 里), 这份是**新代码的去处** —— 以后要加控件先看这里有没有, 不要再造一个。两件事现在就在生效, 别当它是纯装饰: · .is-story / .wx-tinted —— base.html 的上挂着, 身份色和 4% 着色底靠这两个类落地。 · 末尾那个全局 prefers-reduced-motion 压制块 —— 全站的减弱动效实现。按选择器一个个关 animation 是不够的, transition 会照跑。 ══════════════════════════════════════════════════════════════════ */ /* 悟垣组件层 v0.1（第二章 · 待拍板三项后转正）依赖 brand/tokens.css，自身不写死任何色值字面量。两个仓库共用：wutrix-internal（官网）与 wutrixstudio（产品）。三条贯穿规则： 1. 行动色恒为品牌金，不随产品线变 —— 识别色说「你在哪」，金色说「点这里」。 2. 身份色只表「属于哪条线」，绝不表状态；状态一律走语义色。 3. 成象的紫 #7C5CFC 深底对比 4.44，不过 AA 正文 —— 文字用 --wx-studio-text。 */ :root{ /* 产品线身份色的运行时插槽。在页面根或容器上覆盖这三个即可整体换线。 */ --wx-pc: var(--wx-flow); --wx-pc-text: var(--wx-flow); /* 文字专用，studio 需指向 lt 档 */ --wx-pc-soft: rgba(63,178,192,.14); --wx-pc-line: rgba(63,178,192,.30); /* 密度。两档，只换这四个值。这四个值**故意不在 4px 栅格上**（10/18、7/13）。控件的内部留白是光学的：按钮左右要比上下松、药丸比方块要松，硬拉到 4 的倍数按钮会变木。栅格管的是页面级布局，不管控件内部 —— 详见第三章「栅格管到哪为止」。它们收在这四个变量里正是为了别散落成一地字面量；要调就调这里。 */ --wx-d-pad: 10px 18px; --wx-d-fs: var(--wx-fs-base); /* 14px —— 接阶梯，不写字面量 */ --wx-d-gap: 11px; --wx-d-cell: 12px; } /* 紧凑档原本写的是 12.5px —— 它既不在阶梯上，又和第三章「半像素值一律取消」直接打架。阶梯补了 13px 这一档之后，这里接过去。 */ .wx-compact{ --wx-d-pad:7px 13px; --wx-d-fs:var(--wx-fs-compact); --wx-d-gap:7px; --wx-d-cell:8px; } .is-story { --wx-pc:var(--wx-story); --wx-pc-text:var(--wx-story); --wx-pc-soft:rgba(240,112,60,.14); --wx-pc-line:rgba(240,112,60,.30); } .is-studio{ --wx-pc:var(--wx-studio); --wx-pc-text:var(--wx-studio-text); /* ← 不过 AA，必须走 lt */ --wx-pc-soft:rgba(124,92,252,.14); --wx-pc-line:rgba(124,92,252,.30); } .is-flow { --wx-pc:var(--wx-flow); --wx-pc-text:var(--wx-flow); --wx-pc-soft:rgba(63,178,192,.14); --wx-pc-line:rgba(63,178,192,.30); } .is-color { --wx-pc:var(--wx-color); --wx-pc-text:var(--wx-color); --wx-pc-soft:rgba(232,93,158,.14); --wx-pc-line:rgba(232,93,158,.30); } /* 着色底 · 4%（已定）—— 只在单个产品自己的应用外壳上加，跨产品语境不要加。与 .is-* 叠加使用：基准已定 N3，色值由 tokens.css 的 --wx-{ink,surface,card,border}-{line} 提供。 */ .wx-tinted.is-story { --wx-ink:var(--wx-ink-story); --wx-surface:var(--wx-surface-story); --wx-card:var(--wx-card-story); --wx-border:var(--wx-border-story); } .wx-tinted.is-studio{ --wx-ink:var(--wx-ink-studio); --wx-surface:var(--wx-surface-studio); --wx-card:var(--wx-card-studio);--wx-border:var(--wx-border-studio); } .wx-tinted.is-flow { --wx-ink:var(--wx-ink-flow); --wx-surface:var(--wx-surface-flow); --wx-card:var(--wx-card-flow); --wx-border:var(--wx-border-flow); } .wx-tinted.is-color { --wx-ink:var(--wx-ink-color); --wx-surface:var(--wx-surface-color); --wx-card:var(--wx-card-color); --wx-border:var(--wx-border-color); } /* ── 按钮 ─────────────────────────────────── */ .wx-btn{ font:inherit; font-size:var(--wx-d-fs); font-weight:600; line-height:1.3; border:1px solid transparent; border-radius:var(--wx-radius-sm); padding:var(--wx-d-pad); cursor:pointer; display:inline-flex; align-items:center; gap:7px; transition:filter var(--wx-dur-fast) var(--wx-ease), background var(--wx-dur-fast) var(--wx-ease); } .wx-btn:focus-visible{ outline:2px solid var(--wx-gold); outline-offset:2px; } .wx-btn[disabled]{ opacity:.45; cursor:not-allowed; } /* 主行动 —— 每屏至多一个，恒为金。 **谁是主行动由上下文决定，不是钉死在某个按钮上。** 成象画布里余额充足时是「生成」；余额为零时生成不可用，--wx-btn--action 整个移到「充值」上。任何一屏只有一个金按钮，用户才不用停下来想该点哪个。 */ .wx-btn--action{ background:linear-gradient(100deg,var(--wx-gold-dk),var(--wx-gold-lt)); color:#1C1303; box-shadow:0 10px 30px -12px rgba(var(--wx-gold-rgb),.5); } .wx-btn--action:hover{ filter:brightness(1.06); } /* 次级 —— 走当前产品线身份色 */ .wx-btn--accent{ background:var(--wx-pc); color:#fff; } .wx-btn--ghost { background:transparent; border-color:var(--wx-border); color:var(--wx-paper-soft); } .wx-btn--ghost:hover{ background:var(--wx-card-soft); } /* 不要写 transition: all —— 见第四章 */ .wx-btn--danger{ background:transparent; border-color:rgba(210,107,107,.4); color:var(--wx-danger); } /* 不可用 —— 与 [disabled] 配合。降透明还不够：余额不足时的「生成」必须明确不是金，否则它还在喊"点我"。 */ .wx-btn--off{ background:var(--wx-card-soft); border-color:var(--wx-border-soft); color:var(--wx-muted); box-shadow:none; cursor:not-allowed; } /* 进行中 —— 任务已经在跑，它就不再是"点这里"了，必须退出金色，否则它会一直在喊。底走中性，进度走 --wx-busy。 **更正**：这里原本写的是进度走产品识别色（--wx-pc），理由是"紫说的是成象在干活"。那条是错的，而且违反本文件开头第 2 条自己的规矩：身份色只表「属于哪条线」，绝不表状态。「还在跑」是状态。拿产品色画它，天枢的进度是青、分光的是品红 —— 同一个状态在四条线里长四个样。成象仓先发现了这个洞（它那边是被 Tailwind blue-400 抄了四处逼出来的），第五档语义色 --wx-busy 就是为这个补的。 */ .wx-btn--busy{ background:var(--wx-card-soft); border-color:var(--wx-border); color:var(--wx-paper); box-shadow:none; cursor:default; position:relative; overflow:hidden; } .wx-btn--busy .wx-btn__bar{ position:absolute; left:0; bottom:0; height:2px; background:var(--wx-busy); width:var(--wx-progress,0%); transition:width var(--wx-dur-base) var(--wx-ease); } /* 成本角标 —— 挂在按钮里，让"这一下花多少"在按下之前就看得见。继承按钮的字色再降透明，不另取色：它是同一个行动的一部分，不是第二条信息。 */ .wx-btn__cost{ font-family:var(--wx-font-mono); font-size:var(--wx-fs-xs); font-weight:500; opacity:.66; display:inline-flex; align-items:center; gap:3px; font-variant-numeric:tabular-nums; } .wx-btn__cost svg{ width:1em; height:1em; } /* ── 额度读数 ─────────────────────────────── 余额是**数据**，不是行动也不是位置 —— 所以走中性墨 + mono，正常态不着色。只有状态变化才上色，这样 warn 出现时是一次真的从中性变暖。 **绝对不要把余额做成品牌金。** 金对 --wx-warn 色相只差 1°、ΔE 7.2：余额平时就是金的话，「余额不足」转 warn 时什么都没发生，整个额度流程里最该被看见的那次状态变化被吃掉。金对浅底还只有 1.70:1，浅色主题下余额数字直接看不见。 */ .wx-credit{ font-family:var(--wx-font-mono); font-variant-numeric:tabular-nums; color:var(--wx-paper); display:inline-flex; align-items:center; gap:5px; } .wx-credit svg{ width:1em; height:1em; flex:none; color:var(--wx-muted); } .wx-credit--low { color:var(--wx-warn); } .wx-credit--empty{ color:var(--wx-danger); } .wx-credit--low svg, .wx-credit--empty svg{ color:currentColor; } /* 余量条 —— 与读数同步变色 */ .wx-credit-bar{ height:4px; border-radius:2px; background:var(--wx-border-soft); overflow:hidden; } .wx-credit-bar i{ display:block; height:100%; border-radius:2px; background:var(--wx-paper-soft); width:var(--wx-credit-left,0%); transition:width var(--wx-dur-base) var(--wx-ease); } .wx-credit-bar--low i { background:var(--wx-warn); } .wx-credit-bar--empty i{ background:var(--wx-danger); } /* ── 输入 ─────────────────────────────────── */ .wx-field{ display:flex; flex-direction:column; gap:6px; } .wx-field > label{ font-size:var(--wx-fs-sm); color:var(--wx-muted); } .wx-input{ background:var(--wx-card-soft); border:1px solid var(--wx-border); border-radius:var(--wx-radius-sm); padding:var(--wx-d-pad); color:var(--wx-paper); font:inherit; font-size:var(--wx-d-fs); width:100%; } .wx-input:focus{ outline:none; border-color:var(--wx-pc); box-shadow:0 0 0 3px var(--wx-pc-soft); } .wx-input::placeholder{ color:var(--wx-muted); opacity:.75; } /* ── 标签 ─────────────────────────────────── */ .wx-chip{ display:inline-flex; align-items:center; gap:5px; font-size:var(--wx-fs-sm); font-weight:500; padding:3px 9px; border-radius:var(--wx-radius-sm); border:1px solid transparent; } .wx-chip--id { background:var(--wx-pc-soft); color:var(--wx-pc-text); border-color:var(--wx-pc-line); } .wx-chip--ok { background:rgba(95,191,143,.12); color:#7FD3AB; border-color:rgba(95,191,143,.24); } .wx-chip--warn { background:rgba(224,163,64,.12); color:#E8B665; border-color:rgba(224,163,64,.24); } .wx-chip--danger{ background:rgba(210,107,107,.12); color:#E08D8D; border-color:rgba(210,107,107,.26); } .wx-chip--mute { background:var(--wx-card-soft); color:var(--wx-muted); border-color:var(--wx-border-soft); } /* ── 步骤条 ───────────────────────────────── */ .wx-steps{ display:flex; border-bottom:1px solid var(--wx-border-soft); overflow-x:auto; } /* 左右 20px 在栅格上，照常引 token；上下 11/13 不等是光学值 —— 下边有 2px 选中条，上下各让一点才看着居中，拉到 12/12 反而偏。混着写不好看，但它是准确的。 */ .wx-step{ padding:11px var(--wx-s5) 13px; border-bottom:2px solid transparent; white-space:nowrap; display:flex; flex-direction:column; gap:2px; cursor:pointer; } .wx-step__n{ font-family:var(--wx-font-mono); font-size:var(--wx-fs-xs); letter-spacing:.1em; color:var(--wx-muted); } .wx-step__t{ font-size:var(--wx-fs-compact); color:var(--wx-muted); } .wx-step[aria-current]{ border-bottom-color:var(--wx-pc); } .wx-step[aria-current] .wx-step__t{ color:var(--wx-paper); font-weight:600; } .wx-step[aria-current] .wx-step__n{ color:var(--wx-pc-text); } /* ── 统计行 ───────────────────────────────── */ .wx-stats{ display:flex; border:1px solid var(--wx-border-soft); border-radius:var(--wx-radius); overflow:hidden; } .wx-stat{ flex:1; padding:13px 17px; border-right:1px solid var(--wx-border-soft); min-width:110px; } .wx-stat:last-child{ border-right:0; } .wx-stat__v{ font-size:var(--wx-fs-xl); font-weight:600; line-height:1.1; font-variant-numeric:tabular-nums; } .wx-stat__k{ font-size:var(--wx-fs-sm); color:var(--wx-muted); margin-top:3px; } /* ── 卡片 / 表格 / 空状态 ─────────────────── */ .wx-card{ background:var(--wx-card-soft); border:1px solid var(--wx-border-soft); border-radius:var(--wx-radius); padding:15px 17px; box-shadow:inset 0 1px 0 0 rgba(255,255,255,.045), 0 1px 2px rgba(0,0,0,.4); } .wx-table{ width:100%; border-collapse:collapse; font-size:var(--wx-d-fs); color:var(--wx-paper-soft); } .wx-table th,.wx-table td{ text-align:left; padding:var(--wx-d-cell) var(--wx-s4) var(--wx-d-cell) 0; border-bottom:1px solid var(--wx-border-soft); } .wx-table th{ color:var(--wx-muted); font-weight:400; } .wx-table td:has(.wx-num),.wx-num{ font-variant-numeric:tabular-nums; } .wx-empty{ text-align:center; padding:var(--wx-s8) var(--wx-s5); border:1px dashed var(--wx-border); border-radius:var(--wx-radius); } @media (prefers-reduced-motion:reduce){ *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } }