/* ================================================================= * design-tokens.css · Google DESIGN.md Token 导出 * 适用: apps/reading/ 目录 · 由 DESIGN.md 自动生成 * 版本: v1.0.0 · 2026-06-22 * * 来源: ./DESIGN.md (Google Design Tokens Spec) * 验证: npx -y @google/design.md lint DESIGN.md * 19 warnings (7 WCAG contrast · 12 unreferenced colors) * 0 errors * * 使用方式(在中): * * * 命名空间: * --token-* · 直接来自 DESIGN.md 的 token * --uux-* · 已有 ui-ux-max.css 的 token(本文件不覆盖) * * 已知差异(品牌选择,见 DESIGN.md "Do's and Don'ts"): * · coral (#cc785c) 配 white text 对比度 3.28:1 < WCAG AA 4.5:1 * · 这是 Anthropic 标志性的暖色品牌特征,按 DESIGN.md 第 540 行 * "Don't use cool blue or saturated cyan as a brand accent" * 保留而非修复 * ================================================================= */ :root { /* ============== Colors · Brand & Accent (DESIGN.md 第 6-31 行) ============== */ --token-coral: #cc785c; /* {colors.primary} 品牌珊瑚 */ --token-coral-active: #a9583e; /* {colors.primary-active} 按下态 */ --token-coral-disabled: #e6dfd8; /* {colors.primary-disabled} 禁用态 */ --token-ink: #141413; /* {colors.ink} 标题/主文字 */ --token-body: #3d3d3a; /* {colors.body} 默认正文 */ --token-body-strong: #252523; /* {colors.body-strong} 强调段落 */ --token-muted: #6c6a64; /* {colors.muted} 副标题/面包屑 */ --token-muted-soft: #8e8b82; /* {colors.muted-soft} 版权/caption */ /* ============== Colors · Surface ============== */ --token-hairline: #e6dfd8; /* {colors.hairline} 1px 边框 */ --token-hairline-soft: #ebe6df; /* {colors.hairline-soft} 内部分割 */ --token-canvas: #faf9f5; /* {colors.canvas} 默认画布 */ --token-surface-soft: #f5f0e8; /* {colors.surface-soft} 区段分割 */ --token-surface-card: #efe9de; /* {colors.surface-card} 功能卡片 */ --token-surface-cream-strong: #e8e0d2; /* {colors.surface-cream-strong} 强调区 */ --token-surface-dark: #181715; /* {colors.surface-dark} 产品暗面 */ --token-surface-dark-elevated: #252320; /* {colors.surface-dark-elevated} 暗面提升 */ --token-surface-dark-soft: #1f1e1b; /* {colors.surface-dark-soft} 暗面代码块 */ /* ============== Colors · Text on Surfaces ============== */ --token-on-primary: #ffffff; /* {colors.on-primary} 珊瑚上文字 */ --token-on-dark: #faf9f5; /* {colors.on-dark} 暗面文字 */ --token-on-dark-soft: #a09d96; /* {colors.on-dark-soft} 页脚次要 */ /* ============== Colors · Accents ============== */ --token-accent-teal: #5db8a6; /* {colors.accent-teal} 状态点 */ --token-accent-amber: #e8a55a; /* {colors.accent-amber} 徽章 */ --token-success: #5db872; /* {colors.success} 成功 */ --token-warning: #d4a017; /* {colors.warning} 警告 */ --token-error: #c64545; /* {colors.error} 错误 */ /* ============== Typography · Display (Copernicus / 衬线) ============== */ --token-font-display: "Copernicus", "Tiempos Headline", "Cormorant Garamond", "EB Garamond", "Songti SC", "Noto Serif SC", Georgia, serif; --token-font-sans: "StyreneB", "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans SC", "Segoe UI", sans-serif; --token-font-mono: "JetBrains Mono", "SF Mono", "Fira Code", Consolas, monospace; /* Display 字号(DESIGN.md 第 33-105 行) */ --token-display-xl-size: 64px; --token-display-xl-weight: 400; --token-display-xl-lh: 1.05; --token-display-xl-ls: -1.5px; --token-display-lg-size: 48px; --token-display-lg-weight: 400; --token-display-lg-lh: 1.1; --token-display-lg-ls: -1px; --token-display-md-size: 36px; --token-display-md-weight: 400; --token-display-md-lh: 1.15; --token-display-md-ls: -0.5px; --token-display-sm-size: 28px; --token-display-sm-weight: 400; --token-display-sm-lh: 1.2; --token-display-sm-ls: -0.3px; /* Title / Body / Caption */ --token-title-lg-size: 22px; --token-title-md-size: 18px; --token-title-sm-size: 16px; --token-body-md-size: 16px; --token-body-sm-size: 14px; --token-caption-size: 13px; --token-caption-uppercase-size: 12px; --token-code-size: 14px; --token-button-size: 14px; --token-nav-size: 14px; --token-weight-regular: 400; --token-weight-medium: 500; --token-body-lh: 1.55; --token-caption-lh: 1.4; --token-button-lh: 1; --token-code-lh: 1.6; --token-uppercase-ls: 1.5px; /* ============== Rounded (DESIGN.md 第 119-126 行) ============== */ --token-rounded-xs: 4px; --token-rounded-sm: 6px; --token-rounded-md: 8px; --token-rounded-lg: 12px; --token-rounded-xl: 16px; --token-rounded-pill: 9999px; --token-rounded-full: 9999px; /* ============== Spacing (DESIGN.md 第 128-136 行) ============== */ --token-spacing-xxs: 4px; --token-spacing-xs: 8px; --token-spacing-sm: 12px; --token-spacing-md: 16px; --token-spacing-lg: 24px; --token-spacing-xl: 32px; --token-spacing-xxl: 48px; --token-spacing-section: 96px; /* ============== Component Shorthand (DESIGN.md 第 138-298 行) ============== */ /* 高度(标准化为 4 的倍数) */ --token-button-height: 40px; --token-input-height: 40px; --token-nav-height: 64px; --token-icon-circle-size: 36px; /* Padding 标准 */ --token-button-padding: 12px 20px; --token-card-padding-xl: 32px; --token-card-padding-lg: 24px; --token-tile-padding: 20px; --token-callout-padding: 48px; --token-cta-band-padding: 64px; --token-footer-padding: 64px; --token-input-padding: 10px 14px; --token-tab-padding: 8px 14px; --token-badge-padding: 4px 12px; } /* ============== Typography 应用 (按 DESIGN.md 第 369-386 行) ============== */ .token-display-xl { font-family: var(--token-font-display); font-size: var(--token-display-xl-size); font-weight: var(--token-display-xl-weight); line-height: var(--token-display-xl-lh); letter-spacing: var(--token-display-xl-ls); color: var(--token-ink); margin: 0; } .token-display-lg { font-family: var(--token-font-display); font-size: var(--token-display-lg-size); font-weight: var(--token-display-lg-weight); line-height: var(--token-display-lg-lh); letter-spacing: var(--token-display-lg-ls); color: var(--token-ink); margin: 0; } .token-display-md { font-family: var(--token-font-display); font-size: var(--token-display-md-size); font-weight: var(--token-display-md-weight); line-height: var(--token-display-md-lh); letter-spacing: var(--token-display-md-ls); color: var(--token-ink); margin: 0; } .token-display-sm { font-family: var(--token-font-display); font-size: var(--token-display-sm-size); font-weight: var(--token-display-sm-weight); line-height: var(--token-display-sm-lh); letter-spacing: var(--token-display-sm-ls); color: var(--token-ink); margin: 0; } .token-title-lg { font-family: var(--token-font-sans); font-size: var(--token-title-lg-size); font-weight: var(--token-weight-medium); line-height: 1.3; color: var(--token-ink); margin: 0; } .token-title-md { font-family: var(--token-font-sans); font-size: var(--token-title-md-size); font-weight: var(--token-weight-medium); line-height: 1.4; color: var(--token-ink); margin: 0; } .token-title-sm { font-family: var(--token-font-sans); font-size: var(--token-title-sm-size); font-weight: var(--token-weight-medium); line-height: 1.4; color: var(--token-ink); margin: 0; } .token-body-md { font-family: var(--token-font-sans); font-size: var(--token-body-md-size); font-weight: var(--token-weight-regular); line-height: var(--token-body-lh); color: var(--token-body); margin: 0; } .token-body-sm { font-family: var(--token-font-sans); font-size: var(--token-body-sm-size); font-weight: var(--token-weight-regular); line-height: var(--token-body-lh); color: var(--token-body); margin: 0; } .token-caption { font-family: var(--token-font-sans); font-size: var(--token-caption-size); font-weight: var(--token-weight-medium); line-height: var(--token-caption-lh); color: var(--token-ink); margin: 0; } .token-caption-uppercase { font-family: var(--token-font-sans); font-size: var(--token-caption-uppercase-size); font-weight: var(--token-weight-medium); line-height: var(--token-caption-lh); letter-spacing: var(--token-uppercase-ls); text-transform: uppercase; color: var(--token-ink); margin: 0; } .token-code { font-family: var(--token-font-mono); font-size: var(--token-code-size); font-weight: var(--token-weight-regular); line-height: var(--token-code-lh); color: var(--token-ink); } /* ============== 组件快捷类(按 DESIGN.md Components) ============== */ /* button-primary(DESIGN.md 第 139-144 行) */ .token-button-primary { background-color: var(--token-coral); color: var(--token-on-primary); font-family: var(--token-font-sans); font-size: var(--token-button-size); font-weight: var(--token-weight-medium); line-height: var(--token-button-lh); border: 1px solid var(--token-coral); border-radius: var(--token-rounded-md); padding: 12px 20px; height: 40px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; cursor: pointer; transition: background-color 0.2s ease, transform 0.15s ease; } .token-button-primary:hover { background-color: var(--token-coral-active); border-color: var(--token-coral-active); transform: translateY(-1px); } .token-button-primary:active { background-color: var(--token-coral-active); transform: scale(0.98); } /* button-secondary(DESIGN.md 第 154-159 行) */ .token-button-secondary { background-color: var(--token-canvas); color: var(--token-ink); font-family: var(--token-font-sans); font-size: var(--token-button-size); font-weight: var(--token-weight-medium); line-height: var(--token-button-lh); border: 1px solid var(--token-hairline); border-radius: var(--token-rounded-md); padding: 12px 20px; height: 40px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; cursor: pointer; transition: border-color 0.2s ease; } .token-button-secondary:hover { border-color: var(--token-ink); } /* text-link(DESIGN.md 第 176-178 行) */ .token-text-link { color: var(--token-coral); text-decoration: none; cursor: pointer; transition: color 0.2s ease; } .token-text-link:hover { text-decoration: underline; color: var(--token-coral-active); } /* badge-pill(DESIGN.md 第 270-275 行) */ .token-badge { background-color: var(--token-surface-card); color: var(--token-ink); font-family: var(--token-font-sans); font-size: var(--token-caption-size); font-weight: var(--token-weight-medium); line-height: var(--token-caption-lh); padding: 4px 12px; border-radius: var(--token-rounded-pill); display: inline-flex; align-items: center; white-space: nowrap; } .token-badge-coral { background-color: var(--token-coral); color: var(--token-on-primary); font-size: var(--token-caption-uppercase-size); letter-spacing: var(--token-uppercase-ls); text-transform: uppercase; } /* feature-card(DESIGN.md 第 194-199 行) */ .token-feature-card { background-color: var(--token-surface-card); color: var(--token-ink); border-radius: var(--token-rounded-lg); padding: var(--token-card-padding-xl); font-family: var(--token-font-sans); } .token-feature-card .feature-title { font-size: var(--token-title-md-size); font-weight: var(--token-weight-medium); line-height: 1.4; color: var(--token-ink); margin: 0 0 8px; } .token-feature-card .feature-body { font-size: var(--token-body-md-size); font-weight: var(--token-weight-regular); line-height: var(--token-body-lh); color: var(--token-body); margin: 0; } /* product-mockup-card-dark(DESIGN.md 第 200-205 行) */ .token-product-mockup { background-color: var(--token-surface-dark); color: var(--token-on-dark); border-radius: var(--token-rounded-lg); padding: var(--token-card-padding-xl); font-family: var(--token-font-sans); } /* code-window-card(DESIGN.md 第 206-211 行) */ .token-code-window { background-color: var(--token-surface-dark); color: var(--token-on-dark); border-radius: var(--token-rounded-lg); padding: var(--token-card-padding-lg); font-family: var(--token-font-mono); font-size: var(--token-code-size); } .token-code-window pre { background-color: var(--token-surface-dark-soft); color: var(--token-on-dark); padding: 16px; border-radius: var(--token-rounded-md); overflow-x: auto; margin: 0; } /* callout-card-coral(DESIGN.md 第 230-235 行) */ .token-callout-coral { background-color: var(--token-coral); color: var(--token-on-primary); border-radius: var(--token-rounded-lg); padding: var(--token-callout-padding); font-family: var(--token-font-sans); } .token-callout-coral h2, .token-callout-coral h3 { color: var(--token-on-primary); margin: 0 0 16px; } /* text-input(DESIGN.md 第 242-248 行) */ .token-input { background-color: var(--token-canvas); color: var(--token-ink); font-family: var(--token-font-sans); font-size: var(--token-body-md-size); font-weight: var(--token-weight-regular); line-height: var(--token-body-lh); border: 1px solid var(--token-hairline); border-radius: var(--token-rounded-md); padding: var(--token-input-padding); height: 40px; width: 100%; box-sizing: border-box; transition: border-color 0.2s ease, box-shadow 0.2s ease; outline: none; } .token-input:focus { border-color: var(--token-coral); box-shadow: 0 0 0 3px rgba(204, 120, 92, 0.15); } /* category-tab(DESIGN.md 第 259-269 行) */ .token-tab { background-color: transparent; color: var(--token-muted); font-family: var(--token-font-sans); font-size: var(--token-nav-size); font-weight: var(--token-weight-medium); padding: var(--token-tab-padding); border-radius: var(--token-rounded-md); border: none; cursor: pointer; transition: color 0.2s ease, background-color 0.2s ease; text-decoration: none; display: inline-flex; align-items: center; } .token-tab:hover { color: var(--token-ink); } .token-tab-active { background-color: var(--token-surface-card); color: var(--token-ink); } /* top-nav(DESIGN.md 第 180-184 行) */ .token-top-nav { background-color: var(--token-canvas); color: var(--token-ink); font-family: var(--token-font-sans); height: 64px; display: flex; align-items: center; padding: 0 var(--token-spacing-xl); border-bottom: 1px solid var(--token-hairline); } /* cta-band-coral(DESIGN.md 第 282-287 行) */ .token-cta-coral { background-color: var(--token-coral); color: var(--token-on-primary); border-radius: var(--token-rounded-lg); padding: var(--token-cta-band-padding); text-align: center; } .token-cta-coral h2 { color: var(--token-on-primary); font-family: var(--token-font-display); font-size: var(--token-display-sm-size); font-weight: var(--token-display-sm-weight); letter-spacing: var(--token-display-sm-ls); line-height: var(--token-display-sm-lh); margin: 0 0 16px; } /* cta-band-dark(DESIGN.md 第 288-293 行) */ .token-cta-dark { background-color: var(--token-surface-dark); color: var(--token-on-dark); border-radius: var(--token-rounded-lg); padding: var(--token-cta-band-padding); text-align: center; } /* footer(DESIGN.md 第 294-298 行) */ .token-footer { background-color: var(--token-surface-dark); color: var(--token-on-dark-soft); font-family: var(--token-font-sans); font-size: var(--token-body-sm-size); line-height: var(--token-body-lh); padding: var(--token-footer-padding); } .token-footer a { color: var(--token-on-dark); text-decoration: none; transition: color 0.2s ease; } .token-footer a:hover { color: var(--token-coral); } /* ============== 暗色模式(DESIGN.md 文档允许每个表面模式单独定义) ============== */ @media (prefers-color-scheme: dark) { :root { --token-canvas: #1a1816; --token-surface-card: #252320; --token-surface-soft: #1f1e1b; --token-ink: #faf9f5; --token-body: #d0cdc6; --token-muted: #a09d96; --token-hairline: #2d2c28; --token-hairline-soft: #252320; } } /* ============== 响应式(DESIGN.md 第 546-552 行) ============== */ @media (max-width: 768px) { :root { --token-display-xl-size: 32px; --token-display-lg-size: 28px; --token-display-md-size: 24px; --token-display-sm-size: 22px; --token-spacing-section: 48px; } } @media (min-width: 1440px) { :root { --token-spacing-section: 96px; } } /* ================================================================= * 结束 · design-tokens.css v1.0.0 * 来源: DESIGN.md (Google Design Tokens Spec · Apache-2.0) * ================================================================= */