@multiplatform.one/theme 7.34.4 → 7.35.0

package/src/theme/theme.tsx

@@ -5,6 +5,7 @@ import {
   type CreateTamaguiProps,
   TamaguiProvider,
   type TamaguiProviderProps,
+  Theme,
   useDidFinishSSR,
 } from "tamagui";
 import type { PropsWithChildren } from "react";
@@ -12,9 +13,13 @@ import { animationDurations } from "./animations/css";
 import { getCookieWatchList, readOverridesCookie, readPresetCookie } from "./cookies";
 import { CornerSmoothingStyles } from "./cornerSmoothing";
 import { FontKnobStyles } from "./FontKnobStyles";
+import type { Knobs } from "./knobs";
 import { PresetContext, type PresetContextValue } from "./PresetContext";
 import { defaultPreset } from "./presets";
-import { getPreset } from "./shared";
+import { ScaleStyles } from "./scale/ScaleStyles";
+import { useActiveScale } from "./scale/useActiveScale";
+import { type ThemeConfig, getPreset } from "./shared";
+import { useSchemePreference } from "./useSchemePreference";
 
 /**
  * Animate a DOM mutation (typically a theme/scheme switch) using the View
@@ -53,10 +58,22 @@ export interface ThemeProviderProps<
 > extends PropsWithChildren<Omit<TamaguiProviderProps, "config" | "defaultTheme">> {
   config?: {
     tamagui: ReturnType<typeof import("tamagui").createTamagui<T>>;
-  };
+  } & Partial<Pick<ThemeConfig, "scales" | "defaultPreset">>;
   systemTheme?: "light" | "dark";
 }
 
+function useCookiePreset(): { presetName?: string; overrides: Partial<Knobs> } {
+  const isCookieDisabled =
+    typeof process !== "undefined" && process.env?.COOKIE_POLICY?.toLowerCase() === "disabled";
+  const watchList = isCookieDisabled ? [] : getCookieWatchList();
+  const [cookie] = useCookies<string, Record<string, string>>(watchList);
+  const presetName = readPresetCookie(cookie as Record<string, string | undefined>);
+  const overrides = readOverridesCookie(cookie as Record<string, string | undefined>);
+  const overridesKey = JSON.stringify(overrides);
+  const stableOverrides = useMemo(() => JSON.parse(overridesKey) as Partial<Knobs>, [overridesKey]);
+  return { presetName, overrides: stableOverrides };
+}
+
 // ---------------------------------------------------------------------------
 // ThemeProvider (simplified — TamaguiProvider + scheme + ToastProvider)
 // ---------------------------------------------------------------------------
@@ -64,18 +81,28 @@ export interface ThemeProviderProps<
 export function ThemeProvider<T extends CreateTamaguiProps>({
   children,
   config,
-  systemTheme = "light",
+  systemTheme,
   ...tamaguiProps
 }: ThemeProviderProps<T>) {
-  // The caller is responsible for resolving the active scheme:
+  // A caller that resolves the scheme itself wins:
   //   - App: useUserScheme() from @vxrn/color-scheme (reacts to OS changes)
   //   - Storybook: decorator resolves "system"/"light"/"dark" with OS listener
-  // ThemeProvider simply applies whatever the caller provides.
-  const activeTheme = systemTheme;
+  // Without one, the shared scheme preference (ThemePresetPicker's) applies.
+  const scheme = useSchemePreference();
+  const activeTheme = systemTheme ?? scheme.value;
   // A hydrating root renders a light placeholder to match SSR (MPO-278); the
   // blocking scheme script owns <html> until hydration finishes.
   const hydrated = useDidFinishSSR();
 
+  // The preset is resolved here, above TamaguiProvider, so its scale is
+  // installed before the first child renders (SSR and hydration alike). An
+  // ancestor PresetContext (Storybook's decorator) owns the preset instead.
+  const ancestor = useContext(PresetContext);
+  const cookiePreset = useCookiePreset();
+  const presetName =
+    (ancestor ? ancestor.presetName : cookiePreset.presetName) ?? config?.defaultPreset;
+  const scaleId = useActiveScale(config, presetName);
+
   const prevThemeRef = useRef<string | undefined>(undefined);
 
   // Set the initial theme class synchronously to avoid FOUC.
@@ -140,6 +167,9 @@ export function ThemeProvider<T extends CreateTamaguiProps>({
     document.head.appendChild(style);
   }, []);
 
+  // The base config, not the scale's: TamaguiProvider's stylesheet is keyed
+  // by href and never rewritten after first render, so it must hold the
+  // default token values the ScaleStyles blocks override.
   return (
     <TamaguiProvider
       {...tamaguiProps}
@@ -147,23 +177,27 @@ export function ThemeProvider<T extends CreateTamaguiProps>({
       defaultTheme={activeTheme}
       disableInjectCSS={false}
     >
+      <ScaleStyles config={config} presetName={presetName} />
       <ToastProvider>
-        <KnobBridge>{children}</KnobBridge>
+        <KnobBridge presetName={presetName} overrides={cookiePreset.overrides} scaleId={scaleId}>
+          {children}
+        </KnobBridge>
       </ToastProvider>
     </TamaguiProvider>
   );
 }
 
 /**
- * Internal bridge that reads the preset name + knob overrides from cookies
- * (reactive via CookiesProvider) and provides a PresetContext so that
- * useResolvedKnobs() picks up the live values.
+ * Internal bridge that provides a PresetContext from the preset name + knob
+ * overrides ThemeProvider read from cookies (reactive via CookiesProvider),
+ * so that useResolvedKnobs() picks up the live values.
  *
  * Resolution order (same on SSR and client):
- *   1. Read `mp.preset` cookie → look up the preset from the registry
- *   2. Read `mp.ov.*` cookies → partial knob overrides
+ *   1. `mp.preset` cookie → look up the preset from the registry
+ *   2. `mp.ov.*` cookies → partial knob overrides
  *   3. Merge: preset base knobs + overrides → final knobs
- *   4. Provide the full preset (knobs, tints, intents) via PresetContext
+ *   4. Provide the full preset (knobs, tints, intents) plus the active
+ *      preset name and scale id via PresetContext
  *
  * If an ancestor PresetContext already exists (e.g. from a Storybook decorator),
  * the bridge is a pass-through to avoid overriding it.
@@ -173,24 +207,23 @@ export function ThemeProvider<T extends CreateTamaguiProps>({
  * stylesheet restyle every shipped app that uses ThemeProvider. Hairline
  * still self-mounts on module load.
  */
-function KnobBridge({ children }: PropsWithChildren) {
+function KnobBridge({
+  children,
+  presetName,
+  overrides,
+  scaleId,
+}: PropsWithChildren<{ presetName?: string; overrides: Partial<Knobs>; scaleId: string }>) {
   const existingCtx = useContext(PresetContext);
 
-  const isCookieDisabled =
-    typeof process !== "undefined" && process.env?.COOKIE_POLICY?.toLowerCase() === "disabled";
-  const watchList = isCookieDisabled ? [] : getCookieWatchList();
-  const [cookie] = useCookies<string, Record<string, string>>(watchList);
-
-  const presetName = readPresetCookie(cookie as Record<string, string | undefined>);
-  const overrides = readOverridesCookie(cookie as Record<string, string | undefined>);
-
   const presetCtxValue = useMemo<PresetContextValue>(() => {
     const base = (presetName ? getPreset(presetName) : undefined) ?? defaultPreset;
     return {
       preset: { ...base, knobs: { ...base.knobs, ...overrides } },
       overrides,
+      presetName,
+      scaleId,
     };
-  }, [presetName, overrides]);
+  }, [presetName, overrides, scaleId]);
 
   const animationValue = presetCtxValue.preset.knobs.animation;
   useEffect(() => {
@@ -209,9 +242,12 @@ function KnobBridge({ children }: PropsWithChildren) {
     </>
   );
 
+  const theme = (existingCtx ?? presetCtxValue).preset.theme;
+  const themedTree = theme ? <Theme name={theme}>{tree}</Theme> : tree;
+
   if (existingCtx) {
-    return tree;
+    return themedTree;
   }
 
-  return <PresetContext.Provider value={presetCtxValue}>{tree}</PresetContext.Provider>;
+  return <PresetContext.Provider value={presetCtxValue}>{themedTree}</PresetContext.Provider>;
 }

package/src/theme/tileSizes.ts

@@ -30,13 +30,12 @@
  * here, restyled only through recipe inputs
  * (`setSizeRecipeInputs({ tile })` / `createDefaultThemeConfig({ recipeInputs:
  * { tile } })`). WHICH rung a surface shows is per-app (a prop, often
- * persisted per user). Tile gutters stay on the space knob and tile rounding
- * on the borderRadius knob — this module never emits a gap or a radius.
+ * persisted per user). Tile gutters are the spacing roles and tile rounding
+ * the borderRadius knob — this module never emits a gap or a radius.
  *
- * DENSITY (LC-76): density moves SPACE only. A compact density steps the
- * gutters between tiles (via the space knob) and must never re-rung the
- * ladder — tile magnitude is content scale, not chrome scale, so nothing
- * here reads the density knob.
+ * SCALE (LC-100): a preset's token scale moves the gutters (role px) and
+ * never re-rungs the ladder — tile magnitude is content scale, not chrome
+ * scale.
  */
 
 // ── Rungs ─────────────────────────────────────────────────────
@@ -239,7 +238,7 @@ export function tileRungFlexProps(stop: TileSizeStop): TileRungFlexProps {
 /**
  * Column count for a fixed-column tile grid (the ImageGrid / springboard
  * idiom): as many columns as fit at the rung's minWidth. `gutter` is the
- * inter-column gap (the space knob's value), never baked into the rung.
+ * inter-column gap (the gap role's px), never baked into the rung.
  *
  * The count is min-driven on purpose: adding a column to honor `maxWidth`
  * would, by construction of the fit, drop every cell below `minWidth`

package/src/theme/transitionProps.native.ts

@@ -1,3 +1,4 @@
+import type { MotionRole } from "./motion";
 import type { TransitionProp } from "tamagui";
 
 /**
@@ -8,8 +9,30 @@ import type { TransitionProp } from "tamagui";
  * animation `none` would put motion on every part that is meant to be still.
  * Native keeps omitting it until the driver has an instant token to pass.
  */
-export function transitionProps(transition: TransitionProp | undefined): {
+export function transitionProps(
+  role: MotionRole | TransitionProp | undefined,
+  extra: readonly string[] = [],
+): {
   transition?: TransitionProp;
+  animateOnly?: string[];
 } {
-  return transition ? { transition } : {};
+  const isRole = isMotionRole(role);
+  const transition = isRole ? role.transition : role;
+  if (transition === undefined) return {};
+  if (!isRole) return { transition };
+  const properties = [...role.animateOnly, ...extra];
+  return {
+    transition,
+    animateOnly: properties,
+  };
+}
+
+function isMotionRole(value: MotionRole | TransitionProp | undefined): value is MotionRole {
+  return (
+    typeof value === "object" &&
+    value !== null &&
+    "transition" in value &&
+    "animateOnly" in value &&
+    Array.isArray(value.animateOnly)
+  );
 }

package/src/theme/transitionProps.spec.ts

@@ -1,3 +1,5 @@
+import { motionFor } from "./motion";
+import { transitionProps as nativeTransitionProps } from "./transitionProps.native";
 import { describe, expect, it } from "vitest";
 import { transitionProps } from "./transitionProps";
 
@@ -12,3 +14,35 @@ describe("transitionProps (web)", () => {
     expect(transitionProps("bouncy")).toEqual({ transition: "bouncy" });
   });
 });
+
+describe("role property scopes", () => {
+  it("keeps the web transition key for a disabled role", () => {
+    expect(transitionProps(motionFor("none").control)).toEqual({
+      transition: undefined,
+      animateOnly: ["background-color", "border-color", "color", "opacity", "transform"],
+    });
+  });
+  it("hyphenates the control scope and additional properties", () => {
+    expect(transitionProps(motionFor("quick").control, ["maxHeight", "left"])).toEqual({
+      transition: "quick",
+      animateOnly: [
+        "background-color",
+        "border-color",
+        "color",
+        "opacity",
+        "transform",
+        "max-height",
+        "left",
+      ],
+    });
+  });
+  it("omits disabled native transitions and preserves camelCase scopes", () => {
+    expect(nativeTransitionProps(motionFor("none").control)).toEqual({});
+    expect(nativeTransitionProps(undefined)).toEqual({});
+    expect(nativeTransitionProps("quick")).toEqual({ transition: "quick" });
+    expect(nativeTransitionProps(motionFor("quick").control, ["maxHeight"])).toEqual({
+      transition: "quick",
+      animateOnly: ["backgroundColor", "borderColor", "color", "opacity", "transform", "maxHeight"],
+    });
+  });
+});

package/src/theme/transitionProps.ts

@@ -1,3 +1,4 @@
+import type { MotionRole } from "./motion";
 import type { TransitionProp } from "tamagui";
 
 /**
@@ -9,8 +10,31 @@ import type { TransitionProp } from "tamagui";
  * knob flips to any other stop (MPO-327). On web the key therefore stays, and
  * an undefined value paints no CSS transition. The native twin differs.
  */
-export function transitionProps(transition: TransitionProp | undefined): {
+export function transitionProps(
+  role: MotionRole | TransitionProp | undefined,
+  extra: readonly string[] = [],
+): {
   transition?: TransitionProp;
+  animateOnly?: string[];
 } {
-  return { transition };
+  const isRole = isMotionRole(role);
+  const transition = isRole ? role.transition : role;
+  if (!isRole) return { transition };
+  const properties = [...role.animateOnly, ...extra];
+  return {
+    transition,
+    animateOnly: properties.map((property) =>
+      property.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`),
+    ),
+  };
+}
+
+function isMotionRole(value: MotionRole | TransitionProp | undefined): value is MotionRole {
+  return (
+    typeof value === "object" &&
+    value !== null &&
+    "transition" in value &&
+    "animateOnly" in value &&
+    Array.isArray(value.animateOnly)
+  );
 }

package/src/theme/usePresetSwitch.native.spec.tsx

@@ -0,0 +1,68 @@
+import { act, cleanup, renderHook } from "@testing-library/react";
+import { createElement, type ReactNode } from "react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { PresetContext } from "./PresetContext";
+import { defaultPreset } from "./presets";
+import {
+  getPresetChoices,
+  getStoredPreset,
+  resetPresetChoicesForTests,
+  setStoredPreset,
+} from "./presetStore";
+import { usePresetSwitch } from "./usePresetSwitch.native";
+
+const { items } = vi.hoisted(() => ({ items: new Map<string, string>() }));
+vi.mock("@multiplatform.one/store", () => ({
+  storage: {
+    getItem: (key: string) => items.get(key) ?? null,
+    setItem: (key: string, value: string) => {
+      items.set(key, value);
+    },
+    removeItem: (key: string) => {
+      items.delete(key);
+    },
+  },
+}));
+beforeEach(() => {
+  items.clear();
+  resetPresetChoicesForTests();
+  setStoredPreset(undefined);
+});
+afterEach(cleanup);
+
+describe("native preset switching", () => {
+  it("switches the shared store, clears overrides and keeps callbacks stable", async () => {
+    const { result } = renderHook(() => usePresetSwitch());
+    expect(result.current.presetName).toBe("default");
+    const { applyPreset, choosePreset } = result.current;
+    act(() => setStoredPreset("dense", { elevation: "large" }));
+    expect(result.current.presetName).toBe("dense");
+    act(() => applyPreset("roomy"));
+    expect(result.current.presetName).toBe("roomy");
+    expect(getStoredPreset().overrides).toEqual({});
+    await vi.waitFor(() => expect(items.get("mp.preset")).toBe("roomy"));
+    expect(getPresetChoices()).toEqual({ users: {} });
+    expect(result.current.applyPreset).toBe(applyPreset);
+    expect(result.current.choosePreset).toBe(choosePreset);
+    act(() => choosePreset("paper", "a"));
+    expect(getPresetChoices()).toEqual({ users: { a: "paper" }, owner: "a" });
+    expect(result.current.presetName).toBe("paper");
+    act(() => choosePreset("studio"));
+    expect(getPresetChoices().device).toBe("studio");
+  });
+
+  it("prefers the provider's active name to storage", () => {
+    setStoredPreset("dense");
+    const { result } = renderHook(() => usePresetSwitch(), {
+      wrapper: ({ children }: { children: ReactNode }) =>
+        createElement(
+          PresetContext.Provider,
+          {
+            value: { preset: defaultPreset, presetName: "roomy" },
+          },
+          children,
+        ),
+    });
+    expect(result.current.presetName).toBe("roomy");
+  });
+});

package/src/theme/usePresetSwitch.native.ts

@@ -0,0 +1,32 @@
+import { useCallback, useSyncExternalStore } from "react";
+import { usePresetContext } from "./PresetContext";
+import {
+  getStoredPreset,
+  recordPresetChoice,
+  setStoredPreset,
+  subscribeStoredPreset,
+} from "./presetStore";
+
+export interface PresetSwitch {
+  /** The provider's active preset; "default" when none is stored. */
+  presetName: string;
+  /** Switch the active preset without recording anyone's choice. */
+  applyPreset(name: string): void;
+  /** Switch and record it as this user's choice (no user = this device's signed-out choice). */
+  choosePreset(name: string, userId?: string | null): void;
+}
+
+export function usePresetSwitch(): PresetSwitch {
+  const context = usePresetContext();
+  const stored = useSyncExternalStore(subscribeStoredPreset, getStoredPreset, getStoredPreset);
+  const presetName = context?.presetName || stored.presetName || "default";
+  const applyPreset = useCallback((name: string) => setStoredPreset(name), []);
+  const choosePreset = useCallback(
+    (name: string, userId?: string | null) => {
+      recordPresetChoice(name, userId);
+      applyPreset(name);
+    },
+    [applyPreset],
+  );
+  return { presetName, applyPreset, choosePreset };
+}

package/src/theme/usePresetSwitch.spec.tsx

@@ -0,0 +1,103 @@
+import { act, cleanup, renderHook } from "@testing-library/react";
+import { createElement, type ReactNode } from "react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { cookiePreset, writeOverridesCookie } from "./cookies";
+import { PresetContext } from "./PresetContext";
+import { defaultPreset } from "./presets";
+import { getPresetChoices, resetPresetChoicesForTests } from "./presetStore";
+import { usePresetSwitch } from "./usePresetSwitch";
+
+const { cookies, setCookie, removeCookie, items } = vi.hoisted(() => ({
+  cookies: {} as Record<string, string>,
+  setCookie: vi.fn(),
+  removeCookie: vi.fn(),
+  items: new Map<string, string>(),
+}));
+vi.mock("react-cookie", () => ({ useCookies: () => [cookies, setCookie, removeCookie] }));
+vi.mock("@multiplatform.one/store", () => ({
+  storage: {
+    getItem: (key: string) => items.get(key) ?? null,
+    setItem: (key: string, value: string) => {
+      items.set(key, value);
+    },
+    removeItem: (key: string) => {
+      items.delete(key);
+    },
+  },
+}));
+
+beforeEach(() => {
+  vi.stubEnv("COOKIE_POLICY", "enabled");
+  Object.keys(cookies).forEach((key) => delete cookies[key]);
+  items.clear();
+  setCookie.mockReset();
+  removeCookie.mockReset();
+  resetPresetChoicesForTests();
+});
+afterEach(() => {
+  cleanup();
+  vi.unstubAllEnvs();
+});
+
+describe("web preset switching", () => {
+  it("reads the provider before the cookie and defaults without either", () => {
+    const plain = renderHook(() => usePresetSwitch());
+    expect(plain.result.current.presetName).toBe("default");
+    cookies[cookiePreset] = "dense";
+    plain.rerender();
+    expect(plain.result.current.presetName).toBe("dense");
+    const provided = renderHook(() => usePresetSwitch(), {
+      wrapper: ({ children }: { children: ReactNode }) =>
+        createElement(
+          PresetContext.Provider,
+          {
+            value: { preset: defaultPreset, presetName: "roomy" },
+          },
+          children,
+        ),
+    });
+    expect(provided.result.current.presetName).toBe("roomy");
+    expect(setCookie).not.toHaveBeenCalled();
+    expect(removeCookie).not.toHaveBeenCalled();
+  });
+
+  it("writes only on demand, clearing every override without recording a choice", () => {
+    const { result, rerender } = renderHook(() => usePresetSwitch());
+    const { applyPreset, choosePreset } = result.current;
+    cookies[cookiePreset] = "paper";
+    rerender();
+    expect(result.current.applyPreset).toBe(applyPreset);
+    expect(result.current.choosePreset).toBe(choosePreset);
+    act(() => applyPreset("dense"));
+    expect(setCookie).toHaveBeenCalledExactlyOnceWith(cookiePreset, "dense", {
+      path: "/",
+      sameSite: "strict",
+      secure: window.location.protocol === "https:",
+      maxAge: 60 * 60 * 24 * 365,
+    });
+    expect(removeCookie).toHaveBeenCalledWith("mp.ov.0", { path: "/" });
+    for (const key of writeOverridesCookie({}).toRemove) {
+      expect(removeCookie).toHaveBeenCalledWith(key, { path: "/" });
+    }
+    expect(getPresetChoices()).toEqual({ users: {} });
+  });
+
+  it("records a choice before applying it", () => {
+    setCookie.mockImplementation(() => {
+      expect(getPresetChoices().users.a).toBe("ocean");
+    });
+    const { result } = renderHook(() => usePresetSwitch());
+    act(() => result.current.choosePreset("ocean", "a"));
+    expect(setCookie).toHaveBeenCalled();
+    expect(getPresetChoices().owner).toBe("a");
+  });
+
+  it("honours disabled cookies but still remembers an explicit choice", () => {
+    vi.stubEnv("COOKIE_POLICY", "DiSaBlEd");
+    const { result } = renderHook(() => usePresetSwitch());
+    act(() => result.current.choosePreset("paper"));
+    expect(setCookie).not.toHaveBeenCalled();
+    expect(removeCookie).not.toHaveBeenCalled();
+    expect(getPresetChoices().device).toBe("paper");
+  });
+});

package/src/theme/usePresetSwitch.ts

@@ -0,0 +1,54 @@
+import { isWeb } from "@multiplatform.one/platform";
+import { useCallback } from "react";
+import { useCookies } from "react-cookie";
+import { cookiePreset, readPresetCookie, writeOverridesCookie } from "./cookies";
+import { usePresetContext } from "./PresetContext";
+import { recordPresetChoice } from "./presetStore";
+
+export interface PresetSwitch {
+  /** The provider's active preset; "default" when none is stored. */
+  presetName: string;
+  /** Switch the active preset without recording anyone's choice. */
+  applyPreset(name: string): void;
+  /** Switch and record it as this user's choice (no user = this device's signed-out choice). */
+  choosePreset(name: string, userId?: string | null): void;
+}
+
+export function usePresetSwitch(): PresetSwitch {
+  const isCookieDisabled =
+    typeof process !== "undefined" && process.env?.COOKIE_POLICY?.toLowerCase() === "disabled";
+  const [cookies, setCookie, removeCookie] = useCookies<string, Record<string, string>>(
+    isCookieDisabled ? [] : [cookiePreset],
+  );
+  const context = usePresetContext();
+  const presetName = context?.presetName || readPresetCookie(cookies) || "default";
+
+  const applyPreset = useCallback(
+    (name: string) => {
+      if (isCookieDisabled || typeof window === "undefined") return;
+      setCookie(cookiePreset, name, {
+        path: "/",
+        sameSite: "strict",
+        secure: isWeb && window.location.protocol === "https:",
+        maxAge: 60 * 60 * 24 * 365,
+      });
+      const { toSet, toRemove } = writeOverridesCookie({});
+      for (const key of [...toSet.map(({ key }) => key), ...toRemove]) {
+        try {
+          removeCookie(key, { path: "/" });
+        } catch {}
+      }
+    },
+    [isCookieDisabled, setCookie, removeCookie],
+  );
+
+  const choosePreset = useCallback(
+    (name: string, userId?: string | null) => {
+      recordPresetChoice(name, userId);
+      applyPreset(name);
+    },
+    [applyPreset],
+  );
+
+  return { presetName, applyPreset, choosePreset };
+}

package/src/theme/useResolvedKnobs.hydration.spec.tsx

@@ -103,7 +103,7 @@ describe("responsive knob hydration", () => {
     await hydrate();
     expect(observed[0].height).toBe(serverHeight);
     expect(container.querySelector("button")).toBe(serverControl);
-    expect(container.querySelector("button")?.getAttribute("data-height")).toBe("48");
+    expect(container.querySelector("button")?.getAttribute("data-height")).toBe("44");
     expect(errors).toEqual([]);
   });
 
@@ -135,7 +135,7 @@ describe("responsive knob hydration", () => {
     host.web = false;
     host.touch = true;
     container.innerHTML = renderToString(<Fixture />);
-    expect(observed[0].height).toBe(48);
+    expect(observed[0].height).toBe(44);
     expect(errors).toEqual([]);
   });
 });