From f4b435b1606bc57e351b4a276278ddf3f11bc7c4 Mon Sep 17 00:00:00 2001
From: Ren Amamiya <reyakov@proton.me>
Date: Thu, 8 Oct 2026 08:51:11 +0700
Subject: [PATCH] wip

---
 crates/chat_ui/src/lib.rs                   | 66 ++++++++---------
 crates/nip29_ui/src/details.rs              |  6 +-
 crates/nip29_ui/src/lib.rs                  |  8 +-
 crates/nip29_ui/src/message.rs              | 20 ++---
 crates/nip4e/src/lib.rs                     |  4 +-
 crates/ui/src/avatar.rs                     |  4 +-
 crates/ui/src/button.rs                     | 82 ++++++++++-----------
 crates/ui/src/dialog.rs                     |  8 +-
 crates/ui/src/dock/mod.rs                   | 12 +--
 crates/ui/src/group_box.rs                  |  2 +-
 crates/ui/src/icon.rs                       |  2 +-
 crates/ui/src/input/clear_button.rs         |  2 +-
 crates/ui/src/input/input.rs                |  8 +-
 crates/ui/src/kbd.rs                        |  2 +-
 crates/ui/src/markdown.rs                   |  4 +-
 crates/ui/src/menu/menu_item.rs             |  8 +-
 crates/ui/src/message.rs                    |  6 +-
 crates/ui/src/nav.rs                        |  6 +-
 crates/ui/src/nav_item.rs                   |  6 +-
 crates/ui/src/notification.rs               | 14 ++--
 crates/ui/src/resizable/mod.rs              |  4 +-
 crates/ui/src/root.rs                       |  2 +-
 crates/ui/src/scroll/scrollable.rs          | 12 +--
 crates/ui/src/styled.rs                     |  2 +-
 crates/ui/src/switch.rs                     |  6 +-
 crates/ui/src/tab/mod.rs                    | 17 ++---
 crates/ui/src/tab/tab_bar.rs                |  4 +-
 crates/ui/src/title_bar.rs                  | 10 +--
 crates/ui/src/tooltip.rs                    |  2 +-
 crates/workspace/src/dialogs/import.rs      |  6 +-
 crates/workspace/src/dialogs/new_chat.rs    |  8 +-
 crates/workspace/src/dialogs/profile.rs     |  4 +-
 crates/workspace/src/dialogs/relays.rs      |  6 +-
 crates/workspace/src/dialogs/restore.rs     |  2 +-
 crates/workspace/src/dialogs/screening.rs   |  8 +-
 crates/workspace/src/dialogs/settings.rs    |  2 +-
 crates/workspace/src/lib.rs                 |  6 +-
 crates/workspace/src/panels/browse.rs       | 14 ++--
 crates/workspace/src/panels/contact_list.rs |  4 +-
 crates/workspace/src/panels/greeter.rs      |  2 +-
 crates/workspace/src/panels/inbox.rs        |  2 +-
 crates/workspace/src/panels/requests.rs     |  2 +-
 crates/workspace/src/panels/search.rs       |  4 +-
 crates/workspace/src/sidebar/group_view.rs  |  6 +-
 crates/workspace/src/sidebar/list.rs        |  8 +-
 crates/workspace/src/sidebar/mod.rs         |  4 +-
 crates/workspace/src/sidebar/rows.rs        | 14 ++--
 crates/workspace/src/sidebar/search.rs      |  2 +-
 48 files changed, 211 insertions(+), 222 deletions(-)

diff --git a/crates/chat_ui/src/lib.rs b/crates/chat_ui/src/lib.rs
index cbde582f..f2dbe945 100644
--- a/crates/chat_ui/src/lib.rs
+++ b/crates/chat_ui/src/lib.rs
@@ -904,7 +904,7 @@ impl ChatPanel {
                                 .h_10()
                                 .justify_center()
                                 .text_sm()
-                                .bg(cx.theme().elevated_surface_background)
+                                .bg(cx.theme().raised)
                                 .rounded(cx.theme().radius)
                                 .child("Message isn't traced yet"),
                         )
@@ -919,7 +919,7 @@ impl ChatPanel {
                                         .h_7()
                                         .px_2()
                                         .gap_2()
-                                        .bg(cx.theme().elevated_surface_background)
+                                        .bg(cx.theme().raised)
                                         .rounded(cx.theme().radius)
                                         .text_sm()
                                         .child(div().size_1p5().rounded_full().bg(gpui::green()))
@@ -951,7 +951,7 @@ impl ChatPanel {
                                 .h_7()
                                 .px_2()
                                 .gap_2()
-                                .bg(cx.theme().elevated_surface_background)
+                                .bg(cx.theme().raised)
                                 .rounded(cx.theme().radius)
                                 .text_sm()
                                 .child(div().size_1p5().rounded_full().bg(gpui::green()))
@@ -975,7 +975,7 @@ impl ChatPanel {
                 svg()
                     .path("brand/coop.svg")
                     .size_12()
-                    .text_color(cx.theme().ghost_element_background_alt),
+                    .text_color(cx.theme().raised),
             )
             .message(PRIVATE_NOTICE)
             .into_any_element()
@@ -991,13 +991,13 @@ impl ChatPanel {
             .justify_center()
             .text_center()
             .text_xs()
-            .text_color(cx.theme().text_placeholder)
+            .text_color(cx.theme().text_faint)
             .line_height(relative(1.3))
             .child(
                 svg()
                     .path("brand/coop.svg")
                     .size_12()
-                    .text_color(cx.theme().ghost_element_active),
+                    .text_color(cx.theme().active),
             )
             .child(PRIVATE_NOTICE)
             .into_any_element()
@@ -1020,8 +1020,8 @@ impl ChatPanel {
                             .size_8()
                             .justify_center()
                             .rounded_full()
-                            .bg(cx.theme().warning_background)
-                            .text_color(cx.theme().warning_foreground)
+                            .bg(cx.theme().warning_muted)
+                            .text_color(cx.theme().warning)
                             .child(Icon::new(IconName::Warning).small()),
                     )
                     .child(
@@ -1155,13 +1155,13 @@ impl ChatPanel {
             })
             .overlay(
                 div()
-                    .group_hover("", |this| this.bg(cx.theme().element_active))
+                    .group_hover("", |this| this.bg(cx.theme().hover))
                     .absolute()
                     .left_0()
                     .top_0()
                     .w(px(2.))
                     .h_full()
-                    .bg(cx.theme().border_transparent),
+                    .bg(gpui::transparent_black()),
             )
             .overlay(self.render_actions(&id, &pk, cx))
             .on_mouse_down(
@@ -1187,7 +1187,7 @@ impl ChatPanel {
             return div().child(
                 img(media[0].clone())
                     .border_1()
-                    .border_color(cx.theme().border_variant)
+                    .border_color(cx.theme().border)
                     .h(px(250.))
                     .object_fit(ObjectFit::Cover)
                     .rounded(cx.theme().radius),
@@ -1215,7 +1215,7 @@ impl ChatPanel {
                                 img(item.clone())
                                     .h_32()
                                     .border_1()
-                                    .border_color(cx.theme().border_variant)
+                                    .border_color(cx.theme().border)
                                     .rounded(cx.theme().radius),
                             ),
                     );
@@ -1244,7 +1244,7 @@ impl ChatPanel {
                     .w_full()
                     .px_2()
                     .border_l_2()
-                    .border_color(cx.theme().element_active)
+                    .border_color(cx.theme().accent.active)
                     .text_sm()
                     .child(div().font_semibold().child(author.name()))
                     .child(
@@ -1254,7 +1254,7 @@ impl ChatPanel {
                             .line_clamp(1)
                             .child(message.preview()),
                     )
-                    .hover(|this| this.bg(cx.theme().elevated_surface_background))
+                    .hover(|this| this.bg(cx.theme().hover))
                     .on_click({
                         let id = *id;
                         cx.listener(move |this, _event, _window, _cx| {
@@ -1294,9 +1294,9 @@ impl ChatPanel {
                     .text_xs()
                     .border_1()
                     .when(has_reacted, |this| {
-                        this.text_color(cx.theme().secondary_foreground)
-                            .bg(cx.theme().secondary_background)
-                            .border_color(cx.theme().secondary_active)
+                        this.text_color(cx.theme().accent.text_on_wash)
+                            .bg(cx.theme().accent.wash)
+                            .border_color(cx.theme().accent.selection)
                     })
                     .when(!has_reacted, |this| this.border_color(cx.theme().border))
                     .child(emoji)
@@ -1330,7 +1330,7 @@ impl ChatPanel {
         div()
             .id(SharedString::from(id.to_hex()))
             .child(label)
-            .when(failed, |this| this.text_color(cx.theme().text_danger))
+            .when(failed, |this| this.text_color(cx.theme().danger))
             .when_some(reports, |this, reports| {
                 this.when(!pending, |this| {
                     this.on_click(move |_e, window, cx| {
@@ -1386,8 +1386,8 @@ impl ChatPanel {
                         .w_full()
                         .text_sm()
                         .rounded(cx.theme().radius)
-                        .bg(cx.theme().warning_background)
-                        .text_color(cx.theme().warning_foreground)
+                        .bg(cx.theme().warning_muted)
+                        .text_color(cx.theme().warning)
                         .child(div().flex_1().w_full().text_center().child(error)),
                 )
             })
@@ -1406,7 +1406,7 @@ impl ChatPanel {
                                         .p_1()
                                         .w_full()
                                         .rounded(cx.theme().radius)
-                                        .bg(cx.theme().danger_background)
+                                        .bg(cx.theme().danger_muted)
                                         .child(
                                             div()
                                                 .text_xs()
@@ -1417,7 +1417,7 @@ impl ChatPanel {
                                         .child(
                                             div()
                                                 .text_xs()
-                                                .text_color(cx.theme().danger_foreground)
+                                                .text_color(cx.theme().danger)
                                                 .line_height(relative(1.25))
                                                 .child(SharedString::from(msg.to_string())),
                                         ),
@@ -1436,7 +1436,7 @@ impl ChatPanel {
                                         .p_1()
                                         .w_full()
                                         .rounded(cx.theme().radius)
-                                        .bg(cx.theme().elevated_surface_background)
+                                        .bg(cx.theme().raised)
                                         .child(
                                             div()
                                                 .text_xs()
@@ -1611,7 +1611,7 @@ impl ChatPanel {
                 .child(
                     img(path.clone())
                         .border_1()
-                        .border_color(cx.theme().border_variant)
+                        .border_color(cx.theme().border)
                         .h(px(250.))
                         .object_fit(ObjectFit::Cover)
                         .rounded(cx.theme().radius),
@@ -1645,9 +1645,9 @@ impl ChatPanel {
             .gap_2()
             .p_2()
             .border_1()
-            .border_color(cx.theme().border_variant)
+            .border_color(cx.theme().border)
             .rounded(cx.theme().radius)
-            .child(Icon::new(IconName::Lock).text_color(cx.theme().icon_accent))
+            .child(Icon::new(IconName::Lock).text_color(cx.theme().accent.primary))
             .child(
                 v_flex()
                     .min_w_0()
@@ -1657,7 +1657,7 @@ impl ChatPanel {
                     .child(
                         div()
                             .text_xs()
-                            .text_color(cx.theme().text_placeholder)
+                            .text_color(cx.theme().text_faint)
                             .child(label),
                     ),
             )
@@ -1700,8 +1700,8 @@ impl ChatPanel {
                             .justify_center()
                             .rounded(cx.theme().radius)
                             .border_1()
-                            .border_color(cx.theme().border_variant)
-                            .bg(cx.theme().surface_background)
+                            .border_color(cx.theme().border)
+                            .bg(cx.theme().shell)
                             .text_xs()
                             .text_center()
                             .child("Preview not available"),
@@ -1718,7 +1718,7 @@ impl ChatPanel {
                     .justify_center()
                     .rounded_full()
                     .border_1()
-                    .border_color(cx.theme().border_variant)
+                    .border_color(cx.theme().border)
                     .bg(gpui::green())
                     .child(Icon::new(IconName::Lock).size_2().text_color(gpui::white())),
             )
@@ -1753,7 +1753,7 @@ impl ChatPanel {
                 .w_full()
                 .pl_2()
                 .border_l_2()
-                .border_color(cx.theme().element_active)
+                .border_color(cx.theme().accent.active)
                 .child(
                     div()
                         .flex()
@@ -1769,7 +1769,7 @@ impl ChatPanel {
                                 .child("Replying to:")
                                 .child(
                                     div()
-                                        .text_color(cx.theme().text_accent)
+                                        .text_color(cx.theme().accent.primary)
                                         .child(profile.name()),
                                 ),
                         )
@@ -1994,7 +1994,7 @@ impl Render for ChatPanel {
                             div()
                                 .px_1()
                                 .text_xs()
-                                .text_color(cx.theme().text_warning)
+                                .text_color(cx.theme().warning)
                                 .child(WARNING),
                         )
                     })
diff --git a/crates/nip29_ui/src/details.rs b/crates/nip29_ui/src/details.rs
index c4271acb..9d23092d 100644
--- a/crates/nip29_ui/src/details.rs
+++ b/crates/nip29_ui/src/details.rs
@@ -78,7 +78,7 @@ fn body(group: &WeakEntity<Group>, cx: &App) -> AnyElement {
                 "Supported kinds",
                 if items.is_empty() {
                     div()
-                        .text_color(cx.theme().text_placeholder)
+                        .text_color(cx.theme().text_faint)
                         .child("None")
                         .into_any_element()
                 } else {
@@ -175,7 +175,7 @@ fn header(group: &Group, cx: &App) -> AnyElement {
                 .child(
                     div()
                         .text_xs()
-                        .text_color(cx.theme().text_placeholder)
+                        .text_color(cx.theme().text_faint)
                         .truncate()
                         .child(SharedString::from(format!(
                             "{} · {}",
@@ -239,7 +239,7 @@ fn chip(label: impl Into<SharedString>, cx: &App) -> AnyElement {
         .px_1p5()
         .py_0p5()
         .rounded(cx.theme().radius)
-        .bg(cx.theme().element_background)
+        .bg(cx.theme().accent.wash)
         .text_xs()
         .child(label.into())
         .into_any_element()
diff --git a/crates/nip29_ui/src/lib.rs b/crates/nip29_ui/src/lib.rs
index d56f1fec..b14b997d 100644
--- a/crates/nip29_ui/src/lib.rs
+++ b/crates/nip29_ui/src/lib.rs
@@ -622,7 +622,7 @@ impl GroupPanel {
             .child(
                 Icon::new(IconName::Info)
                     .small()
-                    .text_color(cx.theme().icon_muted),
+                    .text_color(cx.theme().text_faint),
             )
             .child(div().flex_1().min_w_0().truncate().child(message))
             .child(
@@ -662,7 +662,7 @@ impl GroupPanel {
                     .px_1p5()
                     .py_0p5()
                     .rounded(cx.theme().radius)
-                    .bg(cx.theme().element_background)
+                    .bg(cx.theme().accent.wash)
                     .text_xs()
                     .text_color(cx.theme().text_muted)
                     .child(pin_label(group, pin))
@@ -924,7 +924,7 @@ impl GroupPanel {
                     .h_8()
                     .px_2()
                     .border_1()
-                    .border_color(cx.theme().border_variant)
+                    .border_color(cx.theme().border)
                     .rounded(cx.theme().radius)
                     .text_xs()
                     .text_color(cx.theme().text_muted)
@@ -1034,7 +1034,7 @@ impl Render for GroupPanel {
                                         .size_full()
                                         .justify_center()
                                         .text_sm()
-                                        .text_color(cx.theme().text_placeholder)
+                                        .text_color(cx.theme().text_faint)
                                         .child("No messages yet")
                                         .into_any_element(),
                                 }),
diff --git a/crates/nip29_ui/src/message.rs b/crates/nip29_ui/src/message.rs
index 7bb3b0b2..fbe5b48c 100644
--- a/crates/nip29_ui/src/message.rs
+++ b/crates/nip29_ui/src/message.rs
@@ -141,7 +141,7 @@ pub(crate) fn render_activity(ix: usize, activity: &Activity, cx: &App) -> AnyEl
         .gap_2()
         .py_1()
         .px_3()
-        .hover(|this| this.bg(cx.theme().surface_background))
+        .hover(|this| this.bg(cx.theme().hover))
         .child(badge(activity, cx))
         .when(!hide_avatar, |this| {
             this.child(
@@ -164,7 +164,7 @@ pub(crate) fn render_activity(ix: usize, activity: &Activity, cx: &App) -> AnyEl
                 .min_w_0()
                 .truncate()
                 .text_sm()
-                .text_color(cx.theme().text_placeholder)
+                .text_color(cx.theme().text_faint)
                 .child(SharedString::from(action(activity))),
         )
         .child(
@@ -172,7 +172,7 @@ pub(crate) fn render_activity(ix: usize, activity: &Activity, cx: &App) -> AnyEl
                 .flex_shrink_0()
                 .ml_1()
                 .text_xs()
-                .text_color(cx.theme().text_placeholder)
+                .text_color(cx.theme().text_faint)
                 .child(activity.created_at.to_ago()),
         )
         .into_any_element()
@@ -180,11 +180,11 @@ pub(crate) fn render_activity(ix: usize, activity: &Activity, cx: &App) -> AnyEl
 
 fn badge(activity: &Activity, cx: &App) -> AnyElement {
     let (icon, color) = match activity.kind {
-        Kind::GroupJoinRequest => (IconName::Login, cx.theme().icon_accent),
-        Kind::GroupPutUser => (IconName::Login, cx.theme().icon_accent),
-        Kind::GroupLeaveRequest => (IconName::Logout, cx.theme().text_danger),
-        Kind::GroupRemoveUser => (IconName::Ban, cx.theme().text_danger),
-        _ => (IconName::Info, cx.theme().icon_muted),
+        Kind::GroupJoinRequest => (IconName::Login, cx.theme().accent.primary),
+        Kind::GroupPutUser => (IconName::Login, cx.theme().accent.primary),
+        Kind::GroupLeaveRequest => (IconName::Logout, cx.theme().danger),
+        Kind::GroupRemoveUser => (IconName::Ban, cx.theme().danger),
+        _ => (IconName::Info, cx.theme().text_faint),
     };
 
     h_flex()
@@ -211,7 +211,7 @@ fn media(media: &[SharedUri], cx: &App) -> AnyElement {
             .child(
                 img(only.clone())
                     .border_1()
-                    .border_color(cx.theme().border_variant)
+                    .border_color(cx.theme().border)
                     .h(px(250.))
                     .object_fit(ObjectFit::Cover)
                     .rounded(cx.theme().radius),
@@ -231,7 +231,7 @@ fn media(media: &[SharedUri], cx: &App) -> AnyElement {
                 img(item.clone())
                     .h_32()
                     .border_1()
-                    .border_color(cx.theme().border_variant)
+                    .border_color(cx.theme().border)
                     .rounded(cx.theme().radius),
             )
         }))
diff --git a/crates/nip4e/src/lib.rs b/crates/nip4e/src/lib.rs
index d4d27ae1..ca9f943c 100644
--- a/crates/nip4e/src/lib.rs
+++ b/crates/nip4e/src/lib.rs
@@ -748,7 +748,7 @@ impl DeviceRegistry {
                                             .w_full()
                                             .px_2()
                                             .rounded(cx.theme().radius)
-                                            .bg(cx.theme().elevated_surface_background)
+                                            .bg(cx.theme().raised)
                                             .child(
                                                 h_flex()
                                                     .gap_2()
@@ -778,7 +778,7 @@ impl DeviceRegistry {
                                             .w_full()
                                             .px_2()
                                             .rounded(cx.theme().radius)
-                                            .bg(cx.theme().elevated_surface_background)
+                                            .bg(cx.theme().raised)
                                             .child(code_label.clone()),
                                     ),
                             ),
diff --git a/crates/ui/src/avatar.rs b/crates/ui/src/avatar.rs
index 52e6f422..65e31273 100644
--- a/crates/ui/src/avatar.rs
+++ b/crates/ui/src/avatar.rs
@@ -424,7 +424,7 @@ impl InteractiveElement for Avatar {
 }
 
 impl RenderOnce for Avatar {
-    fn render(self, window: &mut Window, cx: &mut App) -> impl IntoElement {
+    fn render(self, window: &mut Window, _cx: &mut App) -> impl IntoElement {
         let border_width = if self.border_color.is_some() {
             px(2.)
         } else {
@@ -444,7 +444,7 @@ impl RenderOnce for Avatar {
                     .rounded_full()
                     .object_fit(ObjectFit::Cover)
                     .grayscale(grayscale)
-                    .bg(cx.theme().ghost_element_background)
+                    .bg(gpui::transparent_black())
                     .with_fallback(move || generated_avatar(seed.as_deref(), image_size))
                     .into_any_element()
             }
diff --git a/crates/ui/src/button.rs b/crates/ui/src/button.rs
index 5ed81266..0b9afc0b 100644
--- a/crates/ui/src/button.rs
+++ b/crates/ui/src/button.rs
@@ -24,10 +24,10 @@ pub struct ButtonCustomVariant {
 impl ButtonCustomVariant {
     pub fn new(_window: &Window, cx: &App) -> Self {
         Self {
-            color: cx.theme().element_background,
-            foreground: cx.theme().element_foreground,
-            hover: cx.theme().element_hover,
-            active: cx.theme().element_active,
+            color: cx.theme().accent.primary,
+            foreground: cx.theme().accent.on,
+            hover: cx.theme().accent.hover,
+            active: cx.theme().accent.active,
         }
     }
 
@@ -470,15 +470,15 @@ impl ButtonVariant {
 
     fn bg_color(&self, cx: &App) -> Hsla {
         match self {
-            ButtonVariant::Primary => cx.theme().element_background,
-            ButtonVariant::Secondary => cx.theme().secondary_background,
-            ButtonVariant::Danger => cx.theme().danger_background,
-            ButtonVariant::Warning => cx.theme().warning_background,
+            ButtonVariant::Primary => cx.theme().accent.primary,
+            ButtonVariant::Secondary => cx.theme().accent.wash,
+            ButtonVariant::Danger => cx.theme().danger,
+            ButtonVariant::Warning => cx.theme().warning,
             ButtonVariant::Ghost { alt } => {
                 if *alt {
-                    cx.theme().ghost_element_background_alt
+                    cx.theme().raised
                 } else {
-                    cx.theme().ghost_element_background
+                    gpui::transparent_black()
                 }
             }
             ButtonVariant::Custom(colors) => colors.color,
@@ -488,11 +488,11 @@ impl ButtonVariant {
 
     fn text_color(&self, cx: &App) -> Hsla {
         match self {
-            ButtonVariant::Primary => cx.theme().element_foreground,
-            ButtonVariant::Secondary => cx.theme().secondary_foreground,
-            ButtonVariant::Danger => cx.theme().danger_foreground,
-            ButtonVariant::Warning => cx.theme().warning_foreground,
-            ButtonVariant::Transparent => cx.theme().text_placeholder,
+            ButtonVariant::Primary => cx.theme().accent.on,
+            ButtonVariant::Secondary => cx.theme().accent.text_on_wash,
+            ButtonVariant::Danger => cx.theme().accent.on_danger,
+            ButtonVariant::Warning => cx.theme().accent.on_danger,
+            ButtonVariant::Transparent => cx.theme().text_faint,
             ButtonVariant::Ghost { alt } => {
                 if *alt {
                     cx.theme().text
@@ -506,19 +506,19 @@ impl ButtonVariant {
 
     fn hovered(&self, cx: &App) -> ButtonVariantStyle {
         let bg = match self {
-            ButtonVariant::Primary => cx.theme().element_hover,
-            ButtonVariant::Secondary => cx.theme().secondary_hover,
-            ButtonVariant::Danger => cx.theme().danger_hover,
-            ButtonVariant::Warning => cx.theme().warning_hover,
-            ButtonVariant::Ghost { .. } => cx.theme().ghost_element_hover,
+            ButtonVariant::Primary => cx.theme().accent.hover,
+            ButtonVariant::Secondary => cx.theme().accent.selection,
+            ButtonVariant::Danger => cx.theme().danger.opacity(0.15),
+            ButtonVariant::Warning => cx.theme().warning.opacity(0.15),
+            ButtonVariant::Ghost { .. } => cx.theme().hover,
             ButtonVariant::Transparent => gpui::transparent_black(),
             ButtonVariant::Custom(colors) => colors.hover,
         };
 
         let fg = match self {
-            ButtonVariant::Secondary => cx.theme().secondary_foreground,
+            ButtonVariant::Secondary => cx.theme().accent.text_on_wash,
             ButtonVariant::Ghost { .. } => cx.theme().text,
-            ButtonVariant::Transparent => cx.theme().text_placeholder,
+            ButtonVariant::Transparent => cx.theme().text_faint,
             _ => self.text_color(cx),
         };
 
@@ -527,18 +527,18 @@ impl ButtonVariant {
 
     fn active(&self, cx: &App) -> ButtonVariantStyle {
         let bg = match self {
-            ButtonVariant::Primary => cx.theme().element_active,
-            ButtonVariant::Secondary => cx.theme().secondary_active,
-            ButtonVariant::Danger => cx.theme().danger_active,
-            ButtonVariant::Warning => cx.theme().warning_active,
-            ButtonVariant::Ghost { .. } => cx.theme().ghost_element_active,
+            ButtonVariant::Primary => cx.theme().accent.active,
+            ButtonVariant::Secondary => cx.theme().accent.selection,
+            ButtonVariant::Danger => cx.theme().danger.opacity(0.25),
+            ButtonVariant::Warning => cx.theme().warning.opacity(0.25),
+            ButtonVariant::Ghost { .. } => cx.theme().active,
             ButtonVariant::Transparent => gpui::transparent_black(),
             ButtonVariant::Custom(colors) => colors.active,
         };
 
         let fg = match self {
-            ButtonVariant::Secondary => cx.theme().secondary_foreground,
-            ButtonVariant::Transparent => cx.theme().text_placeholder,
+            ButtonVariant::Secondary => cx.theme().accent.text_on_wash,
+            ButtonVariant::Transparent => cx.theme().text_faint,
             _ => self.text_color(cx),
         };
 
@@ -547,18 +547,18 @@ impl ButtonVariant {
 
     fn selected(&self, cx: &App) -> ButtonVariantStyle {
         let bg = match self {
-            ButtonVariant::Primary => cx.theme().element_selected,
-            ButtonVariant::Secondary => cx.theme().secondary_selected,
-            ButtonVariant::Danger => cx.theme().danger_selected,
-            ButtonVariant::Warning => cx.theme().warning_selected,
-            ButtonVariant::Ghost { .. } => cx.theme().ghost_element_selected,
+            ButtonVariant::Primary => cx.theme().accent.selected,
+            ButtonVariant::Secondary => cx.theme().accent.selection,
+            ButtonVariant::Danger => cx.theme().danger.opacity(0.25),
+            ButtonVariant::Warning => cx.theme().warning.opacity(0.25),
+            ButtonVariant::Ghost { .. } => cx.theme().active,
             ButtonVariant::Transparent => gpui::transparent_black(),
             ButtonVariant::Custom(colors) => colors.active,
         };
 
         let fg = match self {
-            ButtonVariant::Secondary => cx.theme().secondary_foreground,
-            ButtonVariant::Transparent => cx.theme().text_placeholder,
+            ButtonVariant::Secondary => cx.theme().accent.text_on_wash,
+            ButtonVariant::Transparent => cx.theme().text_faint,
             _ => self.text_color(cx),
         };
 
@@ -567,11 +567,11 @@ impl ButtonVariant {
 
     fn disabled(&self, cx: &App) -> ButtonVariantStyle {
         let bg = match self {
-            ButtonVariant::Danger => cx.theme().danger_disabled,
-            ButtonVariant::Warning => cx.theme().warning_disabled,
-            ButtonVariant::Ghost { .. } => cx.theme().ghost_element_disabled,
-            ButtonVariant::Secondary => cx.theme().secondary_disabled,
-            _ => cx.theme().element_disabled,
+            ButtonVariant::Danger => cx.theme().danger.opacity(0.12),
+            ButtonVariant::Warning => cx.theme().warning.opacity(0.12),
+            ButtonVariant::Ghost { .. } => cx.theme().border.opacity(0.4),
+            ButtonVariant::Secondary => cx.theme().accent.wash.opacity(0.5),
+            _ => cx.theme().accent.primary.opacity(0.3),
         };
 
         let fg = match self {
diff --git a/crates/ui/src/dialog.rs b/crates/ui/src/dialog.rs
index 16eeff21..4be3f73a 100644
--- a/crates/ui/src/dialog.rs
+++ b/crates/ui/src/dialog.rs
@@ -381,10 +381,10 @@ impl RenderOnce for Dialog {
                                         .icon(IconName::CloseCircleFill)
                                         .custom(
                                             ButtonCustomVariant::new(window, cx)
-                                                .foreground(cx.theme().icon_muted)
-                                                .color(cx.theme().ghost_element_background)
-                                                .hover(cx.theme().ghost_element_background)
-                                                .active(cx.theme().ghost_element_background),
+                                                .foreground(cx.theme().text_faint)
+                                                .color(gpui::transparent_black())
+                                                .hover(gpui::transparent_black())
+                                                .active(gpui::transparent_black()),
                                         )
                                         .on_click(move |_, window, cx| {
                                             on_cancel(&ClickEvent::default(), window, cx);
diff --git a/crates/ui/src/dock/mod.rs b/crates/ui/src/dock/mod.rs
index 3f2b6aab..3b12c1ed 100644
--- a/crates/ui/src/dock/mod.rs
+++ b/crates/ui/src/dock/mod.rs
@@ -446,7 +446,7 @@ impl TabGroupSkin {
             .flex_grow_1()
             .min_w_16()
             .when(droppable, |this| {
-                this.drag_over::<DragPanel>(|this, _, _, cx| this.bg(cx.theme().surface_background))
+                this.drag_over::<DragPanel>(|this, _, _, cx| this.bg(cx.theme().accent.selection))
                     .on_drop({
                         let group = TabGroupContext::clone(group);
                         move |drag: &DragPanel, window, cx| {
@@ -465,7 +465,7 @@ impl TabGroupSkin {
         let bar = TabBar::new("tab-bar")
             .track_scroll(&self.scroll_handle)
             .h(TABBAR_HEIGHT)
-            .bg(cx.theme().panel_background)
+            .bg(cx.theme().shell)
             .when(needs_traffic_light_padding, |this| {
                 this.pl(px(TRAFFIC_LIGHT_PADDING))
             })
@@ -567,7 +567,7 @@ impl TabGroupSkin {
             h_flex()
                 .h(TABBAR_HEIGHT)
                 .w_full()
-                .bg(cx.theme().panel_background)
+                .bg(cx.theme().shell)
                 .child(bar.flex_1())
                 .child(window_controls())
                 .into_any_element()
@@ -717,7 +717,7 @@ impl TabGroupRenderer for TabGroupSkin {
             .child(
                 div()
                     .size_full()
-                    .bg(cx.theme().panel_background)
+                    .bg(cx.theme().shell)
                     .overflow_hidden()
                     .child(panel.cached(StyleRefinement::default().v_flex().size_full())),
             )
@@ -760,8 +760,8 @@ impl TabGroupRenderer for TabGroupSkin {
                 .h(height)
                 .rounded(cx.theme().radius_lg)
                 .border_1()
-                .border_color(cx.theme().element_disabled)
-                .bg(cx.theme().drop_target_background)
+                .border_color(cx.theme().accent.primary.opacity(0.3))
+                .bg(cx.theme().accent.selection)
                 .into_any_element(),
         )
     }
diff --git a/crates/ui/src/group_box.rs b/crates/ui/src/group_box.rs
index 92696438..f4a0cca6 100644
--- a/crates/ui/src/group_box.rs
+++ b/crates/ui/src/group_box.rs
@@ -106,7 +106,7 @@ impl RenderOnce for GroupBox {
     fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {
         let (bg, has_paddings) = match self.variant {
             GroupBoxVariant::Normal => (None, false),
-            GroupBoxVariant::Fill => (Some(cx.theme().surface_background), true),
+            GroupBoxVariant::Fill => (Some(cx.theme().shell), true),
         };
 
         v_flex()
diff --git a/crates/ui/src/icon.rs b/crates/ui/src/icon.rs
index f0c3cb7e..46a53c0e 100644
--- a/crates/ui/src/icon.rs
+++ b/crates/ui/src/icon.rs
@@ -291,7 +291,7 @@ impl From<Icon> for AnyElement {
 
 impl Render for Icon {
     fn render(&mut self, window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
-        let text_color = self.text_color.unwrap_or_else(|| cx.theme().icon);
+        let text_color = self.text_color.unwrap_or_else(|| cx.theme().text_muted);
         let text_size = window.text_style().font_size.to_pixels(window.rem_size());
         let has_base_size = self.style.size.width.is_some() || self.style.size.height.is_some();
 
diff --git a/crates/ui/src/input/clear_button.rs b/crates/ui/src/input/clear_button.rs
index 511609c4..f220318f 100644
--- a/crates/ui/src/input/clear_button.rs
+++ b/crates/ui/src/input/clear_button.rs
@@ -11,5 +11,5 @@ pub(crate) fn clear_button(cx: &App) -> Button {
         .ghost()
         .xsmall()
         .tab_stop(false)
-        .text_color(cx.theme().icon_muted)
+        .text_color(cx.theme().text_faint)
 }
diff --git a/crates/ui/src/input/input.rs b/crates/ui/src/input/input.rs
index ac47efe3..666af7c8 100644
--- a/crates/ui/src/input/input.rs
+++ b/crates/ui/src/input/input.rs
@@ -16,9 +16,9 @@ use crate::{IconName, Selectable, Sizable, Size, StyleSized, StyledExt, h_flex,
 /// The background of an input frame, which reads muted while the input is disabled.
 fn input_background(disabled: bool, cx: &App) -> Hsla {
     if disabled {
-        cx.theme().surface_background
+        cx.theme().shell
     } else {
-        cx.theme().elevated_surface_background
+        cx.theme().input
     }
 }
 
@@ -32,9 +32,9 @@ fn input_editor_style(cx: &App) -> InputEditorStyle {
     InputEditorStyle {
         foreground: theme.text,
         muted_foreground: theme.text_muted,
-        background: theme.elevated_surface_background,
+        background: theme.input,
         border: theme.border,
-        selection: theme.selection,
+        selection: theme.accent.selection,
         caret: theme.cursor,
         ..InputEditorStyle::default()
     }
diff --git a/crates/ui/src/kbd.rs b/crates/ui/src/kbd.rs
index 1acb8c02..94e38caf 100644
--- a/crates/ui/src/kbd.rs
+++ b/crates/ui/src/kbd.rs
@@ -199,7 +199,7 @@ impl RenderOnce for Kbd {
             .border_1()
             .border_color(cx.theme().border)
             .text_color(cx.theme().text_muted)
-            .bg(cx.theme().surface_background)
+            .bg(cx.theme().shell)
             .py_0p5()
             .px_1()
             .min_w_5()
diff --git a/crates/ui/src/markdown.rs b/crates/ui/src/markdown.rs
index 2d19b2af..19830451 100644
--- a/crates/ui/src/markdown.rs
+++ b/crates/ui/src/markdown.rs
@@ -69,8 +69,8 @@ impl RenderedText {
                 TextViewStyle::default()
                     .with_foreground(theme.text)
                     .with_muted_foreground(theme.text_muted)
-                    .with_link(theme.text_accent)
-                    .with_code_background(theme.elevated_surface_background)
+                    .with_link(theme.accent.primary)
+                    .with_code_background(theme.raised)
                     .with_border(theme.border)
                     .with_code_block(code_block)
                     .with_dark(theme.is_dark()),
diff --git a/crates/ui/src/menu/menu_item.rs b/crates/ui/src/menu/menu_item.rs
index 7dcfafb7..09b2de5d 100644
--- a/crates/ui/src/menu/menu_item.rs
+++ b/crates/ui/src/menu/menu_item.rs
@@ -104,12 +104,12 @@ impl RenderOnce for MenuItemElement {
             })
             .when(!self.disabled, |this| {
                 this.group_hover(self.group_name, |this| {
-                    this.bg(cx.theme().secondary_background)
-                        .text_color(cx.theme().secondary_foreground)
+                    this.bg(cx.theme().accent.wash)
+                        .text_color(cx.theme().accent.text_on_wash)
                 })
                 .when(self.selected, |this| {
-                    this.bg(cx.theme().secondary_background)
-                        .text_color(cx.theme().secondary_foreground)
+                    this.bg(cx.theme().accent.selection)
+                        .text_color(cx.theme().accent.text_on_wash)
                 })
                 .when_some(self.on_click, |this, on_click| {
                     this.on_mouse_down(MouseButton::Left, move |_, _, cx| {
diff --git a/crates/ui/src/message.rs b/crates/ui/src/message.rs
index d408d1fa..dcbc2a9b 100644
--- a/crates/ui/src/message.rs
+++ b/crates/ui/src/message.rs
@@ -192,7 +192,7 @@ impl RenderOnce for MessageRow {
                                     h_flex()
                                         .gap_2()
                                         .text_sm()
-                                        .text_color(cx.theme().text_placeholder)
+                                        .text_color(cx.theme().text_faint)
                                         .when_some(author, |this, author| {
                                             this.child(div().font_semibold().child(author))
                                         })
@@ -212,7 +212,7 @@ impl RenderOnce for MessageRow {
             .when_some(on_double_click, |this, listener| {
                 this.on_double_click(listener)
             })
-            .hover(|this| this.bg(cx.theme().surface_background))
+            .hover(|this| this.bg(cx.theme().shell))
             .into_any_element()
     }
 }
@@ -315,7 +315,7 @@ impl RenderOnce for WelcomeMessage {
                         this.child(
                             div()
                                 .text_xs()
-                                .text_color(cx.theme().text_placeholder)
+                                .text_color(cx.theme().text_faint)
                                 .child(message),
                         )
                     }),
diff --git a/crates/ui/src/nav.rs b/crates/ui/src/nav.rs
index e3c47774..44404da5 100644
--- a/crates/ui/src/nav.rs
+++ b/crates/ui/src/nav.rs
@@ -126,10 +126,8 @@ impl RenderOnce for Nav {
                 )
                 .when(clickable, |this| {
                     this.cursor_pointer()
-                        .hover(|this| this.bg(cx.theme().ghost_element_hover))
-                        .when(self.selected, |this| {
-                            this.bg(cx.theme().ghost_element_active)
-                        })
+                        .hover(|this| this.bg(cx.theme().hover))
+                        .when(self.selected, |this| this.bg(cx.theme().active))
                 })
                 .when_some(self.on_click, |this, handler| {
                     this.on_click(move |event, window, cx| handler(event, window, cx))
diff --git a/crates/ui/src/nav_item.rs b/crates/ui/src/nav_item.rs
index f11a7d40..2c71045a 100644
--- a/crates/ui/src/nav_item.rs
+++ b/crates/ui/src/nav_item.rs
@@ -119,10 +119,8 @@ impl RenderOnce for NavItem {
             })
             .when(clickable, |this| {
                 this.cursor_pointer()
-                    .hover(|this| this.bg(cx.theme().ghost_element_hover))
-                    .when(self.selected, |this| {
-                        this.bg(cx.theme().ghost_element_active)
-                    })
+                    .hover(|this| this.bg(cx.theme().hover))
+                    .when(self.selected, |this| this.bg(cx.theme().active))
             })
             .when_some(self.on_click, |this, handler| {
                 this.on_click(move |event, window, cx| handler(event, window, cx))
diff --git a/crates/ui/src/notification.rs b/crates/ui/src/notification.rs
index 36256b8a..a6a42f65 100644
--- a/crates/ui/src/notification.rs
+++ b/crates/ui/src/notification.rs
@@ -43,16 +43,16 @@ impl NotificationKind {
         match self {
             Self::Info => Icon::new(IconName::Info)
                 .with_size(Size::Medium)
-                .text_color(cx.theme().icon),
+                .text_color(cx.theme().text_muted),
             Self::Success => Icon::new(IconName::CheckCircle)
                 .with_size(Size::Medium)
-                .text_color(cx.theme().icon_accent),
+                .text_color(cx.theme().accent.primary),
             Self::Warning => Icon::new(IconName::Warning)
                 .with_size(Size::Medium)
-                .text_color(cx.theme().text_warning),
+                .text_color(cx.theme().warning),
             Self::Error => Icon::new(IconName::CloseCircle)
                 .with_size(Size::Medium)
-                .text_color(cx.theme().danger_foreground),
+                .text_color(cx.theme().danger),
         }
     }
 }
@@ -300,12 +300,12 @@ impl Render for Notification {
         };
 
         let background = match self.kind {
-            Some(NotificationKind::Error) => cx.theme().danger_background,
-            _ => cx.theme().surface_background,
+            Some(NotificationKind::Error) => cx.theme().danger_muted,
+            _ => cx.theme().shell,
         };
 
         let text_color = match self.kind {
-            Some(NotificationKind::Error) => cx.theme().danger_foreground,
+            Some(NotificationKind::Error) => cx.theme().danger,
             _ => cx.theme().text,
         };
 
diff --git a/crates/ui/src/resizable/mod.rs b/crates/ui/src/resizable/mod.rs
index b68bacab..1c69ef33 100644
--- a/crates/ui/src/resizable/mod.rs
+++ b/crates/ui/src/resizable/mod.rs
@@ -12,7 +12,7 @@ pub(crate) fn resize_handle_appearance() -> ResizeHandleRenderer {
     Rc::new(
         |context: &ResizeHandleContext, _: &mut Window, cx: &mut App| {
             let color = if context.is_active() {
-                cx.theme().border_selected
+                cx.theme().accent.primary
             } else {
                 cx.theme().border
             };
@@ -20,7 +20,7 @@ pub(crate) fn resize_handle_appearance() -> ResizeHandleRenderer {
 
             Some(
                 div()
-                    .bg(cx.theme().border_variant)
+                    .bg(cx.theme().border)
                     .group_hover("handle", move |this| this.bg(color))
                     .when(axis.is_horizontal(), |this| this.h_full().w(HANDLE_SIZE))
                     .when(axis.is_vertical(), |this| this.w_full().h(HANDLE_SIZE))
diff --git a/crates/ui/src/root.rs b/crates/ui/src/root.rs
index 596ed318..ec58a577 100644
--- a/crates/ui/src/root.rs
+++ b/crates/ui/src/root.rs
@@ -381,7 +381,7 @@ impl Render for Root {
                     })
                     .size_full()
                     .font_family(font_family)
-                    .bg(cx.theme().surface_background)
+                    .bg(cx.theme().shell)
                     .text_color(cx.theme().text)
                     .child(TextSelectionLayer)
                     .child(self.view.clone()),
diff --git a/crates/ui/src/scroll/scrollable.rs b/crates/ui/src/scroll/scrollable.rs
index 4ff97f84..c8439d8b 100644
--- a/crates/ui/src/scroll/scrollable.rs
+++ b/crates/ui/src/scroll/scrollable.rs
@@ -57,14 +57,14 @@ fn scrollbar<H: ScrollbarHandle + Clone>(
         styles
             .track(|track| {
                 track
-                    .bg(theme.scrollbar_track_background)
-                    .border_color(theme.scrollbar_thumb_border)
+                    .bg(gpui::transparent_black())
+                    .border_color(gpui::transparent_black())
                     .width(px(10.))
             })
-            .track_hover(|track| track.bg(theme.scrollbar_thumb_background).width(px(10.)))
+            .track_hover(|track| track.bg(theme.border.opacity(0.7)).width(px(10.)))
             .thumb(|thumb| {
                 thumb
-                    .bg(theme.scrollbar_thumb_background)
+                    .bg(theme.border.opacity(0.7))
                     .width(thumb_width)
                     .inset(px(1.))
                     .radius(thumb_radius)
@@ -72,14 +72,14 @@ fn scrollbar<H: ScrollbarHandle + Clone>(
             })
             .thumb_hover(|thumb| {
                 thumb
-                    .bg(theme.scrollbar_thumb_hover_background)
+                    .bg(theme.border_strong)
                     .width(px(8.))
                     .inset(px(1.))
                     .radius(px(4.))
             })
             .thumb_active(|thumb| {
                 thumb
-                    .bg(theme.scrollbar_thumb_hover_background)
+                    .bg(theme.border_strong)
                     .width(px(8.))
                     .inset(px(1.))
                     .radius(px(4.))
diff --git a/crates/ui/src/styled.rs b/crates/ui/src/styled.rs
index 54028cdd..808b9e5a 100644
--- a/crates/ui/src/styled.rs
+++ b/crates/ui/src/styled.rs
@@ -15,7 +15,7 @@ pub fn v_flex() -> Div {
 
 /// Returns a `Div` as divider.
 pub fn divider(cx: &App) -> Div {
-    div().my_1().w_full().h_px().bg(cx.theme().border_variant)
+    div().my_1().w_full().h_px().bg(cx.theme().border)
 }
 
 macro_rules! font_weight {
diff --git a/crates/ui/src/switch.rs b/crates/ui/src/switch.rs
index c570c8af..47acb2cc 100644
--- a/crates/ui/src/switch.rs
+++ b/crates/ui/src/switch.rs
@@ -85,8 +85,8 @@ impl RenderOnce for Switch {
         let on_click = self.on_click.clone();
 
         let (bg, toggle_bg) = match checked {
-            true => (cx.theme().element_background, white()),
-            false => (cx.theme().elevated_surface_background, white()),
+            true => (cx.theme().accent.primary, white()),
+            false => (cx.theme().raised, white()),
         };
 
         let (bg, toggle_bg) = match self.disabled {
@@ -155,7 +155,7 @@ impl RenderOnce for Switch {
                                 .flex()
                                 .items_center()
                                 .border(inset)
-                                .border_color(cx.theme().border_transparent)
+                                .border_color(gpui::transparent_black())
                                 .bg(bg)
                                 .when(!self.disabled, |this| this.cursor_pointer())
                                 .child(
diff --git a/crates/ui/src/tab/mod.rs b/crates/ui/src/tab/mod.rs
index 3f57c675..69db5694 100644
--- a/crates/ui/src/tab/mod.rs
+++ b/crates/ui/src/tab/mod.rs
@@ -193,9 +193,9 @@ impl RenderOnce for Tab {
         let foreground = if disabled {
             cx.theme().text_muted
         } else if selected {
-            cx.theme().tab_active_foreground
+            cx.theme().text
         } else {
-            cx.theme().tab_foreground
+            cx.theme().text_muted
         };
 
         let content = h_flex()
@@ -227,11 +227,11 @@ impl RenderOnce for Tab {
                     .h_6()
                     .rounded(cx.theme().radius)
                     .when(selected && !disabled, |this| {
-                        this.bg(cx.theme().tab_active_background)
+                        this.bg(cx.theme().background)
                             .when(cx.theme().shadow, |this| this.shadow_sm())
                     })
                     .when(!selected && !disabled, |this| {
-                        this.hover(|this| this.bg(cx.theme().tab_hover_background))
+                        this.hover(|this| this.bg(cx.theme().hover))
                     })
             })
             .when(!segmented, |this| {
@@ -243,14 +243,9 @@ impl RenderOnce for Tab {
                     .text_sm()
                     .rounded(cx.theme().radius)
                     .overflow_hidden()
-                    .when(selected && !disabled, |this| {
-                        this.bg(cx.theme().tab_background)
-                    })
+                    .when(selected && !disabled, |this| this.bg(cx.theme().shell))
                     .when(!selected && !disabled, |this| {
-                        this.hover(|this| {
-                            this.bg(cx.theme().tab_hover_background)
-                                .text_color(cx.theme().tab_active_foreground)
-                        })
+                        this.hover(|this| this.bg(cx.theme().hover).text_color(cx.theme().text))
                     })
             })
             .when_some(prefix, |this, prefix| this.child(prefix))
diff --git a/crates/ui/src/tab/tab_bar.rs b/crates/ui/src/tab/tab_bar.rs
index 24b0b8b9..8799c215 100644
--- a/crates/ui/src/tab/tab_bar.rs
+++ b/crates/ui/src/tab/tab_bar.rs
@@ -124,9 +124,7 @@ impl RenderOnce for TabBar {
             .min_w_0()
             .refine_style(&self.style)
             .when(segmented, |this| {
-                this.bg(cx.theme().tab_background)
-                    .p_0p5()
-                    .rounded(cx.theme().radius)
+                this.bg(cx.theme().shell).p_0p5().rounded(cx.theme().radius)
             })
             .when_some(self.prefix, |this, prefix| this.child(prefix))
             .child(
diff --git a/crates/ui/src/title_bar.rs b/crates/ui/src/title_bar.rs
index 6829524f..74f4424e 100644
--- a/crates/ui/src/title_bar.rs
+++ b/crates/ui/src/title_bar.rs
@@ -79,7 +79,7 @@ impl ControlIcon {
     #[inline]
     fn hover_fg(&self, cx: &App) -> Hsla {
         if self.is_close() {
-            cx.theme().danger_foreground
+            cx.theme().danger
         } else {
             cx.theme().text
         }
@@ -88,18 +88,18 @@ impl ControlIcon {
     #[inline]
     fn hover_bg(&self, cx: &App) -> Hsla {
         if self.is_close() {
-            cx.theme().danger_background
+            cx.theme().danger_muted
         } else {
-            cx.theme().ghost_element_hover
+            cx.theme().hover
         }
     }
 
     #[inline]
     fn active_bg(&self, cx: &mut App) -> Hsla {
         if self.is_close() {
-            cx.theme().danger_active
+            cx.theme().danger.opacity(0.25)
         } else {
-            cx.theme().ghost_element_active
+            cx.theme().active
         }
     }
 }
diff --git a/crates/ui/src/tooltip.rs b/crates/ui/src/tooltip.rs
index e6dcc4aa..ce93a4f3 100644
--- a/crates/ui/src/tooltip.rs
+++ b/crates/ui/src/tooltip.rs
@@ -25,7 +25,7 @@ impl Render for Tooltip {
                 .p_1p5()
                 .border_1()
                 .border_color(cx.theme().border)
-                .bg(cx.theme().surface_background)
+                .bg(cx.theme().shell)
                 .when(cx.theme().shadow, |this| this.shadow_sm())
                 .rounded(cx.theme().radius)
                 .text_xs()
diff --git a/crates/workspace/src/dialogs/import.rs b/crates/workspace/src/dialogs/import.rs
index 20a0963c..e2d713ec 100644
--- a/crates/workspace/src/dialogs/import.rs
+++ b/crates/workspace/src/dialogs/import.rs
@@ -255,7 +255,7 @@ impl Render for ImportIdentity {
                         this.child(
                             div()
                                 .text_xs()
-                                .text_color(cx.theme().text_warning)
+                                .text_color(cx.theme().warning)
                                 .child(div().child(BUNKER_WARN)),
                         )
                     })
@@ -263,7 +263,7 @@ impl Render for ImportIdentity {
                         this.child(
                             div()
                                 .text_xs()
-                                .text_color(cx.theme().text_warning)
+                                .text_color(cx.theme().warning)
                                 .child(div().child(KEY_WARN)),
                         )
                     }),
@@ -297,7 +297,7 @@ impl Render for ImportIdentity {
                     div()
                         .text_xs()
                         .text_center()
-                        .text_color(cx.theme().text_danger)
+                        .text_color(cx.theme().danger)
                         .child(error.clone()),
                 )
             })
diff --git a/crates/workspace/src/dialogs/new_chat.rs b/crates/workspace/src/dialogs/new_chat.rs
index 8ff55b80..350ae2b9 100644
--- a/crates/workspace/src/dialogs/new_chat.rs
+++ b/crates/workspace/src/dialogs/new_chat.rs
@@ -380,9 +380,9 @@ impl NewChat {
                     .gap_1()
                     .p_0p5()
                     .rounded_full()
-                    .bg(cx.theme().ghost_element_background_alt)
+                    .bg(cx.theme().raised)
                     .text_size(px(10.))
-                    .hover(|this| this.bg(cx.theme().ghost_element_hover))
+                    .hover(|this| this.bg(cx.theme().hover))
                     .child(
                         Avatar::from_source(profile.avatar())
                             .seed(profile.avatar_seed())
@@ -430,14 +430,14 @@ impl Render for NewChat {
                     this.child(
                         div()
                             .text_xs()
-                            .text_color(cx.theme().text_danger)
+                            .text_color(cx.theme().danger)
                             .child(error),
                     )
                 } else {
                     this.child(
                         div()
                             .text_xs()
-                            .text_color(cx.theme().text_placeholder)
+                            .text_color(cx.theme().text_faint)
                             .child(notice),
                     )
                 }
diff --git a/crates/workspace/src/dialogs/profile.rs b/crates/workspace/src/dialogs/profile.rs
index aca079b9..8399046b 100644
--- a/crates/workspace/src/dialogs/profile.rs
+++ b/crates/workspace/src/dialogs/profile.rs
@@ -366,7 +366,7 @@ impl Render for ProfileDialog {
                     .w_full()
                     .items_center()
                     .justify_center()
-                    .bg(cx.theme().surface_background)
+                    .bg(cx.theme().shell)
                     .child(Avatar::new(avatar).seed(profile.avatar_seed()).large())
                     .when(self.editing, |this| {
                         this.child(
@@ -392,7 +392,7 @@ impl Render for ProfileDialog {
                         .justify_center()
                         .gap_3()
                         .rounded(cx.theme().radius)
-                        .bg(cx.theme().surface_background)
+                        .bg(cx.theme().shell)
                         .text_sm()
                         .child(shorten_pkey)
                         .child(
diff --git a/crates/workspace/src/dialogs/relays.rs b/crates/workspace/src/dialogs/relays.rs
index 6223c026..1ae080f5 100644
--- a/crates/workspace/src/dialogs/relays.rs
+++ b/crates/workspace/src/dialogs/relays.rs
@@ -154,7 +154,7 @@ impl RelayManager {
                     div()
                         .italic()
                         .text_xs()
-                        .text_color(cx.theme().text_danger)
+                        .text_color(cx.theme().danger)
                         .child(error.clone()),
                 )
             })
@@ -225,7 +225,7 @@ impl RelayManager {
                     div()
                         .italic()
                         .text_xs()
-                        .text_color(cx.theme().text_danger)
+                        .text_color(cx.theme().danger)
                         .child(error.clone()),
                 )
             })
@@ -647,7 +647,7 @@ fn relay_row(
         .px_2()
         .justify_between()
         .rounded(cx.theme().radius)
-        .bg(cx.theme().surface_background)
+        .bg(cx.theme().shell)
         .child(
             h_flex()
                 .gap_1()
diff --git a/crates/workspace/src/dialogs/restore.rs b/crates/workspace/src/dialogs/restore.rs
index 5511c909..e46a9ca7 100644
--- a/crates/workspace/src/dialogs/restore.rs
+++ b/crates/workspace/src/dialogs/restore.rs
@@ -122,7 +122,7 @@ impl Render for RestoreEncryption {
                     div()
                         .text_xs()
                         .text_center()
-                        .text_color(cx.theme().text_danger)
+                        .text_color(cx.theme().danger)
                         .child(error.clone()),
                 )
             })
diff --git a/crates/workspace/src/dialogs/screening.rs b/crates/workspace/src/dialogs/screening.rs
index 8a61cfd6..97940d76 100644
--- a/crates/workspace/src/dialogs/screening.rs
+++ b/crates/workspace/src/dialogs/screening.rs
@@ -294,7 +294,7 @@ impl Screening {
                                     .gap_1p5()
                                     .rounded(cx.theme().radius)
                                     .text_sm()
-                                    .hover(|this| this.bg(cx.theme().elevated_surface_background))
+                                    .hover(|this| this.bg(cx.theme().raised))
                                     .child(Avatar::new(profile.avatar()).small())
                                     .child(profile.name()),
                             );
@@ -353,7 +353,7 @@ impl Render for Screening {
                             .h_7()
                             .justify_center()
                             .rounded_full()
-                            .bg(cx.theme().elevated_surface_background)
+                            .bg(cx.theme().raised)
                             .text_sm()
                             .truncate()
                             .text_ellipsis()
@@ -533,9 +533,9 @@ fn status_badge(status: Option<bool>, cx: &App) -> Div {
             if let Some(status) = status {
                 this.child(Icon::new(IconName::CheckCircle).small().text_color({
                     if status {
-                        cx.theme().icon_accent
+                        cx.theme().accent.primary
                     } else {
-                        cx.theme().icon_muted
+                        cx.theme().text_faint
                     }
                 }))
             } else {
diff --git a/crates/workspace/src/dialogs/settings.rs b/crates/workspace/src/dialogs/settings.rs
index eff81226..08e814dc 100644
--- a/crates/workspace/src/dialogs/settings.rs
+++ b/crates/workspace/src/dialogs/settings.rs
@@ -203,7 +203,7 @@ impl Render for Preferences {
                                 div()
                                     .text_size(px(10.))
                                     .italic()
-                                    .text_color(cx.theme().text_placeholder)
+                                    .text_color(cx.theme().text_faint)
                                     .child(SharedString::from("Only support blossom service")),
                             ),
                     ),
diff --git a/crates/workspace/src/lib.rs b/crates/workspace/src/lib.rs
index 073298db..9826369c 100644
--- a/crates/workspace/src/lib.rs
+++ b/crates/workspace/src/lib.rs
@@ -439,7 +439,7 @@ impl Workspace {
                         .child(
                             div()
                                 .italic()
-                                .text_color(cx.theme().text_danger)
+                                .text_color(cx.theme().danger)
                                 .child(SharedString::from(ENC_WARN)),
                         ),
                 )
@@ -487,8 +487,8 @@ impl Workspace {
                                 .w_full()
                                 .justify_between()
                                 .rounded(cx.theme().radius)
-                                .bg(cx.theme().ghost_element_background)
-                                .hover(|this| this.bg(cx.theme().ghost_element_hover))
+                                .bg(gpui::transparent_black())
+                                .hover(|this| this.bg(cx.theme().hover))
                                 .child(
                                     h_flex()
                                         .gap_1p5()
diff --git a/crates/workspace/src/panels/browse.rs b/crates/workspace/src/panels/browse.rs
index fc8fe888..5bce875d 100644
--- a/crates/workspace/src/panels/browse.rs
+++ b/crates/workspace/src/panels/browse.rs
@@ -295,7 +295,7 @@ impl BrowsePanel {
                     .max_w_64()
                     .px_1()
                     .rounded(cx.theme().radius)
-                    .bg(cx.theme().surface_background)
+                    .bg(cx.theme().shell)
                     .child(
                         Input::new(&self.input)
                             .appearance(false)
@@ -378,11 +378,11 @@ impl BrowsePanel {
             .rounded(cx.theme().radius)
             .cursor_pointer()
             .border_1()
-            .border_color(cx.theme().border_transparent)
-            .bg(cx.theme().surface_background)
+            .border_color(gpui::transparent_black())
+            .bg(cx.theme().shell)
             .hover(|this| {
-                this.bg(cx.theme().elevated_surface_background)
-                    .border_color(cx.theme().border_focused)
+                this.bg(cx.theme().raised)
+                    .border_color(cx.theme().accent.primary)
             })
             .child(
                 v_flex()
@@ -414,7 +414,7 @@ impl BrowsePanel {
                                         div()
                                             .truncate()
                                             .text_xs()
-                                            .text_color(cx.theme().text_placeholder)
+                                            .text_color(cx.theme().text_faint)
                                             .child(relay),
                                     ),
                             ),
@@ -467,7 +467,7 @@ impl Panel for BrowsePanel {
             .child(
                 Icon::new(IconName::Compass)
                     .small()
-                    .text_color(cx.theme().icon_muted),
+                    .text_color(cx.theme().text_faint),
             )
             .child(TITLE)
             .into_any_element()
diff --git a/crates/workspace/src/panels/contact_list.rs b/crates/workspace/src/panels/contact_list.rs
index d3f34f37..9334b4a9 100644
--- a/crates/workspace/src/panels/contact_list.rs
+++ b/crates/workspace/src/panels/contact_list.rs
@@ -234,7 +234,7 @@ impl ContactListPanel {
                     .px_2()
                     .justify_between()
                     .rounded(cx.theme().radius)
-                    .hover(|this| this.bg(cx.theme().ghost_element_hover))
+                    .hover(|this| this.bg(cx.theme().hover))
                     .child(
                         h_flex()
                             .gap_2()
@@ -343,7 +343,7 @@ impl Render for ContactListPanel {
                                     div()
                                         .italic()
                                         .text_xs()
-                                        .text_color(cx.theme().text_danger)
+                                        .text_color(cx.theme().danger)
                                         .child(error.clone()),
                                 )
                             }),
diff --git a/crates/workspace/src/panels/greeter.rs b/crates/workspace/src/panels/greeter.rs
index 23f4acb1..88f22a38 100644
--- a/crates/workspace/src/panels/greeter.rs
+++ b/crates/workspace/src/panels/greeter.rs
@@ -91,7 +91,7 @@ impl Render for GreeterPanel {
                                 svg()
                                     .path("brand/coop.svg")
                                     .size_12()
-                                    .text_color(cx.theme().icon_muted),
+                                    .text_color(cx.theme().text_faint),
                             )
                             .child(
                                 v_flex()
diff --git a/crates/workspace/src/panels/inbox.rs b/crates/workspace/src/panels/inbox.rs
index 84d83b8e..8e4180c3 100644
--- a/crates/workspace/src/panels/inbox.rs
+++ b/crates/workspace/src/panels/inbox.rs
@@ -35,7 +35,7 @@ impl Panel for InboxPanel {
             .child(
                 Icon::new(IconName::Inbox)
                     .small()
-                    .text_color(cx.theme().icon_muted),
+                    .text_color(cx.theme().text_faint),
             )
             .child(self.name.clone())
             .into_any_element()
diff --git a/crates/workspace/src/panels/requests.rs b/crates/workspace/src/panels/requests.rs
index cbb67c9d..63ea80dd 100644
--- a/crates/workspace/src/panels/requests.rs
+++ b/crates/workspace/src/panels/requests.rs
@@ -35,7 +35,7 @@ impl Panel for RequestsPanel {
             .child(
                 Icon::new(IconName::Invite)
                     .small()
-                    .text_color(cx.theme().icon_muted),
+                    .text_color(cx.theme().text_faint),
             )
             .child(self.name.clone())
             .into_any_element()
diff --git a/crates/workspace/src/panels/search.rs b/crates/workspace/src/panels/search.rs
index 056fbb0e..3a140974 100644
--- a/crates/workspace/src/panels/search.rs
+++ b/crates/workspace/src/panels/search.rs
@@ -437,7 +437,7 @@ impl Panel for SearchPanel {
             .child(
                 Icon::new(IconName::Search)
                     .small()
-                    .text_color(cx.theme().icon_muted),
+                    .text_color(cx.theme().text_faint),
             )
             .child(self.name.clone())
             .into_any_element()
@@ -500,7 +500,7 @@ impl Render for SearchPanel {
                                 .gap_1()
                                 .flex_1()
                                 .border_b_1()
-                                .border_color(cx.theme().border_variant)
+                                .border_color(cx.theme().border)
                                 .child(
                                     h_flex()
                                         .gap_0p5()
diff --git a/crates/workspace/src/sidebar/group_view.rs b/crates/workspace/src/sidebar/group_view.rs
index bde29a49..3ba37476 100644
--- a/crates/workspace/src/sidebar/group_view.rs
+++ b/crates/workspace/src/sidebar/group_view.rs
@@ -230,10 +230,10 @@ impl Sidebar {
 
         Nav::new(label)
             .label(label)
-            .suffix(Icon::new(icon).small().text_color(cx.theme().icon_muted))
+            .suffix(Icon::new(icon).small().text_color(cx.theme().text_faint))
             .text_xs()
             .font_semibold()
-            .text_color(cx.theme().text_placeholder)
+            .text_color(cx.theme().text_faint)
             .on_click(cx.listener(move |this, _event, _window, cx| {
                 match section {
                     GroupSection::Admins => this.admins_open = !this.admins_open,
@@ -277,7 +277,7 @@ impl Sidebar {
                     div()
                         .truncate()
                         .text_xs()
-                        .text_color(cx.theme().text_placeholder)
+                        .text_color(cx.theme().text_faint)
                         .child(SharedString::from(roles.join(", "))),
                 )
             })
diff --git a/crates/workspace/src/sidebar/list.rs b/crates/workspace/src/sidebar/list.rs
index d8c8acf2..fcd670d4 100644
--- a/crates/workspace/src/sidebar/list.rs
+++ b/crates/workspace/src/sidebar/list.rs
@@ -89,7 +89,7 @@ impl Sidebar {
                                                 .text_color(cx.theme().text_muted)
                                                 .text_center()
                                                 .rounded(cx.theme().radius)
-                                                .bg(cx.theme().elevated_surface_background)
+                                                .bg(cx.theme().raised)
                                                 .child(SharedString::from(
                                                     request_count.to_string(),
                                                 )),
@@ -102,7 +102,7 @@ impl Sidebar {
                                 )
                             })
                             .when(requests_open, |this| {
-                                this.bg(cx.theme().ghost_element_active)
+                                this.bg(cx.theme().active)
                             })
                             .on_click(cx.listener(|this, _event, _window, cx| {
                                 this.toggle_requests(cx);
@@ -111,7 +111,7 @@ impl Sidebar {
                     .child(
                         NavItem::new("contacts", "Contacts", Icon::new(IconName::Book).small())
                             .when(contacts_open, |this| {
-                                this.bg(cx.theme().ghost_element_active)
+                                this.bg(cx.theme().active)
                             })
                             .on_click(cx.listener(|this, _event, window, cx| {
                                 this.toggle_contacts(window, cx);
@@ -124,7 +124,7 @@ impl Sidebar {
                         .px_4()
                         .text_xs()
                         .font_semibold()
-                        .text_color(cx.theme().text_placeholder)
+                        .text_color(cx.theme().text_faint)
                         .child(list_title),
                 )
             })
diff --git a/crates/workspace/src/sidebar/mod.rs b/crates/workspace/src/sidebar/mod.rs
index e7fa4d15..d29aff44 100644
--- a/crates/workspace/src/sidebar/mod.rs
+++ b/crates/workspace/src/sidebar/mod.rs
@@ -277,7 +277,7 @@ impl Render for Sidebar {
             .size_full()
             .relative()
             .gap_2()
-            .bg(cx.theme().surface_background)
+            .bg(cx.theme().shell)
             .when_some(current_user.as_ref(), |this, current_user| {
                 this.child(title_bar_drag_handlers(
                     self.render_user(current_user, cx),
@@ -336,7 +336,7 @@ impl Render for Sidebar {
                                 .text_xs()
                                 .font_semibold()
                                 .text_color(cx.theme().text_muted)
-                                .child(Indicator::new().small().color(cx.theme().icon_accent))
+                                .child(Indicator::new().small().color(cx.theme().accent.primary))
                                 .child("Getting messages..."),
                         ),
                 )
diff --git a/crates/workspace/src/sidebar/rows.rs b/crates/workspace/src/sidebar/rows.rs
index 7fc64d65..5f0ca07a 100644
--- a/crates/workspace/src/sidebar/rows.rs
+++ b/crates/workspace/src/sidebar/rows.rs
@@ -89,10 +89,10 @@ impl Sidebar {
 
                         Nav::new(label)
                             .label(label)
-                            .suffix(Icon::new(icon).small().text_color(cx.theme().icon_muted))
+                            .suffix(Icon::new(icon).small().text_color(cx.theme().text_faint))
                             .text_xs()
                             .font_semibold()
-                            .text_color(cx.theme().text_placeholder)
+                            .text_color(cx.theme().text_faint)
                             .on_click(cx.listener(move |this, _event, _window, cx| {
                                 match section {
                                     ListSection::Pins => this.pins_open = !this.pins_open,
@@ -114,7 +114,7 @@ impl Sidebar {
                             .label(label)
                             .text_xs()
                             .font_semibold()
-                            .text_color(cx.theme().text_placeholder)
+                            .text_color(cx.theme().text_faint)
                             .into_any_element()
                     }
                     SidebarRow::Empty(text) => v_flex()
@@ -132,7 +132,7 @@ impl Sidebar {
                                 .border_color(cx.theme().border)
                                 .rounded(cx.theme().radius)
                                 .text_xs()
-                                .text_color(cx.theme().text_placeholder)
+                                .text_color(cx.theme().text_faint)
                                 .child(*text),
                         )
                         .into_any_element(),
@@ -162,7 +162,7 @@ impl Sidebar {
                                 div()
                                     .font_normal()
                                     .text_xs()
-                                    .text_color(cx.theme().text_placeholder)
+                                    .text_color(cx.theme().text_faint)
                                     .child(created_at),
                             )
                             .on_click(move |_event, window, cx| {
@@ -279,7 +279,7 @@ impl Sidebar {
                                     div()
                                         .font_normal()
                                         .text_xs()
-                                        .text_color(cx.theme().text_placeholder)
+                                        .text_color(cx.theme().text_faint)
                                         .child(suffix),
                                 )
                             })
@@ -353,7 +353,7 @@ impl Sidebar {
                                 div()
                                     .font_normal()
                                     .text_xs()
-                                    .text_color(cx.theme().text_placeholder)
+                                    .text_color(cx.theme().text_faint)
                                     .child(detail),
                             )
                             .on_click(move |_event, window, cx| {
diff --git a/crates/workspace/src/sidebar/search.rs b/crates/workspace/src/sidebar/search.rs
index 5724ce1d..4ab5e454 100644
--- a/crates/workspace/src/sidebar/search.rs
+++ b/crates/workspace/src/sidebar/search.rs
@@ -202,7 +202,7 @@ impl Sidebar {
                     .gap_1()
                     .w_full()
                     .rounded(cx.theme().radius)
-                    .bg(cx.theme().elevated_surface_background)
+                    .bg(cx.theme().raised)
                     .child(
                         Input::new(&self.find_input)
                             .appearance(false)