@classic-homes/theme-tailwind-preset 0.1.53 → 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
       },
     },
 
@@ -335,37 +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 2s linear infinite',
-        trace: 'trace 2s linear 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.53",
+  "version": "0.1.54",
   "description": "Tailwind CSS preset for the Classic theme system",
   "main": "index.js",
   "sideEffects": false,