theme: Fix some dropdown to use popover for bg, and improve macos-cla… (#1702)

<img width="1136" height="859" alt="image"
src="https://github.com/user-attachments/assets/16764390-2089-43b9-bb96-77912263f07e"
/>

<img width="1136" height="859" alt="image"
src="https://github.com/user-attachments/assets/c2cb7e4f-76d6-458e-8ff9-2734d4944008"
/>

crates/ui/src/color_picker.rs

@@ -491,7 +491,8 @@ impl RenderOnce for ColorPicker {
                                     .border_1()
                                     .border_color(cx.theme().border)
                                     .shadow_lg()
-                                    .bg(cx.theme().background)
+                                    .bg(cx.theme().popover)
+                                    .text_color(cx.theme().popover_foreground)
                                     .child(self.render_colors(window, cx))
                                     .on_mouse_up_out(
                                         MouseButton::Left,

crates/ui/src/text/node.rs

@@ -370,7 +370,7 @@ impl CodeBlock {
                     .id("codeblock")
                     .p_3()
                     .rounded(cx.theme().radius)
-                    .bg(cx.theme().secondary.opacity(0.85))
+                    .bg(cx.theme().muted)
                     .font_family(cx.theme().mono_font_family.clone())
                     .text_size(cx.theme().mono_font_size)
                     .relative()

crates/ui/src/theme/schema.rs

@@ -1,13 +1,13 @@
 use std::{rc::Rc, sync::Arc};
 
 use anyhow::Result;
-use gpui::{px, Hsla, SharedString};
+use gpui::{Hsla, SharedString, px};
 use schemars::JsonSchema;
 use serde::{Deserialize, Serialize};
 
 use crate::{
-    highlighter::{HighlightTheme, HighlightThemeStyle},
     Colorize, Theme, ThemeColor, ThemeMode,
+    highlighter::{HighlightTheme, HighlightThemeStyle},
 };
 
 /// Represents a theme configuration.
@@ -528,7 +528,7 @@ impl ThemeColor {
 
         // Other colors
         apply_color!(accent, fallback = self.secondary);
-        apply_color!(accent_foreground, fallback = self.secondary_foreground);
+        apply_color!(accent_foreground, fallback = self.foreground);
         apply_color!(accordion, fallback = self.background);
         apply_color!(accordion_hover, fallback = self.accent.opacity(0.8));
         apply_color!(
@@ -540,7 +540,7 @@ impl ThemeColor {
                         .opacity(if config.mode.is_dark() { 0.3 } else { 0.4 })
                 )
         );
-        apply_color!(group_box_foreground, fallback = self.secondary_foreground);
+        apply_color!(group_box_foreground, fallback = self.foreground);
         apply_color!(caret, fallback = self.primary);
         apply_color!(chart_1, fallback = self.blue.lighten(0.4));
         apply_color!(chart_2, fallback = self.blue.lighten(0.2));
@@ -560,7 +560,7 @@ impl ThemeColor {
         );
         apply_color!(
             description_list_label_foreground,
-            fallback = self.secondary_foreground
+            fallback = self.muted_foreground
         );
         apply_color!(drag_border, fallback = self.primary.opacity(0.65));
         apply_color!(drop_target, fallback = self.primary.opacity(0.2));
@@ -608,7 +608,7 @@ impl ThemeColor {
         apply_color!(tab_active_foreground, fallback = self.foreground);
         apply_color!(tab_bar, fallback = self.background);
         apply_color!(tab_bar_segmented, fallback = self.secondary);
-        apply_color!(tab_foreground, fallback = self.secondary_foreground);
+        apply_color!(tab_foreground, fallback = self.foreground);
         apply_color!(table, fallback = self.list);
         apply_color!(table_active, fallback = self.list_active);
         apply_color!(table_active_border, fallback = self.list_active_border);

crates/ui/src/time/date_picker.rs

@@ -2,20 +2,20 @@ use std::rc::Rc;
 
 use chrono::NaiveDate;
 use gpui::{
-    anchored, deferred, div, prelude::FluentBuilder as _, px, App, AppContext, ClickEvent, Context,
+    App, AppContext, ClickEvent, Context, ElementId, Empty, Entity, EventEmitter, FocusHandle,
-    ElementId, Empty, Entity, EventEmitter, FocusHandle, Focusable, InteractiveElement as _,
+    Focusable, InteractiveElement as _, IntoElement, KeyBinding, MouseButton, ParentElement as _,
-    IntoElement, KeyBinding, MouseButton, ParentElement as _, Render, RenderOnce, SharedString,
+    Render, RenderOnce, SharedString, StatefulInteractiveElement as _, StyleRefinement, Styled,
-    StatefulInteractiveElement as _, StyleRefinement, Styled, Subscription, Window,
+    Subscription, Window, anchored, deferred, div, prelude::FluentBuilder as _, px,
 };
 use rust_i18n::t;
 
 use crate::{
+    ActiveTheme, Disableable, Icon, IconName, Sizable, Size, StyleSized as _, StyledExt as _,
     actions::{Cancel, Confirm},
     button::{Button, ButtonVariants as _},
     h_flex,
-    input::{clear_button, Delete},
+    input::{Delete, clear_button},
-    v_flex, ActiveTheme, Disableable, Icon, IconName, Sizable, Size, StyleSized as _,
+    v_flex,
-    StyledExt as _,
 };
 
 use super::calendar::{Calendar, CalendarEvent, CalendarState, Date, Matcher};
@@ -443,7 +443,8 @@ impl RenderOnce for DatePicker {
                                 .border_color(cx.theme().border)
                                 .shadow_lg()
                                 .rounded((cx.theme().radius * 2.).min(px(8.)))
-                                .bg(cx.theme().background)
+                                .bg(cx.theme().popover)
+                                .text_color(cx.theme().popover_foreground)
                                 .on_mouse_up_out(
                                     MouseButton::Left,
                                     window.listener_for(&self.state, |view, _, window, cx| {

themes/macos-classic.json

@@ -14,19 +14,21 @@
         "background": "#F9F9F9",
         "foreground": "#000000",
         "border": "#D2D2D2",
-        "ring": "#0064E1",
+        "ring": "#007AFF",
         "danger.foreground": "#FFFFFF",
         "list.active.background": "#0064E110",
-        "list.active.border": "#0064E1",
+        "list.active.border": "#007AFF",
-        "list.background": "#FFFFFF",
         "list.even.background": "#EFEFEF",
         "list.hover.background": "#E7E7E7",
         "muted.background": "#F5F5F5",
         "muted.foreground": "#707070",
         "popover.background": "#F5F5F5",
         "popover.foreground": "#000000",
-        "primary.background": "#0064E1",
+        "primary.background": "#007AFF",
         "primary.foreground": "#FFFFFF",
+        "danger.background": "#E0383E",
+        "warning.background": "#c79f00",
+        "success.background": "#62BA46",
         "scrollbar.background": "#FFFFFF00",
         "scrollbar.thumb.background": "#C8C8C8",
         "secondary.active.background": "#D9D9D9",
@@ -39,18 +41,12 @@
         "tab_bar.background": "#E9E9E9",
         "title_bar.background": "#FEFEFE",
         "title_bar.border": "#DADADA",
-        "base.yellow": "#8E7823",
+        "base.yellow": "#FAC800",
-        "base.yellow.light": "#BDA400",
+        "base.red": "#E0383E",
-        "base.red": "#d21f07",
+        "base.blue": "#007AFF",
-        "base.red.light": "#D9564E",
+        "base.green": "#62BA46",
-        "base.blue": "#0433ff",
-        "base.blue.light": "#5685F4",
-        "base.green": "#277F2B",
-        "base.green.light": "#35BD33",
         "base.magenta": "#AE30C2",
-        "base.magenta.light": "#D75CE7",
+        "base.cyan": "#04b0ff"
-        "base.cyan": "#00767C",
-        "base.cyan.light": "#20B1C9"
       },
       "highlight": {
         "editor.foreground": "#000000",
@@ -151,36 +147,39 @@
         "accent.background": "#363636",
         "accent.foreground": "#CACCCA",
         "background": "#1E1E1E",
-        "border": "#454545",
+        "border": "#404040",
-        "ring": "#0059D1",
+        "ring": "#007AFF",
         "foreground": "#DEDEDE",
         "list.even.background": "#232323",
         "list.active.background": "#0059D115",
-        "list.active.border": "#0059D1",
+        "list.active.border": "#077DFF",
-        "muted.background": "#1E1D1E",
+        "muted.background": "#252525",
         "muted.foreground": "#9D9D9D",
-        "popover.background": "#1E1D1E",
+        "popover.background": "#191919",
         "popover.foreground": "#CACCCA",
-        "primary.background": "#0059D1",
+        "primary.background": "#077DFF",
         "primary.foreground": "#F2F9FF",
+        "switch.background": "#393939",
+        "switch.thumb.background": "#DAECFF",
         "scrollbar.background": "#13131300",
-        "scrollbar.thumb.background": "#4C4D4DAA",
+        "scrollbar.thumb.background": "#9F9F9F",
         "secondary.active.background": "#30303099",
-        "secondary.background": "#303030",
+        "secondary.background": "#353535",
         "secondary.foreground": "#DEDEDE",
-        "secondary.hover.background": "#323232",
+        "secondary.hover.background": "#393939",
+        "warning.background": "#c99e00",
         "tab.active.background": "#1E1E1E",
         "tab.background": "#232323",
         "tab.foreground": "#8F8F8F",
         "title_bar.background": "#272727",
         "selection.background": "#3F638B",
-        "link": "#307BF6",
+        "link": "#007AFF",
-        "base.blue": "#0059D1",
+        "base.blue": "#007AFF",
         "base.cyan": "#3CD3FE",
         "base.green": "#62BA46",
-        "base.magenta": "#F74F9E",
+        "base.magenta": "#A550A7",
-        "base.red": "#FF4245",
+        "base.red": "#FF5257",
-        "base.yellow": "#FCB827"
+        "base.yellow": "#FFC600"
       },
       "highlight": {
         "editor.foreground": "#CACCCA",