@nextlyhq/ui 0.0.2-alpha.54 → 0.0.2-alpha.57

package/dist/theme.css

@@ -180,8 +180,9 @@
   --color-destructive-800: color-mix(in srgb, var(--nx-destructive), black 50%);
   --color-destructive-900: color-mix(in srgb, var(--nx-destructive), black 70%);
   --color-destructive-950: color-mix(in srgb, var(--nx-destructive), black 85%);
-  /* Saturated fill for solid buttons; distinct from the text-tuned base so
-   * white on-color text stays AA in both modes. */
+  /* Saturated fill for solid buttons, kept separate from the text-tuned base
+   * so each can be solved for its own job. The ink that lands on it is
+   * `-foreground`, which is white in light mode and black in dark. */
   --color-destructive-solid: var(--nx-destructive-solid);
   --color-destructive-foreground: var(--nx-destructive-foreground);
 
@@ -417,16 +418,18 @@
    * rounded-xl / rounded-2xl are NOT tiers of this knob. `tailwind-preset.ts`
    * exports only lg/md/sm, so a plugin using the preset gets Tailwind's fixed
    * 0.75rem / 1rem for them, detached from --radius; and the definitions below
-   * add to the knob rather than subtracting, so at the shipped --radius: 0 they
-   * resolve to 4px and 8px — visibly round inside a square admin. Nothing in the
-   * repo uses them. Treat them as off-contract and pick from sm/md/lg.
+   * ADD to the knob rather than subtracting, so they always sit rounder than
+   * the container tier and drift further as the knob grows. Nothing in the repo
+   * uses them. Treat them as off-contract and pick from sm/md/lg.
    *
-   * What --radius: 0 really does: `lg` is 0, and `sm` and `md` compute to -4px
-   * and -2px. They render square only because border-radius clamps a negative
-   * length to 0 at used-value time. The token itself stays negative, so reading
-   * `--radius-sm` for padding, an inset, or through getComputedStyle yields
-   * -4px, not 0. Anything that consumes a step as a length rather than as a
-   * corner must clamp it itself.
+   * At the shipped 0.5rem the three tiers are 4px, 6px and 8px. All positive,
+   * which matters: `sm` and `md` SUBTRACT from the knob, so a knob under 4px
+   * makes them negative. They still render square, because border-radius clamps
+   * a negative length to 0 at used-value time — but the token keeps its
+   * negative value, so reading `--radius-sm` for a padding, an inset, or
+   * through getComputedStyle yields -4px rather than 0. Anything consuming a
+   * step as a LENGTH rather than as a corner must clamp it itself, and that
+   * obligation returns the moment someone dials the knob back down.
    *
    * A site that genuinely must stay square keeps `rounded-none` WITH an inline
    * comment saying why — overlapped-border strips, full-bleed fills inside an
@@ -518,11 +521,34 @@
  * and it shadows the real weight utility rather than adding to it.
  * ============================================ */
 @theme {
-  --font-sans: var(--font-inter), Inter, sans-serif;
+  /* The host app supplies the face through the variable; the family name is the
+   * var()'s own FALLBACK ARGUMENT, covering a host that installed the font
+   * without `next/font`, and the generic stack after it covers a host that did
+   * neither. Naming only the family would resolve to nothing under `next/font`,
+   * which self-hosts the face and exposes it ONLY as a variable -- a bare
+   * "Geist" there silently falls through to the system sans.
+   *
+   * The fallback has to sit INSIDE the parentheses. A family listed after the
+   * closing `)` is not reached when the variable is undefined: an unresolved
+   * `var()` with no fallback makes the whole declaration invalid at
+   * computed-value time, which for an inherited property like font-family means
+   * the element inherits its parent's face and the entire stack is discarded.
+   * The comma list looks like a fallback chain and is not one, so a host that
+   * skipped the variable rendered in whatever the page already used rather than
+   * in the generic sans this stack names.
+   *
+   * These are declared in a non-inline `@theme`, so they are emitted into
+   * `:root` and substitution happens THERE, not on the consuming element. A
+   * host must expose the variable at or above that scope -- `next/font`'s
+   * generated class belongs on `<html>`. On `<body>` the variable is invisible
+   * to this declaration no matter how it is spelled. */
+  --font-sans:
+    var(--font-geist, Geist), ui-sans-serif, system-ui, -apple-system,
+    "Segoe UI", sans-serif;
   --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
   --font-mono:
-    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
-    "Courier New", monospace;
+    var(--font-geist-mono, "Geist Mono"), ui-monospace, SFMono-Regular, Menlo,
+    Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 
   /* Body text, captions */
   --font-weight-normal: 400;
@@ -685,22 +711,23 @@
 
 :root {
   /* Base colors - using Slate neutral scale */
-  --nx-background: oklch(1 0 0);
+  --nx-background: oklch(0.99 0 0);
   /* Pure white for weightless aesthetic */
-  --nx-page-background: oklch(0.9818 0 0);
+  --nx-page-background: oklch(0.97 0 0);
   /* #f9f9f9 for page content area */
-  --nx-foreground: oklch(0.2079 0.0399 265.73);
-  /* slate-900 */
+  --nx-foreground: oklch(0 0 0);
 
   /* Component colors */
   --nx-card: oklch(1 0 0);
   /* pure white for cards to pop on off-white bg */
-  --nx-card-foreground: oklch(0.2079 0.0399 265.73);
-  /* slate-900 */
-  --nx-popover: oklch(1 0 0);
+  --nx-card-foreground: oklch(0 0 0);
+  --nx-popover: oklch(0.99 0 0);
   /* white */
-  --nx-popover-foreground: oklch(0.2079 0.0399 265.73);
-  /* slate-900 */
+  --nx-popover-foreground: oklch(0 0 0);
+  /* Table headers, table footers and the pagination bar. A surface, so it lives
+     with the other surfaces: declared next to the component that paints it, a
+     palette change would move everything around it and leave it behind. */
+  --nx-table-header-bg: oklch(1 0 0);
 
   /* Brand colors - Blue-Cyan Professional Palette */
   --nx-primary: oklch(0 0 0);
@@ -709,41 +736,41 @@
   /* white */
 
   /* Secondary colors - using slate-100 for subtle backgrounds */
-  --nx-secondary: oklch(0.9684 0.0068 247.9);
+  --nx-secondary: oklch(0.94 0 0);
   /* slate-100 */
-  --nx-secondary-foreground: oklch(0.2079 0.0399 265.73);
-  /* slate-900 */
+  --nx-secondary-foreground: oklch(0 0 0);
 
   /* Utility colors */
-  --nx-muted: oklch(0.9696 0 0);
+  --nx-muted: oklch(0.97 0 0);
   /* Darkened so muted text clears WCAG 4.5:1 on the muted surface (was 4.35:1). */
-  --nx-muted-foreground: oklch(0.54 0.0407 257.44);
-  /* slate-500 */
-  --nx-accent: oklch(0.5547 0.0407 257.44);
-  /* Slate-500 per user request #64748b */
-  --nx-accent-foreground: oklch(1 0 0);
-  /* white */
+  --nx-muted-foreground: oklch(0.44 0 0);
+  /* A hover and selection SURFACE, not ink: one step off the page, with
+     `--nx-accent-foreground` as the only thing meant to be read on it. */
+  --nx-accent: oklch(0.94 0 0);
+  --nx-accent-foreground: oklch(0 0 0);
 
   /* State colors - WCAG 2.2 AA Compliant.
    * Each status has two roles kept as separate tokens, the industry-standard
    * split (Radix/Primer): the base token is the readable TEXT color used by
    * `text-destructive` and derived shades, and `-solid` is the saturated FILL
-   * used by buttons under white on-color text. One value cannot serve both in
-   * dark mode (a fill dark enough for white text is too dark to read as text
-   * on the page), so they diverge there. */
+   * used by buttons under the on-color ink. In light mode both roles can be
+   * the same value and the ink is white. In dark mode they cannot: a fill
+   * light enough to read as text on the page is too light for white text, so
+   * success splits the fill and destructive flips its ink to black instead.
+   * The on-color token is what varies, not just the fill. */
   /* Darkened from red-500; renders as #d92c32, ~4.8:1 as text on white. */
-  --nx-destructive: oklch(0.5778 0.2078 25.33);
-  --nx-destructive-solid: oklch(0.5778 0.2078 25.33);
+  --nx-destructive: oklch(0.5661 0.19 23.03);
+  --nx-destructive-solid: oklch(0.5661 0.19 23.03);
   --nx-destructive-foreground: oklch(1 0 0);
   /* white */
   /* Darkened from green-600; renders as #00852c, ~4.8:1 as text on white. */
-  --nx-success: oklch(0.53 0.17 149.2);
+  --nx-success: oklch(0.4981 0.17 149.2);
   --nx-success-solid: oklch(0.53 0.17 149.2);
   --nx-success-foreground: oklch(1 0 0);
   /* white */
   /* Darkened from amber-500 so it reads as text on white at WCAG 4.5:1 (was
    * 2.15:1); its light shades still tint badge/alert surfaces. */
-  --nx-warning: oklch(0.565 0.1646 70.11);
+  --nx-warning: oklch(0.529 0.1646 70.11);
   --nx-warning-foreground: oklch(0.2079 0.0399 265.73);
   /* slate-900 - REQUIRED for AA contrast (warning-500 on white = 3.4:1, fails AA) */
 
@@ -763,14 +790,14 @@
   --nx-code-bg: oklch(0.9761 0.0035 247.86);
   --nx-code-fg: oklch(0.2079 0.0399 265.73);
   /* Darkened slightly to clear WCAG 4.5:1 on the code surface (was 4.44:1). */
-  --nx-code-comment: oklch(0.541 0.0407 257.44);
+  --nx-code-comment: oklch(0.5264 0.0407 257.44);
   --nx-code-keyword: oklch(0.4882 0.2172 303.9);
   --nx-code-string: oklch(0.4478 0.1189 152.1);
   --nx-code-number: oklch(0.5106 0.1518 44.2);
   --nx-code-function: oklch(0.4757 0.1444 254.6);
   --nx-code-operator: oklch(0.4936 0.1418 8.4);
   /* Darkened slightly to clear WCAG 4.5:1 on the code surface (was 4.44:1). */
-  --nx-code-punctuation: oklch(0.541 0.0407 257.44);
+  --nx-code-punctuation: oklch(0.5264 0.0407 257.44);
   --nx-code-variable: oklch(0.4694 0.1173 62.3);
   --nx-code-tag: oklch(0.5054 0.1905 27.5);
   --nx-code-deleted: oklch(0.5054 0.1905 27.5);
@@ -799,12 +826,12 @@
   /* For a scrim over CONTENT rather than the page: an image's hover actions,
    * where the content beneath still has to read through. */
   --nx-overlay-soft: oklch(0 0 0 / 0.4);
-  --nx-border-subtle: oklch(0 0 0 / 0.08);
-  --nx-border: oklch(0 0 0 / 0.14);
+  --nx-border-subtle: color-mix(in srgb, oklch(0.92 0 0), transparent 60%);
+  --nx-border: oklch(0.92 0 0);
   /* Alpha raised so the composited strong border clears WCAG 3:1 / ~4:1 (was 2.11:1). */
-  --nx-border-strong: oklch(0 0 0 / 0.502);
+  --nx-border-strong: oklch(0.58 0 0);
   /* Darkened so the field border clears WCAG 3:1 on the page (was 2.32:1). */
-  --nx-input: oklch(0.6454 0.0116 286.11);
+  --nx-input: oklch(0.6154 0 0);
   --nx-ring: var(--nx-primary);
 
   /* The base colour of the elevation ramp (--shadow-sm..xl, -inner-subtle,
@@ -815,7 +842,6 @@
   /* Chart colors for data visualization */
   --nx-chart-1: var(--nx-primary);
   --nx-chart-2: oklch(0.7399 0.1277 209.34);
-  /* cyan-500 */
   --nx-chart-3: oklch(0.6273 0.17 149.2);
   /* green-600 */
   --nx-chart-4: oklch(0.7686 0.1646 70.11);
@@ -824,7 +850,10 @@
   /* red-500 */
 
   /* Design tokens */
-  --radius: 0px;
+  /* The one corner knob. Every tier below derives from it, so this single
+   * declaration re-rounds the whole admin and a plugin built against the
+   * published preset re-rounds with it. */
+  --radius: 0.5rem;
 
   /* Control sizing — derived from a single height knob so control density
    * scales from one place. Steps map to the control size variants:
@@ -840,25 +869,25 @@
   /* white */
 
   /* Sidebar specific colors - using Slate scale */
-  --nx-sidebar-background: var(--nx-background);
+  --nx-sidebar-background: oklch(0.99 0 0);
   /* flat with the content surface; nav is separated by borders, not fill */
-  --nx-sidebar-foreground: oklch(0.372 0.0392 257.3);
-  /* slate-700 */
-  --nx-sidebar-primary: oklch(0.2079 0.0399 265.73);
-  /* slate-900 */
-  --nx-sidebar-primary-foreground: oklch(0.9838 0.0035 247.86);
+  /* Resting nav ink sits a step back from the active ink, so an active row
+   * reads as emphasised by its INK as well as its fill. The chosen palette
+   * used one value for both, which leaves the fill carrying the whole signal
+   * -- and the fill is the part a low-contrast surface weakens first. */
+  --nx-sidebar-foreground: oklch(0.44 0 0);
+  --nx-sidebar-primary: oklch(0 0 0);
+  --nx-sidebar-primary-foreground: oklch(1 0 0);
   /* slate-50 */
-  --nx-sidebar-accent: oklch(0.9684 0.0068 247.9);
+  --nx-sidebar-accent: oklch(0.94 0 0);
   /* slate-100 */
-  --nx-sidebar-accent-foreground: oklch(0.2079 0.0399 265.73);
-  /* slate-900 */
+  --nx-sidebar-accent-foreground: oklch(0 0 0);
   /* Darkened so the sidebar border clears WCAG 3:1 on its surface (was 1.23:1). */
-  --nx-sidebar-border: oklch(0.6446 0.0126 255.53);
-  /* slate-200 */
+  --nx-sidebar-border: oklch(0.63 0 0);
   --nx-sidebar-ring: var(--nx-primary);
 
   /* Data table specific colors */
-  --nx-table-row-hover: oklch(0.9848 0 0);
+  --nx-table-row-hover: oklch(0.97 0 0);
   --nx-table-row-selected: var(--nx-primary);
   --nx-table-border: var(--nx-border);
 }
@@ -866,61 +895,67 @@
 /* Dark theme overrides when using class-based theming */
 .dark {
   /* Base colors - using Slate dark scale */
-  --nx-background: oklch(0.1358 0.0163 262.71);
+  --nx-background: oklch(0 0 0);
   /* ultra deep dark background (darker than slate-950) */
-  --nx-page-background: oklch(0.1358 0.0163 262.71);
+  --nx-page-background: oklch(0.23 0 0);
   /* Matches background in dark mode */
-  --nx-foreground: oklch(0.9838 0.0035 247.86);
+  --nx-foreground: oklch(1 0 0);
   /* slate-50 */
 
   /* Component colors */
-  --nx-card: oklch(0.1916 0.0228 266.36);
+  --nx-card: oklch(0.14 0 0);
   /* raised one tonal step above --nx-background (222 47% 4%) so panels/cards
    * read as distinct surfaces in dark mode instead of merging into the page */
-  --nx-card-foreground: oklch(0.9838 0.0035 247.86);
+  --nx-card-foreground: oklch(1 0 0);
   /* slate-50 */
   /* Darkened toward the card elevation so borders, inputs, and muted text
    * placed on a popover clear their WCAG minimums (border was 2.85:1, input
    * 1.73:1); the surface was too light for its own contents. */
-  --nx-popover: oklch(0.24 0.0249 257.44);
-  /* slate-800 */
-  --nx-popover-foreground: oklch(0.9838 0.0035 247.86);
+  --nx-popover: oklch(0.18 0 0);
+  --nx-popover-foreground: oklch(1 0 0);
   /* slate-50 */
+  /* A step above the card beneath it, carrying no chroma of its own: a hue here
+     would tint the header band independently of every surface around it. */
+  --nx-table-header-bg: oklch(0.1573 0 0);
 
   /* Brand colors - Blue-Cyan Professional Palette (Dark Mode) */
   --nx-primary: oklch(1 0 0); /* High contrast White for dark mode */
-  --nx-primary-foreground: oklch(0.2079 0.0399 265.73);
-  /* slate-900 */
+  --nx-primary-foreground: oklch(0 0 0);
 
   /* Secondary colors - using slate-800 for dark backgrounds */
-  --nx-secondary: oklch(0.28 0.0369 259.97);
+  --nx-secondary: oklch(0.25 0 0);
   /* slate-800 */
-  --nx-secondary-foreground: oklch(0.9838 0.0035 247.86);
+  --nx-secondary-foreground: oklch(1 0 0);
   /* slate-50 */
 
   /* Utility colors */
-  --nx-muted: oklch(0.28 0.0369 259.97);
-  /* slate-800 */
-  --nx-muted-foreground: oklch(0.7107 0.0351 256.79);
-  /* slate-400 */
-  --nx-accent: oklch(
-    0.5547 0.0407 257.44
-  ); /* Slate-500 per user request #64748b */
+  --nx-muted: oklch(0.23 0 0);
+  --nx-muted-foreground: oklch(0.72 0 0);
+  /* The hover and selected surface: one step lighter than --nx-muted so a row
+     under the pointer separates from a merely quiet one. Neutral, not the blue
+     it was once labelled -- a tinted accent reads as a status on a surface that
+     carries none. */
+  --nx-accent: oklch(0.32 0 0);
   --nx-accent-foreground: oklch(1 0 0);
   /* white */
 
   /* State colors - WCAG 2.2 AA Compliant (Dark Mode).
    * The base token is lightened from the fill color so it reads as text on the
-   * dark page at 4.5:1; `-solid` keeps the darker fill so white on-color text
-   * on buttons still clears 4.5:1. Warning is already light enough to read on
-   * dark, so its base is unchanged here. */
+   * dark page at 4.5:1. The two statuses then resolve the on-color problem
+   * differently, because a fill light enough to read as text on a dark page is
+   * too light for white text: destructive keeps ONE value for base and fill
+   * and flips its ink to black (6.90:1), while success keeps a darker separate
+   * fill and keeps its ink white (4.80:1). Warning is already light enough to
+   * read on dark, so its base is unchanged here. */
   /* Lightened red so it reads as text at WCAG 4.5:1 on the dark page and on the
    * lighter popover surface (was 4.17:1 on the page, 4.25:1 on a popover). */
-  --nx-destructive: oklch(0.65 0.2078 25.33);
-  /* Darker red fill so white on-color button text clears 4.5:1. */
-  --nx-destructive-solid: oklch(0.5778 0.2078 25.33);
-  --nx-destructive-foreground: oklch(1 0 0);
-  /* white */
+  --nx-destructive: oklch(0.69 0.2 23.91);
+  /* Same value as the base: the button fill needs no darkening here because
+     its ink is black rather than white. */
+  --nx-destructive-solid: oklch(0.69 0.2 23.91);
+  /* Black, not white. The dark-mode fill is light enough that black on-color
+     text reads at 6.90:1 where white would fall below the minimum. */
+  --nx-destructive-foreground: oklch(0 0 0);
   /* Lightened green so it reads as text at WCAG 4.5:1 on the dark page and on
    * the lighter popover surface (was 4.17:1 on the page, 4.29:1 on a popover). */
   --nx-success: oklch(0.6 0.1921 149.58);
@@ -968,23 +1003,25 @@
   --nx-overlay: oklch(0 0 0 / 0.7);
   --nx-overlay-strong: oklch(0 0 0 / 0.85);
   --nx-overlay-soft: oklch(0 0 0 / 0.5);
-  --nx-border-subtle: oklch(1 0 0 / 0.08);
-  --nx-border: oklch(1 0 0 / 0.14);
+  --nx-border-subtle: color-mix(in srgb, oklch(0.26 0 0), transparent 60%);
+  --nx-border: oklch(0.26 0 0);
   /* Alpha raised so the composited strong border clears WCAG 3:1 / ~4:1 (was 3.00:1). */
-  --nx-border-strong: oklch(1 0 0 / 0.418);
+  --nx-border-strong: oklch(0.5444 0 0);
   /* Brightened so the field border clears WCAG 3:1 on the lighter popover
    * surface as well as the page and card (was 1.73:1 on a popover). */
-  --nx-input: oklch(0.54 0.0128 285.92);
+  --nx-input: oklch(0.5445 0 0);
   --nx-ring: var(--nx-primary);
 
   /* Black in dark mode too: the ramp reads as depth against the deep surfaces
-   * rather than as a glow, which a lightened shadow colour would produce. */
+   * rather than as a glow, which a lightened shadow colour would produce.
+   * One --shadow-* ramp serves both modes and inlines a single set of
+   * color-mix opacities, so this token is the only place elevation is
+   * retuned -- overriding it resolves the whole ramp to that hue. */
   --nx-shadow-color: oklch(0 0 0);
 
   /* Chart colors for data visualization (same as light mode) */
   --nx-chart-1: var(--nx-primary);
   --nx-chart-2: oklch(0.7399 0.1277 209.34);
-  /* cyan-500 */
   --nx-chart-3: oklch(0.7229 0.1921 149.58);
   /* green-500 */
   --nx-chart-4: oklch(0.7686 0.1646 70.11);
@@ -993,7 +1030,7 @@
   /* red-500 */
 
   /* Sidebar specific colors - dark mode */
-  --nx-sidebar-background: var(--nx-background);
+  --nx-sidebar-background: oklch(0.18 0 0);
   /* flat with the content surface; nav is separated by borders, not fill */
   /* Resting nav ink, dimmed off slate-50 so it sits a step below
    * --nx-sidebar-accent-foreground the way the light pair does: the lightness
@@ -1001,22 +1038,19 @@
    * slate-900, so an active row reads as emphasised by its ink and not only by
    * its fill. Chroma and hue track the theme's other secondary ink
    * (--nx-muted-foreground) so lightness alone carries the hierarchy. */
-  --nx-sidebar-foreground: oklch(0.82 0.0351 256.79);
-  --nx-sidebar-primary: oklch(0.9838 0.0035 247.86);
+  --nx-sidebar-foreground: oklch(0.72 0 0);
+  --nx-sidebar-primary: oklch(1 0 0);
   /* slate-50 */
-  --nx-sidebar-primary-foreground: oklch(0.2079 0.0399 265.73);
-  /* slate-900 */
-  --nx-sidebar-accent: oklch(0.28 0.0369 259.97);
-  /* slate-800 */
-  --nx-sidebar-accent-foreground: oklch(0.9838 0.0035 247.86);
+  --nx-sidebar-primary-foreground: oklch(0 0 0);
+  --nx-sidebar-accent: oklch(0.32 0 0);
+  --nx-sidebar-accent-foreground: oklch(1 0 0);
   /* slate-50 */
   /* Lightened so the sidebar border clears WCAG 3:1 on its surface (was 1.19:1). */
-  --nx-sidebar-border: oklch(0.4975 0.0129 257.43);
+  --nx-sidebar-border: oklch(0.519 0 0);
   --nx-sidebar-ring: var(--nx-primary);
 
   /* Data table specific colors - dark mode */
-  --nx-table-row-hover: oklch(0.28 0.0369 259.97);
-  /* slate-800 */
+  --nx-table-row-hover: oklch(0.23 0 0);
   --nx-table-row-selected: var(--nx-primary);
   --nx-table-border: var(--nx-border);
   /* inherit the retuned white-alpha border (was a fixed faint slate) */

package/docs/plugin-ui-authoring.md

@@ -88,8 +88,8 @@ Do not hardcode hex, `rgb()`, `rgba()`, or named colors. The only literals allow
 
 ### Corner radius: pick a tier, never a value
 
-The admin ships square today (`--radius: 0`), but the whole scale derives from that one
-knob, so an operator who sets `--radius: 12px` re-rounds every surface at once. Your plugin
+The admin ships rounded today (`--radius: 0.5rem`), and the whole scale derives from that
+one knob, so an operator who sets `--radius: 0` squares every surface at once. Your plugin
 keeps up with that only if it picks a **tier by element category** rather than writing a
 length. Hardcoding a corner — `rounded-none` just as much as `rounded-[6px]` or
 `border-radius: 4px` — pins your UI at that value and opts it out of the knob.
@@ -113,14 +113,16 @@ Four consequences worth internalising:
 - **`rounded-xl` and `rounded-2xl` are not tiers of this knob.** The preset exports only
   `lg`, `md` and `sm`, so a plugin built against it gets Tailwind's fixed `0.75rem` /
   `1rem` for those two, detached from `--radius`. Inside the admin's own build they are
-  defined, but as `--radius + 4px` and `--radius + 8px`, so at the shipped `--radius: 0`
-  they resolve to `4px` and `8px` — visibly round inside a square admin. Pick from
-  `sm` / `md` / `lg`.
-- **`--radius: 0` is not "every step is zero".** `--radius-lg` is `0`, but `--radius-sm`
-  and `--radius-md` compute to `-4px` and `-2px`. They _render_ square only because
-  `border-radius` clamps a negative length to `0`. The token keeps its negative value, so
-  reading a step for padding, for an inset, or through `getComputedStyle` gives you `-4px`,
-  not `0`. Clamp it yourself if you consume a step as a length rather than as a corner.
+  defined, but as `--radius + 4px` and `--radius + 8px`, so at the shipped `--radius: 0.5rem`
+  they resolve to `12px` and `16px` — rounder than the container tier, and drifting further
+  as the knob grows. Pick from `sm` / `md` / `lg`.
+- **A low knob drives the lower steps negative.** At the shipped `0.5rem` the three tiers
+  are `4px`, `6px` and `8px`, all positive. But `sm` and `md` SUBTRACT from the knob, so
+  anything under `4px` — `--radius: 0` most obviously — computes them to `-4px` and `-2px`.
+  They _render_ square only because `border-radius` clamps a negative length to `0` at
+  used-value time. The token keeps its negative value, so reading a step for padding, for an
+  inset, or through `getComputedStyle` gives you `-4px`, not `0`. Clamp it yourself if you
+  consume a step as a length rather than as a corner.
 - **A rounded container must handle full-bleed children.** If a child paints a background
   all the way to the container's edge (a tinted footer, a sticky header, a hover row), give
   the container `overflow-hidden` or give the child a matching corner with

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextlyhq/ui",
-  "version": "0.0.2-alpha.54",
+  "version": "0.0.2-alpha.57",
   "description": "Nextly UI — Reusable React component library for Nextly plugins and custom admin UIs",
   "license": "MIT",
   "keywords": [
@@ -46,6 +46,16 @@
         "default": "./dist/utils.cjs"
       }
     },
+    "./color": {
+      "import": {
+        "types": "./dist/color.d.ts",
+        "default": "./dist/color.mjs"
+      },
+      "require": {
+        "types": "./dist/color.d.cts",
+        "default": "./dist/color.cjs"
+      }
+    },
     "./theme.css": "./dist/theme.css",
     "./styles.css": "./dist/styles.css",
     "./styles.scoped.css": "./dist/styles.scoped.css"
@@ -55,10 +65,11 @@
   ],
   "files": [
     "dist",
-    "docs"
+    "docs",
+    "!dist/metafile-*.json"
   ],
   "engines": {
-    "node": ">=20.0.0"
+    "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
   },
   "peerDependencies": {
     "lucide-react": ">=0.400.0",
@@ -68,6 +79,7 @@
   "devDependencies": {
     "@tailwindcss/cli": "^4.3.2",
     "@types/culori": "^4.0.1",
+    "@types/node": "^20.19.17",
     "@types/react": "19.2.0",
     "@types/react-dom": "19.2.0",
     "@vitejs/plugin-react": "^5.1.0",
@@ -86,9 +98,10 @@
     "typescript": "^5.9.3",
     "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^4.1.0",
-    "@nextlyhq/admin-css": "0.0.2-alpha.54",
-    "@nextlyhq/eslint-config": "0.0.2-alpha.54",
-    "@nextlyhq/tsconfig": "0.0.2-alpha.54"
+    "@nextlyhq/admin-css": "0.0.2-alpha.57",
+    "@nextlyhq/eslint-config": "0.0.2-alpha.57",
+    "@nextlyhq/module-specifiers": "0.0.2-alpha.57",
+    "@nextlyhq/tsconfig": "0.0.2-alpha.57"
   },
   "dependencies": {
     "@radix-ui/react-accordion": "^1.2.12",
@@ -104,6 +117,7 @@
     "@radix-ui/react-radio-group": "^1.3.8",
     "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slider": "^1.4.7",
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-switch": "^1.2.6",
     "@radix-ui/react-tabs": "^1.1.13",
@@ -133,10 +147,10 @@
   "author": "Nextly <contact@nextlyhq.com> (https://nextlyhq.com)",
   "scripts": {
     "build": "pnpm build:js && node scripts/build-css.mjs",
-    "build:js": "rimraf dist && tsup && tsup --config tsup.server-safe.config.ts && node scripts/check-client-directive.mjs",
+    "build:js": "rimraf dist && tsup && tsup --config tsup.server-safe.config.ts && node scripts/check-client-directive.mjs && node scripts/check-server-safe-artifacts.mjs",
     "build:css": "node scripts/build-css.mjs",
     "dev": "tsup --watch & tsup --config tsup.server-safe.config.ts --watch & wait",
-    "check-types": "tsc --noEmit",
+    "check-types": "tsc --noEmit && tsc --noEmit -p tsconfig.tests.json",
     "lint": "eslint . --max-warnings 0",
     "lint:fix": "eslint . --fix",
     "test": "vitest run --passWithNoTests",