@multiplatform.one/components 7.8.0 → 7.11.0

package/src/layouts/timeline.tsx

@@ -578,7 +578,7 @@ export function Timeline({
       opacity={0.5}
     >
       <ClockIcon size={emptyIconSize} />
-      <Text color={componentColors.text.muted} fontSize={compact ? "$2" : sz} marginTop="$2">
+      <Text color={knobProps.textAccentColor} fontSize={compact ? "$2" : sz} marginTop="$2">
         {noActivityLabel}
       </Text>
     </YStack>
@@ -626,7 +626,7 @@ export function Timeline({
     <YStack gap="$1" marginTop="$1">
       {changes.slice(0, 5).map((change) => (
         <XStack key={change.field} gap="$2" flexWrap="wrap">
-          <Text fontSize="$1" color={componentColors.text.muted} fontWeight="400">
+          <Text fontSize="$1" color={knobProps.textAccentColor} fontWeight="400">
             {change.fieldLabel || change.field}:
           </Text>
           {change.old !== undefined && (
@@ -639,7 +639,7 @@ export function Timeline({
             </Text>
           )}
           {change.old !== undefined && change.new !== undefined && (
-            <Text fontSize="$1" color={componentColors.text.muted}>
+            <Text fontSize="$1" color={knobProps.textAccentColor}>
               {"→"}
             </Text>
           )}
@@ -651,7 +651,7 @@ export function Timeline({
         </XStack>
       ))}
       {changes.length > 5 && (
-        <Text fontSize="$1" color={componentColors.text.muted} fontStyle="italic">
+        <Text fontSize="$1" color={knobProps.textAccentColor} fontStyle="italic">
           +{changes.length - 5} more changes
         </Text>
       )}
@@ -996,7 +996,7 @@ export function Timeline({
           {/* Entry count hides on error so the badge can't lie (DG-ST-04).
               Bidi-isolated so RTL contexts keep "7 entries" in one run. */}
           {entries.length > 0 && !hasError && (
-            <Text fontSize="$2" color={componentColors.text.muted}>
+            <Text fontSize="$2" color={knobProps.textAccentColor}>
               {bidiIsolate(`${entries.length} ${entries.length === 1 ? entryLabel : entriesLabel}`)}
             </Text>
           )}

package/src/surfaces.spec.tsx

@@ -1,10 +1,19 @@
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { Preset } from "@multiplatform.one/theme";
-import { cleanup } from "@testing-library/react";
+import { Preset, type Knobs } from "@multiplatform.one/theme";
+import { defaultConfig } from "@tamagui/config/v5";
+import { cleanup, render } from "@testing-library/react";
 import { readFileSync } from "node:fs";
 import { dirname, join } from "node:path";
 import { fileURLToPath } from "node:url";
-import { Card as TamaguiCard, Dialog, Popover, Sheet } from "tamagui";
+import {
+  AlertDialog,
+  Card as TamaguiCard,
+  createTamagui,
+  Dialog,
+  Popover,
+  Sheet,
+  TamaguiProvider,
+} from "tamagui";
 import { afterEach, describe, expect, it } from "vitest";
 import { Button } from "./Button";
 import * as pkg from "./index";
@@ -183,3 +192,88 @@ describe("DialogContent paints the OVERLAY elevation stop, not the control one (
     );
   });
 });
+
+// ── Overlay child-clip cap (MPO-150) ─────────────────────────────────────
+//
+// Axiom 1 CLIP files "children positioned toward the corners (Card, Panel,
+// Dialog)" under R-SCALE + clip cap: radius rides the scale, capped by the
+// container's own padding. R-SCALE is the immunity axis, CONTAINER-CAP the
+// resolution axis (Part 2 § Radius) — the Part 3 row naming only R-SCALE is
+// not a second ruling. `elevatedSurface` carries the UNCAPPED scale token,
+// so each padded overlay must spread `containerRadius` AFTER it; four did
+// and PopoverContent did not, rendering a 50px corner on an 18px inset.
+
+const overlayCapConfig = createTamagui(defaultConfig);
+
+const overlayCapCorners = [
+  "borderTopLeftRadius",
+  "borderTopRightRadius",
+  "borderBottomRightRadius",
+  "borderBottomLeftRadius",
+] as const;
+
+describe("overlay containers take the Axiom 1 child-clip cap (MPO-150)", () => {
+  afterEach(cleanup);
+
+  it("PopoverContent spreads containerRadius after elevatedSurface, as its four siblings do", () => {
+    const src = readFileSync(join(dirname(fileURLToPath(import.meta.url)), "surfaces.tsx"), "utf8");
+    const popover = src.slice(src.indexOf("// ── PopoverContent"), src.indexOf("// ── SheetFrame"));
+    const elevated = popover.indexOf("knobProps.elevatedSurface");
+    const capped = popover.indexOf("knobProps.containerRadius");
+    expect(elevated, "PopoverContent binds elevatedSurface").toBeGreaterThan(-1);
+    expect(capped, "PopoverContent binds containerRadius").toBeGreaterThan(-1);
+    expect(capped, "the cap must spread AFTER the uncapped scale token").toBeGreaterThan(elevated);
+  });
+
+  for (const [borderRadius, stop] of Object.entries({ medium: 9, large: 16, full: 50 })) {
+    for (const [space, inset] of Object.entries({ small: 13, medium: 18, large: 32 })) {
+      const capped = Math.min(stop, inset);
+      it(`caps every overlay frame at ${capped}px for borderRadius=${borderRadius}/space=${space}`, () => {
+        render(
+          <TamaguiProvider config={overlayCapConfig} defaultTheme="light">
+            <Preset
+              overrides={{
+                borderRadius: borderRadius as Knobs["borderRadius"],
+                space: space as Knobs["space"],
+                density: "comfortable",
+              }}
+            >
+              <Dialog modal open>
+                <Dialog.Portal>
+                  <DialogContent testID="cap-dialog">dialog</DialogContent>
+                </Dialog.Portal>
+              </Dialog>
+              <AlertDialog modal open>
+                <AlertDialog.Portal>
+                  <AlertDialogContent testID="cap-alertdialog">alert</AlertDialogContent>
+                </AlertDialog.Portal>
+              </AlertDialog>
+              <Popover open>
+                <PopoverContent testID="cap-popover">popover</PopoverContent>
+              </Popover>
+              <Sheet open>
+                <SheetFrame testID="cap-sheet">sheet</SheetFrame>
+              </Sheet>
+              <Panel testID="cap-panel">panel</Panel>
+            </Preset>
+          </TamaguiProvider>,
+        );
+
+        for (const id of [
+          "cap-dialog",
+          "cap-alertdialog",
+          "cap-popover",
+          "cap-sheet",
+          "cap-panel",
+        ]) {
+          const frame = document.querySelector(`[data-testid="${id}"]`);
+          expect(frame, `${id} frame`).toBeTruthy();
+          const style = getComputedStyle(frame as Element);
+          for (const corner of overlayCapCorners) {
+            expect(style[corner], `${id} ${corner}`).toBe(`${capped}px`);
+          }
+        }
+      });
+    }
+  }
+});

package/src/surfaces.tsx

@@ -267,8 +267,9 @@ export const AlertDialogOverlay = forwardRef<
 // content, start-aligned to their anchor with the shared gap (the caller's
 // tamagui <Popover offset={OVERLAY_ANCHOR_GAP}>), flipping/shifting at
 // viewport edges. This frame is the overlay's single surface owner —
-// border + radius come only from the elevatedSurface recipe here; children
-// must not draw their own outer border.
+// border comes from the elevatedSurface recipe and radius from the
+// containerRadius cap spread over it; children must not draw their own
+// outer border.
 
 export const PopoverContent = forwardRef<TamaguiElement, ViewProps & { children?: ReactNode }>(
   function PopoverContent({ children, ...props }, ref) {
@@ -277,6 +278,7 @@ export const PopoverContent = forwardRef<TamaguiElement, ViewProps & { children?
       <Popover.Content
         ref={ref}
         {...knobProps.elevatedSurface}
+        {...knobProps.containerRadius}
         transition={knobProps.transition}
         enterStyle={overlayEnterExit}
         exitStyle={overlayEnterExit}

package/src/textAccentSecondary.spec.tsx

@@ -0,0 +1,187 @@
+/**
+ * MPO-154 — `textAccent` reaches SECONDARY text, not just body text.
+ *
+ * The `secondary` / `muted` keys on componentColors' text table were a static
+ * `$color11` read straight into the `color` prop, so every helper, caption and
+ * inactive label rendered the same ink at `low`, `medium` and `high`. The resolver
+ * already answers this: `knobProps.textAccentColor` is `$color11` at the two
+ * dim stops (the AA legibility floor) and `$color` at `high`.
+ *
+ * Measurement follows the Text.spec.tsx discipline: read the TEXT NODE's
+ * `_col-` atomic class, compare between knob stops by identity, never against
+ * a hashed literal. Meter publishes its resolved value ink on
+ * `data-meter-value-color`, so that surface asserts the token directly.
+ *
+ * Both schemes are covered because `textAccent` is scheme-independent by
+ * construction — the tokens are theme-relative — and a regression that
+ * re-pins one scheme would show up here.
+ */
+import { cleanup, screen } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Preset } from "@multiplatform.one/theme";
+import type { ReactElement } from "react";
+import { Theme } from "tamagui";
+import { afterEach, describe, expect, it } from "vitest";
+import { Accordion } from "./Accordion";
+import { componentColors } from "./componentColors";
+import { Meter } from "./Meter";
+import { Quote } from "./Quote";
+import { Tabs } from "./Tabs";
+
+afterEach(cleanup);
+
+type Accent = "low" | "medium" | "high";
+type Scheme = "light" | "dark";
+
+function inScheme(scheme: Scheme, node: ReactElement): ReactElement {
+  return scheme === "dark" ? <Theme name="dark">{node}</Theme> : node;
+}
+
+/** The TEXT NODE's colour atom, by identity — hashed names never asserted. */
+function inkAtoms(el: Element): string[] {
+  return String((el as HTMLElement).className || "")
+    .split(" ")
+    .filter((c) => c.startsWith("_col-"))
+    .sort();
+}
+
+function inkOf(scheme: Scheme, accent: Accent, label: string, node: ReactElement): string[] {
+  renderWithProviders(inScheme(scheme, <Preset overrides={{ textAccent: accent }}>{node}</Preset>));
+  const atoms = inkAtoms(screen.getByText(label));
+  cleanup();
+  return atoms;
+}
+
+const schemes: Scheme[] = ["light", "dark"];
+
+describe("Tabs — textAccent reaches the inactive tab label (MPO-154)", () => {
+  const items = [
+    { value: "address", label: "Address & Contact", content: <>address panel</> },
+    { value: "settings", label: "Settings", content: <>settings panel</> },
+  ];
+  const tabs = <Tabs items={items} defaultValue="address" />;
+
+  for (const scheme of schemes) {
+    it(`${scheme}: the inactive label moves between low and high`, () => {
+      const low = inkOf(scheme, "low", "Settings", tabs);
+      const high = inkOf(scheme, "high", "Settings", tabs);
+      expect(low).not.toHaveLength(0);
+      expect(high).not.toHaveLength(0);
+      expect(high).not.toEqual(low);
+    });
+
+    it(`${scheme}: the inactive label keeps the AA floor at low and medium`, () => {
+      expect(inkOf(scheme, "low", "Settings", tabs)).toEqual(
+        inkOf(scheme, "medium", "Settings", tabs),
+      );
+    });
+  }
+});
+
+describe("Accordion — textAccent reaches the section description (MPO-154)", () => {
+  const description = "Where should we deliver the order?";
+  const accordion = (
+    <Accordion defaultValue="shipping">
+      <Accordion.Item value="shipping">
+        <Accordion.Trigger description={description}>Shipping details</Accordion.Trigger>
+        <Accordion.Content>ship</Accordion.Content>
+      </Accordion.Item>
+    </Accordion>
+  );
+
+  for (const scheme of schemes) {
+    it(`${scheme}: the description moves between low and high`, () => {
+      const low = inkOf(scheme, "low", description, accordion);
+      const high = inkOf(scheme, "high", description, accordion);
+      expect(low).not.toHaveLength(0);
+      expect(high).not.toHaveLength(0);
+      expect(high).not.toEqual(low);
+    });
+
+    it(`${scheme}: the description keeps the AA floor at low and medium`, () => {
+      expect(inkOf(scheme, "low", description, accordion)).toEqual(
+        inkOf(scheme, "medium", description, accordion),
+      );
+    });
+  }
+});
+
+describe("Quote — textAccent reaches the attribution (MPO-154)", () => {
+  const quote = <Quote cite="Alan Kay">The best way to predict the future.</Quote>;
+
+  // The attribution renders as `<cite>— {name}</cite>`, two text runs in one
+  // node, so getByText cannot reach it. Read the cite element itself.
+  function citeInk(scheme: Scheme, accent: Accent): string[] {
+    const { container } = renderWithProviders(
+      inScheme(scheme, <Preset overrides={{ textAccent: accent }}>{quote}</Preset>),
+    );
+    const cite = container.querySelector("cite");
+    expect(cite?.textContent).toContain("Alan Kay");
+    const atoms = inkAtoms(cite as Element);
+    cleanup();
+    return atoms;
+  }
+
+  for (const scheme of schemes) {
+    it(`${scheme}: the attribution moves between low and high`, () => {
+      const low = citeInk(scheme, "low");
+      const high = citeInk(scheme, "high");
+      expect(low).not.toHaveLength(0);
+      expect(high).not.toHaveLength(0);
+      expect(high).not.toEqual(low);
+    });
+
+    it(`${scheme}: the attribution keeps the AA floor at low and medium`, () => {
+      expect(citeInk(scheme, "low")).toEqual(citeInk(scheme, "medium"));
+    });
+  }
+});
+
+describe("Meter — textAccent reaches the ok-zone value readout (MPO-154)", () => {
+  const meter = <Meter label="Disk usage" value={6.2} min={0} max={8} unit="GB" />;
+
+  function valueInk(scheme: Scheme, accent: Accent): string | null {
+    const { container } = renderWithProviders(
+      inScheme(scheme, <Preset overrides={{ textAccent: accent }}>{meter}</Preset>),
+    );
+    const token = container
+      .querySelector("[data-meter-value]")
+      ?.getAttribute("data-meter-value-color");
+    cleanup();
+    return token ?? null;
+  }
+
+  for (const scheme of schemes) {
+    it(`${scheme}: the ok value readout rides the resolver, not a static $color11`, () => {
+      expect(valueInk(scheme, "low")).toBe("$color11");
+      expect(valueInk(scheme, "medium")).toBe("$color11");
+      expect(valueInk(scheme, "high")).toBe("$color");
+    });
+  }
+
+  it("a verdict zone keeps its semantic ink at every stop", () => {
+    const warned = (accent: Accent) => {
+      const { container } = renderWithProviders(
+        <Preset overrides={{ textAccent: accent }}>
+          <Meter label="Disk usage" value={7.5} min={0} max={8} low={2} high={6} unit="GB" />
+        </Preset>,
+      );
+      const token = container
+        .querySelector("[data-meter-value]")
+        ?.getAttribute("data-meter-value-color");
+      cleanup();
+      return token;
+    };
+    expect(warned("low")).toBe("$orange11");
+    expect(warned("high")).toBe("$orange11");
+  });
+});
+
+describe("componentColors keeps no second answer for secondary ink (MPO-154)", () => {
+  it("the text table exposes no static secondary or muted step", () => {
+    const text = componentColors.text as Record<string, string | undefined>;
+    expect(text.secondary).toBeUndefined();
+    expect(text.muted).toBeUndefined();
+    expect(text.primary).toBe("$color");
+  });
+});

package/src/views/Calendar.tsx

@@ -434,6 +434,7 @@ function DayNumberDisc({
   nestedBox: NestedControlBox;
   label: NestedLabel;
 }) {
+  const { knobProps } = useResolvedKnobs();
   return (
     <YStack
       {...nestedBox}
@@ -455,7 +456,7 @@ function DayNumberDisc({
         {...label}
         fontWeight={today ? "700" : label.fontWeight}
         color={
-          today ? (onAccent ?? "$accentColor") : inMonth ? "$color" : componentColors.text.muted
+          today ? (onAccent ?? "$accentColor") : inMonth ? "$color" : knobProps.textAccentColor
         }
         textAlign="center"
       >
@@ -1731,7 +1732,7 @@ export function Calendar({
               role="columnheader"
               {...{ backgroundColor: componentColors.surface.background }}
             >
-              <Text {...nestedKnobs.label} fontWeight="500" color={componentColors.text.muted}>
+              <Text {...nestedKnobs.label} fontWeight="500" color={knobProps.textAccentColor}>
                 {day}
               </Text>
             </YStack>
@@ -1851,7 +1852,7 @@ export function Calendar({
                                 hoverStyle={{ opacity: 0.7 }}
                                 {...{ "data-calendar-overflow": String(hiddenCount) }}
                               >
-                                <Text fontSize="$1" color={componentColors.text.muted}>
+                                <Text fontSize="$1" color={knobProps.textAccentColor}>
                                   {withInterp(t("+{{count}} more"), { count: hiddenCount })}
                                 </Text>
                               </XStack>
@@ -2073,7 +2074,7 @@ export function Calendar({
                 onDateSelect?.(day);
               }}
             >
-              <Text {...nestedKnobs.label} fontWeight="500" color={componentColors.text.muted}>
+              <Text {...nestedKnobs.label} fontWeight="500" color={knobProps.textAccentColor}>
                 {weekdayNames[day.getDay()]}
               </Text>
               <DayNumberDisc
@@ -2094,7 +2095,7 @@ export function Calendar({
         {/* All-day / untimed strip (also the day-granularity drop row) */}
         <XStack {...hairline.bottom} borderColor="$borderColor" minHeight={MIN_PRESS_TARGET}>
           <YStack width={56} justifyContent="center" alignItems="flex-end" paddingInlineEnd="$2">
-            <Text fontSize="$1" color={componentColors.text.muted}>
+            <Text fontSize="$1" color={knobProps.textAccentColor}>
               {t("All day")}
             </Text>
           </YStack>
@@ -2135,7 +2136,7 @@ export function Calendar({
             <YStack width={56}>
               {hours.map((hour) => (
                 <YStack key={hour} height={hourHeight} alignItems="flex-end" paddingInlineEnd="$2">
-                  <Text fontSize="$1" color={componentColors.text.muted}>
+                  <Text fontSize="$1" color={knobProps.textAccentColor}>
                     {formatHour(hour)}
                   </Text>
                 </YStack>
@@ -2305,13 +2306,13 @@ export function Calendar({
                             onChangeText={setDraftTitle}
                             inputProps={{ autoFocus: true } as any}
                           />
-                          <Text fontSize="$2" color={componentColors.text.muted}>
+                          <Text fontSize="$2" color={knobProps.textAccentColor}>
                             {`${formatDayLong(editorHere.start)}, ${formatTimeRangeLabel(
                               editorHere.start,
                               editorHere.end,
                             )}`}
                           </Text>
-                          <Text fontSize="$1" color={componentColors.text.muted}>
+                          <Text fontSize="$1" color={knobProps.textAccentColor}>
                             {t("Changes apply when the editor closes")}
                           </Text>
                         </YStack>

package/src/views/Dashboard.tsx

@@ -326,15 +326,20 @@ export interface KPICardProps extends Omit<YStackProps, "children"> {
  * The one sentinel resolver for trend sentiment color (LC-36
  * TREND-SENTIMENT): color encodes sentiment — `trend × goodDirection` —
  * never direction alone. Undeclared or `"none"` sentiment renders the
- * neutral muted tier; a metric whose polarity the system doesn't know
- * must not wear a verdict color.
+ * neutral tier; a metric whose polarity the system doesn't know must not
+ * wear a verdict color.
+ *
+ * MPO-154: the neutral ink is passed in, not looked up. It is ordinary
+ * secondary text, so the caller hands over `knobProps.textAccentColor` —
+ * a static tier here could not see the `textAccent` knob.
  */
 export function resolveTrendColor(
   trend: TrendDirection | undefined,
   goodDirection: KPICardConfig["goodDirection"],
+  neutral: string,
 ): string {
-  if (!trend || trend === "neutral") return componentColors.text.muted;
-  if (!goodDirection || goodDirection === "none") return componentColors.text.muted;
+  if (!trend || trend === "neutral") return neutral;
+  if (!goodDirection || goodDirection === "none") return neutral;
   return trend === goodDirection
     ? componentColors.semantic.success
     : componentColors.semantic.error;
@@ -373,8 +378,8 @@ export function KPICard({ config, ...stackProps }: KPICardProps) {
   );
 
   const trendColor = useMemo(
-    () => resolveTrendColor(config.trend, config.goodDirection),
-    [config.trend, config.goodDirection],
+    () => resolveTrendColor(config.trend, config.goodDirection, knobProps.textAccentColor),
+    [config.trend, config.goodDirection, knobProps.textAccentColor],
   );
 
   const trendSymbol = useMemo(() => {
@@ -660,7 +665,7 @@ export function ShortcutCard({ config, ...stackProps }: ShortcutCardProps) {
             {...knobProps.borderRadius}
             data-nested-px={px}
           >
-            <Text {...knobProps.label} color={componentColors.text.secondary}>
+            <Text {...knobProps.label} color={knobProps.textAccentColor}>
               {config.count}
             </Text>
           </XStack>
@@ -708,7 +713,7 @@ export function ListCard({ config, headingLevel = 2, ...stackProps }: ListCardPr
               {item.label}
             </Text>
             {item.meta ? (
-              <Text {...knobProps.label} color={componentColors.text.muted}>
+              <Text {...knobProps.label} color={knobProps.textAccentColor}>
                 {item.meta}
               </Text>
             ) : null}

package/src/views/Gantt.tsx

@@ -1576,7 +1576,7 @@ export function GanttView({
             borderColor="$borderColor"
             {...{ backgroundColor: componentColors.surface.background }}
           >
-            <Text {...knobProps.label} color={componentColors.text.muted} numberOfLines={1}>
+            <Text {...knobProps.label} color={knobProps.textAccentColor} numberOfLines={1}>
               {t("Task")}
             </Text>
           </XStack>
@@ -1631,7 +1631,7 @@ export function GanttView({
                     top={2}
                     width={Math.max(0, band.width - 8)}
                     {...knobProps.label}
-                    color={componentColors.text.secondary}
+                    color={knobProps.textAccentColor}
                     numberOfLines={1}
                   >
                     {band.label}
@@ -1645,7 +1645,7 @@ export function GanttView({
                   {...(rtl ? { right: tick.x + 4 } : { left: tick.x + 4 })}
                   top={axisHeight / 2}
                   {...knobProps.label}
-                  color={tick.major ? componentColors.text.secondary : componentColors.text.muted}
+                  color={knobProps.textAccentColor}
                   numberOfLines={1}
                 >
                   {formatDayOfMonth(tick.date)}

package/src/views/Kanban.native.tsx

@@ -861,7 +861,7 @@ function KanbanColumnView<T>({
             <XStack alignItems="center" {...knobProps.gap}>
               {itemCount !== undefined && (
                 <Text
-                  color={componentColors.text.muted}
+                  color={knobProps.textAccentColor}
                   {...knobProps.label}
                   {...knobProps.textWeight}
                   data-async-count
@@ -1004,7 +1004,7 @@ function KanbanColumnView<T>({
               justifyContent="center"
             >
               {column.items.length === 0 && (
-                <Text color={componentColors.text.muted} {...knobProps.label}>
+                <Text color={knobProps.textAccentColor} {...knobProps.label}>
                   {t("Drop here")}
                 </Text>
               )}

package/src/views/Kanban.tsx

@@ -1361,7 +1361,7 @@ function KanbanColumnView<T>({
             <XStack alignItems="center" {...knobProps.gap}>
               {itemCount !== undefined && (
                 <Text
-                  color={componentColors.text.muted}
+                  color={knobProps.textAccentColor}
                   {...knobProps.label}
                   {...knobProps.textWeight}
                   data-async-count
@@ -1551,7 +1551,7 @@ function KanbanColumnView<T>({
                 justifyContent="center"
               >
                 {isEmpty && (
-                  <Text color={componentColors.text.muted} {...knobProps.label}>
+                  <Text color={knobProps.textAccentColor} {...knobProps.label}>
                     {t("Drop here")}
                   </Text>
                 )}

package/src/views/ReportBuilder.tsx

@@ -513,7 +513,7 @@ export function ReportBuilder({
             <SortIcon
               size={iconPx}
               weight="bold"
-              color={active ? componentColors.text.primary : componentColors.text.muted}
+              color={active ? componentColors.text.primary : knobProps.textAccentColor}
               opacity={active ? 1 : 0.35}
             />
           </XStack>
@@ -634,7 +634,7 @@ export function ReportBuilder({
           <Text {...knobProps.label} color="$accentColor" numberOfLines={1}>
             {groupByCol?.label ?? groupBy.field}: {groupKey}
           </Text>
-          <Text {...knobProps.label} color={componentColors.text.muted}>
+          <Text {...knobProps.label} color={knobProps.textAccentColor}>
             ({group.rows.length} {group.rows.length === 1 ? t("record") : t("records")})
           </Text>
           <XStack flex={1} />
@@ -902,7 +902,7 @@ export function ReportBuilder({
                 {...knobProps.gapLg}
                 flexWrap="wrap"
               >
-                <Text {...knobProps.label} color={componentColors.text.muted}>
+                <Text {...knobProps.label} color={knobProps.textAccentColor}>
                   {t("Totals")}
                 </Text>
                 {totals.map(({ col, value }) => (
@@ -912,7 +912,7 @@ export function ReportBuilder({
                   </Text>
                 ))}
                 <XStack flex={1} />
-                <Text {...knobProps.label} color={componentColors.text.muted}>
+                <Text {...knobProps.label} color={knobProps.textAccentColor}>
                   {t("{{count}} row(s)", { count: data.length })}
                 </Text>
               </XStack>