elements-kit 0.5.0 → 0.5.2

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

@@ -0,0 +1,127 @@
+:root, .light, .light-theme {
+  --grass-1: #fbfefb;
+  --grass-2: #f5fbf5;
+  --grass-3: #e9f6e9;
+  --grass-4: #daf1db;
+  --grass-5: #c9e8ca;
+  --grass-6: #b2ddb5;
+  --grass-7: #94ce9a;
+  --grass-8: #65ba74;
+  --grass-9: #46a758;
+  --grass-10: #3e9b4f;
+  --grass-11: #2a7e3b;
+  --grass-12: #203c25;
+  --grass-a1: #00c00004;
+  --grass-a2: #0099000a;
+  --grass-a3: #00970016;
+  --grass-a4: #009f0725;
+  --grass-a5: #00930536;
+  --grass-a6: #008f0a4d;
+  --grass-a7: #018b0f6b;
+  --grass-a8: #008d199a;
+  --grass-a9: #008619b9;
+  --grass-a10: #007b17c1;
+  --grass-a11: #006514d5;
+  --grass-a12: #002006df;
+  --grass-surface: #f3faf3cc;
+  --grass-indicator: var(--grass-9);
+  --grass-track: var(--grass-9);
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root, .light, .light-theme {
+      --grass-1: color(display-p3 .986 .996 .985);
+      --grass-2: color(display-p3 .966 .983 .964);
+      --grass-3: color(display-p3 .923 .965 .917);
+      --grass-4: color(display-p3 .872 .94 .865);
+      --grass-5: color(display-p3 .811 .908 .802);
+      --grass-6: color(display-p3 .733 .864 .724);
+      --grass-7: color(display-p3 .628 .803 .622);
+      --grass-8: color(display-p3 .477 .72 .482);
+      --grass-9: color(display-p3 .38 .647 .378);
+      --grass-10: color(display-p3 .344 .598 .342);
+      --grass-11: color(display-p3 .263 .488 .261);
+      --grass-12: color(display-p3 .151 .233 .153);
+      --grass-a1: color(display-p3 .024 .757 .024 / .016);
+      --grass-a2: color(display-p3 .024 .565 .024 / .036);
+      --grass-a3: color(display-p3 .059 .576 .008 / .083);
+      --grass-a4: color(display-p3 .035 .565 .008 / .134);
+      --grass-a5: color(display-p3 .047 .545 .008 / .197);
+      --grass-a6: color(display-p3 .031 .502 .004 / .275);
+      --grass-a7: color(display-p3 .012 .482 .004 / .377);
+      --grass-a8: color(display-p3 0 .467 .008 / .522);
+      --grass-a9: color(display-p3 .008 .435 0 / .624);
+      --grass-a10: color(display-p3 .008 .388 0 / .659);
+      --grass-a11: color(display-p3 .263 .488 .261);
+      --grass-a12: color(display-p3 .151 .233 .153);
+      --grass-surface: color(display-p3 .9569 .9804 .9569 / .8);
+    }
+  }
+}
+
+.dark, .dark-theme {
+  --grass-1: #0e1511;
+  --grass-2: #141a15;
+  --grass-3: #1b2a1e;
+  --grass-4: #1d3a24;
+  --grass-5: #25482d;
+  --grass-6: #2d5736;
+  --grass-7: #366740;
+  --grass-8: #3e7949;
+  --grass-9: #46a758;
+  --grass-10: #53b365;
+  --grass-11: #71d083;
+  --grass-12: #c2f0c2;
+  --grass-a1: #00de1205;
+  --grass-a2: #5ef7780a;
+  --grass-a3: #70fe8c1b;
+  --grass-a4: #57ff802c;
+  --grass-a5: #68ff8b3b;
+  --grass-a6: #71ff8f4b;
+  --grass-a7: #77fd925d;
+  --grass-a8: #77fd9070;
+  --grass-a9: #65ff82a1;
+  --grass-a10: #72ff8dae;
+  --grass-a11: #89ff9fcd;
+  --grass-a12: #ceffceef;
+  --grass-surface: #19231b80;
+  --grass-indicator: var(--grass-9);
+  --grass-track: var(--grass-9);
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    .dark, .dark-theme {
+      --grass-1: color(display-p3 .062 .083 .067);
+      --grass-2: color(display-p3 .083 .103 .085);
+      --grass-3: color(display-p3 .118 .163 .122);
+      --grass-4: color(display-p3 .142 .225 .15);
+      --grass-5: color(display-p3 .178 .279 .186);
+      --grass-6: color(display-p3 .217 .337 .224);
+      --grass-7: color(display-p3 .258 .4 .264);
+      --grass-8: color(display-p3 .302 .47 .305);
+      --grass-9: color(display-p3 .38 .647 .378);
+      --grass-10: color(display-p3 .426 .694 .426);
+      --grass-11: color(display-p3 .535 .807 .542);
+      --grass-12: color(display-p3 .797 .936 .776);
+      --grass-a1: color(display-p3 0 .992 .071 / .017);
+      --grass-a2: color(display-p3 .482 .996 .584 / .038);
+      --grass-a3: color(display-p3 .549 .992 .588 / .106);
+      --grass-a4: color(display-p3 .51 .996 .557 / .169);
+      --grass-a5: color(display-p3 .553 1 .588 / .227);
+      --grass-a6: color(display-p3 .584 1 .608 / .29);
+      --grass-a7: color(display-p3 .604 1 .616 / .358);
+      --grass-a8: color(display-p3 .608 1 .62 / .433);
+      --grass-a9: color(display-p3 .573 1 .569 / .622);
+      --grass-a10: color(display-p3 .6 .996 .6 / .673);
+      --grass-a11: color(display-p3 .535 .807 .542);
+      --grass-a12: color(display-p3 .797 .936 .776);
+      --grass-surface: color(display-p3 .102 .1333 .102 / .5);
+    }
+  }
+}
+
+:root {
+  --grass-contrast: white;
+}

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

@@ -0,0 +1,127 @@
+:root, .light, .light-theme {
+  --gray-1: #fcfcfc;
+  --gray-2: #f9f9f9;
+  --gray-3: #f0f0f0;
+  --gray-4: #e8e8e8;
+  --gray-5: #e0e0e0;
+  --gray-6: #d9d9d9;
+  --gray-7: #cecece;
+  --gray-8: #bbb;
+  --gray-9: #8d8d8d;
+  --gray-10: #838383;
+  --gray-11: #646464;
+  --gray-12: #202020;
+  --gray-a1: #00000003;
+  --gray-a2: #00000006;
+  --gray-a3: #0000000f;
+  --gray-a4: #00000017;
+  --gray-a5: #0000001f;
+  --gray-a6: #00000026;
+  --gray-a7: #00000031;
+  --gray-a8: #0004;
+  --gray-a9: #00000072;
+  --gray-a10: #0000007c;
+  --gray-a11: #0000009b;
+  --gray-a12: #000000df;
+  --gray-surface: #fffc;
+  --gray-indicator: var(--gray-9);
+  --gray-track: var(--gray-9);
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root, .light, .light-theme {
+      --gray-1: color(display-p3 .988 .988 .988);
+      --gray-2: color(display-p3 .975 .975 .975);
+      --gray-3: color(display-p3 .939 .939 .939);
+      --gray-4: color(display-p3 .908 .908 .908);
+      --gray-5: color(display-p3 .88 .88 .88);
+      --gray-6: color(display-p3 .849 .849 .849);
+      --gray-7: color(display-p3 .807 .807 .807);
+      --gray-8: color(display-p3 .732 .732 .732);
+      --gray-9: color(display-p3 .553 .553 .553);
+      --gray-10: color(display-p3 .512 .512 .512);
+      --gray-11: color(display-p3 .392 .392 .392);
+      --gray-12: color(display-p3 .125 .125 .125);
+      --gray-a1: color(display-p3 0 0 0 / .012);
+      --gray-a2: color(display-p3 0 0 0 / .024);
+      --gray-a3: color(display-p3 0 0 0 / .063);
+      --gray-a4: color(display-p3 0 0 0 / .09);
+      --gray-a5: color(display-p3 0 0 0 / .122);
+      --gray-a6: color(display-p3 0 0 0 / .153);
+      --gray-a7: color(display-p3 0 0 0 / .192);
+      --gray-a8: color(display-p3 0 0 0 / .267);
+      --gray-a9: color(display-p3 0 0 0 / .447);
+      --gray-a10: color(display-p3 0 0 0 / .486);
+      --gray-a11: color(display-p3 0 0 0 / .608);
+      --gray-a12: color(display-p3 0 0 0 / .875);
+      --gray-surface: color(display-p3 1 1 1 / .8);
+    }
+  }
+}
+
+.dark, .dark-theme {
+  --gray-1: #111;
+  --gray-2: #191919;
+  --gray-3: #222;
+  --gray-4: #2a2a2a;
+  --gray-5: #313131;
+  --gray-6: #3a3a3a;
+  --gray-7: #484848;
+  --gray-8: #606060;
+  --gray-9: #6e6e6e;
+  --gray-10: #7b7b7b;
+  --gray-11: #b4b4b4;
+  --gray-12: #eee;
+  --gray-a1: #0000;
+  --gray-a2: #ffffff09;
+  --gray-a3: #ffffff12;
+  --gray-a4: #ffffff1b;
+  --gray-a5: #fff2;
+  --gray-a6: #ffffff2c;
+  --gray-a7: #ffffff3b;
+  --gray-a8: #fff5;
+  --gray-a9: #ffffff64;
+  --gray-a10: #ffffff72;
+  --gray-a11: #ffffffaf;
+  --gray-a12: #ffffffed;
+  --gray-surface: #21212180;
+  --gray-indicator: var(--gray-9);
+  --gray-track: var(--gray-9);
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    .dark, .dark-theme {
+      --gray-1: color(display-p3 .067 .067 .067);
+      --gray-2: color(display-p3 .098 .098 .098);
+      --gray-3: color(display-p3 .135 .135 .135);
+      --gray-4: color(display-p3 .163 .163 .163);
+      --gray-5: color(display-p3 .192 .192 .192);
+      --gray-6: color(display-p3 .228 .228 .228);
+      --gray-7: color(display-p3 .283 .283 .283);
+      --gray-8: color(display-p3 .375 .375 .375);
+      --gray-9: color(display-p3 .431 .431 .431);
+      --gray-10: color(display-p3 .484 .484 .484);
+      --gray-11: color(display-p3 .706 .706 .706);
+      --gray-12: color(display-p3 .933 .933 .933);
+      --gray-a1: color(display-p3 0 0 0 / 0);
+      --gray-a2: color(display-p3 1 1 1 / .034);
+      --gray-a3: color(display-p3 1 1 1 / .071);
+      --gray-a4: color(display-p3 1 1 1 / .105);
+      --gray-a5: color(display-p3 1 1 1 / .134);
+      --gray-a6: color(display-p3 1 1 1 / .172);
+      --gray-a7: color(display-p3 1 1 1 / .231);
+      --gray-a8: color(display-p3 1 1 1 / .332);
+      --gray-a9: color(display-p3 1 1 1 / .391);
+      --gray-a10: color(display-p3 1 1 1 / .445);
+      --gray-a11: color(display-p3 1 1 1 / .685);
+      --gray-a12: color(display-p3 1 1 1 / .929);
+      --gray-surface: color(display-p3 .1255 .1255 .1255 / .5);
+    }
+  }
+}
+
+:root {
+  --gray-contrast: white;
+}

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

@@ -0,0 +1,127 @@
+:root, .light, .light-theme {
+  --green-1: #fbfefc;
+  --green-2: #f4fbf6;
+  --green-3: #e6f6eb;
+  --green-4: #d6f1df;
+  --green-5: #c4e8d1;
+  --green-6: #adddc0;
+  --green-7: #8eceaa;
+  --green-8: #5bb98b;
+  --green-9: #30a46c;
+  --green-10: #2b9a66;
+  --green-11: #218358;
+  --green-12: #193b2d;
+  --green-a1: #00c04004;
+  --green-a2: #00a32f0b;
+  --green-a3: #00a43319;
+  --green-a4: #00a83829;
+  --green-a5: #019c393b;
+  --green-a6: #00963c52;
+  --green-a7: #00914071;
+  --green-a8: #00924ba4;
+  --green-a9: #008f4acf;
+  --green-a10: #008647d4;
+  --green-a11: #00713fde;
+  --green-a12: #002616e6;
+  --green-surface: #f1faf4cc;
+  --green-indicator: var(--green-9);
+  --green-track: var(--green-9);
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root, .light, .light-theme {
+      --green-1: color(display-p3 .986 .996 .989);
+      --green-2: color(display-p3 .963 .983 .967);
+      --green-3: color(display-p3 .913 .964 .925);
+      --green-4: color(display-p3 .859 .94 .879);
+      --green-5: color(display-p3 .796 .907 .826);
+      --green-6: color(display-p3 .718 .863 .761);
+      --green-7: color(display-p3 .61 .801 .675);
+      --green-8: color(display-p3 .451 .715 .559);
+      --green-9: color(display-p3 .332 .634 .442);
+      --green-10: color(display-p3 .308 .595 .417);
+      --green-11: color(display-p3 .19 .5 .32);
+      --green-12: color(display-p3 .132 .228 .18);
+      --green-a1: color(display-p3 .024 .757 .267 / .016);
+      --green-a2: color(display-p3 .024 .565 .129 / .036);
+      --green-a3: color(display-p3 .012 .596 .145 / .087);
+      --green-a4: color(display-p3 .008 .588 .145 / .142);
+      --green-a5: color(display-p3 .004 .541 .157 / .204);
+      --green-a6: color(display-p3 .004 .518 .157 / .283);
+      --green-a7: color(display-p3 .004 .486 .165 / .389);
+      --green-a8: color(display-p3 0 .478 .2 / .55);
+      --green-a9: color(display-p3 0 .455 .165 / .667);
+      --green-a10: color(display-p3 0 .416 .153 / .691);
+      --green-a11: color(display-p3 .19 .5 .32);
+      --green-a12: color(display-p3 .132 .228 .18);
+      --green-surface: color(display-p3 .9569 .9804 .9608 / .8);
+    }
+  }
+}
+
+.dark, .dark-theme {
+  --green-1: #0e1512;
+  --green-2: #121b17;
+  --green-3: #132d21;
+  --green-4: #113b29;
+  --green-5: #174933;
+  --green-6: #20573e;
+  --green-7: #28684a;
+  --green-8: #2f7c57;
+  --green-9: #30a46c;
+  --green-10: #33b074;
+  --green-11: #3dd68c;
+  --green-12: #b1f1cb;
+  --green-a1: #00de4505;
+  --green-a2: #29f99d0b;
+  --green-a3: #22ff991e;
+  --green-a4: #11ff992d;
+  --green-a5: #2bffa23c;
+  --green-a6: #44ffaa4b;
+  --green-a7: #50fdac5e;
+  --green-a8: #54ffad73;
+  --green-a9: #44ffa49e;
+  --green-a10: #43fea4ab;
+  --green-a11: #46fea5d4;
+  --green-a12: #bbffd7f0;
+  --green-surface: #15251d80;
+  --green-indicator: var(--green-9);
+  --green-track: var(--green-9);
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    .dark, .dark-theme {
+      --green-1: color(display-p3 .062 .083 .071);
+      --green-2: color(display-p3 .079 .106 .09);
+      --green-3: color(display-p3 .1 .173 .133);
+      --green-4: color(display-p3 .115 .229 .166);
+      --green-5: color(display-p3 .147 .282 .206);
+      --green-6: color(display-p3 .185 .338 .25);
+      --green-7: color(display-p3 .227 .403 .298);
+      --green-8: color(display-p3 .27 .479 .351);
+      --green-9: color(display-p3 .332 .634 .442);
+      --green-10: color(display-p3 .357 .682 .474);
+      --green-11: color(display-p3 .434 .828 .573);
+      --green-12: color(display-p3 .747 .938 .807);
+      --green-a1: color(display-p3 0 .992 .298 / .017);
+      --green-a2: color(display-p3 .341 .98 .616 / .043);
+      --green-a3: color(display-p3 .376 .996 .655 / .114);
+      --green-a4: color(display-p3 .341 .996 .635 / .173);
+      --green-a5: color(display-p3 .408 1 .678 / .232);
+      --green-a6: color(display-p3 .475 1 .706 / .29);
+      --green-a7: color(display-p3 .514 1 .706 / .362);
+      --green-a8: color(display-p3 .529 1 .718 / .442);
+      --green-a9: color(display-p3 .502 .996 .682 / .61);
+      --green-a10: color(display-p3 .506 1 .682 / .66);
+      --green-a11: color(display-p3 .434 .828 .573);
+      --green-a12: color(display-p3 .747 .938 .807);
+      --green-surface: color(display-p3 .0941 .1412 .1098 / .5);
+    }
+  }
+}
+
+:root {
+  --green-contrast: white;
+}

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