@glasshome/ui 1.5.0 → 2.0.0

package/src/styles/theme.css

@@ -31,6 +31,10 @@
 	--font-mono: var(--font-mono);
 	--font-serif: var(--font-serif);
 
+	/* Below --radius-sm: a box small enough that the theme's smallest token would
+	   round it into a circle (checkbox, OTP slot). Clamped, so a tiny --radius
+	   theme never grows it. */
+	--radius-xs: min(5px, var(--radius-sm));
 	--radius-sm: calc(var(--radius) - 4px);
 	--radius-md: calc(var(--radius) - 2px);
 	--radius-lg: var(--radius);
@@ -54,8 +58,15 @@
 	 * exposes no data-side, only --kb-select-content-transform-origin (set to the
 	 * trigger edge per placement), so a scaleY from that origin grows the panel
 	 * down when it opens below and up when above, no direction class needed. */
-	--animate-select-in: select-in 0.18s cubic-bezier(0.16, 1, 0.3, 1) both;
-	--animate-select-out: select-out 0.12s ease-in both;
+	--animate-select-in: select-in var(--duration-expand) var(--ease-expand) both;
+	--animate-select-out: select-out var(--duration-micro) var(--ease-contract) both;
+
+	/* Trigger morph: the panel is anchored over the trigger's top edge and starts
+	 * clipped to the trigger's own box and radius (--morph-w/h/radius, written by
+	 * the content from its trigger), then unrolls into its own box. The pill
+	 * becomes the panel; nothing scales, so no row or radius distorts. */
+	--animate-morph-in: morph-in var(--duration-morph) var(--ease-morph) both;
+	--animate-morph-out: morph-out calc(var(--duration-morph) / 2) var(--ease-contract) both;
 }
 
 @keyframes collapsible-down {
@@ -100,6 +111,40 @@
 		pointer-events: auto;
 	}
 }
+@keyframes morph-in {
+	from {
+		opacity: 0;
+		clip-path: inset(
+			0 calc(100% - var(--morph-w, 100%)) calc(100% - var(--morph-h, 2.5rem)) 0 round
+				var(--morph-radius, 9999px)
+		);
+		pointer-events: none;
+	}
+	35% {
+		opacity: 1;
+	}
+	90% {
+		pointer-events: none;
+	}
+	to {
+		opacity: 1;
+		clip-path: inset(0 0 0 0 round var(--radius-md));
+		pointer-events: auto;
+	}
+}
+@keyframes morph-out {
+	from {
+		opacity: 1;
+		clip-path: inset(0 0 0 0 round var(--radius-md));
+	}
+	to {
+		opacity: 0;
+		clip-path: inset(
+			0 calc(100% - var(--morph-w, 100%)) calc(100% - var(--morph-h, 2.5rem)) 0 round
+				var(--morph-radius, 9999px)
+		);
+	}
+}
 @keyframes select-out {
 	from {
 		opacity: 1;
@@ -181,6 +226,13 @@
 	 * border change, state a tone or chip swap, expand an open/close. Theme
 	 * independent, so declared once; zeroed under prefers-reduced-motion. */
 	--ease-emphasis: cubic-bezier(0.22, 1, 0.36, 1);
+	/* Arrivals overshoot-free and quick to settle; departures fall away. */
+	--ease-expand: cubic-bezier(0.16, 1, 0.3, 1);
+	--ease-contract: cubic-bezier(0.4, 0, 1, 1);
+	/* A morph is a shape becoming another shape: slower than an arrival, and it
+	 * leaves the start shape gently instead of snapping out of it. */
+	--duration-morph: 400ms;
+	--ease-morph: cubic-bezier(0.32, 0.72, 0, 1);
 	--duration-micro: 120ms;
 	--duration-state: 160ms;
 	--duration-expand: 200ms;
@@ -191,7 +243,7 @@
 	--foreground: oklch(0.9551 0 0);
 	--card: oklch(0.17 0.01 250);
 	--card-foreground: oklch(0.9551 0 0);
-	--popover: oklch(0.19 0.008 250);
+	--popover: oklch(0.11 0.005 250);
 	--popover-foreground: oklch(0.9551 0 0);
 	--primary: oklch(0.48 0.2 215.221);
 	--primary-foreground: oklch(1 0 0);
@@ -453,6 +505,12 @@
 		--duration-micro: 0ms;
 		--duration-state: 0ms;
 		--duration-expand: 0ms;
+		--duration-morph: 0ms;
+	}
+	/* tw-animate enter/exit classes carry their own fallback duration. */
+	.animate-in,
+	.animate-out {
+		--tw-animation-duration: 1ms;
 	}
 }
 
@@ -496,15 +554,18 @@
 		transform: translate3d(0, 100%, 0);
 	}
 }
+/* --bs-duration and --bs-ease are published inline by BottomSheetContent from
+   bottom-sheet/constants.ts; --modal-max-h comes from MODAL_MAX_H, the height
+   cap every modal panel shares. */
 .bs-content {
 	transform: translate3d(0, 100%, 0);
 	bottom: var(--bs-keyboard-offset, 0);
 }
 .bs-content[data-keyboard-open] {
-	max-height: calc(85dvh - var(--bs-keyboard-offset, 0px));
+	max-height: calc(var(--modal-max-h) - var(--bs-keyboard-offset, 0px));
 }
 .bs-content[data-state="opening"] {
-	animation: bs-slide-up 500ms cubic-bezier(0.32, 0.72, 0, 1) forwards;
+	animation: bs-slide-up var(--bs-duration) var(--bs-ease) forwards;
 }
 .bs-content[data-state="open"],
 .bs-content[data-state="pressing"],
@@ -513,7 +574,7 @@
 	transform: translate3d(0, 0, 0);
 }
 .bs-content[data-state="closing"] {
-	animation: bs-slide-down 500ms cubic-bezier(0.32, 0.72, 0, 1) forwards;
+	animation: bs-slide-down var(--bs-duration) var(--bs-ease) forwards;
 }
 .bs-content[data-reduced-motion] {
 	animation-duration: 0ms !important;