elements-kit 0.5.0 → 0.5.2

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

@@ -1,127 +1,30 @@
-:root, .light, .light-theme {
-  --pink-1: #fffcfe;
-  --pink-2: #fef7fb;
-  --pink-3: #fee9f5;
-  --pink-4: #fbdcef;
-  --pink-5: #f6cee7;
-  --pink-6: #efbfdd;
-  --pink-7: #e7acd0;
-  --pink-8: #dd93c2;
-  --pink-9: #d6409f;
-  --pink-10: #cf3897;
-  --pink-11: #c2298a;
-  --pink-12: #651249;
-  --pink-a1: #ff00aa03;
-  --pink-a2: #e0008008;
-  --pink-a3: #f4008c16;
-  --pink-a4: #e2008b23;
-  --pink-a5: #d1008331;
-  --pink-a6: #c0007840;
-  --pink-a7: #b6006f53;
-  --pink-a8: #af006f6c;
-  --pink-a9: #c8007fbf;
-  --pink-a10: #c2007ac7;
-  --pink-a11: #b60074d6;
-  --pink-a12: #59003bed;
-  --pink-surface: #fef5facc;
-  --pink-indicator: var(--pink-9);
-  --pink-track: var(--pink-9);
-}
-
-@supports (color: color(display-p3 1 1 1)) {
-  @media (color-gamut: p3) {
-    :root, .light, .light-theme {
-      --pink-1: color(display-p3 .998 .989 .996);
-      --pink-2: color(display-p3 .992 .97 .985);
-      --pink-3: color(display-p3 .981 .917 .96);
-      --pink-4: color(display-p3 .963 .867 .932);
-      --pink-5: color(display-p3 .939 .815 .899);
-      --pink-6: color(display-p3 .907 .756 .859);
-      --pink-7: color(display-p3 .869 .683 .81);
-      --pink-8: color(display-p3 .825 .59 .751);
-      --pink-9: color(display-p3 .775 .297 .61);
-      --pink-10: color(display-p3 .748 .27 .581);
-      --pink-11: color(display-p3 .698 .219 .528);
-      --pink-12: color(display-p3 .363 .101 .279);
-      --pink-a1: color(display-p3 .675 .024 .675 / .012);
-      --pink-a2: color(display-p3 .757 .02 .51 / .032);
-      --pink-a3: color(display-p3 .765 .008 .529 / .083);
-      --pink-a4: color(display-p3 .737 .008 .506 / .134);
-      --pink-a5: color(display-p3 .663 .004 .451 / .185);
-      --pink-a6: color(display-p3 .616 .004 .424 / .244);
-      --pink-a7: color(display-p3 .596 .004 .412 / .318);
-      --pink-a8: color(display-p3 .573 .004 .404 / .412);
-      --pink-a9: color(display-p3 .682 0 .447 / .702);
-      --pink-a10: color(display-p3 .655 0 .424 / .73);
-      --pink-a11: color(display-p3 .698 .219 .528);
-      --pink-a12: color(display-p3 .363 .101 .279);
-      --pink-surface: color(display-p3 .9922 .9608 .9804 / .8);
-    }
-  }
-}
-
-.dark, .dark-theme {
-  --pink-1: #191117;
-  --pink-2: #21121d;
-  --pink-3: #37172f;
-  --pink-4: #4b143d;
-  --pink-5: #591c47;
-  --pink-6: #692955;
-  --pink-7: #833869;
-  --pink-8: #a84885;
-  --pink-9: #d6409f;
-  --pink-10: #de51a8;
-  --pink-11: #ff8dcc;
-  --pink-12: #fdd1ea;
-  --pink-a1: #f412bc09;
-  --pink-a2: #f420bb12;
-  --pink-a3: #fe37cc29;
-  --pink-a4: #fc1ec43f;
-  --pink-a5: #fd35c24e;
-  --pink-a6: #fd51c75f;
-  --pink-a7: #fd62c87b;
-  --pink-a8: #ff68c8a2;
-  --pink-a9: #fe49bcd4;
-  --pink-a10: #ff5cc0dc;
-  --pink-a11: #ff8dcc;
-  --pink-a12: #ffd3ecfd;
-  --pink-surface: #31132980;
-  --pink-indicator: var(--pink-9);
-  --pink-track: var(--pink-9);
-}
-
-@supports (color: color(display-p3 1 1 1)) {
-  @media (color-gamut: p3) {
-    .dark, .dark-theme {
-      --pink-1: color(display-p3 .093 .068 .089);
-      --pink-2: color(display-p3 .121 .073 .11);
-      --pink-3: color(display-p3 .198 .098 .179);
-      --pink-4: color(display-p3 .271 .095 .231);
-      --pink-5: color(display-p3 .32 .127 .273);
-      --pink-6: color(display-p3 .382 .177 .326);
-      --pink-7: color(display-p3 .477 .238 .405);
-      --pink-8: color(display-p3 .612 .304 .51);
-      --pink-9: color(display-p3 .775 .297 .61);
-      --pink-10: color(display-p3 .808 .356 .645);
-      --pink-11: color(display-p3 1 .535 .78);
-      --pink-12: color(display-p3 .964 .826 .912);
-      --pink-a1: color(display-p3 .984 .071 .855 / .03);
-      --pink-a2: color(display-p3 1 .2 .8 / .059);
-      --pink-a3: color(display-p3 1 .294 .886 / .139);
-      --pink-a4: color(display-p3 1 .192 .82 / .219);
-      --pink-a5: color(display-p3 1 .282 .827 / .274);
-      --pink-a6: color(display-p3 1 .396 .835 / .337);
-      --pink-a7: color(display-p3 1 .459 .831 / .442);
-      --pink-a8: color(display-p3 1 .478 .827 / .585);
-      --pink-a9: color(display-p3 1 .373 .784 / .761);
-      --pink-a10: color(display-p3 1 .435 .792 / .795);
-      --pink-a11: color(display-p3 1 .535 .78);
-      --pink-a12: color(display-p3 .964 .826 .912);
-      --pink-surface: color(display-p3 .1725 .0784 .149 / .5);
-    }
-  }
-}
-
-:root {
-  --pink-contrast: white;
+[data-color="pink"] {
+  --color-1: var(--pink-1);
+  --color-2: var(--pink-2);
+  --color-3: var(--pink-3);
+  --color-4: var(--pink-4);
+  --color-5: var(--pink-5);
+  --color-6: var(--pink-6);
+  --color-7: var(--pink-7);
+  --color-8: var(--pink-8);
+  --color-9: var(--pink-9);
+  --color-10: var(--pink-10);
+  --color-11: var(--pink-11);
+  --color-12: var(--pink-12);
+  --color-a1: var(--pink-a1);
+  --color-a2: var(--pink-a2);
+  --color-a3: var(--pink-a3);
+  --color-a4: var(--pink-a4);
+  --color-a5: var(--pink-a5);
+  --color-a6: var(--pink-a6);
+  --color-a7: var(--pink-a7);
+  --color-a8: var(--pink-a8);
+  --color-a9: var(--pink-a9);
+  --color-a10: var(--pink-a10);
+  --color-a11: var(--pink-a11);
+  --color-a12: var(--pink-a12);
+  --accent-contrast: var(--pink-contrast);
+  --accent-surface: var(--pink-surface);
+  --accent-indicator: var(--pink-indicator);
+  --accent-track: var(--pink-track);
 }

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

@@ -1,127 +1,30 @@
-:root, .light, .light-theme {
-  --plum-1: #fefcff;
-  --plum-2: #fdf7fd;
-  --plum-3: #fbebfb;
-  --plum-4: #f7def8;
-  --plum-5: #f2d1f3;
-  --plum-6: #e9c2ec;
-  --plum-7: #deade3;
-  --plum-8: #cf91d8;
-  --plum-9: #ab4aba;
-  --plum-10: #a144af;
-  --plum-11: #953ea3;
-  --plum-12: #53195d;
-  --plum-a1: #aa00ff03;
-  --plum-a2: #c000c008;
-  --plum-a3: #cc00cc14;
-  --plum-a4: #c200c921;
-  --plum-a5: #b700bd2e;
-  --plum-a6: #a400b03d;
-  --plum-a7: #9900a852;
-  --plum-a8: #9000a56e;
-  --plum-a9: #89009eb5;
-  --plum-a10: #7f0092bb;
-  --plum-a11: #730086c1;
-  --plum-a12: #40004be6;
-  --plum-surface: #fdf5fdcc;
-  --plum-indicator: var(--plum-9);
-  --plum-track: var(--plum-9);
-}
-
-@supports (color: color(display-p3 1 1 1)) {
-  @media (color-gamut: p3) {
-    :root, .light, .light-theme {
-      --plum-1: color(display-p3 .995 .988 .999);
-      --plum-2: color(display-p3 .988 .971 .99);
-      --plum-3: color(display-p3 .973 .923 .98);
-      --plum-4: color(display-p3 .953 .875 .966);
-      --plum-5: color(display-p3 .926 .825 .945);
-      --plum-6: color(display-p3 .89 .765 .916);
-      --plum-7: color(display-p3 .84 .686 .877);
-      --plum-8: color(display-p3 .775 .58 .832);
-      --plum-9: color(display-p3 .624 .313 .708);
-      --plum-10: color(display-p3 .587 .29 .667);
-      --plum-11: color(display-p3 .543 .263 .619);
-      --plum-12: color(display-p3 .299 .114 .352);
-      --plum-a1: color(display-p3 .675 .024 1 / .012);
-      --plum-a2: color(display-p3 .58 .024 .58 / .028);
-      --plum-a3: color(display-p3 .655 .008 .753 / .079);
-      --plum-a4: color(display-p3 .627 .008 .722 / .126);
-      --plum-a5: color(display-p3 .58 .004 .69 / .177);
-      --plum-a6: color(display-p3 .537 .004 .655 / .236);
-      --plum-a7: color(display-p3 .49 .004 .616 / .314);
-      --plum-a8: color(display-p3 .471 .004 .6 / .42);
-      --plum-a9: color(display-p3 .451 0 .576 / .687);
-      --plum-a10: color(display-p3 .42 0 .529 / .71);
-      --plum-a11: color(display-p3 .543 .263 .619);
-      --plum-a12: color(display-p3 .299 .114 .352);
-      --plum-surface: color(display-p3 .9843 .9647 .9843 / .8);
-    }
-  }
-}
-
-.dark, .dark-theme {
-  --plum-1: #181118;
-  --plum-2: #201320;
-  --plum-3: #351a35;
-  --plum-4: #451d47;
-  --plum-5: #512454;
-  --plum-6: #5e3061;
-  --plum-7: #734079;
-  --plum-8: #92549c;
-  --plum-9: #ab4aba;
-  --plum-10: #b658c4;
-  --plum-11: #e796f3;
-  --plum-12: #f4d4f4;
-  --plum-a1: #f112f108;
-  --plum-a2: #f22ff211;
-  --plum-a3: #fd4cfd27;
-  --plum-a4: #f646ff3a;
-  --plum-a5: #f455ff48;
-  --plum-a6: #f66dff56;
-  --plum-a7: #f07cfd70;
-  --plum-a8: #ee84ff95;
-  --plum-a9: #e961feb6;
-  --plum-a10: #ed70ffc0;
-  --plum-a11: #f19cfef3;
-  --plum-a12: #feddfef4;
-  --plum-surface: #2f152f80;
-  --plum-indicator: var(--plum-9);
-  --plum-track: var(--plum-9);
-}
-
-@supports (color: color(display-p3 1 1 1)) {
-  @media (color-gamut: p3) {
-    .dark, .dark-theme {
-      --plum-1: color(display-p3 .09 .068 .092);
-      --plum-2: color(display-p3 .118 .077 .121);
-      --plum-3: color(display-p3 .192 .105 .202);
-      --plum-4: color(display-p3 .25 .121 .271);
-      --plum-5: color(display-p3 .293 .152 .319);
-      --plum-6: color(display-p3 .343 .198 .372);
-      --plum-7: color(display-p3 .424 .262 .461);
-      --plum-8: color(display-p3 .54 .341 .595);
-      --plum-9: color(display-p3 .624 .313 .708);
-      --plum-10: color(display-p3 .666 .365 .748);
-      --plum-11: color(display-p3 .86 .602 .933);
-      --plum-12: color(display-p3 .936 .836 .949);
-      --plum-a1: color(display-p3 .973 .071 .973 / .026);
-      --plum-a2: color(display-p3 .933 .267 1 / .059);
-      --plum-a3: color(display-p3 .918 .333 .996 / .148);
-      --plum-a4: color(display-p3 .91 .318 1 / .219);
-      --plum-a5: color(display-p3 .914 .388 1 / .269);
-      --plum-a6: color(display-p3 .906 .463 1 / .328);
-      --plum-a7: color(display-p3 .906 .529 1 / .425);
-      --plum-a8: color(display-p3 .906 .553 1 / .568);
-      --plum-a9: color(display-p3 .875 .427 1 / .69);
-      --plum-a10: color(display-p3 .886 .471 .996 / .732);
-      --plum-a11: color(display-p3 .86 .602 .933);
-      --plum-a12: color(display-p3 .936 .836 .949);
-      --plum-surface: color(display-p3 .1647 .0863 .1725 / .5);
-    }
-  }
-}
-
-:root {
-  --plum-contrast: white;
+[data-color="plum"] {
+  --color-1: var(--plum-1);
+  --color-2: var(--plum-2);
+  --color-3: var(--plum-3);
+  --color-4: var(--plum-4);
+  --color-5: var(--plum-5);
+  --color-6: var(--plum-6);
+  --color-7: var(--plum-7);
+  --color-8: var(--plum-8);
+  --color-9: var(--plum-9);
+  --color-10: var(--plum-10);
+  --color-11: var(--plum-11);
+  --color-12: var(--plum-12);
+  --color-a1: var(--plum-a1);
+  --color-a2: var(--plum-a2);
+  --color-a3: var(--plum-a3);
+  --color-a4: var(--plum-a4);
+  --color-a5: var(--plum-a5);
+  --color-a6: var(--plum-a6);
+  --color-a7: var(--plum-a7);
+  --color-a8: var(--plum-a8);
+  --color-a9: var(--plum-a9);
+  --color-a10: var(--plum-a10);
+  --color-a11: var(--plum-a11);
+  --color-a12: var(--plum-a12);
+  --accent-contrast: var(--plum-contrast);
+  --accent-surface: var(--plum-surface);
+  --accent-indicator: var(--plum-indicator);
+  --accent-track: var(--plum-track);
 }

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

@@ -1,127 +1,30 @@
-:root, .light, .light-theme {
-  --purple-1: #fefcfe;
-  --purple-2: #fbf7fe;
-  --purple-3: #f7edfe;
-  --purple-4: #f2e2fc;
-  --purple-5: #ead5f9;
-  --purple-6: #e0c4f4;
-  --purple-7: #d1afec;
-  --purple-8: #be93e4;
-  --purple-9: #8e4ec6;
-  --purple-10: #8347b9;
-  --purple-11: #8145b5;
-  --purple-12: #402060;
-  --purple-a1: #aa00aa03;
-  --purple-a2: #8000e008;
-  --purple-a3: #8e00f112;
-  --purple-a4: #8d00e51d;
-  --purple-a5: #8000db2a;
-  --purple-a6: #7a01d03b;
-  --purple-a7: #6d00c350;
-  --purple-a8: #6600c06c;
-  --purple-a9: #5c00adb1;
-  --purple-a10: #53009eb8;
-  --purple-a11: #52009aba;
-  --purple-a12: #250049df;
-  --purple-surface: #faf5fecc;
-  --purple-indicator: var(--purple-9);
-  --purple-track: var(--purple-9);
-}
-
-@supports (color: color(display-p3 1 1 1)) {
-  @media (color-gamut: p3) {
-    :root, .light, .light-theme {
-      --purple-1: color(display-p3 .995 .988 .996);
-      --purple-2: color(display-p3 .983 .971 .993);
-      --purple-3: color(display-p3 .963 .931 .989);
-      --purple-4: color(display-p3 .937 .888 .981);
-      --purple-5: color(display-p3 .904 .837 .966);
-      --purple-6: color(display-p3 .86 .774 .942);
-      --purple-7: color(display-p3 .799 .69 .91);
-      --purple-8: color(display-p3 .719 .583 .874);
-      --purple-9: color(display-p3 .523 .318 .751);
-      --purple-10: color(display-p3 .483 .289 .7);
-      --purple-11: color(display-p3 .473 .281 .687);
-      --purple-12: color(display-p3 .234 .132 .363);
-      --purple-a1: color(display-p3 .675 .024 .675 / .012);
-      --purple-a2: color(display-p3 .443 .024 .722 / .028);
-      --purple-a3: color(display-p3 .506 .008 .835 / .071);
-      --purple-a4: color(display-p3 .451 .004 .831 / .114);
-      --purple-a5: color(display-p3 .431 .004 .788 / .165);
-      --purple-a6: color(display-p3 .384 .004 .745 / .228);
-      --purple-a7: color(display-p3 .357 .004 .71 / .31);
-      --purple-a8: color(display-p3 .322 .004 .702 / .416);
-      --purple-a9: color(display-p3 .298 0 .639 / .683);
-      --purple-a10: color(display-p3 .271 0 .58 / .71);
-      --purple-a11: color(display-p3 .473 .281 .687);
-      --purple-a12: color(display-p3 .234 .132 .363);
-      --purple-surface: color(display-p3 .9804 .9647 .9922 / .8);
-    }
-  }
-}
-
-.dark, .dark-theme {
-  --purple-1: #18111b;
-  --purple-2: #1e1523;
-  --purple-3: #301c3b;
-  --purple-4: #3d224e;
-  --purple-5: #48295c;
-  --purple-6: #54346b;
-  --purple-7: #664282;
-  --purple-8: #8457aa;
-  --purple-9: #8e4ec6;
-  --purple-10: #9a5cd0;
-  --purple-11: #d19dff;
-  --purple-12: #ecd9fa;
-  --purple-a1: #b412f90b;
-  --purple-a2: #b744f714;
-  --purple-a3: #c150ff2d;
-  --purple-a4: #bb53fd42;
-  --purple-a5: #be5cfd51;
-  --purple-a6: #c16dfd61;
-  --purple-a7: #c378fd7a;
-  --purple-a8: #c47effa4;
-  --purple-a9: #b661ffc2;
-  --purple-a10: #bc6fffcd;
-  --purple-a11: #d19dff;
-  --purple-a12: #f1ddfffa;
-  --purple-surface: #2b173580;
-  --purple-indicator: var(--purple-9);
-  --purple-track: var(--purple-9);
-}
-
-@supports (color: color(display-p3 1 1 1)) {
-  @media (color-gamut: p3) {
-    .dark, .dark-theme {
-      --purple-1: color(display-p3 .09 .068 .103);
-      --purple-2: color(display-p3 .113 .082 .134);
-      --purple-3: color(display-p3 .175 .112 .224);
-      --purple-4: color(display-p3 .224 .137 .297);
-      --purple-5: color(display-p3 .264 .167 .349);
-      --purple-6: color(display-p3 .311 .208 .406);
-      --purple-7: color(display-p3 .381 .266 .496);
-      --purple-8: color(display-p3 .49 .349 .649);
-      --purple-9: color(display-p3 .523 .318 .751);
-      --purple-10: color(display-p3 .57 .373 .791);
-      --purple-11: color(display-p3 .8 .62 1);
-      --purple-12: color(display-p3 .913 .854 .971);
-      --purple-a1: color(display-p3 .686 .071 .996 / .038);
-      --purple-a2: color(display-p3 .722 .286 .996 / .072);
-      --purple-a3: color(display-p3 .718 .349 .996 / .169);
-      --purple-a4: color(display-p3 .702 .353 1 / .248);
-      --purple-a5: color(display-p3 .718 .404 1 / .303);
-      --purple-a6: color(display-p3 .733 .455 1 / .366);
-      --purple-a7: color(display-p3 .753 .506 1 / .458);
-      --purple-a8: color(display-p3 .749 .522 1 / .622);
-      --purple-a9: color(display-p3 .686 .408 1 / .736);
-      --purple-a10: color(display-p3 .71 .459 1 / .778);
-      --purple-a11: color(display-p3 .8 .62 1);
-      --purple-a12: color(display-p3 .913 .854 .971);
-      --purple-surface: color(display-p3 .149 .0941 .1961 / .5);
-    }
-  }
-}
-
-:root {
-  --purple-contrast: white;
+[data-color="purple"] {
+  --color-1: var(--purple-1);
+  --color-2: var(--purple-2);
+  --color-3: var(--purple-3);
+  --color-4: var(--purple-4);
+  --color-5: var(--purple-5);
+  --color-6: var(--purple-6);
+  --color-7: var(--purple-7);
+  --color-8: var(--purple-8);
+  --color-9: var(--purple-9);
+  --color-10: var(--purple-10);
+  --color-11: var(--purple-11);
+  --color-12: var(--purple-12);
+  --color-a1: var(--purple-a1);
+  --color-a2: var(--purple-a2);
+  --color-a3: var(--purple-a3);
+  --color-a4: var(--purple-a4);
+  --color-a5: var(--purple-a5);
+  --color-a6: var(--purple-a6);
+  --color-a7: var(--purple-a7);
+  --color-a8: var(--purple-a8);
+  --color-a9: var(--purple-a9);
+  --color-a10: var(--purple-a10);
+  --color-a11: var(--purple-a11);
+  --color-a12: var(--purple-a12);
+  --accent-contrast: var(--purple-contrast);
+  --accent-surface: var(--purple-surface);
+  --accent-indicator: var(--purple-indicator);
+  --accent-track: var(--purple-track);
 }

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

@@ -1,127 +1,30 @@
-:root, .light, .light-theme {
-  --red-1: #fffcfc;
-  --red-2: #fff7f7;
-  --red-3: #feebec;
-  --red-4: #ffdbdc;
-  --red-5: #ffcdce;
-  --red-6: #fdbdbe;
-  --red-7: #f4a9aa;
-  --red-8: #eb8e90;
-  --red-9: #e5484d;
-  --red-10: #dc3e42;
-  --red-11: #ce2c31;
-  --red-12: #641723;
-  --red-a1: #ff000003;
-  --red-a2: #ff000008;
-  --red-a3: #f3000d14;
-  --red-a4: #ff000824;
-  --red-a5: #ff000632;
-  --red-a6: #f8000442;
-  --red-a7: #df000356;
-  --red-a8: #d2000571;
-  --red-a9: #db0007b7;
-  --red-a10: #d10005c1;
-  --red-a11: #c40006d3;
-  --red-a12: #55000de8;
-  --red-surface: #fff5f5cc;
-  --red-indicator: var(--red-9);
-  --red-track: var(--red-9);
-}
-
-@supports (color: color(display-p3 1 1 1)) {
-  @media (color-gamut: p3) {
-    :root, .light, .light-theme {
-      --red-1: color(display-p3 .998 .989 .988);
-      --red-2: color(display-p3 .995 .971 .971);
-      --red-3: color(display-p3 .985 .925 .925);
-      --red-4: color(display-p3 .999 .866 .866);
-      --red-5: color(display-p3 .984 .812 .811);
-      --red-6: color(display-p3 .955 .751 .749);
-      --red-7: color(display-p3 .915 .675 .672);
-      --red-8: color(display-p3 .872 .575 .572);
-      --red-9: color(display-p3 .83 .329 .324);
-      --red-10: color(display-p3 .798 .294 .285);
-      --red-11: color(display-p3 .744 .234 .222);
-      --red-12: color(display-p3 .36 .115 .143);
-      --red-a1: color(display-p3 .675 .024 .024 / .012);
-      --red-a2: color(display-p3 .863 .024 .024 / .028);
-      --red-a3: color(display-p3 .792 .008 .008 / .075);
-      --red-a4: color(display-p3 1 .008 .008 / .134);
-      --red-a5: color(display-p3 .918 .008 .008 / .189);
-      --red-a6: color(display-p3 .831 .02 .004 / .251);
-      --red-a7: color(display-p3 .741 .016 .004 / .33);
-      --red-a8: color(display-p3 .698 .012 .004 / .428);
-      --red-a9: color(display-p3 .749 .008 0 / .675);
-      --red-a10: color(display-p3 .714 .012 0 / .714);
-      --red-a11: color(display-p3 .744 .234 .222);
-      --red-a12: color(display-p3 .36 .115 .143);
-      --red-surface: color(display-p3 .9961 .9647 .9647 / .8);
-    }
-  }
-}
-
-.dark, .dark-theme {
-  --red-1: #191111;
-  --red-2: #201314;
-  --red-3: #3b1219;
-  --red-4: #500f1c;
-  --red-5: #611623;
-  --red-6: #72232d;
-  --red-7: #8c333a;
-  --red-8: #b54548;
-  --red-9: #e5484d;
-  --red-10: #ec5d5e;
-  --red-11: #ff9592;
-  --red-12: #ffd1d9;
-  --red-a1: #f4121209;
-  --red-a2: #f22f3e11;
-  --red-a3: #ff173f2d;
-  --red-a4: #fe0a3b44;
-  --red-a5: #ff204756;
-  --red-a6: #ff3e5668;
-  --red-a7: #ff536184;
-  --red-a8: #ff5d61b0;
-  --red-a9: #fe4e54e4;
-  --red-a10: #ff6465eb;
-  --red-a11: #ff9592;
-  --red-a12: #ffd1d9;
-  --red-surface: #2f151780;
-  --red-indicator: var(--red-9);
-  --red-track: var(--red-9);
-}
-
-@supports (color: color(display-p3 1 1 1)) {
-  @media (color-gamut: p3) {
-    .dark, .dark-theme {
-      --red-1: color(display-p3 .093 .068 .067);
-      --red-2: color(display-p3 .118 .077 .079);
-      --red-3: color(display-p3 .211 .081 .099);
-      --red-4: color(display-p3 .287 .079 .113);
-      --red-5: color(display-p3 .348 .11 .142);
-      --red-6: color(display-p3 .414 .16 .183);
-      --red-7: color(display-p3 .508 .224 .236);
-      --red-8: color(display-p3 .659 .298 .297);
-      --red-9: color(display-p3 .83 .329 .324);
-      --red-10: color(display-p3 .861 .403 .387);
-      --red-11: color(display-p3 1 .57 .55);
-      --red-12: color(display-p3 .971 .826 .852);
-      --red-a1: color(display-p3 .984 .071 .071 / .03);
-      --red-a2: color(display-p3 .996 .282 .282 / .055);
-      --red-a3: color(display-p3 1 .169 .271 / .156);
-      --red-a4: color(display-p3 1 .118 .267 / .236);
-      --red-a5: color(display-p3 1 .212 .314 / .303);
-      --red-a6: color(display-p3 1 .318 .38 / .374);
-      --red-a7: color(display-p3 1 .4 .424 / .475);
-      --red-a8: color(display-p3 1 .431 .431 / .635);
-      --red-a9: color(display-p3 1 .388 .384 / .82);
-      --red-a10: color(display-p3 1 .463 .447 / .853);
-      --red-a11: color(display-p3 1 .57 .55);
-      --red-a12: color(display-p3 .971 .826 .852);
-      --red-surface: color(display-p3 .1647 .0863 .0863 / .5);
-    }
-  }
-}
-
-:root {
-  --red-contrast: white;
+[data-color="red"] {
+  --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);
 }