@podoba/tailwind 0.0.32 → 0.0.35

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@podoba/tailwind",
-	"version": "0.0.32",
+	"version": "0.0.35",
 	"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

@@ -135,10 +135,15 @@
 	 * (--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-create-hub-full: var(--control-height-create-hub-full);
+	--spacing-create-hub-partial: var(--control-height-create-hub-partial);
+	--spacing-mobile-cta: var(--control-height-mobile-cta);
+	--spacing-mobile-cta-bottom: calc(var(--space-sm) + env(safe-area-inset-bottom, 0px));
 	--spacing-control-tall: var(--control-height-tall);
 
 	/* effects */
 	--blur-modal-backdrop: var(--effect-modal-backdrop-blur);
+	--shadow-mobile-cta: var(--shadow-mobile-cta);
 	--shadow-modal-surface: var(--shadow-modal-surface);
 
 	/* font families */
@@ -188,6 +193,14 @@
 	--tracking-wider: var(--tracking-wider);
 
 	/* animations */
+	--animate-create-hub-backdrop: create-hub-backdrop var(--motion-create-hub-backdrop-duration)
+		var(--motion-create-hub-enter-easing) both;
+	--animate-create-hub-desktop: create-hub-desktop var(--motion-create-hub-desktop-duration)
+		var(--motion-create-hub-enter-easing) both;
+	--animate-create-hub-full: create-hub-full var(--motion-create-hub-full-duration)
+		var(--motion-create-hub-enter-easing) both;
+	--animate-create-hub-sheet: create-hub-sheet var(--motion-create-hub-sheet-duration)
+		var(--motion-create-hub-enter-easing) both;
 	--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)
@@ -198,6 +211,10 @@
 		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-side-panel-in: side-panel-in var(--motion-modal-enter-duration)
+		var(--motion-modal-enter-easing) both;
+	--animate-side-panel-out: side-panel-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)
@@ -237,6 +254,46 @@
 		both;
 }
 
+@keyframes create-hub-backdrop {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
+
+@keyframes create-hub-desktop {
+	from {
+		opacity: 0;
+		transform: scale(0.15, 0.1);
+	}
+	to {
+		opacity: 1;
+		transform: scale(1);
+	}
+}
+
+@keyframes create-hub-sheet {
+	from {
+		opacity: 0;
+		transform: translateY(100%);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+@keyframes create-hub-full {
+	from {
+		max-height: var(--control-height-create-hub-partial);
+	}
+	to {
+		max-height: var(--control-height-create-hub-full);
+	}
+}
+
 @keyframes expand-cta {
 	from {
 		opacity: 0;
@@ -310,6 +367,28 @@
 	}
 }
 
+@keyframes side-panel-in {
+	from {
+		opacity: 0;
+		transform: translateX(100%);
+	}
+	to {
+		opacity: 1;
+		transform: translateX(0);
+	}
+}
+
+@keyframes side-panel-out {
+	from {
+		opacity: 1;
+		transform: translateX(0);
+	}
+	to {
+		opacity: 0;
+		transform: translateX(100%);
+	}
+}
+
 @keyframes modal-content-in {
 	from {
 		opacity: 0;