@kushagradhawan/kookie-ui 0.1.0

package/tokens/colors/purple.css

@@ -0,0 +1,123 @@
+:root, .light, .light-theme {
+    --purple-1: #fefcfe;
+    --purple-2: #fbf7fe;
+    --purple-3: #f7edfe;
+    --purple-4: #f2e2fc;
+    --purple-5: #ead5f9;
+    --purple-6: #e0c4f4;
+    --purple-7: #d1afec;
+    --purple-8: #be93e4;
+    --purple-9: #8e4ec6;
+    --purple-10: #8347b9;
+    --purple-11: #8145b5;
+    --purple-12: #402060;
+    --purple-a1: #aa00aa03;
+    --purple-a2: #8000e008;
+    --purple-a3: #8e00f112;
+    --purple-a4: #8d00e51d;
+    --purple-a5: #8000db2a;
+    --purple-a6: #7a01d03b;
+    --purple-a7: #6d00c350;
+    --purple-a8: #6600c06c;
+    --purple-a9: #5c00adb1;
+    --purple-a10: #53009eb8;
+    --purple-a11: #52009aba;
+    --purple-a12: #250049df;
+    --purple-surface: #faf5fecc;
+    --purple-indicator: var(--purple-9);
+    --purple-track: var(--purple-9);
+}
+@supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+        :root, .light, .light-theme {
+            --purple-1: color(display-p3 0.995 0.988 0.996);
+            --purple-2: color(display-p3 0.983 0.971 0.993);
+            --purple-3: color(display-p3 0.963 0.931 0.989);
+            --purple-4: color(display-p3 0.937 0.888 0.981);
+            --purple-5: color(display-p3 0.904 0.837 0.966);
+            --purple-6: color(display-p3 0.86 0.774 0.942);
+            --purple-7: color(display-p3 0.799 0.69 0.91);
+            --purple-8: color(display-p3 0.719 0.583 0.874);
+            --purple-9: color(display-p3 0.523 0.318 0.751);
+            --purple-10: color(display-p3 0.483 0.289 0.7);
+            --purple-11: color(display-p3 0.473 0.281 0.687);
+            --purple-12: color(display-p3 0.234 0.132 0.363);
+            --purple-a1: color(display-p3 0.675 0.024 0.675 / 0.012);
+            --purple-a2: color(display-p3 0.443 0.024 0.722 / 0.028);
+            --purple-a3: color(display-p3 0.506 0.008 0.835 / 0.071);
+            --purple-a4: color(display-p3 0.451 0.004 0.831 / 0.114);
+            --purple-a5: color(display-p3 0.431 0.004 0.788 / 0.165);
+            --purple-a6: color(display-p3 0.384 0.004 0.745 / 0.228);
+            --purple-a7: color(display-p3 0.357 0.004 0.71 / 0.31);
+            --purple-a8: color(display-p3 0.322 0.004 0.702 / 0.416);
+            --purple-a9: color(display-p3 0.298 0 0.639 / 0.683);
+            --purple-a10: color(display-p3 0.271 0 0.58 / 0.71);
+            --purple-a11: color(display-p3 0.473 0.281 0.687);
+            --purple-a12: color(display-p3 0.234 0.132 0.363);
+            --purple-surface: color(display-p3 0.9804 0.9647 0.9922 / 0.8);
+        }
+    }
+}
+.dark, .dark-theme {
+    --purple-1: #18111b;
+    --purple-2: #1e1523;
+    --purple-3: #301c3b;
+    --purple-4: #3d224e;
+    --purple-5: #48295c;
+    --purple-6: #54346b;
+    --purple-7: #664282;
+    --purple-8: #8457aa;
+    --purple-9: #8e4ec6;
+    --purple-10: #9a5cd0;
+    --purple-11: #d19dff;
+    --purple-12: #ecd9fa;
+    --purple-a1: #b412f90b;
+    --purple-a2: #b744f714;
+    --purple-a3: #c150ff2d;
+    --purple-a4: #bb53fd42;
+    --purple-a5: #be5cfd51;
+    --purple-a6: #c16dfd61;
+    --purple-a7: #c378fd7a;
+    --purple-a8: #c47effa4;
+    --purple-a9: #b661ffc2;
+    --purple-a10: #bc6fffcd;
+    --purple-a11: #d19dff;
+    --purple-a12: #f1ddfffa;
+    --purple-surface: #2b173580;
+    --purple-indicator: var(--purple-9);
+    --purple-track: var(--purple-9);
+}
+@supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+        .dark, .dark-theme {
+            --purple-1: color(display-p3 0.09 0.068 0.103);
+            --purple-2: color(display-p3 0.113 0.082 0.134);
+            --purple-3: color(display-p3 0.175 0.112 0.224);
+            --purple-4: color(display-p3 0.224 0.137 0.297);
+            --purple-5: color(display-p3 0.264 0.167 0.349);
+            --purple-6: color(display-p3 0.311 0.208 0.406);
+            --purple-7: color(display-p3 0.381 0.266 0.496);
+            --purple-8: color(display-p3 0.49 0.349 0.649);
+            --purple-9: color(display-p3 0.523 0.318 0.751);
+            --purple-10: color(display-p3 0.57 0.373 0.791);
+            --purple-11: color(display-p3 0.8 0.62 1);
+            --purple-12: color(display-p3 0.913 0.854 0.971);
+            --purple-a1: color(display-p3 0.686 0.071 0.996 / 0.038);
+            --purple-a2: color(display-p3 0.722 0.286 0.996 / 0.072);
+            --purple-a3: color(display-p3 0.718 0.349 0.996 / 0.169);
+            --purple-a4: color(display-p3 0.702 0.353 1 / 0.248);
+            --purple-a5: color(display-p3 0.718 0.404 1 / 0.303);
+            --purple-a6: color(display-p3 0.733 0.455 1 / 0.366);
+            --purple-a7: color(display-p3 0.753 0.506 1 / 0.458);
+            --purple-a8: color(display-p3 0.749 0.522 1 / 0.622);
+            --purple-a9: color(display-p3 0.686 0.408 1 / 0.736);
+            --purple-a10: color(display-p3 0.71 0.459 1 / 0.778);
+            --purple-a11: color(display-p3 0.8 0.62 1);
+            --purple-a12: color(display-p3 0.913 0.854 0.971);
+            --purple-surface: color(display-p3 0.149 0.0941 0.1961 / 0.5);
+        }
+    }
+}
+:root {
+    --purple-contrast: white;
+}

package/tokens/colors/red.css

@@ -0,0 +1,123 @@
+:root, .light, .light-theme {
+    --red-1: #fffcfc;
+    --red-2: #fff7f7;
+    --red-3: #feebec;
+    --red-4: #ffdbdc;
+    --red-5: #ffcdce;
+    --red-6: #fdbdbe;
+    --red-7: #f4a9aa;
+    --red-8: #eb8e90;
+    --red-9: #e5484d;
+    --red-10: #dc3e42;
+    --red-11: #ce2c31;
+    --red-12: #641723;
+    --red-a1: #ff000003;
+    --red-a2: #ff000008;
+    --red-a3: #f3000d14;
+    --red-a4: #ff000824;
+    --red-a5: #ff000632;
+    --red-a6: #f8000442;
+    --red-a7: #df000356;
+    --red-a8: #d2000571;
+    --red-a9: #db0007b7;
+    --red-a10: #d10005c1;
+    --red-a11: #c40006d3;
+    --red-a12: #55000de8;
+    --red-surface: #fff5f5cc;
+    --red-indicator: var(--red-9);
+    --red-track: var(--red-9);
+}
+@supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+        :root, .light, .light-theme {
+            --red-1: color(display-p3 0.998 0.989 0.988);
+            --red-2: color(display-p3 0.995 0.971 0.971);
+            --red-3: color(display-p3 0.985 0.925 0.925);
+            --red-4: color(display-p3 0.999 0.866 0.866);
+            --red-5: color(display-p3 0.984 0.812 0.811);
+            --red-6: color(display-p3 0.955 0.751 0.749);
+            --red-7: color(display-p3 0.915 0.675 0.672);
+            --red-8: color(display-p3 0.872 0.575 0.572);
+            --red-9: color(display-p3 0.83 0.329 0.324);
+            --red-10: color(display-p3 0.798 0.294 0.285);
+            --red-11: color(display-p3 0.744 0.234 0.222);
+            --red-12: color(display-p3 0.36 0.115 0.143);
+            --red-a1: color(display-p3 0.675 0.024 0.024 / 0.012);
+            --red-a2: color(display-p3 0.863 0.024 0.024 / 0.028);
+            --red-a3: color(display-p3 0.792 0.008 0.008 / 0.075);
+            --red-a4: color(display-p3 1 0.008 0.008 / 0.134);
+            --red-a5: color(display-p3 0.918 0.008 0.008 / 0.189);
+            --red-a6: color(display-p3 0.831 0.02 0.004 / 0.251);
+            --red-a7: color(display-p3 0.741 0.016 0.004 / 0.33);
+            --red-a8: color(display-p3 0.698 0.012 0.004 / 0.428);
+            --red-a9: color(display-p3 0.749 0.008 0 / 0.675);
+            --red-a10: color(display-p3 0.714 0.012 0 / 0.714);
+            --red-a11: color(display-p3 0.744 0.234 0.222);
+            --red-a12: color(display-p3 0.36 0.115 0.143);
+            --red-surface: color(display-p3 0.9961 0.9647 0.9647 / 0.8);
+        }
+    }
+}
+.dark, .dark-theme {
+    --red-1: #191111;
+    --red-2: #201314;
+    --red-3: #3b1219;
+    --red-4: #500f1c;
+    --red-5: #611623;
+    --red-6: #72232d;
+    --red-7: #8c333a;
+    --red-8: #b54548;
+    --red-9: #e5484d;
+    --red-10: #ec5d5e;
+    --red-11: #ff9592;
+    --red-12: #ffd1d9;
+    --red-a1: #f4121209;
+    --red-a2: #f22f3e11;
+    --red-a3: #ff173f2d;
+    --red-a4: #fe0a3b44;
+    --red-a5: #ff204756;
+    --red-a6: #ff3e5668;
+    --red-a7: #ff536184;
+    --red-a8: #ff5d61b0;
+    --red-a9: #fe4e54e4;
+    --red-a10: #ff6465eb;
+    --red-a11: #ff9592;
+    --red-a12: #ffd1d9;
+    --red-surface: #2f151780;
+    --red-indicator: var(--red-9);
+    --red-track: var(--red-9);
+}
+@supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+        .dark, .dark-theme {
+            --red-1: color(display-p3 0.093 0.068 0.067);
+            --red-2: color(display-p3 0.118 0.077 0.079);
+            --red-3: color(display-p3 0.211 0.081 0.099);
+            --red-4: color(display-p3 0.287 0.079 0.113);
+            --red-5: color(display-p3 0.348 0.11 0.142);
+            --red-6: color(display-p3 0.414 0.16 0.183);
+            --red-7: color(display-p3 0.508 0.224 0.236);
+            --red-8: color(display-p3 0.659 0.298 0.297);
+            --red-9: color(display-p3 0.83 0.329 0.324);
+            --red-10: color(display-p3 0.861 0.403 0.387);
+            --red-11: color(display-p3 1 0.57 0.55);
+            --red-12: color(display-p3 0.971 0.826 0.852);
+            --red-a1: color(display-p3 0.984 0.071 0.071 / 0.03);
+            --red-a2: color(display-p3 0.996 0.282 0.282 / 0.055);
+            --red-a3: color(display-p3 1 0.169 0.271 / 0.156);
+            --red-a4: color(display-p3 1 0.118 0.267 / 0.236);
+            --red-a5: color(display-p3 1 0.212 0.314 / 0.303);
+            --red-a6: color(display-p3 1 0.318 0.38 / 0.374);
+            --red-a7: color(display-p3 1 0.4 0.424 / 0.475);
+            --red-a8: color(display-p3 1 0.431 0.431 / 0.635);
+            --red-a9: color(display-p3 1 0.388 0.384 / 0.82);
+            --red-a10: color(display-p3 1 0.463 0.447 / 0.853);
+            --red-a11: color(display-p3 1 0.57 0.55);
+            --red-a12: color(display-p3 0.971 0.826 0.852);
+            --red-surface: color(display-p3 0.1647 0.0863 0.0863 / 0.5);
+        }
+    }
+}
+:root {
+    --red-contrast: white;
+}

package/tokens/colors/ruby.css

@@ -0,0 +1,123 @@
+:root, .light, .light-theme {
+    --ruby-1: #fffcfd;
+    --ruby-2: #fff7f8;
+    --ruby-3: #feeaed;
+    --ruby-4: #ffdce1;
+    --ruby-5: #ffced6;
+    --ruby-6: #f8bfc8;
+    --ruby-7: #efacb8;
+    --ruby-8: #e592a3;
+    --ruby-9: #e54666;
+    --ruby-10: #dc3b5d;
+    --ruby-11: #ca244d;
+    --ruby-12: #64172b;
+    --ruby-a1: #ff005503;
+    --ruby-a2: #ff002008;
+    --ruby-a3: #f3002515;
+    --ruby-a4: #ff002523;
+    --ruby-a5: #ff002a31;
+    --ruby-a6: #e4002440;
+    --ruby-a7: #ce002553;
+    --ruby-a8: #c300286d;
+    --ruby-a9: #db002cb9;
+    --ruby-a10: #d2002cc4;
+    --ruby-a11: #c10030db;
+    --ruby-a12: #550016e8;
+    --ruby-surface: #fff5f6cc;
+    --ruby-indicator: var(--ruby-9);
+    --ruby-track: var(--ruby-9);
+}
+@supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+        :root, .light, .light-theme {
+            --ruby-1: color(display-p3 0.998 0.989 0.992);
+            --ruby-2: color(display-p3 0.995 0.971 0.974);
+            --ruby-3: color(display-p3 0.983 0.92 0.928);
+            --ruby-4: color(display-p3 0.987 0.869 0.885);
+            --ruby-5: color(display-p3 0.968 0.817 0.839);
+            --ruby-6: color(display-p3 0.937 0.758 0.786);
+            --ruby-7: color(display-p3 0.897 0.685 0.721);
+            --ruby-8: color(display-p3 0.851 0.588 0.639);
+            --ruby-9: color(display-p3 0.83 0.323 0.408);
+            --ruby-10: color(display-p3 0.795 0.286 0.375);
+            --ruby-11: color(display-p3 0.728 0.211 0.311);
+            --ruby-12: color(display-p3 0.36 0.115 0.171);
+            --ruby-a1: color(display-p3 0.675 0.024 0.349 / 0.012);
+            --ruby-a2: color(display-p3 0.863 0.024 0.024 / 0.028);
+            --ruby-a3: color(display-p3 0.804 0.008 0.11 / 0.079);
+            --ruby-a4: color(display-p3 0.91 0.008 0.125 / 0.13);
+            --ruby-a5: color(display-p3 0.831 0.004 0.133 / 0.185);
+            --ruby-a6: color(display-p3 0.745 0.004 0.118 / 0.244);
+            --ruby-a7: color(display-p3 0.678 0.004 0.114 / 0.314);
+            --ruby-a8: color(display-p3 0.639 0.004 0.125 / 0.412);
+            --ruby-a9: color(display-p3 0.753 0 0.129 / 0.679);
+            --ruby-a10: color(display-p3 0.714 0 0.125 / 0.714);
+            --ruby-a11: color(display-p3 0.728 0.211 0.311);
+            --ruby-a12: color(display-p3 0.36 0.115 0.171);
+            --ruby-surface: color(display-p3 0.9961 0.9647 0.9647 / 0.8);
+        }
+    }
+}
+.dark, .dark-theme {
+    --ruby-1: #191113;
+    --ruby-2: #1e1517;
+    --ruby-3: #3a141e;
+    --ruby-4: #4e1325;
+    --ruby-5: #5e1a2e;
+    --ruby-6: #6f2539;
+    --ruby-7: #883447;
+    --ruby-8: #b3445a;
+    --ruby-9: #e54666;
+    --ruby-10: #ec5a72;
+    --ruby-11: #ff949d;
+    --ruby-12: #fed2e1;
+    --ruby-a1: #f4124a09;
+    --ruby-a2: #fe5a7f0e;
+    --ruby-a3: #ff235d2c;
+    --ruby-a4: #fd195e42;
+    --ruby-a5: #fe2d6b53;
+    --ruby-a6: #ff447665;
+    --ruby-a7: #ff577d80;
+    --ruby-a8: #ff5c7cae;
+    --ruby-a9: #fe4c70e4;
+    --ruby-a10: #ff617beb;
+    --ruby-a11: #ff949d;
+    --ruby-a12: #ffd3e2fe;
+    --ruby-surface: #2b191d80;
+    --ruby-indicator: var(--ruby-9);
+    --ruby-track: var(--ruby-9);
+}
+@supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+        .dark, .dark-theme {
+            --ruby-1: color(display-p3 0.093 0.068 0.074);
+            --ruby-2: color(display-p3 0.113 0.083 0.089);
+            --ruby-3: color(display-p3 0.208 0.088 0.117);
+            --ruby-4: color(display-p3 0.279 0.092 0.147);
+            --ruby-5: color(display-p3 0.337 0.12 0.18);
+            --ruby-6: color(display-p3 0.401 0.166 0.223);
+            --ruby-7: color(display-p3 0.495 0.224 0.281);
+            --ruby-8: color(display-p3 0.652 0.295 0.359);
+            --ruby-9: color(display-p3 0.83 0.323 0.408);
+            --ruby-10: color(display-p3 0.857 0.392 0.455);
+            --ruby-11: color(display-p3 1 0.57 0.59);
+            --ruby-12: color(display-p3 0.968 0.83 0.88);
+            --ruby-a1: color(display-p3 0.984 0.071 0.329 / 0.03);
+            --ruby-a2: color(display-p3 0.992 0.376 0.529 / 0.051);
+            --ruby-a3: color(display-p3 0.996 0.196 0.404 / 0.152);
+            --ruby-a4: color(display-p3 1 0.173 0.416 / 0.227);
+            --ruby-a5: color(display-p3 1 0.259 0.459 / 0.29);
+            --ruby-a6: color(display-p3 1 0.341 0.506 / 0.358);
+            --ruby-a7: color(display-p3 1 0.412 0.541 / 0.458);
+            --ruby-a8: color(display-p3 1 0.431 0.537 / 0.627);
+            --ruby-a9: color(display-p3 1 0.376 0.482 / 0.82);
+            --ruby-a10: color(display-p3 1 0.447 0.522 / 0.849);
+            --ruby-a11: color(display-p3 1 0.57 0.59);
+            --ruby-a12: color(display-p3 0.968 0.83 0.88);
+            --ruby-surface: color(display-p3 0.1569 0.0941 0.1098 / 0.5);
+        }
+    }
+}
+:root {
+    --ruby-contrast: white;
+}

package/tokens/colors/sage.css

@@ -0,0 +1,123 @@
+:root, .light, .light-theme {
+    --sage-1: #fbfdfc;
+    --sage-2: #f7f9f8;
+    --sage-3: #eef1f0;
+    --sage-4: #e6e9e8;
+    --sage-5: #dfe2e0;
+    --sage-6: #d7dad9;
+    --sage-7: #cbcfcd;
+    --sage-8: #b8bcba;
+    --sage-9: #868e8b;
+    --sage-10: #7c8481;
+    --sage-11: #5f6563;
+    --sage-12: #1a211e;
+    --sage-a1: #00804004;
+    --sage-a2: #00402008;
+    --sage-a3: #002d1e11;
+    --sage-a4: #001f1519;
+    --sage-a5: #00180820;
+    --sage-a6: #00140d28;
+    --sage-a7: #00140a34;
+    --sage-a8: #000f0847;
+    --sage-a9: #00110b79;
+    --sage-a10: #00100a83;
+    --sage-a11: #000a07a0;
+    --sage-a12: #000805e5;
+    --sage-surface: #ffffffcc;
+    --sage-indicator: var(--sage-9);
+    --sage-track: var(--sage-9);
+}
+@supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+        :root, .light, .light-theme {
+            --sage-1: color(display-p3 0.986 0.992 0.988);
+            --sage-2: color(display-p3 0.97 0.977 0.974);
+            --sage-3: color(display-p3 0.935 0.944 0.94);
+            --sage-4: color(display-p3 0.904 0.913 0.909);
+            --sage-5: color(display-p3 0.875 0.885 0.88);
+            --sage-6: color(display-p3 0.844 0.854 0.849);
+            --sage-7: color(display-p3 0.8 0.811 0.806);
+            --sage-8: color(display-p3 0.725 0.738 0.732);
+            --sage-9: color(display-p3 0.531 0.556 0.546);
+            --sage-10: color(display-p3 0.492 0.515 0.506);
+            --sage-11: color(display-p3 0.377 0.395 0.389);
+            --sage-12: color(display-p3 0.107 0.129 0.118);
+            --sage-a1: color(display-p3 0.024 0.514 0.267 / 0.016);
+            --sage-a2: color(display-p3 0.02 0.267 0.145 / 0.032);
+            --sage-a3: color(display-p3 0.008 0.184 0.125 / 0.067);
+            --sage-a4: color(display-p3 0.012 0.094 0.051 / 0.095);
+            --sage-a5: color(display-p3 0.008 0.098 0.035 / 0.126);
+            --sage-a6: color(display-p3 0.004 0.078 0.027 / 0.157);
+            --sage-a7: color(display-p3 0 0.059 0.039 / 0.2);
+            --sage-a8: color(display-p3 0.004 0.047 0.031 / 0.275);
+            --sage-a9: color(display-p3 0.004 0.059 0.035 / 0.471);
+            --sage-a10: color(display-p3 0 0.047 0.031 / 0.51);
+            --sage-a11: color(display-p3 0 0.031 0.02 / 0.624);
+            --sage-a12: color(display-p3 0 0.027 0.012 / 0.895);
+            --sage-surface: color(display-p3 1 1 1 / 0.8);
+        }
+    }
+}
+.dark, .dark-theme {
+    --sage-1: #101211;
+    --sage-2: #171918;
+    --sage-3: #202221;
+    --sage-4: #272a29;
+    --sage-5: #2e3130;
+    --sage-6: #373b39;
+    --sage-7: #444947;
+    --sage-8: #5b625f;
+    --sage-9: #63706b;
+    --sage-10: #717d79;
+    --sage-11: #adb5b2;
+    --sage-12: #eceeed;
+    --sage-a1: #00000000;
+    --sage-a2: #f0f2f108;
+    --sage-a3: #f3f5f412;
+    --sage-a4: #f2fefd1a;
+    --sage-a5: #f1fbfa22;
+    --sage-a6: #edfbf42d;
+    --sage-a7: #edfcf73c;
+    --sage-a8: #ebfdf657;
+    --sage-a9: #dffdf266;
+    --sage-a10: #e5fdf674;
+    --sage-a11: #f4fefbb0;
+    --sage-a12: #fdfffeed;
+    --sage-surface: #1e201f80;
+    --sage-indicator: var(--sage-9);
+    --sage-track: var(--sage-9);
+}
+@supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+        .dark, .dark-theme {
+            --sage-1: color(display-p3 0.064 0.07 0.067);
+            --sage-2: color(display-p3 0.092 0.098 0.094);
+            --sage-3: color(display-p3 0.128 0.135 0.131);
+            --sage-4: color(display-p3 0.155 0.164 0.159);
+            --sage-5: color(display-p3 0.183 0.193 0.188);
+            --sage-6: color(display-p3 0.218 0.23 0.224);
+            --sage-7: color(display-p3 0.269 0.285 0.277);
+            --sage-8: color(display-p3 0.362 0.382 0.373);
+            --sage-9: color(display-p3 0.398 0.438 0.421);
+            --sage-10: color(display-p3 0.453 0.49 0.474);
+            --sage-11: color(display-p3 0.685 0.709 0.697);
+            --sage-12: color(display-p3 0.927 0.933 0.93);
+            --sage-a1: color(display-p3 0 0 0 / 0);
+            --sage-a2: color(display-p3 0.976 0.988 0.984 / 0.03);
+            --sage-a3: color(display-p3 0.992 0.945 0.941 / 0.072);
+            --sage-a4: color(display-p3 0.988 0.996 0.992 / 0.102);
+            --sage-a5: color(display-p3 0.992 1 0.996 / 0.131);
+            --sage-a6: color(display-p3 0.973 1 0.976 / 0.173);
+            --sage-a7: color(display-p3 0.957 1 0.976 / 0.233);
+            --sage-a8: color(display-p3 0.957 1 0.984 / 0.334);
+            --sage-a9: color(display-p3 0.902 1 0.957 / 0.397);
+            --sage-a10: color(display-p3 0.929 1 0.973 / 0.452);
+            --sage-a11: color(display-p3 0.969 1 0.988 / 0.688);
+            --sage-a12: color(display-p3 0.992 1 0.996 / 0.929);
+            --sage-surface: color(display-p3 0.1176 0.1255 0.1176 / 0.5);
+        }
+    }
+}
+:root {
+    --sage-contrast: white;
+}

package/tokens/colors/sand.css

@@ -0,0 +1,123 @@
+:root, .light, .light-theme {
+    --sand-1: #fdfdfc;
+    --sand-2: #f9f9f8;
+    --sand-3: #f1f0ef;
+    --sand-4: #e9e8e6;
+    --sand-5: #e2e1de;
+    --sand-6: #dad9d6;
+    --sand-7: #cfceca;
+    --sand-8: #bcbbb5;
+    --sand-9: #8d8d86;
+    --sand-10: #82827c;
+    --sand-11: #63635e;
+    --sand-12: #21201c;
+    --sand-a1: #55550003;
+    --sand-a2: #25250007;
+    --sand-a3: #20100010;
+    --sand-a4: #1f150019;
+    --sand-a5: #1f180021;
+    --sand-a6: #19130029;
+    --sand-a7: #19140035;
+    --sand-a8: #1915014a;
+    --sand-a9: #0f0f0079;
+    --sand-a10: #0c0c0083;
+    --sand-a11: #080800a1;
+    --sand-a12: #060500e3;
+    --sand-surface: #ffffffcc;
+    --sand-indicator: var(--sand-9);
+    --sand-track: var(--sand-9);
+}
+@supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+        :root, .light, .light-theme {
+            --sand-1: color(display-p3 0.992 0.992 0.989);
+            --sand-2: color(display-p3 0.977 0.977 0.973);
+            --sand-3: color(display-p3 0.943 0.942 0.936);
+            --sand-4: color(display-p3 0.913 0.912 0.903);
+            --sand-5: color(display-p3 0.885 0.883 0.873);
+            --sand-6: color(display-p3 0.854 0.852 0.839);
+            --sand-7: color(display-p3 0.813 0.81 0.794);
+            --sand-8: color(display-p3 0.738 0.734 0.713);
+            --sand-9: color(display-p3 0.553 0.553 0.528);
+            --sand-10: color(display-p3 0.511 0.511 0.488);
+            --sand-11: color(display-p3 0.388 0.388 0.37);
+            --sand-12: color(display-p3 0.129 0.126 0.111);
+            --sand-a1: color(display-p3 0.349 0.349 0.024 / 0.012);
+            --sand-a2: color(display-p3 0.161 0.161 0.024 / 0.028);
+            --sand-a3: color(display-p3 0.067 0.067 0.008 / 0.063);
+            --sand-a4: color(display-p3 0.129 0.129 0.012 / 0.099);
+            --sand-a5: color(display-p3 0.098 0.067 0.008 / 0.126);
+            --sand-a6: color(display-p3 0.102 0.075 0.004 / 0.161);
+            --sand-a7: color(display-p3 0.098 0.098 0.004 / 0.208);
+            --sand-a8: color(display-p3 0.086 0.075 0.004 / 0.287);
+            --sand-a9: color(display-p3 0.051 0.051 0.004 / 0.471);
+            --sand-a10: color(display-p3 0.047 0.047 0 / 0.514);
+            --sand-a11: color(display-p3 0.031 0.031 0 / 0.632);
+            --sand-a12: color(display-p3 0.024 0.02 0 / 0.891);
+            --sand-surface: color(display-p3 1 1 1 / 0.8);
+        }
+    }
+}
+.dark, .dark-theme {
+    --sand-1: #111110;
+    --sand-2: #191918;
+    --sand-3: #222221;
+    --sand-4: #2a2a28;
+    --sand-5: #31312e;
+    --sand-6: #3b3a37;
+    --sand-7: #494844;
+    --sand-8: #62605b;
+    --sand-9: #6f6d66;
+    --sand-10: #7c7b74;
+    --sand-11: #b5b3ad;
+    --sand-12: #eeeeec;
+    --sand-a1: #00000000;
+    --sand-a2: #f4f4f309;
+    --sand-a3: #f6f6f513;
+    --sand-a4: #fefef31b;
+    --sand-a5: #fbfbeb23;
+    --sand-a6: #fffaed2d;
+    --sand-a7: #fffbed3c;
+    --sand-a8: #fff9eb57;
+    --sand-a9: #fffae965;
+    --sand-a10: #fffdee73;
+    --sand-a11: #fffcf4b0;
+    --sand-a12: #fffffded;
+    --sand-surface: #21212080;
+    --sand-indicator: var(--sand-9);
+    --sand-track: var(--sand-9);
+}
+@supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+        .dark, .dark-theme {
+            --sand-1: color(display-p3 0.067 0.067 0.063);
+            --sand-2: color(display-p3 0.098 0.098 0.094);
+            --sand-3: color(display-p3 0.135 0.135 0.129);
+            --sand-4: color(display-p3 0.164 0.163 0.156);
+            --sand-5: color(display-p3 0.193 0.192 0.183);
+            --sand-6: color(display-p3 0.23 0.229 0.217);
+            --sand-7: color(display-p3 0.285 0.282 0.267);
+            --sand-8: color(display-p3 0.384 0.378 0.357);
+            --sand-9: color(display-p3 0.434 0.428 0.403);
+            --sand-10: color(display-p3 0.487 0.481 0.456);
+            --sand-11: color(display-p3 0.707 0.703 0.68);
+            --sand-12: color(display-p3 0.933 0.933 0.926);
+            --sand-a1: color(display-p3 0 0 0 / 0);
+            --sand-a2: color(display-p3 0.992 0.992 0.988 / 0.034);
+            --sand-a3: color(display-p3 0.996 0.996 0.992 / 0.072);
+            --sand-a4: color(display-p3 0.992 0.992 0.953 / 0.106);
+            --sand-a5: color(display-p3 1 1 0.965 / 0.135);
+            --sand-a6: color(display-p3 1 0.976 0.929 / 0.177);
+            --sand-a7: color(display-p3 1 0.984 0.929 / 0.236);
+            --sand-a8: color(display-p3 1 0.976 0.925 / 0.341);
+            --sand-a9: color(display-p3 1 0.98 0.925 / 0.395);
+            --sand-a10: color(display-p3 1 0.992 0.933 / 0.45);
+            --sand-a11: color(display-p3 1 0.996 0.961 / 0.685);
+            --sand-a12: color(display-p3 1 1 0.992 / 0.929);
+            --sand-surface: color(display-p3 0.1255 0.1255 0.1255 / 0.5);
+        }
+    }
+}
+:root {
+    --sand-contrast: white;
+}