npm - @lessly/ui - Versions diffs - 4.1.1 → 5.0.0 - Mend

@lessly/ui 4.1.1 → 5.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 (9) hide show

package/dist/{chunk-LTHOLX7I.js → chunk-OTYVKDP2.js} +37 -6
package/dist/index.d.ts +125 -8
package/dist/index.js +348 -197
package/dist/router.d.ts +27 -6
package/dist/router.js +128 -44
package/dist/styles-federated.css +61 -17
package/dist/styles.css +62 -54
package/dist/tailwind-preset.js +30 -4
package/package.json +2 -2

package/dist/styles.css CHANGED Viewed

@@ -18,7 +18,7 @@
   --bg-elevated: #252936;
   --bg-overlay: #252936;
   --bg-sunken: #0e1015;
-  --bg-selected: #1f222d;
+  --bg-selected: #252735;
   --bg-brand: #06297d;
   --bg-brand-subtle: #1f2541;
   --bg-brand-hover: #08349b;
@@ -102,12 +102,12 @@
   --grid-container-max: 1440px;
   /* typography text-styles — theme-invariant, :root only (see typographyVars in build.js) */
-  --text-display-xl-font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
+  --text-display-xl-font-family: "Sora", "Inter", system-ui, -apple-system, sans-serif;
   --text-display-xl-font-size: 3.5rem;
   --text-display-xl-line-height: 1.05;
   --text-display-xl-font-weight: 400;
   --text-display-xl-letter-spacing: -0.02em;
-  --text-display-lg-font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
+  --text-display-lg-font-family: "Sora", "Inter", system-ui, -apple-system, sans-serif;
   --text-display-lg-font-size: 3rem;
   --text-display-lg-line-height: 1.1;
   --text-display-lg-font-weight: 400;
@@ -282,7 +282,7 @@
   --bg-elevated: #edeef0;
   --bg-overlay: #ffffff;
   --bg-sunken: #e1e2e4;
-  --bg-selected: #f2f3f4;
+  --bg-selected: #eceded;
   --bg-brand-subtle: #e4ecfe;
   --bg-brand-hover: #05226a;
   --bg-brand-bright-hover: #0b4cd5;
@@ -341,6 +341,27 @@
   --overlay-modal-bg: #ffffff;
   --focus-ring-color: #0940b8;
+  /* Same value as :root on purpose, re-declared so .light lists every colour token a
+     light consumer gets rather than leaving some to inheritance. Why, and what holds
+     it honest: docs/tokens.md, "Theme invariance". */
+  --bg-brand: #06297d;
+  --bg-brand-bright: #165ff2;
+  --bg-success: #13703c;
+  --bg-success-bright: #21be63;
+  --bg-danger: #78100b;
+  --text-on-brand: #f6f7f7;
+  --text-on-success: #f6f7f7;
+  --text-on-success-bright: #08090c;
+  --text-on-warning: #08090c;
+  --text-on-danger: #f6f7f7;
+  --border-selected: #737c95;
+  --border-brand: #165ff2;
+  --border-warning: #b3780e;
+  --border-danger: #e82020;
+  --field-border-hover: #737c95;
+  --field-border-filled: #737c95;
+  --field-border-error: #e82020;
   /* shadcn role bridge re-declared so .light on a nested element (not just <html>)
      re-resolves the aliases to light values. */
   --background: var(--bg-primary);
@@ -470,11 +491,15 @@
   --color-bg-surface: var(--bg-surface);
   --color-bg-elevated: var(--bg-elevated);
   --color-bg-sunken: var(--bg-sunken);
+  --color-bg-brand: var(--bg-brand);
   --color-bg-brand-subtle: var(--bg-brand-subtle);
   --color-bg-brand-hover: var(--bg-brand-hover);
+  --color-bg-brand-bright: var(--bg-brand-bright);
+  --color-bg-success: var(--bg-success);
   --color-bg-success-subtle: var(--bg-success-subtle);
   --color-bg-warning: var(--bg-warning);
   --color-bg-warning-subtle: var(--bg-warning-subtle);
+  --color-bg-danger: var(--bg-danger);
   --color-bg-danger-subtle: var(--bg-danger-subtle);
   --color-bg-teal-subtle: var(--bg-teal-subtle);
   --color-bg-violet-subtle: var(--bg-violet-subtle);
@@ -484,6 +509,10 @@
   --color-text-tertiary: var(--text-tertiary);
   --color-text-disabled: var(--text-disabled);
   --color-text-inverse: var(--text-inverse);
+  --color-text-on-brand: var(--text-on-brand);
+  --color-text-on-success: var(--text-on-success);
+  --color-text-on-warning: var(--text-on-warning);
+  --color-text-on-danger: var(--text-on-danger);
   --color-text-brand: var(--text-brand);
   --color-text-success: var(--text-success);
   --color-text-warning: var(--text-warning);
@@ -501,53 +530,25 @@
   --color-border-subtle: var(--border-subtle);
   --color-border-default: var(--border-default);
   --color-border-strong: var(--border-strong);
+  --color-border-brand: var(--border-brand);
   --color-border-focus: var(--border-focus);
   --color-border-success: var(--border-success);
+  --color-border-warning: var(--border-warning);
+  --color-border-danger: var(--border-danger);
 }
 /* === Fonts === */
-@font-face {
-  font-family: "Inter";
-  src: url("/fonts/inter/inter-regular.woff2") format("woff2");
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
-}
-@font-face {
-  font-family: "Inter";
-  src: url("/fonts/inter/inter-medium.woff2") format("woff2");
-  font-weight: 500;
-  font-style: normal;
-  font-display: swap;
-}
-@font-face {
-  font-family: "Inter";
-  src: url("/fonts/inter/inter-semibold.woff2") format("woff2");
-  font-weight: 600;
-  font-style: normal;
-  font-display: swap;
-}
-@font-face {
-  font-family: "Inter";
-  src: url("/fonts/inter/inter-bold.woff2") format("woff2");
-  font-weight: 700;
-  font-style: normal;
-  font-display: swap;
-}
-@font-face {
-  font-family: "Fira Mono";
-  src: url("/fonts/fira-mono/fira-mono-regular.woff2") format("woff2");
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
-}
-@font-face {
-  font-family: "Fira Mono";
-  src: url("/fonts/fira-mono/fira-mono-medium.woff2") format("woff2");
-  font-weight: 500;
-  font-style: normal;
-  font-display: swap;
-}
+/* This kit declares no face of its own, and scripts/build-styles.mjs refuses a build where one
+   reappears here. Written without the at-rule spelled out: that guard is a character scanner
+   over this file, so naming the rule in prose would register as a block.
+   The faces live in @lessly/tokens/fonts.css — Inter, Fira Mono and Sora, against RELATIVE
+   `./fonts/...` paths at files inside that package. A consumer imports that sheet and is done.
+   What stood here declared four of them a second time against ABSOLUTE `/fonts/**.woff2`, which
+   named files the kit does not ship and every consumer had to serve itself; one who did not
+   rendered in system fallback with no error at all. Sora, which `--text-display-*-font-family`
+   has named since @lessly/tokens@0.8.0, was never declared here in any form and so never
+   painted at all. */
 /* === Theme Variables === */
 /* The token palettes (colors, typography, motion, shadows, grid) live in
@@ -647,8 +648,10 @@
 /* === Motion === */
 /* Backs the <AutoHeight> primitive: eases a container's height as its content changes size.
-   Motion-token driven, so it inherits reduce-motion (the vars resolve to 0ms). A real class rather
-   than a Tailwind arbitrary utility, which the content scanner can drop for a newly-used class.
+   A real class because `height` is a property no Tailwind transition utility names: the only way to
+   write it in a class list is the arbitrary `transition-[height]`, which the content scanner can
+   drop the first time a file writes it. (The duration is not the reason — `duration-normal` carries
+   the same variable this line does.)
    Overflow is NOT clipped here — the component clips only while the height is animating (so the
    settled box doesn't slice focus rings or tooltips on full-width children). */
 .motion-auto-height {
@@ -658,9 +661,11 @@
 }
 /* Backs ToggleGroup's `sliding` mark: one thumb that travels between equal-width slots instead of a
-   fill appearing on each. A real class for the same reason as the one above, and `slide` because the
-   thumb crosses the width of a slot — `ui`, the hover/focus tint step, would clip it to near a snap.
-   `standard` because it is on screen before and after and only moves in place. */
+   fill appearing on each. A named primitive rather than the three utilities that would now say the
+   same thing, so the thumb's timing is stated once and cannot drift between the call sites that
+   write it. `slide` because the thumb crosses the width of a slot — `ui`, the hover/focus tint step,
+   would clip it to near a snap. `standard` because it is on screen before and after and only moves
+   in place. */
 .motion-segment-thumb {
   transition-property: transform;
   transition-duration: var(--motion-duration-slide);
@@ -671,9 +676,9 @@
    frame as it travels. One class on both, so the mark cannot be retuned away from the edge it
    answers for — the same reason two carets read one `caretMotion`. `transform` is here rather than
    in a class of its own because the bar is that edge said in miniature: retune one and the two stop
-   arriving together. A real class for the reason the two above are, and
-   token-driven because a Tailwind `duration-200` is a literal 200ms: under prefers-reduced-motion
-   the rail kept sliding for its full 200ms while every token-driven motion beside it went instant. */
+   arriving together. A real class for the reason the first one above is, and more so: `width,
+   transform` is a pair no Tailwind utility names at all, so writing it in a class list means the
+   arbitrary `transition-[width,transform]` — the form the scanner can drop. */
 .motion-rail-collapse {
   transition-property: width, transform;
   transition-duration: var(--motion-duration-normal);
@@ -738,6 +743,9 @@
 /* === Animation layer (tw-animate-css, compiled) — see scripts/build-styles.mjs === */
 /*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
 @layer properties;
+.animate-accordion-down {
+  animation: accordion-down var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
+}
 .animate-in {
   animation: enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
 }

package/dist/tailwind-preset.js CHANGED Viewed

@@ -1,6 +1,17 @@
 // src/tailwind-preset.ts
 import tokensPreset from "@lessly/tokens/tailwind-preset";
 var upstreamTheme = tokensPreset.theme;
+var boundToMotionVar = (name, fallback) => `var(--motion-duration-${name}, ${fallback})`;
+var NUMERIC_DURATION_ALIASES = { 200: "normal", 300: "slow", 500: "slower" };
+var upstreamDuration = (name) => {
+  const value = upstreamTheme.transitionDuration[name];
+  if (value === void 0) {
+    throw new Error(
+      `@lessly/tokens no longer declares transitionDuration.${name}, which the numeric duration steps alias \u2014 repoint or drop NUMERIC_DURATION_ALIASES for it in src/tailwind-preset.ts.`
+    );
+  }
+  return value;
+};
 var lesslyPreset = {
   // Spread first: darkMode must keep winning even if upstream ever adds one.
   ...tokensPreset,
@@ -30,11 +41,26 @@ var lesslyPreset = {
     // is not there. Four of these steps are an upstream token's own value under the name Tailwind
     // reads for it — 200ms is `normal`, 300ms `slow`, 500ms `slower`, 10 `raised`. Same deletion
     // contract as the three above.
+    //
+    // Every step reaches the utility as its motion variable, upstream's literal behind it as the
+    // fallback, and the numeric steps bind to the variable of the key they alias. Only a
+    // declaration naming a variable is one the token layer's `prefers-reduced-motion` block can
+    // zero. Only the fallback keeps a consumer who takes the preset without `@lessly/ui/styles.css`
+    // on the durations they have: a `var()` with nothing to resolve and no fallback is invalid at
+    // computed-value time, and `transition-duration` drops to its initial `0s`.
     transitionDuration: {
-      ...upstreamTheme.transitionDuration,
-      200: "200ms",
-      300: "300ms",
-      500: "500ms"
+      ...Object.fromEntries(
+        Object.entries(upstreamTheme.transitionDuration).map(([name, value]) => [
+          name,
+          boundToMotionVar(name, value)
+        ])
+      ),
+      ...Object.fromEntries(
+        Object.entries(NUMERIC_DURATION_ALIASES).map(([step, name]) => [
+          step,
+          boundToMotionVar(name, upstreamDuration(name))
+        ])
+      )
     },
     zIndex: { ...upstreamTheme.zIndex, 10: "10", 20: "20", 50: "50" },
     boxShadow: { ...upstreamTheme.boxShadow, none: "none" },

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@lessly/ui",
-  "version": "4.1.1",
+  "version": "5.0.0",
   "description": "Lessly design system — shared UI primitives, tokens, and theme",
   "type": "module",
   "packageManager": "pnpm@10.30.3",
@@ -73,7 +73,7 @@
     }
   },
   "dependencies": {
-    "@lessly/tokens": "^0.7.0",
+    "@lessly/tokens": "^0.9.0",
     "@radix-ui/react-accordion": "^1.2.16",
     "@radix-ui/react-alert-dialog": "^1.1.19",
     "@radix-ui/react-aspect-ratio": "^1.1.11",