/* ============================================================================ * doudou.css —— 「窦窦 API」New API 原生页面全站换肤 * * 机制：nginx sub_filter 在前注入本文件（DESIGN_SPEC §4.7）。 * 不改 New API 源码、不 fork 镜像、不动 DOM 结构与排版。 * * 覆盖目标来自源码实读，不猜： * web/src/styles/theme.css —— :root / .dark 的 shadcn 语义 token * web/src/styles/theme-presets.css —— [data-theme-preset|radius|font|scale] * web/src/styles/index.css —— @layer base/components/utilities * web/src/components/ui/*.tsx —— data-slot 组件级钩子 * 取值来自 frontend/tailwind.config.ts 与 src/app/globals.css（DESIGN_SPEC §2.1）， * 未自创任何颜色。 * * 级联说明（为什么几乎不需要 !important）： * New API 构建产物把样式放进 @layer properties/theme/base/components/utilities， * 本文件是「无层」样式，按 CSS Cascade Layers 规范无层永远压过任何层， * 因此普通选择器即可生效。 * 全文件 !important 数量：**1**——只在 §5.14b，因为对方把那层渐变光晕写在 * style 属性里，内联样式压不过；已在该处逐条注明原因。 * ==========================================================================*/ /* --------------------------------------------------------------------------- * 1. 字体（§2.2）—— 自托管 Inter / JetBrains Mono，与我们的 Next.js 前端同源 * （字体文件取自 frontend 的 next/font 自托管构建产物，未新增外部依赖， * 页面不向 fonts.googleapis.com 发任何请求） * 只带 latin 子集；latin-ext 与中日韩由 PingFang SC / Noto Sans SC 栈兜底。 * -------------------------------------------------------------------------*/ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/theme/fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap; src: url('/theme/fonts/jetbrains-mono-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* --------------------------------------------------------------------------- * 2. 窦窦设计 token（§2.1，逐项抄自 frontend/tailwind.config.ts 的 colors） * 统一加 --dd- 前缀，避免与 New API 的同名变量（--accent、--border…）打架。 * -------------------------------------------------------------------------*/ :root { --dd-bg: #ffffff; --dd-surface: #f7f7fa; --dd-surface-2: #efeff5; --dd-border: #e4e4ec; --dd-ink: #1e1e2a; --dd-ink-2: #585878; --dd-ink-3: #9494aa; --dd-accent: #4f5bd5; --dd-accent-hover: #3f4ab8; --dd-accent-tint: #edeffb; --dd-star: #f2c94c; --dd-skin: #f8e8d8; --dd-ok: #2e9e6b; --dd-warn: #e0a526; --dd-err: #d64545; --dd-font-sans: 'Inter', 'PingFang SC', 'Noto Sans SC', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --dd-font-mono: 'JetBrains Mono', Menlo, Consolas, 'Liberation Mono', monospace; /* §2.3 阴影：默认无，hover 允许这一档 */ --dd-shadow-hover: 0 2px 8px rgba(31, 36, 33, 0.06); /* §2.4 hover 150ms ease-out */ --dd-dur: 150ms; } /* --------------------------------------------------------------------------- * 3. 把窦窦 token 灌进 New API 的语义变量 * * 特异性说明：New API 的主题轴（配色预设、圆角档、字体、密度）全写在 * 的 data-* 属性上，最高一条是 * `.dark [data-theme-preset]:not(…):not(…):not(…)` = (0,5,0)； * 而自定义属性按「就近祖先」生效——写在 html 上的 :root 管不到 body 子树。 * 所以两条选择器分工： * :root —— 覆盖 html 自身，以及挂到的 portal 节点 * body:not(:root)×5 —— body 永远不是根元素，:not(:root) 恒真， * 所以这条永远命中 body；5 个伪类把特异性抬到 (0,5,1)， * 压过上面那条 (0,5,0)，也压过 [data-theme-radius='lg'] 这类 (0,1,0)。 * 即「用户在 UI 里切了任何主题轴，窦窦配色与圆角依然生效」。 * -------------------------------------------------------------------------*/ :root, body:not(:root):not(:root):not(:root):not(:root):not(:root) { /* —— 底与面（§2.1：白 ≥70%） —— */ --background: var(--dd-bg); --foreground: var(--dd-ink); --card: var(--dd-bg); --card-foreground: var(--dd-ink); --popover: var(--dd-bg); --popover-foreground: var(--dd-ink); --secondary: var(--dd-surface-2); --secondary-foreground: var(--dd-ink-2); --muted: var(--dd-surface); --muted-foreground: var(--dd-ink-2); /* —— 主色 / 强调 —— ⚠ 语义错位，不能望名对齐：New API 的 --primary 才是「主色」，它的 --accent 是「浅色强调底」。所以 accent→primary、accent-tint→accent。 */ --primary: var(--dd-accent); --primary-foreground: var(--dd-bg); --accent: var(--dd-accent-tint); --accent-foreground: var(--dd-accent-hover); /* —— 语义色 —— */ --destructive: var(--dd-err); --destructive-foreground: var(--dd-bg); --success: var(--dd-ok); --success-foreground: var(--dd-bg); --warning: var(--dd-warn); --warning-foreground: var(--dd-ink); --info: var(--dd-accent); --info-foreground: var(--dd-bg); --neutral: var(--dd-ink-3); --neutral-foreground: var(--dd-ink); /* —— 描边与焦点（§2.3：1px border 代替阴影） —— */ --border: var(--dd-border); --input: var(--dd-border); --ring: var(--dd-accent); /* —— 图表：一个主色 + 灰阶 + 两个语义色，不出彩虹（§2.1） —— */ --chart-1: var(--dd-accent); --chart-2: var(--dd-ink-2); --chart-3: var(--dd-ink-3); --chart-4: var(--dd-ok); --chart-5: var(--dd-warn); --overview-accent-1: var(--dd-accent); --overview-accent-2: var(--dd-ink-2); --overview-accent-3: var(--dd-ink-3); /* —— 侧边栏（§2.1：导航用 surface） —— */ --sidebar: var(--dd-surface); --sidebar-foreground: var(--dd-ink); --sidebar-primary: var(--dd-accent); --sidebar-primary-foreground: var(--dd-bg); --sidebar-accent: var(--dd-accent-tint); --sidebar-accent-foreground: var(--dd-accent-hover); --sidebar-border: var(--dd-border); --sidebar-ring: var(--dd-accent); /* —— 骨架屏 —— */ --skeleton-base: var(--dd-surface-2); --skeleton-highlight: var(--dd-surface); /* —— 表格 —— */ --table-row: var(--dd-bg); --table-header: var(--dd-surface); --table-header-hover: var(--dd-surface-2); --table-disabled: var(--dd-surface); --table-disabled-hover: var(--dd-surface-2); --table-disabled-border: var(--dd-border); /* —— 圆角（§2.3）—— New API 的 @theme inline 把 rounded-* 编译成 calc(var(--radius) * n)，单一 --radius 是唯一杠杆：0.5rem 起算得 sm 4.8 / md 6.4 / lg 8（按钮·输入） / xl 11.2（卡片）。卡片与标签另在 §5.7 / §5.8 逐条钉到 12px / 6px。 */ --radius: 0.5rem; /* —— 字体（§2.2）—— --font-body 是实际用的那条；--font-sans/inter/manrope/serif 是 New API 留的几个别名，一并对齐，避免某个预设把衬线换回来。 */ --font-body: var(--dd-font-sans); --font-sans: var(--dd-font-sans); --font-inter: var(--dd-font-sans); --font-manrope: var(--dd-font-sans); --font-serif: var(--dd-font-sans); --font-mono: var(--dd-font-mono); } /* --------------------------------------------------------------------------- * 4. Tailwind 调色板家族重映射 * New API 源码里有约 300 处硬编码的 bg-amber-500 / text-emerald-600 这类， * 它们编译成 var(--color-<家族>-<档>)，不走语义 token。下面只覆盖构建产物里 * 真实被引用的 113 个档位（纯变量，不写一条选择器，零布局影响）。 * 分组原则（§2.1 一个主色 + 一个点缀 + 其余灰阶）： * blue/sky/indigo → accent；violet/purple → ink-2；cyan/teal → ink-3 * emerald/green/lime → ok；amber/yellow/orange → warn；red/rose/pink → err * gray/slate → ink-2 灰阶 * 配方：50–400 向 bg 混，500 取基色，600–950 向 ink 混。 * -------------------------------------------------------------------------*/ :root, body:not(:root):not(:root):not(:root):not(:root):not(:root) { /* 主色族（New API 原品牌蓝）→ accent */ --color-blue-50: color-mix(in oklab, var(--dd-accent) 6%, var(--dd-bg)); --color-blue-100: color-mix(in oklab, var(--dd-accent) 12%, var(--dd-bg)); --color-blue-200: color-mix(in oklab, var(--dd-accent) 22%, var(--dd-bg)); --color-blue-300: color-mix(in oklab, var(--dd-accent) 38%, var(--dd-bg)); --color-blue-400: color-mix(in oklab, var(--dd-accent) 65%, var(--dd-bg)); --color-blue-500: var(--dd-accent); --color-blue-600: color-mix(in oklab, var(--dd-accent) 88%, var(--dd-ink)); --color-blue-700: color-mix(in oklab, var(--dd-accent) 74%, var(--dd-ink)); --color-blue-800: color-mix(in oklab, var(--dd-accent) 58%, var(--dd-ink)); --color-blue-900: color-mix(in oklab, var(--dd-accent) 42%, var(--dd-ink)); --color-blue-950: color-mix(in oklab, var(--dd-accent) 28%, var(--dd-ink)); --color-sky-50: color-mix(in oklab, var(--dd-accent) 6%, var(--dd-bg)); --color-sky-200: color-mix(in oklab, var(--dd-accent) 22%, var(--dd-bg)); --color-sky-300: color-mix(in oklab, var(--dd-accent) 38%, var(--dd-bg)); --color-sky-400: color-mix(in oklab, var(--dd-accent) 65%, var(--dd-bg)); --color-sky-500: var(--dd-accent); --color-sky-700: color-mix(in oklab, var(--dd-accent) 74%, var(--dd-ink)); --color-sky-900: color-mix(in oklab, var(--dd-accent) 42%, var(--dd-ink)); --color-sky-950: color-mix(in oklab, var(--dd-accent) 28%, var(--dd-ink)); --color-indigo-100: color-mix(in oklab, var(--dd-accent) 12%, var(--dd-bg)); --color-indigo-500: var(--dd-accent); --color-indigo-800: color-mix(in oklab, var(--dd-accent) 58%, var(--dd-ink)); --color-indigo-900: color-mix(in oklab, var(--dd-accent) 42%, var(--dd-ink)); /* 次级冷色 → ink-2 靛紫灰（与 accent 可区分，仍属灰阶） */ --color-violet-100: color-mix(in oklab, var(--dd-ink-2) 12%, var(--dd-bg)); --color-violet-300: color-mix(in oklab, var(--dd-ink-2) 38%, var(--dd-bg)); --color-violet-400: color-mix(in oklab, var(--dd-ink-2) 65%, var(--dd-bg)); --color-violet-500: var(--dd-ink-2); --color-violet-600: color-mix(in oklab, var(--dd-ink-2) 88%, var(--dd-ink)); --color-violet-700: color-mix(in oklab, var(--dd-ink-2) 74%, var(--dd-ink)); --color-violet-800: color-mix(in oklab, var(--dd-ink-2) 58%, var(--dd-ink)); --color-violet-900: color-mix(in oklab, var(--dd-ink-2) 42%, var(--dd-ink)); --color-violet-950: color-mix(in oklab, var(--dd-ink-2) 28%, var(--dd-ink)); --color-purple-300: color-mix(in oklab, var(--dd-ink-2) 38%, var(--dd-bg)); --color-purple-500: var(--dd-ink-2); --color-purple-700: color-mix(in oklab, var(--dd-ink-2) 74%, var(--dd-ink)); /* 第三冷色 → ink-3（更灰一档，仍能与前两者区分，用于分类色） */ --color-cyan-100: color-mix(in oklab, var(--dd-ink-3) 12%, var(--dd-bg)); --color-cyan-300: color-mix(in oklab, var(--dd-ink-3) 38%, var(--dd-bg)); --color-cyan-500: var(--dd-ink-3); --color-cyan-700: color-mix(in oklab, var(--dd-ink-3) 74%, var(--dd-ink)); --color-cyan-800: color-mix(in oklab, var(--dd-ink-3) 58%, var(--dd-ink)); --color-cyan-900: color-mix(in oklab, var(--dd-ink-3) 42%, var(--dd-ink)); --color-teal-300: color-mix(in oklab, var(--dd-ink-3) 38%, var(--dd-bg)); --color-teal-500: var(--dd-ink-3); --color-teal-800: color-mix(in oklab, var(--dd-ink-3) 58%, var(--dd-ink)); /* 成功语义 → ok */ --color-emerald-50: color-mix(in oklab, var(--dd-ok) 6%, var(--dd-bg)); --color-emerald-100: color-mix(in oklab, var(--dd-ok) 12%, var(--dd-bg)); --color-emerald-200: color-mix(in oklab, var(--dd-ok) 22%, var(--dd-bg)); --color-emerald-300: color-mix(in oklab, var(--dd-ok) 38%, var(--dd-bg)); --color-emerald-400: color-mix(in oklab, var(--dd-ok) 65%, var(--dd-bg)); --color-emerald-500: var(--dd-ok); --color-emerald-600: color-mix(in oklab, var(--dd-ok) 88%, var(--dd-ink)); --color-emerald-700: color-mix(in oklab, var(--dd-ok) 74%, var(--dd-ink)); --color-emerald-800: color-mix(in oklab, var(--dd-ok) 58%, var(--dd-ink)); --color-emerald-900: color-mix(in oklab, var(--dd-ok) 42%, var(--dd-ink)); --color-emerald-950: color-mix(in oklab, var(--dd-ok) 28%, var(--dd-ink)); --color-green-300: color-mix(in oklab, var(--dd-ok) 38%, var(--dd-bg)); --color-green-400: color-mix(in oklab, var(--dd-ok) 65%, var(--dd-bg)); --color-green-500: var(--dd-ok); --color-green-600: color-mix(in oklab, var(--dd-ok) 88%, var(--dd-ink)); --color-green-700: color-mix(in oklab, var(--dd-ok) 74%, var(--dd-ink)); --color-green-800: color-mix(in oklab, var(--dd-ok) 58%, var(--dd-ink)); --color-lime-500: var(--dd-ok); /* 警告语义 → warn */ --color-amber-50: color-mix(in oklab, var(--dd-warn) 6%, var(--dd-bg)); --color-amber-100: color-mix(in oklab, var(--dd-warn) 12%, var(--dd-bg)); --color-amber-200: color-mix(in oklab, var(--dd-warn) 22%, var(--dd-bg)); --color-amber-300: color-mix(in oklab, var(--dd-warn) 38%, var(--dd-bg)); --color-amber-400: color-mix(in oklab, var(--dd-warn) 65%, var(--dd-bg)); --color-amber-500: var(--dd-warn); --color-amber-600: color-mix(in oklab, var(--dd-warn) 88%, var(--dd-ink)); --color-amber-700: color-mix(in oklab, var(--dd-warn) 74%, var(--dd-ink)); --color-amber-800: color-mix(in oklab, var(--dd-warn) 58%, var(--dd-ink)); --color-amber-900: color-mix(in oklab, var(--dd-warn) 42%, var(--dd-ink)); --color-amber-950: color-mix(in oklab, var(--dd-warn) 28%, var(--dd-ink)); --color-yellow-400: color-mix(in oklab, var(--dd-warn) 65%, var(--dd-bg)); --color-yellow-500: var(--dd-warn); --color-yellow-600: color-mix(in oklab, var(--dd-warn) 88%, var(--dd-ink)); --color-orange-100: color-mix(in oklab, var(--dd-warn) 12%, var(--dd-bg)); --color-orange-300: color-mix(in oklab, var(--dd-warn) 38%, var(--dd-bg)); --color-orange-500: var(--dd-warn); --color-orange-700: color-mix(in oklab, var(--dd-warn) 74%, var(--dd-ink)); --color-orange-800: color-mix(in oklab, var(--dd-warn) 58%, var(--dd-ink)); --color-orange-900: color-mix(in oklab, var(--dd-warn) 42%, var(--dd-ink)); /* 错误语义 → err */ --color-red-50: color-mix(in oklab, var(--dd-err) 6%, var(--dd-bg)); --color-red-100: color-mix(in oklab, var(--dd-err) 12%, var(--dd-bg)); --color-red-200: color-mix(in oklab, var(--dd-err) 22%, var(--dd-bg)); --color-red-300: color-mix(in oklab, var(--dd-err) 38%, var(--dd-bg)); --color-red-400: color-mix(in oklab, var(--dd-err) 65%, var(--dd-bg)); --color-red-500: var(--dd-err); --color-red-600: color-mix(in oklab, var(--dd-err) 88%, var(--dd-ink)); --color-red-700: color-mix(in oklab, var(--dd-err) 74%, var(--dd-ink)); --color-red-800: color-mix(in oklab, var(--dd-err) 58%, var(--dd-ink)); --color-red-900: color-mix(in oklab, var(--dd-err) 42%, var(--dd-ink)); --color-red-950: color-mix(in oklab, var(--dd-err) 28%, var(--dd-ink)); --color-rose-50: color-mix(in oklab, var(--dd-err) 6%, var(--dd-bg)); --color-rose-100: color-mix(in oklab, var(--dd-err) 12%, var(--dd-bg)); --color-rose-200: color-mix(in oklab, var(--dd-err) 22%, var(--dd-bg)); --color-rose-300: color-mix(in oklab, var(--dd-err) 38%, var(--dd-bg)); --color-rose-400: color-mix(in oklab, var(--dd-err) 65%, var(--dd-bg)); --color-rose-500: var(--dd-err); --color-rose-600: color-mix(in oklab, var(--dd-err) 88%, var(--dd-ink)); --color-rose-700: color-mix(in oklab, var(--dd-err) 74%, var(--dd-ink)); --color-rose-800: color-mix(in oklab, var(--dd-err) 58%, var(--dd-ink)); --color-rose-900: color-mix(in oklab, var(--dd-err) 42%, var(--dd-ink)); --color-rose-950: color-mix(in oklab, var(--dd-err) 28%, var(--dd-ink)); --color-pink-500: var(--dd-err); /* 中性灰 → ink 灰阶 */ --color-gray-200: color-mix(in oklab, var(--dd-ink-2) 22%, var(--dd-bg)); --color-gray-400: color-mix(in oklab, var(--dd-ink-2) 65%, var(--dd-bg)); --color-gray-500: var(--dd-ink-2); --color-slate-100: color-mix(in oklab, var(--dd-ink-2) 12%, var(--dd-bg)); --color-slate-300: color-mix(in oklab, var(--dd-ink-2) 38%, var(--dd-bg)); --color-slate-400: color-mix(in oklab, var(--dd-ink-2) 65%, var(--dd-bg)); --color-slate-500: var(--dd-ink-2); --color-slate-700: color-mix(in oklab, var(--dd-ink-2) 74%, var(--dd-ink)); } /* --------------------------------------------------------------------------- * 5. 组件级微调 * * 纪律：本节不写任何影响排版的属性——没有 width / height / margin / padding / * position / display / flex / grid / font-size / line-height。 * 唯一例外是 §5.13 空状态表情包容器的尺寸，已在 T9 报告里单独申报。 * -------------------------------------------------------------------------*/ /* 5.1 代码类走等宽（正文字体已由 §3 的 --font-body 换掉） */ code, kbd, pre, samp, .font-mono, [data-slot='command-shortcut'] { font-family: var(--dd-font-mono); } /* 5.2 选中态用强调底（与我们 globals.css 的 ::selection 一致） */ ::selection { background: var(--dd-accent-tint); } /* 5.3 强制浅色：§2.1「暗色模式 P2 不做」。New API 的 .dark 类仍可能被用户切上， §3 的 body 规则已让 token 恒为浅色，这里把表单原生控件的配色也钉住，避免出现浅底深控件的割裂。 */ :root, :root.dark { color-scheme: light; } /* 5.4 按钮（§2.4：hover 150ms、背景变强调色；位移交给源码自带的 active:translate-y-px，不动）。源码 button.tsx:29 只给 [a]:hover 写了主按钮 hover 底色，纯