@redseed/redseed-ui-tailwindcss 7.55.0 → 7.57.0

package/components/message_box.css

@@ -1,5 +1,46 @@
+/*
+ * A row: optional icon, the text column, optional close. `items-start` so the
+ * icon and the close button align with the first line rather than centring
+ * against a tall body.
+ */
 .rsui-message-box {
-    @apply border rounded-lg overflow-hidden p-4 flex flex-col gap-y-3;
+    @apply border rounded-lg overflow-hidden p-4 flex items-start gap-x-3;
+}
+
+/*
+ * The text column. Carries the vertical rhythm the box itself used to own, so a
+ * box with no icon and no actions lays out exactly as it did before.
+ */
+.rsui-message-box__main {
+    @apply flex-1 flex flex-col gap-y-3;
+}
+
+/*
+ * Narrow and with an icon: the icon and the close button take a row of their own
+ * and the text runs full width beneath them, rather than indenting past a column
+ * that costs more than it gives at this width.
+ *
+ * Ordering is what makes it work — the DOM runs icon, text, close, so without it
+ * the full-width text column would wrap between the two and strand the close
+ * button on a third row. Scoped to `--with-icon` because a box with no icon has
+ * no column to escape: its close button already sits beside the title, and a
+ * lone X on its own row would be a wasted line.
+ *
+ * The box itself sets only `gap-x`, which buys nothing once these become two
+ * flex lines — so the row gap is set here, matching the text column's own
+ * rhythm. Inert at `sm:flex-nowrap`, where there is only ever one line.
+ */
+.rsui-message-box--with-icon {
+    @apply flex-wrap gap-y-3 sm:flex-nowrap;
+}
+
+.rsui-message-box--with-icon .rsui-message-box__close {
+    @apply order-2 ms-auto sm:order-3 sm:ms-0;
+}
+
+/* `sm:basis-0` rather than `basis-auto`, to restore exactly what `flex-1` sets. */
+.rsui-message-box--with-icon .rsui-message-box__main {
+    @apply order-3 basis-full sm:order-2 sm:basis-0;
 }
 
 .rsui-message-box--default {
@@ -22,18 +63,91 @@
     @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;
+    @apply flex items-center gap-x-2;
 }
 
 .rsui-message-box__content {
-    @apply flex justify-between items-start gap-x-2;
+    @apply flex items-start gap-x-2;
+}
+
+/*
+ * `items-start` so the icon aligns with the first line of the message rather
+ * than centring against a multi-line body. `shrink-0` keeps it from being
+ * squeezed by long text.
+ */
+.rsui-message-box__icon {
+    @apply shrink-0 flex items-center h-6;
+}
+
+/*
+ * Actions sit under the message, indented to the body rather than the icon, so
+ * they read as belonging to the text.
+ *
+ * Neutral, not variant-coloured: a coloured action on a coloured tint is a
+ * contrast problem, and the action is a way out of the message rather than a
+ * restatement of its severity. The dismiss is quieter than whatever the consumer
+ * puts beside it, which is the only hierarchy this row needs.
+ */
+.rsui-message-box__actions {
+    @apply flex flex-wrap items-center gap-x-4 gap-y-2 pt-1;
+}
+
+.rsui-message-box__dismiss,
+.rsui-message-box__action {
+    @apply bg-transparent border-0 p-0 cursor-pointer;
+    @apply text-sm font-semibold transition-colors;
+    @apply hover:underline underline-offset-4 decoration-2;
+    @apply outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-border-primary rounded-sm;
+}
+
+/*
+ * Two tiers, and the only hierarchy this row needs: dismiss is the quieter of
+ * the pair, whatever the consumer puts beside it is the one they want pressed.
+ */
+.rsui-message-box__dismiss {
+    @apply text-text-secondary hover:text-text-primary;
+}
+
+.rsui-message-box__action {
+    @apply text-text-primary;
 }
 
+/*
+ * `-my-2` so the 40px hit target centres on the first 24px line rather than
+ * hanging 8px below it. Under `items-start` the button's own box starts at the
+ * padding edge, which put its glyph at y=36 against a title centred at y=28 —
+ * and, with an icon shown, two icons in the same row not lining up. The negative
+ * margin keeps the target size while claiming only 24px of layout height.
+ */
 .rsui-message-box__close {
-    @apply size-10;
+    @apply size-10 shrink-0 -my-2;
 }
 
+/*
+ * The glyph colour is set on the Icon itself (`secondary`), not here — the
+ * variant rules target the SVG child directly, so a colour on this button would
+ * lose to them.
+ *
+ * It was `disabled` before, which painted a working control in the disabled text
+ * colour — Grey-400, 2.41:1 on white — so it looked permanently greyed out and
+ * fell under the 3:1 WCAG 1.4.11 asks of a control. Grey-700 reads as quiet
+ * without reading as dead.
+ */
 .rsui-message-box__close-icon {
     @apply size-10 cursor-pointer rounded-lg flex items-center justify-center hover:bg-border-secondary transition duration-200;
     /* Reset native <button> chrome so it matches the prior inline affordance ... */

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_footer.css

@@ -17,3 +17,71 @@
     @apply flex-1;
 }
 
+/*
+ * The view-all sits in its own region so it can centre, rather than joining the
+ * right-aligned action row.
+ *
+ * `order-first md:order-last` keeps it trailing at both breakpoints. The footer
+ * is `flex-col-reverse` below `md`, so the last DOM child paints at the top —
+ * appending the region put the view-all *above* the actions and the content on
+ * mobile, which is the opposite of what every comment about it claims. Ordering
+ * it first puts it back at the bottom there, and `md:order-last` restores it to
+ * the end of the desktop row.
+ */
+.rsui-section-footer__view-all-region {
+    @apply flex items-center justify-center order-first md:order-last;
+}
+
+/*
+ * `flex-1` only when the view-all has the footer to itself, which is the case
+ * that wants centring. Applying it unconditionally made the region a second
+ * greedy sibling alongside `content-start`: the two split the row and squeezed
+ * the action buttons towards the middle instead of the right edge — measured at
+ * x=599 of 1265. With actions present the region stays content-sized and
+ * `justify-between` puts it at the end of the row where it belongs.
+ */
+.rsui-section-footer__view-all-region--full {
+    @apply flex-1 w-full;
+}
+
+/*
+ * The trailing "view all" link. Matches the "See all" treatment already used in
+ * section headers: `font-semibold text-sm` on the tertiary-button colour, no
+ * underline, no arrow. That pairing is what makes it read as an action without
+ * competing with the section's own type.
+ *
+ * Deliberately not LinkSlot, which sits at `font-medium`, carries an always-on
+ * underline rule, and pins a font size per variant — all three wrong for this.
+ * No `text-*` here either: the size comes from whatever encloses the footer, so
+ * the link sits a step below the section's own type wherever it lands rather than
+ * locking to one scale. The semibold is what makes it read as an action.
+ *
+ * Colour comes from `--color-button-tertiary` rather than a literal brand value,
+ * so it tracks whatever tertiary actions are doing. It is overridden per section
+ * variant below rather than hardcoded, because a brand-coloured link is
+ * invisible on a brand-coloured surface.
+ *
+ * `w-fit` so the link stays the width of its own text. Its region centres it, and
+ * an underline that ran the width of the footer would read as a rule rather than
+ * as part of the link.
+ */
+.rsui-section-footer__view-all {
+    @apply inline-flex w-fit items-center whitespace-nowrap;
+    @apply font-semibold no-underline cursor-pointer transition-colors;
+    @apply text-button-tertiary hover:text-button-tertiary-hover;
+    /* Underline on hover only: the resting state stays as clean as the header's
+       "See all", but the link still confirms itself as one under the pointer. */
+    @apply hover:underline underline-offset-4 decoration-2;
+    @apply focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-button-tertiary outline-hidden;
+}
+
+/*
+ * No dark-surface override here, deliberately. Every plain Section variant is a
+ * light tint, so the tertiary colour reads on all nine. The one dark surface in
+ * the package is the slider's `--featured` (brand-600), where a brand link would
+ * be brand on brand — but `SectionSlider` renders no footer and does not forward
+ * Section's `#footer` slot, so no consumer can put this link there. A rule for it
+ * would be unreachable, untested, and would imply a capability that does not
+ * exist. Add it alongside a footer slot on the slider, if that is ever wanted.
+ */
+

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 {