@frosted-ui/colors 0.0.1-canary.48

package/crimson-dark-alpha.css

@@ -0,0 +1,33 @@
+.dark, .dark-theme {
+  --crimson-a1: #f4126709;
+  --crimson-a2: #f22f7a11;
+  --crimson-a3: #fe2a8b2a;
+  --crimson-a4: #fd158741;
+  --crimson-a5: #fd278f51;
+  --crimson-a6: #fe459763;
+  --crimson-a7: #fd559b7f;
+  --crimson-a8: #fe5b9bab;
+  --crimson-a9: #fe418de8;
+  --crimson-a10: #ff5693ed;
+  --crimson-a11: #ff92ad;
+  --crimson-a12: #ffd5eafd;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    .dark, .dark-theme {
+      --crimson-a1: color(display-p3 0.984 0.071 0.463 / 0.03);
+      --crimson-a2: color(display-p3 0.996 0.282 0.569 / 0.055);
+      --crimson-a3: color(display-p3 0.996 0.227 0.573 / 0.148);
+      --crimson-a4: color(display-p3 1 0.157 0.569 / 0.227);
+      --crimson-a5: color(display-p3 1 0.231 0.604 / 0.286);
+      --crimson-a6: color(display-p3 1 0.337 0.643 / 0.349);
+      --crimson-a7: color(display-p3 1 0.416 0.663 / 0.454);
+      --crimson-a8: color(display-p3 0.996 0.427 0.651 / 0.614);
+      --crimson-a9: color(display-p3 1 0.345 0.596 / 0.832);
+      --crimson-a10: color(display-p3 1 0.42 0.62 / 0.853);
+      --crimson-a11: color(display-p3 1 0.56 0.66);
+      --crimson-a12: color(display-p3 0.966 0.834 0.906);
+    }
+  }
+}

package/crimson-dark.css

@@ -0,0 +1,33 @@
+.dark, .dark-theme {
+  --crimson-1: #191114;
+  --crimson-2: #201318;
+  --crimson-3: #381525;
+  --crimson-4: #4d122f;
+  --crimson-5: #5c1839;
+  --crimson-6: #6d2545;
+  --crimson-7: #873356;
+  --crimson-8: #b0436e;
+  --crimson-9: #e93d82;
+  --crimson-10: #ee518a;
+  --crimson-11: #ff92ad;
+  --crimson-12: #fdd3e8;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    .dark, .dark-theme {
+      --crimson-1: color(display-p3 0.093 0.068 0.078);
+      --crimson-2: color(display-p3 0.117 0.078 0.095);
+      --crimson-3: color(display-p3 0.203 0.091 0.143);
+      --crimson-4: color(display-p3 0.277 0.087 0.182);
+      --crimson-5: color(display-p3 0.332 0.115 0.22);
+      --crimson-6: color(display-p3 0.394 0.162 0.268);
+      --crimson-7: color(display-p3 0.489 0.222 0.336);
+      --crimson-8: color(display-p3 0.638 0.289 0.429);
+      --crimson-9: color(display-p3 0.843 0.298 0.507);
+      --crimson-10: color(display-p3 0.864 0.364 0.539);
+      --crimson-11: color(display-p3 1 0.56 0.66);
+      --crimson-12: color(display-p3 0.966 0.834 0.906);
+    }
+  }
+}

package/crimson.css

@@ -0,0 +1,33 @@
+:root, .light, .light-theme {
+  --crimson-1: #fffcfd;
+  --crimson-2: #fef7f9;
+  --crimson-3: #ffe9f0;
+  --crimson-4: #fedce7;
+  --crimson-5: #facedd;
+  --crimson-6: #f3bed1;
+  --crimson-7: #eaacc3;
+  --crimson-8: #e093b2;
+  --crimson-9: #e93d82;
+  --crimson-10: #df3478;
+  --crimson-11: #cb1d63;
+  --crimson-12: #621639;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root, .light, .light-theme {
+      --crimson-1: color(display-p3 0.998 0.989 0.992);
+      --crimson-2: color(display-p3 0.991 0.969 0.976);
+      --crimson-3: color(display-p3 0.987 0.917 0.941);
+      --crimson-4: color(display-p3 0.975 0.866 0.904);
+      --crimson-5: color(display-p3 0.953 0.813 0.864);
+      --crimson-6: color(display-p3 0.921 0.755 0.817);
+      --crimson-7: color(display-p3 0.88 0.683 0.761);
+      --crimson-8: color(display-p3 0.834 0.592 0.694);
+      --crimson-9: color(display-p3 0.843 0.298 0.507);
+      --crimson-10: color(display-p3 0.807 0.266 0.468);
+      --crimson-11: color(display-p3 0.731 0.195 0.388);
+      --crimson-12: color(display-p3 0.352 0.111 0.221);
+    }
+  }
+}

package/cyan-alpha.css

@@ -0,0 +1,33 @@
+:root, .light, .light-theme {
+  --cyan-a1: #0099cc05;
+  --cyan-a2: #009db10d;
+  --cyan-a3: #00c2d121;
+  --cyan-a4: #00bcd435;
+  --cyan-a5: #01b4cc4a;
+  --cyan-a6: #00a7c162;
+  --cyan-a7: #009fbb82;
+  --cyan-a8: #00a3c0c2;
+  --cyan-a9: #00a2c7;
+  --cyan-a10: #0094b7f8;
+  --cyan-a11: #007491ef;
+  --cyan-a12: #00323ef2;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root, .light, .light-theme {
+      --cyan-a1: color(display-p3 0.02 0.608 0.804 / 0.02);
+      --cyan-a2: color(display-p3 0.02 0.557 0.647 / 0.044);
+      --cyan-a3: color(display-p3 0.004 0.694 0.796 / 0.114);
+      --cyan-a4: color(display-p3 0.004 0.678 0.784 / 0.181);
+      --cyan-a5: color(display-p3 0.004 0.624 0.733 / 0.248);
+      --cyan-a6: color(display-p3 0.004 0.584 0.706 / 0.33);
+      --cyan-a7: color(display-p3 0.004 0.541 0.667 / 0.436);
+      --cyan-a8: color(display-p3 0 0.533 0.667 / 0.612);
+      --cyan-a9: color(display-p3 0 0.482 0.675 / 0.718);
+      --cyan-a10: color(display-p3 0 0.435 0.608 / 0.738);
+      --cyan-a11: color(display-p3 0.08 0.48 0.63);
+      --cyan-a12: color(display-p3 0.108 0.232 0.277);
+    }
+  }
+}

package/cyan-dark-alpha.css

@@ -0,0 +1,33 @@
+.dark, .dark-theme {
+  --cyan-a1: #0091f70a;
+  --cyan-a2: #02a7f211;
+  --cyan-a3: #00befd28;
+  --cyan-a4: #00baff3b;
+  --cyan-a5: #00befd4d;
+  --cyan-a6: #00c7fd5e;
+  --cyan-a7: #14cdff75;
+  --cyan-a8: #11cfff95;
+  --cyan-a9: #00cfffc3;
+  --cyan-a10: #28d6ffcd;
+  --cyan-a11: #52e1fee5;
+  --cyan-a12: #bbf3fef7;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    .dark, .dark-theme {
+      --cyan-a1: color(display-p3 0 0.647 0.992 / 0.034);
+      --cyan-a2: color(display-p3 0.133 0.733 1 / 0.059);
+      --cyan-a3: color(display-p3 0.122 0.741 0.996 / 0.152);
+      --cyan-a4: color(display-p3 0.051 0.725 1 / 0.227);
+      --cyan-a5: color(display-p3 0.149 0.757 1 / 0.29);
+      --cyan-a6: color(display-p3 0.267 0.792 1 / 0.358);
+      --cyan-a7: color(display-p3 0.333 0.808 1 / 0.446);
+      --cyan-a8: color(display-p3 0.357 0.816 1 / 0.572);
+      --cyan-a9: color(display-p3 0.357 0.82 1 / 0.748);
+      --cyan-a10: color(display-p3 0.4 0.839 1 / 0.786);
+      --cyan-a11: color(display-p3 0.446 0.79 0.887);
+      --cyan-a12: color(display-p3 0.757 0.919 0.962);
+    }
+  }
+}

package/cyan-dark.css

@@ -0,0 +1,33 @@
+.dark, .dark-theme {
+  --cyan-1: #0b161a;
+  --cyan-2: #101b20;
+  --cyan-3: #082c36;
+  --cyan-4: #003848;
+  --cyan-5: #004558;
+  --cyan-6: #045468;
+  --cyan-7: #12677e;
+  --cyan-8: #11809c;
+  --cyan-9: #00a2c7;
+  --cyan-10: #23afd0;
+  --cyan-11: #4ccce6;
+  --cyan-12: #b6ecf7;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    .dark, .dark-theme {
+      --cyan-1: color(display-p3 0.053 0.085 0.098);
+      --cyan-2: color(display-p3 0.072 0.105 0.122);
+      --cyan-3: color(display-p3 0.073 0.168 0.209);
+      --cyan-4: color(display-p3 0.063 0.216 0.277);
+      --cyan-5: color(display-p3 0.091 0.267 0.336);
+      --cyan-6: color(display-p3 0.137 0.324 0.4);
+      --cyan-7: color(display-p3 0.186 0.398 0.484);
+      --cyan-8: color(display-p3 0.23 0.496 0.6);
+      --cyan-9: color(display-p3 0.282 0.627 0.765);
+      --cyan-10: color(display-p3 0.331 0.675 0.801);
+      --cyan-11: color(display-p3 0.446 0.79 0.887);
+      --cyan-12: color(display-p3 0.757 0.919 0.962);
+    }
+  }
+}

package/cyan.css

@@ -0,0 +1,33 @@
+:root, .light, .light-theme {
+  --cyan-1: #fafdfe;
+  --cyan-2: #f2fafb;
+  --cyan-3: #def7f9;
+  --cyan-4: #caf1f6;
+  --cyan-5: #b5e9f0;
+  --cyan-6: #9ddde7;
+  --cyan-7: #7dcedc;
+  --cyan-8: #3db9cf;
+  --cyan-9: #00a2c7;
+  --cyan-10: #0797b9;
+  --cyan-11: #107d98;
+  --cyan-12: #0d3c48;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root, .light, .light-theme {
+      --cyan-1: color(display-p3 0.982 0.992 0.996);
+      --cyan-2: color(display-p3 0.955 0.981 0.984);
+      --cyan-3: color(display-p3 0.888 0.965 0.975);
+      --cyan-4: color(display-p3 0.821 0.941 0.959);
+      --cyan-5: color(display-p3 0.751 0.907 0.935);
+      --cyan-6: color(display-p3 0.671 0.862 0.9);
+      --cyan-7: color(display-p3 0.564 0.8 0.854);
+      --cyan-8: color(display-p3 0.388 0.715 0.798);
+      --cyan-9: color(display-p3 0.282 0.627 0.765);
+      --cyan-10: color(display-p3 0.264 0.583 0.71);
+      --cyan-11: color(display-p3 0.08 0.48 0.63);
+      --cyan-12: color(display-p3 0.108 0.232 0.277);
+    }
+  }
+}

package/gold-alpha.css

@@ -0,0 +1,33 @@
+:root, .light, .light-theme {
+  --gold-a1: #55550003;
+  --gold-a2: #9d8a000d;
+  --gold-a3: #75600018;
+  --gold-a4: #6b4e0024;
+  --gold-a5: #60460030;
+  --gold-a6: #64440040;
+  --gold-a7: #63420055;
+  --gold-a8: #633d0072;
+  --gold-a9: #5332009a;
+  --gold-a10: #492d00a1;
+  --gold-a11: #362100b4;
+  --gold-a12: #130c00d4;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root, .light, .light-theme {
+      --gold-a1: color(display-p3 0.349 0.349 0.024 / 0.012);
+      --gold-a2: color(display-p3 0.592 0.514 0.024 / 0.048);
+      --gold-a3: color(display-p3 0.4 0.357 0.012 / 0.091);
+      --gold-a4: color(display-p3 0.357 0.298 0.008 / 0.134);
+      --gold-a5: color(display-p3 0.345 0.282 0.004 / 0.185);
+      --gold-a6: color(display-p3 0.341 0.263 0.004 / 0.244);
+      --gold-a7: color(display-p3 0.345 0.235 0.004 / 0.322);
+      --gold-a8: color(display-p3 0.345 0.22 0.004 / 0.436);
+      --gold-a9: color(display-p3 0.286 0.18 0 / 0.589);
+      --gold-a10: color(display-p3 0.255 0.161 0 / 0.62);
+      --gold-a11: color(display-p3 0.433 0.386 0.305);
+      --gold-a12: color(display-p3 0.227 0.209 0.173);
+    }
+  }
+}

package/gold-dark-alpha.css

@@ -0,0 +1,33 @@
+.dark, .dark-theme {
+  --gold-a1: #91911102;
+  --gold-a2: #f9e29d0b;
+  --gold-a3: #f8ecbb15;
+  --gold-a4: #ffeec41e;
+  --gold-a5: #feecc22a;
+  --gold-a6: #feebcb37;
+  --gold-a7: #ffedcd48;
+  --gold-a8: #fdeaca5f;
+  --gold-a9: #ffdba690;
+  --gold-a10: #fedfb09d;
+  --gold-a11: #fee7c6c8;
+  --gold-a12: #fef7ede7;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    .dark, .dark-theme {
+      --gold-a1: color(display-p3 0.855 0.855 0.071 / 0.005);
+      --gold-a2: color(display-p3 0.98 0.89 0.616 / 0.043);
+      --gold-a3: color(display-p3 1 0.949 0.753 / 0.08);
+      --gold-a4: color(display-p3 1 0.933 0.8 / 0.118);
+      --gold-a5: color(display-p3 1 0.949 0.804 / 0.16);
+      --gold-a6: color(display-p3 1 0.925 0.8 / 0.215);
+      --gold-a7: color(display-p3 1 0.945 0.831 / 0.278);
+      --gold-a8: color(display-p3 1 0.937 0.82 / 0.366);
+      --gold-a9: color(display-p3 0.996 0.882 0.69 / 0.551);
+      --gold-a10: color(display-p3 1 0.894 0.725 / 0.601);
+      --gold-a11: color(display-p3 0.784 0.728 0.635);
+      --gold-a12: color(display-p3 0.906 0.887 0.855);
+    }
+  }
+}

package/gold-dark.css

@@ -0,0 +1,33 @@
+.dark, .dark-theme {
+  --gold-1: #121211;
+  --gold-2: #1b1a17;
+  --gold-3: #24231f;
+  --gold-4: #2d2b26;
+  --gold-5: #38352e;
+  --gold-6: #444039;
+  --gold-7: #544f46;
+  --gold-8: #696256;
+  --gold-9: #978365;
+  --gold-10: #a39073;
+  --gold-11: #cbb99f;
+  --gold-12: #e8e2d9;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    .dark, .dark-theme {
+      --gold-1: color(display-p3 0.071 0.071 0.067);
+      --gold-2: color(display-p3 0.104 0.101 0.09);
+      --gold-3: color(display-p3 0.141 0.136 0.122);
+      --gold-4: color(display-p3 0.177 0.17 0.152);
+      --gold-5: color(display-p3 0.217 0.207 0.185);
+      --gold-6: color(display-p3 0.265 0.252 0.225);
+      --gold-7: color(display-p3 0.327 0.31 0.277);
+      --gold-8: color(display-p3 0.407 0.384 0.342);
+      --gold-9: color(display-p3 0.579 0.517 0.41);
+      --gold-10: color(display-p3 0.628 0.566 0.463);
+      --gold-11: color(display-p3 0.784 0.728 0.635);
+      --gold-12: color(display-p3 0.906 0.887 0.855);
+    }
+  }
+}

package/gold.css

@@ -0,0 +1,33 @@
+:root, .light, .light-theme {
+  --gold-1: #fdfdfc;
+  --gold-2: #faf9f2;
+  --gold-3: #f2f0e7;
+  --gold-4: #eae6db;
+  --gold-5: #e1dccf;
+  --gold-6: #d8d0bf;
+  --gold-7: #cbc0aa;
+  --gold-8: #b9a88d;
+  --gold-9: #978365;
+  --gold-10: #8c7a5e;
+  --gold-11: #71624b;
+  --gold-12: #3b352b;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root, .light, .light-theme {
+      --gold-1: color(display-p3 0.992 0.992 0.989);
+      --gold-2: color(display-p3 0.98 0.976 0.953);
+      --gold-3: color(display-p3 0.947 0.94 0.909);
+      --gold-4: color(display-p3 0.914 0.904 0.865);
+      --gold-5: color(display-p3 0.88 0.865 0.816);
+      --gold-6: color(display-p3 0.84 0.818 0.756);
+      --gold-7: color(display-p3 0.788 0.753 0.677);
+      --gold-8: color(display-p3 0.715 0.66 0.565);
+      --gold-9: color(display-p3 0.579 0.517 0.41);
+      --gold-10: color(display-p3 0.538 0.479 0.38);
+      --gold-11: color(display-p3 0.433 0.386 0.305);
+      --gold-12: color(display-p3 0.227 0.209 0.173);
+    }
+  }
+}

package/grass-alpha.css

@@ -0,0 +1,33 @@
+:root, .light, .light-theme {
+  --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;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root, .light, .light-theme {
+      --grass-a1: color(display-p3 0.024 0.757 0.024 / 0.016);
+      --grass-a2: color(display-p3 0.024 0.565 0.024 / 0.036);
+      --grass-a3: color(display-p3 0.059 0.576 0.008 / 0.083);
+      --grass-a4: color(display-p3 0.035 0.565 0.008 / 0.134);
+      --grass-a5: color(display-p3 0.047 0.545 0.008 / 0.197);
+      --grass-a6: color(display-p3 0.031 0.502 0.004 / 0.275);
+      --grass-a7: color(display-p3 0.012 0.482 0.004 / 0.377);
+      --grass-a8: color(display-p3 0 0.467 0.008 / 0.522);
+      --grass-a9: color(display-p3 0.008 0.435 0 / 0.624);
+      --grass-a10: color(display-p3 0.008 0.388 0 / 0.659);
+      --grass-a11: color(display-p3 0.263 0.488 0.261);
+      --grass-a12: color(display-p3 0.151 0.233 0.153);
+    }
+  }
+}

package/grass-dark-alpha.css

@@ -0,0 +1,33 @@
+.dark, .dark-theme {
+  --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;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    .dark, .dark-theme {
+      --grass-a1: color(display-p3 0 0.992 0.071 / 0.017);
+      --grass-a2: color(display-p3 0.482 0.996 0.584 / 0.038);
+      --grass-a3: color(display-p3 0.549 0.992 0.588 / 0.106);
+      --grass-a4: color(display-p3 0.51 0.996 0.557 / 0.169);
+      --grass-a5: color(display-p3 0.553 1 0.588 / 0.227);
+      --grass-a6: color(display-p3 0.584 1 0.608 / 0.29);
+      --grass-a7: color(display-p3 0.604 1 0.616 / 0.358);
+      --grass-a8: color(display-p3 0.608 1 0.62 / 0.433);
+      --grass-a9: color(display-p3 0.573 1 0.569 / 0.622);
+      --grass-a10: color(display-p3 0.6 0.996 0.6 / 0.673);
+      --grass-a11: color(display-p3 0.535 0.807 0.542);
+      --grass-a12: color(display-p3 0.797 0.936 0.776);
+    }
+  }
+}

package/grass-dark.css

@@ -0,0 +1,33 @@
+.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;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    .dark, .dark-theme {
+      --grass-1: color(display-p3 0.062 0.083 0.067);
+      --grass-2: color(display-p3 0.083 0.103 0.085);
+      --grass-3: color(display-p3 0.118 0.163 0.122);
+      --grass-4: color(display-p3 0.142 0.225 0.15);
+      --grass-5: color(display-p3 0.178 0.279 0.186);
+      --grass-6: color(display-p3 0.217 0.337 0.224);
+      --grass-7: color(display-p3 0.258 0.4 0.264);
+      --grass-8: color(display-p3 0.302 0.47 0.305);
+      --grass-9: color(display-p3 0.38 0.647 0.378);
+      --grass-10: color(display-p3 0.426 0.694 0.426);
+      --grass-11: color(display-p3 0.535 0.807 0.542);
+      --grass-12: color(display-p3 0.797 0.936 0.776);
+    }
+  }
+}

package/grass.css

@@ -0,0 +1,33 @@
+: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;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root, .light, .light-theme {
+      --grass-1: color(display-p3 0.986 0.996 0.985);
+      --grass-2: color(display-p3 0.966 0.983 0.964);
+      --grass-3: color(display-p3 0.923 0.965 0.917);
+      --grass-4: color(display-p3 0.872 0.94 0.865);
+      --grass-5: color(display-p3 0.811 0.908 0.802);
+      --grass-6: color(display-p3 0.733 0.864 0.724);
+      --grass-7: color(display-p3 0.628 0.803 0.622);
+      --grass-8: color(display-p3 0.477 0.72 0.482);
+      --grass-9: color(display-p3 0.38 0.647 0.378);
+      --grass-10: color(display-p3 0.344 0.598 0.342);
+      --grass-11: color(display-p3 0.263 0.488 0.261);
+      --grass-12: color(display-p3 0.151 0.233 0.153);
+    }
+  }
+}

package/gray-alpha.css

@@ -0,0 +1,33 @@
+:root, .light, .light-theme {
+  --gray-a1: #00000003;
+  --gray-a2: #00000006;
+  --gray-a3: #0000000f;
+  --gray-a4: #00000017;
+  --gray-a5: #0000001f;
+  --gray-a6: #00000026;
+  --gray-a7: #00000031;
+  --gray-a8: #00000044;
+  --gray-a9: #00000072;
+  --gray-a10: #0000007c;
+  --gray-a11: #0000009b;
+  --gray-a12: #000000df;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root, .light, .light-theme {
+      --gray-a1: color(display-p3 0 0 0 / 0.012);
+      --gray-a2: color(display-p3 0 0 0 / 0.024);
+      --gray-a3: color(display-p3 0 0 0 / 0.063);
+      --gray-a4: color(display-p3 0 0 0 / 0.09);
+      --gray-a5: color(display-p3 0 0 0 / 0.122);
+      --gray-a6: color(display-p3 0 0 0 / 0.153);
+      --gray-a7: color(display-p3 0 0 0 / 0.192);
+      --gray-a8: color(display-p3 0 0 0 / 0.267);
+      --gray-a9: color(display-p3 0 0 0 / 0.447);
+      --gray-a10: color(display-p3 0 0 0 / 0.486);
+      --gray-a11: color(display-p3 0 0 0 / 0.608);
+      --gray-a12: color(display-p3 0 0 0 / 0.875);
+    }
+  }
+}

package/gray-dark-alpha.css

@@ -0,0 +1,33 @@
+.dark, .dark-theme {
+  --gray-a1: #00000000;
+  --gray-a2: #ffffff09;
+  --gray-a3: #ffffff12;
+  --gray-a4: #ffffff1b;
+  --gray-a5: #ffffff22;
+  --gray-a6: #ffffff2c;
+  --gray-a7: #ffffff3b;
+  --gray-a8: #ffffff55;
+  --gray-a9: #ffffff64;
+  --gray-a10: #ffffff72;
+  --gray-a11: #ffffffaf;
+  --gray-a12: #ffffffed;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    .dark, .dark-theme {
+      --gray-a1: color(display-p3 0 0 0 / 0);
+      --gray-a2: color(display-p3 1 1 1 / 0.034);
+      --gray-a3: color(display-p3 1 1 1 / 0.071);
+      --gray-a4: color(display-p3 1 1 1 / 0.105);
+      --gray-a5: color(display-p3 1 1 1 / 0.134);
+      --gray-a6: color(display-p3 1 1 1 / 0.172);
+      --gray-a7: color(display-p3 1 1 1 / 0.231);
+      --gray-a8: color(display-p3 1 1 1 / 0.332);
+      --gray-a9: color(display-p3 1 1 1 / 0.391);
+      --gray-a10: color(display-p3 1 1 1 / 0.445);
+      --gray-a11: color(display-p3 1 1 1 / 0.685);
+      --gray-a12: color(display-p3 1 1 1 / 0.929);
+    }
+  }
+}

package/gray-dark.css

@@ -0,0 +1,33 @@
+.dark, .dark-theme {
+  --gray-1: #111111;
+  --gray-2: #191919;
+  --gray-3: #222222;
+  --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: #eeeeee;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    .dark, .dark-theme {
+      --gray-1: color(display-p3 0.067 0.067 0.067);
+      --gray-2: color(display-p3 0.098 0.098 0.098);
+      --gray-3: color(display-p3 0.135 0.135 0.135);
+      --gray-4: color(display-p3 0.163 0.163 0.163);
+      --gray-5: color(display-p3 0.192 0.192 0.192);
+      --gray-6: color(display-p3 0.228 0.228 0.228);
+      --gray-7: color(display-p3 0.283 0.283 0.283);
+      --gray-8: color(display-p3 0.375 0.375 0.375);
+      --gray-9: color(display-p3 0.431 0.431 0.431);
+      --gray-10: color(display-p3 0.484 0.484 0.484);
+      --gray-11: color(display-p3 0.706 0.706 0.706);
+      --gray-12: color(display-p3 0.933 0.933 0.933);
+    }
+  }
+}

package/gray.css

@@ -0,0 +1,33 @@
+: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: #bbbbbb;
+  --gray-9: #8d8d8d;
+  --gray-10: #838383;
+  --gray-11: #646464;
+  --gray-12: #202020;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root, .light, .light-theme {
+      --gray-1: color(display-p3 0.988 0.988 0.988);
+      --gray-2: color(display-p3 0.975 0.975 0.975);
+      --gray-3: color(display-p3 0.939 0.939 0.939);
+      --gray-4: color(display-p3 0.908 0.908 0.908);
+      --gray-5: color(display-p3 0.88 0.88 0.88);
+      --gray-6: color(display-p3 0.849 0.849 0.849);
+      --gray-7: color(display-p3 0.807 0.807 0.807);
+      --gray-8: color(display-p3 0.732 0.732 0.732);
+      --gray-9: color(display-p3 0.553 0.553 0.553);
+      --gray-10: color(display-p3 0.512 0.512 0.512);
+      --gray-11: color(display-p3 0.392 0.392 0.392);
+      --gray-12: color(display-p3 0.125 0.125 0.125);
+    }
+  }
+}

package/green-alpha.css

@@ -0,0 +1,33 @@
+:root, .light, .light-theme {
+  --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;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root, .light, .light-theme {
+      --green-a1: color(display-p3 0.024 0.757 0.267 / 0.016);
+      --green-a2: color(display-p3 0.024 0.565 0.129 / 0.036);
+      --green-a3: color(display-p3 0.012 0.596 0.145 / 0.087);
+      --green-a4: color(display-p3 0.008 0.588 0.145 / 0.142);
+      --green-a5: color(display-p3 0.004 0.541 0.157 / 0.204);
+      --green-a6: color(display-p3 0.004 0.518 0.157 / 0.283);
+      --green-a7: color(display-p3 0.004 0.486 0.165 / 0.389);
+      --green-a8: color(display-p3 0 0.478 0.2 / 0.55);
+      --green-a9: color(display-p3 0 0.455 0.165 / 0.667);
+      --green-a10: color(display-p3 0 0.416 0.153 / 0.691);
+      --green-a11: color(display-p3 0.19 0.5 0.32);
+      --green-a12: color(display-p3 0.132 0.228 0.18);
+    }
+  }
+}