@kushagradhawan/kookie-ui 0.1.0

package/tokens/colors/indigo.css

@@ -0,0 +1,123 @@
+:root, .light, .light-theme {
+    --indigo-1: #fdfdfe;
+    --indigo-2: #f7f9ff;
+    --indigo-3: #edf2fe;
+    --indigo-4: #e1e9ff;
+    --indigo-5: #d2deff;
+    --indigo-6: #c1d0ff;
+    --indigo-7: #abbdf9;
+    --indigo-8: #8da4ef;
+    --indigo-9: #3e63dd;
+    --indigo-10: #3358d4;
+    --indigo-11: #3a5bc7;
+    --indigo-12: #1f2d5c;
+    --indigo-a1: #00008002;
+    --indigo-a2: #0040ff08;
+    --indigo-a3: #0047f112;
+    --indigo-a4: #0044ff1e;
+    --indigo-a5: #0044ff2d;
+    --indigo-a6: #003eff3e;
+    --indigo-a7: #0037ed54;
+    --indigo-a8: #0034dc72;
+    --indigo-a9: #0031d2c1;
+    --indigo-a10: #002ec9cc;
+    --indigo-a11: #002bb7c5;
+    --indigo-a12: #001046e0;
+    --indigo-surface: #f5f8ffcc;
+    --indigo-indicator: var(--indigo-9);
+    --indigo-track: var(--indigo-9);
+}
+@supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+        :root, .light, .light-theme {
+            --indigo-1: color(display-p3 0.992 0.992 0.996);
+            --indigo-2: color(display-p3 0.971 0.977 0.998);
+            --indigo-3: color(display-p3 0.933 0.948 0.992);
+            --indigo-4: color(display-p3 0.885 0.914 1);
+            --indigo-5: color(display-p3 0.831 0.87 1);
+            --indigo-6: color(display-p3 0.767 0.814 0.995);
+            --indigo-7: color(display-p3 0.685 0.74 0.957);
+            --indigo-8: color(display-p3 0.569 0.639 0.916);
+            --indigo-9: color(display-p3 0.276 0.384 0.837);
+            --indigo-10: color(display-p3 0.234 0.343 0.801);
+            --indigo-11: color(display-p3 0.256 0.354 0.755);
+            --indigo-12: color(display-p3 0.133 0.175 0.348);
+            --indigo-a1: color(display-p3 0.02 0.02 0.51 / 0.008);
+            --indigo-a2: color(display-p3 0.024 0.161 0.863 / 0.028);
+            --indigo-a3: color(display-p3 0.008 0.239 0.886 / 0.067);
+            --indigo-a4: color(display-p3 0.004 0.247 1 / 0.114);
+            --indigo-a5: color(display-p3 0.004 0.235 1 / 0.169);
+            --indigo-a6: color(display-p3 0.004 0.208 0.984 / 0.232);
+            --indigo-a7: color(display-p3 0.004 0.176 0.863 / 0.314);
+            --indigo-a8: color(display-p3 0.004 0.165 0.812 / 0.432);
+            --indigo-a9: color(display-p3 0 0.153 0.773 / 0.726);
+            --indigo-a10: color(display-p3 0 0.137 0.737 / 0.765);
+            --indigo-a11: color(display-p3 0.256 0.354 0.755);
+            --indigo-a12: color(display-p3 0.133 0.175 0.348);
+            --indigo-surface: color(display-p3 0.9647 0.9725 0.9961 / 0.8);
+        }
+    }
+}
+.dark, .dark-theme {
+    --indigo-1: #11131f;
+    --indigo-2: #141726;
+    --indigo-3: #182449;
+    --indigo-4: #1d2e62;
+    --indigo-5: #253974;
+    --indigo-6: #304384;
+    --indigo-7: #3a4f97;
+    --indigo-8: #435db1;
+    --indigo-9: #3e63dd;
+    --indigo-10: #5472e4;
+    --indigo-11: #9eb1ff;
+    --indigo-12: #d6e1ff;
+    --indigo-a1: #1133ff0f;
+    --indigo-a2: #3354fa17;
+    --indigo-a3: #2f62ff3c;
+    --indigo-a4: #3566ff57;
+    --indigo-a5: #4171fd6b;
+    --indigo-a6: #5178fd7c;
+    --indigo-a7: #5a7fff90;
+    --indigo-a8: #5b81feac;
+    --indigo-a9: #4671ffdb;
+    --indigo-a10: #5c7efee3;
+    --indigo-a11: #9eb1ff;
+    --indigo-a12: #d6e1ff;
+    --indigo-surface: #171d3b80;
+    --indigo-indicator: var(--indigo-9);
+    --indigo-track: var(--indigo-9);
+}
+@supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+        .dark, .dark-theme {
+            --indigo-1: color(display-p3 0.068 0.074 0.118);
+            --indigo-2: color(display-p3 0.081 0.089 0.144);
+            --indigo-3: color(display-p3 0.105 0.141 0.275);
+            --indigo-4: color(display-p3 0.129 0.18 0.369);
+            --indigo-5: color(display-p3 0.163 0.22 0.439);
+            --indigo-6: color(display-p3 0.203 0.262 0.5);
+            --indigo-7: color(display-p3 0.245 0.309 0.575);
+            --indigo-8: color(display-p3 0.285 0.362 0.674);
+            --indigo-9: color(display-p3 0.276 0.384 0.837);
+            --indigo-10: color(display-p3 0.354 0.445 0.866);
+            --indigo-11: color(display-p3 0.63 0.69 1);
+            --indigo-12: color(display-p3 0.848 0.881 0.99);
+            --indigo-a1: color(display-p3 0.071 0.212 0.996 / 0.055);
+            --indigo-a2: color(display-p3 0.251 0.345 0.988 / 0.085);
+            --indigo-a3: color(display-p3 0.243 0.404 1 / 0.223);
+            --indigo-a4: color(display-p3 0.263 0.42 1 / 0.324);
+            --indigo-a5: color(display-p3 0.314 0.451 1 / 0.4);
+            --indigo-a6: color(display-p3 0.361 0.49 1 / 0.467);
+            --indigo-a7: color(display-p3 0.388 0.51 1 / 0.547);
+            --indigo-a8: color(display-p3 0.404 0.518 1 / 0.652);
+            --indigo-a9: color(display-p3 0.318 0.451 1 / 0.824);
+            --indigo-a10: color(display-p3 0.404 0.506 1 / 0.858);
+            --indigo-a11: color(display-p3 0.63 0.69 1);
+            --indigo-a12: color(display-p3 0.848 0.881 0.99);
+            --indigo-surface: color(display-p3 0.0941 0.1098 0.2196 / 0.5);
+        }
+    }
+}
+:root {
+    --indigo-contrast: white;
+}

package/tokens/colors/iris.css

@@ -0,0 +1,123 @@
+:root, .light, .light-theme {
+    --iris-1: #fdfdff;
+    --iris-2: #f8f8ff;
+    --iris-3: #f0f1fe;
+    --iris-4: #e6e7ff;
+    --iris-5: #dadcff;
+    --iris-6: #cbcdff;
+    --iris-7: #b8baf8;
+    --iris-8: #9b9ef0;
+    --iris-9: #5b5bd6;
+    --iris-10: #5151cd;
+    --iris-11: #5753c6;
+    --iris-12: #272962;
+    --iris-a1: #0000ff02;
+    --iris-a2: #0000ff07;
+    --iris-a3: #0011ee0f;
+    --iris-a4: #000bff19;
+    --iris-a5: #000eff25;
+    --iris-a6: #000aff34;
+    --iris-a7: #0008e647;
+    --iris-a8: #0008d964;
+    --iris-a9: #0000c0a4;
+    --iris-a10: #0000b6ae;
+    --iris-a11: #0600abac;
+    --iris-a12: #000246d8;
+    --iris-surface: #f6f6ffcc;
+    --iris-indicator: var(--iris-9);
+    --iris-track: var(--iris-9);
+}
+@supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+        :root, .light, .light-theme {
+            --iris-1: color(display-p3 0.992 0.992 0.999);
+            --iris-2: color(display-p3 0.972 0.973 0.998);
+            --iris-3: color(display-p3 0.943 0.945 0.992);
+            --iris-4: color(display-p3 0.902 0.906 1);
+            --iris-5: color(display-p3 0.857 0.861 1);
+            --iris-6: color(display-p3 0.799 0.805 0.987);
+            --iris-7: color(display-p3 0.721 0.727 0.955);
+            --iris-8: color(display-p3 0.61 0.619 0.918);
+            --iris-9: color(display-p3 0.357 0.357 0.81);
+            --iris-10: color(display-p3 0.318 0.318 0.774);
+            --iris-11: color(display-p3 0.337 0.326 0.748);
+            --iris-12: color(display-p3 0.154 0.161 0.371);
+            --iris-a1: color(display-p3 0.02 0.02 1 / 0.008);
+            --iris-a2: color(display-p3 0.024 0.024 0.863 / 0.028);
+            --iris-a3: color(display-p3 0.004 0.071 0.871 / 0.059);
+            --iris-a4: color(display-p3 0.012 0.051 1 / 0.099);
+            --iris-a5: color(display-p3 0.008 0.035 1 / 0.142);
+            --iris-a6: color(display-p3 0 0.02 0.941 / 0.2);
+            --iris-a7: color(display-p3 0.004 0.02 0.847 / 0.279);
+            --iris-a8: color(display-p3 0.004 0.024 0.788 / 0.389);
+            --iris-a9: color(display-p3 0 0 0.706 / 0.644);
+            --iris-a10: color(display-p3 0 0 0.667 / 0.683);
+            --iris-a11: color(display-p3 0.337 0.326 0.748);
+            --iris-a12: color(display-p3 0.154 0.161 0.371);
+            --iris-surface: color(display-p3 0.9647 0.9647 0.9961 / 0.8);
+        }
+    }
+}
+.dark, .dark-theme {
+    --iris-1: #13131e;
+    --iris-2: #171625;
+    --iris-3: #202248;
+    --iris-4: #262a65;
+    --iris-5: #303374;
+    --iris-6: #3d3e82;
+    --iris-7: #4a4a95;
+    --iris-8: #5958b1;
+    --iris-9: #5b5bd6;
+    --iris-10: #6e6ade;
+    --iris-11: #b1a9ff;
+    --iris-12: #e0dffe;
+    --iris-a1: #3636fe0e;
+    --iris-a2: #564bf916;
+    --iris-a3: #525bff3b;
+    --iris-a4: #4d58ff5a;
+    --iris-a5: #5b62fd6b;
+    --iris-a6: #6d6ffd7a;
+    --iris-a7: #7777fe8e;
+    --iris-a8: #7b7afeac;
+    --iris-a9: #6a6afed4;
+    --iris-a10: #7d79ffdc;
+    --iris-a11: #b1a9ff;
+    --iris-a12: #e1e0fffe;
+    --iris-surface: #1d1b3980;
+    --iris-indicator: var(--iris-9);
+    --iris-track: var(--iris-9);
+}
+@supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+        .dark, .dark-theme {
+            --iris-1: color(display-p3 0.075 0.075 0.114);
+            --iris-2: color(display-p3 0.089 0.086 0.14);
+            --iris-3: color(display-p3 0.128 0.134 0.272);
+            --iris-4: color(display-p3 0.153 0.165 0.382);
+            --iris-5: color(display-p3 0.192 0.201 0.44);
+            --iris-6: color(display-p3 0.239 0.241 0.491);
+            --iris-7: color(display-p3 0.291 0.289 0.565);
+            --iris-8: color(display-p3 0.35 0.345 0.673);
+            --iris-9: color(display-p3 0.357 0.357 0.81);
+            --iris-10: color(display-p3 0.428 0.416 0.843);
+            --iris-11: color(display-p3 0.685 0.662 1);
+            --iris-12: color(display-p3 0.878 0.875 0.986);
+            --iris-a1: color(display-p3 0.224 0.224 0.992 / 0.051);
+            --iris-a2: color(display-p3 0.361 0.314 1 / 0.08);
+            --iris-a3: color(display-p3 0.357 0.373 1 / 0.219);
+            --iris-a4: color(display-p3 0.325 0.361 1 / 0.337);
+            --iris-a5: color(display-p3 0.38 0.4 1 / 0.4);
+            --iris-a6: color(display-p3 0.447 0.447 1 / 0.454);
+            --iris-a7: color(display-p3 0.486 0.486 1 / 0.534);
+            --iris-a8: color(display-p3 0.502 0.494 1 / 0.652);
+            --iris-a9: color(display-p3 0.431 0.431 1 / 0.799);
+            --iris-a10: color(display-p3 0.502 0.486 1 / 0.832);
+            --iris-a11: color(display-p3 0.685 0.662 1);
+            --iris-a12: color(display-p3 0.878 0.875 0.986);
+            --iris-surface: color(display-p3 0.1098 0.102 0.2118 / 0.5);
+        }
+    }
+}
+:root {
+    --iris-contrast: white;
+}

package/tokens/colors/jade.css

@@ -0,0 +1,123 @@
+:root, .light, .light-theme {
+    --jade-1: #fbfefd;
+    --jade-2: #f4fbf7;
+    --jade-3: #e6f7ed;
+    --jade-4: #d6f1e3;
+    --jade-5: #c3e9d7;
+    --jade-6: #acdec8;
+    --jade-7: #8bceb6;
+    --jade-8: #56ba9f;
+    --jade-9: #29a383;
+    --jade-10: #26997b;
+    --jade-11: #208368;
+    --jade-12: #1d3b31;
+    --jade-a1: #00c08004;
+    --jade-a2: #00a3460b;
+    --jade-a3: #00ae4819;
+    --jade-a4: #00a85129;
+    --jade-a5: #00a2553c;
+    --jade-a6: #009a5753;
+    --jade-a7: #00945f74;
+    --jade-a8: #00976ea9;
+    --jade-a9: #00916bd6;
+    --jade-a10: #008764d9;
+    --jade-a11: #007152df;
+    --jade-a12: #002217e2;
+    --jade-surface: #f1faf5cc;
+    --jade-indicator: var(--jade-9);
+    --jade-track: var(--jade-9);
+}
+@supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+        :root, .light, .light-theme {
+            --jade-1: color(display-p3 0.986 0.996 0.992);
+            --jade-2: color(display-p3 0.962 0.983 0.969);
+            --jade-3: color(display-p3 0.912 0.965 0.932);
+            --jade-4: color(display-p3 0.858 0.941 0.893);
+            --jade-5: color(display-p3 0.795 0.909 0.847);
+            --jade-6: color(display-p3 0.715 0.864 0.791);
+            --jade-7: color(display-p3 0.603 0.802 0.718);
+            --jade-8: color(display-p3 0.44 0.72 0.629);
+            --jade-9: color(display-p3 0.319 0.63 0.521);
+            --jade-10: color(display-p3 0.299 0.592 0.488);
+            --jade-11: color(display-p3 0.15 0.5 0.37);
+            --jade-12: color(display-p3 0.142 0.229 0.194);
+            --jade-a1: color(display-p3 0.024 0.757 0.514 / 0.016);
+            --jade-a2: color(display-p3 0.024 0.612 0.22 / 0.04);
+            --jade-a3: color(display-p3 0.012 0.596 0.235 / 0.087);
+            --jade-a4: color(display-p3 0.008 0.588 0.255 / 0.142);
+            --jade-a5: color(display-p3 0.004 0.561 0.251 / 0.204);
+            --jade-a6: color(display-p3 0.004 0.525 0.278 / 0.287);
+            --jade-a7: color(display-p3 0.004 0.506 0.29 / 0.397);
+            --jade-a8: color(display-p3 0 0.506 0.337 / 0.561);
+            --jade-a9: color(display-p3 0 0.459 0.298 / 0.683);
+            --jade-a10: color(display-p3 0 0.42 0.271 / 0.702);
+            --jade-a11: color(display-p3 0.15 0.5 0.37);
+            --jade-a12: color(display-p3 0.142 0.229 0.194);
+            --jade-surface: color(display-p3 0.9529 0.9804 0.9608 / 0.8);
+        }
+    }
+}
+.dark, .dark-theme {
+    --jade-1: #0d1512;
+    --jade-2: #121c18;
+    --jade-3: #0f2e22;
+    --jade-4: #0b3b2c;
+    --jade-5: #114837;
+    --jade-6: #1b5745;
+    --jade-7: #246854;
+    --jade-8: #2a7e68;
+    --jade-9: #29a383;
+    --jade-10: #27b08b;
+    --jade-11: #1fd8a4;
+    --jade-12: #adf0d4;
+    --jade-a1: #00de4505;
+    --jade-a2: #27fba60c;
+    --jade-a3: #02f99920;
+    --jade-a4: #00ffaa2d;
+    --jade-a5: #11ffb63b;
+    --jade-a6: #34ffc24b;
+    --jade-a7: #45fdc75e;
+    --jade-a8: #48ffcf75;
+    --jade-a9: #38feca9d;
+    --jade-a10: #31fec7ab;
+    --jade-a11: #21fec0d6;
+    --jade-a12: #b8ffe1ef;
+    --jade-surface: #13271f80;
+    --jade-indicator: var(--jade-9);
+    --jade-track: var(--jade-9);
+}
+@supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+        .dark, .dark-theme {
+            --jade-1: color(display-p3 0.059 0.083 0.071);
+            --jade-2: color(display-p3 0.078 0.11 0.094);
+            --jade-3: color(display-p3 0.091 0.176 0.138);
+            --jade-4: color(display-p3 0.102 0.228 0.177);
+            --jade-5: color(display-p3 0.133 0.279 0.221);
+            --jade-6: color(display-p3 0.174 0.334 0.273);
+            --jade-7: color(display-p3 0.219 0.402 0.335);
+            --jade-8: color(display-p3 0.263 0.488 0.411);
+            --jade-9: color(display-p3 0.319 0.63 0.521);
+            --jade-10: color(display-p3 0.338 0.68 0.555);
+            --jade-11: color(display-p3 0.4 0.835 0.656);
+            --jade-12: color(display-p3 0.734 0.934 0.838);
+            --jade-a1: color(display-p3 0 0.992 0.298 / 0.017);
+            --jade-a2: color(display-p3 0.318 0.988 0.651 / 0.047);
+            --jade-a3: color(display-p3 0.267 1 0.667 / 0.118);
+            --jade-a4: color(display-p3 0.275 0.996 0.702 / 0.173);
+            --jade-a5: color(display-p3 0.361 1 0.741 / 0.227);
+            --jade-a6: color(display-p3 0.439 1 0.796 / 0.286);
+            --jade-a7: color(display-p3 0.49 1 0.804 / 0.362);
+            --jade-a8: color(display-p3 0.506 1 0.835 / 0.45);
+            --jade-a9: color(display-p3 0.478 0.996 0.816 / 0.606);
+            --jade-a10: color(display-p3 0.478 1 0.816 / 0.656);
+            --jade-a11: color(display-p3 0.4 0.835 0.656);
+            --jade-a12: color(display-p3 0.734 0.934 0.838);
+            --jade-surface: color(display-p3 0.0863 0.149 0.1176 / 0.5);
+        }
+    }
+}
+:root {
+    --jade-contrast: white;
+}

package/tokens/colors/lime.css

@@ -0,0 +1,129 @@
+:root, .light, .light-theme {
+    --lime-1: #fcfdfa;
+    --lime-2: #f8faf3;
+    --lime-3: #eef6d6;
+    --lime-4: #e2f0bd;
+    --lime-5: #d3e7a6;
+    --lime-6: #c2da91;
+    --lime-7: #abc978;
+    --lime-8: #8db654;
+    --lime-9: #bdee63;
+    --lime-10: #b0e64c;
+    --lime-11: #5c7c2f;
+    --lime-12: #37401c;
+    --lime-a1: #66990005;
+    --lime-a2: #6b95000c;
+    --lime-a3: #96c80029;
+    --lime-a4: #8fc60042;
+    --lime-a5: #81bb0059;
+    --lime-a6: #72aa006e;
+    --lime-a7: #61990087;
+    --lime-a8: #559200ab;
+    --lime-a9: #93e4009c;
+    --lime-a10: #8fdc00b3;
+    --lime-a11: #375f00d0;
+    --lime-a12: #1e2900e3;
+    --lime-surface: #f6f9f0cc;
+    --lime-indicator: var(--lime-9);
+    --lime-track: var(--lime-9);
+}
+@supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+        :root, .light, .light-theme {
+            --lime-1: color(display-p3 0.989 0.992 0.981);
+            --lime-2: color(display-p3 0.975 0.98 0.954);
+            --lime-3: color(display-p3 0.939 0.965 0.851);
+            --lime-4: color(display-p3 0.896 0.94 0.76);
+            --lime-5: color(display-p3 0.843 0.903 0.678);
+            --lime-6: color(display-p3 0.778 0.852 0.599);
+            --lime-7: color(display-p3 0.694 0.784 0.508);
+            --lime-8: color(display-p3 0.585 0.707 0.378);
+            --lime-9: color(display-p3 0.78 0.928 0.466);
+            --lime-10: color(display-p3 0.734 0.896 0.397);
+            --lime-11: color(display-p3 0.386 0.482 0.227);
+            --lime-12: color(display-p3 0.222 0.25 0.128);
+            --lime-a1: color(display-p3 0.412 0.608 0.02 / 0.02);
+            --lime-a2: color(display-p3 0.514 0.592 0.024 / 0.048);
+            --lime-a3: color(display-p3 0.584 0.765 0.008 / 0.15);
+            --lime-a4: color(display-p3 0.561 0.757 0.004 / 0.24);
+            --lime-a5: color(display-p3 0.514 0.698 0.004 / 0.322);
+            --lime-a6: color(display-p3 0.443 0.627 0 / 0.4);
+            --lime-a7: color(display-p3 0.376 0.561 0.004 / 0.491);
+            --lime-a8: color(display-p3 0.333 0.529 0 / 0.624);
+            --lime-a9: color(display-p3 0.588 0.867 0 / 0.534);
+            --lime-a10: color(display-p3 0.561 0.827 0 / 0.604);
+            --lime-a11: color(display-p3 0.386 0.482 0.227);
+            --lime-a12: color(display-p3 0.222 0.25 0.128);
+            --lime-surface: color(display-p3 0.9725 0.9765 0.9412 / 0.8);
+        }
+    }
+}
+.dark, .dark-theme {
+    --lime-1: #11130c;
+    --lime-2: #151a10;
+    --lime-3: #1f2917;
+    --lime-4: #29371d;
+    --lime-5: #334423;
+    --lime-6: #3d522a;
+    --lime-7: #496231;
+    --lime-8: #577538;
+    --lime-9: #bdee63;
+    --lime-10: #d4ff70;
+    --lime-11: #bde56c;
+    --lime-12: #e3f7ba;
+    --lime-a1: #11bb0003;
+    --lime-a2: #78f7000a;
+    --lime-a3: #9bfd4c1a;
+    --lime-a4: #a7fe5c29;
+    --lime-a5: #affe6537;
+    --lime-a6: #b2fe6d46;
+    --lime-a7: #b6ff6f57;
+    --lime-a8: #b6fd6d6c;
+    --lime-a9: #caff69ed;
+    --lime-a10: #d4ff70;
+    --lime-a11: #d1fe77e4;
+    --lime-a12: #e9febff7;
+    --lime-surface: #1b211580;
+    --lime-indicator: var(--lime-9);
+    --lime-track: var(--lime-9);
+}
+@supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+        .dark, .dark-theme {
+            --lime-1: color(display-p3 0.067 0.073 0.048);
+            --lime-2: color(display-p3 0.086 0.1 0.067);
+            --lime-3: color(display-p3 0.13 0.16 0.099);
+            --lime-4: color(display-p3 0.172 0.214 0.126);
+            --lime-5: color(display-p3 0.213 0.266 0.153);
+            --lime-6: color(display-p3 0.257 0.321 0.182);
+            --lime-7: color(display-p3 0.307 0.383 0.215);
+            --lime-8: color(display-p3 0.365 0.456 0.25);
+            --lime-9: color(display-p3 0.78 0.928 0.466);
+            --lime-10: color(display-p3 0.865 0.995 0.519);
+            --lime-11: color(display-p3 0.771 0.893 0.485);
+            --lime-12: color(display-p3 0.905 0.966 0.753);
+            --lime-a1: color(display-p3 0.067 0.941 0 / 0.009);
+            --lime-a2: color(display-p3 0.584 0.996 0.071 / 0.038);
+            --lime-a3: color(display-p3 0.69 1 0.38 / 0.101);
+            --lime-a4: color(display-p3 0.729 1 0.435 / 0.16);
+            --lime-a5: color(display-p3 0.745 1 0.471 / 0.215);
+            --lime-a6: color(display-p3 0.769 1 0.482 / 0.274);
+            --lime-a7: color(display-p3 0.769 1 0.506 / 0.341);
+            --lime-a8: color(display-p3 0.784 1 0.51 / 0.416);
+            --lime-a9: color(display-p3 0.839 1 0.502 / 0.925);
+            --lime-a10: color(display-p3 0.871 1 0.522 / 0.996);
+            --lime-a11: color(display-p3 0.771 0.893 0.485);
+            --lime-a12: color(display-p3 0.905 0.966 0.753);
+            --lime-surface: color(display-p3 0.1098 0.1255 0.0784 / 0.5);
+        }
+    }
+}
+:root {
+    --lime-contrast: #1d211c;
+}
+@supports (color: color-mix(in oklab, white, black)) {
+    .dark,
+.dark-theme {
+        --lime-track: color-mix(in oklab, var(--lime-8), var(--lime-9) 65%);
+    }
+}

package/tokens/colors/mauve.css

@@ -0,0 +1,123 @@
+:root, .light, .light-theme {
+    --mauve-1: #fdfcfd;
+    --mauve-2: #faf9fb;
+    --mauve-3: #f2eff3;
+    --mauve-4: #eae7ec;
+    --mauve-5: #e3dfe6;
+    --mauve-6: #dbd8e0;
+    --mauve-7: #d0cdd7;
+    --mauve-8: #bcbac7;
+    --mauve-9: #8e8c99;
+    --mauve-10: #84828e;
+    --mauve-11: #65636d;
+    --mauve-12: #211f26;
+    --mauve-a1: #55005503;
+    --mauve-a2: #2b005506;
+    --mauve-a3: #30004010;
+    --mauve-a4: #20003618;
+    --mauve-a5: #20003820;
+    --mauve-a6: #14003527;
+    --mauve-a7: #10003332;
+    --mauve-a8: #08003145;
+    --mauve-a9: #05001d73;
+    --mauve-a10: #0500197d;
+    --mauve-a11: #0400119c;
+    --mauve-a12: #020008e0;
+    --mauve-surface: #ffffffcc;
+    --mauve-indicator: var(--mauve-9);
+    --mauve-track: var(--mauve-9);
+}
+@supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+        :root, .light, .light-theme {
+            --mauve-1: color(display-p3 0.991 0.988 0.992);
+            --mauve-2: color(display-p3 0.98 0.976 0.984);
+            --mauve-3: color(display-p3 0.946 0.938 0.952);
+            --mauve-4: color(display-p3 0.915 0.906 0.925);
+            --mauve-5: color(display-p3 0.886 0.876 0.901);
+            --mauve-6: color(display-p3 0.856 0.846 0.875);
+            --mauve-7: color(display-p3 0.814 0.804 0.84);
+            --mauve-8: color(display-p3 0.735 0.728 0.777);
+            --mauve-9: color(display-p3 0.555 0.549 0.596);
+            --mauve-10: color(display-p3 0.514 0.508 0.552);
+            --mauve-11: color(display-p3 0.395 0.388 0.424);
+            --mauve-12: color(display-p3 0.128 0.122 0.147);
+            --mauve-a1: color(display-p3 0.349 0.024 0.349 / 0.012);
+            --mauve-a2: color(display-p3 0.184 0.024 0.349 / 0.024);
+            --mauve-a3: color(display-p3 0.129 0.008 0.255 / 0.063);
+            --mauve-a4: color(display-p3 0.094 0.012 0.216 / 0.095);
+            --mauve-a5: color(display-p3 0.098 0.008 0.224 / 0.126);
+            --mauve-a6: color(display-p3 0.055 0.004 0.18 / 0.153);
+            --mauve-a7: color(display-p3 0.067 0.008 0.184 / 0.197);
+            --mauve-a8: color(display-p3 0.02 0.004 0.176 / 0.271);
+            --mauve-a9: color(display-p3 0.02 0.004 0.106 / 0.451);
+            --mauve-a10: color(display-p3 0.012 0.004 0.09 / 0.491);
+            --mauve-a11: color(display-p3 0.016 0 0.059 / 0.612);
+            --mauve-a12: color(display-p3 0.008 0 0.027 / 0.879);
+            --mauve-surface: color(display-p3 1 1 1 / 0.8);
+        }
+    }
+}
+.dark, .dark-theme {
+    --mauve-1: #121113;
+    --mauve-2: #1a191b;
+    --mauve-3: #232225;
+    --mauve-4: #2b292d;
+    --mauve-5: #323035;
+    --mauve-6: #3c393f;
+    --mauve-7: #49474e;
+    --mauve-8: #625f69;
+    --mauve-9: #6f6d78;
+    --mauve-10: #7c7a85;
+    --mauve-11: #b5b2bc;
+    --mauve-12: #eeeef0;
+    --mauve-a1: #00000000;
+    --mauve-a2: #f5f4f609;
+    --mauve-a3: #ebeaf814;
+    --mauve-a4: #eee5f81d;
+    --mauve-a5: #efe6fe25;
+    --mauve-a6: #f1e6fd30;
+    --mauve-a7: #eee9ff40;
+    --mauve-a8: #eee7ff5d;
+    --mauve-a9: #eae6fd6e;
+    --mauve-a10: #ece9fd7c;
+    --mauve-a11: #f5f1ffb7;
+    --mauve-a12: #fdfdffef;
+    --mauve-surface: #22212380;
+    --mauve-indicator: var(--mauve-9);
+    --mauve-track: var(--mauve-9);
+}
+@supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+        .dark, .dark-theme {
+            --mauve-1: color(display-p3 0.07 0.067 0.074);
+            --mauve-2: color(display-p3 0.101 0.098 0.105);
+            --mauve-3: color(display-p3 0.138 0.134 0.144);
+            --mauve-4: color(display-p3 0.167 0.161 0.175);
+            --mauve-5: color(display-p3 0.196 0.189 0.206);
+            --mauve-6: color(display-p3 0.232 0.225 0.245);
+            --mauve-7: color(display-p3 0.286 0.277 0.302);
+            --mauve-8: color(display-p3 0.383 0.373 0.408);
+            --mauve-9: color(display-p3 0.434 0.428 0.467);
+            --mauve-10: color(display-p3 0.487 0.48 0.519);
+            --mauve-11: color(display-p3 0.707 0.7 0.735);
+            --mauve-12: color(display-p3 0.933 0.933 0.94);
+            --mauve-a1: color(display-p3 0 0 0 / 0);
+            --mauve-a2: color(display-p3 0.996 0.992 1 / 0.034);
+            --mauve-a3: color(display-p3 0.937 0.933 0.992 / 0.077);
+            --mauve-a4: color(display-p3 0.957 0.918 0.996 / 0.111);
+            --mauve-a5: color(display-p3 0.937 0.906 0.996 / 0.145);
+            --mauve-a6: color(display-p3 0.953 0.925 0.996 / 0.183);
+            --mauve-a7: color(display-p3 0.945 0.929 1 / 0.246);
+            --mauve-a8: color(display-p3 0.937 0.918 1 / 0.361);
+            --mauve-a9: color(display-p3 0.933 0.918 1 / 0.424);
+            --mauve-a10: color(display-p3 0.941 0.925 1 / 0.479);
+            --mauve-a11: color(display-p3 0.965 0.961 1 / 0.712);
+            --mauve-a12: color(display-p3 0.992 0.992 1 / 0.937);
+            --mauve-surface: color(display-p3 0.1333 0.1255 0.1333 / 0.5);
+        }
+    }
+}
+:root {
+    --mauve-contrast: white;
+}