@multiplatform.one/components 7.8.0 → 7.10.0

package/src/layouts/SafeAreaWrapper/SafeAreaWrapper.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { Paragraph, YStack } from "tamagui";
-import { componentColors } from "../../componentColors";
+import { Text } from "../../Text";
 import { SafeAreaWrapper } from "./index";
 
 const meta: Meta<typeof SafeAreaWrapper> = {
@@ -26,10 +26,10 @@ export const Default: Story = {
     <SafeAreaWrapper>
       <YStack>
         <Paragraph>Content inside SafeAreaWrapper</Paragraph>
-        <Paragraph color={componentColors.text.muted}>
+        <Text>
           On native, this respects device safe area insets. On web, it is a simple passthrough
           wrapper.
-        </Paragraph>
+        </Text>
       </YStack>
     </SafeAreaWrapper>
   ),

package/src/layouts/attachments.tsx

@@ -454,7 +454,7 @@ function AttachmentRow({
               {attachment.fileName}
             </Text>
             <XStack gap="$2" alignItems="center">
-              <Text fontSize="$2" color={componentColors.text.muted}>
+              <Text fontSize="$2" color={knobProps.textAccentColor}>
                 {attachment.formattedSize || formatFileSize(attachment.fileSize)}
               </Text>
               {ext ? (
@@ -627,7 +627,7 @@ export function Attachments({
       {...dropHandlers}
     >
       <PaperclipIcon size={compact ? 20 : 28} />
-      <Text color={componentColors.text.muted} fontSize={compact ? "$2" : "$3"} marginTop="$2">
+      <Text color={knobProps.textAccentColor} fontSize={compact ? "$2" : "$3"} marginTop="$2">
         {noAttachmentsLabel}
       </Text>
     </YStack>
@@ -657,7 +657,7 @@ export function Attachments({
               {label}
               {/* Count hides on error so the badge can't lie (DG-ST-04) */}
               {maxAttachments > 0 && !hasError && (
-                <Text color={componentColors.text.muted} fontSize="$2">
+                <Text color={knobProps.textAccentColor} fontSize="$2">
                   {" "}
                   ({items.length}/{maxAttachments})
                 </Text>
@@ -766,7 +766,7 @@ export function Attachments({
             ) : previewFile ? (
               <YStack alignItems="center" {...knobProps.gap} paddingVertical="$4">
                 {getFileIcon(previewFile, 40)}
-                <Text color={componentColors.text.muted} textAlign="center">
+                <Text color={knobProps.textAccentColor} textAlign="center">
                   {previewUnavailableLabel}
                 </Text>
               </YStack>

package/src/layouts/breadcrumbs.tsx

@@ -23,7 +23,6 @@ import {
 import React, { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Anchor, Text, XStack, isWeb } from "tamagui";
-import { componentColors } from "../componentColors";
 import { withInterp } from "../shared/t";
 
 /** Approx medium body line box before press-target padding (DG-LAY-04). */
@@ -240,7 +239,7 @@ export function Breadcrumbs({ items, onNavigate, label, maxVisible }: Breadcrumb
             ) : (
               <Text
                 {...knobProps.body}
-                color={componentColors.text.muted}
+                color={knobProps.textAccentColor}
                 fontSize={textSize}
                 fontWeight="400"
                 {...(slot.isCurrent ? { "aria-current": "page" as const } : null)}

package/src/layouts/page.tsx

@@ -298,7 +298,7 @@ export function PageHeader({
               {titleNode}
               {subtitle ? (
                 // T-HELPER on the shared body fragment — not a local size map.
-                <Paragraph margin={0} {...knobProps.body} color={componentColors.text.muted}>
+                <Paragraph margin={0} {...knobProps.body} color={knobProps.textAccentColor}>
                   {subtitle}
                 </Paragraph>
               ) : null}
@@ -404,7 +404,7 @@ export function PageSection({
       <YStack gap="$2">
         {headingNode}
         {description ? (
-          <Paragraph margin={0} {...knobProps.body} color={componentColors.text.muted}>
+          <Paragraph margin={0} {...knobProps.body} color={knobProps.textAccentColor}>
             {description}
           </Paragraph>
         ) : null}

package/src/layouts/sidebar.tsx

@@ -103,7 +103,7 @@ export function Sidebar({
                     fontSize="$2"
                     fontWeight="400"
                     textTransform="uppercase"
-                    color={componentColors.text.muted}
+                    color={knobProps.textAccentColor}
                     // Align with row text (LC-02): the inset rides as MARGIN so
                     // the caption's box starts at the shared row text edge —
                     // padding-based insets left the box at the panel edge, which
@@ -125,7 +125,7 @@ export function Sidebar({
                     const corners = stackRadiusProps(position, knobProps.borderRadius.borderRadius);
                     const itemKey = `${sectionIdx}:${String(item.value ?? item.label)}`;
                     const ink = item.active && onAccent ? onAccent : componentColors.text.primary;
-                    const metaInk = item.active && onAccent ? onAccent : componentColors.text.muted;
+                    const metaInk = item.active && onAccent ? onAccent : knobProps.textAccentColor;
                     const kbFocused = kbFocusKey === itemKey;
                     const pressable = Boolean(item.onPress);
                     const kbRing = kbFocused

package/src/layouts/tags-trigger.spec.tsx

@@ -10,6 +10,7 @@
 // asserts on the atomic classes (same approach as timeline-radius.spec.tsx).
 import { cleanup, fireEvent, screen, waitFor } from "@testing-library/react";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Preset } from "@multiplatform.one/theme";
 import * as React from "react";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { Tags } from "./tags";
@@ -72,6 +73,37 @@ describe("Tags Add Tag trigger (chip-scale)", () => {
     expect(classesByPrefix(pill, borderPrefixes).length).toBeGreaterThan(0);
   });
 
+  /**
+   * DG-BOR-01 (MPO-106 D3): the RESOLVER owns the outlined hairline floor —
+   * `outlined` + `none` draws the enumerated `small` stop, 0.5 — and a
+   * component adds no second `Math.max(..., 1)` on top. A local floor made
+   * `small` measure the same as `medium` here and nowhere else, so the Tags
+   * row was the one outlined control the borderWidth knob could not thin.
+   */
+  it.each([
+    ["none", "0--5px"],
+    ["small", "0--5px"],
+    ["medium", "1px"],
+    ["large", "2px"],
+  ] as const)(
+    "outlined borderWidth %s resolves to %s, floored only by the resolver",
+    (borderWidth, px) => {
+      renderWithProviders(
+        <Preset overrides={{ borderWidth, fillStyle: "outlined" }}>
+          <Tags tags={tags} onAdd={vi.fn()} onRemove={vi.fn()} />
+        </Preset>,
+      );
+      const pill = triggerPillOf(screen.getByLabelText("Add Tag"));
+      const chip = chipFrameOf(screen.getByText("urgent"));
+      const edges = ["_btw-", "_bbw-", "_blw-", "_brw-"];
+      const expected = edges.map((edge) => `${edge}${px}`).sort();
+      expect(classesByPrefix(pill, edges)).toEqual(expected);
+      // The trigger and the chips it sits beside share one box at every stop;
+      // a floor on only one of them is what pulled their heights apart.
+      expect(classesByPrefix(chip, edges)).toEqual(expected);
+    },
+  );
+
   it("trigger wrapper carries the D-02 44px press-floor (minHeight class)", () => {
     renderTags();
     const trigger = screen.getByLabelText("Add Tag");

package/src/layouts/tags.tsx

@@ -331,7 +331,7 @@ export function Tags({
   ) : (
     <XStack alignItems="center" gap="$2" opacity={0.5}>
       <TagIcon size={compact ? 14 : 16} />
-      <Text color={componentColors.text.muted} fontSize={compact ? "$1" : "$2"} {...knobProps.body}>
+      <Text color={knobProps.textAccentColor} fontSize={compact ? "$1" : "$2"} {...knobProps.body}>
         {noTagsLabel}
       </Text>
     </XStack>
@@ -473,7 +473,7 @@ export function Tags({
         {suggestionOptions.length > 0 && (
           <Text
             fontSize="$1"
-            color={componentColors.text.muted}
+            color={knobProps.textAccentColor}
             paddingHorizontal="$3"
             paddingVertical="$1.5"
           >
@@ -484,7 +484,7 @@ export function Tags({
         {showEmptyMessage && (
           <Text
             fontSize="$2"
-            color={componentColors.text.muted}
+            color={knobProps.textAccentColor}
             textAlign="center"
             padding="$3"
             {...knobProps.body}
@@ -580,9 +580,6 @@ export function Tags({
               variant="outline"
               backgroundColor="transparent"
               {...knobProps.borderRadius}
-              // Same border width the Chip paints for every tone, so the
-              // trigger's box matches the tag chips it sits beside.
-              borderWidth={Math.max(knobProps.borderRadius.borderWidth, 1)}
               borderColor={componentColors.interactive.border}
               gap={compact ? 0 : "$1"}
               hoverStyle={{ backgroundColor: componentColors.interactive.hover }}
@@ -590,7 +587,7 @@ export function Tags({
               {...(addKbFocus ? ensureFocusVisibleRing() : { outlineWidth: 0 })}
             >
               <PlusIcon size={chipIconSize(chipSize)} />
-              <ChipText size={chipSize} color={componentColors.text.secondary}>
+              <ChipText size={chipSize} color={knobProps.textAccentColor}>
                 {compact ? "\u200B" : addTagLabel}
               </ChipText>
             </ChipFrame>
@@ -625,7 +622,7 @@ export function Tags({
           // sat off the chips' optical line.
           fontSize={chipTextSize(chipSize)}
           color={componentColors.text.primary}
-          placeholderTextColor={componentColors.text.muted}
+          placeholderTextColor={knobProps.textAccentColor as any}
           autoComplete="off"
           role="combobox"
           aria-autocomplete="list"
@@ -644,7 +641,7 @@ export function Tags({
           <Label {...knobProps.label} fontWeight="400">
             {label}
             {maxTags > 0 && (
-              <Text color={componentColors.text.muted} fontSize="$2">
+              <Text color={knobProps.textAccentColor} fontSize="$2">
                 {" "}
                 ({tags.length}/{maxTags})
               </Text>

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>