@tulipfarm/sprout 0.0.0-stage → 0.2.0

package/dist/styles/themes/notion.css

@@ -0,0 +1,125 @@
+/* Notion: Soft paper grays and link blue.
+ *
+ * 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="notion" on <html>, or on any element to theme only
+ * that subtree.
+ */
+@layer base {
+  [data-sprout-theme="notion"] {
+    --sprout-font: ui-sans-serif, system-ui, sans-serif;
+    --sprout-radius-control: 0.375rem;
+    --sprout-radius-panel: 0.5rem;
+  }
+
+  [data-sprout-theme="notion"],
+  .light[data-sprout-theme="notion"],
+  .light [data-sprout-theme="notion"] {
+    --sprout-canvas: #f7f7f5;
+    --sprout-surface: #ffffff;
+    --sprout-hover: #f3f3f3;
+    --sprout-active: #ebebea;
+    --sprout-text: #37352f;
+    --sprout-muted: #6f6e69;
+    --sprout-line: #e9e9e7;
+    --sprout-border: #9b9a97;
+    --sprout-border-strong: #83827e;
+    --sprout-input: #dfdfde;
+    --sprout-primary: #1f6fc5;
+    --sprout-primary-hover: #1b62ad;
+    --sprout-primary-active: #18579a;
+    --sprout-on-primary: #ffffff;
+    --sprout-focus: #1f6fc5;
+    --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: #f1f1f0;
+    --sprout-overlay: rgb(18 18 18 / 0.35);
+  }
+
+  .dark[data-sprout-theme="notion"],
+  .dark [data-sprout-theme="notion"] {
+    --sprout-canvas: #191919;
+    --sprout-surface: #202020;
+    --sprout-hover: #30302f;
+    --sprout-active: #393939;
+    --sprout-text: #e3e3e1;
+    --sprout-muted: #9b9b9b;
+    --sprout-line: #2f2f2f;
+    --sprout-border: #787877;
+    --sprout-border-strong: #919190;
+    --sprout-input: #474747;
+    --sprout-primary: #529cca;
+    --sprout-primary-hover: #67a8d0;
+    --sprout-primary-active: #78b2d6;
+    --sprout-on-primary: #111111;
+    --sprout-focus: #529cca;
+    --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: #323231;
+    --sprout-overlay: rgb(8 8 8 / 0.65);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root:not(.light):not(.dark)[data-sprout-theme="notion"],
+    :root:not(.light):not(.dark) [data-sprout-theme="notion"] {
+      --sprout-canvas: #191919;
+      --sprout-surface: #202020;
+      --sprout-hover: #30302f;
+      --sprout-active: #393939;
+      --sprout-text: #e3e3e1;
+      --sprout-muted: #9b9b9b;
+      --sprout-line: #2f2f2f;
+      --sprout-border: #787877;
+      --sprout-border-strong: #919190;
+      --sprout-input: #474747;
+      --sprout-primary: #529cca;
+      --sprout-primary-hover: #67a8d0;
+      --sprout-primary-active: #78b2d6;
+      --sprout-on-primary: #111111;
+      --sprout-focus: #529cca;
+      --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: #323231;
+      --sprout-overlay: rgb(8 8 8 / 0.65);
+    }
+  }
+}

package/dist/styles/themes/perplexity.css

@@ -0,0 +1,125 @@
+/* Perplexity: Off-white paper and deep teal.
+ *
+ * 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="perplexity" on <html>, or on any element to theme only
+ * that subtree.
+ */
+@layer base {
+  [data-sprout-theme="perplexity"] {
+    --sprout-font: ui-sans-serif, system-ui, sans-serif;
+    --sprout-radius-control: 0.5rem;
+    --sprout-radius-panel: 0.75rem;
+  }
+
+  [data-sprout-theme="perplexity"],
+  .light[data-sprout-theme="perplexity"],
+  .light [data-sprout-theme="perplexity"] {
+    --sprout-canvas: #fcfcf9;
+    --sprout-surface: #ffffff;
+    --sprout-hover: #f1f3f3;
+    --sprout-active: #e7ebeb;
+    --sprout-text: #13343b;
+    --sprout-muted: #5d6b6e;
+    --sprout-line: #e5e3d8;
+    --sprout-border: #899a9d;
+    --sprout-border-strong: #6d8185;
+    --sprout-input: #d9dfe0;
+    --sprout-primary: #1f7a86;
+    --sprout-primary-hover: #1b6b76;
+    --sprout-primary-active: #185f69;
+    --sprout-on-primary: #ffffff;
+    --sprout-focus: #1f7a86;
+    --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: #eef1f1;
+    --sprout-overlay: rgb(18 18 18 / 0.35);
+  }
+
+  .dark[data-sprout-theme="perplexity"],
+  .dark [data-sprout-theme="perplexity"] {
+    --sprout-canvas: #191a1a;
+    --sprout-surface: #202222;
+    --sprout-hover: #303232;
+    --sprout-active: #3a3c3b;
+    --sprout-text: #e8e8e6;
+    --sprout-muted: #a4a7a5;
+    --sprout-line: #333535;
+    --sprout-border: #7a7b7a;
+    --sprout-border-strong: #949594;
+    --sprout-input: #484a49;
+    --sprout-primary: #20b8cd;
+    --sprout-primary-hover: #3bc1d3;
+    --sprout-primary-active: #51c8d8;
+    --sprout-on-primary: #111111;
+    --sprout-focus: #20b8cd;
+    --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: #323434;
+    --sprout-overlay: rgb(8 8 8 / 0.65);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root:not(.light):not(.dark)[data-sprout-theme="perplexity"],
+    :root:not(.light):not(.dark) [data-sprout-theme="perplexity"] {
+      --sprout-canvas: #191a1a;
+      --sprout-surface: #202222;
+      --sprout-hover: #303232;
+      --sprout-active: #3a3c3b;
+      --sprout-text: #e8e8e6;
+      --sprout-muted: #a4a7a5;
+      --sprout-line: #333535;
+      --sprout-border: #7a7b7a;
+      --sprout-border-strong: #949594;
+      --sprout-input: #484a49;
+      --sprout-primary: #20b8cd;
+      --sprout-primary-hover: #3bc1d3;
+      --sprout-primary-active: #51c8d8;
+      --sprout-on-primary: #111111;
+      --sprout-focus: #20b8cd;
+      --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: #323434;
+      --sprout-overlay: rgb(8 8 8 / 0.65);
+    }
+  }
+}

package/dist/styles/themes/raycast.css

@@ -0,0 +1,125 @@
+/* Raycast: Deep black and coral red.
+ *
+ * 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="raycast" on <html>, or on any element to theme only
+ * that subtree.
+ */
+@layer base {
+  [data-sprout-theme="raycast"] {
+    --sprout-font: ui-sans-serif, system-ui, sans-serif;
+    --sprout-radius-control: 0.5rem;
+    --sprout-radius-panel: 0.75rem;
+  }
+
+  [data-sprout-theme="raycast"],
+  .light[data-sprout-theme="raycast"],
+  .light [data-sprout-theme="raycast"] {
+    --sprout-canvas: #f7f7f7;
+    --sprout-surface: #ffffff;
+    --sprout-hover: #f1f1f1;
+    --sprout-active: #e7e7e7;
+    --sprout-text: #111111;
+    --sprout-muted: #5e5e5e;
+    --sprout-line: #e5e5e5;
+    --sprout-border: #888888;
+    --sprout-border-strong: #6b6b6b;
+    --sprout-input: #d9d9d9;
+    --sprout-primary: #d93a3a;
+    --sprout-primary-hover: #bf3333;
+    --sprout-primary-active: #a92d2d;
+    --sprout-on-primary: #ffffff;
+    --sprout-focus: #d93a3a;
+    --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="raycast"],
+  .dark [data-sprout-theme="raycast"] {
+    --sprout-canvas: #0c0c0c;
+    --sprout-surface: #161616;
+    --sprout-hover: #282828;
+    --sprout-active: #333333;
+    --sprout-text: #f2f2f2;
+    --sprout-muted: #a0a0a0;
+    --sprout-line: #2a2a2a;
+    --sprout-border: #797979;
+    --sprout-border-strong: #969696;
+    --sprout-input: #424242;
+    --sprout-primary: #ff6363;
+    --sprout-primary-hover: #ff7676;
+    --sprout-primary-active: #ff8585;
+    --sprout-on-primary: #111111;
+    --sprout-focus: #ff6363;
+    --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: #2a2a2a;
+    --sprout-overlay: rgb(8 8 8 / 0.65);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root:not(.light):not(.dark)[data-sprout-theme="raycast"],
+    :root:not(.light):not(.dark) [data-sprout-theme="raycast"] {
+      --sprout-canvas: #0c0c0c;
+      --sprout-surface: #161616;
+      --sprout-hover: #282828;
+      --sprout-active: #333333;
+      --sprout-text: #f2f2f2;
+      --sprout-muted: #a0a0a0;
+      --sprout-line: #2a2a2a;
+      --sprout-border: #797979;
+      --sprout-border-strong: #969696;
+      --sprout-input: #424242;
+      --sprout-primary: #ff6363;
+      --sprout-primary-hover: #ff7676;
+      --sprout-primary-active: #ff8585;
+      --sprout-on-primary: #111111;
+      --sprout-focus: #ff6363;
+      --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: #2a2a2a;
+      --sprout-overlay: rgb(8 8 8 / 0.65);
+    }
+  }
+}

package/dist/styles/themes/spotify.css

@@ -0,0 +1,125 @@
+/* Spotify: Near-black and bright 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="spotify" on <html>, or on any element to theme only
+ * that subtree.
+ */
+@layer base {
+  [data-sprout-theme="spotify"] {
+    --sprout-font: ui-sans-serif, system-ui, sans-serif;
+    --sprout-radius-control: 0.5rem;
+    --sprout-radius-panel: 0.75rem;
+  }
+
+  [data-sprout-theme="spotify"],
+  .light[data-sprout-theme="spotify"],
+  .light [data-sprout-theme="spotify"] {
+    --sprout-canvas: #f6f6f6;
+    --sprout-surface: #ffffff;
+    --sprout-hover: #f1f1f1;
+    --sprout-active: #e7e7e7;
+    --sprout-text: #121212;
+    --sprout-muted: #5c5c5c;
+    --sprout-line: #e2e2e2;
+    --sprout-border: #898989;
+    --sprout-border-strong: #6c6c6c;
+    --sprout-input: #d9d9d9;
+    --sprout-primary: #1db954;
+    --sprout-primary-hover: #1aa34a;
+    --sprout-primary-active: #179042;
+    --sprout-on-primary: #111111;
+    --sprout-focus: #1db954;
+    --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="spotify"],
+  .dark [data-sprout-theme="spotify"] {
+    --sprout-canvas: #121212;
+    --sprout-surface: #181818;
+    --sprout-hover: #2a2a2a;
+    --sprout-active: #363636;
+    --sprout-text: #ffffff;
+    --sprout-muted: #b3b3b3;
+    --sprout-line: #2a2a2a;
+    --sprout-border: #808080;
+    --sprout-border-strong: #9e9e9e;
+    --sprout-input: #464646;
+    --sprout-primary: #1ed760;
+    --sprout-primary-hover: #39dc73;
+    --sprout-primary-active: #50e083;
+    --sprout-on-primary: #111111;
+    --sprout-focus: #1ed760;
+    --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: #2d2d2d;
+    --sprout-overlay: rgb(8 8 8 / 0.65);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root:not(.light):not(.dark)[data-sprout-theme="spotify"],
+    :root:not(.light):not(.dark) [data-sprout-theme="spotify"] {
+      --sprout-canvas: #121212;
+      --sprout-surface: #181818;
+      --sprout-hover: #2a2a2a;
+      --sprout-active: #363636;
+      --sprout-text: #ffffff;
+      --sprout-muted: #b3b3b3;
+      --sprout-line: #2a2a2a;
+      --sprout-border: #808080;
+      --sprout-border-strong: #9e9e9e;
+      --sprout-input: #464646;
+      --sprout-primary: #1ed760;
+      --sprout-primary-hover: #39dc73;
+      --sprout-primary-active: #50e083;
+      --sprout-on-primary: #111111;
+      --sprout-focus: #1ed760;
+      --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: #2d2d2d;
+      --sprout-overlay: rgb(8 8 8 / 0.65);
+    }
+  }
+}

package/dist/styles/themes/stripe.css

@@ -0,0 +1,125 @@
+/* Stripe: Navy ink and blurple.
+ *
+ * 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="stripe" on <html>, or on any element to theme only
+ * that subtree.
+ */
+@layer base {
+  [data-sprout-theme="stripe"] {
+    --sprout-font: ui-sans-serif, system-ui, sans-serif;
+    --sprout-radius-control: 0.375rem;
+    --sprout-radius-panel: 0.5rem;
+  }
+
+  [data-sprout-theme="stripe"],
+  .light[data-sprout-theme="stripe"],
+  .light [data-sprout-theme="stripe"] {
+    --sprout-canvas: #f6f9fc;
+    --sprout-surface: #ffffff;
+    --sprout-hover: #f0f2f4;
+    --sprout-active: #e7e9ec;
+    --sprout-text: #0a2540;
+    --sprout-muted: #425466;
+    --sprout-line: #e3e8ee;
+    --sprout-border: #8592a0;
+    --sprout-border-strong: #677889;
+    --sprout-input: #d8dce0;
+    --sprout-primary: #635bff;
+    --sprout-primary-hover: #5750e0;
+    --sprout-primary-active: #4d47c7;
+    --sprout-on-primary: #ffffff;
+    --sprout-focus: #635bff;
+    --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: #eef0f2;
+    --sprout-overlay: rgb(18 18 18 / 0.35);
+  }
+
+  .dark[data-sprout-theme="stripe"],
+  .dark [data-sprout-theme="stripe"] {
+    --sprout-canvas: #0a1929;
+    --sprout-surface: #112640;
+    --sprout-hover: #23374f;
+    --sprout-active: #2f4158;
+    --sprout-text: #f6f9fc;
+    --sprout-muted: #a3b3c6;
+    --sprout-line: #22395a;
+    --sprout-border: #788595;
+    --sprout-border-strong: #96a0ad;
+    --sprout-input: #3f5066;
+    --sprout-primary: #8f89ff;
+    --sprout-primary-hover: #9c97ff;
+    --sprout-primary-active: #a8a3ff;
+    --sprout-on-primary: #0a1929;
+    --sprout-focus: #8f89ff;
+    --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: #263951;
+    --sprout-overlay: rgb(8 8 8 / 0.65);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root:not(.light):not(.dark)[data-sprout-theme="stripe"],
+    :root:not(.light):not(.dark) [data-sprout-theme="stripe"] {
+      --sprout-canvas: #0a1929;
+      --sprout-surface: #112640;
+      --sprout-hover: #23374f;
+      --sprout-active: #2f4158;
+      --sprout-text: #f6f9fc;
+      --sprout-muted: #a3b3c6;
+      --sprout-line: #22395a;
+      --sprout-border: #788595;
+      --sprout-border-strong: #96a0ad;
+      --sprout-input: #3f5066;
+      --sprout-primary: #8f89ff;
+      --sprout-primary-hover: #9c97ff;
+      --sprout-primary-active: #a8a3ff;
+      --sprout-on-primary: #0a1929;
+      --sprout-focus: #8f89ff;
+      --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: #263951;
+      --sprout-overlay: rgb(8 8 8 / 0.65);
+    }
+  }
+}