/* ============================================================================ * anim-tools-canvas-tokens.css · LibTV 998 design tokens → UTEN 暖色 conceptual translation * ---------------------------------------------------------------------------- * Plan v5 Phase 3 Stage B-0 Slice 0c * ref: research/libtv-canvas/UI-GROUND-TRUTH.md §17.9-17.13 * 设计取向：保留 LibTV token 命名结构，颜色全替换为 UTEN 玫瑰豆沙 + 冷米暖色系 * 不直接抄 LibTV 暗色（UTEN 是亮色暖主题） * 命名前缀：--canvas-* 避免跟 anim-tools.css :root 全局 token 冲突 * ============================================================================ */ :root { /* === FG（前景文字） · LibTV --fg-* 映射 === */ --canvas-fg-default: #1F1F1F; /* LibTV #f7f7f7 主文字 → UTEN 深咖 */ --canvas-fg-subtle: #6B6B6B; /* LibTV #86909c subtle → UTEN 灰咖 */ --canvas-fg-muted: #999999; /* LibTV #919191 muted → UTEN 浅咖 */ --canvas-fg-brand: #C97064; /* LibTV #5ddcff 浅蓝青 → UTEN 玫瑰豆沙 */ --canvas-fg-on-brand: #FFFFFF; /* 主色背景上的文字 */ /* === BG（背景） · LibTV --bg-* / mantine-color-body 映射 === */ --canvas-bg-surface: #FAFAFA; /* LibTV #171717 主底 → UTEN 冷米底 */ --canvas-bg-canvas: #F5F5F5; /* LibTV #171717 画布底 → UTEN 深米 */ --canvas-bg-card: #FFFFFF; /* LibTV #242424 卡/modal → UTEN 白卡 */ --canvas-bg-glass: rgba(255, 255, 255, 0.72); /* UTEN glass 层 */ --canvas-bg-glass-hover: rgba(255, 255, 255, 0.92); /* === Mantine 文本层 · LibTV --mantine-color-text 映射 === */ --canvas-color-text: #2A2A2A; /* LibTV #c9c9c9 普通正文 → UTEN 深咖中 */ /* === 按钮 / 强调 · LibTV --mantine-primary-color-filled 映射 === */ --canvas-primary-filled: #C97064; /* LibTV #1971c2 → UTEN 玫瑰豆沙 */ --canvas-primary-hover: #B45A50; --canvas-primary-active: #A04B42; --canvas-primary-soft: rgba(201, 112, 100, 0.10); --canvas-primary-ring: rgba(201, 112, 100, 0.24); /* === Danger / Confirm · LibTV mixed convention（§17.13）=== */ /* LibTV：删除蓝 / 退出未保存红 — UTEN 简化全部统一玫瑰豆沙主色 */ --canvas-danger: #D14545; /* unsaved-changes-warning 红 */ --canvas-danger-filled: #D14545; --canvas-danger-soft: rgba(209, 69, 69, 0.10); --canvas-confirm-blue: #C97064; /* LibTV 数据删除蓝 → UTEN 改玫瑰豆沙（统一主色） */ /* === Border · LibTV --card-border / --input-border 映射 === */ --canvas-border-default: #EAEAEA; /* LibTV #525252 → UTEN 浅米线 */ --canvas-border-strong: #D4D4D4; --canvas-border-focus: #C97064; /* focus ring 玫瑰豆沙 */ --canvas-border-soft: rgba(0, 0, 0, 0.06); /* === Text scale · LibTV §17.10 实证直接照抄 === */ --canvas-text-xs: 0.75rem; /* 12px · 节点 label / sub text */ --canvas-text-sm: 0.875rem; /* 14px · 普通正文 / chip / button */ --canvas-text-base: 1rem; /* 16px · 主文字 */ --canvas-text-lg: 1.125rem; /* 18px · section title */ --canvas-text-xl: 1.25rem; --canvas-text-2xl: 1.5rem; --canvas-text-3xl: 1.875rem; /* 30px · hero */ /* === Font family · LibTV §17.10 fallback chain 实证 === */ --canvas-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Helvetica, Arial, sans-serif; /* === Radius · LibTV 8-16px 实证 + UTEN 阶梯 === */ --canvas-radius-sm: 4px; --canvas-radius-md: 8px; --canvas-radius-lg: 12px; --canvas-radius-xl: 16px; --canvas-radius-pill: 999px; /* === Transition · LibTV §17.11 实证 cubic-bezier === */ --canvas-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --canvas-transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1); --canvas-transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1); --canvas-ease-out: cubic-bezier(0, 0, 0.2, 1); --canvas-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* === Shadow · UTEN 暖色细 shadow（rgba 走深咖偏色） === */ --canvas-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --canvas-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06); --canvas-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.10); --canvas-shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.14); /* === Z-index · overlay slot 分层 === */ --canvas-z-overlay-below: 5; /* 节点下方 inline editor (B-2 2b) */ --canvas-z-overlay-above: 6; /* 节点上方 variant toolbar (B-2 2c) */ --canvas-z-banner: 50; /* viewport fixed banner (B-3 3b chip mode) */ --canvas-z-modal: 100; --canvas-z-toast: 200; /* === Spacing scale · 4px 基准 === */ --canvas-space-1: 4px; --canvas-space-2: 8px; --canvas-space-3: 12px; --canvas-space-4: 16px; --canvas-space-5: 20px; --canvas-space-6: 24px; --canvas-space-8: 32px; --canvas-space-10: 40px; --canvas-space-12: 48px; /* === Chip / pill 专用（B-3 chip mode 5 类 + image 节点 3 chip）=== */ --canvas-chip-bg: rgba(255, 255, 255, 0.92); --canvas-chip-bg-hover: #FFFFFF; --canvas-chip-border: rgba(0, 0, 0, 0.08); --canvas-chip-fg: #2A2A2A; --canvas-chip-fg-active: #FFFFFF; --canvas-chip-bg-active: #C97064; --canvas-chip-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); /* === Selected state · 节点 / 边 hover + focus === */ --canvas-selected-ring: 2px solid #C97064; --canvas-selected-bg-soft: rgba(201, 112, 100, 0.06); --canvas-hover-bg: rgba(0, 0, 0, 0.04); /* === Node frame · 5 类节点共用 frame 视觉 === */ --canvas-node-bg: #FFFFFF; --canvas-node-border: #EAEAEA; --canvas-node-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); --canvas-node-shadow-selected: 0 4px 16px rgba(0, 0, 0, 0.10); /* === Inline editor (B-2 2b · image/audio 下方 + video idle 下方) * Polish #5: shadow 收敛 0 8px 24px → 0 4px 10px（按 LibTV 实证）+ bg 纯白 #FFFFFF */ --canvas-inline-bg: #FFFFFF; --canvas-inline-border: #EAEAEA; --canvas-inline-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); --canvas-inline-radius: 12px; /* === Variant toolbar (B-2 2c · video 生成后上方 5 chip) * Polish #6: 容器 transparent，chip 单独 hover bg（LibTV `.node-floating-ui` 实证 no bg/border/shadow） * 保留 var 以便兼容，但默认值改 transparent */ --canvas-variant-bg: transparent; --canvas-variant-border: transparent; --canvas-variant-shadow: none; /* Polish #4 chip 通用 hover/active bg（替代 fixed alpha） */ --canvas-chip-hover-bg: rgba(0, 0, 0, 0.05); --canvas-chip-active-bg: rgba(201, 112, 100, 0.10); /* === Running 态 chip (B-3 4b · body 中央 "生成中 X%" 可取消) === */ --canvas-running-bg: rgba(255, 255, 255, 0.92); --canvas-running-fg: #C97064; --canvas-running-border: rgba(201, 112, 100, 0.40); }