elements-kit 0.5.1 → 0.5.2

package/dist/ui/styles/colors/base.css

@@ -0,0 +1,30 @@
+[data-color="base"] {
+  --color-1: var(--gray-1);
+  --color-2: var(--gray-2);
+  --color-3: var(--gray-3);
+  --color-4: var(--gray-4);
+  --color-5: var(--gray-5);
+  --color-6: var(--gray-6);
+  --color-7: var(--gray-7);
+  --color-8: var(--gray-8);
+  --color-9: var(--gray-9);
+  --color-10: var(--gray-10);
+  --color-11: var(--gray-11);
+  --color-12: var(--gray-12);
+  --color-a1: var(--gray-a1);
+  --color-a2: var(--gray-a2);
+  --color-a3: var(--gray-a3);
+  --color-a4: var(--gray-a4);
+  --color-a5: var(--gray-a5);
+  --color-a6: var(--gray-a6);
+  --color-a7: var(--gray-a7);
+  --color-a8: var(--gray-a8);
+  --color-a9: var(--gray-a9);
+  --color-a10: var(--gray-a10);
+  --color-a11: var(--gray-a11);
+  --color-a12: var(--gray-a12);
+  --accent-contrast: var(--gray-contrast);
+  --accent-surface: var(--gray-surface);
+  --accent-indicator: var(--gray-indicator);
+  --accent-track: var(--gray-track);
+}

package/dist/ui/styles/colors/blue.css

@@ -1,127 +1,30 @@
-:root, .light, .light-theme {
-  --blue-1: #fbfdff;
-  --blue-2: #f4faff;
-  --blue-3: #e6f4fe;
-  --blue-4: #d5efff;
-  --blue-5: #c2e5ff;
-  --blue-6: #acd8fc;
-  --blue-7: #8ec8f6;
-  --blue-8: #5eb1ef;
-  --blue-9: #0090ff;
-  --blue-10: #0588f0;
-  --blue-11: #0d74ce;
-  --blue-12: #113264;
-  --blue-a1: #0080ff04;
-  --blue-a2: #008cff0b;
-  --blue-a3: #008ff519;
-  --blue-a4: #009eff2a;
-  --blue-a5: #0093ff3d;
-  --blue-a6: #0088f653;
-  --blue-a7: #0083eb71;
-  --blue-a8: #0084e6a1;
-  --blue-a9: #0090ff;
-  --blue-a10: #0086f0fa;
-  --blue-a11: #006dcbf2;
-  --blue-a12: #002359ee;
-  --blue-surface: #f1f9ffcc;
-  --blue-indicator: var(--blue-9);
-  --blue-track: var(--blue-9);
-}
-
-@supports (color: color(display-p3 1 1 1)) {
-  @media (color-gamut: p3) {
-    :root, .light, .light-theme {
-      --blue-1: color(display-p3 .986 .992 .999);
-      --blue-2: color(display-p3 .96 .979 .998);
-      --blue-3: color(display-p3 .912 .956 .991);
-      --blue-4: color(display-p3 .853 .932 1);
-      --blue-5: color(display-p3 .788 .894 .998);
-      --blue-6: color(display-p3 .709 .843 .976);
-      --blue-7: color(display-p3 .606 .777 .947);
-      --blue-8: color(display-p3 .451 .688 .917);
-      --blue-9: color(display-p3 .247 .556 .969);
-      --blue-10: color(display-p3 .234 .523 .912);
-      --blue-11: color(display-p3 .15 .44 .84);
-      --blue-12: color(display-p3 .102 .193 .379);
-      --blue-a1: color(display-p3 .024 .514 1 / .016);
-      --blue-a2: color(display-p3 .024 .514 .906 / .04);
-      --blue-a3: color(display-p3 .012 .506 .914 / .087);
-      --blue-a4: color(display-p3 .008 .545 1 / .146);
-      --blue-a5: color(display-p3 .004 .502 .984 / .212);
-      --blue-a6: color(display-p3 .004 .463 .922 / .291);
-      --blue-a7: color(display-p3 .004 .431 .863 / .393);
-      --blue-a8: color(display-p3 0 .427 .851 / .55);
-      --blue-a9: color(display-p3 0 .412 .961 / .753);
-      --blue-a10: color(display-p3 0 .376 .886 / .765);
-      --blue-a11: color(display-p3 .15 .44 .84);
-      --blue-a12: color(display-p3 .102 .193 .379);
-      --blue-surface: color(display-p3 .9529 .9765 .9961 / .8);
-    }
-  }
-}
-
-.dark, .dark-theme {
-  --blue-1: #0d1520;
-  --blue-2: #111927;
-  --blue-3: #0d2847;
-  --blue-4: #003362;
-  --blue-5: #004074;
-  --blue-6: #104d87;
-  --blue-7: #205d9e;
-  --blue-8: #2870bd;
-  --blue-9: #0090ff;
-  --blue-10: #3b9eff;
-  --blue-11: #70b8ff;
-  --blue-12: #c2e6ff;
-  --blue-a1: #004df211;
-  --blue-a2: #1166fb18;
-  --blue-a3: #0077ff3a;
-  --blue-a4: #0075ff57;
-  --blue-a5: #0081fd6b;
-  --blue-a6: #0f89fd7f;
-  --blue-a7: #2a91fe98;
-  --blue-a8: #3094feb9;
-  --blue-a9: #0090ff;
-  --blue-a10: #3b9eff;
-  --blue-a11: #70b8ff;
-  --blue-a12: #c2e6ff;
-  --blue-surface: #11213d80;
-  --blue-indicator: var(--blue-9);
-  --blue-track: var(--blue-9);
-}
-
-@supports (color: color(display-p3 1 1 1)) {
-  @media (color-gamut: p3) {
-    .dark, .dark-theme {
-      --blue-1: color(display-p3 .057 .081 .122);
-      --blue-2: color(display-p3 .072 .098 .147);
-      --blue-3: color(display-p3 .078 .154 .27);
-      --blue-4: color(display-p3 .033 .197 .37);
-      --blue-5: color(display-p3 .08 .245 .441);
-      --blue-6: color(display-p3 .14 .298 .511);
-      --blue-7: color(display-p3 .195 .361 .6);
-      --blue-8: color(display-p3 .239 .434 .72);
-      --blue-9: color(display-p3 .247 .556 .969);
-      --blue-10: color(display-p3 .344 .612 .973);
-      --blue-11: color(display-p3 .49 .72 1);
-      --blue-12: color(display-p3 .788 .898 .99);
-      --blue-a1: color(display-p3 0 .333 1 / .059);
-      --blue-a2: color(display-p3 .114 .435 .988 / .085);
-      --blue-a3: color(display-p3 .122 .463 1 / .219);
-      --blue-a4: color(display-p3 0 .467 1 / .324);
-      --blue-a5: color(display-p3 .098 .51 1 / .4);
-      --blue-a6: color(display-p3 .224 .557 1 / .475);
-      --blue-a7: color(display-p3 .294 .584 1 / .572);
-      --blue-a8: color(display-p3 .314 .592 1 / .702);
-      --blue-a9: color(display-p3 .251 .573 .996 / .967);
-      --blue-a10: color(display-p3 .357 .631 1 / .971);
-      --blue-a11: color(display-p3 .49 .72 1);
-      --blue-a12: color(display-p3 .788 .898 .99);
-      --blue-surface: color(display-p3 .0706 .1255 .2196 / .5);
-    }
-  }
-}
-
-:root {
-  --blue-contrast: white;
+[data-color="blue"] {
+  --color-1: var(--blue-1);
+  --color-2: var(--blue-2);
+  --color-3: var(--blue-3);
+  --color-4: var(--blue-4);
+  --color-5: var(--blue-5);
+  --color-6: var(--blue-6);
+  --color-7: var(--blue-7);
+  --color-8: var(--blue-8);
+  --color-9: var(--blue-9);
+  --color-10: var(--blue-10);
+  --color-11: var(--blue-11);
+  --color-12: var(--blue-12);
+  --color-a1: var(--blue-a1);
+  --color-a2: var(--blue-a2);
+  --color-a3: var(--blue-a3);
+  --color-a4: var(--blue-a4);
+  --color-a5: var(--blue-a5);
+  --color-a6: var(--blue-a6);
+  --color-a7: var(--blue-a7);
+  --color-a8: var(--blue-a8);
+  --color-a9: var(--blue-a9);
+  --color-a10: var(--blue-a10);
+  --color-a11: var(--blue-a11);
+  --color-a12: var(--blue-a12);
+  --accent-contrast: var(--blue-contrast);
+  --accent-surface: var(--blue-surface);
+  --accent-indicator: var(--blue-indicator);
+  --accent-track: var(--blue-track);
 }

package/dist/ui/styles/colors/bronze.css

@@ -1,127 +1,30 @@
-:root, .light, .light-theme {
-  --bronze-1: #fdfcfc;
-  --bronze-2: #fdf7f5;
-  --bronze-3: #f6edea;
-  --bronze-4: #efe4df;
-  --bronze-5: #e7d9d3;
-  --bronze-6: #dfcdc5;
-  --bronze-7: #d3bcb3;
-  --bronze-8: #c2a499;
-  --bronze-9: #a18072;
-  --bronze-10: #957468;
-  --bronze-11: #7d5e54;
-  --bronze-12: #43302b;
-  --bronze-a1: #55000003;
-  --bronze-a2: #cc33000a;
-  --bronze-a3: #92250015;
-  --bronze-a4: #80280020;
-  --bronze-a5: #7423002c;
-  --bronze-a6: #7324003a;
-  --bronze-a7: #6c1f004c;
-  --bronze-a8: #671c0066;
-  --bronze-a9: #551a008d;
-  --bronze-a10: #4c150097;
-  --bronze-a11: #3d0f00ab;
-  --bronze-a12: #1d0600d4;
-  --bronze-surface: #fdf5f3cc;
-  --bronze-indicator: var(--bronze-9);
-  --bronze-track: var(--bronze-9);
-}
-
-@supports (color: color(display-p3 1 1 1)) {
-  @media (color-gamut: p3) {
-    :root, .light, .light-theme {
-      --bronze-1: color(display-p3 .991 .988 .988);
-      --bronze-2: color(display-p3 .989 .97 .961);
-      --bronze-3: color(display-p3 .958 .932 .919);
-      --bronze-4: color(display-p3 .929 .894 .877);
-      --bronze-5: color(display-p3 .898 .853 .832);
-      --bronze-6: color(display-p3 .861 .805 .778);
-      --bronze-7: color(display-p3 .812 .739 .706);
-      --bronze-8: color(display-p3 .741 .647 .606);
-      --bronze-9: color(display-p3 .611 .507 .455);
-      --bronze-10: color(display-p3 .563 .461 .414);
-      --bronze-11: color(display-p3 .471 .373 .336);
-      --bronze-12: color(display-p3 .251 .191 .172);
-      --bronze-a1: color(display-p3 .349 .024 .024 / .012);
-      --bronze-a2: color(display-p3 .71 .22 .024 / .04);
-      --bronze-a3: color(display-p3 .482 .2 .008 / .083);
-      --bronze-a4: color(display-p3 .424 .133 .004 / .122);
-      --bronze-a5: color(display-p3 .4 .145 .004 / .169);
-      --bronze-a6: color(display-p3 .388 .125 .004 / .224);
-      --bronze-a7: color(display-p3 .365 .11 .004 / .295);
-      --bronze-a8: color(display-p3 .341 .102 .004 / .393);
-      --bronze-a9: color(display-p3 .29 .094 0 / .546);
-      --bronze-a10: color(display-p3 .255 .082 0 / .585);
-      --bronze-a11: color(display-p3 .471 .373 .336);
-      --bronze-a12: color(display-p3 .251 .191 .172);
-      --bronze-surface: color(display-p3 .9843 .9608 .9529 / .8);
-    }
-  }
-}
-
-.dark, .dark-theme {
-  --bronze-1: #141110;
-  --bronze-2: #1c1917;
-  --bronze-3: #262220;
-  --bronze-4: #302a27;
-  --bronze-5: #3b3330;
-  --bronze-6: #493e3a;
-  --bronze-7: #5a4c47;
-  --bronze-8: #6f5f58;
-  --bronze-9: #a18072;
-  --bronze-10: #ae8c7e;
-  --bronze-11: #d4b3a5;
-  --bronze-12: #ede0d9;
-  --bronze-a1: #d1110004;
-  --bronze-a2: #fbbc910c;
-  --bronze-a3: #faceb817;
-  --bronze-a4: #facdb622;
-  --bronze-a5: #ffd2c12d;
-  --bronze-a6: #ffd1c03c;
-  --bronze-a7: #fdd0c04f;
-  --bronze-a8: #ffd6c565;
-  --bronze-a9: #fec7b09b;
-  --bronze-a10: #fecab5a9;
-  --bronze-a11: #ffd7c6d1;
-  --bronze-a12: #fff1e9ec;
-  --bronze-surface: #27211d80;
-  --bronze-indicator: var(--bronze-9);
-  --bronze-track: var(--bronze-9);
-}
-
-@supports (color: color(display-p3 1 1 1)) {
-  @media (color-gamut: p3) {
-    .dark, .dark-theme {
-      --bronze-1: color(display-p3 .076 .067 .063);
-      --bronze-2: color(display-p3 .106 .097 .093);
-      --bronze-3: color(display-p3 .147 .132 .125);
-      --bronze-4: color(display-p3 .185 .166 .156);
-      --bronze-5: color(display-p3 .227 .202 .19);
-      --bronze-6: color(display-p3 .278 .246 .23);
-      --bronze-7: color(display-p3 .343 .302 .281);
-      --bronze-8: color(display-p3 .426 .374 .347);
-      --bronze-9: color(display-p3 .611 .507 .455);
-      --bronze-10: color(display-p3 .66 .556 .504);
-      --bronze-11: color(display-p3 .81 .707 .655);
-      --bronze-12: color(display-p3 .921 .88 .854);
-      --bronze-a1: color(display-p3 .941 .067 0 / .009);
-      --bronze-a2: color(display-p3 .98 .8 .706 / .043);
-      --bronze-a3: color(display-p3 .988 .851 .761 / .085);
-      --bronze-a4: color(display-p3 .996 .839 .78 / .127);
-      --bronze-a5: color(display-p3 .996 .863 .773 / .173);
-      --bronze-a6: color(display-p3 1 .863 .796 / .227);
-      --bronze-a7: color(display-p3 1 .867 .8 / .295);
-      --bronze-a8: color(display-p3 1 .859 .788 / .387);
-      --bronze-a9: color(display-p3 1 .82 .733 / .585);
-      --bronze-a10: color(display-p3 1 .839 .761 / .635);
-      --bronze-a11: color(display-p3 .81 .707 .655);
-      --bronze-a12: color(display-p3 .921 .88 .854);
-      --bronze-surface: color(display-p3 .1412 .1255 .1176 / .5);
-    }
-  }
-}
-
-:root {
-  --bronze-contrast: white;
+[data-color="bronze"] {
+  --color-1: var(--bronze-1);
+  --color-2: var(--bronze-2);
+  --color-3: var(--bronze-3);
+  --color-4: var(--bronze-4);
+  --color-5: var(--bronze-5);
+  --color-6: var(--bronze-6);
+  --color-7: var(--bronze-7);
+  --color-8: var(--bronze-8);
+  --color-9: var(--bronze-9);
+  --color-10: var(--bronze-10);
+  --color-11: var(--bronze-11);
+  --color-12: var(--bronze-12);
+  --color-a1: var(--bronze-a1);
+  --color-a2: var(--bronze-a2);
+  --color-a3: var(--bronze-a3);
+  --color-a4: var(--bronze-a4);
+  --color-a5: var(--bronze-a5);
+  --color-a6: var(--bronze-a6);
+  --color-a7: var(--bronze-a7);
+  --color-a8: var(--bronze-a8);
+  --color-a9: var(--bronze-a9);
+  --color-a10: var(--bronze-a10);
+  --color-a11: var(--bronze-a11);
+  --color-a12: var(--bronze-a12);
+  --accent-contrast: var(--bronze-contrast);
+  --accent-surface: var(--bronze-surface);
+  --accent-indicator: var(--bronze-indicator);
+  --accent-track: var(--bronze-track);
 }

package/dist/ui/styles/colors/brown.css

@@ -1,127 +1,30 @@
-:root, .light, .light-theme {
-  --brown-1: #fefdfc;
-  --brown-2: #fcf9f6;
-  --brown-3: #f6eee7;
-  --brown-4: #f0e4d9;
-  --brown-5: #ebdaca;
-  --brown-6: #e4cdb7;
-  --brown-7: #dcbc9f;
-  --brown-8: #cea37e;
-  --brown-9: #ad7f58;
-  --brown-10: #a07553;
-  --brown-11: #815e46;
-  --brown-12: #3e332e;
-  --brown-a1: #aa550003;
-  --brown-a2: #aa550009;
-  --brown-a3: #a04b0018;
-  --brown-a4: #9b4a0026;
-  --brown-a5: #9f4d0035;
-  --brown-a6: #a04e0048;
-  --brown-a7: #a34e0060;
-  --brown-a8: #9f4a0081;
-  --brown-a9: #823c00a7;
-  --brown-a10: #723300ac;
-  --brown-a11: #522100b9;
-  --brown-a12: #140600d1;
-  --brown-surface: #fbf8f4cc;
-  --brown-indicator: var(--brown-9);
-  --brown-track: var(--brown-9);
-}
-
-@supports (color: color(display-p3 1 1 1)) {
-  @media (color-gamut: p3) {
-    :root, .light, .light-theme {
-      --brown-1: color(display-p3 .995 .992 .989);
-      --brown-2: color(display-p3 .987 .976 .964);
-      --brown-3: color(display-p3 .959 .936 .909);
-      --brown-4: color(display-p3 .934 .897 .855);
-      --brown-5: color(display-p3 .909 .856 .798);
-      --brown-6: color(display-p3 .88 .808 .73);
-      --brown-7: color(display-p3 .841 .742 .639);
-      --brown-8: color(display-p3 .782 .647 .514);
-      --brown-9: color(display-p3 .651 .505 .368);
-      --brown-10: color(display-p3 .601 .465 .344);
-      --brown-11: color(display-p3 .485 .374 .288);
-      --brown-12: color(display-p3 .236 .202 .183);
-      --brown-a1: color(display-p3 .675 .349 .024 / .012);
-      --brown-a2: color(display-p3 .675 .349 .024 / .036);
-      --brown-a3: color(display-p3 .573 .314 .012 / .091);
-      --brown-a4: color(display-p3 .545 .302 .008 / .146);
-      --brown-a5: color(display-p3 .561 .29 .004 / .204);
-      --brown-a6: color(display-p3 .553 .294 .004 / .271);
-      --brown-a7: color(display-p3 .557 .286 .004 / .361);
-      --brown-a8: color(display-p3 .549 .275 .004 / .487);
-      --brown-a9: color(display-p3 .447 .22 0 / .632);
-      --brown-a10: color(display-p3 .388 .188 0 / .655);
-      --brown-a11: color(display-p3 .485 .374 .288);
-      --brown-a12: color(display-p3 .236 .202 .183);
-      --brown-surface: color(display-p3 .9843 .9725 .9569 / .8);
-    }
-  }
-}
-
-.dark, .dark-theme {
-  --brown-1: #12110f;
-  --brown-2: #1c1816;
-  --brown-3: #28211d;
-  --brown-4: #322922;
-  --brown-5: #3e3128;
-  --brown-6: #4d3c2f;
-  --brown-7: #614a39;
-  --brown-8: #7c5f46;
-  --brown-9: #ad7f58;
-  --brown-10: #b88c67;
-  --brown-11: #dbb594;
-  --brown-12: #f2e1ca;
-  --brown-a1: #91110002;
-  --brown-a2: #fba67c0c;
-  --brown-a3: #fcb58c19;
-  --brown-a4: #fbbb8a24;
-  --brown-a5: #fcb88931;
-  --brown-a6: #fdba8741;
-  --brown-a7: #ffbb8856;
-  --brown-a8: #ffbe8773;
-  --brown-a9: #feb87da8;
-  --brown-a10: #ffc18cb3;
-  --brown-a11: #fed1aad9;
-  --brown-a12: #feecd4f2;
-  --brown-surface: #271f1b80;
-  --brown-indicator: var(--brown-9);
-  --brown-track: var(--brown-9);
-}
-
-@supports (color: color(display-p3 1 1 1)) {
-  @media (color-gamut: p3) {
-    .dark, .dark-theme {
-      --brown-1: color(display-p3 .071 .067 .059);
-      --brown-2: color(display-p3 .107 .095 .087);
-      --brown-3: color(display-p3 .151 .13 .115);
-      --brown-4: color(display-p3 .191 .161 .138);
-      --brown-5: color(display-p3 .235 .194 .162);
-      --brown-6: color(display-p3 .291 .237 .192);
-      --brown-7: color(display-p3 .365 .295 .232);
-      --brown-8: color(display-p3 .469 .377 .287);
-      --brown-9: color(display-p3 .651 .505 .368);
-      --brown-10: color(display-p3 .697 .557 .423);
-      --brown-11: color(display-p3 .835 .715 .597);
-      --brown-12: color(display-p3 .938 .885 .802);
-      --brown-a1: color(display-p3 .855 .071 0 / .005);
-      --brown-a2: color(display-p3 .98 .706 .525 / .043);
-      --brown-a3: color(display-p3 .996 .745 .576 / .093);
-      --brown-a4: color(display-p3 1 .765 .592 / .135);
-      --brown-a5: color(display-p3 1 .761 .588 / .181);
-      --brown-a6: color(display-p3 1 .773 .592 / .24);
-      --brown-a7: color(display-p3 .996 .776 .58 / .32);
-      --brown-a8: color(display-p3 1 .78 .573 / .433);
-      --brown-a9: color(display-p3 1 .769 .549 / .627);
-      --brown-a10: color(display-p3 1 .792 .596 / .677);
-      --brown-a11: color(display-p3 .835 .715 .597);
-      --brown-a12: color(display-p3 .938 .885 .802);
-      --brown-surface: color(display-p3 .1412 .1176 .102 / .5);
-    }
-  }
-}
-
-:root {
-  --brown-contrast: white;
+[data-color="brown"] {
+  --color-1: var(--brown-1);
+  --color-2: var(--brown-2);
+  --color-3: var(--brown-3);
+  --color-4: var(--brown-4);
+  --color-5: var(--brown-5);
+  --color-6: var(--brown-6);
+  --color-7: var(--brown-7);
+  --color-8: var(--brown-8);
+  --color-9: var(--brown-9);
+  --color-10: var(--brown-10);
+  --color-11: var(--brown-11);
+  --color-12: var(--brown-12);
+  --color-a1: var(--brown-a1);
+  --color-a2: var(--brown-a2);
+  --color-a3: var(--brown-a3);
+  --color-a4: var(--brown-a4);
+  --color-a5: var(--brown-a5);
+  --color-a6: var(--brown-a6);
+  --color-a7: var(--brown-a7);
+  --color-a8: var(--brown-a8);
+  --color-a9: var(--brown-a9);
+  --color-a10: var(--brown-a10);
+  --color-a11: var(--brown-a11);
+  --color-a12: var(--brown-a12);
+  --accent-contrast: var(--brown-contrast);
+  --accent-surface: var(--brown-surface);
+  --accent-indicator: var(--brown-indicator);
+  --accent-track: var(--brown-track);
 }

package/dist/ui/styles/colors/crimson.css

@@ -1,127 +1,30 @@
-:root, .light, .light-theme {
-  --crimson-1: #fffcfd;
-  --crimson-2: #fef7f9;
-  --crimson-3: #ffe9f0;
-  --crimson-4: #fedce7;
-  --crimson-5: #facedd;
-  --crimson-6: #f3bed1;
-  --crimson-7: #eaacc3;
-  --crimson-8: #e093b2;
-  --crimson-9: #e93d82;
-  --crimson-10: #df3478;
-  --crimson-11: #cb1d63;
-  --crimson-12: #621639;
-  --crimson-a1: #ff005503;
-  --crimson-a2: #e0004008;
-  --crimson-a3: #ff005216;
-  --crimson-a4: #f8005123;
-  --crimson-a5: #e5004f31;
-  --crimson-a6: #d0004b41;
-  --crimson-a7: #bf004753;
-  --crimson-a8: #b6004a6c;
-  --crimson-a9: #e2005bc2;
-  --crimson-a10: #d70056cb;
-  --crimson-a11: #c4004fe2;
-  --crimson-a12: #530026e9;
-  --crimson-surface: #fef5f8cc;
-  --crimson-indicator: var(--crimson-9);
-  --crimson-track: var(--crimson-9);
-}
-
-@supports (color: color(display-p3 1 1 1)) {
-  @media (color-gamut: p3) {
-    :root, .light, .light-theme {
-      --crimson-1: color(display-p3 .998 .989 .992);
-      --crimson-2: color(display-p3 .991 .969 .976);
-      --crimson-3: color(display-p3 .987 .917 .941);
-      --crimson-4: color(display-p3 .975 .866 .904);
-      --crimson-5: color(display-p3 .953 .813 .864);
-      --crimson-6: color(display-p3 .921 .755 .817);
-      --crimson-7: color(display-p3 .88 .683 .761);
-      --crimson-8: color(display-p3 .834 .592 .694);
-      --crimson-9: color(display-p3 .843 .298 .507);
-      --crimson-10: color(display-p3 .807 .266 .468);
-      --crimson-11: color(display-p3 .731 .195 .388);
-      --crimson-12: color(display-p3 .352 .111 .221);
-      --crimson-a1: color(display-p3 .675 .024 .349 / .012);
-      --crimson-a2: color(display-p3 .757 .02 .267 / .032);
-      --crimson-a3: color(display-p3 .859 .008 .294 / .083);
-      --crimson-a4: color(display-p3 .827 .008 .298 / .134);
-      --crimson-a5: color(display-p3 .753 .008 .275 / .189);
-      --crimson-a6: color(display-p3 .682 .004 .247 / .244);
-      --crimson-a7: color(display-p3 .62 .004 .251 / .318);
-      --crimson-a8: color(display-p3 .6 .004 .251 / .408);
-      --crimson-a9: color(display-p3 .776 0 .298 / .702);
-      --crimson-a10: color(display-p3 .737 0 .275 / .734);
-      --crimson-a11: color(display-p3 .731 .195 .388);
-      --crimson-a12: color(display-p3 .352 .111 .221);
-      --crimson-surface: color(display-p3 .9922 .9608 .9725 / .8);
-    }
-  }
-}
-
-.dark, .dark-theme {
-  --crimson-1: #191114;
-  --crimson-2: #201318;
-  --crimson-3: #381525;
-  --crimson-4: #4d122f;
-  --crimson-5: #5c1839;
-  --crimson-6: #6d2545;
-  --crimson-7: #873356;
-  --crimson-8: #b0436e;
-  --crimson-9: #e93d82;
-  --crimson-10: #ee518a;
-  --crimson-11: #ff92ad;
-  --crimson-12: #fdd3e8;
-  --crimson-a1: #f4126709;
-  --crimson-a2: #f22f7a11;
-  --crimson-a3: #fe2a8b2a;
-  --crimson-a4: #fd158741;
-  --crimson-a5: #fd278f51;
-  --crimson-a6: #fe459763;
-  --crimson-a7: #fd559b7f;
-  --crimson-a8: #fe5b9bab;
-  --crimson-a9: #fe418de8;
-  --crimson-a10: #ff5693ed;
-  --crimson-a11: #ff92ad;
-  --crimson-a12: #ffd5eafd;
-  --crimson-surface: #2f151f80;
-  --crimson-indicator: var(--crimson-9);
-  --crimson-track: var(--crimson-9);
-}
-
-@supports (color: color(display-p3 1 1 1)) {
-  @media (color-gamut: p3) {
-    .dark, .dark-theme {
-      --crimson-1: color(display-p3 .093 .068 .078);
-      --crimson-2: color(display-p3 .117 .078 .095);
-      --crimson-3: color(display-p3 .203 .091 .143);
-      --crimson-4: color(display-p3 .277 .087 .182);
-      --crimson-5: color(display-p3 .332 .115 .22);
-      --crimson-6: color(display-p3 .394 .162 .268);
-      --crimson-7: color(display-p3 .489 .222 .336);
-      --crimson-8: color(display-p3 .638 .289 .429);
-      --crimson-9: color(display-p3 .843 .298 .507);
-      --crimson-10: color(display-p3 .864 .364 .539);
-      --crimson-11: color(display-p3 1 .56 .66);
-      --crimson-12: color(display-p3 .966 .834 .906);
-      --crimson-a1: color(display-p3 .984 .071 .463 / .03);
-      --crimson-a2: color(display-p3 .996 .282 .569 / .055);
-      --crimson-a3: color(display-p3 .996 .227 .573 / .148);
-      --crimson-a4: color(display-p3 1 .157 .569 / .227);
-      --crimson-a5: color(display-p3 1 .231 .604 / .286);
-      --crimson-a6: color(display-p3 1 .337 .643 / .349);
-      --crimson-a7: color(display-p3 1 .416 .663 / .454);
-      --crimson-a8: color(display-p3 .996 .427 .651 / .614);
-      --crimson-a9: color(display-p3 1 .345 .596 / .832);
-      --crimson-a10: color(display-p3 1 .42 .62 / .853);
-      --crimson-a11: color(display-p3 1 .56 .66);
-      --crimson-a12: color(display-p3 .966 .834 .906);
-      --crimson-surface: color(display-p3 .1647 .0863 .1176 / .5);
-    }
-  }
-}
-
-:root {
-  --crimson-contrast: white;
+[data-color="crimson"] {
+  --color-1: var(--crimson-1);
+  --color-2: var(--crimson-2);
+  --color-3: var(--crimson-3);
+  --color-4: var(--crimson-4);
+  --color-5: var(--crimson-5);
+  --color-6: var(--crimson-6);
+  --color-7: var(--crimson-7);
+  --color-8: var(--crimson-8);
+  --color-9: var(--crimson-9);
+  --color-10: var(--crimson-10);
+  --color-11: var(--crimson-11);
+  --color-12: var(--crimson-12);
+  --color-a1: var(--crimson-a1);
+  --color-a2: var(--crimson-a2);
+  --color-a3: var(--crimson-a3);
+  --color-a4: var(--crimson-a4);
+  --color-a5: var(--crimson-a5);
+  --color-a6: var(--crimson-a6);
+  --color-a7: var(--crimson-a7);
+  --color-a8: var(--crimson-a8);
+  --color-a9: var(--crimson-a9);
+  --color-a10: var(--crimson-a10);
+  --color-a11: var(--crimson-a11);
+  --color-a12: var(--crimson-a12);
+  --accent-contrast: var(--crimson-contrast);
+  --accent-surface: var(--crimson-surface);
+  --accent-indicator: var(--crimson-indicator);
+  --accent-track: var(--crimson-track);
 }