singularity-components 0.1.92 → 0.1.93

package/dist/main.css

@@ -1,4 +1,5 @@
 /* src/tailwind.css */
+@layer properties;
 :root {
   --sg-black: hsl(0 0% 15%);
   --sg-white: hsl(30 20% 98%);
@@ -74,12 +75,15 @@
     --sg-font-weight-medium: 500;
     --sg-font-weight-semibold: 600;
     --sg-font-weight-bold: 700;
+    --sg-font-weight-extrabold: 800;
     --sg-tracking-tight: -0.025em;
     --sg-leading-relaxed: 1.625;
     --sg-animate-spin: spin 1s linear infinite;
     --sg-animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
     --sg-default-transition-duration: 150ms;
     --sg-default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    --sg-default-font-family: Inter;
+    --sg-default-mono-font-family: "JetBrains Mono";
     --sg-color-black: var(--sg-black);
     --sg-color-white: var(--sg-white);
     --sg-color-background: var(--sg-color-background);
@@ -102,9 +106,9 @@
     line-height: 1.5;
     -webkit-text-size-adjust: 100%;
     tab-size: 4;
-    font-family: Inter;
-    font-feature-settings: initial;
-    font-variation-settings: initial;
+    font-family: var(--sg-default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
+    font-feature-settings: var(--sg-default-font-feature-settings, normal);
+    font-variation-settings: var(--sg-default-font-variation-settings, normal);
     -webkit-tap-highlight-color: transparent;
   }
   hr {
@@ -138,9 +142,9 @@
   kbd,
   samp,
   pre {
-    font-family: "JetBrains Mono";
-    font-feature-settings: initial;
-    font-variation-settings: initial;
+    font-family: var(--sg-default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
+    font-feature-settings: var(--sg-default-mono-font-feature-settings, normal);
+    font-variation-settings: var(--sg-default-mono-font-variation-settings, normal);
     font-size: 1em;
   }
   small {
@@ -223,7 +227,10 @@
   }
   @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
     ::placeholder {
-      color: color-mix(in oklab, currentColor 50%, transparent);
+      color: currentcolor;
+      @supports (color: color-mix(in lab, red, red)) {
+        color: color-mix(in oklab, currentcolor 50%, transparent);
+      }
     }
   }
   textarea {
@@ -253,6 +260,9 @@
   ::-webkit-datetime-edit-meridiem-field {
     padding-block: 0;
   }
+  ::-webkit-calendar-picker-indicator {
+    line-height: 1;
+  }
   :-moz-ui-invalid {
     box-shadow: none;
   }
@@ -530,7 +540,10 @@
     background-color: var(--sg-gray);
   }
   .sg\:bg-muted\/50 {
-    background-color: color-mix(in oklab, var(--muted) 50%, transparent);
+    background-color: var(--muted);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--muted) 50%, transparent);
+    }
   }
   .sg\:bg-orange {
     background-color: var(--sg-orange);
@@ -559,10 +572,23 @@
         var(--sg-primary),
         var(--sg-pink));
   }
+  .sg\:from-\[var\(--sg-gradient-1\)\] {
+    --tw-gradient-from: var(--sg-gradient-1);
+    --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));
+  }
   .sg\:from-blue {
     --tw-gradient-from: var(--sg-blue);
     --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));
   }
+  .sg\:via-\[var\(--sg-gradient-2\)\] {
+    --tw-gradient-via: var(--sg-gradient-2);
+    --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);
+  }
   .sg\:via-orange {
     --tw-gradient-via: var(--sg-orange);
     --tw-gradient-via-stops:
@@ -572,6 +598,10 @@
       var(--tw-gradient-to) var(--tw-gradient-to-position);
     --tw-gradient-stops: var(--tw-gradient-via-stops);
   }
+  .sg\:to-\[var\(--sg\:primary\)\] {
+    --tw-gradient-to: var(--sg:primary);
+    --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));
+  }
   .sg\:to-red {
     --tw-gradient-to: var(--sg-red);
     --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));
@@ -668,6 +698,10 @@
     --tw-font-weight: var(--sg-font-weight-bold);
     font-weight: var(--sg-font-weight-bold);
   }
+  .sg\:font-extrabold {
+    --tw-font-weight: var(--sg-font-weight-extrabold);
+    font-weight: var(--sg-font-weight-extrabold);
+  }
   .sg\:font-medium {
     --tw-font-weight: var(--sg-font-weight-medium);
     font-weight: var(--sg-font-weight-medium);
@@ -684,6 +718,9 @@
     --tw-tracking: var(--sg-tracking-tight);
     letter-spacing: var(--sg-tracking-tight);
   }
+  .sg\:text-balance {
+    text-wrap: balance;
+  }
   .sg\:whitespace-nowrap {
     white-space: nowrap;
   }
@@ -870,28 +907,40 @@
   .sg\:hover\:bg-destructive\/90 {
     &:hover {
       @media (hover: hover) {
-        background-color: color-mix(in oklab, var(--sg-red) 90%, transparent);
+        background-color: var(--sg-red);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--sg-red) 90%, transparent);
+        }
       }
     }
   }
   .sg\:hover\:bg-muted\/50 {
     &:hover {
       @media (hover: hover) {
-        background-color: color-mix(in oklab, var(--muted) 50%, transparent);
+        background-color: var(--muted);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--muted) 50%, transparent);
+        }
       }
     }
   }
   .sg\:hover\:bg-primary\/90 {
     &:hover {
       @media (hover: hover) {
-        background-color: color-mix(in oklab, var(--sg-primary) 90%, transparent);
+        background-color: var(--sg-primary);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--sg-primary) 90%, transparent);
+        }
       }
     }
   }
   .sg\:hover\:bg-secondary\/80 {
     &:hover {
       @media (hover: hover) {
-        background-color: color-mix(in oklab, var(--sg-secondary) 80%, transparent);
+        background-color: var(--sg-secondary);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--sg-secondary) 80%, transparent);
+        }
       }
     }
   }
@@ -916,7 +965,7 @@
   }
   .sg\:focus-visible\:ring-\[3px\] {
     &:focus-visible {
-      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
       box-shadow:
         var(--tw-inset-shadow),
         var(--tw-inset-ring-shadow),
@@ -927,12 +976,18 @@
   }
   .sg\:focus-visible\:ring-destructive\/20 {
     &:focus-visible {
-      --tw-ring-color: color-mix(in oklab, var(--sg-red) 20%, transparent);
+      --tw-ring-color: var(--sg-red);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--sg-red) 20%, transparent);
+      }
     }
   }
   .sg\:focus-visible\:ring-ring\/50 {
     &:focus-visible {
-      --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
+      --tw-ring-color: var(--ring);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
+      }
     }
   }
   .sg\:disabled\:pointer-events-none {
@@ -982,7 +1037,10 @@
   }
   .sg\:aria-invalid\:ring-destructive\/20 {
     &[aria-invalid=true] {
-      --tw-ring-color: color-mix(in oklab, var(--sg-red) 20%, transparent);
+      --tw-ring-color: var(--sg-red);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--sg-red) 20%, transparent);
+      }
     }
   }
   .sg\:data-\[orientation\=horizontal\]\:h-px {
@@ -1008,7 +1066,10 @@
   .sg\:\*\:data-\[slot\=alert-description\]\:text-destructive\/90 {
     :is(& > *) {
       &[data-slot=alert-description] {
-        color: color-mix(in oklab, var(--sg-red) 90%, transparent);
+        color: var(--sg-red);
+        @supports (color: color-mix(in lab, red, red)) {
+          color: color-mix(in oklab, var(--sg-red) 90%, transparent);
+        }
       }
     }
   }
@@ -1061,19 +1122,28 @@
   }
   .sg\:dark\:bg-destructive\/60 {
     &:is(.dark *) {
-      background-color: color-mix(in oklab, var(--sg-red) 60%, transparent);
+      background-color: var(--sg-red);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--sg-red) 60%, transparent);
+      }
     }
   }
   .sg\:dark\:bg-input\/30 {
     &:is(.dark *) {
-      background-color: color-mix(in oklab, var(--input) 30%, transparent);
+      background-color: var(--input);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--input) 30%, transparent);
+      }
     }
   }
   .sg\:dark\:hover\:bg-accent\/50 {
     &:is(.dark *) {
       &:hover {
         @media (hover: hover) {
-          background-color: color-mix(in oklab, var(--accent) 50%, transparent);
+          background-color: var(--accent);
+          @supports (color: color-mix(in lab, red, red)) {
+            background-color: color-mix(in oklab, var(--accent) 50%, transparent);
+          }
         }
       }
     }
@@ -1082,7 +1152,10 @@
     &:is(.dark *) {
       &:hover {
         @media (hover: hover) {
-          background-color: color-mix(in oklab, var(--input) 50%, transparent);
+          background-color: var(--input);
+          @supports (color: color-mix(in lab, red, red)) {
+            background-color: color-mix(in oklab, var(--input) 50%, transparent);
+          }
         }
       }
     }
@@ -1090,14 +1163,20 @@
   .sg\:dark\:focus-visible\:ring-destructive\/40 {
     &:is(.dark *) {
       &:focus-visible {
-        --tw-ring-color: color-mix(in oklab, var(--sg-red) 40%, transparent);
+        --tw-ring-color: var(--sg-red);
+        @supports (color: color-mix(in lab, red, red)) {
+          --tw-ring-color: color-mix(in oklab, var(--sg-red) 40%, transparent);
+        }
       }
     }
   }
   .sg\:dark\:aria-invalid\:ring-destructive\/40 {
     &:is(.dark *) {
       &[aria-invalid=true] {
-        --tw-ring-color: color-mix(in oklab, var(--sg-red) 40%, transparent);
+        --tw-ring-color: var(--sg-red);
+        @supports (color: color-mix(in lab, red, red)) {
+          --tw-ring-color: color-mix(in oklab, var(--sg-red) 40%, transparent);
+        }
       }
     }
   }
@@ -1171,7 +1250,7 @@
   }
   .sg\:\[\&\>svg\]\:text-current {
     & > svg {
-      color: currentColor;
+      color: currentcolor;
     }
   }
   .sg\:\[\&\>tr\]\:last\:border-b-0 {
@@ -1200,7 +1279,10 @@
     a& {
       &:hover {
         @media (hover: hover) {
-          background-color: color-mix(in oklab, var(--sg-red) 90%, transparent);
+          background-color: var(--sg-red);
+          @supports (color: color-mix(in lab, red, red)) {
+            background-color: color-mix(in oklab, var(--sg-red) 90%, transparent);
+          }
         }
       }
     }
@@ -1209,7 +1291,10 @@
     a& {
       &:hover {
         @media (hover: hover) {
-          background-color: color-mix(in oklab, var(--sg-primary) 90%, transparent);
+          background-color: var(--sg-primary);
+          @supports (color: color-mix(in lab, red, red)) {
+            background-color: color-mix(in oklab, var(--sg-primary) 90%, transparent);
+          }
         }
       }
     }
@@ -1218,7 +1303,10 @@
     a& {
       &:hover {
         @media (hover: hover) {
-          background-color: color-mix(in oklab, var(--sg-secondary) 90%, transparent);
+          background-color: var(--sg-secondary);
+          @supports (color: color-mix(in lab, red, red)) {
+            background-color: color-mix(in oklab, var(--sg-secondary) 90%, transparent);
+          }
         }
       }
     }
@@ -1236,6 +1324,8 @@
 :root {
   --sg-color-background: var(--sg-color-white);
   --sg-color-foreground: var(--sg-color-black);
+  --sg-gradient-1: var(--sg-pink);
+  --sg-gradient-2: var(--sg-primary);
   --card: oklch(1 0 0);
   --card-foreground: oklch(0.145 0 0);
   --popover: oklch(1 0 0);
@@ -1265,6 +1355,8 @@
 .dark {
   --sg-color-background: var(--sg-black);
   --sg-color-foreground: var(--sg-white);
+  --sg-gradient-1: var(--sg-pink);
+  --sg-gradient-2: var(--sg-primary-light);
   --card: oklch(0.145 0 0);
   --card-foreground: oklch(0.985 0 0);
   --popover: oklch(0.145 0 0);
@@ -1299,13 +1391,29 @@
 @layer base {
   * {
     border-color: var(--border);
-    outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
+    outline-color: var(--ring);
+    @supports (color: color-mix(in lab, red, red)) {
+      outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
+    }
   }
   body {
     background-color: var(--sg-color-background);
     color: var(--sg-color-foreground);
   }
 }
+@layer utilities {
+  .text-gradient-brand {
+    background-image:
+      linear-gradient(
+        90deg,
+        var(--sg-gradient-1) 0%,
+        var(--sg-gradient-2) 50%,
+        var(--sg-primary) 100%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+  }
+}
 @keyframes enter {
   from {
     opacity: var(--tw-enter-opacity, 1);
@@ -1335,8 +1443,10 @@
 @property --tw-tracking { syntax: "*"; inherits: false; }
 @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
 @property --tw-shadow-color { syntax: "*"; inherits: false; }
+@property --tw-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
 @property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
 @property --tw-inset-shadow-color { syntax: "*"; inherits: false; }
+@property --tw-inset-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
 @property --tw-ring-color { syntax: "*"; inherits: false; }
 @property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
 @property --tw-inset-ring-color { syntax: "*"; inherits: false; }
@@ -1357,6 +1467,46 @@
     opacity: 0.5;
   }
 }
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *,
+    ::before,
+    ::after,
+    ::backdrop {
+      --tw-translate-x: 0;
+      --tw-translate-y: 0;
+      --tw-translate-z: 0;
+      --tw-border-style: solid;
+      --tw-gradient-position: initial;
+      --tw-gradient-from: #0000;
+      --tw-gradient-via: #0000;
+      --tw-gradient-to: #0000;
+      --tw-gradient-stops: initial;
+      --tw-gradient-via-stops: initial;
+      --tw-gradient-from-position: 0%;
+      --tw-gradient-via-position: 50%;
+      --tw-gradient-to-position: 100%;
+      --tw-font-weight: initial;
+      --tw-tracking: initial;
+      --tw-shadow: 0 0 #0000;
+      --tw-shadow-color: initial;
+      --tw-shadow-alpha: 100%;
+      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow-color: initial;
+      --tw-inset-shadow-alpha: 100%;
+      --tw-ring-color: initial;
+      --tw-ring-shadow: 0 0 #0000;
+      --tw-inset-ring-color: initial;
+      --tw-inset-ring-shadow: 0 0 #0000;
+      --tw-ring-inset: initial;
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-duration: initial;
+      --tw-leading: initial;
+    }
+  }
+}
 
 /* src/css/variables.css */
 :root {
@@ -1405,5 +1555,5 @@
   --sg-spacing-36: 9rem;
   --sg-spacing-40: 10rem;
 }
-/*! tailwindcss v4.0.17 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */
 /*# sourceMappingURL=main.css.map */