@digilogiclabs/saas-factory-ui 1.5.1 → 1.6.1

package/dist/index.css

@@ -724,6 +724,9 @@ body {
 .-top-1 {
   top: -0.25rem;
 }
+.-top-3 {
+  top: -0.75rem;
+}
 .bottom-0 {
   bottom: 0px;
 }
@@ -908,6 +911,12 @@ body {
 .mb-1 {
   margin-bottom: 0.25rem;
 }
+.mb-10 {
+  margin-bottom: 2.5rem;
+}
+.mb-16 {
+  margin-bottom: 4rem;
+}
 .mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -1385,6 +1394,18 @@ body {
 .max-w-none {
   max-width: none;
 }
+.max-w-screen-lg {
+  max-width: 1024px;
+}
+.max-w-screen-md {
+  max-width: 768px;
+}
+.max-w-screen-sm {
+  max-width: 640px;
+}
+.max-w-screen-xl {
+  max-width: 1280px;
+}
 .max-w-sm {
   max-width: 24rem;
 }
@@ -1450,6 +1471,10 @@ body {
   --tw-translate-x: 0px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.translate-x-5 {
+  --tw-translate-x: 1.25rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .translate-x-\[-50\%\] {
   --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1719,6 +1744,13 @@ body {
 .gap-8 {
   gap: 2rem;
 }
+.gap-x-10 {
+  -moz-column-gap: 2.5rem;
+  column-gap: 2.5rem;
+}
+.gap-y-6 {
+  row-gap: 1.5rem;
+}
 .-space-x-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(-0.5rem * var(--tw-space-x-reverse));
@@ -1779,6 +1811,11 @@ body {
   margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
 }
+.space-y-2\.5 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.625rem * var(--tw-space-y-reverse));
+}
 .space-y-3 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1935,6 +1972,12 @@ body {
 .border-accent-foreground {
   border-color: hsl(var(--accent-foreground));
 }
+.border-accent\/20 {
+  border-color: hsl(var(--accent) / 0.2);
+}
+.border-amber-200\/50 {
+  border-color: rgb(253 230 138 / 0.5);
+}
 .border-blue-200 {
   --tw-border-opacity: 1;
   border-color: rgb(191 219 254 / var(--tw-border-opacity, 1));
@@ -2112,6 +2155,12 @@ body {
 .bg-accent-foreground {
   background-color: hsl(var(--accent-foreground));
 }
+.bg-accent\/10 {
+  background-color: hsl(var(--accent) / 0.1);
+}
+.bg-accent\/5 {
+  background-color: hsl(var(--accent) / 0.05);
+}
 .bg-accent\/50 {
   background-color: hsl(var(--accent) / 0.5);
 }
@@ -2187,6 +2236,9 @@ body {
 .bg-card {
   background-color: hsl(var(--card));
 }
+.bg-card\/50 {
+  background-color: hsl(var(--card) / 0.5);
+}
 .bg-current {
   background-color: currentColor;
 }
@@ -2417,12 +2469,25 @@ body {
 .bg-gradient-to-br {
   background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
 }
+.bg-gradient-to-l {
+  background-image: linear-gradient(to left, var(--tw-gradient-stops));
+}
 .bg-gradient-to-r {
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
 }
 .bg-gradient-to-t {
   background-image: linear-gradient(to top, var(--tw-gradient-stops));
 }
+.from-accent\/5 {
+  --tw-gradient-from: hsl(var(--accent) / 0.05) var(--tw-gradient-from-position);
+  --tw-gradient-to: hsl(var(--accent) / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+.from-amber-50\/30 {
+  --tw-gradient-from: rgb(255 251 235 / 0.3) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(255 251 235 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
 .from-background {
   --tw-gradient-from: hsl(var(--background)) var(--tw-gradient-from-position);
   --tw-gradient-to: hsl(var(--background) / 0) var(--tw-gradient-to-position);
@@ -2955,6 +3020,9 @@ body {
 .tracking-widest {
   letter-spacing: 0.1em;
 }
+.text-accent {
+  color: hsl(var(--accent));
+}
 .text-accent-foreground {
   color: hsl(var(--accent-foreground));
 }
@@ -3315,6 +3383,14 @@ body {
     var(--tw-ring-shadow),
     var(--tw-shadow, 0 0 #0000);
 }
+.ring-1 {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow:
+    var(--tw-ring-offset-shadow),
+    var(--tw-ring-shadow),
+    var(--tw-shadow, 0 0 #0000);
+}
 .ring-2 {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -3323,6 +3399,9 @@ body {
     var(--tw-ring-shadow),
     var(--tw-shadow, 0 0 #0000);
 }
+.ring-accent\/20 {
+  --tw-ring-color: hsl(var(--accent) / 0.2);
+}
 .ring-blue-300 {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity, 1));
@@ -3347,6 +3426,10 @@ body {
   --tw-blur: blur(4px);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
+.grayscale {
+  --tw-grayscale: grayscale(100%);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
@@ -3411,6 +3494,11 @@ body {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
+.transition-shadow {
+  transition-property: box-shadow;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
 .transition-transform {
   transition-property: transform;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -3586,6 +3674,9 @@ body {
   .transition-transform {
     transition: none !important;
   }
+  .animate-marquee {
+    animation: none !important;
+  }
 }
 .glass-base {
   backdrop-filter: blur(12px);
@@ -3880,6 +3971,17 @@ body {
     border: 1px solid rgba(255, 255, 255, 0.3);
   }
 }
+@keyframes marquee {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-50%);
+  }
+}
+.animate-marquee {
+  animation: marquee 30s linear infinite;
+}
 .file\:mr-4::file-selector-button {
   margin-right: 1rem;
 }
@@ -4285,6 +4387,10 @@ body {
 .hover\:ring-primary\/20:hover {
   --tw-ring-color: hsl(var(--primary) / 0.2);
 }
+.hover\:grayscale-0:hover {
+  --tw-grayscale: grayscale(0);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
 .hover\:file\:bg-blue-100::file-selector-button:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
@@ -4874,6 +4980,11 @@ body {
 .dark\:bg-yellow-950\/50:is(.dark *) {
   background-color: rgb(66 32 6 / 0.5);
 }
+.dark\:from-amber-950\/20:is(.dark *) {
+  --tw-gradient-from: rgb(69 26 3 / 0.2) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(69 26 3 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
 .dark\:from-gray-800:is(.dark *) {
   --tw-gradient-from: #1f2937 var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(31 41 55 / 0) var(--tw-gradient-to-position);
@@ -5017,6 +5128,9 @@ body {
   .sm\:top-auto {
     top: auto;
   }
+  .sm\:mb-8 {
+    margin-bottom: 2rem;
+  }
   .sm\:block {
     display: block;
   }
@@ -5059,12 +5173,21 @@ body {
   .sm\:grid-cols-4 {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
+  .sm\:grid-cols-6 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
   .sm\:flex-row {
     flex-direction: row;
   }
   .sm\:flex-col {
     flex-direction: column;
   }
+  .sm\:items-center {
+    align-items: center;
+  }
+  .sm\:items-stretch {
+    align-items: stretch;
+  }
   .sm\:justify-end {
     justify-content: flex-end;
   }
@@ -5348,6 +5471,9 @@ body {
   .lg\:grid-cols-4 {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
+  .lg\:grid-cols-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
   .lg\:grid-cols-6 {
     grid-template-columns: repeat(6, minmax(0, 1fr));
   }
@@ -5441,6 +5567,15 @@ body {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 }
+.\[\&\>div\:first-child\]\:pt-4 > div:first-child {
+  padding-top: 1rem;
+}
+.\[\&\>div\]\:p-4 > div {
+  padding: 1rem;
+}
+.\[\&\>div\]\:pt-0 > div {
+  padding-top: 0px;
+}
 .\[\&\>span\]\:line-clamp-1 > span {
   overflow: hidden;
   display: -webkit-box;
@@ -5533,6 +5668,18 @@ body {
 .\[\&_\[cmdk-item\]_svg\]\:w-5 [cmdk-item] svg {
   width: 1.25rem;
 }
+.\[\&_\[data-card-content\]\]\:p-4 [data-card-content] {
+  padding: 1rem;
+}
+.\[\&_\[data-card-content\]\]\:pt-0 [data-card-content] {
+  padding-top: 0px;
+}
+.\[\&_\[data-card-footer\]\]\:p-4 [data-card-footer] {
+  padding: 1rem;
+}
+.\[\&_\[data-card-header\]\]\:p-4 [data-card-header] {
+  padding: 1rem;
+}
 .\[\&_p\]\:leading-relaxed p {
   line-height: 1.625;
 }
@@ -5552,4 +5699,127 @@ body {
 .\[\&_tbody_tr\:nth-child\(even\)\]\:bg-muted\/25 tbody tr:nth-child(even) {
   background-color: hsl(var(--muted) / 0.25);
 }
+
+/* src/styles/design-tokens.css */
+:root {
+  --color-bg-base: #ffffff;
+  --color-bg-surface: #f9fafb;
+  --color-bg-elevated: #ffffff;
+  --color-bg-muted: #f3f4f6;
+  --color-bg-overlay: rgba(0, 0, 0, 0.5);
+  --color-text-primary: #111827;
+  --color-text-secondary: #4b5563;
+  --color-text-muted: #6b7280;
+  --color-text-inverse: #ffffff;
+  --color-text-link: #2563eb;
+  --color-border-soft: #e5e7eb;
+  --color-border-default: #d1d5db;
+  --color-border-strong: #9ca3af;
+  --color-accent: #3b82f6;
+  --color-accent-hover: #2563eb;
+  --color-accent-muted: #dbeafe;
+  --color-accent-text: #ffffff;
+  --color-success: #10b981;
+  --color-success-muted: #d1fae5;
+  --color-warning: #f59e0b;
+  --color-warning-muted: #fef3c7;
+  --color-danger: #ef4444;
+  --color-danger-muted: #fee2e2;
+  --color-info: #3b82f6;
+  --color-info-muted: #dbeafe;
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.25rem;
+  --space-6: 1.5rem;
+  --space-8: 2rem;
+  --space-10: 2.5rem;
+  --space-12: 3rem;
+  --space-16: 4rem;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --radius-2xl: 1rem;
+  --radius-full: 9999px;
+  --content-max-sm: 640px;
+  --content-max-md: 768px;
+  --content-max-lg: 1024px;
+  --content-max-xl: 1280px;
+  --motion-fast: 150ms;
+  --motion-base: 300ms;
+  --motion-slow: 500ms;
+  --motion-slower: 800ms;
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --z-base: 0;
+  --z-dropdown: 10;
+  --z-sticky: 20;
+  --z-fixed: 30;
+  --z-modal-backdrop: 40;
+  --z-modal: 50;
+  --z-popover: 60;
+  --z-tooltip: 70;
+  --z-toast: 80;
+  --font-size-xs: 0.75rem;
+  --font-size-sm: 0.875rem;
+  --font-size-base: 1rem;
+  --font-size-lg: 1.125rem;
+  --font-size-xl: 1.25rem;
+  --font-size-2xl: 1.5rem;
+  --font-size-3xl: 1.875rem;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --line-height-tight: 1.25;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.625;
+  --touch-target-min: 44px;
+  --touch-target-comfortable: 48px;
+  --touch-target-large: 56px;
+}
+.dark,
+[data-theme=dark] {
+  --color-bg-base: #111827;
+  --color-bg-surface: #1f2937;
+  --color-bg-elevated: #374151;
+  --color-bg-muted: #1f2937;
+  --color-bg-overlay: rgba(0, 0, 0, 0.7);
+  --color-text-primary: #f9fafb;
+  --color-text-secondary: #d1d5db;
+  --color-text-muted: #9ca3af;
+  --color-text-inverse: #111827;
+  --color-text-link: #60a5fa;
+  --color-border-soft: #374151;
+  --color-border-default: #4b5563;
+  --color-border-strong: #6b7280;
+  --color-accent: #60a5fa;
+  --color-accent-hover: #3b82f6;
+  --color-accent-muted: #1e3a8a;
+  --color-accent-text: #ffffff;
+  --color-success: #34d399;
+  --color-success-muted: #064e3b;
+  --color-warning: #fbbf24;
+  --color-warning-muted: #78350f;
+  --color-danger: #f87171;
+  --color-danger-muted: #7f1d1d;
+  --color-info: #60a5fa;
+  --color-info-muted: #1e3a8a;
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.3);
+}
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --motion-fast: 0ms;
+    --motion-base: 0ms;
+    --motion-slow: 0ms;
+    --motion-slower: 0ms;
+  }
+}
 /*# sourceMappingURL=index.css.map */