@redseed/redseed-ui-tailwindcss 6.2.3 → 6.2.5

package/colors.css

@@ -482,4 +482,6 @@
     --Colors-Effects-Shadows-shadow-3xl_02: hsla(220, 29%, 5%, 0.04);
     --Colors-Effects-Shadows-shadow-skeumorphic-inner: hsla(220, 29%, 5%, 0.05);
     --Colors-Effects-Shadows-shadow-skeumorphic-inner-border: hsla(220, 29%, 5%, 0.18);
+    --Colors-Background-AI-1: hsla(264, 74%, 93%, 1);
+    --Colors-Background-AI-2: hsla(33, 100%, 96%, 1);
 }

package/components/card.css

@@ -1,11 +1,11 @@
 .rsui-card {
     @apply relative flex flex-col;
     @apply transition duration-200;
-    @apply rounded-xl bg-background-primary border border-transparent;
+    @apply rounded-xl bg-background-primary;
 }
 
 .rsui-card--bordered {
-    @apply border-border-primary;
+    @apply border border-border-primary;
 }
 
 .rsui-card--hoverable {
@@ -29,7 +29,11 @@
 }
 
 .rsui-card__image {
-    @apply rounded-t-xl overflow-hidden;
+    @apply rounded-t-xl overflow-hidden w-full relative;
+}
+
+.rsui-card__image__badge-container {
+    @apply absolute inset-x-0 w-full bottom-0 py-4 px-4 sm:px-6 flex gap-1;
 }
 
 .rsui-card__content {

package/components/modal.css

@@ -36,8 +36,8 @@
 
 .rsui-modal__content {
     @apply relative max-h-full inset-0 overflow-scroll overscroll-contain transform transition-all;
-    @apply border rounded-xl shadow-full md:w-full md:mx-auto mx-4;
-    @apply bg-background-primary border-border-primary;
+    @apply rounded-xl shadow-full md:w-full md:mx-auto mx-4;
+    @apply bg-background-primary;
     -ms-overflow-style: none;
     scrollbar-width: none;
 }

package/components/section.css

@@ -1,9 +1,9 @@
 .rsui-section {
-    @apply border border-solid rounded-xl p-6 space-y-4;
+    @apply border border-solid rounded-xl p-6 space-y-4 border-border-primary ;
 }
 
 .rsui-section--primary {
-    @apply bg-background-primary border-border-primary text-text-primary;
+    @apply bg-background-primary text-text-primary;
 }
 
 .rsui-section--secondary {
@@ -29,3 +29,26 @@
 .rsui-section--error {
     @apply bg-background-error border-border-error text-text-primary;
 }
+
+.rsui-section--ai {
+    @apply bg-linear-45 from-background-ai-from to-background-ai-to;
+    background-size: 160% 160%;
+    background-position: 0% 50%;
+    animation: rsui-section-ai-gradient 3s ease-in-out infinite alternate;
+}
+
+@keyframes rsui-section-ai-gradient {
+    0% {
+        background-position: 0% 50%;
+    }
+    100% {
+        background-position: 100% 50%;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .rsui-section--ai {
+        animation: none;
+        background-position: 50% 50%;
+    }
+}

package/package.json

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

package/tokens.css

@@ -16,10 +16,12 @@
     --color-background-warning: var(--Colors-Warning-50);
     --color-background-error: var(--Colors-Error-50);
     --color-background-info: var(--Colors-Blue-50);
+    --color-background-ai-from: var(--Colors-Background-AI-1);
+    --color-background-ai-to: var(--Colors-Background-AI-2);
 
-    --color-border-primary: var(--Colors-Grey-400);
-    --color-border-secondary: var(--Colors-Grey-300);
-    --color-border-disabled: var(--Colors-Grey-200);
+    --color-border-primary: var(--Colors-Grey-300);
+    --color-border-secondary: var(--Colors-Grey-200);
+    --color-border-disabled: var(--Colors-Grey-300);
     --color-border-brand: var(--Colors-Brand-200);
     --color-border-success: var(--Colors-Success-200);
     --color-border-warning: var(--Colors-Warning-200);