@fairgarden/design 0.1.0-alpha.0

package/utils/colors/skyLightDefault.css

@@ -0,0 +1,67 @@
+/* Generated by scripts/build-colors.js. Do not edit. */
+@layer theme {
+  :root,
+  [data-theme="light"] {
+    --sky1: #f9feff;
+    --sky2: #f1fafd;
+    --sky3: #e1f6fd;
+    --sky4: #d1f0fa;
+    --sky5: #bee7f5;
+    --sky6: #a9daed;
+    --sky7: #8dcae3;
+    --sky8: #60b3d7;
+    --sky9: #7ce2fe;
+    --sky10: #74daf8;
+    --sky11: #00749e;
+    --sky12: #1d3e56;
+    --sky-contrast: var(--sky12);
+    --sky-hover: var(--sky5);
+
+    @media (color-gamut: p3) {
+      --sky1: color(display-p3 0.98 0.995 0.999);
+      --sky2: color(display-p3 0.953 0.98 0.99);
+      --sky3: color(display-p3 0.899 0.963 0.989);
+      --sky4: color(display-p3 0.842 0.937 0.977);
+      --sky5: color(display-p3 0.777 0.9 0.954);
+      --sky6: color(display-p3 0.701 0.851 0.921);
+      --sky7: color(display-p3 0.604 0.785 0.879);
+      --sky8: color(display-p3 0.457 0.696 0.829);
+      --sky9: color(display-p3 0.585 0.877 0.983);
+      --sky10: color(display-p3 0.555 0.845 0.959);
+      --sky11: color(display-p3 0.193 0.448 0.605);
+      --sky12: color(display-p3 0.145 0.241 0.329);
+    }
+  }
+
+  [data-theme="dark"] {
+    --sky1: #0d141f;
+    --sky2: #111a27;
+    --sky3: #112840;
+    --sky4: #113555;
+    --sky5: #154467;
+    --sky6: #1b537b;
+    --sky7: #1f6692;
+    --sky8: #197cae;
+    --sky9: #7ce2fe;
+    --sky10: #a8eeff;
+    --sky11: #75c7f0;
+    --sky12: #c2f3ff;
+    --sky-contrast: var(--sky1);
+    --sky-hover: var(--sky10);
+
+    @media (color-gamut: p3) {
+      --sky1: color(display-p3 0.056 0.078 0.116);
+      --sky2: color(display-p3 0.075 0.101 0.149);
+      --sky3: color(display-p3 0.089 0.154 0.244);
+      --sky4: color(display-p3 0.106 0.207 0.323);
+      --sky5: color(display-p3 0.135 0.261 0.394);
+      --sky6: color(display-p3 0.17 0.322 0.469);
+      --sky7: color(display-p3 0.205 0.394 0.557);
+      --sky8: color(display-p3 0.232 0.48 0.665);
+      --sky9: color(display-p3 0.585 0.877 0.983);
+      --sky10: color(display-p3 0.718 0.925 0.991);
+      --sky11: color(display-p3 0.536 0.772 0.924);
+      --sky12: color(display-p3 0.799 0.947 0.993);
+    }
+  }
+}

package/utils/colors/slate.css

@@ -0,0 +1,101 @@
+/* Generated by scripts/build-colors.js. Do not edit. */
+@layer theme {
+  :root,
+  [data-theme="light"] {
+    --slate1: #fcfcfd;
+    --slate2: #f9f9fb;
+    --slate3: #f0f0f3;
+    --slate4: #e8e8ec;
+    --slate5: #e0e1e6;
+    --slate6: #d9d9e0;
+    --slate7: #cdced6;
+    --slate8: #b9bbc6;
+    --slate9: #8b8d98;
+    --slate10: #80838d;
+    --slate11: #60646c;
+    --slate12: #1c2024;
+    --slate-contrast: var(--slate12);
+    --slate-hover: var(--slate8);
+
+    @media (color-gamut: p3) {
+      --slate1: color(display-p3 0.988 0.988 0.992);
+      --slate2: color(display-p3 0.976 0.976 0.984);
+      --slate3: color(display-p3 0.94 0.941 0.953);
+      --slate4: color(display-p3 0.908 0.909 0.925);
+      --slate5: color(display-p3 0.88 0.881 0.901);
+      --slate6: color(display-p3 0.85 0.852 0.876);
+      --slate7: color(display-p3 0.805 0.808 0.838);
+      --slate8: color(display-p3 0.727 0.733 0.773);
+      --slate9: color(display-p3 0.547 0.553 0.592);
+      --slate10: color(display-p3 0.503 0.512 0.549);
+      --slate11: color(display-p3 0.379 0.392 0.421);
+      --slate12: color(display-p3 0.113 0.125 0.14);
+    }
+  }
+
+  [data-theme="dark"] {
+    --slate1: #111113;
+    --slate2: #18191b;
+    --slate3: #212225;
+    --slate4: #272a2d;
+    --slate5: #2e3135;
+    --slate6: #363a3f;
+    --slate7: #43484e;
+    --slate8: #5a6169;
+    --slate9: #696e77;
+    --slate10: #777b84;
+    --slate11: #b0b4ba;
+    --slate12: #edeef0;
+    --slate-contrast: #fff;
+    --slate-hover: var(--slate10);
+
+    @media (color-gamut: p3) {
+      --slate1: color(display-p3 0.067 0.067 0.074);
+      --slate2: color(display-p3 0.095 0.098 0.105);
+      --slate3: color(display-p3 0.13 0.135 0.145);
+      --slate4: color(display-p3 0.156 0.163 0.176);
+      --slate5: color(display-p3 0.183 0.191 0.206);
+      --slate6: color(display-p3 0.215 0.226 0.244);
+      --slate7: color(display-p3 0.265 0.28 0.302);
+      --slate8: color(display-p3 0.357 0.381 0.409);
+      --slate9: color(display-p3 0.415 0.431 0.463);
+      --slate10: color(display-p3 0.469 0.483 0.514);
+      --slate11: color(display-p3 0.692 0.704 0.728);
+      --slate12: color(display-p3 0.93 0.933 0.94);
+    }
+  }
+
+  @media only screen and (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]) {
+      --slate1: #111113;
+      --slate2: #18191b;
+      --slate3: #212225;
+      --slate4: #272a2d;
+      --slate5: #2e3135;
+      --slate6: #363a3f;
+      --slate7: #43484e;
+      --slate8: #5a6169;
+      --slate9: #696e77;
+      --slate10: #777b84;
+      --slate11: #b0b4ba;
+      --slate12: #edeef0;
+      --slate-contrast: #fff;
+      --slate-hover: var(--slate10);
+
+      @media (color-gamut: p3) {
+        --slate1: color(display-p3 0.067 0.067 0.074);
+        --slate2: color(display-p3 0.095 0.098 0.105);
+        --slate3: color(display-p3 0.13 0.135 0.145);
+        --slate4: color(display-p3 0.156 0.163 0.176);
+        --slate5: color(display-p3 0.183 0.191 0.206);
+        --slate6: color(display-p3 0.215 0.226 0.244);
+        --slate7: color(display-p3 0.265 0.28 0.302);
+        --slate8: color(display-p3 0.357 0.381 0.409);
+        --slate9: color(display-p3 0.415 0.431 0.463);
+        --slate10: color(display-p3 0.469 0.483 0.514);
+        --slate11: color(display-p3 0.692 0.704 0.728);
+        --slate12: color(display-p3 0.93 0.933 0.94);
+      }
+    }
+  }
+}

package/utils/colors/slateDarkDefault.css

@@ -0,0 +1,101 @@
+/* Generated by scripts/build-colors.js. Do not edit. */
+@layer theme {
+  :root,
+  [data-theme="dark"] {
+    --slate1: #111113;
+    --slate2: #18191b;
+    --slate3: #212225;
+    --slate4: #272a2d;
+    --slate5: #2e3135;
+    --slate6: #363a3f;
+    --slate7: #43484e;
+    --slate8: #5a6169;
+    --slate9: #696e77;
+    --slate10: #777b84;
+    --slate11: #b0b4ba;
+    --slate12: #edeef0;
+    --slate-contrast: #fff;
+    --slate-hover: var(--slate10);
+
+    @media (color-gamut: p3) {
+      --slate1: color(display-p3 0.067 0.067 0.074);
+      --slate2: color(display-p3 0.095 0.098 0.105);
+      --slate3: color(display-p3 0.13 0.135 0.145);
+      --slate4: color(display-p3 0.156 0.163 0.176);
+      --slate5: color(display-p3 0.183 0.191 0.206);
+      --slate6: color(display-p3 0.215 0.226 0.244);
+      --slate7: color(display-p3 0.265 0.28 0.302);
+      --slate8: color(display-p3 0.357 0.381 0.409);
+      --slate9: color(display-p3 0.415 0.431 0.463);
+      --slate10: color(display-p3 0.469 0.483 0.514);
+      --slate11: color(display-p3 0.692 0.704 0.728);
+      --slate12: color(display-p3 0.93 0.933 0.94);
+    }
+  }
+
+  [data-theme="light"] {
+    --slate1: #fcfcfd;
+    --slate2: #f9f9fb;
+    --slate3: #f0f0f3;
+    --slate4: #e8e8ec;
+    --slate5: #e0e1e6;
+    --slate6: #d9d9e0;
+    --slate7: #cdced6;
+    --slate8: #b9bbc6;
+    --slate9: #8b8d98;
+    --slate10: #80838d;
+    --slate11: #60646c;
+    --slate12: #1c2024;
+    --slate-contrast: var(--slate12);
+    --slate-hover: var(--slate8);
+
+    @media (color-gamut: p3) {
+      --slate1: color(display-p3 0.988 0.988 0.992);
+      --slate2: color(display-p3 0.976 0.976 0.984);
+      --slate3: color(display-p3 0.94 0.941 0.953);
+      --slate4: color(display-p3 0.908 0.909 0.925);
+      --slate5: color(display-p3 0.88 0.881 0.901);
+      --slate6: color(display-p3 0.85 0.852 0.876);
+      --slate7: color(display-p3 0.805 0.808 0.838);
+      --slate8: color(display-p3 0.727 0.733 0.773);
+      --slate9: color(display-p3 0.547 0.553 0.592);
+      --slate10: color(display-p3 0.503 0.512 0.549);
+      --slate11: color(display-p3 0.379 0.392 0.421);
+      --slate12: color(display-p3 0.113 0.125 0.14);
+    }
+  }
+
+  @media print {
+    :root {
+      --slate1: #fcfcfd;
+      --slate2: #f9f9fb;
+      --slate3: #f0f0f3;
+      --slate4: #e8e8ec;
+      --slate5: #e0e1e6;
+      --slate6: #d9d9e0;
+      --slate7: #cdced6;
+      --slate8: #b9bbc6;
+      --slate9: #8b8d98;
+      --slate10: #80838d;
+      --slate11: #60646c;
+      --slate12: #1c2024;
+      --slate-contrast: var(--slate12);
+      --slate-hover: var(--slate8);
+
+      @media (color-gamut: p3) {
+        --slate1: color(display-p3 0.988 0.988 0.992);
+        --slate2: color(display-p3 0.976 0.976 0.984);
+        --slate3: color(display-p3 0.94 0.941 0.953);
+        --slate4: color(display-p3 0.908 0.909 0.925);
+        --slate5: color(display-p3 0.88 0.881 0.901);
+        --slate6: color(display-p3 0.85 0.852 0.876);
+        --slate7: color(display-p3 0.805 0.808 0.838);
+        --slate8: color(display-p3 0.727 0.733 0.773);
+        --slate9: color(display-p3 0.547 0.553 0.592);
+        --slate10: color(display-p3 0.503 0.512 0.549);
+        --slate11: color(display-p3 0.379 0.392 0.421);
+        --slate12: color(display-p3 0.113 0.125 0.14);
+      }
+    }
+  }
+}

package/utils/colors/slateLightDefault.css

@@ -0,0 +1,67 @@
+/* Generated by scripts/build-colors.js. Do not edit. */
+@layer theme {
+  :root,
+  [data-theme="light"] {
+    --slate1: #fcfcfd;
+    --slate2: #f9f9fb;
+    --slate3: #f0f0f3;
+    --slate4: #e8e8ec;
+    --slate5: #e0e1e6;
+    --slate6: #d9d9e0;
+    --slate7: #cdced6;
+    --slate8: #b9bbc6;
+    --slate9: #8b8d98;
+    --slate10: #80838d;
+    --slate11: #60646c;
+    --slate12: #1c2024;
+    --slate-contrast: var(--slate12);
+    --slate-hover: var(--slate8);
+
+    @media (color-gamut: p3) {
+      --slate1: color(display-p3 0.988 0.988 0.992);
+      --slate2: color(display-p3 0.976 0.976 0.984);
+      --slate3: color(display-p3 0.94 0.941 0.953);
+      --slate4: color(display-p3 0.908 0.909 0.925);
+      --slate5: color(display-p3 0.88 0.881 0.901);
+      --slate6: color(display-p3 0.85 0.852 0.876);
+      --slate7: color(display-p3 0.805 0.808 0.838);
+      --slate8: color(display-p3 0.727 0.733 0.773);
+      --slate9: color(display-p3 0.547 0.553 0.592);
+      --slate10: color(display-p3 0.503 0.512 0.549);
+      --slate11: color(display-p3 0.379 0.392 0.421);
+      --slate12: color(display-p3 0.113 0.125 0.14);
+    }
+  }
+
+  [data-theme="dark"] {
+    --slate1: #111113;
+    --slate2: #18191b;
+    --slate3: #212225;
+    --slate4: #272a2d;
+    --slate5: #2e3135;
+    --slate6: #363a3f;
+    --slate7: #43484e;
+    --slate8: #5a6169;
+    --slate9: #696e77;
+    --slate10: #777b84;
+    --slate11: #b0b4ba;
+    --slate12: #edeef0;
+    --slate-contrast: #fff;
+    --slate-hover: var(--slate10);
+
+    @media (color-gamut: p3) {
+      --slate1: color(display-p3 0.067 0.067 0.074);
+      --slate2: color(display-p3 0.095 0.098 0.105);
+      --slate3: color(display-p3 0.13 0.135 0.145);
+      --slate4: color(display-p3 0.156 0.163 0.176);
+      --slate5: color(display-p3 0.183 0.191 0.206);
+      --slate6: color(display-p3 0.215 0.226 0.244);
+      --slate7: color(display-p3 0.265 0.28 0.302);
+      --slate8: color(display-p3 0.357 0.381 0.409);
+      --slate9: color(display-p3 0.415 0.431 0.463);
+      --slate10: color(display-p3 0.469 0.483 0.514);
+      --slate11: color(display-p3 0.692 0.704 0.728);
+      --slate12: color(display-p3 0.93 0.933 0.94);
+    }
+  }
+}

package/utils/colors/teal.css

@@ -0,0 +1,101 @@
+/* Generated by scripts/build-colors.js. Do not edit. */
+@layer theme {
+  :root,
+  [data-theme="light"] {
+    --teal1: #fafefd;
+    --teal2: #f3fbf9;
+    --teal3: #e0f8f3;
+    --teal4: #ccf3ea;
+    --teal5: #b8eae0;
+    --teal6: #a1ded2;
+    --teal7: #83cdc1;
+    --teal8: #53b9ab;
+    --teal9: #12a594;
+    --teal10: #0d9b8a;
+    --teal11: #008573;
+    --teal12: #0d3d38;
+    --teal-contrast: var(--teal12);
+    --teal-hover: var(--teal8);
+
+    @media (color-gamut: p3) {
+      --teal1: color(display-p3 0.983 0.996 0.992);
+      --teal2: color(display-p3 0.958 0.983 0.976);
+      --teal3: color(display-p3 0.895 0.971 0.952);
+      --teal4: color(display-p3 0.831 0.949 0.92);
+      --teal5: color(display-p3 0.761 0.914 0.878);
+      --teal6: color(display-p3 0.682 0.864 0.825);
+      --teal7: color(display-p3 0.581 0.798 0.756);
+      --teal8: color(display-p3 0.433 0.716 0.671);
+      --teal9: color(display-p3 0.297 0.637 0.581);
+      --teal10: color(display-p3 0.275 0.599 0.542);
+      --teal11: color(display-p3 0.08 0.5 0.43);
+      --teal12: color(display-p3 0.11 0.235 0.219);
+    }
+  }
+
+  [data-theme="dark"] {
+    --teal1: #0d1514;
+    --teal2: #111c1b;
+    --teal3: #0d2d2a;
+    --teal4: #023b37;
+    --teal5: #084843;
+    --teal6: #145750;
+    --teal7: #1c6961;
+    --teal8: #207e73;
+    --teal9: #12a594;
+    --teal10: #0eb39e;
+    --teal11: #0bd8b6;
+    --teal12: #adf0dd;
+    --teal-contrast: var(--teal1);
+    --teal-hover: var(--teal10);
+
+    @media (color-gamut: p3) {
+      --teal1: color(display-p3 0.059 0.083 0.079);
+      --teal2: color(display-p3 0.075 0.11 0.107);
+      --teal3: color(display-p3 0.087 0.175 0.165);
+      --teal4: color(display-p3 0.087 0.227 0.214);
+      --teal5: color(display-p3 0.12 0.277 0.261);
+      --teal6: color(display-p3 0.162 0.335 0.314);
+      --teal7: color(display-p3 0.205 0.406 0.379);
+      --teal8: color(display-p3 0.245 0.489 0.453);
+      --teal9: color(display-p3 0.297 0.637 0.581);
+      --teal10: color(display-p3 0.319 0.69 0.62);
+      --teal11: color(display-p3 0.388 0.835 0.719);
+      --teal12: color(display-p3 0.734 0.934 0.87);
+    }
+  }
+
+  @media only screen and (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]) {
+      --teal1: #0d1514;
+      --teal2: #111c1b;
+      --teal3: #0d2d2a;
+      --teal4: #023b37;
+      --teal5: #084843;
+      --teal6: #145750;
+      --teal7: #1c6961;
+      --teal8: #207e73;
+      --teal9: #12a594;
+      --teal10: #0eb39e;
+      --teal11: #0bd8b6;
+      --teal12: #adf0dd;
+      --teal-contrast: var(--teal1);
+      --teal-hover: var(--teal10);
+
+      @media (color-gamut: p3) {
+        --teal1: color(display-p3 0.059 0.083 0.079);
+        --teal2: color(display-p3 0.075 0.11 0.107);
+        --teal3: color(display-p3 0.087 0.175 0.165);
+        --teal4: color(display-p3 0.087 0.227 0.214);
+        --teal5: color(display-p3 0.12 0.277 0.261);
+        --teal6: color(display-p3 0.162 0.335 0.314);
+        --teal7: color(display-p3 0.205 0.406 0.379);
+        --teal8: color(display-p3 0.245 0.489 0.453);
+        --teal9: color(display-p3 0.297 0.637 0.581);
+        --teal10: color(display-p3 0.319 0.69 0.62);
+        --teal11: color(display-p3 0.388 0.835 0.719);
+        --teal12: color(display-p3 0.734 0.934 0.87);
+      }
+    }
+  }
+}

package/utils/colors/tealDarkDefault.css

@@ -0,0 +1,101 @@
+/* Generated by scripts/build-colors.js. Do not edit. */
+@layer theme {
+  :root,
+  [data-theme="dark"] {
+    --teal1: #0d1514;
+    --teal2: #111c1b;
+    --teal3: #0d2d2a;
+    --teal4: #023b37;
+    --teal5: #084843;
+    --teal6: #145750;
+    --teal7: #1c6961;
+    --teal8: #207e73;
+    --teal9: #12a594;
+    --teal10: #0eb39e;
+    --teal11: #0bd8b6;
+    --teal12: #adf0dd;
+    --teal-contrast: var(--teal1);
+    --teal-hover: var(--teal10);
+
+    @media (color-gamut: p3) {
+      --teal1: color(display-p3 0.059 0.083 0.079);
+      --teal2: color(display-p3 0.075 0.11 0.107);
+      --teal3: color(display-p3 0.087 0.175 0.165);
+      --teal4: color(display-p3 0.087 0.227 0.214);
+      --teal5: color(display-p3 0.12 0.277 0.261);
+      --teal6: color(display-p3 0.162 0.335 0.314);
+      --teal7: color(display-p3 0.205 0.406 0.379);
+      --teal8: color(display-p3 0.245 0.489 0.453);
+      --teal9: color(display-p3 0.297 0.637 0.581);
+      --teal10: color(display-p3 0.319 0.69 0.62);
+      --teal11: color(display-p3 0.388 0.835 0.719);
+      --teal12: color(display-p3 0.734 0.934 0.87);
+    }
+  }
+
+  [data-theme="light"] {
+    --teal1: #fafefd;
+    --teal2: #f3fbf9;
+    --teal3: #e0f8f3;
+    --teal4: #ccf3ea;
+    --teal5: #b8eae0;
+    --teal6: #a1ded2;
+    --teal7: #83cdc1;
+    --teal8: #53b9ab;
+    --teal9: #12a594;
+    --teal10: #0d9b8a;
+    --teal11: #008573;
+    --teal12: #0d3d38;
+    --teal-contrast: var(--teal12);
+    --teal-hover: var(--teal8);
+
+    @media (color-gamut: p3) {
+      --teal1: color(display-p3 0.983 0.996 0.992);
+      --teal2: color(display-p3 0.958 0.983 0.976);
+      --teal3: color(display-p3 0.895 0.971 0.952);
+      --teal4: color(display-p3 0.831 0.949 0.92);
+      --teal5: color(display-p3 0.761 0.914 0.878);
+      --teal6: color(display-p3 0.682 0.864 0.825);
+      --teal7: color(display-p3 0.581 0.798 0.756);
+      --teal8: color(display-p3 0.433 0.716 0.671);
+      --teal9: color(display-p3 0.297 0.637 0.581);
+      --teal10: color(display-p3 0.275 0.599 0.542);
+      --teal11: color(display-p3 0.08 0.5 0.43);
+      --teal12: color(display-p3 0.11 0.235 0.219);
+    }
+  }
+
+  @media print {
+    :root {
+      --teal1: #fafefd;
+      --teal2: #f3fbf9;
+      --teal3: #e0f8f3;
+      --teal4: #ccf3ea;
+      --teal5: #b8eae0;
+      --teal6: #a1ded2;
+      --teal7: #83cdc1;
+      --teal8: #53b9ab;
+      --teal9: #12a594;
+      --teal10: #0d9b8a;
+      --teal11: #008573;
+      --teal12: #0d3d38;
+      --teal-contrast: var(--teal12);
+      --teal-hover: var(--teal8);
+
+      @media (color-gamut: p3) {
+        --teal1: color(display-p3 0.983 0.996 0.992);
+        --teal2: color(display-p3 0.958 0.983 0.976);
+        --teal3: color(display-p3 0.895 0.971 0.952);
+        --teal4: color(display-p3 0.831 0.949 0.92);
+        --teal5: color(display-p3 0.761 0.914 0.878);
+        --teal6: color(display-p3 0.682 0.864 0.825);
+        --teal7: color(display-p3 0.581 0.798 0.756);
+        --teal8: color(display-p3 0.433 0.716 0.671);
+        --teal9: color(display-p3 0.297 0.637 0.581);
+        --teal10: color(display-p3 0.275 0.599 0.542);
+        --teal11: color(display-p3 0.08 0.5 0.43);
+        --teal12: color(display-p3 0.11 0.235 0.219);
+      }
+    }
+  }
+}

package/utils/colors/tealLightDefault.css

@@ -0,0 +1,67 @@
+/* Generated by scripts/build-colors.js. Do not edit. */
+@layer theme {
+  :root,
+  [data-theme="light"] {
+    --teal1: #fafefd;
+    --teal2: #f3fbf9;
+    --teal3: #e0f8f3;
+    --teal4: #ccf3ea;
+    --teal5: #b8eae0;
+    --teal6: #a1ded2;
+    --teal7: #83cdc1;
+    --teal8: #53b9ab;
+    --teal9: #12a594;
+    --teal10: #0d9b8a;
+    --teal11: #008573;
+    --teal12: #0d3d38;
+    --teal-contrast: var(--teal12);
+    --teal-hover: var(--teal8);
+
+    @media (color-gamut: p3) {
+      --teal1: color(display-p3 0.983 0.996 0.992);
+      --teal2: color(display-p3 0.958 0.983 0.976);
+      --teal3: color(display-p3 0.895 0.971 0.952);
+      --teal4: color(display-p3 0.831 0.949 0.92);
+      --teal5: color(display-p3 0.761 0.914 0.878);
+      --teal6: color(display-p3 0.682 0.864 0.825);
+      --teal7: color(display-p3 0.581 0.798 0.756);
+      --teal8: color(display-p3 0.433 0.716 0.671);
+      --teal9: color(display-p3 0.297 0.637 0.581);
+      --teal10: color(display-p3 0.275 0.599 0.542);
+      --teal11: color(display-p3 0.08 0.5 0.43);
+      --teal12: color(display-p3 0.11 0.235 0.219);
+    }
+  }
+
+  [data-theme="dark"] {
+    --teal1: #0d1514;
+    --teal2: #111c1b;
+    --teal3: #0d2d2a;
+    --teal4: #023b37;
+    --teal5: #084843;
+    --teal6: #145750;
+    --teal7: #1c6961;
+    --teal8: #207e73;
+    --teal9: #12a594;
+    --teal10: #0eb39e;
+    --teal11: #0bd8b6;
+    --teal12: #adf0dd;
+    --teal-contrast: var(--teal1);
+    --teal-hover: var(--teal10);
+
+    @media (color-gamut: p3) {
+      --teal1: color(display-p3 0.059 0.083 0.079);
+      --teal2: color(display-p3 0.075 0.11 0.107);
+      --teal3: color(display-p3 0.087 0.175 0.165);
+      --teal4: color(display-p3 0.087 0.227 0.214);
+      --teal5: color(display-p3 0.12 0.277 0.261);
+      --teal6: color(display-p3 0.162 0.335 0.314);
+      --teal7: color(display-p3 0.205 0.406 0.379);
+      --teal8: color(display-p3 0.245 0.489 0.453);
+      --teal9: color(display-p3 0.297 0.637 0.581);
+      --teal10: color(display-p3 0.319 0.69 0.62);
+      --teal11: color(display-p3 0.388 0.835 0.719);
+      --teal12: color(display-p3 0.734 0.934 0.87);
+    }
+  }
+}