@tulipfarm/sprout 0.0.0-stage → 0.1.0

package/dist/styles/themes/supabase.css

@@ -0,0 +1,125 @@
+/* Supabase: Dark slate and emerald.
+ *
+ * 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="supabase" on <html>, or on any element to theme only
+ * that subtree.
+ */
+@layer base {
+  [data-sprout-theme="supabase"] {
+    --sprout-font: ui-sans-serif, system-ui, sans-serif;
+    --sprout-radius-control: 0.375rem;
+    --sprout-radius-panel: 0.5rem;
+  }
+
+  [data-sprout-theme="supabase"],
+  .light[data-sprout-theme="supabase"],
+  .light [data-sprout-theme="supabase"] {
+    --sprout-canvas: #fcfcfc;
+    --sprout-surface: #ffffff;
+    --sprout-hover: #f1f1f1;
+    --sprout-active: #e8e8e8;
+    --sprout-text: #171717;
+    --sprout-muted: #636363;
+    --sprout-line: #e6e6e6;
+    --sprout-border: #8b8b8b;
+    --sprout-border-strong: #6f6f6f;
+    --sprout-input: #dadada;
+    --sprout-primary: #147a4c;
+    --sprout-primary-hover: #126b43;
+    --sprout-primary-active: #105f3b;
+    --sprout-on-primary: #ffffff;
+    --sprout-focus: #147a4c;
+    --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="supabase"],
+  .dark [data-sprout-theme="supabase"] {
+    --sprout-canvas: #121212;
+    --sprout-surface: #171717;
+    --sprout-hover: #282828;
+    --sprout-active: #333333;
+    --sprout-text: #ededed;
+    --sprout-muted: #a0a0a0;
+    --sprout-line: #2e2e2e;
+    --sprout-border: #777777;
+    --sprout-border-strong: #939393;
+    --sprout-input: #424242;
+    --sprout-primary: #3ecf8e;
+    --sprout-primary-hover: #55d59c;
+    --sprout-primary-active: #68daa7;
+    --sprout-on-primary: #111111;
+    --sprout-focus: #3ecf8e;
+    --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="supabase"],
+    :root:not(.light):not(.dark) [data-sprout-theme="supabase"] {
+      --sprout-canvas: #121212;
+      --sprout-surface: #171717;
+      --sprout-hover: #282828;
+      --sprout-active: #333333;
+      --sprout-text: #ededed;
+      --sprout-muted: #a0a0a0;
+      --sprout-line: #2e2e2e;
+      --sprout-border: #777777;
+      --sprout-border-strong: #939393;
+      --sprout-input: #424242;
+      --sprout-primary: #3ecf8e;
+      --sprout-primary-hover: #55d59c;
+      --sprout-primary-active: #68daa7;
+      --sprout-on-primary: #111111;
+      --sprout-focus: #3ecf8e;
+      --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/tulipfarm.css

@@ -0,0 +1,125 @@
+/* TulipFarm: Neutral grays with TulipFarm 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="tulipfarm" on <html>, or on any element to theme only
+ * that subtree.
+ */
+@layer base {
+  [data-sprout-theme="tulipfarm"] {
+    --sprout-font: ui-sans-serif, system-ui, sans-serif;
+    --sprout-radius-control: 0.375rem;
+    --sprout-radius-panel: 0.75rem;
+  }
+
+  [data-sprout-theme="tulipfarm"],
+  .light[data-sprout-theme="tulipfarm"],
+  .light [data-sprout-theme="tulipfarm"] {
+    --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: #286440;
+    --sprout-primary-hover: #1e5032;
+    --sprout-primary-active: #164027;
+    --sprout-on-primary: #f5fbf6;
+    --sprout-focus: #327c4e;
+    --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="tulipfarm"],
+  .dark [data-sprout-theme="tulipfarm"] {
+    --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: #a2d8af;
+    --sprout-primary-hover: #b8e3c1;
+    --sprout-primary-active: #c9ecd0;
+    --sprout-on-primary: #142e1c;
+    --sprout-focus: #a2d8af;
+    --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="tulipfarm"],
+    :root:not(.light):not(.dark) [data-sprout-theme="tulipfarm"] {
+      --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: #a2d8af;
+      --sprout-primary-hover: #b8e3c1;
+      --sprout-primary-active: #c9ecd0;
+      --sprout-on-primary: #142e1c;
+      --sprout-focus: #a2d8af;
+      --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);
+    }
+  }
+}

package/dist/styles/themes/vercel.css

@@ -0,0 +1,126 @@
+/* Vercel: Geist, high contrast, tight 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="vercel" on <html>, or on any element to theme only
+ * that subtree.
+ */
+@layer base {
+  [data-sprout-theme="vercel"] {
+    --sprout-font:
+      "Geist Variable", Geist, ui-sans-serif, system-ui, sans-serif;
+    --sprout-radius-control: 0.375rem;
+    --sprout-radius-panel: 0.75rem;
+  }
+
+  [data-sprout-theme="vercel"],
+  .light[data-sprout-theme="vercel"],
+  .light [data-sprout-theme="vercel"] {
+    --sprout-canvas: #fafafa;
+    --sprout-surface: #ffffff;
+    --sprout-hover: #f1f1f1;
+    --sprout-active: #e8e8e8;
+    --sprout-text: #171717;
+    --sprout-muted: #666666;
+    --sprout-line: #ebebeb;
+    --sprout-border: #8b8b8b;
+    --sprout-border-strong: #6f6f6f;
+    --sprout-input: #dadada;
+    --sprout-primary: #171717;
+    --sprout-primary-hover: #141414;
+    --sprout-primary-active: #121212;
+    --sprout-on-primary: #ffffff;
+    --sprout-focus: #171717;
+    --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="vercel"],
+  .dark [data-sprout-theme="vercel"] {
+    --sprout-canvas: #000000;
+    --sprout-surface: #0a0a0a;
+    --sprout-hover: #1c1c1c;
+    --sprout-active: #282828;
+    --sprout-text: #ededed;
+    --sprout-muted: #a1a1a1;
+    --sprout-line: #2e2e2e;
+    --sprout-border: #707070;
+    --sprout-border-strong: #8e8e8e;
+    --sprout-input: #373737;
+    --sprout-primary: #ededed;
+    --sprout-primary-hover: #efefef;
+    --sprout-primary-active: #f1f1f1;
+    --sprout-on-primary: #111111;
+    --sprout-focus: #ededed;
+    --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: #1e1e1e;
+    --sprout-overlay: rgb(8 8 8 / 0.65);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root:not(.light):not(.dark)[data-sprout-theme="vercel"],
+    :root:not(.light):not(.dark) [data-sprout-theme="vercel"] {
+      --sprout-canvas: #000000;
+      --sprout-surface: #0a0a0a;
+      --sprout-hover: #1c1c1c;
+      --sprout-active: #282828;
+      --sprout-text: #ededed;
+      --sprout-muted: #a1a1a1;
+      --sprout-line: #2e2e2e;
+      --sprout-border: #707070;
+      --sprout-border-strong: #8e8e8e;
+      --sprout-input: #373737;
+      --sprout-primary: #ededed;
+      --sprout-primary-hover: #efefef;
+      --sprout-primary-active: #f1f1f1;
+      --sprout-on-primary: #111111;
+      --sprout-focus: #ededed;
+      --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: #1e1e1e;
+      --sprout-overlay: rgb(8 8 8 / 0.65);
+    }
+  }
+}

package/dist/styles/toast.css

@@ -0,0 +1,197 @@
+@layer components {
+  .sprout-toast-viewport {
+    position: fixed;
+    inset-inline: 16px;
+    bottom: 16px;
+    z-index: 50;
+    width: auto;
+    max-width: 24rem;
+    margin-inline: auto;
+    outline: none;
+    pointer-events: none;
+  }
+  @media (min-width: 640px) {
+    .sprout-toast-viewport {
+      inset-inline: auto 16px;
+      width: 100%;
+      margin-inline: 0;
+    }
+  }
+
+  .sprout-toast {
+    --sprout-toast-gap: 0.625rem;
+    --sprout-toast-peek: 0.625rem;
+    --sprout-toast-height: var(--toast-frontmost-height, var(--toast-height));
+    --sprout-toast-scale: max(0, calc(1 - var(--toast-index) * 0.06));
+    --sprout-toast-shrink: calc(1 - var(--sprout-toast-scale));
+    --sprout-toast-offset-y: calc(
+      var(--toast-offset-y) * -1 - var(--toast-index) *
+        var(--sprout-toast-gap) + var(--toast-swipe-movement-y)
+    );
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    z-index: calc(1000 - var(--toast-index));
+    box-sizing: border-box;
+    width: 100%;
+    height: var(--sprout-toast-height);
+    border: 1px solid var(--sprout-line);
+    border-radius: var(--sprout-radius-panel);
+    background: var(--sprout-surface);
+    color: var(--sprout-text);
+    box-shadow: var(--sprout-shadow-overlay);
+    font-family: var(--sprout-font);
+    font-size: var(--sprout-text-sm);
+    line-height: 1.25rem;
+    outline: none;
+    pointer-events: auto;
+    transform-origin: bottom center;
+    transform: translateX(var(--toast-swipe-movement-x))
+      translateY(
+        calc(
+          var(--toast-swipe-movement-y) - var(--toast-index) *
+            var(--sprout-toast-peek) - var(--sprout-toast-shrink) *
+            var(--sprout-toast-height)
+        )
+      )
+      scale(var(--sprout-toast-scale));
+    user-select: none;
+    will-change: transform;
+  }
+  /* Bridges the gap between expanded toasts so hover doesn't collapse the stack. */
+  .sprout-toast::after {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 100%;
+    height: calc(var(--sprout-toast-gap) + 1px);
+    content: "";
+  }
+  .sprout-toast:focus-visible {
+    outline: 2px solid var(--sprout-focus);
+    outline-offset: 2px;
+  }
+  .sprout-toast[data-expanded] {
+    height: var(--toast-height);
+    transform: translateX(var(--toast-swipe-movement-x))
+      translateY(var(--sprout-toast-offset-y));
+  }
+  .sprout-toast[data-limited] {
+    opacity: 0;
+  }
+  .sprout-toast[data-ending-style][data-swipe-direction="down"] {
+    transform: translateY(calc(var(--toast-swipe-movement-y) + 150%));
+  }
+  .sprout-toast[data-ending-style][data-swipe-direction="up"] {
+    transform: translateY(calc(var(--toast-swipe-movement-y) - 150%));
+  }
+  .sprout-toast[data-ending-style][data-swipe-direction="left"] {
+    transform: translateX(calc(var(--toast-swipe-movement-x) - 150%))
+      translateY(var(--sprout-toast-offset-y));
+  }
+  .sprout-toast[data-ending-style][data-swipe-direction="right"] {
+    transform: translateX(calc(var(--toast-swipe-movement-x) + 150%))
+      translateY(var(--sprout-toast-offset-y));
+  }
+
+  .sprout-toast-content {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    box-sizing: border-box;
+    height: 100%;
+    padding: 12px 10px 12px 14px;
+    overflow: hidden;
+  }
+  .sprout-toast-content[data-behind]:not([data-expanded]) {
+    opacity: 0;
+  }
+
+  .sprout-toast-icon {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-self: flex-start;
+    margin-top: 2px;
+    color: var(--sprout-text);
+  }
+  .sprout-toast-icon > svg {
+    width: 16px;
+    height: 16px;
+    pointer-events: none;
+  }
+  .sprout-toast-icon[data-type="error"] {
+    color: var(--sprout-danger);
+  }
+
+  .sprout-toast-text {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+  .sprout-toast-title {
+    margin: 0;
+    font-size: var(--sprout-text-sm);
+    font-weight: 500;
+    line-height: 1.25rem;
+  }
+  .sprout-toast-description {
+    margin: 0;
+    color: var(--sprout-muted);
+    font-size: var(--sprout-text-sm);
+    line-height: 1.25rem;
+  }
+
+  .sprout-toast-action {
+    flex-shrink: 0;
+  }
+  .sprout-toast-close {
+    position: relative;
+    flex-shrink: 0;
+    align-self: flex-start;
+    color: var(--sprout-muted);
+  }
+  .sprout-toast-close::after {
+    position: absolute;
+    inset: -8px;
+    content: "";
+  }
+  .sprout-toast-close:hover {
+    color: var(--sprout-text);
+  }
+
+  @media (forced-colors: active) {
+    .sprout-toast {
+      border-color: CanvasText;
+    }
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .sprout-toast {
+      transition:
+        transform var(--sprout-motion-normal) var(--sprout-motion-ease),
+        opacity var(--sprout-motion-normal) var(--sprout-motion-ease),
+        height var(--sprout-motion-fast) var(--sprout-motion-ease);
+    }
+    .sprout-toast-content {
+      transition: opacity var(--sprout-motion-fast) var(--sprout-motion-ease);
+    }
+    .sprout-toast[data-starting-style],
+    .sprout-toast[data-ending-style]:not([data-limited]):not(
+        [data-swipe-direction]
+      ) {
+      transform: translateY(150%);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sprout-toast {
+      transition: opacity var(--sprout-motion-fast) linear;
+    }
+    .sprout-toast:is([data-starting-style], [data-ending-style]) {
+      opacity: 0;
+    }
+  }
+}