shenjianZ
6b58b55c32
- 将单体 style.css 拆分为 tokens/reset/fonts/layout/responsive/组件级 CSS 模块 - 从 Google Fonts CDN 迁移至本地自托管字体（JetBrainsMono、NotoSansSC） - 引入 Vitest + Testing Library 测试体系，新增单元测试 - 添加 GitHub Actions CI 流水线（lint → build → test） - 新增 Prettier 格式化与 ESLint 规则强化 - 重构全部 YAML 数据文件，完善项目详情页（截图轮播、更新日志） - 新增项目文档编写指南（docs/create-project.md）
135 lines
4.3 KiB
CSS
135 lines
4.3 KiB
CSS
/* ═══════════════════════════════════════════════════════
|
|
ZUJ OL Apps — Warm Aurora Design System v2
|
|
Palette: Deep space + Warm amber-coral aurora gradients
|
|
Font: Noto Sans SC + JetBrains Mono
|
|
Color Space: OKLCH
|
|
═══════════════════════════════════════════════════════ */
|
|
|
|
/* ── Tokens (Dark-first) ──────────────────────────────── */
|
|
:root {
|
|
--bg: oklch(11% 0.02 270);
|
|
--surface: oklch(15% 0.025 270);
|
|
--surface-2: oklch(19% 0.028 270);
|
|
--fg: oklch(97% 0.005 270);
|
|
--muted: oklch(58% 0.028 270);
|
|
--border: oklch(24% 0.035 270);
|
|
--accent: oklch(74% 0.2 45);
|
|
--accent-fg: oklch(99% 0.005 270);
|
|
|
|
--blue: oklch(74% 0.2 45);
|
|
--emerald: oklch(74% 0.2 165);
|
|
--amber: oklch(83% 0.19 85);
|
|
--violet: oklch(70% 0.24 20);
|
|
--cyan: oklch(77% 0.16 200);
|
|
--red: oklch(69% 0.28 25);
|
|
--orange: oklch(76% 0.22 55);
|
|
--pink: oklch(72% 0.26 340);
|
|
|
|
--gradient-primary: linear-gradient(135deg, oklch(74% 0.2 45), oklch(70% 0.24 20));
|
|
--gradient-aurora: linear-gradient(
|
|
135deg,
|
|
oklch(74% 0.2 45),
|
|
oklch(70% 0.24 20),
|
|
oklch(68% 0.22 350),
|
|
oklch(80% 0.17 85)
|
|
);
|
|
--gradient-warm: linear-gradient(
|
|
135deg,
|
|
oklch(69% 0.28 25),
|
|
oklch(76% 0.22 55),
|
|
oklch(83% 0.19 85)
|
|
);
|
|
--gradient-shine: linear-gradient(
|
|
135deg,
|
|
oklch(80% 0.17 85),
|
|
oklch(70% 0.24 20),
|
|
oklch(68% 0.22 350)
|
|
);
|
|
--gradient-glow: linear-gradient(
|
|
135deg,
|
|
oklch(74% 0.2 45 / 30%),
|
|
oklch(70% 0.24 20 / 30%),
|
|
oklch(68% 0.22 350 / 20%)
|
|
);
|
|
|
|
--font-display: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
|
|
--font-body: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
|
|
--font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Menlo, monospace;
|
|
|
|
--radius-sm: 8px;
|
|
--radius-md: 12px;
|
|
--radius-lg: 16px;
|
|
--radius-xl: 20px;
|
|
|
|
--shadow-sm: 0 1px 3px oklch(0% 0 0 / 20%);
|
|
--shadow-raised: 0 4px 24px oklch(0% 0 0 / 30%), 0 1px 4px oklch(0% 0 0 / 20%);
|
|
--shadow-glow: 0 0 30px oklch(74% 0.2 45 / 12%), 0 0 60px oklch(70% 0.24 20 / 8%);
|
|
--shadow-glow-lg: 0 0 40px oklch(74% 0.2 45 / 15%), 0 0 80px oklch(70% 0.24 20 / 10%);
|
|
|
|
--nav-height: 64px;
|
|
--max-width: 1200px;
|
|
--gutter: 40px;
|
|
|
|
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
|
|
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
--transition: 250ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
|
color-scheme: dark;
|
|
}
|
|
|
|
/* ── Light mode ───────────────────────────────────────── */
|
|
:root.light {
|
|
--bg: oklch(98% 0.005 270);
|
|
--surface: oklch(100% 0 0);
|
|
--surface-2: oklch(96% 0.008 270);
|
|
--fg: oklch(13% 0.025 270);
|
|
--muted: oklch(46% 0.028 270);
|
|
--border: oklch(88% 0.018 270);
|
|
--accent: oklch(58% 0.22 45);
|
|
--accent-fg: oklch(98% 0.005 270);
|
|
|
|
--blue: oklch(58% 0.22 45);
|
|
--emerald: oklch(52% 0.2 165);
|
|
--amber: oklch(68% 0.2 85);
|
|
--violet: oklch(55% 0.24 20);
|
|
--cyan: oklch(52% 0.18 200);
|
|
--red: oklch(55% 0.28 25);
|
|
--orange: oklch(60% 0.24 55);
|
|
--pink: oklch(52% 0.26 340);
|
|
|
|
--gradient-primary: linear-gradient(135deg, oklch(55% 0.24 20), oklch(58% 0.22 45));
|
|
--gradient-aurora: linear-gradient(
|
|
135deg,
|
|
oklch(55% 0.24 20),
|
|
oklch(58% 0.22 45),
|
|
oklch(52% 0.22 350),
|
|
oklch(65% 0.18 85)
|
|
);
|
|
--gradient-warm: linear-gradient(
|
|
135deg,
|
|
oklch(55% 0.28 25),
|
|
oklch(60% 0.24 55),
|
|
oklch(68% 0.2 85)
|
|
);
|
|
--gradient-shine: linear-gradient(
|
|
135deg,
|
|
oklch(65% 0.18 85),
|
|
oklch(55% 0.24 20),
|
|
oklch(52% 0.26 340)
|
|
);
|
|
--gradient-glow: linear-gradient(
|
|
135deg,
|
|
oklch(58% 0.22 45 / 10%),
|
|
oklch(55% 0.24 20 / 10%),
|
|
oklch(52% 0.22 350 / 6%)
|
|
);
|
|
|
|
--shadow-sm: 0 1px 3px oklch(13% 0.02 270 / 6%);
|
|
--shadow-raised: 0 4px 24px oklch(13% 0.02 270 / 8%), 0 1px 4px oklch(13% 0.02 270 / 4%);
|
|
--shadow-glow: 0 0 30px oklch(58% 0.22 45 / 8%), 0 0 60px oklch(55% 0.24 20 / 5%);
|
|
--shadow-glow-lg: 0 0 40px oklch(58% 0.22 45 / 10%), 0 0 80px oklch(55% 0.24 20 / 6%);
|
|
|
|
color-scheme: light;
|
|
}
|