@newtonedev/components 0.1.13 → 0.1.15

package/src/composites/branding/LogoWordmark/LogoWordmark.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import type { LogoWordmarkProps } from './LogoWordmark.types';
+
+/**
+ * Newtone wordmark — the full "NEWTONE" text rendered as an SVG.
+ *
+ * Fixed height of 32px with proportional width derived from the viewBox.
+ */
+export function LogoWordmark({ fill = 'black' }: LogoWordmarkProps) {
+  return (
+    <svg
+      height={32}
+      viewBox="0 0 504 168"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M8 126H22V42H14.4C12.1598 42 11.0397 42 10.184 42.436C9.43139 42.8195 8.81947 43.4314 8.43597 44.184C8 45.0397 8 46.1598 8 48.4V126Z" fill={fill} />
+      <path d="M76 108.5V42H90V119.6C90 121.84 90 122.96 89.564 123.816C89.1805 124.569 88.5686 125.181 87.816 125.564C86.9603 126 85.8402 126 83.6 126H77.4281C74.7227 126 73.37 126 72.1603 125.605C71.0899 125.256 70.1054 124.684 69.271 123.928C68.328 123.074 67.6569 121.9 66.3146 119.551L22 42H30.5719C33.2773 42 34.63 42 35.8397 42.3949C36.9101 42.7442 37.8946 43.3156 38.729 44.0716C39.672 44.926 40.3431 46.1005 41.6854 48.4494L76 108.5Z" fill={fill} />
+      <path fillRule="evenodd" clipRule="evenodd" d="M152.208 68.2077C153.395 69.3951 153.989 69.9888 154.439 70.6738C154.838 71.2814 155.152 71.9406 155.374 72.6332C155.623 73.4139 155.711 74.2489 155.886 75.9189L156.884 85.3951C157.27 89.0678 157.464 90.9042 156.867 92.3245C156.343 93.5721 155.412 94.6057 154.226 95.2577C152.876 96 151.03 96 147.337 96H112V114H154V126H115.302C113.345 126 112.367 126 111.446 125.779C110.63 125.583 109.849 125.26 109.134 124.821C108.326 124.326 107.635 123.635 106.251 122.251L101.749 117.749C100.365 116.365 99.6736 115.674 99.1789 114.866C98.7402 114.151 98.417 113.37 98.221 112.554C98 111.633 98 110.655 98 108.698V75.3019C98 73.3452 98 72.3668 98.221 71.4461C98.417 70.6299 98.7402 69.8495 99.1789 69.1337C99.6736 68.3264 100.365 67.6346 101.749 66.251L106.251 61.749C107.635 60.3654 108.326 59.6736 109.134 59.1789C109.849 58.7402 110.63 58.417 111.446 58.221C112.367 58 113.345 58 115.302 58H136.698C138.655 58 139.633 58 140.554 58.221C141.37 58.417 142.151 58.7402 142.866 59.1789C143.674 59.6736 144.365 60.3654 145.749 61.749L152.208 68.2077ZM112 70V87.5332L144.492 86.4502L141.895 70H112Z" fill={fill} />
+      <path fillRule="evenodd" clipRule="evenodd" d="M492.208 68.2077C493.395 69.3951 493.989 69.9888 494.439 70.6738C494.838 71.2814 495.152 71.9406 495.374 72.6332C495.623 73.4139 495.711 74.2489 495.886 75.9189L496.884 85.3951C497.27 89.0678 497.464 90.9042 496.867 92.3245C496.343 93.5721 495.412 94.6057 494.226 95.2577C492.876 96 491.03 96 487.337 96H452V114H494V126H455.302C453.345 126 452.367 126 451.446 125.779C450.63 125.583 449.849 125.26 449.134 124.821C448.326 124.326 447.635 123.635 446.251 122.251L441.749 117.749C440.365 116.365 439.674 115.674 439.179 114.866C438.74 114.151 438.417 113.37 438.221 112.554C438 111.633 438 110.655 438 108.698V75.3019C438 73.3452 438 72.3668 438.221 71.4461C438.417 70.6299 438.74 69.8495 439.179 69.1337C439.674 68.3264 440.365 67.6346 441.749 66.251L446.251 61.749C447.635 60.3654 448.326 59.6736 449.134 59.1789C449.849 58.7402 450.63 58.417 451.446 58.221C452.367 58 453.345 58 455.302 58H476.698C478.655 58 479.633 58 480.554 58.221C481.37 58.417 482.151 58.7402 482.866 59.1789C483.674 59.6736 484.365 60.3654 485.749 61.749L492.208 68.2077ZM452 70V87.5332L484.492 86.4502L481.895 70H452Z" fill={fill} />
+      <path d="M168.794 117.797L160 58H174L184 126H178.291C175.35 126 173.88 126 172.695 125.46C171.651 124.984 170.765 124.219 170.142 123.255C169.435 122.161 169.222 120.706 168.794 117.797Z" fill={fill} />
+      <path d="M192.794 66.2033L184 126H187.674C190.626 126 192.102 126 193.29 125.457C194.337 124.979 195.224 124.209 195.846 123.241C196.551 122.141 196.76 120.68 197.177 117.758L204 70L210.823 117.758C211.24 120.68 211.449 122.141 212.154 123.241C212.776 124.209 213.663 124.979 214.71 125.457C215.898 126 217.374 126 220.326 126H224L215.206 66.2033C214.778 63.2936 214.565 61.8387 213.858 60.7448C213.235 59.7808 212.349 59.0155 211.305 58.5398C210.12 58 208.65 58 205.709 58H202.291C199.35 58 197.88 58 196.695 58.5398C195.651 59.0155 194.765 59.7808 194.142 60.7448C193.435 61.8387 193.222 63.2936 192.794 66.2033Z" fill={fill} />
+      <path d="M224 126H229.709C232.65 126 234.12 126 235.305 125.46C236.349 124.984 237.235 124.219 237.858 123.255C238.565 122.161 238.778 120.706 239.206 117.797L246.235 70H298V58H251.302C249.345 58 248.367 58 247.446 58.221C246.63 58.417 245.849 58.7402 245.134 59.1789C244.326 59.6736 243.635 60.3654 242.251 61.749L234.927 69.0727C233.815 70.1845 233.26 70.7405 232.829 71.3785C232.447 71.9446 232.139 72.5573 231.913 73.2016C231.658 73.9277 231.543 74.7056 231.315 76.2613L224 126Z" fill={fill} />
+      <path d="M264.251 122.251L259.749 117.749C258.365 116.365 257.674 115.674 257.179 114.866C256.74 114.151 256.417 113.37 256.221 112.554C256 111.633 256 110.655 256 108.698V69.2L260 42H270V114H298V126H273.302C271.345 126 270.367 126 269.446 125.779C268.63 125.583 267.849 125.26 267.134 124.821C266.326 124.326 265.635 123.635 264.251 122.251Z" fill={fill} />
+      <path fillRule="evenodd" clipRule="evenodd" d="M358.251 66.251C359.635 67.6346 360.326 68.3264 360.821 69.1337C361.26 69.8495 361.583 70.6299 361.779 71.4461C362 72.3668 362 73.3452 362 75.3019V108.698C362 110.655 362 111.633 361.779 112.554C361.583 113.37 361.26 114.151 360.821 114.866C360.326 115.674 359.635 116.365 358.251 117.749L353.749 122.251C352.365 123.635 351.674 124.326 350.866 124.821C350.151 125.26 349.37 125.583 348.554 125.779C347.633 126 346.655 126 344.698 126H319.302C317.345 126 316.367 126 315.446 125.779C314.63 125.583 313.849 125.26 313.134 124.821C312.326 124.326 311.635 123.635 310.251 122.251L305.749 117.749C304.365 116.365 303.674 115.674 303.179 114.866C302.74 114.151 302.417 113.37 302.221 112.554C302 111.633 302 110.655 302 108.698V75.3019C302 73.3452 302 72.3668 302.221 71.4461C302.417 70.6299 302.74 69.8495 303.179 69.1337C303.674 68.3264 304.365 67.6346 305.749 66.251L310.224 61.7757C311.606 60.3937 312.297 59.7027 313.104 59.2083C313.818 58.77 314.598 58.4468 315.413 58.2506C316.333 58.0292 317.31 58.0284 319.264 58.0267L344.692 58.0046C346.651 58.0029 347.63 58.0021 348.552 58.2228C349.369 58.4185 350.151 58.7417 350.867 59.1807C351.676 59.6757 352.368 60.3684 353.754 61.7536L358.251 66.251ZM316 70V114H348V70H316Z" fill={fill} />
+      <path d="M370 64.4V126H384V70H416V126H430V75.3019C430 73.3452 430 72.3668 429.779 71.4461C429.583 70.6299 429.26 69.8495 428.821 69.1337C428.326 68.3264 427.635 67.6346 426.251 66.251L421.749 61.749C420.365 60.3654 419.674 59.6736 418.866 59.1789C418.151 58.7402 417.37 58.417 416.554 58.221C415.633 58 414.655 58 412.698 58H376.4C374.16 58 373.04 58 372.184 58.436C371.431 58.8195 370.819 59.4314 370.436 60.184C370 61.0397 370 62.1598 370 64.4Z" fill={fill} />
+    </svg>
+  );
+}

package/src/composites/branding/LogoWordmark/LogoWordmark.types.ts

@@ -0,0 +1,25 @@
+/**
+ * Props for LogoWordmark — the full "NEWTONE" text logo.
+ *
+ * Renders an SVG wordmark at a fixed 32px height with configurable fill color.
+ *
+ * @example
+ * ```tsx
+ * <LogoWordmark />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <LogoWordmark fill="white" />
+ * ```
+ */
+export interface LogoWordmarkProps {
+  /**
+   * Fill color for the wordmark paths.
+   *
+   * Accepts any valid CSS color string (hex, rgb, named color).
+   *
+   * @default "black"
+   */
+  readonly fill?: string;
+}

package/src/composites/branding/LogoWordmark/index.ts

@@ -0,0 +1,2 @@
+export { LogoWordmark } from './LogoWordmark';
+export type { LogoWordmarkProps } from './LogoWordmark.types';

package/src/composites/display/Chip/Chip.styles.ts

@@ -0,0 +1,189 @@
+import type { UseTokensResult } from 'newtone-api';
+import type { ChipVariant, ChipSemantic, ChipSize } from './Chip.types';
+import type { TextRole } from '../../../primitives/Text';
+
+/**
+ * Configuration returned by getChipConfig
+ */
+export interface ChipConfig {
+  colors: {
+    bg: string;
+    hoveredBg: string;
+    pressedBg: string;
+    textColor: string;
+    iconColor: string;
+    borderWidth: number;
+    borderColor: string;
+  };
+  sizeTokens: {
+    paddingX: number;
+    paddingY: number;
+    gap: number;
+    textRole: TextRole;
+    iconSize: number;
+  };
+}
+
+/**
+ * Map chip semantic to theme name.
+ * 'accent' maps to 'primary'; others map directly.
+ */
+function semanticToTheme(semantic: ChipSemantic): 'primary' | 'success' | 'error' | 'warning' {
+  if (semantic === 'accent') return 'primary';
+  return semantic as 'success' | 'error' | 'warning';
+}
+
+/**
+ * Get size configuration for the chip.
+ */
+function getSizeConfig(size: ChipSize): {
+  paddingX: number;
+  paddingY: number;
+  gap: number;
+  textRole: TextRole;
+  iconSize: number;
+} {
+  if (size === 'sm') {
+    return { paddingX: 10, paddingY: 3, gap: 4, textRole: 'caption', iconSize: 16 };
+  }
+  return { paddingX: 16, paddingY: 8, gap: 6, textRole: 'label', iconSize: 20 };
+}
+
+/**
+ * Get variant colors for the chip.
+ */
+function getVariantColors(
+  variant: ChipVariant,
+  semantic: ChipSemantic,
+  selected: boolean,
+  disabled: boolean,
+  tokens: UseTokensResult
+) {
+  // Selected state overrides to strong appearance
+  if (selected) {
+    if (semantic === 'neutral') {
+      return {
+        bg: tokens.colors.primary.strong.background,
+        hoveredBg: tokens.colors.primary.strong.fontPrimary,
+        pressedBg: tokens.colors.primary.strong.background,
+        textColor: tokens.colors.primary.strong.fontPrimary,
+        iconColor: tokens.colors.primary.strong.fontPrimary,
+        borderWidth: 1,
+        borderColor: 'transparent',
+      };
+    }
+    const t = tokens.colors[semanticToTheme(semantic)];
+    return {
+      bg: t.emphasis.background,
+      hoveredBg: t.emphasis.fontPrimary,
+      pressedBg: t.emphasis.background,
+      textColor: t.main.background,
+      iconColor: t.main.background,
+      borderWidth: 1,
+      borderColor: 'transparent',
+    };
+  }
+
+  // Disabled state
+  if (disabled) {
+    return {
+      bg: 'transparent',
+      hoveredBg: 'transparent',
+      pressedBg: 'transparent',
+      textColor: tokens.colors.primary.main.fontTertiary,
+      iconColor: tokens.colors.primary.main.fontTertiary,
+      borderWidth: 1,
+      borderColor: tokens.colors.primary.main.divider,
+    };
+  }
+
+  // Filled variant
+  if (variant === 'filled') {
+    if (semantic === 'neutral') {
+      return {
+        bg: tokens.colors.primary.main.fontPrimary,
+        hoveredBg: tokens.colors.primary.main.fontSecondary,
+        pressedBg: tokens.colors.primary.main.fontPrimary,
+        textColor: tokens.colors.primary.main.divider,
+        iconColor: tokens.colors.primary.main.divider,
+        borderWidth: 1,
+        borderColor: 'transparent',
+      };
+    }
+    const t = tokens.colors[semanticToTheme(semantic)];
+    return {
+      bg: t.emphasis.background,
+      hoveredBg: t.emphasis.fontPrimary,
+      pressedBg: t.emphasis.fontSecondary,
+      textColor: t.main.background,
+      iconColor: t.main.background,
+      borderWidth: 1,
+      borderColor: 'transparent',
+    };
+  }
+
+  // Tinted variant
+  if (variant === 'tinted') {
+    if (semantic === 'neutral') {
+      return {
+        bg: tokens.colors.primary.tinted.background,
+        hoveredBg: tokens.colors.primary.tinted.fontPrimary,
+        pressedBg: tokens.colors.primary.tinted.fontSecondary,
+        textColor: tokens.colors.primary.main.fontPrimary,
+        iconColor: tokens.colors.primary.main.fontPrimary,
+        borderWidth: 1,
+        borderColor: 'transparent',
+      };
+    }
+    const t = tokens.colors[semanticToTheme(semantic)];
+    return {
+      bg: t.tinted.background,
+      hoveredBg: t.tinted.fontPrimary,
+      pressedBg: t.tinted.fontSecondary,
+      textColor: t.emphasis.divider,
+      iconColor: t.emphasis.divider,
+      borderWidth: 1,
+      borderColor: 'transparent',
+    };
+  }
+
+  // Outlined variant
+  if (semantic === 'neutral') {
+    return {
+      bg: 'transparent',
+      hoveredBg: tokens.colors.primary.tinted.background,
+      pressedBg: tokens.colors.primary.tinted.fontPrimary,
+      textColor: tokens.colors.primary.main.fontPrimary,
+      iconColor: tokens.colors.primary.main.fontPrimary,
+      borderWidth: 1,
+      borderColor: tokens.colors.primary.main.divider,
+    };
+  }
+  const t = tokens.colors[semanticToTheme(semantic)];
+  return {
+    bg: 'transparent',
+    hoveredBg: t.tinted.background,
+    pressedBg: t.tinted.fontPrimary,
+    textColor: t.emphasis.divider,
+    iconColor: t.emphasis.divider,
+    borderWidth: 1,
+    borderColor: t.tinted.fontSecondary,
+  };
+}
+
+/**
+ * Compute chip configuration based on variant, semantic, size, and state.
+ */
+export function getChipConfig(
+  variant: ChipVariant,
+  semantic: ChipSemantic,
+  size: ChipSize,
+  selected: boolean,
+  disabled: boolean,
+  tokens: UseTokensResult
+): ChipConfig {
+  return {
+    colors: getVariantColors(variant, semantic, selected, disabled, tokens),
+    sizeTokens: getSizeConfig(size),
+  };
+}

package/src/composites/display/Chip/Chip.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import { Pressable } from 'react-native';
+import type { ChipProps } from './Chip.types';
+import { getChipConfig } from './Chip.styles';
+import { useTokens } from 'newtone-api';
+import { Icon } from '../../../primitives/Icon/Icon';
+import { Text } from '../../../primitives/Text';
+import { Wrapper } from '../../../primitives/Wrapper/Wrapper';
+
+/**
+ * Chip — A pill-shaped label for tags, filters, badges, and status indicators.
+ *
+ * **Composition Architecture:**
+ * - Pressable (RN primitive) — handles interaction (when onPress is provided)
+ * - Wrapper (primitive) — handles layout (direction, gap, padding, alignment)
+ * - Icon (primitive) — handles optional leading icon
+ * - Text (primitive) — handles typography with theme tokens
+ *
+ * @example
+ * ```tsx
+ * // Static label
+ * <Chip>Design Systems</Chip>
+ *
+ * // Interactive filter chip
+ * <Chip selected={isActive} onPress={() => toggle()}>Color Science</Chip>
+ *
+ * // With icon
+ * <Chip icon="check" semantic="success">Verified</Chip>
+ * ```
+ */
+export function Chip({
+  children,
+  variant = 'tinted',
+  size = 'md',
+  semantic = 'neutral',
+  selected = false,
+  onPress,
+  disabled = false,
+  icon,
+  style,
+}: ChipProps) {
+  const tokens = useTokens();
+
+  const { colors, sizeTokens } = React.useMemo(
+    () => getChipConfig(variant, semantic, size, selected, disabled, tokens),
+    [variant, semantic, size, selected, disabled, tokens]
+  );
+
+  const content = (state?: { pressed: boolean; hovered?: boolean }) => (
+    <Wrapper
+      direction="horizontal"
+      align="center"
+      gap={sizeTokens.gap}
+      style={[
+        {
+          paddingLeft: sizeTokens.paddingX,
+          paddingRight: sizeTokens.paddingX,
+          paddingTop: sizeTokens.paddingY,
+          paddingBottom: sizeTokens.paddingY,
+          backgroundColor: state?.pressed && !disabled
+            ? colors.pressedBg
+            : state?.hovered && !disabled
+              ? colors.hoveredBg
+              : colors.bg,
+          borderRadius: 99,
+          borderWidth: colors.borderWidth,
+          borderColor: colors.borderColor || 'transparent',
+          opacity: disabled ? 0.4 : 1,
+        },
+        ...(Array.isArray(style) ? style : style ? [style] : []),
+      ]}
+    >
+      {icon && (
+        <Icon name={icon} size={sizeTokens.iconSize} color={colors.iconColor} />
+      )}
+      <Text
+        role={sizeTokens.textRole}
+        weight={selected ? 'bold' : 'medium'}
+        style={{ color: colors.textColor }}
+      >
+        {children}
+      </Text>
+    </Wrapper>
+  );
+
+  if (onPress) {
+    return (
+      <Pressable onPress={onPress} disabled={disabled}>
+        {({ pressed, hovered }: { pressed: boolean; hovered?: boolean }) =>
+          content({ pressed, hovered })
+        }
+      </Pressable>
+    );
+  }
+
+  return content();
+}

package/src/composites/display/Chip/Chip.types.ts

@@ -0,0 +1,74 @@
+import type { ViewStyle } from 'react-native';
+
+/**
+ * Visual variant for the Chip component
+ */
+export type ChipVariant = 'filled' | 'tinted' | 'outlined';
+
+/**
+ * Semantic meaning for the Chip component (describes color purpose)
+ */
+export type ChipSemantic = 'neutral' | 'accent' | 'success' | 'error' | 'warning';
+
+/**
+ * Size presets for the Chip component
+ */
+export type ChipSize = 'sm' | 'md';
+
+/**
+ * Props for the Chip component
+ */
+export interface ChipProps {
+  /**
+   * Chip label content.
+   */
+  readonly children: React.ReactNode;
+
+  /**
+   * Visual variant (describes visual treatment)
+   * @default 'tinted'
+   */
+  readonly variant?: ChipVariant;
+
+  /**
+   * Size preset
+   * @default 'md'
+   */
+  readonly size?: ChipSize;
+
+  /**
+   * Semantic meaning (describes color purpose)
+   * @default 'neutral'
+   */
+  readonly semantic?: ChipSemantic;
+
+  /**
+   * Selected state — overrides appearance to "strong" with bold weight.
+   * Useful for filter bars and toggle groups.
+   * @default false
+   */
+  readonly selected?: boolean;
+
+  /**
+   * Press handler — makes the chip interactive.
+   * When provided, the chip renders as a Pressable.
+   */
+  readonly onPress?: () => void;
+
+  /**
+   * Disabled state
+   * @default false
+   */
+  readonly disabled?: boolean;
+
+  /**
+   * Material Symbol icon name (e.g. 'check', 'close').
+   * Renders a leading icon before the label.
+   */
+  readonly icon?: string;
+
+  /**
+   * Custom style overrides for container
+   */
+  readonly style?: ViewStyle | ViewStyle[];
+}

package/src/composites/display/Chip/index.ts

@@ -0,0 +1,2 @@
+export { Chip } from './Chip';
+export type { ChipProps, ChipVariant, ChipSemantic, ChipSize } from './Chip.types';

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

@@ -1,13 +1,15 @@
 import { StyleSheet } from 'react-native';
-import type { ResolvedTokens, ColorGamut } from 'newtone-api';
+import type { ResolvedTokens, AppearanceTokens, ThemeName, AppearanceName } from 'newtone-api';
 
 export function getSelectStyles(
   tokens: ResolvedTokens,
-  gamut: ColorGamut,
   disabled: boolean,
   size: 'sm' | 'md',
-  isOpen: boolean
+  isOpen: boolean,
+  theme: ThemeName = 'primary',
+  appearance: AppearanceName = 'main',
 ) {
+  const at: AppearanceTokens = tokens.colors[theme][appearance];
   const isSm = size === 'sm';
   const fontSize = isSm ? tokens.typography.fontSizes['04'] : tokens.typography.fontSizes['05'];
   const iconSize = fontSize + 2;
@@ -24,14 +26,14 @@ export function getSelectStyles(
       fontFamily: tokens.typography.fonts.main.family,
       fontSize: tokens.typography.fontSizes['04'],
       fontWeight: tokens.typography.fonts.main.weights.medium as any,
-      color: tokens.textSecondary[gamut],
+      color: at.fontTertiary,
     },
     trigger: {
       flexDirection: 'row',
       alignItems: 'center',
-      backgroundColor: tokens.backgroundSunken[gamut],
+      backgroundColor: at.fontSecondary,
       borderWidth: 1,
-      borderColor: tokens.border[gamut],
+      borderColor: at.fontSecondary,
       borderRadius: tokens.radius.md,
       paddingVertical,
       paddingLeft: paddingHorizontal,
@@ -42,9 +44,7 @@ export function getSelectStyles(
       flex: 1,
       fontFamily: tokens.typography.fonts.main.family,
       fontSize,
-      color: disabled
-        ? tokens.textSecondary[gamut]
-        : tokens.textPrimary[gamut],
+      color: disabled ? at.fontTertiary : at.divider,
     },
     iconWrapper: {
       position: 'absolute',
@@ -57,7 +57,7 @@ export function getSelectStyles(
       fontFamily: tokens.typography.fonts.main.family,
       fontSize: tokens.typography.fontSizes['01'],
       fontWeight: tokens.typography.fonts.main.weights.medium as any,
-      color: tokens.textSecondary[gamut],
+      color: at.fontTertiary,
       textTransform: 'uppercase',
       letterSpacing: 0.5,
       paddingVertical: tokens.spacing['04'],

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

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import { View, Text, Pressable, ScrollView } from 'react-native';
 import type { SelectProps, SelectOption } from './Select.types';
 import { isOptionGroup } from './Select.types';
-import { useTokens } from 'newtone-api';
+import { useTokens, useFrameContext } from 'newtone-api';
 import { getSelectStyles } from './Select.styles';
 import { Icon } from '../../../primitives/Icon/Icon';
 import { Popover } from '../../overlays/Popover/Popover';
@@ -35,6 +35,7 @@ export function Select({
   style,
 }: SelectProps) {
   const tokens = useTokens(1);
+  const frameCtx = useFrameContext();
   const { isOpen, open, close, toggle } = usePopover();
 
   const flatOptions = useMemo(() => flattenOptions(options), [options]);
@@ -51,17 +52,19 @@ export function Select({
     onOpen: open,
   });
 
+  const inheritedTheme = frameCtx?.theme;
+  const inheritedAppearance = frameCtx?.appearance;
+
   const styles = useMemo(
-    () => getSelectStyles(tokens, tokens.gamut, disabled, size, isOpen),
-    [tokens, disabled, size, isOpen]
+    () => getSelectStyles(tokens, disabled, size, isOpen, inheritedTheme, inheritedAppearance),
+    [tokens, disabled, size, isOpen, inheritedTheme, inheritedAppearance]
   );
 
   const selectedOption = flatOptions.find((o) => o.value === value);
   const displayLabel = selectedOption?.label ?? placeholder ?? value;
 
-  const iconColor = disabled
-    ? tokens.textSecondary[tokens.gamut]
-    : tokens.textPrimary[tokens.gamut];
+  const at = tokens.colors[inheritedTheme ?? 'primary'][inheritedAppearance ?? 'main'];
+  const iconColor = disabled ? at.fontTertiary : at.divider;
 
   // onKeyDown is a web-only prop supported by react-native-web but not in RN types
   const triggerWebProps = { onKeyDown: handleKeyDown } as any;

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Pressable, Text, View } from 'react-native';
 import type { SelectOption as SelectOptionType, SelectProps } from './Select.types';
-import { useTokens } from 'newtone-api';
+import { useTokens, useFrameContext } from 'newtone-api';
 import { Icon } from '../../../primitives/Icon/Icon';
 
 interface SelectOptionRowProps {
@@ -22,6 +22,9 @@ export function SelectOptionRow({
   size,
 }: SelectOptionRowProps) {
   const tokens = useTokens(1);
+  const frameCtx = useFrameContext();
+  const at = tokens.colors[frameCtx?.theme ?? 'primary'][frameCtx?.appearance ?? 'main'];
+  const emphasisAt = tokens.colors[frameCtx?.theme ?? 'primary'].emphasis;
 
   const paddingVertical = size === 'sm' ? tokens.spacing['04'] : tokens.spacing['08'];
   const paddingHorizontal = size === 'sm' ? tokens.spacing['08'] : tokens.spacing['12'];
@@ -55,11 +58,11 @@ export function SelectOptionRow({
           paddingHorizontal,
         },
         isSelected && {
-          backgroundColor: tokens.backgroundSunken[tokens.gamut],
+          backgroundColor: at.fontSecondary,
         },
         isFocused &&
           !isSelected && {
-            backgroundColor: `${tokens.border[tokens.gamut]}20`,
+            backgroundColor: `${at.fontSecondary}20`,
           },
         option.disabled && {
           opacity: 0.5,
@@ -75,14 +78,14 @@ export function SelectOptionRow({
             flex: 1,
             fontFamily: tokens.typography.fonts.main.family,
             fontSize,
-            color: tokens.textPrimary[tokens.gamut],
+            color: at.divider,
           },
           isSelected && {
             fontWeight: tokens.typography.fonts.main.weights.medium as any,
-            color: tokens.accent.fill[tokens.gamut],
+            color: emphasisAt.divider,
           },
           option.disabled && {
-            color: tokens.textSecondary[tokens.gamut],
+            color: at.fontTertiary,
           },
         ]}
         numberOfLines={1}
@@ -94,7 +97,7 @@ export function SelectOptionRow({
           <Icon
             name="check"
             size={fontSize}
-            color={tokens.accent.fill[tokens.gamut]}
+            color={emphasisAt.divider}
           />
         </View>
       )}

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

@@ -1,7 +1,13 @@
 import { StyleSheet } from 'react-native';
-import type { ResolvedTokens, ColorGamut } from 'newtone-api';
+import type { ResolvedTokens, AppearanceTokens, ThemeName, AppearanceName } from 'newtone-api';
 
-export function getTextInputStyles(tokens: ResolvedTokens, gamut: ColorGamut, disabled: boolean) {
+export function getTextInputStyles(
+  tokens: ResolvedTokens,
+  disabled: boolean,
+  theme: ThemeName = 'primary',
+  appearance: AppearanceName = 'main',
+) {
+  const at: AppearanceTokens = tokens.colors[theme][appearance];
   return StyleSheet.create({
     container: {
       gap: tokens.spacing['04'],
@@ -10,20 +16,18 @@ export function getTextInputStyles(tokens: ResolvedTokens, gamut: ColorGamut, di
       fontFamily: tokens.typography.fonts.main.family,
       fontSize: tokens.typography.fontSizes['04'],
       fontWeight: tokens.typography.fonts.main.weights.medium as any,
-      color: tokens.textSecondary[gamut],
+      color: at.fontTertiary,
     },
     input: {
       fontFamily: tokens.typography.fonts.main.family,
-      backgroundColor: tokens.backgroundSunken[gamut],
+      backgroundColor: at.fontSecondary,
       borderWidth: 1,
-      borderColor: tokens.border[gamut],
+      borderColor: at.fontSecondary,
       borderRadius: tokens.radius.md,
       paddingVertical: tokens.spacing['08'],
       paddingHorizontal: tokens.spacing['12'],
       fontSize: tokens.typography.fontSizes['05'],
-      color: disabled
-        ? tokens.textSecondary[gamut]
-        : tokens.textPrimary[gamut],
+      color: disabled ? at.fontTertiary : at.divider,
       opacity: disabled ? 0.5 : 1,
     },
   });

package/src/composites/form-controls/TextInput/TextInput.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View, Text, TextInput as RNTextInput } from 'react-native';
 import type { TextInputProps } from './TextInput.types';
-import { useTokens } from 'newtone-api';
+import { useTokens, useFrameContext } from 'newtone-api';
 import { getTextInputStyles } from './TextInput.styles';
 
 export function TextInput({
@@ -11,10 +11,13 @@ export function TextInput({
   ...textInputProps
 }: TextInputProps) {
   const tokens = useTokens(1);
+  const frameCtx = useFrameContext();
+  const theme = frameCtx?.theme ?? 'primary';
+  const appearance = frameCtx?.appearance ?? 'main';
 
   const styles = React.useMemo(
-    () => getTextInputStyles(tokens, tokens.gamut, disabled),
-    [tokens, disabled]
+    () => getTextInputStyles(tokens, disabled, theme, appearance),
+    [tokens, disabled, theme, appearance]
   );
 
   return (
@@ -23,7 +26,7 @@ export function TextInput({
       <RNTextInput
         style={styles.input}
         editable={!disabled}
-        placeholderTextColor={tokens.textSecondary[tokens.gamut]}
+        placeholderTextColor={tokens.colors[theme][appearance].fontTertiary}
         {...textInputProps}
       />
     </View>