@fairgarden/design 0.1.0-alpha.0

package/utils/colors/oliveDarkDefault.css

@@ -0,0 +1,101 @@
+/* Generated by scripts/build-colors.js. Do not edit. */
+@layer theme {
+  :root,
+  [data-theme="dark"] {
+    --olive1: #111210;
+    --olive2: #181917;
+    --olive3: #212220;
+    --olive4: #282a27;
+    --olive5: #2f312e;
+    --olive6: #383a36;
+    --olive7: #454843;
+    --olive8: #5c625b;
+    --olive9: #687066;
+    --olive10: #767d74;
+    --olive11: #afb5ad;
+    --olive12: #eceeec;
+    --olive-contrast: #fff;
+    --olive-hover: var(--olive10);
+
+    @media (color-gamut: p3) {
+      --olive1: color(display-p3 0.067 0.07 0.063);
+      --olive2: color(display-p3 0.095 0.098 0.091);
+      --olive3: color(display-p3 0.131 0.135 0.126);
+      --olive4: color(display-p3 0.158 0.163 0.153);
+      --olive5: color(display-p3 0.186 0.192 0.18);
+      --olive6: color(display-p3 0.221 0.229 0.215);
+      --olive7: color(display-p3 0.273 0.284 0.266);
+      --olive8: color(display-p3 0.365 0.382 0.359);
+      --olive9: color(display-p3 0.414 0.438 0.404);
+      --olive10: color(display-p3 0.467 0.49 0.458);
+      --olive11: color(display-p3 0.69 0.709 0.682);
+      --olive12: color(display-p3 0.927 0.933 0.926);
+    }
+  }
+
+  [data-theme="light"] {
+    --olive1: #fcfdfc;
+    --olive2: #f8faf8;
+    --olive3: #eff1ef;
+    --olive4: #e7e9e7;
+    --olive5: #dfe2df;
+    --olive6: #d7dad7;
+    --olive7: #cccfcc;
+    --olive8: #b9bcb8;
+    --olive9: #898e87;
+    --olive10: #7f847d;
+    --olive11: #60655f;
+    --olive12: #1d211c;
+    --olive-contrast: var(--olive12);
+    --olive-hover: var(--olive8);
+
+    @media (color-gamut: p3) {
+      --olive1: color(display-p3 0.989 0.992 0.989);
+      --olive2: color(display-p3 0.974 0.98 0.973);
+      --olive3: color(display-p3 0.939 0.945 0.937);
+      --olive4: color(display-p3 0.907 0.914 0.905);
+      --olive5: color(display-p3 0.878 0.885 0.875);
+      --olive6: color(display-p3 0.846 0.855 0.843);
+      --olive7: color(display-p3 0.803 0.812 0.8);
+      --olive8: color(display-p3 0.727 0.738 0.723);
+      --olive9: color(display-p3 0.541 0.556 0.532);
+      --olive10: color(display-p3 0.5 0.515 0.491);
+      --olive11: color(display-p3 0.38 0.395 0.374);
+      --olive12: color(display-p3 0.117 0.129 0.111);
+    }
+  }
+
+  @media print {
+    :root {
+      --olive1: #fcfdfc;
+      --olive2: #f8faf8;
+      --olive3: #eff1ef;
+      --olive4: #e7e9e7;
+      --olive5: #dfe2df;
+      --olive6: #d7dad7;
+      --olive7: #cccfcc;
+      --olive8: #b9bcb8;
+      --olive9: #898e87;
+      --olive10: #7f847d;
+      --olive11: #60655f;
+      --olive12: #1d211c;
+      --olive-contrast: var(--olive12);
+      --olive-hover: var(--olive8);
+
+      @media (color-gamut: p3) {
+        --olive1: color(display-p3 0.989 0.992 0.989);
+        --olive2: color(display-p3 0.974 0.98 0.973);
+        --olive3: color(display-p3 0.939 0.945 0.937);
+        --olive4: color(display-p3 0.907 0.914 0.905);
+        --olive5: color(display-p3 0.878 0.885 0.875);
+        --olive6: color(display-p3 0.846 0.855 0.843);
+        --olive7: color(display-p3 0.803 0.812 0.8);
+        --olive8: color(display-p3 0.727 0.738 0.723);
+        --olive9: color(display-p3 0.541 0.556 0.532);
+        --olive10: color(display-p3 0.5 0.515 0.491);
+        --olive11: color(display-p3 0.38 0.395 0.374);
+        --olive12: color(display-p3 0.117 0.129 0.111);
+      }
+    }
+  }
+}

package/utils/colors/oliveLightDefault.css

@@ -0,0 +1,67 @@
+/* Generated by scripts/build-colors.js. Do not edit. */
+@layer theme {
+  :root,
+  [data-theme="light"] {
+    --olive1: #fcfdfc;
+    --olive2: #f8faf8;
+    --olive3: #eff1ef;
+    --olive4: #e7e9e7;
+    --olive5: #dfe2df;
+    --olive6: #d7dad7;
+    --olive7: #cccfcc;
+    --olive8: #b9bcb8;
+    --olive9: #898e87;
+    --olive10: #7f847d;
+    --olive11: #60655f;
+    --olive12: #1d211c;
+    --olive-contrast: var(--olive12);
+    --olive-hover: var(--olive8);
+
+    @media (color-gamut: p3) {
+      --olive1: color(display-p3 0.989 0.992 0.989);
+      --olive2: color(display-p3 0.974 0.98 0.973);
+      --olive3: color(display-p3 0.939 0.945 0.937);
+      --olive4: color(display-p3 0.907 0.914 0.905);
+      --olive5: color(display-p3 0.878 0.885 0.875);
+      --olive6: color(display-p3 0.846 0.855 0.843);
+      --olive7: color(display-p3 0.803 0.812 0.8);
+      --olive8: color(display-p3 0.727 0.738 0.723);
+      --olive9: color(display-p3 0.541 0.556 0.532);
+      --olive10: color(display-p3 0.5 0.515 0.491);
+      --olive11: color(display-p3 0.38 0.395 0.374);
+      --olive12: color(display-p3 0.117 0.129 0.111);
+    }
+  }
+
+  [data-theme="dark"] {
+    --olive1: #111210;
+    --olive2: #181917;
+    --olive3: #212220;
+    --olive4: #282a27;
+    --olive5: #2f312e;
+    --olive6: #383a36;
+    --olive7: #454843;
+    --olive8: #5c625b;
+    --olive9: #687066;
+    --olive10: #767d74;
+    --olive11: #afb5ad;
+    --olive12: #eceeec;
+    --olive-contrast: #fff;
+    --olive-hover: var(--olive10);
+
+    @media (color-gamut: p3) {
+      --olive1: color(display-p3 0.067 0.07 0.063);
+      --olive2: color(display-p3 0.095 0.098 0.091);
+      --olive3: color(display-p3 0.131 0.135 0.126);
+      --olive4: color(display-p3 0.158 0.163 0.153);
+      --olive5: color(display-p3 0.186 0.192 0.18);
+      --olive6: color(display-p3 0.221 0.229 0.215);
+      --olive7: color(display-p3 0.273 0.284 0.266);
+      --olive8: color(display-p3 0.365 0.382 0.359);
+      --olive9: color(display-p3 0.414 0.438 0.404);
+      --olive10: color(display-p3 0.467 0.49 0.458);
+      --olive11: color(display-p3 0.69 0.709 0.682);
+      --olive12: color(display-p3 0.927 0.933 0.926);
+    }
+  }
+}

package/utils/colors/orange.css

@@ -0,0 +1,101 @@
+/* Generated by scripts/build-colors.js. Do not edit. */
+@layer theme {
+  :root,
+  [data-theme="light"] {
+    --orange1: #fefcfb;
+    --orange2: #fff7ed;
+    --orange3: #ffefd6;
+    --orange4: #ffdfb5;
+    --orange5: #ffd19a;
+    --orange6: #ffc182;
+    --orange7: #f5ae73;
+    --orange8: #ec9455;
+    --orange9: #f76b15;
+    --orange10: #ef5f00;
+    --orange11: #cc4e00;
+    --orange12: #582d1d;
+    --orange-contrast: var(--orange12);
+    --orange-hover: var(--orange8);
+
+    @media (color-gamut: p3) {
+      --orange1: color(display-p3 0.995 0.988 0.985);
+      --orange2: color(display-p3 0.994 0.968 0.934);
+      --orange3: color(display-p3 0.989 0.938 0.85);
+      --orange4: color(display-p3 1 0.874 0.687);
+      --orange5: color(display-p3 1 0.821 0.583);
+      --orange6: color(display-p3 0.975 0.767 0.545);
+      --orange7: color(display-p3 0.919 0.693 0.486);
+      --orange8: color(display-p3 0.877 0.597 0.379);
+      --orange9: color(display-p3 0.9 0.45 0.2);
+      --orange10: color(display-p3 0.87 0.409 0.164);
+      --orange11: color(display-p3 0.76 0.34 0);
+      --orange12: color(display-p3 0.323 0.185 0.127);
+    }
+  }
+
+  [data-theme="dark"] {
+    --orange1: #17120e;
+    --orange2: #1e160f;
+    --orange3: #331e0b;
+    --orange4: #462100;
+    --orange5: #562800;
+    --orange6: #66350c;
+    --orange7: #7e451d;
+    --orange8: #a35829;
+    --orange9: #f76b15;
+    --orange10: #ff801f;
+    --orange11: #ffa057;
+    --orange12: #ffe0c2;
+    --orange-contrast: var(--orange1);
+    --orange-hover: var(--orange10);
+
+    @media (color-gamut: p3) {
+      --orange1: color(display-p3 0.088 0.07 0.057);
+      --orange2: color(display-p3 0.113 0.089 0.061);
+      --orange3: color(display-p3 0.189 0.12 0.056);
+      --orange4: color(display-p3 0.262 0.132 0);
+      --orange5: color(display-p3 0.315 0.168 0.016);
+      --orange6: color(display-p3 0.376 0.219 0.088);
+      --orange7: color(display-p3 0.465 0.283 0.147);
+      --orange8: color(display-p3 0.601 0.359 0.201);
+      --orange9: color(display-p3 0.9 0.45 0.2);
+      --orange10: color(display-p3 0.98 0.51 0.23);
+      --orange11: color(display-p3 1 0.63 0.38);
+      --orange12: color(display-p3 0.98 0.883 0.775);
+    }
+  }
+
+  @media only screen and (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]) {
+      --orange1: #17120e;
+      --orange2: #1e160f;
+      --orange3: #331e0b;
+      --orange4: #462100;
+      --orange5: #562800;
+      --orange6: #66350c;
+      --orange7: #7e451d;
+      --orange8: #a35829;
+      --orange9: #f76b15;
+      --orange10: #ff801f;
+      --orange11: #ffa057;
+      --orange12: #ffe0c2;
+      --orange-contrast: var(--orange1);
+      --orange-hover: var(--orange10);
+
+      @media (color-gamut: p3) {
+        --orange1: color(display-p3 0.088 0.07 0.057);
+        --orange2: color(display-p3 0.113 0.089 0.061);
+        --orange3: color(display-p3 0.189 0.12 0.056);
+        --orange4: color(display-p3 0.262 0.132 0);
+        --orange5: color(display-p3 0.315 0.168 0.016);
+        --orange6: color(display-p3 0.376 0.219 0.088);
+        --orange7: color(display-p3 0.465 0.283 0.147);
+        --orange8: color(display-p3 0.601 0.359 0.201);
+        --orange9: color(display-p3 0.9 0.45 0.2);
+        --orange10: color(display-p3 0.98 0.51 0.23);
+        --orange11: color(display-p3 1 0.63 0.38);
+        --orange12: color(display-p3 0.98 0.883 0.775);
+      }
+    }
+  }
+}

package/utils/colors/orangeDarkDefault.css

@@ -0,0 +1,101 @@
+/* Generated by scripts/build-colors.js. Do not edit. */
+@layer theme {
+  :root,
+  [data-theme="dark"] {
+    --orange1: #17120e;
+    --orange2: #1e160f;
+    --orange3: #331e0b;
+    --orange4: #462100;
+    --orange5: #562800;
+    --orange6: #66350c;
+    --orange7: #7e451d;
+    --orange8: #a35829;
+    --orange9: #f76b15;
+    --orange10: #ff801f;
+    --orange11: #ffa057;
+    --orange12: #ffe0c2;
+    --orange-contrast: var(--orange1);
+    --orange-hover: var(--orange10);
+
+    @media (color-gamut: p3) {
+      --orange1: color(display-p3 0.088 0.07 0.057);
+      --orange2: color(display-p3 0.113 0.089 0.061);
+      --orange3: color(display-p3 0.189 0.12 0.056);
+      --orange4: color(display-p3 0.262 0.132 0);
+      --orange5: color(display-p3 0.315 0.168 0.016);
+      --orange6: color(display-p3 0.376 0.219 0.088);
+      --orange7: color(display-p3 0.465 0.283 0.147);
+      --orange8: color(display-p3 0.601 0.359 0.201);
+      --orange9: color(display-p3 0.9 0.45 0.2);
+      --orange10: color(display-p3 0.98 0.51 0.23);
+      --orange11: color(display-p3 1 0.63 0.38);
+      --orange12: color(display-p3 0.98 0.883 0.775);
+    }
+  }
+
+  [data-theme="light"] {
+    --orange1: #fefcfb;
+    --orange2: #fff7ed;
+    --orange3: #ffefd6;
+    --orange4: #ffdfb5;
+    --orange5: #ffd19a;
+    --orange6: #ffc182;
+    --orange7: #f5ae73;
+    --orange8: #ec9455;
+    --orange9: #f76b15;
+    --orange10: #ef5f00;
+    --orange11: #cc4e00;
+    --orange12: #582d1d;
+    --orange-contrast: var(--orange12);
+    --orange-hover: var(--orange8);
+
+    @media (color-gamut: p3) {
+      --orange1: color(display-p3 0.995 0.988 0.985);
+      --orange2: color(display-p3 0.994 0.968 0.934);
+      --orange3: color(display-p3 0.989 0.938 0.85);
+      --orange4: color(display-p3 1 0.874 0.687);
+      --orange5: color(display-p3 1 0.821 0.583);
+      --orange6: color(display-p3 0.975 0.767 0.545);
+      --orange7: color(display-p3 0.919 0.693 0.486);
+      --orange8: color(display-p3 0.877 0.597 0.379);
+      --orange9: color(display-p3 0.9 0.45 0.2);
+      --orange10: color(display-p3 0.87 0.409 0.164);
+      --orange11: color(display-p3 0.76 0.34 0);
+      --orange12: color(display-p3 0.323 0.185 0.127);
+    }
+  }
+
+  @media print {
+    :root {
+      --orange1: #fefcfb;
+      --orange2: #fff7ed;
+      --orange3: #ffefd6;
+      --orange4: #ffdfb5;
+      --orange5: #ffd19a;
+      --orange6: #ffc182;
+      --orange7: #f5ae73;
+      --orange8: #ec9455;
+      --orange9: #f76b15;
+      --orange10: #ef5f00;
+      --orange11: #cc4e00;
+      --orange12: #582d1d;
+      --orange-contrast: var(--orange12);
+      --orange-hover: var(--orange8);
+
+      @media (color-gamut: p3) {
+        --orange1: color(display-p3 0.995 0.988 0.985);
+        --orange2: color(display-p3 0.994 0.968 0.934);
+        --orange3: color(display-p3 0.989 0.938 0.85);
+        --orange4: color(display-p3 1 0.874 0.687);
+        --orange5: color(display-p3 1 0.821 0.583);
+        --orange6: color(display-p3 0.975 0.767 0.545);
+        --orange7: color(display-p3 0.919 0.693 0.486);
+        --orange8: color(display-p3 0.877 0.597 0.379);
+        --orange9: color(display-p3 0.9 0.45 0.2);
+        --orange10: color(display-p3 0.87 0.409 0.164);
+        --orange11: color(display-p3 0.76 0.34 0);
+        --orange12: color(display-p3 0.323 0.185 0.127);
+      }
+    }
+  }
+}

package/utils/colors/orangeLightDefault.css

@@ -0,0 +1,67 @@
+/* Generated by scripts/build-colors.js. Do not edit. */
+@layer theme {
+  :root,
+  [data-theme="light"] {
+    --orange1: #fefcfb;
+    --orange2: #fff7ed;
+    --orange3: #ffefd6;
+    --orange4: #ffdfb5;
+    --orange5: #ffd19a;
+    --orange6: #ffc182;
+    --orange7: #f5ae73;
+    --orange8: #ec9455;
+    --orange9: #f76b15;
+    --orange10: #ef5f00;
+    --orange11: #cc4e00;
+    --orange12: #582d1d;
+    --orange-contrast: var(--orange12);
+    --orange-hover: var(--orange8);
+
+    @media (color-gamut: p3) {
+      --orange1: color(display-p3 0.995 0.988 0.985);
+      --orange2: color(display-p3 0.994 0.968 0.934);
+      --orange3: color(display-p3 0.989 0.938 0.85);
+      --orange4: color(display-p3 1 0.874 0.687);
+      --orange5: color(display-p3 1 0.821 0.583);
+      --orange6: color(display-p3 0.975 0.767 0.545);
+      --orange7: color(display-p3 0.919 0.693 0.486);
+      --orange8: color(display-p3 0.877 0.597 0.379);
+      --orange9: color(display-p3 0.9 0.45 0.2);
+      --orange10: color(display-p3 0.87 0.409 0.164);
+      --orange11: color(display-p3 0.76 0.34 0);
+      --orange12: color(display-p3 0.323 0.185 0.127);
+    }
+  }
+
+  [data-theme="dark"] {
+    --orange1: #17120e;
+    --orange2: #1e160f;
+    --orange3: #331e0b;
+    --orange4: #462100;
+    --orange5: #562800;
+    --orange6: #66350c;
+    --orange7: #7e451d;
+    --orange8: #a35829;
+    --orange9: #f76b15;
+    --orange10: #ff801f;
+    --orange11: #ffa057;
+    --orange12: #ffe0c2;
+    --orange-contrast: var(--orange1);
+    --orange-hover: var(--orange10);
+
+    @media (color-gamut: p3) {
+      --orange1: color(display-p3 0.088 0.07 0.057);
+      --orange2: color(display-p3 0.113 0.089 0.061);
+      --orange3: color(display-p3 0.189 0.12 0.056);
+      --orange4: color(display-p3 0.262 0.132 0);
+      --orange5: color(display-p3 0.315 0.168 0.016);
+      --orange6: color(display-p3 0.376 0.219 0.088);
+      --orange7: color(display-p3 0.465 0.283 0.147);
+      --orange8: color(display-p3 0.601 0.359 0.201);
+      --orange9: color(display-p3 0.9 0.45 0.2);
+      --orange10: color(display-p3 0.98 0.51 0.23);
+      --orange11: color(display-p3 1 0.63 0.38);
+      --orange12: color(display-p3 0.98 0.883 0.775);
+    }
+  }
+}

package/utils/colors/pink.css

@@ -0,0 +1,101 @@
+/* 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);
+    }
+  }
+
+  @media only screen and (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]) {
+      --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/pinkDarkDefault.css

@@ -0,0 +1,101 @@
+/* Generated by scripts/build-colors.js. Do not edit. */
+@layer theme {
+  :root,
+  [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);
+    }
+  }
+
+  [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);
+    }
+  }
+
+  @media print {
+    :root {
+      --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);
+      }
+    }
+  }
+}