@redseed/redseed-ui-tailwindcss 7.63.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. */

package/package.json

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