@redseed/redseed-ui-tailwindcss 7.58.0 → 7.60.0

package/components/category_list.css

@@ -0,0 +1,65 @@
+/* ---------------------------------------------------------------------------
+   Category list
+
+   A wrapping row of neutral badges naming the buckets a record sits in.
+
+   Wrapping, not scrolling. The cap is what keeps the row short; a horizontal
+   scroller would hide categories behind a gesture for the same reason a table
+   never scrolls the page sideways.
+
+   Imported after badge.css, since the linked variant restyles the badge inside
+   its anchor.
+   --------------------------------------------------------------------------- */
+/* 16px out to the toggle, 8px between the badges — both on the brand 8px rhythm, and
+   the wider gap is what stops "+4 more" reading as one more category. */
+.rsui-category-list {
+    @apply flex flex-wrap items-center gap-x-space-md gap-y-space-xs;
+}
+
+/* The list resets its own margins and padding, the way breadcrumbs and
+   linked_list already do — a `ul` carries a browser indent that would push the
+   row out of line with the title above it. */
+.rsui-category-list__items {
+    @apply flex flex-wrap items-center gap-x-space-xs gap-y-space-xs;
+    @apply list-none m-0 p-0;
+}
+
+.rsui-category-list__item {
+    @apply flex;
+}
+
+/* A linked category has to look like a link. A badge with no pointer and no
+   hover reads as a label, which is what most categories are, so the ones that
+   genuinely filter a list get the library's always-on underline (the LinkSlot
+   convention) plus a hover state on the pill itself. Half-measures are the
+   failure here: a pointer alone is not a visible affordance. */
+.rsui-category-list__link {
+    @apply block rounded-full no-underline;
+    @apply focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-border-primary outline-hidden;
+}
+
+.rsui-category-list__link .rsui-badge {
+    @apply cursor-pointer underline underline-offset-2 transition-colors;
+}
+
+/* One grey step darker, not the usual `hover:bg-background-secondary`. That is the
+   convention for a hover on a white surface, and a neutral badge already sits on
+   background-secondary — applying it here would be a no-op. */
+.rsui-category-list__link:hover .rsui-badge {
+    @apply bg-background-secondary-invert border-border-primary text-text-primary;
+}
+
+/* The toggle. Matches the "See all" / view-all treatment already used in
+   section headers and footers: semibold on the tertiary-button colour, no
+   resting underline, underline on hover only. That pairing reads as an action
+   without competing with the badges beside it.
+
+   Sibling to the list rather than inside it, so it wraps onto its own line at
+   phone widths — which is where the cap does most of its work. */
+.rsui-category-list__more {
+    @apply inline-flex w-fit items-center whitespace-nowrap;
+    @apply text-sm font-semibold no-underline cursor-pointer transition-colors;
+    @apply text-button-tertiary hover:text-button-tertiary-hover;
+    @apply hover:underline underline-offset-4 decoration-2;
+    @apply focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-button-tertiary outline-hidden;
+}

package/components/page_header.css

@@ -2,9 +2,24 @@
    rest of the library has moved off — see the note in meta_info.css. It double-counts
    against any margin a child sets for itself and it breaks once a row wraps. Both
    happened here: see __title below. */
+
+/* A column at every width. This was `flex` — which is row — with `lg:flex-col`, so below
+   lg the root laid its children out horizontally.
+
+   Nothing caught it because below lg there was only ever one visible child to lay out:
+   `__top`, since `__meta` is `hidden lg:flex`. A single flex item looks the same in a row
+   as in a column. The tell was this rule's own `gap-y-space-md`, which does nothing in a
+   row direction unless the row wraps — 16px of dead declaration, written by someone
+   thinking "column".
+
+   Add a second full-width row and the direction stops being invisible: the categories
+   landed *beside* the title on a phone with both squeezed to half the screen. Measured.
+
+   `justify-between` is kept rather than dropped. It is inert in an unconstrained column,
+   so it changes nothing here, but a consuming app that constrains the header's height
+   would notice it going. From lg up this rule now resolves exactly as it did before. */
 .rsui-page-header {
-    @apply w-full flex justify-between gap-y-space-md;
-    @apply lg:flex-col;
+    @apply w-full flex flex-col justify-between gap-y-space-md;
 }
 
 .rsui-page-header__top {
@@ -187,3 +202,30 @@
 .rsui-page-header--toned .rsui-meta-info__help {
     color: var(--rsui-page-header-ink-muted);
 }
+
+/* ---------------------------------------------------------------------------
+   Categories
+
+   A wrapping row of neutral badges between the subtitle and the meta, naming
+   the buckets the record sits in. See category_list.css for the row itself.
+
+   Neutral is a rule here rather than a preference: the header already carries
+   exactly one coloured badge — the status beside the title — and a second
+   colour in this row makes both of them meaningless.
+
+   One row, not two kinds. Duration, level and domain are facts about the
+   record and belong in the meta grid; a bucket the record sits in belongs
+   here.
+   --------------------------------------------------------------------------- */
+.rsui-page-header__categories {
+    @apply flex w-full;
+}
+
+/* The tertiary green the toggle borrows disappears on a dark band, so it moves
+   onto the tone's own ink. Same reasoning as the MetaInfo overrides above:
+   reaching into another component's classes is not ideal, but an invisible
+   control is worse, and what a slot looks like on this component's tonal
+   surface is this stylesheet's business. */
+.rsui-page-header--toned .rsui-category-list__more {
+    color: var(--rsui-page-header-ink);
+}

package/components/section.css

@@ -54,6 +54,44 @@
     @apply bg-pink-50 border-pink-200 text-text-primary;
 }
 
+/* ---------------------------------------------------------------------------
+   The AI family at full strength: the same dark plum gradient Card's `ai-bold`
+   uses, so a bold section and a bold card read as one surface family. Unlike
+   `ai` this one does not animate — a moving gradient across a whole section's
+   worth of dark ground is a lot of motion for a container the reader is meant
+   to read, not glance at.
+
+   Contrast figures are card.css's: on the lightest stop, Warm Mauve 900, white
+   title 7.90:1 and Warm Mauve 200 muted 6.05:1.
+
+   `BodyText` inside is deliberately NOT adapted — it owns `onColor` for this,
+   the same split Card's `ai-bold` makes.
+   --------------------------------------------------------------------------- */
+.rsui-section--ai-bold {
+    @apply bg-linear-to-br from-background-ai-bold-from via-background-ai-bold-via via-65% to-background-ai-bold-to;
+    @apply text-text-on-color;
+}
+
+/* A bordered dark section wants its own edge, not a light hairline. */
+.rsui-section--bordered.rsui-section--ai-bold {
+    @apply border-transparent;
+}
+
+/* SectionHeader sets its own dark ink, which disappears here. Same reach
+   card.css makes into CardHeader for the same reason. */
+.rsui-section--ai-bold .rsui-section-header__title-text {
+    @apply text-text-on-color;
+}
+
+.rsui-section--ai-bold .rsui-section-header__subtitle {
+    color: var(--Colors-Warm-Mauve-200);
+}
+
+/* The header hairline is a light-ground border and vanishes on this surface. */
+.rsui-section--ai-bold .rsui-section-header--divider {
+    border-color: var(--Colors-Warm-Mauve-900);
+}
+
 .rsui-section--ai {
     @apply bg-linear-to-tr from-background-ai-from to-background-ai-to;
     background-size: 160% 160%;

package/components.css

@@ -23,6 +23,7 @@ Please be careful when adding new components and updating the order.
 @import './components/card.css';
 @import './components/card_header.css';
 @import './components/card_horizontal.css';
+@import './components/category_list.css';
 @import './components/checkbox_card.css';
 @import './components/column_picker.css';
 @import './components/comments.css';

package/package.json

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