@fairgarden/design 0.1.0-alpha.0

package/utils/colors/grass.css

@@ -0,0 +1,101 @@
+/* Generated by scripts/build-colors.js. Do not edit. */
+@layer theme {
+  :root,
+  [data-theme="light"] {
+    --grass1: #fbfefb;
+    --grass2: #f5fbf5;
+    --grass3: #e9f6e9;
+    --grass4: #daf1db;
+    --grass5: #c9e8ca;
+    --grass6: #b2ddb5;
+    --grass7: #94ce9a;
+    --grass8: #65ba74;
+    --grass9: #46a758;
+    --grass10: #3e9b4f;
+    --grass11: #2a7e3b;
+    --grass12: #203c25;
+    --grass-contrast: var(--grass12);
+    --grass-hover: var(--grass8);
+
+    @media (color-gamut: p3) {
+      --grass1: color(display-p3 0.986 0.996 0.985);
+      --grass2: color(display-p3 0.966 0.983 0.964);
+      --grass3: color(display-p3 0.923 0.965 0.917);
+      --grass4: color(display-p3 0.872 0.94 0.865);
+      --grass5: color(display-p3 0.811 0.908 0.802);
+      --grass6: color(display-p3 0.733 0.864 0.724);
+      --grass7: color(display-p3 0.628 0.803 0.622);
+      --grass8: color(display-p3 0.477 0.72 0.482);
+      --grass9: color(display-p3 0.38 0.647 0.378);
+      --grass10: color(display-p3 0.344 0.598 0.342);
+      --grass11: color(display-p3 0.263 0.488 0.261);
+      --grass12: color(display-p3 0.151 0.233 0.153);
+    }
+  }
+
+  [data-theme="dark"] {
+    --grass1: #0e1511;
+    --grass2: #141a15;
+    --grass3: #1b2a1e;
+    --grass4: #1d3a24;
+    --grass5: #25482d;
+    --grass6: #2d5736;
+    --grass7: #366740;
+    --grass8: #3e7949;
+    --grass9: #46a758;
+    --grass10: #53b365;
+    --grass11: #71d083;
+    --grass12: #c2f0c2;
+    --grass-contrast: var(--grass1);
+    --grass-hover: var(--grass10);
+
+    @media (color-gamut: p3) {
+      --grass1: color(display-p3 0.062 0.083 0.067);
+      --grass2: color(display-p3 0.083 0.103 0.085);
+      --grass3: color(display-p3 0.118 0.163 0.122);
+      --grass4: color(display-p3 0.142 0.225 0.15);
+      --grass5: color(display-p3 0.178 0.279 0.186);
+      --grass6: color(display-p3 0.217 0.337 0.224);
+      --grass7: color(display-p3 0.258 0.4 0.264);
+      --grass8: color(display-p3 0.302 0.47 0.305);
+      --grass9: color(display-p3 0.38 0.647 0.378);
+      --grass10: color(display-p3 0.426 0.694 0.426);
+      --grass11: color(display-p3 0.535 0.807 0.542);
+      --grass12: color(display-p3 0.797 0.936 0.776);
+    }
+  }
+
+  @media only screen and (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]) {
+      --grass1: #0e1511;
+      --grass2: #141a15;
+      --grass3: #1b2a1e;
+      --grass4: #1d3a24;
+      --grass5: #25482d;
+      --grass6: #2d5736;
+      --grass7: #366740;
+      --grass8: #3e7949;
+      --grass9: #46a758;
+      --grass10: #53b365;
+      --grass11: #71d083;
+      --grass12: #c2f0c2;
+      --grass-contrast: var(--grass1);
+      --grass-hover: var(--grass10);
+
+      @media (color-gamut: p3) {
+        --grass1: color(display-p3 0.062 0.083 0.067);
+        --grass2: color(display-p3 0.083 0.103 0.085);
+        --grass3: color(display-p3 0.118 0.163 0.122);
+        --grass4: color(display-p3 0.142 0.225 0.15);
+        --grass5: color(display-p3 0.178 0.279 0.186);
+        --grass6: color(display-p3 0.217 0.337 0.224);
+        --grass7: color(display-p3 0.258 0.4 0.264);
+        --grass8: color(display-p3 0.302 0.47 0.305);
+        --grass9: color(display-p3 0.38 0.647 0.378);
+        --grass10: color(display-p3 0.426 0.694 0.426);
+        --grass11: color(display-p3 0.535 0.807 0.542);
+        --grass12: color(display-p3 0.797 0.936 0.776);
+      }
+    }
+  }
+}

package/utils/colors/grassDarkDefault.css

@@ -0,0 +1,101 @@
+/* Generated by scripts/build-colors.js. Do not edit. */
+@layer theme {
+  :root,
+  [data-theme="dark"] {
+    --grass1: #0e1511;
+    --grass2: #141a15;
+    --grass3: #1b2a1e;
+    --grass4: #1d3a24;
+    --grass5: #25482d;
+    --grass6: #2d5736;
+    --grass7: #366740;
+    --grass8: #3e7949;
+    --grass9: #46a758;
+    --grass10: #53b365;
+    --grass11: #71d083;
+    --grass12: #c2f0c2;
+    --grass-contrast: var(--grass1);
+    --grass-hover: var(--grass10);
+
+    @media (color-gamut: p3) {
+      --grass1: color(display-p3 0.062 0.083 0.067);
+      --grass2: color(display-p3 0.083 0.103 0.085);
+      --grass3: color(display-p3 0.118 0.163 0.122);
+      --grass4: color(display-p3 0.142 0.225 0.15);
+      --grass5: color(display-p3 0.178 0.279 0.186);
+      --grass6: color(display-p3 0.217 0.337 0.224);
+      --grass7: color(display-p3 0.258 0.4 0.264);
+      --grass8: color(display-p3 0.302 0.47 0.305);
+      --grass9: color(display-p3 0.38 0.647 0.378);
+      --grass10: color(display-p3 0.426 0.694 0.426);
+      --grass11: color(display-p3 0.535 0.807 0.542);
+      --grass12: color(display-p3 0.797 0.936 0.776);
+    }
+  }
+
+  [data-theme="light"] {
+    --grass1: #fbfefb;
+    --grass2: #f5fbf5;
+    --grass3: #e9f6e9;
+    --grass4: #daf1db;
+    --grass5: #c9e8ca;
+    --grass6: #b2ddb5;
+    --grass7: #94ce9a;
+    --grass8: #65ba74;
+    --grass9: #46a758;
+    --grass10: #3e9b4f;
+    --grass11: #2a7e3b;
+    --grass12: #203c25;
+    --grass-contrast: var(--grass12);
+    --grass-hover: var(--grass8);
+
+    @media (color-gamut: p3) {
+      --grass1: color(display-p3 0.986 0.996 0.985);
+      --grass2: color(display-p3 0.966 0.983 0.964);
+      --grass3: color(display-p3 0.923 0.965 0.917);
+      --grass4: color(display-p3 0.872 0.94 0.865);
+      --grass5: color(display-p3 0.811 0.908 0.802);
+      --grass6: color(display-p3 0.733 0.864 0.724);
+      --grass7: color(display-p3 0.628 0.803 0.622);
+      --grass8: color(display-p3 0.477 0.72 0.482);
+      --grass9: color(display-p3 0.38 0.647 0.378);
+      --grass10: color(display-p3 0.344 0.598 0.342);
+      --grass11: color(display-p3 0.263 0.488 0.261);
+      --grass12: color(display-p3 0.151 0.233 0.153);
+    }
+  }
+
+  @media print {
+    :root {
+      --grass1: #fbfefb;
+      --grass2: #f5fbf5;
+      --grass3: #e9f6e9;
+      --grass4: #daf1db;
+      --grass5: #c9e8ca;
+      --grass6: #b2ddb5;
+      --grass7: #94ce9a;
+      --grass8: #65ba74;
+      --grass9: #46a758;
+      --grass10: #3e9b4f;
+      --grass11: #2a7e3b;
+      --grass12: #203c25;
+      --grass-contrast: var(--grass12);
+      --grass-hover: var(--grass8);
+
+      @media (color-gamut: p3) {
+        --grass1: color(display-p3 0.986 0.996 0.985);
+        --grass2: color(display-p3 0.966 0.983 0.964);
+        --grass3: color(display-p3 0.923 0.965 0.917);
+        --grass4: color(display-p3 0.872 0.94 0.865);
+        --grass5: color(display-p3 0.811 0.908 0.802);
+        --grass6: color(display-p3 0.733 0.864 0.724);
+        --grass7: color(display-p3 0.628 0.803 0.622);
+        --grass8: color(display-p3 0.477 0.72 0.482);
+        --grass9: color(display-p3 0.38 0.647 0.378);
+        --grass10: color(display-p3 0.344 0.598 0.342);
+        --grass11: color(display-p3 0.263 0.488 0.261);
+        --grass12: color(display-p3 0.151 0.233 0.153);
+      }
+    }
+  }
+}

package/utils/colors/grassLightDefault.css

@@ -0,0 +1,67 @@
+/* Generated by scripts/build-colors.js. Do not edit. */
+@layer theme {
+  :root,
+  [data-theme="light"] {
+    --grass1: #fbfefb;
+    --grass2: #f5fbf5;
+    --grass3: #e9f6e9;
+    --grass4: #daf1db;
+    --grass5: #c9e8ca;
+    --grass6: #b2ddb5;
+    --grass7: #94ce9a;
+    --grass8: #65ba74;
+    --grass9: #46a758;
+    --grass10: #3e9b4f;
+    --grass11: #2a7e3b;
+    --grass12: #203c25;
+    --grass-contrast: var(--grass12);
+    --grass-hover: var(--grass8);
+
+    @media (color-gamut: p3) {
+      --grass1: color(display-p3 0.986 0.996 0.985);
+      --grass2: color(display-p3 0.966 0.983 0.964);
+      --grass3: color(display-p3 0.923 0.965 0.917);
+      --grass4: color(display-p3 0.872 0.94 0.865);
+      --grass5: color(display-p3 0.811 0.908 0.802);
+      --grass6: color(display-p3 0.733 0.864 0.724);
+      --grass7: color(display-p3 0.628 0.803 0.622);
+      --grass8: color(display-p3 0.477 0.72 0.482);
+      --grass9: color(display-p3 0.38 0.647 0.378);
+      --grass10: color(display-p3 0.344 0.598 0.342);
+      --grass11: color(display-p3 0.263 0.488 0.261);
+      --grass12: color(display-p3 0.151 0.233 0.153);
+    }
+  }
+
+  [data-theme="dark"] {
+    --grass1: #0e1511;
+    --grass2: #141a15;
+    --grass3: #1b2a1e;
+    --grass4: #1d3a24;
+    --grass5: #25482d;
+    --grass6: #2d5736;
+    --grass7: #366740;
+    --grass8: #3e7949;
+    --grass9: #46a758;
+    --grass10: #53b365;
+    --grass11: #71d083;
+    --grass12: #c2f0c2;
+    --grass-contrast: var(--grass1);
+    --grass-hover: var(--grass10);
+
+    @media (color-gamut: p3) {
+      --grass1: color(display-p3 0.062 0.083 0.067);
+      --grass2: color(display-p3 0.083 0.103 0.085);
+      --grass3: color(display-p3 0.118 0.163 0.122);
+      --grass4: color(display-p3 0.142 0.225 0.15);
+      --grass5: color(display-p3 0.178 0.279 0.186);
+      --grass6: color(display-p3 0.217 0.337 0.224);
+      --grass7: color(display-p3 0.258 0.4 0.264);
+      --grass8: color(display-p3 0.302 0.47 0.305);
+      --grass9: color(display-p3 0.38 0.647 0.378);
+      --grass10: color(display-p3 0.426 0.694 0.426);
+      --grass11: color(display-p3 0.535 0.807 0.542);
+      --grass12: color(display-p3 0.797 0.936 0.776);
+    }
+  }
+}

package/utils/colors/gray.css

@@ -0,0 +1,101 @@
+/* Generated by scripts/build-colors.js. Do not edit. */
+@layer theme {
+  :root,
+  [data-theme="light"] {
+    --gray1: #fcfcfc;
+    --gray2: #f9f9f9;
+    --gray3: #f0f0f0;
+    --gray4: #e8e8e8;
+    --gray5: #e0e0e0;
+    --gray6: #d9d9d9;
+    --gray7: #cecece;
+    --gray8: #bbbbbb;
+    --gray9: #8d8d8d;
+    --gray10: #838383;
+    --gray11: #646464;
+    --gray12: #202020;
+    --gray-contrast: var(--gray12);
+    --gray-hover: var(--gray8);
+
+    @media (color-gamut: p3) {
+      --gray1: color(display-p3 0.988 0.988 0.988);
+      --gray2: color(display-p3 0.975 0.975 0.975);
+      --gray3: color(display-p3 0.939 0.939 0.939);
+      --gray4: color(display-p3 0.908 0.908 0.908);
+      --gray5: color(display-p3 0.88 0.88 0.88);
+      --gray6: color(display-p3 0.849 0.849 0.849);
+      --gray7: color(display-p3 0.807 0.807 0.807);
+      --gray8: color(display-p3 0.732 0.732 0.732);
+      --gray9: color(display-p3 0.553 0.553 0.553);
+      --gray10: color(display-p3 0.512 0.512 0.512);
+      --gray11: color(display-p3 0.392 0.392 0.392);
+      --gray12: color(display-p3 0.125 0.125 0.125);
+    }
+  }
+
+  [data-theme="dark"] {
+    --gray1: #111111;
+    --gray2: #191919;
+    --gray3: #222222;
+    --gray4: #2a2a2a;
+    --gray5: #313131;
+    --gray6: #3a3a3a;
+    --gray7: #484848;
+    --gray8: #606060;
+    --gray9: #6e6e6e;
+    --gray10: #7b7b7b;
+    --gray11: #b4b4b4;
+    --gray12: #eeeeee;
+    --gray-contrast: #fff;
+    --gray-hover: var(--gray10);
+
+    @media (color-gamut: p3) {
+      --gray1: color(display-p3 0.067 0.067 0.067);
+      --gray2: color(display-p3 0.098 0.098 0.098);
+      --gray3: color(display-p3 0.135 0.135 0.135);
+      --gray4: color(display-p3 0.163 0.163 0.163);
+      --gray5: color(display-p3 0.192 0.192 0.192);
+      --gray6: color(display-p3 0.228 0.228 0.228);
+      --gray7: color(display-p3 0.283 0.283 0.283);
+      --gray8: color(display-p3 0.375 0.375 0.375);
+      --gray9: color(display-p3 0.431 0.431 0.431);
+      --gray10: color(display-p3 0.484 0.484 0.484);
+      --gray11: color(display-p3 0.706 0.706 0.706);
+      --gray12: color(display-p3 0.933 0.933 0.933);
+    }
+  }
+
+  @media only screen and (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]) {
+      --gray1: #111111;
+      --gray2: #191919;
+      --gray3: #222222;
+      --gray4: #2a2a2a;
+      --gray5: #313131;
+      --gray6: #3a3a3a;
+      --gray7: #484848;
+      --gray8: #606060;
+      --gray9: #6e6e6e;
+      --gray10: #7b7b7b;
+      --gray11: #b4b4b4;
+      --gray12: #eeeeee;
+      --gray-contrast: #fff;
+      --gray-hover: var(--gray10);
+
+      @media (color-gamut: p3) {
+        --gray1: color(display-p3 0.067 0.067 0.067);
+        --gray2: color(display-p3 0.098 0.098 0.098);
+        --gray3: color(display-p3 0.135 0.135 0.135);
+        --gray4: color(display-p3 0.163 0.163 0.163);
+        --gray5: color(display-p3 0.192 0.192 0.192);
+        --gray6: color(display-p3 0.228 0.228 0.228);
+        --gray7: color(display-p3 0.283 0.283 0.283);
+        --gray8: color(display-p3 0.375 0.375 0.375);
+        --gray9: color(display-p3 0.431 0.431 0.431);
+        --gray10: color(display-p3 0.484 0.484 0.484);
+        --gray11: color(display-p3 0.706 0.706 0.706);
+        --gray12: color(display-p3 0.933 0.933 0.933);
+      }
+    }
+  }
+}

package/utils/colors/grayDarkDefault.css

@@ -0,0 +1,101 @@
+/* Generated by scripts/build-colors.js. Do not edit. */
+@layer theme {
+  :root,
+  [data-theme="dark"] {
+    --gray1: #111111;
+    --gray2: #191919;
+    --gray3: #222222;
+    --gray4: #2a2a2a;
+    --gray5: #313131;
+    --gray6: #3a3a3a;
+    --gray7: #484848;
+    --gray8: #606060;
+    --gray9: #6e6e6e;
+    --gray10: #7b7b7b;
+    --gray11: #b4b4b4;
+    --gray12: #eeeeee;
+    --gray-contrast: #fff;
+    --gray-hover: var(--gray10);
+
+    @media (color-gamut: p3) {
+      --gray1: color(display-p3 0.067 0.067 0.067);
+      --gray2: color(display-p3 0.098 0.098 0.098);
+      --gray3: color(display-p3 0.135 0.135 0.135);
+      --gray4: color(display-p3 0.163 0.163 0.163);
+      --gray5: color(display-p3 0.192 0.192 0.192);
+      --gray6: color(display-p3 0.228 0.228 0.228);
+      --gray7: color(display-p3 0.283 0.283 0.283);
+      --gray8: color(display-p3 0.375 0.375 0.375);
+      --gray9: color(display-p3 0.431 0.431 0.431);
+      --gray10: color(display-p3 0.484 0.484 0.484);
+      --gray11: color(display-p3 0.706 0.706 0.706);
+      --gray12: color(display-p3 0.933 0.933 0.933);
+    }
+  }
+
+  [data-theme="light"] {
+    --gray1: #fcfcfc;
+    --gray2: #f9f9f9;
+    --gray3: #f0f0f0;
+    --gray4: #e8e8e8;
+    --gray5: #e0e0e0;
+    --gray6: #d9d9d9;
+    --gray7: #cecece;
+    --gray8: #bbbbbb;
+    --gray9: #8d8d8d;
+    --gray10: #838383;
+    --gray11: #646464;
+    --gray12: #202020;
+    --gray-contrast: var(--gray12);
+    --gray-hover: var(--gray8);
+
+    @media (color-gamut: p3) {
+      --gray1: color(display-p3 0.988 0.988 0.988);
+      --gray2: color(display-p3 0.975 0.975 0.975);
+      --gray3: color(display-p3 0.939 0.939 0.939);
+      --gray4: color(display-p3 0.908 0.908 0.908);
+      --gray5: color(display-p3 0.88 0.88 0.88);
+      --gray6: color(display-p3 0.849 0.849 0.849);
+      --gray7: color(display-p3 0.807 0.807 0.807);
+      --gray8: color(display-p3 0.732 0.732 0.732);
+      --gray9: color(display-p3 0.553 0.553 0.553);
+      --gray10: color(display-p3 0.512 0.512 0.512);
+      --gray11: color(display-p3 0.392 0.392 0.392);
+      --gray12: color(display-p3 0.125 0.125 0.125);
+    }
+  }
+
+  @media print {
+    :root {
+      --gray1: #fcfcfc;
+      --gray2: #f9f9f9;
+      --gray3: #f0f0f0;
+      --gray4: #e8e8e8;
+      --gray5: #e0e0e0;
+      --gray6: #d9d9d9;
+      --gray7: #cecece;
+      --gray8: #bbbbbb;
+      --gray9: #8d8d8d;
+      --gray10: #838383;
+      --gray11: #646464;
+      --gray12: #202020;
+      --gray-contrast: var(--gray12);
+      --gray-hover: var(--gray8);
+
+      @media (color-gamut: p3) {
+        --gray1: color(display-p3 0.988 0.988 0.988);
+        --gray2: color(display-p3 0.975 0.975 0.975);
+        --gray3: color(display-p3 0.939 0.939 0.939);
+        --gray4: color(display-p3 0.908 0.908 0.908);
+        --gray5: color(display-p3 0.88 0.88 0.88);
+        --gray6: color(display-p3 0.849 0.849 0.849);
+        --gray7: color(display-p3 0.807 0.807 0.807);
+        --gray8: color(display-p3 0.732 0.732 0.732);
+        --gray9: color(display-p3 0.553 0.553 0.553);
+        --gray10: color(display-p3 0.512 0.512 0.512);
+        --gray11: color(display-p3 0.392 0.392 0.392);
+        --gray12: color(display-p3 0.125 0.125 0.125);
+      }
+    }
+  }
+}

package/utils/colors/grayLightDefault.css

@@ -0,0 +1,67 @@
+/* Generated by scripts/build-colors.js. Do not edit. */
+@layer theme {
+  :root,
+  [data-theme="light"] {
+    --gray1: #fcfcfc;
+    --gray2: #f9f9f9;
+    --gray3: #f0f0f0;
+    --gray4: #e8e8e8;
+    --gray5: #e0e0e0;
+    --gray6: #d9d9d9;
+    --gray7: #cecece;
+    --gray8: #bbbbbb;
+    --gray9: #8d8d8d;
+    --gray10: #838383;
+    --gray11: #646464;
+    --gray12: #202020;
+    --gray-contrast: var(--gray12);
+    --gray-hover: var(--gray8);
+
+    @media (color-gamut: p3) {
+      --gray1: color(display-p3 0.988 0.988 0.988);
+      --gray2: color(display-p3 0.975 0.975 0.975);
+      --gray3: color(display-p3 0.939 0.939 0.939);
+      --gray4: color(display-p3 0.908 0.908 0.908);
+      --gray5: color(display-p3 0.88 0.88 0.88);
+      --gray6: color(display-p3 0.849 0.849 0.849);
+      --gray7: color(display-p3 0.807 0.807 0.807);
+      --gray8: color(display-p3 0.732 0.732 0.732);
+      --gray9: color(display-p3 0.553 0.553 0.553);
+      --gray10: color(display-p3 0.512 0.512 0.512);
+      --gray11: color(display-p3 0.392 0.392 0.392);
+      --gray12: color(display-p3 0.125 0.125 0.125);
+    }
+  }
+
+  [data-theme="dark"] {
+    --gray1: #111111;
+    --gray2: #191919;
+    --gray3: #222222;
+    --gray4: #2a2a2a;
+    --gray5: #313131;
+    --gray6: #3a3a3a;
+    --gray7: #484848;
+    --gray8: #606060;
+    --gray9: #6e6e6e;
+    --gray10: #7b7b7b;
+    --gray11: #b4b4b4;
+    --gray12: #eeeeee;
+    --gray-contrast: #fff;
+    --gray-hover: var(--gray10);
+
+    @media (color-gamut: p3) {
+      --gray1: color(display-p3 0.067 0.067 0.067);
+      --gray2: color(display-p3 0.098 0.098 0.098);
+      --gray3: color(display-p3 0.135 0.135 0.135);
+      --gray4: color(display-p3 0.163 0.163 0.163);
+      --gray5: color(display-p3 0.192 0.192 0.192);
+      --gray6: color(display-p3 0.228 0.228 0.228);
+      --gray7: color(display-p3 0.283 0.283 0.283);
+      --gray8: color(display-p3 0.375 0.375 0.375);
+      --gray9: color(display-p3 0.431 0.431 0.431);
+      --gray10: color(display-p3 0.484 0.484 0.484);
+      --gray11: color(display-p3 0.706 0.706 0.706);
+      --gray12: color(display-p3 0.933 0.933 0.933);
+    }
+  }
+}

package/utils/colors/green.css

@@ -0,0 +1,101 @@
+/* Generated by scripts/build-colors.js. Do not edit. */
+@layer theme {
+  :root,
+  [data-theme="light"] {
+    --green1: #fbfefc;
+    --green2: #f4fbf6;
+    --green3: #e6f6eb;
+    --green4: #d6f1df;
+    --green5: #c4e8d1;
+    --green6: #adddc0;
+    --green7: #8eceaa;
+    --green8: #5bb98b;
+    --green9: #30a46c;
+    --green10: #2b9a66;
+    --green11: #218358;
+    --green12: #193b2d;
+    --green-contrast: var(--green12);
+    --green-hover: var(--green8);
+
+    @media (color-gamut: p3) {
+      --green1: color(display-p3 0.986 0.996 0.989);
+      --green2: color(display-p3 0.963 0.983 0.967);
+      --green3: color(display-p3 0.913 0.964 0.925);
+      --green4: color(display-p3 0.859 0.94 0.879);
+      --green5: color(display-p3 0.796 0.907 0.826);
+      --green6: color(display-p3 0.718 0.863 0.761);
+      --green7: color(display-p3 0.61 0.801 0.675);
+      --green8: color(display-p3 0.451 0.715 0.559);
+      --green9: color(display-p3 0.332 0.634 0.442);
+      --green10: color(display-p3 0.308 0.595 0.417);
+      --green11: color(display-p3 0.19 0.5 0.32);
+      --green12: color(display-p3 0.132 0.228 0.18);
+    }
+  }
+
+  [data-theme="dark"] {
+    --green1: #0e1512;
+    --green2: #121b17;
+    --green3: #132d21;
+    --green4: #113b29;
+    --green5: #174933;
+    --green6: #20573e;
+    --green7: #28684a;
+    --green8: #2f7c57;
+    --green9: #30a46c;
+    --green10: #33b074;
+    --green11: #3dd68c;
+    --green12: #b1f1cb;
+    --green-contrast: var(--green1);
+    --green-hover: var(--green10);
+
+    @media (color-gamut: p3) {
+      --green1: color(display-p3 0.062 0.083 0.071);
+      --green2: color(display-p3 0.079 0.106 0.09);
+      --green3: color(display-p3 0.1 0.173 0.133);
+      --green4: color(display-p3 0.115 0.229 0.166);
+      --green5: color(display-p3 0.147 0.282 0.206);
+      --green6: color(display-p3 0.185 0.338 0.25);
+      --green7: color(display-p3 0.227 0.403 0.298);
+      --green8: color(display-p3 0.27 0.479 0.351);
+      --green9: color(display-p3 0.332 0.634 0.442);
+      --green10: color(display-p3 0.357 0.682 0.474);
+      --green11: color(display-p3 0.434 0.828 0.573);
+      --green12: color(display-p3 0.747 0.938 0.807);
+    }
+  }
+
+  @media only screen and (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]) {
+      --green1: #0e1512;
+      --green2: #121b17;
+      --green3: #132d21;
+      --green4: #113b29;
+      --green5: #174933;
+      --green6: #20573e;
+      --green7: #28684a;
+      --green8: #2f7c57;
+      --green9: #30a46c;
+      --green10: #33b074;
+      --green11: #3dd68c;
+      --green12: #b1f1cb;
+      --green-contrast: var(--green1);
+      --green-hover: var(--green10);
+
+      @media (color-gamut: p3) {
+        --green1: color(display-p3 0.062 0.083 0.071);
+        --green2: color(display-p3 0.079 0.106 0.09);
+        --green3: color(display-p3 0.1 0.173 0.133);
+        --green4: color(display-p3 0.115 0.229 0.166);
+        --green5: color(display-p3 0.147 0.282 0.206);
+        --green6: color(display-p3 0.185 0.338 0.25);
+        --green7: color(display-p3 0.227 0.403 0.298);
+        --green8: color(display-p3 0.27 0.479 0.351);
+        --green9: color(display-p3 0.332 0.634 0.442);
+        --green10: color(display-p3 0.357 0.682 0.474);
+        --green11: color(display-p3 0.434 0.828 0.573);
+        --green12: color(display-p3 0.747 0.938 0.807);
+      }
+    }
+  }
+}