@webority/mobile-ui 0.88.0 → 0.89.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

@@ -0,0 +1,362 @@
+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];
+export declare const RADIUS_NAMES: readonly ["none", "sm", "md", "lg", "xl", "pill"];
+export type RadiusName = (typeof RADIUS_NAMES)[number];
+export declare const TEXT_NAMES: readonly ["xs", "sm", "base", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl", "7xl", "8xl"];
+export type TextName = (typeof TEXT_NAMES)[number];
+export declare const WEIGHT_NAMES: readonly ["normal", "medium", "semibold", "bold"];
+export type WeightName = (typeof WEIGHT_NAMES)[number];
+export declare const LEADING_NAMES: readonly ["tight", "normal", "relaxed"];
+export type LeadingName = (typeof LEADING_NAMES)[number];
+export declare const LETTER_SPACING_NAMES: readonly ["tight", "normal", "wide"];
+export type LetterSpacingName = (typeof LETTER_SPACING_NAMES)[number];
+export declare const FONT_NAMES: readonly ["ui", "display", "mono"];
+export type FontName = (typeof FONT_NAMES)[number];
+export declare const SHADOW_NAMES: readonly ["card", "elevated", "popover", "modal", "drawer"];
+export type ShadowName = (typeof SHADOW_NAMES)[number];
+export declare const DURATION_NAMES: readonly ["instant", "fast", "default", "slow", "slower"];
+export type DurationName = (typeof DURATION_NAMES)[number];
+export declare const EASE_NAMES: readonly ["in-out", "accelerate", "decelerate", "sharp"];
+export type EaseName = (typeof EASE_NAMES)[number];
+export declare const SIZE_NAMES: readonly ["border"];
+export type SizeName = (typeof SIZE_NAMES)[number];
+export type FontWeightValue = "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900";
+/** Face name per weight; an empty object means the platform system font. */
+export type FontFaces = Partial<Record<WeightName, string>>;
+export interface PhoneShadow {
+    shadowColor: string;
+    shadowOffset: {
+        width: number;
+        height: number;
+    };
+    shadowOpacity: number;
+    shadowRadius: number;
+    elevation: number;
+}
+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 {
+    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, EmptyStateSizeTokens>;
+    "list-item": Sized<L3, {
+        "padding-y": SpaceName;
+        "title-text": TextName;
+        "subtitle-text": TextName;
+        "min-height": number;
+    }>;
+    badge: Sized<"sm" | "md", BadgeSizeTokens> & BadgeTokens;
+    chip: Sized<"sm" | "md", ChipSizeTokens>;
+    checkbox: Sized<L3, {
+        "box-size": number;
+    }> & {
+        "label-gap": SpaceName;
+    };
+    radio: Sized<L3, {
+        outer: number;
+        inner: number;
+    }> & {
+        "label-gap": SpaceName;
+    };
+    switch: Sized<L3, {
+        "track-width": number;
+        "track-height": number;
+        "thumb-size": number;
+        padding: SpaceName;
+    }>;
+    "otp-input": Sized<L3, {
+        cell: number;
+        text: TextName;
+        radius: RadiusName;
+        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, FloatingActionButtonSizeTokens> & FloatingActionButtonTokens;
+    dialog: {
+        "icon-wrapper-size": number;
+        "action-button-min-height": number;
+    };
+    toast: {
+        "icon-circle-size": number;
+        "icon-glyph-text": TextName;
+        "tint-bar-width": number;
+        "action-min-height": number;
+    };
+    banner: {
+        "tint-bar-width": 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 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";
+    colors: Record<ColorName, string>;
+    space: Record<SpaceName, number>;
+    radius: Record<RadiusName, number>;
+    text: Record<TextName, {
+        size: number;
+        lineHeight: number;
+    }>;
+    weight: Record<WeightName, FontWeightValue>;
+    leading: Record<LeadingName, number>;
+    "letter-spacing": Record<LetterSpacingName, number>;
+    font: Record<FontName, FontFaces>;
+    shadow: Record<ShadowName, PhoneShadow>;
+    motion: {
+        duration: Record<DurationName, number>;
+        ease: Record<EaseName, readonly [number, number, number, number]>;
+    };
+    size: Record<SizeName, number>;
+    components: ComponentTokens;
+}
+export declare const lightTokens: TokenSet;
+export declare const darkTokens: TokenSet;
+export {};
+//# sourceMappingURL=tokens.generated.d.ts.map