@redseed/redseed-ui-tailwindcss 7.45.0 → 7.47.0

package/components/button_ai.css

@@ -0,0 +1,17 @@
+.rsui-button-ai {
+    /* default colors */
+    @apply text-text-ai bg-linear-to-tr from-background-ai-from to-background-ai-to border-border-ai;
+
+    /* default hover state */
+    @apply hover:text-text-ai hover:from-background-ai-invert hover:to-background-ai-from hover:border-border-ai;
+
+    /* default focus state */
+    @apply focus-visible:ring-border-ai focus-visible:border-border-ai;
+
+    /* default active state */
+    @apply active:bg-none active:bg-background-ai-invert;
+
+    /* default disabled state */
+    @apply disabled:bg-none disabled:bg-button-disabled disabled:border-button-disabled disabled:text-text-disabled;
+    @apply disabled:active:bg-none disabled:active:bg-button-disabled disabled:active:border-button-disabled;
+}

package/components/card.css

@@ -116,19 +116,19 @@
 }
 
 .rsui-card__image__badge-container {
-    @apply absolute inset-x-0 w-full bottom-0 py-4 px-4 sm:px-6 flex gap-1;
+    @apply absolute inset-x-0 w-full bottom-0 py-space-xl px-space-xl flex gap-space-xxs;
 }
 
 .rsui-card__content {
-    @apply flex-1 flex flex-col relative gap-y-3;
+    @apply flex-1 flex flex-col relative gap-y-space-sm;
 }
 
 .rsui-card__content--padded {
-    @apply py-5 px-4 min-h-16;
+    @apply py-space-xl px-space-xl min-h-16;
 }
 
 .rsui-card__meta {
-    @apply max-w-full overflow-x-auto grid grid-cols-1 gap-x-6 gap-y-2;
+    @apply max-w-full overflow-x-auto grid grid-cols-1 gap-x-space-lg gap-y-space-xs;
 }
 
 .rsui-card--2xs .rsui-card__meta {
@@ -148,17 +148,17 @@
 }
 
 .rsui-card--lg .rsui-card__meta {
-    @apply grid-cols-6 gap-x-8;
+    @apply grid-cols-6 gap-x-space-xl;
 }
 
 .rsui-card--xl .rsui-card__meta {
-    @apply grid-cols-8 gap-x-8;
+    @apply grid-cols-8 gap-x-space-xl;
 }
 
 .rsui-card--2xl .rsui-card__meta {
-    @apply grid-cols-10 gap-x-8;
+    @apply grid-cols-10 gap-x-space-xl;
 }
 
 .rsui-card--3xl .rsui-card__meta {
-    @apply grid-cols-12 gap-x-8;
+    @apply grid-cols-12 gap-x-space-xl;
 }

package/components/card_header.css

@@ -1,10 +1,9 @@
 .rsui-card-header {
     @apply @container/card-header;
-    @apply flex flex-col gap-x-3 gap-y-5 transition-all;
-    @apply pt-4 pb-0 px-4;
+    @apply flex flex-col gap-x-space-sm gap-y-space-lg transition-all;
+    @apply pt-space-xl pb-0 px-space-xl;
     @apply border-b border-transparent;
 
-    @apply @sm/card-header:px-6;
     @apply @md/card-header:flex-row @md/card-header:justify-between @md/card-header:items-center;
 }
 
@@ -18,11 +17,11 @@
 }
 
 .rsui-card-header--padded-bottom {
-    @apply pb-4;
+    @apply pb-space-xl;
 }
 
 .rsui-card-header__header {
-    @apply flex-1 flex justify-between items-start gap-x-3;
+    @apply flex-1 flex justify-between items-start gap-x-space-sm;
 }
 
 .rsui-card-header__header--single-line {
@@ -41,13 +40,13 @@
 }
 
 .rsui-card-header__text {
-    @apply flex-1 flex flex-col gap-y-2 pt-2;
+    @apply flex-1 flex flex-col gap-y-space-xs pt-2;
 
-    @apply @md/card-header:pt-0 @md/card-header:gap-y-1;
+    @apply @md/card-header:pt-0 @md/card-header:gap-y-space-xxs;
 }
 
 .rsui-card-header__title-container {
-    @apply flex flex-wrap items-center gap-y-1 gap-x-2;
+    @apply flex flex-wrap items-center gap-y-space-xxs gap-x-space-xs;
 }
 
 .rsui-card-header__title {
@@ -72,15 +71,15 @@
 }
 
 .rsui-card-header__toolbar {
-    @apply flex gap-3 justify-end;
+    @apply flex gap-space-sm justify-end;
 
     @apply @md/card-header:items-center;
 }
 
 .rsui-card-header__actions-desktop {
-    @apply flex gap-3 items-center;
+    @apply flex gap-space-sm items-center;
 }
 
 .rsui-card-header__actions-mobile {
-    @apply flex flex-wrap gap-3 items-center;
+    @apply flex flex-wrap gap-space-sm items-center;
 }

package/components/card_horizontal.css

@@ -175,7 +175,7 @@
 .rsui-card-horizontal__body {
     /* Mobile: body fills full width below the image (self-stretch default).
        sm+: self-start so body drives the grid row height (not stretches to it). */
-    @apply flex flex-col gap-y-2 p-4 min-w-0;
+    @apply flex flex-col gap-y-space-xs p-space-xl min-w-0;
 }
 
 @container card-horizontal (min-width: calc(32rem - 2px)) /* --container-lg (32rem=512px) - 2px border */ {
@@ -185,7 +185,7 @@
 }
 
 .rsui-card-horizontal__content {
-    @apply flex flex-col gap-y-1;
+    @apply flex flex-col gap-y-space-xxs;
 }
 
 .rsui-card-horizontal__title {
@@ -197,5 +197,5 @@
 }
 
 .rsui-card-horizontal__meta {
-    @apply flex flex-wrap items-center gap-x-3 gap-y-1;
+    @apply flex flex-wrap items-center gap-x-space-sm gap-y-space-xxs;
 }

package/components/form_field_radio_group.css

@@ -10,6 +10,36 @@
     @apply flex-col items-start;
 }
 
+/* Likert: a single nowrap row spread across the full width. Each anchor sits inside its
+   own end point (see the component), so justify-between distributes free space between
+   the scale points while the anchor stays tight against the circle it labels — that
+   distance is set on the item below, and free space never stretches it.
+   The gap here is only a floor: it applies once the row is at its natural width and
+   there is no free space left to distribute.
+   ponytail: no responsive collapse — a long scale on a narrow container overflows
+   its parent. Add overflow-x-auto or a stacked fallback if that shows up in the wild. */
+.rsui-form-field-radio-group__items--likert {
+    @apply flex-nowrap justify-between gap-x-space-sm;
+}
+
+/* Anchor-to-circle distance. Wider than the default item gap so the anchor is not
+   crowding its circle, still far tighter than the gaps between scale points. */
+.rsui-form-field-radio-group__items--likert .rsui-form-field-radio-group__item {
+    @apply gap-x-space-lg;
+}
+
+/* The anchors carry the meaning, so each radio's own label is for screen readers only */
+.rsui-form-field-radio-group__items--likert .rsui-form-field-radio-group__item-label {
+    @apply sr-only;
+}
+
+/* Typography matches .rsui-form-field-radio-group__item-label — the anchors read as scale
+   options, not as field labels, and inherit their size the same way. They are not <label>
+   elements: an anchor names the end of the scale, not any one radio. */
+.rsui-form-field-radio-group__anchor {
+    @apply shrink-0 font-normal text-text-primary;
+}
+
 .rsui-form-field-radio-group__item {
     @apply relative flex items-center gap-x-2 cursor-pointer;
 }

package/components.css

@@ -18,6 +18,7 @@ Please be careful when adding new components and updating the order.
 @import './components/button_secondary.css';
 @import './components/button_tertiary.css';
 @import './components/button_danger.css';
+@import './components/button_ai.css';
 @import './components/card_group.css';
 @import './components/card.css';
 @import './components/card_header.css';

package/package.json

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

package/tokens.css

@@ -74,6 +74,7 @@
     --color-button-disabled: var(--Colors-Grey-200);
 
     /* Spacing */
+    --spacing-space-xxs: 0.25rem; /* 4px */
     --spacing-space-xs: 0.5rem; /* 8px */
     --spacing-space-sm: 0.75rem; /* 12px */
     --spacing-space-md: 1rem; /* 16px */