@oxy.so/bloom 3.6.0 → 4.0.0

package/src/mail-thread/MailQuoteToggle.tsx

@@ -0,0 +1,84 @@
+import React, { useEffect, useMemo } from 'react';
+import { Pressable, View } from 'react-native';
+
+import { useControllableState } from '../hooks/use-controllable-state';
+import { RiMoreLine } from '../icons/remix/RiMoreLine';
+import { resolveMailPaint } from '../mail-list/shared';
+import { adoptStyleSheet } from '../styles/adopt-style-sheet';
+import { useSurfaceFill } from '../styles/surface-levels';
+import { webDataSet } from '../styles/web-data';
+import type { WebCssStyle } from '../styles/web-view-style';
+import { useTheme } from '../theme/use-theme';
+import { MAIL_THREAD_CSS, MAIL_THREAD_STYLE_ID, mailThreadStrings } from './shared';
+import type { MailQuoteToggleProps } from './types';
+
+/**
+ * The "show trimmed content" control, and the place the trimmed content lands.
+ *
+ * THE CONTENT IS THE APP'S AND THE PRESENTATION IS BLOOM'S, which is the whole
+ * division of labour in this family. Where a quote starts, what counts as
+ * trimmed, and how the quoted HTML renders are questions only the app's parser
+ * can answer; what a reader sees while it is hidden is a question every mail
+ * client answers the same way and each one re-solves.
+ *
+ * It draws as a short dotted lozenge rather than as a labelled button
+ * deliberately: it sits at the END of a message's own words, where a second
+ * labelled control would read as a fourth action beside Reply and Forward. It
+ * still carries a full accessible name, and the name FLIPS with the state — a
+ * toggle whose name does not change is a toggle a screen-reader user cannot
+ * tell the state of.
+ */
+export function MailQuoteToggle({
+  expanded,
+  defaultExpanded = false,
+  onExpandedChange,
+  children,
+  strings,
+  style,
+  testID,
+}: MailQuoteToggleProps) {
+  const theme = useTheme();
+  const surface = useSurfaceFill();
+  useEffect(() => {
+    adoptStyleSheet(MAIL_THREAD_STYLE_ID, MAIL_THREAD_CSS);
+  }, []);
+  const paint = useMemo(() => resolveMailPaint(theme, surface), [theme, surface]);
+  const text = useMemo(() => mailThreadStrings(strings), [strings]);
+  const [open, setOpen] = useControllableState<boolean>({
+    value: expanded,
+    defaultValue: defaultExpanded,
+    onChange: onExpandedChange,
+  });
+
+  const buttonStyle: WebCssStyle = {
+    width: 32,
+    height: 20,
+    borderRadius: 6,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: paint.hover,
+    '--bloom-mail-ring': paint.accent,
+  };
+
+  return (
+    <View style={[{ gap: 8, alignItems: 'flex-start' }, style]} testID={testID}>
+      <Pressable
+        {...webDataSet({ bloomMailThreadFocusable: '' })}
+        role="button"
+        accessibilityLabel={open ? text.hideTrimmed : text.showTrimmed}
+        aria-expanded={open}
+        accessibilityState={{ expanded: open }}
+        onPress={() => setOpen(!open)}
+        style={buttonStyle}
+        testID={testID ? `${testID}-button` : undefined}
+      >
+        <RiMoreLine width={16} height={16} fill={paint.textSecondary} />
+      </Pressable>
+      {open ? (
+        <View style={{ width: '100%' }} testID={testID ? `${testID}-content` : undefined}>
+          {children}
+        </View>
+      ) : null}
+    </View>
+  );
+}

package/src/mail-thread/MailThread.tsx

@@ -0,0 +1,193 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { Pressable, View } from 'react-native';
+
+import { Button } from '../button';
+import { Divider } from '../divider';
+import { useControllableState } from '../hooks/use-controllable-state';
+import { MailLabelChips, MailStar } from '../mail-list/parts';
+import { mailStrings, resolveMailPaint, visibleLabels } from '../mail-list/shared';
+import { adoptStyleSheet } from '../styles/adopt-style-sheet';
+import { useSurfaceFill } from '../styles/surface-levels';
+import { webDataSet } from '../styles/web-data';
+import type { WebCssStyle } from '../styles/web-view-style';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import { MailMessage } from './MailMessage';
+import {
+  MAIL_BODY_INSET,
+  MAIL_THREAD_CSS,
+  MAIL_THREAD_GEOMETRY,
+  MAIL_THREAD_STYLE_ID,
+  collapseThread,
+  defaultExpandedIds,
+  mailThreadStrings,
+} from './shared';
+import type { MailThreadProps } from './types';
+
+/**
+ * One conversation: the subject, the stack of messages, and the quick reply.
+ *
+ * THE NEWEST MESSAGE IS OPEN AND THE REST ARE CLOSED. That is the arrangement
+ * a reader arriving at a thread wants every time, so it is the default rather
+ * than a prop the app has to remember; `expandedIds` takes it over when the app
+ * has its own idea (a deep link to one message, "expand all").
+ *
+ * THE MIDDLE FOLDS, NOT THE TAIL. A long thread hides everything between the
+ * first message and the last two behind one "N earlier messages" control: the
+ * message that started the conversation and the two that are the conversation
+ * NOW are the three a reader needs, and folding from the top instead would hide
+ * the first, which is the one that says what the thread is about. `collapseAfter`
+ * moves the threshold; `0` turns it off. The arithmetic is pure and lives in
+ * `collapseThread`.
+ *
+ * The quick reply is a SLOT. What a reply box is — a one-line field, a row of
+ * suggested replies, a full composer — is an app's decision, and a thread that
+ * shipped one of them would be wrong in the other two apps.
+ */
+export function MailThread({
+  subject,
+  labels,
+  starred = false,
+  onStarredChange,
+  messages,
+  expandedIds,
+  onExpandedIdsChange,
+  collapseAfter = 4,
+  quickReply,
+  header,
+  strings,
+  accessibilityLabel,
+  style,
+  testID,
+}: MailThreadProps) {
+  const theme = useTheme();
+  const surface = useSurfaceFill();
+  useEffect(() => {
+    adoptStyleSheet(MAIL_THREAD_STYLE_ID, MAIL_THREAD_CSS);
+  }, []);
+  const paint = useMemo(() => resolveMailPaint(theme, surface), [theme, surface]);
+  const text = useMemo(() => mailThreadStrings(strings), [strings]);
+  const rowStrings = useMemo(
+    () => mailStrings({ starred: text.starred, star: text.star }),
+    [text.star, text.starred],
+  );
+  const geo = MAIL_THREAD_GEOMETRY;
+
+  const [openIds, setOpenIds] = useControllableState<readonly string[]>({
+    value: expandedIds,
+    defaultValue: useMemo(() => defaultExpandedIds(messages), [messages]),
+    onChange: onExpandedIdsChange
+      ? (next: readonly string[]) => onExpandedIdsChange([...next])
+      : undefined,
+  });
+  const open = useMemo(() => new Set(openIds), [openIds]);
+  const [revealed, setRevealed] = useState(false);
+
+  const entries = useMemo(
+    () => collapseThread(messages, revealed ? 0 : collapseAfter),
+    [collapseAfter, messages, revealed],
+  );
+
+  const { shown, overflow } = visibleLabels(labels, 3);
+
+  return (
+    <View
+      accessibilityLabel={accessibilityLabel ?? subject}
+      style={style}
+      testID={testID}
+    >
+      {header}
+      {subject !== undefined || onStarredChange !== undefined ? (
+        <View
+          style={{
+            flexDirection: 'row',
+            alignItems: 'flex-start',
+            gap: 8,
+            paddingTop: geo.paddingVertical,
+            paddingBottom: geo.paddingVertical,
+            paddingLeft: geo.paddingHorizontal,
+            paddingRight: geo.paddingHorizontal,
+          }}
+        >
+          <View style={{ flex: 1, minWidth: 0, gap: 6 }}>
+            {subject === undefined ? null : (
+              <Text
+                variant="title-3-semibold"
+                style={{ color: paint.text }}
+                testID={testID ? `${testID}-subject` : undefined}
+              >
+                {subject}
+              </Text>
+            )}
+            {shown.length > 0 || overflow > 0 ? (
+              <MailLabelChips
+                labels={shown}
+                overflow={overflow}
+                surface={paint.surface}
+                strings={rowStrings}
+                testID={testID ? `${testID}-labels` : undefined}
+              />
+            ) : null}
+          </View>
+          <MailStar
+            starred={starred}
+            onStarredChange={onStarredChange}
+            size={geo.action}
+            glyph={18}
+            paint={paint}
+            strings={rowStrings}
+            testID={testID ? `${testID}-star` : undefined}
+          />
+        </View>
+      ) : null}
+      <Divider />
+      <View style={{ paddingTop: 4, paddingBottom: 4 }}>
+        {entries.map((entry) =>
+          entry.kind === 'message' ? (
+            <MailMessage
+              key={entry.message.id}
+              {...entry.message}
+              strings={entry.message.strings ?? strings}
+              expanded={open.has(entry.message.id)}
+              onExpandedChange={(next) => {
+                const ids = new Set(open);
+                if (next) ids.add(entry.message.id);
+                else ids.delete(entry.message.id);
+                setOpenIds([...ids]);
+              }}
+              testID={testID ? `${testID}-message-${entry.message.id}` : undefined}
+            />
+          ) : (
+            // The fold is a CONTROL, so it is Bloom's control: a hand-drawn
+            // pill here was a shape the library does not otherwise use, and it
+            // carried its own focus ring, its own fill and its own hover.
+            <Button
+              key="earlier"
+              variant="secondary"
+              size="small"
+              onPress={() => setRevealed(true)}
+              accessibilityLabel={text.earlierMessages(entry.count)}
+              style={{ alignSelf: 'flex-start', marginLeft: MAIL_BODY_INSET }}
+              testID={testID ? `${testID}-earlier` : undefined}
+            >
+              {text.earlierMessages(entry.count)}
+            </Button>
+          ),
+        )}
+      </View>
+      {quickReply === undefined ? null : (
+        <View
+          style={{
+            paddingTop: geo.paddingVertical,
+            paddingBottom: geo.paddingVertical,
+            paddingLeft: geo.paddingHorizontal,
+            paddingRight: geo.paddingHorizontal,
+          }}
+          testID={testID ? `${testID}-quick-reply` : undefined}
+        >
+          {quickReply}
+        </View>
+      )}
+    </View>
+  );
+}

package/src/mail-thread/index.ts

@@ -0,0 +1,27 @@
+export { MailAddressLine } from './MailAddressLine';
+export { MailMessage } from './MailMessage';
+export { MailQuoteToggle } from './MailQuoteToggle';
+export { MailThread } from './MailThread';
+export {
+  DEFAULT_MAIL_THREAD_STRINGS,
+  MAIL_BODY_INSET,
+  MAIL_REPLY_LABELS_FROM,
+  MAIL_THREAD_GEOMETRY,
+  addressName,
+  collapseThread,
+  defaultExpandedIds,
+  mailThreadStrings,
+  replyLabelsFit,
+  visibleAddresses,
+} from './shared';
+export type { MailThreadEntry } from './shared';
+export type {
+  MailAddress,
+  MailAddressLineProps,
+  MailMessageProps,
+  MailQuoteToggleProps,
+  MailThreadAttachment,
+  MailThreadMessage,
+  MailThreadProps,
+  MailThreadStrings,
+} from './types';

package/src/mail-thread/shared.ts

@@ -0,0 +1,179 @@
+import { Platform } from 'react-native';
+
+import type { MailThreadMessage, MailAddress, MailThreadStrings } from './types';
+
+export const IS_WEB = Platform.OS === 'web';
+
+// ---------------------------------------------------------------------------
+//  Geometry
+//
+//  One table, so the collapsed and the expanded message keep the SAME outer
+//  padding and the SAME leading column. A transition between two states that
+//  each chose their own padding is the gap the expansion appears to leave.
+// ---------------------------------------------------------------------------
+
+/**
+ * The width a message needs before its reply actions keep their words. Under
+ * it the group is glyphs, named by `accessibilityLabel` — measured at 390,
+ * where three labelled actions ran past the card's own edge.
+ */
+export const MAIL_REPLY_LABELS_FROM = 320;
+
+/**
+ * Whether a message this wide keeps the WORDS on its reply actions. `null` is
+ * the frame before the first layout, and it keeps them: a group that started
+ * as glyphs and grew labels flickers on every mount, where one that starts with
+ * labels and drops them only ever does so on a narrow screen, once.
+ */
+export function replyLabelsFit(width: number | null): boolean {
+  return width === null || width >= MAIL_REPLY_LABELS_FROM;
+}
+
+export const MAIL_THREAD_GEOMETRY = {
+  /** The message's own horizontal padding. */
+  paddingHorizontal: 16,
+  /** The header row's vertical padding, identical in both states. */
+  paddingVertical: 12,
+  /** The avatar in the leading column. */
+  avatar: 32,
+  /** Avatar → text column. */
+  gap: 12,
+  /** The inline glyphs — paperclip, chevron. */
+  glyph: 16,
+  /** The star and the overflow trigger. A touch target, so 44. */
+  action: 44,
+  /** Radius of a message's own surface. */
+  radius: 12,
+} as const;
+
+/**
+ * How far the BODY is indented, so it starts under the sender's name rather
+ * than under the avatar. Derived, never written twice.
+ */
+export const MAIL_BODY_INSET =
+  MAIL_THREAD_GEOMETRY.paddingHorizontal +
+  MAIL_THREAD_GEOMETRY.avatar +
+  MAIL_THREAD_GEOMETRY.gap;
+
+// ---------------------------------------------------------------------------
+//  Strings
+// ---------------------------------------------------------------------------
+
+export const DEFAULT_MAIL_THREAD_STRINGS: MailThreadStrings = {
+  to: 'To',
+  cc: 'Cc',
+  bcc: 'Bcc',
+  reply: 'Reply',
+  replyAll: 'Reply all',
+  forward: 'Forward',
+  more: 'More',
+  moreAddresses: (count) => `${count} more`,
+  earlierMessages: (count) => (count === 1 ? '1 earlier message' : `${count} earlier messages`),
+  showTrimmed: 'Show trimmed content',
+  hideTrimmed: 'Hide trimmed content',
+  unread: 'Unread',
+  starred: 'Starred',
+  star: 'Star',
+  attachments: 'Attachments',
+  attachmentCount: (count) => (count === 1 ? '1 attachment' : `${count} attachments`),
+  expand: 'Expand message',
+  collapse: 'Collapse message',
+};
+
+export function mailThreadStrings(overrides?: Partial<MailThreadStrings>): MailThreadStrings {
+  return overrides === undefined
+    ? DEFAULT_MAIL_THREAD_STRINGS
+    : { ...DEFAULT_MAIL_THREAD_STRINGS, ...overrides };
+}
+
+// ---------------------------------------------------------------------------
+//  Pure logic
+// ---------------------------------------------------------------------------
+
+/** What a header line calls one person: their name, or the address itself. */
+export function addressName(address: MailAddress): string {
+  return address.name !== undefined && address.name.length > 0 ? address.name : address.address;
+}
+
+/**
+ * The names an address line draws, and how many it swallowed.
+ *
+ * `max` counts NAMES, not chips — the "+N more" is a control beside them, so
+ * three of five shows three names and a "+2". Pure.
+ */
+export function visibleAddresses(
+  addresses: readonly MailAddress[],
+  max: number,
+): { shown: readonly MailAddress[]; overflow: number } {
+  if (max <= 0 || addresses.length <= max) return { shown: addresses, overflow: 0 };
+  return { shown: addresses.slice(0, max), overflow: addresses.length - max };
+}
+
+/** One entry of the stack a thread draws. */
+export type MailThreadEntry =
+  | { kind: 'message'; message: MailThreadMessage }
+  | { kind: 'collapsed'; count: number; ids: readonly string[] };
+
+/**
+ * The stack, with the MIDDLE folded behind one "N earlier messages" button.
+ *
+ * The first message is the one that started the conversation and the last two
+ * are what it is about now, so those three are always drawn; everything between
+ * them folds. Below the threshold nothing folds at all — a button hiding one
+ * message costs a press and saves a row.
+ *
+ * `collapseAfter` is the number of messages above which the fold appears, and
+ * `0` disables it. Pure, and it never reorders: the entries come back in the
+ * input's order, which is the order a thread is read in.
+ */
+export function collapseThread(
+  messages: readonly MailThreadMessage[],
+  collapseAfter: number,
+): MailThreadEntry[] {
+  const KEPT_HEAD = 1;
+  const KEPT_TAIL = 2;
+  if (collapseAfter <= 0 || messages.length <= Math.max(collapseAfter, KEPT_HEAD + KEPT_TAIL + 1)) {
+    return messages.map((message) => ({ kind: 'message', message }));
+  }
+  const hidden = messages.slice(KEPT_HEAD, messages.length - KEPT_TAIL);
+  return [
+    { kind: 'message' as const, message: messages[0] as MailThreadMessage },
+    { kind: 'collapsed' as const, count: hidden.length, ids: hidden.map((m) => m.id) },
+    ...messages.slice(messages.length - KEPT_TAIL).map((message) => ({
+      kind: 'message' as const,
+      message,
+    })),
+  ];
+}
+
+/**
+ * Which messages are open when the app has not said.
+ *
+ * The NEWEST, and only the newest. A thread that opened everything would make
+ * the reader scroll past what they have already read to reach what they have
+ * not; one that opened nothing would make every arrival a press. Pure.
+ */
+export function defaultExpandedIds(messages: readonly MailThreadMessage[]): string[] {
+  const last = messages[messages.length - 1];
+  return last === undefined ? [] : [last.id];
+}
+
+// ---------------------------------------------------------------------------
+//  Web stylesheet — the focus ring the message headers and the toggles share.
+// ---------------------------------------------------------------------------
+
+export const MAIL_THREAD_STYLE_ID = 'bloom-mail-thread-web-css';
+
+const FOCUSABLE = '[data-bloom-mail-thread-focusable]';
+
+export const MAIL_THREAD_CSS = `
+${FOCUSABLE} {
+  outline: none;
+  cursor: pointer;
+  user-select: none;
+}
+${FOCUSABLE}:focus-visible {
+  outline: 2px solid var(--bloom-mail-ring, currentColor);
+  outline-offset: -2px;
+}
+`;

package/src/mail-thread/types.ts

@@ -0,0 +1,164 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+import type { BloomIconComponent } from '../icons/icon-component';
+import type { MailLabel } from '../mail-list/types';
+
+/** One person on a message, as a header line draws them. */
+export interface MailAddress {
+  /** The display name. With none, the address itself is drawn. */
+  name?: string;
+  address: string;
+  /** An avatar URL, or an id the `ImageResolver` knows. */
+  avatar?: string;
+}
+
+/**
+ * A file that ARRIVED with a message. Deliberately not the composer's
+ * attachment type: this one has a size and a download and no upload progress,
+ * and the composer's has progress and a remove and no size.
+ */
+export interface MailThreadAttachment {
+  id: string;
+  name: string;
+  /** Already formatted by the app — "248 KB". This family never formats bytes. */
+  size?: string;
+  /** Defaults to a document glyph. */
+  icon?: BloomIconComponent;
+  onPress?: () => void;
+}
+
+/** Every string this family draws that is not app data. */
+export interface MailThreadStrings {
+  to: string;
+  cc: string;
+  bcc: string;
+  reply: string;
+  replyAll: string;
+  forward: string;
+  /** The per-message overflow trigger's name, when `menu` is given. */
+  more: string;
+  /** `(3) => '3 more'` — the address-line overflow. */
+  moreAddresses: (count: number) => string;
+  /** `(4) => '4 earlier messages'` — the middle collapse. */
+  earlierMessages: (count: number) => string;
+  /** The trimmed-content toggle, in both directions. */
+  showTrimmed: string;
+  hideTrimmed: string;
+  /** Announced on a message that has not been read. */
+  unread: string;
+  /** The star, in both directions. */
+  starred: string;
+  star: string;
+  /** Names the attachment row. */
+  attachments: string;
+  /** `(2) => '2 attachments'` — the collapsed row's attachment marker. */
+  attachmentCount: (count: number) => string;
+  /** Prefixes the expand/collapse control's name. */
+  expand: string;
+  collapse: string;
+}
+
+export interface MailMessageProps {
+  sender: MailAddress;
+  to?: readonly MailAddress[];
+  cc?: readonly MailAddress[];
+  /** The full date, drawn in the expanded header. Already formatted. */
+  date?: string;
+  /** The short time, drawn on the collapsed row. Already formatted. */
+  time?: string;
+  /** The one line a collapsed message shows. */
+  preview?: string;
+  /** Controlled. With neither this nor `defaultExpanded` the message is closed. */
+  expanded?: boolean;
+  defaultExpanded?: boolean;
+  onExpandedChange?: (expanded: boolean) => void;
+  unread?: boolean;
+  starred?: boolean;
+  onStarredChange?: (starred: boolean) => void;
+  attachments?: readonly MailThreadAttachment[];
+  /**
+   * THE BODY. A slot, and only a slot: this family does not render HTML, rich
+   * text or a sanitizer, because a mail body is the one thing in the domain
+   * that is entirely the app's problem.
+   */
+  children?: ReactNode;
+  /**
+   * The quoted or trimmed tail of the body, behind the "show trimmed content"
+   * toggle. The CONTENT is the app's; the toggle's presentation is this
+   * family's.
+   */
+  trimmed?: ReactNode;
+  onReply?: () => void;
+  onReplyAll?: () => void;
+  onForward?: () => void;
+  /** A slot for the per-message overflow — a `DropdownMenu`, usually. */
+  menu?: ReactNode;
+  strings?: Partial<MailThreadStrings>;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+/** One message, as a thread holds it. */
+export interface MailThreadMessage
+  extends Omit<
+    MailMessageProps,
+    'expanded' | 'onExpandedChange' | 'defaultExpanded' | 'testID' | 'style'
+  > {
+  id: string;
+}
+
+export interface MailThreadProps {
+  /** The conversation's subject, drawn once above the stack. */
+  subject?: string;
+  /** The thread's labels, beside the subject. */
+  labels?: readonly MailLabel[];
+  starred?: boolean;
+  onStarredChange?: (starred: boolean) => void;
+  messages: readonly MailThreadMessage[];
+  /**
+   * Which messages are open. Uncontrolled, the NEWEST is open and the rest are
+   * closed — the one arrangement that is right on arrival every time.
+   */
+  expandedIds?: readonly string[];
+  onExpandedIdsChange?: (ids: string[]) => void;
+  /**
+   * How many messages stay visible before the MIDDLE collapses behind an
+   * "N earlier messages" button. The first and the last two are always drawn.
+   * Default 4; `0` never collapses.
+   */
+  collapseAfter?: number;
+  /** A slot under the stack — the quick-reply box, or a row of reply buttons. */
+  quickReply?: ReactNode;
+  /** A slot above the subject — a back button, the mailbox chrome. */
+  header?: ReactNode;
+  strings?: Partial<MailThreadStrings>;
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+export interface MailAddressLineProps {
+  /** "To", "Cc". */
+  label: string;
+  addresses: readonly MailAddress[];
+  /** How many names before the rest collapse into a "+N more". Default 3. */
+  maxVisible?: number;
+  /** Controlled overflow. Uncontrolled, pressing "+N more" opens it. */
+  expanded?: boolean;
+  onExpandedChange?: (expanded: boolean) => void;
+  strings?: Partial<MailThreadStrings>;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+export interface MailQuoteToggleProps {
+  expanded?: boolean;
+  defaultExpanded?: boolean;
+  onExpandedChange?: (expanded: boolean) => void;
+  /** The trimmed content. Rendered only while open. */
+  children?: ReactNode;
+  strings?: Partial<MailThreadStrings>;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}

package/src/map-marker/shared.ts

@@ -58,7 +58,7 @@ export const AREA_BORDER_WIDTH = 1.5;
 /** Pure, so it can be walked over presets and modes. */
 export function resolveMapMarkerPaint(theme: Theme): MapMarkerPaint {
   const menu = resolveMenuPalette(theme);
-  const { accent, neutral: n } = resolveButtonRamps(theme);
+  const { accent } = resolveButtonRamps(theme);
   // `error`, not `negative` — the same red as the listing card's heart: dark
   // mode's `negative` is a pale tint for text and reads salmon on a pill.
   const red = colorRamp(theme.colors.error, DANGER_TABLE);
@@ -69,15 +69,15 @@ export function resolveMapMarkerPaint(theme: Theme): MapMarkerPaint {
     hoverBorder: menu.trigger.hoverBorder,
     hoverSurface: menu.trigger.hoverBackground,
     label: menu.text,
-    labelSecondary: dark ? n[400] : n[500],
+    labelSecondary: theme.colors.textSecondary,
     activeFill: theme.colors.text,
-    activeLabel: dark ? n[900] : theme.colors.card,
-    visitedFill: dark ? n[900] : n[100],
-    visitedBorder: dark ? n[700] : n[200],
-    visitedLabel: dark ? n[400] : n[500],
+    activeLabel: theme.colors.background,
+    visitedFill: theme.colors.backgroundSecondary,
+    visitedBorder: theme.colors.border,
+    visitedLabel: theme.colors.textSecondary,
     heart: red[500],
     activeHeart: dark ? red[700] : red[400],
-    placeholder: dark ? n[700] : n[100],
+    placeholder: theme.colors.backgroundTertiary,
     ring: accent[500],
     area: dark ? accent[400] : accent[500],
   };