/* ========================================================================== DocuCast 主题系统 themes.css - :root 默认主题（Claude 暖橙，与 style.css / chat-panel.css 现值一致） - [data-theme="playful"] 童趣 Playful（米黄底 + 玫粉按钮 + 青色点缀） - [data-theme="lemon"] 柠檬靛 Lemon（白底 + 柠檬黄按钮 + 薄荷点缀） 加载顺序须在 style.css 与 chat-panel.css 之后。仅含配色 token。 ========================================================================== */ /* -------------------------------------------------------------------------- :root 默认主题（Claude 暖橙） -------------------------------------------------------------------------- */ :root { --color-primary: #D97736; --color-primary-hover: #C46A30; --color-primary-light: #F5A623; --color-bg-primary: #FAF8F5; --color-bg-secondary: #FFFFFF; --color-bg-tertiary: #F5F0EA; --color-text-primary: #1A1A1A; --color-text-secondary: #4A4A4A; --color-text-tertiary: #6B6B6B; --color-text-muted: #9A9A9A; --color-border: #E5E0D8; --color-border-light: #F0EBE5; --color-divider: #EDE8E2; --btn-primary-bg: #1A1A1A; --btn-primary-text: #FFFFFF; --btn-primary-hover: #333333; --btn-secondary-bg: transparent; --btn-secondary-border: #D9D3CC; --btn-secondary-text: #1A1A1A; --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --shadow-md: 0 4px 12px rgba(0,0,0,0.08); --shadow-lg: 0 8px 24px rgba(0,0,0,0.12); --chat-bg: #faf9f5; --chat-panel: #ffffff; --chat-panel-alt: #f5f3ee; --chat-border: #e8e2d5; --chat-border-strong: #d4cdb8; --chat-txt: #1a1a1a; --chat-muted: #8b8170; --chat-accent: #d97757; --chat-accent-light: #f0a988; --chat-cyan: #d97757; --chat-magenta: #c46c4e; --chat-amber: #b8860b; --chat-red: #dc2626; --chat-green: #16a34a; --color-danger: #C62828; --color-danger-bg: #FFEBEE; --color-danger-border: #C62828; --color-action-bg: #AEC6CF; --color-action-text: #ffffff; --chat-on-accent: #ffffff; --badge-completed-bg: #E8F5E9; --badge-completed-text: #2E7D32; --badge-pending-bg: #FFF8E1; --badge-pending-text: #F57C00; --badge-failed-bg: #FFEBEE; --badge-failed-text: #C62828; --badge-blocked-bg: #F5F5F5; --badge-blocked-text: #616161; --badge-running-bg: #E3F2FD; --badge-running-text: #1565C0; } /* -------------------------------------------------------------------------- [data-theme="playful"] 童趣 Playful -------------------------------------------------------------------------- */ [data-theme="playful"] { --color-bg-primary: #fef6e4; --color-bg-secondary: color-mix(in srgb, #fef6e4 55%, #f3d2c1); --color-bg-tertiary: color-mix(in srgb, #fef6e4 88%, #001858); --color-text-primary: #001858; --color-text-secondary: #172c66; --color-text-tertiary: color-mix(in srgb, #172c66 68%, #fef6e4); --color-text-muted: color-mix(in srgb, #172c66 42%, #fef6e4); --color-primary: #f582ae; --color-primary-hover: color-mix(in srgb, #f582ae 80%, #001858); --color-primary-light: #fef6e4; --color-border: color-mix(in srgb, #fef6e4 76%, #001858); --color-border-light: color-mix(in srgb, #fef6e4 88%, #001858); --color-divider: color-mix(in srgb, #fef6e4 84%, #001858); --btn-primary-bg: #f582ae; --btn-primary-text: #001858; --btn-primary-hover: color-mix(in srgb, #f582ae 82%, #001858); --btn-secondary-bg: transparent; --btn-secondary-border: color-mix(in srgb, #fef6e4 64%, #001858); --btn-secondary-text: #001858; --shadow-sm: 0 1px 2px color-mix(in srgb, #001858 14%, transparent); --shadow-md: 0 4px 12px color-mix(in srgb, #001858 20%, transparent); --shadow-lg: 0 8px 24px color-mix(in srgb, #001858 26%, transparent); --chat-bg: #fef6e4; --chat-panel: color-mix(in srgb, #fef6e4 55%, #f3d2c1); --chat-panel-alt: color-mix(in srgb, #fef6e4 78%, #8bd3dd); --chat-border: color-mix(in srgb, #fef6e4 78%, #001858); --chat-border-strong: color-mix(in srgb, #fef6e4 62%, #001858); --chat-txt: #001858; --chat-muted: color-mix(in srgb, #172c66 62%, #fef6e4); --chat-accent: #f582ae; --chat-accent-light: color-mix(in srgb, #f582ae 55%, #fef6e4); --chat-cyan: #fef6e4; --chat-magenta: #f582ae; --chat-amber: #f582ae; --chat-red: #dc2626; --chat-green: #16a34a; --color-danger: #dc2626; --color-danger-bg: color-mix(in srgb, #dc2626 14%, #fef6e4); --color-danger-border: #dc2626; --color-action-bg: #f582ae; --color-action-text: #001858; --chat-on-accent: #001858; --badge-completed-bg: color-mix(in srgb, #f582ae 40%, #fef6e4); --badge-completed-text: #001858; --badge-pending-bg: color-mix(in srgb, #f582ae 26%, #fef6e4); --badge-pending-text: #001858; --badge-failed-bg: color-mix(in srgb, #dc2626 18%, #fef6e4); --badge-failed-text: #dc2626; --badge-blocked-bg: color-mix(in srgb, #001858 10%, #fef6e4); --badge-blocked-text: color-mix(in srgb, #172c66 68%, #fef6e4); --badge-running-bg: color-mix(in srgb, #8bd3dd 40%, #fef6e4); --badge-running-text: #001858; } /* -------------------------------------------------------------------------- [data-theme="lemon"] 柠檬靛 Lemon -------------------------------------------------------------------------- */ [data-theme="lemon"] { --color-bg-primary: #fffef5; --color-bg-secondary: #fffffe; --color-bg-tertiary: color-mix(in srgb, #fffffe 88%, #272343); --color-text-primary: #272343; --color-text-secondary: #2d334a; --color-text-tertiary: color-mix(in srgb, #2d334a 68%, #fffffe); --color-text-muted: color-mix(in srgb, #2d334a 42%, #fffffe); --color-primary: #ffd803; --color-primary-hover: color-mix(in srgb, #ffd803 80%, #272343); --color-primary-light: #ffd803; --color-border: color-mix(in srgb, #fffffe 76%, #272343); --color-border-light: color-mix(in srgb, #fffffe 88%, #272343); --color-divider: color-mix(in srgb, #fffffe 84%, #272343); --btn-primary-bg: #ffd803; --btn-primary-text: #272343; --btn-primary-hover: color-mix(in srgb, #ffd803 82%, #272343); --btn-secondary-bg: transparent; --btn-secondary-border: color-mix(in srgb, #fffffe 64%, #272343); --btn-secondary-text: #272343; --shadow-sm: 0 1px 2px color-mix(in srgb, #272343 14%, transparent); --shadow-md: 0 4px 12px color-mix(in srgb, #272343 20%, transparent); --shadow-lg: 0 8px 24px color-mix(in srgb, #272343 26%, transparent); --chat-bg: #fffef5; --chat-panel: #fffffe; --chat-panel-alt: color-mix(in srgb, #fffffe 88%, #272343); --chat-border: color-mix(in srgb, #fffffe 78%, #272343); --chat-border-strong: color-mix(in srgb, #fffffe 62%, #272343); --chat-txt: #272343; --chat-muted: color-mix(in srgb, #2d334a 62%, #fffffe); --chat-accent: #ffd803; --chat-accent-light: color-mix(in srgb, #ffd803 72%, #b8860b); --chat-cyan: #ffd803; --chat-magenta: #bae8e8; --chat-amber: #bae8e8; --chat-red: #dc2626; --chat-green: #16a34a; --color-danger: #dc2626; --color-danger-bg: color-mix(in srgb, #dc2626 14%, #fffffe); --color-danger-border: #dc2626; --color-action-bg: #ffd803; --color-action-text: #272343; --chat-on-accent: #272343; --badge-completed-bg: color-mix(in srgb, #ffd803 42%, #fffffe); --badge-completed-text: #272343; --badge-pending-bg: color-mix(in srgb, #ffd803 28%, #fffffe); --badge-pending-text: #272343; --badge-failed-bg: color-mix(in srgb, #dc2626 16%, #fffffe); --badge-failed-text: #dc2626; --badge-blocked-bg: color-mix(in srgb, #272343 10%, #fffffe); --badge-blocked-text: color-mix(in srgb, #2d334a 68%, #fffffe); --badge-running-bg: color-mix(in srgb, #bae8e8 46%, #fffffe); --badge-running-text: #272343; }