wangjia
805bf8e2ca
- design/prototype/serve.mjs:零依赖热重载预览服务器(照搬 jiu,check-ds 存在性守护,Phase 5 前静默跳过) - design/prototype/tokens.css:token 真源(现结构已满足 ds-flow 的 base :root + [data-theme=dark],字节迁移保证 codegen 零 diff) - design/colors_and_type.css:退化为薄 @import 别名(供历史 preview/*.html 浏览器内引用;codegen 不再读它) - 三个 codegen(Flutter gen_flutter_tokens / website+usercenter build-tokens) + drift 检查全部重指向 prototype/tokens.css - 生成产物 diff 仅头注释源路径行,token 数值零变化(已验证) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
219 lines
8.8 KiB
CSS
219 lines
8.8 KiB
CSS
/* =============================================================
|
|
穿山甲 VPN · Pangolin VPN — Design Tokens
|
|
colors_and_type.css
|
|
Single source of truth: color ramps, semantic colors (light + dark),
|
|
typography, spacing, radii, shadows, motion.
|
|
============================================================= */
|
|
|
|
/* ---- Webfonts (open-source; documented as the brand's chosen faces) ----
|
|
Sora — display / headings (geometric, friendly)
|
|
Manrope — body / UI (humanist geometric)
|
|
Noto Sans SC — Chinese (CJK companion)
|
|
JetBrains Mono — data readouts (IP, speed, keys) */
|
|
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700&family=Manrope:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;700&family=JetBrains+Mono:wght@400;500&display=swap');
|
|
|
|
:root {
|
|
/* ===========================================================
|
|
1. PRIMITIVE COLOR RAMPS
|
|
=========================================================== */
|
|
|
|
/* Clay / Copper — the pangolin-armor primary (warm earth) */
|
|
--clay-50: #FAF3ED;
|
|
--clay-100: #F2E2D4;
|
|
--clay-200: #E6C7AC;
|
|
--clay-300: #D9A982;
|
|
--clay-400: #CC8B5C;
|
|
--clay-500: #B96A3D; /* ← brand primary */
|
|
--clay-600: #9E5630;
|
|
--clay-700: #7E4426;
|
|
--clay-800: #5E331D;
|
|
--clay-900: #3D2213;
|
|
|
|
/* Sand / Taupe — warm neutral ramp */
|
|
--sand-50: #FAF8F4;
|
|
--sand-100: #F2EEE7;
|
|
--sand-200: #E6DFD3;
|
|
--sand-300: #D2C8B8;
|
|
--sand-400: #B0A491;
|
|
--sand-500: #8C8270;
|
|
--sand-600: #6B6253;
|
|
--sand-700: #4E4940;
|
|
--sand-800: #2E2A24;
|
|
--sand-900: #1F1C18;
|
|
--sand-950: #14110E; /* warm espresso near-black */
|
|
|
|
/* Semantic hues (earth-tuned) */
|
|
--green-400: #7FB07A;
|
|
--green-500: #5B8C5A; /* connected / secure */
|
|
--green-600: #467046;
|
|
--amber-400: #E2B05A;
|
|
--amber-500: #D69A3C; /* connecting / warning */
|
|
--amber-600: #B47E29;
|
|
--red-400: #D4715A;
|
|
--red-500: #C0533B; /* error / disconnect */
|
|
--red-600: #9E4230;
|
|
|
|
/* ===========================================================
|
|
2. SEMANTIC TOKENS — LIGHT THEME (default)
|
|
=========================================================== */
|
|
|
|
/* Backgrounds & surfaces */
|
|
--bg: var(--sand-50); /* app canvas */
|
|
--bg-subtle: var(--sand-100); /* striped / inset regions */
|
|
--surface: #FFFFFF; /* cards, sheets */
|
|
--surface-2: var(--sand-50); /* nested surface */
|
|
--overlay: rgba(31, 28, 24, 0.45);
|
|
|
|
/* Foreground / text */
|
|
--fg1: var(--sand-900); /* primary text */
|
|
--fg2: var(--sand-600); /* secondary text */
|
|
--fg3: var(--sand-500); /* tertiary / captions */
|
|
--fg-on-accent: #FFFFFF; /* text on clay fills */
|
|
|
|
/* Brand / accent */
|
|
--accent: var(--clay-500);
|
|
--accent-hover: var(--clay-600);
|
|
--accent-press: var(--clay-700);
|
|
--accent-subtle: var(--clay-50);
|
|
--accent-border: var(--clay-200);
|
|
|
|
/* Borders & lines */
|
|
--border: var(--sand-200);
|
|
--border-strong: var(--sand-300);
|
|
--ring: rgba(185, 106, 61, 0.35); /* focus ring (clay) */
|
|
|
|
/* Status */
|
|
--success: var(--green-500);
|
|
--success-subtle: #E9F0E6;
|
|
--warning: var(--amber-500);
|
|
--warning-subtle: #F8EED6;
|
|
--danger: var(--red-500);
|
|
--danger-subtle: #F6E1DA;
|
|
|
|
/* ===========================================================
|
|
3. TYPOGRAPHY
|
|
=========================================================== */
|
|
--font-display: 'Sora', 'Noto Sans SC', system-ui, sans-serif;
|
|
--font-sans: 'Manrope', 'Noto Sans SC', system-ui, sans-serif;
|
|
--font-cjk: 'Noto Sans SC', 'Manrope', system-ui, sans-serif;
|
|
--font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
|
|
|
|
/* Type scale (root 16px) */
|
|
--text-display-xl: 3rem; /* 48 */
|
|
--text-display: 2.25rem; /* 36 */
|
|
--text-h1: 1.875rem; /* 30 */
|
|
--text-h2: 1.5rem; /* 24 */
|
|
--text-h3: 1.25rem; /* 20 */
|
|
--text-body-lg: 1.125rem; /* 18 */
|
|
--text-body: 1rem; /* 16 */
|
|
--text-sm: 0.875rem; /* 14 */
|
|
--text-caption: 0.75rem; /* 12 */
|
|
|
|
--leading-tight: 1.15;
|
|
--leading-snug: 1.3;
|
|
--leading-normal:1.5;
|
|
--leading-relaxed:1.65;
|
|
|
|
--tracking-tight: -0.02em;
|
|
--tracking-snug: -0.01em;
|
|
--tracking-wide: 0.04em;
|
|
--tracking-caps: 0.08em;
|
|
|
|
/* ===========================================================
|
|
4. SPACING (4px base)
|
|
=========================================================== */
|
|
--space-0: 0;
|
|
--space-1: 0.25rem; /* 4 */
|
|
--space-2: 0.5rem; /* 8 */
|
|
--space-3: 0.75rem; /* 12 */
|
|
--space-4: 1rem; /* 16 */
|
|
--space-5: 1.25rem; /* 20 */
|
|
--space-6: 1.5rem; /* 24 */
|
|
--space-8: 2rem; /* 32 */
|
|
--space-10: 2.5rem; /* 40 */
|
|
--space-12: 3rem; /* 48 */
|
|
--space-16: 4rem; /* 64 */
|
|
|
|
/* ===========================================================
|
|
5. RADII (generous = friendly)
|
|
=========================================================== */
|
|
--radius-sm: 6px;
|
|
--radius-md: 10px;
|
|
--radius-lg: 14px;
|
|
--radius-xl: 20px;
|
|
--radius-2xl: 28px;
|
|
--radius-full: 999px;
|
|
|
|
/* ===========================================================
|
|
6. SHADOWS (warm-tinted, soft)
|
|
=========================================================== */
|
|
--shadow-sm: 0 1px 2px rgba(45, 30, 20, 0.06);
|
|
--shadow-md: 0 4px 14px rgba(45, 30, 20, 0.08);
|
|
--shadow-lg: 0 12px 32px rgba(45, 30, 20, 0.12);
|
|
--shadow-xl: 0 24px 60px rgba(45, 30, 20, 0.16);
|
|
--shadow-focus: 0 0 0 4px var(--ring);
|
|
|
|
/* ===========================================================
|
|
7. MOTION
|
|
=========================================================== */
|
|
--ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
|
|
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
|
|
--dur-fast: 140ms; /* @kind other */
|
|
--dur-base: 220ms; /* @kind other */
|
|
--dur-slow: 360ms; /* @kind other */
|
|
}
|
|
|
|
/* ===========================================================
|
|
DARK THEME — warm espresso
|
|
Apply via [data-theme="dark"] on <html> or any container.
|
|
=========================================================== */
|
|
[data-theme="dark"] {
|
|
--bg: var(--sand-950);
|
|
--bg-subtle: var(--sand-900);
|
|
--surface: #221E19;
|
|
--surface-2: #2A251F;
|
|
--overlay: rgba(0, 0, 0, 0.6);
|
|
|
|
--fg1: #F4EFE8;
|
|
--fg2: #B6AC9C;
|
|
--fg3: #897F6F;
|
|
--fg-on-accent: #1F1C18;
|
|
|
|
--accent: var(--clay-400);
|
|
--accent-hover: var(--clay-300);
|
|
--accent-press: var(--clay-500);
|
|
--accent-subtle: rgba(204, 139, 92, 0.14);
|
|
--accent-border: rgba(204, 139, 92, 0.30);
|
|
|
|
--border: rgba(242, 238, 231, 0.10);
|
|
--border-strong: rgba(242, 238, 231, 0.18);
|
|
--ring: rgba(204, 139, 92, 0.45);
|
|
|
|
--success: var(--green-400);
|
|
--success-subtle: rgba(127, 176, 122, 0.16);
|
|
--warning: var(--amber-400);
|
|
--warning-subtle: rgba(226, 176, 90, 0.16);
|
|
--danger: var(--red-400);
|
|
--danger-subtle: rgba(212, 113, 90, 0.16);
|
|
|
|
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
|
|
--shadow-md: 0 4px 14px rgba(0, 0, 0, 0.45);
|
|
--shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
|
|
--shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.55);
|
|
}
|
|
|
|
/* ===========================================================
|
|
SEMANTIC TYPE CLASSES (use directly in markup)
|
|
=========================================================== */
|
|
.t-display-xl { font-family: var(--font-display); font-size: var(--text-display-xl); font-weight: 700; line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
|
|
.t-display { font-family: var(--font-display); font-size: var(--text-display); font-weight: 700; line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
|
|
.t-h1 { font-family: var(--font-display); font-size: var(--text-h1); font-weight: 600; line-height: var(--leading-snug); letter-spacing: var(--tracking-snug); }
|
|
.t-h2 { font-family: var(--font-display); font-size: var(--text-h2); font-weight: 600; line-height: var(--leading-snug); letter-spacing: var(--tracking-snug); }
|
|
.t-h3 { font-family: var(--font-sans); font-size: var(--text-h3); font-weight: 600; line-height: var(--leading-snug); }
|
|
.t-body-lg { font-family: var(--font-sans); font-size: var(--text-body-lg); font-weight: 400; line-height: var(--leading-relaxed); }
|
|
.t-body { font-family: var(--font-sans); font-size: var(--text-body); font-weight: 400; line-height: var(--leading-normal); }
|
|
.t-sm { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 400; line-height: var(--leading-normal); }
|
|
.t-caption { font-family: var(--font-sans); font-size: var(--text-caption); font-weight: 500; line-height: var(--leading-normal); }
|
|
.t-overline { font-family: var(--font-sans); font-size: var(--text-caption); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-caps); }
|
|
.t-mono { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 400; font-feature-settings: 'tnum' 1; }
|