mirror of
https://github.com/CherryHQ/cherry-studio.git
synced 2026-01-09 14:59:27 +08:00
d164d7c8bf
- Changed the main CSS file reference from `globals.css` to `theme.css` in `components.json` for better theme management. - Introduced `index.css` to export only CSS variables, allowing npm users to utilize design tokens without overriding Tailwind defaults. - Removed `globals.css` as it is no longer needed with the new structure. - Updated `package.json` to reflect changes in CSS file paths. - Enhanced `README.md` to clarify installation and configuration steps for the new styling approach.
561 lines
19 KiB
CSS
561 lines
19 KiB
CSS
/**
|
||
* CherryStudio Design Tokens
|
||
*
|
||
* 基于 todocss.css 转换的设计令牌
|
||
* - 所有变量使用 --cs-* 前缀（CherryStudio）
|
||
* - 合并重复的 Spacing/Sizing
|
||
* - 修正错误（如 font-weight 单位）
|
||
* - 删除 Opacity 变量（使用 Tailwind 修饰符）
|
||
* - 正确分离 Light/Dark Mode
|
||
*/
|
||
|
||
:root {
|
||
/* ==================== */
|
||
/* Primitive Colors - Light Mode */
|
||
/* ==================== */
|
||
|
||
/* Neutral */
|
||
--cs-neutral-50: hsla(0, 0%, 98%, 1);
|
||
--cs-neutral-100: hsla(0, 0%, 96%, 1);
|
||
--cs-neutral-200: hsla(0, 0%, 90%, 1);
|
||
--cs-neutral-300: hsla(0, 0%, 83%, 1);
|
||
--cs-neutral-400: hsla(0, 0%, 64%, 1);
|
||
--cs-neutral-500: hsla(0, 0%, 45%, 1);
|
||
--cs-neutral-600: hsla(215, 14%, 34%, 1);
|
||
--cs-neutral-700: hsla(0, 0%, 25%, 1);
|
||
--cs-neutral-800: hsla(0, 0%, 15%, 1);
|
||
--cs-neutral-900: hsla(0, 0%, 9%, 1);
|
||
--cs-neutral-950: hsla(0, 0%, 4%, 1);
|
||
|
||
/* Stone */
|
||
--cs-stone-50: hsla(60, 9%, 98%, 1);
|
||
--cs-stone-100: hsla(60, 5%, 96%, 1);
|
||
--cs-stone-200: hsla(20, 6%, 90%, 1);
|
||
--cs-stone-300: hsla(24, 6%, 83%, 1);
|
||
--cs-stone-400: hsla(24, 5%, 64%, 1);
|
||
--cs-stone-500: hsla(25, 5%, 45%, 1);
|
||
--cs-stone-600: hsla(33, 5%, 32%, 1);
|
||
--cs-stone-700: hsla(30, 6%, 25%, 1);
|
||
--cs-stone-800: hsla(12, 6%, 15%, 1);
|
||
--cs-stone-900: hsla(24, 10%, 10%, 1);
|
||
--cs-stone-950: hsla(20, 14%, 4%, 1);
|
||
|
||
/* Zinc */
|
||
--cs-zinc-50: hsla(0, 0%, 98%, 1);
|
||
--cs-zinc-100: hsla(240, 5%, 96%, 1);
|
||
--cs-zinc-200: hsla(240, 6%, 90%, 1);
|
||
--cs-zinc-300: hsla(240, 5%, 84%, 1);
|
||
--cs-zinc-400: hsla(240, 5%, 65%, 1);
|
||
--cs-zinc-500: hsla(240, 4%, 46%, 1);
|
||
--cs-zinc-600: hsla(240, 5%, 34%, 1);
|
||
--cs-zinc-700: hsla(240, 5%, 26%, 1);
|
||
--cs-zinc-800: hsla(240, 4%, 16%, 1);
|
||
--cs-zinc-900: hsla(240, 6%, 10%, 1);
|
||
--cs-zinc-950: hsla(240, 10%, 4%, 1);
|
||
|
||
/* Slate */
|
||
--cs-slate-50: hsla(210, 40%, 98%, 1);
|
||
--cs-slate-100: hsla(210, 40%, 96%, 1);
|
||
--cs-slate-200: hsla(214, 32%, 91%, 1);
|
||
--cs-slate-300: hsla(213, 27%, 84%, 1);
|
||
--cs-slate-400: hsla(215, 20%, 65%, 1);
|
||
--cs-slate-500: hsla(215, 16%, 47%, 1);
|
||
--cs-slate-600: hsla(215, 19%, 35%, 1);
|
||
--cs-slate-700: hsla(215, 25%, 27%, 1);
|
||
--cs-slate-800: hsla(217, 33%, 17%, 1);
|
||
--cs-slate-900: hsla(222, 47%, 11%, 1);
|
||
--cs-slate-950: hsla(229, 84%, 5%, 1);
|
||
|
||
/* Gray */
|
||
--cs-gray-50: hsla(210, 20%, 98%, 1);
|
||
--cs-gray-100: hsla(220, 14%, 96%, 1);
|
||
--cs-gray-200: hsla(220, 13%, 91%, 1);
|
||
--cs-gray-300: hsla(216, 12%, 84%, 1);
|
||
--cs-gray-400: hsla(218, 11%, 65%, 1);
|
||
--cs-gray-500: hsla(220, 9%, 46%, 1);
|
||
--cs-gray-600: hsla(0, 0%, 32%, 1);
|
||
--cs-gray-700: hsla(217, 19%, 27%, 1);
|
||
--cs-gray-800: hsla(215, 28%, 17%, 1);
|
||
--cs-gray-900: hsla(221, 39%, 11%, 1);
|
||
--cs-gray-950: hsla(224, 71%, 4%, 1);
|
||
|
||
/* Red */
|
||
--cs-red-50: hsla(0, 86%, 97%, 1);
|
||
--cs-red-100: hsla(0, 93%, 94%, 1);
|
||
--cs-red-200: hsla(0, 96%, 89%, 1);
|
||
--cs-red-300: hsla(0, 94%, 82%, 1);
|
||
--cs-red-400: hsla(0, 91%, 71%, 1);
|
||
--cs-red-500: hsla(0, 84%, 60%, 1);
|
||
--cs-red-600: hsla(0, 72%, 51%, 1);
|
||
--cs-red-700: hsla(0, 74%, 42%, 1);
|
||
--cs-red-800: hsla(0, 70%, 35%, 1);
|
||
--cs-red-900: hsla(0, 63%, 31%, 1);
|
||
--cs-red-950: hsla(0, 75%, 15%, 1);
|
||
|
||
/* Orange */
|
||
--cs-orange-50: hsla(33, 100%, 96%, 1);
|
||
--cs-orange-100: hsla(34, 100%, 92%, 1);
|
||
--cs-orange-200: hsla(32, 98%, 83%, 1);
|
||
--cs-orange-300: hsla(31, 97%, 72%, 1);
|
||
--cs-orange-400: hsla(27, 96%, 61%, 1);
|
||
--cs-orange-500: hsla(25, 95%, 53%, 1);
|
||
--cs-orange-600: hsla(21, 90%, 48%, 1);
|
||
--cs-orange-700: hsla(17, 88%, 40%, 1);
|
||
--cs-orange-800: hsla(15, 79%, 34%, 1);
|
||
--cs-orange-900: hsla(15, 75%, 28%, 1);
|
||
--cs-orange-950: hsla(13, 81%, 15%, 1);
|
||
|
||
/* Amber */
|
||
--cs-amber-50: hsla(48, 100%, 96%, 1);
|
||
--cs-amber-100: hsla(48, 96%, 89%, 1);
|
||
--cs-amber-200: hsla(48, 97%, 77%, 1);
|
||
--cs-amber-300: hsla(46, 97%, 65%, 1);
|
||
--cs-amber-400: hsla(43, 96%, 56%, 1);
|
||
--cs-amber-500: hsla(38, 92%, 50%, 1);
|
||
--cs-amber-600: hsla(32, 95%, 44%, 1);
|
||
--cs-amber-700: hsla(26, 90%, 37%, 1);
|
||
--cs-amber-800: hsla(23, 83%, 31%, 1);
|
||
--cs-amber-900: hsla(22, 78%, 26%, 1);
|
||
--cs-amber-950: hsla(21, 92%, 14%, 1);
|
||
|
||
/* Yellow */
|
||
--cs-yellow-50: hsla(55, 92%, 95%, 1);
|
||
--cs-yellow-100: hsla(55, 97%, 88%, 1);
|
||
--cs-yellow-200: hsla(53, 98%, 77%, 1);
|
||
--cs-yellow-300: hsla(50, 98%, 64%, 1);
|
||
--cs-yellow-400: hsla(48, 96%, 53%, 1);
|
||
--cs-yellow-500: hsla(45, 93%, 47%, 1);
|
||
--cs-yellow-600: hsla(41, 96%, 40%, 1);
|
||
--cs-yellow-700: hsla(35, 92%, 33%, 1);
|
||
--cs-yellow-800: hsla(32, 81%, 29%, 1);
|
||
--cs-yellow-900: hsla(28, 73%, 26%, 1);
|
||
--cs-yellow-950: hsla(26, 83%, 14%, 1);
|
||
|
||
/* Lime (品牌主色) */
|
||
--cs-lime-50: hsla(78, 92%, 95%, 1);
|
||
--cs-lime-100: hsla(80, 89%, 89%, 1);
|
||
--cs-lime-200: hsla(81, 88%, 80%, 1);
|
||
--cs-lime-300: hsla(82, 85%, 67%, 1);
|
||
--cs-lime-400: hsla(83, 78%, 55%, 1);
|
||
--cs-lime-500: hsla(84, 81%, 44%, 1);
|
||
--cs-lime-600: hsla(85, 85%, 35%, 1);
|
||
--cs-lime-700: hsla(86, 78%, 27%, 1);
|
||
--cs-lime-800: hsla(86, 69%, 23%, 1);
|
||
--cs-lime-900: hsla(88, 61%, 20%, 1);
|
||
--cs-lime-950: hsla(89, 80%, 10%, 1);
|
||
|
||
/* Green */
|
||
--cs-green-50: hsla(138, 76%, 97%, 1);
|
||
--cs-green-100: hsla(141, 84%, 93%, 1);
|
||
--cs-green-200: hsla(141, 79%, 85%, 1);
|
||
--cs-green-300: hsla(142, 77%, 73%, 1);
|
||
--cs-green-400: hsla(142, 69%, 58%, 1);
|
||
--cs-green-500: hsla(142, 71%, 45%, 1);
|
||
--cs-green-600: hsla(142, 76%, 36%, 1);
|
||
--cs-green-700: hsla(142, 72%, 29%, 1);
|
||
--cs-green-800: hsla(143, 64%, 24%, 1);
|
||
--cs-green-900: hsla(144, 61%, 20%, 1);
|
||
--cs-green-950: hsla(145, 80%, 10%, 1);
|
||
|
||
/* Emerald */
|
||
--cs-emerald-50: hsla(152, 81%, 96%, 1);
|
||
--cs-emerald-100: hsla(149, 80%, 90%, 1);
|
||
--cs-emerald-200: hsla(152, 76%, 80%, 1);
|
||
--cs-emerald-300: hsla(156, 72%, 67%, 1);
|
||
--cs-emerald-400: hsla(158, 64%, 52%, 1);
|
||
--cs-emerald-500: hsla(160, 84%, 39%, 1);
|
||
--cs-emerald-600: hsla(161, 94%, 30%, 1);
|
||
--cs-emerald-700: hsla(163, 94%, 24%, 1);
|
||
--cs-emerald-800: hsla(163, 88%, 20%, 1);
|
||
--cs-emerald-900: hsla(164, 86%, 16%, 1);
|
||
--cs-emerald-950: hsla(166, 91%, 9%, 1);
|
||
|
||
/* Teal */
|
||
--cs-teal-50: hsla(166, 76%, 97%, 1);
|
||
--cs-teal-100: hsla(167, 85%, 89%, 1);
|
||
--cs-teal-200: hsla(168, 84%, 78%, 1);
|
||
--cs-teal-300: hsla(171, 77%, 64%, 1);
|
||
--cs-teal-400: hsla(172, 66%, 50%, 1);
|
||
--cs-teal-500: hsla(173, 80%, 40%, 1);
|
||
--cs-teal-600: hsla(175, 84%, 32%, 1);
|
||
--cs-teal-700: hsla(175, 77%, 26%, 1);
|
||
--cs-teal-800: hsla(176, 69%, 22%, 1);
|
||
--cs-teal-900: hsla(176, 61%, 19%, 1);
|
||
--cs-teal-950: hsla(179, 84%, 10%, 1);
|
||
|
||
/* Cyan */
|
||
--cs-cyan-50: hsla(183, 100%, 96%, 1);
|
||
--cs-cyan-100: hsla(185, 96%, 90%, 1);
|
||
--cs-cyan-200: hsla(186, 94%, 82%, 1);
|
||
--cs-cyan-300: hsla(187, 92%, 69%, 1);
|
||
--cs-cyan-400: hsla(188, 86%, 53%, 1);
|
||
--cs-cyan-500: hsla(189, 94%, 43%, 1);
|
||
--cs-cyan-600: hsla(192, 91%, 36%, 1);
|
||
--cs-cyan-700: hsla(193, 82%, 31%, 1);
|
||
--cs-cyan-800: hsla(194, 70%, 27%, 1);
|
||
--cs-cyan-900: hsla(196, 64%, 24%, 1);
|
||
--cs-cyan-950: hsla(197, 79%, 15%, 1);
|
||
|
||
/* Sky */
|
||
--cs-sky-50: hsla(204, 100%, 97%, 1);
|
||
--cs-sky-100: hsla(204, 94%, 94%, 1);
|
||
--cs-sky-200: hsla(201, 94%, 86%, 1);
|
||
--cs-sky-300: hsla(199, 95%, 74%, 1);
|
||
--cs-sky-400: hsla(198, 93%, 60%, 1);
|
||
--cs-sky-500: hsla(199, 89%, 48%, 1);
|
||
--cs-sky-600: hsla(200, 98%, 39%, 1);
|
||
--cs-sky-700: hsla(201, 96%, 32%, 1);
|
||
--cs-sky-800: hsla(201, 90%, 27%, 1);
|
||
--cs-sky-900: hsla(202, 80%, 24%, 1);
|
||
--cs-sky-950: hsla(204, 80%, 16%, 1);
|
||
|
||
/* Blue */
|
||
--cs-blue-50: hsla(214, 100%, 97%, 1);
|
||
--cs-blue-100: hsla(214, 95%, 93%, 1);
|
||
--cs-blue-200: hsla(213, 97%, 87%, 1);
|
||
--cs-blue-300: hsla(212, 96%, 78%, 1);
|
||
--cs-blue-400: hsla(213, 94%, 68%, 1);
|
||
--cs-blue-500: hsla(217, 91%, 60%, 1);
|
||
--cs-blue-600: hsla(221, 83%, 53%, 1);
|
||
--cs-blue-700: hsla(224, 76%, 48%, 1);
|
||
--cs-blue-800: hsla(226, 71%, 40%, 1);
|
||
--cs-blue-900: hsla(224, 64%, 33%, 1);
|
||
--cs-blue-950: hsla(226, 57%, 21%, 1);
|
||
|
||
/* Indigo */
|
||
--cs-indigo-50: hsla(226, 100%, 97%, 1);
|
||
--cs-indigo-100: hsla(226, 100%, 94%, 1);
|
||
--cs-indigo-200: hsla(228, 96%, 89%, 1);
|
||
--cs-indigo-300: hsla(230, 94%, 82%, 1);
|
||
--cs-indigo-400: hsla(234, 89%, 74%, 1);
|
||
--cs-indigo-500: hsla(239, 84%, 67%, 1);
|
||
--cs-indigo-600: hsla(243, 75%, 59%, 1);
|
||
--cs-indigo-700: hsla(245, 58%, 51%, 1);
|
||
--cs-indigo-800: hsla(244, 55%, 41%, 1);
|
||
--cs-indigo-900: hsla(242, 47%, 34%, 1);
|
||
--cs-indigo-950: hsla(244, 47%, 20%, 1);
|
||
|
||
/* Violet */
|
||
--cs-violet-50: hsla(250, 100%, 98%, 1);
|
||
--cs-violet-100: hsla(251, 91%, 95%, 1);
|
||
--cs-violet-200: hsla(251, 95%, 92%, 1);
|
||
--cs-violet-300: hsla(253, 95%, 85%, 1);
|
||
--cs-violet-400: hsla(255, 92%, 76%, 1);
|
||
--cs-violet-500: hsla(258, 90%, 66%, 1);
|
||
--cs-violet-600: hsla(262, 83%, 58%, 1);
|
||
--cs-violet-700: hsla(263, 70%, 50%, 1);
|
||
--cs-violet-800: hsla(263, 69%, 42%, 1);
|
||
--cs-violet-900: hsla(264, 67%, 35%, 1);
|
||
--cs-violet-950: hsla(262, 78%, 23%, 1);
|
||
|
||
/* Purple */
|
||
--cs-purple-50: hsla(270, 100%, 98%, 1);
|
||
--cs-purple-100: hsla(269, 100%, 95%, 1);
|
||
--cs-purple-200: hsla(269, 100%, 92%, 1);
|
||
--cs-purple-300: hsla(269, 97%, 85%, 1);
|
||
--cs-purple-400: hsla(270, 95%, 75%, 1);
|
||
--cs-purple-500: hsla(271, 91%, 65%, 1);
|
||
--cs-purple-600: hsla(271, 81%, 56%, 1);
|
||
--cs-purple-700: hsla(272, 72%, 47%, 1);
|
||
--cs-purple-800: hsla(273, 67%, 39%, 1);
|
||
--cs-purple-900: hsla(274, 66%, 32%, 1);
|
||
--cs-purple-950: hsla(274, 87%, 21%, 1);
|
||
|
||
/* Fuchsia */
|
||
--cs-fuchsia-50: hsla(289, 100%, 98%, 1);
|
||
--cs-fuchsia-100: hsla(287, 100%, 95%, 1);
|
||
--cs-fuchsia-200: hsla(288, 96%, 91%, 1);
|
||
--cs-fuchsia-300: hsla(291, 93%, 83%, 1);
|
||
--cs-fuchsia-400: hsla(292, 91%, 73%, 1);
|
||
--cs-fuchsia-500: hsla(292, 84%, 61%, 1);
|
||
--cs-fuchsia-600: hsla(293, 69%, 49%, 1);
|
||
--cs-fuchsia-700: hsla(295, 72%, 40%, 1);
|
||
--cs-fuchsia-800: hsla(295, 70%, 33%, 1);
|
||
--cs-fuchsia-900: hsla(297, 64%, 28%, 1);
|
||
--cs-fuchsia-950: hsla(297, 90%, 16%, 1);
|
||
|
||
/* Pink */
|
||
--cs-pink-50: hsla(327, 73%, 97%, 1);
|
||
--cs-pink-100: hsla(326, 78%, 95%, 1);
|
||
--cs-pink-200: hsla(326, 85%, 90%, 1);
|
||
--cs-pink-300: hsla(327, 87%, 82%, 1);
|
||
--cs-pink-400: hsla(329, 86%, 70%, 1);
|
||
--cs-pink-500: hsla(330, 81%, 60%, 1);
|
||
--cs-pink-600: hsla(333, 71%, 51%, 1);
|
||
--cs-pink-700: hsla(335, 78%, 42%, 1);
|
||
--cs-pink-800: hsla(336, 74%, 35%, 1);
|
||
--cs-pink-900: hsla(336, 69%, 30%, 1);
|
||
--cs-pink-950: hsla(336, 84%, 17%, 1);
|
||
|
||
/* Rose */
|
||
--cs-rose-50: hsla(356, 100%, 97%, 1);
|
||
--cs-rose-100: hsla(356, 100%, 95%, 1);
|
||
--cs-rose-200: hsla(353, 96%, 90%, 1);
|
||
--cs-rose-300: hsla(353, 96%, 82%, 1);
|
||
--cs-rose-400: hsla(351, 95%, 71%, 1);
|
||
--cs-rose-500: hsla(350, 89%, 60%, 1);
|
||
--cs-rose-600: hsla(347, 77%, 50%, 1);
|
||
--cs-rose-700: hsla(345, 83%, 41%, 1);
|
||
--cs-rose-800: hsla(343, 80%, 35%, 1);
|
||
--cs-rose-900: hsla(342, 75%, 30%, 1);
|
||
--cs-rose-950: hsla(343, 88%, 16%, 1);
|
||
|
||
/* Black & White */
|
||
--cs-black: hsla(0, 0%, 0%, 1);
|
||
--cs-white: hsla(0, 0%, 100%, 1);
|
||
|
||
/* ==================== */
|
||
/* Semantic Tokens - Light Mode */
|
||
/* ==================== */
|
||
|
||
/* Brand Colors */
|
||
--cs-primary: var(--cs-lime-500);
|
||
--cs-destructive: var(--cs-red-500);
|
||
--cs-success: var(--cs-green-500);
|
||
--cs-warning: var(--cs-amber-500);
|
||
|
||
/* Background & Foreground */
|
||
--cs-background: var(--cs-zinc-50);
|
||
--cs-background-subtle: hsla(0, 0%, 0%, 0.02);
|
||
--cs-foreground: hsla(0, 0%, 0%, 0.9);
|
||
--cs-foreground-secondary: hsla(0, 0%, 0%, 0.6);
|
||
--cs-foreground-muted: hsla(0, 0%, 0%, 0.4);
|
||
|
||
/* Card & Popover */
|
||
--cs-card: var(--cs-white);
|
||
--cs-popover: var(--cs-white);
|
||
|
||
/* Border */
|
||
--cs-border: hsla(0, 0%, 0%, 0.1);
|
||
--cs-border-hover: hsla(0, 0%, 0%, 0.2);
|
||
--cs-border-active: hsla(0, 0%, 0%, 0.3);
|
||
|
||
/* Ring (Focus) */
|
||
--cs-ring: hsla(84, 81%, 44%, 0.4);
|
||
|
||
/* UI Element Colors */
|
||
--cs-secondary: hsla(0, 0%, 0%, 0.05); /* Secondary Button Background */
|
||
--cs-secondary-hover: hsla(0, 0%, 0%, 0.85);
|
||
--cs-secondary-active: hsla(0, 0%, 0%, 0.7);
|
||
--cs-muted: hsla(0, 0%, 0%, 0.05); /* Muted/Subtle Background */
|
||
--cs-accent: hsla(0, 0%, 0%, 0.05); /* Accent Background */
|
||
--cs-ghost-hover: hsla(0, 0%, 0%, 0.05); /* Ghost Button Hover */
|
||
--cs-ghost-active: hsla(0, 0%, 0%, 0.1); /* Ghost Button Active */
|
||
|
||
/* Sidebar */
|
||
--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 (合并) */
|
||
/* ==================== */
|
||
|
||
--cs-size-5xs: 0.25rem; /* 4px */
|
||
--cs-size-4xs: 0.5rem; /* 8px */
|
||
--cs-size-3xs: 0.75rem; /* 12px */
|
||
--cs-size-2xs: 1rem; /* 16px */
|
||
--cs-size-xs: 1.5rem; /* 24px */
|
||
--cs-size-sm: 2rem; /* 32px */
|
||
--cs-size-md: 2.5rem; /* 40px */
|
||
--cs-size-lg: 3rem; /* 48px */
|
||
--cs-size-xl: 3.5rem; /* 56px */
|
||
--cs-size-2xl: 4rem; /* 64px */
|
||
--cs-size-3xl: 4.5rem; /* 72px */
|
||
--cs-size-4xl: 5rem; /* 80px */
|
||
--cs-size-5xl: 5.5rem; /* 88px */
|
||
--cs-size-6xl: 6rem; /* 96px */
|
||
--cs-size-7xl: 6.5rem; /* 104px */
|
||
--cs-size-8xl: 7rem; /* 112px */
|
||
|
||
/* ==================== */
|
||
/* Border Radius */
|
||
/* ==================== */
|
||
|
||
--cs-radius-4xs: 4px; /* 4px */
|
||
--cs-radius-3xs: 8px; /* 8px */
|
||
--cs-radius-2xs: 12px; /* 12px */
|
||
--cs-radius-xs: 16px; /* 16px */
|
||
--cs-radius-sm: 24px; /* 24px */
|
||
--cs-radius-md: 32px; /* 32px */
|
||
--cs-radius-lg: 2.5rem; /* 40px */
|
||
--cs-radius-xl: 48px; /* 48px */
|
||
--cs-radius-2xl: 56px; /* 56px */
|
||
--cs-radius-3xl: 64px; /* 64px */
|
||
--cs-radius-round: 999px; /* 保持 px，因为是特殊值 */
|
||
|
||
/* Border Width */
|
||
--cs-border-width-sm: 1px; /* 1px */
|
||
--cs-border-width-md: 2px; /* 2px */
|
||
--cs-border-width-lg: 3px; /* 3px */
|
||
|
||
/* ==================== */
|
||
/* Typography */
|
||
/* ==================== */
|
||
|
||
/* Font Families */
|
||
--cs-font-family-heading: Inter;
|
||
--cs-font-family-body: Inter;
|
||
|
||
/* Font Weights (修正单位错误) */
|
||
--cs-font-weight-regular: 400;
|
||
--cs-font-weight-medium: 500;
|
||
--cs-font-weight-bold: 700;
|
||
|
||
/* Font Sizes - Body */
|
||
--cs-font-size-body-xs: 0.75rem; /* 12px */
|
||
--cs-font-size-body-sm: 0.875rem; /* 14px */
|
||
--cs-font-size-body-md: 1rem; /* 16px */
|
||
--cs-font-size-body-lg: 1.125rem; /* 18px */
|
||
|
||
/* Font Sizes - Heading */
|
||
--cs-font-size-heading-xs: 1.25rem; /* 20px */
|
||
--cs-font-size-heading-sm: 1.5rem; /* 24px */
|
||
--cs-font-size-heading-md: 2rem; /* 32px */
|
||
--cs-font-size-heading-lg: 2.5rem; /* 40px */
|
||
--cs-font-size-heading-xl: 3rem; /* 48px */
|
||
--cs-font-size-heading-2xl: 3.75rem; /* 60px */
|
||
|
||
/* Line Heights - Body */
|
||
--cs-line-height-body-xs: 1.25rem; /* 20px */
|
||
--cs-line-height-body-sm: 1.5rem; /* 24px */
|
||
--cs-line-height-body-md: 1.5rem; /* 24px */
|
||
--cs-line-height-body-lg: 1.75rem; /* 28px */
|
||
|
||
/* Line Heights - Heading */
|
||
--cs-line-height-heading-xs: 2rem; /* 32px */
|
||
--cs-line-height-heading-sm: 2.5rem; /* 40px */
|
||
--cs-line-height-heading-md: 3rem; /* 48px */
|
||
--cs-line-height-heading-lg: 3.75rem; /* 60px */
|
||
--cs-line-height-heading-xl: 5rem; /* 80px */
|
||
|
||
/* Paragraph Spacing */
|
||
--cs-paragraph-spacing-body-xs: 0.75rem; /* 12px */
|
||
--cs-paragraph-spacing-body-sm: 0.875rem; /* 14px */
|
||
--cs-paragraph-spacing-body-md: 1rem; /* 16px */
|
||
--cs-paragraph-spacing-body-lg: 1.125rem; /* 18px */
|
||
--cs-paragraph-spacing-heading-xs: 1.25rem; /* 20px */
|
||
--cs-paragraph-spacing-heading-sm: 1.5rem; /* 24px */
|
||
--cs-paragraph-spacing-heading-md: 2rem; /* 32px */
|
||
--cs-paragraph-spacing-heading-lg: 2.5rem; /* 40px */
|
||
--cs-paragraph-spacing-heading-xl: 3rem; /* 48px */
|
||
--cs-paragraph-spacing-heading-2xl: 3.75rem; /* 60px */
|
||
}
|
||
|
||
/* ==================== */
|
||
/* Dark Mode */
|
||
/* ==================== */
|
||
|
||
.dark {
|
||
/* Background & Foreground */
|
||
--cs-background: var(--cs-zinc-900);
|
||
--cs-background-subtle: hsla(0, 0%, 100%, 0.02);
|
||
--cs-foreground: hsla(0, 0%, 100%, 0.9);
|
||
--cs-foreground-secondary: hsla(0, 0%, 100%, 0.6);
|
||
--cs-foreground-muted: hsla(0, 0%, 100%, 0.4);
|
||
|
||
/* Card & Popover */
|
||
--cs-card: var(--cs-black);
|
||
--cs-popover: var(--cs-black);
|
||
|
||
/* Border */
|
||
--cs-border: hsla(0, 0%, 100%, 0.1);
|
||
--cs-border-hover: hsla(0, 0%, 100%, 0.2);
|
||
--cs-border-active: hsla(0, 0%, 100%, 0.3);
|
||
|
||
/* Ring (Focus) - 保持不变 */
|
||
--cs-ring: hsla(84, 81%, 44%, 0.4);
|
||
|
||
/* UI Element Colors - Dark Mode */
|
||
--cs-secondary: hsla(0, 0%, 100%, 0.1); /* Secondary Button Background */
|
||
--cs-secondary-hover: hsla(0, 0%, 100%, 0.2);
|
||
--cs-secondary-active: hsla(0, 0%, 100%, 0.25);
|
||
--cs-muted: hsla(0, 0%, 100%, 0.1); /* Muted/Subtle Background */
|
||
--cs-accent: hsla(0, 0%, 100%, 0.1); /* Accent Background */
|
||
--cs-ghost-hover: hsla(0, 0%, 100%, 0.1); /* Ghost Button Hover */
|
||
--cs-ghost-active: hsla(0, 0%, 100%, 0.15); /* Ghost Button Active */
|
||
|
||
/* 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);
|
||
}
|