@soybeanjs/shadcn-theme 0.2.2 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.en_US.md +31 -28
- package/README.md +26 -24
- package/dist/index.d.ts +21 -17
- package/dist/index.js +1 -1
- package/package.json +1 -1
package/README.en_US.md
CHANGED
|
@@ -37,7 +37,8 @@ const custom = createShadcnTheme({
|
|
|
37
37
|
primary: 'blue',
|
|
38
38
|
feedback: 'vivid',
|
|
39
39
|
sidebar: 'extended',
|
|
40
|
-
radius: '0.
|
|
40
|
+
radius: '0.625rem',
|
|
41
|
+
styleTarget: ':root',
|
|
41
42
|
darkSelector: 'class',
|
|
42
43
|
format: 'hsl'
|
|
43
44
|
});
|
|
@@ -67,18 +68,18 @@ applyTheme(theme.getCss({ primary: 'emerald' }));
|
|
|
67
68
|
|
|
68
69
|
### Custom Preset
|
|
69
70
|
|
|
70
|
-
|
|
71
|
+
Through the `preset` parameter, you can use custom color configurations to override the built-in base/primary/feedback/sidebar presets.
|
|
71
72
|
|
|
72
73
|
#### 1) When to use custom preset
|
|
73
74
|
|
|
74
|
-
-
|
|
75
|
-
- When using a custom preset,
|
|
75
|
+
- When built-in preset combinations cannot meet your design requirements, use `preset` to pass a custom color configuration.
|
|
76
|
+
- When using a custom preset, you can use `base`/`primary`/`feedback`/`sidebar` with `custom` value to apply the custom preset.
|
|
76
77
|
|
|
77
78
|
#### 2) Color values and `format`
|
|
78
79
|
|
|
79
|
-
- Each color value supports: Tailwind palette reference (e.g. `slate.500`), `hsl(...)`, `oklch(...)`, or
|
|
80
|
-
- `format: 'hsl'`: outputs `h s l [/ alpha]` (no outer `hsl(...)`); `oklch(...)`
|
|
81
|
-
- `format: 'oklch'`: outputs values with
|
|
80
|
+
- Each color value supports three forms: Tailwind palette reference (e.g. `slate.500`), `hsl(...)`, `oklch(...)`, or builtin color names (`inherit`, `currentColor`, `transparent`, `black`, `white`).
|
|
81
|
+
- `format: 'hsl'`: outputs `h s l [/ alpha]` (no outer `hsl(...)`); if input is `oklch(...)` it converts to hsl.
|
|
82
|
+
- `format: 'oklch'`: outputs values with outer `oklch(...)` wrapper; if input is `hsl(...)` it converts to oklch.
|
|
82
83
|
|
|
83
84
|
#### Quick example: Complete custom preset
|
|
84
85
|
|
|
@@ -183,12 +184,6 @@ const theme = createShadcnTheme({
|
|
|
183
184
|
const css = theme.getCss();
|
|
184
185
|
```
|
|
185
186
|
|
|
186
|
-
#### Notes
|
|
187
|
-
|
|
188
|
-
- When providing the `preset` parameter, the `base`, `primary`, `feedback`, and `sidebar` parameters will be ignored.
|
|
189
|
-
- The preset must include complete color definitions for both `light` and `dark` modes.
|
|
190
|
-
- It is recommended to start from the structure of built-in presets and modify according to your design needs.
|
|
191
|
-
|
|
192
187
|
## 📖 API Documentation
|
|
193
188
|
|
|
194
189
|
### `createShadcnTheme(options?: ThemeOptions)`
|
|
@@ -207,17 +202,17 @@ theme.getRadiusCss(radius?: string): string
|
|
|
207
202
|
|
|
208
203
|
#### ThemeOptions
|
|
209
204
|
|
|
210
|
-
| Parameter | Type
|
|
211
|
-
| -------------- |
|
|
212
|
-
| `base` | `BuiltinBasePresetKey`
|
|
213
|
-
| `primary` | `BuiltinPrimaryPresetKey`
|
|
214
|
-
| `feedback` | `BuiltinFeedbackPresetKey`
|
|
215
|
-
| `sidebar` | `'extended'`
|
|
216
|
-
| `preset` | `
|
|
217
|
-
| `radius` | `string`
|
|
218
|
-
| `styleTarget` | `'html' \| ':root'`
|
|
219
|
-
| `darkSelector` | `'class' \| 'media' \| string`
|
|
220
|
-
| `format` | `'hsl' \| 'oklch'`
|
|
205
|
+
| Parameter | Type | Default | Description |
|
|
206
|
+
| -------------- | -------------------------------------- | ------------ | -------------------------------------------------- |
|
|
207
|
+
| `base` | `BuiltinBasePresetKey \| 'custom'` | `'zinc'` | Base preset key |
|
|
208
|
+
| `primary` | `BuiltinPrimaryPresetKey \| 'custom'` | `'indigo'` | Primary preset key |
|
|
209
|
+
| `feedback` | `BuiltinFeedbackPresetKey \| 'custom'` | `'classic'` | Feedback preset key |
|
|
210
|
+
| `sidebar` | `'extended' \| 'custom'` | `'extended'` | Sidebar mode; `extended` derives from base/primary |
|
|
211
|
+
| `preset` | `CustomThemeColorPreset` | - | Custom color preset |
|
|
212
|
+
| `radius` | `string` | `'0.625rem'` | Global border radius |
|
|
213
|
+
| `styleTarget` | `'html' \| ':root'` | `':root'` | CSS variables mount selector |
|
|
214
|
+
| `darkSelector` | `'class' \| 'media' \| string` | `'class'` | Dark mode selector (custom string supported) |
|
|
215
|
+
| `format` | `'hsl' \| 'oklch'` | `'hsl'` | Output color format |
|
|
221
216
|
|
|
222
217
|
### Preset Configuration (PresetConfig)
|
|
223
218
|
|
|
@@ -227,12 +222,10 @@ interface PresetConfig {
|
|
|
227
222
|
primary?: BuiltinPrimaryPresetKey | 'custom';
|
|
228
223
|
feedback?: BuiltinFeedbackPresetKey | 'custom';
|
|
229
224
|
sidebar?: 'extended' | 'custom';
|
|
230
|
-
preset?:
|
|
225
|
+
preset?: CustomThemeColorPreset;
|
|
231
226
|
}
|
|
232
227
|
```
|
|
233
228
|
|
|
234
|
-
When using the `preset` parameter, other configuration parameters (base/primary/feedback/sidebar) will be ignored.
|
|
235
|
-
|
|
236
229
|
#### Feedback Palette Key (FeedbackPaletteKey)
|
|
237
230
|
|
|
238
231
|
| Style | Description | Use Cases |
|
|
@@ -303,7 +296,7 @@ Supports configuration of the following color variables:
|
|
|
303
296
|
|
|
304
297
|
### Color Value Format (ColorValue)
|
|
305
298
|
|
|
306
|
-
Supports
|
|
299
|
+
Supports the following color value formats:
|
|
307
300
|
|
|
308
301
|
1. **HSL Format**
|
|
309
302
|
|
|
@@ -327,6 +320,16 @@ Supports three color value formats:
|
|
|
327
320
|
'red.50';
|
|
328
321
|
```
|
|
329
322
|
|
|
323
|
+
4. **Built-in color names**
|
|
324
|
+
|
|
325
|
+
```typescript
|
|
326
|
+
'inherit';
|
|
327
|
+
'currentColor';
|
|
328
|
+
'transparent';
|
|
329
|
+
'black';
|
|
330
|
+
'white';
|
|
331
|
+
```
|
|
332
|
+
|
|
330
333
|
## 🎨 Usage Examples
|
|
331
334
|
|
|
332
335
|
### Example 1: Classic Blue Theme
|
package/README.md
CHANGED
|
@@ -69,12 +69,12 @@ applyTheme(theme.getCss({ primary: 'emerald' }));
|
|
|
69
69
|
|
|
70
70
|
### 自定义预设
|
|
71
71
|
|
|
72
|
-
通过 `preset`
|
|
72
|
+
通过 `preset` 参数，你可以使用自定义颜色配置，覆盖内置的 base/primary/feedback/sidebar 预设。
|
|
73
73
|
|
|
74
74
|
#### 1) 何时使用自定义预设
|
|
75
75
|
|
|
76
|
-
- 当内置预设组合无法满足设计需求时，可以使用 `preset`
|
|
77
|
-
-
|
|
76
|
+
- 当内置预设组合无法满足设计需求时，可以使用 `preset` 传入自定义颜色配置。
|
|
77
|
+
- 使用自定义预设时，可以通过 base/primary/feedback/sidebar 设置`custom`来应用自定义预设。
|
|
78
78
|
|
|
79
79
|
#### 2) 颜色值与 `format`
|
|
80
80
|
|
|
@@ -185,12 +185,6 @@ const theme = createShadcnTheme({
|
|
|
185
185
|
const css = theme.getCss();
|
|
186
186
|
```
|
|
187
187
|
|
|
188
|
-
#### 注意事项
|
|
189
|
-
|
|
190
|
-
- 当提供 `preset` 参数时，`base`、`primary`、`feedback`、`sidebar` 参数将被忽略。
|
|
191
|
-
- 预设必须包含 `light` 和 `dark` 两个模式的完整色值定义。
|
|
192
|
-
- 建议从内置预设的结构开始，根据设计需求进行修改。
|
|
193
|
-
|
|
194
188
|
## 📖 API 文档
|
|
195
189
|
|
|
196
190
|
### `createShadcnTheme(options?: ThemeOptions)`
|
|
@@ -209,17 +203,17 @@ theme.getRadiusCss(radius?: string): string
|
|
|
209
203
|
|
|
210
204
|
#### ThemeOptions
|
|
211
205
|
|
|
212
|
-
| 参数 | 类型
|
|
213
|
-
| -------------- |
|
|
214
|
-
| `base` | `BuiltinBasePresetKey`
|
|
215
|
-
| `primary` | `BuiltinPrimaryPresetKey`
|
|
216
|
-
| `feedback` | `BuiltinFeedbackPresetKey`
|
|
217
|
-
| `sidebar` | `'extended'`
|
|
218
|
-
| `preset` | `
|
|
219
|
-
| `radius` | `string`
|
|
220
|
-
| `styleTarget` | `'html' \| ':root'`
|
|
221
|
-
| `darkSelector` | `'class' \| 'media' \| string`
|
|
222
|
-
| `format` | `'hsl' \| 'oklch'`
|
|
206
|
+
| 参数 | 类型 | 默认值 | 描述 |
|
|
207
|
+
| -------------- | -------------------------------------- | ------------ | --------------------------------------------------- |
|
|
208
|
+
| `base` | `BuiltinBasePresetKey \| 'custom'` | `'zinc'` | base 预设 key |
|
|
209
|
+
| `primary` | `BuiltinPrimaryPresetKey \| 'custom'` | `'indigo'` | primary 预设 key |
|
|
210
|
+
| `feedback` | `BuiltinFeedbackPresetKey \| 'custom'` | `'classic'` | feedback 预设 key |
|
|
211
|
+
| `sidebar` | `'extended' \| 'custom'` | `'extended'` | 侧边栏模式；`extended` 表示由 base/primary 自动派生 |
|
|
212
|
+
| `preset` | `CustomThemeColorPreset` | - | 自定义颜色预设 |
|
|
213
|
+
| `radius` | `string` | `'0.625rem'` | 全局圆角 |
|
|
214
|
+
| `styleTarget` | `'html' \| ':root'` | `':root'` | CSS 变量挂载目标选择器 |
|
|
215
|
+
| `darkSelector` | `'class' \| 'media' \| string` | `'class'` | 深色模式选择器（支持自定义字符串） |
|
|
216
|
+
| `format` | `'hsl' \| 'oklch'` | `'hsl'` | 颜色输出格式 |
|
|
223
217
|
|
|
224
218
|
### 预设配置（PresetConfig）
|
|
225
219
|
|
|
@@ -229,12 +223,10 @@ interface PresetConfig {
|
|
|
229
223
|
primary?: BuiltinPrimaryPresetKey | 'custom';
|
|
230
224
|
feedback?: BuiltinFeedbackPresetKey | 'custom';
|
|
231
225
|
sidebar?: 'extended' | 'custom';
|
|
232
|
-
preset?:
|
|
226
|
+
preset?: CustomThemeColorPreset;
|
|
233
227
|
}
|
|
234
228
|
```
|
|
235
229
|
|
|
236
|
-
当使用 `preset` 参数时，其他配置参数（base/primary/feedback/sidebar）将被忽略。
|
|
237
|
-
|
|
238
230
|
#### 反馈色风格（FeedbackPaletteKey）
|
|
239
231
|
|
|
240
232
|
| 风格 | 描述 | 适用场景 |
|
|
@@ -305,7 +297,7 @@ interface PresetConfig {
|
|
|
305
297
|
|
|
306
298
|
### 颜色值格式（ColorValue）
|
|
307
299
|
|
|
308
|
-
|
|
300
|
+
支持以下几种颜色值格式：
|
|
309
301
|
|
|
310
302
|
1. **HSL 格式**
|
|
311
303
|
|
|
@@ -329,6 +321,16 @@ interface PresetConfig {
|
|
|
329
321
|
'red.50';
|
|
330
322
|
```
|
|
331
323
|
|
|
324
|
+
4. **内置颜色名称**
|
|
325
|
+
|
|
326
|
+
```typescript
|
|
327
|
+
'inherit';
|
|
328
|
+
'currentColor';
|
|
329
|
+
'transparent';
|
|
330
|
+
'black';
|
|
331
|
+
'white';
|
|
332
|
+
```
|
|
333
|
+
|
|
332
334
|
## 🎨 使用示例
|
|
333
335
|
|
|
334
336
|
### 示例 1: 经典蓝色主题
|
package/dist/index.d.ts
CHANGED
|
@@ -129,15 +129,19 @@ type BasePresetColorKey = Extract<ThemeColorKey, 'background' | 'foreground' | '
|
|
|
129
129
|
type PrimaryPresetColorKey = Extract<ThemeColorKey, 'primary' | 'ring'> | keyof ChartColors;
|
|
130
130
|
type FeedbackPresetColorKey = Extract<ThemeColorKey, 'destructive' | 'success' | 'warning' | 'info'>;
|
|
131
131
|
type SidebarPresetColorKey = keyof SidebarColors;
|
|
132
|
-
type
|
|
132
|
+
type Preset<K extends string> = {
|
|
133
133
|
light: { [key in K]: ColorValue };
|
|
134
134
|
dark: { [key in K]: ColorValue };
|
|
135
135
|
};
|
|
136
|
-
type
|
|
137
|
-
type
|
|
138
|
-
type
|
|
139
|
-
type
|
|
140
|
-
type
|
|
136
|
+
type BasePreset = Preset<BasePresetColorKey>;
|
|
137
|
+
type PrimaryPreset = Preset<PrimaryPresetColorKey>;
|
|
138
|
+
type FeedbackPreset = Preset<FeedbackPresetColorKey>;
|
|
139
|
+
type SidebarPreset = Preset<SidebarPresetColorKey>;
|
|
140
|
+
type ThemeColorPreset = Preset<ThemeColorKey>;
|
|
141
|
+
type CustomThemeColorPreset = {
|
|
142
|
+
light: Partial<ThemeColors>;
|
|
143
|
+
dark?: Partial<ThemeColors>;
|
|
144
|
+
};
|
|
141
145
|
type StyleTarget = 'html' | ':root';
|
|
142
146
|
type DarkSelector = 'class' | 'media';
|
|
143
147
|
type ColorFormat = 'hsl' | 'oklch';
|
|
@@ -148,35 +152,35 @@ interface PresetKeyConfig {
|
|
|
148
152
|
/**
|
|
149
153
|
* the base color key
|
|
150
154
|
*
|
|
151
|
-
* @default '
|
|
155
|
+
* @default 'zinc'
|
|
152
156
|
*/
|
|
153
|
-
base?: BuiltinBasePresetKey;
|
|
157
|
+
base?: BuiltinBasePresetKey | 'custom';
|
|
154
158
|
/**
|
|
155
159
|
* the primary color key
|
|
156
160
|
*
|
|
157
161
|
* @default 'indigo'
|
|
158
162
|
*/
|
|
159
|
-
primary?: BuiltinPrimaryPresetKey;
|
|
163
|
+
primary?: BuiltinPrimaryPresetKey | 'custom';
|
|
160
164
|
/**
|
|
161
165
|
* the feedback color key
|
|
162
166
|
*
|
|
163
167
|
* @default 'classic'
|
|
164
168
|
*/
|
|
165
|
-
feedback?: BuiltinFeedbackPresetKey;
|
|
169
|
+
feedback?: BuiltinFeedbackPresetKey | 'custom';
|
|
166
170
|
/**
|
|
167
171
|
* the sidebar style key
|
|
168
172
|
*
|
|
169
173
|
* @default 'extended'
|
|
170
174
|
*/
|
|
171
|
-
sidebar?: BuiltinSidebarPresetKey;
|
|
175
|
+
sidebar?: BuiltinSidebarPresetKey | 'custom';
|
|
172
176
|
}
|
|
173
177
|
interface PresetConfig extends PresetKeyConfig {
|
|
174
178
|
/**
|
|
175
179
|
* custom preset colors
|
|
176
180
|
*
|
|
177
|
-
* @description
|
|
181
|
+
* @description only used when preset is provided and one of the preset keys is 'custom'
|
|
178
182
|
*/
|
|
179
|
-
preset?:
|
|
183
|
+
preset?: CustomThemeColorPreset;
|
|
180
184
|
}
|
|
181
185
|
/**
|
|
182
186
|
* theme options
|
|
@@ -219,15 +223,15 @@ interface ThemeOptions extends PresetConfig, ThemeRadius {
|
|
|
219
223
|
/**
|
|
220
224
|
* builtin base color preset
|
|
221
225
|
*/
|
|
222
|
-
declare const builtinBasePreset: Record<BuiltinBasePresetKey,
|
|
226
|
+
declare const builtinBasePreset: Record<BuiltinBasePresetKey, BasePreset>;
|
|
223
227
|
/**
|
|
224
228
|
* builtin primary color preset
|
|
225
229
|
*/
|
|
226
|
-
declare const builtinPrimaryPreset: Record<BuiltinPrimaryPresetKey,
|
|
230
|
+
declare const builtinPrimaryPreset: Record<BuiltinPrimaryPresetKey, PrimaryPreset>;
|
|
227
231
|
/**
|
|
228
232
|
* builtin feedback color preset
|
|
229
233
|
*/
|
|
230
|
-
declare const builtinFeedbackPreset: Record<BuiltinFeedbackPresetKey,
|
|
234
|
+
declare const builtinFeedbackPreset: Record<BuiltinFeedbackPresetKey, FeedbackPreset>;
|
|
231
235
|
declare const builtinBasePresetKeys: BuiltinBasePresetKey[];
|
|
232
236
|
declare const builtinPrimaryPresetKeys: _soybeanjs_colord_palette0.TailwindPaletteKey[];
|
|
233
237
|
declare const builtinFeedbackPresetKeys: BuiltinFeedbackPresetKey[];
|
|
@@ -250,4 +254,4 @@ declare function createShadcnTheme(options?: ThemeOptions): {
|
|
|
250
254
|
getRadiusCss: (update?: string) => string;
|
|
251
255
|
};
|
|
252
256
|
//#endregion
|
|
253
|
-
export { type
|
|
257
|
+
export { type BasePreset, type BasePresetColorKey, type BuiltinBasePresetKey, type BuiltinFeedbackPresetKey, type BuiltinPrimaryPresetKey, type ChartColors, type ColorFormat, type ColorValue, type DarkSelector, type ExtendedColors, type FeedbackPreset, type FeedbackPresetColorKey, type HSLColor, type OKLCHColor, type PresetConfig, type PrimaryPreset, type PrimaryPresetColorKey, type ShadcnColors, type SidebarColors, type SidebarPreset, type SidebarPresetColorKey, type StyleTarget, type ThemeColorPreset, type ThemeColors, type ThemeOptions, type ThemeRadius, builtinBasePreset, builtinBasePresetKeys, builtinFeedbackPreset, builtinFeedbackPresetKeys, builtinPrimaryPreset, builtinPrimaryPresetKeys, createShadcnTheme };
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{colord as e}from"@soybeanjs/colord";import{generatePalette as t,simplePalette as n,tailwindPalette as r}from"@soybeanjs/colord/palette";function i(e){return Object.keys(e)}function a(e){return!e.startsWith(`hsl(`)&&!e.startsWith(`oklch(`)}function o(e){return e.replace(/hsl\(/g,``).replace(/\)/g,``)}const s=e=>[`inherit`,`currentColor`,`transparent`].includes(e);function c(t,i){let o=t;if(s(t))return o;if(t===`black`)return n.black[i];if(t===`white`)return n.white[i];if(a(t)){let[e,n]=t.split(`.`);o=r[e][n][i]}else i===`hsl`&&t.startsWith(`oklch(`)&&(o=e(t).toHslString()),i===`oklch`&&t.startsWith(`hsl(`)&&(o=e(t).toOklchString());return o}function l(e){let{base:t,primary:n,feedback:r,sidebar:i}=e;return`base:${t};primary:${n};feedback:${r};sidebar:${i}`}const u={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`},d={borderAlpha:`--border-alpha`,inputAlpha:`--input-alpha`,sidebarBorderAlpha:`--sidebar-border-alpha`},f={base:`neutral`,primary:`indigo`,feedback:`classic`},p={class:`.dark`,media:`@media (prefers-color-scheme: dark)`},m=`oklch(100% 0 0 / 0.1)`,h=`oklch(100% 0 0 / 0.15)`,g={stone:{light:{background:`white`,foreground:`stone.950`,card:`white`,cardForeground:`stone.950`,popover:`white`,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:m,input:h}},zinc:{light:{background:`white`,foreground:`zinc.950`,card:`white`,cardForeground:`zinc.950`,popover:`white`,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:m,input:h}},neutral:{light:{background:`white`,foreground:`neutral.950`,card:`white`,cardForeground:`neutral.950`,popover:`white`,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:m,input:h}},gray:{light:{background:`white`,foreground:`gray.950`,card:`white`,cardForeground:`gray.950`,popover:`white`,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:m,input:h}},slate:{light:{background:`white`,foreground:`slate.950`,card:`white`,cardForeground:`slate.950`,popover:`white`,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:m,input:h}}},_={stone:{light:{primary:`stone.800`,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.800`,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.800`,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.800`,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.800`,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.500`,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.500`,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.500`,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:`yellow.500`,ring:`yellow.400`,chart1:`yellow.300`,chart2:`yellow.500`,chart3:`yellow.600`,chart4:`yellow.700`,chart5:`yellow.800`},dark:{primary:`yellow.500`,ring:`yellow.900`,chart1:`yellow.300`,chart2:`yellow.500`,chart3:`yellow.600`,chart4:`yellow.700`,chart5:`yellow.800`}},lime:{light:{primary:`lime.500`,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.500`,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.500`,ring:`teal.400`,chart1:`teal.300`,chart2:`teal.500`,chart3:`teal.600`,chart4:`teal.700`,chart5:`teal.800`},dark:{primary:`teal.500`,ring:`teal.900`,chart1:`teal.300`,chart2:`teal.500`,chart3:`teal.600`,chart4:`teal.700`,chart5:`teal.800`}},cyan:{light:{primary:`cyan.500`,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.500`,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.500`,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.500`,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.500`,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.500`,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.500`,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.500`,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.500`,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`}}},v={classic:{light:{destructive:`red.500`,success:`green.500`,warning:`amber.500`,info:`blue.500`},dark:{destructive:`red.400`,success:`green.400`,warning:`amber.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.500`,warning:`amber.500`,info:`indigo.500`},dark:{destructive:`rose.300`,success:`emerald.300`,warning:`amber.300`,info:`indigo.300`}},warm:{light:{destructive:`red.500`,success:`lime.500`,warning:`orange.500`,info:`amber.600`},dark:{destructive:`red.400`,success:`lime.400`,warning:`orange.400`,info:`amber.400`}},cool:{light:{destructive:`rose.500`,success:`teal.500`,warning:`cyan.600`,info:`blue.500`},dark:{destructive:`rose.400`,success:`teal.400`,warning:`cyan.400`,info:`blue.400`}},nature:{light:{destructive:`red.500`,success:`green.600`,warning:`lime.600`,info:`teal.600`},dark:{destructive:`red.300`,success:`green.300`,warning:`lime.300`,info:`teal.300`}},modern:{light:{destructive:`red.500`,success:`emerald.500`,warning:`orange.500`,info:`sky.500`},dark:{destructive:`red.400`,success:`emerald.400`,warning:`orange.400`,info:`sky.400`}},vibrant:{light:{destructive:`red.500`,success:`lime.500`,warning:`amber.500`,info:`cyan.500`},dark:{destructive:`pink.400`,success:`lime.400`,warning:`amber.400`,info:`cyan.400`}},professional:{light:{destructive:`red.500`,success:`green.600`,warning:`amber.600`,info:`blue.600`},dark:{destructive:`red.300`,success:`green.300`,warning:`amber.300`,info:`blue.300`}},soft:{light:{destructive:`rose.400`,success:`teal.400`,warning:`yellow.400`,info:`violet.400`},dark:{destructive:`rose.300`,success:`teal.300`,warning:`yellow.300`,info:`violet.300`}},bold:{light:{destructive:`red.600`,success:`emerald.600`,warning:`orange.600`,info:`blue.600`},dark:{destructive:`red.300`,success:`emerald.300`,warning:`orange.300`,info:`blue.300`}},calm:{light:{destructive:`rose.500`,success:`teal.500`,warning:`amber.500`,info:`slate.500`},dark:{destructive:`rose.400`,success:`teal.400`,warning:`amber.400`,info:`slate.400`}},candy:{light:{destructive:`pink.400`,success:`emerald.400`,warning:`yellow.400`,info:`sky.400`},dark:{destructive:`pink.300`,success:`emerald.300`,warning:`yellow.300`,info:`sky.300`}},deep:{light:{destructive:`red.600`,success:`green.700`,warning:`amber.700`,info:`blue.700`},dark:{destructive:`red.200`,success:`green.200`,warning:`amber.200`,info:`blue.200`}},light:{light:{destructive:`red.400`,success:`emerald.400`,warning:`amber.400`,info:`sky.400`},dark:{destructive:`red.400`,success:`emerald.400`,warning:`amber.400`,info:`sky.400`}}},y=i(g),b=i(_),x=i(v);function S(e,t){let n,r,i,a;if(t){let e=w(t);n=e.base,r=e.primary,i=e.feedback,a=e.sidebar}else{let{base:t,primary:o,feedback:s}=e;n=g[t],r=_[o],i=v[s],a=C(n,r)}return{light:{...n.light,...r.light,...i.light,...a.light},dark:{...n.dark,...r.dark,...i.dark,...a.dark}}}function C(e,t){return{light:{sidebar:e.light.background,sidebarForeground:e.light.foreground,sidebarPrimary:t.light.primary,sidebarPrimaryForeground:e.light.primaryForeground,sidebarAccent:e.light.accent,sidebarAccentForeground:e.light.accentForeground,sidebarBorder:e.light.border,sidebarRing:t.light.ring},dark:{sidebar:e.dark.card,sidebarForeground:e.dark.foreground,sidebarPrimary:t.dark.primary,sidebarPrimaryForeground:e.dark.primaryForeground,sidebarAccent:e.dark.accent,sidebarAccentForeground:e.dark.accentForeground,sidebarBorder:e.dark.border,sidebarRing:t.dark.ring}}}function w(e){let{light:t,dark:n}=e;return{base:{light:{background:t.background,foreground:t.background,card:t.background,cardForeground:t.background,popover:t.background,popoverForeground:t.background,primaryForeground:t.background,secondary:t.background,secondaryForeground:t.background,muted:t.background,mutedForeground:t.background,accent:t.background,accentForeground:t.background,destructiveForeground:t.background,successForeground:t.background,warningForeground:t.background,infoForeground:t.background,carbon:t.background,carbonForeground:t.background,border:t.background,input:t.background},dark:{background:n.background,foreground:n.background,card:n.background,cardForeground:n.background,popover:n.background,popoverForeground:n.background,primaryForeground:n.background,secondary:n.background,secondaryForeground:n.background,muted:n.background,mutedForeground:n.background,accent:n.background,accentForeground:n.background,destructiveForeground:n.background,successForeground:n.background,warningForeground:n.background,infoForeground:n.background,carbon:n.background,carbonForeground:n.background,border:n.background,input:n.background}},primary:{light:{primary:t.primary,ring:t.ring,chart1:t.chart1,chart2:t.chart2,chart3:t.chart3,chart4:t.chart4,chart5:t.chart5},dark:{primary:n.primary,ring:n.ring,chart1:n.chart1,chart2:n.chart2,chart3:n.chart3,chart4:n.chart4,chart5:n.chart5}},feedback:{light:{destructive:t.destructive,success:t.success,warning:t.warning,info:t.info},dark:{destructive:n.destructive,success:n.success,warning:n.warning,info:n.info}},sidebar:{light:{sidebar:t.sidebar,sidebarForeground:t.sidebarForeground,sidebarPrimary:t.sidebarPrimary,sidebarPrimaryForeground:t.sidebarPrimaryForeground,sidebarAccent:t.sidebarAccent,sidebarAccentForeground:t.sidebarAccentForeground,sidebarBorder:t.sidebarBorder,sidebarRing:t.sidebarRing},dark:{sidebar:n.sidebar,sidebarForeground:n.sidebarForeground,sidebarPrimary:n.sidebarPrimary,sidebarPrimaryForeground:n.sidebarPrimaryForeground,sidebarAccent:n.sidebarAccent,sidebarAccentForeground:n.sidebarAccentForeground,sidebarBorder:n.sidebarBorder,sidebarRing:n.sidebarRing}}}}function T(e,t){let{light:n,dark:r}=e,{format:a,styleTarget:o}=t,s=``,c=``;i(u).forEach(e=>{s+=D(e,a,n),c+=D(e,a,r)});let l=k(n,a),d=`${o} {\n${s}\n${l}\n}`,f=t.darkSelector;(f===`class`||f===`media`)&&(f=p[f]);let m=k(r,a);return d+=`\n\n${f} {\n${c}\n${m}\n}`,d}function E(e,t=`:root`){return`${t} {\n--radius: ${e};\n}`}function D(e,t,n){let r=c(n[e],t);t===`hsl`&&(r=o(r));let{color:i,alphaCss:a}=O(r,t,e);r=i;let s=`${u[e]}: ${r};\n`;return s+=a,s}function O(e,t,n){if(s(e)||t===`oklch`||![`border`,`input`,`sidebarBorder`].includes(n))return{color:e,alphaCss:``};let[r,i=`1`]=e.split(`/`);r=r.trim(),i=i.trim();let a=Number.parseFloat(i);i.endsWith(`%`)&&(a/=100);let o=``;return n===`border`&&(o=`${d.borderAlpha}: ${a};\n`),n===`input`&&(o+=`${d.inputAlpha}: ${a};\n`),n===`sidebarBorder`&&(o+=`${d.sidebarBorderAlpha}: ${a};\n`),{color:r,alphaCss:o}}function k(e,n){let r=[`primary`,`destructive`,`success`,`warning`,`info`,`carbon`],a=``;return r.forEach(r=>{let s=t(c(e[r],n),n===`hsl`?`hslString`:`oklchString`);i(s).forEach(e=>{let t=s[e];n===`hsl`&&(t=o(t)),a+=`--${r}-${e}: ${t};\n`})}),a}function A(e){let{base:t=f.base,primary:n=f.primary,feedback:r=f.feedback,sidebar:i=`extended`,preset:a,radius:o=`0.625rem`,styleTarget:s=`:root`,darkSelector:c=`class`,format:u=`hsl`}=e||{},d=new Map,p=e=>{let o={base:e?.base??t,primary:e?.primary??n,feedback:e?.feedback??r,sidebar:e?.sidebar??i},f=l(o);if(d.has(f))return d.get(f);let p=T(S(o,e?.preset??a),{styleTarget:s,darkSelector:c,format:u});return d.set(f,p),p},m=e=>E(e??o,s);return{getCss:(e,t)=>`${m(t??o)}\n\n${p(e)}`,getColorCss:p,getRadiusCss:m}}export{g as builtinBasePreset,y as builtinBasePresetKeys,v as builtinFeedbackPreset,x as builtinFeedbackPresetKeys,_ as builtinPrimaryPreset,b as builtinPrimaryPresetKeys,A as createShadcnTheme};
|
|
1
|
+
import{colord as e}from"@soybeanjs/colord";import{generatePalette as t,simplePalette as n,tailwindPalette as r}from"@soybeanjs/colord/palette";function i(e){return Object.keys(e)}function a(e){return!e.startsWith(`hsl(`)&&!e.startsWith(`oklch(`)}function o(e){return e.replace(/hsl\(/g,``).replace(/\)/g,``)}const s=e=>[`inherit`,`currentColor`,`transparent`].includes(e);function c(t,i){let o=t;if(s(t))return o;if(t===`black`)return n.black[i];if(t===`white`)return n.white[i];if(a(t)){let[e,n]=t.split(`.`);o=r[e][n][i]}else i===`hsl`&&t.startsWith(`oklch(`)&&(o=e(t).toHslString()),i===`oklch`&&t.startsWith(`hsl(`)&&(o=e(t).toOklchString());return o}function l(e){let{base:t,primary:n,feedback:r,sidebar:i}=e;return`base:${t};primary:${n};feedback:${r};sidebar:${i}`}const u={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`},d={borderAlpha:`--border-alpha`,inputAlpha:`--input-alpha`,sidebarBorderAlpha:`--sidebar-border-alpha`},f={base:`zinc`,primary:`indigo`,feedback:`classic`,sidebar:`extended`},p={class:`.dark`,media:`@media (prefers-color-scheme: dark)`},m=`oklch(100% 0 0 / 0.1)`,h=`oklch(100% 0 0 / 0.15)`,g={stone:{light:{background:`white`,foreground:`stone.950`,card:`white`,cardForeground:`stone.950`,popover:`white`,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:m,input:h}},zinc:{light:{background:`white`,foreground:`zinc.950`,card:`white`,cardForeground:`zinc.950`,popover:`white`,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:m,input:h}},neutral:{light:{background:`white`,foreground:`neutral.950`,card:`white`,cardForeground:`neutral.950`,popover:`white`,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:m,input:h}},gray:{light:{background:`white`,foreground:`gray.950`,card:`white`,cardForeground:`gray.950`,popover:`white`,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:m,input:h}},slate:{light:{background:`white`,foreground:`slate.950`,card:`white`,cardForeground:`slate.950`,popover:`white`,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:m,input:h}}},_={stone:{light:{primary:`stone.800`,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.800`,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.800`,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.800`,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.800`,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.500`,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.500`,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.500`,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:`yellow.500`,ring:`yellow.400`,chart1:`yellow.300`,chart2:`yellow.500`,chart3:`yellow.600`,chart4:`yellow.700`,chart5:`yellow.800`},dark:{primary:`yellow.500`,ring:`yellow.900`,chart1:`yellow.300`,chart2:`yellow.500`,chart3:`yellow.600`,chart4:`yellow.700`,chart5:`yellow.800`}},lime:{light:{primary:`lime.500`,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.500`,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.500`,ring:`teal.400`,chart1:`teal.300`,chart2:`teal.500`,chart3:`teal.600`,chart4:`teal.700`,chart5:`teal.800`},dark:{primary:`teal.500`,ring:`teal.900`,chart1:`teal.300`,chart2:`teal.500`,chart3:`teal.600`,chart4:`teal.700`,chart5:`teal.800`}},cyan:{light:{primary:`cyan.500`,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.500`,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.500`,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.500`,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.500`,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.500`,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.500`,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.500`,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.500`,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`}}},v={classic:{light:{destructive:`red.500`,success:`green.500`,warning:`amber.500`,info:`blue.500`},dark:{destructive:`red.400`,success:`green.400`,warning:`amber.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.500`,warning:`amber.500`,info:`indigo.500`},dark:{destructive:`rose.300`,success:`emerald.300`,warning:`amber.300`,info:`indigo.300`}},warm:{light:{destructive:`red.500`,success:`lime.500`,warning:`orange.500`,info:`amber.600`},dark:{destructive:`red.400`,success:`lime.400`,warning:`orange.400`,info:`amber.400`}},cool:{light:{destructive:`rose.500`,success:`teal.500`,warning:`cyan.600`,info:`blue.500`},dark:{destructive:`rose.400`,success:`teal.400`,warning:`cyan.400`,info:`blue.400`}},nature:{light:{destructive:`red.500`,success:`green.600`,warning:`lime.600`,info:`teal.600`},dark:{destructive:`red.300`,success:`green.300`,warning:`lime.300`,info:`teal.300`}},modern:{light:{destructive:`red.500`,success:`emerald.500`,warning:`orange.500`,info:`sky.500`},dark:{destructive:`red.400`,success:`emerald.400`,warning:`orange.400`,info:`sky.400`}},vibrant:{light:{destructive:`red.500`,success:`lime.500`,warning:`amber.500`,info:`cyan.500`},dark:{destructive:`pink.400`,success:`lime.400`,warning:`amber.400`,info:`cyan.400`}},professional:{light:{destructive:`red.500`,success:`green.600`,warning:`amber.600`,info:`blue.600`},dark:{destructive:`red.300`,success:`green.300`,warning:`amber.300`,info:`blue.300`}},soft:{light:{destructive:`rose.400`,success:`teal.400`,warning:`yellow.400`,info:`violet.400`},dark:{destructive:`rose.300`,success:`teal.300`,warning:`yellow.300`,info:`violet.300`}},bold:{light:{destructive:`red.600`,success:`emerald.600`,warning:`orange.600`,info:`blue.600`},dark:{destructive:`red.300`,success:`emerald.300`,warning:`orange.300`,info:`blue.300`}},calm:{light:{destructive:`rose.500`,success:`teal.500`,warning:`amber.500`,info:`slate.500`},dark:{destructive:`rose.400`,success:`teal.400`,warning:`amber.400`,info:`slate.400`}},candy:{light:{destructive:`pink.400`,success:`emerald.400`,warning:`yellow.400`,info:`sky.400`},dark:{destructive:`pink.300`,success:`emerald.300`,warning:`yellow.300`,info:`sky.300`}},deep:{light:{destructive:`red.600`,success:`green.700`,warning:`amber.700`,info:`blue.700`},dark:{destructive:`red.200`,success:`green.200`,warning:`amber.200`,info:`blue.200`}},light:{light:{destructive:`red.400`,success:`emerald.400`,warning:`amber.400`,info:`sky.400`},dark:{destructive:`red.400`,success:`emerald.400`,warning:`amber.400`,info:`sky.400`}}},y=i(g),b=i(_),x=i(v),S=i(g.zinc.light),C=i(_.indigo.light),w=i(v.classic.light),T=[`sidebar`,`sidebarForeground`,`sidebarPrimary`,`sidebarPrimaryForeground`,`sidebarAccent`,`sidebarAccentForeground`,`sidebarBorder`,`sidebarRing`];function E(e,t){let{base:n,primary:r,feedback:i,sidebar:a}=e,o=D(e);if(!t)return o;n===`custom`&&S.forEach(e=>{o.light[e]=t.light[e]??o.light[e],o.dark[e]=t.dark?.[e]??o.dark[e]}),r===`custom`&&C.forEach(e=>{o.light[e]=t.light[e]??o.light[e],o.dark[e]=t.dark?.[e]??o.dark[e]}),i===`custom`&&w.forEach(e=>{o.light[e]=t.light[e]??o.light[e],o.dark[e]=t.dark?.[e]??o.dark[e]});let s=O(o);return Object.assign(o.light,s.light),Object.assign(o.dark,s.dark),a===`custom`&&T.forEach(e=>{o.light[e]=t.light[e]??o.light[e],o.dark[e]=t.dark?.[e]??o.dark[e]}),o}function D(e){let{base:t,primary:n,feedback:r,sidebar:i}=e;t===`custom`&&(t=f.base),n===`custom`&&(n=f.primary),r===`custom`&&(r=f.feedback),i===`custom`&&(i=f.sidebar);let a=g[t],o=_[n],s=v[r],c=O({light:{...a.light,...o.light},dark:{...a.dark,...o.dark}});return{light:{...a.light,...o.light,...s.light,...c.light},dark:{...a.dark,...o.dark,...s.dark,...c.dark}}}function O(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.card,sidebarForeground:n.foreground,sidebarPrimary:n.primary,sidebarPrimaryForeground:n.primaryForeground,sidebarAccent:n.accent,sidebarAccentForeground:n.accentForeground,sidebarBorder:n.border,sidebarRing:n.ring}}}function k(e,t){let{light:n,dark:r}=e,{format:a,styleTarget:o}=t,s=``,c=``;i(u).forEach(e=>{s+=j(e,a,n),c+=j(e,a,r)});let l=N(n,a),d=`${o} {\n${s}\n${l}\n}`,f=t.darkSelector;(f===`class`||f===`media`)&&(f=p[f]);let m=N(r,a);return d+=`\n\n${f} {\n${c}\n${m}\n}`,d}function A(e,t=`:root`){return`${t} {\n--radius: ${e};\n}`}function j(e,t,n){let r=c(n[e],t);t===`hsl`&&(r=o(r));let{color:i,alphaCss:a}=M(r,t,e);r=i;let s=`${u[e]}: ${r};\n`;return s+=a,s}function M(e,t,n){if(s(e)||t===`oklch`||![`border`,`input`,`sidebarBorder`].includes(n))return{color:e,alphaCss:``};let[r,i=`1`]=e.split(`/`);r=r.trim(),i=i.trim();let a=Number.parseFloat(i);i.endsWith(`%`)&&(a/=100);let o=``;return n===`border`&&(o=`${d.borderAlpha}: ${a};\n`),n===`input`&&(o+=`${d.inputAlpha}: ${a};\n`),n===`sidebarBorder`&&(o+=`${d.sidebarBorderAlpha}: ${a};\n`),{color:r,alphaCss:o}}function N(e,n){let r=[`primary`,`destructive`,`success`,`warning`,`info`,`carbon`],a=``;return r.forEach(r=>{let s=t(c(e[r],n),n===`hsl`?`hslString`:`oklchString`);i(s).forEach(e=>{let t=s[e];n===`hsl`&&(t=o(t)),a+=`--${r}-${e}: ${t};\n`})}),a}function P(e){let{base:t=f.base,primary:n=f.primary,feedback:r=f.feedback,sidebar:i=f.sidebar,preset:a,radius:o=`0.625rem`,styleTarget:s=`:root`,darkSelector:c=`class`,format:u=`hsl`}=e||{},d=new Map,p=e=>{let o={base:e?.base??t,primary:e?.primary??n,feedback:e?.feedback??r,sidebar:e?.sidebar??i},f=l(o);if(d.has(f))return d.get(f);let p=k(E(o,e?.preset??a),{styleTarget:s,darkSelector:c,format:u});return d.set(f,p),p},m=e=>A(e??o,s);return{getCss:(e,t)=>`${m(t??o)}\n\n${p(e)}`,getColorCss:p,getRadiusCss:m}}export{g as builtinBasePreset,y as builtinBasePresetKeys,v as builtinFeedbackPreset,x as builtinFeedbackPresetKeys,_ as builtinPrimaryPreset,b as builtinPrimaryPresetKeys,P as createShadcnTheme};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@soybeanjs/shadcn-theme",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.0",
|
|
4
4
|
"description": "A powerful and flexible shadcn/ui theme generator with support for dynamic CSS variable injection, preset color schemes, and light/dark mode switching.",
|
|
5
5
|
"homepage": "https://github.com/soybeanjs/shadcn-theme",
|
|
6
6
|
"bugs": {
|