@newtonedev/components 0.1.5 → 0.1.6

package/dist/index.cjs

@@ -23,16 +23,6 @@ var DEFAULT_THEME_CONFIG = {
       { hue: newtone.DEFAULT_ERROR_HUE, saturation: newtone.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
@@ -196,20 +186,16 @@ var ThemeContext = React13.createContext(null);
 function NewtoneProvider({
   config = DEFAULT_THEME_CONFIG,
   initialMode = "light",
-  initialTheme = "neutral",
   children
 }) {
   const [mode, setMode] = React13.useState(initialMode);
-  const [theme, setTheme] = React13.useState(initialTheme);
   const value = React13.useMemo(
     () => ({
       config,
       mode,
-      theme,
-      setMode,
-      setTheme
+      setMode
     }),
-    [config, mode, theme]
+    [config, mode]
   );
   return /* @__PURE__ */ React13__default.default.createElement(ThemeContext.Provider, { value }, /* @__PURE__ */ React13__default.default.createElement(GoogleFontLoader, { fonts: config.typography.fonts }), /* @__PURE__ */ React13__default.default.createElement(IconFontLoader, { icons: config.icons }), children);
 }
@@ -224,19 +210,160 @@ var FrameContext = React13.createContext(null);
 function useFrameContext() {
   return React13.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) => newtone.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 = newtone.getColor(
     palette.hue,
@@ -246,7 +373,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 = newtone.getColor(
     palette.hue,
     palette.saturation,
@@ -255,7 +381,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 = newtone.getColor(
     palette.hue,
     palette.saturation,
@@ -264,8 +389,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 = newtone.getColor(
     palette.hue,
     palette.saturation,
@@ -274,143 +402,135 @@ function computeTokens(config, mode, themeMapping, elevation, elevationOffsets,
     palette.desaturation,
     palette.paletteHueGrading
   );
-  const textPrimary = newtone.getColorByContrast(
+  const neutralHoverNv = clamp(interactiveComponentNv + (effectiveTextMode === "light" ? -HOVER_SHIFT : HOVER_SHIFT));
+  const backgroundInteractiveHover = newtone.getColor(
     palette.hue,
     palette.saturation,
     dynamicRange,
-    4.5,
-    effectiveTextMode,
+    neutralHoverNv,
     palette.desaturation,
-    palette.paletteHueGrading,
-    background
+    palette.paletteHueGrading
   );
-  const textSecondary = newtone.getColorByContrast(
+  const neutralActiveNv = clamp(interactiveComponentNv + (effectiveTextMode === "light" ? -ACTIVE_SHIFT : ACTIVE_SHIFT));
+  const backgroundInteractiveActive = newtone.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 ? newtone.getColor(
-    accentPalette.hue,
-    accentPalette.saturation,
+  const textToEngineNv = (nv) => effectiveTextMode === "light" ? 1 - nv : nv;
+  const textPrimary = newtone.getColor(
+    palette.hue,
+    palette.saturation,
     dynamicRange,
-    accentKeyNv,
-    accentPalette.desaturation,
-    accentPalette.paletteHueGrading
-  ) : newtone.getColorByContrast(
-    accentPalette.hue,
-    accentPalette.saturation,
+    clamp(textToEngineNv(textPrimaryNorm ?? neutralDefaults.text.primary) + elevationDelta),
+    palette.desaturation,
+    palette.paletteHueGrading
+  );
+  const textSecondary = newtone.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 = newtone.getColor(
-    accentPalette.hue,
-    accentPalette.saturation,
+  const textTertiary = newtone.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 = newtone.getColor(
-    accentPalette.hue,
-    accentPalette.saturation,
+  const textDisabled = newtone.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 = newtone.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 ? newtone.getColor(
-    successPalette.hue,
-    successPalette.saturation,
+  const success = successPalette ? computePaletteTokens(
+    successPalette,
+    SUCCESS_DEFAULTS,
+    mode,
+    elevation,
     dynamicRange,
-    successKeyNv,
-    successPalette.desaturation,
-    successPalette.paletteHueGrading
-  ) : newtone.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 ? newtone.getColor(
-    warningPalette.hue,
-    warningPalette.saturation,
-    dynamicRange,
-    warningKeyNv,
-    warningPalette.desaturation,
-    warningPalette.paletteHueGrading
-  ) : newtone.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 ? newtone.getColor(
-    errorPalette.hue,
-    errorPalette.saturation,
-    dynamicRange,
-    errorKeyNv,
-    errorPalette.desaturation,
-    errorPalette.paletteHueGrading
-  ) : newtone.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,
@@ -436,29 +556,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 React13.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 = {
@@ -508,8 +625,19 @@ function computeButtonPadding(size, hasIcon, hasText, iconPosition) {
     paddingBottom: base
   };
 }
-function getNeutralPrimaryBg(tokens) {
-  return newtone.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);
@@ -557,10 +685,12 @@ function getSizeConfig(size, tokens) {
 function getVariantColors(variant, semantic, disabled, tokens) {
   if (disabled) {
     const baseColors = getVariantColorsForState(variant, semantic, tokens);
+    const disabledBg = newtone.srgbToHex(tokens.backgroundSunken.srgb);
     return {
       ...baseColors,
-      bg: newtone.srgbToHex(tokens.backgroundSunken.srgb),
-      pressedBg: newtone.srgbToHex(tokens.backgroundSunken.srgb),
+      bg: disabledBg,
+      hoveredBg: disabledBg,
+      pressedBg: disabledBg,
       textColor: newtone.srgbToHex(tokens.textSecondary.srgb),
       iconColor: newtone.srgbToHex(tokens.textSecondary.srgb)
     };
@@ -568,109 +698,76 @@ function getVariantColors(variant, semantic, disabled, tokens) {
   return getVariantColorsForState(variant, semantic, tokens);
 }
 function getVariantColorsForState(variant, semantic, tokens) {
-  const getSemanticColor = () => {
-    switch (semantic) {
-      case "accent":
-        return newtone.srgbToHex(tokens.interactive.srgb);
-      case "success":
-        return newtone.srgbToHex(tokens.success.srgb);
-      case "error":
-        return newtone.srgbToHex(tokens.error.srgb);
-      case "warning":
-        return newtone.srgbToHex(tokens.warning.srgb);
-      default:
-        return newtone.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: newtone.srgbToHex(tokens.backgroundInteractive.srgb),
+        hoveredBg: newtone.srgbToHex(tokens.backgroundInteractiveHover.srgb),
+        pressedBg: newtone.srgbToHex(tokens.backgroundInteractiveActive.srgb),
         textColor: newtone.srgbToHex(tokens.textPrimary.srgb),
         iconColor: newtone.srgbToHex(tokens.textPrimary.srgb),
         borderWidth: 1,
         borderColor: "transparent"
-        // Invisible border for consistent sizing
       };
     }
-    if (semantic === "accent") {
-      return {
-        bg: newtone.srgbToHex(tokens.interactive.srgb),
-        pressedBg: newtone.srgbToHex(tokens.interactiveActive.srgb),
-        textColor: newtone.srgbToHex(tokens.background.srgb),
-        // Contrast inversion
-        iconColor: newtone.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: newtone.srgbToHex(tokens.background.srgb),
-      // Contrast text
-      iconColor: newtone.srgbToHex(tokens.background.srgb),
+      bg: newtone.srgbToHex(paletteTokens.fill.srgb),
+      hoveredBg: newtone.srgbToHex(paletteTokens.fillHover.srgb),
+      pressedBg: newtone.srgbToHex(paletteTokens.fillActive.srgb),
+      textColor: newtone.srgbToHex(paletteTokens.onFill.srgb),
+      iconColor: newtone.srgbToHex(paletteTokens.onFill.srgb),
       borderWidth: 1,
       borderColor: "transparent"
-      // Invisible border for consistent sizing
     };
   }
   if (variant === "secondary") {
     if (semantic === "neutral") {
       return {
         bg: "transparent",
-        pressedBg: newtone.srgbToHex(tokens.backgroundSunken.srgb),
+        hoveredBg: newtone.srgbToHex(tokens.backgroundInteractive.srgb),
+        pressedBg: newtone.srgbToHex(tokens.backgroundInteractiveHover.srgb),
         textColor: newtone.srgbToHex(tokens.textPrimary.srgb),
         iconColor: newtone.srgbToHex(tokens.textPrimary.srgb),
         borderWidth: 1,
         borderColor: newtone.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: newtone.srgbToHex(paletteTokens.background.srgb),
+      hoveredBg: newtone.srgbToHex(paletteTokens.backgroundInteractive.srgb),
+      pressedBg: newtone.srgbToHex(paletteTokens.backgroundInteractiveHover.srgb),
+      textColor: newtone.srgbToHex(paletteTokens.fill.srgb),
+      iconColor: newtone.srgbToHex(paletteTokens.fill.srgb),
       borderWidth: 1,
       borderColor: "transparent"
-      // Invisible border for consistent sizing
     };
   }
   if (variant === "tertiary") {
     if (semantic === "neutral") {
       return {
         bg: "transparent",
-        pressedBg: newtone.srgbToHex(tokens.backgroundSunken.srgb),
+        hoveredBg: newtone.srgbToHex(tokens.backgroundInteractive.srgb),
+        pressedBg: newtone.srgbToHex(tokens.backgroundInteractiveHover.srgb),
         textColor: newtone.srgbToHex(tokens.textPrimary.srgb),
         iconColor: newtone.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: newtone.srgbToHex(paletteTokens.background.srgb),
+      pressedBg: newtone.srgbToHex(paletteTokens.backgroundInteractive.srgb),
+      textColor: newtone.srgbToHex(paletteTokens.fill.srgb),
+      iconColor: newtone.srgbToHex(paletteTokens.fill.srgb),
       borderWidth: 1,
       borderColor: "transparent"
-      // Invisible border for consistent sizing
     };
   }
   return {
     bg: "transparent",
+    hoveredBg: "transparent",
     pressedBg: "transparent",
     textColor: newtone.srgbToHex(tokens.textPrimary.srgb),
     iconColor: newtone.srgbToHex(tokens.textPrimary.srgb),
@@ -737,11 +834,26 @@ function Icon({
     name
   );
 }
-var COLOR_MAP = {
-  primary: "textPrimary",
-  secondary: "textSecondary",
-  interactive: "interactive"
-};
+function resolveTextColor(color, tokens) {
+  switch (color) {
+    case "primary":
+      return newtone.srgbToHex(tokens.textPrimary.srgb);
+    case "secondary":
+      return newtone.srgbToHex(tokens.textSecondary.srgb);
+    case "tertiary":
+      return newtone.srgbToHex(tokens.textTertiary.srgb);
+    case "disabled":
+      return newtone.srgbToHex(tokens.textDisabled.srgb);
+    case "accent":
+      return newtone.srgbToHex(tokens.accent.fill.srgb);
+    case "success":
+      return newtone.srgbToHex(tokens.success.fill.srgb);
+    case "warning":
+      return newtone.srgbToHex(tokens.warning.fill.srgb);
+    case "error":
+      return newtone.srgbToHex(tokens.error.fill.srgb);
+  }
+}
 function Text2({
   children,
   size = "base",
@@ -770,7 +882,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: newtone.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
@@ -1027,7 +1139,7 @@ function Button({
     () => computeButtonPadding(size, !!icon, !!children, iconPosition),
     [size, icon, children, iconPosition]
   );
-  return /* @__PURE__ */ React13__default.default.createElement(reactNative.Pressable, { disabled, ...pressableProps }, ({ pressed }) => (
+  return /* @__PURE__ */ React13__default.default.createElement(reactNative.Pressable, { disabled, ...pressableProps }, ({ pressed, hovered }) => (
     // Wrapper handles layout: direction, gap, alignment (padding via style)
     /* @__PURE__ */ React13__default.default.createElement(
       Wrapper,
@@ -1040,7 +1152,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
@@ -1258,8 +1370,7 @@ function toElevationLevel(frameElevation) {
 }
 function Frame({
   children,
-  // Theme & elevation
-  theme,
+  // Elevation
   elevation,
   // Layout
   layout,
@@ -1298,25 +1409,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 = React13.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 = React13.useMemo(
     () => getFrameStyles({
       tokens,
@@ -1366,8 +1474,8 @@ function Frame({
     ]
   );
   const contextValue = React13.useMemo(
-    () => ({ theme: resolvedTheme, elevation: resolvedElevation }),
-    [resolvedTheme, resolvedElevation]
+    () => ({ elevation: resolvedElevation, tokens }),
+    [resolvedElevation, tokens]
   );
   const webOverrides = [];
   if (styles.gridWebStyle) {
@@ -1382,7 +1490,7 @@ function Frame({
   const focusRingStyle = isFocusVisible && !disabled ? {
     outlineWidth: 2,
     outlineStyle: "solid",
-    outlineColor: newtone.srgbToHex(tokens.interactive.srgb),
+    outlineColor: newtone.srgbToHex(tokens.accent.fill.srgb),
     outlineOffset: 2
   } : void 0;
   const webFocusProps = isInteractive ? focusProps : {};
@@ -1837,7 +1945,7 @@ function SelectOptionRow({
           },
           isSelected && {
             fontWeight: tokens.typography.weight.semibold,
-            color: newtone.srgbToHex(tokens.interactive.srgb)
+            color: newtone.srgbToHex(tokens.accent.fill.srgb)
           },
           option.disabled && {
             color: newtone.srgbToHex(tokens.textSecondary.srgb)
@@ -1852,7 +1960,7 @@ function SelectOptionRow({
       {
         name: "check",
         size: fontSize,
-        color: newtone.srgbToHex(tokens.interactive.srgb)
+        color: newtone.srgbToHex(tokens.accent.fill.srgb)
       }
     ))
   );
@@ -1995,7 +2103,7 @@ function getToggleStyles(tokens, value, disabled) {
       width: TRACK_WIDTH,
       height: TRACK_HEIGHT,
       borderRadius: TRACK_HEIGHT / 2,
-      backgroundColor: value ? newtone.srgbToHex(tokens.interactive.srgb) : newtone.srgbToHex(tokens.border.srgb),
+      backgroundColor: value ? newtone.srgbToHex(tokens.accent.fill.srgb) : newtone.srgbToHex(tokens.border.srgb),
       justifyContent: "center",
       paddingHorizontal: THUMB_OFFSET
     },
@@ -2095,14 +2203,14 @@ function getSliderStyles(tokens, disabled) {
       left: 0,
       height: TRACK_HEIGHT2,
       borderRadius: TRACK_HEIGHT2 / 2,
-      backgroundColor: newtone.srgbToHex(tokens.interactive.srgb)
+      backgroundColor: newtone.srgbToHex(tokens.accent.fill.srgb)
     },
     thumb: {
       position: "absolute",
       width: THUMB_SIZE2,
       height: THUMB_SIZE2,
       borderRadius: THUMB_SIZE2 / 2,
-      backgroundColor: newtone.srgbToHex(tokens.interactive.srgb)
+      backgroundColor: newtone.srgbToHex(tokens.accent.fill.srgb)
     }
   });
 }
@@ -2477,7 +2585,7 @@ function getColorScaleSliderStyles(tokens, disabled) {
       fontFamily: tokens.typography.fonts.default,
       fontSize: tokens.typography.size.xs,
       fontWeight: tokens.typography.weight.medium,
-      color: newtone.srgbToHex(tokens.error.srgb)
+      color: newtone.srgbToHex(tokens.error.fill.srgb)
     }
   });
 }
@@ -2726,13 +2834,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: [
       {
@@ -2742,11 +2854,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",
@@ -3109,7 +3233,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: [
@@ -3147,7 +3271,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"
       },
@@ -3472,6 +3601,7 @@ var SYSTEM_FONTS = [
   }
 ];
 
+exports.ACCENT_DEFAULTS = ACCENT_DEFAULTS;
 exports.AppShell = AppShell;
 exports.Button = Button;
 exports.CATEGORIES = CATEGORIES;
@@ -3479,13 +3609,16 @@ exports.COMPONENTS = COMPONENTS;
 exports.Card = Card;
 exports.ColorScaleSlider = ColorScaleSlider;
 exports.DEFAULT_THEME_CONFIG = DEFAULT_THEME_CONFIG;
+exports.ERROR_DEFAULTS = ERROR_DEFAULTS;
 exports.Frame = Frame;
 exports.GOOGLE_FONTS = GOOGLE_FONTS;
 exports.HueSlider = HueSlider;
 exports.Icon = Icon;
+exports.NEUTRAL_DEFAULTS = NEUTRAL_DEFAULTS;
 exports.Navbar = Navbar;
 exports.NewtoneProvider = NewtoneProvider;
 exports.Popover = Popover;
+exports.SUCCESS_DEFAULTS = SUCCESS_DEFAULTS;
 exports.SYSTEM_FONTS = SYSTEM_FONTS;
 exports.Select = Select;
 exports.Sidebar = Sidebar;
@@ -3493,6 +3626,7 @@ exports.Slider = Slider;
 exports.Text = Text2;
 exports.TextInput = TextInput;
 exports.Toggle = Toggle;
+exports.WARNING_DEFAULTS = WARNING_DEFAULTS;
 exports.Wrapper = Wrapper;
 exports.buildGoogleFontsUrl = buildGoogleFontsUrl;
 exports.computeTokens = computeTokens;