elements-kit 0.5.1 → 0.6.0

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

@@ -1,127 +1,30 @@
-:root, .light, .light-theme {
-  --cyan-1: #fafdfe;
-  --cyan-2: #f2fafb;
-  --cyan-3: #def7f9;
-  --cyan-4: #caf1f6;
-  --cyan-5: #b5e9f0;
-  --cyan-6: #9ddde7;
-  --cyan-7: #7dcedc;
-  --cyan-8: #3db9cf;
-  --cyan-9: #00a2c7;
-  --cyan-10: #0797b9;
-  --cyan-11: #107d98;
-  --cyan-12: #0d3c48;
-  --cyan-a1: #0099cc05;
-  --cyan-a2: #009db10d;
-  --cyan-a3: #00c2d121;
-  --cyan-a4: #00bcd435;
-  --cyan-a5: #01b4cc4a;
-  --cyan-a6: #00a7c162;
-  --cyan-a7: #009fbb82;
-  --cyan-a8: #00a3c0c2;
-  --cyan-a9: #00a2c7;
-  --cyan-a10: #0094b7f8;
-  --cyan-a11: #007491ef;
-  --cyan-a12: #00323ef2;
-  --cyan-surface: #eff9facc;
-  --cyan-indicator: var(--cyan-9);
-  --cyan-track: var(--cyan-9);
-}
-
-@supports (color: color(display-p3 1 1 1)) {
-  @media (color-gamut: p3) {
-    :root, .light, .light-theme {
-      --cyan-1: color(display-p3 .982 .992 .996);
-      --cyan-2: color(display-p3 .955 .981 .984);
-      --cyan-3: color(display-p3 .888 .965 .975);
-      --cyan-4: color(display-p3 .821 .941 .959);
-      --cyan-5: color(display-p3 .751 .907 .935);
-      --cyan-6: color(display-p3 .671 .862 .9);
-      --cyan-7: color(display-p3 .564 .8 .854);
-      --cyan-8: color(display-p3 .388 .715 .798);
-      --cyan-9: color(display-p3 .282 .627 .765);
-      --cyan-10: color(display-p3 .264 .583 .71);
-      --cyan-11: color(display-p3 .08 .48 .63);
-      --cyan-12: color(display-p3 .108 .232 .277);
-      --cyan-a1: color(display-p3 .02 .608 .804 / .02);
-      --cyan-a2: color(display-p3 .02 .557 .647 / .044);
-      --cyan-a3: color(display-p3 .004 .694 .796 / .114);
-      --cyan-a4: color(display-p3 .004 .678 .784 / .181);
-      --cyan-a5: color(display-p3 .004 .624 .733 / .248);
-      --cyan-a6: color(display-p3 .004 .584 .706 / .33);
-      --cyan-a7: color(display-p3 .004 .541 .667 / .436);
-      --cyan-a8: color(display-p3 0 .533 .667 / .612);
-      --cyan-a9: color(display-p3 0 .482 .675 / .718);
-      --cyan-a10: color(display-p3 0 .435 .608 / .738);
-      --cyan-a11: color(display-p3 .08 .48 .63);
-      --cyan-a12: color(display-p3 .108 .232 .277);
-      --cyan-surface: color(display-p3 .9412 .9765 .9804 / .8);
-    }
-  }
-}
-
-.dark, .dark-theme {
-  --cyan-1: #0b161a;
-  --cyan-2: #101b20;
-  --cyan-3: #082c36;
-  --cyan-4: #003848;
-  --cyan-5: #004558;
-  --cyan-6: #045468;
-  --cyan-7: #12677e;
-  --cyan-8: #11809c;
-  --cyan-9: #00a2c7;
-  --cyan-10: #23afd0;
-  --cyan-11: #4ccce6;
-  --cyan-12: #b6ecf7;
-  --cyan-a1: #0091f70a;
-  --cyan-a2: #02a7f211;
-  --cyan-a3: #00befd28;
-  --cyan-a4: #00baff3b;
-  --cyan-a5: #00befd4d;
-  --cyan-a6: #00c7fd5e;
-  --cyan-a7: #14cdff75;
-  --cyan-a8: #11cfff95;
-  --cyan-a9: #00cfffc3;
-  --cyan-a10: #28d6ffcd;
-  --cyan-a11: #52e1fee5;
-  --cyan-a12: #bbf3fef7;
-  --cyan-surface: #11252d80;
-  --cyan-indicator: var(--cyan-9);
-  --cyan-track: var(--cyan-9);
-}
-
-@supports (color: color(display-p3 1 1 1)) {
-  @media (color-gamut: p3) {
-    .dark, .dark-theme {
-      --cyan-1: color(display-p3 .053 .085 .098);
-      --cyan-2: color(display-p3 .072 .105 .122);
-      --cyan-3: color(display-p3 .073 .168 .209);
-      --cyan-4: color(display-p3 .063 .216 .277);
-      --cyan-5: color(display-p3 .091 .267 .336);
-      --cyan-6: color(display-p3 .137 .324 .4);
-      --cyan-7: color(display-p3 .186 .398 .484);
-      --cyan-8: color(display-p3 .23 .496 .6);
-      --cyan-9: color(display-p3 .282 .627 .765);
-      --cyan-10: color(display-p3 .331 .675 .801);
-      --cyan-11: color(display-p3 .446 .79 .887);
-      --cyan-12: color(display-p3 .757 .919 .962);
-      --cyan-a1: color(display-p3 0 .647 .992 / .034);
-      --cyan-a2: color(display-p3 .133 .733 1 / .059);
-      --cyan-a3: color(display-p3 .122 .741 .996 / .152);
-      --cyan-a4: color(display-p3 .051 .725 1 / .227);
-      --cyan-a5: color(display-p3 .149 .757 1 / .29);
-      --cyan-a6: color(display-p3 .267 .792 1 / .358);
-      --cyan-a7: color(display-p3 .333 .808 1 / .446);
-      --cyan-a8: color(display-p3 .357 .816 1 / .572);
-      --cyan-a9: color(display-p3 .357 .82 1 / .748);
-      --cyan-a10: color(display-p3 .4 .839 1 / .786);
-      --cyan-a11: color(display-p3 .446 .79 .887);
-      --cyan-a12: color(display-p3 .757 .919 .962);
-      --cyan-surface: color(display-p3 .0784 .1412 .1725 / .5);
-    }
-  }
-}
-
-:root {
-  --cyan-contrast: white;
+[data-color="cyan"] {
+  --color-1: var(--cyan-1);
+  --color-2: var(--cyan-2);
+  --color-3: var(--cyan-3);
+  --color-4: var(--cyan-4);
+  --color-5: var(--cyan-5);
+  --color-6: var(--cyan-6);
+  --color-7: var(--cyan-7);
+  --color-8: var(--cyan-8);
+  --color-9: var(--cyan-9);
+  --color-10: var(--cyan-10);
+  --color-11: var(--cyan-11);
+  --color-12: var(--cyan-12);
+  --color-a1: var(--cyan-a1);
+  --color-a2: var(--cyan-a2);
+  --color-a3: var(--cyan-a3);
+  --color-a4: var(--cyan-a4);
+  --color-a5: var(--cyan-a5);
+  --color-a6: var(--cyan-a6);
+  --color-a7: var(--cyan-a7);
+  --color-a8: var(--cyan-a8);
+  --color-a9: var(--cyan-a9);
+  --color-a10: var(--cyan-a10);
+  --color-a11: var(--cyan-a11);
+  --color-a12: var(--cyan-a12);
+  --accent-contrast: var(--cyan-contrast);
+  --accent-surface: var(--cyan-surface);
+  --accent-indicator: var(--cyan-indicator);
+  --accent-track: var(--cyan-track);
 }

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

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

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

@@ -1,127 +1,30 @@
-:root, .light, .light-theme {
-  --gold-1: #fdfdfc;
-  --gold-2: #faf9f2;
-  --gold-3: #f2f0e7;
-  --gold-4: #eae6db;
-  --gold-5: #e1dccf;
-  --gold-6: #d8d0bf;
-  --gold-7: #cbc0aa;
-  --gold-8: #b9a88d;
-  --gold-9: #978365;
-  --gold-10: #8c7a5e;
-  --gold-11: #71624b;
-  --gold-12: #3b352b;
-  --gold-a1: #55550003;
-  --gold-a2: #9d8a000d;
-  --gold-a3: #75600018;
-  --gold-a4: #6b4e0024;
-  --gold-a5: #60460030;
-  --gold-a6: #64440040;
-  --gold-a7: #63420055;
-  --gold-a8: #633d0072;
-  --gold-a9: #5332009a;
-  --gold-a10: #492d00a1;
-  --gold-a11: #362100b4;
-  --gold-a12: #130c00d4;
-  --gold-surface: #f9f8efcc;
-  --gold-indicator: var(--gold-9);
-  --gold-track: var(--gold-9);
-}
-
-@supports (color: color(display-p3 1 1 1)) {
-  @media (color-gamut: p3) {
-    :root, .light, .light-theme {
-      --gold-1: color(display-p3 .992 .992 .989);
-      --gold-2: color(display-p3 .98 .976 .953);
-      --gold-3: color(display-p3 .947 .94 .909);
-      --gold-4: color(display-p3 .914 .904 .865);
-      --gold-5: color(display-p3 .88 .865 .816);
-      --gold-6: color(display-p3 .84 .818 .756);
-      --gold-7: color(display-p3 .788 .753 .677);
-      --gold-8: color(display-p3 .715 .66 .565);
-      --gold-9: color(display-p3 .579 .517 .41);
-      --gold-10: color(display-p3 .538 .479 .38);
-      --gold-11: color(display-p3 .433 .386 .305);
-      --gold-12: color(display-p3 .227 .209 .173);
-      --gold-a1: color(display-p3 .349 .349 .024 / .012);
-      --gold-a2: color(display-p3 .592 .514 .024 / .048);
-      --gold-a3: color(display-p3 .4 .357 .012 / .091);
-      --gold-a4: color(display-p3 .357 .298 .008 / .134);
-      --gold-a5: color(display-p3 .345 .282 .004 / .185);
-      --gold-a6: color(display-p3 .341 .263 .004 / .244);
-      --gold-a7: color(display-p3 .345 .235 .004 / .322);
-      --gold-a8: color(display-p3 .345 .22 .004 / .436);
-      --gold-a9: color(display-p3 .286 .18 0 / .589);
-      --gold-a10: color(display-p3 .255 .161 0 / .62);
-      --gold-a11: color(display-p3 .433 .386 .305);
-      --gold-a12: color(display-p3 .227 .209 .173);
-      --gold-surface: color(display-p3 .9765 .9725 .9412 / .8);
-    }
-  }
-}
-
-.dark, .dark-theme {
-  --gold-1: #121211;
-  --gold-2: #1b1a17;
-  --gold-3: #24231f;
-  --gold-4: #2d2b26;
-  --gold-5: #38352e;
-  --gold-6: #444039;
-  --gold-7: #544f46;
-  --gold-8: #696256;
-  --gold-9: #978365;
-  --gold-10: #a39073;
-  --gold-11: #cbb99f;
-  --gold-12: #e8e2d9;
-  --gold-a1: #91911102;
-  --gold-a2: #f9e29d0b;
-  --gold-a3: #f8ecbb15;
-  --gold-a4: #ffeec41e;
-  --gold-a5: #feecc22a;
-  --gold-a6: #feebcb37;
-  --gold-a7: #ffedcd48;
-  --gold-a8: #fdeaca5f;
-  --gold-a9: #ffdba690;
-  --gold-a10: #fedfb09d;
-  --gold-a11: #fee7c6c8;
-  --gold-a12: #fef7ede7;
-  --gold-surface: #25231d80;
-  --gold-indicator: var(--gold-9);
-  --gold-track: var(--gold-9);
-}
-
-@supports (color: color(display-p3 1 1 1)) {
-  @media (color-gamut: p3) {
-    .dark, .dark-theme {
-      --gold-1: color(display-p3 .071 .071 .067);
-      --gold-2: color(display-p3 .104 .101 .09);
-      --gold-3: color(display-p3 .141 .136 .122);
-      --gold-4: color(display-p3 .177 .17 .152);
-      --gold-5: color(display-p3 .217 .207 .185);
-      --gold-6: color(display-p3 .265 .252 .225);
-      --gold-7: color(display-p3 .327 .31 .277);
-      --gold-8: color(display-p3 .407 .384 .342);
-      --gold-9: color(display-p3 .579 .517 .41);
-      --gold-10: color(display-p3 .628 .566 .463);
-      --gold-11: color(display-p3 .784 .728 .635);
-      --gold-12: color(display-p3 .906 .887 .855);
-      --gold-a1: color(display-p3 .855 .855 .071 / .005);
-      --gold-a2: color(display-p3 .98 .89 .616 / .043);
-      --gold-a3: color(display-p3 1 .949 .753 / .08);
-      --gold-a4: color(display-p3 1 .933 .8 / .118);
-      --gold-a5: color(display-p3 1 .949 .804 / .16);
-      --gold-a6: color(display-p3 1 .925 .8 / .215);
-      --gold-a7: color(display-p3 1 .945 .831 / .278);
-      --gold-a8: color(display-p3 1 .937 .82 / .366);
-      --gold-a9: color(display-p3 .996 .882 .69 / .551);
-      --gold-a10: color(display-p3 1 .894 .725 / .601);
-      --gold-a11: color(display-p3 .784 .728 .635);
-      --gold-a12: color(display-p3 .906 .887 .855);
-      --gold-surface: color(display-p3 .1412 .1333 .1098 / .5);
-    }
-  }
-}
-
-:root {
-  --gold-contrast: white;
+[data-color="gold"] {
+  --color-1: var(--gold-1);
+  --color-2: var(--gold-2);
+  --color-3: var(--gold-3);
+  --color-4: var(--gold-4);
+  --color-5: var(--gold-5);
+  --color-6: var(--gold-6);
+  --color-7: var(--gold-7);
+  --color-8: var(--gold-8);
+  --color-9: var(--gold-9);
+  --color-10: var(--gold-10);
+  --color-11: var(--gold-11);
+  --color-12: var(--gold-12);
+  --color-a1: var(--gold-a1);
+  --color-a2: var(--gold-a2);
+  --color-a3: var(--gold-a3);
+  --color-a4: var(--gold-a4);
+  --color-a5: var(--gold-a5);
+  --color-a6: var(--gold-a6);
+  --color-a7: var(--gold-a7);
+  --color-a8: var(--gold-a8);
+  --color-a9: var(--gold-a9);
+  --color-a10: var(--gold-a10);
+  --color-a11: var(--gold-a11);
+  --color-a12: var(--gold-a12);
+  --accent-contrast: var(--gold-contrast);
+  --accent-surface: var(--gold-surface);
+  --accent-indicator: var(--gold-indicator);
+  --accent-track: var(--gold-track);
 }

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

@@ -1,127 +1,30 @@
-:root, .light, .light-theme {
-  --grass-1: #fbfefb;
-  --grass-2: #f5fbf5;
-  --grass-3: #e9f6e9;
-  --grass-4: #daf1db;
-  --grass-5: #c9e8ca;
-  --grass-6: #b2ddb5;
-  --grass-7: #94ce9a;
-  --grass-8: #65ba74;
-  --grass-9: #46a758;
-  --grass-10: #3e9b4f;
-  --grass-11: #2a7e3b;
-  --grass-12: #203c25;
-  --grass-a1: #00c00004;
-  --grass-a2: #0099000a;
-  --grass-a3: #00970016;
-  --grass-a4: #009f0725;
-  --grass-a5: #00930536;
-  --grass-a6: #008f0a4d;
-  --grass-a7: #018b0f6b;
-  --grass-a8: #008d199a;
-  --grass-a9: #008619b9;
-  --grass-a10: #007b17c1;
-  --grass-a11: #006514d5;
-  --grass-a12: #002006df;
-  --grass-surface: #f3faf3cc;
-  --grass-indicator: var(--grass-9);
-  --grass-track: var(--grass-9);
-}
-
-@supports (color: color(display-p3 1 1 1)) {
-  @media (color-gamut: p3) {
-    :root, .light, .light-theme {
-      --grass-1: color(display-p3 .986 .996 .985);
-      --grass-2: color(display-p3 .966 .983 .964);
-      --grass-3: color(display-p3 .923 .965 .917);
-      --grass-4: color(display-p3 .872 .94 .865);
-      --grass-5: color(display-p3 .811 .908 .802);
-      --grass-6: color(display-p3 .733 .864 .724);
-      --grass-7: color(display-p3 .628 .803 .622);
-      --grass-8: color(display-p3 .477 .72 .482);
-      --grass-9: color(display-p3 .38 .647 .378);
-      --grass-10: color(display-p3 .344 .598 .342);
-      --grass-11: color(display-p3 .263 .488 .261);
-      --grass-12: color(display-p3 .151 .233 .153);
-      --grass-a1: color(display-p3 .024 .757 .024 / .016);
-      --grass-a2: color(display-p3 .024 .565 .024 / .036);
-      --grass-a3: color(display-p3 .059 .576 .008 / .083);
-      --grass-a4: color(display-p3 .035 .565 .008 / .134);
-      --grass-a5: color(display-p3 .047 .545 .008 / .197);
-      --grass-a6: color(display-p3 .031 .502 .004 / .275);
-      --grass-a7: color(display-p3 .012 .482 .004 / .377);
-      --grass-a8: color(display-p3 0 .467 .008 / .522);
-      --grass-a9: color(display-p3 .008 .435 0 / .624);
-      --grass-a10: color(display-p3 .008 .388 0 / .659);
-      --grass-a11: color(display-p3 .263 .488 .261);
-      --grass-a12: color(display-p3 .151 .233 .153);
-      --grass-surface: color(display-p3 .9569 .9804 .9569 / .8);
-    }
-  }
-}
-
-.dark, .dark-theme {
-  --grass-1: #0e1511;
-  --grass-2: #141a15;
-  --grass-3: #1b2a1e;
-  --grass-4: #1d3a24;
-  --grass-5: #25482d;
-  --grass-6: #2d5736;
-  --grass-7: #366740;
-  --grass-8: #3e7949;
-  --grass-9: #46a758;
-  --grass-10: #53b365;
-  --grass-11: #71d083;
-  --grass-12: #c2f0c2;
-  --grass-a1: #00de1205;
-  --grass-a2: #5ef7780a;
-  --grass-a3: #70fe8c1b;
-  --grass-a4: #57ff802c;
-  --grass-a5: #68ff8b3b;
-  --grass-a6: #71ff8f4b;
-  --grass-a7: #77fd925d;
-  --grass-a8: #77fd9070;
-  --grass-a9: #65ff82a1;
-  --grass-a10: #72ff8dae;
-  --grass-a11: #89ff9fcd;
-  --grass-a12: #ceffceef;
-  --grass-surface: #19231b80;
-  --grass-indicator: var(--grass-9);
-  --grass-track: var(--grass-9);
-}
-
-@supports (color: color(display-p3 1 1 1)) {
-  @media (color-gamut: p3) {
-    .dark, .dark-theme {
-      --grass-1: color(display-p3 .062 .083 .067);
-      --grass-2: color(display-p3 .083 .103 .085);
-      --grass-3: color(display-p3 .118 .163 .122);
-      --grass-4: color(display-p3 .142 .225 .15);
-      --grass-5: color(display-p3 .178 .279 .186);
-      --grass-6: color(display-p3 .217 .337 .224);
-      --grass-7: color(display-p3 .258 .4 .264);
-      --grass-8: color(display-p3 .302 .47 .305);
-      --grass-9: color(display-p3 .38 .647 .378);
-      --grass-10: color(display-p3 .426 .694 .426);
-      --grass-11: color(display-p3 .535 .807 .542);
-      --grass-12: color(display-p3 .797 .936 .776);
-      --grass-a1: color(display-p3 0 .992 .071 / .017);
-      --grass-a2: color(display-p3 .482 .996 .584 / .038);
-      --grass-a3: color(display-p3 .549 .992 .588 / .106);
-      --grass-a4: color(display-p3 .51 .996 .557 / .169);
-      --grass-a5: color(display-p3 .553 1 .588 / .227);
-      --grass-a6: color(display-p3 .584 1 .608 / .29);
-      --grass-a7: color(display-p3 .604 1 .616 / .358);
-      --grass-a8: color(display-p3 .608 1 .62 / .433);
-      --grass-a9: color(display-p3 .573 1 .569 / .622);
-      --grass-a10: color(display-p3 .6 .996 .6 / .673);
-      --grass-a11: color(display-p3 .535 .807 .542);
-      --grass-a12: color(display-p3 .797 .936 .776);
-      --grass-surface: color(display-p3 .102 .1333 .102 / .5);
-    }
-  }
-}
-
-:root {
-  --grass-contrast: white;
+[data-color="grass"] {
+  --color-1: var(--grass-1);
+  --color-2: var(--grass-2);
+  --color-3: var(--grass-3);
+  --color-4: var(--grass-4);
+  --color-5: var(--grass-5);
+  --color-6: var(--grass-6);
+  --color-7: var(--grass-7);
+  --color-8: var(--grass-8);
+  --color-9: var(--grass-9);
+  --color-10: var(--grass-10);
+  --color-11: var(--grass-11);
+  --color-12: var(--grass-12);
+  --color-a1: var(--grass-a1);
+  --color-a2: var(--grass-a2);
+  --color-a3: var(--grass-a3);
+  --color-a4: var(--grass-a4);
+  --color-a5: var(--grass-a5);
+  --color-a6: var(--grass-a6);
+  --color-a7: var(--grass-a7);
+  --color-a8: var(--grass-a8);
+  --color-a9: var(--grass-a9);
+  --color-a10: var(--grass-a10);
+  --color-a11: var(--grass-a11);
+  --color-a12: var(--grass-a12);
+  --accent-contrast: var(--grass-contrast);
+  --accent-surface: var(--grass-surface);
+  --accent-indicator: var(--grass-indicator);
+  --accent-track: var(--grass-track);
 }

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

@@ -1,127 +1,30 @@
-:root, .light, .light-theme {
-  --green-1: #fbfefc;
-  --green-2: #f4fbf6;
-  --green-3: #e6f6eb;
-  --green-4: #d6f1df;
-  --green-5: #c4e8d1;
-  --green-6: #adddc0;
-  --green-7: #8eceaa;
-  --green-8: #5bb98b;
-  --green-9: #30a46c;
-  --green-10: #2b9a66;
-  --green-11: #218358;
-  --green-12: #193b2d;
-  --green-a1: #00c04004;
-  --green-a2: #00a32f0b;
-  --green-a3: #00a43319;
-  --green-a4: #00a83829;
-  --green-a5: #019c393b;
-  --green-a6: #00963c52;
-  --green-a7: #00914071;
-  --green-a8: #00924ba4;
-  --green-a9: #008f4acf;
-  --green-a10: #008647d4;
-  --green-a11: #00713fde;
-  --green-a12: #002616e6;
-  --green-surface: #f1faf4cc;
-  --green-indicator: var(--green-9);
-  --green-track: var(--green-9);
-}
-
-@supports (color: color(display-p3 1 1 1)) {
-  @media (color-gamut: p3) {
-    :root, .light, .light-theme {
-      --green-1: color(display-p3 .986 .996 .989);
-      --green-2: color(display-p3 .963 .983 .967);
-      --green-3: color(display-p3 .913 .964 .925);
-      --green-4: color(display-p3 .859 .94 .879);
-      --green-5: color(display-p3 .796 .907 .826);
-      --green-6: color(display-p3 .718 .863 .761);
-      --green-7: color(display-p3 .61 .801 .675);
-      --green-8: color(display-p3 .451 .715 .559);
-      --green-9: color(display-p3 .332 .634 .442);
-      --green-10: color(display-p3 .308 .595 .417);
-      --green-11: color(display-p3 .19 .5 .32);
-      --green-12: color(display-p3 .132 .228 .18);
-      --green-a1: color(display-p3 .024 .757 .267 / .016);
-      --green-a2: color(display-p3 .024 .565 .129 / .036);
-      --green-a3: color(display-p3 .012 .596 .145 / .087);
-      --green-a4: color(display-p3 .008 .588 .145 / .142);
-      --green-a5: color(display-p3 .004 .541 .157 / .204);
-      --green-a6: color(display-p3 .004 .518 .157 / .283);
-      --green-a7: color(display-p3 .004 .486 .165 / .389);
-      --green-a8: color(display-p3 0 .478 .2 / .55);
-      --green-a9: color(display-p3 0 .455 .165 / .667);
-      --green-a10: color(display-p3 0 .416 .153 / .691);
-      --green-a11: color(display-p3 .19 .5 .32);
-      --green-a12: color(display-p3 .132 .228 .18);
-      --green-surface: color(display-p3 .9569 .9804 .9608 / .8);
-    }
-  }
-}
-
-.dark, .dark-theme {
-  --green-1: #0e1512;
-  --green-2: #121b17;
-  --green-3: #132d21;
-  --green-4: #113b29;
-  --green-5: #174933;
-  --green-6: #20573e;
-  --green-7: #28684a;
-  --green-8: #2f7c57;
-  --green-9: #30a46c;
-  --green-10: #33b074;
-  --green-11: #3dd68c;
-  --green-12: #b1f1cb;
-  --green-a1: #00de4505;
-  --green-a2: #29f99d0b;
-  --green-a3: #22ff991e;
-  --green-a4: #11ff992d;
-  --green-a5: #2bffa23c;
-  --green-a6: #44ffaa4b;
-  --green-a7: #50fdac5e;
-  --green-a8: #54ffad73;
-  --green-a9: #44ffa49e;
-  --green-a10: #43fea4ab;
-  --green-a11: #46fea5d4;
-  --green-a12: #bbffd7f0;
-  --green-surface: #15251d80;
-  --green-indicator: var(--green-9);
-  --green-track: var(--green-9);
-}
-
-@supports (color: color(display-p3 1 1 1)) {
-  @media (color-gamut: p3) {
-    .dark, .dark-theme {
-      --green-1: color(display-p3 .062 .083 .071);
-      --green-2: color(display-p3 .079 .106 .09);
-      --green-3: color(display-p3 .1 .173 .133);
-      --green-4: color(display-p3 .115 .229 .166);
-      --green-5: color(display-p3 .147 .282 .206);
-      --green-6: color(display-p3 .185 .338 .25);
-      --green-7: color(display-p3 .227 .403 .298);
-      --green-8: color(display-p3 .27 .479 .351);
-      --green-9: color(display-p3 .332 .634 .442);
-      --green-10: color(display-p3 .357 .682 .474);
-      --green-11: color(display-p3 .434 .828 .573);
-      --green-12: color(display-p3 .747 .938 .807);
-      --green-a1: color(display-p3 0 .992 .298 / .017);
-      --green-a2: color(display-p3 .341 .98 .616 / .043);
-      --green-a3: color(display-p3 .376 .996 .655 / .114);
-      --green-a4: color(display-p3 .341 .996 .635 / .173);
-      --green-a5: color(display-p3 .408 1 .678 / .232);
-      --green-a6: color(display-p3 .475 1 .706 / .29);
-      --green-a7: color(display-p3 .514 1 .706 / .362);
-      --green-a8: color(display-p3 .529 1 .718 / .442);
-      --green-a9: color(display-p3 .502 .996 .682 / .61);
-      --green-a10: color(display-p3 .506 1 .682 / .66);
-      --green-a11: color(display-p3 .434 .828 .573);
-      --green-a12: color(display-p3 .747 .938 .807);
-      --green-surface: color(display-p3 .0941 .1412 .1098 / .5);
-    }
-  }
-}
-
-:root {
-  --green-contrast: white;
+[data-color="green"] {
+  --color-1: var(--green-1);
+  --color-2: var(--green-2);
+  --color-3: var(--green-3);
+  --color-4: var(--green-4);
+  --color-5: var(--green-5);
+  --color-6: var(--green-6);
+  --color-7: var(--green-7);
+  --color-8: var(--green-8);
+  --color-9: var(--green-9);
+  --color-10: var(--green-10);
+  --color-11: var(--green-11);
+  --color-12: var(--green-12);
+  --color-a1: var(--green-a1);
+  --color-a2: var(--green-a2);
+  --color-a3: var(--green-a3);
+  --color-a4: var(--green-a4);
+  --color-a5: var(--green-a5);
+  --color-a6: var(--green-a6);
+  --color-a7: var(--green-a7);
+  --color-a8: var(--green-a8);
+  --color-a9: var(--green-a9);
+  --color-a10: var(--green-a10);
+  --color-a11: var(--green-a11);
+  --color-a12: var(--green-a12);
+  --accent-contrast: var(--green-contrast);
+  --accent-surface: var(--green-surface);
+  --accent-indicator: var(--green-indicator);
+  --accent-track: var(--green-track);
 }