@luxfi/ui 7.4.11 → 7.4.13

package/src/option-chain.tsx

@@ -1,9 +1,8 @@
 'use client';
 
+import { Text, View } from '@hanzo/gui';
 import * as React from 'react';
 
-import { cn } from './utils';
-
 // ---------------------------------------------------------------------------
 // Types
 // ---------------------------------------------------------------------------
@@ -57,6 +56,12 @@ function fmtPct(n: number | undefined | null): string {
   return `${(n * 100).toFixed(1)}%`;
 }
 
+// A cell's own text is centred/right/left via flex, not text-align: the host
+// is a <td> (unstyled, so it keeps native table-cell layout) and the content
+// is a gui Text, which has no cascading effect from a parent's CSS text-align.
+const justify = (align: 'left' | 'right' | 'center'): 'flex-start' | 'flex-end' | 'center' =>
+  align === 'right' ? 'flex-end' : align === 'left' ? 'flex-start' : 'center';
+
 // ---------------------------------------------------------------------------
 // QuoteCell — clickable cell in the option chain
 // ---------------------------------------------------------------------------
@@ -71,19 +76,64 @@ interface QuoteCellProps {
 
 function QuoteCell({ value, highlight, align = 'right', onClick, className }: QuoteCellProps) {
   return (
-    <td
-      className={cn(
-        'px-1.5 py-1 font-mono tabular-nums text-xs whitespace-nowrap',
-        align === 'right' ? 'text-right' : 'text-left',
-        highlight && 'text-zinc-100',
-        !highlight && 'text-zinc-400',
-        onClick && 'cursor-pointer hover:bg-zinc-700/50 transition-colors',
-        className,
-      )}
-      onClick={onClick}
+    <View
+      unstyled
+      render={ <td/> }
+      onClick={ onClick }
+      paddingHorizontal={ 6 }
+      paddingVertical={ 4 }
+      cursor={ onClick ? 'pointer' : undefined }
+      transition="quick"
+      hoverStyle={ onClick ? ({ backgroundColor: 'var(--color-popover-item-hover)' } as never) : undefined }
+      style={ { display: 'flex', alignItems: 'center', justifyContent: justify(align) } as never }
+      className={ className }
     >
-      {value}
-    </td>
+      <Text
+        fontSize={ 12 }
+        style={ { fontFamily: 'monospace', whiteSpace: 'nowrap' } as never }
+        fontVariant={ ['tabular-nums'] as never }
+        color={ (highlight ? 'var(--color-text-primary)' : 'var(--color-text-secondary)') as never }
+      >
+        { value }
+      </Text>
+    </View>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// HeadCell — <th> in either header row
+// ---------------------------------------------------------------------------
+
+interface HeadCellProps {
+  readonly children?: React.ReactNode;
+  readonly colSpan?: number;
+  readonly align?: 'left' | 'right' | 'center';
+  readonly size?: 'group' | 'column';
+  readonly color?: string;
+}
+
+function HeadCell({ children, colSpan, align = 'center', size = 'column', color }: HeadCellProps) {
+  return (
+    <View
+      unstyled
+      render={ colSpan ? <th colSpan={ colSpan }/> : <th/> }
+      paddingHorizontal={ size === 'group' ? 8 : 6 }
+      paddingVertical={ size === 'group' ? 6 : 4 }
+      style={ { display: 'flex', alignItems: 'center', justifyContent: justify(align) } as never }
+    >
+      { children != null && (
+        <Text
+          fontSize={ 10 }
+          fontWeight={ size === 'group' ? '600' : '500' }
+          textTransform="uppercase"
+          letterSpacing={ 0.5 }
+          style={ { whiteSpace: 'nowrap' } as never }
+          color={ (color ?? 'var(--color-text-secondary)') as never }
+        >
+          { children }
+        </Text>
+      ) }
+    </View>
   );
 }
 
@@ -133,58 +183,41 @@ export const OptionChain = React.forwardRef<HTMLDivElement, OptionChainProps>(
     );
 
     return (
-      <div
-        ref={ref}
-        className={cn('w-full overflow-x-auto', className)}
-        {...rest}
+      <View
+        ref={ ref as never }
+        unstyled
+        width="100%"
+        overflowX="auto"
+        className={ className }
+        { ...(rest as object) }
       >
-        <table className="w-full border-collapse text-xs">
-          <thead>
-            <tr className="border-b border-zinc-800">
+        <View unstyled render={ <table/> } width="100%" style={ { borderCollapse: 'collapse' } as never }>
+          <View unstyled render={ <thead/> }>
+            <View unstyled render={ <tr/> } borderBottomWidth={ 1 } borderColor={ 'var(--color-border-divider)' as never }>
               {/* Call headers */}
-              <th
-                colSpan={CALL_HEADERS.length}
-                className="px-2 py-1.5 text-center text-[10px] font-semibold uppercase tracking-wider text-emerald-400"
-              >
-                Calls
-              </th>
+              <HeadCell colSpan={ CALL_HEADERS.length } size="group" color="var(--color-status-good)">Calls</HeadCell>
               {/* Strike header */}
-              <th className="px-2 py-1.5 text-center text-[10px] font-semibold uppercase tracking-wider text-zinc-500">
-                Strike
-              </th>
+              <HeadCell size="group">Strike</HeadCell>
               {/* Put headers */}
-              <th
-                colSpan={PUT_HEADERS.length}
-                className="px-2 py-1.5 text-center text-[10px] font-semibold uppercase tracking-wider text-red-400"
-              >
-                Puts
-              </th>
-            </tr>
-            <tr className="border-b border-zinc-800/60">
-              {CALL_HEADERS.map((h) => (
-                <th
-                  key={`call-${h}`}
-                  className="px-1.5 py-1 text-right text-[10px] font-medium uppercase tracking-wider text-zinc-500"
-                >
-                  {h}
-                </th>
-              ))}
-              <th className="px-2 py-1 text-center text-[10px] font-medium uppercase tracking-wider text-zinc-500" />
-              {PUT_HEADERS.map((h) => (
-                <th
-                  key={`put-${h}`}
-                  className={cn(
-                    'px-1.5 py-1 text-[10px] font-medium uppercase tracking-wider text-zinc-500',
-                    h === 'Bid' || h === 'Ask' || h === 'Last' ? 'text-left' : 'text-right',
-                  )}
+              <HeadCell colSpan={ PUT_HEADERS.length } size="group" color="var(--color-status-bad)">Puts</HeadCell>
+            </View>
+            <View unstyled render={ <tr/> } borderBottomWidth={ 1 } borderColor={ 'var(--color-popover-item-hover)' as never }>
+              { CALL_HEADERS.map((h) => (
+                <HeadCell key={ `call-${ h }` } align="right">{ h }</HeadCell>
+              )) }
+              <HeadCell/>
+              { PUT_HEADERS.map((h) => (
+                <HeadCell
+                  key={ `put-${ h }` }
+                  align={ h === 'Bid' || h === 'Ask' || h === 'Last' ? 'left' : 'right' }
                 >
-                  {h}
-                </th>
-              ))}
-            </tr>
-          </thead>
-          <tbody>
-            {strikes.map((row) => {
+                  { h }
+                </HeadCell>
+              )) }
+            </View>
+          </View>
+          <View unstyled render={ <tbody/> }>
+            { strikes.map((row) => {
               const isATM = Math.abs(row.strike - spotPrice) <=
                 (strikes.length > 1
                   ? Math.abs((strikes[1]?.strike ?? 0) - (strikes[0]?.strike ?? 0)) / 2
@@ -194,68 +227,85 @@ export const OptionChain = React.forwardRef<HTMLDivElement, OptionChainProps>(
               const c = row.call;
               const p = row.put;
 
+              const rowBg = isATM
+                ? 'var(--secondary)'
+                : callITM
+                  ? 'color-mix(in srgb, var(--color-status-good) 12%, transparent)'
+                  : putITM
+                    ? 'color-mix(in srgb, var(--color-status-bad) 12%, transparent)'
+                    : 'transparent';
+
               return (
-                <tr
-                  key={row.strike}
-                  className={cn(
-                    'border-b border-zinc-800/30 transition-colors',
-                    isATM && 'bg-zinc-800/60',
-                    !isATM && callITM && 'bg-emerald-950/20',
-                    !isATM && putITM && 'bg-red-950/20',
-                    !isATM && !callITM && !putITM && 'hover:bg-zinc-800/30',
-                  )}
+                <View
+                  key={ row.strike }
+                  unstyled
+                  render={ <tr/> }
+                  borderBottomWidth={ 1 }
+                  borderColor={ 'color-mix(in srgb, var(--color-border-divider) 50%, transparent)' as never }
+                  transition="quick"
+                  backgroundColor={ rowBg as never }
+                  hoverStyle={ isATM || callITM || putITM ? undefined : ({ backgroundColor: 'var(--color-popover-item-hover)' } as never) }
                 >
                   {/* Call side */}
                   <QuoteCell
-                    value={fmt(c?.bid)}
-                    highlight={!!c}
-                    onClick={() => handleClick(c, 'call', row.strike)}
+                    value={ fmt(c?.bid) }
+                    highlight={ !!c }
+                    onClick={ () => handleClick(c, 'call', row.strike) }
                   />
                   <QuoteCell
-                    value={fmt(c?.ask)}
-                    highlight={!!c}
-                    onClick={() => handleClick(c, 'call', row.strike)}
+                    value={ fmt(c?.ask) }
+                    highlight={ !!c }
+                    onClick={ () => handleClick(c, 'call', row.strike) }
                   />
-                  <QuoteCell value={fmt(c?.last)} highlight={!!c} />
-                  <QuoteCell value={fmtInt(c?.volume)} />
-                  <QuoteCell value={fmtInt(c?.openInterest)} />
-                  <QuoteCell value={fmtPct(c?.iv)} />
-                  <QuoteCell value={fmt(c?.delta, 3)} />
+                  <QuoteCell value={ fmt(c?.last) } highlight={ !!c }/>
+                  <QuoteCell value={ fmtInt(c?.volume) }/>
+                  <QuoteCell value={ fmtInt(c?.openInterest) }/>
+                  <QuoteCell value={ fmtPct(c?.iv) }/>
+                  <QuoteCell value={ fmt(c?.delta, 3) }/>
 
                   {/* Strike */}
-                  <td
-                    className={cn(
-                      'px-2 py-1 text-center font-mono tabular-nums text-xs font-semibold',
-                      isATM ? 'text-[var(--foreground)] bg-[var(--secondary)]' : 'text-[var(--muted-foreground)]',
-                    )}
+                  <View
+                    unstyled
+                    render={ <td/> }
+                    paddingHorizontal={ 8 }
+                    paddingVertical={ 4 }
+                    style={ { display: 'flex', alignItems: 'center', justifyContent: 'center' } as never }
                   >
-                    {fmt(row.strike)}
-                  </td>
+                    <Text
+                      fontSize={ 12 }
+                      fontWeight="600"
+                      style={ { fontFamily: 'monospace' } as never }
+                      fontVariant={ ['tabular-nums'] as never }
+                      color={ (isATM ? 'var(--foreground)' : 'var(--muted-foreground)') as never }
+                    >
+                      { fmt(row.strike) }
+                    </Text>
+                  </View>
 
                   {/* Put side (mirrored order) */}
-                  <QuoteCell value={fmt(p?.delta, 3)} align="right" />
-                  <QuoteCell value={fmtPct(p?.iv)} align="right" />
-                  <QuoteCell value={fmtInt(p?.openInterest)} align="right" />
-                  <QuoteCell value={fmtInt(p?.volume)} align="right" />
-                  <QuoteCell value={fmt(p?.last)} align="left" highlight={!!p} />
+                  <QuoteCell value={ fmt(p?.delta, 3) } align="right"/>
+                  <QuoteCell value={ fmtPct(p?.iv) } align="right"/>
+                  <QuoteCell value={ fmtInt(p?.openInterest) } align="right"/>
+                  <QuoteCell value={ fmtInt(p?.volume) } align="right"/>
+                  <QuoteCell value={ fmt(p?.last) } align="left" highlight={ !!p }/>
                   <QuoteCell
-                    value={fmt(p?.ask)}
+                    value={ fmt(p?.ask) }
                     align="left"
-                    highlight={!!p}
-                    onClick={() => handleClick(p, 'put', row.strike)}
+                    highlight={ !!p }
+                    onClick={ () => handleClick(p, 'put', row.strike) }
                   />
                   <QuoteCell
-                    value={fmt(p?.bid)}
+                    value={ fmt(p?.bid) }
                     align="left"
-                    highlight={!!p}
-                    onClick={() => handleClick(p, 'put', row.strike)}
+                    highlight={ !!p }
+                    onClick={ () => handleClick(p, 'put', row.strike) }
                   />
-                </tr>
+                </View>
               );
-            })}
-          </tbody>
-        </table>
-      </div>
+            }) }
+          </View>
+        </View>
+      </View>
     );
   },
 );

package/src/option-position.tsx

@@ -1,9 +1,8 @@
 'use client';
 
+import { Text, XStack, YStack } from '@hanzo/gui';
 import * as React from 'react';
 
-import { cn } from './utils';
-
 // ---------------------------------------------------------------------------
 // Types
 // ---------------------------------------------------------------------------
@@ -43,6 +42,8 @@ function formatDate(date: string): string {
   return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
 }
 
+const MONO = { fontFamily: 'monospace' } as never;
+
 // ---------------------------------------------------------------------------
 // OptionPositionCard
 // ---------------------------------------------------------------------------
@@ -61,119 +62,149 @@ export const OptionPositionCard = React.forwardRef<HTMLDivElement, OptionPositio
     const isLong = position.quantity > 0;
     const isCall = position.type === 'call';
     const isProfitable = position.pnl >= 0;
+    const pnlColor = (isProfitable ? 'var(--color-status-good)' : 'var(--color-status-bad)') as never;
 
     return (
-      <div
-        ref={ref}
-        className={cn(
-          'flex flex-col gap-2 rounded-lg border border-zinc-800 bg-zinc-900/50 p-3',
-          className,
-        )}
-        {...rest}
+      <YStack
+        ref={ ref as never }
+        gap={ 8 }
+        borderRadius={ 8 }
+        borderWidth={ 1 }
+        borderColor={ 'var(--color-border-divider)' as never }
+        backgroundColor={ 'var(--card)' as never }
+        padding={ 12 }
+        className={ className }
+        { ...(rest as object) }
       >
         {/* Header row: symbol badge + quantity */}
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            {/* Symbol badge */}
-            <span className={cn(
-              'inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-xs font-semibold',
-              // Call vs put is a rank difference, not a hue difference.
-              isCall ? 'bg-[var(--secondary)] text-[var(--foreground)]' : 'bg-[var(--muted)] text-[var(--muted-foreground)]',
-            )}>
-              {position.underlying}
-              <span className="font-mono tabular-nums">{position.strike}</span>
-              <span className="uppercase">{position.type === 'call' ? 'C' : 'P'}</span>
-              <span className="text-zinc-500 font-normal">{formatDate(position.expiration)}</span>
-            </span>
-          </div>
+        <XStack alignItems="center" justifyContent="space-between">
+          <XStack alignItems="center" gap={ 8 }>
+            {/* Symbol badge. Call vs put is a rank difference, not a hue difference. */}
+            <XStack
+              alignItems="center"
+              gap={ 4 }
+              borderRadius={ 4 }
+              paddingHorizontal={ 6 }
+              paddingVertical={ 2 }
+              backgroundColor={ (isCall ? 'var(--secondary)' : 'var(--muted)') as never }
+            >
+              <Text fontSize={ 12 } fontWeight="600" color={ (isCall ? 'var(--foreground)' : 'var(--muted-foreground)') as never }>
+                { position.underlying }
+              </Text>
+              <Text fontSize={ 12 } fontWeight="600" style={ MONO } fontVariant={ ['tabular-nums'] as never } color={ (isCall ? 'var(--foreground)' : 'var(--muted-foreground)') as never }>
+                { position.strike }
+              </Text>
+              <Text fontSize={ 12 } fontWeight="600" textTransform="uppercase" color={ (isCall ? 'var(--foreground)' : 'var(--muted-foreground)') as never }>
+                { position.type === 'call' ? 'C' : 'P' }
+              </Text>
+              <Text fontSize={ 12 } fontWeight="400" color={ 'var(--color-text-secondary)' as never }>
+                { formatDate(position.expiration) }
+              </Text>
+            </XStack>
+          </XStack>
 
           {/* Quantity */}
-          <span className={cn(
-            'text-xs font-semibold font-mono tabular-nums',
-            isLong ? 'text-emerald-400' : 'text-red-400',
-          )}>
-            {isLong ? '+' : ''}{position.quantity}
-          </span>
-        </div>
-
-        {/* Values row */}
-        <div className="grid grid-cols-3 gap-3">
-          <div className="flex flex-col">
-            <span className="text-[10px] uppercase tracking-wider text-zinc-500">Avg Cost</span>
-            <span className="font-mono tabular-nums text-xs text-zinc-300">
-              ${position.avgCost.toFixed(2)}
-            </span>
-          </div>
-          <div className="flex flex-col">
-            <span className="text-[10px] uppercase tracking-wider text-zinc-500">Value</span>
-            <span className="font-mono tabular-nums text-xs text-zinc-300">
-              ${position.currentValue.toFixed(2)}
-            </span>
-          </div>
-          <div className="flex flex-col items-end">
-            <span className="text-[10px] uppercase tracking-wider text-zinc-500">P/L</span>
-            <div className="flex items-center gap-1">
-              <span className={cn(
-                'font-mono tabular-nums text-xs font-semibold',
-                isProfitable ? 'text-emerald-400' : 'text-red-400',
-              )}>
-                {isProfitable ? '+' : ''}{position.pnl.toFixed(2)}
-              </span>
-              <span className={cn(
-                'font-mono tabular-nums text-[10px]',
-                isProfitable ? 'text-emerald-500/70' : 'text-red-500/70',
-              )}>
-                ({isProfitable ? '+' : ''}{position.pnlPercent.toFixed(1)}%)
-              </span>
-            </div>
-          </div>
-        </div>
-
-        {/* Greeks row */}
-        <div className="flex items-center gap-3 border-t border-zinc-800/60 pt-2">
-          <GreekPill label={'\u0394'} value={position.greeks.delta} color="text-blue-400" />
-          <GreekPill label={'\u0393'} value={position.greeks.gamma} color="text-purple-400" />
-          <GreekPill label={'\u0398'} value={position.greeks.theta} color="text-red-400" />
-          <GreekPill label={'\u03BD'} value={position.greeks.vega} color="text-emerald-400" />
-        </div>
+          <Text
+            fontSize={ 12 }
+            fontWeight="600"
+            style={ MONO }
+            fontVariant={ ['tabular-nums'] as never }
+            color={ (isLong ? 'var(--color-status-good)' : 'var(--color-status-bad)') as never }
+          >
+            { isLong ? '+' : '' }{ position.quantity }
+          </Text>
+        </XStack>
+
+        {/* Values row (3 equal columns) */}
+        <XStack gap={ 12 }>
+          <YStack flex={ 1 } gap={ 2 }>
+            <Text fontSize={ 10 } textTransform="uppercase" letterSpacing={ 0.5 } color={ 'var(--color-text-secondary)' as never }>Avg Cost</Text>
+            <Text fontSize={ 12 } style={ MONO } fontVariant={ ['tabular-nums'] as never } color={ 'var(--color-text-primary)' as never }>
+              ${ position.avgCost.toFixed(2) }
+            </Text>
+          </YStack>
+          <YStack flex={ 1 } gap={ 2 }>
+            <Text fontSize={ 10 } textTransform="uppercase" letterSpacing={ 0.5 } color={ 'var(--color-text-secondary)' as never }>Value</Text>
+            <Text fontSize={ 12 } style={ MONO } fontVariant={ ['tabular-nums'] as never } color={ 'var(--color-text-primary)' as never }>
+              ${ position.currentValue.toFixed(2) }
+            </Text>
+          </YStack>
+          <YStack flex={ 1 } gap={ 2 } alignItems="flex-end">
+            <Text fontSize={ 10 } textTransform="uppercase" letterSpacing={ 0.5 } color={ 'var(--color-text-secondary)' as never }>P/L</Text>
+            <XStack alignItems="center" gap={ 4 }>
+              <Text fontSize={ 12 } fontWeight="600" style={ MONO } fontVariant={ ['tabular-nums'] as never } color={ pnlColor }>
+                { isProfitable ? '+' : '' }{ position.pnl.toFixed(2) }
+              </Text>
+              <Text fontSize={ 10 } style={ MONO } fontVariant={ ['tabular-nums'] as never } color={ pnlColor } opacity={ 0.7 }>
+                ({ isProfitable ? '+' : '' }{ position.pnlPercent.toFixed(1) }%)
+              </Text>
+            </XStack>
+          </YStack>
+        </XStack>
+
+        {/* Greeks row — same achromatic ramp as <GreeksDisplay>: a greek is
+            identified by its symbol, never by a hue. */}
+        <XStack alignItems="center" gap={ 12 } borderTopWidth={ 1 } borderColor={ 'var(--color-border-divider)' as never } paddingTop={ 8 }>
+          <GreekPill label="Δ" value={ position.greeks.delta } color="var(--foreground)"/>
+          <GreekPill label="Γ" value={ position.greeks.gamma } color="var(--chart-1)"/>
+          <GreekPill label="Θ" value={ position.greeks.theta } color="var(--chart-4)"/>
+          <GreekPill label="ν" value={ position.greeks.vega } color="var(--chart-2)"/>
+        </XStack>
 
         {/* Action buttons */}
-        {(onClose || onExercise || onRoll) && (
-          <div className="flex items-center gap-2 border-t border-zinc-800/60 pt-2">
-            {onClose && (
-              <button
-                type="button"
-                onClick={() => onClose(position)}
-                className="flex-1 rounded-md bg-zinc-800 px-2 py-1 text-xs font-medium text-zinc-300 hover:bg-zinc-700 hover:text-zinc-100 transition-colors"
-              >
-                Close
-              </button>
-            )}
-            {onExercise && (
-              <button
-                type="button"
-                onClick={() => onExercise(position)}
-                className="flex-1 rounded-md bg-zinc-800 px-2 py-1 text-xs font-medium text-zinc-300 hover:bg-zinc-700 hover:text-zinc-100 transition-colors"
-              >
-                Exercise
-              </button>
-            )}
-            {onRoll && (
-              <button
-                type="button"
-                onClick={() => onRoll(position)}
-                className="flex-1 rounded-md bg-zinc-800 px-2 py-1 text-xs font-medium text-zinc-300 hover:bg-zinc-700 hover:text-zinc-100 transition-colors"
-              >
-                Roll
-              </button>
-            )}
-          </div>
-        )}
-      </div>
+        { (onClose || onExercise || onRoll) && (
+          <XStack alignItems="center" gap={ 8 } borderTopWidth={ 1 } borderColor={ 'var(--color-border-divider)' as never } paddingTop={ 8 }>
+            { onClose && <ActionButton onClick={ () => onClose(position) }>Close</ActionButton> }
+            { onExercise && <ActionButton onClick={ () => onExercise(position) }>Exercise</ActionButton> }
+            { onRoll && <ActionButton onClick={ () => onRoll(position) }>Roll</ActionButton> }
+          </XStack>
+        ) }
+      </YStack>
     );
   },
 );
 
+// ---------------------------------------------------------------------------
+// ActionButton (internal) — Close / Exercise / Roll. Same resting/hover pair
+// button.tsx's "subtle" variant uses: hover repaints the text, not the fill.
+// ---------------------------------------------------------------------------
+
+interface ActionButtonProps {
+  readonly onClick: () => void;
+  readonly children: React.ReactNode;
+}
+
+function ActionButton({ onClick, children }: ActionButtonProps) {
+  return (
+    <XStack
+      unstyled
+      render={ <button type="button"/> }
+      onClick={ onClick }
+      flex={ 1 }
+      alignItems="center"
+      justifyContent="center"
+      borderRadius={ 6 }
+      borderWidth={ 0 }
+      paddingHorizontal={ 8 }
+      paddingVertical={ 4 }
+      backgroundColor={ 'var(--color-button-subtle-bg)' as never }
+      cursor="pointer"
+    >
+      {/* `hoverStyle` lives on the Text, not the button frame — Stacks carry
+          no `color` (same reason they carry no `fontSize`), so the hover
+          re-tint has to be the text's own state, not the button's. */}
+      <Text
+        fontSize={ 12 }
+        fontWeight="500"
+        color={ 'var(--color-button-subtle-fg)' as never }
+        hoverStyle={ { color: 'var(--color-hover)' } as never }
+      >
+        { children }
+      </Text>
+    </XStack>
+  );
+}
+
 // ---------------------------------------------------------------------------
 // GreekPill (internal)
 // ---------------------------------------------------------------------------
@@ -181,21 +212,19 @@ export const OptionPositionCard = React.forwardRef<HTMLDivElement, OptionPositio
 interface GreekPillProps {
   readonly label: string;
   readonly value: number;
+  /** A resolved `var(--…)` token — this component is package-private. */
   readonly color: string;
 }
 
 function GreekPill({ label, value, color }: GreekPillProps) {
   return (
-    <div className="flex items-center gap-1">
-      <span className={cn('text-[10px] font-semibold', color)}>
-        {label}
-      </span>
-      <span className={cn(
-        'font-mono tabular-nums text-[11px]',
-        value < 0 ? 'text-red-400' : 'text-zinc-400',
-      )}>
-        {value.toFixed(4)}
-      </span>
-    </div>
+    <XStack alignItems="center" gap={ 4 }>
+      <Text fontSize={ 10 } fontWeight="600" color={ color as never }>
+        { label }
+      </Text>
+      <Text fontSize={ 11 } style={ MONO } fontVariant={ ['tabular-nums'] as never } color={ (value < 0 ? 'var(--color-status-bad)' : 'var(--color-text-secondary)') as never }>
+        { value.toFixed(4) }
+      </Text>
+    </XStack>
   );
 }