From a62623ba41d294edead981a1b468f7f486c91625 Mon Sep 17 00:00:00 2001
From: Sam Potts <sam@potts.es>
Date: Tue, 11 Nov 2025 22:48:32 +1100
Subject: [PATCH] fix(skins): remove vjs- prefixed CSS custom properties (#179)

---
 examples/html-demo/src/frosted-eject.css                | 6 ++++--
 examples/html-demo/src/minimal-eject.css                | 6 ++++--
 examples/react-demo/src/skins/frosted-eject/frosted.css | 6 ++++--
 examples/react-demo/src/skins/minimal-eject/minimal.css | 6 ++++--
 packages/html/src/skins/frosted/styles.css              | 6 ++++--
 packages/html/src/skins/minimal/styles.css              | 6 ++++--
 packages/react/src/skins/frosted/styles.ts              | 4 ++--
 packages/react/src/skins/minimal/styles.ts              | 4 ++--
 8 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/examples/html-demo/src/frosted-eject.css b/examples/html-demo/src/frosted-eject.css
index afc0372f..da0f7a8e 100644
--- a/examples/html-demo/src/frosted-eject.css
+++ b/examples/html-demo/src/frosted-eject.css
@@ -7,11 +7,13 @@ media-container {
   isolation: isolate;
   container: root / inline-size;
   overflow: clip;
-  border-radius: var(--vjs-border-radius, 2rem);
+  border-radius: var(--frosted-border-radius, 2rem);
   background: oklab(0 0 0);
-  font-family: var(--vjs-font-family, InterVariable, Inter, ui-sans-serif, system-ui, sans-serif);
+  font-family: ui-sans-serif, system-ui, sans-serif;
   font-size: 0.8125rem;
   line-height: 1.5;
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
 }
 media-container::before,
 media-container::after {
diff --git a/examples/html-demo/src/minimal-eject.css b/examples/html-demo/src/minimal-eject.css
index 8ae1486b..57a5a6f6 100644
--- a/examples/html-demo/src/minimal-eject.css
+++ b/examples/html-demo/src/minimal-eject.css
@@ -7,11 +7,13 @@ media-container {
   isolation: isolate;
   container: root / inline-size;
   overflow: clip;
-  border-radius: var(--vjs-border-radius, 2rem);
+  border-radius: var(--minimal-border-radius, 2rem);
   background: oklab(0 0 0);
-  font-family: var(--vjs-font-family, InterVariable, Inter, ui-sans-serif, system-ui, sans-serif);
+  font-family: ui-sans-serif, system-ui, sans-serif;
   font-size: 0.8125rem;
   line-height: 1.5;
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
 }
 media-container::after {
   content: '';
diff --git a/examples/react-demo/src/skins/frosted-eject/frosted.css b/examples/react-demo/src/skins/frosted-eject/frosted.css
index 016b0ecf..db5d4bf9 100644
--- a/examples/react-demo/src/skins/frosted-eject/frosted.css
+++ b/examples/react-demo/src/skins/frosted-eject/frosted.css
@@ -7,11 +7,13 @@
   isolation: isolate;
   container: root / inline-size;
   overflow: clip;
-  border-radius: var(--vjs-border-radius, 2rem);
+  border-radius: var(--frosted-border-radius, 2rem);
   background: oklab(0 0 0);
-  font-family: var(--vjs-font-family, InterVariable, Inter, ui-sans-serif, system-ui, sans-serif);
+  font-family: ui-sans-serif, system-ui, sans-serif;
   font-size: 0.8125rem;
   line-height: 1.5;
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
 }
 .vjs-frosted-skin::before,
 .vjs-frosted-skin::after {
diff --git a/examples/react-demo/src/skins/minimal-eject/minimal.css b/examples/react-demo/src/skins/minimal-eject/minimal.css
index fb8500bb..9611b9b0 100644
--- a/examples/react-demo/src/skins/minimal-eject/minimal.css
+++ b/examples/react-demo/src/skins/minimal-eject/minimal.css
@@ -7,11 +7,13 @@
   isolation: isolate;
   container: root / inline-size;
   overflow: clip;
-  border-radius: var(--vjs-border-radius, 2rem);
+  border-radius: var(--minimal-border-radius, 2rem);
   background: oklab(0 0 0);
-  font-family: var(--vjs-font-family, InterVariable, Inter, ui-sans-serif, system-ui, sans-serif);
+  font-family: ui-sans-serif, system-ui, sans-serif;
   font-size: 0.8125rem;
   line-height: 1.5;
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
 }
 .vjs-minimal-skin::after {
   content: '';
diff --git a/packages/html/src/skins/frosted/styles.css b/packages/html/src/skins/frosted/styles.css
index 912f57cb..71a988ca 100644
--- a/packages/html/src/skins/frosted/styles.css
+++ b/packages/html/src/skins/frosted/styles.css
@@ -7,11 +7,13 @@ media-container {
   isolation: isolate;
   container: root / inline-size;
   overflow: clip;
-  border-radius: var(--vjs-border-radius, 2rem);
+  border-radius: var(--frosted-border-radius, 2rem);
   background: oklab(0 0 0);
-  font-family: var(--vjs-font-family, InterVariable, Inter, ui-sans-serif, system-ui, sans-serif);
+  font-family: ui-sans-serif, system-ui, sans-serif;
   font-size: 0.8125rem;
   line-height: 1.5;
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
 }
 media-container::before,
 media-container::after {
diff --git a/packages/html/src/skins/minimal/styles.css b/packages/html/src/skins/minimal/styles.css
index d8367457..54c4a1f1 100644
--- a/packages/html/src/skins/minimal/styles.css
+++ b/packages/html/src/skins/minimal/styles.css
@@ -7,11 +7,13 @@ media-container {
   isolation: isolate;
   container: root / inline-size;
   overflow: clip;
-  border-radius: var(--vjs-border-radius, 0.75rem);
+  border-radius: var(--minimal-border-radius, 0.75rem);
   background: oklab(0 0 0);
-  font-family: var(--vjs-font-family, InterVariable, Inter, ui-sans-serif, system-ui, sans-serif);
+  font-family: ui-sans-serif, system-ui, sans-serif;
   font-size: 0.8125rem;
   line-height: 1.5;
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
 }
 media-container::after {
   content: '';
diff --git a/packages/react/src/skins/frosted/styles.ts b/packages/react/src/skins/frosted/styles.ts
index f506e15e..c972c251 100644
--- a/packages/react/src/skins/frosted/styles.ts
+++ b/packages/react/src/skins/frosted/styles.ts
@@ -12,9 +12,9 @@ function cn(...classes: (string | undefined)[]): string {
 const styles: FrostedSkinStyles = {
   MediaContainer: cn(
     'vjs', // Scope preflight
-    'vjs:relative vjs:isolate vjs:@container/root vjs:group/root vjs:overflow-clip vjs:bg-black vjs:rounded-(--vjs-border-radius,2rem)',
+    'vjs:relative vjs:isolate vjs:@container/root vjs:group/root vjs:overflow-clip vjs:bg-black vjs:rounded-(--frosted-border-radius,2rem)',
     // Base typography
-    'vjs:text-[0.8125rem]',
+    'vjs:font-sans vjs:text-[0.8125rem] vjs:subpixel-antialiased',
     // Fancy borders
     'vjs:after:absolute vjs:after:inset-0 vjs:after:ring-black/10 vjs:after:ring-1 vjs:dark:after:ring-white/10 vjs:after:ring-inset vjs:after:z-10 vjs:after:pointer-events-none vjs:after:rounded-[inherit]',
     'vjs:before:absolute vjs:before:inset-px vjs:before:rounded-[inherit] vjs:before:ring-white/15 vjs:before:ring-1 vjs:before:ring-inset vjs:before:z-10 vjs:before:pointer-events-none vjs:dark:before:ring-0',
diff --git a/packages/react/src/skins/minimal/styles.ts b/packages/react/src/skins/minimal/styles.ts
index 6cabf86b..3408ec02 100644
--- a/packages/react/src/skins/minimal/styles.ts
+++ b/packages/react/src/skins/minimal/styles.ts
@@ -12,9 +12,9 @@ function cn(...classes: (string | undefined)[]): string {
 const styles: MinimalSkinStyles = {
   MediaContainer: cn(
     'vjs', // Scope preflight
-    'vjs:relative vjs:isolate vjs:@container/root vjs:group/root vjs:overflow-clip vjs:bg-black vjs:rounded-(--vjs-border-radius,0.75rem)',
+    'vjs:relative vjs:isolate vjs:@container/root vjs:group/root vjs:overflow-clip vjs:bg-black vjs:rounded-(--minimal-border-radius,0.75rem)',
     // Base typography
-    'vjs:text-[0.8125rem]',
+    'vjs:font-sans vjs:text-[0.8125rem] vjs:subpixel-antialiased',
     // Fancy borders
     'vjs:after:absolute vjs:after:inset-0 vjs:after:ring-black/15 vjs:after:ring-1 vjs:dark:after:ring-white/15 vjs:after:ring-inset vjs:after:z-10 vjs:after:pointer-events-none vjs:after:rounded-[inherit]',
     // Prevent rounded corners in fullscreen