draft-components 2.10.3 → 3.0.0

package/css/draft-components.css

@@ -3,6 +3,7 @@
   --dc-toaster-z-index: 1010;
 
   /* Typography */
+
   /* https://tailwindcss.com/docs/font-family */
   --dc-font-serif:
     ui-serif, "Georgia", "Cambria", "Times New Roman", "Times", serif;
@@ -37,213 +38,213 @@
   /* https://tailwindcss.com/docs/customizing-colors */
 
   /* Gray scale */
-  --dc-gray-50: #f9fafb;
   --dc-gray-50-rgb: 249 250 251;
-  --dc-gray-100: #f3f4f6;
   --dc-gray-100-rgb: 243 244 246;
-  --dc-gray-200: #e5e7eb;
   --dc-gray-200-rgb: 229 231 235;
-  --dc-gray-300: #d1d5db;
   --dc-gray-300-rgb: 209 213 219;
-  --dc-gray-400: #9ca3af;
   --dc-gray-400-rgb: 156 163 175;
-  --dc-gray-500: #6b7280;
   --dc-gray-500-rgb: 107 114 128;
-  --dc-gray-600: #4b5563;
   --dc-gray-600-rgb: 75 85 99;
-  --dc-gray-700: #374151;
   --dc-gray-700-rgb: 55 65 81;
-  --dc-gray-800: #1f2937;
   --dc-gray-800-rgb: 31 41 55;
-  --dc-gray-900: #111827;
   --dc-gray-900-rgb: 17 24 39;
+  --dc-gray-50: rgb(var(--dc-gray-50));
+  --dc-gray-100: rgb(var(--dc-gray-100-rgb));
+  --dc-gray-200: rgb(var(--dc-gray-200-rgb));
+  --dc-gray-300: rgb(var(--dc-gray-300-rgb));
+  --dc-gray-400: rgb(var(--dc-gray-400-rgb));
+  --dc-gray-500: rgb(var(--dc-gray-500-rgb));
+  --dc-gray-600: rgb(var(--dc-gray-600-rgb));
+  --dc-gray-700: rgb(var(--dc-gray-700-rgb));
+  --dc-gray-800: rgb(var(--dc-gray-800-rgb));
+  --dc-gray-900: rgb(var(--dc-gray-900-rgb));
 
   /* Red scale */
-  --dc-red-50: #fef2f2;
   --dc-red-50-rgb: 254 242 242;
-  --dc-red-100: #fee2e2;
   --dc-red-100-rgb: 254 226 226;
-  --dc-red-200: #fecaca;
   --dc-red-200-rgb: 254 202 202;
-  --dc-red-300: #fca5a5;
   --dc-red-300-rgb: 252 165 165;
-  --dc-red-400: #f87171;
   --dc-red-400-rgb: 248 113 113;
-  --dc-red-500: #ef4444;
   --dc-red-500-rgb: 239 68 68;
-  --dc-red-600: #dc2626;
   --dc-red-600-rgb: 220 38 38;
-  --dc-red-700: #b91c1c;
   --dc-red-700-rgb: 185 28 28;
-  --dc-red-800: #991b1b;
   --dc-red-800-rgb: 153 27 27;
-  --dc-red-900: #7f1d1d;
   --dc-red-900-rgb: 127 29 29;
+  --dc-red-50: rgb(var(--dc-red-50));
+  --dc-red-100: rgb(var(--dc-red-100-rgb));
+  --dc-red-200: rgb(var(--dc-red-200-rgb));
+  --dc-red-300: rgb(var(--dc-red-300-rgb));
+  --dc-red-400: rgb(var(--dc-red-400-rgb));
+  --dc-red-500: rgb(var(--dc-red-500-rgb));
+  --dc-red-600: rgb(var(--dc-red-600-rgb));
+  --dc-red-700: rgb(var(--dc-red-700-rgb));
+  --dc-red-800: rgb(var(--dc-red-800-rgb));
+  --dc-red-900: rgb(var(--dc-red-900-rgb));
 
   /* Orange scale */
-  --dc-orange-50: #fff7ed;
   --dc-orange-50-rgb: 255 247 237;
-  --dc-orange-100: #ffedd5;
   --dc-orange-100-rgb: 255 237 213;
-  --dc-orange-200: #fed7aa;
   --dc-orange-200-rgb: 254 215 170;
-  --dc-orange-300: #fdba74;
   --dc-orange-300-rgb: 253 186 116;
-  --dc-orange-400: #fb923c;
   --dc-orange-400-rgb: 251 146 60;
-  --dc-orange-500: #f97316;
   --dc-orange-500-rgb: 249 115 22;
-  --dc-orange-600: #ea580c;
   --dc-orange-600-rgb: 234 88 12;
-  --dc-orange-700: #c2410c;
   --dc-orange-700-rgb: 194 65 12;
-  --dc-orange-800: #9a3412;
   --dc-orange-800-rgb: 154 52 18;
-  --dc-orange-900: #7c2d12;
   --dc-orange-900-rgb: 124 45 18;
+  --dc-orange-50: rgb(var(--dc-orange-50));
+  --dc-orange-100: rgb(var(--dc-orange-100-rgb));
+  --dc-orange-200: rgb(var(--dc-orange-200-rgb));
+  --dc-orange-300: rgb(var(--dc-orange-300-rgb));
+  --dc-orange-400: rgb(var(--dc-orange-400-rgb));
+  --dc-orange-500: rgb(var(--dc-orange-500-rgb));
+  --dc-orange-600: rgb(var(--dc-orange-600-rgb));
+  --dc-orange-700: rgb(var(--dc-orange-700-rgb));
+  --dc-orange-800: rgb(var(--dc-orange-800-rgb));
+  --dc-orange-900: rgb(var(--dc-orange-900-rgb));
 
   /* Yellow scale */
-  --dc-yellow-50: #fefce8;
   --dc-yellow-50-rgb: 254 252 232;
-  --dc-yellow-100: #fef9c3;
   --dc-yellow-100-rgb: 254 249 195;
-  --dc-yellow-200: #fef08a;
   --dc-yellow-200-rgb: 254 240 138;
-  --dc-yellow-300: #fde047;
   --dc-yellow-300-rgb: 253 224 71;
-  --dc-yellow-400: #facc15;
   --dc-yellow-400-rgb: 250 204 21;
-  --dc-yellow-500: #eab308;
   --dc-yellow-500-rgb: 234 179 8;
-  --dc-yellow-600: #ca8a04;
   --dc-yellow-600-rgb: 202 138 4;
-  --dc-yellow-700: #a16207;
   --dc-yellow-700-rgb: 161 98 7;
-  --dc-yellow-800: #854d0e;
   --dc-yellow-800-rgb: 133 77 14;
-  --dc-yellow-900: #713f12;
   --dc-yellow-900-rgb: 113 63 18;
+  --dc-yellow-50: rgb(var(--dc-yellow-50));
+  --dc-yellow-100: rgb(var(--dc-yellow-100-rgb));
+  --dc-yellow-200: rgb(var(--dc-yellow-200-rgb));
+  --dc-yellow-300: rgb(var(--dc-yellow-300-rgb));
+  --dc-yellow-400: rgb(var(--dc-yellow-400-rgb));
+  --dc-yellow-500: rgb(var(--dc-yellow-500-rgb));
+  --dc-yellow-600: rgb(var(--dc-yellow-600-rgb));
+  --dc-yellow-700: rgb(var(--dc-yellow-700-rgb));
+  --dc-yellow-800: rgb(var(--dc-yellow-800-rgb));
+  --dc-yellow-900: rgb(var(--dc-yellow-900-rgb));
 
   /* Green scale */
-  --dc-green-50: #f0fdf4;
   --dc-green-50-rgb: 240 253 244;
-  --dc-green-100: #dcfce7;
   --dc-green-100-rgb: 220 252 231;
-  --dc-green-200: #bbf7d0;
   --dc-green-200-rgb: 187 247 208;
-  --dc-green-300: #86efac;
   --dc-green-300-rgb: 134 239 172;
-  --dc-green-400: #4ade80;
   --dc-green-400-rgb: 74 222 128;
-  --dc-green-500: #22c55e;
   --dc-green-500-rgb: 34 197 94;
-  --dc-green-600: #16a34a;
   --dc-green-600-rgb: 22 163 74;
-  --dc-green-700: #15803d;
   --dc-green-700-rgb: 21 128 61;
-  --dc-green-800: #166534;
   --dc-green-800-rgb: 22 101 52;
-  --dc-green-900: #14532d;
   --dc-green-900-rgb: 20 83 45;
+  --dc-green-50: rgb(var(--dc-green-50));
+  --dc-green-100: rgb(var(--dc-green-100-rgb));
+  --dc-green-200: rgb(var(--dc-green-200-rgb));
+  --dc-green-300: rgb(var(--dc-green-300-rgb));
+  --dc-green-400: rgb(var(--dc-green-400-rgb));
+  --dc-green-500: rgb(var(--dc-green-500-rgb));
+  --dc-green-600: rgb(var(--dc-green-600-rgb));
+  --dc-green-700: rgb(var(--dc-green-700-rgb));
+  --dc-green-800: rgb(var(--dc-green-800-rgb));
+  --dc-green-900: rgb(var(--dc-green-900-rgb));
 
   /* Sky scale */
-  --dc-sky-50: #f0f9ff;
   --dc-sky-50-rgb: 240 249 255;
-  --dc-sky-100: #e0f2fe;
   --dc-sky-100-rgb: 224 242 254;
-  --dc-sky-200: #bae6fd;
   --dc-sky-200-rgb: 186 230 253;
-  --dc-sky-300: #7dd3fc;
   --dc-sky-300-rgb: 125 211 252;
-  --dc-sky-400: #38bdf8;
   --dc-sky-400-rgb: 56 189 248;
-  --dc-sky-500: #0ea5e9;
   --dc-sky-500-rgb: 14 165 233;
-  --dc-sky-600: #0284c7;
   --dc-sky-600-rgb: 2 132 199;
-  --dc-sky-700: #0369a1;
   --dc-sky-700-rgb: 3 105 161;
-  --dc-sky-800: #075985;
   --dc-sky-800-rgb: 7 89 133;
-  --dc-sky-900: #0c4a6e;
   --dc-sky-900-rgb: 12 74 110;
+  --dc-sky-50: rgb(var(--dc-sky-50));
+  --dc-sky-100: rgb(var(--dc-sky-100-rgb));
+  --dc-sky-200: rgb(var(--dc-sky-200-rgb));
+  --dc-sky-300: rgb(var(--dc-sky-300-rgb));
+  --dc-sky-400: rgb(var(--dc-sky-400-rgb));
+  --dc-sky-500: rgb(var(--dc-sky-500-rgb));
+  --dc-sky-600: rgb(var(--dc-sky-600-rgb));
+  --dc-sky-700: rgb(var(--dc-sky-700-rgb));
+  --dc-sky-800: rgb(var(--dc-sky-800-rgb));
+  --dc-sky-900: rgb(var(--dc-sky-900-rgb));
 
   /* Blue scale */
-  --dc-blue-50: #eff6ff;
   --dc-blue-50-rgb: 239 246 255;
-  --dc-blue-100: #dbeafe;
   --dc-blue-100-rgb: 219 234 254;
-  --dc-blue-200: #bfdbfe;
   --dc-blue-200-rgb: 191 219 254;
-  --dc-blue-300: #93c5fd;
   --dc-blue-300-rgb: 147 197 253;
-  --dc-blue-400: #60a5fa;
   --dc-blue-400-rgb: 96 165 250;
-  --dc-blue-500: #3b82f6;
   --dc-blue-500-rgb: 59 130 246;
-  --dc-blue-600: #2563eb;
   --dc-blue-600-rgb: 37 99 235;
-  --dc-blue-700: #1d4ed8;
   --dc-blue-700-rgb: 29 78 216;
-  --dc-blue-800: #1e40af;
   --dc-blue-800-rgb: 30 64 175;
-  --dc-blue-900: #1e3a8a;
   --dc-blue-900-rgb: 30 58 138;
+  --dc-blue-50: rgb(var(--dc-blue-50));
+  --dc-blue-100: rgb(var(--dc-blue-100-rgb));
+  --dc-blue-200: rgb(var(--dc-blue-200-rgb));
+  --dc-blue-300: rgb(var(--dc-blue-300-rgb));
+  --dc-blue-400: rgb(var(--dc-blue-400-rgb));
+  --dc-blue-500: rgb(var(--dc-blue-500-rgb));
+  --dc-blue-600: rgb(var(--dc-blue-600-rgb));
+  --dc-blue-700: rgb(var(--dc-blue-700-rgb));
+  --dc-blue-800: rgb(var(--dc-blue-800-rgb));
+  --dc-blue-900: rgb(var(--dc-blue-900-rgb));
 
   /* Violet scale */
-  --dc-violet-50: #f5f3ff;
   --dc-violet-50-rgb: 245 243 255;
-  --dc-violet-100: #ede9fe;
   --dc-violet-100-rgb: 237 233 254;
-  --dc-violet-200: #ddd6fe;
   --dc-violet-200-rgb: 221 214 254;
-  --dc-violet-300: #c4b5fd;
   --dc-violet-300-rgb: 196 181 253;
-  --dc-violet-400: #a78bfa;
   --dc-violet-400-rgb: 167 139 250;
-  --dc-violet-500: #8b5cf6;
   --dc-violet-500-rgb: 139 92 246;
-  --dc-violet-600: #7c3aed;
   --dc-violet-600-rgb: 124 58 237;
-  --dc-violet-700: #6d28d9;
   --dc-violet-700-rgb: 109 40 217;
-  --dc-violet-800: #5b21b6;
   --dc-violet-800-rgb: 91 33 182;
-  --dc-violet-900: #4c1d95;
   --dc-violet-900-rgb: 76 29 149;
+  --dc-violet-50: rgb(var(--dc-violet-50));
+  --dc-violet-100: rgb(var(--dc-violet-100-rgb));
+  --dc-violet-200: rgb(var(--dc-violet-200-rgb));
+  --dc-violet-300: rgb(var(--dc-violet-300-rgb));
+  --dc-violet-400: rgb(var(--dc-violet-400-rgb));
+  --dc-violet-500: rgb(var(--dc-violet-500-rgb));
+  --dc-violet-600: rgb(var(--dc-violet-600-rgb));
+  --dc-violet-700: rgb(var(--dc-violet-700-rgb));
+  --dc-violet-800: rgb(var(--dc-violet-800-rgb));
+  --dc-violet-900: rgb(var(--dc-violet-900-rgb));
 
   /* Pink scale */
-  --dc-pink-50: #fdf2f8;
   --dc-pink-50-rgb: 253 242 248;
-  --dc-pink-100: #fce7f3;
   --dc-pink-100-rgb: 252 231 243;
-  --dc-pink-200: #fbcfe8;
   --dc-pink-200-rgb: 251 207 232;
-  --dc-pink-300: #f9a8d4;
   --dc-pink-300-rgb: 249 168 212;
-  --dc-pink-400: #f472b6;
   --dc-pink-400-rgb: 244 114 182;
-  --dc-pink-500: #ec4899;
   --dc-pink-500-rgb: 236 72 153;
-  --dc-pink-600: #db2777;
   --dc-pink-600-rgb: 219 39 119;
-  --dc-pink-700: #be185d;
   --dc-pink-700-rgb: 190 24 93;
-  --dc-pink-800: #9d174d;
   --dc-pink-800-rgb: 157 23 77;
-  --dc-pink-900: #831843;
   --dc-pink-900-rgb: 131 24 67;
+  --dc-pink-50: rgb(var(--dc-pink-50));
+  --dc-pink-100: rgb(var(--dc-pink-100-rgb));
+  --dc-pink-200: rgb(var(--dc-pink-200-rgb));
+  --dc-pink-300: rgb(var(--dc-pink-300-rgb));
+  --dc-pink-400: rgb(var(--dc-pink-400-rgb));
+  --dc-pink-500: rgb(var(--dc-pink-500-rgb));
+  --dc-pink-600: rgb(var(--dc-pink-600-rgb));
+  --dc-pink-700: rgb(var(--dc-pink-700-rgb));
+  --dc-pink-800: rgb(var(--dc-pink-800-rgb));
+  --dc-pink-900: rgb(var(--dc-pink-900-rgb));
 
   /* Background */
   --dc-primary-bg: var(--dc-white);
-  --dc-bg-transparent-1: rgb(var(--dc-gray-900-rgb) / 0.05);
-  --dc-bg-transparent-2: rgb(var(--dc-gray-900-rgb) / 0.1);
-  --dc-bg-transparent-3: rgb(var(--dc-gray-900-rgb) / 0.2);
+  --dc-bg-transparent-1: rgb(var(--dc-gray-900-rgb) / 5%);
+  --dc-bg-transparent-2: rgb(var(--dc-gray-900-rgb) / 10%);
+  --dc-bg-transparent-3: rgb(var(--dc-gray-900-rgb) / 20%);
 
   /* Borders */
-  --dc-border-color-transparent-1: rgb(var(--dc-gray-900-rgb) / 0.05);
-  --dc-border-color-transparent-2: rgb(var(--dc-gray-900-rgb) / 0.15);
-  --dc-border-color-transparent-3: rgb(var(--dc-gray-900-rgb) / 0.25);
+  --dc-border-color-transparent-1: rgb(var(--dc-gray-900-rgb) / 5%);
+  --dc-border-color-transparent-2: rgb(var(--dc-gray-900-rgb) / 15%);
+  --dc-border-color-transparent-3: rgb(var(--dc-gray-900-rgb) / 25%);
 
   /* Text */
   --dc-primary-text-color: var(--dc-gray-800);
@@ -256,8 +257,8 @@
   --dc-on-primary-color: var(--dc-white);
 
   /* Secondary */
-  --dc-secondary-color: rgb(var(--dc-blue-500-rgb) / 0.15);
-  --dc-secondary-color-hover: rgb(var(--dc-blue-500-rgb) / 0.3);
+  --dc-secondary-color: rgb(var(--dc-blue-500-rgb) / 15%);
+  --dc-secondary-color-hover: rgb(var(--dc-blue-500-rgb) / 30%);
   --dc-on-secondary-color: var(--dc-blue-600);
 
   /* Accents */
@@ -268,14 +269,14 @@
 
   /* Gray button */
   --dc-button-gray-text-color: var(--dc-gray-800);
-  --dc-button-gray-border-color: rgb(var(--dc-gray-900-rgb) / 0.1);
+  --dc-button-gray-border-color: rgb(var(--dc-gray-900-rgb) / 10%);
   --dc-button-gray-bg: var(--dc-gray-100);
   --dc-button-gray-bg-hover: var(--dc-gray-200);
   --dc-button-gray-tinted-text-color: var(--dc-gray-800);
-  --dc-button-gray-tinted-bg: rgb(var(--dc-gray-900-rgb) / 0.1);
-  --dc-button-gray-tinted-bg-hover: rgb(var(--dc-gray-900-rgb) / 0.2);
+  --dc-button-gray-tinted-bg: rgb(var(--dc-gray-900-rgb) / 10%);
+  --dc-button-gray-tinted-bg-hover: rgb(var(--dc-gray-900-rgb) / 20%);
   --dc-button-gray-plain-text-color: var(--dc-gray-800);
-  --dc-button-gray-plain-bg-hover: rgb(var(--dc-gray-900-rgb) / 0.1);
+  --dc-button-gray-plain-bg-hover: rgb(var(--dc-gray-900-rgb) / 10%);
 
   /* Blue button */
   --dc-button-blue-text-color: var(--dc-white);
@@ -283,10 +284,10 @@
   --dc-button-blue-bg: var(--dc-blue-500);
   --dc-button-blue-bg-hover: var(--dc-blue-600);
   --dc-button-blue-tinted-text-color: var(--dc-blue-600);
-  --dc-button-blue-tinted-bg: rgb(var(--dc-blue-500-rgb) / 0.15);
-  --dc-button-blue-tinted-bg-hover: rgb(var(--dc-blue-500-rgb) / 0.3);
+  --dc-button-blue-tinted-bg: rgb(var(--dc-blue-500-rgb) / 15%);
+  --dc-button-blue-tinted-bg-hover: rgb(var(--dc-blue-500-rgb) / 30%);
   --dc-button-blue-plain-text-color: var(--dc-blue-600);
-  --dc-button-blue-plain-bg-hover: rgb(var(--dc-blue-500-rgb) / 0.15);
+  --dc-button-blue-plain-bg-hover: rgb(var(--dc-blue-500-rgb) / 15%);
 
   /* Red button */
   --dc-button-red-text-color: var(--dc-white);
@@ -294,10 +295,10 @@
   --dc-button-red-bg: var(--dc-red-500);
   --dc-button-red-bg-hover: var(--dc-red-600);
   --dc-button-red-tinted-text-color: var(--dc-red-600);
-  --dc-button-red-tinted-bg: rgb(var(--dc-red-600-rgb) / 0.15);
-  --dc-button-red-tinted-bg-hover: rgb(var(--dc-red-600-rgb) / 0.3);
+  --dc-button-red-tinted-bg: rgb(var(--dc-red-600-rgb) / 15%);
+  --dc-button-red-tinted-bg-hover: rgb(var(--dc-red-600-rgb) / 30%);
   --dc-button-red-plain-text-color: var(--dc-red-600);
-  --dc-button-red-plain-bg-hover: rgb(var(--dc-red-600-rgb) / 0.15);
+  --dc-button-red-plain-bg-hover: rgb(var(--dc-red-600-rgb) / 15%);
 
   /* Green button */
   --dc-button-green-text-color: var(--dc-white);
@@ -305,10 +306,10 @@
   --dc-button-green-bg: var(--dc-green-500);
   --dc-button-green-bg-hover: var(--dc-green-600);
   --dc-button-green-tinted-text-color: var(--dc-green-600);
-  --dc-button-green-tinted-bg: rgb(var(--dc-green-500-rgb) / 0.15);
-  --dc-button-green-tinted-bg-hover: rgb(var(--dc-green-500-rgb) / 0.3);
+  --dc-button-green-tinted-bg: rgb(var(--dc-green-500-rgb) / 15%);
+  --dc-button-green-tinted-bg-hover: rgb(var(--dc-green-500-rgb) / 30%);
   --dc-button-green-plain-text-color: var(--dc-green-600);
-  --dc-button-green-plain-bg-hover: rgb(var(--dc-green-500-rgb) / 0.15);
+  --dc-button-green-plain-bg-hover: rgb(var(--dc-green-500-rgb) / 15%);
 
   /* Controls */
   --dc-control-primary-text-color: var(--dc-gray-800);
@@ -316,31 +317,123 @@
   --dc-control-primary-color: var(--dc-blue-500);
   --dc-control-primary-color-hover: var(--dc-blue-600);
   --dc-control-on-primary-color: var(--dc-white);
-  --dc-control-secondary-color: rgb(var(--dc-blue-500-rgb) / 0.15);
+  --dc-control-secondary-color: rgb(var(--dc-blue-500-rgb) / 15%);
   --dc-control-border-color: var(--dc-gray-300);
   --dc-control-bg: var(--dc-white);
-  --dc-control-bg-inset: rgb(var(--dc-gray-900-rgb) / 0.15);
+  --dc-control-bg-inset: rgb(var(--dc-gray-900-rgb) / 15%);
   --dc-control-error-color: var(--dc-red-500);
-  --dc-focus-ring-color: rgb(var(--dc-blue-500-rgb) / 0.7);
+  --dc-focus-ring-color: rgb(var(--dc-blue-500-rgb) / 70%);
   --dc-disabled-state-opacity: 0.5;
 
   /* Shadows */
+
   /* https://tailwindcss.com/docs/box-shadow */
-  --dc-shadow-sm: 0 1px 2px 0 rgb(var(--dc-black-rgb) / 0.05);
+  --dc-shadow-sm: 0 1px 2px 0 rgb(var(--dc-black-rgb) / 5%);
   --dc-shadow:
-    0 1px 3px 0 rgb(var(--dc-black-rgb) / 0.1),
-    0 1px 2px -1px rgb(var(--dc-black-rgb) / 0.1);
+    0 1px 3px 0 rgb(var(--dc-black-rgb) / 10%),
+    0 1px 2px -1px rgb(var(--dc-black-rgb) / 10%);
   --dc-shadow-md:
-    0 4px 6px -1px rgb(var(--dc-black-rgb) / 0.1),
-    0 2px 4px -2px rgb(var(--dc-black-rgb) / 0.1);
+    0 4px 6px -1px rgb(var(--dc-black-rgb) / 10%),
+    0 2px 4px -2px rgb(var(--dc-black-rgb) / 10%);
   --dc-shadow-lg:
-    0 10px 15px -3px rgb(var(--dc-black-rgb) / 0.1),
-    0 4px 6px -4px rgb(var(--dc-black-rgb) / 0.1);
+    0 10px 15px -3px rgb(var(--dc-black-rgb) / 10%),
+    0 4px 6px -4px rgb(var(--dc-black-rgb) / 10%);
   --dc-shadow-xl:
-    0 20px 25px -5px rgb(var(--dc-black-rgb) / 0.1),
-    0 8px 10px -6px rgb(var(--dc-black-rgb) / 0.1);
-  --dc-shadow-2xl: 0 25px 50px -12px rgb(var(--dc-black-rgb) / 0.25);
-  --dc-shadow-inner: inset 0 2px 4px 0 rgb(var(--dc-black-rgb) / 0.05);
+    0 20px 25px -5px rgb(var(--dc-black-rgb) / 10%),
+    0 8px 10px -6px rgb(var(--dc-black-rgb) / 10%);
+  --dc-shadow-2xl: 0 25px 50px -12px rgb(var(--dc-black-rgb) / 25%);
+  --dc-shadow-inner: inset 0 2px 4px 0 rgb(var(--dc-black-rgb) / 5%);
+}
+
+.dark {
+  /* Background */
+  --dc-primary-bg: var(--dc-gray-900);
+  --dc-bg-transparent-1: rgb(var(--dc-gray-50-rgb) / 10%);
+  --dc-bg-transparent-2: rgb(var(--dc-gray-50-rgb) / 15%);
+  --dc-bg-transparent-3: rgb(var(--dc-gray-50-rgb) / 25%);
+
+  /* Borders */
+  --dc-border-color-transparent-1: rgb(var(--dc-gray-50-rgb) / 10%);
+  --dc-border-color-transparent-2: rgb(var(--dc-gray-50-rgb) / 20%);
+  --dc-border-color-transparent-3: rgb(var(--dc-gray-50-rgb) / 30%);
+
+  /* Text */
+  --dc-primary-text-color: var(--dc-gray-100);
+  --dc-secondary-text-color: var(--dc-gray-400);
+  --dc-tertiary-text-color: var(--dc-gray-600);
+
+  /* Primary */
+  --dc-primary-color: var(--dc-blue-600);
+  --dc-primary-color-hover: var(--dc-blue-500);
+  --dc-on-primary-color: var(--dc-white);
+
+  /* Secondary */
+  --dc-secondary-color: rgb(var(--dc-blue-400-rgb) / 15%);
+  --dc-secondary-color-hover: rgb(var(--dc-blue-400-rgb) / 30%);
+  --dc-on-secondary-color: var(--dc-blue-400);
+
+  /* Accents */
+  --dc-info-text-color: var(--dc-blue-400);
+  --dc-success-text-color: var(--dc-green-400);
+  --dc-error-text-color: var(--dc-red-400);
+  --dc-warning-text-color: var(--dc-orange-400);
+
+  /* Gray button */
+  --dc-button-gray-text-color: var(--dc-gray-100);
+  --dc-button-gray-border-color: rgb(var(--dc-gray-50-rgb) / 10%);
+  --dc-button-gray-bg: var(--dc-gray-700);
+  --dc-button-gray-bg-hover: var(--dc-gray-600);
+  --dc-button-gray-tinted-text-color: var(--dc-gray-100);
+  --dc-button-gray-tinted-bg: rgb(var(--dc-gray-50-rgb) / 10%);
+  --dc-button-gray-tinted-bg-hover: rgb(var(--dc-gray-50-rgb) / 20%);
+  --dc-button-gray-plain-text-color: var(--dc-gray-100);
+  --dc-button-gray-plain-bg-hover: rgb(var(--dc-gray-50-rgb) / 10%);
+
+  /* Blue button */
+  --dc-button-blue-text-color: var(--dc-white);
+  --dc-button-blue-border-color: transparent;
+  --dc-button-blue-bg: var(--dc-blue-600);
+  --dc-button-blue-bg-hover: var(--dc-blue-500);
+  --dc-button-blue-tinted-text-color: var(--dc-blue-400);
+  --dc-button-blue-tinted-bg: rgb(var(--dc-blue-400-rgb) / 15%);
+  --dc-button-blue-tinted-bg-hover: rgb(var(--dc-blue-400-rgb) / 30%);
+  --dc-button-blue-plain-text-color: var(--dc-blue-400);
+  --dc-button-blue-plain-bg-hover: rgb(var(--dc-blue-400-rgb) / 15%);
+
+  /* Red button */
+  --dc-button-red-text-color: var(--dc-white);
+  --dc-button-red-border-color: transparent;
+  --dc-button-red-bg: var(--dc-red-600);
+  --dc-button-red-bg-hover: var(--dc-red-500);
+  --dc-button-red-tinted-text-color: var(--dc-red-400);
+  --dc-button-red-tinted-bg: rgb(var(--dc-red-400-rgb) / 15%);
+  --dc-button-red-tinted-bg-hover: rgb(var(--dc-red-400-rgb) / 30%);
+  --dc-button-red-plain-text-color: var(--dc-red-400);
+  --dc-button-red-plain-bg-hover: rgb(var(--dc-red-400-rgb) / 15%);
+
+  /* Green button */
+  --dc-button-green-text-color: var(--dc-white);
+  --dc-button-green-border-color: transparent;
+  --dc-button-green-bg: var(--dc-green-600);
+  --dc-button-green-bg-hover: var(--dc-green-500);
+  --dc-button-green-tinted-text-color: var(--dc-green-400);
+  --dc-button-green-tinted-bg: rgb(var(--dc-green-400-rgb) / 15%);
+  --dc-button-green-tinted-bg-hover: rgb(var(--dc-green-400-rgb) / 30%);
+  --dc-button-green-plain-text-color: var(--dc-green-400);
+  --dc-button-green-plain-bg-hover: rgb(var(--dc-green-400-rgb) / 15%);
+
+  /* Controls */
+  --dc-control-primary-text-color: var(--dc-gray-100);
+  --dc-control-secondary-text-color: var(--dc-gray-400);
+  --dc-control-primary-color: var(--dc-blue-600);
+  --dc-control-primary-color-hover: var(--dc-blue-500);
+  --dc-control-on-primary-color: var(--dc-white);
+  --dc-control-secondary-color: rgb(var(--dc-blue-400-rgb) / 15%);
+  --dc-control-border-color: var(--dc-gray-600);
+  --dc-control-bg: var(--dc-gray-800);
+  --dc-control-bg-inset: rgb(var(--dc-gray-50-rgb) / 25%);
+  --dc-control-error-color: var(--dc-red-400);
+  --dc-focus-ring-color: rgb(var(--dc-blue-400-rgb) / 70%);
 }
 
 /* Elements */
@@ -350,18 +443,18 @@
   --dc-badge-text-color: var(--dc-primary-text-color);
   --dc-badge-bg: var(--dc-bg-transparent-2);
 
-  color-scheme: light;
-  font: 12px/1 var(--dc-primary-font);
-  color: var(--dc-badge-text-color);
   display: inline-flex;
   flex-shrink: 0;
   align-items: center;
   justify-content: center;
-  height: var(--dc-badge-height);
   min-width: var(--dc-badge-height);
+  height: var(--dc-badge-height);
   padding: 0 6px;
-  border-radius: calc(var(--dc-badge-height) / 2);
+  font: 12px/1 var(--dc-primary-font);
+  color: var(--dc-badge-text-color);
+  color-scheme: light;
   background: var(--dc-badge-bg);
+  border-radius: calc(var(--dc-badge-height) / 2);
 }
 
 .dc-badge_circle {
@@ -369,21 +462,26 @@
   padding-left: 0;
 }
 
+.dark .dc-counter,
+.dark.dc-counter {
+  color-scheme: dark;
+}
+
 .dc-tag {
   --dc-tag-text-color: var(--dc-gray-700);
-  --dc-tag-border-color: rgb(var(--dc-gray-700-rgb) / 0.2);
-  --dc-tag-bg: rgb(var(--dc-gray-300-rgb) / 0.1);
+  --dc-tag-border-color: rgb(var(--dc-gray-700-rgb) / 20%);
+  --dc-tag-bg: rgb(var(--dc-gray-300-rgb) / 10%);
 
-  color-scheme: light;
-  font: 400 14px/16px var(--dc-primary-font);
-  color: var(--dc-tag-text-color);
+  box-sizing: border-box;
   display: inline-flex;
   flex-shrink: 0;
   align-items: center;
-  box-sizing: border-box;
   padding: 4px 10px;
-  border-radius: 6px;
+  font: 400 14px/16px var(--dc-primary-font);
+  color: var(--dc-tag-text-color);
+  color-scheme: light;
   background: var(--dc-tag-bg);
+  border-radius: 6px;
   box-shadow: inset 0 0 0 1px var(--dc-tag-border-color);
 }
 
@@ -396,7 +494,7 @@
 .dc-tag_tinted {
   --dc-tag-text-color: var(--dc-gray-900);
   --dc-tag-border-color: transparent;
-  --dc-tag-bg: rgb(var(--dc-gray-300-rgb) / 0.4);
+  --dc-tag-bg: rgb(var(--dc-gray-300-rgb) / 40%);
 }
 
 .dc-tag_rounded {
@@ -404,9 +502,9 @@
 }
 
 .dc-tag_sm {
+  padding: 2px 8px;
   font-size: 13px;
   line-height: 16px;
-  padding: 2px 8px;
   border-radius: 5px;
 }
 
@@ -415,9 +513,9 @@
 }
 
 .dc-tag_lg {
+  padding: 4px 12px;
   font-size: 15px;
   line-height: 20px;
-  padding: 4px 12px;
   border-radius: 7px;
 }
 
@@ -427,8 +525,8 @@
 
 .dc-tag_green {
   --dc-tag-text-color: var(--dc-green-800);
-  --dc-tag-border-color: rgb(var(--dc-green-700-rgb) / 0.2);
-  --dc-tag-bg: rgb(var(--dc-green-300-rgb) / 0.1);
+  --dc-tag-border-color: rgb(var(--dc-green-700-rgb) / 20%);
+  --dc-tag-bg: rgb(var(--dc-green-300-rgb) / 10%);
 }
 
 .dc-tag_green.dc-tag_filled {
@@ -440,13 +538,13 @@
 .dc-tag_green.dc-tag_tinted {
   --dc-tag-text-color: var(--dc-green-900);
   --dc-tag-border-color: transparent;
-  --dc-tag-bg: rgb(var(--dc-green-300-rgb) / 0.4);
+  --dc-tag-bg: rgb(var(--dc-green-300-rgb) / 40%);
 }
 
 .dc-tag_cyan {
   --dc-tag-text-color: var(--dc-sky-700);
-  --dc-tag-border-color: rgb(var(--dc-sky-700-rgb) / 0.2);
-  --dc-tag-bg: rgb(var(--dc-sky-300-rgb) / 0.1);
+  --dc-tag-border-color: rgb(var(--dc-sky-700-rgb) / 20%);
+  --dc-tag-bg: rgb(var(--dc-sky-300-rgb) / 10%);
 }
 
 .dc-tag_cyan.dc-tag_filled {
@@ -458,13 +556,13 @@
 .dc-tag_cyan.dc-tag_tinted {
   --dc-tag-text-color: var(--dc-sky-900);
   --dc-tag-border-color: transparent;
-  --dc-tag-bg: rgb(var(--dc-sky-300-rgb) / 0.4);
+  --dc-tag-bg: rgb(var(--dc-sky-300-rgb) / 40%);
 }
 
 .dc-tag_blue {
   --dc-tag-text-color: var(--dc-blue-800);
-  --dc-tag-border-color: rgb(var(--dc-blue-700-rgb) / 0.2);
-  --dc-tag-bg: rgb(var(--dc-blue-300-rgb) / 0.1);
+  --dc-tag-border-color: rgb(var(--dc-blue-700-rgb) / 20%);
+  --dc-tag-bg: rgb(var(--dc-blue-300-rgb) / 10%);
 }
 
 .dc-tag_blue.dc-tag_filled {
@@ -476,13 +574,13 @@
 .dc-tag_blue.dc-tag_tinted {
   --dc-tag-text-color: var(--dc-blue-900);
   --dc-tag-border-color: transparent;
-  --dc-tag-bg: rgb(var(--dc-blue-300-rgb) / 0.4);
+  --dc-tag-bg: rgb(var(--dc-blue-300-rgb) / 40%);
 }
 
 .dc-tag_purple {
   --dc-tag-text-color: var(--dc-violet-800);
-  --dc-tag-border-color: rgb(var(--dc-violet-700-rgb) / 0.2);
-  --dc-tag-bg: rgb(var(--dc-violet-300-rgb) / 0.1);
+  --dc-tag-border-color: rgb(var(--dc-violet-700-rgb) / 20%);
+  --dc-tag-bg: rgb(var(--dc-violet-300-rgb) / 10%);
 }
 
 .dc-tag_purple.dc-tag_filled {
@@ -494,13 +592,13 @@
 .dc-tag_purple.dc-tag_tinted {
   --dc-tag-text-color: var(--dc-violet-900);
   --dc-tag-border-color: transparent;
-  --dc-tag-bg: rgb(var(--dc-violet-300-rgb) / 0.4);
+  --dc-tag-bg: rgb(var(--dc-violet-300-rgb) / 40%);
 }
 
 .dc-tag_pink {
   --dc-tag-text-color: var(--dc-pink-700);
-  --dc-tag-border-color: rgb(var(--dc-pink-700-rgb) / 0.2);
-  --dc-tag-bg: rgb(var(--dc-pink-300-rgb) / 0.1);
+  --dc-tag-border-color: rgb(var(--dc-pink-700-rgb) / 20%);
+  --dc-tag-bg: rgb(var(--dc-pink-300-rgb) / 10%);
 }
 
 .dc-tag_pink.dc-tag_filled {
@@ -512,13 +610,13 @@
 .dc-tag_pink.dc-tag_tinted {
   --dc-tag-text-color: var(--dc-pink-900);
   --dc-tag-border-color: transparent;
-  --dc-tag-bg: rgb(var(--dc-pink-300-rgb) / 0.4);
+  --dc-tag-bg: rgb(var(--dc-pink-300-rgb) / 40%);
 }
 
 .dc-tag_red {
   --dc-tag-text-color: var(--dc-red-700);
-  --dc-tag-border-color: rgb(var(--dc-red-700-rgb) / 0.2);
-  --dc-tag-bg: rgb(var(--dc-red-300-rgb) / 0.1);
+  --dc-tag-border-color: rgb(var(--dc-red-700-rgb) / 20%);
+  --dc-tag-bg: rgb(var(--dc-red-300-rgb) / 10%);
 }
 
 .dc-tag_red.dc-tag_filled {
@@ -530,13 +628,13 @@
 .dc-tag_red.dc-tag_tinted {
   --dc-tag-text-color: var(--dc-red-900);
   --dc-tag-border-color: transparent;
-  --dc-tag-bg: rgb(var(--dc-red-300-rgb) / 0.4);
+  --dc-tag-bg: rgb(var(--dc-red-300-rgb) / 40%);
 }
 
 .dc-tag_orange {
   --dc-tag-text-color: var(--dc-orange-700);
-  --dc-tag-border-color: rgb(var(--dc-orange-700-rgb) / 0.2);
-  --dc-tag-bg: rgb(var(--dc-orange-300-rgb) / 0.1);
+  --dc-tag-border-color: rgb(var(--dc-orange-700-rgb) / 20%);
+  --dc-tag-bg: rgb(var(--dc-orange-300-rgb) / 10%);
 }
 
 .dc-tag_orange.dc-tag_filled {
@@ -548,13 +646,13 @@
 .dc-tag_orange.dc-tag_tinted {
   --dc-tag-text-color: var(--dc-orange-900);
   --dc-tag-border-color: transparent;
-  --dc-tag-bg: rgb(var(--dc-orange-300-rgb) / 0.4);
+  --dc-tag-bg: rgb(var(--dc-orange-300-rgb) / 40%);
 }
 
 .dc-tag_yellow {
   --dc-tag-text-color: var(--dc-yellow-800);
-  --dc-tag-border-color: rgb(var(--dc-yellow-700-rgb) / 0.2);
-  --dc-tag-bg: rgb(var(--dc-yellow-300-rgb) / 0.1);
+  --dc-tag-border-color: rgb(var(--dc-yellow-700-rgb) / 20%);
+  --dc-tag-bg: rgb(var(--dc-yellow-300-rgb) / 10%);
 }
 
 .dc-tag_yellow.dc-tag_filled {
@@ -566,7 +664,198 @@
 .dc-tag_yellow.dc-tag_tinted {
   --dc-tag-text-color: var(--dc-yellow-900);
   --dc-tag-border-color: transparent;
-  --dc-tag-bg: rgb(var(--dc-yellow-300-rgb) / 0.4);
+  --dc-tag-bg: rgb(var(--dc-yellow-300-rgb) / 40%);
+}
+
+.dark .dc-tag,
+.dark.dc-tag {
+  --dc-tag-text-color: var(--dc-gray-300);
+  --dc-tag-border-color: rgb(var(--dc-gray-200-rgb) / 20%);
+  --dc-tag-bg: rgb(var(--dc-gray-400-rgb) / 10%);
+
+  color-scheme: dark;
+}
+
+.dark .dc-tag_filled,
+.dark.dc-tag_filled {
+  --dc-tag-text-color: var(--dc-gray-800);
+  --dc-tag-border-color: transparent;
+  --dc-tag-bg: var(--dc-gray-300);
+}
+
+.dark .dc-tag_tinted,
+.dark.dc-tag_tinted {
+  --dc-tag-text-color: var(--dc-gray-50);
+  --dc-tag-border-color: transparent;
+  --dc-tag-bg: rgb(var(--dc-gray-400-rgb) / 40%);
+}
+
+.dark .dc-tag_green,
+.dark.dc-tag_green {
+  --dc-tag-text-color: var(--dc-green-400);
+  --dc-tag-border-color: rgb(var(--dc-green-200-rgb) / 20%);
+  --dc-tag-bg: rgb(var(--dc-green-400-rgb) / 10%);
+}
+
+.dark.dc-tag_green.dc-tag_filled,
+.dark .dc-tag_green.dc-tag_filled {
+  --dc-tag-text-color: var(--dc-white);
+  --dc-tag-border-color: transparent;
+  --dc-tag-bg: var(--dc-green-600);
+}
+
+.dark .dc-tag_green.dc-tag_tinted,
+.dark.dc-tag_green.dc-tag_tinted {
+  --dc-tag-text-color: var(--dc-green-50);
+  --dc-tag-border-color: transparent;
+  --dc-tag-bg: rgb(var(--dc-green-400-rgb) / 50%);
+}
+
+.dark .dc-tag_cyan,
+.dark.dc-tag_cyan {
+  --dc-tag-text-color: var(--dc-sky-400);
+  --dc-tag-border-color: rgb(var(--dc-sky-200-rgb) / 20%);
+  --dc-tag-bg: rgb(var(--dc-sky-400-rgb) / 10%);
+}
+
+.dark .dc-tag_cyan.dc-tag_filled,
+.dark.dc-tag_cyan.dc-tag_filled {
+  --dc-tag-text-color: var(--dc-white);
+  --dc-tag-border-color: transparent;
+  --dc-tag-bg: var(--dc-sky-600);
+}
+
+.dark .dc-tag_cyan.dc-tag_tinted,
+.dark.dc-tag_cyan.dc-tag_tinted {
+  --dc-tag-text-color: var(--dc-sky-50);
+  --dc-tag-border-color: transparent;
+  --dc-tag-bg: rgb(var(--dc-sky-400-rgb) / 50%);
+}
+
+.dark .dc-tag_blue,
+.dark.dc-tag_blue {
+  --dc-tag-text-color: var(--dc-blue-400);
+  --dc-tag-border-color: rgb(var(--dc-blue-200-rgb) / 20%);
+  --dc-tag-bg: rgb(var(--dc-blue-400-rgb) / 10%);
+}
+
+.dark .dc-tag_blue.dc-tag_filled,
+.dark.dc-tag_blue.dc-tag_filled {
+  --dc-tag-text-color: var(--dc-white);
+  --dc-tag-border-color: transparent;
+  --dc-tag-bg: var(--dc-blue-600);
+}
+
+.dark .dc-tag_blue.dc-tag_tinted,
+.dark.dc-tag_blue.dc-tag_tinted {
+  --dc-tag-text-color: var(--dc-blue-50);
+  --dc-tag-border-color: transparent;
+  --dc-tag-bg: rgb(var(--dc-blue-400-rgb) / 50%);
+}
+
+.dark .dc-tag_purple,
+.dark.dc-tag_purple {
+  --dc-tag-text-color: var(--dc-violet-400);
+  --dc-tag-border-color: rgb(var(--dc-violet-200-rgb) / 20%);
+  --dc-tag-bg: rgb(var(--dc-violet-400-rgb) / 10%);
+}
+
+.dark .dc-tag_purple.dc-tag_filled,
+.dark.dc-tag_purple.dc-tag_filled {
+  --dc-tag-text-color: var(--dc-white);
+  --dc-tag-border-color: transparent;
+  --dc-tag-bg: var(--dc-violet-600);
+}
+
+.dark .dc-tag_purple.dc-tag_tinted,
+.dark.dc-tag_purple.dc-tag_tinted {
+  --dc-tag-text-color: var(--dc-violet-50);
+  --dc-tag-border-color: transparent;
+  --dc-tag-bg: rgb(var(--dc-violet-400-rgb) / 50%);
+}
+
+.dark.dc-tag_pink,
+.dark .dc-tag_pink {
+  --dc-tag-text-color: var(--dc-pink-400);
+  --dc-tag-border-color: rgb(var(--dc-pink-200-rgb) / 20%);
+  --dc-tag-bg: rgb(var(--dc-pink-400-rgb) / 10%);
+}
+
+.dark .dc-tag_pink.dc-tag_filled,
+.dark.dc-tag_pink.dc-tag_filled {
+  --dc-tag-text-color: var(--dc-white);
+  --dc-tag-border-color: transparent;
+  --dc-tag-bg: var(--dc-pink-600);
+}
+
+.dark .dc-tag_pink.dc-tag_tinted,
+.dark.dc-tag_pink.dc-tag_tinted {
+  --dc-tag-text-color: var(--dc-pink-50);
+  --dc-tag-border-color: transparent;
+  --dc-tag-bg: rgb(var(--dc-pink-400-rgb) / 50%);
+}
+
+.dark .dc-tag_red,
+.dark.dc-tag_red {
+  --dc-tag-text-color: var(--dc-red-400);
+  --dc-tag-border-color: rgb(var(--dc-red-200-rgb) / 20%);
+  --dc-tag-bg: rgb(var(--dc-red-400-rgb) / 10%);
+}
+
+.dark .dc-tag_red.dc-tag_filled,
+.dark.dc-tag_red.dc-tag_filled {
+  --dc-tag-text-color: var(--dc-white);
+  --dc-tag-border-color: transparent;
+  --dc-tag-bg: var(--dc-red-500);
+}
+
+.dark .dc-tag_red.dc-tag_tinted,
+.dark.dc-tag_red.dc-tag_tinted {
+  --dc-tag-text-color: var(--dc-red-50);
+  --dc-tag-border-color: transparent;
+  --dc-tag-bg: rgb(var(--dc-red-400-rgb) / 50%);
+}
+
+.dark .dc-tag_orange,
+.dark.dc-tag_orange {
+  --dc-tag-text-color: var(--dc-orange-500);
+  --dc-tag-border-color: rgb(var(--dc-orange-200-rgb) / 20%);
+  --dc-tag-bg: rgb(var(--dc-orange-400-rgb) / 10%);
+}
+
+.dark .dc-tag_orange.dc-tag_filled,
+.dark.dc-tag_orange.dc-tag_filled {
+  --dc-tag-text-color: var(--dc-white);
+  --dc-tag-border-color: transparent;
+  --dc-tag-bg: var(--dc-orange-500);
+}
+
+.dark .dc-tag_orange.dc-tag_tinted,
+.dark.dc-tag_orange.dc-tag_tinted {
+  --dc-tag-text-color: var(--dc-orange-50);
+  --dc-tag-border-color: transparent;
+  --dc-tag-bg: rgb(var(--dc-orange-400-rgb) / 50%);
+}
+
+.dark .dc-tag_yellow,
+.dark.dc-tag_yellow {
+  --dc-tag-text-color: var(--dc-yellow-500);
+  --dc-tag-border-color: rgb(var(--dc-yellow-200-rgb) / 20%);
+  --dc-tag-bg: rgb(var(--dc-yellow-400-rgb) / 10%);
+}
+
+.dark .dc-tag_yellow.dc-tag_filled,
+.dark.dc-tag_yellow.dc-tag_filled {
+  --dc-tag-text-color: var(--dc-yellow-900);
+  --dc-tag-border-color: transparent;
+  --dc-tag-bg: var(--dc-yellow-400);
+}
+
+.dark .dc-tag_yellow.dc-tag_tinted,
+.dark.dc-tag_yellow.dc-tag_tinted {
+  --dc-tag-text-color: var(--dc-yellow-50);
+  --dc-tag-border-color: transparent;
+  --dc-tag-bg: rgb(var(--dc-yellow-400-rgb) / 50%);
 }
 
 .dc-avatar {
@@ -574,7 +863,7 @@
   --dc-avatar-silhouette-color: var(--dc-white);
   --dc-avatar-bg-color-1: #94a3b8;
   --dc-avatar-bg-color-2: #64748b;
-  --dc-avatar-border-color: rgb(var(--dc-black-rgb) / 0.025);
+  --dc-avatar-border-color: rgb(var(--dc-black-rgb) / 2.5%);
 
   -webkit-user-select: none;
 
@@ -584,7 +873,7 @@
 }
 
 .dc-avatar_type_image {
-  --dc-avatar-border-color: rgb(var(--dc-black-rgb) / 0.1);
+  --dc-avatar-border-color: rgb(var(--dc-black-rgb) / 10%);
 }
 
 .dc-avatar_fill_pink {
@@ -649,6 +938,18 @@
   stroke: var(--dc-avatar-border-color);
 }
 
+.dark .dc-avatar,
+.dark.dc-avatar {
+  --dc-avatar-border-color: rgb(var(--dc-white-rgb) / 2.5%);
+
+  color-scheme: dark;
+}
+
+.dark .dc-avatar_type_image,
+.dark.dc-avatar_type_image {
+  --dc-avatar-border-color: rgb(var(--dc-white-rgb) / 10%);
+}
+
 .dc-button {
   --dc-button-height: 36px;
   --dc-button-radius: 9px;
@@ -658,35 +959,38 @@
   --dc-button-bg-hover: var(--dc-button-gray-bg-hover);
   --dc-button-focus-ring-color: var(--dc-focus-ring-color);
 
-  -webkit-appearance: none;
-
-     -moz-appearance: none;
-
-          appearance: none;
-  color-scheme: light;
-  font: 500 var(--dc-text-sm);
-  color: var(--dc-button-text-color);
   position: relative;
+  box-sizing: border-box;
   display: inline-grid;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
   grid-template-columns: 1fr;
   grid-column-gap: 0.5em;
   place-items: center;
   justify-content: center;
-  box-sizing: border-box;
   height: var(--dc-button-height);
   padding: 0 16px;
-  transition-duration: 0.2s;
-  transition-property: color, background-color;
+  font: 500 var(--dc-text-sm);
+  color: var(--dc-button-text-color);
   text-align: center;
-  white-space: nowrap;
   text-decoration: none;
   text-transform: none;
+  white-space: nowrap;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  color-scheme: light;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  background: var(--dc-button-bg);
   border: 1px solid var(--dc-button-border-color);
   border-radius: var(--dc-button-radius);
-  background: var(--dc-button-bg);
+  transition-duration: 0.2s;
+  transition-property: color, background-color;
+}
+
+.dark .dc-button,
+.dark.dc-button {
+  color-scheme: dark;
 }
 
 .dc-button:focus {
@@ -694,10 +998,10 @@
 }
 
 .dc-button:focus::after {
-  content: "";
   position: absolute;
   inset: -3px;
   pointer-events: none;
+  content: "";
   border-radius: calc(3px + var(--dc-button-radius));
   box-shadow: 0 0 0 3px var(--dc-button-focus-ring-color);
 }
@@ -716,25 +1020,29 @@
   content: none;
 }
 
-.dc-button:not(.dc-button_loading):disabled {
+.dc-button:disabled {
   opacity: var(--dc-disabled-state-opacity);
 }
 
-.dc-button:not(.dc-button_loading, :disabled):hover {
+.dc-button:hover:not(:disabled) {
   cursor: pointer;
   background: var(--dc-button-bg-hover);
 }
 
-.dc-button_loading {
-  cursor: default;
-}
-
 .dc-button_loading,
 .dc-button_has_icon-left,
 .dc-button_has_icon-right {
   grid-template-columns: repeat(2, auto);
 }
 
+.dc-button_loading {
+  cursor: default;
+}
+
+.dc-button_loading:disabled {
+  opacity: initial;
+}
+
 .dc-button_loading.dc-button_has_icon-right,
 .dc-button_has_icon-left.dc-button_has_icon-right {
   grid-template-columns: repeat(3, auto);
@@ -753,8 +1061,8 @@
   --dc-button-text-color: var(--dc-button-gray-plain-text-color);
   --dc-button-bg-hover: var(--dc-button-gray-plain-bg-hover);
 
-  border-color: transparent;
   background: transparent;
+  border-color: transparent;
   box-shadow: none;
 }
 
@@ -762,36 +1070,36 @@
   --dc-button-height: 28px;
   --dc-button-radius: 7px;
 
-  font: 500 var(--dc-text-xs);
   padding-right: 8px;
   padding-left: 8px;
+  font: 500 var(--dc-text-xs);
 }
 
 .dc-button_sm {
   --dc-button-height: 32px;
   --dc-button-radius: 8px;
 
-  font: 500 var(--dc-text-sm);
   padding-right: 12px;
   padding-left: 12px;
+  font: 500 var(--dc-text-sm);
 }
 
 .dc-button_lg {
   --dc-button-height: 40px;
   --dc-button-radius: 10px;
 
-  font: 500 var(--dc-text-md);
   padding-right: 18px;
   padding-left: 18px;
+  font: 500 var(--dc-text-md);
 }
 
 .dc-button_xl {
   --dc-button-height: 44px;
   --dc-button-radius: 11px;
 
-  font: 500 var(--dc-text-md);
   padding-right: 20px;
   padding-left: 20px;
+  font: 500 var(--dc-text-md);
 }
 
 .dc-button_tint_blue.dc-button_style_filled {
@@ -854,11 +1162,11 @@
 }
 
 .dc-button__caption {
+  display: block;
+  margin-top: 2px;
   font-size: 11px;
   font-weight: 400;
   line-height: 1;
-  display: block;
-  margin-top: 2px;
 }
 
 .dc-button_xs .dc-button__label {
@@ -885,9 +1193,9 @@
 }
 
 .dc-button-group {
-  color-scheme: light;
   display: inline-flex;
   align-items: center;
+  color-scheme: light;
 }
 
 .dc-button-group > .dc-button:focus::after {
@@ -907,6 +1215,11 @@
   border-bottom-right-radius: 0;
 }
 
+.dark .dc-button-group,
+.dark.dc-button-group {
+  color-scheme: dark;
+}
+
 @keyframes dc-spinner-rotate {
   0% {
     transform: rotate(0deg);
@@ -940,9 +1253,14 @@
 }
 
 .dc-spinner circle {
+  stroke-linecap: round;
   transition: color 0.2s;
   animation: dc-spinner-dash-animation 1.5s ease-in-out infinite;
-  stroke-linecap: round;
+}
+
+.dark .dc-spinner,
+.dark.dc-spinner {
+  color-scheme: dark;
 }
 
 /* Overlays */
@@ -952,16 +1270,16 @@
   --dc-tooltip-bg: var(--dc-gray-700);
   --dc-tooltip-transition-duration: 100ms;
 
-  color-scheme: light;
-  font: var(--dc-text-xs);
-  color: var(--dc-tooltip-text-color);
-  z-index: var(--dc-overlay-z-index);
   top: 0;
   left: 0;
+  z-index: var(--dc-overlay-z-index);
   box-sizing: border-box;
   padding: 4px 8px;
-  border-radius: 6px;
+  font: var(--dc-text-xs);
+  color: var(--dc-tooltip-text-color);
+  color-scheme: light;
   background: var(--dc-tooltip-bg);
+  border-radius: 6px;
   box-shadow: var(--dc-shadow-md);
 }
 
@@ -974,39 +1292,47 @@
   opacity: 1;
 }
 
+.dark .dc-tooltip,
+.dark.dc-tooltip {
+  --dc-tooltip-text-color: var(--dc-gray-800);
+  --dc-tooltip-bg: var(--dc-gray-100);
+
+  color-scheme: dark;
+}
+
 .dc-popover {
   --dc-popover-text-color: var(--dc-primary-text-color);
   --dc-popover-transition-duration: 100ms;
   --dc-popover-bg: white;
   --dc-popover-shadow:
-    0 0 0 1px rgb(var(--dc-black-rgb) / 0.075),
-    0 -1px 0 0 rgb(var(--dc-black-rgb) / 0.05),
+    0 0 0 1px rgb(var(--dc-black-rgb) / 7.5%),
+    0 -1px 0 0 rgb(var(--dc-black-rgb) / 5%),
     var(--dc-shadow-lg);
 
-  color-scheme: light;
-  z-index: var(--dc-overlay-z-index);
   top: 0;
   left: 0;
+  z-index: var(--dc-overlay-z-index);
   box-sizing: border-box;
   padding: 1px;
+  color-scheme: light;
 }
 
 .dc-popover-modal {
-  font: var(--dc-text-sm);
-  color: var(--dc-popover-text-color);
   box-sizing: border-box;
   max-width: 448px;
   padding: 12px 16px;
-  border-radius: 8px;
+  font: var(--dc-text-sm);
+  color: var(--dc-popover-text-color);
   background: var(--dc-popover-bg);
+  border-radius: 8px;
   box-shadow: var(--dc-popover-shadow);
 }
 
 .dc-popover_closed .dc-popover-modal {
   opacity: 0;
-  transform: scale(0.95);
   transition: var(--dc-popover-transition-duration) ease;
   transition-property: opacity, transform;
+  transform: scale(0.95);
 }
 
 .dc-popover_opened .dc-popover-modal {
@@ -1062,6 +1388,17 @@
   transform-origin: right bottom;
 }
 
+.dark .dc-popover,
+.dark.dc-popover {
+  --dc-popover-border-color: var(--dc-gray-700);
+  --dc-popover-bg: var(--dc-gray-800);
+  --dc-popover-shadow:
+    0 0 0 1px var(--dc-gray-700),
+    var(--dc-shadow-lg);
+
+  color-scheme: dark;
+}
+
 .dc-dialog {
   --dc-dialog-max-width: 480px;
   --dc-dialog-safe-area: 16px;
@@ -1073,20 +1410,20 @@
   --dc-dialog-border-color: transparent;
   --dc-dialog-bg: var(--dc-primary-bg);
   --dc-dialog-divider-color: var(--dc-border-color-transparent-2);
-  --dc-dialog-backdrop-color: rgb(var(--dc-gray-900-rgb) / 0.4);
+  --dc-dialog-backdrop-color: rgb(var(--dc-gray-900-rgb) / 40%);
 
-  color-scheme: light;
   position: fixed;
-  z-index: var(--dc-overlay-z-index);
   top: 0;
   left: 0;
+  z-index: var(--dc-overlay-z-index);
+  box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;
-  box-sizing: border-box;
   width: 100%;
   height: 100%;
   padding: var(--dc-dialog-viewport-gap);
+  color-scheme: light;
 }
 
 .dc-dialog__backdrop {
@@ -1096,17 +1433,17 @@
 }
 
 .dc-dialog__modal {
-  font: var(--dc-text-sm);
-  color: var(--dc-dialog-text-color);
   position: relative;
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  box-sizing: border-box;
   width: 480px;
   max-width: 100%;
   max-height: 100%;
-  border-radius: 12px;
+  font: var(--dc-text-sm);
+  color: var(--dc-dialog-text-color);
   background: var(--dc-dialog-bg);
+  border-radius: 12px;
   box-shadow: var(--dc-shadow-xl);
 }
 
@@ -1125,11 +1462,11 @@
 }
 
 .dc-dialog-header {
-  font: var(--dc-text-sm);
   display: grid;
   grid-template-columns: 1fr auto;
   grid-gap: 4px;
   align-items: center;
+  font: var(--dc-text-sm);
 }
 
 .dc-dialog-header_has_divider {
@@ -1137,9 +1474,9 @@
 }
 
 .dc-dialog-header__title {
-  font: 700 var(--dc-text-md);
   grid-column: 1 / 2;
   margin: 0;
+  font: 700 var(--dc-text-md);
 }
 
 .dc-dialog-header__subtitle,
@@ -1155,11 +1492,11 @@
 
 .dc-dialog-body {
   position: relative;
-  overflow: auto;
-  -webkit-overflow-scrolling: touch;
   flex-grow: 1;
   padding-top: var(--dc-dialog-safe-area);
   padding-bottom: var(--dc-dialog-safe-area);
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
 }
 
 .dc-dialog-footer {
@@ -1220,10 +1557,26 @@
   opacity: 0;
 }
 
+.dark .dc-dialog,
+.dark.dc-dialog {
+  --dc-dialog-border-color: var(--dc-gray-700);
+  --dc-dialog-bg: var(--dc-gray-800);
+  --dc-dialog-divider-color: var(--dc-border-color-transparent-1);
+
+  color-scheme: dark;
+}
+
+.dark .dc-dialog .dc-dialog-modal,
+.dark.dc-dialog .dc-dialog-modal {
+  box-shadow:
+    0 0 0 1px var(--dc-border-color-transparent-2),
+    var(--dc-shadow-xl);
+}
+
 .dc-slide-over-header {
-  color: var(--dc-slide-over-text-color);
   box-sizing: border-box;
   padding: 16px;
+  color: var(--dc-slide-over-text-color);
 }
 
 .dc-slide-over-header__title {
@@ -1232,30 +1585,30 @@
 }
 
 .dc-slide-over-header__title > h2 {
-  font: 700 var(--dc-text-md);
-  color: inherit;
   flex-grow: 1;
   margin: 0;
+  font: 700 var(--dc-text-md);
+  color: inherit;
 }
 
 .dc-slide-over-header__description {
+  margin-top: 4px;
   font: var(--dc-text-sm);
   color: var(--dc-slide-over-secondary-text-color);
-  margin-top: 4px;
 }
 
 .dc-slide-over-header__content {
+  margin-top: 8px;
   font: var(--dc-text-md);
   color: var(--dc-slide-over-text-color);
-  margin-top: 8px;
 }
 
 .dc-slide-over-body {
-  color: var(--dc-slide-over-text-color);
-  overflow: auto;
-  flex-grow: 1;
   box-sizing: border-box;
+  flex-grow: 1;
   padding: 0 16px;
+  overflow: auto;
+  color: var(--dc-slide-over-text-color);
 }
 
 .dc-slide-over {
@@ -1263,11 +1616,11 @@
   --dc-slide-over-secondary-text-color: var(--dc-secondary-text-color);
   --dc-slide-over-panel-max-width: 512px;
   --dc-slide-over-panel-bg: var(--dc-primary-bg);
-  --dc-slide-over-backdrop-color: rgb(var(--dc-gray-900-rgb) / 0.4);
+  --dc-slide-over-backdrop-color: rgb(var(--dc-gray-900-rgb) / 40%);
 
-  color-scheme: light;
   position: relative;
   z-index: var(--dc-overlay-z-index);
+  color-scheme: light;
 }
 
 .dc-slide-over__backdrop,
@@ -1284,17 +1637,28 @@
 }
 
 .dc-slide-over__panel {
-  color: var(--dc-primary-text-color);
   right: 0;
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  box-sizing: border-box;
   width: 100%;
   max-width: var(--dc-slide-over-panel-max-width);
+  color: var(--dc-primary-text-color);
   background: var(--dc-slide-over-panel-bg);
   box-shadow: var(--dc-shadow-md);
 }
 
+.dark .dc-slide-over,
+.dark.dc-slide-over {
+  --dc-slide-over-panel-bg: var(--dc-gray-800);
+
+  color-scheme: dark;
+}
+
+.dark .dc-slide-over__panel {
+  box-shadow: 0 0 0 1px var(--dc-border-color-transparent-1), var(--dc-shadow-md);
+}
+
 /* Forms */
 
 .dc-text-input {
@@ -1310,22 +1674,22 @@
   --dc-input-add-on-bg: none;
   --dc-input-focus-ring-color: var(--dc-control-primary-color);
 
-  color-scheme: light;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: stretch;
+  min-width: 0;
+  max-width: 100%;
+  height: var(--dc-input-height);
   font-family: var(--dc-primary-font);
   font-size: var(--dc-input-font-size);
   font-weight: 400;
   line-height: 1;
   color: var(--dc-input-text-color);
-  display: inline-flex;
-  align-items: stretch;
-  box-sizing: border-box;
-  height: var(--dc-input-height);
-  min-width: 0;
-  max-width: 100%;
   vertical-align: middle;
+  color-scheme: light;
+  background: var(--dc-input-bg);
   border: 1px solid var(--dc-input-border-color);
   border-radius: var(--dc-input-border-radius);
-  background: var(--dc-input-bg);
 }
 
 .dc-text-input > :first-child {
@@ -1371,18 +1735,18 @@
 }
 
 .dc-text-input__native {
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  font: inherit;
-  color: inherit;
   flex: auto;
   min-width: 0;
   max-width: 100%;
-  margin: 0;
   padding: 0 var(--dc-input-padding-x);
-  border: none;
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
   background: none;
+  border: none;
 }
 
 .dc-text-input__native::-moz-placeholder {
@@ -1401,11 +1765,11 @@
 
 .dc-text-input__slot-left,
 .dc-text-input__slot-right {
-  color: var(--dc-input-add-on-color);
+  box-sizing: border-box;
   display: inline-flex;
   flex: none;
   align-items: center;
-  box-sizing: border-box;
+  color: var(--dc-input-add-on-color);
   background: var(--dc-input-add-on-bg);
 }
 
@@ -1426,7 +1790,7 @@
 }
 
 .dc-text-input_slot_tinted {
-  --dc-input-add-on-bg: rgb(var(--dc-gray-400-rgb) / 0.1);
+  --dc-input-add-on-bg: rgb(var(--dc-gray-400-rgb) / 10%);
 }
 
 .dc-text-input_slot_tinted .dc-text-input__slot-left {
@@ -1439,14 +1803,19 @@
   border-left: 1px solid var(--dc-input-border-color);
 }
 
+.dark .dc-text-input,
+.dark.dc-text-input {
+  color-scheme: dark;
+}
+
 .dc-password-input {
   --dc-password-input-toggle-color: var(--dc-control-secondary-text-color);
   --dc-password-input-toggle-color-hover: var(--dc-control-primary-text-color);
   --dc-password-input-toggle-bg: none;
   --dc-password-input-toggle-bg-hover: var(--dc-bg-transparent-2);
 
-  color-scheme: light;
   padding-right: 0;
+  color-scheme: light;
 }
 
 .dc-password-input > input {
@@ -1454,29 +1823,29 @@
 }
 
 .dc-password-input__toggle-button {
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  color: inherit;
+  box-sizing: border-box;
   display: inline-flex;
   flex-shrink: 0;
   align-items: center;
   justify-content: center;
-  box-sizing: border-box;
   width: var(--dc-input-height);
   height: 100%;
   padding: 0;
+  color: inherit;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background: var(--dc-password-input-toggle-bg);
   border: none;
   border-radius: calc(var(--dc-input-border-radius) - 1px);
-  background: var(--dc-password-input-toggle-bg);
 }
 
 .dc-password-input__toggle-button:not(:disabled):focus,
 .dc-password-input__toggle-button:not(:disabled):hover {
   color: var(--dc-password-input-toggle-color-hover);
   cursor: pointer;
-  outline: none;
   background: var(--dc-password-input-toggle-bg-hover);
+  outline: none;
 }
 
 .dc-password-input__toggle-button:focus:not(:focus-visible, :hover) {
@@ -1484,6 +1853,11 @@
   background: var(--dc-password-input-toggle-bg);
 }
 
+.dark .dc-password-input,
+.dark.dc-password-input {
+  color-scheme: dark;
+}
+
 .dc-textarea {
   --dc-textarea-font-size: 14px;
   --dc-textarea-leading: 20px;
@@ -1496,24 +1870,24 @@
   --dc-textarea-bg: var(--dc-control-bg);
   --dc-textarea-focus-ring-color: var(--dc-control-primary-color);
 
-  color-scheme: light;
-  font-family: var(--dc-primary-font);
-  font-size: var(--dc-textarea-font-size);
-  line-height: var(--dc-textarea-leading);
-  color: var(--dc-textarea-text-color);
+  box-sizing: border-box;
   display: inline-block;
   flex-direction: column;
-  box-sizing: border-box;
   width: auto;
   min-width: 0;
-  min-height: calc(var(--dc-textarea-leading) + var(--dc-textarea-padding-y) * 2);
   max-width: 100%;
+  min-height: calc(var(--dc-textarea-leading) + var(--dc-textarea-padding-y) * 2);
+  padding: var(--dc-textarea-padding-y) var(--dc-textarea-padding-x);
   margin-top: 0;
   margin-bottom: 0;
-  padding: var(--dc-textarea-padding-y) var(--dc-textarea-padding-x);
+  font-family: var(--dc-primary-font);
+  font-size: var(--dc-textarea-font-size);
+  line-height: var(--dc-textarea-leading);
+  color: var(--dc-textarea-text-color);
+  color-scheme: light;
+  background: var(--dc-textarea-bg);
   border: 1px solid var(--dc-textarea-border-color);
   border-radius: var(--dc-textarea-radius);
-  background: var(--dc-textarea-bg);
 }
 
 .dc-textarea::-moz-placeholder {
@@ -1541,9 +1915,9 @@
 }
 
 .dc-textarea_full-width {
-  resize: vertical;
   display: block;
   width: 100%;
+  resize: vertical;
 }
 
 .dc-textarea_sm {
@@ -1562,6 +1936,11 @@
   --dc-textarea-radius: 8px;
 }
 
+.dark .dc-textarea,
+.dark.dc-textarea {
+  color-scheme: dark;
+}
+
 .dc-select {
   --dc-select-font-size: 14px;
   --dc-select-text-color: var(--dc-control-primary-text-color);
@@ -1573,22 +1952,22 @@
   --dc-select-bg: var(--dc-control-bg);
   --dc-select-focus-ring-color: var(--dc-control-primary-color);
 
-  color-scheme: light;
+  position: relative;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: stretch;
+  max-width: 100%;
+  height: var(--dc-select-height);
   font-family: var(--dc-primary-font);
   font-size: var(--dc-select-font-size);
   font-weight: 400;
   line-height: 1.25;
   color: var(--dc-select-text-color);
-  position: relative;
-  display: inline-flex;
-  align-items: stretch;
-  box-sizing: border-box;
-  height: var(--dc-select-height);
-  max-width: 100%;
   vertical-align: middle;
+  color-scheme: light;
+  background: var(--dc-select-bg);
   border: 1px solid var(--dc-select-border-color);
   border-radius: var(--dc-select-radius);
-  background: var(--dc-select-bg);
 }
 
 .dc-select:focus-within {
@@ -1597,8 +1976,8 @@
 }
 
 .dc-select_multiple {
-  overflow: hidden;
   height: initial;
+  overflow: hidden;
 }
 
 .dc-select_disabled {
@@ -1629,18 +2008,18 @@
 }
 
 .dc-select__native {
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  font: inherit;
-  color: inherit;
-  cursor: pointer;
   width: 100%;
   padding-right: calc(var(--dc-select-height) + 0.5em);
   padding-left: var(--dc-select-padding-x);
+  font: inherit;
+  color: inherit;
   text-transform: none;
-  border: none;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  cursor: pointer;
   background: none;
+  border: none;
 }
 
 .dc-select__native:focus {
@@ -1648,8 +2027,8 @@
 }
 
 .dc-select__native:disabled {
-  opacity: 1;
   cursor: default;
+  opacity: 1;
 }
 
 .dc-select__native:disabled > option {
@@ -1657,9 +2036,9 @@
 }
 
 .dc-select_multiple .dc-select__native {
+  padding: 0;
   margin-top: var(--dc-select-radius);
   margin-bottom: var(--dc-select-radius);
-  padding: 0;
 }
 
 .dc-select__slot-left {
@@ -1679,6 +2058,11 @@
   display: none;
 }
 
+.dark .dc-select,
+.dark.dc-select {
+  color-scheme: dark;
+}
+
 .dc-switch {
   --dc-switch-width: 38px;
   --dc-switch-height: 24px;
@@ -1691,26 +2075,26 @@
   --dc-switch-icon-color: var(--dc-control-primary-color);
   --dc-switch-focus-ring-color: var(--dc-focus-ring-color);
 
-  color-scheme: light;
-  line-height: 0;
   position: relative;
   display: inline-block;
   flex-shrink: 0;
   width: var(--dc-switch-width);
   height: var(--dc-switch-height);
+  line-height: 0;
   text-align: left;
+  color-scheme: light;
 }
 
 .dc-switch__input {
   position: absolute;
-  overflow: hidden;
   width: 1px;
   height: 1px;
-  margin: -1px;
   padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
-  clip: rect(0, 0, 0, 0);
 }
 
 .dc-switch__track,
@@ -1722,37 +2106,37 @@
 }
 
 .dc-switch__track {
-  cursor: pointer;
   box-sizing: border-box;
   width: 100%;
   height: 100%;
-  transition-duration: 0.2s;
-  transition-property: opacity, background-color;
   vertical-align: middle;
-  border-radius: var(--dc-switch-radius);
+  cursor: pointer;
   background: var(--dc-switch-track-bg);
+  border-radius: var(--dc-switch-radius);
+  transition-duration: 0.2s;
+  transition-property: opacity, background-color;
 }
 
 .dc-switch__thumb {
   width: var(--dc-switch-thumb-size);
   height: var(--dc-switch-thumb-size);
+  background: var(--dc-switch-thumb-bg);
+  border-radius: 50%;
+  box-shadow:
+    0 1px 3px 0 rgb(var(--dc-black-rgb) / 10%),
+    0 4px 6px -1px rgb(var(--dc-black-rgb) / 10%),
+    0 2px 4px -1px rgb(var(--dc-black-rgb) / 6%);
+  transition: transform 0.2s;
   transform:
     translateX(var(--dc-switch-thumb-offset))
     translateY(var(--dc-switch-thumb-offset));
-  transition: transform 0.2s;
-  border-radius: 50%;
-  background: var(--dc-switch-thumb-bg);
-  box-shadow:
-    0 1px 3px 0 rgb(var(--dc-black-rgb) / 0.1),
-    0 4px 6px -1px rgb(var(--dc-black-rgb) / 0.1),
-    0 2px 4px -1px rgb(var(--dc-black-rgb) / 0.06);
 }
 
 .dc-switch__icon {
-  color: var(--dc-switch-icon-color);
-  opacity: 0;
   width: var(--dc-switch-thumb-size);
   height: var(--dc-switch-thumb-size);
+  color: var(--dc-switch-icon-color);
+  opacity: 0;
   transition: opacity 0.2s;
 }
 
@@ -1777,8 +2161,8 @@
 }
 
 .dc-switch__input:disabled + .dc-switch__track {
-  opacity: var(--dc-disabled-state-opacity);
   cursor: default;
+  opacity: var(--dc-disabled-state-opacity);
 }
 
 .dc-switch__input:focus {
@@ -1786,10 +2170,10 @@
 }
 
 .dc-switch__input:focus + .dc-switch__track::after {
-  content: "";
   position: absolute;
   inset: -3px;
   pointer-events: none;
+  content: "";
   border-radius: calc(3px + var(--dc-switch-radius));
   box-shadow: 0 0 0 3px var(--dc-switch-focus-ring-color);
 }
@@ -1798,6 +2182,11 @@
   content: none;
 }
 
+.dark .dc-switch,
+.dark.dc-switch {
+  color-scheme: dark;
+}
+
 .dc-checkbox {
   --dc-checkbox-size: 20px;
   --dc-checkbox-radius: 6px;
@@ -1808,54 +2197,54 @@
   --dc-checkbox-icon-color: var(--dc-control-on-primary-color);
   --dc-checkbox-focus-ring-color: var(--dc-focus-ring-color);
 
-  color-scheme: light;
-  line-height: 0;
   position: relative;
   display: inline-block;
   flex-shrink: 0;
   width: var(--dc-checkbox-size);
   height: var(--dc-checkbox-size);
+  line-height: 0;
   text-align: left;
+  color-scheme: light;
 }
 
 .dc-checkbox__input {
   position: absolute;
-  overflow: hidden;
   width: 1px;
   height: 1px;
-  margin: -1px;
   padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
-  clip: rect(0, 0, 0, 0);
 }
 
 .dc-checkbox__check {
   position: absolute;
   top: 0;
   left: 0;
-  display: inline-block;
-  cursor: pointer;
   box-sizing: border-box;
+  display: inline-block;
   width: 100%;
   height: 100%;
-  transition: opacity 0.2s;
   vertical-align: middle;
+  cursor: pointer;
+  background: var(--dc-checkbox-bg);
   border: 1px solid var(--dc-checkbox-border-color);
   border-radius: var(--dc-checkbox-radius);
-  background: var(--dc-checkbox-bg);
+  transition: opacity 0.2s;
 }
 
 .dc-checkbox__icon {
-  color: var(--dc-checkbox-icon-color);
   display: none;
   width: 100%;
   height: 100%;
+  color: var(--dc-checkbox-icon-color);
 }
 
 .dc-checkbox__input:checked + .dc-checkbox__check {
-  border-color: var(--dc-checkbox-border-color-checked);
   background: var(--dc-checkbox-bg-checked);
+  border-color: var(--dc-checkbox-border-color-checked);
 }
 
 .dc-checkbox__input:checked + .dc-checkbox__check .dc-checkbox__icon {
@@ -1863,8 +2252,8 @@
 }
 
 .dc-checkbox__input:disabled + .dc-checkbox__check {
-  opacity: var(--dc-disabled-state-opacity);
   cursor: default;
+  opacity: var(--dc-disabled-state-opacity);
 }
 
 .dc-checkbox__input:focus {
@@ -1872,10 +2261,10 @@
 }
 
 .dc-checkbox__input:focus + .dc-checkbox__check::after {
-  content: "";
   position: absolute;
   inset: -3px;
   pointer-events: none;
+  content: "";
   border-radius: calc(3px + var(--dc-checkbox-radius));
   box-shadow: 0 0 0 3px var(--dc-checkbox-focus-ring-color);
 }
@@ -1884,6 +2273,11 @@
   content: none;
 }
 
+.dark .dc-checkbox,
+.dark.dc-checkbox {
+  color-scheme: dark;
+}
+
 .dc-radio {
   --dc-radio-size: 20px;
   --dc-radio-color-bg: var(--dc-control-bg);
@@ -1893,53 +2287,53 @@
   --dc-radio-color-icon: var(--dc-control-on-primary-color);
   --dc-radio-color-focus-ring: var(--dc-focus-ring-color);
 
-  color-scheme: light;
   position: relative;
   display: inline-block;
   flex-shrink: 0;
   width: var(--dc-radio-size);
   height: var(--dc-radio-size);
   text-align: left;
+  color-scheme: light;
 }
 
 .dc-radio__input {
   position: absolute;
-  overflow: hidden;
   width: 1px;
   height: 1px;
-  margin: -1px;
   padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
-  clip: rect(0, 0, 0, 0);
 }
 
 .dc-radio__check {
   position: absolute;
   top: 0;
   left: 0;
-  display: inline-block;
-  cursor: pointer;
   box-sizing: border-box;
+  display: inline-block;
   width: var(--dc-radio-size);
   height: var(--dc-radio-size);
-  transition: opacity 0.2s;
   vertical-align: middle;
+  cursor: pointer;
+  background: var(--dc-radio-color-bg);
   border: 1px solid var(--dc-radio-color-border);
   border-radius: 50%;
-  background: var(--dc-radio-color-bg);
+  transition: opacity 0.2s;
 }
 
 .dc-radio__icon {
-  color: var(--dc-radio-color-icon);
   display: none;
   width: 100%;
   height: 100%;
+  color: var(--dc-radio-color-icon);
 }
 
 .dc-radio__input:checked + .dc-radio__check {
-  border-color: var(--dc-radio-color-border-checked);
   background: var(--dc-radio-color-bg-checked);
+  border-color: var(--dc-radio-color-border-checked);
 }
 
 .dc-radio__input:checked + .dc-radio__check .dc-radio__icon {
@@ -1947,8 +2341,8 @@
 }
 
 .dc-radio__input:disabled + .dc-radio__check {
-  opacity: var(--dc-disabled-state-opacity);
   cursor: default;
+  opacity: var(--dc-disabled-state-opacity);
 }
 
 .dc-radio__input:focus {
@@ -1956,10 +2350,10 @@
 }
 
 .dc-radio__input:focus + .dc-radio__check::after {
-  content: "";
   position: absolute;
   inset: -3px;
   pointer-events: none;
+  content: "";
   border-radius: 50%;
   box-shadow: 0 0 0 3px var(--dc-radio-color-focus-ring);
 }
@@ -1968,6 +2362,11 @@
   content: none;
 }
 
+.dark .dc-radio,
+.dark.dc-radio {
+  color-scheme: dark;
+}
+
 .dc-slider {
   --dc-slider-icon-color: var(--dc-secondary-text-color);
 
@@ -2005,19 +2404,19 @@
   /* Tick mark properties */
   --dc-slider-tick-mark-width: 1px;
   --dc-slider-tick-mark-height: 6px;
-  --dc-slider-tick-mark-color: rgb(var(--dc-gray-900-rgb) / 0.3);
+  --dc-slider-tick-mark-color: rgb(var(--dc-gray-900-rgb) / 30%);
   --dc-slider-tick-marks-gap: 4px;
 
-  color-scheme: light;
   display: inline-flex;
   width: 240px;
   min-width: 0;
   max-width: 100%;
+  color-scheme: light;
 }
 
 .dc-slider_range {
-  margin: 0;
   padding: 0;
+  margin: 0;
   border: none;
 }
 
@@ -2031,12 +2430,12 @@
 }
 
 .dc-slider__body {
-  color: var(--dc-slider-icon-color);
   display: flex;
   gap: 8px;
   align-items: center;
   width: 100%;
   min-height: var(--dc-slider-thumb-height);
+  color: var(--dc-slider-icon-color);
 }
 
 .dc-slider__body_has_labels {
@@ -2059,23 +2458,23 @@
   position: relative;
   width: 100%;
   height: var(--dc-slider-track-height);
-  border-radius: var(--dc-slider-track-radius);
   background-color: var(--dc-slider-track-bg);
+  border-radius: var(--dc-slider-track-radius);
 }
 
 .dc-slider__input {
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  margin: 0;
   padding: 0;
-  border: none;
+  margin: 0;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
   background: none;
+  border: none;
 }
 
 .dc-slider__input:focus {
@@ -2099,18 +2498,18 @@
 }
 
 .dc-slider__input::-moz-range-thumb {
-  -moz-appearance: none;
-       appearance: none;
-  display: inline-flex;
   box-sizing: border-box;
+  display: inline-flex;
   width: var(--dc-slider-thumb-width);
   height: var(--dc-slider-thumb-height);
-  -moz-transition: var(--dc-slider-thumb-transition);
-  transition: var(--dc-slider-thumb-transition);
+  -moz-appearance: none;
+       appearance: none;
+  background: var(--dc-slider-thumb-bg);
   border: var(--dc-slider-thumb-border);
   border-radius: var(--dc-slider-thumb-radius);
-  background: var(--dc-slider-thumb-bg);
   box-shadow: var(--dc-slider-thumb-shadow);
+  -moz-transition: var(--dc-slider-thumb-transition);
+  transition: var(--dc-slider-thumb-transition);
 }
 
 .dc-slider_range .dc-slider__input::-moz-range-thumb {
@@ -2126,18 +2525,18 @@
 }
 
 .dc-slider__input::-webkit-slider-thumb {
-  -webkit-appearance: none;
-          appearance: none;
-  display: inline-block;
   box-sizing: border-box;
+  display: inline-block;
   width: var(--dc-slider-thumb-width);
   height: var(--dc-slider-thumb-height);
-  -webkit-transition: var(--dc-slider-thumb-transition);
-  transition: var(--dc-slider-thumb-transition);
+  -webkit-appearance: none;
+          appearance: none;
+  background: var(--dc-slider-thumb-bg);
   border: var(--dc-slider-thumb-border);
   border-radius: var(--dc-slider-thumb-radius);
-  background: var(--dc-slider-thumb-bg);
   box-shadow: var(--dc-slider-thumb-shadow);
+  -webkit-transition: var(--dc-slider-thumb-transition);
+  transition: var(--dc-slider-thumb-transition);
 }
 
 .dc-slider_range .dc-slider__input::-webkit-slider-thumb {
@@ -2153,9 +2552,6 @@
 }
 
 .dc-slider__label {
-  font: var(--dc-text-xs);
-  font-variant-numeric: tabular-nums;
-  color: var(--dc-slider-label-text-color);
   position: absolute;
   bottom: calc(
     var(--dc-slider-thumb-height) / 2 -
@@ -2164,24 +2560,27 @@
     var(--dc-slider-track-height)
   );
   left: 0;
+  box-sizing: border-box;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  box-sizing: border-box;
-  height: var(--dc-slider-label-height);
   min-width: var(--dc-slider-label-height);
   max-width: var(--dc-slider-label-max-width);
+  height: var(--dc-slider-label-height);
   padding: 0 var(--dc-slider-label-padding-x);
-  transform: translateX(-50%);
+  font: var(--dc-text-xs);
+  font-variant-numeric: tabular-nums;
+  color: var(--dc-slider-label-text-color);
+  background: var(--dc-slider-label-bg);
   border: var(--dc-slider-label-border);
   border-radius: var(--dc-slider-label-radius);
-  background: var(--dc-slider-label-bg);
+  transform: translateX(-50%);
 }
 
 .dc-slider__label-text {
   overflow: hidden;
-  white-space: nowrap;
   text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .dc-slider__input_active,
@@ -2198,8 +2597,8 @@
   left: 0;
   width: 100%;
   height: var(--dc-slider-tick-mark-height);
-  margin: 0;
   padding: 0;
+  margin: 0;
   list-style: none;
 }
 
@@ -2210,8 +2609,24 @@
   display: inline-flex;
   width: var(--dc-slider-tick-mark-width);
   height: var(--dc-slider-tick-mark-height);
-  transform: translateX(-50%);
   background: var(--dc-slider-tick-mark-color);
+  transform: translateX(-50%);
+}
+
+.dark .dc-slider,
+.dark.dc-slider {
+  /* Thumb properties */
+  --dc-slider-thumb-border: 2px solid var(--dc-gray-200);
+  --dc-slider-thumb-focus-ring:
+    var(--dc-slider-thumb-shadow),
+    0 0 0 4px var(--dc-focus-ring-color);
+
+  /* Label properties */
+  --dc-slider-label-border: 1px solid var(--dc-gray-600);
+  --dc-slider-label-bg: var(--dc-gray-700);
+
+  /* Tick mark properties */
+  --dc-slider-tick-mark-color: rgb(var(--dc-gray-50-rgb) / 50%);
 }
 
 .dc-file-picker {
@@ -2222,39 +2637,39 @@
   --dc-file-picker-border-color-drag-over: var(--dc-control-primary-color);
   --dc-file-picker-bg-drag-over: var(--dc-control-secondary-color);
 
-  color-scheme: light;
   position: relative;
+  box-sizing: border-box;
   display: inline-flex;
   flex-wrap: wrap;
   gap: 12px 20px;
   align-items: center;
-  box-sizing: border-box;
   padding: 16px 20px;
+  color-scheme: light;
   border: 1px dashed var(--dc-file-picker-border-color);
   border-radius: 8px;
 }
 
 .dc-file-picker__input {
   position: absolute;
-  overflow: hidden;
   width: 1px;
   height: 1px;
+  overflow: hidden;
   clip: rect(0, 0, 0, 0);
 }
 
 .dc-file-picker__body {
-  font-family: var(--dc-primary-font);
-  font-size: 14px;
-  line-height: 1.25;
   display: flex;
   flex: auto;
   align-items: center;
+  font-family: var(--dc-primary-font);
+  font-size: 14px;
+  line-height: 1.25;
 }
 
 .dc-file-picker__icon {
-  color: var(--dc-file-picker-icon-color);
   display: inline-flex;
   margin-right: 16px;
+  color: var(--dc-file-picker-icon-color);
 }
 
 .dc-file-picker__label {
@@ -2262,9 +2677,9 @@
 }
 
 .dc-file-picker__caption {
+  margin-top: 4px;
   font-size: 12px;
   color: var(--dc-file-picker-caption-color);
-  margin-top: 4px;
 }
 
 .dc-file-picker__button {
@@ -2280,8 +2695,13 @@
 }
 
 .dc-file-picker_dragging-over {
-  border-color: var(--dc-file-picker-border-color-drag-over);
   background: var(--dc-file-picker-bg-drag-over);
+  border-color: var(--dc-file-picker-border-color-drag-over);
+}
+
+.dark .dc-file-picker,
+.dark.dc-file-picker {
+  color-scheme: dark;
 }
 
 .dc-datepicker {
@@ -2303,8 +2723,8 @@
   --dc-day-bg-range: var(--dc-control-secondary-color);
   --dc-day-focus-ring-color: var(--dc-control-primary-color);
 
-  color-scheme: light;
   display: inline-block;
+  color-scheme: light;
 }
 
 /* Calendar controls */
@@ -2325,25 +2745,25 @@
 /* Calendar day */
 
 .dc-calendar-day {
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
+  width: 100%;
+  padding: 0;
+  margin: 0;
   font-family: var(--dc-primary-font);
   font-size: 14px;
   font-weight: 500;
   color: var(--dc-day-text-color);
-  width: 100%;
-  margin: 0;
-  padding: 0;
-  border: none;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
   background: none;
+  border: none;
 }
 
 .dc-calendar-day__body {
+  box-sizing: border-box;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  box-sizing: border-box;
   width: var(--dc-day-size);
   height: var(--dc-day-size);
   border-radius: var(--dc-day-radius);
@@ -2354,10 +2774,10 @@
 }
 
 .dc-calendar-day_in-range::before {
-  content: "";
   position: absolute;
-  z-index: -1;
   inset: 0;
+  z-index: -1;
+  content: "";
   background: var(--dc-day-bg-range);
 }
 
@@ -2404,8 +2824,8 @@
 }
 
 .dc-calendar-day:disabled > .dc-calendar-day__body {
-  opacity: var(--dc-disabled-state-opacity);
   box-shadow: none;
+  opacity: var(--dc-disabled-state-opacity);
 }
 
 .dc-calendar-day:focus {
@@ -2422,9 +2842,9 @@
 }
 
 .dc-calendar-day_selected:focus > .dc-calendar-day__body::after {
-  content: "";
   position: absolute;
   inset: -2px;
+  content: "";
   border-radius: 50%;
   box-shadow: 0 0 0 2px var(--dc-day-focus-ring-color);
 }
@@ -2473,16 +2893,21 @@
 }
 
 .dc-calendar__grid th {
+  padding-bottom: 4px;
   font-size: 14px;
   font-weight: 400;
   color: var(--dc-columnheader-text-color);
-  padding-bottom: 4px;
 }
 
 .dc-calendar__grid td {
   padding-top: 4px;
 }
 
+.dark .dc-datepicker,
+.dark.dc-datepicker {
+  color-scheme: dark;
+}
+
 .dc-segmented {
   --dc-segmented-border-color: var(--dc-control-border-color);
   --dc-segmented-bg: var(--dc-bg-transparent-1);
@@ -2498,21 +2923,21 @@
   --dc-segmented-button-bg-selected: var(--dc-white);
   --dc-segmented-button-focus-ring-color: var(--dc-focus-ring-color);
 
-  color-scheme: light;
-  font: 14px/1 var(--dc-primary-font);
   display: inline-flex;
   flex-shrink: 0;
-  margin: 0;
   padding: 0;
+  margin: 0;
+  font: 14px/1 var(--dc-primary-font);
   list-style: none;
-  border-radius: var(--dc-segmented-button-radius);
+  color-scheme: light;
   background: var(--dc-segmented-bg);
+  border-radius: var(--dc-segmented-button-radius);
   box-shadow: inset 0 0 0 1px var(--dc-segmented-border-color);
 }
 
 .dc-segmented_disabled {
-  opacity: var(--dc-disabled-state-opacity);
   pointer-events: none;
+  opacity: var(--dc-disabled-state-opacity);
 }
 
 .dc-segmented_size_sm {
@@ -2532,13 +2957,13 @@
 }
 
 .dc-segmented__item + .dc-segmented__item::before {
-  content: "";
   display: inline-block;
   float: left;
   width: 1px;
   height: calc(var(--dc-segmented-button-height) - var(--dc-segmented-button-radius) * 2);
-  transform: translateY(var(--dc-segmented-button-radius));
+  content: "";
   background: var(--dc-segmented-delimiter-color);
+  transform: translateY(var(--dc-segmented-button-radius));
 }
 
 .dc-segmented__item_selected::before,
@@ -2547,27 +2972,27 @@
 }
 
 .dc-segmented-button {
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  font: inherit;
-  color: var(--dc-segmented-button-text-color);
   position: relative;
+  box-sizing: border-box;
   display: flex;
-  cursor: pointer;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
   flex: auto;
   gap: calc(var(--dc-segmented-button-padding-x) / 2);
   align-items: center;
   justify-content: center;
-  box-sizing: border-box;
   height: var(--dc-segmented-button-height);
   padding: 0 var(--dc-segmented-button-padding-x);
+  font: inherit;
+  color: var(--dc-segmented-button-text-color);
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  cursor: pointer;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  background: var(--dc-segmented-button-bg);
   border: 1px solid var(--dc-segmented-button-border-color);
   border-radius: var(--dc-segmented-button-radius);
-  background: var(--dc-segmented-button-bg);
 }
 
 .dc-segmented-button[aria-current="true"] {
@@ -2588,30 +3013,46 @@
   box-shadow: none;
 }
 
+.dark .dc-segmented,
+.dark.dc-segmented {
+  --dc-segmented-btn-bg-checked: var(--dc-gray-600);
+  --dc-segmented-btn-border-color-focus: var(--dc-blue-400);
+  --dc-segmented-btn-border-color-checked: var(--dc-gray-400);
+
+  color-scheme: dark;
+}
+
 .dc-label {
   --dc-label-text-color: var(--dc-primary-text-color);
   --dc-label-required-mark-color: #dc2626;
 
-  color-scheme: light;
+  display: inline-block;
   font: var(--dc-text-sm);
   font-weight: 500;
   color: var(--dc-label-text-color);
-  display: inline-block;
+  color-scheme: light;
 }
 
 .dc-label_required::after {
-  content: "*";
-  color: var(--dc-label-required-mark-color);
   padding-left: 0.25em;
+  color: var(--dc-label-required-mark-color);
+  content: "*";
+}
+
+.dark .dc-label,
+.dark.dc-label {
+  --dc-label-required-mark-color: #f87171;
+
+  color-scheme: dark;
 }
 
 .dc-caption {
-  color-scheme: light;
-  font: var(--dc-text-sm);
-  color: var(--dc-secondary-text-color);
   display: block;
   align-items: center;
+  font: var(--dc-text-sm);
+  color: var(--dc-secondary-text-color);
   text-align: left;
+  color-scheme: light;
 }
 
 .dc-caption_color_blue {
@@ -2631,19 +3072,24 @@
 }
 
 .dc-caption__icon {
-  color: inherit;
   display: inline-flex;
   float: left;
   margin-right: 0.5em;
+  color: inherit;
+}
+
+.dark .dc-caption,
+.dark.dc-caption {
+  color-scheme: dark;
 }
 
 .dc-selection-control {
-  color-scheme: light;
   display: grid;
   grid-template-areas: "input label";
   grid-template-columns: auto 1fr;
   grid-gap: 2px 12px;
   justify-items: start;
+  color-scheme: light;
 }
 
 .dc-selection-control__with_caption {
@@ -2658,52 +3104,59 @@
 }
 
 .dc-selection-control__label {
+  grid-area: label;
+  align-self: center;
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
-  grid-area: label;
-  align-self: center;
 }
 
 .dc-selection-control__caption {
   grid-area: caption;
 }
 
+.dark .dc-selection-control,
+.dark.dc-selection-control {
+  color-scheme: dark;
+}
+
 .dc-form-field {
-  color-scheme: light;
   display: block;
   min-width: 0;
   text-align: left;
+  color-scheme: light;
 }
 
 .dc-form-field__label {
   margin-bottom: 4px;
 }
 
-.dc-form-field__input {
-}
-
 .dc-form-field__error,
 .dc-form-field__hint {
   display: block;
   margin-top: 4px;
 }
 
+.dark .dc-form-field,
+.dark.dc-form-field {
+  color-scheme: dark;
+}
+
 .dc-color-picker {
   --dc-color-picker-btn-size: 24px;
   --dc-color-picker-btn-color: var(--dc-control-on-primary-color);
   --dc-color-picker-btn-check-color: white;
-  --dc-color-picker-btn-inner-border-color: rgb(var(--dc-black-rgb) / 0.05);
+  --dc-color-picker-btn-inner-border-color: rgb(var(--dc-black-rgb) / 5%);
   --dc-color-picker-btn-focus-ring-color: var(--dc-focus-ring-color);
 
-  color-scheme: light;
   display: inline-flex;
   flex-wrap: wrap;
   gap: 12px;
   align-items: center;
   justify-content: flex-start;
-  margin: 0;
   padding: 0;
+  margin: 0;
+  color-scheme: light;
   border: none;
 }
 
@@ -2712,18 +3165,18 @@
 }
 
 .dc-color-picker__btn {
-  font-size: 0;
-  color: transparent;
   position: relative;
   display: inline-flex;
-  cursor: pointer;
   flex: none;
   align-items: center;
   justify-content: center;
   width: var(--dc-color-picker-btn-size);
   height: var(--dc-color-picker-btn-size);
-  border-radius: 50%;
+  font-size: 0;
+  color: transparent;
+  cursor: pointer;
   background: var(--dc-color-picker-btn-color);
+  border-radius: 50%;
   box-shadow: inset 0 0 0 1px var(--dc-color-picker-btn-inner-border-color);
 }
 
@@ -2733,13 +3186,13 @@
 
 .dc-color-picker__btn > input {
   position: absolute;
+  width: 1px;
+  height: 1px;
   overflow: hidden;
+  clip: rect(0 0 0 0);
   -webkit-clip-path: inset(50%);
           clip-path: inset(50%);
-  width: 1px;
-  height: 1px;
   white-space: nowrap;
-  clip: rect(0 0 0 0);
 }
 
 .dc-color-picker__btn > input + .dc-color-picker__btn-check {
@@ -2753,28 +3206,39 @@
   display: inline-block;
   width: 38%;
   height: 38%;
-  transform: translate(-50%, -50%);
-  border-radius: 50%;
   background: var(--dc-color-picker-btn-check-color);
-  box-shadow: 0 1px 2px 0 rgb(var(--dc-black-rgb) / 0.05);
+  border-radius: 50%;
+  box-shadow: 0 1px 2px 0 rgb(var(--dc-black-rgb) / 5%);
+  transform: translate(-50%, -50%);
 }
 
 .dc-color-picker__btn:focus-within::before {
-  content: "";
   position: absolute;
-  z-index: -1;
   inset: -2px;
+  z-index: -1;
   display: inline-block;
+  content: "";
   border-radius: 50%;
   box-shadow: 0 0 0 3px var(--dc-color-picker-btn-focus-ring-color);
 }
 
+.dark .dc-color-picker,
+.dark.dc-color-picker {
+  --dc-color-picker-btn-inner-border-color: rgb(255 255 255 / 10%);
+
+  color-scheme: dark;
+}
+
 .dc-date-picker-popover {
   color-scheme: light;
 }
 
+.dark .dc-date-picker-popover,
+.dark.dc-date-picker-popover {
+  color-scheme: dark;
+}
+
 .dc-date-range-picker-popover {
-  color-scheme: light;
   display: inline-grid;
   grid-template-areas:
     "presets calendar"
@@ -2782,6 +3246,7 @@
   grid-template-columns: auto 1fr;
   grid-gap: 20px 24px;
   max-width: none;
+  color-scheme: light;
 }
 
 .dc-date-range-picker-popover_compact {
@@ -2795,8 +3260,8 @@
 
 .dc-date-range-picker-popover__presets {
   grid-area: presets;
-  margin: 0;
   padding: 0;
+  margin: 0;
   list-style: none;
 }
 
@@ -2813,13 +3278,13 @@
 }
 
 .dc-date-range-picker-popover__footer {
-  font: var(--dc-text-xs);
   display: grid;
   grid-area: footer;
   grid-template-areas: "content cancel confirm";
   grid-template-columns: 1fr auto auto;
   grid-gap: 8px;
   align-items: center;
+  font: var(--dc-text-xs);
 }
 
 .dc-date-range-picker-popover__footer-content {
@@ -2842,6 +3307,11 @@
   text-align: right;
 }
 
+.dark .dc-date-range-picker-popover,
+.dark.dc-date-range-picker-popover {
+  color-scheme: dark;
+}
+
 /* Data display */
 
 .dc-table-container,
@@ -2862,12 +3332,12 @@
 }
 
 .dc-table-container {
-  overflow-x: auto;
-  scroll-behavior: smooth;
-  scroll-snap-type: x mandatory;
   box-sizing: border-box;
   width: 100%;
+  overflow-x: auto;
   border: 0 solid var(--dc-table-border-color);
+  scroll-behavior: smooth;
+  scroll-snap-type: x mandatory;
 }
 
 .dc-table-container_border_all {
@@ -2891,31 +3361,22 @@
 }
 
 .dc-table {
+  width: 100%;
   font: var(--dc-text-sm);
   font-variant-numeric: tabular-nums;
   color: var(--dc-primary-text-color);
-  width: 100%;
   border-spacing: 0;
   border-collapse: separate;
 }
 
-.dc-table-head {
-}
-
-.dc-table-body {
-}
-
-.dc-table-row {
-}
-
 .dc-table-cell {
-  scroll-snap-align: start;
   box-sizing: border-box;
   padding:
     var(--dc-table-cell-padding-y)
     var(--dc-table-cell-padding-x);
-  border-bottom: 1px solid var(--dc-table-border-color);
   background: var(--dc-table-bg);
+  border-bottom: 1px solid var(--dc-table-border-color);
+  scroll-snap-align: start;
 }
 
 .dc-table-cell_head {
@@ -2940,16 +3401,9 @@
 }
 
 .dc-table-cell__sort-btn {
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  font: inherit;
-  color: inherit;
   position: relative;
   display: block;
-  cursor: pointer;
   width: 100%;
-  margin: 0;
   padding:
     var(--dc-table-cell-padding-y)
     var(--dc-table-cell-padding-x);
@@ -2959,9 +3413,16 @@
       var(--dc-table-sort-icon-size) +
       var(--dc-table-cell-padding-x)
     );
+  margin: 0;
+  font: inherit;
+  color: inherit;
   text-align: inherit;
-  border: none;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  cursor: pointer;
   background: transparent;
+  border: none;
 }
 
 .dc-table-cell__sort-btn:hover {
@@ -2969,9 +3430,9 @@
 }
 
 .dc-table-cell__sort-btn::before {
-  content: "";
   position: absolute;
   inset: 0;
+  content: "";
 }
 
 .dc-table-cell__sort-btn:focus {
@@ -3023,28 +3484,35 @@
   background: var(--dc-table-row-bg-highlighted);
 }
 
+.dark .dc-table,
+.dark.dc-table,
+.dark .dc-table-container,
+.dark.dc-table-container {
+  color-scheme: dark;
+}
+
 /* Feedback */
 
 .dc-alert {
   --dc-alert-text-color: var(--dc-gray-700);
   --dc-alert-icon-color: var(--dc-gray-500);
-  --dc-alert-bg: rgb(var(--dc-gray-200-rgb) / 0.25);
-  --dc-alert-border-color: rgb(var(--dc-gray-400-rgb) / 0.25);
+  --dc-alert-bg: rgb(var(--dc-gray-200-rgb) / 25%);
+  --dc-alert-border-color: rgb(var(--dc-gray-400-rgb) / 25%);
   --dc-alert-accent-border-color: var(--dc-gray-500);
   --dc-alert-icon-size: 20px;
 
-  color-scheme: light;
-  font: var(--dc-text-sm);
-  color: var(--dc-alert-text-color);
+  box-sizing: border-box;
   display: flex;
   gap: 12px;
   align-items: flex-start;
-  box-sizing: border-box;
   padding: 12px 16px;
+  font: var(--dc-text-sm);
+  color: var(--dc-alert-text-color);
   text-align: left;
+  color-scheme: light;
+  background: var(--dc-alert-bg);
   border: 1px solid var(--dc-alert-border-color);
   border-radius: 8px;
-  background: var(--dc-alert-bg);
 }
 
 .dc-alert_has_icon {
@@ -3056,8 +3524,8 @@
 }
 
 .dc-alert__icon {
-  color: var(--dc-alert-icon-color);
   display: inline-flex;
+  color: var(--dc-alert-icon-color);
 }
 
 .dc-alert__body {
@@ -3065,28 +3533,28 @@
 }
 
 .dc-alert__title {
-  font: 600 var(--dc-text-sm);
   display: block;
   width: 100%;
   margin: 0 0 8px;
+  font: 600 var(--dc-text-sm);
 }
 
 .dc-alert__dismiss-button {
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  color: inherit;
   display: inline-flex;
-  cursor: pointer;
   align-items: center;
   justify-content: center;
   width: 20px;
   height: 20px;
-  margin: 0;
   padding: 0;
+  margin: 0;
+  color: inherit;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  cursor: pointer;
+  background: none;
   border: none;
   border-radius: 4px;
-  background: none;
 }
 
 .dc-alert__dismiss-button:focus {
@@ -3113,32 +3581,79 @@
 .dc-alert_tint_orange {
   --dc-alert-text-color: var(--dc-orange-700);
   --dc-alert-icon-color: var(--dc-orange-600);
-  --dc-alert-bg: rgb(var(--dc-orange-200-rgb) / 0.2);
-  --dc-alert-border-color: rgb(var(--dc-orange-500-rgb) / 0.25);
+  --dc-alert-bg: rgb(var(--dc-orange-200-rgb) / 20%);
+  --dc-alert-border-color: rgb(var(--dc-orange-500-rgb) / 25%);
   --dc-alert-accent-border-color: var(--dc-orange-500);
 }
 
 .dc-alert_tint_red {
   --dc-alert-text-color: var(--dc-red-700);
   --dc-alert-icon-color: var(--dc-red-600);
-  --dc-alert-bg: rgb(var(--dc-red-200-rgb) / 0.2);
-  --dc-alert-border-color: rgb(var(--dc-red-500-rgb) / 0.25);
+  --dc-alert-bg: rgb(var(--dc-red-200-rgb) / 20%);
+  --dc-alert-border-color: rgb(var(--dc-red-500-rgb) / 25%);
   --dc-alert-accent-border-color: var(--dc-red-500);
 }
 
 .dc-alert_tint_blue {
   --dc-alert-text-color: var(--dc-blue-700);
   --dc-alert-icon-color: var(--dc-blue-600);
-  --dc-alert-bg: rgb(var(--dc-blue-200-rgb) / 0.2);
-  --dc-alert-border-color: rgb(var(--dc-blue-500-rgb) / 0.25);
+  --dc-alert-bg: rgb(var(--dc-blue-200-rgb) / 20%);
+  --dc-alert-border-color: rgb(var(--dc-blue-500-rgb) / 25%);
   --dc-alert-accent-border-color: var(--dc-blue-500);
 }
 
 .dc-alert_tint_green {
   --dc-alert-text-color: var(--dc-green-700);
   --dc-alert-icon-color: var(--dc-green-600);
-  --dc-alert-bg: rgb(var(--dc-green-200-rgb) / 0.2);
-  --dc-alert-border-color: rgb(var(--dc-green-600-rgb) / 0.25);
+  --dc-alert-bg: rgb(var(--dc-green-200-rgb) / 20%);
+  --dc-alert-border-color: rgb(var(--dc-green-600-rgb) / 25%);
+  --dc-alert-accent-border-color: var(--dc-green-500);
+}
+
+.dark .dc-alert,
+.dark.dc-alert {
+  --dc-alert-text-color: var(--dc-gray-300);
+  --dc-alert-icon-color: var(--dc-gray-300);
+  --dc-alert-bg: rgb(var(--dc-gray-200-rgb) / 10%);
+  --dc-alert-border-color: rgb(var(--dc-gray-400-rgb) / 20%);
+  --dc-alert-accent-border-color: var(--dc-gray-400);
+
+  color-scheme: dark;
+}
+
+.dark .dc-alert_tint_orange,
+.dark.dc-alert_tint_orange {
+  --dc-alert-text-color: var(--dc-orange-400);
+  --dc-alert-icon-color: var(--dc-orange-400);
+  --dc-alert-bg: rgb(var(--dc-orange-200-rgb) / 10%);
+  --dc-alert-border-color: rgb(var(--dc-orange-400-rgb) / 30%);
+  --dc-alert-accent-border-color: var(--dc-orange-500);
+}
+
+.dark .dc-alert_tint_red,
+.dark.dc-alert_tint_red {
+  --dc-alert-text-color: var(--dc-red-400);
+  --dc-alert-icon-color: var(--dc-red-400);
+  --dc-alert-bg: rgb(var(--dc-red-300-rgb) / 10%);
+  --dc-alert-border-color: rgb(var(--dc-red-400-rgb) / 30%);
+  --dc-alert-accent-border-color: var(--dc-red-500);
+}
+
+.dark .dc-alert_tint_blue,
+.dark.dc-alert_tint_blue {
+  --dc-alert-text-color: var(--dc-blue-300);
+  --dc-alert-icon-color: var(--dc-blue-300);
+  --dc-alert-bg: rgb(var(--dc-blue-200-rgb) / 10%);
+  --dc-alert-border-color: rgb(var(--dc-blue-400-rgb) / 30%);
+  --dc-alert-accent-border-color: var(--dc-blue-400);
+}
+
+.dark .dc-alert_tint_green,
+.dark.dc-alert_tint_green {
+  --dc-alert-text-color: var(--dc-green-400);
+  --dc-alert-icon-color: var(--dc-green-400);
+  --dc-alert-bg: rgb(var(--dc-green-200-rgb) / 10%);
+  --dc-alert-border-color: rgb(var(--dc-green-400-rgb) / 30%);
   --dc-alert-accent-border-color: var(--dc-green-500);
 }
 
@@ -3151,68 +3666,68 @@
   --dc-toast-close-btn-color: var(--dc-gray-50);
   --dc-toast-close-btn-bg: var(--dc-gray-500);
   --dc-toast-btn-text-color: var(--dc-gray-100);
-  --dc-toast-btn-bg: rgb(var(--dc-gray-50-rgb) / 0.15);
-  --dc-toast-btn-bg-hover: rgb(var(--dc-gray-50-rgb) / 0.3);
+  --dc-toast-btn-bg: rgb(var(--dc-gray-50-rgb) / 15%);
+  --dc-toast-btn-bg-hover: rgb(var(--dc-gray-50-rgb) / 30%);
   --dc-toast-btn-focus-ring-color: var(--dc-gray-200);
 
-  color-scheme: light;
-  font: var(--dc-text-sm);
-  color: var(--dc-toast-text-color);
   position: relative;
   display: inline-flex;
   min-width: 256px;
+  font: var(--dc-text-sm);
+  color: var(--dc-toast-text-color);
   text-align: left;
-  border-radius: 10px;
+  color-scheme: light;
   background: var(--dc-toast-bg);
+  border-radius: 10px;
   box-shadow: var(--dc-shadow-lg);
 }
 
 .dc-toast__close-btn {
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  color: var(--dc-toast-close-btn-color);
   position: absolute;
   top: -8px;
   left: -8px;
+  box-sizing: border-box;
   display: inline-flex;
-  opacity: 0;
-  cursor: pointer;
   align-items: center;
   justify-content: center;
-  box-sizing: border-box;
   width: 24px;
   height: 24px;
   padding: 0;
+  color: var(--dc-toast-close-btn-color);
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
   pointer-events: none;
-  transition: opacity 150ms ease;
+  cursor: pointer;
+  background: var(--dc-toast-close-btn-bg);
   border: none;
   border-radius: 50%;
-  background: var(--dc-toast-close-btn-bg);
   box-shadow:
     var(--dc-shadow-sm),
     var(--dc-shadow-md);
+  opacity: 0;
+  transition: opacity 150ms ease;
 }
 
 .dc-toast:hover .dc-toast__close-btn {
-  opacity: 1;
   pointer-events: all;
+  opacity: 1;
 }
 
 .dc-toast__btn {
+  box-sizing: border-box;
+  padding: 4px 12px;
+  font: var(--dc-text-xs);
+  color: var(--dc-toast-btn-text-color);
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
-  font: var(--dc-text-xs);
-  color: var(--dc-toast-btn-text-color);
   cursor: pointer;
-  box-sizing: border-box;
-  padding: 4px 12px;
-  transition: 100ms ease;
-  transition-property: background-color, box-shadow;
+  background: var(--dc-toast-btn-bg);
   border: none;
   border-radius: 6px;
-  background: var(--dc-toast-btn-bg);
+  transition: 100ms ease;
+  transition-property: background-color, box-shadow;
 }
 
 .dc-toast__btn:hover {
@@ -3220,8 +3735,8 @@
 }
 
 .dc-toast__btn:focus {
-  outline: none;
   background: var(--dc-toast-btn-bg-hover);
+  outline: none;
   box-shadow: 0 0 0 1px var(--dc-toast-btn-focus-ring-color);
 }
 
@@ -3241,9 +3756,9 @@
 }
 
 .dc-toast__actions {
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  box-sizing: border-box;
   padding: 4px;
 }
 
@@ -3256,36 +3771,60 @@
 }
 
 .dc-toast__icon {
-  color: var(--dc-toast-icon-color);
   display: inline-flex;
   flex-shrink: 0;
   margin-right: 12px;
+  color: var(--dc-toast-icon-color);
 }
 
 .dc-toast__title {
+  margin: 0;
   font: inherit;
   font-weight: 500;
-  margin: 0;
 }
 
 .dc-toast__message {
-  color: var(--dc-toast-secondary-text-color);
   margin-top: 0.25em;
+  color: var(--dc-toast-secondary-text-color);
+}
+
+.dark .dc-toast,
+.dark.dc-toast {
+  --dc-toast-text-color: var(--dc-gray-800);
+  --dc-toast-secondary-text-color: var(--dc-gray-600);
+  --dc-toast-icon-color: var(--dc-gray-700);
+  --dc-toast-bg: var(--dc-gray-100);
+  --dc-toast-close-btn-color: var(--dc-gray-800);
+  --dc-toast-close-btn-bg: var(--dc-gray-100);
+  --dc-toast-btn-text-color: var(--dc-gray-800);
+  --dc-toast-btn-bg: rgb(var(--dc-gray-900-rgb) / 10%);
+  --dc-toast-btn-bg-hover: rgb(var(--dc-gray-900-rgb) / 20%);
+  --dc-toast-btn-focus-ring-color: var(--dc-gray-700);
+
+  color-scheme: dark;
+}
+
+.dark .dc-toast .dc-toast__close-btn,
+.dark.dc-toast .dc-toast__close-btn {
+  box-shadow:
+    0 0 0 1px rgb(var(--dc-black-rgb) / 10%),
+    var(--dc-shadow-sm),
+    var(--dc-shadow-md);
 }
 
 .dc-toasts-list {
   --dc-toaster-padding: 16px;
   --dc-toaster-animation: 200ms ease;
 
-  color-scheme: light;
   position: fixed;
-  z-index: var(--dc-toaster-z-index);
   right: var(--dc-toaster-padding);
   left: var(--dc-toaster-padding);
+  z-index: var(--dc-toaster-z-index);
   box-sizing: border-box;
-  margin: 0;
   padding: 0;
+  margin: 0;
   list-style: none;
+  color-scheme: light;
   pointer-events: none;
 }
 
@@ -3364,20 +3903,25 @@
   animation-name: dc-toast-slide-bottom;
 }
 
+.dark .dc-toaster,
+.dark.dc-toaster {
+  color-scheme: dark;
+}
+
 .dc-empty-state {
   --dc-empty-state-inner-width: 640px;
   --dc-empty-state-primary-color: var(--dc-primary-text-color);
   --dc-empty-state-secondary-color: var(--dc-secondary-text-color);
 
-  color-scheme: light;
-  font: var(--dc-text-sm);
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  box-sizing: border-box;
   padding: 16px;
+  font: var(--dc-text-sm);
   text-align: center;
+  color-scheme: light;
 }
 
 .dc-empty-state__image {
@@ -3394,9 +3938,6 @@
   font: 700 var(--dc-text-md);
 }
 
-.dc-empty-state__message {
-}
-
 * + .dc-empty-state__title,
 * + .dc-empty-state__message {
   margin-top: 8px;
@@ -3415,7 +3956,9 @@
   margin-top: 12px;
 }
 
-.dc-empty-state__content {
+.dark .dc-empty-state,
+.dark.dc-empty-state {
+  color-scheme: dark;
 }
 
 /* Navigation */
@@ -3432,17 +3975,17 @@
 }
 
 .dc-tab {
+  position: relative;
+  padding: 0;
+  margin: 0;
+  font: var(--dc-text-sm);
+  color: var(--dc-tab-text-color);
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
-  font: var(--dc-text-sm);
-  color: var(--dc-tab-text-color);
-  position: relative;
   cursor: pointer;
-  margin: 0;
-  padding: 0;
-  border: none;
   background: none;
+  border: none;
 }
 
 .dc-tab:focus {
@@ -3450,14 +3993,14 @@
 }
 
 .dc-tab[aria-selected="true"]::after {
-  content: "";
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 2px;
-  border-radius: 1px;
+  content: "";
   background: var(--dc-blue-500);
+  border-radius: 1px;
 }
 
 .dc-tab__layout {
@@ -3465,11 +4008,11 @@
   align-items: center;
   justify-content: center;
   height: 32px;
-  margin-bottom: 8px;
   padding-right: 8px;
   padding-left: 8px;
-  border-radius: 8px;
+  margin-bottom: 8px;
   background: var(--dc-tab-bg);
+  border-radius: 8px;
 }
 
 .dc-tab:hover .dc-tab__layout {
@@ -3498,11 +4041,11 @@
 }
 
 .dc-tab-list {
+  box-sizing: border-box;
   display: flex;
-  overflow-x: auto;
   align-items: center;
-  box-sizing: border-box;
   max-width: 100%;
+  overflow-x: auto;
   box-shadow: inset 0 -1px 0 var(--dc-tablist-border-color);
 }
 
@@ -3510,6 +4053,11 @@
   margin-left: 16px;
 }
 
+.dark .dc-tabs,
+.dark.dc-tabs {
+  color-scheme: dark;
+}
+
 .dc-menu {
   --dc-menu-item-icon-gap: 8px;
   --dc-menu-item-color: var(--dc-button-gray-plain-text-color);
@@ -3518,12 +4066,12 @@
   --dc-menu-item-bg-destructive: var(--dc-button-red-plain-bg-hover);
   --dc-menu-separator-color: var(--dc-bg-transparent-2);
 
-  color-scheme: light;
   box-sizing: border-box;
   width: 100%;
-  margin: 0;
   padding: 0;
+  margin: 0;
   list-style: none;
+  color-scheme: light;
 }
 
 .dc-menu__container {
@@ -3539,24 +4087,24 @@
 }
 
 .dc-menu-btn {
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  font: var(--dc-text-sm);
-  color: var(--dc-menu-item-color);
   display: flex;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
   align-items: center;
   width: 100%;
   height: 32px;
   padding: 0 12px;
+  font: var(--dc-text-sm);
+  color: var(--dc-menu-item-color);
   text-align: left;
   white-space: nowrap;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  background: transparent;
   border: none;
   border-radius: 6px;
-  background: transparent;
 }
 
 .dc-menu-btn:hover {
@@ -3564,13 +4112,13 @@
 }
 
 .dc-menu-btn:focus {
-  outline: none;
   background: var(--dc-menu-item-bg);
+  outline: none;
 }
 
 .dc-menu-btn:disabled {
-  opacity: var(--dc-disabled-state-opacity);
   cursor: default;
+  opacity: var(--dc-disabled-state-opacity);
 }
 
 .dc-menu-btn__label {
@@ -3593,6 +4141,11 @@
   background: var(--dc-menu-item-bg-destructive);
 }
 
+.dark .dc-menu,
+.dark.dc-menu {
+  color-scheme: dark;
+}
+
 .dc-nav-list {
   --dc-nav-list-title-color: var(--dc-secondary-text-color);
   --dc-nav-link-text-color: var(--dc-primary-text-color);
@@ -3605,8 +4158,8 @@
 }
 
 .dc-nav-list__items {
-  margin: 0;
   padding: 0;
+  margin: 0;
   list-style: none;
 }
 
@@ -3630,14 +4183,14 @@
 }
 
 .dc-nav-link {
-  font: var(--dc-text-sm);
-  color: var(--dc-nav-link-text-color);
   display: flex;
-  cursor: pointer;
   align-items: center;
   height: 36px;
-  white-space: nowrap;
+  font: var(--dc-text-sm);
+  color: var(--dc-nav-link-text-color);
   text-decoration: none;
+  white-space: nowrap;
+  cursor: pointer;
   border-radius: 8px;
 }
 
@@ -3667,10 +4220,10 @@
 }
 
 .dc-nav-link__text {
-  overflow: hidden;
   flex-grow: 1;
   grid-area: text;
   min-width: 0;
+  overflow: hidden;
   text-overflow: ellipsis;
 }
 
@@ -3678,45 +4231,50 @@
   margin-left: 8px;
 }
 
+.dark .dc-nav-list,
+.dark.dc-nav-list {
+  color-scheme: dark;
+}
+
 .dc-breadcrumbs {
   --dc-breadcrumbs-text-color: var(--dc-secondary-text-color);
   --dc-breadcrumbs-text-color-hover: var(--dc-primary-text-color);
   --dc-breadcrumbs-text-color-active: var(--dc-primary-text-color);
-  --dc-breadcrumbs-separator-color: rgb(var(--dc-gray-500-rgb) / 0.5);
+  --dc-breadcrumbs-separator-color: rgb(var(--dc-gray-500-rgb) / 50%);
 
   color-scheme: light;
 }
 
 .dc-breadcrumbs__items {
-  color: var(--dc-breadcrumbs-text-color);
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  margin: 0;
   padding: 0;
+  margin: 0;
+  color: var(--dc-breadcrumbs-text-color);
   list-style: none;
 }
 
 .dc-breadcrumbs-item {
-  font: var(--dc-text-sm);
-  color: inherit;
   display: inline-flex;
   align-items: center;
   padding: 4px 0;
+  font: var(--dc-text-sm);
+  color: inherit;
 }
 
 .dc-breadcrumbs-item__link {
-  color: inherit;
   display: flex;
   flex-grow: 1;
   align-items: center;
+  color: inherit;
   text-decoration: none;
 }
 
 .dc-breadcrumbs-item__link:hover {
   color: var(--dc-breadcrumbs-text-color-hover);
-  cursor: pointer;
   text-decoration: underline;
+  cursor: pointer;
 }
 
 .dc-breadcrumbs-item__link.active,
@@ -3732,18 +4290,25 @@
 }
 
 .dc-breadcrumbs-item__separator {
-  color: var(--dc-breadcrumbs-separator-color);
   display: inline-flex;
+  margin: 0 12px;
+  color: var(--dc-breadcrumbs-separator-color);
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
-  margin: 0 12px;
 }
 
 .dc-breadcrumbs-item:last-child .dc-breadcrumbs-item__separator {
   display: none;
 }
 
+.dark .dc-breadcrumbs,
+.dark.dc-breadcrumbs {
+  --dc-breadcrumbs-separator-color: rgb(var(--dc-gray-400-rgb) / 50%);
+
+  color-scheme: dark;
+}
+
 .dc-filter-buttons {
   --dc-filter-button-text-color: var(--dc-button-gray-tinted-text-color);
   --dc-filter-button-bg: var(--dc-button-gray-tinted-bg);
@@ -3752,13 +4317,13 @@
   --dc-filter-button-bg-active: var(--dc-button-blue-bg);
   --dc-filter-button-bg-active-hover: var(--dc-button-blue-bg-hover);
 
-  color-scheme: light;
   position: relative;
   display: flex;
-  overflow: auto;
   align-items: center;
   max-width: 100%;
   padding-bottom: 4px;
+  overflow: auto;
+  color-scheme: light;
 }
 
 .dc-filter-buttons > * + * {
@@ -3766,23 +4331,23 @@
 }
 
 .dc-filter-button {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  height: 28px;
+  padding: 0 8px;
   font: var(--dc-text-sm);
   color: var(--dc-filter-button-text-color);
-  display: inline-flex;
+  white-space: nowrap;
   cursor: pointer;
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
-  align-items: center;
-  box-sizing: border-box;
-  height: 28px;
-  padding: 0 8px;
-  transition-duration: 0.2s;
-  transition-property: color, background-color;
-  white-space: nowrap;
+  background: var(--dc-filter-button-bg);
   border: 1px solid transparent;
   border-radius: 7px;
-  background: var(--dc-filter-button-bg);
+  transition-duration: 0.2s;
+  transition-property: color, background-color;
 }
 
 .dc-filter-button:hover {
@@ -3800,15 +4365,20 @@
   background: var(--dc-filter-button-bg-active-hover);
 }
 
+.dark .dc-filter-buttons,
+.dark.dc-filter-buttons {
+  color-scheme: dark;
+}
+
 /* Other */
 
 .dc-filter-token {
-  color: var(--dc-filtered-search-token-color);
   display: inline-flex;
   align-items: center;
   min-width: 0;
-  border-radius: 6px;
+  color: var(--dc-filtered-search-token-color);
   background: var(--dc-filtered-search-token-bg);
+  border-radius: 6px;
 }
 
 .dc-filter-token_highlighted {
@@ -3818,24 +4388,24 @@
 
 .dc-filter-token__label,
 .dc-filter-token__button {
-  font-size: 14px;
-  color: inherit;
-  cursor: pointer;
   box-sizing: border-box;
   height: 28px;
   padding: 0;
-  border: none;
+  font-size: 14px;
+  color: inherit;
+  cursor: pointer;
   background: none;
+  border: none;
 }
 
 .dc-filter-token__label {
-  line-height: 28px;
-  overflow: hidden;
   min-width: 0;
   max-width: 100%;
   padding: 0 4px 0 8px;
-  white-space: nowrap;
+  overflow: hidden;
+  line-height: 28px;
   text-overflow: ellipsis;
+  white-space: nowrap;
   border-top-left-radius: inherit;
   border-bottom-left-radius: inherit;
 }
@@ -3852,8 +4422,8 @@
 
 .dc-filter-token__label:focus,
 .dc-filter-token__button:focus {
-  outline: none;
   background: var(--dc-filtered-search-token-bg-hover);
+  outline: none;
 }
 
 .dc-filter-token__label:hover,
@@ -3874,11 +4444,11 @@
 }
 
 .dc-string-filter-input {
+  box-sizing: border-box;
   display: grid;
   grid-template-columns: auto 1fr;
   grid-gap: 4px 8px;
   align-items: center;
-  box-sizing: border-box;
   padding-left: 4px;
 }
 
@@ -3887,14 +4457,14 @@
 }
 
 .dc-filter-value-list {
-  overflow-y: auto;
-  scroll-behavior: smooth;
-  scroll-snap-type: y mandatory;
   box-sizing: border-box;
   max-height: 192px;
-  margin: 0;
   padding: 0;
+  margin: 0;
+  overflow-y: auto;
   list-style: none;
+  scroll-behavior: smooth;
+  scroll-snap-type: y mandatory;
 }
 
 .dc-filter-value-list > li {
@@ -3905,10 +4475,10 @@
 }
 
 .dc-filter-popover {
-  font: var(--dc-text-sm);
   width: 320px;
   max-width: 100%;
   padding: 16px;
+  font: var(--dc-text-sm);
 }
 
 .dc-filter-form {
@@ -3921,10 +4491,10 @@
 }
 
 .dc-filter-form__value-list {
-  margin-right: -16px;
-  margin-left: -16px;
   padding-right: 16px;
   padding-left: 16px;
+  margin-right: -16px;
+  margin-left: -16px;
 }
 
 .dc-filter-form__buttons {
@@ -3951,29 +4521,29 @@
   --dc-filtered-search-selected-option-bg: var(--dc-primary-color);
   --dc-filtered-search-listbox-bg: var(--dc-white);
   --dc-filtered-search-listbox-shadow:
-    0 0 0 1px rgb(var(--dc-black-rgb) / 0.075),
-    0 -1px 0 0 rgb(var(--dc-black-rgb) / 0.05),
+    0 0 0 1px rgb(var(--dc-black-rgb) / 7.5%),
+    0 -1px 0 0 rgb(var(--dc-black-rgb) / 5%),
     var(--dc-shadow-lg);
   --dc-filtered-search-token-color: var(--dc-primary-text-color);
   --dc-filtered-search-token-color-selected: var(--dc-on-primary-color);
   --dc-filtered-search-token-bg: var(--dc-gray-200);
-  --dc-filtered-search-token-bg-hover: rgb(var(--dc-black-rgb) / 0.1);
+  --dc-filtered-search-token-bg-hover: rgb(var(--dc-black-rgb) / 10%);
   --dc-filtered-search-token-bg-selected: var(--dc-primary-color);
 
-  color-scheme: light;
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  width: 100%;
   font-family: var(--dc-primary-font);
   font-size: var(--dc-filtered-search-font-size);
   font-weight: 400;
   line-height: 1;
   color: var(--dc-filtered-search-text-color);
-  position: relative;
-  display: flex;
+  color-scheme: light;
   cursor: text;
-  box-sizing: border-box;
-  width: 100%;
+  background: var(--dc-filtered-search-bg);
   border: 1px solid var(--dc-filtered-search-border-color);
   border-radius: var(--dc-filtered-search-border-radius);
-  background: var(--dc-filtered-search-bg);
 }
 
 .dc-filtered-search_has_focus {
@@ -4018,18 +4588,18 @@
 }
 
 .dc-filtered-search__input {
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  font: inherit;
-  color: inherit;
   flex-grow: 1;
-  height: 28px;
   min-width: 0;
+  height: 28px;
   padding: 0 8px;
+  font: inherit;
+  color: inherit;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background: none;
   border: none;
   border-radius: inherit;
-  background: none;
 }
 
 .dc-filtered-search__input::-moz-placeholder {
@@ -4047,26 +4617,26 @@
 }
 
 .dc-filtered-search__list-box {
-  font-size: var(--dc-filtered-search-font-size);
   position: absolute;
-  z-index: var(--dc-overlay-z-index);
   top: calc(100% + 8px);
   left: 0;
+  z-index: var(--dc-overlay-z-index);
   box-sizing: border-box;
   width: 100%;
-  margin: 0;
   padding: 4px;
+  margin: 0;
+  font-size: var(--dc-filtered-search-font-size);
   list-style: none;
-  border-radius: var(--dc-filtered-search-border-radius);
   background: var(--dc-filtered-search-listbox-bg);
+  border-radius: var(--dc-filtered-search-border-radius);
   box-shadow: var(--dc-filtered-search-listbox-shadow);
 }
 
 .dc-filtered-search__list-box > [role="option"] {
-  color: var(--dc-filtered-search-option-color);
-  cursor: pointer;
   box-sizing: border-box;
   padding: 6px 8px;
+  color: var(--dc-filtered-search-option-color);
+  cursor: pointer;
   border-radius: 5px;
 }
 
@@ -4074,3 +4644,15 @@
   color: var(--dc-filtered-search-selected-option-color);
   background: var(--dc-filtered-search-selected-option-bg);
 }
+
+.dark .dc-filtered-search,
+.dark.dc-filtered-search {
+  --dc-filtered-search-listbox-bg: var(--dc-gray-800);
+  --dc-filtered-search-listbox-shadow:
+    0 0 0 1px var(--dc-gray-700),
+    var(--dc-shadow-lg);
+  --dc-filtered-search-token-bg: var(--dc-gray-700);
+  --dc-filtered-search-token-bg-hover: rgb(var(--dc-white-rgb) / 10%);
+
+  color-scheme: dark;
+}