@newtonedev/components 0.1.5 → 0.1.6

package/dist/index.js

@@ -1,5 +1,5 @@
 import React13, { createContext, useState, useMemo, useContext, useEffect, useCallback, useRef } from 'react';
-import { DEFAULT_NEUTRAL_SATURATION, DEFAULT_NEUTRAL_HUE, DEFAULT_ACCENT_SATURATION, DEFAULT_ACCENT_HUE, DEFAULT_SUCCESS_SATURATION, DEFAULT_SUCCESS_HUE, DEFAULT_WARNING_SATURATION, DEFAULT_WARNING_HUE, DEFAULT_ERROR_SATURATION, DEFAULT_ERROR_HUE, getColor, getColorByContrast, srgbToHex } from 'newtone';
+import { DEFAULT_NEUTRAL_SATURATION, DEFAULT_NEUTRAL_HUE, DEFAULT_ACCENT_SATURATION, DEFAULT_ACCENT_HUE, DEFAULT_SUCCESS_SATURATION, DEFAULT_SUCCESS_HUE, DEFAULT_WARNING_SATURATION, DEFAULT_WARNING_HUE, DEFAULT_ERROR_SATURATION, DEFAULT_ERROR_HUE, getColor, srgbToHex } from 'newtone';
 import { Text, View, Pressable, TextInput as TextInput$1, ScrollView, PanResponder, Animated, StyleSheet } from 'react-native';
 
 // src/theme/NewtoneProvider.tsx
@@ -17,16 +17,6 @@ var DEFAULT_THEME_CONFIG = {
       { hue: DEFAULT_ERROR_HUE, saturation: DEFAULT_ERROR_SATURATION }
     ]
   },
-  themes: {
-    neutral: { paletteIndex: 0, lightModeNv: 0.95, darkModeNv: 0.1 },
-    primary: { paletteIndex: 1, lightModeNv: 0.95, darkModeNv: 0.1 },
-    secondary: { paletteIndex: 1, lightModeNv: 0.85, darkModeNv: 0.15 },
-    strong: { paletteIndex: 0, lightModeNv: 0.1, darkModeNv: 0.95 }
-  },
-  elevation: {
-    offsets: [-0.02, 0, 0.04]
-    // [sunken, default, elevated]
-  },
   spacing: {
     "00": 0,
     // base * 0
@@ -190,20 +180,16 @@ var ThemeContext = createContext(null);
 function NewtoneProvider({
   config = DEFAULT_THEME_CONFIG,
   initialMode = "light",
-  initialTheme = "neutral",
   children
 }) {
   const [mode, setMode] = useState(initialMode);
-  const [theme, setTheme] = useState(initialTheme);
   const value = useMemo(
     () => ({
       config,
       mode,
-      theme,
-      setMode,
-      setTheme
+      setMode
     }),
-    [config, mode, theme]
+    [config, mode]
   );
   return /* @__PURE__ */ React13.createElement(ThemeContext.Provider, { value }, /* @__PURE__ */ React13.createElement(GoogleFontLoader, { fonts: config.typography.fonts }), /* @__PURE__ */ React13.createElement(IconFontLoader, { icons: config.icons }), children);
 }
@@ -218,19 +204,160 @@ var FrameContext = createContext(null);
 function useFrameContext() {
   return useContext(FrameContext);
 }
+var NEUTRAL_DEFAULTS = {
+  light: {
+    background: { elevated: 0, ground: 0.03, sunken: 0.06 },
+    text: { primary: 0.9, secondary: 0.7, tertiary: 0.5, disabled: 0.3 },
+    action: { enabled: 0.04, hovered: 0.06, pressed: 0.08 },
+    border: { enabled: 0.08, focused: 0.16, filled: 0.24 }
+  },
+  dark: {
+    background: { elevated: 0.24, ground: 0.2, sunken: 0.16 },
+    text: { primary: 1, secondary: 0.85, tertiary: 0.7, disabled: 0.55 },
+    action: { enabled: 0.04, hovered: 0.06, pressed: 0.08 },
+    border: { enabled: 0.08, focused: 0.16, filled: 0.24 }
+  }
+};
+var ACCENT_DEFAULTS = {
+  light: {
+    background: { elevated: 0, ground: 0.03, sunken: 0.06 },
+    text: { primary: 0.9, secondary: 0.7, tertiary: 0.5, disabled: 0.3 },
+    action: { enabled: 0.04, hovered: 0.06, pressed: 0.08 },
+    border: { enabled: 0.08, focused: 0.16, filled: 0.24 }
+  },
+  dark: {
+    background: { elevated: 0.24, ground: 0.2, sunken: 0.16 },
+    text: { primary: 1, secondary: 0.85, tertiary: 0.7, disabled: 0.55 },
+    action: { enabled: 0.04, hovered: 0.06, pressed: 0.08 },
+    border: { enabled: 0.08, focused: 0.16, filled: 0.24 }
+  }
+};
+var SUCCESS_DEFAULTS = {
+  light: {
+    background: { elevated: 0, ground: 0.03, sunken: 0.06 },
+    text: { primary: 0.9, secondary: 0.7, tertiary: 0.5, disabled: 0.3 },
+    action: { enabled: 0.04, hovered: 0.06, pressed: 0.08 },
+    border: { enabled: 0.08, focused: 0.16, filled: 0.24 }
+  },
+  dark: {
+    background: { elevated: 0.24, ground: 0.2, sunken: 0.16 },
+    text: { primary: 1, secondary: 0.85, tertiary: 0.7, disabled: 0.55 },
+    action: { enabled: 0.04, hovered: 0.06, pressed: 0.08 },
+    border: { enabled: 0.08, focused: 0.16, filled: 0.24 }
+  }
+};
+var WARNING_DEFAULTS = {
+  light: {
+    background: { elevated: 0, ground: 0.03, sunken: 0.06 },
+    text: { primary: 0.9, secondary: 0.7, tertiary: 0.5, disabled: 0.3 },
+    action: { enabled: 0.04, hovered: 0.06, pressed: 0.08 },
+    border: { enabled: 0.08, focused: 0.16, filled: 0.24 }
+  },
+  dark: {
+    background: { elevated: 0.24, ground: 0.2, sunken: 0.16 },
+    text: { primary: 1, secondary: 0.85, tertiary: 0.7, disabled: 0.55 },
+    action: { enabled: 0.04, hovered: 0.06, pressed: 0.08 },
+    border: { enabled: 0.08, focused: 0.16, filled: 0.24 }
+  }
+};
+var ERROR_DEFAULTS = {
+  light: {
+    background: { elevated: 0, ground: 0.03, sunken: 0.06 },
+    text: { primary: 0.9, secondary: 0.7, tertiary: 0.5, disabled: 0.3 },
+    action: { enabled: 0.04, hovered: 0.06, pressed: 0.08 },
+    border: { enabled: 0.08, focused: 0.16, filled: 0.24 }
+  },
+  dark: {
+    background: { elevated: 0.24, ground: 0.2, sunken: 0.16 },
+    text: { primary: 1, secondary: 0.85, tertiary: 0.7, disabled: 0.55 },
+    action: { enabled: 0.04, hovered: 0.06, pressed: 0.08 },
+    border: { enabled: 0.08, focused: 0.16, filled: 0.24 }
+  }
+};
 function fontConfigToFamily(font) {
   const family = font.family.includes(" ") ? `"${font.family}"` : font.family;
   return `${family}, ${font.fallback}`;
 }
-function computeTokens(config, mode, themeMapping, elevation, elevationOffsets, spacing, radius, typography, icons) {
+var clamp = (n) => Math.max(0, Math.min(1, n));
+function computePaletteTokens(palette, defaults, mode, elevation, dynamicRange, elevationDelta, effectiveTextMode, autoAccentNv, neutralTextPrimary, neutralBgElevated) {
+  const modeDefaults = defaults[mode];
+  const toEngineNv = (nv) => mode === "light" ? 1 - nv : nv;
+  const textToEngineNv = (nv) => effectiveTextMode === "light" ? 1 - nv : nv;
+  const colorAt = (engineNv) => getColor(
+    palette.hue,
+    palette.saturation,
+    dynamicRange,
+    clamp(engineNv),
+    palette.desaturation,
+    palette.paletteHueGrading
+  );
+  const resolveKeyNv = (p) => mode === "dark" ? p.keyNormalizedValueDark : p.keyNormalizedValue;
+  const keyNv = resolveKeyNv(palette);
+  const fillBaseNv = keyNv ?? autoAccentNv;
+  const fillNv = clamp(fillBaseNv + elevationDelta);
+  const fill = colorAt(fillNv);
+  const hoverDir = effectiveTextMode === "light" ? -modeDefaults.action.hovered : modeDefaults.action.hovered;
+  const activeDir = effectiveTextMode === "light" ? -modeDefaults.action.pressed : modeDefaults.action.pressed;
+  const fillHover = colorAt(clamp(fillNv + hoverDir));
+  const fillActive = colorAt(clamp(fillNv + activeDir));
+  const onFill = fill.oklch.L > 0.6 ? neutralTextPrimary : neutralBgElevated;
+  const bgNormalized = elevation === 2 ? modeDefaults.background.elevated : elevation === 1 ? modeDefaults.background.ground : modeDefaults.background.sunken;
+  const bgNv = clamp(toEngineNv(bgNormalized));
+  const background = colorAt(bgNv);
+  const backgroundElevated = colorAt(clamp(toEngineNv(modeDefaults.background.elevated)));
+  const backgroundSunken = colorAt(clamp(toEngineNv(modeDefaults.background.sunken)));
+  const interactiveOffset = modeDefaults.action.enabled;
+  const interactiveNv = clamp(bgNv + (effectiveTextMode === "light" ? -interactiveOffset : interactiveOffset));
+  const backgroundInteractive = colorAt(interactiveNv);
+  const hoverShift = modeDefaults.action.hovered;
+  const activeShift = modeDefaults.action.pressed;
+  const backgroundInteractiveHover = colorAt(clamp(interactiveNv + (effectiveTextMode === "light" ? -hoverShift : hoverShift)));
+  const backgroundInteractiveActive = colorAt(clamp(interactiveNv + (effectiveTextMode === "light" ? -activeShift : activeShift)));
+  const textPrimary = colorAt(clamp(textToEngineNv(modeDefaults.text.primary) + elevationDelta));
+  const textSecondary = colorAt(clamp(textToEngineNv(modeDefaults.text.secondary) + elevationDelta));
+  const textTertiary = colorAt(clamp(textToEngineNv(modeDefaults.text.tertiary) + elevationDelta));
+  const textDisabled = colorAt(clamp(textToEngineNv(modeDefaults.text.disabled) + elevationDelta));
+  const borderOffset = modeDefaults.border.enabled;
+  const borderNv = effectiveTextMode === "light" ? bgNv - borderOffset : bgNv + borderOffset;
+  const border = colorAt(clamp(borderNv));
+  return {
+    fill,
+    fillHover,
+    fillActive,
+    onFill,
+    background,
+    backgroundElevated,
+    backgroundSunken,
+    backgroundInteractive,
+    backgroundInteractiveHover,
+    backgroundInteractiveActive,
+    textPrimary,
+    textSecondary,
+    textTertiary,
+    textDisabled,
+    border
+  };
+}
+function computeTokens(config, mode, elevation, spacing, radius, typography, icons, tokenOverrides) {
   const { dynamicRange, palettes } = config;
-  const palette = palettes[themeMapping.paletteIndex];
+  const palette = palettes[0];
   if (!palette) {
-    throw new Error(`Palette at index ${themeMapping.paletteIndex} not found`);
+    throw new Error("Neutral palette (index 0) not found");
   }
-  const baseNv = mode === "light" ? themeMapping.lightModeNv : themeMapping.darkModeNv;
-  const elevationOffset = elevationOffsets[elevation];
-  const backgroundNv = Math.max(0, Math.min(1, baseNv + elevationOffset));
+  const neutralDefaults = NEUTRAL_DEFAULTS[mode];
+  const toEngineNv = (nv) => mode === "light" ? 1 - nv : nv;
+  const bgElevatedNorm = mode === "light" ? tokenOverrides?.backgroundElevated : tokenOverrides?.backgroundElevatedDark;
+  const bgDefaultNorm = mode === "light" ? tokenOverrides?.backgroundDefault : tokenOverrides?.backgroundDefaultDark;
+  const bgSunkenNorm = mode === "light" ? tokenOverrides?.backgroundSunken : tokenOverrides?.backgroundSunkenDark;
+  const textPrimaryNorm = mode === "light" ? tokenOverrides?.textPrimaryNormalized : tokenOverrides?.textPrimaryNormalizedDark;
+  const textSecondaryNorm = mode === "light" ? tokenOverrides?.textSecondaryNormalized : tokenOverrides?.textSecondaryNormalizedDark;
+  const textTertiaryNorm = mode === "light" ? tokenOverrides?.textTertiaryNormalized : tokenOverrides?.textTertiaryNormalizedDark;
+  const textDisabledNorm = mode === "light" ? tokenOverrides?.textDisabledNormalized : tokenOverrides?.textDisabledNormalizedDark;
+  const bgNormalized = elevation === 2 ? bgElevatedNorm ?? neutralDefaults.background.elevated : elevation === 1 ? bgDefaultNorm ?? neutralDefaults.background.ground : bgSunkenNorm ?? neutralDefaults.background.sunken;
+  const backgroundNv = clamp(toEngineNv(bgNormalized));
+  const elevatedNv = clamp(toEngineNv(bgElevatedNorm ?? neutralDefaults.background.elevated));
+  const sunkenNv = clamp(toEngineNv(bgSunkenNorm ?? neutralDefaults.background.sunken));
+  const elevationDelta = backgroundNv - elevatedNv;
   const effectiveTextMode = backgroundNv >= 0.5 ? "light" : "dark";
   const background = getColor(
     palette.hue,
@@ -240,7 +367,6 @@ function computeTokens(config, mode, themeMapping, elevation, elevationOffsets,
     palette.desaturation,
     palette.paletteHueGrading
   );
-  const elevatedNv = Math.max(0, Math.min(1, baseNv + elevationOffsets[2]));
   const backgroundElevated = getColor(
     palette.hue,
     palette.saturation,
@@ -249,7 +375,6 @@ function computeTokens(config, mode, themeMapping, elevation, elevationOffsets,
     palette.desaturation,
     palette.paletteHueGrading
   );
-  const sunkenNv = Math.max(0, Math.min(1, baseNv + elevationOffsets[0]));
   const backgroundSunken = getColor(
     palette.hue,
     palette.saturation,
@@ -258,8 +383,11 @@ function computeTokens(config, mode, themeMapping, elevation, elevationOffsets,
     palette.desaturation,
     palette.paletteHueGrading
   );
-  const INTERACTIVE_COMPONENT_OFFSET = -0.035;
-  const interactiveComponentNv = Math.max(0, Math.min(1, backgroundNv + INTERACTIVE_COMPONENT_OFFSET));
+  const INTERACTIVE_COMPONENT_OFFSET = mode === "light" ? tokenOverrides?.interactiveComponentOffset ?? neutralDefaults.action.enabled : tokenOverrides?.interactiveComponentOffsetDark ?? neutralDefaults.action.enabled;
+  const HOVER_SHIFT = mode === "light" ? tokenOverrides?.hoverShift ?? neutralDefaults.action.hovered : tokenOverrides?.hoverShiftDark ?? neutralDefaults.action.hovered;
+  const ACTIVE_SHIFT = mode === "light" ? tokenOverrides?.activeShift ?? neutralDefaults.action.pressed : tokenOverrides?.activeShiftDark ?? neutralDefaults.action.pressed;
+  const BORDER_OFFSET = mode === "light" ? tokenOverrides?.borderOffset ?? neutralDefaults.border.enabled : tokenOverrides?.borderOffsetDark ?? neutralDefaults.border.enabled;
+  const interactiveComponentNv = clamp(backgroundNv + (effectiveTextMode === "light" ? -INTERACTIVE_COMPONENT_OFFSET : INTERACTIVE_COMPONENT_OFFSET));
   const backgroundInteractive = getColor(
     palette.hue,
     palette.saturation,
@@ -268,143 +396,135 @@ function computeTokens(config, mode, themeMapping, elevation, elevationOffsets,
     palette.desaturation,
     palette.paletteHueGrading
   );
-  const textPrimary = getColorByContrast(
+  const neutralHoverNv = clamp(interactiveComponentNv + (effectiveTextMode === "light" ? -HOVER_SHIFT : HOVER_SHIFT));
+  const backgroundInteractiveHover = getColor(
     palette.hue,
     palette.saturation,
     dynamicRange,
-    4.5,
-    effectiveTextMode,
+    neutralHoverNv,
     palette.desaturation,
-    palette.paletteHueGrading,
-    background
+    palette.paletteHueGrading
   );
-  const textSecondary = getColorByContrast(
+  const neutralActiveNv = clamp(interactiveComponentNv + (effectiveTextMode === "light" ? -ACTIVE_SHIFT : ACTIVE_SHIFT));
+  const backgroundInteractiveActive = getColor(
     palette.hue,
     palette.saturation,
     dynamicRange,
-    3,
-    effectiveTextMode,
+    neutralActiveNv,
     palette.desaturation,
-    palette.paletteHueGrading,
-    background
+    palette.paletteHueGrading
   );
-  const accentPalette = palettes[1];
-  if (!accentPalette) {
-    throw new Error("Accent palette (index 1) not found");
-  }
-  const resolveKeyNv = (p) => mode === "dark" ? p.keyNormalizedValueDark : p.keyNormalizedValue;
-  const accentKeyNv = resolveKeyNv(accentPalette);
-  const interactive = accentKeyNv !== void 0 ? getColor(
-    accentPalette.hue,
-    accentPalette.saturation,
+  const textToEngineNv = (nv) => effectiveTextMode === "light" ? 1 - nv : nv;
+  const textPrimary = getColor(
+    palette.hue,
+    palette.saturation,
     dynamicRange,
-    accentKeyNv,
-    accentPalette.desaturation,
-    accentPalette.paletteHueGrading
-  ) : getColorByContrast(
-    accentPalette.hue,
-    accentPalette.saturation,
+    clamp(textToEngineNv(textPrimaryNorm ?? neutralDefaults.text.primary) + elevationDelta),
+    palette.desaturation,
+    palette.paletteHueGrading
+  );
+  const textSecondary = getColor(
+    palette.hue,
+    palette.saturation,
     dynamicRange,
-    4.5,
-    effectiveTextMode,
-    accentPalette.desaturation,
-    accentPalette.paletteHueGrading,
-    background
+    clamp(textToEngineNv(textSecondaryNorm ?? neutralDefaults.text.secondary) + elevationDelta),
+    palette.desaturation,
+    palette.paletteHueGrading
   );
-  const interactiveNv = accentKeyNv ?? (effectiveTextMode === "light" ? 0.3 : 0.7);
-  const interactiveHover = getColor(
-    accentPalette.hue,
-    accentPalette.saturation,
+  const textTertiary = getColor(
+    palette.hue,
+    palette.saturation,
     dynamicRange,
-    interactiveNv + (effectiveTextMode === "light" ? -0.05 : 0.05),
-    accentPalette.desaturation,
-    accentPalette.paletteHueGrading
+    clamp(textToEngineNv(textTertiaryNorm ?? neutralDefaults.text.tertiary) + elevationDelta),
+    palette.desaturation,
+    palette.paletteHueGrading
   );
-  const interactiveActive = getColor(
-    accentPalette.hue,
-    accentPalette.saturation,
+  const textDisabled = getColor(
+    palette.hue,
+    palette.saturation,
     dynamicRange,
-    interactiveNv + (effectiveTextMode === "light" ? -0.1 : 0.1),
-    accentPalette.desaturation,
-    accentPalette.paletteHueGrading
+    clamp(textToEngineNv(textDisabledNorm ?? neutralDefaults.text.disabled) + elevationDelta),
+    palette.desaturation,
+    palette.paletteHueGrading
   );
-  const borderNv = effectiveTextMode === "light" ? backgroundNv - 0.1 : backgroundNv + 0.1;
+  const borderNv = effectiveTextMode === "light" ? backgroundNv - BORDER_OFFSET : backgroundNv + BORDER_OFFSET;
   const border = getColor(
     palette.hue,
     palette.saturation,
     dynamicRange,
-    Math.max(0, Math.min(1, borderNv)),
+    clamp(borderNv),
     palette.desaturation,
     palette.paletteHueGrading
   );
+  const autoAccentNv = clamp(textToEngineNv(textPrimaryNorm ?? neutralDefaults.text.primary));
+  const accentPalette = palettes[1];
+  if (!accentPalette) {
+    throw new Error("Accent palette (index 1) not found");
+  }
+  const accent = computePaletteTokens(
+    accentPalette,
+    ACCENT_DEFAULTS,
+    mode,
+    elevation,
+    dynamicRange,
+    elevationDelta,
+    effectiveTextMode,
+    autoAccentNv,
+    textPrimary,
+    backgroundElevated
+  );
   const successPalette = palettes[2];
   const warningPalette = palettes[3];
   const errorPalette = palettes[4];
-  const successKeyNv = successPalette ? resolveKeyNv(successPalette) : void 0;
-  const success = successPalette ? successKeyNv !== void 0 ? getColor(
-    successPalette.hue,
-    successPalette.saturation,
+  const success = successPalette ? computePaletteTokens(
+    successPalette,
+    SUCCESS_DEFAULTS,
+    mode,
+    elevation,
     dynamicRange,
-    successKeyNv,
-    successPalette.desaturation,
-    successPalette.paletteHueGrading
-  ) : getColorByContrast(
-    successPalette.hue,
-    successPalette.saturation,
-    dynamicRange,
-    4.5,
+    elevationDelta,
     effectiveTextMode,
-    successPalette.desaturation,
-    successPalette.paletteHueGrading,
-    background
-  ) : interactive;
-  const warningKeyNv = warningPalette ? resolveKeyNv(warningPalette) : void 0;
-  const warning = warningPalette ? warningKeyNv !== void 0 ? getColor(
-    warningPalette.hue,
-    warningPalette.saturation,
-    dynamicRange,
-    warningKeyNv,
-    warningPalette.desaturation,
-    warningPalette.paletteHueGrading
-  ) : getColorByContrast(
-    warningPalette.hue,
-    warningPalette.saturation,
+    autoAccentNv,
+    textPrimary,
+    backgroundElevated
+  ) : accent;
+  const warning = warningPalette ? computePaletteTokens(
+    warningPalette,
+    WARNING_DEFAULTS,
+    mode,
+    elevation,
     dynamicRange,
-    4.5,
+    elevationDelta,
     effectiveTextMode,
-    warningPalette.desaturation,
-    warningPalette.paletteHueGrading,
-    background
-  ) : interactive;
-  const errorKeyNv = errorPalette ? resolveKeyNv(errorPalette) : void 0;
-  const error = errorPalette ? errorKeyNv !== void 0 ? getColor(
-    errorPalette.hue,
-    errorPalette.saturation,
-    dynamicRange,
-    errorKeyNv,
-    errorPalette.desaturation,
-    errorPalette.paletteHueGrading
-  ) : getColorByContrast(
-    errorPalette.hue,
-    errorPalette.saturation,
+    autoAccentNv,
+    textPrimary,
+    backgroundElevated
+  ) : accent;
+  const error = errorPalette ? computePaletteTokens(
+    errorPalette,
+    ERROR_DEFAULTS,
+    mode,
+    elevation,
     dynamicRange,
-    4.5,
+    elevationDelta,
     effectiveTextMode,
-    errorPalette.desaturation,
-    errorPalette.paletteHueGrading,
-    background
-  ) : interactive;
+    autoAccentNv,
+    textPrimary,
+    backgroundElevated
+  ) : accent;
   return {
     background,
     backgroundElevated,
     backgroundSunken,
     backgroundInteractive,
+    backgroundInteractiveHover,
+    backgroundInteractiveActive,
     textPrimary,
     textSecondary,
-    interactive,
-    interactiveHover,
-    interactiveActive,
+    textTertiary,
+    textDisabled,
     border,
+    accent,
     success,
     warning,
     error,
@@ -430,29 +550,26 @@ function computeTokens(config, mode, themeMapping, elevation, elevationOffsets,
 
 // src/tokens/useTokens.ts
 function useTokens(elevation) {
-  const { config, mode, theme: providerTheme } = useNewtoneTheme();
+  const { config, mode } = useNewtoneTheme();
   const frameCtx = useFrameContext();
-  const resolvedTheme = frameCtx?.theme ?? providerTheme;
   const resolvedElevation = elevation ?? frameCtx?.elevation ?? 1;
+  const canReuse = frameCtx !== null && elevation === void 0 && frameCtx.elevation === resolvedElevation;
   return useMemo(() => {
-    const themeMapping = config.themes[resolvedTheme];
+    if (canReuse) {
+      return { ...frameCtx.tokens, elevation: resolvedElevation };
+    }
     const tokens = computeTokens(
       config.colorSystem,
       mode,
-      themeMapping,
       resolvedElevation,
-      config.elevation.offsets,
       config.spacing,
       config.radius,
       config.typography,
-      config.icons
+      config.icons,
+      config.tokenOverrides
     );
     return { ...tokens, elevation: resolvedElevation };
-  }, [config, mode, resolvedTheme, resolvedElevation]);
-}
-function withOpacity(hexColor, opacity) {
-  const alpha = Math.round(opacity * 255).toString(16).padStart(2, "0");
-  return `${hexColor}${alpha}`;
+  }, [config, mode, resolvedElevation, canReuse, frameCtx?.tokens]);
 }
 function computeButtonPadding(size, hasIcon, hasText, iconPosition) {
   const basePadding = {
@@ -502,8 +619,19 @@ function computeButtonPadding(size, hasIcon, hasText, iconPosition) {
     paddingBottom: base
   };
 }
-function getNeutralPrimaryBg(tokens) {
-  return srgbToHex(tokens.backgroundInteractive.srgb);
+function getPaletteTokens(semantic, tokens) {
+  switch (semantic) {
+    case "accent":
+      return tokens.accent;
+    case "success":
+      return tokens.success;
+    case "error":
+      return tokens.error;
+    case "warning":
+      return tokens.warning;
+    default:
+      return void 0;
+  }
 }
 function getButtonConfig(variant, semantic, size, disabled, tokens) {
   const sizeConfig = getSizeConfig(size, tokens);
@@ -551,10 +679,12 @@ function getSizeConfig(size, tokens) {
 function getVariantColors(variant, semantic, disabled, tokens) {
   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)
     };
@@ -562,109 +692,76 @@ function getVariantColors(variant, semantic, disabled, tokens) {
   return getVariantColorsForState(variant, semantic, tokens);
 }
 function getVariantColorsForState(variant, semantic, tokens) {
-  const getSemanticColor = () => {
-    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);
   if (variant === "primary") {
     if (semantic === "neutral") {
-      const bg = getNeutralPrimaryBg(tokens);
       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") {
-      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
-      };
-    }
-    const semanticColor = getSemanticColor();
     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
     };
   }
   if (variant === "secondary") {
     if (semantic === "neutral") {
       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: srgbToHex(tokens.border.srgb)
       };
     }
-    const semanticColor = getSemanticColor();
     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
     };
   }
   if (variant === "tertiary") {
     if (semantic === "neutral") {
       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
       };
     }
-    const semanticColor = getSemanticColor();
     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
     };
   }
   return {
     bg: "transparent",
+    hoveredBg: "transparent",
     pressedBg: "transparent",
     textColor: srgbToHex(tokens.textPrimary.srgb),
     iconColor: srgbToHex(tokens.textPrimary.srgb),
@@ -731,11 +828,26 @@ function Icon({
     name
   );
 }
-var COLOR_MAP = {
-  primary: "textPrimary",
-  secondary: "textSecondary",
-  interactive: "interactive"
-};
+function resolveTextColor(color, tokens) {
+  switch (color) {
+    case "primary":
+      return srgbToHex(tokens.textPrimary.srgb);
+    case "secondary":
+      return srgbToHex(tokens.textSecondary.srgb);
+    case "tertiary":
+      return srgbToHex(tokens.textTertiary.srgb);
+    case "disabled":
+      return srgbToHex(tokens.textDisabled.srgb);
+    case "accent":
+      return srgbToHex(tokens.accent.fill.srgb);
+    case "success":
+      return srgbToHex(tokens.success.fill.srgb);
+    case "warning":
+      return srgbToHex(tokens.warning.fill.srgb);
+    case "error":
+      return srgbToHex(tokens.error.fill.srgb);
+  }
+}
 function Text2({
   children,
   size = "base",
@@ -764,7 +876,7 @@ function Text2({
       // Font weight is stored as a number (e.g. 400, 600) but React Native expects a string.
       fontWeight: String(tokens.typography.weight[weight]),
       // Convert the theme color from internal sRGB format to a hex string (e.g. '#1a1a1a').
-      color: srgbToHex(tokens[COLOR_MAP[color]].srgb),
+      color: resolveTextColor(color, tokens),
       // Line height = font size × multiplier (e.g. 16px × 1.5 = 24px line height).
       lineHeight: fontSize * tokens.typography.lineHeight[lineHeight],
       textAlign: align
@@ -1021,7 +1133,7 @@ function Button({
     () => computeButtonPadding(size, !!icon, !!children, iconPosition),
     [size, icon, children, iconPosition]
   );
-  return /* @__PURE__ */ React13.createElement(Pressable, { disabled, ...pressableProps }, ({ pressed }) => (
+  return /* @__PURE__ */ React13.createElement(Pressable, { disabled, ...pressableProps }, ({ pressed, hovered }) => (
     // Wrapper handles layout: direction, gap, alignment (padding via style)
     /* @__PURE__ */ React13.createElement(
       Wrapper,
@@ -1034,7 +1146,7 @@ function Button({
           {
             ...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
@@ -1252,8 +1364,7 @@ function toElevationLevel(frameElevation) {
 }
 function Frame({
   children,
-  // Theme & elevation
-  theme,
+  // Elevation
   elevation,
   // Layout
   layout,
@@ -1292,25 +1403,22 @@ function Frame({
   // Style override
   style
 }) {
-  const { config, mode, theme: providerTheme } = useNewtoneTheme();
+  const { config, mode } = useNewtoneTheme();
   const parentFrameCtx = useFrameContext();
-  const resolvedTheme = theme ?? parentFrameCtx?.theme ?? providerTheme;
   const resolvedFrameElevation = elevation ?? 0;
   const resolvedElevation = elevation !== void 0 ? toElevationLevel(elevation) : parentFrameCtx?.elevation ?? 1;
   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.icons,
+      config.tokenOverrides
     );
-  }, [config, mode, resolvedTheme, resolvedElevation]);
+  }, [config, mode, resolvedElevation]);
   const styles = useMemo(
     () => getFrameStyles({
       tokens,
@@ -1360,8 +1468,8 @@ function Frame({
     ]
   );
   const contextValue = useMemo(
-    () => ({ theme: resolvedTheme, elevation: resolvedElevation }),
-    [resolvedTheme, resolvedElevation]
+    () => ({ elevation: resolvedElevation, tokens }),
+    [resolvedElevation, tokens]
   );
   const webOverrides = [];
   if (styles.gridWebStyle) {
@@ -1376,7 +1484,7 @@ function Frame({
   const focusRingStyle = isFocusVisible && !disabled ? {
     outlineWidth: 2,
     outlineStyle: "solid",
-    outlineColor: srgbToHex(tokens.interactive.srgb),
+    outlineColor: srgbToHex(tokens.accent.fill.srgb),
     outlineOffset: 2
   } : void 0;
   const webFocusProps = isInteractive ? focusProps : {};
@@ -1831,7 +1939,7 @@ function SelectOptionRow({
           },
           isSelected && {
             fontWeight: tokens.typography.weight.semibold,
-            color: srgbToHex(tokens.interactive.srgb)
+            color: srgbToHex(tokens.accent.fill.srgb)
           },
           option.disabled && {
             color: srgbToHex(tokens.textSecondary.srgb)
@@ -1846,7 +1954,7 @@ function SelectOptionRow({
       {
         name: "check",
         size: fontSize,
-        color: srgbToHex(tokens.interactive.srgb)
+        color: srgbToHex(tokens.accent.fill.srgb)
       }
     ))
   );
@@ -1989,7 +2097,7 @@ function getToggleStyles(tokens, value, disabled) {
       width: TRACK_WIDTH,
       height: TRACK_HEIGHT,
       borderRadius: TRACK_HEIGHT / 2,
-      backgroundColor: value ? srgbToHex(tokens.interactive.srgb) : srgbToHex(tokens.border.srgb),
+      backgroundColor: value ? srgbToHex(tokens.accent.fill.srgb) : srgbToHex(tokens.border.srgb),
       justifyContent: "center",
       paddingHorizontal: THUMB_OFFSET
     },
@@ -2089,14 +2197,14 @@ function getSliderStyles(tokens, disabled) {
       left: 0,
       height: TRACK_HEIGHT2,
       borderRadius: TRACK_HEIGHT2 / 2,
-      backgroundColor: srgbToHex(tokens.interactive.srgb)
+      backgroundColor: srgbToHex(tokens.accent.fill.srgb)
     },
     thumb: {
       position: "absolute",
       width: THUMB_SIZE2,
       height: THUMB_SIZE2,
       borderRadius: THUMB_SIZE2 / 2,
-      backgroundColor: srgbToHex(tokens.interactive.srgb)
+      backgroundColor: srgbToHex(tokens.accent.fill.srgb)
     }
   });
 }
@@ -2471,7 +2579,7 @@ function getColorScaleSliderStyles(tokens, disabled) {
       fontFamily: tokens.typography.fonts.default,
       fontSize: tokens.typography.size.xs,
       fontWeight: tokens.typography.weight.medium,
-      color: srgbToHex(tokens.error.srgb)
+      color: srgbToHex(tokens.error.fill.srgb)
     }
   });
 }
@@ -2720,13 +2828,17 @@ var COMPONENTS = [
     variants: [
       { id: "primary-md", label: "Primary", props: { variant: "primary", size: "md" } },
       { id: "secondary-md", label: "Secondary", props: { variant: "secondary", size: "md" } },
-      { id: "ghost-md", label: "Ghost", props: { variant: "ghost", size: "md" } },
-      { id: "outline-md", label: "Outline", props: { variant: "outline", size: "md" } },
+      { id: "tertiary-md", label: "Tertiary", props: { variant: "tertiary", size: "md" } },
       { id: "primary-sm", label: "Primary Small", props: { variant: "primary", size: "sm" } },
       { id: "primary-lg", label: "Primary Large", props: { variant: "primary", size: "lg" } },
+      { id: "accent-primary", label: "Accent Primary", props: { variant: "primary", size: "md", semantic: "accent" } },
+      { id: "accent-secondary", label: "Accent Secondary", props: { variant: "secondary", size: "md", semantic: "accent" } },
+      { id: "success-primary", label: "Success Primary", props: { variant: "primary", size: "md", semantic: "success" } },
+      { id: "error-primary", label: "Error Primary", props: { variant: "primary", size: "md", semantic: "error" } },
+      { id: "warning-primary", label: "Warning Primary", props: { variant: "primary", size: "md", semantic: "warning" } },
       { id: "icon-left", label: "Icon Left", props: { variant: "primary", size: "md", icon: "add" } },
       { id: "icon-right", label: "Icon Right", props: { variant: "primary", size: "md", icon: "arrow_forward", iconPosition: "right" } },
-      { id: "icon-only", label: "Icon Only", props: { variant: "ghost", size: "md", icon: "settings" } }
+      { id: "icon-only", label: "Icon Only", props: { variant: "tertiary", size: "md", icon: "settings" } }
     ],
     editableProps: [
       {
@@ -2736,11 +2848,23 @@ var COMPONENTS = [
         options: [
           { label: "Primary", value: "primary" },
           { label: "Secondary", value: "secondary" },
-          { label: "Ghost", value: "ghost" },
-          { label: "Outline", value: "outline" }
+          { label: "Tertiary", value: "tertiary" }
         ],
         defaultValue: "primary"
       },
+      {
+        name: "semantic",
+        label: "Semantic",
+        control: "select",
+        options: [
+          { label: "Neutral", value: "neutral" },
+          { label: "Accent", value: "accent" },
+          { label: "Success", value: "success" },
+          { label: "Warning", value: "warning" },
+          { label: "Error", value: "error" }
+        ],
+        defaultValue: "neutral"
+      },
       {
         name: "size",
         label: "Size",
@@ -3103,7 +3227,7 @@ var COMPONENTS = [
       { id: "subheading", label: "Subheading", props: { size: "lg", weight: "semibold" } },
       { id: "body", label: "Body", props: { size: "base" } },
       { id: "caption", label: "Caption", props: { size: "sm", color: "secondary" } },
-      { id: "link", label: "Link", props: { color: "interactive", weight: "medium" } },
+      { id: "accent", label: "Accent", props: { color: "accent", weight: "medium" } },
       { id: "mono", label: "Monospace", props: { font: "mono", size: "sm" } }
     ],
     editableProps: [
@@ -3141,7 +3265,12 @@ var COMPONENTS = [
         options: [
           { label: "Primary", value: "primary" },
           { label: "Secondary", value: "secondary" },
-          { label: "Interactive", value: "interactive" }
+          { label: "Tertiary", value: "tertiary" },
+          { label: "Disabled", value: "disabled" },
+          { label: "Accent", value: "accent" },
+          { label: "Success", value: "success" },
+          { label: "Warning", value: "warning" },
+          { label: "Error", value: "error" }
         ],
         defaultValue: "primary"
       },
@@ -3466,6 +3595,6 @@ var SYSTEM_FONTS = [
   }
 ];
 
-export { AppShell, Button, CATEGORIES, COMPONENTS, Card, ColorScaleSlider, DEFAULT_THEME_CONFIG, Frame, GOOGLE_FONTS, HueSlider, Icon, Navbar, NewtoneProvider, Popover, SYSTEM_FONTS, Select, Sidebar, Slider, Text2 as Text, TextInput, Toggle, Wrapper, buildGoogleFontsUrl, computeTokens, generateComponentCode, getCategory, getComponent, getComponentsByCategory, isOptionGroup, useFocusVisible, useFrameContext, useNewtoneTheme, usePopover, useTokens };
+export { ACCENT_DEFAULTS, AppShell, Button, CATEGORIES, COMPONENTS, Card, ColorScaleSlider, DEFAULT_THEME_CONFIG, ERROR_DEFAULTS, Frame, GOOGLE_FONTS, HueSlider, Icon, NEUTRAL_DEFAULTS, Navbar, NewtoneProvider, Popover, SUCCESS_DEFAULTS, SYSTEM_FONTS, Select, Sidebar, Slider, Text2 as Text, TextInput, Toggle, WARNING_DEFAULTS, Wrapper, buildGoogleFontsUrl, computeTokens, generateComponentCode, getCategory, getComponent, getComponentsByCategory, isOptionGroup, useFocusVisible, useFrameContext, useNewtoneTheme, usePopover, useTokens };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map