@rebasepro/ui 0.16.0 → 0.16.1-canary.g0d7af95

package/dist/src/index.css

@@ -48,17 +48,29 @@ html.dark {
 
    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. */
+   have to actually differ, rather than all sitting at 600.
+
+   REVISED 2026-08-24. The ladder above described weight falling with size, but
+   the code ran 500/500/600/600/500/500 — a hump, where the LARGEST headings
+   were the LIGHTEST and h3 outweighed h1. Two rules were in play and neither
+   won cleanly. It is now monotonic: 600 for headings of consequence (h1-h4),
+   500 for small labels (h5/h6), 400 body. The display end still separates
+   itself by SIZE and tracking, which is what the paragraph above asks of it;
+   what it no longer does is separate itself by being *lighter* than the
+   smaller headings beneath it. 600 remains the ceiling. */
+
+/* 600. This reverses the earlier "500, not 700" setting — not back toward 700,
+   which stays banned, but up to the ceiling the ladder already used for h3/h4.
+   The 500 was only ever visible in production: the dev-only TypeDevPanel has
+   shipped a `wd: 600` default that overrode this with !important, so every
+   local preview of this site has been 600 while rebase.pro rendered 500. The
+   panel's constant is now telling the truth. */
 .typography-h1 {
-    @apply text-4xl font-headers font-medium tracking-display;
+    @apply text-4xl font-headers font-semibold tracking-display;
 }
 
 .typography-h2 {
-    @apply text-3xl font-headers font-medium tracking-display;
+    @apply text-3xl font-headers font-semibold tracking-display;
 }
 
 .typography-h3 {

package/dist/src/theme.css

@@ -26,7 +26,13 @@
        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.022em; /* >= 30px — the headline tier; matches the marketing site */
+    /* -0.025em, revised 2026-08-24 from -0.022em. The website's dev-only
+       TypeDevPanel has shipped `td: -25` as its "SHIPPED" default all along, so
+       every local preview and every design decision taken in front of one was
+       made at -0.025em while the built site served -0.022em. Of the panel's
+       eleven defaults these two — tracking and display weight — were the only
+       ones that did not match the tokens. Both are now true. */
+    --tracking-display: -0.025em; /* >= 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 */
 
@@ -43,6 +49,31 @@
     --text-3xs: 10px;
     --text-3xs--line-height: 1.4;
 
+    /* Display tier — above `text-4xl`, where the scale stops being a heading
+       and starts being a statement. Added 2026-08-24.
+
+       Fluid rather than fixed because the same token has to survive four
+       locales: German and French run 15-25% longer than English, and a fixed
+       112px headline that fits "The Postgres you already have" does not fit
+       "Das Postgres, das Sie bereits haben". The `vw` middle term shrinks
+       before it can overflow; the `rem` floor protects small screens, where
+       the type is already proportionally large.
+
+       Both carry their own line-height and tracking: at this size 1.1 reads as
+       a gap and -0.025em reads as loose. Weight stays on the 600 ceiling —
+       this tier separates itself by SIZE, which is the whole point of adding
+       it rather than reaching for 700. */
+    --text-display-2: clamp(2.25rem, 4.4vw, 4rem);      /* 36 -> 64px */
+    --text-display-2--line-height: 1.0;
+    --text-display-2--letter-spacing: -0.028em;
+    /* 7.2vw capped at 7rem was too much: on a wide window the headline filled
+       the viewport on its own and pushed the install terminal below the fold,
+       which breaks the rule the hero exists to satisfy (SITE-STORY §5 — the
+       hero carries a product artifact). Still ~1.7x the 48px it replaced. */
+    --text-display-1: clamp(2.5rem, 5.2vw, 4.75rem);    /* 40 -> 76px */
+    --text-display-1--line-height: 0.94;
+    --text-display-1--letter-spacing: -0.032em;
+
     /* Control heights — the one scale every inline control resolves to, so a
        Button, TextField and Select at the same size share a baseline. Mirrors
        CONTROL_HEIGHT in styles.ts; that is the source for React components,
@@ -78,8 +109,25 @@
 
     /* Text Colors — using opaque values so icon strokes render solidly */
     --color-text-primary: #212121;
-    --color-text-secondary: #757575;
-    --color-text-disabled: #9e9e9e;
+    /* #737373, not #757575. Two units, and they are the two that matter.
+       The app's light page ground is #fafafa, not #ffffff, and #757575 lands at
+       4.41:1 there — under AA for the 14px type this token carries. It clears
+       4.5 only against pure white, which is not a surface the product actually
+       uses. Every field label in light mode was failing by a whisker.
+       #737373 measures 4.54:1 on #fafafa and 4.74:1 on #ffffff, so it passes on
+       both grounds instead of the theoretical one. Same fix, and the same
+       reasoning, as the `--color-surface-500` move recorded below. */
+    --color-text-secondary: #737373;
+    /* #8b8b8b, not #9e9e9e. Measured against the field fill a disabled label
+       actually sits on (`surface-accent-200/50` over #fafafa ≈ #eef1f5),
+       #9e9e9e reached 2.36:1 — present, but not readable.
+       Full AA is not achievable here and should not be chased: 4.5:1 on that
+       fill needs #6e6e6e, which is DARKER than the #737373 an ENABLED label
+       uses, so the disabled state would read as the emphasised one. WCAG 1.4.3
+       exempts inactive controls for exactly this reason.
+       #8b8b8b lands at ~3:1 — legible at a glance, still unmistakably muted
+       against its enabled neighbour. */
+    --color-text-disabled: #8b8b8b;
     --color-text-primary-dark: #ffffff;
     --color-text-secondary-dark: #a0a0a9;
     --color-text-disabled-dark: #757580;

package/dist/styles.d.ts

@@ -28,12 +28,44 @@ export declare const controlPaddingMixin: {
 };
 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 focusedClasses = "z-30 outline-hidden outline-none ring-2 ring-primary ring-opacity-50 ring-primary/50 ring-offset-0 ring-offset-transparent ";
-export declare const fieldBackgroundMixin = "bg-surface-accent-200/50 dark:bg-white/[0.055]";
+/**
+ * The focus ring — the single most-seen interaction state in the product, and
+ * until now the least tended.
+ *
+ * Three dead declarations were removed rather than reshuffled:
+ *   `outline-hidden` + `outline-none`  — the same instruction twice.
+ *   `ring-primary` + `ring-primary/50` — the first could never win.
+ *   `ring-opacity-50`                  — Tailwind v3 syntax. v4 expresses
+ *                                        opacity with the `/50` slash form, so
+ *                                        this generated nothing at all.
+ *
+ * What is left is the ring that was actually rendering, at 60% rather than 50%:
+ * on `surface-900` the old value sat close enough to the field's own border to
+ * be missed at a glance, which is the one thing a focus ring may not be.
+ * `ring-offset-0` + a transparent offset stay — without them the ring draws a
+ * white halo on dark surfaces.
+ */
+export declare const focusedClasses = "z-30 outline-none ring-2 ring-primary/60 ring-offset-0 ring-offset-transparent";
+/**
+ * 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.
+ *
+ * Light mode gets none: on a white page the highlight has nothing to catch.
+ */
+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 fieldBackgroundHoverMixin = "hover:bg-surface-accent-200/70 hover:dark:bg-white/[0.09]";
-export declare const defaultBorderMixin = "border-surface-200 dark:border-surface-700/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";
 /**

package/dist/theme.css

@@ -26,7 +26,13 @@
        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.022em; /* >= 30px — the headline tier; matches the marketing site */
+    /* -0.025em, revised 2026-08-24 from -0.022em. The website's dev-only
+       TypeDevPanel has shipped `td: -25` as its "SHIPPED" default all along, so
+       every local preview and every design decision taken in front of one was
+       made at -0.025em while the built site served -0.022em. Of the panel's
+       eleven defaults these two — tracking and display weight — were the only
+       ones that did not match the tokens. Both are now true. */
+    --tracking-display: -0.025em; /* >= 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 */
 
@@ -43,6 +49,31 @@
     --text-3xs: 10px;
     --text-3xs--line-height: 1.4;
 
+    /* Display tier — above `text-4xl`, where the scale stops being a heading
+       and starts being a statement. Added 2026-08-24.
+
+       Fluid rather than fixed because the same token has to survive four
+       locales: German and French run 15-25% longer than English, and a fixed
+       112px headline that fits "The Postgres you already have" does not fit
+       "Das Postgres, das Sie bereits haben". The `vw` middle term shrinks
+       before it can overflow; the `rem` floor protects small screens, where
+       the type is already proportionally large.
+
+       Both carry their own line-height and tracking: at this size 1.1 reads as
+       a gap and -0.025em reads as loose. Weight stays on the 600 ceiling —
+       this tier separates itself by SIZE, which is the whole point of adding
+       it rather than reaching for 700. */
+    --text-display-2: clamp(2.25rem, 4.4vw, 4rem);      /* 36 -> 64px */
+    --text-display-2--line-height: 1.0;
+    --text-display-2--letter-spacing: -0.028em;
+    /* 7.2vw capped at 7rem was too much: on a wide window the headline filled
+       the viewport on its own and pushed the install terminal below the fold,
+       which breaks the rule the hero exists to satisfy (SITE-STORY §5 — the
+       hero carries a product artifact). Still ~1.7x the 48px it replaced. */
+    --text-display-1: clamp(2.5rem, 5.2vw, 4.75rem);    /* 40 -> 76px */
+    --text-display-1--line-height: 0.94;
+    --text-display-1--letter-spacing: -0.032em;
+
     /* Control heights — the one scale every inline control resolves to, so a
        Button, TextField and Select at the same size share a baseline. Mirrors
        CONTROL_HEIGHT in styles.ts; that is the source for React components,
@@ -78,8 +109,25 @@
 
     /* Text Colors — using opaque values so icon strokes render solidly */
     --color-text-primary: #212121;
-    --color-text-secondary: #757575;
-    --color-text-disabled: #9e9e9e;
+    /* #737373, not #757575. Two units, and they are the two that matter.
+       The app's light page ground is #fafafa, not #ffffff, and #757575 lands at
+       4.41:1 there — under AA for the 14px type this token carries. It clears
+       4.5 only against pure white, which is not a surface the product actually
+       uses. Every field label in light mode was failing by a whisker.
+       #737373 measures 4.54:1 on #fafafa and 4.74:1 on #ffffff, so it passes on
+       both grounds instead of the theoretical one. Same fix, and the same
+       reasoning, as the `--color-surface-500` move recorded below. */
+    --color-text-secondary: #737373;
+    /* #8b8b8b, not #9e9e9e. Measured against the field fill a disabled label
+       actually sits on (`surface-accent-200/50` over #fafafa ≈ #eef1f5),
+       #9e9e9e reached 2.36:1 — present, but not readable.
+       Full AA is not achievable here and should not be chased: 4.5:1 on that
+       fill needs #6e6e6e, which is DARKER than the #737373 an ENABLED label
+       uses, so the disabled state would read as the emphasised one. WCAG 1.4.3
+       exempts inactive controls for exactly this reason.
+       #8b8b8b lands at ~3:1 — legible at a glance, still unmistakably muted
+       against its enabled neighbour. */
+    --color-text-disabled: #8b8b8b;
     --color-text-primary-dark: #ffffff;
     --color-text-secondary-dark: #a0a0a9;
     --color-text-disabled-dark: #757580;

package/dist/util/index.d.ts

@@ -1,4 +1,4 @@
-export * from "./cls";
-export * from "./debounce";
-export * from "./chip_colors";
-export * from "./key_to_icon_component";
+export * from "./cls.js";
+export * from "./debounce.js";
+export * from "./chip_colors.js";
+export * from "./key_to_icon_component.js";

package/dist/views/CardView.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { CollectionSize } from "./ListView";
+import { CollectionSize } from "./ListView.js";
 export type CardViewProps<T> = {
     data: T[];
     dataLoading?: boolean;

package/dist/views/CollectionView/CollectionCardView.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { CollectionPropertyConfig, CollectionDataController, CellRendererOverride, CollectionViewSize, CollectionSelectionController } from "./CollectionViewTypes";
+import type { CollectionPropertyConfig, CollectionDataController, CellRendererOverride, CollectionViewSize, CollectionSelectionController } from "./CollectionViewTypes.js";
 /**
  * Props for the {@link CollectionCardView} component.
  * @group Collection View

package/dist/views/CollectionView/CollectionKanbanView.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { CollectionPropertyConfig, CollectionDataController, CellRendererOverride, CollectionSelectionController } from "./CollectionViewTypes";
+import type { CollectionPropertyConfig, CollectionDataController, CellRendererOverride, CollectionSelectionController } from "./CollectionViewTypes.js";
 /**
  * Props for the {@link CollectionKanbanView} component.
  * @group Collection View

package/dist/views/CollectionView/CollectionListView.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { CollectionPropertyConfig, CollectionDataController, CellRendererOverride, CollectionViewSize, CollectionSelectionController } from "./CollectionViewTypes";
+import type { CollectionPropertyConfig, CollectionDataController, CellRendererOverride, CollectionViewSize, CollectionSelectionController } from "./CollectionViewTypes.js";
 /**
  * Props for the {@link CollectionListView} component.
  * @group Collection View

package/dist/views/CollectionView/CollectionTableView.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { CollectionPropertyConfig, CollectionDataController, CellRendererOverride, CollectionViewSize, CollectionSelectionController } from "./CollectionViewTypes";
+import type { CollectionPropertyConfig, CollectionDataController, CellRendererOverride, CollectionViewSize, CollectionSelectionController } from "./CollectionViewTypes.js";
 /**
  * Props for the {@link CollectionTableView} component.
  * @group Collection View

package/dist/views/CollectionView/CollectionView.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { CollectionViewMode, CollectionViewSize, CollectionPropertyConfig, CollectionDataController, CellRendererOverride, CollectionCustomViewEntry, CollectionSelectionController, KanbanPropertyOption } from "./CollectionViewTypes";
+import type { CollectionViewMode, CollectionViewSize, CollectionPropertyConfig, CollectionDataController, CellRendererOverride, CollectionCustomViewEntry, CollectionSelectionController, KanbanPropertyOption } from "./CollectionViewTypes.js";
 /**
  * Props for the headless {@link CollectionView} component.
  *

package/dist/views/CollectionView/CollectionViewToolbar.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { CollectionViewMode, CollectionViewSize, KanbanPropertyOption } from "./CollectionViewTypes";
+import type { CollectionViewMode, CollectionViewSize, KanbanPropertyOption } from "./CollectionViewTypes.js";
 /**
  * Props for the {@link CollectionViewToolbar} component.
  * @group Collection View

package/dist/views/CollectionView/CollectionViewTypes.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { VirtualTableSortKey } from "../../components/VirtualTable/VirtualTableProps";
+import type { VirtualTableSortKey } from "../../components/VirtualTable/VirtualTableProps.js";
 /**
  * Supported view modes.
  *

package/dist/views/CollectionView/DefaultCellRenderer.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { CellRendererProps } from "./CollectionViewTypes";
+import type { CellRendererProps } from "./CollectionViewTypes.js";
 /**
  * Default cell renderer for the headless CollectionView.
  * Handles all built-in property types without depending on any Rebase core types.

package/dist/views/CollectionView/index.d.ts

@@ -8,11 +8,11 @@
  *
  * @module CollectionView
  */
-export type { CollectionViewMode, CollectionViewSize, CollectionEnumValueConfig, CollectionPropertyConfig, CollectionDataController, CellRendererProps, CellRendererOverride, CollectionSelectionController, KanbanPropertyOption } from "./CollectionViewTypes";
-export { CollectionView } from "./CollectionView";
-export type { CollectionViewProps } from "./CollectionView";
-export type { CollectionViewToolbarProps } from "./CollectionViewToolbar";
-export type { CollectionTableViewProps } from "./CollectionTableView";
-export type { CollectionCardViewProps } from "./CollectionCardView";
-export type { CollectionListViewProps } from "./CollectionListView";
-export type { CollectionKanbanViewProps } from "./CollectionKanbanView";
+export type { CollectionViewMode, CollectionViewSize, CollectionEnumValueConfig, CollectionPropertyConfig, CollectionDataController, CellRendererProps, CellRendererOverride, CollectionSelectionController, KanbanPropertyOption } from "./CollectionViewTypes.js";
+export { CollectionView } from "./CollectionView.js";
+export type { CollectionViewProps } from "./CollectionView.js";
+export type { CollectionViewToolbarProps } from "./CollectionViewToolbar.js";
+export type { CollectionTableViewProps } from "./CollectionTableView.js";
+export type { CollectionCardViewProps } from "./CollectionCardView.js";
+export type { CollectionListViewProps } from "./CollectionListView.js";
+export type { CollectionKanbanViewProps } from "./CollectionKanbanView.js";

package/dist/views/CollectionView/resolveTitleProperty.d.ts

@@ -1,4 +1,4 @@
-import type { CollectionPropertyConfig } from "./CollectionViewTypes";
+import type { CollectionPropertyConfig } from "./CollectionViewTypes.js";
 /**
  * Pick the property that acts as a row's title.
  *

package/dist/views/Kanban/Board.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
-import { BoardProps } from "./board_types";
+import { BoardProps } from "./board_types.js";
 export declare function Board<T, COLUMN extends string>({ data, columns: columnsProp, columnLabels, columnColors, className, assignColumn, allowColumnReorder, onColumnReorder, onItemsReorder, ItemComponent, columnLoadingState, onLoadMoreColumn, onAddItemToColumn, AddColumnComponent }: BoardProps<T, COLUMN>): React.JSX.Element;

package/dist/views/Kanban/BoardColumn.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { BoardItem, BoardItemViewProps } from "./board_types";
+import { BoardItem, BoardItemViewProps } from "./board_types.js";
 export interface BoardColumnProps<T> {
     id: string;
     title: string;

package/dist/views/Kanban/BoardSortableList.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { BoardItem, BoardItemViewProps } from "./board_types";
+import { BoardItem, BoardItemViewProps } from "./board_types.js";
 interface BoardSortableListProps<T> {
     columnId: string;
     items: BoardItem<T>[];

package/dist/views/Kanban/index.d.ts

@@ -1,5 +1,5 @@
-export * from "./board_types";
-export * from "./BoardColumnTitle";
-export * from "./BoardSortableList";
-export * from "./BoardColumn";
-export * from "./Board";
+export * from "./board_types.js";
+export * from "./BoardColumnTitle.js";
+export * from "./BoardSortableList.js";
+export * from "./BoardColumn.js";
+export * from "./Board.js";

package/dist/views/Kanban/placement.d.ts

@@ -1,4 +1,4 @@
-import { BoardItem } from "./board_types";
+import { BoardItem } from "./board_types.js";
 export interface PlaceDroppedCardParams<T> {
     /**
      * The destination column as it stands at the moment of the drop. When the

package/dist/views/KanbanView.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { BoardItem, BoardItemViewProps, ColumnLoadingState } from "./Kanban/board_types";
+import { BoardItem, BoardItemViewProps, ColumnLoadingState } from "./Kanban/board_types.js";
 export type KanbanViewProps<T, COLUMN extends string> = {
     columns: COLUMN[];
     columnLabels?: Record<COLUMN, string>;

package/dist/views/index.d.ts

@@ -1,4 +1,4 @@
-export * from "./ListView";
-export * from "./CardView";
-export * from "./KanbanView";
-export * from "./CollectionView";
+export * from "./ListView.js";
+export * from "./CardView.js";
+export * from "./KanbanView.js";
+export * from "./CollectionView/index.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rebasepro/ui",
   "type": "module",
-  "version": "0.16.0",
+  "version": "0.16.1-canary.g0d7af95",
   "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"
@@ -113,7 +113,7 @@
   },
   "scripts": {
     "watch": "vite build --watch",
-    "build": "rm -rf dist || true && vite build && cp dist/src/index.css dist/src/theme.css dist/ && tsc --emitDeclarationOnly -p tsconfig.prod.json && node ../../scripts/assert-build-output.mjs",
+    "build": "rm -rf dist || true && vite build && cp dist/src/index.css dist/src/theme.css dist/ && tsc --emitDeclarationOnly -p tsconfig.prod.json && node ../../tooling/scripts/add-dts-extensions.mjs dist && node ../../tooling/scripts/assert-build-output.mjs",
     "test:lint": "eslint \"src/**\" --quiet",
     "test": "jest --passWithNoTests",
     "clean": "rm -rf dist && find ./src \\( -name '*.js' -o -name '*.d.ts' \\) -type f | xargs rm -f",

package/src/components/TextField.tsx

@@ -229,7 +229,16 @@ export const TextField = forwardRef<HTMLDivElement, TextFieldProps<string | numb
                                     ? "text-primary dark:text-primary"
                                     : "text-text-secondary dark:text-text-secondary-dark"
                                 : "text-red-500 dark:text-red-600",
-                            disabled ? "opacity-50" : ""
+                            // A disabled field's LABEL is the one part that must
+                            // stay readable — it is what tells you which field
+                            // you cannot edit. `opacity-50` halved the alpha of
+                            // an already-muted #737373, landing near 2.2:1 over
+                            // the field fill; the label was effectively gone.
+                            //
+                            // The value below it keeps its own `opacity-50`,
+                            // which is the correct signal: the CONTENT is
+                            // inactive. Naming the field is not content.
+                            disabled ? "text-text-disabled dark:text-text-disabled-dark" : ""
                         )}
                         shrink={hasValue || focused}
                     >

package/src/components/common/SelectInputLabel.tsx

@@ -1,9 +1,23 @@
 import React from "react";
 import { cls } from "../../util";
 
+/**
+ * The label above a Select or MultiSelect.
+ *
+ * It used `text-surface-accent-500` — a SURFACE scale, borrowed for type. The
+ * label above a TextField has always used `text-text-secondary`, and the two are
+ * the same role, so a form mixing the components showed two different label
+ * colours: `#64748b` blue-grey over a Select, `#757575` neutral over a TextField.
+ * Measured side by side on /debug/ui, which is where it is most obvious, because
+ * the reference puts them in adjacent columns.
+ *
+ * The text tokens are also the tuned ones: `--color-surface-500` was moved to
+ * #797979 precisely so muted type clears AA on both grounds. The slate scale
+ * carries no such guarantee — it is for surfaces.
+ */
 export function SelectInputLabel({ children, error }: { children: React.ReactNode, error?: boolean }) {
     return <div className={cls("text-sm font-medium ml-3.5 mb-1",
-        error ? "text-red-600 dark:text-red-500" : "text-surface-accent-500 dark:text-surface-accent-300")}>
+        error ? "text-red-600 dark:text-red-500" : "text-text-secondary dark:text-text-secondary-dark")}>
         {children}
     </div>;
 }

package/src/index.css

@@ -48,17 +48,29 @@ html.dark {
 
    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. */
+   have to actually differ, rather than all sitting at 600.
+
+   REVISED 2026-08-24. The ladder above described weight falling with size, but
+   the code ran 500/500/600/600/500/500 — a hump, where the LARGEST headings
+   were the LIGHTEST and h3 outweighed h1. Two rules were in play and neither
+   won cleanly. It is now monotonic: 600 for headings of consequence (h1-h4),
+   500 for small labels (h5/h6), 400 body. The display end still separates
+   itself by SIZE and tracking, which is what the paragraph above asks of it;
+   what it no longer does is separate itself by being *lighter* than the
+   smaller headings beneath it. 600 remains the ceiling. */
+
+/* 600. This reverses the earlier "500, not 700" setting — not back toward 700,
+   which stays banned, but up to the ceiling the ladder already used for h3/h4.
+   The 500 was only ever visible in production: the dev-only TypeDevPanel has
+   shipped a `wd: 600` default that overrode this with !important, so every
+   local preview of this site has been 600 while rebase.pro rendered 500. The
+   panel's constant is now telling the truth. */
 .typography-h1 {
-    @apply text-4xl font-headers font-medium tracking-display;
+    @apply text-4xl font-headers font-semibold tracking-display;
 }
 
 .typography-h2 {
-    @apply text-3xl font-headers font-medium tracking-display;
+    @apply text-3xl font-headers font-semibold tracking-display;
 }
 
 .typography-h3 {

package/src/styles.ts

@@ -47,12 +47,48 @@ export const controlPaddingMixin = {
 
 export const focusedDisabled = "focus-visible:ring-0 focus-visible:ring-offset-0";
 export const focusedInvisibleMixin = "focus:bg-opacity-70 focus:bg-surface-accent-100 focus:dark:bg-white/[0.07] focus:bg-surface-accent-100/70";
-export const focusedClasses = "z-30 outline-hidden outline-none ring-2 ring-primary ring-opacity-50 ring-primary/50 ring-offset-0 ring-offset-transparent ";
-export const fieldBackgroundMixin = "bg-surface-accent-200/50 dark:bg-white/[0.055]";
+
+/**
+ * The focus ring — the single most-seen interaction state in the product, and
+ * until now the least tended.
+ *
+ * Three dead declarations were removed rather than reshuffled:
+ *   `outline-hidden` + `outline-none`  — the same instruction twice.
+ *   `ring-primary` + `ring-primary/50` — the first could never win.
+ *   `ring-opacity-50`                  — Tailwind v3 syntax. v4 expresses
+ *                                        opacity with the `/50` slash form, so
+ *                                        this generated nothing at all.
+ *
+ * What is left is the ring that was actually rendering, at 60% rather than 50%:
+ * on `surface-900` the old value sat close enough to the field's own border to
+ * be missed at a glance, which is the one thing a focus ring may not be.
+ * `ring-offset-0` + a transparent offset stay — without them the ring draws a
+ * white halo on dark surfaces.
+ */
+export const focusedClasses = "z-30 outline-none ring-2 ring-primary/60 ring-offset-0 ring-offset-transparent";
+
+/**
+ * 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.
+ *
+ * Light mode gets none: on a white page the highlight has nothing to catch.
+ */
+export 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 const fieldBackgroundInvisibleMixin = "bg-surface-accent-200/0 dark:bg-white/0";
 export const fieldBackgroundDisabledMixin = "bg-surface-accent-200/50 dark:bg-white/[0.03]";
-export const fieldBackgroundHoverMixin = "hover:bg-surface-accent-200/70 hover:dark:bg-white/[0.09]";
-export const defaultBorderMixin = "border-surface-200 dark:border-surface-700/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 const fieldBackgroundHoverMixin = "transition-colors duration-150 hover:bg-surface-accent-200/70 hover:dark:bg-white/[0.09]";
+
+export const defaultBorderMixin = "border-surface-200 dark:border-surface-700/60";
 
 // ---------------------------------------------------------------------------
 // Surfaces: two kinds, and the difference is what the border is for.