@nattstack/ui 0.1.2 → 0.1.4

package/dist/colors/accent/ruby.css

@@ -0,0 +1,67 @@
+[data-color-accent="ruby"] {
+  --color-accent-1: light-dark(#fffcfd, #191113);
+  --color-accent-2: light-dark(#fff7f8, #1e1517);
+  --color-accent-3: light-dark(#feeaed, #3a141e);
+  --color-accent-4: light-dark(#ffdce1, #4e1325);
+  --color-accent-5: light-dark(#ffced6, #5e1a2e);
+  --color-accent-6: light-dark(#f8bfc8, #6f2539);
+  --color-accent-7: light-dark(#efacb8, #883447);
+  --color-accent-8: light-dark(#e592a3, #b3445a);
+  --color-accent-9: light-dark(#e54666, #e54666);
+  --color-accent-10: light-dark(#dc3b5d, #ec5a72);
+  --color-accent-11: light-dark(#ca244d, #ff949d);
+  --color-accent-12: light-dark(#64172b, #fed2e1);
+}
+
+@media (color-gamut: p3) {
+  [data-color-accent="ruby"] {
+    --color-accent-1: light-dark(
+      color(display-p3 0.998 0.989 0.992),
+      color(display-p3 0.093 0.068 0.074)
+    );
+    --color-accent-2: light-dark(
+      color(display-p3 0.995 0.971 0.974),
+      color(display-p3 0.113 0.083 0.089)
+    );
+    --color-accent-3: light-dark(
+      color(display-p3 0.983 0.92 0.928),
+      color(display-p3 0.208 0.088 0.117)
+    );
+    --color-accent-4: light-dark(
+      color(display-p3 0.987 0.869 0.885),
+      color(display-p3 0.279 0.092 0.147)
+    );
+    --color-accent-5: light-dark(
+      color(display-p3 0.968 0.817 0.839),
+      color(display-p3 0.337 0.12 0.18)
+    );
+    --color-accent-6: light-dark(
+      color(display-p3 0.937 0.758 0.786),
+      color(display-p3 0.401 0.166 0.223)
+    );
+    --color-accent-7: light-dark(
+      color(display-p3 0.897 0.685 0.721),
+      color(display-p3 0.495 0.224 0.281)
+    );
+    --color-accent-8: light-dark(
+      color(display-p3 0.851 0.588 0.639),
+      color(display-p3 0.652 0.295 0.359)
+    );
+    --color-accent-9: light-dark(
+      color(display-p3 0.83 0.323 0.408),
+      color(display-p3 0.83 0.323 0.408)
+    );
+    --color-accent-10: light-dark(
+      color(display-p3 0.795 0.286 0.375),
+      color(display-p3 0.857 0.392 0.455)
+    );
+    --color-accent-11: light-dark(
+      color(display-p3 0.728 0.211 0.311),
+      color(display-p3 1 0.57 0.59)
+    );
+    --color-accent-12: light-dark(
+      color(display-p3 0.36 0.115 0.171),
+      color(display-p3 0.968 0.83 0.88)
+    );
+  }
+}

package/dist/colors/accent/sky.css

@@ -0,0 +1,67 @@
+[data-color-accent="sky"] {
+  --color-accent-1: light-dark(#f9feff, #0d141f);
+  --color-accent-2: light-dark(#f1fafd, #111a27);
+  --color-accent-3: light-dark(#e1f6fd, #112840);
+  --color-accent-4: light-dark(#d1f0fa, #113555);
+  --color-accent-5: light-dark(#bee7f5, #154467);
+  --color-accent-6: light-dark(#a9daed, #1b537b);
+  --color-accent-7: light-dark(#8dcae3, #1f6692);
+  --color-accent-8: light-dark(#60b3d7, #197cae);
+  --color-accent-9: light-dark(#7ce2fe, #7ce2fe);
+  --color-accent-10: light-dark(#74daf8, #a8eeff);
+  --color-accent-11: light-dark(#00749e, #75c7f0);
+  --color-accent-12: light-dark(#1d3e56, #c2f3ff);
+}
+
+@media (color-gamut: p3) {
+  [data-color-accent="sky"] {
+    --color-accent-1: light-dark(
+      color(display-p3 0.98 0.995 0.999),
+      color(display-p3 0.056 0.078 0.116)
+    );
+    --color-accent-2: light-dark(
+      color(display-p3 0.953 0.98 0.99),
+      color(display-p3 0.075 0.101 0.149)
+    );
+    --color-accent-3: light-dark(
+      color(display-p3 0.899 0.963 0.989),
+      color(display-p3 0.089 0.154 0.244)
+    );
+    --color-accent-4: light-dark(
+      color(display-p3 0.842 0.937 0.977),
+      color(display-p3 0.106 0.207 0.323)
+    );
+    --color-accent-5: light-dark(
+      color(display-p3 0.777 0.9 0.954),
+      color(display-p3 0.135 0.261 0.394)
+    );
+    --color-accent-6: light-dark(
+      color(display-p3 0.701 0.851 0.921),
+      color(display-p3 0.17 0.322 0.469)
+    );
+    --color-accent-7: light-dark(
+      color(display-p3 0.604 0.785 0.879),
+      color(display-p3 0.205 0.394 0.557)
+    );
+    --color-accent-8: light-dark(
+      color(display-p3 0.457 0.696 0.829),
+      color(display-p3 0.232 0.48 0.665)
+    );
+    --color-accent-9: light-dark(
+      color(display-p3 0.585 0.877 0.983),
+      color(display-p3 0.585 0.877 0.983)
+    );
+    --color-accent-10: light-dark(
+      color(display-p3 0.555 0.845 0.959),
+      color(display-p3 0.718 0.925 0.991)
+    );
+    --color-accent-11: light-dark(
+      color(display-p3 0.193 0.448 0.605),
+      color(display-p3 0.536 0.772 0.924)
+    );
+    --color-accent-12: light-dark(
+      color(display-p3 0.145 0.241 0.329),
+      color(display-p3 0.799 0.947 0.993)
+    );
+  }
+}

package/dist/colors/accent/teal.css

@@ -0,0 +1,67 @@
+[data-color-accent="teal"] {
+  --color-accent-1: light-dark(#fafefd, #0d1514);
+  --color-accent-2: light-dark(#f3fbf9, #111c1b);
+  --color-accent-3: light-dark(#e0f8f3, #0d2d2a);
+  --color-accent-4: light-dark(#ccf3ea, #023b37);
+  --color-accent-5: light-dark(#b8eae0, #084843);
+  --color-accent-6: light-dark(#a1ded2, #145750);
+  --color-accent-7: light-dark(#83cdc1, #1c6961);
+  --color-accent-8: light-dark(#53b9ab, #207e73);
+  --color-accent-9: light-dark(#12a594, #12a594);
+  --color-accent-10: light-dark(#0d9b8a, #0eb39e);
+  --color-accent-11: light-dark(#008573, #0bd8b6);
+  --color-accent-12: light-dark(#0d3d38, #adf0dd);
+}
+
+@media (color-gamut: p3) {
+  [data-color-accent="teal"] {
+    --color-accent-1: light-dark(
+      color(display-p3 0.983 0.996 0.992),
+      color(display-p3 0.059 0.083 0.079)
+    );
+    --color-accent-2: light-dark(
+      color(display-p3 0.958 0.983 0.976),
+      color(display-p3 0.075 0.11 0.107)
+    );
+    --color-accent-3: light-dark(
+      color(display-p3 0.895 0.971 0.952),
+      color(display-p3 0.087 0.175 0.165)
+    );
+    --color-accent-4: light-dark(
+      color(display-p3 0.831 0.949 0.92),
+      color(display-p3 0.087 0.227 0.214)
+    );
+    --color-accent-5: light-dark(
+      color(display-p3 0.761 0.914 0.878),
+      color(display-p3 0.12 0.277 0.261)
+    );
+    --color-accent-6: light-dark(
+      color(display-p3 0.682 0.864 0.825),
+      color(display-p3 0.162 0.335 0.314)
+    );
+    --color-accent-7: light-dark(
+      color(display-p3 0.581 0.798 0.756),
+      color(display-p3 0.205 0.406 0.379)
+    );
+    --color-accent-8: light-dark(
+      color(display-p3 0.433 0.716 0.671),
+      color(display-p3 0.245 0.489 0.453)
+    );
+    --color-accent-9: light-dark(
+      color(display-p3 0.297 0.637 0.581),
+      color(display-p3 0.297 0.637 0.581)
+    );
+    --color-accent-10: light-dark(
+      color(display-p3 0.275 0.599 0.542),
+      color(display-p3 0.319 0.69 0.62)
+    );
+    --color-accent-11: light-dark(
+      color(display-p3 0.08 0.5 0.43),
+      color(display-p3 0.388 0.835 0.719)
+    );
+    --color-accent-12: light-dark(
+      color(display-p3 0.11 0.235 0.219),
+      color(display-p3 0.734 0.934 0.87)
+    );
+  }
+}

package/dist/colors/accent/tomato.css

@@ -0,0 +1,67 @@
+[data-color-accent="tomato"] {
+  --color-accent-1: light-dark(#fffcfc, #181111);
+  --color-accent-2: light-dark(#fff8f7, #1f1513);
+  --color-accent-3: light-dark(#feebe7, #391714);
+  --color-accent-4: light-dark(#ffdcd3, #4e1511);
+  --color-accent-5: light-dark(#ffcdc2, #5e1c16);
+  --color-accent-6: light-dark(#fdbdaf, #6e2920);
+  --color-accent-7: light-dark(#f5a898, #853a2d);
+  --color-accent-8: light-dark(#ec8e7b, #ac4d39);
+  --color-accent-9: light-dark(#e54d2e, #e54d2e);
+  --color-accent-10: light-dark(#dd4425, #ec6142);
+  --color-accent-11: light-dark(#d13415, #ff977d);
+  --color-accent-12: light-dark(#5c271f, #fbd3cb);
+}
+
+@media (color-gamut: p3) {
+  [data-color-accent="tomato"] {
+    --color-accent-1: light-dark(
+      color(display-p3 0.998 0.989 0.988),
+      color(display-p3 0.09 0.068 0.067)
+    );
+    --color-accent-2: light-dark(
+      color(display-p3 0.994 0.974 0.969),
+      color(display-p3 0.115 0.084 0.076)
+    );
+    --color-accent-3: light-dark(
+      color(display-p3 0.985 0.924 0.909),
+      color(display-p3 0.205 0.097 0.083)
+    );
+    --color-accent-4: light-dark(
+      color(display-p3 0.996 0.868 0.835),
+      color(display-p3 0.282 0.099 0.077)
+    );
+    --color-accent-5: light-dark(
+      color(display-p3 0.98 0.812 0.77),
+      color(display-p3 0.339 0.129 0.101)
+    );
+    --color-accent-6: light-dark(
+      color(display-p3 0.953 0.75 0.698),
+      color(display-p3 0.398 0.179 0.141)
+    );
+    --color-accent-7: light-dark(
+      color(display-p3 0.917 0.673 0.611),
+      color(display-p3 0.487 0.245 0.194)
+    );
+    --color-accent-8: light-dark(
+      color(display-p3 0.875 0.575 0.502),
+      color(display-p3 0.629 0.322 0.248)
+    );
+    --color-accent-9: light-dark(
+      color(display-p3 0.831 0.345 0.231),
+      color(display-p3 0.831 0.345 0.231)
+    );
+    --color-accent-10: light-dark(
+      color(display-p3 0.802 0.313 0.2),
+      color(display-p3 0.862 0.415 0.298)
+    );
+    --color-accent-11: light-dark(
+      color(display-p3 0.755 0.259 0.152),
+      color(display-p3 1 0.585 0.455)
+    );
+    --color-accent-12: light-dark(
+      color(display-p3 0.335 0.165 0.132),
+      color(display-p3 0.959 0.833 0.802)
+    );
+  }
+}

package/dist/colors/accent/violet.css

@@ -0,0 +1,67 @@
+[data-color-accent="violet"] {
+  --color-accent-1: light-dark(#fdfcfe, #14121f);
+  --color-accent-2: light-dark(#faf8ff, #1b1525);
+  --color-accent-3: light-dark(#f4f0fe, #291f43);
+  --color-accent-4: light-dark(#ebe4ff, #33255b);
+  --color-accent-5: light-dark(#e1d9ff, #3c2e69);
+  --color-accent-6: light-dark(#d4cafe, #473876);
+  --color-accent-7: light-dark(#c2b5f5, #56468b);
+  --color-accent-8: light-dark(#aa99ec, #6958ad);
+  --color-accent-9: light-dark(#6e56cf, #6e56cf);
+  --color-accent-10: light-dark(#654dc4, #7d66d9);
+  --color-accent-11: light-dark(#6550b9, #baa7ff);
+  --color-accent-12: light-dark(#2f265f, #e2ddfe);
+}
+
+@media (color-gamut: p3) {
+  [data-color-accent="violet"] {
+    --color-accent-1: light-dark(
+      color(display-p3 0.991 0.988 0.995),
+      color(display-p3 0.077 0.071 0.118)
+    );
+    --color-accent-2: light-dark(
+      color(display-p3 0.978 0.974 0.998),
+      color(display-p3 0.101 0.084 0.141)
+    );
+    --color-accent-3: light-dark(
+      color(display-p3 0.953 0.943 0.993),
+      color(display-p3 0.154 0.123 0.256)
+    );
+    --color-accent-4: light-dark(
+      color(display-p3 0.916 0.897 1),
+      color(display-p3 0.191 0.148 0.345)
+    );
+    --color-accent-5: light-dark(
+      color(display-p3 0.876 0.851 1),
+      color(display-p3 0.226 0.182 0.396)
+    );
+    --color-accent-6: light-dark(
+      color(display-p3 0.825 0.793 0.981),
+      color(display-p3 0.269 0.223 0.449)
+    );
+    --color-accent-7: light-dark(
+      color(display-p3 0.752 0.712 0.943),
+      color(display-p3 0.326 0.277 0.53)
+    );
+    --color-accent-8: light-dark(
+      color(display-p3 0.654 0.602 0.902),
+      color(display-p3 0.399 0.346 0.656)
+    );
+    --color-accent-9: light-dark(
+      color(display-p3 0.417 0.341 0.784),
+      color(display-p3 0.417 0.341 0.784)
+    );
+    --color-accent-10: light-dark(
+      color(display-p3 0.381 0.306 0.741),
+      color(display-p3 0.477 0.402 0.823)
+    );
+    --color-accent-11: light-dark(
+      color(display-p3 0.383 0.317 0.702),
+      color(display-p3 0.72 0.65 1)
+    );
+    --color-accent-12: light-dark(
+      color(display-p3 0.179 0.15 0.359),
+      color(display-p3 0.883 0.867 0.986)
+    );
+  }
+}

package/dist/colors/accent/yellow.css

@@ -0,0 +1,61 @@
+[data-color-accent="yellow"] {
+  --color-accent-1: light-dark(#fdfdf9, #14120b);
+  --color-accent-2: light-dark(#fefce9, #1b180f);
+  --color-accent-3: light-dark(#fffab8, #2d2305);
+  --color-accent-4: light-dark(#fff394, #362b00);
+  --color-accent-5: light-dark(#ffe770, #433500);
+  --color-accent-6: light-dark(#f3d768, #524202);
+  --color-accent-7: light-dark(#e4c767, #665417);
+  --color-accent-8: light-dark(#d5ae39, #836a21);
+  --color-accent-9: light-dark(#ffe629, #ffe629);
+  --color-accent-10: light-dark(#ffdc00, #ffff57);
+  --color-accent-11: light-dark(#9e6c00, #f5e147);
+  --color-accent-12: light-dark(#473b1f, #f6eeb4);
+}
+
+@media (color-gamut: p3) {
+  [data-color-accent="yellow"] {
+    --color-accent-1: light-dark(
+      color(display-p3 0.992 0.992 0.978),
+      color(display-p3 0.078 0.069 0.047)
+    );
+    --color-accent-2: light-dark(
+      color(display-p3 0.995 0.99 0.922),
+      color(display-p3 0.103 0.094 0.063)
+    );
+    --color-accent-3: light-dark(
+      color(display-p3 0.997 0.982 0.749),
+      color(display-p3 0.168 0.137 0.039)
+    );
+    --color-accent-4: light-dark(
+      color(display-p3 0.992 0.953 0.627),
+      color(display-p3 0.209 0.169 0)
+    );
+    --color-accent-5: light-dark(
+      color(display-p3 0.984 0.91 0.51),
+      color(display-p3 0.255 0.209 0)
+    );
+    --color-accent-6: light-dark(
+      color(display-p3 0.934 0.847 0.474),
+      color(display-p3 0.31 0.261 0.07)
+    );
+    --color-accent-7: light-dark(
+      color(display-p3 0.876 0.785 0.46),
+      color(display-p3 0.389 0.331 0.135)
+    );
+    --color-accent-8: light-dark(
+      color(display-p3 0.811 0.689 0.313),
+      color(display-p3 0.497 0.42 0.182)
+    );
+    --color-accent-9: light-dark(color(display-p3 1 0.92 0.22), color(display-p3 1 0.92 0.22));
+    --color-accent-10: light-dark(color(display-p3 0.977 0.868 0.291), color(display-p3 1 1 0.456));
+    --color-accent-11: light-dark(
+      color(display-p3 0.6 0.44 0),
+      color(display-p3 0.948 0.885 0.392)
+    );
+    --color-accent-12: light-dark(
+      color(display-p3 0.271 0.233 0.137),
+      color(display-p3 0.959 0.934 0.731)
+    );
+  }
+}

package/dist/colors/color-scheme.css

@@ -0,0 +1,7 @@
+[data-color-theme="light"] {
+  color-scheme: light;
+}
+
+[data-color-theme="dark"] {
+  color-scheme: dark;
+}

package/dist/colors/index.css

@@ -1,5 +1,4 @@
-/* Order matters */
-@import "./root.css";
-@import "./root-p3.css";
-@import "./gray.css";
-@import "./primary.css";
+@import "./color-scheme.css";
+@import "./neutral/index.css";
+@import "./accent/index.css";
+@import "./semantic/index.css";

package/dist/colors/neutral/gray.css

@@ -0,0 +1,67 @@
+[data-color-neutral="gray"] {
+  --color-neutral-1: light-dark(#fcfcfc, #111111);
+  --color-neutral-2: light-dark(#f9f9f9, #191919);
+  --color-neutral-3: light-dark(#f0f0f0, #222222);
+  --color-neutral-4: light-dark(#e8e8e8, #2a2a2a);
+  --color-neutral-5: light-dark(#e0e0e0, #313131);
+  --color-neutral-6: light-dark(#d9d9d9, #3a3a3a);
+  --color-neutral-7: light-dark(#cecece, #484848);
+  --color-neutral-8: light-dark(#bbbbbb, #606060);
+  --color-neutral-9: light-dark(#8d8d8d, #6e6e6e);
+  --color-neutral-10: light-dark(#838383, #7b7b7b);
+  --color-neutral-11: light-dark(#646464, #b4b4b4);
+  --color-neutral-12: light-dark(#202020, #eeeeee);
+}
+
+@media (color-gamut: p3) {
+  [data-color-neutral="gray"] {
+    --color-neutral-1: light-dark(
+      color(display-p3 0.988 0.988 0.988),
+      color(display-p3 0.067 0.067 0.067)
+    );
+    --color-neutral-2: light-dark(
+      color(display-p3 0.975 0.975 0.975),
+      color(display-p3 0.098 0.098 0.098)
+    );
+    --color-neutral-3: light-dark(
+      color(display-p3 0.939 0.939 0.939),
+      color(display-p3 0.135 0.135 0.135)
+    );
+    --color-neutral-4: light-dark(
+      color(display-p3 0.908 0.908 0.908),
+      color(display-p3 0.163 0.163 0.163)
+    );
+    --color-neutral-5: light-dark(
+      color(display-p3 0.88 0.88 0.88),
+      color(display-p3 0.192 0.192 0.192)
+    );
+    --color-neutral-6: light-dark(
+      color(display-p3 0.849 0.849 0.849),
+      color(display-p3 0.228 0.228 0.228)
+    );
+    --color-neutral-7: light-dark(
+      color(display-p3 0.807 0.807 0.807),
+      color(display-p3 0.283 0.283 0.283)
+    );
+    --color-neutral-8: light-dark(
+      color(display-p3 0.732 0.732 0.732),
+      color(display-p3 0.375 0.375 0.375)
+    );
+    --color-neutral-9: light-dark(
+      color(display-p3 0.553 0.553 0.553),
+      color(display-p3 0.431 0.431 0.431)
+    );
+    --color-neutral-10: light-dark(
+      color(display-p3 0.512 0.512 0.512),
+      color(display-p3 0.484 0.484 0.484)
+    );
+    --color-neutral-11: light-dark(
+      color(display-p3 0.392 0.392 0.392),
+      color(display-p3 0.706 0.706 0.706)
+    );
+    --color-neutral-12: light-dark(
+      color(display-p3 0.125 0.125 0.125),
+      color(display-p3 0.933 0.933 0.933)
+    );
+  }
+}

package/dist/colors/neutral/index.css

@@ -0,0 +1,6 @@
+@import "./gray.css";
+@import "./mauve.css";
+@import "./slate.css";
+@import "./sage.css";
+@import "./olive.css";
+@import "./sand.css";

package/dist/colors/neutral/mauve.css

@@ -0,0 +1,67 @@
+[data-color-neutral="mauve"] {
+  --color-neutral-1: light-dark(#fdfcfd, #121113);
+  --color-neutral-2: light-dark(#faf9fb, #1a191b);
+  --color-neutral-3: light-dark(#f2eff3, #232225);
+  --color-neutral-4: light-dark(#eae7ec, #2b292d);
+  --color-neutral-5: light-dark(#e3dfe6, #323035);
+  --color-neutral-6: light-dark(#dbd8e0, #3c393f);
+  --color-neutral-7: light-dark(#d0cdd7, #49474e);
+  --color-neutral-8: light-dark(#bcbac7, #625f69);
+  --color-neutral-9: light-dark(#8e8c99, #6f6d78);
+  --color-neutral-10: light-dark(#84828e, #7c7a85);
+  --color-neutral-11: light-dark(#65636d, #b5b2bc);
+  --color-neutral-12: light-dark(#211f26, #eeeef0);
+}
+
+@media (color-gamut: p3) {
+  [data-color-neutral="mauve"] {
+    --color-neutral-1: light-dark(
+      color(display-p3 0.991 0.988 0.992),
+      color(display-p3 0.07 0.067 0.074)
+    );
+    --color-neutral-2: light-dark(
+      color(display-p3 0.98 0.976 0.984),
+      color(display-p3 0.101 0.098 0.105)
+    );
+    --color-neutral-3: light-dark(
+      color(display-p3 0.946 0.938 0.952),
+      color(display-p3 0.138 0.134 0.144)
+    );
+    --color-neutral-4: light-dark(
+      color(display-p3 0.915 0.906 0.925),
+      color(display-p3 0.167 0.161 0.175)
+    );
+    --color-neutral-5: light-dark(
+      color(display-p3 0.886 0.876 0.901),
+      color(display-p3 0.196 0.189 0.206)
+    );
+    --color-neutral-6: light-dark(
+      color(display-p3 0.856 0.846 0.875),
+      color(display-p3 0.232 0.225 0.245)
+    );
+    --color-neutral-7: light-dark(
+      color(display-p3 0.814 0.804 0.84),
+      color(display-p3 0.286 0.277 0.302)
+    );
+    --color-neutral-8: light-dark(
+      color(display-p3 0.735 0.728 0.777),
+      color(display-p3 0.383 0.373 0.408)
+    );
+    --color-neutral-9: light-dark(
+      color(display-p3 0.555 0.549 0.596),
+      color(display-p3 0.434 0.428 0.467)
+    );
+    --color-neutral-10: light-dark(
+      color(display-p3 0.514 0.508 0.552),
+      color(display-p3 0.487 0.48 0.519)
+    );
+    --color-neutral-11: light-dark(
+      color(display-p3 0.395 0.388 0.424),
+      color(display-p3 0.707 0.7 0.735)
+    );
+    --color-neutral-12: light-dark(
+      color(display-p3 0.128 0.122 0.147),
+      color(display-p3 0.933 0.933 0.94)
+    );
+  }
+}

package/dist/colors/neutral/olive.css

@@ -0,0 +1,67 @@
+[data-color-neutral="olive"] {
+  --color-neutral-1: light-dark(#fcfdfc, #111210);
+  --color-neutral-2: light-dark(#f8faf8, #181917);
+  --color-neutral-3: light-dark(#eff1ef, #212220);
+  --color-neutral-4: light-dark(#e7e9e7, #282a27);
+  --color-neutral-5: light-dark(#dfe2df, #2f312e);
+  --color-neutral-6: light-dark(#d7dad7, #383a36);
+  --color-neutral-7: light-dark(#cccfcc, #454843);
+  --color-neutral-8: light-dark(#b9bcb8, #5c625b);
+  --color-neutral-9: light-dark(#898e87, #687066);
+  --color-neutral-10: light-dark(#7f847d, #767d74);
+  --color-neutral-11: light-dark(#60655f, #afb5ad);
+  --color-neutral-12: light-dark(#1d211c, #eceeec);
+}
+
+@media (color-gamut: p3) {
+  [data-color-neutral="olive"] {
+    --color-neutral-1: light-dark(
+      color(display-p3 0.989 0.992 0.989),
+      color(display-p3 0.067 0.07 0.063)
+    );
+    --color-neutral-2: light-dark(
+      color(display-p3 0.974 0.98 0.973),
+      color(display-p3 0.095 0.098 0.091)
+    );
+    --color-neutral-3: light-dark(
+      color(display-p3 0.939 0.945 0.937),
+      color(display-p3 0.131 0.135 0.126)
+    );
+    --color-neutral-4: light-dark(
+      color(display-p3 0.907 0.914 0.905),
+      color(display-p3 0.158 0.163 0.153)
+    );
+    --color-neutral-5: light-dark(
+      color(display-p3 0.878 0.885 0.875),
+      color(display-p3 0.186 0.192 0.18)
+    );
+    --color-neutral-6: light-dark(
+      color(display-p3 0.846 0.855 0.843),
+      color(display-p3 0.221 0.229 0.215)
+    );
+    --color-neutral-7: light-dark(
+      color(display-p3 0.803 0.812 0.8),
+      color(display-p3 0.273 0.284 0.266)
+    );
+    --color-neutral-8: light-dark(
+      color(display-p3 0.727 0.738 0.723),
+      color(display-p3 0.365 0.382 0.359)
+    );
+    --color-neutral-9: light-dark(
+      color(display-p3 0.541 0.556 0.532),
+      color(display-p3 0.414 0.438 0.404)
+    );
+    --color-neutral-10: light-dark(
+      color(display-p3 0.5 0.515 0.491),
+      color(display-p3 0.467 0.49 0.458)
+    );
+    --color-neutral-11: light-dark(
+      color(display-p3 0.38 0.395 0.374),
+      color(display-p3 0.69 0.709 0.682)
+    );
+    --color-neutral-12: light-dark(
+      color(display-p3 0.117 0.129 0.111),
+      color(display-p3 0.927 0.933 0.926)
+    );
+  }
+}

package/dist/colors/neutral/sage.css

@@ -0,0 +1,67 @@
+[data-color-neutral="sage"] {
+  --color-neutral-1: light-dark(#fbfdfc, #101211);
+  --color-neutral-2: light-dark(#f7f9f8, #171918);
+  --color-neutral-3: light-dark(#eef1f0, #202221);
+  --color-neutral-4: light-dark(#e6e9e8, #272a29);
+  --color-neutral-5: light-dark(#dfe2e0, #2e3130);
+  --color-neutral-6: light-dark(#d7dad9, #373b39);
+  --color-neutral-7: light-dark(#cbcfcd, #444947);
+  --color-neutral-8: light-dark(#b8bcba, #5b625f);
+  --color-neutral-9: light-dark(#868e8b, #63706b);
+  --color-neutral-10: light-dark(#7c8481, #717d79);
+  --color-neutral-11: light-dark(#5f6563, #adb5b2);
+  --color-neutral-12: light-dark(#1a211e, #eceeed);
+}
+
+@media (color-gamut: p3) {
+  [data-color-neutral="sage"] {
+    --color-neutral-1: light-dark(
+      color(display-p3 0.986 0.992 0.988),
+      color(display-p3 0.064 0.07 0.067)
+    );
+    --color-neutral-2: light-dark(
+      color(display-p3 0.97 0.977 0.974),
+      color(display-p3 0.092 0.098 0.094)
+    );
+    --color-neutral-3: light-dark(
+      color(display-p3 0.935 0.944 0.94),
+      color(display-p3 0.128 0.135 0.131)
+    );
+    --color-neutral-4: light-dark(
+      color(display-p3 0.904 0.913 0.909),
+      color(display-p3 0.155 0.164 0.159)
+    );
+    --color-neutral-5: light-dark(
+      color(display-p3 0.875 0.885 0.88),
+      color(display-p3 0.183 0.193 0.188)
+    );
+    --color-neutral-6: light-dark(
+      color(display-p3 0.844 0.854 0.849),
+      color(display-p3 0.218 0.23 0.224)
+    );
+    --color-neutral-7: light-dark(
+      color(display-p3 0.8 0.811 0.806),
+      color(display-p3 0.269 0.285 0.277)
+    );
+    --color-neutral-8: light-dark(
+      color(display-p3 0.725 0.738 0.732),
+      color(display-p3 0.362 0.382 0.373)
+    );
+    --color-neutral-9: light-dark(
+      color(display-p3 0.531 0.556 0.546),
+      color(display-p3 0.398 0.438 0.421)
+    );
+    --color-neutral-10: light-dark(
+      color(display-p3 0.492 0.515 0.506),
+      color(display-p3 0.453 0.49 0.474)
+    );
+    --color-neutral-11: light-dark(
+      color(display-p3 0.377 0.395 0.389),
+      color(display-p3 0.685 0.709 0.697)
+    );
+    --color-neutral-12: light-dark(
+      color(display-p3 0.107 0.129 0.118),
+      color(display-p3 0.927 0.933 0.93)
+    );
+  }
+}