@webority/mobile-ui 0.88.1 → 0.90.0

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

@@ -1,20 +1,18 @@
-import type { ColorMode, Theme, ThemeOverrides } from "./types.js";
+import type { BrandOverrides, ColorMode, Theme, ThemeSettings } from "./types.js";
 /**
- * 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.js";
 export { resolveBadgeSize, resolveButtonSize, resolveCheckboxSize, resolveChipSize, resolveEmptyStateSize, resolveFieldSize, resolveFloatingActionButtonSize, resolveListItemSize, resolveOtpInputSize, resolveRadioSize, resolveSegmentedControlSize, resolveSliderSize, resolveSwitchSize, resolveTabsSize, validateComponentTokens, } from "./componentSizes.js";
 export type { GradientProps } from "./Gradient.js";
 export { Gradient, gradientAngle, toBackgroundImage } from "./Gradient.js";
-export { mergeTheme } from "./merge.js";
-export { fontSizeOf, radiusOf, spaceOf } from "./scale.js";
+export { mergeBrand } from "./merge.js";
+export { radiusOf, spaceOf, textOf } from "./scale.js";
 export type { ColorSchemePreference, ThemeProviderProps } from "./ThemeContext.js";
 export { ThemeProvider, useTheme, useThemeMode } from "./ThemeContext.js";
-export type { FontWeightKey } from "./textStyle.js";
 export { fontFor } from "./textStyle.js";
 export { darkTheme, lightTheme } from "./tokens.js";
-export type { ColorMode, ColorPalette, ComponentTokens, DeepPartial, FontSizeKey, GradientDefinition, GradientScale, IconRegistry, IconRenderer, MotionScale, RadiusKey, RadiusScale, ShadowDefinition, ShadowScale, SpacingKey, SpacingScale, TextVariantSpec, Theme, ThemeOverrides, TypographyScale, } from "./types.js";
+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.js";
+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.js";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1,3 +1,16 @@
-import type { Theme, ThemeOverrides } from "./types.js";
-export declare const mergeTheme: (base: Theme, overrides: ThemeOverrides) => Theme;
+import type { BrandOverrides, Theme, ThemeSettings } from "./types.js";
+/**
+ * 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/module/theme/scale.d.ts

@@ -1,5 +1,7 @@
-import type { FontSizeKey, RadiusKey, SpacingKey, Theme } from "./types.js";
-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.js";
+import type { Theme } from "./types.js";
+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

package/lib/typescript/module/theme/textStyle.d.ts

@@ -1,21 +1,8 @@
 import type { TextStyle } from "react-native";
-import type { Theme, TypographyScale } from "./types.js";
-export type FontWeightKey = keyof TypographyScale["fontWeight"];
+import type { Theme, WeightName } from "./types.js";
 /**
- * Resolve text-weight style for the active theme.
- *
- * When the consumer registers a brand `theme.typography.fontFamily.<weight>`,
- * we set `fontFamily` and leave `fontWeight` undefined — RN can't combine the
- * two reliably across iOS/Android once a custom face is in play, so the brand
- * file controls the weight glyph itself. Falls back to `fontWeight` when no
- * brand font is registered for that weight.
- *
- * `face: 'display'` picks `fontFamily.display` when the theme sets it and is
- * otherwise identical to the call without it.
- *
- * Note: the fontWeight scale uses `normal` while FontFamilyScale uses
- * `regular` (the conventional font-name suffix). The helper maps between
- * them transparently.
+ * A face file carries its own weight, and the platform cannot combine a custom
+ * face with a numeric weight reliably, so a registered face replaces it.
  */
-export declare const fontFor: (theme: Theme, weight: FontWeightKey, face?: "display") => Pick<TextStyle, "fontFamily" | "fontWeight">;
+export declare const fontFor: (theme: Theme, weight: WeightName, family?: "display") => Pick<TextStyle, "fontFamily" | "fontWeight">;
 //# sourceMappingURL=textStyle.d.ts.map

package/lib/typescript/module/theme/tokens.generated.d.ts

@@ -1,4 +1,4 @@
-export declare const COLOR_NAMES: readonly ["bg", "bg-subtle", "bg-muted", "surface", "surface-inverse", "text", "text-body", "text-muted", "text-subtle", "text-inverse", "link", "border", "border-subtle", "field-bg", "field-border", "field-border-focus", "focus-ring", "scrim", "on-scrim", "primary", "primary-hover", "primary-soft", "primary-text", "on-primary", "neutral", "neutral-hover", "on-neutral", "success", "success-text", "on-success", "warning", "warning-text", "on-warning", "danger", "danger-border", "danger-text", "on-danger", "info", "info-text", "on-info", "primary-pressed", "on-neutral-strong", "text-disabled", "surface-pressed", "surface-hover", "surface-selected", "surface-disabled", "skeleton", "skeleton-highlight", "glass-fill", "glass-border", "on-glass", "glass-badge", "field-bg-focus", "field-bg-disabled", "field-border-error", "field-label", "field-text", "field-text-disabled", "field-placeholder", "field-placeholder-disabled", "field-icon", "field-icon-focus", "field-icon-disabled", "field-caret", "field-message", "avatar-1", "avatar-2", "avatar-3", "avatar-4", "avatar-5", "avatar-6", "avatar-7", "avatar-8", "thumb", "success-soft", "warning-soft", "danger-soft", "info-soft", "neutral-text", "primary-wash", "primary-wash-strong"];
+export declare const COLOR_NAMES: readonly ["bg", "bg-subtle", "bg-muted", "surface", "surface-inverse", "text", "text-body", "text-muted", "text-subtle", "text-inverse", "link", "border", "border-subtle", "field-bg", "field-border", "field-border-focus", "focus-ring", "scrim", "on-scrim", "thumb", "primary", "primary-hover", "primary-soft", "primary-text", "on-primary", "primary-wash", "primary-wash-strong", "neutral", "neutral-hover", "neutral-text", "on-neutral", "success", "success-soft", "success-text", "on-success", "warning", "warning-soft", "warning-text", "on-warning", "danger", "danger-soft", "danger-border", "danger-text", "on-danger", "info", "info-soft", "info-text", "on-info", "primary-pressed", "on-neutral-strong", "text-disabled", "surface-pressed", "surface-hover", "surface-selected", "surface-disabled", "skeleton", "skeleton-highlight", "glass-fill", "glass-border", "on-glass", "glass-badge", "field-bg-focus", "field-bg-disabled", "field-border-error", "field-label", "field-text", "field-text-disabled", "field-placeholder", "field-placeholder-disabled", "field-icon", "field-icon-focus", "field-icon-disabled", "field-caret", "field-message", "avatar-1", "avatar-2", "avatar-3", "avatar-4", "avatar-5", "avatar-6", "avatar-7", "avatar-8"];
 export type ColorName = (typeof COLOR_NAMES)[number];
 export declare const SPACE_NAMES: readonly ["none", "xxs", "xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl"];
 export type SpaceName = (typeof SPACE_NAMES)[number];
@@ -38,68 +38,118 @@ export interface PhoneShadow {
 export type ComponentKind = "space" | "text" | "radius" | "px" | "number" | "ms";
 type Sized<S extends string, T> = Record<S, T>;
 type L3 = "sm" | "md" | "lg";
+export interface FieldSizeTokens {
+    radius: RadiusName;
+    "padding-x": SpaceName;
+    "padding-y": SpaceName;
+    "min-height": number;
+    text: TextName;
+    icon: number;
+    "label-text": TextName;
+    "label-gap": SpaceName;
+    "message-text": TextName;
+    "message-gap": SpaceName;
+}
+export interface ButtonSizeTokens {
+    "padding-x": SpaceName;
+    "padding-y": SpaceName;
+    "min-height": number;
+    text: TextName;
+    radius: RadiusName;
+    icon: number;
+    "badge-icon": number;
+}
+export interface EmptyStateSizeTokens {
+    icon: number;
+    "title-text": TextName;
+    "description-text": TextName;
+    "padding-y": SpaceName;
+    "title-gap": SpaceName;
+    "description-gap": SpaceName;
+}
+export interface BadgeSizeTokens {
+    text: TextName;
+    "min-width": number;
+    height: number;
+    "padding-x": SpaceName;
+    "dot-size": number;
+}
+export interface BadgeTokens {
+    "border-width": number;
+    "anchor-offset": number;
+}
+export interface ChipSizeTokens {
+    "padding-x": SpaceName;
+    "padding-y": SpaceName;
+    text: TextName;
+    "min-height": number;
+    "close-size": number;
+    "close-text": TextName;
+    gap: SpaceName;
+    icon: number;
+}
+export interface SegmentedControlSizeTokens {
+    height: number;
+    text: TextName;
+    "padding-x": SpaceName;
+    icon: number;
+}
+export interface SegmentedControlTokens {
+    "track-padding": SpaceName;
+    "underline-height": number;
+    "pill-inset": SpaceName;
+}
+export interface TabsSizeTokens {
+    text: TextName;
+    "padding-y": SpaceName;
+    "padding-x": SpaceName;
+    "scrollable-padding-x": SpaceName;
+    icon: number;
+}
+export interface TabsTokens {
+    "icon-gap": SpaceName;
+    "track-padding": SpaceName;
+    "underline-height": number;
+    "pill-inset": SpaceName;
+    "disabled-opacity": number;
+    "badge-gap": SpaceName;
+}
+export interface FloatingActionButtonSizeTokens {
+    diameter: number;
+    icon: number;
+    text: TextName;
+    "label-padding-x": SpaceName;
+}
+export interface FloatingActionButtonTokens {
+    "edge-offset": SpaceName;
+    "bottom-offset": SpaceName;
+    "secondary-gap": SpaceName;
+    "stagger-ms": number;
+}
 export interface ComponentTokens {
-    button: Sized<"xs" | L3 | "xl", {
-        "padding-x": SpaceName;
-        "padding-y": SpaceName;
-        "min-height": number;
-        text: TextName;
-        radius: RadiusName;
-        icon: number;
-        "badge-icon": number;
-    }>;
-    field: Sized<L3, {
-        "padding-x": SpaceName;
-        "padding-y": SpaceName;
-        "min-height": number;
-        text: TextName;
-        radius: RadiusName;
-        icon: number;
-        "label-text": TextName;
-        "label-gap": SpaceName;
-        "message-text": TextName;
-        "message-gap": SpaceName;
-    }>;
+    field: Sized<L3, FieldSizeTokens>;
+    press: {
+        opacity: number;
+    };
+    disabled: {
+        opacity: number;
+    };
+    button: Sized<"xs" | "sm" | "md" | "lg" | "xl", ButtonSizeTokens>;
     input: Sized<L3, {
         "multiline-min-height": number;
     }>;
     "search-bar": Sized<L3, {
         radius: RadiusName;
     }>;
-    "empty-state": Sized<L3, {
-        icon: number;
-        "title-text": TextName;
-        "description-text": TextName;
-        "padding-y": SpaceName;
-        "title-gap": SpaceName;
-        "description-gap": SpaceName;
-    }>;
+    "empty-state": Sized<L3, EmptyStateSizeTokens>;
     "list-item": Sized<L3, {
         "padding-y": SpaceName;
         "title-text": TextName;
         "subtitle-text": TextName;
         "min-height": number;
     }>;
-    badge: Sized<"sm" | "md", {
-        text: TextName;
-        "min-width": number;
-        height: number;
-        "padding-x": SpaceName;
-        "dot-size": number;
-    }> & {
-        "border-width": number;
-        "anchor-offset": number;
-    };
-    chip: Sized<"sm" | "md", {
-        "padding-x": SpaceName;
-        "padding-y": SpaceName;
-        text: TextName;
-        "min-height": number;
-        "close-size": number;
-        "close-text": TextName;
-        gap: SpaceName;
-        icon: number;
-    }>;
+    badge: Sized<"sm" | "md", BadgeSizeTokens> & BadgeTokens;
+    chip: Sized<"sm" | "md", ChipSizeTokens>;
     checkbox: Sized<L3, {
         "box-size": number;
     }> & {
@@ -123,45 +173,13 @@ export interface ComponentTokens {
         radius: RadiusName;
         gap: SpaceName;
     }>;
-    "segmented-control": Sized<L3, {
-        height: number;
-        text: TextName;
-        "padding-x": SpaceName;
-        icon: number;
-    }> & {
-        "track-padding": SpaceName;
-        "underline-height": number;
-        "pill-inset": SpaceName;
-    };
-    tabs: Sized<L3, {
-        text: TextName;
-        "padding-y": SpaceName;
-        "padding-x": SpaceName;
-        "scrollable-padding-x": SpaceName;
-        icon: number;
-    }> & {
-        "icon-gap": SpaceName;
-        "track-padding": SpaceName;
-        "underline-height": number;
-        "pill-inset": SpaceName;
-        "disabled-opacity": number;
-        "badge-gap": SpaceName;
-    };
+    "segmented-control": Sized<L3, SegmentedControlSizeTokens> & SegmentedControlTokens;
+    tabs: Sized<L3, TabsSizeTokens> & TabsTokens;
     slider: Sized<L3, {
         "track-height": number;
         "thumb-diameter": number;
     }>;
-    "floating-action-button": Sized<L3, {
-        diameter: number;
-        icon: number;
-        text: TextName;
-        "label-padding-x": SpaceName;
-    }> & {
-        "edge-offset": SpaceName;
-        "bottom-offset": SpaceName;
-        "secondary-gap": SpaceName;
-        "stagger-ms": number;
-    };
+    "floating-action-button": Sized<L3, FloatingActionButtonSizeTokens> & FloatingActionButtonTokens;
     dialog: {
         "icon-wrapper-size": number;
         "action-button-min-height": number;
@@ -175,18 +193,147 @@ export interface ComponentTokens {
     banner: {
         "tint-bar-width": number;
     };
-    disabled: {
-        opacity: number;
-    };
-    press: {
-        opacity: number;
-    };
 }
 export type ComponentName = keyof ComponentTokens;
 type SizeKeysOf<C extends ComponentName> = Extract<keyof ComponentTokens[C], "xs" | "sm" | "md" | "lg" | "xl">;
 export type ComponentSizeTokens<C extends ComponentName> = ComponentTokens[C][SizeKeysOf<C>];
 export declare const COMPONENT_KINDS: {
-    readonly [C in ComponentName]: Readonly<Record<string, ComponentKind>>;
+    readonly field: {
+        readonly radius: "radius";
+        readonly "padding-x": "space";
+        readonly "padding-y": "space";
+        readonly "min-height": "px";
+        readonly text: "text";
+        readonly icon: "px";
+        readonly "label-text": "text";
+        readonly "label-gap": "space";
+        readonly "message-text": "text";
+        readonly "message-gap": "space";
+    };
+    readonly press: {
+        readonly opacity: "number";
+    };
+    readonly disabled: {
+        readonly opacity: "number";
+    };
+    readonly button: {
+        readonly "padding-x": "space";
+        readonly "padding-y": "space";
+        readonly "min-height": "px";
+        readonly text: "text";
+        readonly radius: "radius";
+        readonly icon: "px";
+        readonly "badge-icon": "px";
+    };
+    readonly input: {
+        readonly "multiline-min-height": "px";
+    };
+    readonly "search-bar": {
+        readonly radius: "radius";
+    };
+    readonly "empty-state": {
+        readonly icon: "px";
+        readonly "title-text": "text";
+        readonly "description-text": "text";
+        readonly "padding-y": "space";
+        readonly "title-gap": "space";
+        readonly "description-gap": "space";
+    };
+    readonly "list-item": {
+        readonly "padding-y": "space";
+        readonly "title-text": "text";
+        readonly "subtitle-text": "text";
+        readonly "min-height": "px";
+    };
+    readonly badge: {
+        readonly text: "text";
+        readonly "min-width": "px";
+        readonly height: "px";
+        readonly "padding-x": "space";
+        readonly "dot-size": "px";
+        readonly "border-width": "px";
+        readonly "anchor-offset": "px";
+    };
+    readonly chip: {
+        readonly "padding-x": "space";
+        readonly "padding-y": "space";
+        readonly text: "text";
+        readonly "min-height": "px";
+        readonly "close-size": "px";
+        readonly "close-text": "text";
+        readonly gap: "space";
+        readonly icon: "px";
+    };
+    readonly checkbox: {
+        readonly "box-size": "px";
+        readonly "label-gap": "space";
+    };
+    readonly radio: {
+        readonly outer: "px";
+        readonly inner: "px";
+        readonly "label-gap": "space";
+    };
+    readonly switch: {
+        readonly "track-width": "px";
+        readonly "track-height": "px";
+        readonly "thumb-size": "px";
+        readonly padding: "space";
+    };
+    readonly "otp-input": {
+        readonly cell: "px";
+        readonly text: "text";
+        readonly radius: "radius";
+        readonly gap: "space";
+    };
+    readonly "segmented-control": {
+        readonly height: "px";
+        readonly text: "text";
+        readonly "padding-x": "space";
+        readonly icon: "px";
+        readonly "track-padding": "space";
+        readonly "underline-height": "px";
+        readonly "pill-inset": "space";
+    };
+    readonly tabs: {
+        readonly text: "text";
+        readonly "padding-y": "space";
+        readonly "padding-x": "space";
+        readonly "scrollable-padding-x": "space";
+        readonly icon: "px";
+        readonly "icon-gap": "space";
+        readonly "track-padding": "space";
+        readonly "underline-height": "px";
+        readonly "pill-inset": "space";
+        readonly "disabled-opacity": "number";
+        readonly "badge-gap": "space";
+    };
+    readonly slider: {
+        readonly "track-height": "px";
+        readonly "thumb-diameter": "px";
+    };
+    readonly "floating-action-button": {
+        readonly diameter: "px";
+        readonly icon: "px";
+        readonly text: "text";
+        readonly "label-padding-x": "space";
+        readonly "edge-offset": "space";
+        readonly "bottom-offset": "space";
+        readonly "secondary-gap": "space";
+        readonly "stagger-ms": "ms";
+    };
+    readonly dialog: {
+        readonly "icon-wrapper-size": "px";
+        readonly "action-button-min-height": "px";
+    };
+    readonly toast: {
+        readonly "icon-circle-size": "px";
+        readonly "icon-glyph-text": "text";
+        readonly "tint-bar-width": "px";
+        readonly "action-min-height": "px";
+    };
+    readonly banner: {
+        readonly "tint-bar-width": "px";
+    };
 };
 export interface TokenSet {
     mode: "light" | "dark";