@fairgarden/design 0.1.0-alpha.0

package/utils/colors/irisLightDefault.css

@@ -0,0 +1,67 @@
+/* Generated by scripts/build-colors.js. Do not edit. */
+@layer theme {
+  :root,
+  [data-theme="light"] {
+    --iris1: #fdfdff;
+    --iris2: #f8f8ff;
+    --iris3: #f0f1fe;
+    --iris4: #e6e7ff;
+    --iris5: #dadcff;
+    --iris6: #cbcdff;
+    --iris7: #b8baf8;
+    --iris8: #9b9ef0;
+    --iris9: #5b5bd6;
+    --iris10: #5151cd;
+    --iris11: #5753c6;
+    --iris12: #272962;
+    --iris-contrast: var(--iris1);
+    --iris-hover: var(--iris10);
+
+    @media (color-gamut: p3) {
+      --iris1: color(display-p3 0.992 0.992 0.999);
+      --iris2: color(display-p3 0.972 0.973 0.998);
+      --iris3: color(display-p3 0.943 0.945 0.992);
+      --iris4: color(display-p3 0.902 0.906 1);
+      --iris5: color(display-p3 0.857 0.861 1);
+      --iris6: color(display-p3 0.799 0.805 0.987);
+      --iris7: color(display-p3 0.721 0.727 0.955);
+      --iris8: color(display-p3 0.61 0.619 0.918);
+      --iris9: color(display-p3 0.357 0.357 0.81);
+      --iris10: color(display-p3 0.318 0.318 0.774);
+      --iris11: color(display-p3 0.337 0.326 0.748);
+      --iris12: color(display-p3 0.154 0.161 0.371);
+    }
+  }
+
+  [data-theme="dark"] {
+    --iris1: #13131e;
+    --iris2: #171625;
+    --iris3: #202248;
+    --iris4: #262a65;
+    --iris5: #303374;
+    --iris6: #3d3e82;
+    --iris7: #4a4a95;
+    --iris8: #5958b1;
+    --iris9: #5b5bd6;
+    --iris10: #6e6ade;
+    --iris11: #b1a9ff;
+    --iris12: #e0dffe;
+    --iris-contrast: #fff;
+    --iris-hover: var(--iris10);
+
+    @media (color-gamut: p3) {
+      --iris1: color(display-p3 0.075 0.075 0.114);
+      --iris2: color(display-p3 0.089 0.086 0.14);
+      --iris3: color(display-p3 0.128 0.134 0.272);
+      --iris4: color(display-p3 0.153 0.165 0.382);
+      --iris5: color(display-p3 0.192 0.201 0.44);
+      --iris6: color(display-p3 0.239 0.241 0.491);
+      --iris7: color(display-p3 0.291 0.289 0.565);
+      --iris8: color(display-p3 0.35 0.345 0.673);
+      --iris9: color(display-p3 0.357 0.357 0.81);
+      --iris10: color(display-p3 0.428 0.416 0.843);
+      --iris11: color(display-p3 0.685 0.662 1);
+      --iris12: color(display-p3 0.878 0.875 0.986);
+    }
+  }
+}

package/utils/colors/jade.css

@@ -0,0 +1,101 @@
+/* Generated by scripts/build-colors.js. Do not edit. */
+@layer theme {
+  :root,
+  [data-theme="light"] {
+    --jade1: #fbfefd;
+    --jade2: #f4fbf7;
+    --jade3: #e6f7ed;
+    --jade4: #d6f1e3;
+    --jade5: #c3e9d7;
+    --jade6: #acdec8;
+    --jade7: #8bceb6;
+    --jade8: #56ba9f;
+    --jade9: #29a383;
+    --jade10: #26997b;
+    --jade11: #208368;
+    --jade12: #1d3b31;
+    --jade-contrast: var(--jade12);
+    --jade-hover: var(--jade8);
+
+    @media (color-gamut: p3) {
+      --jade1: color(display-p3 0.986 0.996 0.992);
+      --jade2: color(display-p3 0.962 0.983 0.969);
+      --jade3: color(display-p3 0.912 0.965 0.932);
+      --jade4: color(display-p3 0.858 0.941 0.893);
+      --jade5: color(display-p3 0.795 0.909 0.847);
+      --jade6: color(display-p3 0.715 0.864 0.791);
+      --jade7: color(display-p3 0.603 0.802 0.718);
+      --jade8: color(display-p3 0.44 0.72 0.629);
+      --jade9: color(display-p3 0.319 0.63 0.521);
+      --jade10: color(display-p3 0.299 0.592 0.488);
+      --jade11: color(display-p3 0.15 0.5 0.37);
+      --jade12: color(display-p3 0.142 0.229 0.194);
+    }
+  }
+
+  [data-theme="dark"] {
+    --jade1: #0d1512;
+    --jade2: #121c18;
+    --jade3: #0f2e22;
+    --jade4: #0b3b2c;
+    --jade5: #114837;
+    --jade6: #1b5745;
+    --jade7: #246854;
+    --jade8: #2a7e68;
+    --jade9: #29a383;
+    --jade10: #27b08b;
+    --jade11: #1fd8a4;
+    --jade12: #adf0d4;
+    --jade-contrast: var(--jade1);
+    --jade-hover: var(--jade10);
+
+    @media (color-gamut: p3) {
+      --jade1: color(display-p3 0.059 0.083 0.071);
+      --jade2: color(display-p3 0.078 0.11 0.094);
+      --jade3: color(display-p3 0.091 0.176 0.138);
+      --jade4: color(display-p3 0.102 0.228 0.177);
+      --jade5: color(display-p3 0.133 0.279 0.221);
+      --jade6: color(display-p3 0.174 0.334 0.273);
+      --jade7: color(display-p3 0.219 0.402 0.335);
+      --jade8: color(display-p3 0.263 0.488 0.411);
+      --jade9: color(display-p3 0.319 0.63 0.521);
+      --jade10: color(display-p3 0.338 0.68 0.555);
+      --jade11: color(display-p3 0.4 0.835 0.656);
+      --jade12: color(display-p3 0.734 0.934 0.838);
+    }
+  }
+
+  @media only screen and (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]) {
+      --jade1: #0d1512;
+      --jade2: #121c18;
+      --jade3: #0f2e22;
+      --jade4: #0b3b2c;
+      --jade5: #114837;
+      --jade6: #1b5745;
+      --jade7: #246854;
+      --jade8: #2a7e68;
+      --jade9: #29a383;
+      --jade10: #27b08b;
+      --jade11: #1fd8a4;
+      --jade12: #adf0d4;
+      --jade-contrast: var(--jade1);
+      --jade-hover: var(--jade10);
+
+      @media (color-gamut: p3) {
+        --jade1: color(display-p3 0.059 0.083 0.071);
+        --jade2: color(display-p3 0.078 0.11 0.094);
+        --jade3: color(display-p3 0.091 0.176 0.138);
+        --jade4: color(display-p3 0.102 0.228 0.177);
+        --jade5: color(display-p3 0.133 0.279 0.221);
+        --jade6: color(display-p3 0.174 0.334 0.273);
+        --jade7: color(display-p3 0.219 0.402 0.335);
+        --jade8: color(display-p3 0.263 0.488 0.411);
+        --jade9: color(display-p3 0.319 0.63 0.521);
+        --jade10: color(display-p3 0.338 0.68 0.555);
+        --jade11: color(display-p3 0.4 0.835 0.656);
+        --jade12: color(display-p3 0.734 0.934 0.838);
+      }
+    }
+  }
+}

package/utils/colors/jadeDarkDefault.css

@@ -0,0 +1,101 @@
+/* Generated by scripts/build-colors.js. Do not edit. */
+@layer theme {
+  :root,
+  [data-theme="dark"] {
+    --jade1: #0d1512;
+    --jade2: #121c18;
+    --jade3: #0f2e22;
+    --jade4: #0b3b2c;
+    --jade5: #114837;
+    --jade6: #1b5745;
+    --jade7: #246854;
+    --jade8: #2a7e68;
+    --jade9: #29a383;
+    --jade10: #27b08b;
+    --jade11: #1fd8a4;
+    --jade12: #adf0d4;
+    --jade-contrast: var(--jade1);
+    --jade-hover: var(--jade10);
+
+    @media (color-gamut: p3) {
+      --jade1: color(display-p3 0.059 0.083 0.071);
+      --jade2: color(display-p3 0.078 0.11 0.094);
+      --jade3: color(display-p3 0.091 0.176 0.138);
+      --jade4: color(display-p3 0.102 0.228 0.177);
+      --jade5: color(display-p3 0.133 0.279 0.221);
+      --jade6: color(display-p3 0.174 0.334 0.273);
+      --jade7: color(display-p3 0.219 0.402 0.335);
+      --jade8: color(display-p3 0.263 0.488 0.411);
+      --jade9: color(display-p3 0.319 0.63 0.521);
+      --jade10: color(display-p3 0.338 0.68 0.555);
+      --jade11: color(display-p3 0.4 0.835 0.656);
+      --jade12: color(display-p3 0.734 0.934 0.838);
+    }
+  }
+
+  [data-theme="light"] {
+    --jade1: #fbfefd;
+    --jade2: #f4fbf7;
+    --jade3: #e6f7ed;
+    --jade4: #d6f1e3;
+    --jade5: #c3e9d7;
+    --jade6: #acdec8;
+    --jade7: #8bceb6;
+    --jade8: #56ba9f;
+    --jade9: #29a383;
+    --jade10: #26997b;
+    --jade11: #208368;
+    --jade12: #1d3b31;
+    --jade-contrast: var(--jade12);
+    --jade-hover: var(--jade8);
+
+    @media (color-gamut: p3) {
+      --jade1: color(display-p3 0.986 0.996 0.992);
+      --jade2: color(display-p3 0.962 0.983 0.969);
+      --jade3: color(display-p3 0.912 0.965 0.932);
+      --jade4: color(display-p3 0.858 0.941 0.893);
+      --jade5: color(display-p3 0.795 0.909 0.847);
+      --jade6: color(display-p3 0.715 0.864 0.791);
+      --jade7: color(display-p3 0.603 0.802 0.718);
+      --jade8: color(display-p3 0.44 0.72 0.629);
+      --jade9: color(display-p3 0.319 0.63 0.521);
+      --jade10: color(display-p3 0.299 0.592 0.488);
+      --jade11: color(display-p3 0.15 0.5 0.37);
+      --jade12: color(display-p3 0.142 0.229 0.194);
+    }
+  }
+
+  @media print {
+    :root {
+      --jade1: #fbfefd;
+      --jade2: #f4fbf7;
+      --jade3: #e6f7ed;
+      --jade4: #d6f1e3;
+      --jade5: #c3e9d7;
+      --jade6: #acdec8;
+      --jade7: #8bceb6;
+      --jade8: #56ba9f;
+      --jade9: #29a383;
+      --jade10: #26997b;
+      --jade11: #208368;
+      --jade12: #1d3b31;
+      --jade-contrast: var(--jade12);
+      --jade-hover: var(--jade8);
+
+      @media (color-gamut: p3) {
+        --jade1: color(display-p3 0.986 0.996 0.992);
+        --jade2: color(display-p3 0.962 0.983 0.969);
+        --jade3: color(display-p3 0.912 0.965 0.932);
+        --jade4: color(display-p3 0.858 0.941 0.893);
+        --jade5: color(display-p3 0.795 0.909 0.847);
+        --jade6: color(display-p3 0.715 0.864 0.791);
+        --jade7: color(display-p3 0.603 0.802 0.718);
+        --jade8: color(display-p3 0.44 0.72 0.629);
+        --jade9: color(display-p3 0.319 0.63 0.521);
+        --jade10: color(display-p3 0.299 0.592 0.488);
+        --jade11: color(display-p3 0.15 0.5 0.37);
+        --jade12: color(display-p3 0.142 0.229 0.194);
+      }
+    }
+  }
+}

package/utils/colors/jadeLightDefault.css

@@ -0,0 +1,67 @@
+/* Generated by scripts/build-colors.js. Do not edit. */
+@layer theme {
+  :root,
+  [data-theme="light"] {
+    --jade1: #fbfefd;
+    --jade2: #f4fbf7;
+    --jade3: #e6f7ed;
+    --jade4: #d6f1e3;
+    --jade5: #c3e9d7;
+    --jade6: #acdec8;
+    --jade7: #8bceb6;
+    --jade8: #56ba9f;
+    --jade9: #29a383;
+    --jade10: #26997b;
+    --jade11: #208368;
+    --jade12: #1d3b31;
+    --jade-contrast: var(--jade12);
+    --jade-hover: var(--jade8);
+
+    @media (color-gamut: p3) {
+      --jade1: color(display-p3 0.986 0.996 0.992);
+      --jade2: color(display-p3 0.962 0.983 0.969);
+      --jade3: color(display-p3 0.912 0.965 0.932);
+      --jade4: color(display-p3 0.858 0.941 0.893);
+      --jade5: color(display-p3 0.795 0.909 0.847);
+      --jade6: color(display-p3 0.715 0.864 0.791);
+      --jade7: color(display-p3 0.603 0.802 0.718);
+      --jade8: color(display-p3 0.44 0.72 0.629);
+      --jade9: color(display-p3 0.319 0.63 0.521);
+      --jade10: color(display-p3 0.299 0.592 0.488);
+      --jade11: color(display-p3 0.15 0.5 0.37);
+      --jade12: color(display-p3 0.142 0.229 0.194);
+    }
+  }
+
+  [data-theme="dark"] {
+    --jade1: #0d1512;
+    --jade2: #121c18;
+    --jade3: #0f2e22;
+    --jade4: #0b3b2c;
+    --jade5: #114837;
+    --jade6: #1b5745;
+    --jade7: #246854;
+    --jade8: #2a7e68;
+    --jade9: #29a383;
+    --jade10: #27b08b;
+    --jade11: #1fd8a4;
+    --jade12: #adf0d4;
+    --jade-contrast: var(--jade1);
+    --jade-hover: var(--jade10);
+
+    @media (color-gamut: p3) {
+      --jade1: color(display-p3 0.059 0.083 0.071);
+      --jade2: color(display-p3 0.078 0.11 0.094);
+      --jade3: color(display-p3 0.091 0.176 0.138);
+      --jade4: color(display-p3 0.102 0.228 0.177);
+      --jade5: color(display-p3 0.133 0.279 0.221);
+      --jade6: color(display-p3 0.174 0.334 0.273);
+      --jade7: color(display-p3 0.219 0.402 0.335);
+      --jade8: color(display-p3 0.263 0.488 0.411);
+      --jade9: color(display-p3 0.319 0.63 0.521);
+      --jade10: color(display-p3 0.338 0.68 0.555);
+      --jade11: color(display-p3 0.4 0.835 0.656);
+      --jade12: color(display-p3 0.734 0.934 0.838);
+    }
+  }
+}

package/utils/colors/lime.css

@@ -0,0 +1,101 @@
+/* Generated by scripts/build-colors.js. Do not edit. */
+@layer theme {
+  :root,
+  [data-theme="light"] {
+    --lime1: #fcfdfa;
+    --lime2: #f8faf3;
+    --lime3: #eef6d6;
+    --lime4: #e2f0bd;
+    --lime5: #d3e7a6;
+    --lime6: #c2da91;
+    --lime7: #abc978;
+    --lime8: #8db654;
+    --lime9: #bdee63;
+    --lime10: #b0e64c;
+    --lime11: #5c7c2f;
+    --lime12: #37401c;
+    --lime-contrast: var(--lime12);
+    --lime-hover: var(--lime5);
+
+    @media (color-gamut: p3) {
+      --lime1: color(display-p3 0.989 0.992 0.981);
+      --lime2: color(display-p3 0.975 0.98 0.954);
+      --lime3: color(display-p3 0.939 0.965 0.851);
+      --lime4: color(display-p3 0.896 0.94 0.76);
+      --lime5: color(display-p3 0.843 0.903 0.678);
+      --lime6: color(display-p3 0.778 0.852 0.599);
+      --lime7: color(display-p3 0.694 0.784 0.508);
+      --lime8: color(display-p3 0.585 0.707 0.378);
+      --lime9: color(display-p3 0.78 0.928 0.466);
+      --lime10: color(display-p3 0.734 0.896 0.397);
+      --lime11: color(display-p3 0.386 0.482 0.227);
+      --lime12: color(display-p3 0.222 0.25 0.128);
+    }
+  }
+
+  [data-theme="dark"] {
+    --lime1: #11130c;
+    --lime2: #151a10;
+    --lime3: #1f2917;
+    --lime4: #29371d;
+    --lime5: #334423;
+    --lime6: #3d522a;
+    --lime7: #496231;
+    --lime8: #577538;
+    --lime9: #bdee63;
+    --lime10: #d4ff70;
+    --lime11: #bde56c;
+    --lime12: #e3f7ba;
+    --lime-contrast: var(--lime1);
+    --lime-hover: var(--lime10);
+
+    @media (color-gamut: p3) {
+      --lime1: color(display-p3 0.067 0.073 0.048);
+      --lime2: color(display-p3 0.086 0.1 0.067);
+      --lime3: color(display-p3 0.13 0.16 0.099);
+      --lime4: color(display-p3 0.172 0.214 0.126);
+      --lime5: color(display-p3 0.213 0.266 0.153);
+      --lime6: color(display-p3 0.257 0.321 0.182);
+      --lime7: color(display-p3 0.307 0.383 0.215);
+      --lime8: color(display-p3 0.365 0.456 0.25);
+      --lime9: color(display-p3 0.78 0.928 0.466);
+      --lime10: color(display-p3 0.865 0.995 0.519);
+      --lime11: color(display-p3 0.771 0.893 0.485);
+      --lime12: color(display-p3 0.905 0.966 0.753);
+    }
+  }
+
+  @media only screen and (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]) {
+      --lime1: #11130c;
+      --lime2: #151a10;
+      --lime3: #1f2917;
+      --lime4: #29371d;
+      --lime5: #334423;
+      --lime6: #3d522a;
+      --lime7: #496231;
+      --lime8: #577538;
+      --lime9: #bdee63;
+      --lime10: #d4ff70;
+      --lime11: #bde56c;
+      --lime12: #e3f7ba;
+      --lime-contrast: var(--lime1);
+      --lime-hover: var(--lime10);
+
+      @media (color-gamut: p3) {
+        --lime1: color(display-p3 0.067 0.073 0.048);
+        --lime2: color(display-p3 0.086 0.1 0.067);
+        --lime3: color(display-p3 0.13 0.16 0.099);
+        --lime4: color(display-p3 0.172 0.214 0.126);
+        --lime5: color(display-p3 0.213 0.266 0.153);
+        --lime6: color(display-p3 0.257 0.321 0.182);
+        --lime7: color(display-p3 0.307 0.383 0.215);
+        --lime8: color(display-p3 0.365 0.456 0.25);
+        --lime9: color(display-p3 0.78 0.928 0.466);
+        --lime10: color(display-p3 0.865 0.995 0.519);
+        --lime11: color(display-p3 0.771 0.893 0.485);
+        --lime12: color(display-p3 0.905 0.966 0.753);
+      }
+    }
+  }
+}

package/utils/colors/limeDarkDefault.css

@@ -0,0 +1,101 @@
+/* Generated by scripts/build-colors.js. Do not edit. */
+@layer theme {
+  :root,
+  [data-theme="dark"] {
+    --lime1: #11130c;
+    --lime2: #151a10;
+    --lime3: #1f2917;
+    --lime4: #29371d;
+    --lime5: #334423;
+    --lime6: #3d522a;
+    --lime7: #496231;
+    --lime8: #577538;
+    --lime9: #bdee63;
+    --lime10: #d4ff70;
+    --lime11: #bde56c;
+    --lime12: #e3f7ba;
+    --lime-contrast: var(--lime1);
+    --lime-hover: var(--lime10);
+
+    @media (color-gamut: p3) {
+      --lime1: color(display-p3 0.067 0.073 0.048);
+      --lime2: color(display-p3 0.086 0.1 0.067);
+      --lime3: color(display-p3 0.13 0.16 0.099);
+      --lime4: color(display-p3 0.172 0.214 0.126);
+      --lime5: color(display-p3 0.213 0.266 0.153);
+      --lime6: color(display-p3 0.257 0.321 0.182);
+      --lime7: color(display-p3 0.307 0.383 0.215);
+      --lime8: color(display-p3 0.365 0.456 0.25);
+      --lime9: color(display-p3 0.78 0.928 0.466);
+      --lime10: color(display-p3 0.865 0.995 0.519);
+      --lime11: color(display-p3 0.771 0.893 0.485);
+      --lime12: color(display-p3 0.905 0.966 0.753);
+    }
+  }
+
+  [data-theme="light"] {
+    --lime1: #fcfdfa;
+    --lime2: #f8faf3;
+    --lime3: #eef6d6;
+    --lime4: #e2f0bd;
+    --lime5: #d3e7a6;
+    --lime6: #c2da91;
+    --lime7: #abc978;
+    --lime8: #8db654;
+    --lime9: #bdee63;
+    --lime10: #b0e64c;
+    --lime11: #5c7c2f;
+    --lime12: #37401c;
+    --lime-contrast: var(--lime12);
+    --lime-hover: var(--lime5);
+
+    @media (color-gamut: p3) {
+      --lime1: color(display-p3 0.989 0.992 0.981);
+      --lime2: color(display-p3 0.975 0.98 0.954);
+      --lime3: color(display-p3 0.939 0.965 0.851);
+      --lime4: color(display-p3 0.896 0.94 0.76);
+      --lime5: color(display-p3 0.843 0.903 0.678);
+      --lime6: color(display-p3 0.778 0.852 0.599);
+      --lime7: color(display-p3 0.694 0.784 0.508);
+      --lime8: color(display-p3 0.585 0.707 0.378);
+      --lime9: color(display-p3 0.78 0.928 0.466);
+      --lime10: color(display-p3 0.734 0.896 0.397);
+      --lime11: color(display-p3 0.386 0.482 0.227);
+      --lime12: color(display-p3 0.222 0.25 0.128);
+    }
+  }
+
+  @media print {
+    :root {
+      --lime1: #fcfdfa;
+      --lime2: #f8faf3;
+      --lime3: #eef6d6;
+      --lime4: #e2f0bd;
+      --lime5: #d3e7a6;
+      --lime6: #c2da91;
+      --lime7: #abc978;
+      --lime8: #8db654;
+      --lime9: #bdee63;
+      --lime10: #b0e64c;
+      --lime11: #5c7c2f;
+      --lime12: #37401c;
+      --lime-contrast: var(--lime12);
+      --lime-hover: var(--lime5);
+
+      @media (color-gamut: p3) {
+        --lime1: color(display-p3 0.989 0.992 0.981);
+        --lime2: color(display-p3 0.975 0.98 0.954);
+        --lime3: color(display-p3 0.939 0.965 0.851);
+        --lime4: color(display-p3 0.896 0.94 0.76);
+        --lime5: color(display-p3 0.843 0.903 0.678);
+        --lime6: color(display-p3 0.778 0.852 0.599);
+        --lime7: color(display-p3 0.694 0.784 0.508);
+        --lime8: color(display-p3 0.585 0.707 0.378);
+        --lime9: color(display-p3 0.78 0.928 0.466);
+        --lime10: color(display-p3 0.734 0.896 0.397);
+        --lime11: color(display-p3 0.386 0.482 0.227);
+        --lime12: color(display-p3 0.222 0.25 0.128);
+      }
+    }
+  }
+}

package/utils/colors/limeLightDefault.css

@@ -0,0 +1,67 @@
+/* Generated by scripts/build-colors.js. Do not edit. */
+@layer theme {
+  :root,
+  [data-theme="light"] {
+    --lime1: #fcfdfa;
+    --lime2: #f8faf3;
+    --lime3: #eef6d6;
+    --lime4: #e2f0bd;
+    --lime5: #d3e7a6;
+    --lime6: #c2da91;
+    --lime7: #abc978;
+    --lime8: #8db654;
+    --lime9: #bdee63;
+    --lime10: #b0e64c;
+    --lime11: #5c7c2f;
+    --lime12: #37401c;
+    --lime-contrast: var(--lime12);
+    --lime-hover: var(--lime5);
+
+    @media (color-gamut: p3) {
+      --lime1: color(display-p3 0.989 0.992 0.981);
+      --lime2: color(display-p3 0.975 0.98 0.954);
+      --lime3: color(display-p3 0.939 0.965 0.851);
+      --lime4: color(display-p3 0.896 0.94 0.76);
+      --lime5: color(display-p3 0.843 0.903 0.678);
+      --lime6: color(display-p3 0.778 0.852 0.599);
+      --lime7: color(display-p3 0.694 0.784 0.508);
+      --lime8: color(display-p3 0.585 0.707 0.378);
+      --lime9: color(display-p3 0.78 0.928 0.466);
+      --lime10: color(display-p3 0.734 0.896 0.397);
+      --lime11: color(display-p3 0.386 0.482 0.227);
+      --lime12: color(display-p3 0.222 0.25 0.128);
+    }
+  }
+
+  [data-theme="dark"] {
+    --lime1: #11130c;
+    --lime2: #151a10;
+    --lime3: #1f2917;
+    --lime4: #29371d;
+    --lime5: #334423;
+    --lime6: #3d522a;
+    --lime7: #496231;
+    --lime8: #577538;
+    --lime9: #bdee63;
+    --lime10: #d4ff70;
+    --lime11: #bde56c;
+    --lime12: #e3f7ba;
+    --lime-contrast: var(--lime1);
+    --lime-hover: var(--lime10);
+
+    @media (color-gamut: p3) {
+      --lime1: color(display-p3 0.067 0.073 0.048);
+      --lime2: color(display-p3 0.086 0.1 0.067);
+      --lime3: color(display-p3 0.13 0.16 0.099);
+      --lime4: color(display-p3 0.172 0.214 0.126);
+      --lime5: color(display-p3 0.213 0.266 0.153);
+      --lime6: color(display-p3 0.257 0.321 0.182);
+      --lime7: color(display-p3 0.307 0.383 0.215);
+      --lime8: color(display-p3 0.365 0.456 0.25);
+      --lime9: color(display-p3 0.78 0.928 0.466);
+      --lime10: color(display-p3 0.865 0.995 0.519);
+      --lime11: color(display-p3 0.771 0.893 0.485);
+      --lime12: color(display-p3 0.905 0.966 0.753);
+    }
+  }
+}