@newtonedev/components 0.1.13 → 0.1.15

package/src/primitives/Frame/Frame.tsx

@@ -2,19 +2,15 @@ import React, { useMemo } from 'react';
 import { View, Pressable, Text } from 'react-native';
 import type { ViewStyle, TextStyle } from 'react-native';
 import type { FrameProps } from './Frame.types';
-import type { ElevationLevel, FrameElevation } from 'newtone-api';
+import type { ElevationLevel, FrameElevation, ElevationName, ThemeName, AppearanceName } from 'newtone-api';
 import { FrameContext, useFrameContext } from 'newtone-api';
-import { useNewtoneTheme } from 'newtone-api';
+import { useNewtoneTheme, _ThemeContext } from 'newtone-api';
 import { computeTokens } from 'newtone-api';
 import { getFrameStyles } from './Frame.styles';
 import { useFocusVisible } from '../useFocusVisible';
 
 /**
  * Wrap raw string/number children in <Text> so they display correctly.
- *
- * In React Native, raw text like <View>"hello"</View> will crash on native
- * and show console warnings on web. All text must be inside a <Text> element.
- * This helper scans children and auto-wraps any bare strings or numbers.
  */
 function wrapTextChildren(
   children: React.ReactNode,
@@ -28,16 +24,15 @@ function wrapTextChildren(
   });
 }
 
+/** Map numeric elevation levels to named elevations for the swatches layer. */
+const ELEVATION_MAP: Record<ElevationLevel, ElevationName> = {
+  0: 'sunken',
+  1: 'grounded',
+  2: 'elevated',
+};
+
 /**
  * Convert user-facing FrameElevation (-2..2) to internal ElevationLevel (0..2).
- *
- * | Frame | Internal | Background |
- * |:-----:|:--------:|:-----------|
- * |  -2   |    0     | Sunken     |
- * |  -1   |    0     | Sunken     |
- * |   0   |    1     | Default    |
- * |   1   |    2     | Elevated   |
- * |   2   |    2     | Elevated   |
  */
 function toElevationLevel(frameElevation: FrameElevation): ElevationLevel {
   if (frameElevation <= -1) return 0;
@@ -53,45 +48,16 @@ function toElevationLevel(frameElevation: FrameElevation): ElevationLevel {
  * and interactivity capabilities.
  *
  * Frames can be nested. Inner frames override outer frames for their subtree.
- * Unspecified props inherit from the nearest parent Frame.
- *
- * @example
- * ```tsx
- * // Basic layout
- * <Frame direction="horizontal" gap="md" padding="lg" align="center">
- *   <Button onPress={() => {}}>Save</Button>
- *   <Button variant="tertiary" onPress={() => {}}>Cancel</Button>
- * </Frame>
- * ```
- *
- * @example
- * ```tsx
- * // Card-like frame
- * <Frame
- *   elevation={2}
- *   radius="lg"
- *   padding="xl"
- *   bordered
- *   onPress={() => navigate('/details')}
- * >
- *   <Text>Clickable card</Text>
- * </Frame>
- * ```
- *
- * @example
- * ```tsx
- * // Grid layout (web)
- * <Frame layout="grid" columns={3} gap="md" padding="lg">
- *   <Frame radius="md" padding="md" bordered>Cell 1</Frame>
- *   <Frame radius="md" padding="md" bordered>Cell 2</Frame>
- *   <Frame radius="md" padding="md" bordered>Cell 3</Frame>
- * </Frame>
- * ```
  */
 export function Frame({
   children,
   // Elevation
   elevation,
+  // Scheme
+  scheme,
+  // Theme / Appearance
+  theme,
+  appearance,
   // Layout
   layout,
   direction,
@@ -112,6 +78,16 @@ export function Frame({
   maxWidth,
   minHeight,
   maxHeight,
+  // Positioning
+  position,
+  top,
+  right,
+  bottom,
+  left,
+  zIndex,
+  overflow,
+  pointerEvents,
+  opacity,
   // Appearance
   radius,
   bordered,
@@ -129,45 +105,55 @@ export function Frame({
   // Style override
   style,
 }: FrameProps) {
-  // Read the global theme configuration and current color mode (light/dark).
-  const { config, mode, gamut } = useNewtoneTheme();
-  // Read the elevation from the nearest parent Frame (if nested).
+  const themeCtx = useNewtoneTheme();
+  const { mode, gamut } = themeCtx;
   const parentFrameCtx = useFrameContext();
 
-  // The user-facing elevation (-2 to 2) controls visual depth (shadows, background).
+  // Resolve which config to use: explicit scheme > inherited from parent > default.
+  const resolvedConfig = useMemo(() => {
+    if (scheme && themeCtx.schemes) {
+      const schemeConfig = themeCtx.schemes[scheme];
+      if (schemeConfig) return schemeConfig;
+    }
+    return themeCtx.config;
+  }, [scheme, themeCtx.schemes, themeCtx.config]);
+
+  // Track whether this Frame switches the scheme (needs theme context override).
+  const isSchemeOverride = resolvedConfig !== themeCtx.config;
+
+  // Resolve theme/appearance: explicit prop > parent Frame > defaults.
+  const resolvedTheme: ThemeName = theme ?? parentFrameCtx?.theme ?? 'primary';
+  const resolvedAppearance: AppearanceName = appearance ?? parentFrameCtx?.appearance ?? 'main';
+
   const resolvedFrameElevation: FrameElevation = elevation ?? 0;
 
-  // Convert user-facing elevation to internal level (0-2) for token computation.
-  // When no elevation is set, inherit from parent Frame or default to 1.
   const resolvedElevation: ElevationLevel = elevation !== undefined
     ? toElevationLevel(elevation)
     : parentFrameCtx?.elevation ?? 1;
 
-  // Generate the design tokens (colors, spacing, fonts) for this Frame.
-  // Frame computes its own tokens instead of using useTokens() because
-  // useTokens() reads from FrameContext — but this Frame IS the provider,
-  // so it needs to compute fresh tokens from the resolved theme/elevation.
-  // Wrapped in useMemo so it only recalculates when the theme/mode/elevation changes.
+  // Compute tokens with gamut pre-applied (no [gamut] indexing needed downstream).
   const tokens = useMemo(() => {
     return computeTokens(
-      config.colorSystem,
+      resolvedConfig.colorSystem,
       mode,
-      resolvedElevation,
-      config.spacing,
-      config.radius,
-      config.typography,
-      config.icons,
-      config.tokenOverrides,
+      gamut,
+      ELEVATION_MAP[resolvedElevation],
+      resolvedConfig.spacing,
+      resolvedConfig.radius,
+      resolvedConfig.typography,
+      resolvedConfig.icons,
+      resolvedConfig.themeMappings,
+      resolvedConfig.swatchDefaults,
+      resolvedConfig.relativeSwatchDefaults,
     );
-  }, [config, mode, resolvedElevation]);
+  }, [resolvedConfig, mode, gamut, resolvedElevation]);
 
-  // Calculate all visual styles (background, layout, border, shadow, etc.).
-  // Only recalculates when one of the style-related props changes.
   const styles = useMemo(
     () => getFrameStyles({
       tokens,
-      gamut,
       frameElevation: resolvedFrameElevation,
+      theme: resolvedTheme,
+      appearance: resolvedAppearance,
       layout,
       direction,
       wrap,
@@ -184,29 +170,53 @@ export function Frame({
       maxWidth,
       minHeight,
       maxHeight,
+      position,
+      top,
+      right,
+      bottom,
+      left,
+      zIndex,
+      overflow,
+      opacity,
       radius,
       bordered,
       disabled,
     }),
     [
-      tokens, gamut, resolvedFrameElevation,
+      tokens, resolvedFrameElevation, resolvedTheme, resolvedAppearance,
       layout, direction, wrap, reverse, columns, rows,
       align, justify, padding, gap,
       width, height, minWidth, maxWidth, minHeight, maxHeight,
+      position, top, right, bottom, left, zIndex, overflow, opacity,
       radius, bordered, disabled,
     ],
   );
 
-  // This is the value that child components will inherit via FrameContext.
-  // Any nested Frame, Text, Icon, etc. will read this theme and elevation.
+  // Resolved scheme name: explicit prop > inherited from parent Frame.
+  const resolvedScheme = scheme ?? parentFrameCtx?.scheme;
+
   const contextValue = useMemo(
-    () => ({ elevation: resolvedElevation, tokens }),
-    [resolvedElevation, tokens],
+    () => ({
+      elevation: resolvedElevation,
+      tokens,
+      scheme: resolvedScheme,
+      theme: resolvedTheme,
+      appearance: resolvedAppearance,
+    }),
+    [resolvedElevation, tokens, resolvedScheme, resolvedTheme, resolvedAppearance],
   );
 
-  // Some styles only work on web browsers (CSS grid, inset shadows).
-  // We collect them separately and cast them to ViewStyle so React Native
-  // doesn't complain about unknown properties (they're silently ignored on native).
+  // When this Frame switches the scheme, override ThemeContext so that
+  // useNewtoneTheme().config returns the scheme's config for descendants.
+  const schemeThemeCtx = useMemo(() => {
+    if (!isSchemeOverride) return null;
+    return {
+      ...themeCtx,
+      config: resolvedConfig,
+      activeScheme: scheme ?? themeCtx.activeScheme,
+    };
+  }, [isSchemeOverride, themeCtx, resolvedConfig, scheme]);
+
   const webOverrides: ViewStyle[] = [];
   if (styles.gridWebStyle) {
     webOverrides.push(styles.gridWebStyle as unknown as ViewStyle);
@@ -215,94 +225,83 @@ export function Frame({
     webOverrides.push({ boxShadow: styles.insetBoxShadow } as unknown as ViewStyle);
   }
 
-  // Normalize user's custom styles into an array for merging.
   const userStyles = Array.isArray(style) ? style : style ? [style] : [];
 
-  // If the Frame has onPress or href, it needs to respond to taps/clicks.
-  // In that case we render a Pressable (tappable); otherwise a plain View.
+
   const isInteractive = onPress !== undefined || href !== undefined;
 
-  // Detect keyboard-only focus (Tab, arrows) vs mouse/touch focus.
-  // Only shows a visible focus ring when the user navigated via keyboard,
-  // matching the browser's native :focus-visible behavior.
   const { isFocusVisible, focusProps } = useFocusVisible();
 
-  // Focus ring style: 2px solid outline in the theme's interactive color,
-  // offset by 2px so it doesn't overlap the Frame's border.
-  // Uses CSS outline properties — silently ignored on native platforms.
+  // Focus ring: uses the emphasis background of the resolved theme as the outline color.
   const focusRingStyle = isFocusVisible && !disabled ? {
     outlineWidth: 2,
     outlineStyle: 'solid',
-    outlineColor: tokens.accent.fill[gamut],
+    outlineColor: tokens.colors[resolvedTheme].emphasis.background,
     outlineOffset: 2,
-  } as unknown as ViewStyle : undefined; // web-only
+  } as unknown as ViewStyle : undefined;
 
-  // Spread focus event handlers onto the Pressable. These are web-only
-  // handlers supported by react-native-web — silently ignored on native.
-  const webFocusProps = isInteractive ? focusProps as any : {}; // web-only
+  const webFocusProps = isInteractive ? focusProps as any : {};
 
-  // Default text style for any raw strings/numbers passed as children.
-  // Uses the theme's primary text color, default font, and base size.
   const textStyle = useMemo<TextStyle>(
     () => ({
-      color: tokens.textPrimary[gamut],
+      color: tokens.colors[resolvedTheme][resolvedAppearance].fontPrimary,
       fontSize: tokens.typography.fontSizes['05'],
       fontFamily: tokens.typography.fonts.main.family,
       lineHeight: tokens.typography.lineHeights['06'],
     }),
-    [tokens],
+    [tokens, resolvedTheme, resolvedAppearance],
   );
-  // Auto-wrap bare text ("hello") in <Text> elements (required by React Native).
-  // Wrapped in useMemo so it only re-scans children when they or the text style changes.
   const wrappedChildren = useMemo(
     () => wrapTextChildren(children, textStyle),
     [children, textStyle],
   );
 
-  // FrameContext.Provider shares this Frame's theme and elevation with all
-  // descendants, so nested components automatically pick up the right colors.
+  const content = isInteractive ? (
+    <Pressable
+      ref={ref}
+      testID={testID}
+      nativeID={nativeID}
+      pointerEvents={pointerEvents}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityHint={accessibilityHint}
+      accessibilityState={disabled ? { disabled: true } : undefined}
+      onPress={onPress}
+      disabled={disabled}
+      {...(href ? { href, accessibilityRole: 'link' as const } : { accessibilityRole: 'button' as const })}
+      {...webFocusProps}
+      style={({ pressed }) => [
+        styles.container,
+        pressed && !disabled && styles.pressed,
+        focusRingStyle,
+        ...webOverrides,
+        ...userStyles,
+      ]}
+    >
+      {wrappedChildren}
+    </Pressable>
+  ) : (
+    <View
+      ref={ref}
+      testID={testID}
+      nativeID={nativeID}
+      pointerEvents={pointerEvents}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityHint={accessibilityHint}
+      style={[styles.container, ...webOverrides, ...userStyles]}
+    >
+      {wrappedChildren}
+    </View>
+  );
+
+  const wrappedContent = schemeThemeCtx ? (
+    <_ThemeContext.Provider value={schemeThemeCtx}>
+      {content}
+    </_ThemeContext.Provider>
+  ) : content;
+
   return (
     <FrameContext.Provider value={contextValue}>
-      {isInteractive ? (
-        // Pressable handles taps. When href is set, react-native-web renders
-        // it as an <a> tag so it works like a regular link on the web.
-        <Pressable
-          ref={ref}
-          testID={testID}
-          nativeID={nativeID}
-          accessibilityLabel={accessibilityLabel}
-          accessibilityHint={accessibilityHint}
-          // Tell screen readers this is disabled so assistive technology can announce it.
-          accessibilityState={disabled ? { disabled: true } : undefined}
-          onPress={onPress}
-          disabled={disabled}
-          {...(href ? { href, accessibilityRole: 'link' as const } : { accessibilityRole: 'button' as const })}
-          {...webFocusProps}
-          // The style callback receives { pressed: true/false } so we can
-          // change the background when the user is actively pressing.
-          style={({ pressed }) => [
-            styles.container,
-            pressed && !disabled && styles.pressed,
-            focusRingStyle,
-            ...webOverrides,
-            ...userStyles,
-          ]}
-        >
-          {wrappedChildren}
-        </Pressable>
-      ) : (
-        // Non-interactive Frame: just a plain View with no tap handling.
-        <View
-          ref={ref}
-          testID={testID}
-          nativeID={nativeID}
-          accessibilityLabel={accessibilityLabel}
-          accessibilityHint={accessibilityHint}
-          style={[styles.container, ...webOverrides, ...userStyles]}
-        >
-          {wrappedChildren}
-        </View>
-      )}
+      {wrappedContent}
     </FrameContext.Provider>
   );
 }

package/src/primitives/Frame/Frame.types.ts

@@ -1,5 +1,5 @@
 import type { View, ViewStyle, GestureResponderEvent } from 'react-native';
-import type { FrameElevation } from 'newtone-api';
+import type { FrameElevation, ThemeName, AppearanceName } from 'newtone-api';
 
 // ── Spacing Types ──────────────────────────────────────────────
 
@@ -76,6 +76,20 @@ export interface RadiusCorners {
  */
 export type RadiusProp = RadiusValue | RadiusCorners;
 
+// ── Positioning Types ──────────────────────────────────────────
+
+/** CSS position mode. `'fixed'` and `'sticky'` are web-only (via react-native-web). */
+export type PositionType = 'absolute' | 'relative' | 'fixed' | 'sticky';
+
+/** Position offset value: pixels (number) or percentage string (e.g. `'50%'`). */
+export type OffsetValue = number | string;
+
+/** Overflow clipping mode. */
+export type OverflowMode = 'visible' | 'hidden' | 'scroll';
+
+/** Pointer-events mode (View prop, not a style). */
+export type PointerEventsMode = 'auto' | 'none' | 'box-none' | 'box-only';
+
 // ── Sizing Types ───────────────────────────────────────────────
 
 /**
@@ -159,6 +173,23 @@ export interface FrameProps {
    */
   readonly elevation?: FrameElevation;
 
+  /**
+   * Named scheme to use for this Frame's subtree.
+   * Looks up the scheme's config from the ancestor NewtoneProvider's `schemes` map
+   * and uses it instead of the default for token computation and context.
+   * Ignored when the provider is in single-config mode.
+   *
+   * @example
+   * ```tsx
+   * <NewtoneProvider schemes={{ Default: config1, Dark: config2 }} defaultScheme="Default">
+   *   <Frame scheme="Dark">
+   *     {/* Children here get the "Dark" scheme's tokens *​/}
+   *   </Frame>
+   * </NewtoneProvider>
+   * ```
+   */
+  readonly scheme?: string;
+
   // ── Layout ──
 
   /** Layout mode. @default 'flex' */
@@ -248,8 +279,95 @@ export interface FrameProps {
   /** Maximum height in pixels. */
   readonly maxHeight?: number;
 
+  // ── Positioning ──
+
+  /**
+   * CSS position mode.
+   *
+   * `'fixed'` and `'sticky'` are web-only (supported via react-native-web).
+   * React Native natively supports `'absolute'` and `'relative'`.
+   */
+  readonly position?: PositionType;
+
+  /** Offset from the top edge. Accepts pixels (number) or percentage string. */
+  readonly top?: OffsetValue;
+
+  /** Offset from the right edge. Accepts pixels (number) or percentage string. */
+  readonly right?: OffsetValue;
+
+  /** Offset from the bottom edge. Accepts pixels (number) or percentage string. */
+  readonly bottom?: OffsetValue;
+
+  /** Offset from the left edge. Accepts pixels (number) or percentage string. */
+  readonly left?: OffsetValue;
+
+  /** Stacking order. Higher values render above lower values. */
+  readonly zIndex?: number;
+
+  /**
+   * Content overflow behavior.
+   *
+   * When `radius` is set with positive values, Frame auto-applies `overflow: 'hidden'`
+   * to clip content at rounded corners. Setting `overflow` explicitly overrides this.
+   */
+  readonly overflow?: OverflowMode;
+
+  /**
+   * Controls whether the element can be the target of touch/pointer events.
+   *
+   * - `'auto'` — default, element and children receive events
+   * - `'none'` — element and children are invisible to events (pass through)
+   * - `'box-none'` — element ignores events but children can receive them
+   * - `'box-only'` — element receives events but children cannot
+   */
+  readonly pointerEvents?: PointerEventsMode;
+
+  /**
+   * Opacity of the element (0 = fully transparent, 1 = fully opaque).
+   *
+   * When set explicitly, overrides the automatic `0.5` opacity applied by `disabled`.
+   */
+  readonly opacity?: number;
+
   // ── Appearance ──
 
+  /**
+   * Color theme for this Frame's visual rendering (background, border, text).
+   *
+   * Selects which of the 6 themes to use from the resolved tokens.
+   * Does not affect scheme selection — use `scheme` for that.
+   *
+   * @default 'primary'
+   *
+   * @example
+   * ```tsx
+   * <Frame theme="error" appearance="tinted">
+   *   <Text>Error banner</Text>
+   * </Frame>
+   * ```
+   */
+  readonly theme?: ThemeName;
+
+  /**
+   * Appearance variant within the selected theme.
+   *
+   * Controls the visual emphasis of the Frame's chrome (background, border):
+   * - `'main'` — default surface (passive contrast)
+   * - `'emphasis'` — prominent, filled surface (active contrast)
+   * - `'tinted'` — subtle tinted surface
+   * - `'strong'` — bold, high-contrast variant
+   *
+   * @default 'main'
+   *
+   * @example
+   * ```tsx
+   * <Frame theme="primary" appearance="emphasis">
+   *   <Text>CTA section</Text>
+   * </Frame>
+   * ```
+   */
+  readonly appearance?: AppearanceName;
+
   /**
    * Border radius.
    *

package/src/primitives/Frame/index.ts

@@ -17,5 +17,9 @@ export type {
   Direction,
   Alignment,
   Justification,
+  PositionType,
+  OffsetValue,
+  OverflowMode,
+  PointerEventsMode,
 } from './Frame.types';
 export type { ResolvedCorners } from './Frame.utils';

package/src/primitives/Icon/Icon.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import { Text, type TextStyle } from 'react-native';
-import { useTokens } from 'newtone-api';
+import { useTokens, useFrameContext } from 'newtone-api';
 import type { IconProps } from './Icon.types';
 
 /**
@@ -17,8 +17,8 @@ import type { IconProps } from './Icon.types';
  * ```
  */
 export function Icon({
-  name,
-  size,
+  name = 'add',
+  size = 24,
   opticalSize,
   fill = 0,
   color,
@@ -32,6 +32,9 @@ export function Icon({
 }: IconProps) {
   // Inherit tokens from nearest parent Frame via FrameContext.
   const tokens = useTokens();
+  const frameCtx = useFrameContext();
+  const resolvedTheme = frameCtx?.theme ?? 'primary';
+  const resolvedAppearance = frameCtx?.appearance ?? 'main';
 
   // Build the icon's style from the theme tokens and props.
   // Wrapped in useMemo so it only recalculates when the inputs change,
@@ -53,8 +56,8 @@ export function Icon({
     // Use explicit opticalSize if provided, otherwise auto-calculate from fontSize.
     const opsz = opticalSize ?? getOpticalSize(fontSize);
 
-    // Use the provided color, or fall back to the theme's primary text color.
-    const iconColor = color ?? tokens.textPrimary[tokens.gamut];
+    // Use the provided color, or fall back to the inherited theme/appearance text color.
+    const iconColor = color ?? tokens.colors[resolvedTheme][resolvedAppearance].fontPrimary;
 
     // Build the font family name from the theme's icon variant setting.
     // Example: variant 'rounded' → 'Material Symbols Rounded'
@@ -80,7 +83,7 @@ export function Icon({
       fontVariationSettings, // web-only: controls the variable font axes listed above
       ...style,
     } as TextStyle; // Cast needed because web-only properties aren't in RN's type definitions
-  }, [tokens, size, opticalSize, fill, color, style]);
+  }, [tokens, size, opticalSize, fill, color, style, resolvedTheme, resolvedAppearance]);
 
   // Material Symbols renders icons as text ligatures — the icon name (like "home")
   // is passed as text content, and the font renders it as the icon glyph.

package/src/primitives/Icon/Icon.types.ts

@@ -23,9 +23,9 @@ export interface IconProps {
    * @example `'home'`, `'settings'`, `'check'`, `'expand_more'`, `'delete'`, `'add'`, `'search'`
    * @see {@link https://fonts.google.com/icons Browse all icons}
    */
-  readonly name: string;
+  readonly name?: string;
 
-  /** Font size in pixels. @default tokens.typography.fontSizes['05'] (16px) */
+  /** Font size in pixels. @default 24 */
   readonly size?: number;
 
   /** Optical size for variable font axis. Adjusts stroke weight for readability at small sizes. @default same as size */

package/src/primitives/Text/Text.spans.ts

@@ -1,7 +1,8 @@
 import React, { useContext, useMemo } from 'react';
 import { Text as RNText } from 'react-native';
 import type { TextStyle } from 'react-native';
-import { useTokens } from 'newtone-api';
+import { useTokens, useFrameContext } from 'newtone-api';
+import type { ThemeName, AppearanceName } from 'newtone-api';
 import { TextScopeContext, resolveTextColor } from './Text';
 import type { TextSpanProps, TextWeight } from './Text.types';
 
@@ -11,18 +12,21 @@ import type { TextSpanProps, TextWeight } from './Text.types';
  * Only inline formatting properties (color, weight, italic, underline, highlight) are exposed.
  */
 export function TextSpan({ children, color, weight, italic, underline, highlight, style }: TextSpanProps) {
-  const tokens = useTokens(1);
+  const tokens = useTokens();
   const scopeCtx = useContext(TextScopeContext);
+  const frameCtx = useFrameContext();
+  const resolvedTheme: ThemeName = frameCtx?.theme ?? 'primary';
+  const resolvedAppearance: AppearanceName = frameCtx?.appearance ?? 'main';
 
   const spanStyle = useMemo<TextStyle>(() => {
     const s: TextStyle = {};
-    if (color) s.color = resolveTextColor(color, tokens);
+    if (color) s.color = resolveTextColor(color, tokens, resolvedTheme, resolvedAppearance);
     if (weight && scopeCtx) s.fontWeight = String(scopeCtx.weights[weight]) as TextStyle['fontWeight'];
     if (italic) s.fontStyle = 'italic';
     if (underline) s.textDecorationLine = 'underline';
-    if (highlight) s.backgroundColor = resolveTextColor(highlight, tokens);
+    if (highlight) s.backgroundColor = resolveTextColor(highlight, tokens, resolvedTheme, resolvedAppearance);
     return s;
-  }, [tokens, scopeCtx, color, weight, italic, underline, highlight]);
+  }, [tokens, scopeCtx, color, weight, italic, underline, highlight, resolvedTheme, resolvedAppearance]);
 
   return React.createElement(
     RNText,