From a7c3300d7a90f5930815c5b161a78ee2edc4efac Mon Sep 17 00:00:00 2001
From: Yngesh Raman <yngesh.raman@qed42.com>
Date: Tue, 31 Mar 2026 13:11:40 +0530
Subject: [PATCH] fix(native-select): use system colors for option and optgroup

---
 apps/v4/registry/bases/base/ui/native-select.tsx  | 15 ++++++++++++---
 apps/v4/registry/bases/radix/ui/native-select.tsx | 15 ++++++++++++---
 apps/v4/registry/new-york-v4/ui/native-select.tsx | 15 ++++++++++++---
 apps/v4/styles/base-lyra/ui/native-select.tsx     | 15 ++++++++++++---
 apps/v4/styles/base-maia/ui/native-select.tsx     | 15 ++++++++++++---
 apps/v4/styles/base-mira/ui/native-select.tsx     | 15 ++++++++++++---
 apps/v4/styles/base-nova/ui-rtl/native-select.tsx | 15 ++++++++++++---
 apps/v4/styles/base-nova/ui/native-select.tsx     | 15 ++++++++++++---
 apps/v4/styles/base-vega/ui/native-select.tsx     | 15 ++++++++++++---
 apps/v4/styles/radix-lyra/ui/native-select.tsx    | 15 ++++++++++++---
 apps/v4/styles/radix-maia/ui/native-select.tsx    | 15 ++++++++++++---
 apps/v4/styles/radix-mira/ui/native-select.tsx    | 15 ++++++++++++---
 .../v4/styles/radix-nova/ui-rtl/native-select.tsx | 15 ++++++++++++---
 apps/v4/styles/radix-nova/ui/native-select.tsx    | 15 ++++++++++++---
 apps/v4/styles/radix-vega/ui/native-select.tsx    | 15 ++++++++++++---
 15 files changed, 180 insertions(+), 45 deletions(-)

diff --git a/apps/v4/registry/bases/base/ui/native-select.tsx b/apps/v4/registry/bases/base/ui/native-select.tsx
index 9119629d26..47f8ce6326 100644
--- a/apps/v4/registry/bases/base/ui/native-select.tsx
+++ b/apps/v4/registry/bases/base/ui/native-select.tsx
@@ -41,8 +41,17 @@ function NativeSelect({
   )
 }
 
-function NativeSelectOption({ ...props }: React.ComponentProps<"option">) {
-  return <option data-slot="native-select-option" {...props} />
+function NativeSelectOption({
+  className,
+  ...props
+}: React.ComponentProps<"option">) {
+  return (
+    <option
+      data-slot="native-select-option"
+      className={cn("bg-[Canvas] text-[CanvasText]", className)}
+      {...props}
+    />
+  )
 }
 
 function NativeSelectOptGroup({
@@ -52,7 +61,7 @@ function NativeSelectOptGroup({
   return (
     <optgroup
       data-slot="native-select-optgroup"
-      className={cn(className)}
+      className={cn("bg-[Canvas] text-[CanvasText]", className)}
       {...props}
     />
   )
diff --git a/apps/v4/registry/bases/radix/ui/native-select.tsx b/apps/v4/registry/bases/radix/ui/native-select.tsx
index e6ecb10fef..b810f905fb 100644
--- a/apps/v4/registry/bases/radix/ui/native-select.tsx
+++ b/apps/v4/registry/bases/radix/ui/native-select.tsx
@@ -41,8 +41,17 @@ function NativeSelect({
   )
 }
 
-function NativeSelectOption({ ...props }: React.ComponentProps<"option">) {
-  return <option data-slot="native-select-option" {...props} />
+function NativeSelectOption({
+  className,
+  ...props
+}: React.ComponentProps<"option">) {
+  return (
+    <option
+      data-slot="native-select-option"
+      className={cn("bg-[Canvas] text-[CanvasText]", className)}
+      {...props}
+    />
+  )
 }
 
 function NativeSelectOptGroup({
@@ -52,7 +61,7 @@ function NativeSelectOptGroup({
   return (
     <optgroup
       data-slot="native-select-optgroup"
-      className={cn(className)}
+      className={cn("bg-[Canvas] text-[CanvasText]", className)}
       {...props}
     />
   )
diff --git a/apps/v4/registry/new-york-v4/ui/native-select.tsx b/apps/v4/registry/new-york-v4/ui/native-select.tsx
index ab7455a787..3058398399 100644
--- a/apps/v4/registry/new-york-v4/ui/native-select.tsx
+++ b/apps/v4/registry/new-york-v4/ui/native-select.tsx
@@ -33,8 +33,17 @@ function NativeSelect({
   )
 }
 
-function NativeSelectOption({ ...props }: React.ComponentProps<"option">) {
-  return <option data-slot="native-select-option" {...props} />
+function NativeSelectOption({
+  className,
+  ...props
+}: React.ComponentProps<"option">) {
+  return (
+    <option
+      data-slot="native-select-option"
+      className={cn("bg-[Canvas] text-[CanvasText]", className)}
+      {...props}
+    />
+  )
 }
 
 function NativeSelectOptGroup({
@@ -44,7 +53,7 @@ function NativeSelectOptGroup({
   return (
     <optgroup
       data-slot="native-select-optgroup"
-      className={cn(className)}
+      className={cn("bg-[Canvas] text-[CanvasText]", className)}
       {...props}
     />
   )
diff --git a/apps/v4/styles/base-lyra/ui/native-select.tsx b/apps/v4/styles/base-lyra/ui/native-select.tsx
index 58acb4284d..a70a1e8612 100644
--- a/apps/v4/styles/base-lyra/ui/native-select.tsx
+++ b/apps/v4/styles/base-lyra/ui/native-select.tsx
@@ -36,8 +36,17 @@ function NativeSelect({
   )
 }
 
-function NativeSelectOption({ ...props }: React.ComponentProps<"option">) {
-  return <option data-slot="native-select-option" {...props} />
+function NativeSelectOption({
+  className,
+  ...props
+}: React.ComponentProps<"option">) {
+  return (
+    <option
+      data-slot="native-select-option"
+      className={cn("bg-[Canvas] text-[CanvasText]", className)}
+      {...props}
+    />
+  )
 }
 
 function NativeSelectOptGroup({
@@ -47,7 +56,7 @@ function NativeSelectOptGroup({
   return (
     <optgroup
       data-slot="native-select-optgroup"
-      className={cn(className)}
+      className={cn("bg-[Canvas] text-[CanvasText]", className)}
       {...props}
     />
   )
diff --git a/apps/v4/styles/base-maia/ui/native-select.tsx b/apps/v4/styles/base-maia/ui/native-select.tsx
index 8f76a51269..6f1bd8143a 100644
--- a/apps/v4/styles/base-maia/ui/native-select.tsx
+++ b/apps/v4/styles/base-maia/ui/native-select.tsx
@@ -36,8 +36,17 @@ function NativeSelect({
   )
 }
 
-function NativeSelectOption({ ...props }: React.ComponentProps<"option">) {
-  return <option data-slot="native-select-option" {...props} />
+function NativeSelectOption({
+  className,
+  ...props
+}: React.ComponentProps<"option">) {
+  return (
+    <option
+      data-slot="native-select-option"
+      className={cn("bg-[Canvas] text-[CanvasText]", className)}
+      {...props}
+    />
+  )
 }
 
 function NativeSelectOptGroup({
@@ -47,7 +56,7 @@ function NativeSelectOptGroup({
   return (
     <optgroup
       data-slot="native-select-optgroup"
-      className={cn(className)}
+      className={cn("bg-[Canvas] text-[CanvasText]", className)}
       {...props}
     />
   )
diff --git a/apps/v4/styles/base-mira/ui/native-select.tsx b/apps/v4/styles/base-mira/ui/native-select.tsx
index 959143f8bd..43c06f3c93 100644
--- a/apps/v4/styles/base-mira/ui/native-select.tsx
+++ b/apps/v4/styles/base-mira/ui/native-select.tsx
@@ -36,8 +36,17 @@ function NativeSelect({
   )
 }
 
-function NativeSelectOption({ ...props }: React.ComponentProps<"option">) {
-  return <option data-slot="native-select-option" {...props} />
+function NativeSelectOption({
+  className,
+  ...props
+}: React.ComponentProps<"option">) {
+  return (
+    <option
+      data-slot="native-select-option"
+      className={cn("bg-[Canvas] text-[CanvasText]", className)}
+      {...props}
+    />
+  )
 }
 
 function NativeSelectOptGroup({
@@ -47,7 +56,7 @@ function NativeSelectOptGroup({
   return (
     <optgroup
       data-slot="native-select-optgroup"
-      className={cn(className)}
+      className={cn("bg-[Canvas] text-[CanvasText]", className)}
       {...props}
     />
   )
diff --git a/apps/v4/styles/base-nova/ui-rtl/native-select.tsx b/apps/v4/styles/base-nova/ui-rtl/native-select.tsx
index 244c0bf8a2..065563a4bc 100644
--- a/apps/v4/styles/base-nova/ui-rtl/native-select.tsx
+++ b/apps/v4/styles/base-nova/ui-rtl/native-select.tsx
@@ -36,8 +36,17 @@ function NativeSelect({
   )
 }
 
-function NativeSelectOption({ ...props }: React.ComponentProps<"option">) {
-  return <option data-slot="native-select-option" {...props} />
+function NativeSelectOption({
+  className,
+  ...props
+}: React.ComponentProps<"option">) {
+  return (
+    <option
+      data-slot="native-select-option"
+      className={cn("bg-[Canvas] text-[CanvasText]", className)}
+      {...props}
+    />
+  )
 }
 
 function NativeSelectOptGroup({
@@ -47,7 +56,7 @@ function NativeSelectOptGroup({
   return (
     <optgroup
       data-slot="native-select-optgroup"
-      className={cn(className)}
+      className={cn("bg-[Canvas] text-[CanvasText]", className)}
       {...props}
     />
   )
diff --git a/apps/v4/styles/base-nova/ui/native-select.tsx b/apps/v4/styles/base-nova/ui/native-select.tsx
index eaf6f965eb..c6c627a670 100644
--- a/apps/v4/styles/base-nova/ui/native-select.tsx
+++ b/apps/v4/styles/base-nova/ui/native-select.tsx
@@ -36,8 +36,17 @@ function NativeSelect({
   )
 }
 
-function NativeSelectOption({ ...props }: React.ComponentProps<"option">) {
-  return <option data-slot="native-select-option" {...props} />
+function NativeSelectOption({
+  className,
+  ...props
+}: React.ComponentProps<"option">) {
+  return (
+    <option
+      data-slot="native-select-option"
+      className={cn("bg-[Canvas] text-[CanvasText]", className)}
+      {...props}
+    />
+  )
 }
 
 function NativeSelectOptGroup({
@@ -47,7 +56,7 @@ function NativeSelectOptGroup({
   return (
     <optgroup
       data-slot="native-select-optgroup"
-      className={cn(className)}
+      className={cn("bg-[Canvas] text-[CanvasText]", className)}
       {...props}
     />
   )
diff --git a/apps/v4/styles/base-vega/ui/native-select.tsx b/apps/v4/styles/base-vega/ui/native-select.tsx
index 7f16dbc5ed..c11965fb69 100644
--- a/apps/v4/styles/base-vega/ui/native-select.tsx
+++ b/apps/v4/styles/base-vega/ui/native-select.tsx
@@ -36,8 +36,17 @@ function NativeSelect({
   )
 }
 
-function NativeSelectOption({ ...props }: React.ComponentProps<"option">) {
-  return <option data-slot="native-select-option" {...props} />
+function NativeSelectOption({
+  className,
+  ...props
+}: React.ComponentProps<"option">) {
+  return (
+    <option
+      data-slot="native-select-option"
+      className={cn("bg-[Canvas] text-[CanvasText]", className)}
+      {...props}
+    />
+  )
 }
 
 function NativeSelectOptGroup({
@@ -47,7 +56,7 @@ function NativeSelectOptGroup({
   return (
     <optgroup
       data-slot="native-select-optgroup"
-      className={cn(className)}
+      className={cn("bg-[Canvas] text-[CanvasText]", className)}
       {...props}
     />
   )
diff --git a/apps/v4/styles/radix-lyra/ui/native-select.tsx b/apps/v4/styles/radix-lyra/ui/native-select.tsx
index 58acb4284d..a70a1e8612 100644
--- a/apps/v4/styles/radix-lyra/ui/native-select.tsx
+++ b/apps/v4/styles/radix-lyra/ui/native-select.tsx
@@ -36,8 +36,17 @@ function NativeSelect({
   )
 }
 
-function NativeSelectOption({ ...props }: React.ComponentProps<"option">) {
-  return <option data-slot="native-select-option" {...props} />
+function NativeSelectOption({
+  className,
+  ...props
+}: React.ComponentProps<"option">) {
+  return (
+    <option
+      data-slot="native-select-option"
+      className={cn("bg-[Canvas] text-[CanvasText]", className)}
+      {...props}
+    />
+  )
 }
 
 function NativeSelectOptGroup({
@@ -47,7 +56,7 @@ function NativeSelectOptGroup({
   return (
     <optgroup
       data-slot="native-select-optgroup"
-      className={cn(className)}
+      className={cn("bg-[Canvas] text-[CanvasText]", className)}
       {...props}
     />
   )
diff --git a/apps/v4/styles/radix-maia/ui/native-select.tsx b/apps/v4/styles/radix-maia/ui/native-select.tsx
index 8f76a51269..6f1bd8143a 100644
--- a/apps/v4/styles/radix-maia/ui/native-select.tsx
+++ b/apps/v4/styles/radix-maia/ui/native-select.tsx
@@ -36,8 +36,17 @@ function NativeSelect({
   )
 }
 
-function NativeSelectOption({ ...props }: React.ComponentProps<"option">) {
-  return <option data-slot="native-select-option" {...props} />
+function NativeSelectOption({
+  className,
+  ...props
+}: React.ComponentProps<"option">) {
+  return (
+    <option
+      data-slot="native-select-option"
+      className={cn("bg-[Canvas] text-[CanvasText]", className)}
+      {...props}
+    />
+  )
 }
 
 function NativeSelectOptGroup({
@@ -47,7 +56,7 @@ function NativeSelectOptGroup({
   return (
     <optgroup
       data-slot="native-select-optgroup"
-      className={cn(className)}
+      className={cn("bg-[Canvas] text-[CanvasText]", className)}
       {...props}
     />
   )
diff --git a/apps/v4/styles/radix-mira/ui/native-select.tsx b/apps/v4/styles/radix-mira/ui/native-select.tsx
index 959143f8bd..43c06f3c93 100644
--- a/apps/v4/styles/radix-mira/ui/native-select.tsx
+++ b/apps/v4/styles/radix-mira/ui/native-select.tsx
@@ -36,8 +36,17 @@ function NativeSelect({
   )
 }
 
-function NativeSelectOption({ ...props }: React.ComponentProps<"option">) {
-  return <option data-slot="native-select-option" {...props} />
+function NativeSelectOption({
+  className,
+  ...props
+}: React.ComponentProps<"option">) {
+  return (
+    <option
+      data-slot="native-select-option"
+      className={cn("bg-[Canvas] text-[CanvasText]", className)}
+      {...props}
+    />
+  )
 }
 
 function NativeSelectOptGroup({
@@ -47,7 +56,7 @@ function NativeSelectOptGroup({
   return (
     <optgroup
       data-slot="native-select-optgroup"
-      className={cn(className)}
+      className={cn("bg-[Canvas] text-[CanvasText]", className)}
       {...props}
     />
   )
diff --git a/apps/v4/styles/radix-nova/ui-rtl/native-select.tsx b/apps/v4/styles/radix-nova/ui-rtl/native-select.tsx
index 244c0bf8a2..065563a4bc 100644
--- a/apps/v4/styles/radix-nova/ui-rtl/native-select.tsx
+++ b/apps/v4/styles/radix-nova/ui-rtl/native-select.tsx
@@ -36,8 +36,17 @@ function NativeSelect({
   )
 }
 
-function NativeSelectOption({ ...props }: React.ComponentProps<"option">) {
-  return <option data-slot="native-select-option" {...props} />
+function NativeSelectOption({
+  className,
+  ...props
+}: React.ComponentProps<"option">) {
+  return (
+    <option
+      data-slot="native-select-option"
+      className={cn("bg-[Canvas] text-[CanvasText]", className)}
+      {...props}
+    />
+  )
 }
 
 function NativeSelectOptGroup({
@@ -47,7 +56,7 @@ function NativeSelectOptGroup({
   return (
     <optgroup
       data-slot="native-select-optgroup"
-      className={cn(className)}
+      className={cn("bg-[Canvas] text-[CanvasText]", className)}
       {...props}
     />
   )
diff --git a/apps/v4/styles/radix-nova/ui/native-select.tsx b/apps/v4/styles/radix-nova/ui/native-select.tsx
index eaf6f965eb..c6c627a670 100644
--- a/apps/v4/styles/radix-nova/ui/native-select.tsx
+++ b/apps/v4/styles/radix-nova/ui/native-select.tsx
@@ -36,8 +36,17 @@ function NativeSelect({
   )
 }
 
-function NativeSelectOption({ ...props }: React.ComponentProps<"option">) {
-  return <option data-slot="native-select-option" {...props} />
+function NativeSelectOption({
+  className,
+  ...props
+}: React.ComponentProps<"option">) {
+  return (
+    <option
+      data-slot="native-select-option"
+      className={cn("bg-[Canvas] text-[CanvasText]", className)}
+      {...props}
+    />
+  )
 }
 
 function NativeSelectOptGroup({
@@ -47,7 +56,7 @@ function NativeSelectOptGroup({
   return (
     <optgroup
       data-slot="native-select-optgroup"
-      className={cn(className)}
+      className={cn("bg-[Canvas] text-[CanvasText]", className)}
       {...props}
     />
   )
diff --git a/apps/v4/styles/radix-vega/ui/native-select.tsx b/apps/v4/styles/radix-vega/ui/native-select.tsx
index 7f16dbc5ed..c11965fb69 100644
--- a/apps/v4/styles/radix-vega/ui/native-select.tsx
+++ b/apps/v4/styles/radix-vega/ui/native-select.tsx
@@ -36,8 +36,17 @@ function NativeSelect({
   )
 }
 
-function NativeSelectOption({ ...props }: React.ComponentProps<"option">) {
-  return <option data-slot="native-select-option" {...props} />
+function NativeSelectOption({
+  className,
+  ...props
+}: React.ComponentProps<"option">) {
+  return (
+    <option
+      data-slot="native-select-option"
+      className={cn("bg-[Canvas] text-[CanvasText]", className)}
+      {...props}
+    />
+  )
 }
 
 function NativeSelectOptGroup({
@@ -47,7 +56,7 @@ function NativeSelectOptGroup({
   return (
     <optgroup
       data-slot="native-select-optgroup"
-      className={cn(className)}
+      className={cn("bg-[Canvas] text-[CanvasText]", className)}
       {...props}
     />
   )