/* ═══════════════════════════════════════════════════════════════════════════ * Ganymede WMS · Design Tokens * ═══════════════════════════════════════════════════════════════════════════ * 全站统一的令牌层 · 只声明变量 + 基础 typography · 不含任何组件样式。 * 用法: * * 与 design-components.css 配套使用 · tokens 是原子 · components 是分子。 * * 灵感: Stripe · Anthropic · Vercel Docs * ═══════════════════════════════════════════════════════════════════════════ */ /* ──────────────────────────────────────────────────────────── * Font families (external · Google Fonts) * ──────────────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Poppins:wght@600;700;800&display=swap'); :root { /* ═══ 1. 品牌色 ═══════════════════════════════════════ */ --brand: #635BFF; /* Stripe 紫 · 主品牌 · POST · 主 CTA */ --brand-2: #4F46E5; /* 深化紫 · hover · active · 强调 */ --brand-bg: #EEF0FA; /* 品牌浅底 · pill · 侧栏 hover */ /* ═══ 2. 文本 (从深到浅 · 4 级) ══════════════════════ */ --ink: #0A2540; /* 主 · H1/H2/H3 · code bg 也用这个色值 */ --ink-2: #425466; /* 副 · 段落 · 表格 cell */ --muted: #6B7280; /* 三级 · label · caption */ --muted-2: #8792A2; /* 四级 · optional 标签 · 灰化字段 */ /* ═══ 3. 面 (页面/卡片/描边) ═════════════════════════ */ --bg: #F6F9FC; /* 页面底 · endpoint bar bg */ --card: #ffffff; /* 卡片主背景 */ --border: #E3E8EE; /* 主分割线 · 卡片描边 */ --border-2: #F1F5F9; /* 次分割线 · 内联 code 底 */ /* ═══ 4. 代码块 ══════════════════════════════════════ */ --code-bg: #0A2540; --code-bg-2: #1a2f47; --code-ink: #E3E8EE; --code-k: #A5B4FC; /* keyword: import/def */ --code-kw: #F0ABFC; /* keyword2: lambda/const */ --code-s: #7DD3FC; /* string */ --code-n: #F9A8D4; /* number */ --code-c: #64748B; /* comment (italic) */ --code-p: #94A3B8; /* punctuation */ /* ═══ 5. 语义色 ══════════════════════════════════════ */ --ok: #059669; /* success · 200 chip · check */ --ok-bg: #DEF7EC; --ok-ink: #046C4E; --warn: #D97706; /* warn · PATCH · alert */ --warn-bg: #FFF8EB; --warn-ink: #78350F; --warn-border: #FCD34D; --err: #DC2626; /* error · 4xx chip · delete */ --err-bg: #FEE2E2; --err-ink: #991B1B; /* ═══ 6. HTTP 方法色 ═══════════════════════════════════ */ --http-get: #0891B2; /* cyan */ --http-post: var(--brand); --http-patch: var(--warn); --http-delete: var(--err); /* ═══ 7. 字体家族 ═════════════════════════════════════ */ --font-sans: 'Inter', 'PingFang SC', 'Microsoft YaHei', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --font-display:'Poppins', 'Inter', system-ui, sans-serif; /* 品牌大标题用 */ /* ═══ 8. 字号阶梯 ═════════════════════════════════════ */ --text-2xs: 10px; --text-xs: 11px; --text-sm: 13px; --text-body: 15px; --text-md: 16px; --text-lg: 22px; --text-xl: 28px; --text-2xl: 34px; --text-3xl: 48px; /* ═══ 9. 行高 ═══════════════════════════════════════ */ --lh-tight: 1.15; /* H1 · H2 */ --lh-snug: 1.35; --lh-normal: 1.55; /* callout */ --lh-relaxed: 1.65; /* body · code */ /* ═══ 10. 字距 ═════════════════════════════════════ */ --tracking-tight: -.02em; /* 大标题 */ --tracking-snug: -.015em; /* 中标题 */ --tracking-body: -.003em; /* 正文 */ --tracking-code: .01em; /* code · method badge */ --tracking-wide: .06em; /* uppercase label */ --tracking-wider: .08em; /* eyebrow */ /* ═══ 11. 字重 ═════════════════════════════════════ */ --w-normal: 400; --w-medium: 500; --w-semibold: 600; --w-bold: 700; --w-black: 800; /* ═══ 12. 间距阶梯 ═════════════════════════════════════ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-14: 56px; --space-16: 64px; /* ═══ 13. 圆角 ══════════════════════════════════════ */ --radius-xs: 4px; /* inline code · chip */ --radius-sm: 6px; /* button · form input */ --radius-md: 8px; /* card · code block · callout */ --radius-lg: 10px; /* method row · sidenav card */ --radius-xl: 14px; /* playground · hero card */ --radius-2xl: 20px; /* modal · big feature card */ --radius-full: 999px; /* pill · dot · avatar */ /* ═══ 14. 阴影 ══════════════════════════════════════ */ --shadow-none: none; --shadow-xs: 0 1px 2px rgba(10, 37, 64, .05); --shadow-sm: 0 1px 3px rgba(10, 37, 64, .08); --shadow-md: 0 4px 16px -8px rgba(2, 6, 23, .08); --shadow-lg: 0 10px 30px -12px rgba(2, 6, 23, .12); --shadow-focus: 0 0 0 3px rgba(99, 91, 255, .12); /* input focus 品牌紫 */ /* ═══ 15. 过渡 ══════════════════════════════════════ */ --tx-fast: .1s; --tx-base: .15s; --tx-slow: .25s; /* ═══ 16. Z-index 层级 ═════════════════════════════════ */ --z-base: 1; --z-sticky: 50; /* topnav */ --z-dropdown: 100; --z-modal: 1000; --z-toast: 2000; /* ═══ 17. 布局宽度 ════════════════════════════════════ */ --content-max: 1500px; --nav-width: 250px; --code-width: 460px; --topnav-h: 60px; } /* ──────────────────────────────────────────────────────────── * 基础 Reset + Typography (只影响 body/html · 不改任何组件) * ──────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-sans); font-size: var(--text-body); line-height: var(--lh-relaxed); letter-spacing: var(--tracking-body); color: var(--ink); background: var(--card); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } a { color: var(--brand); text-decoration: none; transition: color var(--tx-base); } a:hover { color: var(--brand-2); } code, pre, .mono { font-family: var(--font-mono); } /* 内联 code · 通用 · 不需要 class */ code:not(pre code) { background: var(--border-2); color: var(--ink); padding: 1px 6px; border-radius: var(--radius-xs); font-size: .87em; font-weight: var(--w-medium); } /* 通用可访问性 */ :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } /* ════════════════════════════════════════════════════════════ * i18n · body[data-lang] 控制中英切换 · 页面里用 span.lang-zh/lang-en 包 * ════════════════════════════════════════════════════════════ */ body[data-lang="zh"] .lang-en { display: none !important; } body[data-lang="en"] .lang-zh { display: none !important; }