@newtonedev/components 0.1.13 → 0.1.14

package/src/composites/actions/Button/Button.styles.ts

@@ -1,5 +1,4 @@
 import type { UseTokensResult } from 'newtone-api';
-import type { PaletteTokens } from 'newtone-api';
 import type { ButtonVariant, ButtonSemantic, ButtonSize } from './Button.types';
 import type { TextSize } from '../../../primitives/Text/Text.types';
 
@@ -112,17 +111,12 @@ export function computeButtonPadding(
 }
 
 /**
- * Resolve the PaletteTokens for a given semantic.
- * Returns undefined for 'neutral' (handled separately).
+ * Map button semantic to theme name in the new token architecture.
+ * 'accent' maps to 'primary'; others map directly.
  */
-function getPaletteTokens(semantic: ButtonSemantic, tokens: UseTokensResult): PaletteTokens | undefined {
-  switch (semantic) {
-    case 'accent': return tokens.accent;
-    case 'success': return tokens.success;
-    case 'error': return tokens.error;
-    case 'warning': return tokens.warning;
-    default: return undefined;
-  }
+function semanticToTheme(semantic: ButtonSemantic): 'primary' | 'success' | 'error' | 'warning' {
+  if (semantic === 'accent') return 'primary';
+  return semantic as 'success' | 'error' | 'warning';
 }
 
 /**
@@ -218,15 +212,14 @@ function getVariantColors(
   // Disabled state overrides for all variants
   if (disabled) {
     const baseColors = getVariantColorsForState(variant, semantic, tokens);
-    const { gamut } = tokens;
-    const disabledBg = tokens.backgroundSunken[gamut];
+    const disabledBg = tokens.colors.primary.main.fontSecondary;
     return {
       ...baseColors,
       bg: disabledBg,
       hoveredBg: disabledBg,
       pressedBg: disabledBg,
-      textColor: tokens.textSecondary[gamut],
-      iconColor: tokens.textSecondary[gamut],
+      textColor: tokens.colors.primary.main.fontTertiary,
+      iconColor: tokens.colors.primary.main.fontTertiary,
     };
   }
 
@@ -235,7 +228,7 @@ function getVariantColors(
 
 /**
  * Get variant colors for non-disabled state.
- * Implements 3 types × 5 semantics = 15 combinations.
+ * Implements 4 types × 5 semantics = 20 combinations.
  * Uses proper PaletteTokens for all semantic variants — no opacity hacks.
  */
 function getVariantColorsForState(
@@ -243,31 +236,28 @@ function getVariantColorsForState(
   semantic: ButtonSemantic,
   tokens: UseTokensResult
 ) {
-  const { gamut } = tokens;
-  const paletteTokens = getPaletteTokens(semantic, tokens);
-
   // PRIMARY VARIANT: Filled background
   if (variant === 'primary') {
     if (semantic === 'neutral') {
-      // Neutral primary - uses backgroundInteractive tokens for consistent contrast across elevations
       return {
-        bg: tokens.backgroundInteractive[gamut],
-        hoveredBg: tokens.backgroundInteractiveHover[gamut],
-        pressedBg: tokens.backgroundInteractiveActive[gamut],
-        textColor: tokens.textPrimary[gamut],
-        iconColor: tokens.textPrimary[gamut],
+        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',
       };
     }
 
-    // Semantic primary (accent, success, error, warning) — uses palette fill tokens
+    // Semantic primary (accent, success, error, warning)
+    const t = tokens.colors[semanticToTheme(semantic)];
     return {
-      bg: paletteTokens!.fill[gamut],
-      hoveredBg: paletteTokens!.fillHover[gamut],
-      pressedBg: paletteTokens!.fillActive[gamut],
-      textColor: paletteTokens!.onFill[gamut],
-      iconColor: paletteTokens!.onFill[gamut],
+      bg: t.emphasis.background,
+      hoveredBg: t.emphasis.fontPrimary,
+      pressedBg: t.emphasis.fontSecondary,
+      textColor: t.main.background,
+      iconColor: t.main.background,
       borderWidth: 1,
       borderColor: 'transparent',
     };
@@ -276,25 +266,25 @@ function getVariantColorsForState(
   // SECONDARY VARIANT: Outlined (border + subtle background for non-neutral)
   if (variant === 'secondary') {
     if (semantic === 'neutral') {
-      // Shifted action scale: transparent → 01 (hover) → 02 (pressed)
       return {
         bg: 'transparent',
-        hoveredBg: tokens.backgroundInteractive[gamut],
-        pressedBg: tokens.backgroundInteractiveHover[gamut],
-        textColor: tokens.textPrimary[gamut],
-        iconColor: tokens.textPrimary[gamut],
+        hoveredBg: tokens.colors.primary.main.fontPrimary,
+        pressedBg: tokens.colors.primary.main.fontSecondary,
+        textColor: tokens.colors.primary.main.divider,
+        iconColor: tokens.colors.primary.main.divider,
         borderWidth: 1,
-        borderColor: tokens.border[gamut],
+        borderColor: tokens.colors.primary.main.fontSecondary,
       };
     }
 
-    // Semantic secondary — uses palette surface tokens for subtle bg
+    // Semantic secondary
+    const t = tokens.colors[semanticToTheme(semantic)];
     return {
-      bg: paletteTokens!.background[gamut],
-      hoveredBg: paletteTokens!.backgroundInteractive[gamut],
-      pressedBg: paletteTokens!.backgroundInteractiveHover[gamut],
-      textColor: paletteTokens!.fill[gamut],
-      iconColor: paletteTokens!.fill[gamut],
+      bg: t.tinted.background,
+      hoveredBg: t.tinted.fontPrimary,
+      pressedBg: t.tinted.fontSecondary,
+      textColor: t.emphasis.divider,
+      iconColor: t.emphasis.divider,
       borderWidth: 1,
       borderColor: 'transparent',
     };
@@ -303,37 +293,63 @@ function getVariantColorsForState(
   // TERTIARY VARIANT: Ghost (text-only, no visible border)
   if (variant === 'tertiary') {
     if (semantic === 'neutral') {
-      // Shifted action scale: transparent → 01 (hover) → 02 (pressed)
       return {
         bg: 'transparent',
-        hoveredBg: tokens.backgroundInteractive[gamut],
-        pressedBg: tokens.backgroundInteractiveHover[gamut],
-        textColor: tokens.textPrimary[gamut],
-        iconColor: tokens.textPrimary[gamut],
+        hoveredBg: tokens.colors.primary.main.fontPrimary,
+        pressedBg: tokens.colors.primary.main.fontSecondary,
+        textColor: tokens.colors.primary.main.divider,
+        iconColor: tokens.colors.primary.main.divider,
         borderWidth: 1,
         borderColor: 'transparent',
       };
     }
 
-    // Semantic tertiary — uses palette surface tokens for hover/pressed
+    // Semantic tertiary
+    const t = tokens.colors[semanticToTheme(semantic)];
     return {
       bg: 'transparent',
-      hoveredBg: paletteTokens!.background[gamut],
-      pressedBg: paletteTokens!.backgroundInteractive[gamut],
-      textColor: paletteTokens!.fill[gamut],
-      iconColor: paletteTokens!.fill[gamut],
+      hoveredBg: t.tinted.background,
+      pressedBg: t.tinted.fontPrimary,
+      textColor: t.emphasis.divider,
+      iconColor: t.emphasis.divider,
       borderWidth: 1,
       borderColor: 'transparent',
     };
   }
 
+  // LINK VARIANT: Text-only with underline on hover, no background
+  if (variant === 'link') {
+    if (semantic === 'neutral') {
+      return {
+        bg: 'transparent',
+        hoveredBg: 'transparent',
+        pressedBg: 'transparent',
+        textColor: tokens.colors.primary.main.fontSecondary,
+        iconColor: tokens.colors.primary.main.fontSecondary,
+        borderWidth: 0,
+        borderColor: 'transparent',
+      };
+    }
+
+    const t = tokens.colors[semanticToTheme(semantic)];
+    return {
+      bg: 'transparent',
+      hoveredBg: 'transparent',
+      pressedBg: 'transparent',
+      textColor: t.emphasis.divider,
+      iconColor: t.emphasis.divider,
+      borderWidth: 0,
+      borderColor: 'transparent',
+    };
+  }
+
   // Fallback (should never reach here with proper types)
   return {
     bg: 'transparent',
     hoveredBg: 'transparent',
     pressedBg: 'transparent',
-    textColor: tokens.textPrimary[gamut],
-    iconColor: tokens.textPrimary[gamut],
+    textColor: tokens.colors.primary.main.divider,
+    iconColor: tokens.colors.primary.main.divider,
     borderWidth: 0,
   };
 }

package/src/composites/actions/Button/Button.tsx

@@ -39,6 +39,16 @@ import { Wrapper } from '../../../primitives/Wrapper/Wrapper';
  * ```tsx
  * <Button icon="delete" variant="tertiary" semantic="neutral" size="sm" onPress={handleDelete} />
  * ```
+ *
+ * @example
+ * ```tsx
+ * <Button variant="link" semantic="accent" onPress={handleNav}>Learn more</Button>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Button loading onPress={handleSubmit}>Saving...</Button>
+ * ```
  */
 export function Button({
   children,
@@ -48,28 +58,35 @@ export function Button({
   semantic = 'neutral',
   size = 'md',
   disabled = false,
+  loading = false,
+  fullWidth = false,
   style,
   textStyle,
   ...pressableProps
 }: ButtonProps) {
   // Read tokens from current elevation context
-  // backgroundInteractive provides consistent contrast across all elevations
   const tokens = useTokens();
 
-  // Get color tokens + size config (now using backgroundInteractive for consistent contrast)
+  // Loading implies disabled
+  const isDisabled = disabled || loading;
+
+  // Get color tokens + size config
   const { variantColors, sizeTokens } = React.useMemo(
-    () => getButtonConfig(variant, semantic, size, disabled, tokens),
-    [variant, semantic, size, disabled, tokens]
+    () => getButtonConfig(variant, semantic, size, isDisabled, tokens),
+    [variant, semantic, size, isDisabled, tokens]
   );
 
   // Compute asymmetric padding (+8px on text side for optical balance)
+  // Link variant uses minimal padding
   const padding = React.useMemo(
-    () => computeButtonPadding(size, !!icon, !!children, iconPosition),
-    [size, icon, children, iconPosition]
+    () => variant === 'link'
+      ? { paddingLeft: 0, paddingRight: 0, paddingTop: 0, paddingBottom: 0 }
+      : computeButtonPadding(size, !!icon, !!children, iconPosition),
+    [size, icon, children, iconPosition, variant]
   );
 
   return (
-    <Pressable disabled={disabled} {...pressableProps}>
+    <Pressable disabled={isDisabled} {...pressableProps}>
       {({ pressed, hovered }: { pressed: boolean; hovered?: boolean }) => (
         // Wrapper handles layout: direction, gap, alignment (padding via style)
         <Wrapper
@@ -80,15 +97,16 @@ export function Button({
           style={[
             {
               ...padding, // Asymmetric horizontal padding for text optical balance
-              backgroundColor: pressed && !disabled
+              backgroundColor: pressed && !isDisabled
                 ? variantColors.pressedBg
-                : hovered && !disabled
+                : hovered && !isDisabled
                   ? variantColors.hoveredBg
                   : variantColors.bg,
-              borderRadius: sizeTokens.borderRadius,
-              borderWidth: variantColors.borderWidth, // Always 1 for consistent sizing
+              borderRadius: variant === 'link' ? 0 : sizeTokens.borderRadius,
+              borderWidth: variantColors.borderWidth,
               borderColor: variantColors.borderColor || 'transparent',
-              opacity: disabled ? 0.4 : 1,
+              opacity: isDisabled ? (loading ? 0.6 : 0.4) : (variant === 'link' && pressed ? 0.7 : 1),
+              ...(fullWidth && { width: '100%' as any, alignSelf: 'stretch' as any }),
             },
             ...(Array.isArray(style) ? style : style ? [style] : []),
           ]}
@@ -103,7 +121,10 @@ export function Button({
               size={sizeTokens.textSize}
               centerVertically
               style={[
-                { color: variantColors.textColor },
+                {
+                  color: variantColors.textColor,
+                  ...(variant === 'link' && hovered && { textDecorationLine: 'underline' as any }),
+                },
                 ...(Array.isArray(textStyle) ? textStyle : textStyle ? [textStyle] : []),
               ]}
             >

package/src/composites/actions/Button/Button.types.ts

@@ -3,7 +3,7 @@ import type { PressableProps, ViewStyle, TextStyle } from 'react-native';
 /**
  * Visual type for the Button component (describes visual weight)
  */
-export type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
+export type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'link';
 
 /**
  * Semantic meaning for the Button component (describes color purpose)
@@ -66,6 +66,18 @@ export interface ButtonProps extends Omit<PressableProps, 'children' | 'style'>
    */
   readonly disabled?: boolean;
 
+  /**
+   * Loading state — disables interaction and dims content.
+   * @default false
+   */
+  readonly loading?: boolean;
+
+  /**
+   * Full-width mode — stretches button to fill container width.
+   * @default false
+   */
+  readonly fullWidth?: boolean;
+
   /**
    * Custom style overrides for container
    */

package/src/composites/branding/LogoMonogram/LogoMonogram.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import type { LogoMonogramProps } from './LogoMonogram.types';
+
+/**
+ * Newtone monogram — the "N" symbol mark rendered as an SVG.
+ *
+ * The fill color is derived from `colorValue` (0 = black, 255 = white),
+ * allowing smooth animated transitions between light and dark contexts.
+ */
+export function LogoMonogram({ colorValue = 0, size = 32 }: LogoMonogramProps) {
+  // Convert the 0–255 grayscale value to an rgb() string.
+  const fg = `rgb(${colorValue}, ${colorValue}, ${colorValue})`;
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 168 168"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M39.3574 70H12L20 84H36L30.2681 94.0309C28.8627 96.4903 28.8627 99.5096 30.2681 101.969L36 112L49.7319 87.9691C51.1373 85.5097 51.1373 82.4903 49.7319 80.0309L46.3034 74.0309C44.879 71.5383 42.2283 70 39.3574 70Z" fill={fg} />
+      <path d="M84 112H36L41.6966 121.969C43.121 124.462 45.7717 126 48.6426 126H79.3574C82.2283 126 84.879 124.462 86.3034 121.969L93.7319 108.969C95.1373 106.51 95.1373 103.49 93.7319 101.031L84 84L76 98L84 112Z" fill={fg} />
+      <path d="M76 70L84 84H64.6426C61.7717 84 59.121 82.4617 57.6966 79.9691L50.268 66.9691C48.8626 64.5097 48.8626 61.4903 50.268 59.0309L65.6966 32.0309C67.121 29.5383 69.7717 28 72.6426 28H84L60 70H76Z" fill={fg} />
+      <path d="M95.3574 28H84L132 112L137.732 101.969C139.137 99.5097 139.137 96.4903 137.732 94.0309L102.303 32.0309C100.879 29.5383 98.2283 28 95.3574 28Z" fill={fg} />
+      <path d="M104.643 112H132L126.303 121.969C124.879 124.462 122.228 126 119.357 126H108L116 140L108 154L94.268 129.969C92.8626 127.51 92.8626 124.49 94.268 122.031L97.6966 116.031C99.121 113.538 101.772 112 104.643 112Z" fill={fg} />
+    </svg>
+  );
+}

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

@@ -0,0 +1,35 @@
+/**
+ * Props for LogoMonogram — the Newtone "N" symbol mark.
+ *
+ * Renders a single-color SVG monogram that scales to the given size.
+ * The `colorValue` prop controls the grayscale fill, enabling smooth
+ * transitions between light and dark backgrounds.
+ *
+ * @example
+ * ```tsx
+ * <LogoMonogram colorValue={0} />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <LogoMonogram colorValue={255} size={48} />
+ * ```
+ */
+export interface LogoMonogramProps {
+  /**
+   * Grayscale fill value (0–255).
+   *
+   * - `0` produces black (for light backgrounds)
+   * - `255` produces white (for dark backgrounds)
+   *
+   * @default 0
+   */
+  readonly colorValue?: number;
+
+  /**
+   * Width and height of the SVG in pixels.
+   *
+   * @default 32
+   */
+  readonly size?: number;
+}

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

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

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),
+  };
+}