@luxfi/ui 7.4.10 → 7.4.12

package/src/expiration-selector.tsx

@@ -1,9 +1,8 @@
 'use client';
 
+import { Text, XStack, YStack } from '@hanzo/gui';
 import * as React from 'react';
 
-import { cn } from './utils';
-
 // ---------------------------------------------------------------------------
 // Types
 // ---------------------------------------------------------------------------
@@ -48,31 +47,62 @@ interface ExpirationPillProps {
   readonly onClick: () => void;
 }
 
+// Resting and selected are the same two states every selectable pill in this
+// package uses (tabs, menu rows): a solid fill when selected, a bordered card
+// otherwise. The date label sets no colour of its own — it inherits the
+// button's, so `hoverStyle` here is what brightens it on hover, in one place.
+const SHAPE = {
+  selected: {
+    borderColor: 'transparent',
+    backgroundColor: 'var(--color-selected-control-bg)',
+    color: 'var(--color-selected-control-text)',
+  },
+  resting: {
+    borderColor: 'var(--color-border-divider)',
+    backgroundColor: 'var(--card)',
+    color: 'var(--color-text-secondary)',
+    hoverStyle: { borderColor: 'var(--color-hover)', color: 'var(--color-hover)' },
+  },
+} as const;
+
 function ExpirationPill({ exp, isSelected, onClick }: ExpirationPillProps) {
+  const shape = isSelected ? SHAPE.selected : SHAPE.resting;
+
+  // Near-expiry is a notice, and a notice in Lux is the loudest neutral — it
+  // only shows while resting; a selected pill's own fill already carries the
+  // emphasis.
+  const dteColor = exp.dte <= 7 && !isSelected
+    ? 'var(--color-status-warn)'
+    : isSelected ? 'var(--color-selected-control-text)' : 'var(--muted-foreground)';
+
   return (
-    <button
-      type="button"
-      onClick={onClick}
-      className={cn(
-        'flex flex-col items-center gap-0.5 rounded-md px-3 py-1.5 transition-colors shrink-0',
-        'border text-xs',
-        isSelected
-          ? 'border-blue-500/60 bg-blue-900/30 text-blue-300'
-          : 'border-zinc-800 bg-zinc-900/50 text-zinc-400 hover:border-zinc-600 hover:text-zinc-200',
-      )}
+    <YStack
+      unstyled
+      render={ <button type="button"/> }
+      onClick={ onClick }
+      alignItems="center"
+      gap={ 2 }
+      borderRadius={ 6 }
+      paddingHorizontal={ 12 }
+      paddingVertical={ 6 }
+      flexShrink={ 0 }
+      borderWidth={ 1 }
+      borderStyle="solid"
+      cursor="pointer"
+      { ...(shape as object) }
     >
-      <span className="font-medium whitespace-nowrap">
-        {formatExpDate(exp.date)}
-      </span>
-      <span className={cn(
-        'font-mono tabular-nums text-[10px]',
-        isSelected ? 'text-[var(--foreground)]' : 'text-[var(--muted-foreground)]',
-        // Near expiry is a notice, and a notice in Lux is the loudest neutral.
-        exp.dte <= 7 && !isSelected && 'text-[var(--color-status-warn)]',
-      )}>
-        {exp.dte}d
-      </span>
-    </button>
+      <Text unstyled fontSize={ 12 } fontWeight="500" style={ { whiteSpace: 'nowrap' } as never }>
+        { formatExpDate(exp.date) }
+      </Text>
+      <Text
+        fontVariant={ ['tabular-nums'] as never }
+        style={ { fontFamily: 'monospace' } as never }
+        fontSize={ 10 }
+        color={ dteColor as never }
+      >
+        { exp.dte }d
+      </Text>
+    </YStack>
   );
 }
 
@@ -111,54 +141,42 @@ export const ExpirationSelector = React.forwardRef<HTMLDivElement, ExpirationSel
       })).filter((g) => g.items.length > 0);
 
       return (
-        <div
-          ref={ref}
-          className={cn('flex flex-col gap-2', className)}
-          {...rest}
-        >
-          {grouped.map((group) => (
-            <div key={group.type} className="flex flex-col gap-1">
-              <span className="text-[10px] font-semibold uppercase tracking-wider text-zinc-600 px-1">
-                {group.label}
-              </span>
-              <div className="flex gap-1.5 overflow-x-auto no-scrollbar">
-                {group.items.map((exp) => (
-                  <div key={exp.date} data-selected={exp.date === selected || undefined}>
-                    <ExpirationPill
-                      exp={exp}
-                      isSelected={exp.date === selected}
-                      onClick={() => onSelect(exp.date)}
-                    />
+        <YStack ref={ ref as never } gap={ 8 } className={ className } { ...(rest as object) }>
+          { grouped.map((group) => (
+            <YStack key={ group.type } gap={ 4 }>
+              <Text
+                fontSize={ 10 }
+                fontWeight="600"
+                textTransform="uppercase"
+                letterSpacing={ 0.5 }
+                paddingHorizontal={ 4 }
+                color={ 'var(--color-text-secondary)' as never }
+              >
+                { group.label }
+              </Text>
+              <XStack gap={ 6 } overflowX="auto" overflowY="hidden" className="lux-no-scrollbar">
+                { group.items.map((exp) => (
+                  <div key={ exp.date } data-selected={ exp.date === selected || undefined }>
+                    <ExpirationPill exp={ exp } isSelected={ exp.date === selected } onClick={ () => onSelect(exp.date) }/>
                   </div>
-                ))}
-              </div>
-            </div>
-          ))}
-        </div>
+                )) }
+              </XStack>
+            </YStack>
+          )) }
+        </YStack>
       );
     }
 
     return (
-      <div
-        ref={ref}
-        className={cn('flex items-center gap-1', className)}
-        {...rest}
-      >
-        <div
-          ref={scrollRef}
-          className="flex gap-1.5 overflow-x-auto no-scrollbar"
-        >
-          {expirations.map((exp) => (
-            <div key={exp.date} data-selected={exp.date === selected || undefined}>
-              <ExpirationPill
-                exp={exp}
-                isSelected={exp.date === selected}
-                onClick={() => onSelect(exp.date)}
-              />
+      <XStack ref={ ref as never } alignItems="center" gap={ 4 } className={ className } { ...(rest as object) }>
+        <XStack ref={ scrollRef as never } gap={ 6 } overflowX="auto" overflowY="hidden" className="lux-no-scrollbar">
+          { expirations.map((exp) => (
+            <div key={ exp.date } data-selected={ exp.date === selected || undefined }>
+              <ExpirationPill exp={ exp } isSelected={ exp.date === selected } onClick={ () => onSelect(exp.date) }/>
             </div>
-          ))}
-        </div>
-      </div>
+          )) }
+        </XStack>
+      </XStack>
     );
   },
 );

package/src/field.tsx

@@ -1,12 +1,20 @@
-import * as LabelPrimitive from '@radix-ui/react-label';
+import { Label, Text, YStack } from '@hanzo/gui';
 import * as React from 'react';
 
-import { cn } from './utils';
-
 import type { InputProps } from './input';
 import type { InputGroupProps } from './input-group';
 
-// Inline constants
+// A labelled form control: label, the control itself, and whichever of helper /
+// error / optional text applies.
+//
+// The label is gui's `Label` — a real `<label htmlFor>`, which is the entire
+// reason Radix's was imported. Everything else was Tailwind, and a good part of
+// it was dead: the colours were written `text-[var(--color-x,theme(colors.gray.400))]`,
+// and `theme()` is a Tailwind 3 function that v4 does not resolve inside an
+// arbitrary value. So the fallback half of every one of those declarations was
+// discarded and the class contributed nothing whenever the custom property was
+// unset. The tokens are referenced directly now, and they are all defined.
+
 const space = String.fromCharCode(32);
 
 function getComponentDisplayName(type: string | React.JSXElementConstructor<unknown>): string | undefined {
@@ -27,75 +35,62 @@ export interface FieldProps {
   readonly readOnly?: boolean;
   readonly invalid?: boolean;
   readonly floating?: boolean;
-  readonly bgColor?: string | Record<string, string>;
   readonly id?: string;
   readonly className?: string;
   readonly style?: React.CSSProperties;
 }
 
+const ERROR = 'var(--color-text-error)' as never;
+const MUTED = 'var(--color-text-secondary)' as never;
+
+/** The `*`, the "(optional)", and the inline error that ride alongside a label. */
+const Marks = ({ required, optionalText, errorText }: Pick<FieldProps, 'required' | 'optionalText' | 'errorText'>) => (
+  <>
+    { required && <Text color={ ERROR } aria-hidden>*</Text> }
+    { !required && optionalText && <Text fontSize={ 14 } color={ MUTED }>{ optionalText }</Text> }
+    { errorText && <Text fontSize={ 14 } color={ ERROR }>-{ space }{ errorText }</Text> }
+  </>
+);
+
 export const Field = React.forwardRef<HTMLDivElement, FieldProps>(
   function Field(props, ref) {
     const {
-      label,
-      children,
-      helperText,
-      errorText,
-      optionalText,
-      size,
-      required,
-      disabled,
-      readOnly,
-      invalid,
-      floating,
-      id,
-      className,
-      style,
+      label, children, helperText, errorText, optionalText, size,
+      required, disabled, readOnly, invalid, floating, id, className, style,
     } = props;
 
+    const flags = {
+      'data-disabled': disabled || undefined,
+      'data-readonly': readOnly || undefined,
+      'data-invalid': invalid || undefined,
+    };
+
     // A floating field cannot be without a label.
     if (floating && label) {
-      const injectedProps = {
-        className: 'peer',
-        placeholder: ' ',
-        size,
-        floating,
-        disabled,
-        readOnly,
-      };
+      const injectedProps = { className: 'lux-field-control', placeholder: ' ', size, floating, disabled, readOnly };
 
       const labelElement = (
-        <LabelPrimitive.Root
-          className={ cn(
-            'absolute left-3 top-1/2 -translate-y-1/2',
-            'text-[var(--color-input-placeholder,theme(colors.gray.400))]',
-            'pointer-events-none select-none',
-            'origin-top-left transition-all duration-150',
-            'peer-focus:top-1 peer-focus:translate-y-0 peer-focus:scale-75',
-            'peer-[:not(:placeholder-shown)]:top-1 peer-[:not(:placeholder-shown)]:translate-y-0 peer-[:not(:placeholder-shown)]:scale-75',
-          ) }
+        <Label
           htmlFor={ id }
+          position="absolute"
+          left={ 12 }
+          top="50%"
+          pointerEvents="none"
+          userSelect="none"
+          flexDirection="row"
+          gap={ 4 }
+          color={ 'var(--color-input-placeholder)' as never }
+          // The float itself stays in CSS: it keys off `:placeholder-shown` and
+          // `:focus` of a SIBLING, which is a selector, not a prop.
+          className="lux-field-float"
         >
           { label }
-          { required && (
-            <span className="ml-0.5 text-[var(--color-fg-error,theme(colors.red.500))]" aria-hidden="true">*</span>
-          ) }
-          { !required && optionalText && (
-            <span className="ml-1 text-[var(--color-text-secondary,theme(colors.gray.400))] text-sm">
-              { optionalText }
-            </span>
-          ) }
-          { errorText && (
-            <span className="ml-0.5 text-[var(--color-fg-error,theme(colors.red.500))] text-sm">
-              -{ space }{ errorText }
-            </span>
-          ) }
-        </LabelPrimitive.Root>
+          <Marks required={ required } optionalText={ optionalText } errorText={ errorText }/>
+        </Label>
       );
 
       const helperTextElement = helperText ? (
-        <p className="mt-1.5 text-xs text-[var(--color-text-secondary,theme(colors.gray.400))]">
-          { helperText }
-        </p>
+        <Text marginTop={ 6 } fontSize={ 12 } color={ MUTED }>{ helperText }</Text>
       ) : null;
 
       const child = React.Children.only<React.ReactElement<InputProps | InputGroupProps>>(children);
@@ -107,96 +102,45 @@ export const Field = React.forwardRef<HTMLDivElement, FieldProps>(
           injectedProps,
         );
 
-        const groupInputElement = React.cloneElement(child,
-          {},
-          inputElement,
-          labelElement,
-        );
-
         return (
-          <div
-            ref={ ref }
-            id={ id }
-            className={ cn('relative w-full', className) }
-            style={ style }
-            data-disabled={ disabled || undefined }
-            data-readonly={ readOnly || undefined }
-            data-invalid={ invalid || undefined }
-          >
-            { groupInputElement }
+          <YStack ref={ ref as never } id={ id } position="relative" width="100%" className={ className } style={ style } { ...flags }>
+            { React.cloneElement(child, {}, inputElement, labelElement) }
             { helperTextElement }
-          </div>
+          </YStack>
         );
       }
 
-      const inputElement = React.cloneElement(child, injectedProps);
-
       return (
-        <div
-          ref={ ref }
-          id={ id }
-          className={ cn('relative w-full', className) }
-          style={ style }
-          data-disabled={ disabled || undefined }
-          data-readonly={ readOnly || undefined }
-          data-invalid={ invalid || undefined }
-        >
-          { inputElement }
+        <YStack ref={ ref as never } id={ id } position="relative" width="100%" className={ className } style={ style } { ...flags }>
+          { React.cloneElement(child, injectedProps) }
           { labelElement }
           { helperTextElement }
-        </div>
+        </YStack>
       );
     }
 
-    // Non-floating: standard field layout
-    const injectedProps = {
-      size,
-    };
     const child = React.Children.only<React.ReactElement<InputProps | InputGroupProps>>(children);
-    const clonedChild = React.cloneElement(child, injectedProps);
 
     return (
-      <div
-        ref={ ref }
-        id={ id }
-        className={ cn('flex flex-col gap-1', className) }
-        style={ style }
-        data-disabled={ disabled || undefined }
-        data-readonly={ readOnly || undefined }
-        data-invalid={ invalid || undefined }
-      >
+      <YStack ref={ ref as never } id={ id } gap={ 4 } className={ className } style={ style } { ...flags }>
         { label && (
-          <LabelPrimitive.Root
-            className={ cn(
-              'text-sm font-medium text-[var(--color-field-label,theme(colors.gray.700))]',
-              'dark:text-[var(--color-field-label,theme(colors.gray.300))]',
-              disabled && 'opacity-40',
-            ) }
+          <Label
             htmlFor={ id }
+            flexDirection="row"
+            gap={ 4 }
+            fontSize={ 14 }
+            fontWeight="500"
+            color={ 'var(--color-text-primary)' as never }
+            opacity={ disabled ? 0.4 : 1 }
           >
             { label }
-            { required && (
-              <span className="ml-0.5 text-[var(--color-fg-error,theme(colors.red.500))]" aria-hidden="true">*</span>
-            ) }
-            { !required && optionalText && (
-              <span className="ml-1 text-[var(--color-text-secondary,theme(colors.gray.400))] text-sm font-normal">
-                { optionalText }
-              </span>
-            ) }
-          </LabelPrimitive.Root>
-        ) }
-        { clonedChild }
-        { helperText && (
-          <p className="text-xs text-[var(--color-text-secondary,theme(colors.gray.400))]">
-            { helperText }
-          </p>
-        ) }
-        { errorText && (
-          <p className="text-xs text-[var(--color-fg-error,theme(colors.red.500))]">
-            { errorText }
-          </p>
+            <Marks required={ required } optionalText={ optionalText }/>
+          </Label>
         ) }
-      </div>
+        { React.cloneElement(child, { size }) }
+        { helperText && <Text fontSize={ 12 } color={ MUTED }>{ helperText }</Text> }
+        { errorText && <Text fontSize={ 12 } color={ ERROR }>{ errorText }</Text> }
+      </YStack>
     );
   },
 );

package/src/greeks-display.tsx

@@ -1,9 +1,8 @@
 'use client';
 
+import { Text, View, XStack } from '@hanzo/gui';
 import * as React from 'react';
 
-import { cn } from './utils';
-
 // ---------------------------------------------------------------------------
 // Types
 // ---------------------------------------------------------------------------
@@ -36,12 +35,12 @@ interface GreekDef {
 // on one achromatic ramp (tokens.css --chart-*, plus --foreground for the sixth),
 // so the panel obeys the brand atom and reskins with the host.
 const GREEKS: GreekDef[] = [
-  { key: 'delta', label: 'Delta', symbol: '\u0394', color: 'text-[var(--foreground)]', barColor: 'bg-[var(--foreground)]', decimals: 4, maxMagnitude: 1 },
-  { key: 'gamma', label: 'Gamma', symbol: '\u0393', color: 'text-[var(--chart-1)]', barColor: 'bg-[var(--chart-1)]', decimals: 4, maxMagnitude: 0.1 },
-  { key: 'theta', label: 'Theta', symbol: '\u0398', color: 'text-[var(--chart-4)]', barColor: 'bg-[var(--chart-4)]', decimals: 4, maxMagnitude: 1 },
-  { key: 'vega', label: 'Vega', symbol: '\u03BD', color: 'text-[var(--chart-2)]', barColor: 'bg-[var(--chart-2)]', decimals: 4, maxMagnitude: 1 },
-  { key: 'rho', label: 'Rho', symbol: '\u03C1', color: 'text-[var(--chart-3)]', barColor: 'bg-[var(--chart-3)]', decimals: 4, maxMagnitude: 1 },
-  { key: 'iv', label: 'IV', symbol: '\u03C3', color: 'text-[var(--chart-5)]', barColor: 'bg-[var(--chart-5)]', decimals: 1, maxMagnitude: 100 },
+  { key: 'delta', label: 'Delta', symbol: 'Δ', color: 'var(--foreground)', barColor: 'var(--foreground)', decimals: 4, maxMagnitude: 1 },
+  { key: 'gamma', label: 'Gamma', symbol: 'Γ', color: 'var(--chart-1)', barColor: 'var(--chart-1)', decimals: 4, maxMagnitude: 0.1 },
+  { key: 'theta', label: 'Theta', symbol: 'Θ', color: 'var(--chart-4)', barColor: 'var(--chart-4)', decimals: 4, maxMagnitude: 1 },
+  { key: 'vega', label: 'Vega', symbol: 'ν', color: 'var(--chart-2)', barColor: 'var(--chart-2)', decimals: 4, maxMagnitude: 1 },
+  { key: 'rho', label: 'Rho', symbol: 'ρ', color: 'var(--chart-3)', barColor: 'var(--chart-3)', decimals: 4, maxMagnitude: 1 },
+  { key: 'iv', label: 'IV', symbol: 'σ', color: 'var(--chart-5)', barColor: 'var(--chart-5)', decimals: 1, maxMagnitude: 100 },
 ];
 
 // ---------------------------------------------------------------------------
@@ -61,35 +60,45 @@ function GreekItem({ def, value, compact }: GreekItemProps) {
     : value.toFixed(def.decimals);
 
   return (
-    <div
-      className={cn(
-        'flex items-center gap-1.5',
-        compact ? 'min-w-0' : 'min-w-[100px]',
-      )}
-    >
-      <span className={cn('text-[10px] font-semibold shrink-0', def.color)}>
-        {def.symbol}
-      </span>
-      {!compact && (
-        <span className="text-[10px] text-zinc-500 shrink-0 w-[34px]">
-          {def.label}
-        </span>
-      )}
-      <span className={cn(
-        'font-mono tabular-nums text-xs text-zinc-200 shrink-0',
-        value < 0 && 'text-red-400',
-      )}>
-        {displayValue}
-      </span>
-      {!compact && (
-        <div className="flex-1 h-1 rounded-full bg-zinc-800 min-w-[24px] max-w-[48px] overflow-hidden">
-          <div
-            className={cn('h-full rounded-full transition-all', def.barColor)}
-            style={{ width: `${magnitude * 100}%`, opacity: 0.7 }}
+    <XStack alignItems="center" gap={ 6 } minWidth={ compact ? 0 : 100 }>
+      <Text fontSize={ 10 } fontWeight="600" flexShrink={ 0 } color={ def.color as never }>
+        { def.symbol }
+      </Text>
+      { !compact && (
+        <Text fontSize={ 10 } flexShrink={ 0 } width={ 34 } color={ 'var(--color-text-secondary)' as never }>
+          { def.label }
+        </Text>
+      ) }
+      <Text
+        fontSize={ 12 }
+        flexShrink={ 0 }
+        style={ { fontFamily: 'monospace' } as never }
+        fontVariant={ ['tabular-nums'] as never }
+        color={ (value < 0 ? 'var(--color-status-bad)' : 'var(--color-text-primary)') as never }
+      >
+        { displayValue }
+      </Text>
+      { !compact && (
+        <View
+          flex={ 1 }
+          height={ 4 }
+          borderRadius={ 9999 }
+          minWidth={ 24 }
+          maxWidth={ 48 }
+          overflow="hidden"
+          backgroundColor={ 'var(--color-progress-track)' as never }
+        >
+          <View
+            height="100%"
+            borderRadius={ 9999 }
+            transition="quick"
+            width={ `${ magnitude * 100 }%` as never }
+            opacity={ 0.7 }
+            backgroundColor={ def.barColor as never }
           />
-        </div>
-      )}
-    </div>
+        </View>
+      ) }
+    </XStack>
   );
 }
 
@@ -118,24 +127,23 @@ export const GreeksDisplay = React.forwardRef<HTMLDivElement, GreeksDisplayProps
     const activeGreeks = GREEKS.filter((g) => values[g.key] !== undefined);
 
     return (
-      <div
-        ref={ref}
-        className={cn(
-          'flex flex-wrap items-center',
-          compact ? 'gap-3' : 'gap-4',
-          className,
-        )}
-        {...rest}
+      <XStack
+        ref={ ref as never }
+        flexWrap="wrap"
+        alignItems="center"
+        gap={ compact ? 12 : 16 }
+        className={ className }
+        { ...(rest as object) }
       >
-        {activeGreeks.map((g) => (
+        { activeGreeks.map((g) => (
           <GreekItem
-            key={g.key}
-            def={g}
-            value={values[g.key] as number}
-            compact={compact}
+            key={ g.key }
+            def={ g }
+            value={ values[g.key] as number }
+            compact={ compact }
           />
-        ))}
-      </div>
+        )) }
+      </XStack>
     );
   },
 );

package/src/heading.tsx

@@ -1,46 +1,42 @@
 import { H1, H2, H3 } from '@hanzo/gui';
 import React from 'react';
 
-import { cn } from './utils';
+// gui's heading primitives — real h1/h2/h3 on web, sized Text on native, both
+// inheriting the theme's heading font.
+//
+// The type ramp is props rather than classes, so it survives on native, where a
+// className means nothing. `$lg` is min-width 1024 in the v5 media config — the
+// same breakpoint Tailwind's `lg:` means, so the ramp is unchanged.
+//
+// It is `$lg`, not `$gtLg`. The `gt*` names belong to the v4 media config and
+// this package builds on v5, whose keys are plain mobile-first min-widths. gui
+// does not consume a media prop it has no key for; it forwards it, and React
+// reports it as an unknown DOM attribute. A wrong breakpoint name is not a
+// smaller heading — it is no responsive rule at all.
 
 export interface HeadingProps extends React.ComponentPropsWithoutRef<'h1'> {
   level?: '1' | '2' | '3';
-  // Legacy Chakra style-prop shims
-  mb?: number | string;
-  size?: string;
 }
 
-// gui's heading primitives — real h1/h2/h3 on web, sized Text on native, both
-// inheriting the theme's heading font. The Lux type ramp stays in the classes.
-const LEVEL_TAG = { '1': H1, '2': H2, '3': H3 } as const;
+const TAG = { '1': H1, '2': H2, '3': H3 } as const;
 
-// base (mobile) + lg (desktop) responsive text styles per level
-//
-// Level 1: 18px/24px font-500 -> 32px/40px font-500 tracking=-0.5px
-// Level 2: 16px/24px font-500 -> 24px/32px font-500
-// Level 3: 14px/20px font-600 -> 18px/24px font-500
-const LEVEL_CLASSES = {
-  '1': 'text-[18px] leading-[24px] font-medium lg:text-[32px] lg:leading-[40px] lg:tracking-[-0.5px]',
-  '2': 'text-[16px] leading-[24px] font-medium lg:text-[24px] lg:leading-[32px]',
-  '3': 'text-[14px] leading-[20px] font-semibold lg:text-[18px] lg:leading-[24px] lg:font-medium',
+const RAMP = {
+  '1': { fontSize: 18, lineHeight: 24, fontWeight: '500', $lg: { fontSize: 32, lineHeight: 40, letterSpacing: -0.5 } },
+  '2': { fontSize: 16, lineHeight: 24, fontWeight: '500', $lg: { fontSize: 24, lineHeight: 32 } },
+  '3': { fontSize: 14, lineHeight: 20, fontWeight: '600', $lg: { fontSize: 18, lineHeight: 24, fontWeight: '500' } },
 } as const;
 
-const BASE_CLASSES = 'font-heading text-heading';
-
 export const Heading = React.forwardRef<HTMLHeadingElement, HeadingProps>(
-  function Heading({ level, className, mb, size: _size, style: styleProp, ...rest }, ref) {
-    const Tag = level ? LEVEL_TAG[level] : H2;
-    const levelClasses = level ? LEVEL_CLASSES[level] : undefined;
-    const mergedStyle = mb !== undefined ?
-      { ...styleProp, marginBottom: typeof mb === 'number' ? `${ mb * 4 }px` : mb } :
-      styleProp;
+  function Heading({ level, ...rest }, ref) {
+    const Tag = level ? TAG[level] : H2;
 
     return (
       <Tag
         ref={ ref as never }
         unstyled
-        className={ cn(BASE_CLASSES, levelClasses, className) }
-        style={ mergedStyle as never }
+        fontFamily="$heading"
+        color={ 'var(--color-heading)' as never }
+        { ...(level ? RAMP[level] : null) }
         { ...(rest as object) }
       />
     );