@lessly/ui 0.26.1 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.d.ts +2010 -407
  2. package/dist/index.js +3772 -2011
  3. package/dist/styles.css +49 -198
  4. package/dist/tailwind-preset.js +19 -0
  5. package/package.json +2 -2
package/dist/styles.css CHANGED
@@ -1,5 +1,6 @@
1
1
  /* === @lessly/ui styles — generated by scripts/build-styles.mjs === */
2
- /* @lessly/tokens theme + deprecated --color-* aliases + ui pieces + animation layer */
2
+ /* @lessly/tokens theme (composite .text-<style> classes stripped) + deprecated
3
+ --color-* aliases + ui pieces + animation layer */
3
4
 
4
5
  /*
5
6
  * Auto-generated by tokens/build.js — do not edit manually.
@@ -17,6 +18,7 @@
17
18
  --bg-elevated: #252936;
18
19
  --bg-overlay: #252936;
19
20
  --bg-sunken: #0e1015;
21
+ --bg-selected: #1f222d;
20
22
  --bg-brand: #06297d;
21
23
  --bg-brand-subtle: #1f2541;
22
24
  --bg-brand-hover: #08349b;
@@ -59,10 +61,11 @@
59
61
  --icon-warning: #efb042;
60
62
  --icon-danger: #f06a6a;
61
63
  --border-subtle: #2a2e3b;
62
- --border-default: #737c95;
64
+ --border-default: #535a6e;
63
65
  --border-strong: #8a91a7;
66
+ --border-selected: #737c95;
64
67
  --border-brand: #165ff2;
65
- --border-focus: #165ff2;
68
+ --border-focus: #3d7af4;
66
69
  --border-success: #1da456;
67
70
  --border-warning: #b3780e;
68
71
  --border-danger: #e82020;
@@ -70,26 +73,26 @@
70
73
  --field-bg-hover: #12141b;
71
74
  --field-bg-focus: #0e1015;
72
75
  --field-bg-valid: #191b24;
73
- --field-border: #30343f;
74
- --field-border-hover: #393d4b;
75
- --field-border-focus: #165ff2;
76
- --field-border-filled: #393d4b;
76
+ --field-border: #60687f;
77
+ --field-border-hover: #737c95;
78
+ --field-border-focus: #3d7af4;
79
+ --field-border-filled: #737c95;
77
80
  --field-border-error: #e82020;
78
- --field-border-success: #13703c;
79
- --field-ring-focus: rgba(22,95,242,0.25);
81
+ --field-border-success: #188a49;
82
+ --field-ring-focus: rgba(61,122,244,0.25);
80
83
  --field-ring-error: rgba(232,32,32,0.2);
81
- --field-ring-success: rgba(19,112,60,0.15);
84
+ --field-ring-success: rgba(24,138,73,0.15);
82
85
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
83
- --shadow-md: 0 2px 8px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4);
84
- --shadow-lg: 0 8px 24px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.4);
85
- --shadow-xl: 0 16px 48px rgba(0,0,0,0.7), 0 4px 12px rgba(0,0,0,0.5);
86
- --shadow-overlay: 0 8px 24px rgba(0,0,0,0.5);
86
+ --shadow-md: 0 0 0 1px rgba(255,255,255,0.18), 0 2px 8px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4);
87
+ --shadow-lg: 0 0 0 1px rgba(255,255,255,0.18), 0 8px 24px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.4);
88
+ --shadow-xl: 0 0 0 1px rgba(255,255,255,0.18), 0 16px 48px rgba(0,0,0,0.7), 0 4px 12px rgba(0,0,0,0.5);
89
+ --shadow-overlay: 0 0 0 1px rgba(255,255,255,0.18), 0 8px 24px rgba(0,0,0,0.5);
87
90
  --shadow-inner: inset 0 1px 3px rgba(0,0,0,0.4);
88
91
  --shadow-glow-brand: 0 0 12px rgba(6,41,125,0.5);
89
92
  --overlay-backdrop: rgba(8,9,12,0.80);
90
93
  --overlay-scrim: rgba(8,9,12,0.60);
91
94
  --overlay-modal-bg: #1f222d;
92
- --focus-ring-color: #165ff2;
95
+ --focus-ring-color: #3d7af4;
93
96
  --focus-ring-offset: 2px;
94
97
  --focus-ring-width: 2px;
95
98
  --grid-gutter: 16px;
@@ -248,7 +251,7 @@
248
251
  --foreground: var(--text-primary);
249
252
  --card: var(--bg-surface);
250
253
  --card-foreground: var(--text-primary);
251
- --popover: var(--bg-elevated);
254
+ --popover: var(--bg-overlay);
252
255
  --popover-foreground: var(--text-primary);
253
256
  --primary: var(--bg-brand-bright);
254
257
  --primary-foreground: var(--text-on-brand);
@@ -279,6 +282,7 @@
279
282
  --bg-elevated: #edeef0;
280
283
  --bg-overlay: #ffffff;
281
284
  --bg-sunken: #e1e2e4;
285
+ --bg-selected: #f2f3f4;
282
286
  --bg-brand-subtle: #e4ecfe;
283
287
  --bg-brand-hover: #05226a;
284
288
  --bg-brand-bright-hover: #0b4cd5;
@@ -311,6 +315,7 @@
311
315
  --icon-warning: #7a5409;
312
316
  --icon-danger: #94120e;
313
317
  --border-subtle: #cfd1d7;
318
+ --border-default: #bbbec7;
314
319
  --border-strong: #60687f;
315
320
  --border-focus: #0940b8;
316
321
  --border-success: #188a49;
@@ -318,9 +323,9 @@
318
323
  --field-bg-hover: #f6f7f7;
319
324
  --field-bg-focus: #ffffff;
320
325
  --field-bg-valid: #eeeff0;
321
- --field-border: #cfd1d7;
322
- --field-border-hover: #a5a9b5;
323
- --field-border-filled: #a5a9b5;
326
+ --field-border: #a5a9b5;
327
+ --field-border-focus: #165ff2;
328
+ --field-border-success: #13703c;
324
329
  --field-ring-focus: rgba(22,95,242,0.15);
325
330
  --field-ring-error: rgba(232,32,32,0.12);
326
331
  --field-ring-success: rgba(19,112,60,0.1);
@@ -342,7 +347,7 @@
342
347
  --foreground: var(--text-primary);
343
348
  --card: var(--bg-surface);
344
349
  --card-foreground: var(--text-primary);
345
- --popover: var(--bg-elevated);
350
+ --popover: var(--bg-overlay);
346
351
  --popover-foreground: var(--text-primary);
347
352
  --primary: var(--bg-brand-bright);
348
353
  --primary-foreground: var(--text-on-brand);
@@ -366,184 +371,7 @@
366
371
  --inverted-foreground: var(--bg-brand);
367
372
  }
368
373
 
369
- /* Text-style utility classes (.text-<role>, .link) — generated; see typographyClasses in build.js. */
370
- .text-display-xl {
371
- font-family: var(--text-display-xl-font-family);
372
- font-size: var(--text-display-xl-font-size);
373
- line-height: var(--text-display-xl-line-height);
374
- font-weight: var(--text-display-xl-font-weight);
375
- letter-spacing: var(--text-display-xl-letter-spacing);
376
- }
377
-
378
- .text-display-lg {
379
- font-family: var(--text-display-lg-font-family);
380
- font-size: var(--text-display-lg-font-size);
381
- line-height: var(--text-display-lg-line-height);
382
- font-weight: var(--text-display-lg-font-weight);
383
- letter-spacing: var(--text-display-lg-letter-spacing);
384
- }
385
-
386
- .text-h1 {
387
- font-family: var(--text-h1-font-family);
388
- font-size: var(--text-h1-font-size);
389
- line-height: var(--text-h1-line-height);
390
- font-weight: var(--text-h1-font-weight);
391
- letter-spacing: var(--text-h1-letter-spacing);
392
- }
393
-
394
- .text-h2 {
395
- font-family: var(--text-h2-font-family);
396
- font-size: var(--text-h2-font-size);
397
- line-height: var(--text-h2-line-height);
398
- font-weight: var(--text-h2-font-weight);
399
- letter-spacing: var(--text-h2-letter-spacing);
400
- }
401
-
402
- .text-h3 {
403
- font-family: var(--text-h3-font-family);
404
- font-size: var(--text-h3-font-size);
405
- line-height: var(--text-h3-line-height);
406
- font-weight: var(--text-h3-font-weight);
407
- letter-spacing: var(--text-h3-letter-spacing);
408
- }
409
-
410
- .text-h4 {
411
- font-family: var(--text-h4-font-family);
412
- font-size: var(--text-h4-font-size);
413
- line-height: var(--text-h4-line-height);
414
- font-weight: var(--text-h4-font-weight);
415
- letter-spacing: var(--text-h4-letter-spacing);
416
- }
417
-
418
- .text-h5 {
419
- font-family: var(--text-h5-font-family);
420
- font-size: var(--text-h5-font-size);
421
- line-height: var(--text-h5-line-height);
422
- font-weight: var(--text-h5-font-weight);
423
- letter-spacing: var(--text-h5-letter-spacing);
424
- }
425
-
426
- .text-h6 {
427
- font-family: var(--text-h6-font-family);
428
- font-size: var(--text-h6-font-size);
429
- line-height: var(--text-h6-line-height);
430
- font-weight: var(--text-h6-font-weight);
431
- letter-spacing: var(--text-h6-letter-spacing);
432
- }
433
-
434
- .text-body-lg {
435
- font-family: var(--text-body-lg-font-family);
436
- font-size: var(--text-body-lg-font-size);
437
- line-height: var(--text-body-lg-line-height);
438
- font-weight: var(--text-body-lg-font-weight);
439
- letter-spacing: var(--text-body-lg-letter-spacing);
440
- }
441
-
442
- .text-body {
443
- font-family: var(--text-body-font-family);
444
- font-size: var(--text-body-font-size);
445
- line-height: var(--text-body-line-height);
446
- font-weight: var(--text-body-font-weight);
447
- letter-spacing: var(--text-body-letter-spacing);
448
- }
449
-
450
- .text-body-sm {
451
- font-family: var(--text-body-sm-font-family);
452
- font-size: var(--text-body-sm-font-size);
453
- line-height: var(--text-body-sm-line-height);
454
- font-weight: var(--text-body-sm-font-weight);
455
- letter-spacing: var(--text-body-sm-letter-spacing);
456
- }
457
-
458
- .text-caption {
459
- font-family: var(--text-caption-font-family);
460
- font-size: var(--text-caption-font-size);
461
- line-height: var(--text-caption-line-height);
462
- font-weight: var(--text-caption-font-weight);
463
- letter-spacing: var(--text-caption-letter-spacing);
464
- }
465
-
466
- .text-overline {
467
- font-family: var(--text-overline-font-family);
468
- font-size: var(--text-overline-font-size);
469
- line-height: var(--text-overline-line-height);
470
- font-weight: var(--text-overline-font-weight);
471
- letter-spacing: var(--text-overline-letter-spacing);
472
- text-transform: var(--text-overline-text-transform);
473
- }
474
-
475
- .text-label-lg {
476
- font-family: var(--text-label-lg-font-family);
477
- font-size: var(--text-label-lg-font-size);
478
- line-height: var(--text-label-lg-line-height);
479
- font-weight: var(--text-label-lg-font-weight);
480
- letter-spacing: var(--text-label-lg-letter-spacing);
481
- }
482
-
483
- .text-label-md {
484
- font-family: var(--text-label-md-font-family);
485
- font-size: var(--text-label-md-font-size);
486
- line-height: var(--text-label-md-line-height);
487
- font-weight: var(--text-label-md-font-weight);
488
- letter-spacing: var(--text-label-md-letter-spacing);
489
- }
490
-
491
- .text-label-sm {
492
- font-family: var(--text-label-sm-font-family);
493
- font-size: var(--text-label-sm-font-size);
494
- line-height: var(--text-label-sm-line-height);
495
- font-weight: var(--text-label-sm-font-weight);
496
- letter-spacing: var(--text-label-sm-letter-spacing);
497
- }
498
-
499
- .text-button-lg {
500
- font-family: var(--text-button-lg-font-family);
501
- font-size: var(--text-button-lg-font-size);
502
- line-height: var(--text-button-lg-line-height);
503
- font-weight: var(--text-button-lg-font-weight);
504
- letter-spacing: var(--text-button-lg-letter-spacing);
505
- }
506
-
507
- .text-button-md {
508
- font-family: var(--text-button-md-font-family);
509
- font-size: var(--text-button-md-font-size);
510
- line-height: var(--text-button-md-line-height);
511
- font-weight: var(--text-button-md-font-weight);
512
- letter-spacing: var(--text-button-md-letter-spacing);
513
- }
514
-
515
- .text-button-sm {
516
- font-family: var(--text-button-sm-font-family);
517
- font-size: var(--text-button-sm-font-size);
518
- line-height: var(--text-button-sm-line-height);
519
- font-weight: var(--text-button-sm-font-weight);
520
- letter-spacing: var(--text-button-sm-letter-spacing);
521
- }
522
-
523
- .text-code-lg {
524
- font-family: var(--text-code-lg-font-family);
525
- font-size: var(--text-code-lg-font-size);
526
- line-height: var(--text-code-lg-line-height);
527
- font-weight: var(--text-code-lg-font-weight);
528
- letter-spacing: var(--text-code-lg-letter-spacing);
529
- }
530
-
531
- .text-code {
532
- font-family: var(--text-code-font-family);
533
- font-size: var(--text-code-font-size);
534
- line-height: var(--text-code-line-height);
535
- font-weight: var(--text-code-font-weight);
536
- letter-spacing: var(--text-code-letter-spacing);
537
- }
538
-
539
- .text-code-sm {
540
- font-family: var(--text-code-sm-font-family);
541
- font-size: var(--text-code-sm-font-size);
542
- line-height: var(--text-code-sm-line-height);
543
- font-weight: var(--text-code-sm-font-weight);
544
- letter-spacing: var(--text-code-sm-letter-spacing);
545
- }
546
-
374
+ /* Link utility — the composite .text-<style> classes generated here are stripped by scripts/build-styles.mjs; their --text-* variables above are untouched. */
547
375
  .link {
548
376
  color: var(--text-link);
549
377
  text-decoration: underline;
@@ -671,6 +499,7 @@
671
499
  --color-icon-warning: var(--icon-warning);
672
500
  --color-icon-danger: var(--icon-danger);
673
501
  --color-border-subtle: var(--border-subtle);
502
+ --color-border-default: var(--border-default);
674
503
  --color-border-strong: var(--border-strong);
675
504
  --color-border-focus: var(--border-focus);
676
505
  --color-border-success: var(--border-success);
@@ -789,6 +618,28 @@
789
618
  }
790
619
  }
791
620
 
621
+ /* === Motion === */
622
+ /* Backs the <AutoHeight> primitive: eases a container's height as its content changes size.
623
+ Motion-token driven, so it inherits reduce-motion (the vars resolve to 0ms). A real class rather
624
+ than a Tailwind arbitrary utility, which the content scanner can drop for a newly-used class.
625
+ Overflow is NOT clipped here — the component clips only while the height is animating (so the
626
+ settled box doesn't slice focus rings or tooltips on full-width children). */
627
+ .motion-auto-height {
628
+ transition-property: height;
629
+ transition-duration: var(--motion-duration-normal);
630
+ transition-timing-function: var(--motion-easing-standard);
631
+ }
632
+
633
+ /* Backs ToggleGroup's `sliding` mark: one thumb that travels between equal-width slots instead of a
634
+ fill appearing on each. A real class for the same reason as the one above, and `slide` because the
635
+ thumb crosses the width of a slot — `ui`, the hover/focus tint step, would clip it to near a snap.
636
+ `standard` because it is on screen before and after and only moves in place. */
637
+ .motion-segment-thumb {
638
+ transition-property: transform;
639
+ transition-duration: var(--motion-duration-slide);
640
+ transition-timing-function: var(--motion-easing-standard);
641
+ }
642
+
792
643
  /* === Animation layer (tw-animate-css, compiled) — see scripts/build-styles.mjs === */
793
644
  /*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
794
645
  @layer properties;
package/dist/tailwind-preset.js CHANGED
@@ -1,8 +1,27 @@
1
1
  // src/tailwind-preset.ts
2
2
  import tokensPreset from "@lessly/tokens/tailwind-preset";
3
+ var upstreamTheme = tokensPreset.theme;
3
4
  var lesslyPreset = {
4
5
  // Spread first: darkMode must keep winning even if upstream ever adds one.
5
6
  ...tokensPreset,
7
+ theme: {
8
+ ...upstreamTheme,
9
+ // The same replacement rule, one layer down: `borderWidth` names none/thin/medium/
10
+ // thick/heavy and `spacing` has no `px`, so neither `border`, `border-0` nor `h-px`
11
+ // resolves to a key — `0` because a named-only scale has no numeric steps at all,
12
+ // which is how `InputGroup`'s addon kept a border it writes `border-0` to remove. Tailwind 4 answers both from its own defaults, but the peer floor is
13
+ // `tailwindcss >=3.4.0` and Tailwind 3 has no such fallback — without these two the
14
+ // kit's card outlines, table rules and dividers emit nothing at all on a v3
15
+ // consumer. Delete both the day `@lessly/tokens` declares them; the preset test
16
+ // asserts upstream still doesn't, so it goes red on that release.
17
+ borderWidth: { ...upstreamTheme.borderWidth, DEFAULT: "1px", 0: "0px" },
18
+ spacing: { ...upstreamTheme.spacing, px: "1px" },
19
+ // And once more for `opacity`, which upstream names as 0/5/10/20/40/60/80/100: the
20
+ // `disabled:opacity-50` on every disabled control, the `bg-black/50` behind every dialog,
21
+ // sheet and drawer, and the `/90` and `opacity-70`/`opacity-75` a handful of components write
22
+ // all reach for a key that is not there. Same deletion contract as the two above.
23
+ opacity: { ...upstreamTheme.opacity, 50: "0.50", 70: "0.70", 75: "0.75", 90: "0.90" }
24
+ },
6
25
  darkMode: "class"
7
26
  };
8
27
  export {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lessly/ui",
3
- "version": "0.26.1",
3
+ "version": "1.0.0",
4
4
  "description": "Lessly design system — shared UI primitives, tokens, and theme",
5
5
  "type": "module",
6
6
  "packageManager": "pnpm@10.30.3",
@@ -62,7 +62,7 @@
62
62
  }
63
63
  },
64
64
  "dependencies": {
65
- "@lessly/tokens": "^0.5.0",
65
+ "@lessly/tokens": "^0.7.0",
66
66
  "@radix-ui/react-accordion": "^1.2.16",
67
67
  "@radix-ui/react-alert-dialog": "^1.1.19",
68
68
  "@radix-ui/react-aspect-ratio": "^1.1.11",