@redseed/redseed-ui-tailwindcss 7.61.0 → 7.64.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. */
@@ -263,8 +339,17 @@
     @apply flex-1 flex flex-col relative gap-y-space-md;
 }
 
+/* No min-height. This carried a 64px floor from the original SFC-to-Tailwind migration,
+   and it was quietly setting the height of every compact card rather than protecting
+   anything: measured across all 108 docs pages, the ONLY cards it changed were
+   CheckboxCards — 8px of dead space on a body holding one row of meta (56px natural,
+   floored to 64), and 24px on a body holding nothing at all.
+
+   A card should be as tall as what is in it. A floor here also hides the real bug when a
+   body renders empty, which is that it should not have rendered — see CheckboxCard's
+   headerOnlyCard. */
 .rsui-card__content--padded {
-    @apply py-space-lg min-h-16;
+    @apply py-space-lg;
 }
 
 /* The space between the header block and the body is an INTERNAL gap, so it takes the

package/components/checkbox_card.css

@@ -74,6 +74,29 @@
 .rsui-checkbox-card__badge {
     @apply flex gap-space-xs;
 }
+/* ── The task title steps DOWN off Header 4 ─────────────────────────────────────────
+   The card family's title is Header 4 (20px semibold) and stays there. A task row is
+   not that shape: it is a list item, and at 20px semibold it was the same size as the
+   title of the card CONTAINING the list, so a task and the panel holding it carried
+   equal weight.
+
+   16px is the next step on the brand scale (16 / 20 / 28 / 40 / 64) and the last one
+   before the body floor — there is nothing below it. It is also exactly what Material
+   3 specifies for a list-item headline, and what M3 gives a card's Title Medium; the
+   card family only sits above it because a 16px title would collapse into the 16px
+   body beneath it. A task card has no body text to collapse into, so the reason for
+   the step up does not apply here.
+
+   The title still leads: semibold against a 12px medium-weight label, in primary ink
+   against tertiary.
+
+   Set on __title rather than __title-text so the whole line box comes down with it —
+   at 24px the box now matches the checkbox's own 24px exactly, so the control and the
+   text are one row rather than a control with text beside it. */
+.rsui-checkbox-card .rsui-card-header__title {
+    @apply text-base leading-6;
+}
+
 .rsui-checkbox-card__title-text--strikethrough {
     @apply line-through;
 }

package/components/meta_info.css

@@ -23,8 +23,63 @@
     @apply flex gap-x-space-xs items-center;
 }
 
+/* ── The label icon is a DECORATION OF THE LABEL, so it may never be bigger than the
+   line it sits on ───────────────────────────────────────────────────────────────────
+   It had no size rule at all, so it rendered at whatever the consumer's SVG brought
+   with it. Measured on the CustomLabelIcon story: a 20px icon against a 12px label
+   with a 16px line box. Three things wrong with that, all visible:
+
+     - the icon was 25% taller than the field's own line, so it — not the type — set
+       the row height, and the label sat off the field's rhythm
+     - at 20px against 12px type the icon read as a control rather than as part of the
+       label, which is why a bare pin or calendar in a card's meta looks like a second
+       column of buttons next to the checkbox
+     - it inherited near-black `text-primary` while the label it decorates is grey
+       `text-tertiary` — so the decoration was emphasised OVER the thing it decorates.
+       Exactly the hierarchy inversion the label/value rule below already fixed once.
+
+   The size is therefore pinned to the line box of the step it is in: 16/20/24px for
+   sm/md/lg, matching text-xs/sm/base's line-height exactly. An icon that is exactly one
+   line box tall can never change the row's height.
+
+   This deliberately overrides a size the consumer put on `<Icon>`. Every usage in the
+   library wraps the icon that way, and letting each caller pick meant the meta row's
+   height depended on the call site. Same call `.rsui-card-header__avatar` makes by
+   fixing its own width. Reach past `<Icon>`'s wrapper to the svg so a raw heroicon —
+   which is what a consumer reaches for first — works too, instead of collapsing to 0x0. */
 .rsui-meta-info__label-icon {
-    @apply flex items-center justify-center;
+    @apply flex items-center justify-center shrink-0;
+    @apply text-text-tertiary;
+}
+
+.rsui-meta-info__label-icon svg {
+    @apply size-full;
+}
+
+/* Colour, for the DEFAULT icon only. Setting `text-text-tertiary` on the box above is
+   enough for a raw svg, which inherits — but `<Icon>` paints its child directly
+   (`.rsui-icon--primary > * { color }`), and a declaration always beats an inherited
+   value however specific the ancestor. IconSlot falls back to `primary` when the
+   consumer names no colour, so the near-black was the DEFAULT, not a choice.
+
+   Scoped to --primary on purpose. `<Icon success>` or `<Icon warning>` on a meta label
+   is intent — a status marker — and keeps its colour; only the unchosen default is
+   pulled back to match the label it decorates. */
+.rsui-meta-info__label-icon .rsui-icon--primary > * {
+    @apply text-text-tertiary;
+}
+
+/* ── An avatar in the VALUE is content, not decoration ───────────────────────────────
+   So the opposite rule applies: it is allowed to set the row's height, because it is
+   part of what the field is saying rather than a marker on the label. "Connected to
+   (R) Riley" is a person, and a 16px sliver of a face is not one.
+
+   `.rsui-avatar-circle` is `w-full h-full` — AvatarText fills whatever box it is given
+   and has no size of its own, so without this it collapses in the value's flex row.
+   The initials scale with the circle; at these sizes they are a single character. */
+.rsui-meta-info__value .rsui-avatar-circle,
+.rsui-meta-info__value > img {
+    @apply shrink-0 rounded-full object-cover;
 }
 
 /* The label is the descriptor, so it recedes: medium weight in the tertiary tone. It used to
@@ -77,6 +132,35 @@
     @apply text-base;
 }
 
+/* Icon = exactly one line box of its step (text-xs/sm/base are 16/20/24px), so it
+   never inflates the row. Avatar = one step larger, because it carries content. */
+.rsui-meta-info--sm .rsui-meta-info__label-icon {
+    @apply size-4;
+}
+
+.rsui-meta-info--md .rsui-meta-info__label-icon {
+    @apply size-5;
+}
+
+.rsui-meta-info--lg .rsui-meta-info__label-icon {
+    @apply size-6;
+}
+
+.rsui-meta-info--sm .rsui-meta-info__value .rsui-avatar-circle,
+.rsui-meta-info--sm .rsui-meta-info__value > img {
+    @apply size-5 text-[0.625rem];
+}
+
+.rsui-meta-info--md .rsui-meta-info__value .rsui-avatar-circle,
+.rsui-meta-info--md .rsui-meta-info__value > img {
+    @apply size-6 text-xs;
+}
+
+.rsui-meta-info--lg .rsui-meta-info__value .rsui-avatar-circle,
+.rsui-meta-info--lg .rsui-meta-info__value > img {
+    @apply size-7 text-sm;
+}
+
 .rsui-meta-info--inline {
     @apply flex-row flex-wrap items-center gap-x-space-xs gap-y-space-xs;
 }

package/package.json

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