@mrmeg/expo-ui 0.27.1 → 0.29.0

package/dist/components/index.js

@@ -16,6 +16,7 @@ export * from "./Drawer.js";
 export * from "./DropdownMenu.js";
 export * from "./EmptyState.js";
 export * from "./ErrorBoundary.js";
+export * from "./Hydrated.js";
 export * from "./Icon.js";
 export * from "./InputOTP.js";
 export * from "./Item.js";
@@ -23,6 +24,7 @@ export * from "./KeyboardAvoidingView.js";
 export * from "./Label.js";
 export * from "./MaxWidthContainer.js";
 export * from "./Notification.js";
+export * from "./Screen.js";
 export * from "./Popover.js";
 export * from "./Progress.js";
 export * from "./RadioGroup.js";
@@ -38,6 +40,7 @@ export * from "./StyledText.js";
 export * from "./Switch.js";
 export * from "./Tabs.js";
 export * from "./TextInput.js";
+export * from "./ThemeSelector.js";
 export * from "./Toggle.js";
 export * from "./ToggleGroup.js";
 export * from "./Tooltip.js";

package/dist/components/keyboardDismiss.js

@@ -28,7 +28,7 @@
  * slop; release coordinates also enforce it when move delivery was missed.
  * Cancellation and multitouch drop the tap without rearming another finger.
  */
-import { useMemo, useRef } from "react";
+import { useLayoutEffect, useMemo, useRef } from "react";
 import { Platform } from "react-native";
 import { KeyboardController, useKeyboardState } from "./keyboardController";
 import { dismissKeyboardFocusedInput, hasKeyboardFocusedInput } from "./keyboardFocusRegistry.js";
@@ -164,8 +164,12 @@ function createTapTracker() {
  * for that.
  */
 export function useTextInputSurfaceResponder(focus) {
+    // Latest `focus` for the memoized handlers, synced after each commit (before
+    // any touch can be dispatched) instead of written during render.
     const focusRef = useRef(focus);
-    focusRef.current = focus;
+    useLayoutEffect(() => {
+        focusRef.current = focus;
+    });
     return useMemo(() => {
         const tap = createTapTracker();
         return {
@@ -219,7 +223,9 @@ export function resetAncestorClaimWarningForTests() {
  */
 export function useAncestorClaimWarning(inner, message) {
     const messageRef = useRef(message);
-    messageRef.current = message;
+    useLayoutEffect(() => {
+        messageRef.current = message;
+    });
     return useMemo(() => {
         if (!__DEV__ || Platform.OS !== "android")
             return inner;
@@ -249,7 +255,9 @@ export function useAncestorClaimWarning(inner, message) {
 export function useKeyboardDismissResponder() {
     const isVisible = useKeyboardState((state) => state.isVisible);
     const isVisibleRef = useRef(isVisible);
-    isVisibleRef.current = isVisible;
+    useLayoutEffect(() => {
+        isVisibleRef.current = isVisible;
+    });
     return useMemo(() => {
         if (Platform.OS === "web")
             return {};

package/dist/components/nativeTextField.android.js

@@ -34,7 +34,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Only `@expo/ui/jetpack-compose` and `@expo/ui/jetpack-compose/modifiers` are
  * imported, both in the peer's export map since SDK 56.
  */
-import { useImperativeHandle, useRef } from "react";
+import { useImperativeHandle, useRef, useState } from "react";
 import { BasicTextField, Box, Text, useNativeState, } from "@expo/ui/jetpack-compose";
 import { fillMaxWidth, onSizeChanged, padding, paddingAll, semantics, testID as testIDModifier, } from "@expo/ui/jetpack-compose/modifiers";
 // region Prop mapping (ported verbatim from @expo/ui's TextInput/utils.ts)
@@ -145,8 +145,10 @@ export function NativeTextField({ ref, value, onChangeText, placeholder, autoFoc
     const numberOfLines = numberOfLinesProp ?? rows;
     const keyboardType = keyboardTypeProp ?? inputModeToKeyboardType(inputMode);
     const returnKeyType = returnKeyTypeProp ?? enterKeyHintToReturnKeyType(enterKeyHint);
-    const initialFallbackRef = useRef(defaultValue ?? "");
-    const fallback = useNativeState(initialFallbackRef.current);
+    // Pinned to the first render's `defaultValue`, as an uncontrolled default
+    // is, whatever `useNativeState` does with a later argument.
+    const [initialFallback] = useState(defaultValue ?? "");
+    const fallback = useNativeState(initialFallback);
     const state = (value ?? fallback);
     const innerRef = useRef(null);
     const isFocusedRef = useRef(false);
@@ -176,12 +178,14 @@ export function NativeTextField({ ref, value, onChangeText, placeholder, autoFoc
     // Sticky for the life of the mounted field: revealing a password
     // (`secureTextEntry` -> false on the same element) must keep the password
     // keyboard options unchanged so the IME neither restarts nor starts
-    // suggesting/learning the now-visible text. Written during render like the
-    // wrapper's own `activeSecureRef`; a fresh mount starts from the prop.
-    const everSecureRef = useRef(!!secureTextEntry);
-    if (secureTextEntry)
-        everSecureRef.current = true;
-    const passwordField = everSecureRef.current;
+    // suggesting/learning the now-visible text. The latch is state adjusted
+    // during render (React re-runs this render before committing it), and the
+    // `||` makes the very render that turns secure on already read as a password
+    // field; a fresh mount starts from the prop.
+    const [everSecure, setEverSecure] = useState(!!secureTextEntry);
+    if (secureTextEntry && !everSecure)
+        setEverSecure(true);
+    const passwordField = everSecure || !!secureTextEntry;
     const mappedKeyboardType = keyboardType ? mapKeyboardType(keyboardType) : undefined;
     const resolvedKeyboardType = passwordField
         ? passwordKeyboardType(mappedKeyboardType)

package/dist/constants/colors.d.ts

@@ -1,4 +1,4 @@
-import { navigationFonts } from "./fonts";
+import { navigationFonts } from "./fonts.js";
 /**
  * Raw color palette - use semantic colors in components instead
  *
@@ -38,10 +38,36 @@ declare const palette: {
     readonly red500: "#EF4444";
     readonly red400: "#F87171";
 };
+/**
+ * Extra color tokens an app declares for itself, so it stops keeping a side
+ * palette. Empty here; an app augments it once and the keys become part of
+ * `ThemeColors` everywhere — `setColors`, `ThemeColorScope`,
+ * `useTheme().theme.colors`, `getThemeCssVariables`:
+ *
+ * ```ts
+ * declare module "@mrmeg/expo-ui/constants" {
+ *   interface ThemeColorExtensions {
+ *     brandGold: string;
+ *   }
+ * }
+ * useThemeStore.getState().setColors({
+ *   light: { brandGold: "#c9a227" },
+ *   dark: { brandGold: "#ffe066" },
+ * });
+ * ```
+ *
+ * The package ships no value for an extension key: provide it in both schemes
+ * or the token is `undefined` at runtime in the scheme that lacks it. On web
+ * the built-in tokens are `var(--c-*)` references and extension values are
+ * literals per scheme, so with any override `theme.colors` is a new object
+ * when the scheme changes (the identity caveat every override already has).
+ */
+export interface ThemeColorExtensions {
+}
 /**
  * Semantic color interface - what colors mean in the UI
  */
-export interface ThemeColors {
+export interface ThemeColors extends ThemeColorExtensions {
     surfaceSunken: string;
     background: string;
     foreground: string;
@@ -86,14 +112,21 @@ export interface Colors {
     light: Theme;
     dark: Theme;
 }
+/**
+ * The package's own tokens: `ThemeColors` minus whatever an app added through
+ * `ThemeColorExtensions`. The default palettes, the CSS-variable table and
+ * `resolveRawColor` are typed on this, because the package has no value for an
+ * extension key.
+ */
+export type ThemeColorTokens = Omit<ThemeColors, keyof ThemeColorExtensions>;
 /**
  * Raw hex/rgba theme colors, always literal strings on every platform. Use
  * these for sinks that cannot take CSS `var()` — e.g. `<meta name="theme-color">`,
  * color parsing/math — and for generating the CSS variable definitions below.
  */
 export declare const rawThemeColors: {
-    light: ThemeColors;
-    dark: ThemeColors;
+    light: ThemeColorTokens;
+    dark: ThemeColorTokens;
 };
 /**
  * Resolves a theme color value to a literal color string. On web, theme
@@ -114,7 +147,9 @@ export declare function resolveRawColor(color: string, scheme: "light" | "dark")
  * paint before any theme script stamps `data-theme`.
  *
  * Apps that override brand colors can pass those overrides so the emitted
- * CSS matches their theme.
+ * CSS matches their theme. Extension tokens (`ThemeColorExtensions`) present
+ * in the overrides get a variable too, per scheme that names them; the
+ * package has no default to fall back to for those.
  */
 export declare function getThemeCssVariables(overrides?: {
     light?: Partial<ThemeColors>;

package/dist/constants/colors.js

@@ -139,6 +139,7 @@ const themeColorTokens = Object.keys(lightTheme.colors);
 function cssVarName(token) {
     return `--c-${token.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`)}`;
 }
+const themeColorTokenSet = new Set(themeColorTokens);
 // Reverse lookup: "var(--c-surface-sunken)" → "surfaceSunken"
 const varToToken = new Map(themeColorTokens.map((token) => [`var(${cssVarName(token)})`, token]));
 /**
@@ -176,17 +177,27 @@ function toRgbTriplet(value) {
  * paint before any theme script stamps `data-theme`.
  *
  * Apps that override brand colors can pass those overrides so the emitted
- * CSS matches their theme.
+ * CSS matches their theme. Extension tokens (`ThemeColorExtensions`) present
+ * in the overrides get a variable too, per scheme that names them; the
+ * package has no default to fall back to for those.
  */
 export function getThemeCssVariables(overrides) {
-    const declarations = (scheme) => themeColorTokens
-        .map((token) => {
-        const value = overrides?.[scheme]?.[token] ?? rawThemeColors[scheme][token];
+    const extensionTokens = [
+        ...Object.keys(overrides?.light ?? {}),
+        ...Object.keys(overrides?.dark ?? {}),
+    ].filter((token, index, all) => !themeColorTokenSet.has(token) && all.indexOf(token) === index);
+    const declaration = (token, value) => {
         const name = cssVarName(token);
         const rgb = toRgbTriplet(value);
         return `${name}: ${value};${rgb ? ` ${name}-rgb: ${rgb};` : ""}`;
-    })
-        .join("\n      ");
+    };
+    const declarations = (scheme) => [
+        ...themeColorTokens.map((token) => declaration(token, overrides?.[scheme]?.[token] ?? rawThemeColors[scheme][token])),
+        ...extensionTokens.flatMap((token) => {
+            const value = overrides?.[scheme]?.[token];
+            return typeof value === "string" ? [declaration(token, value)] : [];
+        }),
+    ].join("\n      ");
     return `
     :root {
       ${declarations("light")}
@@ -209,10 +220,17 @@ export function getThemeCssVariables(overrides) {
 // values (no CSS engine). The `navigation` maps stay literal on both
 // platforms: @react-navigation internals color-parse their theme values.
 const webVarColors = Object.fromEntries(themeColorTokens.map((token) => [token, `var(${cssVarName(token)})`]));
+// Web: both schemes hold the same `var(--c-*)` references, so they share ONE
+// `colors` object. A scheme switch then keeps `theme.colors` identical, so
+// anything memoized on it keeps its result; the CSS variables do the
+// re-theming. `colors.light` and `colors.dark` stay distinct objects:
+// `dark`, `navigation`, and `fonts` differ per scheme.
+// The base themes carry the package tokens only; extension keys (typed on
+// `ThemeColors` once an app augments it) arrive through `setColors`.
 export const colors = Platform.OS === "web"
     ? {
-        light: { ...lightTheme, colors: { ...webVarColors } },
-        dark: { ...darkTheme, colors: { ...webVarColors } },
+        light: { ...lightTheme, colors: webVarColors },
+        dark: { ...darkTheme, colors: webVarColors },
     }
     : {
         light: lightTheme,

package/dist/constants/fonts.d.ts

@@ -34,8 +34,39 @@ export type FontFamilyMap = Record<FontVariant, Record<FontFamilyWeight, string>
  * A per-variant override group. Partial per weight: missing weights fall back
  * to the group's own `regular` (not the package default), so an app that
  * registers only Regular + Medium never leaks a package face into its brand.
+ *
+ * `italic` maps weights to real italic faces. An italic weight that is missing
+ * falls back to the group's italic `regular`; a group with no `italic` map
+ * renders italic as `fontStyle: "italic"` on the upright face (the OS or
+ * browser synthesizes the slant).
+ */
+export type FontFamilyOverride = Partial<Record<FontFamilyWeight, string>> & {
+    italic?: Partial<Record<FontFamilyWeight, string>>;
+};
+/**
+ * The package's serif. `"georgia"` (default) is the single system face on
+ * every platform; `"newsreader"` is a real serif family — four weights and a
+ * 400 italic — that `useResources({ serif: "newsreader" })` loads and turns on.
+ * Nothing about Newsreader ships to an app that keeps the default.
  */
-export type FontFamilyOverride = Partial<Record<FontFamilyWeight, string>>;
+export type SerifPreset = "georgia" | "newsreader";
+/**
+ * The Newsreader faces the `"newsreader"` preset resolves to. Native names
+ * match `@expo-google-fonts/newsreader`'s per-weight exports, which the app
+ * registers through `useResources({ serif: "newsreader", serifFonts })`; web
+ * is one stack the injected Google Fonts stylesheet serves, weight numeric.
+ */
+export declare const newsreaderFamilies: {
+    readonly web: "\"Newsreader\", Georgia, 'Times New Roman', serif";
+    readonly native: {
+        light: string;
+        regular: string;
+        medium: string;
+        semibold: string;
+        bold: string;
+    };
+    readonly nativeItalic: "Newsreader_400Regular_Italic";
+};
 /**
  * Font overrides a host app can inject to brand the package.
  *
@@ -65,6 +96,14 @@ export type ResolvedFontStyle = {
     fontFamily: string;
     /** Present only under the `"numeric"` weight strategy (web). */
     fontWeight?: "400" | "500" | "600" | "700";
+    /** Present only when italic was asked for and no italic face exists. */
+    fontStyle?: "italic";
+};
+export type FontStyleOptions = {
+    /** Render italic: a real italic face when one exists, else a synthesized slant. */
+    italic?: boolean;
+    /** The active serif preset (`useThemeStore().serifPreset`); defaults to Georgia. */
+    serifPreset?: SerifPreset;
 };
 /**
  * Resolve the `fontFamily` (+ optional numeric `fontWeight`) for a variant and
@@ -82,7 +121,7 @@ export type ResolvedFontStyle = {
  * own family per weight on web too, and must declare
  * `webWeightStrategy: "family"` to avoid a second synthesised layer of bold.
  */
-export declare function resolveFontStyle(overrides: FontOverrides, variant: FontVariant, weight: FontFamilyWeight): ResolvedFontStyle;
+export declare function resolveFontStyle(overrides: FontOverrides, variant: FontVariant, weight: FontFamilyWeight, options?: FontStyleOptions): ResolvedFontStyle;
 /**
  * Typography scale — Tailwind-matching sizes for consistent text hierarchy.
  * Components can progressively adopt these tokens.

package/dist/constants/fonts.js

@@ -79,6 +79,23 @@ const sansSerifFamilies = isWebRuntime
             semibold: "sans-serif",
             bold: "sans-serif",
         };
+/**
+ * The Newsreader faces the `"newsreader"` preset resolves to. Native names
+ * match `@expo-google-fonts/newsreader`'s per-weight exports, which the app
+ * registers through `useResources({ serif: "newsreader", serifFonts })`; web
+ * is one stack the injected Google Fonts stylesheet serves, weight numeric.
+ */
+export const newsreaderFamilies = {
+    web: "\"Newsreader\", Georgia, 'Times New Roman', serif",
+    native: {
+        light: "Newsreader_400Regular",
+        regular: "Newsreader_400Regular",
+        medium: "Newsreader_500Medium",
+        semibold: "Newsreader_600SemiBold",
+        bold: "Newsreader_700Bold",
+    },
+    nativeItalic: "Newsreader_400Regular_Italic",
+};
 /** The package's built-in families. Override per-app via `setFonts`. */
 export const fontFamilies = {
     serif: serifFamilies,
@@ -120,18 +137,40 @@ const WEB_FONT_WEIGHTS = {
  * own family per weight on web too, and must declare
  * `webWeightStrategy: "family"` to avoid a second synthesised layer of bold.
  */
-export function resolveFontStyle(overrides, variant, weight) {
-    const defaults = fontFamilies[variant];
+export function resolveFontStyle(overrides, variant, weight, options = {}) {
+    const { italic = false, serifPreset = "georgia" } = options;
+    const isWeb = Platform.OS === "web";
     const overrideGroup = overrides.families?.[variant];
-    const fontFamily = overrideGroup
+    // Precedence for the upright face: app override → serif preset → package default.
+    const preset = variant === "serif" && serifPreset === "newsreader" && !overrideGroup;
+    const defaults = preset
+        ? isWeb
+            ? { light: newsreaderFamilies.web, regular: newsreaderFamilies.web, medium: newsreaderFamilies.web, semibold: newsreaderFamilies.web, bold: newsreaderFamilies.web }
+            : newsreaderFamilies.native
+        : fontFamilies[variant];
+    const upright = overrideGroup
         ? overrideGroup[weight] ?? overrideGroup.regular ?? defaults[weight]
         : defaults[weight];
-    const strategy = Platform.OS === "web"
+    // A real italic face: the app's for this weight, else its italic regular,
+    // else the preset's native italic file. Web preset italics ride on
+    // `fontStyle` (the stylesheet serves the 400 italic under one family).
+    const italicFace = !italic
+        ? undefined
+        : overrideGroup?.italic
+            ? overrideGroup.italic[weight] ?? overrideGroup.italic.regular
+            : preset && !isWeb
+                ? newsreaderFamilies.nativeItalic
+                : undefined;
+    const fontFamily = italicFace ?? upright;
+    const synthesized = italic && italicFace === undefined;
+    const strategy = isWeb
         ? overrides.webWeightStrategy ?? defaultWebWeightStrategy
         : "family";
-    return strategy === "numeric"
-        ? { fontFamily, fontWeight: WEB_FONT_WEIGHTS[weight] }
-        : { fontFamily };
+    return {
+        fontFamily,
+        ...(strategy === "numeric" && { fontWeight: WEB_FONT_WEIGHTS[weight] }),
+        ...(synthesized && { fontStyle: "italic" }),
+    };
 }
 export const typography = {
     xs: { fontSize: 12, lineHeight: 16 },

package/dist/constants/index.d.ts

@@ -1,4 +1,5 @@
-export * from "./colors";
-export * from "./fonts";
-export * from "./motion";
-export * from "./spacing";
+export * from "./colors.js";
+export * from "./fonts.js";
+export * from "./motion.js";
+export * from "./spacing.js";
+export * from "./interaction.js";

package/dist/constants/index.js

@@ -2,3 +2,4 @@ export * from "./colors.js";
 export * from "./fonts.js";
 export * from "./motion.js";
 export * from "./spacing.js";
+export * from "./interaction.js";

package/dist/constants/interaction.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Interaction state tokens.
+ *
+ * One opacity for "pressed", one for "disabled", and the two press scales the
+ * kit's pressables share, so a Button, a pressable Card and a row read as the
+ * same system under the finger. Components layer these after their base
+ * styles; a caller `style` still wins.
+ */
+export declare const interaction: {
+    /** Opacity of a filled surface while pressed. */
+    readonly pressedOpacity: 0.85;
+    /** Opacity of a disabled control and its label. */
+    readonly disabledOpacity: 0.5;
+    /** Press scale for large surfaces (Button, Card, Item). */
+    readonly pressedScale: 0.97;
+    /** Press scale for small controls (Switch, Checkbox, Toggle). */
+    readonly controlPressedScale: 0.92;
+};

package/dist/constants/interaction.js

@@ -0,0 +1,18 @@
+/**
+ * Interaction state tokens.
+ *
+ * One opacity for "pressed", one for "disabled", and the two press scales the
+ * kit's pressables share, so a Button, a pressable Card and a row read as the
+ * same system under the finger. Components layer these after their base
+ * styles; a caller `style` still wins.
+ */
+export const interaction = {
+    /** Opacity of a filled surface while pressed. */
+    pressedOpacity: 0.85,
+    /** Opacity of a disabled control and its label. */
+    disabledOpacity: 0.5,
+    /** Press scale for large surfaces (Button, Card, Item). */
+    pressedScale: 0.97,
+    /** Press scale for small controls (Switch, Checkbox, Toggle). */
+    controlPressedScale: 0.92,
+};

package/dist/constants/spacing.d.ts

@@ -30,6 +30,7 @@ export declare const spacing: {
     readonly cardPadding: 16;
     readonly dialogPadding: 20;
     readonly touchTarget: 44;
+    readonly minTarget: 24;
     readonly buttonPadding: 10;
     readonly inputPadding: 10;
     readonly listItemSpacing: 8;
@@ -47,5 +48,5 @@ export declare const spacing: {
     readonly iconLg: 32;
     readonly iconXl: 48;
 };
-export declare const base: 8, xxs: 2, xs: 4, sm: 8, smd: 12, md: 16, mdl: 20, lg: 24, xl: 32, xxl: 48, xxxl: 64, gutter: 16, gutterVertical: 24, screenPadding: 16, sectionSpacing: 24, rowPaddingY: 10, rowPaddingX: 16, rowGap: 12, rowMinHeight: 40, formRowMinHeight: 32, cardPadding: 16, dialogPadding: 20, touchTarget: 44, buttonPadding: 10, inputPadding: 10, listItemSpacing: 8, radiusNone: 0, radiusXs: 4, radiusSm: 8, radiusMd: 10, radiusLg: 14, radiusXl: 18, radius2xl: 24, radiusFull: 9999, iconXs: 12, iconSm: 16, iconMd: 24, iconLg: 32, iconXl: 48;
+export declare const base: 8, xxs: 2, xs: 4, sm: 8, smd: 12, md: 16, mdl: 20, lg: 24, xl: 32, xxl: 48, xxxl: 64, gutter: 16, gutterVertical: 24, screenPadding: 16, sectionSpacing: 24, rowPaddingY: 10, rowPaddingX: 16, rowGap: 12, rowMinHeight: 40, formRowMinHeight: 32, cardPadding: 16, dialogPadding: 20, touchTarget: 44, minTarget: 24, buttonPadding: 10, inputPadding: 10, listItemSpacing: 8, radiusNone: 0, radiusXs: 4, radiusSm: 8, radiusMd: 10, radiusLg: 14, radiusXl: 18, radius2xl: 24, radiusFull: 9999, iconXs: 12, iconSm: 16, iconMd: 24, iconLg: 32, iconXl: 48;
 export declare const space: (multiplier: number) => number;

package/dist/constants/spacing.js

@@ -34,6 +34,7 @@ export const spacing = {
     cardPadding: 16, // Default card / stat card padding
     dialogPadding: 20, // Default dialog / alert dialog padding
     touchTarget: 44, // Minimum comfortable native touch target
+    minTarget: 24, // Smallest pointer target the kit draws on web (WCAG 2.5.8 minimum)
     // Component-specific
     buttonPadding: 10, // Default button padding
     inputPadding: 10, // Default input padding
@@ -55,6 +56,6 @@ export const spacing = {
     iconXl: 48,
 };
 // Export individual constants for convenience
-export const { base, xxs, xs, sm, smd, md, mdl, lg, xl, xxl, xxxl, gutter, gutterVertical, screenPadding, sectionSpacing, rowPaddingY, rowPaddingX, rowGap, rowMinHeight, formRowMinHeight, cardPadding, dialogPadding, touchTarget, buttonPadding, inputPadding, listItemSpacing, radiusNone, radiusXs, radiusSm, radiusMd, radiusLg, radiusXl, radius2xl, radiusFull, iconXs, iconSm, iconMd, iconLg, iconXl, } = spacing;
+export const { base, xxs, xs, sm, smd, md, mdl, lg, xl, xxl, xxxl, gutter, gutterVertical, screenPadding, sectionSpacing, rowPaddingY, rowPaddingX, rowGap, rowMinHeight, formRowMinHeight, cardPadding, dialogPadding, touchTarget, minTarget, buttonPadding, inputPadding, listItemSpacing, radiusNone, radiusXs, radiusSm, radiusMd, radiusLg, radiusXl, radius2xl, radiusFull, iconXs, iconSm, iconMd, iconLg, iconXl, } = spacing;
 // Helper function to multiply base spacing
 export const space = (multiplier) => spacing.base * multiplier;