@podoba/tailwind 0.0.37 → 0.0.39

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/src/theme.css +44 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@podoba/tailwind",
3
- "version": "0.0.37",
3
+ "version": "0.0.39",
4
4
  "type": "module",
5
5
  "description": "podoba Tailwind v4 theme — binds @podoba/tokens CSS custom properties to Tailwind's @theme. Import after `@import \"tailwindcss\"`.",
6
6
  "repository": {
package/src/theme.css CHANGED
@@ -205,6 +205,10 @@
205
205
  /* gs DropdownMenu `slideDownAndFade` / `slideUpAndFade`: 200ms both ways. */
206
206
  --animate-dropdown-in: dropdown-in 200ms cubic-bezier(0.16, 1, 0.3, 1);
207
207
  --animate-dropdown-out: dropdown-out 200ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
208
+ /* gs preview loading and reveal (PreviewSkeletonGradient, TemplatePreview). */
209
+ --animate-preview-skeleton-shimmer: preview-skeleton-shimmer 2400ms ease-in-out infinite;
210
+ --animate-preview-sweep: preview-sweep 1350ms cubic-bezier(0.22, 1, 0.36, 1) infinite;
211
+ --animate-preview-particle: preview-particle 1200ms ease-in-out infinite;
208
212
  --animate-lightbox-in: lightbox-in 0.3s ease-out;
209
213
  --animate-modal-overlay-in: modal-overlay-in var(--motion-modal-enter-duration)
210
214
  var(--motion-modal-enter-easing) both;
@@ -330,6 +334,46 @@
330
334
  }
331
335
  }
332
336
 
337
+ @keyframes preview-skeleton-shimmer {
338
+ from {
339
+ background-position: 100% 50%;
340
+ }
341
+ to {
342
+ background-position: 0% 50%;
343
+ }
344
+ }
345
+
346
+ @keyframes preview-sweep {
347
+ 0% {
348
+ transform: translateX(0) rotate(12deg);
349
+ opacity: 0;
350
+ }
351
+ 18%,
352
+ 78% {
353
+ opacity: 1;
354
+ }
355
+ 100% {
356
+ transform: translateX(420%) rotate(12deg);
357
+ opacity: 0;
358
+ }
359
+ }
360
+
361
+ @keyframes preview-particle {
362
+ 0%,
363
+ 100% {
364
+ transform: translate3d(var(--particle-dx, 0), var(--particle-dy, 0), 0) scale(0.35);
365
+ opacity: 0;
366
+ }
367
+ 44% {
368
+ transform: translate3d(0, 0, 0) scale(1);
369
+ opacity: 0.74;
370
+ }
371
+ 72% {
372
+ transform: translate3d(calc(var(--particle-dx, 0px) / -2), calc(var(--particle-dy, 0px) / -2), 0) scale(0.72);
373
+ opacity: 0.32;
374
+ }
375
+ }
376
+
333
377
  @keyframes lightbox-in {
334
378
  from {
335
379
  opacity: 0;