@redseed/redseed-ui-tailwindcss 7.63.0 → 7.65.0

package/components/card.css

@@ -153,6 +153,82 @@
     @apply absolute inset-0 size-full pointer-events-none rounded-xl border-border-secondary;
 }
 
+/* ── Category accent ──────────────────────────────────────────────────────────
+   A colour-coded edge for TAXONOMY, which the semantic variants above cannot
+   express: they say what state a card is in, not which category it belongs to.
+
+   Two deliberate choices:
+
+   1. It is a BORDER, not a pseudo-element. The card's ::before is already the
+      hover scrim and its ::after is free, but a border is what actually delivers
+      the behaviour the API promises — "the accent replaces that edge's border
+      rather than sitting alongside it". A border on that edge IS that edge's
+      border, so there is no double rule to suppress, it composes with `bordered`
+      for free (unbordered cards have 0-width edges, so only the accent paints),
+      and the content inset comes along with it instead of needing separate
+      padding. It also stays clear of the hover scrim and the action layer, both
+      of which are `absolute inset-0` and therefore resolve against the PADDING
+      box — so neither tints nor covers the accent.
+
+   2. Thickness is a token. On the ARC insights page the same "this card belongs
+      to domain X" idea was hand-rolled twice in one sitting at 4px and 3px,
+      because nothing told the author what the weight should be. 4px — the
+      heavier of the two — so the bar still reads as a category marker against
+      the 1px hairline on the card's other three edges.
+
+   These rules are (0,2,0) and sit AFTER the variant border rules on purpose.
+   `.rsui-card--bordered.rsui-card--draft` zeroes every border width and
+   `.rsui-card--bordered.rsui-card--ai-bold` makes every border colour
+   transparent, both at the same specificity; landing later lets the accent edge
+   survive on those two variants rather than being silently swallowed.
+
+   `left` maps to the INLINE-START edge, not the physical left, matching the
+   logical `padding-inline` this stylesheet already uses. The accent marks the
+   leading edge of the card, so it should follow writing direction. */
+.rsui-card {
+    /* Neutral when the consumer supplies no `color`, so an accent edge is never
+       invisible. Same fallback token as Pill's resting accent. */
+    --rsui-card-accent: var(--color-background-secondary-contrast);
+
+    --rsui-card-accent-w: 0.25rem; /* space-xxs, 4px */
+}
+
+.rsui-card.rsui-card--accent-left {
+    border-inline-start-style: solid;
+    border-inline-start-width: var(--rsui-card-accent-w);
+    border-inline-start-color: var(--rsui-card-accent);
+}
+
+.rsui-card.rsui-card--accent-top {
+    border-block-start-style: solid;
+    border-block-start-width: var(--rsui-card-accent-w);
+    border-block-start-color: var(--rsui-card-accent);
+}
+
+/* Hold the accent clear of the action layer's ring.
+
+   The hover scrim and the action layer are both `absolute inset-0`, so they stop
+   at the padding box and cannot reach the border — but a RING is not bounded by
+   its element. `ring-2 ring-offset-2` paints `0 0 0 2px` of offset colour and
+   then `0 0 0 4px` of ring colour OUTWARD from the layer's border box, and a
+   child's box-shadow paints above its parent's border. Measured against this
+   accent that is a 4px band landing exactly on a 4px edge, so a `pressed` or
+   `current` card — or merely a focused one, since focus-visible uses the same
+   geometry — lost its category colour entirely at the moment it mattered most.
+
+   Pulling the layer in by the accent width on that edge puts the ring's outer
+   limit at the padding box, where the accent begins. Both then render: ring
+   around the content, accent around the card. Only the accented edge moves, so
+   every other card keeps the ring exactly where it was, and the 4px of click
+   area given up sits under a decorative bar. */
+.rsui-card--accent-left .rsui-card__action-layer {
+    inset-inline-start: var(--rsui-card-accent-w);
+}
+
+.rsui-card--accent-top .rsui-card__action-layer {
+    inset-block-start: var(--rsui-card-accent-w);
+}
+
 /* Prevent table row hover background from bleeding past card rounded corners.
    Opt out while a dropdown menu is open inside the card — otherwise the menu
    gets clipped by the card's overflow boundary. */

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/package.json

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