vunor 0.2.0 → 0.2.2

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/dist/theme.d.mts CHANGED
@@ -16,7 +16,7 @@ interface TVunorUnoPresetOpts {
16
16
  regular: number;
17
17
  dense: number;
18
18
  };
19
- typography?: Record<TTypographyNames, TTypography | undefined>;
19
+ typography?: Partial<Record<TTypographyNames, TTypography>>;
20
20
  layers?: {
21
21
  reverseDark?: boolean;
22
22
  reverseLight?: boolean;
@@ -333,6 +333,9 @@ declare const presetVunor: PresetFactory<TVunorTheme, TVunorUnoPresetOpts & {
333
333
  palette?: TVunorPaletteOptions;
334
334
  }>;
335
335
  //#endregion
336
+ //#region src/theme/shortcuts/raw.d.ts
337
+ declare const rawVunorShortcuts: TVunorShortcut[];
338
+ //#endregion
336
339
  //#region src/theme/utils/shortcut-obj.d.ts
337
340
  /**
338
341
  * Build uno shortcut from vunor shortcut object
@@ -354,10 +357,6 @@ declare const componentClasses: Record<string, string[]>;
354
357
  declare function getComponentClasses(...components: string[]): string[];
355
358
  //#endregion
356
359
  //#region src/theme.d.ts
357
- /**
358
- * Array of raw vunor shortcuts (not merged)
359
- */
360
- declare const rawVunorShortcuts: TVunorShortcut[];
361
360
  /**
362
361
  * Vunor shortcuts (merged version of rawVunorShortcuts)
363
362
  */
package/dist/theme.mjs CHANGED
@@ -232,18 +232,21 @@ const shortcuts = [
232
232
  ];
233
233
  //#endregion
234
234
  //#region src/theme/shortcuts/btn.ts
235
+ const btnSquare = "size-fingertip px-0";
236
+ const btnRound = "px-fingertip-half rounded-fingertip-half";
235
237
  const btn = defineShortcuts({
236
238
  "btn": {
237
239
  "": "h-fingertip flex items-center justify-center px-$m gap-$xs select-none fw-bold tracking-wide relative",
238
- "[&.btn-round]:": "px-fingertip-half rounded-fingertip-half",
239
- "[&.btn-square]:": "size-fingertip px-0",
240
+ "[&.btn-round]:": btnRound,
241
+ "[&.btn-square]:": btnSquare,
240
242
  "[&.btn-round.btn-square]:": "px-0",
241
243
  "disabled:": "opacity-80 cursor-not-allowed",
242
244
  "[&>span]:data-[loading]:": "opacity-0 pointer-events-none",
243
245
  "[&>div:not(.loading-indicator-wrapper)]:data-[loading]:": "opacity-0 pointer-events-none",
244
246
  "[&>.loading-indicator-wrapper]:": "absolute left-0 top-0 right-0 bottom-0 flex items-center justify-center cursor-wait"
245
247
  },
246
- "btn-square": { "": "" },
248
+ "btn-round": { "": btnRound },
249
+ "btn-square": { "": btnSquare },
247
250
  "btn-label": {
248
251
  "": "lh-1em ellipsis whitespace-nowrap overflow-x-clip overflow-y-visible",
249
252
  "group-[.btn-square]/btn:": "hidden"
@@ -358,132 +361,137 @@ const disabledSoft = defineShortcuts({ "disabled-soft": {
358
361
  "data-[disabled]:": disabledPaint
359
362
  } });
360
363
  //#endregion
361
- //#region src/theme/shortcuts/i8.ts
362
- const i8 = defineShortcuts({
363
- "i8": {
364
- "": "h-fingertip min-w-3em flex items-center select-none relative icon-current content-box disabled-soft",
365
- "data-[type=textarea]:": "min-h-fingertip h-auto items-start",
366
- "data-[active=true]:": "icon-current-hl",
367
- "focus-within:": "icon-current-hl",
368
- "[&.i8-flat]:": { "": "border-b-width-[var(--i8-border-width,1px)]" },
369
- "[&.i8-filled]:": {
370
- "": "i8-apply-bg current-outline-hl i8-apply-border rounded-r1 i8-apply-border",
371
- "data-[active=true]:": "current-border-hl outline i8-apply-outline",
372
- "focus-within:": "current-border-hl outline i8-apply-outline"
364
+ //#region src/theme/shortcuts/raw.ts
365
+ const rawVunorShortcuts = [
366
+ defineShortcuts({
367
+ "i8": {
368
+ "": "h-fingertip min-w-3em flex items-center select-none relative icon-current content-box disabled-soft",
369
+ "data-[type=textarea]:": "min-h-fingertip h-auto items-start",
370
+ "data-[active=true]:": "icon-current-hl",
371
+ "focus-within:": "icon-current-hl",
372
+ "[&.i8-flat]:": { "": "border-b-width-[var(--i8-border-width,1px)]" },
373
+ "[&.i8-filled]:": {
374
+ "": "i8-apply-bg current-outline-hl i8-apply-border rounded-r1 i8-apply-border",
375
+ "data-[active=true]:": "current-border-hl outline i8-apply-outline",
376
+ "focus-within:": "current-border-hl outline i8-apply-outline"
377
+ },
378
+ "[&.i8-transparent]:": "bg-transparent!",
379
+ "[&.i8-round]:": {
380
+ "": "i8-apply-bg current-outline-hl rounded-fingertip-half i8-apply-border",
381
+ "data-[active=true]:": "current-border-hl outline i8-apply-outline",
382
+ "focus-within:": "current-border-hl outline i8-apply-outline"
383
+ },
384
+ "group-[[data-error=true]]/i8:": { "": "current-border-error-500 current-outline-error-500 border-opacity-100 border-current" }
373
385
  },
374
- "[&.i8-transparent]:": "bg-transparent!",
375
- "[&.i8-round]:": {
376
- "": "i8-apply-bg current-outline-hl rounded-fingertip-half i8-apply-border",
377
- "data-[active=true]:": "current-border-hl outline i8-apply-outline",
378
- "focus-within:": "current-border-hl outline i8-apply-outline"
386
+ "i8-bare": {
387
+ "": "i8-apply-bg i8-apply-border current-outline-hl rounded-r1 outline-none text-current placeholder:text-current/50 disabled-soft",
388
+ "hover:": "border-current-hover",
389
+ "focus:": "current-border-hl outline i8-apply-outline",
390
+ "data-[error=true]:": "current-border-error-500 current-outline-error-500 border-current"
379
391
  },
380
- "group-[[data-error=true]]/i8:": { "": "current-border-error-500 current-outline-error-500 border-opacity-100 border-current" }
381
- },
382
- "i8-bare": {
383
- "": "i8-apply-bg i8-apply-border current-outline-hl rounded-r1 outline-none text-current placeholder:text-current/50 disabled-soft",
384
- "hover:": "border-current-hover",
385
- "focus:": "current-border-hl outline i8-apply-outline",
386
- "data-[error=true]:": "current-border-error-500 current-outline-error-500 border-current"
387
- },
388
- "i8-loading": {
389
- "": "text-current-icon pl-$m",
390
- "last:": "pr-$m"
391
- },
392
- "i8-icon-wrap": "size-fingertip flex items-center justify-center",
393
- "i8-underline": {
394
- "group-[.i8-filled]/i8:": "hidden",
395
- "": "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",
396
- "group-[[data-active=true]]/i8:": "left-0 right-0"
397
- },
398
- "segmented": {
399
- "": {
400
- "first-of-type:": "rounded-r-0!",
401
- "last-of-type:": "rounded-lt-0! rounded-lb-0!",
402
- "not-last-of-type:not-first-of-type:": "rounded-0!",
403
- "not-first-of-type:": "border-l-0! border-l-grey-500/20",
404
- "data-[active=true]:": "z-2"
392
+ "i8-loading": {
393
+ "": "text-current-icon pl-$m",
394
+ "last:": "pr-$m"
405
395
  },
406
- "[&.i8-flat]:": { "not-first-of-type:": "ml-$xs" }
407
- },
408
- "i8-input-wrapper": { "": "relative w-full h-full" },
409
- "i8-input": {
410
- "": "w-full outline-none h-full bg-transparent",
411
- "group-[.i8-filled]/i8:[&:not([data-has-prepend=true])]:": "pl-$m",
412
- "group-[.i8-filled]/i8:[&:not([data-has-append=true])]:": "pr-$m",
413
- "selection:": "bg-scope-color-500 text-white",
414
- "group-[.i8-round]/i8:[&:not([data-has-prepend=true])]:": "pl-fingertip-half",
415
- "group-[.i8-round]/i8:[&:not([data-has-append=true])]:": "pr-fingertip-half",
416
- "group-[[data-has-label]]/i8:": "pt-$m",
417
- "group-[.segmented.i8-round:not(:first-child)]/i8:[&:not([data-has-prepend=true])]:": "pl-$m",
418
- "group-[.segmented.i8-round:not(:last-child)]/i8:[&:not([data-has-append=true])]:": "pr-$m"
419
- },
420
- "i8-textarea": {
421
- "": "w-full outline-none h-full bg-transparent text-body",
422
- "group-[.i8-filled]/i8:[&:not([data-has-prepend=true])]:": "pl-$m",
423
- "group-[.i8-filled]/i8:[&:not([data-has-append=true])]:": "pr-$m",
424
- "selection:": "bg-scope-color-500 text-white",
425
- "group-[.i8-round]/i8:[&:not([data-has-prepend=true])]:": "pl-fingertip-half",
426
- "group-[.i8-round]/i8:[&:not([data-has-append=true])]:": "pr-fingertip-half",
427
- "group-[.segmented.i8-round:not(:first-child)]/i8:[&:not([data-has-prepend=true])]:": "pl-$m",
428
- "group-[.segmented.i8-round:not(:last-child)]/i8:[&:not([data-has-append=true])]:": "pr-$m"
429
- },
430
- "i8-ta-wrapper": {
431
- "": "w-full pt-0.75em",
432
- "group-[[data-has-label]]/i8:": "mt-$m"
433
- },
434
- "i8-label": {
435
- "": "absolute top-0 h-fingertip text-body text-grey-400 lh-fingertip transition-all transition-duration-300 truncate text-ellipsis overflow-hidden max-w-70%",
436
- "group-[:focus-within]/i8:": "h-[2em] lh-2em text-label font-size-[0.7em] text-current-hl",
437
- "group-[[data-active=true]]/i8:": "h-[2em] lh-2em text-label font-size-[0.7em] text-current-hl",
438
- "group-[[data-has-placeholder]]/i8:": "h-[2em] lh-2em text-label font-size-[0.7em]",
439
- "group-[[data-has-value]]/i8:": "h-[2em] lh-2em text-label font-size-[0.7em]"
440
- },
441
- "i8-label-wrapper": {
442
- "": "pointer-events-none absolute left-0 right-0 bottom-0 top-0",
443
- "group-[.i8-filled]/i8:data-[has-prepend=true]": "pl-0",
444
- "group-[.i8-filled]/i8:data-[has-append=true]": "pr-0",
445
- "group-[.i8-filled]/i8:": "px-$m",
446
- "group-[.i8-round]/i8:[&:not([data-has-prepend=true])]:": "pl-fingertip-half",
447
- "group-[.i8-round]/i8:[&:not([data-has-append=true])]:": "pr-fingertip-half",
448
- "group-[.segmented.i8-round:not(:first-child)]/i8:[&:not([data-has-prepend=true])]:": "pl-$m",
449
- "group-[.segmented.i8-round:not(:last-child)]/i8:[&:not([data-has-append=true])]:": "pr-$m"
450
- },
451
- "i8-hint": { "": "text-caption pt-$xs text-grey-400 flex-1" },
452
- "i8-counter": { "": "text-caption pt-$xs text-grey-400" },
453
- "i8-hint-wrapper": {
454
- "": "relative flex justify-between",
455
- "group-[.i8-round]/i8:": "px-fingertip-half",
456
- "group-[.i8-filled]/i8:": "px-$m"
457
- },
458
- "i8-hint-wrapper-stack": { "": "relative flex justify-between" },
459
- "i8-stack-label": { "": "relative pb-$xxs" },
460
- "i8-prepend": {
461
- "": "flex items-center",
462
- "group-[[data-type=textarea]]/i8:": "my-$m"
463
- },
464
- "i8-append": {
465
- "": "flex items-center",
466
- "group-[[data-type=textarea]]/i8:": "my-$m"
467
- },
468
- "i8-before": {
469
- "": "h-fingertip flex items-center icon-current",
470
- "group-[[data-group-active=true]]/i8:": "icon-current-hl"
471
- },
472
- "i8-after": {
473
- "": "h-fingertip flex items-center icon-current",
474
- "group-[[data-group-active=true]]/i8:": "icon-current-hl"
475
- },
476
- "i8-icon-clickable": {
477
- "[&>.i8-icon-wrap]:": "cursor-pointer",
478
- "[&>.i8-icon-wrap:hover]:": "current-icon-hl icon-current"
479
- }
480
- });
481
- //#endregion
482
- //#region src/theme/shortcuts/menu.ts
483
- const menu = defineShortcuts({
484
- "menu-root": "flex flex-col overflow-hidden",
485
- "menu-item": "justify-start c8-flat gap-$m w-full fw-400"
486
- });
396
+ "i8-icon-wrap": "size-fingertip flex items-center justify-center",
397
+ "i8-underline": {
398
+ "group-[.i8-filled]/i8:": "hidden",
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",
400
+ "group-[[data-active=true]]/i8:": "left-0 right-0"
401
+ },
402
+ "segmented": {
403
+ "": {
404
+ "first-of-type:": "rounded-r-0!",
405
+ "last-of-type:": "rounded-lt-0! rounded-lb-0!",
406
+ "not-last-of-type:not-first-of-type:": "rounded-0!",
407
+ "not-first-of-type:": "border-l-0! border-l-grey-500/20",
408
+ "data-[active=true]:": "z-2"
409
+ },
410
+ "[&.i8-flat]:": { "not-first-of-type:": "ml-$xs" }
411
+ },
412
+ "i8-input-wrapper": { "": "relative w-full h-full" },
413
+ "i8-input": {
414
+ "": "w-full outline-none h-full bg-transparent",
415
+ "group-[.i8-filled]/i8:[&:not([data-has-prepend=true])]:": "pl-$m",
416
+ "group-[.i8-filled]/i8:[&:not([data-has-append=true])]:": "pr-$m",
417
+ "selection:": "bg-scope-color-500 text-white",
418
+ "group-[.i8-round]/i8:[&:not([data-has-prepend=true])]:": "pl-fingertip-half",
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"
423
+ },
424
+ "i8-textarea": {
425
+ "": "w-full outline-none h-full bg-transparent text-body",
426
+ "group-[.i8-filled]/i8:[&:not([data-has-prepend=true])]:": "pl-$m",
427
+ "group-[.i8-filled]/i8:[&:not([data-has-append=true])]:": "pr-$m",
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"
433
+ },
434
+ "i8-ta-wrapper": {
435
+ "": "w-full pt-0.75em",
436
+ "group-[[data-has-label]]/i8:": "mt-$m"
437
+ },
438
+ "i8-label": {
439
+ "": "absolute top-0 h-fingertip text-body text-grey-400 lh-fingertip transition-all transition-duration-300 truncate text-ellipsis overflow-hidden max-w-70%",
440
+ "group-[:focus-within]/i8:": "h-[2em] lh-2em text-label font-size-[0.7em] text-current-hl",
441
+ "group-[[data-active=true]]/i8:": "h-[2em] lh-2em text-label font-size-[0.7em] text-current-hl",
442
+ "group-[[data-has-placeholder]]/i8:": "h-[2em] lh-2em text-label font-size-[0.7em]",
443
+ "group-[[data-has-value]]/i8:": "h-[2em] lh-2em text-label font-size-[0.7em]"
444
+ },
445
+ "i8-label-wrapper": {
446
+ "": "pointer-events-none absolute left-0 right-0 bottom-0 top-0",
447
+ "group-[.i8-filled]/i8:data-[has-prepend=true]": "pl-0",
448
+ "group-[.i8-filled]/i8:data-[has-append=true]": "pr-0",
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"
454
+ },
455
+ "i8-hint": { "": "text-caption pt-$xs text-grey-400 flex-1" },
456
+ "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
+ },
462
+ "i8-hint-wrapper-stack": { "": "relative flex justify-between" },
463
+ "i8-stack-label": { "": "relative pb-$xxs" },
464
+ "i8-prepend": {
465
+ "": "flex items-center",
466
+ "group-[[data-type=textarea]]/i8:": "my-$m"
467
+ },
468
+ "i8-append": {
469
+ "": "flex items-center",
470
+ "group-[[data-type=textarea]]/i8:": "my-$m"
471
+ },
472
+ "i8-before": {
473
+ "": "h-fingertip flex items-center icon-current",
474
+ "group-[[data-group-active=true]]/i8:": "icon-current-hl"
475
+ },
476
+ "i8-after": {
477
+ "": "h-fingertip flex items-center icon-current",
478
+ "group-[[data-group-active=true]]/i8:": "icon-current-hl"
479
+ },
480
+ "i8-icon-clickable": {
481
+ "[&>.i8-icon-wrap]:": "cursor-pointer",
482
+ "[&>.i8-icon-wrap:hover]:": "current-icon-hl icon-current"
483
+ }
484
+ }),
485
+ c8,
486
+ btn,
487
+ defineShortcuts({
488
+ "menu-root": "flex flex-col overflow-hidden",
489
+ "menu-item": "justify-start c8-flat gap-$m w-full fw-400"
490
+ }),
491
+ popupCard,
492
+ disabledSoft,
493
+ ...shortcuts
494
+ ];
487
495
  //#endregion
488
496
  //#region src/theme/utils/shortcut-obj.ts
489
497
  /**
@@ -580,6 +588,9 @@ const componentClasses = {
580
588
  AppToasts: [
581
589
  "[grid-area:_action]",
582
590
  "[grid-area:_title]",
591
+ "btn",
592
+ "btn-icon",
593
+ "btn-label",
583
594
  "c8-flat",
584
595
  "fw-$bold",
585
596
  "icon-color",
@@ -592,18 +603,28 @@ const componentClasses = {
592
603
  "toasts-viewport"
593
604
  ],
594
605
  Button: [
606
+ "btn",
607
+ "btn-icon",
608
+ "btn-label",
595
609
  "icon-color",
596
610
  "icon-size",
597
611
  "loading-indicator",
598
612
  "loading-indicator-ring"
599
613
  ],
600
614
  ButtonBase: [
615
+ "btn",
616
+ "btn-icon",
617
+ "btn-label",
601
618
  "icon-color",
602
619
  "icon-size",
603
620
  "loading-indicator",
604
621
  "loading-indicator-ring"
605
622
  ],
606
623
  Calendar: [
624
+ "btn",
625
+ "btn-icon",
626
+ "btn-label",
627
+ "btn-square",
607
628
  "c8-flat",
608
629
  "calendar-cell",
609
630
  "calendar-grid-row",
@@ -750,6 +771,10 @@ const componentClasses = {
750
771
  "absolute",
751
772
  "blur",
752
773
  "bottom-0",
774
+ "btn",
775
+ "btn-icon",
776
+ "btn-label",
777
+ "btn-square",
753
778
  "c8-flat",
754
779
  "calendar-cell",
755
780
  "calendar-grid-row",
@@ -820,6 +845,10 @@ const componentClasses = {
820
845
  "absolute",
821
846
  "blur",
822
847
  "bottom-0",
848
+ "btn",
849
+ "btn-icon",
850
+ "btn-label",
851
+ "btn-square",
823
852
  "c8-flat",
824
853
  "calendar-cell",
825
854
  "calendar-grid-row",
@@ -877,6 +906,10 @@ const componentClasses = {
877
906
  "px-0"
878
907
  ],
879
908
  DatePickerPopup: [
909
+ "btn",
910
+ "btn-icon",
911
+ "btn-label",
912
+ "btn-square",
880
913
  "c8-flat",
881
914
  "calendar-cell",
882
915
  "calendar-grid-row",
@@ -911,6 +944,10 @@ const componentClasses = {
911
944
  "border-b",
912
945
  "border-grey-500/30",
913
946
  "border-grey-500/50",
947
+ "btn",
948
+ "btn-icon",
949
+ "btn-label",
950
+ "btn-square",
914
951
  "c8-flat",
915
952
  "card",
916
953
  "checkbox",
@@ -1018,6 +1055,9 @@ const componentClasses = {
1018
1055
  ],
1019
1056
  Dialog: [
1020
1057
  "b",
1058
+ "btn",
1059
+ "btn-icon",
1060
+ "btn-label",
1021
1061
  "c8-filled",
1022
1062
  "c8-flat",
1023
1063
  "card",
@@ -1143,6 +1183,9 @@ const componentClasses = {
1143
1183
  "b",
1144
1184
  "blur",
1145
1185
  "bottom-0",
1186
+ "btn",
1187
+ "btn-icon",
1188
+ "btn-label",
1146
1189
  "cursor-pointer",
1147
1190
  "flex",
1148
1191
  "flex-grow",
@@ -1176,6 +1219,8 @@ const componentClasses = {
1176
1219
  "loading-indicator-ring",
1177
1220
  "max-w-100%",
1178
1221
  "mb-$s",
1222
+ "menu-item",
1223
+ "menu-root",
1179
1224
  "overflow-hidden",
1180
1225
  "overflow-x-hidden",
1181
1226
  "overflow-y-auto",
@@ -1200,14 +1245,21 @@ const componentClasses = {
1200
1245
  "whitespace-nowrap"
1201
1246
  ],
1202
1247
  MenuItem: [
1248
+ "btn",
1249
+ "btn-icon",
1250
+ "btn-label",
1203
1251
  "icon-color",
1204
1252
  "icon-size",
1205
1253
  "loading-indicator",
1206
1254
  "loading-indicator-ring",
1255
+ "menu-item",
1207
1256
  "scope-grey"
1208
1257
  ],
1209
1258
  OverflowContainer: ["flex", "whitespace-nowrap"],
1210
1259
  Pagination: [
1260
+ "btn",
1261
+ "btn-icon",
1262
+ "btn-square",
1211
1263
  "c8-flat",
1212
1264
  "flex",
1213
1265
  "gap-1",
@@ -1220,6 +1272,9 @@ const componentClasses = {
1220
1272
  "size-fingertip"
1221
1273
  ],
1222
1274
  Popover: [
1275
+ "btn",
1276
+ "btn-icon",
1277
+ "btn-label",
1223
1278
  "icon-color",
1224
1279
  "icon-size",
1225
1280
  "loading-indicator",
@@ -2075,7 +2130,22 @@ const defaultTypography = {
2075
2130
  "caption": font(400, 600, k$1(-.5), k$1(.5), -.007),
2076
2131
  "overline": font(400, 600, k$1(-.5), k$1(.5), .0618)
2077
2132
  };
2078
- function buildFontTheme(size, w, wBold, lh, ls, actualFontHeightFactor = 1, actualFontHeightTopBottomRatio = .5) {
2133
+ /**
2134
+ * Builds the UnoCSS `fontSize` theme entry for one typography level.
2135
+ *
2136
+ * Takes the whole {@link TTypography} rather than its numeric fields: this
2137
+ * function owns the shape of the emitted tuple, so fields that carry no
2138
+ * geometry (`font`, `css`) reach the output instead of being dropped at a call
2139
+ * site that can only forward numbers.
2140
+ */
2141
+ function buildFontTheme(t, defaults) {
2142
+ const size = t.size || 1;
2143
+ const w = t.weight || 400;
2144
+ const wBold = t.boldWeight || 700;
2145
+ const lh = t.height || 1;
2146
+ const ls = t.spacing || 0;
2147
+ const actualFontHeightFactor = t.actualHeightFactor || defaults.actualHeightFactor;
2148
+ const actualFontHeightTopBottomRatio = t.actualHeightTopBottomRatio || defaults.actualHeightTopBottomRatio;
2079
2149
  const correctedSize = size * actualFontHeightFactor;
2080
2150
  const m = (lh * size - correctedSize) / size;
2081
2151
  const half = correctedSize / 2;
@@ -2096,7 +2166,9 @@ function buildFontTheme(size, w, wBold, lh, ls, actualFontHeightFactor = 1, actu
2096
2166
  "--font-tc": `${-mt}em`,
2097
2167
  "font-weight": w,
2098
2168
  "line-height": `${lh}em`,
2099
- "letter-spacing": `${ls}em`
2169
+ "letter-spacing": `${ls}em`,
2170
+ ...t.font && { "font-family": t.font },
2171
+ ...t.css
2100
2172
  }]
2101
2173
  };
2102
2174
  }
@@ -2200,8 +2272,12 @@ const themeFactory = (opts) => {
2200
2272
  "line-height": "var(--card-heading-lh)",
2201
2273
  "letter-spacing": "var(--card-heading-ls)"
2202
2274
  }] };
2203
- for (const [name, val] of Object.entries(opts.typography)) if (val?.size) {
2204
- const ft = buildFontTheme(val.size || 1, val.weight || 400, val.boldWeight || 700, val.height || 1, val.spacing || 0, val.actualHeightFactor || opts.actualFontHeightFactor, val.actualHeightTopBottomRatio || opts.actualFontHeightTopBottomRatio);
2275
+ for (const [name, val] of Object.entries(opts.typography)) {
2276
+ if (!val) continue;
2277
+ const ft = buildFontTheme(val, {
2278
+ actualHeightFactor: opts.actualFontHeightFactor,
2279
+ actualHeightTopBottomRatio: opts.actualFontHeightTopBottomRatio
2280
+ });
2205
2281
  fontSize[name] = ft.theme;
2206
2282
  spacing[name] = `${ft.size}em`;
2207
2283
  }
@@ -2372,18 +2448,6 @@ function getFixedWind() {
2372
2448
  //#endregion
2373
2449
  //#region src/theme.ts
2374
2450
  /**
2375
- * Array of raw vunor shortcuts (not merged)
2376
- */
2377
- const rawVunorShortcuts = [
2378
- i8,
2379
- c8,
2380
- btn,
2381
- menu,
2382
- popupCard,
2383
- disabledSoft,
2384
- ...shortcuts
2385
- ];
2386
- /**
2387
2451
  * Vunor shortcuts (merged version of rawVunorShortcuts)
2388
2452
  */
2389
2453
  const mergedVunorShortcuts = mergeVunorShortcuts(rawVunorShortcuts);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vunor",
3
- "version": "0.2.0",
3
+ "version": "0.2.2",
4
4
  "files": [
5
5
  "dist"
6
6
  ],