@yomologic/react-ui 0.4.1 → 0.5.1

package/dist/styles.css

@@ -22,7 +22,6 @@
       "Courier New",
       monospace;
     --color-red-100: oklch(93.6% 0.032 17.717);
-    --color-red-200: oklch(88.5% 0.062 18.334);
     --color-red-500: oklch(63.7% 0.237 25.331);
     --color-red-600: oklch(57.7% 0.245 27.325);
     --color-red-800: oklch(44.4% 0.177 26.899);
@@ -1003,6 +1002,9 @@
   .justify-end {
     justify-content: flex-end;
   }
+  .justify-start {
+    justify-content: flex-start;
+  }
   .\[gap\:var\(--nav-gap\)\] {
     gap: var(--nav-gap);
   }
@@ -1311,12 +1313,12 @@
   .\[background-color\:var\(--card-icon-blue-bg\)\] {
     background-color: var(--card-icon-blue-bg);
   }
-  .\[background-color\:var\(--card-icon-purple-bg\)\] {
-    background-color: var(--card-icon-purple-bg);
-  }
   .\[background-color\:var\(--component-primary-bg\)\] {
     background-color: var(--component-primary-bg);
   }
+  .bg-\(--card-icon-purple-bg\) {
+    background-color: var(--card-icon-purple-bg);
+  }
   .bg-\(--color-accent\) {
     background-color: var(--color-accent);
   }
@@ -1362,6 +1364,9 @@
   .bg-\[var\(--color-info-muted\)\] {
     background-color: var(--color-info-muted);
   }
+  .bg-\[var\(--color-muted\)\] {
+    background-color: var(--color-muted);
+  }
   .bg-\[var\(--color-primary\)\] {
     background-color: var(--color-primary);
   }
@@ -1473,13 +1478,6 @@
   .bg-yellow-600 {
     background-color: var(--color-yellow-600);
   }
-  .bg-linear-to-b {
-    --tw-gradient-position: to bottom;
-    @supports (background-image: linear-gradient(in lab, red, red)) {
-      --tw-gradient-position: to bottom in oklab;
-    }
-    background-image: linear-gradient(var(--tw-gradient-stops));
-  }
   .bg-linear-to-br {
     --tw-gradient-position: to bottom right;
     @supports (background-image: linear-gradient(in lab, red, red)) {
@@ -1506,6 +1504,19 @@
     --tw-gradient-from: var(--color-gray-50);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
+  .from-transparent {
+    --tw-gradient-from: transparent;
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+  .via-current {
+    --tw-gradient-via: currentcolor;
+    --tw-gradient-via-stops:
+      var(--tw-gradient-position),
+      var(--tw-gradient-from) var(--tw-gradient-from-position),
+      var(--tw-gradient-via) var(--tw-gradient-via-position),
+      var(--tw-gradient-to) var(--tw-gradient-to-position);
+    --tw-gradient-stops: var(--tw-gradient-via-stops);
+  }
   .to-gray-100 {
     --tw-gradient-to: var(--color-gray-100);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -1518,8 +1529,8 @@
     --tw-gradient-to: var(--color-purple-600);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
-  .to-white {
-    --tw-gradient-to: var(--color-white);
+  .to-transparent {
+    --tw-gradient-to: transparent;
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
   .bg-cover {
@@ -1531,9 +1542,21 @@
   .bg-center {
     background-position: center;
   }
+  .object-contain {
+    object-fit: contain;
+  }
   .object-cover {
     object-fit: cover;
   }
+  .object-fill {
+    object-fit: fill;
+  }
+  .object-none {
+    object-fit: none;
+  }
+  .object-scale-down {
+    object-fit: scale-down;
+  }
   .p-\(--input-padding\) {
     padding: var(--input-padding);
   }
@@ -1732,6 +1755,9 @@
   .pr-3 {
     padding-right: calc(var(--spacing) * 3);
   }
+  .pr-4 {
+    padding-right: calc(var(--spacing) * 4);
+  }
   .pr-10 {
     padding-right: calc(var(--spacing) * 10);
   }
@@ -1843,6 +1869,9 @@
   .pl-3 {
     padding-left: calc(var(--spacing) * 3);
   }
+  .pl-4 {
+    padding-left: calc(var(--spacing) * 4);
+  }
   .pl-10 {
     padding-left: calc(var(--spacing) * 10);
   }
@@ -2000,15 +2029,15 @@
   .\[color\:var\(--card-icon-blue-text\)\] {
     color: var(--card-icon-blue-text);
   }
-  .\[color\:var\(--card-icon-purple-text\)\] {
-    color: var(--card-icon-purple-text);
-  }
   .\[color\:var\(--color-primary-foreground\)\] {
     color: var(--color-primary-foreground);
   }
   .\[color\:var\(--component-primary-text\)\] {
     color: var(--component-primary-text);
   }
+  .text-\(--card-icon-purple-text\) {
+    color: var(--card-icon-purple-text);
+  }
   .text-\(--color-accent-foreground\) {
     color: var(--color-accent-foreground);
   }
@@ -2105,9 +2134,6 @@
   .text-purple-600 {
     color: var(--color-purple-600);
   }
-  .text-red-600 {
-    color: var(--color-red-600);
-  }
   .text-red-800 {
     color: var(--color-red-800);
   }
@@ -2126,6 +2152,9 @@
   .uppercase {
     text-transform: uppercase;
   }
+  .no-underline {
+    text-decoration-line: none;
+  }
   .underline {
     text-decoration-line: underline;
   }
@@ -2375,7 +2404,7 @@
       }
     }
   }
-  .group-hover\:\[background-color\:var\(--card-icon-purple-bg-hover\)\] {
+  .group-hover\:bg-\(--card-icon-purple-bg-hover\) {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
         background-color: var(--card-icon-purple-bg-hover);
@@ -2424,6 +2453,13 @@
       }
     }
   }
+  .group-hover\:opacity-100 {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        opacity: 100%;
+      }
+    }
+  }
   .group-hover\/checkbox\:scale-100 {
     &:is(:where(.group\/checkbox):hover *) {
       @media (hover: hover) {
@@ -2565,6 +2601,11 @@
       }
     }
   }
+  .group-active\:opacity-100 {
+    &:is(:where(.group):active *) {
+      opacity: 100%;
+    }
+  }
   .group-active\/checkbox\:scale-100 {
     &:is(:where(.group\/checkbox):active *) {
       --tw-scale-x: 100%;
@@ -2588,6 +2629,13 @@
       }
     }
   }
+  .hover\:border-\(--color-primary\) {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-primary);
+      }
+    }
+  }
   .hover\:border-\[\#4b5563\] {
     &:hover {
       @media (hover: hover) {
@@ -2665,6 +2713,16 @@
       }
     }
   }
+  .hover\:bg-\(--color-primary\)\/5 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-primary);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-primary) 5%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-\(--color-primary\)\/10 {
     &:hover {
       @media (hover: hover) {
@@ -2699,13 +2757,6 @@
       }
     }
   }
-  .hover\:bg-\[var\(--color-primary-hover\)\] {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-primary-hover);
-      }
-    }
-  }
   .hover\:bg-gray-50 {
     &:hover {
       @media (hover: hover) {
@@ -2817,11 +2868,6 @@
       border-color: var(--color-primary);
     }
   }
-  .focus\:border-red-500 {
-    &:focus {
-      border-color: var(--color-red-500);
-    }
-  }
   .focus\:border-transparent {
     &:focus {
       border-color: transparent;
@@ -2851,16 +2897,6 @@
       --tw-ring-color: var(--color-blue-500);
     }
   }
-  .focus\:ring-red-200 {
-    &:focus {
-      --tw-ring-color: var(--color-red-200);
-    }
-  }
-  .focus\:ring-red-500 {
-    &:focus {
-      --tw-ring-color: var(--color-red-500);
-    }
-  }
   .focus\:ring-offset-2 {
     &:focus {
       --tw-ring-offset-width: 2px;
@@ -2901,6 +2937,11 @@
       outline-style: none;
     }
   }
+  .active\:border-\(--color-primary\) {
+    &:active {
+      border-color: var(--color-primary);
+    }
+  }
   .active\:bg-\(--color-muted\) {
     &:active {
       background-color: var(--color-muted);
@@ -3137,6 +3178,8 @@
   --color-warning: #d4a574;
   --color-info: #4d9de0;
   --color-background: #0f1419;
+  --color-surface: #1a2028;
+  --color-surface-elevated: #242c36;
   --color-foreground: #e3e8ed;
   --color-muted: #1a2028;
   --color-muted-foreground: #8b9ba8;
@@ -3268,11 +3311,11 @@
   --checkbox-size-md: 1.5rem;
   --checkbox-size-lg: 1.75rem;
   --checkbox-size-xl: 2rem;
-  --checkbox-label-font-size-xs: 0.75rem;
-  --checkbox-label-font-size-sm: 0.875rem;
-  --checkbox-label-font-size-md: 1rem;
-  --checkbox-label-font-size-lg: 1.125rem;
-  --checkbox-label-font-size-xl: 1.25rem;
+  --checkbox-label-font-size-xs: var(--typography-caption, 0.6875rem);
+  --checkbox-label-font-size-sm: var(--typography-small, 0.75rem);
+  --checkbox-label-font-size-md: var(--typography-body, 0.875rem);
+  --checkbox-label-font-size-lg: var(--typography-h6, 0.875rem);
+  --checkbox-label-font-size-xl: var(--typography-h5, 1rem);
   --checkbox-label-spacing-xs: 0.5rem;
   --checkbox-label-spacing-sm: 0.625rem;
   --checkbox-label-spacing-md: 0.75rem;
@@ -3290,11 +3333,11 @@
   --radio-size-md: 1.5rem;
   --radio-size-lg: 1.75rem;
   --radio-size-xl: 2rem;
-  --radio-label-font-size-xs: 0.75rem;
-  --radio-label-font-size-sm: 0.875rem;
-  --radio-label-font-size-md: 1rem;
-  --radio-label-font-size-lg: 1.125rem;
-  --radio-label-font-size-xl: 1.25rem;
+  --radio-label-font-size-xs: var(--typography-caption, 0.6875rem);
+  --radio-label-font-size-sm: var(--typography-small, 0.75rem);
+  --radio-label-font-size-md: var(--typography-body, 0.875rem);
+  --radio-label-font-size-lg: var(--typography-h6, 0.875rem);
+  --radio-label-font-size-xl: var(--typography-h5, 1rem);
   --radio-label-spacing-xs: 0.5rem;
   --radio-label-spacing-sm: 0.625rem;
   --radio-label-spacing-md: 0.75rem;
@@ -3352,6 +3395,20 @@
   --dropdown-option-font-size-xl: 1.25rem;
   --star-size: 1.5rem;
 }
+@media (min-width: 1024px) {
+  :root {
+    --checkbox-label-font-size-xs: var(--typography-caption, 0.6875rem);
+    --checkbox-label-font-size-sm: var(--typography-small-desktop, 0.875rem);
+    --checkbox-label-font-size-md: var(--typography-body-desktop, 1rem);
+    --checkbox-label-font-size-lg: var(--typography-h6-desktop, 1rem);
+    --checkbox-label-font-size-xl: var(--typography-h5-desktop, 1.125rem);
+    --radio-label-font-size-xs: var(--typography-caption, 0.6875rem);
+    --radio-label-font-size-sm: var(--typography-small-desktop, 0.875rem);
+    --radio-label-font-size-md: var(--typography-body-desktop, 1rem);
+    --radio-label-font-size-lg: var(--typography-h6-desktop, 1rem);
+    --radio-label-font-size-xl: var(--typography-h5-desktop, 1.125rem);
+  }
+}
 @layer components {
   .button-ghost-hover:hover {
     background-color: var(--button-ghost-hover-bg) !important;
@@ -3365,6 +3422,59 @@
   .button-outline-hover:active {
     background-color: var(--button-outline-active-bg) !important;
   }
+  .text-h1 {
+    font-size: var(--typography-h1);
+  }
+  .text-h2 {
+    font-size: var(--typography-h2);
+  }
+  .text-h3 {
+    font-size: var(--typography-h3);
+  }
+  .text-h4 {
+    font-size: var(--typography-h4);
+  }
+  .text-h5 {
+    font-size: var(--typography-h5);
+  }
+  .text-h6 {
+    font-size: var(--typography-h6);
+  }
+  .text-body {
+    font-size: var(--typography-body);
+  }
+  .text-small {
+    font-size: var(--typography-small);
+  }
+  .text-caption {
+    font-size: var(--typography-caption);
+  }
+  @media (min-width: 1024px) {
+    .text-h1 {
+      font-size: var(--typography-h1-desktop);
+    }
+    .text-h2 {
+      font-size: var(--typography-h2-desktop);
+    }
+    .text-h3 {
+      font-size: var(--typography-h3-desktop);
+    }
+    .text-h4 {
+      font-size: var(--typography-h4-desktop);
+    }
+    .text-h5 {
+      font-size: var(--typography-h5-desktop);
+    }
+    .text-h6 {
+      font-size: var(--typography-h6-desktop);
+    }
+    .text-body {
+      font-size: var(--typography-body-desktop);
+    }
+    .text-small {
+      font-size: var(--typography-small-desktop);
+    }
+  }
 }
 @property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; }
 @property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; }