@diskette/palette 0.1.0

package/dist/purple-p3.css

@@ -0,0 +1,95 @@
+@theme static {
+  --color-purple-1: var(--purple-1);
+  --color-purple-2: var(--purple-2);
+  --color-purple-3: var(--purple-3);
+  --color-purple-4: var(--purple-4);
+  --color-purple-5: var(--purple-5);
+  --color-purple-6: var(--purple-6);
+  --color-purple-7: var(--purple-7);
+  --color-purple-8: var(--purple-8);
+  --color-purple-9: var(--purple-9);
+  --color-purple-10: var(--purple-10);
+  --color-purple-11: var(--purple-11);
+  --color-purple-12: var(--purple-12);
+
+  --color-purple-a1: var(--purple-a1);
+  --color-purple-a2: var(--purple-a2);
+  --color-purple-a3: var(--purple-a3);
+  --color-purple-a4: var(--purple-a4);
+  --color-purple-a5: var(--purple-a5);
+  --color-purple-a6: var(--purple-a6);
+  --color-purple-a7: var(--purple-a7);
+  --color-purple-a8: var(--purple-a8);
+  --color-purple-a9: var(--purple-a9);
+  --color-purple-a10: var(--purple-a10);
+  --color-purple-a11: var(--purple-a11);
+  --color-purple-a12: var(--purple-a12);
+
+  --color-purple-contrast: var(--purple-contrast);
+  --color-purple-surface: var(--purple-surface);
+  --color-purple-indicator: var(--purple-indicator);
+  --color-purple-track: var(--purple-track);
+}
+
+:root {
+  --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-contrast: white;
+  --purple-surface: color(display-p3 0.9804 0.9647 0.9922 / 0.8);
+  --purple-indicator: var(--purple-9);
+  --purple-track: var(--purple-9);
+}
+
+.dark {
+  --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);
+}

package/dist/purple-tokens.css

@@ -0,0 +1,32 @@
+[data-accent-color='purple'] {
+  --accent-1: var(--purple-1);
+  --accent-2: var(--purple-2);
+  --accent-3: var(--purple-3);
+  --accent-4: var(--purple-4);
+  --accent-5: var(--purple-5);
+  --accent-6: var(--purple-6);
+  --accent-7: var(--purple-7);
+  --accent-8: var(--purple-8);
+  --accent-9: var(--purple-9);
+  --accent-10: var(--purple-10);
+  --accent-11: var(--purple-11);
+  --accent-12: var(--purple-12);
+
+  --accent-a1: var(--purple-a1);
+  --accent-a2: var(--purple-a2);
+  --accent-a3: var(--purple-a3);
+  --accent-a4: var(--purple-a4);
+  --accent-a5: var(--purple-a5);
+  --accent-a6: var(--purple-a6);
+  --accent-a7: var(--purple-a7);
+  --accent-a8: var(--purple-a8);
+  --accent-a9: var(--purple-a9);
+  --accent-a10: var(--purple-a10);
+  --accent-a11: var(--purple-a11);
+  --accent-a12: var(--purple-a12);
+
+  --accent-contrast: var(--purple-contrast);
+  --accent-surface: var(--purple-surface);
+  --accent-indicator: var(--purple-indicator);
+  --accent-track: var(--purple-track);
+}

package/dist/red-p3.css

@@ -0,0 +1,95 @@
+@theme static {
+  --color-red-1: var(--red-1);
+  --color-red-2: var(--red-2);
+  --color-red-3: var(--red-3);
+  --color-red-4: var(--red-4);
+  --color-red-5: var(--red-5);
+  --color-red-6: var(--red-6);
+  --color-red-7: var(--red-7);
+  --color-red-8: var(--red-8);
+  --color-red-9: var(--red-9);
+  --color-red-10: var(--red-10);
+  --color-red-11: var(--red-11);
+  --color-red-12: var(--red-12);
+
+  --color-red-a1: var(--red-a1);
+  --color-red-a2: var(--red-a2);
+  --color-red-a3: var(--red-a3);
+  --color-red-a4: var(--red-a4);
+  --color-red-a5: var(--red-a5);
+  --color-red-a6: var(--red-a6);
+  --color-red-a7: var(--red-a7);
+  --color-red-a8: var(--red-a8);
+  --color-red-a9: var(--red-a9);
+  --color-red-a10: var(--red-a10);
+  --color-red-a11: var(--red-a11);
+  --color-red-a12: var(--red-a12);
+
+  --color-red-contrast: var(--red-contrast);
+  --color-red-surface: var(--red-surface);
+  --color-red-indicator: var(--red-indicator);
+  --color-red-track: var(--red-track);
+}
+
+:root {
+  --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-contrast: white;
+  --red-surface: color(display-p3 0.9961 0.9647 0.9647 / 0.8);
+  --red-indicator: var(--red-9);
+  --red-track: var(--red-9);
+}
+
+.dark {
+  --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);
+}

package/dist/red-tokens.css

@@ -0,0 +1,32 @@
+[data-accent-color='red'] {
+  --accent-1: var(--red-1);
+  --accent-2: var(--red-2);
+  --accent-3: var(--red-3);
+  --accent-4: var(--red-4);
+  --accent-5: var(--red-5);
+  --accent-6: var(--red-6);
+  --accent-7: var(--red-7);
+  --accent-8: var(--red-8);
+  --accent-9: var(--red-9);
+  --accent-10: var(--red-10);
+  --accent-11: var(--red-11);
+  --accent-12: var(--red-12);
+
+  --accent-a1: var(--red-a1);
+  --accent-a2: var(--red-a2);
+  --accent-a3: var(--red-a3);
+  --accent-a4: var(--red-a4);
+  --accent-a5: var(--red-a5);
+  --accent-a6: var(--red-a6);
+  --accent-a7: var(--red-a7);
+  --accent-a8: var(--red-a8);
+  --accent-a9: var(--red-a9);
+  --accent-a10: var(--red-a10);
+  --accent-a11: var(--red-a11);
+  --accent-a12: var(--red-a12);
+
+  --accent-contrast: var(--red-contrast);
+  --accent-surface: var(--red-surface);
+  --accent-indicator: var(--red-indicator);
+  --accent-track: var(--red-track);
+}

package/dist/ruby-p3.css

@@ -0,0 +1,95 @@
+@theme static {
+  --color-ruby-1: var(--ruby-1);
+  --color-ruby-2: var(--ruby-2);
+  --color-ruby-3: var(--ruby-3);
+  --color-ruby-4: var(--ruby-4);
+  --color-ruby-5: var(--ruby-5);
+  --color-ruby-6: var(--ruby-6);
+  --color-ruby-7: var(--ruby-7);
+  --color-ruby-8: var(--ruby-8);
+  --color-ruby-9: var(--ruby-9);
+  --color-ruby-10: var(--ruby-10);
+  --color-ruby-11: var(--ruby-11);
+  --color-ruby-12: var(--ruby-12);
+
+  --color-ruby-a1: var(--ruby-a1);
+  --color-ruby-a2: var(--ruby-a2);
+  --color-ruby-a3: var(--ruby-a3);
+  --color-ruby-a4: var(--ruby-a4);
+  --color-ruby-a5: var(--ruby-a5);
+  --color-ruby-a6: var(--ruby-a6);
+  --color-ruby-a7: var(--ruby-a7);
+  --color-ruby-a8: var(--ruby-a8);
+  --color-ruby-a9: var(--ruby-a9);
+  --color-ruby-a10: var(--ruby-a10);
+  --color-ruby-a11: var(--ruby-a11);
+  --color-ruby-a12: var(--ruby-a12);
+
+  --color-ruby-contrast: var(--ruby-contrast);
+  --color-ruby-surface: var(--ruby-surface);
+  --color-ruby-indicator: var(--ruby-indicator);
+  --color-ruby-track: var(--ruby-track);
+}
+
+:root {
+  --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-contrast: white;
+  --ruby-surface: color(display-p3 0.9961 0.9647 0.9647 / 0.8);
+  --ruby-indicator: var(--ruby-9);
+  --ruby-track: var(--ruby-9);
+}
+
+.dark {
+  --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);
+}

package/dist/ruby-tokens.css

@@ -0,0 +1,32 @@
+[data-accent-color='ruby'] {
+  --accent-1: var(--ruby-1);
+  --accent-2: var(--ruby-2);
+  --accent-3: var(--ruby-3);
+  --accent-4: var(--ruby-4);
+  --accent-5: var(--ruby-5);
+  --accent-6: var(--ruby-6);
+  --accent-7: var(--ruby-7);
+  --accent-8: var(--ruby-8);
+  --accent-9: var(--ruby-9);
+  --accent-10: var(--ruby-10);
+  --accent-11: var(--ruby-11);
+  --accent-12: var(--ruby-12);
+
+  --accent-a1: var(--ruby-a1);
+  --accent-a2: var(--ruby-a2);
+  --accent-a3: var(--ruby-a3);
+  --accent-a4: var(--ruby-a4);
+  --accent-a5: var(--ruby-a5);
+  --accent-a6: var(--ruby-a6);
+  --accent-a7: var(--ruby-a7);
+  --accent-a8: var(--ruby-a8);
+  --accent-a9: var(--ruby-a9);
+  --accent-a10: var(--ruby-a10);
+  --accent-a11: var(--ruby-a11);
+  --accent-a12: var(--ruby-a12);
+
+  --accent-contrast: var(--ruby-contrast);
+  --accent-surface: var(--ruby-surface);
+  --accent-indicator: var(--ruby-indicator);
+  --accent-track: var(--ruby-track);
+}

package/dist/sage-p3.css

@@ -0,0 +1,95 @@
+@theme static {
+  --color-sage-1: var(--sage-1);
+  --color-sage-2: var(--sage-2);
+  --color-sage-3: var(--sage-3);
+  --color-sage-4: var(--sage-4);
+  --color-sage-5: var(--sage-5);
+  --color-sage-6: var(--sage-6);
+  --color-sage-7: var(--sage-7);
+  --color-sage-8: var(--sage-8);
+  --color-sage-9: var(--sage-9);
+  --color-sage-10: var(--sage-10);
+  --color-sage-11: var(--sage-11);
+  --color-sage-12: var(--sage-12);
+
+  --color-sage-a1: var(--sage-a1);
+  --color-sage-a2: var(--sage-a2);
+  --color-sage-a3: var(--sage-a3);
+  --color-sage-a4: var(--sage-a4);
+  --color-sage-a5: var(--sage-a5);
+  --color-sage-a6: var(--sage-a6);
+  --color-sage-a7: var(--sage-a7);
+  --color-sage-a8: var(--sage-a8);
+  --color-sage-a9: var(--sage-a9);
+  --color-sage-a10: var(--sage-a10);
+  --color-sage-a11: var(--sage-a11);
+  --color-sage-a12: var(--sage-a12);
+
+  --color-sage-contrast: var(--sage-contrast);
+  --color-sage-surface: var(--sage-surface);
+  --color-sage-indicator: var(--sage-indicator);
+  --color-sage-track: var(--sage-track);
+}
+
+:root {
+  --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-contrast: white;
+  --sage-surface: color(display-p3 1 1 1 / 0.8);
+  --sage-indicator: var(--sage-9);
+  --sage-track: var(--sage-9);
+}
+
+.dark {
+  --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);
+}

package/dist/sage-tokens.css

@@ -0,0 +1,32 @@
+[data-accent-color='sage'] {
+  --accent-1: var(--sage-1);
+  --accent-2: var(--sage-2);
+  --accent-3: var(--sage-3);
+  --accent-4: var(--sage-4);
+  --accent-5: var(--sage-5);
+  --accent-6: var(--sage-6);
+  --accent-7: var(--sage-7);
+  --accent-8: var(--sage-8);
+  --accent-9: var(--sage-9);
+  --accent-10: var(--sage-10);
+  --accent-11: var(--sage-11);
+  --accent-12: var(--sage-12);
+
+  --accent-a1: var(--sage-a1);
+  --accent-a2: var(--sage-a2);
+  --accent-a3: var(--sage-a3);
+  --accent-a4: var(--sage-a4);
+  --accent-a5: var(--sage-a5);
+  --accent-a6: var(--sage-a6);
+  --accent-a7: var(--sage-a7);
+  --accent-a8: var(--sage-a8);
+  --accent-a9: var(--sage-a9);
+  --accent-a10: var(--sage-a10);
+  --accent-a11: var(--sage-a11);
+  --accent-a12: var(--sage-a12);
+
+  --accent-contrast: var(--sage-contrast);
+  --accent-surface: var(--sage-surface);
+  --accent-indicator: var(--sage-indicator);
+  --accent-track: var(--sage-track);
+}

package/dist/sand-p3.css

@@ -0,0 +1,95 @@
+@theme static {
+  --color-sand-1: var(--sand-1);
+  --color-sand-2: var(--sand-2);
+  --color-sand-3: var(--sand-3);
+  --color-sand-4: var(--sand-4);
+  --color-sand-5: var(--sand-5);
+  --color-sand-6: var(--sand-6);
+  --color-sand-7: var(--sand-7);
+  --color-sand-8: var(--sand-8);
+  --color-sand-9: var(--sand-9);
+  --color-sand-10: var(--sand-10);
+  --color-sand-11: var(--sand-11);
+  --color-sand-12: var(--sand-12);
+
+  --color-sand-a1: var(--sand-a1);
+  --color-sand-a2: var(--sand-a2);
+  --color-sand-a3: var(--sand-a3);
+  --color-sand-a4: var(--sand-a4);
+  --color-sand-a5: var(--sand-a5);
+  --color-sand-a6: var(--sand-a6);
+  --color-sand-a7: var(--sand-a7);
+  --color-sand-a8: var(--sand-a8);
+  --color-sand-a9: var(--sand-a9);
+  --color-sand-a10: var(--sand-a10);
+  --color-sand-a11: var(--sand-a11);
+  --color-sand-a12: var(--sand-a12);
+
+  --color-sand-contrast: var(--sand-contrast);
+  --color-sand-surface: var(--sand-surface);
+  --color-sand-indicator: var(--sand-indicator);
+  --color-sand-track: var(--sand-track);
+}
+
+:root {
+  --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-contrast: white;
+  --sand-surface: color(display-p3 1 1 1 / 0.8);
+  --sand-indicator: var(--sand-9);
+  --sand-track: var(--sand-9);
+}
+
+.dark {
+  --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);
+}

package/dist/sand-tokens.css

@@ -0,0 +1,32 @@
+[data-accent-color='sand'] {
+  --accent-1: var(--sand-1);
+  --accent-2: var(--sand-2);
+  --accent-3: var(--sand-3);
+  --accent-4: var(--sand-4);
+  --accent-5: var(--sand-5);
+  --accent-6: var(--sand-6);
+  --accent-7: var(--sand-7);
+  --accent-8: var(--sand-8);
+  --accent-9: var(--sand-9);
+  --accent-10: var(--sand-10);
+  --accent-11: var(--sand-11);
+  --accent-12: var(--sand-12);
+
+  --accent-a1: var(--sand-a1);
+  --accent-a2: var(--sand-a2);
+  --accent-a3: var(--sand-a3);
+  --accent-a4: var(--sand-a4);
+  --accent-a5: var(--sand-a5);
+  --accent-a6: var(--sand-a6);
+  --accent-a7: var(--sand-a7);
+  --accent-a8: var(--sand-a8);
+  --accent-a9: var(--sand-a9);
+  --accent-a10: var(--sand-a10);
+  --accent-a11: var(--sand-a11);
+  --accent-a12: var(--sand-a12);
+
+  --accent-contrast: var(--sand-contrast);
+  --accent-surface: var(--sand-surface);
+  --accent-indicator: var(--sand-indicator);
+  --accent-track: var(--sand-track);
+}