9cedf0c437
- shadcn/ui 标准化：废弃纸感令牌，统一 bg-background/text-foreground 等 - Tailwind v4 + @theme inline，移除 tailwind.config.js - React 19 use() + Suspense 流式渲染，首屏骨架秒出 - 三级错误边界：Route → Section → Widget 层层兜底 - 错误上报：useErrorReport → sendBeacon → /api/log mock 端点 - 三层安全边界：L1 角色门禁 / L2 权限点门禁 / L3 数据范围 - 权限位图 base36 压缩：67 权限点 → ~14 字符，JWT 体积减少 ≥ 99% - notify 统一 Toast 封装，禁止业务直接 import sonner - PluginBoundary 替代 PluginLoader（错误边界 + Suspense + Skeleton 三件套） 验证：typecheck 0 错误 / lint 0 错误 / build 6 路由生成成功
117 lines
4.2 KiB
CSS
117 lines
4.2 KiB
CSS
/**
|
||
* Layer 1: Primitive Tokens（原始色板/字号/间距/阴影/字体家族）
|
||
*
|
||
* 仅被 Layer 2 Semantic 引用，业务代码不直接使用。
|
||
* 色板层不区分明暗，主题差异在 Semantic 层体现。
|
||
*
|
||
* 对齐：CICD 项目 src/app/styles/tokens/primitive.css
|
||
* 关联：project_rules §3.10 设计令牌规范
|
||
*/
|
||
|
||
:root {
|
||
/* ============ 色板（HSL 分量，非完整颜色） ============ */
|
||
|
||
/* Zinc 中性色板（shadcn 默认） */
|
||
--color-zinc-50: 0 0% 99%;
|
||
--color-zinc-100: 240 4.8% 95.9%;
|
||
--color-zinc-200: 240 5.9% 90%;
|
||
--color-zinc-300: 240 4.8% 83.9%;
|
||
--color-zinc-400: 240 5% 64.9%;
|
||
--color-zinc-500: 240 3.8% 46.1%;
|
||
--color-zinc-600: 240 5.2% 33.9%;
|
||
--color-zinc-700: 240 5.3% 26.1%;
|
||
--color-zinc-800: 240 5.9% 10%;
|
||
--color-zinc-900: 240 5.9% 3.9%;
|
||
--color-zinc-950: 240 10% 3.9%;
|
||
|
||
/* Stone 暖灰（用于纸感业务扩展，如备课编辑器） */
|
||
--color-stone-50: 60 4.8% 95.9%;
|
||
--color-stone-100: 60 5.1% 90%;
|
||
--color-stone-200: 20 5.9% 90%;
|
||
--color-stone-300: 24 5.7% 82.9%;
|
||
--color-stone-400: 24 5.4% 63.9%;
|
||
--color-stone-500: 25 5.1% 44.7%;
|
||
--color-stone-600: 33 5% 39.8%;
|
||
--color-stone-700: 30 5.2% 32.7%;
|
||
--color-stone-800: 12 6.5% 31.4%;
|
||
--color-stone-900: 24 10% 10%;
|
||
--color-stone-950: 20 14.3% 4.1%;
|
||
|
||
/* Indigo 强调色（业务交互强调） */
|
||
--color-indigo-500: 238.7 83.5% 66.7%;
|
||
--color-indigo-600: 238.6 84.5% 59.8%;
|
||
|
||
/* ============ 字号阶梯（10 级，0 最小 9 最大） ============ */
|
||
--font-size-0: 9px; /* 角色标签微字号 */
|
||
--font-size-1: 12px; /* 元信息/角色标签 */
|
||
--font-size-2: 13px; /* inline-node body */
|
||
--font-size-3: 13.5px; /* inline-node 主文（纸感） */
|
||
--font-size-4: 14px; /* 标题/按钮 */
|
||
--font-size-5: 16px; /* 正文（Fraunces 16px） */
|
||
--font-size-6: 18px; /* H2 */
|
||
--font-size-7: 20px; /* H1 */
|
||
--font-size-8: 24px; /* 区块标题 */
|
||
--font-size-9: 32px; /* 页面标题 */
|
||
|
||
/* ============ 间距阶梯 ============ */
|
||
--space-0: 0;
|
||
--space-0_5: 0.125rem; /* 2px */
|
||
--space-1: 0.25rem; /* 4px */
|
||
--space-1_5: 0.375rem; /* 6px */
|
||
--space-2: 0.5rem; /* 8px */
|
||
--space-2_5: 0.625rem; /* 10px */
|
||
--space-3: 0.75rem; /* 12px */
|
||
--space-3_5: 0.875rem; /* 14px */
|
||
--space-4: 1rem; /* 16px */
|
||
--space-5: 1.25rem; /* 20px */
|
||
--space-6: 1.5rem; /* 24px */
|
||
--space-7: 1.75rem; /* 28px */
|
||
--space-8: 2rem; /* 32px */
|
||
--space-10: 2.5rem; /* 40px */
|
||
--space-12: 3rem; /* 48px */
|
||
--space-16: 4rem; /* 64px */
|
||
--space-18: 4.5rem; /* 72px */
|
||
|
||
/* ============ 阴影阶梯 ============ */
|
||
--shadow-1: 0 1px 2px rgba(15, 15, 15, 0.04);
|
||
--shadow-2: 0 1px 3px rgba(15, 15, 15, 0.06), 0 1px 2px rgba(15, 15, 15, 0.04);
|
||
--shadow-3: 0 4px 6px rgba(15, 15, 15, 0.05), 0 2px 4px rgba(15, 15, 15, 0.04);
|
||
--shadow-4: 0 1px 2px rgba(15, 15, 15, 0.04), 0 8px 24px rgba(15, 15, 15, 0.04);
|
||
--shadow-5: 0 1px 2px rgba(15, 15, 15, 0.06), 0 12px 36px rgba(15, 15, 15, 0.08);
|
||
--shadow-6: 0 10px 15px rgba(15, 15, 15, 0.1), 0 4px 6px rgba(15, 15, 15, 0.05);
|
||
|
||
/* ============ 字体家族 ============ */
|
||
/* 引用 next/font 在 <html> 上注入的 CSS 变量（fallback 保证 SSR/无字体时降级） */
|
||
--font-family-sans: var(--font-inter, 'Inter'), system-ui, sans-serif;
|
||
--font-family-serif: var(--font-fraunces, 'Fraunces'), Georgia, serif;
|
||
--font-family-mono: var(--font-jetbrains-mono, 'JetBrains Mono'), ui-monospace, monospace;
|
||
|
||
/* ============ 行高阶梯 ============ */
|
||
--leading-tight: 1.2;
|
||
--leading-snug: 1.35;
|
||
--leading-normal: 1.5;
|
||
--leading-relaxed: 1.65;
|
||
--leading-loose: 1.8;
|
||
|
||
/* ============ 字重阶梯 ============ */
|
||
--weight-regular: 400;
|
||
--weight-medium: 500;
|
||
--weight-semibold: 600;
|
||
--weight-bold: 700;
|
||
|
||
/* ============ 动效 ============ */
|
||
--duration-fast: 150ms;
|
||
--duration-normal: 200ms;
|
||
--duration-slow: 300ms;
|
||
--ease-in: cubic-bezier(0.4, 0, 1, 1);
|
||
--ease-out: cubic-bezier(0, 0, 0.2, 1);
|
||
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
||
|
||
/* ============ z-index ============ */
|
||
--z-dropdown: 1000;
|
||
--z-sticky: 1100;
|
||
--z-modal: 1300;
|
||
--z-popover: 1400;
|
||
--z-toast: 1500;
|
||
}
|