mirror of
https://github.com/CherryHQ/cherry-studio.git
synced 2025-12-26 03:31:24 +08:00
feat(theme): enhance color tokens with brand colors and update primary color references
- Added new brand color tokens for Cherry Studio ranging from 50 to 950. - Updated primary color references to use brand colors for improved consistency. - Introduced hover states for primary and destructive colors to enhance UI interactivity.
This commit is contained in:
MyPrototypeWhat
parent
12e3a22726
commit
1c38e31e9e
@ -19,9 +19,11 @@
|
||||
/* 语义化颜色（覆盖 Tailwind 标准命名） */
|
||||
/* ==================== */
|
||||
--color-primary: var(--cs-primary);
|
||||
--color-primary-hover: var(--cs-primary-hover);
|
||||
--color-primary-foreground: var(--cs-white);
|
||||
|
||||
--color-destructive: var(--cs-destructive);
|
||||
--color-destructive-hover: var(--cs-destructive-hover);
|
||||
--color-destructive-foreground: var(--cs-white);
|
||||
|
||||
--color-success: var(--cs-success);
|
||||
@ -363,6 +365,19 @@
|
||||
--color-black: var(--cs-black);
|
||||
--color-white: var(--cs-white);
|
||||
|
||||
/* Brand (Cherry Studio 品牌色) */
|
||||
--color-brand-50: var(--cs-brand-50);
|
||||
--color-brand-100: var(--cs-brand-100);
|
||||
--color-brand-200: var(--cs-brand-200);
|
||||
--color-brand-300: var(--cs-brand-300);
|
||||
--color-brand-400: var(--cs-brand-400);
|
||||
--color-brand-500: var(--cs-brand-500);
|
||||
--color-brand-600: var(--cs-brand-600);
|
||||
--color-brand-700: var(--cs-brand-700);
|
||||
--color-brand-800: var(--cs-brand-800);
|
||||
--color-brand-900: var(--cs-brand-900);
|
||||
--color-brand-950: var(--cs-brand-950);
|
||||
|
||||
/* ==================== */
|
||||
/* Spacing & Sizing（自定义尺寸，额外扩展） */
|
||||
/* ==================== */
|
||||
|
||||
@ -304,13 +304,28 @@
|
||||
--cs-black: hsla(0, 0%, 0%, 1);
|
||||
--cs-white: hsla(0, 0%, 100%, 1);
|
||||
|
||||
/* Brand (Cherry Studio 品牌专属色) */
|
||||
--cs-brand-50: hsla(132, 64%, 97%, 1);
|
||||
--cs-brand-100: hsla(132, 64%, 93%, 1);
|
||||
--cs-brand-200: hsla(132, 64%, 85%, 1);
|
||||
--cs-brand-300: hsla(132, 64%, 73%, 1);
|
||||
--cs-brand-400: hsla(132, 64%, 63%, 1);
|
||||
--cs-brand-500: hsla(132, 64%, 53%, 1);
|
||||
--cs-brand-600: hsla(132, 64%, 43%, 1);
|
||||
--cs-brand-700: hsla(132, 64%, 33%, 1);
|
||||
--cs-brand-800: hsla(132, 64%, 23%, 1);
|
||||
--cs-brand-900: hsla(132, 64%, 13%, 1);
|
||||
--cs-brand-950: hsla(132, 64%, 8%, 1);
|
||||
|
||||
/* ==================== */
|
||||
/* Semantic Tokens - Light Mode */
|
||||
/* ==================== */
|
||||
|
||||
/* Brand Colors */
|
||||
--cs-primary: var(--cs-lime-500);
|
||||
--cs-primary: var(--cs-brand-500);
|
||||
--cs-primary-hover: var(--cs-brand-300);
|
||||
--cs-destructive: var(--cs-red-500);
|
||||
--cs-destructive-hover: var(--cs-red-400);
|
||||
--cs-success: var(--cs-green-500);
|
||||
--cs-warning: var(--cs-amber-500);
|
||||
|
||||
@ -331,7 +346,7 @@
|
||||
--cs-border-active: hsla(0, 0%, 0%, 0.3);
|
||||
|
||||
/* Ring (Focus) */
|
||||
--cs-ring: hsla(84, 81%, 44%, 0.4);
|
||||
--cs-ring: color-mix(in srgb, var(--cs-primary) 40%, transparent);
|
||||
|
||||
/* UI Element Colors */
|
||||
--cs-secondary: hsla(0, 0%, 0%, 0.05); /* Secondary Button Background */
|
||||
@ -346,46 +361,6 @@
|
||||
--cs-sidebar: var(--cs-white);
|
||||
--cs-sidebar-accent: hsla(0, 0%, 0%, 0.05);
|
||||
|
||||
/* ==================== */
|
||||
/* UI 元素细分颜色 */
|
||||
/* ==================== */
|
||||
|
||||
/* Modal / Overlay */
|
||||
--cs-modal-backdrop: hsla(0, 0%, 0%, 0.4);
|
||||
--cs-modal-thumb: hsla(0, 0%, 0%, 0.2);
|
||||
--cs-modal-thumb-hover: hsla(0, 0%, 0%, 0.3);
|
||||
|
||||
/* Icon */
|
||||
--cs-icon-default: var(--cs-foreground-secondary);
|
||||
--cs-icon-hover: var(--cs-foreground);
|
||||
|
||||
/* Input / Select */
|
||||
--cs-input-background: var(--cs-white);
|
||||
--cs-input-border: var(--cs-border);
|
||||
--cs-input-border-hover: var(--cs-border-hover);
|
||||
--cs-input-border-focus: var(--cs-primary);
|
||||
|
||||
/* Primary Button */
|
||||
--cs-primary-button-background: var(--cs-primary);
|
||||
--cs-primary-button-text: var(--cs-white);
|
||||
--cs-primary-button-background-hover: hsla(84, 81%, 44%, 0.85);
|
||||
--cs-primary-button-background-active: hsla(84, 81%, 44%, 0.7);
|
||||
--cs-primary-button-background-2nd: hsla(84, 81%, 44%, 0.1);
|
||||
--cs-primary-button-background-3rd: hsla(84, 81%, 44%, 0.05);
|
||||
|
||||
/* Secondary Button */
|
||||
--cs-secondary-button-background: var(--cs-secondary);
|
||||
--cs-secondary-button-text: var(--cs-foreground);
|
||||
--cs-secondary-button-background-hover: hsla(0, 0%, 0%, 0.85);
|
||||
--cs-secondary-button-background-active: hsla(0, 0%, 0%, 0.7);
|
||||
--cs-secondary-button-border: var(--cs-border);
|
||||
|
||||
/* Ghost Button */
|
||||
--cs-ghost-button-background: hsla(0, 0%, 0%, 0);
|
||||
--cs-ghost-button-text: var(--cs-foreground);
|
||||
--cs-ghost-button-background-hover: var(--cs-ghost-hover);
|
||||
--cs-ghost-button-background-active: var(--cs-ghost-active);
|
||||
|
||||
/* ==================== */
|
||||
/* Spacing & Sizing (合并) */
|
||||
/* ==================== */
|
||||
@ -517,44 +492,4 @@
|
||||
/* Sidebar */
|
||||
--cs-sidebar: var(--cs-black);
|
||||
--cs-sidebar-accent: hsla(0, 0%, 100%, 0.1);
|
||||
|
||||
/* ==================== */
|
||||
/* UI 元素细分颜色 (Dark Mode) */
|
||||
/* ==================== */
|
||||
|
||||
/* Modal / Overlay */
|
||||
--cs-modal-backdrop: hsla(0, 0%, 0%, 0.06);
|
||||
--cs-modal-thumb: hsla(0, 0%, 100%, 0.2);
|
||||
--cs-modal-thumb-hover: hsla(0, 0%, 100%, 0.3);
|
||||
|
||||
/* Icon */
|
||||
--cs-icon-default: var(--cs-foreground-secondary);
|
||||
--cs-icon-hover: var(--cs-foreground);
|
||||
|
||||
/* Input / Select */
|
||||
--cs-input-background: var(--cs-black);
|
||||
--cs-input-border: var(--cs-border);
|
||||
--cs-input-border-hover: var(--cs-border-hover);
|
||||
--cs-input-border-focus: var(--cs-primary);
|
||||
|
||||
/* Primary Button - 保持不变 */
|
||||
--cs-primary-button-background: var(--cs-primary);
|
||||
--cs-primary-button-text: var(--cs-white);
|
||||
--cs-primary-button-background-hover: hsla(84, 81%, 44%, 0.85);
|
||||
--cs-primary-button-background-active: hsla(84, 81%, 44%, 0.7);
|
||||
--cs-primary-button-background-2nd: hsla(84, 81%, 44%, 0.1);
|
||||
--cs-primary-button-background-3rd: hsla(84, 81%, 44%, 0.05);
|
||||
|
||||
/* Secondary Button */
|
||||
--cs-secondary-button-background: var(--cs-secondary);
|
||||
--cs-secondary-button-text: var(--cs-foreground);
|
||||
--cs-secondary-button-background-hover: hsla(0, 0%, 100%, 0.2);
|
||||
--cs-secondary-button-background-active: hsla(0, 0%, 100%, 0.25);
|
||||
--cs-secondary-button-border: var(--cs-border);
|
||||
|
||||
/* Ghost Button */
|
||||
--cs-ghost-button-background: hsla(0, 0%, 100%, 0);
|
||||
--cs-ghost-button-text: var(--cs-foreground);
|
||||
--cs-ghost-button-background-hover: var(--cs-ghost-hover);
|
||||
--cs-ghost-button-background-active: var(--cs-ghost-active);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user