@kushagradhawan/kookie-ui 0.1.0

package/tokens/colors/cyan.css

@@ -0,0 +1,123 @@
+: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;
+    --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;
+    --cyan-surface: #eff9facc;
+    --cyan-indicator: var(--cyan-9);
+    --cyan-track: var(--cyan-9);
+}
+@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);
+            --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);
+            --cyan-surface: color(display-p3 0.9412 0.9765 0.9804 / 0.8);
+        }
+    }
+}
+.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;
+    --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;
+    --cyan-surface: #11252d80;
+    --cyan-indicator: var(--cyan-9);
+    --cyan-track: var(--cyan-9);
+}
+@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);
+            --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);
+            --cyan-surface: color(display-p3 0.0784 0.1412 0.1725 / 0.5);
+        }
+    }
+}
+:root {
+    --cyan-contrast: white;
+}

package/tokens/colors/gold.css

@@ -0,0 +1,123 @@
+: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;
+    --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;
+    --gold-surface: #f9f8efcc;
+    --gold-indicator: var(--gold-9);
+    --gold-track: var(--gold-9);
+}
+@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);
+            --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);
+            --gold-surface: color(display-p3 0.9765 0.9725 0.9412 / 0.8);
+        }
+    }
+}
+.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;
+    --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;
+    --gold-surface: #25231d80;
+    --gold-indicator: var(--gold-9);
+    --gold-track: var(--gold-9);
+}
+@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);
+            --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);
+            --gold-surface: color(display-p3 0.1412 0.1333 0.1098 / 0.5);
+        }
+    }
+}
+:root {
+    --gold-contrast: white;
+}

package/tokens/colors/grass.css

@@ -0,0 +1,123 @@
+:root, .light, .light-theme {
+    --grass-1: #fbfefb;
+    --grass-2: #f5fbf5;
+    --grass-3: #e9f6e9;
+    --grass-4: #daf1db;
+    --grass-5: #c9e8ca;
+    --grass-6: #b2ddb5;
+    --grass-7: #94ce9a;
+    --grass-8: #65ba74;
+    --grass-9: #46a758;
+    --grass-10: #3e9b4f;
+    --grass-11: #2a7e3b;
+    --grass-12: #203c25;
+    --grass-a1: #00c00004;
+    --grass-a2: #0099000a;
+    --grass-a3: #00970016;
+    --grass-a4: #009f0725;
+    --grass-a5: #00930536;
+    --grass-a6: #008f0a4d;
+    --grass-a7: #018b0f6b;
+    --grass-a8: #008d199a;
+    --grass-a9: #008619b9;
+    --grass-a10: #007b17c1;
+    --grass-a11: #006514d5;
+    --grass-a12: #002006df;
+    --grass-surface: #f3faf3cc;
+    --grass-indicator: var(--grass-9);
+    --grass-track: var(--grass-9);
+}
+@supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+        :root, .light, .light-theme {
+            --grass-1: color(display-p3 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);
+            --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);
+            --grass-surface: color(display-p3 0.9569 0.9804 0.9569 / 0.8);
+        }
+    }
+}
+.dark, .dark-theme {
+    --grass-1: #0e1511;
+    --grass-2: #141a15;
+    --grass-3: #1b2a1e;
+    --grass-4: #1d3a24;
+    --grass-5: #25482d;
+    --grass-6: #2d5736;
+    --grass-7: #366740;
+    --grass-8: #3e7949;
+    --grass-9: #46a758;
+    --grass-10: #53b365;
+    --grass-11: #71d083;
+    --grass-12: #c2f0c2;
+    --grass-a1: #00de1205;
+    --grass-a2: #5ef7780a;
+    --grass-a3: #70fe8c1b;
+    --grass-a4: #57ff802c;
+    --grass-a5: #68ff8b3b;
+    --grass-a6: #71ff8f4b;
+    --grass-a7: #77fd925d;
+    --grass-a8: #77fd9070;
+    --grass-a9: #65ff82a1;
+    --grass-a10: #72ff8dae;
+    --grass-a11: #89ff9fcd;
+    --grass-a12: #ceffceef;
+    --grass-surface: #19231b80;
+    --grass-indicator: var(--grass-9);
+    --grass-track: var(--grass-9);
+}
+@supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+        .dark, .dark-theme {
+            --grass-1: color(display-p3 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);
+            --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);
+            --grass-surface: color(display-p3 0.102 0.1333 0.102 / 0.5);
+        }
+    }
+}
+:root {
+    --grass-contrast: white;
+}

package/tokens/colors/gray.css

@@ -0,0 +1,123 @@
+: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;
+    --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;
+    --gray-surface: #ffffffcc;
+    --gray-indicator: var(--gray-9);
+    --gray-track: var(--gray-9);
+}
+@supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+        :root, .light, .light-theme {
+            --gray-1: color(display-p3 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);
+            --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);
+            --gray-surface: color(display-p3 1 1 1 / 0.8);
+        }
+    }
+}
+.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;
+    --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;
+    --gray-surface: #21212180;
+    --gray-indicator: var(--gray-9);
+    --gray-track: var(--gray-9);
+}
+@supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+        .dark, .dark-theme {
+            --gray-1: color(display-p3 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);
+            --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);
+            --gray-surface: color(display-p3 0.1255 0.1255 0.1255 / 0.5);
+        }
+    }
+}
+:root {
+    --gray-contrast: white;
+}

package/tokens/colors/green.css

@@ -0,0 +1,123 @@
+:root, .light, .light-theme {
+    --green-1: #fbfefc;
+    --green-2: #f4fbf6;
+    --green-3: #e6f6eb;
+    --green-4: #d6f1df;
+    --green-5: #c4e8d1;
+    --green-6: #adddc0;
+    --green-7: #8eceaa;
+    --green-8: #5bb98b;
+    --green-9: #30a46c;
+    --green-10: #2b9a66;
+    --green-11: #218358;
+    --green-12: #193b2d;
+    --green-a1: #00c04004;
+    --green-a2: #00a32f0b;
+    --green-a3: #00a43319;
+    --green-a4: #00a83829;
+    --green-a5: #019c393b;
+    --green-a6: #00963c52;
+    --green-a7: #00914071;
+    --green-a8: #00924ba4;
+    --green-a9: #008f4acf;
+    --green-a10: #008647d4;
+    --green-a11: #00713fde;
+    --green-a12: #002616e6;
+    --green-surface: #f1faf4cc;
+    --green-indicator: var(--green-9);
+    --green-track: var(--green-9);
+}
+@supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+        :root, .light, .light-theme {
+            --green-1: color(display-p3 0.986 0.996 0.989);
+            --green-2: color(display-p3 0.963 0.983 0.967);
+            --green-3: color(display-p3 0.913 0.964 0.925);
+            --green-4: color(display-p3 0.859 0.94 0.879);
+            --green-5: color(display-p3 0.796 0.907 0.826);
+            --green-6: color(display-p3 0.718 0.863 0.761);
+            --green-7: color(display-p3 0.61 0.801 0.675);
+            --green-8: color(display-p3 0.451 0.715 0.559);
+            --green-9: color(display-p3 0.332 0.634 0.442);
+            --green-10: color(display-p3 0.308 0.595 0.417);
+            --green-11: color(display-p3 0.19 0.5 0.32);
+            --green-12: color(display-p3 0.132 0.228 0.18);
+            --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);
+            --green-surface: color(display-p3 0.9569 0.9804 0.9608 / 0.8);
+        }
+    }
+}
+.dark, .dark-theme {
+    --green-1: #0e1512;
+    --green-2: #121b17;
+    --green-3: #132d21;
+    --green-4: #113b29;
+    --green-5: #174933;
+    --green-6: #20573e;
+    --green-7: #28684a;
+    --green-8: #2f7c57;
+    --green-9: #30a46c;
+    --green-10: #33b074;
+    --green-11: #3dd68c;
+    --green-12: #b1f1cb;
+    --green-a1: #00de4505;
+    --green-a2: #29f99d0b;
+    --green-a3: #22ff991e;
+    --green-a4: #11ff992d;
+    --green-a5: #2bffa23c;
+    --green-a6: #44ffaa4b;
+    --green-a7: #50fdac5e;
+    --green-a8: #54ffad73;
+    --green-a9: #44ffa49e;
+    --green-a10: #43fea4ab;
+    --green-a11: #46fea5d4;
+    --green-a12: #bbffd7f0;
+    --green-surface: #15251d80;
+    --green-indicator: var(--green-9);
+    --green-track: var(--green-9);
+}
+@supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+        .dark, .dark-theme {
+            --green-1: color(display-p3 0.062 0.083 0.071);
+            --green-2: color(display-p3 0.079 0.106 0.09);
+            --green-3: color(display-p3 0.1 0.173 0.133);
+            --green-4: color(display-p3 0.115 0.229 0.166);
+            --green-5: color(display-p3 0.147 0.282 0.206);
+            --green-6: color(display-p3 0.185 0.338 0.25);
+            --green-7: color(display-p3 0.227 0.403 0.298);
+            --green-8: color(display-p3 0.27 0.479 0.351);
+            --green-9: color(display-p3 0.332 0.634 0.442);
+            --green-10: color(display-p3 0.357 0.682 0.474);
+            --green-11: color(display-p3 0.434 0.828 0.573);
+            --green-12: color(display-p3 0.747 0.938 0.807);
+            --green-a1: color(display-p3 0 0.992 0.298 / 0.017);
+            --green-a2: color(display-p3 0.341 0.98 0.616 / 0.043);
+            --green-a3: color(display-p3 0.376 0.996 0.655 / 0.114);
+            --green-a4: color(display-p3 0.341 0.996 0.635 / 0.173);
+            --green-a5: color(display-p3 0.408 1 0.678 / 0.232);
+            --green-a6: color(display-p3 0.475 1 0.706 / 0.29);
+            --green-a7: color(display-p3 0.514 1 0.706 / 0.362);
+            --green-a8: color(display-p3 0.529 1 0.718 / 0.442);
+            --green-a9: color(display-p3 0.502 0.996 0.682 / 0.61);
+            --green-a10: color(display-p3 0.506 1 0.682 / 0.66);
+            --green-a11: color(display-p3 0.434 0.828 0.573);
+            --green-a12: color(display-p3 0.747 0.938 0.807);
+            --green-surface: color(display-p3 0.0941 0.1412 0.1098 / 0.5);
+        }
+    }
+}
+:root {
+    --green-contrast: white;
+}