@redseed/redseed-ui-tailwindcss 7.50.0 → 7.52.0

package/components/card.css

@@ -116,7 +116,7 @@
 }
 
 .rsui-card__image__badge-container {
-    @apply absolute inset-x-0 w-full bottom-0 py-space-xl px-space-xl flex gap-space-xxs;
+    @apply absolute inset-x-0 w-full bottom-0 py-space-lg px-space-xl flex gap-space-xxs;
 }
 
 .rsui-card__content {
@@ -124,7 +124,7 @@
 }
 
 .rsui-card__content--padded {
-    @apply py-space-xl px-space-xl min-h-16;
+    @apply py-space-lg px-space-xl min-h-16;
 }
 
 .rsui-card__meta {

package/components/card_header.css

@@ -1,7 +1,7 @@
 .rsui-card-header {
     @apply @container/card-header;
     @apply flex flex-col gap-x-space-sm gap-y-space-lg transition-all;
-    @apply pt-space-xl pb-0 px-space-xl;
+    @apply pt-space-lg pb-0 px-space-xl;
     @apply border-b border-transparent;
 
     @apply @md/card-header:flex-row @md/card-header:justify-between @md/card-header:items-center;
@@ -17,7 +17,7 @@
 }
 
 .rsui-card-header--padded-bottom {
-    @apply pb-space-xl;
+    @apply pb-space-lg;
 }
 
 .rsui-card-header__header {

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-space-xs p-space-xl min-w-0;
+    @apply flex flex-col gap-y-space-xs py-space-lg px-space-xl min-w-0;
 }
 
 @container card-horizontal (min-width: calc(32rem - 2px)) /* --container-lg (32rem=512px) - 2px border */ {

package/components/loader.css

@@ -2,22 +2,74 @@
     @apply max-w-24 max-h-24 min-w-3 min-h-3 transition;
 }
 
-.rsui-loader path {
-    @apply fill-text-primary;
+/* The mark carries its own intrinsic width/height, so it scales down to
+   whatever the container allows — the max-* above when standalone, or the
+   size Icon sets on its child when nested inside one. */
+.rsui-loader svg {
+    @apply w-auto h-auto max-w-full max-h-full;
+}
+
+/* Default: the two-tone RedSeed mark. The colour props override both halves
+   with a single colour, for places where the brand mark would compete — on a
+   filled button, or inline in a sentence. */
+.rsui-loader--brand .rsui-loader__mark {
+    fill: var(--Colors-Journey-Green-500);
 }
 
-.rsui-loader--primary path {
+.rsui-loader--brand .rsui-loader__accent {
+    fill: var(--Colors-Warm-Mauve-500);
+}
+
+.rsui-loader--primary .rsui-loader__mark,
+.rsui-loader--primary .rsui-loader__accent {
     @apply fill-text-primary;
 }
 
-.rsui-loader--secondary path {
+.rsui-loader--secondary .rsui-loader__mark,
+.rsui-loader--secondary .rsui-loader__accent {
     @apply fill-text-secondary;
 }
 
-.rsui-loader--white path {
+.rsui-loader--white .rsui-loader__mark,
+.rsui-loader--white .rsui-loader__accent {
     @apply fill-background-primary;
 }
 
+/* 417 is the length of the mask path. The stroke paints in over the first
+   half of the cycle, holds for a beat, then retraces back out. */
+.rsui-loader__journey {
+    stroke-dasharray: 417;
+    stroke-dashoffset: 417;
+    animation: rsui-loader-paint 2.6s linear infinite;
+}
+
+@keyframes rsui-loader-paint {
+    0% {
+        stroke-dashoffset: 417;
+    }
+
+    49.52% {
+        stroke-dashoffset: 0;
+    }
+
+    50.48% {
+        stroke-dashoffset: 0;
+    }
+
+    100% {
+        stroke-dashoffset: 417;
+    }
+}
+
+/* Reduced motion still needs the mark visible — the loader is the only thing
+   on screen while content loads, so hiding it would leave an empty region. */
+@media (prefers-reduced-motion: reduce) {
+    .rsui-loader__journey {
+        animation: none;
+        stroke-dashoffset: 0;
+    }
+}
+
 .rsui-loader__label {
     @apply sr-only;
 }

package/package.json

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