fix(skin): extract transition properties into CSS custom properties (#1075)

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

packages/skins/src/default/tailwind/audio.tailwind.ts

@@ -14,6 +14,13 @@ import { surface as baseSurface } from './components/surface';
 export const root = cn(
   baseRoot,
   '[--media-text-color:var(--media-color-primary,oklch(0_0_0))]',
+  '[--media-error-dialog-transition-duration:250ms]',
+  '[--media-error-dialog-transition-delay:100ms]',
+  '[--media-popup-transition-duration:100ms]',
+  '[--media-popup-transition-timing-function:ease-out]',
+  'motion-reduce:[--media-error-dialog-transition-duration:50ms]',
+  'motion-reduce:[--media-error-dialog-transition-delay:0ms]',
+  'motion-reduce:[--media-popup-transition-duration:0ms]',
   'dark:[--media-text-color:var(--media-color-primary,oklch(1_0_0))]'
 );
 
@@ -79,10 +86,12 @@ export const error = {
     'absolute inset-0 z-20 flex items-center gap-3 rounded-full px-5 pr-0.5',
     'bg-(--media-surface-background-color) text-(--media-text-color)',
     'backdrop-blur-lg backdrop-saturate-150',
-    'transition-[opacity,filter] duration-300 delay-100 ease-out',
+    'transition-[opacity,filter] ease-out',
+    'duration-(--media-error-dialog-transition-duration)',
+    'delay-(--media-error-dialog-transition-delay)',
     'group-data-starting-style/error:opacity-0 group-data-starting-style/error:blur-[4px]',
     'group-data-ending-style/error:opacity-0 group-data-ending-style/error:blur-[4px]',
-    'motion-reduce:duration-100 motion-reduce:delay-0'
+    'group-data-ending-style/error:delay-0'
   ),
   content: 'flex flex-1 items-center gap-2',
 };

packages/skins/src/default/tailwind/components/error.ts

@@ -5,12 +5,13 @@ export const error = {
   dialog: cn(
     'flex flex-col gap-3 max-w-72 p-3 rounded-[1.75rem] text-white',
     // Animation
-    'transition-[opacity,scale,transform] duration-500 delay-100',
-    'ease-[linear(0,0.034_1.5%,0.763_9.7%,1.066_13.9%,1.198_19.9%,1.184_21.8%,0.963_37.5%,0.997_50.9%,1)]',
+    'transition-[opacity,scale,transform]',
+    'duration-(--media-error-dialog-transition-duration)',
+    'delay-(--media-error-dialog-transition-delay)',
+    'ease-(--media-error-dialog-transition-timing-function)',
     'group-data-starting-style/error:opacity-0 group-data-starting-style/error:scale-50',
     'group-data-ending-style/error:opacity-0 group-data-ending-style/error:scale-50',
-    // Simple, fast transition for reduced motion users
-    'motion-reduce:duration-100 motion-reduce:ease-out motion-reduce:delay-0'
+    'group-data-ending-style/error:delay-0'
   ),
   content: 'flex flex-col gap-2 px-2 pt-2 pb-1.5',
   title: 'font-semibold leading-tight',

packages/skins/src/default/tailwind/components/overlay.ts

@@ -8,19 +8,16 @@ export const overlay = cn(
   'opacity-0',
   'bg-linear-to-t from-black/50 via-black/30 to-transparent',
   'backdrop-blur-none backdrop-saturate-150',
-  // Transitions (fine pointer only)
-  '[@media(pointer:fine)]:transition-[opacity,backdrop-filter]',
-  '[@media(pointer:fine)]:ease-out',
-  '[@media(pointer:fine)]:duration-300 [@media(pointer:fine)]:delay-500',
+  // Transitions
+  'transition-[opacity,backdrop-filter]',
+  'duration-(--media-controls-transition-duration)',
+  'delay-(--media-controls-transition-delay)',
+  'ease-out',
   // Shown when controls visible
   'peer-data-visible/controls:opacity-100',
-  '[@media(pointer:fine)]:peer-data-visible/controls:duration-150',
-  '[@media(pointer:fine)]:peer-data-visible/controls:delay-0',
   // Shown when error visible (+ blur)
   'peer-data-open/error:opacity-100',
-  '[@media(pointer:fine)]:peer-data-open/error:duration-150',
-  '[@media(pointer:fine)]:peer-data-open/error:delay-0',
-  'peer-data-open/error:backdrop-blur-lg',
-  // Reduced motion
-  '[@media(pointer:fine)]:motion-reduce:duration-100'
+  'peer-data-open/error:duration-(--media-error-dialog-transition-duration)',
+  'peer-data-open/error:delay-(--media-error-dialog-transition-delay)',
+  'peer-data-open/error:backdrop-blur-lg'
 );

packages/skins/src/default/tailwind/components/popup.ts

@@ -4,7 +4,9 @@ const base = cn(
   // Reset default popover styles
   'm-0 border-0 text-inherit overflow-visible',
   // Animation
-  'transition-[transform,scale,opacity,filter] duration-150',
+  'transition-[transform,scale,opacity,filter]',
+  'duration-(--media-popup-transition-duration)',
+  'ease-(--media-popup-transition-timing-function)',
   'data-starting-style:opacity-0 data-starting-style:scale-50 data-starting-style:blur-sm',
   'data-ending-style:opacity-0 data-ending-style:scale-50 data-ending-style:blur-sm',
   'data-instant:duration-0',

packages/skins/src/default/tailwind/video.tailwind.ts

@@ -26,13 +26,24 @@ export const root = (isShadowDOM: boolean) =>
       '[&_video]:block [&_video]:w-full [&_video]:h-full [&_video]:rounded-[inherit] [&_video]:[object-fit:var(--media-object-fit,contain)] [&_video]:[object-position:var(--media-object-position,center)]':
         !isShadowDOM,
     },
+    '[--media-spring-transition:linear(0,0.034_1.5%,0.763_9.7%,1.066_13.9%,1.198_19.9%,1.184_21.8%,0.963_37.5%,0.997_50.9%,1)]',
     '[--media-video-border-radius:var(--media-border-radius,2rem)]',
     '[--media-controls-transition-duration:100ms]',
     '[--media-controls-transition-delay:0ms]',
+    '[--media-controls-transition-timing-function:ease-out]',
+    '[--media-error-dialog-transition-duration:350ms]',
+    '[--media-error-dialog-transition-delay:100ms]',
+    '[--media-error-dialog-transition-timing-function:var(--media-spring-transition)]',
+    '[--media-popup-transition-duration:100ms]',
+    '[--media-popup-transition-timing-function:ease-out]',
+    'motion-reduce:[--media-error-dialog-transition-duration:50ms]',
+    'motion-reduce:[--media-error-dialog-transition-delay:0ms]',
+    'motion-reduce:[--media-error-dialog-transition-timing-function:ease-out]',
+    'motion-reduce:[--media-popup-transition-duration:0ms]',
     '[@media(pointer:fine)]:has-[[data-controls]:not([data-visible])]:[--media-controls-transition-delay:500ms]',
     '[@media(pointer:fine)]:has-[[data-controls]:not([data-visible])]:[--media-controls-transition-duration:300ms]',
     '[@media(pointer:coarse)]:has-[[data-controls]:not([data-visible])]:[--media-controls-transition-duration:150ms]',
-    'motion-reduce:has-[[data-controls]:not([data-visible])]:[--media-controls-transition-duration:100ms]',
+    'motion-reduce:has-[[data-controls]:not([data-visible])]:[--media-controls-transition-duration:50ms]',
     // Caption track CSS variables (consumed by the native caption bridge in light DOM)
     '[--media-caption-track-y:-0.5rem]',
     '[--media-caption-track-delay:calc(var(--media-controls-transition-delay)_+_25ms)]',
@@ -88,7 +99,7 @@ export const controls = cn(
   'absolute bottom-3 inset-x-3',
   '[color:var(--media-color-primary,oklch(1_0_0))] z-10',
   'peer-data-open/error:hidden',
-  'ease-out origin-bottom',
+  'ease-(--media-controls-transition-timing-function) origin-bottom',
   'duration-(--media-controls-transition-duration)',
   'delay-(--media-controls-transition-delay)',
   '[@media(pointer:fine)]:will-change-[scale,filter,opacity]',