@cjlapao/ui-kit-vue 0.2.6 → 0.2.8

package/dist/index.css

@@ -3977,6 +3977,12 @@
   .bg-cyan-500 {
     background-color: var(--color-cyan-500);
   }
+  .bg-cyan-500\/10 {
+    background-color: color-mix(in srgb, oklch(71.5% 0.143 215.221) 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-cyan-500) 10%, transparent);
+    }
+  }
   .bg-cyan-500\/15 {
     background-color: color-mix(in srgb, oklch(71.5% 0.143 215.221) 15%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -4628,6 +4634,12 @@
   .bg-gray-500 {
     background-color: var(--color-gray-500);
   }
+  .bg-gray-500\/10 {
+    background-color: color-mix(in srgb, oklch(55.1% 0.027 264.364) 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-gray-500) 10%, transparent);
+    }
+  }
   .bg-gray-500\/15 {
     background-color: color-mix(in srgb, oklch(55.1% 0.027 264.364) 15%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -4841,6 +4853,12 @@
   .bg-green-500 {
     background-color: var(--color-green-500);
   }
+  .bg-green-500\/10 {
+    background-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-green-500) 10%, transparent);
+    }
+  }
   .bg-green-500\/15 {
     background-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 15%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -5060,6 +5078,12 @@
   .bg-indigo-500 {
     background-color: var(--color-indigo-500);
   }
+  .bg-indigo-500\/10 {
+    background-color: color-mix(in srgb, oklch(58.5% 0.233 277.117) 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-indigo-500) 10%, transparent);
+    }
+  }
   .bg-indigo-500\/15 {
     background-color: color-mix(in srgb, oklch(58.5% 0.233 277.117) 15%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -5975,6 +5999,12 @@
   .bg-purple-500 {
     background-color: var(--color-purple-500);
   }
+  .bg-purple-500\/10 {
+    background-color: color-mix(in srgb, oklch(62.7% 0.265 303.9) 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-purple-500) 10%, transparent);
+    }
+  }
   .bg-purple-500\/15 {
     background-color: color-mix(in srgb, oklch(62.7% 0.265 303.9) 15%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -6188,6 +6218,12 @@
   .bg-red-500 {
     background-color: var(--color-red-500);
   }
+  .bg-red-500\/10 {
+    background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-red-500) 10%, transparent);
+    }
+  }
   .bg-red-500\/15 {
     background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 15%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -6851,6 +6887,12 @@
   .bg-slate-500 {
     background-color: var(--color-slate-500);
   }
+  .bg-slate-500\/10 {
+    background-color: color-mix(in srgb, oklch(55.4% 0.046 257.417) 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-slate-500) 10%, transparent);
+    }
+  }
   .bg-slate-500\/15 {
     background-color: color-mix(in srgb, oklch(55.4% 0.046 257.417) 15%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -7064,6 +7106,12 @@
   .bg-stone-500 {
     background-color: var(--color-stone-500);
   }
+  .bg-stone-500\/10 {
+    background-color: color-mix(in srgb, oklch(55.3% 0.013 58.071) 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-stone-500) 10%, transparent);
+    }
+  }
   .bg-stone-500\/15 {
     background-color: color-mix(in srgb, oklch(55.3% 0.013 58.071) 15%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -7277,6 +7325,12 @@
   .bg-teal-500 {
     background-color: var(--color-teal-500);
   }
+  .bg-teal-500\/10 {
+    background-color: color-mix(in srgb, oklch(70.4% 0.14 182.503) 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-teal-500) 10%, transparent);
+    }
+  }
   .bg-teal-500\/15 {
     background-color: color-mix(in srgb, oklch(70.4% 0.14 182.503) 15%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -7787,6 +7841,12 @@
   .bg-yellow-500 {
     background-color: var(--color-yellow-500);
   }
+  .bg-yellow-500\/10 {
+    background-color: color-mix(in srgb, oklch(79.5% 0.184 86.047) 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-yellow-500) 10%, transparent);
+    }
+  }
   .bg-yellow-500\/15 {
     background-color: color-mix(in srgb, oklch(79.5% 0.184 86.047) 15%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -8000,6 +8060,12 @@
   .bg-zinc-500 {
     background-color: var(--color-zinc-500);
   }
+  .bg-zinc-500\/10 {
+    background-color: color-mix(in srgb, oklch(55.2% 0.016 285.938) 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-zinc-500) 10%, transparent);
+    }
+  }
   .bg-zinc-500\/15 {
     background-color: color-mix(in srgb, oklch(55.2% 0.016 285.938) 15%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -8763,9 +8829,18 @@
     }
     --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 {
+    background-size: cover;
+  }
   .bg-clip-text {
     background-clip: text;
   }
+  .bg-center {
+    background-position: center;
+  }
+  .bg-no-repeat {
+    background-repeat: no-repeat;
+  }
   .fill-amber-50 {
     fill: var(--color-amber-50);
   }
@@ -9084,6 +9159,9 @@
       fill: color-mix(in oklab, var(--color-neutral-50) 80%, transparent);
     }
   }
+  .fill-neutral-100 {
+    fill: var(--color-neutral-100);
+  }
   .fill-neutral-100\/80 {
     fill: color-mix(in srgb, oklch(97% 0 0) 80%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -9096,6 +9174,9 @@
   .fill-neutral-500 {
     fill: var(--color-neutral-500);
   }
+  .fill-neutral-700 {
+    fill: var(--color-neutral-700);
+  }
   .fill-orange-50 {
     fill: var(--color-orange-50);
   }
@@ -11268,6 +11349,12 @@
   .ring-amber-300 {
     --tw-ring-color: var(--color-amber-300);
   }
+  .ring-amber-300\/50 {
+    --tw-ring-color: color-mix(in srgb, oklch(87.9% 0.169 91.605) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-amber-300) 50%, transparent);
+    }
+  }
   .ring-amber-400\/50 {
     --tw-ring-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -11280,6 +11367,9 @@
       --tw-ring-color: color-mix(in oklab, var(--color-amber-400) 60%, transparent);
     }
   }
+  .ring-amber-500 {
+    --tw-ring-color: var(--color-amber-500);
+  }
   .ring-amber-500\/20 {
     --tw-ring-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -11304,6 +11394,12 @@
   .ring-blue-300 {
     --tw-ring-color: var(--color-blue-300);
   }
+  .ring-blue-300\/50 {
+    --tw-ring-color: color-mix(in srgb, oklch(80.9% 0.105 251.813) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-blue-300) 50%, transparent);
+    }
+  }
   .ring-blue-400\/50 {
     --tw-ring-color: color-mix(in srgb, oklch(70.7% 0.165 254.624) 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -11316,6 +11412,9 @@
       --tw-ring-color: color-mix(in oklab, var(--color-blue-400) 60%, transparent);
     }
   }
+  .ring-blue-500 {
+    --tw-ring-color: var(--color-blue-500);
+  }
   .ring-blue-500\/20 {
     --tw-ring-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -11334,6 +11433,12 @@
   .ring-cyan-300 {
     --tw-ring-color: var(--color-cyan-300);
   }
+  .ring-cyan-300\/50 {
+    --tw-ring-color: color-mix(in srgb, oklch(86.5% 0.127 207.078) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-cyan-300) 50%, transparent);
+    }
+  }
   .ring-cyan-400\/50 {
     --tw-ring-color: color-mix(in srgb, oklch(78.9% 0.154 211.53) 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -11346,6 +11451,9 @@
       --tw-ring-color: color-mix(in oklab, var(--color-cyan-400) 60%, transparent);
     }
   }
+  .ring-cyan-500 {
+    --tw-ring-color: var(--color-cyan-500);
+  }
   .ring-cyan-500\/20 {
     --tw-ring-color: color-mix(in srgb, oklch(71.5% 0.143 215.221) 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -11358,6 +11466,12 @@
   .ring-emerald-300 {
     --tw-ring-color: var(--color-emerald-300);
   }
+  .ring-emerald-300\/50 {
+    --tw-ring-color: color-mix(in srgb, oklch(84.5% 0.143 164.978) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-emerald-300) 50%, transparent);
+    }
+  }
   .ring-emerald-400\/50 {
     --tw-ring-color: color-mix(in srgb, oklch(76.5% 0.177 163.223) 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -11370,6 +11484,9 @@
       --tw-ring-color: color-mix(in oklab, var(--color-emerald-400) 60%, transparent);
     }
   }
+  .ring-emerald-500 {
+    --tw-ring-color: var(--color-emerald-500);
+  }
   .ring-emerald-500\/20 {
     --tw-ring-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -11382,6 +11499,12 @@
   .ring-fuchsia-300 {
     --tw-ring-color: var(--color-fuchsia-300);
   }
+  .ring-fuchsia-300\/50 {
+    --tw-ring-color: color-mix(in srgb, oklch(83.3% 0.145 321.434) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-fuchsia-300) 50%, transparent);
+    }
+  }
   .ring-fuchsia-400\/50 {
     --tw-ring-color: color-mix(in srgb, oklch(74% 0.238 322.16) 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -11394,6 +11517,9 @@
       --tw-ring-color: color-mix(in oklab, var(--color-fuchsia-400) 60%, transparent);
     }
   }
+  .ring-fuchsia-500 {
+    --tw-ring-color: var(--color-fuchsia-500);
+  }
   .ring-fuchsia-500\/20 {
     --tw-ring-color: color-mix(in srgb, oklch(66.7% 0.295 322.15) 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -11406,6 +11532,12 @@
   .ring-gray-300 {
     --tw-ring-color: var(--color-gray-300);
   }
+  .ring-gray-300\/50 {
+    --tw-ring-color: color-mix(in srgb, oklch(87.2% 0.01 258.338) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-gray-300) 50%, transparent);
+    }
+  }
   .ring-gray-400\/50 {
     --tw-ring-color: color-mix(in srgb, oklch(70.7% 0.022 261.325) 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -11418,6 +11550,9 @@
       --tw-ring-color: color-mix(in oklab, var(--color-gray-400) 60%, transparent);
     }
   }
+  .ring-gray-500 {
+    --tw-ring-color: var(--color-gray-500);
+  }
   .ring-gray-500\/20 {
     --tw-ring-color: color-mix(in srgb, oklch(55.1% 0.027 264.364) 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -11430,6 +11565,12 @@
   .ring-green-300 {
     --tw-ring-color: var(--color-green-300);
   }
+  .ring-green-300\/50 {
+    --tw-ring-color: color-mix(in srgb, oklch(87.1% 0.15 154.449) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-green-300) 50%, transparent);
+    }
+  }
   .ring-green-400\/50 {
     --tw-ring-color: color-mix(in srgb, oklch(79.2% 0.209 151.711) 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -11442,6 +11583,9 @@
       --tw-ring-color: color-mix(in oklab, var(--color-green-400) 60%, transparent);
     }
   }
+  .ring-green-500 {
+    --tw-ring-color: var(--color-green-500);
+  }
   .ring-green-500\/20 {
     --tw-ring-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -11454,6 +11598,12 @@
   .ring-indigo-300 {
     --tw-ring-color: var(--color-indigo-300);
   }
+  .ring-indigo-300\/50 {
+    --tw-ring-color: color-mix(in srgb, oklch(78.5% 0.115 274.713) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-indigo-300) 50%, transparent);
+    }
+  }
   .ring-indigo-400\/50 {
     --tw-ring-color: color-mix(in srgb, oklch(67.3% 0.182 276.935) 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -11466,6 +11616,9 @@
       --tw-ring-color: color-mix(in oklab, var(--color-indigo-400) 60%, transparent);
     }
   }
+  .ring-indigo-500 {
+    --tw-ring-color: var(--color-indigo-500);
+  }
   .ring-indigo-500\/20 {
     --tw-ring-color: color-mix(in srgb, oklch(58.5% 0.233 277.117) 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -11478,6 +11631,12 @@
   .ring-lime-300 {
     --tw-ring-color: var(--color-lime-300);
   }
+  .ring-lime-300\/50 {
+    --tw-ring-color: color-mix(in srgb, oklch(89.7% 0.196 126.665) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-lime-300) 50%, transparent);
+    }
+  }
   .ring-lime-400\/50 {
     --tw-ring-color: color-mix(in srgb, oklch(84.1% 0.238 128.85) 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -11490,6 +11649,9 @@
       --tw-ring-color: color-mix(in oklab, var(--color-lime-400) 60%, transparent);
     }
   }
+  .ring-lime-500 {
+    --tw-ring-color: var(--color-lime-500);
+  }
   .ring-lime-500\/20 {
     --tw-ring-color: color-mix(in srgb, oklch(76.8% 0.233 130.85) 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -11502,6 +11664,12 @@
   .ring-neutral-300 {
     --tw-ring-color: var(--color-neutral-300);
   }
+  .ring-neutral-300\/50 {
+    --tw-ring-color: color-mix(in srgb, oklch(87% 0 0) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-neutral-300) 50%, transparent);
+    }
+  }
   .ring-neutral-400\/50 {
     --tw-ring-color: color-mix(in srgb, oklch(70.8% 0 0) 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -11514,6 +11682,9 @@
       --tw-ring-color: color-mix(in oklab, var(--color-neutral-400) 60%, transparent);
     }
   }
+  .ring-neutral-500 {
+    --tw-ring-color: var(--color-neutral-500);
+  }
   .ring-neutral-500\/20 {
     --tw-ring-color: color-mix(in srgb, oklch(55.6% 0 0) 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -11526,6 +11697,12 @@
   .ring-orange-300 {
     --tw-ring-color: var(--color-orange-300);
   }
+  .ring-orange-300\/50 {
+    --tw-ring-color: color-mix(in srgb, oklch(83.7% 0.128 66.29) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-orange-300) 50%, transparent);
+    }
+  }
   .ring-orange-400\/50 {
     --tw-ring-color: color-mix(in srgb, oklch(75% 0.183 55.934) 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -11538,6 +11715,9 @@
       --tw-ring-color: color-mix(in oklab, var(--color-orange-400) 60%, transparent);
     }
   }
+  .ring-orange-500 {
+    --tw-ring-color: var(--color-orange-500);
+  }
   .ring-orange-500\/20 {
     --tw-ring-color: color-mix(in srgb, oklch(70.5% 0.213 47.604) 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -11550,6 +11730,12 @@
   .ring-purple-300 {
     --tw-ring-color: var(--color-purple-300);
   }
+  .ring-purple-300\/50 {
+    --tw-ring-color: color-mix(in srgb, oklch(82.7% 0.119 306.383) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-purple-300) 50%, transparent);
+    }
+  }
   .ring-purple-400\/50 {
     --tw-ring-color: color-mix(in srgb, oklch(71.4% 0.203 305.504) 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -11562,6 +11748,9 @@
       --tw-ring-color: color-mix(in oklab, var(--color-purple-400) 60%, transparent);
     }
   }
+  .ring-purple-500 {
+    --tw-ring-color: var(--color-purple-500);
+  }
   .ring-purple-500\/20 {
     --tw-ring-color: color-mix(in srgb, oklch(62.7% 0.265 303.9) 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -11574,6 +11763,12 @@
   .ring-red-300 {
     --tw-ring-color: var(--color-red-300);
   }
+  .ring-red-300\/50 {
+    --tw-ring-color: color-mix(in srgb, oklch(80.8% 0.114 19.571) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-red-300) 50%, transparent);
+    }
+  }
   .ring-red-400\/50 {
     --tw-ring-color: color-mix(in srgb, oklch(70.4% 0.191 22.216) 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -11586,6 +11781,9 @@
       --tw-ring-color: color-mix(in oklab, var(--color-red-400) 60%, transparent);
     }
   }
+  .ring-red-500 {
+    --tw-ring-color: var(--color-red-500);
+  }
   .ring-red-500\/20 {
     --tw-ring-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -11598,6 +11796,12 @@
   .ring-rose-300 {
     --tw-ring-color: var(--color-rose-300);
   }
+  .ring-rose-300\/50 {
+    --tw-ring-color: color-mix(in srgb, oklch(81% 0.117 11.638) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-rose-300) 50%, transparent);
+    }
+  }
   .ring-rose-400\/50 {
     --tw-ring-color: color-mix(in srgb, oklch(71.2% 0.194 13.428) 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -11610,6 +11814,9 @@
       --tw-ring-color: color-mix(in oklab, var(--color-rose-400) 60%, transparent);
     }
   }
+  .ring-rose-500 {
+    --tw-ring-color: var(--color-rose-500);
+  }
   .ring-rose-500\/20 {
     --tw-ring-color: color-mix(in srgb, oklch(64.5% 0.246 16.439) 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -11622,6 +11829,12 @@
   .ring-sky-300 {
     --tw-ring-color: var(--color-sky-300);
   }
+  .ring-sky-300\/50 {
+    --tw-ring-color: color-mix(in srgb, oklch(82.8% 0.111 230.318) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-sky-300) 50%, transparent);
+    }
+  }
   .ring-sky-400\/50 {
     --tw-ring-color: color-mix(in srgb, oklch(74.6% 0.16 232.661) 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -11634,6 +11847,9 @@
       --tw-ring-color: color-mix(in oklab, var(--color-sky-400) 60%, transparent);
     }
   }
+  .ring-sky-500 {
+    --tw-ring-color: var(--color-sky-500);
+  }
   .ring-sky-500\/20 {
     --tw-ring-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -11646,6 +11862,12 @@
   .ring-slate-300 {
     --tw-ring-color: var(--color-slate-300);
   }
+  .ring-slate-300\/50 {
+    --tw-ring-color: color-mix(in srgb, oklch(86.9% 0.022 252.894) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-slate-300) 50%, transparent);
+    }
+  }
   .ring-slate-400\/50 {
     --tw-ring-color: color-mix(in srgb, oklch(70.4% 0.04 256.788) 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -11658,6 +11880,9 @@
       --tw-ring-color: color-mix(in oklab, var(--color-slate-400) 60%, transparent);
     }
   }
+  .ring-slate-500 {
+    --tw-ring-color: var(--color-slate-500);
+  }
   .ring-slate-500\/20 {
     --tw-ring-color: color-mix(in srgb, oklch(55.4% 0.046 257.417) 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -11670,6 +11895,12 @@
   .ring-stone-300 {
     --tw-ring-color: var(--color-stone-300);
   }
+  .ring-stone-300\/50 {
+    --tw-ring-color: color-mix(in srgb, oklch(86.9% 0.005 56.366) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-stone-300) 50%, transparent);
+    }
+  }
   .ring-stone-400\/50 {
     --tw-ring-color: color-mix(in srgb, oklch(70.9% 0.01 56.259) 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -11682,6 +11913,9 @@
       --tw-ring-color: color-mix(in oklab, var(--color-stone-400) 60%, transparent);
     }
   }
+  .ring-stone-500 {
+    --tw-ring-color: var(--color-stone-500);
+  }
   .ring-stone-500\/20 {
     --tw-ring-color: color-mix(in srgb, oklch(55.3% 0.013 58.071) 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -11694,6 +11928,12 @@
   .ring-teal-300 {
     --tw-ring-color: var(--color-teal-300);
   }
+  .ring-teal-300\/50 {
+    --tw-ring-color: color-mix(in srgb, oklch(85.5% 0.138 181.071) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-teal-300) 50%, transparent);
+    }
+  }
   .ring-teal-400\/50 {
     --tw-ring-color: color-mix(in srgb, oklch(77.7% 0.152 181.912) 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -11706,6 +11946,9 @@
       --tw-ring-color: color-mix(in oklab, var(--color-teal-400) 60%, transparent);
     }
   }
+  .ring-teal-500 {
+    --tw-ring-color: var(--color-teal-500);
+  }
   .ring-teal-500\/20 {
     --tw-ring-color: color-mix(in srgb, oklch(70.4% 0.14 182.503) 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -11721,6 +11964,12 @@
   .ring-violet-300 {
     --tw-ring-color: var(--color-violet-300);
   }
+  .ring-violet-300\/50 {
+    --tw-ring-color: color-mix(in srgb, oklch(81.1% 0.111 293.571) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-violet-300) 50%, transparent);
+    }
+  }
   .ring-violet-400\/50 {
     --tw-ring-color: color-mix(in srgb, oklch(70.2% 0.183 293.541) 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -11733,6 +11982,9 @@
       --tw-ring-color: color-mix(in oklab, var(--color-violet-400) 60%, transparent);
     }
   }
+  .ring-violet-500 {
+    --tw-ring-color: var(--color-violet-500);
+  }
   .ring-violet-500\/20 {
     --tw-ring-color: color-mix(in srgb, oklch(60.6% 0.25 292.717) 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -11754,6 +12006,12 @@
   .ring-yellow-300 {
     --tw-ring-color: var(--color-yellow-300);
   }
+  .ring-yellow-300\/50 {
+    --tw-ring-color: color-mix(in srgb, oklch(90.5% 0.182 98.111) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-yellow-300) 50%, transparent);
+    }
+  }
   .ring-yellow-400\/50 {
     --tw-ring-color: color-mix(in srgb, oklch(85.2% 0.199 91.936) 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -11766,6 +12024,9 @@
       --tw-ring-color: color-mix(in oklab, var(--color-yellow-400) 60%, transparent);
     }
   }
+  .ring-yellow-500 {
+    --tw-ring-color: var(--color-yellow-500);
+  }
   .ring-yellow-500\/20 {
     --tw-ring-color: color-mix(in srgb, oklch(79.5% 0.184 86.047) 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -11778,6 +12039,12 @@
   .ring-zinc-300 {
     --tw-ring-color: var(--color-zinc-300);
   }
+  .ring-zinc-300\/50 {
+    --tw-ring-color: color-mix(in srgb, oklch(87.1% 0.006 286.286) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-zinc-300) 50%, transparent);
+    }
+  }
   .ring-zinc-400\/50 {
     --tw-ring-color: color-mix(in srgb, oklch(70.5% 0.015 286.067) 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -11790,6 +12057,9 @@
       --tw-ring-color: color-mix(in oklab, var(--color-zinc-400) 60%, transparent);
     }
   }
+  .ring-zinc-500 {
+    --tw-ring-color: var(--color-zinc-500);
+  }
   .ring-zinc-500\/20 {
     --tw-ring-color: color-mix(in srgb, oklch(55.2% 0.016 285.938) 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -12054,6 +12324,10 @@
     --tw-drop-shadow: drop-shadow(var(--drop-shadow-sm));
     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,);
   }
+  .invert {
+    --tw-invert: invert(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,);
   }
@@ -31447,6 +31721,11 @@
       }
     }
   }
+  .dark\:fill-neutral-200 {
+    &:where(.dark, .dark *) {
+      fill: var(--color-neutral-200);
+    }
+  }
   .dark\:fill-neutral-400 {
     &:where(.dark, .dark *) {
       fill: var(--color-neutral-400);
@@ -31473,6 +31752,11 @@
       }
     }
   }
+  .dark\:fill-neutral-800 {
+    &:where(.dark, .dark *) {
+      fill: var(--color-neutral-800);
+    }
+  }
   .dark\:fill-neutral-900 {
     &:where(.dark, .dark *) {
       fill: var(--color-neutral-900);
@@ -34270,6 +34554,14 @@
       }
     }
   }
+  .dark\:ring-amber-400\/30 {
+    &:where(.dark, .dark *) {
+      --tw-ring-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-amber-400) 30%, transparent);
+      }
+    }
+  }
   .dark\:ring-amber-400\/50 {
     &:where(.dark, .dark *) {
       --tw-ring-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 50%, transparent);
@@ -34278,6 +34570,14 @@
       }
     }
   }
+  .dark\:ring-amber-500\/30 {
+    &:where(.dark, .dark *) {
+      --tw-ring-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-amber-500) 30%, transparent);
+      }
+    }
+  }
   .dark\:ring-amber-500\/40 {
     &:where(.dark, .dark *) {
       --tw-ring-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 40%, transparent);
@@ -34302,6 +34602,14 @@
       }
     }
   }
+  .dark\:ring-blue-400\/30 {
+    &:where(.dark, .dark *) {
+      --tw-ring-color: color-mix(in srgb, oklch(70.7% 0.165 254.624) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-blue-400) 30%, transparent);
+      }
+    }
+  }
   .dark\:ring-blue-400\/50 {
     &:where(.dark, .dark *) {
       --tw-ring-color: color-mix(in srgb, oklch(70.7% 0.165 254.624) 50%, transparent);
@@ -34310,6 +34618,14 @@
       }
     }
   }
+  .dark\:ring-blue-500\/30 {
+    &:where(.dark, .dark *) {
+      --tw-ring-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-blue-500) 30%, transparent);
+      }
+    }
+  }
   .dark\:ring-blue-500\/40 {
     &:where(.dark, .dark *) {
       --tw-ring-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 40%, transparent);
@@ -34318,6 +34634,14 @@
       }
     }
   }
+  .dark\:ring-cyan-400\/30 {
+    &:where(.dark, .dark *) {
+      --tw-ring-color: color-mix(in srgb, oklch(78.9% 0.154 211.53) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-cyan-400) 30%, transparent);
+      }
+    }
+  }
   .dark\:ring-cyan-400\/50 {
     &:where(.dark, .dark *) {
       --tw-ring-color: color-mix(in srgb, oklch(78.9% 0.154 211.53) 50%, transparent);
@@ -34326,6 +34650,14 @@
       }
     }
   }
+  .dark\:ring-cyan-500\/30 {
+    &:where(.dark, .dark *) {
+      --tw-ring-color: color-mix(in srgb, oklch(71.5% 0.143 215.221) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-cyan-500) 30%, transparent);
+      }
+    }
+  }
   .dark\:ring-cyan-500\/40 {
     &:where(.dark, .dark *) {
       --tw-ring-color: color-mix(in srgb, oklch(71.5% 0.143 215.221) 40%, transparent);
@@ -34334,6 +34666,14 @@
       }
     }
   }
+  .dark\:ring-emerald-400\/30 {
+    &:where(.dark, .dark *) {
+      --tw-ring-color: color-mix(in srgb, oklch(76.5% 0.177 163.223) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-emerald-400) 30%, transparent);
+      }
+    }
+  }
   .dark\:ring-emerald-400\/50 {
     &:where(.dark, .dark *) {
       --tw-ring-color: color-mix(in srgb, oklch(76.5% 0.177 163.223) 50%, transparent);
@@ -34342,6 +34682,14 @@
       }
     }
   }
+  .dark\:ring-emerald-500\/30 {
+    &:where(.dark, .dark *) {
+      --tw-ring-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-emerald-500) 30%, transparent);
+      }
+    }
+  }
   .dark\:ring-emerald-500\/40 {
     &:where(.dark, .dark *) {
       --tw-ring-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 40%, transparent);
@@ -34350,6 +34698,14 @@
       }
     }
   }
+  .dark\:ring-fuchsia-400\/30 {
+    &:where(.dark, .dark *) {
+      --tw-ring-color: color-mix(in srgb, oklch(74% 0.238 322.16) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-fuchsia-400) 30%, transparent);
+      }
+    }
+  }
   .dark\:ring-fuchsia-400\/50 {
     &:where(.dark, .dark *) {
       --tw-ring-color: color-mix(in srgb, oklch(74% 0.238 322.16) 50%, transparent);
@@ -34358,6 +34714,14 @@
       }
     }
   }
+  .dark\:ring-fuchsia-500\/30 {
+    &:where(.dark, .dark *) {
+      --tw-ring-color: color-mix(in srgb, oklch(66.7% 0.295 322.15) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-fuchsia-500) 30%, transparent);
+      }
+    }
+  }
   .dark\:ring-fuchsia-500\/40 {
     &:where(.dark, .dark *) {
       --tw-ring-color: color-mix(in srgb, oklch(66.7% 0.295 322.15) 40%, transparent);
@@ -34366,6 +34730,14 @@
       }
     }
   }
+  .dark\:ring-gray-400\/30 {
+    &:where(.dark, .dark *) {
+      --tw-ring-color: color-mix(in srgb, oklch(70.7% 0.022 261.325) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-gray-400) 30%, transparent);
+      }
+    }
+  }
   .dark\:ring-gray-400\/50 {
     &:where(.dark, .dark *) {
       --tw-ring-color: color-mix(in srgb, oklch(70.7% 0.022 261.325) 50%, transparent);
@@ -34374,6 +34746,14 @@
       }
     }
   }
+  .dark\:ring-gray-500\/30 {
+    &:where(.dark, .dark *) {
+      --tw-ring-color: color-mix(in srgb, oklch(55.1% 0.027 264.364) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-gray-500) 30%, transparent);
+      }
+    }
+  }
   .dark\:ring-gray-500\/40 {
     &:where(.dark, .dark *) {
       --tw-ring-color: color-mix(in srgb, oklch(55.1% 0.027 264.364) 40%, transparent);
@@ -34382,6 +34762,14 @@
       }
     }
   }
+  .dark\:ring-green-400\/30 {
+    &:where(.dark, .dark *) {
+      --tw-ring-color: color-mix(in srgb, oklch(79.2% 0.209 151.711) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-green-400) 30%, transparent);
+      }
+    }
+  }
   .dark\:ring-green-400\/50 {
     &:where(.dark, .dark *) {
       --tw-ring-color: color-mix(in srgb, oklch(79.2% 0.209 151.711) 50%, transparent);
@@ -34390,6 +34778,14 @@
       }
     }
   }
+  .dark\:ring-green-500\/30 {
+    &:where(.dark, .dark *) {
+      --tw-ring-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-green-500) 30%, transparent);
+      }
+    }
+  }
   .dark\:ring-green-500\/40 {
     &:where(.dark, .dark *) {
       --tw-ring-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 40%, transparent);
@@ -34398,6 +34794,14 @@
       }
     }
   }
+  .dark\:ring-indigo-400\/30 {
+    &:where(.dark, .dark *) {
+      --tw-ring-color: color-mix(in srgb, oklch(67.3% 0.182 276.935) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-indigo-400) 30%, transparent);
+      }
+    }
+  }
   .dark\:ring-indigo-400\/50 {
     &:where(.dark, .dark *) {
       --tw-ring-color: color-mix(in srgb, oklch(67.3% 0.182 276.935) 50%, transparent);
@@ -34406,6 +34810,14 @@
       }
     }
   }
+  .dark\:ring-indigo-500\/30 {
+    &:where(.dark, .dark *) {
+      --tw-ring-color: color-mix(in srgb, oklch(58.5% 0.233 277.117) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-indigo-500) 30%, transparent);
+      }
+    }
+  }
   .dark\:ring-indigo-500\/40 {
     &:where(.dark, .dark *) {
       --tw-ring-color: color-mix(in srgb, oklch(58.5% 0.233 277.117) 40%, transparent);
@@ -34414,6 +34826,14 @@
       }
     }
   }
+  .dark\:ring-lime-400\/30 {
+    &:where(.dark, .dark *) {
+      --tw-ring-color: color-mix(in srgb, oklch(84.1% 0.238 128.85) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-lime-400) 30%, transparent);
+      }
+    }
+  }
   .dark\:ring-lime-400\/50 {
     &:where(.dark, .dark *) {
       --tw-ring-color: color-mix(in srgb, oklch(84.1% 0.238 128.85) 50%, transparent);
@@ -34422,6 +34842,14 @@
       }
     }
   }
+  .dark\:ring-lime-500\/30 {
+    &:where(.dark, .dark *) {
+      --tw-ring-color: color-mix(in srgb, oklch(76.8% 0.233 130.85) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-lime-500) 30%, transparent);
+      }
+    }
+  }
   .dark\:ring-lime-500\/40 {
     &:where(.dark, .dark *) {
       --tw-ring-color: color-mix(in srgb, oklch(76.8% 0.233 130.85) 40%, transparent);
@@ -34430,6 +34858,14 @@
       }
     }
   }
+  .dark\:ring-neutral-400\/30 {
+    &:where(.dark, .dark *) {
+      --tw-ring-color: color-mix(in srgb, oklch(70.8% 0 0) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-neutral-400) 30%, transparent);
+      }
+    }
+  }
   .dark\:ring-neutral-400\/50 {
     &:where(.dark, .dark *) {
       --tw-ring-color: color-mix(in srgb, oklch(70.8% 0 0) 50%, transparent);
@@ -34438,6 +34874,14 @@
       }
     }
   }
+  .dark\:ring-neutral-500\/30 {
+    &:where(.dark, .dark *) {
+      --tw-ring-color: color-mix(in srgb, oklch(55.6% 0 0) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-neutral-500) 30%, transparent);
+      }
+    }
+  }
   .dark\:ring-neutral-500\/40 {
     &:where(.dark, .dark *) {
       --tw-ring-color: color-mix(in srgb, oklch(55.6% 0 0) 40%, transparent);
@@ -34451,6 +34895,14 @@
       --tw-ring-color: var(--color-neutral-900);
     }
   }
+  .dark\:ring-orange-400\/30 {
+    &:where(.dark, .dark *) {
+      --tw-ring-color: color-mix(in srgb, oklch(75% 0.183 55.934) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-orange-400) 30%, transparent);
+      }
+    }
+  }
   .dark\:ring-orange-400\/50 {
     &:where(.dark, .dark *) {
       --tw-ring-color: color-mix(in srgb, oklch(75% 0.183 55.934) 50%, transparent);
@@ -34459,6 +34911,14 @@
       }
     }
   }
+  .dark\:ring-orange-500\/30 {
+    &:where(.dark, .dark *) {
+      --tw-ring-color: color-mix(in srgb, oklch(70.5% 0.213 47.604) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-orange-500) 30%, transparent);
+      }
+    }
+  }
   .dark\:ring-orange-500\/40 {
     &:where(.dark, .dark *) {
       --tw-ring-color: color-mix(in srgb, oklch(70.5% 0.213 47.604) 40%, transparent);
@@ -34467,6 +34927,14 @@
       }
     }
   }
+  .dark\:ring-purple-400\/30 {
+    &:where(.dark, .dark *) {
+      --tw-ring-color: color-mix(in srgb, oklch(71.4% 0.203 305.504) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-purple-400) 30%, transparent);
+      }
+    }
+  }
   .dark\:ring-purple-400\/50 {
     &:where(.dark, .dark *) {
       --tw-ring-color: color-mix(in srgb, oklch(71.4% 0.203 305.504) 50%, transparent);
@@ -34475,6 +34943,14 @@
       }
     }
   }
+  .dark\:ring-purple-500\/30 {
+    &:where(.dark, .dark *) {
+      --tw-ring-color: color-mix(in srgb, oklch(62.7% 0.265 303.9) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-purple-500) 30%, transparent);
+      }
+    }
+  }
   .dark\:ring-purple-500\/40 {
     &:where(.dark, .dark *) {
       --tw-ring-color: color-mix(in srgb, oklch(62.7% 0.265 303.9) 40%, transparent);
@@ -34483,6 +34959,14 @@
       }
     }
   }
+  .dark\:ring-red-400\/30 {
+    &:where(.dark, .dark *) {
+      --tw-ring-color: color-mix(in srgb, oklch(70.4% 0.191 22.216) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-red-400) 30%, transparent);
+      }
+    }
+  }
   .dark\:ring-red-400\/50 {
     &:where(.dark, .dark *) {
       --tw-ring-color: color-mix(in srgb, oklch(70.4% 0.191 22.216) 50%, transparent);
@@ -34491,6 +34975,14 @@
       }
     }
   }
+  .dark\:ring-red-500\/30 {
+    &:where(.dark, .dark *) {
+      --tw-ring-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-red-500) 30%, transparent);
+      }
+    }
+  }
   .dark\:ring-red-500\/40 {
     &:where(.dark, .dark *) {
       --tw-ring-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 40%, transparent);
@@ -34504,6 +34996,14 @@
       --tw-ring-color: var(--color-red-900);
     }
   }
+  .dark\:ring-rose-400\/30 {
+    &:where(.dark, .dark *) {
+      --tw-ring-color: color-mix(in srgb, oklch(71.2% 0.194 13.428) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-rose-400) 30%, transparent);
+      }
+    }
+  }
   .dark\:ring-rose-400\/50 {
     &:where(.dark, .dark *) {
       --tw-ring-color: color-mix(in srgb, oklch(71.2% 0.194 13.428) 50%, transparent);
@@ -34512,6 +35012,14 @@
       }
     }
   }
+  .dark\:ring-rose-500\/30 {
+    &:where(.dark, .dark *) {
+      --tw-ring-color: color-mix(in srgb, oklch(64.5% 0.246 16.439) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-rose-500) 30%, transparent);
+      }
+    }
+  }
   .dark\:ring-rose-500\/40 {
     &:where(.dark, .dark *) {
       --tw-ring-color: color-mix(in srgb, oklch(64.5% 0.246 16.439) 40%, transparent);
@@ -34520,6 +35028,14 @@
       }
     }
   }
+  .dark\:ring-sky-400\/30 {
+    &:where(.dark, .dark *) {
+      --tw-ring-color: color-mix(in srgb, oklch(74.6% 0.16 232.661) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-sky-400) 30%, transparent);
+      }
+    }
+  }
   .dark\:ring-sky-400\/50 {
     &:where(.dark, .dark *) {
       --tw-ring-color: color-mix(in srgb, oklch(74.6% 0.16 232.661) 50%, transparent);
@@ -34533,6 +35049,14 @@
       --tw-ring-color: var(--color-sky-500);
     }
   }
+  .dark\:ring-sky-500\/30 {
+    &:where(.dark, .dark *) {
+      --tw-ring-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-sky-500) 30%, transparent);
+      }
+    }
+  }
   .dark\:ring-sky-500\/40 {
     &:where(.dark, .dark *) {
       --tw-ring-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 40%, transparent);
@@ -34541,6 +35065,14 @@
       }
     }
   }
+  .dark\:ring-slate-400\/30 {
+    &:where(.dark, .dark *) {
+      --tw-ring-color: color-mix(in srgb, oklch(70.4% 0.04 256.788) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-slate-400) 30%, transparent);
+      }
+    }
+  }
   .dark\:ring-slate-400\/50 {
     &:where(.dark, .dark *) {
       --tw-ring-color: color-mix(in srgb, oklch(70.4% 0.04 256.788) 50%, transparent);
@@ -34549,6 +35081,14 @@
       }
     }
   }
+  .dark\:ring-slate-500\/30 {
+    &:where(.dark, .dark *) {
+      --tw-ring-color: color-mix(in srgb, oklch(55.4% 0.046 257.417) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-slate-500) 30%, transparent);
+      }
+    }
+  }
   .dark\:ring-slate-500\/40 {
     &:where(.dark, .dark *) {
       --tw-ring-color: color-mix(in srgb, oklch(55.4% 0.046 257.417) 40%, transparent);
@@ -34557,6 +35097,14 @@
       }
     }
   }
+  .dark\:ring-stone-400\/30 {
+    &:where(.dark, .dark *) {
+      --tw-ring-color: color-mix(in srgb, oklch(70.9% 0.01 56.259) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-stone-400) 30%, transparent);
+      }
+    }
+  }
   .dark\:ring-stone-400\/50 {
     &:where(.dark, .dark *) {
       --tw-ring-color: color-mix(in srgb, oklch(70.9% 0.01 56.259) 50%, transparent);
@@ -34565,6 +35113,14 @@
       }
     }
   }
+  .dark\:ring-stone-500\/30 {
+    &:where(.dark, .dark *) {
+      --tw-ring-color: color-mix(in srgb, oklch(55.3% 0.013 58.071) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-stone-500) 30%, transparent);
+      }
+    }
+  }
   .dark\:ring-stone-500\/40 {
     &:where(.dark, .dark *) {
       --tw-ring-color: color-mix(in srgb, oklch(55.3% 0.013 58.071) 40%, transparent);
@@ -34573,6 +35129,14 @@
       }
     }
   }
+  .dark\:ring-teal-400\/30 {
+    &:where(.dark, .dark *) {
+      --tw-ring-color: color-mix(in srgb, oklch(77.7% 0.152 181.912) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-teal-400) 30%, transparent);
+      }
+    }
+  }
   .dark\:ring-teal-400\/50 {
     &:where(.dark, .dark *) {
       --tw-ring-color: color-mix(in srgb, oklch(77.7% 0.152 181.912) 50%, transparent);
@@ -34581,6 +35145,14 @@
       }
     }
   }
+  .dark\:ring-teal-500\/30 {
+    &:where(.dark, .dark *) {
+      --tw-ring-color: color-mix(in srgb, oklch(70.4% 0.14 182.503) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-teal-500) 30%, transparent);
+      }
+    }
+  }
   .dark\:ring-teal-500\/40 {
     &:where(.dark, .dark *) {
       --tw-ring-color: color-mix(in srgb, oklch(70.4% 0.14 182.503) 40%, transparent);
@@ -34589,6 +35161,14 @@
       }
     }
   }
+  .dark\:ring-violet-400\/30 {
+    &:where(.dark, .dark *) {
+      --tw-ring-color: color-mix(in srgb, oklch(70.2% 0.183 293.541) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-violet-400) 30%, transparent);
+      }
+    }
+  }
   .dark\:ring-violet-400\/50 {
     &:where(.dark, .dark *) {
       --tw-ring-color: color-mix(in srgb, oklch(70.2% 0.183 293.541) 50%, transparent);
@@ -34597,6 +35177,14 @@
       }
     }
   }
+  .dark\:ring-violet-500\/30 {
+    &:where(.dark, .dark *) {
+      --tw-ring-color: color-mix(in srgb, oklch(60.6% 0.25 292.717) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-violet-500) 30%, transparent);
+      }
+    }
+  }
   .dark\:ring-violet-500\/40 {
     &:where(.dark, .dark *) {
       --tw-ring-color: color-mix(in srgb, oklch(60.6% 0.25 292.717) 40%, transparent);
@@ -34621,6 +35209,14 @@
       }
     }
   }
+  .dark\:ring-yellow-400\/30 {
+    &:where(.dark, .dark *) {
+      --tw-ring-color: color-mix(in srgb, oklch(85.2% 0.199 91.936) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-yellow-400) 30%, transparent);
+      }
+    }
+  }
   .dark\:ring-yellow-400\/50 {
     &:where(.dark, .dark *) {
       --tw-ring-color: color-mix(in srgb, oklch(85.2% 0.199 91.936) 50%, transparent);
@@ -34629,6 +35225,14 @@
       }
     }
   }
+  .dark\:ring-yellow-500\/30 {
+    &:where(.dark, .dark *) {
+      --tw-ring-color: color-mix(in srgb, oklch(79.5% 0.184 86.047) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-yellow-500) 30%, transparent);
+      }
+    }
+  }
   .dark\:ring-yellow-500\/40 {
     &:where(.dark, .dark *) {
       --tw-ring-color: color-mix(in srgb, oklch(79.5% 0.184 86.047) 40%, transparent);
@@ -34637,6 +35241,14 @@
       }
     }
   }
+  .dark\:ring-zinc-400\/30 {
+    &:where(.dark, .dark *) {
+      --tw-ring-color: color-mix(in srgb, oklch(70.5% 0.015 286.067) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-zinc-400) 30%, transparent);
+      }
+    }
+  }
   .dark\:ring-zinc-400\/50 {
     &:where(.dark, .dark *) {
       --tw-ring-color: color-mix(in srgb, oklch(70.5% 0.015 286.067) 50%, transparent);
@@ -34645,6 +35257,14 @@
       }
     }
   }
+  .dark\:ring-zinc-500\/30 {
+    &:where(.dark, .dark *) {
+      --tw-ring-color: color-mix(in srgb, oklch(55.2% 0.016 285.938) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-zinc-500) 30%, transparent);
+      }
+    }
+  }
   .dark\:ring-zinc-500\/40 {
     &:where(.dark, .dark *) {
       --tw-ring-color: color-mix(in srgb, oklch(55.2% 0.016 285.938) 40%, transparent);