@womp/kookie-ui 0.3.22

package/tokens/colors/amber.css

@@ -0,0 +1,129 @@
+: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;
+    --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;
+    --amber-surface: #fefae4cc;
+    --amber-indicator: var(--amber-9);
+    --amber-track: var(--amber-9);
+}
+@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);
+            --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);
+            --amber-surface: color(display-p3 0.9922 0.9843 0.902 / 0.8);
+        }
+    }
+}
+.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;
+    --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;
+    --amber-surface: #271f1380;
+    --amber-indicator: var(--amber-9);
+    --amber-track: var(--amber-9);
+}
+@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);
+            --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);
+            --amber-surface: color(display-p3 0.1412 0.1176 0.0784 / 0.5);
+        }
+    }
+}
+:root {
+    --amber-contrast: #21201c;
+}
+@supports (color: color-mix(in oklab, white, black)) {
+    .dark,
+.dark-theme {
+        --amber-track: color-mix(in oklab, var(--amber-8), var(--amber-9) 75%);
+    }
+}

package/tokens/colors/blue.css

@@ -0,0 +1,123 @@
+: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;
+    --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;
+    --blue-surface: #f1f9ffcc;
+    --blue-indicator: var(--blue-9);
+    --blue-track: var(--blue-9);
+}
+@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);
+            --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);
+            --blue-surface: color(display-p3 0.9529 0.9765 0.9961 / 0.8);
+        }
+    }
+}
+.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;
+    --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;
+    --blue-surface: #11213d80;
+    --blue-indicator: var(--blue-9);
+    --blue-track: var(--blue-9);
+}
+@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);
+            --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);
+            --blue-surface: color(display-p3 0.0706 0.1255 0.2196 / 0.5);
+        }
+    }
+}
+:root {
+    --blue-contrast: white;
+}

package/tokens/colors/bronze.css

@@ -0,0 +1,123 @@
+: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;
+    --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;
+    --bronze-surface: #fdf5f3cc;
+    --bronze-indicator: var(--bronze-9);
+    --bronze-track: var(--bronze-9);
+}
+@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);
+            --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);
+            --bronze-surface: color(display-p3 0.9843 0.9608 0.9529 / 0.8);
+        }
+    }
+}
+.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;
+    --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;
+    --bronze-surface: #27211d80;
+    --bronze-indicator: var(--bronze-9);
+    --bronze-track: var(--bronze-9);
+}
+@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);
+            --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);
+            --bronze-surface: color(display-p3 0.1412 0.1255 0.1176 / 0.5);
+        }
+    }
+}
+:root {
+    --bronze-contrast: white;
+}

package/tokens/colors/brown.css

@@ -0,0 +1,123 @@
+: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;
+    --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;
+    --brown-surface: #fbf8f4cc;
+    --brown-indicator: var(--brown-9);
+    --brown-track: var(--brown-9);
+}
+@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);
+            --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);
+            --brown-surface: color(display-p3 0.9843 0.9725 0.9569 / 0.8);
+        }
+    }
+}
+.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;
+    --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;
+    --brown-surface: #271f1b80;
+    --brown-indicator: var(--brown-9);
+    --brown-track: var(--brown-9);
+}
+@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);
+            --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);
+            --brown-surface: color(display-p3 0.1412 0.1176 0.102 / 0.5);
+        }
+    }
+}
+:root {
+    --brown-contrast: white;
+}

package/tokens/colors/crimson.css

@@ -0,0 +1,123 @@
+: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;
+    --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;
+    --crimson-surface: #fef5f8cc;
+    --crimson-indicator: var(--crimson-9);
+    --crimson-track: var(--crimson-9);
+}
+@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);
+            --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);
+            --crimson-surface: color(display-p3 0.9922 0.9608 0.9725 / 0.8);
+        }
+    }
+}
+.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;
+    --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;
+    --crimson-surface: #2f151f80;
+    --crimson-indicator: var(--crimson-9);
+    --crimson-track: var(--crimson-9);
+}
+@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);
+            --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);
+            --crimson-surface: color(display-p3 0.1647 0.0863 0.1176 / 0.5);
+        }
+    }
+}
+:root {
+    --crimson-contrast: white;
+}