@fairgarden/design 0.1.0-alpha.0

package/utils/colors/pinkLightDefault.css

@@ -0,0 +1,67 @@
+/* Generated by scripts/build-colors.js. Do not edit. */
+@layer theme {
+  :root,
+  [data-theme="light"] {
+    --pink1: #fffcfe;
+    --pink2: #fef7fb;
+    --pink3: #fee9f5;
+    --pink4: #fbdcef;
+    --pink5: #f6cee7;
+    --pink6: #efbfdd;
+    --pink7: #e7acd0;
+    --pink8: #dd93c2;
+    --pink9: #d6409f;
+    --pink10: #cf3897;
+    --pink11: #c2298a;
+    --pink12: #651249;
+    --pink-contrast: var(--pink1);
+    --pink-hover: var(--pink8);
+
+    @media (color-gamut: p3) {
+      --pink1: color(display-p3 0.998 0.989 0.996);
+      --pink2: color(display-p3 0.992 0.97 0.985);
+      --pink3: color(display-p3 0.981 0.917 0.96);
+      --pink4: color(display-p3 0.963 0.867 0.932);
+      --pink5: color(display-p3 0.939 0.815 0.899);
+      --pink6: color(display-p3 0.907 0.756 0.859);
+      --pink7: color(display-p3 0.869 0.683 0.81);
+      --pink8: color(display-p3 0.825 0.59 0.751);
+      --pink9: color(display-p3 0.775 0.297 0.61);
+      --pink10: color(display-p3 0.748 0.27 0.581);
+      --pink11: color(display-p3 0.698 0.219 0.528);
+      --pink12: color(display-p3 0.363 0.101 0.279);
+    }
+  }
+
+  [data-theme="dark"] {
+    --pink1: #191117;
+    --pink2: #21121d;
+    --pink3: #37172f;
+    --pink4: #4b143d;
+    --pink5: #591c47;
+    --pink6: #692955;
+    --pink7: #833869;
+    --pink8: #a84885;
+    --pink9: #d6409f;
+    --pink10: #de51a8;
+    --pink11: #ff8dcc;
+    --pink12: #fdd1ea;
+    --pink-contrast: var(--pink1);
+    --pink-hover: var(--pink10);
+
+    @media (color-gamut: p3) {
+      --pink1: color(display-p3 0.093 0.068 0.089);
+      --pink2: color(display-p3 0.121 0.073 0.11);
+      --pink3: color(display-p3 0.198 0.098 0.179);
+      --pink4: color(display-p3 0.271 0.095 0.231);
+      --pink5: color(display-p3 0.32 0.127 0.273);
+      --pink6: color(display-p3 0.382 0.177 0.326);
+      --pink7: color(display-p3 0.477 0.238 0.405);
+      --pink8: color(display-p3 0.612 0.304 0.51);
+      --pink9: color(display-p3 0.775 0.297 0.61);
+      --pink10: color(display-p3 0.808 0.356 0.645);
+      --pink11: color(display-p3 1 0.535 0.78);
+      --pink12: color(display-p3 0.964 0.826 0.912);
+    }
+  }
+}

package/utils/colors/plum.css

@@ -0,0 +1,101 @@
+/* Generated by scripts/build-colors.js. Do not edit. */
+@layer theme {
+  :root,
+  [data-theme="light"] {
+    --plum1: #fefcff;
+    --plum2: #fdf7fd;
+    --plum3: #fbebfb;
+    --plum4: #f7def8;
+    --plum5: #f2d1f3;
+    --plum6: #e9c2ec;
+    --plum7: #deade3;
+    --plum8: #cf91d8;
+    --plum9: #ab4aba;
+    --plum10: #a144af;
+    --plum11: #953ea3;
+    --plum12: #53195d;
+    --plum-contrast: var(--plum1);
+    --plum-hover: var(--plum10);
+
+    @media (color-gamut: p3) {
+      --plum1: color(display-p3 0.995 0.988 0.999);
+      --plum2: color(display-p3 0.988 0.971 0.99);
+      --plum3: color(display-p3 0.973 0.923 0.98);
+      --plum4: color(display-p3 0.953 0.875 0.966);
+      --plum5: color(display-p3 0.926 0.825 0.945);
+      --plum6: color(display-p3 0.89 0.765 0.916);
+      --plum7: color(display-p3 0.84 0.686 0.877);
+      --plum8: color(display-p3 0.775 0.58 0.832);
+      --plum9: color(display-p3 0.624 0.313 0.708);
+      --plum10: color(display-p3 0.587 0.29 0.667);
+      --plum11: color(display-p3 0.543 0.263 0.619);
+      --plum12: color(display-p3 0.299 0.114 0.352);
+    }
+  }
+
+  [data-theme="dark"] {
+    --plum1: #181118;
+    --plum2: #201320;
+    --plum3: #351a35;
+    --plum4: #451d47;
+    --plum5: #512454;
+    --plum6: #5e3061;
+    --plum7: #734079;
+    --plum8: #92549c;
+    --plum9: #ab4aba;
+    --plum10: #b658c4;
+    --plum11: #e796f3;
+    --plum12: #f4d4f4;
+    --plum-contrast: #fff;
+    --plum-hover: var(--plum10);
+
+    @media (color-gamut: p3) {
+      --plum1: color(display-p3 0.09 0.068 0.092);
+      --plum2: color(display-p3 0.118 0.077 0.121);
+      --plum3: color(display-p3 0.192 0.105 0.202);
+      --plum4: color(display-p3 0.25 0.121 0.271);
+      --plum5: color(display-p3 0.293 0.152 0.319);
+      --plum6: color(display-p3 0.343 0.198 0.372);
+      --plum7: color(display-p3 0.424 0.262 0.461);
+      --plum8: color(display-p3 0.54 0.341 0.595);
+      --plum9: color(display-p3 0.624 0.313 0.708);
+      --plum10: color(display-p3 0.666 0.365 0.748);
+      --plum11: color(display-p3 0.86 0.602 0.933);
+      --plum12: color(display-p3 0.936 0.836 0.949);
+    }
+  }
+
+  @media only screen and (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]) {
+      --plum1: #181118;
+      --plum2: #201320;
+      --plum3: #351a35;
+      --plum4: #451d47;
+      --plum5: #512454;
+      --plum6: #5e3061;
+      --plum7: #734079;
+      --plum8: #92549c;
+      --plum9: #ab4aba;
+      --plum10: #b658c4;
+      --plum11: #e796f3;
+      --plum12: #f4d4f4;
+      --plum-contrast: #fff;
+      --plum-hover: var(--plum10);
+
+      @media (color-gamut: p3) {
+        --plum1: color(display-p3 0.09 0.068 0.092);
+        --plum2: color(display-p3 0.118 0.077 0.121);
+        --plum3: color(display-p3 0.192 0.105 0.202);
+        --plum4: color(display-p3 0.25 0.121 0.271);
+        --plum5: color(display-p3 0.293 0.152 0.319);
+        --plum6: color(display-p3 0.343 0.198 0.372);
+        --plum7: color(display-p3 0.424 0.262 0.461);
+        --plum8: color(display-p3 0.54 0.341 0.595);
+        --plum9: color(display-p3 0.624 0.313 0.708);
+        --plum10: color(display-p3 0.666 0.365 0.748);
+        --plum11: color(display-p3 0.86 0.602 0.933);
+        --plum12: color(display-p3 0.936 0.836 0.949);
+      }
+    }
+  }
+}

package/utils/colors/plumDarkDefault.css

@@ -0,0 +1,101 @@
+/* Generated by scripts/build-colors.js. Do not edit. */
+@layer theme {
+  :root,
+  [data-theme="dark"] {
+    --plum1: #181118;
+    --plum2: #201320;
+    --plum3: #351a35;
+    --plum4: #451d47;
+    --plum5: #512454;
+    --plum6: #5e3061;
+    --plum7: #734079;
+    --plum8: #92549c;
+    --plum9: #ab4aba;
+    --plum10: #b658c4;
+    --plum11: #e796f3;
+    --plum12: #f4d4f4;
+    --plum-contrast: #fff;
+    --plum-hover: var(--plum10);
+
+    @media (color-gamut: p3) {
+      --plum1: color(display-p3 0.09 0.068 0.092);
+      --plum2: color(display-p3 0.118 0.077 0.121);
+      --plum3: color(display-p3 0.192 0.105 0.202);
+      --plum4: color(display-p3 0.25 0.121 0.271);
+      --plum5: color(display-p3 0.293 0.152 0.319);
+      --plum6: color(display-p3 0.343 0.198 0.372);
+      --plum7: color(display-p3 0.424 0.262 0.461);
+      --plum8: color(display-p3 0.54 0.341 0.595);
+      --plum9: color(display-p3 0.624 0.313 0.708);
+      --plum10: color(display-p3 0.666 0.365 0.748);
+      --plum11: color(display-p3 0.86 0.602 0.933);
+      --plum12: color(display-p3 0.936 0.836 0.949);
+    }
+  }
+
+  [data-theme="light"] {
+    --plum1: #fefcff;
+    --plum2: #fdf7fd;
+    --plum3: #fbebfb;
+    --plum4: #f7def8;
+    --plum5: #f2d1f3;
+    --plum6: #e9c2ec;
+    --plum7: #deade3;
+    --plum8: #cf91d8;
+    --plum9: #ab4aba;
+    --plum10: #a144af;
+    --plum11: #953ea3;
+    --plum12: #53195d;
+    --plum-contrast: var(--plum1);
+    --plum-hover: var(--plum10);
+
+    @media (color-gamut: p3) {
+      --plum1: color(display-p3 0.995 0.988 0.999);
+      --plum2: color(display-p3 0.988 0.971 0.99);
+      --plum3: color(display-p3 0.973 0.923 0.98);
+      --plum4: color(display-p3 0.953 0.875 0.966);
+      --plum5: color(display-p3 0.926 0.825 0.945);
+      --plum6: color(display-p3 0.89 0.765 0.916);
+      --plum7: color(display-p3 0.84 0.686 0.877);
+      --plum8: color(display-p3 0.775 0.58 0.832);
+      --plum9: color(display-p3 0.624 0.313 0.708);
+      --plum10: color(display-p3 0.587 0.29 0.667);
+      --plum11: color(display-p3 0.543 0.263 0.619);
+      --plum12: color(display-p3 0.299 0.114 0.352);
+    }
+  }
+
+  @media print {
+    :root {
+      --plum1: #fefcff;
+      --plum2: #fdf7fd;
+      --plum3: #fbebfb;
+      --plum4: #f7def8;
+      --plum5: #f2d1f3;
+      --plum6: #e9c2ec;
+      --plum7: #deade3;
+      --plum8: #cf91d8;
+      --plum9: #ab4aba;
+      --plum10: #a144af;
+      --plum11: #953ea3;
+      --plum12: #53195d;
+      --plum-contrast: var(--plum1);
+      --plum-hover: var(--plum10);
+
+      @media (color-gamut: p3) {
+        --plum1: color(display-p3 0.995 0.988 0.999);
+        --plum2: color(display-p3 0.988 0.971 0.99);
+        --plum3: color(display-p3 0.973 0.923 0.98);
+        --plum4: color(display-p3 0.953 0.875 0.966);
+        --plum5: color(display-p3 0.926 0.825 0.945);
+        --plum6: color(display-p3 0.89 0.765 0.916);
+        --plum7: color(display-p3 0.84 0.686 0.877);
+        --plum8: color(display-p3 0.775 0.58 0.832);
+        --plum9: color(display-p3 0.624 0.313 0.708);
+        --plum10: color(display-p3 0.587 0.29 0.667);
+        --plum11: color(display-p3 0.543 0.263 0.619);
+        --plum12: color(display-p3 0.299 0.114 0.352);
+      }
+    }
+  }
+}

package/utils/colors/plumLightDefault.css

@@ -0,0 +1,67 @@
+/* Generated by scripts/build-colors.js. Do not edit. */
+@layer theme {
+  :root,
+  [data-theme="light"] {
+    --plum1: #fefcff;
+    --plum2: #fdf7fd;
+    --plum3: #fbebfb;
+    --plum4: #f7def8;
+    --plum5: #f2d1f3;
+    --plum6: #e9c2ec;
+    --plum7: #deade3;
+    --plum8: #cf91d8;
+    --plum9: #ab4aba;
+    --plum10: #a144af;
+    --plum11: #953ea3;
+    --plum12: #53195d;
+    --plum-contrast: var(--plum1);
+    --plum-hover: var(--plum10);
+
+    @media (color-gamut: p3) {
+      --plum1: color(display-p3 0.995 0.988 0.999);
+      --plum2: color(display-p3 0.988 0.971 0.99);
+      --plum3: color(display-p3 0.973 0.923 0.98);
+      --plum4: color(display-p3 0.953 0.875 0.966);
+      --plum5: color(display-p3 0.926 0.825 0.945);
+      --plum6: color(display-p3 0.89 0.765 0.916);
+      --plum7: color(display-p3 0.84 0.686 0.877);
+      --plum8: color(display-p3 0.775 0.58 0.832);
+      --plum9: color(display-p3 0.624 0.313 0.708);
+      --plum10: color(display-p3 0.587 0.29 0.667);
+      --plum11: color(display-p3 0.543 0.263 0.619);
+      --plum12: color(display-p3 0.299 0.114 0.352);
+    }
+  }
+
+  [data-theme="dark"] {
+    --plum1: #181118;
+    --plum2: #201320;
+    --plum3: #351a35;
+    --plum4: #451d47;
+    --plum5: #512454;
+    --plum6: #5e3061;
+    --plum7: #734079;
+    --plum8: #92549c;
+    --plum9: #ab4aba;
+    --plum10: #b658c4;
+    --plum11: #e796f3;
+    --plum12: #f4d4f4;
+    --plum-contrast: #fff;
+    --plum-hover: var(--plum10);
+
+    @media (color-gamut: p3) {
+      --plum1: color(display-p3 0.09 0.068 0.092);
+      --plum2: color(display-p3 0.118 0.077 0.121);
+      --plum3: color(display-p3 0.192 0.105 0.202);
+      --plum4: color(display-p3 0.25 0.121 0.271);
+      --plum5: color(display-p3 0.293 0.152 0.319);
+      --plum6: color(display-p3 0.343 0.198 0.372);
+      --plum7: color(display-p3 0.424 0.262 0.461);
+      --plum8: color(display-p3 0.54 0.341 0.595);
+      --plum9: color(display-p3 0.624 0.313 0.708);
+      --plum10: color(display-p3 0.666 0.365 0.748);
+      --plum11: color(display-p3 0.86 0.602 0.933);
+      --plum12: color(display-p3 0.936 0.836 0.949);
+    }
+  }
+}

package/utils/colors/purple.css

@@ -0,0 +1,101 @@
+/* Generated by scripts/build-colors.js. Do not edit. */
+@layer theme {
+  :root,
+  [data-theme="light"] {
+    --purple1: #fefcfe;
+    --purple2: #fbf7fe;
+    --purple3: #f7edfe;
+    --purple4: #f2e2fc;
+    --purple5: #ead5f9;
+    --purple6: #e0c4f4;
+    --purple7: #d1afec;
+    --purple8: #be93e4;
+    --purple9: #8e4ec6;
+    --purple10: #8347b9;
+    --purple11: #8145b5;
+    --purple12: #402060;
+    --purple-contrast: var(--purple1);
+    --purple-hover: var(--purple10);
+
+    @media (color-gamut: p3) {
+      --purple1: color(display-p3 0.995 0.988 0.996);
+      --purple2: color(display-p3 0.983 0.971 0.993);
+      --purple3: color(display-p3 0.963 0.931 0.989);
+      --purple4: color(display-p3 0.937 0.888 0.981);
+      --purple5: color(display-p3 0.904 0.837 0.966);
+      --purple6: color(display-p3 0.86 0.774 0.942);
+      --purple7: color(display-p3 0.799 0.69 0.91);
+      --purple8: color(display-p3 0.719 0.583 0.874);
+      --purple9: color(display-p3 0.523 0.318 0.751);
+      --purple10: color(display-p3 0.483 0.289 0.7);
+      --purple11: color(display-p3 0.473 0.281 0.687);
+      --purple12: color(display-p3 0.234 0.132 0.363);
+    }
+  }
+
+  [data-theme="dark"] {
+    --purple1: #18111b;
+    --purple2: #1e1523;
+    --purple3: #301c3b;
+    --purple4: #3d224e;
+    --purple5: #48295c;
+    --purple6: #54346b;
+    --purple7: #664282;
+    --purple8: #8457aa;
+    --purple9: #8e4ec6;
+    --purple10: #9a5cd0;
+    --purple11: #d19dff;
+    --purple12: #ecd9fa;
+    --purple-contrast: #fff;
+    --purple-hover: var(--purple10);
+
+    @media (color-gamut: p3) {
+      --purple1: color(display-p3 0.09 0.068 0.103);
+      --purple2: color(display-p3 0.113 0.082 0.134);
+      --purple3: color(display-p3 0.175 0.112 0.224);
+      --purple4: color(display-p3 0.224 0.137 0.297);
+      --purple5: color(display-p3 0.264 0.167 0.349);
+      --purple6: color(display-p3 0.311 0.208 0.406);
+      --purple7: color(display-p3 0.381 0.266 0.496);
+      --purple8: color(display-p3 0.49 0.349 0.649);
+      --purple9: color(display-p3 0.523 0.318 0.751);
+      --purple10: color(display-p3 0.57 0.373 0.791);
+      --purple11: color(display-p3 0.8 0.62 1);
+      --purple12: color(display-p3 0.913 0.854 0.971);
+    }
+  }
+
+  @media only screen and (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]) {
+      --purple1: #18111b;
+      --purple2: #1e1523;
+      --purple3: #301c3b;
+      --purple4: #3d224e;
+      --purple5: #48295c;
+      --purple6: #54346b;
+      --purple7: #664282;
+      --purple8: #8457aa;
+      --purple9: #8e4ec6;
+      --purple10: #9a5cd0;
+      --purple11: #d19dff;
+      --purple12: #ecd9fa;
+      --purple-contrast: #fff;
+      --purple-hover: var(--purple10);
+
+      @media (color-gamut: p3) {
+        --purple1: color(display-p3 0.09 0.068 0.103);
+        --purple2: color(display-p3 0.113 0.082 0.134);
+        --purple3: color(display-p3 0.175 0.112 0.224);
+        --purple4: color(display-p3 0.224 0.137 0.297);
+        --purple5: color(display-p3 0.264 0.167 0.349);
+        --purple6: color(display-p3 0.311 0.208 0.406);
+        --purple7: color(display-p3 0.381 0.266 0.496);
+        --purple8: color(display-p3 0.49 0.349 0.649);
+        --purple9: color(display-p3 0.523 0.318 0.751);
+        --purple10: color(display-p3 0.57 0.373 0.791);
+        --purple11: color(display-p3 0.8 0.62 1);
+        --purple12: color(display-p3 0.913 0.854 0.971);
+      }
+    }
+  }
+}

package/utils/colors/purpleDarkDefault.css

@@ -0,0 +1,101 @@
+/* Generated by scripts/build-colors.js. Do not edit. */
+@layer theme {
+  :root,
+  [data-theme="dark"] {
+    --purple1: #18111b;
+    --purple2: #1e1523;
+    --purple3: #301c3b;
+    --purple4: #3d224e;
+    --purple5: #48295c;
+    --purple6: #54346b;
+    --purple7: #664282;
+    --purple8: #8457aa;
+    --purple9: #8e4ec6;
+    --purple10: #9a5cd0;
+    --purple11: #d19dff;
+    --purple12: #ecd9fa;
+    --purple-contrast: #fff;
+    --purple-hover: var(--purple10);
+
+    @media (color-gamut: p3) {
+      --purple1: color(display-p3 0.09 0.068 0.103);
+      --purple2: color(display-p3 0.113 0.082 0.134);
+      --purple3: color(display-p3 0.175 0.112 0.224);
+      --purple4: color(display-p3 0.224 0.137 0.297);
+      --purple5: color(display-p3 0.264 0.167 0.349);
+      --purple6: color(display-p3 0.311 0.208 0.406);
+      --purple7: color(display-p3 0.381 0.266 0.496);
+      --purple8: color(display-p3 0.49 0.349 0.649);
+      --purple9: color(display-p3 0.523 0.318 0.751);
+      --purple10: color(display-p3 0.57 0.373 0.791);
+      --purple11: color(display-p3 0.8 0.62 1);
+      --purple12: color(display-p3 0.913 0.854 0.971);
+    }
+  }
+
+  [data-theme="light"] {
+    --purple1: #fefcfe;
+    --purple2: #fbf7fe;
+    --purple3: #f7edfe;
+    --purple4: #f2e2fc;
+    --purple5: #ead5f9;
+    --purple6: #e0c4f4;
+    --purple7: #d1afec;
+    --purple8: #be93e4;
+    --purple9: #8e4ec6;
+    --purple10: #8347b9;
+    --purple11: #8145b5;
+    --purple12: #402060;
+    --purple-contrast: var(--purple1);
+    --purple-hover: var(--purple10);
+
+    @media (color-gamut: p3) {
+      --purple1: color(display-p3 0.995 0.988 0.996);
+      --purple2: color(display-p3 0.983 0.971 0.993);
+      --purple3: color(display-p3 0.963 0.931 0.989);
+      --purple4: color(display-p3 0.937 0.888 0.981);
+      --purple5: color(display-p3 0.904 0.837 0.966);
+      --purple6: color(display-p3 0.86 0.774 0.942);
+      --purple7: color(display-p3 0.799 0.69 0.91);
+      --purple8: color(display-p3 0.719 0.583 0.874);
+      --purple9: color(display-p3 0.523 0.318 0.751);
+      --purple10: color(display-p3 0.483 0.289 0.7);
+      --purple11: color(display-p3 0.473 0.281 0.687);
+      --purple12: color(display-p3 0.234 0.132 0.363);
+    }
+  }
+
+  @media print {
+    :root {
+      --purple1: #fefcfe;
+      --purple2: #fbf7fe;
+      --purple3: #f7edfe;
+      --purple4: #f2e2fc;
+      --purple5: #ead5f9;
+      --purple6: #e0c4f4;
+      --purple7: #d1afec;
+      --purple8: #be93e4;
+      --purple9: #8e4ec6;
+      --purple10: #8347b9;
+      --purple11: #8145b5;
+      --purple12: #402060;
+      --purple-contrast: var(--purple1);
+      --purple-hover: var(--purple10);
+
+      @media (color-gamut: p3) {
+        --purple1: color(display-p3 0.995 0.988 0.996);
+        --purple2: color(display-p3 0.983 0.971 0.993);
+        --purple3: color(display-p3 0.963 0.931 0.989);
+        --purple4: color(display-p3 0.937 0.888 0.981);
+        --purple5: color(display-p3 0.904 0.837 0.966);
+        --purple6: color(display-p3 0.86 0.774 0.942);
+        --purple7: color(display-p3 0.799 0.69 0.91);
+        --purple8: color(display-p3 0.719 0.583 0.874);
+        --purple9: color(display-p3 0.523 0.318 0.751);
+        --purple10: color(display-p3 0.483 0.289 0.7);
+        --purple11: color(display-p3 0.473 0.281 0.687);
+        --purple12: color(display-p3 0.234 0.132 0.363);
+      }
+    }
+  }
+}

package/utils/colors/purpleLightDefault.css

@@ -0,0 +1,67 @@
+/* Generated by scripts/build-colors.js. Do not edit. */
+@layer theme {
+  :root,
+  [data-theme="light"] {
+    --purple1: #fefcfe;
+    --purple2: #fbf7fe;
+    --purple3: #f7edfe;
+    --purple4: #f2e2fc;
+    --purple5: #ead5f9;
+    --purple6: #e0c4f4;
+    --purple7: #d1afec;
+    --purple8: #be93e4;
+    --purple9: #8e4ec6;
+    --purple10: #8347b9;
+    --purple11: #8145b5;
+    --purple12: #402060;
+    --purple-contrast: var(--purple1);
+    --purple-hover: var(--purple10);
+
+    @media (color-gamut: p3) {
+      --purple1: color(display-p3 0.995 0.988 0.996);
+      --purple2: color(display-p3 0.983 0.971 0.993);
+      --purple3: color(display-p3 0.963 0.931 0.989);
+      --purple4: color(display-p3 0.937 0.888 0.981);
+      --purple5: color(display-p3 0.904 0.837 0.966);
+      --purple6: color(display-p3 0.86 0.774 0.942);
+      --purple7: color(display-p3 0.799 0.69 0.91);
+      --purple8: color(display-p3 0.719 0.583 0.874);
+      --purple9: color(display-p3 0.523 0.318 0.751);
+      --purple10: color(display-p3 0.483 0.289 0.7);
+      --purple11: color(display-p3 0.473 0.281 0.687);
+      --purple12: color(display-p3 0.234 0.132 0.363);
+    }
+  }
+
+  [data-theme="dark"] {
+    --purple1: #18111b;
+    --purple2: #1e1523;
+    --purple3: #301c3b;
+    --purple4: #3d224e;
+    --purple5: #48295c;
+    --purple6: #54346b;
+    --purple7: #664282;
+    --purple8: #8457aa;
+    --purple9: #8e4ec6;
+    --purple10: #9a5cd0;
+    --purple11: #d19dff;
+    --purple12: #ecd9fa;
+    --purple-contrast: #fff;
+    --purple-hover: var(--purple10);
+
+    @media (color-gamut: p3) {
+      --purple1: color(display-p3 0.09 0.068 0.103);
+      --purple2: color(display-p3 0.113 0.082 0.134);
+      --purple3: color(display-p3 0.175 0.112 0.224);
+      --purple4: color(display-p3 0.224 0.137 0.297);
+      --purple5: color(display-p3 0.264 0.167 0.349);
+      --purple6: color(display-p3 0.311 0.208 0.406);
+      --purple7: color(display-p3 0.381 0.266 0.496);
+      --purple8: color(display-p3 0.49 0.349 0.649);
+      --purple9: color(display-p3 0.523 0.318 0.751);
+      --purple10: color(display-p3 0.57 0.373 0.791);
+      --purple11: color(display-p3 0.8 0.62 1);
+      --purple12: color(display-p3 0.913 0.854 0.971);
+    }
+  }
+}