From e8b34ae69ec014dab12fa5380fdefcbda0ec0df8 Mon Sep 17 00:00:00 2001
From: reya <reya@lume.nu>
Date: Tue, 14 Jan 2025 12:08:06 +0700
Subject: [PATCH] wip: design

---
 Cargo.lock                                   | 102 ++++++----
 crates/app/src/views/account.rs              |   5 +-
 crates/app/src/views/app.rs                  |   4 +-
 crates/app/src/views/sidebar/contact_list.rs |   6 +-
 crates/app/src/views/sidebar/inbox.rs        |  24 ++-
 crates/app/src/views/sidebar/mod.rs          |   2 +-
 crates/ui/src/badge.rs                       |   4 +-
 crates/ui/src/button.rs                      |  81 +++-----
 crates/ui/src/button_group.rs                |   1 -
 crates/ui/src/checkbox.rs                    |   4 +-
 crates/ui/src/context_menu.rs                |   6 +-
 crates/ui/src/dock/mod.rs                    |   5 +-
 crates/ui/src/dock/tab_panel.rs              |  44 +++--
 crates/ui/src/dropdown.rs                    |  15 +-
 crates/ui/src/input/element.rs               |   2 +-
 crates/ui/src/label.rs                       |   3 +-
 crates/ui/src/lib.rs                         |   1 -
 crates/ui/src/modal.rs                       |   2 +-
 crates/ui/src/notification.rs                |   4 +-
 crates/ui/src/popover.rs                     |   4 +-
 crates/ui/src/popup_menu.rs                  |  41 ++--
 crates/ui/src/progress.rs                    |   6 +-
 crates/ui/src/radio.rs                       |  14 +-
 crates/ui/src/resizable/panel.rs             |  11 +-
 crates/ui/src/resizable/resize_handle.rs     |   9 +-
 crates/ui/src/root.rs                        |  17 +-
 crates/ui/src/skeleton.rs                    |  24 +--
 crates/ui/src/slider.rs                      | 196 -------------------
 crates/ui/src/styled.rs                      |   6 +-
 crates/ui/src/switch.rs                      |   2 +-
 crates/ui/src/tab/tab_bar.rs                 |  20 +-
 crates/ui/src/theme/mod.rs                   |  91 +++------
 crates/ui/src/theme/scale.rs                 |  14 +-
 crates/ui/src/title_bar.rs                   |  40 ++--
 crates/ui/src/tooltip.rs                     |  16 +-
 crates/ui/src/window_border.rs               |   8 +-
 36 files changed, 302 insertions(+), 532 deletions(-)
 delete mode 100644 crates/ui/src/slider.rs

diff --git a/Cargo.lock b/Cargo.lock
index d52206f..8279ca7 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -123,11 +123,12 @@ dependencies = [
 
 [[package]]
 name = "anstyle-wincon"
-version = "3.0.6"
+version = "3.0.7"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "2109dbce0e72be3ec00bed26e6a7479ca384ad226efdd66db8fa2e3a38c83125"
+checksum = "ca3534e77181a9cc07539ad51f2141fe32f6c3ffd4df76db8ad92346b003ae4e"
 dependencies = [
  "anstyle",
+ "once_cell",
  "windows-sys 0.59.0",
 ]
 
@@ -1013,7 +1014,7 @@ dependencies = [
 [[package]]
 name = "collections"
 version = "0.1.0"
-source = "git+https://github.com/zed-industries/zed#61115bd04792d87a540558753cd01a6368baba2a"
+source = "git+https://github.com/zed-industries/zed#93f117b21a07cb0e5c41682658339a473794d2da"
 dependencies = [
  "indexmap",
  "rustc-hash 2.1.0",
@@ -1302,7 +1303,7 @@ dependencies = [
 [[package]]
 name = "derive_refineable"
 version = "0.1.0"
-source = "git+https://github.com/zed-industries/zed#61115bd04792d87a540558753cd01a6368baba2a"
+source = "git+https://github.com/zed-industries/zed#93f117b21a07cb0e5c41682658339a473794d2da"
 dependencies = [
  "proc-macro2",
  "quote",
@@ -1997,7 +1998,7 @@ dependencies = [
 [[package]]
 name = "gpui"
 version = "0.1.0"
-source = "git+https://github.com/zed-industries/zed#61115bd04792d87a540558753cd01a6368baba2a"
+source = "git+https://github.com/zed-industries/zed#93f117b21a07cb0e5c41682658339a473794d2da"
 dependencies = [
  "anyhow",
  "as-raw-xcb-connection",
@@ -2082,7 +2083,7 @@ dependencies = [
 [[package]]
 name = "gpui_macros"
 version = "0.1.0"
-source = "git+https://github.com/zed-industries/zed#61115bd04792d87a540558753cd01a6368baba2a"
+source = "git+https://github.com/zed-industries/zed#93f117b21a07cb0e5c41682658339a473794d2da"
 dependencies = [
  "proc-macro2",
  "quote",
@@ -2287,7 +2288,7 @@ dependencies = [
 [[package]]
 name = "http_client"
 version = "0.1.0"
-source = "git+https://github.com/zed-industries/zed#61115bd04792d87a540558753cd01a6368baba2a"
+source = "git+https://github.com/zed-industries/zed#93f117b21a07cb0e5c41682658339a473794d2da"
 dependencies = [
  "anyhow",
  "bytes",
@@ -2702,9 +2703,9 @@ checksum = "f5d4a7da358eff58addd2877a45865158f0d78c911d43a5784ceb7bbf52833b0"
 
 [[package]]
 name = "js-sys"
-version = "0.3.76"
+version = "0.3.77"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6717b6b5b077764fb5966237269cb3c64edddde4b14ce42647430a78ced9e7b7"
+checksum = "1cfaf33c695fc6e08064efbc1f72ec937429614f25eef83af942d0e227c3a28f"
 dependencies = [
  "once_cell",
  "wasm-bindgen",
@@ -2909,7 +2910,7 @@ dependencies = [
 [[package]]
 name = "media"
 version = "0.1.0"
-source = "git+https://github.com/zed-industries/zed#61115bd04792d87a540558753cd01a6368baba2a"
+source = "git+https://github.com/zed-industries/zed#93f117b21a07cb0e5c41682658339a473794d2da"
 dependencies = [
  "anyhow",
  "bindgen",
@@ -2965,6 +2966,16 @@ version = "0.3.17"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "6877bb514081ee2a7ff5ef9de3281f14a4dd4bceac4c09388074a6b5df8a139a"
 
+[[package]]
+name = "mime_guess"
+version = "2.0.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f7c44f8e672c00fe5308fa235f821cb4198414e1c77935c1ab6948d3fd78550e"
+dependencies = [
+ "mime",
+ "unicase",
+]
+
 [[package]]
 name = "minimal-lexical"
 version = "0.2.1"
@@ -2973,9 +2984,9 @@ checksum = "68354c5c6bd36d73ff3feceb05efa59b6acb7626617f4962be322a825e61f79a"
 
 [[package]]
 name = "miniz_oxide"
-version = "0.8.2"
+version = "0.8.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "4ffbe83022cedc1d264172192511ae958937694cd57ce297164951b8b3568394"
+checksum = "b8402cab7aefae129c6977bb0ff1b8fd9a04eb5b51efc50a70bea51cda0c7924"
 dependencies = [
  "adler2",
  "simd-adler32",
@@ -3078,7 +3089,7 @@ checksum = "0676bb32a98c1a483ce53e500a81ad9c3d5b3f7c920c28c24e9cb0980d0b5bc8"
 [[package]]
 name = "nostr"
 version = "0.38.0"
-source = "git+https://github.com/rust-nostr/nostr#209812bcabc861cc6b619234da0cb95fef9e9bd3"
+source = "git+https://github.com/rust-nostr/nostr#6a9b65a3daeef00310b2a763dca58d94a0f4198f"
 dependencies = [
  "aes",
  "async-trait",
@@ -3107,7 +3118,7 @@ dependencies = [
 [[package]]
 name = "nostr-database"
 version = "0.38.0"
-source = "git+https://github.com/rust-nostr/nostr#209812bcabc861cc6b619234da0cb95fef9e9bd3"
+source = "git+https://github.com/rust-nostr/nostr#6a9b65a3daeef00310b2a763dca58d94a0f4198f"
 dependencies = [
  "async-trait",
  "flatbuffers",
@@ -3118,7 +3129,7 @@ dependencies = [
 [[package]]
 name = "nostr-lmdb"
 version = "0.38.0"
-source = "git+https://github.com/rust-nostr/nostr#209812bcabc861cc6b619234da0cb95fef9e9bd3"
+source = "git+https://github.com/rust-nostr/nostr#6a9b65a3daeef00310b2a763dca58d94a0f4198f"
 dependencies = [
  "async-utility",
  "heed",
@@ -3130,7 +3141,7 @@ dependencies = [
 [[package]]
 name = "nostr-relay-pool"
 version = "0.38.0"
-source = "git+https://github.com/rust-nostr/nostr#209812bcabc861cc6b619234da0cb95fef9e9bd3"
+source = "git+https://github.com/rust-nostr/nostr#6a9b65a3daeef00310b2a763dca58d94a0f4198f"
 dependencies = [
  "async-utility",
  "async-wsocket",
@@ -3146,7 +3157,7 @@ dependencies = [
 [[package]]
 name = "nostr-sdk"
 version = "0.38.0"
-source = "git+https://github.com/rust-nostr/nostr#209812bcabc861cc6b619234da0cb95fef9e9bd3"
+source = "git+https://github.com/rust-nostr/nostr#6a9b65a3daeef00310b2a763dca58d94a0f4198f"
 dependencies = [
  "async-utility",
  "lnurl-pay",
@@ -3162,7 +3173,7 @@ dependencies = [
 [[package]]
 name = "nostr-zapper"
 version = "0.38.0"
-source = "git+https://github.com/rust-nostr/nostr#209812bcabc861cc6b619234da0cb95fef9e9bd3"
+source = "git+https://github.com/rust-nostr/nostr#6a9b65a3daeef00310b2a763dca58d94a0f4198f"
 dependencies = [
  "async-trait",
  "nostr",
@@ -3860,9 +3871,9 @@ dependencies = [
 
 [[package]]
 name = "prettyplease"
-version = "0.2.28"
+version = "0.2.29"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "924b9a625d6df5b74b0b3cfbb5669b3f62ddf3d46a677ce12b1945471b4ae5c3"
+checksum = "6924ced06e1f7dfe3fa48d57b9f74f55d8915f5036121bef647ef4b204895fac"
 dependencies = [
  "proc-macro2",
  "syn 2.0.96",
@@ -4164,7 +4175,7 @@ dependencies = [
 [[package]]
 name = "refineable"
 version = "0.1.0"
-source = "git+https://github.com/zed-industries/zed#61115bd04792d87a540558753cd01a6368baba2a"
+source = "git+https://github.com/zed-industries/zed#93f117b21a07cb0e5c41682658339a473794d2da"
 dependencies = [
  "derive_refineable",
 ]
@@ -4265,6 +4276,7 @@ dependencies = [
  "js-sys",
  "log",
  "mime",
+ "mime_guess",
  "once_cell",
  "percent-encoding",
  "pin-project-lite",
@@ -4292,7 +4304,7 @@ dependencies = [
 [[package]]
 name = "reqwest_client"
 version = "0.1.0"
-source = "git+https://github.com/zed-industries/zed#61115bd04792d87a540558753cd01a6368baba2a"
+source = "git+https://github.com/zed-industries/zed#93f117b21a07cb0e5c41682658339a473794d2da"
 dependencies = [
  "anyhow",
  "bytes",
@@ -4642,7 +4654,7 @@ checksum = "c2fdfc24bc566f839a2da4c4295b82db7d25a24253867d5c64355abb5799bdbe"
 [[package]]
 name = "semantic_version"
 version = "0.1.0"
-source = "git+https://github.com/zed-industries/zed#61115bd04792d87a540558753cd01a6368baba2a"
+source = "git+https://github.com/zed-industries/zed#93f117b21a07cb0e5c41682658339a473794d2da"
 dependencies = [
  "anyhow",
  "serde",
@@ -4958,7 +4970,7 @@ checksum = "13c2bddecc57b384dee18652358fb23172facb8a2c51ccc10d74c157bdea3292"
 [[package]]
 name = "sum_tree"
 version = "0.1.0"
-source = "git+https://github.com/zed-industries/zed#61115bd04792d87a540558753cd01a6368baba2a"
+source = "git+https://github.com/zed-industries/zed#93f117b21a07cb0e5c41682658339a473794d2da"
 dependencies = [
  "arrayvec",
  "log",
@@ -5781,7 +5793,7 @@ checksum = "06abde3611657adf66d383f00b093d7faecc7fa57071cce2578660c9f1010821"
 [[package]]
 name = "util"
 version = "0.1.0"
-source = "git+https://github.com/zed-industries/zed#61115bd04792d87a540558753cd01a6368baba2a"
+source = "git+https://github.com/zed-industries/zed#93f117b21a07cb0e5c41682658339a473794d2da"
 dependencies = [
  "anyhow",
  "async-fs",
@@ -5933,20 +5945,21 @@ checksum = "9c8d87e72b64a3b4db28d11ce29237c246188f4f51057d65a7eab63b7987e423"
 
 [[package]]
 name = "wasm-bindgen"
-version = "0.2.99"
+version = "0.2.100"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a474f6281d1d70c17ae7aa6a613c87fce69a127e2624002df63dcb39d6cf6396"
+checksum = "1edc8929d7499fc4e8f0be2262a241556cfc54a0bea223790e71446f2aab1ef5"
 dependencies = [
  "cfg-if",
  "once_cell",
+ "rustversion",
  "wasm-bindgen-macro",
 ]
 
 [[package]]
 name = "wasm-bindgen-backend"
-version = "0.2.99"
+version = "0.2.100"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5f89bb38646b4f81674e8f5c3fb81b562be1fd936d84320f3264486418519c79"
+checksum = "2f0a0651a5c2bc21487bde11ee802ccaf4c51935d0d3d42a6101f98161700bc6"
 dependencies = [
  "bumpalo",
  "log",
@@ -5958,9 +5971,9 @@ dependencies = [
 
 [[package]]
 name = "wasm-bindgen-futures"
-version = "0.4.49"
+version = "0.4.50"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "38176d9b44ea84e9184eff0bc34cc167ed044f816accfe5922e54d84cf48eca2"
+checksum = "555d470ec0bc3bb57890405e5d4322cc9ea83cebb085523ced7be4144dac1e61"
 dependencies = [
  "cfg-if",
  "js-sys",
@@ -5971,9 +5984,9 @@ dependencies = [
 
 [[package]]
 name = "wasm-bindgen-macro"
-version = "0.2.99"
+version = "0.2.100"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "2cc6181fd9a7492eef6fef1f33961e3695e4579b9872a6f7c83aee556666d4fe"
+checksum = "7fe63fc6d09ed3792bd0897b314f53de8e16568c2b3f7982f468c0bf9bd0b407"
 dependencies = [
  "quote",
  "wasm-bindgen-macro-support",
@@ -5981,9 +5994,9 @@ dependencies = [
 
 [[package]]
 name = "wasm-bindgen-macro-support"
-version = "0.2.99"
+version = "0.2.100"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "30d7a95b763d3c45903ed6c81f156801839e5ee968bb07e534c44df0fcd330c2"
+checksum = "8ae87ea40c9f689fc23f209965b6fb8a99ad69aeeb0231408be24920604395de"
 dependencies = [
  "proc-macro2",
  "quote",
@@ -5994,9 +6007,12 @@ dependencies = [
 
 [[package]]
 name = "wasm-bindgen-shared"
-version = "0.2.99"
+version = "0.2.100"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "943aab3fdaaa029a6e0271b35ea10b72b943135afe9bffca82384098ad0e06a6"
+checksum = "1a05d73b933a847d6cccdda8f838a22ff101ad9bf93e33684f39c1f5f0eece3d"
+dependencies = [
+ "unicode-ident",
+]
 
 [[package]]
 name = "wasm-streams"
@@ -6098,9 +6114,9 @@ dependencies = [
 
 [[package]]
 name = "web-sys"
-version = "0.3.76"
+version = "0.3.77"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "04dd7223427d52553d3702c004d3b2fe07c148165faa56313cb00211e31c12bc"
+checksum = "33b6dd2ef9186f1f2072e409e99cd22a975331a6b3591b12c764e0e55c60d5d2"
 dependencies = [
  "js-sys",
  "wasm-bindgen",
@@ -6642,7 +6658,7 @@ dependencies = [
  "winnow",
  "xdg-home",
  "zbus_macros 5.3.0",
- "zbus_names 4.1.0",
+ "zbus_names 4.1.1",
  "zvariant 5.2.0",
 ]
 
@@ -6669,7 +6685,7 @@ dependencies = [
  "proc-macro2",
  "quote",
  "syn 2.0.96",
- "zbus_names 4.1.0",
+ "zbus_names 4.1.1",
  "zvariant 5.2.0",
  "zvariant_utils 3.1.0",
 ]
@@ -6687,9 +6703,9 @@ dependencies = [
 
 [[package]]
 name = "zbus_names"
-version = "4.1.0"
+version = "4.1.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "856b7a38811f71846fd47856ceee8bccaec8399ff53fb370247e66081ace647b"
+checksum = "519629a3f80976d89c575895b05677cbc45eaf9f70d62a364d819ba646409cc8"
 dependencies = [
  "serde",
  "static_assertions",
diff --git a/crates/app/src/views/account.rs b/crates/app/src/views/account.rs
index f07f967..6a669ff 100644
--- a/crates/app/src/views/account.rs
+++ b/crates/app/src/views/account.rs
@@ -66,10 +66,9 @@ impl Account {
 impl Render for Account {
     fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
         Button::new("account")
-            .small()
-            .compact()
-            .reverse()
             .ghost()
+            .xsmall()
+            .reverse()
             .icon(Icon::new(IconName::ChevronDownSmall))
             .map(|this| {
                 if let Some(metadata) = self.metadata.read(cx).as_ref() {
diff --git a/crates/app/src/views/app.rs b/crates/app/src/views/app.rs
index 6662531..88b60b8 100644
--- a/crates/app/src/views/app.rs
+++ b/crates/app/src/views/app.rs
@@ -4,7 +4,7 @@ use super::{
 };
 use crate::states::{app::AppRegistry, chat::ChatRegistry};
 use gpui::{
-    div, impl_actions, px, Axis, Context, Edges, InteractiveElement, IntoElement, Model,
+    div, impl_internal_actions, px, Axis, Context, Edges, InteractiveElement, IntoElement, Model,
     ParentElement, Render, Styled, View, ViewContext, VisualContext, WeakView, WindowContext,
 };
 use serde::Deserialize;
@@ -28,7 +28,7 @@ pub struct AddPanel {
     pub position: DockPlacement,
 }
 
-impl_actions!(dock, [AddPanel]);
+impl_internal_actions!(dock, [AddPanel]);
 
 pub struct DockAreaTab {
     id: &'static str,
diff --git a/crates/app/src/views/sidebar/contact_list.rs b/crates/app/src/views/sidebar/contact_list.rs
index 397336a..d6221fc 100644
--- a/crates/app/src/views/sidebar/contact_list.rs
+++ b/crates/app/src/views/sidebar/contact_list.rs
@@ -1,6 +1,6 @@
 use crate::{constants::IMAGE_SERVICE, get_client, utils::show_npub};
 use gpui::{
-    div, img, impl_actions, list, px, Context, ElementId, FocusHandle, InteractiveElement,
+    div, img, impl_internal_actions, list, px, Context, ElementId, FocusHandle, InteractiveElement,
     IntoElement, ListAlignment, ListState, Model, ParentElement, Pixels, Render, RenderOnce,
     SharedString, StatefulInteractiveElement, Styled, ViewContext, WindowContext,
 };
@@ -16,7 +16,7 @@ use ui::{
 #[derive(Clone, PartialEq, Eq, Deserialize)]
 struct SelectContact(PublicKey);
 
-impl_actions!(contacts, [SelectContact]);
+impl_internal_actions!(contacts, [SelectContact]);
 
 #[derive(Clone, IntoElement)]
 struct ContactListItem {
@@ -95,7 +95,7 @@ impl RenderOnce for ContactListItem {
                 this.child(
                     Icon::new(IconName::CircleCheck)
                         .size_4()
-                        .text_color(cx.theme().primary),
+                        .text_color(cx.theme().colors.primary),
                 )
             })
             .hover(|this| {
diff --git a/crates/app/src/views/sidebar/inbox.rs b/crates/app/src/views/sidebar/inbox.rs
index c2c1f64..fe808dc 100644
--- a/crates/app/src/views/sidebar/inbox.rs
+++ b/crates/app/src/views/sidebar/inbox.rs
@@ -4,10 +4,14 @@ use crate::{
     views::app::{AddPanel, PanelKind},
 };
 use gpui::{
-    div, img, percentage, prelude::FluentBuilder, InteractiveElement, IntoElement, ParentElement,
-    Render, SharedString, StatefulInteractiveElement, Styled, ViewContext,
+    div, img, percentage, prelude::FluentBuilder, px, InteractiveElement, IntoElement,
+    ParentElement, Render, SharedString, StatefulInteractiveElement, Styled, ViewContext,
+};
+use ui::{
+    skeleton::Skeleton,
+    theme::{scale::ColorScaleStep, ActiveTheme},
+    v_flex, Collapsible, Icon, IconName, StyledExt,
 };
-use ui::{skeleton::Skeleton, theme::ActiveTheme, v_flex, Collapsible, Icon, IconName, StyledExt};
 
 pub struct Inbox {
     label: SharedString,
@@ -59,8 +63,8 @@ impl Inbox {
                             .items_center()
                             .justify_between()
                             .text_xs()
-                            .rounded_md()
-                            .hover(|this| this.bg(cx.theme().list_hover))
+                            .rounded(px(cx.theme().radius))
+                            .hover(|this| this.bg(cx.theme().base.step(cx, ColorScaleStep::FOUR)))
                             .child(div().font_medium().map(|this| {
                                 if room.is_group {
                                     this.flex()
@@ -83,7 +87,11 @@ impl Inbox {
                                     })
                                 }
                             }))
-                            .child(div().child(ago))
+                            .child(
+                                div()
+                                    .text_color(cx.theme().base.step(cx, ColorScaleStep::ELEVEN))
+                                    .child(ago),
+                            )
                             .on_click(cx.listener(move |this, _, cx| {
                                 this.action(id, cx);
                             }))
@@ -126,10 +134,10 @@ impl Render for Inbox {
                     .px_1()
                     .flex()
                     .items_center()
-                    .rounded_md()
+                    .rounded(px(cx.theme().radius))
                     .text_xs()
                     .font_semibold()
-                    .hover(|this| this.bg(cx.theme().list_hover))
+                    .hover(|this| this.bg(cx.theme().base.step(cx, ColorScaleStep::THREE)))
                     .on_click(cx.listener(move |view, _event, cx| {
                         view.is_collapsed = !view.is_collapsed;
                         cx.notify();
diff --git a/crates/app/src/views/sidebar/mod.rs b/crates/app/src/views/sidebar/mod.rs
index e9e3f9d..7a71fb3 100644
--- a/crates/app/src/views/sidebar/mod.rs
+++ b/crates/app/src/views/sidebar/mod.rs
@@ -115,7 +115,7 @@ impl Render for Sidebar {
             .child(
                 v_flex()
                     .px_2()
-                    .gap_1()
+                    .gap_0p5()
                     .child(
                         Button::new("compose")
                             .small()
diff --git a/crates/ui/src/badge.rs b/crates/ui/src/badge.rs
index 4597267..43a33f9 100644
--- a/crates/ui/src/badge.rs
+++ b/crates/ui/src/badge.rs
@@ -20,7 +20,7 @@ pub enum BadgeVariant {
 impl BadgeVariant {
     fn bg(&self, cx: &gpui::WindowContext) -> Hsla {
         match self {
-            Self::Primary => cx.theme().primary,
+            Self::Primary => cx.theme().colors.primary,
             Self::Secondary => cx.theme().secondary,
             Self::Outline => gpui::transparent_black(),
             Self::Destructive => cx.theme().danger,
@@ -30,7 +30,7 @@ impl BadgeVariant {
 
     fn border(&self, cx: &gpui::WindowContext) -> Hsla {
         match self {
-            Self::Primary => cx.theme().primary,
+            Self::Primary => cx.theme().colors.primary,
             Self::Secondary => cx.theme().secondary,
             Self::Outline => cx.theme().border,
             Self::Destructive => cx.theme().danger,
diff --git a/crates/ui/src/button.rs b/crates/ui/src/button.rs
index 48c8292..b91525f 100644
--- a/crates/ui/src/button.rs
+++ b/crates/ui/src/button.rs
@@ -1,6 +1,6 @@
 use crate::{
     indicator::Indicator,
-    theme::{ActiveTheme, Colorize as _},
+    theme::{scale::ColorScaleStep, ActiveTheme, Colorize as _},
     tooltip::Tooltip,
     Disableable, Icon, Selectable, Sizable, Size, StyledExt,
 };
@@ -76,11 +76,11 @@ pub trait ButtonVariants: Sized {
 impl ButtonCustomVariant {
     pub fn new(cx: &WindowContext) -> Self {
         Self {
-            color: cx.theme().secondary,
-            foreground: cx.theme().secondary_foreground,
-            border: cx.theme().border,
-            hover: cx.theme().secondary_hover,
-            active: cx.theme().secondary_active,
+            color: cx.theme().accent.step(cx, ColorScaleStep::NINE),
+            foreground: cx.theme().accent.step(cx, ColorScaleStep::ONE),
+            border: cx.theme().accent.step(cx, ColorScaleStep::TEN),
+            hover: cx.theme().accent.step(cx, ColorScaleStep::TEN),
+            active: cx.theme().accent.step(cx, ColorScaleStep::ELEVEN),
             shadow: true,
         }
     }
@@ -120,7 +120,6 @@ impl ButtonCustomVariant {
 #[derive(Clone, Copy, PartialEq, Eq)]
 pub enum ButtonVariant {
     Primary,
-    Secondary,
     Danger,
     Outline,
     Ghost,
@@ -131,7 +130,7 @@ pub enum ButtonVariant {
 
 impl Default for ButtonVariant {
     fn default() -> Self {
-        Self::Secondary
+        Self::Primary
     }
 }
 
@@ -160,21 +159,20 @@ pub struct Button {
     label: Option<SharedString>,
     children: Vec<AnyElement>,
     disabled: bool,
-    pub(crate) selected: bool,
     variant: ButtonVariant,
     rounded: ButtonRounded,
     border_corners: Corners<bool>,
     border_edges: Edges<bool>,
     size: Size,
-    compact: bool,
     reverse: bool,
     bold: bool,
     centered: bool,
     tooltip: Option<SharedString>,
     on_click: OnClick,
-    pub(crate) stop_propagation: bool,
     loading: bool,
     loading_icon: Option<Icon>,
+    pub(crate) selected: bool,
+    pub(crate) stop_propagation: bool,
 }
 
 impl From<Button> for AnyElement {
@@ -202,7 +200,6 @@ impl Button {
             stop_propagation: true,
             loading: false,
             reverse: false,
-            compact: false,
             bold: false,
             centered: true,
             children: Vec::new(),
@@ -252,12 +249,6 @@ impl Button {
         self
     }
 
-    /// Set the button to compact mode, then padding will be reduced.
-    pub fn compact(mut self) -> Self {
-        self.compact = true;
-        self
-    }
-
     /// Set reverse the position between icon and label.
     pub fn reverse(mut self) -> Self {
         self.reverse = true;
@@ -372,9 +363,9 @@ impl RenderOnce for Button {
                     // Normal Button
                     match self.size {
                         Size::Size(size) => this.px(size * 0.2),
-                        Size::XSmall => this.h_5().px_1().when(self.compact, |this| this.px_0()),
-                        Size::Small => this.h_6().px_2().when(self.compact, |this| this.px_0p5()),
-                        _ => this.h_8().px_4().when(self.compact, |this| this.px_1()),
+                        Size::XSmall => this.h_6().px_0p5(),
+                        Size::Small => this.h_8().px_2(),
+                        _ => this.h_10().px_4(),
                     }
                 }
             })
@@ -486,7 +477,7 @@ impl RenderOnce for Button {
             })
             .when(self.loading, |this| this.bg(normal_style.bg.opacity(0.8)))
             .when_some(self.tooltip.clone(), |this, tooltip| {
-                this.tooltip(move |cx| Tooltip::new(tooltip.clone(), cx))
+                this.tooltip(move |cx| Tooltip::new(tooltip.clone(), cx).into())
             })
     }
 }
@@ -502,34 +493,25 @@ struct ButtonVariantStyle {
 impl ButtonVariant {
     fn bg_color(&self, cx: &WindowContext) -> Hsla {
         match self {
-            ButtonVariant::Primary => cx.theme().primary,
-            ButtonVariant::Secondary => cx.theme().secondary,
+            ButtonVariant::Primary => cx.theme().accent.step(cx, ColorScaleStep::NINE),
             ButtonVariant::Danger => cx.theme().danger,
-            ButtonVariant::Outline
-            | ButtonVariant::Ghost
-            | ButtonVariant::Link
-            | ButtonVariant::Text => cx.theme().transparent,
             ButtonVariant::Custom(colors) => colors.color,
+            _ => cx.theme().transparent,
         }
     }
 
     fn text_color(&self, cx: &WindowContext) -> Hsla {
         match self {
-            ButtonVariant::Primary => cx.theme().primary_foreground,
-            ButtonVariant::Secondary | ButtonVariant::Outline | ButtonVariant::Ghost => {
-                cx.theme().secondary_foreground
-            }
-            ButtonVariant::Danger => cx.theme().danger_foreground,
-            ButtonVariant::Link => cx.theme().link,
-            ButtonVariant::Text => cx.theme().foreground,
+            ButtonVariant::Primary => cx.theme().accent.step(cx, ColorScaleStep::ONE),
+            ButtonVariant::Link => cx.theme().accent.step(cx, ColorScaleStep::NINE),
             ButtonVariant::Custom(colors) => colors.foreground,
+            _ => cx.theme().base.step(cx, ColorScaleStep::TWELVE),
         }
     }
 
     fn border_color(&self, cx: &WindowContext) -> Hsla {
         match self {
-            ButtonVariant::Primary => cx.theme().primary,
-            ButtonVariant::Secondary => cx.theme().border,
+            ButtonVariant::Primary => cx.theme().colors.primary,
             ButtonVariant::Danger => cx.theme().danger,
             ButtonVariant::Outline => cx.theme().border,
             ButtonVariant::Ghost | ButtonVariant::Link | ButtonVariant::Text => {
@@ -545,7 +527,7 @@ impl ButtonVariant {
 
     fn shadow(&self, _: &WindowContext) -> bool {
         match self {
-            ButtonVariant::Primary | ButtonVariant::Secondary | ButtonVariant::Danger => true,
+            ButtonVariant::Primary | ButtonVariant::Danger => true,
             ButtonVariant::Custom(c) => c.shadow,
             _ => false,
         }
@@ -569,16 +551,10 @@ impl ButtonVariant {
 
     fn hovered(&self, cx: &WindowContext) -> ButtonVariantStyle {
         let bg = match self {
-            ButtonVariant::Primary => cx.theme().primary_hover,
-            ButtonVariant::Secondary | ButtonVariant::Outline => cx.theme().secondary_hover,
+            ButtonVariant::Primary => cx.theme().accent.step(cx, ColorScaleStep::TEN),
+            ButtonVariant::Outline => cx.theme().secondary_hover,
             ButtonVariant::Danger => cx.theme().danger_hover,
-            ButtonVariant::Ghost => {
-                if cx.theme().mode.is_dark() {
-                    cx.theme().secondary.lighten(0.1).opacity(0.8)
-                } else {
-                    cx.theme().secondary.darken(0.1).opacity(0.8)
-                }
-            }
+            ButtonVariant::Ghost => cx.theme().base.step(cx, ColorScaleStep::FOUR),
             ButtonVariant::Link => cx.theme().transparent,
             ButtonVariant::Text => cx.theme().transparent,
             ButtonVariant::Custom(colors) => colors.hover,
@@ -603,9 +579,9 @@ impl ButtonVariant {
     fn active(&self, cx: &WindowContext) -> ButtonVariantStyle {
         let bg = match self {
             ButtonVariant::Primary => cx.theme().primary_active,
-            ButtonVariant::Secondary | ButtonVariant::Outline => cx.theme().secondary_active,
+            ButtonVariant::Outline => cx.theme().secondary_active,
             ButtonVariant::Ghost => {
-                if cx.theme().mode.is_dark() {
+                if cx.theme().appearance.is_dark() {
                     cx.theme().secondary.lighten(0.2).opacity(0.8)
                 } else {
                     cx.theme().secondary.darken(0.2).opacity(0.8)
@@ -637,9 +613,9 @@ impl ButtonVariant {
     fn selected(&self, cx: &WindowContext) -> ButtonVariantStyle {
         let bg = match self {
             ButtonVariant::Primary => cx.theme().primary_active,
-            ButtonVariant::Secondary | ButtonVariant::Outline => cx.theme().secondary_active,
+            ButtonVariant::Outline => cx.theme().secondary_active,
             ButtonVariant::Ghost => {
-                if cx.theme().mode.is_dark() {
+                if cx.theme().appearance.is_dark() {
                     cx.theme().secondary.lighten(0.2).opacity(0.8)
                 } else {
                     cx.theme().secondary.darken(0.2).opacity(0.8)
@@ -674,9 +650,8 @@ impl ButtonVariant {
             | ButtonVariant::Ghost
             | ButtonVariant::Outline
             | ButtonVariant::Text => cx.theme().transparent,
-            ButtonVariant::Primary => cx.theme().primary.opacity(0.15),
+            ButtonVariant::Primary => cx.theme().colors.primary.opacity(0.15),
             ButtonVariant::Danger => cx.theme().danger.opacity(0.15),
-            ButtonVariant::Secondary => cx.theme().secondary.opacity(1.5),
             ButtonVariant::Custom(style) => style.color.opacity(0.15),
         };
         let fg = match self {
diff --git a/crates/ui/src/button_group.rs b/crates/ui/src/button_group.rs
index 6de3041..807de2f 100644
--- a/crates/ui/src/button_group.rs
+++ b/crates/ui/src/button_group.rs
@@ -167,7 +167,6 @@ impl RenderOnce for ButtonGroup {
                         .stop_propagation(false)
                         .when_some(self.size, |this, size| this.with_size(size))
                         .when_some(self.variant, |this, variant| this.with_variant(variant))
-                        .when_some(self.compact, |this, _| this.compact())
                         .on_click(move |_, _| {
                             state.set(Some(child_index));
                         })
diff --git a/crates/ui/src/checkbox.rs b/crates/ui/src/checkbox.rs
index 55916a4..bbd3c22 100644
--- a/crates/ui/src/checkbox.rs
+++ b/crates/ui/src/checkbox.rs
@@ -65,11 +65,11 @@ impl RenderOnce for Checkbox {
     fn render(self, cx: &mut WindowContext) -> impl IntoElement {
         let (color, icon_color) = if self.disabled {
             (
-                cx.theme().primary.opacity(0.5),
+                cx.theme().colors.primary.opacity(0.5),
                 cx.theme().primary_foreground.opacity(0.5),
             )
         } else {
-            (cx.theme().primary, cx.theme().primary_foreground)
+            (cx.theme().colors.primary, cx.theme().primary_foreground)
         };
 
         h_flex()
diff --git a/crates/ui/src/context_menu.rs b/crates/ui/src/context_menu.rs
index 68fa435..5ae4a34 100644
--- a/crates/ui/src/context_menu.rs
+++ b/crates/ui/src/context_menu.rs
@@ -1,13 +1,11 @@
-use std::{cell::RefCell, rc::Rc};
-
+use crate::popup_menu::PopupMenu;
 use gpui::{
     anchored, deferred, div, prelude::FluentBuilder, px, relative, AnyElement, Corner,
     DismissEvent, DispatchPhase, Element, ElementId, Focusable, GlobalElementId,
     InteractiveElement, IntoElement, MouseButton, MouseDownEvent, ParentElement, Pixels, Point,
     Position, Stateful, Style, View, ViewContext, WindowContext,
 };
-
-use crate::popup_menu::PopupMenu;
+use std::{cell::RefCell, rc::Rc};
 
 pub trait ContextMenuExt: ParentElement + Sized {
     fn context_menu(
diff --git a/crates/ui/src/dock/mod.rs b/crates/ui/src/dock/mod.rs
index ed27d35..69f4c65 100644
--- a/crates/ui/src/dock/mod.rs
+++ b/crates/ui/src/dock/mod.rs
@@ -23,7 +23,7 @@ pub use state::*;
 pub use tab_panel::*;
 pub use tiles::*;
 
-use crate::theme::ActiveTheme;
+use crate::theme::{scale::ColorScaleStep, ActiveTheme};
 
 pub fn init(cx: &mut AppContext) {
     cx.set_global(PanelRegistry::new());
@@ -856,8 +856,7 @@ impl Render for DockArea {
                                     .h_full()
                                     // Left dock
                                     .when_some(self.left_dock.clone(), |this, dock| {
-                                        this.bg(cx.theme().muted)
-                                            .text_color(cx.theme().muted_foreground)
+                                        this.bg(cx.theme().base.step(cx, ColorScaleStep::ONE))
                                             .child(div().flex().flex_none().child(dock))
                                     })
                                     // Center
diff --git a/crates/ui/src/dock/tab_panel.rs b/crates/ui/src/dock/tab_panel.rs
index f5220fe..2d6328d 100644
--- a/crates/ui/src/dock/tab_panel.rs
+++ b/crates/ui/src/dock/tab_panel.rs
@@ -1,7 +1,3 @@
-use gpui::*;
-use prelude::FluentBuilder;
-use std::sync::Arc;
-
 use super::{
     ClosePanel, DockArea, DockPlacement, Panel, PanelEvent, PanelState, PanelStyle, PanelView,
     StackPanel, ToggleZoom,
@@ -12,9 +8,17 @@ use crate::{
     h_flex,
     popup_menu::{PopupMenu, PopupMenuExt},
     tab::{tab_bar::TabBar, Tab},
-    theme::ActiveTheme,
+    theme::{scale::ColorScaleStep, ActiveTheme},
     v_flex, AxisExt, IconName, Placement, Selectable, Sizable,
 };
+use gpui::{
+    div, img, prelude::FluentBuilder, px, rems, AppContext, Corner, DefiniteLength, DismissEvent,
+    DragMoveEvent, Empty, Entity, EventEmitter, FocusHandle, FocusableView,
+    InteractiveElement as _, IntoElement, ObjectFit, ParentElement, Pixels, Render, ScrollHandle,
+    SharedString, StatefulInteractiveElement, Styled, StyledImage, View, ViewContext,
+    VisualContext as _, WeakView, WindowContext,
+};
+use std::sync::Arc;
 
 #[derive(Clone, Copy)]
 struct TabState {
@@ -49,13 +53,11 @@ impl Render for DragPanel {
             .justify_center()
             .overflow_hidden()
             .whitespace_nowrap()
-            .border_1()
-            .border_color(cx.theme().border)
-            .rounded_md()
-            .text_color(cx.theme().tab_foreground)
+            .rounded(px(cx.theme().radius))
             .text_xs()
-            .bg(cx.theme().tab_active)
-            .opacity(0.75)
+            .border_1()
+            .border_color(cx.theme().base.step(cx, ColorScaleStep::THREE))
+            .bg(cx.theme().base.step(cx, ColorScaleStep::TWO))
             .child(self.panel.title(cx))
     }
 }
@@ -572,8 +574,8 @@ impl TabPanel {
                             .border_r_1()
                             .border_b_1()
                             .h_full()
-                            .border_color(cx.theme().border)
-                            .bg(cx.theme().tab_bar)
+                            .border_color(cx.theme().base.step(cx, ColorScaleStep::THREE))
+                            .bg(cx.theme().base.step(cx, ColorScaleStep::TWO))
                             .px_2()
                             .children(left_dock_button)
                             .children(bottom_dock_button),
@@ -611,7 +613,7 @@ impl TabPanel {
                                 this.rounded_l_none()
                                     .border_l_2()
                                     .border_r_0()
-                                    .border_color(cx.theme().drag_border)
+                                    .border_color(cx.theme().base.step(cx, ColorScaleStep::TWO))
                             })
                             .on_drop(cx.listener(
                                 move |this, drag: &DragPanel, cx| {
@@ -630,8 +632,11 @@ impl TabPanel {
                     .flex_grow()
                     .min_w_16()
                     .when(state.droppable, |this| {
-                        this.drag_over::<DragPanel>(|this, _, cx| this.bg(cx.theme().drop_target))
-                            .on_drop(cx.listener(move |this, drag: &DragPanel, cx| {
+                        this.drag_over::<DragPanel>(|this, _, cx| {
+                            this.bg(cx.theme().base.step(cx, ColorScaleStep::TWO))
+                        })
+                        .on_drop(cx.listener(
+                            move |this, drag: &DragPanel, cx| {
                                 this.will_split_placement = None;
 
                                 let ix = if drag.tab_panel == view {
@@ -641,7 +646,8 @@ impl TabPanel {
                                 };
 
                                 this.on_drop(drag, ix, false, cx)
-                            }))
+                            },
+                        ))
                     }),
             )
             .suffix(
@@ -652,8 +658,8 @@ impl TabPanel {
                     .border_l_1()
                     .border_b_1()
                     .h_full()
-                    .border_color(cx.theme().border)
-                    .bg(cx.theme().tab_bar)
+                    .border_color(cx.theme().base.step(cx, ColorScaleStep::THREE))
+                    .bg(cx.theme().base.step(cx, ColorScaleStep::TWO))
                     .px_2()
                     .gap_1()
                     .child(self.render_toolbar(state, cx))
diff --git a/crates/ui/src/dropdown.rs b/crates/ui/src/dropdown.rs
index d72512f..1d8906b 100644
--- a/crates/ui/src/dropdown.rs
+++ b/crates/ui/src/dropdown.rs
@@ -1,11 +1,3 @@
-use gpui::{
-    actions, anchored, canvas, deferred, div, prelude::FluentBuilder, px, rems, AnyElement,
-    AppContext, Bounds, ClickEvent, DismissEvent, ElementId, EventEmitter, FocusHandle,
-    FocusableView, InteractiveElement, IntoElement, KeyBinding, Length, ParentElement, Pixels,
-    Render, SharedString, StatefulInteractiveElement, Styled, Task, View, ViewContext,
-    VisualContext, WeakView, WindowContext,
-};
-
 use crate::{
     h_flex,
     input::ClearButton,
@@ -13,6 +5,13 @@ use crate::{
     theme::ActiveTheme,
     v_flex, Disableable, Icon, IconName, Sizable, Size, StyleSized, StyledExt,
 };
+use gpui::{
+    actions, anchored, canvas, deferred, div, prelude::FluentBuilder, px, rems, AnyElement,
+    AppContext, Bounds, ClickEvent, DismissEvent, ElementId, EventEmitter, FocusHandle,
+    FocusableView, InteractiveElement, IntoElement, KeyBinding, Length, ParentElement, Pixels,
+    Render, SharedString, StatefulInteractiveElement, Styled, Task, View, ViewContext,
+    VisualContext, WeakView, WindowContext,
+};
 
 actions!(dropdown, [Up, Down, Enter, Escape]);
 
diff --git a/crates/ui/src/input/element.rs b/crates/ui/src/input/element.rs
index 4b75831..8efb6cb 100644
--- a/crates/ui/src/input/element.rs
+++ b/crates/ui/src/input/element.rs
@@ -144,7 +144,7 @@ impl TextElement {
                         ),
                         size(px(1.5), line_height),
                     ),
-                    cx.theme().primary,
+                    cx.theme().colors.primary,
                 ))
             };
         }
diff --git a/crates/ui/src/label.rs b/crates/ui/src/label.rs
index 9d170be..23c36a2 100644
--- a/crates/ui/src/label.rs
+++ b/crates/ui/src/label.rs
@@ -1,10 +1,9 @@
+use crate::{h_flex, theme::ActiveTheme};
 use gpui::{
     div, prelude::FluentBuilder, rems, Div, IntoElement, ParentElement, RenderOnce, SharedString,
     Styled, WindowContext,
 };
 
-use crate::{h_flex, theme::ActiveTheme};
-
 const MASKED: &str = "•";
 
 #[derive(Default, PartialEq, Eq)]
diff --git a/crates/ui/src/lib.rs b/crates/ui/src/lib.rs
index a584a9e..c4f8e54 100644
--- a/crates/ui/src/lib.rs
+++ b/crates/ui/src/lib.rs
@@ -23,7 +23,6 @@ pub mod radio;
 pub mod resizable;
 pub mod scroll;
 pub mod skeleton;
-pub mod slider;
 pub mod switch;
 pub mod tab;
 pub mod theme;
diff --git a/crates/ui/src/modal.rs b/crates/ui/src/modal.rs
index 3935987..0907656 100644
--- a/crates/ui/src/modal.rs
+++ b/crates/ui/src/modal.rs
@@ -47,7 +47,7 @@ pub(crate) fn overlay_color(overlay: bool, cx: &WindowContext) -> Hsla {
         return hsla(0., 0., 0., 0.);
     }
 
-    if cx.theme().mode.is_dark() {
+    if cx.theme().appearance.is_dark() {
         hsla(0., 1., 1., 0.06)
     } else {
         hsla(0., 0., 0., 0.06)
diff --git a/crates/ui/src/notification.rs b/crates/ui/src/notification.rs
index 85452c1..68a8f31 100644
--- a/crates/ui/src/notification.rs
+++ b/crates/ui/src/notification.rs
@@ -228,8 +228,8 @@ impl Render for Notification {
             .relative()
             .w_96()
             .border_1()
-            .border_color(cx.theme().border)
-            .bg(cx.theme().popover)
+            .border_color(cx.theme().base.step(cx, ColorScaleStep::THREE))
+            .bg(cx.theme().background)
             .rounded_md()
             .shadow_md()
             .py_2()
diff --git a/crates/ui/src/popover.rs b/crates/ui/src/popover.rs
index df4e708..faf63bd 100644
--- a/crates/ui/src/popover.rs
+++ b/crates/ui/src/popover.rs
@@ -1,3 +1,4 @@
+use crate::{Selectable, StyledExt as _};
 use gpui::{
     actions, anchored, deferred, div, prelude::FluentBuilder as _, px, AnyElement, AppContext,
     Bounds, Corner, DismissEvent, DispatchPhase, Element, ElementId, EventEmitter, FocusHandle,
@@ -7,8 +8,6 @@ use gpui::{
 };
 use std::{cell::RefCell, rc::Rc};
 
-use crate::{Selectable, StyledExt as _};
-
 const CONTEXT: &str = "Popover";
 
 actions!(popover, [Escape]);
@@ -44,6 +43,7 @@ impl PopoverContent {
         self
     }
 }
+
 impl EventEmitter<DismissEvent> for PopoverContent {}
 
 impl FocusableView for PopoverContent {
diff --git a/crates/ui/src/popup_menu.rs b/crates/ui/src/popup_menu.rs
index 3edea09..2f8c84e 100644
--- a/crates/ui/src/popup_menu.rs
+++ b/crates/ui/src/popup_menu.rs
@@ -1,11 +1,19 @@
-use crate::scroll::{Scrollbar, ScrollbarState};
-use crate::StyledExt;
 use crate::{
-    button::Button, h_flex, list::ListItem, popover::Popover, theme::ActiveTheme, v_flex, Icon,
-    IconName, Selectable, Sizable as _,
+    button::Button,
+    h_flex,
+    list::ListItem,
+    popover::Popover,
+    scroll::{Scrollbar, ScrollbarState},
+    theme::{scale::ColorScaleStep, ActiveTheme},
+    v_flex, Icon, IconName, Selectable, Sizable as _, StyledExt,
+};
+use gpui::{
+    actions, anchored, canvas, div, prelude::FluentBuilder, px, rems, Action, AnyElement,
+    AppContext, Bounds, Corner, DismissEvent, Edges, EventEmitter, FocusHandle, FocusableView,
+    InteractiveElement, IntoElement, KeyBinding, Keystroke, ParentElement, Pixels, Render,
+    ScrollHandle, SharedString, StatefulInteractiveElement, Styled, View, ViewContext,
+    VisualContext as _, WeakView, WindowContext,
 };
-use gpui::*;
-use prelude::FluentBuilder;
 use std::{cell::Cell, ops::Deref, rc::Rc};
 
 actions!(menu, [Confirm, Dismiss, SelectNext, SelectPrev]);
@@ -48,6 +56,7 @@ pub trait PopupMenuExt: Styled + Selectable + IntoElement + 'static {
             .content(move |cx| PopupMenu::build(cx, |menu, cx| f(menu, cx)))
     }
 }
+
 impl PopupMenuExt for Button {}
 
 enum PopupMenuItem {
@@ -429,12 +438,14 @@ impl PopupMenu {
     ) -> Option<impl IntoElement> {
         if let Some(action) = action {
             if let Some(keybinding) = cx.bindings_for_action(action.deref()).first() {
-                let el = div().text_color(cx.theme().muted_foreground).children(
-                    keybinding
-                        .keystrokes()
-                        .iter()
-                        .map(|key| key_shortcut(key.clone())),
-                );
+                let el = div()
+                    .text_color(cx.theme().base.step(cx, ColorScaleStep::ELEVEN))
+                    .children(
+                        keybinding
+                            .keystrokes()
+                            .iter()
+                            .map(|key| key_shortcut(key.clone())),
+                    );
 
                 return Some(el);
             }
@@ -503,7 +514,6 @@ impl Render for PopupMenu {
             .on_action(cx.listener(Self::dismiss))
             .on_mouse_down_out(cx.listener(|this, _, cx| this.dismiss(&Dismiss, cx)))
             .popover_style(cx)
-            .text_color(cx.theme().popover_foreground)
             .relative()
             .p_1()
             .child(
@@ -557,7 +567,10 @@ impl Render for PopupMenu {
                                                         .h(px(1.))
                                                         .mx_neg_1()
                                                         .my_0p5()
-                                                        .bg(cx.theme().muted),
+                                                        .bg(cx
+                                                            .theme()
+                                                            .base
+                                                            .step(cx, ColorScaleStep::TWO)),
                                                 )
                                             }
                                             PopupMenuItem::ElementItem { render, .. } => this
diff --git a/crates/ui/src/progress.rs b/crates/ui/src/progress.rs
index cbe72dd..8029ff5 100644
--- a/crates/ui/src/progress.rs
+++ b/crates/ui/src/progress.rs
@@ -1,4 +1,4 @@
-use crate::theme::ActiveTheme;
+use crate::theme::{scale::ColorScaleStep, ActiveTheme};
 use gpui::{
     div, prelude::FluentBuilder, px, relative, IntoElement, ParentElement, RenderOnce, Styled,
     WindowContext,
@@ -44,7 +44,7 @@ impl RenderOnce for Progress {
             .relative()
             .h(px(self.height))
             .rounded(rounded)
-            .bg(cx.theme().progress_bar.opacity(0.2))
+            .bg(cx.theme().accent.step(cx, ColorScaleStep::THREE))
             .child(
                 div()
                     .absolute()
@@ -52,7 +52,7 @@ impl RenderOnce for Progress {
                     .left_0()
                     .h_full()
                     .w(relative_w)
-                    .bg(cx.theme().progress_bar)
+                    .bg(cx.theme().accent.step(cx, ColorScaleStep::NINE))
                     .map(|this| match self.value {
                         v if v >= 100. => this.rounded(rounded),
                         _ => this.rounded_l(rounded),
diff --git a/crates/ui/src/radio.rs b/crates/ui/src/radio.rs
index 9d6051e..13b0149 100644
--- a/crates/ui/src/radio.rs
+++ b/crates/ui/src/radio.rs
@@ -1,4 +1,8 @@
-use crate::{h_flex, theme::ActiveTheme, IconName};
+use crate::{
+    h_flex,
+    theme::{scale::ColorScaleStep, ActiveTheme},
+    IconName,
+};
 use gpui::{
     div, prelude::FluentBuilder, relative, svg, ElementId, InteractiveElement, IntoElement,
     ParentElement, RenderOnce, SharedString, StatefulInteractiveElement, Styled, WindowContext,
@@ -53,15 +57,14 @@ impl Radio {
 impl RenderOnce for Radio {
     fn render(self, cx: &mut WindowContext) -> impl IntoElement {
         let color = if self.disabled {
-            cx.theme().primary.opacity(0.5)
+            cx.theme().accent.step(cx, ColorScaleStep::FIVE)
         } else {
-            cx.theme().primary
+            cx.theme().accent.step(cx, ColorScaleStep::NINE)
         };
 
         h_flex()
             .id(self.id)
             .gap_x_2()
-            .text_color(cx.theme().foreground)
             .items_center()
             .line_height(relative(1.))
             .child(
@@ -80,9 +83,6 @@ impl RenderOnce for Radio {
                             .left_px()
                             .size_3()
                             .text_color(color)
-                            .when(self.checked, |this| {
-                                this.text_color(cx.theme().primary_foreground)
-                            })
                             .map(|this| match self.checked {
                                 true => this.path(IconName::Check.path()),
                                 false => this,
diff --git a/crates/ui/src/resizable/panel.rs b/crates/ui/src/resizable/panel.rs
index 011bca4..0703c43 100644
--- a/crates/ui/src/resizable/panel.rs
+++ b/crates/ui/src/resizable/panel.rs
@@ -1,15 +1,12 @@
-use std::rc::Rc;
-
+use super::resize_handle;
+use crate::{h_flex, v_flex, AxisExt};
 use gpui::{
     canvas, div, prelude::FluentBuilder, px, relative, Along, AnyElement, AnyView, Axis, Bounds,
     Element, Entity, EntityId, EventEmitter, IntoElement, IsZero, MouseMoveEvent, MouseUpEvent,
     ParentElement, Pixels, Render, StatefulInteractiveElement as _, Style, Styled, View,
     ViewContext, VisualContext as _, WeakView, WindowContext,
 };
-
-use crate::{h_flex, v_flex, AxisExt};
-
-use super::resize_handle;
+use std::rc::Rc;
 
 pub(crate) const PANEL_MIN_SIZE: Pixels = px(100.);
 
@@ -237,7 +234,9 @@ impl ResizablePanelGroup {
         }
     }
 }
+
 impl EventEmitter<ResizablePanelEvent> for ResizablePanelGroup {}
+
 impl Render for ResizablePanelGroup {
     fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
         let view = cx.view().clone();
diff --git a/crates/ui/src/resizable/resize_handle.rs b/crates/ui/src/resizable/resize_handle.rs
index 324c90f..0c5ba5c 100644
--- a/crates/ui/src/resizable/resize_handle.rs
+++ b/crates/ui/src/resizable/resize_handle.rs
@@ -1,11 +1,13 @@
+use crate::{
+    theme::{scale::ColorScaleStep, ActiveTheme as _},
+    AxisExt as _,
+};
 use gpui::{
     div, prelude::FluentBuilder as _, px, Axis, Div, ElementId, InteractiveElement, IntoElement,
     ParentElement as _, Pixels, RenderOnce, Stateful, StatefulInteractiveElement, Styled as _,
     WindowContext,
 };
 
-use crate::{theme::ActiveTheme as _, AxisExt as _};
-
 pub(crate) const HANDLE_PADDING: Pixels = px(4.);
 pub(crate) const HANDLE_SIZE: Pixels = px(1.);
 
@@ -34,6 +36,7 @@ impl InteractiveElement for ResizeHandle {
         self.base.interactivity()
     }
 }
+
 impl StatefulInteractiveElement for ResizeHandle {}
 
 impl RenderOnce for ResizeHandle {
@@ -62,7 +65,7 @@ impl RenderOnce for ResizeHandle {
             })
             .child(
                 div()
-                    .bg(cx.theme().border)
+                    .bg(cx.theme().base.step(cx, ColorScaleStep::THREE))
                     .when(self.axis.is_horizontal(), |this| {
                         this.h_full().w(HANDLE_SIZE)
                     })
diff --git a/crates/ui/src/root.rs b/crates/ui/src/root.rs
index 9573fca..f01ab4a 100644
--- a/crates/ui/src/root.rs
+++ b/crates/ui/src/root.rs
@@ -1,3 +1,9 @@
+use crate::{
+    modal::Modal,
+    notification::{Notification, NotificationList},
+    theme::{scale::ColorScaleStep, ActiveTheme},
+    window_border,
+};
 use gpui::{
     div, AnyView, FocusHandle, InteractiveElement, IntoElement, ParentElement as _, Render, Styled,
     View, ViewContext, VisualContext as _, WindowContext,
@@ -7,13 +13,6 @@ use std::{
     rc::Rc,
 };
 
-use crate::{
-    modal::Modal,
-    notification::{Notification, NotificationList},
-    theme::ActiveTheme,
-    window_border,
-};
-
 /// Extension trait for [`WindowContext`] and [`ViewContext`] to add drawer functionality.
 pub trait ContextModal: Sized {
     /// Opens a Modal.
@@ -268,8 +267,8 @@ impl Render for Root {
                 .relative()
                 .size_full()
                 .font_family(".SystemUIFont")
-                .bg(cx.theme().background)
-                .text_color(cx.theme().foreground)
+                .bg(cx.theme().base.step(cx, ColorScaleStep::ONE))
+                .text_color(cx.theme().base.step(cx, ColorScaleStep::TWELVE))
                 .child(self.view.clone()),
         )
     }
diff --git a/crates/ui/src/skeleton.rs b/crates/ui/src/skeleton.rs
index 61ab040..34302bd 100644
--- a/crates/ui/src/skeleton.rs
+++ b/crates/ui/src/skeleton.rs
@@ -1,4 +1,4 @@
-use crate::theme::ActiveTheme;
+use crate::theme::{scale::ColorScaleStep, ActiveTheme};
 use gpui::{
     bounce, div, ease_in_out, Animation, AnimationExt, Div, IntoElement, ParentElement as _,
     RenderOnce, Styled,
@@ -33,16 +33,18 @@ impl Styled for Skeleton {
 impl RenderOnce for Skeleton {
     fn render(self, cx: &mut gpui::WindowContext) -> impl IntoElement {
         div().child(
-            self.base.bg(cx.theme().skeleton).with_animation(
-                "skeleton",
-                Animation::new(Duration::from_secs(2))
-                    .repeat()
-                    .with_easing(bounce(ease_in_out)),
-                move |this, delta| {
-                    let v = 1.0 - delta * 0.5;
-                    this.opacity(v)
-                },
-            ),
+            self.base
+                .bg(cx.theme().base.step(cx, ColorScaleStep::THREE))
+                .with_animation(
+                    "skeleton",
+                    Animation::new(Duration::from_secs(2))
+                        .repeat()
+                        .with_easing(bounce(ease_in_out)),
+                    move |this, delta| {
+                        let v = 1.0 - delta * 0.5;
+                        this.opacity(v)
+                    },
+                ),
         )
     }
 }
diff --git a/crates/ui/src/slider.rs b/crates/ui/src/slider.rs
deleted file mode 100644
index 731f480..0000000
--- a/crates/ui/src/slider.rs
+++ /dev/null
@@ -1,196 +0,0 @@
-use crate::{theme::ActiveTheme, tooltip::Tooltip};
-use gpui::{
-    canvas, div, prelude::FluentBuilder as _, px, relative, Axis, Bounds, DragMoveEvent, EntityId,
-    EventEmitter, InteractiveElement, IntoElement, MouseButton, MouseDownEvent, ParentElement as _,
-    Pixels, Point, Render, StatefulInteractiveElement as _, Styled, ViewContext,
-    VisualContext as _,
-};
-
-#[derive(Clone, Render)]
-pub struct DragThumb(EntityId);
-
-pub enum SliderEvent {
-    Change(f32),
-}
-
-/// A Slider element.
-pub struct Slider {
-    axis: Axis,
-    min: f32,
-    max: f32,
-    step: f32,
-    value: f32,
-    bounds: Bounds<Pixels>,
-}
-
-impl Slider {
-    fn new(axis: Axis) -> Self {
-        Self {
-            axis,
-            min: 0.0,
-            max: 100.0,
-            step: 1.0,
-            value: 0.0,
-            bounds: Bounds::default(),
-        }
-    }
-
-    pub fn horizontal() -> Self {
-        Self::new(Axis::Horizontal)
-    }
-
-    /// Set the minimum value of the slider, default: 0.0
-    pub fn min(mut self, min: f32) -> Self {
-        self.min = min;
-        self
-    }
-
-    /// Set the maximum value of the slider, default: 100.0
-    pub fn max(mut self, max: f32) -> Self {
-        self.max = max;
-        self
-    }
-
-    /// Set the step value of the slider, default: 1.0
-    pub fn step(mut self, step: f32) -> Self {
-        self.step = step;
-        self
-    }
-
-    /// Set the default value of the slider, default: 0.0
-    pub fn default_value(mut self, value: f32) -> Self {
-        self.value = value;
-        self
-    }
-
-    /// Set the value of the slider.
-    pub fn set_value(&mut self, value: f32, cx: &mut gpui::ViewContext<Self>) {
-        self.value = value;
-        cx.notify();
-    }
-
-    /// Return percentage value of the slider, range of 0.0..1.0
-    fn relative_value(&self) -> f32 {
-        let step = self.step;
-        let value = self.value;
-        let min = self.min;
-        let max = self.max;
-
-        let relative_value = (value - min) / (max - min);
-        let relative_step = step / (max - min);
-
-        let relative_value = (relative_value / relative_step).round() * relative_step;
-        relative_value.clamp(0.0, 1.0)
-    }
-
-    /// Update value by mouse position
-    fn update_value_by_position(
-        &mut self,
-        position: Point<Pixels>,
-        cx: &mut gpui::ViewContext<Self>,
-    ) {
-        let bounds = self.bounds;
-        let axis = self.axis;
-        let min = self.min;
-        let max = self.max;
-        let step = self.step;
-
-        let value = match axis {
-            Axis::Horizontal => {
-                let relative = (position.x - bounds.left()) / bounds.size.width;
-                min + (max - min) * relative
-            }
-            Axis::Vertical => {
-                let relative = (position.y - bounds.top()) / bounds.size.height;
-                max - (max - min) * relative
-            }
-        };
-
-        let value = (value / step).round() * step;
-
-        self.value = value.clamp(self.min, self.max);
-        cx.emit(SliderEvent::Change(self.value));
-        cx.notify();
-    }
-
-    fn render_thumb(&self, cx: &mut ViewContext<Self>) -> impl gpui::IntoElement {
-        let value = self.value;
-        let entity_id = cx.entity_id();
-
-        div()
-            .id("slider-thumb")
-            .on_drag(DragThumb(entity_id), |drag, _, cx| {
-                cx.stop_propagation();
-                cx.new_view(|_| drag.clone())
-            })
-            .on_drag_move(cx.listener(
-                move |view, e: &DragMoveEvent<DragThumb>, cx| match e.drag(cx) {
-                    DragThumb(id) => {
-                        if *id != entity_id {
-                            return;
-                        }
-
-                        // set value by mouse position
-                        view.update_value_by_position(e.event.position, cx)
-                    }
-                },
-            ))
-            .absolute()
-            .top(px(-5.))
-            .left(relative(self.relative_value()))
-            .ml(-px(8.))
-            .size_4()
-            .rounded_full()
-            .border_1()
-            .border_color(cx.theme().slider_bar.opacity(0.9))
-            .when(cx.theme().shadow, |this| this.shadow_md())
-            .bg(cx.theme().slider_thumb)
-            .tooltip(move |cx| Tooltip::new(format!("{}", value), cx))
-    }
-
-    fn on_mouse_down(&mut self, event: &MouseDownEvent, cx: &mut gpui::ViewContext<Self>) {
-        self.update_value_by_position(event.position, cx);
-    }
-}
-
-impl EventEmitter<SliderEvent> for Slider {}
-
-impl Render for Slider {
-    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
-        div()
-            .id("slider")
-            .on_mouse_down(MouseButton::Left, cx.listener(Self::on_mouse_down))
-            .h_5()
-            .child(
-                div()
-                    .id("slider-bar")
-                    .relative()
-                    .w_full()
-                    .my_1p5()
-                    .h_1p5()
-                    .bg(cx.theme().slider_bar.opacity(0.2))
-                    .active(|this| this.bg(cx.theme().slider_bar.opacity(0.4)))
-                    .rounded(px(3.))
-                    .child(
-                        div()
-                            .absolute()
-                            .top_0()
-                            .left_0()
-                            .h_full()
-                            .w(relative(self.relative_value()))
-                            .bg(cx.theme().slider_bar)
-                            .rounded_l(px(3.)),
-                    )
-                    .child(self.render_thumb(cx))
-                    .child({
-                        let view = cx.view().clone();
-                        canvas(
-                            move |bounds, cx| view.update(cx, |r, _| r.bounds = bounds),
-                            |_, _, _| {},
-                        )
-                        .absolute()
-                        .size_full()
-                    }),
-            )
-    }
-}
diff --git a/crates/ui/src/styled.rs b/crates/ui/src/styled.rs
index e854699..82f43ec 100644
--- a/crates/ui/src/styled.rs
+++ b/crates/ui/src/styled.rs
@@ -1,6 +1,6 @@
 use crate::{
     scroll::{Scrollable, ScrollbarAxis},
-    theme::ActiveTheme,
+    theme::{scale::ColorScaleStep, ActiveTheme},
 };
 use gpui::{div, px, Axis, Div, Element, ElementId, EntityId, Pixels, Styled, WindowContext};
 use serde::{Deserialize, Serialize};
@@ -64,9 +64,9 @@ pub trait StyledExt: Styled + Sized {
 
     /// Set as Popover style
     fn popover_style(self, cx: &mut WindowContext) -> Self {
-        self.bg(cx.theme().popover)
+        self.bg(cx.theme().background)
             .border_1()
-            .border_color(cx.theme().border)
+            .border_color(cx.theme().base.step(cx, ColorScaleStep::FOUR))
             .shadow_lg()
             .rounded_lg()
     }
diff --git a/crates/ui/src/switch.rs b/crates/ui/src/switch.rs
index 11a6427..788ec27 100644
--- a/crates/ui/src/switch.rs
+++ b/crates/ui/src/switch.rs
@@ -105,7 +105,7 @@ impl Element for Switch {
             let on_click = self.on_click.clone();
 
             let (bg, toggle_bg) = match self.checked {
-                true => (theme.primary, theme.background),
+                true => (theme.colors.primary, theme.background),
                 false => (theme.input, theme.background),
             };
 
diff --git a/crates/ui/src/tab/tab_bar.rs b/crates/ui/src/tab/tab_bar.rs
index 4163514..0d1792b 100644
--- a/crates/ui/src/tab/tab_bar.rs
+++ b/crates/ui/src/tab/tab_bar.rs
@@ -1,11 +1,12 @@
-use crate::h_flex;
-use crate::theme::ActiveTheme;
-use gpui::prelude::FluentBuilder as _;
-use gpui::{
-    div, AnyElement, Div, ElementId, IntoElement, ParentElement, RenderOnce, ScrollHandle,
-    StatefulInteractiveElement as _, Styled, WindowContext,
+use crate::{
+    h_flex,
+    theme::{scale::ColorScaleStep, ActiveTheme},
+};
+use gpui::{
+    div, prelude::FluentBuilder as _, px, AnyElement, Div, ElementId, InteractiveElement,
+    IntoElement, ParentElement, RenderOnce, ScrollHandle, StatefulInteractiveElement as _, Styled,
+    WindowContext,
 };
-use gpui::{px, InteractiveElement};
 use smallvec::SmallVec;
 
 #[derive(IntoElement)]
@@ -70,8 +71,7 @@ impl RenderOnce for TabBar {
             .flex()
             .flex_none()
             .items_center()
-            .bg(cx.theme().tab_bar)
-            .text_color(cx.theme().tab_foreground)
+            .bg(cx.theme().base.step(cx, ColorScaleStep::TWO))
             .child(
                 div()
                     .id("border-b")
@@ -79,7 +79,7 @@ impl RenderOnce for TabBar {
                     .bottom_0()
                     .size_full()
                     .border_b_1()
-                    .border_color(cx.theme().border),
+                    .border_color(cx.theme().base.step(cx, ColorScaleStep::THREE)),
             )
             .when_some(self.prefix, |this, prefix| this.child(prefix))
             .child(
diff --git a/crates/ui/src/theme/mod.rs b/crates/ui/src/theme/mod.rs
index 5c4eee9..8c4ad09 100644
--- a/crates/ui/src/theme/mod.rs
+++ b/crates/ui/src/theme/mod.rs
@@ -1,9 +1,10 @@
 use crate::scroll::ScrollbarShow;
-use colors::hsl;
+use colors::{default_color_scales, hsl};
 use gpui::{
     blue, hsla, transparent_black, AppContext, Global, Hsla, ModelContext, SharedString,
     ViewContext, WindowAppearance, WindowContext,
 };
+use scale::ColorScaleSet;
 use std::ops::{Deref, DerefMut};
 
 pub mod colors;
@@ -11,11 +12,11 @@ pub mod scale;
 
 #[derive(Debug, Clone, Copy, Default)]
 pub struct ThemeColors {
+    pub background: Hsla,
     pub border: Hsla,
     pub window_border: Hsla,
     pub accent: Hsla,
     pub accent_foreground: Hsla,
-    pub background: Hsla,
     pub card: Hsla,
     pub card_foreground: Hsla,
     pub danger: Hsla,
@@ -68,9 +69,9 @@ pub struct ThemeColors {
 impl ThemeColors {
     pub fn light() -> Self {
         Self {
+            background: hsl(0.0, 0.0, 100.),
             accent: hsl(240.0, 5.0, 96.0),
             accent_foreground: hsl(240.0, 5.9, 10.0),
-            background: hsl(0.0, 0.0, 100.),
             border: hsl(240.0, 5.9, 90.0),
             window_border: hsl(240.0, 5.9, 78.0),
             card: hsl(0.0, 0.0, 100.0),
@@ -125,9 +126,9 @@ impl ThemeColors {
 
     pub fn dark() -> Self {
         Self {
+            background: hsl(0.0, 0.0, 8.0),
             accent: hsl(240.0, 3.7, 15.9),
             accent_foreground: hsl(0.0, 0.0, 78.0),
-            background: hsl(0.0, 0.0, 8.0),
             border: hsl(240.0, 3.7, 16.9),
             window_border: hsl(240.0, 3.7, 28.0),
             card: hsl(0.0, 0.0, 8.0),
@@ -291,10 +292,14 @@ pub fn init(cx: &mut AppContext) {
     Theme::sync_system_appearance(cx)
 }
 
-#[derive(Debug, Clone)]
 pub struct Theme {
     pub colors: ThemeColors,
-    pub mode: ThemeMode,
+    /// Base colors.
+    pub base: ColorScaleSet,
+    /// Accent colors.
+    pub accent: ColorScaleSet,
+    /// Window appearances.
+    pub appearance: Appearance,
     pub font_family: SharedString,
     pub font_size: f32,
     pub radius: f32,
@@ -331,78 +336,26 @@ impl Theme {
         cx.global_mut::<Theme>()
     }
 
-    /// Apply a mask color to the theme.
-    pub fn apply_color(&mut self, mask_color: Hsla) {
-        self.title_bar = self.title_bar.apply(mask_color);
-        self.title_bar_border = self.title_bar_border.apply(mask_color);
-        self.background = self.background.apply(mask_color);
-        self.foreground = self.foreground.apply(mask_color);
-        self.card = self.card.apply(mask_color);
-        self.card_foreground = self.card_foreground.apply(mask_color);
-        self.popover = self.popover.apply(mask_color);
-        self.popover_foreground = self.popover_foreground.apply(mask_color);
-        self.primary = self.primary.apply(mask_color);
-        self.primary_hover = self.primary_hover.apply(mask_color);
-        self.primary_active = self.primary_active.apply(mask_color);
-        self.primary_foreground = self.primary_foreground.apply(mask_color);
-        self.secondary = self.secondary.apply(mask_color);
-        self.secondary_hover = self.secondary_hover.apply(mask_color);
-        self.secondary_active = self.secondary_active.apply(mask_color);
-        self.secondary_foreground = self.secondary_foreground.apply(mask_color);
-        self.muted = self.muted.apply(mask_color);
-        self.muted_foreground = self.muted_foreground.apply(mask_color);
-        self.accent = self.accent.apply(mask_color);
-        self.accent_foreground = self.accent_foreground.apply(mask_color);
-        self.border = self.border.apply(mask_color);
-        self.input = self.input.apply(mask_color);
-        self.ring = self.ring.apply(mask_color);
-        self.scrollbar = self.scrollbar.apply(mask_color);
-        self.scrollbar_thumb = self.scrollbar_thumb.apply(mask_color);
-        self.scrollbar_thumb_hover = self.scrollbar_thumb_hover.apply(mask_color);
-        self.drag_border = self.drag_border.apply(mask_color);
-        self.drop_target = self.drop_target.apply(mask_color);
-        self.tab_bar = self.tab_bar.apply(mask_color);
-        self.tab = self.tab.apply(mask_color);
-        self.tab_active = self.tab_active.apply(mask_color);
-        self.tab_foreground = self.tab_foreground.apply(mask_color);
-        self.tab_active_foreground = self.tab_active_foreground.apply(mask_color);
-        self.progress_bar = self.progress_bar.apply(mask_color);
-        self.slider_bar = self.slider_bar.apply(mask_color);
-        self.slider_thumb = self.slider_thumb.apply(mask_color);
-        self.list = self.list.apply(mask_color);
-        self.list_even = self.list_even.apply(mask_color);
-        self.list_head = self.list_head.apply(mask_color);
-        self.list_active = self.list_active.apply(mask_color);
-        self.list_active_border = self.list_active_border.apply(mask_color);
-        self.list_hover = self.list_hover.apply(mask_color);
-        self.link = self.link.apply(mask_color);
-        self.link_hover = self.link_hover.apply(mask_color);
-        self.link_active = self.link_active.apply(mask_color);
-        self.skeleton = self.skeleton.apply(mask_color);
-        self.title_bar = self.title_bar.apply(mask_color);
-        self.title_bar_border = self.title_bar_border.apply(mask_color);
-    }
-
     /// Sync the theme with the system appearance
     pub fn sync_system_appearance(cx: &mut AppContext) {
         match cx.window_appearance() {
             WindowAppearance::Dark | WindowAppearance::VibrantDark => {
-                Self::change(ThemeMode::Dark, cx)
+                Self::change(Appearance::Dark, cx)
             }
             WindowAppearance::Light | WindowAppearance::VibrantLight => {
-                Self::change(ThemeMode::Light, cx)
+                Self::change(Appearance::Light, cx)
             }
         }
     }
 
-    pub fn change(mode: ThemeMode, cx: &mut AppContext) {
+    pub fn change(mode: Appearance, cx: &mut AppContext) {
         let colors = match mode {
-            ThemeMode::Light => ThemeColors::light(),
-            ThemeMode::Dark => ThemeColors::dark(),
+            Appearance::Light => ThemeColors::light(),
+            Appearance::Dark => ThemeColors::dark(),
         };
 
         let mut theme = Theme::from(colors);
-        theme.mode = mode;
+        theme.appearance = mode;
 
         cx.set_global(theme);
         cx.refresh();
@@ -411,8 +364,12 @@ impl Theme {
 
 impl From<ThemeColors> for Theme {
     fn from(colors: ThemeColors) -> Self {
+        let color_scales = default_color_scales();
+
         Theme {
-            mode: ThemeMode::default(),
+            base: color_scales.gray,
+            accent: color_scales.yellow,
+            appearance: Appearance::default(),
             transparent: Hsla::transparent_black(),
             font_size: 16.0,
             font_family: if cfg!(target_os = "macos") {
@@ -431,13 +388,13 @@ impl From<ThemeColors> for Theme {
 }
 
 #[derive(Debug, Clone, Copy, Default, PartialEq, PartialOrd, Eq)]
-pub enum ThemeMode {
+pub enum Appearance {
     #[default]
     Light,
     Dark,
 }
 
-impl ThemeMode {
+impl Appearance {
     pub fn is_dark(&self) -> bool {
         matches!(self, Self::Dark)
     }
diff --git a/crates/ui/src/theme/scale.rs b/crates/ui/src/theme/scale.rs
index a0cab9a..066d90d 100644
--- a/crates/ui/src/theme/scale.rs
+++ b/crates/ui/src/theme/scale.rs
@@ -1,4 +1,4 @@
-use crate::theme::{ActiveTheme, ThemeMode};
+use crate::theme::{ActiveTheme, Appearance};
 use gpui::{AppContext, Hsla, SharedString};
 
 /// A collection of colors that are used to style the UI.
@@ -280,16 +280,16 @@ impl ColorScaleSet {
     }
 
     pub fn step(&self, cx: &AppContext, step: ColorScaleStep) -> Hsla {
-        match cx.theme().mode {
-            ThemeMode::Light => self.light().step(step),
-            ThemeMode::Dark => self.dark().step(step),
+        match cx.theme().appearance {
+            Appearance::Light => self.light().step(step),
+            Appearance::Dark => self.dark().step(step),
         }
     }
 
     pub fn step_alpha(&self, cx: &AppContext, step: ColorScaleStep) -> Hsla {
-        match cx.theme().mode {
-            ThemeMode::Light => self.light_alpha.step(step),
-            ThemeMode::Dark => self.dark_alpha.step(step),
+        match cx.theme().appearance {
+            Appearance::Light => self.light_alpha.step(step),
+            Appearance::Dark => self.dark_alpha.step(step),
         }
     }
 }
diff --git a/crates/ui/src/title_bar.rs b/crates/ui/src/title_bar.rs
index 1e98df8..ba01582 100644
--- a/crates/ui/src/title_bar.rs
+++ b/crates/ui/src/title_bar.rs
@@ -1,4 +1,8 @@
-use crate::{h_flex, theme::ActiveTheme, Icon, IconName, InteractiveElementExt as _, Sizable as _};
+use crate::{
+    h_flex,
+    theme::{scale::ColorScaleStep, ActiveTheme},
+    Icon, IconName, InteractiveElementExt as _, Sizable as _,
+};
 use gpui::{
     black, div, prelude::FluentBuilder as _, px, relative, white, AnyElement, ClickEvent, Div,
     Element, Hsla, InteractiveElement as _, IntoElement, MouseButton, ParentElement, Pixels,
@@ -6,9 +10,8 @@ use gpui::{
 };
 use std::rc::Rc;
 
-pub const HEIGHT: Pixels = px(34.);
-pub const TITLE_BAR_HEIGHT: Pixels = px(35.);
-
+const HEIGHT: Pixels = px(34.);
+const TITLE_BAR_HEIGHT: Pixels = px(35.);
 #[cfg(target_os = "macos")]
 const TITLE_BAR_LEFT_PADDING: Pixels = px(80.);
 #[cfg(not(target_os = "macos"))]
@@ -59,14 +62,14 @@ impl Default for TitleBar {
 // We don't need implementation the click event for the control buttons.
 // If user clicked in the bounds, the window event will be triggered.
 #[derive(IntoElement, Clone)]
-enum ControlIcon {
+enum Control {
     Minimize,
     Restore,
     Maximize,
     Close { on_close_window: OnCloseWindow },
 }
 
-impl ControlIcon {
+impl Control {
     fn minimize() -> Self {
         Self::Minimize
     }
@@ -106,7 +109,7 @@ impl ControlIcon {
     }
 
     fn fg(&self, cx: &WindowContext) -> Hsla {
-        if cx.theme().mode.is_dark() {
+        if cx.theme().appearance.is_dark() {
             white()
         } else {
             black()
@@ -114,7 +117,7 @@ impl ControlIcon {
     }
 
     fn hover_fg(&self, cx: &WindowContext) -> Hsla {
-        if self.is_close() || cx.theme().mode.is_dark() {
+        if self.is_close() || cx.theme().appearance.is_dark() {
             white()
         } else {
             black()
@@ -129,7 +132,7 @@ impl ControlIcon {
                 b: 32.0 / 255.0,
                 a: 1.0,
             }
-        } else if cx.theme().mode.is_dark() {
+        } else if cx.theme().appearance.is_dark() {
             Rgba {
                 r: 0.9,
                 g: 0.9,
@@ -147,7 +150,7 @@ impl ControlIcon {
     }
 }
 
-impl RenderOnce for ControlIcon {
+impl RenderOnce for Control {
     fn render(self, cx: &mut WindowContext) -> impl IntoElement {
         let fg = self.fg(cx);
         let hover_fg = self.hover_fg(cx);
@@ -155,7 +158,7 @@ impl RenderOnce for ControlIcon {
         let icon = self.clone();
         let is_linux = cfg!(target_os = "linux");
         let on_close_window = match &icon {
-            ControlIcon::Close { on_close_window } => on_close_window.clone(),
+            Control::Close { on_close_window } => on_close_window.clone(),
             _ => None,
         };
 
@@ -214,14 +217,14 @@ impl RenderOnce for WindowControls {
                     .justify_center()
                     .content_stretch()
                     .h_full()
-                    .child(ControlIcon::minimize())
+                    .child(Control::minimize())
                     .child(if cx.is_maximized() {
-                        ControlIcon::restore()
+                        Control::restore()
                     } else {
-                        ControlIcon::maximize()
+                        Control::maximize()
                     }),
             )
-            .child(ControlIcon::close(self.on_close_window))
+            .child(Control::close(self.on_close_window))
     }
 }
 
@@ -249,8 +252,8 @@ impl RenderOnce for TitleBar {
                 .justify_between()
                 .h(HEIGHT)
                 .border_b_1()
-                .border_color(cx.theme().title_bar_border.opacity(0.7))
-                .bg(cx.theme().title_bar)
+                .border_color(cx.theme().base.step(cx, ColorScaleStep::THREE))
+                .bg(cx.theme().base.step(cx, ColorScaleStep::ONE))
                 .when(cx.is_fullscreen(), |this| this.pl(px(12.)))
                 .on_double_click(|_, cx| cx.zoom_window())
                 .child(
@@ -292,7 +295,6 @@ impl IntoElement for TitleBarElement {
 
 impl Element for TitleBarElement {
     type RequestLayoutState = ();
-
     type PrepaintState = ();
 
     fn id(&self) -> Option<gpui::ElementId> {
@@ -328,7 +330,6 @@ impl Element for TitleBarElement {
     ) -> Self::PrepaintState {
     }
 
-    #[allow(unused_variables)]
     fn paint(
         &mut self,
         _: Option<&gpui::GlobalElementId>,
@@ -338,6 +339,7 @@ impl Element for TitleBarElement {
         cx: &mut WindowContext,
     ) {
         use gpui::{MouseButton, MouseMoveEvent, MouseUpEvent};
+
         cx.on_mouse_event(move |ev: &MouseMoveEvent, _, cx: &mut WindowContext| {
             if bounds.contains(&ev.position) && ev.pressed_button == Some(MouseButton::Left) {
                 cx.start_window_move();
diff --git a/crates/ui/src/tooltip.rs b/crates/ui/src/tooltip.rs
index 61b7f85..4b8cb66 100644
--- a/crates/ui/src/tooltip.rs
+++ b/crates/ui/src/tooltip.rs
@@ -1,18 +1,16 @@
+use crate::theme::{scale::ColorScaleStep, ActiveTheme};
 use gpui::{
-    div, px, AnyView, IntoElement, ParentElement, Render, SharedString, Styled, ViewContext,
+    div, px, IntoElement, ParentElement, Render, SharedString, Styled, View, ViewContext,
     VisualContext, WindowContext,
 };
 
-use crate::theme::ActiveTheme;
-
 pub struct Tooltip {
     text: SharedString,
 }
 
 impl Tooltip {
-    #[allow(clippy::new_ret_no_self)]
-    pub fn new(text: impl Into<SharedString>, cx: &mut WindowContext) -> AnyView {
-        cx.new_view(|_| Self { text: text.into() }).into()
+    pub fn new(text: impl Into<SharedString>, cx: &mut WindowContext) -> View<Self> {
+        cx.new_view(|_| Self { text: text.into() })
     }
 }
 
@@ -23,10 +21,8 @@ impl Render for Tooltip {
             div()
                 .font_family(".SystemUIFont")
                 .m_3()
-                .bg(cx.theme().popover)
-                .text_color(cx.theme().popover_foreground)
-                .border_1()
-                .border_color(cx.theme().border)
+                .bg(cx.theme().base.step(cx, ColorScaleStep::TWELVE))
+                .text_color(cx.theme().base.step(cx, ColorScaleStep::ONE))
                 .shadow_md()
                 .rounded(px(6.))
                 .py_0p5()
diff --git a/crates/ui/src/window_border.rs b/crates/ui/src/window_border.rs
index 67a8728..187256c 100644
--- a/crates/ui/src/window_border.rs
+++ b/crates/ui/src/window_border.rs
@@ -1,19 +1,17 @@
+use crate::theme::ActiveTheme;
 use gpui::{
     canvas, div, point, prelude::FluentBuilder as _, px, AnyElement, Bounds, CursorStyle,
     Decorations, Edges, Hsla, InteractiveElement as _, IntoElement, MouseButton, ParentElement,
     Pixels, Point, RenderOnce, ResizeEdge, Size, Styled as _, WindowContext,
 };
 
-use crate::theme::ActiveTheme;
-
+pub(crate) const BORDER_SIZE: Pixels = Pixels(1.0);
+pub(crate) const BORDER_RADIUS: Pixels = Pixels(0.0);
 #[cfg(not(target_os = "linux"))]
 pub(crate) const SHADOW_SIZE: Pixels = Pixels(0.0);
 #[cfg(target_os = "linux")]
 pub(crate) const SHADOW_SIZE: Pixels = Pixels(12.0);
 
-pub(crate) const BORDER_SIZE: Pixels = Pixels(1.0);
-pub(crate) const BORDER_RADIUS: Pixels = Pixels(0.0);
-
 /// Create a new window border.
 pub fn window_border() -> WindowBorder {
     WindowBorder::new()