@newtonedev/components 0.1.12 → 0.1.13

package/src/tokens/computeTokens.ts

@@ -1,516 +0,0 @@
-import { getColor } from 'newtone';
-import type { PaletteConfig } from 'newtone';
-import { fontConfigToFamily } from '@newtonedev/fonts';
-import type { ColorSystemConfig, ColorMode, ElevationLevel, FontSlot, TokenOverrides } from '../theme/types';
-import type { ResolvedTokens, PaletteTokens } from './types';
-
-/**
- * Per-mode fallback defaults shape shared by all palette defaults.
- */
-export type PaletteDefaults = {
-  readonly light: {
-    readonly background: { readonly elevated: number; readonly ground: number; readonly sunken: number };
-    readonly text: { readonly primary: number; readonly secondary: number; readonly tertiary: number; readonly disabled: number };
-    readonly action: { readonly enabled: number; readonly hovered: number; readonly pressed: number };
-    readonly border: { readonly enabled: number; readonly focused: number; readonly filled: number };
-  };
-  readonly dark: {
-    readonly background: { readonly elevated: number; readonly ground: number; readonly sunken: number };
-    readonly text: { readonly primary: number; readonly secondary: number; readonly tertiary: number; readonly disabled: number };
-    readonly action: { readonly enabled: number; readonly hovered: number; readonly pressed: number };
-    readonly border: { readonly enabled: number; readonly focused: number; readonly filled: number };
-  };
-};
-
-/**
- * Per-mode fallback defaults for the neutral palette (normalized scale).
- * Single source of truth — consumed by computeTokens and the admin Token Tuner.
- *
- * Light: 0 = lightest, 1 = darkest. Dark: 0 = darkest, 1 = lightest.
- * Structured by token group so all per-palette defaults follow the same shape.
- */
-export const NEUTRAL_DEFAULTS: PaletteDefaults = {
-  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.20, sunken: 0.16 },
-    text: { primary: 1.0, 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 },
-  },
-};
-
-/**
- * Accent palette defaults. Initial values match neutral — will be tuned per-palette later.
- */
-export const ACCENT_DEFAULTS: PaletteDefaults = {
-  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.20, sunken: 0.16 },
-    text: { primary: 1.0, 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 },
-  },
-};
-
-/**
- * Success palette defaults. Initial values match neutral — will be tuned per-palette later.
- */
-export const SUCCESS_DEFAULTS: PaletteDefaults = {
-  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.20, sunken: 0.16 },
-    text: { primary: 1.0, 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 },
-  },
-};
-
-/**
- * Warning palette defaults. Initial values match neutral — will be tuned per-palette later.
- */
-export const WARNING_DEFAULTS: PaletteDefaults = {
-  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.20, sunken: 0.16 },
-    text: { primary: 1.0, 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 },
-  },
-};
-
-/**
- * Error palette defaults. Initial values match neutral — will be tuned per-palette later.
- */
-export const ERROR_DEFAULTS: PaletteDefaults = {
-  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.20, sunken: 0.16 },
-    text: { primary: 1.0, 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 },
-  },
-};
-
-const clamp = (n: number) => Math.max(0, Math.min(1, n));
-
-/**
- * Compute the complete PaletteTokens for a non-neutral palette.
- *
- * Uses the palette's hue/saturation with positions from the palette's defaults,
- * plus fill tokens at the palette's key NV position.
- *
- * @param palette - The palette config (hue, saturation, key NV, etc.)
- * @param defaults - Per-mode defaults for this palette (positions + offsets)
- * @param mode - Current color mode
- * @param elevation - Current elevation level
- * @param dynamicRange - Global dynamic range
- * @param elevationDelta - Compensation delta (current surface vs elevated reference)
- * @param effectiveTextMode - Derived from actual background lightness
- * @param autoAccentNv - Auto-derived key NV fallback
- * @param neutralTextPrimary - Neutral textPrimary for onFill (dark text on light fills)
- * @param neutralBgElevated - Neutral backgroundElevated for onFill (light text on dark fills)
- */
-function computePaletteTokens(
-  palette: PaletteConfig,
-  defaults: PaletteDefaults,
-  mode: ColorMode,
-  elevation: ElevationLevel,
-  dynamicRange: { readonly lightest: number; readonly darkest: number },
-  elevationDelta: number,
-  effectiveTextMode: ColorMode,
-  autoAccentNv: number,
-  neutralTextPrimary: ReturnType<typeof getColor>,
-  neutralBgElevated: ReturnType<typeof getColor>,
-): PaletteTokens {
-  const modeDefaults = defaults[mode];
-  const toEngineNv = (nv: number) => mode === 'light' ? 1 - nv : nv;
-  const textToEngineNv = (nv: number) => effectiveTextMode === 'light' ? 1 - nv : nv;
-
-  const colorAt = (engineNv: number) => getColor(
-    palette.hue, palette.saturation, dynamicRange,
-    clamp(engineNv), palette.desaturation, palette.paletteHueGrading
-  );
-
-  // --- Fill: key color (user-chosen or auto-derived), elevation-compensated ---
-  const resolveKeyNv = (p: PaletteConfig): number | undefined =>
-    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));
-
-  // onFill: high-contrast text on the fill color
-  const onFill = fill.oklch.L > 0.6 ? neutralTextPrimary : neutralBgElevated;
-
-  // --- Surface: palette-tinted backgrounds at standard positions ---
-  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)));
-
-  // --- Interactive surface: offset from palette background ---
-  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)));
-
-  // --- Text: palette-hued text at standard positions, elevation-compensated ---
-  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));
-
-  // --- Border: offset from palette background ---
-  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,
-  };
-}
-
-/**
- * Compute design tokens for a specific mode/theme/elevation combination.
- *
- * This function calls the Newtone engine to generate all necessary color tokens
- * based on the current theme context. All colors are computed on-demand using
- * the pure functions from the engine.
- *
- * Background surfaces use absolute positions from NEUTRAL_DEFAULTS (or tokenOverrides
- * when present). Elevation compensation is derived from the difference between
- * the current surface and the elevated reference surface.
- *
- * @param config - Complete color system configuration (dynamic range + palettes)
- * @param mode - Current color mode ('light' or 'dark')
- * @param elevation - Elevation level (0=sunken, 1=default, 2=elevated)
- * @param spacing - Spacing scale for paddings, gaps, and margins
- * @param radius - Border radius scale for component roundness
- * @param typography - Typography configuration with fonts and scales
- * @param icons - Icon configuration with variant, weight, and auto-grade setting
- * @returns Resolved design tokens with all necessary colors
- *
- * @example
- * ```typescript
- * const tokens = computeTokens(
- *   config.colorSystem,
- *   'light',
- *   1,
- *   config.spacing,
- *   config.radius,
- *   config.typography,
- *   config.icons
- * );
- * console.log(tokens.background.srgb); // { r: 0.95, g: 0.95, b: 0.95 }
- * ```
- */
-export function computeTokens(
-  config: ColorSystemConfig,
-  mode: ColorMode,
-  elevation: ElevationLevel,
-  spacing: { readonly '00': number; readonly '02': number; readonly '04': number; readonly '06': number; readonly '08': number; readonly '10': number; readonly '12': number; readonly '16': number; readonly '20': number; readonly '24': number; readonly '32': number; readonly '40': number; readonly '48': number },
-  radius: { readonly none: number; readonly sm: number; readonly md: number; readonly lg: number; readonly xl: number; readonly pill: 999 },
-  typography: {
-    readonly fonts: { readonly main: FontSlot; readonly display: FontSlot; readonly mono: FontSlot; readonly currency: FontSlot };
-    readonly fontSizes: { readonly [key: string]: number };
-    readonly lineHeights: { readonly [key: string]: number };
-  },
-  icons: {
-    readonly variant: 'outlined' | 'rounded' | 'sharp';
-    readonly weight: 100 | 200 | 300 | 400 | 500 | 600 | 700;
-    readonly autoGrade: boolean;
-  },
-  tokenOverrides?: TokenOverrides
-): ResolvedTokens {
-  const { dynamicRange, palettes } = config;
-  const palette = palettes[0]; // Always neutral palette for backgrounds
-
-  if (!palette) {
-    throw new Error('Neutral palette (index 0) not found');
-  }
-
-  const neutralDefaults = NEUTRAL_DEFAULTS[mode];
-
-  // --- Mode-specific normalized field resolution ---
-  const toEngineNv = (nv: number) => 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;
-
-  // --- Background NV resolution ---
-  // Absolute positions from tokenOverrides or NEUTRAL_DEFAULTS.
-  // Ground = Background/01 (elevated). Everything diverges from there.
-  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));
-
-  // Elevation compensation: how far the current surface is from the reference (bg01/elevated).
-  // Tokens designed at bg01 shift by this delta on deeper surfaces to preserve perceptual contrast.
-  // Always 0 on bg01. Negative on bg02/bg03 in both modes (surface is darker → tokens darken too).
-  const elevationDelta = backgroundNv - elevatedNv;
-
-  // Derive effective text mode from actual background lightness.
-  // This handles inverted themes (e.g., strong: dark bg in light mode)
-  // where the mode flag doesn't match the background's visual lightness.
-  const effectiveTextMode: ColorMode = backgroundNv >= 0.5 ? 'light' : 'dark';
-
-  // Compute background colors for current elevation
-  const background = getColor(
-    palette.hue,
-    palette.saturation,
-    dynamicRange,
-    backgroundNv,
-    palette.desaturation,
-    palette.paletteHueGrading
-  );
-
-  // Compute elevated surface
-  const backgroundElevated = getColor(
-    palette.hue,
-    palette.saturation,
-    dynamicRange,
-    elevatedNv,
-    palette.desaturation,
-    palette.paletteHueGrading
-  );
-
-  // Compute sunken surface
-  const backgroundSunken = getColor(
-    palette.hue,
-    palette.saturation,
-    dynamicRange,
-    sunkenNv,
-    palette.desaturation,
-    palette.paletteHueGrading
-  );
-
-  // --- Tunable constants (overridable via tokenOverrides, per-mode) ---
-  // All values are magnitudes — direction auto-inverts per effectiveTextMode
-  // (darker in light mode, lighter in dark mode)
-  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);
-  // Compute interactive component background (FIXED NV offset from current elevation)
-  // Unlike backgroundElevated/backgroundSunken which use discrete levels, this uses a fixed
-  // luminosity offset to ensure CONSISTENT visual contrast across all elevations (-2 to 2).
-  // Used by: Button (neutral primary variant) and future components with neutral filled backgrounds.
-  const interactiveComponentNv = clamp(backgroundNv + (effectiveTextMode === 'light' ? -INTERACTIVE_COMPONENT_OFFSET : INTERACTIVE_COMPONENT_OFFSET));
-  const backgroundInteractive = getColor(
-    palette.hue,
-    palette.saturation,
-    dynamicRange,
-    interactiveComponentNv,
-    palette.desaturation,
-    palette.paletteHueGrading
-  );
-
-  // Neutral hover/active: shift from interactive component base (same direction as accent hover/active)
-  const neutralHoverNv = clamp(interactiveComponentNv + (effectiveTextMode === 'light' ? -HOVER_SHIFT : HOVER_SHIFT));
-  const backgroundInteractiveHover = getColor(
-    palette.hue,
-    palette.saturation,
-    dynamicRange,
-    neutralHoverNv,
-    palette.desaturation,
-    palette.paletteHueGrading
-  );
-
-  const neutralActiveNv = clamp(interactiveComponentNv + (effectiveTextMode === 'light' ? -ACTIVE_SHIFT : ACTIVE_SHIFT));
-  const backgroundInteractiveActive = getColor(
-    palette.hue,
-    palette.saturation,
-    dynamicRange,
-    neutralActiveNv,
-    palette.desaturation,
-    palette.paletteHueGrading
-  );
-
-  // --- Text color resolution (elevation-compensated) ---
-  // Normalized positions define text contrast at bg01 (elevated). On deeper surfaces,
-  // elevationDelta shifts text toward the background to preserve the same contrast distance.
-  // Uses effectiveTextMode for NV conversion so inverted themes (e.g., strong: dark bg in
-  // light mode) auto-correct text direction — light text on dark bg, dark text on light bg.
-  const textToEngineNv = (nv: number) => effectiveTextMode === 'light' ? 1 - nv : nv;
-
-  const textPrimary = getColor(palette.hue, palette.saturation, dynamicRange,
-      clamp(textToEngineNv(textPrimaryNorm ?? neutralDefaults.text.primary) + elevationDelta),
-      palette.desaturation, palette.paletteHueGrading);
-
-  const textSecondary = getColor(palette.hue, palette.saturation, dynamicRange,
-      clamp(textToEngineNv(textSecondaryNorm ?? neutralDefaults.text.secondary) + elevationDelta),
-      palette.desaturation, palette.paletteHueGrading);
-
-  const textTertiary = getColor(palette.hue, palette.saturation, dynamicRange,
-      clamp(textToEngineNv(textTertiaryNorm ?? neutralDefaults.text.tertiary) + elevationDelta),
-      palette.desaturation, palette.paletteHueGrading);
-
-  const textDisabled = getColor(palette.hue, palette.saturation, dynamicRange,
-      clamp(textToEngineNv(textDisabledNorm ?? neutralDefaults.text.disabled) + elevationDelta),
-      palette.desaturation, palette.paletteHueGrading);
-
-  // Border: Subtle contrast from background
-  const borderNv = effectiveTextMode === 'light' ? backgroundNv - BORDER_OFFSET : backgroundNv + BORDER_OFFSET;
-  const border = getColor(
-    palette.hue,
-    palette.saturation,
-    dynamicRange,
-    clamp(borderNv),
-    palette.desaturation,
-    palette.paletteHueGrading
-  );
-
-  // --- Per-palette token computation ---
-  // Auto accent NV: derived from text primary position (used when no explicit key color is set)
-  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];
-
-  // Semantic palettes: fall back to accent palette if not present
-  const success = successPalette
-    ? computePaletteTokens(
-        successPalette, SUCCESS_DEFAULTS, mode, elevation, dynamicRange,
-        elevationDelta, effectiveTextMode, autoAccentNv,
-        textPrimary, backgroundElevated,
-      )
-    : accent;
-
-  const warning = warningPalette
-    ? computePaletteTokens(
-        warningPalette, WARNING_DEFAULTS, mode, elevation, dynamicRange,
-        elevationDelta, effectiveTextMode, autoAccentNv,
-        textPrimary, backgroundElevated,
-      )
-    : accent;
-
-  const error = errorPalette
-    ? computePaletteTokens(
-        errorPalette, ERROR_DEFAULTS, mode, elevation, dynamicRange,
-        elevationDelta, effectiveTextMode, autoAccentNv,
-        textPrimary, backgroundElevated,
-      )
-    : accent;
-
-  return {
-    background,
-    backgroundElevated,
-    backgroundSunken,
-    backgroundInteractive,
-    backgroundInteractiveHover,
-    backgroundInteractiveActive,
-    textPrimary,
-    textSecondary,
-    textTertiary,
-    textDisabled,
-    border,
-    accent,
-    success,
-    warning,
-    error,
-    spacing,
-    radius,
-    typography: {
-      fonts: {
-        main: {
-          family: fontConfigToFamily(typography.fonts.main.config),
-          weights: typography.fonts.main.weights,
-        },
-        display: {
-          family: fontConfigToFamily(typography.fonts.display.config),
-          weights: typography.fonts.display.weights,
-        },
-        mono: {
-          family: fontConfigToFamily(typography.fonts.mono.config),
-          weights: typography.fonts.mono.weights,
-        },
-        currency: {
-          family: fontConfigToFamily(typography.fonts.currency.config),
-          weights: typography.fonts.currency.weights,
-        },
-      },
-      fontSizes: typography.fontSizes,
-      lineHeights: typography.lineHeights,
-    },
-    icons: {
-      variant: icons.variant,
-      weight: icons.weight,
-      grade: icons.autoGrade
-        ? (mode === 'light' ? -25 : 200)
-        : 0,
-    },
-  };
-}

package/src/tokens/types.ts

@@ -1,146 +0,0 @@
-import type { ColorResult } from 'newtone';
-
-/**
- * Complete token set for a non-neutral palette (accent, success, warning, error).
- *
- * Fill tokens use the palette's key NV position (user-chosen or WCAG auto-derived).
- * Surface tokens use standard positions from PaletteDefaults, rendered in the palette's hue/saturation.
- */
-export interface PaletteTokens {
-  // --- Fill: the palette's key color for prominent surfaces ---
-  /** Key color at the palette's keyNormalizedValue (used for primary Button fills, badges, indicators) */
-  readonly fill: ColorResult;
-  /** Key color shifted for hover state */
-  readonly fillHover: ColorResult;
-  /** Key color shifted for pressed/active state */
-  readonly fillActive: ColorResult;
-  /** High-contrast color for text/icons on top of fill (auto: dark text on light fills, light on dark) */
-  readonly onFill: ColorResult;
-
-  // --- Surface: subtle palette-tinted backgrounds ---
-  /** Palette-tinted background at current elevation */
-  readonly background: ColorResult;
-  /** Palette-tinted elevated surface */
-  readonly backgroundElevated: ColorResult;
-  /** Palette-tinted sunken surface */
-  readonly backgroundSunken: ColorResult;
-
-  // --- Interactive surface: interactive elements on palette surfaces ---
-  /** Interactive element background within palette surface */
-  readonly backgroundInteractive: ColorResult;
-  /** Hover state for interactive elements within palette surface */
-  readonly backgroundInteractiveHover: ColorResult;
-  /** Pressed/active state for interactive elements within palette surface */
-  readonly backgroundInteractiveActive: ColorResult;
-
-  // --- Text: palette-hued text on neutral backgrounds ---
-  /** High-contrast palette-colored text */
-  readonly textPrimary: ColorResult;
-  /** Medium-contrast palette-colored text */
-  readonly textSecondary: ColorResult;
-  /** Low-contrast palette-colored text */
-  readonly textTertiary: ColorResult;
-  /** Disabled palette-colored text */
-  readonly textDisabled: ColorResult;
-
-  // --- Border ---
-  /** Palette-colored border */
-  readonly border: ColorResult;
-}
-
-/**
- * Resolved design tokens for a specific mode/theme/elevation combination
- */
-export interface ResolvedTokens {
-  // --- Neutral palette (top-level for convenience — most-used palette) ---
-
-  /** Background color for the current surface */
-  readonly background: ColorResult;
-  /** Background color for elevated surfaces (cards, modals) */
-  readonly backgroundElevated: ColorResult;
-  /** Background color for sunken surfaces (input fields, wells) */
-  readonly backgroundSunken: ColorResult;
-  /**
-   * Background color for interactive components with neutral backgrounds.
-   * Uses a fixed NV offset from current background to ensure
-   * consistent visual contrast across all elevations (-2 to 2).
-   *
-   * Use for: Button (neutral primary enabled), and future components with neutral filled backgrounds.
-   * Don't use for: Semantic variants (accent/success/error/warning), transparent backgrounds,
-   * or primitives (Frame/Wrapper/Text/Icon already handle elevation correctly).
-   */
-  readonly backgroundInteractive: ColorResult;
-  /** Hover state for neutral interactive components (enabled + hoverShift) */
-  readonly backgroundInteractiveHover: ColorResult;
-  /** Pressed/active state for neutral interactive components (enabled + activeShift) */
-  readonly backgroundInteractiveActive: ColorResult;
-  /** Primary text color (high contrast for body text, 4.5:1 default) */
-  readonly textPrimary: ColorResult;
-  /** Secondary text color (lower contrast for captions, labels, 3.0:1 default) */
-  readonly textSecondary: ColorResult;
-  /** Tertiary text color (hints, placeholders, 2.0:1 default) */
-  readonly textTertiary: ColorResult;
-  /** Disabled text color (disabled elements, 1.5:1 default) */
-  readonly textDisabled: ColorResult;
-  /** Border color for subtle separators */
-  readonly border: ColorResult;
-
-  // --- Per-palette token sets ---
-
-  /** Accent palette tokens (palette index 1) — interactive elements, brand color */
-  readonly accent: PaletteTokens;
-  /** Success palette tokens (palette index 2) — positive state indicators */
-  readonly success: PaletteTokens;
-  /** Warning palette tokens (palette index 3) — caution state indicators */
-  readonly warning: PaletteTokens;
-  /** Error palette tokens (palette index 4) — destructive/error state indicators */
-  readonly error: PaletteTokens;
-
-  /** Spacing tokens for paddings, gaps, and margins.
-   * Token names represent pixel values at Medium (8px) spacing preset.
-   * Actual values scale based on the selected spacing preset. */
-  readonly spacing: {
-    readonly '00': number;  // 0px (always 0)
-    readonly '02': number;  // 2px at Medium (0.25x multiplier)
-    readonly '04': number;  // 4px at Medium (0.5x multiplier)
-    readonly '06': number;  // 6px at Medium (0.75x multiplier)
-    readonly '08': number;  // 8px at Medium (1x multiplier, equals base)
-    readonly '10': number;  // 10px at Medium (1.25x multiplier)
-    readonly '12': number;  // 12px at Medium (1.5x multiplier)
-    readonly '16': number;  // 16px at Medium (2x multiplier)
-    readonly '20': number;  // 20px at Medium (2.5x multiplier)
-    readonly '24': number;  // 24px at Medium (3x multiplier)
-    readonly '32': number;  // 32px at Medium (4x multiplier)
-    readonly '40': number;  // 40px at Medium (5x multiplier)
-    readonly '48': number;  // 48px at Medium (6x multiplier)
-  };
-  /** Border radius tokens for component roundness */
-  readonly radius: {
-    readonly none: number;
-    readonly sm: number;
-    readonly md: number;
-    readonly lg: number;
-    readonly xl: number;
-    readonly pill: 999;
-  };
-  /** Typography tokens for fonts (per-scope) and primitive size/lineHeight scales */
-  readonly typography: {
-    /** Per-scope font family + weight mapping */
-    readonly fonts: {
-      readonly main: { readonly family: string; readonly weights: { readonly regular: number; readonly medium: number; readonly bold: number; } };
-      readonly display: { readonly family: string; readonly weights: { readonly regular: number; readonly medium: number; readonly bold: number; } };
-      readonly mono: { readonly family: string; readonly weights: { readonly regular: number; readonly medium: number; readonly bold: number; } };
-      readonly currency: { readonly family: string; readonly weights: { readonly regular: number; readonly medium: number; readonly bold: number; } };
-    };
-    /** Primitive font size scale — numbered tokens ('01'–'16'), values in px */
-    readonly fontSizes: { readonly [key: string]: number };
-    /** Primitive line height scale — numbered tokens ('01'–'16'), values in px */
-    readonly lineHeights: { readonly [key: string]: number };
-  };
-  /** Icon tokens for Material Symbols configuration */
-  readonly icons: {
-    readonly variant: 'outlined' | 'rounded' | 'sharp';
-    readonly weight: 100 | 200 | 300 | 400 | 500 | 600 | 700;
-    readonly grade: -25 | 0 | 200;  // Mode-aware: light=-25, dark=200
-  };
-}