@newtonedev/components 0.1.5 → 0.1.6

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',
       },

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

package/src/theme/types.ts

@@ -15,11 +15,6 @@ export interface FontConfig {
   readonly fallback: string;     // CSS fallback stack
 }
 
-/**
- * Theme names for different UI contexts
- */
-export type ThemeName = 'neutral' | 'primary' | 'secondary' | 'strong';
-
 /**
  * Elevation levels for surfaces (internal)
  * 0 = sunken, 1 = default, 2 = elevated
@@ -33,16 +28,6 @@ export type ElevationLevel = 0 | 1 | 2;
  */
 export type FrameElevation = -2 | -1 | 0 | 1 | 2;
 
-/**
- * Theme mapping: which palette and normalizedValue to use for backgrounds/text
- * Based on playground theme preview logic
- */
-export interface ThemeMapping {
-  readonly paletteIndex: number;    // Index into ColorSystemConfig.palettes
-  readonly lightModeNv: number;     // normalizedValue for light mode background
-  readonly darkModeNv: number;      // normalizedValue for dark mode background
-}
-
 /**
  * Complete color system configuration
  */
@@ -51,20 +36,63 @@ export interface ColorSystemConfig {
   readonly palettes: ReadonlyArray<PaletteConfig>;
 }
 
+/**
+ * Overrides for hardcoded token computation constants.
+ * All values are optional — omitted fields fall back to engine defaults.
+ *
+ * All values are NV (normalized value / luminosity) offsets on a unified scale.
+ * 0.10 means the same 10% luminosity shift whether applied to borders, text,
+ * or interactive components. Direction auto-inverts per effective mode
+ * (darker in light mode, lighter in dark mode) unless noted otherwise.
+ */
+export interface TokenOverrides {
+  // --- Offset fields (all magnitudes, direction auto-inverts per effective mode) ---
+  // Light mode
+  readonly interactiveComponentOffset?: number;      // default: 0.04 (auto-inverts)
+  readonly hoverShift?: number;                      // default: 0.06 (auto-inverts)
+  readonly activeShift?: number;                     // default: 0.08 (auto-inverts)
+  readonly borderOffset?: number;                    // default: 0.08 (auto-inverts)
+  // Dark mode
+  readonly interactiveComponentOffsetDark?: number;  // default: 0.04 (auto-inverts)
+  readonly hoverShiftDark?: number;                  // default: 0.06 (auto-inverts)
+  readonly activeShiftDark?: number;                 // default: 0.08 (auto-inverts)
+  readonly borderOffsetDark?: number;                // default: 0.08 (auto-inverts)
+  readonly borderFocusedOffset?: number;             // default: 0.16 (auto-inverts)
+  readonly borderFocusedOffsetDark?: number;          // default: 0.16 (auto-inverts)
+  readonly borderFilledOffset?: number;              // default: 0.24 (auto-inverts)
+  readonly borderFilledOffsetDark?: number;           // default: 0.24 (auto-inverts)
+
+  // --- Normalized tokens (light mode: 0 = lightest, 1 = darkest) ---
+  // When present, computeTokens uses absolute positions instead of baseNv + offset.
+  // All themes share the same lightness positions; palette (hue/sat) varies per theme.
+  // Background: absolute positions — ground is Background/01 (elevated)
+  readonly backgroundElevated?: number;              // default: 0    (ground — lightest)
+  readonly backgroundDefault?: number;               // default: 0.03
+  readonly backgroundSunken?: number;                // default: 0.06
+  // Text: absolute positions at bg01 — elevation-compensated by computeTokens on deeper surfaces
+  readonly textPrimaryNormalized?: number;            // default: 0.9  (max contrast)
+  readonly textSecondaryNormalized?: number;          // default: 0.7
+  readonly textTertiaryNormalized?: number;           // default: 0.5
+  readonly textDisabledNormalized?: number;           // default: 0.3
+
+  // --- Normalized tokens (dark mode: 0 = darkest, 1 = lightest) ---
+  // Same semantics as light mode but scale direction is inverted.
+  // Background: ground is Background/01 (elevated = lightest dark surface)
+  readonly backgroundElevatedDark?: number;           // default: 0.24 (ground — lightest dark surface)
+  readonly backgroundDefaultDark?: number;            // default: 0.20
+  readonly backgroundSunkenDark?: number;             // default: 0.16
+  // Text: absolute positions at bg01 — elevation-compensated by computeTokens on deeper surfaces
+  readonly textPrimaryNormalizedDark?: number;         // default: 1.0  (max contrast — lightest)
+  readonly textSecondaryNormalizedDark?: number;       // default: 0.8
+  readonly textTertiaryNormalizedDark?: number;        // default: 0.6
+  readonly textDisabledNormalizedDark?: number;        // default: 0.4
+}
+
 /**
  * Newtone theme configuration
  */
 export interface NewtoneThemeConfig {
   readonly colorSystem: ColorSystemConfig;
-  readonly themes: {
-    readonly neutral: ThemeMapping;
-    readonly primary: ThemeMapping;
-    readonly secondary: ThemeMapping;
-    readonly strong: ThemeMapping;
-  };
-  readonly elevation: {
-    readonly offsets: readonly [number, number, number]; // NV offsets for [sunken, default, elevated]
-  };
   readonly spacing: {
     readonly '00': number;  // base * 0
     readonly '02': number;  // base * 0.25
@@ -120,6 +148,7 @@ export interface NewtoneThemeConfig {
     readonly weight: 100 | 200 | 300 | 400 | 500 | 600 | 700;
     readonly autoGrade: boolean;  // true = mode-aware grade (light=-25, dark=200)
   };
+  readonly tokenOverrides?: TokenOverrides;
 }
 
 /**
@@ -128,7 +157,5 @@ export interface NewtoneThemeConfig {
 export interface NewtoneThemeContext {
   readonly config: NewtoneThemeConfig;
   readonly mode: ColorMode;
-  readonly theme: ThemeName;
   readonly setMode: (mode: ColorMode) => void;
-  readonly setTheme: (theme: ThemeName) => void;
 }