@rebasepro/ui 0.19.1 → 0.19.2-canary.g09316f6

package/dist/src/index.css

@@ -121,7 +121,10 @@ html.dark {
 }
 
 .typography-button {
-    @apply text-sm font-semibold tracking-wide;
+    /* 500, sentence case, no tracking. Semibold + tracking-wide was the Rubik-era
+       button voice and it made every control shout equally; the reference sets
+       controls at 500 and lets the primary FILL carry emphasis, not the label. */
+    @apply text-sm font-medium;
 }
 
 /* ---------------------------------------------------------------------------

package/dist/src/theme.css

@@ -90,6 +90,18 @@
     --control-xl: 56px;   /* buttons only */
     --control-2xl: 64px;  /* buttons only */
 
+    /* Radius ladder. Tailwind's defaults (6 / 8 / 12) read as square beside
+       the reference, whose controls sit at ~10px and cards at 12–14; matching
+       it outright (8 / 10 / 14) read as borrowed. This sits between: the two
+       utilities the product uses for controls and containers move up one or
+       two pixels, chips keep the default. Overriding the utilities rather than
+       the call sites moves every control, card, menu and sheet together; no
+       call site names a number. `rounded-full` is a rule, not a size, and it
+       is rare: search fields, the switch and avatars. */
+    --radius-md: 6px;    /* chip, code well, tile, segment (Tailwind's own value) */
+    --radius-lg: 9px;    /* control, row highlight, menu, folder tab, segmented track */
+    --radius-xl: 13px;   /* card, sheet, dialog */
+
     /* Colors */
     --color-primary: #0070F4;
     --color-primary-light: oklch(from var(--color-primary) calc(l + 0.15) c h);
@@ -166,3 +178,106 @@
     --color-surface-accent-900: #172033;
     --color-surface-accent-950: #0f172a;
 }
+
+/* The semantic surfaces as Tailwind colors. `inline` is load-bearing: it makes
+   `bg-surface-card` emit `var(--surface-card)` at the element, so the value
+   resolves under whichever dark selector the consumer uses. In a plain
+   `@theme` the alias would be computed once on `:root` and stay light. The
+   variables themselves are defined at the bottom of this file. */
+@theme inline {
+    --color-surface-frame: var(--surface-frame);
+    --color-surface-sheet: var(--surface-sheet);
+    --color-surface-card: var(--surface-card);
+    --color-surface-card-hover: var(--surface-card-hover);
+    --color-surface-raised: var(--surface-raised);
+    --color-surface-raised-hover: var(--surface-raised-hover);
+    --color-surface-lifted: var(--surface-lifted);
+    --color-surface-field: var(--surface-field);
+    --color-surface-field-hover: var(--surface-field-hover);
+    --color-surface-hover: var(--surface-hover);
+    --color-surface-active: var(--surface-active);
+    --color-surface-scrim: var(--surface-scrim);
+    --color-surface-well: var(--surface-well);
+    --color-hairline: var(--hairline);
+    --color-hairline-strong: var(--hairline-strong);
+}
+
+/* ---------------------------------------------------------------------------
+ * Semantic surfaces — one role, two themes. Added 2026-09-08.
+ *
+ * Measured on demo.rebase.pro in dark mode, the panel used exactly two opaque
+ * surface values: the ground (#0a0a0a) and the content sheet (#111111). Every
+ * card painted `dark:bg-surface-900` — the GROUND value — on top of the sheet,
+ * so cards were holes cut into the surface they sat on, and the largest areas
+ * on screen carried the darkest value. Retuning the numbers cannot fix that:
+ * the sheet used `800` and cards used `900`, and `900` must stay darker.
+ *
+ * So a surface is now named by ROLE and the theme decides the value. Two rules:
+ *
+ *   1. Every nested surface is one step lifted from the surface it sits on.
+ *      Lifted means lighter on both themes; the light frame is the greyest
+ *      thing on the page. Fields are the one exception — a field is inset, so
+ *      it is an alpha fill that goes the other way.
+ *   2. A hairline marks an object, not a region. Cards on the sheet, floating
+ *      surfaces and fields get a line. The sheet edge, tiles inside a card,
+ *      rows, tracks, buttons and chips do not; the lightness step separates
+ *      them.
+ *
+ * These are plain custom properties, deliberately outside `@theme`, so they
+ * can switch on the theme selector. The `@theme inline` entries above alias
+ * them into Tailwind, and `inline` matters: it makes `bg-surface-card` emit
+ * `var(--surface-card)` at the element, which resolves under whichever dark
+ * selector the consumer uses (`.dark` in the panel, `[data-theme=dark]` on the
+ * marketing site). Without `inline` the value would be fixed on `:root`.
+ *
+ * Interaction fills are alpha so they compose over whatever they land on. The
+ * solid surfaces carry their own hover value because an alpha hover on a solid
+ * background REPLACES it — white at 6% over the sheet is darker than the card
+ * it was meant to lift.
+ *
+ * The full reasoning, with the measurements, is in
+ * docs/plans/surface-system-2026-09.md and docs/design/instatic-distilled.html.
+ * ------------------------------------------------------------------------- */
+/* No `.light` class here on purpose: nothing in the app sets one, and third-party
+   widgets (React Flow) stamp `light` on their own root, which re-lit every token
+   under them on a dark page. The light ladder is the root; `[data-theme]` and
+   `.dark` are the only switches. */
+:root,
+[data-theme="light"] {
+    --surface-frame: #f0f0f2;
+    --surface-sheet: #f9f9fa;
+    --surface-card: #ffffff;
+    --surface-card-hover: #f7f7f8;
+    --surface-raised: #ececee;
+    --surface-raised-hover: #e3e3e6;
+    --surface-lifted: #ffffff;
+    --surface-field: rgb(0 0 0 / 0.035);
+    --surface-field-hover: rgb(0 0 0 / 0.055);
+    --surface-hover: rgb(0 0 0 / 0.04);
+    --surface-active: rgb(0 0 0 / 0.07);
+    --surface-scrim: rgb(0 0 0 / 0.4);
+    /* The one surface that goes DOWN the ladder on purpose: a code well, a
+       query, a log tail, a connection string, recessed into its card. */
+    --surface-well: #f5f5f5;
+    --hairline: rgb(0 0 0 / 0.08);
+    --hairline-strong: rgb(0 0 0 / 0.13);
+}
+
+.dark,
+[data-theme="dark"] {
+    --surface-frame: #0a0a0a;
+    --surface-sheet: #131313;
+    --surface-card: #181818;
+    --surface-card-hover: #1d1d1d;
+    --surface-raised: #242424;
+    --surface-raised-hover: #2c2c2c;
+    --surface-lifted: #2c2c2c;
+    --surface-field: rgb(255 255 255 / 0.04);
+    --surface-field-hover: rgb(255 255 255 / 0.07);
+    --surface-hover: rgb(255 255 255 / 0.06);
+    --surface-active: rgb(255 255 255 / 0.09);
+    --surface-scrim: rgb(0 0 0 / 0.6);
+    --surface-well: #0a0a0a;
+    --hairline: rgb(255 255 255 / 0.08);
+    --hairline-strong: rgb(255 255 255 / 0.14);
+}

package/dist/styles.d.ts

@@ -27,7 +27,7 @@ export declare const controlPaddingMixin: {
     readonly "2xl": "px-10";
 };
 export declare const focusedDisabled = "focus-visible:ring-0 focus-visible:ring-offset-0";
-export declare const focusedInvisibleMixin = "focus:bg-opacity-70 focus:bg-surface-accent-100 focus:dark:bg-white/[0.07] focus:bg-surface-accent-100/70";
+export declare const focusedInvisibleMixin = "focus:bg-surface-field-hover";
 /**
  * The focus ring — the single most-seen interaction state in the product, and
  * until now the least tended.
@@ -49,35 +49,57 @@ export declare const focusedClasses = "z-30 outline-none ring-2 ring-primary/60
 /**
  * Field surfaces.
  *
- * The inset top hairline is the whole difference between a field that reads as
- * a filled rectangle and one that reads as recessed into the surface. It is a
- * 1px inset highlight, not a gradient — the same device `.frame` already uses
- * on the marketing site, and the flat-surface rule stands.
+ * A field is the one surface that goes the other way: it is INSET into
+ * whatever holds it, so `surface-field` is an alpha fill rather than a solid,
+ * and it composes over a card, the sheet or a dialog alike. It also carries
+ * the hairline: a field is an object (DESIGN.md rule 2), and without the line
+ * a 4% fill on a card reads as a soft slab rather than a control — measured on
+ * the product form, eight of them in a row looked like a wall. The reference
+ * draws every input with its 1px edge, on both themes.
  *
- * Light mode gets none: on a white page the highlight has nothing to catch.
+ * The 1px inset top highlight that used to sit here was the recessed-edge
+ * device from before the field had a border; with a real hairline above it
+ * the two stacked into a doubled top edge. The border does its work now.
+ *
+ * Exactly one element carries this mixin per field — the box, never the
+ * input inside it — so the alpha fill and its hover composite once.
  */
-export declare const fieldBackgroundMixin = "bg-surface-accent-200/50 dark:bg-white/[0.055] dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.045)]";
-export declare const fieldBackgroundInvisibleMixin = "bg-surface-accent-200/0 dark:bg-white/0";
-export declare const fieldBackgroundDisabledMixin = "bg-surface-accent-200/50 dark:bg-white/[0.03]";
+export declare const fieldBackgroundMixin = "bg-surface-field border border-hairline";
+export declare const fieldBackgroundInvisibleMixin = "bg-transparent";
+export declare const fieldBackgroundDisabledMixin = "bg-surface-field/60";
 /**
  * `transition-colors` here, because every other interactive surface in the kit
  * has it and fields did not — `cardClickableMixin` eases, a TextField snapped.
  * On a form of eight fields that difference is the whole feel of the screen.
  */
-export declare const fieldBackgroundHoverMixin = "transition-colors duration-150 hover:bg-surface-accent-200/70 hover:dark:bg-white/[0.09]";
-export declare const defaultBorderMixin = "border-surface-200 dark:border-surface-700/60";
-export declare const paperMixin = "bg-white rounded-lg dark:bg-surface-900 border border-surface-200 dark:border-surface-700";
-export declare const cardMixin = "bg-white dark:bg-surface-900 rounded-xl border border-surface-200 dark:border-surface-700/60";
+export declare const fieldBackgroundHoverMixin = "transition-colors duration-150 hover:bg-surface-field-hover";
+/**
+ * The hairline. One value per theme (`--hairline` in theme.css), and where it
+ * goes matters more than what it is: a line marks an OBJECT — a card on the
+ * sheet, a field, a floating surface. It does not mark a region: a tile inside
+ * a card, a row, a segmented track, a button, a chip are fills, and the
+ * lightness step between them is the whole separation. One exception, and it
+ * is the sheet's own edge against the frame: that step is about 3 L* on both
+ * themes and did not read on a real screen, so the Scaffold draws this line
+ * there. Measured before this existed, the panel drew the same line on every
+ * card and every tile as well, and with only two surface values available the
+ * line was doing the work a step should have done.
+ */
+export declare const defaultBorderMixin = "border-hairline";
+export declare const paperMixin = "bg-surface-card rounded-lg border border-hairline-strong";
+export declare const cardMixin = "bg-surface-card rounded-xl border border-hairline";
 /**
  * An inset well: code, a query, a log tail, a connection string.
  *
  * It must read as *recessed into* the surface holding it, which means darker
- * than that surface in dark mode — `surface-950` under a `surface-900` card.
- * The obvious-looking `surface-800` is a trap: `#111111` is LIGHTER than the
- * `#0a0a0a` card around it, so the well appears to float above the thing it is
- * set into. Pair with `font-mono`; this mixin carries the surface only.
+ * than that surface in dark mode. Cards now sit at `surface-card` (#181818),
+ * so #0a0a0a is already fourteen units below and reads as a well; #000 was
+ * tuned for the old #0a card and is now harsher than it needs to be. That value
+ * is the `surface-well` role (theme.css), the one surface that goes DOWN the
+ * ladder on purpose. Pair with `font-mono`; this mixin carries the surface
+ * only.
  */
-export declare const codeSurfaceMixin = "bg-surface-100 dark:bg-surface-950 rounded-md";
+export declare const codeSurfaceMixin = "bg-surface-well rounded-md";
 /**
  * The accent, used as TEXT.
  *
@@ -96,5 +118,20 @@ export declare const codeSurfaceMixin = "bg-surface-100 dark:bg-surface-950 roun
  * the other way and #0070F4 is already correct.
  */
 export declare const accentTextMixin = "text-primary dark:text-primary-light";
-export declare const cardClickableMixin = "hover:bg-primary/5 dark:hover:bg-primary/5 cursor-pointer transition-colors duration-150";
+/**
+ * Hover on a SOLID surface goes one step lighter, and it stays neutral. The
+ * previous `hover:bg-primary/5` tinted every clickable card blue, which spent
+ * the brand colour on a state that carries no meaning; on the dark ladder it
+ * also read as a hue shift rather than a lift.
+ */
+export declare const cardClickableMixin = "hover:bg-surface-card-hover cursor-pointer transition-colors duration-150";
 export declare const cardSelectedMixin = "bg-primary-bg/30 dark:bg-primary-bg/10 ring-1 ring-primary/75";
+/**
+ * Hover on a TRANSPARENT ground — a nav item, a menu item, a list row, a tree
+ * row. `surface-hover` is an alpha fill, so it lifts whatever it lands on by
+ * the same amount, and `surface-active` is the same idea one step further for
+ * the selected row when no hue is wanted. Do not use these on a solid card:
+ * an alpha fill REPLACES a solid background rather than tinting it.
+ */
+export declare const surfaceHoverMixin = "hover:bg-surface-hover transition-colors duration-150";
+export declare const surfaceActiveMixin = "bg-surface-active";

package/dist/theme.css

@@ -90,6 +90,18 @@
     --control-xl: 56px;   /* buttons only */
     --control-2xl: 64px;  /* buttons only */
 
+    /* Radius ladder. Tailwind's defaults (6 / 8 / 12) read as square beside
+       the reference, whose controls sit at ~10px and cards at 12–14; matching
+       it outright (8 / 10 / 14) read as borrowed. This sits between: the two
+       utilities the product uses for controls and containers move up one or
+       two pixels, chips keep the default. Overriding the utilities rather than
+       the call sites moves every control, card, menu and sheet together; no
+       call site names a number. `rounded-full` is a rule, not a size, and it
+       is rare: search fields, the switch and avatars. */
+    --radius-md: 6px;    /* chip, code well, tile, segment (Tailwind's own value) */
+    --radius-lg: 9px;    /* control, row highlight, menu, folder tab, segmented track */
+    --radius-xl: 13px;   /* card, sheet, dialog */
+
     /* Colors */
     --color-primary: #0070F4;
     --color-primary-light: oklch(from var(--color-primary) calc(l + 0.15) c h);
@@ -166,3 +178,106 @@
     --color-surface-accent-900: #172033;
     --color-surface-accent-950: #0f172a;
 }
+
+/* The semantic surfaces as Tailwind colors. `inline` is load-bearing: it makes
+   `bg-surface-card` emit `var(--surface-card)` at the element, so the value
+   resolves under whichever dark selector the consumer uses. In a plain
+   `@theme` the alias would be computed once on `:root` and stay light. The
+   variables themselves are defined at the bottom of this file. */
+@theme inline {
+    --color-surface-frame: var(--surface-frame);
+    --color-surface-sheet: var(--surface-sheet);
+    --color-surface-card: var(--surface-card);
+    --color-surface-card-hover: var(--surface-card-hover);
+    --color-surface-raised: var(--surface-raised);
+    --color-surface-raised-hover: var(--surface-raised-hover);
+    --color-surface-lifted: var(--surface-lifted);
+    --color-surface-field: var(--surface-field);
+    --color-surface-field-hover: var(--surface-field-hover);
+    --color-surface-hover: var(--surface-hover);
+    --color-surface-active: var(--surface-active);
+    --color-surface-scrim: var(--surface-scrim);
+    --color-surface-well: var(--surface-well);
+    --color-hairline: var(--hairline);
+    --color-hairline-strong: var(--hairline-strong);
+}
+
+/* ---------------------------------------------------------------------------
+ * Semantic surfaces — one role, two themes. Added 2026-09-08.
+ *
+ * Measured on demo.rebase.pro in dark mode, the panel used exactly two opaque
+ * surface values: the ground (#0a0a0a) and the content sheet (#111111). Every
+ * card painted `dark:bg-surface-900` — the GROUND value — on top of the sheet,
+ * so cards were holes cut into the surface they sat on, and the largest areas
+ * on screen carried the darkest value. Retuning the numbers cannot fix that:
+ * the sheet used `800` and cards used `900`, and `900` must stay darker.
+ *
+ * So a surface is now named by ROLE and the theme decides the value. Two rules:
+ *
+ *   1. Every nested surface is one step lifted from the surface it sits on.
+ *      Lifted means lighter on both themes; the light frame is the greyest
+ *      thing on the page. Fields are the one exception — a field is inset, so
+ *      it is an alpha fill that goes the other way.
+ *   2. A hairline marks an object, not a region. Cards on the sheet, floating
+ *      surfaces and fields get a line. The sheet edge, tiles inside a card,
+ *      rows, tracks, buttons and chips do not; the lightness step separates
+ *      them.
+ *
+ * These are plain custom properties, deliberately outside `@theme`, so they
+ * can switch on the theme selector. The `@theme inline` entries above alias
+ * them into Tailwind, and `inline` matters: it makes `bg-surface-card` emit
+ * `var(--surface-card)` at the element, which resolves under whichever dark
+ * selector the consumer uses (`.dark` in the panel, `[data-theme=dark]` on the
+ * marketing site). Without `inline` the value would be fixed on `:root`.
+ *
+ * Interaction fills are alpha so they compose over whatever they land on. The
+ * solid surfaces carry their own hover value because an alpha hover on a solid
+ * background REPLACES it — white at 6% over the sheet is darker than the card
+ * it was meant to lift.
+ *
+ * The full reasoning, with the measurements, is in
+ * docs/plans/surface-system-2026-09.md and docs/design/instatic-distilled.html.
+ * ------------------------------------------------------------------------- */
+/* No `.light` class here on purpose: nothing in the app sets one, and third-party
+   widgets (React Flow) stamp `light` on their own root, which re-lit every token
+   under them on a dark page. The light ladder is the root; `[data-theme]` and
+   `.dark` are the only switches. */
+:root,
+[data-theme="light"] {
+    --surface-frame: #f0f0f2;
+    --surface-sheet: #f9f9fa;
+    --surface-card: #ffffff;
+    --surface-card-hover: #f7f7f8;
+    --surface-raised: #ececee;
+    --surface-raised-hover: #e3e3e6;
+    --surface-lifted: #ffffff;
+    --surface-field: rgb(0 0 0 / 0.035);
+    --surface-field-hover: rgb(0 0 0 / 0.055);
+    --surface-hover: rgb(0 0 0 / 0.04);
+    --surface-active: rgb(0 0 0 / 0.07);
+    --surface-scrim: rgb(0 0 0 / 0.4);
+    /* The one surface that goes DOWN the ladder on purpose: a code well, a
+       query, a log tail, a connection string, recessed into its card. */
+    --surface-well: #f5f5f5;
+    --hairline: rgb(0 0 0 / 0.08);
+    --hairline-strong: rgb(0 0 0 / 0.13);
+}
+
+.dark,
+[data-theme="dark"] {
+    --surface-frame: #0a0a0a;
+    --surface-sheet: #131313;
+    --surface-card: #181818;
+    --surface-card-hover: #1d1d1d;
+    --surface-raised: #242424;
+    --surface-raised-hover: #2c2c2c;
+    --surface-lifted: #2c2c2c;
+    --surface-field: rgb(255 255 255 / 0.04);
+    --surface-field-hover: rgb(255 255 255 / 0.07);
+    --surface-hover: rgb(255 255 255 / 0.06);
+    --surface-active: rgb(255 255 255 / 0.09);
+    --surface-scrim: rgb(0 0 0 / 0.6);
+    --surface-well: #0a0a0a;
+    --hairline: rgb(255 255 255 / 0.08);
+    --hairline-strong: rgb(255 255 255 / 0.14);
+}

package/dist/util/chip_colors.d.ts

@@ -18,7 +18,29 @@ export type ChipColorScheme = {
     outlineText?: string;
     /** Outlined-variant ink in dark mode. */
     darkOutlineText?: string;
+    /**
+     * The `tinted` variant: the hue's solid stop at low alpha, as an `rgba()`
+     * string so it composes over a card, the sheet or a dialog alike, and an
+     * ink MEASURED on what that tint reads as over the page. A tint is the
+     * reference's rule for hue in the chrome — a 12–16% wash behind hue-coloured
+     * text — and it is what a status or enum chip paints by default now; the
+     * saturated `color` stop is the `filled` variant, kept for swatches.
+     */
+    tintColor?: string;
+    tintText?: string;
+    darkTintColor?: string;
+    darkTintText?: string;
 };
+/**
+ * What a translucent colour reads as over an opaque one: a per-channel sRGB
+ * mix, which is how the browser composites it. The tint ink is pushed against
+ * this, never against the page alone — a 16% wash of the hue moves the
+ * background a long way toward the ink, and an ink that only cleared AA on
+ * the bare page lands near 3.5:1 on its own tint.
+ */
+export declare function compositeOver(fgHex: string, alpha: number, bgHex: string): string;
+/** Read an `rgba(r, g, b, a)` string back as what it composites to over `bgHex`. */
+export declare function tintOnPage(rgba: string, bgHex: string): string;
 export declare function contrastRatio(a: string, b: string): number;
 export declare const CHIP_HUES: readonly ["blue", "cyan", "teal", "green", "yellow", "orange", "red", "pink", "purple", "gray", "indigo", "violet", "fuchsia", "rose", "emerald"];
 export type ChipHue = typeof CHIP_HUES[number];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rebasepro/ui",
-  "version": "0.19.1",
+  "version": "0.19.2-canary.g09316f6",
   "description": "Rebase design system — React components and design tokens built on Radix UI, Tailwind CSS and lucide-react",
   "keywords": [
     "rebase",