@fairgarden/design 0.1.0-alpha.0

package/utils/colors/red.css

@@ -0,0 +1,101 @@
+/* Generated by scripts/build-colors.js. Do not edit. */
+@layer theme {
+  :root,
+  [data-theme="light"] {
+    --red1: #fffcfc;
+    --red2: #fff7f7;
+    --red3: #feebec;
+    --red4: #ffdbdc;
+    --red5: #ffcdce;
+    --red6: #fdbdbe;
+    --red7: #f4a9aa;
+    --red8: #eb8e90;
+    --red9: #e5484d;
+    --red10: #dc3e42;
+    --red11: #ce2c31;
+    --red12: #641723;
+    --red-contrast: var(--red1);
+    --red-hover: var(--red8);
+
+    @media (color-gamut: p3) {
+      --red1: color(display-p3 0.998 0.989 0.988);
+      --red2: color(display-p3 0.995 0.971 0.971);
+      --red3: color(display-p3 0.985 0.925 0.925);
+      --red4: color(display-p3 0.999 0.866 0.866);
+      --red5: color(display-p3 0.984 0.812 0.811);
+      --red6: color(display-p3 0.955 0.751 0.749);
+      --red7: color(display-p3 0.915 0.675 0.672);
+      --red8: color(display-p3 0.872 0.575 0.572);
+      --red9: color(display-p3 0.83 0.329 0.324);
+      --red10: color(display-p3 0.798 0.294 0.285);
+      --red11: color(display-p3 0.744 0.234 0.222);
+      --red12: color(display-p3 0.36 0.115 0.143);
+    }
+  }
+
+  [data-theme="dark"] {
+    --red1: #191111;
+    --red2: #201314;
+    --red3: #3b1219;
+    --red4: #500f1c;
+    --red5: #611623;
+    --red6: #72232d;
+    --red7: #8c333a;
+    --red8: #b54548;
+    --red9: #e5484d;
+    --red10: #ec5d5e;
+    --red11: #ff9592;
+    --red12: #ffd1d9;
+    --red-contrast: var(--red1);
+    --red-hover: var(--red10);
+
+    @media (color-gamut: p3) {
+      --red1: color(display-p3 0.093 0.068 0.067);
+      --red2: color(display-p3 0.118 0.077 0.079);
+      --red3: color(display-p3 0.211 0.081 0.099);
+      --red4: color(display-p3 0.287 0.079 0.113);
+      --red5: color(display-p3 0.348 0.11 0.142);
+      --red6: color(display-p3 0.414 0.16 0.183);
+      --red7: color(display-p3 0.508 0.224 0.236);
+      --red8: color(display-p3 0.659 0.298 0.297);
+      --red9: color(display-p3 0.83 0.329 0.324);
+      --red10: color(display-p3 0.861 0.403 0.387);
+      --red11: color(display-p3 1 0.57 0.55);
+      --red12: color(display-p3 0.971 0.826 0.852);
+    }
+  }
+
+  @media only screen and (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]) {
+      --red1: #191111;
+      --red2: #201314;
+      --red3: #3b1219;
+      --red4: #500f1c;
+      --red5: #611623;
+      --red6: #72232d;
+      --red7: #8c333a;
+      --red8: #b54548;
+      --red9: #e5484d;
+      --red10: #ec5d5e;
+      --red11: #ff9592;
+      --red12: #ffd1d9;
+      --red-contrast: var(--red1);
+      --red-hover: var(--red10);
+
+      @media (color-gamut: p3) {
+        --red1: color(display-p3 0.093 0.068 0.067);
+        --red2: color(display-p3 0.118 0.077 0.079);
+        --red3: color(display-p3 0.211 0.081 0.099);
+        --red4: color(display-p3 0.287 0.079 0.113);
+        --red5: color(display-p3 0.348 0.11 0.142);
+        --red6: color(display-p3 0.414 0.16 0.183);
+        --red7: color(display-p3 0.508 0.224 0.236);
+        --red8: color(display-p3 0.659 0.298 0.297);
+        --red9: color(display-p3 0.83 0.329 0.324);
+        --red10: color(display-p3 0.861 0.403 0.387);
+        --red11: color(display-p3 1 0.57 0.55);
+        --red12: color(display-p3 0.971 0.826 0.852);
+      }
+    }
+  }
+}

package/utils/colors/redDarkDefault.css

@@ -0,0 +1,101 @@
+/* Generated by scripts/build-colors.js. Do not edit. */
+@layer theme {
+  :root,
+  [data-theme="dark"] {
+    --red1: #191111;
+    --red2: #201314;
+    --red3: #3b1219;
+    --red4: #500f1c;
+    --red5: #611623;
+    --red6: #72232d;
+    --red7: #8c333a;
+    --red8: #b54548;
+    --red9: #e5484d;
+    --red10: #ec5d5e;
+    --red11: #ff9592;
+    --red12: #ffd1d9;
+    --red-contrast: var(--red1);
+    --red-hover: var(--red10);
+
+    @media (color-gamut: p3) {
+      --red1: color(display-p3 0.093 0.068 0.067);
+      --red2: color(display-p3 0.118 0.077 0.079);
+      --red3: color(display-p3 0.211 0.081 0.099);
+      --red4: color(display-p3 0.287 0.079 0.113);
+      --red5: color(display-p3 0.348 0.11 0.142);
+      --red6: color(display-p3 0.414 0.16 0.183);
+      --red7: color(display-p3 0.508 0.224 0.236);
+      --red8: color(display-p3 0.659 0.298 0.297);
+      --red9: color(display-p3 0.83 0.329 0.324);
+      --red10: color(display-p3 0.861 0.403 0.387);
+      --red11: color(display-p3 1 0.57 0.55);
+      --red12: color(display-p3 0.971 0.826 0.852);
+    }
+  }
+
+  [data-theme="light"] {
+    --red1: #fffcfc;
+    --red2: #fff7f7;
+    --red3: #feebec;
+    --red4: #ffdbdc;
+    --red5: #ffcdce;
+    --red6: #fdbdbe;
+    --red7: #f4a9aa;
+    --red8: #eb8e90;
+    --red9: #e5484d;
+    --red10: #dc3e42;
+    --red11: #ce2c31;
+    --red12: #641723;
+    --red-contrast: var(--red1);
+    --red-hover: var(--red8);
+
+    @media (color-gamut: p3) {
+      --red1: color(display-p3 0.998 0.989 0.988);
+      --red2: color(display-p3 0.995 0.971 0.971);
+      --red3: color(display-p3 0.985 0.925 0.925);
+      --red4: color(display-p3 0.999 0.866 0.866);
+      --red5: color(display-p3 0.984 0.812 0.811);
+      --red6: color(display-p3 0.955 0.751 0.749);
+      --red7: color(display-p3 0.915 0.675 0.672);
+      --red8: color(display-p3 0.872 0.575 0.572);
+      --red9: color(display-p3 0.83 0.329 0.324);
+      --red10: color(display-p3 0.798 0.294 0.285);
+      --red11: color(display-p3 0.744 0.234 0.222);
+      --red12: color(display-p3 0.36 0.115 0.143);
+    }
+  }
+
+  @media print {
+    :root {
+      --red1: #fffcfc;
+      --red2: #fff7f7;
+      --red3: #feebec;
+      --red4: #ffdbdc;
+      --red5: #ffcdce;
+      --red6: #fdbdbe;
+      --red7: #f4a9aa;
+      --red8: #eb8e90;
+      --red9: #e5484d;
+      --red10: #dc3e42;
+      --red11: #ce2c31;
+      --red12: #641723;
+      --red-contrast: var(--red1);
+      --red-hover: var(--red8);
+
+      @media (color-gamut: p3) {
+        --red1: color(display-p3 0.998 0.989 0.988);
+        --red2: color(display-p3 0.995 0.971 0.971);
+        --red3: color(display-p3 0.985 0.925 0.925);
+        --red4: color(display-p3 0.999 0.866 0.866);
+        --red5: color(display-p3 0.984 0.812 0.811);
+        --red6: color(display-p3 0.955 0.751 0.749);
+        --red7: color(display-p3 0.915 0.675 0.672);
+        --red8: color(display-p3 0.872 0.575 0.572);
+        --red9: color(display-p3 0.83 0.329 0.324);
+        --red10: color(display-p3 0.798 0.294 0.285);
+        --red11: color(display-p3 0.744 0.234 0.222);
+        --red12: color(display-p3 0.36 0.115 0.143);
+      }
+    }
+  }
+}

package/utils/colors/redLightDefault.css

@@ -0,0 +1,67 @@
+/* Generated by scripts/build-colors.js. Do not edit. */
+@layer theme {
+  :root,
+  [data-theme="light"] {
+    --red1: #fffcfc;
+    --red2: #fff7f7;
+    --red3: #feebec;
+    --red4: #ffdbdc;
+    --red5: #ffcdce;
+    --red6: #fdbdbe;
+    --red7: #f4a9aa;
+    --red8: #eb8e90;
+    --red9: #e5484d;
+    --red10: #dc3e42;
+    --red11: #ce2c31;
+    --red12: #641723;
+    --red-contrast: var(--red1);
+    --red-hover: var(--red8);
+
+    @media (color-gamut: p3) {
+      --red1: color(display-p3 0.998 0.989 0.988);
+      --red2: color(display-p3 0.995 0.971 0.971);
+      --red3: color(display-p3 0.985 0.925 0.925);
+      --red4: color(display-p3 0.999 0.866 0.866);
+      --red5: color(display-p3 0.984 0.812 0.811);
+      --red6: color(display-p3 0.955 0.751 0.749);
+      --red7: color(display-p3 0.915 0.675 0.672);
+      --red8: color(display-p3 0.872 0.575 0.572);
+      --red9: color(display-p3 0.83 0.329 0.324);
+      --red10: color(display-p3 0.798 0.294 0.285);
+      --red11: color(display-p3 0.744 0.234 0.222);
+      --red12: color(display-p3 0.36 0.115 0.143);
+    }
+  }
+
+  [data-theme="dark"] {
+    --red1: #191111;
+    --red2: #201314;
+    --red3: #3b1219;
+    --red4: #500f1c;
+    --red5: #611623;
+    --red6: #72232d;
+    --red7: #8c333a;
+    --red8: #b54548;
+    --red9: #e5484d;
+    --red10: #ec5d5e;
+    --red11: #ff9592;
+    --red12: #ffd1d9;
+    --red-contrast: var(--red1);
+    --red-hover: var(--red10);
+
+    @media (color-gamut: p3) {
+      --red1: color(display-p3 0.093 0.068 0.067);
+      --red2: color(display-p3 0.118 0.077 0.079);
+      --red3: color(display-p3 0.211 0.081 0.099);
+      --red4: color(display-p3 0.287 0.079 0.113);
+      --red5: color(display-p3 0.348 0.11 0.142);
+      --red6: color(display-p3 0.414 0.16 0.183);
+      --red7: color(display-p3 0.508 0.224 0.236);
+      --red8: color(display-p3 0.659 0.298 0.297);
+      --red9: color(display-p3 0.83 0.329 0.324);
+      --red10: color(display-p3 0.861 0.403 0.387);
+      --red11: color(display-p3 1 0.57 0.55);
+      --red12: color(display-p3 0.971 0.826 0.852);
+    }
+  }
+}

package/utils/colors/ruby.css

@@ -0,0 +1,101 @@
+/* Generated by scripts/build-colors.js. Do not edit. */
+@layer theme {
+  :root,
+  [data-theme="light"] {
+    --ruby1: #fffcfd;
+    --ruby2: #fff7f8;
+    --ruby3: #feeaed;
+    --ruby4: #ffdce1;
+    --ruby5: #ffced6;
+    --ruby6: #f8bfc8;
+    --ruby7: #efacb8;
+    --ruby8: #e592a3;
+    --ruby9: #e54666;
+    --ruby10: #dc3b5d;
+    --ruby11: #ca244d;
+    --ruby12: #64172b;
+    --ruby-contrast: var(--ruby1);
+    --ruby-hover: var(--ruby8);
+
+    @media (color-gamut: p3) {
+      --ruby1: color(display-p3 0.998 0.989 0.992);
+      --ruby2: color(display-p3 0.995 0.971 0.974);
+      --ruby3: color(display-p3 0.983 0.92 0.928);
+      --ruby4: color(display-p3 0.987 0.869 0.885);
+      --ruby5: color(display-p3 0.968 0.817 0.839);
+      --ruby6: color(display-p3 0.937 0.758 0.786);
+      --ruby7: color(display-p3 0.897 0.685 0.721);
+      --ruby8: color(display-p3 0.851 0.588 0.639);
+      --ruby9: color(display-p3 0.83 0.323 0.408);
+      --ruby10: color(display-p3 0.795 0.286 0.375);
+      --ruby11: color(display-p3 0.728 0.211 0.311);
+      --ruby12: color(display-p3 0.36 0.115 0.171);
+    }
+  }
+
+  [data-theme="dark"] {
+    --ruby1: #191113;
+    --ruby2: #1e1517;
+    --ruby3: #3a141e;
+    --ruby4: #4e1325;
+    --ruby5: #5e1a2e;
+    --ruby6: #6f2539;
+    --ruby7: #883447;
+    --ruby8: #b3445a;
+    --ruby9: #e54666;
+    --ruby10: #ec5a72;
+    --ruby11: #ff949d;
+    --ruby12: #fed2e1;
+    --ruby-contrast: var(--ruby1);
+    --ruby-hover: var(--ruby10);
+
+    @media (color-gamut: p3) {
+      --ruby1: color(display-p3 0.093 0.068 0.074);
+      --ruby2: color(display-p3 0.113 0.083 0.089);
+      --ruby3: color(display-p3 0.208 0.088 0.117);
+      --ruby4: color(display-p3 0.279 0.092 0.147);
+      --ruby5: color(display-p3 0.337 0.12 0.18);
+      --ruby6: color(display-p3 0.401 0.166 0.223);
+      --ruby7: color(display-p3 0.495 0.224 0.281);
+      --ruby8: color(display-p3 0.652 0.295 0.359);
+      --ruby9: color(display-p3 0.83 0.323 0.408);
+      --ruby10: color(display-p3 0.857 0.392 0.455);
+      --ruby11: color(display-p3 1 0.57 0.59);
+      --ruby12: color(display-p3 0.968 0.83 0.88);
+    }
+  }
+
+  @media only screen and (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]) {
+      --ruby1: #191113;
+      --ruby2: #1e1517;
+      --ruby3: #3a141e;
+      --ruby4: #4e1325;
+      --ruby5: #5e1a2e;
+      --ruby6: #6f2539;
+      --ruby7: #883447;
+      --ruby8: #b3445a;
+      --ruby9: #e54666;
+      --ruby10: #ec5a72;
+      --ruby11: #ff949d;
+      --ruby12: #fed2e1;
+      --ruby-contrast: var(--ruby1);
+      --ruby-hover: var(--ruby10);
+
+      @media (color-gamut: p3) {
+        --ruby1: color(display-p3 0.093 0.068 0.074);
+        --ruby2: color(display-p3 0.113 0.083 0.089);
+        --ruby3: color(display-p3 0.208 0.088 0.117);
+        --ruby4: color(display-p3 0.279 0.092 0.147);
+        --ruby5: color(display-p3 0.337 0.12 0.18);
+        --ruby6: color(display-p3 0.401 0.166 0.223);
+        --ruby7: color(display-p3 0.495 0.224 0.281);
+        --ruby8: color(display-p3 0.652 0.295 0.359);
+        --ruby9: color(display-p3 0.83 0.323 0.408);
+        --ruby10: color(display-p3 0.857 0.392 0.455);
+        --ruby11: color(display-p3 1 0.57 0.59);
+        --ruby12: color(display-p3 0.968 0.83 0.88);
+      }
+    }
+  }
+}

package/utils/colors/rubyDarkDefault.css

@@ -0,0 +1,101 @@
+/* Generated by scripts/build-colors.js. Do not edit. */
+@layer theme {
+  :root,
+  [data-theme="dark"] {
+    --ruby1: #191113;
+    --ruby2: #1e1517;
+    --ruby3: #3a141e;
+    --ruby4: #4e1325;
+    --ruby5: #5e1a2e;
+    --ruby6: #6f2539;
+    --ruby7: #883447;
+    --ruby8: #b3445a;
+    --ruby9: #e54666;
+    --ruby10: #ec5a72;
+    --ruby11: #ff949d;
+    --ruby12: #fed2e1;
+    --ruby-contrast: var(--ruby1);
+    --ruby-hover: var(--ruby10);
+
+    @media (color-gamut: p3) {
+      --ruby1: color(display-p3 0.093 0.068 0.074);
+      --ruby2: color(display-p3 0.113 0.083 0.089);
+      --ruby3: color(display-p3 0.208 0.088 0.117);
+      --ruby4: color(display-p3 0.279 0.092 0.147);
+      --ruby5: color(display-p3 0.337 0.12 0.18);
+      --ruby6: color(display-p3 0.401 0.166 0.223);
+      --ruby7: color(display-p3 0.495 0.224 0.281);
+      --ruby8: color(display-p3 0.652 0.295 0.359);
+      --ruby9: color(display-p3 0.83 0.323 0.408);
+      --ruby10: color(display-p3 0.857 0.392 0.455);
+      --ruby11: color(display-p3 1 0.57 0.59);
+      --ruby12: color(display-p3 0.968 0.83 0.88);
+    }
+  }
+
+  [data-theme="light"] {
+    --ruby1: #fffcfd;
+    --ruby2: #fff7f8;
+    --ruby3: #feeaed;
+    --ruby4: #ffdce1;
+    --ruby5: #ffced6;
+    --ruby6: #f8bfc8;
+    --ruby7: #efacb8;
+    --ruby8: #e592a3;
+    --ruby9: #e54666;
+    --ruby10: #dc3b5d;
+    --ruby11: #ca244d;
+    --ruby12: #64172b;
+    --ruby-contrast: var(--ruby1);
+    --ruby-hover: var(--ruby8);
+
+    @media (color-gamut: p3) {
+      --ruby1: color(display-p3 0.998 0.989 0.992);
+      --ruby2: color(display-p3 0.995 0.971 0.974);
+      --ruby3: color(display-p3 0.983 0.92 0.928);
+      --ruby4: color(display-p3 0.987 0.869 0.885);
+      --ruby5: color(display-p3 0.968 0.817 0.839);
+      --ruby6: color(display-p3 0.937 0.758 0.786);
+      --ruby7: color(display-p3 0.897 0.685 0.721);
+      --ruby8: color(display-p3 0.851 0.588 0.639);
+      --ruby9: color(display-p3 0.83 0.323 0.408);
+      --ruby10: color(display-p3 0.795 0.286 0.375);
+      --ruby11: color(display-p3 0.728 0.211 0.311);
+      --ruby12: color(display-p3 0.36 0.115 0.171);
+    }
+  }
+
+  @media print {
+    :root {
+      --ruby1: #fffcfd;
+      --ruby2: #fff7f8;
+      --ruby3: #feeaed;
+      --ruby4: #ffdce1;
+      --ruby5: #ffced6;
+      --ruby6: #f8bfc8;
+      --ruby7: #efacb8;
+      --ruby8: #e592a3;
+      --ruby9: #e54666;
+      --ruby10: #dc3b5d;
+      --ruby11: #ca244d;
+      --ruby12: #64172b;
+      --ruby-contrast: var(--ruby1);
+      --ruby-hover: var(--ruby8);
+
+      @media (color-gamut: p3) {
+        --ruby1: color(display-p3 0.998 0.989 0.992);
+        --ruby2: color(display-p3 0.995 0.971 0.974);
+        --ruby3: color(display-p3 0.983 0.92 0.928);
+        --ruby4: color(display-p3 0.987 0.869 0.885);
+        --ruby5: color(display-p3 0.968 0.817 0.839);
+        --ruby6: color(display-p3 0.937 0.758 0.786);
+        --ruby7: color(display-p3 0.897 0.685 0.721);
+        --ruby8: color(display-p3 0.851 0.588 0.639);
+        --ruby9: color(display-p3 0.83 0.323 0.408);
+        --ruby10: color(display-p3 0.795 0.286 0.375);
+        --ruby11: color(display-p3 0.728 0.211 0.311);
+        --ruby12: color(display-p3 0.36 0.115 0.171);
+      }
+    }
+  }
+}

package/utils/colors/rubyLightDefault.css

@@ -0,0 +1,67 @@
+/* Generated by scripts/build-colors.js. Do not edit. */
+@layer theme {
+  :root,
+  [data-theme="light"] {
+    --ruby1: #fffcfd;
+    --ruby2: #fff7f8;
+    --ruby3: #feeaed;
+    --ruby4: #ffdce1;
+    --ruby5: #ffced6;
+    --ruby6: #f8bfc8;
+    --ruby7: #efacb8;
+    --ruby8: #e592a3;
+    --ruby9: #e54666;
+    --ruby10: #dc3b5d;
+    --ruby11: #ca244d;
+    --ruby12: #64172b;
+    --ruby-contrast: var(--ruby1);
+    --ruby-hover: var(--ruby8);
+
+    @media (color-gamut: p3) {
+      --ruby1: color(display-p3 0.998 0.989 0.992);
+      --ruby2: color(display-p3 0.995 0.971 0.974);
+      --ruby3: color(display-p3 0.983 0.92 0.928);
+      --ruby4: color(display-p3 0.987 0.869 0.885);
+      --ruby5: color(display-p3 0.968 0.817 0.839);
+      --ruby6: color(display-p3 0.937 0.758 0.786);
+      --ruby7: color(display-p3 0.897 0.685 0.721);
+      --ruby8: color(display-p3 0.851 0.588 0.639);
+      --ruby9: color(display-p3 0.83 0.323 0.408);
+      --ruby10: color(display-p3 0.795 0.286 0.375);
+      --ruby11: color(display-p3 0.728 0.211 0.311);
+      --ruby12: color(display-p3 0.36 0.115 0.171);
+    }
+  }
+
+  [data-theme="dark"] {
+    --ruby1: #191113;
+    --ruby2: #1e1517;
+    --ruby3: #3a141e;
+    --ruby4: #4e1325;
+    --ruby5: #5e1a2e;
+    --ruby6: #6f2539;
+    --ruby7: #883447;
+    --ruby8: #b3445a;
+    --ruby9: #e54666;
+    --ruby10: #ec5a72;
+    --ruby11: #ff949d;
+    --ruby12: #fed2e1;
+    --ruby-contrast: var(--ruby1);
+    --ruby-hover: var(--ruby10);
+
+    @media (color-gamut: p3) {
+      --ruby1: color(display-p3 0.093 0.068 0.074);
+      --ruby2: color(display-p3 0.113 0.083 0.089);
+      --ruby3: color(display-p3 0.208 0.088 0.117);
+      --ruby4: color(display-p3 0.279 0.092 0.147);
+      --ruby5: color(display-p3 0.337 0.12 0.18);
+      --ruby6: color(display-p3 0.401 0.166 0.223);
+      --ruby7: color(display-p3 0.495 0.224 0.281);
+      --ruby8: color(display-p3 0.652 0.295 0.359);
+      --ruby9: color(display-p3 0.83 0.323 0.408);
+      --ruby10: color(display-p3 0.857 0.392 0.455);
+      --ruby11: color(display-p3 1 0.57 0.59);
+      --ruby12: color(display-p3 0.968 0.83 0.88);
+    }
+  }
+}

package/utils/colors/sage.css

@@ -0,0 +1,101 @@
+/* Generated by scripts/build-colors.js. Do not edit. */
+@layer theme {
+  :root,
+  [data-theme="light"] {
+    --sage1: #fbfdfc;
+    --sage2: #f7f9f8;
+    --sage3: #eef1f0;
+    --sage4: #e6e9e8;
+    --sage5: #dfe2e0;
+    --sage6: #d7dad9;
+    --sage7: #cbcfcd;
+    --sage8: #b8bcba;
+    --sage9: #868e8b;
+    --sage10: #7c8481;
+    --sage11: #5f6563;
+    --sage12: #1a211e;
+    --sage-contrast: var(--sage12);
+    --sage-hover: var(--sage8);
+
+    @media (color-gamut: p3) {
+      --sage1: color(display-p3 0.986 0.992 0.988);
+      --sage2: color(display-p3 0.97 0.977 0.974);
+      --sage3: color(display-p3 0.935 0.944 0.94);
+      --sage4: color(display-p3 0.904 0.913 0.909);
+      --sage5: color(display-p3 0.875 0.885 0.88);
+      --sage6: color(display-p3 0.844 0.854 0.849);
+      --sage7: color(display-p3 0.8 0.811 0.806);
+      --sage8: color(display-p3 0.725 0.738 0.732);
+      --sage9: color(display-p3 0.531 0.556 0.546);
+      --sage10: color(display-p3 0.492 0.515 0.506);
+      --sage11: color(display-p3 0.377 0.395 0.389);
+      --sage12: color(display-p3 0.107 0.129 0.118);
+    }
+  }
+
+  [data-theme="dark"] {
+    --sage1: #101211;
+    --sage2: #171918;
+    --sage3: #202221;
+    --sage4: #272a29;
+    --sage5: #2e3130;
+    --sage6: #373b39;
+    --sage7: #444947;
+    --sage8: #5b625f;
+    --sage9: #63706b;
+    --sage10: #717d79;
+    --sage11: #adb5b2;
+    --sage12: #eceeed;
+    --sage-contrast: #fff;
+    --sage-hover: var(--sage10);
+
+    @media (color-gamut: p3) {
+      --sage1: color(display-p3 0.064 0.07 0.067);
+      --sage2: color(display-p3 0.092 0.098 0.094);
+      --sage3: color(display-p3 0.128 0.135 0.131);
+      --sage4: color(display-p3 0.155 0.164 0.159);
+      --sage5: color(display-p3 0.183 0.193 0.188);
+      --sage6: color(display-p3 0.218 0.23 0.224);
+      --sage7: color(display-p3 0.269 0.285 0.277);
+      --sage8: color(display-p3 0.362 0.382 0.373);
+      --sage9: color(display-p3 0.398 0.438 0.421);
+      --sage10: color(display-p3 0.453 0.49 0.474);
+      --sage11: color(display-p3 0.685 0.709 0.697);
+      --sage12: color(display-p3 0.927 0.933 0.93);
+    }
+  }
+
+  @media only screen and (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]) {
+      --sage1: #101211;
+      --sage2: #171918;
+      --sage3: #202221;
+      --sage4: #272a29;
+      --sage5: #2e3130;
+      --sage6: #373b39;
+      --sage7: #444947;
+      --sage8: #5b625f;
+      --sage9: #63706b;
+      --sage10: #717d79;
+      --sage11: #adb5b2;
+      --sage12: #eceeed;
+      --sage-contrast: #fff;
+      --sage-hover: var(--sage10);
+
+      @media (color-gamut: p3) {
+        --sage1: color(display-p3 0.064 0.07 0.067);
+        --sage2: color(display-p3 0.092 0.098 0.094);
+        --sage3: color(display-p3 0.128 0.135 0.131);
+        --sage4: color(display-p3 0.155 0.164 0.159);
+        --sage5: color(display-p3 0.183 0.193 0.188);
+        --sage6: color(display-p3 0.218 0.23 0.224);
+        --sage7: color(display-p3 0.269 0.285 0.277);
+        --sage8: color(display-p3 0.362 0.382 0.373);
+        --sage9: color(display-p3 0.398 0.438 0.421);
+        --sage10: color(display-p3 0.453 0.49 0.474);
+        --sage11: color(display-p3 0.685 0.709 0.697);
+        --sage12: color(display-p3 0.927 0.933 0.93);
+      }
+    }
+  }
+}