@spunto/design-system 0.2.1 → 0.4.0

package/styles.css

@@ -33,6 +33,13 @@
   --color-input: var(--input);
   --color-border: var(--border);
   --color-destructive: var(--destructive);
+  /* Status semantics — used by feedback surfaces (Toast…) */
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
   --color-accent-foreground: var(--accent-foreground);
   --color-accent: var(--accent);
   --color-muted-foreground: var(--muted-foreground);
@@ -77,6 +84,13 @@
   --accent: oklch(0.935 0.024 72);
   --accent-foreground: oklch(0.34 0.045 52);
   --destructive: oklch(0.577 0.245 27.325);
+  /* Status semantics — warm-leaning green / amber / blue, tuned for the cream bg */
+  --success: oklch(0.62 0.145 152);
+  --success-foreground: oklch(0.99 0.012 86);
+  --warning: oklch(0.74 0.16 68);
+  --warning-foreground: oklch(0.24 0.05 60);
+  --info: oklch(0.58 0.13 245);
+  --info-foreground: oklch(0.99 0.012 86);
   --border: oklch(0.89 0.016 76);
   --input: oklch(0.89 0.016 76);
   --ring: oklch(0.64 0.205 41);
@@ -122,6 +136,13 @@
   --accent: oklch(0.28 0.018 54);
   --accent-foreground: oklch(0.95 0.009 78);
   --destructive: oklch(0.704 0.191 22.216);
+  /* Status semantics — lifted for the warm charcoal bg */
+  --success: oklch(0.72 0.15 154);
+  --success-foreground: oklch(0.16 0.012 52);
+  --warning: oklch(0.80 0.155 72);
+  --warning-foreground: oklch(0.16 0.012 52);
+  --info: oklch(0.68 0.13 240);
+  --info-foreground: oklch(0.16 0.012 52);
   --border: oklch(0.92 0.03 70 / 11%);
   --input: oklch(0.92 0.03 70 / 14%);
   --ring: oklch(0.70 0.20 43);
@@ -184,3 +205,133 @@
     linear-gradient(to right, oklch(0.92 0.04 70 / 0.04) 1px, transparent 1px),
     linear-gradient(to bottom, oklch(0.92 0.04 70 / 0.04) 1px, transparent 1px);
 }
+
+/* ─── Toast — stacking + enter/exit motion (mounted by SpuntoProvider) ─────
+ *
+ * The look (colors, spacing, typography) lives on the components as Tailwind
+ * utilities; this block owns only the parts Tailwind can't express cleanly —
+ * the position-aware stacking math driven by the CSS vars Base UI sets on each
+ * toast (`--toast-index`, `--toast-offset-y`, `--toast-frontmost-height`,
+ * `--toast-swipe-movement-*`). `data-position` on the viewport flips the whole
+ * system between the top and bottom anchors. Adapted from the Base UI toast
+ * reference example. */
+[data-slot="toast-viewport"] {
+  --toast-gap: 0.75rem;
+  --toast-peek: 0.6rem;
+  position: fixed;
+  z-index: 60;
+  display: flex;
+  width: min(24rem, calc(100vw - 2rem));
+}
+[data-slot="toast-viewport"][data-position$="right"] { right: 1.25rem; left: auto; }
+[data-slot="toast-viewport"][data-position$="left"] { left: 1.25rem; right: auto; }
+[data-slot="toast-viewport"][data-position$="center"] {
+  left: 50%;
+  right: auto;
+  transform: translateX(-50%);
+}
+[data-slot="toast-viewport"][data-position^="top"] { top: 1.25rem; bottom: auto; }
+[data-slot="toast-viewport"][data-position^="bottom"] { bottom: 1.25rem; top: auto; }
+
+[data-slot="toast"] {
+  --scale: max(0, 1 - (var(--toast-index) * 0.1));
+  --shrink: calc(1 - var(--scale));
+  --height: var(--toast-frontmost-height, var(--toast-height));
+  position: absolute;
+  right: 0;
+  left: auto;
+  width: 100%;
+  box-sizing: border-box;
+  z-index: calc(1000 - var(--toast-index));
+  height: var(--height);
+  transition:
+    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
+    opacity 0.4s ease,
+    height 0.2s ease;
+}
+/* Invisible bridge so the pointer can travel across the gap between toasts
+   without the stack collapsing. */
+[data-slot="toast"]::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: calc(var(--toast-gap) + 1px);
+}
+[data-slot="toast"][data-limited],
+[data-slot="toast"][data-starting-style],
+[data-slot="toast"][data-ending-style] { opacity: 0; }
+
+/* Bottom-anchored (default) — newest at the bottom, older peek upward. */
+[data-position^="bottom"] [data-slot="toast"] {
+  bottom: 0;
+  transform-origin: bottom center;
+  --offset-y: calc(
+    var(--toast-offset-y) * -1 + (var(--toast-index) * var(--toast-gap) * -1) +
+      var(--toast-swipe-movement-y)
+  );
+  transform:
+    translateX(var(--toast-swipe-movement-x))
+    translateY(
+      calc(
+        var(--toast-swipe-movement-y) - (var(--toast-index) * var(--toast-peek)) -
+          (var(--shrink) * var(--height))
+      )
+    )
+    scale(var(--scale));
+}
+[data-position^="bottom"] [data-slot="toast"]::after { top: 100%; }
+[data-position^="bottom"] [data-slot="toast"][data-expanded] {
+  transform: translateX(var(--toast-swipe-movement-x)) translateY(var(--offset-y));
+  height: var(--toast-height);
+}
+[data-position^="bottom"] [data-slot="toast"][data-starting-style],
+[data-position^="bottom"] [data-slot="toast"][data-ending-style]:not([data-swipe-direction]) {
+  transform: translateY(150%);
+}
+
+/* Top-anchored — newest at the top, older peek downward. */
+[data-position^="top"] [data-slot="toast"] {
+  top: 0;
+  transform-origin: top center;
+  --offset-y: calc(
+    var(--toast-offset-y) + (var(--toast-index) * var(--toast-gap)) +
+      var(--toast-swipe-movement-y)
+  );
+  transform:
+    translateX(var(--toast-swipe-movement-x))
+    translateY(
+      calc(
+        var(--toast-swipe-movement-y) + (var(--toast-index) * var(--toast-peek)) +
+          (var(--shrink) * var(--height))
+      )
+    )
+    scale(var(--scale));
+}
+[data-position^="top"] [data-slot="toast"]::after { bottom: 100%; }
+[data-position^="top"] [data-slot="toast"][data-expanded] {
+  transform: translateX(var(--toast-swipe-movement-x)) translateY(var(--offset-y));
+  height: var(--toast-height);
+}
+[data-position^="top"] [data-slot="toast"][data-starting-style],
+[data-position^="top"] [data-slot="toast"][data-ending-style]:not([data-swipe-direction]) {
+  transform: translateY(-150%);
+}
+
+/* Swipe-to-dismiss exits — fly out toward the swiped edge (both anchors). */
+[data-slot="toast"][data-ending-style][data-swipe-direction="up"] {
+  transform: translateY(calc(var(--toast-swipe-movement-y) - 150%));
+}
+[data-slot="toast"][data-ending-style][data-swipe-direction="down"] {
+  transform: translateY(calc(var(--toast-swipe-movement-y) + 150%));
+}
+[data-slot="toast"][data-ending-style][data-swipe-direction="left"] {
+  transform: translateX(calc(var(--toast-swipe-movement-x) - 150%)) translateY(var(--offset-y));
+}
+[data-slot="toast"][data-ending-style][data-swipe-direction="right"] {
+  transform: translateX(calc(var(--toast-swipe-movement-x) + 150%)) translateY(var(--offset-y));
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="toast"] { transition-duration: 0.01ms; }
+}