@frosted-ui/colors 0.0.1-canary.48

package/.turbo/turbo-build.log

@@ -0,0 +1,18 @@
+
+> @frosted-ui/colors@0.0.0 build /home/runner/work/frosted-ui/frosted-ui/packages/frosted-ui-colors
+> pnpm clean && pnpm install && pnpm rollup -c && pnpm build-css-modules
+
+
+> @frosted-ui/colors@0.0.0 clean /home/runner/work/frosted-ui/frosted-ui/packages/frosted-ui-colors
+> rm -f *.css index.js index.mjs
+
+Scope: all 10 workspace projects
+
+Done in 2.5s
+
+src/index.ts → index.js, index.mjs...
+created index.js, index.mjs in 1.4s
+
+> @frosted-ui/colors@0.0.0 build-css-modules /home/runner/work/frosted-ui/frosted-ui/packages/frosted-ui-colors
+> node ./scripts/build-css-modules.js
+

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2021 Radix
+Copyright (c) 2025 Whop
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,17 @@
+# Frosted UI Colors
+
+**A gorgeous, accessible color system used by Whop.**
+
+---
+
+## Documentation
+
+For full documentation, visit [storybook.whop.dev](https://storybook.whop.dev/?path=/docs/guides-3-color--docs).
+
+## Installation
+
+`pnpm add @frosted-ui/colors`
+
+## Acknowledgments
+
+Frosted UI is heavily based on [Radix Colors](https://www.radix-ui.com/colors).

package/amber-alpha.css

@@ -0,0 +1,33 @@
+:root, .light, .light-theme {
+  --amber-a1: #c0800004;
+  --amber-a2: #f4d10016;
+  --amber-a3: #ffde003d;
+  --amber-a4: #ffd40063;
+  --amber-a5: #f8cf0088;
+  --amber-a6: #eab5008c;
+  --amber-a7: #dc9b009d;
+  --amber-a8: #da8a00c9;
+  --amber-a9: #ffb300c2;
+  --amber-a10: #ffb300e7;
+  --amber-a11: #ab6400;
+  --amber-a12: #341500dd;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root, .light, .light-theme {
+      --amber-a1: color(display-p3 0.757 0.514 0.024 / 0.016);
+      --amber-a2: color(display-p3 0.902 0.804 0.008 / 0.079);
+      --amber-a3: color(display-p3 0.965 0.859 0.004 / 0.22);
+      --amber-a4: color(display-p3 0.969 0.82 0.004 / 0.35);
+      --amber-a5: color(display-p3 0.933 0.796 0.004 / 0.475);
+      --amber-a6: color(display-p3 0.875 0.682 0.004 / 0.495);
+      --amber-a7: color(display-p3 0.804 0.573 0 / 0.557);
+      --amber-a8: color(display-p3 0.788 0.502 0 / 0.699);
+      --amber-a9: color(display-p3 1 0.686 0 / 0.742);
+      --amber-a10: color(display-p3 0.945 0.643 0 / 0.726);
+      --amber-a11: color(display-p3 0.64 0.4 0);
+      --amber-a12: color(display-p3 0.294 0.208 0.145);
+    }
+  }
+}

package/amber-dark-alpha.css

@@ -0,0 +1,33 @@
+.dark, .dark-theme {
+  --amber-a1: #e63c0006;
+  --amber-a2: #fd9b000d;
+  --amber-a3: #fa820022;
+  --amber-a4: #fc820032;
+  --amber-a5: #fd8b0041;
+  --amber-a6: #fd9b0051;
+  --amber-a7: #ffab2567;
+  --amber-a8: #ffae3587;
+  --amber-a9: #ffc53d;
+  --amber-a10: #ffd60a;
+  --amber-a11: #ffca16;
+  --amber-a12: #ffe7b3;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    .dark, .dark-theme {
+      --amber-a1: color(display-p3 0.992 0.298 0 / 0.017);
+      --amber-a2: color(display-p3 0.988 0.651 0 / 0.047);
+      --amber-a3: color(display-p3 1 0.6 0 / 0.118);
+      --amber-a4: color(display-p3 1 0.557 0 / 0.185);
+      --amber-a5: color(display-p3 1 0.592 0 / 0.24);
+      --amber-a6: color(display-p3 1 0.659 0.094 / 0.299);
+      --amber-a7: color(display-p3 1 0.714 0.263 / 0.383);
+      --amber-a8: color(display-p3 0.996 0.729 0.306 / 0.5);
+      --amber-a9: color(display-p3 1 0.769 0.259);
+      --amber-a10: color(display-p3 1 0.871 0.149);
+      --amber-a11: color(display-p3 1 0.8 0.29);
+      --amber-a12: color(display-p3 0.984 0.909 0.726);
+    }
+  }
+}

package/amber-dark.css

@@ -0,0 +1,33 @@
+.dark, .dark-theme {
+  --amber-1: #16120c;
+  --amber-2: #1d180f;
+  --amber-3: #302008;
+  --amber-4: #3f2700;
+  --amber-5: #4d3000;
+  --amber-6: #5c3d05;
+  --amber-7: #714f19;
+  --amber-8: #8f6424;
+  --amber-9: #ffc53d;
+  --amber-10: #ffd60a;
+  --amber-11: #ffca16;
+  --amber-12: #ffe7b3;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    .dark, .dark-theme {
+      --amber-1: color(display-p3 0.082 0.07 0.05);
+      --amber-2: color(display-p3 0.111 0.094 0.064);
+      --amber-3: color(display-p3 0.178 0.128 0.049);
+      --amber-4: color(display-p3 0.239 0.156 0);
+      --amber-5: color(display-p3 0.29 0.193 0);
+      --amber-6: color(display-p3 0.344 0.245 0.076);
+      --amber-7: color(display-p3 0.422 0.314 0.141);
+      --amber-8: color(display-p3 0.535 0.399 0.189);
+      --amber-9: color(display-p3 1 0.77 0.26);
+      --amber-10: color(display-p3 1 0.87 0.15);
+      --amber-11: color(display-p3 1 0.8 0.29);
+      --amber-12: color(display-p3 0.984 0.909 0.726);
+    }
+  }
+}

package/amber.css

@@ -0,0 +1,33 @@
+:root, .light, .light-theme {
+  --amber-1: #fefdfb;
+  --amber-2: #fefbe9;
+  --amber-3: #fff7c2;
+  --amber-4: #ffee9c;
+  --amber-5: #fbe577;
+  --amber-6: #f3d673;
+  --amber-7: #e9c162;
+  --amber-8: #e2a336;
+  --amber-9: #ffc53d;
+  --amber-10: #ffba18;
+  --amber-11: #ab6400;
+  --amber-12: #4f3422;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root, .light, .light-theme {
+      --amber-1: color(display-p3 0.995 0.992 0.985);
+      --amber-2: color(display-p3 0.994 0.986 0.921);
+      --amber-3: color(display-p3 0.994 0.969 0.782);
+      --amber-4: color(display-p3 0.989 0.937 0.65);
+      --amber-5: color(display-p3 0.97 0.902 0.527);
+      --amber-6: color(display-p3 0.936 0.844 0.506);
+      --amber-7: color(display-p3 0.89 0.762 0.443);
+      --amber-8: color(display-p3 0.85 0.65 0.3);
+      --amber-9: color(display-p3 1 0.77 0.26);
+      --amber-10: color(display-p3 0.959 0.741 0.274);
+      --amber-11: color(display-p3 0.64 0.4 0);
+      --amber-12: color(display-p3 0.294 0.208 0.145);
+    }
+  }
+}

package/black-alpha.css

@@ -0,0 +1,33 @@
+:root {
+  --black-a1: rgba(0, 0, 0, 0.05);
+  --black-a2: rgba(0, 0, 0, 0.1);
+  --black-a3: rgba(0, 0, 0, 0.15);
+  --black-a4: rgba(0, 0, 0, 0.2);
+  --black-a5: rgba(0, 0, 0, 0.3);
+  --black-a6: rgba(0, 0, 0, 0.4);
+  --black-a7: rgba(0, 0, 0, 0.5);
+  --black-a8: rgba(0, 0, 0, 0.6);
+  --black-a9: rgba(0, 0, 0, 0.7);
+  --black-a10: rgba(0, 0, 0, 0.8);
+  --black-a11: rgba(0, 0, 0, 0.9);
+  --black-a12: rgba(0, 0, 0, 0.95);
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root {
+      --black-a1: color(display-p3 0 0 0 / 0.05);
+      --black-a2: color(display-p3 0 0 0 / 0.1);
+      --black-a3: color(display-p3 0 0 0 / 0.15);
+      --black-a4: color(display-p3 0 0 0 / 0.2);
+      --black-a5: color(display-p3 0 0 0 / 0.3);
+      --black-a6: color(display-p3 0 0 0 / 0.4);
+      --black-a7: color(display-p3 0 0 0 / 0.5);
+      --black-a8: color(display-p3 0 0 0 / 0.6);
+      --black-a9: color(display-p3 0 0 0 / 0.7);
+      --black-a10: color(display-p3 0 0 0 / 0.8);
+      --black-a11: color(display-p3 0 0 0 / 0.9);
+      --black-a12: color(display-p3 0 0 0 / 0.95);
+    }
+  }
+}

package/blue-alpha.css

@@ -0,0 +1,33 @@
+:root, .light, .light-theme {
+  --blue-a1: #0080ff04;
+  --blue-a2: #008cff0b;
+  --blue-a3: #008ff519;
+  --blue-a4: #009eff2a;
+  --blue-a5: #0093ff3d;
+  --blue-a6: #0088f653;
+  --blue-a7: #0083eb71;
+  --blue-a8: #0084e6a1;
+  --blue-a9: #0090ff;
+  --blue-a10: #0086f0fa;
+  --blue-a11: #006dcbf2;
+  --blue-a12: #002359ee;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root, .light, .light-theme {
+      --blue-a1: color(display-p3 0.024 0.514 1 / 0.016);
+      --blue-a2: color(display-p3 0.024 0.514 0.906 / 0.04);
+      --blue-a3: color(display-p3 0.012 0.506 0.914 / 0.087);
+      --blue-a4: color(display-p3 0.008 0.545 1 / 0.146);
+      --blue-a5: color(display-p3 0.004 0.502 0.984 / 0.212);
+      --blue-a6: color(display-p3 0.004 0.463 0.922 / 0.291);
+      --blue-a7: color(display-p3 0.004 0.431 0.863 / 0.393);
+      --blue-a8: color(display-p3 0 0.427 0.851 / 0.55);
+      --blue-a9: color(display-p3 0 0.412 0.961 / 0.753);
+      --blue-a10: color(display-p3 0 0.376 0.886 / 0.765);
+      --blue-a11: color(display-p3 0.15 0.44 0.84);
+      --blue-a12: color(display-p3 0.102 0.193 0.379);
+    }
+  }
+}

package/blue-dark-alpha.css

@@ -0,0 +1,33 @@
+.dark, .dark-theme {
+  --blue-a1: #004df211;
+  --blue-a2: #1166fb18;
+  --blue-a3: #0077ff3a;
+  --blue-a4: #0075ff57;
+  --blue-a5: #0081fd6b;
+  --blue-a6: #0f89fd7f;
+  --blue-a7: #2a91fe98;
+  --blue-a8: #3094feb9;
+  --blue-a9: #0090ff;
+  --blue-a10: #3b9eff;
+  --blue-a11: #70b8ff;
+  --blue-a12: #c2e6ff;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    .dark, .dark-theme {
+      --blue-a1: color(display-p3 0 0.333 1 / 0.059);
+      --blue-a2: color(display-p3 0.114 0.435 0.988 / 0.085);
+      --blue-a3: color(display-p3 0.122 0.463 1 / 0.219);
+      --blue-a4: color(display-p3 0 0.467 1 / 0.324);
+      --blue-a5: color(display-p3 0.098 0.51 1 / 0.4);
+      --blue-a6: color(display-p3 0.224 0.557 1 / 0.475);
+      --blue-a7: color(display-p3 0.294 0.584 1 / 0.572);
+      --blue-a8: color(display-p3 0.314 0.592 1 / 0.702);
+      --blue-a9: color(display-p3 0.251 0.573 0.996 / 0.967);
+      --blue-a10: color(display-p3 0.357 0.631 1 / 0.971);
+      --blue-a11: color(display-p3 0.49 0.72 1);
+      --blue-a12: color(display-p3 0.788 0.898 0.99);
+    }
+  }
+}

package/blue-dark.css

@@ -0,0 +1,33 @@
+.dark, .dark-theme {
+  --blue-1: #0d1520;
+  --blue-2: #111927;
+  --blue-3: #0d2847;
+  --blue-4: #003362;
+  --blue-5: #004074;
+  --blue-6: #104d87;
+  --blue-7: #205d9e;
+  --blue-8: #2870bd;
+  --blue-9: #0090ff;
+  --blue-10: #3b9eff;
+  --blue-11: #70b8ff;
+  --blue-12: #c2e6ff;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    .dark, .dark-theme {
+      --blue-1: color(display-p3 0.057 0.081 0.122);
+      --blue-2: color(display-p3 0.072 0.098 0.147);
+      --blue-3: color(display-p3 0.078 0.154 0.27);
+      --blue-4: color(display-p3 0.033 0.197 0.37);
+      --blue-5: color(display-p3 0.08 0.245 0.441);
+      --blue-6: color(display-p3 0.14 0.298 0.511);
+      --blue-7: color(display-p3 0.195 0.361 0.6);
+      --blue-8: color(display-p3 0.239 0.434 0.72);
+      --blue-9: color(display-p3 0.247 0.556 0.969);
+      --blue-10: color(display-p3 0.344 0.612 0.973);
+      --blue-11: color(display-p3 0.49 0.72 1);
+      --blue-12: color(display-p3 0.788 0.898 0.99);
+    }
+  }
+}

package/blue.css

@@ -0,0 +1,33 @@
+:root, .light, .light-theme {
+  --blue-1: #fbfdff;
+  --blue-2: #f4faff;
+  --blue-3: #e6f4fe;
+  --blue-4: #d5efff;
+  --blue-5: #c2e5ff;
+  --blue-6: #acd8fc;
+  --blue-7: #8ec8f6;
+  --blue-8: #5eb1ef;
+  --blue-9: #0090ff;
+  --blue-10: #0588f0;
+  --blue-11: #0d74ce;
+  --blue-12: #113264;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root, .light, .light-theme {
+      --blue-1: color(display-p3 0.986 0.992 0.999);
+      --blue-2: color(display-p3 0.96 0.979 0.998);
+      --blue-3: color(display-p3 0.912 0.956 0.991);
+      --blue-4: color(display-p3 0.853 0.932 1);
+      --blue-5: color(display-p3 0.788 0.894 0.998);
+      --blue-6: color(display-p3 0.709 0.843 0.976);
+      --blue-7: color(display-p3 0.606 0.777 0.947);
+      --blue-8: color(display-p3 0.451 0.688 0.917);
+      --blue-9: color(display-p3 0.247 0.556 0.969);
+      --blue-10: color(display-p3 0.234 0.523 0.912);
+      --blue-11: color(display-p3 0.15 0.44 0.84);
+      --blue-12: color(display-p3 0.102 0.193 0.379);
+    }
+  }
+}

package/bronze-alpha.css

@@ -0,0 +1,33 @@
+:root, .light, .light-theme {
+  --bronze-a1: #55000003;
+  --bronze-a2: #cc33000a;
+  --bronze-a3: #92250015;
+  --bronze-a4: #80280020;
+  --bronze-a5: #7423002c;
+  --bronze-a6: #7324003a;
+  --bronze-a7: #6c1f004c;
+  --bronze-a8: #671c0066;
+  --bronze-a9: #551a008d;
+  --bronze-a10: #4c150097;
+  --bronze-a11: #3d0f00ab;
+  --bronze-a12: #1d0600d4;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root, .light, .light-theme {
+      --bronze-a1: color(display-p3 0.349 0.024 0.024 / 0.012);
+      --bronze-a2: color(display-p3 0.71 0.22 0.024 / 0.04);
+      --bronze-a3: color(display-p3 0.482 0.2 0.008 / 0.083);
+      --bronze-a4: color(display-p3 0.424 0.133 0.004 / 0.122);
+      --bronze-a5: color(display-p3 0.4 0.145 0.004 / 0.169);
+      --bronze-a6: color(display-p3 0.388 0.125 0.004 / 0.224);
+      --bronze-a7: color(display-p3 0.365 0.11 0.004 / 0.295);
+      --bronze-a8: color(display-p3 0.341 0.102 0.004 / 0.393);
+      --bronze-a9: color(display-p3 0.29 0.094 0 / 0.546);
+      --bronze-a10: color(display-p3 0.255 0.082 0 / 0.585);
+      --bronze-a11: color(display-p3 0.471 0.373 0.336);
+      --bronze-a12: color(display-p3 0.251 0.191 0.172);
+    }
+  }
+}

package/bronze-dark-alpha.css

@@ -0,0 +1,33 @@
+.dark, .dark-theme {
+  --bronze-a1: #d1110004;
+  --bronze-a2: #fbbc910c;
+  --bronze-a3: #faceb817;
+  --bronze-a4: #facdb622;
+  --bronze-a5: #ffd2c12d;
+  --bronze-a6: #ffd1c03c;
+  --bronze-a7: #fdd0c04f;
+  --bronze-a8: #ffd6c565;
+  --bronze-a9: #fec7b09b;
+  --bronze-a10: #fecab5a9;
+  --bronze-a11: #ffd7c6d1;
+  --bronze-a12: #fff1e9ec;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    .dark, .dark-theme {
+      --bronze-a1: color(display-p3 0.941 0.067 0 / 0.009);
+      --bronze-a2: color(display-p3 0.98 0.8 0.706 / 0.043);
+      --bronze-a3: color(display-p3 0.988 0.851 0.761 / 0.085);
+      --bronze-a4: color(display-p3 0.996 0.839 0.78 / 0.127);
+      --bronze-a5: color(display-p3 0.996 0.863 0.773 / 0.173);
+      --bronze-a6: color(display-p3 1 0.863 0.796 / 0.227);
+      --bronze-a7: color(display-p3 1 0.867 0.8 / 0.295);
+      --bronze-a8: color(display-p3 1 0.859 0.788 / 0.387);
+      --bronze-a9: color(display-p3 1 0.82 0.733 / 0.585);
+      --bronze-a10: color(display-p3 1 0.839 0.761 / 0.635);
+      --bronze-a11: color(display-p3 0.81 0.707 0.655);
+      --bronze-a12: color(display-p3 0.921 0.88 0.854);
+    }
+  }
+}

package/bronze-dark.css

@@ -0,0 +1,33 @@
+.dark, .dark-theme {
+  --bronze-1: #141110;
+  --bronze-2: #1c1917;
+  --bronze-3: #262220;
+  --bronze-4: #302a27;
+  --bronze-5: #3b3330;
+  --bronze-6: #493e3a;
+  --bronze-7: #5a4c47;
+  --bronze-8: #6f5f58;
+  --bronze-9: #a18072;
+  --bronze-10: #ae8c7e;
+  --bronze-11: #d4b3a5;
+  --bronze-12: #ede0d9;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    .dark, .dark-theme {
+      --bronze-1: color(display-p3 0.076 0.067 0.063);
+      --bronze-2: color(display-p3 0.106 0.097 0.093);
+      --bronze-3: color(display-p3 0.147 0.132 0.125);
+      --bronze-4: color(display-p3 0.185 0.166 0.156);
+      --bronze-5: color(display-p3 0.227 0.202 0.19);
+      --bronze-6: color(display-p3 0.278 0.246 0.23);
+      --bronze-7: color(display-p3 0.343 0.302 0.281);
+      --bronze-8: color(display-p3 0.426 0.374 0.347);
+      --bronze-9: color(display-p3 0.611 0.507 0.455);
+      --bronze-10: color(display-p3 0.66 0.556 0.504);
+      --bronze-11: color(display-p3 0.81 0.707 0.655);
+      --bronze-12: color(display-p3 0.921 0.88 0.854);
+    }
+  }
+}

package/bronze.css

@@ -0,0 +1,33 @@
+:root, .light, .light-theme {
+  --bronze-1: #fdfcfc;
+  --bronze-2: #fdf7f5;
+  --bronze-3: #f6edea;
+  --bronze-4: #efe4df;
+  --bronze-5: #e7d9d3;
+  --bronze-6: #dfcdc5;
+  --bronze-7: #d3bcb3;
+  --bronze-8: #c2a499;
+  --bronze-9: #a18072;
+  --bronze-10: #957468;
+  --bronze-11: #7d5e54;
+  --bronze-12: #43302b;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root, .light, .light-theme {
+      --bronze-1: color(display-p3 0.991 0.988 0.988);
+      --bronze-2: color(display-p3 0.989 0.97 0.961);
+      --bronze-3: color(display-p3 0.958 0.932 0.919);
+      --bronze-4: color(display-p3 0.929 0.894 0.877);
+      --bronze-5: color(display-p3 0.898 0.853 0.832);
+      --bronze-6: color(display-p3 0.861 0.805 0.778);
+      --bronze-7: color(display-p3 0.812 0.739 0.706);
+      --bronze-8: color(display-p3 0.741 0.647 0.606);
+      --bronze-9: color(display-p3 0.611 0.507 0.455);
+      --bronze-10: color(display-p3 0.563 0.461 0.414);
+      --bronze-11: color(display-p3 0.471 0.373 0.336);
+      --bronze-12: color(display-p3 0.251 0.191 0.172);
+    }
+  }
+}

package/brown-alpha.css

@@ -0,0 +1,33 @@
+:root, .light, .light-theme {
+  --brown-a1: #aa550003;
+  --brown-a2: #aa550009;
+  --brown-a3: #a04b0018;
+  --brown-a4: #9b4a0026;
+  --brown-a5: #9f4d0035;
+  --brown-a6: #a04e0048;
+  --brown-a7: #a34e0060;
+  --brown-a8: #9f4a0081;
+  --brown-a9: #823c00a7;
+  --brown-a10: #723300ac;
+  --brown-a11: #522100b9;
+  --brown-a12: #140600d1;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root, .light, .light-theme {
+      --brown-a1: color(display-p3 0.675 0.349 0.024 / 0.012);
+      --brown-a2: color(display-p3 0.675 0.349 0.024 / 0.036);
+      --brown-a3: color(display-p3 0.573 0.314 0.012 / 0.091);
+      --brown-a4: color(display-p3 0.545 0.302 0.008 / 0.146);
+      --brown-a5: color(display-p3 0.561 0.29 0.004 / 0.204);
+      --brown-a6: color(display-p3 0.553 0.294 0.004 / 0.271);
+      --brown-a7: color(display-p3 0.557 0.286 0.004 / 0.361);
+      --brown-a8: color(display-p3 0.549 0.275 0.004 / 0.487);
+      --brown-a9: color(display-p3 0.447 0.22 0 / 0.632);
+      --brown-a10: color(display-p3 0.388 0.188 0 / 0.655);
+      --brown-a11: color(display-p3 0.485 0.374 0.288);
+      --brown-a12: color(display-p3 0.236 0.202 0.183);
+    }
+  }
+}

package/brown-dark-alpha.css

@@ -0,0 +1,33 @@
+.dark, .dark-theme {
+  --brown-a1: #91110002;
+  --brown-a2: #fba67c0c;
+  --brown-a3: #fcb58c19;
+  --brown-a4: #fbbb8a24;
+  --brown-a5: #fcb88931;
+  --brown-a6: #fdba8741;
+  --brown-a7: #ffbb8856;
+  --brown-a8: #ffbe8773;
+  --brown-a9: #feb87da8;
+  --brown-a10: #ffc18cb3;
+  --brown-a11: #fed1aad9;
+  --brown-a12: #feecd4f2;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    .dark, .dark-theme {
+      --brown-a1: color(display-p3 0.855 0.071 0 / 0.005);
+      --brown-a2: color(display-p3 0.98 0.706 0.525 / 0.043);
+      --brown-a3: color(display-p3 0.996 0.745 0.576 / 0.093);
+      --brown-a4: color(display-p3 1 0.765 0.592 / 0.135);
+      --brown-a5: color(display-p3 1 0.761 0.588 / 0.181);
+      --brown-a6: color(display-p3 1 0.773 0.592 / 0.24);
+      --brown-a7: color(display-p3 0.996 0.776 0.58 / 0.32);
+      --brown-a8: color(display-p3 1 0.78 0.573 / 0.433);
+      --brown-a9: color(display-p3 1 0.769 0.549 / 0.627);
+      --brown-a10: color(display-p3 1 0.792 0.596 / 0.677);
+      --brown-a11: color(display-p3 0.835 0.715 0.597);
+      --brown-a12: color(display-p3 0.938 0.885 0.802);
+    }
+  }
+}

package/brown-dark.css

@@ -0,0 +1,33 @@
+.dark, .dark-theme {
+  --brown-1: #12110f;
+  --brown-2: #1c1816;
+  --brown-3: #28211d;
+  --brown-4: #322922;
+  --brown-5: #3e3128;
+  --brown-6: #4d3c2f;
+  --brown-7: #614a39;
+  --brown-8: #7c5f46;
+  --brown-9: #ad7f58;
+  --brown-10: #b88c67;
+  --brown-11: #dbb594;
+  --brown-12: #f2e1ca;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    .dark, .dark-theme {
+      --brown-1: color(display-p3 0.071 0.067 0.059);
+      --brown-2: color(display-p3 0.107 0.095 0.087);
+      --brown-3: color(display-p3 0.151 0.13 0.115);
+      --brown-4: color(display-p3 0.191 0.161 0.138);
+      --brown-5: color(display-p3 0.235 0.194 0.162);
+      --brown-6: color(display-p3 0.291 0.237 0.192);
+      --brown-7: color(display-p3 0.365 0.295 0.232);
+      --brown-8: color(display-p3 0.469 0.377 0.287);
+      --brown-9: color(display-p3 0.651 0.505 0.368);
+      --brown-10: color(display-p3 0.697 0.557 0.423);
+      --brown-11: color(display-p3 0.835 0.715 0.597);
+      --brown-12: color(display-p3 0.938 0.885 0.802);
+    }
+  }
+}

package/brown.css

@@ -0,0 +1,33 @@
+:root, .light, .light-theme {
+  --brown-1: #fefdfc;
+  --brown-2: #fcf9f6;
+  --brown-3: #f6eee7;
+  --brown-4: #f0e4d9;
+  --brown-5: #ebdaca;
+  --brown-6: #e4cdb7;
+  --brown-7: #dcbc9f;
+  --brown-8: #cea37e;
+  --brown-9: #ad7f58;
+  --brown-10: #a07553;
+  --brown-11: #815e46;
+  --brown-12: #3e332e;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root, .light, .light-theme {
+      --brown-1: color(display-p3 0.995 0.992 0.989);
+      --brown-2: color(display-p3 0.987 0.976 0.964);
+      --brown-3: color(display-p3 0.959 0.936 0.909);
+      --brown-4: color(display-p3 0.934 0.897 0.855);
+      --brown-5: color(display-p3 0.909 0.856 0.798);
+      --brown-6: color(display-p3 0.88 0.808 0.73);
+      --brown-7: color(display-p3 0.841 0.742 0.639);
+      --brown-8: color(display-p3 0.782 0.647 0.514);
+      --brown-9: color(display-p3 0.651 0.505 0.368);
+      --brown-10: color(display-p3 0.601 0.465 0.344);
+      --brown-11: color(display-p3 0.485 0.374 0.288);
+      --brown-12: color(display-p3 0.236 0.202 0.183);
+    }
+  }
+}

package/crimson-alpha.css

@@ -0,0 +1,33 @@
+:root, .light, .light-theme {
+  --crimson-a1: #ff005503;
+  --crimson-a2: #e0004008;
+  --crimson-a3: #ff005216;
+  --crimson-a4: #f8005123;
+  --crimson-a5: #e5004f31;
+  --crimson-a6: #d0004b41;
+  --crimson-a7: #bf004753;
+  --crimson-a8: #b6004a6c;
+  --crimson-a9: #e2005bc2;
+  --crimson-a10: #d70056cb;
+  --crimson-a11: #c4004fe2;
+  --crimson-a12: #530026e9;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root, .light, .light-theme {
+      --crimson-a1: color(display-p3 0.675 0.024 0.349 / 0.012);
+      --crimson-a2: color(display-p3 0.757 0.02 0.267 / 0.032);
+      --crimson-a3: color(display-p3 0.859 0.008 0.294 / 0.083);
+      --crimson-a4: color(display-p3 0.827 0.008 0.298 / 0.134);
+      --crimson-a5: color(display-p3 0.753 0.008 0.275 / 0.189);
+      --crimson-a6: color(display-p3 0.682 0.004 0.247 / 0.244);
+      --crimson-a7: color(display-p3 0.62 0.004 0.251 / 0.318);
+      --crimson-a8: color(display-p3 0.6 0.004 0.251 / 0.408);
+      --crimson-a9: color(display-p3 0.776 0 0.298 / 0.702);
+      --crimson-a10: color(display-p3 0.737 0 0.275 / 0.734);
+      --crimson-a11: color(display-p3 0.731 0.195 0.388);
+      --crimson-a12: color(display-p3 0.352 0.111 0.221);
+    }
+  }
+}