@kushagradhawan/kookie-ui 0.1.0

package/tokens/colors/mint.css

@@ -0,0 +1,129 @@
+:root, .light, .light-theme {
+    --mint-1: #f9fefd;
+    --mint-2: #f2fbf9;
+    --mint-3: #ddf9f2;
+    --mint-4: #c8f4e9;
+    --mint-5: #b3ecde;
+    --mint-6: #9ce0d0;
+    --mint-7: #7ecfbd;
+    --mint-8: #4cbba5;
+    --mint-9: #86ead4;
+    --mint-10: #7de0cb;
+    --mint-11: #027864;
+    --mint-12: #16433c;
+    --mint-a1: #00d5aa06;
+    --mint-a2: #00b18a0d;
+    --mint-a3: #00d29e22;
+    --mint-a4: #00cc9937;
+    --mint-a5: #00c0914c;
+    --mint-a6: #00b08663;
+    --mint-a7: #00a17d81;
+    --mint-a8: #009e7fb3;
+    --mint-a9: #00d3a579;
+    --mint-a10: #00c39982;
+    --mint-a11: #007763fd;
+    --mint-a12: #00312ae9;
+    --mint-surface: #effaf8cc;
+    --mint-indicator: var(--mint-9);
+    --mint-track: var(--mint-9);
+}
+@supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+        :root, .light, .light-theme {
+            --mint-1: color(display-p3 0.98 0.995 0.992);
+            --mint-2: color(display-p3 0.957 0.985 0.977);
+            --mint-3: color(display-p3 0.888 0.972 0.95);
+            --mint-4: color(display-p3 0.819 0.951 0.916);
+            --mint-5: color(display-p3 0.747 0.918 0.873);
+            --mint-6: color(display-p3 0.668 0.87 0.818);
+            --mint-7: color(display-p3 0.567 0.805 0.744);
+            --mint-8: color(display-p3 0.42 0.724 0.649);
+            --mint-9: color(display-p3 0.62 0.908 0.834);
+            --mint-10: color(display-p3 0.585 0.871 0.797);
+            --mint-11: color(display-p3 0.203 0.463 0.397);
+            --mint-12: color(display-p3 0.136 0.259 0.236);
+            --mint-a1: color(display-p3 0.02 0.804 0.608 / 0.02);
+            --mint-a2: color(display-p3 0.02 0.647 0.467 / 0.044);
+            --mint-a3: color(display-p3 0.004 0.761 0.553 / 0.114);
+            --mint-a4: color(display-p3 0.004 0.741 0.545 / 0.181);
+            --mint-a5: color(display-p3 0.004 0.678 0.51 / 0.255);
+            --mint-a6: color(display-p3 0.004 0.616 0.463 / 0.334);
+            --mint-a7: color(display-p3 0.004 0.549 0.412 / 0.432);
+            --mint-a8: color(display-p3 0 0.529 0.392 / 0.581);
+            --mint-a9: color(display-p3 0.004 0.765 0.569 / 0.381);
+            --mint-a10: color(display-p3 0.004 0.69 0.51 / 0.416);
+            --mint-a11: color(display-p3 0.203 0.463 0.397);
+            --mint-a12: color(display-p3 0.136 0.259 0.236);
+            --mint-surface: color(display-p3 0.9451 0.9804 0.9725 / 0.8);
+        }
+    }
+}
+.dark, .dark-theme {
+    --mint-1: #0e1515;
+    --mint-2: #0f1b1b;
+    --mint-3: #092c2b;
+    --mint-4: #003a38;
+    --mint-5: #004744;
+    --mint-6: #105650;
+    --mint-7: #1e685f;
+    --mint-8: #277f70;
+    --mint-9: #86ead4;
+    --mint-10: #a8f5e5;
+    --mint-11: #58d5ba;
+    --mint-12: #c4f5e1;
+    --mint-a1: #00dede05;
+    --mint-a2: #00f9f90b;
+    --mint-a3: #00fff61d;
+    --mint-a4: #00fff42c;
+    --mint-a5: #00fff23a;
+    --mint-a6: #0effeb4a;
+    --mint-a7: #34fde55e;
+    --mint-a8: #41ffdf76;
+    --mint-a9: #92ffe7e9;
+    --mint-a10: #aefeedf5;
+    --mint-a11: #67ffded2;
+    --mint-a12: #cbfee9f5;
+    --mint-surface: #15272780;
+    --mint-indicator: var(--mint-9);
+    --mint-track: var(--mint-9);
+}
+@supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+        .dark, .dark-theme {
+            --mint-1: color(display-p3 0.059 0.082 0.081);
+            --mint-2: color(display-p3 0.068 0.104 0.105);
+            --mint-3: color(display-p3 0.077 0.17 0.168);
+            --mint-4: color(display-p3 0.068 0.224 0.22);
+            --mint-5: color(display-p3 0.104 0.275 0.264);
+            --mint-6: color(display-p3 0.154 0.332 0.313);
+            --mint-7: color(display-p3 0.207 0.403 0.373);
+            --mint-8: color(display-p3 0.258 0.49 0.441);
+            --mint-9: color(display-p3 0.62 0.908 0.834);
+            --mint-10: color(display-p3 0.725 0.954 0.898);
+            --mint-11: color(display-p3 0.482 0.825 0.733);
+            --mint-12: color(display-p3 0.807 0.955 0.887);
+            --mint-a1: color(display-p3 0 0.992 0.992 / 0.017);
+            --mint-a2: color(display-p3 0.071 0.98 0.98 / 0.043);
+            --mint-a3: color(display-p3 0.176 0.996 0.996 / 0.11);
+            --mint-a4: color(display-p3 0.071 0.996 0.973 / 0.169);
+            --mint-a5: color(display-p3 0.243 1 0.949 / 0.223);
+            --mint-a6: color(display-p3 0.369 1 0.933 / 0.286);
+            --mint-a7: color(display-p3 0.459 1 0.914 / 0.362);
+            --mint-a8: color(display-p3 0.49 1 0.89 / 0.454);
+            --mint-a9: color(display-p3 0.678 0.996 0.914 / 0.904);
+            --mint-a10: color(display-p3 0.761 1 0.941 / 0.95);
+            --mint-a11: color(display-p3 0.482 0.825 0.733);
+            --mint-a12: color(display-p3 0.807 0.955 0.887);
+            --mint-surface: color(display-p3 0.0941 0.149 0.1412 / 0.5);
+        }
+    }
+}
+:root {
+    --mint-contrast: #1a211e;
+}
+@supports (color: color-mix(in oklab, white, black)) {
+    .dark,
+.dark-theme {
+        --mint-track: color-mix(in oklab, var(--mint-8), var(--mint-9) 65%);
+    }
+}

package/tokens/colors/olive.css

@@ -0,0 +1,123 @@
+:root, .light, .light-theme {
+    --olive-1: #fcfdfc;
+    --olive-2: #f8faf8;
+    --olive-3: #eff1ef;
+    --olive-4: #e7e9e7;
+    --olive-5: #dfe2df;
+    --olive-6: #d7dad7;
+    --olive-7: #cccfcc;
+    --olive-8: #b9bcb8;
+    --olive-9: #898e87;
+    --olive-10: #7f847d;
+    --olive-11: #60655f;
+    --olive-12: #1d211c;
+    --olive-a1: #00550003;
+    --olive-a2: #00490007;
+    --olive-a3: #00200010;
+    --olive-a4: #00160018;
+    --olive-a5: #00180020;
+    --olive-a6: #00140028;
+    --olive-a7: #000f0033;
+    --olive-a8: #040f0047;
+    --olive-a9: #050f0078;
+    --olive-a10: #040e0082;
+    --olive-a11: #020a00a0;
+    --olive-a12: #010600e3;
+    --olive-surface: #ffffffcc;
+    --olive-indicator: var(--olive-9);
+    --olive-track: var(--olive-9);
+}
+@supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+        :root, .light, .light-theme {
+            --olive-1: color(display-p3 0.989 0.992 0.989);
+            --olive-2: color(display-p3 0.974 0.98 0.973);
+            --olive-3: color(display-p3 0.939 0.945 0.937);
+            --olive-4: color(display-p3 0.907 0.914 0.905);
+            --olive-5: color(display-p3 0.878 0.885 0.875);
+            --olive-6: color(display-p3 0.846 0.855 0.843);
+            --olive-7: color(display-p3 0.803 0.812 0.8);
+            --olive-8: color(display-p3 0.727 0.738 0.723);
+            --olive-9: color(display-p3 0.541 0.556 0.532);
+            --olive-10: color(display-p3 0.5 0.515 0.491);
+            --olive-11: color(display-p3 0.38 0.395 0.374);
+            --olive-12: color(display-p3 0.117 0.129 0.111);
+            --olive-a1: color(display-p3 0.024 0.349 0.024 / 0.012);
+            --olive-a2: color(display-p3 0.024 0.302 0.024 / 0.028);
+            --olive-a3: color(display-p3 0.008 0.129 0.008 / 0.063);
+            --olive-a4: color(display-p3 0.012 0.094 0.012 / 0.095);
+            --olive-a5: color(display-p3 0.035 0.098 0.008 / 0.126);
+            --olive-a6: color(display-p3 0.027 0.078 0.004 / 0.157);
+            --olive-a7: color(display-p3 0.02 0.059 0 / 0.2);
+            --olive-a8: color(display-p3 0.02 0.059 0.004 / 0.279);
+            --olive-a9: color(display-p3 0.02 0.051 0.004 / 0.467);
+            --olive-a10: color(display-p3 0.024 0.047 0 / 0.51);
+            --olive-a11: color(display-p3 0.012 0.039 0 / 0.628);
+            --olive-a12: color(display-p3 0.008 0.024 0 / 0.891);
+            --olive-surface: color(display-p3 1 1 1 / 0.8);
+        }
+    }
+}
+.dark, .dark-theme {
+    --olive-1: #111210;
+    --olive-2: #181917;
+    --olive-3: #212220;
+    --olive-4: #282a27;
+    --olive-5: #2f312e;
+    --olive-6: #383a36;
+    --olive-7: #454843;
+    --olive-8: #5c625b;
+    --olive-9: #687066;
+    --olive-10: #767d74;
+    --olive-11: #afb5ad;
+    --olive-12: #eceeec;
+    --olive-a1: #00000000;
+    --olive-a2: #f1f2f008;
+    --olive-a3: #f4f5f312;
+    --olive-a4: #f3fef21a;
+    --olive-a5: #f2fbf122;
+    --olive-a6: #f4faed2c;
+    --olive-a7: #f2fced3b;
+    --olive-a8: #edfdeb57;
+    --olive-a9: #ebfde766;
+    --olive-a10: #f0fdec74;
+    --olive-a11: #f6fef4b0;
+    --olive-a12: #fdfffded;
+    --olive-surface: #1f201e80;
+    --olive-indicator: var(--olive-9);
+    --olive-track: var(--olive-9);
+}
+@supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+        .dark, .dark-theme {
+            --olive-1: color(display-p3 0.067 0.07 0.063);
+            --olive-2: color(display-p3 0.095 0.098 0.091);
+            --olive-3: color(display-p3 0.131 0.135 0.126);
+            --olive-4: color(display-p3 0.158 0.163 0.153);
+            --olive-5: color(display-p3 0.186 0.192 0.18);
+            --olive-6: color(display-p3 0.221 0.229 0.215);
+            --olive-7: color(display-p3 0.273 0.284 0.266);
+            --olive-8: color(display-p3 0.365 0.382 0.359);
+            --olive-9: color(display-p3 0.414 0.438 0.404);
+            --olive-10: color(display-p3 0.467 0.49 0.458);
+            --olive-11: color(display-p3 0.69 0.709 0.682);
+            --olive-12: color(display-p3 0.927 0.933 0.926);
+            --olive-a1: color(display-p3 0 0 0 / 0);
+            --olive-a2: color(display-p3 0.984 0.988 0.976 / 0.03);
+            --olive-a3: color(display-p3 0.992 0.996 0.988 / 0.068);
+            --olive-a4: color(display-p3 0.953 0.996 0.949 / 0.102);
+            --olive-a5: color(display-p3 0.969 1 0.965 / 0.131);
+            --olive-a6: color(display-p3 0.973 1 0.969 / 0.169);
+            --olive-a7: color(display-p3 0.98 1 0.961 / 0.228);
+            --olive-a8: color(display-p3 0.961 1 0.957 / 0.334);
+            --olive-a9: color(display-p3 0.949 1 0.922 / 0.397);
+            --olive-a10: color(display-p3 0.953 1 0.941 / 0.452);
+            --olive-a11: color(display-p3 0.976 1 0.965 / 0.688);
+            --olive-a12: color(display-p3 0.992 1 0.992 / 0.929);
+            --olive-surface: color(display-p3 0.1176 0.1255 0.1176 / 0.5);
+        }
+    }
+}
+:root {
+    --olive-contrast: white;
+}

package/tokens/colors/orange.css

@@ -0,0 +1,123 @@
+:root, .light, .light-theme {
+    --orange-1: #fefcfb;
+    --orange-2: #fff7ed;
+    --orange-3: #ffefd6;
+    --orange-4: #ffdfb5;
+    --orange-5: #ffd19a;
+    --orange-6: #ffc182;
+    --orange-7: #f5ae73;
+    --orange-8: #ec9455;
+    --orange-9: #f76b15;
+    --orange-10: #ef5f00;
+    --orange-11: #cc4e00;
+    --orange-12: #582d1d;
+    --orange-a1: #c0400004;
+    --orange-a2: #ff8e0012;
+    --orange-a3: #ff9c0029;
+    --orange-a4: #ff91014a;
+    --orange-a5: #ff8b0065;
+    --orange-a6: #ff81007d;
+    --orange-a7: #ed6c008c;
+    --orange-a8: #e35f00aa;
+    --orange-a9: #f65e00ea;
+    --orange-a10: #ef5f00;
+    --orange-a11: #cc4e00;
+    --orange-a12: #431200e2;
+    --orange-surface: #fff5e9cc;
+    --orange-indicator: var(--orange-9);
+    --orange-track: var(--orange-9);
+}
+@supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+        :root, .light, .light-theme {
+            --orange-1: color(display-p3 0.995 0.988 0.985);
+            --orange-2: color(display-p3 0.994 0.968 0.934);
+            --orange-3: color(display-p3 0.989 0.938 0.85);
+            --orange-4: color(display-p3 1 0.874 0.687);
+            --orange-5: color(display-p3 1 0.821 0.583);
+            --orange-6: color(display-p3 0.975 0.767 0.545);
+            --orange-7: color(display-p3 0.919 0.693 0.486);
+            --orange-8: color(display-p3 0.877 0.597 0.379);
+            --orange-9: color(display-p3 0.9 0.45 0.2);
+            --orange-10: color(display-p3 0.87 0.409 0.164);
+            --orange-11: color(display-p3 0.76 0.34 0);
+            --orange-12: color(display-p3 0.323 0.185 0.127);
+            --orange-a1: color(display-p3 0.757 0.267 0.024 / 0.016);
+            --orange-a2: color(display-p3 0.886 0.533 0.008 / 0.067);
+            --orange-a3: color(display-p3 0.922 0.584 0.008 / 0.15);
+            --orange-a4: color(display-p3 1 0.604 0.004 / 0.314);
+            --orange-a5: color(display-p3 1 0.569 0.004 / 0.416);
+            --orange-a6: color(display-p3 0.949 0.494 0.004 / 0.455);
+            --orange-a7: color(display-p3 0.839 0.408 0 / 0.514);
+            --orange-a8: color(display-p3 0.804 0.349 0 / 0.62);
+            --orange-a9: color(display-p3 0.878 0.314 0 / 0.8);
+            --orange-a10: color(display-p3 0.843 0.29 0 / 0.836);
+            --orange-a11: color(display-p3 0.76 0.34 0);
+            --orange-a12: color(display-p3 0.323 0.185 0.127);
+            --orange-surface: color(display-p3 0.9961 0.9608 0.9176 / 0.8);
+        }
+    }
+}
+.dark, .dark-theme {
+    --orange-1: #17120e;
+    --orange-2: #1e160f;
+    --orange-3: #331e0b;
+    --orange-4: #462100;
+    --orange-5: #562800;
+    --orange-6: #66350c;
+    --orange-7: #7e451d;
+    --orange-8: #a35829;
+    --orange-9: #f76b15;
+    --orange-10: #ff801f;
+    --orange-11: #ffa057;
+    --orange-12: #ffe0c2;
+    --orange-a1: #ec360007;
+    --orange-a2: #fe6d000e;
+    --orange-a3: #fb6a0025;
+    --orange-a4: #ff590039;
+    --orange-a5: #ff61004a;
+    --orange-a6: #fd75045c;
+    --orange-a7: #ff832c75;
+    --orange-a8: #fe84389d;
+    --orange-a9: #fe6d15f7;
+    --orange-a10: #ff801f;
+    --orange-a11: #ffa057;
+    --orange-a12: #ffe0c2;
+    --orange-surface: #271d1380;
+    --orange-indicator: var(--orange-9);
+    --orange-track: var(--orange-9);
+}
+@supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+        .dark, .dark-theme {
+            --orange-1: color(display-p3 0.088 0.07 0.057);
+            --orange-2: color(display-p3 0.113 0.089 0.061);
+            --orange-3: color(display-p3 0.189 0.12 0.056);
+            --orange-4: color(display-p3 0.262 0.132 0);
+            --orange-5: color(display-p3 0.315 0.168 0.016);
+            --orange-6: color(display-p3 0.376 0.219 0.088);
+            --orange-7: color(display-p3 0.465 0.283 0.147);
+            --orange-8: color(display-p3 0.601 0.359 0.201);
+            --orange-9: color(display-p3 0.9 0.45 0.2);
+            --orange-10: color(display-p3 0.98 0.51 0.23);
+            --orange-11: color(display-p3 1 0.63 0.38);
+            --orange-12: color(display-p3 0.98 0.883 0.775);
+            --orange-a1: color(display-p3 0.961 0.247 0 / 0.022);
+            --orange-a2: color(display-p3 0.992 0.529 0 / 0.051);
+            --orange-a3: color(display-p3 0.996 0.486 0 / 0.131);
+            --orange-a4: color(display-p3 0.996 0.384 0 / 0.211);
+            --orange-a5: color(display-p3 1 0.455 0 / 0.265);
+            --orange-a6: color(display-p3 1 0.529 0.129 / 0.332);
+            --orange-a7: color(display-p3 1 0.569 0.251 / 0.429);
+            --orange-a8: color(display-p3 1 0.584 0.302 / 0.572);
+            --orange-a9: color(display-p3 1 0.494 0.216 / 0.895);
+            --orange-a10: color(display-p3 1 0.522 0.235 / 0.979);
+            --orange-a11: color(display-p3 1 0.63 0.38);
+            --orange-a12: color(display-p3 0.98 0.883 0.775);
+            --orange-surface: color(display-p3 0.1412 0.1098 0.0706 / 0.5);
+        }
+    }
+}
+:root {
+    --orange-contrast: white;
+}

package/tokens/colors/pink.css

@@ -0,0 +1,123 @@
+:root, .light, .light-theme {
+    --pink-1: #fffcfe;
+    --pink-2: #fef7fb;
+    --pink-3: #fee9f5;
+    --pink-4: #fbdcef;
+    --pink-5: #f6cee7;
+    --pink-6: #efbfdd;
+    --pink-7: #e7acd0;
+    --pink-8: #dd93c2;
+    --pink-9: #d6409f;
+    --pink-10: #cf3897;
+    --pink-11: #c2298a;
+    --pink-12: #651249;
+    --pink-a1: #ff00aa03;
+    --pink-a2: #e0008008;
+    --pink-a3: #f4008c16;
+    --pink-a4: #e2008b23;
+    --pink-a5: #d1008331;
+    --pink-a6: #c0007840;
+    --pink-a7: #b6006f53;
+    --pink-a8: #af006f6c;
+    --pink-a9: #c8007fbf;
+    --pink-a10: #c2007ac7;
+    --pink-a11: #b60074d6;
+    --pink-a12: #59003bed;
+    --pink-surface: #fef5facc;
+    --pink-indicator: var(--pink-9);
+    --pink-track: var(--pink-9);
+}
+@supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+        :root, .light, .light-theme {
+            --pink-1: color(display-p3 0.998 0.989 0.996);
+            --pink-2: color(display-p3 0.992 0.97 0.985);
+            --pink-3: color(display-p3 0.981 0.917 0.96);
+            --pink-4: color(display-p3 0.963 0.867 0.932);
+            --pink-5: color(display-p3 0.939 0.815 0.899);
+            --pink-6: color(display-p3 0.907 0.756 0.859);
+            --pink-7: color(display-p3 0.869 0.683 0.81);
+            --pink-8: color(display-p3 0.825 0.59 0.751);
+            --pink-9: color(display-p3 0.775 0.297 0.61);
+            --pink-10: color(display-p3 0.748 0.27 0.581);
+            --pink-11: color(display-p3 0.698 0.219 0.528);
+            --pink-12: color(display-p3 0.363 0.101 0.279);
+            --pink-a1: color(display-p3 0.675 0.024 0.675 / 0.012);
+            --pink-a2: color(display-p3 0.757 0.02 0.51 / 0.032);
+            --pink-a3: color(display-p3 0.765 0.008 0.529 / 0.083);
+            --pink-a4: color(display-p3 0.737 0.008 0.506 / 0.134);
+            --pink-a5: color(display-p3 0.663 0.004 0.451 / 0.185);
+            --pink-a6: color(display-p3 0.616 0.004 0.424 / 0.244);
+            --pink-a7: color(display-p3 0.596 0.004 0.412 / 0.318);
+            --pink-a8: color(display-p3 0.573 0.004 0.404 / 0.412);
+            --pink-a9: color(display-p3 0.682 0 0.447 / 0.702);
+            --pink-a10: color(display-p3 0.655 0 0.424 / 0.73);
+            --pink-a11: color(display-p3 0.698 0.219 0.528);
+            --pink-a12: color(display-p3 0.363 0.101 0.279);
+            --pink-surface: color(display-p3 0.9922 0.9608 0.9804 / 0.8);
+        }
+    }
+}
+.dark, .dark-theme {
+    --pink-1: #191117;
+    --pink-2: #21121d;
+    --pink-3: #37172f;
+    --pink-4: #4b143d;
+    --pink-5: #591c47;
+    --pink-6: #692955;
+    --pink-7: #833869;
+    --pink-8: #a84885;
+    --pink-9: #d6409f;
+    --pink-10: #de51a8;
+    --pink-11: #ff8dcc;
+    --pink-12: #fdd1ea;
+    --pink-a1: #f412bc09;
+    --pink-a2: #f420bb12;
+    --pink-a3: #fe37cc29;
+    --pink-a4: #fc1ec43f;
+    --pink-a5: #fd35c24e;
+    --pink-a6: #fd51c75f;
+    --pink-a7: #fd62c87b;
+    --pink-a8: #ff68c8a2;
+    --pink-a9: #fe49bcd4;
+    --pink-a10: #ff5cc0dc;
+    --pink-a11: #ff8dcc;
+    --pink-a12: #ffd3ecfd;
+    --pink-surface: #31132980;
+    --pink-indicator: var(--pink-9);
+    --pink-track: var(--pink-9);
+}
+@supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+        .dark, .dark-theme {
+            --pink-1: color(display-p3 0.093 0.068 0.089);
+            --pink-2: color(display-p3 0.121 0.073 0.11);
+            --pink-3: color(display-p3 0.198 0.098 0.179);
+            --pink-4: color(display-p3 0.271 0.095 0.231);
+            --pink-5: color(display-p3 0.32 0.127 0.273);
+            --pink-6: color(display-p3 0.382 0.177 0.326);
+            --pink-7: color(display-p3 0.477 0.238 0.405);
+            --pink-8: color(display-p3 0.612 0.304 0.51);
+            --pink-9: color(display-p3 0.775 0.297 0.61);
+            --pink-10: color(display-p3 0.808 0.356 0.645);
+            --pink-11: color(display-p3 1 0.535 0.78);
+            --pink-12: color(display-p3 0.964 0.826 0.912);
+            --pink-a1: color(display-p3 0.984 0.071 0.855 / 0.03);
+            --pink-a2: color(display-p3 1 0.2 0.8 / 0.059);
+            --pink-a3: color(display-p3 1 0.294 0.886 / 0.139);
+            --pink-a4: color(display-p3 1 0.192 0.82 / 0.219);
+            --pink-a5: color(display-p3 1 0.282 0.827 / 0.274);
+            --pink-a6: color(display-p3 1 0.396 0.835 / 0.337);
+            --pink-a7: color(display-p3 1 0.459 0.831 / 0.442);
+            --pink-a8: color(display-p3 1 0.478 0.827 / 0.585);
+            --pink-a9: color(display-p3 1 0.373 0.784 / 0.761);
+            --pink-a10: color(display-p3 1 0.435 0.792 / 0.795);
+            --pink-a11: color(display-p3 1 0.535 0.78);
+            --pink-a12: color(display-p3 0.964 0.826 0.912);
+            --pink-surface: color(display-p3 0.1725 0.0784 0.149 / 0.5);
+        }
+    }
+}
+:root {
+    --pink-contrast: white;
+}

package/tokens/colors/plum.css

@@ -0,0 +1,123 @@
+:root, .light, .light-theme {
+    --plum-1: #fefcff;
+    --plum-2: #fdf7fd;
+    --plum-3: #fbebfb;
+    --plum-4: #f7def8;
+    --plum-5: #f2d1f3;
+    --plum-6: #e9c2ec;
+    --plum-7: #deade3;
+    --plum-8: #cf91d8;
+    --plum-9: #ab4aba;
+    --plum-10: #a144af;
+    --plum-11: #953ea3;
+    --plum-12: #53195d;
+    --plum-a1: #aa00ff03;
+    --plum-a2: #c000c008;
+    --plum-a3: #cc00cc14;
+    --plum-a4: #c200c921;
+    --plum-a5: #b700bd2e;
+    --plum-a6: #a400b03d;
+    --plum-a7: #9900a852;
+    --plum-a8: #9000a56e;
+    --plum-a9: #89009eb5;
+    --plum-a10: #7f0092bb;
+    --plum-a11: #730086c1;
+    --plum-a12: #40004be6;
+    --plum-surface: #fdf5fdcc;
+    --plum-indicator: var(--plum-9);
+    --plum-track: var(--plum-9);
+}
+@supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+        :root, .light, .light-theme {
+            --plum-1: color(display-p3 0.995 0.988 0.999);
+            --plum-2: color(display-p3 0.988 0.971 0.99);
+            --plum-3: color(display-p3 0.973 0.923 0.98);
+            --plum-4: color(display-p3 0.953 0.875 0.966);
+            --plum-5: color(display-p3 0.926 0.825 0.945);
+            --plum-6: color(display-p3 0.89 0.765 0.916);
+            --plum-7: color(display-p3 0.84 0.686 0.877);
+            --plum-8: color(display-p3 0.775 0.58 0.832);
+            --plum-9: color(display-p3 0.624 0.313 0.708);
+            --plum-10: color(display-p3 0.587 0.29 0.667);
+            --plum-11: color(display-p3 0.543 0.263 0.619);
+            --plum-12: color(display-p3 0.299 0.114 0.352);
+            --plum-a1: color(display-p3 0.675 0.024 1 / 0.012);
+            --plum-a2: color(display-p3 0.58 0.024 0.58 / 0.028);
+            --plum-a3: color(display-p3 0.655 0.008 0.753 / 0.079);
+            --plum-a4: color(display-p3 0.627 0.008 0.722 / 0.126);
+            --plum-a5: color(display-p3 0.58 0.004 0.69 / 0.177);
+            --plum-a6: color(display-p3 0.537 0.004 0.655 / 0.236);
+            --plum-a7: color(display-p3 0.49 0.004 0.616 / 0.314);
+            --plum-a8: color(display-p3 0.471 0.004 0.6 / 0.42);
+            --plum-a9: color(display-p3 0.451 0 0.576 / 0.687);
+            --plum-a10: color(display-p3 0.42 0 0.529 / 0.71);
+            --plum-a11: color(display-p3 0.543 0.263 0.619);
+            --plum-a12: color(display-p3 0.299 0.114 0.352);
+            --plum-surface: color(display-p3 0.9843 0.9647 0.9843 / 0.8);
+        }
+    }
+}
+.dark, .dark-theme {
+    --plum-1: #181118;
+    --plum-2: #201320;
+    --plum-3: #351a35;
+    --plum-4: #451d47;
+    --plum-5: #512454;
+    --plum-6: #5e3061;
+    --plum-7: #734079;
+    --plum-8: #92549c;
+    --plum-9: #ab4aba;
+    --plum-10: #b658c4;
+    --plum-11: #e796f3;
+    --plum-12: #f4d4f4;
+    --plum-a1: #f112f108;
+    --plum-a2: #f22ff211;
+    --plum-a3: #fd4cfd27;
+    --plum-a4: #f646ff3a;
+    --plum-a5: #f455ff48;
+    --plum-a6: #f66dff56;
+    --plum-a7: #f07cfd70;
+    --plum-a8: #ee84ff95;
+    --plum-a9: #e961feb6;
+    --plum-a10: #ed70ffc0;
+    --plum-a11: #f19cfef3;
+    --plum-a12: #feddfef4;
+    --plum-surface: #2f152f80;
+    --plum-indicator: var(--plum-9);
+    --plum-track: var(--plum-9);
+}
+@supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+        .dark, .dark-theme {
+            --plum-1: color(display-p3 0.09 0.068 0.092);
+            --plum-2: color(display-p3 0.118 0.077 0.121);
+            --plum-3: color(display-p3 0.192 0.105 0.202);
+            --plum-4: color(display-p3 0.25 0.121 0.271);
+            --plum-5: color(display-p3 0.293 0.152 0.319);
+            --plum-6: color(display-p3 0.343 0.198 0.372);
+            --plum-7: color(display-p3 0.424 0.262 0.461);
+            --plum-8: color(display-p3 0.54 0.341 0.595);
+            --plum-9: color(display-p3 0.624 0.313 0.708);
+            --plum-10: color(display-p3 0.666 0.365 0.748);
+            --plum-11: color(display-p3 0.86 0.602 0.933);
+            --plum-12: color(display-p3 0.936 0.836 0.949);
+            --plum-a1: color(display-p3 0.973 0.071 0.973 / 0.026);
+            --plum-a2: color(display-p3 0.933 0.267 1 / 0.059);
+            --plum-a3: color(display-p3 0.918 0.333 0.996 / 0.148);
+            --plum-a4: color(display-p3 0.91 0.318 1 / 0.219);
+            --plum-a5: color(display-p3 0.914 0.388 1 / 0.269);
+            --plum-a6: color(display-p3 0.906 0.463 1 / 0.328);
+            --plum-a7: color(display-p3 0.906 0.529 1 / 0.425);
+            --plum-a8: color(display-p3 0.906 0.553 1 / 0.568);
+            --plum-a9: color(display-p3 0.875 0.427 1 / 0.69);
+            --plum-a10: color(display-p3 0.886 0.471 0.996 / 0.732);
+            --plum-a11: color(display-p3 0.86 0.602 0.933);
+            --plum-a12: color(display-p3 0.936 0.836 0.949);
+            --plum-surface: color(display-p3 0.1647 0.0863 0.1725 / 0.5);
+        }
+    }
+}
+:root {
+    --plum-contrast: white;
+}