@nattstack/ui 0.1.1 → 0.1.3

package/dist/colors/accent/indigo.css

@@ -0,0 +1,67 @@
+[data-color-accent="indigo"] {
+  --color-accent-1: light-dark(#fdfdfe, #11131f);
+  --color-accent-2: light-dark(#f7f9ff, #141726);
+  --color-accent-3: light-dark(#edf2fe, #182449);
+  --color-accent-4: light-dark(#e1e9ff, #1d2e62);
+  --color-accent-5: light-dark(#d2deff, #253974);
+  --color-accent-6: light-dark(#c1d0ff, #304384);
+  --color-accent-7: light-dark(#abbdf9, #3a4f97);
+  --color-accent-8: light-dark(#8da4ef, #435db1);
+  --color-accent-9: light-dark(#3e63dd, #3e63dd);
+  --color-accent-10: light-dark(#3358d4, #5472e4);
+  --color-accent-11: light-dark(#3a5bc7, #9eb1ff);
+  --color-accent-12: light-dark(#1f2d5c, #d6e1ff);
+}
+
+@media (color-gamut: p3) {
+  [data-color-accent="indigo"] {
+    --color-accent-1: light-dark(
+      color(display-p3 0.992 0.992 0.996),
+      color(display-p3 0.068 0.074 0.118)
+    );
+    --color-accent-2: light-dark(
+      color(display-p3 0.971 0.977 0.998),
+      color(display-p3 0.081 0.089 0.144)
+    );
+    --color-accent-3: light-dark(
+      color(display-p3 0.933 0.948 0.992),
+      color(display-p3 0.105 0.141 0.275)
+    );
+    --color-accent-4: light-dark(
+      color(display-p3 0.885 0.914 1),
+      color(display-p3 0.129 0.18 0.369)
+    );
+    --color-accent-5: light-dark(
+      color(display-p3 0.831 0.87 1),
+      color(display-p3 0.163 0.22 0.439)
+    );
+    --color-accent-6: light-dark(
+      color(display-p3 0.767 0.814 0.995),
+      color(display-p3 0.203 0.262 0.5)
+    );
+    --color-accent-7: light-dark(
+      color(display-p3 0.685 0.74 0.957),
+      color(display-p3 0.245 0.309 0.575)
+    );
+    --color-accent-8: light-dark(
+      color(display-p3 0.569 0.639 0.916),
+      color(display-p3 0.285 0.362 0.674)
+    );
+    --color-accent-9: light-dark(
+      color(display-p3 0.276 0.384 0.837),
+      color(display-p3 0.276 0.384 0.837)
+    );
+    --color-accent-10: light-dark(
+      color(display-p3 0.234 0.343 0.801),
+      color(display-p3 0.354 0.445 0.866)
+    );
+    --color-accent-11: light-dark(
+      color(display-p3 0.256 0.354 0.755),
+      color(display-p3 0.63 0.69 1)
+    );
+    --color-accent-12: light-dark(
+      color(display-p3 0.133 0.175 0.348),
+      color(display-p3 0.848 0.881 0.99)
+    );
+  }
+}

package/dist/colors/accent/iris.css

@@ -0,0 +1,67 @@
+[data-color-accent="iris"] {
+  --color-accent-1: light-dark(#fdfdff, #13131e);
+  --color-accent-2: light-dark(#f8f8ff, #171625);
+  --color-accent-3: light-dark(#f0f1fe, #202248);
+  --color-accent-4: light-dark(#e6e7ff, #262a65);
+  --color-accent-5: light-dark(#dadcff, #303374);
+  --color-accent-6: light-dark(#cbcdff, #3d3e82);
+  --color-accent-7: light-dark(#b8baf8, #4a4a95);
+  --color-accent-8: light-dark(#9b9ef0, #5958b1);
+  --color-accent-9: light-dark(#5b5bd6, #5b5bd6);
+  --color-accent-10: light-dark(#5151cd, #6e6ade);
+  --color-accent-11: light-dark(#5753c6, #b1a9ff);
+  --color-accent-12: light-dark(#272962, #e0dffe);
+}
+
+@media (color-gamut: p3) {
+  [data-color-accent="iris"] {
+    --color-accent-1: light-dark(
+      color(display-p3 0.992 0.992 0.999),
+      color(display-p3 0.075 0.075 0.114)
+    );
+    --color-accent-2: light-dark(
+      color(display-p3 0.972 0.973 0.998),
+      color(display-p3 0.089 0.086 0.14)
+    );
+    --color-accent-3: light-dark(
+      color(display-p3 0.943 0.945 0.992),
+      color(display-p3 0.128 0.134 0.272)
+    );
+    --color-accent-4: light-dark(
+      color(display-p3 0.902 0.906 1),
+      color(display-p3 0.153 0.165 0.382)
+    );
+    --color-accent-5: light-dark(
+      color(display-p3 0.857 0.861 1),
+      color(display-p3 0.192 0.201 0.44)
+    );
+    --color-accent-6: light-dark(
+      color(display-p3 0.799 0.805 0.987),
+      color(display-p3 0.239 0.241 0.491)
+    );
+    --color-accent-7: light-dark(
+      color(display-p3 0.721 0.727 0.955),
+      color(display-p3 0.291 0.289 0.565)
+    );
+    --color-accent-8: light-dark(
+      color(display-p3 0.61 0.619 0.918),
+      color(display-p3 0.35 0.345 0.673)
+    );
+    --color-accent-9: light-dark(
+      color(display-p3 0.357 0.357 0.81),
+      color(display-p3 0.357 0.357 0.81)
+    );
+    --color-accent-10: light-dark(
+      color(display-p3 0.318 0.318 0.774),
+      color(display-p3 0.428 0.416 0.843)
+    );
+    --color-accent-11: light-dark(
+      color(display-p3 0.337 0.326 0.748),
+      color(display-p3 0.685 0.662 1)
+    );
+    --color-accent-12: light-dark(
+      color(display-p3 0.154 0.161 0.371),
+      color(display-p3 0.878 0.875 0.986)
+    );
+  }
+}

package/dist/colors/accent/jade.css

@@ -0,0 +1,67 @@
+[data-color-accent="jade"] {
+  --color-accent-1: light-dark(#fbfefd, #0d1512);
+  --color-accent-2: light-dark(#f4fbf7, #121c18);
+  --color-accent-3: light-dark(#e6f7ed, #0f2e22);
+  --color-accent-4: light-dark(#d6f1e3, #0b3b2c);
+  --color-accent-5: light-dark(#c3e9d7, #114837);
+  --color-accent-6: light-dark(#acdec8, #1b5745);
+  --color-accent-7: light-dark(#8bceb6, #246854);
+  --color-accent-8: light-dark(#56ba9f, #2a7e68);
+  --color-accent-9: light-dark(#29a383, #29a383);
+  --color-accent-10: light-dark(#26997b, #27b08b);
+  --color-accent-11: light-dark(#208368, #1fd8a4);
+  --color-accent-12: light-dark(#1d3b31, #adf0d4);
+}
+
+@media (color-gamut: p3) {
+  [data-color-accent="jade"] {
+    --color-accent-1: light-dark(
+      color(display-p3 0.986 0.996 0.992),
+      color(display-p3 0.059 0.083 0.071)
+    );
+    --color-accent-2: light-dark(
+      color(display-p3 0.962 0.983 0.969),
+      color(display-p3 0.078 0.11 0.094)
+    );
+    --color-accent-3: light-dark(
+      color(display-p3 0.912 0.965 0.932),
+      color(display-p3 0.091 0.176 0.138)
+    );
+    --color-accent-4: light-dark(
+      color(display-p3 0.858 0.941 0.893),
+      color(display-p3 0.102 0.228 0.177)
+    );
+    --color-accent-5: light-dark(
+      color(display-p3 0.795 0.909 0.847),
+      color(display-p3 0.133 0.279 0.221)
+    );
+    --color-accent-6: light-dark(
+      color(display-p3 0.715 0.864 0.791),
+      color(display-p3 0.174 0.334 0.273)
+    );
+    --color-accent-7: light-dark(
+      color(display-p3 0.603 0.802 0.718),
+      color(display-p3 0.219 0.402 0.335)
+    );
+    --color-accent-8: light-dark(
+      color(display-p3 0.44 0.72 0.629),
+      color(display-p3 0.263 0.488 0.411)
+    );
+    --color-accent-9: light-dark(
+      color(display-p3 0.319 0.63 0.521),
+      color(display-p3 0.319 0.63 0.521)
+    );
+    --color-accent-10: light-dark(
+      color(display-p3 0.299 0.592 0.488),
+      color(display-p3 0.338 0.68 0.555)
+    );
+    --color-accent-11: light-dark(
+      color(display-p3 0.15 0.5 0.37),
+      color(display-p3 0.4 0.835 0.656)
+    );
+    --color-accent-12: light-dark(
+      color(display-p3 0.142 0.229 0.194),
+      color(display-p3 0.734 0.934 0.838)
+    );
+  }
+}

package/dist/colors/accent/lime.css

@@ -0,0 +1,67 @@
+[data-color-accent="lime"] {
+  --color-accent-1: light-dark(#fcfdfa, #11130c);
+  --color-accent-2: light-dark(#f8faf3, #151a10);
+  --color-accent-3: light-dark(#eef6d6, #1f2917);
+  --color-accent-4: light-dark(#e2f0bd, #29371d);
+  --color-accent-5: light-dark(#d3e7a6, #334423);
+  --color-accent-6: light-dark(#c2da91, #3d522a);
+  --color-accent-7: light-dark(#abc978, #496231);
+  --color-accent-8: light-dark(#8db654, #577538);
+  --color-accent-9: light-dark(#bdee63, #bdee63);
+  --color-accent-10: light-dark(#b0e64c, #d4ff70);
+  --color-accent-11: light-dark(#5c7c2f, #bde56c);
+  --color-accent-12: light-dark(#37401c, #e3f7ba);
+}
+
+@media (color-gamut: p3) {
+  [data-color-accent="lime"] {
+    --color-accent-1: light-dark(
+      color(display-p3 0.989 0.992 0.981),
+      color(display-p3 0.067 0.073 0.048)
+    );
+    --color-accent-2: light-dark(
+      color(display-p3 0.975 0.98 0.954),
+      color(display-p3 0.086 0.1 0.067)
+    );
+    --color-accent-3: light-dark(
+      color(display-p3 0.939 0.965 0.851),
+      color(display-p3 0.13 0.16 0.099)
+    );
+    --color-accent-4: light-dark(
+      color(display-p3 0.896 0.94 0.76),
+      color(display-p3 0.172 0.214 0.126)
+    );
+    --color-accent-5: light-dark(
+      color(display-p3 0.843 0.903 0.678),
+      color(display-p3 0.213 0.266 0.153)
+    );
+    --color-accent-6: light-dark(
+      color(display-p3 0.778 0.852 0.599),
+      color(display-p3 0.257 0.321 0.182)
+    );
+    --color-accent-7: light-dark(
+      color(display-p3 0.694 0.784 0.508),
+      color(display-p3 0.307 0.383 0.215)
+    );
+    --color-accent-8: light-dark(
+      color(display-p3 0.585 0.707 0.378),
+      color(display-p3 0.365 0.456 0.25)
+    );
+    --color-accent-9: light-dark(
+      color(display-p3 0.78 0.928 0.466),
+      color(display-p3 0.78 0.928 0.466)
+    );
+    --color-accent-10: light-dark(
+      color(display-p3 0.734 0.896 0.397),
+      color(display-p3 0.865 0.995 0.519)
+    );
+    --color-accent-11: light-dark(
+      color(display-p3 0.386 0.482 0.227),
+      color(display-p3 0.771 0.893 0.485)
+    );
+    --color-accent-12: light-dark(
+      color(display-p3 0.222 0.25 0.128),
+      color(display-p3 0.905 0.966 0.753)
+    );
+  }
+}

package/dist/colors/accent/mint.css

@@ -0,0 +1,67 @@
+[data-color-accent="mint"] {
+  --color-accent-1: light-dark(#f9fefd, #0e1515);
+  --color-accent-2: light-dark(#f2fbf9, #0f1b1b);
+  --color-accent-3: light-dark(#ddf9f2, #092c2b);
+  --color-accent-4: light-dark(#c8f4e9, #003a38);
+  --color-accent-5: light-dark(#b3ecde, #004744);
+  --color-accent-6: light-dark(#9ce0d0, #105650);
+  --color-accent-7: light-dark(#7ecfbd, #1e685f);
+  --color-accent-8: light-dark(#4cbba5, #277f70);
+  --color-accent-9: light-dark(#86ead4, #86ead4);
+  --color-accent-10: light-dark(#7de0cb, #a8f5e5);
+  --color-accent-11: light-dark(#027864, #58d5ba);
+  --color-accent-12: light-dark(#16433c, #c4f5e1);
+}
+
+@media (color-gamut: p3) {
+  [data-color-accent="mint"] {
+    --color-accent-1: light-dark(
+      color(display-p3 0.98 0.995 0.992),
+      color(display-p3 0.059 0.082 0.081)
+    );
+    --color-accent-2: light-dark(
+      color(display-p3 0.957 0.985 0.977),
+      color(display-p3 0.068 0.104 0.105)
+    );
+    --color-accent-3: light-dark(
+      color(display-p3 0.888 0.972 0.95),
+      color(display-p3 0.077 0.17 0.168)
+    );
+    --color-accent-4: light-dark(
+      color(display-p3 0.819 0.951 0.916),
+      color(display-p3 0.068 0.224 0.22)
+    );
+    --color-accent-5: light-dark(
+      color(display-p3 0.747 0.918 0.873),
+      color(display-p3 0.104 0.275 0.264)
+    );
+    --color-accent-6: light-dark(
+      color(display-p3 0.668 0.87 0.818),
+      color(display-p3 0.154 0.332 0.313)
+    );
+    --color-accent-7: light-dark(
+      color(display-p3 0.567 0.805 0.744),
+      color(display-p3 0.207 0.403 0.373)
+    );
+    --color-accent-8: light-dark(
+      color(display-p3 0.42 0.724 0.649),
+      color(display-p3 0.258 0.49 0.441)
+    );
+    --color-accent-9: light-dark(
+      color(display-p3 0.62 0.908 0.834),
+      color(display-p3 0.62 0.908 0.834)
+    );
+    --color-accent-10: light-dark(
+      color(display-p3 0.585 0.871 0.797),
+      color(display-p3 0.725 0.954 0.898)
+    );
+    --color-accent-11: light-dark(
+      color(display-p3 0.203 0.463 0.397),
+      color(display-p3 0.482 0.825 0.733)
+    );
+    --color-accent-12: light-dark(
+      color(display-p3 0.136 0.259 0.236),
+      color(display-p3 0.807 0.955 0.887)
+    );
+  }
+}

package/dist/colors/accent/orange.css

@@ -0,0 +1,58 @@
+[data-color-accent="orange"] {
+  --color-accent-1: light-dark(#fefcfb, #17120e);
+  --color-accent-2: light-dark(#fff7ed, #1e160f);
+  --color-accent-3: light-dark(#ffefd6, #331e0b);
+  --color-accent-4: light-dark(#ffdfb5, #462100);
+  --color-accent-5: light-dark(#ffd19a, #562800);
+  --color-accent-6: light-dark(#ffc182, #66350c);
+  --color-accent-7: light-dark(#f5ae73, #7e451d);
+  --color-accent-8: light-dark(#ec9455, #a35829);
+  --color-accent-9: light-dark(#f76b15, #f76b15);
+  --color-accent-10: light-dark(#ef5f00, #ff801f);
+  --color-accent-11: light-dark(#cc4e00, #ffa057);
+  --color-accent-12: light-dark(#582d1d, #ffe0c2);
+}
+
+@media (color-gamut: p3) {
+  [data-color-accent="orange"] {
+    --color-accent-1: light-dark(
+      color(display-p3 0.995 0.988 0.985),
+      color(display-p3 0.088 0.07 0.057)
+    );
+    --color-accent-2: light-dark(
+      color(display-p3 0.994 0.968 0.934),
+      color(display-p3 0.113 0.089 0.061)
+    );
+    --color-accent-3: light-dark(
+      color(display-p3 0.989 0.938 0.85),
+      color(display-p3 0.189 0.12 0.056)
+    );
+    --color-accent-4: light-dark(color(display-p3 1 0.874 0.687), color(display-p3 0.262 0.132 0));
+    --color-accent-5: light-dark(
+      color(display-p3 1 0.821 0.583),
+      color(display-p3 0.315 0.168 0.016)
+    );
+    --color-accent-6: light-dark(
+      color(display-p3 0.975 0.767 0.545),
+      color(display-p3 0.376 0.219 0.088)
+    );
+    --color-accent-7: light-dark(
+      color(display-p3 0.919 0.693 0.486),
+      color(display-p3 0.465 0.283 0.147)
+    );
+    --color-accent-8: light-dark(
+      color(display-p3 0.877 0.597 0.379),
+      color(display-p3 0.601 0.359 0.201)
+    );
+    --color-accent-9: light-dark(color(display-p3 0.9 0.45 0.2), color(display-p3 0.9 0.45 0.2));
+    --color-accent-10: light-dark(
+      color(display-p3 0.87 0.409 0.164),
+      color(display-p3 0.98 0.51 0.23)
+    );
+    --color-accent-11: light-dark(color(display-p3 0.76 0.34 0), color(display-p3 1 0.63 0.38));
+    --color-accent-12: light-dark(
+      color(display-p3 0.323 0.185 0.127),
+      color(display-p3 0.98 0.883 0.775)
+    );
+  }
+}

package/dist/colors/accent/pink.css

@@ -0,0 +1,67 @@
+[data-color-accent="pink"] {
+  --color-accent-1: light-dark(#fffcfe, #191117);
+  --color-accent-2: light-dark(#fef7fb, #21121d);
+  --color-accent-3: light-dark(#fee9f5, #37172f);
+  --color-accent-4: light-dark(#fbdcef, #4b143d);
+  --color-accent-5: light-dark(#f6cee7, #591c47);
+  --color-accent-6: light-dark(#efbfdd, #692955);
+  --color-accent-7: light-dark(#e7acd0, #833869);
+  --color-accent-8: light-dark(#dd93c2, #a84885);
+  --color-accent-9: light-dark(#d6409f, #d6409f);
+  --color-accent-10: light-dark(#cf3897, #de51a8);
+  --color-accent-11: light-dark(#c2298a, #ff8dcc);
+  --color-accent-12: light-dark(#651249, #fdd1ea);
+}
+
+@media (color-gamut: p3) {
+  [data-color-accent="pink"] {
+    --color-accent-1: light-dark(
+      color(display-p3 0.998 0.989 0.996),
+      color(display-p3 0.093 0.068 0.089)
+    );
+    --color-accent-2: light-dark(
+      color(display-p3 0.992 0.97 0.985),
+      color(display-p3 0.121 0.073 0.11)
+    );
+    --color-accent-3: light-dark(
+      color(display-p3 0.981 0.917 0.96),
+      color(display-p3 0.198 0.098 0.179)
+    );
+    --color-accent-4: light-dark(
+      color(display-p3 0.963 0.867 0.932),
+      color(display-p3 0.271 0.095 0.231)
+    );
+    --color-accent-5: light-dark(
+      color(display-p3 0.939 0.815 0.899),
+      color(display-p3 0.32 0.127 0.273)
+    );
+    --color-accent-6: light-dark(
+      color(display-p3 0.907 0.756 0.859),
+      color(display-p3 0.382 0.177 0.326)
+    );
+    --color-accent-7: light-dark(
+      color(display-p3 0.869 0.683 0.81),
+      color(display-p3 0.477 0.238 0.405)
+    );
+    --color-accent-8: light-dark(
+      color(display-p3 0.825 0.59 0.751),
+      color(display-p3 0.612 0.304 0.51)
+    );
+    --color-accent-9: light-dark(
+      color(display-p3 0.775 0.297 0.61),
+      color(display-p3 0.775 0.297 0.61)
+    );
+    --color-accent-10: light-dark(
+      color(display-p3 0.748 0.27 0.581),
+      color(display-p3 0.808 0.356 0.645)
+    );
+    --color-accent-11: light-dark(
+      color(display-p3 0.698 0.219 0.528),
+      color(display-p3 1 0.535 0.78)
+    );
+    --color-accent-12: light-dark(
+      color(display-p3 0.363 0.101 0.279),
+      color(display-p3 0.964 0.826 0.912)
+    );
+  }
+}

package/dist/colors/accent/plum.css

@@ -0,0 +1,67 @@
+[data-color-accent="plum"] {
+  --color-accent-1: light-dark(#fefcff, #181118);
+  --color-accent-2: light-dark(#fdf7fd, #201320);
+  --color-accent-3: light-dark(#fbebfb, #351a35);
+  --color-accent-4: light-dark(#f7def8, #451d47);
+  --color-accent-5: light-dark(#f2d1f3, #512454);
+  --color-accent-6: light-dark(#e9c2ec, #5e3061);
+  --color-accent-7: light-dark(#deade3, #734079);
+  --color-accent-8: light-dark(#cf91d8, #92549c);
+  --color-accent-9: light-dark(#ab4aba, #ab4aba);
+  --color-accent-10: light-dark(#a144af, #b658c4);
+  --color-accent-11: light-dark(#953ea3, #e796f3);
+  --color-accent-12: light-dark(#53195d, #f4d4f4);
+}
+
+@media (color-gamut: p3) {
+  [data-color-accent="plum"] {
+    --color-accent-1: light-dark(
+      color(display-p3 0.995 0.988 0.999),
+      color(display-p3 0.09 0.068 0.092)
+    );
+    --color-accent-2: light-dark(
+      color(display-p3 0.988 0.971 0.99),
+      color(display-p3 0.118 0.077 0.121)
+    );
+    --color-accent-3: light-dark(
+      color(display-p3 0.973 0.923 0.98),
+      color(display-p3 0.192 0.105 0.202)
+    );
+    --color-accent-4: light-dark(
+      color(display-p3 0.953 0.875 0.966),
+      color(display-p3 0.25 0.121 0.271)
+    );
+    --color-accent-5: light-dark(
+      color(display-p3 0.926 0.825 0.945),
+      color(display-p3 0.293 0.152 0.319)
+    );
+    --color-accent-6: light-dark(
+      color(display-p3 0.89 0.765 0.916),
+      color(display-p3 0.343 0.198 0.372)
+    );
+    --color-accent-7: light-dark(
+      color(display-p3 0.84 0.686 0.877),
+      color(display-p3 0.424 0.262 0.461)
+    );
+    --color-accent-8: light-dark(
+      color(display-p3 0.775 0.58 0.832),
+      color(display-p3 0.54 0.341 0.595)
+    );
+    --color-accent-9: light-dark(
+      color(display-p3 0.624 0.313 0.708),
+      color(display-p3 0.624 0.313 0.708)
+    );
+    --color-accent-10: light-dark(
+      color(display-p3 0.587 0.29 0.667),
+      color(display-p3 0.666 0.365 0.748)
+    );
+    --color-accent-11: light-dark(
+      color(display-p3 0.543 0.263 0.619),
+      color(display-p3 0.86 0.602 0.933)
+    );
+    --color-accent-12: light-dark(
+      color(display-p3 0.299 0.114 0.352),
+      color(display-p3 0.936 0.836 0.949)
+    );
+  }
+}

package/dist/colors/accent/purple.css

@@ -0,0 +1,67 @@
+[data-color-accent="purple"] {
+  --color-accent-1: light-dark(#fefcfe, #18111b);
+  --color-accent-2: light-dark(#fbf7fe, #1e1523);
+  --color-accent-3: light-dark(#f7edfe, #301c3b);
+  --color-accent-4: light-dark(#f2e2fc, #3d224e);
+  --color-accent-5: light-dark(#ead5f9, #48295c);
+  --color-accent-6: light-dark(#e0c4f4, #54346b);
+  --color-accent-7: light-dark(#d1afec, #664282);
+  --color-accent-8: light-dark(#be93e4, #8457aa);
+  --color-accent-9: light-dark(#8e4ec6, #8e4ec6);
+  --color-accent-10: light-dark(#8347b9, #9a5cd0);
+  --color-accent-11: light-dark(#8145b5, #d19dff);
+  --color-accent-12: light-dark(#402060, #ecd9fa);
+}
+
+@media (color-gamut: p3) {
+  [data-color-accent="purple"] {
+    --color-accent-1: light-dark(
+      color(display-p3 0.995 0.988 0.996),
+      color(display-p3 0.09 0.068 0.103)
+    );
+    --color-accent-2: light-dark(
+      color(display-p3 0.983 0.971 0.993),
+      color(display-p3 0.113 0.082 0.134)
+    );
+    --color-accent-3: light-dark(
+      color(display-p3 0.963 0.931 0.989),
+      color(display-p3 0.175 0.112 0.224)
+    );
+    --color-accent-4: light-dark(
+      color(display-p3 0.937 0.888 0.981),
+      color(display-p3 0.224 0.137 0.297)
+    );
+    --color-accent-5: light-dark(
+      color(display-p3 0.904 0.837 0.966),
+      color(display-p3 0.264 0.167 0.349)
+    );
+    --color-accent-6: light-dark(
+      color(display-p3 0.86 0.774 0.942),
+      color(display-p3 0.311 0.208 0.406)
+    );
+    --color-accent-7: light-dark(
+      color(display-p3 0.799 0.69 0.91),
+      color(display-p3 0.381 0.266 0.496)
+    );
+    --color-accent-8: light-dark(
+      color(display-p3 0.719 0.583 0.874),
+      color(display-p3 0.49 0.349 0.649)
+    );
+    --color-accent-9: light-dark(
+      color(display-p3 0.523 0.318 0.751),
+      color(display-p3 0.523 0.318 0.751)
+    );
+    --color-accent-10: light-dark(
+      color(display-p3 0.483 0.289 0.7),
+      color(display-p3 0.57 0.373 0.791)
+    );
+    --color-accent-11: light-dark(
+      color(display-p3 0.473 0.281 0.687),
+      color(display-p3 0.8 0.62 1)
+    );
+    --color-accent-12: light-dark(
+      color(display-p3 0.234 0.132 0.363),
+      color(display-p3 0.913 0.854 0.971)
+    );
+  }
+}

package/dist/colors/accent/red.css

@@ -0,0 +1,67 @@
+[data-color-accent="red"] {
+  --color-accent-1: light-dark(#fffcfc, #191111);
+  --color-accent-2: light-dark(#fff7f7, #201314);
+  --color-accent-3: light-dark(#feebec, #3b1219);
+  --color-accent-4: light-dark(#ffdbdc, #500f1c);
+  --color-accent-5: light-dark(#ffcdce, #611623);
+  --color-accent-6: light-dark(#fdbdbe, #72232d);
+  --color-accent-7: light-dark(#f4a9aa, #8c333a);
+  --color-accent-8: light-dark(#eb8e90, #b54548);
+  --color-accent-9: light-dark(#e5484d, #e5484d);
+  --color-accent-10: light-dark(#dc3e42, #ec5d5e);
+  --color-accent-11: light-dark(#ce2c31, #ff9592);
+  --color-accent-12: light-dark(#641723, #ffd1d9);
+}
+
+@media (color-gamut: p3) {
+  [data-color-accent="red"] {
+    --color-accent-1: light-dark(
+      color(display-p3 0.998 0.989 0.988),
+      color(display-p3 0.093 0.068 0.067)
+    );
+    --color-accent-2: light-dark(
+      color(display-p3 0.995 0.971 0.971),
+      color(display-p3 0.118 0.077 0.079)
+    );
+    --color-accent-3: light-dark(
+      color(display-p3 0.985 0.925 0.925),
+      color(display-p3 0.211 0.081 0.099)
+    );
+    --color-accent-4: light-dark(
+      color(display-p3 0.999 0.866 0.866),
+      color(display-p3 0.287 0.079 0.113)
+    );
+    --color-accent-5: light-dark(
+      color(display-p3 0.984 0.812 0.811),
+      color(display-p3 0.348 0.11 0.142)
+    );
+    --color-accent-6: light-dark(
+      color(display-p3 0.955 0.751 0.749),
+      color(display-p3 0.414 0.16 0.183)
+    );
+    --color-accent-7: light-dark(
+      color(display-p3 0.915 0.675 0.672),
+      color(display-p3 0.508 0.224 0.236)
+    );
+    --color-accent-8: light-dark(
+      color(display-p3 0.872 0.575 0.572),
+      color(display-p3 0.659 0.298 0.297)
+    );
+    --color-accent-9: light-dark(
+      color(display-p3 0.83 0.329 0.324),
+      color(display-p3 0.83 0.329 0.324)
+    );
+    --color-accent-10: light-dark(
+      color(display-p3 0.798 0.294 0.285),
+      color(display-p3 0.861 0.403 0.387)
+    );
+    --color-accent-11: light-dark(
+      color(display-p3 0.744 0.234 0.222),
+      color(display-p3 1 0.57 0.55)
+    );
+    --color-accent-12: light-dark(
+      color(display-p3 0.36 0.115 0.143),
+      color(display-p3 0.971 0.826 0.852)
+    );
+  }
+}