@oxy.so/bloom 3.5.0 → 4.0.0

package/src/note-editor/types.ts

@@ -0,0 +1,112 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
+
+import type { BloomIconComponent } from '../icons/icon-component';
+
+/**
+ * Where the document stands with its store.
+ *
+ *   `saved`    everything the reader typed is somewhere else too
+ *   `saving`   a write is in flight
+ *   `offline`  the app cannot reach the store and is holding the change
+ *   `error`    a write was REFUSED — the one state that is not going to fix itself
+ *
+ * `offline` and `error` are separate because they ask for different things from
+ * the reader: one is "keep typing", the other is "stop and look".
+ */
+export type NoteSaveState = 'saved' | 'saving' | 'offline' | 'error';
+
+/** The English words the header composes, for an app that is not in English. */
+export interface NoteEditorHeaderLabels {
+  saved?: string;
+  saving?: string;
+  offline?: string;
+  error?: string;
+  /** The word count, given the count. Default ``(n) => `${n} words` ``. */
+  words?: (count: number) => string;
+  /** Names the title input when there is no visible label. Default `"Title"`. */
+  title?: string;
+}
+
+export interface NoteEditorHeaderProps {
+  /** The document's title. Controlled — the app owns the text. */
+  title: string;
+  /** Called with every keystroke of the title. */
+  onTitleChange?: (title: string) => void;
+  /** Drawn in the title's place while it is empty. Default `"Untitled"`. */
+  placeholder?: string;
+  /**
+   * Where the document stands with its store. Omitted, the header draws no
+   * state word at all — which is right for a document that is not backed by
+   * one.
+   */
+  saveState?: NoteSaveState;
+  /** When the document was last written to, PRE-FORMATTED ("Edited 2 min ago"). */
+  edited?: string;
+  /** The body's length in words. The header formats it; the app counts it. */
+  wordCount?: number;
+  /** Stops the title being edited and dims it. */
+  disabled?: boolean;
+  /**
+   * A read-only document: the title is not editable and NOT dimmed, because
+   * nothing is broken — it is a published note, a shared one, a revision.
+   */
+  readOnly?: boolean;
+  /** The trailing slot on the title line — a share button, a menu, a `ButtonGroup`. */
+  actions?: ReactNode;
+  /** Names the header region. Default `"Note"`. */
+  accessibilityLabel?: string;
+  labels?: NoteEditorHeaderLabels;
+  style?: StyleProp<ViewStyle>;
+  /** Overrides the title's own type. The header owns its size; this is for a display face. */
+  titleStyle?: StyleProp<TextStyle>;
+  testID?: string;
+}
+
+/** One formatting action in the toolbar. */
+export interface NoteEditorAction {
+  /** Stable key. Also the menu row's key. */
+  key: string;
+  /** The action in words. Names the icon-only button AND labels the overflow row. */
+  label: string;
+  /** The glyph, imported from its own subpath by the app. */
+  icon: BloomIconComponent;
+  /** Run the action. The editable surface is the app's, so what this does is too. */
+  onPress: () => void;
+  /**
+   * A TOGGLE's state — bold is on, the block is a list. Setting it (even to
+   * `false`) makes the action a toggle: it announces `aria-pressed` and
+   * `accessibilityState.pressed`, and collapses into a CHECKABLE menu row.
+   * Leave it `undefined` for a one-shot action (attach, link).
+   */
+  active?: boolean;
+  disabled?: boolean;
+  /**
+   * Never collapse this one. Bold and the list styles usually earn it; attach
+   * and link usually do not. More `alwaysVisible` actions than the row can hold
+   * will overflow it — the toolbar cannot collapse what it was told to keep.
+   */
+  alwaysVisible?: boolean;
+}
+
+/** The English words the toolbar composes. */
+export interface NoteEditorToolbarLabels {
+  /** Names the overflow button. Default `"More formatting"`. */
+  more?: string;
+  /** Names the overflow menu surface. Default `"More formatting"`. */
+  moreMenu?: string;
+}
+
+export interface NoteEditorToolbarProps {
+  /** The actions, in the order they are drawn. */
+  actions: ReadonlyArray<NoteEditorAction>;
+  /** The `ButtonGroup` rung. Default `medium` (34px items); `small` is 30. */
+  size?: 'medium' | 'small';
+  /** Disables every action and the overflow, without each caller writing it per action. */
+  disabled?: boolean;
+  /** Names the toolbar. Required in substance — a row of glyphs has no name of its own. */
+  accessibilityLabel: string;
+  labels?: NoteEditorToolbarLabels;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}

package/src/notification/Notification.tsx

@@ -27,7 +27,7 @@ import type {
 
 /**
  * `Notification`: geometry is fixed to the pixel (see `shared.ts`); colours
- * come from Bloom's theme through the button ramp recipe.
+ * come from Bloom's paired semantic roles.
  *
  * A self-contained card: it owns its dismissal (exit animation, then unmount,
  * then `onDismiss`), its optional auto-dismiss countdown and its optional
@@ -253,12 +253,7 @@ function NotificationComponent({
             }}
           >
             {actions.map((action, index) => (
-              <Button
-                key={index}
-                size="small"
-                variant={action.variant ?? (index === 0 ? 'secondary' : 'primary')}
-                onPress={action.onPress}
-              >
+              <Button key={index} size="sm" appearance={action.appearance ?? (index === 0 ? 'subtle' : 'solid')} tone={action.tone ?? (index === 0 ? 'neutral' : 'accent')} onPress={action.onPress}>
                 {action.label}
               </Button>
             ))}

package/src/notification/shared.ts

@@ -1,10 +1,4 @@
-import {
-  ACCENT_TABLE,
-  DANGER_TABLE,
-  colorRamp,
-  mixColor,
-  resolveButtonRamps,
-} from '../button/shared';
+import { resolveAccentColors } from '../theme/accent-colors';
 import type { Theme } from '../theme/types';
 import type { NotificationPresence, NotificationStatus } from './types';
 
@@ -73,17 +67,6 @@ export interface NotificationPaint {
   status: Record<NotificationStatus, NotificationStatusPaint>;
 }
 
-/**
- * A tinted status disc: `<hue>-100` behind `<hue>-600` in light mode;
- * `<hue>-800` at 50% over the card behind `<hue>-300` in dark mode.
- */
-function tinted(theme: Theme, color: string, danger: boolean, surface: string): NotificationStatusPaint {
-  const ramp = colorRamp(color, danger ? DANGER_TABLE : ACCENT_TABLE);
-  return theme.isDark
-    ? { background: mixColor(surface, ramp[800], 0.5), foreground: ramp[300] }
-    : { background: ramp[100], foreground: ramp[600] };
-}
-
 /**
  * Every colour the card paints. Pure — takes the theme, so it can be walked over
  * every preset × mode without rendering.
@@ -94,29 +77,22 @@ function tinted(theme: Theme, color: string, danger: boolean, surface: string):
  * text/secondary glyph.
  */
 export function resolveNotificationPaint(theme: Theme): NotificationPaint {
-  const { accent, neutral: n } = resolveButtonRamps(theme);
   const c = theme.colors;
-  const dark = theme.isDark;
-  const surface = dark ? n[800] : c.card;
   return {
-    surface,
-    border: dark ? n[700] : n[200],
-    shadow: NOTIFICATION_SHADOW[dark ? 'dark' : 'light'],
+    surface: c.card,
+    border: c.borderLight,
+    shadow: NOTIFICATION_SHADOW[theme.isDark ? 'dark' : 'light'],
     title: c.text,
-    timestamp: dark ? n[600] : n[400],
-    description: n[500],
-    countdown: accent[600],
-    presence: {
-      online: colorRamp(c.success, ACCENT_TABLE)[500],
-      busy: colorRamp(c.error, DANGER_TABLE)[500],
-      offline: dark ? n[600] : n[400],
-    },
+    timestamp: c.textTertiary,
+    description: c.textSecondary,
+    countdown: c.primary,
+    presence: { online: c.success, busy: c.error, offline: c.textTertiary },
     status: {
-      neutral: { background: dark ? n[800] : n[200], foreground: n[500] },
-      information: tinted(theme, c.info, false, surface),
-      success: tinted(theme, c.success, false, surface),
-      warning: tinted(theme, c.warning, false, surface),
-      error: tinted(theme, c.error, true, surface),
+      neutral: resolveAccentColors(c, 'default', 'subtle'),
+      information: resolveAccentColors(c, 'info', 'subtle'),
+      success: resolveAccentColors(c, 'success', 'subtle'),
+      warning: resolveAccentColors(c, 'warning', 'subtle'),
+      error: resolveAccentColors(c, 'error', 'subtle'),
     },
   };
 }

package/src/notification/types.ts

@@ -2,7 +2,7 @@ import type React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 
 import type { AvatarProps } from '../avatar';
-import type { ButtonVariant } from '../button';
+import type { ButtonProps } from '../button';
 import type { BloomIconComponent } from '../icons/icon-component';
 
 /**
@@ -26,8 +26,9 @@ export type NotificationAvatar = Omit<AvatarProps, 'size'> & {
 export interface NotificationAction {
   label: React.ReactNode;
   onPress?: () => void;
-  /** Defaults to `secondary` for the first action and `primary` after it. */
-  variant?: ButtonVariant;
+  /** Defaults to `subtle` for the first action and `solid` after it. */
+  appearance?: ButtonProps['appearance'];
+  tone?: ButtonProps['tone'];
 }
 
 export interface NotificationProps {

package/src/notification-center/NotificationCenter.tsx

@@ -3,7 +3,7 @@ import { ScrollView, View, type ViewStyle } from 'react-native';
 
 import { Avatar } from '../avatar';
 import { Button } from '../button';
-import { ACCENT_TABLE, colorRamp, DANGER_TABLE, resolveButtonRamps } from '../button/shared';
+import { resolveAccentColors } from '../theme/accent-colors';
 import { MENU_SHADOW } from '../floating/menu-palette';
 import { useControllableState } from '../hooks/use-controllable-state';
 import { RiCheckboxCircleFill } from '../icons/remix/RiCheckboxCircleFill';
@@ -17,8 +17,6 @@ import {
   SegmentedControlItemText,
 } from '../segmented-control';
 import { borderRadius } from '../styles/tokens';
-import { parseRgba, withAlpha } from '../theme/color-utils';
-import { oklchToSrgb, srgbToOklch, srgbToRgbString } from '../theme/color-space';
 import type { Theme } from '../theme/types';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
@@ -93,57 +91,21 @@ interface CenterPalette {
   avatar: Record<NotificationCenterAvatarColor, { background: string; foreground: string }>;
 }
 
-/**
- * Tailwind `pink-500` sits 95.1° of OKLCH hue past `blue-500`; the pink
- * avatar keeps that distance from the theme's accent, so a blue preset gives
- * that pink and any other preset rotates with it.
- */
-const PINK_HUE_OFFSET = 354.308 - 259.815;
-
-function rotateHue(color: string, degrees: number): string {
-  const rgba = parseRgba(color);
-  if (!rgba) return color;
-  const { l, c, h } = srgbToOklch(rgba);
-  return srgbToRgbString(oklchToSrgb({ l, c, h: (((h + degrees) % 360) + 360) % 360 }));
-}
-
 export function resolveNotificationCenterPalette(theme: Theme): CenterPalette {
-  const { accent, neutral: n } = resolveButtonRamps(theme);
-  const info = colorRamp(theme.colors.info, ACCENT_TABLE);
-  const success = colorRamp(theme.colors.success, ACCENT_TABLE);
-  const error = colorRamp(theme.colors.negative, DANGER_TABLE);
-  const pink = colorRamp(rotateHue(theme.colors.primary, PINK_HUE_OFFSET), ACCENT_TABLE);
-  const dark = theme.isDark;
-  const disc = (ramp: typeof info) =>
-    dark
-      ? { background: withAlpha(ramp[800], 0.5), foreground: ramp[300] }
-      : { background: ramp[100], foreground: ramp[600] };
+  const c = theme.colors;
+  const pair = (tone: 'primary' | 'info' | 'success' | 'error' | 'tertiary') => {
+    const { background, foreground } = resolveAccentColors(c, tone, 'subtle');
+    return { background, foreground };
+  };
+  const neutral = { background: c.backgroundTertiary, foreground: c.textSecondary };
   return {
-    section: dark ? n[900] : theme.colors.card,
-    border: dark ? n[700] : n[200],
-    shadow: dark ? MENU_SHADOW.dark : MENU_SHADOW.light,
-    well: dark ? n[900] : n[100],
-    card: dark ? n[800] : theme.colors.card,
-    text: theme.colors.text,
-    textSecondary: n[500],
-    textTertiary: dark ? n[600] : n[400],
-    icon: n[500],
-    countBackground: dark ? n[800] : n[200],
-    unread: accent[500],
-    status: {
-      neutral: { background: dark ? n[800] : n[200], foreground: n[500] },
-      information: disc(info),
-      success: disc(success),
-      error: disc(error),
-    },
-    // Avatar tints: neutral bg avatar-neutral (300 / primary surface),
-    // blue 300/900, lime 200/700, pink 200/500.
-    avatar: {
-      neutral: { background: dark ? n[800] : n[300], foreground: n[500] },
-      blue: { background: accent[300], foreground: accent[900] },
-      lime: { background: success[200], foreground: success[700] },
-      pink: { background: pink[200], foreground: pink[500] },
-    },
+    section: c.backgroundSecondary, border: c.border,
+    shadow: theme.isDark ? MENU_SHADOW.dark : MENU_SHADOW.light,
+    well: c.backgroundSecondary, card: c.card, text: c.text,
+    textSecondary: c.textSecondary, textTertiary: c.textTertiary, icon: c.textSecondary,
+    countBackground: c.backgroundTertiary, unread: c.primary,
+    status: { neutral, information: pair('info'), success: pair('success'), error: pair('error') },
+    avatar: { neutral, blue: pair('primary'), lime: pair('success'), pink: pair('tertiary') },
   };
 }
 
@@ -303,7 +265,7 @@ const NotificationCenterComponent: React.FC<NotificationCenterProps> = ({
               {unreadCount === 0 ? 'No unread notifications' : `${unreadCount} unread`}
             </Text>
           </View>
-          <Button variant="ghost" size="small" onPress={markAllRead} disabled={unreadCount === 0}>
+          <Button size="sm" onPress={markAllRead} disabled={unreadCount === 0} appearance="subtle" tone="accent">
             Mark all read
           </Button>
         </View>
@@ -312,7 +274,7 @@ const NotificationCenterComponent: React.FC<NotificationCenterProps> = ({
           label="Notification category"
           type="tabs"
           value={activeTab}
-          onChange={setTab}
+          onValueChange={setTab}
           style={{ alignSelf: 'stretch', width: '100%' }}
         >
           {TABS.map(({ id, label }) => (
@@ -427,15 +389,10 @@ const NotificationCenterComponent: React.FC<NotificationCenterProps> = ({
                             }}
                           >
                             {item.actions.map((action) => (
-                              <Button
-                                key={action.id}
-                                size="small"
-                                variant={action.variant ?? 'secondary'}
-                                onPress={() => {
+                              <Button key={action.id} size="sm" appearance={action.appearance ?? 'subtle'} tone={action.tone ?? 'neutral'} onPress={() => {
                                   setReadIds((current) => new Set(current).add(item.id));
                                   onAction?.(item.id, action.id);
-                                }}
-                              >
+                                }}>
                                 {action.label}
                               </Button>
                             ))}

package/src/notification-center/types.ts

@@ -1,7 +1,7 @@
 import type { ComponentType } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 
-import type { ButtonVariant } from '../button/types';
+import type { ButtonProps } from '../button/types';
 import type { BloomIconComponent } from '../icons/icon-component';
 
 export type NotificationCenterTab = 'all' | 'mentions' | 'system';
@@ -32,8 +32,9 @@ export interface NotificationCenterAvatar {
 export interface NotificationCenterAction {
   id: string;
   label: string;
-  /** Any `Button` variant. Defaults to `secondary`. */
-  variant?: ButtonVariant;
+  /** Any `Button` appearance. Defaults to `subtle`. */
+  appearance?: ButtonProps['appearance'];
+  tone?: ButtonProps['tone'];
 }
 
 export interface NotificationCenterItem {

package/src/order-status/OrderStatusBar.tsx

@@ -0,0 +1,198 @@
+import React, { memo, useMemo } from 'react';
+import { View } from 'react-native';
+
+import { Meter } from '../stat-bar';
+import {
+  SurfaceLevelProvider,
+  surfaceFillVars,
+  useSurfaceLevel,
+  useSurfaceLevelValue,
+  type SurfaceLevel,
+} from '../styles/surface-levels';
+import { resolveAccentColors } from '../theme/accent-colors';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import {
+  ORDER_STATUS_BAR_GLYPH,
+  ORDER_STATUS_BAR_METER_HEIGHT,
+  ORDER_STATUS_BAR_PADDING,
+  ORDER_STATUS_BAR_TILE,
+} from './constants';
+import { resolveOrderStatusPaint } from './shared';
+import type { OrderStatusBarProps } from './types';
+
+/**
+ * The compact live strip: where the thing is RIGHT NOW, when it arrives, how
+ * far along it is, and one action.
+ *
+ * It is the companion of `OrderStatusTimeline` and not a shorter version of it:
+ * a timeline answers "what is the whole journey", this answers "what is
+ * happening" and is what a card, a header or a sticky footer carries while the
+ * journey is in progress.
+ *
+ *   tile     40 round, the tone's tint, a 20 glyph in the tone's own accent
+ *   status   headline-semibold, one line; `eta` body-medium in TABULAR figures
+ *            at the end of the same line so a counting-down reading does not
+ *            jitter the layout
+ *   detail   body-2-regular, secondary, under the status
+ *   meter    6 tall, full width, 12 under the row — `Meter`, never a hand-rolled
+ *            track, so the one progressbar contract applies here too
+ *   surface  one rung above whatever it was dropped on, 16 radius, a hairline;
+ *            `variant="plain"` draws the content and no chrome, for a strip
+ *            that is already inside a card that paints
+ *
+ * Nothing here computes an ETA or a percentage: `eta` is a string the app
+ * formatted and `progress` is a value it measured.
+ */
+function OrderStatusBarComponent({
+  status,
+  eta,
+  detail,
+  progress,
+  tone = 'primary',
+  icon: Icon,
+  leading,
+  action,
+  variant = 'surface',
+  style,
+  testID,
+}: OrderStatusBarProps) {
+  const theme = useTheme();
+  const level = useSurfaceLevelValue();
+  const own = useSurfaceLevel(variant === 'surface' ? 1 : 0);
+  const paint = useMemo(
+    () => resolveOrderStatusPaint(theme, own.background),
+    [theme, own.background],
+  );
+  const accent = resolveAccentColors(theme.colors, tone, 'subtle');
+  const fill = resolveAccentColors(theme.colors, tone, 'solid').background;
+
+  const tile =
+    leading ??
+    (Icon ? (
+      <View
+        testID={testID ? `${testID}-tile` : undefined}
+        style={{
+          width: ORDER_STATUS_BAR_TILE,
+          height: ORDER_STATUS_BAR_TILE,
+          borderRadius: ORDER_STATUS_BAR_TILE / 2,
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: accent.background,
+        }}
+      >
+        <Icon width={ORDER_STATUS_BAR_GLYPH} height={ORDER_STATUS_BAR_GLYPH} fill={accent.foreground} />
+      </View>
+    ) : null);
+
+  const body = (
+    <View style={{ gap: progress ? 12 : 0 }}>
+      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
+        {tile}
+        <View style={{ flex: 1, minWidth: 0, gap: 2 }}>
+          {/*
+            `minWidth: 0` on the ROW, not only on the texts inside it. A
+            `numberOfLines={1}` Text is `white-space: nowrap` on web, so its
+            MIN-CONTENT width is the whole string — and a flex row without
+            `min-width: 0` takes its child's min-content as its own floor and
+            pushes the page wider. Measured: the strip forced 396px of content
+            into a 390px viewport, on a card that looked perfectly ordinary.
+          */}
+          <View style={{ flexDirection: 'row', alignItems: 'baseline', gap: 8, minWidth: 0 }}>
+            <Text
+              variant="headline-semibold"
+              numberOfLines={1}
+              testID={testID ? `${testID}-status` : undefined}
+              style={{ flex: 1, minWidth: 0, color: paint.text }}
+            >
+              {status}
+            </Text>
+            {eta ? (
+              <Text
+                variant="body-medium"
+                numberOfLines={1}
+                testID={testID ? `${testID}-eta` : undefined}
+                style={{
+                  // The arrival reading is SHORT ("12 min", "Arrives 14:35"),
+                  // and it never truncates at that length. The cap is there for
+                  // the hostile case: a window ("between 15:00 and 17:00")
+                  // ellipsizes rather than crushing the status beside it down
+                  // to nothing, which is what an uncapped reading did.
+                  maxWidth: '60%',
+                  flexShrink: 1,
+                  // …and `minWidth: 0`, or the reading's MIN-CONTENT (the whole
+                  // nowrap string) becomes the strip's floor. A percentage
+                  // `maxWidth` does not participate in intrinsic sizing, so it
+                  // caps the drawn width and not the width the strip demands:
+                  // without this the whole bar refused to go below ~330px and
+                  // overflowed a 390 phone inside two levels of padding.
+                  minWidth: 0,
+                  color: paint.textSecondary,
+                  fontVariant: ['tabular-nums'],
+                }}
+              >
+                {eta}
+              </Text>
+            ) : null}
+          </View>
+          {detail ? (
+            <Text
+              variant="body-2-regular"
+              numberOfLines={2}
+              testID={testID ? `${testID}-detail` : undefined}
+              style={{ color: paint.textSecondary }}
+            >
+              {detail}
+            </Text>
+          ) : null}
+        </View>
+        {action}
+      </View>
+      {progress ? (
+        <Meter
+          value={progress.value}
+          max={progress.max}
+          height={ORDER_STATUS_BAR_METER_HEIGHT}
+          fill={fill}
+          track={own.raised}
+          accessibilityLabel={progress.accessibilityLabel}
+          valueText={progress.valueText}
+          testID={testID ? `${testID}-meter` : undefined}
+        />
+      ) : null}
+    </View>
+  );
+
+  if (variant === 'plain') {
+    return (
+      <View testID={testID} style={style}>
+        {body}
+      </View>
+    );
+  }
+
+  const raised = Math.min(3, level + 1) as SurfaceLevel;
+  return (
+    <View
+      testID={testID}
+      style={[
+        {
+          padding: ORDER_STATUS_BAR_PADDING,
+          borderRadius: 16,
+          borderWidth: 1,
+          borderColor: own.border,
+          backgroundColor: own.background,
+        },
+        surfaceFillVars(own.background),
+        style,
+      ]}
+    >
+      <SurfaceLevelProvider level={raised} fill={own.background}>
+        {body}
+      </SurfaceLevelProvider>
+    </View>
+  );
+}
+
+export const OrderStatusBar = memo(OrderStatusBarComponent);
+OrderStatusBar.displayName = 'OrderStatusBar';