@newtonedev/components 0.1.5 → 0.1.7

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/Icon/Icon.tsx

@@ -23,9 +23,7 @@ export function Icon({
   opticalSize,
   fill = 0,
   color,
-  elevation = 1,
   style,
-  onPress,
   // Accessibility
   accessibilityLabel,
   // Testing & platform
@@ -33,8 +31,8 @@ export function Icon({
   nativeID,
   ref,
 }: IconProps) {
-  // Get the current theme's design tokens for colors, typography, and icon settings.
-  const tokens = useTokens(elevation);
+  // Inherit tokens from nearest parent Frame via FrameContext.
+  const tokens = useTokens();
 
   // Build the icon's style from the theme tokens and props.
   // Wrapped in useMemo so it only recalculates when the inputs change,
@@ -69,7 +67,8 @@ export function Icon({
     //   wght: font weight (thinner or bolder strokes)
     //   GRAD: grade (fine-tune weight without changing overall size)
     //   opsz: optical size (adjusts detail level for the display size)
-    const fontVariationSettings = `'FILL' ${fill}, 'wght' ${tokens.icons.weight}, 'GRAD' ${tokens.icons.grade}, 'opsz' ${opsz}`;
+    const fillValue = typeof fill === 'boolean' ? (fill ? 1 : 0) : fill;
+    const fontVariationSettings = `'FILL' ${fillValue}, 'wght' ${tokens.icons.weight}, 'GRAD' ${tokens.icons.grade}, 'opsz' ${opsz}`;
 
     return {
       fontFamily,
@@ -96,7 +95,6 @@ export function Icon({
       // so assistive technology doesn't try to read the ligature text (e.g. "home").
       importantForAccessibility={accessibilityLabel ? 'yes' : 'no-hide-descendants'}
       style={iconStyle}
-      onPress={onPress} // When provided, makes the icon tappable
     >
       {name}
     </Text>

package/src/primitives/Icon/Icon.types.ts

@@ -1,18 +1,17 @@
 import type { Text as RNText, TextStyle } from 'react-native';
-import type { ElevationLevel } from '../../theme/types';
 
 /**
  * Props for Icon — Material Symbols icon with variable font support.
  *
- * Uses the icon variant, weight, and grade from the theme config.
- * Per-instance control over size, fill, and color.
+ * Icon is a pure presentation primitive. It inherits elevation from the
+ * nearest parent Frame via FrameContext. For interactive icons, wrap in
+ * `<Button icon="..." />` instead.
  *
  * @example
  * ```tsx
  * <Icon name="home" />
  * <Icon name="settings" size={24} fill={1} />
  * <Icon name="check" color="#00ff00" />
- * <Icon name="delete" size={20} onPress={() => handleDelete()} />
  * ```
  *
  * @see {@link https://fonts.google.com/icons Material Symbols icon reference}
@@ -35,23 +34,17 @@ export interface IconProps {
   /**
    * Fill state for the icon.
    *
-   * - `0` — Outlined (default)
-   * - `1` — Filled (solid)
+   * - `false` / `0` — Outlined (default)
+   * - `true` / `1` — Filled (solid)
    */
-  readonly fill?: 0 | 1;
+  readonly fill?: boolean | 0 | 1;
 
   /** Icon color as hex string. @default tokens.textPrimary */
   readonly color?: string;
 
-  /** Elevation level for token computation. @default 1 */
-  readonly elevation?: ElevationLevel;
-
-  /** Additional styles applied to the icon Text element. */
+  /** Additional styles applied to the icon Text element (positioning, transforms). */
   readonly style?: TextStyle;
 
-  /** Press handler — makes the icon tappable. */
-  readonly onPress?: () => void;
-
   // ── Accessibility ──
 
   /** Label read by screen readers. When omitted, the icon is treated as decorative (hidden from assistive technology). */

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>
  * ```
  *

package/src/registry/icons.ts

@@ -0,0 +1,111 @@
+export interface IconCatalogCategory {
+  readonly id: string;
+  readonly label: string;
+  readonly icons: readonly string[];
+}
+
+export const ICON_CATALOG: readonly IconCatalogCategory[] = [
+  {
+    id: 'navigation',
+    label: 'Navigation',
+    icons: [
+      'home', 'menu', 'close', 'arrow_back', 'arrow_forward',
+      'arrow_upward', 'arrow_downward', 'chevron_left', 'chevron_right',
+      'expand_more', 'expand_less', 'first_page', 'last_page',
+      'more_vert', 'more_horiz', 'unfold_more', 'unfold_less',
+      'subdirectory_arrow_right',
+    ],
+  },
+  {
+    id: 'actions',
+    label: 'Actions',
+    icons: [
+      'search', 'settings', 'done', 'add', 'remove',
+      'delete', 'edit', 'save', 'refresh', 'undo',
+      'redo', 'download', 'upload', 'share', 'print',
+      'content_copy', 'content_paste', 'open_in_new', 'launch',
+      'drag_indicator', 'tune', 'sort', 'filter_list',
+    ],
+  },
+  {
+    id: 'communication',
+    label: 'Communication',
+    icons: [
+      'mail', 'chat', 'call', 'notifications', 'forum',
+      'send', 'inbox', 'drafts', 'mark_email_read',
+      'contact_mail', 'alternate_email', 'comment',
+      'chat_bubble', 'sms', 'voicemail',
+    ],
+  },
+  {
+    id: 'content',
+    label: 'Content',
+    icons: [
+      'add_circle', 'remove_circle', 'check_circle', 'cancel',
+      'flag', 'bookmark', 'star', 'favorite',
+      'thumb_up', 'thumb_down', 'push_pin', 'link',
+      'link_off', 'bolt', 'label', 'inventory_2',
+      'visibility', 'visibility_off',
+    ],
+  },
+  {
+    id: 'media',
+    label: 'Media',
+    icons: [
+      'play_arrow', 'pause', 'stop', 'skip_next', 'skip_previous',
+      'fast_forward', 'fast_rewind', 'replay', 'shuffle',
+      'repeat', 'volume_up', 'volume_off', 'music_note',
+      'image', 'photo_camera', 'videocam', 'mic',
+    ],
+  },
+  {
+    id: 'file',
+    label: 'File & Folder',
+    icons: [
+      'folder', 'folder_open', 'create_new_folder', 'description',
+      'file_copy', 'attach_file', 'cloud', 'cloud_upload',
+      'cloud_download', 'cloud_off', 'storage', 'snippet_folder',
+    ],
+  },
+  {
+    id: 'social',
+    label: 'Social & People',
+    icons: [
+      'person', 'group', 'person_add', 'person_remove',
+      'people', 'face', 'sentiment_satisfied', 'sentiment_dissatisfied',
+      'public', 'workspace_premium', 'emoji_events', 'military_tech',
+    ],
+  },
+  {
+    id: 'alerts',
+    label: 'Alerts & Status',
+    icons: [
+      'error', 'warning', 'info', 'help',
+      'check_circle', 'report', 'new_releases',
+      'notification_important', 'priority_high',
+      'verified', 'shield', 'security',
+      'lock', 'lock_open',
+    ],
+  },
+  {
+    id: 'device',
+    label: 'Device & Hardware',
+    icons: [
+      'phone_android', 'computer', 'tablet_mac', 'watch',
+      'keyboard', 'mouse', 'headphones', 'speaker',
+      'monitor', 'devices', 'memory', 'battery_full',
+      'wifi', 'bluetooth', 'usb', 'dark_mode', 'light_mode',
+    ],
+  },
+  {
+    id: 'editor',
+    label: 'Editor & Formatting',
+    icons: [
+      'format_bold', 'format_italic', 'format_underlined',
+      'format_list_bulleted', 'format_list_numbered', 'format_quote',
+      'format_align_left', 'format_align_center', 'format_align_right',
+      'title', 'text_fields', 'code', 'palette',
+      'color_lens', 'brush', 'auto_fix_high',
+    ],
+  },
+];

package/src/registry/index.ts

@@ -15,3 +15,6 @@ export {
 } from './registry';
 
 export { generateComponentCode } from './codegen';
+
+export type { IconCatalogCategory } from './icons';
+export { ICON_CATALOG } from './icons';

package/src/registry/registry.ts

@@ -20,13 +20,17 @@ export const COMPONENTS: readonly ComponentMeta[] = [
     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: [
       {
@@ -36,11 +40,23 @@ export const COMPONENTS: readonly ComponentMeta[] = [
         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',
@@ -403,7 +419,7 @@ export const COMPONENTS: readonly ComponentMeta[] = [
       { 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: [
@@ -441,7 +457,12 @@ export const COMPONENTS: readonly ComponentMeta[] = [
         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',
       },
@@ -463,40 +484,35 @@ export const COMPONENTS: readonly ComponentMeta[] = [
     name: 'Icon',
     importName: 'Icon',
     categoryId: 'primitives',
-    description: 'Material Symbols icon with size, fill, and color',
+    description: 'Material Symbols icon with size and fill',
     hasChildren: false,
     variants: [
-      { id: 'home', label: 'Home', props: { name: 'home' } },
-      { id: 'settings', label: 'Settings', props: { name: 'settings' } },
-      { id: 'check', label: 'Check', props: { name: 'check' } },
-      { id: 'add', label: 'Add', props: { name: 'add' } },
-      { id: 'delete', label: 'Delete', props: { name: 'delete' } },
-      { id: 'search', label: 'Search', props: { name: 'search' } },
-      { id: 'filled', label: 'Filled Icon', props: { name: 'favorite', fill: 1 } },
-      { id: 'large', label: 'Large Icon', props: { name: 'star', size: 32 } },
+      { id: 'default', label: 'Default', props: { name: 'add' } },
     ],
     editableProps: [
       {
         name: 'name',
         label: 'Icon Name',
         control: 'text',
-        defaultValue: 'home',
+        defaultValue: 'add',
       },
       {
         name: 'size',
         label: 'Size',
-        control: 'number',
+        control: 'discrete-slider',
+        options: [
+          { label: '20', value: 20 },
+          { label: '24', value: 24 },
+          { label: '40', value: 40 },
+          { label: '48', value: 48 },
+        ],
         defaultValue: 24,
       },
       {
         name: 'fill',
         label: 'Fill',
-        control: 'select',
-        options: [
-          { label: 'Outlined', value: 0 },
-          { label: 'Filled', value: 1 },
-        ],
-        defaultValue: 0,
+        control: 'toggle',
+        defaultValue: false,
       },
     ],
   },

package/src/registry/types.ts

@@ -18,7 +18,7 @@ export interface EditablePropOption {
 export interface EditableProp {
   readonly name: string;
   readonly label: string;
-  readonly control: 'select' | 'text' | 'toggle' | 'number';
+  readonly control: 'select' | 'text' | 'toggle' | 'number' | 'discrete-slider';
   readonly options?: readonly EditablePropOption[];
   readonly defaultValue: string | number | boolean;
 }

package/src/theme/FrameContext.tsx

@@ -1,19 +1,21 @@
 import { createContext, useContext } from 'react';
-import type { ThemeName, ElevationLevel } from './types';
+import type { ElevationLevel } from './types';
+import type { ResolvedTokens } from '../tokens/types';
 
 /**
  * Context value provided by Frame to its descendants.
- * Contains the resolved theme and elevation that children should use.
+ * Contains the resolved elevation and pre-computed tokens.
+ * Tokens are included to avoid redundant computeTokens calls in child components.
  */
 export interface FrameContextValue {
-  readonly theme: ThemeName;
   readonly elevation: ElevationLevel;
+  readonly tokens: ResolvedTokens;
 }
 
 /**
- * FrameContext - Propagates theme and elevation overrides from Frame to descendants.
+ * FrameContext - Propagates elevation overrides from Frame to descendants.
  *
- * When null, components fall back to NewtoneProvider's theme and default elevation (1).
+ * When null, components fall back to default elevation (1).
  * When present, useTokens() reads from this context instead.
  */
 export const FrameContext = createContext<FrameContextValue | null>(null);

package/src/theme/NewtoneProvider.tsx

@@ -1,5 +1,5 @@
 import React, { createContext, useState, useMemo, useContext } from 'react';
-import type { NewtoneThemeConfig, NewtoneThemeContext, ColorMode, ThemeName } from './types';
+import type { NewtoneThemeConfig, NewtoneThemeContext, ColorMode } from './types';
 import { DEFAULT_THEME_CONFIG } from './defaults';
 import { GoogleFontLoader } from '../fonts/GoogleFontLoader';
 import { IconFontLoader } from '../fonts/IconFontLoader';
@@ -9,18 +9,17 @@ const ThemeContext = createContext<NewtoneThemeContext | null>(null);
 export interface NewtoneProviderProps {
   readonly config?: NewtoneThemeConfig;
   readonly initialMode?: ColorMode;
-  readonly initialTheme?: ThemeName;
   readonly children: React.ReactNode;
 }
 
 /**
  * NewtoneProvider - Provides theme context to all Newtone components
  *
- * Wrap your app with this provider to enable theme and mode switching.
+ * Wrap your app with this provider to enable mode switching.
  *
  * @example
  * ```tsx
- * <NewtoneProvider initialMode="light" initialTheme="neutral">
+ * <NewtoneProvider initialMode="light">
  *   <App />
  * </NewtoneProvider>
  * ```
@@ -28,21 +27,17 @@ export interface NewtoneProviderProps {
 export function NewtoneProvider({
   config = DEFAULT_THEME_CONFIG,
   initialMode = 'light',
-  initialTheme = 'neutral',
   children,
 }: NewtoneProviderProps) {
   const [mode, setMode] = useState<ColorMode>(initialMode);
-  const [theme, setTheme] = useState<ThemeName>(initialTheme);
 
   const value = useMemo(
     () => ({
       config,
       mode,
-      theme,
       setMode,
-      setTheme,
     }),
-    [config, mode, theme]
+    [config, mode]
   );
 
   return (
@@ -61,7 +56,7 @@ export function NewtoneProvider({
  *
  * @example
  * ```tsx
- * const { mode, theme, setMode, setTheme } = useNewtoneTheme();
+ * const { mode, setMode } = useNewtoneTheme();
  * ```
  */
 export function useNewtoneTheme(): NewtoneThemeContext {

package/src/theme/defaults.ts

@@ -30,15 +30,6 @@ export const DEFAULT_THEME_CONFIG: NewtoneThemeConfig = {
       { hue: DEFAULT_ERROR_HUE, saturation: DEFAULT_ERROR_SATURATION },
     ],
   },
-  themes: {
-    neutral: { paletteIndex: 0, lightModeNv: 0.95, darkModeNv: 0.1 },
-    primary: { paletteIndex: 1, lightModeNv: 0.95, darkModeNv: 0.1 },
-    secondary: { paletteIndex: 1, lightModeNv: 0.85, darkModeNv: 0.15 },
-    strong: { paletteIndex: 0, lightModeNv: 0.1, darkModeNv: 0.95 },
-  },
-  elevation: {
-    offsets: [-0.02, 0, 0.04], // [sunken, default, elevated]
-  },
   spacing: {
     '00': 0,   // base * 0
     '02': 2,   // base * 0.25