/* * 纳米大片 Design Kit · Tokens * * 三层结构： * Layer 1 · 基础色阶（裸色） * Layer 2 · 业务语义（P视频-Dark 主题，严格对齐 Figma Library） * Layer 3 · 几何（Radius / Space / Shadow / 控件尺寸） * * 出处：Figma Library「业务规范 · P视频-Dark 列」 * 主题：仅 Dark 工作台。 */ /* ========== Layer 1 · 基础色阶 ========== */ :root { /* —— 蓝色 —— */ --blue-10: #00164D; --blue-9: #002679; --blue-8: #003AA6; --blue-7: #0051D2; --blue-6: #006BFF; --blue-5: #2E8CFF; --blue-4: #5DABFF; --blue-3: #8BC7FF; --blue-2: #BAE0FF; --blue-1: rgba(0, 107, 255, 0.1); /* —— 绿色（成功语义 + AI 强调） —— */ --green-7: #09743A; --green-6: #12BB5F; --green-5: #2FCD77; --green-1: rgba(29, 171, 105, 0.1); /* AI 强调专用渐变（来自前端 ant-btn-ai 与 video-creator confirm 主按钮） */ --gradient-ai: linear-gradient(91deg, #55DF77 0%, #98E53F 100%); --gradient-ai-hover: linear-gradient(91deg, #6FE489 0%, #A8EB55 100%); --gradient-ai-active: linear-gradient(91deg, #3DBE5F 0%, #82CC30 100%); /* —— 橙色 —— */ --orange-7: #B45312; --orange-6: #EC670F; --orange-5: #FFA35D; --orange-1: rgba(255, 157, 46, 0.1); /* —— 红色 —— */ --red-7: #C52A2A; --red-6: #ED3F3F; --red-5: #F56060; --red-1: rgba(237, 63, 63, 0.1); /* —— 黑色透明阶 —— */ --black-100: #000000; --black-90: rgba(0, 0, 0, 0.9); --black-80: rgba(0, 0, 0, 0.8); --black-50: rgba(0, 0, 0, 0.5); --black-30: rgba(0, 0, 0, 0.3); --black-20: rgba(0, 0, 0, 0.2); --black-10: rgba(0, 0, 0, 0.1); /* —— 白色透明阶 —— */ --white-100: #FFFFFF; --white-90: rgba(255, 255, 255, 0.9); --white-80: rgba(255, 255, 255, 0.8); --white-50: rgba(255, 255, 255, 0.5); --white-30: rgba(255, 255, 255, 0.3); --white-20: rgba(255, 255, 255, 0.2); --white-12: rgba(255, 255, 255, 0.12); --white-10: rgba(255, 255, 255, 0.1); --white-8: rgba(255, 255, 255, 0.08); --white-6: rgba(255, 255, 255, 0.06); --white-4: rgba(255, 255, 255, 0.04); --white-2: rgba(255, 255, 255, 0.02); /* —— 其他语义（Dark 列） —— */ --purple-dark: #9B7CF7; --cyan-dark: #61AED8; /* ========== Layer 3 · 几何 ========== */ /* Radius（Figma 只有两档） */ --radius-4: 4px; /* 按钮、输入框等基础控件 */ --radius-8: 8px; /* 弹窗、卡片等容器 */ --radius-pill: 999px; /* Space（8 点网格） */ --space-8: 8px; --space-16: 16px; --space-24: 24px; --space-32: 32px; --space-56: 56px; /* 必要的子格（非 8 倍数，行内紧凑场景） */ --space-2: 2px; --space-4: 4px; --space-12: 12px; /* Shadow（Figma 投影：全部 #000000 不同透明度） */ --shadow-1: 0 1px 4px 0 rgba(0, 0, 0, 0.15); --shadow-2: 0 4px 8px 0 rgba(0, 0, 0, 0.40); --shadow-3: 0 8px 16px 0 rgba(0, 0, 0, 0.10); --shadow-dropdown: 0 4px 16px 0 rgba(0, 0, 0, 0.50); --shadow-modal: 0 8px 32px 0 rgba(0, 0, 0, 0.50); /* 控件尺寸 */ --control-h-sm: 28px; --control-h-md: 32px; --control-h-lg: 40px; --control-h-xl: 52px; /* 字体 */ --font-family-base: Inter, "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --font-size-2xs: 11px; --font-size-xs: 12px; --font-size-sm: 13px; --font-size-md: 14px; --font-size-lg: 16px; --font-size-xl: 20px; --font-size-2xl: 24px; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --line-height-tight: 1.25; --line-height-base: 1.5; --line-height-loose: 1.7; /* 动效 */ --duration-fast: 120ms; --duration-base: 180ms; --duration-slow: 260ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1); } /* ========== Layer 2 · 业务语义（P视频-Dark） ========== */ body { /* —— 文字 / 图标 —— */ --text-primary: var(--white-90); /* 一级 */ --text-secondary: var(--white-80); /* 二级 */ --text-tertiary: var(--white-50); /* 三级 */ --text-quaternary: var(--white-30); /* 四级 */ --text-disabled: var(--white-20); /* 禁用 */ --text-link: var(--blue-8); /* 链接 #003AA6 */ --text-inverse: var(--black-90); /* 反色 */ /* —— 描边 —— */ --border-primary: var(--white-80); /* 一级 */ --border-secondary: var(--white-20); /* 二级 */ --border-tertiary: var(--white-10); /* 三级 */ --border-ambient: var(--white-8); /* 氛围色描边 */ /* —— 背景（Figma Dark 三层） —— */ --bg-1: #0F1113; /* 氛围色一级（页面主背景） */ --bg-2: #000000; /* 氛围色二级（纯黑） */ --bg-3: #252729; /* 氛围色三级（卡片 / 容器） */ --bg-inverse: #1C1E20; /* 反色背景（白色场景的等价深底） */ --bg-hover-selected: var(--white-12); /* 浅灰 - 悬停 & 选中 */ --bg-editor: var(--white-4); /* 浅灰 - 编辑器 */ --bg-input: var(--white-2); /* 浅灰 - 输入框 */ --bg-light: var(--white-20); /* 浅白 */ /* —— 按钮 —— */ --btn-primary-default: var(--white-100); /* 一级 - 默认 & 按下 */ --btn-primary-hover: var(--white-100); /* 一级 - 悬停（Figma 标的是 FFF，与默认相同） */ --btn-primary-text: var(--black-100); --btn-secondary-default: #1B1D1F; /* 二级 - 默认 & 按下 */ --btn-secondary-hover-light: var(--white-8); /* 二级 - 悬停（浅底）*/ --btn-secondary-hover-dark: var(--white-50); /* 二级 - 悬停（深底）*/ --btn-secondary-text: var(--white-90); --btn-secondary-border: var(--white-20); --btn-disabled-bg: var(--white-30); --btn-disabled-text: var(--white-50); /* —— 语义 / 提示（Dark 用青色，不是蓝色！） —— */ --info-text: var(--blue-7); /* #0051D2 */ --info-default: #00CCD3; --info-hover: #29D4DA; --info-bg: rgba(0, 204, 211, 0.1); /* —— 语义 / 成功 —— */ --success-text: var(--green-7); /* #09743A */ --success-default: var(--green-6); /* #12BB5F */ --success-hover: #38C679; --success-bg: rgba(18, 187, 95, 0.1); /* 12BB5F-10% */ /* —— 语义 / 警告 —— */ --warning-text: #FFA66A; --warning-default: var(--orange-6); /* #EC670F */ --warning-hover: #FFB481; --warning-bg: rgba(236, 103, 15, 0.1); /* EC670F-10% */ /* —— 语义 / 错误 —— */ --error-text: var(--red-7); /* #C52A2A */ --error-default: #F15A5A; --error-hover: #F87777; --error-bg: rgba(241, 90, 90, 0.1); /* F15A5A-10% */ /* —— 语义 / 其他 —— */ --purple: var(--purple-dark); /* #9B7CF7 */ --cyan: var(--cyan-dark); /* #61AED8 */ /* —— 投影 —— */ --shadow-card: var(--shadow-1); --shadow-raised: var(--shadow-2); --shadow-pop: var(--shadow-dropdown); --shadow-dialog: var(--shadow-modal); background: var(--bg-1); color: var(--text-primary); }