/* AUTO-GENERATED — do not edit manually. * Source: figma-data/normalized/variables.json (TVU Design System Figma) * Extracted: 2026-04-22T00:00:00.000Z * Regenerate: pnpm generate * Dark/Light theme: apply [data-theme="light"] to to switch to light mode. */ /* ── Dark mode (default) ── */ :root { --color-white: #ffffff; --color-grey-2: #f8f8f8; --color-grey-3: #f0f0f0; --color-grey-4: #dbdbdb; --color-grey-5: #cccccc; --color-grey-6: #9e9e9e; --color-grey-8: #595959; --color-grey-9: #434343; --color-grey-10: #353535; --color-grey-11: #262626; --color-grey-12: #1f1f1f; --color-grey-13: #141414; --color-grey-14: #000000; --color-grey-7: #7b7b7b; --brand: #2fb54e; --brand-match: #0b2b13; --brand-disable: #1a652c; --brand-hover: #41c760; --red: #ea4233; --red-hover: #ed5b4e; --red-bg: #fff1f0; --orange: #f68512; --orange-hover: #f89c3e; --orange-bg: #fff3db; --blue: #3892f3; --blue-hover: #62a9f6; --blue-bg: #e1eefd; /* BRIDGE-MOCKUP-001: dark-mode 软背景 (tinted ~18% over bg). 见 divergences-decisions.json `msg-bg-tinted-dark-set-2026-05-19`. Figma sync pending. */ --msg-bg-red: #3b1c1a; --msg-bg-brand: #19311e; --msg-bg-blue: #1a2b3c; --msg-bg-grey: #353535; --text-heading: #ffffff; --text-body: #f8f8f8; --text-2: #cccccc; --text-tips: #9e9e9e; --text-placeholder: #7b7b7b; --text-disabled: #595959; --text-grey-en: #cccccc; --text-grey-dis: #7b7b7b; --icon-active: #f8f8f8; --icon-default: #9e9e9e; --icon-disabled: #595959; --bg-layer1: #141414; --bg-layer2: #1f1f1f; --bg-layer3: #262626; --bg-layer4: #353535; --bg-topbar: #000000; --bg-grey-btn-hv: #595959; --bg-grey-btn-en: #434343; --bg-grey-btn-dis: #434343; --text-grey-hv: #cccccc; --line-border: #595959; --line-deep: #353535; --line-light: #434343; --orange-tz: #d39f39; --text-primary-btn: #ffffff; --icon-placeholder: #7b7b7b; --icon-grey-dis: #7b7b7b; /* Chart categorical palette (12 colors) — CANONICAL-011 D1 4 reuse existing base hues; 8 new derived by HSL hue rotation maintaining S 65-78% / L 50-60% to match brand-level visual weight. Order matches Option C warm/cool alternating (1=cool brand → 12=warm). */ --chart-color-1: var(--brand); /* 134° 绿 (brand) */ --chart-color-2: var(--red); /* 6° 红 */ --chart-color-3: var(--blue); /* 211° 蓝 */ --chart-color-4: var(--orange); /* 31° 橙 */ --chart-color-5: #2dceae; /* 169° 青绿 */ --chart-color-6: #d8c537; /* 52° 黄 */ --chart-color-7: #9a4ee5; /* 265° 紫 */ --chart-color-8: #e54eb4; /* 320° 洋红 */ --chart-color-9: #4e6ee5; /* 228° 靛蓝 */ --chart-color-10: #e57a4e; /* 17° 珊瑚 */ --chart-color-11: #c47de8; /* 293° lavender */ --chart-color-12: #a3d837; /* 90° chartreuse */ } /* ── Spacing ── */ :root { --sp-xxs: 4px; --sp-xs: 8px; --sp-s: 12px; --sp-m: 16px; --sp-l: 24px; --sp-xl: 32px; --sp-xxl: 40px; --sp-xxxl: 56px; } /* ── Radius ── */ :root { --r-xs: 2px; --r-s: 4px; --r-m: 8px; --r-l: 12px; --r-xl: 16px; --r-xxl: 100px; } /* ── Typography ── */ :root { --font-family-en: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; --font-family-zh: 'PingFang SC', 'Microsoft YaHei', Helvetica, Arial, sans-serif; --font-family-base: var(--font-family-en), var(--font-family-zh); } /* ── Domain-specific component-variant tokens (theme-stable) ── 2026-05-07: 组件内部有 theme variant prop (e.g. Notification theme='light'/'dark') 不应使用 site-theme-aware tokens (--bg-layer*)。这里定义 variant-specific 固定值， theme-stable (两 site theme 都同值)，对齐 figma 真源 */ :root { /* Notification component variant bg (figma 真源: dark=#353535 grey-10, light=#f8f8f8 grey-2) 2026-05-07 D1 correction: light 不是 #ffffff（之前误设），figma 真源是 #f8f8f8 */ --notification-bg-dark: var(--color-grey-10); --notification-bg-light: var(--color-grey-2); /* === Component-variant theme-stable tokens (D2/D4 — 同 Notification 模式) === */ /* Tooltip / Progress / Switch / Radio / CheckBox 都有 own theme axis */ /* Tooltip variant tokens */ --tooltip-bg-dark: var(--color-grey-10); /* #353535 */ --tooltip-bg-light: var(--color-white); /* #ffffff */ --tooltip-border-dark: var(--color-grey-8); /* #595959 */ --tooltip-border-light: var(--color-grey-3); /* #f0f0f0 */ --tooltip-text-dark: var(--color-grey-2); /* #f8f8f8 */ --tooltip-text-light: var(--color-grey-13); /* #141414 */ /* Progress variant tokens (D2 revert + theme-stable) */ --progress-track-bg-dark: var(--line-deep); /* #353535 — visual fix (CANONICAL-004); figma sub-node 真源 pending T1c */ --progress-track-bg-light: var(--color-grey-4); /* #dbdbdb — figma 真源 light theme */ /* Switch variant tokens */ --switch-bg-off-dark: var(--color-grey-8); /* #595959 */ --switch-bg-off-light: var(--color-grey-6); /* #9e9e9e */ --switch-bg-disabled-off-dark: var(--color-grey-9); /* #434343 */ --switch-bg-disabled-off-light: var(--color-grey-5); /* #cccccc */ /* === Domain-specific structural dimension tokens (B-many sub-type) === */ /* Pagination */ --pagination-pagesize-selector-width: 120px; --pagination-jumper-input-width: 64px; --pagination-simple-nav-width: 80px; /* TopBar */ --topbar-section-gap: 80px; --topbar-height-before-login: 64px; /* PromptMessage */ --prompt-message-l-max-width: 480px; --prompt-message-m-max-width: 320px; /* Notification */ --notification-width-default: 480px; --notification-width-side-pop: 320px; /* Tooltip */ --tooltip-max-width: 320px; /* CheckBox */ --checkbox-size: 16px; --checkbox-radius: 1.2px; /* Radio */ --radio-circle-size: 16px; --radio-circle-border-width: 1.2px; --radio-selected-dot-size: 6px; /* Rating */ --rating-star-size: 24px; /* Slider */ --slider-track-h-m: var(--sp-xs); /* 8px — figma 真源 */ --slider-track-h-s: var(--sp-xxs); /* 4px — figma 真源 */ --slider-thumb-size-m: 16px; --slider-thumb-size-s: 12px; --slider-thumb-dot-radius-m: 3.2px; --slider-thumb-dot-radius-s: 2.4px; /* Progress (size) */ --progress-track-h-m: 8px; --progress-track-h-s: 4px; --progress-track-radius: 20px; /* Badge */ --badge-circle-size: 24px; /* Switch (size) */ --switch-track-w: 40px; --switch-track-h: 20px; --switch-thumb-size: 16px; --switch-thumb-inset: 2px; --switch-thumb-travel: 20px; /* FormItem */ --form-item-row-height: 32px; --form-item-textarea-min-height: 100px; /* InputNumber */ --input-number-min-width: 100px; --input-number-default-width: 128px; --input-number-max-width: 200px; /* Cross-component control height */ --control-height-xxs: 32px; } /* ── Effect Style tokens — figma 真源 (3-layered drop shadows) ── Source: figma-data/raw/design-tokens.tokens.json (Figma Design Tokens plugin export) Normalized truth: figma-data/normalized/figma-styles.json effectStyles 2026-05-07 update: 从单层 simplified 改为 figma 真源 3-layered */ :root { --shadow-l1: 0 5px 12px 4px #00000017, 0 3px 6px 0 #0000001f, 0 1px 2px -2px #00000029; --shadow-l2: 0 9px 28px 8px #0000000d, 0 6px 16px 0 #00000014, 0 3px 6px -4px #0000001f; --shadow-l3: 0 12px 48px 16px #00000008, 0 9px 28px 0 #0000000d, 0 6px 16px -8px #00000014; /* Mask blur8 #000-60% — figma 真源: 8px backdrop-blur + #000@60% bg */ --mask-overlay: rgba(0, 0, 0, 0.6); --mask-overlay-blur: 8px; } /* ── Text Style tokens — figma 真源 7 Text Styles (Roboto family) ── Source: figma-data/raw/design-tokens.tokens.json typography.roboto Composite shorthand: use as `font: var(--text-style-body)` */ :root { --text-style-tips: 400 12px/16px var(--font-family-base); --text-style-body: 400 14px/21px var(--font-family-base); --text-style-pop-title: 600 16px/24px var(--font-family-base); --text-style-headline-2: 600 18px/27px var(--font-family-base); --text-style-headline-1: 600 20px/30px var(--font-family-base); --text-style-large-title-22: 600 22px/33px var(--font-family-base); --text-style-large-title-24: 600 24px/36px var(--font-family-base); /* Atomic font tokens — for partial overrides (size only / weight only) */ --font-size-tips: 12px; --font-size-body: 14px; --font-size-pop-title: 16px; --font-size-headline-2: 18px; --font-size-headline-1: 20px; --font-size-large-title-22: 22px; --font-size-large-title-24: 24px; --line-height-tips: 16px; --line-height-body: 21px; --line-height-pop-title: 24px; --line-height-headline-2: 27px; --line-height-headline-1: 30px; --line-height-large-title-22: 33px; --line-height-large-title-24: 36px; --font-weight-regular: 400; --font-weight-semibold: 600; } /* ── Derived aliases for component compatibility ── */ :root { --input-filled-bg: var(--bg-layer4); --green-bg: var(--brand-match); /* PromptMessage 状态色（固定语义，dark/light 两 theme 同值） */ --prompt-success-bg: #f1fbf3; --prompt-success-text: #2fb54e; --prompt-info-text: #3892f3; --prompt-error-text: #ea4233; --prompt-warning-text: #f68512; /* FormItem layout widths */ --form-item-root-width-single-line: 638px; --form-item-root-width-two-lines: 440px; --form-item-label-width-120: 120px; --form-item-label-width-200: 200px; --form-item-label-width-dynamic: auto; --line-divider-deep: var(--line-deep); --line-divider-light: var(--line-light); --control-default-border: var(--icon-placeholder); --control-disabled-bg: var(--line-deep); --control-disabled-border: var(--line-border); --control-disabled-text: var(--text-disabled); --control-disabled-selected-bg: var(--brand-disable); --control-disabled-selected-icon: var(--text-tips); --radio-default-border: var(--text-tips); --radio-selected-dot: var(--bg-layer1); --radio-disabled-off-bg: var(--text-disabled); --radio-disabled-off-border: var(--bg-layer4); --radio-disabled-selected-bg: var(--brand-disable); } /* ── Light mode overrides ── */ [data-theme="light"] { --color-white: #ffffff; --color-grey-2: #f8f8f8; --color-grey-3: #f0f0f0; --color-grey-4: #dbdbdb; --color-grey-5: #cccccc; --color-grey-6: #9e9e9e; --color-grey-8: #595959; --color-grey-9: #434343; --color-grey-10: #353535; --color-grey-11: #262626; --color-grey-12: #1f1f1f; --color-grey-13: #141414; --color-grey-14: #000000; --color-grey-7: #7b7b7b; --brand: #299f45; --brand-match: #f1fbf3; --brand-disable: #8fcc9d; --brand-hover: #00ac39; --red: #dc2717; --red-hover: #eb493a; --red-bg: #fff1f0; --orange: #e26601; --orange-hover: #e97413; --orange-bg: #fff3db; --blue: #0473d5; --blue-hover: #118dfb; --blue-bg: #e1eefd; /* BRIDGE-MOCKUP-001 light-mode 软背景 (tinted ~18% over white). Pair with dark above. */ --msg-bg-red: #fbddda; --msg-bg-brand: #daf2df; --msg-bg-blue: #dbebfd; --msg-bg-grey: #f6f6f6; --text-heading: #000000; --text-body: #141414; --text-2: #434343; --text-tips: #595959; --text-placeholder: #9e9e9e; --text-disabled: #cccccc; --text-grey-en: #434343; --text-grey-dis: #9e9e9e; --icon-active: #434343; --icon-default: #595959; --icon-disabled: #cccccc; --bg-layer1: #ffffff; --bg-layer2: #f8f8f8; --bg-layer3: #f0f0f0; --bg-layer4: #dbdbdb; --bg-topbar: #ffffff; --bg-grey-btn-hv: #cccccc; --bg-grey-btn-en: #dbdbdb; --bg-grey-btn-dis: #dbdbdb; --text-grey-hv: #434343; --line-border: #f0f0f0; --line-deep: #dbdbdb; --line-light: #cccccc; --orange-tz: #d39f39; --text-primary-btn: #ffffff; --icon-placeholder: #9e9e9e; --icon-grey-dis: #9e9e9e; /* Chart palette · light theme variants */ --chart-color-1: var(--brand); /* 299f45 light brand */ --chart-color-2: var(--red); /* dc2717 */ --chart-color-3: var(--blue); /* 0473d5 */ --chart-color-4: var(--orange); /* e26601 */ --chart-color-5: #13a886; /* 青绿 */ --chart-color-6: #b3a113; /* 黄 */ --chart-color-7: #7a25c9; /* 紫 */ --chart-color-8: #c52596; /* 洋红 */ --chart-color-9: #2545c9; /* 靛蓝 */ --chart-color-10: #c95425; /* 珊瑚 */ --chart-color-11: #a83bd1; /* lavender */ --chart-color-12: #7ab313; /* chartreuse */ --input-filled-bg: var(--bg-layer1); --green-bg: var(--brand-match); --line-divider-deep: var(--line-deep); --line-divider-light: var(--line-light); --control-default-border: var(--icon-placeholder); --control-disabled-bg: #dbdbdb; --control-disabled-border: #f0f0f0; --control-disabled-text: #cccccc; --control-disabled-selected-bg: var(--brand-disable); --control-disabled-selected-icon: var(--text-primary-btn); --radio-default-border: var(--icon-placeholder); --radio-selected-dot: var(--bg-layer1); --radio-disabled-off-bg: #f0f0f0; --radio-disabled-off-border: #dbdbdb; --radio-disabled-selected-bg: var(--brand-disable); }