@multiplatform.one/theme 7.34.4 → 7.35.0

package/src/theme/defaults/fonts.ts

@@ -7,70 +7,20 @@ import { createFont, type GenericFont } from "@tamagui/web";
 import { flooredLineHeight, fontCategoryMetrics } from "../fontCategoryMetrics";
 import { fontCategoryStacks } from "../fontCategoryStacks";
 import type { FontCategory } from "../knobs";
+import { generateScale, type ScaleFonts } from "../scale/generateScale";
+import { defaultScaleInputs } from "../scale/scaleInputs";
 
-// Default purpose fonts for components that reference $heading / $body
-// directly, both backed by Inter.
+// $heading and $body are Inter on the generated scale's tables
+// (scale/generateScale.ts reproduces @tamagui/config/v5 key for key at the
+// default inputs); weights come from v5's tables. Inter tracks by size on its
+// dynamic-metrics curve (rsms.me/inter/dynmetrics): a + b·e^(c·size) em.
 //
-// MPO-19 X8 + X9. These tables used to be @tamagui/config/v4's — headings on a
-// 1.4x scale (H1 $10 = 64px) at whatever weight the knob happened to default
-// to, body at 14px with `lineHeight = size + 10`. Against the v5 era this
-// package now pins (see `TAMAGUI_ERA` in createDefaultThemeConfig.ts) that is a
-// different typographic voice, not a variation on one: H1 was 64px/400 where
-// stock v5 is 40px/800, large and light against compact and heavy. And
-// `size + 10` is not a ratio at all — 1.91 at 11px, 1.22 at 46px — which is
-// why v5 replaced it with an explicit taper.
-//
-// So the tables are no longer transcribed. They are READ from
-// `defaultConfig.fonts`, which means the era pin is load-bearing rather than
-// decorative: re-point it and the type scale follows, and there is no local
-// copy that can drift from upstream between pins. That also retires the
-// hand-mirrored `interBaseSizes` table this file used to carry purely so
-// tracking could be computed per key — the size table it needed IS the one
-// upstream ships.
-//
-// Tracking-by-size (Axiom 15 OPTICS + LC-11): letter-spacing is a function
-// of the rendered size, not a constant — slightly loose at caption sizes,
-// increasingly tight at display sizes (the same optical behavior Apple's SF
-// implements per point size). The curve is Inter's own dynamic-metrics
-// model (rsms.me/inter/dynmetrics): tracking(em) = a + b·e^(c·size).
-//
-// ── Category fonts (MPO-44, re-derived against the era pin) ──────────────
-//
-// A bodyFont stop is a FAMILY choice. It must move the family and nothing
-// else, so every category font is built from the era's own `$body` tables
-// rather than a ramp of its own. Measured on the label text node before this
-// change, both schemes:
-//
-//   sans-serif   Inter          15px/23px
-//   serif        Georgia        14px/24px
-//   mono         ui-monospace   14px/24px
-//   rounded      Nunito         14px/24px
-//
-// Registering the families (the first half of MPO-44) stopped the collapse to
-// -apple-system 14px/normal, but the era pin landed after it and moved `$body`
-// to 15/23 — so ten of eleven stops were left on a second ladder, and flipping
-// the knob resized the label by a pixel and moved its leading. Same defect
-// class as the one MPO-44 was filed for: the knob was still taking type off
-// the ramp, just more quietly.
-//
-// Three deliberate departures from `$body`, all upward and all LC-11:
-//
-//  1. Leading is floored per category — `flooredLineHeight` raises the era's
-//     value where the taper falls under the category's ratio, never lowers
-//     it. Only display steps move; every text step is `$body`'s own value.
-//  2. Tracking is 0, not Inter's curve. That curve is Inter-specific, and an
-//     empty table is not neutral: the class Tamagui emits for `$mono` does
-//     not declare `--f-letterSpacing-*`, so the value fell through to the
-//     `:root` Inter one and Georgia and Nunito rendered at Inter's −0.13px.
-//     There is no measured optical curve for these faces, so 0 is the honest
-//     value rather than a borrowed one.
-//  3. Weight is the era's (400 at every step). The previous default was 300,
-//     which is off the reference's label weight in the other direction.
-//
-// `$body` itself is untouched: it IS upstream's table under the pin, and
-// MPO-19 owns it. Its ratio dips below LC-11's 1.4 body floor from $11 up;
-// FontKnobStyles floors that scope on web, and correcting the table would
-// have to be argued on MPO-19, not smuggled in here.
+// A category font moves the family and nothing else: it takes its scope's
+// ladder ($body, or $heading for the heading-scope copy) with the same sizes
+// and weights, `true` included (without `true`, $serif and $mono collapsed to
+// the system face at line-height normal, MPO-44). Two departures, both LC-11:
+// leading is floored per category, and tracking is an explicit zero table,
+// because an empty one lets the inherited Inter `--f-letterSpacing-*` through.
 
 const TRACKING_A = -0.0223;
 const TRACKING_B = 0.185;
@@ -113,9 +63,6 @@ function plain<T>(raw: unknown): Record<string, T> {
   return out;
 }
 
-/** A tamagui font table's numbers, with Variables and `$` prefixes unwrapped. */
-const numbers = (raw: unknown) => plain<number>(raw);
-
 /** Inter dynamic tracking for every key of a size table. */
 function trackingFor(sizes: Record<string, number>): Record<string, number> {
   return Object.fromEntries(Object.entries(sizes).map(([key, px]) => [key, interTrackingPx(px)]));
@@ -126,32 +73,29 @@ function neutralTracking(sizes: Record<string, number>): Record<string, number>
   return Object.fromEntries(Object.keys(sizes).map((key) => [key, 0]));
 }
 
-const v5Body = defaultConfig.fonts.body;
-const v5Heading = defaultConfig.fonts.heading;
-const bodySizes = numbers(v5Body.size);
-const bodyLineHeights = numbers(v5Body.lineHeight);
-const bodyWeights = plain<string>(v5Body.weight);
-const headingSizes = numbers(v5Heading.size);
+const bodyWeights = plain<string>(defaultConfig.fonts.body.weight);
+const headingWeights = plain<string>(defaultConfig.fonts.heading.weight);
+// v5 aliases true to 800 although its default size is step 4.
+headingWeights.true = headingWeights["4"]!;
+const defaultTypeTables: ScaleFonts = generateScale(defaultScaleInputs).fonts;
 
 /**
- * The era's body size table. Exported under its historical name because
- * `createDefaultFont` defaults to it, so a consumer-registered category font
- * lands on the same ladder as the built-in ones instead of a private copy
- * that drifts at the next pin (MPO-19 X8/X9).
+ * The default scale's body size table. Exported under its historical name
+ * because `createDefaultFont` defaults to it, so a consumer-registered
+ * category font lands on the same ladder as the built-in ones instead of a
+ * private copy (MPO-19 X8/X9).
  */
-export const bodyFontSizes: Record<string, number> = bodySizes;
+export const bodyFontSizes: Record<string, number> = { ...defaultTypeTables.bodySizes };
 
-/** The era's body leading, before any per-category floor. */
-export const bodyFontLineHeights: Record<string, number> = bodyLineHeights;
+/** The default scale's body leading, before any per-category floor. */
+export const bodyFontLineHeights: Record<string, number> = {
+  ...defaultTypeTables.bodyLineHeights,
+};
 
-/**
- * Inter faces the workspace ships. v5 heading weights are sparse — 600 up to
- * $5, 700 at $6–$8, 800 from $9 — and A4's reading of that is the point:
- * everything between inherits, so bold is rare and therefore means something.
- * Each declared weight needs a face or the browser synthesises one.
- */
+/** Shipped Inter faces: 400/500/600/700/800. */
 const interFaces = {
   400: { normal: "Inter" },
+  500: { normal: "InterMedium" },
   600: { normal: "InterSemiBold" },
   700: { normal: "InterBold" },
   800: { normal: "InterExtraBold" },
@@ -166,58 +110,71 @@ export const fontFamilyStacks = fontCategoryStacks;
 
 export type FontFamilyCategory = FontCategory;
 
-/**
- * Leading for one category: the era's body table with the category's LC-11
- * floor applied. Every text step comes back as `$body`'s own value; only the
- * display steps, where the era's taper eases below the floor, move up.
- */
-export function categoryLineHeights(category: FontCategory): Record<string, number> {
-  const minRatio = (fontCategoryMetrics[category] ?? fontCategoryMetrics["sans-serif"]).body;
+/** Scope leading raised to the category's LC-11 floor. */
+export function categoryLineHeights(
+  category: FontCategory,
+  tables: ScaleFonts = defaultTypeTables,
+  scope: "body" | "heading" = "body",
+): Record<string, number> {
+  const minRatio = (fontCategoryMetrics[category] ?? fontCategoryMetrics["sans-serif"])[scope];
+  const sizes = scope === "heading" ? tables.headingSizes : tables.bodySizes;
+  const lineHeights = scope === "heading" ? tables.headingLineHeights : tables.bodyLineHeights;
   return Object.fromEntries(
-    Object.entries(bodySizes).map(([key, px]) => [
+    Object.entries(sizes).map(([key, px]) => [
       key,
-      flooredLineHeight(px, bodyLineHeights[key] ?? bodyLineHeightPx(px), minRatio),
+      flooredLineHeight(px, lineHeights[key] ?? bodyLineHeightPx(px), minRatio),
     ]),
   );
 }
 
-/**
- * Category font on the `$body` ladder: same sizes (including `true`), same
- * weights, leading floored per LC-11, tracking neutral. A missing `true` key
- * is what collapsed `$serif`/`$mono`/`$rounded` to the system face at
- * `line-height: normal` (MPO-44).
- */
-export function createCategoryFont(category: FontCategory, family: string): GenericFont {
+/** Category family on the selected scope's size and weight ladder. */
+export function createCategoryFont(
+  category: FontCategory,
+  family: string,
+  tables: ScaleFonts = defaultTypeTables,
+  scope: "body" | "heading" = "body",
+): GenericFont {
+  const sizes = scope === "heading" ? tables.headingSizes : tables.bodySizes;
   return createFont({
     family,
-    size: bodySizes,
-    lineHeight: categoryLineHeights(category),
-    weight: bodyWeights,
-    letterSpacing: neutralTracking(bodySizes),
+    size: { ...sizes },
+    lineHeight: categoryLineHeights(category, tables, scope),
+    weight: scope === "heading" ? headingWeights : bodyWeights,
+    letterSpacing: neutralTracking(sizes),
   }) as GenericFont;
 }
 
-export const defaultHeadingFont = createInterFont(
-  {
-    face: interFaces,
-    size: headingSizes,
-    lineHeight: numbers(v5Heading.lineHeight),
-    weight: plain<string>(v5Heading.weight),
-    letterSpacing: trackingFor(headingSizes),
-  },
-  { sizeSize: (size) => size },
-);
+/** Inter `$heading` on a generated scale's heading ladder. */
+export function createHeadingFont(tables: ScaleFonts = defaultTypeTables) {
+  return createInterFont(
+    {
+      face: interFaces,
+      size: { ...tables.headingSizes },
+      lineHeight: { ...tables.headingLineHeights },
+      weight: headingWeights,
+      letterSpacing: trackingFor(tables.headingSizes),
+    },
+    { sizeSize: (size) => size },
+  );
+}
 
-export const defaultBodyFont = createInterFont(
-  {
-    face: interFaces,
-    size: bodySizes,
-    lineHeight: bodyLineHeights,
-    weight: bodyWeights,
-    letterSpacing: trackingFor(bodySizes),
-  },
-  { sizeSize: (size) => size },
-);
+/** Inter `$body` on a generated scale's body ladder. */
+export function createBodyFont(tables: ScaleFonts = defaultTypeTables) {
+  return createInterFont(
+    {
+      face: interFaces,
+      size: { ...tables.bodySizes },
+      lineHeight: { ...tables.bodyLineHeights },
+      weight: bodyWeights,
+      letterSpacing: trackingFor(tables.bodySizes),
+    },
+    { sizeSize: (size) => size },
+  );
+}
+
+export const defaultHeadingFont = createHeadingFont();
+
+export const defaultBodyFont = createBodyFont();
 
 export const defaultSerifFont = createCategoryFont("serif", fontFamilyStacks.serif);
 export const defaultMonoFont = createCategoryFont("mono", fontFamilyStacks.mono);
@@ -236,10 +193,95 @@ export const defaultBlackletterFont = createCategoryFont(
 );
 export const defaultGeometricFont = createCategoryFont("geometric", fontFamilyStacks.geometric);
 
+export const headingCategoryFontKeys = {
+  serif: "headingSerif",
+  mono: "headingMono",
+  slab: "headingSlab",
+  rounded: "headingRounded",
+  condensed: "headingCondensed",
+  cursive: "headingCursive",
+  handwriting: "headingHandwriting",
+  pixel: "headingPixel",
+  blackletter: "headingBlackletter",
+  geometric: "headingGeometric",
+} as const satisfies Record<Exclude<FontCategory, "sans-serif">, string>;
+
+export const defaultHeadingSerifFont = createCategoryFont(
+  "serif",
+  fontFamilyStacks.serif,
+  defaultTypeTables,
+  "heading",
+);
+export const defaultHeadingMonoFont = createCategoryFont(
+  "mono",
+  fontFamilyStacks.mono,
+  defaultTypeTables,
+  "heading",
+);
+export const defaultHeadingSlabFont = createCategoryFont(
+  "slab",
+  fontFamilyStacks.slab,
+  defaultTypeTables,
+  "heading",
+);
+export const defaultHeadingRoundedFont = createCategoryFont(
+  "rounded",
+  fontFamilyStacks.rounded,
+  defaultTypeTables,
+  "heading",
+);
+export const defaultHeadingCondensedFont = createCategoryFont(
+  "condensed",
+  fontFamilyStacks.condensed,
+  defaultTypeTables,
+  "heading",
+);
+export const defaultHeadingCursiveFont = createCategoryFont(
+  "cursive",
+  fontFamilyStacks.cursive,
+  defaultTypeTables,
+  "heading",
+);
+export const defaultHeadingHandwritingFont = createCategoryFont(
+  "handwriting",
+  fontFamilyStacks.handwriting,
+  defaultTypeTables,
+  "heading",
+);
+export const defaultHeadingPixelFont = createCategoryFont(
+  "pixel",
+  fontFamilyStacks.pixel,
+  defaultTypeTables,
+  "heading",
+);
+export const defaultHeadingBlackletterFont = createCategoryFont(
+  "blackletter",
+  fontFamilyStacks.blackletter,
+  defaultTypeTables,
+  "heading",
+);
+export const defaultHeadingGeometricFont = createCategoryFont(
+  "geometric",
+  fontFamilyStacks.geometric,
+  defaultTypeTables,
+  "heading",
+);
+
 /** All purpose + category fonts registered by `createDefaultThemeConfig`. */
 export const defaultFonts = {
   heading: defaultHeadingFont,
   body: defaultBodyFont,
+  headingSerif: defaultHeadingSerifFont,
+  headingMono: defaultHeadingMonoFont,
+  headingSlab: defaultHeadingSlabFont,
+  headingRounded: defaultHeadingRoundedFont,
+  headingCondensed: defaultHeadingCondensedFont,
+  headingCursive: defaultHeadingCursiveFont,
+  headingHandwriting: defaultHeadingHandwritingFont,
+  headingPixel: defaultHeadingPixelFont,
+  headingBlackletter: defaultHeadingBlackletterFont,
+  headingGeometric: defaultHeadingGeometricFont,
+
   serif: defaultSerifFont,
   mono: defaultMonoFont,
   slab: defaultSlabFont,

package/src/theme/defaults/house.ts

@@ -0,0 +1,48 @@
+import type { BaseThemeBuilderDefinition, ThemeBuilderDefinition } from "../createThemes";
+import { defaultBaseTheme } from "./base";
+
+/**
+ * Optional: pass createDefaultThemeConfig({ base: houseBaseTheme, accent: houseAccentTheme }).
+ * These are not the default (Clay 2026-10-22).
+ */
+export const houseBaseTheme: BaseThemeBuilderDefinition = {
+  lightPalette: [100, 97, 93, 88, 83, 76, 66, 52, 40, 30, 20, 8].map(
+    (lightness) => `hsl(270, 6%, ${lightness}%)`,
+  ),
+  darkPalette: [4, 8, 11, 15, 20, 27, 38, 47, 56, 66, 80, 95].map(
+    (lightness) => `hsl(270, 6%, ${lightness}%)`,
+  ),
+  lightShadows: defaultBaseTheme.lightShadows,
+  darkShadows: defaultBaseTheme.darkShadows,
+};
+
+export const houseAccentTheme: ThemeBuilderDefinition = {
+  darkPalette: [
+    "hsla(250, 50%, 35%, 1)",
+    "hsla(250, 50%, 38%, 1)",
+    "hsla(250, 50%, 41%, 1)",
+    "hsla(250, 50%, 43%, 1)",
+    "hsla(250, 50%, 46%, 1)",
+    "hsla(250, 50%, 49%, 1)",
+    "hsla(250, 50%, 52%, 1)",
+    "hsla(250, 50%, 54%, 1)",
+    "hsla(250, 50%, 57%, 1)",
+    "hsla(250, 50%, 60%, 1)",
+    "hsla(250, 50%, 90%, 1)",
+    "hsla(250, 50%, 95%, 1)",
+  ],
+  lightPalette: [
+    "hsla(250, 50%, 62%, 1)",
+    "hsla(250, 50%, 58%, 1)",
+    "hsla(250, 50%, 54%, 1)",
+    "hsla(250, 50%, 48%, 1)",
+    "hsla(250, 50%, 46%, 1)",
+    "hsla(250, 50%, 44%, 1)",
+    "hsla(250, 50%, 42%, 1)",
+    "hsla(250, 50%, 40%, 1)",
+    "hsla(250, 50%, 38%, 1)",
+    "hsla(250, 50%, 36%, 1)",
+    "hsla(250, 50%, 95%, 1)",
+    "hsla(250, 50%, 98%, 1)",
+  ],
+};

package/src/theme/defaults/index.ts

@@ -3,3 +3,4 @@ export * from "./base";
 export * from "./builderOptions";
 export * from "./categoryFonts";
 export * from "./fonts";
+export * from "./house";

package/src/theme/defaults/neutralRamp.spec.ts

@@ -1,37 +1,12 @@
-/**
- * MPO-95, ruled C by Clay 2026-09-26: mpo's neutral ramp is its own hue-270
- * ramp, signed off as a deliberate divergence from tamagui.dev's achromatic
- * grays. This pins the design (the stops in `base.ts`), what the builder makes
- * of it (it quantizes each stop to integer hsla, so 56.5% renders as 56%), and
- * the file the gallery boards and their verifiers read. Changing the ramp is a
- * new ruling: update the rulebook, the JSON and the gallery token block with it.
- */
-
 import { readFileSync } from "node:fs";
 import { join } from "node:path";
+import { defaultLightPalette, defaultDarkPalette, themes as stockThemes } from "@tamagui/themes/v5";
 import { describe, expect, it } from "vitest";
 import { createThemesBuilder } from "../createThemes";
 import { defaultAccentTheme } from "./accent";
 import { defaultBaseTheme } from "./base";
 import { defaultBuilderOptions } from "./builderOptions";
-
-const signedOffLightness = {
-  light: [99.5, 98.2, 95.2, 92.5, 90, 87, 82.5, 75, 56.5, 46, 40, 14],
-  dark: [8.7, 10.5, 13.5, 16, 18.5, 21.5, 25.5, 32, 43, 54, 62.5, 94],
-} as const;
-
-/**
- * Read off the rendered FileUpload dropzone (Storybook, Chromium, DPR 2) when
- * MPO-95 was filed. These are what a user sees; everything else is derived.
- */
-const measured = [
-  ["light", 3, "rgb(243, 242, 243)"],
-  ["light", 6, "rgb(222, 220, 224)"],
-  ["light", 9, "rgb(143, 136, 150)"],
-  ["dark", 9, "rgb(110, 103, 116)"],
-  ["light", 12, "rgb(36, 34, 38)"],
-  ["dark", 12, "rgb(240, 239, 241)"],
-] as const;
+import { houseBaseTheme, houseAccentTheme } from "./house";
 
 type Scheme = "light" | "dark";
 type Themes = Record<string, Record<string, string>>;
@@ -76,32 +51,62 @@ const toHex = (value: string) =>
 const builtRamp = (scheme: Scheme) =>
   Array.from({ length: 12 }, (_, i) => built[scheme][`color${i + 1}`]);
 
-describe("MPO-95: the neutral ramp is mpo's hue-270 ramp", () => {
-  it("base.ts declares the signed-off stops: hue 270, 6% saturation, twelve lightnesses", () => {
-    expect(defaultBaseTheme.lightPalette).toEqual(
-      signedOffLightness.light.map((l) => `hsla(270, 6%, ${l}%, 1)`),
-    );
-    expect(defaultBaseTheme.darkPalette).toEqual(
-      signedOffLightness.dark.map((l) => `hsla(270, 6%, ${l}%, 1)`),
-    );
+describe("the default neutral ramp is stock Tamagui v5 (Clay 2026-10-22)", () => {
+  it("declares the v5 base palettes and their inversion as the default accent", () => {
+    expect(defaultBaseTheme.lightPalette).toEqual(defaultLightPalette);
+    expect(defaultBaseTheme.darkPalette).toEqual(defaultDarkPalette);
+    expect(defaultAccentTheme.lightPalette).toEqual(defaultDarkPalette);
+    expect(defaultAccentTheme.darkPalette).toEqual(defaultLightPalette);
   });
 
-  for (const [scheme, step, rgb] of measured) {
-    it(`${scheme} $color${step} builds to the measured ${rgb}`, () => {
-      expect(`rgb(${hslaToRgb(built[scheme][`color${step}`]).join(", ")})`).toBe(rgb);
+  for (const scheme of ["light", "dark"] as const) {
+    it(`builds the stock v5 ${scheme} ramp step for step`, () => {
+      expect(builtRamp(scheme)).toEqual(
+        Array.from(
+          { length: 12 },
+          (_, i) => stockThemes[scheme][`color${i + 1}` as keyof typeof stockThemes.light],
+        ),
+      );
     });
-  }
 
-  for (const scheme of ["light", "dark"] as const) {
-    it(`the built ${scheme} ramp is mpo-neutral-ramp.json, step for step`, () => {
+    it(`the built ${scheme} ramp equals the gallery JSON`, () => {
       expect(builtRamp(scheme).map(toHex)).toEqual(rampFile[scheme]);
     });
+
+    it(`every ${scheme} step is achromatic`, () => {
+      for (const value of builtRamp(scheme)) {
+        const [r, g, b] = hslaToRgb(value);
+        expect(r).toBe(g);
+        expect(g).toBe(b);
+      }
+    });
   }
+});
 
-  it("the tint survives the builder's rounding: only light $color1 lands on pure white", () => {
-    const achromatic = (hex: string) =>
-      new Set([hex.slice(1, 3), hex.slice(3, 5), hex.slice(5, 7)]).size === 1;
-    expect(rampFile.light.filter(achromatic)).toEqual(["#ffffff"]);
-    expect(rampFile.dark.filter(achromatic)).toEqual([]);
-  });
+describe("the optional house palette", () => {
+  const house = createThemesBuilder(
+    houseBaseTheme,
+    houseAccentTheme,
+    defaultBuilderOptions,
+  ).themes();
+  const lightnesses = {
+    light: [100, 97, 93, 88, 83, 76, 66, 52, 40, 30, 20, 8],
+    dark: [4, 8, 11, 15, 20, 27, 38, 47, 56, 66, 80, 95],
+  };
+  for (const scheme of ["light", "dark"] as const) {
+    it(`declares the optional ${scheme} integer HSL stops`, () => {
+      expect(houseBaseTheme[`${scheme}Palette`]).toEqual(
+        lightnesses[scheme].map((l) => `hsl(270, 6%, ${l}%)`),
+      );
+    });
+
+    it(`round-trips each ${scheme} stop without RGB drift`, () => {
+      const source = houseBaseTheme[`${scheme}Palette`];
+      for (const [i, declared] of source.entries()) {
+        expect(hslaToRgb(house[scheme][`color${i + 1}`]), `color${i + 1}`).toEqual(
+          hslaToRgb(declared),
+        );
+      }
+    });
+  }
 });

package/src/theme/devtools/ColorLineVisualizer.tsx

@@ -80,12 +80,12 @@ function fallbackGradient(): string[] {
 
 function NumberLineRow({
   colorFor,
-  compact,
+  halfHeight,
 }: {
   colorFor: (step: number) => string;
-  compact?: boolean;
+  halfHeight?: boolean;
 }) {
-  const h = compact ? Math.round(cellSize / 2) : cellSize;
+  const h = halfHeight ? Math.round(cellSize / 2) : cellSize;
   return (
     <div style={{ display: "flex", gap: 0 }}>
       {Array.from({ length: 12 }, (_, i) => {
@@ -103,7 +103,7 @@ function NumberLineRow({
               display: "flex",
               alignItems: "center",
               justifyContent: "center",
-              fontSize: compact ? 9 : 11,
+              fontSize: halfHeight ? 9 : 11,
               fontWeight: 700,
             }}
             title={`$color${step}`}
@@ -238,7 +238,7 @@ export function ColorLineVisualizer({
       <div style={styles.title as CSSProperties}>Theme</div>
       <SemanticBrackets />
       <NumberLineRow colorFor={colorFor} />
-      {oppositeColors && <NumberLineRow colorFor={toColorFn(oppositeColors)} compact />}
+      {oppositeColors && <NumberLineRow colorFor={toColorFn(oppositeColors)} halfHeight />}
       {accentColors && (
         <>
           <div
@@ -252,7 +252,7 @@ export function ColorLineVisualizer({
           </div>
           <NumberLineRow colorFor={toColorFn(accentColors)} />
           {oppositeAccentColors && (
-            <NumberLineRow colorFor={toColorFn(oppositeAccentColors)} compact />
+            <NumberLineRow colorFor={toColorFn(oppositeAccentColors)} halfHeight />
           )}
         </>
       )}

package/src/theme/devtools/ThemeDevtoolsPanel.setMarkers.spec.tsx

@@ -50,7 +50,7 @@ describe("ThemeDevtoolsPanel set markers survive a remount (MPO-463)", () => {
     render(<Shell scheme="light" />);
     expect(pressed("Fill", "outlined")).toBe("true");
     expect(pressed("Fill", "unset (inherit)")).toBe("false");
-    expect(pressed("Size", "unset (inherit)")).toBe("true");
+    expect(pressed("Elevation", "unset (inherit)")).toBe("true");
     expect(pressed("Radius", "unset (inherit)")).toBe("true");
   });
 
@@ -67,16 +67,16 @@ describe("ThemeDevtoolsPanel set markers survive a remount (MPO-463)", () => {
   it("a preset's own values read as inherited, only the knobs over it as set", () => {
     registerPreset("mpo463", {
       theme: "gray" as ThemeName,
-      knobs: { ...defaultKnobs, fillStyle: "outlined", size: "small" },
+      knobs: { ...defaultKnobs, fillStyle: "outlined", elevation: "none" },
       intents: {},
       tints: [],
     });
     document.cookie = `${cookiePreset}=mpo463; path=/`;
-    persistPresetOverrides({ size: "large" });
+    persistPresetOverrides({ elevation: "large" });
     render(<Shell scheme="light" />);
     expect(pressed("Fill", "unset (inherit)")).toBe("true");
-    expect(pressed("Size", "large")).toBe("true");
-    expect(pressed("Size", "unset (inherit)")).toBe("false");
+    expect(pressed("Elevation", "large")).toBe("true");
+    expect(pressed("Elevation", "unset (inherit)")).toBe("false");
   });
 
   it("a knob never set shows unset after a remount", () => {
@@ -84,8 +84,15 @@ describe("ThemeDevtoolsPanel set markers survive a remount (MPO-463)", () => {
     fireEvent.click(within(screen.getByRole("group", { name: "Fill" })).getByTitle("outlined"));
 
     shell.rerender(<Shell scheme="dark" />);
-    for (const label of ["Size", "Space", "Radius", "Border", "Elevation"]) {
+    for (const label of ["Radius", "Border", "Elevation"]) {
       expect(pressed(label, "unset (inherit)"), label).toBe("true");
     }
   });
+
+  it("has no Size, Space or Density row: those come from the preset's scale", () => {
+    render(<Shell scheme="light" />);
+    for (const label of ["Size", "Space", "Density"]) {
+      expect(screen.queryByRole("group", { name: label }), label).toBeNull();
+    }
+  });
 });