SakurasanandClaude
6adadebaf0
- 修 nav 激活态残留 text-zinc-50 导致浅色下白字白底 - @theme 令牌改实色字面量, 浅色用 [data-theme=light] 覆盖同一批 --color-* - 新增 soft 令牌(accent/ok/warn/err, color-mix 运行时解析)替代烘焙的透明度修饰符, 修复 badge 实色底、focus ring 实线等问题 - ThemeToggle 改三选下拉(浅色/深色/跟随系统), 系统自动为显式选项 - 浅色强调色调深保证 WCAG 对比度, 全量复查无残留硬编码颜色类 Co-Authored-By: Claude <noreply@anthropic.com>
99 lines
2.9 KiB
CSS
99 lines
2.9 KiB
CSS
@import 'tailwindcss';
|
||
@import '@fontsource-variable/geist';
|
||
@import '@fontsource-variable/geist-mono';
|
||
|
||
/* ------------------------------------------------------------------ */
|
||
/* 设计 tokens（taste-skill 产出） */
|
||
/* 三主题 dark / light / system（data-theme 切换） */
|
||
/* 令牌值在 @theme 内写实色字面量 → 透明度修饰符(如 bg-accent-soft)可用； */
|
||
/* [data-theme=light] 覆盖同一批 --color-* 变量实现主题切换。 */
|
||
/* 圆角:卡片 8 / 控件 6 / 徽章 pill */
|
||
/* ------------------------------------------------------------------ */
|
||
|
||
@theme {
|
||
--font-sans: 'Geist Variable', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
|
||
--font-mono: 'Geist Mono Variable', ui-monospace, SFMono-Regular, Menlo, monospace;
|
||
|
||
/* 深色（默认）语义令牌 */
|
||
--color-bg: #09090b;
|
||
--color-surface: #18181b;
|
||
--color-surface2: #27272a;
|
||
--color-edge: #27272a;
|
||
--color-edge2: #3f3f46;
|
||
--color-ink: #f4f4f5;
|
||
--color-muted: #a1a1aa;
|
||
--color-accent: oklch(0.72 0.17 152);
|
||
--color-accent-strong: oklch(0.64 0.19 152);
|
||
--color-accent-ink: #09090b;
|
||
--color-ok: oklch(0.72 0.17 152);
|
||
--color-warn: #fbbf24;
|
||
--color-err: #f87171;
|
||
|
||
/* 软色（color-mix 运行时解析，随主题自适应） */
|
||
--color-accent-soft: color-mix(in oklab, var(--color-accent) 15%, transparent);
|
||
--color-ok-soft: color-mix(in oklab, var(--color-ok) 15%, transparent);
|
||
--color-warn-soft: color-mix(in oklab, var(--color-warn) 15%, transparent);
|
||
--color-err-soft: color-mix(in oklab, var(--color-err) 12%, transparent);
|
||
}
|
||
|
||
/* 默认深色 */
|
||
:root {
|
||
color-scheme: dark;
|
||
}
|
||
|
||
/* 浅色：覆盖同一批语义令牌 */
|
||
[data-theme='light'] {
|
||
color-scheme: light;
|
||
--color-bg: #fafafa;
|
||
--color-surface: #ffffff;
|
||
--color-surface2: #f4f4f5;
|
||
--color-edge: #e4e4e7;
|
||
--color-edge2: #d4d4d8;
|
||
--color-ink: #18181b;
|
||
--color-muted: #52525b;
|
||
--color-accent: oklch(0.52 0.14 152);
|
||
--color-accent-strong: oklch(0.47 0.14 152);
|
||
--color-accent-ink: #ffffff;
|
||
--color-ok: oklch(0.52 0.14 152);
|
||
--color-warn: #d97706;
|
||
--color-err: #dc2626;
|
||
}
|
||
|
||
body {
|
||
background-color: var(--color-bg);
|
||
color: var(--color-ink);
|
||
font-family: var(--font-sans);
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
|
||
/* 全站统一键盘焦点可见性 */
|
||
:focus-visible {
|
||
outline: 2px solid var(--color-accent);
|
||
outline-offset: 2px;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
/* 通用组件视觉基元 */
|
||
@layer components {
|
||
.card {
|
||
@apply rounded-lg border border-edge bg-surface;
|
||
}
|
||
|
||
.mono-num {
|
||
@apply font-mono tabular-nums;
|
||
}
|
||
|
||
.table-row {
|
||
@apply border-b border-edge last:border-0 hover:bg-surface2;
|
||
}
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
*,
|
||
*::before,
|
||
*::after {
|
||
animation-duration: 0.01ms !important;
|
||
transition-duration: 0.01ms !important;
|
||
}
|
||
}
|