@webority/mobile-ui 0.88.0 → 0.89.0

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

@@ -1,7 +1,7 @@
 import type React from "react";
-import type { TextStyle, ViewStyle } from "react-native";
-import type { ComponentTokens } from "./componentTokens.js";
-export type ColorMode = "light" | "dark";
+import type { TextStyle } from "react-native";
+import type { ColorName, FontFaces, FontName, LetterSpacingName, RadiusName, TextName, TokenSet, WeightName } from "./tokens.generated.js";
+export type ColorMode = TokenSet["mode"];
 /**
  * A linear gradient definition used by Button, Card and consumer components.
  * `colors` must have at least 2 entries. `start`/`end` are unit vectors in a
@@ -20,7 +20,7 @@ export interface GradientDefinition {
     };
 }
 export interface GradientScale {
-    /** Brand-primary gradient — used by `Button gradient` and `Card gradient="primary"`. */
+    /** Brand-primary gradient: used by `Button gradient` and `Card gradient="primary"`. */
     primary?: GradientDefinition;
     /** Secondary brand gradient. */
     secondary?: GradientDefinition;
@@ -29,298 +29,10 @@ export interface GradientScale {
     /** Free-form named gradients. Consumer extends as needed. */
     [key: string]: GradientDefinition | undefined;
 }
-export interface ColorPalette {
-    primary: string;
-    primaryHover: string;
-    primaryPressed: string;
-    primaryMuted: string;
-    secondary: string;
-    secondaryHover: string;
-    success: string;
-    warning: string;
-    error: string;
-    info: string;
-    /**
-     * Foreground (text/icon) colour to render ON a solid fill of each semantic
-     * tone. Solid Button / Badge / Chip / Banner backgrounds read these instead
-     * of assuming `text.inverse` (white) — white-on-pale (notably `warning`
-     * amber) fails contrast. Library defaults use white on the light scheme's
-     * primary/success/error/info and dark ink on `warning` and on every dark
-     * scheme tone, each pair at 4.5:1 or more, and `text.primary` for the
-     * surface-like `secondary` tone. A brand that overrides a tone colour (or
-     * its `on*` ink) gets the FILL moved, in its own hue, until the pair reads
-     * at 4.5:1 (`mergeTheme`); override per-brand to match your palette's
-     * luminance.
-     */
-    onPrimary: string;
-    /** Text and icons on a filled neutral surface. */
-    onNeutral: string;
-    onSecondary: string;
-    onSuccess: string;
-    onWarning: string;
-    onError: string;
-    onInfo: string;
-    /** Ink on a scrim (`background.overlay`), which is dark in both schemes. */
-    onOverlay: string;
-    /**
-     * Each tone as TEXT, on the page surfaces and on that tone's own soft tint
-     * (14% of the tone). The tone colours above are fills: `warning` amber and
-     * `success` green sit near 2:1 as small text on a light page. These hold
-     * 4.5:1 against every `background.*` and the soft tint in both schemes, in
-     * the tone's own hue. Every component that draws a tone as text (soft and
-     * outline `StatusBadge`, `Banner`, `Chip`, `Button` soft / outline / ghost
-     * labels, `Avatar` initials on a tint, a field's required marker, the
-     * `FormField` hint and `ErrorBoundary` text) reads them. A brand that
-     * overrides a tone colour overrides its ink too.
-     */
-    toneText: {
-        primary: string;
-        success: string;
-        warning: string;
-        error: string;
-        info: string;
-    };
-    text: {
-        primary: string;
-        secondary: string;
-        tertiary: string;
-        inverse: string;
-        /** Emphasis ink for labels and lead-in lines that sit above body text. */
-        strong: string;
-        disabled: string;
-        link: string;
-    };
-    background: {
-        primary: string;
-        secondary: string;
-        tertiary: string;
-        elevated: string;
-        overlay: string;
-        inverse: string;
-    };
-    border: {
-        primary: string;
-        secondary: string;
-        focus: string;
-        error: string;
-        /**
-         * Global outline thickness shared by every input-style control —
-         * Input, SearchBar, Select, OTPInput, Checkbox, Radio, outlined Card,
-         * outline Chip, Avatar border, outline Button, etc. Library default: 1.5.
-         * Component-specific tokens (e.g. `theme.components.input.borderWidth`)
-         * still win when set.
-         */
-        width: number;
-    };
-    /**
-     * The field family's own palette — Input, Select, SearchBar, NumberInput,
-     * PhoneNumberInput, the picker triggers: everything that composes
-     * FieldBase. Kept apart from the brand tones because a field's resting fill,
-     * hairline border and focus ring are a quieter set than `primary` /
-     * `border.focus` (the design spec draws the focus ring in a soft blue while
-     * buttons stay on the brand colour). Each key names the state it paints.
-     */
-    field: {
-        /** Resting fill (idle, empty or filled alike). */
-        background: string;
-        /** Fill while focused. */
-        backgroundFocused: string;
-        /** Fill while disabled. */
-        backgroundDisabled: string;
-        /** Resting hairline border (outlined box, underline rule, leading-icon divider). */
-        border: string;
-        /** Border while focused. */
-        borderFocused: string;
-        /** Border while in error. */
-        borderError: string;
-        /** Static label above the field. Stays put across focus/error. */
-        label: string;
-        /** Typed value. */
-        text: string;
-        /** Typed value while disabled; the spec dims it to the disabled placeholder ink. */
-        textDisabled: string;
-        /** Placeholder while enabled. */
-        placeholder: string;
-        /** Placeholder while disabled. */
-        placeholderDisabled: string;
-        /** Leading / trailing icon while idle. */
-        icon: string;
-        /** Leading / trailing icon while focused. */
-        iconFocused: string;
-        /** Leading / trailing icon while disabled. */
-        iconDisabled: string;
-        /** Caret and text-selection tint. */
-        caret: string;
-        /** Error message text and its glyph below the field. */
-        message: string;
-    };
-    surface: {
-        pressed: string;
-        hovered: string;
-        selected: string;
-        disabled: string;
-    };
-    /**
-     * A frosted control on a coloured or gradient surface: the `glass` variant
-     * of Button and IconButton (a "Switch" pill on a brand-colour card, a back
-     * button over a hero image). The surface under it is the brand colour in
-     * both colour schemes, so unlike every other group these values are the
-     * SAME in the light and dark themes. Bound to `text.inverse` they would
-     * flip with the scheme and put near-white ink on a pale fill in dark mode.
-     * A brand whose gradients are pale overrides the group.
-     */
-    glass: {
-        /** Translucent white fill; the surface shows through it. */
-        fill: string;
-        /** Specular rim, a step brighter than the fill, so the box has an edge. */
-        border: string;
-        /** Label and icon ink on the fill. */
-        on: string;
-        /** Opaque disc behind a badged slot icon (`Button leftIconBadge`). */
-        badge: string;
-    };
-    skeleton: {
-        background: string;
-        highlight: string;
-    };
-    /**
-     * Fixed hue set Avatar hashes a user's name against to pick an initials
-     * background — same index always resolves to the same colour for a given
-     * name. Light/dark themes each tune the 8 hues for contrast against their
-     * own surface; the hues themselves stay recognisably paired across modes.
-     */
-    avatarPalette: readonly string[];
-}
-export interface FontFamilyScale {
-    /** Font family for normal-weight text. Falls back to platform system font when undefined. */
-    regular?: string;
-    medium?: string;
-    semibold?: string;
-    bold?: string;
-    /**
-     * The title face (a serif, say). The built-in `display`, `h1`, `h2` and
-     * `title` `Text` variants, and a registered variant with
-     * `fontFamily: 'display'`, draw in it; when unset they use the weight faces
-     * above. It is one face: the variant's weight is not sent alongside it, so
-     * register the weight you want as this face.
-     */
-    display?: string;
-}
-export interface TypographyScale {
-    fontSize: {
-        xs: number;
-        sm: number;
-        base: number;
-        lg: number;
-        xl: number;
-        "2xl": number;
-        "3xl": number;
-        "4xl": number;
-    };
-    fontWeight: {
-        normal: TextStyle["fontWeight"];
-        medium: TextStyle["fontWeight"];
-        semibold: TextStyle["fontWeight"];
-        bold: TextStyle["fontWeight"];
-    };
-    /**
-     * Optional brand font families. When set, library text components prefer
-     * `fontFamily.<weight>` over `fontWeight.<weight>` to match the consumer
-     * app's typeface. Each key is independently optional — leave undefined to
-     * fall back to the system font for that weight.
-     */
-    fontFamily?: FontFamilyScale;
-    lineHeight: {
-        tight: number;
-        normal: number;
-        relaxed: number;
-    };
-    letterSpacing: {
-        tight: number;
-        normal: number;
-        wide: number;
-    };
-}
-export interface SpacingScale {
-    none: 0;
-    xxs: number;
-    xs: number;
-    sm: number;
-    md: number;
-    lg: number;
-    xl: number;
-    "2xl": number;
-    "3xl": number;
-    "4xl": number;
-}
-export interface RadiusScale {
-    none: 0;
-    sm: number;
-    md: number;
-    lg: number;
-    xl: number;
-    pill: 9999;
-}
-export type SpacingKey = keyof SpacingScale;
-export type FontSizeKey = keyof TypographyScale["fontSize"];
-export type RadiusKey = keyof RadiusScale;
-export interface ShadowDefinition {
-    shadowColor: string;
-    shadowOffset: {
-        width: number;
-        height: number;
-    };
-    shadowOpacity: number;
-    shadowRadius: number;
-    elevation: number;
-}
-export interface ShadowScale {
-    none: ViewStyle;
-    xs: ShadowDefinition;
-    sm: ShadowDefinition;
-    md: ShadowDefinition;
-    lg: ShadowDefinition;
-    xl: ShadowDefinition;
-    "2xl": ShadowDefinition;
-}
-export interface MotionScale {
-    duration: {
-        instant: number;
-        fast: number;
-        normal: number;
-        slow: number;
-        slower: number;
-    };
-    easing: {
-        standard: readonly [number, number, number, number];
-        accelerate: readonly [number, number, number, number];
-        decelerate: readonly [number, number, number, number];
-        sharp: readonly [number, number, number, number];
-    };
-    spring: {
-        gentle: {
-            damping: number;
-            stiffness: number;
-            mass: number;
-        };
-        bouncy: {
-            damping: number;
-            stiffness: number;
-            mass: number;
-        };
-        snappy: {
-            damping: number;
-            stiffness: number;
-            mass: number;
-        };
-    };
-    /** Length in ms of the opacity fade that replaces movement under Reduce Motion. Never collapsed. */
-    fadeDuration: number;
-}
-export type * from "./componentTokens.js";
+export type * from "./tokens.generated.js";
 /**
  * Renderer signature for theme-level icons. Each registry entry receives a
- * pixel `size` and a `color` and returns whatever JSX the consumer wants —
+ * pixel `size` and a `color` and returns whatever JSX the consumer wants -
  * an SVG, a vector-icons glyph, an Image, an emoji-wrapped Text, anything.
  */
 export type IconRenderer = (props: {
@@ -331,21 +43,21 @@ export type IconRenderer = (props: {
  * Theme-level icon registry. Library components read from this when they
  * need to render an icon internally (Input password toggle, SearchBar
  * magnifier/clear, ImageGallery close, etc.). Consumers provide the
- * implementations — the library ships with no icon dependency.
+ * implementations: the library ships with no icon dependency.
  *
- * Slots default to `undefined` — if a slot is missing the library renders
+ * Slots default to `undefined`: if a slot is missing the library renders
  * a small text/SVG fallback (or nothing, depending on the call site).
  */
 export interface IconRegistry {
-    /** Magnifier icon — SearchBar leading slot when no `leftIcon` prop. */
+    /** Magnifier icon: SearchBar leading slot when no `leftIcon` prop. */
     search?: IconRenderer;
-    /** Close/dismiss icon — SearchBar clear, ImageGallery close, etc. */
+    /** Close/dismiss icon: SearchBar clear, ImageGallery close, etc. */
     close?: IconRenderer;
-    /** Show-password icon — Input password toggle (visible state). */
+    /** Show-password icon: Input password toggle (visible state). */
     eye?: IconRenderer;
-    /** Hide-password icon — Input password toggle (masked state). */
+    /** Hide-password icon: Input password toggle (masked state). */
     eyeOff?: IconRenderer;
-    /** Paperclip/attachment icon — FilePicker trigger. Text-only trigger when unset. */
+    /** Paperclip/attachment icon: FilePicker trigger. Text-only trigger when unset. */
     attachment?: IconRenderer;
     /**
      * Circled-exclamation glyph drawn before a field's error message. When
@@ -367,34 +79,97 @@ export interface IconRegistry {
      */
     selectedTick?: IconRenderer;
 }
-/**
- * An app's own text style, registered under a name in `theme.textVariants` and
- * used as `<Text variant="cardTitle">`. Sizes, line heights and letter spacing
- * take a typography token or a raw number.
- */
 export interface TextVariantSpec {
-    size: keyof TypographyScale["fontSize"] | number;
-    weight?: keyof TypographyScale["fontWeight"];
-    /** Pixels, or a `typography.lineHeight` token (a multiple of the size). Omitted: the font's own metrics decide. */
-    lineHeight?: number | keyof TypographyScale["lineHeight"];
-    /** A text role, semantic tone or raw colour. Defaults to `primary`. */
-    color?: string;
+    size: TextName;
+    weight?: WeightName;
+    /** Line height in px; when unset the variant takes its text step's own line height. */
+    lineHeight?: number;
+    color?: ColorName;
     uppercase?: boolean;
-    /** Pixels, or a `typography.letterSpacing` token. */
-    letterSpacing?: number | keyof TypographyScale["letterSpacing"];
+    letterSpacing?: LetterSpacingName;
     italic?: boolean;
     fontVariant?: TextStyle["fontVariant"];
-    /** `'display'` draws the variant in `typography.fontFamily.display` when the theme sets it; otherwise the weight faces. */
     fontFamily?: "display";
-    /** Announce text in this variant as a heading (accessibilityRole header). */
     heading?: boolean;
 }
-export interface Theme {
-    mode: ColorMode;
-    colors: ColorPalette;
-    typography: TypographyScale;
-    spacing: SpacingScale;
-    radius: RadiusScale;
+export type FieldVariant = "outlined" | "filled" | "underline";
+type ToneValue = "primary" | "success" | "warning" | "danger" | "info" | "neutral";
+export interface ComponentSettings {
+    field?: {
+        defaultVariant?: FieldVariant;
+        requiredMarker?: string;
+    };
+    input?: {
+        defaultVariant?: FieldVariant;
+        defaultLabelMode?: "float" | "top";
+        tintLabelOnFocus?: boolean;
+        shakeOnError?: boolean;
+    };
+    "search-bar"?: {
+        defaultVariant?: FieldVariant;
+    };
+    select?: {
+        defaultVariant?: FieldVariant;
+    };
+    "otp-input"?: {
+        shakeOnError?: boolean;
+    };
+    "option-sheet"?: {
+        selectedMarker?: "dot" | "icon";
+    };
+    "profile-picker"?: {
+        defaultTone?: ToneValue;
+        defaultVariant?: "solid" | "soft" | "outline";
+        defaultAvatarTone?: ToneValue | "secondary";
+    };
+    slider?: {
+        thumbPressAnimation?: boolean;
+    };
+    rating?: {
+        pulseOnPress?: boolean;
+    };
+    stepper?: {
+        pulseAnimation?: boolean;
+    };
+    tooltip?: {
+        enableScaleAnimation?: boolean;
+    };
+    toast?: {
+        enableSwipeDismiss?: boolean;
+        defaultDurationMs?: number;
+    };
+}
+export interface ThemeSettings {
+    icons?: IconRegistry;
+    gradients?: GradientScale;
+    textVariants?: Record<string, TextVariantSpec>;
+    maxFontSizeMultiplier?: number;
+    components?: ComponentSettings;
+}
+/** A product's brand, generated by `webority brand` as theme/generated/brand.phone.js. Never spacing, text or component sizes. */
+export interface BrandOverrides {
+    colors?: {
+        light?: Partial<Record<ColorName, string>>;
+        dark?: Partial<Record<ColorName, string>>;
+    };
+    radius?: Partial<Record<Exclude<RadiusName, "none" | "pill">, number>>;
+    font?: Partial<Record<FontName, FontFaces>>;
+}
+export interface Spring {
+    damping: number;
+    stiffness: number;
+    mass: number;
+}
+export interface SpringScale {
+    gentle: Spring;
+    bouncy: Spring;
+    snappy: Spring;
+}
+export interface Theme extends Omit<TokenSet, "motion"> {
+    motion: TokenSet["motion"] & {
+        spring: SpringScale;
+        fadeDuration: number;
+    };
     /**
      * Corner smoothing of the squircle Android draws behind Button, Card,
      * fields, Box and the other smooth-cornered hosts: 0 is a plain rounded
@@ -403,30 +178,12 @@ export interface Theme {
      * `SQUIRCLE_SMOOTHING` (0.6, Figma's "iOS" preset).
      */
     cornerSmoothing: number;
-    shadows: ShadowScale;
-    motion: MotionScale;
-    components: ComponentTokens;
-    /** Theme-level icon registry — see {@link IconRegistry}. */
-    icons?: IconRegistry;
-    /**
-     * Optional brand gradient palette. Empty by default — consumers register
-     * their own via theme overrides. Components that accept gradient inputs
-     * (Button, Card) read from here when consumers pass a string token, OR
-     * accept a `GradientDefinition` literal directly.
-     */
-    gradients: GradientScale;
-    /** The app's own `Text` variants, by name. A built-in variant name always wins. */
-    textVariants?: Record<string, TextVariantSpec>;
-    /**
-     * Upper bound on how far system font scaling grows any `Text`, as
-     * `maxFontSizeMultiplier`. Unset leaves React Native's default (no cap).
-     * A `maxFontSizeMultiplier` on the `Text` itself wins. Set it through
-     * ThemeProvider `lightOverrides` and `darkOverrides`.
-     */
-    maxFontSizeMultiplier?: number;
+    settings: {
+        icons: IconRegistry;
+        gradients: GradientScale;
+        textVariants: Record<string, TextVariantSpec>;
+        maxFontSizeMultiplier?: number;
+        components: ComponentSettings;
+    };
 }
-export type DeepPartial<T> = T extends object ? {
-    [K in keyof T]?: DeepPartial<T[K]>;
-} : T;
-export type ThemeOverrides = DeepPartial<Theme>;
 //# sourceMappingURL=types.d.ts.map

package/lib/typescript/module/utils/color.d.ts

@@ -1,7 +1,7 @@
 /**
  * The tint a pressed control paints over a fill in one of the theme's accent
- * colours (primary, success, warning, error). The theme's own
- * `surface.pressed` is meant for its surfaces: a dark wash in the light
+ * colours (primary, success, warning, danger). The theme's own
+ * `surface-pressed` colour is meant for its surfaces: a dark wash in the light
  * theme and a WHITE wash in the dark theme, which on a coloured fill reads
  * as the control flashing white. A coloured fill darkens on press in either
  * theme, so this is fixed rather than themed.
@@ -14,6 +14,10 @@ export declare const ACCENT_PRESSED_TINT = "rgba(0, 0, 0, 0.12)";
  * caller sets to the nearest flat theme surface.
  */
 export declare const tintOf: (color: string, opacity: number, fallback: string) => string;
+/** `color` with its alpha replaced by `alpha`, as `rgba()`; null when `color` is not hex or rgb(). */
+export declare const withAlpha: (color: string, alpha: number) => string | null;
+/** `color` fully transparent, the start of a fade that keeps its hue; "transparent" when `color` cannot be read. */
+export declare const transparentOf: (color: string) => string;
 /**
  * The OPAQUE colour of `color` at `opacity` laid over `over`: what `tintOf`
  * would look like on that surface, as a flat `#RRGGBB`. For a tint that sits

package/lib/typescript/module/utils/shadows.d.ts

@@ -1,6 +1,6 @@
 import type { ViewStyle } from "react-native";
-import type { ShadowScale } from "../theme/types.js";
-export declare const shadowStyle: (shadows: ShadowScale, level: keyof ShadowScale) => ViewStyle;
+import type { ShadowName, Theme } from "../theme/types.js";
+export declare const shadowStyle: (shadows: Theme["shadow"], level: ShadowName) => ViewStyle;
 /**
  * Whether this platform draws a `boxShadow`. Android paints an outset box
  * shadow only from API 28; below that the style is ignored, so a caller

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/mobile-ui",
-  "version": "0.88.0",
+  "version": "0.89.0",
   "description": "Beautiful, animated, accessible React Native components, theme and form engine for Webority projects.",
   "keywords": [
     "react-native",
@@ -40,16 +40,6 @@
         "default": "./lib/commonjs/canvasKit/index.js"
       }
     },
-    "./retired-theme-keys": {
-      "import": {
-        "types": "./lib/typescript/module/theme/retiredThemeKeys.d.ts",
-        "default": "./lib/module/theme/retiredThemeKeys.js"
-      },
-      "require": {
-        "types": "./lib/typescript/commonjs/theme/retiredThemeKeys.d.ts",
-        "default": "./lib/commonjs/theme/retiredThemeKeys.js"
-      }
-    },
     "./package.json": "./package.json"
   },
   "main": "./lib/commonjs/index.js",
@@ -93,9 +83,14 @@
     "react-native-safe-area-context": ">=5.4.0",
     "react-native-svg": ">=15.0.0",
     "react-native-worklets": ">=0.10.0",
-    "@webority/mobile-core": "0.88.0"
+    "@webority/canvas-kit": "0.89.0",
+    "@webority/mobile-core": "0.89.0"
+  },
+  "peerDependenciesMeta": {
+    "@webority/canvas-kit": {
+      "optional": true
+    }
   },
-  "peerDependenciesMeta": {},
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
@@ -150,8 +145,10 @@
     "react-test-renderer": "19.2.8",
     "rimraf": "6.1.3",
     "typescript": "5.9.3",
-    "@webority/mobile-core": "0.88.0",
-    "@webority/mobile-dev": "0.0.0"
+    "@webority/canvas-kit": "0.89.0",
+    "@webority/mobile-dev": "0.0.0",
+    "@webority/mobile-core": "0.89.0",
+    "@webority/tokens": "0.89.0"
   },
   "scripts": {
     "build": "bob build && node ../mobile-dev/scripts/minify-lib.mjs",
@@ -159,6 +156,8 @@
     "lint": "biome lint ./src",
     "lint:fix": "biome lint --write ./src",
     "test": "jest",
+    "tokens": "node ../tokens/dist/webority.js brand --library --out ../tokens/dist --phone src/theme/tokens.generated.ts",
+    "tokens:check": "node ../tokens/dist/webority.js brand --library --out ../tokens/dist --phone src/theme/tokens.generated.ts --check",
     "typecheck": "tsc --noEmit"
   }
 }

package/lib/commonjs/theme/componentTokens.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});

package/lib/commonjs/theme/retiredThemeKeys.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.RETIRED_THEME_KEYS_RELEASE=exports.RETIRED_THEME_KEYS=void 0;const RETIRED_THEME_KEYS_RELEASE=exports.RETIRED_THEME_KEYS_RELEASE="0.19.0",sized=(e,n)=>Object.entries(n).map(([n,[i,o]])=>({path:`components.${e}.<size>.${n}`,to:i,...o?{scale:o}:{}})),gone=(e,n)=>({path:e,to:null,hint:n}),renamed=(e,n,i)=>({path:e,to:n,...i?{scale:i}:{}}),RETIRED_THEME_KEYS=exports.RETIRED_THEME_KEYS=[...sized("button",{paddingHorizontal:["paddingX","spacing"],paddingVertical:["paddingY","spacing"],fontSize:["text","fontSize"],borderRadius:["radius","radius"],iconSize:["icon",void 0]}),...sized("field",{paddingHorizontal:["paddingX","spacing"],paddingVertical:["paddingY","spacing"],fontSize:["text","fontSize"],borderRadius:["radius","radius"],iconSize:["icon",void 0],labelFontSize:["labelText","fontSize"],messageFontSize:["messageText","fontSize"]}),...sized("badge",{fontSize:["text","fontSize"],paddingHorizontal:["paddingX","spacing"]}),...sized("chip",{paddingHorizontal:["paddingX","spacing"],paddingVertical:["paddingY","spacing"],fontSize:["text","fontSize"],closeFontSize:["closeText","fontSize"],iconSize:["icon",void 0]}),...sized("emptyState",{iconSize:["icon",void 0],titleFontSize:["titleText","fontSize"],descriptionFontSize:["descriptionText","fontSize"],paddingVertical:["paddingY","spacing"]}),...sized("listItem",{paddingVertical:["paddingY","spacing"],titleFontSize:["titleText","fontSize"],subtitleFontSize:["subtitleText","fontSize"]}),...sized("otpInput",{fontSize:["text","fontSize"],borderRadius:["radius","radius"]}),...sized("segmentedControl",{fontSize:["text","fontSize"],paddingHorizontal:["paddingX","spacing"],iconSize:["icon",void 0]}),...sized("tabs",{fontSize:["text","fontSize"],paddingVertical:["paddingY","spacing"],paddingHorizontal:["paddingX","spacing"],scrollablePaddingHorizontal:["scrollablePaddingX","spacing"],iconSize:["icon",void 0]}),renamed("components.searchBar.<size>.borderRadius","radius","radius"),gone("components.searchBar.<size>.minHeight","set components.field.<size>.minHeight"),gone("components.searchBar.<size>.paddingHorizontal","set components.field.<size>.paddingX"),gone("components.searchBar.<size>.fontSize","set components.field.<size>.text"),gone("components.searchBar.<size>.iconSize","set components.field.<size>.icon"),gone("components.input.<size>","set components.field.<size>"),gone("components.input.borderRadius","set components.field.<size>.radius"),gone("components.select.borderRadius","set components.field.<size>.radius"),gone("components.phoneNumberInput","set components.field.<size>"),renamed("components.accordion.cardPaddingVertical","cardPaddingY","spacing"),renamed("components.appBar.badgePaddingHorizontal","badgePaddingX","spacing"),renamed("components.appBar.badgeFontSize","badgeText","fontSize"),renamed("components.avatar.fontSize","text","fontSize"),renamed("components.banner.iconGlyphFontSize","iconGlyphText","fontSize"),renamed("components.banner.closeGlyphFontSize","closeGlyphText","fontSize"),renamed("components.banner.actionButtonPaddingHorizontal","actionButtonPaddingX","spacing"),renamed("components.banner.actionButtonPaddingVertical","actionButtonPaddingY","spacing"),gone("components.banner.iconCircleRadius","the icon circle is always round"),gone("components.banner.closeButtonRadius","the close button is always round"),renamed("components.bottomNavigation.borderRadius","radius","radius"),renamed("components.choiceGroup.borderRadius","radius","radius"),renamed("components.datePicker.navTextFontSize","navText","fontSize"),renamed("components.datePicker.dayInnerBorderRadius","dayInnerRadius","radius"),renamed("components.datePicker.yearInnerBorderRadius","yearInnerRadius","radius"),renamed("components.dateRangePicker.navTextFontSize","navText","fontSize"),gone("components.dialog.iconWrapperBorderRadius","the icon disc is always round"),renamed("components.filePicker.borderRadius","radius","radius"),renamed("components.tabs.tabIconSpacing","iconGap","spacing"),gone("components.tabs.tabPaddingHorizontal","set components.tabs.<size>.paddingX"),gone("components.tabs.tabPaddingVertical","set components.tabs.<size>.paddingY"),gone("components.tabs.tabIconSize","set components.tabs.<size>.icon"),renamed("components.toast.iconGlyphFontSize","iconGlyphText","fontSize"),gone("components.toast.iconCircleBorderRadius","the icon circle is always round"),renamed("radius.full","pill"),gone("radius.xs","use sm, or none"),gone("radius.2xl","use xl")];

package/lib/module/theme/componentTokens.js

@@ -1 +0,0 @@
-"use strict";export{};

package/lib/module/theme/retiredThemeKeys.js

@@ -1 +0,0 @@
-"use strict";export const RETIRED_THEME_KEYS_RELEASE="0.19.0";const sized=(e,n)=>Object.entries(n).map(([n,[i,o]])=>({path:`components.${e}.<size>.${n}`,to:i,...o?{scale:o}:{}})),gone=(e,n)=>({path:e,to:null,hint:n}),renamed=(e,n,i)=>({path:e,to:n,...i?{scale:i}:{}});export const RETIRED_THEME_KEYS=[...sized("button",{paddingHorizontal:["paddingX","spacing"],paddingVertical:["paddingY","spacing"],fontSize:["text","fontSize"],borderRadius:["radius","radius"],iconSize:["icon",void 0]}),...sized("field",{paddingHorizontal:["paddingX","spacing"],paddingVertical:["paddingY","spacing"],fontSize:["text","fontSize"],borderRadius:["radius","radius"],iconSize:["icon",void 0],labelFontSize:["labelText","fontSize"],messageFontSize:["messageText","fontSize"]}),...sized("badge",{fontSize:["text","fontSize"],paddingHorizontal:["paddingX","spacing"]}),...sized("chip",{paddingHorizontal:["paddingX","spacing"],paddingVertical:["paddingY","spacing"],fontSize:["text","fontSize"],closeFontSize:["closeText","fontSize"],iconSize:["icon",void 0]}),...sized("emptyState",{iconSize:["icon",void 0],titleFontSize:["titleText","fontSize"],descriptionFontSize:["descriptionText","fontSize"],paddingVertical:["paddingY","spacing"]}),...sized("listItem",{paddingVertical:["paddingY","spacing"],titleFontSize:["titleText","fontSize"],subtitleFontSize:["subtitleText","fontSize"]}),...sized("otpInput",{fontSize:["text","fontSize"],borderRadius:["radius","radius"]}),...sized("segmentedControl",{fontSize:["text","fontSize"],paddingHorizontal:["paddingX","spacing"],iconSize:["icon",void 0]}),...sized("tabs",{fontSize:["text","fontSize"],paddingVertical:["paddingY","spacing"],paddingHorizontal:["paddingX","spacing"],scrollablePaddingHorizontal:["scrollablePaddingX","spacing"],iconSize:["icon",void 0]}),renamed("components.searchBar.<size>.borderRadius","radius","radius"),gone("components.searchBar.<size>.minHeight","set components.field.<size>.minHeight"),gone("components.searchBar.<size>.paddingHorizontal","set components.field.<size>.paddingX"),gone("components.searchBar.<size>.fontSize","set components.field.<size>.text"),gone("components.searchBar.<size>.iconSize","set components.field.<size>.icon"),gone("components.input.<size>","set components.field.<size>"),gone("components.input.borderRadius","set components.field.<size>.radius"),gone("components.select.borderRadius","set components.field.<size>.radius"),gone("components.phoneNumberInput","set components.field.<size>"),renamed("components.accordion.cardPaddingVertical","cardPaddingY","spacing"),renamed("components.appBar.badgePaddingHorizontal","badgePaddingX","spacing"),renamed("components.appBar.badgeFontSize","badgeText","fontSize"),renamed("components.avatar.fontSize","text","fontSize"),renamed("components.banner.iconGlyphFontSize","iconGlyphText","fontSize"),renamed("components.banner.closeGlyphFontSize","closeGlyphText","fontSize"),renamed("components.banner.actionButtonPaddingHorizontal","actionButtonPaddingX","spacing"),renamed("components.banner.actionButtonPaddingVertical","actionButtonPaddingY","spacing"),gone("components.banner.iconCircleRadius","the icon circle is always round"),gone("components.banner.closeButtonRadius","the close button is always round"),renamed("components.bottomNavigation.borderRadius","radius","radius"),renamed("components.choiceGroup.borderRadius","radius","radius"),renamed("components.datePicker.navTextFontSize","navText","fontSize"),renamed("components.datePicker.dayInnerBorderRadius","dayInnerRadius","radius"),renamed("components.datePicker.yearInnerBorderRadius","yearInnerRadius","radius"),renamed("components.dateRangePicker.navTextFontSize","navText","fontSize"),gone("components.dialog.iconWrapperBorderRadius","the icon disc is always round"),renamed("components.filePicker.borderRadius","radius","radius"),renamed("components.tabs.tabIconSpacing","iconGap","spacing"),gone("components.tabs.tabPaddingHorizontal","set components.tabs.<size>.paddingX"),gone("components.tabs.tabPaddingVertical","set components.tabs.<size>.paddingY"),gone("components.tabs.tabIconSize","set components.tabs.<size>.icon"),renamed("components.toast.iconGlyphFontSize","iconGlyphText","fontSize"),gone("components.toast.iconCircleBorderRadius","the icon circle is always round"),renamed("radius.full","pill"),gone("radius.xs","use sm, or none"),gone("radius.2xl","use xl")];