/* ================================================================== * design-token.css — DeepEdge SaaS Design System Tokens * Clean, Unified --ds-color-* Token Architecture * ================================================================== */ :root { color-scheme: light; /* Typography Reference */ --ds-typeface-plain: -apple-system, BlinkMacSystemFont, "Inter", "SF Pro Text", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; --ds-typeface-brand: var(--ds-typeface-plain); --ds-typeface-code: ui-monospace, "SF Mono", "Roboto Mono", Menlo, Consolas, monospace; /* ========================================================================== 1. Primitive Colors (原始基准色板) ========================================================================== */ --color-jet: 0 0% 4%; --color-charcoal: 0 0% 10%; --color-umbra: 221 12% 14%; --color-ink: 213 11% 16%; --color-ash: 216 5% 19%; --color-steel: 216 4% 22%; --color-fog: 216 4% 51%; --color-pewter: 213 12% 70%; --color-dove: 222 19% 86%; --color-nimbus: 228 21.74% 95.49%; --color-ivory: 40 18% 97%; --color-white: 0 0% 100%; --color-midnight: 214 58.3% 9.4%; --color-evenfall: 214 16.1% 28%; --color-breeze: 214 48.9% 73.9%; --color-dawn: 37 100% 76%; --color-sunset: 22 100% 51.6%; --color-dusk: 263 70% 50.4%; --color-twilight: 255 92% 76%; --color-glacier: 201 44% 38%; --color-glacier-soft: 201 42% 70%; --color-glacier-tint: 201 32% 93%; --color-codeblock: 0 0% 7%; /* Terminal & Traffic Status Colors (Single Source of Truth) */ --terminal-traffic-red: #ff5f57; --terminal-traffic-red-glow: #ff5f572e; --terminal-traffic-yellow: #ffbd2e; --terminal-traffic-yellow-glow: #ffbd2e1f; --terminal-traffic-green: #28c840; --terminal-traffic-green-glow: #28c8401f; /* ========================================================================== 2. Component Design System Tokens (--ds-color-*) — Light Mode ========================================================================== */ /* -------------------------------------------------------------------------- * 1. Primary Role (核心品牌/最高强调色) * 场景范围：主要CTA操作按钮(如"保存/发布")、激活的高亮Tab指示条、选中的单选框/复选框核心填充 * -------------------------------------------------------------------------- */ --ds-color-primary: hsl(var(--color-jet)); /* 主操作前景色/主要CTA背景 */ --ds-color-on-primary: hsl(var(--color-white)); /* Primary 上的高对比度反白文字/图标 */ --ds-color-primary-container: hsl(var(--color-dove)); /* 次级轻强调容器背景(如次级按钮、轻量激活卡片) */ --ds-color-on-primary-container: hsl(var(--color-jet)); /* Primary Container 上的正文字与图标 */ --ds-color-primary-fixed: hsl(var(--color-dove)); /* 不随深浅色主题剧烈反转的固定主色容器 */ --ds-color-primary-fixed-dim: hsl(var(--color-pewter)); /* 固定主色容器的次级微调色 */ /* -------------------------------------------------------------------------- * 2. Secondary Role (次级辅助角色) * 场景范围：次级操作按钮(Secondary Button)、辅助标签(Filter Chip)、分段控制器未选中项、次级操作栏 * -------------------------------------------------------------------------- */ --ds-color-secondary: hsl(var(--color-evenfall)); /* 次要操作前景色/次级控件主调 */ --ds-color-on-secondary: hsl(var(--color-white)); /* Secondary 上的高反差文字 */ --ds-color-secondary-container: hsl(var(--color-nimbus)); /* 筛选标签/次级Chip浅色底色 */ --ds-color-on-secondary-container:hsl(var(--color-midnight)); /* 筛选标签/次级Chip上的文字与图标 */ /* -------------------------------------------------------------------------- * 3. Tertiary Role (第三强调色 / 品牌点睛青蓝色) * 场景范围：特别功能标识、AI/智能分析模块点缀、数据分析对比项、特殊状态徽标 * -------------------------------------------------------------------------- */ --ds-color-tertiary: hsl(var(--color-glacier)); /* 第三品牌色前景色/AI特色标识 */ --ds-color-on-tertiary: hsl(var(--color-white)); /* Tertiary 上的反白文字 */ --ds-color-tertiary-container: hsl(var(--color-glacier-tint)); /* AI分析卡片背景、特色模块微浅底色 */ --ds-color-on-tertiary-container: hsl(var(--color-glacier)); /* AI/特色容器上的文字与图标 */ /* -------------------------------------------------------------------------- * 4. Semantic Status Roles (语义状态色: 提示 / 错误 / 警告 / 成功) * 场景范围：系统指引提示(Info)、表单校验错误(Error)、风险警示(Warning)、运行状态(Success) * -------------------------------------------------------------------------- */ /* Info: 系统指引、版本升级、常规信息通知 (直接映射复用 Tertiary 品牌第三色体系，消减冗余) */ --ds-color-info: var(--ds-color-tertiary); /* 映射至 Tertiary 前景色 */ --ds-color-on-info: var(--ds-color-on-tertiary); /* 映射至 on-Tertiary 文字 */ --ds-color-info-container: var(--ds-color-tertiary-container); /* 映射至 Tertiary 容器浅底 */ --ds-color-on-info-container: var(--ds-color-on-tertiary-container); /* 映射至 Tertiary 容器内容文本 */ /* Error: 危险操作、校验失败、系统严重异常 */ --ds-color-error: var(--terminal-traffic-red); /* 错误强调色、破坏性按钮背景、错误图标 (#ff5f57) */ --ds-color-on-error: hsl(var(--color-white)); /* 错误按钮/色卡上的反白文字 (纯白高对比度，和谐统一) */ --ds-color-error-container: color-mix(in srgb, var(--terminal-traffic-red) 12%, #ffffff); /* 错误Alert横幅底色、表单报错浅色背景 */ --ds-color-on-error-container: #991b1b; /* 错误横幅内的文字与加粗强调 */ /* Warning: 变更风险、配额耗尽提醒、待审核中间状态 */ --ds-color-warning: var(--terminal-traffic-yellow); /* 警告图标、警示Badge徽标 (#ffbd2e) */ --ds-color-on-warning: #78350f; /* 警告黄色上的和谐深琥珀棕文字，温润雅致且消除生硬黑字感 */ --ds-color-warning-container: color-mix(in srgb, var(--terminal-traffic-yellow) 14%, #ffffff); /* 警告Banner浅黄底色、通知背景 */ --ds-color-on-warning-container: #92400e; /* 警告Banner内的正文字体 */ /* Success: 操作完成、构建成功、服务正常在线 */ --ds-color-success: var(--terminal-traffic-green); /* 成功状态图标、在线绿点、已通过Badge (#28c840) */ --ds-color-on-success: hsl(var(--color-white)); /* 成功强调色上的反白文字 (纯白高对比度) */ --ds-color-success-container: color-mix(in srgb, var(--terminal-traffic-green) 12%, #ffffff); /* 成功提示横幅背景、完成状态浅绿底 */ --ds-color-on-success-container: #14532d; /* 成功横幅内的文字与加粗强调 */ /* -------------------------------------------------------------------------- * 5. Surface & Background Roles (感知表面与层级系统) * 场景范围：全屏画布基底、侧边导航栏、内容卡片、数据表格、弹窗抽屉浮层 * 规则：越靠近顶层/用户的浮层容器(Z轴上升)，使用越高阶的 Container * -------------------------------------------------------------------------- */ --ds-color-surface: hsl(0 0% 100%); /* 页面默认基础画布表面 */ --ds-color-surface-dim: hsl(220 13% 90%); /* 昏暗/下沉背景，用于侧栏或遮罩后方画布 */ --ds-color-surface-bright: hsl(0 0% 100%); /* 最亮表面，保证白色最高通透度 */ --ds-color-surface-container-lowest: hsl(0 0% 100%); /* 最底层容器：主工作区卡片(纯白独立卡片) */ --ds-color-surface-container-low: hsl(220 14% 98%); /* 低层容器：次级模块卡片、全局浅灰大背景 */ --ds-color-surface-container: hsl(220 13% 95.5%); /* 标准容器：侧边栏(Sidebar)、表格表头、Toolbar工具栏 */ --ds-color-surface-container-high: hsl(220 12% 91.5%); /* 高层容器：Hover悬停态底色、内嵌输入框浅底 */ --ds-color-surface-container-highest: hsl(220 12% 87%); /* 最高层容器：滚动条滑块、拖拽手柄、分割背景 */ --ds-color-surface-variant: hsl(220 14% 98%); /* 表面变体：与主表面微弱分离的辅助区域 */ --ds-color-on-surface: hsl(var(--color-jet)); /* 主表面正文、主标题(最高阅读对比度) */ --ds-color-on-surface-variant: hsl(var(--color-evenfall)); /* 次要文本、图标默认色、辅助描述、占位符 */ /* -------------------------------------------------------------------------- * 6. Inverse Roles (M3 反转层级角色) * 场景范围：Tooltip 悬浮极简文字气泡、黑底Snackbar、反差浮层(形成强烈反差吸引视线) * -------------------------------------------------------------------------- */ --ds-color-inverse-surface: hsl(224 15% 12%); /* 反转表面：Tooltip极深色底色、反差浮条背景 */ --ds-color-inverse-on-surface: hsl(220 14% 96%); /* 反转表面文字：Tooltip/Snackbar内的反白文本 */ --ds-color-inverse-primary: hsl(220 20% 90%); /* 反转表面内的主操作强调链接或图标 */ /* -------------------------------------------------------------------------- * 7. Outlines & Boundaries (轮廓与物理分割线) * 场景范围：输入框默认边框、卡片微边缘(1px)、数据表格行分割线、折叠面板边框 * -------------------------------------------------------------------------- */ --ds-color-outline: hsl(220 13% 88%); /* 强轮廓：未激活输入框边框、模态弹窗外边框 */ --ds-color-outline-variant: hsl(220 14% 94%); /* 弱轮廓：表格行底边线、卡片极淡分割线 */ /* -------------------------------------------------------------------------- * 8. Semantic Link Roles (经典蓝色超链接体系) * 场景范围：文档内嵌跳转链接、表格内可点击实体名称、面包屑导航、“了解更多”引导文字 * -------------------------------------------------------------------------- */ --ds-color-link: hsl(217 91% 53%); /* 默认超链接：明亮交互蓝，符合WCAG AA高辨识度 */ --ds-color-link-hover: hsl(221 83% 45%); /* 悬停状态：深蓝加深并伴随下划线反馈 */ --ds-color-link-visited: hsl(262 52% 47%); /* 已访问状态：经典优雅浅紫蓝 */ /* -------------------------------------------------------------------------- * 9. Scrim & Shadow (遮罩与阴影投射) * 场景范围：模态对话框背后全屏遮罩(Modal Backdrop)、卡片物理阴影 * -------------------------------------------------------------------------- */ --ds-color-scrim: rgba(0, 0, 0, 0.45); /* 模态弹窗/抽屉背后的半透明压暗遮罩 */ --ds-color-shadow: rgba(0, 0, 0, 0.05); /* 浅色模式下的底层环境光投射阴影 */ /* Typography Specs */ --ds-font-display-large-family: var(--ds-typeface-brand); --ds-font-display-large-weight: 600; --ds-font-display-large-size: 3.5rem; --ds-font-display-large-line-height: 1.10; --ds-font-display-large-tracking: -0.025em; --ds-font-headline-large-family: var(--ds-typeface-brand); --ds-font-headline-large-weight: 600; --ds-font-headline-large-size: 2rem; --ds-font-headline-large-line-height: 1.25; --ds-font-headline-large-tracking: -0.015em; --ds-font-headline-medium-family: var(--ds-typeface-brand); --ds-font-headline-medium-weight: 600; --ds-font-headline-medium-size: 1.5rem; --ds-font-headline-medium-line-height:1.3; --ds-font-headline-medium-tracking: -0.01em; --ds-font-headline-small-family: var(--ds-typeface-brand); --ds-font-headline-small-weight: 600; --ds-font-headline-small-size: 1.25rem; --ds-font-headline-small-line-height: 1.35; --ds-font-headline-small-tracking: 0em; --ds-font-title-large-family: var(--ds-typeface-brand); --ds-font-title-large-weight: 600; --ds-font-title-large-size: 1.125rem; --ds-font-title-large-line-height: 1.4; --ds-font-title-large-tracking: -0.01em; --ds-font-title-medium-family: var(--ds-typeface-brand); --ds-font-title-medium-weight: 500; --ds-font-title-medium-size: 1rem; --ds-font-title-medium-line-height: 1.45; --ds-font-title-medium-tracking: 0em; --ds-font-title-small-family: var(--ds-typeface-brand); --ds-font-title-small-weight: 500; --ds-font-title-small-size: 0.875rem; --ds-font-title-small-line-height: 1.45; --ds-font-title-small-tracking: 0em; --ds-font-body-large-family: var(--ds-typeface-plain); --ds-font-body-large-weight: 400; --ds-font-body-large-size: 1rem; --ds-font-body-large-line-height: 1.5; --ds-font-body-large-tracking: 0em; --ds-font-body-medium-family: var(--ds-typeface-plain); --ds-font-body-medium-weight: 400; --ds-font-body-medium-size: 0.875rem; --ds-font-body-medium-line-height: 1.5; --ds-font-body-medium-tracking: 0em; --ds-font-body-small-family: var(--ds-typeface-plain); --ds-font-body-small-weight: 400; --ds-font-body-small-size: 0.75rem; --ds-font-body-small-line-height: 1.4; --ds-font-body-small-tracking: 0em; --ds-font-label-large-family: var(--ds-typeface-plain); --ds-font-label-large-weight: 500; --ds-font-label-large-size: 0.875rem; --ds-font-label-large-line-height: 1.4; --ds-font-label-large-tracking: 0.01em; --ds-font-label-medium-family: var(--ds-typeface-plain); --ds-font-label-medium-weight: 500; --ds-font-label-medium-size: 0.75rem; --ds-font-label-medium-line-height: 1.35; --ds-font-label-medium-tracking: 0.02em; --ds-font-label-small-family: var(--ds-typeface-plain); --ds-font-label-small-weight: 500; --ds-font-label-small-size: 0.6875rem; --ds-font-label-small-line-height: 1.35; --ds-font-label-small-tracking: 0.03em; --ds-font-code-medium-family: var(--ds-typeface-code); --ds-font-code-medium-weight: 400; --ds-font-code-medium-size: 0.8125rem; --ds-font-code-medium-line-height: 1.3; --ds-font-code-medium-tracking: 0em; /* Shapes & Corners */ --ds-corner-none: 0px; --ds-corner-extra-small: 4px; --ds-corner-small: 6px; --ds-corner-medium: 10px; --ds-corner-large: 14px; --ds-corner-extra-large: 20px; --ds-corner-full: 9999px; /* Elevation (多阶弥散物理阴影 & 柔和微描边轮廓) */ --ds-elevation-0: 0px; --ds-elevation-soft: 0 1px 2px 0 rgba(15, 23, 42, 0.03), 0 0 0 1px rgba(15, 23, 42, 0.06); --ds-elevation-1: 0 2px 4px -1px rgba(15, 23, 42, 0.04), 0 4px 12px -2px rgba(15, 23, 42, 0.05), 0 0 0 1px rgba(15, 23, 42, 0.07); --ds-elevation-2: 0 4px 6px -1px rgba(15, 23, 42, 0.05), 0 10px 24px -4px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(15, 23, 42, 0.08); --ds-elevation-3: 0 12px 28px -4px rgba(15, 23, 42, 0.12), 0 8px 10px -6px rgba(15, 23, 42, 0.05), 0 0 0 1px rgba(15, 23, 42, 0.09); --ds-elevation-4: 0 24px 48px -12px rgba(15, 23, 42, 0.18), 0 12px 16px -8px rgba(15, 23, 42, 0.06), 0 0 0 1px rgba(15, 23, 42, 0.1); /* Motion */ --ds-motion-short-3: 120ms; --ds-motion-short-4: 180ms; --ds-motion-medium-1: 240ms; --ds-motion-medium-2: 300ms; --ds-easing-standard: cubic-bezier(0.16, 1, 0.3, 1); --ds-easing-decelerate: cubic-bezier(0, 0, 0.2, 1); --ds-easing-emphasized: cubic-bezier(0.2, 0, 0, 1); /* 创作首页橱窗展示专用（Plan §5.1 授权的两个新 token，旧 token 一律不改）： * 1) 强调色，暗色按现有 dark 机制覆写； * 2) 展示型循环动效时长/缓动，只在 :root 定义，仅首页橱窗组件消费， * 属内容展示而非等待表现（例外条款见 frontend/design.md §6），减弱动态时全部停止。 */ --ds-color-showcase-accent: #E8483F; /* 数据可视化专用色阶（design.md §2.3-5 例外：收口在 token 层，只给营销分析报告的图表 / 两张卡 / 首页展示块消费）。 * 取值同预览稿 v3 report-tokens.css，已按 dataviz 调色板校验（浅 / 深均通过）。 * 分类色顺序固定、按实体着色：1 = 本品（数据橙，全页唯一强调色），2–6 = 按确认顺序的竞品； * 情感三档 + 纸面底色。墨青黑扉页复用 --ds-color-inverse-surface，不另设。 * 6 号取黄绿（hue≈84°）：4 号金（41°）与 3 号青（176°）之间是本色阶最大的色相空档， * 落在正中；与情感 positive 也拉开 ΔE≥40，避免与情感图同页混读。 */ --ds-color-dataviz-1: #E4572E; --ds-color-dataviz-2: #2F5DA8; --ds-color-dataviz-3: #0F948B; --ds-color-dataviz-4: #B7851A; --ds-color-dataviz-5: #9A5BA0; --ds-color-dataviz-6: #6B9A26; --ds-color-dataviz-positive: #2E7D5B; --ds-color-dataviz-negative: #B3261E; --ds-color-dataviz-neutral: #8A8F98; --ds-color-dataviz-paper: #F7F5F1; --ds-motion-showcase-template-rail: 104s; --ds-motion-showcase-gallery-rail: 88s; --ds-motion-showcase-daily-rail: 110s; --ds-motion-showcase-question-1: 54s; --ds-motion-showcase-question-2: 68s; --ds-motion-showcase-question-3: 60s; --ds-motion-showcase-question-4: 76s; --ds-motion-showcase-scan: 5.2s; --ds-motion-showcase-scan-hover: 2.1s; --ds-motion-showcase-scan-stagger: .43s; --ds-motion-showcase-blink: 1.1s; --ds-motion-showcase-daily-blink: 1.6s; --ds-motion-showcase-beam: 3.6s; --ds-motion-showcase-beam-stagger: .8s; --ds-motion-showcase-breathing: 2.4s; --ds-motion-showcase-breathing-stagger: .45s; --ds-motion-showcase-shot-cycle: 12s; --ds-motion-showcase-shot-step: 3s; --ds-motion-showcase-thumbnail-step: 1.5s; --ds-motion-showcase-flight: 2.6s; --ds-motion-showcase-flight-stagger: .85s; --ds-easing-showcase-linear: linear; --ds-easing-showcase-in-out: ease-in-out; --ds-easing-showcase-blink: steps(2, end); /* 首页橱窗装饰色（Plan §5.1 用户裁定：新增一组橱窗装饰色 token，恢复设计稿配色）。 * 值照抄设计稿 design-source.html 的 const T[].c（19 套模板卡）与 const IMG{}.g（12 张生图）， * 只由 home-showcase.css 消费，不被通用组件或别的模块引用； * 装饰内容色不按主题各定义一套，卡面深底与文字可读性由 --chc-art-base / --chc-art-alpha 承担。 */ --ds-color-showcase-art-tpl-border_explainer-1: #2C3E50; --ds-color-showcase-art-tpl-border_explainer-2: #4A6572; --ds-color-showcase-art-tpl-presenter_mix-1: #4A3B52; --ds-color-showcase-art-tpl-presenter_mix-2: #7D5A6B; --ds-color-showcase-art-tpl-product-1: #1F3A3D; --ds-color-showcase-art-tpl-product-2: #3E6B5C; --ds-color-showcase-art-tpl-product_en-1: #33343F; --ds-color-showcase-art-tpl-product_en-2: #5A5C6E; --ds-color-showcase-art-tpl-product_ind-1: #3D3324; --ds-color-showcase-art-tpl-product_ind-2: #7A6236; --ds-color-showcase-art-tpl-story-1: #4A2F2A; --ds-color-showcase-art-tpl-story-2: #8A5A42; --ds-color-showcase-art-tpl-industry_talk-1: #25333F; --ds-color-showcase-art-tpl-industry_talk-2: #4B6478; --ds-color-showcase-art-tpl-knowledge_live_action-1: #2E3A2C; --ds-color-showcase-art-tpl-knowledge_live_action-2: #57704F; --ds-color-showcase-art-tpl-hotspot_factory-1: #4B2B3A; --ds-color-showcase-art-tpl-hotspot_factory-2: #8A4560; --ds-color-showcase-art-tpl-ppt_to_video-1: #1E3838; --ds-color-showcase-art-tpl-ppt_to_video-2: #3E7272; --ds-color-showcase-art-tpl-music-1: #2B3550; --ds-color-showcase-art-tpl-music-2: #566489; --ds-color-showcase-art-tpl-famous-1: #3A3228; --ds-color-showcase-art-tpl-famous-2: #6E5F44; --ds-color-showcase-art-tpl-digital_human-1: #332C44; --ds-color-showcase-art-tpl-digital_human-2: #665A8A; --ds-color-showcase-art-tpl-knowledge-1: #2F3524; --ds-color-showcase-art-tpl-knowledge-2: #697A42; --ds-color-showcase-art-tpl-custom-1: #2B2B33; --ds-color-showcase-art-tpl-custom-2: #5E5E6E; --ds-color-showcase-art-tpl-courseware-1: #3A3527; --ds-color-showcase-art-tpl-courseware-2: #7E7448; --ds-color-showcase-art-tpl-knowledge_diagram-1: #1A233A; --ds-color-showcase-art-tpl-knowledge_diagram-2: #32467A; --ds-color-showcase-art-img-poster-1: #1B2A38; --ds-color-showcase-art-img-poster-2: #3E5C6B; --ds-color-showcase-art-img-poster-3: #8FA6A8; --ds-color-showcase-art-img-social-1: #1F3A2E; --ds-color-showcase-art-img-social-2: #3E6B4C; --ds-color-showcase-art-img-social-3: #93B37A; --ds-color-showcase-art-img-kv-1: #22233A; --ds-color-showcase-art-img-kv-2: #41406B; --ds-color-showcase-art-img-kv-3: #7E6F9E; --ds-color-showcase-art-img-festive-1: #4A1F2B; --ds-color-showcase-art-img-festive-2: #9E3A48; --ds-color-showcase-art-img-festive-3: #E08A6B; --ds-color-showcase-art-img-ad-1: #5A2E2A; --ds-color-showcase-art-img-ad-2: #B0603F; --ds-color-showcase-art-img-ad-3: #E0A567; --ds-color-showcase-art-img-detail-1: #2E2E33; --ds-color-showcase-art-img-detail-2: #55565F; --ds-color-showcase-art-img-detail-3: #9A9BA6; --ds-color-showcase-art-img-ig-1: #243447; --ds-color-showcase-art-img-ig-2: #4E6E8E; --ds-color-showcase-art-img-ig-3: #A8BCCB; --ds-color-showcase-art-img-banner-1: #1F3A33; --ds-color-showcase-art-img-banner-2: #3E6B5C; --ds-color-showcase-art-img-banner-3: #8FB3A2; --ds-color-showcase-art-img-coupon-1: #3D2A18; --ds-color-showcase-art-img-coupon-2: #8A5A2E; --ds-color-showcase-art-img-coupon-3: #D9A362; --ds-color-showcase-art-img-spec-1: #2C2F3E; --ds-color-showcase-art-img-spec-2: #4E5570; --ds-color-showcase-art-img-spec-3: #959BB5; --ds-color-showcase-art-img-case-1: #22323A; --ds-color-showcase-art-img-case-2: #4C7080; --ds-color-showcase-art-img-case-3: #9BB4BF; --ds-color-showcase-art-img-story-1: #3A2418; --ds-color-showcase-art-img-story-2: #8A5030; --ds-color-showcase-art-img-story-3: #D69A6A; /* Spacing */ --ds-sys-space-xs: 0.25rem; --ds-sys-space-sm: 0.5rem; --ds-sys-space-md: 0.75rem; --ds-sys-space-lg: 1rem; --ds-sys-space-xl: 1.5rem; --ds-sys-space-xxl: 2rem; --ds-sys-space-xxxl: 3rem; } /* ========================================================================== Component Design System Tokens (--ds-color-*) — Dark Mode ========================================================================== */ .dark, [data-theme="dark"] { color-scheme: dark; /* -------------------------------------------------------------------------- * 1. Primary Role (核心品牌/最高强调色 - 深色模式适配) * 场景范围：深色模式主要CTA按钮(高反光亮白)、激活Tab高亮条、选中Radio/Checkbox * -------------------------------------------------------------------------- */ --ds-color-primary: hsl(var(--color-white)); /* 主操作背景(亮白反差) */ --ds-color-on-primary: hsl(var(--color-jet)); /* Primary 亮底上的深黑文字/图标 */ --ds-color-primary-container: hsl(222 14% 20%); /* 次级强调容器背景(兼顾深冷暗调与通透辨识度，边界清晰) */ --ds-color-on-primary-container: hsl(220 25% 92%); /* 次级容器上的高亮文字与图标 (高可读性反差) */ --ds-color-primary-fixed: hsl(var(--color-steel)); /* 固定主色容器 */ --ds-color-primary-fixed-dim: hsl(var(--color-ash)); /* 固定主色容器次级调 */ /* -------------------------------------------------------------------------- * 2. Secondary Role (次级辅助角色 - 深色模式适配) * 场景范围：次级操作按钮(Secondary Button)、辅助标签(Filter Chip)、分段控制器未选中项 * -------------------------------------------------------------------------- */ --ds-color-secondary: hsl(var(--color-pewter)); /* 次要操作前景色/次级控件主调 */ --ds-color-on-secondary: hsl(var(--color-jet)); /* Secondary 上的高反差深色文字 */ --ds-color-secondary-container: hsl(var(--color-ash)); /* 筛选标签/次级Chip深色底色 */ --ds-color-on-secondary-container:hsl(var(--color-dove)); /* 筛选标签/次级Chip上的文字与图标 */ /* -------------------------------------------------------------------------- * 3. Tertiary Role (第三强调色 / 品牌点睛青蓝色 - 深色模式适配) * 场景范围：特别功能标识、AI/智能分析模块点缀、数据分析对比项、特殊状态徽标 * -------------------------------------------------------------------------- */ --ds-color-tertiary: hsl(var(--color-glacier-soft)); /* 第三品牌色前景色/AI特色标识(低眩光柔和冰川蓝) */ --ds-color-on-tertiary: hsl(var(--color-jet)); /* Tertiary 上的深色文字 */ --ds-color-tertiary-container: hsl(var(--color-glacier) / 0.35);/* AI分析卡片背景、特色模块半透明深蓝底色 */ --ds-color-on-tertiary-container: hsl(var(--color-glacier-soft)); /* AI/特色容器上的文字与图标 */ /* -------------------------------------------------------------------------- * 4. Semantic Status Roles (语义状态色: 提示 / 错误 / 警告 / 成功 - 深色模式适配) * 场景范围：暗底系统指引提示(Info)、表单校验错误(Error)、风险警示(Warning)、运行状态(Success) * -------------------------------------------------------------------------- */ /* Info: 系统指引、版本通知、常规信息提示 (直接映射复用 Tertiary 品牌第三色体系，消减冗余) */ --ds-color-info: var(--ds-color-tertiary); /* 映射至 Tertiary 前景色 */ --ds-color-on-info: var(--ds-color-on-tertiary); /* 映射至 on-Tertiary 文字 */ --ds-color-info-container: var(--ds-color-tertiary-container); /* 映射至 Tertiary 容器暗底 */ --ds-color-on-info-container: var(--ds-color-on-tertiary-container); /* 映射至 Tertiary 容器内容文本 */ /* Error: 危险操作、校验失败、系统严重异常 */ --ds-color-error: var(--terminal-traffic-red); /* 错误强调色、破坏性按钮背景、错误图标 */ --ds-color-on-error: hsl(var(--color-white)); /* 错误按钮/色卡上的纯白反光文字，通透清晰无生硬黑块 */ --ds-color-error-container: color-mix(in srgb, var(--terminal-traffic-red) 20%, transparent); /* 错误Alert暗底横幅底色 */ --ds-color-on-error-container: #fca5a5; /* 错误横幅内的文字与加粗强调 */ /* Warning: 变更风险、配额耗尽提醒、待审核中间状态 */ --ds-color-warning: var(--terminal-traffic-yellow); /* 警告图标、警示Badge徽标 */ --ds-color-on-warning: #451a03; /* 警告黄色上的高对比深琥珀棕文字，极度温和自然 */ --ds-color-warning-container: color-mix(in srgb, var(--terminal-traffic-yellow) 20%, transparent); /* 警告Banner暗底底色 */ --ds-color-on-warning-container: #fde68a; /* 警告Banner内的正文字体 */ /* Success: 操作完成、构建成功、服务正常在线 */ --ds-color-success: var(--terminal-traffic-green); /* 成功状态图标、在线绿点、已通过Badge */ --ds-color-on-success: hsl(var(--color-white)); /* 成功强调色上的纯白文字，视觉层次整齐和谐 */ --ds-color-success-container: color-mix(in srgb, var(--terminal-traffic-green) 20%, transparent); /* 成功提示暗底横幅背景 */ --ds-color-on-success-container: #86efac; /* 成功横幅内的文字与加粗强调 */ /* -------------------------------------------------------------------------- * 5. Surface & Background Roles (感知表面与层级系统 - 深色上升梯级) * 场景范围：全屏暗色画布基底、侧边栏、卡片容器、浮动弹窗 * 规则：越靠近顶层/用户的浮层容器(Z轴上升)，背景亮度依次阶梯提升，物理层次分明 * -------------------------------------------------------------------------- */ --ds-color-surface: hsl(224 15% 6%); /* 页面深黑基础画布表面 */ --ds-color-surface-dim: hsl(224 15% 4.5%); /* 极暗深沉背景(用于侧边栏下沉区) */ --ds-color-surface-bright: hsl(224 11% 22%); /* 最亮暗色表面 */ --ds-color-surface-container-lowest: hsl(224 15% 4.5%); /* 最底层容器：主工作区最深背景 */ --ds-color-surface-container-low: hsl(224 13% 8.5%); /* 低层容器：次级工作卡片底色 */ --ds-color-surface-container: hsl(224 12% 12%); /* 标准容器：主内容卡片、表格行背景 */ --ds-color-surface-container-high: hsl(224 11% 15.5%); /* 高层容器：悬停高亮态、模态弹窗(Modal)主体 */ --ds-color-surface-container-highest: hsl(224 10% 19.5%); /* 最高层容器：下拉菜单(Dropdown)、气泡弹窗(Popover) */ --ds-color-surface-variant: hsl(224 13% 8.5%); /* 表面变体：与主表面微弱分离的暗色区域 */ --ds-color-on-surface: hsl(var(--color-dove)); /* 主表面正文、主标题(柔和高对比防刺眼白) */ --ds-color-on-surface-variant: hsl(var(--color-pewter)); /* 次要文本、图标默认色、辅助描述、占位符 */ /* -------------------------------------------------------------------------- * 6. Inverse Roles (M3 反转层级角色 - 深色模式下反转为浅色高光) * 场景范围：暗色模式下的 Tooltip 浅白气泡、反差强调浮层 * -------------------------------------------------------------------------- */ --ds-color-inverse-surface: hsl(220 14% 95%); /* 反转表面：暗黑环境下的浅白反差Tooltip底色 */ --ds-color-inverse-on-surface: hsl(224 15% 10%); /* 反转表面文字：Tooltip气泡内的深黑字 */ --ds-color-inverse-primary: hsl(var(--color-jet)); /* 反转表面内的主操作强调色 */ /* -------------------------------------------------------------------------- * 7. Outlines & Boundaries (轮廓与物理分割线 - 深色模式适配) * 场景范围：暗底输入框边框、卡片微边缘(1px)、数据表格行分割线 * -------------------------------------------------------------------------- */ --ds-color-outline: hsl(224 10% 18%); /* 强轮廓：未激活输入框边框、卡片外边框 */ --ds-color-outline-variant: hsl(224 12% 11%); /* 弱轮廓：表格行底边线、暗底微弱分割线 */ /* -------------------------------------------------------------------------- * 8. Semantic Link Roles (经典蓝色超链接体系 - 深色模式适配) * 场景范围：暗底文档内嵌跳转链接、实体可点击文字 * -------------------------------------------------------------------------- */ --ds-color-link: hsl(217 91% 65%); /* #5ca0ff 明亮天蓝，暗底高对比度且不刺眼 */ --ds-color-link-hover: hsl(217 95% 76%); /* #8ec0ff 悬停提亮并伴随下划线反馈 */ --ds-color-link-visited: hsl(265 80% 78%); /* #c4a1ff 浅紫蓝 */ /* -------------------------------------------------------------------------- * 9. Scrim & Shadow (遮罩与阴影投射 - 深色模式适配) * 场景范围：全屏遮罩(Modal Backdrop)、暗黑物理阴影 * -------------------------------------------------------------------------- */ --ds-color-scrim: rgba(0, 0, 0, 0.75); /* 模态弹窗背后的深黑遮罩 */ --ds-color-shadow: rgba(0, 0, 0, 0.5); /* 暗黑投影环境光 */ /* 创作首页橱窗展示专用强调色（暗色覆写；时长 token 不随主题变化，仅在 :root 定义） */ --ds-color-showcase-accent: #FF6A5E; /* 数据可视化专用色阶（暗色） */ --ds-color-dataviz-1: #E25A33; --ds-color-dataviz-2: #6A8FE0; --ds-color-dataviz-3: #139A83; --ds-color-dataviz-4: #B0841C; --ds-color-dataviz-5: #A56FAE; --ds-color-dataviz-6: #7FB03A; --ds-color-dataviz-positive: #4FA37D; --ds-color-dataviz-negative: #E5675C; --ds-color-dataviz-neutral: #9AA0A8; --ds-color-dataviz-paper: #151619; /* Dark Mode Elevation Shadows with crisp specular outlines */ --ds-elevation-0: 0px; --ds-elevation-soft: 0 1px 2px 0 rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08); --ds-elevation-1: 0 2px 4px -1px rgba(0, 0, 0, 0.45), 0 4px 12px -2px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.1); --ds-elevation-2: 0 4px 8px -1px rgba(0, 0, 0, 0.55), 0 12px 24px -4px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.12); --ds-elevation-3: 0 12px 28px -4px rgba(0, 0, 0, 0.75), 0 8px 12px -6px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.14); --ds-elevation-4: 0 24px 48px -12px rgba(0, 0, 0, 0.9), 0 12px 16px -8px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.16); }