@tulipfarm/sprout 0.0.0-stage → 0.1.0

package/dist/styles/glass-banner.css

@@ -0,0 +1,308 @@
+@layer base {
+  :root,
+  .light {
+    --sprout-glass-banner-ink: #1d2742;
+    --sprout-glass-banner-ink-soft: #4a5677;
+    --sprout-glass-banner-base-a: #b6d4f7;
+    --sprout-glass-banner-base-b: #e4f0fd;
+    --sprout-glass-banner-glow: #ffffff;
+    --sprout-glass-banner-ring: #ffffffcc;
+    --sprout-glass-banner-edge: #ffffffb3;
+    --sprout-glass-chip-top: #ffffffa6;
+    --sprout-glass-chip-bottom: #ffffff4d;
+    --sprout-glass-chip-edge: #ffffffd9;
+    --sprout-glass-chip-inner: #8fa8e026;
+    --sprout-glass-chip-shadow: #3d5aa840;
+    --sprout-glass-bubble: #ffffff40;
+  }
+
+  .dark {
+    --sprout-glass-banner-ink: #e3e8f5;
+    --sprout-glass-banner-ink-soft: #9aa6c4;
+    --sprout-glass-banner-base-a: #1a2236;
+    --sprout-glass-banner-base-b: #14171f;
+    --sprout-glass-banner-glow: #ffffff12;
+    --sprout-glass-banner-ring: #ffffff1a;
+    --sprout-glass-banner-edge: #ffffff14;
+    --sprout-glass-chip-top: #ffffff1a;
+    --sprout-glass-chip-bottom: #ffffff08;
+    --sprout-glass-chip-edge: #ffffff24;
+    --sprout-glass-chip-inner: #8fa8e010;
+    --sprout-glass-chip-shadow: #00000080;
+    --sprout-glass-bubble: #ffffff0a;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root:not(.light):not(.dark) {
+      --sprout-glass-banner-ink: #e3e8f5;
+      --sprout-glass-banner-ink-soft: #9aa6c4;
+      --sprout-glass-banner-base-a: #1a2236;
+      --sprout-glass-banner-base-b: #14171f;
+      --sprout-glass-banner-glow: #ffffff12;
+      --sprout-glass-banner-ring: #ffffff1a;
+      --sprout-glass-banner-edge: #ffffff14;
+      --sprout-glass-chip-top: #ffffff1a;
+      --sprout-glass-chip-bottom: #ffffff08;
+      --sprout-glass-chip-edge: #ffffff24;
+      --sprout-glass-chip-inner: #8fa8e010;
+      --sprout-glass-chip-shadow: #00000080;
+      --sprout-glass-bubble: #ffffff0a;
+    }
+  }
+}
+
+@layer components {
+  .sprout-glass-banner {
+    --sprout-glass-chip-icon-bg: #ffffffe6;
+    --sprout-glass-chip-icon-ink: #1d2742;
+
+    position: relative;
+    isolation: isolate;
+    container-type: inline-size;
+    display: grid;
+    align-content: start;
+    gap: 1.25rem;
+    box-sizing: border-box;
+    min-width: 0;
+    min-height: 15rem;
+    padding: 1.5rem;
+    overflow: hidden;
+    border-radius: 1.25rem;
+    font-family: var(--sprout-font);
+    color: var(--sprout-glass-banner-ink);
+    background:
+      radial-gradient(
+        ellipse 22% 85% at 64% 50%,
+        var(--sprout-glass-banner-glow),
+        transparent 70%
+      ),
+      radial-gradient(
+        circle at 64% 50%,
+        transparent 0 38%,
+        var(--sprout-glass-banner-ring) 38.2%,
+        transparent 38.8%
+      ),
+      radial-gradient(
+        circle at 64% 50%,
+        transparent 0 52%,
+        var(--sprout-glass-banner-ring) 52.2%,
+        transparent 52.8%
+      ),
+      linear-gradient(
+        115deg,
+        var(--sprout-glass-banner-base-a),
+        var(--sprout-glass-banner-base-b)
+      );
+    box-shadow: inset 0 0 0 1px var(--sprout-glass-banner-edge);
+  }
+
+  .sprout-glass-banner-art {
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    overflow: hidden;
+    border-radius: inherit;
+    pointer-events: none;
+  }
+  .sprout-glass-bubble {
+    position: absolute;
+    border: 1px solid var(--sprout-glass-banner-ring);
+    border-radius: 9999px;
+    background: radial-gradient(
+      circle at 30% 28%,
+      var(--sprout-glass-banner-glow),
+      var(--sprout-glass-bubble) 75%
+    );
+  }
+  .sprout-glass-bubble:nth-child(1) {
+    left: 6%;
+    top: 52%;
+    width: 4.5rem;
+    height: 4.5rem;
+  }
+  .sprout-glass-bubble:nth-child(2) {
+    left: 30%;
+    top: 46%;
+    width: 1.75rem;
+    height: 1.75rem;
+  }
+  .sprout-glass-bubble:nth-child(3) {
+    left: -3%;
+    bottom: -45%;
+    width: 9rem;
+    height: 9rem;
+  }
+  .sprout-glass-bubble:nth-child(4) {
+    left: 30%;
+    top: -30%;
+    width: 7rem;
+    height: 7rem;
+  }
+  .sprout-glass-bubble:nth-child(5) {
+    right: -4%;
+    bottom: -55%;
+    width: 12rem;
+    height: 12rem;
+  }
+
+  .sprout-glass-banner-copy {
+    display: grid;
+    gap: 0.25rem;
+    min-width: 0;
+  }
+  .sprout-glass-banner-title,
+  .sprout-glass-banner-caption {
+    margin: 0;
+    overflow-wrap: anywhere;
+  }
+  .sprout-glass-banner-title {
+    font-size: 1.125rem;
+    font-weight: 500;
+    line-height: 1.5rem;
+    letter-spacing: -0.01em;
+  }
+  .sprout-glass-banner-caption {
+    font-size: var(--sprout-text-sm);
+    line-height: 1.25rem;
+    color: var(--sprout-glass-banner-ink-soft);
+  }
+
+  .sprout-glass-banner-chips {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    gap: 0.75rem;
+    min-width: 0;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .sprout-glass-chip {
+    min-width: 0;
+    max-width: 100%;
+    cursor: grab;
+    touch-action: none;
+    user-select: none;
+    -webkit-user-select: none;
+    will-change: transform;
+  }
+  .sprout-glass-chip[data-dragging] {
+    position: relative;
+    z-index: 1;
+    cursor: grabbing;
+  }
+  .sprout-glass-chip-surface {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    box-sizing: border-box;
+    min-height: 2.375rem;
+    padding: 0.25rem 0.875rem 0.25rem 0.25rem;
+    border: 1px solid var(--sprout-glass-chip-edge);
+    border-radius: 9999px;
+    background: linear-gradient(
+      180deg,
+      var(--sprout-glass-chip-top),
+      var(--sprout-glass-chip-bottom)
+    );
+    box-shadow:
+      inset 0 1px 0 var(--sprout-glass-chip-edge),
+      inset 0 -2px 6px var(--sprout-glass-chip-inner),
+      0 10px 28px -10px var(--sprout-glass-chip-shadow);
+    backdrop-filter: blur(14px) saturate(170%);
+    -webkit-backdrop-filter: blur(14px) saturate(170%);
+    font-size: 0.8125rem;
+    line-height: 1.125rem;
+    transition: box-shadow var(--sprout-motion-normal) var(--sprout-motion-ease);
+    animation: sprout-glass-float 7s ease-in-out infinite;
+  }
+  /* Chips without an icon keep even padding on both ends. */
+  .sprout-glass-chip-surface:not(:has(> .sprout-glass-chip-icon)) {
+    padding-inline-start: 0.875rem;
+  }
+  .sprout-glass-chip[data-dragging] .sprout-glass-chip-surface {
+    box-shadow:
+      inset 0 1px 0 var(--sprout-glass-chip-edge),
+      inset 0 -2px 6px var(--sprout-glass-chip-inner),
+      0 16px 36px -12px var(--sprout-glass-chip-shadow);
+  }
+  .sprout-glass-chip:nth-child(3n + 2) .sprout-glass-chip-surface {
+    animation-delay: -2.4s;
+  }
+  .sprout-glass-chip:nth-child(3n + 3) .sprout-glass-chip-surface {
+    animation-delay: -4.8s;
+  }
+  .sprout-glass-chip-icon {
+    display: grid;
+    flex-shrink: 0;
+    place-items: center;
+    width: 1.75rem;
+    height: 1.75rem;
+    border-radius: 9999px;
+    background: var(--sprout-glass-chip-icon-bg);
+    color: var(--sprout-glass-chip-icon-ink);
+    box-shadow: 0 2px 6px -2px var(--sprout-glass-chip-shadow);
+  }
+  .sprout-glass-chip-icon > svg {
+    width: 1rem;
+    height: 1rem;
+  }
+  .sprout-glass-chip-label {
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+
+  /* Wide banners scatter up to three chips over the art. */
+  @container (min-width: 44rem) {
+    .sprout-glass-banner-chips:not(:has(> :nth-child(4))) {
+      position: absolute;
+      inset: 0;
+    }
+    .sprout-glass-banner-chips:not(:has(> :nth-child(4))) > .sprout-glass-chip {
+      position: absolute;
+    }
+    .sprout-glass-banner-chips:not(:has(> :nth-child(4)))
+      > .sprout-glass-chip:nth-child(1) {
+      right: 9%;
+      top: 15%;
+    }
+    .sprout-glass-banner-chips:not(:has(> :nth-child(4)))
+      > .sprout-glass-chip:nth-child(1)
+      .sprout-glass-chip-surface {
+      rotate: 3deg;
+    }
+    .sprout-glass-banner-chips:not(:has(> :nth-child(4)))
+      > .sprout-glass-chip:nth-child(2) {
+      left: 7%;
+      top: 58%;
+    }
+    .sprout-glass-banner-chips:not(:has(> :nth-child(4)))
+      > .sprout-glass-chip:nth-child(2)
+      .sprout-glass-chip-surface {
+      rotate: -4deg;
+    }
+    .sprout-glass-banner-chips:not(:has(> :nth-child(4)))
+      > .sprout-glass-chip:nth-child(3) {
+      left: 47%;
+      top: 72%;
+    }
+    .sprout-glass-banner-chips:not(:has(> :nth-child(4)))
+      > .sprout-glass-chip:nth-child(3)
+      .sprout-glass-chip-surface {
+      rotate: 1.5deg;
+    }
+  }
+
+  @keyframes sprout-glass-float {
+    50% {
+      transform: translateY(-4px);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sprout-glass-chip-surface {
+      animation: none;
+      transition: none;
+    }
+  }
+}

package/dist/styles/gradient-banner.css

@@ -0,0 +1,256 @@
+@layer components {
+  .sprout-gradient-banner {
+    --sprout-gradient-banner-pearl: #fffdf7;
+    --sprout-gradient-banner-ink: #25282d;
+    --sprout-gradient-banner-panel-ink: #25282d;
+    --sprout-gradient-banner-paper: #ffffff;
+    --sprout-gradient-banner-night: #191d20;
+    --sprout-gradient-banner-badge-light: #f1f2f4;
+    --sprout-gradient-banner-badge-dark: #30373b;
+    --sprout-gradient-banner-edge: #ffffff6b;
+    --sprout-gradient-banner-base: #91caf0;
+    --sprout-gradient-banner-shadow: #7777d6;
+    --sprout-gradient-banner-glow: #b4eff4;
+    --sprout-gradient-banner-bloom: #c8a7ef;
+    --sprout-gradient-banner-fold-angle: -24deg;
+    --sprout-gradient-banner-fold-opacity: 0.85;
+    --sprout-gradient-banner-light-angle: 22deg;
+    --sprout-gradient-banner-light-opacity: 0.55;
+
+    position: relative;
+    isolation: isolate;
+    display: grid;
+    align-items: center;
+    min-width: 0;
+    min-height: 15rem;
+    padding: 1.5rem;
+    overflow: hidden;
+    border-radius: 0.75rem;
+    font-family: var(--sprout-font);
+    color: var(--sprout-gradient-banner-ink);
+  }
+
+  .sprout-gradient-banner[data-variant="citrus"] {
+    --sprout-gradient-banner-base: #fbd65c;
+    --sprout-gradient-banner-shadow: #ec986f;
+    --sprout-gradient-banner-glow: #fff5b5;
+    --sprout-gradient-banner-bloom: #f6b9c8;
+    --sprout-gradient-banner-fold-angle: 28deg;
+  }
+  .sprout-gradient-banner[data-variant="lagoon"] {
+    --sprout-gradient-banner-base: #18bec4;
+    --sprout-gradient-banner-shadow: #007e83;
+    --sprout-gradient-banner-glow: #c8f2a3;
+    --sprout-gradient-banner-bloom: #43bf79;
+    --sprout-gradient-banner-fold-angle: -65deg;
+  }
+  .sprout-gradient-banner[data-variant="iris"] {
+    --sprout-gradient-banner-base: #bca3ef;
+    --sprout-gradient-banner-shadow: #7968d7;
+    --sprout-gradient-banner-glow: #dceffd;
+    --sprout-gradient-banner-bloom: #ecb6ec;
+  }
+  /* Deep blue art: text placed straight on it switches to pearl. */
+  .sprout-gradient-banner[data-variant="cobalt"] {
+    --sprout-gradient-banner-ink: var(--sprout-gradient-banner-pearl);
+    --sprout-gradient-banner-base: #2268b7;
+    --sprout-gradient-banner-shadow: #102c6b;
+    --sprout-gradient-banner-glow: #9dc8e8;
+    --sprout-gradient-banner-bloom: #377bbe;
+    --sprout-gradient-banner-fold-angle: 8deg;
+    --sprout-gradient-banner-fold-opacity: 0.3;
+    --sprout-gradient-banner-light-angle: -8deg;
+    --sprout-gradient-banner-light-opacity: 0.35;
+  }
+  .sprout-gradient-banner[data-variant="mint"] {
+    --sprout-gradient-banner-base: #e0ebce;
+    --sprout-gradient-banner-shadow: #9bcaba;
+    --sprout-gradient-banner-glow: #fcf7d5;
+    --sprout-gradient-banner-bloom: #c1e1cd;
+    --sprout-gradient-banner-fold-angle: 65deg;
+    --sprout-gradient-banner-fold-opacity: 0.35;
+  }
+
+  .sprout-gradient-banner[data-size="sm"] {
+    min-height: 6rem;
+    padding: 1rem;
+    border-radius: 0.5rem;
+  }
+  .sprout-gradient-banner[data-size="md"] {
+    min-height: 10rem;
+    padding: 1.25rem;
+  }
+  .sprout-gradient-banner[data-size="xl"] {
+    min-height: 22.5rem;
+    padding: 2rem;
+    border-radius: 1rem;
+  }
+
+  .sprout-gradient-banner-art {
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    overflow: hidden;
+    border-radius: inherit;
+    pointer-events: none;
+    background:
+      radial-gradient(
+        ellipse at 76% 0%,
+        var(--sprout-gradient-banner-glow),
+        transparent 46%
+      ),
+      radial-gradient(
+        ellipse at 5% 90%,
+        var(--sprout-gradient-banner-bloom),
+        transparent 56%
+      ),
+      radial-gradient(
+        ellipse at 100% 100%,
+        var(--sprout-gradient-banner-shadow),
+        transparent 58%
+      ),
+      var(--sprout-gradient-banner-base);
+    box-shadow: inset 0 0 0 1px var(--sprout-gradient-banner-edge);
+  }
+  .sprout-gradient-banner-fold {
+    position: absolute;
+    inset: -45% -20%;
+    border-radius: 50%;
+    transform: rotate(var(--sprout-gradient-banner-fold-angle));
+    background:
+      radial-gradient(
+        ellipse at 42% 28%,
+        transparent 31%,
+        var(--sprout-gradient-banner-pearl) 32%,
+        var(--sprout-gradient-banner-glow) 34%,
+        transparent 47%
+      ),
+      conic-gradient(
+        from 152deg at 48% 62%,
+        transparent 0deg,
+        var(--sprout-gradient-banner-bloom) 32deg,
+        var(--sprout-gradient-banner-pearl) 47deg,
+        var(--sprout-gradient-banner-base) 60deg,
+        transparent 88deg,
+        transparent 180deg,
+        var(--sprout-gradient-banner-shadow) 226deg,
+        var(--sprout-gradient-banner-glow) 255deg,
+        transparent 285deg
+      );
+    filter: blur(12px);
+    opacity: var(--sprout-gradient-banner-fold-opacity);
+  }
+  .sprout-gradient-banner-light {
+    position: absolute;
+    inset: -30% -10%;
+    transform: rotate(var(--sprout-gradient-banner-light-angle));
+    background:
+      radial-gradient(
+        ellipse at 72% 12%,
+        transparent 36%,
+        var(--sprout-gradient-banner-pearl) 37%,
+        transparent 44%
+      ),
+      linear-gradient(
+        100deg,
+        transparent 35%,
+        var(--sprout-gradient-banner-glow) 48%,
+        var(--sprout-gradient-banner-pearl) 51%,
+        transparent 63%
+      );
+    filter: blur(8px);
+    opacity: var(--sprout-gradient-banner-light-opacity);
+  }
+  .sprout-gradient-banner-texture {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0.3;
+    mix-blend-mode: soft-light;
+  }
+
+  .sprout-gradient-banner-content {
+    position: relative;
+    display: grid;
+    justify-items: center;
+    gap: 0.75rem;
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+
+  .sprout-gradient-banner-panel {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.75rem;
+    min-width: 0;
+    max-width: 100%;
+    padding: 0.75rem 1rem;
+    border-radius: var(--sprout-radius-control);
+    background: var(--sprout-gradient-banner-paper);
+    color: var(--sprout-gradient-banner-panel-ink);
+    font-size: var(--sprout-text-base);
+    line-height: 1.5;
+    overflow-wrap: anywhere;
+    box-shadow: 0 1px 2px rgb(24 24 24 / 0.05);
+  }
+  .sprout-gradient-banner-panel[data-tone="dark"] {
+    background: var(--sprout-gradient-banner-night);
+    color: var(--sprout-gradient-banner-paper);
+  }
+  .sprout-gradient-banner-panel > svg {
+    flex-shrink: 0;
+  }
+
+  .sprout-gradient-banner-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    max-width: 100%;
+    padding: 0.375rem 0.75rem;
+    border-radius: 9999px;
+    background: var(--sprout-gradient-banner-badge-light);
+    color: var(--sprout-gradient-banner-panel-ink);
+    font-size: var(--sprout-text-xs);
+    font-weight: 600;
+    line-height: 1rem;
+    overflow-wrap: anywhere;
+  }
+  .sprout-gradient-banner-badge > svg {
+    flex-shrink: 0;
+  }
+  [data-tone="dark"] .sprout-gradient-banner-badge {
+    background: var(--sprout-gradient-banner-badge-dark);
+    color: var(--sprout-gradient-banner-paper);
+  }
+
+  .sprout-gradient-banner-progress {
+    width: 100%;
+    height: 0.25rem;
+    overflow: hidden;
+    border-radius: 9999px;
+    background: var(--sprout-gradient-banner-badge-light);
+  }
+  [data-tone="dark"] .sprout-gradient-banner-progress {
+    background: var(--sprout-gradient-banner-badge-dark);
+  }
+  .sprout-gradient-banner-progress-fill {
+    height: 100%;
+    border-radius: inherit;
+    background: currentColor;
+    transform: scaleX(var(--sprout-gradient-banner-progress, 0));
+    transform-origin: left;
+    transition: transform var(--sprout-motion-normal, 180ms)
+      var(--sprout-motion-ease, ease-out);
+  }
+  [dir="rtl"] .sprout-gradient-banner-progress-fill {
+    transform-origin: right;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sprout-gradient-banner-progress-fill {
+      transition: none;
+    }
+  }
+}

package/dist/styles/hover-card.css

@@ -0,0 +1,95 @@
+@layer components {
+  :where(a.sprout-hover-card-trigger) {
+    border-radius: 2px;
+    color: inherit;
+    font-weight: 500;
+    text-decoration-line: underline;
+    text-decoration-color: var(--sprout-border);
+    text-decoration-thickness: 1px;
+    text-underline-offset: 4px;
+    outline: none;
+  }
+  :where(a.sprout-hover-card-trigger):hover,
+  :where(a.sprout-hover-card-trigger)[data-popup-open] {
+    text-decoration-color: currentColor;
+  }
+  :where(a.sprout-hover-card-trigger):focus-visible {
+    outline: 2px solid var(--sprout-focus);
+    outline-offset: 2px;
+  }
+
+  .sprout-hover-card-positioner {
+    z-index: 50;
+    isolation: isolate;
+    outline: none;
+  }
+  .sprout-hover-card-positioner[hidden] {
+    display: none;
+  }
+
+  .sprout-hover-card-content {
+    --sprout-hover-card-shift: 8px;
+    box-sizing: border-box;
+    width: 16rem;
+    max-width: var(--available-width);
+    padding: 10px;
+    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;
+    overflow-wrap: anywhere;
+    outline: none;
+    transform-origin: var(--transform-origin);
+  }
+  .sprout-hover-card-content :where(p) {
+    margin: 0;
+  }
+
+  @media (forced-colors: active) {
+    .sprout-hover-card-content {
+      border-color: CanvasText;
+    }
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .sprout-hover-card-content {
+      transition:
+        opacity var(--sprout-motion-fast) var(--sprout-motion-ease),
+        scale var(--sprout-motion-fast) var(--sprout-motion-ease),
+        translate var(--sprout-motion-fast) var(--sprout-motion-ease);
+    }
+    .sprout-hover-card-content[data-starting-style],
+    .sprout-hover-card-content[data-ending-style] {
+      opacity: 0;
+      scale: 0.95;
+    }
+    .sprout-hover-card-content[data-side="bottom"]:is(
+        [data-starting-style],
+        [data-ending-style]
+      ) {
+      translate: 0 calc(var(--sprout-hover-card-shift) * -1);
+    }
+    .sprout-hover-card-content[data-side="top"]:is(
+        [data-starting-style],
+        [data-ending-style]
+      ) {
+      translate: 0 var(--sprout-hover-card-shift);
+    }
+    .sprout-hover-card-content:is(
+        [data-side="right"],
+        [data-side="inline-end"]
+      ):is([data-starting-style], [data-ending-style]) {
+      translate: calc(var(--sprout-hover-card-shift) * -1) 0;
+    }
+    .sprout-hover-card-content:is(
+        [data-side="left"],
+        [data-side="inline-start"]
+      ):is([data-starting-style], [data-ending-style]) {
+      translate: var(--sprout-hover-card-shift) 0;
+    }
+  }
+}