@tulipfarm/sprout 0.0.0-stage → 0.2.0

package/dist/styles/themes/discord.css

@@ -0,0 +1,125 @@
+/* Discord: Blurple on cool slate.
+ *
+ * One file is the whole theme: font, radius, and every color token for light
+ * and dark. Import it after "@tulipfarm/sprout/styles.css", then set
+ * data-sprout-theme="discord" on <html>, or on any element to theme only
+ * that subtree.
+ */
+@layer base {
+  [data-sprout-theme="discord"] {
+    --sprout-font: ui-sans-serif, system-ui, sans-serif;
+    --sprout-radius-control: 0.25rem;
+    --sprout-radius-panel: 0.5rem;
+  }
+
+  [data-sprout-theme="discord"],
+  .light[data-sprout-theme="discord"],
+  .light [data-sprout-theme="discord"] {
+    --sprout-canvas: #f2f3f5;
+    --sprout-surface: #ffffff;
+    --sprout-hover: #f0f0f0;
+    --sprout-active: #e6e6e6;
+    --sprout-text: #060607;
+    --sprout-muted: #4e5058;
+    --sprout-line: #e1e2e4;
+    --sprout-border: #838383;
+    --sprout-border-strong: #656565;
+    --sprout-input: #d7d7d7;
+    --sprout-primary: #4752c4;
+    --sprout-primary-hover: #3e48ac;
+    --sprout-primary-active: #374099;
+    --sprout-on-primary: #ffffff;
+    --sprout-focus: #4752c4;
+    --sprout-danger: #b32d34;
+    --sprout-danger-hover: #98252b;
+    --sprout-on-danger: #fff8f8;
+    --sprout-info: #1f5fb8;
+    --sprout-info-subtle: #ebf1fd;
+    --sprout-danger-subtle: #fdeeef;
+    --sprout-success: #1d6a37;
+    --sprout-success-subtle: #e8f4eb;
+    --sprout-warning: #8a4b08;
+    --sprout-warning-subtle: #fdf1dc;
+    --sprout-primary-subtle: color-mix(
+      in oklab,
+      var(--sprout-primary) 10%,
+      var(--sprout-surface)
+    );
+    --sprout-secondary: #eeeeee;
+    --sprout-overlay: rgb(18 18 18 / 0.35);
+  }
+
+  .dark[data-sprout-theme="discord"],
+  .dark [data-sprout-theme="discord"] {
+    --sprout-canvas: #1e1f22;
+    --sprout-surface: #2b2d31;
+    --sprout-hover: #393b3f;
+    --sprout-active: #424448;
+    --sprout-text: #dbdee1;
+    --sprout-muted: #a5abb4;
+    --sprout-line: #3f4147;
+    --sprout-border: #7a7d80;
+    --sprout-border-strong: #919497;
+    --sprout-input: #4e5054;
+    --sprout-primary: #5865f2;
+    --sprout-primary-hover: #6c77f4;
+    --sprout-primary-active: #7d87f5;
+    --sprout-on-primary: #ffffff;
+    --sprout-focus: #5865f2;
+    --sprout-danger: #ff9197;
+    --sprout-danger-hover: #ffadb1;
+    --sprout-on-danger: #3c1014;
+    --sprout-info: #8fb8f5;
+    --sprout-info-subtle: #1f2c45;
+    --sprout-danger-subtle: #3a2124;
+    --sprout-success: #82d29a;
+    --sprout-success-subtle: #1c3223;
+    --sprout-warning: #eec27e;
+    --sprout-warning-subtle: #34291b;
+    --sprout-primary-subtle: color-mix(
+      in oklab,
+      var(--sprout-primary) 16%,
+      var(--sprout-surface)
+    );
+    --sprout-secondary: #3b3d41;
+    --sprout-overlay: rgb(8 8 8 / 0.65);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root:not(.light):not(.dark)[data-sprout-theme="discord"],
+    :root:not(.light):not(.dark) [data-sprout-theme="discord"] {
+      --sprout-canvas: #1e1f22;
+      --sprout-surface: #2b2d31;
+      --sprout-hover: #393b3f;
+      --sprout-active: #424448;
+      --sprout-text: #dbdee1;
+      --sprout-muted: #a5abb4;
+      --sprout-line: #3f4147;
+      --sprout-border: #7a7d80;
+      --sprout-border-strong: #919497;
+      --sprout-input: #4e5054;
+      --sprout-primary: #5865f2;
+      --sprout-primary-hover: #6c77f4;
+      --sprout-primary-active: #7d87f5;
+      --sprout-on-primary: #ffffff;
+      --sprout-focus: #5865f2;
+      --sprout-danger: #ff9197;
+      --sprout-danger-hover: #ffadb1;
+      --sprout-on-danger: #3c1014;
+      --sprout-info: #8fb8f5;
+      --sprout-info-subtle: #1f2c45;
+      --sprout-danger-subtle: #3a2124;
+      --sprout-success: #82d29a;
+      --sprout-success-subtle: #1c3223;
+      --sprout-warning: #eec27e;
+      --sprout-warning-subtle: #34291b;
+      --sprout-primary-subtle: color-mix(
+        in oklab,
+        var(--sprout-primary) 16%,
+        var(--sprout-surface)
+      );
+      --sprout-secondary: #3b3d41;
+      --sprout-overlay: rgb(8 8 8 / 0.65);
+    }
+  }
+}

package/dist/styles/themes/github.css

@@ -0,0 +1,125 @@
+/* GitHub: Primer grays and merge green.
+ *
+ * One file is the whole theme: font, radius, and every color token for light
+ * and dark. Import it after "@tulipfarm/sprout/styles.css", then set
+ * data-sprout-theme="github" on <html>, or on any element to theme only
+ * that subtree.
+ */
+@layer base {
+  [data-sprout-theme="github"] {
+    --sprout-font: ui-sans-serif, system-ui, sans-serif;
+    --sprout-radius-control: 0.375rem;
+    --sprout-radius-panel: 0.75rem;
+  }
+
+  [data-sprout-theme="github"],
+  .light[data-sprout-theme="github"],
+  .light [data-sprout-theme="github"] {
+    --sprout-canvas: #f6f8fa;
+    --sprout-surface: #ffffff;
+    --sprout-hover: #f2f2f2;
+    --sprout-active: #e9e9ea;
+    --sprout-text: #1f2328;
+    --sprout-muted: #59636e;
+    --sprout-line: #d1d9e0;
+    --sprout-border: #8f9194;
+    --sprout-border-strong: #74777a;
+    --sprout-input: #dbdcdd;
+    --sprout-primary: #1a7f37;
+    --sprout-primary-hover: #177030;
+    --sprout-primary-active: #14632b;
+    --sprout-on-primary: #ffffff;
+    --sprout-focus: #1a7f37;
+    --sprout-danger: #b32d34;
+    --sprout-danger-hover: #98252b;
+    --sprout-on-danger: #fff8f8;
+    --sprout-info: #1f5fb8;
+    --sprout-info-subtle: #ebf1fd;
+    --sprout-danger-subtle: #fdeeef;
+    --sprout-success: #1d6a37;
+    --sprout-success-subtle: #e8f4eb;
+    --sprout-warning: #8a4b08;
+    --sprout-warning-subtle: #fdf1dc;
+    --sprout-primary-subtle: color-mix(
+      in oklab,
+      var(--sprout-primary) 10%,
+      var(--sprout-surface)
+    );
+    --sprout-secondary: #eff0f0;
+    --sprout-overlay: rgb(18 18 18 / 0.35);
+  }
+
+  .dark[data-sprout-theme="github"],
+  .dark [data-sprout-theme="github"] {
+    --sprout-canvas: #010409;
+    --sprout-surface: #0d1117;
+    --sprout-hover: #1f2329;
+    --sprout-active: #2b2f35;
+    --sprout-text: #f0f6fc;
+    --sprout-muted: #9198a1;
+    --sprout-line: #3d444d;
+    --sprout-border: #73787e;
+    --sprout-border-strong: #91969c;
+    --sprout-input: #3a3f45;
+    --sprout-primary: #3fb950;
+    --sprout-primary-hover: #56c165;
+    --sprout-primary-active: #69c877;
+    --sprout-on-primary: #010409;
+    --sprout-focus: #3fb950;
+    --sprout-danger: #ff9197;
+    --sprout-danger-hover: #ffadb1;
+    --sprout-on-danger: #3c1014;
+    --sprout-info: #8fb8f5;
+    --sprout-info-subtle: #1f2c45;
+    --sprout-danger-subtle: #3a2124;
+    --sprout-success: #82d29a;
+    --sprout-success-subtle: #1c3223;
+    --sprout-warning: #eec27e;
+    --sprout-warning-subtle: #34291b;
+    --sprout-primary-subtle: color-mix(
+      in oklab,
+      var(--sprout-primary) 16%,
+      var(--sprout-surface)
+    );
+    --sprout-secondary: #21262c;
+    --sprout-overlay: rgb(8 8 8 / 0.65);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root:not(.light):not(.dark)[data-sprout-theme="github"],
+    :root:not(.light):not(.dark) [data-sprout-theme="github"] {
+      --sprout-canvas: #010409;
+      --sprout-surface: #0d1117;
+      --sprout-hover: #1f2329;
+      --sprout-active: #2b2f35;
+      --sprout-text: #f0f6fc;
+      --sprout-muted: #9198a1;
+      --sprout-line: #3d444d;
+      --sprout-border: #73787e;
+      --sprout-border-strong: #91969c;
+      --sprout-input: #3a3f45;
+      --sprout-primary: #3fb950;
+      --sprout-primary-hover: #56c165;
+      --sprout-primary-active: #69c877;
+      --sprout-on-primary: #010409;
+      --sprout-focus: #3fb950;
+      --sprout-danger: #ff9197;
+      --sprout-danger-hover: #ffadb1;
+      --sprout-on-danger: #3c1014;
+      --sprout-info: #8fb8f5;
+      --sprout-info-subtle: #1f2c45;
+      --sprout-danger-subtle: #3a2124;
+      --sprout-success: #82d29a;
+      --sprout-success-subtle: #1c3223;
+      --sprout-warning: #eec27e;
+      --sprout-warning-subtle: #34291b;
+      --sprout-primary-subtle: color-mix(
+        in oklab,
+        var(--sprout-primary) 16%,
+        var(--sprout-surface)
+      );
+      --sprout-secondary: #21262c;
+      --sprout-overlay: rgb(8 8 8 / 0.65);
+    }
+  }
+}

package/dist/styles/themes/grok.css

@@ -0,0 +1,125 @@
+/* Grok: Pure black and white, round corners.
+ *
+ * One file is the whole theme: font, radius, and every color token for light
+ * and dark. Import it after "@tulipfarm/sprout/styles.css", then set
+ * data-sprout-theme="grok" on <html>, or on any element to theme only
+ * that subtree.
+ */
+@layer base {
+  [data-sprout-theme="grok"] {
+    --sprout-font: ui-sans-serif, system-ui, sans-serif;
+    --sprout-radius-control: 0.75rem;
+    --sprout-radius-panel: 1.25rem;
+  }
+
+  [data-sprout-theme="grok"],
+  .light[data-sprout-theme="grok"],
+  .light [data-sprout-theme="grok"] {
+    --sprout-canvas: #ffffff;
+    --sprout-surface: #fafafa;
+    --sprout-hover: #ececec;
+    --sprout-active: #e2e2e2;
+    --sprout-text: #0a0a0a;
+    --sprout-muted: #5c5c5c;
+    --sprout-line: #e6e6e6;
+    --sprout-border: #828282;
+    --sprout-border-strong: #656565;
+    --sprout-input: #d4d4d4;
+    --sprout-primary: #0a0a0a;
+    --sprout-primary-hover: #090909;
+    --sprout-primary-active: #080808;
+    --sprout-on-primary: #ffffff;
+    --sprout-focus: #0a0a0a;
+    --sprout-danger: #b32d34;
+    --sprout-danger-hover: #98252b;
+    --sprout-on-danger: #fff8f8;
+    --sprout-info: #1f5fb8;
+    --sprout-info-subtle: #ebf1fd;
+    --sprout-danger-subtle: #fdeeef;
+    --sprout-success: #1d6a37;
+    --sprout-success-subtle: #e8f4eb;
+    --sprout-warning: #8a4b08;
+    --sprout-warning-subtle: #fdf1dc;
+    --sprout-primary-subtle: color-mix(
+      in oklab,
+      var(--sprout-primary) 10%,
+      var(--sprout-surface)
+    );
+    --sprout-secondary: #e9e9e9;
+    --sprout-overlay: rgb(18 18 18 / 0.35);
+  }
+
+  .dark[data-sprout-theme="grok"],
+  .dark [data-sprout-theme="grok"] {
+    --sprout-canvas: #000000;
+    --sprout-surface: #0f0f0f;
+    --sprout-hover: #222222;
+    --sprout-active: #2e2e2e;
+    --sprout-text: #fafafa;
+    --sprout-muted: #a3a3a3;
+    --sprout-line: #262626;
+    --sprout-border: #797979;
+    --sprout-border-strong: #979797;
+    --sprout-input: #3e3e3e;
+    --sprout-primary: #fafafa;
+    --sprout-primary-hover: #fbfbfb;
+    --sprout-primary-active: #fbfbfb;
+    --sprout-on-primary: #111111;
+    --sprout-focus: #fafafa;
+    --sprout-danger: #ff9197;
+    --sprout-danger-hover: #ffadb1;
+    --sprout-on-danger: #3c1014;
+    --sprout-info: #8fb8f5;
+    --sprout-info-subtle: #1f2c45;
+    --sprout-danger-subtle: #3a2124;
+    --sprout-success: #82d29a;
+    --sprout-success-subtle: #1c3223;
+    --sprout-warning: #eec27e;
+    --sprout-warning-subtle: #34291b;
+    --sprout-primary-subtle: color-mix(
+      in oklab,
+      var(--sprout-primary) 16%,
+      var(--sprout-surface)
+    );
+    --sprout-secondary: #242424;
+    --sprout-overlay: rgb(8 8 8 / 0.65);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root:not(.light):not(.dark)[data-sprout-theme="grok"],
+    :root:not(.light):not(.dark) [data-sprout-theme="grok"] {
+      --sprout-canvas: #000000;
+      --sprout-surface: #0f0f0f;
+      --sprout-hover: #222222;
+      --sprout-active: #2e2e2e;
+      --sprout-text: #fafafa;
+      --sprout-muted: #a3a3a3;
+      --sprout-line: #262626;
+      --sprout-border: #797979;
+      --sprout-border-strong: #979797;
+      --sprout-input: #3e3e3e;
+      --sprout-primary: #fafafa;
+      --sprout-primary-hover: #fbfbfb;
+      --sprout-primary-active: #fbfbfb;
+      --sprout-on-primary: #111111;
+      --sprout-focus: #fafafa;
+      --sprout-danger: #ff9197;
+      --sprout-danger-hover: #ffadb1;
+      --sprout-on-danger: #3c1014;
+      --sprout-info: #8fb8f5;
+      --sprout-info-subtle: #1f2c45;
+      --sprout-danger-subtle: #3a2124;
+      --sprout-success: #82d29a;
+      --sprout-success-subtle: #1c3223;
+      --sprout-warning: #eec27e;
+      --sprout-warning-subtle: #34291b;
+      --sprout-primary-subtle: color-mix(
+        in oklab,
+        var(--sprout-primary) 16%,
+        var(--sprout-surface)
+      );
+      --sprout-secondary: #242424;
+      --sprout-overlay: rgb(8 8 8 / 0.65);
+    }
+  }
+}

package/dist/styles/themes/linear.css

@@ -0,0 +1,126 @@
+/* Linear: Cool grays and indigo.
+ *
+ * One file is the whole theme: font, radius, and every color token for light
+ * and dark. Import it after "@tulipfarm/sprout/styles.css", then set
+ * data-sprout-theme="linear" on <html>, or on any element to theme only
+ * that subtree.
+ */
+@layer base {
+  [data-sprout-theme="linear"] {
+    --sprout-font:
+      "Inter Variable", Inter, ui-sans-serif, system-ui, sans-serif;
+    --sprout-radius-control: 0.375rem;
+    --sprout-radius-panel: 0.625rem;
+  }
+
+  [data-sprout-theme="linear"],
+  .light[data-sprout-theme="linear"],
+  .light [data-sprout-theme="linear"] {
+    --sprout-canvas: #f7f8f8;
+    --sprout-surface: #ffffff;
+    --sprout-hover: #f1f1f2;
+    --sprout-active: #e8e8e9;
+    --sprout-text: #1b1c1f;
+    --sprout-muted: #5f6168;
+    --sprout-line: #e4e5e8;
+    --sprout-border: #8d8e8f;
+    --sprout-border-strong: #727274;
+    --sprout-input: #dbdbdb;
+    --sprout-primary: #5e6ad2;
+    --sprout-primary-hover: #535db9;
+    --sprout-primary-active: #4953a4;
+    --sprout-on-primary: #ffffff;
+    --sprout-focus: #5e6ad2;
+    --sprout-danger: #b32d34;
+    --sprout-danger-hover: #98252b;
+    --sprout-on-danger: #fff8f8;
+    --sprout-info: #1f5fb8;
+    --sprout-info-subtle: #ebf1fd;
+    --sprout-danger-subtle: #fdeeef;
+    --sprout-success: #1d6a37;
+    --sprout-success-subtle: #e8f4eb;
+    --sprout-warning: #8a4b08;
+    --sprout-warning-subtle: #fdf1dc;
+    --sprout-primary-subtle: color-mix(
+      in oklab,
+      var(--sprout-primary) 10%,
+      var(--sprout-surface)
+    );
+    --sprout-secondary: #efefef;
+    --sprout-overlay: rgb(18 18 18 / 0.35);
+  }
+
+  .dark[data-sprout-theme="linear"],
+  .dark [data-sprout-theme="linear"] {
+    --sprout-canvas: #08090a;
+    --sprout-surface: #141516;
+    --sprout-hover: #262728;
+    --sprout-active: #323333;
+    --sprout-text: #f7f8f8;
+    --sprout-muted: #8a8f98;
+    --sprout-line: #23252a;
+    --sprout-border: #7a7b7c;
+    --sprout-border-strong: #989999;
+    --sprout-input: #414243;
+    --sprout-primary: #7c83ef;
+    --sprout-primary-hover: #8c92f1;
+    --sprout-primary-active: #999ef3;
+    --sprout-on-primary: #08090a;
+    --sprout-focus: #7c83ef;
+    --sprout-danger: #ff9197;
+    --sprout-danger-hover: #ffadb1;
+    --sprout-on-danger: #3c1014;
+    --sprout-info: #8fb8f5;
+    --sprout-info-subtle: #1f2c45;
+    --sprout-danger-subtle: #3a2124;
+    --sprout-success: #82d29a;
+    --sprout-success-subtle: #1c3223;
+    --sprout-warning: #eec27e;
+    --sprout-warning-subtle: #34291b;
+    --sprout-primary-subtle: color-mix(
+      in oklab,
+      var(--sprout-primary) 16%,
+      var(--sprout-surface)
+    );
+    --sprout-secondary: #28292a;
+    --sprout-overlay: rgb(8 8 8 / 0.65);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root:not(.light):not(.dark)[data-sprout-theme="linear"],
+    :root:not(.light):not(.dark) [data-sprout-theme="linear"] {
+      --sprout-canvas: #08090a;
+      --sprout-surface: #141516;
+      --sprout-hover: #262728;
+      --sprout-active: #323333;
+      --sprout-text: #f7f8f8;
+      --sprout-muted: #8a8f98;
+      --sprout-line: #23252a;
+      --sprout-border: #7a7b7c;
+      --sprout-border-strong: #989999;
+      --sprout-input: #414243;
+      --sprout-primary: #7c83ef;
+      --sprout-primary-hover: #8c92f1;
+      --sprout-primary-active: #999ef3;
+      --sprout-on-primary: #08090a;
+      --sprout-focus: #7c83ef;
+      --sprout-danger: #ff9197;
+      --sprout-danger-hover: #ffadb1;
+      --sprout-on-danger: #3c1014;
+      --sprout-info: #8fb8f5;
+      --sprout-info-subtle: #1f2c45;
+      --sprout-danger-subtle: #3a2124;
+      --sprout-success: #82d29a;
+      --sprout-success-subtle: #1c3223;
+      --sprout-warning: #eec27e;
+      --sprout-warning-subtle: #34291b;
+      --sprout-primary-subtle: color-mix(
+        in oklab,
+        var(--sprout-primary) 16%,
+        var(--sprout-surface)
+      );
+      --sprout-secondary: #28292a;
+      --sprout-overlay: rgb(8 8 8 / 0.65);
+    }
+  }
+}

package/dist/styles/themes/neutral.css

@@ -0,0 +1,125 @@
+/* Neutral: Sprout's default grays.
+ *
+ * One file is the whole theme: font, radius, and every color token for light
+ * and dark. Import it after "@tulipfarm/sprout/styles.css", then set
+ * data-sprout-theme="neutral" on <html>, or on any element to theme only
+ * that subtree.
+ */
+@layer base {
+  [data-sprout-theme="neutral"] {
+    --sprout-font: ui-sans-serif, system-ui, sans-serif;
+    --sprout-radius-control: 0.375rem;
+    --sprout-radius-panel: 0.75rem;
+  }
+
+  [data-sprout-theme="neutral"],
+  .light[data-sprout-theme="neutral"],
+  .light [data-sprout-theme="neutral"] {
+    --sprout-canvas: #f8f8f8;
+    --sprout-surface: #fdfdfd;
+    --sprout-hover: #eeeeee;
+    --sprout-active: #e3e3e3;
+    --sprout-text: #242424;
+    --sprout-muted: #626262;
+    --sprout-line: #e0e0e0;
+    --sprout-border: #909090;
+    --sprout-border-strong: #707070;
+    --sprout-input: #d4d4d4;
+    --sprout-primary: #262626;
+    --sprout-primary-hover: #171717;
+    --sprout-primary-active: #0d0d0d;
+    --sprout-on-primary: #fafafa;
+    --sprout-focus: #525252;
+    --sprout-danger: #b32d34;
+    --sprout-danger-hover: #98252b;
+    --sprout-on-danger: #fff8f8;
+    --sprout-info: #1f5fb8;
+    --sprout-info-subtle: #ebf1fd;
+    --sprout-danger-subtle: #fdeeef;
+    --sprout-success: #1d6a37;
+    --sprout-success-subtle: #e8f4eb;
+    --sprout-warning: #8a4b08;
+    --sprout-warning-subtle: #fdf1dc;
+    --sprout-primary-subtle: color-mix(
+      in oklab,
+      var(--sprout-primary) 10%,
+      var(--sprout-surface)
+    );
+    --sprout-secondary: #ececec;
+    --sprout-overlay: rgb(18 18 18 / 0.35);
+  }
+
+  .dark[data-sprout-theme="neutral"],
+  .dark [data-sprout-theme="neutral"] {
+    --sprout-canvas: #151515;
+    --sprout-surface: #1d1d1d;
+    --sprout-hover: #2b2b2b;
+    --sprout-active: #363636;
+    --sprout-text: #f0f0f0;
+    --sprout-muted: #adadad;
+    --sprout-line: #383838;
+    --sprout-border: #808080;
+    --sprout-border-strong: #a0a0a0;
+    --sprout-input: #474747;
+    --sprout-primary: #ededed;
+    --sprout-primary-hover: #d6d6d6;
+    --sprout-primary-active: #c4c4c4;
+    --sprout-on-primary: #202020;
+    --sprout-focus: #b5b5b5;
+    --sprout-danger: #ff9197;
+    --sprout-danger-hover: #ffadb1;
+    --sprout-on-danger: #3c1014;
+    --sprout-info: #8fb8f5;
+    --sprout-info-subtle: #1f2c45;
+    --sprout-danger-subtle: #3a2124;
+    --sprout-success: #82d29a;
+    --sprout-success-subtle: #1c3223;
+    --sprout-warning: #eec27e;
+    --sprout-warning-subtle: #34291b;
+    --sprout-primary-subtle: color-mix(
+      in oklab,
+      var(--sprout-primary) 16%,
+      var(--sprout-surface)
+    );
+    --sprout-secondary: #2c2c2c;
+    --sprout-overlay: rgb(8 8 8 / 0.65);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root:not(.light):not(.dark)[data-sprout-theme="neutral"],
+    :root:not(.light):not(.dark) [data-sprout-theme="neutral"] {
+      --sprout-canvas: #151515;
+      --sprout-surface: #1d1d1d;
+      --sprout-hover: #2b2b2b;
+      --sprout-active: #363636;
+      --sprout-text: #f0f0f0;
+      --sprout-muted: #adadad;
+      --sprout-line: #383838;
+      --sprout-border: #808080;
+      --sprout-border-strong: #a0a0a0;
+      --sprout-input: #474747;
+      --sprout-primary: #ededed;
+      --sprout-primary-hover: #d6d6d6;
+      --sprout-primary-active: #c4c4c4;
+      --sprout-on-primary: #202020;
+      --sprout-focus: #b5b5b5;
+      --sprout-danger: #ff9197;
+      --sprout-danger-hover: #ffadb1;
+      --sprout-on-danger: #3c1014;
+      --sprout-info: #8fb8f5;
+      --sprout-info-subtle: #1f2c45;
+      --sprout-danger-subtle: #3a2124;
+      --sprout-success: #82d29a;
+      --sprout-success-subtle: #1c3223;
+      --sprout-warning: #eec27e;
+      --sprout-warning-subtle: #34291b;
+      --sprout-primary-subtle: color-mix(
+        in oklab,
+        var(--sprout-primary) 16%,
+        var(--sprout-surface)
+      );
+      --sprout-secondary: #2c2c2c;
+      --sprout-overlay: rgb(8 8 8 / 0.65);
+    }
+  }
+}