mirror of
https://github.com/CherryHQ/cherry-studio.git
synced 2026-01-04 20:00:00 +08:00
refactor: update CSS structure and improve theme integration
- 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.
This commit is contained in:
MyPrototypeWhat
parent
23f7b39753
commit
d164d7c8bf
@ -2,54 +2,87 @@
|
||||
|
||||
Cherry Studio UI 组件库 - 为 Cherry Studio 设计的 React 组件集合
|
||||
|
||||
## 特性
|
||||
## ✨ 特性
|
||||
|
||||
- 🎨 基于 Tailwind CSS 的现代化设计
|
||||
- 📦 支持 ESM 和 CJS 格式
|
||||
- 🔷 完整的 TypeScript 支持
|
||||
- 🚀 可以作为 npm 包发布
|
||||
- 🔧 开箱即用的常用 hooks 和工具函数
|
||||
- 🎨 **设计系统**: 完整的 CherryStudio 设计令牌（17种颜色 × 11个色阶 + 语义化主题）
|
||||
- 🌓 **Dark Mode**: 开箱即用的深色模式支持
|
||||
- 🚀 **Tailwind v4**: 基于最新 Tailwind CSS v4 构建
|
||||
- 📦 **灵活导入**: 3种样式导入方式，满足不同使用场景
|
||||
- 🔷 **TypeScript**: 完整的类型定义和智能提示
|
||||
- 🎯 **零冲突**: CSS 变量隔离，不覆盖用户主题
|
||||
|
||||
## 安装
|
||||
---
|
||||
|
||||
## 🚀 快速开始
|
||||
|
||||
### 安装
|
||||
|
||||
```bash
|
||||
# 安装组件库
|
||||
npm install @cherrystudio/ui
|
||||
|
||||
# 安装必需的 peer dependencies
|
||||
# peer dependencies
|
||||
npm install @heroui/react framer-motion react react-dom tailwindcss
|
||||
```
|
||||
|
||||
## 配置
|
||||
### 三种使用方式
|
||||
|
||||
### 1. Tailwind CSS v4 配置
|
||||
根据你的需求选择一种：
|
||||
|
||||
本组件库使用 Tailwind CSS v4，配置方式已改变。在你的主 CSS 文件（如 `src/styles/tailwind.css`）中：
|
||||
#### 方式 1：完整主题（推荐给主包）
|
||||
|
||||
```css
|
||||
/* app.css */
|
||||
@import '@cherrystudio/ui/styles/theme.css';
|
||||
```
|
||||
|
||||
- ✅ 使用标准 Tailwind 类名（`bg-primary`、`bg-red-500`）
|
||||
- ✅ 所有颜色使用设计师定义的值
|
||||
- ⚠️ 会覆盖 Tailwind 默认颜色
|
||||
|
||||
```tsx
|
||||
<Button className="bg-primary text-red-500 p-md">
|
||||
{/* bg-primary → CherryStudio 品牌色（lime-500） */}
|
||||
{/* text-red-500 → 设计师定义的红色 */}
|
||||
{/* p-md → 2.5rem（设计师定义） */}
|
||||
</Button>
|
||||
```
|
||||
|
||||
#### 方式 2：仅变量（推荐给 npm 用户）
|
||||
|
||||
```css
|
||||
/* app.css */
|
||||
@import 'tailwindcss';
|
||||
@import '@cherrystudio/ui/styles/index.css';
|
||||
```
|
||||
|
||||
/* 必须扫描组件库文件以提取类名 */
|
||||
@source '../node_modules/@cherrystudio/ui/dist/**/*.{js,mjs}';
|
||||
- ✅ 不覆盖你的 Tailwind 主题
|
||||
- ✅ 通过 CSS 变量使用（`var(--cs-primary)`）
|
||||
- ✅ 你的 `bg-red-500` 不受影响
|
||||
|
||||
/* 你的应用源文件 */
|
||||
@source './src/**/*.{js,ts,jsx,tsx}';
|
||||
```tsx
|
||||
<button style={{ backgroundColor: 'var(--cs-primary)' }}>
|
||||
{/* 使用 CherryStudio 品牌色 */}
|
||||
</button>
|
||||
|
||||
/*
|
||||
* 如果你的应用直接使用 HeroUI 组件，需要添加：
|
||||
* @source '../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}';
|
||||
* @plugin '@heroui/react/plugin';
|
||||
*/
|
||||
<div className="bg-red-500">
|
||||
{/* 使用你自己的红色，不受影响 */}
|
||||
</div>
|
||||
```
|
||||
|
||||
/* 自定义主题配置（可选） */
|
||||
#### 方式 3：选择性覆盖
|
||||
|
||||
```css
|
||||
/* app.css */
|
||||
@import 'tailwindcss';
|
||||
@import '@cherrystudio/ui/styles/tokens.css';
|
||||
|
||||
/* 只使用部分设计系统 */
|
||||
@theme {
|
||||
/* 你的主题扩展 */
|
||||
--color-primary: var(--cs-primary); /* 用 CS 的主色 */
|
||||
--color-red-500: oklch(...); /* 用自己的红色 */
|
||||
}
|
||||
```
|
||||
|
||||
注意：Tailwind CSS v4 不再使用 `tailwind.config.js` 文件，所有配置都在 CSS 中完成。
|
||||
|
||||
### 2. Provider 配置
|
||||
### Provider 配置
|
||||
|
||||
在你的 App 根组件中添加 HeroUI Provider：
|
||||
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
"tailwind": {
|
||||
"baseColor": "zinc",
|
||||
"config": "",
|
||||
"css": "src/styles/globals.css",
|
||||
"css": "src/styles/theme.css",
|
||||
"cssVariables": true,
|
||||
"prefix": ""
|
||||
},
|
||||
|
||||
@ -125,9 +125,10 @@
|
||||
"require": "./dist/utils/index.js",
|
||||
"default": "./dist/utils/index.js"
|
||||
},
|
||||
"./styles/design-tokens.css": "./src/styles/design-tokens.css",
|
||||
"./styles": "./src/styles/index.css",
|
||||
"./styles/tokens.css": "./src/styles/tokens.css",
|
||||
"./styles/theme.css": "./src/styles/theme.css",
|
||||
"./styles/globals.css": "./src/styles/globals.css"
|
||||
"./styles/index.css": "./src/styles/index.css"
|
||||
},
|
||||
"packageManager": "yarn@4.9.1"
|
||||
}
|
||||
|
||||
@ -1,146 +0,0 @@
|
||||
/**
|
||||
* CherryStudio Globals CSS
|
||||
*
|
||||
* 主包专用：完整样式 + Tailwind 覆盖
|
||||
* - 引入 theme.css（包含所有 cs-* 前缀类）
|
||||
* - 覆盖 Tailwind 标准命名（bg-primary 等）
|
||||
*/
|
||||
|
||||
@import 'tailwindcss';
|
||||
@import 'tw-animate-css';
|
||||
@import './theme.css'; /* 已包含 design-tokens.css 和所有 cs-* 工具类 */
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
/* ==================== */
|
||||
/* 覆盖 Tailwind 标准命名（仅主包使用） */
|
||||
/* 注意：cs-* 前缀类已由 theme.css 提供，此处不重复定义 */
|
||||
/* ==================== */
|
||||
|
||||
@theme {
|
||||
/* ==================== */
|
||||
/* 语义化颜色（覆盖 Tailwind 标准命名） */
|
||||
/* ==================== */
|
||||
--color-primary: var(--cs-primary);
|
||||
--color-primary-foreground: var(--cs-white);
|
||||
--color-destructive: var(--cs-destructive);
|
||||
--color-destructive-foreground: var(--cs-white);
|
||||
--color-background: var(--cs-background);
|
||||
--color-foreground: var(--cs-foreground);
|
||||
--color-card: var(--cs-card);
|
||||
--color-card-foreground: var(--cs-foreground);
|
||||
--color-popover: var(--cs-popover);
|
||||
--color-popover-foreground: var(--cs-foreground);
|
||||
--color-secondary: var(--cs-secondary);
|
||||
--color-secondary-foreground: var(--cs-foreground);
|
||||
--color-muted: var(--cs-muted);
|
||||
--color-muted-foreground: var(--cs-foreground-secondary);
|
||||
--color-accent: var(--cs-accent);
|
||||
--color-accent-foreground: var(--cs-foreground);
|
||||
--color-border: var(--cs-border);
|
||||
--color-input: var(--cs-border);
|
||||
--color-ring: var(--cs-ring);
|
||||
|
||||
/* 图表颜色 */
|
||||
--color-chart-1: var(--cs-blue-500);
|
||||
--color-chart-2: var(--cs-emerald-500);
|
||||
--color-chart-3: var(--cs-purple-500);
|
||||
--color-chart-4: var(--cs-amber-500);
|
||||
--color-chart-5: var(--cs-orange-500);
|
||||
|
||||
/* 侧边栏 */
|
||||
--color-sidebar: var(--cs-sidebar);
|
||||
--color-sidebar-foreground: var(--cs-foreground);
|
||||
--color-sidebar-primary: var(--cs-primary);
|
||||
--color-sidebar-primary-foreground: var(--cs-white);
|
||||
--color-sidebar-accent: var(--cs-sidebar-accent);
|
||||
--color-sidebar-accent-foreground: var(--cs-foreground);
|
||||
--color-sidebar-border: var(--cs-border);
|
||||
--color-sidebar-ring: var(--cs-ring);
|
||||
|
||||
/* ==================== */
|
||||
/* Primitive 颜色（标准命名，覆盖 Tailwind） */
|
||||
/* ==================== */
|
||||
|
||||
/* Red */
|
||||
--color-red-50: var(--cs-red-50);
|
||||
--color-red-100: var(--cs-red-100);
|
||||
--color-red-200: var(--cs-red-200);
|
||||
--color-red-300: var(--cs-red-300);
|
||||
--color-red-400: var(--cs-red-400);
|
||||
--color-red-500: var(--cs-red-500);
|
||||
--color-red-600: var(--cs-red-600);
|
||||
--color-red-700: var(--cs-red-700);
|
||||
--color-red-800: var(--cs-red-800);
|
||||
--color-red-900: var(--cs-red-900);
|
||||
--color-red-950: var(--cs-red-950);
|
||||
|
||||
/* Lime */
|
||||
--color-lime-50: var(--cs-lime-50);
|
||||
--color-lime-100: var(--cs-lime-100);
|
||||
--color-lime-200: var(--cs-lime-200);
|
||||
--color-lime-300: var(--cs-lime-300);
|
||||
--color-lime-400: var(--cs-lime-400);
|
||||
--color-lime-500: var(--cs-lime-500);
|
||||
--color-lime-600: var(--cs-lime-600);
|
||||
--color-lime-700: var(--cs-lime-700);
|
||||
--color-lime-800: var(--cs-lime-800);
|
||||
--color-lime-900: var(--cs-lime-900);
|
||||
--color-lime-950: var(--cs-lime-950);
|
||||
|
||||
/* Green */
|
||||
--color-green-500: var(--cs-green-500);
|
||||
|
||||
/* Amber */
|
||||
--color-amber-500: var(--cs-amber-500);
|
||||
|
||||
/* Blue */
|
||||
--color-blue-500: var(--cs-blue-500);
|
||||
|
||||
/* Emerald */
|
||||
--color-emerald-500: var(--cs-emerald-500);
|
||||
|
||||
/* Purple */
|
||||
--color-purple-500: var(--cs-purple-500);
|
||||
|
||||
/* Orange */
|
||||
--color-orange-500: var(--cs-orange-500);
|
||||
|
||||
/* Zinc */
|
||||
--color-zinc-50: var(--cs-zinc-50);
|
||||
--color-zinc-500: var(--cs-zinc-500);
|
||||
--color-zinc-900: var(--cs-zinc-900);
|
||||
|
||||
/* 其他常用颜色 */
|
||||
--color-slate-500: var(--cs-slate-500);
|
||||
--color-gray-500: var(--cs-gray-500);
|
||||
--color-black: var(--cs-black);
|
||||
--color-white: var(--cs-white);
|
||||
|
||||
/* ==================== */
|
||||
/* Spacing & Radius（标准命名，覆盖 Tailwind） */
|
||||
/* ==================== */
|
||||
|
||||
--spacing-xs: var(--cs-size-xs);
|
||||
--spacing-sm: var(--cs-size-sm);
|
||||
--spacing-md: var(--cs-size-md);
|
||||
--spacing-lg: var(--cs-size-lg);
|
||||
--spacing-xl: var(--cs-size-xl);
|
||||
--spacing-2xl: var(--cs-size-2xl);
|
||||
|
||||
--radius-xs: var(--cs-radius-xs);
|
||||
--radius-sm: var(--cs-radius-sm);
|
||||
--radius-md: var(--cs-radius-md);
|
||||
--radius-lg: var(--cs-radius-lg);
|
||||
--radius-xl: var(--cs-radius-xl);
|
||||
--radius-2xl: var(--cs-radius-2xl);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border outline-ring/50;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
24
packages/ui/src/styles/index.css
Normal file
24
packages/ui/src/styles/index.css
Normal file
@ -0,0 +1,24 @@
|
||||
/**
|
||||
* CherryStudio Styles - npm 包入口
|
||||
*
|
||||
* 用途：仅导出 CSS 变量，不生成工具类，不覆盖用户主题
|
||||
* 使用场景：
|
||||
* - npm 用户想使用设计系统的变量，但不想覆盖 Tailwind 默认主题
|
||||
* - 可以通过 var(--cs-primary) 等方式使用
|
||||
* - 不会生成 bg-primary 等工具类（用户自己的 bg-primary 不受影响）
|
||||
*
|
||||
* 示例：
|
||||
* ```css
|
||||
* @import '@cherrystudio/ui/styles/index.css';
|
||||
*
|
||||
* .my-button {
|
||||
* background: var(--cs-primary); // 使用 CS 的品牌色
|
||||
* padding: var(--cs-size-md); // 使用 CS 的间距
|
||||
* }
|
||||
* ```
|
||||
*
|
||||
* 如果想要完整的主题覆盖（生成 bg-primary 等类），请导入：
|
||||
* @import '@cherrystudio/ui/styles/theme.css';
|
||||
*/
|
||||
|
||||
@import './tokens.css';
|
||||
@ -1,241 +1,433 @@
|
||||
/**
|
||||
* CherryStudio Theme - 生成 cs-* 前缀工具类
|
||||
* CherryStudio Theme - Tailwind CSS 主题配置
|
||||
*
|
||||
* 用途：
|
||||
* - npm 包用户安全导入（不覆盖用户的标准 Tailwind 命名）
|
||||
* - UI 库组件内部使用（确保自包含）
|
||||
* 用途：映射设计师的设计系统（--cs-*）到 Tailwind 标准命名
|
||||
* 使用场景：
|
||||
* - 主包：完全使用设计系统
|
||||
* - npm 用户：可选择导入，会覆盖 Tailwind 默认主题
|
||||
*
|
||||
* 生成的工具类示例：
|
||||
* - bg-cs-primary, text-cs-primary
|
||||
* - bg-cs-destructive, border-cs-destructive
|
||||
* - p-cs-md, gap-cs-lg, m-cs-xs
|
||||
* - rounded-cs-md, rounded-cs-lg
|
||||
* 生成的工具类：bg-primary, bg-red-500, p-md 等（无前缀）
|
||||
*/
|
||||
|
||||
@import './design-tokens.css';
|
||||
@import 'tailwindcss';
|
||||
@import './tokens.css';
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
@theme {
|
||||
/* ==================== */
|
||||
/* 语义化颜色（生成 bg-cs-primary 等） */
|
||||
/* 语义化颜色（覆盖 Tailwind 标准命名） */
|
||||
/* ==================== */
|
||||
--color-primary: var(--cs-primary);
|
||||
--color-primary-foreground: var(--cs-white);
|
||||
|
||||
--color-cs-primary: var(--cs-primary);
|
||||
--color-cs-destructive: var(--cs-destructive);
|
||||
--color-cs-success: var(--cs-success);
|
||||
--color-cs-warning: var(--cs-warning);
|
||||
--color-destructive: var(--cs-destructive);
|
||||
--color-destructive-foreground: var(--cs-white);
|
||||
|
||||
--color-cs-background: var(--cs-background);
|
||||
--color-cs-foreground: var(--cs-foreground);
|
||||
--color-cs-foreground-secondary: var(--cs-foreground-secondary);
|
||||
--color-cs-foreground-muted: var(--cs-foreground-muted);
|
||||
--color-success: var(--cs-success);
|
||||
--color-success-foreground: var(--cs-white);
|
||||
|
||||
--color-cs-border: var(--cs-border);
|
||||
--color-cs-border-hover: var(--cs-border-hover);
|
||||
--color-cs-border-active: var(--cs-border-active);
|
||||
--color-cs-ring: var(--cs-ring);
|
||||
--color-warning: var(--cs-warning);
|
||||
--color-warning-foreground: var(--cs-black);
|
||||
|
||||
--color-cs-card: var(--cs-card);
|
||||
--color-cs-popover: var(--cs-popover);
|
||||
--color-cs-sidebar: var(--cs-sidebar);
|
||||
--color-background: var(--cs-background);
|
||||
--color-foreground: var(--cs-foreground);
|
||||
|
||||
--color-cs-secondary: var(--cs-secondary);
|
||||
--color-cs-muted: var(--cs-muted);
|
||||
--color-cs-accent: var(--cs-accent);
|
||||
--color-cs-sidebar-accent: var(--cs-sidebar-accent);
|
||||
--color-card: var(--cs-card);
|
||||
--color-card-foreground: var(--cs-foreground);
|
||||
|
||||
--color-popover: var(--cs-popover);
|
||||
--color-popover-foreground: var(--cs-foreground);
|
||||
|
||||
--color-secondary: var(--cs-secondary);
|
||||
--color-secondary-foreground: var(--cs-foreground);
|
||||
|
||||
--color-muted: var(--cs-muted);
|
||||
--color-muted-foreground: var(--cs-foreground-secondary);
|
||||
|
||||
--color-accent: var(--cs-accent);
|
||||
--color-accent-foreground: var(--cs-foreground);
|
||||
|
||||
--color-border: var(--cs-border);
|
||||
--color-input: var(--cs-border);
|
||||
--color-ring: var(--cs-ring);
|
||||
|
||||
/* 侧边栏 */
|
||||
--color-sidebar: var(--cs-sidebar);
|
||||
--color-sidebar-foreground: var(--cs-foreground);
|
||||
--color-sidebar-primary: var(--cs-primary);
|
||||
--color-sidebar-primary-foreground: var(--cs-white);
|
||||
--color-sidebar-accent: var(--cs-sidebar-accent);
|
||||
--color-sidebar-accent-foreground: var(--cs-foreground);
|
||||
--color-sidebar-border: var(--cs-border);
|
||||
--color-sidebar-ring: var(--cs-ring);
|
||||
|
||||
/* 图表颜色 */
|
||||
--color-chart-1: var(--cs-blue-500);
|
||||
--color-chart-2: var(--cs-emerald-500);
|
||||
--color-chart-3: var(--cs-purple-500);
|
||||
--color-chart-4: var(--cs-amber-500);
|
||||
--color-chart-5: var(--cs-orange-500);
|
||||
|
||||
/* ==================== */
|
||||
/* Primitive 颜色（完整色阶） */
|
||||
/* Primitive 颜色（覆盖 Tailwind 默认色板） */
|
||||
/* ==================== */
|
||||
|
||||
/* Neutral */
|
||||
--color-cs-neutral-50: var(--cs-neutral-50);
|
||||
--color-cs-neutral-100: var(--cs-neutral-100);
|
||||
--color-cs-neutral-200: var(--cs-neutral-200);
|
||||
--color-cs-neutral-300: var(--cs-neutral-300);
|
||||
--color-cs-neutral-400: var(--cs-neutral-400);
|
||||
--color-cs-neutral-500: var(--cs-neutral-500);
|
||||
--color-cs-neutral-600: var(--cs-neutral-600);
|
||||
--color-cs-neutral-700: var(--cs-neutral-700);
|
||||
--color-cs-neutral-800: var(--cs-neutral-800);
|
||||
--color-cs-neutral-900: var(--cs-neutral-900);
|
||||
--color-cs-neutral-950: var(--cs-neutral-950);
|
||||
--color-neutral-50: var(--cs-neutral-50);
|
||||
--color-neutral-100: var(--cs-neutral-100);
|
||||
--color-neutral-200: var(--cs-neutral-200);
|
||||
--color-neutral-300: var(--cs-neutral-300);
|
||||
--color-neutral-400: var(--cs-neutral-400);
|
||||
--color-neutral-500: var(--cs-neutral-500);
|
||||
--color-neutral-600: var(--cs-neutral-600);
|
||||
--color-neutral-700: var(--cs-neutral-700);
|
||||
--color-neutral-800: var(--cs-neutral-800);
|
||||
--color-neutral-900: var(--cs-neutral-900);
|
||||
--color-neutral-950: var(--cs-neutral-950);
|
||||
|
||||
/* Stone */
|
||||
--color-stone-50: var(--cs-stone-50);
|
||||
--color-stone-100: var(--cs-stone-100);
|
||||
--color-stone-200: var(--cs-stone-200);
|
||||
--color-stone-300: var(--cs-stone-300);
|
||||
--color-stone-400: var(--cs-stone-400);
|
||||
--color-stone-500: var(--cs-stone-500);
|
||||
--color-stone-600: var(--cs-stone-600);
|
||||
--color-stone-700: var(--cs-stone-700);
|
||||
--color-stone-800: var(--cs-stone-800);
|
||||
--color-stone-900: var(--cs-stone-900);
|
||||
--color-stone-950: var(--cs-stone-950);
|
||||
|
||||
/* Zinc */
|
||||
--color-cs-zinc-50: var(--cs-zinc-50);
|
||||
--color-cs-zinc-100: var(--cs-zinc-100);
|
||||
--color-cs-zinc-200: var(--cs-zinc-200);
|
||||
--color-cs-zinc-300: var(--cs-zinc-300);
|
||||
--color-cs-zinc-400: var(--cs-zinc-400);
|
||||
--color-cs-zinc-500: var(--cs-zinc-500);
|
||||
--color-cs-zinc-600: var(--cs-zinc-600);
|
||||
--color-cs-zinc-700: var(--cs-zinc-700);
|
||||
--color-cs-zinc-800: var(--cs-zinc-800);
|
||||
--color-cs-zinc-900: var(--cs-zinc-900);
|
||||
--color-cs-zinc-950: var(--cs-zinc-950);
|
||||
--color-zinc-50: var(--cs-zinc-50);
|
||||
--color-zinc-100: var(--cs-zinc-100);
|
||||
--color-zinc-200: var(--cs-zinc-200);
|
||||
--color-zinc-300: var(--cs-zinc-300);
|
||||
--color-zinc-400: var(--cs-zinc-400);
|
||||
--color-zinc-500: var(--cs-zinc-500);
|
||||
--color-zinc-600: var(--cs-zinc-600);
|
||||
--color-zinc-700: var(--cs-zinc-700);
|
||||
--color-zinc-800: var(--cs-zinc-800);
|
||||
--color-zinc-900: var(--cs-zinc-900);
|
||||
--color-zinc-950: var(--cs-zinc-950);
|
||||
|
||||
/* Slate */
|
||||
--color-slate-50: var(--cs-slate-50);
|
||||
--color-slate-100: var(--cs-slate-100);
|
||||
--color-slate-200: var(--cs-slate-200);
|
||||
--color-slate-300: var(--cs-slate-300);
|
||||
--color-slate-400: var(--cs-slate-400);
|
||||
--color-slate-500: var(--cs-slate-500);
|
||||
--color-slate-600: var(--cs-slate-600);
|
||||
--color-slate-700: var(--cs-slate-700);
|
||||
--color-slate-800: var(--cs-slate-800);
|
||||
--color-slate-900: var(--cs-slate-900);
|
||||
--color-slate-950: var(--cs-slate-950);
|
||||
|
||||
/* Gray */
|
||||
--color-gray-50: var(--cs-gray-50);
|
||||
--color-gray-100: var(--cs-gray-100);
|
||||
--color-gray-200: var(--cs-gray-200);
|
||||
--color-gray-300: var(--cs-gray-300);
|
||||
--color-gray-400: var(--cs-gray-400);
|
||||
--color-gray-500: var(--cs-gray-500);
|
||||
--color-gray-600: var(--cs-gray-600);
|
||||
--color-gray-700: var(--cs-gray-700);
|
||||
--color-gray-800: var(--cs-gray-800);
|
||||
--color-gray-900: var(--cs-gray-900);
|
||||
--color-gray-950: var(--cs-gray-950);
|
||||
|
||||
/* Red */
|
||||
--color-cs-red-50: var(--cs-red-50);
|
||||
--color-cs-red-100: var(--cs-red-100);
|
||||
--color-cs-red-200: var(--cs-red-200);
|
||||
--color-cs-red-300: var(--cs-red-300);
|
||||
--color-cs-red-400: var(--cs-red-400);
|
||||
--color-cs-red-500: var(--cs-red-500);
|
||||
--color-cs-red-600: var(--cs-red-600);
|
||||
--color-cs-red-700: var(--cs-red-700);
|
||||
--color-cs-red-800: var(--cs-red-800);
|
||||
--color-cs-red-900: var(--cs-red-900);
|
||||
--color-cs-red-950: var(--cs-red-950);
|
||||
|
||||
/* Lime (品牌主色) */
|
||||
--color-cs-lime-50: var(--cs-lime-50);
|
||||
--color-cs-lime-100: var(--cs-lime-100);
|
||||
--color-cs-lime-200: var(--cs-lime-200);
|
||||
--color-cs-lime-300: var(--cs-lime-300);
|
||||
--color-cs-lime-400: var(--cs-lime-400);
|
||||
--color-cs-lime-500: var(--cs-lime-500);
|
||||
--color-cs-lime-600: var(--cs-lime-600);
|
||||
--color-cs-lime-700: var(--cs-lime-700);
|
||||
--color-cs-lime-800: var(--cs-lime-800);
|
||||
--color-cs-lime-900: var(--cs-lime-900);
|
||||
--color-cs-lime-950: var(--cs-lime-950);
|
||||
|
||||
/* Green */
|
||||
--color-cs-green-50: var(--cs-green-50);
|
||||
--color-cs-green-100: var(--cs-green-100);
|
||||
--color-cs-green-200: var(--cs-green-200);
|
||||
--color-cs-green-300: var(--cs-green-300);
|
||||
--color-cs-green-400: var(--cs-green-400);
|
||||
--color-cs-green-500: var(--cs-green-500);
|
||||
--color-cs-green-600: var(--cs-green-600);
|
||||
--color-cs-green-700: var(--cs-green-700);
|
||||
--color-cs-green-800: var(--cs-green-800);
|
||||
--color-cs-green-900: var(--cs-green-900);
|
||||
--color-cs-green-950: var(--cs-green-950);
|
||||
|
||||
/* Amber */
|
||||
--color-cs-amber-50: var(--cs-amber-50);
|
||||
--color-cs-amber-100: var(--cs-amber-100);
|
||||
--color-cs-amber-200: var(--cs-amber-200);
|
||||
--color-cs-amber-300: var(--cs-amber-300);
|
||||
--color-cs-amber-400: var(--cs-amber-400);
|
||||
--color-cs-amber-500: var(--cs-amber-500);
|
||||
--color-cs-amber-600: var(--cs-amber-600);
|
||||
--color-cs-amber-700: var(--cs-amber-700);
|
||||
--color-cs-amber-800: var(--cs-amber-800);
|
||||
--color-cs-amber-900: var(--cs-amber-900);
|
||||
--color-cs-amber-950: var(--cs-amber-950);
|
||||
|
||||
/* Blue */
|
||||
--color-cs-blue-50: var(--cs-blue-50);
|
||||
--color-cs-blue-100: var(--cs-blue-100);
|
||||
--color-cs-blue-200: var(--cs-blue-200);
|
||||
--color-cs-blue-300: var(--cs-blue-300);
|
||||
--color-cs-blue-400: var(--cs-blue-400);
|
||||
--color-cs-blue-500: var(--cs-blue-500);
|
||||
--color-cs-blue-600: var(--cs-blue-600);
|
||||
--color-cs-blue-700: var(--cs-blue-700);
|
||||
--color-cs-blue-800: var(--cs-blue-800);
|
||||
--color-cs-blue-900: var(--cs-blue-900);
|
||||
--color-cs-blue-950: var(--cs-blue-950);
|
||||
|
||||
/* Emerald */
|
||||
--color-cs-emerald-50: var(--cs-emerald-50);
|
||||
--color-cs-emerald-100: var(--cs-emerald-100);
|
||||
--color-cs-emerald-200: var(--cs-emerald-200);
|
||||
--color-cs-emerald-300: var(--cs-emerald-300);
|
||||
--color-cs-emerald-400: var(--cs-emerald-400);
|
||||
--color-cs-emerald-500: var(--cs-emerald-500);
|
||||
--color-cs-emerald-600: var(--cs-emerald-600);
|
||||
--color-cs-emerald-700: var(--cs-emerald-700);
|
||||
--color-cs-emerald-800: var(--cs-emerald-800);
|
||||
--color-cs-emerald-900: var(--cs-emerald-900);
|
||||
--color-cs-emerald-950: var(--cs-emerald-950);
|
||||
|
||||
/* Purple */
|
||||
--color-cs-purple-50: var(--cs-purple-50);
|
||||
--color-cs-purple-100: var(--cs-purple-100);
|
||||
--color-cs-purple-200: var(--cs-purple-200);
|
||||
--color-cs-purple-300: var(--cs-purple-300);
|
||||
--color-cs-purple-400: var(--cs-purple-400);
|
||||
--color-cs-purple-500: var(--cs-purple-500);
|
||||
--color-cs-purple-600: var(--cs-purple-600);
|
||||
--color-cs-purple-700: var(--cs-purple-700);
|
||||
--color-cs-purple-800: var(--cs-purple-800);
|
||||
--color-cs-purple-900: var(--cs-purple-900);
|
||||
--color-cs-purple-950: var(--cs-purple-950);
|
||||
--color-red-50: var(--cs-red-50);
|
||||
--color-red-100: var(--cs-red-100);
|
||||
--color-red-200: var(--cs-red-200);
|
||||
--color-red-300: var(--cs-red-300);
|
||||
--color-red-400: var(--cs-red-400);
|
||||
--color-red-500: var(--cs-red-500);
|
||||
--color-red-600: var(--cs-red-600);
|
||||
--color-red-700: var(--cs-red-700);
|
||||
--color-red-800: var(--cs-red-800);
|
||||
--color-red-900: var(--cs-red-900);
|
||||
--color-red-950: var(--cs-red-950);
|
||||
|
||||
/* Orange */
|
||||
--color-cs-orange-50: var(--cs-orange-50);
|
||||
--color-cs-orange-100: var(--cs-orange-100);
|
||||
--color-cs-orange-200: var(--cs-orange-200);
|
||||
--color-cs-orange-300: var(--cs-orange-300);
|
||||
--color-cs-orange-400: var(--cs-orange-400);
|
||||
--color-cs-orange-500: var(--cs-orange-500);
|
||||
--color-cs-orange-600: var(--cs-orange-600);
|
||||
--color-cs-orange-700: var(--cs-orange-700);
|
||||
--color-cs-orange-800: var(--cs-orange-800);
|
||||
--color-cs-orange-900: var(--cs-orange-900);
|
||||
--color-cs-orange-950: var(--cs-orange-950);
|
||||
--color-orange-50: var(--cs-orange-50);
|
||||
--color-orange-100: var(--cs-orange-100);
|
||||
--color-orange-200: var(--cs-orange-200);
|
||||
--color-orange-300: var(--cs-orange-300);
|
||||
--color-orange-400: var(--cs-orange-400);
|
||||
--color-orange-500: var(--cs-orange-500);
|
||||
--color-orange-600: var(--cs-orange-600);
|
||||
--color-orange-700: var(--cs-orange-700);
|
||||
--color-orange-800: var(--cs-orange-800);
|
||||
--color-orange-900: var(--cs-orange-900);
|
||||
--color-orange-950: var(--cs-orange-950);
|
||||
|
||||
/* 其他颜色（按需添加） */
|
||||
--color-cs-slate-500: var(--cs-slate-500);
|
||||
--color-cs-gray-500: var(--cs-gray-500);
|
||||
--color-cs-indigo-500: var(--cs-indigo-500);
|
||||
--color-cs-violet-500: var(--cs-violet-500);
|
||||
--color-cs-cyan-500: var(--cs-cyan-500);
|
||||
--color-cs-sky-500: var(--cs-sky-500);
|
||||
--color-cs-teal-500: var(--cs-teal-500);
|
||||
--color-cs-fuchsia-500: var(--cs-fuchsia-500);
|
||||
--color-cs-pink-500: var(--cs-pink-500);
|
||||
--color-cs-rose-500: var(--cs-rose-500);
|
||||
--color-cs-yellow-500: var(--cs-yellow-500);
|
||||
/* Amber */
|
||||
--color-amber-50: var(--cs-amber-50);
|
||||
--color-amber-100: var(--cs-amber-100);
|
||||
--color-amber-200: var(--cs-amber-200);
|
||||
--color-amber-300: var(--cs-amber-300);
|
||||
--color-amber-400: var(--cs-amber-400);
|
||||
--color-amber-500: var(--cs-amber-500);
|
||||
--color-amber-600: var(--cs-amber-600);
|
||||
--color-amber-700: var(--cs-amber-700);
|
||||
--color-amber-800: var(--cs-amber-800);
|
||||
--color-amber-900: var(--cs-amber-900);
|
||||
--color-amber-950: var(--cs-amber-950);
|
||||
|
||||
/* Yellow */
|
||||
--color-yellow-50: var(--cs-yellow-50);
|
||||
--color-yellow-100: var(--cs-yellow-100);
|
||||
--color-yellow-200: var(--cs-yellow-200);
|
||||
--color-yellow-300: var(--cs-yellow-300);
|
||||
--color-yellow-400: var(--cs-yellow-400);
|
||||
--color-yellow-500: var(--cs-yellow-500);
|
||||
--color-yellow-600: var(--cs-yellow-600);
|
||||
--color-yellow-700: var(--cs-yellow-700);
|
||||
--color-yellow-800: var(--cs-yellow-800);
|
||||
--color-yellow-900: var(--cs-yellow-900);
|
||||
--color-yellow-950: var(--cs-yellow-950);
|
||||
|
||||
/* Lime (品牌主色) */
|
||||
--color-lime-50: var(--cs-lime-50);
|
||||
--color-lime-100: var(--cs-lime-100);
|
||||
--color-lime-200: var(--cs-lime-200);
|
||||
--color-lime-300: var(--cs-lime-300);
|
||||
--color-lime-400: var(--cs-lime-400);
|
||||
--color-lime-500: var(--cs-lime-500);
|
||||
--color-lime-600: var(--cs-lime-600);
|
||||
--color-lime-700: var(--cs-lime-700);
|
||||
--color-lime-800: var(--cs-lime-800);
|
||||
--color-lime-900: var(--cs-lime-900);
|
||||
--color-lime-950: var(--cs-lime-950);
|
||||
|
||||
/* Green */
|
||||
--color-green-50: var(--cs-green-50);
|
||||
--color-green-100: var(--cs-green-100);
|
||||
--color-green-200: var(--cs-green-200);
|
||||
--color-green-300: var(--cs-green-300);
|
||||
--color-green-400: var(--cs-green-400);
|
||||
--color-green-500: var(--cs-green-500);
|
||||
--color-green-600: var(--cs-green-600);
|
||||
--color-green-700: var(--cs-green-700);
|
||||
--color-green-800: var(--cs-green-800);
|
||||
--color-green-900: var(--cs-green-900);
|
||||
--color-green-950: var(--cs-green-950);
|
||||
|
||||
/* Emerald */
|
||||
--color-emerald-50: var(--cs-emerald-50);
|
||||
--color-emerald-100: var(--cs-emerald-100);
|
||||
--color-emerald-200: var(--cs-emerald-200);
|
||||
--color-emerald-300: var(--cs-emerald-300);
|
||||
--color-emerald-400: var(--cs-emerald-400);
|
||||
--color-emerald-500: var(--cs-emerald-500);
|
||||
--color-emerald-600: var(--cs-emerald-600);
|
||||
--color-emerald-700: var(--cs-emerald-700);
|
||||
--color-emerald-800: var(--cs-emerald-800);
|
||||
--color-emerald-900: var(--cs-emerald-900);
|
||||
--color-emerald-950: var(--cs-emerald-950);
|
||||
|
||||
/* Teal */
|
||||
--color-teal-50: var(--cs-teal-50);
|
||||
--color-teal-100: var(--cs-teal-100);
|
||||
--color-teal-200: var(--cs-teal-200);
|
||||
--color-teal-300: var(--cs-teal-300);
|
||||
--color-teal-400: var(--cs-teal-400);
|
||||
--color-teal-500: var(--cs-teal-500);
|
||||
--color-teal-600: var(--cs-teal-600);
|
||||
--color-teal-700: var(--cs-teal-700);
|
||||
--color-teal-800: var(--cs-teal-800);
|
||||
--color-teal-900: var(--cs-teal-900);
|
||||
--color-teal-950: var(--cs-teal-950);
|
||||
|
||||
/* Cyan */
|
||||
--color-cyan-50: var(--cs-cyan-50);
|
||||
--color-cyan-100: var(--cs-cyan-100);
|
||||
--color-cyan-200: var(--cs-cyan-200);
|
||||
--color-cyan-300: var(--cs-cyan-300);
|
||||
--color-cyan-400: var(--cs-cyan-400);
|
||||
--color-cyan-500: var(--cs-cyan-500);
|
||||
--color-cyan-600: var(--cs-cyan-600);
|
||||
--color-cyan-700: var(--cs-cyan-700);
|
||||
--color-cyan-800: var(--cs-cyan-800);
|
||||
--color-cyan-900: var(--cs-cyan-900);
|
||||
--color-cyan-950: var(--cs-cyan-950);
|
||||
|
||||
/* Sky */
|
||||
--color-sky-50: var(--cs-sky-50);
|
||||
--color-sky-100: var(--cs-sky-100);
|
||||
--color-sky-200: var(--cs-sky-200);
|
||||
--color-sky-300: var(--cs-sky-300);
|
||||
--color-sky-400: var(--cs-sky-400);
|
||||
--color-sky-500: var(--cs-sky-500);
|
||||
--color-sky-600: var(--cs-sky-600);
|
||||
--color-sky-700: var(--cs-sky-700);
|
||||
--color-sky-800: var(--cs-sky-800);
|
||||
--color-sky-900: var(--cs-sky-900);
|
||||
--color-sky-950: var(--cs-sky-950);
|
||||
|
||||
/* Blue */
|
||||
--color-blue-50: var(--cs-blue-50);
|
||||
--color-blue-100: var(--cs-blue-100);
|
||||
--color-blue-200: var(--cs-blue-200);
|
||||
--color-blue-300: var(--cs-blue-300);
|
||||
--color-blue-400: var(--cs-blue-400);
|
||||
--color-blue-500: var(--cs-blue-500);
|
||||
--color-blue-600: var(--cs-blue-600);
|
||||
--color-blue-700: var(--cs-blue-700);
|
||||
--color-blue-800: var(--cs-blue-800);
|
||||
--color-blue-900: var(--cs-blue-900);
|
||||
--color-blue-950: var(--cs-blue-950);
|
||||
|
||||
/* Indigo */
|
||||
--color-indigo-50: var(--cs-indigo-50);
|
||||
--color-indigo-100: var(--cs-indigo-100);
|
||||
--color-indigo-200: var(--cs-indigo-200);
|
||||
--color-indigo-300: var(--cs-indigo-300);
|
||||
--color-indigo-400: var(--cs-indigo-400);
|
||||
--color-indigo-500: var(--cs-indigo-500);
|
||||
--color-indigo-600: var(--cs-indigo-600);
|
||||
--color-indigo-700: var(--cs-indigo-700);
|
||||
--color-indigo-800: var(--cs-indigo-800);
|
||||
--color-indigo-900: var(--cs-indigo-900);
|
||||
--color-indigo-950: var(--cs-indigo-950);
|
||||
|
||||
/* Violet */
|
||||
--color-violet-50: var(--cs-violet-50);
|
||||
--color-violet-100: var(--cs-violet-100);
|
||||
--color-violet-200: var(--cs-violet-200);
|
||||
--color-violet-300: var(--cs-violet-300);
|
||||
--color-violet-400: var(--cs-violet-400);
|
||||
--color-violet-500: var(--cs-violet-500);
|
||||
--color-violet-600: var(--cs-violet-600);
|
||||
--color-violet-700: var(--cs-violet-700);
|
||||
--color-violet-800: var(--cs-violet-800);
|
||||
--color-violet-900: var(--cs-violet-900);
|
||||
--color-violet-950: var(--cs-violet-950);
|
||||
|
||||
/* Purple */
|
||||
--color-purple-50: var(--cs-purple-50);
|
||||
--color-purple-100: var(--cs-purple-100);
|
||||
--color-purple-200: var(--cs-purple-200);
|
||||
--color-purple-300: var(--cs-purple-300);
|
||||
--color-purple-400: var(--cs-purple-400);
|
||||
--color-purple-500: var(--cs-purple-500);
|
||||
--color-purple-600: var(--cs-purple-600);
|
||||
--color-purple-700: var(--cs-purple-700);
|
||||
--color-purple-800: var(--cs-purple-800);
|
||||
--color-purple-900: var(--cs-purple-900);
|
||||
--color-purple-950: var(--cs-purple-950);
|
||||
|
||||
/* Fuchsia */
|
||||
--color-fuchsia-50: var(--cs-fuchsia-50);
|
||||
--color-fuchsia-100: var(--cs-fuchsia-100);
|
||||
--color-fuchsia-200: var(--cs-fuchsia-200);
|
||||
--color-fuchsia-300: var(--cs-fuchsia-300);
|
||||
--color-fuchsia-400: var(--cs-fuchsia-400);
|
||||
--color-fuchsia-500: var(--cs-fuchsia-500);
|
||||
--color-fuchsia-600: var(--cs-fuchsia-600);
|
||||
--color-fuchsia-700: var(--cs-fuchsia-700);
|
||||
--color-fuchsia-800: var(--cs-fuchsia-800);
|
||||
--color-fuchsia-900: var(--cs-fuchsia-900);
|
||||
--color-fuchsia-950: var(--cs-fuchsia-950);
|
||||
|
||||
/* Pink */
|
||||
--color-pink-50: var(--cs-pink-50);
|
||||
--color-pink-100: var(--cs-pink-100);
|
||||
--color-pink-200: var(--cs-pink-200);
|
||||
--color-pink-300: var(--cs-pink-300);
|
||||
--color-pink-400: var(--cs-pink-400);
|
||||
--color-pink-500: var(--cs-pink-500);
|
||||
--color-pink-600: var(--cs-pink-600);
|
||||
--color-pink-700: var(--cs-pink-700);
|
||||
--color-pink-800: var(--cs-pink-800);
|
||||
--color-pink-900: var(--cs-pink-900);
|
||||
--color-pink-950: var(--cs-pink-950);
|
||||
|
||||
/* Rose */
|
||||
--color-rose-50: var(--cs-rose-50);
|
||||
--color-rose-100: var(--cs-rose-100);
|
||||
--color-rose-200: var(--cs-rose-200);
|
||||
--color-rose-300: var(--cs-rose-300);
|
||||
--color-rose-400: var(--cs-rose-400);
|
||||
--color-rose-500: var(--cs-rose-500);
|
||||
--color-rose-600: var(--cs-rose-600);
|
||||
--color-rose-700: var(--cs-rose-700);
|
||||
--color-rose-800: var(--cs-rose-800);
|
||||
--color-rose-900: var(--cs-rose-900);
|
||||
--color-rose-950: var(--cs-rose-950);
|
||||
|
||||
/* Black & White */
|
||||
--color-cs-black: var(--cs-black);
|
||||
--color-cs-white: var(--cs-white);
|
||||
--color-black: var(--cs-black);
|
||||
--color-white: var(--cs-white);
|
||||
|
||||
/* ==================== */
|
||||
/* Spacing（生成 p-cs-md, gap-cs-lg 等） */
|
||||
/* Spacing & Sizing（自定义尺寸，额外扩展） */
|
||||
/* ==================== */
|
||||
|
||||
--spacing-cs-5xs: var(--cs-size-5xs);
|
||||
--spacing-cs-4xs: var(--cs-size-4xs);
|
||||
--spacing-cs-3xs: var(--cs-size-3xs);
|
||||
--spacing-cs-2xs: var(--cs-size-2xs);
|
||||
--spacing-cs-xs: var(--cs-size-xs);
|
||||
--spacing-cs-sm: var(--cs-size-sm);
|
||||
--spacing-cs-md: var(--cs-size-md);
|
||||
--spacing-cs-lg: var(--cs-size-lg);
|
||||
--spacing-cs-xl: var(--cs-size-xl);
|
||||
--spacing-cs-2xl: var(--cs-size-2xl);
|
||||
--spacing-cs-3xl: var(--cs-size-3xl);
|
||||
--spacing-cs-4xl: var(--cs-size-4xl);
|
||||
--spacing-cs-5xl: var(--cs-size-5xl);
|
||||
--spacing-cs-6xl: var(--cs-size-6xl);
|
||||
--spacing-cs-7xl: var(--cs-size-7xl);
|
||||
--spacing-cs-8xl: var(--cs-size-8xl);
|
||||
--spacing-5xs: var(--cs-size-5xs);
|
||||
--spacing-4xs: var(--cs-size-4xs);
|
||||
--spacing-3xs: var(--cs-size-3xs);
|
||||
--spacing-2xs: var(--cs-size-2xs);
|
||||
--spacing-xs: var(--cs-size-xs);
|
||||
--spacing-sm: var(--cs-size-sm);
|
||||
--spacing-md: var(--cs-size-md);
|
||||
--spacing-lg: var(--cs-size-lg);
|
||||
--spacing-xl: var(--cs-size-xl);
|
||||
--spacing-2xl: var(--cs-size-2xl);
|
||||
--spacing-3xl: var(--cs-size-3xl);
|
||||
--spacing-4xl: var(--cs-size-4xl);
|
||||
--spacing-5xl: var(--cs-size-5xl);
|
||||
--spacing-6xl: var(--cs-size-6xl);
|
||||
--spacing-7xl: var(--cs-size-7xl);
|
||||
--spacing-8xl: var(--cs-size-8xl);
|
||||
|
||||
/* ==================== */
|
||||
/* Border Radius（生成 rounded-cs-md 等） */
|
||||
/* Border Radius（自定义圆角，额外扩展） */
|
||||
/* ==================== */
|
||||
|
||||
--radius-cs-4xs: var(--cs-radius-4xs);
|
||||
--radius-cs-3xs: var(--cs-radius-3xs);
|
||||
--radius-cs-2xs: var(--cs-radius-2xs);
|
||||
--radius-cs-xs: var(--cs-radius-xs);
|
||||
--radius-cs-sm: var(--cs-radius-sm);
|
||||
--radius-cs-md: var(--cs-radius-md);
|
||||
--radius-cs-lg: var(--cs-radius-lg);
|
||||
--radius-cs-xl: var(--cs-radius-xl);
|
||||
--radius-cs-2xl: var(--cs-radius-2xl);
|
||||
--radius-cs-3xl: var(--cs-radius-3xl);
|
||||
--radius-cs-round: var(--cs-radius-round);
|
||||
|
||||
/* ==================== */
|
||||
/* Border Width（生成 border-cs-md 等） */
|
||||
/* ==================== */
|
||||
|
||||
--border-width-cs-sm: var(--cs-border-width-sm);
|
||||
--border-width-cs-md: var(--cs-border-width-md);
|
||||
--border-width-cs-lg: var(--cs-border-width-lg);
|
||||
--radius-4xs: var(--cs-radius-4xs);
|
||||
--radius-3xs: var(--cs-radius-3xs);
|
||||
--radius-2xs: var(--cs-radius-2xs);
|
||||
--radius-xs: var(--cs-radius-xs);
|
||||
--radius-sm: var(--cs-radius-sm);
|
||||
--radius-md: var(--cs-radius-md);
|
||||
--radius-lg: var(--cs-radius-lg);
|
||||
--radius-xl: var(--cs-radius-xl);
|
||||
--radius-2xl: var(--cs-radius-2xl);
|
||||
--radius-3xl: var(--cs-radius-3xl);
|
||||
--radius-round: var(--cs-radius-round);
|
||||
}
|
||||
|
||||
/* ==================== */
|
||||
/* Dark Mode 覆盖 */
|
||||
/* ==================== */
|
||||
|
||||
@theme dark {
|
||||
--color-background: var(--cs-background);
|
||||
--color-foreground: var(--cs-foreground);
|
||||
--color-card: var(--cs-card);
|
||||
--color-popover: var(--cs-popover);
|
||||
--color-border: var(--cs-border);
|
||||
--color-input: var(--cs-border);
|
||||
--color-secondary: var(--cs-secondary);
|
||||
--color-muted: var(--cs-muted);
|
||||
--color-accent: var(--cs-accent);
|
||||
--color-sidebar: var(--cs-sidebar);
|
||||
--color-sidebar-accent: var(--cs-sidebar-accent);
|
||||
}
|
||||
|
||||
/* ==================== */
|
||||
/* Base Styles（可选） */
|
||||
/* ==================== */
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border outline-ring/50;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
|
||||
@ -411,16 +411,16 @@
|
||||
/* Border Radius */
|
||||
/* ==================== */
|
||||
|
||||
--cs-radius-4xs: 0.25rem; /* 4px */
|
||||
--cs-radius-3xs: 0.5rem; /* 8px */
|
||||
--cs-radius-2xs: 0.75rem; /* 12px */
|
||||
--cs-radius-xs: 1rem; /* 16px */
|
||||
--cs-radius-sm: 1.5rem; /* 24px */
|
||||
--cs-radius-md: 2rem; /* 32px */
|
||||
--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: 3rem; /* 48px */
|
||||
--cs-radius-2xl: 3.5rem; /* 56px */
|
||||
--cs-radius-3xl: 4rem; /* 64px */
|
||||
--cs-radius-xl: 48px; /* 48px */
|
||||
--cs-radius-2xl: 56px; /* 56px */
|
||||
--cs-radius-3xl: 64px; /* 64px */
|
||||
--cs-radius-round: 999px; /* 保持 px，因为是特殊值 */
|
||||
|
||||
/* Border Width */
|
||||
@ -1,7 +1,6 @@
|
||||
@import './color.css';
|
||||
@import './font.css';
|
||||
@import './markdown.css';
|
||||
@import './ant.css';
|
||||
@import './scrollbar.css';
|
||||
@import './container.css';
|
||||
@import './animation.css';
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
@import 'tailwindcss' source('../../../../renderer');
|
||||
@import '../../../../../packages/ui/src/styles/theme.css';
|
||||
@import 'tw-animate-css';
|
||||
|
||||
/* TODO heroui 迁移完成后即可删除 */
|
||||
/* heroui */
|
||||
@plugin '../../hero.ts';
|
||||
@source '../../../../../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}';
|
||||
@source '../../../../../packages/ui/src/**/*.{js,ts,jsx,tsx}';
|
||||
/* @plugin '../../hero.ts'; */
|
||||
/* @source '../../../../../packages/ui/src*.{js,ts,jsx,tsx}'; */
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
@ -21,117 +21,24 @@
|
||||
4. Put the new custom utility class into the utilities layer.
|
||||
*/
|
||||
|
||||
/* 应用特定的原始变量 */
|
||||
:root {
|
||||
--radius: 0.625rem;
|
||||
--background: oklch(1 0 0);
|
||||
--foreground: oklch(0.141 0.005 285.823);
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0.141 0.005 285.823);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.141 0.005 285.823);
|
||||
--primary: oklch(0.21 0.006 285.885);
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
--secondary: oklch(0.967 0.001 286.375);
|
||||
--secondary-foreground: oklch(0.21 0.006 285.885);
|
||||
--muted: oklch(0.967 0.001 286.375);
|
||||
--muted-foreground: oklch(0.552 0.016 285.938);
|
||||
--accent: oklch(0.967 0.001 286.375);
|
||||
--accent-foreground: oklch(0.21 0.006 285.885);
|
||||
--destructive: oklch(0.577 0.245 27.325);
|
||||
--border: oklch(0.92 0.004 286.32);
|
||||
--input: oklch(0.92 0.004 286.32);
|
||||
--ring: oklch(0.705 0.015 286.067);
|
||||
--chart-1: oklch(0.646 0.222 41.116);
|
||||
--chart-2: oklch(0.6 0.118 184.704);
|
||||
--chart-3: oklch(0.398 0.07 227.392);
|
||||
--chart-4: oklch(0.828 0.189 84.429);
|
||||
--chart-5: oklch(0.769 0.188 70.08);
|
||||
--sidebar: oklch(0.985 0 0);
|
||||
--sidebar-foreground: oklch(0.141 0.005 285.823);
|
||||
--sidebar-primary: oklch(0.21 0.006 285.885);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.967 0.001 286.375);
|
||||
--sidebar-accent-foreground: oklch(0.21 0.006 285.885);
|
||||
--sidebar-border: oklch(0.92 0.004 286.32);
|
||||
--sidebar-ring: oklch(0.705 0.015 286.067);
|
||||
--icon: #00000099;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: oklch(0.141 0.005 285.823);
|
||||
--foreground: oklch(0.985 0 0);
|
||||
--card: oklch(0.21 0.006 285.885);
|
||||
--card-foreground: oklch(0.985 0 0);
|
||||
--popover: oklch(0.21 0.006 285.885);
|
||||
--popover-foreground: oklch(0.985 0 0);
|
||||
--primary: oklch(0.92 0.004 286.32);
|
||||
--primary-foreground: oklch(0.21 0.006 285.885);
|
||||
--secondary: oklch(0.274 0.006 286.033);
|
||||
--secondary-foreground: oklch(0.985 0 0);
|
||||
--muted: oklch(0.274 0.006 286.033);
|
||||
--muted-foreground: oklch(0.705 0.015 286.067);
|
||||
--accent: oklch(0.274 0.006 286.033);
|
||||
--accent-foreground: oklch(0.985 0 0);
|
||||
--destructive: oklch(0.704 0.191 22.216);
|
||||
--border: oklch(1 0 0 / 10%);
|
||||
--input: oklch(1 0 0 / 15%);
|
||||
--ring: oklch(0.552 0.016 285.938);
|
||||
--chart-1: oklch(0.488 0.243 264.376);
|
||||
--chart-2: oklch(0.696 0.17 162.48);
|
||||
--chart-3: oklch(0.769 0.188 70.08);
|
||||
--chart-4: oklch(0.627 0.265 303.9);
|
||||
--chart-5: oklch(0.645 0.246 16.439);
|
||||
--sidebar: oklch(0.21 0.006 285.885);
|
||||
--sidebar-foreground: oklch(0.985 0 0);
|
||||
--sidebar-primary: oklch(0.488 0.243 264.376);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.274 0.006 286.033);
|
||||
--sidebar-accent-foreground: oklch(0.985 0 0);
|
||||
--sidebar-border: oklch(1 0 0 / 10%);
|
||||
--sidebar-ring: oklch(0.552 0.016 285.938);
|
||||
--icon: #ffffff99;
|
||||
}
|
||||
|
||||
/* 应用特定的变量和动画（不与 UI 库冲突） */
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-card: var(--card);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
--color-popover: var(--popover);
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-secondary: var(--secondary);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-destructive: var(--destructive);
|
||||
--color-destructive-foreground: var(--destructive-foreground);
|
||||
--color-border: var(--border);
|
||||
--color-input: var(--input);
|
||||
--color-ring: var(--ring);
|
||||
--color-chart-1: var(--chart-1);
|
||||
--color-chart-2: var(--chart-2);
|
||||
--color-chart-3: var(--chart-3);
|
||||
--color-chart-4: var(--chart-4);
|
||||
--color-chart-5: var(--chart-5);
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
--color-sidebar: var(--sidebar);
|
||||
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||
--color-sidebar-primary: var(--sidebar-primary);
|
||||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||
--color-sidebar-accent: var(--sidebar-accent);
|
||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||
--color-sidebar-border: var(--sidebar-border);
|
||||
--color-sidebar-ring: var(--sidebar-ring);
|
||||
/* Icon 颜色 - 应用特定变量 */
|
||||
--color-icon: var(--icon);
|
||||
|
||||
/* 跑马灯动画 - 应用特定 */
|
||||
--animate-marquee: marquee var(--duration) infinite linear;
|
||||
--animate-marquee-vertical: marquee-vertical var(--duration) linear infinite;
|
||||
--color-icon: var(--icon);
|
||||
|
||||
@keyframes marquee {
|
||||
from {
|
||||
transform: translateX(0);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Button } from '@heroui/button'
|
||||
import { Button } from '@cherrystudio/ui'
|
||||
import { formatErrorMessage } from '@renderer/utils/error'
|
||||
import { Alert, Space } from 'antd'
|
||||
import type { ComponentType, ReactNode } from 'react'
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Button } from '@heroui/button'
|
||||
import { Button } from '@cherrystudio/ui'
|
||||
import CodeViewer from '@renderer/components/CodeViewer'
|
||||
import { useCodeStyle } from '@renderer/context/CodeStyleProvider'
|
||||
import { useTimer } from '@renderer/hooks/useTimer'
|
||||
|
||||
Loading…
Reference in New Issue
Block a user