@podoba/tailwind 0.0.29 → 0.0.32

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@podoba/tailwind",
-	"version": "0.0.29",
+	"version": "0.0.32",
 	"type": "module",
 	"description": "podoba Tailwind v4 theme — binds @podoba/tokens CSS custom properties to Tailwind's @theme. Import after `@import \"tailwindcss\"`.",
 	"repository": {

package/src/theme.css

@@ -32,6 +32,48 @@
  * rare one-off that must diverge from the token flip (`dark:border-0`, etc.). */
 @custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
 
+/* Split-modal content group: apply the source GS Manager's entrance stagger to
+ * whatever children are actually rendered. This keeps optional workflow sections
+ * correctly sequenced without consumers hardcoding semantic child numbers. */
+@utility modal-content-stagger {
+	& > * {
+		animation: modal-content-in var(--motion-modal-content-enter-duration)
+			var(--motion-modal-enter-easing)
+			calc(var(--motion-modal-content-enter-delay) + var(--motion-modal-content-enter-stagger))
+			both;
+	}
+
+	& > :nth-child(2) {
+		animation-delay: calc(
+			var(--motion-modal-content-enter-delay) + var(--motion-modal-content-enter-stagger) +
+				var(--motion-modal-content-enter-stagger)
+		);
+	}
+
+	& > :nth-child(3) {
+		animation-delay: calc(
+			var(--motion-modal-content-enter-delay) + var(--motion-modal-content-enter-stagger) +
+				var(--motion-modal-content-enter-stagger) + var(--motion-modal-content-enter-stagger)
+		);
+	}
+
+	& > :nth-child(4) {
+		animation-delay: calc(
+			var(--motion-modal-content-enter-delay) + var(--motion-modal-content-enter-stagger) +
+				var(--motion-modal-content-enter-stagger) + var(--motion-modal-content-enter-stagger) +
+				var(--motion-modal-content-enter-stagger)
+		);
+	}
+
+	& > :nth-child(n + 5) {
+		animation-delay: calc(
+			var(--motion-modal-content-enter-delay) + var(--motion-modal-content-enter-stagger) +
+				var(--motion-modal-content-enter-stagger) + var(--motion-modal-content-enter-stagger) +
+				var(--motion-modal-content-enter-stagger) + var(--motion-modal-content-enter-stagger)
+		);
+	}
+}
+
 @theme inline {
 	/* colors */
 	--color-brand: var(--color-brand-primary);
@@ -48,6 +90,7 @@
 	--color-fg: var(--color-fg);
 	--color-fg-muted: var(--color-fg-muted);
 	--color-fg-subtle: var(--color-fg-subtle);
+	--color-fg-workflow-muted: var(--color-fg-workflow-muted);
 	--color-fg-inverted: var(--color-fg-inverted);
 	--color-fg-on-brand: var(--color-fg-on-brand);
 
@@ -73,6 +116,7 @@
 	--color-success-fg: var(--color-success-fg);
 
 	--color-ring: var(--color-ring);
+	--color-modal-backdrop: var(--color-modal-backdrop);
 
 	/* border radius */
 	--radius-sm: var(--radius-sm);
@@ -91,6 +135,11 @@
 	 * (--space-md 1rem = p-4, sm = p-2, lg = p-6, xl = p-8, xs = p-1), so use
 	 * the numeric utilities for spacing and leave xs…xl to sizing. */
 	--spacing-nav-x: var(--space-nav-x);
+	--spacing-control-tall: var(--control-height-tall);
+
+	/* effects */
+	--blur-modal-backdrop: var(--effect-modal-backdrop-blur);
+	--shadow-modal-surface: var(--shadow-modal-surface);
 
 	/* font families */
 	--font-sans: var(--font-sans);
@@ -101,13 +150,24 @@
 	--text-caption: var(--font-size-caption);
 	--text-label: var(--font-size-label);
 	--text-compact: var(--font-size-compact);
+	--text-compact--line-height: var(--line-height-compact);
 	--text-small: var(--font-size-small);
+	--text-small--line-height: var(--line-height-small);
 	--text-callout: var(--font-size-callout);
 	--text-body: var(--font-size-body);
+	--text-body--line-height: var(--line-height-body);
 	--text-subtitle: var(--font-size-subtitle);
 	--text-title: var(--font-size-title);
 	--text-headline: var(--font-size-headline);
 	--text-display: var(--font-size-display);
+	--text-display--line-height: var(--line-height-display);
+	/* GS source `label-1`: 30px / 32px / -2px at 30px. Used by page,
+	 * workflow and split-dialog hero headings. */
+	--text-display-large: var(--font-size-display-large);
+	--text-display-large--line-height: var(--line-height-display-large);
+	--text-display-large--letter-spacing: var(--tracking-display-large);
+	--text-panel-heading: var(--font-size-panel-heading);
+	--text-panel-heading--line-height: var(--line-height-panel-heading);
 
 	/* font sizes — heading ramp (size + paired line-height) */
 	--text-heading1: var(--font-size-heading1);
@@ -130,6 +190,51 @@
 	/* animations */
 	--animate-expand-cta: expand-cta 220ms cubic-bezier(0.16, 1, 0.3, 1);
 	--animate-lightbox-in: lightbox-in 0.3s ease-out;
+	--animate-modal-overlay-in: modal-overlay-in var(--motion-modal-enter-duration)
+		var(--motion-modal-enter-easing) both;
+	--animate-modal-overlay-out: modal-overlay-out var(--motion-modal-exit-duration)
+		var(--motion-modal-exit-easing) both;
+	--animate-modal-surface-in: modal-surface-in var(--motion-modal-enter-duration)
+		var(--motion-modal-enter-easing) both;
+	--animate-modal-surface-out: modal-surface-out var(--motion-modal-exit-duration)
+		var(--motion-modal-exit-easing) both;
+	--animate-modal-panel-in: modal-panel-in var(--motion-modal-panel-enter-duration)
+		var(--motion-modal-enter-easing) var(--motion-modal-panel-enter-delay) both;
+	--animate-modal-content-in: modal-content-in var(--motion-modal-content-enter-duration)
+		var(--motion-modal-enter-easing) var(--motion-modal-content-enter-delay) both;
+	--animate-modal-content-in-1: modal-content-in var(--motion-modal-content-enter-duration)
+		var(--motion-modal-enter-easing)
+		calc(var(--motion-modal-content-enter-delay) + var(--motion-modal-content-enter-stagger)) both;
+	--animate-modal-content-in-2: modal-content-in var(--motion-modal-content-enter-duration)
+		var(--motion-modal-enter-easing)
+		calc(
+			var(--motion-modal-content-enter-delay) + var(--motion-modal-content-enter-stagger) +
+				var(--motion-modal-content-enter-stagger)
+		)
+		both;
+	--animate-modal-content-in-3: modal-content-in var(--motion-modal-content-enter-duration)
+		var(--motion-modal-enter-easing)
+		calc(
+			var(--motion-modal-content-enter-delay) + var(--motion-modal-content-enter-stagger) +
+				var(--motion-modal-content-enter-stagger) + var(--motion-modal-content-enter-stagger)
+		)
+		both;
+	--animate-modal-content-in-4: modal-content-in var(--motion-modal-content-enter-duration)
+		var(--motion-modal-enter-easing)
+		calc(
+			var(--motion-modal-content-enter-delay) + var(--motion-modal-content-enter-stagger) +
+				var(--motion-modal-content-enter-stagger) + var(--motion-modal-content-enter-stagger) +
+				var(--motion-modal-content-enter-stagger)
+		)
+		both;
+	--animate-modal-content-in-5: modal-content-in var(--motion-modal-content-enter-duration)
+		var(--motion-modal-enter-easing)
+		calc(
+			var(--motion-modal-content-enter-delay) + var(--motion-modal-content-enter-stagger) +
+				var(--motion-modal-content-enter-stagger) + var(--motion-modal-content-enter-stagger) +
+				var(--motion-modal-content-enter-stagger) + var(--motion-modal-content-enter-stagger)
+		)
+		both;
 }
 
 @keyframes expand-cta {
@@ -153,3 +258,65 @@
 		transform: translateX(0);
 	}
 }
+
+@keyframes modal-overlay-in {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
+
+@keyframes modal-overlay-out {
+	from {
+		opacity: 1;
+	}
+	to {
+		opacity: 0;
+	}
+}
+
+@keyframes modal-surface-in {
+	from {
+		opacity: 0;
+		transform: translateY(2%) scale(var(--motion-modal-origin-scale-max));
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0) scale(1);
+	}
+}
+
+@keyframes modal-surface-out {
+	from {
+		opacity: 1;
+		transform: translateY(0) scale(1);
+	}
+	to {
+		opacity: 0;
+		transform: translateY(2%) scale(var(--motion-modal-origin-scale-max));
+	}
+}
+
+@keyframes modal-panel-in {
+	from {
+		opacity: 0;
+		transform: translateX(-4rem) scaleX(var(--motion-modal-origin-scale-max));
+	}
+	to {
+		opacity: 1;
+		transform: translateX(0) scaleX(1);
+	}
+}
+
+@keyframes modal-content-in {
+	from {
+		opacity: 0;
+		transform: translateX(-1.5rem);
+	}
+	to {
+		opacity: 1;
+		transform: translateX(0);
+	}
+}