chore: rename skins, minor style tweaks (#61)

packages/react/react/src/skins/default/index.ts

@@ -1 +0,0 @@
-export { default as MediaSkinDefault } from './MediaSkinDefault';

packages/react/react/src/skins/frosted/FrostedSkin.tsx

@@ -27,7 +27,7 @@ type SkinProps = PropsWithChildren<{
   className?: string;
 }>;
 
-export default function MediaSkinDefault({ children, className = '' }: SkinProps): JSX.Element {
+export default function FrostedSkin({ children, className = '' }: SkinProps): JSX.Element {
   return (
     <MediaContainer className={`${styles.MediaContainer} ${className}`}>
       {children}

packages/react/react/src/skins/frosted/index.ts

@@ -0,0 +1 @@
+export { default as FrostedSkin } from './FrostedSkin';

packages/react/react/src/skins/frosted/styles.ts

@@ -1,4 +1,4 @@
-import type { MediaDefaultSkinStyles } from './types';
+import type { FrostedSkinStyles } from './types';
 
 // NOTE: Removing import to sidestep for compiler complexity (CJP)
 // import { cn } from '../../utils/cn';
@@ -9,16 +9,16 @@ function cn(...classes: (string | undefined)[]): string {
   return classes.filter(Boolean).join(' ');
 }
 
-const styles: MediaDefaultSkinStyles = {
+const styles: FrostedSkinStyles = {
   MediaContainer: cn(
-    'relative @container/root group/root overflow-clip',
+    'relative isolate @container/root group/root overflow-clip',
     // Base typography
     'text-[0.8125rem]', // 13px
     // Prevent rounded corners in fullscreen.
     '[&:fullscreen]:rounded-none [&:fullscreen]:[&_video]:h-full [&:fullscreen]:[&_video]:w-full',
     // Fancy borders.
-    'after:absolute after:inset-0 after:ring-black/10 after:ring-1 dark:after:ring-black/40 after:ring-inset after:z-10 after:pointer-events-none after:rounded-[inherit]',
-    'before:absolute before:inset-px before:rounded-[inherit] before:ring-white/15 before:ring-1 before:ring-inset before:z-10 before:pointer-events-none',
+    'after:absolute after:inset-0 after:ring-black/10 after:ring-1 dark:after:ring-white/10 after:ring-inset after:z-10 after:pointer-events-none after:rounded-[inherit]',
+    'before:absolute before:inset-px before:rounded-[inherit] before:ring-white/15 before:ring-1 before:ring-inset before:z-10 before:pointer-events-none dark:before:ring-0',
     // Ensure the nested video inherits the radius.
     '[&_video]:rounded-[inherit] [&_video]:w-full [&_video]:h-auto',
   ),

packages/react/react/src/skins/frosted/types.ts

@@ -1,4 +1,4 @@
-export interface MediaDefaultSkinStyles {
+export interface FrostedSkinStyles {
   readonly MediaContainer: string;
   readonly Overlay: string;
   readonly Controls: string;

packages/react/react/src/skins/index.ts

@@ -1,2 +1,2 @@
-export * from './default';
-export * from './toasted';
+export * from './frosted';
+export * from './minimal';

packages/react/react/src/skins/minimal/MinimalSkin.tsx

@@ -27,7 +27,7 @@ type SkinProps = PropsWithChildren<{
   className?: string;
 }>;
 
-export default function MediaSkinDefault({ children, className = '' }: SkinProps): JSX.Element {
+export default function MinimalSkin({ children, className = '' }: SkinProps): JSX.Element {
   return (
     <MediaContainer className={`${styles.MediaContainer} ${className}`}>
       {children}

packages/react/react/src/skins/minimal/index.ts

@@ -0,0 +1 @@
+export { default as MinimalSkin } from './MinimalSkin';

packages/react/react/src/skins/minimal/styles.ts

@@ -1,4 +1,4 @@
-import type { MediaToastedSkinStyles } from './types';
+import type { MinimalSkinStyles } from './types';
 
 // NOTE: Removing import to sidestep for compiler complexity (CJP)
 // import { cn } from '../../utils/cn';
@@ -9,9 +9,9 @@ function cn(...classes: (string | undefined)[]): string {
   return classes.filter(Boolean).join(' ');
 }
 
-const styles: MediaToastedSkinStyles = {
+const styles: MinimalSkinStyles = {
   MediaContainer: cn(
-    'relative @container/root group/root overflow-clip bg-black',
+    'relative isolate @container/root group/root overflow-clip bg-black',
     // Base typography
     'text-[0.8125rem]', // 13px
     // 'ring-1 ring-inset ring-black/10 dark:ring-white/10',
@@ -22,8 +22,8 @@ const styles: MediaToastedSkinStyles = {
     '[&_video]:rounded-[inherit] [&_video]:w-full [&_video]:h-auto',
   ),
   Overlay: cn(
-    'absolute inset-0 rounded-[inherit] bg-black/30',
-    'bg-gradient-to-t from-black/30 to-transparent to-[120px]',
+    'absolute inset-0 rounded-[inherit]',
+    'bg-gradient-to-t from-black/70 via-black/50 via-[120px] to-transparent',
     'opacity-0 delay-500 duration-300',
     //  FIXME: Temporary hide/show logic
     'has-[+.controls_[data-paused]]:opacity-100 has-[+.controls_[data-paused]]:delay-0 has-[+.controls_[data-paused]]:duration-75',
@@ -125,8 +125,8 @@ const styles: MediaToastedSkinStyles = {
   ),
   SliderTrack: cn(
     'relative select-none rounded-full bg-white/10 transition-[height,width] ease-in-out',
-    '[&[data-orientation="horizontal"]]:w-full [&[data-orientation="horizontal"]]:h-0.5',
-    '[&[data-orientation="vertical"]]:w-0.5',
+    '[&[data-orientation="horizontal"]]:w-full [&[data-orientation="horizontal"]]:h-[0.1875rem]',
+    '[&[data-orientation="vertical"]]:w-[0.1875rem]',
   ),
   SliderProgress: cn('bg-white rounded-[inherit]'),
   SliderPointer: cn('hidden'),

packages/react/react/src/skins/minimal/types.ts

@@ -1,4 +1,4 @@
-export interface MediaToastedSkinStyles {
+export interface MinimalSkinStyles {
   readonly MediaContainer: string;
   readonly Overlay: string;
   readonly Controls: string;

packages/react/react/src/skins/toasted/index.ts

@@ -1 +0,0 @@
-export { default as MediaSkinToasted } from './MediaSkinToasted';