/* ═══════════════════════════════════════════════════════════════════ 天涌影视 · 设计令牌真源 (Teeyoung Design Tokens) ═══════════════════════════════════════════════════════════════════ 唯一真源。三个本地平台各自把旧变量名映射到这里的规范名， 平台内部组件代码零改动，只换变量定义段。 品牌：logo 英文标准字 #00A0DE（天蓝） —— 但 #00A0DE 在白底只有 2.96:1，不能承载文字。 故拆两层：vivid（识别）+ brand（交互），见下。 主题：天光 daylight（默认） / 夜幕 nightfall 切换方式： ═══════════════════════════════════════════════════════════════════ */ :root { /* ── 品牌蓝阶 · 不随主题变 ─────────────────────────────── */ --ty-blue-50: #E8F5FC; --ty-blue-100: #C9E9F8; --ty-blue-200: #9DD8F0; --ty-blue-300: #66C4EA; --ty-blue-400: #2EB2E4; --ty-blue-500: #00A0DE; /* ★ 品牌原色 · 识别层 */ --ty-blue-600: #0A6FC7; /* ★ 交互层 · 白字 5.11:1 */ --ty-blue-700: #0B5FAE; --ty-blue-800: #0A4F91; --ty-blue-900: #093F73; /* ── 中性阶 · 石墨 ────────────────────────────────────── */ --ty-gray-0: #FFFFFF; --ty-gray-25: #FAFBFC; --ty-gray-50: #F6F7F9; --ty-gray-100: #EFF1F5; --ty-gray-200: #E6E8EE; --ty-gray-300: #D3D7E0; --ty-gray-400: #A8AEBA; --ty-gray-500: #818695; --ty-gray-600: #5C6270; --ty-gray-700: #3D424F; --ty-gray-800: #25272E; --ty-gray-900: #181A20; --ty-gray-950: #0C0D10; --ty-gray-975: #14161B; /* ── 状态色 · 不随主题变 ───────────────────────────────── */ --ty-success: #0E8A73; /* 白底 4.28:1 ✅ */ --ty-warning: #C37720; /* 白底 3.51:1 — 仅徽标/大号 */ --ty-danger: #C54B54; --ty-info: var(--ty-blue-600); /* ── 恒定层 · 深色底上的文字（不随主题翻转） ───────────── */ --ty-on-dark: #F2F5F8; /* 深底正文 */ --ty-on-dark-muted: #9C9EAA; /* 深底次要 */ --ty-on-dark-faint: #767C89; /* 深底弱化 */ /* ── 几何 · 全平台一致 ─────────────────────────────────── */ --ty-radius: 12px; --ty-radius-sm: 8px; --ty-radius-lg: 16px; --ty-radius-pill: 999px; --ty-ease: cubic-bezier(.4, 0, .2, 1); --ty-dur: 180ms; /* 兼容旧写法 */ --ty-ease-out: ease-out; /* ── 尺寸 · 外壳三件套 ─────────────────────────────────── */ --ty-h-topbar: 56px; /* L0 全局顶栏 */ --ty-w-rail: 68px; /* L1 图标轨 */ --ty-w-nav: 240px; /* L2 内容导航（可收起） */ } /* ═══════════════════════════════════════════════════════════════════ 主题 · 天光 daylight —— 默认 ═══════════════════════════════════════════════════════════════════ */ :root, [data-theme="daylight"] { color-scheme: light; /* 表面层 */ --ty-canvas: var(--ty-gray-50); /* 页面底 */ --ty-surface: var(--ty-gray-0); /* 卡片 / 面板 */ --ty-raised: var(--ty-gray-25); /* 浮层 / 输入框 */ --ty-sunken: var(--ty-gray-100); /* 凹陷 / 代码块 */ --ty-overlay: rgba(24, 26, 32, .45); /* 描边 */ --ty-border: var(--ty-gray-200); --ty-border-strong: var(--ty-gray-300); /* 文字 */ --ty-text: var(--ty-gray-800); /* 主 */ --ty-text-muted: var(--ty-gray-600); /* 次 · 白底 6.1:1 */ --ty-text-faint: var(--ty-gray-500); /* 弱 · 白底 3.6:1，仅占位/禁用/装饰 */ --ty-text-inverse: var(--ty-gray-0); /* 品牌 · 识别层与交互层分离 */ --ty-brand-vivid: var(--ty-blue-500); /* logo / 图标 / 装饰条 */ --ty-brand: var(--ty-blue-600); /* 按钮底 / 链接 / 选中 */ --ty-brand-hover: var(--ty-blue-700); --ty-brand-active: var(--ty-blue-800); --ty-brand-ink: var(--ty-gray-0); /* 品牌底上的文字 */ --ty-brand-soft: var(--ty-blue-50); /* 选中底 / 浅标签 */ --ty-brand-soft-2: var(--ty-blue-100); --ty-brand-ring: rgba(0, 160, 222, .38); /* 导航轨 · 两个主题都深，保证"同一个产品"的骨架感 */ --ty-nav-bg: var(--ty-gray-900); --ty-nav-fg: #9C9EAA; --ty-nav-fg-active: var(--ty-gray-0); --ty-nav-hover-bg: #24262E; --ty-nav-active-bg: #2A2D36; --ty-nav-indicator: var(--ty-blue-500); --ty-nav-border: #2B2F38; /* 状态底 */ --ty-success-soft: #EBF5F0; --ty-success-line: #CDE3D8; --ty-warning-soft: #FFF1E6; --ty-warning-line: #EDD2BE; --ty-warning-ink: #954A1D; --ty-danger-soft: #FBEDEF; --ty-danger-line: #EAC7CD; --ty-danger-ink: #AA4050; --ty-info-soft: var(--ty-blue-50); --ty-info-line: var(--ty-blue-200); /* 阴影 */ --ty-shadow-1: 0 1px 2px rgba(24, 26, 32, .05); --ty-shadow-2: 0 8px 24px rgba(24, 26, 32, .07); --ty-shadow-3: 0 16px 42px rgba(24, 26, 32, .10); --ty-shadow-brand: 0 3px 13px rgba(10, 111, 199, .19); /* 选区 */ --ty-select-bg: var(--ty-blue-100); --ty-select-fg: var(--ty-blue-800); /* 工作区（可被"影厅"场景覆盖） */ --ty-stage-bg: var(--ty-gray-50); --ty-stage-text: var(--ty-gray-800); } /* ═══════════════════════════════════════════════════════════════════ 主题 · 夜幕 nightfall ═══════════════════════════════════════════════════════════════════ */ [data-theme="nightfall"] { color-scheme: dark; /* 表面层 —— 深炭四阶，沿用量子黑而非纯黑 */ --ty-canvas: #0C0D10; --ty-surface: #14161B; --ty-raised: #1C1F26; --ty-sunken: #101216; --ty-overlay: rgba(0, 0, 0, .62); --ty-border: #2E333D; --ty-border-strong: #3B414D; /* 文字 —— 略暖白，不用纯白（刺眼） */ --ty-text: #F2F5F8; --ty-text-muted: #A8AEBA; --ty-text-faint: #767C89; --ty-text-inverse: #0C0D10; /* 品牌 —— 暗底上让识别层直接承担交互，一色到底 */ --ty-brand-vivid: var(--ty-blue-500); --ty-brand: var(--ty-blue-500); /* 暗底 6.10:1 ✅ */ --ty-brand-hover: var(--ty-blue-400); /* 7.42:1 */ --ty-brand-active: var(--ty-blue-300); --ty-brand-ink: #0C0D10; /* 蓝底配深字，非白字 */ --ty-brand-soft: #0B2A3D; --ty-brand-soft-2: #103A52; --ty-brand-ring: rgba(0, 160, 222, .45); /* 导航轨 —— 比画布更深，仍有层次 */ --ty-nav-bg: #0A0B0E; --ty-nav-fg: #8A909E; --ty-nav-fg-active: #FFFFFF; --ty-nav-hover-bg: #1A1D24; --ty-nav-active-bg: #21242C; --ty-nav-indicator: var(--ty-blue-500); --ty-nav-border: #22252D; /* 状态底 —— 暗版低饱和 */ --ty-success-soft: #12251F; --ty-success-line: #1E4038; --ty-warning-soft: #2A1F14; --ty-warning-line: #43331F; --ty-warning-ink: #E0A458; /* 暗底回暖金，可读 */ --ty-danger-soft: #2A1417; --ty-danger-line: #452226; --ty-danger-ink: #E88B94; --ty-info-soft: #0B2A3D; --ty-info-line: #103A52; --ty-shadow-1: 0 1px 2px rgba(0, 0, 0, .45); --ty-shadow-2: 0 8px 24px rgba(0, 0, 0, .5); --ty-shadow-3: 0 16px 42px rgba(0, 0, 0, .6); --ty-shadow-brand: 0 3px 13px rgba(0, 160, 222, .25); --ty-select-bg: #103A52; --ty-select-fg: #C9E9F8; /* 工作区 —— 夜幕下"影厅"与整体合一 */ --ty-stage-bg: #0C0D10; --ty-stage-text: #F2F5F8; } /* ═══════════════════════════════════════════════════════════════════ 基元 · 三平台共用的最小原子 ═══════════════════════════════════════════════════════════════════ */ /* 品牌标记 —— logo 容器 */ .ty-mark { display: grid; place-items: center; width: 39px; height: 39px; border-radius: var(--ty-radius); color: var(--ty-brand-ink); background: linear-gradient(160deg, var(--ty-blue-500), var(--ty-blue-600)); box-shadow: var(--ty-shadow-brand); flex-shrink: 0; } .ty-mark--sm { width: 34px; height: 34px; border-radius: var(--ty-radius-sm); } /* 减少动画偏好 */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }