@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.
Files changed (15) hide show
  1. package/README.md +47 -13
  2. package/dist/{chunk-3JRKA6NS.js → chunk-M7SJIMSX.js} +98 -97
  3. package/dist/chunk-M7SJIMSX.js.map +1 -0
  4. package/dist/{index-wWkmeDkd.d.ts → index-C8-t5s-1.d.ts} +3 -3
  5. package/dist/index.d.ts +3 -3
  6. package/dist/index.js +96 -95
  7. package/dist/index.js.map +1 -1
  8. package/dist/presets/index.d.ts +1 -1
  9. package/dist/presets/index.js +1 -1
  10. package/dist/server.d.ts +2 -2
  11. package/dist/server.js +1 -1
  12. package/dist/styles/variant-frosted.css +58 -203
  13. package/dist/styles/variant-toon.css +282 -175
  14. package/package.json +1 -1
  15. package/dist/chunk-3JRKA6NS.js.map +0 -1
package/dist/styles/variant-toon.css CHANGED
@@ -1,29 +1,29 @@
1
1
  /*
2
2
  * Toon variant skin.
3
3
  *
4
- * Soft, elevated, pill-shaped. Controls become rounded pills, surfaces float on
5
- * gentle tinted shadows, borders soften, and focus rings glow — applied across
6
- * the full shadcn data-slot surface set.
4
+ * Cel-shaded / neo-brutalist lips for real shadcn *surfaces* only
5
+ * (cards, buttons, inputs, overlays, …). Layout shells, sidebar chrome,
6
+ * menu rows, and other structural slots stay flat so apps do not look like
7
+ * every div is a chunky tile.
7
8
  */
8
9
 
9
10
  @layer pallet-variants {
10
11
  [data-pallet-variant="toon"] {
11
- --pallet-control-radius: 9999px;
12
- --pallet-surface-radius: var(--radius-2xl);
13
- --pallet-overlay-radius: var(--radius-xl);
14
- --pallet-chip-radius: 9999px;
15
- --pallet-surface-shadow: var(--shadow-md);
16
- --pallet-overlay-shadow: var(--shadow-lg);
17
- --pallet-control-shadow: var(--shadow-sm);
12
+ --toon-radius: var(--radius-lg);
13
+ --toon-radius-sm: var(--radius-md);
14
+ --toon-outline: 1.5px;
15
+ --toon-lip: 3.5px;
16
+ --toon-fill: var(--card);
18
17
  }
19
18
 
20
- /* ── Controls ─────────────────────────────────────────────────────────── */
19
+ /* ── Surfaces that get the toon chunk (outline + thick lip) ───────────── */
21
20
  [data-pallet-variant="toon"] :is(
21
+ /* Controls */
22
22
  [data-slot="button"],
23
23
  [data-slot="input"],
24
+ [data-slot="textarea"],
24
25
  [data-slot="select-trigger"],
25
26
  [data-slot="native-select"],
26
- [data-slot="native-select-wrapper"],
27
27
  [data-slot="combobox-trigger"],
28
28
  [data-slot="combobox-chip"],
29
29
  [data-slot="combobox-chip-input"],
@@ -31,62 +31,95 @@
31
31
  [data-slot="input-otp"],
32
32
  [data-slot="input-otp-slot"],
33
33
  [data-slot="input-group"],
34
+ [data-slot="input-group-button"],
34
35
  [data-slot="sidebar-input"],
35
36
  [data-slot="toggle"],
36
- [data-slot="toggle-group"],
37
37
  [data-slot="toggle-group-item"],
38
38
  [data-slot="pagination-link"],
39
- [data-slot="button-group"],
40
- [data-slot="input-group-button"],
41
39
  [data-slot="carousel-previous"],
42
40
  [data-slot="carousel-next"],
43
- [data-slot="sidebar-trigger"],
44
- [data-slot="sidebar-menu-button"],
45
- [data-slot="sidebar-menu-sub-button"],
46
- [data-slot="sidebar-group-action"],
47
- [data-slot="sidebar-menu-action"],
41
+ /* Chrome */
48
42
  [data-slot="badge"],
49
43
  [data-slot="kbd"],
50
- [data-slot="avatar-badge"]
51
- ) {
52
- border-radius: var(--pallet-control-radius);
53
- }
54
-
55
- [data-pallet-variant="toon"] :is(
56
- [data-slot="textarea"],
44
+ [data-slot="checkbox"],
45
+ [data-slot="radio-group-item"],
46
+ [data-slot="switch"],
47
+ [data-slot="slider-track"],
48
+ [data-slot="progress"],
49
+ /* Panels */
50
+ [data-slot="card"],
51
+ [data-slot="alert"],
52
+ [data-slot="accordion-item"],
53
+ [data-slot="tabs-list"],
54
+ [data-slot="tabs-trigger"],
55
+ [data-slot="table-container"],
56
+ [data-slot="item"],
57
57
  [data-slot="calendar"],
58
- [data-slot="input-group"],
59
- [data-slot="input-otp"]
58
+ /* Overlays / menus */
59
+ [data-slot="popover-content"],
60
+ [data-slot="dropdown-menu-content"],
61
+ [data-slot="dropdown-menu-sub-content"],
62
+ [data-slot="context-menu-content"],
63
+ [data-slot="context-menu-sub-content"],
64
+ [data-slot="menubar-content"],
65
+ [data-slot="menubar-sub-content"],
66
+ [data-slot="select-content"],
67
+ [data-slot="combobox-content"],
68
+ [data-slot="combobox-list"],
69
+ [data-slot="command"],
70
+ [data-slot="command-list"],
71
+ [data-slot="hover-card-content"],
72
+ [data-slot="tooltip-content"],
73
+ [data-slot="navigation-menu-content"],
74
+ [data-slot="dialog-content"],
75
+ [data-slot="alert-dialog-content"],
76
+ [data-slot="sheet-content"],
77
+ [data-slot="drawer-content"]
60
78
  ) {
61
- border-radius: var(--radius-lg);
79
+ border-style: solid;
80
+ border-width: var(--toon-outline);
81
+ border-bottom-width: var(--toon-lip);
82
+ border-color: color-mix(in oklch, var(--toon-fill) 68%, black);
83
+ border-radius: var(--toon-radius);
84
+ box-shadow: none !important;
85
+ filter: none;
86
+ text-shadow: none;
62
87
  }
63
88
 
89
+ /* ── Fill tokens ──────────────────────────────────────────────────────── */
64
90
  [data-pallet-variant="toon"] :is(
65
- [data-slot="button"],
66
- [data-slot="pagination-link"],
67
- [data-slot="carousel-previous"],
68
- [data-slot="carousel-next"],
69
- [data-slot="sidebar-menu-button"],
70
- [data-slot="toggle"],
71
- [data-slot="toggle-group-item"]
91
+ [data-slot="card"],
92
+ [data-slot="alert"],
93
+ [data-slot="item"],
94
+ [data-slot="accordion-item"],
95
+ [data-slot="table-container"],
96
+ [data-slot="calendar"]
72
97
  ) {
73
- box-shadow: var(--pallet-control-shadow);
74
- transition:
75
- box-shadow var(--motion-duration) var(--motion-ease),
76
- transform var(--motion-duration) var(--motion-ease),
77
- background-color var(--motion-duration) var(--motion-ease);
98
+ --toon-fill: var(--card);
78
99
  }
79
100
 
80
101
  [data-pallet-variant="toon"] :is(
81
- [data-slot="button"],
82
- [data-slot="pagination-link"],
83
- [data-slot="carousel-previous"],
84
- [data-slot="carousel-next"],
85
- [data-slot="sidebar-menu-button"],
86
- [data-slot="toggle"],
87
- [data-slot="toggle-group-item"]
88
- ):hover {
89
- box-shadow: var(--shadow-md);
102
+ [data-slot="popover-content"],
103
+ [data-slot="dropdown-menu-content"],
104
+ [data-slot="dropdown-menu-sub-content"],
105
+ [data-slot="context-menu-content"],
106
+ [data-slot="context-menu-sub-content"],
107
+ [data-slot="menubar-content"],
108
+ [data-slot="menubar-sub-content"],
109
+ [data-slot="select-content"],
110
+ [data-slot="combobox-content"],
111
+ [data-slot="combobox-list"],
112
+ [data-slot="command"],
113
+ [data-slot="command-list"],
114
+ [data-slot="hover-card-content"],
115
+ [data-slot="tooltip-content"],
116
+ [data-slot="navigation-menu-content"],
117
+ [data-slot="dialog-content"],
118
+ [data-slot="alert-dialog-content"],
119
+ [data-slot="sheet-content"],
120
+ [data-slot="drawer-content"]
121
+ ) {
122
+ --toon-fill: var(--popover);
90
123
  }
91
124
 
92
125
  [data-pallet-variant="toon"] :is(
@@ -97,149 +130,232 @@
97
130
  [data-slot="combobox-trigger"],
98
131
  [data-slot="combobox-chip-input"],
99
132
  [data-slot="command-input"],
133
+ [data-slot="input-otp"],
100
134
  [data-slot="input-otp-slot"],
101
135
  [data-slot="input-group"],
102
- [data-slot="sidebar-input"]
136
+ [data-slot="sidebar-input"],
137
+ [data-slot="checkbox"],
138
+ [data-slot="radio-group-item"]
103
139
  ) {
104
- background-color: var(--input);
105
- border-color: transparent;
140
+ --toon-fill: var(--background);
106
141
  }
107
142
 
108
143
  [data-pallet-variant="toon"] :is(
109
- [data-slot="input"],
110
- [data-slot="textarea"],
111
- [data-slot="select-trigger"],
112
- [data-slot="native-select"],
113
- [data-slot="combobox-trigger"],
114
- [data-slot="command-input"],
115
- [data-slot="input-otp-slot"],
116
- [data-slot="sidebar-input"]
117
- ):focus-visible {
118
- border-color: var(--ring);
119
- box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 30%, transparent);
120
- outline: none;
144
+ [data-slot="button"],
145
+ [data-slot="input-group-button"],
146
+ [data-slot="carousel-previous"],
147
+ [data-slot="carousel-next"],
148
+ [data-slot="pagination-link"]
149
+ ) {
150
+ --toon-fill: var(--primary);
121
151
  }
122
152
 
123
- [data-pallet-variant="toon"] :is(
124
- [data-slot="checkbox"],
125
- [data-slot="radio-group-item"],
126
- [data-slot="switch"],
127
- [data-slot="switch-thumb"],
128
- [data-slot="slider-track"],
129
- [data-slot="slider-range"],
130
- [data-slot="slider-thumb"],
131
- [data-slot="progress"],
132
- [data-slot="progress-indicator"],
133
- [data-slot="avatar"],
134
- [data-slot="avatar-fallback"],
135
- [data-slot="avatar-group"],
136
- [data-slot="skeleton"]
153
+ [data-pallet-variant="toon"] [data-slot="button"]:is(
154
+ [data-variant="outline"],
155
+ [data-variant="secondary"],
156
+ [class*="variant-outline"],
157
+ [class*="variant-secondary"]
137
158
  ) {
138
- border-radius: 9999px;
159
+ --toon-fill: var(--background);
160
+ }
161
+
162
+ [data-pallet-variant="toon"] [data-slot="button"]:is(
163
+ [data-variant="destructive"],
164
+ [class*="variant-destructive"],
165
+ [class*="bg-destructive"]
166
+ ) {
167
+ --toon-fill: var(--destructive);
168
+ }
169
+
170
+ /* Ghost: borderless until hover / focus */
171
+ [data-pallet-variant="toon"] [data-slot="button"]:is(
172
+ [data-variant="ghost"],
173
+ [class*="variant-ghost"]
174
+ ) {
175
+ --toon-fill: var(--accent);
176
+ border-color: transparent !important;
177
+ box-shadow: none !important;
178
+ transform: none;
139
179
  }
140
180
 
141
- [data-pallet-variant="toon"] [data-slot="checkbox"] {
142
- border-radius: var(--radius-sm);
181
+ [data-pallet-variant="toon"] [data-slot="button"]:is(
182
+ [data-variant="ghost"],
183
+ [class*="variant-ghost"]
184
+ ):is(:hover, :focus-visible) {
185
+ border-color: color-mix(in oklch, var(--toon-fill) 68%, black) !important;
186
+ }
187
+
188
+ /* Link: never a toon chunk */
189
+ [data-pallet-variant="toon"] [data-slot="button"]:is(
190
+ [data-variant="link"],
191
+ [class*="variant-link"]
192
+ ) {
193
+ border: none !important;
194
+ box-shadow: none !important;
195
+ transform: none;
143
196
  }
144
197
 
145
- /* ── Surfaces ─────────────────────────────────────────────────────────── */
146
198
  [data-pallet-variant="toon"] :is(
147
- [data-slot="card"],
148
- [data-slot="alert"],
149
- [data-slot="accordion-item"],
199
+ [data-slot="toggle"],
200
+ [data-slot="toggle-group-item"],
201
+ [data-slot="badge"],
202
+ [data-slot="kbd"],
150
203
  [data-slot="tabs-list"],
151
- [data-slot="table-container"],
152
- [data-slot="item"],
153
- [data-slot="item-group"],
154
- [data-slot="empty"],
155
- [data-slot="field-set"],
156
- [data-slot="sidebar"],
157
- [data-slot="sidebar-container"],
158
- [data-slot="sidebar-inner"],
159
- [data-slot="sidebar-group"],
160
- [data-slot="carousel"],
161
- [data-slot="chart"],
162
- [data-slot="scroll-area"],
163
- [data-slot="menubar"],
164
- [data-slot="navigation-menu-viewport"]
204
+ [data-slot="tabs-trigger"],
205
+ [data-slot="combobox-chip"]
165
206
  ) {
166
- border-radius: var(--pallet-surface-radius);
167
- box-shadow: var(--pallet-surface-shadow);
168
- border-color: var(--pallet-surface-border);
207
+ --toon-fill: var(--secondary);
169
208
  }
170
209
 
171
210
  [data-pallet-variant="toon"] :is(
172
- [data-slot="card"],
173
- [data-slot="alert"],
174
- [data-slot="item"],
175
- [data-slot="empty"],
176
- [data-slot="accordion-item"]
177
- ) {
178
- --tw-ring-color: var(--pallet-surface-border);
211
+ [data-slot="tabs-trigger"],
212
+ [data-slot="toggle"],
213
+ [data-slot="toggle-group-item"],
214
+ [data-slot="pagination-link"]
215
+ ):is([data-active="true"], [data-state="on"], [data-state="active"]) {
216
+ --toon-fill: var(--primary);
179
217
  }
180
218
 
181
- [data-pallet-variant="toon"] [data-slot="tabs-list"] {
182
- background-color: color-mix(in oklch, var(--muted) 80%, transparent);
183
- padding: 0.25rem;
219
+ /* ── Size tweaks ──────────────────────────────────────────────────────── */
220
+ [data-pallet-variant="toon"] :is(
221
+ [data-slot="badge"],
222
+ [data-slot="kbd"],
223
+ [data-slot="checkbox"],
224
+ [data-slot="radio-group-item"],
225
+ [data-slot="input-otp-slot"]
226
+ ) {
227
+ border-radius: var(--toon-radius-sm);
228
+ --toon-lip: 2.5px;
184
229
  }
185
230
 
186
- [data-pallet-variant="toon"] [data-slot="tabs-trigger"] {
231
+ [data-pallet-variant="toon"] [data-slot="switch"],
232
+ [data-pallet-variant="toon"] [data-slot="slider-track"],
233
+ [data-pallet-variant="toon"] [data-slot="progress"] {
187
234
  border-radius: 9999px;
235
+ --toon-fill: var(--input);
188
236
  }
189
237
 
190
- [data-pallet-variant="toon"] [data-slot="accordion-trigger"],
191
- [data-pallet-variant="toon"] [data-slot="accordion-content"] {
192
- border-radius: var(--radius-lg);
238
+ [data-pallet-variant="toon"] [data-slot="switch"][data-state="checked"] {
239
+ --toon-fill: var(--primary);
240
+ border-color: color-mix(in oklch, var(--toon-fill) 68%, black);
193
241
  }
194
242
 
195
- [data-pallet-variant="toon"] [data-slot="table"] {
196
- border-collapse: separate;
197
- border-spacing: 0;
243
+ [data-pallet-variant="toon"] [data-slot="textarea"] {
244
+ border-radius: var(--radius-xl);
198
245
  }
199
246
 
200
- [data-pallet-variant="toon"] [data-slot="table-head"],
201
- [data-pallet-variant="toon"] [data-slot="table-cell"] {
202
- border-color: var(--pallet-surface-border);
247
+ [data-pallet-variant="toon"] :is(
248
+ [data-slot="button"],
249
+ [data-slot="toggle"],
250
+ [data-slot="toggle-group-item"],
251
+ [data-slot="pagination-link"],
252
+ [data-slot="carousel-previous"],
253
+ [data-slot="carousel-next"]
254
+ ):active:not([data-variant="ghost"]):not([data-variant="link"]):not([class*="variant-ghost"]):not([class*="variant-link"]) {
255
+ transform: translateY(1px);
256
+ border-bottom-width: 2px;
203
257
  }
204
258
 
205
- [data-pallet-variant="toon"] [data-slot="table-row"]:hover {
206
- background-color: color-mix(in oklch, var(--accent) 55%, transparent);
259
+ /* Menu rows: radius only — no chunk borders (avoids tiled lists) */
260
+ [data-pallet-variant="toon"] :is(
261
+ [data-slot="dropdown-menu-item"],
262
+ [data-slot="dropdown-menu-checkbox-item"],
263
+ [data-slot="dropdown-menu-radio-item"],
264
+ [data-slot="dropdown-menu-sub-trigger"],
265
+ [data-slot="context-menu-item"],
266
+ [data-slot="menubar-item"],
267
+ [data-slot="select-item"],
268
+ [data-slot="combobox-item"],
269
+ [data-slot="command-item"],
270
+ [data-slot="navigation-menu-link"]
271
+ ) {
272
+ border-radius: var(--toon-radius-sm);
273
+ box-shadow: none !important;
207
274
  }
208
275
 
276
+ /* ── Sidebar: panel is square; nav rows stay flat (not individual tiles) ─ */
209
277
  [data-pallet-variant="toon"] :is(
210
- [data-slot="breadcrumb-link"],
211
- [data-slot="breadcrumb-page"],
212
- [data-slot="breadcrumb-ellipsis"],
213
- [data-slot="pagination-ellipsis"]
278
+ [data-slot="sidebar"],
279
+ [data-slot="sidebar-container"],
280
+ [data-slot="sidebar-inner"],
281
+ [data-slot="sidebar-wrapper"],
282
+ [data-slot="sidebar-gap"],
283
+ [data-slot="sidebar-header"],
284
+ [data-slot="sidebar-footer"],
285
+ [data-slot="sidebar-content"],
286
+ [data-slot="sidebar-group"],
287
+ [data-slot="sidebar-group-content"],
288
+ [data-slot="sidebar-group-label"],
289
+ [data-slot="sidebar-menu"],
290
+ [data-slot="sidebar-menu-item"],
291
+ [data-slot="sidebar-menu-sub"],
292
+ [data-slot="sidebar-menu-sub-item"],
293
+ [data-slot="sidebar-inset"],
294
+ [data-slot="sidebar-rail"]
214
295
  ) {
215
- border-radius: 9999px;
296
+ border-radius: 0 !important;
297
+ box-shadow: none !important;
216
298
  }
217
299
 
218
- /* ── Overlays / menus / portals ───────────────────────────────────────── */
300
+ /* Outer sidebar shell: hard edge, no rounded lip tile */
219
301
  [data-pallet-variant="toon"] :is(
220
- [data-slot="popover-content"],
221
- [data-slot="dropdown-menu-content"],
222
- [data-slot="dropdown-menu-sub-content"],
223
- [data-slot="context-menu-content"],
224
- [data-slot="context-menu-sub-content"],
225
- [data-slot="menubar-content"],
226
- [data-slot="menubar-sub-content"],
227
- [data-slot="select-content"],
228
- [data-slot="combobox-content"],
229
- [data-slot="combobox-list"],
230
- [data-slot="command"],
231
- [data-slot="command-list"],
232
- [data-slot="hover-card-content"],
233
- [data-slot="tooltip-content"],
234
- [data-slot="navigation-menu-content"],
235
- [data-slot="dialog-content"],
236
- [data-slot="alert-dialog-content"],
237
- [data-slot="sheet-content"],
238
- [data-slot="drawer-content"]
302
+ [data-slot="sidebar"],
303
+ [data-slot="sidebar-container"],
304
+ [data-slot="sidebar-inner"]
239
305
  ) {
240
- border-radius: var(--pallet-overlay-radius);
241
- box-shadow: var(--pallet-overlay-shadow);
242
- border-color: var(--pallet-surface-border);
306
+ border: none;
307
+ border-right: var(--toon-outline) solid
308
+ color-mix(in oklch, var(--sidebar) 68%, black);
309
+ border-bottom: none;
310
+ }
311
+
312
+ /* Nav buttons / actions: flat rows, soft radius, no chunk lip */
313
+ [data-pallet-variant="toon"] :is(
314
+ [data-slot="sidebar-menu-button"],
315
+ [data-slot="sidebar-menu-sub-button"],
316
+ [data-slot="sidebar-menu-action"],
317
+ [data-slot="sidebar-group-action"],
318
+ [data-slot="sidebar-trigger"]
319
+ ) {
320
+ border: none !important;
321
+ border-radius: var(--toon-radius-sm) !important;
322
+ box-shadow: none !important;
323
+ transform: none;
324
+ }
325
+
326
+ [data-pallet-variant="toon"] :is(
327
+ [data-slot="sidebar-menu-button"],
328
+ [data-slot="sidebar-menu-sub-button"]
329
+ ):is([data-active="true"], [data-state="active"]) {
330
+ background-color: color-mix(in oklch, var(--sidebar-accent) 85%, var(--primary));
331
+ color: var(--sidebar-accent-foreground);
332
+ }
333
+
334
+ /* Structural slots that must never pick up chunk styling */
335
+ [data-pallet-variant="toon"] :is(
336
+ [data-slot="button-group"],
337
+ [data-slot="toggle-group"],
338
+ [data-slot="field"],
339
+ [data-slot="field-set"],
340
+ [data-slot="field-group"],
341
+ [data-slot="item-group"],
342
+ [data-slot="empty"],
343
+ [data-slot="carousel"],
344
+ [data-slot="chart"],
345
+ [data-slot="breadcrumb"],
346
+ [data-slot="pagination"],
347
+ [data-slot="scroll-area"],
348
+ [data-slot="scroll-area-viewport"],
349
+ [data-slot="menubar"],
350
+ [data-slot="navigation-menu"],
351
+ [data-slot="navigation-menu-viewport"],
352
+ [data-slot="tabs"],
353
+ [data-slot="table"],
354
+ [data-slot="avatar"],
355
+ [data-slot="avatar-fallback"],
356
+ [data-slot="skeleton"]
357
+ ) {
358
+ box-shadow: none !important;
243
359
  }
244
360
 
245
361
  [data-pallet-variant="toon"] :is(
@@ -248,30 +364,21 @@
248
364
  [data-slot="sheet-overlay"],
249
365
  [data-slot="drawer-overlay"]
250
366
  ) {
251
- background-color: color-mix(in oklch, var(--foreground) 35%, transparent);
252
- backdrop-filter: blur(2px);
367
+ background-color: color-mix(in oklch, var(--foreground) 45%, transparent);
368
+ backdrop-filter: none;
369
+ }
370
+
371
+ [data-pallet-variant="toon"] [data-slot="table-row"]:hover {
372
+ background-color: color-mix(in oklch, var(--muted) 80%, transparent);
253
373
  }
254
374
 
255
375
  [data-pallet-variant="toon"] :is(
256
- [data-slot="dropdown-menu-item"],
257
- [data-slot="dropdown-menu-checkbox-item"],
258
- [data-slot="dropdown-menu-radio-item"],
259
- [data-slot="dropdown-menu-sub-trigger"],
260
- [data-slot="context-menu-item"],
261
- [data-slot="context-menu-checkbox-item"],
262
- [data-slot="context-menu-radio-item"],
263
- [data-slot="context-menu-sub-trigger"],
264
- [data-slot="menubar-item"],
265
- [data-slot="menubar-checkbox-item"],
266
- [data-slot="menubar-radio-item"],
267
- [data-slot="menubar-sub-trigger"],
268
- [data-slot="menubar-trigger"],
269
- [data-slot="select-item"],
270
- [data-slot="combobox-item"],
271
- [data-slot="command-item"],
272
- [data-slot="navigation-menu-link"],
273
- [data-slot="navigation-menu-trigger"]
376
+ [data-slot="separator"],
377
+ [data-slot="sidebar-separator"],
378
+ [data-slot="dropdown-menu-separator"],
379
+ [data-slot="command-separator"],
380
+ [data-slot="select-separator"]
274
381
  ) {
275
- border-radius: 9999px;
382
+ background-color: color-mix(in oklch, var(--foreground) 18%, transparent);
276
383
  }
277
384
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@charstudios/pallet",
3
- "version": "0.2.0",
3
+ "version": "0.3.1",
4
4
  "description": "Runtime, hook-driven theming layer for shadcn/ui apps. Full control over colors, fonts, roundness, elevation, spacing and motion, with swappable visual variants.",
5
5
  "type": "module",
6
6
  "license": "MIT",
package/dist/chunk-3JRKA6NS.js.map DELETED
@@ -1 +0,0 @@
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-3JRKA6NS.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: \"1rem\",\r\n scale: {\r\n sm: 0.5,\r\n md: 0.75,\r\n lg: 1,\r\n xl: 1.25,\r\n \"2xl\": 1.5,\r\n \"3xl\": 1.75,\r\n \"4xl\": 2,\r\n },\r\n },\r\n elevation: {\r\n shadows: {\r\n xs: \"0 1px 2px 0 oklch(0.45 0.08 240 / 0.06)\",\r\n sm: \"0 2px 10px -2px oklch(0.45 0.08 240 / 0.12), 0 1px 3px -1px oklch(0 0 0 / 0.04)\",\r\n md: \"0 8px 24px -8px oklch(0.45 0.08 240 / 0.18), 0 2px 8px -2px oklch(0 0 0 / 0.05)\",\r\n lg: \"0 18px 40px -12px oklch(0.45 0.08 240 / 0.22), 0 6px 14px -6px oklch(0 0 0 / 0.06)\",\r\n xl: \"0 28px 56px -16px oklch(0.45 0.08 240 / 0.28), 0 10px 20px -8px oklch(0 0 0 / 0.07)\",\r\n },\r\n borderStrength: 0.65,\r\n level: \"lg\",\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 from the Toon reference: airy off-white surfaces, near\r\n * borderless inputs, and a soft periwinkle primary with a brighter blue focus\r\n * ring.\r\n */\r\nconst light: ColorTokens = {\r\n background: \"oklch(0.98 0.003 264)\",\r\n foreground: \"oklch(0.21 0.03 264)\",\r\n card: \"oklch(1 0 0)\",\r\n cardForeground: \"oklch(0.21 0.03 264)\",\r\n popover: \"oklch(1 0 0)\",\r\n popoverForeground: \"oklch(0.21 0.03 264)\",\r\n primary: \"oklch(0.7 0.11 264)\",\r\n primaryForeground: \"oklch(0.99 0.002 264)\",\r\n secondary: \"oklch(0.965 0.006 264)\",\r\n secondaryForeground: \"oklch(0.3 0.03 264)\",\r\n muted: \"oklch(0.965 0.006 264)\",\r\n mutedForeground: \"oklch(0.55 0.03 264)\",\r\n accent: \"oklch(0.95 0.03 264)\",\r\n accentForeground: \"oklch(0.42 0.11 264)\",\r\n destructive: \"oklch(0.62 0.22 25)\",\r\n destructiveForeground: \"oklch(0.99 0 0)\",\r\n border: \"oklch(0.92 0.008 264)\",\r\n input: \"oklch(0.965 0.006 264)\",\r\n ring: \"oklch(0.6 0.19 264)\",\r\n chart1: \"oklch(0.7 0.11 264)\",\r\n chart2: \"oklch(0.62 0.15 264)\",\r\n chart3: \"oklch(0.55 0.19 264)\",\r\n chart4: \"oklch(0.72 0.1 210)\",\r\n chart5: \"oklch(0.68 0.13 300)\",\r\n sidebar: \"oklch(0.985 0.003 264)\",\r\n sidebarForeground: \"oklch(0.21 0.03 264)\",\r\n sidebarPrimary: \"oklch(0.7 0.11 264)\",\r\n sidebarPrimaryForeground: \"oklch(0.99 0.002 264)\",\r\n sidebarAccent: \"oklch(0.95 0.03 264)\",\r\n sidebarAccentForeground: \"oklch(0.42 0.11 264)\",\r\n sidebarBorder: \"oklch(0.92 0.008 264)\",\r\n sidebarRing: \"oklch(0.6 0.19 264)\",\r\n};\r\n\r\n/** Dark palette: deep desaturated navy with the same periwinkle accent. */\r\nconst dark: ColorTokens = {\r\n background: \"oklch(0.19 0.02 264)\",\r\n foreground: \"oklch(0.97 0.005 264)\",\r\n card: \"oklch(0.23 0.024 264)\",\r\n cardForeground: \"oklch(0.97 0.005 264)\",\r\n popover: \"oklch(0.23 0.024 264)\",\r\n popoverForeground: \"oklch(0.97 0.005 264)\",\r\n primary: \"oklch(0.72 0.12 264)\",\r\n primaryForeground: \"oklch(0.16 0.03 264)\",\r\n secondary: \"oklch(0.28 0.02 264)\",\r\n secondaryForeground: \"oklch(0.97 0.005 264)\",\r\n muted: \"oklch(0.28 0.02 264)\",\r\n mutedForeground: \"oklch(0.72 0.02 264)\",\r\n accent: \"oklch(0.32 0.05 264)\",\r\n accentForeground: \"oklch(0.9 0.05 264)\",\r\n destructive: \"oklch(0.7 0.19 22)\",\r\n destructiveForeground: \"oklch(0.99 0 0)\",\r\n border: \"oklch(1 0 0 / 10%)\",\r\n input: \"oklch(1 0 0 / 12%)\",\r\n ring: \"oklch(0.65 0.17 264)\",\r\n chart1: \"oklch(0.72 0.12 264)\",\r\n chart2: \"oklch(0.64 0.15 264)\",\r\n chart3: \"oklch(0.58 0.18 264)\",\r\n chart4: \"oklch(0.74 0.1 210)\",\r\n chart5: \"oklch(0.7 0.13 300)\",\r\n sidebar: \"oklch(0.21 0.022 264)\",\r\n sidebarForeground: \"oklch(0.97 0.005 264)\",\r\n sidebarPrimary: \"oklch(0.72 0.12 264)\",\r\n sidebarPrimaryForeground: \"oklch(0.16 0.03 264)\",\r\n sidebarAccent: \"oklch(0.32 0.05 264)\",\r\n sidebarAccentForeground: \"oklch(0.9 0.05 264)\",\r\n sidebarBorder: \"oklch(1 0 0 / 10%)\",\r\n sidebarRing: \"oklch(0.65 0.17 264)\",\r\n};\r\n\r\n/**\r\n * The \"toon\" preset: soft, elevated, and pill-shaped. Large radius, gentle\r\n * layered shadows, subtle borders and a little extra breathing room. Pairs with\r\n * `styles/variant-toon.css` which rounds controls into pills.\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 '\"Plus Jakarta Sans\", \"Inter\", ui-sans-serif, system-ui, -apple-system, sans-serif',\r\n mono: 'ui-monospace, SFMono-Regular, Menlo, Consolas, \"Liberation Mono\", monospace',\r\n googleFonts: [\"Inter\", \"Plus Jakarta Sans\"],\r\n },\r\n radius: {\r\n base: \"1.25rem\",\r\n // A slightly gentler ramp so large elements do not over-round.\r\n scale: {\r\n sm: 0.4,\r\n md: 0.6,\r\n lg: 1,\r\n xl: 1.2,\r\n \"2xl\": 1.5,\r\n \"3xl\": 1.8,\r\n \"4xl\": 2.2,\r\n },\r\n },\r\n elevation: {\r\n shadows: {\r\n xs: \"0 1px 2px 0 oklch(0.55 0.19 264 / 0.06)\",\r\n sm: \"0 2px 8px -2px oklch(0.55 0.19 264 / 0.10), 0 1px 3px -1px oklch(0 0 0 / 0.05)\",\r\n md: \"0 6px 20px -6px oklch(0.55 0.19 264 / 0.16), 0 2px 6px -2px oklch(0 0 0 / 0.06)\",\r\n lg: \"0 14px 34px -10px oklch(0.55 0.19 264 / 0.20), 0 4px 10px -4px oklch(0 0 0 / 0.07)\",\r\n xl: \"0 24px 56px -16px oklch(0.55 0.19 264 / 0.26), 0 8px 18px -8px oklch(0 0 0 / 0.08)\",\r\n },\r\n borderStrength: 0.5,\r\n level: \"md\",\r\n },\r\n density: {\r\n spacing: \"0.26rem\",\r\n scale: 1.1,\r\n },\r\n motion: {\r\n duration: 240,\r\n easing: \"cubic-bezier(0.22, 1, 0.36, 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"]}