elements-kit 0.5.1 → 0.6.0

package/dist/ui/styles/palette/indigo.css

@@ -0,0 +1,127 @@
+:root, .light, .light-theme {
+  --indigo-1: #fdfdfe;
+  --indigo-2: #f7f9ff;
+  --indigo-3: #edf2fe;
+  --indigo-4: #e1e9ff;
+  --indigo-5: #d2deff;
+  --indigo-6: #c1d0ff;
+  --indigo-7: #abbdf9;
+  --indigo-8: #8da4ef;
+  --indigo-9: #3e63dd;
+  --indigo-10: #3358d4;
+  --indigo-11: #3a5bc7;
+  --indigo-12: #1f2d5c;
+  --indigo-a1: #00008002;
+  --indigo-a2: #0040ff08;
+  --indigo-a3: #0047f112;
+  --indigo-a4: #0044ff1e;
+  --indigo-a5: #0044ff2d;
+  --indigo-a6: #003eff3e;
+  --indigo-a7: #0037ed54;
+  --indigo-a8: #0034dc72;
+  --indigo-a9: #0031d2c1;
+  --indigo-a10: #002ec9cc;
+  --indigo-a11: #002bb7c5;
+  --indigo-a12: #001046e0;
+  --indigo-surface: #f5f8ffcc;
+  --indigo-indicator: var(--indigo-9);
+  --indigo-track: var(--indigo-9);
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root, .light, .light-theme {
+      --indigo-1: color(display-p3 .992 .992 .996);
+      --indigo-2: color(display-p3 .971 .977 .998);
+      --indigo-3: color(display-p3 .933 .948 .992);
+      --indigo-4: color(display-p3 .885 .914 1);
+      --indigo-5: color(display-p3 .831 .87 1);
+      --indigo-6: color(display-p3 .767 .814 .995);
+      --indigo-7: color(display-p3 .685 .74 .957);
+      --indigo-8: color(display-p3 .569 .639 .916);
+      --indigo-9: color(display-p3 .276 .384 .837);
+      --indigo-10: color(display-p3 .234 .343 .801);
+      --indigo-11: color(display-p3 .256 .354 .755);
+      --indigo-12: color(display-p3 .133 .175 .348);
+      --indigo-a1: color(display-p3 .02 .02 .51 / .008);
+      --indigo-a2: color(display-p3 .024 .161 .863 / .028);
+      --indigo-a3: color(display-p3 .008 .239 .886 / .067);
+      --indigo-a4: color(display-p3 .004 .247 1 / .114);
+      --indigo-a5: color(display-p3 .004 .235 1 / .169);
+      --indigo-a6: color(display-p3 .004 .208 .984 / .232);
+      --indigo-a7: color(display-p3 .004 .176 .863 / .314);
+      --indigo-a8: color(display-p3 .004 .165 .812 / .432);
+      --indigo-a9: color(display-p3 0 .153 .773 / .726);
+      --indigo-a10: color(display-p3 0 .137 .737 / .765);
+      --indigo-a11: color(display-p3 .256 .354 .755);
+      --indigo-a12: color(display-p3 .133 .175 .348);
+      --indigo-surface: color(display-p3 .9647 .9725 .9961 / .8);
+    }
+  }
+}
+
+.dark, .dark-theme {
+  --indigo-1: #11131f;
+  --indigo-2: #141726;
+  --indigo-3: #182449;
+  --indigo-4: #1d2e62;
+  --indigo-5: #253974;
+  --indigo-6: #304384;
+  --indigo-7: #3a4f97;
+  --indigo-8: #435db1;
+  --indigo-9: #3e63dd;
+  --indigo-10: #5472e4;
+  --indigo-11: #9eb1ff;
+  --indigo-12: #d6e1ff;
+  --indigo-a1: #1133ff0f;
+  --indigo-a2: #3354fa17;
+  --indigo-a3: #2f62ff3c;
+  --indigo-a4: #3566ff57;
+  --indigo-a5: #4171fd6b;
+  --indigo-a6: #5178fd7c;
+  --indigo-a7: #5a7fff90;
+  --indigo-a8: #5b81feac;
+  --indigo-a9: #4671ffdb;
+  --indigo-a10: #5c7efee3;
+  --indigo-a11: #9eb1ff;
+  --indigo-a12: #d6e1ff;
+  --indigo-surface: #171d3b80;
+  --indigo-indicator: var(--indigo-9);
+  --indigo-track: var(--indigo-9);
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    .dark, .dark-theme {
+      --indigo-1: color(display-p3 .068 .074 .118);
+      --indigo-2: color(display-p3 .081 .089 .144);
+      --indigo-3: color(display-p3 .105 .141 .275);
+      --indigo-4: color(display-p3 .129 .18 .369);
+      --indigo-5: color(display-p3 .163 .22 .439);
+      --indigo-6: color(display-p3 .203 .262 .5);
+      --indigo-7: color(display-p3 .245 .309 .575);
+      --indigo-8: color(display-p3 .285 .362 .674);
+      --indigo-9: color(display-p3 .276 .384 .837);
+      --indigo-10: color(display-p3 .354 .445 .866);
+      --indigo-11: color(display-p3 .63 .69 1);
+      --indigo-12: color(display-p3 .848 .881 .99);
+      --indigo-a1: color(display-p3 .071 .212 .996 / .055);
+      --indigo-a2: color(display-p3 .251 .345 .988 / .085);
+      --indigo-a3: color(display-p3 .243 .404 1 / .223);
+      --indigo-a4: color(display-p3 .263 .42 1 / .324);
+      --indigo-a5: color(display-p3 .314 .451 1 / .4);
+      --indigo-a6: color(display-p3 .361 .49 1 / .467);
+      --indigo-a7: color(display-p3 .388 .51 1 / .547);
+      --indigo-a8: color(display-p3 .404 .518 1 / .652);
+      --indigo-a9: color(display-p3 .318 .451 1 / .824);
+      --indigo-a10: color(display-p3 .404 .506 1 / .858);
+      --indigo-a11: color(display-p3 .63 .69 1);
+      --indigo-a12: color(display-p3 .848 .881 .99);
+      --indigo-surface: color(display-p3 .0941 .1098 .2196 / .5);
+    }
+  }
+}
+
+:root {
+  --indigo-contrast: white;
+}

package/dist/ui/styles/palette/iris.css

@@ -0,0 +1,127 @@
+:root, .light, .light-theme {
+  --iris-1: #fdfdff;
+  --iris-2: #f8f8ff;
+  --iris-3: #f0f1fe;
+  --iris-4: #e6e7ff;
+  --iris-5: #dadcff;
+  --iris-6: #cbcdff;
+  --iris-7: #b8baf8;
+  --iris-8: #9b9ef0;
+  --iris-9: #5b5bd6;
+  --iris-10: #5151cd;
+  --iris-11: #5753c6;
+  --iris-12: #272962;
+  --iris-a1: #0000ff02;
+  --iris-a2: #0000ff07;
+  --iris-a3: #0011ee0f;
+  --iris-a4: #000bff19;
+  --iris-a5: #000eff25;
+  --iris-a6: #000aff34;
+  --iris-a7: #0008e647;
+  --iris-a8: #0008d964;
+  --iris-a9: #0000c0a4;
+  --iris-a10: #0000b6ae;
+  --iris-a11: #0600abac;
+  --iris-a12: #000246d8;
+  --iris-surface: #f6f6ffcc;
+  --iris-indicator: var(--iris-9);
+  --iris-track: var(--iris-9);
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root, .light, .light-theme {
+      --iris-1: color(display-p3 .992 .992 .999);
+      --iris-2: color(display-p3 .972 .973 .998);
+      --iris-3: color(display-p3 .943 .945 .992);
+      --iris-4: color(display-p3 .902 .906 1);
+      --iris-5: color(display-p3 .857 .861 1);
+      --iris-6: color(display-p3 .799 .805 .987);
+      --iris-7: color(display-p3 .721 .727 .955);
+      --iris-8: color(display-p3 .61 .619 .918);
+      --iris-9: color(display-p3 .357 .357 .81);
+      --iris-10: color(display-p3 .318 .318 .774);
+      --iris-11: color(display-p3 .337 .326 .748);
+      --iris-12: color(display-p3 .154 .161 .371);
+      --iris-a1: color(display-p3 .02 .02 1 / .008);
+      --iris-a2: color(display-p3 .024 .024 .863 / .028);
+      --iris-a3: color(display-p3 .004 .071 .871 / .059);
+      --iris-a4: color(display-p3 .012 .051 1 / .099);
+      --iris-a5: color(display-p3 .008 .035 1 / .142);
+      --iris-a6: color(display-p3 0 .02 .941 / .2);
+      --iris-a7: color(display-p3 .004 .02 .847 / .279);
+      --iris-a8: color(display-p3 .004 .024 .788 / .389);
+      --iris-a9: color(display-p3 0 0 .706 / .644);
+      --iris-a10: color(display-p3 0 0 .667 / .683);
+      --iris-a11: color(display-p3 .337 .326 .748);
+      --iris-a12: color(display-p3 .154 .161 .371);
+      --iris-surface: color(display-p3 .9647 .9647 .9961 / .8);
+    }
+  }
+}
+
+.dark, .dark-theme {
+  --iris-1: #13131e;
+  --iris-2: #171625;
+  --iris-3: #202248;
+  --iris-4: #262a65;
+  --iris-5: #303374;
+  --iris-6: #3d3e82;
+  --iris-7: #4a4a95;
+  --iris-8: #5958b1;
+  --iris-9: #5b5bd6;
+  --iris-10: #6e6ade;
+  --iris-11: #b1a9ff;
+  --iris-12: #e0dffe;
+  --iris-a1: #3636fe0e;
+  --iris-a2: #564bf916;
+  --iris-a3: #525bff3b;
+  --iris-a4: #4d58ff5a;
+  --iris-a5: #5b62fd6b;
+  --iris-a6: #6d6ffd7a;
+  --iris-a7: #7777fe8e;
+  --iris-a8: #7b7afeac;
+  --iris-a9: #6a6afed4;
+  --iris-a10: #7d79ffdc;
+  --iris-a11: #b1a9ff;
+  --iris-a12: #e1e0fffe;
+  --iris-surface: #1d1b3980;
+  --iris-indicator: var(--iris-9);
+  --iris-track: var(--iris-9);
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    .dark, .dark-theme {
+      --iris-1: color(display-p3 .075 .075 .114);
+      --iris-2: color(display-p3 .089 .086 .14);
+      --iris-3: color(display-p3 .128 .134 .272);
+      --iris-4: color(display-p3 .153 .165 .382);
+      --iris-5: color(display-p3 .192 .201 .44);
+      --iris-6: color(display-p3 .239 .241 .491);
+      --iris-7: color(display-p3 .291 .289 .565);
+      --iris-8: color(display-p3 .35 .345 .673);
+      --iris-9: color(display-p3 .357 .357 .81);
+      --iris-10: color(display-p3 .428 .416 .843);
+      --iris-11: color(display-p3 .685 .662 1);
+      --iris-12: color(display-p3 .878 .875 .986);
+      --iris-a1: color(display-p3 .224 .224 .992 / .051);
+      --iris-a2: color(display-p3 .361 .314 1 / .08);
+      --iris-a3: color(display-p3 .357 .373 1 / .219);
+      --iris-a4: color(display-p3 .325 .361 1 / .337);
+      --iris-a5: color(display-p3 .38 .4 1 / .4);
+      --iris-a6: color(display-p3 .447 .447 1 / .454);
+      --iris-a7: color(display-p3 .486 .486 1 / .534);
+      --iris-a8: color(display-p3 .502 .494 1 / .652);
+      --iris-a9: color(display-p3 .431 .431 1 / .799);
+      --iris-a10: color(display-p3 .502 .486 1 / .832);
+      --iris-a11: color(display-p3 .685 .662 1);
+      --iris-a12: color(display-p3 .878 .875 .986);
+      --iris-surface: color(display-p3 .1098 .102 .2118 / .5);
+    }
+  }
+}
+
+:root {
+  --iris-contrast: white;
+}

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

@@ -0,0 +1,127 @@
+: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;
+}

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

@@ -0,0 +1,133 @@
+: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%);
+  }
+}

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

@@ -0,0 +1,133 @@
+: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%);
+  }
+}