@newtonedev/components 0.1.5 → 0.1.7

package/dist/tokens/types.d.ts

@@ -1,4 +1,42 @@
 import type { ColorResult } from 'newtone';
+/**
+ * Complete token set for a non-neutral palette (accent, success, warning, error).
+ *
+ * Fill tokens use the palette's key NV position (user-chosen or WCAG auto-derived).
+ * Surface tokens use standard positions from PaletteDefaults, rendered in the palette's hue/saturation.
+ */
+export interface PaletteTokens {
+    /** Key color at the palette's keyNormalizedValue (used for primary Button fills, badges, indicators) */
+    readonly fill: ColorResult;
+    /** Key color shifted for hover state */
+    readonly fillHover: ColorResult;
+    /** Key color shifted for pressed/active state */
+    readonly fillActive: ColorResult;
+    /** High-contrast color for text/icons on top of fill (auto: dark text on light fills, light on dark) */
+    readonly onFill: ColorResult;
+    /** Palette-tinted background at current elevation */
+    readonly background: ColorResult;
+    /** Palette-tinted elevated surface */
+    readonly backgroundElevated: ColorResult;
+    /** Palette-tinted sunken surface */
+    readonly backgroundSunken: ColorResult;
+    /** Interactive element background within palette surface */
+    readonly backgroundInteractive: ColorResult;
+    /** Hover state for interactive elements within palette surface */
+    readonly backgroundInteractiveHover: ColorResult;
+    /** Pressed/active state for interactive elements within palette surface */
+    readonly backgroundInteractiveActive: ColorResult;
+    /** High-contrast palette-colored text */
+    readonly textPrimary: ColorResult;
+    /** Medium-contrast palette-colored text */
+    readonly textSecondary: ColorResult;
+    /** Low-contrast palette-colored text */
+    readonly textTertiary: ColorResult;
+    /** Disabled palette-colored text */
+    readonly textDisabled: ColorResult;
+    /** Palette-colored border */
+    readonly border: ColorResult;
+}
 /**
  * Resolved design tokens for a specific mode/theme/elevation combination
  */
@@ -11,32 +49,36 @@ export interface ResolvedTokens {
     readonly backgroundSunken: ColorResult;
     /**
      * Background color for interactive components with neutral backgrounds.
-     * Uses a fixed -0.035 NV (luminosity) offset from current background to ensure
+     * Uses a fixed NV offset from current background to ensure
      * consistent visual contrast across all elevations (-2 to 2).
      *
-     * Use for: Button (neutral primary), and future components with neutral filled backgrounds.
+     * Use for: Button (neutral primary enabled), and future components with neutral filled backgrounds.
      * Don't use for: Semantic variants (accent/success/error/warning), transparent backgrounds,
      * or primitives (Frame/Wrapper/Text/Icon already handle elevation correctly).
      */
     readonly backgroundInteractive: ColorResult;
-    /** Primary text color (high contrast for body text) */
+    /** Hover state for neutral interactive components (enabled + hoverShift) */
+    readonly backgroundInteractiveHover: ColorResult;
+    /** Pressed/active state for neutral interactive components (enabled + activeShift) */
+    readonly backgroundInteractiveActive: ColorResult;
+    /** Primary text color (high contrast for body text, 4.5:1 default) */
     readonly textPrimary: ColorResult;
-    /** Secondary text color (lower contrast for captions, labels) */
+    /** Secondary text color (lower contrast for captions, labels, 3.0:1 default) */
     readonly textSecondary: ColorResult;
-    /** Interactive element color (buttons, links) */
-    readonly interactive: ColorResult;
-    /** Interactive element hover state */
-    readonly interactiveHover: ColorResult;
-    /** Interactive element active/pressed state */
-    readonly interactiveActive: ColorResult;
+    /** Tertiary text color (hints, placeholders, 2.0:1 default) */
+    readonly textTertiary: ColorResult;
+    /** Disabled text color (disabled elements, 1.5:1 default) */
+    readonly textDisabled: ColorResult;
     /** Border color for subtle separators */
     readonly border: ColorResult;
-    /** Success state color (from success palette, index 2) */
-    readonly success: ColorResult;
-    /** Warning state color (from warning palette, index 3) */
-    readonly warning: ColorResult;
-    /** Error/destructive state color (from error palette, index 4) */
-    readonly error: ColorResult;
+    /** Accent palette tokens (palette index 1) — interactive elements, brand color */
+    readonly accent: PaletteTokens;
+    /** Success palette tokens (palette index 2) — positive state indicators */
+    readonly success: PaletteTokens;
+    /** Warning palette tokens (palette index 3) — caution state indicators */
+    readonly warning: PaletteTokens;
+    /** Error palette tokens (palette index 4) — destructive/error state indicators */
+    readonly error: PaletteTokens;
     /** Spacing tokens for paddings, gaps, and margins.
      * Token names represent pixel values at Medium (8px) spacing preset.
      * Actual values scale based on the selected spacing preset. */

package/dist/tokens/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/tokens/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/tokens/types.ts"],"names":[],"mappings":"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"}

package/dist/tokens/useTokens.d.ts

@@ -15,33 +15,12 @@ export interface UseTokensResult extends ResolvedTokens {
  * 2. FrameContext values (from nearest parent Frame) are used when elevation is omitted
  * 3. Falls back to NewtoneProvider theme + elevation 1
  *
- * Theme always reads from FrameContext if present, falling back to NewtoneProvider.
+ * When inside a Frame and no explicit elevation override is given, reuses the
+ * Frame's pre-computed tokens to avoid redundant computeTokens calls.
  *
  * @param elevation - Elevation level (0=sunken, 1=default, 2=elevated).
  *                    When omitted, reads from FrameContext or defaults to 1.
  * @returns Resolved design tokens with all necessary colors + resolved elevation
- *
- * @example
- * ```tsx
- * // Inside a <Frame theme="primary" elevation={1}>:
- * function MyComponent() {
- *   const tokens = useTokens(); // Gets primary theme, elevation 2 (mapped from Frame's 1)
- *   return (
- *     <View style={{ backgroundColor: srgbToHex(tokens.background.srgb) }} />
- *   );
- * }
- * ```
- *
- * @example
- * ```tsx
- * // Elevation-aware component:
- * function ElevationAwareButton() {
- *   const tokens = useTokens();
- *   // Use tokens.elevation to make color decisions
- *   const bg = tokens.elevation === 2 ? tokens.background : tokens.backgroundSunken;
- *   return <View style={{ backgroundColor: srgbToHex(bg.srgb) }} />;
- * }
- * ```
  */
 export declare function useTokens(elevation?: ElevationLevel): UseTokensResult;
 //# sourceMappingURL=useTokens.d.ts.map

package/dist/tokens/useTokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTokens.d.ts","sourceRoot":"","sources":["../../src/tokens/useTokens.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C;;;GAGG;AACH,MAAM,WAAW,eAAgB,SAAQ,cAAc;IACrD,SAAS,EAAE,cAAc,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,wBAAgB,SAAS,CAAC,SAAS,CAAC,EAAE,cAAc,GAAG,eAAe,CA2BrE"}
+{"version":3,"file":"useTokens.d.ts","sourceRoot":"","sources":["../../src/tokens/useTokens.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C;;;GAGG;AACH,MAAM,WAAW,eAAgB,SAAQ,cAAc;IACrD,SAAS,EAAE,cAAc,CAAC;CAC3B;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,SAAS,CAAC,SAAS,CAAC,EAAE,cAAc,GAAG,eAAe,CA+BrE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newtonedev/components",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "description": "React + React Native Web component library for Newtone",
   "license": "MIT",
   "repository": {

package/src/composites/actions/Button/Button.styles.ts

@@ -1,5 +1,6 @@
 import { srgbToHex } from 'newtone';
 import type { UseTokensResult } from '../../../tokens/useTokens';
+import type { PaletteTokens } from '../../../tokens/types';
 import type { ButtonVariant, ButtonSemantic, ButtonSize } from './Button.types';
 import type { TextSize } from '../../../primitives/Text/Text.types';
 
@@ -9,6 +10,7 @@ import type { TextSize } from '../../../primitives/Text/Text.types';
 export interface ButtonConfig {
   variantColors: {
     bg: string;
+    hoveredBg: string;
     pressedBg: string;
     textColor: string;
     iconColor: string;
@@ -34,17 +36,6 @@ export interface ButtonPadding {
   paddingBottom: number;
 }
 
-/**
- * Add opacity to a hex color string.
- * @param hexColor - Hex color string (e.g., "#ff0000")
- * @param opacity - Opacity value from 0 to 1
- * @returns Hex color with alpha channel
- */
-function withOpacity(hexColor: string, opacity: number): string {
-  const alpha = Math.round(opacity * 255).toString(16).padStart(2, '0');
-  return `${hexColor}${alpha}`;
-}
-
 /**
  * Compute asymmetric button padding based on icon/text presence.
  *
@@ -122,16 +113,17 @@ export function computeButtonPadding(
 }
 
 /**
- * Get elevation-aware background color for neutral primary button.
- * Uses backgroundInteractive token for consistent contrast across all elevations.
- *
- * @param tokens - Resolved tokens for current elevation
- * @returns Background color hex string
+ * Resolve the PaletteTokens for a given semantic.
+ * Returns undefined for 'neutral' (handled separately).
  */
-function getNeutralPrimaryBg(tokens: UseTokensResult): string {
-  // Use the new backgroundInteractive token which maintains consistent
-  // contrast (-0.035 NV offset) across all elevations
-  return srgbToHex(tokens.backgroundInteractive.srgb);
+function getPaletteTokens(semantic: ButtonSemantic, tokens: UseTokensResult): PaletteTokens | undefined {
+  switch (semantic) {
+    case 'accent': return tokens.accent;
+    case 'success': return tokens.success;
+    case 'error': return tokens.error;
+    case 'warning': return tokens.warning;
+    default: return undefined;
+  }
 }
 
 /**
@@ -141,7 +133,8 @@ function getNeutralPrimaryBg(tokens: UseTokensResult): string {
  * Layout concerns (flexbox, spacing, alignment) are handled by Wrapper primitive.
  * Typography concerns (font, size, weight) are handled by Text primitive.
  *
- * Now elevation-aware: neutral primary uses backgroundInteractive for consistent contrast.
+ * Elevation-aware: neutral primary uses backgroundInteractive for consistent contrast.
+ * Semantic variants use proper PaletteTokens — no opacity hacks.
  *
  * @param variant - Button type (primary, secondary, tertiary)
  * @param semantic - Button semantic meaning (neutral, accent, success, error, warning)
@@ -226,10 +219,12 @@ function getVariantColors(
   // Disabled state overrides for all variants
   if (disabled) {
     const baseColors = getVariantColorsForState(variant, semantic, tokens);
+    const disabledBg = srgbToHex(tokens.backgroundSunken.srgb);
     return {
       ...baseColors,
-      bg: srgbToHex(tokens.backgroundSunken.srgb),
-      pressedBg: srgbToHex(tokens.backgroundSunken.srgb),
+      bg: disabledBg,
+      hoveredBg: disabledBg,
+      pressedBg: disabledBg,
       textColor: srgbToHex(tokens.textSecondary.srgb),
       iconColor: srgbToHex(tokens.textSecondary.srgb),
     };
@@ -241,74 +236,50 @@ function getVariantColors(
 /**
  * Get variant colors for non-disabled state.
  * Implements 3 types × 5 semantics = 15 combinations.
+ * Uses proper PaletteTokens for all semantic variants — no opacity hacks.
  */
 function getVariantColorsForState(
   variant: ButtonVariant,
   semantic: ButtonSemantic,
   tokens: UseTokensResult
 ) {
-  // Get semantic color
-  const getSemanticColor = (): string => {
-    switch (semantic) {
-      case 'accent':
-        return srgbToHex(tokens.interactive.srgb);
-      case 'success':
-        return srgbToHex(tokens.success.srgb);
-      case 'error':
-        return srgbToHex(tokens.error.srgb);
-      case 'warning':
-        return srgbToHex(tokens.warning.srgb);
-      default:
-        return srgbToHex(tokens.textPrimary.srgb);
-    }
-  };
+  const paletteTokens = getPaletteTokens(semantic, tokens);
 
   // PRIMARY VARIANT: Filled background
   if (variant === 'primary') {
     if (semantic === 'neutral') {
-      // Neutral primary - uses backgroundInteractive for consistent contrast across elevations
-      const bg = getNeutralPrimaryBg(tokens);
+      // Neutral primary - uses backgroundInteractive tokens for consistent contrast across elevations
       return {
-        bg,
-        pressedBg: withOpacity(bg, 0.8), // Slightly darker on press
+        bg: srgbToHex(tokens.backgroundInteractive.srgb),
+        hoveredBg: srgbToHex(tokens.backgroundInteractiveHover.srgb),
+        pressedBg: srgbToHex(tokens.backgroundInteractiveActive.srgb),
         textColor: srgbToHex(tokens.textPrimary.srgb),
         iconColor: srgbToHex(tokens.textPrimary.srgb),
         borderWidth: 1,
-        borderColor: 'transparent', // Invisible border for consistent sizing
-      };
-    }
-
-    if (semantic === 'accent') {
-      // Accent primary = old primary (interactive bg, contrast text)
-      return {
-        bg: srgbToHex(tokens.interactive.srgb),
-        pressedBg: srgbToHex(tokens.interactiveActive.srgb),
-        textColor: srgbToHex(tokens.background.srgb), // Contrast inversion
-        iconColor: srgbToHex(tokens.background.srgb),
-        borderWidth: 1,
-        borderColor: 'transparent', // Invisible border for consistent sizing
+        borderColor: 'transparent',
       };
     }
 
-    // Semantic primary (success, error, warning)
-    const semanticColor = getSemanticColor();
+    // Semantic primary (accent, success, error, warning) — uses palette fill tokens
     return {
-      bg: semanticColor,
-      pressedBg: withOpacity(semanticColor, 0.8), // Darken on press
-      textColor: srgbToHex(tokens.background.srgb), // Contrast text
-      iconColor: srgbToHex(tokens.background.srgb),
+      bg: srgbToHex(paletteTokens!.fill.srgb),
+      hoveredBg: srgbToHex(paletteTokens!.fillHover.srgb),
+      pressedBg: srgbToHex(paletteTokens!.fillActive.srgb),
+      textColor: srgbToHex(paletteTokens!.onFill.srgb),
+      iconColor: srgbToHex(paletteTokens!.onFill.srgb),
       borderWidth: 1,
-      borderColor: 'transparent', // Invisible border for consistent sizing
+      borderColor: 'transparent',
     };
   }
 
   // SECONDARY VARIANT: Outlined (border + subtle background for non-neutral)
   if (variant === 'secondary') {
     if (semantic === 'neutral') {
-      // Neutral secondary = old outline (transparent bg)
+      // Shifted action scale: transparent → 01 (hover) → 02 (pressed)
       return {
         bg: 'transparent',
-        pressedBg: srgbToHex(tokens.backgroundSunken.srgb),
+        hoveredBg: srgbToHex(tokens.backgroundInteractive.srgb),
+        pressedBg: srgbToHex(tokens.backgroundInteractiveHover.srgb),
         textColor: srgbToHex(tokens.textPrimary.srgb),
         iconColor: srgbToHex(tokens.textPrimary.srgb),
         borderWidth: 1,
@@ -316,47 +287,49 @@ function getVariantColorsForState(
       };
     }
 
-    // Semantic secondary (accent, success, error, warning) - light bg, NO visible border
-    const semanticColor = getSemanticColor();
+    // Semantic secondary — uses palette surface tokens for subtle bg
     return {
-      bg: withOpacity(semanticColor, 0.1), // Light background tint
-      pressedBg: withOpacity(semanticColor, 0.15), // Slightly darker on press
-      textColor: semanticColor,
-      iconColor: semanticColor,
+      bg: srgbToHex(paletteTokens!.background.srgb),
+      hoveredBg: srgbToHex(paletteTokens!.backgroundInteractive.srgb),
+      pressedBg: srgbToHex(paletteTokens!.backgroundInteractiveHover.srgb),
+      textColor: srgbToHex(paletteTokens!.fill.srgb),
+      iconColor: srgbToHex(paletteTokens!.fill.srgb),
       borderWidth: 1,
-      borderColor: 'transparent', // Invisible border for consistent sizing
+      borderColor: 'transparent',
     };
   }
 
   // TERTIARY VARIANT: Ghost (text-only, no visible border)
   if (variant === 'tertiary') {
     if (semantic === 'neutral') {
-      // Neutral tertiary = old ghost
+      // Shifted action scale: transparent → 01 (hover) → 02 (pressed)
       return {
         bg: 'transparent',
-        pressedBg: srgbToHex(tokens.backgroundSunken.srgb),
+        hoveredBg: srgbToHex(tokens.backgroundInteractive.srgb),
+        pressedBg: srgbToHex(tokens.backgroundInteractiveHover.srgb),
         textColor: srgbToHex(tokens.textPrimary.srgb),
         iconColor: srgbToHex(tokens.textPrimary.srgb),
         borderWidth: 1,
-        borderColor: 'transparent', // Invisible border for consistent sizing
+        borderColor: 'transparent',
       };
     }
 
-    // Semantic tertiary (accent, success, error, warning)
-    const semanticColor = getSemanticColor();
+    // Semantic tertiary — uses palette surface tokens for hover/pressed
     return {
       bg: 'transparent',
-      pressedBg: withOpacity(semanticColor, 0.1), // Subtle background tint
-      textColor: semanticColor,
-      iconColor: semanticColor,
+      hoveredBg: srgbToHex(paletteTokens!.background.srgb),
+      pressedBg: srgbToHex(paletteTokens!.backgroundInteractive.srgb),
+      textColor: srgbToHex(paletteTokens!.fill.srgb),
+      iconColor: srgbToHex(paletteTokens!.fill.srgb),
       borderWidth: 1,
-      borderColor: 'transparent', // Invisible border for consistent sizing
+      borderColor: 'transparent',
     };
   }
 
   // Fallback (should never reach here with proper types)
   return {
     bg: 'transparent',
+    hoveredBg: 'transparent',
     pressedBg: 'transparent',
     textColor: srgbToHex(tokens.textPrimary.srgb),
     iconColor: srgbToHex(tokens.textPrimary.srgb),

package/src/composites/actions/Button/Button.tsx

@@ -70,7 +70,7 @@ export function Button({
 
   return (
     <Pressable disabled={disabled} {...pressableProps}>
-      {({ pressed }) => (
+      {({ pressed, hovered }: { pressed: boolean; hovered?: boolean }) => (
         // Wrapper handles layout: direction, gap, alignment (padding via style)
         <Wrapper
           direction="horizontal"
@@ -80,7 +80,11 @@ export function Button({
           style={[
             {
               ...padding, // Asymmetric horizontal padding for text optical balance
-              backgroundColor: pressed && !disabled ? variantColors.pressedBg : variantColors.bg,
+              backgroundColor: pressed && !disabled
+                ? variantColors.pressedBg
+                : hovered && !disabled
+                  ? variantColors.hoveredBg
+                  : variantColors.bg,
               borderRadius: sizeTokens.borderRadius,
               borderWidth: variantColors.borderWidth, // Always 1 for consistent sizing
               borderColor: variantColors.borderColor || 'transparent',

package/src/composites/form-controls/Select/SelectOption.tsx

@@ -80,7 +80,7 @@ export function SelectOptionRow({
           },
           isSelected && {
             fontWeight: tokens.typography.weight.semibold as any,
-            color: srgbToHex(tokens.interactive.srgb),
+            color: srgbToHex(tokens.accent.fill.srgb),
           },
           option.disabled && {
             color: srgbToHex(tokens.textSecondary.srgb),
@@ -95,7 +95,7 @@ export function SelectOptionRow({
           <Icon
             name="check"
             size={fontSize}
-            color={srgbToHex(tokens.interactive.srgb)}
+            color={srgbToHex(tokens.accent.fill.srgb)}
           />
         </View>
       )}

package/src/composites/form-controls/Toggle/Toggle.styles.ts

@@ -30,7 +30,7 @@ export function getToggleStyles(
       height: TRACK_HEIGHT,
       borderRadius: TRACK_HEIGHT / 2,
       backgroundColor: value
-        ? srgbToHex(tokens.interactive.srgb)
+        ? srgbToHex(tokens.accent.fill.srgb)
         : srgbToHex(tokens.border.srgb),
       justifyContent: 'center',
       paddingHorizontal: THUMB_OFFSET,

package/src/composites/range-inputs/ColorScaleSlider/ColorScaleSlider.styles.ts

@@ -52,7 +52,7 @@ export function getColorScaleSliderStyles(tokens: ResolvedTokens, disabled: bool
       fontFamily: tokens.typography.fonts.default,
       fontSize: tokens.typography.size.xs,
       fontWeight: tokens.typography.weight.medium as any,
-      color: srgbToHex(tokens.error.srgb),
+      color: srgbToHex(tokens.error.fill.srgb),
     },
   });
 }

package/src/composites/range-inputs/Slider/Slider.styles.ts

@@ -60,14 +60,14 @@ export function getSliderStyles(tokens: ResolvedTokens, disabled: boolean) {
       left: 0,
       height: TRACK_HEIGHT,
       borderRadius: TRACK_HEIGHT / 2,
-      backgroundColor: srgbToHex(tokens.interactive.srgb),
+      backgroundColor: srgbToHex(tokens.accent.fill.srgb),
     },
     thumb: {
       position: 'absolute',
       width: THUMB_SIZE,
       height: THUMB_SIZE,
       borderRadius: THUMB_SIZE / 2,
-      backgroundColor: srgbToHex(tokens.interactive.srgb),
+      backgroundColor: srgbToHex(tokens.accent.fill.srgb),
     },
   });
 }

package/src/index.ts

@@ -2,14 +2,13 @@
 export { NewtoneProvider, useNewtoneTheme } from './theme/NewtoneProvider';
 export type {
   ColorMode,
-  ThemeName,
   ElevationLevel,
   FrameElevation,
-  ThemeMapping,
   ColorSystemConfig,
   NewtoneThemeConfig,
   NewtoneThemeContext,
   FontConfig,
+  TokenOverrides,
 } from './theme/types';
 export { useFrameContext } from './theme/FrameContext';
 export type { FrameContextValue } from './theme/FrameContext';
@@ -17,8 +16,16 @@ export { DEFAULT_THEME_CONFIG } from './theme/defaults';
 
 // Tokens
 export { useTokens } from './tokens/useTokens';
-export { computeTokens } from './tokens/computeTokens';
-export type { ResolvedTokens } from './tokens/types';
+export {
+  computeTokens,
+  NEUTRAL_DEFAULTS,
+  ACCENT_DEFAULTS,
+  SUCCESS_DEFAULTS,
+  WARNING_DEFAULTS,
+  ERROR_DEFAULTS,
+} from './tokens/computeTokens';
+export type { PaletteDefaults } from './tokens/computeTokens';
+export type { ResolvedTokens, PaletteTokens } from './tokens/types';
 
 // Composite Components
 export { Button } from './composites/actions/Button/Button';
@@ -108,6 +115,7 @@ export type {
   EditableProp,
   EditablePropOption,
   ComponentMeta,
+  IconCatalogCategory,
 } from './registry';
 export {
   CATEGORIES,
@@ -116,6 +124,7 @@ export {
   getCategory,
   getComponentsByCategory,
   generateComponentCode,
+  ICON_CATALOG,
 } from './registry';
 
 // Fonts

package/src/primitives/Frame/Frame.tsx

@@ -61,7 +61,7 @@ function toElevationLevel(frameElevation: FrameElevation): ElevationLevel {
  * // Basic layout
  * <Frame direction="horizontal" gap="md" padding="lg" align="center">
  *   <Button onPress={() => {}}>Save</Button>
- *   <Button variant="ghost" onPress={() => {}}>Cancel</Button>
+ *   <Button variant="tertiary" onPress={() => {}}>Cancel</Button>
  * </Frame>
  * ```
  *
@@ -69,7 +69,6 @@ function toElevationLevel(frameElevation: FrameElevation): ElevationLevel {
  * ```tsx
  * // Card-like frame
  * <Frame
- *   theme="primary"
  *   elevation={2}
  *   radius="lg"
  *   padding="xl"
@@ -92,8 +91,7 @@ function toElevationLevel(frameElevation: FrameElevation): ElevationLevel {
  */
 export function Frame({
   children,
-  // Theme & elevation
-  theme,
+  // Elevation
   elevation,
   // Layout
   layout,
@@ -132,15 +130,11 @@ export function Frame({
   // Style override
   style,
 }: FrameProps) {
-  // Read the global theme configuration, current color mode (light/dark),
-  // and the default theme name from the nearest NewtoneProvider.
-  const { config, mode, theme: providerTheme } = useNewtoneTheme();
-  // Read the theme/elevation from the nearest parent Frame (if nested).
+  // Read the global theme configuration and current color mode (light/dark).
+  const { config, mode } = useNewtoneTheme();
+  // Read the elevation from the nearest parent Frame (if nested).
   const parentFrameCtx = useFrameContext();
 
-  // Decide which theme to use. Priority: this Frame's prop > parent Frame > NewtoneProvider.
-  const resolvedTheme = theme ?? parentFrameCtx?.theme ?? providerTheme;
-
   // The user-facing elevation (-2 to 2) controls visual depth (shadows, background).
   const resolvedFrameElevation: FrameElevation = elevation ?? 0;
 
@@ -156,19 +150,17 @@ export function Frame({
   // 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.
   const tokens = useMemo(() => {
-    const themeMapping = config.themes[resolvedTheme];
     return computeTokens(
       config.colorSystem,
       mode,
-      themeMapping,
       resolvedElevation,
-      config.elevation.offsets,
       config.spacing,
       config.radius,
       config.typography,
       config.icons,
+      config.tokenOverrides,
     );
-  }, [config, mode, resolvedTheme, resolvedElevation]);
+  }, [config, mode, resolvedElevation]);
 
   // Calculate all visual styles (background, layout, border, shadow, etc.).
   // Only recalculates when one of the style-related props changes.
@@ -208,8 +200,8 @@ export function Frame({
   // This is the value that child components will inherit via FrameContext.
   // Any nested Frame, Text, Icon, etc. will read this theme and elevation.
   const contextValue = useMemo(
-    () => ({ theme: resolvedTheme, elevation: resolvedElevation }),
-    [resolvedTheme, resolvedElevation],
+    () => ({ elevation: resolvedElevation, tokens }),
+    [resolvedElevation, tokens],
   );
 
   // Some styles only work on web browsers (CSS grid, inset shadows).
@@ -241,7 +233,7 @@ export function Frame({
   const focusRingStyle = isFocusVisible && !disabled ? {
     outlineWidth: 2,
     outlineStyle: 'solid',
-    outlineColor: srgbToHex(tokens.interactive.srgb),
+    outlineColor: srgbToHex(tokens.accent.fill.srgb),
     outlineOffset: 2,
   } as unknown as ViewStyle : undefined; // web-only