@redseed/redseed-ui-tailwindcss 7.64.0 → 7.66.0

package/components/progress_tracker_step.css

@@ -9,21 +9,21 @@
 }
 
 .rsui-progress-tracker-step--sm {
-    @apply gap-2;
+    @apply gap-space-xs;
 
     @apply after:top-3.5;
     @apply after:-left-4;
 }
 
 .rsui-progress-tracker-step--md {
-    @apply gap-2;
+    @apply gap-space-xs;
 
     @apply after:top-3.5 sm:after:top-4.5;
     @apply after:-left-4;
 }
 
 .rsui-progress-tracker-step--lg {
-    @apply gap-2 sm:gap-4;
+    @apply gap-space-xs sm:gap-space-md;
 
     @apply after:top-3.5 sm:after:top-6;
     @apply after:-left-4 sm:after:-left-8;

package/components/radio_card.css

@@ -52,7 +52,7 @@
 }
 
 .rsui-radio-card__title-row {
-    @apply relative text-xl leading-[1.3] font-medium text-text-primary line-clamp-3 min-h-6 pr-8;
+    @apply relative text-xl leading-[1.3] font-medium text-text-primary line-clamp-3 min-h-6 pr-space-xl;
 
     @apply after:content-[''] after:absolute after:top-0 after:right-0;
     @apply after:size-6 after:rounded-full after:transition-all;
@@ -60,7 +60,7 @@
 }
 
 .rsui-radio-card__title-row--radio-start {
-    @apply pl-8 pr-0;
+    @apply pl-space-xl pr-0;
     @apply after:left-0 after:right-auto;
 }
 
@@ -88,7 +88,7 @@
 }
 
 .rsui-radio-card__content-row--radio-start {
-    @apply pl-8 pr-0;
+    @apply pl-space-xl pr-0;
 }
 
 .rsui-radio-card__meta-row {

package/components/read_more.css

@@ -3,6 +3,6 @@
 }
 
 .rsui-read-more__link {
-    @apply mt-4;
+    @apply mt-space-md;
 }
 

package/components/record_count.css

@@ -1,4 +1,4 @@
 .record-count {
-    @apply my-2 text-sm text-text-secondary;
+    @apply my-space-xs text-sm text-text-secondary;
 }
 

package/components/section_header.css

@@ -47,7 +47,7 @@
    between two elements. Same category as the control offsets in checkbox_card and
    card_group, which are also deliberately raw. */
 .rsui-section-header__text--with-toolbar {
-    @apply pt-1;
+    @apply pt-space-xxs;
 }
 
 .rsui-section-header__title {

package/components/section_slider.css

@@ -59,7 +59,7 @@
  * width and still grows if the consumer puts something wider inside.
  */
 .rsui-section-slider__view-all {
-    @apply min-w-64 items-center justify-center gap-3 border-dashed p-space-lg text-center;
+    @apply min-w-64 items-center justify-center gap-space-sm border-dashed p-space-lg text-center;
     @apply font-semibold;
     @apply hover:cursor-pointer hover:shadow-md;
     @apply focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-border-primary outline-hidden;
@@ -162,7 +162,7 @@
  * use it.
  */
 .rsui-section-slider__container {
-    @apply relative flex gap-x-3 lg:gap-x-6 overflow-x-auto lg:overflow-x-hidden focus:outline-hidden scroll-smooth snap-x snap-mandatory scroll-pl-space-lg;
+    @apply relative flex gap-x-space-sm lg:gap-x-space-lg overflow-x-auto lg:overflow-x-hidden focus:outline-hidden scroll-smooth snap-x snap-mandatory scroll-pl-space-lg;
     @apply focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-border-primary;
 }
 
@@ -242,7 +242,7 @@
  * be covering content to duplicate a gesture the user already has.
  */
 .rsui-section-slider__actions {
-    @apply hidden lg:flex absolute inset-0 z-10 items-center justify-between px-3 pointer-events-none;
+    @apply hidden lg:flex absolute inset-0 z-10 items-center justify-between px-space-sm pointer-events-none;
 }
 
 /*

package/components/switcher.css

@@ -1,6 +1,6 @@
 .rsui-switcher {
-    @apply w-fit flex flex-col sm:flex-row sm:items-center overflow-hidden gap-1;
-    @apply bg-background-disabled p-1 rounded-xl;
+    @apply w-fit flex flex-col sm:flex-row sm:items-center overflow-hidden gap-space-xxs;
+    @apply bg-background-disabled p-space-xxs rounded-xl;
 }
 
 .rsui-switcher--full {
@@ -89,7 +89,7 @@
    Every rule below has to out-specify a same-specificity rule above it, so this
    block must stay last in the file. */
 .rsui-switcher--chips {
-    @apply w-full flex-row items-center flex-nowrap gap-2;
+    @apply w-full flex-row items-center flex-nowrap gap-space-xs;
     @apply bg-transparent p-0 rounded-none;
 
     /* The default is overflow-hidden; this row is meant to scroll. Scrollbar

package/components/switcher_item.css

@@ -12,8 +12,8 @@
     color: inherit;
 
     @apply h-fit inline-flex shrink-0 items-center justify-center select-none outline-hidden whitespace-nowrap will-change-transform cursor-pointer;
-    @apply font-semibold gap-2 rounded-lg border border-transparent transition;
-    @apply text-base px-3 py-2;
+    @apply font-semibold gap-space-xs rounded-lg border border-transparent transition;
+    @apply text-base px-space-sm py-space-xs;
 
     /* The class list above sets outline-hidden, which previously left the item with no focus
        indicator at all once it became focusable. Drawn inset because .rsui-switcher is

package/components/tab_slider_item.css

@@ -15,7 +15,7 @@
     color: inherit;
 
     @apply inline-flex shrink-0 items-center justify-center select-none cursor-pointer whitespace-nowrap;
-    @apply text-base px-4 py-3 gap-2 border-b-2 border-transparent -mb-px;
+    @apply text-base px-space-md py-space-sm gap-space-xs border-b-2 border-transparent -mb-px;
     @apply text-text-secondary;
 
     /* Focus is drawn inside the box: .rsui-tab-slider is an overflow-x-auto scroller, so an

package/components/table.css

@@ -58,5 +58,5 @@
 }
 
 .rsui-table__footer {
-    @apply w-full border-t border-border-primary overflow-hidden py-3 px-6;
+    @apply w-full border-t border-border-primary overflow-hidden py-space-sm px-space-lg;
 }

package/components/td.css

@@ -1,6 +1,6 @@
 .rsui-td {
     @apply text-left;
-    @apply py-3 px-5 text-sm leading-6 text-text-secondary;
+    @apply py-space-sm px-5 text-sm leading-6 text-text-secondary;
 }
 
 .rsui-td--center {

package/components/td_user.css

@@ -1,5 +1,5 @@
 .rsui-td-user {
-    @apply flex items-center gap-3;
+    @apply flex items-center gap-space-sm;
 }
 
 .rsui-td-user__avatar {

package/components/th.css

@@ -1,6 +1,6 @@
 .rsui-th {
     @apply text-left;
-    @apply py-3 px-5 text-sm leading-6 text-text-secondary;
+    @apply py-space-sm px-5 text-sm leading-6 text-text-secondary;
 }
 
 .rsui-th--center {
@@ -55,7 +55,7 @@
 }
 
 .rsui-th__content {
-    @apply inline-flex gap-1 items-center;
+    @apply inline-flex gap-space-xxs items-center;
 }
 
 /* Sortable header trigger — a real <button> reset to match the header text,
@@ -65,8 +65,8 @@
    valid click target. Focus ring lives here (the th itself is no longer focusable).
    Default justify-start matches the base left-aligned header. */
 .rsui-th__button {
-    @apply flex w-full gap-1 items-center justify-start;
-    @apply py-3 px-5 cursor-pointer m-0;
+    @apply flex w-full gap-space-xxs items-center justify-start;
+    @apply py-space-sm px-5 cursor-pointer m-0;
     @apply focus-visible:outline-2 focus-visible:outline-border-primary;
     font: inherit;
     color: inherit;

package/components/toggle.css

@@ -1,5 +1,5 @@
 .rsui-toggle {
-    @apply flex flex-col gap-y-2 border-0 bg-transparent p-0;
+    @apply flex flex-col gap-y-space-xs border-0 bg-transparent p-0;
 }
 
 .rsui-toggle--disabled label {
@@ -21,7 +21,7 @@
 }
 
 .rsui-toggle__control {
-    @apply justify-between flex items-center gap-x-4;
+    @apply justify-between flex items-center gap-x-space-md;
 }
 
 .rsui-toggle__control--label-end {

package/components/tooltip.css

@@ -55,7 +55,7 @@
 
 /* Content panel — positioned via inline styles (fixed, teleported to body) */
 .rsui-tooltip__content {
-    @apply relative px-3 py-2 w-max max-w-60;
+    @apply relative px-space-sm py-space-xs w-max max-w-60;
     @apply text-sm text-text-on-color bg-background-primary-contrast rounded-lg shadow-lg;
     @apply pointer-events-auto;
 }

package/components/two_column_layout.css

@@ -3,7 +3,7 @@
 }
 
 .rsui-two-column-layout__container {
-    @apply flex flex-col @4xl:flex-row gap-6 @4xl:gap-8;
+    @apply flex flex-col @4xl:flex-row gap-space-lg @4xl:gap-space-xl;
 }
 
 .rsui-two-column-layout__container--top-aside {
@@ -15,9 +15,9 @@
 }
 
 .rsui-two-column-layout__main {
-    @apply flex-1 w-full @4xl:w-(--phi-inverse-percentage) overflow-auto flex flex-col gap-6 @4xl:gap-8;
+    @apply flex-1 w-full @4xl:w-(--phi-inverse-percentage) overflow-auto flex flex-col gap-space-lg @4xl:gap-space-xl;
 }
 
 .rsui-two-column-layout__aside {
-    @apply shrink-0 w-full @4xl:w-(--phi-inverse-squared-percentage) overflow-auto flex flex-col gap-6 @4xl:gap-8;
+    @apply shrink-0 w-full @4xl:w-(--phi-inverse-squared-percentage) overflow-auto flex flex-col gap-space-lg @4xl:gap-space-xl;
 }

package/package.json

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

package/tokens.css

@@ -84,12 +84,27 @@
     --color-button-separator: var(--Colors-Grey-200);
     --color-button-disabled: var(--Colors-Grey-200);
 
-    /* Spacing */
-    --spacing-space-xxs: 0.25rem; /* 4px */
+    /* Spacing.
+
+       The brand runs an 8px rhythm with exactly seven values: 8, 16, 24, 32, 48, 64, 96.
+       This scale used to stop at 32, so the top three had no token at all and every use
+       of 48 or 64 had to be written as a raw utility — which is how they escaped review.
+       2xl and 3xl close that gap.
+
+       xxs (4px) and sm (12px) are NOT on the brand rhythm. They are kept because they are
+       already used widely and two of the three known 4px cases are the deliberate TIGHT
+       PAIR exception (see card_header.css), but they are the values to justify in review:
+       CardSpacing.test.js treats them as off-scale and requires a marker.
+
+       96px has no token yet — nothing in the library uses it. Add 4xl when something does,
+       rather than shipping a token with no caller. */
+    --spacing-space-xxs: 0.25rem; /* 4px  — off the brand rhythm */
     --spacing-space-xs: 0.5rem; /* 8px */
-    --spacing-space-sm: 0.75rem; /* 12px */
+    --spacing-space-sm: 0.75rem; /* 12px — off the brand rhythm */
     --spacing-space-md: 1rem; /* 16px */
     --spacing-space-lg: 1.5rem; /* 24px */
     --spacing-space-xl: 2rem; /* 32px */
+    --spacing-space-2xl: 3rem; /* 48px */
+    --spacing-space-3xl: 4rem; /* 64px */
 
 }