draft-components 2.11.0 → 3.0.0

package/css/draft-components-utilities.css

@@ -1617,13 +1617,12 @@
 
 .text-truncate {
   overflow: hidden;
-  white-space: nowrap;
   text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-/* Line height */
-
-/* https://tailwindcss.com/docs/line-height */
+/* Line height
+ * https://tailwindcss.com/docs/line-height */
 
 .leading-none {
   line-height: 1 !important;
@@ -1652,14 +1651,14 @@
 .visually-hidden,
 .visually-hidden-focusable:not(:focus, :focus-within) {
   position: absolute !important;
-  overflow: hidden !important;
   width: 1px !important;
   height: 1px !important;
-  margin: -1px !important;
   padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
   white-space: nowrap !important;
   border: 0 !important;
-  clip: rect(0, 0, 0, 0) !important;
 }
 
 .v-align-baseline {

package/css/draft-components-variables.css

@@ -0,0 +1,437 @@
+:root {
+  --dc-overlay-z-index: 1000;
+  --dc-toaster-z-index: 1010;
+
+  /* Typography */
+
+  /* https://tailwindcss.com/docs/font-family */
+  --dc-font-serif:
+    ui-serif, "Georgia", "Cambria", "Times New Roman", "Times", serif;
+  --dc-font-sans:
+    ui-sans-serif, system-ui, -apple-system, "BlinkMacSystemFont", "Segoe UI",
+    "Roboto", "Helvetica Neue", "Arial", "Noto Sans", sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+    "Noto Color Emoji";
+  --dc-font-mono:
+    ui-monospace, "SFMono-Regular", "SF Mono", "Menlo", "Monaco", "Consolas",
+    "Liberation Mono", "Courier New", monospace;
+  --dc-primary-font: var(--dc-font-sans);
+
+  /* https://tailwindcss.com/docs/font-size */
+  --dc-text-2xs: 10px/12px var(--dc-primary-font);
+  --dc-text-xs: 12px/16px var(--dc-primary-font);
+  --dc-text-sm: 14px/20px var(--dc-primary-font);
+  --dc-text-md: 16px/24px var(--dc-primary-font);
+  --dc-text-lg: 18px/28px var(--dc-primary-font);
+  --dc-text-xl: 20px/28px var(--dc-primary-font);
+  --dc-text-2xl: 24px/32px var(--dc-primary-font);
+  --dc-text-3xl: 30px/36px var(--dc-primary-font);
+  --dc-text-4xl: 36px/40px var(--dc-primary-font);
+  --dc-text-5xl: 48px/1 var(--dc-primary-font);
+
+  /* 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-rgb: 249 250 251;
+  --dc-gray-100-rgb: 243 244 246;
+  --dc-gray-200-rgb: 229 231 235;
+  --dc-gray-300-rgb: 209 213 219;
+  --dc-gray-400-rgb: 156 163 175;
+  --dc-gray-500-rgb: 107 114 128;
+  --dc-gray-600-rgb: 75 85 99;
+  --dc-gray-700-rgb: 55 65 81;
+  --dc-gray-800-rgb: 31 41 55;
+  --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-rgb: 254 242 242;
+  --dc-red-100-rgb: 254 226 226;
+  --dc-red-200-rgb: 254 202 202;
+  --dc-red-300-rgb: 252 165 165;
+  --dc-red-400-rgb: 248 113 113;
+  --dc-red-500-rgb: 239 68 68;
+  --dc-red-600-rgb: 220 38 38;
+  --dc-red-700-rgb: 185 28 28;
+  --dc-red-800-rgb: 153 27 27;
+  --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-rgb: 255 247 237;
+  --dc-orange-100-rgb: 255 237 213;
+  --dc-orange-200-rgb: 254 215 170;
+  --dc-orange-300-rgb: 253 186 116;
+  --dc-orange-400-rgb: 251 146 60;
+  --dc-orange-500-rgb: 249 115 22;
+  --dc-orange-600-rgb: 234 88 12;
+  --dc-orange-700-rgb: 194 65 12;
+  --dc-orange-800-rgb: 154 52 18;
+  --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-rgb: 254 252 232;
+  --dc-yellow-100-rgb: 254 249 195;
+  --dc-yellow-200-rgb: 254 240 138;
+  --dc-yellow-300-rgb: 253 224 71;
+  --dc-yellow-400-rgb: 250 204 21;
+  --dc-yellow-500-rgb: 234 179 8;
+  --dc-yellow-600-rgb: 202 138 4;
+  --dc-yellow-700-rgb: 161 98 7;
+  --dc-yellow-800-rgb: 133 77 14;
+  --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-rgb: 240 253 244;
+  --dc-green-100-rgb: 220 252 231;
+  --dc-green-200-rgb: 187 247 208;
+  --dc-green-300-rgb: 134 239 172;
+  --dc-green-400-rgb: 74 222 128;
+  --dc-green-500-rgb: 34 197 94;
+  --dc-green-600-rgb: 22 163 74;
+  --dc-green-700-rgb: 21 128 61;
+  --dc-green-800-rgb: 22 101 52;
+  --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-rgb: 240 249 255;
+  --dc-sky-100-rgb: 224 242 254;
+  --dc-sky-200-rgb: 186 230 253;
+  --dc-sky-300-rgb: 125 211 252;
+  --dc-sky-400-rgb: 56 189 248;
+  --dc-sky-500-rgb: 14 165 233;
+  --dc-sky-600-rgb: 2 132 199;
+  --dc-sky-700-rgb: 3 105 161;
+  --dc-sky-800-rgb: 7 89 133;
+  --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-rgb: 239 246 255;
+  --dc-blue-100-rgb: 219 234 254;
+  --dc-blue-200-rgb: 191 219 254;
+  --dc-blue-300-rgb: 147 197 253;
+  --dc-blue-400-rgb: 96 165 250;
+  --dc-blue-500-rgb: 59 130 246;
+  --dc-blue-600-rgb: 37 99 235;
+  --dc-blue-700-rgb: 29 78 216;
+  --dc-blue-800-rgb: 30 64 175;
+  --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-rgb: 245 243 255;
+  --dc-violet-100-rgb: 237 233 254;
+  --dc-violet-200-rgb: 221 214 254;
+  --dc-violet-300-rgb: 196 181 253;
+  --dc-violet-400-rgb: 167 139 250;
+  --dc-violet-500-rgb: 139 92 246;
+  --dc-violet-600-rgb: 124 58 237;
+  --dc-violet-700-rgb: 109 40 217;
+  --dc-violet-800-rgb: 91 33 182;
+  --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-rgb: 253 242 248;
+  --dc-pink-100-rgb: 252 231 243;
+  --dc-pink-200-rgb: 251 207 232;
+  --dc-pink-300-rgb: 249 168 212;
+  --dc-pink-400-rgb: 244 114 182;
+  --dc-pink-500-rgb: 236 72 153;
+  --dc-pink-600-rgb: 219 39 119;
+  --dc-pink-700-rgb: 190 24 93;
+  --dc-pink-800-rgb: 157 23 77;
+  --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) / 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) / 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);
+  --dc-secondary-text-color: var(--dc-gray-500);
+  --dc-tertiary-text-color: var(--dc-gray-300);
+
+  /* Primary */
+  --dc-primary-color: var(--dc-blue-500);
+  --dc-primary-color-hover: var(--dc-blue-600);
+  --dc-on-primary-color: var(--dc-white);
+
+  /* Secondary */
+  --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 */
+  --dc-info-text-color: var(--dc-blue-600);
+  --dc-success-text-color: var(--dc-green-700);
+  --dc-error-text-color: var(--dc-red-600);
+  --dc-warning-text-color: var(--dc-orange-600);
+
+  /* Gray button */
+  --dc-button-gray-text-color: var(--dc-gray-800);
+  --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) / 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) / 10%);
+
+  /* Blue button */
+  --dc-button-blue-text-color: var(--dc-white);
+  --dc-button-blue-border-color: transparent;
+  --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) / 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) / 15%);
+
+  /* Red button */
+  --dc-button-red-text-color: var(--dc-white);
+  --dc-button-red-border-color: transparent;
+  --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) / 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) / 15%);
+
+  /* Green button */
+  --dc-button-green-text-color: var(--dc-white);
+  --dc-button-green-border-color: transparent;
+  --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) / 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) / 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: var(--dc-white);
+  --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) / 15%);
+  --dc-control-error-color: var(--dc-red-500);
+  --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) / 5%);
+  --dc-shadow:
+    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) / 10%),
+    0 2px 4px -2px rgb(var(--dc-black-rgb) / 10%);
+  --dc-shadow-lg:
+    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) / 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%);
+}