@oxy.so/bloom 3.5.0 → 4.0.0

package/src/carousel/Carousel.tsx

@@ -79,12 +79,11 @@ interface CarouselPaint {
  *   dot hover    border/button/active          neutral-400  (dark neutral-600)
  */
 export function resolveCarouselPaint(theme: Theme): CarouselPaint {
-  const { accent, neutral: n } = resolveButtonRamps(theme);
-  const dark = theme.isDark;
+  const { accent } = resolveButtonRamps(theme);
   return {
     dotActive: theme.colors.text,
-    dot: dark ? n[800] : n[200],
-    dotHover: dark ? n[600] : n[400],
+    dot: theme.colors.backgroundSecondary,
+    dotHover: theme.colors.textSecondary,
     ring: accent[500],
   };
 }
@@ -405,24 +404,8 @@ const CarouselComponent = function Carousel({
     >
       {showArrows && count > 0 ? (
         <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-end', gap: 8 }}>
-          <Button
-            variant="secondary"
-            size="small"
-            iconOnly
-            leadingIcon={RiArrowLeftSLine}
-            accessibilityLabel={previousLabel}
-            disabled={atStart}
-            onPress={() => scrollToIndex(active - 1)}
-          />
-          <Button
-            variant="secondary"
-            size="small"
-            iconOnly
-            leadingIcon={RiArrowRightSLine}
-            accessibilityLabel={nextLabel}
-            disabled={atEnd}
-            onPress={() => scrollToIndex(active + 1)}
-          />
+          <Button size="sm" icon={RiArrowLeftSLine} accessibilityLabel={previousLabel} disabled={atStart} onPress={() => scrollToIndex(active - 1)} appearance="subtle" tone="neutral" />
+          <Button size="sm" icon={RiArrowRightSLine} accessibilityLabel={nextLabel} disabled={atEnd} onPress={() => scrollToIndex(active + 1)} appearance="subtle" tone="neutral" />
         </View>
       ) : null}
 

package/src/chart-cards/ContributionsCard.tsx

@@ -82,9 +82,9 @@ export function useContributionTiers(color?: string): readonly [string, string,
   return useMemo(() => {
     const r = color ? colorRamp(color, ACCENT_TABLE) : resolveButtonRamps(theme).accent;
     return theme.isDark
-      ? [palette.neutralSeries, r[950], r[800], r[700], r[600], r[500]]
-      : [palette.neutralSeries, r[200], r[400], r[500], r[600], r[700]];
-  }, [color, theme, palette.neutralSeries]);
+      ? [palette.track, r[950], r[800], r[700], r[600], r[500]]
+      : [palette.track, r[200], r[400], r[500], r[600], r[700]];
+  }, [color, theme, palette.track]);
 }
 
 /**
@@ -440,7 +440,7 @@ export function ContributionsCard({
               type="radio"
               variant="plain"
               value={selectedId}
-              onChange={select}>
+              onValueChange={select}>
               {periods.map((p) => (
                 <SegmentedControlItem key={p.id} value={p.id} testID={testID ? `${testID}-period-${p.id}` : undefined}>
                   <SegmentedControlItemText>{p.label}</SegmentedControlItemText>

package/src/chart-cards/README.md

@@ -94,10 +94,11 @@ Rules that apply to every card:
 
 ## Series colours from the theme
 
-The `chart-n` tokens are Tailwind hues (lime, blue, purple, pink, yellow, emerald, sky, teal, indigo), 400 as
-the fill and 500 as `-active` (stroke, hover, active dot). `palette.ts#CHART_HUES` holds them in OKLCH;
-`chartHueTone(theme, n)` keeps Tailwind's lightness and re-anchors chroma and hue on `theme.colors.primary`
-(measured from blue-500), so any preset rotates all hues together.
+The nine canonical `chart-n` / `chart-n-active` pairs come from the colour policy and
+are exposed as `theme.chartColors`. The first five fills retain their established
+hues; four additional hues are interleaved. Monochrome presets use separated tones.
+`chartHueTone(theme, n)` reads that same pair, so JS charts and CSS tokens agree.
+Hand-authored themes without `chartColors` use the same policy from their primary.
 
 - Default series order: `useChartTones()`, then `resolveTone(tones, index, color, activeColor)`.
 - A specific token (e.g. `chart-9`): `chartHueTone(theme, 9)`.
@@ -134,3 +135,10 @@ the header, cursor, active dots, legend and tiles:
 - A chip hidden while hovering is excluded from default queries — use `{ includeHiddenElements: true }`.
 - Then run `family-layout`, `aria-state-source-census`, `classname-interop`, `web-css-style`, `root-barrel-graph`,
   `reanimated-deps`, and `bunx tsc --noEmit -p .`, and check the story in light + dark with hover.
+
+Structural fills, hover states, borders and labels read canonical surface and
+text roles, including neutral Sankey nodes and idle chart segments. Intentional
+data encodings retain ramps: Contributions maps magnitude to accent intensity;
+stat-card categorical hues and ProOffer artwork gradients retain their color
+scales. Stage glyphs choose black or white for AA against their actual series
+fill, including caller-provided colors; they are not shell text.

package/src/chart-cards/RadarChartCard.tsx

@@ -1,8 +1,8 @@
+import { boundedLabelSlot } from './svg-text';
 import React, { useCallback, useMemo } from 'react';
 import { Platform, StyleSheet, View, type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
 import Svg, { Circle, G, Line, Path } from 'react-native-svg';
 
-import { resolveButtonRamps } from '../button/shared';
 import type { WebCssStyle } from '../styles/web-view-style';
 import { parseRgba } from '../theme/color-utils';
 import { useTheme } from '../theme/use-theme';
@@ -149,20 +149,22 @@ export function defaultRadarScoreCaption(score: number): string {
 }
 
 function AxisLabel({
+  plotWidth,
   x,
   y,
   anchor,
   children,
 }: {
+  plotWidth: number;
   x: number;
   y: number;
   anchor: 'start' | 'middle' | 'end';
   children: React.ReactNode;
 }) {
-  const left = anchor === 'start' ? x : anchor === 'end' ? x - LABEL_SLOT : x - LABEL_SLOT / 2;
+  const slot = boundedLabelSlot(plotWidth, x, anchor, LABEL_SLOT);
   const align = anchor === 'start' ? 'flex-start' : anchor === 'end' ? 'flex-end' : 'center';
   return (
-    <View pointerEvents="none" style={{ position: 'absolute', left, top: y, width: LABEL_SLOT, alignItems: align }}>
+    <View pointerEvents="none" style={{ position: 'absolute', ...slot, top: y, alignItems: align }}>
       {children}
     </View>
   );
@@ -276,9 +278,9 @@ export function RadarChartCard({
   const labelEase = useWebTransition('color', 150);
   const cardShadow = theme.isDark ? '0 1px 1px 0 rgb(0 0 0 / 0.14)' : '0 1px 1px 0 rgb(0 0 0 / 0.05)';
   // `bg-background-inner-default backdrop-blur-[2px]`: in dark mode the inner surface is
-  // neutral-800 at 60%, so the polygon under the disc shows through, softened.
+  // canonical inner surface at 60%, so the polygon shows through, softened.
   const discStyle = useMemo<WebCssStyle>(() => {
-    const n800 = parseRgba(resolveButtonRamps(theme).neutral[800]);
+    const n800 = parseRgba(palette.inner);
     const backgroundColor = theme.isDark && n800 ? `rgba(${n800.r}, ${n800.g}, ${n800.b}, 0.6)` : palette.inner;
     return Platform.OS === 'web'
       ? { backgroundColor, backdropFilter: 'blur(2px)', WebkitBackdropFilter: 'blur(2px)' }
@@ -406,8 +408,8 @@ export function RadarChartCard({
                 const nameColor = { color: active ? palette.text : palette.textTertiary };
                 if (!isScore) {
                   return (
-                    <AxisLabel key={`label-${i}`} x={at.x} y={at.y + 4 - BASELINE_12} anchor={anchor}>
-                      <Text numberOfLines={1} style={[AXIS_TYPE, nameColor, labelEase]}>
+                    <AxisLabel plotWidth={width} key={`label-${i}`} x={at.x} y={at.y + 4 - BASELINE_12} anchor={anchor}>
+                      <Text numberOfLines={1} style={[AXIS_TYPE, nameColor, labelEase, { maxWidth: '100%' }]}>
                         {String(row.label)}
                       </Text>
                     </AxisLabel>
@@ -420,16 +422,16 @@ export function RadarChartCard({
                 const alert = alertBelow !== undefined && value < alertBelow;
                 return (
                   <React.Fragment key={`label-${i}`}>
-                    <AxisLabel x={at.x} y={at.y + base - BASELINE_11} anchor={anchor}>
-                      <Text numberOfLines={1} style={[SCORE_NAME_TYPE, nameColor, labelEase]}>
+                    <AxisLabel plotWidth={width} x={at.x} y={at.y + base - BASELINE_11} anchor={anchor}>
+                      <Text numberOfLines={1} style={[SCORE_NAME_TYPE, nameColor, labelEase, { maxWidth: '100%' }]}>
                         {String(row.label)}
                       </Text>
                     </AxisLabel>
-                    <AxisLabel x={at.x} y={at.y + base + 17 - BASELINE_16} anchor={anchor}>
+                    <AxisLabel plotWidth={width} x={at.x} y={at.y + base + 17 - BASELINE_16} anchor={anchor}>
                       <Text
                         numberOfLines={1}
                         testID={testID ? `${testID}-score-${i}` : undefined}
-                        style={[SCORE_VALUE_TYPE, { color: alert ? palette.negative.foreground : palette.text }, TABULAR]}>
+                        style={[SCORE_VALUE_TYPE, { maxWidth: '100%', color: alert ? palette.negative.foreground : palette.text }, TABULAR]}>
                         {format(value)}
                       </Text>
                     </AxisLabel>
@@ -489,7 +491,7 @@ export function RadarChartCard({
             <ChartLegend
               items={legendItems}
               testID={testID ? `${testID}-legend` : undefined}
-              style={{ height: 32, width: 'auto', flexShrink: 0, justifyContent: 'flex-end', columnGap: 12 }}
+              style={{ minHeight: 32, width: 'auto', maxWidth: '100%', flexShrink: 1, justifyContent: 'flex-end', columnGap: 12 }}
             />
           ) : undefined
         }

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]);
 }