@redseed/redseed-ui-tailwindcss 7.49.0 → 7.51.0

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/components/modal.css

@@ -37,6 +37,14 @@
     @apply sm:max-w-2xl;
 }
 
+.rsui-modal__content--xl {
+    @apply sm:max-w-4xl;
+}
+
+.rsui-modal__content--2xl {
+    @apply sm:max-w-6xl;
+}
+
 .rsui-modal__content--top {
     @apply mt-0 mb-auto;
 }

package/package.json

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