@redseed/redseed-ui-tailwindcss 7.64.0 → 7.66.0

package/components/form_field_tree_select.css

@@ -8,7 +8,7 @@
 
 .rsui-form-field-tree-select__trigger {
     @apply block w-full border ring-0 bg-none cursor-pointer appearance-none transition;
-    @apply py-3 px-5 truncate text-left;
+    @apply py-space-sm px-5 truncate text-left;
     @apply text-base rounded-lg outline-hidden focus:outline-hidden;
     @apply bg-background-primary text-text-primary placeholder-text-secondary border-border-primary;
     @apply focus:border-border-primary;
@@ -21,31 +21,31 @@
 }
 
 .rsui-form-field-tree-select__modal-header {
-    @apply flex flex-col gap-y-2 xs:gap-y-0 xs:flex-row xs:items-center xs:justify-between;
+    @apply flex flex-col gap-y-space-xs xs:gap-y-0 xs:flex-row xs:items-center xs:justify-between;
 }
 
 .rsui-form-field-tree-select__search {
-    @apply mb-4;
+    @apply mb-space-md;
 }
 
 .rsui-form-field-tree-select__tree {
-    @apply max-h-96 flex flex-col gap-3 overflow-y-auto pt-1 pl-1;
+    @apply max-h-96 flex flex-col gap-space-sm overflow-y-auto pt-space-xxs pl-space-xxs;
 }
 
 .rsui-form-field-tree-select-children {
-    @apply flex flex-col gap-3 ml-4 sm:ml-6 md:ml-7;
+    @apply flex flex-col gap-space-sm ml-space-md sm:ml-space-lg md:ml-7;
 }
 
 .rsui-form-field-tree-select-item {
-    @apply flex items-start gap-x-1 sm:gap-x-1 md:gap-x-2;
+    @apply flex items-start gap-x-space-xxs sm:gap-x-space-xxs md:gap-x-space-xs;
 }
 
 .rsui-form-field-tree-select-item__controls {
-    @apply flex items-start gap-x-0 sm:gap-x-1 md:gap-x-2;
+    @apply flex items-start gap-x-0 sm:gap-x-space-xxs md:gap-x-space-xs;
 }
 
 .rsui-form-field-tree-select-item__opener {
-    @apply pt-1 md:pt-0.5 w-5 text-text-secondary;
+    @apply pt-space-xxs md:pt-0.5 w-5 text-text-secondary;
 }
 
 .rsui-form-field-tree-select-item__opener--clickable {
@@ -61,7 +61,7 @@
 }
 
 .rsui-form-field-tree-select-item__name {
-    @apply font-medium select-none cursor-pointer text-xs sm:text-sm md:text-base pt-1 sm:pt-0.5 md:pt-0;
+    @apply font-medium select-none cursor-pointer text-xs sm:text-sm md:text-base pt-space-xxs sm:pt-0.5 md:pt-0;
 }
 
 .rsui-form-field-tree-select-item__name--searched {

package/components/form_field_uploader.css

@@ -2,8 +2,8 @@
     @apply w-fit max-w-80 bg-background-secondary;
     @apply relative select-none;
     @apply rounded-lg border border-border-primary border-dashed;
-    @apply flex flex-nowrap justify-center items-center gap-4;
-    @apply px-4 py-2.5;
+    @apply flex flex-nowrap justify-center items-center gap-space-md;
+    @apply px-space-md py-2.5;
 }
 
 .rsui-form-field-uploader__container--success {
@@ -11,7 +11,7 @@
 }
 
 .rsui-form-field-uploader__content {
-    @apply relative flex flex-nowrap justify-center items-center gap-4;
+    @apply relative flex flex-nowrap justify-center items-center gap-space-md;
     @apply text-text-primary;
 }
 

package/components/form_fieldset.css

@@ -3,11 +3,11 @@
 }
 
 .rsui-form-fieldset__fields {
-    @apply flex flex-col gap-3;
+    @apply flex flex-col gap-space-sm;
 }
 
 .rsui-form-fieldset__fields--padded {
-    @apply mt-3 px-2;
+    @apply mt-space-sm px-space-xs;
 }
 
 .rsui-form-fieldset__fields .rsui-form-field-slot label {
@@ -34,14 +34,14 @@
 .rsui-form-fieldset__fields .rsui-form-field-slot--compact input[type='time'],
 .rsui-form-fieldset__fields .rsui-form-field-slot--compact input[type='url'],
 .rsui-form-fieldset__fields .rsui-form-field-slot--compact input[type='week'] {
-    @apply py-1.5 px-2;
+    @apply py-1.5 px-space-xs;
 }
 
 .rsui-form-fieldset__fields .rsui-form-field-slot--compact select {
-    @apply py-1.5 pl-3 pr-12 text-sm;
+    @apply py-1.5 pl-space-sm pr-space-2xl text-sm;
 }
 
 .rsui-form-fieldset__fields .rsui-form-field-select__icon { @apply right-2; }
 .rsui-form-fieldset__fields .rsui-form-field-select__icon svg { @apply size-5; }
-.rsui-form-fieldset__fields .rsui-form-field-select__option { @apply py-3 px-2; }
+.rsui-form-fieldset__fields .rsui-form-field-select__option { @apply py-space-sm px-space-xs; }
 .rsui-form-fieldset__fields .rsui-form-field-select__option-label { @apply text-sm; }

package/components/form_slot.css

@@ -5,11 +5,11 @@
 }
 
 .rsui-form-slot__image {
-    @apply mb-8;
+    @apply mb-space-xl;
 }
 
 .rsui-form-slot__social-divider {
-    @apply w-full relative flex justify-center mb-2;
+    @apply w-full relative flex justify-center mb-space-xs;
 }
 
 .rsui-form-slot__social-divider-line {
@@ -17,18 +17,18 @@
 }
 
 .rsui-form-slot__social-divider-or {
-    @apply relative z-1 bg-background-primary px-6 text-text-primary;
+    @apply relative z-1 bg-background-primary px-space-lg text-text-primary;
 }
 
 .rsui-form-slot__content {
-    @apply w-full sm:max-w-md px-10 xs:px-12 md:px-16 py-10 bg-background-primary shadow-md overflow-hidden rounded-lg;
+    @apply w-full sm:max-w-md px-10 xs:px-space-2xl md:px-space-3xl py-10 bg-background-primary shadow-md overflow-hidden rounded-lg;
 }
 
 .rsui-form-slot__content > * {
-    @apply first:mt-0 mt-4;
+    @apply first:mt-0 mt-space-md;
 }
 
 .rsui-form-slot__content form > * {
-    @apply first:mt-0 mt-4;
+    @apply first:mt-0 mt-space-md;
 }
 

package/components/link_slot.css

@@ -7,7 +7,7 @@
     @apply focus-visible:ring-offset-2 focus-visible:ring-2 focus-visible:ring-border-primary;
 
     /* default text styles */
-    @apply font-medium text-text-primary gap-2;
+    @apply font-medium text-text-primary gap-space-xs;
 }
 
 .rsui-link-slot--disabled {

package/components/linked_list_item.css

@@ -1,5 +1,5 @@
 .rsui-linked-list-item {
-    @apply pl-9 pr-3 pt-0 pb-2 relative text-text-disabled;
+    @apply pl-9 pr-space-sm pt-0 pb-space-xs relative text-text-disabled;
 }
 
 .rsui-linked-list-item::before {

package/components/list.css

@@ -1,12 +1,12 @@
 .rsui-list__items {
-    @apply mt-6;
+    @apply mt-space-lg;
 }
 
 .rsui-list__empty {
-    @apply mt-6;
+    @apply mt-space-lg;
 }
 
 .rsui-list__control-bottom {
-    @apply mt-3;
+    @apply mt-space-sm;
 }
 

package/components/list_control.css

@@ -1,5 +1,5 @@
 .rsui-list-control {
-    @apply flex flex-wrap justify-between gap-x-2 gap-y-3;
+    @apply flex flex-wrap justify-between gap-x-space-xs gap-y-space-sm;
 }
 
 .rsui-list-control--sm .rsui-list-control__filters {
@@ -49,7 +49,7 @@
 }
 
 .rsui-list-control__filters {
-    @apply grid gap-2;
+    @apply grid gap-space-xs;
 }
 
 .rsui-list-control__sort {

package/components/list_item.css

@@ -3,7 +3,7 @@
        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;
+    @apply relative flex flex-col rounded-xl px-space-sm py-3.5 overflow-hidden;
 }
 
 .rsui-list-item--clickable {
@@ -14,7 +14,7 @@
 }
 
 .rsui-list-item--avatar {
-    @apply pl-12 lg:pl-16 *:pl-2 *:lg:pl-1;
+    @apply pl-space-2xl lg:pl-space-3xl *:pl-space-xs *:lg:pl-space-xxs;
 }
 
 .rsui-list-item--wide .rsui-list-item__status {
@@ -22,7 +22,7 @@
 }
 
 .rsui-list-item__header {
-    @apply relative z-1 flex flex-wrap items-center gap-2 pointer-events-none;
+    @apply relative z-1 flex flex-wrap items-center gap-space-xs pointer-events-none;
 }
 
 .rsui-list-item__bg {
@@ -39,7 +39,7 @@
 }
 
 .rsui-list-item__avatar {
-    @apply absolute top-0 ml-1 -left-10 lg:-left-14;
+    @apply absolute top-0 ml-space-xxs -left-10 lg:-left-14;
     @apply aspect-square overflow-hidden size-9 lg:size-12;
 }
 
@@ -70,7 +70,7 @@
 }
 
 .rsui-list-item__meta {
-    @apply mt-2 flex flex-wrap gap-x-4 gap-y-2;
+    @apply mt-space-xs flex flex-wrap gap-x-space-md gap-y-space-xs;
 }
 
 /* Leading icon. Inline, unlike .rsui-list-item__avatar above, which hangs outside the row
@@ -133,5 +133,5 @@
 }
 
 .rsui-list-item__description {
-    @apply line-clamp-2 mt-2 text-base;
+    @apply line-clamp-2 mt-space-xs text-base;
 }

package/components/message_box.css

@@ -4,7 +4,7 @@
  * against a tall body.
  */
 .rsui-message-box {
-    @apply border rounded-lg overflow-hidden p-4 flex items-start gap-x-3;
+    @apply border rounded-lg overflow-hidden p-space-md flex items-start gap-x-space-sm;
 }
 
 /*
@@ -12,7 +12,7 @@
  * 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;
+    @apply flex-1 flex flex-col gap-y-space-sm;
 }
 
 /*
@@ -31,7 +31,7 @@
  * 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;
+    @apply flex-wrap gap-y-space-sm sm:flex-nowrap;
 }
 
 .rsui-message-box--with-icon .rsui-message-box__close {
@@ -78,11 +78,11 @@
 }
 
 .rsui-message-box__head {
-    @apply flex items-center gap-x-2;
+    @apply flex items-center gap-x-space-xs;
 }
 
 .rsui-message-box__content {
-    @apply flex items-start gap-x-2;
+    @apply flex items-start gap-x-space-xs;
 }
 
 /*
@@ -104,7 +104,7 @@
  * 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;
+    @apply flex flex-wrap items-center gap-x-space-md gap-y-space-xs pt-space-xxs;
 }
 
 .rsui-message-box__dismiss,

package/components/meta_info.css

@@ -13,7 +13,7 @@
    caption floor. Fix the size and 8px becomes correct; that belongs with the MetaInfo
    size ramp in #316, not here. Until then this is the size the component ships at, and
    the gap has to suit it. */
-    @apply flex flex-col gap-y-1;
+    @apply flex flex-col gap-y-space-xxs;
 }
 
 /* gap-x rather than space-x: space-* works by adding margins to children, which is the

package/components/metric_card.css

@@ -21,8 +21,17 @@
     @apply shrink-0 grow-0 size-10;
 }
 
-.rsui-metric-card__heading .rsui-metric-card__label {
-    @apply flex-1 min-w-0;
+/* The flexing text column, not the label itself — the label now shares it with
+   the optional microcopy, and the two stack. Kept on the wrapper so a tile with
+   no description renders exactly as it did before.
+
+   8px, not the 4px TIGHT PAIR value, even though label -> description is the same
+   shape as the three pairs that do take it. CardSpacing.test.js caps the family at
+   exactly three justified exceptions and argues that a fourth means the brand scale
+   is missing a step rather than the family needing another escape hatch (#317).
+   That argument belongs on #317, not smuggled in here — so this sits on the rhythm. */
+.rsui-metric-card__heading-text {
+    @apply flex-1 min-w-0 flex flex-col gap-space-xs;
 }
 
 .rsui-metric-card__number {
@@ -39,6 +48,167 @@
     @apply text-text-brand;
 }
 
+/* Microcopy. Explains what the metric measures, so a number does not need a
+   support doc beside it. In the flow rather than behind a Tooltip on an info
+   icon: hover hides the explanation from touch and from keyboard, and this is
+   the sentence that makes the tile legible at all.
+
+   The cost is vertical rhythm — in a CardGroup row of tiles, uneven copy lengths
+   make tiles ragged unless the group equalises height. Muted and a step smaller
+   than the label, wrapping freely with no truncation, because a clipped
+   explanation is worse than a tall tile. */
+.rsui-metric-card__description {
+    @apply text-text-tertiary text-sm font-normal;
+}
+
+/* ── The figure block ─────────────────────────────────────────────────────────
+   The number and the comparison that qualifies it, as one box. It exists so the
+   two placements are a single property on one wrapper rather than two template
+   branches: everything else about the comparison — the a11y wiring, the
+   sentiment modifiers, the tonal overrides — stays placement-agnostic.
+
+   The 8px gap is not arbitrary: before this wrapper existed the two sat directly
+   in MetricCard's FlexContainer, whose default gap is space-xs. Matching it is
+   what makes the default `below` placement render byte-for-byte as it did. */
+.rsui-metric-card__figure {
+    @apply flex flex-col gap-space-xs;
+}
+
+/* ── Inline placement ─────────────────────────────────────────────────────────
+   The reference shape: `2,000  ↗100% vs last month` on one row. Worth the option
+   because it buys back a line of vertical height, which is the difference between
+   a dashboard row of these fitting above the fold and not.
+
+   Centred, not baseline-aligned. The comparison is a 20px line box beside a 36px
+   one, and sitting them on a shared baseline hangs the small text off the bottom
+   of the figure — it reads as a footnote that slipped up a line rather than as
+   part of the same object. Centring is what the reference shows.
+
+   16px, and deliberately NOT the reference's 12px. The brand runs an 8px rhythm --
+   8, 16, 24, 32 -- and CardSpacing.test.js bans 12 outright across the card family
+   on the grounds that mixing it in is what made the family read untidy. So the
+   reference value rounds up onto the scale rather than earning a fourth exception.
+   Up rather than down because the gap is wider than the 8px stack gap on purpose:
+   stacked, the two are on separate lines and the leading already separates them;
+   side by side they compete for one reading line, and 8px there reads as a wide
+   space inside a single phrase rather than as a break between two things.
+
+   It wraps. A metric tile has no width contract — it is whatever the dashboard
+   grid hands it — and `175.95% Increase vs last month` beside a five-digit figure
+   will not fit a narrow column. Wrapping degrades to the `below` shape, which is
+   the right failure: the alternative is an overflowing row or a truncated
+   comparison, and a clipped percentage is a wrong number, not a terse one. */
+.rsui-metric-card__figure--inline {
+    @apply flex-row flex-wrap items-center gap-space-md;
+}
+
+/* ── Previous-period comparison ───────────────────────────────────────────────
+   Its own element, not a Badge or a Pill. Both of those are pill-shaped chips
+   with a border and a filled ground, which under a text-3xl number reads as a
+   second object competing with the figure rather than as a caption qualifying
+   it. This is a line of text with an arrow, which is what the reference shows.
+
+   The arrow is DECORATIVE (aria-hidden in the template, per the pattern __icon
+   already uses) — the meaning is carried by the text the consumer passes in.
+
+   WCAG 1.4.1 is satisfied on two separate axes, which is worth stating plainly
+   because conflating them is how the first pass got it wrong:
+
+     DIRECTION  the arrow plus the consumer's word ("Increase" / "Decrease").
+                A bare coloured percentage would not do it, which is why the
+                content is a slot the consumer fills rather than a number this
+                component formats.
+     SENTIMENT  the badge below. Direction and the word say the figure ROSE;
+                they say nothing about whether rising is good, and hue alone
+                was carrying that. */
+.rsui-metric-card__comparison {
+    @apply inline-flex items-center gap-space-xs;
+    @apply text-sm font-medium;
+}
+
+/* EVERY sentiment is circled, not just bad news. The asymmetric version — a badge
+   on the negative tile and a bare arrow everywhere else — read as an inconsistency
+   rather than as a signal: a treatment that appears on one state out of three looks
+   like the other two are missing something.
+
+   20px, which matches text-sm's line box exactly, so circling every arrow shifts no
+   row height against the uncircled version this replaces. */
+.rsui-metric-card__comparison-icon {
+    @apply inline-flex items-center justify-center shrink-0 size-5 rounded-full;
+    /* 1.5px, the weight Pill's own ring already uses, so the system is not learning
+       a second hairline. border-box keeps the outer box at 20px either way. */
+    @apply border-[1.5px] border-current;
+}
+
+.rsui-metric-card__comparison-icon svg {
+    @apply size-3;
+}
+
+/* ── The quieter half of the comparison ───────────────────────────────────────
+   The reference splits the line in two: the change itself takes the sentiment
+   colour, and the phrase qualifying it ("vs last month") drops to tertiary ink.
+   The point is emphasis, not meaning — the eye should land on the figure and the
+   change first, and a whole line in one saturated colour flattens that.
+
+   Colour only. The reference sets both halves at text-sm Medium, so the weight is
+   inherited rather than stepped down; lightening the weight as well would push the
+   phrase past quiet into illegible at 14px.
+
+   A direct declaration, which beats the sentiment colour inherited from the parent
+   without needing to out-specify it. */
+.rsui-metric-card__comparison-context {
+    @apply text-text-tertiary;
+}
+
+/* On the two dark tones the comparison has already given up its semantic colour
+   for the tile's muted ink, so the change and its qualifier land on the same
+   value and the split collapses. That is cosmetic rather than a lost signal — the
+   two-tone is an emphasis device, and nothing about sentiment or direction rides
+   on it — and the alternative is inventing a second readable ink per tone to
+   preserve a nicety. tone-light keeps its semantic colour, so it keeps the split. */
+.rsui-metric-card--tone-green .rsui-metric-card__comparison-context,
+.rsui-metric-card--tone-teal .rsui-metric-card__comparison-context {
+    color: var(--rsui-metric-card-ink-muted);
+}
+
+/* ── The non-colour sentiment cue ─────────────────────────────────────────────
+   Raised in review on #333, and still the constraint this has to satisfy: `trend`
+   and the consumer's word carry the DIRECTION, but nothing carries the SENTIMENT
+   except hue. In the up-is-bad case both tiles render an up arrow and the word
+   "Increase", so favourable and unfavourable are separated by colour alone
+   (WCAG 1.4.1) — and on the two dark tones, where the colour is dropped for
+   contrast, they would be identical outright.
+
+   So the circle is now on every sentiment, and FILL is what carries the meaning
+   instead of the circle's presence:
+
+     positive / neutral   ringed, open centre
+     negative             solid, arrow knocked out of the fill
+
+   That keeps the treatment symmetric — the thing the presence-or-absence version
+   got wrong — while leaving a difference that survives greyscale and survives the
+   colour being stripped on a dark tone, which presence alone was carrying before.
+   A solid mark also still reads heavier than an open one, so bad news keeps the
+   extra weight without being the only state that gets a mark at all.
+
+   Direction is untouched — an up arrow that is bad news still points up. */
+.rsui-metric-card__comparison--negative .rsui-metric-card__comparison-icon {
+    @apply border-transparent text-text-on-color;
+    background-color: var(--color-text-error);
+}
+
+.rsui-metric-card__comparison--positive {
+    @apply text-text-success;
+}
+
+.rsui-metric-card__comparison--negative {
+    @apply text-text-error;
+}
+
+.rsui-metric-card__comparison--neutral {
+    @apply text-text-tertiary;
+}
+
 /* ---------------------------------------------------------------------------
    Tonal variants
 
@@ -99,6 +269,47 @@
     color: var(--rsui-metric-card-ink-muted);
 }
 
+.rsui-metric-card--toned .rsui-metric-card__description {
+    color: var(--rsui-metric-card-ink-muted);
+}
+
+/* The semantic status inks are unreadable on the two DARK tiles, measured:
+
+     ink                          on tone-green #0e5942   on tone-teal #0f373c
+     --color-text-success #067647          1.46:1                 2.26:1
+     --color-text-error   #b42318          1.26:1                 1.96:1
+
+   Both invisible — the same failure this file already documents for text-brand
+   on a toned tile. So the comparison gives up its colour there and takes the
+   tile's muted ink, exactly as the active state gives up its brand number, and
+   the arrow direction plus the consumer's word carry the meaning on their own.
+   Journey Green 200 measures 5.92:1 and Deep Teal 300 6.36:1, both clearing AA.
+
+   tone-light is deliberately NOT in this list. Its surface is Modern Bone 200
+   (#f9f8f6), where success measures 5.36:1 and error 6.19:1 — both pass AA, so
+   there is nothing to fix and stripping the colour would only cost a signal.
+
+   (0,2,0), so it outranks the (0,1,0) sentiment modifiers wherever they sit. */
+.rsui-metric-card--tone-green .rsui-metric-card__comparison,
+.rsui-metric-card--tone-teal .rsui-metric-card__comparison {
+    color: var(--rsui-metric-card-ink-muted);
+}
+
+/* The solid badge goes with it. Filling it with the error ink on a dark tile would
+   reproduce exactly the 1.26:1 the rule above exists to avoid, so it takes the
+   tile's muted ink and puts the arrow in the tile's own surface colour — the
+   same 5.92:1 and 6.36:1 pairing, read the other way round.
+
+   The ringed badge needs no rule of its own: its border is `currentColor`, and the
+   rule above has already moved the comparison's ink to the tile's muted value, so
+   the ring follows it. This is the tone where solid-vs-ringed does its real work,
+   because once the colour is stripped it is the only sentiment signal left. */
+.rsui-metric-card--tone-green .rsui-metric-card__comparison--negative .rsui-metric-card__comparison-icon,
+.rsui-metric-card--tone-teal .rsui-metric-card__comparison--negative .rsui-metric-card__comparison-icon {
+    background-color: var(--rsui-metric-card-ink-muted);
+    color: var(--rsui-metric-card-surface);
+}
+
 /* 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),

package/components/modal.css

@@ -1,7 +1,7 @@
 .rsui-modal {
     @apply fixed inset-0 z-50 overflow-y-auto transition-all;
     @apply flex flex-col;
-    @apply px-4 py-6 md:px-0;
+    @apply px-space-md py-space-lg md:px-0;
     height: 100dvh;
 }
 
@@ -15,7 +15,7 @@
 
 .rsui-modal__content {
     @apply relative max-h-full overflow-scroll overscroll-contain transform transition-all;
-    @apply rounded-xl shadow-full md:w-full md:mx-auto mx-4;
+    @apply rounded-xl shadow-full md:w-full md:mx-auto mx-space-md;
     @apply bg-background-primary;
     -ms-overflow-style: none;
     scrollbar-width: none;
@@ -26,7 +26,7 @@
 }
 
 .rsui-modal__content--sm {
-    @apply sm:max-w-sm xs:mx-4 sm:mx-auto;
+    @apply sm:max-w-sm xs:mx-space-md sm:mx-auto;
 }
 
 .rsui-modal__content--md {
@@ -62,7 +62,7 @@
 }
 
 .rsui-modal__header--padded {
-    @apply p-4;
+    @apply p-space-md;
 }
 
 .rsui-modal__body {
@@ -72,7 +72,7 @@
 }
 
 .rsui-modal__body--padded {
-    @apply p-4;
+    @apply p-space-md;
 }
 
 .rsui-modal__body::-webkit-scrollbar {
@@ -80,13 +80,13 @@
 }
 
 .rsui-modal__footer {
-    @apply sticky inset-x-0 bottom-0 z-1 p-0 bg-background-secondary shrink-0 flex flex-col items-stretch gap-y-2;
-    @apply sm:flex-row sm:items-center sm:justify-end sm:gap-x-2 sm:gap-y-0;
+    @apply sticky inset-x-0 bottom-0 z-1 p-0 bg-background-secondary shrink-0 flex flex-col items-stretch gap-y-space-xs;
+    @apply sm:flex-row sm:items-center sm:justify-end sm:gap-x-space-xs sm:gap-y-0;
     padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
 }
 
 .rsui-modal__footer--padded {
-    @apply p-4;
+    @apply p-space-md;
     padding-bottom: max(1rem, env(safe-area-inset-bottom));
 }
 

package/components/pagination.css

@@ -1,13 +1,13 @@
 .rsui-pagination {
-    @apply flex flex-nowrap items-center w-fit border border-border-secondary rounded-full p-1 bg-background-primary divide-x divide-border-secondary;
+    @apply flex flex-nowrap items-center w-fit border border-border-secondary rounded-full p-space-xxs bg-background-primary divide-x divide-border-secondary;
 }
 
 .rsui-pagination__previous {
-    @apply size-full flex items-center pr-1;
+    @apply size-full flex items-center pr-space-xxs;
 }
 
 .rsui-pagination__items {
-    @apply size-full flex items-center gap-px px-1;
+    @apply size-full flex items-center gap-px px-space-xxs;
 }
 
 .rsui-pagination__items-group {
@@ -15,7 +15,7 @@
 }
 
 .rsui-pagination__next {
-    @apply size-full flex items-center pl-1;
+    @apply size-full flex items-center pl-space-xxs;
 }
 
 .rsui-pagination-parent {

package/components/pagination_item.css

@@ -1,6 +1,6 @@
 .rsui-pagination-item {
     @apply inline-flex items-center justify-center overflow-hidden select-none;
-    @apply min-w-9 w-fit h-7 p-1 rounded-lg cursor-pointer transition;
+    @apply min-w-9 w-fit h-7 p-space-xxs rounded-lg cursor-pointer transition;
     @apply bg-background-primary hover:bg-background-primary-invert text-text-secondary text-sm;
 
     /* focus state */

package/components/progress_bar.css

@@ -1,5 +1,5 @@
 .rsui-progress-bar {
-    @apply flex items-center gap-3 w-full;
+    @apply flex items-center gap-space-sm w-full;
 }
 
 .rsui-progress-bar__track {

package/components/progress_tracker.css

@@ -3,13 +3,13 @@
 }
 
 .rsui-progress-tracker--sm {
-    @apply gap-8 text-xs;
+    @apply gap-space-xl text-xs;
 }
 
 .rsui-progress-tracker--md {
-    @apply gap-8 sm:gap-12 text-xs sm:text-base;
+    @apply gap-space-xl sm:gap-space-2xl text-xs sm:text-base;
 }
 
 .rsui-progress-tracker--lg {
-    @apply gap-8 sm:gap-16 text-xs sm:text-xl;
+    @apply gap-space-xl sm:gap-space-3xl text-xs sm:text-xl;
 }