@redseed/redseed-ui-tailwindcss 7.55.0 → 7.57.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_field_date_range.css

@@ -153,6 +153,38 @@
     @apply hover:bg-background-brand-contrast;
 }
 
+/*
+ * Square off the edge each endpoint faces the range on, so the band closes.
+ *
+ * The base `.rsui-form-field-date-range__day` is `rounded-lg` on all four
+ * corners and the endpoints only override the background, so an endpoint used to
+ * sit between two square in-range fills as a rounded square — leaving a white
+ * notch at each corner where its curve pulled away from its neighbour. The band
+ * read as interrupted by the endpoint rather than containing it.
+ *
+ * MUI solves the same problem by drawing a continuous highlight band behind the
+ * cells and putting the endpoint circle on top of it. That needs a second
+ * element per cell; squaring the inner edge of the endpoint's own fill gets the
+ * same join out of the existing one.
+ */
+.rsui-form-field-date-range__day--range-start {
+    @apply rounded-r-none;
+}
+
+.rsui-form-field-date-range__day--range-end {
+    @apply rounded-l-none;
+}
+
+/*
+ * Both modifiers land on the same day for a single-day window — `today`, or a
+ * range picked start-and-end on one date. There is no band to join, so restore
+ * the full radius. This selector is deliberately last and doubly-classed so it
+ * outranks the two above.
+ */
+.rsui-form-field-date-range__day--range-start.rsui-form-field-date-range__day--range-end {
+    @apply rounded-lg;
+}
+
 /*
  * The day the presets resolve against — "today" as the server sees it.
  *

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/icon.css

@@ -88,42 +88,52 @@
 
 .rsui-icon--primary {
     @apply *:text-text-primary;
+    --rsui-icon-pulse: var(--color-text-primary);
 }
 
 .rsui-icon--secondary {
     @apply *:text-text-secondary;
+    --rsui-icon-pulse: var(--color-text-secondary);
 }
 
 .rsui-icon--brand {
     @apply *:text-text-brand;
+    --rsui-icon-pulse: var(--color-text-brand);
 }
 
 .rsui-icon--success {
     @apply *:text-text-success;
+    --rsui-icon-pulse: var(--color-text-success);
 }
 
 .rsui-icon--info {
     @apply *:text-text-info;
+    --rsui-icon-pulse: var(--color-text-info);
 }
 
 .rsui-icon--warning {
     @apply *:text-text-warning;
+    --rsui-icon-pulse: var(--color-text-warning);
 }
 
 .rsui-icon--error {
     @apply *:text-text-error;
+    --rsui-icon-pulse: var(--color-text-error);
 }
 
 .rsui-icon--ai {
     @apply *:text-text-ai;
+    --rsui-icon-pulse: var(--color-text-ai);
 }
 
 .rsui-icon--disabled {
     @apply *:text-text-disabled;
+    --rsui-icon-pulse: var(--color-text-disabled);
 }
 
 .rsui-icon--classic {
     @apply *:text-pink-500;
+    --rsui-icon-pulse: var(--color-pink-500);
 }
 
 .rsui-icon--primary.rsui-icon--invert {
@@ -216,52 +226,145 @@
     @apply *:text-text-on-color;
 }
 
+/*
+ * Both flags together is the one combination that puts the glyph back on its
+ * variant colour, against a tinted fill — so each of these restates the pulse
+ * token alongside it, undoing the on-colour default set below. Kept here rather
+ * than in a block of its own so the ring colour is edited in the same place as
+ * the glyph colour it has to match.
+ */
 .rsui-icon--primary.rsui-icon--background.rsui-icon--invert {
     @apply bg-background-primary-invert;
     @apply *:text-text-primary;
+    --rsui-icon-pulse: var(--color-text-primary);
 }
 
 .rsui-icon--secondary.rsui-icon--background.rsui-icon--invert {
     @apply bg-background-secondary-invert;
     @apply *:text-text-secondary;
+    --rsui-icon-pulse: var(--color-text-secondary);
 }
 
 .rsui-icon--brand.rsui-icon--background.rsui-icon--invert {
     @apply bg-background-brand-invert;
     @apply *:text-text-brand;
+    --rsui-icon-pulse: var(--color-text-brand);
 }
 
 .rsui-icon--success.rsui-icon--background.rsui-icon--invert {
     @apply bg-background-success-invert;
     @apply *:text-text-success;
+    --rsui-icon-pulse: var(--color-text-success);
 }
 
 .rsui-icon--info.rsui-icon--background.rsui-icon--invert {
     @apply bg-background-info-invert;
     @apply *:text-text-info;
+    --rsui-icon-pulse: var(--color-text-info);
 }
 
 .rsui-icon--warning.rsui-icon--background.rsui-icon--invert {
     @apply bg-background-warning-invert;
     @apply *:text-text-warning;
+    --rsui-icon-pulse: var(--color-text-warning);
 }
 
 .rsui-icon--error.rsui-icon--background.rsui-icon--invert {
     @apply bg-background-error-invert;
     @apply *:text-text-error;
+    --rsui-icon-pulse: var(--color-text-error);
 }
 
 .rsui-icon--ai.rsui-icon--background.rsui-icon--invert {
     @apply bg-background-ai-invert;
     @apply *:text-text-ai;
+    --rsui-icon-pulse: var(--color-text-ai);
 }
 
 .rsui-icon--disabled.rsui-icon--background.rsui-icon--invert {
     @apply bg-background-disabled-invert;
     @apply *:text-text-disabled;
+    --rsui-icon-pulse: var(--color-text-disabled);
 }
 
 .rsui-icon--classic.rsui-icon--background.rsui-icon--invert {
     @apply bg-pink-50;
     @apply *:text-pink-500;
-}
+    --rsui-icon-pulse: var(--color-pink-500);
+}
+/*
+ * On a filled or inverted icon the glyph is repainted to an on-colour token, so
+ * the ring follows it rather than staying on a variant colour it no longer
+ * matches. Same specificity as the base variant rules and declared after them,
+ * so it wins on source order — but it loses to the two-flag rules above, which
+ * is the point: those put the glyph back on its variant colour and take the ring
+ * with them.
+ */
+.rsui-icon--background,
+.rsui-icon--invert {
+    --rsui-icon-pulse: var(--color-text-on-color);
+}
+
+/*
+ * Optional attention pulse: a ring expands out from the icon and fades, a few
+ * times, when the icon arrives.
+ *
+ * Deliberately a fixed number of iterations rather than `infinite`. An animation
+ * that repeats for more than five seconds needs a pause control (WCAG 2.2.2), and
+ * an icon has nowhere sensible to put one — three bursts draw the eye on arrival
+ * without taking on that obligation.
+ *
+ * Duration x iterations is the number that matters there, and it must stay under
+ * five seconds: 1.4s x 3 leaves 800ms of headroom. Slowing the ring to 1.8s to
+ * soften it further would put the total at 5.4s and trip the criterion, so the
+ * softening is done with opacity, border width and travel instead.
+ *
+ * The ring takes its colour from `--rsui-icon-pulse`, which each colour variant
+ * sets alongside its glyph rule.
+ *
+ * A custom property rather than `currentColor`: the variants colour the SVG child
+ * (`*:text-…`) and not the wrapper, so an inherited ring comes out near-black.
+ * Setting `color` on the wrapper instead would fix the base variants but silently
+ * miss `--invert` and `--background`, which repaint the glyph and would leave the
+ * ring on the old colour. A property the combination rules can override keeps the
+ * answer in one place — and, unlike a wrapper colour, it is inert for everything
+ * that does not read it.
+ *
+ * `pointer-events-none` because the ring overflows the icon's box and would
+ * otherwise sit over whatever is beside it.
+ */
+.rsui-icon--pulse {
+    @apply relative;
+}
+
+.rsui-icon--pulse::after {
+    @apply content-[''] absolute inset-0 rounded-full pointer-events-none;
+    border: 1px solid var(--rsui-icon-pulse, currentColor);
+    /* Invisible at rest, in both directions. Without this the ring reverts to its
+       un-animated state once the iterations finish — full opacity at scale 1 —
+       and a solid ring stays welded around the icon for the life of the page. */
+    @apply opacity-0;
+    animation: rsui-icon-pulse 1.4s ease-out 3;
+}
+
+@keyframes rsui-icon-pulse {
+    0% {
+        opacity: 0.35;
+        transform: scale(1);
+    }
+    100% {
+        opacity: 0;
+        transform: scale(1.8);
+    }
+}
+
+/*
+ * The pulse is decoration on top of an icon that is already visible, so removing
+ * it costs nothing — no state is conveyed by the animation alone.
+ */
+@media (prefers-reduced-motion: reduce) {
+    .rsui-icon--pulse::after {
+        animation: none;
+        display: none;
+    }
+}

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;
 }