@soybeanjs/shadcn-theme 0.0.1

package/README.en_US.md

@@ -0,0 +1,370 @@
+# @soybeanjs/shadcn-theme
+
+A powerful and flexible shadcn/ui theme generator with support for dynamic CSS variable injection, preset color schemes, and light/dark mode switching.
+
+[中文 README](README.md)
+
+## ✨ Features
+
+- 🎨 **Rich Preset Themes** - Multiple base palettes, theme colors, and feedback color presets
+- 🌗 **Light/Dark Mode Support** - Built-in dark mode with automatic dark variant generation
+- 🎯 **Flexible Color Schemes** - Support for both HSL and OKLCH color formats
+- 🔧 **Highly Customizable** - Full control over custom theme color configurations
+- 📦 **Zero Runtime Dependencies** - Only depends on `@soybeanjs/colord` for color processing
+- 🚀 **Plug and Play** - Automatically injects CSS variables into the DOM
+- 🎭 **Extended Palettes** - Theme customization support for sidebars, charts, and more
+- 🌈 **Color Palette Generation** - Automatically generates gradient palettes (50-950) for primary colors
+
+## 📦 Installation
+
+```bash
+pnpm add @soybeanjs/shadcn-theme
+```
+
+## 🚀 Quick Start
+
+### Using Preset Themes
+
+```typescript
+import { createShadcnTheme } from '@soybeanjs/shadcn-theme';
+
+// Use default presets (slate + indigo + classic)
+createShadcnTheme();
+
+// Custom preset combination
+createShadcnTheme({
+  presets: {
+    base: 'zinc',      // Base palette: stone | zinc | neutral | gray | slate
+    theme: 'blue',     // Theme color: any Tailwind palette name
+    feedback: 'vivid'  // Feedback color style: classic | vivid | subtle | warm | cool, etc.
+  },
+  radius: '0.5rem',    // Border radius size
+  darkSelector: 'class', // Dark mode selector: 'class' | 'media' | custom
+  format: 'hsl'        // Color format: 'hsl' | 'oklch'
+});
+```
+
+### Custom Theme Colors
+
+```typescript
+createShadcnTheme({
+  theme: {
+    light: {
+      background: 'oklch(100% 0 0)',
+      foreground: 'oklch(20% 0 0)',
+      primary: 'oklch(50% 0.2 250)',
+      primaryForeground: 'oklch(100% 0 0)',
+      // ... more color configurations
+    },
+    dark: {
+      // Optional, will automatically generate dark variants if not provided
+      background: 'oklch(20% 0 0)',
+      foreground: 'oklch(100% 0 0)',
+      // ...
+    }
+  }
+});
+```
+
+## 📖 API Documentation
+
+### `createShadcnTheme(options?: ThemeOptions)`
+
+Main function to create and apply themes.
+
+#### ThemeOptions
+
+| Parameter | Type | Default | Description |
+|------|------|--------|------|
+| `presets` | `PresetConfig` | - | Preset configuration, takes priority over `theme` |
+| `theme` | `ThemeConfig` | - | Custom theme color configuration |
+| `radius` | `string` | `'0.625rem'` | Global border radius size |
+| `styleId` | `string` | `'SHADCN_THEME_STYLES'` | ID of the injected style tag |
+| `styleTarget` | `'html' \| ':root'` | `':root'` | CSS variable mount target |
+| `darkSelector` | `string` | `'class'` | Dark mode selector |
+| `format` | `'hsl' \| 'oklch'` | `'hsl'` | Color output format |
+
+### Preset Configuration (PresetConfig)
+
+```typescript
+interface PresetConfig {
+  base?: 'stone' | 'zinc' | 'neutral' | 'gray' | 'slate';  // Default: 'slate'
+  theme?: TailwindPaletteKey;  // Any Tailwind palette, default: 'indigo'
+  feedback?: FeedbackPaletteKey;  // Feedback color style, default: 'classic'
+}
+```
+
+#### Feedback Palette Key (FeedbackPaletteKey)
+
+| Style | Description | Use Cases |
+|------|------|----------|
+| `classic` | Classic Standard | Most common combination, suitable for most scenarios |
+| `vivid` | Vivid & Energetic | High saturation, suitable for youth-oriented products and creative applications |
+| `subtle` | Soft & Elegant | Low contrast, suitable for premium brands and elegant interfaces |
+| `warm` | Warm & Welcoming | Warm color tones, creates a friendly and warm atmosphere |
+| `cool` | Cool & Professional | Cool color tones, suitable for tech and professional applications |
+| `nature` | Natural & Fresh | Natural colors, suitable for eco-friendly and health products |
+| `modern` | Modern & Minimalist | Strong modern feel, suitable for tech products and SaaS applications |
+| `vibrant` | Vibrant & Dynamic | High-energy colors, suitable for sports and gaming applications |
+| `professional` | Business Professional | Stable and dignified, suitable for enterprise applications and B2B products |
+| `soft` | Dreamy & Soft | Soft tones, suitable for design tools and creative platforms |
+| `bold` | Bold & Eye-catching | High contrast, suitable for scenarios requiring strong visual impact |
+| `calm` | Calm & Soothing | Low saturation, suitable for long-term use applications |
+| `candy` | Candy Colors | Bright and cute, suitable for children's products and fun applications |
+| `deep` | Deep & Mysterious | Deep tones, suitable for dark themes and mysterious styles |
+| `light` | Fresh & Light | Light tones, suitable for clean and refreshing interfaces |
+
+### Theme Color Configuration (ThemeColors)
+
+Supports configuration of the following color variables:
+
+#### Base Colors
+- `background` - Background color
+- `foreground` - Foreground color (text)
+- `card` - Card background
+- `cardForeground` - Card foreground color
+- `popover` - Popover background
+- `popoverForeground` - Popover foreground color
+- `primary` - Primary color
+- `primaryForeground` - Primary foreground
+- `secondary` - Secondary color
+- `secondaryForeground` - Secondary foreground
+- `muted` - Muted color
+- `mutedForeground` - Muted foreground
+- `accent` - Accent color
+- `accentForeground` - Accent foreground
+- `destructive` - Destructive action color
+- `destructiveForeground` - Destructive foreground color
+- `border` - Border color
+- `input` - Input border color
+- `ring` - Focus ring color
+
+#### Extended Colors
+- `success` / `successForeground` - Success state
+- `warning` / `warningForeground` - Warning state
+- `info` / `infoForeground` - Info state
+- `carbon` / `carbonForeground` - Carbon color (additional dark scheme)
+
+#### Sidebar Colors
+- `sidebar` - Sidebar background
+- `sidebarForeground` - Sidebar foreground
+- `sidebarPrimary` - Sidebar primary color
+- `sidebarPrimaryForeground` - Sidebar primary foreground
+- `sidebarAccent` - Sidebar accent color
+- `sidebarAccentForeground` - Sidebar accent foreground
+- `sidebarBorder` - Sidebar border
+- `sidebarRing` - Sidebar focus ring
+
+#### Chart Colors
+- `chart1` ~ `chart5` - Chart colors
+
+### Color Value Format (ColorValue)
+
+Supports three color value formats:
+
+1. **HSL Format**
+```typescript
+'hsl(0 0% 100%)'
+'hsl(0 0% 100% / 0.5)' // with opacity
+```
+
+2. **OKLCH Format**
+```typescript
+'oklch(100% 0 0)'
+'oklch(100% 0 0 / 0.5)' // with opacity
+```
+
+3. **Tailwind Palette Reference**
+```typescript
+'slate.500'
+'blue.600'
+'red.50'
+```
+
+## 🎨 Usage Examples
+
+### Example 1: Classic Blue Theme
+
+```typescript
+createShadcnTheme({
+  presets: {
+    base: 'slate',
+    theme: 'blue',
+    feedback: 'classic'
+  },
+  radius: '0.5rem',
+  darkSelector: 'class'
+});
+```
+
+### Example 2: Modern Purple Theme
+
+```typescript
+createShadcnTheme({
+  presets: {
+    base: 'zinc',
+    theme: 'violet',
+    feedback: 'modern'
+  },
+  radius: '0.75rem',
+  darkSelector: 'class',
+  format: 'oklch'
+});
+```
+
+### Example 3: Custom Brand Colors
+
+```typescript
+createShadcnTheme({
+  theme: {
+    light: {
+      background: 'oklch(100% 0 0)',
+      foreground: 'oklch(20% 0 0)',
+      primary: 'oklch(50% 0.25 280)', // Custom brand purple
+      primaryForeground: 'oklch(100% 0 0)',
+      secondary: 'oklch(95% 0.01 280)',
+      secondaryForeground: 'oklch(30% 0 0)',
+      // ... other colors
+    }
+    // dark is optional, will be auto-generated if not provided
+  }
+});
+```
+
+### Example 4: Media Query Dark Mode
+
+```typescript
+createShadcnTheme({
+  presets: {
+    base: 'slate',
+    theme: 'indigo'
+  },
+  darkSelector: 'media' // Use system preference
+});
+```
+
+### Example 5: Custom Dark Mode Selector
+
+```typescript
+createShadcnTheme({
+  presets: {
+    base: 'slate',
+    theme: 'emerald'
+  },
+  darkSelector: '[data-theme="dark"]' // Custom selector
+});
+```
+
+## 🎯 Generated CSS Variables
+
+After calling `createShadcnTheme()`, a `<style>` tag containing the following variables will be automatically injected into `<head>`:
+
+```css
+:root {
+  --radius: 0.625rem;
+  --background: 0 0% 100%;
+  --foreground: 222.2 84% 4.9%;
+  --primary: 221.2 83.2% 53.3%;
+  /* ... more variables */
+
+  /* Auto-generated palettes */
+  --primary-50: 239 84% 97%;
+  --primary-100: 237 84% 94%;
+  /* ... primary-200 to primary-950 */
+
+  /* Other color palettes */
+  --destructive-50: ...;
+  --success-50: ...;
+  --warning-50: ...;
+  --info-50: ...;
+  --carbon-50: ...;
+}
+
+.dark {
+  --background: 222.2 84% 4.9%;
+  --foreground: 210 40% 98%;
+  /* ... variables in dark mode */
+}
+```
+
+## 💡 Advanced Usage
+
+### Dynamic Theme Switching
+
+```typescript
+// Switch to light theme
+createShadcnTheme({
+  presets: { base: 'slate', theme: 'blue' }
+});
+
+// Runtime switch to dark theme (by toggling class)
+document.documentElement.classList.add('dark');
+
+// Switch to another theme
+createShadcnTheme({
+  presets: { base: 'zinc', theme: 'purple' }
+});
+```
+
+### Using with Tailwind CSS
+
+```javascript
+// tailwind.config.js
+module.exports = {
+  darkMode: ['class'],
+  theme: {
+    extend: {
+      colors: {
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+          50: 'hsl(var(--primary-50))',
+          100: 'hsl(var(--primary-100))',
+          // ... more shades
+        },
+        // ... other colors
+      },
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      }
+    }
+  }
+}
+```
+
+### Using in CSS
+
+```css
+.my-component {
+  background-color: hsl(var(--primary));
+  color: hsl(var(--primary-foreground));
+  border-radius: var(--radius);
+  border: 1px solid hsl(var(--border));
+}
+
+.my-card {
+  background-color: hsl(var(--card));
+  color: hsl(var(--card-foreground));
+}
+```
+
+## 🔗 Related Projects
+
+- [shadcn/ui](https://ui.shadcn.com/) - Component library based on Radix UI and Tailwind CSS
+- [@soybeanjs/colord](https://github.com/soybeanjs/colord) - Color processing utility library
+
+## 📄 License
+
+MIT License
+
+## 🤝 Contributing
+
+Issues and Pull Requests are welcome!
+
+## 👨‍💻 Author
+
+Created by [Soybean](https://github.com/soybeanjs)

package/README.md

@@ -0,0 +1,370 @@
+# @soybeanjs/shadcn-theme
+
+一个功能强大且灵活的 shadcn/ui 主题生成器，支持动态 CSS 变量注入、预设配色方案和深浅模式切换。
+
+[English](./README.en_US.md)
+
+## ✨ 特性
+
+- 🎨 **丰富的预设主题** - 提供多种基础色板、主题色和反馈色预设
+- 🌗 **深浅模式支持** - 内置深色模式支持，可自动生成深色变体
+- 🎯 **灵活的配色方案** - 支持 HSL 和 OKLCH 两种颜色格式
+- 🔧 **高度可定制** - 支持完全自定义主题颜色配置
+- 📦 **零运行时依赖** - 仅依赖 `@soybeanjs/colord` 进行颜色处理
+- 🚀 **即插即用** - 自动将 CSS 变量注入到 DOM 中
+- 🎭 **扩展色板** - 支持侧边栏、图表等扩展场景的主题定制
+- 🌈 **颜色调色板生成** - 自动生成主要颜色的渐变色板（50-950）
+
+## 📦 安装
+
+```bash
+pnpm add @soybeanjs/shadcn-theme
+```
+
+## 🚀 快速开始
+
+### 使用预设主题
+
+```typescript
+import { createShadcnTheme } from '@soybeanjs/shadcn-theme';
+
+// 使用默认预设（slate + indigo + classic）
+createShadcnTheme();
+
+// 自定义预设组合
+createShadcnTheme({
+  presets: {
+    base: 'zinc',      // 基础色板：stone | zinc | neutral | gray | slate
+    theme: 'blue',     // 主题色：任意 Tailwind 色板名称
+    feedback: 'vivid'  // 反馈色风格：classic | vivid | subtle | warm | cool 等
+  },
+  radius: '0.5rem',    // 圆角大小
+  darkSelector: 'class', // 深色模式选择器：'class' | 'media' | 自定义
+  format: 'hsl'        // 颜色格式：'hsl' | 'oklch'
+});
+```
+
+### 自定义主题颜色
+
+```typescript
+createShadcnTheme({
+  theme: {
+    light: {
+      background: 'oklch(100% 0 0)',
+      foreground: 'oklch(20% 0 0)',
+      primary: 'oklch(50% 0.2 250)',
+      primaryForeground: 'oklch(100% 0 0)',
+      // ... 更多颜色配置
+    },
+    dark: {
+      // 可选，如果不提供会自动生成深色变体
+      background: 'oklch(20% 0 0)',
+      foreground: 'oklch(100% 0 0)',
+      // ...
+    }
+  }
+});
+```
+
+## 📖 API 文档
+
+### `createShadcnTheme(options?: ThemeOptions)`
+
+主函数，用于创建并应用主题。
+
+#### ThemeOptions
+
+| 参数 | 类型 | 默认值 | 描述 |
+|------|------|--------|------|
+| `presets` | `PresetConfig` | - | 预设配置，优先级高于 `theme` |
+| `theme` | `ThemeConfig` | - | 自定义主题颜色配置 |
+| `radius` | `string` | `'0.625rem'` | 全局圆角大小 |
+| `styleId` | `string` | `'SHADCN_THEME_STYLES'` | 注入的 style 标签 ID |
+| `styleTarget` | `'html' \| ':root'` | `':root'` | CSS 变量挂载目标 |
+| `darkSelector` | `string` | `'class'` | 深色模式选择器 |
+| `format` | `'hsl' \| 'oklch'` | `'hsl'` | 颜色输出格式 |
+
+### 预设配置（PresetConfig）
+
+```typescript
+interface PresetConfig {
+  base?: 'stone' | 'zinc' | 'neutral' | 'gray' | 'slate';  // 默认: 'slate'
+  theme?: TailwindPaletteKey;  // 任意 Tailwind 色板，默认: 'indigo'
+  feedback?: FeedbackPaletteKey;  // 反馈色风格，默认: 'classic'
+}
+```
+
+#### 反馈色风格（FeedbackPaletteKey）
+
+| 风格 | 描述 | 适用场景 |
+|------|------|----------|
+| `classic` | 经典标准 | 最常见的组合，适用于大多数场景 |
+| `vivid` | 鲜艳活力 | 高饱和度，适合年轻化产品和创意应用 |
+| `subtle` | 柔和优雅 | 低对比度，适合高端品牌和优雅界面 |
+| `warm` | 暖色温馨 | 暖色调为主，营造友好温暖的氛围 |
+| `cool` | 冷色专业 | 冷色调为主，适合科技和专业应用 |
+| `nature` | 自然清新 | 自然色系，适合环保、健康类产品 |
+| `modern` | 现代简约 | 现代感强，适合科技产品和 SaaS 应用 |
+| `vibrant` | 活力四射 | 高能量配色，适合运动、游戏类应用 |
+| `professional` | 商务专业 | 稳重大气，适合企业级应用和 B2B 产品 |
+| `soft` | 梦幻柔美 | 柔和色调，适合设计工具和创意平台 |
+| `bold` | 大胆醒目 | 高对比度，适合需要强烈视觉冲击的场景 |
+| `calm` | 平静舒缓 | 低饱和度，适合长时间使用的应用 |
+| `candy` | 糖果色彩 | 明快可爱，适合儿童产品和趣味应用 |
+| `deep` | 深邃神秘 | 深色调，适合暗黑主题和神秘风格 |
+| `light` | 清新淡雅 | 浅色调，适合简洁清爽的界面 |
+
+### 主题颜色配置（ThemeColors）
+
+支持配置以下颜色变量：
+
+#### 基础颜色
+- `background` - 背景色
+- `foreground` - 前景色（文本）
+- `card` - 卡片背景
+- `cardForeground` - 卡片前景色
+- `popover` - 弹出层背景
+- `popoverForeground` - 弹出层前景色
+- `primary` - 主色
+- `primaryForeground` - 主色前景
+- `secondary` - 次要色
+- `secondaryForeground` - 次要色前景
+- `muted` - 静音色
+- `mutedForeground` - 静音色前景
+- `accent` - 强调色
+- `accentForeground` - 强调色前景
+- `destructive` - 破坏性操作色
+- `destructiveForeground` - 破坏性操作前景色
+- `border` - 边框色
+- `input` - 输入框边框色
+- `ring` - 聚焦环颜色
+
+#### 扩展颜色
+- `success` / `successForeground` - 成功状态
+- `warning` / `warningForeground` - 警告状态
+- `info` / `infoForeground` - 信息状态
+- `carbon` / `carbonForeground` - 碳色（额外的深色系）
+
+#### 侧边栏颜色
+- `sidebar` - 侧边栏背景
+- `sidebarForeground` - 侧边栏前景
+- `sidebarPrimary` - 侧边栏主色
+- `sidebarPrimaryForeground` - 侧边栏主色前景
+- `sidebarAccent` - 侧边栏强调色
+- `sidebarAccentForeground` - 侧边栏强调色前景
+- `sidebarBorder` - 侧边栏边框
+- `sidebarRing` - 侧边栏聚焦环
+
+#### 图表颜色
+- `chart1` ~ `chart5` - 图表配色
+
+### 颜色值格式（ColorValue）
+
+支持三种颜色值格式：
+
+1. **HSL 格式**
+```typescript
+'hsl(0 0% 100%)'
+'hsl(0 0% 100% / 0.5)' // 带透明度
+```
+
+2. **OKLCH 格式**
+```typescript
+'oklch(100% 0 0)'
+'oklch(100% 0 0 / 0.5)' // 带透明度
+```
+
+3. **Tailwind 色板引用**
+```typescript
+'slate.500'
+'blue.600'
+'red.50'
+```
+
+## 🎨 使用示例
+
+### 示例 1: 经典蓝色主题
+
+```typescript
+createShadcnTheme({
+  presets: {
+    base: 'slate',
+    theme: 'blue',
+    feedback: 'classic'
+  },
+  radius: '0.5rem',
+  darkSelector: 'class'
+});
+```
+
+### 示例 2: 现代紫色主题
+
+```typescript
+createShadcnTheme({
+  presets: {
+    base: 'zinc',
+    theme: 'violet',
+    feedback: 'modern'
+  },
+  radius: '0.75rem',
+  darkSelector: 'class',
+  format: 'oklch'
+});
+```
+
+### 示例 3: 自定义品牌色
+
+```typescript
+createShadcnTheme({
+  theme: {
+    light: {
+      background: 'oklch(100% 0 0)',
+      foreground: 'oklch(20% 0 0)',
+      primary: 'oklch(50% 0.25 280)', // 自定义品牌紫色
+      primaryForeground: 'oklch(100% 0 0)',
+      secondary: 'oklch(95% 0.01 280)',
+      secondaryForeground: 'oklch(30% 0 0)',
+      // ... 其他颜色
+    }
+    // dark 可选，不提供会自动生成
+  }
+});
+```
+
+### 示例 4: 媒体查询深色模式
+
+```typescript
+createShadcnTheme({
+  presets: {
+    base: 'slate',
+    theme: 'indigo'
+  },
+  darkSelector: 'media' // 使用系统偏好
+});
+```
+
+### 示例 5: 自定义深色模式选择器
+
+```typescript
+createShadcnTheme({
+  presets: {
+    base: 'slate',
+    theme: 'emerald'
+  },
+  darkSelector: '[data-theme="dark"]' // 自定义选择器
+});
+```
+
+## 🎯 生成的 CSS 变量
+
+调用 `createShadcnTheme()` 后，会自动在 `<head>` 中注入包含以下变量的 `<style>` 标签：
+
+```css
+:root {
+  --radius: 0.625rem;
+  --background: 0 0% 100%;
+  --foreground: 222.2 84% 4.9%;
+  --primary: 221.2 83.2% 53.3%;
+  /* ... 更多变量 */
+
+  /* 自动生成的色板 */
+  --primary-50: 239 84% 97%;
+  --primary-100: 237 84% 94%;
+  /* ... primary-200 到 primary-950 */
+
+  /* 其他颜色的色板 */
+  --destructive-50: ...;
+  --success-50: ...;
+  --warning-50: ...;
+  --info-50: ...;
+  --carbon-50: ...;
+}
+
+.dark {
+  --background: 222.2 84% 4.9%;
+  --foreground: 210 40% 98%;
+  /* ... 深色模式下的变量 */
+}
+```
+
+## 💡 高级用法
+
+### 动态切换主题
+
+```typescript
+// 切换到浅色主题
+createShadcnTheme({
+  presets: { base: 'slate', theme: 'blue' }
+});
+
+// 运行时切换到深色主题（通过切换 class）
+document.documentElement.classList.add('dark');
+
+// 切换到另一个主题
+createShadcnTheme({
+  presets: { base: 'zinc', theme: 'purple' }
+});
+```
+
+### 在 Tailwind CSS 中使用
+
+```javascript
+// tailwind.config.js
+module.exports = {
+  darkMode: ['class'],
+  theme: {
+    extend: {
+      colors: {
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+          50: 'hsl(var(--primary-50))',
+          100: 'hsl(var(--primary-100))',
+          // ... 更多色阶
+        },
+        // ... 其他颜色
+      },
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      }
+    }
+  }
+}
+```
+
+### 在 CSS 中使用
+
+```css
+.my-component {
+  background-color: hsl(var(--primary));
+  color: hsl(var(--primary-foreground));
+  border-radius: var(--radius);
+  border: 1px solid hsl(var(--border));
+}
+
+.my-card {
+  background-color: hsl(var(--card));
+  color: hsl(var(--card-foreground));
+}
+```
+
+## 🔗 相关项目
+
+- [shadcn/ui](https://ui.shadcn.com/) - 基于 Radix UI 和 Tailwind CSS 的组件库
+- [@soybeanjs/colord](https://github.com/soybeanjs/colord) - 颜色处理工具库
+
+## 📄 许可证
+
+MIT License
+
+## 🤝 贡献
+
+欢迎提交 Issue 和 Pull Request！
+
+## 👨‍💻 作者
+
+Created by [Soybean](https://github.com/soybeanjs)

package/dist/index.d.ts

@@ -0,0 +1,208 @@
+import { TailwindPaletteKey, TailwindPaletteLevelColorKey } from "@soybeanjs/colord/palette";
+
+//#region src/types.d.ts
+
+/**
+ * the base palette key
+ */
+type BasePaletteKey = Extract<TailwindPaletteKey, 'stone' | 'zinc' | 'neutral' | 'gray' | 'slate'>;
+type FeedbackPaletteKey = 'classic' | 'vivid' | 'subtle' | 'warm' | 'cool' | 'nature' | 'modern' | 'vibrant' | 'professional' | 'soft' | 'bold' | 'calm' | 'candy' | 'deep' | 'light';
+type ThemePaletteKey = TailwindPaletteKey;
+/**
+ * the preset config
+ */
+interface PresetConfig {
+  /**
+   * the base palette key
+   *
+   * @default 'stone'
+   */
+  base?: BasePaletteKey;
+  /** the theme palette key
+   *
+   * @default 'indigo'
+   */
+  theme?: ThemePaletteKey;
+  /**
+   * the feedback palette key
+   *
+   * @default 'classic'
+   */
+  feedback?: FeedbackPaletteKey;
+}
+interface ThemeRadius {
+  /**
+   * the border radius
+   *
+   * @default '0.625rem'
+   */
+  radius?: string;
+}
+type HSLColor = `hsl(${number} ${number}% ${number}%)` | `hsl(${number} ${number}% ${number}% / ${number})`;
+type OKLCHColor = `oklch(${number}% ${number} ${number})` | `oklch(${number}% ${number} ${number} / ${number})`;
+type ColorValue = HSLColor | OKLCHColor | TailwindPaletteLevelColorKey;
+interface BaseThemeColors {
+  background?: ColorValue;
+  foreground?: ColorValue;
+  card?: ColorValue;
+  cardForeground?: ColorValue;
+  popover?: ColorValue;
+  popoverForeground?: ColorValue;
+  primary?: ColorValue;
+  primaryForeground?: ColorValue;
+  secondary?: ColorValue;
+  secondaryForeground?: ColorValue;
+  muted?: ColorValue;
+  mutedForeground?: ColorValue;
+  accent?: ColorValue;
+  accentForeground?: ColorValue;
+  destructive?: ColorValue;
+  destructiveForeground?: ColorValue;
+  border?: ColorValue;
+  input?: ColorValue;
+  ring?: ColorValue;
+}
+/**
+ * sidebar theme colors
+ */
+interface SidebarThemeColors {
+  /**
+   * the sidebar background color
+   *
+   * if not set, will use the theme background color
+   */
+  sidebar?: ColorValue;
+  /**
+   * the sidebar foreground color
+   *
+   * if not set, will use the theme foreground color
+   */
+  sidebarForeground?: ColorValue;
+  /**
+   * the sidebar primary color
+   *
+   * if not set, will use the theme primary color
+   */
+  sidebarPrimary?: ColorValue;
+  /**
+   * the sidebar primary foreground color
+   *
+   * if not set, will use the theme primary foreground color
+   */
+  sidebarPrimaryForeground?: ColorValue;
+  /**
+   * the sidebar accent color
+   *
+   * if not set, will use the theme accent color
+   */
+  sidebarAccent?: ColorValue;
+  /**
+   * the sidebar accent foreground color
+   *
+   * if not set, will use the theme accent foreground color
+   */
+  sidebarAccentForeground?: ColorValue;
+  /**
+   * the sidebar border color
+   *
+   * if not set, will use the theme border color
+   */
+  sidebarBorder?: ColorValue;
+  /**
+   * the sidebar ring color
+   *
+   * if not set, will use the theme ring color
+   */
+  sidebarRing?: ColorValue;
+}
+/**
+ * chart theme colors
+ */
+interface ChartThemeColors {
+  chart1?: ColorValue;
+  chart2?: ColorValue;
+  chart3?: ColorValue;
+  chart4?: ColorValue;
+  chart5?: ColorValue;
+}
+interface ExtendedThemeColors {
+  success?: ColorValue;
+  successForeground?: ColorValue;
+  warning?: ColorValue;
+  warningForeground?: ColorValue;
+  info?: ColorValue;
+  infoForeground?: ColorValue;
+  carbon?: ColorValue;
+  carbonForeground?: ColorValue;
+}
+interface ThemeColors extends BaseThemeColors, ExtendedThemeColors, SidebarThemeColors, ChartThemeColors {}
+interface ShadcnTheme extends ThemeColors, ThemeRadius {}
+type DarkSelector = 'class' | 'media';
+/**
+ * theme options
+ */
+interface ThemeOptions {
+  /**
+   * presets config
+   *
+   * this priority is higher than the theme and darkTheme
+   */
+  presets?: PresetConfig;
+  /**
+   * theme color config
+   */
+  theme?: {
+    /**
+     * light theme
+     */
+    light: Required<ThemeColors>;
+    /**
+     * dark theme
+     *
+     * if not set, will use the light theme to generate dark variant colors
+     */
+    dark?: Required<ThemeColors>;
+  };
+  /**
+   * the border radius
+   *
+   * @default 0.625rem
+   */
+  radius?: string;
+  /**
+   * the style id
+   *
+   * @default 'SHADCN_THEME_STYLES'
+   */
+  styleId?: string;
+  /**
+   * the style target
+   *
+   * @default ':root'
+   */
+  styleTarget?: 'html' | ':root';
+  /**
+   * dark mode selector
+   *
+   * - class: ".dark"
+   * - media: "@media (prefers-color-scheme: dark)"
+   * - custom: custom dark mode selector, e.g. ".custom-dark"
+   *
+   * @default 'class'
+   */
+  darkSelector?: DarkSelector | (string & {});
+  /**
+   * color output format
+   *
+   * - hsl: "h s l [/ alpha]", e.g. "0 0% 100% / 0.1"
+   * - oklch: "oklch(l c h [/ alpha])", e.g. "oklch(0 0 0 / 0.1)"
+   *
+   * @default 'hsl'
+   */
+  format?: 'hsl' | 'oklch';
+}
+//#endregion
+//#region src/core.d.ts
+declare function createShadcnTheme(options?: ThemeOptions): void;
+//#endregion
+export { type BasePaletteKey, type BaseThemeColors, type ChartThemeColors, type ColorValue, type ExtendedThemeColors, type FeedbackPaletteKey, type ShadcnTheme, type SidebarThemeColors, type ThemeColors, type ThemeOptions, type ThemePaletteKey, type ThemeRadius, createShadcnTheme };

package/dist/index.js

@@ -0,0 +1 @@
+import{colord as e}from"@soybeanjs/colord";import{generatePalette as t,tailwindPalette as n,tailwindPaletteHsl as r}from"@soybeanjs/colord/palette";const i={radius:`--radius`,background:`--background`,foreground:`--foreground`,card:`--card`,cardForeground:`--card-foreground`,popover:`--popover`,popoverForeground:`--popover-foreground`,primary:`--primary`,primaryForeground:`--primary-foreground`,secondary:`--secondary`,secondaryForeground:`--secondary-foreground`,muted:`--muted`,mutedForeground:`--muted-foreground`,accent:`--accent`,accentForeground:`--accent-foreground`,destructive:`--destructive`,destructiveForeground:`--destructive-foreground`,border:`--border`,input:`--input`,ring:`--ring`,success:`--success`,successForeground:`--success-foreground`,warning:`--warning`,warningForeground:`--warning-foreground`,info:`--info`,infoForeground:`--info-foreground`,carbon:`--carbon`,carbonForeground:`--carbon-foreground`,sidebar:`--sidebar`,sidebarForeground:`--sidebar-foreground`,sidebarPrimary:`--sidebar-primary`,sidebarPrimaryForeground:`--sidebar-primary-foreground`,sidebarAccent:`--sidebar-accent`,sidebarAccentForeground:`--sidebar-accent-foreground`,sidebarBorder:`--sidebar-border`,sidebarRing:`--sidebar-ring`,chart1:`--chart-1`,chart2:`--chart-2`,chart3:`--chart-3`,chart4:`--chart-4`,chart5:`--chart-5`},a={class:`.dark`,media:`@media (prefers-color-scheme: dark)`},o={stone:{light:{background:`oklch(100% 0 0)`,foreground:`stone.950`,card:`oklch(100% 0 0)`,cardForeground:`stone.950`,popover:`oklch(100% 0 0)`,popoverForeground:`stone.950`,primaryForeground:`stone.50`,secondary:`stone.100`,secondaryForeground:`stone.900`,muted:`stone.100`,mutedForeground:`stone.500`,accent:`stone.100`,accentForeground:`stone.900`,destructiveForeground:`stone.50`,successForeground:`stone.50`,warningForeground:`stone.50`,infoForeground:`stone.50`,carbon:`stone.800`,carbonForeground:`stone.50`,border:`stone.200`,input:`stone.200`},dark:{background:`stone.950`,foreground:`stone.50`,card:`stone.900`,cardForeground:`stone.50`,popover:`stone.900`,popoverForeground:`stone.50`,primaryForeground:`stone.900`,secondary:`stone.800`,secondaryForeground:`stone.50`,muted:`stone.800`,mutedForeground:`stone.400`,accent:`stone.800`,accentForeground:`stone.50`,destructiveForeground:`stone.900`,successForeground:`stone.900`,warningForeground:`stone.900`,infoForeground:`stone.900`,carbon:`stone.100`,carbonForeground:`stone.900`,border:`oklch(100% 0 0 / 0.1)`,input:`oklch(100% 0 0 / 0.15)`}},zinc:{light:{background:`zinc.50`,foreground:`zinc.950`,card:`zinc.50`,cardForeground:`zinc.950`,popover:`zinc.50`,popoverForeground:`zinc.950`,primaryForeground:`zinc.50`,secondary:`zinc.100`,secondaryForeground:`zinc.900`,muted:`zinc.100`,mutedForeground:`zinc.500`,accent:`zinc.100`,accentForeground:`zinc.900`,destructiveForeground:`zinc.50`,successForeground:`zinc.50`,warningForeground:`zinc.50`,infoForeground:`zinc.50`,carbon:`zinc.800`,carbonForeground:`zinc.50`,border:`zinc.200`,input:`zinc.200`},dark:{background:`zinc.950`,foreground:`zinc.50`,card:`zinc.900`,cardForeground:`zinc.50`,popover:`zinc.900`,popoverForeground:`zinc.50`,primaryForeground:`zinc.900`,secondary:`zinc.800`,secondaryForeground:`zinc.50`,muted:`zinc.800`,mutedForeground:`zinc.400`,accent:`zinc.800`,accentForeground:`zinc.50`,destructiveForeground:`zinc.900`,successForeground:`zinc.900`,warningForeground:`zinc.900`,infoForeground:`zinc.900`,carbon:`zinc.100`,carbonForeground:`zinc.900`,border:`oklch(100% 0 0 / 0.1)`,input:`oklch(100% 0 0 / 0.15)`}},neutral:{light:{background:`neutral.50`,foreground:`neutral.950`,card:`neutral.50`,cardForeground:`neutral.950`,popover:`neutral.50`,popoverForeground:`neutral.950`,primaryForeground:`neutral.50`,secondary:`neutral.100`,secondaryForeground:`neutral.900`,muted:`neutral.100`,mutedForeground:`neutral.500`,accent:`neutral.100`,accentForeground:`neutral.900`,destructiveForeground:`neutral.50`,successForeground:`neutral.50`,warningForeground:`neutral.50`,infoForeground:`neutral.50`,carbon:`neutral.800`,carbonForeground:`neutral.50`,border:`neutral.200`,input:`neutral.200`},dark:{background:`neutral.950`,foreground:`neutral.50`,card:`neutral.900`,cardForeground:`neutral.50`,popover:`neutral.900`,popoverForeground:`neutral.50`,primaryForeground:`neutral.900`,secondary:`neutral.800`,secondaryForeground:`neutral.50`,muted:`neutral.800`,mutedForeground:`neutral.400`,accent:`neutral.800`,accentForeground:`neutral.50`,destructiveForeground:`neutral.900`,successForeground:`neutral.900`,warningForeground:`neutral.900`,infoForeground:`neutral.900`,carbon:`neutral.100`,carbonForeground:`neutral.900`,border:`oklch(100% 0 0 / 0.1)`,input:`oklch(100% 0 0 / 0.15)`}},gray:{light:{background:`oklch(100% 0 0)`,foreground:`gray.950`,card:`oklch(100% 0 0)`,cardForeground:`gray.950`,popover:`oklch(100% 0 0)`,popoverForeground:`gray.950`,primaryForeground:`gray.50`,secondary:`gray.100`,secondaryForeground:`gray.900`,muted:`gray.100`,mutedForeground:`gray.500`,accent:`gray.100`,accentForeground:`gray.900`,carbon:`gray.800`,destructiveForeground:`gray.50`,successForeground:`gray.50`,warningForeground:`gray.50`,infoForeground:`gray.50`,carbonForeground:`gray.50`,border:`gray.200`,input:`gray.200`},dark:{background:`gray.950`,foreground:`gray.50`,card:`gray.900`,cardForeground:`gray.50`,popover:`gray.900`,popoverForeground:`gray.50`,primaryForeground:`gray.900`,secondary:`gray.800`,secondaryForeground:`gray.50`,muted:`gray.800`,mutedForeground:`gray.400`,accent:`gray.800`,accentForeground:`gray.50`,carbon:`gray.100`,destructiveForeground:`gray.900`,successForeground:`gray.900`,warningForeground:`gray.900`,infoForeground:`gray.900`,carbonForeground:`gray.900`,border:`oklch(100% 0 0 / 0.1)`,input:`oklch(100% 0 0 / 0.15)`}},slate:{light:{background:`oklch(100% 0 0)`,foreground:`slate.950`,card:`oklch(100% 0 0)`,cardForeground:`slate.950`,popover:`oklch(100% 0 0)`,popoverForeground:`slate.950`,primaryForeground:`slate.50`,secondary:`slate.100`,secondaryForeground:`slate.900`,muted:`slate.100`,mutedForeground:`slate.500`,accent:`slate.100`,accentForeground:`slate.900`,destructiveForeground:`slate.50`,successForeground:`slate.50`,warningForeground:`slate.50`,infoForeground:`slate.50`,carbon:`slate.800`,carbonForeground:`slate.50`,border:`slate.200`,input:`slate.200`},dark:{background:`slate.950`,foreground:`slate.50`,card:`slate.900`,cardForeground:`slate.50`,popover:`slate.900`,popoverForeground:`slate.50`,primaryForeground:`slate.900`,secondary:`slate.800`,secondaryForeground:`slate.50`,muted:`slate.800`,mutedForeground:`slate.400`,accent:`slate.800`,accentForeground:`slate.50`,carbon:`slate.100`,destructiveForeground:`slate.900`,successForeground:`slate.900`,warningForeground:`slate.900`,infoForeground:`slate.900`,carbonForeground:`slate.900`,border:`oklch(100% 0 0 / 0.1)`,input:`oklch(100% 0 0 / 0.15)`}}},s={stone:{light:{primary:`stone.900`,ring:`stone.400`,chart1:`orange.600`,chart2:`teal.600`,chart3:`cyan.900`,chart4:`amber.400`,chart5:`amber.500`},dark:{primary:`stone.200`,ring:`stone.500`,chart1:`blue.700`,chart2:`emerald.500`,chart3:`amber.500`,chart4:`purple.500`,chart5:`rose.500`}},zinc:{light:{primary:`zinc.900`,ring:`stone.400`,chart1:`orange.600`,chart2:`teal.600`,chart3:`cyan.900`,chart4:`amber.400`,chart5:`amber.500`},dark:{primary:`zinc.200`,ring:`zinc.500`,chart1:`blue.700`,chart2:`emerald.500`,chart3:`amber.500`,chart4:`purple.500`,chart5:`rose.500`}},neutral:{light:{primary:`neutral.900`,ring:`stone.400`,chart1:`orange.600`,chart2:`teal.600`,chart3:`cyan.900`,chart4:`amber.400`,chart5:`amber.500`},dark:{primary:`neutral.200`,ring:`neutral.500`,chart1:`blue.700`,chart2:`emerald.500`,chart3:`amber.500`,chart4:`purple.500`,chart5:`rose.500`}},gray:{light:{primary:`gray.900`,ring:`stone.400`,chart1:`orange.600`,chart2:`teal.600`,chart3:`cyan.900`,chart4:`amber.400`,chart5:`amber.500`},dark:{primary:`gray.200`,ring:`gray.500`,chart1:`blue.700`,chart2:`emerald.500`,chart3:`amber.500`,chart4:`purple.500`,chart5:`rose.500`}},slate:{light:{primary:`slate.900`,ring:`stone.400`,chart1:`orange.600`,chart2:`teal.600`,chart3:`cyan.900`,chart4:`amber.400`,chart5:`amber.500`},dark:{primary:`slate.200`,ring:`slate.500`,chart1:`blue.700`,chart2:`emerald.500`,chart3:`amber.500`,chart4:`purple.500`,chart5:`rose.500`}},red:{light:{primary:`red.600`,ring:`red.400`,chart1:`red.300`,chart2:`red.500`,chart3:`red.600`,chart4:`red.700`,chart5:`red.800`},dark:{primary:`red.500`,ring:`red.900`,chart1:`red.300`,chart2:`red.500`,chart3:`red.600`,chart4:`red.700`,chart5:`red.800`}},orange:{light:{primary:`orange.600`,ring:`orange.400`,chart1:`orange.300`,chart2:`orange.500`,chart3:`orange.600`,chart4:`orange.700`,chart5:`orange.800`},dark:{primary:`orange.500`,ring:`orange.900`,chart1:`orange.300`,chart2:`orange.500`,chart3:`orange.600`,chart4:`orange.700`,chart5:`orange.800`}},amber:{light:{primary:`amber.400`,ring:`amber.400`,chart1:`amber.300`,chart2:`amber.500`,chart3:`amber.600`,chart4:`amber.700`,chart5:`amber.800`},dark:{primary:`amber.500`,ring:`amber.900`,chart1:`amber.300`,chart2:`amber.500`,chart3:`amber.600`,chart4:`amber.700`,chart5:`amber.800`}},yellow:{light:{primary:`amber.400`,ring:`amber.400`,chart1:`amber.300`,chart2:`amber.500`,chart3:`amber.600`,chart4:`amber.700`,chart5:`amber.800`},dark:{primary:`amber.500`,ring:`amber.900`,chart1:`amber.300`,chart2:`amber.500`,chart3:`amber.600`,chart4:`amber.700`,chart5:`amber.800`}},lime:{light:{primary:`lime.600`,ring:`lime.400`,chart1:`lime.300`,chart2:`lime.500`,chart3:`lime.600`,chart4:`lime.700`,chart5:`lime.800`},dark:{primary:`lime.600`,ring:`lime.900`,chart1:`lime.300`,chart2:`lime.500`,chart3:`lime.600`,chart4:`lime.700`,chart5:`lime.800`}},green:{light:{primary:`green.600`,ring:`green.400`,chart1:`green.300`,chart2:`green.500`,chart3:`green.600`,chart4:`green.700`,chart5:`green.800`},dark:{primary:`green.600`,ring:`green.900`,chart1:`green.300`,chart2:`green.500`,chart3:`green.600`,chart4:`green.700`,chart5:`green.800`}},emerald:{light:{primary:`emerald.500`,ring:`emerald.400`,chart1:`emerald.300`,chart2:`emerald.500`,chart3:`emerald.600`,chart4:`emerald.700`,chart5:`emerald.800`},dark:{primary:`emerald.600`,ring:`emerald.900`,chart1:`emerald.300`,chart2:`emerald.500`,chart3:`emerald.600`,chart4:`emerald.700`,chart5:`emerald.800`}},teal:{light:{primary:`teal.400`,ring:`teal.400`,chart1:`teal.300`,chart2:`teal.500`,chart3:`teal.600`,chart4:`teal.700`,chart5:`teal.800`},dark:{primary:`teal.600`,ring:`teal.900`,chart1:`teal.300`,chart2:`teal.500`,chart3:`teal.600`,chart4:`teal.700`,chart5:`teal.800`}},cyan:{light:{primary:`cyan.600`,ring:`cyan.400`,chart1:`cyan.300`,chart2:`cyan.500`,chart3:`cyan.600`,chart4:`cyan.700`,chart5:`cyan.800`},dark:{primary:`cyan.500`,ring:`cyan.900`,chart1:`cyan.300`,chart2:`cyan.500`,chart3:`cyan.600`,chart4:`cyan.700`,chart5:`cyan.800`}},sky:{light:{primary:`sky.600`,ring:`sky.400`,chart1:`sky.300`,chart2:`sky.500`,chart3:`sky.600`,chart4:`sky.700`,chart5:`sky.800`},dark:{primary:`sky.500`,ring:`sky.900`,chart1:`sky.300`,chart2:`sky.500`,chart3:`sky.600`,chart4:`sky.700`,chart5:`sky.800`}},blue:{light:{primary:`blue.600`,ring:`blue.400`,chart1:`blue.300`,chart2:`blue.500`,chart3:`blue.600`,chart4:`blue.700`,chart5:`blue.800`},dark:{primary:`blue.500`,ring:`blue.900`,chart1:`blue.300`,chart2:`blue.500`,chart3:`blue.600`,chart4:`blue.700`,chart5:`blue.800`}},indigo:{light:{primary:`indigo.600`,ring:`indigo.400`,chart1:`indigo.300`,chart2:`indigo.500`,chart3:`indigo.600`,chart4:`indigo.700`,chart5:`indigo.800`},dark:{primary:`indigo.500`,ring:`indigo.900`,chart1:`indigo.300`,chart2:`indigo.500`,chart3:`indigo.600`,chart4:`indigo.700`,chart5:`indigo.800`}},violet:{light:{primary:`violet.600`,ring:`violet.400`,chart1:`violet.300`,chart2:`violet.500`,chart3:`violet.600`,chart4:`violet.700`,chart5:`violet.800`},dark:{primary:`violet.500`,ring:`violet.900`,chart1:`violet.300`,chart2:`violet.500`,chart3:`violet.600`,chart4:`violet.700`,chart5:`violet.800`}},purple:{light:{primary:`purple.600`,ring:`purple.400`,chart1:`purple.300`,chart2:`purple.500`,chart3:`purple.600`,chart4:`purple.700`,chart5:`purple.800`},dark:{primary:`purple.500`,ring:`purple.900`,chart1:`purple.300`,chart2:`purple.500`,chart3:`purple.600`,chart4:`purple.700`,chart5:`purple.800`}},fuchsia:{light:{primary:`fuchsia.600`,ring:`fuchsia.400`,chart1:`fuchsia.300`,chart2:`fuchsia.500`,chart3:`fuchsia.600`,chart4:`fuchsia.700`,chart5:`fuchsia.800`},dark:{primary:`fuchsia.500`,ring:`fuchsia.900`,chart1:`fuchsia.300`,chart2:`fuchsia.500`,chart3:`fuchsia.600`,chart4:`fuchsia.700`,chart5:`fuchsia.800`}},pink:{light:{primary:`pink.600`,ring:`pink.400`,chart1:`pink.300`,chart2:`pink.500`,chart3:`pink.600`,chart4:`pink.700`,chart5:`pink.800`},dark:{primary:`pink.500`,ring:`pink.900`,chart1:`pink.300`,chart2:`pink.500`,chart3:`pink.600`,chart4:`pink.700`,chart5:`pink.800`}},rose:{light:{primary:`rose.600`,ring:`rose.400`,chart1:`rose.300`,chart2:`rose.500`,chart3:`rose.600`,chart4:`rose.700`,chart5:`rose.800`},dark:{primary:`rose.500`,ring:`rose.900`,chart1:`rose.300`,chart2:`rose.500`,chart3:`rose.600`,chart4:`rose.700`,chart5:`rose.800`}}},c={classic:{light:{destructive:`red.600`,success:`green.600`,warning:`yellow.600`,info:`blue.600`},dark:{destructive:`red.400`,success:`green.400`,warning:`yellow.400`,info:`blue.400`}},vivid:{light:{destructive:`red.500`,success:`emerald.500`,warning:`amber.500`,info:`sky.500`},dark:{destructive:`red.400`,success:`emerald.400`,warning:`amber.400`,info:`sky.400`}},subtle:{light:{destructive:`rose.500`,success:`emerald.600`,warning:`amber.600`,info:`indigo.600`},dark:{destructive:`rose.300`,success:`emerald.300`,warning:`amber.300`,info:`indigo.300`}},warm:{light:{destructive:`red.600`,success:`lime.600`,warning:`orange.600`,info:`amber.700`},dark:{destructive:`red.400`,success:`lime.400`,warning:`orange.400`,info:`amber.400`}},cool:{light:{destructive:`rose.600`,success:`teal.600`,warning:`cyan.700`,info:`blue.600`},dark:{destructive:`rose.400`,success:`teal.400`,warning:`cyan.400`,info:`blue.400`}},nature:{light:{destructive:`red.700`,success:`green.700`,warning:`lime.700`,info:`teal.700`},dark:{destructive:`red.300`,success:`green.300`,warning:`lime.300`,info:`teal.300`}},modern:{light:{destructive:`rose.600`,success:`emerald.600`,warning:`orange.600`,info:`sky.600`},dark:{destructive:`rose.400`,success:`emerald.400`,warning:`orange.400`,info:`sky.400`}},vibrant:{light:{destructive:`pink.600`,success:`lime.600`,warning:`amber.600`,info:`cyan.600`},dark:{destructive:`pink.400`,success:`lime.400`,warning:`amber.400`,info:`cyan.400`}},professional:{light:{destructive:`red.700`,success:`green.700`,warning:`amber.700`,info:`blue.700`},dark:{destructive:`red.300`,success:`green.300`,warning:`amber.300`,info:`blue.300`}},soft:{light:{destructive:`rose.500`,success:`teal.500`,warning:`yellow.500`,info:`violet.500`},dark:{destructive:`rose.300`,success:`teal.300`,warning:`yellow.300`,info:`violet.300`}},bold:{light:{destructive:`red.700`,success:`emerald.700`,warning:`orange.700`,info:`blue.700`},dark:{destructive:`red.300`,success:`emerald.300`,warning:`orange.300`,info:`blue.300`}},calm:{light:{destructive:`rose.600`,success:`teal.600`,warning:`amber.600`,info:`slate.600`},dark:{destructive:`rose.400`,success:`teal.400`,warning:`amber.400`,info:`slate.400`}},candy:{light:{destructive:`pink.500`,success:`emerald.500`,warning:`yellow.500`,info:`sky.500`},dark:{destructive:`pink.300`,success:`emerald.300`,warning:`yellow.300`,info:`sky.300`}},deep:{light:{destructive:`red.800`,success:`green.800`,warning:`amber.800`,info:`blue.800`},dark:{destructive:`red.200`,success:`green.200`,warning:`amber.200`,info:`blue.200`}},light:{light:{destructive:`red.500`,success:`green.500`,warning:`yellow.500`,info:`blue.500`},dark:{destructive:`red.400`,success:`green.400`,warning:`yellow.400`,info:`blue.400`}}};function l(e){return Object.keys(e)}function u(e,t){let n=document.getElementById(t);n&&n.remove();let r=document.createElement(`style`);r.id=t,r.textContent=e,document.head.appendChild(r)}function d(e){return!e.startsWith(`hsl(`)&&!e.startsWith(`oklch(`)}function f(e){return e.replace(/hsl\(/g,``).replace(/\)/g,``)}function p(e){let{presets:t,theme:n,radius:r=`0.625rem`,styleId:i=`SHADCN_THEME_STYLES`,styleTarget:a=`:root`,darkSelector:o=`class`,format:s=`hsl`}=e||{};u(y(t||!n?m(t):g(n),{radius:r,styleTarget:a,darkSelector:o,format:s}),i)}function m(e){let{base:t=`slate`,theme:n=`indigo`,feedback:r=`classic`}=e||{},i=o[t],a=s[n],l=c[r],u={light:{...i.light,...a.light,...l.light},dark:{...i.dark,...a.dark,...l.dark}},d=h(u);return{light:{...u.light,...d.light},dark:{...u.dark,...d.dark}}}function h(e){let{light:t,dark:n}=e;return{light:{sidebar:t.background,sidebarForeground:t.foreground,sidebarPrimary:t.primary,sidebarPrimaryForeground:t.primaryForeground,sidebarAccent:t.accent,sidebarAccentForeground:t.accentForeground,sidebarBorder:t.border,sidebarRing:t.ring},dark:{sidebar:n.background,sidebarForeground:n.foreground,sidebarPrimary:n.primary,sidebarPrimaryForeground:n.primaryForeground,sidebarAccent:n.accent,sidebarAccentForeground:n.accentForeground,sidebarBorder:n.border,sidebarRing:n.ring}}}function g(e){let{light:t,dark:n}=e,r={light:t,dark:n};if(!n){let e={};l(t).forEach(n=>{e[n]=_(t[n])}),r.dark=e}return r}function _(t){let n=e(v(t,`oklch`));return n=n.isLight()?n.darken(.3):n.lighten(.1),n.toOklchString()}function v(t,i,a=!1){let o=t;if(!d(t))i===`hsl`&&t.startsWith(`oklch(`)&&(o=e(t).toHslString()),i===`oklch`&&t.startsWith(`hsl(`)&&(o=e(t).toOklchString());else{let[e,a]=t.split(`.`);o=i===`hsl`?r[e][a]:n[e][a]}return a&&(o=f(o)),o}function y(e,t){let{light:n,dark:r}=e,{radius:o,format:s,styleTarget:c}=t,u=``,d=``;l(i).forEach(e=>{if(e===`radius`)u+=`${i[e]}: ${o};\n`;else{let t=v(n[e],s,!0),a=v(r[e],s,!0);u+=`${i[e]}: ${t};\n`,d+=`${i[e]}: ${a};\n`}});let f=b(n,s),p=`${c} {\n${u}\n${f}\n}`,m=t.darkSelector;return(m===`class`||m===`media`)&&(m=a[m]),p+=`\n\n${m} {\n${d}\n}`,p}function b(e,n){let r=[`primary`,`destructive`,`success`,`warning`,`info`,`carbon`],i=``;return r.forEach(r=>{let a=t(v(e[r],n),n===`hsl`?`hslString`:`oklchString`);l(a).forEach(e=>{let t=a[e];n===`hsl`&&(t=f(t)),i+=`${r}-${e}: ${t};\n`})}),i}export{p as createShadcnTheme};

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@soybeanjs/shadcn-theme",
+  "type": "module",
+  "version": "0.0.1",
+  "description": "A powerful and flexible shadcn/ui theme generator with support for dynamic CSS variable injection, preset color schemes, and light/dark mode switching.",
+  "author": {
+    "name": "Soybean",
+    "email": "soybeanjs@outlook.com",
+    "url": "https://github.com/soybeanjs"
+  },
+  "license": "MIT",
+  "homepage": "https://github.com/soybeanjs/shadcn-theme",
+  "repository": {
+    "url": "https://github.com/soybeanjs/shadcn-theme.git"
+  },
+  "bugs": {
+    "url": "https://github.com/soybeanjs/shadcn-theme/issues"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@soybeanjs/colord": "^0.3.4"
+  },
+  "devDependencies": {
+    "@soybeanjs/cli": "1.4.4",
+    "@soybeanjs/eslint-config": "1.7.5",
+    "@types/node": "25.0.9",
+    "eslint": "9.39.2",
+    "lint-staged": "16.2.7",
+    "simple-git-hooks": "2.13.1",
+    "tsdown": "0.19.0",
+    "tsx": "4.21.0",
+    "typescript": "5.9.3"
+  },
+  "simple-git-hooks": {
+    "commit-msg": "pnpm soy git-commit-verify",
+    "pre-commit": "pnpm typecheck && pnpm lint-staged"
+  },
+  "lint-staged": {
+    "*": "eslint --fix"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "cleanup": "soy cleanup",
+    "commit": "soy git-commit",
+    "dev": "tsup --watch",
+    "lint": "eslint . --fix",
+    "publish-pkg": "pnpm publish --access public",
+    "release": "soy release",
+    "typecheck": "tsc --noEmit --skipLibCheck",
+    "update-pkg": "soy ncu"
+  }
+}