@newtonedev/components 0.1.13 → 0.1.15

package/src/composites/range-inputs/ColorScaleSlider/ColorScaleSlider.tsx

@@ -4,7 +4,7 @@ import { srgbToHex } from 'newtone';
 import { oklchToP3Css } from '@newtonedev/colors';
 import type { Oklch } from '@newtonedev/colors';
 import type { ColorScaleSliderProps } from './ColorScaleSlider.types';
-import { useTokens } from 'newtone-api';
+import { useTokens, useNewtoneTheme } from 'newtone-api';
 import { getColorScaleSliderStyles, THUMB_SIZE } from './ColorScaleSlider.styles';
 
 /**
@@ -30,9 +30,10 @@ export function ColorScaleSlider({
   style,
 }: ColorScaleSliderProps) {
   const tokens = useTokens(1);
+  const { gamut } = useNewtoneTheme();
 
   const styles = React.useMemo(
-    () => getColorScaleSliderStyles(tokens, tokens.gamut, disabled),
+    () => getColorScaleSliderStyles(tokens, disabled),
     [tokens, disabled]
   );
 
@@ -146,7 +147,7 @@ export function ColorScaleSlider({
       >
         <View style={styles.gradientTrack}>
           {visibleColors.map((color, i) => (
-            <View key={i} style={[styles.segment, { backgroundColor: tokens.gamut === 'p3' ? oklchToP3Css(color.oklch) : srgbToHex(color.srgb) }]} />
+            <View key={i} style={[styles.segment, { backgroundColor: gamut === 'p3' ? oklchToP3Css(color.oklch) : srgbToHex(color.srgb) }]} />
           ))}
         </View>
         <Animated.View style={[styles.thumb, { left: thumbAnim }]} />

package/src/composites/range-inputs/HueSlider/HueSlider.styles.ts

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native';
 import { srgbToHex, gamutMapToSrgb } from 'newtone';
-import type { ResolvedTokens, ColorGamut } from 'newtone-api';
+import type { ResolvedTokens } from 'newtone-api';
 
 const TRACK_HEIGHT = 22;
 export const THUMB_SIZE = 18;
@@ -22,7 +22,7 @@ export function buildHueSegments(min: number, max: number): string[] {
   });
 }
 
-export function getHueSliderStyles(tokens: ResolvedTokens, gamut: ColorGamut, disabled: boolean) {
+export function getHueSliderStyles(tokens: ResolvedTokens, disabled: boolean) {
   return StyleSheet.create({
     container: {
       gap: tokens.spacing['04'],
@@ -37,23 +37,23 @@ export function getHueSliderStyles(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: tokens.colors.primary.main.fontTertiary,
     },
     value: {
       fontFamily: tokens.typography.fonts.main.family,
       fontSize: tokens.typography.fontSizes['04'],
       fontWeight: tokens.typography.fonts.main.weights.medium as any,
-      color: tokens.textPrimary[gamut],
+      color: tokens.colors.primary.main.divider,
     },
     valueInput: {
       width: 48,
       paddingVertical: 0,
       paddingHorizontal: 4,
       borderWidth: 1,
-      borderColor: tokens.border[gamut],
+      borderColor: tokens.colors.primary.main.fontSecondary,
       borderRadius: 4,
       backgroundColor: 'transparent',
-      color: tokens.textPrimary[gamut],
+      color: tokens.colors.primary.main.divider,
       fontFamily: tokens.typography.fonts.main.family,
       fontSize: tokens.typography.fontSizes['04'],
       fontWeight: tokens.typography.fonts.main.weights.medium as any,
@@ -83,7 +83,7 @@ export function getHueSliderStyles(tokens: ResolvedTokens, gamut: ColorGamut, di
       borderRadius: THUMB_SIZE / 2,
       backgroundColor: '#ffffff',
       borderWidth: 2,
-      borderColor: tokens.border[gamut],
+      borderColor: tokens.colors.primary.main.fontSecondary,
     },
   });
 }

package/src/composites/range-inputs/HueSlider/HueSlider.tsx

@@ -31,7 +31,7 @@ export function HueSlider({
   const tokens = useTokens(1);
 
   const styles = React.useMemo(
-    () => getHueSliderStyles(tokens, tokens.gamut, disabled),
+    () => getHueSliderStyles(tokens, disabled),
     [tokens, disabled]
   );
 

package/src/composites/range-inputs/Slider/Slider.styles.ts

@@ -1,10 +1,10 @@
 import { StyleSheet } from 'react-native';
-import type { ResolvedTokens, ColorGamut } from 'newtone-api';
+import type { ResolvedTokens } from 'newtone-api';
 
 const TRACK_HEIGHT = 6;
 export const THUMB_SIZE = 16;
 
-export function getSliderStyles(tokens: ResolvedTokens, gamut: ColorGamut, disabled: boolean) {
+export function getSliderStyles(tokens: ResolvedTokens, disabled: boolean) {
   return StyleSheet.create({
     container: {
       gap: tokens.spacing['04'],
@@ -19,23 +19,23 @@ export function getSliderStyles(tokens: ResolvedTokens, gamut: ColorGamut, disab
       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: tokens.colors.primary.main.fontTertiary,
     },
     value: {
       fontFamily: tokens.typography.fonts.main.family,
       fontSize: tokens.typography.fontSizes['04'],
       fontWeight: tokens.typography.fonts.main.weights.medium as any,
-      color: tokens.textPrimary[gamut],
+      color: tokens.colors.primary.main.divider,
     },
     valueInput: {
       width: 48,
       paddingVertical: 0,
       paddingHorizontal: 4,
       borderWidth: 1,
-      borderColor: tokens.border[gamut],
+      borderColor: tokens.colors.primary.main.fontSecondary,
       borderRadius: 4,
       backgroundColor: 'transparent',
-      color: tokens.textPrimary[gamut],
+      color: tokens.colors.primary.main.divider,
       fontFamily: tokens.typography.fonts.main.family,
       fontSize: tokens.typography.fontSizes['04'],
       fontWeight: tokens.typography.fonts.main.weights.medium as any,
@@ -52,21 +52,21 @@ export function getSliderStyles(tokens: ResolvedTokens, gamut: ColorGamut, disab
       right: 0,
       height: TRACK_HEIGHT,
       borderRadius: TRACK_HEIGHT / 2,
-      backgroundColor: tokens.border[gamut],
+      backgroundColor: tokens.colors.primary.main.fontSecondary,
     },
     trackFill: {
       position: 'absolute',
       left: 0,
       height: TRACK_HEIGHT,
       borderRadius: TRACK_HEIGHT / 2,
-      backgroundColor: tokens.accent.fill[gamut],
+      backgroundColor: tokens.colors.primary.emphasis.divider,
     },
     thumb: {
       position: 'absolute',
       width: THUMB_SIZE,
       height: THUMB_SIZE,
       borderRadius: THUMB_SIZE / 2,
-      backgroundColor: tokens.accent.fill[gamut],
+      backgroundColor: tokens.colors.primary.emphasis.divider,
     },
   });
 }

package/src/composites/range-inputs/Slider/Slider.tsx

@@ -19,7 +19,7 @@ export function Slider({
   const tokens = useTokens(1);
 
   const styles = React.useMemo(
-    () => getSliderStyles(tokens, tokens.gamut, disabled),
+    () => getSliderStyles(tokens, disabled),
     [tokens, disabled]
   );
 

package/src/index.ts

@@ -2,6 +2,7 @@
 export {
   NewtoneProvider,
   useNewtoneTheme,
+  useScheme,
   FrameContext,
   useFrameContext,
   useBreakpoint,
@@ -11,18 +12,22 @@ export {
   DEFAULT_ROLE_SCALES,
   useTokens,
   computeTokens,
-  NEUTRAL_DEFAULTS,
-  ACCENT_DEFAULTS,
+  computeSwatches,
+  computeColors,
+  resolveTheme,
+  PRIMARY_DEFAULTS,
+  SECONDARY_DEFAULTS,
+  TERTIARY_DEFAULTS,
   SUCCESS_DEFAULTS,
   WARNING_DEFAULTS,
   ERROR_DEFAULTS,
+  NON_PRIMARY_RELATIVE_DEFAULTS,
+  DEFAULT_THEME_MAPPINGS,
   buildGoogleFontsUrl,
   measureAvgCharWidth,
   useLocalCalibration,
   useTypographyCalibrations,
   enqueueObservation,
-  migrateV1ToV2,
-  isV2TokenOverrides,
 } from 'newtone-api';
 export type {
   ColorMode,
@@ -36,11 +41,16 @@ export type {
   FontConfig,
   FontWeights,
   FontSlot,
-  TokenOverrides,
   TokenColor,
-  PaletteModeTokens,
-  PaletteTokenOverrides,
-  LegacyTokenOverrides,
+  TokenName,
+  ContrastLevel,
+  PaletteId,
+  ThemeName,
+  AppearanceName,
+  ColorRef,
+  AppearanceMapping,
+  ThemeMapping,
+  ThemeMappings,
   FontSizeScale,
   LineHeightScale,
   RoleSizeStep,
@@ -53,8 +63,21 @@ export type {
   FrameContextValue,
   UseTokensResult,
   PaletteDefaults,
+  ContrastLevelDefaults,
+  SwatchDefaults,
+  RelativeContrastDefaults,
+  RelativePaletteDefaults,
+  PaletteKeySteps,
+  RelativeSwatchDefaults,
   ResolvedTokens,
-  PaletteTokens,
+  ResolvedSwatches,
+  PaletteColors,
+  ContrastLevelColors,
+  ElevationColors,
+  ElevationName,
+  AppearanceTokens,
+  ThemeTokens,
+  ResolvedColor,
   DynamicRange,
   ColorResult,
   Srgb,
@@ -108,11 +131,20 @@ export type {
 
 // Composite Components
 export { Button } from './composites/actions/Button/Button';
-export type { ButtonProps, ButtonVariant, ButtonSemantic, ButtonSize, ButtonIconPosition } from './composites/actions/Button/Button.types';
+export type { ButtonProps, ButtonVariant, ButtonSize, ButtonIconPosition } from './composites/actions/Button/Button.types';
 
 export { Card } from './composites/layout/Card/Card';
 export type { CardProps } from './composites/layout/Card/Card.types';
 
+export { Chip } from './composites/display/Chip/Chip';
+export type { ChipProps, ChipVariant, ChipSemantic, ChipSize } from './composites/display/Chip/Chip.types';
+
+export { Divider } from './composites/layout/Divider/Divider';
+export type { DividerProps, DividerOrientation } from './composites/layout/Divider/Divider.types';
+
+export { ContentCard } from './composites/layout/ContentCard/ContentCard';
+export type { ContentCardProps, ContentCardVariant } from './composites/layout/ContentCard/ContentCard.types';
+
 export { TextInput } from './composites/form-controls/TextInput/TextInput';
 export type { TextInputProps } from './composites/form-controls/TextInput/TextInput.types';
 
@@ -145,6 +177,13 @@ export type { SidebarProps } from './composites/layout/Sidebar/Sidebar.types';
 export { Navbar } from './composites/layout/Navbar/Navbar';
 export type { NavbarProps } from './composites/layout/Navbar/Navbar.types';
 
+// Branding
+export { LogoMonogram } from './composites/branding/LogoMonogram/LogoMonogram';
+export type { LogoMonogramProps } from './composites/branding/LogoMonogram/LogoMonogram.types';
+
+export { LogoWordmark } from './composites/branding/LogoWordmark/LogoWordmark';
+export type { LogoWordmarkProps } from './composites/branding/LogoWordmark/LogoWordmark.types';
+
 // Component registry + code generation
 export type {
   CategoryMeta,

package/src/primitives/Frame/Frame.styles.ts

@@ -1,7 +1,7 @@
 import type { ViewStyle } from 'react-native';
 import { StyleSheet } from 'react-native';
-import type { ResolvedTokens, ColorGamut } from 'newtone-api';
-import type { FrameElevation } from 'newtone-api';
+import type { ResolvedTokens, AppearanceTokens } from 'newtone-api';
+import type { FrameElevation, ThemeName, AppearanceName } from 'newtone-api';
 import type {
   PaddingProp,
   GapProp,
@@ -11,6 +11,9 @@ import type {
   Justification,
   RadiusProp,
   LayoutMode,
+  PositionType,
+  OffsetValue,
+  OverflowMode,
 } from './Frame.types';
 import {
   resolvePadding,
@@ -27,9 +30,12 @@ import {
 
 export interface FrameStyleInput {
   readonly tokens: ResolvedTokens;
-  readonly gamut: ColorGamut;
   readonly frameElevation: FrameElevation;
 
+  // Theme / Appearance
+  readonly theme?: ThemeName;
+  readonly appearance?: AppearanceName;
+
   // Layout
   readonly layout?: LayoutMode;
   readonly direction?: Direction;
@@ -54,6 +60,16 @@ export interface FrameStyleInput {
   readonly minHeight?: number;
   readonly maxHeight?: number;
 
+  // Positioning
+  readonly position?: PositionType;
+  readonly top?: OffsetValue;
+  readonly right?: OffsetValue;
+  readonly bottom?: OffsetValue;
+  readonly left?: OffsetValue;
+  readonly zIndex?: number;
+  readonly overflow?: OverflowMode;
+  readonly opacity?: number;
+
   // Appearance
   readonly radius?: RadiusProp;
   readonly bordered?: boolean;
@@ -87,8 +103,9 @@ export interface FrameStyles {
 export function getFrameStyles(input: FrameStyleInput): FrameStyles {
   const {
     tokens,
-    gamut,
     frameElevation,
+    theme = 'primary',
+    appearance = 'main',
     layout = 'flex',
     direction = 'vertical',
     wrap = false,
@@ -105,6 +122,14 @@ export function getFrameStyles(input: FrameStyleInput): FrameStyles {
     maxWidth,
     minHeight,
     maxHeight,
+    position,
+    top,
+    right,
+    bottom,
+    left,
+    zIndex,
+    overflow,
+    opacity,
     radius,
     bordered = false,
     disabled = false,
@@ -116,9 +141,12 @@ export function getFrameStyles(input: FrameStyleInput): FrameStyles {
   const container: Record<string, unknown> = {};
 
   // ── Background & foreground ──
-  // Set the surface color and default text color from the current theme.
-  container.backgroundColor = tokens.background[gamut];
-  container.color = tokens.textPrimary[gamut];
+  // Resolve the appearance tokens for the selected theme + appearance.
+  const appearanceTokens: AppearanceTokens = tokens.colors[theme][appearance];
+
+  // Set the surface color and default text color from the resolved appearance.
+  container.backgroundColor = appearanceTokens.background;
+  container.color = appearanceTokens.fontPrimary;
 
   // ── Layout mode ──
   if (layout === 'flex') {
@@ -172,6 +200,15 @@ export function getFrameStyles(input: FrameStyleInput): FrameStyles {
   if (minHeight !== undefined) container.minHeight = minHeight;
   if (maxHeight !== undefined) container.maxHeight = maxHeight;
 
+  // ── Positioning ──
+  // Set CSS position mode and offsets for absolute/fixed/sticky positioning.
+  if (position) container.position = position;
+  if (top !== undefined) container.top = top;
+  if (right !== undefined) container.right = right;
+  if (bottom !== undefined) container.bottom = bottom;
+  if (left !== undefined) container.left = left;
+  if (zIndex !== undefined) container.zIndex = zIndex;
+
   // ── Radius ──
   // Round the corners of the Frame (e.g. for cards, buttons, pills).
   if (radius !== undefined) {
@@ -188,11 +225,15 @@ export function getFrameStyles(input: FrameStyleInput): FrameStyles {
     }
   }
 
+  // ── Overflow ──
+  // Explicit overflow prop overrides the auto-overflow from radius.
+  if (overflow) container.overflow = overflow;
+
   // ── Border ──
   // Add a thin border using the theme's border color.
   if (bordered) {
     container.borderWidth = 1;
-    container.borderColor = tokens.border[gamut];
+    container.borderColor = appearanceTokens.fontTertiary;
   }
 
   // ── Outer shadow (elevation 2) ──
@@ -207,9 +248,11 @@ export function getFrameStyles(input: FrameStyleInput): FrameStyles {
     container.elevation = 4; // Android-specific shadow depth
   }
 
-  // ── Disabled ──
-  // Make the Frame look faded when disabled.
-  if (disabled) {
+  // ── Opacity ──
+  // Explicit opacity takes precedence over the disabled fade.
+  if (opacity !== undefined) {
+    container.opacity = opacity;
+  } else if (disabled) {
     container.opacity = 0.5;
   }
 
@@ -217,7 +260,7 @@ export function getFrameStyles(input: FrameStyleInput): FrameStyles {
   // When the user is pressing an interactive Frame, shift the background
   // to a darker "sunken" shade to give visual feedback.
   const pressed = StyleSheet.create({
-    s: { backgroundColor: tokens.backgroundSunken[gamut] },
+    s: { backgroundColor: appearanceTokens.fontSecondary },
   }).s;
 
   // ── Grid web style (web-only) ──