@rebasepro/ui 0.15.0 → 0.16.0

package/dist/src/index.css

@@ -37,28 +37,28 @@ html.dark {
    and holding 600 all the way down to text-sm made every heading shout equally
    — a heading stops being a headline somewhere, and the scale should say where.
 
-   The ladder now spans three weights rather than two. 600 everywhere at the top
-   meant a page title and the section heading inside it were the same voice at
-   two sizes, so a screen had no clear first thing to read. 700 is the *display*
-   tier only — h1 and h2, page titles and stat numbers — and nothing in the UI
-   chrome (nav, labels, buttons, table headers) goes above 600.
-
-   This costs nothing on the wire: both faces are loaded as VARIABLE fonts
-   (@fontsource-variable/inter, @fontsource-variable/instrument-sans), so the
-   whole weight axis is already in the file that ships. The earlier "never above
-   600" rule was written when static weights meant every step was another
-   download; that constraint no longer exists.
+   The ladder spans three weights — 400/500/600 — and 600 is the ceiling. No
+   tier goes to 700: the display end separates itself by SIZE and tracking, not
+   by weight, and a 30px 700 next to a 30px 500 elsewhere on the same product
+   reads as two different type systems rather than one ladder.
+
+   Both faces load as VARIABLE fonts (@fontsource-variable/inter,
+   @fontsource-variable/instrument-sans), so the whole axis ships either way —
+   the 600 ceiling is a design decision, not a payload one.
 
    With a single face carrying both headings and body, weight and tracking are
    the only things separating a heading from the copy around it — so the tiers
    have to actually differ, rather than all sitting at 600. */
 
+/* 500, not 700. This reverses the 2026-08 "700 for display" decision on
+   purpose: the marketing site and the panel were running different display
+   weights, which is the single most visible incoherence between them. */
 .typography-h1 {
-    @apply text-4xl font-headers font-bold tracking-display;
+    @apply text-4xl font-headers font-medium tracking-display;
 }
 
 .typography-h2 {
-    @apply text-3xl font-headers font-bold tracking-display;
+    @apply text-3xl font-headers font-medium tracking-display;
 }
 
 .typography-h3 {
@@ -144,10 +144,11 @@ html.dark {
     @apply font-mono tabular-nums;
 }
 
-/* The headline number on a stat tile. Display weight, display tracking, and
-   tabular figures so a row of tiles shares a baseline grid. */
+/* The headline number on a stat tile. Display tracking and tabular figures so a
+   row of tiles shares a baseline grid. Semibold, not bold: the number is
+   already the largest thing on the tile, and 600 is the system ceiling. */
 .typography-stat {
-    @apply text-3xl font-headers font-bold tracking-display tabular-nums;
+    @apply text-3xl font-headers font-semibold tracking-display tabular-nums;
 }
 
 :focus-visible {

package/dist/src/theme.css

@@ -26,7 +26,7 @@
        console and the marketing site all spell the same intent the same way
        instead of each hardcoding its own em value. Pair display/title with
        font-semibold and heading with font-medium. */
-    --tracking-display: -0.025em; /* >= 30px — the headline tier */
+    --tracking-display: -0.022em; /* >= 30px — the headline tier; matches the marketing site */
     --tracking-title: -0.018em;   /* 20-24px — section titles */
     --tracking-heading: -0.01em;  /* <= 18px — labels; still a heading, not a headline */
 

package/dist/theme.css

@@ -26,7 +26,7 @@
        console and the marketing site all spell the same intent the same way
        instead of each hardcoding its own em value. Pair display/title with
        font-semibold and heading with font-medium. */
-    --tracking-display: -0.025em; /* >= 30px — the headline tier */
+    --tracking-display: -0.022em; /* >= 30px — the headline tier; matches the marketing site */
     --tracking-title: -0.018em;   /* 20-24px — section titles */
     --tracking-heading: -0.01em;  /* <= 18px — labels; still a heading, not a headline */
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rebasepro/ui",
   "type": "module",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "description": "Rebase design system — React components and design tokens built on Radix UI, Tailwind CSS and lucide-react",
   "funding": {
     "url": "https://github.com/sponsors/rebaseco"

package/src/components/Select.tsx

@@ -304,7 +304,7 @@ export const SelectGroup = React.memo(function SelectGroup({
     return <>
         <SelectPrimitive.Group
             className={cls(
-                "text-xs text-surface-accent-900 dark:text-white uppercase tracking-wider font-bold mt-6 first:mt-2",
+                "text-xs text-surface-accent-900 dark:text-white uppercase tracking-wider font-semibold mt-6 first:mt-2",
                 "px-2 py-2",
                 className
             )}>

package/src/components/Sheet.tsx

@@ -99,8 +99,16 @@ export const Sheet: React.FC<SheetProps> = ({
                         "outline-none",
                         borderClass[side],
                         defaultBorderMixin,
-                        "transform-gpu",
-                        "will-change-transform",
+                        // No `will-change: transform` / `transform-gpu` here, however
+                        // tempting the layer hint is on a panel this size. Either one
+                        // makes this element a *containing block* for its
+                        // `position: fixed` descendants, and everything portaled into
+                        // the panel below — a Select dropdown, above all — is fixed and
+                        // positioned in viewport coordinates. Inside a containing block
+                        // those coordinates are resolved against the panel instead, so
+                        // every popup was displaced by the panel's own offset and a
+                        // right-hand Select opened its list off the edge of the screen:
+                        // the dropdown was open, just nowhere anyone could see it.
                         "text-surface-accent-900 dark:text-white",
                         "fixed transform z-50 transition-[transform,opacity] ease-in-out",
                         !displayed ? "duration-150" : "duration-100",

package/src/components/VirtualTable/VirtualTableHeader.tsx

@@ -194,7 +194,7 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<Record<stri
                                     and nothing about which one decides. */}
                                 {sort && sortPosition !== undefined && (
                                     <span
-                                        className="flex-shrink-0 -ml-0.5 mr-0.5 text-[10px] font-bold leading-none tabular-nums text-text-secondary dark:text-text-secondary-dark"
+                                        className="flex-shrink-0 -ml-0.5 mr-0.5 text-[10px] font-semibold leading-none tabular-nums text-text-secondary dark:text-text-secondary-dark"
                                         aria-hidden={true}
                                     >
                                         {sortPosition + 1}

package/src/index.css

@@ -37,28 +37,28 @@ html.dark {
    and holding 600 all the way down to text-sm made every heading shout equally
    — a heading stops being a headline somewhere, and the scale should say where.
 
-   The ladder now spans three weights rather than two. 600 everywhere at the top
-   meant a page title and the section heading inside it were the same voice at
-   two sizes, so a screen had no clear first thing to read. 700 is the *display*
-   tier only — h1 and h2, page titles and stat numbers — and nothing in the UI
-   chrome (nav, labels, buttons, table headers) goes above 600.
-
-   This costs nothing on the wire: both faces are loaded as VARIABLE fonts
-   (@fontsource-variable/inter, @fontsource-variable/instrument-sans), so the
-   whole weight axis is already in the file that ships. The earlier "never above
-   600" rule was written when static weights meant every step was another
-   download; that constraint no longer exists.
+   The ladder spans three weights — 400/500/600 — and 600 is the ceiling. No
+   tier goes to 700: the display end separates itself by SIZE and tracking, not
+   by weight, and a 30px 700 next to a 30px 500 elsewhere on the same product
+   reads as two different type systems rather than one ladder.
+
+   Both faces load as VARIABLE fonts (@fontsource-variable/inter,
+   @fontsource-variable/instrument-sans), so the whole axis ships either way —
+   the 600 ceiling is a design decision, not a payload one.
 
    With a single face carrying both headings and body, weight and tracking are
    the only things separating a heading from the copy around it — so the tiers
    have to actually differ, rather than all sitting at 600. */
 
+/* 500, not 700. This reverses the 2026-08 "700 for display" decision on
+   purpose: the marketing site and the panel were running different display
+   weights, which is the single most visible incoherence between them. */
 .typography-h1 {
-    @apply text-4xl font-headers font-bold tracking-display;
+    @apply text-4xl font-headers font-medium tracking-display;
 }
 
 .typography-h2 {
-    @apply text-3xl font-headers font-bold tracking-display;
+    @apply text-3xl font-headers font-medium tracking-display;
 }
 
 .typography-h3 {
@@ -144,10 +144,11 @@ html.dark {
     @apply font-mono tabular-nums;
 }
 
-/* The headline number on a stat tile. Display weight, display tracking, and
-   tabular figures so a row of tiles shares a baseline grid. */
+/* The headline number on a stat tile. Display tracking and tabular figures so a
+   row of tiles shares a baseline grid. Semibold, not bold: the number is
+   already the largest thing on the tile, and 600 is the system ceiling. */
 .typography-stat {
-    @apply text-3xl font-headers font-bold tracking-display tabular-nums;
+    @apply text-3xl font-headers font-semibold tracking-display tabular-nums;
 }
 
 :focus-visible {

package/src/theme.css

@@ -26,7 +26,7 @@
        console and the marketing site all spell the same intent the same way
        instead of each hardcoding its own em value. Pair display/title with
        font-semibold and heading with font-medium. */
-    --tracking-display: -0.025em; /* >= 30px — the headline tier */
+    --tracking-display: -0.022em; /* >= 30px — the headline tier; matches the marketing site */
     --tracking-title: -0.018em;   /* 20-24px — section titles */
     --tracking-heading: -0.01em;  /* <= 18px — labels; still a heading, not a headline */