unifyedx-storybook-new 0.1.24 → 0.1.26

package/dist/unifyedx-storybook-new.css

@@ -80,15 +80,6 @@
     --color-blue-900: oklch(37.9% .146 265.522);
     --color-purple-500: oklch(62.7% .265 303.9);
     --color-gray-50: oklch(98.5% .002 247.839);
-    --color-gray-100: oklch(96.7% .003 264.542);
-    --color-gray-200: oklch(92.8% .006 264.531);
-    --color-gray-300: oklch(87.2% .01 258.338);
-    --color-gray-400: oklch(70.7% .022 261.325);
-    --color-gray-500: oklch(55.1% .027 264.364);
-    --color-gray-600: oklch(44.6% .03 256.802);
-    --color-gray-700: oklch(37.3% .034 259.733);
-    --color-gray-800: oklch(27.8% .033 256.848);
-    --color-gray-900: oklch(21% .034 264.665);
     --color-black: #000;
     --color-white: #fff;
     --spacing: .25rem;
@@ -711,7 +702,7 @@
   }
 
   :where(.divide-gray-200 > :not(:last-child)) {
-    border-color: var(--color-gray-200);
+    border-color: var(--gray200);
   }
 
   .truncate {
@@ -782,15 +773,15 @@
   }
 
   .border-gray-200 {
-    border-color: var(--color-gray-200);
+    border-color: var(--gray200);
   }
 
   .border-gray-300 {
-    border-color: var(--color-gray-300);
+    border-color: var(--gray300);
   }
 
   .border-gray-400 {
-    border-color: var(--color-gray-400);
+    border-color: var(--gray400);
   }
 
   .border-transparent {
@@ -814,11 +805,11 @@
   }
 
   .bg-gray-100 {
-    background-color: var(--color-gray-100);
+    background-color: var(--gray100);
   }
 
   .bg-gray-200 {
-    background-color: var(--color-gray-200);
+    background-color: var(--gray200);
   }
 
   .bg-red-100 {
@@ -849,10 +840,6 @@
     padding: calc(var(--spacing) * 4);
   }
 
-  .p-6 {
-    padding: calc(var(--spacing) * 6);
-  }
-
   .p-8 {
     padding: calc(var(--spacing) * 8);
   }
@@ -936,10 +923,6 @@
     line-height: var(--tw-leading, var(--text-sm--line-height));
   }
 
-  .\!text-\[1\.5rem\] {
-    font-size: 1.5rem !important;
-  }
-
   .leading-5 {
     --tw-leading: calc(var(--spacing) * 5);
     line-height: calc(var(--spacing) * 5);
@@ -977,27 +960,27 @@
   }
 
   .text-gray-400 {
-    color: var(--color-gray-400);
+    color: var(--gray400);
   }
 
   .text-gray-500 {
-    color: var(--color-gray-500);
+    color: var(--gray500);
   }
 
   .text-gray-600 {
-    color: var(--color-gray-600);
+    color: var(--gray600);
   }
 
   .text-gray-700 {
-    color: var(--color-gray-700);
+    color: var(--gray700);
   }
 
   .text-gray-800 {
-    color: var(--color-gray-800);
+    color: var(--gray800);
   }
 
   .text-gray-900 {
-    color: var(--color-gray-900);
+    color: var(--darkgray200);
   }
 
   .text-green-500 {
@@ -1161,7 +1144,7 @@
     }
 
     .hover\:bg-gray-100:hover {
-      background-color: var(--color-gray-100);
+      background-color: var(--gray100);
     }
 
     .hover\:bg-white\/\[0\.6\]:hover {
@@ -1179,11 +1162,11 @@
     }
 
     .hover\:text-gray-800:hover {
-      color: var(--color-gray-800);
+      color: var(--gray800);
     }
 
     .hover\:text-gray-900:hover {
-      color: var(--color-gray-900);
+      color: var(--darkgray200);
     }
 
     .hover\:text-red-500:hover {
@@ -1250,6 +1233,11 @@
 
 :root {
   --font-primary: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --primaryColor: #525252;
+  --secondaryColor: #1e1e1e;
+  --secondaryTextColor: #1e1e1e;
+  --textColor: #fff;
+  --linkColor: #1c61a5;
   --color-text-primary: #1a1a1a;
   --color-text-secondary: #4d4d4d;
   --color-text-tertiary: gray;
@@ -3930,22 +3918,35 @@ body {
 }
 
 .btn-primary {
-  color: #fff;
-  background-color: #2563eb;
+  background-color: var(--primaryColor);
+  color: var(--textColor);
+  border-color: var(--primaryColor);
+}
+
+.btn-primary span {
+  color: var(--textColor);
 }
 
 .btn-primary:hover {
-  background-color: #1d4ed8;
+  background-color: var(--primaryColor);
+}
+
+.btn-primary:hover:not([disabled]) {
+  filter: brightness(90%);
 }
 
 .btn-secondary {
-  color: #1f2937;
-  background-color: #e5e7eb;
-  border-color: #d1d5db;
+  border-color: var(--secondaryColor);
+  color: var(--secondaryTextColor);
+  background-color: #fff;
 }
 
 .btn-secondary:hover {
-  background-color: #d1d5db;
+  background-color: #fff;
+}
+
+.btn-secondary:hover:not([disabled]) {
+  background-color: #f9fafb;
 }
 
 .btn-base[disabled] {
@@ -4887,23 +4888,36 @@ body {
 
 /* Primary Button */
 .btn-primary {
-  background-color: #2563eb; /* blue-600 */
-  color: white;
+  background-color: var(--primaryColor);
+  color: var(--textColor);
+  border-color: var(--primaryColor);
 }
+.btn-primary span {
+    color: var(--textColor);
+} 
+
 .btn-primary:hover {
-  background-color: #1d4ed8; /* blue-700 */
+  background-color:var(--primaryColor); /* blue-700 */
+}
+.btn-primary:hover:not([disabled]) {
+  filter: brightness(90%);
 }
 
 /* Secondary Button */
 .btn-secondary {
-  background-color: #e5e7eb; /* gray-200 */
-  color: #1f2937; /* gray-800 */
-  border-color: #d1d5db; /* gray-300 */
+  background-color: #ffffff;
+  border-color: var(--secondaryColor);
+  color:var(--secondaryTextColor)
 }
 .btn-secondary:hover {
-  background-color: #d1d5db; /* gray-300 */
+  background-color: #ffffff; /* gray-300 */
 }
 
+.btn-secondary:hover:not([disabled]) {
+  background-color: #f9fafb;
+}
+
+
 /* --- State Styles --- */
 
 /* Disabled State (works for all variants) */
@@ -7955,6 +7969,41 @@ body {
   width: 1rem;
   height: 1rem;
 }
+/* Minimal, robust positioning rules */
+.filter-modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(2px);
+}
+
+.filter-modal-container {
+  position: fixed;
+  inset: 0;
+  z-index: 50; /* sits on top */
+  display: flex;
+  justify-content: flex-end; /* slide-over from right */
+  pointer-events: none; /* allow clicks to pass except panel */
+}
+
+.filter-modal-positioner {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.filter-modal-panel {
+  pointer-events: auto; /* clickable */
+  height: 100vh;
+  width: 680px; /* your preferred width */
+  max-width: 90vw;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
+  border-radius: 1rem 0 0 1rem;
+  background: #fff;
+  position: relative;
+  overflow: hidden;
+}
 .invite-flow-wrapper {
   display: flex;
   flex-direction: column;
@@ -8193,38 +8242,3 @@ body {
   font-size: 0.875rem;
   color: #dc2626;
 }
-/* Minimal, robust positioning rules */
-.filter-modal-overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.5);
-  backdrop-filter: blur(2px);
-}
-
-.filter-modal-container {
-  position: fixed;
-  inset: 0;
-  z-index: 50; /* sits on top */
-  display: flex;
-  justify-content: flex-end; /* slide-over from right */
-  pointer-events: none; /* allow clicks to pass except panel */
-}
-
-.filter-modal-positioner {
-  height: 100%;
-  width: 100%;
-  display: flex;
-  justify-content: flex-end;
-}
-
-.filter-modal-panel {
-  pointer-events: auto; /* clickable */
-  height: 100vh;
-  width: 680px; /* your preferred width */
-  max-width: 90vw;
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
-  border-radius: 1rem 0 0 1rem;
-  background: #fff;
-  position: relative;
-  overflow: hidden;
-}