draft-components 1.2.1 → 1.3.0

package/css/draft-components.css

@@ -26,145 +26,222 @@
   --dc-text-4xl: 36px/40px var(--dc-primary-font);
   --dc-text-5xl: 48px/1 var(--dc-primary-font);
 
-  /* Shadows */
-  /* https://tailwindcss.com/docs/box-shadow */
-  --dc-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  --dc-shadow:
-    0 1px 3px 0 rgba(0, 0, 0, 0.1),
-    0 1px 2px -1px rgba(0, 0, 0, 0.1);
-  --dc-shadow-md:
-    0 4px 6px -1px rgba(0, 0, 0, 0.1),
-    0 2px 4px -2px rgba(0, 0, 0, 0.1);
-  --dc-shadow-lg:
-    0 10px 15px -3px rgba(0, 0, 0, 0.1),
-    0 4px 6px -4px rgba(0, 0, 0, 0.1);
-  --dc-shadow-xl:
-    0 20px 25px -5px rgba(0, 0, 0, 0.1),
-    0 8px 10px -6px rgba(0, 0, 0, 0.1);
-  --dc-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-  --dc-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
-
   /* Colors  */
+  --dc-white: #fff;
+  --dc-white-rgb: 255, 255, 255;
+  --dc-black: #000;
+  --dc-black-rgb: 0 0 0;
+
   /* 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;
 
   /* 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;
 
   /* 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;
 
   /* 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;
 
   /* 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;
 
   /* 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;
 
   /* 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;
 
   /* 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;
 
   /* 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;
 
   /* Background */
-  --dc-primary-bg: #fff;
-  --dc-bg-transparent-1: rgba(17, 24, 39, 0.05);
-  --dc-bg-transparent-2: rgba(17, 24, 39, 0.1);
-  --dc-bg-transparent-3: rgba(17, 24, 39, 0.2);
+  --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);
 
   /* Borders */
-  --dc-border-color-transparent-1: rgba(17, 24, 39, 0.05);
-  --dc-border-color-transparent-2: rgba(17, 24, 39, 0.15);
-  --dc-border-color-transparent-3: rgba(17, 24, 39, 0.25);
+  --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);
 
   /* Text */
   --dc-primary-text-color: var(--dc-gray-800);
@@ -174,11 +251,11 @@
   /* Primary */
   --dc-primary-color: var(--dc-blue-500);
   --dc-primary-color-hover: var(--dc-blue-600);
-  --dc-on-primary-color: #fff;
+  --dc-on-primary-color: var(--dc-white);
 
   /* Secondary */
-  --dc-secondary-color: rgba(59, 130, 246, 0.15); /* blue-500 */
-  --dc-secondary-color-hover: rgba(59, 130, 246, 0.3); /* blue-500 */
+  --dc-secondary-color: rgb(var(--dc-blue-500-rgb) / 0.15);
+  --dc-secondary-color-hover: rgb(var(--dc-blue-500-rgb) / 0.3);
   --dc-on-secondary-color: var(--dc-blue-600);
 
   /* Accents */
@@ -189,61 +266,79 @@
 
   /* Default button */
   --dc-button-default-text-color: var(--dc-gray-800);
-  --dc-button-default-border-color: rgba(17, 24, 39, 0.1); /* gray-900 */
+  --dc-button-default-border-color: rgb(var(--dc-gray-900-rgb) / 0.1);
   --dc-button-default-bg: var(--dc-gray-100);
   --dc-button-default-bg-hover: var(--dc-gray-200);
   --dc-button-default-tinted-text-color: var(--dc-gray-800);
-  --dc-button-default-tinted-bg: rgba(17, 24, 39, 0.1); /* gray-900 */
-  --dc-button-default-tinted-bg-hover: rgba(17, 24, 39, 0.2); /* gray-900 */
+  --dc-button-default-tinted-bg: rgb(var(--dc-gray-900-rgb) / 0.1);
+  --dc-button-default-tinted-bg-hover: rgb(var(--dc-gray-900-rgb) / 0.2);
   --dc-button-default-plain-text-color: var(--dc-gray-800);
-  --dc-button-default-plain-bg-hover: rgba(17, 24, 39, 0.1); /* gray-900 */
+  --dc-button-default-plain-bg-hover: rgb(var(--dc-gray-900-rgb) / 0.1);
 
   /* Primary button */
-  --dc-button-primary-text-color: #fff;
+  --dc-button-primary-text-color: var(--dc-white);
   --dc-button-primary-border-color: transparent;
   --dc-button-primary-bg: var(--dc-blue-500);
   --dc-button-primary-bg-hover: var(--dc-blue-600);
   --dc-button-primary-tinted-text-color: var(--dc-blue-600);
-  --dc-button-primary-tinted-bg: rgba(59, 130, 246, 0.15); /* blue-500 */
-  --dc-button-primary-tinted-bg-hover: rgba(59, 130, 246, 0.3); /* blue-500 */
+  --dc-button-primary-tinted-bg: rgb(var(--dc-blue-500-rgb) / 0.15);
+  --dc-button-primary-tinted-bg-hover: rgb(var(--dc-blue-500-rgb) / 0.3);
   --dc-button-primary-plain-text-color: var(--dc-blue-600);
-  --dc-button-primary-plain-bg-hover: rgba(59, 130, 246, 0.15); /* blue-500 */
+  --dc-button-primary-plain-bg-hover: rgb(var(--dc-blue-500-rgb) / 0.15);
 
   /* Danger button */
-  --dc-button-danger-text-color: #fff;
+  --dc-button-danger-text-color: var(--dc-white);
   --dc-button-danger-border-color: transparent;
   --dc-button-danger-bg: var(--dc-red-500);
   --dc-button-danger-bg-hover: var(--dc-red-600);
   --dc-button-danger-tinted-text-color: var(--dc-red-600);
-  --dc-button-danger-tinted-bg: rgba(220, 38, 38, 0.15); /* red-500 */
-  --dc-button-danger-tinted-bg-hover: rgba(220, 38, 38, 0.3); /* red-500 */
+  --dc-button-danger-tinted-bg: rgb(var(--dc-red-600-rgb) / 0.15);
+  --dc-button-danger-tinted-bg-hover: rgb(var(--dc-red-600-rgb) / 0.3);
   --dc-button-danger-plain-text-color: var(--dc-red-600);
-  --dc-button-danger-plain-bg-hover: rgba(220, 38, 38, 0.15); /* red-500 */
+  --dc-button-danger-plain-bg-hover: rgb(var(--dc-red-600-rgb) / 0.15);
 
   /* Success button */
-  --dc-button-success-text-color: #fff;
+  --dc-button-success-text-color: var(--dc-white);
   --dc-button-success-border-color: transparent;
   --dc-button-success-bg: var(--dc-green-500);
   --dc-button-success-bg-hover: var(--dc-green-600);
   --dc-button-success-tinted-text-color: var(--dc-green-600);
-  --dc-button-success-tinted-bg: rgba(34, 197, 94, 0.15); /* green-500 */
-  --dc-button-success-tinted-bg-hover: rgba(34, 197, 94, 0.3); /* green-500 */
+  --dc-button-success-tinted-bg: rgb(var(--dc-green-500-rgb) / 0.15);
+  --dc-button-success-tinted-bg-hover: rgb(var(--dc-green-500-rgb) / 0.3);
   --dc-button-success-plain-text-color: var(--dc-green-600);
-  --dc-button-success-plain-bg-hover: rgba(34, 197, 94, 0.15); /* green-500 */
+  --dc-button-success-plain-bg-hover: rgb(var(--dc-green-500-rgb) / 0.15);
 
   /* Controls */
   --dc-control-primary-text-color: var(--dc-gray-800);
   --dc-control-secondary-text-color: var(--dc-gray-500);
   --dc-control-primary-color: var(--dc-blue-500);
   --dc-control-primary-color-hover: var(--dc-blue-600);
-  --dc-control-on-primary-color: #fff;
-  --dc-control-secondary-color: rgba(59, 130, 246, 0.15); /* blue-500 */
+  --dc-control-on-primary-color: var(--dc-white);
+  --dc-control-secondary-color: rgb(var(--dc-blue-500-rgb) / 0.15);
   --dc-control-border-color: var(--dc-gray-300);
-  --dc-control-bg: rgba(249, 250, 251, 0.2); /* gray-50 */
-  --dc-control-bg-inset: rgba(17, 24, 39, 0.15); /* gray-900 */
+  --dc-control-bg: rgb(var(--dc-gray-50-rgb) / 0.2);
+  --dc-control-bg-inset: rgb(var(--dc-gray-900-rgb) / 0.15);
   --dc-control-error-color: var(--dc-red-500);
-  --dc-focus-ring-color: rgb(59, 130, 246, 0.7); /* blue-500 */
+  --dc-focus-ring-color: rgb(var(--dc-blue-500-rgb) / 0.7);
   --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:
+    0 1px 3px 0 rgb(var(--dc-black-rgb) / 0.1),
+    0 1px 2px -1px rgb(var(--dc-black-rgb) / 0.1);
+  --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);
+  --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);
+  --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);
 }
 
 /* Elements */
@@ -274,8 +369,8 @@
 
 .dc-tag {
   --dc-tag-text-color: var(--dc-gray-900);
-  --dc-tag-border-color: transparent; /* gray-300 */
-  --dc-tag-bg: rgba(209, 213, 219, 0.4); /* gray-300 */
+  --dc-tag-border-color: transparent;
+  --dc-tag-bg: rgb(var(--dc-gray-300-rgb) / 0.4);
 
   color-scheme: light;
   font: 400 14px/16px var(--dc-primary-font);
@@ -292,8 +387,8 @@
 
 .dc-tag_plain {
   --dc-tag-text-color: var(--dc-gray-700);
-  --dc-tag-border-color: rgba(55, 65, 81, 0.2); /* gray-700 */
-  --dc-tag-bg: rgba(209, 213, 219, 0.1); /* gray-300 */
+  --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_rounded {
@@ -324,90 +419,90 @@
 
 .dc-tag_green {
   --dc-tag-text-color: var(--dc-green-900);
-  --dc-tag-bg: rgba(134, 239, 172, 0.4); /* green-300 */
+  --dc-tag-bg: rgb(var(--dc-green-300-rgb) / 0.4);
 }
 
 .dc-tag_green.dc-tag_plain {
   --dc-tag-text-color: var(--dc-green-800);
-  --dc-tag-border-color: rgba(21, 128, 61, 0.2); /* green-700 */
-  --dc-tag-bg: rgba(134, 239, 172, 0.1); /* green-300 */
+  --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_cyan {
   --dc-tag-text-color: var(--dc-sky-900);
-  --dc-tag-bg: rgba(125, 211, 252, 0.4); /* sky-300 */
+  --dc-tag-bg: rgb(var(--dc-sky-300-rgb) / 0.4);
 }
 
 .dc-tag_cyan.dc-tag_plain {
   --dc-tag-text-color: var(--dc-sky-700);
-  --dc-tag-border-color: rgba(3, 105, 161, 0.2); /* sky-700 */
-  --dc-tag-bg: rgba(125, 211, 252, 0.1); /* sky-300 */
+  --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_blue {
   --dc-tag-text-color: var(--dc-blue-900);
-  --dc-tag-bg: rgba(147, 197, 253, 0.4); /* blue-300 */
+  --dc-tag-bg: rgb(var(--dc-blue-300-rgb) / 0.4);
 }
 
 .dc-tag_blue.dc-tag_plain {
   --dc-tag-text-color: var(--dc-blue-800);
-  --dc-tag-border-color: rgba(29, 78, 216, 0.2); /* blue-700 */
-  --dc-tag-bg: rgba(147, 197, 253, 0.1); /* blue-300 */
+  --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_purple {
   --dc-tag-text-color: var(--dc-violet-900);
-  --dc-tag-bg: rgba(196, 181, 253, 0.4); /* violet-300 */
+  --dc-tag-bg: rgb(var(--dc-violet-300-rgb) / 0.4);
 }
 
 .dc-tag_purple.dc-tag_plain {
   --dc-tag-text-color: var(--dc-violet-800);
-  --dc-tag-border-color: rgba(109, 40, 217, 0.2); /* violet-700 */
-  --dc-tag-bg: rgba(196, 181, 253, 0.1); /* violet-300 */
+  --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_pink {
   --dc-tag-text-color: var(--dc-pink-900);
-  --dc-tag-bg: rgba(249, 168, 212, 0.4); /* pink-300 */
+  --dc-tag-bg: rgb(var(--dc-pink-300-rgb) / 0.4);
 }
 
 .dc-tag_pink.dc-tag_plain {
   --dc-tag-text-color: var(--dc-pink-700);
-  --dc-tag-border-color: rgba(190, 24, 93, 0.2); /* pink-700 */
-  --dc-tag-bg: rgba(249, 168, 212, 0.1); /* pink-300 */
+  --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_red {
   --dc-tag-text-color: var(--dc-red-900);
-  --dc-tag-bg: rgba(252, 165, 165, 0.4); /* red-300 */
+  --dc-tag-bg: rgb(var(--dc-red-300-rgb) / 0.4);
 }
 
 .dc-tag_red.dc-tag_plain {
   --dc-tag-text-color: var(--dc-red-700);
-  --dc-tag-border-color: rgba(185, 28, 28, 0.2); /* red-700 */
-  --dc-tag-bg: rgba(252, 165, 165, 0.1); /* red-300 */
+  --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_orange {
   --dc-tag-text-color: var(--dc-orange-900);
-  --dc-tag-bg: rgba(253, 186, 116, 0.4); /* orange-300 */
+  --dc-tag-bg: rgb(var(--dc-orange-300-rgb) / 0.4);
 }
 
 .dc-tag_orange.dc-tag_plain {
   --dc-tag-text-color: var(--dc-orange-700);
-  --dc-tag-border-color: rgba(194, 65, 12, 0.2); /* orange-700 */
-  --dc-tag-bg: rgba(253, 186, 116, 0.1); /* orange-300 */
+  --dc-tag-border-color: rgb(var(--dc-orange-700-rgb) / 0.2);
+  --dc-tag-bg: rgb(var(var(--dc-orange-300-rgb)) / 0.1);
 }
 
 .dc-tag_yellow {
   --dc-tag-text-color: var(--dc-yellow-900);
-  --dc-tag-bg: rgba(253, 224, 71, 0.4); /* yellow-300 */
+  --dc-tag-bg: rgb(var(--dc-yellow-300-rgb) / 0.4);
 }
 
 .dc-tag_yellow.dc-tag_plain {
   --dc-tag-text-color: var(--dc-yellow-800);
-  --dc-tag-border-color: rgba(161, 98, 7, 0.2); /* yellow-700 */
-  --dc-tag-bg: rgba(253, 224, 71, 0.1); /* yellow-300 */
+  --dc-tag-border-color: rgb(var(--dc-yellow-700-rgb) / 0.2);
+  --dc-tag-bg: rgb(var(--dc-yellow-300-rgb) / 0.1);
 }
 
 .dc-avatar {
@@ -416,7 +511,7 @@
   --dc-avatar-font-size: 16px;
   --dc-avatar-text-color: white;
   --dc-avatar-bg: none;
-  --dc-avatar-inner-border-color: rgba(55, 65, 81, 0.15);
+  --dc-avatar-inner-border-color: rgb(var(--dc-gray-700-rgb) / 0.15);
 
   color-scheme: light;
   position: relative;
@@ -602,6 +697,7 @@
   content: "";
   position: absolute;
   inset: -3px;
+  pointer-events: none;
   border-radius: calc(3px + var(--dc-button-radius));
   box-shadow: 0 0 0 3px var(--dc-button-focus-ring-color);
 }
@@ -924,7 +1020,7 @@
   --dc-popover-transition-duration: 100ms;
   --dc-popover-bg: white;
   --dc-popover-shadow:
-    0 2px 0 -1px rgba(0, 0, 0, 0.075),
+    0 2px 0 -1px rgb(var(--dc-black-rgb) / 0.075),
     0 0 0 1px var(--dc-gray-200),
     var(--dc-shadow-lg);
 
@@ -1016,7 +1112,7 @@
   --dc-dialog-border-color: transparent;
   --dc-dialog-bg: var(--dc-primary-bg);
   --dc-dialog-inset-shadow-color: var(--dc-border-color-transparent-2);
-  --dc-dialog-backdrop-color: rgba(17, 24, 39, 0.4); /* gray-900 */
+  --dc-dialog-backdrop-color: rgb(var(--dc-gray-900-rgb) / 0.4);
 
   color-scheme: light;
   position: relative;
@@ -1083,13 +1179,17 @@
 .dc-dialog-header,
 .dc-dialog-body,
 .dc-dialog-footer {
-  padding: calc(var(--dc-dialog-safe-area) / 2) var(--dc-dialog-safe-area);
+  padding: var(--dc-dialog-safe-area);
 }
 
 .dc-dialog-header {
   font: var(--dc-text-sm);
 }
 
+.dc-dialog-header_has_border {
+  border-bottom: 1px solid var(--dc-dialog-inset-shadow-color);
+}
+
 .dc-dialog-header__title-bar {
   position: relative;
   padding-right: 24px;
@@ -1102,14 +1202,15 @@
 
 .dc-dialog-header__close-btn {
   position: absolute;
-  top: -8px;
-  right: -8px;
-  width: 32px;
-  height: 32px;
+  top: 0;
+  right: 0;
+  width: 24px;
+  height: 24px;
 }
 
 .dc-dialog-header__subheading,
 .dc-dialog-header__body {
+  margin-top: 4px;
 }
 
 .dc-dialog-body {
@@ -1121,20 +1222,6 @@
   padding-bottom: var(--dc-dialog-safe-area);
 }
 
-.dc-dialog-body_scroll-shadow-top {
-  box-shadow: inset 0 1px 1px var(--dc-dialog-inset-shadow-color);
-}
-
-.dc-dialog-body_scroll-shadow-bottom {
-  box-shadow: inset 0 -1px 1px var(--dc-dialog-inset-shadow-color);
-}
-
-.dc-dialog-body_scroll-shadow-top.dc-dialog-body_scroll-shadow-bottom {
-  box-shadow:
-    inset 0 1px 0 var(--dc-dialog-inset-shadow-color),
-    inset 0 -1px 0 var(--dc-dialog-inset-shadow-color);
-}
-
 .dc-dialog-footer {
   display: flex;
   flex-wrap: wrap;
@@ -1146,10 +1233,13 @@
   margin-left: 8px;
 }
 
+.dc-dialog-footer_has_border {
+  border-top: 1px solid var(--dc-dialog-inset-shadow-color);
+}
+
 .dc-dialog-modal > .dc-dialog-header:first-child,
 .dc-dialog-modal > .dc-dialog-body:first-child,
 .dc-dialog-modal > .dc-dialog-footer:first-child {
-  padding-top: var(--dc-dialog-safe-area);
   border-top-left-radius: inherit;
   border-top-right-radius: inherit;
 }
@@ -1157,7 +1247,6 @@
 .dc-dialog-modal > .dc-dialog-header:last-child,
 .dc-dialog-modal > .dc-dialog-body:last-child,
 .dc-dialog-modal > .dc-dialog-footer:last-child {
-  padding-bottom: var(--dc-dialog-safe-area);
   border-bottom-right-radius: inherit;
   border-bottom-left-radius: inherit;
 }
@@ -1168,7 +1257,7 @@
   --dc-input-font-size: 14px;
   --dc-input-height: 36px;
   --dc-input-padding-x: 12px;
-  --dc-input-border-radius: 6px;
+  --dc-input-border-radius: 7px;
   --dc-input-text-color: var(--dc-control-primary-text-color);
   --dc-input-border-color: var(--dc-control-border-color);
   --dc-input-border-color-error: var(--dc-control-error-color);
@@ -1187,6 +1276,7 @@
   align-items: stretch;
   box-sizing: border-box;
   height: var(--dc-input-height);
+  min-width: 0;
   max-width: 100%;
   vertical-align: middle;
   border: 1px solid var(--dc-input-border-color);
@@ -1225,14 +1315,14 @@
   --dc-input-font-size: 13px;
   --dc-input-height: 32px;
   --dc-input-padding-x: 8px;
-  --dc-input-border-radius: 5px;
+  --dc-input-border-radius: 6px;
 }
 
 .dc-text-input__container_lg {
   --dc-input-font-size: 15px;
   --dc-input-height: 40px;
   --dc-input-padding-x: 16px;
-  --dc-input-border-radius: 7px;
+  --dc-input-border-radius: 8px;
 }
 
 .dc-text-input {
@@ -1374,7 +1464,7 @@
   --dc-textarea-leading: 20px;
   --dc-textarea-padding-y: 8px;
   --dc-textarea-padding-x: 12px;
-  --dc-textarea-radius: 6px;
+  --dc-textarea-radius: 7px;
   --dc-textarea-text-color: var(--dc-primary-text-color);
   --dc-textarea-border-color: var(--dc-control-border-color);
   --dc-textarea-border-color-error: var(--dc-control-error-color);
@@ -1417,7 +1507,7 @@
   --dc-textarea-leading: 16px;
   --dc-textarea-padding-y: 8px;
   --dc-textarea-padding-x: 8px;
-  --dc-textarea-radius: 5px;
+  --dc-textarea-radius: 6px;
 }
 
 .dc-textarea__container_size_lg {
@@ -1425,7 +1515,7 @@
   --dc-textarea-leading: 24px;
   --dc-textarea-padding-y: 12px;
   --dc-textarea-padding-x: 16px;
-  --dc-textarea-radius: 7px;
+  --dc-textarea-radius: 8px;
 }
 
 .dc-textarea {
@@ -1489,9 +1579,8 @@
   --dc-select-font-size: 14px;
   --dc-select-text-color: var(--dc-control-primary-text-color);
   --dc-select-height: 36px;
-  --dc-select-arrow-size: 20px;
   --dc-select-padding-x: 12px;
-  --dc-select-radius: 6px;
+  --dc-select-radius: 7px;
   --dc-select-border-color: var(--dc-control-border-color);
   --dc-select-border-color-error: var(--dc-control-error-color);
   --dc-select-bg: var(--dc-control-bg);
@@ -1541,16 +1630,14 @@
   --dc-select-font-size: 13px;
   --dc-select-height: 32px;
   --dc-select-padding-x: 8px;
-  --dc-select-radius: 5px;
-  --dc-select-arrow-size: 16px;
+  --dc-select-radius: 6px;
 }
 
 .dc-select__container_lg {
   --dc-select-font-size: 15px;
   --dc-select-height: 40px;
   --dc-select-padding-x: 16px;
-  --dc-select-radius: 7px;
-  --dc-select-arrow-size: 20px;
+  --dc-select-radius: 8px;
 }
 
 .dc-select {
@@ -1560,7 +1647,7 @@
   font: inherit;
   color: inherit;
   width: 100%;
-  padding-right: calc(var(--dc-select-arrow-size) + var(--dc-select-padding-x));
+  padding-right: calc(var(--dc-select-height) + 0.5em);
   padding-left: var(--dc-select-padding-x);
   text-transform: none;
   border: none;
@@ -1577,20 +1664,44 @@
   outline: none;
 }
 
+.dc-select:disabled {
+  opacity: 1;
+}
+
+.dc-select:disabled > option {
+  color: inherit;
+}
+
 .dc-select:not(:disabled):hover {
   cursor: pointer;
 }
 
-.dc-select__icon {
+.dc-select__add-on {
   position: absolute;
-  top: calc((var(--dc-select-height) - var(--dc-select-arrow-size)) / 2);
-  right: calc(var(--dc-select-padding-x) / 2);
-  width: var(--dc-select-arrow-size);
-  height: var(--dc-select-arrow-size);
+  top: -1px;
+  right: -1px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--dc-select-height);
+  height: var(--dc-select-height);
   pointer-events: none;
+  border-top-right-radius: inherit;
+  border-bottom-right-radius: inherit;
+}
+
+.dc-select__arrow {
+  width: auto;
+  height: 55%;
 }
 
-.dc-select__container_multiple .dc-select__icon {
+.dc-select__spinner {
+  width: auto;
+  height: 45%;
+}
+
+.dc-select__container_multiple .dc-select__arrow,
+.dc-select__container_multiple .dc-select__spinner {
   display: none;
 }
 
@@ -1649,9 +1760,9 @@
   border-radius: 50%;
   background: var(--dc-switch-thumb-bg);
   box-shadow:
-    0 1px 3px 0 rgba(0, 0, 0, 0.1),
-    0 4px 6px -1px rgba(0, 0, 0, 0.1),
-    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    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 {
@@ -1692,8 +1803,8 @@
 .dc-switch__input:focus + .dc-switch__track::after {
   content: "";
   position: absolute;
-  z-index: -1;
   inset: -3px;
+  pointer-events: none;
   border-radius: calc(3px + var(--dc-switch-radius));
   box-shadow: 0 0 0 3px var(--dc-switch-focus-ring-color);
 }
@@ -1770,8 +1881,8 @@
 .dc-checkbox__input:focus + .dc-checkbox__check::after {
   content: "";
   position: absolute;
-  z-index: -1;
   inset: -3px;
+  pointer-events: none;
   border-radius: calc(3px + var(--dc-checkbox-radius));
   box-shadow: 0 0 0 3px var(--dc-checkbox-focus-ring-color);
 }
@@ -1844,8 +1955,8 @@
 .dc-radio__input:focus + .dc-radio__check::after {
   content: "";
   position: absolute;
-  z-index: -1;
   inset: -3px;
+  pointer-events: none;
   border-radius: 50%;
   box-shadow: 0 0 0 3px var(--dc-radio-color-focus-ring);
 }
@@ -1867,8 +1978,8 @@
   --dc-slider-thumb-height: 20px;
   --dc-slider-thumb-bg: var(--dc-control-on-primary-color);
   --dc-slider-thumb-shadow:
-    0 0 0 1px rgba(0, 0, 0, 0.1),
-    0 2px 3px rgba(0, 0, 0, 0.2);
+    0 0 0 1px rgb(var(--dc-black-rgb) / 0.1),
+    0 2px 3px rgb(var(--dc-black-rgb) / 0.2);
   --dc-slider-thumb-shadow-focus:
     var(--dc-slider-thumb-shadow),
     0 0 0 3px var(--dc-slider-focus-ring-color);
@@ -2152,10 +2263,7 @@
   content: "";
   position: absolute;
   z-index: -1;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
   background: var(--dc-day-bg-range);
 }
 
@@ -2475,7 +2583,7 @@
   --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: rgba(0, 0, 0, 0.05);
+  --dc-color-picker-btn-inner-border-color: rgb(var(--dc-black-rgb) / 0.05);
   --dc-color-picker-btn-focus-ring-color: var(--dc-focus-ring-color);
 
   color-scheme: light;
@@ -2538,7 +2646,7 @@
   transform: translate(-50%, -50%);
   border-radius: 50%;
   background: var(--dc-color-picker-btn-check-color);
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  box-shadow: 0 1px 2px 0 rgb(var(--dc-black-rgb) / 0.05);
 }
 
 .dc-color-picker__btn:focus-within::before {
@@ -2806,8 +2914,8 @@
 .dc-alert {
   --dc-alert-text-color: var(--dc-gray-700);
   --dc-alert-icon-color: var(--dc-gray-500);
-  --dc-alert-bg: rgba(229, 231, 235, 0.25); /* gray-200 */
-  --dc-alert-border-color: rgba(156, 163, 175, 0.25); /* gray-400 */
+  --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-accent-border-color: var(--dc-gray-500);
   --dc-alert-icon-size: 20px;
 
@@ -2870,32 +2978,32 @@
 .dc-alert_appearance_warning {
   --dc-alert-text-color: var(--dc-orange-700);
   --dc-alert-icon-color: var(--dc-orange-600);
-  --dc-alert-bg: rgba(254, 215, 170, 0.2); /* orange-200 */
-  --dc-alert-border-color: rgba(249, 115, 22, 0.25); /* orange-500 */
+  --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-accent-border-color: var(--dc-orange-500);
 }
 
 .dc-alert_appearance_error {
   --dc-alert-text-color: var(--dc-red-700);
   --dc-alert-icon-color: var(--dc-red-600);
-  --dc-alert-bg: rgba(254, 202, 202, 0.2); /* red-200 */
-  --dc-alert-border-color: rgba(239, 68, 68, 0.25); /* red-500 */
+  --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-accent-border-color: var(--dc-red-500);
 }
 
 .dc-alert_appearance_info {
   --dc-alert-text-color: var(--dc-blue-700);
   --dc-alert-icon-color: var(--dc-blue-600);
-  --dc-alert-bg: rgba(191, 219, 254, 0.2); /* blue-200 */
-  --dc-alert-border-color: rgba(59, 130, 246, 0.25); /* blue-500 */
+  --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-accent-border-color: var(--dc-blue-500);
 }
 
 .dc-alert_appearance_success {
   --dc-alert-text-color: var(--dc-green-700);
   --dc-alert-icon-color: var(--dc-green-600);
-  --dc-alert-bg: rgba(187, 247, 208, 0.2); /* green-200 */
-  --dc-alert-border-color: rgba(22, 163, 74, 0.25); /* green-500 */
+  --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-accent-border-color: var(--dc-green-500);
 }
 
@@ -2908,8 +3016,8 @@
   --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: rgba(249, 250, 251, 0.15); /* gray-50 */
-  --dc-toast-btn-bg-hover: rgba(249, 250, 251, 0.3); /* gray-50 */
+  --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-focus-ring-color: var(--dc-gray-200);
 
   color-scheme: light;
@@ -3435,7 +3543,7 @@
   --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(107, 114, 128, 0.5); /* gray-500 */
+  --dc-breadcrumbs-separator-color: rgb(var(--dc-gray-500-rgb) / 0.5);
 
   color-scheme: light;
 }