@frosted-ui/colors 0.0.1-canary.48

package/plum.css

@@ -0,0 +1,33 @@
+: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;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root, .light, .light-theme {
+      --plum-1: color(display-p3 0.995 0.988 0.999);
+      --plum-2: color(display-p3 0.988 0.971 0.99);
+      --plum-3: color(display-p3 0.973 0.923 0.98);
+      --plum-4: color(display-p3 0.953 0.875 0.966);
+      --plum-5: color(display-p3 0.926 0.825 0.945);
+      --plum-6: color(display-p3 0.89 0.765 0.916);
+      --plum-7: color(display-p3 0.84 0.686 0.877);
+      --plum-8: color(display-p3 0.775 0.58 0.832);
+      --plum-9: color(display-p3 0.624 0.313 0.708);
+      --plum-10: color(display-p3 0.587 0.29 0.667);
+      --plum-11: color(display-p3 0.543 0.263 0.619);
+      --plum-12: color(display-p3 0.299 0.114 0.352);
+    }
+  }
+}

package/purple-alpha.css

@@ -0,0 +1,33 @@
+:root, .light, .light-theme {
+  --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;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root, .light, .light-theme {
+      --purple-a1: color(display-p3 0.675 0.024 0.675 / 0.012);
+      --purple-a2: color(display-p3 0.443 0.024 0.722 / 0.028);
+      --purple-a3: color(display-p3 0.506 0.008 0.835 / 0.071);
+      --purple-a4: color(display-p3 0.451 0.004 0.831 / 0.114);
+      --purple-a5: color(display-p3 0.431 0.004 0.788 / 0.165);
+      --purple-a6: color(display-p3 0.384 0.004 0.745 / 0.228);
+      --purple-a7: color(display-p3 0.357 0.004 0.71 / 0.31);
+      --purple-a8: color(display-p3 0.322 0.004 0.702 / 0.416);
+      --purple-a9: color(display-p3 0.298 0 0.639 / 0.683);
+      --purple-a10: color(display-p3 0.271 0 0.58 / 0.71);
+      --purple-a11: color(display-p3 0.473 0.281 0.687);
+      --purple-a12: color(display-p3 0.234 0.132 0.363);
+    }
+  }
+}

package/purple-dark-alpha.css

@@ -0,0 +1,33 @@
+.dark, .dark-theme {
+  --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;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    .dark, .dark-theme {
+      --purple-a1: color(display-p3 0.686 0.071 0.996 / 0.038);
+      --purple-a2: color(display-p3 0.722 0.286 0.996 / 0.072);
+      --purple-a3: color(display-p3 0.718 0.349 0.996 / 0.169);
+      --purple-a4: color(display-p3 0.702 0.353 1 / 0.248);
+      --purple-a5: color(display-p3 0.718 0.404 1 / 0.303);
+      --purple-a6: color(display-p3 0.733 0.455 1 / 0.366);
+      --purple-a7: color(display-p3 0.753 0.506 1 / 0.458);
+      --purple-a8: color(display-p3 0.749 0.522 1 / 0.622);
+      --purple-a9: color(display-p3 0.686 0.408 1 / 0.736);
+      --purple-a10: color(display-p3 0.71 0.459 1 / 0.778);
+      --purple-a11: color(display-p3 0.8 0.62 1);
+      --purple-a12: color(display-p3 0.913 0.854 0.971);
+    }
+  }
+}

package/purple-dark.css

@@ -0,0 +1,33 @@
+.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;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    .dark, .dark-theme {
+      --purple-1: color(display-p3 0.09 0.068 0.103);
+      --purple-2: color(display-p3 0.113 0.082 0.134);
+      --purple-3: color(display-p3 0.175 0.112 0.224);
+      --purple-4: color(display-p3 0.224 0.137 0.297);
+      --purple-5: color(display-p3 0.264 0.167 0.349);
+      --purple-6: color(display-p3 0.311 0.208 0.406);
+      --purple-7: color(display-p3 0.381 0.266 0.496);
+      --purple-8: color(display-p3 0.49 0.349 0.649);
+      --purple-9: color(display-p3 0.523 0.318 0.751);
+      --purple-10: color(display-p3 0.57 0.373 0.791);
+      --purple-11: color(display-p3 0.8 0.62 1);
+      --purple-12: color(display-p3 0.913 0.854 0.971);
+    }
+  }
+}

package/purple.css

@@ -0,0 +1,33 @@
+: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;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root, .light, .light-theme {
+      --purple-1: color(display-p3 0.995 0.988 0.996);
+      --purple-2: color(display-p3 0.983 0.971 0.993);
+      --purple-3: color(display-p3 0.963 0.931 0.989);
+      --purple-4: color(display-p3 0.937 0.888 0.981);
+      --purple-5: color(display-p3 0.904 0.837 0.966);
+      --purple-6: color(display-p3 0.86 0.774 0.942);
+      --purple-7: color(display-p3 0.799 0.69 0.91);
+      --purple-8: color(display-p3 0.719 0.583 0.874);
+      --purple-9: color(display-p3 0.523 0.318 0.751);
+      --purple-10: color(display-p3 0.483 0.289 0.7);
+      --purple-11: color(display-p3 0.473 0.281 0.687);
+      --purple-12: color(display-p3 0.234 0.132 0.363);
+    }
+  }
+}

package/red-alpha.css

@@ -0,0 +1,33 @@
+:root, .light, .light-theme {
+  --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;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root, .light, .light-theme {
+      --red-a1: color(display-p3 0.675 0.024 0.024 / 0.012);
+      --red-a2: color(display-p3 0.863 0.024 0.024 / 0.028);
+      --red-a3: color(display-p3 0.792 0.008 0.008 / 0.075);
+      --red-a4: color(display-p3 1 0.008 0.008 / 0.134);
+      --red-a5: color(display-p3 0.918 0.008 0.008 / 0.189);
+      --red-a6: color(display-p3 0.831 0.02 0.004 / 0.251);
+      --red-a7: color(display-p3 0.741 0.016 0.004 / 0.33);
+      --red-a8: color(display-p3 0.698 0.012 0.004 / 0.428);
+      --red-a9: color(display-p3 0.749 0.008 0 / 0.675);
+      --red-a10: color(display-p3 0.714 0.012 0 / 0.714);
+      --red-a11: color(display-p3 0.744 0.234 0.222);
+      --red-a12: color(display-p3 0.36 0.115 0.143);
+    }
+  }
+}

package/red-dark-alpha.css

@@ -0,0 +1,33 @@
+.dark, .dark-theme {
+  --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;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    .dark, .dark-theme {
+      --red-a1: color(display-p3 0.984 0.071 0.071 / 0.03);
+      --red-a2: color(display-p3 0.996 0.282 0.282 / 0.055);
+      --red-a3: color(display-p3 1 0.169 0.271 / 0.156);
+      --red-a4: color(display-p3 1 0.118 0.267 / 0.236);
+      --red-a5: color(display-p3 1 0.212 0.314 / 0.303);
+      --red-a6: color(display-p3 1 0.318 0.38 / 0.374);
+      --red-a7: color(display-p3 1 0.4 0.424 / 0.475);
+      --red-a8: color(display-p3 1 0.431 0.431 / 0.635);
+      --red-a9: color(display-p3 1 0.388 0.384 / 0.82);
+      --red-a10: color(display-p3 1 0.463 0.447 / 0.853);
+      --red-a11: color(display-p3 1 0.57 0.55);
+      --red-a12: color(display-p3 0.971 0.826 0.852);
+    }
+  }
+}

package/red-dark.css

@@ -0,0 +1,33 @@
+.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;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    .dark, .dark-theme {
+      --red-1: color(display-p3 0.093 0.068 0.067);
+      --red-2: color(display-p3 0.118 0.077 0.079);
+      --red-3: color(display-p3 0.211 0.081 0.099);
+      --red-4: color(display-p3 0.287 0.079 0.113);
+      --red-5: color(display-p3 0.348 0.11 0.142);
+      --red-6: color(display-p3 0.414 0.16 0.183);
+      --red-7: color(display-p3 0.508 0.224 0.236);
+      --red-8: color(display-p3 0.659 0.298 0.297);
+      --red-9: color(display-p3 0.83 0.329 0.324);
+      --red-10: color(display-p3 0.861 0.403 0.387);
+      --red-11: color(display-p3 1 0.57 0.55);
+      --red-12: color(display-p3 0.971 0.826 0.852);
+    }
+  }
+}

package/red.css

@@ -0,0 +1,33 @@
+: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;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root, .light, .light-theme {
+      --red-1: color(display-p3 0.998 0.989 0.988);
+      --red-2: color(display-p3 0.995 0.971 0.971);
+      --red-3: color(display-p3 0.985 0.925 0.925);
+      --red-4: color(display-p3 0.999 0.866 0.866);
+      --red-5: color(display-p3 0.984 0.812 0.811);
+      --red-6: color(display-p3 0.955 0.751 0.749);
+      --red-7: color(display-p3 0.915 0.675 0.672);
+      --red-8: color(display-p3 0.872 0.575 0.572);
+      --red-9: color(display-p3 0.83 0.329 0.324);
+      --red-10: color(display-p3 0.798 0.294 0.285);
+      --red-11: color(display-p3 0.744 0.234 0.222);
+      --red-12: color(display-p3 0.36 0.115 0.143);
+    }
+  }
+}

package/ruby-alpha.css

@@ -0,0 +1,33 @@
+:root, .light, .light-theme {
+  --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;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root, .light, .light-theme {
+      --ruby-a1: color(display-p3 0.675 0.024 0.349 / 0.012);
+      --ruby-a2: color(display-p3 0.863 0.024 0.024 / 0.028);
+      --ruby-a3: color(display-p3 0.804 0.008 0.11 / 0.079);
+      --ruby-a4: color(display-p3 0.91 0.008 0.125 / 0.13);
+      --ruby-a5: color(display-p3 0.831 0.004 0.133 / 0.185);
+      --ruby-a6: color(display-p3 0.745 0.004 0.118 / 0.244);
+      --ruby-a7: color(display-p3 0.678 0.004 0.114 / 0.314);
+      --ruby-a8: color(display-p3 0.639 0.004 0.125 / 0.412);
+      --ruby-a9: color(display-p3 0.753 0 0.129 / 0.679);
+      --ruby-a10: color(display-p3 0.714 0 0.125 / 0.714);
+      --ruby-a11: color(display-p3 0.728 0.211 0.311);
+      --ruby-a12: color(display-p3 0.36 0.115 0.171);
+    }
+  }
+}

package/ruby-dark-alpha.css

@@ -0,0 +1,33 @@
+.dark, .dark-theme {
+  --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;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    .dark, .dark-theme {
+      --ruby-a1: color(display-p3 0.984 0.071 0.329 / 0.03);
+      --ruby-a2: color(display-p3 0.992 0.376 0.529 / 0.051);
+      --ruby-a3: color(display-p3 0.996 0.196 0.404 / 0.152);
+      --ruby-a4: color(display-p3 1 0.173 0.416 / 0.227);
+      --ruby-a5: color(display-p3 1 0.259 0.459 / 0.29);
+      --ruby-a6: color(display-p3 1 0.341 0.506 / 0.358);
+      --ruby-a7: color(display-p3 1 0.412 0.541 / 0.458);
+      --ruby-a8: color(display-p3 1 0.431 0.537 / 0.627);
+      --ruby-a9: color(display-p3 1 0.376 0.482 / 0.82);
+      --ruby-a10: color(display-p3 1 0.447 0.522 / 0.849);
+      --ruby-a11: color(display-p3 1 0.57 0.59);
+      --ruby-a12: color(display-p3 0.968 0.83 0.88);
+    }
+  }
+}

package/ruby-dark.css

@@ -0,0 +1,33 @@
+.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;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    .dark, .dark-theme {
+      --ruby-1: color(display-p3 0.093 0.068 0.074);
+      --ruby-2: color(display-p3 0.113 0.083 0.089);
+      --ruby-3: color(display-p3 0.208 0.088 0.117);
+      --ruby-4: color(display-p3 0.279 0.092 0.147);
+      --ruby-5: color(display-p3 0.337 0.12 0.18);
+      --ruby-6: color(display-p3 0.401 0.166 0.223);
+      --ruby-7: color(display-p3 0.495 0.224 0.281);
+      --ruby-8: color(display-p3 0.652 0.295 0.359);
+      --ruby-9: color(display-p3 0.83 0.323 0.408);
+      --ruby-10: color(display-p3 0.857 0.392 0.455);
+      --ruby-11: color(display-p3 1 0.57 0.59);
+      --ruby-12: color(display-p3 0.968 0.83 0.88);
+    }
+  }
+}

package/ruby.css

@@ -0,0 +1,33 @@
+: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;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root, .light, .light-theme {
+      --ruby-1: color(display-p3 0.998 0.989 0.992);
+      --ruby-2: color(display-p3 0.995 0.971 0.974);
+      --ruby-3: color(display-p3 0.983 0.92 0.928);
+      --ruby-4: color(display-p3 0.987 0.869 0.885);
+      --ruby-5: color(display-p3 0.968 0.817 0.839);
+      --ruby-6: color(display-p3 0.937 0.758 0.786);
+      --ruby-7: color(display-p3 0.897 0.685 0.721);
+      --ruby-8: color(display-p3 0.851 0.588 0.639);
+      --ruby-9: color(display-p3 0.83 0.323 0.408);
+      --ruby-10: color(display-p3 0.795 0.286 0.375);
+      --ruby-11: color(display-p3 0.728 0.211 0.311);
+      --ruby-12: color(display-p3 0.36 0.115 0.171);
+    }
+  }
+}

package/sage-alpha.css

@@ -0,0 +1,33 @@
+:root, .light, .light-theme {
+  --sage-a1: #00804004;
+  --sage-a2: #00402008;
+  --sage-a3: #002d1e11;
+  --sage-a4: #001f1519;
+  --sage-a5: #00180820;
+  --sage-a6: #00140d28;
+  --sage-a7: #00140a34;
+  --sage-a8: #000f0847;
+  --sage-a9: #00110b79;
+  --sage-a10: #00100a83;
+  --sage-a11: #000a07a0;
+  --sage-a12: #000805e5;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root, .light, .light-theme {
+      --sage-a1: color(display-p3 0.024 0.514 0.267 / 0.016);
+      --sage-a2: color(display-p3 0.02 0.267 0.145 / 0.032);
+      --sage-a3: color(display-p3 0.008 0.184 0.125 / 0.067);
+      --sage-a4: color(display-p3 0.012 0.094 0.051 / 0.095);
+      --sage-a5: color(display-p3 0.008 0.098 0.035 / 0.126);
+      --sage-a6: color(display-p3 0.004 0.078 0.027 / 0.157);
+      --sage-a7: color(display-p3 0 0.059 0.039 / 0.2);
+      --sage-a8: color(display-p3 0.004 0.047 0.031 / 0.275);
+      --sage-a9: color(display-p3 0.004 0.059 0.035 / 0.471);
+      --sage-a10: color(display-p3 0 0.047 0.031 / 0.51);
+      --sage-a11: color(display-p3 0 0.031 0.02 / 0.624);
+      --sage-a12: color(display-p3 0 0.027 0.012 / 0.895);
+    }
+  }
+}

package/sage-dark-alpha.css

@@ -0,0 +1,33 @@
+.dark, .dark-theme {
+  --sage-a1: #00000000;
+  --sage-a2: #f0f2f108;
+  --sage-a3: #f3f5f412;
+  --sage-a4: #f2fefd1a;
+  --sage-a5: #f1fbfa22;
+  --sage-a6: #edfbf42d;
+  --sage-a7: #edfcf73c;
+  --sage-a8: #ebfdf657;
+  --sage-a9: #dffdf266;
+  --sage-a10: #e5fdf674;
+  --sage-a11: #f4fefbb0;
+  --sage-a12: #fdfffeed;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    .dark, .dark-theme {
+      --sage-a1: color(display-p3 0 0 0 / 0);
+      --sage-a2: color(display-p3 0.976 0.988 0.984 / 0.03);
+      --sage-a3: color(display-p3 0.992 0.945 0.941 / 0.072);
+      --sage-a4: color(display-p3 0.988 0.996 0.992 / 0.102);
+      --sage-a5: color(display-p3 0.992 1 0.996 / 0.131);
+      --sage-a6: color(display-p3 0.973 1 0.976 / 0.173);
+      --sage-a7: color(display-p3 0.957 1 0.976 / 0.233);
+      --sage-a8: color(display-p3 0.957 1 0.984 / 0.334);
+      --sage-a9: color(display-p3 0.902 1 0.957 / 0.397);
+      --sage-a10: color(display-p3 0.929 1 0.973 / 0.452);
+      --sage-a11: color(display-p3 0.969 1 0.988 / 0.688);
+      --sage-a12: color(display-p3 0.992 1 0.996 / 0.929);
+    }
+  }
+}

package/sage-dark.css

@@ -0,0 +1,33 @@
+.dark, .dark-theme {
+  --sage-1: #101211;
+  --sage-2: #171918;
+  --sage-3: #202221;
+  --sage-4: #272a29;
+  --sage-5: #2e3130;
+  --sage-6: #373b39;
+  --sage-7: #444947;
+  --sage-8: #5b625f;
+  --sage-9: #63706b;
+  --sage-10: #717d79;
+  --sage-11: #adb5b2;
+  --sage-12: #eceeed;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    .dark, .dark-theme {
+      --sage-1: color(display-p3 0.064 0.07 0.067);
+      --sage-2: color(display-p3 0.092 0.098 0.094);
+      --sage-3: color(display-p3 0.128 0.135 0.131);
+      --sage-4: color(display-p3 0.155 0.164 0.159);
+      --sage-5: color(display-p3 0.183 0.193 0.188);
+      --sage-6: color(display-p3 0.218 0.23 0.224);
+      --sage-7: color(display-p3 0.269 0.285 0.277);
+      --sage-8: color(display-p3 0.362 0.382 0.373);
+      --sage-9: color(display-p3 0.398 0.438 0.421);
+      --sage-10: color(display-p3 0.453 0.49 0.474);
+      --sage-11: color(display-p3 0.685 0.709 0.697);
+      --sage-12: color(display-p3 0.927 0.933 0.93);
+    }
+  }
+}

package/sage.css

@@ -0,0 +1,33 @@
+:root, .light, .light-theme {
+  --sage-1: #fbfdfc;
+  --sage-2: #f7f9f8;
+  --sage-3: #eef1f0;
+  --sage-4: #e6e9e8;
+  --sage-5: #dfe2e0;
+  --sage-6: #d7dad9;
+  --sage-7: #cbcfcd;
+  --sage-8: #b8bcba;
+  --sage-9: #868e8b;
+  --sage-10: #7c8481;
+  --sage-11: #5f6563;
+  --sage-12: #1a211e;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root, .light, .light-theme {
+      --sage-1: color(display-p3 0.986 0.992 0.988);
+      --sage-2: color(display-p3 0.97 0.977 0.974);
+      --sage-3: color(display-p3 0.935 0.944 0.94);
+      --sage-4: color(display-p3 0.904 0.913 0.909);
+      --sage-5: color(display-p3 0.875 0.885 0.88);
+      --sage-6: color(display-p3 0.844 0.854 0.849);
+      --sage-7: color(display-p3 0.8 0.811 0.806);
+      --sage-8: color(display-p3 0.725 0.738 0.732);
+      --sage-9: color(display-p3 0.531 0.556 0.546);
+      --sage-10: color(display-p3 0.492 0.515 0.506);
+      --sage-11: color(display-p3 0.377 0.395 0.389);
+      --sage-12: color(display-p3 0.107 0.129 0.118);
+    }
+  }
+}

package/sand-alpha.css

@@ -0,0 +1,33 @@
+:root, .light, .light-theme {
+  --sand-a1: #55550003;
+  --sand-a2: #25250007;
+  --sand-a3: #20100010;
+  --sand-a4: #1f150019;
+  --sand-a5: #1f180021;
+  --sand-a6: #19130029;
+  --sand-a7: #19140035;
+  --sand-a8: #1915014a;
+  --sand-a9: #0f0f0079;
+  --sand-a10: #0c0c0083;
+  --sand-a11: #080800a1;
+  --sand-a12: #060500e3;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root, .light, .light-theme {
+      --sand-a1: color(display-p3 0.349 0.349 0.024 / 0.012);
+      --sand-a2: color(display-p3 0.161 0.161 0.024 / 0.028);
+      --sand-a3: color(display-p3 0.067 0.067 0.008 / 0.063);
+      --sand-a4: color(display-p3 0.129 0.129 0.012 / 0.099);
+      --sand-a5: color(display-p3 0.098 0.067 0.008 / 0.126);
+      --sand-a6: color(display-p3 0.102 0.075 0.004 / 0.161);
+      --sand-a7: color(display-p3 0.098 0.098 0.004 / 0.208);
+      --sand-a8: color(display-p3 0.086 0.075 0.004 / 0.287);
+      --sand-a9: color(display-p3 0.051 0.051 0.004 / 0.471);
+      --sand-a10: color(display-p3 0.047 0.047 0 / 0.514);
+      --sand-a11: color(display-p3 0.031 0.031 0 / 0.632);
+      --sand-a12: color(display-p3 0.024 0.02 0 / 0.891);
+    }
+  }
+}

package/sand-dark-alpha.css

@@ -0,0 +1,33 @@
+.dark, .dark-theme {
+  --sand-a1: #00000000;
+  --sand-a2: #f4f4f309;
+  --sand-a3: #f6f6f513;
+  --sand-a4: #fefef31b;
+  --sand-a5: #fbfbeb23;
+  --sand-a6: #fffaed2d;
+  --sand-a7: #fffbed3c;
+  --sand-a8: #fff9eb57;
+  --sand-a9: #fffae965;
+  --sand-a10: #fffdee73;
+  --sand-a11: #fffcf4b0;
+  --sand-a12: #fffffded;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    .dark, .dark-theme {
+      --sand-a1: color(display-p3 0 0 0 / 0);
+      --sand-a2: color(display-p3 0.992 0.992 0.988 / 0.034);
+      --sand-a3: color(display-p3 0.996 0.996 0.992 / 0.072);
+      --sand-a4: color(display-p3 0.992 0.992 0.953 / 0.106);
+      --sand-a5: color(display-p3 1 1 0.965 / 0.135);
+      --sand-a6: color(display-p3 1 0.976 0.929 / 0.177);
+      --sand-a7: color(display-p3 1 0.984 0.929 / 0.236);
+      --sand-a8: color(display-p3 1 0.976 0.925 / 0.341);
+      --sand-a9: color(display-p3 1 0.98 0.925 / 0.395);
+      --sand-a10: color(display-p3 1 0.992 0.933 / 0.45);
+      --sand-a11: color(display-p3 1 0.996 0.961 / 0.685);
+      --sand-a12: color(display-p3 1 1 0.992 / 0.929);
+    }
+  }
+}

package/sand-dark.css

@@ -0,0 +1,33 @@
+.dark, .dark-theme {
+  --sand-1: #111110;
+  --sand-2: #191918;
+  --sand-3: #222221;
+  --sand-4: #2a2a28;
+  --sand-5: #31312e;
+  --sand-6: #3b3a37;
+  --sand-7: #494844;
+  --sand-8: #62605b;
+  --sand-9: #6f6d66;
+  --sand-10: #7c7b74;
+  --sand-11: #b5b3ad;
+  --sand-12: #eeeeec;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    .dark, .dark-theme {
+      --sand-1: color(display-p3 0.067 0.067 0.063);
+      --sand-2: color(display-p3 0.098 0.098 0.094);
+      --sand-3: color(display-p3 0.135 0.135 0.129);
+      --sand-4: color(display-p3 0.164 0.163 0.156);
+      --sand-5: color(display-p3 0.193 0.192 0.183);
+      --sand-6: color(display-p3 0.23 0.229 0.217);
+      --sand-7: color(display-p3 0.285 0.282 0.267);
+      --sand-8: color(display-p3 0.384 0.378 0.357);
+      --sand-9: color(display-p3 0.434 0.428 0.403);
+      --sand-10: color(display-p3 0.487 0.481 0.456);
+      --sand-11: color(display-p3 0.707 0.703 0.68);
+      --sand-12: color(display-p3 0.933 0.933 0.926);
+    }
+  }
+}