@classic-homes/theme-tailwind-preset 0.1.52 → 0.1.54

package/index.js

@@ -41,7 +41,7 @@ module.exports = {
         md: '768px',
         lg: '1024px',
         xl: '1280px',
-        '2xl': '1400px', // Slightly narrower for better readability
+        '2xl': '1400px', // Intentionally narrower than the 2xl breakpoint (1536px) for better readability
       },
     },
 
@@ -266,6 +266,20 @@ module.exports = {
           '0%, 100%': { opacity: '1' },
           '50%': { opacity: '0.7' },
         },
+        // Progress bar indeterminate
+        'progress-indeterminate': {
+          '0%': { transform: 'translateX(-100%)' },
+          '100%': { transform: 'translateX(400%)' },
+        },
+        // Skeleton shimmer
+        shimmer: {
+          '0%': { backgroundPosition: '-200% 0' },
+          '100%': { backgroundPosition: '200% 0' },
+        },
+        // Logo trace animation
+        trace: {
+          to: { 'stroke-dashoffset': '-14' },
+        },
 
         // DataPanel slide animations (from edges)
         'panel-slide-in-left': {
@@ -321,34 +335,38 @@ module.exports = {
       },
 
       animation: {
-        'accordion-down': 'accordion-down 0.2s ease-out',
-        'accordion-up': 'accordion-up 0.2s ease-out',
-        'collapsible-down': 'collapsible-down 0.2s ease-out',
-        'collapsible-up': 'collapsible-up 0.2s ease-out',
-        'fade-in': 'fade-in 0.2s ease-out',
-        'fade-out': 'fade-out 0.2s ease-out',
-        'slide-up': 'slide-up 0.2s ease-out',
-        'slide-down': 'slide-down 0.2s ease-out',
-        'slide-left': 'slide-left 0.2s ease-out',
-        'slide-right': 'slide-right 0.2s ease-out',
-        'scale-in': 'scale-in 0.2s ease-out',
-        'scale-out': 'scale-out 0.2s ease-out',
-        'spin-slow': 'spin-slow 2s linear infinite',
-        'pulse-subtle': 'pulse-subtle 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+        // Use token durations for single source of truth
+        'accordion-down': `accordion-down ${tokens.animation.duration.base} ease-out`,
+        'accordion-up': `accordion-up ${tokens.animation.duration.base} ease-out`,
+        'collapsible-down': `collapsible-down ${tokens.animation.duration.base} ease-out`,
+        'collapsible-up': `collapsible-up ${tokens.animation.duration.base} ease-out`,
+        'fade-in': `fade-in ${tokens.animation.duration.base} ease-out`,
+        'fade-out': `fade-out ${tokens.animation.duration.base} ease-out`,
+        'slide-up': `slide-up ${tokens.animation.duration.base} ease-out`,
+        'slide-down': `slide-down ${tokens.animation.duration.base} ease-out`,
+        'slide-left': `slide-left ${tokens.animation.duration.base} ease-out`,
+        'slide-right': `slide-right ${tokens.animation.duration.base} ease-out`,
+        'scale-in': `scale-in ${tokens.animation.duration.base} ease-out`,
+        'scale-out': `scale-out ${tokens.animation.duration.base} ease-out`,
+        'spin-slow': `spin-slow ${tokens.transition.duration.slower} linear infinite`,
+        'pulse-subtle': `pulse-subtle ${tokens.transition.duration.slower} cubic-bezier(0.4, 0, 0.6, 1) infinite`,
+        'progress-indeterminate': 'progress-indeterminate 1.5s ease-in-out infinite',
+        shimmer: `shimmer ${tokens.transition.duration.slower} linear infinite`,
+        trace: `trace ${tokens.transition.duration.slower} linear infinite`,
 
         // DataPanel animations
-        'panel-slide-in-left': 'panel-slide-in-left 0.2s ease-out',
-        'panel-slide-out-left': 'panel-slide-out-left 0.2s ease-out',
-        'panel-slide-in-right': 'panel-slide-in-right 0.2s ease-out',
-        'panel-slide-out-right': 'panel-slide-out-right 0.2s ease-out',
-        'panel-slide-in-top': 'panel-slide-in-top 0.2s ease-out',
-        'panel-slide-out-top': 'panel-slide-out-top 0.2s ease-out',
-        'panel-slide-in-bottom': 'panel-slide-in-bottom 0.2s ease-out',
-        'panel-slide-out-bottom': 'panel-slide-out-bottom 0.2s ease-out',
-        'panel-detach': 'panel-detach 0.2s ease-out',
-        'panel-attach': 'panel-attach 0.2s ease-out',
-        'panel-collapse': 'panel-collapse 0.2s ease-out',
-        'panel-expand': 'panel-expand 0.2s ease-out',
+        'panel-slide-in-left': `panel-slide-in-left ${tokens.animation.duration.base} ease-out`,
+        'panel-slide-out-left': `panel-slide-out-left ${tokens.animation.duration.base} ease-out`,
+        'panel-slide-in-right': `panel-slide-in-right ${tokens.animation.duration.base} ease-out`,
+        'panel-slide-out-right': `panel-slide-out-right ${tokens.animation.duration.base} ease-out`,
+        'panel-slide-in-top': `panel-slide-in-top ${tokens.animation.duration.base} ease-out`,
+        'panel-slide-out-top': `panel-slide-out-top ${tokens.animation.duration.base} ease-out`,
+        'panel-slide-in-bottom': `panel-slide-in-bottom ${tokens.animation.duration.base} ease-out`,
+        'panel-slide-out-bottom': `panel-slide-out-bottom ${tokens.animation.duration.base} ease-out`,
+        'panel-detach': `panel-detach ${tokens.animation.duration.base} ease-out`,
+        'panel-attach': `panel-attach ${tokens.animation.duration.base} ease-out`,
+        'panel-collapse': `panel-collapse ${tokens.animation.duration.base} ease-out`,
+        'panel-expand': `panel-expand ${tokens.animation.duration.base} ease-out`,
       },
     },
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@classic-homes/theme-tailwind-preset",
-  "version": "0.1.52",
+  "version": "0.1.54",
   "description": "Tailwind CSS preset for the Classic theme system",
   "main": "index.js",
   "sideEffects": false,