@lotics/ui 43.4.0 → 43.6.0

package/src/file_thumbnail.tsx

@@ -23,8 +23,23 @@ import {
 import { isImageMimeType, isVideoMimeType, isAudioMimeType } from "./mime";
 import { DiffMark, type DiffKind } from "./diff_mark";
 
+/** A tile that stands on its own — a grid cell, a card. Big enough to carry a
+ *  filename under the mark. */
 export const THUMBNAIL_SIZE = 96;
-export const COMPACT_THUMBNAIL_SIZE = 32;
+/**
+ * A tile that RIDES A ROW — the file's identity mark, beside the name rather
+ * than under it. It is also the threshold: at or below this, a document renders
+ * as a bare badge, because there is no room for a name inside the tile and the
+ * row already shows one. Above it, the tile becomes a CARD and prints the
+ * filename itself, which beside a row that names the file is the same string
+ * twice, the second copy truncated.
+ *
+ * 40 is the register's identity-mark rung — the same number `AVATAR_PX.lg`
+ * uses, for the same reason: it is the mark that says which row this is, and a
+ * row is 72px tall (`ROW_HEIGHT`). At 32 it read as a stray glyph with 40px of
+ * air around it.
+ */
+export const COMPACT_THUMBNAIL_SIZE = 40;
 
 /**
  * Returns the icon name for playable media (video/audio) so a MediaCard can
@@ -160,8 +175,9 @@ export function FileThumbnail(props: FileThumbnailProps) {
   const rootStyle =
     size !== undefined ? { width: size, height: size } : { width: "100%" as const, aspectRatio: 1 };
 
-  // A tile ≤ 32px is a badge in a strip, not a card: a 22px mark would swallow
-  // it. The row or cell holding the strip carries the change instead.
+  // A row-sized tile is a badge, not a card: it has no room for a filename, and
+  // a corner mark would swallow it. The row or cell holding it carries the
+  // change instead.
   const compact = size !== undefined && size <= COMPACT_THUMBNAIL_SIZE;
   const mark = diff === undefined || compact ? null : <DiffCorner kind={diff} />;
 

package/src/font_family.ts

@@ -6,7 +6,7 @@
  * `Inter_600SemiBold`), which is the React Native convention and the reason a
  * single family token cannot express the ladder on its own.
  *
- * So the tokens are per-rung, and `LoticsThemeProvider` FANS ONE VALUE OUT
+ * So the tokens are per-rung, and `applyLoticsTheme` FANS ONE VALUE OUT
  * across all three when an app sets `bodyFont`. That is what keeps the app-facing
  * surface at one parameter while the kit keeps a rung it can default correctly:
  * unthemed, each rung resolves to its own Inter face; themed, all three resolve

package/src/font_family.web.ts

@@ -6,7 +6,7 @@
  * `Inter_600SemiBold`), which is the React Native convention and the reason a
  * single family token cannot express the ladder on its own.
  *
- * So the tokens are per-rung, and `LoticsThemeProvider` FANS ONE VALUE OUT
+ * So the tokens are per-rung, and `applyLoticsTheme` FANS ONE VALUE OUT
  * across all three when an app sets `bodyFont`. That is what keeps the app-facing
  * surface at one parameter while the kit keeps a rung it can default correctly:
  * unthemed, each rung resolves to its own Inter face; themed, all three resolve

package/src/funnel.tsx

@@ -104,7 +104,7 @@ export function Funnel(props: FunnelProps) {
   };
 
   const titleNode = title ? (
-    <Text size="xs" color="muted" transform="uppercase">
+    <Text size="xs" color="muted" weight="medium">
       {title}
     </Text>
   ) : null;

package/src/icon_button.tsx

@@ -139,7 +139,10 @@ const styles = StyleSheet.create({
   },
   none: {},
   primary: {
-    backgroundColor: colors.zinc[900],
+    // The SAME token `Button` primary uses. These two were near-black by
+    // coincidence rather than by contract, so an icon-only action migrated
+    // from `Button` kept the colour while silently leaving the theme behind.
+    backgroundColor: colors.primary,
   },
   secondary: {
     backgroundColor: colors.zinc[100],
@@ -153,7 +156,7 @@ const styles = StyleSheet.create({
   elevated: {
     backgroundColor: colors.white,
     borderWidth: 1,
-    borderColor: colors.zinc[200],
+    borderColor: colors.border,
     ...({ boxShadow: "0 1px 3px rgba(0, 0, 0, 0.18)" } as object),
   },
 });

package/src/index.css

@@ -1,20 +1,26 @@
+/*
+ * There is NO `--font-size-*` ramp here. Twelve such variables used to sit at the
+ * top of this file, and they disagreed with the real ramp in `text.css` on the
+ * leading of every rung and the size of two — `sm` handed out 14/20 where `Text`
+ * renders 14/24. Nothing in this repo or in any app read them, but the shipped
+ * catalog offered them for "hand-rolled DOM surfaces", so the one reader who
+ * followed the docs got a ramp that silently disagreed with the text beside it.
+ *
+ * A hand-rolled DOM surface takes `data-text-size="sm"` instead. `text.css`
+ * matches that attribute on ANY element, not just what `Text` renders, and it
+ * carries the tracking too — which no set of size/line-height variables can.
+ */
 :root {
-  --font-size-xs: 12px;
-  --font-size-xs-line-height: 16px;
-  --font-size-sm: 14px;
-  --font-size-sm-line-height: 20px;
-  --font-size-md: 16px;
-  --font-size-md-line-height: 24px;
-  --font-size-lg: 18px;
-  --font-size-lg-line-height: 26px;
-  --font-size-xl: 24px;
-  --font-size-xl-line-height: 30px;
-  --font-size-xxl: 32px;
-  --font-size-xxl-line-height: 38px;
-
-  /* Input font size - 16px on mobile to prevent Safari iOS auto-zoom */
+  /* Input font size - 16px on mobile to prevent Safari iOS auto-zoom.
+     LINE HEIGHT mirrors the `Text` rung at the same size (`text.css`): an input
+     is running text and sits at the body rhythm, so 16px takes 26 and 14px takes
+     24. These two values are DUPLICATED as `INPUT_LINE_HEIGHT_MOBILE` /
+     `INPUT_LINE_HEIGHT_DESKTOP` in `text_utils.ts`, which the auto-grow and
+     compact-input math reads — the variable renders, the constant measures, and
+     they must agree. Changing one alone leaves a field whose box is computed for
+     a rhythm it does not render. */
   --input-font-size: 16px;
-  --input-line-height: 24px;
+  --input-line-height: 26px;
 
   --font-weight-regular: 400;
   --font-weight-medium: 500;
@@ -321,7 +327,7 @@
 @media screen and (min-width: 768px) {
   :root {
     --input-font-size: 14px;
-    --input-line-height: 20px;
+    --input-line-height: 24px;
   }
 }
 

package/src/inline_edit.tsx

@@ -7,7 +7,7 @@ import { ActivityIndicator } from "./activity_indicator";
 import { FocusRingPressable } from "./focus_ring_pressable";
 import { colors } from "./colors";
 import { FOCUS_RING, CONTROL_RADIUS, CONTROL_PADDING_V, HOVER_BORDER, CONTROL_TRANSITION } from "./control_surface";
-import { fontFamilyRegular, getInputTextStyle, getMultilineInputHeight, getTextColor, type TextColor } from "./text_utils";
+import { fontFamilyRegular, getInputTextStyle, INPUT_LETTER_SPACING, getMultilineInputHeight, getTextColor, type TextColor } from "./text_utils";
 import { getInteractionModality } from "./interaction_modality";
 import { shouldOpenOnFocus, shouldRestoreFocusOnClose } from "./inline_focus";
 import { trackCommit } from "./pending_commits";
@@ -646,7 +646,7 @@ export function InlineEditFrame(props: InlineEditFrameProps) {
 export const inlineValueTextStyle: TextStyle = {
   ...getInputTextStyle(),
   fontFamily: fontFamilyRegular,
-  letterSpacing: -0.4,
+  letterSpacing: INPUT_LETTER_SPACING,
 };
 
 // In the view ROW the value text takes the flex slot so the trailing adornment
@@ -728,16 +728,15 @@ const styles = StyleSheet.create({
   viewHovered: {
     borderColor: HOVER_BORDER,
   },
-  // Hover on a FRAMED field: the border deepens AND the surface tints. The border
-  // alone would be zinc-200 → zinc-400, a shade shift on a 1px line — too quiet to
-  // mark the field you are about to act on. The tint is the old resting chip,
-  // promoted to the state it always read as: "this one".
-  //
-  // It is deliberately NOT applied to `bare`: those live inside rows that wash on
-  // hover themselves, and a cell lighter than the row under it reads backwards.
+  // Hover on a FRAMED field: THE SAME SIGNAL, and only that. It used to deepen
+  // the border AND tint the surface, because at zinc-400 the border shift was
+  // too quiet to carry alone — a real problem solved in the wrong place. Every
+  // other input in the kit hovers by border only, so this made inline fields the
+  // one control with a second hover language, and a reader crossing a record
+  // surface met both. `HOVER_BORDER` is now zinc-500 and carries it unaided;
+  // one property means one thing to theme, and nothing to keep in sync.
   viewHoveredFramed: {
     borderColor: HOVER_BORDER,
-    backgroundColor: colors.zinc[50],
   },
   placeholder: { color: colors.zinc[400] },
   struck: { textDecorationLine: "line-through", color: colors.zinc[500] },

package/src/inline_files.tsx

@@ -85,6 +85,10 @@ export interface InlineFilesProps {
   emptyLabel?: string;
   /** Native accept filter, e.g. `"application/pdf,image/*"`. */
   accept?: string;
+  /** What pressing a row does — forwarded to `FileRows`. A field holding
+   *  documents (a contract, a recording) wants `"open"`; a field holding scans
+   *  wants the default preview. */
+  press?: "preview" | "open";
   /** Translated gallery/menu chrome, forwarded to `FileRows`. */
   labels?: Partial<GalleryLabels>;
   /** Credentials mode for the preview fetches — `"include"` for auth-gated
@@ -122,6 +126,7 @@ export function InlineFiles(props: InlineFilesProps) {
     onAdd,
     onRemove,
     onOpenExternal,
+    press,
     onDownload,
     multiple = true,
     addLabel,
@@ -196,6 +201,7 @@ export function InlineFiles(props: InlineFilesProps) {
             onError={onError}
             labels={labels}
             credentials={credentials}
+            press={press}
           />
         ) : null}
         {blockedReason !== undefined ? (

package/src/json_panel.tsx

@@ -51,7 +51,7 @@ const styles = StyleSheet.create({
   },
   body: {
     borderWidth: 1,
-    borderColor: colors.zinc[200],
+    borderColor: colors.border,
     borderRadius: 8,
     backgroundColor: colors.white,
     // The ScrollView owns the padding (content inset scrolls with the text); the

package/src/kpi_card.tsx

@@ -57,7 +57,7 @@ export function KPICard(props: KPICardProps) {
   return (
     <View style={[styles.container, style]}>
       <View style={styles.labelRow}>
-        <Text size="xs" color="muted" transform="uppercase">
+        <Text size="xs" color="muted" weight="medium">
           {label}
         </Text>
         {info ? <InfoPopover text={info} accessibilityLabel={pack.infoPopover.about(label)} /> : null}

package/src/locale.tsx

@@ -609,7 +609,7 @@ interface LoticsLocaleProviderProps {
 
 /**
  * App-root provider that supplies localized strings to @lotics/ui primitives —
- * the sibling of `LoticsThemeProvider`. Wrap your top-level element once and
+ * the kit's one root provider. Wrap your top-level element once and
  * every wired component picks up the pack; no per-instance label props:
  *
  *     // src/main.tsx

package/src/markdown.css

@@ -4,7 +4,11 @@
     "Helvetica Neue", sans-serif;
   font-size: 14px;
   line-height: 24px;
-  letter-spacing: -0.4px;
+  /* The body rung of the curve in `text.css`. Same tightness as the -0.4px this
+     carried before, written as an em so it scales with the rung instead of being
+     a flat pixel value that drifts at every other size — and now ONE number
+     shared with `Text` and the inputs rather than markdown's private one. */
+  letter-spacing: -0.006em;
   color: rgba(24, 24, 27, 1);
 }
 

package/src/metric.tsx

@@ -1,6 +1,7 @@
 import { View, StyleSheet, type TextStyle } from "react-native";
 import { Text } from "./text";
 import { colors } from "./colors";
+import { getTextColor } from "./text_utils";
 import { formatCompactNumber, formatMoney } from "./format_money";
 import { useMemo } from "react";
 
@@ -41,25 +42,11 @@ const SIZE_TO_TEXT_SIZE: Record<MetricSize, "md" | "lg" | "xl" | "xxl"> = {
   hero: "xxl",
 };
 
-// Letter-spacing tightens as font-size grows — "designed" not "inflated".
-// Hero gets the tightest tracking (-1.2) to match the 48px display size's
-// expected condensation.
-const SIZE_TO_LETTER_SPACING: Record<MetricSize, number> = {
-  sm: 0,
-  md: -0.25,
-  lg: -0.5,
-  hero: -1.2,
-};
 
 const TREND_UP = "↑";
 const TREND_DOWN = "↓";
 const TREND_FLAT = "→";
 
-const TONE_COLOR: Record<Exclude<MetricTone, "default">, string> = {
-  warning: colors.amber[600],
-  danger: colors.red[600],
-};
-
 export function Metric(props: MetricProps) {
   const {
     value,
@@ -104,16 +91,29 @@ export function Metric(props: MetricProps) {
         size={SIZE_TO_TEXT_SIZE[size]}
         weight="medium"
         style={[
-          // Tabular nums prevent the comma/decimal jitter when 1,234 sits
-          // next to 7,890 across cards — proportional glyphs misalign every
-          // column. Tighter tracking at display sizes reads as "designed",
-          // not "inflated body text" (Linear / Stripe / Geist all do this
-          // at hero metrics).
-          {
-            fontVariantNumeric: "tabular-nums",
-            letterSpacing: SIZE_TO_LETTER_SPACING[size],
-          } as TextStyle,
-          tone === "default" ? undefined : { color: TONE_COLOR[tone] },
+          // Tabular nums prevent the comma/decimal jitter when 1,234 sits next
+          // to 7,890 across cards — proportional glyphs misalign every column.
+          //
+          // TRACKING IS NOT SET HERE. This carried its own size→tracking table,
+          // which was a second copy of the ramp's curve and disagreed with it at
+          // every rung — `sm` sat at ZERO while the 16px text beside it tracked
+          // -0.48px, so every summary figure in the product was the one number
+          // not tracking like its own sentence. `Text` already applies the rung's
+          // value from `text.css`; the correct amount of tracking to add here is
+          // none. (Tabular figures do not need it reset either — letter-spacing
+          // adds a constant to every advance, so a tabular column stays aligned.)
+          { fontVariantNumeric: "tabular-nums" } as TextStyle,
+          // THE VALENCE INK COMES FROM `Text`, not a second map here. This kept
+          // its own — amber-600 and red-600 — while `getTextColor` answers
+          // amber-700 and red-900 for the same two words, so one `tone="warning"`
+          // rendered two different ambers depending on whether the number was a
+          // `Metric` or the sentence beside it.
+          //
+          // And the divergence was not cosmetic: amber-600 measures 3.19:1 on
+          // white, under the 4.5:1 AA floor for normal text, which is exactly
+          // what `getTextColor`'s own comment says the 700 rung exists to clear.
+          // A summary figure is the smallest, most glanced-at text on a register.
+          tone === "default" ? undefined : { color: getTextColor(tone) },
         ]}
       >
         {displayValue}

package/src/number_input.tsx

@@ -1,7 +1,7 @@
 import type { KeyboardEvent } from "react";
 import { colors } from "./colors";
 import { CONTROL_RADIUS, FOCUS_RING, HOVER_BORDER } from "./control_surface";
-import { fontFamilyRegular, inputTextStyleWeb } from "./text_utils";
+import { fontFamilyRegular, inputTextStyleWeb, INPUT_LETTER_SPACING } from "./text_utils";
 import { useFormField } from "./form_field";
 import { useFocusRing } from "./use_focus_ring";
 import { useHover } from "./use_hover";
@@ -75,7 +75,7 @@ export function NumberInput(props: NumberInputProps) {
         backgroundColor: seamless ? "transparent" : colors.background,
         fontFamily: fontFamilyRegular,
         ...inputTextStyleWeb,
-        letterSpacing: -0.4,
+        letterSpacing: INPUT_LETTER_SPACING,
         boxShadow: !seamless && focusVisible ? FOCUS_RING : "none",
         outline: "none",
         boxSizing: "border-box",

package/src/option_picker.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { OptionBadge, type OptionValue } from "./option_badge";
+import type { PickerOption } from "./picker";
+
+/**
+ * Feed a select FIELD's options into any kit picker — `InlineSelect`, `Select`,
+ * `OptionList`, `Combobox` — without dropping what the field knows.
+ *
+ *     <InlineSelect {...optionPicker(fields.city?.options ?? [])} … />                    // a category
+ *     <InlineSelect {...optionPicker(fields.status?.options ?? [], { badge: "dot" })} … /> // a status
+ *
+ * It exists because the obvious call site loses information: a picker takes
+ * `{ value, label }`, so every app writes
+ * `options.map((o) => ({ value: o.key, label: o.label }))` — and the option's
+ * `color` is not in that shape, so it never arrives.
+ *
+ * **`badge` is OPT-IN, and that is the whole design.** A badge means STATUS —
+ * a lifecycle, a stage, a risk level, something that reads at a glance and
+ * changes what you do. A type, a category, an attribute or a count is NOT a
+ * status: an industry, a source, a department, a headcount band, **a city**.
+ * Those render as plain text, and the composition grammar says so in those
+ * words. Colouring them anyway is the failure this default prevents — every
+ * option in every picker becomes a chip, the vocabulary that made a coloured
+ * pill MEAN something is spent on where a company happens to be, and the screen
+ * reads as decorated rather than organised. A field carrying a `color` is not
+ * consent to paint it; someone configures colours on a field for the one surface
+ * that badges it, and every other surface still has to decide.
+ *
+ * So the safe answer is the default: omit `badge` and you get text, which is
+ * correct for the majority of select fields. Pass it where the value is a status
+ * and you want it recognised rather than read.
+ *
+ * `dot` over `tonal` when you do badge: a picker row is a place to READ a set of
+ * choices, and a stack of filled pills is heavier than the list describing them.
+ */
+export function optionPicker(
+  options: OptionValue[],
+  opts?: { badge?: "tonal" | "dot" },
+): {
+  options: PickerOption<string, OptionValue>[];
+  renderOptionContent?: (option: PickerOption<string, OptionValue>) => React.ReactNode;
+} {
+  const badge = opts?.badge;
+  return {
+    // `key` is what the platform stores and what a write must send back; the
+    // label is display text that can be renamed under you. Falling back to the
+    // label keeps a hand-built option list working rather than producing an
+    // option whose value is `undefined`.
+    options: options.map((o) => ({ value: o.key ?? o.label, label: o.label, data: o })),
+    // Absent, not a no-op renderer: the pickers fall back to their own label
+    // rendering, so an un-badged field looks exactly like every other text value
+    // on the surface rather than like a badge that failed to paint.
+    renderOptionContent: badge
+      ? (option) => (option.data ? <OptionBadge value={option.data} variant={badge} /> : null)
+      : undefined,
+  };
+}

package/src/picker.tsx

@@ -5,7 +5,7 @@ import { colors } from "./colors";
 import { FOCUS_RING, CONTROL_RADIUS, HOVER_BORDER, CONTROL_TRANSITION } from "./control_surface";
 import { useFocusRing } from "./use_focus_ring";
 import { useHover } from "./use_hover";
-import { fontFamilyRegular, getInputTextStyle } from "./text_utils";
+import { fontFamilyRegular, getInputTextStyle, INPUT_LETTER_SPACING } from "./text_utils";
 import { Icon } from "./icon";
 import { useLoticsLocale } from "./locale";
 import { useFormField } from "./form_field";
@@ -188,7 +188,7 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderColor: colors.border,
     fontFamily: fontFamilyRegular,
-    letterSpacing: -0.4,
+    letterSpacing: INPUT_LETTER_SPACING,
     backgroundColor: "transparent",
     appearance: "none",
   },

package/src/pressable_row.tsx

@@ -86,11 +86,21 @@ export function PressableRow(props: PressableRowProps) {
         styles.row,
         variant === "inset" ? styles.inset : variant === "bleed" ? styles.bleed : styles.register,
         {
-          // Hover and selection wear the brand's WASH, whose default IS the zinc-100
-          // these states already used — so an unthemed app is unchanged and a themed
-          // one warms every row it touches. `pressed` stays neutral and one step
-          // darker: it is a momentary depth cue, not an identity.
-          backgroundColor: pressed ? colors.zinc[200] : selected ? colors.accent_wash : hovered ? colors.accent_wash : marked ? colors.blue[50] : undefined,
+          // FOUR states, and they must not collide. Selection and hover painted
+          // the SAME wash, which made "the row whose record is open" and "the row
+          // the pointer happens to be over" indistinguishable — the register's
+          // one piece of persistent state, erased by a transient one. Hover is
+          // now neutral and lighter, because it answers "you can press this",
+          // while selection carries the brand's WASH because it answers "you are
+          // here" — the state the accent exists for. `pressed` stays neutral and
+          // darkest: a momentary depth cue, not an identity.
+          // `marked` shares the wash rather than keeping its own literal blue-50:
+          // that hex was the same colour the wash now resolves to, minus the
+          // theming, so a branded app painted its ticked rows in a hue it had
+          // replaced everywhere else. What separates a ticked row from an open
+          // one is the ticked checkbox, which is unmissable; two washes for two
+          // orthogonal states could never render anyway on a row that is both.
+          backgroundColor: pressed ? colors.zinc[200] : selected || marked ? colors.accent_wash : hovered ? colors.zinc[50] : undefined,
         },
         style,
       ]}

package/src/progress_bar.tsx

@@ -112,7 +112,7 @@ export function ProgressBar(props: ProgressBarProps) {
       {title || caption ? (
         <View style={styles.header}>
           {title ? (
-            <Text size="xs" color="muted" transform="uppercase">
+            <Text size="xs" color="muted" weight="medium">
               {title}
             </Text>
           ) : null}

package/src/radio_picker.tsx

@@ -131,7 +131,8 @@ function RadioOption<T extends string | number | symbol>(
           borderRadius: 999,
           borderWidth: 1,
           borderColor: colors.border,
-          backgroundColor: selected ? colors.zinc["900"] : colors.zinc["50"],
+          // Selected = the primary token, like every other "this one is on".
+          backgroundColor: selected ? colors.primary : colors.zinc["50"],
           justifyContent: "center",
           alignItems: "center",
         }}

package/src/search_input.tsx

@@ -63,19 +63,20 @@ export function SearchInput(props: SearchInputProps) {
 
 const styles = StyleSheet.create({
   // Search reads as a view-control by its leading search glyph + white fill —
-  // NOT by a distinct shape. It shares the kit-wide `CONTROL_RADIUS` of every other
-  // input/picker (TextInputField, Combobox, the date filter), so a toolbar of
-  // controls reads as one consistent band. The white fill still pops against
-  // the zinc-50 canvas where most toolbars live; a zinc-300 border (one step up
-  // from the form-input hairline) keeps it defined on white cards too, where
-  // the fill alone would vanish. 40px (TextInputField default) — the system
-  // control height every band aligns to.
+  // NOT by a distinct shape. It shares the kit-wide `CONTROL_RADIUS`, the 40px
+  // control height, AND the resting `colors.border` hairline of every other
+  // input and picker, so a toolbar reads as one band of one species.
+  //
+  // It used to take `zinc-300`, one step heavier, on the argument that the white
+  // fill would vanish "on white cards". That defended against the wrong thing:
+  // a search input is never alone, it sits in a band beside filters and pickers,
+  // and measured in one there was exactly one control with a darker edge than
+  // its six neighbours — a difference a reader parses as an accident, not as
+  // emphasis. Definition on a white ground is the hairline's job everywhere else
+  // in the kit; there is no reason this control is the exception.
   search: {
     borderRadius: CONTROL_RADIUS,
     backgroundColor: colors.white,
-    // A thin 1px resting border (TextInputField's default width) — interaction
-    // emphasis comes from the input's own focus outline, so it stays quiet at
-    // rest. zinc-300 keeps it defined on white cards.
-    borderColor: colors.zinc[300],
+    borderColor: colors.border,
   },
 });

package/src/sort_header.tsx

@@ -95,10 +95,14 @@ export function SortHeader(props: SortHeaderProps) {
     >
       {align === "right" ? <Icon name={glyph} size={12} color={glyphColor} /> : null}
       <Text
-        size="xs"
+        size="sm"
         color={active ? "default" : "muted"}
-        weight={active ? "medium" : "regular"}
-        transform="uppercase"
+        // ONE weight, sorted or not. The active column is marked by INK (and by
+        // its direction chevron), never by stepping up to semibold: semibold is
+        // the heading ladder's weight in this system, and a sorted column is a
+        // label like the ones beside it, not a heading. A sortable and a plain
+        // header share a band and must read as one row of labels.
+        weight="medium"
         numberOfLines={1}
       >
         {label}

package/src/stacked_progress_bar.tsx

@@ -61,7 +61,7 @@ export function StackedProgressBar(props: StackedProgressBarProps) {
     <View style={styles.container}>
       <View style={styles.header}>
         {title ? (
-          <Text size="xs" color="muted" transform="uppercase">
+          <Text size="xs" color="muted" weight="medium">
             {title}
           </Text>
         ) : null}

package/src/step_progress.tsx

@@ -45,7 +45,10 @@ export interface StepProgressProps {
  * stage-countable at card density → this.
  */
 export function StepProgress(props: StepProgressProps) {
-  const { steps, current, color = colors.zinc[900], title, label, captionTone = "default", captionBelow = false, height = 10, accessibilityLabel } = props;
+  // The DEFAULT fill is the primary token — progress is the surface saying "this
+  // much is done", the same claim the one filled button makes. Still a prop, so a
+  // caller that means a specific hue (a status, a series) passes one.
+  const { steps, current, color = colors.primary, title, label, captionTone = "default", captionBelow = false, height = 10, accessibilityLabel } = props;
   const captionColor = captionTone === "danger" ? "danger" : "muted";
   const names = typeof steps === "number" ? null : steps;
   const count = Math.max(1, typeof steps === "number" ? steps : steps.length);
@@ -94,7 +97,7 @@ export function StepProgress(props: StepProgressProps) {
     return (
       <View style={{ gap: 6, flex: 1 }}>
         <View style={{ flexDirection: "row", alignItems: "baseline", gap: 12 }}>
-          <Text size="xs" color="muted" transform="uppercase">
+          <Text size="xs" color="muted" weight="medium">
             {title}
           </Text>
           <View style={{ flex: 1 }} />

package/src/switch.tsx

@@ -37,14 +37,17 @@ export function Switch(props: SwitchProps) {
 
   const content = (
     <Animated.View
+      // The ON track is `colors.primary`, applied as a PLAIN style rather than
+      // through the interpolation the thumb uses. That split is forced, not a
+      // preference: `Animated.interpolate` PARSES its `outputRange` colours in
+      // order to tween between them, and on web `colors.primary` is a `var()` —
+      // a string no colour parser can read, which would yield garbage no type
+      // would catch. So the track's colour switches instantly while the thumb
+      // keeps its spring; OFF keeps the literal zinc-200, which was never a
+      // token and carries no brand claim.
       style={[
         styles.wrapper,
-        {
-          backgroundColor: checked.interpolate({
-            inputRange: [0, 1],
-            outputRange: [colors.zinc["200"], colors.zinc["800"]],
-          }),
-        },
+        { backgroundColor: value ? colors.primary : colors.zinc["200"] },
       ]}
     >
       <Animated.View
@@ -62,6 +65,8 @@ export function Switch(props: SwitchProps) {
           },
         ]}
       >
+        {/* The tick rides the WHITE thumb, not the track, so it stays neutral
+            ink — theming it would put the brand on top of the brand. */}
         {value && <Icon name="check" size={18} color={colors.zinc["900"]} />}
       </Animated.View>
     </Animated.View>