elements-kit 0.5.0 → 0.5.2

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

@@ -1,127 +1,30 @@
-:root, .light, .light-theme {
-  --ruby-1: #fffcfd;
-  --ruby-2: #fff7f8;
-  --ruby-3: #feeaed;
-  --ruby-4: #ffdce1;
-  --ruby-5: #ffced6;
-  --ruby-6: #f8bfc8;
-  --ruby-7: #efacb8;
-  --ruby-8: #e592a3;
-  --ruby-9: #e54666;
-  --ruby-10: #dc3b5d;
-  --ruby-11: #ca244d;
-  --ruby-12: #64172b;
-  --ruby-a1: #ff005503;
-  --ruby-a2: #ff002008;
-  --ruby-a3: #f3002515;
-  --ruby-a4: #ff002523;
-  --ruby-a5: #ff002a31;
-  --ruby-a6: #e4002440;
-  --ruby-a7: #ce002553;
-  --ruby-a8: #c300286d;
-  --ruby-a9: #db002cb9;
-  --ruby-a10: #d2002cc4;
-  --ruby-a11: #c10030db;
-  --ruby-a12: #550016e8;
-  --ruby-surface: #fff5f6cc;
-  --ruby-indicator: var(--ruby-9);
-  --ruby-track: var(--ruby-9);
-}
-
-@supports (color: color(display-p3 1 1 1)) {
-  @media (color-gamut: p3) {
-    :root, .light, .light-theme {
-      --ruby-1: color(display-p3 .998 .989 .992);
-      --ruby-2: color(display-p3 .995 .971 .974);
-      --ruby-3: color(display-p3 .983 .92 .928);
-      --ruby-4: color(display-p3 .987 .869 .885);
-      --ruby-5: color(display-p3 .968 .817 .839);
-      --ruby-6: color(display-p3 .937 .758 .786);
-      --ruby-7: color(display-p3 .897 .685 .721);
-      --ruby-8: color(display-p3 .851 .588 .639);
-      --ruby-9: color(display-p3 .83 .323 .408);
-      --ruby-10: color(display-p3 .795 .286 .375);
-      --ruby-11: color(display-p3 .728 .211 .311);
-      --ruby-12: color(display-p3 .36 .115 .171);
-      --ruby-a1: color(display-p3 .675 .024 .349 / .012);
-      --ruby-a2: color(display-p3 .863 .024 .024 / .028);
-      --ruby-a3: color(display-p3 .804 .008 .11 / .079);
-      --ruby-a4: color(display-p3 .91 .008 .125 / .13);
-      --ruby-a5: color(display-p3 .831 .004 .133 / .185);
-      --ruby-a6: color(display-p3 .745 .004 .118 / .244);
-      --ruby-a7: color(display-p3 .678 .004 .114 / .314);
-      --ruby-a8: color(display-p3 .639 .004 .125 / .412);
-      --ruby-a9: color(display-p3 .753 0 .129 / .679);
-      --ruby-a10: color(display-p3 .714 0 .125 / .714);
-      --ruby-a11: color(display-p3 .728 .211 .311);
-      --ruby-a12: color(display-p3 .36 .115 .171);
-      --ruby-surface: color(display-p3 .9961 .9647 .9647 / .8);
-    }
-  }
-}
-
-.dark, .dark-theme {
-  --ruby-1: #191113;
-  --ruby-2: #1e1517;
-  --ruby-3: #3a141e;
-  --ruby-4: #4e1325;
-  --ruby-5: #5e1a2e;
-  --ruby-6: #6f2539;
-  --ruby-7: #883447;
-  --ruby-8: #b3445a;
-  --ruby-9: #e54666;
-  --ruby-10: #ec5a72;
-  --ruby-11: #ff949d;
-  --ruby-12: #fed2e1;
-  --ruby-a1: #f4124a09;
-  --ruby-a2: #fe5a7f0e;
-  --ruby-a3: #ff235d2c;
-  --ruby-a4: #fd195e42;
-  --ruby-a5: #fe2d6b53;
-  --ruby-a6: #ff447665;
-  --ruby-a7: #ff577d80;
-  --ruby-a8: #ff5c7cae;
-  --ruby-a9: #fe4c70e4;
-  --ruby-a10: #ff617beb;
-  --ruby-a11: #ff949d;
-  --ruby-a12: #ffd3e2fe;
-  --ruby-surface: #2b191d80;
-  --ruby-indicator: var(--ruby-9);
-  --ruby-track: var(--ruby-9);
-}
-
-@supports (color: color(display-p3 1 1 1)) {
-  @media (color-gamut: p3) {
-    .dark, .dark-theme {
-      --ruby-1: color(display-p3 .093 .068 .074);
-      --ruby-2: color(display-p3 .113 .083 .089);
-      --ruby-3: color(display-p3 .208 .088 .117);
-      --ruby-4: color(display-p3 .279 .092 .147);
-      --ruby-5: color(display-p3 .337 .12 .18);
-      --ruby-6: color(display-p3 .401 .166 .223);
-      --ruby-7: color(display-p3 .495 .224 .281);
-      --ruby-8: color(display-p3 .652 .295 .359);
-      --ruby-9: color(display-p3 .83 .323 .408);
-      --ruby-10: color(display-p3 .857 .392 .455);
-      --ruby-11: color(display-p3 1 .57 .59);
-      --ruby-12: color(display-p3 .968 .83 .88);
-      --ruby-a1: color(display-p3 .984 .071 .329 / .03);
-      --ruby-a2: color(display-p3 .992 .376 .529 / .051);
-      --ruby-a3: color(display-p3 .996 .196 .404 / .152);
-      --ruby-a4: color(display-p3 1 .173 .416 / .227);
-      --ruby-a5: color(display-p3 1 .259 .459 / .29);
-      --ruby-a6: color(display-p3 1 .341 .506 / .358);
-      --ruby-a7: color(display-p3 1 .412 .541 / .458);
-      --ruby-a8: color(display-p3 1 .431 .537 / .627);
-      --ruby-a9: color(display-p3 1 .376 .482 / .82);
-      --ruby-a10: color(display-p3 1 .447 .522 / .849);
-      --ruby-a11: color(display-p3 1 .57 .59);
-      --ruby-a12: color(display-p3 .968 .83 .88);
-      --ruby-surface: color(display-p3 .1569 .0941 .1098 / .5);
-    }
-  }
-}
-
-:root {
-  --ruby-contrast: white;
+[data-color="ruby"] {
+  --color-1: var(--ruby-1);
+  --color-2: var(--ruby-2);
+  --color-3: var(--ruby-3);
+  --color-4: var(--ruby-4);
+  --color-5: var(--ruby-5);
+  --color-6: var(--ruby-6);
+  --color-7: var(--ruby-7);
+  --color-8: var(--ruby-8);
+  --color-9: var(--ruby-9);
+  --color-10: var(--ruby-10);
+  --color-11: var(--ruby-11);
+  --color-12: var(--ruby-12);
+  --color-a1: var(--ruby-a1);
+  --color-a2: var(--ruby-a2);
+  --color-a3: var(--ruby-a3);
+  --color-a4: var(--ruby-a4);
+  --color-a5: var(--ruby-a5);
+  --color-a6: var(--ruby-a6);
+  --color-a7: var(--ruby-a7);
+  --color-a8: var(--ruby-a8);
+  --color-a9: var(--ruby-a9);
+  --color-a10: var(--ruby-a10);
+  --color-a11: var(--ruby-a11);
+  --color-a12: var(--ruby-a12);
+  --accent-contrast: var(--ruby-contrast);
+  --accent-surface: var(--ruby-surface);
+  --accent-indicator: var(--ruby-indicator);
+  --accent-track: var(--ruby-track);
 }

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

@@ -1,133 +1,30 @@
-:root, .light, .light-theme {
-  --sky-1: #f9feff;
-  --sky-2: #f1fafd;
-  --sky-3: #e1f6fd;
-  --sky-4: #d1f0fa;
-  --sky-5: #bee7f5;
-  --sky-6: #a9daed;
-  --sky-7: #8dcae3;
-  --sky-8: #60b3d7;
-  --sky-9: #7ce2fe;
-  --sky-10: #74daf8;
-  --sky-11: #00749e;
-  --sky-12: #1d3e56;
-  --sky-a1: #00d5ff06;
-  --sky-a2: #00a4db0e;
-  --sky-a3: #00b3ee1e;
-  --sky-a4: #00ace42e;
-  --sky-a5: #00a1d841;
-  --sky-a6: #0092ca56;
-  --sky-a7: #0089c172;
-  --sky-a8: #0085bf9f;
-  --sky-a9: #00c7fe83;
-  --sky-a10: #00bcf38b;
-  --sky-a11: #00749e;
-  --sky-a12: #002540e2;
-  --sky-surface: #eef9fdcc;
-  --sky-indicator: var(--sky-9);
-  --sky-track: var(--sky-9);
-}
-
-@supports (color: color(display-p3 1 1 1)) {
-  @media (color-gamut: p3) {
-    :root, .light, .light-theme {
-      --sky-1: color(display-p3 .98 .995 .999);
-      --sky-2: color(display-p3 .953 .98 .99);
-      --sky-3: color(display-p3 .899 .963 .989);
-      --sky-4: color(display-p3 .842 .937 .977);
-      --sky-5: color(display-p3 .777 .9 .954);
-      --sky-6: color(display-p3 .701 .851 .921);
-      --sky-7: color(display-p3 .604 .785 .879);
-      --sky-8: color(display-p3 .457 .696 .829);
-      --sky-9: color(display-p3 .585 .877 .983);
-      --sky-10: color(display-p3 .555 .845 .959);
-      --sky-11: color(display-p3 .193 .448 .605);
-      --sky-12: color(display-p3 .145 .241 .329);
-      --sky-a1: color(display-p3 .02 .804 1 / .02);
-      --sky-a2: color(display-p3 .024 .592 .757 / .048);
-      --sky-a3: color(display-p3 .004 .655 .886 / .102);
-      --sky-a4: color(display-p3 .004 .604 .851 / .157);
-      --sky-a5: color(display-p3 .004 .565 .792 / .224);
-      --sky-a6: color(display-p3 .004 .502 .737 / .299);
-      --sky-a7: color(display-p3 .004 .459 .694 / .397);
-      --sky-a8: color(display-p3 0 .435 .682 / .542);
-      --sky-a9: color(display-p3 .004 .71 .965 / .416);
-      --sky-a10: color(display-p3 .004 .647 .914 / .444);
-      --sky-a11: color(display-p3 .193 .448 .605);
-      --sky-a12: color(display-p3 .145 .241 .329);
-      --sky-surface: color(display-p3 .9412 .9765 .9843 / .8);
-    }
-  }
-}
-
-.dark, .dark-theme {
-  --sky-1: #0d141f;
-  --sky-2: #111a27;
-  --sky-3: #112840;
-  --sky-4: #113555;
-  --sky-5: #154467;
-  --sky-6: #1b537b;
-  --sky-7: #1f6692;
-  --sky-8: #197cae;
-  --sky-9: #7ce2fe;
-  --sky-10: #a8eeff;
-  --sky-11: #75c7f0;
-  --sky-12: #c2f3ff;
-  --sky-a1: #0044ff0f;
-  --sky-a2: #1171fb18;
-  --sky-a3: #1184fc33;
-  --sky-a4: #128fff49;
-  --sky-a5: #1c9dfd5d;
-  --sky-a6: #28a5ff72;
-  --sky-a7: #2badfe8b;
-  --sky-a8: #1db2fea9;
-  --sky-a9: #7ce3fffe;
-  --sky-a10: #a8eeff;
-  --sky-a11: #7cd3ffef;
-  --sky-a12: #c2f3ff;
-  --sky-surface: #13233b80;
-  --sky-indicator: var(--sky-9);
-  --sky-track: var(--sky-9);
-}
-
-@supports (color: color(display-p3 1 1 1)) {
-  @media (color-gamut: p3) {
-    .dark, .dark-theme {
-      --sky-1: color(display-p3 .056 .078 .116);
-      --sky-2: color(display-p3 .075 .101 .149);
-      --sky-3: color(display-p3 .089 .154 .244);
-      --sky-4: color(display-p3 .106 .207 .323);
-      --sky-5: color(display-p3 .135 .261 .394);
-      --sky-6: color(display-p3 .17 .322 .469);
-      --sky-7: color(display-p3 .205 .394 .557);
-      --sky-8: color(display-p3 .232 .48 .665);
-      --sky-9: color(display-p3 .585 .877 .983);
-      --sky-10: color(display-p3 .718 .925 .991);
-      --sky-11: color(display-p3 .536 .772 .924);
-      --sky-12: color(display-p3 .799 .947 .993);
-      --sky-a1: color(display-p3 0 .282 .996 / .055);
-      --sky-a2: color(display-p3 .157 .467 .992 / .089);
-      --sky-a3: color(display-p3 .192 .522 .996 / .19);
-      --sky-a4: color(display-p3 .212 .584 1 / .274);
-      --sky-a5: color(display-p3 .259 .631 1 / .349);
-      --sky-a6: color(display-p3 .302 .655 1 / .433);
-      --sky-a7: color(display-p3 .329 .686 1 / .526);
-      --sky-a8: color(display-p3 .325 .71 1 / .643);
-      --sky-a9: color(display-p3 .592 .894 1 / .984);
-      --sky-a10: color(display-p3 .722 .933 1 / .992);
-      --sky-a11: color(display-p3 .536 .772 .924);
-      --sky-a12: color(display-p3 .799 .947 .993);
-      --sky-surface: color(display-p3 .0863 .1333 .2196 / .5);
-    }
-  }
-}
-
-:root {
-  --sky-contrast: #1c2024;
-}
-
-@supports (color: color-mix(in oklab, white, black)) {
-  .dark, .dark-theme {
-    --sky-track: color-mix(in oklab, var(--sky-8), var(--sky-9) 65%);
-  }
+[data-color="sky"] {
+  --color-1: var(--sky-1);
+  --color-2: var(--sky-2);
+  --color-3: var(--sky-3);
+  --color-4: var(--sky-4);
+  --color-5: var(--sky-5);
+  --color-6: var(--sky-6);
+  --color-7: var(--sky-7);
+  --color-8: var(--sky-8);
+  --color-9: var(--sky-9);
+  --color-10: var(--sky-10);
+  --color-11: var(--sky-11);
+  --color-12: var(--sky-12);
+  --color-a1: var(--sky-a1);
+  --color-a2: var(--sky-a2);
+  --color-a3: var(--sky-a3);
+  --color-a4: var(--sky-a4);
+  --color-a5: var(--sky-a5);
+  --color-a6: var(--sky-a6);
+  --color-a7: var(--sky-a7);
+  --color-a8: var(--sky-a8);
+  --color-a9: var(--sky-a9);
+  --color-a10: var(--sky-a10);
+  --color-a11: var(--sky-a11);
+  --color-a12: var(--sky-a12);
+  --accent-contrast: var(--sky-contrast);
+  --accent-surface: var(--sky-surface);
+  --accent-indicator: var(--sky-indicator);
+  --accent-track: var(--sky-track);
 }

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

@@ -0,0 +1,30 @@
+[data-color="success"] {
+  --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);
+}

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);
 }