draft-components 3.6.0 → 4.0.0

package/css/draft-components-variables.css

@@ -1,20 +1,11 @@
 :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-toaster-z-index: 2000;
+
+  /* Fonts */
+  --dc-font-sans: ui-sans-serif, system-ui, sans-serif;
+  --dc-font-serif: ui-serif, serif;
+  --dc-font-mono: ui-monospace, monospace;
   --dc-primary-font: var(--dc-font-sans);
 
   /* https://tailwindcss.com/docs/font-size */
@@ -29,15 +20,42 @@
   --dc-text-4xl: 36px/40px var(--dc-primary-font);
   --dc-text-5xl: 48px/1 var(--dc-primary-font);
 
-  /* Colors  */
-  --dc-white: #fff;
+  /*
+   * Colors
+   *
+   * https://tailwindcss.com/docs/colors
+   * https://www.typescriptlang.org/play/?#code/MYewdgzgLgBFCGBLANgd0WAJgYRMkAThDALwwDeAUDDTBMvFAKYBcF1tnArAAxsDkAYgBmADmHxhwfgBoOnGgEYefGEOGLhXYQE5Z8hQCYVAwU0NNxPfQtoBmE2sHAARpi5NFN2zAAsjoR1feDsXUW9bXlUhADZfAHZfURcIhRiAwQSuLhi9OR8YeIy7O19FbNTOUQzFcx1QytodDJ4NeMN4RpodXlMeYxjFeP4DAF982gBzAngATzYqAt6nXQlhFInbZWiRO2FfYRiumGMdpg94pg2DTgcdzEV3TGuC-x2dYBDJY6jTGJd2tVjukdr4XNkYnZjkUdnZEuUvJsFNUdppDPVhkjOM1UYpFKJDJibk1lkIeA54opDCNOOMDAAvDDABbEmikkSSTnHbamfZ8rjHU6mJi+EVMIkFO6mTC+GWYcJY2hvUzwRSq+CdRVsjKU3Wa1kwEGmLiGE1cF4+GGmPZ7XxHLUwFGmQku-UFHGmfFei22Ho7HjNZopMZIsBMACuUBmyBZSx2ay5Dp5K20qcFGXOmYFDqlTjlst8x2VTi+dhCPx1cKrwIyZtN1IdVqc-hb1gdTqchhiXa7xw9TiGg4lPj9fXgPHHnRDBmg4FY7DjvM5um5GS068LDqFTnFmc3BtzQkwMUwdgeRYy8FE8HRTArO3iokpMWkDqNTi48S4pTvjYyvgA8lXwNDshHRet93dGpgEUHQhj7dkeGACcAxpWg6U4AgmEwWMfHZYQmGEQwiNXeMmHMcx0zIz5PmOQ8RE+Lh4GzA1i3UJ9B3vYV9gAyCfHfI9gB7e0DSbIQXDgmDgIKUDBB0OCXEUH0FH7IR4g0B5MAQ0FeEnNCaAw2hCHgMBJnnRY8PjYRhEuLSkzXAjMHcKjeWw+INTotdnngRIL3jCTDDsaTLPjHR4jsRQRIKASzGY6pgtsMTnEMMokOOWSdBCMoGwNVTBHiISHhy912V8CL-GGadOHgABbFwmAIXDIis9YrlI1zhCC4dbG3dRMCYGJr08+NgFPWU-N5FwXCIvjmvjLgdCYHhlM4GLMDCooostDIXF8b9UPbDIdBSlRf1ynVRDsXhhG00w9rVcl9JgQyaFmJhkHwVAmoUfDCOASx2pWQiPihLc10InghpzLyloSCaVngYAYJYuMzngFwHAVA0Ys+a8eFmhQktVbseG65EMlELhZR4M6oIfRQ9ipW7m0MU4jiq2hkEQGrzINfD1PIsnOGTIQmGAKRXBcvMdF0HQ7IPHbCK7AnODYwQQgGq6uKcURfCRyKax2GImIceWCiS2UCtadLikOQwmYdPK7GN8rmaENULB4AUOZoaZyLAb7uHjVpMH2QHBKkcUpfE6b4kwNsFZ2UQYkIxH4aEYJ+qBB1fk7QxgGyWn+JqGIsrdbbUS4aozxt1EYhdlWmhqPa7EMM2R0Qk1PHZ2kkSYHnoxwhdLOFcXQ5RnwRcEB4JHOaP1fUs8E8lDIU-FAF08EUpT3k7X3eWnRRERbGWgW+u8lEloEkpoXaFknhjf2LbfRaOImAaR3ENZoTqR9uAmHgDGYezVeQhwkOHZw4tprHwKL1OSMsU6NxoPRDwACZSbzbjKaae9BCKDBNeZ+aQWjrSSFjc2LQbL1yLrYWSeIPALT7DUH8wQ3aCHxsRCwT0XowGALMEygdaDsjFgRayEDxZrGoUYS82g9gJQUPRGIlxxAX1eBkVmp5yI4Ifi4E8SDDQtFEApYqFc+jil8M0WunpC5fkYXXUUkJWGQxKABLhSIIAAGt5jAJ+sHVYN17JnFaMRSRnA4EuHgANYQ7dbD0TjqeKQm87DJFDmQkKpjmJMBUcXf0hhdbAFvjQJK5JciqksU4UmC1Ka2L6MAYIKdHEEn2HoP+LhkDhl5ouHc1kYiiICdKeqkgQm0DCVE6aQzkFHSCtoaJCg1bpGYuAnOxQwjEUIatNROQ7BtT-KiGU2FUk0JqCKCc-jzqonflecuvp2RDFNFTVxBgMCYEQJMEAAjtTCiVr0g0U8lrim+bAjI+TMDBOGiqc0Bw5GqwpvicWByfFG2dj0mB2S7pPznjsu6JRRC0UOrCcKE5QZnOtFSSwKLrnnKUmCB5nAABuiA8BMCgO8mA+EZEAsnhmfqMtxknAyE5Y8BEwVOFqeCKJm8fLJEWXzCm4JxZrNoDFAqZZsLQlXiC0Q60ylCHNPbHR1TmwwXWhPClzpPAP29r3AwAAHcMBBrXIA6SPBG65TkFCnp1SwHKeoZjltoN1Ph6Lyl2kKh0atkK6wSUsnYV5sg2UNqYeoJQAFqofOYfOvLZL-HtleA1Oqj7ACfKw0IpM4g0toMIcMwAAAWEBEDwBZfhUOBwA1bDXBE8QrapHzXjqGxOoD0ZRtYhmJ8MsslzWlEEFOXb1k7GQl2U8qaVT20+DOu+FNBiHzXd0HUPA1Q2M-qCccAE7x-2tRgdxjb4yh2IvC4Wa5-qL3nuscWANoahSvOgsNa4EiGH1dG0eSRd5vn5S4Qk8QCmFEVviLgMyqhHQeIkODTck4RV1kSkqOwojtELH-AgIAIBOpASsayaIIHWTFAqmgcCCKjUXe+3kmB4DBG3X4NcAIYM4P2HsDwCadx4hlHe2gSV6pUiCtquSGhArjpUhTI+JRIOjkNV7WCDzRgAG5KCUFAJAWAXMwwQDYNAAgGBJgAG0AC6pAYCWc08IQgMAAAUOnoA2bALVJgMg6CfEdVZkAwgYAAHkXAACsxZQAAHRMDAFGRATAICOYQCgdAWBcD4CIAASgy94-T8WIu2ogNWxzAADAA9AAKhgAAEnIO5nmowYDldK8VjLmnOD2YIE5lzsAzNgC89WpgAAPPzAXgtheAJF6LsX4uOYgD5pgWXvGcFyxAfL4ZCslYALSbcwMATbNW6tMFGPt2rx2CCTBcGwc7LhNvWvgAQKACWasDcG6MVrLW2voQMB1rr4BXO9f60NkbQXQvhaizFkzM25uAIW9liytgVtrY28V7bu2TuHeOwd0YV2LuOdpfdxzqO9sHY85j07m3rtZfUx9sYBhEcFaK-wfgrXKCjC0y5xlEX8CTEc4jkLIAMCOf4AAHTAMzlnQA
+   */
   --dc-white-rgb: 255 255 255;
-  --dc-black: #000;
+  --dc-white: rgb(var(--dc-white-rgb));
   --dc-black-rgb: 0 0 0;
-
-  /* https://tailwindcss.com/docs/customizing-colors */
-
-  /* Gray scale */
+  --dc-black: rgb(var(--dc-black-rgb));
+
+  /* slate */
+  --dc-slate-50-rgb: 248 250 252;
+  --dc-slate-100-rgb: 241 245 249;
+  --dc-slate-200-rgb: 226 232 240;
+  --dc-slate-300-rgb: 203 213 225;
+  --dc-slate-400-rgb: 148 163 184;
+  --dc-slate-500-rgb: 100 116 139;
+  --dc-slate-600-rgb: 71 85 105;
+  --dc-slate-700-rgb: 51 65 85;
+  --dc-slate-800-rgb: 30 41 59;
+  --dc-slate-900-rgb: 15 23 42;
+  --dc-slate-950-rgb: 2 6 23;
+  --dc-slate-50: rgb(var(--dc-slate-50-rgb));
+  --dc-slate-100: rgb(var(--dc-slate-100-rgb));
+  --dc-slate-200: rgb(var(--dc-slate-200-rgb));
+  --dc-slate-300: rgb(var(--dc-slate-300-rgb));
+  --dc-slate-400: rgb(var(--dc-slate-400-rgb));
+  --dc-slate-500: rgb(var(--dc-slate-500-rgb));
+  --dc-slate-600: rgb(var(--dc-slate-600-rgb));
+  --dc-slate-700: rgb(var(--dc-slate-700-rgb));
+  --dc-slate-800: rgb(var(--dc-slate-800-rgb));
+  --dc-slate-900: rgb(var(--dc-slate-900-rgb));
+  --dc-slate-950: rgb(var(--dc-slate-950-rgb));
+
+  /* gray */
   --dc-gray-50-rgb: 249 250 251;
   --dc-gray-100-rgb: 243 244 246;
   --dc-gray-200-rgb: 229 231 235;
@@ -48,6 +66,7 @@
   --dc-gray-700-rgb: 55 65 81;
   --dc-gray-800-rgb: 31 41 55;
   --dc-gray-900-rgb: 17 24 39;
+  --dc-gray-950-rgb: 3 7 18;
   --dc-gray-50: rgb(var(--dc-gray-50-rgb));
   --dc-gray-100: rgb(var(--dc-gray-100-rgb));
   --dc-gray-200: rgb(var(--dc-gray-200-rgb));
@@ -58,8 +77,81 @@
   --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-gray-950: rgb(var(--dc-gray-950-rgb));
+
+  /* zinc */
+  --dc-zinc-50-rgb: 250 250 250;
+  --dc-zinc-100-rgb: 244 244 245;
+  --dc-zinc-200-rgb: 228 228 231;
+  --dc-zinc-300-rgb: 212 212 216;
+  --dc-zinc-400-rgb: 161 161 170;
+  --dc-zinc-500-rgb: 113 113 122;
+  --dc-zinc-600-rgb: 82 82 91;
+  --dc-zinc-700-rgb: 63 63 70;
+  --dc-zinc-800-rgb: 39 39 42;
+  --dc-zinc-900-rgb: 24 24 27;
+  --dc-zinc-950-rgb: 9 9 11;
+  --dc-zinc-50: rgb(var(--dc-zinc-50-rgb));
+  --dc-zinc-100: rgb(var(--dc-zinc-100-rgb));
+  --dc-zinc-200: rgb(var(--dc-zinc-200-rgb));
+  --dc-zinc-300: rgb(var(--dc-zinc-300-rgb));
+  --dc-zinc-400: rgb(var(--dc-zinc-400-rgb));
+  --dc-zinc-500: rgb(var(--dc-zinc-500-rgb));
+  --dc-zinc-600: rgb(var(--dc-zinc-600-rgb));
+  --dc-zinc-700: rgb(var(--dc-zinc-700-rgb));
+  --dc-zinc-800: rgb(var(--dc-zinc-800-rgb));
+  --dc-zinc-900: rgb(var(--dc-zinc-900-rgb));
+  --dc-zinc-950: rgb(var(--dc-zinc-950-rgb));
+
+  /* neutral */
+  --dc-neutral-50-rgb: 250 250 250;
+  --dc-neutral-100-rgb: 245 245 245;
+  --dc-neutral-200-rgb: 229 229 229;
+  --dc-neutral-300-rgb: 212 212 212;
+  --dc-neutral-400-rgb: 163 163 163;
+  --dc-neutral-500-rgb: 115 115 115;
+  --dc-neutral-600-rgb: 82 82 82;
+  --dc-neutral-700-rgb: 64 64 64;
+  --dc-neutral-800-rgb: 38 38 38;
+  --dc-neutral-900-rgb: 23 23 23;
+  --dc-neutral-950-rgb: 10 10 10;
+  --dc-neutral-50: rgb(var(--dc-neutral-50-rgb));
+  --dc-neutral-100: rgb(var(--dc-neutral-100-rgb));
+  --dc-neutral-200: rgb(var(--dc-neutral-200-rgb));
+  --dc-neutral-300: rgb(var(--dc-neutral-300-rgb));
+  --dc-neutral-400: rgb(var(--dc-neutral-400-rgb));
+  --dc-neutral-500: rgb(var(--dc-neutral-500-rgb));
+  --dc-neutral-600: rgb(var(--dc-neutral-600-rgb));
+  --dc-neutral-700: rgb(var(--dc-neutral-700-rgb));
+  --dc-neutral-800: rgb(var(--dc-neutral-800-rgb));
+  --dc-neutral-900: rgb(var(--dc-neutral-900-rgb));
+  --dc-neutral-950: rgb(var(--dc-neutral-950-rgb));
+
+  /* stone */
+  --dc-stone-50-rgb: 250 250 249;
+  --dc-stone-100-rgb: 245 245 244;
+  --dc-stone-200-rgb: 231 229 228;
+  --dc-stone-300-rgb: 214 211 209;
+  --dc-stone-400-rgb: 168 162 158;
+  --dc-stone-500-rgb: 120 113 108;
+  --dc-stone-600-rgb: 87 83 78;
+  --dc-stone-700-rgb: 68 64 60;
+  --dc-stone-800-rgb: 41 37 36;
+  --dc-stone-900-rgb: 28 25 23;
+  --dc-stone-950-rgb: 12 10 9;
+  --dc-stone-50: rgb(var(--dc-stone-50-rgb));
+  --dc-stone-100: rgb(var(--dc-stone-100-rgb));
+  --dc-stone-200: rgb(var(--dc-stone-200-rgb));
+  --dc-stone-300: rgb(var(--dc-stone-300-rgb));
+  --dc-stone-400: rgb(var(--dc-stone-400-rgb));
+  --dc-stone-500: rgb(var(--dc-stone-500-rgb));
+  --dc-stone-600: rgb(var(--dc-stone-600-rgb));
+  --dc-stone-700: rgb(var(--dc-stone-700-rgb));
+  --dc-stone-800: rgb(var(--dc-stone-800-rgb));
+  --dc-stone-900: rgb(var(--dc-stone-900-rgb));
+  --dc-stone-950: rgb(var(--dc-stone-950-rgb));
+
+  /* red */
   --dc-red-50-rgb: 254 242 242;
   --dc-red-100-rgb: 254 226 226;
   --dc-red-200-rgb: 254 202 202;
@@ -70,6 +162,7 @@
   --dc-red-700-rgb: 185 28 28;
   --dc-red-800-rgb: 153 27 27;
   --dc-red-900-rgb: 127 29 29;
+  --dc-red-950-rgb: 69 10 10;
   --dc-red-50: rgb(var(--dc-red-50-rgb));
   --dc-red-100: rgb(var(--dc-red-100-rgb));
   --dc-red-200: rgb(var(--dc-red-200-rgb));
@@ -80,8 +173,9 @@
   --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));
+  --dc-red-950: rgb(var(--dc-red-950-rgb));
 
-  /* Orange scale */
+  /* orange */
   --dc-orange-50-rgb: 255 247 237;
   --dc-orange-100-rgb: 255 237 213;
   --dc-orange-200-rgb: 254 215 170;
@@ -92,6 +186,7 @@
   --dc-orange-700-rgb: 194 65 12;
   --dc-orange-800-rgb: 154 52 18;
   --dc-orange-900-rgb: 124 45 18;
+  --dc-orange-950-rgb: 67 20 7;
   --dc-orange-50: rgb(var(--dc-orange-50-rgb));
   --dc-orange-100: rgb(var(--dc-orange-100-rgb));
   --dc-orange-200: rgb(var(--dc-orange-200-rgb));
@@ -102,8 +197,33 @@
   --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-orange-950: rgb(var(--dc-orange-950-rgb));
+
+  /* amber */
+  --dc-amber-50-rgb: 255 251 235;
+  --dc-amber-100-rgb: 254 243 199;
+  --dc-amber-200-rgb: 253 230 138;
+  --dc-amber-300-rgb: 252 211 77;
+  --dc-amber-400-rgb: 251 191 36;
+  --dc-amber-500-rgb: 245 158 11;
+  --dc-amber-600-rgb: 217 119 6;
+  --dc-amber-700-rgb: 180 83 9;
+  --dc-amber-800-rgb: 146 64 14;
+  --dc-amber-900-rgb: 120 53 15;
+  --dc-amber-950-rgb: 69 26 3;
+  --dc-amber-50: rgb(var(--dc-amber-50-rgb));
+  --dc-amber-100: rgb(var(--dc-amber-100-rgb));
+  --dc-amber-200: rgb(var(--dc-amber-200-rgb));
+  --dc-amber-300: rgb(var(--dc-amber-300-rgb));
+  --dc-amber-400: rgb(var(--dc-amber-400-rgb));
+  --dc-amber-500: rgb(var(--dc-amber-500-rgb));
+  --dc-amber-600: rgb(var(--dc-amber-600-rgb));
+  --dc-amber-700: rgb(var(--dc-amber-700-rgb));
+  --dc-amber-800: rgb(var(--dc-amber-800-rgb));
+  --dc-amber-900: rgb(var(--dc-amber-900-rgb));
+  --dc-amber-950: rgb(var(--dc-amber-950-rgb));
+
+  /* yellow */
   --dc-yellow-50-rgb: 254 252 232;
   --dc-yellow-100-rgb: 254 249 195;
   --dc-yellow-200-rgb: 254 240 138;
@@ -114,6 +234,7 @@
   --dc-yellow-700-rgb: 161 98 7;
   --dc-yellow-800-rgb: 133 77 14;
   --dc-yellow-900-rgb: 113 63 18;
+  --dc-yellow-950-rgb: 66 32 6;
   --dc-yellow-50: rgb(var(--dc-yellow-50-rgb));
   --dc-yellow-100: rgb(var(--dc-yellow-100-rgb));
   --dc-yellow-200: rgb(var(--dc-yellow-200-rgb));
@@ -124,8 +245,33 @@
   --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-yellow-950: rgb(var(--dc-yellow-950-rgb));
+
+  /* lime */
+  --dc-lime-50-rgb: 247 254 231;
+  --dc-lime-100-rgb: 236 252 203;
+  --dc-lime-200-rgb: 217 249 157;
+  --dc-lime-300-rgb: 190 242 100;
+  --dc-lime-400-rgb: 163 230 53;
+  --dc-lime-500-rgb: 132 204 22;
+  --dc-lime-600-rgb: 101 163 13;
+  --dc-lime-700-rgb: 77 124 15;
+  --dc-lime-800-rgb: 63 98 18;
+  --dc-lime-900-rgb: 54 83 20;
+  --dc-lime-950-rgb: 26 46 5;
+  --dc-lime-50: rgb(var(--dc-lime-50-rgb));
+  --dc-lime-100: rgb(var(--dc-lime-100-rgb));
+  --dc-lime-200: rgb(var(--dc-lime-200-rgb));
+  --dc-lime-300: rgb(var(--dc-lime-300-rgb));
+  --dc-lime-400: rgb(var(--dc-lime-400-rgb));
+  --dc-lime-500: rgb(var(--dc-lime-500-rgb));
+  --dc-lime-600: rgb(var(--dc-lime-600-rgb));
+  --dc-lime-700: rgb(var(--dc-lime-700-rgb));
+  --dc-lime-800: rgb(var(--dc-lime-800-rgb));
+  --dc-lime-900: rgb(var(--dc-lime-900-rgb));
+  --dc-lime-950: rgb(var(--dc-lime-950-rgb));
+
+  /* green */
   --dc-green-50-rgb: 240 253 244;
   --dc-green-100-rgb: 220 252 231;
   --dc-green-200-rgb: 187 247 208;
@@ -136,6 +282,7 @@
   --dc-green-700-rgb: 21 128 61;
   --dc-green-800-rgb: 22 101 52;
   --dc-green-900-rgb: 20 83 45;
+  --dc-green-950-rgb: 5 46 22;
   --dc-green-50: rgb(var(--dc-green-50-rgb));
   --dc-green-100: rgb(var(--dc-green-100-rgb));
   --dc-green-200: rgb(var(--dc-green-200-rgb));
@@ -146,8 +293,81 @@
   --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-green-950: rgb(var(--dc-green-950-rgb));
+
+  /* emerald */
+  --dc-emerald-50-rgb: 236 253 245;
+  --dc-emerald-100-rgb: 209 250 229;
+  --dc-emerald-200-rgb: 167 243 208;
+  --dc-emerald-300-rgb: 110 231 183;
+  --dc-emerald-400-rgb: 52 211 153;
+  --dc-emerald-500-rgb: 16 185 129;
+  --dc-emerald-600-rgb: 5 150 105;
+  --dc-emerald-700-rgb: 4 120 87;
+  --dc-emerald-800-rgb: 6 95 70;
+  --dc-emerald-900-rgb: 6 78 59;
+  --dc-emerald-950-rgb: 2 44 34;
+  --dc-emerald-50: rgb(var(--dc-emerald-50-rgb));
+  --dc-emerald-100: rgb(var(--dc-emerald-100-rgb));
+  --dc-emerald-200: rgb(var(--dc-emerald-200-rgb));
+  --dc-emerald-300: rgb(var(--dc-emerald-300-rgb));
+  --dc-emerald-400: rgb(var(--dc-emerald-400-rgb));
+  --dc-emerald-500: rgb(var(--dc-emerald-500-rgb));
+  --dc-emerald-600: rgb(var(--dc-emerald-600-rgb));
+  --dc-emerald-700: rgb(var(--dc-emerald-700-rgb));
+  --dc-emerald-800: rgb(var(--dc-emerald-800-rgb));
+  --dc-emerald-900: rgb(var(--dc-emerald-900-rgb));
+  --dc-emerald-950: rgb(var(--dc-emerald-950-rgb));
+
+  /* teal */
+  --dc-teal-50-rgb: 240 253 250;
+  --dc-teal-100-rgb: 204 251 241;
+  --dc-teal-200-rgb: 153 246 228;
+  --dc-teal-300-rgb: 94 234 212;
+  --dc-teal-400-rgb: 45 212 191;
+  --dc-teal-500-rgb: 20 184 166;
+  --dc-teal-600-rgb: 13 148 136;
+  --dc-teal-700-rgb: 15 118 110;
+  --dc-teal-800-rgb: 17 94 89;
+  --dc-teal-900-rgb: 19 78 74;
+  --dc-teal-950-rgb: 4 47 46;
+  --dc-teal-50: rgb(var(--dc-teal-50-rgb));
+  --dc-teal-100: rgb(var(--dc-teal-100-rgb));
+  --dc-teal-200: rgb(var(--dc-teal-200-rgb));
+  --dc-teal-300: rgb(var(--dc-teal-300-rgb));
+  --dc-teal-400: rgb(var(--dc-teal-400-rgb));
+  --dc-teal-500: rgb(var(--dc-teal-500-rgb));
+  --dc-teal-600: rgb(var(--dc-teal-600-rgb));
+  --dc-teal-700: rgb(var(--dc-teal-700-rgb));
+  --dc-teal-800: rgb(var(--dc-teal-800-rgb));
+  --dc-teal-900: rgb(var(--dc-teal-900-rgb));
+  --dc-teal-950: rgb(var(--dc-teal-950-rgb));
+
+  /* cyan */
+  --dc-cyan-50-rgb: 236 254 255;
+  --dc-cyan-100-rgb: 207 250 254;
+  --dc-cyan-200-rgb: 165 243 252;
+  --dc-cyan-300-rgb: 103 232 249;
+  --dc-cyan-400-rgb: 34 211 238;
+  --dc-cyan-500-rgb: 6 182 212;
+  --dc-cyan-600-rgb: 8 145 178;
+  --dc-cyan-700-rgb: 14 116 144;
+  --dc-cyan-800-rgb: 21 94 117;
+  --dc-cyan-900-rgb: 22 78 99;
+  --dc-cyan-950-rgb: 8 51 68;
+  --dc-cyan-50: rgb(var(--dc-cyan-50-rgb));
+  --dc-cyan-100: rgb(var(--dc-cyan-100-rgb));
+  --dc-cyan-200: rgb(var(--dc-cyan-200-rgb));
+  --dc-cyan-300: rgb(var(--dc-cyan-300-rgb));
+  --dc-cyan-400: rgb(var(--dc-cyan-400-rgb));
+  --dc-cyan-500: rgb(var(--dc-cyan-500-rgb));
+  --dc-cyan-600: rgb(var(--dc-cyan-600-rgb));
+  --dc-cyan-700: rgb(var(--dc-cyan-700-rgb));
+  --dc-cyan-800: rgb(var(--dc-cyan-800-rgb));
+  --dc-cyan-900: rgb(var(--dc-cyan-900-rgb));
+  --dc-cyan-950: rgb(var(--dc-cyan-950-rgb));
+
+  /* sky */
   --dc-sky-50-rgb: 240 249 255;
   --dc-sky-100-rgb: 224 242 254;
   --dc-sky-200-rgb: 186 230 253;
@@ -158,6 +378,7 @@
   --dc-sky-700-rgb: 3 105 161;
   --dc-sky-800-rgb: 7 89 133;
   --dc-sky-900-rgb: 12 74 110;
+  --dc-sky-950-rgb: 8 47 73;
   --dc-sky-50: rgb(var(--dc-sky-50-rgb));
   --dc-sky-100: rgb(var(--dc-sky-100-rgb));
   --dc-sky-200: rgb(var(--dc-sky-200-rgb));
@@ -168,8 +389,9 @@
   --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));
+  --dc-sky-950: rgb(var(--dc-sky-950-rgb));
 
-  /* Blue scale */
+  /* blue */
   --dc-blue-50-rgb: 239 246 255;
   --dc-blue-100-rgb: 219 234 254;
   --dc-blue-200-rgb: 191 219 254;
@@ -180,6 +402,7 @@
   --dc-blue-700-rgb: 29 78 216;
   --dc-blue-800-rgb: 30 64 175;
   --dc-blue-900-rgb: 30 58 138;
+  --dc-blue-950-rgb: 23 37 84;
   --dc-blue-50: rgb(var(--dc-blue-50-rgb));
   --dc-blue-100: rgb(var(--dc-blue-100-rgb));
   --dc-blue-200: rgb(var(--dc-blue-200-rgb));
@@ -190,8 +413,33 @@
   --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-blue-950: rgb(var(--dc-blue-950-rgb));
+
+  /* indigo */
+  --dc-indigo-50-rgb: 238 242 255;
+  --dc-indigo-100-rgb: 224 231 255;
+  --dc-indigo-200-rgb: 199 210 254;
+  --dc-indigo-300-rgb: 165 180 252;
+  --dc-indigo-400-rgb: 129 140 248;
+  --dc-indigo-500-rgb: 99 102 241;
+  --dc-indigo-600-rgb: 79 70 229;
+  --dc-indigo-700-rgb: 67 56 202;
+  --dc-indigo-800-rgb: 55 48 163;
+  --dc-indigo-900-rgb: 49 46 129;
+  --dc-indigo-950-rgb: 30 27 75;
+  --dc-indigo-50: rgb(var(--dc-indigo-50-rgb));
+  --dc-indigo-100: rgb(var(--dc-indigo-100-rgb));
+  --dc-indigo-200: rgb(var(--dc-indigo-200-rgb));
+  --dc-indigo-300: rgb(var(--dc-indigo-300-rgb));
+  --dc-indigo-400: rgb(var(--dc-indigo-400-rgb));
+  --dc-indigo-500: rgb(var(--dc-indigo-500-rgb));
+  --dc-indigo-600: rgb(var(--dc-indigo-600-rgb));
+  --dc-indigo-700: rgb(var(--dc-indigo-700-rgb));
+  --dc-indigo-800: rgb(var(--dc-indigo-800-rgb));
+  --dc-indigo-900: rgb(var(--dc-indigo-900-rgb));
+  --dc-indigo-950: rgb(var(--dc-indigo-950-rgb));
+
+  /* violet */
   --dc-violet-50-rgb: 245 243 255;
   --dc-violet-100-rgb: 237 233 254;
   --dc-violet-200-rgb: 221 214 254;
@@ -202,6 +450,7 @@
   --dc-violet-700-rgb: 109 40 217;
   --dc-violet-800-rgb: 91 33 182;
   --dc-violet-900-rgb: 76 29 149;
+  --dc-violet-950-rgb: 46 16 101;
   --dc-violet-50: rgb(var(--dc-violet-50-rgb));
   --dc-violet-100: rgb(var(--dc-violet-100-rgb));
   --dc-violet-200: rgb(var(--dc-violet-200-rgb));
@@ -212,8 +461,57 @@
   --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-violet-950: rgb(var(--dc-violet-950-rgb));
+
+  /* purple */
+  --dc-purple-50-rgb: 250 245 255;
+  --dc-purple-100-rgb: 243 232 255;
+  --dc-purple-200-rgb: 233 213 255;
+  --dc-purple-300-rgb: 216 180 254;
+  --dc-purple-400-rgb: 192 132 252;
+  --dc-purple-500-rgb: 168 85 247;
+  --dc-purple-600-rgb: 147 51 234;
+  --dc-purple-700-rgb: 126 34 206;
+  --dc-purple-800-rgb: 107 33 168;
+  --dc-purple-900-rgb: 88 28 135;
+  --dc-purple-950-rgb: 59 7 100;
+  --dc-purple-50: rgb(var(--dc-purple-50-rgb));
+  --dc-purple-100: rgb(var(--dc-purple-100-rgb));
+  --dc-purple-200: rgb(var(--dc-purple-200-rgb));
+  --dc-purple-300: rgb(var(--dc-purple-300-rgb));
+  --dc-purple-400: rgb(var(--dc-purple-400-rgb));
+  --dc-purple-500: rgb(var(--dc-purple-500-rgb));
+  --dc-purple-600: rgb(var(--dc-purple-600-rgb));
+  --dc-purple-700: rgb(var(--dc-purple-700-rgb));
+  --dc-purple-800: rgb(var(--dc-purple-800-rgb));
+  --dc-purple-900: rgb(var(--dc-purple-900-rgb));
+  --dc-purple-950: rgb(var(--dc-purple-950-rgb));
+
+  /* fuchsia */
+  --dc-fuchsia-50-rgb: 253 244 255;
+  --dc-fuchsia-100-rgb: 250 232 255;
+  --dc-fuchsia-200-rgb: 245 208 254;
+  --dc-fuchsia-300-rgb: 240 171 252;
+  --dc-fuchsia-400-rgb: 232 121 249;
+  --dc-fuchsia-500-rgb: 217 70 239;
+  --dc-fuchsia-600-rgb: 192 38 211;
+  --dc-fuchsia-700-rgb: 162 28 175;
+  --dc-fuchsia-800-rgb: 134 25 143;
+  --dc-fuchsia-900-rgb: 112 26 117;
+  --dc-fuchsia-950-rgb: 74 4 78;
+  --dc-fuchsia-50: rgb(var(--dc-fuchsia-50-rgb));
+  --dc-fuchsia-100: rgb(var(--dc-fuchsia-100-rgb));
+  --dc-fuchsia-200: rgb(var(--dc-fuchsia-200-rgb));
+  --dc-fuchsia-300: rgb(var(--dc-fuchsia-300-rgb));
+  --dc-fuchsia-400: rgb(var(--dc-fuchsia-400-rgb));
+  --dc-fuchsia-500: rgb(var(--dc-fuchsia-500-rgb));
+  --dc-fuchsia-600: rgb(var(--dc-fuchsia-600-rgb));
+  --dc-fuchsia-700: rgb(var(--dc-fuchsia-700-rgb));
+  --dc-fuchsia-800: rgb(var(--dc-fuchsia-800-rgb));
+  --dc-fuchsia-900: rgb(var(--dc-fuchsia-900-rgb));
+  --dc-fuchsia-950: rgb(var(--dc-fuchsia-950-rgb));
+
+  /* pink */
   --dc-pink-50-rgb: 253 242 248;
   --dc-pink-100-rgb: 252 231 243;
   --dc-pink-200-rgb: 251 207 232;
@@ -224,6 +522,7 @@
   --dc-pink-700-rgb: 190 24 93;
   --dc-pink-800-rgb: 157 23 77;
   --dc-pink-900-rgb: 131 24 67;
+  --dc-pink-950-rgb: 80 7 36;
   --dc-pink-50: rgb(var(--dc-pink-50-rgb));
   --dc-pink-100: rgb(var(--dc-pink-100-rgb));
   --dc-pink-200: rgb(var(--dc-pink-200-rgb));
@@ -234,204 +533,93 @@
   --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-pink-950: rgb(var(--dc-pink-950-rgb));
+
+  /* rose */
+  --dc-rose-50-rgb: 255 241 242;
+  --dc-rose-100-rgb: 255 228 230;
+  --dc-rose-200-rgb: 254 205 211;
+  --dc-rose-300-rgb: 253 164 175;
+  --dc-rose-400-rgb: 251 113 133;
+  --dc-rose-500-rgb: 244 63 94;
+  --dc-rose-600-rgb: 225 29 72;
+  --dc-rose-700-rgb: 190 18 60;
+  --dc-rose-800-rgb: 159 18 57;
+  --dc-rose-900-rgb: 136 19 55;
+  --dc-rose-950-rgb: 76 5 25;
+  --dc-rose-50: rgb(var(--dc-rose-50-rgb));
+  --dc-rose-100: rgb(var(--dc-rose-100-rgb));
+  --dc-rose-200: rgb(var(--dc-rose-200-rgb));
+  --dc-rose-300: rgb(var(--dc-rose-300-rgb));
+  --dc-rose-400: rgb(var(--dc-rose-400-rgb));
+  --dc-rose-500: rgb(var(--dc-rose-500-rgb));
+  --dc-rose-600: rgb(var(--dc-rose-600-rgb));
+  --dc-rose-700: rgb(var(--dc-rose-700-rgb));
+  --dc-rose-800: rgb(var(--dc-rose-800-rgb));
+  --dc-rose-900: rgb(var(--dc-rose-900-rgb));
+  --dc-rose-950: rgb(var(--dc-rose-950-rgb));
+
+  /* Background Colors */
+  --dc-background-primary: var(--dc-white);
+  --dc-background-color-1: rgb(var(--dc-neutral-950-rgb) / 4%);
+  --dc-background-color-2: rgb(var(--dc-neutral-950-rgb) / 8%);
+  --dc-background-color-3: rgb(var(--dc-neutral-950-rgb) / 16%);
+
+  /* Border Colors */
+  --dc-border-color-1: rgb(var(--dc-neutral-950-rgb) / 8%);
+  --dc-border-color-2: rgb(var(--dc-neutral-950-rgb) / 16%);
+  --dc-border-color-3: rgb(var(--dc-neutral-950-rgb) / 24%);
+
+  /* Text Color */
+  --dc-text-color-primary: var(--dc-neutral-900);
+  --dc-text-color-secondary: var(--dc-neutral-500);
+  --dc-text-color-tertiary: var(--dc-neutral-300);
+  --dc-text-color-info: var(--dc-blue-600);
+  --dc-text-color-success: var(--dc-green-700);
+  --dc-text-color-warning: var(--dc-orange-700);
+  --dc-text-color-error: var(--dc-red-600);
+
+  /* Inputs */
+  --dc-focus-ring-color: var(--dc-blue-500);
   --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%);
+  /*
+   * Shadows
+   *
+   * https://tailwindcss.com/docs/box-shadow
+   */
+  --dc-shadow: 0 1px 3px 0 rgb(var(--dc-black-rgb) / 10%), 0 1px 2px -1px rgb(var(--dc-black-rgb) / 10%);
+  --dc-shadow-2xs: 0 1px 0 0 rgb(var(--dc-black-rgb) / 5%);
+  --dc-shadow-xs: 0 1px 2px 0 rgb(var(--dc-black-rgb) / 5%);
+  --dc-shadow-sm: 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%);
+  /* Background Colors */
+  --dc-background-primary: var(--dc-neutral-900);
+  --dc-background-color-1: rgb(var(--dc-neutral-50-rgb) / 4%);
+  --dc-background-color-2: rgb(var(--dc-neutral-50-rgb) / 8%);
+  --dc-background-color-3: rgb(var(--dc-neutral-50-rgb) / 16%);
+
+  /* Border Colors */
+  --dc-border-color-1: rgb(var(--dc-neutral-50-rgb) / 8%);
+  --dc-border-color-2: rgb(var(--dc-neutral-50-rgb) / 16%);
+  --dc-border-color-3: rgb(var(--dc-neutral-50-rgb) / 24%);
+
+  /* Text Color */
+  --dc-text-color-primary: var(--dc-neutral-50);
+  --dc-text-color-secondary: var(--dc-neutral-400);
+  --dc-text-color-tertiary: var(--dc-neutral-600);
+  --dc-text-color-info: var(--dc-blue-400);
+  --dc-text-color-success: var(--dc-green-500);
+  --dc-text-color-warning: var(--dc-orange-400);
+  --dc-text-color-error: var(--dc-red-500);
+
+  /* Inputs */
+  --dc-focus-ring-color: var(--dc-blue-400);
+  --dc-disabled-state-opacity: 0.6;
 }