elements-kit 0.5.1 → 0.6.0

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

@@ -1,127 +1,30 @@
-:root, .light, .light-theme {
-  --teal-1: #fafefd;
-  --teal-2: #f3fbf9;
-  --teal-3: #e0f8f3;
-  --teal-4: #ccf3ea;
-  --teal-5: #b8eae0;
-  --teal-6: #a1ded2;
-  --teal-7: #83cdc1;
-  --teal-8: #53b9ab;
-  --teal-9: #12a594;
-  --teal-10: #0d9b8a;
-  --teal-11: #008573;
-  --teal-12: #0d3d38;
-  --teal-a1: #00cc9905;
-  --teal-a2: #00aa800c;
-  --teal-a3: #00c69d1f;
-  --teal-a4: #00c39633;
-  --teal-a5: #00b49047;
-  --teal-a6: #00a6855e;
-  --teal-a7: #0099807c;
-  --teal-a8: #009783ac;
-  --teal-a9: #009e8ced;
-  --teal-a10: #009684f2;
-  --teal-a11: #008573;
-  --teal-a12: #00332df2;
-  --teal-surface: #f0faf8cc;
-  --teal-indicator: var(--teal-9);
-  --teal-track: var(--teal-9);
-}
-
-@supports (color: color(display-p3 1 1 1)) {
-  @media (color-gamut: p3) {
-    :root, .light, .light-theme {
-      --teal-1: color(display-p3 .983 .996 .992);
-      --teal-2: color(display-p3 .958 .983 .976);
-      --teal-3: color(display-p3 .895 .971 .952);
-      --teal-4: color(display-p3 .831 .949 .92);
-      --teal-5: color(display-p3 .761 .914 .878);
-      --teal-6: color(display-p3 .682 .864 .825);
-      --teal-7: color(display-p3 .581 .798 .756);
-      --teal-8: color(display-p3 .433 .716 .671);
-      --teal-9: color(display-p3 .297 .637 .581);
-      --teal-10: color(display-p3 .275 .599 .542);
-      --teal-11: color(display-p3 .08 .5 .43);
-      --teal-12: color(display-p3 .11 .235 .219);
-      --teal-a1: color(display-p3 .024 .757 .514 / .016);
-      --teal-a2: color(display-p3 .02 .647 .467 / .044);
-      --teal-a3: color(display-p3 .004 .741 .557 / .106);
-      --teal-a4: color(display-p3 .004 .702 .537 / .169);
-      --teal-a5: color(display-p3 .004 .643 .494 / .24);
-      --teal-a6: color(display-p3 .004 .569 .447 / .318);
-      --teal-a7: color(display-p3 .004 .518 .424 / .42);
-      --teal-a8: color(display-p3 0 .506 .424 / .569);
-      --teal-a9: color(display-p3 0 .482 .404 / .702);
-      --teal-a10: color(display-p3 0 .451 .369 / .726);
-      --teal-a11: color(display-p3 .08 .5 .43);
-      --teal-a12: color(display-p3 .11 .235 .219);
-      --teal-surface: color(display-p3 .9451 .9804 .9725 / .8);
-    }
-  }
-}
-
-.dark, .dark-theme {
-  --teal-1: #0d1514;
-  --teal-2: #111c1b;
-  --teal-3: #0d2d2a;
-  --teal-4: #023b37;
-  --teal-5: #084843;
-  --teal-6: #145750;
-  --teal-7: #1c6961;
-  --teal-8: #207e73;
-  --teal-9: #12a594;
-  --teal-10: #0eb39e;
-  --teal-11: #0bd8b6;
-  --teal-12: #adf0dd;
-  --teal-a1: #00deab05;
-  --teal-a2: #12fbe60c;
-  --teal-a3: #00ffe61e;
-  --teal-a4: #00ffe92d;
-  --teal-a5: #00ffea3b;
-  --teal-a6: #1cffe84b;
-  --teal-a7: #2efde85f;
-  --teal-a8: #32ffe775;
-  --teal-a9: #13ffe49f;
-  --teal-a10: #0dffe0ae;
-  --teal-a11: #0afed5d6;
-  --teal-a12: #b8ffebef;
-  --teal-surface: #13272580;
-  --teal-indicator: var(--teal-9);
-  --teal-track: var(--teal-9);
-}
-
-@supports (color: color(display-p3 1 1 1)) {
-  @media (color-gamut: p3) {
-    .dark, .dark-theme {
-      --teal-1: color(display-p3 .059 .083 .079);
-      --teal-2: color(display-p3 .075 .11 .107);
-      --teal-3: color(display-p3 .087 .175 .165);
-      --teal-4: color(display-p3 .087 .227 .214);
-      --teal-5: color(display-p3 .12 .277 .261);
-      --teal-6: color(display-p3 .162 .335 .314);
-      --teal-7: color(display-p3 .205 .406 .379);
-      --teal-8: color(display-p3 .245 .489 .453);
-      --teal-9: color(display-p3 .297 .637 .581);
-      --teal-10: color(display-p3 .319 .69 .62);
-      --teal-11: color(display-p3 .388 .835 .719);
-      --teal-12: color(display-p3 .734 .934 .87);
-      --teal-a1: color(display-p3 0 .992 .761 / .017);
-      --teal-a2: color(display-p3 .235 .988 .902 / .047);
-      --teal-a3: color(display-p3 .235 1 .898 / .118);
-      --teal-a4: color(display-p3 .18 .996 .929 / .173);
-      --teal-a5: color(display-p3 .31 1 .933 / .227);
-      --teal-a6: color(display-p3 .396 1 .933 / .286);
-      --teal-a7: color(display-p3 .443 1 .925 / .366);
-      --teal-a8: color(display-p3 .459 1 .925 / .454);
-      --teal-a9: color(display-p3 .443 .996 .906 / .61);
-      --teal-a10: color(display-p3 .439 .996 .89 / .669);
-      --teal-a11: color(display-p3 .388 .835 .719);
-      --teal-a12: color(display-p3 .734 .934 .87);
-      --teal-surface: color(display-p3 .0863 .149 .1412 / .5);
-    }
-  }
-}
-
-:root {
-  --teal-contrast: white;
+[data-color="teal"] {
+  --color-1: var(--teal-1);
+  --color-2: var(--teal-2);
+  --color-3: var(--teal-3);
+  --color-4: var(--teal-4);
+  --color-5: var(--teal-5);
+  --color-6: var(--teal-6);
+  --color-7: var(--teal-7);
+  --color-8: var(--teal-8);
+  --color-9: var(--teal-9);
+  --color-10: var(--teal-10);
+  --color-11: var(--teal-11);
+  --color-12: var(--teal-12);
+  --color-a1: var(--teal-a1);
+  --color-a2: var(--teal-a2);
+  --color-a3: var(--teal-a3);
+  --color-a4: var(--teal-a4);
+  --color-a5: var(--teal-a5);
+  --color-a6: var(--teal-a6);
+  --color-a7: var(--teal-a7);
+  --color-a8: var(--teal-a8);
+  --color-a9: var(--teal-a9);
+  --color-a10: var(--teal-a10);
+  --color-a11: var(--teal-a11);
+  --color-a12: var(--teal-a12);
+  --accent-contrast: var(--teal-contrast);
+  --accent-surface: var(--teal-surface);
+  --accent-indicator: var(--teal-indicator);
+  --accent-track: var(--teal-track);
 }

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

@@ -1,127 +1,30 @@
-:root, .light, .light-theme {
-  --tomato-1: #fffcfc;
-  --tomato-2: #fff8f7;
-  --tomato-3: #feebe7;
-  --tomato-4: #ffdcd3;
-  --tomato-5: #ffcdc2;
-  --tomato-6: #fdbdaf;
-  --tomato-7: #f5a898;
-  --tomato-8: #ec8e7b;
-  --tomato-9: #e54d2e;
-  --tomato-10: #dd4425;
-  --tomato-11: #d13415;
-  --tomato-12: #5c271f;
-  --tomato-a1: #ff000003;
-  --tomato-a2: #ff200008;
-  --tomato-a3: #f52b0018;
-  --tomato-a4: #ff35002c;
-  --tomato-a5: #ff2e003d;
-  --tomato-a6: #f92d0050;
-  --tomato-a7: #e7280067;
-  --tomato-a8: #db250084;
-  --tomato-a9: #df2600d1;
-  --tomato-a10: #d72400da;
-  --tomato-a11: #cd2200ea;
-  --tomato-a12: #460900e0;
-  --tomato-surface: #fff6f5cc;
-  --tomato-indicator: var(--tomato-9);
-  --tomato-track: var(--tomato-9);
-}
-
-@supports (color: color(display-p3 1 1 1)) {
-  @media (color-gamut: p3) {
-    :root, .light, .light-theme {
-      --tomato-1: color(display-p3 .998 .989 .988);
-      --tomato-2: color(display-p3 .994 .974 .969);
-      --tomato-3: color(display-p3 .985 .924 .909);
-      --tomato-4: color(display-p3 .996 .868 .835);
-      --tomato-5: color(display-p3 .98 .812 .77);
-      --tomato-6: color(display-p3 .953 .75 .698);
-      --tomato-7: color(display-p3 .917 .673 .611);
-      --tomato-8: color(display-p3 .875 .575 .502);
-      --tomato-9: color(display-p3 .831 .345 .231);
-      --tomato-10: color(display-p3 .802 .313 .2);
-      --tomato-11: color(display-p3 .755 .259 .152);
-      --tomato-12: color(display-p3 .335 .165 .132);
-      --tomato-a1: color(display-p3 .675 .024 .024 / .012);
-      --tomato-a2: color(display-p3 .757 .145 .02 / .032);
-      --tomato-a3: color(display-p3 .831 .184 .012 / .091);
-      --tomato-a4: color(display-p3 .976 .192 .004 / .165);
-      --tomato-a5: color(display-p3 .918 .192 .004 / .232);
-      --tomato-a6: color(display-p3 .847 .173 .004 / .302);
-      --tomato-a7: color(display-p3 .788 .165 .004 / .389);
-      --tomato-a8: color(display-p3 .749 .153 .004 / .499);
-      --tomato-a9: color(display-p3 .78 .149 0 / .769);
-      --tomato-a10: color(display-p3 .757 .141 0 / .8);
-      --tomato-a11: color(display-p3 .755 .259 .152);
-      --tomato-a12: color(display-p3 .335 .165 .132);
-      --tomato-surface: color(display-p3 .9922 .9647 .9608 / .8);
-    }
-  }
-}
-
-.dark, .dark-theme {
-  --tomato-1: #181111;
-  --tomato-2: #1f1513;
-  --tomato-3: #391714;
-  --tomato-4: #4e1511;
-  --tomato-5: #5e1c16;
-  --tomato-6: #6e2920;
-  --tomato-7: #853a2d;
-  --tomato-8: #ac4d39;
-  --tomato-9: #e54d2e;
-  --tomato-10: #ec6142;
-  --tomato-11: #ff977d;
-  --tomato-12: #fbd3cb;
-  --tomato-a1: #f1121208;
-  --tomato-a2: #ff55330f;
-  --tomato-a3: #ff35232b;
-  --tomato-a4: #fd201142;
-  --tomato-a5: #fe332153;
-  --tomato-a6: #ff4f3864;
-  --tomato-a7: #fd644a7d;
-  --tomato-a8: #fe6d4ea7;
-  --tomato-a9: #fe5431e4;
-  --tomato-a10: #ff6847eb;
-  --tomato-a11: #ff977d;
-  --tomato-a12: #ffd6cefb;
-  --tomato-surface: #2d191580;
-  --tomato-indicator: var(--tomato-9);
-  --tomato-track: var(--tomato-9);
-}
-
-@supports (color: color(display-p3 1 1 1)) {
-  @media (color-gamut: p3) {
-    .dark, .dark-theme {
-      --tomato-1: color(display-p3 .09 .068 .067);
-      --tomato-2: color(display-p3 .115 .084 .076);
-      --tomato-3: color(display-p3 .205 .097 .083);
-      --tomato-4: color(display-p3 .282 .099 .077);
-      --tomato-5: color(display-p3 .339 .129 .101);
-      --tomato-6: color(display-p3 .398 .179 .141);
-      --tomato-7: color(display-p3 .487 .245 .194);
-      --tomato-8: color(display-p3 .629 .322 .248);
-      --tomato-9: color(display-p3 .831 .345 .231);
-      --tomato-10: color(display-p3 .862 .415 .298);
-      --tomato-11: color(display-p3 1 .585 .455);
-      --tomato-12: color(display-p3 .959 .833 .802);
-      --tomato-a1: color(display-p3 .973 .071 .071 / .026);
-      --tomato-a2: color(display-p3 .992 .376 .224 / .051);
-      --tomato-a3: color(display-p3 .996 .282 .176 / .148);
-      --tomato-a4: color(display-p3 1 .204 .118 / .232);
-      --tomato-a5: color(display-p3 1 .286 .192 / .29);
-      --tomato-a6: color(display-p3 1 .392 .278 / .353);
-      --tomato-a7: color(display-p3 1 .459 .349 / .45);
-      --tomato-a8: color(display-p3 1 .49 .369 / .601);
-      --tomato-a9: color(display-p3 1 .408 .267 / .82);
-      --tomato-a10: color(display-p3 1 .478 .341 / .853);
-      --tomato-a11: color(display-p3 1 .585 .455);
-      --tomato-a12: color(display-p3 .959 .833 .802);
-      --tomato-surface: color(display-p3 .1569 .0941 .0784 / .5);
-    }
-  }
-}
-
-:root {
-  --tomato-contrast: white;
+[data-color="tomato"] {
+  --color-1: var(--tomato-1);
+  --color-2: var(--tomato-2);
+  --color-3: var(--tomato-3);
+  --color-4: var(--tomato-4);
+  --color-5: var(--tomato-5);
+  --color-6: var(--tomato-6);
+  --color-7: var(--tomato-7);
+  --color-8: var(--tomato-8);
+  --color-9: var(--tomato-9);
+  --color-10: var(--tomato-10);
+  --color-11: var(--tomato-11);
+  --color-12: var(--tomato-12);
+  --color-a1: var(--tomato-a1);
+  --color-a2: var(--tomato-a2);
+  --color-a3: var(--tomato-a3);
+  --color-a4: var(--tomato-a4);
+  --color-a5: var(--tomato-a5);
+  --color-a6: var(--tomato-a6);
+  --color-a7: var(--tomato-a7);
+  --color-a8: var(--tomato-a8);
+  --color-a9: var(--tomato-a9);
+  --color-a10: var(--tomato-a10);
+  --color-a11: var(--tomato-a11);
+  --color-a12: var(--tomato-a12);
+  --accent-contrast: var(--tomato-contrast);
+  --accent-surface: var(--tomato-surface);
+  --accent-indicator: var(--tomato-indicator);
+  --accent-track: var(--tomato-track);
 }

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

@@ -1,127 +1,30 @@
-:root, .light, .light-theme {
-  --violet-1: #fdfcfe;
-  --violet-2: #faf8ff;
-  --violet-3: #f4f0fe;
-  --violet-4: #ebe4ff;
-  --violet-5: #e1d9ff;
-  --violet-6: #d4cafe;
-  --violet-7: #c2b5f5;
-  --violet-8: #aa99ec;
-  --violet-9: #6e56cf;
-  --violet-10: #654dc4;
-  --violet-11: #6550b9;
-  --violet-12: #2f265f;
-  --violet-a1: #5500aa03;
-  --violet-a2: #4900ff07;
-  --violet-a3: #4400ee0f;
-  --violet-a4: #4300ff1b;
-  --violet-a5: #3600ff26;
-  --violet-a6: #3100fb35;
-  --violet-a7: #2d01dd4a;
-  --violet-a8: #2b00d066;
-  --violet-a9: #2400b7a9;
-  --violet-a10: #2300abb2;
-  --violet-a11: #1f0099af;
-  --violet-a12: #0b0043d9;
-  --violet-surface: #f9f6ffcc;
-  --violet-indicator: var(--violet-9);
-  --violet-track: var(--violet-9);
-}
-
-@supports (color: color(display-p3 1 1 1)) {
-  @media (color-gamut: p3) {
-    :root, .light, .light-theme {
-      --violet-1: color(display-p3 .991 .988 .995);
-      --violet-2: color(display-p3 .978 .974 .998);
-      --violet-3: color(display-p3 .953 .943 .993);
-      --violet-4: color(display-p3 .916 .897 1);
-      --violet-5: color(display-p3 .876 .851 1);
-      --violet-6: color(display-p3 .825 .793 .981);
-      --violet-7: color(display-p3 .752 .712 .943);
-      --violet-8: color(display-p3 .654 .602 .902);
-      --violet-9: color(display-p3 .417 .341 .784);
-      --violet-10: color(display-p3 .381 .306 .741);
-      --violet-11: color(display-p3 .383 .317 .702);
-      --violet-12: color(display-p3 .179 .15 .359);
-      --violet-a1: color(display-p3 .349 .024 .675 / .012);
-      --violet-a2: color(display-p3 .161 .024 .863 / .028);
-      --violet-a3: color(display-p3 .204 .004 .871 / .059);
-      --violet-a4: color(display-p3 .196 .004 1 / .102);
-      --violet-a5: color(display-p3 .165 .008 1 / .15);
-      --violet-a6: color(display-p3 .153 .004 .906 / .208);
-      --violet-a7: color(display-p3 .141 .004 .796 / .287);
-      --violet-a8: color(display-p3 .133 .004 .753 / .397);
-      --violet-a9: color(display-p3 .114 0 .675 / .659);
-      --violet-a10: color(display-p3 .11 0 .627 / .695);
-      --violet-a11: color(display-p3 .383 .317 .702);
-      --violet-a12: color(display-p3 .179 .15 .359);
-      --violet-surface: color(display-p3 .9725 .9647 .9961 / .8);
-    }
-  }
-}
-
-.dark, .dark-theme {
-  --violet-1: #14121f;
-  --violet-2: #1b1525;
-  --violet-3: #291f43;
-  --violet-4: #33255b;
-  --violet-5: #3c2e69;
-  --violet-6: #473876;
-  --violet-7: #56468b;
-  --violet-8: #6958ad;
-  --violet-9: #6e56cf;
-  --violet-10: #7d66d9;
-  --violet-11: #baa7ff;
-  --violet-12: #e2ddfe;
-  --violet-a1: #4422ff0f;
-  --violet-a2: #853ff916;
-  --violet-a3: #8354fe36;
-  --violet-a4: #7d51fd50;
-  --violet-a5: #845ffd5f;
-  --violet-a6: #8f6cfd6d;
-  --violet-a7: #9879ff83;
-  --violet-a8: #977dfea8;
-  --violet-a9: #8668ffcc;
-  --violet-a10: #9176fed7;
-  --violet-a11: #baa7ff;
-  --violet-a12: #e3defffe;
-  --violet-surface: #25193980;
-  --violet-indicator: var(--violet-9);
-  --violet-track: var(--violet-9);
-}
-
-@supports (color: color(display-p3 1 1 1)) {
-  @media (color-gamut: p3) {
-    .dark, .dark-theme {
-      --violet-1: color(display-p3 .077 .071 .118);
-      --violet-2: color(display-p3 .101 .084 .141);
-      --violet-3: color(display-p3 .154 .123 .256);
-      --violet-4: color(display-p3 .191 .148 .345);
-      --violet-5: color(display-p3 .226 .182 .396);
-      --violet-6: color(display-p3 .269 .223 .449);
-      --violet-7: color(display-p3 .326 .277 .53);
-      --violet-8: color(display-p3 .399 .346 .656);
-      --violet-9: color(display-p3 .417 .341 .784);
-      --violet-10: color(display-p3 .477 .402 .823);
-      --violet-11: color(display-p3 .72 .65 1);
-      --violet-12: color(display-p3 .883 .867 .986);
-      --violet-a1: color(display-p3 .282 .141 .996 / .055);
-      --violet-a2: color(display-p3 .51 .263 1 / .08);
-      --violet-a3: color(display-p3 .494 .337 .996 / .202);
-      --violet-a4: color(display-p3 .49 .345 1 / .299);
-      --violet-a5: color(display-p3 .525 .392 1 / .353);
-      --violet-a6: color(display-p3 .569 .455 1 / .408);
-      --violet-a7: color(display-p3 .588 .494 1 / .496);
-      --violet-a8: color(display-p3 .596 .51 1 / .631);
-      --violet-a9: color(display-p3 .522 .424 1 / .769);
-      --violet-a10: color(display-p3 .576 .482 1 / .811);
-      --violet-a11: color(display-p3 .72 .65 1);
-      --violet-a12: color(display-p3 .883 .867 .986);
-      --violet-surface: color(display-p3 .1333 .102 .2118 / .5);
-    }
-  }
-}
-
-:root {
-  --violet-contrast: white;
+[data-color="violet"] {
+  --color-1: var(--violet-1);
+  --color-2: var(--violet-2);
+  --color-3: var(--violet-3);
+  --color-4: var(--violet-4);
+  --color-5: var(--violet-5);
+  --color-6: var(--violet-6);
+  --color-7: var(--violet-7);
+  --color-8: var(--violet-8);
+  --color-9: var(--violet-9);
+  --color-10: var(--violet-10);
+  --color-11: var(--violet-11);
+  --color-12: var(--violet-12);
+  --color-a1: var(--violet-a1);
+  --color-a2: var(--violet-a2);
+  --color-a3: var(--violet-a3);
+  --color-a4: var(--violet-a4);
+  --color-a5: var(--violet-a5);
+  --color-a6: var(--violet-a6);
+  --color-a7: var(--violet-a7);
+  --color-a8: var(--violet-a8);
+  --color-a9: var(--violet-a9);
+  --color-a10: var(--violet-a10);
+  --color-a11: var(--violet-a11);
+  --color-a12: var(--violet-a12);
+  --accent-contrast: var(--violet-contrast);
+  --accent-surface: var(--violet-surface);
+  --accent-indicator: var(--violet-indicator);
+  --accent-track: var(--violet-track);
 }

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

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

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

@@ -1,133 +1,30 @@
-:root, .light, .light-theme {
-  --yellow-1: #fdfdf9;
-  --yellow-2: #fefce9;
-  --yellow-3: #fffab8;
-  --yellow-4: #fff394;
-  --yellow-5: #ffe770;
-  --yellow-6: #f3d768;
-  --yellow-7: #e4c767;
-  --yellow-8: #d5ae39;
-  --yellow-9: #ffe629;
-  --yellow-10: #ffdc00;
-  --yellow-11: #9e6c00;
-  --yellow-12: #473b1f;
-  --yellow-a1: #aaaa0006;
-  --yellow-a2: #f4dd0016;
-  --yellow-a3: #ffee0047;
-  --yellow-a4: #ffe3016b;
-  --yellow-a5: #ffd5008f;
-  --yellow-a6: #ebbc0097;
-  --yellow-a7: #d2a10098;
-  --yellow-a8: #c99700c6;
-  --yellow-a9: #ffe100d6;
-  --yellow-a10: #ffdc00;
-  --yellow-a11: #9e6c00;
-  --yellow-a12: #2e2000e0;
-  --yellow-surface: #fefbe4cc;
-  --yellow-indicator: var(--yellow-10);
-  --yellow-track: var(--yellow-10);
-}
-
-@supports (color: color(display-p3 1 1 1)) {
-  @media (color-gamut: p3) {
-    :root, .light, .light-theme {
-      --yellow-1: color(display-p3 .992 .992 .978);
-      --yellow-2: color(display-p3 .995 .99 .922);
-      --yellow-3: color(display-p3 .997 .982 .749);
-      --yellow-4: color(display-p3 .992 .953 .627);
-      --yellow-5: color(display-p3 .984 .91 .51);
-      --yellow-6: color(display-p3 .934 .847 .474);
-      --yellow-7: color(display-p3 .876 .785 .46);
-      --yellow-8: color(display-p3 .811 .689 .313);
-      --yellow-9: color(display-p3 1 .92 .22);
-      --yellow-10: color(display-p3 .977 .868 .291);
-      --yellow-11: color(display-p3 .6 .44 0);
-      --yellow-12: color(display-p3 .271 .233 .137);
-      --yellow-a1: color(display-p3 .675 .675 .024 / .024);
-      --yellow-a2: color(display-p3 .953 .855 .008 / .079);
-      --yellow-a3: color(display-p3 .988 .925 .004 / .251);
-      --yellow-a4: color(display-p3 .98 .875 .004 / .373);
-      --yellow-a5: color(display-p3 .969 .816 .004 / .491);
-      --yellow-a6: color(display-p3 .875 .71 0 / .526);
-      --yellow-a7: color(display-p3 .769 .604 0 / .542);
-      --yellow-a8: color(display-p3 .725 .549 0 / .687);
-      --yellow-a9: color(display-p3 1 .898 0 / .781);
-      --yellow-a10: color(display-p3 .969 .812 0 / .71);
-      --yellow-a11: color(display-p3 .6 .44 0);
-      --yellow-a12: color(display-p3 .271 .233 .137);
-      --yellow-surface: color(display-p3 .9961 .9922 .902 / .8);
-    }
-  }
-}
-
-.dark, .dark-theme {
-  --yellow-1: #14120b;
-  --yellow-2: #1b180f;
-  --yellow-3: #2d2305;
-  --yellow-4: #362b00;
-  --yellow-5: #433500;
-  --yellow-6: #524202;
-  --yellow-7: #665417;
-  --yellow-8: #836a21;
-  --yellow-9: #ffe629;
-  --yellow-10: #ffff57;
-  --yellow-11: #f5e147;
-  --yellow-12: #f6eeb4;
-  --yellow-a1: #d1510004;
-  --yellow-a2: #f9b4000b;
-  --yellow-a3: #ffaa001e;
-  --yellow-a4: #fdb70028;
-  --yellow-a5: #febb0036;
-  --yellow-a6: #fec40046;
-  --yellow-a7: #fdcb225c;
-  --yellow-a8: #fdca327b;
-  --yellow-a9: #ffe629;
-  --yellow-a10: #ffff57;
-  --yellow-a11: #fee949f5;
-  --yellow-a12: #fef6baf6;
-  --yellow-surface: #231f1380;
-  --yellow-indicator: var(--yellow-9);
-  --yellow-track: var(--yellow-9);
-}
-
-@supports (color: color(display-p3 1 1 1)) {
-  @media (color-gamut: p3) {
-    .dark, .dark-theme {
-      --yellow-1: color(display-p3 .078 .069 .047);
-      --yellow-2: color(display-p3 .103 .094 .063);
-      --yellow-3: color(display-p3 .168 .137 .039);
-      --yellow-4: color(display-p3 .209 .169 0);
-      --yellow-5: color(display-p3 .255 .209 0);
-      --yellow-6: color(display-p3 .31 .261 .07);
-      --yellow-7: color(display-p3 .389 .331 .135);
-      --yellow-8: color(display-p3 .497 .42 .182);
-      --yellow-9: color(display-p3 1 .92 .22);
-      --yellow-10: color(display-p3 1 1 .456);
-      --yellow-11: color(display-p3 .948 .885 .392);
-      --yellow-12: color(display-p3 .959 .934 .731);
-      --yellow-a1: color(display-p3 .973 .369 0 / .013);
-      --yellow-a2: color(display-p3 .996 .792 0 / .038);
-      --yellow-a3: color(display-p3 .996 .71 0 / .11);
-      --yellow-a4: color(display-p3 .996 .741 0 / .152);
-      --yellow-a5: color(display-p3 .996 .765 0 / .202);
-      --yellow-a6: color(display-p3 .996 .816 .082 / .261);
-      --yellow-a7: color(display-p3 1 .831 .263 / .345);
-      --yellow-a8: color(display-p3 1 .831 .314 / .463);
-      --yellow-a9: color(display-p3 1 .922 .22);
-      --yellow-a10: color(display-p3 1 1 .455);
-      --yellow-a11: color(display-p3 .948 .885 .392);
-      --yellow-a12: color(display-p3 .959 .934 .731);
-      --yellow-surface: color(display-p3 .1333 .1176 .0706 / .5);
-    }
-  }
-}
-
-:root {
-  --yellow-contrast: #21201c;
-}
-
-@supports (color: color-mix(in oklab, white, black)) {
-  .dark, .dark-theme {
-    --yellow-track: color-mix(in oklab, var(--yellow-8), var(--yellow-9) 65%);
-  }
+[data-color="yellow"] {
+  --color-1: var(--yellow-1);
+  --color-2: var(--yellow-2);
+  --color-3: var(--yellow-3);
+  --color-4: var(--yellow-4);
+  --color-5: var(--yellow-5);
+  --color-6: var(--yellow-6);
+  --color-7: var(--yellow-7);
+  --color-8: var(--yellow-8);
+  --color-9: var(--yellow-9);
+  --color-10: var(--yellow-10);
+  --color-11: var(--yellow-11);
+  --color-12: var(--yellow-12);
+  --color-a1: var(--yellow-a1);
+  --color-a2: var(--yellow-a2);
+  --color-a3: var(--yellow-a3);
+  --color-a4: var(--yellow-a4);
+  --color-a5: var(--yellow-a5);
+  --color-a6: var(--yellow-a6);
+  --color-a7: var(--yellow-a7);
+  --color-a8: var(--yellow-a8);
+  --color-a9: var(--yellow-a9);
+  --color-a10: var(--yellow-a10);
+  --color-a11: var(--yellow-a11);
+  --color-a12: var(--yellow-a12);
+  --accent-contrast: var(--yellow-contrast);
+  --accent-surface: var(--yellow-surface);
+  --accent-indicator: var(--yellow-indicator);
+  --accent-track: var(--yellow-track);
 }