@oxy.so/bloom 3.6.0 → 4.1.0

package/src/chart-cards/SankeyChartCard.tsx

@@ -12,7 +12,7 @@ import {
 } from 'react-native';
 import Svg, { G, Path } from 'react-native-svg';
 
-import { mixColor, resolveButtonRamps } from '../button/shared';
+import { mixColor } from '../button/shared';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import { chartHueTone, resolveTone, type ChartHue, type ChartSeriesTone } from './palette';
@@ -24,7 +24,8 @@ import { useChartRange, type ChartRange } from './primitives/use-chart-range';
 import {
   hitTestSankey,
   layoutSankey,
-  sankeyLinkPath,
+  placeSankeyLabels,
+  sankeyRibbonPath,
   sankeyNodePath,
   type SankeyLayout,
 } from './sankey-layout';
@@ -35,7 +36,7 @@ export interface SankeyNodeDatum {
   name: string;
   /**
    * Any colour; defaults to the chart palette by node index. `'neutral'` is
-   * the grey given to minor sinks (neutral-400 light / neutral-300 dark).
+   * the semantic secondary ink given to minor sinks.
    */
   color?: string | 'neutral';
   activeColor?: string;
@@ -85,7 +86,7 @@ export interface SankeyChartCardProps {
   axisLabels?: readonly [string, string];
   /** Which end's colour a ribbon takes. `source` (default) makes every flow out of a node share its colour. */
   linkColor?: 'source' | 'target';
-  /** Card height. Default 480 — a flow needs more room than the 329 chart cards. */
+  /** Card height on wide layouts (default 480). Narrow cards may grow to fit wrapped adjacent labels. */
   height?: number;
   /** The hovered node or link. Controlled when set (`null` = none). */
   activeItem?: SankeyActiveItem | null;
@@ -105,6 +106,9 @@ const ITERATIONS = 32;
 const LABEL_LEFT = 88;
 const LABEL_RIGHT = 150;
 const MARGIN = { top: 2, bottom: 2, left: LABEL_LEFT, right: LABEL_RIGHT } as const;
+// Below this measured plot width, side labels would consume most of the flow.
+const COMPACT_WIDTH = 440;
+const LABEL_GAP = 8;
 export const SANKEY_CARD_HEIGHT = 480;
 
 const NAME_TYPE = svgTextType('body-2-medium');
@@ -123,9 +127,9 @@ const sameItem = (a: SankeyActiveItem | null, b: SankeyActiveItem | null) =>
  * The sankey flow diagram. recharts' layout runs in `sankey-layout.ts`; the
  * card draws it as follows:
  *
- *   ribbons   one cubic per link, `linkCurvature` 0.55, stroked at its value's
- *             thickness in the source node's colour (`linkColor="target"`
- *             flips it), stroke-opacity 0.32 at rest — ×1.6 for neutral ink
+ *   ribbons   a closed cubic band per link, `linkCurvature` 0.55, with its
+ *             vertical thickness in the source node's colour (`linkColor="target"`
+ *             flips it), fill-opacity 0.32 at rest — ×1.6 for neutral ink
  *   nodes     12 wide, 14 apart, rounded 5 only on the outward side
  *   labels    sources: name (13 medium, text-primary) over value (12,
  *             tertiary) 8px left of the node; a node under 26px keeps the
@@ -179,8 +183,7 @@ export function SankeyChartCard({
   );
 
   const neutral = useMemo<ChartSeriesTone>(() => {
-    const { neutral: n } = resolveButtonRamps(theme);
-    return theme.isDark ? { color: n[300], activeColor: n[100] } : { color: n[400], activeColor: n[500] };
+    return { color: theme.colors.textSecondary, activeColor: theme.colors.text };
   }, [theme]);
 
   const tones = useMemo(
@@ -218,13 +221,50 @@ export function SankeyChartCard({
     setSize((prev) => (prev && prev.width === width && prev.height === h ? prev : { width, height: h }));
   }, []);
 
+  const compact = size !== null && size.width < COMPACT_WIDTH;
+  const [wordWidths, setWordWidths] = useState<Record<string, number>>({});
+  const labelWords = useMemo(() => {
+    const words = new Map<string, { key: string; word: string; source: boolean }>();
+    nodes.forEach((node, index) => {
+      if (!stats.isSource[index] && !stats.isSink[index]) return;
+      const source = !!stats.isSource[index] && !stats.isSink[index];
+      for (const word of node.name.split(/\s+/).filter(Boolean)) {
+        const key = `${source}:${word}`;
+        words.set(key, { key, word, source });
+      }
+    });
+    return [...words.values()];
+  }, [nodes, stats]);
+  const longestWord = (source: boolean) => labelWords.filter(word => word.source === source).reduce((width, word) => Math.max(width, wordWidths[word.key] ?? word.word.length * 7), 0);
+  const plotWidth = size?.width ?? 0;
+  const desiredLeft = Math.max(plotWidth * 0.24, longestWord(true) + LABEL_GAP + 1);
+  const desiredRight = Math.max(plotWidth * 0.32, longestWord(false) + LABEL_GAP + 1);
+  // Let whole words use more than the baseline gutters, but retain two node
+  // bars and at least36px of actual ribbon even in an unusually narrow host.
+  const gutterScale = Math.min(1, Math.max(0, plotWidth - NODE_WIDTH * 2 - 36) / (desiredLeft + desiredRight || 1));
+  const leftGutter = Math.round(desiredLeft * gutterScale);
+  const rightGutter = Math.round(desiredRight * gutterScale);
+  const [measuredLabels, setMeasuredLabels] = useState<Record<number, { key: string; height: number }>>({});
+  const compactLabels = nodes.map((node, index) => {
+    const source = !!stats.isSource[index] && !stats.isSink[index];
+    const width = Math.max(1, (source ? leftGutter : rightGutter) - LABEL_GAP);
+    const share = stats.sinkTotal > 0 ? Math.round(((stats.nodeValue[index] ?? 0) / stats.sinkTotal) * 100) : 0;
+    const value = `${format(stats.nodeValue[index] ?? 0)}${stats.isSink[index] ? ` · ${share}%` : ''}`;
+    const key = `${width}:${node.name}:${value}`;
+    // Reserve space before text measurement, then use the actual wrapped height.
+    const estimated = Math.ceil(node.name.length * 7 / width) * 18 + Math.ceil(value.length * 6 / width) * 16 + 2;
+    return { index, source, width, value, key, height: measuredLabels[index]?.key === key ? measuredLabels[index]!.height : estimated };
+  });
+  const columnHeight = (source: boolean) => compactLabels.filter(label => source ? label.source : stats.isSink[label.index]).reduce((sum, label) => sum + label.height + LABEL_GAP, 0);
+  const compactPlotHeight = Math.max(180, height - 128, columnHeight(true), columnHeight(false));
+
   const layout = useMemo<SankeyLayout | null>(
     () =>
       size
         ? layoutSankey(nodes.length, resolvedLinks, {
             width: size.width,
-            height: size.height,
-            margin: MARGIN,
+            height: compact ? compactPlotHeight : size.height,
+            margin: compact ? { top: 2, bottom: 2, left: leftGutter, right: rightGutter } : MARGIN,
             nodeWidth: NODE_WIDTH,
             nodePadding: NODE_PADDING,
             linkCurvature: LINK_CURVATURE,
@@ -232,9 +272,14 @@ export function SankeyChartCard({
             sort: false,
           })
         : null,
-    [size, nodes.length, resolvedLinks],
+    [size, nodes.length, resolvedLinks, compact, leftGutter, rightGutter, compactPlotHeight],
   );
 
+  const compactLabelTops = compact && layout ? {
+    ...placeSankeyLabels(layout.nodes.filter(node => compactLabels[node.index]?.source).map(node => ({ index: node.index, center: node.y + node.height / 2, height: compactLabels[node.index]!.height })), compactPlotHeight),
+    ...placeSankeyLabels(layout.nodes.filter(node => stats.isSink[node.index]).map(node => ({ index: node.index, center: node.y + node.height / 2, height: compactLabels[node.index]!.height })), compactPlotHeight),
+  } : {};
+
   const linkTouches = (li: number, ni: number) => {
     const l = resolvedLinks[li];
     return !!l && (l.source === ni || l.target === ni);
@@ -314,7 +359,15 @@ export function SankeyChartCard({
       .join(', ')}`;
 
   return (
-    <ChartCardSurface height={height} style={style} testID={testID}>
+    <ChartCardSurface height={compact ? 'auto' : height} style={style} testID={testID}>
+      {compact ? <View pointerEvents="none" accessibilityElementsHidden aria-hidden={true}
+        style={{ position: 'absolute', left: 0, right: 0, top: 0, height: 0, overflow: 'hidden', alignItems: 'flex-start' }}>
+        {labelWords.map(word => <Text key={word.key} accessible={false} style={[NAME_TYPE, { flexShrink: 0 }]}
+          onLayout={event => {
+            const width = event.nativeEvent.layout.width;
+            if (width > 0) setWordWidths(previous => previous[word.key] !== undefined && Math.abs(previous[word.key]! - width) < 0.5 ? previous : { ...previous, [word.key]: width });
+          }}>{word.word}</Text>)}
+      </View> : null}
       <ChartHeader
         label={headerLabel}
         value={headlineValue}
@@ -332,19 +385,17 @@ export function SankeyChartCard({
         testID={testID}
       />
 
-      <View style={styles.plot} onLayout={onLayout} testID={testID ? `${testID}-plot` : undefined}>
+      <View style={compact ? { width: '100%', height: compactPlotHeight, flexShrink: 0, flexGrow: 0, flexBasis: 'auto' } : styles.plot} onLayout={onLayout} testID={testID ? `${testID}-plot` : undefined}>
         {size && layout ? (
           <>
-            <Svg width={size.width} height={size.height} style={StyleSheet.absoluteFill} pointerEvents="none">
+            <Svg width={size.width} height={compact ? compactPlotHeight : size.height} style={StyleSheet.absoluteFill} pointerEvents="none">
               <G>
                 {layout.links.map((link) => (
                   <Path
                     key={`link-${link.index}`}
-                    d={sankeyLinkPath(link)}
-                    fill="none"
-                    stroke={linkTone(link.index).color}
-                    strokeWidth={Math.max(1, link.width)}
-                    strokeOpacity={linkOpacities[link.index] ?? 0.32}
+                    d={sankeyRibbonPath(link)}
+                    fill={linkTone(link.index).color}
+                    fillOpacity={linkOpacities[link.index] ?? 0.32}
                   />
                 ))}
               </G>
@@ -362,6 +413,17 @@ export function SankeyChartCard({
                   );
                 })}
               </G>
+              {compact ? layout.nodes.map(node => {
+                const label = compactLabels[node.index]!;
+                const top = compactLabelTops[node.index];
+                if (top === undefined) return null;
+                const center = top + label.height / 2;
+                const nodeCenter = node.y + node.height / 2;
+                if (Math.abs(center - nodeCenter) < 2) return null;
+                const start = label.source ? node.x : node.x + node.width;
+                const end = label.source ? node.x - LABEL_GAP + 2 : node.x + node.width + LABEL_GAP - 2;
+                return <Path key={`leader-${node.index}`} d={`M${start},${nodeCenter} L${end},${center}`} fill="none" stroke={palette.textTertiary} strokeWidth={1} strokeOpacity={0.4} />;
+              }) : null}
             </Svg>
             {layout.nodes.map((n) => {
               const i = n.index;
@@ -369,6 +431,24 @@ export function SankeyChartCard({
               if (!node) return null;
               const midY = n.y + n.height / 2;
               const opacity = nodeOpacities[i] ?? 1;
+              if (compact && (stats.isSource[i] || stats.isSink[i])) {
+                const label = compactLabels[i]!;
+                return <View
+                  key={`label-${i}`}
+                  testID={testID ? `${testID}-label-box-${i}` : undefined}
+                  onLayout={event => {
+                    const measuredHeight = event.nativeEvent.layout.height;
+                    if (measuredHeight <= 0) return;
+                    setMeasuredLabels(previous => previous[i]?.key === label.key && Math.abs(previous[i]!.height - measuredHeight) < 0.5
+                      ? previous : { ...previous, [i]: { key: label.key, height: measuredHeight } });
+                  }}
+                  style={{ position: 'absolute', width: label.width, top: compactLabelTops[i] ?? 0,
+                    ...(label.source ? { left: 0 } : { right: 0 }), gap: 2, opacity }}>
+                  <Text testID={testID ? `${testID}-label-${i}` : undefined}
+                    style={[NAME_TYPE, { color: palette.text, textAlign: label.source ? 'right' : 'left' }]}>{node.name}</Text>
+                  <Text style={[VALUE_TYPE, TABULAR, { color: palette.textTertiary, textAlign: label.source ? 'right' : 'left' }]}>{label.value}</Text>
+                </View>;
+              }
               if (stats.isSource[i] && !stats.isSink[i]) {
                 const tall = n.height >= 26;
                 const right = size.width - (n.x - 8);
@@ -442,6 +522,7 @@ export function SankeyChartCard({
           </Text>
         </View>
       ) : null}
+
     </ChartCardSurface>
   );
 }

package/src/chart-cards/ScatterChartCard.tsx

@@ -1,3 +1,4 @@
+import { boundedLabelSlot } from './svg-text';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
   Platform,
@@ -406,12 +407,11 @@ export function ScatterChartCard({
                   pointerEvents="none"
                   style={{
                     position: 'absolute',
-                    left: box.left - TICK_SIZE - Y_TICK_MARGIN - LABEL_SLOT,
+                    ...boundedLabelSlot(size.width, box.left - TICK_SIZE - Y_TICK_MARGIN, 'end', LABEL_SLOT),
                     top: textTopForBaseline(tick.y + 0.355 * 12, TICK_TYPE),
-                    width: LABEL_SLOT,
-                    alignItems: 'flex-end',
+                        alignItems: 'flex-end',
                   }}>
-                  <Text numberOfLines={1} style={[TICK_TYPE, tickColor]}>
+                  <Text numberOfLines={1} style={[TICK_TYPE, tickColor, { maxWidth: '100%' }]}>
                     {compactNumber(tick.value)}
                   </Text>
                 </View>
@@ -425,15 +425,14 @@ export function ScatterChartCard({
                     pointerEvents="none"
                     style={{
                       position: 'absolute',
-                      left: (placed?.tickCoord ?? sx(v)) - LABEL_SLOT / 2,
+                      ...boundedLabelSlot(size.width, placed?.tickCoord ?? size.width / 2, 'middle', LABEL_SLOT),
                       top: xLabelTop,
-                      width: LABEL_SLOT,
-                      alignItems: 'center',
+                            alignItems: 'center',
                       opacity: placed ? 1 : 0,
                     }}>
                     <Text
                       numberOfLines={1}
-                      style={[TICK_TYPE, tickColor]}
+                      style={[TICK_TYPE, tickColor, { maxWidth: '100%' }]}
                       onLayout={(event) => {
                         const w = event.nativeEvent.layout.width;
                         setLabelWidths((prev) => (prev[key] === w ? prev : { ...prev, [key]: w }));

package/src/chart-cards/SleepScoreCard.tsx

@@ -2,7 +2,6 @@ import React, { useMemo } from 'react';
 import { StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';
 import Svg, { Path } from 'react-native-svg';
 
-import { mixColor, resolveButtonRamps } from '../button/shared';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import { chartHueTone, resolveTone, type ChartHue } from './palette';
@@ -126,8 +125,7 @@ export function SleepScoreCard({
     [metrics, theme, palettes],
   );
   const separator = useMemo(() => {
-    const { neutral: n } = resolveButtonRamps(theme);
-    return theme.isDark ? mixColor(palette.inner, n[700], 0.6) : n[200];
+    return theme.colors.contrast50;
   }, [theme, palette.inner]);
 
   const [activeIndex, setActiveIndex] = useActiveIndex(metrics.length, controlledIndex, onActiveIndexChange);

package/src/chart-cards/StageBarsCard.tsx

@@ -1,9 +1,8 @@
 import React, { useCallback, useMemo } from 'react';
 import { Animated, View, type StyleProp, type ViewStyle } from 'react-native';
 
-import { resolveButtonRamps } from '../button/shared';
+import { contrastRatio } from '../styles/color-contrast';
 import { borderRadius } from '../styles/tokens';
-import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import { resolveTone, type ChartSeriesTone } from './palette';
 import { ChartCardSurface, CHART_CARD_HEIGHT } from './primitives/ChartCardSurface';
@@ -32,7 +31,7 @@ import {
  *            (radius full, at least 2% wide, width and colour easing 500ms),
  *            12px, the value (`body-medium`) and its share of the first stage
  *            (`caption-1-medium` text-tertiary), 6px apart on one baseline
- *   icons    14px, neutral-950 (the fills are the bright 400 tones in both
+ *   icons    14px, black/white chosen for AA against the actual data fill (both
  *            modes), pinned 4px inside the TRACK's left end so they line up
  *            down the column; the track clips them
  *   tiles    three per row, never stretched, swatch · name over value
@@ -49,7 +48,7 @@ export interface StageBar {
   /** Any colour; defaults to the chart palette by index. */
   color?: string;
   activeColor?: string;
-  /** 14px glyph inside the bar's left end: an icon component (tinted neutral-950) or a node. */
+  /** 14px glyph inside the bar's left end: an icon component (contrast-paired with its fill) or a node. */
   icon?: ChartIcon;
 }
 
@@ -110,11 +109,9 @@ export function StageBarsCard({
   style,
   testID,
 }: StageBarsCardProps) {
-  const theme = useTheme();
   const palette = useChartCardPalette();
   const palettes = useChartTones();
   const monoTone = useMonoTone();
-  const iconInk = useMemo(() => resolveButtonRamps(theme).neutral[950], [theme]);
   const mounted = useMountedAfterDelay();
   const fade = useWebTransition('opacity', 200);
 
@@ -189,7 +186,7 @@ export function StageBarsCard({
                 color={activeIndex === i ? tones[i]!.activeColor : tones[i]!.color}
                 track={palette.track}
                 opacity={dim(i)}
-                icon={showIcons ? renderChartIcon(stage.icon, ICON_SIZE, iconInk) : null}
+                icon={showIcons ? renderChartIcon(stage.icon, ICON_SIZE, contrastRatio(activeIndex === i ? tones[i]!.activeColor : tones[i]!.color, '#ffffff') >= 4.5 ? '#ffffff' : '#000000') : null}
                 hover={hoverTarget(i, setActiveIndex)}
                 testID={testID ? `${testID}-bar-${i}` : undefined}
               />

package/src/chart-cards/StepsCard.tsx

@@ -1,3 +1,4 @@
+import { boundedLabelSlot } from './svg-text';
 import React, { useCallback, useMemo, useState } from 'react';
 import {
   Platform,
@@ -311,12 +312,11 @@ export function StepsCard({
                 pointerEvents="none"
                 style={{
                   position: 'absolute',
-                  left: (i + 0.5) * band - LABEL_SLOT / 2,
+                  ...boundedLabelSlot(size.width, (i + 0.5) * band, 'middle', LABEL_SLOT),
                   top: plotBottom + LABEL_TOP,
-                  width: LABEL_SLOT,
                   alignItems: 'center',
                 }}>
-                <Text numberOfLines={1} style={[TICK_TYPE, { color: palette.textSecondary }]}>
+                <Text numberOfLines={1} style={[TICK_TYPE, { maxWidth: '100%', color: palette.textSecondary }]}>
                   {d.label}
                 </Text>
               </View>

package/src/chart-cards/TokensChartCard.tsx

@@ -14,7 +14,6 @@ import {
 import { useReducedMotion } from 'react-native-reanimated';
 import Svg, { ClipPath, Defs, G, Line, LinearGradient, Path, Rect, Stop } from 'react-native-svg';
 
-import { resolveButtonRamps } from '../button/shared';
 import { Chip } from '../chip';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
@@ -203,11 +202,10 @@ export function TokensChartCard({
   const reveal = useReveal(reducedMotion);
 
   const colors = useMemo(() => {
-    const { neutral: n } = resolveButtonRamps(theme);
     return {
       line: color ?? purpleStop(theme, 400),
       dot: activeColor ?? purpleStop(theme, 500),
-      idle: n[400],
+      idle: theme.colors.textTertiary,
       chip: purpleChip(theme, palette.surface),
     };
   }, [theme, color, activeColor, palette.surface]);
@@ -304,7 +302,7 @@ export function TokensChartCard({
             </FadeOnChange>
             {delta !== undefined ? (
               <Chip
-                size="medium"
+                size="md"
                 testID={testID ? `${testID}-delta` : undefined}
                 style={{ alignSelf: 'center', backgroundColor: colors.chip.background }}
                 textStyle={{ color: colors.chip.foreground }}>

package/src/chart-cards/medical-parts.tsx

@@ -3,7 +3,6 @@ import { Animated, Easing, Platform, Pressable, View, type StyleProp, type ViewS
 import { useReducedMotion } from 'react-native-reanimated';
 import Svg, { Path } from 'react-native-svg';
 
-import { mixColor, resolveButtonRamps } from '../button/shared';
 import { adoptStyleSheet } from '../styles/adopt-style-sheet';
 import type { WebCssStyle } from '../styles/web-view-style';
 import { useTheme } from '../theme/use-theme';
@@ -45,20 +44,12 @@ export function useMedicalPalette(): MedicalPalette {
   const theme = useTheme();
   const palette = useChartCardPalette();
   return useMemo(() => {
-    const { neutral: n, accent } = resolveButtonRamps(theme);
-    return theme.isDark
-      ? {
-          secondaryHover: n[800],
-          buttonBorderHover: n[500],
-          cellHover: mixColor(palette.inner, n[700], 0.6),
-          focusRing: accent[500],
-        }
-      : {
-          secondaryHover: n[200],
-          buttonBorderHover: n[300],
-          cellHover: n[100],
-          focusRing: accent[500],
-        };
+    return {
+      secondaryHover: theme.colors.backgroundTertiary,
+      buttonBorderHover: theme.colors.border,
+      cellHover: theme.colors.contrast50,
+      focusRing: theme.colors.primary,
+    };
   }, [theme, palette.inner]);
 }
 

package/src/chart-cards/palette.ts

@@ -1,43 +1,11 @@
-import { ACCENT_TABLE, BUTTON_SHADOW, DANGER_TABLE, colorRamp, mixColor, resolveButtonRamps } from '../button/shared';
-import { oklchToSrgb, srgbToOklch, srgbToRgbString, type Oklch } from '../theme/color-space';
-import { quietText, quietTextOver } from '../styles/color-contrast';
+import { quietTextOver } from '../styles/color-contrast';
 import { AA_TEXT, AA_TEXT_STRONG } from '../styles/surface-levels';
-import { parseRgba } from '../theme/color-utils';
+import { resolveAccentColors } from '../theme/accent-colors';
+import { BUTTON_SHADOW, mixColor } from '../button/shared';
+import { resolveThemeChartColors } from '../theme/chart-colors';
 import type { Theme } from '../theme/types';
 
-/**
- * Chart-card tokens on Bloom's ramps (`button/shared`):
- *
- *                              light           dark
- *   background-secondary       neutral-100     neutral-900     card surface
- *   text-primary               text            text            headline
- *   text-secondary             surfaceTextOn().textSecondary   label, legend
- *   text-tertiary              surfaceTextOn().textTertiary    caption, ticks
- *   chart-neutral              neutral-300     neutral-800     last year
- *   chart-cursor               neutral-300     neutral-700     line hover rule
- *   chart-track                neutral-200     neutral-800     bar hover band
- *   status-lime                200 / 800       950@60% / 500   rising delta
- *   status-rose                200 / 800       950@60% / 500   falling delta
- *   neutral chip               neutral-200/500 neutral-800/500 flat delta
- *   background-inner           card            n-800@60%       stat tiles
- *   background-primary         card            neutral-800     range pill
- *   background-primary-hover   neutral-100     n-700@60%       range pill hover
- *   border-button              neutral-200     neutral-700     range pill border
- *   shadow-xs                  black 5%        black 18%       range pill shadow
- *
- * The series hues, hardcoded and mapped to theme roles:
- *
- *   chart-2 (lime 400 / 500)     Tailwind's lightness, and its chroma ratio and
- *   chart-9 (indigo 400 / 500)   hue distance from `blue-500` re-anchored on
- *                                `primary`: a Tailwind-blue primary reproduces
- *                                lime and indigo, any other preset rotates both
- *                                with the brand
- *
- * A chart hue is DATA, not status, so it does not follow `success` — on the
- * default presets `success` is a deep green whose 400 stop paints a heavy
- * teal line where the chart draws a bright lime. The delta chips ARE status
- * and do follow `success` / `negative`.
- */
+/** Chart surfaces, text and status use the same semantic roles as other cards. */
 export interface ChartCardPalette {
   surface: string;
   text: string;
@@ -62,122 +30,35 @@ export interface ChartSeriesTone {
 }
 
 export function resolveChartCardPalette(theme: Theme): ChartCardPalette {
-  const { neutral: n } = resolveButtonRamps(theme);
-  const lime = colorRamp(theme.colors.success, ACCENT_TABLE);
-  const rose = colorRamp(theme.colors.negative, DANGER_TABLE);
-  const surface = theme.isDark ? n[900] : n[100];
-  // The two quiet text rungs are read off THIS card's fill, not off a ramp stop.
-  // As ramp stops they measured 4.38:1 (light) / 3.78:1 (dark) for the label and
-  // 2.42:1 / 2.29:1 for the axis ticks — a chart whose own captions were below
-  // AA, because `neutral-400` was chosen against the page and the card is not
-  // the page. `surfaceTextOn` floors both against the surface they land on.
-  // The stat tiles (`inner`) are a second fill these labels land on, and in dark
-  // they sit on the OTHER side of the text from the card — so the rungs are
-  // floored over both, not over whichever one happened to be checked.
-  const inner = theme.isDark ? mixColor(surface, n[800], 0.6) : theme.colors.card;
-  const fills = [surface, inner];
-  const quiet = {
-    textSecondary: quietTextOver(fills, theme.colors.text, AA_TEXT_STRONG),
-    textTertiary: quietTextOver(fills, theme.colors.text, AA_TEXT),
+  const c = theme.colors;
+  return {
+    surface: c.card,
+    text: c.text,
+    textSecondary: quietTextOver([c.card, c.backgroundSecondary], c.text, AA_TEXT_STRONG),
+    textTertiary: quietTextOver([c.card, c.backgroundSecondary], c.text, AA_TEXT),
+    neutralSeries: c.textTertiary,
+    cursor: c.border,
+    track: c.contrast50,
+    positive: resolveAccentColors(c, 'success', 'subtle'),
+    negative: resolveAccentColors(c, 'error', 'subtle'),
+    neutral: resolveAccentColors(c, 'default', 'subtle'),
+    inner: c.backgroundSecondary,
+    pill: { background: c.backgroundSecondary, hover: c.contrast50, border: c.borderLight, shadow: BUTTON_SHADOW[theme.isDark ? 'dark' : 'light'] },
   };
-  return theme.isDark
-    ? {
-        surface,
-        text: theme.colors.text,
-        textSecondary: quiet.textSecondary,
-        textTertiary: quiet.textTertiary,
-        neutralSeries: n[800],
-        cursor: n[700],
-        track: n[800],
-        positive: { background: mixColor(surface, lime[950], 0.6), foreground: lime[500] },
-        negative: { background: mixColor(surface, rose[950], 0.6), foreground: rose[500] },
-        neutral: { background: n[800], foreground: quietText(n[800], theme.colors.text, AA_TEXT) },
-        inner,
-        pill: { background: n[800], hover: mixColor(n[800], n[700], 0.6), border: n[700], shadow: BUTTON_SHADOW.dark },
-      }
-    : {
-        surface,
-        text: theme.colors.text,
-        textSecondary: quiet.textSecondary,
-        textTertiary: quiet.textTertiary,
-        neutralSeries: n[300],
-        cursor: n[300],
-        track: n[200],
-        positive: { background: lime[200], foreground: lime[800] },
-        negative: { background: rose[200], foreground: rose[800] },
-        neutral: { background: n[200], foreground: quietText(n[200], theme.colors.text, AA_TEXT) },
-        inner,
-        pill: { background: theme.colors.card, hover: n[100], border: n[200], shadow: BUTTON_SHADOW.light },
-      };
-}
-
-/** Tailwind v4 `blue-500`, the anchor a role-less hue is measured from. */
-const BLUE_500: Oklch = { l: 0.623, c: 0.214, h: 259.815 };
-
-/**
- * `chart-1` … `chart-9` tokens as Tailwind v4's 400 (fill) and 500
- * (`-active`, hover) stops, in OKLCH.
- */
-export const CHART_HUES = {
-  1: [{ l: 0.777, c: 0.152, h: 181.912 }, { l: 0.704, c: 0.14, h: 182.503 }], // teal
-  2: [{ l: 0.841, c: 0.238, h: 128.85 }, { l: 0.768, c: 0.233, h: 130.85 }], // lime
-  3: [{ l: 0.718, c: 0.202, h: 349.761 }, { l: 0.656, c: 0.241, h: 354.308 }], // pink
-  4: [{ l: 0.746, c: 0.16, h: 232.661 }, { l: 0.685, c: 0.169, h: 237.323 }], // sky
-  5: [{ l: 0.714, c: 0.203, h: 305.504 }, { l: 0.627, c: 0.265, h: 303.9 }], // purple
-  6: [{ l: 0.707, c: 0.165, h: 254.624 }, { l: 0.623, c: 0.214, h: 259.815 }], // blue
-  7: [{ l: 0.765, c: 0.177, h: 163.223 }, { l: 0.696, c: 0.17, h: 162.48 }], // emerald
-  8: [{ l: 0.852, c: 0.199, h: 91.936 }, { l: 0.795, c: 0.184, h: 86.047 }], // yellow
-  9: [{ l: 0.673, c: 0.182, h: 276.935 }, { l: 0.585, c: 0.233, h: 277.117 }], // indigo
-} as const satisfies Record<number, readonly [Oklch, Oklch]>;
-
-export type ChartHue = keyof typeof CHART_HUES;
-
-/** OKLCH → `rgb()`, reducing chroma until it fits sRGB (hue-stable). */
-function toRgb({ l, c, h }: Oklch): string {
-  let chroma = c;
-  for (let i = 0; i < 24; i++) {
-    const rgb = oklchToSrgb({ l, c: chroma, h });
-    const back = srgbToOklch(rgb);
-    if (Math.abs(back.l - l) < 0.01 && Math.abs(back.c - chroma) < 0.01) {
-      return srgbToRgbString(rgb);
-    }
-    chroma *= 0.9;
-  }
-  return srgbToRgbString(oklchToSrgb({ l, c: chroma, h }));
 }
 
-function fromPrimary(primary: string, target: Oklch): string {
-  const rgba = parseRgba(primary);
-  if (!rgba) return primary;
-  const base = srgbToOklch(rgba);
-  return toRgb({
-    // Tailwind's own lightness, like `colorRamp`'s absolute stops: a preset whose
-    // primary sits darker than blue-500 would otherwise turn lime into olive.
-    l: target.l,
-    c: base.c * (target.c / BLUE_500.c),
-    h: (((base.h + (target.h - BLUE_500.h)) % 360) + 360) % 360,
-  });
-}
+/** Index into the canonical nine-series palette; independent of a named hue. */
+export type ChartHue = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
 
-/**
- * One `chart-n` token on the theme: Tailwind's lightness, with its chroma ratio
- * and hue distance from `blue-500` re-anchored on `primary`. A Tailwind-blue
- * primary reproduces the hues above exactly; any other preset rotates every
- * hue with the brand, so the series keep their relative spacing.
- */
 export function chartHueTone(theme: Theme, hue: ChartHue): ChartSeriesTone {
-  const [fill, active] = CHART_HUES[hue];
-  return { color: fromPrimary(theme.colors.primary, fill), activeColor: fromPrimary(theme.colors.primary, active) };
+  return resolveThemeChartColors(theme)[hue - 1]!;
 }
 
-/**
- * The default series order, chosen so neighbours stay distinct — lime, blue,
- * purple, pink, yellow, emerald, sky, teal.
- */
-export const CHART_TONE_ORDER: readonly ChartHue[] = [2, 6, 5, 3, 8, 7, 4, 1];
+/** The original five separated hues first, then the four interleaved additions. */
+export const CHART_TONE_ORDER: readonly ChartHue[] = [1, 2, 3, 4, 5, 6, 7, 8, 9];
 
 export function resolveChartTones(theme: Theme): ChartSeriesTone[] {
-  return CHART_TONE_ORDER.map((hue) => chartHueTone(theme, hue));
+  return [...resolveThemeChartColors(theme)];
 }
 
 /**
@@ -195,14 +76,9 @@ export function resolveTone(
   return tones[((index % tones.length) + tones.length) % tones.length]!;
 }
 
-/**
- * The single-ink look: light mode a mid grey (neutral-500, hover 600), dark
- * mode near-white bands (neutral-50 at 84% over the card, hover neutral-50).
- */
+/** A neutral data series and its emphasis, drawn from the text contrast roles. */
 export function resolveMonoTone(theme: Theme): ChartSeriesTone {
-  const { neutral: n } = resolveButtonRamps(theme);
-  if (!theme.isDark) return { color: n[500], activeColor: n[600] };
-  return { color: mixColor(n[900], n[50], 0.84), activeColor: n[50] };
+  return { color: theme.colors.textSecondary, activeColor: theme.colors.text };
 }
 
 /** `chart-2` / `chart-2-active` — the revenue card's series. */