elements-kit 0.5.0 → 0.5.2

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

@@ -1,127 +1,30 @@
-:root, .light, .light-theme {
-  --jade-1: #fbfefd;
-  --jade-2: #f4fbf7;
-  --jade-3: #e6f7ed;
-  --jade-4: #d6f1e3;
-  --jade-5: #c3e9d7;
-  --jade-6: #acdec8;
-  --jade-7: #8bceb6;
-  --jade-8: #56ba9f;
-  --jade-9: #29a383;
-  --jade-10: #26997b;
-  --jade-11: #208368;
-  --jade-12: #1d3b31;
-  --jade-a1: #00c08004;
-  --jade-a2: #00a3460b;
-  --jade-a3: #00ae4819;
-  --jade-a4: #00a85129;
-  --jade-a5: #00a2553c;
-  --jade-a6: #009a5753;
-  --jade-a7: #00945f74;
-  --jade-a8: #00976ea9;
-  --jade-a9: #00916bd6;
-  --jade-a10: #008764d9;
-  --jade-a11: #007152df;
-  --jade-a12: #002217e2;
-  --jade-surface: #f1faf5cc;
-  --jade-indicator: var(--jade-9);
-  --jade-track: var(--jade-9);
-}
-
-@supports (color: color(display-p3 1 1 1)) {
-  @media (color-gamut: p3) {
-    :root, .light, .light-theme {
-      --jade-1: color(display-p3 .986 .996 .992);
-      --jade-2: color(display-p3 .962 .983 .969);
-      --jade-3: color(display-p3 .912 .965 .932);
-      --jade-4: color(display-p3 .858 .941 .893);
-      --jade-5: color(display-p3 .795 .909 .847);
-      --jade-6: color(display-p3 .715 .864 .791);
-      --jade-7: color(display-p3 .603 .802 .718);
-      --jade-8: color(display-p3 .44 .72 .629);
-      --jade-9: color(display-p3 .319 .63 .521);
-      --jade-10: color(display-p3 .299 .592 .488);
-      --jade-11: color(display-p3 .15 .5 .37);
-      --jade-12: color(display-p3 .142 .229 .194);
-      --jade-a1: color(display-p3 .024 .757 .514 / .016);
-      --jade-a2: color(display-p3 .024 .612 .22 / .04);
-      --jade-a3: color(display-p3 .012 .596 .235 / .087);
-      --jade-a4: color(display-p3 .008 .588 .255 / .142);
-      --jade-a5: color(display-p3 .004 .561 .251 / .204);
-      --jade-a6: color(display-p3 .004 .525 .278 / .287);
-      --jade-a7: color(display-p3 .004 .506 .29 / .397);
-      --jade-a8: color(display-p3 0 .506 .337 / .561);
-      --jade-a9: color(display-p3 0 .459 .298 / .683);
-      --jade-a10: color(display-p3 0 .42 .271 / .702);
-      --jade-a11: color(display-p3 .15 .5 .37);
-      --jade-a12: color(display-p3 .142 .229 .194);
-      --jade-surface: color(display-p3 .9529 .9804 .9608 / .8);
-    }
-  }
-}
-
-.dark, .dark-theme {
-  --jade-1: #0d1512;
-  --jade-2: #121c18;
-  --jade-3: #0f2e22;
-  --jade-4: #0b3b2c;
-  --jade-5: #114837;
-  --jade-6: #1b5745;
-  --jade-7: #246854;
-  --jade-8: #2a7e68;
-  --jade-9: #29a383;
-  --jade-10: #27b08b;
-  --jade-11: #1fd8a4;
-  --jade-12: #adf0d4;
-  --jade-a1: #00de4505;
-  --jade-a2: #27fba60c;
-  --jade-a3: #02f99920;
-  --jade-a4: #00ffaa2d;
-  --jade-a5: #11ffb63b;
-  --jade-a6: #34ffc24b;
-  --jade-a7: #45fdc75e;
-  --jade-a8: #48ffcf75;
-  --jade-a9: #38feca9d;
-  --jade-a10: #31fec7ab;
-  --jade-a11: #21fec0d6;
-  --jade-a12: #b8ffe1ef;
-  --jade-surface: #13271f80;
-  --jade-indicator: var(--jade-9);
-  --jade-track: var(--jade-9);
-}
-
-@supports (color: color(display-p3 1 1 1)) {
-  @media (color-gamut: p3) {
-    .dark, .dark-theme {
-      --jade-1: color(display-p3 .059 .083 .071);
-      --jade-2: color(display-p3 .078 .11 .094);
-      --jade-3: color(display-p3 .091 .176 .138);
-      --jade-4: color(display-p3 .102 .228 .177);
-      --jade-5: color(display-p3 .133 .279 .221);
-      --jade-6: color(display-p3 .174 .334 .273);
-      --jade-7: color(display-p3 .219 .402 .335);
-      --jade-8: color(display-p3 .263 .488 .411);
-      --jade-9: color(display-p3 .319 .63 .521);
-      --jade-10: color(display-p3 .338 .68 .555);
-      --jade-11: color(display-p3 .4 .835 .656);
-      --jade-12: color(display-p3 .734 .934 .838);
-      --jade-a1: color(display-p3 0 .992 .298 / .017);
-      --jade-a2: color(display-p3 .318 .988 .651 / .047);
-      --jade-a3: color(display-p3 .267 1 .667 / .118);
-      --jade-a4: color(display-p3 .275 .996 .702 / .173);
-      --jade-a5: color(display-p3 .361 1 .741 / .227);
-      --jade-a6: color(display-p3 .439 1 .796 / .286);
-      --jade-a7: color(display-p3 .49 1 .804 / .362);
-      --jade-a8: color(display-p3 .506 1 .835 / .45);
-      --jade-a9: color(display-p3 .478 .996 .816 / .606);
-      --jade-a10: color(display-p3 .478 1 .816 / .656);
-      --jade-a11: color(display-p3 .4 .835 .656);
-      --jade-a12: color(display-p3 .734 .934 .838);
-      --jade-surface: color(display-p3 .0863 .149 .1176 / .5);
-    }
-  }
-}
-
-:root {
-  --jade-contrast: white;
+[data-color="jade"] {
+  --color-1: var(--jade-1);
+  --color-2: var(--jade-2);
+  --color-3: var(--jade-3);
+  --color-4: var(--jade-4);
+  --color-5: var(--jade-5);
+  --color-6: var(--jade-6);
+  --color-7: var(--jade-7);
+  --color-8: var(--jade-8);
+  --color-9: var(--jade-9);
+  --color-10: var(--jade-10);
+  --color-11: var(--jade-11);
+  --color-12: var(--jade-12);
+  --color-a1: var(--jade-a1);
+  --color-a2: var(--jade-a2);
+  --color-a3: var(--jade-a3);
+  --color-a4: var(--jade-a4);
+  --color-a5: var(--jade-a5);
+  --color-a6: var(--jade-a6);
+  --color-a7: var(--jade-a7);
+  --color-a8: var(--jade-a8);
+  --color-a9: var(--jade-a9);
+  --color-a10: var(--jade-a10);
+  --color-a11: var(--jade-a11);
+  --color-a12: var(--jade-a12);
+  --accent-contrast: var(--jade-contrast);
+  --accent-surface: var(--jade-surface);
+  --accent-indicator: var(--jade-indicator);
+  --accent-track: var(--jade-track);
 }

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

@@ -1,133 +1,30 @@
-:root, .light, .light-theme {
-  --lime-1: #fcfdfa;
-  --lime-2: #f8faf3;
-  --lime-3: #eef6d6;
-  --lime-4: #e2f0bd;
-  --lime-5: #d3e7a6;
-  --lime-6: #c2da91;
-  --lime-7: #abc978;
-  --lime-8: #8db654;
-  --lime-9: #bdee63;
-  --lime-10: #b0e64c;
-  --lime-11: #5c7c2f;
-  --lime-12: #37401c;
-  --lime-a1: #66990005;
-  --lime-a2: #6b95000c;
-  --lime-a3: #96c80029;
-  --lime-a4: #8fc60042;
-  --lime-a5: #81bb0059;
-  --lime-a6: #72aa006e;
-  --lime-a7: #61990087;
-  --lime-a8: #559200ab;
-  --lime-a9: #93e4009c;
-  --lime-a10: #8fdc00b3;
-  --lime-a11: #375f00d0;
-  --lime-a12: #1e2900e3;
-  --lime-surface: #f6f9f0cc;
-  --lime-indicator: var(--lime-9);
-  --lime-track: var(--lime-9);
-}
-
-@supports (color: color(display-p3 1 1 1)) {
-  @media (color-gamut: p3) {
-    :root, .light, .light-theme {
-      --lime-1: color(display-p3 .989 .992 .981);
-      --lime-2: color(display-p3 .975 .98 .954);
-      --lime-3: color(display-p3 .939 .965 .851);
-      --lime-4: color(display-p3 .896 .94 .76);
-      --lime-5: color(display-p3 .843 .903 .678);
-      --lime-6: color(display-p3 .778 .852 .599);
-      --lime-7: color(display-p3 .694 .784 .508);
-      --lime-8: color(display-p3 .585 .707 .378);
-      --lime-9: color(display-p3 .78 .928 .466);
-      --lime-10: color(display-p3 .734 .896 .397);
-      --lime-11: color(display-p3 .386 .482 .227);
-      --lime-12: color(display-p3 .222 .25 .128);
-      --lime-a1: color(display-p3 .412 .608 .02 / .02);
-      --lime-a2: color(display-p3 .514 .592 .024 / .048);
-      --lime-a3: color(display-p3 .584 .765 .008 / .15);
-      --lime-a4: color(display-p3 .561 .757 .004 / .24);
-      --lime-a5: color(display-p3 .514 .698 .004 / .322);
-      --lime-a6: color(display-p3 .443 .627 0 / .4);
-      --lime-a7: color(display-p3 .376 .561 .004 / .491);
-      --lime-a8: color(display-p3 .333 .529 0 / .624);
-      --lime-a9: color(display-p3 .588 .867 0 / .534);
-      --lime-a10: color(display-p3 .561 .827 0 / .604);
-      --lime-a11: color(display-p3 .386 .482 .227);
-      --lime-a12: color(display-p3 .222 .25 .128);
-      --lime-surface: color(display-p3 .9725 .9765 .9412 / .8);
-    }
-  }
-}
-
-.dark, .dark-theme {
-  --lime-1: #11130c;
-  --lime-2: #151a10;
-  --lime-3: #1f2917;
-  --lime-4: #29371d;
-  --lime-5: #334423;
-  --lime-6: #3d522a;
-  --lime-7: #496231;
-  --lime-8: #577538;
-  --lime-9: #bdee63;
-  --lime-10: #d4ff70;
-  --lime-11: #bde56c;
-  --lime-12: #e3f7ba;
-  --lime-a1: #11bb0003;
-  --lime-a2: #78f7000a;
-  --lime-a3: #9bfd4c1a;
-  --lime-a4: #a7fe5c29;
-  --lime-a5: #affe6537;
-  --lime-a6: #b2fe6d46;
-  --lime-a7: #b6ff6f57;
-  --lime-a8: #b6fd6d6c;
-  --lime-a9: #caff69ed;
-  --lime-a10: #d4ff70;
-  --lime-a11: #d1fe77e4;
-  --lime-a12: #e9febff7;
-  --lime-surface: #1b211580;
-  --lime-indicator: var(--lime-9);
-  --lime-track: var(--lime-9);
-}
-
-@supports (color: color(display-p3 1 1 1)) {
-  @media (color-gamut: p3) {
-    .dark, .dark-theme {
-      --lime-1: color(display-p3 .067 .073 .048);
-      --lime-2: color(display-p3 .086 .1 .067);
-      --lime-3: color(display-p3 .13 .16 .099);
-      --lime-4: color(display-p3 .172 .214 .126);
-      --lime-5: color(display-p3 .213 .266 .153);
-      --lime-6: color(display-p3 .257 .321 .182);
-      --lime-7: color(display-p3 .307 .383 .215);
-      --lime-8: color(display-p3 .365 .456 .25);
-      --lime-9: color(display-p3 .78 .928 .466);
-      --lime-10: color(display-p3 .865 .995 .519);
-      --lime-11: color(display-p3 .771 .893 .485);
-      --lime-12: color(display-p3 .905 .966 .753);
-      --lime-a1: color(display-p3 .067 .941 0 / .009);
-      --lime-a2: color(display-p3 .584 .996 .071 / .038);
-      --lime-a3: color(display-p3 .69 1 .38 / .101);
-      --lime-a4: color(display-p3 .729 1 .435 / .16);
-      --lime-a5: color(display-p3 .745 1 .471 / .215);
-      --lime-a6: color(display-p3 .769 1 .482 / .274);
-      --lime-a7: color(display-p3 .769 1 .506 / .341);
-      --lime-a8: color(display-p3 .784 1 .51 / .416);
-      --lime-a9: color(display-p3 .839 1 .502 / .925);
-      --lime-a10: color(display-p3 .871 1 .522 / .996);
-      --lime-a11: color(display-p3 .771 .893 .485);
-      --lime-a12: color(display-p3 .905 .966 .753);
-      --lime-surface: color(display-p3 .1098 .1255 .0784 / .5);
-    }
-  }
-}
-
-:root {
-  --lime-contrast: #1d211c;
-}
-
-@supports (color: color-mix(in oklab, white, black)) {
-  .dark, .dark-theme {
-    --lime-track: color-mix(in oklab, var(--lime-8), var(--lime-9) 65%);
-  }
+[data-color="lime"] {
+  --color-1: var(--lime-1);
+  --color-2: var(--lime-2);
+  --color-3: var(--lime-3);
+  --color-4: var(--lime-4);
+  --color-5: var(--lime-5);
+  --color-6: var(--lime-6);
+  --color-7: var(--lime-7);
+  --color-8: var(--lime-8);
+  --color-9: var(--lime-9);
+  --color-10: var(--lime-10);
+  --color-11: var(--lime-11);
+  --color-12: var(--lime-12);
+  --color-a1: var(--lime-a1);
+  --color-a2: var(--lime-a2);
+  --color-a3: var(--lime-a3);
+  --color-a4: var(--lime-a4);
+  --color-a5: var(--lime-a5);
+  --color-a6: var(--lime-a6);
+  --color-a7: var(--lime-a7);
+  --color-a8: var(--lime-a8);
+  --color-a9: var(--lime-a9);
+  --color-a10: var(--lime-a10);
+  --color-a11: var(--lime-a11);
+  --color-a12: var(--lime-a12);
+  --accent-contrast: var(--lime-contrast);
+  --accent-surface: var(--lime-surface);
+  --accent-indicator: var(--lime-indicator);
+  --accent-track: var(--lime-track);
 }

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

@@ -1,133 +1,30 @@
-:root, .light, .light-theme {
-  --mint-1: #f9fefd;
-  --mint-2: #f2fbf9;
-  --mint-3: #ddf9f2;
-  --mint-4: #c8f4e9;
-  --mint-5: #b3ecde;
-  --mint-6: #9ce0d0;
-  --mint-7: #7ecfbd;
-  --mint-8: #4cbba5;
-  --mint-9: #86ead4;
-  --mint-10: #7de0cb;
-  --mint-11: #027864;
-  --mint-12: #16433c;
-  --mint-a1: #00d5aa06;
-  --mint-a2: #00b18a0d;
-  --mint-a3: #00d29e22;
-  --mint-a4: #00cc9937;
-  --mint-a5: #00c0914c;
-  --mint-a6: #00b08663;
-  --mint-a7: #00a17d81;
-  --mint-a8: #009e7fb3;
-  --mint-a9: #00d3a579;
-  --mint-a10: #00c39982;
-  --mint-a11: #007763fd;
-  --mint-a12: #00312ae9;
-  --mint-surface: #effaf8cc;
-  --mint-indicator: var(--mint-9);
-  --mint-track: var(--mint-9);
-}
-
-@supports (color: color(display-p3 1 1 1)) {
-  @media (color-gamut: p3) {
-    :root, .light, .light-theme {
-      --mint-1: color(display-p3 .98 .995 .992);
-      --mint-2: color(display-p3 .957 .985 .977);
-      --mint-3: color(display-p3 .888 .972 .95);
-      --mint-4: color(display-p3 .819 .951 .916);
-      --mint-5: color(display-p3 .747 .918 .873);
-      --mint-6: color(display-p3 .668 .87 .818);
-      --mint-7: color(display-p3 .567 .805 .744);
-      --mint-8: color(display-p3 .42 .724 .649);
-      --mint-9: color(display-p3 .62 .908 .834);
-      --mint-10: color(display-p3 .585 .871 .797);
-      --mint-11: color(display-p3 .203 .463 .397);
-      --mint-12: color(display-p3 .136 .259 .236);
-      --mint-a1: color(display-p3 .02 .804 .608 / .02);
-      --mint-a2: color(display-p3 .02 .647 .467 / .044);
-      --mint-a3: color(display-p3 .004 .761 .553 / .114);
-      --mint-a4: color(display-p3 .004 .741 .545 / .181);
-      --mint-a5: color(display-p3 .004 .678 .51 / .255);
-      --mint-a6: color(display-p3 .004 .616 .463 / .334);
-      --mint-a7: color(display-p3 .004 .549 .412 / .432);
-      --mint-a8: color(display-p3 0 .529 .392 / .581);
-      --mint-a9: color(display-p3 .004 .765 .569 / .381);
-      --mint-a10: color(display-p3 .004 .69 .51 / .416);
-      --mint-a11: color(display-p3 .203 .463 .397);
-      --mint-a12: color(display-p3 .136 .259 .236);
-      --mint-surface: color(display-p3 .9451 .9804 .9725 / .8);
-    }
-  }
-}
-
-.dark, .dark-theme {
-  --mint-1: #0e1515;
-  --mint-2: #0f1b1b;
-  --mint-3: #092c2b;
-  --mint-4: #003a38;
-  --mint-5: #004744;
-  --mint-6: #105650;
-  --mint-7: #1e685f;
-  --mint-8: #277f70;
-  --mint-9: #86ead4;
-  --mint-10: #a8f5e5;
-  --mint-11: #58d5ba;
-  --mint-12: #c4f5e1;
-  --mint-a1: #00dede05;
-  --mint-a2: #00f9f90b;
-  --mint-a3: #00fff61d;
-  --mint-a4: #00fff42c;
-  --mint-a5: #00fff23a;
-  --mint-a6: #0effeb4a;
-  --mint-a7: #34fde55e;
-  --mint-a8: #41ffdf76;
-  --mint-a9: #92ffe7e9;
-  --mint-a10: #aefeedf5;
-  --mint-a11: #67ffded2;
-  --mint-a12: #cbfee9f5;
-  --mint-surface: #15272780;
-  --mint-indicator: var(--mint-9);
-  --mint-track: var(--mint-9);
-}
-
-@supports (color: color(display-p3 1 1 1)) {
-  @media (color-gamut: p3) {
-    .dark, .dark-theme {
-      --mint-1: color(display-p3 .059 .082 .081);
-      --mint-2: color(display-p3 .068 .104 .105);
-      --mint-3: color(display-p3 .077 .17 .168);
-      --mint-4: color(display-p3 .068 .224 .22);
-      --mint-5: color(display-p3 .104 .275 .264);
-      --mint-6: color(display-p3 .154 .332 .313);
-      --mint-7: color(display-p3 .207 .403 .373);
-      --mint-8: color(display-p3 .258 .49 .441);
-      --mint-9: color(display-p3 .62 .908 .834);
-      --mint-10: color(display-p3 .725 .954 .898);
-      --mint-11: color(display-p3 .482 .825 .733);
-      --mint-12: color(display-p3 .807 .955 .887);
-      --mint-a1: color(display-p3 0 .992 .992 / .017);
-      --mint-a2: color(display-p3 .071 .98 .98 / .043);
-      --mint-a3: color(display-p3 .176 .996 .996 / .11);
-      --mint-a4: color(display-p3 .071 .996 .973 / .169);
-      --mint-a5: color(display-p3 .243 1 .949 / .223);
-      --mint-a6: color(display-p3 .369 1 .933 / .286);
-      --mint-a7: color(display-p3 .459 1 .914 / .362);
-      --mint-a8: color(display-p3 .49 1 .89 / .454);
-      --mint-a9: color(display-p3 .678 .996 .914 / .904);
-      --mint-a10: color(display-p3 .761 1 .941 / .95);
-      --mint-a11: color(display-p3 .482 .825 .733);
-      --mint-a12: color(display-p3 .807 .955 .887);
-      --mint-surface: color(display-p3 .0941 .149 .1412 / .5);
-    }
-  }
-}
-
-:root {
-  --mint-contrast: #1a211e;
-}
-
-@supports (color: color-mix(in oklab, white, black)) {
-  .dark, .dark-theme {
-    --mint-track: color-mix(in oklab, var(--mint-8), var(--mint-9) 65%);
-  }
+[data-color="mint"] {
+  --color-1: var(--mint-1);
+  --color-2: var(--mint-2);
+  --color-3: var(--mint-3);
+  --color-4: var(--mint-4);
+  --color-5: var(--mint-5);
+  --color-6: var(--mint-6);
+  --color-7: var(--mint-7);
+  --color-8: var(--mint-8);
+  --color-9: var(--mint-9);
+  --color-10: var(--mint-10);
+  --color-11: var(--mint-11);
+  --color-12: var(--mint-12);
+  --color-a1: var(--mint-a1);
+  --color-a2: var(--mint-a2);
+  --color-a3: var(--mint-a3);
+  --color-a4: var(--mint-a4);
+  --color-a5: var(--mint-a5);
+  --color-a6: var(--mint-a6);
+  --color-a7: var(--mint-a7);
+  --color-a8: var(--mint-a8);
+  --color-a9: var(--mint-a9);
+  --color-a10: var(--mint-a10);
+  --color-a11: var(--mint-a11);
+  --color-a12: var(--mint-a12);
+  --accent-contrast: var(--mint-contrast);
+  --accent-surface: var(--mint-surface);
+  --accent-indicator: var(--mint-indicator);
+  --accent-track: var(--mint-track);
 }

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

@@ -1,127 +1,30 @@
-:root, .light, .light-theme {
-  --orange-1: #fefcfb;
-  --orange-2: #fff7ed;
-  --orange-3: #ffefd6;
-  --orange-4: #ffdfb5;
-  --orange-5: #ffd19a;
-  --orange-6: #ffc182;
-  --orange-7: #f5ae73;
-  --orange-8: #ec9455;
-  --orange-9: #f76b15;
-  --orange-10: #ef5f00;
-  --orange-11: #cc4e00;
-  --orange-12: #582d1d;
-  --orange-a1: #c0400004;
-  --orange-a2: #ff8e0012;
-  --orange-a3: #ff9c0029;
-  --orange-a4: #ff91014a;
-  --orange-a5: #ff8b0065;
-  --orange-a6: #ff81007d;
-  --orange-a7: #ed6c008c;
-  --orange-a8: #e35f00aa;
-  --orange-a9: #f65e00ea;
-  --orange-a10: #ef5f00;
-  --orange-a11: #cc4e00;
-  --orange-a12: #431200e2;
-  --orange-surface: #fff5e9cc;
-  --orange-indicator: var(--orange-9);
-  --orange-track: var(--orange-9);
-}
-
-@supports (color: color(display-p3 1 1 1)) {
-  @media (color-gamut: p3) {
-    :root, .light, .light-theme {
-      --orange-1: color(display-p3 .995 .988 .985);
-      --orange-2: color(display-p3 .994 .968 .934);
-      --orange-3: color(display-p3 .989 .938 .85);
-      --orange-4: color(display-p3 1 .874 .687);
-      --orange-5: color(display-p3 1 .821 .583);
-      --orange-6: color(display-p3 .975 .767 .545);
-      --orange-7: color(display-p3 .919 .693 .486);
-      --orange-8: color(display-p3 .877 .597 .379);
-      --orange-9: color(display-p3 .9 .45 .2);
-      --orange-10: color(display-p3 .87 .409 .164);
-      --orange-11: color(display-p3 .76 .34 0);
-      --orange-12: color(display-p3 .323 .185 .127);
-      --orange-a1: color(display-p3 .757 .267 .024 / .016);
-      --orange-a2: color(display-p3 .886 .533 .008 / .067);
-      --orange-a3: color(display-p3 .922 .584 .008 / .15);
-      --orange-a4: color(display-p3 1 .604 .004 / .314);
-      --orange-a5: color(display-p3 1 .569 .004 / .416);
-      --orange-a6: color(display-p3 .949 .494 .004 / .455);
-      --orange-a7: color(display-p3 .839 .408 0 / .514);
-      --orange-a8: color(display-p3 .804 .349 0 / .62);
-      --orange-a9: color(display-p3 .878 .314 0 / .8);
-      --orange-a10: color(display-p3 .843 .29 0 / .836);
-      --orange-a11: color(display-p3 .76 .34 0);
-      --orange-a12: color(display-p3 .323 .185 .127);
-      --orange-surface: color(display-p3 .9961 .9608 .9176 / .8);
-    }
-  }
-}
-
-.dark, .dark-theme {
-  --orange-1: #17120e;
-  --orange-2: #1e160f;
-  --orange-3: #331e0b;
-  --orange-4: #462100;
-  --orange-5: #562800;
-  --orange-6: #66350c;
-  --orange-7: #7e451d;
-  --orange-8: #a35829;
-  --orange-9: #f76b15;
-  --orange-10: #ff801f;
-  --orange-11: #ffa057;
-  --orange-12: #ffe0c2;
-  --orange-a1: #ec360007;
-  --orange-a2: #fe6d000e;
-  --orange-a3: #fb6a0025;
-  --orange-a4: #ff590039;
-  --orange-a5: #ff61004a;
-  --orange-a6: #fd75045c;
-  --orange-a7: #ff832c75;
-  --orange-a8: #fe84389d;
-  --orange-a9: #fe6d15f7;
-  --orange-a10: #ff801f;
-  --orange-a11: #ffa057;
-  --orange-a12: #ffe0c2;
-  --orange-surface: #271d1380;
-  --orange-indicator: var(--orange-9);
-  --orange-track: var(--orange-9);
-}
-
-@supports (color: color(display-p3 1 1 1)) {
-  @media (color-gamut: p3) {
-    .dark, .dark-theme {
-      --orange-1: color(display-p3 .088 .07 .057);
-      --orange-2: color(display-p3 .113 .089 .061);
-      --orange-3: color(display-p3 .189 .12 .056);
-      --orange-4: color(display-p3 .262 .132 0);
-      --orange-5: color(display-p3 .315 .168 .016);
-      --orange-6: color(display-p3 .376 .219 .088);
-      --orange-7: color(display-p3 .465 .283 .147);
-      --orange-8: color(display-p3 .601 .359 .201);
-      --orange-9: color(display-p3 .9 .45 .2);
-      --orange-10: color(display-p3 .98 .51 .23);
-      --orange-11: color(display-p3 1 .63 .38);
-      --orange-12: color(display-p3 .98 .883 .775);
-      --orange-a1: color(display-p3 .961 .247 0 / .022);
-      --orange-a2: color(display-p3 .992 .529 0 / .051);
-      --orange-a3: color(display-p3 .996 .486 0 / .131);
-      --orange-a4: color(display-p3 .996 .384 0 / .211);
-      --orange-a5: color(display-p3 1 .455 0 / .265);
-      --orange-a6: color(display-p3 1 .529 .129 / .332);
-      --orange-a7: color(display-p3 1 .569 .251 / .429);
-      --orange-a8: color(display-p3 1 .584 .302 / .572);
-      --orange-a9: color(display-p3 1 .494 .216 / .895);
-      --orange-a10: color(display-p3 1 .522 .235 / .979);
-      --orange-a11: color(display-p3 1 .63 .38);
-      --orange-a12: color(display-p3 .98 .883 .775);
-      --orange-surface: color(display-p3 .1412 .1098 .0706 / .5);
-    }
-  }
-}
-
-:root {
-  --orange-contrast: white;
+[data-color="orange"] {
+  --color-1: var(--orange-1);
+  --color-2: var(--orange-2);
+  --color-3: var(--orange-3);
+  --color-4: var(--orange-4);
+  --color-5: var(--orange-5);
+  --color-6: var(--orange-6);
+  --color-7: var(--orange-7);
+  --color-8: var(--orange-8);
+  --color-9: var(--orange-9);
+  --color-10: var(--orange-10);
+  --color-11: var(--orange-11);
+  --color-12: var(--orange-12);
+  --color-a1: var(--orange-a1);
+  --color-a2: var(--orange-a2);
+  --color-a3: var(--orange-a3);
+  --color-a4: var(--orange-a4);
+  --color-a5: var(--orange-a5);
+  --color-a6: var(--orange-a6);
+  --color-a7: var(--orange-a7);
+  --color-a8: var(--orange-a8);
+  --color-a9: var(--orange-a9);
+  --color-a10: var(--orange-a10);
+  --color-a11: var(--orange-a11);
+  --color-a12: var(--orange-a12);
+  --accent-contrast: var(--orange-contrast);
+  --accent-surface: var(--orange-surface);
+  --accent-indicator: var(--orange-indicator);
+  --accent-track: var(--orange-track);
 }