mirror of
https://github.com/CherryHQ/cherry-studio.git
synced 2025-12-22 17:00:14 +08:00
feat(design-reference): restructure color tokens and remove outdated conversion log
- Deleted the outdated CONVERSION_LOG.md file to streamline documentation. - Introduced new HSLA color files for primitive, semantic, and status colors, enhancing color management. - Updated theme and token files to utilize Oklch color format for improved color representation. - Refactored radius and color tokens for consistency and maintainability across the design system.
This commit is contained in:
MyPrototypeWhat
parent
aa13ad4fac
commit
d82e004f57
@ -1,214 +0,0 @@
|
|||||||
# todocss.css → design-tokens.css 转换日志
|
|
||||||
|
|
||||||
## ✅ 已转换的变量
|
|
||||||
|
|
||||||
### 基础颜色 (Primitive Colors)
|
|
||||||
- ✅ Neutral (50-950)
|
|
||||||
- ✅ Zinc (50-950)
|
|
||||||
- ✅ Red (50-950)
|
|
||||||
- ✅ Orange (50-950)
|
|
||||||
- ✅ Amber (50-950)
|
|
||||||
- ✅ Yellow (50-950)
|
|
||||||
- ✅ Lime (50-950) - 品牌主色
|
|
||||||
- ✅ Green (50-950)
|
|
||||||
- ✅ Emerald (50-950)
|
|
||||||
- ✅ Purple (50-950)
|
|
||||||
- ✅ Blue (50-950)
|
|
||||||
- ✅ Black & White
|
|
||||||
|
|
||||||
### 语义化颜色 (Semantic Colors)
|
|
||||||
- ✅ `--cs-primary` (Lime 500)
|
|
||||||
- ✅ `--cs-destructive` (Red 500)
|
|
||||||
- ✅ `--cs-success` (Green 500)
|
|
||||||
- ✅ `--cs-warning` (Amber 500)
|
|
||||||
- ✅ `--cs-background` (Zinc 50/900)
|
|
||||||
- ✅ `--cs-foreground` 系列 (main, secondary, muted)
|
|
||||||
- ✅ `--cs-border` 系列 (default, hover, active)
|
|
||||||
- ✅ `--cs-ring` (Focus)
|
|
||||||
|
|
||||||
### 容器颜色
|
|
||||||
- ✅ `--cs-card` (White/Black)
|
|
||||||
- ✅ `--cs-popover` (White/Black)
|
|
||||||
- ✅ `--cs-sidebar` (White/Black)
|
|
||||||
|
|
||||||
### UI 元素细分颜色 (新增补充)
|
|
||||||
- ✅ **Modal / Overlay**
|
|
||||||
- `--cs-modal-backdrop`
|
|
||||||
- `--cs-modal-thumb`
|
|
||||||
- `--cs-modal-thumb-hover`
|
|
||||||
|
|
||||||
- ✅ **Icon**
|
|
||||||
- `--cs-icon-default`
|
|
||||||
- `--cs-icon-hover`
|
|
||||||
|
|
||||||
- ✅ **Input / Select**
|
|
||||||
- `--cs-input-background`
|
|
||||||
- `--cs-input-border`
|
|
||||||
- `--cs-input-border-hover`
|
|
||||||
- `--cs-input-border-focus`
|
|
||||||
|
|
||||||
- ✅ **Primary Button**
|
|
||||||
- `--cs-primary-button-background`
|
|
||||||
- `--cs-primary-button-text`
|
|
||||||
- `--cs-primary-button-background-hover`
|
|
||||||
- `--cs-primary-button-background-active`
|
|
||||||
- `--cs-primary-button-background-2nd`
|
|
||||||
- `--cs-primary-button-background-3rd`
|
|
||||||
|
|
||||||
- ✅ **Secondary Button**
|
|
||||||
- `--cs-secondary-button-background`
|
|
||||||
- `--cs-secondary-button-text`
|
|
||||||
- `--cs-secondary-button-background-hover`
|
|
||||||
- `--cs-secondary-button-background-active`
|
|
||||||
- `--cs-secondary-button-border`
|
|
||||||
|
|
||||||
- ✅ **Ghost Button**
|
|
||||||
- `--cs-ghost-button-background`
|
|
||||||
- `--cs-ghost-button-text`
|
|
||||||
- `--cs-ghost-button-background-hover`
|
|
||||||
- `--cs-ghost-button-background-active`
|
|
||||||
|
|
||||||
### 尺寸系统
|
|
||||||
- ✅ Spacing/Sizing 合并为 `--cs-size-*` (5xs ~ 8xl)
|
|
||||||
- ✅ Border Radius (4xs ~ 3xl, round)
|
|
||||||
- ✅ Border Width (sm, md, lg)
|
|
||||||
|
|
||||||
### 字体排版
|
|
||||||
- ✅ Font Families (Heading, Body)
|
|
||||||
- ✅ Font Weights (修正单位错误: 400px → 400)
|
|
||||||
- ✅ Font Sizes (Body & Heading)
|
|
||||||
- ✅ Line Heights (Body & Heading)
|
|
||||||
- ✅ Paragraph Spacing
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## ❌ 已废弃的变量
|
|
||||||
|
|
||||||
### Opacity 变量 (全部废弃)
|
|
||||||
使用 Tailwind 的 `/modifier` 语法替代：
|
|
||||||
|
|
||||||
| todocss.css | 替代方案 |
|
|
||||||
|-------------|---------|
|
|
||||||
| `--Opacity--Red--Red-80` | `bg-cs-destructive/80` |
|
|
||||||
| `--Opacity--Green--Green-60` | `bg-cs-success/60` |
|
|
||||||
| `--Opacity--White--White-10` | `bg-white/10` |
|
|
||||||
|
|
||||||
**原因**: Tailwind v4 原生支持透明度修饰符，无需单独定义变量。
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🔧 关键修正
|
|
||||||
|
|
||||||
### 1. 单位错误
|
|
||||||
```css
|
|
||||||
/* ❌ todocss.css */
|
|
||||||
--Font_weight--Regular: 400px;
|
|
||||||
|
|
||||||
/* ✅ design-tokens.css */
|
|
||||||
--cs-font-weight-regular: 400;
|
|
||||||
```
|
|
||||||
|
|
||||||
### 2. px → rem 转换
|
|
||||||
```css
|
|
||||||
/* ❌ todocss.css */
|
|
||||||
--Spacing--md: 40px;
|
|
||||||
|
|
||||||
/* ✅ design-tokens.css */
|
|
||||||
--cs-size-md: 2.5rem; /* 40px / 16 = 2.5rem */
|
|
||||||
```
|
|
||||||
|
|
||||||
### 3. 变量合并
|
|
||||||
```css
|
|
||||||
/* ❌ todocss.css (冗余) */
|
|
||||||
--Spacing--md: 40px;
|
|
||||||
--Sizing--md: 40px;
|
|
||||||
|
|
||||||
/* ✅ design-tokens.css (合并) */
|
|
||||||
--cs-size-md: 2.5rem;
|
|
||||||
```
|
|
||||||
|
|
||||||
### 4. Dark Mode 分离
|
|
||||||
```css
|
|
||||||
/* ❌ todocss.css (Light 和 Dark 都在 :root) */
|
|
||||||
:root {
|
|
||||||
--Brand--Semantic_Colors--Background: var(--Primitive--Zinc--50);
|
|
||||||
--Brand--Semantic_Colors--Background: var(--Primitive--Zinc--900); /* 后面覆盖 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ✅ design-tokens.css (正确分离) */
|
|
||||||
:root {
|
|
||||||
--cs-background: var(--cs-zinc-50);
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark {
|
|
||||||
--cs-background: var(--cs-zinc-900);
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 📊 变量统计
|
|
||||||
|
|
||||||
| 分类 | todocss.css | design-tokens.css | 说明 |
|
|
||||||
|------|-------------|-------------------|------|
|
|
||||||
| Primitive Colors | ~250 | ~250 | 完整保留 |
|
|
||||||
| Semantic Colors | ~20 | ~20 | 完整转换 |
|
|
||||||
| UI Element Colors | ~30 | ~30 | ✅ 已补充完整 |
|
|
||||||
| Opacity Variables | ~50 | 0 | 废弃，用 `/modifier` |
|
|
||||||
| Spacing/Sizing | 32 | 16 | 合并去重 |
|
|
||||||
| Typography | ~50 | ~50 | 修正单位 |
|
|
||||||
| **总计** | ~430 | ~390 | 优化 40 个变量 |
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🎨 Dark Mode 变量对比
|
|
||||||
|
|
||||||
| Light Mode | Dark Mode | 变量名 |
|
|
||||||
|-----------|-----------|-------|
|
|
||||||
| Zinc 50 | Zinc 900 | `--cs-background` |
|
|
||||||
| Black 90% | White 90% | `--cs-foreground` |
|
|
||||||
| Black 60% | White 60% | `--cs-foreground-secondary` |
|
|
||||||
| Black 10% | White 10% | `--cs-border` |
|
|
||||||
| White | Black | `--cs-card` |
|
|
||||||
| White | Black | `--cs-popover` |
|
|
||||||
| White | Black | `--cs-sidebar` |
|
|
||||||
| White | Black | `--cs-input-background` |
|
|
||||||
| Black 40% | Black 6% | `--cs-modal-backdrop` |
|
|
||||||
| Black 20% | White 20% | `--cs-modal-thumb` |
|
|
||||||
| Black 5% | White 10% | `--cs-secondary` |
|
|
||||||
| Black 0% | White 0% | `--cs-ghost-button-background` |
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## ✅ 验证清单
|
|
||||||
|
|
||||||
- [x] 所有 Primitive 颜色已转换
|
|
||||||
- [x] 所有语义化颜色已转换
|
|
||||||
- [x] 所有 UI 元素颜色已转换
|
|
||||||
- [x] Dark Mode 变量完整
|
|
||||||
- [x] 尺寸单位统一为 rem
|
|
||||||
- [x] Font Weight 单位已修正
|
|
||||||
- [x] Opacity 变量已废弃
|
|
||||||
- [x] Spacing/Sizing 已合并
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 📝 使用指南
|
|
||||||
|
|
||||||
### 如果设计师更新 todocss.css
|
|
||||||
|
|
||||||
1. 对比此文档，找出新增/修改的变量
|
|
||||||
2. 按照转换规则更新 `design-tokens.css`
|
|
||||||
3. 验证 Light/Dark Mode 是否完整
|
|
||||||
4. 更新此日志
|
|
||||||
|
|
||||||
### 验证转换正确性
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# 检查 Light Mode 变量数量
|
|
||||||
grep -c "^ --cs-" packages/ui/src/styles/design-tokens.css
|
|
||||||
|
|
||||||
# 检查 Dark Mode 覆盖数量
|
|
||||||
grep -c "^ --cs-" packages/ui/src/styles/design-tokens.css | grep -A 100 ".dark"
|
|
||||||
```
|
|
||||||
|
|
||||||
@ -4,19 +4,8 @@
|
|||||||
|
|
||||||
## 文件说明
|
## 文件说明
|
||||||
|
|
||||||
### todocss.css
|
### *.hsla.css
|
||||||
- **来源**：设计师提供的原始设计令牌
|
为hsla格式的色值
|
||||||
- **状态**：已转换为 `src/styles/design-tokens.css`
|
|
||||||
- **用途**：
|
|
||||||
- 追溯设计决策
|
|
||||||
- 验证转换正确性
|
|
||||||
- 设计师更新时作为对比基准
|
|
||||||
|
|
||||||
## 转换规则
|
|
||||||
|
|
||||||
原始文件 → 生产文件的转换规则参见：
|
|
||||||
- [DESIGN_SYSTEM.md](../DESIGN_SYSTEM.md)
|
|
||||||
- [USAGE_GUIDE.md](../USAGE_GUIDE.md)
|
|
||||||
|
|
||||||
## 注意事项
|
## 注意事项
|
||||||
|
|
||||||
|
|||||||
309
packages/ui/design-reference/primitive.hsla.css
Normal file
309
packages/ui/design-reference/primitive.hsla.css
Normal file
@ -0,0 +1,309 @@
|
|||||||
|
/**
|
||||||
|
* Primitive Colors - Light Mode
|
||||||
|
* 基础色板 - 所有原始颜色定义
|
||||||
|
*/
|
||||||
|
|
||||||
|
:root {
|
||||||
|
/* 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);
|
||||||
|
|
||||||
|
/* 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);
|
||||||
|
}
|
||||||
81
packages/ui/design-reference/semantic.hsla.css
Normal file
81
packages/ui/design-reference/semantic.hsla.css
Normal file
@ -0,0 +1,81 @@
|
|||||||
|
/**
|
||||||
|
* Semantic Colors - Light Mode
|
||||||
|
* 语义化颜色 - 基于 Primitive Colors 的语义化映射
|
||||||
|
*/
|
||||||
|
|
||||||
|
:root {
|
||||||
|
/* Brand Colors */
|
||||||
|
--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);
|
||||||
|
|
||||||
|
/* 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: color-mix(in srgb, var(--cs-primary) 40%, transparent);
|
||||||
|
|
||||||
|
/* 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);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 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);
|
||||||
|
}
|
||||||
55
packages/ui/design-reference/status.hsla.css
Normal file
55
packages/ui/design-reference/status.hsla.css
Normal file
@ -0,0 +1,55 @@
|
|||||||
|
/**
|
||||||
|
* Status Colors - Light Mode & Dark Mode
|
||||||
|
* 状态颜色 - Error, Success, Warning
|
||||||
|
*/
|
||||||
|
|
||||||
|
:root {
|
||||||
|
/* Status Colors - Error */
|
||||||
|
--cs-error-base: var(--cs-red-500); /* #ef4444 */
|
||||||
|
--cs-error-text: var(--cs-red-800); /* #991b1b */
|
||||||
|
--cs-error-bg: var(--cs-red-50); /* #fef2f2 */
|
||||||
|
--cs-error-text-hover: var(--cs-red-700); /* #b91c1c */
|
||||||
|
--cs-error-bg-hover: var(--cs-red-100); /* #fee2e2 */
|
||||||
|
--cs-error-border: var(--cs-red-200); /* #fecaca */
|
||||||
|
--cs-error-border-hover: var(--cs-red-300); /* #fca5a5 */
|
||||||
|
--cs-error-active: var(--cs-red-600); /* #dc2626 */
|
||||||
|
|
||||||
|
/* Status Colors - Success */
|
||||||
|
--cs-success-base: var(--cs-green-500); /* #22c55e */
|
||||||
|
--cs-success-text-hover: var(--cs-green-700); /* #15803d */
|
||||||
|
--cs-success-bg: var(--cs-green-50); /* #f0fdf4 */
|
||||||
|
--cs-success-bg-hover: var(--cs-green-200); /* #bbf7d0 */
|
||||||
|
|
||||||
|
/* Status Colors - Warning */
|
||||||
|
--cs-warning-base: var(--cs-amber-400); /* #fbbf24 */
|
||||||
|
--cs-warning-text-hover: var(--cs-amber-700); /* #b45309 */
|
||||||
|
--cs-warning-bg: var(--cs-amber-50); /* #fffbeb */
|
||||||
|
--cs-warning-bg-hover: var(--cs-amber-100); /* #fef3c7 */
|
||||||
|
--cs-warning-active: var(--cs-amber-600); /* #d97706 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dark Mode */
|
||||||
|
.dark {
|
||||||
|
/* Status Colors - Error (Dark Mode) */
|
||||||
|
--cs-error-base: var(--cs-red-400); /* #f87171 */
|
||||||
|
--cs-error-text: var(--cs-red-100); /* #fee2e2 */
|
||||||
|
--cs-error-bg: var(--cs-red-900); /* #7f1d1d */
|
||||||
|
--cs-error-text-hover: var(--cs-red-200); /* #fecaca */
|
||||||
|
--cs-error-bg-hover: var(--cs-red-800); /* #991b1b */
|
||||||
|
--cs-error-border: var(--cs-red-700); /* #b91c1c */
|
||||||
|
--cs-error-border-hover: var(--cs-red-600); /* #dc2626 */
|
||||||
|
--cs-error-active: var(--cs-red-300); /* #fca5a5 */
|
||||||
|
|
||||||
|
/* Status Colors - Success (Dark Mode) */
|
||||||
|
--cs-success-base: var(--cs-green-400); /* #4ade80 */
|
||||||
|
--cs-success-text-hover: var(--cs-green-200); /* #bbf7d0 */
|
||||||
|
--cs-success-bg: var(--cs-green-900); /* #14532d */
|
||||||
|
--cs-success-bg-hover: var(--cs-green-800); /* #166534 */
|
||||||
|
|
||||||
|
/* Status Colors - Warning (Dark Mode) */
|
||||||
|
--cs-warning-base: var(--cs-amber-400); /* #fbbf24 */
|
||||||
|
--cs-warning-text-hover: var(--cs-amber-200); /* #fde68a */
|
||||||
|
--cs-warning-bg: var(--cs-amber-900); /* #78350f */
|
||||||
|
--cs-warning-bg-hover: var(--cs-amber-800); /* #92400e */
|
||||||
|
--cs-warning-active: var(--cs-amber-600); /* #d97706 */
|
||||||
|
}
|
||||||
450
packages/ui/design-reference/theme.css
Normal file
450
packages/ui/design-reference/theme.css
Normal file
@ -0,0 +1,450 @@
|
|||||||
|
/**
|
||||||
|
* Generated from Design Tokens
|
||||||
|
*
|
||||||
|
* ⚠️ DO NOT EDIT DIRECTLY!
|
||||||
|
* This file is auto-generated from tokens/ directory.
|
||||||
|
* To make changes, edit files in tokens/ and run: npm run tokens:build
|
||||||
|
*
|
||||||
|
* Generated on: 2025-11-07T08:56:09.444Z
|
||||||
|
*/
|
||||||
|
|
||||||
|
@theme {
|
||||||
|
/* ==================== */
|
||||||
|
/* Primitive Colors */
|
||||||
|
/* ==================== */
|
||||||
|
--color-neutral-50: hsla(0, 0%, 98%, 1);
|
||||||
|
--color-neutral-100: hsla(0, 0%, 96%, 1);
|
||||||
|
--color-neutral-200: hsla(0, 0%, 90%, 1);
|
||||||
|
--color-neutral-300: hsla(0, 0%, 83%, 1);
|
||||||
|
--color-neutral-400: hsla(0, 0%, 64%, 1);
|
||||||
|
--color-neutral-500: hsla(0, 0%, 45%, 1);
|
||||||
|
--color-neutral-600: hsla(215, 14%, 34%, 1);
|
||||||
|
--color-neutral-700: hsla(0, 0%, 25%, 1);
|
||||||
|
--color-neutral-800: hsla(0, 0%, 15%, 1);
|
||||||
|
--color-neutral-900: hsla(0, 0%, 9%, 1);
|
||||||
|
--color-neutral-950: hsla(0, 0%, 4%, 1);
|
||||||
|
--color-stone-50: hsla(60, 9%, 98%, 1);
|
||||||
|
--color-stone-100: hsla(60, 5%, 96%, 1);
|
||||||
|
--color-stone-200: hsla(20, 6%, 90%, 1);
|
||||||
|
--color-stone-300: hsla(24, 6%, 83%, 1);
|
||||||
|
--color-stone-400: hsla(24, 5%, 64%, 1);
|
||||||
|
--color-stone-500: hsla(25, 5%, 45%, 1);
|
||||||
|
--color-stone-600: hsla(33, 5%, 32%, 1);
|
||||||
|
--color-stone-700: hsla(30, 6%, 25%, 1);
|
||||||
|
--color-stone-800: hsla(12, 6%, 15%, 1);
|
||||||
|
--color-stone-900: hsla(24, 10%, 10%, 1);
|
||||||
|
--color-stone-950: hsla(20, 14%, 4%, 1);
|
||||||
|
--color-zinc-50: hsla(0, 0%, 98%, 1);
|
||||||
|
--color-zinc-100: hsla(240, 5%, 96%, 1);
|
||||||
|
--color-zinc-200: hsla(240, 6%, 90%, 1);
|
||||||
|
--color-zinc-300: hsla(240, 5%, 84%, 1);
|
||||||
|
--color-zinc-400: hsla(240, 5%, 65%, 1);
|
||||||
|
--color-zinc-500: hsla(240, 4%, 46%, 1);
|
||||||
|
--color-zinc-600: hsla(240, 5%, 34%, 1);
|
||||||
|
--color-zinc-700: hsla(240, 5%, 26%, 1);
|
||||||
|
--color-zinc-800: hsla(240, 4%, 16%, 1);
|
||||||
|
--color-zinc-900: hsla(240, 6%, 10%, 1);
|
||||||
|
--color-zinc-950: hsla(240, 10%, 4%, 1);
|
||||||
|
--color-slate-50: hsla(210, 40%, 98%, 1);
|
||||||
|
--color-slate-100: hsla(210, 40%, 96%, 1);
|
||||||
|
--color-slate-200: hsla(214, 32%, 91%, 1);
|
||||||
|
--color-slate-300: hsla(213, 27%, 84%, 1);
|
||||||
|
--color-slate-400: hsla(215, 20%, 65%, 1);
|
||||||
|
--color-slate-500: hsla(215, 16%, 47%, 1);
|
||||||
|
--color-slate-600: hsla(215, 19%, 35%, 1);
|
||||||
|
--color-slate-700: hsla(215, 25%, 27%, 1);
|
||||||
|
--color-slate-800: hsla(217, 33%, 17%, 1);
|
||||||
|
--color-slate-900: hsla(222, 47%, 11%, 1);
|
||||||
|
--color-slate-950: hsla(229, 84%, 5%, 1);
|
||||||
|
--color-gray-50: hsla(210, 20%, 98%, 1);
|
||||||
|
--color-gray-100: hsla(220, 14%, 96%, 1);
|
||||||
|
--color-gray-200: hsla(220, 13%, 91%, 1);
|
||||||
|
--color-gray-300: hsla(216, 12%, 84%, 1);
|
||||||
|
--color-gray-400: hsla(218, 11%, 65%, 1);
|
||||||
|
--color-gray-500: hsla(220, 9%, 46%, 1);
|
||||||
|
--color-gray-600: hsla(0, 0%, 32%, 1);
|
||||||
|
--color-gray-700: hsla(217, 19%, 27%, 1);
|
||||||
|
--color-gray-800: hsla(215, 28%, 17%, 1);
|
||||||
|
--color-gray-900: hsla(221, 39%, 11%, 1);
|
||||||
|
--color-gray-950: hsla(224, 71%, 4%, 1);
|
||||||
|
--color-red-50: hsla(0, 86%, 97%, 1);
|
||||||
|
--color-red-100: hsla(0, 93%, 94%, 1);
|
||||||
|
--color-red-200: hsla(0, 96%, 89%, 1);
|
||||||
|
--color-red-300: hsla(0, 94%, 82%, 1);
|
||||||
|
--color-red-400: hsla(0, 91%, 71%, 1);
|
||||||
|
--color-red-500: hsla(0, 84%, 60%, 1);
|
||||||
|
--color-red-600: hsla(0, 72%, 51%, 1);
|
||||||
|
--color-red-700: hsla(0, 74%, 42%, 1);
|
||||||
|
--color-red-800: hsla(0, 70%, 35%, 1);
|
||||||
|
--color-red-900: hsla(0, 63%, 31%, 1);
|
||||||
|
--color-red-950: hsla(0, 75%, 15%, 1);
|
||||||
|
--color-orange-50: hsla(33, 100%, 96%, 1);
|
||||||
|
--color-orange-100: hsla(34, 100%, 92%, 1);
|
||||||
|
--color-orange-200: hsla(32, 98%, 83%, 1);
|
||||||
|
--color-orange-300: hsla(31, 97%, 72%, 1);
|
||||||
|
--color-orange-400: hsla(27, 96%, 61%, 1);
|
||||||
|
--color-orange-500: hsla(25, 95%, 53%, 1);
|
||||||
|
--color-orange-600: hsla(21, 90%, 48%, 1);
|
||||||
|
--color-orange-700: hsla(17, 88%, 40%, 1);
|
||||||
|
--color-orange-800: hsla(15, 79%, 34%, 1);
|
||||||
|
--color-orange-900: hsla(15, 75%, 28%, 1);
|
||||||
|
--color-orange-950: hsla(13, 81%, 15%, 1);
|
||||||
|
--color-amber-50: hsla(48, 100%, 96%, 1);
|
||||||
|
--color-amber-100: hsla(48, 96%, 89%, 1);
|
||||||
|
--color-amber-200: hsla(48, 97%, 77%, 1);
|
||||||
|
--color-amber-300: hsla(46, 97%, 65%, 1);
|
||||||
|
--color-amber-400: hsla(43, 96%, 56%, 1);
|
||||||
|
--color-amber-500: hsla(38, 92%, 50%, 1);
|
||||||
|
--color-amber-600: hsla(32, 95%, 44%, 1);
|
||||||
|
--color-amber-700: hsla(26, 90%, 37%, 1);
|
||||||
|
--color-amber-800: hsla(23, 83%, 31%, 1);
|
||||||
|
--color-amber-900: hsla(22, 78%, 26%, 1);
|
||||||
|
--color-amber-950: hsla(21, 92%, 14%, 1);
|
||||||
|
--color-yellow-50: hsla(55, 92%, 95%, 1);
|
||||||
|
--color-yellow-100: hsla(55, 97%, 88%, 1);
|
||||||
|
--color-yellow-200: hsla(53, 98%, 77%, 1);
|
||||||
|
--color-yellow-300: hsla(50, 98%, 64%, 1);
|
||||||
|
--color-yellow-400: hsla(48, 96%, 53%, 1);
|
||||||
|
--color-yellow-500: hsla(45, 93%, 47%, 1);
|
||||||
|
--color-yellow-600: hsla(41, 96%, 40%, 1);
|
||||||
|
--color-yellow-700: hsla(35, 92%, 33%, 1);
|
||||||
|
--color-yellow-800: hsla(32, 81%, 29%, 1);
|
||||||
|
--color-yellow-900: hsla(28, 73%, 26%, 1);
|
||||||
|
--color-yellow-950: hsla(26, 83%, 14%, 1);
|
||||||
|
--color-lime-50: hsla(78, 92%, 95%, 1);
|
||||||
|
--color-lime-100: hsla(80, 89%, 89%, 1);
|
||||||
|
--color-lime-200: hsla(81, 88%, 80%, 1);
|
||||||
|
--color-lime-300: hsla(82, 85%, 67%, 1);
|
||||||
|
--color-lime-400: hsla(83, 78%, 55%, 1);
|
||||||
|
--color-lime-500: hsla(84, 81%, 44%, 1);
|
||||||
|
--color-lime-600: hsla(85, 85%, 35%, 1);
|
||||||
|
--color-lime-700: hsla(86, 78%, 27%, 1);
|
||||||
|
--color-lime-800: hsla(86, 69%, 23%, 1);
|
||||||
|
--color-lime-900: hsla(88, 61%, 20%, 1);
|
||||||
|
--color-lime-950: hsla(89, 80%, 10%, 1);
|
||||||
|
--color-green-50: hsla(138, 76%, 97%, 1);
|
||||||
|
--color-green-100: hsla(141, 84%, 93%, 1);
|
||||||
|
--color-green-200: hsla(141, 79%, 85%, 1);
|
||||||
|
--color-green-300: hsla(142, 77%, 73%, 1);
|
||||||
|
--color-green-400: hsla(142, 69%, 58%, 1);
|
||||||
|
--color-green-500: hsla(142, 71%, 45%, 1);
|
||||||
|
--color-green-600: hsla(142, 76%, 36%, 1);
|
||||||
|
--color-green-700: hsla(142, 72%, 29%, 1);
|
||||||
|
--color-green-800: hsla(143, 64%, 24%, 1);
|
||||||
|
--color-green-900: hsla(144, 61%, 20%, 1);
|
||||||
|
--color-green-950: hsla(145, 80%, 10%, 1);
|
||||||
|
--color-emerald-50: hsla(152, 81%, 96%, 1);
|
||||||
|
--color-emerald-100: hsla(149, 80%, 90%, 1);
|
||||||
|
--color-emerald-200: hsla(152, 76%, 80%, 1);
|
||||||
|
--color-emerald-300: hsla(156, 72%, 67%, 1);
|
||||||
|
--color-emerald-400: hsla(158, 64%, 52%, 1);
|
||||||
|
--color-emerald-500: hsla(160, 84%, 39%, 1);
|
||||||
|
--color-emerald-600: hsla(161, 94%, 30%, 1);
|
||||||
|
--color-emerald-700: hsla(163, 94%, 24%, 1);
|
||||||
|
--color-emerald-800: hsla(163, 88%, 20%, 1);
|
||||||
|
--color-emerald-900: hsla(164, 86%, 16%, 1);
|
||||||
|
--color-emerald-950: hsla(166, 91%, 9%, 1);
|
||||||
|
--color-teal-50: hsla(166, 76%, 97%, 1);
|
||||||
|
--color-teal-100: hsla(167, 85%, 89%, 1);
|
||||||
|
--color-teal-200: hsla(168, 84%, 78%, 1);
|
||||||
|
--color-teal-300: hsla(171, 77%, 64%, 1);
|
||||||
|
--color-teal-400: hsla(172, 66%, 50%, 1);
|
||||||
|
--color-teal-500: hsla(173, 80%, 40%, 1);
|
||||||
|
--color-teal-600: hsla(175, 84%, 32%, 1);
|
||||||
|
--color-teal-700: hsla(175, 77%, 26%, 1);
|
||||||
|
--color-teal-800: hsla(176, 69%, 22%, 1);
|
||||||
|
--color-teal-900: hsla(176, 61%, 19%, 1);
|
||||||
|
--color-teal-950: hsla(179, 84%, 10%, 1);
|
||||||
|
--color-cyan-50: hsla(183, 100%, 96%, 1);
|
||||||
|
--color-cyan-100: hsla(185, 96%, 90%, 1);
|
||||||
|
--color-cyan-200: hsla(186, 94%, 82%, 1);
|
||||||
|
--color-cyan-300: hsla(187, 92%, 69%, 1);
|
||||||
|
--color-cyan-400: hsla(188, 86%, 53%, 1);
|
||||||
|
--color-cyan-500: hsla(189, 94%, 43%, 1);
|
||||||
|
--color-cyan-600: hsla(192, 91%, 36%, 1);
|
||||||
|
--color-cyan-700: hsla(193, 82%, 31%, 1);
|
||||||
|
--color-cyan-800: hsla(194, 70%, 27%, 1);
|
||||||
|
--color-cyan-900: hsla(196, 64%, 24%, 1);
|
||||||
|
--color-cyan-950: hsla(197, 79%, 15%, 1);
|
||||||
|
--color-sky-50: hsla(204, 100%, 97%, 1);
|
||||||
|
--color-sky-100: hsla(204, 94%, 94%, 1);
|
||||||
|
--color-sky-200: hsla(201, 94%, 86%, 1);
|
||||||
|
--color-sky-300: hsla(199, 95%, 74%, 1);
|
||||||
|
--color-sky-400: hsla(198, 93%, 60%, 1);
|
||||||
|
--color-sky-500: hsla(199, 89%, 48%, 1);
|
||||||
|
--color-sky-600: hsla(200, 98%, 39%, 1);
|
||||||
|
--color-sky-700: hsla(201, 96%, 32%, 1);
|
||||||
|
--color-sky-800: hsla(201, 90%, 27%, 1);
|
||||||
|
--color-sky-900: hsla(202, 80%, 24%, 1);
|
||||||
|
--color-sky-950: hsla(204, 80%, 16%, 1);
|
||||||
|
--color-blue-50: hsla(214, 100%, 97%, 1);
|
||||||
|
--color-blue-100: hsla(214, 95%, 93%, 1);
|
||||||
|
--color-blue-200: hsla(213, 97%, 87%, 1);
|
||||||
|
--color-blue-300: hsla(212, 96%, 78%, 1);
|
||||||
|
--color-blue-400: hsla(213, 94%, 68%, 1);
|
||||||
|
--color-blue-500: hsla(217, 91%, 60%, 1);
|
||||||
|
--color-blue-600: hsla(221, 83%, 53%, 1);
|
||||||
|
--color-blue-700: hsla(224, 76%, 48%, 1);
|
||||||
|
--color-blue-800: hsla(226, 71%, 40%, 1);
|
||||||
|
--color-blue-900: hsla(224, 64%, 33%, 1);
|
||||||
|
--color-blue-950: hsla(226, 57%, 21%, 1);
|
||||||
|
--color-indigo-50: hsla(226, 100%, 97%, 1);
|
||||||
|
--color-indigo-100: hsla(226, 100%, 94%, 1);
|
||||||
|
--color-indigo-200: hsla(228, 96%, 89%, 1);
|
||||||
|
--color-indigo-300: hsla(230, 94%, 82%, 1);
|
||||||
|
--color-indigo-400: hsla(234, 89%, 74%, 1);
|
||||||
|
--color-indigo-500: hsla(239, 84%, 67%, 1);
|
||||||
|
--color-indigo-600: hsla(243, 75%, 59%, 1);
|
||||||
|
--color-indigo-700: hsla(245, 58%, 51%, 1);
|
||||||
|
--color-indigo-800: hsla(244, 55%, 41%, 1);
|
||||||
|
--color-indigo-900: hsla(242, 47%, 34%, 1);
|
||||||
|
--color-indigo-950: hsla(244, 47%, 20%, 1);
|
||||||
|
--color-violet-50: hsla(250, 100%, 98%, 1);
|
||||||
|
--color-violet-100: hsla(251, 91%, 95%, 1);
|
||||||
|
--color-violet-200: hsla(251, 95%, 92%, 1);
|
||||||
|
--color-violet-300: hsla(253, 95%, 85%, 1);
|
||||||
|
--color-violet-400: hsla(255, 92%, 76%, 1);
|
||||||
|
--color-violet-500: hsla(258, 90%, 66%, 1);
|
||||||
|
--color-violet-600: hsla(262, 83%, 58%, 1);
|
||||||
|
--color-violet-700: hsla(263, 70%, 50%, 1);
|
||||||
|
--color-violet-800: hsla(263, 69%, 42%, 1);
|
||||||
|
--color-violet-900: hsla(264, 67%, 35%, 1);
|
||||||
|
--color-violet-950: hsla(262, 78%, 23%, 1);
|
||||||
|
--color-purple-50: hsla(270, 100%, 98%, 1);
|
||||||
|
--color-purple-100: hsla(269, 100%, 95%, 1);
|
||||||
|
--color-purple-200: hsla(269, 100%, 92%, 1);
|
||||||
|
--color-purple-300: hsla(269, 97%, 85%, 1);
|
||||||
|
--color-purple-400: hsla(270, 95%, 75%, 1);
|
||||||
|
--color-purple-500: hsla(271, 91%, 65%, 1);
|
||||||
|
--color-purple-600: hsla(271, 81%, 56%, 1);
|
||||||
|
--color-purple-700: hsla(272, 72%, 47%, 1);
|
||||||
|
--color-purple-800: hsla(273, 67%, 39%, 1);
|
||||||
|
--color-purple-900: hsla(274, 66%, 32%, 1);
|
||||||
|
--color-purple-950: hsla(274, 87%, 21%, 1);
|
||||||
|
--color-fuchsia-50: hsla(289, 100%, 98%, 1);
|
||||||
|
--color-fuchsia-100: hsla(287, 100%, 95%, 1);
|
||||||
|
--color-fuchsia-200: hsla(288, 96%, 91%, 1);
|
||||||
|
--color-fuchsia-300: hsla(291, 93%, 83%, 1);
|
||||||
|
--color-fuchsia-400: hsla(292, 91%, 73%, 1);
|
||||||
|
--color-fuchsia-500: hsla(292, 84%, 61%, 1);
|
||||||
|
--color-fuchsia-600: hsla(293, 69%, 49%, 1);
|
||||||
|
--color-fuchsia-700: hsla(295, 72%, 40%, 1);
|
||||||
|
--color-fuchsia-800: hsla(295, 70%, 33%, 1);
|
||||||
|
--color-fuchsia-900: hsla(297, 64%, 28%, 1);
|
||||||
|
--color-fuchsia-950: hsla(297, 90%, 16%, 1);
|
||||||
|
--color-pink-50: hsla(327, 73%, 97%, 1);
|
||||||
|
--color-pink-100: hsla(326, 78%, 95%, 1);
|
||||||
|
--color-pink-200: hsla(326, 85%, 90%, 1);
|
||||||
|
--color-pink-300: hsla(327, 87%, 82%, 1);
|
||||||
|
--color-pink-400: hsla(329, 86%, 70%, 1);
|
||||||
|
--color-pink-500: hsla(330, 81%, 60%, 1);
|
||||||
|
--color-pink-600: hsla(333, 71%, 51%, 1);
|
||||||
|
--color-pink-700: hsla(335, 78%, 42%, 1);
|
||||||
|
--color-pink-800: hsla(336, 74%, 35%, 1);
|
||||||
|
--color-pink-900: hsla(336, 69%, 30%, 1);
|
||||||
|
--color-pink-950: hsla(336, 84%, 17%, 1);
|
||||||
|
--color-rose-50: hsla(356, 100%, 97%, 1);
|
||||||
|
--color-rose-100: hsla(356, 100%, 95%, 1);
|
||||||
|
--color-rose-200: hsla(353, 96%, 90%, 1);
|
||||||
|
--color-rose-300: hsla(353, 96%, 82%, 1);
|
||||||
|
--color-rose-400: hsla(351, 95%, 71%, 1);
|
||||||
|
--color-rose-500: hsla(350, 89%, 60%, 1);
|
||||||
|
--color-rose-600: hsla(347, 77%, 50%, 1);
|
||||||
|
--color-rose-700: hsla(345, 83%, 41%, 1);
|
||||||
|
--color-rose-800: hsla(343, 80%, 35%, 1);
|
||||||
|
--color-rose-900: hsla(342, 75%, 30%, 1);
|
||||||
|
--color-rose-950: hsla(343, 88%, 16%, 1);
|
||||||
|
--color-brand-50: hsla(132, 64%, 97%, 1);
|
||||||
|
--color-brand-100: hsla(132, 64%, 93%, 1);
|
||||||
|
--color-brand-200: hsla(132, 64%, 85%, 1);
|
||||||
|
--color-brand-300: hsla(132, 64%, 73%, 1);
|
||||||
|
--color-brand-400: hsla(132, 64%, 63%, 1);
|
||||||
|
--color-brand-500: hsla(132, 64%, 53%, 1);
|
||||||
|
--color-brand-600: hsla(132, 64%, 43%, 1);
|
||||||
|
--color-brand-700: hsla(132, 64%, 33%, 1);
|
||||||
|
--color-brand-800: hsla(132, 64%, 23%, 1);
|
||||||
|
--color-brand-900: hsla(132, 64%, 13%, 1);
|
||||||
|
--color-brand-950: hsla(132, 64%, 8%, 1);
|
||||||
|
|
||||||
|
/* ==================== */
|
||||||
|
/* Semantic Colors */
|
||||||
|
/* ==================== */
|
||||||
|
--color-primary: hsla(132, 64%, 53%, 1);
|
||||||
|
--color-primary-hover: hsla(132, 64%, 73%, 1);
|
||||||
|
--color-destructive: hsla(0, 84%, 60%, 1);
|
||||||
|
--color-destructive-hover: hsla(0, 91%, 71%, 1);
|
||||||
|
--color-background: hsla(0, 0%, 98%, 1);
|
||||||
|
--color-background-subtle: hsla(0, 0%, 0%, 0.02);
|
||||||
|
--color-foreground: hsla(0, 0%, 0%, 0.9);
|
||||||
|
--color-foreground-secondary: hsla(0, 0%, 0%, 0.6);
|
||||||
|
--color-foreground-muted: hsla(0, 0%, 0%, 0.4);
|
||||||
|
--color-card: hsla(0, 0%, 100%, 1);
|
||||||
|
--color-popover: hsla(0, 0%, 100%, 1);
|
||||||
|
--color-border: hsla(0, 0%, 0%, 0.1);
|
||||||
|
--color-border-hover: hsla(0, 0%, 0%, 0.2);
|
||||||
|
--color-border-active: hsla(0, 0%, 0%, 0.3);
|
||||||
|
--color-ring: color-mix(in srgb, hsla(132, 64%, 53%, 1) 40%, transparent);
|
||||||
|
--color-secondary: hsla(0, 0%, 0%, 0.05);
|
||||||
|
--color-secondary-hover: hsla(0, 0%, 0%, 0.85);
|
||||||
|
--color-secondary-active: hsla(0, 0%, 0%, 0.7);
|
||||||
|
--color-muted: hsla(0, 0%, 0%, 0.05);
|
||||||
|
--color-accent: hsla(0, 0%, 0%, 0.05);
|
||||||
|
--color-ghost-hover: hsla(0, 0%, 0%, 0.05);
|
||||||
|
--color-ghost-active: hsla(0, 0%, 0%, 0.1);
|
||||||
|
--color-sidebar: hsla(0, 0%, 100%, 1);
|
||||||
|
--color-sidebar-accent: hsla(0, 0%, 0%, 0.05);
|
||||||
|
--color-border-width-sm: 1px;
|
||||||
|
--color-border-width-md: 2px;
|
||||||
|
--color-border-width-lg: 3px;
|
||||||
|
|
||||||
|
/* ==================== */
|
||||||
|
/* Status Colors */
|
||||||
|
/* ==================== */
|
||||||
|
--color-error-base: hsla(0, 84%, 60%, 1);
|
||||||
|
--color-error-text: hsla(0, 70%, 35%, 1);
|
||||||
|
--color-error-bg: hsla(0, 86%, 97%, 1);
|
||||||
|
--color-error-text-hover: hsla(0, 74%, 42%, 1);
|
||||||
|
--color-error-bg-hover: hsla(0, 93%, 94%, 1);
|
||||||
|
--color-error-border: hsla(0, 96%, 89%, 1);
|
||||||
|
--color-error-border-hover: hsla(0, 94%, 82%, 1);
|
||||||
|
--color-error-active: hsla(0, 72%, 51%, 1);
|
||||||
|
--color-success-base: hsla(142, 71%, 45%, 1);
|
||||||
|
--color-success-text-hover: hsla(142, 72%, 29%, 1);
|
||||||
|
--color-success-bg: hsla(138, 76%, 97%, 1);
|
||||||
|
--color-success-bg-hover: hsla(141, 79%, 85%, 1);
|
||||||
|
--color-warning-base: hsla(43, 96%, 56%, 1);
|
||||||
|
--color-warning-text-hover: hsla(26, 90%, 37%, 1);
|
||||||
|
--color-warning-bg: hsla(48, 100%, 96%, 1);
|
||||||
|
--color-warning-bg-hover: hsla(48, 96%, 89%, 1);
|
||||||
|
--color-warning-active: hsla(32, 95%, 44%, 1);
|
||||||
|
|
||||||
|
/* ==================== */
|
||||||
|
/* Spacing */
|
||||||
|
/* ==================== */
|
||||||
|
--spacing-5xs: 0.25rem;
|
||||||
|
--spacing-4xs: 0.5rem;
|
||||||
|
--spacing-3xs: 0.75rem;
|
||||||
|
--spacing-2xs: 1rem;
|
||||||
|
--spacing-xs: 1.5rem;
|
||||||
|
--spacing-sm: 2rem;
|
||||||
|
--spacing-md: 2.5rem;
|
||||||
|
--spacing-lg: 3rem;
|
||||||
|
--spacing-xl: 3.5rem;
|
||||||
|
--spacing-2xl: 4rem;
|
||||||
|
--spacing-3xl: 4.5rem;
|
||||||
|
--spacing-4xl: 5rem;
|
||||||
|
--spacing-5xl: 5.5rem;
|
||||||
|
--spacing-6xl: 6rem;
|
||||||
|
--spacing-7xl: 6.5rem;
|
||||||
|
--spacing-8xl: 7rem;
|
||||||
|
|
||||||
|
/* ==================== */
|
||||||
|
/* Radius */
|
||||||
|
/* ==================== */
|
||||||
|
--radius-4xs: 0.25rem; /* 4px */
|
||||||
|
--radius-3xs: 0.5rem; /* 8px */
|
||||||
|
--radius-2xs: 0.75rem; /* 12px */
|
||||||
|
--radius-xs: 1rem; /* 16px */
|
||||||
|
--radius-sm: 1.5rem; /* 24px */
|
||||||
|
--radius-md: 2rem; /* 32px */
|
||||||
|
--radius-lg: 2.5rem; /* 40px */
|
||||||
|
--radius-xl: 3rem; /* 48px */
|
||||||
|
--radius-2xl: 3.5rem; /* 56px */
|
||||||
|
--radius-3xl: 4rem; /* 64px */
|
||||||
|
--radius-round: 999px; /* 完全圆角 */
|
||||||
|
|
||||||
|
/* ==================== */
|
||||||
|
/* Typography */
|
||||||
|
/* ==================== */
|
||||||
|
--font-family-heading: Inter;
|
||||||
|
--font-family-body: Inter;
|
||||||
|
--font-weight-regular: 400;
|
||||||
|
--font-weight-medium: 500;
|
||||||
|
--font-weight-bold: 700;
|
||||||
|
--font-size-body-xs: 0.75rem;
|
||||||
|
--font-size-body-sm: 0.875rem;
|
||||||
|
--font-size-body-md: 1rem;
|
||||||
|
--font-size-body-lg: 1.125rem;
|
||||||
|
--font-size-heading-xs: 1.25rem;
|
||||||
|
--font-size-heading-sm: 1.5rem;
|
||||||
|
--font-size-heading-md: 2rem;
|
||||||
|
--font-size-heading-lg: 2.5rem;
|
||||||
|
--font-size-heading-xl: 3rem;
|
||||||
|
--font-size-heading-2xl: 3.75rem;
|
||||||
|
--line-height-body-xs: 1.25rem;
|
||||||
|
--line-height-body-sm: 1.5rem;
|
||||||
|
--line-height-body-md: 1.5rem;
|
||||||
|
--line-height-body-lg: 1.75rem;
|
||||||
|
--line-height-heading-xs: 2rem;
|
||||||
|
--line-height-heading-sm: 2.5rem;
|
||||||
|
--line-height-heading-md: 3rem;
|
||||||
|
--line-height-heading-lg: 3.75rem;
|
||||||
|
--line-height-heading-xl: 5rem;
|
||||||
|
--paragraph-spacing-body-xs: 0.75rem;
|
||||||
|
--paragraph-spacing-body-sm: 0.875rem;
|
||||||
|
--paragraph-spacing-body-md: 1rem;
|
||||||
|
--paragraph-spacing-body-lg: 1.125rem;
|
||||||
|
--paragraph-spacing-heading-xs: 1.25rem;
|
||||||
|
--paragraph-spacing-heading-sm: 1.5rem;
|
||||||
|
--paragraph-spacing-heading-md: 2rem;
|
||||||
|
--paragraph-spacing-heading-lg: 2.5rem;
|
||||||
|
--paragraph-spacing-heading-xl: 3rem;
|
||||||
|
--paragraph-spacing-heading-2xl: 3.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==================== */
|
||||||
|
/* Dark Mode */
|
||||||
|
/* ==================== */
|
||||||
|
@layer theme {
|
||||||
|
.dark {
|
||||||
|
--color-background: hsla(240, 6%, 10%, 1);
|
||||||
|
--color-background-subtle: hsla(0, 0%, 100%, 0.02);
|
||||||
|
--color-foreground: hsla(0, 0%, 100%, 0.9);
|
||||||
|
--color-foreground-secondary: hsla(0, 0%, 100%, 0.6);
|
||||||
|
--color-foreground-muted: hsla(0, 0%, 100%, 0.4);
|
||||||
|
--color-card: hsla(0, 0%, 0%, 1);
|
||||||
|
--color-popover: hsla(0, 0%, 0%, 1);
|
||||||
|
--color-border: hsla(0, 0%, 100%, 0.1);
|
||||||
|
--color-border-hover: hsla(0, 0%, 100%, 0.2);
|
||||||
|
--color-border-active: hsla(0, 0%, 100%, 0.3);
|
||||||
|
--color-ring: hsla(84, 81%, 44%, 0.4);
|
||||||
|
--color-secondary: hsla(0, 0%, 100%, 0.1);
|
||||||
|
--color-secondary-hover: hsla(0, 0%, 100%, 0.2);
|
||||||
|
--color-secondary-active: hsla(0, 0%, 100%, 0.25);
|
||||||
|
--color-muted: hsla(0, 0%, 100%, 0.1);
|
||||||
|
--color-accent: hsla(0, 0%, 100%, 0.1);
|
||||||
|
--color-ghost-hover: hsla(0, 0%, 100%, 0.1);
|
||||||
|
--color-ghost-active: hsla(0, 0%, 100%, 0.15);
|
||||||
|
--color-sidebar: hsla(0, 0%, 0%, 1);
|
||||||
|
--color-sidebar-accent: hsla(0, 0%, 100%, 0.1);
|
||||||
|
--color-error-base: hsla(0, 91%, 71%, 1);
|
||||||
|
--color-error-text: hsla(0, 93%, 94%, 1);
|
||||||
|
--color-error-bg: hsla(0, 63%, 31%, 1);
|
||||||
|
--color-error-text-hover: hsla(0, 96%, 89%, 1);
|
||||||
|
--color-error-bg-hover: hsla(0, 70%, 35%, 1);
|
||||||
|
--color-error-border: hsla(0, 74%, 42%, 1);
|
||||||
|
--color-error-border-hover: hsla(0, 72%, 51%, 1);
|
||||||
|
--color-error-active: hsla(0, 94%, 82%, 1);
|
||||||
|
--color-success-base: hsla(142, 69%, 58%, 1);
|
||||||
|
--color-success-text-hover: hsla(141, 79%, 85%, 1);
|
||||||
|
--color-success-bg: hsla(144, 61%, 20%, 1);
|
||||||
|
--color-success-bg-hover: hsla(143, 64%, 24%, 1);
|
||||||
|
--color-warning-base: hsla(43, 96%, 56%, 1);
|
||||||
|
--color-warning-text-hover: hsla(48, 97%, 77%, 1);
|
||||||
|
--color-warning-bg: hsla(22, 78%, 26%, 1);
|
||||||
|
--color-warning-bg-hover: hsla(23, 83%, 31%, 1);
|
||||||
|
--color-warning-active: hsla(32, 95%, 44%, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==================== */
|
||||||
|
/* Base Styles */
|
||||||
|
/* ==================== */
|
||||||
|
@layer base {
|
||||||
|
* {
|
||||||
|
@apply border-border outline-ring/50;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
@apply bg-background text-foreground;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -12,311 +12,308 @@
|
|||||||
/* ==================== */
|
/* ==================== */
|
||||||
/* Primitive Colors */
|
/* Primitive Colors */
|
||||||
/* ==================== */
|
/* ==================== */
|
||||||
--color-neutral-50: hsla(0, 0%, 98%, 1);
|
--color-neutral-50: oklch(0.98 0 0);
|
||||||
--color-neutral-100: hsla(0, 0%, 96%, 1);
|
--color-neutral-100: oklch(0.97 0 0);
|
||||||
--color-neutral-200: hsla(0, 0%, 90%, 1);
|
--color-neutral-200: oklch(0.92 0 0);
|
||||||
--color-neutral-300: hsla(0, 0%, 83%, 1);
|
--color-neutral-300: oklch(0.87 0 0);
|
||||||
--color-neutral-400: hsla(0, 0%, 64%, 1);
|
--color-neutral-400: oklch(0.72 0 0);
|
||||||
--color-neutral-500: hsla(0, 0%, 45%, 1);
|
--color-neutral-500: oklch(0.55 0 0);
|
||||||
--color-neutral-600: hsla(215, 14%, 34%, 1);
|
--color-neutral-600: oklch(0.44 0.027 257);
|
||||||
--color-neutral-700: hsla(0, 0%, 25%, 1);
|
--color-neutral-700: oklch(0.37 0 0);
|
||||||
--color-neutral-800: hsla(0, 0%, 15%, 1);
|
--color-neutral-800: oklch(0.27 0 0);
|
||||||
--color-neutral-900: hsla(0, 0%, 9%, 1);
|
--color-neutral-900: oklch(0.2 0 0);
|
||||||
--color-neutral-950: hsla(0, 0%, 4%, 1);
|
--color-neutral-950: oklch(0.15 0 0);
|
||||||
--color-stone-50: hsla(60, 9%, 98%, 1);
|
--color-stone-50: oklch(0.99 0.001 106);
|
||||||
--color-stone-100: hsla(60, 5%, 96%, 1);
|
--color-stone-100: oklch(0.97 0.001 106);
|
||||||
--color-stone-200: hsla(20, 6%, 90%, 1);
|
--color-stone-200: oklch(0.92 0.003 49);
|
||||||
--color-stone-300: hsla(24, 6%, 83%, 1);
|
--color-stone-300: oklch(0.87 0.004 56);
|
||||||
--color-stone-400: hsla(24, 5%, 64%, 1);
|
--color-stone-400: oklch(0.72 0.008 56);
|
||||||
--color-stone-500: hsla(25, 5%, 45%, 1);
|
--color-stone-500: oklch(0.56 0.011 58);
|
||||||
--color-stone-600: hsla(33, 5%, 32%, 1);
|
--color-stone-600: oklch(0.44 0.009 73);
|
||||||
--color-stone-700: hsla(30, 6%, 25%, 1);
|
--color-stone-700: oklch(0.37 0.008 68);
|
||||||
--color-stone-800: hsla(12, 6%, 15%, 1);
|
--color-stone-800: oklch(0.27 0.006 34);
|
||||||
--color-stone-900: hsla(24, 10%, 10%, 1);
|
--color-stone-900: oklch(0.22 0.006 56);
|
||||||
--color-stone-950: hsla(20, 14%, 4%, 1);
|
--color-stone-950: oklch(0.15 0.004 50);
|
||||||
--color-zinc-50: hsla(0, 0%, 98%, 1);
|
--color-zinc-50: oklch(0.98 0 0);
|
||||||
--color-zinc-100: hsla(240, 5%, 96%, 1);
|
--color-zinc-100: oklch(0.97 0.001 286);
|
||||||
--color-zinc-200: hsla(240, 6%, 90%, 1);
|
--color-zinc-200: oklch(0.92 0.004 286);
|
||||||
--color-zinc-300: hsla(240, 5%, 84%, 1);
|
--color-zinc-300: oklch(0.87 0.006 286);
|
||||||
--color-zinc-400: hsla(240, 5%, 65%, 1);
|
--color-zinc-400: oklch(0.71 0.013 286);
|
||||||
--color-zinc-500: hsla(240, 4%, 46%, 1);
|
--color-zinc-500: oklch(0.55 0.014 286);
|
||||||
--color-zinc-600: hsla(240, 5%, 34%, 1);
|
--color-zinc-600: oklch(0.44 0.014 286);
|
||||||
--color-zinc-700: hsla(240, 5%, 26%, 1);
|
--color-zinc-700: oklch(0.37 0.011 286);
|
||||||
--color-zinc-800: hsla(240, 4%, 16%, 1);
|
--color-zinc-800: oklch(0.27 0.006 286);
|
||||||
--color-zinc-900: hsla(240, 6%, 10%, 1);
|
--color-zinc-900: oklch(0.21 0.006 286);
|
||||||
--color-zinc-950: hsla(240, 10%, 4%, 1);
|
--color-zinc-950: oklch(0.14 0.004 286);
|
||||||
--color-slate-50: hsla(210, 40%, 98%, 1);
|
--color-slate-50: oklch(0.98 0.003 248);
|
||||||
--color-slate-100: hsla(210, 40%, 96%, 1);
|
--color-slate-100: oklch(0.97 0.007 248);
|
||||||
--color-slate-200: hsla(214, 32%, 91%, 1);
|
--color-slate-200: oklch(0.93 0.013 255);
|
||||||
--color-slate-300: hsla(213, 27%, 84%, 1);
|
--color-slate-300: oklch(0.87 0.02 253);
|
||||||
--color-slate-400: hsla(215, 20%, 65%, 1);
|
--color-slate-400: oklch(0.71 0.035 257);
|
||||||
--color-slate-500: hsla(215, 16%, 47%, 1);
|
--color-slate-500: oklch(0.56 0.04 257);
|
||||||
--color-slate-600: hsla(215, 19%, 35%, 1);
|
--color-slate-600: oklch(0.45 0.037 257);
|
||||||
--color-slate-700: hsla(215, 25%, 27%, 1);
|
--color-slate-700: oklch(0.38 0.039 257);
|
||||||
--color-slate-800: hsla(217, 33%, 17%, 1);
|
--color-slate-800: oklch(0.28 0.036 260);
|
||||||
--color-slate-900: hsla(222, 47%, 11%, 1);
|
--color-slate-900: oklch(0.21 0.039 266);
|
||||||
--color-slate-950: hsla(229, 84%, 5%, 1);
|
--color-slate-950: oklch(0.13 0.042 265);
|
||||||
--color-gray-50: hsla(210, 20%, 98%, 1);
|
--color-gray-50: oklch(0.98 0.002 248);
|
||||||
--color-gray-100: hsla(220, 14%, 96%, 1);
|
--color-gray-100: oklch(0.97 0.003 265);
|
||||||
--color-gray-200: hsla(220, 13%, 91%, 1);
|
--color-gray-200: oklch(0.93 0.006 265);
|
||||||
--color-gray-300: hsla(216, 12%, 84%, 1);
|
--color-gray-300: oklch(0.87 0.009 258);
|
||||||
--color-gray-400: hsla(218, 11%, 65%, 1);
|
--color-gray-400: oklch(0.71 0.02 261);
|
||||||
--color-gray-500: hsla(220, 9%, 46%, 1);
|
--color-gray-500: oklch(0.55 0.023 264);
|
||||||
--color-gray-600: hsla(0, 0%, 32%, 1);
|
--color-gray-600: oklch(0.44 0 0);
|
||||||
--color-gray-700: hsla(217, 19%, 27%, 1);
|
--color-gray-700: oklch(0.38 0.031 260);
|
||||||
--color-gray-800: hsla(215, 28%, 17%, 1);
|
--color-gray-800: oklch(0.28 0.03 257);
|
||||||
--color-gray-900: hsla(221, 39%, 11%, 1);
|
--color-gray-900: oklch(0.21 0.032 265);
|
||||||
--color-gray-950: hsla(224, 71%, 4%, 1);
|
--color-gray-950: oklch(0.13 0.027 262);
|
||||||
--color-red-50: hsla(0, 86%, 97%, 1);
|
--color-red-50: oklch(0.97 0.014 17);
|
||||||
--color-red-100: hsla(0, 93%, 94%, 1);
|
--color-red-100: oklch(0.93 0.031 18);
|
||||||
--color-red-200: hsla(0, 96%, 89%, 1);
|
--color-red-200: oklch(0.88 0.062 18);
|
||||||
--color-red-300: hsla(0, 94%, 82%, 1);
|
--color-red-300: oklch(0.81 0.103 20);
|
||||||
--color-red-400: hsla(0, 91%, 71%, 1);
|
--color-red-400: oklch(0.71 0.166 22);
|
||||||
--color-red-500: hsla(0, 84%, 60%, 1);
|
--color-red-500: oklch(0.64 0.208 25);
|
||||||
--color-red-600: hsla(0, 72%, 51%, 1);
|
--color-red-600: oklch(0.58 0.214 27);
|
||||||
--color-red-700: hsla(0, 74%, 42%, 1);
|
--color-red-700: oklch(0.51 0.192 28);
|
||||||
--color-red-800: hsla(0, 70%, 35%, 1);
|
--color-red-800: oklch(0.44 0.16 27);
|
||||||
--color-red-900: hsla(0, 63%, 31%, 1);
|
--color-red-900: oklch(0.4 0.135 26);
|
||||||
--color-red-950: hsla(0, 75%, 15%, 1);
|
--color-red-950: oklch(0.25 0.087 26);
|
||||||
--color-orange-50: hsla(33, 100%, 96%, 1);
|
--color-orange-50: oklch(0.98 0.018 73);
|
||||||
--color-orange-100: hsla(34, 100%, 92%, 1);
|
--color-orange-100: oklch(0.96 0.036 75);
|
||||||
--color-orange-200: hsla(32, 98%, 83%, 1);
|
--color-orange-200: oklch(0.9 0.074 70);
|
||||||
--color-orange-300: hsla(31, 97%, 72%, 1);
|
--color-orange-300: oklch(0.84 0.118 67);
|
||||||
--color-orange-400: hsla(27, 96%, 61%, 1);
|
--color-orange-400: oklch(0.76 0.159 56);
|
||||||
--color-orange-500: hsla(25, 95%, 53%, 1);
|
--color-orange-500: oklch(0.71 0.186 48);
|
||||||
--color-orange-600: hsla(21, 90%, 48%, 1);
|
--color-orange-600: oklch(0.65 0.192 42);
|
||||||
--color-orange-700: hsla(17, 88%, 40%, 1);
|
--color-orange-700: oklch(0.55 0.173 38);
|
||||||
--color-orange-800: hsla(15, 79%, 34%, 1);
|
--color-orange-800: oklch(0.47 0.144 37);
|
||||||
--color-orange-900: hsla(15, 75%, 28%, 1);
|
--color-orange-900: oklch(0.41 0.118 38);
|
||||||
--color-orange-950: hsla(13, 81%, 15%, 1);
|
--color-orange-950: oklch(0.27 0.078 36);
|
||||||
--color-amber-50: hsla(48, 100%, 96%, 1);
|
--color-amber-50: oklch(0.99 0.022 95);
|
||||||
--color-amber-100: hsla(48, 96%, 89%, 1);
|
--color-amber-100: oklch(0.96 0.057 96);
|
||||||
--color-amber-200: hsla(48, 97%, 77%, 1);
|
--color-amber-200: oklch(0.93 0.114 96);
|
||||||
--color-amber-300: hsla(46, 97%, 65%, 1);
|
--color-amber-300: oklch(0.88 0.153 92);
|
||||||
--color-amber-400: hsla(43, 96%, 56%, 1);
|
--color-amber-400: oklch(0.83 0.164 84);
|
||||||
--color-amber-500: hsla(38, 92%, 50%, 1);
|
--color-amber-500: oklch(0.77 0.165 71);
|
||||||
--color-amber-600: hsla(32, 95%, 44%, 1);
|
--color-amber-600: oklch(0.67 0.159 58);
|
||||||
--color-amber-700: hsla(26, 90%, 37%, 1);
|
--color-amber-700: oklch(0.55 0.145 49);
|
||||||
--color-amber-800: hsla(23, 83%, 31%, 1);
|
--color-amber-800: oklch(0.47 0.124 47);
|
||||||
--color-amber-900: hsla(22, 78%, 26%, 1);
|
--color-amber-900: oklch(0.41 0.104 46);
|
||||||
--color-amber-950: hsla(21, 92%, 14%, 1);
|
--color-amber-950: oklch(0.28 0.074 46);
|
||||||
--color-yellow-50: hsla(55, 92%, 95%, 1);
|
--color-yellow-50: oklch(0.99 0.028 103);
|
||||||
--color-yellow-100: hsla(55, 97%, 88%, 1);
|
--color-yellow-100: oklch(0.97 0.07 103);
|
||||||
--color-yellow-200: hsla(53, 98%, 77%, 1);
|
--color-yellow-200: oklch(0.95 0.124 102);
|
||||||
--color-yellow-300: hsla(50, 98%, 64%, 1);
|
--color-yellow-300: oklch(0.9 0.164 98);
|
||||||
--color-yellow-400: hsla(48, 96%, 53%, 1);
|
--color-yellow-400: oklch(0.86 0.173 92);
|
||||||
--color-yellow-500: hsla(45, 93%, 47%, 1);
|
--color-yellow-500: oklch(0.79 0.16 85);
|
||||||
--color-yellow-600: hsla(41, 96%, 40%, 1);
|
--color-yellow-600: oklch(0.68 0.141 77);
|
||||||
--color-yellow-700: hsla(35, 92%, 33%, 1);
|
--color-yellow-700: oklch(0.55 0.121 65);
|
||||||
--color-yellow-800: hsla(32, 81%, 29%, 1);
|
--color-yellow-800: oklch(0.48 0.104 62);
|
||||||
--color-yellow-900: hsla(28, 73%, 26%, 1);
|
--color-yellow-900: oklch(0.42 0.091 57);
|
||||||
--color-yellow-950: hsla(26, 83%, 14%, 1);
|
--color-yellow-950: oklch(0.28 0.063 54);
|
||||||
--color-lime-50: hsla(78, 92%, 95%, 1);
|
--color-lime-50: oklch(0.99 0.032 121);
|
||||||
--color-lime-100: hsla(80, 89%, 89%, 1);
|
--color-lime-100: oklch(0.97 0.067 123);
|
||||||
--color-lime-200: hsla(81, 88%, 80%, 1);
|
--color-lime-200: oklch(0.94 0.119 124);
|
||||||
--color-lime-300: hsla(82, 85%, 67%, 1);
|
--color-lime-300: oklch(0.9 0.18 127);
|
||||||
--color-lime-400: hsla(83, 78%, 55%, 1);
|
--color-lime-400: oklch(0.85 0.209 129);
|
||||||
--color-lime-500: hsla(84, 81%, 44%, 1);
|
--color-lime-500: oklch(0.76 0.204 131);
|
||||||
--color-lime-600: hsla(85, 85%, 35%, 1);
|
--color-lime-600: oklch(0.65 0.177 132);
|
||||||
--color-lime-700: hsla(86, 78%, 27%, 1);
|
--color-lime-700: oklch(0.53 0.139 132);
|
||||||
--color-lime-800: hsla(86, 69%, 23%, 1);
|
--color-lime-800: oklch(0.46 0.114 131);
|
||||||
--color-lime-900: hsla(88, 61%, 20%, 1);
|
--color-lime-900: oklch(0.4 0.095 131);
|
||||||
--color-lime-950: hsla(89, 80%, 10%, 1);
|
--color-lime-950: oklch(0.27 0.068 132);
|
||||||
--color-green-50: hsla(138, 76%, 97%, 1);
|
--color-green-50: oklch(0.98 0.016 156);
|
||||||
--color-green-100: hsla(141, 84%, 93%, 1);
|
--color-green-100: oklch(0.96 0.041 157);
|
||||||
--color-green-200: hsla(141, 79%, 85%, 1);
|
--color-green-200: oklch(0.92 0.081 156);
|
||||||
--color-green-300: hsla(142, 77%, 73%, 1);
|
--color-green-300: oklch(0.87 0.137 155);
|
||||||
--color-green-400: hsla(142, 69%, 58%, 1);
|
--color-green-400: oklch(0.8 0.182 152);
|
||||||
--color-green-500: hsla(142, 71%, 45%, 1);
|
--color-green-500: oklch(0.72 0.192 149);
|
||||||
--color-green-600: hsla(142, 76%, 36%, 1);
|
--color-green-600: oklch(0.62 0.169 149);
|
||||||
--color-green-700: hsla(142, 72%, 29%, 1);
|
--color-green-700: oklch(0.52 0.137 150);
|
||||||
--color-green-800: hsla(143, 64%, 24%, 1);
|
--color-green-800: oklch(0.45 0.107 151);
|
||||||
--color-green-900: hsla(144, 61%, 20%, 1);
|
--color-green-900: oklch(0.39 0.089 153);
|
||||||
--color-green-950: hsla(145, 80%, 10%, 1);
|
--color-green-950: oklch(0.27 0.063 153);
|
||||||
--color-emerald-50: hsla(152, 81%, 96%, 1);
|
--color-emerald-50: oklch(0.98 0.02 166);
|
||||||
--color-emerald-100: hsla(149, 80%, 90%, 1);
|
--color-emerald-100: oklch(0.95 0.051 163);
|
||||||
--color-emerald-200: hsla(152, 76%, 80%, 1);
|
--color-emerald-200: oklch(0.9 0.092 164);
|
||||||
--color-emerald-300: hsla(156, 72%, 67%, 1);
|
--color-emerald-300: oklch(0.85 0.13 165);
|
||||||
--color-emerald-400: hsla(158, 64%, 52%, 1);
|
--color-emerald-400: oklch(0.77 0.152 163);
|
||||||
--color-emerald-500: hsla(160, 84%, 39%, 1);
|
--color-emerald-500: oklch(0.69 0.148 162);
|
||||||
--color-emerald-600: hsla(161, 94%, 30%, 1);
|
--color-emerald-600: oklch(0.59 0.127 163);
|
||||||
--color-emerald-700: hsla(163, 94%, 24%, 1);
|
--color-emerald-700: oklch(0.5 0.104 166);
|
||||||
--color-emerald-800: hsla(163, 88%, 20%, 1);
|
--color-emerald-800: oklch(0.43 0.087 167);
|
||||||
--color-emerald-900: hsla(164, 86%, 16%, 1);
|
--color-emerald-900: oklch(0.37 0.072 169);
|
||||||
--color-emerald-950: hsla(166, 91%, 9%, 1);
|
--color-emerald-950: oklch(0.26 0.048 173);
|
||||||
--color-teal-50: hsla(166, 76%, 97%, 1);
|
--color-teal-50: oklch(0.99 0.013 181);
|
||||||
--color-teal-100: hsla(167, 85%, 89%, 1);
|
--color-teal-100: oklch(0.95 0.051 181);
|
||||||
--color-teal-200: hsla(168, 84%, 78%, 1);
|
--color-teal-200: oklch(0.91 0.094 180);
|
||||||
--color-teal-300: hsla(171, 77%, 64%, 1);
|
--color-teal-300: oklch(0.85 0.125 182);
|
||||||
--color-teal-400: hsla(172, 66%, 50%, 1);
|
--color-teal-400: oklch(0.78 0.133 181);
|
||||||
--color-teal-500: hsla(173, 80%, 40%, 1);
|
--color-teal-500: oklch(0.7 0.123 182);
|
||||||
--color-teal-600: hsla(175, 84%, 32%, 1);
|
--color-teal-600: oklch(0.61 0.105 185);
|
||||||
--color-teal-700: hsla(175, 77%, 26%, 1);
|
--color-teal-700: oklch(0.51 0.086 186);
|
||||||
--color-teal-800: hsla(176, 69%, 22%, 1);
|
--color-teal-800: oklch(0.44 0.071 188);
|
||||||
--color-teal-900: hsla(176, 61%, 19%, 1);
|
--color-teal-900: oklch(0.39 0.059 189);
|
||||||
--color-teal-950: hsla(179, 84%, 10%, 1);
|
--color-teal-950: oklch(0.28 0.045 193);
|
||||||
--color-cyan-50: hsla(183, 100%, 96%, 1);
|
--color-cyan-50: oklch(0.98 0.02 201);
|
||||||
--color-cyan-100: hsla(185, 96%, 90%, 1);
|
--color-cyan-100: oklch(0.95 0.046 203);
|
||||||
--color-cyan-200: hsla(186, 94%, 82%, 1);
|
--color-cyan-200: oklch(0.92 0.077 205);
|
||||||
--color-cyan-300: hsla(187, 92%, 69%, 1);
|
--color-cyan-300: oklch(0.86 0.115 207);
|
||||||
--color-cyan-400: hsla(188, 86%, 53%, 1);
|
--color-cyan-400: oklch(0.8 0.134 212);
|
||||||
--color-cyan-500: hsla(189, 94%, 43%, 1);
|
--color-cyan-500: oklch(0.71 0.126 216);
|
||||||
--color-cyan-600: hsla(192, 91%, 36%, 1);
|
--color-cyan-600: oklch(0.6 0.11 222);
|
||||||
--color-cyan-700: hsla(193, 82%, 31%, 1);
|
--color-cyan-700: oklch(0.52 0.093 223);
|
||||||
--color-cyan-800: hsla(194, 70%, 27%, 1);
|
--color-cyan-800: oklch(0.45 0.077 224);
|
||||||
--color-cyan-900: hsla(196, 64%, 24%, 1);
|
--color-cyan-900: oklch(0.4 0.067 227);
|
||||||
--color-cyan-950: hsla(197, 79%, 15%, 1);
|
--color-cyan-950: oklch(0.3 0.054 230);
|
||||||
--color-sky-50: hsla(204, 100%, 97%, 1);
|
--color-sky-50: oklch(0.98 0.013 237);
|
||||||
--color-sky-100: hsla(204, 94%, 94%, 1);
|
--color-sky-100: oklch(0.95 0.024 237);
|
||||||
--color-sky-200: hsla(201, 94%, 86%, 1);
|
--color-sky-200: oklch(0.9 0.056 232);
|
||||||
--color-sky-300: hsla(199, 95%, 74%, 1);
|
--color-sky-300: oklch(0.83 0.1 230);
|
||||||
--color-sky-400: hsla(198, 93%, 60%, 1);
|
--color-sky-400: oklch(0.76 0.137 232);
|
||||||
--color-sky-500: hsla(199, 89%, 48%, 1);
|
--color-sky-500: oklch(0.68 0.148 238);
|
||||||
--color-sky-600: hsla(200, 98%, 39%, 1);
|
--color-sky-600: oklch(0.59 0.137 241);
|
||||||
--color-sky-700: hsla(201, 96%, 32%, 1);
|
--color-sky-700: oklch(0.5 0.118 242);
|
||||||
--color-sky-800: hsla(201, 90%, 27%, 1);
|
--color-sky-800: oklch(0.44 0.099 241);
|
||||||
--color-sky-900: hsla(202, 80%, 24%, 1);
|
--color-sky-900: oklch(0.39 0.084 241);
|
||||||
--color-sky-950: hsla(204, 80%, 16%, 1);
|
--color-sky-950: oklch(0.29 0.063 243);
|
||||||
--color-blue-50: hsla(214, 100%, 97%, 1);
|
--color-blue-50: oklch(0.97 0.014 255);
|
||||||
--color-blue-100: hsla(214, 95%, 93%, 1);
|
--color-blue-100: oklch(0.93 0.03 255);
|
||||||
--color-blue-200: hsla(213, 97%, 87%, 1);
|
--color-blue-200: oklch(0.88 0.058 254);
|
||||||
--color-blue-300: hsla(212, 96%, 78%, 1);
|
--color-blue-300: oklch(0.8 0.098 252);
|
||||||
--color-blue-400: hsla(213, 94%, 68%, 1);
|
--color-blue-400: oklch(0.72 0.143 254);
|
||||||
--color-blue-500: hsla(217, 91%, 60%, 1);
|
--color-blue-500: oklch(0.63 0.186 260);
|
||||||
--color-blue-600: hsla(221, 83%, 53%, 1);
|
--color-blue-600: oklch(0.54 0.215 263);
|
||||||
--color-blue-700: hsla(224, 76%, 48%, 1);
|
--color-blue-700: oklch(0.49 0.215 264);
|
||||||
--color-blue-800: hsla(226, 71%, 40%, 1);
|
--color-blue-800: oklch(0.42 0.181 266);
|
||||||
--color-blue-900: hsla(224, 64%, 33%, 1);
|
--color-blue-900: oklch(0.38 0.136 265);
|
||||||
--color-blue-950: hsla(226, 57%, 21%, 1);
|
--color-blue-950: oklch(0.28 0.087 268);
|
||||||
--color-indigo-50: hsla(226, 100%, 97%, 1);
|
--color-indigo-50: oklch(0.97 0.016 272);
|
||||||
--color-indigo-100: hsla(226, 100%, 94%, 1);
|
--color-indigo-100: oklch(0.93 0.033 272);
|
||||||
--color-indigo-200: hsla(228, 96%, 89%, 1);
|
--color-indigo-200: oklch(0.87 0.061 274);
|
||||||
--color-indigo-300: hsla(230, 94%, 82%, 1);
|
--color-indigo-300: oklch(0.79 0.104 275);
|
||||||
--color-indigo-400: hsla(234, 89%, 74%, 1);
|
--color-indigo-400: oklch(0.68 0.156 277);
|
||||||
--color-indigo-500: hsla(239, 84%, 67%, 1);
|
--color-indigo-500: oklch(0.59 0.204 277);
|
||||||
--color-indigo-600: hsla(243, 75%, 59%, 1);
|
--color-indigo-600: oklch(0.51 0.228 277);
|
||||||
--color-indigo-700: hsla(245, 58%, 51%, 1);
|
--color-indigo-700: oklch(0.46 0.213 278);
|
||||||
--color-indigo-800: hsla(244, 55%, 41%, 1);
|
--color-indigo-800: oklch(0.4 0.177 278);
|
||||||
--color-indigo-900: hsla(242, 47%, 34%, 1);
|
--color-indigo-900: oklch(0.36 0.133 279);
|
||||||
--color-indigo-950: hsla(244, 47%, 20%, 1);
|
--color-indigo-950: oklch(0.26 0.086 282);
|
||||||
--color-violet-50: hsla(250, 100%, 98%, 1);
|
--color-violet-50: oklch(0.97 0.014 294);
|
||||||
--color-violet-100: hsla(251, 91%, 95%, 1);
|
--color-violet-100: oklch(0.94 0.031 294);
|
||||||
--color-violet-200: hsla(251, 95%, 92%, 1);
|
--color-violet-200: oklch(0.9 0.053 294);
|
||||||
--color-violet-300: hsla(253, 95%, 85%, 1);
|
--color-violet-300: oklch(0.81 0.102 294);
|
||||||
--color-violet-400: hsla(255, 92%, 76%, 1);
|
--color-violet-400: oklch(0.71 0.161 293);
|
||||||
--color-violet-500: hsla(258, 90%, 66%, 1);
|
--color-violet-500: oklch(0.6 0.221 292);
|
||||||
--color-violet-600: hsla(262, 83%, 58%, 1);
|
--color-violet-600: oklch(0.54 0.245 293);
|
||||||
--color-violet-700: hsla(263, 70%, 50%, 1);
|
--color-violet-700: oklch(0.49 0.242 292);
|
||||||
--color-violet-800: hsla(263, 69%, 42%, 1);
|
--color-violet-800: oklch(0.43 0.209 292);
|
||||||
--color-violet-900: hsla(264, 67%, 35%, 1);
|
--color-violet-900: oklch(0.38 0.178 294);
|
||||||
--color-violet-950: hsla(262, 78%, 23%, 1);
|
--color-violet-950: oklch(0.28 0.142 291);
|
||||||
--color-purple-50: hsla(270, 100%, 98%, 1);
|
--color-purple-50: oklch(0.98 0.014 308);
|
||||||
--color-purple-100: hsla(269, 100%, 95%, 1);
|
--color-purple-100: oklch(0.94 0.036 307);
|
||||||
--color-purple-200: hsla(269, 100%, 92%, 1);
|
--color-purple-200: oklch(0.91 0.059 307);
|
||||||
--color-purple-300: hsla(269, 97%, 85%, 1);
|
--color-purple-300: oklch(0.83 0.108 306);
|
||||||
--color-purple-400: hsla(270, 95%, 75%, 1);
|
--color-purple-400: oklch(0.72 0.178 305);
|
||||||
--color-purple-500: hsla(271, 91%, 65%, 1);
|
--color-purple-500: oklch(0.63 0.233 304);
|
||||||
--color-purple-600: hsla(271, 81%, 56%, 1);
|
--color-purple-600: oklch(0.56 0.251 302);
|
||||||
--color-purple-700: hsla(272, 72%, 47%, 1);
|
--color-purple-700: oklch(0.49 0.237 302);
|
||||||
--color-purple-800: hsla(273, 67%, 39%, 1);
|
--color-purple-800: oklch(0.44 0.196 304);
|
||||||
--color-purple-900: hsla(274, 66%, 32%, 1);
|
--color-purple-900: oklch(0.38 0.167 305);
|
||||||
--color-purple-950: hsla(274, 87%, 21%, 1);
|
--color-purple-950: oklch(0.29 0.144 303);
|
||||||
--color-fuchsia-50: hsla(289, 100%, 98%, 1);
|
--color-fuchsia-50: oklch(0.98 0.016 320);
|
||||||
--color-fuchsia-100: hsla(287, 100%, 95%, 1);
|
--color-fuchsia-100: oklch(0.95 0.04 319);
|
||||||
--color-fuchsia-200: hsla(288, 96%, 91%, 1);
|
--color-fuchsia-200: oklch(0.91 0.07 319);
|
||||||
--color-fuchsia-300: hsla(291, 93%, 83%, 1);
|
--color-fuchsia-300: oklch(0.83 0.132 321);
|
||||||
--color-fuchsia-400: hsla(292, 91%, 73%, 1);
|
--color-fuchsia-400: oklch(0.75 0.203 322);
|
||||||
--color-fuchsia-500: hsla(292, 84%, 61%, 1);
|
--color-fuchsia-500: oklch(0.67 0.257 322);
|
||||||
--color-fuchsia-600: hsla(293, 69%, 49%, 1);
|
--color-fuchsia-600: oklch(0.59 0.256 323);
|
||||||
--color-fuchsia-700: hsla(295, 72%, 40%, 1);
|
--color-fuchsia-700: oklch(0.52 0.226 324);
|
||||||
--color-fuchsia-800: hsla(295, 70%, 33%, 1);
|
--color-fuchsia-800: oklch(0.45 0.192 324);
|
||||||
--color-fuchsia-900: hsla(297, 64%, 28%, 1);
|
--color-fuchsia-900: oklch(0.4 0.161 326);
|
||||||
--color-fuchsia-950: hsla(297, 90%, 16%, 1);
|
--color-fuchsia-950: oklch(0.29 0.13 326);
|
||||||
--color-pink-50: hsla(327, 73%, 97%, 1);
|
--color-pink-50: oklch(0.97 0.014 343);
|
||||||
--color-pink-100: hsla(326, 78%, 95%, 1);
|
--color-pink-100: oklch(0.95 0.026 342);
|
||||||
--color-pink-200: hsla(326, 85%, 90%, 1);
|
--color-pink-200: oklch(0.9 0.058 343);
|
||||||
--color-pink-300: hsla(327, 87%, 82%, 1);
|
--color-pink-300: oklch(0.83 0.108 346);
|
||||||
--color-pink-400: hsla(329, 86%, 70%, 1);
|
--color-pink-400: oklch(0.72 0.177 350);
|
||||||
--color-pink-500: hsla(330, 81%, 60%, 1);
|
--color-pink-500: oklch(0.65 0.213 354);
|
||||||
--color-pink-600: hsla(333, 71%, 51%, 1);
|
--color-pink-600: oklch(0.59 0.217 360);
|
||||||
--color-pink-700: hsla(335, 78%, 42%, 1);
|
--color-pink-700: oklch(0.53 0.2 4);
|
||||||
--color-pink-800: hsla(336, 74%, 35%, 1);
|
--color-pink-800: oklch(0.46 0.168 4);
|
||||||
--color-pink-900: hsla(336, 69%, 30%, 1);
|
--color-pink-900: oklch(0.4 0.143 3);
|
||||||
--color-pink-950: hsla(336, 84%, 17%, 1);
|
--color-pink-950: oklch(0.28 0.105 4);
|
||||||
--color-rose-50: hsla(356, 100%, 97%, 1);
|
--color-rose-50: oklch(0.97 0.017 13);
|
||||||
--color-rose-100: hsla(356, 100%, 95%, 1);
|
--color-rose-100: oklch(0.94 0.028 13);
|
||||||
--color-rose-200: hsla(353, 96%, 90%, 1);
|
--color-rose-200: oklch(0.89 0.056 10);
|
||||||
--color-rose-300: hsla(353, 96%, 82%, 1);
|
--color-rose-300: oklch(0.81 0.105 12);
|
||||||
--color-rose-400: hsla(351, 95%, 71%, 1);
|
--color-rose-400: oklch(0.72 0.172 13);
|
||||||
--color-rose-500: hsla(350, 89%, 60%, 1);
|
--color-rose-500: oklch(0.64 0.216 17);
|
||||||
--color-rose-600: hsla(347, 77%, 50%, 1);
|
--color-rose-600: oklch(0.59 0.222 18);
|
||||||
--color-rose-700: hsla(345, 83%, 41%, 1);
|
--color-rose-700: oklch(0.52 0.199 17);
|
||||||
--color-rose-800: hsla(343, 80%, 35%, 1);
|
--color-rose-800: oklch(0.46 0.173 13);
|
||||||
--color-rose-900: hsla(342, 75%, 30%, 1);
|
--color-rose-900: oklch(0.41 0.148 11);
|
||||||
--color-rose-950: hsla(343, 88%, 16%, 1);
|
--color-rose-950: oklch(0.27 0.102 12);
|
||||||
--color-brand-50: hsla(132, 64%, 97%, 1);
|
--color-brand-50: oklch(0.98 0.015 152);
|
||||||
--color-brand-100: hsla(132, 64%, 93%, 1);
|
--color-brand-100: oklch(0.96 0.034 151);
|
||||||
--color-brand-200: hsla(132, 64%, 85%, 1);
|
--color-brand-200: oklch(0.91 0.073 151);
|
||||||
--color-brand-300: hsla(132, 64%, 73%, 1);
|
--color-brand-300: oklch(0.85 0.13 149);
|
||||||
--color-brand-400: hsla(132, 64%, 63%, 1);
|
--color-brand-400: oklch(0.81 0.173 148);
|
||||||
--color-brand-500: hsla(132, 64%, 53%, 1);
|
--color-brand-500: oklch(0.77 0.208 146);
|
||||||
--color-brand-600: hsla(132, 64%, 43%, 1);
|
--color-brand-600: oklch(0.67 0.192 146);
|
||||||
--color-brand-700: hsla(132, 64%, 33%, 1);
|
--color-brand-700: oklch(0.56 0.156 146);
|
||||||
--color-brand-800: hsla(132, 64%, 23%, 1);
|
--color-brand-800: oklch(0.43 0.117 146);
|
||||||
--color-brand-900: hsla(132, 64%, 13%, 1);
|
--color-brand-900: oklch(0.3 0.075 147);
|
||||||
--color-brand-950: hsla(132, 64%, 8%, 1);
|
--color-brand-950: oklch(0.22 0.051 148);
|
||||||
|
|
||||||
/* ==================== */
|
/* ==================== */
|
||||||
/* Semantic Colors */
|
/* Semantic Colors */
|
||||||
/* ==================== */
|
/* ==================== */
|
||||||
--color-primary: hsla(132, 64%, 53%, 1);
|
--color-primary: oklch(0.77 0.208 146);
|
||||||
--color-primary-hover: hsla(132, 64%, 73%, 1);
|
--color-primary-hover: oklch(0.85 0.13 149);
|
||||||
--color-destructive: hsla(0, 84%, 60%, 1);
|
--color-destructive: oklch(0.64 0.208 25);
|
||||||
--color-destructive-hover: hsla(0, 91%, 71%, 1);
|
--color-destructive-hover: oklch(0.71 0.166 22);
|
||||||
--color-background: hsla(0, 0%, 98%, 1);
|
--color-background: oklch(0.98 0 0);
|
||||||
--color-background-subtle: hsla(0, 0%, 0%, 0.02);
|
--color-background-subtle: oklch(0 0 0 / 0.02);
|
||||||
--color-foreground: hsla(0, 0%, 0%, 0.9);
|
--color-foreground: oklch(0 0 0 / 0.9);
|
||||||
--color-foreground-secondary: hsla(0, 0%, 0%, 0.6);
|
--color-foreground-secondary: oklch(0 0 0 / 0.6);
|
||||||
--color-foreground-muted: hsla(0, 0%, 0%, 0.4);
|
--color-foreground-muted: oklch(0 0 0 / 0.4);
|
||||||
--color-card: hsla(0, 0%, 100%, 1);
|
--color-card: oklch(1 0 0);
|
||||||
--color-popover: hsla(0, 0%, 100%, 1);
|
--color-popover: oklch(1 0 0);
|
||||||
--color-border: hsla(0, 0%, 0%, 0.1);
|
--color-border: oklch(0 0 0 / 0.1);
|
||||||
--color-border-hover: hsla(0, 0%, 0%, 0.2);
|
--color-border-hover: oklch(0 0 0 / 0.2);
|
||||||
--color-border-active: hsla(0, 0%, 0%, 0.3);
|
--color-border-active: oklch(0 0 0 / 0.3);
|
||||||
--color-ring: color-mix(in srgb, hsla(132, 64%, 53%, 1) 40%, transparent);
|
--color-ring: color-mix(in srgb, oklch(0.77 0.208 146) 40%, transparent);
|
||||||
--color-secondary: hsla(0, 0%, 0%, 0.05);
|
--color-secondary: oklch(0 0 0 / 0.05);
|
||||||
--color-secondary-hover: hsla(0, 0%, 0%, 0.85);
|
--color-secondary-hover: oklch(0 0 0 / 0.85);
|
||||||
--color-secondary-active: hsla(0, 0%, 0%, 0.7);
|
--color-secondary-active: oklch(0 0 0 / 0.7);
|
||||||
--color-muted: hsla(0, 0%, 0%, 0.05);
|
--color-muted: oklch(0 0 0 / 0.05);
|
||||||
--color-accent: hsla(0, 0%, 0%, 0.05);
|
--color-accent: oklch(0 0 0 / 0.05);
|
||||||
--color-ghost-hover: hsla(0, 0%, 0%, 0.05);
|
--color-ghost-hover: oklch(0 0 0 / 0.05);
|
||||||
--color-ghost-active: hsla(0, 0%, 0%, 0.1);
|
--color-ghost-active: oklch(0 0 0 / 0.1);
|
||||||
--color-sidebar: hsla(0, 0%, 100%, 1);
|
--color-sidebar: oklch(1 0 0);
|
||||||
--color-sidebar-accent: hsla(0, 0%, 0%, 0.05);
|
--color-sidebar-accent: oklch(0 0 0 / 0.05);
|
||||||
--color-border-width-sm: 1px;
|
|
||||||
--color-border-width-md: 2px;
|
|
||||||
--color-border-width-lg: 3px;
|
|
||||||
|
|
||||||
/* ==================== */
|
/* ==================== */
|
||||||
/* Status Colors */
|
/* Status Colors */
|
||||||
/* ==================== */
|
/* ==================== */
|
||||||
--color-error-base: hsla(0, 84%, 60%, 1);
|
--color-error-base: oklch(0.64 0.208 25);
|
||||||
--color-error-text: hsla(0, 70%, 35%, 1);
|
--color-error-text: oklch(0.44 0.16 27);
|
||||||
--color-error-bg: hsla(0, 86%, 97%, 1);
|
--color-error-bg: oklch(0.97 0.014 17);
|
||||||
--color-error-text-hover: hsla(0, 74%, 42%, 1);
|
--color-error-text-hover: oklch(0.51 0.192 28);
|
||||||
--color-error-bg-hover: hsla(0, 93%, 94%, 1);
|
--color-error-bg-hover: oklch(0.93 0.031 18);
|
||||||
--color-error-border: hsla(0, 96%, 89%, 1);
|
--color-error-border: oklch(0.88 0.062 18);
|
||||||
--color-error-border-hover: hsla(0, 94%, 82%, 1);
|
--color-error-border-hover: oklch(0.81 0.103 20);
|
||||||
--color-error-active: hsla(0, 72%, 51%, 1);
|
--color-error-active: oklch(0.58 0.214 27);
|
||||||
--color-success-base: hsla(142, 71%, 45%, 1);
|
--color-success-base: oklch(0.72 0.192 149);
|
||||||
--color-success-text-hover: hsla(142, 72%, 29%, 1);
|
--color-success-text-hover: oklch(0.52 0.137 150);
|
||||||
--color-success-bg: hsla(138, 76%, 97%, 1);
|
--color-success-bg: oklch(0.98 0.016 156);
|
||||||
--color-success-bg-hover: hsla(141, 79%, 85%, 1);
|
--color-success-bg-hover: oklch(0.92 0.081 156);
|
||||||
--color-warning-base: hsla(43, 96%, 56%, 1);
|
--color-warning-base: oklch(0.83 0.164 84);
|
||||||
--color-warning-text-hover: hsla(26, 90%, 37%, 1);
|
--color-warning-text-hover: oklch(0.55 0.145 49);
|
||||||
--color-warning-bg: hsla(48, 100%, 96%, 1);
|
--color-warning-bg: oklch(0.99 0.022 95);
|
||||||
--color-warning-bg-hover: hsla(48, 96%, 89%, 1);
|
--color-warning-bg-hover: oklch(0.96 0.057 96);
|
||||||
--color-warning-active: hsla(32, 95%, 44%, 1);
|
--color-warning-active: oklch(0.67 0.159 58);
|
||||||
|
|
||||||
/* ==================== */
|
/* ==================== */
|
||||||
/* Spacing */
|
/* Spacing */
|
||||||
@ -341,17 +338,17 @@
|
|||||||
/* ==================== */
|
/* ==================== */
|
||||||
/* Radius */
|
/* Radius */
|
||||||
/* ==================== */
|
/* ==================== */
|
||||||
--radius-4xs: 4px;
|
--radius-4xs: 0.25rem; /* 4px */
|
||||||
--radius-3xs: 8px;
|
--radius-3xs: 0.5rem; /* 8px */
|
||||||
--radius-2xs: 12px;
|
--radius-2xs: 0.75rem; /* 12px */
|
||||||
--radius-xs: 16px;
|
--radius-xs: 1rem; /* 16px */
|
||||||
--radius-sm: 24px;
|
--radius-sm: 1.5rem; /* 24px */
|
||||||
--radius-md: 32px;
|
--radius-md: 2rem; /* 32px */
|
||||||
--radius-lg: 2.5rem;
|
--radius-lg: 2.5rem; /* 40px */
|
||||||
--radius-xl: 48px;
|
--radius-xl: 3rem; /* 48px */
|
||||||
--radius-2xl: 56px;
|
--radius-2xl: 3.5rem; /* 56px */
|
||||||
--radius-3xl: 64px;
|
--radius-3xl: 4rem; /* 64px */
|
||||||
--radius-round: 999px;
|
--radius-round: 999px; /* 完全圆角 */
|
||||||
|
|
||||||
/* ==================== */
|
/* ==================== */
|
||||||
/* Typography */
|
/* Typography */
|
||||||
@ -397,43 +394,43 @@
|
|||||||
/* ==================== */
|
/* ==================== */
|
||||||
@layer theme {
|
@layer theme {
|
||||||
.dark {
|
.dark {
|
||||||
--color-background: hsla(240, 6%, 10%, 1);
|
--color-background: oklch(0.21 0.006 286);
|
||||||
--color-background-subtle: hsla(0, 0%, 100%, 0.02);
|
--color-background-subtle: oklch(1 0 0 / 0.02);
|
||||||
--color-foreground: hsla(0, 0%, 100%, 0.9);
|
--color-foreground: oklch(1 0 0 / 0.9);
|
||||||
--color-foreground-secondary: hsla(0, 0%, 100%, 0.6);
|
--color-foreground-secondary: oklch(1 0 0 / 0.6);
|
||||||
--color-foreground-muted: hsla(0, 0%, 100%, 0.4);
|
--color-foreground-muted: oklch(1 0 0 / 0.4);
|
||||||
--color-card: hsla(0, 0%, 0%, 1);
|
--color-card: oklch(0 0 0);
|
||||||
--color-popover: hsla(0, 0%, 0%, 1);
|
--color-popover: oklch(0 0 0);
|
||||||
--color-border: hsla(0, 0%, 100%, 0.1);
|
--color-border: oklch(1 0 0 / 0.1);
|
||||||
--color-border-hover: hsla(0, 0%, 100%, 0.2);
|
--color-border-hover: oklch(1 0 0 / 0.2);
|
||||||
--color-border-active: hsla(0, 0%, 100%, 0.3);
|
--color-border-active: oklch(1 0 0 / 0.3);
|
||||||
--color-ring: hsla(84, 81%, 44%, 0.4);
|
--color-ring: oklch(0.76 0.204 131 / 0.4);
|
||||||
--color-secondary: hsla(0, 0%, 100%, 0.1);
|
--color-secondary: oklch(1 0 0 / 0.1);
|
||||||
--color-secondary-hover: hsla(0, 0%, 100%, 0.2);
|
--color-secondary-hover: oklch(1 0 0 / 0.2);
|
||||||
--color-secondary-active: hsla(0, 0%, 100%, 0.25);
|
--color-secondary-active: oklch(1 0 0 / 0.25);
|
||||||
--color-muted: hsla(0, 0%, 100%, 0.1);
|
--color-muted: oklch(1 0 0 / 0.1);
|
||||||
--color-accent: hsla(0, 0%, 100%, 0.1);
|
--color-accent: oklch(1 0 0 / 0.1);
|
||||||
--color-ghost-hover: hsla(0, 0%, 100%, 0.1);
|
--color-ghost-hover: oklch(1 0 0 / 0.1);
|
||||||
--color-ghost-active: hsla(0, 0%, 100%, 0.15);
|
--color-ghost-active: oklch(1 0 0 / 0.15);
|
||||||
--color-sidebar: hsla(0, 0%, 0%, 1);
|
--color-sidebar: oklch(0 0 0);
|
||||||
--color-sidebar-accent: hsla(0, 0%, 100%, 0.1);
|
--color-sidebar-accent: oklch(1 0 0 / 0.1);
|
||||||
--color-error-base: hsla(0, 91%, 71%, 1);
|
--color-error-base: oklch(0.71 0.166 22);
|
||||||
--color-error-text: hsla(0, 93%, 94%, 1);
|
--color-error-text: oklch(0.93 0.031 18);
|
||||||
--color-error-bg: hsla(0, 63%, 31%, 1);
|
--color-error-bg: oklch(0.4 0.135 26);
|
||||||
--color-error-text-hover: hsla(0, 96%, 89%, 1);
|
--color-error-text-hover: oklch(0.88 0.062 18);
|
||||||
--color-error-bg-hover: hsla(0, 70%, 35%, 1);
|
--color-error-bg-hover: oklch(0.44 0.16 27);
|
||||||
--color-error-border: hsla(0, 74%, 42%, 1);
|
--color-error-border: oklch(0.51 0.192 28);
|
||||||
--color-error-border-hover: hsla(0, 72%, 51%, 1);
|
--color-error-border-hover: oklch(0.58 0.214 27);
|
||||||
--color-error-active: hsla(0, 94%, 82%, 1);
|
--color-error-active: oklch(0.81 0.103 20);
|
||||||
--color-success-base: hsla(142, 69%, 58%, 1);
|
--color-success-base: oklch(0.8 0.182 152);
|
||||||
--color-success-text-hover: hsla(141, 79%, 85%, 1);
|
--color-success-text-hover: oklch(0.92 0.081 156);
|
||||||
--color-success-bg: hsla(144, 61%, 20%, 1);
|
--color-success-bg: oklch(0.39 0.089 153);
|
||||||
--color-success-bg-hover: hsla(143, 64%, 24%, 1);
|
--color-success-bg-hover: oklch(0.45 0.107 151);
|
||||||
--color-warning-base: hsla(43, 96%, 56%, 1);
|
--color-warning-base: oklch(0.83 0.164 84);
|
||||||
--color-warning-text-hover: hsla(48, 97%, 77%, 1);
|
--color-warning-text-hover: oklch(0.93 0.114 96);
|
||||||
--color-warning-bg: hsla(22, 78%, 26%, 1);
|
--color-warning-bg: oklch(0.41 0.104 46);
|
||||||
--color-warning-bg-hover: hsla(23, 83%, 31%, 1);
|
--color-warning-bg-hover: oklch(0.47 0.124 47);
|
||||||
--color-warning-active: hsla(32, 95%, 44%, 1);
|
--color-warning-active: oklch(0.67 0.159 58);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -5,305 +5,305 @@
|
|||||||
|
|
||||||
:root {
|
:root {
|
||||||
/* Neutral */
|
/* Neutral */
|
||||||
--cs-neutral-50: hsla(0, 0%, 98%, 1);
|
--cs-neutral-50: oklch(0.98 0 0);
|
||||||
--cs-neutral-100: hsla(0, 0%, 96%, 1);
|
--cs-neutral-100: oklch(0.97 0 0);
|
||||||
--cs-neutral-200: hsla(0, 0%, 90%, 1);
|
--cs-neutral-200: oklch(0.92 0 0);
|
||||||
--cs-neutral-300: hsla(0, 0%, 83%, 1);
|
--cs-neutral-300: oklch(0.87 0 0);
|
||||||
--cs-neutral-400: hsla(0, 0%, 64%, 1);
|
--cs-neutral-400: oklch(0.72 0 0);
|
||||||
--cs-neutral-500: hsla(0, 0%, 45%, 1);
|
--cs-neutral-500: oklch(0.55 0 0);
|
||||||
--cs-neutral-600: hsla(215, 14%, 34%, 1);
|
--cs-neutral-600: oklch(0.44 0.027 257);
|
||||||
--cs-neutral-700: hsla(0, 0%, 25%, 1);
|
--cs-neutral-700: oklch(0.37 0 0);
|
||||||
--cs-neutral-800: hsla(0, 0%, 15%, 1);
|
--cs-neutral-800: oklch(0.27 0 0);
|
||||||
--cs-neutral-900: hsla(0, 0%, 9%, 1);
|
--cs-neutral-900: oklch(0.2 0 0);
|
||||||
--cs-neutral-950: hsla(0, 0%, 4%, 1);
|
--cs-neutral-950: oklch(0.15 0 0);
|
||||||
|
|
||||||
/* Stone */
|
/* Stone */
|
||||||
--cs-stone-50: hsla(60, 9%, 98%, 1);
|
--cs-stone-50: oklch(0.99 0.001 106);
|
||||||
--cs-stone-100: hsla(60, 5%, 96%, 1);
|
--cs-stone-100: oklch(0.97 0.001 106);
|
||||||
--cs-stone-200: hsla(20, 6%, 90%, 1);
|
--cs-stone-200: oklch(0.92 0.003 49);
|
||||||
--cs-stone-300: hsla(24, 6%, 83%, 1);
|
--cs-stone-300: oklch(0.87 0.004 56);
|
||||||
--cs-stone-400: hsla(24, 5%, 64%, 1);
|
--cs-stone-400: oklch(0.72 0.008 56);
|
||||||
--cs-stone-500: hsla(25, 5%, 45%, 1);
|
--cs-stone-500: oklch(0.56 0.011 58);
|
||||||
--cs-stone-600: hsla(33, 5%, 32%, 1);
|
--cs-stone-600: oklch(0.44 0.009 73);
|
||||||
--cs-stone-700: hsla(30, 6%, 25%, 1);
|
--cs-stone-700: oklch(0.37 0.008 68);
|
||||||
--cs-stone-800: hsla(12, 6%, 15%, 1);
|
--cs-stone-800: oklch(0.27 0.006 34);
|
||||||
--cs-stone-900: hsla(24, 10%, 10%, 1);
|
--cs-stone-900: oklch(0.22 0.006 56);
|
||||||
--cs-stone-950: hsla(20, 14%, 4%, 1);
|
--cs-stone-950: oklch(0.15 0.004 50);
|
||||||
|
|
||||||
/* Zinc */
|
/* Zinc */
|
||||||
--cs-zinc-50: hsla(0, 0%, 98%, 1);
|
--cs-zinc-50: oklch(0.98 0 0);
|
||||||
--cs-zinc-100: hsla(240, 5%, 96%, 1);
|
--cs-zinc-100: oklch(0.97 0.001 286);
|
||||||
--cs-zinc-200: hsla(240, 6%, 90%, 1);
|
--cs-zinc-200: oklch(0.92 0.004 286);
|
||||||
--cs-zinc-300: hsla(240, 5%, 84%, 1);
|
--cs-zinc-300: oklch(0.87 0.006 286);
|
||||||
--cs-zinc-400: hsla(240, 5%, 65%, 1);
|
--cs-zinc-400: oklch(0.71 0.013 286);
|
||||||
--cs-zinc-500: hsla(240, 4%, 46%, 1);
|
--cs-zinc-500: oklch(0.55 0.014 286);
|
||||||
--cs-zinc-600: hsla(240, 5%, 34%, 1);
|
--cs-zinc-600: oklch(0.44 0.014 286);
|
||||||
--cs-zinc-700: hsla(240, 5%, 26%, 1);
|
--cs-zinc-700: oklch(0.37 0.011 286);
|
||||||
--cs-zinc-800: hsla(240, 4%, 16%, 1);
|
--cs-zinc-800: oklch(0.27 0.006 286);
|
||||||
--cs-zinc-900: hsla(240, 6%, 10%, 1);
|
--cs-zinc-900: oklch(0.21 0.006 286);
|
||||||
--cs-zinc-950: hsla(240, 10%, 4%, 1);
|
--cs-zinc-950: oklch(0.14 0.004 286);
|
||||||
|
|
||||||
/* Slate */
|
/* Slate */
|
||||||
--cs-slate-50: hsla(210, 40%, 98%, 1);
|
--cs-slate-50: oklch(0.98 0.003 248);
|
||||||
--cs-slate-100: hsla(210, 40%, 96%, 1);
|
--cs-slate-100: oklch(0.97 0.007 248);
|
||||||
--cs-slate-200: hsla(214, 32%, 91%, 1);
|
--cs-slate-200: oklch(0.93 0.013 255);
|
||||||
--cs-slate-300: hsla(213, 27%, 84%, 1);
|
--cs-slate-300: oklch(0.87 0.02 253);
|
||||||
--cs-slate-400: hsla(215, 20%, 65%, 1);
|
--cs-slate-400: oklch(0.71 0.035 257);
|
||||||
--cs-slate-500: hsla(215, 16%, 47%, 1);
|
--cs-slate-500: oklch(0.56 0.04 257);
|
||||||
--cs-slate-600: hsla(215, 19%, 35%, 1);
|
--cs-slate-600: oklch(0.45 0.037 257);
|
||||||
--cs-slate-700: hsla(215, 25%, 27%, 1);
|
--cs-slate-700: oklch(0.38 0.039 257);
|
||||||
--cs-slate-800: hsla(217, 33%, 17%, 1);
|
--cs-slate-800: oklch(0.28 0.036 260);
|
||||||
--cs-slate-900: hsla(222, 47%, 11%, 1);
|
--cs-slate-900: oklch(0.21 0.039 266);
|
||||||
--cs-slate-950: hsla(229, 84%, 5%, 1);
|
--cs-slate-950: oklch(0.13 0.042 265);
|
||||||
|
|
||||||
/* Gray */
|
/* Gray */
|
||||||
--cs-gray-50: hsla(210, 20%, 98%, 1);
|
--cs-gray-50: oklch(0.98 0.002 248);
|
||||||
--cs-gray-100: hsla(220, 14%, 96%, 1);
|
--cs-gray-100: oklch(0.97 0.003 265);
|
||||||
--cs-gray-200: hsla(220, 13%, 91%, 1);
|
--cs-gray-200: oklch(0.93 0.006 265);
|
||||||
--cs-gray-300: hsla(216, 12%, 84%, 1);
|
--cs-gray-300: oklch(0.87 0.009 258);
|
||||||
--cs-gray-400: hsla(218, 11%, 65%, 1);
|
--cs-gray-400: oklch(0.71 0.02 261);
|
||||||
--cs-gray-500: hsla(220, 9%, 46%, 1);
|
--cs-gray-500: oklch(0.55 0.023 264);
|
||||||
--cs-gray-600: hsla(0, 0%, 32%, 1);
|
--cs-gray-600: oklch(0.44 0 0);
|
||||||
--cs-gray-700: hsla(217, 19%, 27%, 1);
|
--cs-gray-700: oklch(0.38 0.031 260);
|
||||||
--cs-gray-800: hsla(215, 28%, 17%, 1);
|
--cs-gray-800: oklch(0.28 0.03 257);
|
||||||
--cs-gray-900: hsla(221, 39%, 11%, 1);
|
--cs-gray-900: oklch(0.21 0.032 265);
|
||||||
--cs-gray-950: hsla(224, 71%, 4%, 1);
|
--cs-gray-950: oklch(0.13 0.027 262);
|
||||||
|
|
||||||
/* Red */
|
/* Red */
|
||||||
--cs-red-50: hsla(0, 86%, 97%, 1);
|
--cs-red-50: oklch(0.97 0.014 17);
|
||||||
--cs-red-100: hsla(0, 93%, 94%, 1);
|
--cs-red-100: oklch(0.93 0.031 18);
|
||||||
--cs-red-200: hsla(0, 96%, 89%, 1);
|
--cs-red-200: oklch(0.88 0.062 18);
|
||||||
--cs-red-300: hsla(0, 94%, 82%, 1);
|
--cs-red-300: oklch(0.81 0.103 20);
|
||||||
--cs-red-400: hsla(0, 91%, 71%, 1);
|
--cs-red-400: oklch(0.71 0.166 22);
|
||||||
--cs-red-500: hsla(0, 84%, 60%, 1);
|
--cs-red-500: oklch(0.64 0.208 25);
|
||||||
--cs-red-600: hsla(0, 72%, 51%, 1);
|
--cs-red-600: oklch(0.58 0.214 27);
|
||||||
--cs-red-700: hsla(0, 74%, 42%, 1);
|
--cs-red-700: oklch(0.51 0.192 28);
|
||||||
--cs-red-800: hsla(0, 70%, 35%, 1);
|
--cs-red-800: oklch(0.44 0.16 27);
|
||||||
--cs-red-900: hsla(0, 63%, 31%, 1);
|
--cs-red-900: oklch(0.4 0.135 26);
|
||||||
--cs-red-950: hsla(0, 75%, 15%, 1);
|
--cs-red-950: oklch(0.25 0.087 26);
|
||||||
|
|
||||||
/* Orange */
|
/* Orange */
|
||||||
--cs-orange-50: hsla(33, 100%, 96%, 1);
|
--cs-orange-50: oklch(0.98 0.018 73);
|
||||||
--cs-orange-100: hsla(34, 100%, 92%, 1);
|
--cs-orange-100: oklch(0.96 0.036 75);
|
||||||
--cs-orange-200: hsla(32, 98%, 83%, 1);
|
--cs-orange-200: oklch(0.9 0.074 70);
|
||||||
--cs-orange-300: hsla(31, 97%, 72%, 1);
|
--cs-orange-300: oklch(0.84 0.118 67);
|
||||||
--cs-orange-400: hsla(27, 96%, 61%, 1);
|
--cs-orange-400: oklch(0.76 0.159 56);
|
||||||
--cs-orange-500: hsla(25, 95%, 53%, 1);
|
--cs-orange-500: oklch(0.71 0.186 48);
|
||||||
--cs-orange-600: hsla(21, 90%, 48%, 1);
|
--cs-orange-600: oklch(0.65 0.192 42);
|
||||||
--cs-orange-700: hsla(17, 88%, 40%, 1);
|
--cs-orange-700: oklch(0.55 0.173 38);
|
||||||
--cs-orange-800: hsla(15, 79%, 34%, 1);
|
--cs-orange-800: oklch(0.47 0.144 37);
|
||||||
--cs-orange-900: hsla(15, 75%, 28%, 1);
|
--cs-orange-900: oklch(0.41 0.118 38);
|
||||||
--cs-orange-950: hsla(13, 81%, 15%, 1);
|
--cs-orange-950: oklch(0.27 0.078 36);
|
||||||
|
|
||||||
/* Amber */
|
/* Amber */
|
||||||
--cs-amber-50: hsla(48, 100%, 96%, 1);
|
--cs-amber-50: oklch(0.99 0.022 95);
|
||||||
--cs-amber-100: hsla(48, 96%, 89%, 1);
|
--cs-amber-100: oklch(0.96 0.057 96);
|
||||||
--cs-amber-200: hsla(48, 97%, 77%, 1);
|
--cs-amber-200: oklch(0.93 0.114 96);
|
||||||
--cs-amber-300: hsla(46, 97%, 65%, 1);
|
--cs-amber-300: oklch(0.88 0.153 92);
|
||||||
--cs-amber-400: hsla(43, 96%, 56%, 1);
|
--cs-amber-400: oklch(0.83 0.164 84);
|
||||||
--cs-amber-500: hsla(38, 92%, 50%, 1);
|
--cs-amber-500: oklch(0.77 0.165 71);
|
||||||
--cs-amber-600: hsla(32, 95%, 44%, 1);
|
--cs-amber-600: oklch(0.67 0.159 58);
|
||||||
--cs-amber-700: hsla(26, 90%, 37%, 1);
|
--cs-amber-700: oklch(0.55 0.145 49);
|
||||||
--cs-amber-800: hsla(23, 83%, 31%, 1);
|
--cs-amber-800: oklch(0.47 0.124 47);
|
||||||
--cs-amber-900: hsla(22, 78%, 26%, 1);
|
--cs-amber-900: oklch(0.41 0.104 46);
|
||||||
--cs-amber-950: hsla(21, 92%, 14%, 1);
|
--cs-amber-950: oklch(0.28 0.074 46);
|
||||||
|
|
||||||
/* Yellow */
|
/* Yellow */
|
||||||
--cs-yellow-50: hsla(55, 92%, 95%, 1);
|
--cs-yellow-50: oklch(0.99 0.028 103);
|
||||||
--cs-yellow-100: hsla(55, 97%, 88%, 1);
|
--cs-yellow-100: oklch(0.97 0.07 103);
|
||||||
--cs-yellow-200: hsla(53, 98%, 77%, 1);
|
--cs-yellow-200: oklch(0.95 0.124 102);
|
||||||
--cs-yellow-300: hsla(50, 98%, 64%, 1);
|
--cs-yellow-300: oklch(0.9 0.164 98);
|
||||||
--cs-yellow-400: hsla(48, 96%, 53%, 1);
|
--cs-yellow-400: oklch(0.86 0.173 92);
|
||||||
--cs-yellow-500: hsla(45, 93%, 47%, 1);
|
--cs-yellow-500: oklch(0.79 0.16 85);
|
||||||
--cs-yellow-600: hsla(41, 96%, 40%, 1);
|
--cs-yellow-600: oklch(0.68 0.141 77);
|
||||||
--cs-yellow-700: hsla(35, 92%, 33%, 1);
|
--cs-yellow-700: oklch(0.55 0.121 65);
|
||||||
--cs-yellow-800: hsla(32, 81%, 29%, 1);
|
--cs-yellow-800: oklch(0.48 0.104 62);
|
||||||
--cs-yellow-900: hsla(28, 73%, 26%, 1);
|
--cs-yellow-900: oklch(0.42 0.091 57);
|
||||||
--cs-yellow-950: hsla(26, 83%, 14%, 1);
|
--cs-yellow-950: oklch(0.28 0.063 54);
|
||||||
|
|
||||||
/* Lime (品牌主色) */
|
/* Lime (品牌主色) */
|
||||||
--cs-lime-50: hsla(78, 92%, 95%, 1);
|
--cs-lime-50: oklch(0.99 0.032 121);
|
||||||
--cs-lime-100: hsla(80, 89%, 89%, 1);
|
--cs-lime-100: oklch(0.97 0.067 123);
|
||||||
--cs-lime-200: hsla(81, 88%, 80%, 1);
|
--cs-lime-200: oklch(0.94 0.119 124);
|
||||||
--cs-lime-300: hsla(82, 85%, 67%, 1);
|
--cs-lime-300: oklch(0.9 0.18 127);
|
||||||
--cs-lime-400: hsla(83, 78%, 55%, 1);
|
--cs-lime-400: oklch(0.85 0.209 129);
|
||||||
--cs-lime-500: hsla(84, 81%, 44%, 1);
|
--cs-lime-500: oklch(0.76 0.204 131);
|
||||||
--cs-lime-600: hsla(85, 85%, 35%, 1);
|
--cs-lime-600: oklch(0.65 0.177 132);
|
||||||
--cs-lime-700: hsla(86, 78%, 27%, 1);
|
--cs-lime-700: oklch(0.53 0.139 132);
|
||||||
--cs-lime-800: hsla(86, 69%, 23%, 1);
|
--cs-lime-800: oklch(0.46 0.114 131);
|
||||||
--cs-lime-900: hsla(88, 61%, 20%, 1);
|
--cs-lime-900: oklch(0.4 0.095 131);
|
||||||
--cs-lime-950: hsla(89, 80%, 10%, 1);
|
--cs-lime-950: oklch(0.27 0.068 132);
|
||||||
|
|
||||||
/* Green */
|
/* Green */
|
||||||
--cs-green-50: hsla(138, 76%, 97%, 1);
|
--cs-green-50: oklch(0.98 0.016 156);
|
||||||
--cs-green-100: hsla(141, 84%, 93%, 1);
|
--cs-green-100: oklch(0.96 0.041 157);
|
||||||
--cs-green-200: hsla(141, 79%, 85%, 1);
|
--cs-green-200: oklch(0.92 0.081 156);
|
||||||
--cs-green-300: hsla(142, 77%, 73%, 1);
|
--cs-green-300: oklch(0.87 0.137 155);
|
||||||
--cs-green-400: hsla(142, 69%, 58%, 1);
|
--cs-green-400: oklch(0.8 0.182 152);
|
||||||
--cs-green-500: hsla(142, 71%, 45%, 1);
|
--cs-green-500: oklch(0.72 0.192 149);
|
||||||
--cs-green-600: hsla(142, 76%, 36%, 1);
|
--cs-green-600: oklch(0.62 0.169 149);
|
||||||
--cs-green-700: hsla(142, 72%, 29%, 1);
|
--cs-green-700: oklch(0.52 0.137 150);
|
||||||
--cs-green-800: hsla(143, 64%, 24%, 1);
|
--cs-green-800: oklch(0.45 0.107 151);
|
||||||
--cs-green-900: hsla(144, 61%, 20%, 1);
|
--cs-green-900: oklch(0.39 0.089 153);
|
||||||
--cs-green-950: hsla(145, 80%, 10%, 1);
|
--cs-green-950: oklch(0.27 0.063 153);
|
||||||
|
|
||||||
/* Emerald */
|
/* Emerald */
|
||||||
--cs-emerald-50: hsla(152, 81%, 96%, 1);
|
--cs-emerald-50: oklch(0.98 0.02 166);
|
||||||
--cs-emerald-100: hsla(149, 80%, 90%, 1);
|
--cs-emerald-100: oklch(0.95 0.051 163);
|
||||||
--cs-emerald-200: hsla(152, 76%, 80%, 1);
|
--cs-emerald-200: oklch(0.9 0.092 164);
|
||||||
--cs-emerald-300: hsla(156, 72%, 67%, 1);
|
--cs-emerald-300: oklch(0.85 0.13 165);
|
||||||
--cs-emerald-400: hsla(158, 64%, 52%, 1);
|
--cs-emerald-400: oklch(0.77 0.152 163);
|
||||||
--cs-emerald-500: hsla(160, 84%, 39%, 1);
|
--cs-emerald-500: oklch(0.69 0.148 162);
|
||||||
--cs-emerald-600: hsla(161, 94%, 30%, 1);
|
--cs-emerald-600: oklch(0.59 0.127 163);
|
||||||
--cs-emerald-700: hsla(163, 94%, 24%, 1);
|
--cs-emerald-700: oklch(0.5 0.104 166);
|
||||||
--cs-emerald-800: hsla(163, 88%, 20%, 1);
|
--cs-emerald-800: oklch(0.43 0.087 167);
|
||||||
--cs-emerald-900: hsla(164, 86%, 16%, 1);
|
--cs-emerald-900: oklch(0.37 0.072 169);
|
||||||
--cs-emerald-950: hsla(166, 91%, 9%, 1);
|
--cs-emerald-950: oklch(0.26 0.048 173);
|
||||||
|
|
||||||
/* Teal */
|
/* Teal */
|
||||||
--cs-teal-50: hsla(166, 76%, 97%, 1);
|
--cs-teal-50: oklch(0.99 0.013 181);
|
||||||
--cs-teal-100: hsla(167, 85%, 89%, 1);
|
--cs-teal-100: oklch(0.95 0.051 181);
|
||||||
--cs-teal-200: hsla(168, 84%, 78%, 1);
|
--cs-teal-200: oklch(0.91 0.094 180);
|
||||||
--cs-teal-300: hsla(171, 77%, 64%, 1);
|
--cs-teal-300: oklch(0.85 0.125 182);
|
||||||
--cs-teal-400: hsla(172, 66%, 50%, 1);
|
--cs-teal-400: oklch(0.78 0.133 181);
|
||||||
--cs-teal-500: hsla(173, 80%, 40%, 1);
|
--cs-teal-500: oklch(0.7 0.123 182);
|
||||||
--cs-teal-600: hsla(175, 84%, 32%, 1);
|
--cs-teal-600: oklch(0.61 0.105 185);
|
||||||
--cs-teal-700: hsla(175, 77%, 26%, 1);
|
--cs-teal-700: oklch(0.51 0.086 186);
|
||||||
--cs-teal-800: hsla(176, 69%, 22%, 1);
|
--cs-teal-800: oklch(0.44 0.071 188);
|
||||||
--cs-teal-900: hsla(176, 61%, 19%, 1);
|
--cs-teal-900: oklch(0.39 0.059 189);
|
||||||
--cs-teal-950: hsla(179, 84%, 10%, 1);
|
--cs-teal-950: oklch(0.28 0.045 193);
|
||||||
|
|
||||||
/* Cyan */
|
/* Cyan */
|
||||||
--cs-cyan-50: hsla(183, 100%, 96%, 1);
|
--cs-cyan-50: oklch(0.98 0.02 201);
|
||||||
--cs-cyan-100: hsla(185, 96%, 90%, 1);
|
--cs-cyan-100: oklch(0.95 0.046 203);
|
||||||
--cs-cyan-200: hsla(186, 94%, 82%, 1);
|
--cs-cyan-200: oklch(0.92 0.077 205);
|
||||||
--cs-cyan-300: hsla(187, 92%, 69%, 1);
|
--cs-cyan-300: oklch(0.86 0.115 207);
|
||||||
--cs-cyan-400: hsla(188, 86%, 53%, 1);
|
--cs-cyan-400: oklch(0.8 0.134 212);
|
||||||
--cs-cyan-500: hsla(189, 94%, 43%, 1);
|
--cs-cyan-500: oklch(0.71 0.126 216);
|
||||||
--cs-cyan-600: hsla(192, 91%, 36%, 1);
|
--cs-cyan-600: oklch(0.6 0.11 222);
|
||||||
--cs-cyan-700: hsla(193, 82%, 31%, 1);
|
--cs-cyan-700: oklch(0.52 0.093 223);
|
||||||
--cs-cyan-800: hsla(194, 70%, 27%, 1);
|
--cs-cyan-800: oklch(0.45 0.077 224);
|
||||||
--cs-cyan-900: hsla(196, 64%, 24%, 1);
|
--cs-cyan-900: oklch(0.4 0.067 227);
|
||||||
--cs-cyan-950: hsla(197, 79%, 15%, 1);
|
--cs-cyan-950: oklch(0.3 0.054 230);
|
||||||
|
|
||||||
/* Sky */
|
/* Sky */
|
||||||
--cs-sky-50: hsla(204, 100%, 97%, 1);
|
--cs-sky-50: oklch(0.98 0.013 237);
|
||||||
--cs-sky-100: hsla(204, 94%, 94%, 1);
|
--cs-sky-100: oklch(0.95 0.024 237);
|
||||||
--cs-sky-200: hsla(201, 94%, 86%, 1);
|
--cs-sky-200: oklch(0.9 0.056 232);
|
||||||
--cs-sky-300: hsla(199, 95%, 74%, 1);
|
--cs-sky-300: oklch(0.83 0.1 230);
|
||||||
--cs-sky-400: hsla(198, 93%, 60%, 1);
|
--cs-sky-400: oklch(0.76 0.137 232);
|
||||||
--cs-sky-500: hsla(199, 89%, 48%, 1);
|
--cs-sky-500: oklch(0.68 0.148 238);
|
||||||
--cs-sky-600: hsla(200, 98%, 39%, 1);
|
--cs-sky-600: oklch(0.59 0.137 241);
|
||||||
--cs-sky-700: hsla(201, 96%, 32%, 1);
|
--cs-sky-700: oklch(0.5 0.118 242);
|
||||||
--cs-sky-800: hsla(201, 90%, 27%, 1);
|
--cs-sky-800: oklch(0.44 0.099 241);
|
||||||
--cs-sky-900: hsla(202, 80%, 24%, 1);
|
--cs-sky-900: oklch(0.39 0.084 241);
|
||||||
--cs-sky-950: hsla(204, 80%, 16%, 1);
|
--cs-sky-950: oklch(0.29 0.063 243);
|
||||||
|
|
||||||
/* Blue */
|
/* Blue */
|
||||||
--cs-blue-50: hsla(214, 100%, 97%, 1);
|
--cs-blue-50: oklch(0.97 0.014 255);
|
||||||
--cs-blue-100: hsla(214, 95%, 93%, 1);
|
--cs-blue-100: oklch(0.93 0.03 255);
|
||||||
--cs-blue-200: hsla(213, 97%, 87%, 1);
|
--cs-blue-200: oklch(0.88 0.058 254);
|
||||||
--cs-blue-300: hsla(212, 96%, 78%, 1);
|
--cs-blue-300: oklch(0.8 0.098 252);
|
||||||
--cs-blue-400: hsla(213, 94%, 68%, 1);
|
--cs-blue-400: oklch(0.72 0.143 254);
|
||||||
--cs-blue-500: hsla(217, 91%, 60%, 1);
|
--cs-blue-500: oklch(0.63 0.186 260);
|
||||||
--cs-blue-600: hsla(221, 83%, 53%, 1);
|
--cs-blue-600: oklch(0.54 0.215 263);
|
||||||
--cs-blue-700: hsla(224, 76%, 48%, 1);
|
--cs-blue-700: oklch(0.49 0.215 264);
|
||||||
--cs-blue-800: hsla(226, 71%, 40%, 1);
|
--cs-blue-800: oklch(0.42 0.181 266);
|
||||||
--cs-blue-900: hsla(224, 64%, 33%, 1);
|
--cs-blue-900: oklch(0.38 0.136 265);
|
||||||
--cs-blue-950: hsla(226, 57%, 21%, 1);
|
--cs-blue-950: oklch(0.28 0.087 268);
|
||||||
|
|
||||||
/* Indigo */
|
/* Indigo */
|
||||||
--cs-indigo-50: hsla(226, 100%, 97%, 1);
|
--cs-indigo-50: oklch(0.97 0.016 272);
|
||||||
--cs-indigo-100: hsla(226, 100%, 94%, 1);
|
--cs-indigo-100: oklch(0.93 0.033 272);
|
||||||
--cs-indigo-200: hsla(228, 96%, 89%, 1);
|
--cs-indigo-200: oklch(0.87 0.061 274);
|
||||||
--cs-indigo-300: hsla(230, 94%, 82%, 1);
|
--cs-indigo-300: oklch(0.79 0.104 275);
|
||||||
--cs-indigo-400: hsla(234, 89%, 74%, 1);
|
--cs-indigo-400: oklch(0.68 0.156 277);
|
||||||
--cs-indigo-500: hsla(239, 84%, 67%, 1);
|
--cs-indigo-500: oklch(0.59 0.204 277);
|
||||||
--cs-indigo-600: hsla(243, 75%, 59%, 1);
|
--cs-indigo-600: oklch(0.51 0.228 277);
|
||||||
--cs-indigo-700: hsla(245, 58%, 51%, 1);
|
--cs-indigo-700: oklch(0.46 0.213 278);
|
||||||
--cs-indigo-800: hsla(244, 55%, 41%, 1);
|
--cs-indigo-800: oklch(0.4 0.177 278);
|
||||||
--cs-indigo-900: hsla(242, 47%, 34%, 1);
|
--cs-indigo-900: oklch(0.36 0.133 279);
|
||||||
--cs-indigo-950: hsla(244, 47%, 20%, 1);
|
--cs-indigo-950: oklch(0.26 0.086 282);
|
||||||
|
|
||||||
/* Violet */
|
/* Violet */
|
||||||
--cs-violet-50: hsla(250, 100%, 98%, 1);
|
--cs-violet-50: oklch(0.97 0.014 294);
|
||||||
--cs-violet-100: hsla(251, 91%, 95%, 1);
|
--cs-violet-100: oklch(0.94 0.031 294);
|
||||||
--cs-violet-200: hsla(251, 95%, 92%, 1);
|
--cs-violet-200: oklch(0.9 0.053 294);
|
||||||
--cs-violet-300: hsla(253, 95%, 85%, 1);
|
--cs-violet-300: oklch(0.81 0.102 294);
|
||||||
--cs-violet-400: hsla(255, 92%, 76%, 1);
|
--cs-violet-400: oklch(0.71 0.161 293);
|
||||||
--cs-violet-500: hsla(258, 90%, 66%, 1);
|
--cs-violet-500: oklch(0.6 0.221 292);
|
||||||
--cs-violet-600: hsla(262, 83%, 58%, 1);
|
--cs-violet-600: oklch(0.54 0.245 293);
|
||||||
--cs-violet-700: hsla(263, 70%, 50%, 1);
|
--cs-violet-700: oklch(0.49 0.242 292);
|
||||||
--cs-violet-800: hsla(263, 69%, 42%, 1);
|
--cs-violet-800: oklch(0.43 0.209 292);
|
||||||
--cs-violet-900: hsla(264, 67%, 35%, 1);
|
--cs-violet-900: oklch(0.38 0.178 294);
|
||||||
--cs-violet-950: hsla(262, 78%, 23%, 1);
|
--cs-violet-950: oklch(0.28 0.142 291);
|
||||||
|
|
||||||
/* Purple */
|
/* Purple */
|
||||||
--cs-purple-50: hsla(270, 100%, 98%, 1);
|
--cs-purple-50: oklch(0.98 0.014 308);
|
||||||
--cs-purple-100: hsla(269, 100%, 95%, 1);
|
--cs-purple-100: oklch(0.94 0.036 307);
|
||||||
--cs-purple-200: hsla(269, 100%, 92%, 1);
|
--cs-purple-200: oklch(0.91 0.059 307);
|
||||||
--cs-purple-300: hsla(269, 97%, 85%, 1);
|
--cs-purple-300: oklch(0.83 0.108 306);
|
||||||
--cs-purple-400: hsla(270, 95%, 75%, 1);
|
--cs-purple-400: oklch(0.72 0.178 305);
|
||||||
--cs-purple-500: hsla(271, 91%, 65%, 1);
|
--cs-purple-500: oklch(0.63 0.233 304);
|
||||||
--cs-purple-600: hsla(271, 81%, 56%, 1);
|
--cs-purple-600: oklch(0.56 0.251 302);
|
||||||
--cs-purple-700: hsla(272, 72%, 47%, 1);
|
--cs-purple-700: oklch(0.49 0.237 302);
|
||||||
--cs-purple-800: hsla(273, 67%, 39%, 1);
|
--cs-purple-800: oklch(0.44 0.196 304);
|
||||||
--cs-purple-900: hsla(274, 66%, 32%, 1);
|
--cs-purple-900: oklch(0.38 0.167 305);
|
||||||
--cs-purple-950: hsla(274, 87%, 21%, 1);
|
--cs-purple-950: oklch(0.29 0.144 303);
|
||||||
|
|
||||||
/* Fuchsia */
|
/* Fuchsia */
|
||||||
--cs-fuchsia-50: hsla(289, 100%, 98%, 1);
|
--cs-fuchsia-50: oklch(0.98 0.016 320);
|
||||||
--cs-fuchsia-100: hsla(287, 100%, 95%, 1);
|
--cs-fuchsia-100: oklch(0.95 0.04 319);
|
||||||
--cs-fuchsia-200: hsla(288, 96%, 91%, 1);
|
--cs-fuchsia-200: oklch(0.91 0.07 319);
|
||||||
--cs-fuchsia-300: hsla(291, 93%, 83%, 1);
|
--cs-fuchsia-300: oklch(0.83 0.132 321);
|
||||||
--cs-fuchsia-400: hsla(292, 91%, 73%, 1);
|
--cs-fuchsia-400: oklch(0.75 0.203 322);
|
||||||
--cs-fuchsia-500: hsla(292, 84%, 61%, 1);
|
--cs-fuchsia-500: oklch(0.67 0.257 322);
|
||||||
--cs-fuchsia-600: hsla(293, 69%, 49%, 1);
|
--cs-fuchsia-600: oklch(0.59 0.256 323);
|
||||||
--cs-fuchsia-700: hsla(295, 72%, 40%, 1);
|
--cs-fuchsia-700: oklch(0.52 0.226 324);
|
||||||
--cs-fuchsia-800: hsla(295, 70%, 33%, 1);
|
--cs-fuchsia-800: oklch(0.45 0.192 324);
|
||||||
--cs-fuchsia-900: hsla(297, 64%, 28%, 1);
|
--cs-fuchsia-900: oklch(0.4 0.161 326);
|
||||||
--cs-fuchsia-950: hsla(297, 90%, 16%, 1);
|
--cs-fuchsia-950: oklch(0.29 0.13 326);
|
||||||
|
|
||||||
/* Pink */
|
/* Pink */
|
||||||
--cs-pink-50: hsla(327, 73%, 97%, 1);
|
--cs-pink-50: oklch(0.97 0.014 343);
|
||||||
--cs-pink-100: hsla(326, 78%, 95%, 1);
|
--cs-pink-100: oklch(0.95 0.026 342);
|
||||||
--cs-pink-200: hsla(326, 85%, 90%, 1);
|
--cs-pink-200: oklch(0.9 0.058 343);
|
||||||
--cs-pink-300: hsla(327, 87%, 82%, 1);
|
--cs-pink-300: oklch(0.83 0.108 346);
|
||||||
--cs-pink-400: hsla(329, 86%, 70%, 1);
|
--cs-pink-400: oklch(0.72 0.177 350);
|
||||||
--cs-pink-500: hsla(330, 81%, 60%, 1);
|
--cs-pink-500: oklch(0.65 0.213 354);
|
||||||
--cs-pink-600: hsla(333, 71%, 51%, 1);
|
--cs-pink-600: oklch(0.59 0.217 360);
|
||||||
--cs-pink-700: hsla(335, 78%, 42%, 1);
|
--cs-pink-700: oklch(0.53 0.2 4);
|
||||||
--cs-pink-800: hsla(336, 74%, 35%, 1);
|
--cs-pink-800: oklch(0.46 0.168 4);
|
||||||
--cs-pink-900: hsla(336, 69%, 30%, 1);
|
--cs-pink-900: oklch(0.4 0.143 3);
|
||||||
--cs-pink-950: hsla(336, 84%, 17%, 1);
|
--cs-pink-950: oklch(0.28 0.105 4);
|
||||||
|
|
||||||
/* Rose */
|
/* Rose */
|
||||||
--cs-rose-50: hsla(356, 100%, 97%, 1);
|
--cs-rose-50: oklch(0.97 0.017 13);
|
||||||
--cs-rose-100: hsla(356, 100%, 95%, 1);
|
--cs-rose-100: oklch(0.94 0.028 13);
|
||||||
--cs-rose-200: hsla(353, 96%, 90%, 1);
|
--cs-rose-200: oklch(0.89 0.056 10);
|
||||||
--cs-rose-300: hsla(353, 96%, 82%, 1);
|
--cs-rose-300: oklch(0.81 0.105 12);
|
||||||
--cs-rose-400: hsla(351, 95%, 71%, 1);
|
--cs-rose-400: oklch(0.72 0.172 13);
|
||||||
--cs-rose-500: hsla(350, 89%, 60%, 1);
|
--cs-rose-500: oklch(0.64 0.216 17);
|
||||||
--cs-rose-600: hsla(347, 77%, 50%, 1);
|
--cs-rose-600: oklch(0.59 0.222 18);
|
||||||
--cs-rose-700: hsla(345, 83%, 41%, 1);
|
--cs-rose-700: oklch(0.52 0.199 17);
|
||||||
--cs-rose-800: hsla(343, 80%, 35%, 1);
|
--cs-rose-800: oklch(0.46 0.173 13);
|
||||||
--cs-rose-900: hsla(342, 75%, 30%, 1);
|
--cs-rose-900: oklch(0.41 0.148 11);
|
||||||
--cs-rose-950: hsla(343, 88%, 16%, 1);
|
--cs-rose-950: oklch(0.27 0.102 12);
|
||||||
|
|
||||||
/* Black & White */
|
/* Black & White */
|
||||||
--cs-black: hsla(0, 0%, 0%, 1);
|
--cs-black: oklch(0 0 0);
|
||||||
--cs-white: hsla(0, 0%, 100%, 1);
|
--cs-white: oklch(1 0 0);
|
||||||
|
|
||||||
/* Brand (Cherry Studio 品牌专属色) */
|
/* Brand (Cherry Studio 品牌专属色) */
|
||||||
--cs-brand-50: hsla(132, 64%, 97%, 1);
|
--cs-brand-50: oklch(0.98 0.015 152);
|
||||||
--cs-brand-100: hsla(132, 64%, 93%, 1);
|
--cs-brand-100: oklch(0.96 0.034 151);
|
||||||
--cs-brand-200: hsla(132, 64%, 85%, 1);
|
--cs-brand-200: oklch(0.91 0.073 151);
|
||||||
--cs-brand-300: hsla(132, 64%, 73%, 1);
|
--cs-brand-300: oklch(0.85 0.13 149);
|
||||||
--cs-brand-400: hsla(132, 64%, 63%, 1);
|
--cs-brand-400: oklch(0.81 0.173 148);
|
||||||
--cs-brand-500: hsla(132, 64%, 53%, 1);
|
--cs-brand-500: oklch(0.77 0.208 146);
|
||||||
--cs-brand-600: hsla(132, 64%, 43%, 1);
|
--cs-brand-600: oklch(0.67 0.192 146);
|
||||||
--cs-brand-700: hsla(132, 64%, 33%, 1);
|
--cs-brand-700: oklch(0.56 0.156 146);
|
||||||
--cs-brand-800: hsla(132, 64%, 23%, 1);
|
--cs-brand-800: oklch(0.43 0.117 146);
|
||||||
--cs-brand-900: hsla(132, 64%, 13%, 1);
|
--cs-brand-900: oklch(0.3 0.075 147);
|
||||||
--cs-brand-950: hsla(132, 64%, 8%, 1);
|
--cs-brand-950: oklch(0.22 0.051 148);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -14,68 +14,68 @@
|
|||||||
|
|
||||||
/* Background & Foreground */
|
/* Background & Foreground */
|
||||||
--cs-background: var(--cs-zinc-50);
|
--cs-background: var(--cs-zinc-50);
|
||||||
--cs-background-subtle: hsla(0, 0%, 0%, 0.02);
|
--cs-background-subtle: oklch(0 0 0 / 0.02);
|
||||||
--cs-foreground: hsla(0, 0%, 0%, 0.9);
|
--cs-foreground: oklch(0 0 0 / 0.9);
|
||||||
--cs-foreground-secondary: hsla(0, 0%, 0%, 0.6);
|
--cs-foreground-secondary: oklch(0 0 0 / 0.6);
|
||||||
--cs-foreground-muted: hsla(0, 0%, 0%, 0.4);
|
--cs-foreground-muted: oklch(0 0 0 / 0.4);
|
||||||
|
|
||||||
/* Card & Popover */
|
/* Card & Popover */
|
||||||
--cs-card: var(--cs-white);
|
--cs-card: var(--cs-white);
|
||||||
--cs-popover: var(--cs-white);
|
--cs-popover: var(--cs-white);
|
||||||
|
|
||||||
/* Border */
|
/* Border */
|
||||||
--cs-border: hsla(0, 0%, 0%, 0.1);
|
--cs-border: oklch(0 0 0 / 0.1);
|
||||||
--cs-border-hover: hsla(0, 0%, 0%, 0.2);
|
--cs-border-hover: oklch(0 0 0 / 0.2);
|
||||||
--cs-border-active: hsla(0, 0%, 0%, 0.3);
|
--cs-border-active: oklch(0 0 0 / 0.3);
|
||||||
|
|
||||||
/* Ring (Focus) */
|
/* Ring (Focus) */
|
||||||
--cs-ring: color-mix(in srgb, var(--cs-primary) 40%, transparent);
|
--cs-ring: color-mix(in srgb, var(--cs-primary) 40%, transparent);
|
||||||
|
|
||||||
/* UI Element Colors */
|
/* UI Element Colors */
|
||||||
--cs-secondary: hsla(0, 0%, 0%, 0.05); /* Secondary Button Background */
|
--cs-secondary: oklch(0 0 0 / 0.05); /* Secondary Button Background */
|
||||||
--cs-secondary-hover: hsla(0, 0%, 0%, 0.85);
|
--cs-secondary-hover: oklch(0 0 0 / 0.85);
|
||||||
--cs-secondary-active: hsla(0, 0%, 0%, 0.7);
|
--cs-secondary-active: oklch(0 0 0 / 0.7);
|
||||||
--cs-muted: hsla(0, 0%, 0%, 0.05); /* Muted/Subtle Background */
|
--cs-muted: oklch(0 0 0 / 0.05); /* Muted/Subtle Background */
|
||||||
--cs-accent: hsla(0, 0%, 0%, 0.05); /* Accent Background */
|
--cs-accent: oklch(0 0 0 / 0.05); /* Accent Background */
|
||||||
--cs-ghost-hover: hsla(0, 0%, 0%, 0.05); /* Ghost Button Hover */
|
--cs-ghost-hover: oklch(0 0 0 / 0.05); /* Ghost Button Hover */
|
||||||
--cs-ghost-active: hsla(0, 0%, 0%, 0.1); /* Ghost Button Active */
|
--cs-ghost-active: oklch(0 0 0 / 0.1); /* Ghost Button Active */
|
||||||
|
|
||||||
/* Sidebar */
|
/* Sidebar */
|
||||||
--cs-sidebar: var(--cs-white);
|
--cs-sidebar: var(--cs-white);
|
||||||
--cs-sidebar-accent: hsla(0, 0%, 0%, 0.05);
|
--cs-sidebar-accent: oklch(0 0 0 / 0.05);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Dark Mode */
|
/* Dark Mode */
|
||||||
.dark {
|
.dark {
|
||||||
/* Background & Foreground */
|
/* Background & Foreground */
|
||||||
--cs-background: var(--cs-zinc-900);
|
--cs-background: var(--cs-zinc-900);
|
||||||
--cs-background-subtle: hsla(0, 0%, 100%, 0.02);
|
--cs-background-subtle: oklch(1 0 0 / 0.02);
|
||||||
--cs-foreground: hsla(0, 0%, 100%, 0.9);
|
--cs-foreground: oklch(1 0 0 / 0.9);
|
||||||
--cs-foreground-secondary: hsla(0, 0%, 100%, 0.6);
|
--cs-foreground-secondary: oklch(1 0 0 / 0.6);
|
||||||
--cs-foreground-muted: hsla(0, 0%, 100%, 0.4);
|
--cs-foreground-muted: oklch(1 0 0 / 0.4);
|
||||||
|
|
||||||
/* Card & Popover */
|
/* Card & Popover */
|
||||||
--cs-card: var(--cs-black);
|
--cs-card: var(--cs-black);
|
||||||
--cs-popover: var(--cs-black);
|
--cs-popover: var(--cs-black);
|
||||||
|
|
||||||
/* Border */
|
/* Border */
|
||||||
--cs-border: hsla(0, 0%, 100%, 0.1);
|
--cs-border: oklch(1 0 0 / 0.1);
|
||||||
--cs-border-hover: hsla(0, 0%, 100%, 0.2);
|
--cs-border-hover: oklch(1 0 0 / 0.2);
|
||||||
--cs-border-active: hsla(0, 0%, 100%, 0.3);
|
--cs-border-active: oklch(1 0 0 / 0.3);
|
||||||
|
|
||||||
/* Ring (Focus) - 保持不变 */
|
/* Ring (Focus) - 保持不变 */
|
||||||
--cs-ring: hsla(84, 81%, 44%, 0.4);
|
--cs-ring: oklch(0.76 0.204 131 / 0.4);
|
||||||
|
|
||||||
/* UI Element Colors - Dark Mode */
|
/* UI Element Colors - Dark Mode */
|
||||||
--cs-secondary: hsla(0, 0%, 100%, 0.1); /* Secondary Button Background */
|
--cs-secondary: oklch(1 0 0 / 0.1); /* Secondary Button Background */
|
||||||
--cs-secondary-hover: hsla(0, 0%, 100%, 0.2);
|
--cs-secondary-hover: oklch(1 0 0 / 0.2);
|
||||||
--cs-secondary-active: hsla(0, 0%, 100%, 0.25);
|
--cs-secondary-active: oklch(1 0 0 / 0.25);
|
||||||
--cs-muted: hsla(0, 0%, 100%, 0.1); /* Muted/Subtle Background */
|
--cs-muted: oklch(1 0 0 / 0.1); /* Muted/Subtle Background */
|
||||||
--cs-accent: hsla(0, 0%, 100%, 0.1); /* Accent Background */
|
--cs-accent: oklch(1 0 0 / 0.1); /* Accent Background */
|
||||||
--cs-ghost-hover: hsla(0, 0%, 100%, 0.1); /* Ghost Button Hover */
|
--cs-ghost-hover: oklch(1 0 0 / 0.1); /* Ghost Button Hover */
|
||||||
--cs-ghost-active: hsla(0, 0%, 100%, 0.15); /* Ghost Button Active */
|
--cs-ghost-active: oklch(1 0 0 / 0.15); /* Ghost Button Active */
|
||||||
|
|
||||||
/* Sidebar */
|
/* Sidebar */
|
||||||
--cs-sidebar: var(--cs-black);
|
--cs-sidebar: var(--cs-black);
|
||||||
--cs-sidebar-accent: hsla(0, 0%, 100%, 0.1);
|
--cs-sidebar-accent: oklch(1 0 0 / 0.1);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -5,51 +5,51 @@
|
|||||||
|
|
||||||
:root {
|
:root {
|
||||||
/* Status Colors - Error */
|
/* Status Colors - Error */
|
||||||
--cs-error-base: var(--cs-red-500); /* #ef4444 */
|
--cs-error-base: var(--cs-red-500); /* oklch(0.64 0.208 25) */
|
||||||
--cs-error-text: var(--cs-red-800); /* #991b1b */
|
--cs-error-text: var(--cs-red-800); /* oklch(0.44 0.161 27) */
|
||||||
--cs-error-bg: var(--cs-red-50); /* #fef2f2 */
|
--cs-error-bg: var(--cs-red-50); /* oklch(0.97 0.013 17) */
|
||||||
--cs-error-text-hover: var(--cs-red-700); /* #b91c1c */
|
--cs-error-text-hover: var(--cs-red-700); /* oklch(0.51 0.19 28) */
|
||||||
--cs-error-bg-hover: var(--cs-red-100); /* #fee2e2 */
|
--cs-error-bg-hover: var(--cs-red-100); /* oklch(0.94 0.031 18) */
|
||||||
--cs-error-border: var(--cs-red-200); /* #fecaca */
|
--cs-error-border: var(--cs-red-200); /* oklch(0.88 0.059 18) */
|
||||||
--cs-error-border-hover: var(--cs-red-300); /* #fca5a5 */
|
--cs-error-border-hover: var(--cs-red-300); /* oklch(0.81 0.103 20) */
|
||||||
--cs-error-active: var(--cs-red-600); /* #dc2626 */
|
--cs-error-active: var(--cs-red-600); /* oklch(0.58 0.215 27) */
|
||||||
|
|
||||||
/* Status Colors - Success */
|
/* Status Colors - Success */
|
||||||
--cs-success-base: var(--cs-green-500); /* #22c55e */
|
--cs-success-base: var(--cs-green-500); /* oklch(0.72 0.192 150) */
|
||||||
--cs-success-text-hover: var(--cs-green-700); /* #15803d */
|
--cs-success-text-hover: var(--cs-green-700); /* oklch(0.53 0.137 150) */
|
||||||
--cs-success-bg: var(--cs-green-50); /* #f0fdf4 */
|
--cs-success-bg: var(--cs-green-50); /* oklch(0.98 0.018 156) */
|
||||||
--cs-success-bg-hover: var(--cs-green-200); /* #bbf7d0 */
|
--cs-success-bg-hover: var(--cs-green-200); /* oklch(0.93 0.081 156) */
|
||||||
|
|
||||||
/* Status Colors - Warning */
|
/* Status Colors - Warning */
|
||||||
--cs-warning-base: var(--cs-amber-400); /* #fbbf24 */
|
--cs-warning-base: var(--cs-amber-400); /* oklch(0.84 0.164 84) */
|
||||||
--cs-warning-text-hover: var(--cs-amber-700); /* #b45309 */
|
--cs-warning-text-hover: var(--cs-amber-700); /* oklch(0.56 0.146 49) */
|
||||||
--cs-warning-bg: var(--cs-amber-50); /* #fffbeb */
|
--cs-warning-bg: var(--cs-amber-50); /* oklch(0.99 0.021 95) */
|
||||||
--cs-warning-bg-hover: var(--cs-amber-100); /* #fef3c7 */
|
--cs-warning-bg-hover: var(--cs-amber-100); /* oklch(0.96 0.058 96) */
|
||||||
--cs-warning-active: var(--cs-amber-600); /* #d97706 */
|
--cs-warning-active: var(--cs-amber-600); /* oklch(0.67 0.157 58) */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Dark Mode */
|
/* Dark Mode */
|
||||||
.dark {
|
.dark {
|
||||||
/* Status Colors - Error (Dark Mode) */
|
/* Status Colors - Error (Dark Mode) */
|
||||||
--cs-error-base: var(--cs-red-400); /* #f87171 */
|
--cs-error-base: var(--cs-red-400); /* oklch(0.71 0.166 22) */
|
||||||
--cs-error-text: var(--cs-red-100); /* #fee2e2 */
|
--cs-error-text: var(--cs-red-100); /* oklch(0.94 0.031 18) */
|
||||||
--cs-error-bg: var(--cs-red-900); /* #7f1d1d */
|
--cs-error-bg: var(--cs-red-900); /* oklch(0.4 0.133 26) */
|
||||||
--cs-error-text-hover: var(--cs-red-200); /* #fecaca */
|
--cs-error-text-hover: var(--cs-red-200); /* oklch(0.88 0.059 18) */
|
||||||
--cs-error-bg-hover: var(--cs-red-800); /* #991b1b */
|
--cs-error-bg-hover: var(--cs-red-800); /* oklch(0.44 0.161 27) */
|
||||||
--cs-error-border: var(--cs-red-700); /* #b91c1c */
|
--cs-error-border: var(--cs-red-700); /* oklch(0.51 0.19 28) */
|
||||||
--cs-error-border-hover: var(--cs-red-600); /* #dc2626 */
|
--cs-error-border-hover: var(--cs-red-600); /* oklch(0.58 0.215 27) */
|
||||||
--cs-error-active: var(--cs-red-300); /* #fca5a5 */
|
--cs-error-active: var(--cs-red-300); /* oklch(0.81 0.103 20) */
|
||||||
|
|
||||||
/* Status Colors - Success (Dark Mode) */
|
/* Status Colors - Success (Dark Mode) */
|
||||||
--cs-success-base: var(--cs-green-400); /* #4ade80 */
|
--cs-success-base: var(--cs-green-400); /* oklch(0.8 0.182 152) */
|
||||||
--cs-success-text-hover: var(--cs-green-200); /* #bbf7d0 */
|
--cs-success-text-hover: var(--cs-green-200); /* oklch(0.93 0.081 156) */
|
||||||
--cs-success-bg: var(--cs-green-900); /* #14532d */
|
--cs-success-bg: var(--cs-green-900); /* oklch(0.39 0.09 153) */
|
||||||
--cs-success-bg-hover: var(--cs-green-800); /* #166534 */
|
--cs-success-bg-hover: var(--cs-green-800); /* oklch(0.45 0.108 151) */
|
||||||
|
|
||||||
/* Status Colors - Warning (Dark Mode) */
|
/* Status Colors - Warning (Dark Mode) */
|
||||||
--cs-warning-base: var(--cs-amber-400); /* #fbbf24 */
|
--cs-warning-base: var(--cs-amber-400); /* oklch(0.84 0.164 84) */
|
||||||
--cs-warning-text-hover: var(--cs-amber-200); /* #fde68a */
|
--cs-warning-text-hover: var(--cs-amber-200); /* oklch(0.92 0.115 96) */
|
||||||
--cs-warning-bg: var(--cs-amber-900); /* #78350f */
|
--cs-warning-bg: var(--cs-amber-900); /* oklch(0.41 0.105 46) */
|
||||||
--cs-warning-bg-hover: var(--cs-amber-800); /* #92400e */
|
--cs-warning-bg-hover: var(--cs-amber-800); /* oklch(0.47 0.125 46) */
|
||||||
--cs-warning-active: var(--cs-amber-600); /* #d97706 */
|
--cs-warning-active: var(--cs-amber-600); /* oklch(0.67 0.157 58) */
|
||||||
}
|
}
|
||||||
|
|||||||
@ -4,20 +4,15 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--cs-radius-4xs: 4px; /* 4px */
|
--cs-radius-4xs: 0.25rem; /* 4px */
|
||||||
--cs-radius-3xs: 8px; /* 8px */
|
--cs-radius-3xs: 0.5rem; /* 8px */
|
||||||
--cs-radius-2xs: 12px; /* 12px */
|
--cs-radius-2xs: 0.75rem; /* 12px */
|
||||||
--cs-radius-xs: 16px; /* 16px */
|
--cs-radius-xs: 1rem; /* 16px */
|
||||||
--cs-radius-sm: 24px; /* 24px */
|
--cs-radius-sm: 1.5rem; /* 24px */
|
||||||
--cs-radius-md: 32px; /* 32px */
|
--cs-radius-md: 2rem; /* 32px */
|
||||||
--cs-radius-lg: 2.5rem; /* 40px */
|
--cs-radius-lg: 2.5rem; /* 40px */
|
||||||
--cs-radius-xl: 48px; /* 48px */
|
--cs-radius-xl: 3rem; /* 48px */
|
||||||
--cs-radius-2xl: 56px; /* 56px */
|
--cs-radius-2xl: 3.5rem; /* 56px */
|
||||||
--cs-radius-3xl: 64px; /* 64px */
|
--cs-radius-3xl: 4rem; /* 64px */
|
||||||
--cs-radius-round: 999px; /* 保持 px，因为是特殊值 */
|
--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 */
|
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user