@redseed/redseed-ui-tailwindcss 7.55.0 → 7.56.0

package/colors.css

@@ -565,7 +565,20 @@
     --Colors-Warm-Mauve-800: #855878;
     --Colors-Warm-Mauve-900: #6a4660;
     --Colors-Warm-Mauve-950: #4c3145;
-    /* Secondary brand accents (single tokens, Figma Brand palette · Secondary) */
+    /* Secondary brand accents (single tokens, Figma Brand palette · Secondary)
+
+       DO NOT USE these in product surfaces. Components and pages draw only on
+       the six primary identity ramps above — Journey Green, Deep Teal, Modern
+       Bone, Warm Yellow, Soft Lilac, Warm Mauve — plus the Grey ramp and the
+       semantic tokens (success / warning / error / info).
+
+       They are defined here for completeness against the Figma palette, which
+       is why they have no ramp: single values only, so they cannot carry text
+       either. Cornflower measures 3.2:1 on white and Apricot Lift 2.25:1, both
+       short of the 4.5:1 that WCAG 1.4.3 asks of body text.
+
+       One accepted exception: --color-button-primary-hover consumes Plum Ink
+       (see tokens.css). That is deliberate and predates this note. */
     --Colors-Apricot-Lift: #e89b6c;
     --Colors-Cornflower: #6e8fd6;
     --Colors-Marigold: #f2b33c;

package/components/badge.css

@@ -1,19 +1,30 @@
 .rsui-badge {
-    @apply inline-flex items-center justify-center gap-x-1;
+    /* whitespace-nowrap: a badge is a pill, so its label must stay on one line. Without it
+       a badge in a narrow column wrapped to two lines and grew to 42px tall — seen in
+       production on the Twinsies home page, where "1 answer to redo" and "2 answers to redo"
+       both broke across two lines inside a rounded-full chip. Every other chip-shaped
+       control in the system already declares this: Pill, ButtonSlot, TabSliderItem and
+       SwitcherItem. Badge was the only one that did not. */
+    @apply inline-flex items-center justify-center gap-x-1 whitespace-nowrap;
     @apply w-fit h-fit rounded-full;
     @apply text-sm font-medium leading-4;
 }
 
+/* Horizontal padding grows with the size: it used to sit at px-2 for xs, sm and md alike,
+   so a md badge was exactly as wide as an xs one and its 8/8 padding collapsed to square —
+   on a rounded-full shape that puts the label closer to the curved ends than to the flat
+   top and bottom. The 8 / 10 / 12 progression matches Pill, the other chip in the system.
+   Vertical padding is untouched, so no badge changes height. */
 .rsui-badge--xs {
     @apply text-xs leading-3 px-2 py-0.5;
 }
 
 .rsui-badge--sm {
-    @apply px-2 py-1;
+    @apply px-2.5 py-1;
 }
 
 .rsui-badge--md {
-    @apply px-2 py-2;
+    @apply px-3 py-2;
 }
 
 .rsui-badge--secondary {
@@ -40,6 +51,12 @@
     @apply text-brand-500 bg-brand-50 border border-brand-200;
 }
 
+/* Classic and Coach still ride the pre-rebrand pink and redseed-blue ramps rather than the
+   current brand ones (Skillscheck above already moved to Journey Green). Left as-is on
+   purpose: both categories are due to be phased out, so re-homing them onto brand colours
+   would be churn. There is also only one unclaimed brand ramp (Deep Teal) against two
+   categories — Journey Green, Warm Mauve and Modern Bone are taken by brand, AI and page
+   grounds. Revisit only if the phase-out stalls. */
 .rsui-badge--classic {
     @apply text-pink-500 bg-pink-50 border border-pink-200;
 }

package/components/button_card.css

@@ -1,5 +1,8 @@
+/* ButtonCard now takes the family's tonal hover from .rsui-card--hoverable, which it opts
+   into via :hoverable="!disabled". It previously cancelled the card shadow and darkened the
+   border instead — the only bespoke hover treatment in the family, and the reason hovering
+   a ButtonCard looked nothing like hovering a Card. */
 .rsui-button-card {
-    @apply hover:shadow-none hover:border-text-primary;
 }
 
 .rsui-button-card--disabled {

package/components/button_slot.css

@@ -53,8 +53,13 @@
 }
 
 /* modifier xs size */
+/* px-2.5, not px-1.5: horizontal padding steps 10/12/14/16/18/20 across xs..2xl, and
+   xs was the only size where px equalled py — every other size runs 1.4-1.6x wider than
+   tall, so an xs label sat 6px from the border and read visibly cramped. Height is
+   unchanged (py untouched); only the button's width grows. --xs-icon keeps its own p-1.5
+   because a square icon button is correct at that size. */
 .rsui-button-slot--xs {
-    @apply text-sm px-1.5 py-1.5 gap-1;
+    @apply text-sm px-2.5 py-1.5 gap-1;
 }
 
 /* modifier xs size with icon */

package/components/button_tertiary.css

@@ -3,13 +3,20 @@
     @apply text-button-tertiary bg-transparent border-transparent;
 
     /* default hover state */
-    @apply hover:text-button-tertiary-hover hover:bg-transparent hover:border-button-tertiary-hover;
+    /* A ghost button fills faintly on hover; it must not sprout an outline. This used to
+       set border-button-tertiary-hover, taking the border from transparent to solid
+       #124943 — so hovering a borderless button made a hard dark rule appear, while the
+       fill stayed transparent. That is the inverse of the intended ghost behaviour, and
+       the opposite of primary (fill darkens) and secondary (outline darkens). */
+    @apply hover:text-button-tertiary-hover hover:bg-background-secondary hover:border-transparent;
 
     /* default focus state */
     @apply focus-visible:ring-button-tertiary focus-visible:border-transparent;
 
     /* default active state */
-    @apply active:bg-transparent active:border-transparent;
+    /* Pressed goes one step darker than hover (transparent -> Grey-50 -> Grey-100) so the
+       press reads as deeper rather than clearing the hover fill back to nothing. */
+    @apply active:text-button-tertiary-active active:bg-background-tertiary-invert active:border-transparent;
 
     /* default disabled state */
     @apply disabled:bg-transparent disabled:border-transparent disabled:text-text-disabled;

package/components/card.css

@@ -68,6 +68,9 @@
     @apply relative border-0;
 }
 
+/* Positioning only. The dashed outline itself is drawn by the <rect> inside this element —
+   it is an <svg>, and the rect strokes 1px with stroke-dasharray 8 16. Do not add CSS border
+   utilities here: they paint a second dashed edge on top of the SVG stroke. */
 .rsui-card__draft-border {
     @apply absolute inset-0 size-full pointer-events-none rounded-xl border-border-secondary;
 }
@@ -79,8 +82,20 @@
     @apply overflow-x-hidden;
 }
 
-.rsui-card--hoverable {
-    @apply hover:shadow-md;
+/* Hover state layer. The card family is an Outlined system — flat, 1px border, no resting
+   elevation — so hover tints the surface rather than lifting it. Two reasons this is a
+   ::before scrim and not a background-color swap: every colour variant (secondary, brand,
+   success, info, warning, error, draft, ai) has to survive underneath it, and a scrim
+   composites over the ai variant's gradient where a flat colour could not. ::before rather
+   than ::after so it paints beneath the card's content in DOM order. */
+.rsui-card--hoverable::before {
+    content: '';
+    @apply absolute inset-0 rounded-xl pointer-events-none;
+    @apply bg-background-primary-contrast opacity-0 transition-opacity duration-200;
+}
+
+.rsui-card--hoverable:hover::before {
+    @apply opacity-5;
 }
 
 .rsui-card--clickable {
@@ -105,6 +120,12 @@
    colour alone (WCAG 1.4.1). */
 .rsui-card__action-layer--active {
     @apply ring-2 ring-offset-2 ring-brand-500;
+
+    /* Hold the brand ring through focus. Without this the focus-visible rule above repaints
+       the ring border-primary grey, so focusing a selected card silently dropped its
+       selection cue — the ring is the same geometry for both states, so only colour carries
+       the difference. */
+    @apply focus-visible:ring-brand-500;
 }
 
 .rsui-card__action-layer-label {

package/components/card_header.css

@@ -28,6 +28,17 @@
     @apply @md/card-header:items-center;
 }
 
+/* Centring only holds while the text block is a lone title. `--single-line` means the *title*
+   is clamped to one line, not that the header is one row — add a subtitle and a badge and the
+   block is 78px tall, where centring a 48px avatar left it sitting 15px low against the text
+   it belongs to. Seen in production on the Twinsies meeting cards. Top-align as soon as the
+   block carries more than the title; a lone title is shorter than the avatar, so centring
+   stays correct there. */
+.rsui-card-header__header--single-line:has(.rsui-card-header__subtitle),
+.rsui-card-header__header--single-line:has(.rsui-card-header__badge) {
+    @apply @md/card-header:items-start;
+}
+
 .rsui-card-header__avatar {
     @apply w-12 overflow-hidden flex items-center justify-center;
 }

package/components/checkbox_card.css

@@ -83,7 +83,10 @@
 /* Success state styling */
 /* Increase specificity so it overrides base .rsui-card styles */
 .rsui-card.rsui-checkbox-card--success {
-    @apply bg-success-100 border-border-success;
+    /* bg-background-success, not the raw bg-success-100 palette step: this was the only
+       success surface in the library painting #DCFAE6 while Card, Badge, MessageBox and
+       Section all use the #ECFDF3 token — two different success greens, same border. */
+    @apply bg-background-success border-border-success;
 }
 
 .rsui-checkbox-card--success .rsui-checkbox-card__title-text {

package/components/comment.css

@@ -78,7 +78,9 @@
 }
 
 .rsui-comment__body {
-    @apply py-3 px-4 rounded-xl border;
+    /* 14px vertical, matching the row rhythm ListItem uses — a comment is a row of prose
+       and read tight against its neighbour at 12px. */
+    @apply py-3.5 px-4 rounded-xl border;
     @apply rounded-tl-none ml-8;
     @apply text-text-primary bg-background-primary;
     @apply border-border-primary;

package/components/form_field_checkbox.css

@@ -7,7 +7,9 @@
 }
 
 .rsui-form-field-checkbox__check {
-    @apply size-6 shrink-0 relative bg-background-primary rounded-lg cursor-pointer;
+    /* Centres the tick. The input is absolutely positioned so it stays out of flow and keeps
+       filling the box; only the SVG is laid out here. */
+    @apply size-6 shrink-0 relative flex items-center justify-center bg-background-primary rounded-lg cursor-pointer;
     @apply has-[:disabled]:text-text-disabled has-[:disabled]:cursor-default;
 }
 
@@ -16,11 +18,21 @@
     @apply w-full h-full text-text-primary border border-border-primary text-transparent bg-none;
     @apply focus-visible:ring-3 focus-visible:ring-border-primary focus-visible:border-border-primary;
     @apply invalid:border-border-error invalid:ring-0;
+
+    /* Checked fills the box and the tick inverts, which is how every mainstream checkbox
+       reads. It used to stay transparent, so a checked box was a white square with a dark
+       tick — and the success variant already filled, so the default was the odd one out. */
+    @apply checked:bg-text-primary checked:border-text-primary;
+
     @apply disabled:text-text-disabled disabled:bg-background-disabled disabled:cursor-default;
+    @apply disabled:checked:bg-background-disabled disabled:checked:border-border-disabled;
 }
 
+/* The tick is inset rather than size-full. At size-full a 24px glyph sat in a 24px box with
+   no breathing room, so its strokes ran into the border and the control read cramped. Each
+   size keeps roughly a 4px optical inset — see the sm/xs overrides further down. */
 .rsui-form-field-checkbox__check svg {
-    @apply size-full relative z-1 pointer-events-none stroke-[2.5] origin-center;
+    @apply size-4 relative z-1 pointer-events-none stroke-[2.5] origin-center;
     /* Short, cute draw-on: the tick strokes itself in with a tiny pop.
        dasharray is set a touch above the check path length so the resting
        state has no gap. Disabled under reduced-motion below. */
@@ -28,6 +40,12 @@
     animation: rsui-checkbox-tick 200ms ease-out;
 }
 
+/* Invert the tick against the filled box. Scoped to :not(:disabled) because a disabled
+   checked box keeps the pale disabled fill, where an inverted tick would disappear. */
+.rsui-form-field-checkbox__check:has(input:checked:not(:disabled)) svg {
+    @apply text-text-on-color;
+}
+
 @keyframes rsui-checkbox-tick {
     0% { stroke-dashoffset: 30; transform: scale(0.8); }
     60% { transform: scale(1.06); }
@@ -53,6 +71,10 @@
     @apply rounded-md;
 }
 
+.rsui-form-field-checkbox__check--sm svg {
+    @apply size-3;
+}
+
 .rsui-form-field-checkbox__label--sm {
     @apply leading-5 text-sm;
 }
@@ -65,6 +87,10 @@
     @apply rounded;
 }
 
+.rsui-form-field-checkbox__check--xs svg {
+    @apply size-2;
+}
+
 .rsui-form-field-checkbox__label--xs {
     @apply leading-4 text-xs;
 }

package/components/form_fields_login.css

@@ -1,4 +1,15 @@
+/* The field group owns its own spacing. It used to render a bare list of siblings and
+   inherit spacing from `.rsui-form-slot__content > *`, so anywhere that ancestor was absent —
+   including every one of its own stories — the fields and the submit button collapsed flush
+   against each other with a 0px gap. gap-space-md (16px) matches the mt-4 that rule applied,
+   so the group is unchanged inside FormSlot and correct everywhere else. */
+.rsui-form-fields-login {
+    @apply flex flex-col gap-space-md;
+}
+
+/* pt-4 dropped: the group's gap-space-md now supplies the 16px above this link, and
+   keeping both stacked them into 32px. */
 .rsui-form-login__signup {
-    @apply text-sm pt-4;
+    @apply text-sm;
 }
 

package/components/form_fields_register.css

@@ -1,4 +1,15 @@
+/* The field group owns its own spacing. It used to render a bare list of siblings and
+   inherit spacing from `.rsui-form-slot__content > *`, so anywhere that ancestor was absent —
+   including every one of its own stories — the fields and the submit button collapsed flush
+   against each other with a 0px gap. gap-space-md (16px) matches the mt-4 that rule applied,
+   so the group is unchanged inside FormSlot and correct everywhere else. */
+.rsui-form-fields-register {
+    @apply flex flex-col gap-space-md;
+}
+
+/* pt-4 dropped: the group's gap-space-md now supplies the 16px above this link, and
+   keeping both stacked them into 32px. */
 .rsui-form-register__signin {
-    @apply text-sm pt-4;
+    @apply text-sm;
 }
 

package/components/list_item.css

@@ -1,5 +1,9 @@
 .rsui-list-item {
-    @apply relative flex flex-col rounded-xl p-3 overflow-hidden;
+    /* 14px vertical rather than the 12px of a flat p-3: at 12px a two-line row reads as
+       cramped against its neighbours, which is the note that came back from laying these
+       out on a real page. Horizontal padding is unchanged. Half-steps are already used
+       across the button sizes, so 3.5 is in keeping. */
+    @apply relative flex flex-col rounded-xl px-3 py-3.5 overflow-hidden;
 }
 
 .rsui-list-item--clickable {
@@ -69,6 +73,65 @@
     @apply mt-2 flex flex-wrap gap-x-4 gap-y-2;
 }
 
+/* Leading icon. Inline, unlike .rsui-list-item__avatar above, which hangs outside the row
+   box on a negative offset — an avatar identifies a person, an icon classifies the row, so
+   they sit differently and can be used together. */
+.rsui-list-item__icon {
+    @apply shrink-0 size-8 rounded-lg overflow-hidden;
+    @apply flex items-center justify-center;
+    @apply bg-background-secondary;
+}
+
+.rsui-list-item__icon svg {
+    @apply size-4;
+}
+
+/* Accent rail — a pseudo-element, so an accented row has the same DOM as a plain one.
+   Needs z-1 to sit above .rsui-list-item__bg, which is absolute and would otherwise paint
+   over it; the root's rounded-xl clips the rail into the corner. */
+.rsui-list-item--accented::before {
+    content: '';
+    @apply absolute left-0 top-0 bottom-0 w-1 z-1 pointer-events-none;
+}
+
+.rsui-list-item--accent-warning::before {
+    @apply bg-background-warning-contrast;
+}
+
+.rsui-list-item--accent-info::before {
+    @apply bg-background-info-contrast;
+}
+
+.rsui-list-item--accent-success::before {
+    @apply bg-background-success-contrast;
+}
+
+.rsui-list-item--accent-error::before {
+    @apply bg-background-error-contrast;
+}
+
+.rsui-list-item--accent-neutral::before {
+    @apply bg-background-primary-contrast;
+}
+
+/* The icon tile takes the accent's own tint when both are used, so the rail and the tile
+   read as one mark rather than two. */
+.rsui-list-item--accent-warning .rsui-list-item__icon {
+    @apply bg-background-warning;
+}
+
+.rsui-list-item--accent-info .rsui-list-item__icon {
+    @apply bg-background-info;
+}
+
+.rsui-list-item--accent-success .rsui-list-item__icon {
+    @apply bg-background-success;
+}
+
+.rsui-list-item--accent-error .rsui-list-item__icon {
+    @apply bg-background-error;
+}
+
 .rsui-list-item__description {
     @apply line-clamp-2 mt-2 text-base;
 }

package/components/message_box.css

@@ -22,6 +22,20 @@
     @apply bg-background-error border-border-error text-text-primary;
 }
 
+/* AI. Same surface language ButtonAI and .rsui-card--ai already use — the warm
+   gradient with the Warm Mauve border — so an AI message reads as the same
+   family as an AI action. The title carries text-ai for identity; the body stays
+   text-primary, because a whole paragraph in Warm Mauve is harder to read and
+   the border plus gradient already say "AI". */
+.rsui-message-box--ai {
+    @apply bg-linear-to-tr from-background-ai-from to-background-ai-to;
+    @apply border-border-ai text-text-primary;
+}
+
+.rsui-message-box--ai .rsui-message-box__title {
+    @apply text-text-ai;
+}
+
 .rsui-message-box__head {
     @apply flex justify-between items-center gap-x-2;
 }

package/components/meta_info.css

@@ -2,16 +2,23 @@
     @apply flex flex-col gap-y-1;
 }
 
+/* gap-x rather than space-x: space-* works by adding margins to children, which is the
+   legacy pattern, double-counts against any gap and breaks once the row wraps. Every other
+   component in the library spaces with gap. */
 .rsui-meta-info__top {
-    @apply flex space-x-1 items-center;
+    @apply flex gap-x-1 items-center;
 }
 
 .rsui-meta-info__label-icon {
     @apply flex items-center justify-center;
 }
 
+/* The label is the descriptor, so it recedes: medium weight in the tertiary tone. It used to
+   be semibold near-black while the value was regular grey, which inverted the hierarchy — the
+   eye landed on "Age" instead of on the number. Grey-600 on white measures 7.26:1, so it stays
+   comfortably readable at 12px. */
 .rsui-meta-info__label {
-    @apply font-semibold text-xs text-text-primary;
+    @apply font-medium text-xs text-text-tertiary;
 }
 
 .rsui-meta-info__help {
@@ -22,9 +29,10 @@
     @apply focus-visible:ring-offset-2 focus-visible:ring-2 focus-visible:ring-border-primary;
 }
 
+/* The value carries the information, so it takes the emphasis the label gave up. */
 .rsui-meta-info__value {
     @apply flex items-center gap-x-space-xs;
-    @apply text-xs text-text-secondary;
+    @apply text-xs font-semibold text-text-primary;
 }
 
 .rsui-meta-info--md .rsui-meta-info__label {

package/components/metric_card.css

@@ -37,4 +37,73 @@
    selection ring (WCAG 1.4.1); the brand number is colour reinforcement only. */
 .rsui-metric-card--active .rsui-metric-card__number {
     @apply text-text-brand;
-}
+}
+
+/* ---------------------------------------------------------------------------
+   Tonal variants
+
+   Same vocabulary and same mechanism as .rsui-page-header — green / teal /
+   light, with surface, ink, muted ink and rule moving together as a named set,
+   carried on --rsui-metric-card-* custom properties. Plain properties rather
+   than new @theme keys, for the reasons in #285.
+
+   The tile is a step LIGHTER than the band it sits on (Journey Green 700 on an
+   800 band), so it reads as a raised panel. Each tone names an explicit surface
+   rather than a translucent white, so a toned tile still works standing alone
+   where there is no band beneath it to show through.
+
+   metric_card.css imports after card.css, so these single-class rules out-rank
+   .rsui-card's own surface at equal specificity. Combining a tone with one of
+   Card's semantic variants (brand, success, …) is not supported — pick one.
+   --------------------------------------------------------------------------- */
+.rsui-metric-card--toned {
+    background: var(--rsui-metric-card-surface, var(--color-background-secondary));
+    border-color: var(--rsui-metric-card-rule, var(--color-border-primary));
+}
+
+.rsui-metric-card--tone-green {
+    --rsui-metric-card-surface: var(--Colors-Journey-Green-700);
+    --rsui-metric-card-ink: var(--Colors-Base-white);
+    /* 200, not the 300 PageHeader uses. The tile surface is a step lighter than the
+       header band it sits on, and 300 on 700 measures 4.46:1 — a hair under AA. */
+    --rsui-metric-card-ink-muted: var(--Colors-Journey-Green-200);
+    --rsui-metric-card-rule: rgba(255, 255, 255, 0.18);
+}
+
+.rsui-metric-card--tone-teal {
+    --rsui-metric-card-surface: var(--Colors-Deep-Teal-600);
+    --rsui-metric-card-ink: var(--Colors-Base-white);
+    --rsui-metric-card-ink-muted: var(--Colors-Deep-Teal-300);
+    --rsui-metric-card-rule: rgba(255, 255, 255, 0.18);
+}
+
+/* The white-label case: same layout, inverted ink. */
+.rsui-metric-card--tone-light {
+    --rsui-metric-card-surface: var(--Colors-Modern-Bone-200);
+    --rsui-metric-card-ink: var(--Colors-Grey-900);
+    --rsui-metric-card-ink-muted: var(--Colors-Grey-600);
+    --rsui-metric-card-rule: var(--Colors-Grey-300);
+}
+
+/* Tone-agnostic: only the variable values differ, so the light tone resolves
+   these same selectors to dark ink. */
+.rsui-metric-card--toned .rsui-metric-card__number {
+    color: var(--rsui-metric-card-ink);
+}
+
+.rsui-metric-card--toned .rsui-metric-card__label {
+    color: var(--rsui-metric-card-ink-muted);
+}
+
+.rsui-metric-card--toned .rsui-metric-card__icon {
+    color: var(--rsui-metric-card-ink-muted);
+}
+
+/* The active state's brand-coloured number is colour reinforcement only — the
+   Card action layer carries the actual selection ring (WCAG 1.4.1). On a tonal
+   surface that reinforcement has to go: text-brand is Brand-500 (#136c52),
+   which against the green tile's #0e5942 is about 1.3:1 and simply invisible.
+   The ring still does the work. */
+.rsui-metric-card--toned.rsui-metric-card--active .rsui-metric-card__number {
+    color: var(--rsui-metric-card-ink);
+}

package/components/page_header.css

@@ -77,3 +77,79 @@
     @apply flex flex-col gap-1 lg:flex-row lg:items-center lg:gap-4;
 }
 
+
+/* ---------------------------------------------------------------------------
+   Tonal variants
+
+   White-labelling is why these are named sets rather than a background prop.
+   Pass a colour alone and a client who picks a light one gets white text on
+   white; background, ink, muted ink and rule have to move together, the way
+   Card handles its variants.
+
+   Plain custom properties rather than new @theme keys, for two reasons: the
+   four values must travel as a set, and a new theme key does not reliably
+   generate a utility — the trap in #285 that made every focus ring invisible.
+   Same pattern .rsui-stage-dial already uses for its accent.
+
+   A toned header carries its own padding, because the band has to read as a
+   band. Place it outside the page's content gutter so it bleeds to the edges;
+   an untoned header is unchanged and still inherits the layout's padding.
+   --------------------------------------------------------------------------- */
+.rsui-page-header--toned {
+    /* Fallbacks keep an unrecognised tone legible rather than transparent. */
+    background: var(--rsui-page-header-bg, var(--color-background-secondary));
+
+    @apply py-space-lg px-space-xl;
+}
+
+.rsui-page-header--tone-green {
+    --rsui-page-header-bg: var(--Colors-Journey-Green-800);
+    --rsui-page-header-ink: var(--Colors-Base-white);
+    --rsui-page-header-ink-muted: var(--Colors-Journey-Green-300);
+    --rsui-page-header-rule: rgba(255, 255, 255, 0.18);
+}
+
+.rsui-page-header--tone-teal {
+    --rsui-page-header-bg: var(--Colors-Deep-Teal-700);
+    --rsui-page-header-ink: var(--Colors-Base-white);
+    --rsui-page-header-ink-muted: var(--Colors-Deep-Teal-300);
+    --rsui-page-header-rule: rgba(255, 255, 255, 0.18);
+}
+
+/* The white-label case. Same layout, inverted ink — a client's own background
+   may be light, so the component cannot assume light-on-dark. */
+.rsui-page-header--tone-light {
+    --rsui-page-header-bg: var(--Colors-Base-white);
+    --rsui-page-header-ink: var(--Colors-Grey-900);
+    --rsui-page-header-ink-muted: var(--Colors-Grey-600);
+    --rsui-page-header-rule: var(--Colors-Grey-300);
+}
+
+/* Ink application is tone-agnostic: only the variable values differ, so the
+   light tone resolves these to dark ink through the same rules. */
+.rsui-page-header--toned .rsui-page-header__title h1 {
+    color: var(--rsui-page-header-ink);
+}
+
+.rsui-page-header--toned .rsui-page-header__subtitle {
+    color: var(--rsui-page-header-ink-muted);
+}
+
+.rsui-page-header--toned .rsui-page-header__meta {
+    border-top: 1px solid var(--rsui-page-header-rule);
+
+    @apply mt-space-md pt-space-md;
+}
+
+/* MetaInfo sets its own dark label and value tokens, which disappear on a dark
+   band. Reaching into another component's classes is not ideal, but an
+   invisible meta row is worse, and what a slot looks like on this component's
+   own tonal surface is this stylesheet's business. */
+.rsui-page-header--toned .rsui-meta-info__label {
+    color: var(--rsui-page-header-ink);
+}
+
+.rsui-page-header--toned .rsui-meta-info__value,
+.rsui-page-header--toned .rsui-meta-info__help {
+    color: var(--rsui-page-header-ink-muted);
+}

package/components/radio_card.css

@@ -1,25 +1,50 @@
 .rsui-radio-card {
     @apply relative cursor-pointer transition-all;
-    @apply rounded-xl shadow-xs outline-hidden select-none;
-    @apply flex flex-col gap-3 p-3 max-w-80 w-80;
+    /* No resting shadow: this was the only card in the family that sat lifted while the
+       other seven are flat. Padding matches the family's 24/32 rhythm rather than the 12/12
+       it used to carry alone. ring-offset-2 matches the focus geometry every other card
+       uses — this ring previously hugged the border with no offset. */
+    @apply rounded-xl outline-hidden select-none;
+    @apply flex flex-col gap-3 py-space-lg px-space-xl max-w-80 w-80;
     @apply bg-background-primary border border-border-primary;
-    @apply focus-visible:ring-2 focus-visible:ring-border-primary;
+    @apply focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-border-primary;
+}
+
+/* Hover state layer, matching .rsui-card--hoverable. ::before because ::after already
+   carries the disabled scrim below. */
+.rsui-radio-card::before {
+    content: '';
+    @apply absolute inset-0 rounded-xl pointer-events-none;
+    @apply bg-background-primary-contrast opacity-0 transition-opacity duration-200;
+}
+
+.rsui-radio-card:hover::before {
+    @apply opacity-5;
+}
+
+.rsui-radio-card--disabled:hover::before {
+    @apply opacity-0;
 }
 
 .rsui-radio-card--flexible {
     @apply max-w-full w-full;
 }
 
+/* Selection is the family's brand ring — the same ring-2 / ring-offset-2 / brand-500 that
+   Card's action layer and CardGroup use. This used to be a 10% translucent scrim, a third
+   distinct idiom for "selected" in one component family. The ring is a shape boundary
+   (present vs absent) rather than colour alone, which is the WCAG 1.4.1 property Card's own
+   comment calls out, and it holds its brand colour through focus. */
 .rsui-radio-card--selected {
-    @apply focus-visible:ring-0 border-border-primary;
-
-    @apply after:content-[''] after:absolute after:inset-0 after:rounded-md after:opacity-10 after:bg-background-primary-contrast;
+    @apply ring-2 ring-offset-2 ring-brand-500 border-border-primary;
+    @apply focus-visible:ring-brand-500;
 }
 
 .rsui-radio-card--disabled {
     @apply focus-visible:ring-0 border-border-disabled cursor-default;
 
-    @apply after:content-[''] after:absolute after:inset-0 after:rounded-md after:opacity-60 after:bg-background-disabled;
+    /* Same corner correction as --selected above, and more visible here at 60% opacity. */
+    @apply after:content-[''] after:absolute after:inset-0 after:rounded-xl after:opacity-60 after:bg-background-disabled;
 }
 
 .rsui-radio-card__title-row {

package/components/section_header.css

@@ -44,12 +44,24 @@
     @apply basis-full;
 }
 
+/* Redundant now that the base badge carries no margin — kept as a guard so re-adding one
+   cannot break the stacked layout, where the badge starts a new line and must sit flush. */
 .rsui-section-header__title--stacked .rsui-section-header__badge {
     @apply ml-0;
 }
 
+/* ACTION SIZE: section-header actions belong at `sm`, not the button default of `md`. A md
+   button is 42px against a 32px title box, so a cluster of them outweighs the heading they
+   belong to. This is guidance rather than something enforced here: constraining button height
+   from inside the header would silently override a size prop the consumer passed. The stories
+   demonstrate the `sm` pairing.
+
+   TITLE SIZE: text-3xl from lg up. At a flat text-2xl the title box was 32px while even an sm
+   button is 38px, so the heading never led its own actions. Responsive rather than flat, and
+   matching how PageHeader scales, because mobile stacks the actions anyway (see
+   __actions-mobile) and the imbalance only really shows on wide screens. */
 .rsui-section-header__title-text {
-    @apply text-2xl font-bold line-clamp-2 md:line-clamp-1 text-text-primary;
+    @apply text-2xl lg:text-3xl font-bold line-clamp-2 md:line-clamp-1 text-text-primary;
     /* Reset heading UA margins so an <h1>-<h6> title matches the previous <div> */
     /* min-w-0 lets the title shrink and truncate first; the badge is shrink-0 so */
     /* it keeps its size. No flex-1 — a growing title pushes the See-all badge up */
@@ -62,8 +74,10 @@
     @apply line-clamp-none md:line-clamp-none;
 }
 
+/* No ml-space-xs here: the parent is a flex row that already supplies gap-space-xs, so the
+   margin stacked on top of it and the badge sat 16px from its label instead of 8px. */
 .rsui-section-header__badge {
-    @apply ml-space-xs flex items-center shrink-0;
+    @apply flex items-center shrink-0;
 }
 
 .rsui-section-header__subtitle {

package/components/stage_dial.css

@@ -53,6 +53,28 @@
     @apply absolute inset-[15%] flex items-center justify-center text-center;
 }
 
+/* On a coloured or dark surface. The centre content has no colour of its own and
+   inherits the page ink, which on a dark band is near-invisible — this is the
+   only thing the variant needs to change. Same mechanism as
+   .rsui-body-text--on-color, including the child selector, since the slot
+   usually holds its own elements.
+
+   The track is deliberately NOT changed, because measuring said it did not need
+   to be. Grey-400 against the two tonal bands:
+
+     on Journey Green 800 (#0a4c38)   4.13:1
+     on Deep Teal 700     (#0c3035)   5.84:1
+
+   both clear of the 3:1 WCAG 1.4.11 asks of a non-text graphic. The obvious
+   "improvement" would have made it worse: a translucent white track, which is
+   what this looked like in the mock, measures 1.64:1 at 18% and 2.61:1 at 35%
+   — both failures. If a consumer wants the track tinted to their band, that is
+   a --rsui-stage-dial-* style override, not a default. */
+.rsui-stage-dial--on-color .rsui-stage-dial__content {
+    @apply text-text-on-color;
+    @apply *:text-text-on-color;
+}
+
 @media (prefers-reduced-motion: reduce) {
     .rsui-stage-dial--animate .rsui-stage-dial__fill {
         transition: none;

package/components/switcher.css

@@ -14,3 +14,49 @@
 .rsui-switcher .rsui-switcher-item {
     @apply w-full sm:w-fit;
 }
+
+/* Chips variant — a filter chip set rather than a segmented control. Opt in with
+   the `chips` prop; the default is untouched.
+
+   Two differences, and both are the reason it exists:
+     1. No tonal container, so the chips sit directly on the page rather than in
+        a grey well.
+     2. One row that scrolls sideways when it runs out of width, instead of
+        stacking. The default stacks below `sm` — documented and deliberate for a
+        segmented control — but a stacking chip set makes its container grow by an
+        unpredictable number of lines, which is what this avoids.
+
+   Every rule below has to out-specify a same-specificity rule above it, so this
+   block must stay last in the file. */
+.rsui-switcher--chips {
+    @apply w-full flex-row items-center flex-nowrap gap-2;
+    @apply bg-transparent p-0 rounded-none;
+
+    /* The default is overflow-hidden; this row is meant to scroll. Scrollbar
+       hidden to match .rsui-tab-slider, which already does exactly this. */
+    @apply overflow-x-auto;
+    scrollbar-width: none;
+}
+
+.rsui-switcher--chips::-webkit-scrollbar {
+    display: none;
+}
+
+/* Overrides `w-full sm:w-fit` above: a chip is sized by its own label at every
+   width, never stretched to fill the row. */
+.rsui-switcher--chips .rsui-switcher-item {
+    @apply w-fit rounded-full;
+    @apply bg-background-primary text-text-secondary border-border-primary;
+
+    /* 44px, so a chip clears the Apple HIG touch target on a phone. The default
+       item computes to 42px and is deliberately left alone. */
+    @apply min-h-11;
+}
+
+.rsui-switcher--chips .rsui-switcher-item--active {
+    @apply bg-background-primary-contrast text-text-on-color border-transparent;
+}
+
+.rsui-switcher--chips .rsui-switcher-item--disabled {
+    @apply bg-background-disabled text-text-disabled border-transparent;
+}

package/components/switcher_item.css

@@ -1,7 +1,24 @@
+/* The item is a native <button role="tab"> so it is keyboard operable and announces as a
+   tab (it used to be a click-handled <div>, which no keyboard could reach). These plain
+   declarations strip the UA button chrome so the visual design is unchanged — written out
+   rather than assumed from Tailwind preflight, because RSUI's index.css does not import
+   Tailwind itself and the consuming app may not ship preflight. */
 .rsui-switcher-item {
+    appearance: none;
+    background: none;
+    margin: 0;
+    border: 0 solid transparent;
+    font: inherit;
+    color: inherit;
+
     @apply h-fit inline-flex shrink-0 items-center justify-center select-none outline-hidden whitespace-nowrap will-change-transform cursor-pointer;
     @apply font-semibold gap-2 rounded-lg border border-transparent transition;
     @apply text-base px-3 py-2;
+
+    /* The class list above sets outline-hidden, which previously left the item with no focus
+       indicator at all once it became focusable. Drawn inset because .rsui-switcher is
+       overflow-hidden and would clip an offset ring. */
+    @apply focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-border-primary;
 }
 
 .rsui-switcher-item--active {
@@ -16,6 +33,8 @@
     @apply size-6;
 }
 
+/* No ml-space-xs here: the parent is a flex row that already supplies gap-space-xs, so the
+   margin stacked on top of it and the badge sat 16px from its label instead of 8px. */
 .rsui-switcher-item__badge {
-    @apply ml-space-xs flex items-center;
-}
+    @apply flex items-center;
+}

package/components/tab_slider_item.css

@@ -1,7 +1,26 @@
+/* The item is a native <button role="tab"> so it is keyboard operable and announces as a
+   tab (it used to be a click-handled <div>, which no keyboard could reach). These plain
+   declarations strip the UA button chrome so the visual design is byte-for-byte unchanged.
+   They are written out rather than assumed from Tailwind preflight because RSUI's index.css
+   does not import Tailwind itself — the consuming app does, and may not ship preflight.
+   The border reset matters most: the @apply below sets only `border-b-2`, so without an
+   all-sides width of 0 the UA's default `medium outset` border would remain on the other
+   three sides and widen every tab. */
 .rsui-tab-slider-item {
+    appearance: none;
+    background: none;
+    margin: 0;
+    border: 0 solid transparent;
+    font: inherit;
+    color: inherit;
+
     @apply inline-flex shrink-0 items-center justify-center select-none cursor-pointer whitespace-nowrap;
     @apply text-base px-4 py-3 gap-2 border-b-2 border-transparent -mb-px;
     @apply text-text-secondary;
+
+    /* Focus is drawn inside the box: .rsui-tab-slider is an overflow-x-auto scroller, so an
+       offset ring on the first or last tab would be clipped by it. */
+    @apply outline-hidden focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-border-primary;
 }
 
 .rsui-tab-slider-item--active {
@@ -16,6 +35,8 @@
     @apply size-5;
 }
 
+/* No ml-space-xs here: the parent is a flex row that already supplies gap-space-xs, so the
+   margin stacked on top of it and the badge sat 16px from its label instead of 8px. */
 .rsui-tab-slider-item__badge {
-    @apply ml-space-xs flex items-center;
+    @apply flex items-center;
 }

package/components.css

@@ -54,7 +54,6 @@ Please be careful when adding new components and updating the order.
 @import './components/form_wrapper_build.css';
 @import './components/form_wrapper_lms.css';
 @import './components/grid_container.css';
-@import './components/hero_section.css';
 @import './components/icon.css';
 @import './components/image.css';
 @import './components/image_16by9.css';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@redseed/redseed-ui-tailwindcss",
-    "version": "7.55.0",
+    "version": "7.56.0",
     "description": "RedSeed UI Tailwindcss",
     "main": "index.js",
     "style": "index.css",

package/tokens.css

@@ -12,7 +12,11 @@
     --color-text-warning: #b54708;
     --color-text-error: #b42318;
     --color-text-info: #0077cc;
-    --color-text-ai: var(--Colors-Warm-Mauve-600);
+    /* Warm-Mauve-800, not -600: the AI treatments set this over the pale AI gradient
+       (#ebe0fa -> #fff6eb), where -600 measured 2.93:1 and failed WCAG AA for 14px text.
+       -800 clears it at 4.52:1 at the gradient's worst point. Consumed by Badge AI,
+       Button AI, the AI body-text modifier and the AI icon treatments. */
+    --color-text-ai: var(--Colors-Warm-Mauve-800);
     --color-text-on-color: var(--Colors-Base-white);
 
     --color-background-primary: var(--Colors-Base-white);

package/components/hero_section.css

@@ -1,32 +0,0 @@
-.rsui-hero-section {
-    @apply rounded-xl px-5 py-6 flex flex-col gap-4 md:gap-6 relative overflow-hidden bg-text-primary text-text-on-color;
-}
-
-.rsui-hero-section::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background-size: auto;
-    background-position: right center;
-    background-repeat: no-repeat;
-    opacity: 1;
-    z-index: 0;
-}
-
-.rsui-hero-section > * {
-    position: relative;
-    z-index: 1;
-}
-
-.rsui-hero-section__cards {
-    @apply grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-6;
-}
-
-.rsui-hero-section__cards--hidden {
-    @apply hidden;
-}
-
-.rsui-hero-section__content--hidden {
-    @apply hidden;
-}
-