@deepgram/styles 0.2.9 → 0.2.11

package/dist/deepgram.expanded.css

@@ -10,7 +10,6 @@
     --color-indigo-600: oklch(51.1% 0.262 276.966);
     --color-gray-300: oklch(87.2% 0.01 258.338);
     --color-gray-400: oklch(70.7% 0.022 261.325);
-    --color-gray-800: oklch(27.8% 0.033 256.848);
     --color-gray-900: oklch(21% 0.034 264.665);
     --color-black: #000;
     --color-white: #fff;
@@ -55,19 +54,22 @@
     --default-mono-font-family: var(--font-mono);
     --color-dg-primary: var(--dg-primary, #13ef95);
     --color-dg-secondary: var(--dg-secondary, #149afb);
-    --color-dg-background: #0b0b0c;
-    --color-dg-charcoal: #1a1a1f;
-    --color-dg-translucent: rgba(0, 0, 0, 0.5);
-    --color-dg-border: #2c2c33;
-    --color-dg-pebble: #4e4e52;
-    --color-dg-slate: #949498;
-    --color-dg-text: #fbfbff;
-    --color-dg-fog: #edede2;
-    --color-dg-platinum: #e1e1e5;
-    --color-dg-muted: #949498;
-    --color-dg-success: #12b76a;
-    --color-dg-warning: #fec84b;
-    --color-dg-danger: #f04438;
+    --color-dg-almost-black: light-dark(#f8f9fa, #050506);
+    --color-dg-background: light-dark(#ffffff, #0b0b0c);
+    --color-dg-charcoal: light-dark(#f3f4f6, #1a1a1f);
+    --color-dg-solid: light-dark(#000000, #ffffff);
+    --color-dg-translucent: light-dark(rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.5));
+    --color-dg-border: light-dark(#d1d5db, #2c2c33);
+    --color-dg-pebble: light-dark(#9ca3af, #4e4e52);
+    --color-dg-slate: light-dark(#6b7280, #949498);
+    --color-dg-text: light-dark(#111827, #fbfbff);
+    --color-dg-fog: light-dark(#1f2937, #edede2);
+    --color-dg-platinum: light-dark(#374151, #e1e1e5);
+    --color-dg-muted: light-dark(#6b7280, #949498);
+    --color-dg-on-solid: light-dark(#ffffff, #000000);
+    --color-dg-success: light-dark(#15803d, #12b76a);
+    --color-dg-warning: light-dark(#a16207, #fec84b);
+    --color-dg-danger: light-dark(#b91c1c, #f04438);
     --font-dg-sans: "Inter", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif;
     --font-dg-noto: "Noto Sans", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif;
     --font-dg-mono: "Fira Code", "Monaco", "Consolas", "Courier New", monospace;
@@ -226,6 +228,9 @@
   .collapse {
     visibility: collapse;
   }
+  .invisible {
+    visibility: hidden;
+  }
   .visible {
     visibility: visible;
   }
@@ -288,6 +293,9 @@
   .-m-1\.5 {
     margin: calc(var(--spacing) * -1.5);
   }
+  .-m-2\.5 {
+    margin: calc(var(--spacing) * -2.5);
+  }
   .m-0 {
     margin: calc(var(--spacing) * 0);
   }
@@ -297,6 +305,9 @@
   .mx-auto {
     margin-inline: auto;
   }
+  .-my-1\.5 {
+    margin-block: calc(var(--spacing) * -1.5);
+  }
   .my-1 {
     margin-block: calc(var(--spacing) * 1);
   }
@@ -324,6 +335,9 @@
   .mt-auto {
     margin-top: auto;
   }
+  .-mr-1\.5 {
+    margin-right: calc(var(--spacing) * -1.5);
+  }
   .mb-1 {
     margin-bottom: calc(var(--spacing) * 1);
   }
@@ -525,6 +539,9 @@
   .grow {
     flex-grow: 1;
   }
+  .border-collapse {
+    border-collapse: collapse;
+  }
   .-translate-y-0\.5 {
     --tw-translate-y: calc(var(--spacing) * -0.5);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -633,6 +650,9 @@
   .rounded-md {
     border-radius: var(--radius-md);
   }
+  .rounded-none {
+    border-radius: 0;
+  }
   .rounded-r-md {
     border-top-right-radius: var(--radius-md);
     border-bottom-right-radius: var(--radius-md);
@@ -641,6 +661,10 @@
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
+  .border-0 {
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+  }
   .border-2 {
     border-style: var(--tw-border-style);
     border-width: 2px;
@@ -692,11 +716,14 @@
     border-color: var(--color-dg-slate);
   }
   .border-dg-slate\/30 {
-    border-color: color-mix(in srgb, #949498 30%, transparent);
+    border-color: color-mix(in srgb, light-dark(#6b7280, #949498) 30%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       border-color: color-mix(in oklab, var(--color-dg-slate) 30%, transparent);
     }
   }
+  .border-dg-solid {
+    border-color: var(--color-dg-solid);
+  }
   .border-dg-success {
     border-color: var(--color-dg-success);
   }
@@ -706,9 +733,6 @@
   .border-transparent {
     border-color: transparent;
   }
-  .border-white {
-    border-color: var(--color-white);
-  }
   .border-white\/10 {
     border-color: color-mix(in srgb, #fff 10%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -722,19 +746,16 @@
     border-top-color: var(--color-dg-primary);
   }
   .dg-gradient-border {
-    background-image: linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0)), linear-gradient(90deg, var(--dg-secondary, #149afb), var(--dg-primary, #13ef95), var(--dg-secondary, #149afb), var(--dg-primary, #13ef95));
+    background-image: linear-gradient(var(--color-dg-on-solid), var(--color-dg-on-solid)), linear-gradient(90deg, var(--dg-secondary, #149afb), var(--dg-primary, #13ef95), var(--dg-secondary, #149afb), var(--dg-primary, #13ef95));
     @supports (color: color-mix(in lab, red, red)) {
-      background-image: linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0)), linear-gradient(90deg, color-mix(in srgb, var(--dg-secondary, #149afb) 70%, #000), color-mix(in srgb, var(--dg-primary, #13ef95) 70%, #000), color-mix(in srgb, var(--dg-secondary, #149afb) 70%, #000), color-mix(in srgb, var(--dg-primary, #13ef95) 70%, #000));
+      background-image: linear-gradient(var(--color-dg-on-solid), var(--color-dg-on-solid)), linear-gradient(90deg, color-mix(in srgb, var(--dg-secondary, #149afb) 70%, black), color-mix(in srgb, var(--dg-primary, #13ef95) 70%, black), color-mix(in srgb, var(--dg-secondary, #149afb) 70%, black), color-mix(in srgb, var(--dg-primary, #13ef95) 70%, black));
     }
     background-origin: padding-box, border-box;
     background-clip: padding-box, border-box;
     background-repeat: no-repeat;
     background-position: center;
     background-size: 100% 100%;
-    background-color: rgb(0, 0, 0);
-  }
-  .bg-black {
-    background-color: var(--color-black);
+    background-color: var(--color-dg-on-solid);
   }
   .bg-black\/80 {
     background-color: color-mix(in srgb, #000 80%, transparent);
@@ -754,18 +775,21 @@
   .bg-dg-muted {
     background-color: var(--color-dg-muted);
   }
+  .bg-dg-on-solid {
+    background-color: var(--color-dg-on-solid);
+  }
   .bg-dg-primary {
     background-color: var(--color-dg-primary);
   }
+  .bg-dg-solid {
+    background-color: var(--color-dg-solid);
+  }
   .bg-dg-success {
     background-color: var(--color-dg-success);
   }
   .bg-dg-translucent {
     background-color: var(--color-dg-translucent);
   }
-  .bg-gray-800 {
-    background-color: var(--color-gray-800);
-  }
   .bg-gray-900 {
     background-color: var(--color-gray-900);
   }
@@ -775,9 +799,6 @@
   .bg-transparent {
     background-color: transparent;
   }
-  .bg-white {
-    background-color: var(--color-white);
-  }
   .bg-white\/5 {
     background-color: color-mix(in srgb, #fff 5%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -822,6 +843,9 @@
   .p-2 {
     padding: calc(var(--spacing) * 2);
   }
+  .p-2\.5 {
+    padding: calc(var(--spacing) * 2.5);
+  }
   .p-3 {
     padding: calc(var(--spacing) * 3);
   }
@@ -1025,9 +1049,6 @@
   .whitespace-pre-wrap {
     white-space: pre-wrap;
   }
-  .text-black {
-    color: var(--color-black);
-  }
   .text-dg-danger {
     color: var(--color-dg-danger);
   }
@@ -1037,6 +1058,9 @@
   .text-dg-muted {
     color: var(--color-dg-muted);
   }
+  .text-dg-on-solid {
+    color: var(--color-dg-on-solid);
+  }
   .text-dg-platinum {
     color: var(--color-dg-platinum);
   }
@@ -1046,6 +1070,9 @@
   .text-dg-secondary {
     color: var(--color-dg-secondary);
   }
+  .text-dg-solid {
+    color: var(--color-dg-solid);
+  }
   .text-dg-success {
     color: var(--color-dg-success);
   }
@@ -1109,7 +1136,10 @@
     }
   }
   .dg-shadow-subtle {
-    box-shadow: rgba(38, 44, 52, 0.05) 0 0.0625rem 0.125rem;
+    box-shadow: color-mix(in srgb, light-dark(#9ca3af, #4e4e52) 5%, transparent) 0 0.0625rem 0.125rem;
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: color-mix(in srgb, var(--color-dg-pebble) 5%, transparent) 0 0.0625rem 0.125rem;
+    }
   }
   .outline {
     outline-style: var(--tw-outline-style);
@@ -1142,6 +1172,10 @@
     --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,);
   }
+  .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,);
   }
@@ -1272,10 +1306,14 @@
 }
 @layer base {
   :root {
+    color-scheme: light dark;
     --dg-base-font-size: 16px;
     --dg-border-width: 0.125rem;
-    --dg-primary: #13ef95;
-    --dg-secondary: #149afb;
+    --dg-primary: light-dark(#047857, #13ef95);
+    --dg-secondary: light-dark(#0369a1, #149afb);
+    --dg-syntax-keyword: #f97583;
+    --dg-syntax-variable: #79b8ff;
+    --dg-syntax-function: #b392f0;
   }
   html {
     font-size: var(--dg-base-font-size, 16px);
@@ -1383,17 +1421,17 @@
     border-style: var(--tw-border-style);
     border-width: 1px;
     border-color: transparent;
-    background-image: linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0)), linear-gradient(90deg, var(--dg-secondary, #149afb), var(--dg-primary, #13ef95), var(--dg-secondary, #149afb), var(--dg-primary, #13ef95));
+    background-image: linear-gradient(var(--color-dg-on-solid), var(--color-dg-on-solid)), linear-gradient(90deg, var(--dg-secondary, #149afb), var(--dg-primary, #13ef95), var(--dg-secondary, #149afb), var(--dg-primary, #13ef95));
     @supports (color: color-mix(in lab, red, red)) {
-      background-image: linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0)), linear-gradient(90deg, color-mix(in srgb, var(--dg-secondary, #149afb) 70%, #000), color-mix(in srgb, var(--dg-primary, #13ef95) 70%, #000), color-mix(in srgb, var(--dg-secondary, #149afb) 70%, #000), color-mix(in srgb, var(--dg-primary, #13ef95) 70%, #000));
+      background-image: linear-gradient(var(--color-dg-on-solid), var(--color-dg-on-solid)), linear-gradient(90deg, color-mix(in srgb, var(--dg-secondary, #149afb) 70%, black), color-mix(in srgb, var(--dg-primary, #13ef95) 70%, black), color-mix(in srgb, var(--dg-secondary, #149afb) 70%, black), color-mix(in srgb, var(--dg-primary, #13ef95) 70%, black));
     }
     background-origin: padding-box, border-box;
     background-clip: padding-box, border-box;
     background-repeat: no-repeat;
     background-position: center;
     background-size: 100% 100%;
-    background-color: rgb(0, 0, 0);
-    color: var(--color-white);
+    background-color: var(--color-dg-on-solid);
+    color: var(--color-dg-solid);
     box-shadow: var(--dg-primary, #13ef95) 0.375rem 0 0.9375rem 0, var(--dg-secondary, #149afb) -0.375rem 0 0.9375rem 0;
     @supports (color: color-mix(in lab, red, red)) {
       box-shadow: color-mix(in srgb, var(--dg-primary, #13ef95) 20%, transparent) 0.375rem 0 0.9375rem 0, color-mix(in srgb, var(--dg-secondary, #149afb) 20%, transparent) -0.375rem 0 0.9375rem 0;
@@ -1401,55 +1439,61 @@
   }
   .dg-btn--primary:hover {
     border-color: transparent;
-    background-color: var(--color-white);
+    background-color: var(--color-dg-solid);
     background-image: none;
     background-origin: padding-box;
     background-clip: border-box;
     background-repeat: repeat;
     background-position: 0% 0%;
     background-size: auto;
-    color: var(--color-black);
-    box-shadow: rgba(38, 44, 52, 0.05) 0 0.0625rem 0.125rem;
+    color: var(--color-dg-on-solid);
+    box-shadow: color-mix(in srgb, light-dark(#9ca3af, #4e4e52) 5%, transparent) 0 0.0625rem 0.125rem;
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: color-mix(in srgb, var(--color-dg-pebble) 5%, transparent) 0 0.0625rem 0.125rem;
+    }
   }
   .dg-btn--secondary {
     border-style: var(--tw-border-style);
     border-width: 1px;
     border-color: transparent;
-    background-color: var(--color-white);
-    color: var(--color-black);
+    background-color: var(--color-dg-solid);
+    color: var(--color-dg-on-solid);
   }
   .dg-btn--secondary:hover {
     border-style: var(--tw-border-style);
     border-width: 1px;
-    border-color: var(--color-white);
-    background-color: var(--color-black);
-    color: var(--color-white);
+    border-color: var(--color-dg-solid);
+    background-color: var(--color-dg-on-solid);
+    color: var(--color-dg-solid);
   }
   .dg-btn--ghost {
     border-style: var(--tw-border-style);
     border-width: 1px;
     border-color: var(--color-dg-slate);
     background-color: transparent;
-    color: var(--color-white);
+    color: var(--color-dg-solid);
   }
   .dg-btn--ghost:hover {
     border-color: transparent;
-    background-color: var(--color-white);
+    background-color: var(--color-dg-solid);
     background-image: none;
     background-origin: padding-box;
     background-clip: border-box;
     background-repeat: repeat;
     background-position: 0% 0%;
     background-size: auto;
-    color: var(--color-black);
-    box-shadow: rgba(38, 44, 52, 0.05) 0 0.0625rem 0.125rem;
+    color: var(--color-dg-on-solid);
+    box-shadow: color-mix(in srgb, light-dark(#9ca3af, #4e4e52) 5%, transparent) 0 0.0625rem 0.125rem;
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: color-mix(in srgb, var(--color-dg-pebble) 5%, transparent) 0 0.0625rem 0.125rem;
+    }
   }
   .dg-btn--danger-ghost {
     border-style: var(--tw-border-style);
     border-width: 1px;
     border-color: var(--color-dg-danger);
     background-color: transparent;
-    color: var(--color-white);
+    color: var(--color-dg-solid);
   }
   .dg-btn--danger-ghost:hover {
     border-color: transparent;
@@ -1658,7 +1702,10 @@
   }
   .dg-card--selectable:has(input[type="radio"]:checked) {
     border-color: var(--color-dg-primary);
-    background: rgba(19, 239, 149, 0.05);
+    background: var(--dg-primary);
+    @supports (color: color-mix(in lab, red, red)) {
+      background: color-mix(in srgb, var(--dg-primary) 5%, transparent);
+    }
   }
   .dg-sr-only {
     position: absolute;
@@ -1686,7 +1733,7 @@
     display: none;
   }
   .dg-card--selectable__icon {
-    color: var(--color-white);
+    color: var(--color-dg-text);
     margin-right: 0.5rem;
   }
   .dg-card--selectable__content {
@@ -1700,7 +1747,7 @@
     line-height: var(--tw-leading, var(--text-base--line-height));
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
-    color: var(--color-white);
+    color: var(--color-dg-text);
     display: flex;
     align-items: center;
   }
@@ -1752,7 +1799,10 @@
     --tw-border-style: solid;
     border-style: solid;
     border-color: var(--color-dg-primary);
-    background: rgba(19, 239, 149, 0.05);
+    background: var(--dg-primary);
+    @supports (color: color-mix(in lab, red, red)) {
+      background: color-mix(in srgb, var(--dg-primary) 5%, transparent);
+    }
   }
   .dg-card--file-upload input[type="file"], .dg-card--file-upload input[type="checkbox"] {
     position: absolute;
@@ -1766,7 +1816,7 @@
     border-width: 0;
   }
   .dg-card--file-upload__icon {
-    color: var(--color-white);
+    color: var(--color-dg-text);
     margin-right: 0.5rem;
   }
   .dg-card--file-upload__content {
@@ -1780,7 +1830,7 @@
     line-height: var(--tw-leading, var(--text-base--line-height));
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
-    color: var(--color-white);
+    color: var(--color-dg-text);
     display: flex;
     align-items: center;
   }
@@ -2040,7 +2090,7 @@
     background-color: var(--color-dg-translucent);
     margin-inline: auto;
     margin-bottom: calc(var(--spacing) * 2);
-    border-color: color-mix(in srgb, #949498 30%, transparent);
+    border-color: color-mix(in srgb, light-dark(#6b7280, #949498) 30%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       border-color: color-mix(in oklab, var(--color-dg-slate) 30%, transparent);
     }
@@ -2060,8 +2110,14 @@
     --tw-translate-y: calc(var(--spacing) * -0.5);
     translate: var(--tw-translate-x) var(--tw-translate-y);
     border-color: var(--color-dg-primary);
-    background-color: rgba(19, 239, 149, 0.1);
-    box-shadow: 0 0.25rem 0.75rem rgba(19, 239, 149, 0.15);
+    background-color: var(--dg-primary);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in srgb, var(--dg-primary) 10%, transparent);
+    }
+    box-shadow: 0 0.25rem 0.75rem var(--dg-primary);
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: 0 0.25rem 0.75rem color-mix(in srgb, var(--dg-primary) 15%, transparent);
+    }
   }
   .dg-hero__announcement-text {
     font-size: var(--text-sm);
@@ -2069,7 +2125,7 @@
     --tw-font-weight: var(--font-weight-normal);
     font-weight: var(--font-weight-normal);
     white-space: nowrap;
-    color: var(--color-white);
+    color: var(--color-dg-text);
   }
   .dg-hero__announcement-cta {
     display: inline-flex;
@@ -2173,7 +2229,7 @@
     line-height: var(--tw-leading, var(--text-2xl--line-height));
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
-    color: var(--color-white);
+    color: var(--color-dg-text);
     flex-wrap: wrap;
     align-items: baseline;
     gap: calc(var(--spacing) * 2);
@@ -2209,7 +2265,7 @@
     line-height: var(--leading-tight);
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
-    color: var(--color-white);
+    color: var(--color-dg-text);
   }
   .dg-page-heading__description {
     margin: calc(var(--spacing) * 0);
@@ -2262,7 +2318,7 @@
     line-height: var(--tw-leading, var(--text-2xl--line-height));
     --tw-font-weight: var(--font-weight-bold);
     font-weight: var(--font-weight-bold);
-    color: var(--color-white);
+    color: var(--color-dg-text);
     @media (width >= 40rem) {
       overflow: hidden;
       text-overflow: ellipsis;
@@ -2293,7 +2349,7 @@
     line-height: var(--tw-leading, var(--text-2xl--line-height));
     --tw-font-weight: var(--font-weight-bold);
     font-weight: var(--font-weight-bold);
-    color: var(--color-white);
+    color: var(--color-dg-text);
     @media (width >= 40rem) {
       overflow: hidden;
       text-overflow: ellipsis;
@@ -2327,7 +2383,7 @@
     line-height: var(--tw-leading, var(--text-xl--line-height));
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
-    color: var(--color-white);
+    color: var(--color-dg-text);
     flex-wrap: wrap;
     align-items: baseline;
     gap: calc(var(--spacing) * 1.5);
@@ -2354,7 +2410,7 @@
     line-height: var(--tw-leading, var(--text-base--line-height));
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
-    color: var(--color-white);
+    color: var(--color-dg-text);
   }
   .dg-item-title {
     margin-bottom: calc(var(--spacing) * 1);
@@ -2364,7 +2420,7 @@
     line-height: var(--tw-leading, var(--text-base--line-height));
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
-    color: var(--color-white);
+    color: var(--color-dg-text);
     flex-wrap: wrap;
     align-items: baseline;
     gap: calc(var(--spacing) * 1);
@@ -2436,7 +2492,7 @@
     font-family: var(--font-dg-sans);
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
-    color: var(--color-white);
+    color: var(--color-dg-text);
     transition-property: all;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
@@ -2485,7 +2541,7 @@
     font-family: var(--font-dg-sans);
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
-    color: var(--color-white);
+    color: var(--color-dg-text);
     transition-property: all;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
@@ -2528,7 +2584,7 @@
     top: 0.125rem;
     width: 0.3125rem;
     height: 0.625rem;
-    border: solid black;
+    border: solid var(--color-dg-almost-black);
     border-width: 0 0.125rem 0.125rem 0;
     transform: rotate(45deg);
   }
@@ -2589,7 +2645,7 @@
     line-height: var(--tw-leading, var(--text-sm--line-height));
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
-    color: var(--color-white);
+    color: var(--color-dg-text);
   }
   .dg-form-error {
     display: block;
@@ -2662,7 +2718,7 @@
     line-height: var(--tw-leading, var(--text-base--line-height));
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
-    color: var(--color-white);
+    color: var(--color-dg-text);
   }
   .dg-drag-drop-zone__hint {
     font-size: var(--text-sm);
@@ -2747,7 +2803,7 @@
     line-height: var(--tw-leading, var(--text-xl--line-height));
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
-    color: var(--color-white);
+    color: var(--color-dg-text);
   }
   .dg-modal-overlay {
     position: fixed;
@@ -2822,36 +2878,6 @@
       padding-inline: calc(var(--spacing) * 6);
     }
   }
-  @media (min-width: 768px) {
-    .dg-columns {
-      flex-direction: row;
-    }
-  }
-  @media (min-width: 768px) and (max-width: 1279px) {
-    .dg-column--sidebar-right {
-      position: fixed;
-      top: 65px;
-      right: 0;
-      height: calc(100vh - 65px);
-      width: 16rem;
-      flex-shrink: 0;
-      transition: transform 300ms ease;
-      z-index: 20;
-      box-shadow: -4px 0 16px rgba(0, 0, 0, 0.5);
-    }
-    .dg-column--sidebar-right.dg-column--sm {
-      width: 20rem;
-    }
-    .dg-column--sidebar-right.dg-column--lg {
-      width: 24rem;
-    }
-    .dg-column--sidebar-right.dg-column--xl {
-      width: 32rem;
-    }
-    .dg-column--sidebar-right.collapsed {
-      transform: translateX(calc(100% - 2rem));
-    }
-  }
   @media (min-width: 1024px) {
     .dg-columns__wrapper {
       flex-direction: row;
@@ -2874,6 +2900,9 @@
     }
   }
   @media (min-width: 1280px) {
+    .dg-columns {
+      flex-direction: row;
+    }
     .dg-column--sidebar-right {
       width: 16rem;
       flex-shrink: 0;
@@ -2891,11 +2920,100 @@
       flex-shrink: 0;
     }
   }
+  .dg-columns--fixed {
+    position: relative;
+    height: 100%;
+    --dg-sidebar-width: 18rem;
+    --dg-aside-width: 24rem;
+  }
+  .dg-columns--fixed .dg-column--sidebar-left {
+    display: none;
+  }
+  .dg-columns--fixed .dg-column--sidebar-right {
+    display: none;
+  }
+  @media (min-width: 1024px) {
+    .dg-columns--fixed .dg-column--sidebar-left {
+      display: flex;
+      flex-direction: column;
+      position: fixed;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      z-index: 50;
+      width: var(--dg-sidebar-width);
+      overflow-y: auto;
+      background: var(--color-dg-almost-black);
+      border-right: 1px solid var(--color-dg-border);
+    }
+    .dg-columns--fixed .dg-column--main {
+      padding-left: var(--dg-sidebar-width);
+    }
+    .dg-columns--fixed:has(.dg-column--sidebar-left.dg-column--sm) {
+      --dg-sidebar-width: 16rem;
+    }
+    .dg-columns--fixed:has(.dg-column--sidebar-left.dg-column--lg) {
+      --dg-sidebar-width: 24rem;
+    }
+    .dg-columns--fixed:has(.dg-column--sidebar-left.dg-column--xl) {
+      --dg-sidebar-width: 32rem;
+    }
+  }
+  @media (min-width: 1280px) {
+    .dg-columns--fixed .dg-column--sidebar-right {
+      display: flex;
+      flex-direction: column;
+      position: fixed;
+      top: 0;
+      bottom: 0;
+      left: var(--dg-sidebar-width);
+      width: var(--dg-aside-width);
+      overflow-y: auto;
+      border-right: 1px solid var(--color-dg-border);
+    }
+    .dg-columns--fixed:has(.dg-column--sidebar-right) .dg-column--main {
+      padding-left: calc(var(--dg-sidebar-width) + var(--dg-aside-width));
+    }
+    .dg-columns--fixed:has(.dg-column--sidebar-right.dg-column--sm) {
+      --dg-aside-width: 20rem;
+    }
+    .dg-columns--fixed:has(.dg-column--sidebar-right.dg-column--lg) {
+      --dg-aside-width: 28rem;
+    }
+    .dg-columns--fixed:has(.dg-column--sidebar-right.dg-column--xl) {
+      --dg-aside-width: 32rem;
+    }
+  }
+  .dg-columns__mobile-header {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--spacing) * 3);
+    padding-inline: calc(var(--spacing) * 4);
+    padding-block: calc(var(--spacing) * 2);
+    position: sticky;
+    top: 0;
+    z-index: 40;
+    background: var(--color-dg-almost-black);
+    border-bottom: 1px solid var(--color-dg-border);
+  }
+  @media (min-width: 1024px) {
+    .dg-columns__mobile-header {
+      display: none;
+    }
+  }
+  .dg-columns__sidebar-toggle {
+    margin: calc(var(--spacing) * -2.5);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: calc(var(--spacing) * 2.5);
+    color: var(--color-dg-muted);
+  }
   .dg-header {
     width: 100%;
-    background: #050506;
+    background: var(--color-dg-almost-black);
     padding: 1rem 1.5rem;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    border-bottom: 1px solid color-mix(in srgb, white 10%, transparent);
   }
   .dg-header__container {
     margin-inline: auto;
@@ -2919,7 +3037,7 @@
     line-height: var(--tw-leading, var(--text-xl--line-height));
     --tw-font-weight: var(--font-weight-bold);
     font-weight: var(--font-weight-bold);
-    color: var(--color-white);
+    color: var(--color-dg-text);
   }
   .dg-header__nav {
     display: flex;
@@ -2935,7 +3053,7 @@
     width: calc(var(--spacing) * 8);
     height: calc(var(--spacing) * 8);
     border-radius: calc(infinity * 1px);
-    background-color: var(--color-gray-800);
+    background-color: var(--color-dg-charcoal);
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
     outline-offset: calc(1px * -1);
@@ -3110,31 +3228,31 @@
     padding: calc(var(--spacing) * 4);
   }
   .dg-alert--warning {
-    background-color: color-mix(in srgb, #fec84b 10%, transparent);
+    background-color: color-mix(in srgb, light-dark(#a16207, #fec84b) 10%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       background-color: color-mix(in srgb, var(--color-dg-warning) 10%, transparent);
     }
-    outline: 1px solid color-mix(in srgb, #fec84b 15%, transparent);
+    outline: 1px solid color-mix(in srgb, light-dark(#a16207, #fec84b) 15%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       outline: 1px solid color-mix(in srgb, var(--color-dg-warning) 15%, transparent);
     }
   }
   .dg-alert--success {
-    background-color: color-mix(in srgb, #12b76a 10%, transparent);
+    background-color: color-mix(in srgb, light-dark(#15803d, #12b76a) 10%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       background-color: color-mix(in srgb, var(--color-dg-success) 10%, transparent);
     }
-    outline: 1px solid color-mix(in srgb, #12b76a 15%, transparent);
+    outline: 1px solid color-mix(in srgb, light-dark(#15803d, #12b76a) 15%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       outline: 1px solid color-mix(in srgb, var(--color-dg-success) 15%, transparent);
     }
   }
   .dg-alert--danger {
-    background-color: color-mix(in srgb, #f04438 10%, transparent);
+    background-color: color-mix(in srgb, light-dark(#b91c1c, #f04438) 10%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       background-color: color-mix(in srgb, var(--color-dg-danger) 10%, transparent);
     }
-    outline: 1px solid color-mix(in srgb, #f04438 15%, transparent);
+    outline: 1px solid color-mix(in srgb, light-dark(#b91c1c, #f04438) 15%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       outline: 1px solid color-mix(in srgb, var(--color-dg-danger) 15%, transparent);
     }
@@ -3217,6 +3335,8 @@
     padding-left: 0.25rem;
   }
   .dg-alert__dismiss {
+    margin-block: calc(var(--spacing) * -1.5);
+    margin-right: calc(var(--spacing) * -1.5);
     margin-left: auto;
     flex-shrink: 0;
     padding-left: calc(var(--spacing) * 3);
@@ -3235,167 +3355,6 @@
     width: calc(var(--spacing) * 5);
     height: calc(var(--spacing) * 5);
   }
-  .dg-combobox {
-    position: relative;
-    display: block;
-  }
-  .dg-combobox__label {
-    display: block;
-    font-size: var(--text-sm);
-    line-height: var(--tw-leading, var(--text-sm--line-height));
-    --tw-font-weight: var(--font-weight-medium);
-    font-weight: var(--font-weight-medium);
-    color: var(--color-white);
-    line-height: 1.5rem;
-  }
-  .dg-combobox__wrapper {
-    position: relative;
-    margin-top: calc(var(--spacing) * 2);
-    display: block;
-  }
-  .dg-combobox__input {
-    display: block;
-    width: 100%;
-    border-radius: var(--radius-md);
-    background-color: color-mix(in srgb, #fff 5%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
-    }
-    padding-block: calc(var(--spacing) * 1.5);
-    padding-right: calc(var(--spacing) * 12);
-    padding-left: calc(var(--spacing) * 3);
-    font-size: var(--text-base);
-    line-height: var(--tw-leading, var(--text-base--line-height));
-    color: var(--color-white);
-    outline-style: var(--tw-outline-style);
-    outline-width: 1px;
-    outline-offset: calc(1px * -1);
-    outline-color: color-mix(in srgb, #fff 10%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      outline-color: color-mix(in oklab, var(--color-white) 10%, transparent);
-    }
-    &::placeholder {
-      color: var(--color-dg-slate);
-    }
-    @media (width >= 40rem) {
-      font-size: var(--text-sm);
-      line-height: var(--tw-leading, var(--text-sm--line-height));
-    }
-    line-height: 1.5rem;
-  }
-  .dg-combobox__input:focus {
-    outline-style: var(--tw-outline-style);
-    outline-width: 2px;
-    outline-offset: calc(2px * -1);
-    outline-color: var(--color-dg-primary);
-  }
-  .dg-combobox__toggle {
-    position: absolute;
-    inset-block: calc(var(--spacing) * 0);
-    right: calc(var(--spacing) * 0);
-    display: flex;
-    align-items: center;
-    border-top-right-radius: var(--radius-md);
-    border-bottom-right-radius: var(--radius-md);
-    padding-inline: calc(var(--spacing) * 2);
-  }
-  .dg-combobox__toggle-icon {
-    width: calc(var(--spacing) * 5);
-    height: calc(var(--spacing) * 5);
-    color: var(--color-dg-muted);
-  }
-  .dg-combobox__options {
-    max-height: calc(var(--spacing) * 60);
-    overflow: auto;
-    border-radius: var(--radius-md);
-    background-color: var(--color-dg-charcoal);
-    padding-block: calc(var(--spacing) * 1);
-    font-size: var(--text-base);
-    line-height: var(--tw-leading, var(--text-base--line-height));
-    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    @media (width >= 40rem) {
-      font-size: var(--text-sm);
-      line-height: var(--tw-leading, var(--text-sm--line-height));
-    }
-    outline: 1px solid rgba(255, 255, 255, 0.1);
-    outline-offset: -1px;
-  }
-  .dg-combobox__option {
-    display: block;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    padding-inline: calc(var(--spacing) * 3);
-    padding-block: calc(var(--spacing) * 2);
-    color: var(--color-dg-platinum);
-    -webkit-user-select: none;
-    user-select: none;
-    cursor: pointer;
-  }
-  .dg-combobox__option:hover {
-    background-color: var(--color-dg-primary);
-    color: var(--color-white);
-  }
-  .dg-combobox__option.selected {
-    background-color: var(--color-dg-primary);
-    color: var(--color-white);
-  }
-  .dg-combobox__option-text {
-    display: block;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  .dg-combobox__check {
-    position: absolute;
-    inset-block: calc(var(--spacing) * 0);
-    right: calc(var(--spacing) * 0);
-    display: flex;
-    align-items: center;
-    padding-right: calc(var(--spacing) * 4);
-    color: var(--color-white);
-  }
-  .dg-combobox__check-icon {
-    width: calc(var(--spacing) * 5);
-    height: calc(var(--spacing) * 5);
-  }
-  .dg-combobox--with-check .dg-combobox__option {
-    position: relative;
-    padding-right: calc(var(--spacing) * 9);
-  }
-  .dg-combobox--with-check .dg-combobox__option.selected .dg-combobox__check {
-    display: flex;
-  }
-  .dg-combobox--with-avatar .dg-combobox__option {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-  }
-  .dg-combobox__avatar {
-    width: calc(var(--spacing) * 6);
-    height: calc(var(--spacing) * 6);
-    flex-shrink: 0;
-    border-radius: calc(infinity * 1px);
-  }
-  .dg-combobox--with-status .dg-combobox__option {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-  }
-  .dg-combobox__status {
-    display: inline-block;
-    width: calc(var(--spacing) * 2);
-    height: calc(var(--spacing) * 2);
-    flex-shrink: 0;
-    border-radius: calc(infinity * 1px);
-  }
-  .dg-combobox__status--online {
-    background-color: var(--color-dg-success);
-  }
-  .dg-combobox__status--offline {
-    background-color: var(--color-dg-muted);
-  }
 }
 @property --tw-translate-x {
   syntax: "*";