/* ============================================ 颜色主题系统 (data-theme) ============================================ 使用方式: - - - 扩展新主题: 在此文件末尾添加 [data-theme="your-theme"] 规则 ============================================ */ /* ============================================ Theme: Light (亮色模式) ============================================ */ :root, [data-theme="light"] { /* --- Primary --- */ --color-primary: #8EE5A1; --color-primary-hover: #73CD94; --color-primary-active: #5CB870; --color-primary-bg: #F1FAF3; --color-primary-bg-hover: #E6F7EC; --color-primary-border: #CDEFD9; --color-primary-border-hover: #B3E6C7; --color-primary-text: #141414; --color-primary-text-hover: #73CD94; --color-primary-text-active: #5CB870; --color-text-on-primary: #FDFDFD; /* --- Text --- */ --color-text: #141414; --color-text-secondary: #636261; --color-text-tertiary: #838280; --color-text-quaternary: #8E8C8B; --color-text-base: #0F0D0C; /* --- Border --- */ --color-border: #BCBBBA; --color-border-secondary: #DDDDDD; --color-border-tertiary: #E6E6E6; /* --- Fill --- */ --color-fill: #DFDFDF; --color-fill-secondary: #EFEFEF; --color-fill-tertiary: #F9F9F9; --color-fill-quaternary: #FCFCFC; --color-fill-disable: #DAD9D8; /* --- Background --- */ --color-bg-container: #FFFFFF; --color-bg-elevated: #F9F9F9; --color-bg-layout: #FDFDFD; --color-bg-spotlight: #FAFAFA; --color-bg-mask: rgba(0, 0, 0, 0.5); /* PlanPart 点阵高亮遮罩渐变（随主题） */ --color-mask-shimmer-weak: rgba(0, 0, 0, 0.3); --color-mask-shimmer-strong: rgba(0, 0, 0, 0.8); --color-mask-shimmer-full: rgba(0, 0, 0, 1); --color-bg-base: #FFFFFF; --color-bg-highlight: #080807; --color-bg-highlight-hover: #1a1a1a; /* --- Semantic Colors --- */ --color-link: #5CB870; --color-error: #FF4D4F; --color-error-hover: #FF7875; --color-error-bg: #FFF2F0; --color-error-bg-hover: #FFE4E0; --color-error-border: #FFCCC7; --color-info: #0B83F1; --color-info-hover: #5EBCFF; --color-info-bg: #E6F7FF; --color-info-bg-hover: #D0EFFF; --color-info-border: #B0E3FF; --color-success: #73CD94; --color-success-hover: #8EE5A1; --color-success-bg: #F1FAF3; --color-success-bg-hover: #E6F7EC; --color-success-border: #CDEFD9; --color-warning: #FAAD14; --color-warning-hover: #FFD666; --color-warning-bg: #FFFBE6; --color-warning-bg-hover: #FFF3CF; --color-warning-border: #FFE5BF; /* --- Accent Colors --- */ --color-pink: #EC4899; --color-pink-bg: #F9E3F3; --color-pink-bg-hover: #F5D4EB; --color-purple: #615CED; --color-purple-bg: #EBE9FF; --color-purple-bg-hover: #DDDAFF; --color-yellow: #FAC414; --color-yellow-bg: #FFF3CF; --color-yellow-bg-hover: #FFE9A8; --color-orange: #FA8125; --color-orange-bg: #FFEFDE; --color-orange-bg-hover: #FFE3C7; --color-teal: #14B8A6; --color-teal-bg: #DEF7F1; --color-teal-bg-hover: #CAF0E8; --color-blue: #0090FF; --color-blue-bg: #DEEDFF; --color-blue-bg-hover: #C8E3FF; --color-mauve: #8E8C99; --color-mauve-bg: #F1F2F3; --color-mauve-bg-hover: #E4E5E7; --color-slate: #404040; --color-slate-bg: #FAFAFA; --color-slate-bg-hover: #EFEFEF; --color-lavender: #B99DFF; --color-lavender-bg: #ECE4FF; --color-lavender-bg-hover: #E0D4FF; --color-sage: #6BB394; --color-sage-bg: #EFF3F2; --color-sage-bg-hover: #E2EAE8; /* --- Select 等组件 (input/ring/popover 等) --- */ --color-input: var(--color-border-tertiary); --color-ring: var(--color-primary-border); --color-popover: var(--color-bg-container); --color-popover-foreground: var(--color-text); --color-accent: var(--color-fill-secondary); --color-accent-foreground: var(--color-text); --color-muted: var(--color-fill-tertiary); --color-muted-foreground: var(--color-text-secondary); --color-background: var(--color-bg-base); /* --- Diff --- */ --color-diff-insert: #A6DCBA; --color-diff-insert-bg: #D9EBE0; --color-diff-remove: #FC6B83; --color-diff-remove-bg: #E3D1D5; } /* ============================================ Theme: Dark (暗色模式) ============================================ */ [data-theme="dark"] { /* --- Primary --- */ --color-primary: #8EE5A1; --color-primary-hover: #9BE6B3; --color-primary-active: #73CD94; --color-primary-bg: #14261C; --color-primary-bg-hover: #1A2E21; --color-primary-border: #335942; --color-primary-border-hover: #407354; --color-primary-text: #8EE5A1; --color-primary-text-hover: #9BE6B3; --color-primary-text-active: #73CD94; --color-text-on-primary: #0D0D0D; /* --- Text --- */ --color-text: #FAF9F5; --color-text-secondary: #9C9D9E; --color-text-tertiary: #7C7D7F; --color-text-quaternary: #717374; --color-text-base: #F0F2F3; /* --- Border --- */ --color-border: #404040; --color-border-secondary: #2A2A2A; --color-border-tertiary: #262626; /* --- Fill --- */ --color-fill: #454545; --color-fill-secondary: #363636; --color-fill-tertiary: #1A1A1A; --color-fill-quaternary: #1A1A1A; --color-fill-disable: #525252; /* --- Background --- */ --color-bg-container: #0D0D0D; --color-bg-elevated: #080808; --color-bg-layout: #050505; --color-bg-spotlight: #080808; --color-bg-mask: rgba(0, 0, 0, 0.7); /* PlanPart 点阵高亮遮罩渐变（随主题） */ --color-mask-shimmer-weak: rgba(0, 0, 0, 0.3); --color-mask-shimmer-strong: rgba(0, 0, 0, 0.8); --color-mask-shimmer-full: rgba(0, 0, 0, 1); --color-bg-base: #000000; --color-bg-highlight: #d0d0d0; --color-bg-highlight-hover: #e0e0e0; /* --- Semantic Colors --- */ --color-link: #8EE5A1; --color-error: #FF4D4F; --color-error-hover: #FF7875; --color-error-bg: #4A1A1B; --color-error-bg-hover: #5C2224; --color-error-border: #663338; --color-info: #0B83F1; --color-info-hover: #5EBCFF; --color-info-bg: #19080E; --color-info-bg-hover: #220A12; --color-info-border: #4F1C0E; --color-success: #73CD94; --color-success-hover: #8EE5A1; --color-success-bg: #14261C; --color-success-bg-hover: #1A2E21; --color-success-border: #335942; --color-warning: #FAAD14; --color-warning-hover: #FFD666; --color-warning-bg: #4A4019; --color-warning-bg-hover: #5C4E1F; --color-warning-border: #664D19; /* --- Accent Colors --- */ --color-pink: #EC4899; --color-pink-bg: #4A1C31; --color-pink-bg-hover: #5C2440; --color-purple: #615CED; --color-purple-bg: #14160E; --color-purple-bg-hover: #1C1E14; --color-yellow: #FAC414; --color-yellow-bg: #4A4030; --color-yellow-bg-hover: #5C5040; --color-orange: #FA8125; --color-orange-bg: #4A1021; --color-orange-bg-hover: #5C1429; --color-teal: #14B8A6; --color-teal-bg: #21080E; --color-teal-bg-hover: #2E0E14; --color-blue: #0090FF; --color-blue-bg: #21120E; --color-blue-bg-hover: #2E1A14; --color-mauve: #8E8C99; --color-mauve-bg: #0E0D0C; --color-mauve-bg-hover: #1A1818; --color-slate: #363636; --color-slate-bg: #1a1a1a; --color-slate-bg-hover: #262626; --color-lavender: #B99DFF; --color-lavender-bg: #131B0E; --color-lavender-bg-hover: #1C2614; --color-sage: #6BB394; --color-sage-bg: #100C0D; --color-sage-bg-hover: #1A1418; /* --- Select 等组件 (input/ring/popover 等) --- */ --color-input: var(--color-border-tertiary); --color-ring: var(--color-primary-border); --color-popover: var(--color-bg-container); --color-popover-foreground: var(--color-text); --color-accent: var(--color-fill-secondary); --color-accent-foreground: var(--color-text); --color-muted: var(--color-fill-tertiary); --color-muted-foreground: var(--color-text-secondary); --color-background: var(--color-bg-base); /* --- Diff --- */ --color-diff-insert: #73CD94; --color-diff-insert-bg: #14261C; --color-diff-remove: #FC6B83; --color-diff-remove-bg: #1C2E2A; } /* SendButton: dark 下 normal 状态使用 success 色（与 light 下 bg-bg-highlight 区分） */ [data-theme="dark"] .SendButton-send, [data-theme="classic-dark"] .SendButton-send { background-color: var(--color-success); } [data-theme="dark"] .SendButton-send:hover:not(:disabled), [data-theme="classic-dark"] .SendButton-send:hover:not(:disabled) { background-color: var(--color-success-hover); } /* ============================================ Theme: Forest (深绿色主色亮色) ============================================ */ [data-theme="forest"], [data-theme="forest-light"], [data-theme="light-forest"] { color-scheme: light; --color-primary: #255A41; --color-primary-hover: #316E50; --color-primary-active: #1C4432; --color-primary-bg: #EDF5F1; --color-primary-bg-hover: #E2EEE8; --color-primary-border: #C6DCD1; --color-primary-border-hover: #A8C9B9; --color-primary-text: #255A41; --color-primary-text-hover: #316E50; --color-primary-text-active: #1C4432; --color-text-on-primary: #FDFDFD; --color-link: #255A41; --color-success: #255A41; --color-success-hover: #316E50; --color-success-bg: #EDF5F1; --color-success-bg-hover: #E2EEE8; --color-success-border: #C6DCD1; --color-ring: var(--color-primary-border); --color-diff-insert: #A8C9B9; --color-diff-insert-bg: #E2EEE8; } /* ============================================ Theme: Forest Dark (深绿色主色暗色) ============================================ */ [data-theme="forest-dark"], [data-theme="dark-forest"] { color-scheme: dark; --color-primary: #255A41; --color-primary-hover: #316E50; --color-primary-active: #1C4432; --color-primary-bg: #102019; --color-primary-bg-hover: #152A21; --color-primary-border: #255A41; --color-primary-border-hover: #316E50; --color-primary-text: #8DB89F; --color-primary-text-hover: #A6CFB9; --color-primary-text-active: #75A98D; --color-text-on-primary: #FDFDFD; --color-text: #FAF9F5; --color-text-secondary: #A6AAA7; --color-text-tertiary: #7D8580; --color-text-quaternary: #68716B; --color-text-base: #F0F2F3; --color-border: #415047; --color-border-secondary: #2D3A33; --color-border-tertiary: #223029; --color-fill: #405047; --color-fill-secondary: #2D3A33; --color-fill-tertiary: #17231D; --color-fill-quaternary: #121C17; --color-fill-disable: #4A5A51; --color-bg-container: #0D1411; --color-bg-elevated: #0A100D; --color-bg-layout: #060A08; --color-bg-spotlight: #0A100D; --color-bg-mask: rgba(0, 0, 0, 0.7); --color-mask-shimmer-weak: rgba(0, 0, 0, 0.3); --color-mask-shimmer-strong: rgba(0, 0, 0, 0.8); --color-mask-shimmer-full: rgba(0, 0, 0, 1); --color-bg-base: #060A08; --color-bg-highlight: #D5E3DA; --color-bg-highlight-hover: #E4EEE8; --color-link: #8DB89F; --color-success: #8DB89F; --color-success-hover: #A6CFB9; --color-success-bg: #102019; --color-success-bg-hover: #152A21; --color-success-border: #255A41; --color-input: var(--color-border-tertiary); --color-ring: var(--color-primary-border); --color-popover: var(--color-bg-container); --color-popover-foreground: var(--color-text); --color-accent: var(--color-fill-secondary); --color-accent-foreground: var(--color-text); --color-muted: var(--color-fill-tertiary); --color-muted-foreground: var(--color-text-secondary); --color-background: var(--color-bg-base); --color-diff-insert: #8DB89F; --color-diff-insert-bg: #102019; } [data-theme="forest-dark"] .SendButton-send, [data-theme="dark-forest"] .SendButton-send { background-color: var(--color-success); } [data-theme="forest-dark"] .SendButton-send:hover:not(:disabled), [data-theme="dark-forest"] .SendButton-send:hover:not(:disabled) { background-color: var(--color-success-hover); } /* ============================================ Theme: Light Parchment (羊皮纸亮色 - Figma 导入) ============================================ */ [data-theme="light-parchment"] { /* --- Primary --- */ --color-primary: #202116; --color-primary-hover: #3D3930; --color-primary-active: #3D3930; --color-primary-bg: #F0EDE7; --color-primary-bg-hover: #E8E4DC; --color-primary-border: #D4CFC6; --color-primary-border-hover: #C4BEB4; --color-primary-text: #202116; --color-primary-text-hover: #3D3930; --color-primary-text-active: #3D3930; --color-text-on-primary: #FAF9F6; /* --- Text --- */ --color-text: #202116; --color-text-secondary: #4A463C; --color-text-tertiary: #6B665C; --color-text-quaternary: #8A857A; --color-text-base: #202116; /* --- Border --- */ --color-border: #D4CFC6; --color-border-secondary: #E5E1D9; --color-border-tertiary: #EDE9E2; /* --- Fill --- */ --color-fill: #F5F0E7; --color-fill-secondary: #EDE8E0; --color-fill-tertiary: #F7F4EF; --color-fill-quaternary: #FAF9F6; --color-fill-disable: #E0DCD4; /* --- Background --- */ --color-bg-container: #FAF9F6; --color-bg-elevated: #F7F4EF; --color-bg-layout: #FDFCFA; --color-bg-spotlight: #FAF9F6; --color-bg-mask: rgba(0, 0, 0, 0.5); /* PlanPart 点阵高亮遮罩渐变（随主题） */ --color-mask-shimmer-weak: rgba(0, 0, 0, 0.3); --color-mask-shimmer-strong: rgba(0, 0, 0, 0.8); --color-mask-shimmer-full: rgba(0, 0, 0, 1); --color-bg-base: #FFFFFF; --color-bg-highlight: #202116; --color-bg-highlight-hover: #2D2A22; /* --- Semantic Colors --- */ --color-link: #5B4A3A; --color-error: #FF4D4F; --color-error-hover: #FF7875; --color-error-bg: #FFF2F0; --color-error-bg-hover: #FFF1F0; --color-error-border: #FFCCC7; --color-info: #0B83F1; --color-info-hover: #5EBCFF; --color-info-bg: #E6F7FF; --color-info-bg-hover: #D0EFFF; --color-info-border: #B0E3FF; --color-success: #5A7A5E; --color-success-hover: #6B8F71; --color-success-bg: #EEF2ED; --color-success-bg-hover: #E4EBE2; --color-success-border: #C5D4C4; --color-warning: #FAAD14; --color-warning-hover: #FFD666; --color-warning-bg: #FFFBE6; --color-warning-bg-hover: #FFF3CF; --color-warning-border: #FFE5BF; /* --- Accent Colors --- */ --color-pink: #EC4899; --color-pink-bg: #F9E3F3; --color-pink-bg-hover: #F5D4EB; --color-purple: #615CED; --color-purple-bg: #EBE9FF; --color-purple-bg-hover: #DDDAFF; --color-yellow: #FAC414; --color-yellow-bg: #FFF3CF; --color-yellow-bg-hover: #FFE9A8; --color-orange: #FA8125; --color-orange-bg: #FFEFDE; --color-orange-bg-hover: #FFE3C7; --color-teal: #14B8A6; --color-teal-bg: #DEF7F1; --color-teal-bg-hover: #CAF0E8; --color-blue: #0090FF; --color-blue-bg: #DEEDFF; --color-blue-bg-hover: #C8E3FF; --color-mauve: #8E8C99; --color-mauve-bg: #F1F2F3; --color-mauve-bg-hover: #E4E5E7; --color-slate: #1E293B; --color-slate-bg: #E2E8F0; --color-slate-bg-hover: #EFEFEF; --color-lavender: #B99DFF; --color-lavender-bg: #ECE4FF; --color-lavender-bg-hover: #E0D4FF; --color-sage: #6BB394; --color-sage-bg: #EFF3F2; --color-sage-bg-hover: #E2EAE8; /* --- Select 等组件 (input/ring/popover 等) --- */ --color-input: var(--color-border-tertiary); --color-ring: var(--color-primary-border); --color-popover: var(--color-bg-container); --color-popover-foreground: var(--color-text); --color-accent: var(--color-fill-secondary); --color-accent-foreground: var(--color-text); --color-muted: var(--color-fill-tertiary); --color-muted-foreground: var(--color-text-secondary); --color-background: var(--color-bg-base); /* --- Diff --- */ --color-diff-insert: #A6DCBA; --color-diff-insert-bg: #D9EBE0; --color-diff-remove: #FC6B83; --color-diff-remove-bg: #E3D1D5; } /* ============================================ 扩展主题模板 ============================================ 复制以下模板创建新主题: [data-theme="your-theme-name"] { --color-primary: #...; --color-primary-hover: #...; ... (覆盖需要的变量) } ============================================ */ /* ============================================ Tailwind v4 @theme 映射 ============================================ */ @custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *, [data-theme="forest-dark"], [data-theme="forest-dark"] *, [data-theme="dark-forest"], [data-theme="dark-forest"] *, [data-theme="dark-parchment"], [data-theme="dark-parchment"] *)); @theme { /* Font */ --font-display: 'Inter var', system-ui, sans-serif; /* Scale 映射：font-size 随 data-style 变化 */ --text-xs: var(--font-size-xs); --text-xs--line-height: var(--font-size-xs--line-height); --text-sm: var(--font-size-sm); --text-sm--line-height: var(--font-size-sm--line-height); --text-base: var(--font-size-base); --text-base--line-height: var(--font-size-base--line-height); --text-lg: var(--font-size-lg); --text-lg--line-height: var(--font-size-lg--line-height); --text-xl: var(--font-size-xl); --text-xl--line-height: var(--font-size-xl--line-height); --text-2xl: var(--font-size-2xl); --text-2xl--line-height: var(--font-size-2xl--line-height); --text-3xl: var(--font-size-3xl); --text-3xl--line-height: var(--font-size-3xl--line-height); --text-4xl: var(--font-size-4xl); --text-4xl--line-height: var(--font-size-4xl--line-height); --text-5xl: var(--font-size-5xl); --text-5xl--line-height: var(--font-size-5xl--line-height); --text-6xl: var(--font-size-6xl); --text-6xl--line-height: var(--font-size-6xl--line-height); /* Radius：随 data-style 变化，由 scale.css 提供 */ --radius: var(--radius-DEFAULT); --radius-none: var(--radius-none); --radius-sm: var(--radius-sm); --radius-md: var(--radius-md); --radius-lg: var(--radius-lg); --radius-xl: var(--radius-xl); --radius-2xl: var(--radius-2xl); --radius-3xl: var(--radius-3xl); --radius-full: var(--radius-full); /* Spacing：保持通用布局单位稳定；控件密度由 --control-* 语义变量提供 */ --spacing-0: var(--spacing-0); --spacing-px: var(--spacing-px); --spacing-0\.5: var(--spacing-0\.5); --spacing-1: var(--spacing-1); --spacing-1\.5: var(--spacing-1\.5); --spacing-2: var(--spacing-2); --spacing-2\.5: var(--spacing-2\.5); --spacing-3: var(--spacing-3); --spacing-3\.5: var(--spacing-3\.5); --spacing-4: var(--spacing-4); --spacing-5: var(--spacing-5); --spacing-6: var(--spacing-6); --spacing-7: var(--spacing-7); --spacing-8: var(--spacing-8); --spacing-9: var(--spacing-9); --spacing-10: var(--spacing-10); --spacing-11: var(--spacing-11); --spacing-12: var(--spacing-12); --spacing-14: var(--spacing-14); --spacing-16: var(--spacing-16); --spacing-20: var(--spacing-20); --spacing-24: var(--spacing-24); --spacing-28: var(--spacing-28); --spacing-32: var(--spacing-32); --spacing-36: var(--spacing-36); --spacing-40: var(--spacing-40); --spacing-44: var(--spacing-44); --spacing-48: var(--spacing-48); --spacing-52: var(--spacing-52); --spacing-56: var(--spacing-56); --spacing-60: var(--spacing-60); --spacing-64: var(--spacing-64); --spacing-72: var(--spacing-72); --spacing-80: var(--spacing-80); --spacing-96: var(--spacing-96); /* Primary */ --color-primary: var(--color-primary); --color-primary-hover: var(--color-primary-hover); --color-primary-active: var(--color-primary-active); --color-primary-bg: var(--color-primary-bg); --color-primary-bg-hover: var(--color-primary-bg-hover); --color-primary-border: var(--color-primary-border); --color-primary-border-hover: var(--color-primary-border-hover); --color-primary-text: var(--color-primary-text); --color-primary-text-hover: var(--color-primary-text-hover); --color-primary-text-active: var(--color-primary-text-active); --color-text-on-primary: var(--color-text-on-primary); /* Text */ --color-text: var(--color-text); --color-text-secondary: var(--color-text-secondary); --color-text-tertiary: var(--color-text-tertiary); --color-text-quaternary: var(--color-text-quaternary); --color-text-base: var(--color-text-base); /* Border */ --color-border: var(--color-border); /* Select 等 - 映射到现有 token */ --color-input: var(--color-border-tertiary); --color-ring: var(--color-primary-border); --color-popover: var(--color-bg-container); --color-popover-foreground: var(--color-text); --color-accent: var(--color-fill-secondary); --color-accent-foreground: var(--color-text); --color-muted: var(--color-fill-tertiary); --color-muted-foreground: var(--color-text-secondary); --color-background: var(--color-bg-base); --color-border-secondary: var(--color-border-secondary); --color-border-tertiary: var(--color-border-tertiary); /* Fill */ --color-fill: var(--color-fill); --color-fill-secondary: var(--color-fill-secondary); --color-fill-tertiary: var(--color-fill-tertiary); --color-fill-quaternary: var(--color-fill-quaternary); --color-fill-disable: var(--color-fill-disable); /* Background */ --color-bg-container: var(--color-bg-container); --color-bg-elevated: var(--color-bg-elevated); --color-bg-layout: var(--color-bg-layout); --color-bg-spotlight: var(--color-bg-spotlight); --color-bg-mask: var(--color-bg-mask); --color-bg-base: var(--color-bg-base); --color-bg-highlight: var(--color-bg-highlight); --color-bg-highlight-hover: var(--color-bg-highlight-hover); /* Semantic */ --color-link: var(--color-link); --color-error: var(--color-error); --color-error-hover: var(--color-error-hover); --color-error-bg: var(--color-error-bg); --color-error-bg-hover: var(--color-error-bg-hover); --color-error-border: var(--color-error-border); --color-info: var(--color-info); --color-info-hover: var(--color-info-hover); --color-info-bg: var(--color-info-bg); --color-info-bg-hover: var(--color-info-bg-hover); --color-info-border: var(--color-info-border); --color-success: var(--color-success); --color-success-hover: var(--color-success-hover); --color-success-bg: var(--color-success-bg); --color-success-bg-hover: var(--color-success-bg-hover); --color-success-border: var(--color-success-border); --color-warning: var(--color-warning); --color-warning-hover: var(--color-warning-hover); --color-warning-bg: var(--color-warning-bg); --color-warning-bg-hover: var(--color-warning-bg-hover); --color-warning-border: var(--color-warning-border); /* Accent */ --color-pink: var(--color-pink); --color-pink-bg: var(--color-pink-bg); --color-pink-bg-hover: var(--color-pink-bg-hover); --color-purple: var(--color-purple); --color-purple-bg: var(--color-purple-bg); --color-purple-bg-hover: var(--color-purple-bg-hover); --color-yellow: var(--color-yellow); --color-yellow-bg: var(--color-yellow-bg); --color-yellow-bg-hover: var(--color-yellow-bg-hover); --color-orange: var(--color-orange); --color-orange-bg: var(--color-orange-bg); --color-orange-bg-hover: var(--color-orange-bg-hover); --color-teal: var(--color-teal); --color-teal-bg: var(--color-teal-bg); --color-teal-bg-hover: var(--color-teal-bg-hover); --color-blue: var(--color-blue); --color-blue-bg: var(--color-blue-bg); --color-blue-bg-hover: var(--color-blue-bg-hover); --color-mauve: var(--color-mauve); --color-mauve-bg: var(--color-mauve-bg); --color-mauve-bg-hover: var(--color-mauve-bg-hover); --color-slate: var(--color-slate); --color-slate-bg: var(--color-slate-bg); --color-slate-bg-hover: var(--color-slate-bg-hover); --color-lavender: var(--color-lavender); --color-lavender-bg: var(--color-lavender-bg); --color-lavender-bg-hover: var(--color-lavender-bg-hover); --color-sage: var(--color-sage); --color-sage-bg: var(--color-sage-bg); --color-sage-bg-hover: var(--color-sage-bg-hover); /* Diff */ --color-diff-insert: var(--color-diff-insert); --color-diff-insert-bg: var(--color-diff-insert-bg); --color-diff-remove: var(--color-diff-remove); --color-diff-remove-bg: var(--color-diff-remove-bg); /* Accordion 展开/收起动画（Radix 提供 --radix-accordion-content-height） */ --animate-accordion-down: accordion-down 0.2s ease-out; --animate-accordion-up: accordion-up 0.2s ease-out; --animate-accordion-right: accordion-right 0.2s ease-out; --animate-accordion-left: accordion-left 0.2s ease-out; } @keyframes accordion-down { from { height: 0; } to { height: var(--radix-accordion-content-height); } } @keyframes accordion-up { from { height: var(--radix-accordion-content-height); } to { height: 0; } } @keyframes accordion-right { from { width: 0; } to { width: var(--radix-accordion-content-width); } } @keyframes accordion-left { from { width: var(--radix-accordion-content-width); } to { width: 0; } }