vunor 0.2.2 → 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 +1 -1
- package/dist/ButtonBase.mjs +3 -3
- package/dist/theme.mjs +162 -104
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -280,7 +280,7 @@ Button and clickable element design variants:
|
|
|
280
280
|
| `c8-outlined` | Border + colored text, transparent fill |
|
|
281
281
|
| `c8-light` | Light tinted background, colored text |
|
|
282
282
|
|
|
283
|
-
Each includes hover, active, focus
|
|
283
|
+
Each includes hover, active, and focus states. Hover and press do not paint on a disabled element: `disabled`, `aria-disabled="true"` or `data-disabled` (the same definition the `disabled-soft` shortcut uses to fade a disabled element). Keyboard focus still paints, so an `aria-disabled` control stays visibly focusable. Apply on any element alongside `scope-{color}`:
|
|
284
284
|
|
|
285
285
|
```html
|
|
286
286
|
<button class="scope-primary c8-filled">Save</button>
|
package/dist/ButtonBase.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, openBlock, renderSlot, toDisplayString, unref, withCtx } from "vue";
|
|
1
|
+
import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, openBlock, renderSlot, toDisplayString, unref, withCtx } from "vue";
|
|
2
2
|
import { Primitive } from "reka-ui";
|
|
3
3
|
import VuIcon from "vunor/Icon";
|
|
4
4
|
import VuLoadingIndicator from "vunor/LoadingIndicator";
|
|
@@ -46,7 +46,7 @@ var ButtonBase_default = /* @__PURE__ */ defineComponent({
|
|
|
46
46
|
},
|
|
47
47
|
setup(__props) {
|
|
48
48
|
return (_ctx, _cache) => {
|
|
49
|
-
return openBlock(),
|
|
49
|
+
return openBlock(), createElementBlock(Fragment, null, [createCommentVNode("\n `group/btn` is no longer read by any vunor rule: since 0.3.0 the label and\n icon take their cue from inherited custom properties instead of\n `group-[.btn-square]/btn:` descendant rules. It stays because it is public\n surface that consumer-authored `group-*/btn:` rules may still key on.\n "), createVNode(unref(Primitive), {
|
|
50
50
|
class: "btn group/btn",
|
|
51
51
|
as: __props.as,
|
|
52
52
|
href: __props.href,
|
|
@@ -77,7 +77,7 @@ var ButtonBase_default = /* @__PURE__ */ defineComponent({
|
|
|
77
77
|
"data-has-icon",
|
|
78
78
|
"data-loading",
|
|
79
79
|
"disabled"
|
|
80
|
-
]);
|
|
80
|
+
])], 2112);
|
|
81
81
|
};
|
|
82
82
|
}
|
|
83
83
|
});
|
package/dist/theme.mjs
CHANGED
|
@@ -29,6 +29,13 @@ const toastShortcuts = defineShortcuts({
|
|
|
29
29
|
}
|
|
30
30
|
});
|
|
31
31
|
//#endregion
|
|
32
|
+
//#region src/theme/utils/disabled.ts
|
|
33
|
+
const disabledSelectors = ":disabled,[disabled],[aria-disabled=true],[data-disabled]";
|
|
34
|
+
/** Variant prefix that matches while the element is disabled. */
|
|
35
|
+
const whenDisabled = `[&:is(${disabledSelectors})]:`;
|
|
36
|
+
/** Variant prefix that matches only while the element is not disabled. */
|
|
37
|
+
const whenEnabled = `[&:not(${disabledSelectors})]:`;
|
|
38
|
+
//#endregion
|
|
32
39
|
//#region src/components/Calendar/shortcuts.ts
|
|
33
40
|
const calendarShortcuts = defineShortcuts({
|
|
34
41
|
"calendar-root": "inline-block",
|
|
@@ -42,7 +49,7 @@ const calendarShortcuts = defineShortcuts({
|
|
|
42
49
|
"before:": "absolute bottom-[0.6em] w-[1.5em] h-[2px] bg-scope-color-500/75 block",
|
|
43
50
|
"[&[data-today]::before]:": "content-['']",
|
|
44
51
|
"[&[data-today][data-selected]::before]:": "bg-white",
|
|
45
|
-
|
|
52
|
+
[`${whenEnabled}hover:`]: {
|
|
46
53
|
"": "bg-scope-color-200",
|
|
47
54
|
"dark:": "bg-scope-color-700"
|
|
48
55
|
},
|
|
@@ -82,8 +89,8 @@ const checkboxShortcuts = defineShortcuts({
|
|
|
82
89
|
},
|
|
83
90
|
"checkbox": {
|
|
84
91
|
"": "cursor-default shrink-0 select-none rounded-r0 transition-all transition-duration-100 flex size-1.5em appearance-none items-center justify-center bg-current/0 border-current border-[0.16em] current-icon-white",
|
|
85
|
-
|
|
86
|
-
|
|
92
|
+
[`group-active/cb:${whenEnabled}`]: "current-bg-scope-color-500 bg-current/20 current-icon-scope-color-500",
|
|
93
|
+
[whenDisabled]: "cursor-not-allowed border-1px",
|
|
87
94
|
"group-[[data-error=true]]/cb:enabled:": "current-border-error-500 border-current",
|
|
88
95
|
"data-[state=unchecked]": "current-border-grey-500 border-current/40"
|
|
89
96
|
},
|
|
@@ -161,17 +168,14 @@ const shortcuts = [
|
|
|
161
168
|
defineShortcuts({
|
|
162
169
|
"rb-container": { "": "flex flex-col gap-$s text-body" },
|
|
163
170
|
"rb-label": { "": "text-label text-grey-400" },
|
|
164
|
-
"rb-root": {
|
|
165
|
-
|
|
166
|
-
"[&.rb-row]:": "flex-wrap",
|
|
167
|
-
"not-[.rb-row]:": "flex-col"
|
|
168
|
-
},
|
|
171
|
+
"rb-root": { "": "flex [flex-direction:var(--rb-dir,column)] gap-x-$l gap-y-$m" },
|
|
172
|
+
"rb-row": { "": "[--rb-dir:row] flex-wrap" },
|
|
169
173
|
"rb-item-wrapper": { "": "flex" },
|
|
170
174
|
"rb-item": {
|
|
171
175
|
"": "disabled-soft select-none shrink-0 current-bg-scope-color-500 bg-current/0 size-1.25em rounded-full cursor-default current-border-grey-500 border-current/40 border-[0.16em] transition-none",
|
|
172
176
|
"data-[state=checked]:not-[[data-error='true']]:": "current-border-scope-color-500 border-current",
|
|
173
177
|
"data-[state=checked]:": "bg-current",
|
|
174
|
-
|
|
178
|
+
[`${whenEnabled}active:`]: "bg-current/20",
|
|
175
179
|
"aria-[disabled=true]:": "scope-grey",
|
|
176
180
|
"data-[error=true]:": "current-border-error-500 current-bg-error-500"
|
|
177
181
|
},
|
|
@@ -212,7 +216,7 @@ const shortcuts = [
|
|
|
212
216
|
"slider-thumb": {
|
|
213
217
|
"": "block w-[1.5em] h-[1.5em] bg-scope-color-500 rounded-full border-scope-light-0 border-[3px] outline-scope-color-500/10 outline-0px outline-solid",
|
|
214
218
|
"dark:": "border-scope-dark-0",
|
|
215
|
-
|
|
219
|
+
[whenEnabled]: {
|
|
216
220
|
"": "cursor-grab",
|
|
217
221
|
"hover:": "shadow-md",
|
|
218
222
|
"active:": "cursor-grabbing",
|
|
@@ -232,67 +236,64 @@ const shortcuts = [
|
|
|
232
236
|
];
|
|
233
237
|
//#endregion
|
|
234
238
|
//#region src/theme/shortcuts/btn.ts
|
|
235
|
-
const
|
|
236
|
-
const
|
|
239
|
+
const btnRound = "px-fingertip-half rounded-fingertip-half [--btn-icon-pull:-0.5em]";
|
|
240
|
+
const btnSquare = "size-fingertip px-0 [--btn-label-display:none] [--btn-icon-fs:1.5em] [--btn-icon-pull:0]";
|
|
237
241
|
const btn = defineShortcuts({
|
|
238
242
|
"btn": {
|
|
239
243
|
"": "h-fingertip flex items-center justify-center px-$m gap-$xs select-none fw-bold tracking-wide relative",
|
|
240
244
|
"[&.btn-round]:": btnRound,
|
|
241
245
|
"[&.btn-square]:": btnSquare,
|
|
242
|
-
"[&.btn-round.btn-square]:": "px-0",
|
|
243
|
-
|
|
246
|
+
"[&.btn-round.btn-square]:": "px-0 [--btn-icon-pull:0]",
|
|
247
|
+
[`${whenDisabled}[&:where(:not(.disabled-soft))]:`]: "opacity-80 cursor-not-allowed",
|
|
244
248
|
"[&>span]:data-[loading]:": "opacity-0 pointer-events-none",
|
|
245
249
|
"[&>div:not(.loading-indicator-wrapper)]:data-[loading]:": "opacity-0 pointer-events-none",
|
|
246
250
|
"[&>.loading-indicator-wrapper]:": "absolute left-0 top-0 right-0 bottom-0 flex items-center justify-center cursor-wait"
|
|
247
251
|
},
|
|
248
252
|
"btn-round": { "": btnRound },
|
|
249
253
|
"btn-square": { "": btnSquare },
|
|
250
|
-
"btn-label": {
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
}
|
|
254
|
-
"btn-icon": {
|
|
255
|
-
"": "size-1em font-size-1.25em",
|
|
256
|
-
"group-[.btn-round]/btn:[&.btn-icon-left]:": "ml-[-0.5em]",
|
|
257
|
-
"group-[.btn-round]/btn:[&.btn-icon-right]:": "mr-[-0.5em]",
|
|
258
|
-
"group-[.btn-square]/btn:": "font-size-1.5em m-0!",
|
|
259
|
-
"group-[.btn-round.btn-square]/btn:": "m-0!"
|
|
260
|
-
}
|
|
254
|
+
"btn-label": { "": "lh-1em ellipsis whitespace-nowrap overflow-x-clip overflow-y-visible display-[var(--btn-label-display,revert)]" },
|
|
255
|
+
"btn-icon": { "": "size-1em font-size-[var(--btn-icon-fs,1.25em)]" },
|
|
256
|
+
"btn-icon-left": { "": "ml-[var(--btn-icon-pull,0)]" },
|
|
257
|
+
"btn-icon-right": { "": "mr-[var(--btn-icon-pull,0)]" }
|
|
261
258
|
});
|
|
262
259
|
//#endregion
|
|
263
260
|
//#region src/theme/shortcuts/c8.ts
|
|
264
261
|
const c8 = defineShortcuts({
|
|
265
262
|
"c8-filled": {
|
|
266
263
|
"": "current-bg-scope-color-500 rounded-r1 current-text-white current-icon-white icon-current/100 bg-current text-current",
|
|
267
|
-
"hover:": "c8-filled-hover",
|
|
268
264
|
"focus-visible:": "c8-filled-hover",
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
265
|
+
[whenEnabled]: {
|
|
266
|
+
"hover:": "c8-filled-hover",
|
|
267
|
+
"data-[highlighted]:": "c8-filled-hover",
|
|
268
|
+
"active:": "c8-filled-active",
|
|
269
|
+
"data-[active]:": "c8-filled-active"
|
|
270
|
+
}
|
|
272
271
|
},
|
|
273
272
|
"c8-filled-hover": {
|
|
274
|
-
"
|
|
275
|
-
"dark:
|
|
273
|
+
"": "current-bg-scope-color-600",
|
|
274
|
+
"dark:": "current-bg-scope-color-400"
|
|
276
275
|
},
|
|
277
276
|
"c8-filled-active": {
|
|
278
|
-
"
|
|
279
|
-
"dark:
|
|
277
|
+
"": "current-bg-scope-color-700",
|
|
278
|
+
"dark:": "current-bg-scope-color-300"
|
|
280
279
|
},
|
|
281
280
|
"c8-flat": {
|
|
282
281
|
"": "current-bg-scope-color-500 rounded-r1 current-text-black current-icon-black bg-current/0 text-current/80 icon-current/50",
|
|
283
282
|
"dark:": "current-text-white current-icon-white",
|
|
284
|
-
"hover:": "c8-flat-hover",
|
|
285
283
|
"focus-visible:": "c8-flat-hover",
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
284
|
+
[whenEnabled]: {
|
|
285
|
+
"hover:": "c8-flat-hover",
|
|
286
|
+
"data-[highlighted]:": "c8-flat-hover",
|
|
287
|
+
"active:": "c8-flat-active",
|
|
288
|
+
"data-[active]:": "c8-flat-active"
|
|
289
|
+
},
|
|
289
290
|
"data-[selected=true]:": "c8-flat-selected",
|
|
290
291
|
"data-[on=true]:": "c8-flat-selected",
|
|
291
292
|
"aria-[selected=true]:": "c8-flat-selected",
|
|
292
293
|
"aria-[pressed=true]:": "c8-flat-selected"
|
|
293
294
|
},
|
|
294
|
-
"c8-flat-hover":
|
|
295
|
-
"c8-flat-active":
|
|
295
|
+
"c8-flat-hover": "bg-current/10",
|
|
296
|
+
"c8-flat-active": "bg-current/15",
|
|
296
297
|
"c8-flat-selected": {
|
|
297
298
|
"": "c8-flat-hover current-text-scope-color-500 text-current current-icon-scope-color-500 icon-current/100",
|
|
298
299
|
"dark:": "current-text-scope-color-400 current-icon-scope-color-400"
|
|
@@ -300,33 +301,37 @@ const c8 = defineShortcuts({
|
|
|
300
301
|
"c8-outlined": {
|
|
301
302
|
"": "c8-flat border-scope-color-500 rounded-r1 border current-text-scope-color-500 current-icon-scope-color-500 icon-current/100",
|
|
302
303
|
"dark:": "current-text-scope-color-400 current-icon-scope-color-400",
|
|
303
|
-
"hover:": "c8-outlined-hover",
|
|
304
304
|
"focus-visible:": "c8-outlined-hover",
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
305
|
+
[whenEnabled]: {
|
|
306
|
+
"hover:": "c8-outlined-hover",
|
|
307
|
+
"data-[highlighted]:": "c8-outlined-hover",
|
|
308
|
+
"active:": "c8-outlined-active",
|
|
309
|
+
"data-[active]:": "c8-outlined-active"
|
|
310
|
+
}
|
|
308
311
|
},
|
|
309
312
|
"c8-outlined-hover": "c8-flat-hover",
|
|
310
313
|
"c8-outlined-active": "c8-flat-active",
|
|
311
314
|
"c8-chrome": {
|
|
312
315
|
"": "surface-0 rounded-r1 border",
|
|
313
|
-
"hover:": "c8-chrome-hover",
|
|
314
316
|
"focus-visible:": "c8-chrome-hover",
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
317
|
+
[whenEnabled]: {
|
|
318
|
+
"hover:": "c8-chrome-hover",
|
|
319
|
+
"data-[highlighted]:": "c8-chrome-hover",
|
|
320
|
+
"active:": "c8-chrome-active",
|
|
321
|
+
"data-[active]:": "c8-chrome-active"
|
|
322
|
+
},
|
|
318
323
|
"data-[selected=true]:": "c8-chrome-selected",
|
|
319
324
|
"data-[on=true]:": "c8-chrome-selected",
|
|
320
325
|
"aria-[selected=true]:": "c8-chrome-selected",
|
|
321
326
|
"aria-[pressed=true]:": "c8-chrome-selected"
|
|
322
327
|
},
|
|
323
328
|
"c8-chrome-hover": {
|
|
324
|
-
"
|
|
325
|
-
"dark:
|
|
329
|
+
"": "current-bg-scope-light-1 bg-current",
|
|
330
|
+
"dark:": "current-bg-scope-dark-1"
|
|
326
331
|
},
|
|
327
332
|
"c8-chrome-active": {
|
|
328
|
-
"
|
|
329
|
-
"dark:
|
|
333
|
+
"": "current-bg-scope-light-2 bg-current",
|
|
334
|
+
"dark:": "current-bg-scope-dark-2"
|
|
330
335
|
},
|
|
331
336
|
"c8-chrome-selected": {
|
|
332
337
|
"": "current-bg-scope-light-1 bg-current current-text-scope-color-500 text-current current-icon-scope-color-500 icon-current/100",
|
|
@@ -335,18 +340,20 @@ const c8 = defineShortcuts({
|
|
|
335
340
|
"c8-light": {
|
|
336
341
|
"": "current-bg-scope-color-500 rounded-r1 current-text-scope-color-500 current-icon-scope-color-500 bg-current/10 text-current icon-current/80",
|
|
337
342
|
"dark:": "current-text-scope-color-400 current-icon-scope-color-400",
|
|
338
|
-
"hover:": "c8-light-hover",
|
|
339
343
|
"focus-visible:": "c8-light-hover",
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
344
|
+
[whenEnabled]: {
|
|
345
|
+
"hover:": "c8-light-hover",
|
|
346
|
+
"data-[highlighted]:": "c8-light-hover",
|
|
347
|
+
"active:": "c8-light-active",
|
|
348
|
+
"data-[active]:": "c8-light-active"
|
|
349
|
+
},
|
|
343
350
|
"data-[selected=true]:": "c8-light-hover",
|
|
344
351
|
"data-[on=true]:": "c8-light-hover",
|
|
345
352
|
"aria-[selected=true]:": "c8-light-hover",
|
|
346
353
|
"aria-[pressed=true]:": "c8-light-hover"
|
|
347
354
|
},
|
|
348
|
-
"c8-light-hover":
|
|
349
|
-
"c8-light-active":
|
|
355
|
+
"c8-light-hover": "bg-current/20",
|
|
356
|
+
"c8-light-active": "bg-current/30"
|
|
350
357
|
});
|
|
351
358
|
//#endregion
|
|
352
359
|
//#region src/theme/shortcuts/extras.ts
|
|
@@ -354,12 +361,14 @@ const popupCard = defineShortcuts({
|
|
|
354
361
|
"shadow-popup": "shadow-[0_0_10px_rgba(0,0,0,0.1),0_4px_20px_rgba(0,0,0,0.15)]",
|
|
355
362
|
"popup-card": { "": "surface-0 bg-current rounded-r2 overflow-hidden shadow-popup z-[100] border current-border-grey-400 border-current/20" }
|
|
356
363
|
});
|
|
357
|
-
const
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
} }
|
|
364
|
+
const disabledSoft = defineShortcuts({ "disabled-soft": { [whenDisabled]: "opacity-40 cursor-not-allowed" } });
|
|
365
|
+
//#endregion
|
|
366
|
+
//#region src/theme/shortcuts/i8.ts
|
|
367
|
+
const M = "1em";
|
|
368
|
+
const FINGERTIP_HALF = "var(--v-fingertip-half)";
|
|
369
|
+
const pad = (v) => `[--i8-pl:${v}] [--i8-pr:${v}] [--i8-hint-px:${v}]`;
|
|
370
|
+
const filledSignal = `${pad(M)} [--i8-underline-display:none]`;
|
|
371
|
+
const roundSignal = pad(FINGERTIP_HALF);
|
|
363
372
|
//#endregion
|
|
364
373
|
//#region src/theme/shortcuts/raw.ts
|
|
365
374
|
const rawVunorShortcuts = [
|
|
@@ -371,21 +380,25 @@ const rawVunorShortcuts = [
|
|
|
371
380
|
"focus-within:": "icon-current-hl",
|
|
372
381
|
"[&.i8-flat]:": { "": "border-b-width-[var(--i8-border-width,1px)]" },
|
|
373
382
|
"[&.i8-filled]:": {
|
|
374
|
-
"": "i8-apply-bg current-outline-hl i8-apply-border rounded-r1
|
|
383
|
+
"": "i8-apply-bg current-outline-hl i8-apply-border rounded-r1",
|
|
375
384
|
"data-[active=true]:": "current-border-hl outline i8-apply-outline",
|
|
376
385
|
"focus-within:": "current-border-hl outline i8-apply-outline"
|
|
377
386
|
},
|
|
378
|
-
"[&.i8-transparent]:": "bg-transparent!",
|
|
379
387
|
"[&.i8-round]:": {
|
|
380
388
|
"": "i8-apply-bg current-outline-hl rounded-fingertip-half i8-apply-border",
|
|
381
389
|
"data-[active=true]:": "current-border-hl outline i8-apply-outline",
|
|
382
390
|
"focus-within:": "current-border-hl outline i8-apply-outline"
|
|
383
391
|
},
|
|
392
|
+
"[&.segmented.i8-round:not(:first-child)]:": `[--i8-pl:${M}]`,
|
|
393
|
+
"[&.segmented.i8-round:not(:last-child)]:": `[--i8-pr:${M}]`,
|
|
384
394
|
"group-[[data-error=true]]/i8:": { "": "current-border-error-500 current-outline-error-500 border-opacity-100 border-current" }
|
|
385
395
|
},
|
|
396
|
+
"i8-filled": filledSignal,
|
|
397
|
+
"i8-round": roundSignal,
|
|
398
|
+
"i8-transparent": "bg-transparent!",
|
|
386
399
|
"i8-bare": {
|
|
387
400
|
"": "i8-apply-bg i8-apply-border current-outline-hl rounded-r1 outline-none text-current placeholder:text-current/50 disabled-soft",
|
|
388
|
-
|
|
401
|
+
[`${whenEnabled}hover:`]: "border-current-hover",
|
|
389
402
|
"focus:": "current-border-hl outline i8-apply-outline",
|
|
390
403
|
"data-[error=true]:": "current-border-error-500 current-outline-error-500 border-current"
|
|
391
404
|
},
|
|
@@ -395,8 +408,7 @@ const rawVunorShortcuts = [
|
|
|
395
408
|
},
|
|
396
409
|
"i8-icon-wrap": "size-fingertip flex items-center justify-center",
|
|
397
410
|
"i8-underline": {
|
|
398
|
-
"
|
|
399
|
-
"": "absolute left-50% h-2px right-50% bottom-[-1px] pointer-events-none transition-all transition-duration-300 will-change-left will-change-right bg-current-hl",
|
|
411
|
+
"": "absolute left-50% h-2px right-50% bottom-[-1px] pointer-events-none transition-all transition-duration-300 will-change-left will-change-right bg-current-hl display-[var(--i8-underline-display,revert)]",
|
|
400
412
|
"group-[[data-active=true]]/i8:": "left-0 right-0"
|
|
401
413
|
},
|
|
402
414
|
"segmented": {
|
|
@@ -412,24 +424,16 @@ const rawVunorShortcuts = [
|
|
|
412
424
|
"i8-input-wrapper": { "": "relative w-full h-full" },
|
|
413
425
|
"i8-input": {
|
|
414
426
|
"": "w-full outline-none h-full bg-transparent",
|
|
415
|
-
"
|
|
416
|
-
"
|
|
427
|
+
"[&:not([data-has-prepend=true])]:": "pl-[var(--i8-pl,0)]",
|
|
428
|
+
"[&:not([data-has-append=true])]:": "pr-[var(--i8-pr,0)]",
|
|
417
429
|
"selection:": "bg-scope-color-500 text-white",
|
|
418
|
-
"group-[
|
|
419
|
-
"group-[.i8-round]/i8:[&:not([data-has-append=true])]:": "pr-fingertip-half",
|
|
420
|
-
"group-[[data-has-label]]/i8:": "pt-$m",
|
|
421
|
-
"group-[.segmented.i8-round:not(:first-child)]/i8:[&:not([data-has-prepend=true])]:": "pl-$m",
|
|
422
|
-
"group-[.segmented.i8-round:not(:last-child)]/i8:[&:not([data-has-append=true])]:": "pr-$m"
|
|
430
|
+
"group-[[data-has-label]]/i8:": "pt-$m"
|
|
423
431
|
},
|
|
424
432
|
"i8-textarea": {
|
|
425
433
|
"": "w-full outline-none h-full bg-transparent text-body",
|
|
426
|
-
"
|
|
427
|
-
"
|
|
428
|
-
"selection:": "bg-scope-color-500 text-white"
|
|
429
|
-
"group-[.i8-round]/i8:[&:not([data-has-prepend=true])]:": "pl-fingertip-half",
|
|
430
|
-
"group-[.i8-round]/i8:[&:not([data-has-append=true])]:": "pr-fingertip-half",
|
|
431
|
-
"group-[.segmented.i8-round:not(:first-child)]/i8:[&:not([data-has-prepend=true])]:": "pl-$m",
|
|
432
|
-
"group-[.segmented.i8-round:not(:last-child)]/i8:[&:not([data-has-append=true])]:": "pr-$m"
|
|
434
|
+
"[&:not([data-has-prepend=true])]:": "pl-[var(--i8-pl,0)]",
|
|
435
|
+
"[&:not([data-has-append=true])]:": "pr-[var(--i8-pr,0)]",
|
|
436
|
+
"selection:": "bg-scope-color-500 text-white"
|
|
433
437
|
},
|
|
434
438
|
"i8-ta-wrapper": {
|
|
435
439
|
"": "w-full pt-0.75em",
|
|
@@ -444,21 +448,12 @@ const rawVunorShortcuts = [
|
|
|
444
448
|
},
|
|
445
449
|
"i8-label-wrapper": {
|
|
446
450
|
"": "pointer-events-none absolute left-0 right-0 bottom-0 top-0",
|
|
447
|
-
"
|
|
448
|
-
"
|
|
449
|
-
"group-[.i8-filled]/i8:": "px-$m",
|
|
450
|
-
"group-[.i8-round]/i8:[&:not([data-has-prepend=true])]:": "pl-fingertip-half",
|
|
451
|
-
"group-[.i8-round]/i8:[&:not([data-has-append=true])]:": "pr-fingertip-half",
|
|
452
|
-
"group-[.segmented.i8-round:not(:first-child)]/i8:[&:not([data-has-prepend=true])]:": "pl-$m",
|
|
453
|
-
"group-[.segmented.i8-round:not(:last-child)]/i8:[&:not([data-has-append=true])]:": "pr-$m"
|
|
451
|
+
"[&:not([data-has-prepend=true])]:": "pl-[var(--i8-pl,0)]",
|
|
452
|
+
"[&:not([data-has-append=true])]:": "pr-[var(--i8-pr,0)]"
|
|
454
453
|
},
|
|
455
454
|
"i8-hint": { "": "text-caption pt-$xs text-grey-400 flex-1" },
|
|
456
455
|
"i8-counter": { "": "text-caption pt-$xs text-grey-400" },
|
|
457
|
-
"i8-hint-wrapper": {
|
|
458
|
-
"": "relative flex justify-between",
|
|
459
|
-
"group-[.i8-round]/i8:": "px-fingertip-half",
|
|
460
|
-
"group-[.i8-filled]/i8:": "px-$m"
|
|
461
|
-
},
|
|
456
|
+
"i8-hint-wrapper": { "": "relative flex justify-between px-[var(--i8-hint-px,0)]" },
|
|
462
457
|
"i8-hint-wrapper-stack": { "": "relative flex justify-between" },
|
|
463
458
|
"i8-stack-label": { "": "relative pb-$xxs" },
|
|
464
459
|
"i8-prepend": {
|
|
@@ -590,6 +585,8 @@ const componentClasses = {
|
|
|
590
585
|
"[grid-area:_title]",
|
|
591
586
|
"btn",
|
|
592
587
|
"btn-icon",
|
|
588
|
+
"btn-icon-left",
|
|
589
|
+
"btn-icon-right",
|
|
593
590
|
"btn-label",
|
|
594
591
|
"c8-flat",
|
|
595
592
|
"fw-$bold",
|
|
@@ -598,6 +595,7 @@ const componentClasses = {
|
|
|
598
595
|
"loading-indicator",
|
|
599
596
|
"loading-indicator-ring",
|
|
600
597
|
"mb-$s",
|
|
598
|
+
"surface",
|
|
601
599
|
"text-body-s",
|
|
602
600
|
"toast-root",
|
|
603
601
|
"toasts-viewport"
|
|
@@ -605,24 +603,32 @@ const componentClasses = {
|
|
|
605
603
|
Button: [
|
|
606
604
|
"btn",
|
|
607
605
|
"btn-icon",
|
|
606
|
+
"btn-icon-left",
|
|
607
|
+
"btn-icon-right",
|
|
608
608
|
"btn-label",
|
|
609
609
|
"icon-color",
|
|
610
610
|
"icon-size",
|
|
611
611
|
"loading-indicator",
|
|
612
|
-
"loading-indicator-ring"
|
|
612
|
+
"loading-indicator-ring",
|
|
613
|
+
"surface"
|
|
613
614
|
],
|
|
614
615
|
ButtonBase: [
|
|
615
616
|
"btn",
|
|
616
617
|
"btn-icon",
|
|
618
|
+
"btn-icon-left",
|
|
619
|
+
"btn-icon-right",
|
|
617
620
|
"btn-label",
|
|
618
621
|
"icon-color",
|
|
619
622
|
"icon-size",
|
|
620
623
|
"loading-indicator",
|
|
621
|
-
"loading-indicator-ring"
|
|
624
|
+
"loading-indicator-ring",
|
|
625
|
+
"surface"
|
|
622
626
|
],
|
|
623
627
|
Calendar: [
|
|
624
628
|
"btn",
|
|
625
629
|
"btn-icon",
|
|
630
|
+
"btn-icon-left",
|
|
631
|
+
"btn-icon-right",
|
|
626
632
|
"btn-label",
|
|
627
633
|
"btn-square",
|
|
628
634
|
"c8-flat",
|
|
@@ -648,6 +654,7 @@ const componentClasses = {
|
|
|
648
654
|
"relative",
|
|
649
655
|
"rounded",
|
|
650
656
|
"select-none",
|
|
657
|
+
"surface",
|
|
651
658
|
"text-center"
|
|
652
659
|
],
|
|
653
660
|
Card: [
|
|
@@ -717,6 +724,7 @@ const componentClasses = {
|
|
|
717
724
|
"i8-before",
|
|
718
725
|
"i8-border-none",
|
|
719
726
|
"i8-counter",
|
|
727
|
+
"i8-filled",
|
|
720
728
|
"i8-hint",
|
|
721
729
|
"i8-hint-wrapper",
|
|
722
730
|
"i8-hint-wrapper-stack",
|
|
@@ -729,6 +737,7 @@ const componentClasses = {
|
|
|
729
737
|
"i8-loading",
|
|
730
738
|
"i8-outline-none",
|
|
731
739
|
"i8-prepend",
|
|
740
|
+
"i8-round",
|
|
732
741
|
"i8-stack-label",
|
|
733
742
|
"i8-ta-wrapper",
|
|
734
743
|
"i8-textarea",
|
|
@@ -773,6 +782,8 @@ const componentClasses = {
|
|
|
773
782
|
"bottom-0",
|
|
774
783
|
"btn",
|
|
775
784
|
"btn-icon",
|
|
785
|
+
"btn-icon-left",
|
|
786
|
+
"btn-icon-right",
|
|
776
787
|
"btn-label",
|
|
777
788
|
"btn-square",
|
|
778
789
|
"c8-flat",
|
|
@@ -801,6 +812,7 @@ const componentClasses = {
|
|
|
801
812
|
"i8-append",
|
|
802
813
|
"i8-before",
|
|
803
814
|
"i8-counter",
|
|
815
|
+
"i8-filled",
|
|
804
816
|
"i8-hint",
|
|
805
817
|
"i8-hint-wrapper",
|
|
806
818
|
"i8-hint-wrapper-stack",
|
|
@@ -812,6 +824,7 @@ const componentClasses = {
|
|
|
812
824
|
"i8-label-wrapper",
|
|
813
825
|
"i8-loading",
|
|
814
826
|
"i8-prepend",
|
|
827
|
+
"i8-round",
|
|
815
828
|
"i8-stack-label",
|
|
816
829
|
"i8-ta-wrapper",
|
|
817
830
|
"i8-textarea",
|
|
@@ -833,6 +846,7 @@ const componentClasses = {
|
|
|
833
846
|
"scope-error",
|
|
834
847
|
"segmented",
|
|
835
848
|
"select-none",
|
|
849
|
+
"surface",
|
|
836
850
|
"text-body",
|
|
837
851
|
"text-center",
|
|
838
852
|
"text-ellipsis",
|
|
@@ -847,6 +861,8 @@ const componentClasses = {
|
|
|
847
861
|
"bottom-0",
|
|
848
862
|
"btn",
|
|
849
863
|
"btn-icon",
|
|
864
|
+
"btn-icon-left",
|
|
865
|
+
"btn-icon-right",
|
|
850
866
|
"btn-label",
|
|
851
867
|
"btn-square",
|
|
852
868
|
"c8-flat",
|
|
@@ -870,6 +886,7 @@ const componentClasses = {
|
|
|
870
886
|
"h6",
|
|
871
887
|
"i8",
|
|
872
888
|
"i8-append",
|
|
889
|
+
"i8-filled",
|
|
873
890
|
"i8-icon-clickable",
|
|
874
891
|
"i8-icon-wrap",
|
|
875
892
|
"i8-input",
|
|
@@ -878,6 +895,7 @@ const componentClasses = {
|
|
|
878
895
|
"i8-label-wrapper",
|
|
879
896
|
"i8-loading",
|
|
880
897
|
"i8-prepend",
|
|
898
|
+
"i8-round",
|
|
881
899
|
"i8-ta-wrapper",
|
|
882
900
|
"i8-textarea",
|
|
883
901
|
"i8-underline",
|
|
@@ -895,6 +913,7 @@ const componentClasses = {
|
|
|
895
913
|
"rounded",
|
|
896
914
|
"segmented",
|
|
897
915
|
"select-none",
|
|
916
|
+
"surface",
|
|
898
917
|
"text-center",
|
|
899
918
|
"top-0"
|
|
900
919
|
],
|
|
@@ -908,6 +927,8 @@ const componentClasses = {
|
|
|
908
927
|
DatePickerPopup: [
|
|
909
928
|
"btn",
|
|
910
929
|
"btn-icon",
|
|
930
|
+
"btn-icon-left",
|
|
931
|
+
"btn-icon-right",
|
|
911
932
|
"btn-label",
|
|
912
933
|
"btn-square",
|
|
913
934
|
"c8-flat",
|
|
@@ -932,6 +953,7 @@ const componentClasses = {
|
|
|
932
953
|
"relative",
|
|
933
954
|
"rounded",
|
|
934
955
|
"select-none",
|
|
956
|
+
"surface",
|
|
935
957
|
"text-center"
|
|
936
958
|
],
|
|
937
959
|
DelayedSwitch: ["visible"],
|
|
@@ -946,6 +968,8 @@ const componentClasses = {
|
|
|
946
968
|
"border-grey-500/50",
|
|
947
969
|
"btn",
|
|
948
970
|
"btn-icon",
|
|
971
|
+
"btn-icon-left",
|
|
972
|
+
"btn-icon-right",
|
|
949
973
|
"btn-label",
|
|
950
974
|
"btn-square",
|
|
951
975
|
"c8-flat",
|
|
@@ -1026,6 +1050,7 @@ const componentClasses = {
|
|
|
1026
1050
|
"slider-range",
|
|
1027
1051
|
"slider-thumb",
|
|
1028
1052
|
"slider-track",
|
|
1053
|
+
"surface",
|
|
1029
1054
|
"surface-500",
|
|
1030
1055
|
"tab",
|
|
1031
1056
|
"tabs-indicator",
|
|
@@ -1057,6 +1082,8 @@ const componentClasses = {
|
|
|
1057
1082
|
"b",
|
|
1058
1083
|
"btn",
|
|
1059
1084
|
"btn-icon",
|
|
1085
|
+
"btn-icon-left",
|
|
1086
|
+
"btn-icon-right",
|
|
1060
1087
|
"btn-label",
|
|
1061
1088
|
"c8-filled",
|
|
1062
1089
|
"c8-flat",
|
|
@@ -1082,6 +1109,7 @@ const componentClasses = {
|
|
|
1082
1109
|
"px-$card-spacing",
|
|
1083
1110
|
"py-$m",
|
|
1084
1111
|
"rounded",
|
|
1112
|
+
"surface",
|
|
1085
1113
|
"text-card-header",
|
|
1086
1114
|
"text-mt-0"
|
|
1087
1115
|
],
|
|
@@ -1105,6 +1133,7 @@ const componentClasses = {
|
|
|
1105
1133
|
"i8-append",
|
|
1106
1134
|
"i8-before",
|
|
1107
1135
|
"i8-counter",
|
|
1136
|
+
"i8-filled",
|
|
1108
1137
|
"i8-hint",
|
|
1109
1138
|
"i8-hint-wrapper",
|
|
1110
1139
|
"i8-hint-wrapper-stack",
|
|
@@ -1116,6 +1145,7 @@ const componentClasses = {
|
|
|
1116
1145
|
"i8-label-wrapper",
|
|
1117
1146
|
"i8-loading",
|
|
1118
1147
|
"i8-prepend",
|
|
1148
|
+
"i8-round",
|
|
1119
1149
|
"i8-stack-label",
|
|
1120
1150
|
"i8-ta-wrapper",
|
|
1121
1151
|
"i8-textarea",
|
|
@@ -1147,6 +1177,7 @@ const componentClasses = {
|
|
|
1147
1177
|
"flex-grow",
|
|
1148
1178
|
"i8",
|
|
1149
1179
|
"i8-append",
|
|
1180
|
+
"i8-filled",
|
|
1150
1181
|
"i8-icon-clickable",
|
|
1151
1182
|
"i8-icon-wrap",
|
|
1152
1183
|
"i8-input",
|
|
@@ -1155,6 +1186,7 @@ const componentClasses = {
|
|
|
1155
1186
|
"i8-label-wrapper",
|
|
1156
1187
|
"i8-loading",
|
|
1157
1188
|
"i8-prepend",
|
|
1189
|
+
"i8-round",
|
|
1158
1190
|
"i8-ta-wrapper",
|
|
1159
1191
|
"i8-textarea",
|
|
1160
1192
|
"i8-underline",
|
|
@@ -1185,6 +1217,8 @@ const componentClasses = {
|
|
|
1185
1217
|
"bottom-0",
|
|
1186
1218
|
"btn",
|
|
1187
1219
|
"btn-icon",
|
|
1220
|
+
"btn-icon-left",
|
|
1221
|
+
"btn-icon-right",
|
|
1188
1222
|
"btn-label",
|
|
1189
1223
|
"cursor-pointer",
|
|
1190
1224
|
"flex",
|
|
@@ -1197,6 +1231,7 @@ const componentClasses = {
|
|
|
1197
1231
|
"i8-append",
|
|
1198
1232
|
"i8-before",
|
|
1199
1233
|
"i8-counter",
|
|
1234
|
+
"i8-filled",
|
|
1200
1235
|
"i8-hint",
|
|
1201
1236
|
"i8-hint-wrapper",
|
|
1202
1237
|
"i8-hint-wrapper-stack",
|
|
@@ -1208,6 +1243,7 @@ const componentClasses = {
|
|
|
1208
1243
|
"i8-label-wrapper",
|
|
1209
1244
|
"i8-loading",
|
|
1210
1245
|
"i8-prepend",
|
|
1246
|
+
"i8-round",
|
|
1211
1247
|
"i8-stack-label",
|
|
1212
1248
|
"i8-ta-wrapper",
|
|
1213
1249
|
"i8-textarea",
|
|
@@ -1233,6 +1269,7 @@ const componentClasses = {
|
|
|
1233
1269
|
"scope-error",
|
|
1234
1270
|
"scope-grey",
|
|
1235
1271
|
"segmented",
|
|
1272
|
+
"surface",
|
|
1236
1273
|
"text-body",
|
|
1237
1274
|
"text-caption",
|
|
1238
1275
|
"text-center",
|
|
@@ -1247,20 +1284,25 @@ const componentClasses = {
|
|
|
1247
1284
|
MenuItem: [
|
|
1248
1285
|
"btn",
|
|
1249
1286
|
"btn-icon",
|
|
1287
|
+
"btn-icon-left",
|
|
1288
|
+
"btn-icon-right",
|
|
1250
1289
|
"btn-label",
|
|
1251
1290
|
"icon-color",
|
|
1252
1291
|
"icon-size",
|
|
1253
1292
|
"loading-indicator",
|
|
1254
1293
|
"loading-indicator-ring",
|
|
1255
1294
|
"menu-item",
|
|
1256
|
-
"scope-grey"
|
|
1295
|
+
"scope-grey",
|
|
1296
|
+
"surface"
|
|
1257
1297
|
],
|
|
1258
1298
|
OverflowContainer: ["flex", "whitespace-nowrap"],
|
|
1259
1299
|
Pagination: [
|
|
1260
1300
|
"btn",
|
|
1261
1301
|
"btn-icon",
|
|
1302
|
+
"btn-icon-left",
|
|
1262
1303
|
"btn-square",
|
|
1263
1304
|
"c8-flat",
|
|
1305
|
+
"disabled-soft",
|
|
1264
1306
|
"flex",
|
|
1265
1307
|
"gap-1",
|
|
1266
1308
|
"icon-color",
|
|
@@ -1274,11 +1316,14 @@ const componentClasses = {
|
|
|
1274
1316
|
Popover: [
|
|
1275
1317
|
"btn",
|
|
1276
1318
|
"btn-icon",
|
|
1319
|
+
"btn-icon-left",
|
|
1320
|
+
"btn-icon-right",
|
|
1277
1321
|
"btn-label",
|
|
1278
1322
|
"icon-color",
|
|
1279
1323
|
"icon-size",
|
|
1280
1324
|
"loading-indicator",
|
|
1281
|
-
"loading-indicator-ring"
|
|
1325
|
+
"loading-indicator-ring",
|
|
1326
|
+
"surface"
|
|
1282
1327
|
],
|
|
1283
1328
|
ProgressBar: [
|
|
1284
1329
|
"progress-bar",
|
|
@@ -1296,6 +1341,7 @@ const componentClasses = {
|
|
|
1296
1341
|
"rb-item-wrapper",
|
|
1297
1342
|
"rb-label",
|
|
1298
1343
|
"rb-root",
|
|
1344
|
+
"rb-row",
|
|
1299
1345
|
"text-caption",
|
|
1300
1346
|
"text-error-500",
|
|
1301
1347
|
"text-mt-0",
|
|
@@ -1317,6 +1363,7 @@ const componentClasses = {
|
|
|
1317
1363
|
"i8-append",
|
|
1318
1364
|
"i8-before",
|
|
1319
1365
|
"i8-counter",
|
|
1366
|
+
"i8-filled",
|
|
1320
1367
|
"i8-hint",
|
|
1321
1368
|
"i8-hint-wrapper",
|
|
1322
1369
|
"i8-hint-wrapper-stack",
|
|
@@ -1328,6 +1375,7 @@ const componentClasses = {
|
|
|
1328
1375
|
"i8-label-wrapper",
|
|
1329
1376
|
"i8-loading",
|
|
1330
1377
|
"i8-prepend",
|
|
1378
|
+
"i8-round",
|
|
1331
1379
|
"i8-stack-label",
|
|
1332
1380
|
"i8-ta-wrapper",
|
|
1333
1381
|
"i8-textarea",
|
|
@@ -1702,13 +1750,13 @@ function multiplySaturation(colors, m = .5) {
|
|
|
1702
1750
|
return newObj;
|
|
1703
1751
|
}
|
|
1704
1752
|
const layerN = (n, reverse) => reverse ? 4 - n : n;
|
|
1753
|
+
const sideTemplate = (bg, n) => {
|
|
1754
|
+
const fg = bg === "light" ? "dark" : "light";
|
|
1755
|
+
return `current-bg-scope-${bg}-${n} current-text-scope-${fg}-0 current-icon-scope-${fg}-0 current-text-muted-scope-${fg}-2 current-icon-muted-scope-${fg}-2 current-bg-hover-scope-${bg}-${Math.min(n + 1, 4)} current-border-hover-scope-${bg}-3 current-text-hover-scope-${fg}-0`;
|
|
1756
|
+
};
|
|
1705
1757
|
function getPaletteShortcuts() {
|
|
1706
1758
|
return [
|
|
1707
1759
|
[/^layer-([0-4])$/, ([, a], { theme }) => {
|
|
1708
|
-
const sideTemplate = (bg, n) => {
|
|
1709
|
-
const fg = bg === "light" ? "dark" : "light";
|
|
1710
|
-
return `current-bg-scope-${bg}-${n} current-text-scope-${fg}-0 current-icon-scope-${fg}-0 current-text-muted-scope-${fg}-2 current-icon-muted-scope-${fg}-2 current-bg-hover-scope-${bg}-${Math.min(n + 1, 4)} current-border-hover-scope-${bg}-3 current-text-hover-scope-${fg}-0`;
|
|
1711
|
-
};
|
|
1712
1760
|
const d = layerN(Number(a), theme.reverseDarkLayers);
|
|
1713
1761
|
const l = layerN(Number(a), theme.reverseLightLayers);
|
|
1714
1762
|
const dark = sideTemplate("dark", d);
|
|
@@ -2069,6 +2117,7 @@ const rules = [
|
|
|
2069
2117
|
"--card-heading-ls": props["letter-spacing"],
|
|
2070
2118
|
"--card-heading-bc": props["--font-bc"],
|
|
2071
2119
|
"--card-heading-tc": props["--font-tc"],
|
|
2120
|
+
"--card-heading-font": props["font-family"] || "inherit",
|
|
2072
2121
|
"padding": "var(--card-spacing)"
|
|
2073
2122
|
};
|
|
2074
2123
|
}
|
|
@@ -2270,7 +2319,8 @@ const themeFactory = (opts) => {
|
|
|
2270
2319
|
"--font-tc": "var(--card-heading-tc)",
|
|
2271
2320
|
"font-weight": "var(--card-heading-weight)",
|
|
2272
2321
|
"line-height": "var(--card-heading-lh)",
|
|
2273
|
-
"letter-spacing": "var(--card-heading-ls)"
|
|
2322
|
+
"letter-spacing": "var(--card-heading-ls)",
|
|
2323
|
+
"font-family": "var(--card-heading-font, inherit)"
|
|
2274
2324
|
}] };
|
|
2275
2325
|
for (const [name, val] of Object.entries(opts.typography)) {
|
|
2276
2326
|
if (!val) continue;
|
|
@@ -2407,6 +2457,13 @@ const defaultOptions = {
|
|
|
2407
2457
|
}
|
|
2408
2458
|
}
|
|
2409
2459
|
};
|
|
2460
|
+
const DISABLED_SOFT = "disabled-soft";
|
|
2461
|
+
const DISABLED_SOFT_LITERAL = "__vunor-disabled-soft";
|
|
2462
|
+
const disabledSoftLiteral = {
|
|
2463
|
+
name: "vunor:disabled-soft-literal",
|
|
2464
|
+
order: -1e3,
|
|
2465
|
+
match: (matcher, { generator }) => matcher === DISABLED_SOFT && generator.config.shortcuts.some((sc) => sc[0] === DISABLED_SOFT) ? { matcher: DISABLED_SOFT_LITERAL } : void 0
|
|
2466
|
+
};
|
|
2410
2467
|
const presetVunor = (_opts) => {
|
|
2411
2468
|
const opts = defu(_opts, defaultOptions);
|
|
2412
2469
|
const wind = getFixedWind();
|
|
@@ -2425,7 +2482,8 @@ const presetVunor = (_opts) => {
|
|
|
2425
2482
|
...wind,
|
|
2426
2483
|
name: "vunor",
|
|
2427
2484
|
theme: defu(theme.theme, wind.theme),
|
|
2428
|
-
|
|
2485
|
+
variants: [disabledSoftLiteral, ...wind.variants ?? []],
|
|
2486
|
+
shortcuts: [...paletteShortcuts, [DISABLED_SOFT_LITERAL, DISABLED_SOFT]],
|
|
2429
2487
|
extractors: [createVunorExtractor()],
|
|
2430
2488
|
layers: {
|
|
2431
2489
|
preflights: 0,
|