feat(skin): add --media-color-primary customization (#957)

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

@@ -3,9 +3,20 @@ import { bufferingIndicator as baseBufferingIndicator } from './components/buffe
 import { controls as baseControls } from './components/controls';
 import { error as baseError } from './components/error';
 import { popup as basePopup } from './components/popup';
+import { root as baseRoot } from './components/root';
 import { slider as baseSlider } from './components/slider';
 import { surface as baseSurface } from './components/surface';
 
+/* ==========================================================================
+   Root
+   ========================================================================== */
+
+export const root = cn(
+  baseRoot,
+  '[--media-controls-text-color:var(--media-color-primary,oklch(0_0_0))]',
+  'dark:[--media-controls-text-color:var(--media-color-primary,oklch(1_0_0))]'
+);
+
 /* ==========================================================================
    Surface (shared glass effect for tooltips, popovers, controls)
    ========================================================================== */
@@ -13,18 +24,22 @@ import { surface as baseSurface } from './components/surface';
 export const surface = cn(
   baseSurface,
   'bg-white/50 dark:bg-black/40',
-  'backdrop-brightness-98 backdrop-saturate-120 backdrop-blur',
+  'backdrop-blur-lg backdrop-saturate-150',
   // Border and shadow
-  'ring-white/5 shadow-black/15',
+  'ring-black/5 shadow-sm shadow-black/15',
   // Border to enhance contrast on lighter pages
-  'after:ring-black/5'
+  'after:ring-white/10',
+  // Reduced transparency for users with preference
+  '[@media(prefers-reduced-transparency:reduce)]:bg-white/70 dark:[@media(prefers-reduced-transparency:reduce)]:bg-black/70',
+  // High contrast mode
+  'contrast-more:bg-white/90 dark:contrast-more:bg-black/90'
 );
 
 /* ==========================================================================
    Controls
    ========================================================================== */
 
-export const controls = cn(baseControls, surface, 'dark:text-white');
+export const controls = cn(baseControls, surface, 'text-(--media-controls-text-color)');
 
 /* ==========================================================================
    Sliders
@@ -32,7 +47,7 @@ export const controls = cn(baseControls, surface, 'dark:text-white');
 
 export const slider = {
   ...baseSlider,
-  track: cn(baseSlider.track, 'bg-black/10', 'dark:bg-white/20 dark:shadow-[0_0_0_1px_oklch(0_0_0/0.05)]'),
+  track: cn(baseSlider.track, 'bg-black/10', 'dark:bg-white/20 dark:ring-1 dark:ring-black/5'),
 };
 
 /* ==========================================================================
@@ -72,6 +87,5 @@ export { tooltipState } from '../../shared/tailwind/tooltip-state';
 export { button } from './components/button';
 export { icon, iconContainer, iconFlipped, iconHidden } from './components/icon';
 export { playbackRate } from './components/playback-rate';
-export { root } from './components/root';
 export { seek } from './components/seek';
 export { time } from './components/time';

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

@@ -8,10 +8,10 @@ export const controls = cn(
   'p-[0.175rem] flex items-center gap-[0.075rem]',
   'rounded-full',
   // Shadow color variables (derived from currentColor lightness)
-  '[--media-controls-current-shadow-color:oklch(from_currentColor_0_0_0/clamp(0,calc((l-0.5)*0.5),0.25))]',
+  '[--media-controls-current-shadow-color:oklch(from_currentColor_0_0_0/clamp(0,calc((l-0.5)*0.5),0.15))]',
   '[--media-controls-current-shadow-color-subtle:oklch(from_var(--media-controls-current-shadow-color)_l_c_h/calc(alpha*0.4))]',
   // Text shadow
-  'text-shadow-[0_0_1px_var(--media-controls-current-shadow-color)]',
+  'text-shadow-[0_1px_0_var(--media-controls-current-shadow-color)]',
   // Wider container
   '@2xl/media-root:p-1 @2xl/media-root:gap-0.5'
 );

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

@@ -87,7 +87,7 @@ export const controls = cn(
   surface,
   // Position
   'absolute bottom-3 inset-x-3',
-  'text-white z-10',
+  '[color:var(--media-color-primary,oklch(1_0_0))] z-10',
   // Transitions (fine pointer only — instant toggle on touch to avoid dead-zone taps)
   'will-change-[scale,transform,filter,opacity]',
   '[@media(pointer:fine)]:transition-[scale,transform,filter,opacity]',