@newtonedev/components 0.1.5 → 0.1.6

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.6",
   "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';

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
 

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

@@ -1,5 +1,5 @@
 import type { View, ViewStyle, GestureResponderEvent } from 'react-native';
-import type { ThemeName, FrameElevation } from '../../theme/types';
+import type { FrameElevation } from '../../theme/types';
 
 // ── Spacing Types ──────────────────────────────────────────────
 
@@ -115,14 +115,14 @@ export type Justification = 'start' | 'center' | 'end' | 'between' | 'around' |
  * // Horizontal toolbar with consistent spacing
  * <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>
  * ```
  *
  * @example
  * ```tsx
- * // Elevated card with primary theme
- * <Frame theme="primary" elevation={2} radius="lg" padding="xl" bordered>
+ * // Elevated card
+ * <Frame elevation={2} radius="lg" padding="xl" bordered>
  *   <Text>Elevated card content</Text>
  * </Frame>
  * ```
@@ -142,19 +142,7 @@ export interface FrameProps {
    */
   readonly children: React.ReactNode;
 
-  // ── Theme & Elevation ──
-
-  /**
-   * Theme override for this frame and all descendants.
-   * When omitted, inherits from parent Frame or NewtoneProvider.
-   *
-   * @example
-   * ```tsx
-   * <Frame theme="primary">  // Blue-ish surface
-   * <Frame theme="strong">   // High-contrast surface
-   * ```
-   */
-  readonly theme?: ThemeName;
+  // ── Elevation ──
 
   /**
    * Surface elevation: controls background lightness and shadow.

package/src/primitives/Text/Text.tsx

@@ -3,15 +3,25 @@ import { Text as RNText } from 'react-native';
 import type { TextStyle } from 'react-native';
 import { srgbToHex } from 'newtone';
 import { useTokens } from '../../tokens/useTokens';
+import type { UseTokensResult } from '../../tokens/useTokens';
 import type { TextProps, TextColor } from './Text.types';
 
-// Maps user-friendly color names to the actual token keys in the theme.
-// Example: color="primary" → looks up tokens.textPrimary to get the hex color.
-const COLOR_MAP: Record<TextColor, 'textPrimary' | 'textSecondary' | 'interactive'> = {
-  primary: 'textPrimary',
-  secondary: 'textSecondary',
-  interactive: 'interactive',
-};
+/**
+ * Resolve a semantic text color to a hex string from the current tokens.
+ * Neutral text colors are top-level; palette colors use nested PaletteTokens.fill.
+ */
+function resolveTextColor(color: TextColor, tokens: UseTokensResult): string {
+  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);
+  }
+}
 
 /**
  * Token-aware text primitive.
@@ -61,7 +71,7 @@ export function Text({
       // Font weight is stored as a number (e.g. 400, 600) but React Native expects a string.
       fontWeight: String(tokens.typography.weight[weight]) as TextStyle['fontWeight'],
       // 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,

package/src/primitives/Text/Text.types.ts

@@ -8,7 +8,7 @@ export type TextSize = 'xs' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | 'xxl';
 export type TextWeight = 'regular' | 'medium' | 'semibold' | 'bold';
 
 /** Semantic text color tokens — resolved from the current theme's token palette. */
-export type TextColor = 'primary' | 'secondary' | 'interactive';
+export type TextColor = 'primary' | 'secondary' | 'tertiary' | 'disabled' | 'accent' | 'success' | 'warning' | 'error';
 
 /** Font family tokens — maps to `tokens.typography.fonts.*` font stacks. */
 export type TextFont = 'default' | 'display' | 'mono';
@@ -58,9 +58,14 @@ export interface TextProps {
   /**
    * Semantic color token.
    *
-   * - `'primary'` — Main text color (default)
-   * - `'secondary'` — Subdued/muted text
-   * - `'interactive'` — Accent color for links/actions
+   * - `'primary'` — Main text color, high contrast
+   * - `'secondary'` — Subdued/muted text (captions, labels)
+   * - `'tertiary'` — Hints, placeholders
+   * - `'disabled'` — Disabled text elements
+   * - `'accent'` — Accent palette color for links/actions
+   * - `'success'` — Success palette color for positive indicators
+   * - `'warning'` — Warning palette color for caution indicators
+   * - `'error'` — Error palette color for destructive/error indicators
    *
    * @default 'primary'
    */

package/src/primitives/Wrapper/Wrapper.tsx

@@ -18,7 +18,7 @@ import { useTokens } from '../../tokens/useTokens';
  * ```tsx
  * <Wrapper direction="horizontal" gap="md" align="center">
  *   <Button onPress={() => {}}>Save</Button>
- *   <Button variant="ghost" onPress={() => {}}>Cancel</Button>
+ *   <Button variant="tertiary" onPress={() => {}}>Cancel</Button>
  * </Wrapper>
  * ```
  *

package/src/primitives/Wrapper/Wrapper.types.ts

@@ -23,7 +23,7 @@ import type {
  * // Horizontal row with spacing
  * <Wrapper direction="horizontal" gap="md" align="center">
  *   <Button onPress={() => {}}>Save</Button>
- *   <Button variant="ghost" onPress={() => {}}>Cancel</Button>
+ *   <Button variant="tertiary" onPress={() => {}}>Cancel</Button>
  * </Wrapper>
  * ```
  *