@webority/mobile-ui 0.88.1 → 0.90.0

package/lib/typescript/module/components/BottomNavigation/BottomNavigation.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import type { View as RNView, StyleProp, TextStyle, ViewStyle } from "react-native";
 import type { ScrollDirection } from "../../hooks/useScrollDirection.js";
-import type { ShadowScale } from "../../theme/types.js";
+import type { ShadowName } from "../../theme/types.js";
 import type { HapticType } from "../../utils/index.js";
 import type { SlotIcon, SlotIconState } from "../AppIcon/index.js";
 /**
@@ -35,7 +35,7 @@ export type BottomNavigationRadius = number | "pill";
  */
 export type BottomNavigationIndicatorRadius = number | "auto";
 /** Shadow under the bar surface: a theme shadow level, or `none`. */
-export type BottomNavigationElevation = keyof ShadowScale;
+export type BottomNavigationElevation = "none" | ShadowName;
 export type TabBadge = number | string | boolean | null;
 /** What a tab knows about itself when it draws its icon. */
 export interface TabIconProps extends SlotIconState {
@@ -92,7 +92,7 @@ export interface BottomNavigationCenterAction {
     size?: number;
     /** Fill of the circle. Default the theme's `primary`. */
     color?: string;
-    /** Ink of the icon in the circle. Default the theme's `onPrimary`. */
+    /** Ink of the icon in the circle. Default the theme's `on-primary`. */
     iconColor?: string;
     /** Pixel size of the icon in the circle. Default 24. */
     iconSize?: number;
@@ -157,8 +157,8 @@ export interface BottomNavigationProps {
     /**
      * Corner radius of the active tab's background on the `pill`, `floating`,
      * `solid`, `tile` and `expand` variants. `auto` (default) takes the bar's
-     * radius once one is set through `radius` or the `radius` token, and
-     * stays fully round while none is. A number sets the background's own
+     * radius once one is set through `radius`, and stays fully round while
+     * none is. A number sets the background's own
      * radius whatever the bar's. Capped at half the background's height, since
      * Android squares off a larger radius, so a large number is fully round.
      */
@@ -170,14 +170,12 @@ export interface BottomNavigationProps {
      */
     elevation?: BottomNavigationElevation;
     /**
-     * Size of every tab icon in pixels. Default 18, or
-     * `components.bottomNavigation.iconSize`. The active pill follows it.
+     * Size of every tab icon in pixels. Default 18. The active pill follows it.
      */
     iconSize?: number;
     /**
      * Air between the bar surface and the screen's left and right edges, in
-     * pixels, on every variant. Default 16, or
-     * `components.bottomNavigation.floatingMargin`.
+     * pixels, on every variant. Default 16.
      */
     marginHorizontal?: number;
     /**
@@ -185,7 +183,7 @@ export interface BottomNavigationProps {
      * `floating` and `tile` capsules and 0 for a docked bar. Above zero it
      * lifts any variant off the screen edge. Over a safe-area inset (a home
      * indicator or Android's system buttons) the lift is the inset plus
-     * `theme.spacing.sm`, never less than this margin.
+     * `theme.space.sm`, never less than this margin.
      */
     marginVertical?: number;
     /**

package/lib/typescript/module/components/BottomSheet/BottomSheet.d.ts

@@ -92,10 +92,10 @@ export interface BottomSheetProps {
     scrollEventThrottle?: number;
     /**
      * @deprecated Backdrop opacity is now controlled by the theme token
-     * `colors.background.overlay` (alpha baked into the rgba value). Animated
+     * `colors.scrim` (alpha baked into the rgba value). Animated
      * opacity on the backdrop was unreliable under Fabric view-flattening, so
      * the scrim is now a static plain View. To tune dim level, override
-     * `theme.colors.background.overlay` in your theme bridge.
+     * `theme.colors.scrim` in your theme bridge.
      */
     backdropOpacity?: number;
     /**

package/lib/typescript/module/components/Box/Box.d.ts

@@ -1,32 +1,32 @@
 import type React from "react";
 import type { View as RNView, StyleProp, ViewProps, ViewStyle } from "react-native";
-import type { ColorPalette, RadiusKey, SpacingKey, Theme } from "../../theme/types.js";
-export type BackgroundToken = keyof ColorPalette["background"];
+import type { RadiusName, SpaceName, Theme } from "../../theme/types.js";
+export type BackgroundToken = "bg" | "bg-subtle" | "bg-muted" | "surface" | "scrim" | "surface-inverse";
 export interface BoxProps extends ViewProps {
     /** padding (all sides) */
-    p?: SpacingKey;
+    p?: SpaceName;
     /** paddingHorizontal */
-    px?: SpacingKey;
+    px?: SpaceName;
     /** paddingVertical */
-    py?: SpacingKey;
-    pt?: SpacingKey;
-    pr?: SpacingKey;
-    pb?: SpacingKey;
-    pl?: SpacingKey;
+    py?: SpaceName;
+    pt?: SpaceName;
+    pr?: SpaceName;
+    pb?: SpaceName;
+    pl?: SpaceName;
     /** margin (all sides) */
-    m?: SpacingKey;
-    mx?: SpacingKey;
-    my?: SpacingKey;
-    mt?: SpacingKey;
-    mr?: SpacingKey;
-    mb?: SpacingKey;
-    ml?: SpacingKey;
+    m?: SpaceName;
+    mx?: SpaceName;
+    my?: SpaceName;
+    mt?: SpaceName;
+    mr?: SpaceName;
+    mb?: SpaceName;
+    ml?: SpaceName;
     /** Flexbox gap between children (spacing token). */
-    gap?: SpacingKey;
-    /** Background — a `colors.background.*` token or a raw colour string. */
+    gap?: SpaceName;
+    /** Background: a colour name (bg, bg-subtle, bg-muted, surface, scrim, surface-inverse) or a raw colour string. */
     bg?: BackgroundToken | (string & {});
-    radius?: RadiusKey;
-    /** Draw a hairline border in `colors.border.primary`. */
+    radius?: RadiusName;
+    /** Draw a hairline border in `colors.border`. */
     border?: boolean;
     flex?: number;
     align?: ViewStyle["alignItems"];
@@ -46,7 +46,7 @@ export type RowProps = Omit<BoxProps, "direction">;
 declare const Row: React.ForwardRefExoticComponent<RowProps & React.RefAttributes<RNView>>;
 export interface SpacerProps {
     /** Fixed spacer of this spacing token. Omit for a flexible spacer (`flex: 1`). */
-    size?: SpacingKey;
+    size?: SpaceName;
     style?: StyleProp<ViewStyle>;
     testID?: string;
 }

package/lib/typescript/module/components/Button/Button.d.ts

@@ -13,11 +13,11 @@ import type { SlotIcon } from "../AppIcon/slotIcon.js";
  * the left on press and stays. `glass` is the odd one out: a frosted white
  * fill with a bright rim and dark ink, for a button sitting on a brand
  * gradient or a photo, where a tone fill would fight the surface. Its
- * colours come from `theme.colors.glass`, the same in both schemes, and the
+ * colours are the `glass-*` tokens, the same in both schemes, and the
  * tone only inks a badged icon.
  */
 export type ButtonVariant = "solid" | "soft" | "outline" | "ghost" | "link" | "glass";
-export type ButtonTone = "primary" | "secondary" | "success" | "warning" | "error" | "neutral";
+export type ButtonTone = "primary" | "secondary" | "success" | "warning" | "danger" | "neutral";
 export type ButtonSize = "xs" | "sm" | "md" | "lg" | "xl";
 export interface ButtonProps extends Omit<PressableProps, "style" | "children"> {
     /** The label, and the button's accessible name unless `accessibilityLabel` is set. */
@@ -65,7 +65,7 @@ export interface ButtonProps extends Omit<PressableProps, "style" | "children">
     haptic?: HapticType | false;
     rounded?: boolean;
     /**
-     * Optional gradient background. Pass either a key from `theme.gradients`
+     * Optional gradient background. Pass either a key from `theme.settings.gradients`
      * (e.g. `"primary"`) or a `GradientDefinition` literal.
      */
     gradient?: string | GradientDefinition;

package/lib/typescript/module/components/Calendar/Calendar.d.ts

@@ -14,7 +14,7 @@ export interface CalendarMarkedDate {
     kind: CalendarMarkKind;
     /** What the day is ("Dussehra", "Casual leave"); read aloud before the kind. */
     label?: string;
-    /** Dot colour. Default: `error` for a holiday, `primary` for an event, `warning` for pending. */
+    /** Dot colour. Default: `danger` for a holiday, `primary` for an event, `warning` for pending. */
     tone?: StatusBadgeTone;
 }
 /** A selection. Single mode uses `start` only; a range in progress has no `end` yet. */

package/lib/typescript/module/components/Calendar/calendarStyles.d.ts

@@ -19,7 +19,7 @@ export declare const buildCalendarStyles: (theme: Theme) => {
         borderCurve: "continuous";
         width: number;
         height: number;
-        borderRadius: 9999;
+        borderRadius: number;
     };
     navBtnPressed: {
         backgroundColor: string;
@@ -28,8 +28,8 @@ export declare const buildCalendarStyles: (theme: Theme) => {
         opacity: number;
     };
     navText: {
-        fontWeight?: "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | "ultralight" | "thin" | "light" | "medium" | "regular" | "semibold" | "condensedBold" | "condensed" | "heavy" | "black" | undefined | undefined;
         fontFamily?: string | undefined | undefined;
+        fontWeight?: "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | "ultralight" | "thin" | "light" | "medium" | "regular" | "semibold" | "condensedBold" | "condensed" | "heavy" | "black" | undefined | undefined;
         fontSize: number;
         lineHeight: number;
         color: string;
@@ -39,8 +39,8 @@ export declare const buildCalendarStyles: (theme: Theme) => {
         alignItems: "center";
     };
     headerLabel: {
-        fontWeight?: "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | "ultralight" | "thin" | "light" | "medium" | "regular" | "semibold" | "condensedBold" | "condensed" | "heavy" | "black" | undefined | undefined;
         fontFamily?: string | undefined | undefined;
+        fontWeight?: "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | "ultralight" | "thin" | "light" | "medium" | "regular" | "semibold" | "condensedBold" | "condensed" | "heavy" | "black" | undefined | undefined;
         fontSize: number;
         color: string;
     };
@@ -54,8 +54,8 @@ export declare const buildCalendarStyles: (theme: Theme) => {
         paddingVertical: number;
     };
     weekdayText: {
-        fontWeight?: "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | "ultralight" | "thin" | "light" | "medium" | "regular" | "semibold" | "condensedBold" | "condensed" | "heavy" | "black" | undefined | undefined;
         fontFamily?: string | undefined | undefined;
+        fontWeight?: "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | "ultralight" | "thin" | "light" | "medium" | "regular" | "semibold" | "condensedBold" | "condensed" | "heavy" | "black" | undefined | undefined;
         fontSize: number;
         color: string;
         letterSpacing: number;
@@ -67,7 +67,7 @@ export declare const buildCalendarStyles: (theme: Theme) => {
     dayCell: {
         alignItems: "center";
         justifyContent: "center";
-        padding: 0;
+        padding: number;
     };
     barLeft: {
         position: "absolute";
@@ -92,17 +92,17 @@ export declare const buildCalendarStyles: (theme: Theme) => {
         height: "90%";
         alignItems: "center";
         justifyContent: "center";
-        borderRadius: 9999;
+        borderRadius: number;
     };
     dayEdge: {
         backgroundColor: string;
     };
     dayMid: {
-        borderRadius: 0;
+        borderRadius: number;
     };
     dayText: {
-        fontWeight?: "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | "ultralight" | "thin" | "light" | "medium" | "regular" | "semibold" | "condensedBold" | "condensed" | "heavy" | "black" | undefined | undefined;
         fontFamily?: string | undefined | undefined;
+        fontWeight?: "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | "ultralight" | "thin" | "light" | "medium" | "regular" | "semibold" | "condensedBold" | "condensed" | "heavy" | "black" | undefined | undefined;
         fontSize: number;
     };
     dayStruck: {
@@ -118,7 +118,7 @@ export declare const buildCalendarStyles: (theme: Theme) => {
         borderCurve: "continuous";
         width: number;
         height: number;
-        borderRadius: 9999;
+        borderRadius: number;
     };
 };
 export type CalendarStyles = ReturnType<typeof buildCalendarStyles>;

package/lib/typescript/module/components/Card/Card.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import type { GestureResponderEvent, ImageSourcePropType, PressableProps, View as RNView, StyleProp, ViewStyle } from "react-native";
-import type { ColorPalette, GradientDefinition } from "../../theme/types.js";
+import type { GradientDefinition, ShadowName } from "../../theme/types.js";
 import type { HapticType } from "../../utils/hapticUtils.js";
 import type { ContextMenuConfig } from "../Menu/useContextMenu.js";
 export type CardVariant = "elevated" | "outlined" | "filled" | "flat";
@@ -10,10 +10,12 @@ export interface CardTextAction {
     onPress: () => void;
     accessibilityLabel?: string;
 }
-export type CardElevation = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+export type CardElevation = "none" | ShadowName;
 export type CardRadius = "sm" | "md" | "lg" | "xl";
 export type CardPadding = "none" | "sm" | "md" | "lg" | "xl";
-export type CardBackground = keyof ColorPalette["background"] | (string & {});
+declare const BACKGROUND_TOKENS: readonly ["bg", "bg-subtle", "bg-muted", "surface", "scrim", "surface-inverse"];
+type CardBackgroundToken = (typeof BACKGROUND_TOKENS)[number];
+export type CardBackground = CardBackgroundToken | (string & {});
 export interface CardProps extends Omit<PressableProps, "style" | "children"> {
     children?: React.ReactNode;
     variant?: CardVariant;
@@ -22,8 +24,7 @@ export interface CardProps extends Omit<PressableProps, "style" | "children"> {
     padding?: CardPadding;
     interactive?: boolean;
     /**
-     * Background colour: a `colors.background.*` token or any raw colour
-     * string. Applies on every variant and replaces the variant's default
+     * Background colour: a background colour name (`bg`, `bg-subtle`, `bg-muted`, `surface`, `scrim`, `surface-inverse`) or any raw colour string. Applies on every variant and replaces the variant's default
      * surface colour; `style` / `containerStyle` still win over it.
      */
     bg?: CardBackground;
@@ -64,7 +65,7 @@ export interface CardProps extends Omit<PressableProps, "style" | "children"> {
      */
     loading?: boolean;
     /**
-     * Optional gradient background. Pass a key from `theme.gradients` or a
+     * Optional gradient background. Pass a key from `theme.settings.gradients` or a
      * literal `GradientDefinition`. Layered behind the card's content so
      * existing variant/elevation/radius continue to work.
      */

package/lib/typescript/module/components/Checkbox/Checkbox.d.ts

@@ -2,7 +2,7 @@ import type React from "react";
 import type { PressableProps, View as RNView, StyleProp, TextStyle, ViewStyle } from "react-native";
 import type { HapticType } from "../../utils/hapticUtils.js";
 export type CheckboxSize = "sm" | "md" | "lg";
-export type CheckboxTone = "primary" | "success" | "warning" | "error";
+export type CheckboxTone = "primary" | "success" | "warning" | "danger";
 export interface CheckboxProps extends Omit<PressableProps, "style" | "children" | "onPress"> {
     checked?: boolean;
     defaultChecked?: boolean;

package/lib/typescript/module/components/Chip/Chip.d.ts

@@ -9,7 +9,7 @@ import type { SlotIcon } from "../AppIcon/slotIcon.js";
  * IconButton draw as `soft`).
  */
 export type ChipVariant = "filled" | "outlined" | "soft";
-export type ChipTone = "primary" | "neutral" | "success" | "warning" | "error" | "info";
+export type ChipTone = "primary" | "neutral" | "success" | "warning" | "danger" | "info";
 export type ChipSize = "sm" | "md";
 export type ChipSelectionMode = "single" | "multiple" | "radio";
 export interface ChipProps {

package/lib/typescript/module/components/ChoiceGroup/ChoiceGroup.d.ts

@@ -89,7 +89,7 @@ interface BaseChoiceGroupProps<T = ChoiceOption> {
     indicatorPosition?: ChoiceGroupIndicatorPosition;
     /** Main axis of the option list. Default `'row'`. */
     direction?: ChoiceGroupDirection;
-    /** Gap between options. Default `theme.spacing.sm`. */
+    /** Gap between options. Default `theme.space.sm`. */
     gap?: number;
     /** Allow options to wrap onto multiple lines (swatch grids). Default `false`. */
     wrap?: boolean;

package/lib/typescript/module/components/Dialog/Dialog.d.ts

@@ -1,8 +1,8 @@
 import type React from "react";
 import type { StyleProp, TextStyle, ViewStyle } from "react-native";
 import type { HapticType } from "../../utils/hapticUtils.js";
-export type DialogVariant = "default" | "success" | "warning" | "error" | "info";
-export type DialogActionTone = "primary" | "neutral" | "info" | "error";
+export type DialogVariant = "default" | "success" | "warning" | "danger" | "info";
+export type DialogActionTone = "primary" | "neutral" | "info" | "danger";
 export interface DialogAction {
     label: string;
     onPress: () => void;

package/lib/typescript/module/components/FieldBase/Chevron.d.ts

@@ -4,7 +4,7 @@
  * One glyph for Select, InlineSelect, PickerTrigger and PhoneNumberInput so
  * the indicator never drifts between trigger components. It is the design
  * system's line chevron (AppIcon `chevron-down`), reached through the icon
- * registry so an app can swap it with `theme.icons.chevronDown`; it used to
+ * registry so an app can swap it with `theme.settings.icons.chevronDown`; it used to
  * be a filled triangle drawn with view borders. Pass `open` to get the 180°
  * rotate-on-open animation; omit it for a static chevron.
  */

package/lib/typescript/module/components/FieldBase/FieldBase.d.ts

@@ -9,7 +9,7 @@
  * props or via theme tokens — never accidental drift.
  *
  * Responsibilities:
- *   - Resolve size / variant dimensions from `theme.components.field`.
+ *   - Resolve size dimensions from `theme.components.field`.
  *   - Animate the border + background between idle / focused / error.
  *   - Render leading + trailing slots either side of `children`.
  *   - Become Pressable when `onPress` is set (Select, PickerTrigger).
@@ -24,9 +24,10 @@
 import type React from "react";
 import type { AccessibilityRole, AccessibilityState, StyleProp, TextStyle, ViewStyle } from "react-native";
 import { Animated } from "react-native";
-import type { FieldSide, FieldVariantTokens, Theme } from "../../theme/types.js";
+import type { Theme } from "../../theme/types.js";
 export type FieldBaseSize = "sm" | "md" | "lg";
 export type FieldBaseVariant = "outlined" | "filled" | "underline";
+type FieldSide = "top" | "right" | "bottom" | "left";
 /**
  * Pick the most "representative" side colour from a 4-side record. Used by
  * consumers (Input's selectionColor, focus rings, etc.) that need a single
@@ -40,7 +41,7 @@ export interface FieldBaseProps {
     size?: FieldBaseSize;
     /**
      * Controls the resting fill + border treatment. Override the theme default
-     * (`theme.components.field.defaultVariant`) via this prop. Default `'outlined'`.
+     * (`theme.settings.components.field.defaultVariant`) via this prop. Default `'outlined'`.
      */
     variant?: FieldBaseVariant;
     /** Parent-controlled focus state — drives the border + fill animation. */
@@ -124,7 +125,7 @@ export interface FieldBaseProps {
     borderBottomLeftRadius?: number;
     /** Bottom-right corner radius. Wins over `borderRadius`. */
     borderBottomRightRadius?: number;
-    /** Override border width (shorthand — all four sides). OTP uses 1.5; everything else inherits `colors.border.width`. */
+    /** Override border width (shorthand — all four sides). OTP uses 1.5; everything else inherits `size.border`. */
     borderWidth?: number;
     /** Top border width. Wins over `borderWidth`. */
     borderTopWidth?: number;
@@ -134,9 +135,8 @@ export interface FieldBaseProps {
     borderBottomWidth?: number;
     /** Left border width. Wins over `borderWidth`. */
     borderLeftWidth?: number;
-    /** Gap between leading / children / trailing. Defaults to `theme.spacing.md` (the spec's 12px). */
+    /** Gap between leading / children / trailing. Defaults to `theme.space.md` (the spec's 12px). */
     gap?: number;
-    fillOverrides?: Partial<FieldVariantTokens>;
     style?: StyleProp<ViewStyle>;
     testID?: string;
     accessibilityRole?: AccessibilityRole;
@@ -165,18 +165,17 @@ export interface FieldTextStyle {
     weightStyle: Pick<TextStyle, "fontFamily" | "fontWeight">;
 }
 /**
- * Resolve the canonical text style chunk for a field's value. Reads from
- * `theme.components.field.{textColor,disabledTextColor,placeholderColor,fontWeight}`
- * first, then the field palette (`theme.colors.field`); brand fonts wired via
- * `typography.fontFamily` apply via the shared `fontFor` helper.
+ * Resolve the canonical text style chunk for a field's value. Reads the field
+ * colours from the theme and the face through the shared `fontFor` helper, so
+ * every field component renders the same value and placeholder ink.
  */
 export declare const resolveFieldTextStyle: (theme: Theme, options?: FieldTextStyleResolverOptions) => FieldTextStyle;
 /**
  * The required-field marker appended to a field's label. Single source of
  * truth for the whole field family (Input, Select, FormField, PickerTrigger →
- * Date/Time/DateRange pickers). Themeable via
- * `theme.components.field.{requiredMarker,requiredMarkerColor}`; font family /
- * weight / size are inherited from the parent label `<Text>`.
+ * Date/Time/DateRange pickers). Its text is `theme.settings.components.field.requiredMarker`
+ * (default `*`) in `colors["danger-text"]`; font family / weight / size are
+ * inherited from the parent label `<Text>`.
  */
 export declare const RequiredMark: React.FC;
 /**
@@ -200,9 +199,9 @@ export declare const RequiredPlaceholder: React.FC<{
 }>;
 /**
  * The circled-exclamation glyph that leads a field's error message. Uses the
- * theme's `icons.error` renderer when one is registered; otherwise draws a
- * ring-and-bang from views so the message never renders bare. Shared by
- * every field component that shows an error line (Input, Select, FormField,
+ * theme's `settings.icons.error` renderer when one is registered; otherwise
+ * draws a ring-and-bang from views so the message never renders bare. Shared
+ * by every field component that shows an error line (Input, Select, FormField,
  * the pickers) so the message row reads identically across the family.
  */
 export declare const FieldErrorGlyph: React.FC<{
@@ -223,8 +222,8 @@ export declare const hasFieldText: (value: React.ReactNode) => boolean;
  */
 export declare const fieldTextAsString: (value: React.ReactNode) => string | undefined;
 /**
- * The static label above a field, per the design spec: `field.label` ink,
- * the size ladder's `labelFontSize`, semibold, `labelGap` below. It stays on
+ * The static label above a field, per the design spec: `field-label` ink,
+ * the size ladder's `label-text` size, semibold, `label-gap` below. It stays on
  * that ink through focus and error (the ring and the message row carry the
  * error). Shared by Input, Select, PickerTrigger, NumberInput. The label may
  * be a string or a node, and `help` (a glossary button, say) is drawn right
@@ -237,15 +236,15 @@ export declare const FieldLabel: React.FC<{
     required?: boolean;
     /** Drawn beside the label, after the required marker. */
     help?: React.ReactNode;
-    /** Label ink; defaults to `colors.field.label`. */
+    /** Label ink; defaults to `colors["field-label"]`. */
     color?: string;
     style?: StyleProp<TextStyle>;
 }>;
 /**
- * The helper / error line under a field: `messageFontSize`, `messageGap`
- * from the box, `field.message` red with the circled-exclamation glyph when
- * `error`, `text.secondary` otherwise. The text may be a string or a node.
- * Renders nothing without text.
+ * The helper / error line under a field: the `message-text` size and
+ * `message-gap` from the box, `field-message` red with the circled-exclamation
+ * glyph when `error`, `text-muted` otherwise. The text may be a string or a
+ * node. Renders nothing without text.
  */
 export declare const FieldMessage: React.FC<{
     text?: React.ReactNode;
@@ -254,12 +253,12 @@ export declare const FieldMessage: React.FC<{
     style?: StyleProp<TextStyle>;
 }>;
 /**
- * Strict, fully-resolved colour set used internally. Mirrors `FieldVariantTokens`
- * but every border colour / width is expanded to a 4-side record by the time
- * the box renders, so the animation pipeline can treat per-side and shorthand
- * the same way. `borderFocusedRepresentative` is a single colour pulled from
- * the focused sides — exposed for consumers (Input's selectionColor) that
- * need to mirror the visible focus indicator without re-resolving per side.
+ * Strict, fully-resolved colour set used internally. Every border colour /
+ * width is expanded to a 4-side record by the time the box renders, so the
+ * animation pipeline can treat per-side and shorthand the same way.
+ * `borderFocusedRepresentative` is a single colour pulled from the focused
+ * sides — exposed for consumers (Input's selectionColor) that need to mirror
+ * the visible focus indicator without re-resolving per side.
  */
 interface ResolvedFieldColors {
     backgroundIdleEmpty: string;
@@ -279,11 +278,11 @@ interface ResolvedFieldColors {
 }
 /**
  * Resolve the full set of state-aware fill + border colours for a given
- * variant. Order: explicit override → theme token → library default. Border
- * colour + width are normalized to per-side records here; callers that need
- * a single colour read `borderFocusedRepresentative`.
+ * variant, from the field colour names. Border colour + width are normalized
+ * to per-side records here; callers that need a single colour read
+ * `borderFocusedRepresentative`.
  */
-export declare const resolveVariantColors: (theme: Theme, variant: FieldBaseVariant, override?: Partial<FieldVariantTokens>) => ResolvedFieldColors;
+export declare const resolveVariantColors: (theme: Theme, variant: FieldBaseVariant) => ResolvedFieldColors;
 export declare const FieldBase: React.FC<FieldBaseProps>;
 export default FieldBase;
 //# sourceMappingURL=FieldBase.d.ts.map

package/lib/typescript/module/components/FieldBase/useFloatingLabel.d.ts

@@ -15,8 +15,7 @@
  */
 import type React from "react";
 import type { StyleProp, TextStyle } from "react-native";
-import { type Resolved } from "../../theme/index.js";
-import type { FieldSizeTokens } from "../../theme/types.js";
+import { type resolveFieldSize } from "../../theme/index.js";
 import type { FieldBaseProps, FieldBaseVariant } from "./FieldBase.js";
 /** The floated label's scale; the outlined notch is sized from it. */
 export declare const FLOATED_LABEL_SCALE = 0.85;
@@ -29,7 +28,7 @@ export interface UseFloatingLabelOptions {
     floated: boolean;
     required?: boolean;
     variant: FieldBaseVariant;
-    sizeTokens: Resolved<FieldSizeTokens>;
+    sizeTokens: ReturnType<typeof resolveFieldSize>;
     /** Where the text starts past the leading slot (icon, gaps, divider), px. */
     leadingOffset: number;
     /** Width the trailing slot takes, for a right-aligned label, px. */

package/lib/typescript/module/components/FloatingActionButton/FloatingActionButton.d.ts

@@ -2,10 +2,10 @@ import React from "react";
 import type { View as RNView, StyleProp, ViewStyle } from "react-native";
 import type { HapticType } from "../../utils/hapticUtils.js";
 export type FloatingActionButtonSize = "sm" | "md" | "lg";
-export type FloatingActionButtonTone = "primary" | "success" | "warning" | "error" | "neutral";
+export type FloatingActionButtonTone = "primary" | "success" | "warning" | "danger" | "neutral";
 export type FloatingActionButtonPosition = "bottomRight" | "bottomLeft" | "bottomCenter";
 export interface FloatingActionButtonProps {
-    /** JSX element for the icon. The FAB sizes it via the `size` prop's iconSize token. */
+    /** JSX element for the icon. The FAB sizes it with the size's `icon` token. */
     icon: React.ReactNode;
     onPress: () => void;
     /** Text beside the icon; makes the button extended (a pill). */

package/lib/typescript/module/components/FormField/FormField.d.ts

@@ -18,9 +18,8 @@ export interface FormFieldProps {
      */
     error?: React.ReactNode;
     /**
-     * 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;
     /**

package/lib/typescript/module/components/IconBadge/IconBadge.d.ts

@@ -2,7 +2,7 @@ import type { View as RNView, StyleProp, ViewStyle } from "react-native";
 import type { IconVariant } from "../AppIcon/AppIcon.js";
 import type { SlotIcon } from "../AppIcon/slotIcon.js";
 export type IconBadgeSize = "sm" | "md" | "lg";
-export type IconBadgeTone = "primary" | "secondary" | "success" | "warning" | "error" | "info" | "neutral";
+export type IconBadgeTone = "primary" | "secondary" | "success" | "warning" | "danger" | "info" | "neutral";
 export interface IconBadgeProps {
     /**
      * The icon: an AppIcon name (`icon="shield-tick"`), `{ name, variant }`, a

package/lib/typescript/module/components/IconButton/IconButton.d.ts

@@ -2,11 +2,11 @@ import type { GestureResponderEvent, View as RNView, StyleProp, ViewStyle } from
 import type { HapticType } from "../../utils/index.js";
 import type { IconVariant } from "../AppIcon/AppIcon.js";
 import type { SlotIcon } from "../AppIcon/slotIcon.js";
-export type IconButtonTone = "primary" | "secondary" | "success" | "warning" | "error" | "neutral";
+export type IconButtonTone = "primary" | "secondary" | "success" | "warning" | "danger" | "neutral";
 /**
  * `glass` is a frosted white fill with a bright rim and dark ink, for a
  * button over a brand gradient or a photo (a back button on a hero). Its
- * colours are `theme.colors.glass`, the same in both schemes; the tone is
+ * colours are the glass colours (`glass-fill`, `glass-border`, `on-glass`), the same in both schemes; the tone is
  * unused unless `active` forces the solid fill.
  */
 export type IconButtonVariant = "solid" | "soft" | "outline" | "ghost" | "glass";

package/lib/typescript/module/components/InlineSelect/InlineSelect.d.ts

@@ -68,9 +68,8 @@ export interface InlineSelectProps<T = SelectOption> {
      */
     size?: InlineSelectSize;
     /**
-     * Trigger text + chevron colour. Resolution: prop →
-     * `theme.components.inlineSelect.color` → `colors.primary`
-     * (`text.disabled` when disabled).
+     * Trigger text and chevron colour. Resolution: prop, then `colors.primary`
+     * (`text-disabled` when disabled).
      */
     color?: string;
     /** Chevron colour override — falls back to `color`'s resolution. */

package/lib/typescript/module/components/Input/Input.d.ts

@@ -21,7 +21,7 @@ export type InputKeyboardType = "default" | "email-address" | "numeric" | "phone
 export interface InputSlotState extends SlotIconState {
     focused: boolean;
     error: boolean;
-    /** The field palette's icon colour for this state (`colors.field.icon*`). */
+    /** The field palette's icon colour for this state (`field-icon`, `field-icon-focus`, `field-icon-disabled`). */
     color: string;
     /** The size ladder's icon size for the field's `size`. */
     size: number;
@@ -133,7 +133,7 @@ export interface InputProps extends Omit<TextInputProps, "style"> {
      * - `'float'`: Material-Design floating label that animates from inside the
      *   field to the top border on focus / when there's a value.
      *
-     * Theme override: `theme.components.input.defaultLabelMode`.
+     * Theme setting: `theme.settings.components.input.defaultLabelMode`.
      */
     labelMode?: InputLabelMode;
     required?: boolean;

package/lib/typescript/module/components/Notation/Notation.d.ts

@@ -25,7 +25,7 @@ export interface NotationProps {
     desc?: string;
     /**
      * Subscript ink. Inside a field's or choice's label or message line it defaults to that line's
-     * ink, elsewhere to `colors.text.primary`; pass the parent's colour when it differs.
+     * ink, elsewhere to `colors["text-body"]`; pass the parent's colour when it differs.
      */
     color?: string;
     testID?: string;