@oxyhq/bloom 0.73.0 → 0.74.0

package/src/__tests__/preset-vars.test.ts

@@ -56,11 +56,23 @@ describe('getPresetVars (engine-backed)', () => {
     }
   });
 
-  it('drives sidebar-primary / ring from the engine primary role', () => {
+  // `--ring` follows the TEXT accent, not the fill. A focus ring is drawn on the
+  // page next to a control, so it needs the tone that is legible there — which is
+  // the job `--primary-text` exists for. Equating it with `--primary` was the same
+  // conflation that made the fill go pastel to stay readable as text.
+  it('drives sidebar-primary / ring from the legible brand accent', () => {
     const vars = getPresetVars('blue', 'light');
-    expect(vars['--sidebar-primary']).toBe(vars['--primary']);
-    expect(vars['--ring']).toBe(vars['--primary']);
-    expect(vars['--chart-1']).toBe(vars['--primary']);
+    expect(vars['--ring']).toBe(vars['--primary-text']);
+    expect(vars['--sidebar-primary']).toBe(vars['--primary-text']);
+  });
+
+  // The chart ramp is no longer drawn from the primary/secondary/tertiary trio,
+  // which spans ~35 degrees of hue and left adjacent series indistinguishable
+  // (minimum ΔE 6.2 across the presets). Five hues, evenly spread, one tone.
+  it('spreads the chart ramp across distinct hues', () => {
+    const vars = getPresetVars('blue', 'light');
+    const series = [1, 2, 3, 4, 5].map((i) => vars[`--chart-${i}`]);
+    expect(new Set(series).size).toBe(series.length);
   });
 
   it('makes secondary a real contrast color, not a mirror of primary (the fix)', () => {
@@ -72,19 +84,19 @@ describe('getPresetVars (engine-backed)', () => {
     }
   });
 
-  it('makes card the lightest surface in light mode, darkest in dark (the fix)', () => {
-    const channels = (rgb: string): number[] =>
-      (rgb.match(/\d+/g) ?? []).map(Number);
-    const sum = (rgb: string): number => channels(rgb).reduce((a, b) => a + b, 0);
+  // Deliberately inverted from what this asserted before: M3's
+  // `surfaceContainerLowest` is the RECESSED step, so in dark a card SANK into
+  // the page rather than lifting off it — on all thirteen presets, which is what
+  // made it a mapping problem and not a seed one.
+  it('makes card lift off the background in BOTH modes', () => {
+    const sum = (rgb: string): number =>
+      (rgb.match(/\d+/g) ?? []).map(Number).reduce((a, b) => a + b, 0);
 
     for (const name of APP_COLOR_NAMES) {
-      const light = getPresetVars(name, 'light');
-      // card (surfaceContainerLowest) must be lighter than background in light.
-      expect(sum(light['--card'] ?? '')).toBeGreaterThan(sum(light['--background'] ?? ''));
-
-      const dark = getPresetVars(name, 'dark');
-      // card must be darker than (or equal to) background in dark — correct inversion.
-      expect(sum(dark['--card'] ?? '')).toBeLessThanOrEqual(sum(dark['--background'] ?? ''));
+      for (const mode of ['light', 'dark'] as const) {
+        const vars = getPresetVars(name, mode);
+        expect(sum(vars['--card'] ?? '')).toBeGreaterThan(sum(vars['--background'] ?? ''));
+      }
     }
   });
 

package/src/button/Button.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, memo } from 'react';
+import React, { useMemo, memo, type ComponentType } from 'react';
 import {
   ActivityIndicator,
   Animated,
@@ -7,9 +7,12 @@ import {
   StyleSheet,
   Text,
   View,
+  type PressableProps,
+  type StyleProp,
   type TextStyle,
   type ViewStyle,
 } from 'react-native';
+import { styled } from 'react-native-css';
 
 import { useTheme } from '../theme/use-theme';
 import { usePressAnimation } from '../hooks/usePressAnimation';
@@ -69,6 +72,73 @@ const PILL_RADIUS = 999;
 const PRESS_SCALE = 0.97;
 const SCALE_VARIANTS = new Set<string>(['primary', 'secondary', 'inverse']);
 
+// ---------------------------------------------------------------------------
+//  The button renders ONE node — the same shape the web fork renders (one
+//  `<button>`).
+//
+//  It used to be two: an unstyled `Animated.View` holding the press-scale
+//  transform, wrapping the `Pressable` that carried `className`, `style` and
+//  every visual. That wrapper — not the pressable — was the flex child of
+//  whatever laid the button out, and it hugged its content, so a caller's
+//  `className="flex-1"` (and `style={{ alignSelf }}`, and every other layout
+//  declaration) applied INSIDE a box that never grew. Nothing errored; the same
+//  call site behaved on web and did nothing on native, and consumers worked
+//  around it by wrapping every Bloom `Button` in their own `<View>`.
+//
+//  Collapsing the two nodes settles "which node does a class belong on?" by
+//  removing the choice: layout and visuals are one box here exactly as they are
+//  in the DOM, so a layout class and a visual class cannot land in different
+//  places. The touch target now scales with the press (0.97 — ~1px on a 40dp
+//  button, and the press is registered before it starts), the same trade
+//  `PressableScale` made when it dropped its own two-node structure.
+//
+//  `styled()` comes from Bloom's own `react-native-css` dependency rather than
+//  passing `className` as a bare prop and hoping the consumer's NativeWind
+//  interop recognises a component Bloom built at module scope. Same reasoning,
+//  and the same silent failure if skipped, as `typography/styled-text.ts`.
+//
+//  Both wrappers are built ONCE at module scope so the element type is stable
+//  across renders — one built during render remounts the subtree every time.
+// ---------------------------------------------------------------------------
+
+/**
+ * Exactly the prop surface `Button` hands to the pressable, and no wider.
+ * `Animated.createAnimatedComponent` maps `WithAnimatedValue` over every prop of
+ * the component it wraps, and doing that to the whole of `PressableProps`
+ * overflows the checker (`TS2590: union type that is too complex to represent`).
+ * Narrowing is also honest: the function form of `style` is deliberately
+ * excluded — see the `useInteractionState` comment in the component body for why
+ * Bloom never uses it.
+ */
+type ButtonPressableProps = Pick<
+  PressableProps,
+  | 'accessibilityHint'
+  | 'accessibilityLabel'
+  | 'accessibilityRole'
+  | 'accessibilityState'
+  | 'children'
+  | 'className'
+  | 'disabled'
+  | 'hitSlop'
+  | 'onPress'
+  | 'onPressIn'
+  | 'onPressOut'
+  | 'testID'
+> & { style?: StyleProp<ViewStyle> };
+
+/**
+ * The same `Pressable` object, typed down to {@link ButtonPressableProps}.
+ * `styled()` derives its mapping type from a dot-path union over the wrapped
+ * component's ENTIRE prop type, and the one over `PressableProps` also overflows
+ * the checker. Nothing changes at runtime — this is the identical component.
+ */
+const ButtonPressable: ComponentType<ButtonPressableProps> = Pressable;
+
+const StyledPressable: ComponentType<ButtonPressableProps> = styled(ButtonPressable, {
+  className: 'style',
+});
+const AnimatedPressable = Animated.createAnimatedComponent(StyledPressable);
+
 const ButtonComponent: React.FC<ButtonProps> = ({
   onPress,
   children,
@@ -170,6 +240,16 @@ const ButtonComponent: React.FC<ButtonProps> = ({
         styles.borderRadius = PILL_RADIUS;
         break;
       case 'icon':
+        // Resolved tokens, not `className="bg-background border border-border"`.
+        // The class form made the caller's `className` and the icon's own chrome
+        // compete for one slot — `<IconButton className="flex-1" />` replaced the
+        // default and shipped a transparent, borderless icon button — and it left
+        // the chrome dependent on the consumer's Tailwind pipeline resolving
+        // Bloom's color names. These are the SAME tokens `Button.web.tsx`'s
+        // `resolveVariantStyle('icon')` already writes inline.
+        styles.backgroundColor = theme.colors.background;
+        styles.borderWidth = 1;
+        styles.borderColor = theme.colors.border;
         styles.borderRadius = PILL_RADIUS;
         styles.padding = 8;
         styles.width = sizeConfig.minHeight;
@@ -220,7 +300,6 @@ const ButtonComponent: React.FC<ButtonProps> = ({
 
   const defaultHitSlop = variant === 'icon' ? ICON_HIT_SLOP : undefined;
   const resolvedActiveOpacity = activeOpacity ?? (variant === 'icon' ? 0.7 : 0.8);
-  const resolvedClassName = className ?? (variant === 'icon' ? 'bg-background border border-border' : undefined);
 
   const content = (
     <>
@@ -233,44 +312,48 @@ const ButtonComponent: React.FC<ButtonProps> = ({
   );
 
   return (
-    <Animated.View style={hasScaleFeedback ? { transform: [{ scale: scaleAnim }] } : undefined}>
-      <Pressable
-        {...(resolvedClassName ? { className: resolvedClassName } as Record<string, string> : {})}
-        style={[
-          baseStyles,
-          disabled && !loading && { opacity: 0.5 },
-          pressed && !hasScaleFeedback && !isInteractionBlocked && { opacity: resolvedActiveOpacity },
-          style,
-        ]}
-        onPress={isInteractionBlocked ? undefined : onPress}
-        onPressIn={handlePressIn}
-        onPressOut={handlePressOut}
-        disabled={isInteractionBlocked}
-        hitSlop={hitSlop ?? defaultHitSlop}
-        accessibilityLabel={accessibilityLabel}
-        accessibilityHint={accessibilityHint}
-        accessibilityRole="button"
-        accessibilityState={loading ? { disabled: isInteractionBlocked, busy: true } : { disabled: isInteractionBlocked }}
-        testID={testID}
-      >
-        {loading ? (
-          <>
-            <View
-              style={styles.loadingHiddenContent}
-              importantForAccessibility="no-hide-descendants"
-              accessibilityElementsHidden
-            >
-              {content}
-            </View>
-            <View style={styles.loadingOverlay}>
-              <ActivityIndicator size="small" color={loadingColor ?? resolvedTextColor} />
-            </View>
-          </>
-        ) : (
-          content
-        )}
-      </Pressable>
-    </Animated.View>
+    <AnimatedPressable
+      className={className}
+      style={[
+        baseStyles,
+        disabled && !loading && { opacity: 0.5 },
+        pressed && !hasScaleFeedback && !isInteractionBlocked && { opacity: resolvedActiveOpacity },
+        // Before the caller's `style`, so `style` keeps winning the whole array
+        // the way it always has (and the way the web fork spreads it last). The
+        // cost is that a caller who sets `transform` on a scale variant replaces
+        // the press scale instead of composing with it — when the transform sat
+        // on a separate wrapper node the two multiplied.
+        hasScaleFeedback ? { transform: [{ scale: scaleAnim }] } : null,
+        style,
+      ]}
+      onPress={isInteractionBlocked ? undefined : onPress}
+      onPressIn={handlePressIn}
+      onPressOut={handlePressOut}
+      disabled={isInteractionBlocked}
+      hitSlop={hitSlop ?? defaultHitSlop}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityHint={accessibilityHint}
+      accessibilityRole="button"
+      accessibilityState={loading ? { disabled: isInteractionBlocked, busy: true } : { disabled: isInteractionBlocked }}
+      testID={testID}
+    >
+      {loading ? (
+        <>
+          <View
+            style={styles.loadingHiddenContent}
+            importantForAccessibility="no-hide-descendants"
+            accessibilityElementsHidden
+          >
+            {content}
+          </View>
+          <View style={styles.loadingOverlay}>
+            <ActivityIndicator size="small" color={loadingColor ?? resolvedTextColor} />
+          </View>
+        </>
+      ) : (
+        content
+      )}
+    </AnimatedPressable>
   );
 };
 

package/src/button/Button.web.tsx

@@ -18,9 +18,17 @@ import type { ButtonProps, ButtonSize, ButtonVariant } from './types';
 export type { ButtonProps, ButtonVariant, ButtonSize } from './types';
 
 // ---------------------------------------------------------------------------
-//  Geometry — mirrors the native (`Button.tsx`) impl exactly so the web button
-//  is pixel-consistent with native. Sizes below are the resolved primitives;
-//  the shadcn-style aliases (`sm | md | lg | icon`) are normalized first.
+//  Geometry — mirrors the native (`Button.tsx`) impl so the web button is
+//  pixel-consistent with native. Sizes below are the resolved primitives; the
+//  shadcn-style aliases (`sm | md | lg | icon`) are normalized first.
+//
+//  ONE deliberate exception, in `containerStyle`: `text`/`link` clear
+//  `minHeight` here so the control hugs its label and sits inline (which is what
+//  makes `asChild` anchors work), while native keeps the size config's value to
+//  preserve the touch target. The 4/8 padding override those variants get is NOT
+//  an exception — native applies exactly the same one, so `text` is a compact
+//  affordance and `ghost` a full-size button without a background on both
+//  platforms. Only the variant COLOR table below is shared between them.
 // ---------------------------------------------------------------------------
 
 type NativeSize = 'small' | 'medium' | 'large';

package/src/button/types.ts

@@ -11,6 +11,14 @@ import type { StyleProp, ViewStyle, TextStyle } from 'react-native';
  *     the set. On native they fall back to a sensible equivalent
  *     (`outline → secondary`, `link → text`, `destructive → primary` tinted with
  *     the negative token) so passing them never crashes a native consumer.
+ *
+ * `text` (and its web alias `link`) is DELIBERATELY not a transparent `ghost`:
+ * it is the compact inline affordance, so it overrides the size config's padding
+ * down to 4/8 on BOTH platforms. `ghost` keeps the full padding — it is a
+ * regular button that happens to have no background. The one geometry that does
+ * differ by platform is `minHeight`: web clears it for `text`/`link` so the
+ * control hugs its label and sits inline, native keeps the size config's value
+ * because a finger needs the target and a cursor does not.
  */
 export type ButtonVariant =
   | 'primary'

package/src/design-tokens/theme.css

@@ -62,6 +62,28 @@
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
+  --color-primary-text: var(--primary-text);
+  --color-primary-subtle: var(--primary-subtle);
+  --color-secondary-text: var(--secondary-text);
+  --color-secondary-subtle: var(--secondary-subtle);
+  --color-tertiary-text: var(--tertiary-text);
+  --color-tertiary-subtle: var(--tertiary-subtle);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-success-text: var(--success-text);
+  --color-success-subtle: var(--success-subtle);
+  --color-error: var(--error);
+  --color-error-foreground: var(--error-foreground);
+  --color-error-text: var(--error-text);
+  --color-error-subtle: var(--error-subtle);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-warning-text: var(--warning-text);
+  --color-warning-subtle: var(--warning-subtle);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+  --color-info-text: var(--info-text);
+  --color-info-subtle: var(--info-subtle);
   --color-destructive-foreground: #ffffff;
   --color-divider: var(--border);
   --spacing-space-2: 2px;

package/src/fab/Fab.tsx

@@ -206,6 +206,9 @@ function resolveVariant(
 ): { background: string; foreground: string } {
   switch (variant) {
     case 'secondary':
+      return { background: colors.secondary, foreground: colors.secondaryForeground };
+    case 'tertiary':
+      return { background: colors.tertiary, foreground: colors.tertiaryForeground };
     case 'surface':
       return { background: colors.card, foreground: colors.text };
     case 'primary':

package/src/fab/Fab.web.tsx

@@ -166,6 +166,9 @@ function resolveVariant(
 ): { background: string; foreground: string; ring: string } {
   switch (variant) {
     case 'secondary':
+      return { background: c.secondary, foreground: c.secondaryForeground, ring: c.secondary };
+    case 'tertiary':
+      return { background: c.tertiary, foreground: c.tertiaryForeground, ring: c.tertiary };
     case 'surface':
       return { background: c.card, foreground: c.text, ring: c.primary };
     case 'primary':

package/src/fab/types.ts

@@ -9,7 +9,12 @@ import type { StyleProp, ViewStyle, TextStyle } from 'react-native';
  *                  A lower-emphasis FAB that still reads as elevated.
  *   - `surface`  — alias of `secondary`, named for Material-style "surface" FABs.
  */
-export type FabVariant = 'primary' | 'secondary' | 'surface';
+/**
+ * M3 defines four FAB colour variants. Bloom previously mapped `secondary` onto
+ * the neutral card surface, so a "secondary FAB" was a grey circle and the
+ * accent trio had no home in the component that most wants one.
+ */
+export type FabVariant = 'primary' | 'secondary' | 'tertiary' | 'surface';
 
 /**
  * FAB size presets, matching Material-ish conventions but in Bloom's scale:

package/src/theme/BloomThemeProvider.tsx

@@ -410,10 +410,13 @@ export function BloomThemeProvider({
   const themeColors = useMemo(
     () =>
       effectiveSeed
-        ? buildThemeFromSeed(effectiveSeed, resolved, undefined, undefined, {
-            secondarySeed: effectiveSecondary,
-            tertiarySeed: effectiveTertiary,
-          })
+        ? buildThemeFromSeed(
+            effectiveSeed,
+            resolved,
+            undefined,
+            undefined,
+            { secondarySeed: effectiveSecondary, tertiarySeed: effectiveTertiary }
+          )
         : buildTheme(colorPreset, resolved, isAdaptive, explicitAccents),
     [
       effectiveSeed,