@webority/mobile-ui 0.88.0 → 0.89.0

package/lib/typescript/commonjs/components/ProgressBar/ProgressBar.d.ts

@@ -1,7 +1,7 @@
 import type { ReactNode } from "react";
 import type { View as RNView, StyleProp, ViewStyle } from "react-native";
 import type { GradientDefinition } from "../../theme/types";
-export type ProgressBarTone = "primary" | "success" | "warning" | "error";
+export type ProgressBarTone = "primary" | "success" | "warning" | "danger";
 export interface ProgressBarSegment {
     /** Fraction of the full track (0–1). */
     value: number;

package/lib/typescript/commonjs/components/ProgressRing/ProgressRing.d.ts

@@ -12,26 +12,25 @@
  */
 import type React from "react";
 import type { View as RNView, StyleProp, ViewStyle } from "react-native";
-export type ProgressRingTone = "primary" | "success" | "warning" | "error";
+export type ProgressRingTone = "primary" | "success" | "warning" | "danger";
 export interface ProgressRingProps {
     /** Fraction of the ring filled, 0 to 1, clamped. Default `0`. */
     progress?: number;
     /** Outer diameter in pixels. Default `48`. */
     size?: number;
-    /** Stroke width of the track and the fill. Default `theme.components.progressRing.strokeWidth`, then `4`. */
+    /** Stroke width of the track and the fill. Default 4. */
     strokeWidth?: number;
     /** Fill colour when no `ringColor` is set. Default `'primary'`. */
     tone?: ProgressRingTone;
-    /** Track colour override. Default `theme.components.progressRing.trackColor`, then `theme.colors.surface.disabled`. */
+    /** Track colour override. Default the surface-disabled colour. */
     trackColor?: string;
     /** Fill colour override; wins over `tone`. */
     ringColor?: string;
     /**
-     * Colour the fill by how far it has got: `error` below the first stop,
+     * Colour the fill by how far it has got: `danger` below the first stop,
      * `warning` to the second, `success` from there (stops default to a third
-     * and two thirds, `theme.components.progressRing.colorStops`). The colour
-     * rides the same animated value as the arc, so it flips exactly when the
-     * sweep crosses a stop. Ignored when `ringColor` is set. Default `false`.
+     * and two thirds). The colour rides the same animated value as the arc,
+     * so it flips exactly when the sweep crosses a stop. Ignored when `ringColor` is set. Default `false`.
      */
     colorByProgress?: boolean;
     /**

package/lib/typescript/commonjs/components/Radio/Radio.d.ts

@@ -2,7 +2,7 @@ import type { ReactNode } from "react";
 import type { PressableProps, View as RNView, StyleProp, TextStyle, ViewStyle } from "react-native";
 import type { HapticType } from "../../utils/hapticUtils";
 export type RadioSize = "sm" | "md" | "lg";
-export type RadioTone = "primary" | "success" | "warning" | "error";
+export type RadioTone = "primary" | "success" | "warning" | "danger";
 export type RadioValue = string | number;
 export interface RadioGroupContextValue {
     selectedValue: RadioValue | undefined;

package/lib/typescript/commonjs/components/SearchBar/SearchBar.d.ts

@@ -31,7 +31,7 @@ export interface SearchBarProps extends Omit<TextInputProps, "style" | "value" |
     size?: SearchBarSize;
     variant?: SearchBarVariant;
     /**
-     * Corner radius. Default: the theme's `components.searchBar.<size>.radius`
+     * Corner radius. Default: the theme's `components["search-bar"].<size>.radius`
      * (the pill). Ignored on `underline`, which is always square.
      */
     borderRadius?: number;

package/lib/typescript/commonjs/components/SegmentedControl/SegmentedControl.d.ts

@@ -14,7 +14,7 @@
  */
 import type { ReactNode } from "react";
 import type { View as RNView, StyleProp, TextStyle, ViewStyle } from "react-native";
-import type { RadiusScale } from "../../theme/types";
+import type { RadiusName } from "../../theme/types";
 import type { HapticType } from "../../utils";
 import type { SlotIcon, SlotIconState } from "../AppIcon/slotIcon";
 export type SegmentedControlSize = "sm" | "md" | "lg";
@@ -23,7 +23,7 @@ export type SegmentedControlTone = "primary" | "neutral";
 export type SegmentedControlVariant = "underline" | "pills" | "segmented";
 export type SegmentValue = string | number;
 /** A theme radius token or a pixel number. */
-export type SegmentedControlRadius = keyof RadiusScale | number;
+export type SegmentedControlRadius = RadiusName | number;
 /** What a segment knows about itself when it draws its icon. */
 export interface SegmentIconState extends SlotIconState {
     selected: boolean;
@@ -71,8 +71,7 @@ export interface SegmentedControlProps {
      * track (the thumb nests inside with the track's corner minus the inset),
      * the pill, and the ends of the underline. Unset, each variant keeps its
      * own default: `md` track with an `sm` thumb, a `pill`-radius pill, a square
-     * underline. The theme's `segmentedControl.radius` token is the app-wide
-     * default under this prop.
+     * underline.
      */
     radius?: SegmentedControlRadius;
     /**

package/lib/typescript/commonjs/components/Select/Select.d.ts

@@ -63,9 +63,9 @@ interface BaseSelectProps<T = SelectOption> {
      */
     title?: string;
     /**
-     * Appends the required marker to the label. Marker text + colour come from
-     * `theme.components.field.{requiredMarker,requiredMarkerColor}` (default
-     * `'*'` in `colors.error`).
+     * Appends the required marker to the label. Marker text comes from
+     * `theme.settings.components.field.requiredMarker` (default `'*'` in
+     * `colors.danger`).
      */
     required?: boolean;
     /**
@@ -92,7 +92,7 @@ interface BaseSelectProps<T = SelectOption> {
     size?: SelectSize;
     /**
      * Controls the trigger field's fill + border treatment. Resolution chain:
-     * caller prop → `components.select.defaultVariant` → `components.field.defaultVariant`
+     * caller prop → `settings.components.select.defaultVariant` → `settings.components.field.defaultVariant`
      * → 'outlined'.
      */
     variant?: SelectVariant;
@@ -109,7 +109,7 @@ interface BaseSelectProps<T = SelectOption> {
      * node if you want motion. Mirrors Input's `rightIcon`, same contract as `leftIcon`.
      */
     rightIcon?: SlotIcon;
-    /** Colour of the built-in chevron. Ignored when `rightIcon` is set. Default: `colors.text.tertiary` (`text.disabled` when disabled). */
+    /** Colour of the built-in chevron. Ignored when `rightIcon` is set. Default: `colors["text-subtle"]` (`text-disabled` when disabled). */
     chevronColor?: string;
     /** Size of the built-in chevron in pixels. Ignored when `rightIcon` is set. Default: the field size's `icon`. */
     chevronSize?: number;

package/lib/typescript/commonjs/components/Skeleton/Skeleton.d.ts

@@ -24,7 +24,7 @@
  */
 import type React from "react";
 import type { StyleProp, ViewStyle } from "react-native";
-import type { RadiusScale } from "../../theme/types";
+import type { RadiusName } from "../../theme/types";
 import type { SkeletonColors } from "./SkeletonProvider";
 /** Animation pattern. */
 export type SkeletonVariant = "shimmer" | "pulse" | "none";
@@ -33,7 +33,7 @@ export type SkeletonSpeed = "slow" | "normal" | "fast";
 /** Pre-defined shape archetype. Plays nicely with `width`/`height` overrides. */
 export type SkeletonShape = "rect" | "rounded" | "circle" | "text";
 /** `theme.radius` token name or a literal pixel value. */
-export type SkeletonRadius = keyof Pick<RadiusScale, "sm" | "md" | "lg" | "xl" | "pill"> | number;
+export type SkeletonRadius = Extract<RadiusName, "sm" | "md" | "lg" | "xl" | "pill"> | number;
 export type SkeletonWidth = number | "auto" | "100%" | `${number}%`;
 export interface SkeletonProps {
     /**

package/lib/typescript/commonjs/components/SlideToConfirm/SlideToConfirm.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import type { View as RNView, StyleProp, TextStyle, ViewStyle } from "react-native";
 import type { HapticType } from "../../utils";
-export type SlideToConfirmTone = "primary" | "success" | "warning" | "error";
+export type SlideToConfirmTone = "primary" | "success" | "warning" | "danger";
 export type SlideToConfirmSize = "sm" | "md" | "lg";
 export interface SlideToConfirmProps {
     /** Fired once the handle is dragged past the threshold. */

package/lib/typescript/commonjs/components/Slider/Slider.d.ts

@@ -1,7 +1,7 @@
 import type React from "react";
 import type { View as RNView, StyleProp, TextStyle, ViewStyle } from "react-native";
 import type { HapticType } from "../../utils";
-export type SliderTone = "primary" | "success" | "warning" | "error";
+export type SliderTone = "primary" | "success" | "warning" | "danger";
 export type SliderSize = "sm" | "md" | "lg";
 /**
  * Visual style of the slider.
@@ -22,10 +22,9 @@ interface SliderCommonProps {
     tone?: SliderTone;
     size?: SliderSize;
     /**
-     * Visual style. Default `'default'`. The theme's per-size `trackHeight` /
-     * `thumbDiameter` tokens resize the `default` variant only: the other
-     * variants carry their own proportions, which a single pair of numbers
-     * would break.
+     * Visual style. Default `'default'`. The library's per-size track-height and
+     * thumb-diameter tokens size the `default` variant only: the other variants
+     * carry their own proportions, which a single pair of numbers would break.
      */
     variant?: SliderVariant;
     /**
@@ -70,13 +69,13 @@ interface SliderCommonProps {
     labelOpacity?: number;
     testID?: string;
 }
-interface SliderSingleProps extends SliderCommonProps {
+export interface SliderSingleProps extends SliderCommonProps {
     range?: false;
     value?: number;
     defaultValue?: number;
     onChange?: (value: number) => void;
 }
-interface SliderRangeProps extends SliderCommonProps {
+export interface SliderRangeProps extends SliderCommonProps {
     range: true;
     value?: [number, number];
     defaultValue?: [number, number];

package/lib/typescript/commonjs/components/Slider/valueText.d.ts

@@ -1,7 +1,7 @@
 import type { StyleProp, TextStyle } from "react-native";
 import type { Theme } from "../../theme/types";
 /** The ink drawn on a slider's tone-coloured value bubble. */
-export declare const sliderToneInk: (theme: Theme, tone: "primary" | "success" | "warning" | "error") => string;
+export declare const sliderToneInk: (theme: Theme, tone: "primary" | "success" | "warning" | "danger") => string;
 /**
  * Shared between AmountSlider and SliderField: the number that counts to its
  * new value, and the edit-in-a-box logic that keeps a half-typed entry from

package/lib/typescript/commonjs/components/Sparkline/Sparkline.d.ts

@@ -8,7 +8,7 @@
  * end, low and high values, so nothing rests on the line's colour.
  */
 import type { View as RNView, StyleProp, ViewStyle } from "react-native";
-export type SparklineTone = "primary" | "success" | "warning" | "error" | "info" | "neutral";
+export type SparklineTone = "primary" | "success" | "warning" | "danger" | "info" | "neutral";
 export interface SparklineProps {
     /** The series, oldest first. Values that are not finite numbers are dropped. */
     data: ReadonlyArray<number>;

package/lib/typescript/commonjs/components/StatusBadge/StatusBadge.d.ts

@@ -2,11 +2,10 @@ import type React from "react";
 import type { View as RNView, StyleProp, TextStyle, ViewStyle } from "react-native";
 /**
  * The same semantic vocabulary Chip and Badge use, and the web library's
- * `AppStatusBadge`. `danger` is the web name for `error`, the mobile theme's
- * name, so a status mapped once for both platforms draws the same here.
+ * `AppStatusBadge`.
  * A semantic name survives a palette change; a colour name does not.
  */
-export type StatusBadgeTone = "success" | "warning" | "error" | "danger" | "info" | "primary" | "neutral";
+export type StatusBadgeTone = "success" | "warning" | "danger" | "info" | "primary" | "neutral";
 /**
  * `soft` is the default: the tone at a light tint behind text in the tone,
  * with a border in the tone so the pill has an edge on any surface. `outline`

package/lib/typescript/commonjs/components/Swipeable/Swipeable.d.ts

@@ -9,7 +9,7 @@
  *
  * <Swipeable
  *   leftActions={[{ key: 'archive', label: 'Archive', tone: 'success', onPress: handleArchive }]}
- *   rightActions={[{ key: 'delete', label: 'Delete', tone: 'error', onPress: handleDelete }]}
+ *   rightActions={[{ key: 'delete', label: 'Delete', tone: 'danger', onPress: handleDelete }]}
  * >
  *   <ListItem title="Inbox item" />
  * </Swipeable>
@@ -17,7 +17,7 @@
 import type React from "react";
 import type { StyleProp, ViewStyle } from "react-native";
 import type { HapticType } from "../../utils";
-export type SwipeableTone = "primary" | "success" | "warning" | "error" | "neutral";
+export type SwipeableTone = "primary" | "success" | "warning" | "danger" | "neutral";
 export interface SwipeableAction {
     key: string;
     label: string;

package/lib/typescript/commonjs/components/Switch/Switch.d.ts

@@ -2,7 +2,7 @@ import type { ReactNode } from "react";
 import type { PressableProps, View as RNView, StyleProp, ViewStyle } from "react-native";
 import type { HapticType } from "../../utils/hapticUtils";
 export type SwitchSize = "sm" | "md" | "lg";
-export type SwitchTone = "primary" | "success" | "warning" | "error";
+export type SwitchTone = "primary" | "success" | "warning" | "danger";
 /** `inline`: the control, then the text beside it. `row`: the text on the left, the control on the right, the whole row pressable. */
 export type SwitchLayout = "inline" | "row";
 export interface SwitchProps extends Omit<PressableProps, "style" | "children" | "onPress"> {

package/lib/typescript/commonjs/components/Tabs/Tabs.d.ts

@@ -9,20 +9,20 @@
  * because RN's native driver does not support layout props.
  *
  * `segmented` borrows SegmentedControl's look (filled track, sliding thumb)
- * for tabs that sit inside content, reading that control's size table and
- * theme overrides so the two stay in step; the inset is the tabs' own token
- * (tabs.trackPadding, 4). It is a look, not a semantic change: the roles
- * stay tablist/tab, and a value choice is still SegmentedControl.
+ * for tabs that sit inside content, reading that control's size table so the
+ * two stay in step; the inset is the tabs' own token (`track-padding`, 4). It
+ * is a look, not a semantic change: the roles stay tablist/tab, and a value
+ * choice is still SegmentedControl.
  */
 import type { View as RNView, StyleProp, TextStyle, ViewStyle } from "react-native";
 import { Animated } from "react-native";
-import type { RadiusScale } from "../../theme/types";
+import type { RadiusName } from "../../theme/types";
 import type { HapticType } from "../../utils";
 import type { SlotIcon, SlotIconState } from "../AppIcon/slotIcon";
 export type TabsVariant = "underline" | "pills" | "segmented";
 export type TabsSize = "sm" | "md" | "lg";
 /** A theme radius token or a pixel number. */
-export type TabsRadius = keyof RadiusScale | number;
+export type TabsRadius = RadiusName | number;
 export type TabsAlign = "left" | "center";
 /** What a tab knows about itself when it draws its icon. */
 export interface TabItemIconState extends SlotIconState {
@@ -53,7 +53,6 @@ export interface TabsProps {
      * track (the thumb nests inside it, its corner the track's minus the inset),
      * the pill, and the ends of the underline. Unset, each variant keeps its own
      * default: `md` track with an `sm` thumb, a `pill`-radius pill, a square underline.
-     * The theme's `tabs.radius` token is the app-wide default under this prop.
      */
     radius?: TabsRadius;
     /**

package/lib/typescript/commonjs/components/Text/Text.d.ts

@@ -1,21 +1,20 @@
 import type React from "react";
 import type { TextProps as RNTextProps, Text as RNTextRef, StyleProp, TextStyle } from "react-native";
-import type { FontWeightKey } from "../../theme";
-import type { Theme, TypographyScale } from "../../theme/types";
+import type { TextName, Theme, WeightName } from "../../theme/types";
 export type TextVariant = "display" | "h1" | "h2" | "h3" | "title" | "body" | "bodySmall" | "caption" | "label" | "overline";
-export type TextColor = "primary" | "secondary" | "tertiary" | "inverse" | "disabled" | "link" | "textStrong" | "success" | "warning" | "error" | "info";
+export type TextColor = "primary" | "secondary" | "tertiary" | "inverse" | "disabled" | "link" | "textStrong" | "success" | "warning" | "danger" | "info";
 export interface TextProps extends Omit<RNTextProps, "style"> {
     /**
-     * A built-in variant, or the name of one registered in `theme.textVariants`.
+     * A built-in variant, or the name of one registered in `theme.settings.textVariants`.
      * An unknown name falls back to `body`.
      */
     variant?: TextVariant | (string & {});
     /** Text role token, semantic tone, or a raw colour string. Defaults per variant. */
     color?: TextColor | (string & {});
     /** Override the variant's weight. */
-    weight?: FontWeightKey;
-    /** Override the variant's size — a typography token or a pixel number. */
-    size?: keyof TypographyScale["fontSize"] | number;
+    weight?: WeightName;
+    /** Override the variant's size: a text step name or a pixel number. */
+    size?: TextName | number;
     align?: TextStyle["textAlign"];
     italic?: boolean;
     underline?: boolean;

package/lib/typescript/commonjs/components/Timeline/Timeline.d.ts

@@ -8,7 +8,7 @@ import type { StyleProp, ViewStyle } from "react-native";
  *   current   — in progress now        (warning)
  *   done      — completed              (success)
  *   onHold    — blocked / waiting      (info)
- *   rejected  — declined / failed      (error)
+ *   rejected  — declined / failed      (danger)
  *   cancelled — aborted                (muted)
  *   skipped   — intentionally bypassed (muted)
  *

package/lib/typescript/commonjs/components/Toast/Toast.d.ts

@@ -1,7 +1,7 @@
 import type React from "react";
 import type { StyleProp, TextStyle, ViewStyle } from "react-native";
 import type { HapticType } from "../../utils/hapticUtils";
-export type ToastVariant = "default" | "success" | "error" | "warning" | "info";
+export type ToastVariant = "default" | "success" | "danger" | "warning" | "info";
 export type ToastPosition = "top" | "bottom";
 export interface ToastAction {
     label: string;

package/lib/typescript/commonjs/components/Toast/ToastProvider.d.ts

@@ -34,13 +34,13 @@ export interface ToastProviderProps {
     /**
      * How long a toast stays, in milliseconds, when its own `duration` is left
      * out. `0` keeps it until dismissed. Without it the theme's
-     * `components.toast.defaultDurationMs` applies (3000 by default).
+     * `settings.components.toast.defaultDurationMs` applies (3000 by default).
      */
     defaultDuration?: number;
     /**
      * Haptic per variant, for a toast whose own `haptic` is left out. A variant
      * left out of the map keeps its built-in haptic (`notificationError` for
-     * `error`, `notificationSuccess` for `success`, `notificationWarning` for
+     * `danger`,`notificationSuccess` for `success`, `notificationWarning` for
      * `warning`, `selection` otherwise). A variant set to `false` is silent, and
      * `false` for the whole prop silences every toast.
      */

package/lib/typescript/commonjs/components/Tour/Tour.d.ts

@@ -56,8 +56,8 @@ export interface TourProps {
  * Walks through product steps one highlighted view at a time: the screen is
  * dimmed except around the step's view, with a card holding the step text and
  * Back, Next and Skip. Built on `Modal`; the card sits on the side of the view
- * with more room, as `Tooltip` places its bubble, using the same tooltip gap and
- * screen-padding tokens. Motion comes from `theme.motion`, which collapses under
+ * with more room, as `Tooltip` places its bubble, using the same gap and screen padding
+ * (the sm space step). Motion comes from `theme.motion`, which collapses under
  * the OS Reduce Motion setting.
  */
 declare const Tour: React.FC<TourProps>;

package/lib/typescript/commonjs/hooks/usePresenceMotion.d.ts

@@ -1,6 +1,6 @@
 import { ReduceMotion } from "react-native-reanimated";
-import type { MotionScale } from "../theme/types";
-export type MotionDurationKey = keyof MotionScale["duration"];
+import type { DurationName } from "../theme/types";
+export type MotionDurationKey = DurationName;
 /** The reduceMotion flag every Reanimated fade passes, so the fade still runs under the OS setting. */
 export declare const PRESENCE_REDUCE_MOTION = ReduceMotion.Never;
 export interface PresenceMotion {

package/lib/typescript/commonjs/index.d.ts

@@ -9,8 +9,8 @@ export type { InitUIOptions } from "./initUI";
 export { initUI } from "./initUI";
 export type { NetworkStatusBannerProps } from "./network";
 export { NetworkStatusBanner } from "./network";
-export type { ColorMode, ColorPalette, ColorSchemePreference, ComponentTokens, DeepPartial, FontSizeKey, IconRegistry, IconRenderer, MotionScale, RadiusKey, RadiusScale, Resolved, ShadowDefinition, ShadowScale, SpacingKey, SpacingScale, TextVariantSpec, Theme, ThemeOverrides, ThemeProviderProps, TypographyScale, } from "./theme";
-export { darkTheme, fontSizeOf, getColorMode, getTheme, lightTheme, mergeTheme, radiusOf, resetTheme, resolveBadgeSize, resolveButtonSize, resolveCheckboxSize, resolveChipSize, resolveEmptyStateSize, resolveFieldSize, resolveFloatingActionButtonSize, resolveListItemSize, resolveOtpInputSize, resolveRadioSize, resolveSegmentedControlSize, resolveSliderSize, resolveSwitchSize, resolveTabsSize, setColorMode, setTheme, spaceOf, subscribeTheme, ThemeProvider, useTheme, useThemeMode, } from "./theme";
+export type { BrandOverrides, ColorMode, ColorName, ColorSchemePreference, ComponentName, ComponentSettings, ComponentSizeTokens, ComponentTokens, DurationName, EaseName, FieldVariant, FontFaces, FontName, FontWeightValue, GradientDefinition, GradientScale, IconRegistry, IconRenderer, LeadingName, LetterSpacingName, PhoneShadow, RadiusName, Resolved, ShadowName, SizeName, SpaceName, Spring, SpringScale, TextName, TextVariantSpec, Theme, ThemeProviderProps, ThemeSettings, TokenSet, WeightName, } from "./theme";
+export { COLOR_NAMES, DURATION_NAMES, darkTheme, EASE_NAMES, FONT_NAMES, getColorMode, getTheme, LEADING_NAMES, LETTER_SPACING_NAMES, lightTheme, mergeBrand, RADIUS_NAMES, radiusOf, resetTheme, resolveBadgeSize, resolveButtonSize, resolveCheckboxSize, resolveChipSize, resolveEmptyStateSize, resolveFieldSize, resolveFloatingActionButtonSize, resolveListItemSize, resolveOtpInputSize, resolveRadioSize, resolveSegmentedControlSize, resolveSliderSize, resolveSwitchSize, resolveTabsSize, SHADOW_NAMES, SIZE_NAMES, SPACE_NAMES, setColorMode, setTheme, spaceOf, subscribeTheme, TEXT_NAMES, ThemeProvider, textOf, useTheme, useThemeMode, WEIGHT_NAMES, } from "./theme";
 export type { AnnounceOptions, BreakpointKey, FeedbackIntent, HapticType, ResponsiveScales, ScreenInfo, SquirclePathParams, } from "./utils";
 export { announce, Breakpoints, configureFeedback, feedback, hapticForIntent, isFeedbackEnabled, isScreenSize, isTablet, Responsive, ScreenDimensions, SQUIRCLE_MIN_RADIUS, SQUIRCLE_SMOOTHING, setHapticImplementation, shadowStyle, smoothCorners, squircleApplies, squircleHostRadius, squirclePath, triggerHaptic, useScreenDimensions, warnUnknownProps, } from "./utils";
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/commonjs/initUI.d.ts

@@ -1,7 +1,7 @@
-import type { ColorMode, ThemeOverrides } from "./theme/types";
+import type { BrandOverrides, ColorMode, ThemeSettings } from "./theme/types";
 export interface InitUIOptions {
-    light?: ThemeOverrides;
-    dark?: ThemeOverrides;
+    brand?: BrandOverrides;
+    settings?: ThemeSettings;
     defaultMode?: ColorMode;
 }
 /**

package/lib/typescript/commonjs/theme/ThemeContext.d.ts

@@ -1,5 +1,5 @@
 import type React from "react";
-import type { ColorMode, Theme, ThemeOverrides } from "./types";
+import type { BrandOverrides, ColorMode, Theme, ThemeSettings } from "./types";
 export type ColorSchemePreference = "light" | "dark" | "system";
 export interface ThemeProviderProps {
     children: React.ReactNode;
@@ -12,8 +12,10 @@ export interface ThemeProviderProps {
      * `toggleColorMode`. Without a key nothing is read or written.
      */
     persistKey?: string;
-    lightOverrides?: ThemeOverrides;
-    darkOverrides?: ThemeOverrides;
+    /** Pass a module-level constant: a new object identity merges the theme again. */
+    brand?: BrandOverrides;
+    /** Pass a module-level constant: a new object identity merges the theme again. */
+    settings?: ThemeSettings;
 }
 export declare const ThemeProvider: React.FC<ThemeProviderProps>;
 export declare const useTheme: () => Theme;

package/lib/typescript/commonjs/theme/componentSizes.d.ts

@@ -1,27 +1,49 @@
-import type { BadgeSizeTokens, ButtonSizeTokens, CheckboxSizeTokens, ChipSizeTokens, ComponentSizeKey, EmptyStateSizeTokens, FieldSizeTokens, FloatingActionButtonSizeTokens, ListItemSizeTokens, OTPInputSizeTokens, RadioSizeTokens, SegmentedControlSizeTokens, SliderSizeTokens, SwitchSizeTokens, TabsSizeTokens } from "./componentTokens";
 import type { Theme } from "./types";
 /** A size token with every scale name turned into pixels. */
 export type Resolved<T> = {
     [K in keyof T]: number;
 };
-export declare const resolveButtonSize: (theme: Theme, size: ComponentSizeKey) => Resolved<ButtonSizeTokens>;
-export declare const resolveFieldSize: (theme: Theme, size: "sm" | "md" | "lg") => Resolved<FieldSizeTokens>;
-export declare const resolveEmptyStateSize: (theme: Theme, size: "sm" | "md" | "lg") => Resolved<EmptyStateSizeTokens>;
-export declare const resolveListItemSize: (theme: Theme, size: "sm" | "md" | "lg") => Resolved<ListItemSizeTokens>;
-export declare const resolveBadgeSize: (theme: Theme, size: "sm" | "md") => Resolved<BadgeSizeTokens>;
-export declare const resolveChipSize: (theme: Theme, size: "sm" | "md") => Resolved<ChipSizeTokens>;
-export declare const resolveCheckboxSize: (theme: Theme, size: "sm" | "md" | "lg") => Resolved<CheckboxSizeTokens>;
-export declare const resolveRadioSize: (theme: Theme, size: "sm" | "md" | "lg") => Resolved<RadioSizeTokens>;
-export declare const resolveSwitchSize: (theme: Theme, size: "sm" | "md" | "lg") => Resolved<SwitchSizeTokens>;
-export declare const resolveOtpInputSize: (theme: Theme, size: "sm" | "md" | "lg") => Resolved<OTPInputSizeTokens>;
-export declare const resolveSegmentedControlSize: (theme: Theme, size: "sm" | "md" | "lg") => Resolved<SegmentedControlSizeTokens>;
-export declare const resolveTabsSize: (theme: Theme, size: "sm" | "md" | "lg") => Resolved<TabsSizeTokens>;
-export declare const resolveSliderSize: (theme: Theme, size: "sm" | "md" | "lg") => Resolved<SliderSizeTokens>;
-export declare const resolveFloatingActionButtonSize: (theme: Theme, size: "sm" | "md" | "lg") => Resolved<FloatingActionButtonSizeTokens>;
+export declare const resolveButtonSize: (theme: Theme, size: "xs" | "sm" | "md" | "lg" | "xl") => Resolved<import("./tokens.generated").ButtonSizeTokens>;
+export declare const resolveFieldSize: (theme: Theme, size: "sm" | "md" | "lg") => Resolved<import("./tokens.generated").FieldSizeTokens>;
+export declare const resolveEmptyStateSize: (theme: Theme, size: "sm" | "md" | "lg") => Resolved<import("./tokens.generated").EmptyStateSizeTokens>;
+export declare const resolveListItemSize: (theme: Theme, size: "sm" | "md" | "lg") => Resolved<{
+    "padding-y": import("./tokens.generated").SpaceName;
+    "title-text": import("./tokens.generated").TextName;
+    "subtitle-text": import("./tokens.generated").TextName;
+    "min-height": number;
+}>;
+export declare const resolveBadgeSize: (theme: Theme, size: "sm" | "md") => Resolved<import("./tokens.generated").BadgeSizeTokens>;
+export declare const resolveChipSize: (theme: Theme, size: "sm" | "md") => Resolved<import("./tokens.generated").ChipSizeTokens>;
+export declare const resolveCheckboxSize: (theme: Theme, size: "sm" | "md" | "lg") => Resolved<{
+    "box-size": number;
+}>;
+export declare const resolveRadioSize: (theme: Theme, size: "sm" | "md" | "lg") => Resolved<{
+    outer: number;
+    inner: number;
+}>;
+export declare const resolveSwitchSize: (theme: Theme, size: "sm" | "md" | "lg") => Resolved<{
+    "track-width": number;
+    "track-height": number;
+    "thumb-size": number;
+    padding: import("./tokens.generated").SpaceName;
+}>;
+export declare const resolveOtpInputSize: (theme: Theme, size: "sm" | "md" | "lg") => Resolved<{
+    cell: number;
+    text: import("./tokens.generated").TextName;
+    radius: import("./tokens.generated").RadiusName;
+    gap: import("./tokens.generated").SpaceName;
+}>;
+export declare const resolveSegmentedControlSize: (theme: Theme, size: "sm" | "md" | "lg") => Resolved<import("./tokens.generated").SegmentedControlSizeTokens>;
+export declare const resolveTabsSize: (theme: Theme, size: "sm" | "md" | "lg") => Resolved<import("./tokens.generated").TabsSizeTokens>;
+export declare const resolveSliderSize: (theme: Theme, size: "sm" | "md" | "lg") => Resolved<{
+    "track-height": number;
+    "thumb-diameter": number;
+}>;
+export declare const resolveFloatingActionButtonSize: (theme: Theme, size: "sm" | "md" | "lg") => Resolved<import("./tokens.generated").FloatingActionButtonSizeTokens>;
 /**
- * Resolves every scale-named component token once, so a theme override that
- * names a missing scale step stops the app where the theme is built, with the
- * token's path, instead of drawing a component with no padding.
+ * Resolves every scale-named component token once, so a token that names a
+ * missing scale step stops the app where the theme is built, with the token's
+ * path, instead of drawing a component with no padding.
  */
 export declare const validateComponentTokens: (theme: Theme) => void;
 //# sourceMappingURL=componentSizes.d.ts.map

package/lib/typescript/commonjs/theme/index.d.ts

@@ -1,20 +1,18 @@
-import type { ColorMode, Theme, ThemeOverrides } from "./types";
+import type { BrandOverrides, ColorMode, Theme, ThemeSettings } from "./types";
 /**
- * Set the override object for a mode (defaults to the active one).
+ * Set the brand and the settings the app's theme is built from.
  *
- * REPLACES that mode's overrides; it does not accumulate them. Calling
- * `setTheme({ colors })` and then `setTheme({ spacing })` leaves ONLY the
- * spacing override live — the colours silently revert to the base theme. Pass
- * one complete override object per mode, or merge them yourself before calling:
+ * REPLACES both stored values; it does not accumulate them. Calling
+ * `setTheme(brandA)` and then `setTheme(undefined, settingsB)` leaves ONLY
+ * settingsB live: the brand silently reverts to the base theme. Pass the
+ * complete brand and settings in one call, or merge them yourself before calling.
  *
- *   setTheme({ ...myColors, ...mySpacing });
- *
- * This is deliberate (one override object per mode, last call wins) and is
- * pinned by a test. Do not "fix" it to merge without treating that as the
- * behaviour change it is: an app relying on replace to CLEAR a previous
- * override would silently keep it.
+ * This is deliberate (one call sets the whole configuration, last call wins) and
+ * is pinned by a test. Do not "fix" it to merge without treating that as the
+ * behaviour change it is: an app relying on replace to CLEAR a previous brand
+ * would silently keep it.
  */
-export declare const setTheme: (overrides: ThemeOverrides, mode?: ColorMode) => void;
+export declare const setTheme: (brand?: BrandOverrides, settings?: ThemeSettings) => void;
 export declare const setColorMode: (mode: ColorMode) => void;
 export declare const getColorMode: () => ColorMode;
 export declare const getTheme: () => Theme;
@@ -25,12 +23,12 @@ export type { Resolved } from "./componentSizes";
 export { resolveBadgeSize, resolveButtonSize, resolveCheckboxSize, resolveChipSize, resolveEmptyStateSize, resolveFieldSize, resolveFloatingActionButtonSize, resolveListItemSize, resolveOtpInputSize, resolveRadioSize, resolveSegmentedControlSize, resolveSliderSize, resolveSwitchSize, resolveTabsSize, validateComponentTokens, } from "./componentSizes";
 export type { GradientProps } from "./Gradient";
 export { Gradient, gradientAngle, toBackgroundImage } from "./Gradient";
-export { mergeTheme } from "./merge";
-export { fontSizeOf, radiusOf, spaceOf } from "./scale";
+export { mergeBrand } from "./merge";
+export { radiusOf, spaceOf, textOf } from "./scale";
 export type { ColorSchemePreference, ThemeProviderProps } from "./ThemeContext";
 export { ThemeProvider, useTheme, useThemeMode } from "./ThemeContext";
-export type { FontWeightKey } from "./textStyle";
 export { fontFor } from "./textStyle";
 export { darkTheme, lightTheme } from "./tokens";
-export type { ColorMode, ColorPalette, ComponentTokens, DeepPartial, FontSizeKey, GradientDefinition, GradientScale, IconRegistry, IconRenderer, MotionScale, RadiusKey, RadiusScale, ShadowDefinition, ShadowScale, SpacingKey, SpacingScale, TextVariantSpec, Theme, ThemeOverrides, TypographyScale, } from "./types";
+export { COLOR_NAMES, DURATION_NAMES, EASE_NAMES, FONT_NAMES, LEADING_NAMES, LETTER_SPACING_NAMES, RADIUS_NAMES, SHADOW_NAMES, SIZE_NAMES, SPACE_NAMES, TEXT_NAMES, WEIGHT_NAMES, } from "./tokens.generated";
+export type { BrandOverrides, ColorMode, ColorName, ComponentName, ComponentSettings, ComponentSizeTokens, ComponentTokens, DurationName, EaseName, FieldVariant, FontFaces, FontName, FontWeightValue, GradientDefinition, GradientScale, IconRegistry, IconRenderer, LeadingName, LetterSpacingName, PhoneShadow, RadiusName, ShadowName, SizeName, SpaceName, Spring, SpringScale, TextName, TextVariantSpec, Theme, ThemeSettings, TokenSet, WeightName, } from "./types";
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/commonjs/theme/merge.d.ts

@@ -1,3 +1,16 @@
-import type { Theme, ThemeOverrides } from "./types";
-export declare const mergeTheme: (base: Theme, overrides: ThemeOverrides) => Theme;
+import type { BrandOverrides, Theme, ThemeSettings } from "./types";
+/**
+ * A brand that sets a tone colour gets two derived values, both in the brand's
+ * own hue, so the library's contrast holds for it too:
+ * - the solid fill, moved until it reads at 4.5:1 under its `on-*` ink (set
+ *   when the brand names the tone or the ink, so a brand ink on a library
+ *   fill is checked as well);
+ * - the tone's `*-text` colour, from that fill, unless the brand names its own;
+ * - for primary, the `primary-hover` and `primary-pressed` fills, from that fill
+ *   and the library's lightness steps, unless the brand names its own, so a
+ *   moved primary keeps the press order instead of the library's old colours.
+ * Without them the brand would get the library's ink for the DEFAULT tone: a
+ * different hue, chosen against the default colour.
+ */
+export declare const mergeBrand: (base: Theme, brand: BrandOverrides | undefined, settings: ThemeSettings | undefined) => Theme;
 //# sourceMappingURL=merge.d.ts.map

package/lib/typescript/commonjs/theme/scale.d.ts

@@ -1,5 +1,7 @@
-import type { FontSizeKey, RadiusKey, SpacingKey, Theme } from "./types";
-export declare const spaceOf: (theme: Theme, key: SpacingKey, path: string) => number;
-export declare const fontSizeOf: (theme: Theme, key: FontSizeKey, path: string) => number;
-export declare const radiusOf: (theme: Theme, key: RadiusKey, path: string) => number;
+import type { RadiusName, SpaceName, TextName } from "./tokens.generated";
+import type { Theme } from "./types";
+export declare const scaleStep: (theme: Theme, scale: "space" | "text" | "radius", key: string, path?: string) => number;
+export declare const spaceOf: (theme: Theme, key: SpaceName) => number;
+export declare const radiusOf: (theme: Theme, key: RadiusName) => number;
+export declare const textOf: (theme: Theme, key: TextName) => number;
 //# sourceMappingURL=scale.d.ts.map