@multiplatform.one/components 7.8.0 → 7.11.0

package/src/TreeSelect/index.tsx

@@ -66,6 +66,14 @@ export interface TreeSelectProps extends Omit<GetProps<typeof YStack>, "children
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
   defaultExpandedIds?: string[];
+  /**
+   * MPO-283 — accessible name for the trigger. `GetProps<typeof YStack>`
+   * already admitted this prop, but it landed on the outer wrapper, which is
+   * not an accessibility element on iOS, so nothing read it. It is routed to
+   * the trigger now. `aria-label` is accepted as an alias.
+   */
+  accessibilityLabel?: string;
+  "aria-label"?: string;
 }
 
 function defaultNodeIcon(hasChildren: boolean, isExpanded: boolean, iconSize: number) {
@@ -134,6 +142,24 @@ function TreeSelectRows({
             aria-expanded={hasChildren ? isExpanded : undefined}
             aria-selected={isSelected}
             aria-level={depth + 1}
+            // MPO-283: the aria-* above are web-only. Without the RN spellings
+            // a row is not an accessibility element on iOS, so the whole tree
+            // came back as loose StaticText with no role and no selected state.
+            // `role` is overridden too: RN prefers it over accessibilityRole,
+            // and `treeitem` leaves the element out of the iOS tree the same
+            // way `radio` does (measured, iOS 26.2).
+            {...(!isWeb
+              ? {
+                  accessible: true,
+                  role: "button" as const,
+                  accessibilityRole: "button" as const,
+                  accessibilityLabel: node.label,
+                  accessibilityState: {
+                    selected: isSelected,
+                    ...(hasChildren ? { expanded: isExpanded } : undefined),
+                  },
+                }
+              : undefined)}
             data-treeselect-row={node.id}
             data-treeselect-index={String(index)}
             data-depth={String(depth)}
@@ -181,6 +207,16 @@ function TreeSelectRows({
                     ? t("Collapse {{label}}", { label: node.label })
                     : t("Expand {{label}}", { label: node.label })
                 }
+                // MPO-283: the aria-label above never reaches native.
+                {...(!isWeb
+                  ? {
+                      accessible: true,
+                      accessibilityRole: "button" as const,
+                      accessibilityLabel: isExpanded
+                        ? t("Collapse {{label}}", { label: node.label })
+                        : t("Expand {{label}}", { label: node.label }),
+                    }
+                  : undefined)}
                 width={expandIconSize}
                 height={expandIconSize}
                 alignItems="center"
@@ -321,6 +357,7 @@ function Trigger({
   triggerRef,
   sizeToken,
   borderRadius,
+  accessibilityLabel,
 }: {
   display?: string;
   placeholder: string;
@@ -328,6 +365,7 @@ function Trigger({
   disabled: boolean;
   id?: string;
   labelled: boolean;
+  accessibilityLabel?: string;
   onToggle: () => void;
   triggerRef: (node: HTMLElement | null) => void;
   sizeToken: string;
@@ -349,8 +387,21 @@ function Trigger({
         role="combobox"
         aria-haspopup="tree"
         aria-expanded={open}
-        aria-label={labelled ? undefined : placeholder}
+        aria-label={accessibilityLabel ?? (labelled ? undefined : placeholder)}
         id={id}
+        // MPO-283 (same family as ToggleGroup / RadioGroup): every semantic on
+        // this trigger above is a web attribute, and tamagui does not map any
+        // of them onto React Native, so on iOS the control reached the
+        // accessibility tree with no role, no name and no expanded state.
+        {...(!isWeb
+          ? {
+              accessible: true,
+              role: "button" as const,
+              accessibilityRole: "button" as const,
+              accessibilityLabel: accessibilityLabel ?? display ?? placeholder,
+              accessibilityState: { disabled, expanded: open },
+            }
+          : undefined)}
         tabIndex={disabled || open ? -1 : 0}
         disabled={disabled}
         cursor={disabled ? "not-allowed" : "pointer"}
@@ -582,6 +633,7 @@ function FloatingTreeSelect({
   sizeToken,
   borderRadius,
   loading,
+  accessibilityLabel,
 }: {
   nodes: TreeNode[];
   value?: string;
@@ -599,6 +651,7 @@ function FloatingTreeSelect({
   sizeToken: string;
   borderRadius: number | string;
   loading?: boolean;
+  accessibilityLabel?: string;
 }) {
   const treeId = useId();
   const searchRef = useRef<HTMLInputElement | null>(null);
@@ -695,6 +748,7 @@ function FloatingTreeSelect({
         triggerRef={panel.setReferenceRef}
         sizeToken={sizeToken}
         borderRadius={borderRadius}
+        accessibilityLabel={accessibilityLabel}
       />
       {panel.mounted && (
         <FloatingFocusManager context={panel.context} modal={false} initialFocus={-1}>
@@ -772,6 +826,7 @@ function SheetTreeSelect({
   sizeToken,
   borderRadius,
   loading,
+  accessibilityLabel,
 }: {
   nodes: TreeNode[];
   value?: string;
@@ -789,6 +844,7 @@ function SheetTreeSelect({
   sizeToken: string;
   borderRadius: number | string;
   loading?: boolean;
+  accessibilityLabel?: string;
 }) {
   const treeId = useId();
   const searchRef = useRef<HTMLInputElement | null>(null);
@@ -844,6 +900,7 @@ function SheetTreeSelect({
           }}
           sizeToken={sizeToken}
           borderRadius={borderRadius}
+          accessibilityLabel={accessibilityLabel}
         />
       }
       header={
@@ -902,6 +959,8 @@ export function TreeSelect({
   onOpenChange,
   defaultExpandedIds,
   id: idProp,
+  accessibilityLabel,
+  "aria-label": ariaLabel,
   ...stackProps
 }: TreeSelectProps) {
   if (isWeb) ensureKeyboardModalityTracking();
@@ -965,6 +1024,7 @@ export function TreeSelect({
     sizeToken: String(knobProps.sizeToken),
     borderRadius: knobProps.borderRadius.borderRadius,
     loading,
+    accessibilityLabel: accessibilityLabel ?? ariaLabel,
   };
 
   const core = shouldUseSheet ? (

package/src/charts/PieChart.tsx

@@ -1,7 +1,6 @@
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { useTranslation } from "../shared/i18n";
 import { Text, XStack, YStack, type YStackProps } from "tamagui";
-import { componentColors } from "../componentColors";
 import { ChartDataFrame } from "./ChartDataView";
 import { ChartSurface } from "./ChartSurface";
 import { chartDatumText, describeChart, describeDatum } from "./accessibility";
@@ -169,7 +168,7 @@ export function PieChart({
                 {...chartWebProps({ "data-mpo-chart-datum-label": "true" })}
                 {...knobProps.body}
                 fontSize="$2"
-                color={componentColors.text.muted}
+                color={knobProps.textAccentColor}
                 flex={1}
                 numberOfLines={1}
               >

package/src/code/HighlightedCode/index.tsx

@@ -77,7 +77,7 @@ export function HighlightedCode({
           >
             {showLineNumbers && (
               <Text
-                color={componentColors.text.secondary}
+                color={knobProps.textAccentColor}
                 fontSize={resolvedFontSize}
                 width={gutterWidth}
                 data-line-number=""

package/src/componentColors.ts

@@ -30,15 +30,17 @@ export const componentColors = {
     border: "$color7",
   },
 
-  /** Text color levels. muted sits on the $color11 tier — the lowest ramp
-   * step that keeps secondary text AA-readable on color1/2 surfaces. */
+  /** Text color levels. */
   text: {
     // MPO-19 X5: was `$color12`, a second answer to what `resolveKnobs`'
     // `textAccent: high` already resolves to. `$color` IS the theme's ink,
     // and it tracks a sub-theme where the raw ramp step does not.
     primary: "$color",
-    secondary: "$color11",
-    muted: "$color11",
+    // MPO-154: `secondary` and `muted` were the same mistake one tier down —
+    // a static `$color11` read into 85 `color` props, which pinned every
+    // helper, caption and inactive label dim at `textAccent: high`. Secondary
+    // text takes `useResolvedKnobs().knobProps.textAccentColor`, which is
+    // `$color11` at low/medium (the AA floor) and `$color` at high.
     subtle: "$color8",
   },
 

package/src/images/Image/ImageFrame.tsx

@@ -11,7 +11,6 @@ import {
   type GroupPosition,
 } from "@multiplatform.one/theme";
 import { Image as TamaguiImage, View, isWeb } from "tamagui";
-import { componentColors } from "../../componentColors";
 import { Skeleton } from "../../Skeleton";
 import { isThumbnailSize, thumbnailPx as resolveThumbnailPx } from "./shared";
 import type { ImagePlaceholder, ImageProps } from "./types";
@@ -51,6 +50,7 @@ function glyphSize(px: number): number {
 }
 
 function DefaultFallback({ px }: { px: number }) {
+  const { knobProps } = useResolvedKnobs();
   return (
     <View
       data-image-fallback=""
@@ -61,7 +61,7 @@ function DefaultFallback({ px }: { px: number }) {
       justifyContent="center"
       backgroundColor="$color3"
     >
-      <ImageIcon size={glyphSize(px)} color={componentColors.text.muted} />
+      <ImageIcon size={glyphSize(px)} color={knobProps.textAccentColor} />
     </View>
   );
 }

package/src/layouts/AsyncBoundary.tsx

@@ -18,7 +18,6 @@ import { createContext, useContext, useEffect, useRef, type ReactNode } from "re
 import { useTranslation } from "../shared/i18n";
 import { XStack, YStack, type YStackProps } from "tamagui";
 import { Alert } from "../Alert";
-import { componentColors } from "../componentColors";
 import { Skeleton } from "../Skeleton";
 import { Text } from "../Text";
 import { EmptyState } from "./page";
@@ -320,7 +319,7 @@ function AsyncPendingBar() {
       {...knobProps.gap}
     >
       <Spinner size="small" aria-hidden />
-      <Text {...knobProps.label} color={componentColors.text.muted}>
+      <Text {...knobProps.label} color={knobProps.textAccentColor}>
         {t("Updating...")}
       </Text>
     </XStack>

package/src/layouts/EmptyState.spec.tsx

@@ -1,6 +1,20 @@
+import { cleanup, screen } from "@testing-library/react";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { describe, expect, it } from "vitest";
+import { Preset } from "@multiplatform.one/theme";
+import { afterEach, describe, expect, it } from "vitest";
 import { EmptyState } from "./EmptyState";
+import { KPICard } from "../views/Dashboard";
+
+afterEach(cleanup);
+
+const RADIUS_STOPS = ["none", "small", "medium", "large", "full"] as const;
+
+function radiusAtoms(el: Element): string[] {
+  return String(el.className || "")
+    .split(" ")
+    .filter((c) => /^_(btlr|btrr|bbrr|bblr)-/.test(c))
+    .sort();
+}
 
 describe("EmptyState", () => {
   it("does not pin compact, so the density knob restyles the frame", () => {
@@ -28,3 +42,46 @@ describe("EmptyState", () => {
     expect(container.textContent).toContain("Records you add will show up here.");
   });
 });
+
+/**
+ * RULINGS-2026-08-28 R2e (MPO-106 D4): an icon well rides the radius scale
+ * (DEFAULT); R-PILL is reserved for a well that IS a count badge. EmptyState
+ * declared R-PILL and painted 1000, so its well stayed a circle at every
+ * stop while KPICard's well — the dialect the ruling picked — rode the scale.
+ */
+describe("EmptyState icon well radius (R2e)", () => {
+  it.each(RADIUS_STOPS)("at radius %s the well matches KPICard's well", (borderRadius) => {
+    renderWithProviders(
+      <Preset overrides={{ borderRadius }}>
+        <>
+          <EmptyState title="Nothing here" icon={<span data-testid="empty-icon">i</span>} />
+          <KPICard
+            config={{ id: "k", title: "K", value: 1, icon: <span data-testid="kpi-icon">i</span> }}
+          />
+        </>
+      </Preset>,
+    );
+    const emptyWell = screen.getByTestId("empty-icon").parentElement as HTMLElement;
+    const kpiWell = screen.getByTestId("kpi-icon").parentElement as HTMLElement;
+    expect(radiusAtoms(emptyWell)).not.toHaveLength(0);
+    expect(radiusAtoms(emptyWell)).toEqual(radiusAtoms(kpiWell));
+    // A knob-immunity declaration is what licensed the circle; the well is
+    // not immune, so it must carry none.
+    expect(emptyWell.getAttribute("data-radius-class")).toBeNull();
+  });
+
+  it("squares at radius none rather than staying a circle", () => {
+    renderWithProviders(
+      <Preset overrides={{ borderRadius: "none" }}>
+        <EmptyState title="Nothing here" icon={<span data-testid="empty-icon">i</span>} />
+      </Preset>,
+    );
+    const well = screen.getByTestId("empty-icon").parentElement as HTMLElement;
+    expect(radiusAtoms(well)).toEqual([
+      "_bblr-t-radius-0",
+      "_bbrr-t-radius-0",
+      "_btlr-t-radius-0",
+      "_btrr-t-radius-0",
+    ]);
+  });
+});

package/src/layouts/EmptyState.tsx

@@ -9,7 +9,6 @@
  */
 import {
   Intent,
-  radiusClassProps,
   readingWidthStyle,
   useResolvedKnobs,
   warnBannedErrorWords,
@@ -69,18 +68,23 @@ export function EmptyState({
     warnBannedErrorWords(description, { component: "EmptyState" });
   }
 
+  const {
+    borderColor: _wellEdgeColor,
+    borderWidth: _wellEdgeWidth,
+    ...wellRadius
+  } = knobProps.borderRadius;
+
   const well = icon ? (
     <YStack
       alignItems="center"
       justifyContent="center"
       backgroundColor={componentColors.interactive.background}
-      // R-PILL icon well: always a circle; its inset scales with the
-      // size knob (spec: empty icon well consumes sizeToken). Declared so
-      // the `radius:none` sweep licenses the circle instead of guessing
-      // from its geometry (D-09 / LC-60).
-      {...radiusClassProps("R-PILL", "empty icon well")}
+      // R2e: an icon well rides the radius scale (DEFAULT), the same
+      // resolution KPICard's well takes. Only the radius half of the
+      // fragment applies — the well paints no edge. Its inset still scales
+      // with the size knob (spec: empty icon well consumes sizeToken).
+      {...wellRadius}
       padding={knobProps.sizeToken as any}
-      borderRadius={1000}
       aria-hidden
       {...(!isWeb ? { accessibilityElementsHidden: true } : null)}
     >

package/src/layouts/KeyboardAvoidingWrapper/KeyboardAvoidingWrapper.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { Input } from "@multiplatform.one/forms";
 import { Paragraph, YStack } from "tamagui";
-import { componentColors } from "../../componentColors";
+import { Text } from "../../Text";
 import { KeyboardAvoidingWrapper } from "./index";
 
 const meta: Meta<typeof KeyboardAvoidingWrapper> = {
@@ -27,10 +27,10 @@ export const Default: Story = {
     <KeyboardAvoidingWrapper>
       <YStack>
         <Paragraph>Content inside KeyboardAvoidingWrapper</Paragraph>
-        <Paragraph color={componentColors.text.muted}>
+        <Text>
           On native, this shifts content when the keyboard appears. On web, it is a simple
           passthrough wrapper.
-        </Paragraph>
+        </Text>
         <Input label="Test input" placeholder="Focus to test keyboard avoidance" />
       </YStack>
     </KeyboardAvoidingWrapper>

package/src/layouts/PaneScaffold.stories.tsx

@@ -8,6 +8,7 @@ import {
 } from "@multiplatform.one/theme";
 import type { ReactNode } from "react";
 import { Paragraph, Text, YStack } from "tamagui";
+import { Text as HouseText } from "../Text";
 import { componentColors } from "../componentColors";
 import {
   FeedLayout,
@@ -43,11 +44,7 @@ function PaneFill({ label, hint, muted }: { label: string; hint?: string; muted?
       gap="$2"
     >
       <Paragraph fontWeight="600">{label}</Paragraph>
-      {hint ? (
-        <Text color={componentColors.text.muted} fontSize="$2">
-          {hint}
-        </Text>
-      ) : null}
+      {hint ? <HouseText fontSize="$2">{hint}</HouseText> : null}
     </YStack>
   );
 }
@@ -274,9 +271,7 @@ export const ProseReadingWidth: StoryObj<typeof ReadingWidth> = {
         </Paragraph>
       </ReadingWidth>
       <ReadingWidth measure="none">
-        <Paragraph color={componentColors.text.muted}>
-          Ejected measure (full width of parent).
-        </Paragraph>
+        <HouseText>Ejected measure (full width of parent).</HouseText>
       </ReadingWidth>
     </YStack>
   ),

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

@@ -20,6 +20,7 @@ import {
   XStack,
   YStack,
   isWeb,
+  type InputProps,
   type YStackProps,
 } from "tamagui";
 import {
@@ -331,7 +332,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 +474,7 @@ export function Tags({
         {suggestionOptions.length > 0 && (
           <Text
             fontSize="$1"
-            color={componentColors.text.muted}
+            color={knobProps.textAccentColor}
             paddingHorizontal="$3"
             paddingVertical="$1.5"
           >
@@ -484,7 +485,7 @@ export function Tags({
         {showEmptyMessage && (
           <Text
             fontSize="$2"
-            color={componentColors.text.muted}
+            color={knobProps.textAccentColor}
             textAlign="center"
             padding="$3"
             {...knobProps.body}
@@ -580,9 +581,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 +588,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 +623,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 InputProps["placeholderTextColor"]}
           autoComplete="off"
           role="combobox"
           aria-autocomplete="list"
@@ -644,7 +642,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>