@charstudios/pallet 0.2.0 → 0.3.1
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.md +47 -13
- package/dist/{chunk-3JRKA6NS.js → chunk-M7SJIMSX.js} +98 -97
- package/dist/chunk-M7SJIMSX.js.map +1 -0
- package/dist/{index-wWkmeDkd.d.ts → index-C8-t5s-1.d.ts} +3 -3
- package/dist/index.d.ts +3 -3
- package/dist/index.js +96 -95
- package/dist/index.js.map +1 -1
- package/dist/presets/index.d.ts +1 -1
- package/dist/presets/index.js +1 -1
- package/dist/server.d.ts +2 -2
- package/dist/server.js +1 -1
- package/dist/styles/variant-frosted.css +58 -203
- package/dist/styles/variant-toon.css +282 -175
- package/package.json +1 -1
- package/dist/chunk-3JRKA6NS.js.map +0 -1
package/README.md
CHANGED
|
@@ -5,7 +5,7 @@ A runtime, hook-driven theming layer for **shadcn/ui** apps. Pallet gives you an
|
|
|
5
5
|
Built for reuse across every Char Studios product: install it once, wrap your app, and every project shares the same theming system.
|
|
6
6
|
|
|
7
7
|
- **Runtime theming** — change any token live; no rebuild, no CSS regeneration.
|
|
8
|
-
- **Variants/skins** — ship `flat` (crisp), `toon` (
|
|
8
|
+
- **Variants/skins** — ship `flat` (crisp), `toon` (cel-shaded lips on surfaces only), and `frosted` (quiet glass) — or define your own.
|
|
9
9
|
- **Full token control** — colors (light + dark, OKLCH), typography (with Google Fonts auto-loading), radius scale, shadow ramp, density, and motion.
|
|
10
10
|
- **Presets** — start from a named preset and layer overrides on top; `reset()` returns to baseline.
|
|
11
11
|
- **SSR-safe** — inline the initial theme from a Server Component to avoid a flash of the wrong theme.
|
|
@@ -37,7 +37,7 @@ shadcn/ui styles everything through CSS custom properties (`--primary`, `--radiu
|
|
|
37
37
|
1. Takes a **`ThemeConfig`** (a preset + your overrides).
|
|
38
38
|
2. **Resolves** it into a flat map of CSS variables for the active color scheme.
|
|
39
39
|
3. **Injects** those variables onto the document root (or a scoped element) at runtime.
|
|
40
|
-
4. Sets a **`data-pallet-variant`** attribute so the shipped **variant stylesheets** can restyle surfaces (
|
|
40
|
+
4. Sets a **`data-pallet-variant`** attribute so the shipped **variant stylesheets** can restyle surfaces (lips, glass, borders) that aren't expressible through tokens alone.
|
|
41
41
|
|
|
42
42
|
```
|
|
43
43
|
ThemeConfig (preset + overrides)
|
|
@@ -129,11 +129,37 @@ export function ThemeButtons() {
|
|
|
129
129
|
|
|
130
130
|
## Presets
|
|
131
131
|
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
132
|
+
Each built-in preset pairs a token palette with a matching **variant skin**. The previews below use the **same component gallery** (buttons, inputs, badges, tabs, alerts, select, card, avatar) so you can compare Flat, Toon, and Frosted side by side.
|
|
133
|
+
|
|
134
|
+
### `flat`
|
|
135
|
+
|
|
136
|
+
Crisp hairline borders, minimal shadows, tighter radius — the default shadcn feel.
|
|
137
|
+
|
|
138
|
+
<p>
|
|
139
|
+
<img src="./docs/skins/flat.png" alt="Flat skin preview" width="720" />
|
|
140
|
+
</p>
|
|
141
|
+
|
|
142
|
+
### `toon`
|
|
143
|
+
|
|
144
|
+
Cel-shaded / neo-brutalist skin for **real surfaces only** (cards, buttons, inputs, badges, tabs, alerts, overlays…):
|
|
145
|
+
|
|
146
|
+
- Moderate radius, **no soft shadows**
|
|
147
|
+
- Outline and thick bottom lip share one auto-darkened color from `--toon-fill` (`color-mix` toward black)
|
|
148
|
+
- Ghost buttons stay borderless until hover / focus
|
|
149
|
+
- Layout shells, sidebar nav rows, and wrappers stay flat
|
|
150
|
+
- Main Sidebar panel is square-edged (hard right edge, no rounded lip tile)
|
|
151
|
+
|
|
152
|
+
<p>
|
|
153
|
+
<img src="./docs/skins/toon.png" alt="Toon skin preview" width="720" />
|
|
154
|
+
</p>
|
|
155
|
+
|
|
156
|
+
### `frosted`
|
|
157
|
+
|
|
158
|
+
Quiet glass: light backdrop blur, hairline luminous borders, translucent fills — restrained, not heavy.
|
|
159
|
+
|
|
160
|
+
<p>
|
|
161
|
+
<img src="./docs/skins/frosted.png" alt="Frosted skin preview" width="720" />
|
|
162
|
+
</p>
|
|
137
163
|
|
|
138
164
|
```tsx
|
|
139
165
|
import { presets, flat, toon, frosted, getPreset } from "@charstudios/pallet/presets";
|
|
@@ -266,9 +292,15 @@ export function ThemeEditor() {
|
|
|
266
292
|
|
|
267
293
|
## Variants (skins)
|
|
268
294
|
|
|
269
|
-
A variant is a named "skin" applied via the `data-pallet-variant` attribute (set automatically by the provider). The shipped stylesheets restyle shadcn surfaces that tokens can't reach on their own —
|
|
295
|
+
A variant is a named "skin" applied via the `data-pallet-variant` attribute (set automatically by the provider). The shipped stylesheets restyle shadcn surfaces that tokens can't reach on their own — chunk lips, glass, elevation treatment, and so on.
|
|
296
|
+
|
|
297
|
+
Skins target shadcn `data-slot` parts. They intentionally **do not** restyle every slot: layout shells (sidebar chrome, field groups, scroll areas, menu rows, etc.) stay flat so apps don't look like every div is a tile.
|
|
270
298
|
|
|
271
|
-
|
|
299
|
+
| Skin | What it does |
|
|
300
|
+
| --- | --- |
|
|
301
|
+
| `flat` | Hairline borders, tight radius, minimal elevation |
|
|
302
|
+
| `toon` | Cel-shaded outline + thick lip on surfaces; ghost borders on hover; square Sidebar |
|
|
303
|
+
| `frosted` | Light backdrop blur, hairline luminous borders, translucent fills |
|
|
272
304
|
|
|
273
305
|
Import all skins:
|
|
274
306
|
|
|
@@ -280,13 +312,13 @@ Or cherry-pick to reduce CSS:
|
|
|
280
312
|
|
|
281
313
|
```css
|
|
282
314
|
@import "@charstudios/pallet/styles/base";
|
|
283
|
-
@import "@charstudios/pallet/styles/
|
|
315
|
+
@import "@charstudios/pallet/styles/toon";
|
|
284
316
|
```
|
|
285
317
|
|
|
286
318
|
Switch at runtime:
|
|
287
319
|
|
|
288
320
|
```tsx
|
|
289
|
-
useThemeControls().setVariant("
|
|
321
|
+
useThemeControls().setVariant("toon");
|
|
290
322
|
```
|
|
291
323
|
|
|
292
324
|
The variant stylesheets are wrapped in the `pallet-variants` cascade layer, so your own app styles always take precedence.
|
|
@@ -421,7 +453,7 @@ import type {
|
|
|
421
453
|
|
|
422
454
|
## FAQ
|
|
423
455
|
|
|
424
|
-
**Does this modify my shadcn components?** No. It only injects CSS variables and adds a `data-pallet-variant` attribute; the variant stylesheets restyle via `data-slot` selectors
|
|
456
|
+
**Does this modify my shadcn components?** No. It only injects CSS variables and adds a `data-pallet-variant` attribute; the variant stylesheets restyle via `data-slot` selectors on real surfaces (not every layout wrapper). Components need modern shadcn `data-slot` attributes for the skins to attach.
|
|
425
457
|
|
|
426
458
|
**Does it replace `next-themes`?** It can. Pallet manages the `.dark` class and light/dark/system itself. If you already use `next-themes`, use `scope="self"` or let one own the `.dark` class to avoid conflicts.
|
|
427
459
|
|
|
@@ -429,6 +461,8 @@ import type {
|
|
|
429
461
|
|
|
430
462
|
**Can users export/share a theme?** Yes. Use `serializeTheme(theme)` / `deserializeTheme(json)` from `@charstudios/pallet/server`, and feed a saved override back in via `defaultOverride` or `updateTheme`.
|
|
431
463
|
|
|
464
|
+
**Why don't sidebar nav items get Toon lips?** By design. Toon only chunks interactive surfaces (cards, buttons, inputs, overlays…). Sidebar shells stay square and menu rows stay flat so dense admin UIs don't look tiled.
|
|
465
|
+
|
|
432
466
|
---
|
|
433
467
|
|
|
434
|
-
MIT
|
|
468
|
+
MIT © Char Studios
|
|
@@ -182,27 +182,27 @@ var frosted = {
|
|
|
182
182
|
googleFonts: ["Inter"]
|
|
183
183
|
},
|
|
184
184
|
radius: {
|
|
185
|
-
base: "
|
|
185
|
+
base: "0.75rem",
|
|
186
186
|
scale: {
|
|
187
|
-
sm: 0.
|
|
188
|
-
md: 0.
|
|
187
|
+
sm: 0.55,
|
|
188
|
+
md: 0.8,
|
|
189
189
|
lg: 1,
|
|
190
|
-
xl: 1.
|
|
191
|
-
"2xl": 1.
|
|
192
|
-
"3xl": 1.
|
|
193
|
-
"4xl":
|
|
190
|
+
xl: 1.2,
|
|
191
|
+
"2xl": 1.4,
|
|
192
|
+
"3xl": 1.6,
|
|
193
|
+
"4xl": 1.8
|
|
194
194
|
}
|
|
195
195
|
},
|
|
196
196
|
elevation: {
|
|
197
197
|
shadows: {
|
|
198
|
-
xs: "
|
|
199
|
-
sm: "
|
|
200
|
-
md: "0
|
|
201
|
-
lg: "0
|
|
202
|
-
xl: "0
|
|
198
|
+
xs: "none",
|
|
199
|
+
sm: "none",
|
|
200
|
+
md: "0 4px 16px -8px oklch(0.45 0.08 240 / 0.12)",
|
|
201
|
+
lg: "0 10px 28px -12px oklch(0.45 0.08 240 / 0.16)",
|
|
202
|
+
xl: "0 18px 40px -16px oklch(0.45 0.08 240 / 0.2)"
|
|
203
203
|
},
|
|
204
|
-
borderStrength: 0.
|
|
205
|
-
level: "
|
|
204
|
+
borderStrength: 0.35,
|
|
205
|
+
level: "sm"
|
|
206
206
|
},
|
|
207
207
|
density: {
|
|
208
208
|
spacing: "0.25rem",
|
|
@@ -217,72 +217,72 @@ var frosted = {
|
|
|
217
217
|
|
|
218
218
|
// src/presets/toon.ts
|
|
219
219
|
var light3 = {
|
|
220
|
-
background: "oklch(0.
|
|
221
|
-
foreground: "oklch(0.
|
|
220
|
+
background: "oklch(0.965 0.005 260)",
|
|
221
|
+
foreground: "oklch(0.22 0.02 260)",
|
|
222
222
|
card: "oklch(1 0 0)",
|
|
223
|
-
cardForeground: "oklch(0.
|
|
223
|
+
cardForeground: "oklch(0.22 0.02 260)",
|
|
224
224
|
popover: "oklch(1 0 0)",
|
|
225
|
-
popoverForeground: "oklch(0.
|
|
226
|
-
primary: "oklch(0.
|
|
227
|
-
primaryForeground: "oklch(0.99 0.
|
|
228
|
-
secondary: "oklch(0.
|
|
229
|
-
secondaryForeground: "oklch(0.
|
|
230
|
-
muted: "oklch(0.
|
|
231
|
-
mutedForeground: "oklch(0.
|
|
232
|
-
accent: "oklch(0.
|
|
233
|
-
accentForeground: "oklch(0.
|
|
234
|
-
destructive: "oklch(0.
|
|
225
|
+
popoverForeground: "oklch(0.22 0.02 260)",
|
|
226
|
+
primary: "oklch(0.55 0.19 255)",
|
|
227
|
+
primaryForeground: "oklch(0.99 0.005 255)",
|
|
228
|
+
secondary: "oklch(0.96 0.01 260)",
|
|
229
|
+
secondaryForeground: "oklch(0.28 0.03 260)",
|
|
230
|
+
muted: "oklch(0.95 0.008 260)",
|
|
231
|
+
mutedForeground: "oklch(0.52 0.02 260)",
|
|
232
|
+
accent: "oklch(0.94 0.03 255)",
|
|
233
|
+
accentForeground: "oklch(0.4 0.12 255)",
|
|
234
|
+
destructive: "oklch(0.58 0.22 25)",
|
|
235
235
|
destructiveForeground: "oklch(0.99 0 0)",
|
|
236
|
-
border: "oklch(0.
|
|
237
|
-
input: "oklch(0
|
|
238
|
-
ring: "oklch(0.
|
|
239
|
-
chart1: "oklch(0.
|
|
240
|
-
chart2: "oklch(0.62 0.
|
|
241
|
-
chart3: "oklch(0.
|
|
242
|
-
chart4: "oklch(0.
|
|
243
|
-
chart5: "oklch(0.
|
|
244
|
-
sidebar: "oklch(0
|
|
245
|
-
sidebarForeground: "oklch(0.
|
|
246
|
-
sidebarPrimary: "oklch(0.
|
|
247
|
-
sidebarPrimaryForeground: "oklch(0.99 0.
|
|
248
|
-
sidebarAccent: "oklch(0.
|
|
249
|
-
sidebarAccentForeground: "oklch(0.
|
|
250
|
-
sidebarBorder: "oklch(0.
|
|
251
|
-
sidebarRing: "oklch(0.
|
|
236
|
+
border: "oklch(0.82 0.015 260)",
|
|
237
|
+
input: "oklch(1 0 0)",
|
|
238
|
+
ring: "oklch(0.55 0.19 255)",
|
|
239
|
+
chart1: "oklch(0.55 0.19 255)",
|
|
240
|
+
chart2: "oklch(0.62 0.18 300)",
|
|
241
|
+
chart3: "oklch(0.7 0.16 55)",
|
|
242
|
+
chart4: "oklch(0.65 0.17 145)",
|
|
243
|
+
chart5: "oklch(0.6 0.2 25)",
|
|
244
|
+
sidebar: "oklch(1 0 0)",
|
|
245
|
+
sidebarForeground: "oklch(0.22 0.02 260)",
|
|
246
|
+
sidebarPrimary: "oklch(0.55 0.19 255)",
|
|
247
|
+
sidebarPrimaryForeground: "oklch(0.99 0.005 255)",
|
|
248
|
+
sidebarAccent: "oklch(0.94 0.03 255)",
|
|
249
|
+
sidebarAccentForeground: "oklch(0.4 0.12 255)",
|
|
250
|
+
sidebarBorder: "oklch(0.82 0.015 260)",
|
|
251
|
+
sidebarRing: "oklch(0.55 0.19 255)"
|
|
252
252
|
};
|
|
253
253
|
var dark3 = {
|
|
254
|
-
background: "oklch(0.
|
|
255
|
-
foreground: "oklch(0.
|
|
256
|
-
card: "oklch(0.
|
|
257
|
-
cardForeground: "oklch(0.
|
|
258
|
-
popover: "oklch(0.
|
|
259
|
-
popoverForeground: "oklch(0.
|
|
260
|
-
primary: "oklch(0.
|
|
261
|
-
primaryForeground: "oklch(0.
|
|
262
|
-
secondary: "oklch(0.
|
|
263
|
-
secondaryForeground: "oklch(0.
|
|
264
|
-
muted: "oklch(0.
|
|
265
|
-
mutedForeground: "oklch(0.
|
|
266
|
-
accent: "oklch(0.32 0.05
|
|
267
|
-
accentForeground: "oklch(0.
|
|
268
|
-
destructive: "oklch(0.
|
|
254
|
+
background: "oklch(0.18 0.02 260)",
|
|
255
|
+
foreground: "oklch(0.96 0.01 260)",
|
|
256
|
+
card: "oklch(0.24 0.025 260)",
|
|
257
|
+
cardForeground: "oklch(0.96 0.01 260)",
|
|
258
|
+
popover: "oklch(0.24 0.025 260)",
|
|
259
|
+
popoverForeground: "oklch(0.96 0.01 260)",
|
|
260
|
+
primary: "oklch(0.68 0.16 255)",
|
|
261
|
+
primaryForeground: "oklch(0.18 0.03 260)",
|
|
262
|
+
secondary: "oklch(0.3 0.02 260)",
|
|
263
|
+
secondaryForeground: "oklch(0.96 0.01 260)",
|
|
264
|
+
muted: "oklch(0.3 0.02 260)",
|
|
265
|
+
mutedForeground: "oklch(0.7 0.02 260)",
|
|
266
|
+
accent: "oklch(0.32 0.05 255)",
|
|
267
|
+
accentForeground: "oklch(0.85 0.06 255)",
|
|
268
|
+
destructive: "oklch(0.68 0.18 22)",
|
|
269
269
|
destructiveForeground: "oklch(0.99 0 0)",
|
|
270
|
-
border: "oklch(1 0 0 /
|
|
271
|
-
input: "oklch(
|
|
272
|
-
ring: "oklch(0.
|
|
273
|
-
chart1: "oklch(0.
|
|
274
|
-
chart2: "oklch(0.
|
|
275
|
-
chart3: "oklch(0.
|
|
276
|
-
chart4: "oklch(0.
|
|
277
|
-
chart5: "oklch(0.
|
|
278
|
-
sidebar: "oklch(0.
|
|
279
|
-
sidebarForeground: "oklch(0.
|
|
280
|
-
sidebarPrimary: "oklch(0.
|
|
281
|
-
sidebarPrimaryForeground: "oklch(0.
|
|
282
|
-
sidebarAccent: "oklch(0.32 0.05
|
|
283
|
-
sidebarAccentForeground: "oklch(0.
|
|
284
|
-
sidebarBorder: "oklch(1 0 0 /
|
|
285
|
-
sidebarRing: "oklch(0.
|
|
270
|
+
border: "oklch(1 0 0 / 16%)",
|
|
271
|
+
input: "oklch(0.24 0.025 260)",
|
|
272
|
+
ring: "oklch(0.68 0.16 255)",
|
|
273
|
+
chart1: "oklch(0.68 0.16 255)",
|
|
274
|
+
chart2: "oklch(0.7 0.15 300)",
|
|
275
|
+
chart3: "oklch(0.75 0.14 55)",
|
|
276
|
+
chart4: "oklch(0.7 0.14 145)",
|
|
277
|
+
chart5: "oklch(0.68 0.18 25)",
|
|
278
|
+
sidebar: "oklch(0.22 0.025 260)",
|
|
279
|
+
sidebarForeground: "oklch(0.96 0.01 260)",
|
|
280
|
+
sidebarPrimary: "oklch(0.68 0.16 255)",
|
|
281
|
+
sidebarPrimaryForeground: "oklch(0.18 0.03 260)",
|
|
282
|
+
sidebarAccent: "oklch(0.32 0.05 255)",
|
|
283
|
+
sidebarAccentForeground: "oklch(0.85 0.06 255)",
|
|
284
|
+
sidebarBorder: "oklch(1 0 0 / 14%)",
|
|
285
|
+
sidebarRing: "oklch(0.68 0.16 255)"
|
|
286
286
|
};
|
|
287
287
|
var toon = {
|
|
288
288
|
name: "toon",
|
|
@@ -290,41 +290,42 @@ var toon = {
|
|
|
290
290
|
colors: { light: light3, dark: dark3 },
|
|
291
291
|
typography: {
|
|
292
292
|
sans: '"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif',
|
|
293
|
-
heading: '"
|
|
293
|
+
heading: '"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif',
|
|
294
294
|
mono: 'ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace',
|
|
295
|
-
googleFonts: ["Inter"
|
|
295
|
+
googleFonts: ["Inter"]
|
|
296
296
|
},
|
|
297
297
|
radius: {
|
|
298
|
-
base: "
|
|
299
|
-
// A slightly gentler ramp so large elements do not over-round.
|
|
298
|
+
base: "0.75rem",
|
|
300
299
|
scale: {
|
|
301
|
-
sm: 0.
|
|
302
|
-
md: 0.
|
|
300
|
+
sm: 0.55,
|
|
301
|
+
md: 0.75,
|
|
303
302
|
lg: 1,
|
|
304
|
-
xl: 1.
|
|
305
|
-
"2xl": 1.
|
|
306
|
-
"3xl": 1.
|
|
307
|
-
"4xl":
|
|
303
|
+
xl: 1.15,
|
|
304
|
+
"2xl": 1.35,
|
|
305
|
+
"3xl": 1.55,
|
|
306
|
+
"4xl": 1.75
|
|
308
307
|
}
|
|
309
308
|
},
|
|
310
309
|
elevation: {
|
|
310
|
+
// Hard lips live in the variant CSS — keep token shadows empty so utilities
|
|
311
|
+
// like `shadow-sm` do not reintroduce soft elevation.
|
|
311
312
|
shadows: {
|
|
312
|
-
xs: "
|
|
313
|
-
sm: "
|
|
314
|
-
md: "
|
|
315
|
-
lg: "
|
|
316
|
-
xl: "
|
|
313
|
+
xs: "none",
|
|
314
|
+
sm: "none",
|
|
315
|
+
md: "none",
|
|
316
|
+
lg: "none",
|
|
317
|
+
xl: "none"
|
|
317
318
|
},
|
|
318
|
-
borderStrength:
|
|
319
|
-
level: "
|
|
319
|
+
borderStrength: 1,
|
|
320
|
+
level: "none"
|
|
320
321
|
},
|
|
321
322
|
density: {
|
|
322
|
-
spacing: "0.
|
|
323
|
-
scale: 1
|
|
323
|
+
spacing: "0.25rem",
|
|
324
|
+
scale: 1
|
|
324
325
|
},
|
|
325
326
|
motion: {
|
|
326
|
-
duration:
|
|
327
|
-
easing: "cubic-bezier(0.
|
|
327
|
+
duration: 160,
|
|
328
|
+
easing: "cubic-bezier(0.2, 0.8, 0.2, 1)",
|
|
328
329
|
intensity: 1
|
|
329
330
|
}
|
|
330
331
|
};
|
|
@@ -341,5 +342,5 @@ function getPreset(name) {
|
|
|
341
342
|
var defaultPreset = flat;
|
|
342
343
|
|
|
343
344
|
export { defaultPreset, flat, frosted, getPreset, presets, toon };
|
|
344
|
-
//# sourceMappingURL=chunk-
|
|
345
|
-
//# sourceMappingURL=chunk-
|
|
345
|
+
//# sourceMappingURL=chunk-M7SJIMSX.js.map
|
|
346
|
+
//# sourceMappingURL=chunk-M7SJIMSX.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/presets/flat.ts","../src/presets/frosted.ts","../src/presets/toon.ts","../src/presets/index.ts"],"names":["light","dark"],"mappings":"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","file":"chunk-M7SJIMSX.js","sourcesContent":["import type { ColorTokens, ThemeConfig } from \"../core/types\";\r\n\r\nconst light: ColorTokens = {\r\n background: \"oklch(1 0 0)\",\r\n foreground: \"oklch(0.148 0.004 228.8)\",\r\n card: \"oklch(1 0 0)\",\r\n cardForeground: \"oklch(0.148 0.004 228.8)\",\r\n popover: \"oklch(1 0 0)\",\r\n popoverForeground: \"oklch(0.148 0.004 228.8)\",\r\n primary: \"oklch(0.514 0.222 16.935)\",\r\n primaryForeground: \"oklch(0.969 0.015 12.422)\",\r\n secondary: \"oklch(0.967 0.001 286.375)\",\r\n secondaryForeground: \"oklch(0.21 0.006 285.885)\",\r\n muted: \"oklch(0.963 0.002 197.1)\",\r\n mutedForeground: \"oklch(0.56 0.021 213.5)\",\r\n accent: \"oklch(0.963 0.002 197.1)\",\r\n accentForeground: \"oklch(0.218 0.008 223.9)\",\r\n destructive: \"oklch(0.577 0.245 27.325)\",\r\n destructiveForeground: \"oklch(0.985 0 0)\",\r\n border: \"oklch(0.925 0.005 214.3)\",\r\n input: \"oklch(0.925 0.005 214.3)\",\r\n ring: \"oklch(0.723 0.014 214.4)\",\r\n chart1: \"oklch(0.81 0.117 11.638)\",\r\n chart2: \"oklch(0.645 0.246 16.439)\",\r\n chart3: \"oklch(0.586 0.253 17.585)\",\r\n chart4: \"oklch(0.514 0.222 16.935)\",\r\n chart5: \"oklch(0.455 0.188 13.697)\",\r\n sidebar: \"oklch(0.987 0.002 197.1)\",\r\n sidebarForeground: \"oklch(0.148 0.004 228.8)\",\r\n sidebarPrimary: \"oklch(0.586 0.253 17.585)\",\r\n sidebarPrimaryForeground: \"oklch(0.969 0.015 12.422)\",\r\n sidebarAccent: \"oklch(0.963 0.002 197.1)\",\r\n sidebarAccentForeground: \"oklch(0.218 0.008 223.9)\",\r\n sidebarBorder: \"oklch(0.925 0.005 214.3)\",\r\n sidebarRing: \"oklch(0.723 0.014 214.4)\",\r\n};\r\n\r\nconst dark: ColorTokens = {\r\n background: \"oklch(0.148 0.004 228.8)\",\r\n foreground: \"oklch(0.987 0.002 197.1)\",\r\n card: \"oklch(0.218 0.008 223.9)\",\r\n cardForeground: \"oklch(0.987 0.002 197.1)\",\r\n popover: \"oklch(0.218 0.008 223.9)\",\r\n popoverForeground: \"oklch(0.987 0.002 197.1)\",\r\n primary: \"oklch(0.455 0.188 13.697)\",\r\n primaryForeground: \"oklch(0.969 0.015 12.422)\",\r\n secondary: \"oklch(0.274 0.006 286.033)\",\r\n secondaryForeground: \"oklch(0.985 0 0)\",\r\n muted: \"oklch(0.275 0.011 216.9)\",\r\n mutedForeground: \"oklch(0.723 0.014 214.4)\",\r\n accent: \"oklch(0.275 0.011 216.9)\",\r\n accentForeground: \"oklch(0.987 0.002 197.1)\",\r\n destructive: \"oklch(0.704 0.191 22.216)\",\r\n destructiveForeground: \"oklch(0.985 0 0)\",\r\n border: \"oklch(1 0 0 / 10%)\",\r\n input: \"oklch(1 0 0 / 15%)\",\r\n ring: \"oklch(0.56 0.021 213.5)\",\r\n chart1: \"oklch(0.81 0.117 11.638)\",\r\n chart2: \"oklch(0.645 0.246 16.439)\",\r\n chart3: \"oklch(0.586 0.253 17.585)\",\r\n chart4: \"oklch(0.514 0.222 16.935)\",\r\n chart5: \"oklch(0.455 0.188 13.697)\",\r\n sidebar: \"oklch(0.17 0.006 228.8)\",\r\n sidebarForeground: \"oklch(0.987 0.002 197.1)\",\r\n sidebarPrimary: \"oklch(0.514 0.222 16.935)\",\r\n sidebarPrimaryForeground: \"oklch(0.969 0.015 12.422)\",\r\n sidebarAccent: \"oklch(0.24 0.008 228.8)\",\r\n sidebarAccentForeground: \"oklch(0.987 0.002 197.1)\",\r\n sidebarBorder: \"oklch(1 0 0 / 10%)\",\r\n sidebarRing: \"oklch(0.56 0.021 213.5)\",\r\n};\r\n\r\n/**\r\n * The \"flat\" preset: crisp hairline borders, minimal shadows, tighter radius.\r\n * Mirrors the default Quill look and serves as the baseline variant.\r\n */\r\nexport const flat: ThemeConfig = {\r\n name: \"flat\",\r\n variant: \"flat\",\r\n colors: { light, dark },\r\n typography: {\r\n sans: 'ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif',\r\n heading:\r\n 'ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif',\r\n mono: 'ui-monospace, SFMono-Regular, Menlo, Consolas, \"Liberation Mono\", monospace',\r\n googleFonts: [],\r\n },\r\n radius: {\r\n base: \"0.45rem\",\r\n },\r\n elevation: {\r\n shadows: {\r\n xs: \"0 1px 2px 0 oklch(0 0 0 / 0.04)\",\r\n sm: \"0 1px 3px 0 oklch(0 0 0 / 0.06), 0 1px 2px -1px oklch(0 0 0 / 0.06)\",\r\n md: \"0 2px 6px -1px oklch(0 0 0 / 0.07), 0 1px 4px -2px oklch(0 0 0 / 0.06)\",\r\n lg: \"0 8px 16px -4px oklch(0 0 0 / 0.08), 0 2px 6px -2px oklch(0 0 0 / 0.06)\",\r\n xl: \"0 16px 32px -8px oklch(0 0 0 / 0.10), 0 4px 10px -4px oklch(0 0 0 / 0.06)\",\r\n },\r\n borderStrength: 0.1,\r\n level: \"none\",\r\n },\r\n density: {\r\n spacing: \"0.25rem\",\r\n scale: 1,\r\n },\r\n motion: {\r\n duration: 200,\r\n easing: \"cubic-bezier(0.22, 1, 0.36, 1)\",\r\n intensity: 1,\r\n },\r\n};\r\n","import type { ColorTokens, ThemeConfig } from \"../core/types\";\r\n\r\n/**\r\n * Light palette for Frosted: cool icy neutrals with translucent surfaces and a\r\n * soft sky-blue accent — designed so backdrop-blur skins can show through.\r\n */\r\nconst light: ColorTokens = {\r\n background: \"oklch(0.94 0.02 240)\",\r\n foreground: \"oklch(0.24 0.03 255)\",\r\n card: \"oklch(1 0.01 240 / 55%)\",\r\n cardForeground: \"oklch(0.24 0.03 255)\",\r\n popover: \"oklch(1 0.01 240 / 62%)\",\r\n popoverForeground: \"oklch(0.24 0.03 255)\",\r\n primary: \"oklch(0.62 0.12 240)\",\r\n primaryForeground: \"oklch(0.99 0.005 240)\",\r\n secondary: \"oklch(0.92 0.02 240 / 70%)\",\r\n secondaryForeground: \"oklch(0.3 0.04 255)\",\r\n muted: \"oklch(0.93 0.015 240 / 65%)\",\r\n mutedForeground: \"oklch(0.5 0.03 250)\",\r\n accent: \"oklch(0.9 0.04 230 / 70%)\",\r\n accentForeground: \"oklch(0.35 0.08 245)\",\r\n destructive: \"oklch(0.6 0.2 25)\",\r\n destructiveForeground: \"oklch(0.99 0 0)\",\r\n border: \"oklch(0.85 0.02 240 / 55%)\",\r\n input: \"oklch(0.97 0.01 240 / 50%)\",\r\n ring: \"oklch(0.62 0.14 235)\",\r\n chart1: \"oklch(0.62 0.12 240)\",\r\n chart2: \"oklch(0.68 0.1 200)\",\r\n chart3: \"oklch(0.58 0.14 280)\",\r\n chart4: \"oklch(0.72 0.08 180)\",\r\n chart5: \"oklch(0.66 0.11 320)\",\r\n sidebar: \"oklch(0.96 0.015 240 / 55%)\",\r\n sidebarForeground: \"oklch(0.24 0.03 255)\",\r\n sidebarPrimary: \"oklch(0.62 0.12 240)\",\r\n sidebarPrimaryForeground: \"oklch(0.99 0.005 240)\",\r\n sidebarAccent: \"oklch(0.9 0.04 230 / 70%)\",\r\n sidebarAccentForeground: \"oklch(0.35 0.08 245)\",\r\n sidebarBorder: \"oklch(0.85 0.02 240 / 50%)\",\r\n sidebarRing: \"oklch(0.62 0.14 235)\",\r\n};\r\n\r\n/** Dark palette: deep indigo glass over a cool night background. */\r\nconst dark: ColorTokens = {\r\n background: \"oklch(0.18 0.03 260)\",\r\n foreground: \"oklch(0.96 0.01 240)\",\r\n card: \"oklch(0.28 0.04 260 / 45%)\",\r\n cardForeground: \"oklch(0.96 0.01 240)\",\r\n popover: \"oklch(0.3 0.04 260 / 52%)\",\r\n popoverForeground: \"oklch(0.96 0.01 240)\",\r\n primary: \"oklch(0.72 0.12 230)\",\r\n primaryForeground: \"oklch(0.18 0.03 260)\",\r\n secondary: \"oklch(0.32 0.03 260 / 55%)\",\r\n secondaryForeground: \"oklch(0.96 0.01 240)\",\r\n muted: \"oklch(0.3 0.03 260 / 50%)\",\r\n mutedForeground: \"oklch(0.72 0.03 250)\",\r\n accent: \"oklch(0.36 0.05 250 / 55%)\",\r\n accentForeground: \"oklch(0.92 0.03 230)\",\r\n destructive: \"oklch(0.68 0.18 22)\",\r\n destructiveForeground: \"oklch(0.99 0 0)\",\r\n border: \"oklch(1 0 0 / 14%)\",\r\n input: \"oklch(1 0 0 / 10%)\",\r\n ring: \"oklch(0.7 0.12 230)\",\r\n chart1: \"oklch(0.72 0.12 230)\",\r\n chart2: \"oklch(0.7 0.1 200)\",\r\n chart3: \"oklch(0.66 0.14 280)\",\r\n chart4: \"oklch(0.74 0.08 180)\",\r\n chart5: \"oklch(0.68 0.11 320)\",\r\n sidebar: \"oklch(0.22 0.035 260 / 50%)\",\r\n sidebarForeground: \"oklch(0.96 0.01 240)\",\r\n sidebarPrimary: \"oklch(0.72 0.12 230)\",\r\n sidebarPrimaryForeground: \"oklch(0.18 0.03 260)\",\r\n sidebarAccent: \"oklch(0.36 0.05 250 / 55%)\",\r\n sidebarAccentForeground: \"oklch(0.92 0.03 230)\",\r\n sidebarBorder: \"oklch(1 0 0 / 12%)\",\r\n sidebarRing: \"oklch(0.7 0.12 230)\",\r\n};\r\n\r\n/**\r\n * The \"frosted\" preset: icy translucent surfaces paired with\r\n * `styles/variant-frosted.css` for backdrop-blur glassmorphism across slots.\r\n */\r\nexport const frosted: ThemeConfig = {\r\n name: \"frosted\",\r\n variant: \"frosted\",\r\n colors: { light, dark },\r\n typography: {\r\n sans: '\"Inter\", ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif',\r\n heading:\r\n '\"Inter\", ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif',\r\n mono: 'ui-monospace, SFMono-Regular, Menlo, Consolas, \"Liberation Mono\", monospace',\r\n googleFonts: [\"Inter\"],\r\n },\r\n radius: {\r\n base: \"0.75rem\",\r\n scale: {\r\n sm: 0.55,\r\n md: 0.8,\r\n lg: 1,\r\n xl: 1.2,\r\n \"2xl\": 1.4,\r\n \"3xl\": 1.6,\r\n \"4xl\": 1.8,\r\n },\r\n },\r\n elevation: {\r\n shadows: {\r\n xs: \"none\",\r\n sm: \"none\",\r\n md: \"0 4px 16px -8px oklch(0.45 0.08 240 / 0.12)\",\r\n lg: \"0 10px 28px -12px oklch(0.45 0.08 240 / 0.16)\",\r\n xl: \"0 18px 40px -16px oklch(0.45 0.08 240 / 0.2)\",\r\n },\r\n borderStrength: 0.35,\r\n level: \"sm\",\r\n },\r\n density: {\r\n spacing: \"0.25rem\",\r\n scale: 1.05,\r\n },\r\n motion: {\r\n duration: 260,\r\n easing: \"cubic-bezier(0.22, 1, 0.36, 1)\",\r\n intensity: 1,\r\n },\r\n};\r\n","import type { ColorTokens, ThemeConfig } from \"../core/types\";\r\n\r\n/**\r\n * Light palette for Toon: clean dashboard neutrals with a solid blue accent.\r\n * Cel-shaded / neo-brutalist — depth comes from thick bottom borders, not shadows.\r\n */\r\nconst light: ColorTokens = {\r\n background: \"oklch(0.965 0.005 260)\",\r\n foreground: \"oklch(0.22 0.02 260)\",\r\n card: \"oklch(1 0 0)\",\r\n cardForeground: \"oklch(0.22 0.02 260)\",\r\n popover: \"oklch(1 0 0)\",\r\n popoverForeground: \"oklch(0.22 0.02 260)\",\r\n primary: \"oklch(0.55 0.19 255)\",\r\n primaryForeground: \"oklch(0.99 0.005 255)\",\r\n secondary: \"oklch(0.96 0.01 260)\",\r\n secondaryForeground: \"oklch(0.28 0.03 260)\",\r\n muted: \"oklch(0.95 0.008 260)\",\r\n mutedForeground: \"oklch(0.52 0.02 260)\",\r\n accent: \"oklch(0.94 0.03 255)\",\r\n accentForeground: \"oklch(0.4 0.12 255)\",\r\n destructive: \"oklch(0.58 0.22 25)\",\r\n destructiveForeground: \"oklch(0.99 0 0)\",\r\n border: \"oklch(0.82 0.015 260)\",\r\n input: \"oklch(1 0 0)\",\r\n ring: \"oklch(0.55 0.19 255)\",\r\n chart1: \"oklch(0.55 0.19 255)\",\r\n chart2: \"oklch(0.62 0.18 300)\",\r\n chart3: \"oklch(0.7 0.16 55)\",\r\n chart4: \"oklch(0.65 0.17 145)\",\r\n chart5: \"oklch(0.6 0.2 25)\",\r\n sidebar: \"oklch(1 0 0)\",\r\n sidebarForeground: \"oklch(0.22 0.02 260)\",\r\n sidebarPrimary: \"oklch(0.55 0.19 255)\",\r\n sidebarPrimaryForeground: \"oklch(0.99 0.005 255)\",\r\n sidebarAccent: \"oklch(0.94 0.03 255)\",\r\n sidebarAccentForeground: \"oklch(0.4 0.12 255)\",\r\n sidebarBorder: \"oklch(0.82 0.015 260)\",\r\n sidebarRing: \"oklch(0.55 0.19 255)\",\r\n};\r\n\r\n/** Dark palette: ink surfaces with the same punched blue accent. */\r\nconst dark: ColorTokens = {\r\n background: \"oklch(0.18 0.02 260)\",\r\n foreground: \"oklch(0.96 0.01 260)\",\r\n card: \"oklch(0.24 0.025 260)\",\r\n cardForeground: \"oklch(0.96 0.01 260)\",\r\n popover: \"oklch(0.24 0.025 260)\",\r\n popoverForeground: \"oklch(0.96 0.01 260)\",\r\n primary: \"oklch(0.68 0.16 255)\",\r\n primaryForeground: \"oklch(0.18 0.03 260)\",\r\n secondary: \"oklch(0.3 0.02 260)\",\r\n secondaryForeground: \"oklch(0.96 0.01 260)\",\r\n muted: \"oklch(0.3 0.02 260)\",\r\n mutedForeground: \"oklch(0.7 0.02 260)\",\r\n accent: \"oklch(0.32 0.05 255)\",\r\n accentForeground: \"oklch(0.85 0.06 255)\",\r\n destructive: \"oklch(0.68 0.18 22)\",\r\n destructiveForeground: \"oklch(0.99 0 0)\",\r\n border: \"oklch(1 0 0 / 16%)\",\r\n input: \"oklch(0.24 0.025 260)\",\r\n ring: \"oklch(0.68 0.16 255)\",\r\n chart1: \"oklch(0.68 0.16 255)\",\r\n chart2: \"oklch(0.7 0.15 300)\",\r\n chart3: \"oklch(0.75 0.14 55)\",\r\n chart4: \"oklch(0.7 0.14 145)\",\r\n chart5: \"oklch(0.68 0.18 25)\",\r\n sidebar: \"oklch(0.22 0.025 260)\",\r\n sidebarForeground: \"oklch(0.96 0.01 260)\",\r\n sidebarPrimary: \"oklch(0.68 0.16 255)\",\r\n sidebarPrimaryForeground: \"oklch(0.18 0.03 260)\",\r\n sidebarAccent: \"oklch(0.32 0.05 255)\",\r\n sidebarAccentForeground: \"oklch(0.85 0.06 255)\",\r\n sidebarBorder: \"oklch(1 0 0 / 14%)\",\r\n sidebarRing: \"oklch(0.68 0.16 255)\",\r\n};\r\n\r\n/**\r\n * The \"toon\" preset: cel-shaded / neo-brutalist. Moderate radius, flat color,\r\n * zero soft shadows. Depth comes from `variant-toon.css` thick bottom borders\r\n * auto-darkened from each surface fill via `--toon-fill`.\r\n */\r\nexport const toon: ThemeConfig = {\r\n name: \"toon\",\r\n variant: \"toon\",\r\n colors: { light, dark },\r\n typography: {\r\n sans: '\"Inter\", ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif',\r\n heading:\r\n '\"Inter\", ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif',\r\n mono: 'ui-monospace, SFMono-Regular, Menlo, Consolas, \"Liberation Mono\", monospace',\r\n googleFonts: [\"Inter\"],\r\n },\r\n radius: {\r\n base: \"0.75rem\",\r\n scale: {\r\n sm: 0.55,\r\n md: 0.75,\r\n lg: 1,\r\n xl: 1.15,\r\n \"2xl\": 1.35,\r\n \"3xl\": 1.55,\r\n \"4xl\": 1.75,\r\n },\r\n },\r\n elevation: {\r\n // Hard lips live in the variant CSS — keep token shadows empty so utilities\r\n // like `shadow-sm` do not reintroduce soft elevation.\r\n shadows: {\r\n xs: \"none\",\r\n sm: \"none\",\r\n md: \"none\",\r\n lg: \"none\",\r\n xl: \"none\",\r\n },\r\n borderStrength: 1,\r\n level: \"none\",\r\n },\r\n density: {\r\n spacing: \"0.25rem\",\r\n scale: 1,\r\n },\r\n motion: {\r\n duration: 160,\r\n easing: \"cubic-bezier(0.2, 0.8, 0.2, 1)\",\r\n intensity: 1,\r\n },\r\n};\r\n","import type { ThemeConfig, VariantName } from \"../core/types\";\r\nimport { flat } from \"./flat\";\r\nimport { frosted } from \"./frosted\";\r\nimport { toon } from \"./toon\";\r\n\r\nexport { flat } from \"./flat\";\r\nexport { frosted } from \"./frosted\";\r\nexport { toon } from \"./toon\";\r\n\r\n/** All built-in presets, keyed by name. */\r\nexport const presets = {\r\n flat,\r\n toon,\r\n frosted,\r\n} satisfies Record<string, ThemeConfig>;\r\n\r\nexport type PresetName = keyof typeof presets;\r\n\r\n/** Returns a built-in preset by name, or undefined if it is not registered. */\r\nexport function getPreset(name: VariantName): ThemeConfig | undefined {\r\n return (presets as Record<string, ThemeConfig>)[name];\r\n}\r\n\r\n/** The default preset used when none is specified. */\r\nexport const defaultPreset: ThemeConfig = flat;\r\n"]}
|
|
@@ -158,9 +158,9 @@ declare const flat: ThemeConfig;
|
|
|
158
158
|
declare const frosted: ThemeConfig;
|
|
159
159
|
|
|
160
160
|
/**
|
|
161
|
-
* The "toon" preset:
|
|
162
|
-
*
|
|
163
|
-
*
|
|
161
|
+
* The "toon" preset: cel-shaded / neo-brutalist. Moderate radius, flat color,
|
|
162
|
+
* zero soft shadows. Depth comes from `variant-toon.css` thick bottom borders
|
|
163
|
+
* auto-darkened from each surface fill via `--toon-fill`.
|
|
164
164
|
*/
|
|
165
165
|
declare const toon: ThemeConfig;
|
|
166
166
|
|
package/dist/index.d.ts
CHANGED
|
@@ -386,9 +386,9 @@ declare const flat: ThemeConfig;
|
|
|
386
386
|
declare const frosted: ThemeConfig;
|
|
387
387
|
|
|
388
388
|
/**
|
|
389
|
-
* The "toon" preset:
|
|
390
|
-
*
|
|
391
|
-
*
|
|
389
|
+
* The "toon" preset: cel-shaded / neo-brutalist. Moderate radius, flat color,
|
|
390
|
+
* zero soft shadows. Depth comes from `variant-toon.css` thick bottom borders
|
|
391
|
+
* auto-darkened from each surface fill via `--toon-fill`.
|
|
392
392
|
*/
|
|
393
393
|
declare const toon: ThemeConfig;
|
|
394
394
|
|