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

packages/skins/src/default/css/audio.css

@@ -23,21 +23,21 @@
   --media-surface-outer-border-color: oklch(0 0 0 / 0.05);
   --media-surface-shadow-color: oklch(0 0 0 / 0.15);
   --media-surface-backdrop-filter: blur(16px) saturate(1.5);
+  --media-controls-text-color: var(--media-color-primary, oklch(0 0 0));
 
   @media (prefers-color-scheme: dark) {
     --media-border-color: oklch(1 0 0 / 0.1);
     --media-surface-background-color: oklch(0 0 0 / 0.4);
+    --media-controls-text-color: var(--media-color-primary, oklch(1 0 0));
   }
 }
 
 /* ==========================================================================
-   Controls
-   ========================================================================== */
+  Controls
+  ========================================================================== */
 
 .media-default-skin--audio .media-controls {
-  @media (prefers-color-scheme: dark) {
-    color: oklch(1 0 0);
-  }
+  color: var(--media-controls-text-color);
 }
 
 /* ==========================================================================

packages/skins/src/default/css/components/controls.css

@@ -9,12 +9,12 @@
   gap: 0.075rem;
   padding: 0.175rem;
   border-radius: calc(infinity * 1px);
-  --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: 0 0 1px var(--media-controls-current-shadow-color);
+  text-shadow: 0 1px 0 var(--media-controls-current-shadow-color);
 
   @container media-root (width > 40rem) {
     gap: 0.125rem;

packages/skins/src/default/css/video.css

@@ -59,8 +59,7 @@
   bottom: 0.75rem;
   inset-inline: 0.75rem;
   z-index: 10;
-  color: oklch(1 0 0);
-
+  color: var(--media-color-primary, oklch(1 0 0));
   will-change: scale, transform, filter, opacity;
   transition-timing-function: ease-out;
   transform-origin: bottom;

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]',

packages/skins/src/minimal/css/audio.css

@@ -12,20 +12,25 @@
 @import "./components/popup.css";
 
 /* ==========================================================================
-  Controls
+  Root
   ========================================================================== */
 
 .media-minimal-skin--audio {
   --media-controls-background-color: oklch(1 0 0);
   --media-controls-border-color: oklch(0 0 0 / 0.1);
-  --media-controls-text-color: oklch(0 0 0);
+  --media-controls-text-color: var(--media-color-primary, oklch(0 0 0));
 
   @media (prefers-color-scheme: dark) {
     --media-controls-background-color: oklch(0 0 0);
     --media-controls-border-color: oklch(1 0 0 / 0.1);
-    --media-controls-text-color: oklch(1 0 0);
+    --media-controls-text-color: var(--media-color-primary, oklch(1 0 0));
   }
 }
+
+/* ==========================================================================
+  Controls
+  ========================================================================== */
+
 .media-minimal-skin--audio .media-controls {
   gap: 0.5rem;
   padding: 0.375rem;

packages/skins/src/minimal/css/components/controls.css

@@ -6,10 +6,10 @@
   container: media-controls / inline-size;
   display: flex;
   align-items: center;
-  --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: 0 0 1px var(--media-controls-current-shadow-color);
+  text-shadow: 0 1px 0 var(--media-controls-current-shadow-color);
 }

packages/skins/src/minimal/css/video.css

@@ -56,7 +56,7 @@
   z-index: 10;
   gap: 0.5rem;
   padding: 2rem 0.375rem 0.375rem 0.375rem;
-  color: oklch(1 0 0);
+  color: var(--media-color-primary, oklch(1 0 0));
 
   @media (pointer: fine) {
     will-change: transform, filter, opacity;

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

@@ -11,10 +11,10 @@ export const root = cn(
   baseRoot,
   '[--media-controls-background-color:oklch(1_0_0)]',
   '[--media-controls-border-color:oklch(0_0_0/0.1)]',
-  '[--media-controls-text-color:oklch(0_0_0)]',
+  '[--media-controls-text-color:var(--media-color-primary,oklch(0_0_0))]',
   'dark:[--media-controls-background-color:oklch(0_0_0)]',
   'dark:[--media-controls-border-color:oklch(1_0_0/0.1)]',
-  'dark:[--media-controls-text-color:oklch(1_0_0)]'
+  'dark:[--media-controls-text-color:var(--media-color-primary,oklch(1_0_0))]'
 );
 
 /* ==========================================================================

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

@@ -7,8 +7,8 @@ export const controls = cn(
   '@container/media-controls',
   'flex items-center',
   // 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)]'
 );

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

@@ -67,7 +67,7 @@ export const controls = cn(
   // Position
   'absolute bottom-0 inset-x-0',
   'pt-8 px-1.5 pb-1.5 gap-2',
-  '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-[translate,filter,opacity]',
   '[@media(pointer:fine)]:transition-[translate,filter,opacity]',