From 56f9543a95ded43066505521f6178758ad139e90 Mon Sep 17 00:00:00 2001
From: K Simmons <keith@zed.dev>
Date: Wed, 21 Sep 2022 12:39:59 -0700
Subject: [PATCH 01/50] reworked style tree to use colorScheme instead of old
 theme. Very limited style for now

---
 Cargo.lock                                    |  17 -
 crates/chat_panel/Cargo.toml                  |  20 -
 crates/chat_panel/src/chat_panel.rs           | 433 ------------------
 crates/terminal/src/mappings/colors.rs        | 130 +++---
 crates/terminal/src/terminal.rs               |   2 +-
 .../terminal/src/terminal_container_view.rs   |  12 +-
 crates/terminal/src/terminal_element.rs       |  25 +-
 crates/terminal/src/terminal_view.rs          |   1 -
 crates/theme/src/theme.rs                     |  19 -
 crates/zed/Cargo.toml                         |   1 -
 crates/zed/src/main.rs                        |   1 -
 styles/src/buildThemes.ts                     |  22 +-
 styles/src/colorSchemes.ts                    |  31 ++
 styles/src/styleTree/app.ts                   |  42 +-
 styles/src/styleTree/chatPanel.ts             | 108 -----
 styles/src/styleTree/commandPalette.ts        |  15 +-
 styles/src/styleTree/components.ts            | 183 +++++---
 styles/src/styleTree/contactFinder.ts         |  19 +-
 styles/src/styleTree/contactNotification.ts   |  21 +-
 styles/src/styleTree/contactsPanel.ts         |  67 +--
 styles/src/styleTree/contextMenu.ts           |  33 +-
 styles/src/styleTree/editor.ts                | 219 ++++++---
 styles/src/styleTree/hoverPopover.ts          |  38 +-
 styles/src/styleTree/picker.ts                |  38 +-
 styles/src/styleTree/projectDiagnostics.ts    |  11 +-
 styles/src/styleTree/projectPanel.ts          |  27 +-
 styles/src/styleTree/search.ts                |  50 +-
 styles/src/styleTree/statusBar.ts             |  77 ++--
 styles/src/styleTree/tabBar.ts                |  52 ++-
 styles/src/styleTree/terminal.ts              |  79 ++--
 styles/src/styleTree/tooltip.ts               |  20 +-
 styles/src/styleTree/updateNotification.ts    |  17 +-
 styles/src/styleTree/workspace.ts             | 101 ++--
 styles/src/themes.ts                          |  31 --
 styles/src/themes/abruzzo.ts                  |   4 +-
 styles/src/themes/andromeda.ts                |   4 +-
 styles/src/themes/brushtrees.ts               |   6 +-
 styles/src/themes/cave.ts                     |   6 +-
 styles/src/themes/common/base16.ts            | 288 ------------
 styles/src/themes/common/colorScheme.ts       |  83 ++++
 styles/src/themes/common/ramps.ts             | 176 +++++++
 styles/src/themes/common/theme.ts             | 164 -------
 styles/src/themes/one-dark.ts                 |   4 +-
 styles/src/themes/one-light.ts                |   4 +-
 styles/src/themes/rose-pine-dawn.ts           |   4 +-
 styles/src/themes/rose-pine-moon.ts           |   4 +-
 styles/src/themes/rose-pine.ts                |   4 +-
 styles/src/themes/sandcastle.ts               |   4 +-
 styles/src/themes/solarized.ts                |   6 +-
 styles/src/themes/sulphurpool.ts              |   6 +-
 styles/src/themes/summercamp.ts               |   4 +-
 styles/src/themes/summerfruit.ts              |   6 +-
 styles/src/themes/template.ts                 |  10 +-
 53 files changed, 1016 insertions(+), 1733 deletions(-)
 delete mode 100644 crates/chat_panel/Cargo.toml
 delete mode 100644 crates/chat_panel/src/chat_panel.rs
 create mode 100644 styles/src/colorSchemes.ts
 delete mode 100644 styles/src/styleTree/chatPanel.ts
 delete mode 100644 styles/src/themes.ts
 delete mode 100644 styles/src/themes/common/base16.ts
 create mode 100644 styles/src/themes/common/colorScheme.ts
 create mode 100644 styles/src/themes/common/ramps.ts
 delete mode 100644 styles/src/themes/common/theme.ts

diff --git a/Cargo.lock b/Cargo.lock
index dad1219ddf33923c80845edef255020bd3e4813e..ea877a39d26286dc99d98aea9ea60769b70a7a27 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -814,22 +814,6 @@ version = "1.0.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "baf1de4339761588bc0619e3cbc0120ee582ebb74b53b4efbf79117bd2da40fd"
 
-[[package]]
-name = "chat_panel"
-version = "0.1.0"
-dependencies = [
- "client",
- "editor",
- "gpui",
- "menu",
- "postage",
- "settings",
- "theme",
- "time 0.3.11",
- "util",
- "workspace",
-]
-
 [[package]]
 name = "chrono"
 version = "0.4.19"
@@ -7138,7 +7122,6 @@ dependencies = [
  "auto_update",
  "backtrace",
  "breadcrumbs",
- "chat_panel",
  "chrono",
  "cli",
  "client",
diff --git a/crates/chat_panel/Cargo.toml b/crates/chat_panel/Cargo.toml
deleted file mode 100644
index 3f3a2651b0e63022d21b66bcdeb62ca981d90a55..0000000000000000000000000000000000000000
--- a/crates/chat_panel/Cargo.toml
+++ /dev/null
@@ -1,20 +0,0 @@
-[package]
-name = "chat_panel"
-version = "0.1.0"
-edition = "2021"
-
-[lib]
-path = "src/chat_panel.rs"
-doctest = false
-
-[dependencies]
-client = { path = "../client" }
-editor = { path = "../editor" }
-gpui = { path = "../gpui" }
-menu = { path = "../menu" }
-settings = { path = "../settings" }
-theme = { path = "../theme" }
-util = { path = "../util" }
-workspace = { path = "../workspace" }
-postage = { version = "0.4.1", features = ["futures-traits"] }
-time = { version = "0.3", features = ["serde", "serde-well-known"] }
diff --git a/crates/chat_panel/src/chat_panel.rs b/crates/chat_panel/src/chat_panel.rs
deleted file mode 100644
index 6744ae9339ec027623673901218bd53d90d860d6..0000000000000000000000000000000000000000
--- a/crates/chat_panel/src/chat_panel.rs
+++ /dev/null
@@ -1,433 +0,0 @@
-use client::{
-    channel::{Channel, ChannelEvent, ChannelList, ChannelMessage},
-    Client,
-};
-use editor::Editor;
-use gpui::{
-    actions,
-    elements::*,
-    platform::CursorStyle,
-    views::{ItemType, Select, SelectStyle},
-    AnyViewHandle, AppContext, Entity, ModelHandle, MouseButton, MutableAppContext, RenderContext,
-    Subscription, Task, View, ViewContext, ViewHandle,
-};
-use menu::Confirm;
-use postage::prelude::Stream;
-use settings::{Settings, SoftWrap};
-use std::sync::Arc;
-use time::{OffsetDateTime, UtcOffset};
-use util::{ResultExt, TryFutureExt};
-
-const MESSAGE_LOADING_THRESHOLD: usize = 50;
-
-pub struct ChatPanel {
-    rpc: Arc<Client>,
-    channel_list: ModelHandle<ChannelList>,
-    active_channel: Option<(ModelHandle<Channel>, Subscription)>,
-    message_list: ListState,
-    input_editor: ViewHandle<Editor>,
-    channel_select: ViewHandle<Select>,
-    local_timezone: UtcOffset,
-    _observe_status: Task<()>,
-}
-
-pub enum Event {}
-
-actions!(chat_panel, [LoadMoreMessages]);
-
-pub fn init(cx: &mut MutableAppContext) {
-    cx.add_action(ChatPanel::send);
-    cx.add_action(ChatPanel::load_more_messages);
-}
-
-impl ChatPanel {
-    pub fn new(
-        rpc: Arc<Client>,
-        channel_list: ModelHandle<ChannelList>,
-        cx: &mut ViewContext<Self>,
-    ) -> Self {
-        let input_editor = cx.add_view(|cx| {
-            let mut editor =
-                Editor::auto_height(4, Some(|theme| theme.chat_panel.input_editor.clone()), cx);
-            editor.set_soft_wrap_mode(SoftWrap::EditorWidth, cx);
-            editor
-        });
-        let channel_select = cx.add_view(|cx| {
-            let channel_list = channel_list.clone();
-            Select::new(0, cx, {
-                move |ix, item_type, is_hovered, cx| {
-                    Self::render_channel_name(
-                        &channel_list,
-                        ix,
-                        item_type,
-                        is_hovered,
-                        &cx.global::<Settings>().theme.chat_panel.channel_select,
-                        cx,
-                    )
-                }
-            })
-            .with_style(move |cx| {
-                let theme = &cx.global::<Settings>().theme.chat_panel.channel_select;
-                SelectStyle {
-                    header: theme.header.container,
-                    menu: theme.menu,
-                }
-            })
-        });
-
-        let mut message_list = ListState::new(0, Orientation::Bottom, 1000., cx, {
-            let this = cx.weak_handle();
-            move |_, ix, cx| {
-                let this = this.upgrade(cx).unwrap().read(cx);
-                let message = this.active_channel.as_ref().unwrap().0.read(cx).message(ix);
-                this.render_message(message, cx)
-            }
-        });
-        message_list.set_scroll_handler(|visible_range, cx| {
-            if visible_range.start < MESSAGE_LOADING_THRESHOLD {
-                cx.dispatch_action(LoadMoreMessages);
-            }
-        });
-        let _observe_status = cx.spawn_weak(|this, mut cx| {
-            let mut status = rpc.status();
-            async move {
-                while (status.recv().await).is_some() {
-                    if let Some(this) = this.upgrade(&cx) {
-                        this.update(&mut cx, |_, cx| cx.notify());
-                    } else {
-                        break;
-                    }
-                }
-            }
-        });
-
-        let mut this = Self {
-            rpc,
-            channel_list,
-            active_channel: Default::default(),
-            message_list,
-            input_editor,
-            channel_select,
-            local_timezone: cx.platform().local_timezone(),
-            _observe_status,
-        };
-
-        this.init_active_channel(cx);
-        cx.observe(&this.channel_list, |this, _, cx| {
-            this.init_active_channel(cx);
-        })
-        .detach();
-        cx.observe(&this.channel_select, |this, channel_select, cx| {
-            let selected_ix = channel_select.read(cx).selected_index();
-            let selected_channel = this.channel_list.update(cx, |channel_list, cx| {
-                let available_channels = channel_list.available_channels()?;
-                let channel_id = available_channels.get(selected_ix)?.id;
-                channel_list.get_channel(channel_id, cx)
-            });
-            if let Some(selected_channel) = selected_channel {
-                this.set_active_channel(selected_channel, cx);
-            }
-        })
-        .detach();
-
-        this
-    }
-
-    fn init_active_channel(&mut self, cx: &mut ViewContext<Self>) {
-        let (active_channel, channel_count) = self.channel_list.update(cx, |list, cx| {
-            let channel_count;
-            let mut active_channel = None;
-
-            if let Some(available_channels) = list.available_channels() {
-                channel_count = available_channels.len();
-                if self.active_channel.is_none() {
-                    if let Some(channel_id) = available_channels.first().map(|channel| channel.id) {
-                        active_channel = list.get_channel(channel_id, cx);
-                    }
-                }
-            } else {
-                channel_count = 0;
-            }
-
-            (active_channel, channel_count)
-        });
-
-        if let Some(active_channel) = active_channel {
-            self.set_active_channel(active_channel, cx);
-        } else {
-            self.message_list.reset(0);
-            self.active_channel = None;
-        }
-
-        self.channel_select.update(cx, |select, cx| {
-            select.set_item_count(channel_count, cx);
-        });
-    }
-
-    fn set_active_channel(&mut self, channel: ModelHandle<Channel>, cx: &mut ViewContext<Self>) {
-        if self.active_channel.as_ref().map(|e| &e.0) != Some(&channel) {
-            {
-                let channel = channel.read(cx);
-                self.message_list.reset(channel.message_count());
-                let placeholder = format!("Message #{}", channel.name());
-                self.input_editor.update(cx, move |editor, cx| {
-                    editor.set_placeholder_text(placeholder, cx);
-                });
-            }
-            let subscription = cx.subscribe(&channel, Self::channel_did_change);
-            self.active_channel = Some((channel, subscription));
-        }
-    }
-
-    fn channel_did_change(
-        &mut self,
-        _: ModelHandle<Channel>,
-        event: &ChannelEvent,
-        cx: &mut ViewContext<Self>,
-    ) {
-        match event {
-            ChannelEvent::MessagesUpdated {
-                old_range,
-                new_count,
-            } => {
-                self.message_list.splice(old_range.clone(), *new_count);
-            }
-        }
-        cx.notify();
-    }
-
-    fn render_channel(&self, cx: &mut RenderContext<Self>) -> ElementBox {
-        let theme = &cx.global::<Settings>().theme;
-        Flex::column()
-            .with_child(
-                Container::new(ChildView::new(&self.channel_select).boxed())
-                    .with_style(theme.chat_panel.channel_select.container)
-                    .boxed(),
-            )
-            .with_child(self.render_active_channel_messages())
-            .with_child(self.render_input_box(cx))
-            .boxed()
-    }
-
-    fn render_active_channel_messages(&self) -> ElementBox {
-        let messages = if self.active_channel.is_some() {
-            List::new(self.message_list.clone()).boxed()
-        } else {
-            Empty::new().boxed()
-        };
-
-        FlexItem::new(messages).flex(1., true).boxed()
-    }
-
-    fn render_message(&self, message: &ChannelMessage, cx: &AppContext) -> ElementBox {
-        let now = OffsetDateTime::now_utc();
-        let settings = cx.global::<Settings>();
-        let theme = if message.is_pending() {
-            &settings.theme.chat_panel.pending_message
-        } else {
-            &settings.theme.chat_panel.message
-        };
-
-        Container::new(
-            Flex::column()
-                .with_child(
-                    Flex::row()
-                        .with_child(
-                            Container::new(
-                                Label::new(
-                                    message.sender.github_login.clone(),
-                                    theme.sender.text.clone(),
-                                )
-                                .boxed(),
-                            )
-                            .with_style(theme.sender.container)
-                            .boxed(),
-                        )
-                        .with_child(
-                            Container::new(
-                                Label::new(
-                                    format_timestamp(message.timestamp, now, self.local_timezone),
-                                    theme.timestamp.text.clone(),
-                                )
-                                .boxed(),
-                            )
-                            .with_style(theme.timestamp.container)
-                            .boxed(),
-                        )
-                        .boxed(),
-                )
-                .with_child(Text::new(message.body.clone(), theme.body.clone()).boxed())
-                .boxed(),
-        )
-        .with_style(theme.container)
-        .boxed()
-    }
-
-    fn render_input_box(&self, cx: &AppContext) -> ElementBox {
-        let theme = &cx.global::<Settings>().theme;
-        Container::new(ChildView::new(&self.input_editor).boxed())
-            .with_style(theme.chat_panel.input_editor.container)
-            .boxed()
-    }
-
-    fn render_channel_name(
-        channel_list: &ModelHandle<ChannelList>,
-        ix: usize,
-        item_type: ItemType,
-        is_hovered: bool,
-        theme: &theme::ChannelSelect,
-        cx: &AppContext,
-    ) -> ElementBox {
-        let channel = &channel_list.read(cx).available_channels().unwrap()[ix];
-        let theme = match (item_type, is_hovered) {
-            (ItemType::Header, _) => &theme.header,
-            (ItemType::Selected, false) => &theme.active_item,
-            (ItemType::Selected, true) => &theme.hovered_active_item,
-            (ItemType::Unselected, false) => &theme.item,
-            (ItemType::Unselected, true) => &theme.hovered_item,
-        };
-        Container::new(
-            Flex::row()
-                .with_child(
-                    Container::new(Label::new("#".to_string(), theme.hash.text.clone()).boxed())
-                        .with_style(theme.hash.container)
-                        .boxed(),
-                )
-                .with_child(Label::new(channel.name.clone(), theme.name.clone()).boxed())
-                .boxed(),
-        )
-        .with_style(theme.container)
-        .boxed()
-    }
-
-    fn render_sign_in_prompt(&self, cx: &mut RenderContext<Self>) -> ElementBox {
-        let theme = cx.global::<Settings>().theme.clone();
-        let rpc = self.rpc.clone();
-        let this = cx.handle();
-
-        enum SignInPromptLabel {}
-
-        Align::new(
-            MouseEventHandler::<SignInPromptLabel>::new(0, cx, |mouse_state, _| {
-                Label::new(
-                    "Sign in to use chat".to_string(),
-                    if mouse_state.hovered {
-                        theme.chat_panel.hovered_sign_in_prompt.clone()
-                    } else {
-                        theme.chat_panel.sign_in_prompt.clone()
-                    },
-                )
-                .boxed()
-            })
-            .with_cursor_style(CursorStyle::PointingHand)
-            .on_click(MouseButton::Left, move |_, cx| {
-                let rpc = rpc.clone();
-                let this = this.clone();
-                cx.spawn(|mut cx| async move {
-                    if rpc
-                        .authenticate_and_connect(true, &cx)
-                        .log_err()
-                        .await
-                        .is_some()
-                    {
-                        cx.update(|cx| {
-                            if let Some(this) = this.upgrade(cx) {
-                                if this.is_focused(cx) {
-                                    this.update(cx, |this, cx| cx.focus(&this.input_editor));
-                                }
-                            }
-                        })
-                    }
-                })
-                .detach();
-            })
-            .boxed(),
-        )
-        .boxed()
-    }
-
-    fn send(&mut self, _: &Confirm, cx: &mut ViewContext<Self>) {
-        if let Some((channel, _)) = self.active_channel.as_ref() {
-            let body = self.input_editor.update(cx, |editor, cx| {
-                let body = editor.text(cx);
-                editor.clear(cx);
-                body
-            });
-
-            if let Some(task) = channel
-                .update(cx, |channel, cx| channel.send_message(body, cx))
-                .log_err()
-            {
-                task.detach();
-            }
-        }
-    }
-
-    fn load_more_messages(&mut self, _: &LoadMoreMessages, cx: &mut ViewContext<Self>) {
-        if let Some((channel, _)) = self.active_channel.as_ref() {
-            channel.update(cx, |channel, cx| {
-                channel.load_more_messages(cx);
-            })
-        }
-    }
-}
-
-impl Entity for ChatPanel {
-    type Event = Event;
-}
-
-impl View for ChatPanel {
-    fn ui_name() -> &'static str {
-        "ChatPanel"
-    }
-
-    fn render(&mut self, cx: &mut RenderContext<Self>) -> ElementBox {
-        let element = if self.rpc.user_id().is_some() {
-            self.render_channel(cx)
-        } else {
-            self.render_sign_in_prompt(cx)
-        };
-        let theme = &cx.global::<Settings>().theme;
-        ConstrainedBox::new(
-            Container::new(element)
-                .with_style(theme.chat_panel.container)
-                .boxed(),
-        )
-        .with_min_width(150.)
-        .boxed()
-    }
-
-    fn on_focus_in(&mut self, _: AnyViewHandle, cx: &mut ViewContext<Self>) {
-        if matches!(
-            *self.rpc.status().borrow(),
-            client::Status::Connected { .. }
-        ) {
-            cx.focus(&self.input_editor);
-        }
-    }
-}
-
-fn format_timestamp(
-    mut timestamp: OffsetDateTime,
-    mut now: OffsetDateTime,
-    local_timezone: UtcOffset,
-) -> String {
-    timestamp = timestamp.to_offset(local_timezone);
-    now = now.to_offset(local_timezone);
-
-    let today = now.date();
-    let date = timestamp.date();
-    let mut hour = timestamp.hour();
-    let mut part = "am";
-    if hour > 12 {
-        hour -= 12;
-        part = "pm";
-    }
-    if date == today {
-        format!("{:02}:{:02}{}", hour, timestamp.minute(), part)
-    } else if date.next_day() == Some(today) {
-        format!("yesterday at {:02}:{:02}{}", hour, timestamp.minute(), part)
-    } else {
-        format!("{:02}/{}/{}", date.month() as u32, date.day(), date.year())
-    }
-}
diff --git a/crates/terminal/src/mappings/colors.rs b/crates/terminal/src/mappings/colors.rs
index 9359be79ff5881a7afbdde2f5c3866fb4cb97dfc..5bed4b573c4b97ada6f6c0c3a5ef649c1d1a7e92 100644
--- a/crates/terminal/src/mappings/colors.rs
+++ b/crates/terminal/src/mappings/colors.rs
@@ -1,77 +1,71 @@
 use alacritty_terminal::{ansi::Color as AnsiColor, term::color::Rgb as AlacRgb};
 use gpui::color::Color;
-use theme::TerminalColors;
+use theme::TerminalStyle;
 
 ///Converts a 2, 8, or 24 bit color ANSI color to the GPUI equivalent
-pub fn convert_color(alac_color: &AnsiColor, colors: &TerminalColors, modal: bool) -> Color {
-    let background = if modal {
-        colors.modal_background
-    } else {
-        colors.background
-    };
-
+pub fn convert_color(alac_color: &AnsiColor, style: &TerminalStyle) -> Color {
     match alac_color {
         //Named and theme defined colors
         alacritty_terminal::ansi::Color::Named(n) => match n {
-            alacritty_terminal::ansi::NamedColor::Black => colors.black,
-            alacritty_terminal::ansi::NamedColor::Red => colors.red,
-            alacritty_terminal::ansi::NamedColor::Green => colors.green,
-            alacritty_terminal::ansi::NamedColor::Yellow => colors.yellow,
-            alacritty_terminal::ansi::NamedColor::Blue => colors.blue,
-            alacritty_terminal::ansi::NamedColor::Magenta => colors.magenta,
-            alacritty_terminal::ansi::NamedColor::Cyan => colors.cyan,
-            alacritty_terminal::ansi::NamedColor::White => colors.white,
-            alacritty_terminal::ansi::NamedColor::BrightBlack => colors.bright_black,
-            alacritty_terminal::ansi::NamedColor::BrightRed => colors.bright_red,
-            alacritty_terminal::ansi::NamedColor::BrightGreen => colors.bright_green,
-            alacritty_terminal::ansi::NamedColor::BrightYellow => colors.bright_yellow,
-            alacritty_terminal::ansi::NamedColor::BrightBlue => colors.bright_blue,
-            alacritty_terminal::ansi::NamedColor::BrightMagenta => colors.bright_magenta,
-            alacritty_terminal::ansi::NamedColor::BrightCyan => colors.bright_cyan,
-            alacritty_terminal::ansi::NamedColor::BrightWhite => colors.bright_white,
-            alacritty_terminal::ansi::NamedColor::Foreground => colors.foreground,
-            alacritty_terminal::ansi::NamedColor::Background => background,
-            alacritty_terminal::ansi::NamedColor::Cursor => colors.cursor,
-            alacritty_terminal::ansi::NamedColor::DimBlack => colors.dim_black,
-            alacritty_terminal::ansi::NamedColor::DimRed => colors.dim_red,
-            alacritty_terminal::ansi::NamedColor::DimGreen => colors.dim_green,
-            alacritty_terminal::ansi::NamedColor::DimYellow => colors.dim_yellow,
-            alacritty_terminal::ansi::NamedColor::DimBlue => colors.dim_blue,
-            alacritty_terminal::ansi::NamedColor::DimMagenta => colors.dim_magenta,
-            alacritty_terminal::ansi::NamedColor::DimCyan => colors.dim_cyan,
-            alacritty_terminal::ansi::NamedColor::DimWhite => colors.dim_white,
-            alacritty_terminal::ansi::NamedColor::BrightForeground => colors.bright_foreground,
-            alacritty_terminal::ansi::NamedColor::DimForeground => colors.dim_foreground,
+            alacritty_terminal::ansi::NamedColor::Black => style.black,
+            alacritty_terminal::ansi::NamedColor::Red => style.red,
+            alacritty_terminal::ansi::NamedColor::Green => style.green,
+            alacritty_terminal::ansi::NamedColor::Yellow => style.yellow,
+            alacritty_terminal::ansi::NamedColor::Blue => style.blue,
+            alacritty_terminal::ansi::NamedColor::Magenta => style.magenta,
+            alacritty_terminal::ansi::NamedColor::Cyan => style.cyan,
+            alacritty_terminal::ansi::NamedColor::White => style.white,
+            alacritty_terminal::ansi::NamedColor::BrightBlack => style.bright_black,
+            alacritty_terminal::ansi::NamedColor::BrightRed => style.bright_red,
+            alacritty_terminal::ansi::NamedColor::BrightGreen => style.bright_green,
+            alacritty_terminal::ansi::NamedColor::BrightYellow => style.bright_yellow,
+            alacritty_terminal::ansi::NamedColor::BrightBlue => style.bright_blue,
+            alacritty_terminal::ansi::NamedColor::BrightMagenta => style.bright_magenta,
+            alacritty_terminal::ansi::NamedColor::BrightCyan => style.bright_cyan,
+            alacritty_terminal::ansi::NamedColor::BrightWhite => style.bright_white,
+            alacritty_terminal::ansi::NamedColor::Foreground => style.foreground,
+            alacritty_terminal::ansi::NamedColor::Background => style.background,
+            alacritty_terminal::ansi::NamedColor::Cursor => style.cursor,
+            alacritty_terminal::ansi::NamedColor::DimBlack => style.dim_black,
+            alacritty_terminal::ansi::NamedColor::DimRed => style.dim_red,
+            alacritty_terminal::ansi::NamedColor::DimGreen => style.dim_green,
+            alacritty_terminal::ansi::NamedColor::DimYellow => style.dim_yellow,
+            alacritty_terminal::ansi::NamedColor::DimBlue => style.dim_blue,
+            alacritty_terminal::ansi::NamedColor::DimMagenta => style.dim_magenta,
+            alacritty_terminal::ansi::NamedColor::DimCyan => style.dim_cyan,
+            alacritty_terminal::ansi::NamedColor::DimWhite => style.dim_white,
+            alacritty_terminal::ansi::NamedColor::BrightForeground => style.bright_foreground,
+            alacritty_terminal::ansi::NamedColor::DimForeground => style.dim_foreground,
         },
         //'True' colors
         alacritty_terminal::ansi::Color::Spec(rgb) => Color::new(rgb.r, rgb.g, rgb.b, u8::MAX),
         //8 bit, indexed colors
-        alacritty_terminal::ansi::Color::Indexed(i) => get_color_at_index(&(*i as usize), colors),
+        alacritty_terminal::ansi::Color::Indexed(i) => get_color_at_index(&(*i as usize), style),
     }
 }
 
 ///Converts an 8 bit ANSI color to it's GPUI equivalent.
 ///Accepts usize for compatability with the alacritty::Colors interface,
 ///Other than that use case, should only be called with values in the [0,255] range
-pub fn get_color_at_index(index: &usize, colors: &TerminalColors) -> Color {
+pub fn get_color_at_index(index: &usize, style: &TerminalStyle) -> Color {
     match index {
         //0-15 are the same as the named colors above
-        0 => colors.black,
-        1 => colors.red,
-        2 => colors.green,
-        3 => colors.yellow,
-        4 => colors.blue,
-        5 => colors.magenta,
-        6 => colors.cyan,
-        7 => colors.white,
-        8 => colors.bright_black,
-        9 => colors.bright_red,
-        10 => colors.bright_green,
-        11 => colors.bright_yellow,
-        12 => colors.bright_blue,
-        13 => colors.bright_magenta,
-        14 => colors.bright_cyan,
-        15 => colors.bright_white,
+        0 => style.black,
+        1 => style.red,
+        2 => style.green,
+        3 => style.yellow,
+        4 => style.blue,
+        5 => style.magenta,
+        6 => style.cyan,
+        7 => style.white,
+        8 => style.bright_black,
+        9 => style.bright_red,
+        10 => style.bright_green,
+        11 => style.bright_yellow,
+        12 => style.bright_blue,
+        13 => style.bright_magenta,
+        14 => style.bright_cyan,
+        15 => style.bright_white,
         //16-231 are mapped to their RGB colors on a 0-5 range per channel
         16..=231 => {
             let (r, g, b) = rgb_for_index(&(*index as u8)); //Split the index into it's ANSI-RGB components
@@ -85,19 +79,19 @@ pub fn get_color_at_index(index: &usize, colors: &TerminalColors) -> Color {
             Color::new(i * step, i * step, i * step, u8::MAX) //Map the ANSI-grayscale components to the RGB-grayscale
         }
         //For compatability with the alacritty::Colors interface
-        256 => colors.foreground,
-        257 => colors.background,
-        258 => colors.cursor,
-        259 => colors.dim_black,
-        260 => colors.dim_red,
-        261 => colors.dim_green,
-        262 => colors.dim_yellow,
-        263 => colors.dim_blue,
-        264 => colors.dim_magenta,
-        265 => colors.dim_cyan,
-        266 => colors.dim_white,
-        267 => colors.bright_foreground,
-        268 => colors.black, //'Dim Background', non-standard color
+        256 => style.foreground,
+        257 => style.background,
+        258 => style.cursor,
+        259 => style.dim_black,
+        260 => style.dim_red,
+        261 => style.dim_green,
+        262 => style.dim_yellow,
+        263 => style.dim_blue,
+        264 => style.dim_magenta,
+        265 => style.dim_cyan,
+        266 => style.dim_white,
+        267 => style.bright_foreground,
+        268 => style.black, //'Dim Background', non-standard color
         _ => Color::new(0, 0, 0, 255),
     }
 }
diff --git a/crates/terminal/src/terminal.rs b/crates/terminal/src/terminal.rs
index b05750b84157ca0c1211fc757740273c16c78de0..3ee092896d1cb65a6d350367d0d51e0a7bcfba60 100644
--- a/crates/terminal/src/terminal.rs
+++ b/crates/terminal/src/terminal.rs
@@ -569,7 +569,7 @@ impl Terminal {
             InternalEvent::ColorRequest(index, format) => {
                 let color = term.colors()[*index].unwrap_or_else(|| {
                     let term_style = &cx.global::<Settings>().theme.terminal;
-                    to_alac_rgb(get_color_at_index(index, &term_style.colors))
+                    to_alac_rgb(get_color_at_index(index, &term_style))
                 });
                 self.write_to_pty(format(color))
             }
diff --git a/crates/terminal/src/terminal_container_view.rs b/crates/terminal/src/terminal_container_view.rs
index 1aebd1f5e7a06200594df31bd4bc2dd6fc42b356..1699430eafe07cfc4ab0bc475f6f66dacf7e8393 100644
--- a/crates/terminal/src/terminal_container_view.rs
+++ b/crates/terminal/src/terminal_container_view.rs
@@ -165,18 +165,12 @@ impl View for TerminalContainer {
         "Terminal"
     }
 
-    fn render(&mut self, cx: &mut gpui::RenderContext<'_, Self>) -> ElementBox {
-        let child_view = match &self.content {
+    fn render(&mut self, _cx: &mut gpui::RenderContext<'_, Self>) -> ElementBox {
+        match &self.content {
             TerminalContainerContent::Connected(connected) => ChildView::new(connected),
             TerminalContainerContent::Error(error) => ChildView::new(error),
-        };
-        if self.modal {
-            let settings = cx.global::<Settings>();
-            let container_style = settings.theme.terminal.modal_container;
-            child_view.contained().with_style(container_style).boxed()
-        } else {
-            child_view.boxed()
         }
+        .boxed()
     }
 
     fn on_focus_in(&mut self, _: AnyViewHandle, cx: &mut ViewContext<Self>) {
diff --git a/crates/terminal/src/terminal_element.rs b/crates/terminal/src/terminal_element.rs
index 00b6c7e39aa6cc60ea80aeba6a7e22eb57f1ee12..7cd123b19a30d41a31983b1464fda5f0e4610e82 100644
--- a/crates/terminal/src/terminal_element.rs
+++ b/crates/terminal/src/terminal_element.rs
@@ -149,7 +149,6 @@ impl LayoutRect {
 pub struct TerminalElement {
     terminal: WeakModelHandle<Terminal>,
     view: WeakViewHandle<TerminalView>,
-    modal: bool,
     focused: bool,
     cursor_visible: bool,
 }
@@ -158,14 +157,12 @@ impl TerminalElement {
     pub fn new(
         view: WeakViewHandle<TerminalView>,
         terminal: WeakModelHandle<Terminal>,
-        modal: bool,
         focused: bool,
         cursor_visible: bool,
     ) -> TerminalElement {
         TerminalElement {
             view,
             terminal,
-            modal,
             focused,
             cursor_visible,
         }
@@ -179,7 +176,6 @@ impl TerminalElement {
         terminal_theme: &TerminalStyle,
         text_layout_cache: &TextLayoutCache,
         font_cache: &FontCache,
-        modal: bool,
     ) -> (Vec<LayoutCell>, Vec<LayoutRect>) {
         let mut cells = vec![];
         let mut rects = vec![];
@@ -218,7 +214,7 @@ impl TerminalElement {
                                     cur_rect = Some(LayoutRect::new(
                                         Point::new(line_index as i32, cell.point.column.0 as i32),
                                         1,
-                                        convert_color(&bg, &terminal_theme.colors, modal),
+                                        convert_color(&bg, &terminal_theme),
                                     ));
                                 }
                             }
@@ -227,7 +223,7 @@ impl TerminalElement {
                                 cur_rect = Some(LayoutRect::new(
                                     Point::new(line_index as i32, cell.point.column.0 as i32),
                                     1,
-                                    convert_color(&bg, &terminal_theme.colors, modal),
+                                    convert_color(&bg, &terminal_theme),
                                 ));
                             }
                         }
@@ -244,7 +240,6 @@ impl TerminalElement {
                             terminal_theme,
                             text_style,
                             font_cache,
-                            modal,
                         );
 
                         let layout_cell = text_layout_cache.layout_str(
@@ -303,10 +298,9 @@ impl TerminalElement {
         style: &TerminalStyle,
         text_style: &TextStyle,
         font_cache: &FontCache,
-        modal: bool,
     ) -> RunStyle {
         let flags = indexed.cell.flags;
-        let fg = convert_color(&fg, &style.colors, modal);
+        let fg = convert_color(&fg, &style);
 
         let underline = flags
             .intersects(Flags::ALL_UNDERLINES)
@@ -562,11 +556,7 @@ impl Element for TerminalElement {
             Default::default()
         };
 
-        let background_color = if self.modal {
-            terminal_theme.colors.modal_background
-        } else {
-            terminal_theme.colors.background
-        };
+        let background_color = terminal_theme.background;
         let terminal_handle = self.terminal.upgrade(cx).unwrap();
 
         terminal_handle.update(cx.app, |terminal, cx| {
@@ -601,7 +591,6 @@ impl Element for TerminalElement {
             &terminal_theme,
             cx.text_layout_cache,
             cx.font_cache(),
-            self.modal,
         );
 
         //Layout cursor. Rectangle is used for IME, so we should lay it out even
@@ -614,9 +603,9 @@ impl Element for TerminalElement {
                 let str_trxt = cursor_char.to_string();
 
                 let color = if self.focused {
-                    terminal_theme.colors.background
+                    terminal_theme.background
                 } else {
-                    terminal_theme.colors.foreground
+                    terminal_theme.foreground
                 };
 
                 cx.text_layout_cache.layout_str(
@@ -649,7 +638,7 @@ impl Element for TerminalElement {
                         cursor_position,
                         block_width,
                         dimensions.line_height,
-                        terminal_theme.colors.cursor,
+                        terminal_theme.cursor,
                         shape,
                         Some(cursor_text),
                     )
diff --git a/crates/terminal/src/terminal_view.rs b/crates/terminal/src/terminal_view.rs
index fc8bf20ca7e994e41641c027f89fdf28f54fbade..1a5f87e8249f1d26d7149222e888307bd981b4d9 100644
--- a/crates/terminal/src/terminal_view.rs
+++ b/crates/terminal/src/terminal_view.rs
@@ -343,7 +343,6 @@ impl View for TerminalView {
                 TerminalElement::new(
                     cx.handle(),
                     terminal_handle,
-                    self.modal,
                     focused,
                     self.should_show_cursor(focused, cx),
                 )
diff --git a/crates/theme/src/theme.rs b/crates/theme/src/theme.rs
index 739a4c76869b82b9ab066bb32eff8bb58a0cd253..9b7a0f24d4225a592fc6b051f2927947b1d3cb89 100644
--- a/crates/theme/src/theme.rs
+++ b/crates/theme/src/theme.rs
@@ -18,7 +18,6 @@ pub struct Theme {
     pub meta: ThemeMeta,
     pub workspace: Workspace,
     pub context_menu: ContextMenu,
-    pub chat_panel: ChatPanel,
     pub contacts_popover: ContactsPopover,
     pub contacts_panel: ContactsPanel,
     pub contact_finder: ContactFinder,
@@ -256,18 +255,6 @@ pub struct SidebarItem {
     pub icon_size: f32,
 }
 
-#[derive(Deserialize, Default)]
-pub struct ChatPanel {
-    #[serde(flatten)]
-    pub container: ContainerStyle,
-    pub message: ChatMessage,
-    pub pending_message: ChatMessage,
-    pub channel_select: ChannelSelect,
-    pub input_editor: FieldEditor,
-    pub sign_in_prompt: TextStyle,
-    pub hovered_sign_in_prompt: TextStyle,
-}
-
 #[derive(Deserialize, Default)]
 pub struct ProjectPanel {
     #[serde(flatten)]
@@ -710,12 +697,6 @@ pub struct HoverPopover {
 
 #[derive(Clone, Deserialize, Default)]
 pub struct TerminalStyle {
-    pub colors: TerminalColors,
-    pub modal_container: ContainerStyle,
-}
-
-#[derive(Clone, Deserialize, Default)]
-pub struct TerminalColors {
     pub black: Color,
     pub red: Color,
     pub green: Color,
diff --git a/crates/zed/Cargo.toml b/crates/zed/Cargo.toml
index 7800ea74153b0a12ca2b3d6ade8c4233728ab743..91815677ce7eef158c012e018f06a3180febfd9d 100644
--- a/crates/zed/Cargo.toml
+++ b/crates/zed/Cargo.toml
@@ -19,7 +19,6 @@ activity_indicator = { path = "../activity_indicator" }
 assets = { path = "../assets" }
 auto_update = { path = "../auto_update" }
 breadcrumbs = { path = "../breadcrumbs" }
-chat_panel = { path = "../chat_panel" }
 cli = { path = "../cli" }
 collections = { path = "../collections" }
 command_palette = { path = "../command_palette" }
diff --git a/crates/zed/src/main.rs b/crates/zed/src/main.rs
index 3bfd5e6e1a08791e262eab09ad6ede4771382278..84b9f3bc109022ad1d6e420d2c382d031d58c616 100644
--- a/crates/zed/src/main.rs
+++ b/crates/zed/src/main.rs
@@ -111,7 +111,6 @@ fn main() {
         editor::init(cx);
         go_to_line::init(cx);
         file_finder::init(cx);
-        chat_panel::init(cx);
         contacts_panel::init(cx);
         outline::init(cx);
         project_symbols::init(cx);
diff --git a/styles/src/buildThemes.ts b/styles/src/buildThemes.ts
index 10fb62bdd31948316934b6291cdc17f556382de9..8967697dad825bedbc4e9b7324439019ff658322 100644
--- a/styles/src/buildThemes.ts
+++ b/styles/src/buildThemes.ts
@@ -2,9 +2,9 @@ import * as fs from "fs";
 import * as path from "path";
 import { tmpdir } from "os";
 import app from "./styleTree/app";
-import themes, { internalThemes, experimentalThemes } from "./themes";
+import colorSchemes, { internalColorSchemes, experimentalColorSchemes } from "./colorSchemes";
 import snakeCase from "./utils/snakeCase";
-import Theme from "./themes/common/theme";
+import { ColorScheme } from "./themes/common/colorScheme";
 
 const themeDirectory = `${__dirname}/../../assets/themes`;
 const internalDirectory = `${themeDirectory}/internal`;
@@ -16,7 +16,7 @@ function clearThemes(themeDirectory: string) {
   for (const file of fs.readdirSync(themeDirectory)) {
     if (file.endsWith(".json")) {
       const name = file.replace(/\.json$/, "");
-      if (!themes.find((theme) => theme.name === name)) {
+      if (!colorSchemes.find((colorScheme) => colorScheme.name === name)) {
         fs.unlinkSync(path.join(themeDirectory, file));
       }
     }
@@ -27,12 +27,12 @@ clearThemes(themeDirectory);
 clearThemes(internalDirectory);
 clearThemes(experimentsDirectory);
 
-function writeThemes(themes: Theme[], outputDirectory: string) {
-  for (let theme of themes) {
-    let styleTree = snakeCase(app(theme));
+function writeThemes(colorSchemes: ColorScheme[], outputDirectory: string) {
+  for (let colorScheme of colorSchemes) {
+    let styleTree = snakeCase(app(colorScheme));
     let styleTreeJSON = JSON.stringify(styleTree, null, 2);
-    let tempPath = path.join(tempDirectory, `${theme.name}.json`);
-    let outPath = path.join(outputDirectory, `${theme.name}.json`);
+    let tempPath = path.join(tempDirectory, `${colorScheme.name}.json`);
+    let outPath = path.join(outputDirectory, `${colorScheme.name}.json`);
     fs.writeFileSync(tempPath, styleTreeJSON);
     fs.renameSync(tempPath, outPath);
     console.log(`- ${outPath} created`);
@@ -40,6 +40,6 @@ function writeThemes(themes: Theme[], outputDirectory: string) {
 }
 
 // Write new themes to theme directory
-writeThemes(themes, themeDirectory);
-writeThemes(internalThemes, internalDirectory);
-writeThemes(experimentalThemes, experimentsDirectory);
+writeThemes(colorSchemes, themeDirectory);
+writeThemes(internalColorSchemes, internalDirectory);
+writeThemes(experimentalColorSchemes, experimentsDirectory);
diff --git a/styles/src/colorSchemes.ts b/styles/src/colorSchemes.ts
new file mode 100644
index 0000000000000000000000000000000000000000..97faeab80e67b9610477147cf36382cd57d04fc1
--- /dev/null
+++ b/styles/src/colorSchemes.ts
@@ -0,0 +1,31 @@
+import fs from "fs";
+import path from "path";
+import { ColorScheme } from "./themes/common/colorScheme";
+
+const colorSchemes: ColorScheme[] = [];
+export default colorSchemes;
+
+const internalColorSchemes: ColorScheme[] = [];
+export { internalColorSchemes }
+
+const experimentalColorSchemes: ColorScheme[] = [];
+export { experimentalColorSchemes }
+
+
+function fillColorSchemes(themesPath: string, colorSchemes: ColorScheme[]) {
+  for (const fileName of fs.readdirSync(themesPath)) {
+    if (fileName == "template.ts") continue;
+    const filePath = path.join(themesPath, fileName);
+
+    if (fs.statSync(filePath).isFile()) {
+      const colorScheme = require(filePath);
+      if (colorScheme.dark) colorSchemes.push(colorScheme.dark);
+      if (colorScheme.light) colorSchemes.push(colorScheme.light);
+    }
+  }
+}
+
+fillColorSchemes(path.resolve(`${__dirname}/themes`), colorSchemes)
+fillColorSchemes(path.resolve(`${__dirname}/themes/internal`), internalColorSchemes)
+fillColorSchemes(path.resolve(`${__dirname}/themes/experiments`), experimentalColorSchemes)
+
diff --git a/styles/src/styleTree/app.ts b/styles/src/styleTree/app.ts
index a3ab4b654c6f6d2835804c834dab6a7435cd75f3..1fbec2adf0c6c3a130cd1c3cd3342f3a78ddda0e 100644
--- a/styles/src/styleTree/app.ts
+++ b/styles/src/styleTree/app.ts
@@ -1,5 +1,3 @@
-import Theme from "../themes/common/theme";
-import chatPanel from "./chatPanel";
 import { text } from "./components";
 import contactFinder from "./contactFinder";
 import contactsPanel from "./contactsPanel";
@@ -16,38 +14,38 @@ import contactNotification from "./contactNotification";
 import updateNotification from "./updateNotification";
 import tooltip from "./tooltip";
 import terminal from "./terminal";
+import { ColorScheme } from "../themes/common/colorScheme";
 
 export const panel = {
   padding: { top: 12, bottom: 12 },
 };
 
-export default function app(theme: Theme): Object {
+export default function app(colorScheme: ColorScheme): Object {
   return {
     meta: {
-      name: theme.name,
-      isLight: theme.isLight
+      name: colorScheme.name,
+      isLight: colorScheme.isLight
     },
-    picker: picker(theme),
-    workspace: workspace(theme),
-    contextMenu: contextMenu(theme),
-    editor: editor(theme),
-    projectDiagnostics: projectDiagnostics(theme),
-    commandPalette: commandPalette(theme),
-    projectPanel: projectPanel(theme),
-    chatPanel: chatPanel(theme),
-    contactsPopover: contactsPopover(theme),
-    contactsPanel: contactsPanel(theme),
-    contactFinder: contactFinder(theme),
-    search: search(theme),
+    picker: picker(colorScheme),
+    workspace: workspace(colorScheme),
+    contextMenu: contextMenu(colorScheme),
+    editor: editor(colorScheme),
+    projectDiagnostics: projectDiagnostics(colorScheme),
+    commandPalette: commandPalette(colorScheme),
+    projectPanel: projectPanel(colorScheme),
+    contactsPopover: contactsPopover(colorScheme),
+    contactsPanel: contactsPanel(colorScheme),
+    contactFinder: contactFinder(colorScheme),
+    search: search(colorScheme),
     breadcrumbs: {
-      ...text(theme, "sans", "secondary"),
+      ...text(colorScheme.lowest.top, "sans", "base", "variant"),
       padding: {
         left: 6,
       },
     },
-    contactNotification: contactNotification(theme),
-    updateNotification: updateNotification(theme),
-    tooltip: tooltip(theme),
-    terminal: terminal(theme),
+    contactNotification: contactNotification(colorScheme),
+    updateNotification: updateNotification(colorScheme),
+    tooltip: tooltip(colorScheme),
+    terminal: terminal(colorScheme.lowest),
   };
 }
diff --git a/styles/src/styleTree/chatPanel.ts b/styles/src/styleTree/chatPanel.ts
deleted file mode 100644
index e2b83237ddb406abf41ee0652a97999a10fa33a4..0000000000000000000000000000000000000000
--- a/styles/src/styleTree/chatPanel.ts
+++ /dev/null
@@ -1,108 +0,0 @@
-import Theme from "../themes/common/theme";
-import { panel } from "./app";
-import {
-  backgroundColor,
-  border,
-  player,
-  text,
-  TextColor,
-  popoverShadow,
-} from "./components";
-
-export default function chatPanel(theme: Theme) {
-  function channelSelectItem(
-    theme: Theme,
-    textColor: TextColor,
-    hovered: boolean
-  ) {
-    return {
-      name: text(theme, "sans", textColor),
-      padding: 4,
-      hash: {
-        ...text(theme, "sans", "muted"),
-        margin: {
-          right: 8,
-        },
-      },
-      background: hovered ? backgroundColor(theme, 300, "hovered") : undefined,
-      cornerRadius: hovered ? 6 : 0,
-    };
-  }
-
-  const message = {
-    body: text(theme, "sans", "secondary"),
-    timestamp: text(theme, "sans", "muted", { size: "sm" }),
-    padding: {
-      bottom: 6,
-    },
-    sender: {
-      ...text(theme, "sans", "primary", { weight: "bold" }),
-      margin: {
-        right: 8,
-      },
-    },
-  };
-
-  return {
-    ...panel,
-    channelName: text(theme, "sans", "primary", { weight: "bold" }),
-    channelNameHash: {
-      ...text(theme, "sans", "muted"),
-      padding: {
-        right: 8,
-      },
-    },
-    channelSelect: {
-      header: {
-        ...channelSelectItem(theme, "primary", false),
-        padding: {
-          bottom: 4,
-          left: 0,
-        },
-      },
-      item: channelSelectItem(theme, "secondary", false),
-      hoveredItem: channelSelectItem(theme, "secondary", true),
-      activeItem: channelSelectItem(theme, "primary", false),
-      hoveredActiveItem: channelSelectItem(theme, "primary", true),
-      menu: {
-        background: backgroundColor(theme, 500),
-        cornerRadius: 6,
-        padding: 4,
-        border: border(theme, "primary"),
-        shadow: popoverShadow(theme),
-      },
-    },
-    signInPrompt: text(theme, "sans", "secondary", { underline: true }),
-    hoveredSignInPrompt: text(theme, "sans", "primary", { underline: true }),
-    message,
-    pendingMessage: {
-      ...message,
-      body: {
-        ...message.body,
-        color: theme.textColor.muted,
-      },
-      sender: {
-        ...message.sender,
-        color: theme.textColor.muted,
-      },
-      timestamp: {
-        ...message.timestamp,
-        color: theme.textColor.muted,
-      },
-    },
-    inputEditor: {
-      background: backgroundColor(theme, 500),
-      cornerRadius: 6,
-      text: text(theme, "mono", "primary"),
-      placeholderText: text(theme, "mono", "placeholder", { size: "sm" }),
-      selection: player(theme, 1).selection,
-      border: border(theme, "secondary"),
-      padding: {
-        bottom: 7,
-        left: 8,
-        right: 8,
-        top: 7,
-      },
-    },
-  };
-}
diff --git a/styles/src/styleTree/commandPalette.ts b/styles/src/styleTree/commandPalette.ts
index 6d38051eb28a6332420773c521f180cd8cdec49f..a9fbf98695a7d763dae0c0b1094bc5ae93a4de6d 100644
--- a/styles/src/styleTree/commandPalette.ts
+++ b/styles/src/styleTree/commandPalette.ts
@@ -1,14 +1,15 @@
-import Theme from "../themes/common/theme";
-import { text, backgroundColor, border } from "./components";
+import { ColorScheme } from "../themes/common/colorScheme";
+import { text, border, background } from "./components";
 
-export default function commandPalette(theme: Theme) {
+export default function commandPalette(colorScheme: ColorScheme) {
+  let layer = colorScheme.highest.bottom;
   return {
     keystrokeSpacing: 8,
     key: {
-      text: text(theme, "mono", "secondary", { size: "xs" }),
+      text: text(layer, "mono", { size: "xs" }),
       cornerRadius: 4,
-      background: backgroundColor(theme, "on300"),
-      border: border(theme, "secondary"),
+      background: background(layer, "on"),
+      border: border(layer),
       padding: {
         top: 2,
         bottom: 2,
@@ -19,7 +20,7 @@ export default function commandPalette(theme: Theme) {
         left: 2,
       },
       active: {
-        text: text(theme, "mono", "active", { size: "xs" }),
+        text: text(layer, "mono", "on", "active", { size: "xs" }),
       },
     },
   };
diff --git a/styles/src/styleTree/components.ts b/styles/src/styleTree/components.ts
index f0d1dd84129f39a3da889eb7afed0b32bb0a60b5..590af3f52c065c654eb42cdf91487373885765c5 100644
--- a/styles/src/styleTree/components.ts
+++ b/styles/src/styleTree/components.ts
@@ -1,30 +1,89 @@
-import Theme, { BackgroundColorSet } from "../themes/common/theme";
 import { fontFamilies, fontSizes, FontWeight } from "../common";
+import { Layer, Styles, StyleSets } from "../themes/common/colorScheme";
+
+export function background(layer: Layer, styleSet?: StyleSets, style?: Styles): string {
+  return layer[styleSet ?? "base"][style ?? "default"].background;
+}
+export function borderColor(layer: Layer, styleSet?: StyleSets, style?: Styles): string {
+  return layer[styleSet ?? "base"][style ?? "default"].border;
+}
+export function foreground(layer: Layer, styleSet?: StyleSets, style?: Styles): string {
+  return layer[styleSet ?? "base"][style ?? "default"].foreground;
+}
+
+
+interface Text {
+  family: keyof typeof fontFamilies,
+  color: string,
+  size: number,
+  weight?: FontWeight,
+  underline?: boolean,
+}
+
+interface TextProperties {
+  size?: keyof typeof fontSizes;
+  weight?: FontWeight;
+  underline?: boolean;
+}
 
-export type TextColor = keyof Theme["textColor"];
 export function text(
-  theme: Theme,
+  layer: Layer,
   fontFamily: keyof typeof fontFamilies,
-  color: TextColor,
-  properties?: {
-    size?: keyof typeof fontSizes;
-    weight?: FontWeight;
-    underline?: boolean;
-  }
+  styleSet: StyleSets,
+  style: Styles,
+  properties?: TextProperties
+): Text;
+export function text(
+  layer: Layer,
+  fontFamily: keyof typeof fontFamilies,
+  styleSet: StyleSets,
+  properties?: TextProperties): Text;
+export function text(
+  layer: Layer,
+  fontFamily: keyof typeof fontFamilies,
+  properties?: TextProperties): Text;
+export function text(
+  layer: Layer,
+  fontFamily: keyof typeof fontFamilies,
+  styleSetOrProperties?: StyleSets | TextProperties,
+  styleOrProperties?: Styles | TextProperties,
+  properties?: TextProperties
 ) {
+  let styleSet: StyleSets = "base";
+  let style: Styles = "default";
+
+  if (typeof styleSetOrProperties === "string") {
+    styleSet = styleSetOrProperties
+  } else if (styleSetOrProperties !== undefined) {
+    properties = styleSetOrProperties;
+  }
+
+  if (typeof styleOrProperties === "string") {
+    style = styleOrProperties;
+  } else if (styleOrProperties !== undefined) {
+    properties = styleOrProperties;
+  }
+
   let size = fontSizes[properties?.size || "sm"];
   return {
     family: fontFamilies[fontFamily],
-    color: theme.textColor[color],
+    color: layer[styleSet][style].foreground,
     ...properties,
     size,
   };
 }
-export function textColor(theme: Theme, color: TextColor) {
-  return theme.textColor[color];
+
+
+export interface Border {
+  color: string,
+  width: number,
+  top?: boolean;
+  bottom?: boolean;
+  left?: boolean;
+  right?: boolean;
+  overlay?: boolean;
 }
 
-export type BorderColor = keyof Theme["borderColor"];
 export interface BorderOptions {
   width?: number;
   top?: boolean;
@@ -33,72 +92,46 @@ export interface BorderOptions {
   right?: boolean;
   overlay?: boolean;
 }
+
 export function border(
-  theme: Theme,
-  color: BorderColor,
+  layer: Layer,
+  styleSet: StyleSets,
+  style: Styles,
   options?: BorderOptions
-) {
-  return {
-    color: borderColor(theme, color),
-    width: 1,
-    ...options,
-  };
-}
-export function borderColor(theme: Theme, color: BorderColor) {
-  return theme.borderColor[color];
-}
-
-export type IconColor = keyof Theme["iconColor"];
-export function iconColor(theme: Theme, color: IconColor) {
-  return theme.iconColor[color];
-}
-
-export type PlayerIndex = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
-export interface Player {
-  selection: {
-    cursor: string;
-    selection: string;
-  };
-}
-export function player(theme: Theme, playerNumber: PlayerIndex): Player {
-  return {
-    selection: {
-      cursor: theme.player[playerNumber].cursorColor,
-      selection: theme.player[playerNumber].selectionColor,
-    },
-  };
-}
-
-export type BackgroundColor = keyof Theme["backgroundColor"];
-export type BackgroundState = keyof BackgroundColorSet;
-export function backgroundColor(
-  theme: Theme,
-  name: BackgroundColor,
-  state?: BackgroundState
-): string {
-  return theme.backgroundColor[name][state || "base"];
-}
+): Border;
+export function border(
+  layer: Layer,
+  styleSet: StyleSets,
+  options?: BorderOptions
+): Border;
+export function border(
+  layer: Layer,
+  options?: BorderOptions
+): Border;
+export function border(
+  layer: Layer,
+  styleSetOrOptions?: StyleSets | BorderOptions,
+  styleOrOptions?: Styles | BorderOptions,
+  options?: BorderOptions
+): Border {
+  let styleSet: StyleSets = "base";
+  let style: Styles = "default";
 
-export function modalShadow(theme: Theme) {
-  return {
-    blur: 16,
-    color: theme.shadow,
-    offset: [0, 2],
-  };
-}
+  if (typeof styleSetOrOptions === "string") {
+    styleSet = styleSetOrOptions
+  } else if (styleSetOrOptions !== undefined) {
+    options = styleSetOrOptions;
+  }
 
-export function popoverShadow(theme: Theme) {
-  return {
-    blur: 4,
-    color: theme.shadow,
-    offset: [1, 2],
-  };
-}
+  if (typeof styleOrOptions === "string") {
+    style = styleOrOptions;
+  } else if (styleOrOptions !== undefined) {
+    options = styleOrOptions;
+  }
 
-export function draggedShadow(theme: Theme) {
   return {
-    blur: 6,
-    color: theme.shadow,
-    offset: [1, 2],
+    color: layer[styleSet][style].border,
+    width: 1,
+    ...options,
   };
-}
+}
\ No newline at end of file
diff --git a/styles/src/styleTree/contactFinder.ts b/styles/src/styleTree/contactFinder.ts
index e34fac4b2d734734f6b42d5089a9d7decf852919..d86b4306e855ef094c49ae166ccddacbda80ebb8 100644
--- a/styles/src/styleTree/contactFinder.ts
+++ b/styles/src/styleTree/contactFinder.ts
@@ -1,18 +1,19 @@
-import Theme from "../themes/common/theme";
 import picker from "./picker";
-import { backgroundColor, iconColor } from "./components";
+import { ColorScheme } from "../themes/common/colorScheme";
+import { background, foreground } from "./components";
 
-export default function contactFinder(theme: Theme) {
+export default function contactFinder(colorScheme: ColorScheme) {
+  let layer = colorScheme.middle.bottom;
   const contactButton = {
-    background: backgroundColor(theme, 100),
-    color: iconColor(theme, "primary"),
+    background: background(layer),
+    color: foreground(layer),
     iconWidth: 8,
     buttonWidth: 16,
     cornerRadius: 8,
   };
 
   return {
-    ...picker(theme),
+    ...picker(colorScheme),
     rowHeight: 28,
     contactAvatar: {
       cornerRadius: 10,
@@ -26,13 +27,13 @@ export default function contactFinder(theme: Theme) {
     contactButton: {
       ...contactButton,
       hover: {
-        background: backgroundColor(theme, 100, "hovered"),
+        background: background(layer, "base", "hovered"),
       },
     },
     disabledContactButton: {
       ...contactButton,
-      background: backgroundColor(theme, 100),
-      color: iconColor(theme, "muted"),
+      background: background(layer, "base", "disabled"),
+      color: foreground(layer, "base", "disabled"),
     },
   };
 }
diff --git a/styles/src/styleTree/contactNotification.ts b/styles/src/styleTree/contactNotification.ts
index 8006a95541939fd00e9beba0d925fe108a574deb..0908d8035dec41f396a2e01aa75a4c9f4b8a0b22 100644
--- a/styles/src/styleTree/contactNotification.ts
+++ b/styles/src/styleTree/contactNotification.ts
@@ -1,10 +1,11 @@
-import Theme from "../themes/common/theme";
-import { backgroundColor, iconColor, text } from "./components";
+import { ColorScheme } from "../themes/common/colorScheme";
+import { background, foreground, text } from "./components";
 
 const avatarSize = 12;
 const headerPadding = 8;
 
-export default function contactNotification(theme: Theme): Object {
+export default function contactNotification(colorScheme: ColorScheme): Object {
+  let layer = colorScheme.middle.bottom;
   return {
     headerAvatar: {
       height: avatarSize,
@@ -12,32 +13,32 @@ export default function contactNotification(theme: Theme): Object {
       cornerRadius: 6,
     },
     headerMessage: {
-      ...text(theme, "sans", "primary", { size: "xs" }),
+      ...text(layer, "sans", { size: "xs" }),
       margin: { left: headerPadding, right: headerPadding },
     },
     headerHeight: 18,
     bodyMessage: {
-      ...text(theme, "sans", "secondary", { size: "xs" }),
+      ...text(layer, "sans", { size: "xs" }),
       margin: { left: avatarSize + headerPadding, top: 6, bottom: 6 },
     },
     button: {
-      ...text(theme, "sans", "primary", { size: "xs" }),
-      background: backgroundColor(theme, "on300"),
+      ...text(layer, "sans", "on", { size: "xs" }),
+      background: background(layer, "on"),
       padding: 4,
       cornerRadius: 6,
       margin: { left: 6 },
       hover: {
-        background: backgroundColor(theme, "on300", "hovered"),
+        background: background(layer, "on", "hovered"),
       },
     },
     dismissButton: {
-      color: iconColor(theme, "secondary"),
+      color: foreground(layer, "on"),
       iconWidth: 8,
       iconHeight: 8,
       buttonWidth: 8,
       buttonHeight: 8,
       hover: {
-        color: iconColor(theme, "primary"),
+        color: foreground(layer, "on", "hovered"),
       },
     },
   };
diff --git a/styles/src/styleTree/contactsPanel.ts b/styles/src/styleTree/contactsPanel.ts
index 20fce729e434ac98d2a9959c1b453f5b2e6f8c37..94374b4f6a0182681b4d8f8a591d9a2bf6a78c8a 100644
--- a/styles/src/styleTree/contactsPanel.ts
+++ b/styles/src/styleTree/contactsPanel.ts
@@ -1,18 +1,19 @@
-import Theme from "../themes/common/theme";
+import { ColorScheme } from "../themes/common/colorScheme";
 import { panel } from "./app";
 import {
-  backgroundColor,
+  background,
   border,
   borderColor,
-  iconColor,
-  player,
+  foreground,
   text,
 } from "./components";
 
-export default function contactsPanel(theme: Theme) {
+export default function contactsPanel(colorScheme: ColorScheme) {
   const nameMargin = 8;
   const sidePadding = 12;
 
+  let layer = colorScheme.lowest.middle;
+
   const projectRow = {
     guestAvatarSpacing: 4,
     height: 24,
@@ -21,7 +22,7 @@ export default function contactsPanel(theme: Theme) {
       width: 14,
     },
     name: {
-      ...text(theme, "mono", "placeholder", { size: "sm" }),
+      ...text(layer, "mono", { size: "sm" }),
       margin: {
         left: nameMargin,
         right: 6,
@@ -40,8 +41,8 @@ export default function contactsPanel(theme: Theme) {
   };
 
   const contactButton = {
-    background: backgroundColor(theme, 100),
-    color: iconColor(theme, "primary"),
+    background: background(layer, "on"),
+    color: foreground(layer, "on"),
     iconWidth: 8,
     buttonWidth: 16,
     cornerRadius: 8,
@@ -51,12 +52,12 @@ export default function contactsPanel(theme: Theme) {
     ...panel,
     padding: { top: panel.padding.top, bottom: 0 },
     userQueryEditor: {
-      background: backgroundColor(theme, 500),
+      background: background(layer, "on"),
       cornerRadius: 6,
-      text: text(theme, "mono", "primary"),
-      placeholderText: text(theme, "mono", "placeholder", { size: "sm" }),
-      selection: player(theme, 1).selection,
-      border: border(theme, "secondary"),
+      text: text(layer, "mono", "on"),
+      placeholderText: text(layer, "mono", "on", "disabled", { size: "sm" }),
+      selection: colorScheme.players[0],
+      border: border(layer, "on"),
       padding: {
         bottom: 4,
         left: 8,
@@ -71,28 +72,28 @@ export default function contactsPanel(theme: Theme) {
     userQueryEditorHeight: 32,
     addContactButton: {
       margin: { left: 6, right: 12 },
-      color: iconColor(theme, "primary"),
+      color: foreground(layer, "on"),
       buttonWidth: 16,
       iconWidth: 16,
     },
     privateButton: {
       iconWidth: 12,
-      color: iconColor(theme, "primary"),
+      color: foreground(layer, "on"),
       cornerRadius: 5,
       buttonWidth: 12,
     },
     rowHeight: 28,
     sectionIconSize: 8,
     headerRow: {
-      ...text(theme, "mono", "secondary", { size: "sm" }),
+      ...text(layer, "mono", { size: "sm" }),
       margin: { top: 14 },
       padding: {
         left: sidePadding,
         right: sidePadding,
       },
       active: {
-        ...text(theme, "mono", "primary", { size: "sm" }),
-        background: backgroundColor(theme, 100, "active"),
+        ...text(layer, "mono", "base", "active", { size: "sm" }),
+        background: background(layer, "base", "active"),
       },
     },
     contactRow: {
@@ -101,17 +102,17 @@ export default function contactsPanel(theme: Theme) {
         right: sidePadding,
       },
       active: {
-        background: backgroundColor(theme, 100, "active"),
+        background: background(layer, "base", "active"),
       },
     },
     treeBranch: {
-      color: borderColor(theme, "active"),
+      color: borderColor(layer),
       width: 1,
       hover: {
-        color: borderColor(theme, "active"),
+        color: borderColor(layer, "base", "hovered"),
       },
       active: {
-        color: borderColor(theme, "active"),
+        color: borderColor(layer, "base", "active"),
       },
     },
     contactAvatar: {
@@ -119,7 +120,7 @@ export default function contactsPanel(theme: Theme) {
       width: 18,
     },
     contactUsername: {
-      ...text(theme, "mono", "primary", { size: "sm" }),
+      ...text(layer, "mono", { size: "sm" }),
       margin: {
         left: nameMargin,
       },
@@ -128,26 +129,26 @@ export default function contactsPanel(theme: Theme) {
     contactButton: {
       ...contactButton,
       hover: {
-        background: backgroundColor(theme, "on300", "hovered"),
+        background: background(layer, "base", "hovered"),
       },
     },
     disabledButton: {
       ...contactButton,
-      background: backgroundColor(theme, 100),
-      color: iconColor(theme, "muted"),
+      background: background(layer, "on"),
+      color: foreground(layer, "on"),
     },
     projectRow: {
       ...projectRow,
-      background: backgroundColor(theme, 300),
+      background: background(layer, "on"),
       name: {
         ...projectRow.name,
-        ...text(theme, "mono", "secondary", { size: "sm" }),
+        ...text(layer, "mono", { size: "sm" }),
       },
       hover: {
-        background: backgroundColor(theme, 300, "hovered"),
+        background: background(layer, "base", "hovered"),
       },
       active: {
-        background: backgroundColor(theme, 300, "active"),
+        background: background(layer, "base", "active"),
       },
     },
     inviteRow: {
@@ -155,10 +156,10 @@ export default function contactsPanel(theme: Theme) {
         left: sidePadding,
         right: sidePadding,
       },
-      border: { top: true, width: 1, color: borderColor(theme, "primary") },
-      text: text(theme, "sans", "secondary", { size: "sm" }),
+      border: border(layer, { top: true }),
+      text: text(layer, "sans", { size: "sm" }),
       hover: {
-        text: text(theme, "sans", "active", { size: "sm" }),
+        text: text(layer, "sans", "base", "hovered", { size: "sm" }),
       },
     },
   };
diff --git a/styles/src/styleTree/contextMenu.ts b/styles/src/styleTree/contextMenu.ts
index 6236c2bc602371838bd28c4d708c9696556eca29..2d38cde80c795effb468e1e444f82cfb4fc4244c 100644
--- a/styles/src/styleTree/contextMenu.ts
+++ b/styles/src/styleTree/contextMenu.ts
@@ -1,45 +1,46 @@
-import Theme from "../themes/common/theme";
+import { ColorScheme } from "../themes/common/colorScheme";
 import {
-  backgroundColor,
+  background,
   border,
   borderColor,
-  popoverShadow,
   text,
 } from "./components";
 
-export default function contextMenu(theme: Theme) {
+export default function contextMenu(colorScheme: ColorScheme) {
+  let elevation = colorScheme.middle;
+  let layer = elevation.bottom;
   return {
-    background: backgroundColor(theme, 300, "base"),
+    background: background(layer),
     cornerRadius: 6,
     padding: 6,
-    shadow: popoverShadow(theme),
-    border: border(theme, "primary"),
+    shadow: elevation.shadow,
+    border: border(layer),
     keystrokeMargin: 30,
     item: {
       iconSpacing: 8,
       iconWidth: 14,
       padding: { left: 4, right: 4, top: 2, bottom: 2 },
       cornerRadius: 6,
-      label: text(theme, "sans", "primary", { size: "sm" }),
+      label: text(layer, "sans", { size: "sm" }),
       keystroke: {
-        ...text(theme, "sans", "muted", { size: "sm", weight: "bold" }),
+        ...text(layer, "sans", "base", "variant", { size: "sm", weight: "bold" }),
         padding: { left: 3, right: 3 },
       },
       hover: {
-        background: backgroundColor(theme, 300, "hovered"),
-        text: text(theme, "sans", "primary", { size: "sm" }),
+        background: background(layer, "base", "hovered"),
+        text: text(layer, "sans", "base", "hovered", { size: "sm" }),
       },
       active: {
-        background: backgroundColor(theme, 300, "active"),
-        text: text(theme, "sans", "active", { size: "sm" }),
+        background: background(layer, "base", "active"),
+        text: text(layer, "sans", "base", "active", { size: "sm" }),
       },
       activeHover: {
-        background: backgroundColor(theme, 300, "hovered"),
-        text: text(theme, "sans", "active", { size: "sm" }),
+        background: background(layer, "base", "active"),
+        text: text(layer, "sans", "base", "active", { size: "sm" }),
       },
     },
     separator: {
-      background: borderColor(theme, "primary"),
+      background: borderColor(layer),
       margin: { top: 2, bottom: 2 },
     },
   };
diff --git a/styles/src/styleTree/editor.ts b/styles/src/styleTree/editor.ts
index 62f7a0efdfcbb68b1f0503edd3ea326f7eafa97d..d5fceacedf8d3c549721cb91ff2212ed00f1db05 100644
--- a/styles/src/styleTree/editor.ts
+++ b/styles/src/styleTree/editor.ts
@@ -1,17 +1,18 @@
-import Theme from "../themes/common/theme";
+import { fontWeights } from "../common";
+import { ColorScheme, Elevation, Layer, StyleSets } from "../themes/common/colorScheme";
 import {
-  backgroundColor,
+  background,
   border,
   borderColor,
-  iconColor,
-  player,
-  popoverShadow,
+  foreground,
   text,
-  TextColor,
 } from "./components";
 import hoverPopover from "./hoverPopover";
 
-export default function editor(theme: Theme) {
+export default function editor(colorScheme: ColorScheme) {
+  let elevation = colorScheme.lowest;
+  let layer = elevation.top;
+
   const autocompleteItem = {
     cornerRadius: 6,
     padding: {
@@ -22,17 +23,17 @@ export default function editor(theme: Theme) {
     },
   };
 
-  function diagnostic(theme: Theme, color: TextColor) {
+  function diagnostic(layer: Layer, styleSet: StyleSets) {
     return {
       textScaleFactor: 0.857,
       header: {
-        border: border(theme, "primary", {
+        border: border(layer, {
           top: true,
         }),
       },
       message: {
-        text: text(theme, "sans", color, { size: "sm" }),
-        highlightText: text(theme, "sans", color, {
+        text: text(layer, "sans", styleSet, { size: "sm" }),
+        highlightText: text(layer, "sans", styleSet, {
           size: "sm",
           weight: "bold",
         }),
@@ -40,115 +41,193 @@ export default function editor(theme: Theme) {
     };
   }
 
-  const syntax: any = {};
-  for (const syntaxKey in theme.syntax) {
-    const style = theme.syntax[syntaxKey];
-    syntax[syntaxKey] = {
-      color: style.color,
-      weight: style.weight,
-      underline: style.underline,
-      italic: style.italic,
-    };
+  const syntax = {
+    primary: {
+      color: elevation.ramps.neutral(1).hex(),
+      weight: fontWeights.normal,
+    },
+    comment: {
+      color: elevation.ramps.neutral(0.71).hex(),
+      weight: fontWeights.normal,
+    },
+    punctuation: {
+      color: elevation.ramps.neutral(0.86).hex(),
+      weight: fontWeights.normal,
+    },
+    constant: {
+      color: elevation.ramps.neutral(0.57).hex(),
+      weight: fontWeights.normal,
+    },
+    keyword: {
+      color: elevation.ramps.blue(0.5).hex(),
+      weight: fontWeights.normal,
+    },
+    function: {
+      color: elevation.ramps.yellow(0.5).hex(),
+      weight: fontWeights.normal,
+    },
+    type: {
+      color: elevation.ramps.cyan(0.5).hex(),
+      weight: fontWeights.normal,
+    },
+    constructor: {
+      color: elevation.ramps.blue(0.5).hex(),
+      weight: fontWeights.normal,
+    },
+    variant: {
+      color: elevation.ramps.blue(0.5).hex(),
+      weight: fontWeights.normal,
+    },
+    property: {
+      color: elevation.ramps.blue(0.5).hex(),
+      weight: fontWeights.normal,
+    },
+    enum: {
+      color: elevation.ramps.orange(0.5).hex(),
+      weight: fontWeights.normal,
+    },
+    operator: {
+      color: elevation.ramps.orange(0.5).hex(),
+      weight: fontWeights.normal,
+    },
+    string: {
+      color: elevation.ramps.orange(0.5).hex(),
+      weight: fontWeights.normal,
+    },
+    number: {
+      color: elevation.ramps.green(0.5).hex(),
+      weight: fontWeights.normal,
+    },
+    boolean: {
+      color: elevation.ramps.green(0.5).hex(),
+      weight: fontWeights.normal,
+    },
+    predictive: {
+      color: elevation.ramps.neutral(0.57).hex(),
+      weight: fontWeights.normal,
+    },
+    title: {
+      color: elevation.ramps.yellow(0.5).hex(),
+      weight: fontWeights.bold,
+    },
+    emphasis: {
+      color: elevation.ramps.blue(0.5).hex(),
+      weight: fontWeights.normal,
+    },
+    "emphasis.strong": {
+      color: elevation.ramps.blue(0.5).hex(),
+      weight: fontWeights.bold,
+    },
+    linkUri: {
+      color: elevation.ramps.green(0.5).hex(),
+      weight: fontWeights.normal,
+      underline: true,
+    },
+    linkText: {
+      color: elevation.ramps.orange(0.5).hex(),
+      weight: fontWeights.normal,
+      italic: true,
+    },
   }
 
   return {
-    textColor: theme.syntax.primary.color,
-    background: backgroundColor(theme, 500),
-    activeLineBackground: theme.editor.line.active,
+    textColor: syntax.primary.color,
+    background: background(layer),
+    activeLineBackground: elevation.ramps.neutral(0.29).hex(),
+    highlightedLineBackground: elevation.ramps.neutral(0.18).hex(),
     codeActions: {
-      indicator: iconColor(theme, "secondary"),
+      indicator: foreground(layer, "base", "variant"),
       verticalScale: 0.618
     },
-    diffBackgroundDeleted: backgroundColor(theme, "error"),
-    diffBackgroundInserted: backgroundColor(theme, "ok"),
-    documentHighlightReadBackground: theme.editor.highlight.occurrence,
-    documentHighlightWriteBackground: theme.editor.highlight.activeOccurrence,
-    errorColor: theme.textColor.error,
-    gutterBackground: backgroundColor(theme, 500),
+    diffBackgroundDeleted: background(layer, "negative"),
+    diffBackgroundInserted: background(layer, "positive"),
+    documentHighlightReadBackground: elevation.ramps.neutral(0.5).alpha(0.2).hex(), // TODO: This was blend
+    documentHighlightWriteBackground: elevation.ramps.neutral(0.5).alpha(0.4).hex(), // TODO: This was blend * 2
+    errorColor: foreground(layer, "negative"),
+    gutterBackground: background(layer),
     gutterPaddingFactor: 3.5,
-    highlightedLineBackground: theme.editor.line.highlighted,
-    lineNumber: theme.editor.gutter.primary,
-    lineNumberActive: theme.editor.gutter.active,
+    lineNumber: foreground(layer),
+    lineNumberActive: foreground(layer, "base", "active"),
     renameFade: 0.6,
     unnecessaryCodeFade: 0.5,
-    selection: player(theme, 1).selection,
+    selection: colorScheme.players[0],
     guestSelections: [
-      player(theme, 2).selection,
-      player(theme, 3).selection,
-      player(theme, 4).selection,
-      player(theme, 5).selection,
-      player(theme, 6).selection,
-      player(theme, 7).selection,
-      player(theme, 8).selection,
+      colorScheme.players[1],
+      colorScheme.players[2],
+      colorScheme.players[3],
+      colorScheme.players[4],
+      colorScheme.players[5],
+      colorScheme.players[6],
+      colorScheme.players[7],
     ],
     autocomplete: {
-      background: backgroundColor(theme, 500),
+      background: background(elevation.above.top),
       cornerRadius: 8,
       padding: 4,
-      border: border(theme, "secondary"),
-      shadow: popoverShadow(theme),
+      border: border(elevation.above.top),
+      shadow: elevation.above.shadow,
       item: autocompleteItem,
       hoveredItem: {
         ...autocompleteItem,
-        background: backgroundColor(theme, 500, "hovered"),
+        background: background(elevation.above.top, "base", "hovered"),
       },
       margin: {
         left: -14,
       },
-      matchHighlight: text(theme, "mono", "feature"),
+      matchHighlight: elevation.above.ramps.blue(0.5).hex(),
       selectedItem: {
         ...autocompleteItem,
-        background: backgroundColor(theme, 500, "active"),
+        background: background(elevation.above.top, "base", "active"),
       },
     },
     diagnosticHeader: {
-      background: backgroundColor(theme, 300),
+      background: background(elevation.middle),
       iconWidthFactor: 1.5,
       textScaleFactor: 0.857, // NateQ: Will we need dynamic sizing for text? If so let's create tokens for these.
-      border: border(theme, "secondary", {
+      border: border(elevation.middle, {
         bottom: true,
         top: true,
       }),
       code: {
-        ...text(theme, "mono", "secondary", { size: "sm" }),
+        ...text(elevation.middle, "mono", { size: "sm" }),
         margin: {
           left: 10,
         },
       },
       message: {
-        highlightText: text(theme, "sans", "primary", {
+        highlightText: text(elevation.middle, "sans", {
           size: "sm",
           weight: "bold",
         }),
-        text: text(theme, "sans", "secondary", { size: "sm" }),
+        text: text(elevation.middle, "sans", { size: "sm" }),
       },
     },
     diagnosticPathHeader: {
-      background: theme.editor.line.active,
+      background: background(elevation.middle),
       textScaleFactor: 0.857,
-      filename: text(theme, "mono", "primary", { size: "sm" }),
+      filename: text(elevation.middle, "mono", { size: "sm" }),
       path: {
-        ...text(theme, "mono", "muted", { size: "sm" }),
+        ...text(elevation.middle, "mono", { size: "sm" }),
         margin: {
           left: 12,
         },
       },
     },
-    errorDiagnostic: diagnostic(theme, "error"),
-    warningDiagnostic: diagnostic(theme, "warning"),
-    informationDiagnostic: diagnostic(theme, "info"),
-    hintDiagnostic: diagnostic(theme, "info"),
-    invalidErrorDiagnostic: diagnostic(theme, "secondary"),
-    invalidHintDiagnostic: diagnostic(theme, "secondary"),
-    invalidInformationDiagnostic: diagnostic(theme, "secondary"),
-    invalidWarningDiagnostic: diagnostic(theme, "secondary"),
-    hoverPopover: hoverPopover(theme),
+    errorDiagnostic: diagnostic(elevation.middle, "negative"),
+    warningDiagnostic: diagnostic(elevation.middle, "warning"),
+    informationDiagnostic: diagnostic(elevation.middle, "info"),
+    hintDiagnostic: diagnostic(elevation.middle, "positive"),
+    invalidErrorDiagnostic: diagnostic(elevation.middle, "base"),
+    invalidHintDiagnostic: diagnostic(elevation.middle, "base"),
+    invalidInformationDiagnostic: diagnostic(elevation.middle, "base"),
+    invalidWarningDiagnostic: diagnostic(elevation.middle, "base"),
+    hoverPopover: hoverPopover(elevation.above),
     linkDefinition: {
-      color: theme.syntax.linkUri.color,
-      underline: theme.syntax.linkUri.underline,
+      color: syntax.linkUri.color,
+      underline: syntax.linkUri.underline,
     },
     jumpIcon: {
-      color: iconColor(theme, "secondary"),
+      color: foreground(layer, "on"),
       iconWidth: 20,
       buttonWidth: 20,
       cornerRadius: 6,
@@ -159,14 +238,14 @@ export default function editor(theme: Theme) {
         right: 6,
       },
       hover: {
-        color: iconColor(theme, "active"),
-        background: backgroundColor(theme, "on500"),
+        color: foreground(layer, "on", "hovered"),
+        background: background(layer, "on", "hovered"),
       },
     },
     compositionMark: {
       underline: {
         thickness: 1.0,
-        color: borderColor(theme, "active")
+        color: borderColor(layer),
       },
     },
     syntax,
diff --git a/styles/src/styleTree/hoverPopover.ts b/styles/src/styleTree/hoverPopover.ts
index 0aac4e66c9ae1ce3e39def70f42a770c32f40597..9e7022d19150f8e7208c4953cb4fd69ba61c0679 100644
--- a/styles/src/styleTree/hoverPopover.ts
+++ b/styles/src/styleTree/hoverPopover.ts
@@ -1,9 +1,10 @@
-import Theme from "../themes/common/theme";
-import { backgroundColor, border, popoverShadow, text } from "./components";
+import { Elevation } from "../themes/common/colorScheme";
+import { background, border, text } from "./components";
 
-export default function HoverPopover(theme: Theme) {
+export default function HoverPopover(elevation: Elevation) {
+  let layer = elevation.middle;
   let baseContainer = {
-    background: backgroundColor(theme, "on500"),
+    background: background(layer),
     cornerRadius: 8,
     padding: {
       left: 8,
@@ -11,8 +12,8 @@ export default function HoverPopover(theme: Theme) {
       top: 4,
       bottom: 4
     },
-    shadow: popoverShadow(theme),
-    border: border(theme, "secondary"),
+    shadow: elevation.shadow,
+    border: border(layer),
     margin: {
       left: -8,
     },
@@ -22,32 +23,23 @@ export default function HoverPopover(theme: Theme) {
     container: baseContainer,
     infoContainer: {
       ...baseContainer,
-      background: backgroundColor(theme, "on500Info"),
-      border: {
-        color: theme.ramps.blue(0).hex(),
-        width: 1,
-      },
+      background: background(layer, "info"),
+      border: border(layer, "info"),
     },
     warningContainer: {
       ...baseContainer,
-      background: backgroundColor(theme, "on500Warning"),
-      border: {
-        color: theme.ramps.yellow(0).hex(),
-        width: 1,
-      },
+      background: background(layer, "warning"),
+      border: border(layer, "warning"),
     },
     errorContainer: {
       ...baseContainer,
-      background: backgroundColor(theme, "on500Error"),
-      border: {
-        color: theme.ramps.red(0).hex(),
-        width: 1,
-      }
+      background: background(layer, "negative"),
+      border: border(layer, "negative"),
     },
     block_style: {
       padding: { top: 4 },
     },
-    prose: text(theme, "sans", "primary", { size: "sm" }),
-    highlight: theme.editor.highlight.occurrence,
+    prose: text(layer, "sans", { size: "sm" }),
+    highlight: elevation.ramps.neutral(0.5).alpha(0.2).hex(), // TODO: blend was used here. Replace with something better
   };
 }
diff --git a/styles/src/styleTree/picker.ts b/styles/src/styleTree/picker.ts
index 514deb4c339efee074a01ee4ee425e9243a06087..49498f4e51a5a6940146f40ea92facaabbbd4e4b 100644
--- a/styles/src/styleTree/picker.ts
+++ b/styles/src/styleTree/picker.ts
@@ -1,15 +1,15 @@
-import Theme from "../themes/common/theme";
+import { ColorScheme } from "../themes/common/colorScheme";
 import {
-  backgroundColor,
+  background,
   border,
-  player,
-  modalShadow,
   text,
 } from "./components";
 
-export default function picker(theme: Theme) {
+export default function picker(colorScheme: ColorScheme) {
+  let elevation = colorScheme.highest;
+  let layer = elevation.middle;
   return {
-    background: backgroundColor(theme, 300),
+    background: background(layer),
     cornerRadius: 8,
     padding: 8,
     item: {
@@ -20,19 +20,19 @@ export default function picker(theme: Theme) {
         top: 4,
       },
       cornerRadius: 8,
-      text: text(theme, "sans", "secondary"),
-      highlightText: text(theme, "sans", "feature", { weight: "bold" }),
+      text: text(layer, "sans"),
+      highlightText: text(layer, "sans", { weight: "bold" }),
       active: {
-        background: backgroundColor(theme, 300, "active"),
-        text: text(theme, "sans", "active"),
+        background: background(layer, "base", "active"),
+        text: text(layer, "sans", "base", "active"),
       },
       hover: {
-        background: backgroundColor(theme, 300, "hovered"),
+        background: background(layer, "base", "hovered"),
       },
     },
-    border: border(theme, "primary"),
+    border: border(layer),
     empty: {
-      text: text(theme, "sans", "muted"),
+      text: text(layer, "sans"),
       padding: {
         bottom: 4,
         left: 12,
@@ -41,12 +41,12 @@ export default function picker(theme: Theme) {
       },
     },
     inputEditor: {
-      background: backgroundColor(theme, 500),
+      background: background(layer, "on"),
       cornerRadius: 8,
-      placeholderText: text(theme, "sans", "placeholder"),
-      selection: player(theme, 1).selection,
-      text: text(theme, "mono", "primary"),
-      border: border(theme, "secondary"),
+      placeholderText: text(layer, "sans", "on", "disabled"),
+      selection: colorScheme.players[0],
+      text: text(layer, "mono", "on"),
+      border: border(layer, "on"),
       padding: {
         bottom: 7,
         left: 16,
@@ -54,6 +54,6 @@ export default function picker(theme: Theme) {
         top: 7,
       },
     },
-    shadow: modalShadow(theme),
+    shadow: elevation.shadow,
   };
 }
diff --git a/styles/src/styleTree/projectDiagnostics.ts b/styles/src/styleTree/projectDiagnostics.ts
index ca6eb7c80826c220b2ac2da1f0825de200aa1b8d..25eac4713fd1ee1d132318aa4eef8688dcece7f6 100644
--- a/styles/src/styleTree/projectDiagnostics.ts
+++ b/styles/src/styleTree/projectDiagnostics.ts
@@ -1,12 +1,13 @@
-import Theme from "../themes/common/theme";
-import { backgroundColor, text } from "./components";
+import { ColorScheme } from "../themes/common/colorScheme";
+import { background, text } from "./components";
 
-export default function projectDiagnostics(theme: Theme) {
+export default function projectDiagnostics(colorScheme: ColorScheme) {
+  let layer = colorScheme.lowest.top;
   return {
-    background: backgroundColor(theme, 500),
+    background: background(layer),
     tabIconSpacing: 4,
     tabIconWidth: 13,
     tabSummarySpacing: 10,
-    emptyMessage: text(theme, "sans", "secondary", { size: "md" }),
+    emptyMessage: text(layer, "sans", "base", "variant", { size: "md" }),
   };
 }
diff --git a/styles/src/styleTree/projectPanel.ts b/styles/src/styleTree/projectPanel.ts
index 7add861fa64fcabf8956b9949b988ab72823600d..fbced14df9970f5425282f134ae4518881b276d9 100644
--- a/styles/src/styleTree/projectPanel.ts
+++ b/styles/src/styleTree/projectPanel.ts
@@ -1,36 +1,37 @@
-import Theme from "../themes/common/theme";
+import { ColorScheme } from "../themes/common/colorScheme";
 import { panel } from "./app";
-import { backgroundColor, iconColor, player, text } from "./components";
+import { background, foreground, text } from "./components";
 
-export default function projectPanel(theme: Theme) {
+export default function projectPanel(colorScheme: ColorScheme) {
+  let layer = colorScheme.lowest.middle;
   return {
     ...panel,
     padding: { left: 12, right: 12, top: 6, bottom: 6 },
     indentWidth: 8,
     entry: {
       height: 24,
-      iconColor: iconColor(theme, "muted"),
+      iconColor: foreground(layer, "on"),
       iconSize: 8,
       iconSpacing: 8,
-      text: text(theme, "mono", "secondary", { size: "sm" }),
+      text: text(layer, "mono", "on", { size: "sm" }),
       hover: {
-        background: backgroundColor(theme, 300, "hovered"),
+        background: background(layer, "on", "hovered"),
       },
       active: {
-        background: backgroundColor(theme, 300, "active"),
-        text: text(theme, "mono", "active", { size: "sm" }),
+        background: background(layer, "base", "active"),
+        text: text(layer, "mono", "base", "active", { size: "sm" }),
       },
       activeHover: {
-        background: backgroundColor(theme, 300, "active"),
-        text: text(theme, "mono", "active", { size: "sm" }),
+        background: background(layer, "base", "hovered"),
+        text: text(layer, "mono", "base", "active", { size: "sm" }),
       },
     },
     cutEntryFade: 0.4,
     ignoredEntryFade: 0.6,
     filenameEditor: {
-      background: backgroundColor(theme, "on300"),
-      text: text(theme, "mono", "active", { size: "sm" }),
-      selection: player(theme, 1).selection,
+      background: background(layer, "on"),
+      text: text(layer, "mono", "on", "active", { size: "sm" }),
+      selection: colorScheme.players[0],
     },
   };
 }
diff --git a/styles/src/styleTree/search.ts b/styles/src/styleTree/search.ts
index f3555256430ba181312b03333ecb665636416cd1..953b3351d35f912be8e57b8c3e0f64b5d2974456 100644
--- a/styles/src/styleTree/search.ts
+++ b/styles/src/styleTree/search.ts
@@ -1,17 +1,19 @@
-import Theme from "../themes/common/theme";
-import { backgroundColor, border, player, text } from "./components";
+import { ColorScheme } from "../themes/common/colorScheme";
+import { background, border, text } from "./components";
+
+export default function search(colorScheme: ColorScheme) {
+  let layer = colorScheme.lowest.top;
 
-export default function search(theme: Theme) {
   // Search input
   const editor = {
-    background: backgroundColor(theme, 500),
+    background: background(layer),
     cornerRadius: 8,
     minWidth: 200,
     maxWidth: 500,
-    placeholderText: text(theme, "mono", "placeholder"),
-    selection: player(theme, 1).selection,
-    text: text(theme, "mono", "active"),
-    border: border(theme, "secondary"),
+    placeholderText: text(layer, "mono", "base", "disabled"),
+    selection: colorScheme.players[0],
+    text: text(layer, "mono", "base", "active"),
+    border: border(layer),
     margin: {
       right: 12,
     },
@@ -24,14 +26,14 @@ export default function search(theme: Theme) {
   };
 
   return {
-    matchBackground: theme.editor.highlight.match,
+    matchBackground: background(layer), // theme.editor.highlight.match,
     tabIconSpacing: 8,
     tabIconWidth: 14,
     optionButton: {
-      ...text(theme, "mono", "secondary"),
-      background: backgroundColor(theme, "on500"),
+      ...text(layer, "mono", "on"),
+      background: background(layer, "on"),
       cornerRadius: 6,
-      border: border(theme, "secondary"),
+      border: border(layer, "on"),
       margin: {
         right: 4,
       },
@@ -42,28 +44,28 @@ export default function search(theme: Theme) {
         top: 2,
       },
       active: {
-        ...text(theme, "mono", "active"),
-        background: backgroundColor(theme, "on500", "active"),
-        border: border(theme, "muted"),
+        ...text(layer, "mono", "on", "active"),
+        background: background(layer, "on", "active"),
+        border: border(layer, "on", "active"),
       },
       clicked: {
-        ...text(theme, "mono", "active"),
-        background: backgroundColor(theme, "on300", "active"),
-        border: border(theme, "secondary"),
+        ...text(layer, "mono", "on", "pressed"),
+        background: background(layer, "on", "pressed"),
+        border: border(layer, "on", "pressed"),
       },
       hover: {
-        ...text(theme, "mono", "active"),
-        background: backgroundColor(theme, "on500", "hovered"),
-        border: border(theme, "muted"),
+        ...text(layer, "mono", "on", "hovered"),
+        background: background(layer, "on", "hovered"),
+        border: border(layer, "on", "hovered"),
       },
     },
     editor,
     invalidEditor: {
       ...editor,
-      border: border(theme, "error"),
+      border: border(layer, "negative"),
     },
     matchIndex: {
-      ...text(theme, "mono", "muted"),
+      ...text(layer, "mono", "on", "variant"),
       padding: 6,
     },
     optionButtonGroup: {
@@ -73,7 +75,7 @@ export default function search(theme: Theme) {
       },
     },
     resultsStatus: {
-      ...text(theme, "mono", "primary"),
+      ...text(layer, "mono", "on"),
       size: 18,
     },
   };
diff --git a/styles/src/styleTree/statusBar.ts b/styles/src/styleTree/statusBar.ts
index 2a4c6d7f70736aa0aa39c3f1596d10beb25aef2b..1a0876ecf4b344ab3b4f0580b66ac622627f1132 100644
--- a/styles/src/styleTree/statusBar.ts
+++ b/styles/src/styleTree/statusBar.ts
@@ -1,8 +1,9 @@
-import Theme from "../themes/common/theme";
-import { backgroundColor, border, iconColor, text } from "./components";
-import { workspaceBackground } from "./workspace";
+import { ColorScheme } from "../themes/common/colorScheme";
+import { background, border, foreground, text } from "./components";
+
+export default function statusBar(colorScheme: ColorScheme) {
+  let layer = colorScheme.lowest.bottom;
 
-export default function statusBar(theme: Theme) {
   const statusContainer = {
     cornerRadius: 6,
     padding: { top: 3, bottom: 3, left: 6, right: 6 },
@@ -22,70 +23,70 @@ export default function statusBar(theme: Theme) {
       left: 6,
       right: 6,
     },
-    border: border(theme, "primary", { top: true, overlay: true }),
-    cursorPosition: text(theme, "sans", "secondary"),
-    autoUpdateProgressMessage: text(theme, "sans", "secondary"),
-    autoUpdateDoneMessage: text(theme, "sans", "secondary"),
+    border: border(layer, { top: true, overlay: true }),
+    cursorPosition: text(layer, "sans"),
+    autoUpdateProgressMessage: text(layer, "sans"),
+    autoUpdateDoneMessage: text(layer, "sans"),
     lspStatus: {
       ...diagnosticStatusContainer,
       iconSpacing: 4,
       iconWidth: 14,
       height: 18,
-      message: text(theme, "sans", "secondary"),
-      iconColor: iconColor(theme, "muted"),
+      message: text(layer, "sans"),
+      iconColor: foreground(layer),
       hover: {
-        message: text(theme, "sans", "primary"),
-        iconColor: iconColor(theme, "primary"),
-        background: backgroundColor(theme, 300, "hovered"),
+        message: text(layer, "sans"),
+        iconColor: foreground(layer),
+        background: background(layer),
       },
     },
     diagnosticMessage: {
-      ...text(theme, "sans", "secondary"),
-      hover: text(theme, "sans", "active"),
+      ...text(layer, "sans"),
+      hover: text(layer, "sans", "base", "hovered"),
     },
     feedback: {
-      ...text(theme, "sans", "secondary"),
-      hover: text(theme, "sans", "active"),
+      ...text(layer, "sans"),
+      hover: text(layer, "sans"),
     },
     diagnosticSummary: {
       height: 16,
       iconWidth: 16,
       iconSpacing: 2,
       summarySpacing: 6,
-      text: text(theme, "sans", "primary", { size: "sm" }),
-      iconColorOk: iconColor(theme, "muted"),
-      iconColorWarning: iconColor(theme, "warning"),
-      iconColorError: iconColor(theme, "error"),
+      text: text(layer, "sans", { size: "sm" }),
+      iconColorOk: foreground(layer, "positive"),
+      iconColorWarning: foreground(layer, "warning"),
+      iconColorError: foreground(layer, "negative"),
       containerOk: {
         cornerRadius: 6,
         padding: { top: 3, bottom: 3, left: 7, right: 7 },
       },
       containerWarning: {
         ...diagnosticStatusContainer,
-        background: backgroundColor(theme, "warning"),
-        border: border(theme, "warning"),
+        background: background(layer, "warning"),
+        border: border(layer, "warning"),
       },
       containerError: {
         ...diagnosticStatusContainer,
-        background: backgroundColor(theme, "error"),
-        border: border(theme, "error"),
+        background: background(layer, "negative"),
+        border: border(layer, "negative"),
       },
       hover: {
-        iconColorOk: iconColor(theme, "active"),
+        iconColorOk: foreground(layer, "on"),
         containerOk: {
           cornerRadius: 6,
           padding: { top: 3, bottom: 3, left: 7, right: 7 },
-          background: backgroundColor(theme, 300, "hovered"),
+          background: background(layer, "on", "hovered"),
         },
         containerWarning: {
           ...diagnosticStatusContainer,
-          background: backgroundColor(theme, "warning", "hovered"),
-          border: border(theme, "warning"),
+          background: background(layer, "warning", "hovered"),
+          border: border(layer, "warning", "hovered"),
         },
         containerError: {
           ...diagnosticStatusContainer,
-          background: backgroundColor(theme, "error", "hovered"),
-          border: border(theme, "error"),
+          background: background(layer, "negative", "hovered"),
+          border: border(layer, "negative", "hovered"),
         },
       },
     },
@@ -95,22 +96,22 @@ export default function statusBar(theme: Theme) {
       item: {
         ...statusContainer,
         iconSize: 16,
-        iconColor: iconColor(theme, "muted"),
+        iconColor: foreground(layer),
         hover: {
-          iconColor: iconColor(theme, "active"),
-          background: backgroundColor(theme, 300, "hovered"),
+          iconColor: foreground(layer, "base", "hovered"),
+          background: background(layer, "base", "hovered"),
         },
         active: {
-          iconColor: iconColor(theme, "active"),
-          background: backgroundColor(theme, 300, "active"),
+          iconColor: foreground(layer, "base", "active"),
+          background: background(layer, "base", "active"),
         },
       },
       badge: {
         cornerRadius: 3,
         padding: 2,
         margin: { bottom: -1, right: -1 },
-        border: { width: 1, color: workspaceBackground(theme) },
-        background: iconColor(theme, "feature"),
+        border: border(layer),
+        background: background(layer),
       },
     },
   };
diff --git a/styles/src/styleTree/tabBar.ts b/styles/src/styleTree/tabBar.ts
index d84fe13ce6bd58e1e5a646cabeeaf921f4ed7744..dfb631d07016c5dcba150681a35eb1396709cb09 100644
--- a/styles/src/styleTree/tabBar.ts
+++ b/styles/src/styleTree/tabBar.ts
@@ -1,39 +1,42 @@
-import Theme from "../themes/common/theme";
+import { ColorScheme } from "../themes/common/colorScheme";
 import { withOpacity } from "../utils/color";
-import { iconColor, text, border, backgroundColor, draggedShadow } from "./components";
+import { text, border, background, foreground } from "./components";
 
-export default function tabBar(theme: Theme) {
+export default function tabBar(colorScheme: ColorScheme) {
   const height = 32;
 
+  let elevation = colorScheme.lowest;
+  let layer = elevation.middle;
+
   const tab = {
     height,
-    background: backgroundColor(theme, 300),
-    border: border(theme, "primary", {
+    background: background(layer),
+    border: border(layer, {
       left: true,
       bottom: true,
       overlay: true,
     }),
-    iconClose: iconColor(theme, "muted"),
-    iconCloseActive: iconColor(theme, "active"),
-    iconConflict: iconColor(theme, "warning"),
-    iconDirty: iconColor(theme, "info"),
+    iconClose: foreground(layer),
+    iconCloseActive: foreground(layer, "base", "active"),
+    iconConflict: foreground(layer, "warning"),
+    iconDirty: foreground(layer, "info"),
     iconWidth: 8,
     spacing: 8,
-    text: text(theme, "sans", "secondary", { size: "sm" }),
+    text: text(layer, "sans", { size: "sm" }),
     padding: {
       left: 8,
       right: 8,
     },
     description: {
       margin: { left: 6, top: 1 },
-      ...text(theme, "sans", "muted", { size: "2xs" })
+      ...text(layer, "sans", "base", "variant", { size: "2xs" })
     }
   };
 
   const activePaneActiveTab = {
     ...tab,
-    background: backgroundColor(theme, 500),
-    text: text(theme, "sans", "active", { size: "sm" }),
+    background: background(elevation.top),
+    text: text(elevation.top, "sans", "base", "active", { size: "sm" }),
     border: {
       ...tab.border,
       bottom: false
@@ -42,14 +45,14 @@ export default function tabBar(theme: Theme) {
 
   const inactivePaneInactiveTab = {
     ...tab,
-    background: backgroundColor(theme, 300),
-    text: text(theme, "sans", "muted", { size: "sm" }),
+    background: background(layer),
+    text: text(layer, "sans", { size: "sm" }),
   };
 
   const inactivePaneActiveTab = {
     ...tab,
-    background: backgroundColor(theme, 500),
-    text: text(theme, "sans", "secondary", { size: "sm" }),
+    background: background(layer),
+    text: text(layer, "sans", "base", "active", { size: "sm" }),
     border: {
       ...tab.border,
       bottom: false
@@ -59,15 +62,16 @@ export default function tabBar(theme: Theme) {
   const draggedTab = {
     ...activePaneActiveTab,
     background: withOpacity(tab.background, 0.8),
-    border: undefined as any, // Remove border
-    shadow: draggedShadow(theme),
+    border: undefined as any,
+    shadow: elevation.above.shadow,
   }
 
   return {
     height,
-    background: backgroundColor(theme, 300),
-    dropTargetOverlayColor: withOpacity(theme.textColor.muted, 0.6),
-    border: border(theme, "primary", {
+    background: background(layer),
+    dropTargetOverlayColor: withOpacity(foreground(layer), 0.6),
+    border: border(layer, {
+      left: true,
       bottom: true,
       overlay: true,
     }),
@@ -81,11 +85,11 @@ export default function tabBar(theme: Theme) {
     },
     draggedTab,
     paneButton: {
-      color: iconColor(theme, "secondary"),
+      color: foreground(layer),
       iconWidth: 12,
       buttonWidth: activePaneActiveTab.height,
       hover: {
-        color: iconColor(theme, "active"),
+        color: foreground(layer, "base", "hovered"),
       },
     },
     paneButtonContainer: {
diff --git a/styles/src/styleTree/terminal.ts b/styles/src/styleTree/terminal.ts
index 9ba726b770245268557086e40941e3b8a79a179c..061f3584e96f59b618916bb31d75d745196052f0 100644
--- a/styles/src/styleTree/terminal.ts
+++ b/styles/src/styleTree/terminal.ts
@@ -1,7 +1,6 @@
-import Theme from "../themes/common/theme";
-import { border, modalShadow, player } from "./components";
+import { Elevation } from "../themes/common/colorScheme";
 
-export default function terminal(theme: Theme) {
+export default function terminal(elevation: Elevation) {
   /**
   * Colors are controlled per-cell in the terminal grid. 
   * Cells can be set to any of these more 'theme-capable' colors
@@ -9,57 +8,45 @@ export default function terminal(theme: Theme) {
   * Here are the common interpretations of these names:
   * https://en.wikipedia.org/wiki/ANSI_escape_code#Colors
   */
-  let colors = {
-    black: theme.ramps.neutral(0).hex(),
-    red: theme.ramps.red(0.5).hex(),
-    green: theme.ramps.green(0.5).hex(),
-    yellow: theme.ramps.yellow(0.5).hex(),
-    blue: theme.ramps.blue(0.5).hex(),
-    magenta: theme.ramps.magenta(0.5).hex(),
-    cyan: theme.ramps.cyan(0.5).hex(),
-    white: theme.ramps.neutral(7).hex(),
-    brightBlack: theme.ramps.neutral(4).hex(),
-    brightRed: theme.ramps.red(0.25).hex(),
-    brightGreen: theme.ramps.green(0.25).hex(),
-    brightYellow: theme.ramps.yellow(0.25).hex(),
-    brightBlue: theme.ramps.blue(0.25).hex(),
-    brightMagenta: theme.ramps.magenta(0.25).hex(),
-    brightCyan: theme.ramps.cyan(0.25).hex(),
-    brightWhite: theme.ramps.neutral(7).hex(),
+  return {
+    black: elevation.ramps.neutral(0).hex(),
+    red: elevation.ramps.red(0.5).hex(),
+    green: elevation.ramps.green(0.5).hex(),
+    yellow: elevation.ramps.yellow(0.5).hex(),
+    blue: elevation.ramps.blue(0.5).hex(),
+    magenta: elevation.ramps.magenta(0.5).hex(),
+    cyan: elevation.ramps.cyan(0.5).hex(),
+    white: elevation.ramps.neutral(1).hex(),
+    brightBlack: elevation.ramps.neutral(0.4).hex(),
+    brightRed: elevation.ramps.red(0.25).hex(),
+    brightGreen: elevation.ramps.green(0.25).hex(),
+    brightYellow: elevation.ramps.yellow(0.25).hex(),
+    brightBlue: elevation.ramps.blue(0.25).hex(),
+    brightMagenta: elevation.ramps.magenta(0.25).hex(),
+    brightCyan: elevation.ramps.cyan(0.25).hex(),
+    brightWhite: elevation.ramps.neutral(1).hex(),
     /**
      * Default color for characters
      */
-    foreground: theme.ramps.neutral(7).hex(),
+    foreground: elevation.ramps.neutral(1).hex(),
     /**
      * Default color for the rectangle background of a cell
      */
-    background: theme.ramps.neutral(0).hex(),
-    modalBackground: theme.ramps.neutral(1).hex(),
+    background: elevation.ramps.neutral(0).hex(),
+    modalBackground: elevation.ramps.neutral(0.1).hex(),
     /**
      * Default color for the cursor
      */
-    cursor: player(theme, 1).selection.cursor,
-    dimBlack: theme.ramps.neutral(7).hex(),
-    dimRed: theme.ramps.red(0.75).hex(),
-    dimGreen: theme.ramps.green(0.75).hex(),
-    dimYellow: theme.ramps.yellow(0.75).hex(),
-    dimBlue: theme.ramps.blue(0.75).hex(),
-    dimMagenta: theme.ramps.magenta(0.75).hex(),
-    dimCyan: theme.ramps.cyan(0.75).hex(),
-    dimWhite: theme.ramps.neutral(5).hex(),
-    brightForeground: theme.ramps.neutral(7).hex(),
-    dimForeground: theme.ramps.neutral(0).hex(),
-  };
-
-  return {
-    colors,
-    modalContainer: {
-      background: colors.modalBackground,
-      cornerRadius: 8,
-      padding: 8,
-      margin: 25,
-      border: border(theme, "primary"),
-      shadow: modalShadow(theme),
-    },
+    cursor: elevation.ramps.blue(0).hex(),
+    dimBlack: elevation.ramps.neutral(1).hex(),
+    dimRed: elevation.ramps.red(0.75).hex(),
+    dimGreen: elevation.ramps.green(0.75).hex(),
+    dimYellow: elevation.ramps.yellow(0.75).hex(),
+    dimBlue: elevation.ramps.blue(0.75).hex(),
+    dimMagenta: elevation.ramps.magenta(0.75).hex(),
+    dimCyan: elevation.ramps.cyan(0.75).hex(),
+    dimWhite: elevation.ramps.neutral(0.6).hex(),
+    brightForeground: elevation.ramps.neutral(1).hex(),
+    dimForeground: elevation.ramps.neutral(0).hex(),
   };
 }
diff --git a/styles/src/styleTree/tooltip.ts b/styles/src/styleTree/tooltip.ts
index 7545ad762ef0f8bf9564864e0b8f08317ee53ba9..c6551f02fa428a05065c6e1dad37cbb40f62f59f 100644
--- a/styles/src/styleTree/tooltip.ts
+++ b/styles/src/styleTree/tooltip.ts
@@ -1,21 +1,23 @@
-import Theme from "../themes/common/theme";
-import { backgroundColor, border, popoverShadow, text } from "./components";
+import { ColorScheme } from "../themes/common/colorScheme";
+import { background, border, text } from "./components";
 
-export default function tooltip(theme: Theme) {
+export default function tooltip(colorScheme: ColorScheme) {
+  let elevation = colorScheme.middle;
+  let layer = colorScheme.middle.middle;
   return {
-    background: backgroundColor(theme, 500),
-    border: border(theme, "secondary"),
+    background: background(layer),
+    border: border(layer),
     padding: { top: 4, bottom: 4, left: 8, right: 8 },
     margin: { top: 6, left: 6 },
-    shadow: popoverShadow(theme),
+    shadow: elevation.shadow,
     cornerRadius: 6,
-    text: text(theme, "sans", "primary", { size: "xs" }),
+    text: text(layer, "sans", { size: "xs" }),
     keystroke: {
-      background: backgroundColor(theme, "on500"),
+      background: background(layer, "on"),
       cornerRadius: 4,
       margin: { left: 6 },
       padding: { left: 4, right: 4 },
-      ...text(theme, "mono", "secondary", { size: "xs", weight: "bold" }),
+      ...text(layer, "mono", "on", { size: "xs", weight: "bold" }),
     },
     maxTextWidth: 200,
   };
diff --git a/styles/src/styleTree/updateNotification.ts b/styles/src/styleTree/updateNotification.ts
index 53d832733158a87f29bf8fb673517e459938d3ec..6536b441bd879d6910c20318f605ef9640a09976 100644
--- a/styles/src/styleTree/updateNotification.ts
+++ b/styles/src/styleTree/updateNotification.ts
@@ -1,29 +1,30 @@
-import Theme from "../themes/common/theme";
-import { iconColor, text } from "./components";
+import { ColorScheme } from "../themes/common/colorScheme";
+import { foreground, text } from "./components";
 
 const headerPadding = 8;
 
-export default function updateNotification(theme: Theme): Object {
+export default function updateNotification(colorScheme: ColorScheme): Object {
+  let layer = colorScheme.middle.middle;
   return {
     message: {
-      ...text(theme, "sans", "primary", { size: "xs" }),
+      ...text(layer, "sans", { size: "xs" }),
       margin: { left: headerPadding, right: headerPadding },
     },
     actionMessage: {
-      ...text(theme, "sans", "secondary", { size: "xs" }),
+      ...text(layer, "sans", { size: "xs" }),
       margin: { left: headerPadding, top: 6, bottom: 6 },
       hover: {
-        color: theme.textColor["active"],
+        color: foreground(layer, "base", "hovered"),
       },
     },
     dismissButton: {
-      color: iconColor(theme, "secondary"),
+      color: foreground(layer),
       iconWidth: 8,
       iconHeight: 8,
       buttonWidth: 8,
       buttonHeight: 8,
       hover: {
-        color: iconColor(theme, "primary"),
+        color: foreground(layer, "base", "hovered"),
       },
     },
   };
diff --git a/styles/src/styleTree/workspace.ts b/styles/src/styleTree/workspace.ts
index 9e81a06d3f092f6e0ae716b3975854ead1d80823..af2e6db2a66b3de682e07bc8a655e7fd7e74d7f6 100644
--- a/styles/src/styleTree/workspace.ts
+++ b/styles/src/styleTree/workspace.ts
@@ -1,35 +1,33 @@
-import Theme from "../themes/common/theme";
+import { ColorScheme } from "../themes/common/colorScheme";
 import { withOpacity } from "../utils/color";
 import {
-  backgroundColor,
+  background,
   border,
-  iconColor,
-  modalShadow,
-  text,
+  borderColor,
+  foreground,
+  text
 } from "./components";
 import statusBar from "./statusBar";
 import tabBar from "./tabBar";
 
-export function workspaceBackground(theme: Theme) {
-  return backgroundColor(theme, 300);
-}
-
-export default function workspace(theme: Theme) {
+export default function workspace(colorScheme: ColorScheme) {
+  const elevation = colorScheme.lowest;
+  const layer = elevation.middle;
   const titlebarPadding = 6;
 
   return {
-    background: backgroundColor(theme, 300),
+    background: background(layer),
     joiningProjectAvatar: {
       cornerRadius: 40,
       width: 80,
     },
     joiningProjectMessage: {
       padding: 12,
-      ...text(theme, "sans", "primary", { size: "lg" }),
+      ...text(layer, "sans", { size: "lg" }),
     },
     leaderBorderOpacity: 0.7,
     leaderBorderWidth: 2.0,
-    tabBar: tabBar(theme),
+    tabBar: tabBar(colorScheme),
     modal: {
       margin: {
         bottom: 52,
@@ -39,28 +37,26 @@ export default function workspace(theme: Theme) {
     },
     sidebar: {
       initialSize: 240,
-      border: {
-        color: border(theme, "primary").color,
-        width: 1,
-        left: true,
-        right: true,
-      }
+      border: border(
+        layer,
+        { left: true, right: true }
+      ),
     },
     paneDivider: {
-      color: border(theme, "secondary").color,
+      color: borderColor(layer),
       width: 1,
     },
-    statusBar: statusBar(theme),
+    statusBar: statusBar(colorScheme),
     titlebar: {
       avatarWidth: 18,
       avatarMargin: 8,
       height: 33,
-      background: backgroundColor(theme, 100),
+      background: background(layer),
       padding: {
         left: 80,
         right: titlebarPadding,
       },
-      title: text(theme, "sans", "primary"),
+      title: text(layer, "sans"),
       avatar: {
         cornerRadius: 10,
         border: {
@@ -74,10 +70,10 @@ export default function workspace(theme: Theme) {
         // TODO: The background for this ideally should be
         // set with a token, not hardcoded in rust
       },
-      border: border(theme, "primary", { bottom: true, overlay: true }),
+      border: border(layer, { bottom: true, overlay: true }),
       signInPrompt: {
-        background: backgroundColor(theme, 100),
-        border: border(theme, "secondary"),
+        background: background(layer),
+        border: border(layer),
         cornerRadius: 6,
         margin: {
           top: 1,
@@ -88,15 +84,15 @@ export default function workspace(theme: Theme) {
           left: 7,
           right: 7,
         },
-        ...text(theme, "sans", "secondary", { size: "xs" }),
+        ...text(layer, "sans", { size: "xs" }),
         hover: {
-          ...text(theme, "sans", "active", { size: "xs" }),
-          background: backgroundColor(theme, "on300", "hovered"),
-          border: border(theme, "primary"),
+          ...text(layer, "sans", "on", "hovered", { size: "xs" }),
+          background: background(layer, "on", "hovered"),
+          border: border(layer, "on", "hovered"),
         },
       },
       offlineIcon: {
-        color: iconColor(theme, "secondary"),
+        color: foreground(layer, "on"),
         width: 16,
         margin: {
           left: titlebarPadding,
@@ -106,9 +102,9 @@ export default function workspace(theme: Theme) {
         },
       },
       outdatedWarning: {
-        ...text(theme, "sans", "warning", { size: "xs" }),
-        background: backgroundColor(theme, "warning"),
-        border: border(theme, "warning"),
+        ...text(layer, "sans", "warning", { size: "xs" }),
+        background: background(layer, "warning"),
+        border: border(layer, "warning"),
         margin: {
           left: titlebarPadding,
         },
@@ -121,39 +117,39 @@ export default function workspace(theme: Theme) {
     },
     toolbar: {
       height: 34,
-      background: backgroundColor(theme, 500),
-      border: border(theme, "secondary", { bottom: true }),
+      background: background(layer),
+      border: border(layer, "base", "variant", { bottom: true }),
       itemSpacing: 8,
       navButton: {
-        color: iconColor(theme, "primary"),
+        color: foreground(layer, "on"),
         iconWidth: 12,
         buttonWidth: 24,
         cornerRadius: 6,
         hover: {
-          color: iconColor(theme, "active"),
-          background: backgroundColor(theme, "on500", "hovered"),
+          color: foreground(layer, "on", "hovered"),
+          background: background(layer, "on", "hovered"),
         },
         disabled: {
-          color: withOpacity(iconColor(theme, "muted"), 0.6),
+          color: foreground(layer, "on", "disabled"),
         },
       },
       padding: { left: 8, right: 8, top: 4, bottom: 4 },
     },
     breadcrumbs: {
-      ...text(theme, "mono", "secondary"),
+      ...text(layer, "mono", "on", "variant"),
       padding: { left: 6 },
     },
     disconnectedOverlay: {
-      ...text(theme, "sans", "active"),
-      background: withOpacity(theme.backgroundColor[500].base, 0.8),
+      ...text(layer, "sans"),
+      background: withOpacity(background(layer), 0.8),
     },
     notification: {
       margin: { top: 10 },
-      background: backgroundColor(theme, 300),
+      background: background(elevation.above.middle),
       cornerRadius: 6,
       padding: 12,
-      border: border(theme, "primary"),
-      shadow: modalShadow(theme),
+      border: border(elevation.above.middle),
+      shadow: elevation.above.shadow,
     },
     notifications: {
       width: 400,
@@ -162,17 +158,14 @@ export default function workspace(theme: Theme) {
     dock: {
       initialSizeRight: 640,
       initialSizeBottom: 480,
-      wash_color: withOpacity(theme.backgroundColor[500].base, 0.5),
+      wash_color: withOpacity(background(elevation.top), 0.5),
       panel: {
-        border: {
-          ...border(theme, "secondary"),
-          width: 1
-        },
+        border: border(elevation.top),
       },
       maximized: {
-        margin: 24,
-        border: border(theme, "secondary", { "overlay": true }),
-        shadow: modalShadow(theme),
+        margin: 32,
+        border: border(elevation.above.top, { "overlay": true }),
+        shadow: elevation.above.shadow,
       }
     }
   };
diff --git a/styles/src/themes.ts b/styles/src/themes.ts
deleted file mode 100644
index fb9b05d786d16e2f36bd42c7a5008f3a3855ff7a..0000000000000000000000000000000000000000
--- a/styles/src/themes.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import fs from "fs";
-import path from "path";
-import Theme from "./themes/common/theme";
-
-const themes: Theme[] = [];
-export default themes;
-
-const internalThemes: Theme[] = [];
-export { internalThemes }
-
-const experimentalThemes: Theme[] = [];
-export { experimentalThemes }
-
-
-function fillThemes(themesPath: string, themes: Theme[]) {
-  for (const fileName of fs.readdirSync(themesPath)) {
-    if (fileName == "template.ts") continue;
-    const filePath = path.join(themesPath, fileName);
-
-    if (fs.statSync(filePath).isFile()) {
-      const theme = require(filePath);
-      if (theme.dark) themes.push(theme.dark);
-      if (theme.light) themes.push(theme.light);
-    }
-  }
-}
-
-fillThemes(path.resolve(`${__dirname}/themes`), themes)
-fillThemes(path.resolve(`${__dirname}/themes/internal`), internalThemes)
-fillThemes(path.resolve(`${__dirname}/themes/experiments`), experimentalThemes)
-
diff --git a/styles/src/themes/abruzzo.ts b/styles/src/themes/abruzzo.ts
index e04ccba8f4e10ba452259fb0e2971b9d62ef9b4e..8f96fce1d2199d57dc40de08519dbf69d4b990e1 100644
--- a/styles/src/themes/abruzzo.ts
+++ b/styles/src/themes/abruzzo.ts
@@ -1,5 +1,5 @@
 import chroma from "chroma-js";
-import { colorRamp, createTheme } from "./common/base16";
+import { colorRamp, createColorScheme } from "./common/ramps";
 
 const name = "abruzzo";
 
@@ -24,5 +24,5 @@ const ramps = {
   magenta: colorRamp(chroma("#c1a3ef")),
 };
 
-export const dark = createTheme(`${name}`, false, ramps);
+export const dark = createColorScheme(`${name}`, false, ramps);
 // export const light = createTheme(`${name}-light`, true, ramps);
diff --git a/styles/src/themes/andromeda.ts b/styles/src/themes/andromeda.ts
index b09f0e1ab722a8538f1467fcee27166e8b2cab78..8952830cf2863fb8d6520ad2ff4a87624e3e15a2 100644
--- a/styles/src/themes/andromeda.ts
+++ b/styles/src/themes/andromeda.ts
@@ -1,5 +1,5 @@
 import chroma from "chroma-js";
-import { colorRamp, createTheme } from "./common/base16";
+import { colorRamp, createColorScheme } from "./common/ramps";
 
 const name = "andromeda";
 
@@ -24,4 +24,4 @@ const ramps = {
   magenta: colorRamp(chroma("#C74DED")),
 };
 
-export const dark = createTheme(`${name}`, false, ramps);
+export const dark = createColorScheme(`${name}`, false, ramps);
diff --git a/styles/src/themes/brushtrees.ts b/styles/src/themes/brushtrees.ts
index 24c0ac6eec9c2694516e8e59b08eb8ecf245bffa..fd62c394214bfde7e1d9eaa248047344fb5bdd63 100644
--- a/styles/src/themes/brushtrees.ts
+++ b/styles/src/themes/brushtrees.ts
@@ -1,5 +1,5 @@
 import chroma from "chroma-js";
-import { colorRamp, createTheme } from "./common/base16";
+import { colorRamp, createColorScheme } from "./common/ramps";
 
 const name = "brush-tree";
 
@@ -24,5 +24,5 @@ const ramps = {
   magenta: colorRamp(chroma("#b39f9f")),
 };
 
-export const dark = createTheme(`${name}-dark`, false, ramps);
-export const light = createTheme(`${name}-light`, true, ramps);
+export const dark = createColorScheme(`${name}-dark`, false, ramps);
+export const light = createColorScheme(`${name}-light`, true, ramps);
diff --git a/styles/src/themes/cave.ts b/styles/src/themes/cave.ts
index 2e66f4baf465c473ea4660adc46cfd22e416adbe..53d8bd088cf20701cfc8cead9209025e40d93f74 100644
--- a/styles/src/themes/cave.ts
+++ b/styles/src/themes/cave.ts
@@ -1,5 +1,5 @@
 import chroma from "chroma-js";
-import { colorRamp, createTheme } from "./common/base16";
+import { colorRamp, createColorScheme } from "./common/ramps";
 
 const name = "cave";
 
@@ -24,5 +24,5 @@ const ramps = {
   magenta: colorRamp(chroma("#bf40bf")),
 };
 
-export const dark = createTheme(`${name}-dark`, false, ramps);
-export const light = createTheme(`${name}-light`, true, ramps);
+export const dark = createColorScheme(`${name}-dark`, false, ramps);
+export const light = createColorScheme(`${name}-light`, true, ramps);
diff --git a/styles/src/themes/common/base16.ts b/styles/src/themes/common/base16.ts
deleted file mode 100644
index 7aa72ef1377ea40656a45e50bc4155f28ac7f8a5..0000000000000000000000000000000000000000
--- a/styles/src/themes/common/base16.ts
+++ /dev/null
@@ -1,288 +0,0 @@
-import chroma, { Color, Scale } from "chroma-js";
-import { fontWeights } from "../../common";
-import { withOpacity } from "../../utils/color";
-import Theme, { buildPlayer, Syntax } from "./theme";
-
-export function colorRamp(color: Color): Scale {
-  let hue = color.hsl()[0];
-  let endColor = chroma.hsl(hue, 0.88, 0.96);
-  let startColor = chroma.hsl(hue, 0.68, 0.12);
-  return chroma.scale([startColor, color, endColor]).mode("hsl");
-}
-
-export function createTheme(
-  name: string,
-  isLight: boolean,
-  color_ramps: { [rampName: string]: Scale }
-): Theme {
-  let ramps: typeof color_ramps = {};
-  // Chromajs mutates the underlying ramp when you call domain. This causes problems because
-  // we now store the ramps object in the theme so that we can pull colors out of them.
-  // So instead of calling domain and storing the result, we have to construct new ramps for each
-  // theme so that we don't modify the passed in ramps.
-  // This combined with an error in the type definitions for chroma js means we have to cast the colors
-  // function to any in order to get the colors back out from the original ramps.
-  if (isLight) {
-    for (var rampName in color_ramps) {
-      ramps[rampName] = chroma
-        .scale((color_ramps[rampName].colors as any)())
-        .domain([1, 0]);
-    }
-    ramps.neutral = chroma
-      .scale((color_ramps.neutral.colors as any)())
-      .domain([7, 0]);
-  } else {
-    for (var rampName in color_ramps) {
-      ramps[rampName] = chroma
-        .scale((color_ramps[rampName].colors as any)())
-        .domain([0, 1]);
-    }
-    ramps.neutral = chroma
-      .scale((color_ramps.neutral.colors as any)())
-      .domain([0, 7]);
-  }
-
-  let blend = isLight ? 0.12 : 0.24;
-
-  function sample(ramp: Scale, index: number): string {
-    return ramp(index).hex();
-  }
-  const darkest = ramps.neutral(isLight ? 7 : 0).hex();
-
-  const backgroundColor = {
-    // Title bar
-    100: {
-      base: sample(ramps.neutral, 1.25),
-      hovered: sample(ramps.neutral, 1.5),
-      active: sample(ramps.neutral, 1.75),
-    },
-    // Midground (panels, etc)
-    300: {
-      base: sample(ramps.neutral, 1),
-      hovered: sample(ramps.neutral, 1.25),
-      active: sample(ramps.neutral, 1.5),
-    },
-    // Editor
-    500: {
-      base: sample(ramps.neutral, 0),
-      hovered: sample(ramps.neutral, 0.25),
-      active: sample(ramps.neutral, 0.5),
-    },
-    on300: {
-      base: sample(ramps.neutral, 0),
-      hovered: sample(ramps.neutral, 0.5),
-      active: sample(ramps.neutral, 1),
-    },
-    on500: {
-      base: sample(ramps.neutral, 1),
-      hovered: sample(ramps.neutral, 1.5),
-      active: sample(ramps.neutral, 2),
-    },
-    ok: {
-      base: withOpacity(sample(ramps.green, 0.5), 0.15),
-      hovered: withOpacity(sample(ramps.green, 0.5), 0.2),
-      active: withOpacity(sample(ramps.green, 0.5), 0.25),
-    },
-    error: {
-      base: withOpacity(sample(ramps.red, 0.5), 0.15),
-      hovered: withOpacity(sample(ramps.red, 0.5), 0.2),
-      active: withOpacity(sample(ramps.red, 0.5), 0.25),
-    },
-    on500Error: {
-      base: sample(ramps.red, 0.05),
-      hovered: sample(ramps.red, 0.1),
-      active: sample(ramps.red, 0.15),
-    },
-    warning: {
-      base: withOpacity(sample(ramps.yellow, 0.5), 0.15),
-      hovered: withOpacity(sample(ramps.yellow, 0.5), 0.2),
-      active: withOpacity(sample(ramps.yellow, 0.5), 0.25),
-    },
-    on500Warning: {
-      base: sample(ramps.yellow, 0.05),
-      hovered: sample(ramps.yellow, 0.1),
-      active: sample(ramps.yellow, 0.15),
-    },
-    info: {
-      base: withOpacity(sample(ramps.blue, 0.5), 0.15),
-      hovered: withOpacity(sample(ramps.blue, 0.5), 0.2),
-      active: withOpacity(sample(ramps.blue, 0.5), 0.25),
-    },
-    on500Info: {
-      base: sample(ramps.blue, 0.05),
-      hovered: sample(ramps.blue, 0.1),
-      active: sample(ramps.blue, 0.15),
-    },
-  };
-
-  const borderColor = {
-    primary: sample(ramps.neutral, isLight ? 1.5 : 0),
-    secondary: sample(ramps.neutral, isLight ? 1.25 : 1),
-    muted: sample(ramps.neutral, isLight ? 1 : 3),
-    active: sample(ramps.neutral, isLight ? 4 : 3),
-    onMedia: withOpacity(darkest, 0.1),
-    ok: sample(ramps.green, 0.3),
-    error: sample(ramps.red, 0.3),
-    warning: sample(ramps.yellow, 0.3),
-    info: sample(ramps.blue, 0.3),
-  };
-
-  const textColor = {
-    primary: sample(ramps.neutral, 6),
-    secondary: sample(ramps.neutral, 5),
-    muted: sample(ramps.neutral, 4),
-    placeholder: sample(ramps.neutral, 3),
-    active: sample(ramps.neutral, 7),
-    feature: sample(ramps.blue, 0.5),
-    ok: sample(ramps.green, 0.5),
-    error: sample(ramps.red, 0.5),
-    warning: sample(ramps.yellow, 0.5),
-    info: sample(ramps.blue, 0.5),
-    onMedia: darkest,
-  };
-
-  const player = {
-    1: buildPlayer(sample(ramps.blue, 0.5)),
-    2: buildPlayer(sample(ramps.green, 0.5)),
-    3: buildPlayer(sample(ramps.magenta, 0.5)),
-    4: buildPlayer(sample(ramps.orange, 0.5)),
-    5: buildPlayer(sample(ramps.violet, 0.5)),
-    6: buildPlayer(sample(ramps.cyan, 0.5)),
-    7: buildPlayer(sample(ramps.red, 0.5)),
-    8: buildPlayer(sample(ramps.yellow, 0.5)),
-  };
-
-  const editor = {
-    background: backgroundColor[500].base,
-    indent_guide: borderColor.muted,
-    indent_guide_active: borderColor.secondary,
-    line: {
-      active: sample(ramps.neutral, 1),
-      highlighted: sample(ramps.neutral, 1.25), // TODO: Where is this used?
-    },
-    highlight: {
-      selection: player[1].selectionColor,
-      occurrence: withOpacity(sample(ramps.neutral, 3.5), blend),
-      activeOccurrence: withOpacity(sample(ramps.neutral, 3.5), blend * 2), // TODO: Not hooked up - https://github.com/zed-industries/zed/issues/751
-      matchingBracket: backgroundColor[500].active, // TODO: Not hooked up
-      match: sample(ramps.violet, 0.15),
-      activeMatch: withOpacity(sample(ramps.violet, 0.4), blend * 2), // TODO: Not hooked up - https://github.com/zed-industries/zed/issues/751
-      related: backgroundColor[500].hovered,
-    },
-    gutter: {
-      primary: textColor.placeholder,
-      active: textColor.active,
-    },
-  };
-
-  const syntax: Syntax = {
-    primary: {
-      color: sample(ramps.neutral, 7),
-      weight: fontWeights.normal,
-    },
-    comment: {
-      color: sample(ramps.neutral, 5),
-      weight: fontWeights.normal,
-    },
-    punctuation: {
-      color: sample(ramps.neutral, 6),
-      weight: fontWeights.normal,
-    },
-    constant: {
-      color: sample(ramps.neutral, 4),
-      weight: fontWeights.normal,
-    },
-    keyword: {
-      color: sample(ramps.blue, 0.5),
-      weight: fontWeights.normal,
-    },
-    function: {
-      color: sample(ramps.yellow, 0.5),
-      weight: fontWeights.normal,
-    },
-    type: {
-      color: sample(ramps.cyan, 0.5),
-      weight: fontWeights.normal,
-    },
-    constructor: {
-      color: sample(ramps.blue, 0.5),
-      weight: fontWeights.normal,
-    },
-    variant: {
-      color: sample(ramps.blue, 0.5),
-      weight: fontWeights.normal,
-    },
-    property: {
-      color: sample(ramps.blue, 0.5),
-      weight: fontWeights.normal,
-    },
-    enum: {
-      color: sample(ramps.orange, 0.5),
-      weight: fontWeights.normal,
-    },
-    operator: {
-      color: sample(ramps.orange, 0.5),
-      weight: fontWeights.normal,
-    },
-    string: {
-      color: sample(ramps.orange, 0.5),
-      weight: fontWeights.normal,
-    },
-    number: {
-      color: sample(ramps.green, 0.5),
-      weight: fontWeights.normal,
-    },
-    boolean: {
-      color: sample(ramps.green, 0.5),
-      weight: fontWeights.normal,
-    },
-    predictive: {
-      color: textColor.muted,
-      weight: fontWeights.normal,
-    },
-    title: {
-      color: sample(ramps.yellow, 0.5),
-      weight: fontWeights.bold,
-    },
-    emphasis: {
-      color: textColor.feature,
-      weight: fontWeights.normal,
-    },
-    "emphasis.strong": {
-      color: textColor.feature,
-      weight: fontWeights.bold,
-    },
-    linkUri: {
-      color: sample(ramps.green, 0.5),
-      weight: fontWeights.normal,
-      underline: true,
-    },
-    linkText: {
-      color: sample(ramps.orange, 0.5),
-      weight: fontWeights.normal,
-      italic: true,
-    },
-  };
-
-  const shadow = withOpacity(
-    ramps
-      .neutral(isLight ? 7 : 0)
-      .darken()
-      .hex(),
-    blend
-  );
-
-  return {
-    name,
-    isLight,
-    backgroundColor,
-    borderColor,
-    textColor,
-    iconColor: textColor,
-    editor,
-    syntax,
-    player,
-    shadow,
-    ramps,
-  };
-}
diff --git a/styles/src/themes/common/colorScheme.ts b/styles/src/themes/common/colorScheme.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ce74b72fea51c7485d230906cb7e3db90da8cfea
--- /dev/null
+++ b/styles/src/themes/common/colorScheme.ts
@@ -0,0 +1,83 @@
+import { Scale } from "chroma-js";
+
+export interface ColorScheme {
+  name: string,
+  isLight: boolean,
+
+  lowest: Elevation,
+  middle: Elevation,
+  highest: Elevation,
+
+  players: Players,
+}
+
+export interface Player {
+  cursor: string,
+  selection: string,
+}
+
+export interface Players {
+  "0": Player,
+  "1": Player,
+  "2": Player,
+  "3": Player,
+  "4": Player,
+  "5": Player,
+  "6": Player,
+  "7": Player,
+}
+
+export interface Elevation {
+  ramps: RampSet,
+
+  bottom: Layer,
+  middle: Layer,
+  top: Layer,
+
+  above?: Elevation,
+  shadow?: Shadow
+}
+
+export interface Shadow {
+  blur: number,
+  color: string,
+  offset: number[],
+}
+
+export type StyleSets = keyof Layer;
+export interface Layer {
+  base: StyleSet,
+  on: StyleSet,
+  info: StyleSet,
+  positive: StyleSet,
+  warning: StyleSet,
+  negative: StyleSet,
+}
+
+export interface RampSet {
+  neutral: Scale,
+  red: Scale,
+  orange: Scale,
+  yellow: Scale,
+  green: Scale,
+  cyan: Scale,
+  blue: Scale,
+  violet: Scale,
+  magenta: Scale,
+}
+
+export type Styles = keyof StyleSet;
+export interface StyleSet {
+  default: Style,
+  variant: Style,
+  active: Style,
+  disabled: Style,
+  hovered: Style,
+  pressed: Style,
+}
+
+export interface Style {
+  background: string,
+  border: string,
+  foreground: string,
+}
\ No newline at end of file
diff --git a/styles/src/themes/common/ramps.ts b/styles/src/themes/common/ramps.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a721dd3968f6b17be18b4378d59632521ba9d64e
--- /dev/null
+++ b/styles/src/themes/common/ramps.ts
@@ -0,0 +1,176 @@
+import chroma, { Color, Scale } from "chroma-js";
+import { ColorScheme, Elevation, Layer, Player, RampSet, Shadow, Style, StyleSet } from "./colorScheme";
+
+export function colorRamp(color: Color): Scale {
+  let hue = color.hsl()[0];
+  let endColor = chroma.hsl(hue, 0.88, 0.96);
+  let startColor = chroma.hsl(hue, 0.68, 0.12);
+  return chroma.scale([startColor, color, endColor]).mode("hsl");
+}
+
+export function createColorScheme(name: string, isLight: boolean, colorRamps: { [rampName: string]: Scale }): ColorScheme {
+  // Chromajs scales from 0 to 1 flipped if isLight is true
+  let baseRamps: typeof colorRamps = {};
+
+  // Chromajs mutates the underlying ramp when you call domain. This causes problems because
+  // we now store the ramps object in the theme so that we can pull colors out of them.
+  // So instead of calling domain and storing the result, we have to construct new ramps for each
+  // theme so that we don't modify the passed in ramps.
+  // This combined with an error in the type definitions for chroma js means we have to cast the colors
+  // function to any in order to get the colors back out from the original ramps.
+  if (isLight) {
+    for (var rampName in colorRamps) {
+      baseRamps[rampName] = chroma
+        .scale((colorRamps[rampName].colors as any)())
+        .domain([1, 0]);
+    }
+    baseRamps.neutral = chroma
+      .scale((colorRamps.neutral.colors as any)())
+      .domain([1, 0]);
+  } else {
+    for (var rampName in colorRamps) {
+      baseRamps[rampName] = chroma
+        .scale((colorRamps[rampName].colors as any)())
+        .domain([0, 1]);
+    }
+    baseRamps.neutral = chroma
+      .scale((colorRamps.neutral.colors as any)())
+      .domain([0, 1]);
+  }
+
+  let baseSet = {
+    neutral: baseRamps.neutral,
+    red: baseRamps.red,
+    orange: baseRamps.orange,
+    yellow: baseRamps.yellow,
+    green: baseRamps.green,
+    cyan: baseRamps.cyan,
+    blue: baseRamps.blue,
+    violet: baseRamps.violet,
+    magenta: baseRamps.magenta,
+  };
+
+  let lowest = elevation(
+    resampleSet(
+      baseSet,
+      evenSamples(0, 1)
+    ),
+    isLight,
+  );
+
+  let middle = elevation(
+    resampleSet(
+      baseSet,
+      evenSamples(0.125, 1)
+    ),
+    isLight,
+    {
+      blur: 4,
+      color: baseSet.neutral(isLight ? 7 : 0).darken().alpha(0.2).hex(), // TODO used blend previously. Replace with something else
+      offset: [1, 2],
+    }
+  );
+  lowest.above = middle;
+
+  let highest = elevation(
+    resampleSet(
+      baseSet,
+      evenSamples(0.25, 1)
+    ),
+    isLight,
+    {
+      blur: 16,
+      color: baseSet.neutral(isLight ? 7 : 0).darken().alpha(0.2).hex(), // TODO used blend previously. Replace with something else
+      offset: [0, 2],
+    }
+  );
+  middle.above = highest;
+
+  let players = {
+    "0": player(baseSet.blue),
+    "1": player(baseSet.green),
+    "2": player(baseSet.magenta),
+    "3": player(baseSet.orange),
+    "4": player(baseSet.violet),
+    "5": player(baseSet.cyan),
+    "6": player(baseSet.red),
+    "7": player(baseSet.yellow),
+  }
+
+  return {
+    name,
+    isLight,
+
+    lowest,
+    middle,
+    highest,
+
+    players,
+  };
+}
+
+function player(ramp: Scale): Player {
+  return {
+    selection: ramp(0.5).alpha(0.24).hex(),
+    cursor: ramp(0.5).hex(),
+  }
+}
+
+function evenSamples(min: number, max: number): number[] {
+  return Array.from(Array(101).keys()).map((i) => (i / 100) * (max - min) + min);
+}
+
+function resampleSet(ramps: RampSet, samples: number[]): RampSet {
+  return {
+    neutral: resample(ramps.neutral, samples),
+    red: resample(ramps.neutral, samples),
+    orange: resample(ramps.neutral, samples),
+    yellow: resample(ramps.neutral, samples),
+    green: resample(ramps.neutral, samples),
+    cyan: resample(ramps.neutral, samples),
+    blue: resample(ramps.neutral, samples),
+    violet: resample(ramps.neutral, samples),
+    magenta: resample(ramps.neutral, samples),
+  }
+}
+
+function resample(scale: Scale, samples: number[]): Scale {
+  let newColors = samples.map((sample) => scale(sample));
+  return chroma.scale(newColors);
+}
+
+function elevation(ramps: RampSet, isLight: boolean, shadow?: Shadow): Elevation {
+  let style: Style = {
+    background: ramps.neutral(0.25).hex(),
+    border: ramps.neutral(0.9).hex(),
+    foreground: ramps.neutral(1).hex(),
+  };
+
+  let styleSet: StyleSet = {
+    default: style,
+    variant: style,
+    active: style,
+    disabled: style,
+    hovered: style,
+    pressed: style,
+  };
+
+  let layer: Layer = {
+    base: styleSet,
+    on: styleSet,
+    info: styleSet,
+    positive: styleSet,
+    warning: styleSet,
+    negative: styleSet
+  };
+
+  return {
+    ramps,
+
+    bottom: layer,
+    middle: layer,
+    top: layer,
+
+    shadow,
+  };
+}
\ No newline at end of file
diff --git a/styles/src/themes/common/theme.ts b/styles/src/themes/common/theme.ts
deleted file mode 100644
index e01435b846c4d4a5d1fdbe8366166c38de361f07..0000000000000000000000000000000000000000
--- a/styles/src/themes/common/theme.ts
+++ /dev/null
@@ -1,164 +0,0 @@
-import { Scale } from "chroma-js";
-import { FontWeight } from "../../common";
-import { withOpacity } from "../../utils/color";
-
-export interface SyntaxHighlightStyle {
-  color: string;
-  weight?: FontWeight;
-  underline?: boolean;
-  italic?: boolean;
-}
-
-export interface Player {
-  baseColor: string;
-  cursorColor: string;
-  selectionColor: string;
-  borderColor: string;
-}
-export function buildPlayer(
-  color: string,
-  cursorOpacity?: number,
-  selectionOpacity?: number,
-  borderOpacity?: number
-) {
-  return {
-    baseColor: color,
-    cursorColor: withOpacity(color, cursorOpacity || 1.0),
-    selectionColor: withOpacity(color, selectionOpacity || 0.24),
-    borderColor: withOpacity(color, borderOpacity || 0.8),
-  };
-}
-
-export interface BackgroundColorSet {
-  base: string;
-  hovered: string;
-  active: string;
-}
-
-export interface Syntax {
-  primary: SyntaxHighlightStyle;
-  comment: SyntaxHighlightStyle;
-  punctuation: SyntaxHighlightStyle;
-  constant: SyntaxHighlightStyle;
-  keyword: SyntaxHighlightStyle;
-  function: SyntaxHighlightStyle;
-  type: SyntaxHighlightStyle;
-  variant: SyntaxHighlightStyle;
-  property: SyntaxHighlightStyle;
-  enum: SyntaxHighlightStyle;
-  operator: SyntaxHighlightStyle;
-  string: SyntaxHighlightStyle;
-  number: SyntaxHighlightStyle;
-  boolean: SyntaxHighlightStyle;
-  predictive: SyntaxHighlightStyle;
-  title: SyntaxHighlightStyle;
-  emphasis: SyntaxHighlightStyle;
-  linkUri: SyntaxHighlightStyle;
-  linkText: SyntaxHighlightStyle;
-
-  [key: string]: SyntaxHighlightStyle;
-}
-
-export default interface Theme {
-  name: string;
-  isLight: boolean;
-  backgroundColor: {
-    // Basically just Title Bar
-    // Lowest background level
-    100: BackgroundColorSet;
-    // Tab bars, panels, popovers
-    // Mid-ground
-    300: BackgroundColorSet;
-    // The editor
-    // Foreground
-    500: BackgroundColorSet;
-    // Hacks for elements on top of the midground
-    // Buttons in a panel, tab bar, or panel
-    on300: BackgroundColorSet;
-    // Hacks for elements on top of the editor
-    on500: BackgroundColorSet;
-    ok: BackgroundColorSet;
-    error: BackgroundColorSet;
-    on500Error: BackgroundColorSet;
-    warning: BackgroundColorSet;
-    on500Warning: BackgroundColorSet;
-    info: BackgroundColorSet;
-    on500Info: BackgroundColorSet;
-  };
-  borderColor: {
-    primary: string;
-    secondary: string;
-    muted: string;
-    active: string;
-    /**
-     * Used for rendering borders on top of media like avatars, images, video, etc.
-     */
-    onMedia: string;
-    ok: string;
-    error: string;
-    warning: string;
-    info: string;
-  };
-  textColor: {
-    primary: string;
-    secondary: string;
-    muted: string;
-    placeholder: string;
-    active: string;
-    feature: string;
-    ok: string;
-    error: string;
-    warning: string;
-    info: string;
-    onMedia: string;
-  };
-  iconColor: {
-    primary: string;
-    secondary: string;
-    muted: string;
-    placeholder: string;
-    active: string;
-    feature: string;
-    ok: string;
-    error: string;
-    warning: string;
-    info: string;
-  };
-  editor: {
-    background: string;
-    indent_guide: string;
-    indent_guide_active: string;
-    line: {
-      active: string;
-      highlighted: string;
-    };
-    highlight: {
-      selection: string;
-      occurrence: string;
-      activeOccurrence: string;
-      matchingBracket: string;
-      match: string;
-      activeMatch: string;
-      related: string;
-    };
-    gutter: {
-      primary: string;
-      active: string;
-    };
-  };
-
-  syntax: Syntax;
-
-  player: {
-    1: Player;
-    2: Player;
-    3: Player;
-    4: Player;
-    5: Player;
-    6: Player;
-    7: Player;
-    8: Player;
-  };
-  shadow: string;
-  ramps: { [rampName: string]: Scale };
-}
diff --git a/styles/src/themes/one-dark.ts b/styles/src/themes/one-dark.ts
index 2fbabb5c80ce43c4c68f15b5188c7516e4f3b6ec..f90e0331d352c6edf1cd73517cf603e5a4ce370f 100644
--- a/styles/src/themes/one-dark.ts
+++ b/styles/src/themes/one-dark.ts
@@ -1,5 +1,5 @@
 import chroma from "chroma-js";
-import { colorRamp, createTheme } from "./common/base16";
+import { colorRamp, createColorScheme } from "./common/ramps";
 
 const name = "one";
 const author = "Chris Kempson (http://chriskempson.com)";
@@ -44,4 +44,4 @@ const ramps = {
   magenta: colorRamp(chroma(base0F)),
 };
 
-export const dark = createTheme(`${name}-dark`, false, ramps);
+export const dark = createColorScheme(`${name}-dark`, false, ramps);
diff --git a/styles/src/themes/one-light.ts b/styles/src/themes/one-light.ts
index c70fa2d1318e56bfbf0d3fbb0bba3cfd292745d3..c857b1d052b755d2d06caa4c24ea7ed0888eec48 100644
--- a/styles/src/themes/one-light.ts
+++ b/styles/src/themes/one-light.ts
@@ -1,5 +1,5 @@
 import chroma from "chroma-js";
-import { colorRamp, createTheme } from "./common/base16";
+import { colorRamp, createColorScheme } from "./common/ramps";
 
 const name = "one";
 const author = "Daniel Pfeifer (http://github.com/purpleKarrot)";
@@ -44,4 +44,4 @@ const ramps = {
   magenta: colorRamp(chroma(base0F)),
 };
 
-export const light = createTheme(`${name}-light`, true, ramps);
+export const light = createColorScheme(`${name}-light`, true, ramps);
diff --git a/styles/src/themes/rose-pine-dawn.ts b/styles/src/themes/rose-pine-dawn.ts
index 0c296c8608bc31bac8f4c7a137cb69398800604a..e27740ca93de4dd8f15b1e44954fac6c2771aa67 100644
--- a/styles/src/themes/rose-pine-dawn.ts
+++ b/styles/src/themes/rose-pine-dawn.ts
@@ -1,5 +1,5 @@
 import chroma from "chroma-js";
-import { colorRamp, createTheme } from "./common/base16";
+import { colorRamp, createColorScheme } from "./common/ramps";
 
 const name = "rosé-pine-dawn";
 
@@ -24,4 +24,4 @@ const ramps = {
   magenta: colorRamp(chroma("#79549F")),
 };
 
-export const light = createTheme(`${name}`, true, ramps);
+export const light = createColorScheme(`${name}`, true, ramps);
diff --git a/styles/src/themes/rose-pine-moon.ts b/styles/src/themes/rose-pine-moon.ts
index b3b975a2677b9bf496c1c120af114d5c48eef24c..927083f66caabb8857ddecf592c26615463832da 100644
--- a/styles/src/themes/rose-pine-moon.ts
+++ b/styles/src/themes/rose-pine-moon.ts
@@ -1,5 +1,5 @@
 import chroma from "chroma-js";
-import { colorRamp, createTheme } from "./common/base16";
+import { colorRamp, createColorScheme } from "./common/ramps";
 
 const name = "rosé-pine-moon";
 
@@ -24,4 +24,4 @@ const ramps = {
   magenta: colorRamp(chroma("#AB6FE9")),
 };
 
-export const dark = createTheme(`${name}`, false, ramps);
+export const dark = createColorScheme(`${name}`, false, ramps);
diff --git a/styles/src/themes/rose-pine.ts b/styles/src/themes/rose-pine.ts
index b0ebbfd2438dec410eb828373e509e4c8bb66778..b33c4a3fb571f41b91fd1e4495d4dbf7fa4e9b55 100644
--- a/styles/src/themes/rose-pine.ts
+++ b/styles/src/themes/rose-pine.ts
@@ -1,5 +1,5 @@
 import chroma from "chroma-js";
-import { colorRamp, createTheme } from "./common/base16";
+import { colorRamp, createColorScheme } from "./common/ramps";
 
 const name = "rosé-pine";
 
@@ -24,4 +24,4 @@ const ramps = {
   magenta: colorRamp(chroma("#AB6FE9")),
 };
 
-export const dark = createTheme(`${name}`, false, ramps);
+export const dark = createColorScheme(`${name}`, false, ramps);
diff --git a/styles/src/themes/sandcastle.ts b/styles/src/themes/sandcastle.ts
index 7d08ec46db2913683d175a1cacfe36b330c86deb..feffb854b2752063e26eab909f9936e3c2255c6c 100644
--- a/styles/src/themes/sandcastle.ts
+++ b/styles/src/themes/sandcastle.ts
@@ -1,5 +1,5 @@
 import chroma from "chroma-js";
-import { colorRamp, createTheme } from "./common/base16";
+import { colorRamp, createColorScheme } from "./common/ramps";
 
 const name = "sandcastle";
 
@@ -24,4 +24,4 @@ const ramps = {
   magenta: colorRamp(chroma("#a87322")),
 };
 
-export const dark = createTheme(`${name}`, false, ramps);
+export const dark = createColorScheme(`${name}`, false, ramps);
diff --git a/styles/src/themes/solarized.ts b/styles/src/themes/solarized.ts
index 7027d16447fc3753b909b5ffcc268cfaba78c78b..7c0ea3ca029d932f4eefae3ff08540ae3899a545 100644
--- a/styles/src/themes/solarized.ts
+++ b/styles/src/themes/solarized.ts
@@ -1,5 +1,5 @@
 import chroma from "chroma-js";
-import { colorRamp, createTheme } from "./common/base16";
+import { colorRamp, createColorScheme } from "./common/ramps";
 
 const name = "solarized";
 
@@ -24,5 +24,5 @@ const ramps = {
   magenta: colorRamp(chroma("#d33682")),
 };
 
-export const dark = createTheme(`${name}-dark`, false, ramps);
-export const light = createTheme(`${name}-light`, true, ramps);
+export const dark = createColorScheme(`${name}-dark`, false, ramps);
+export const light = createColorScheme(`${name}-light`, true, ramps);
diff --git a/styles/src/themes/sulphurpool.ts b/styles/src/themes/sulphurpool.ts
index 6aa95008c305a121c068ca409510f01bf65802a5..e701ab3d21cc640dd15e59e90b96873008058d9a 100644
--- a/styles/src/themes/sulphurpool.ts
+++ b/styles/src/themes/sulphurpool.ts
@@ -1,5 +1,5 @@
 import chroma from "chroma-js";
-import { colorRamp, createTheme } from "./common/base16";
+import { colorRamp, createColorScheme } from "./common/ramps";
 
 const name = "sulphurpool";
 
@@ -24,5 +24,5 @@ const ramps = {
   magenta: colorRamp(chroma("#9c637a")),
 };
 
-export const dark = createTheme(`${name}-dark`, false, ramps);
-export const light = createTheme(`${name}-light`, true, ramps);
+export const dark = createColorScheme(`${name}-dark`, false, ramps);
+export const light = createColorScheme(`${name}-light`, true, ramps);
diff --git a/styles/src/themes/summercamp.ts b/styles/src/themes/summercamp.ts
index efb716c2df34a8efc9e496f18a4950c0391fc397..706eb843444af8d22d4da3fc9b6bbebe6a38e1a9 100644
--- a/styles/src/themes/summercamp.ts
+++ b/styles/src/themes/summercamp.ts
@@ -1,5 +1,5 @@
 import chroma from "chroma-js";
-import { colorRamp, createTheme } from "./common/base16";
+import { colorRamp, createColorScheme } from "./common/ramps";
 
 const name = "summercamp";
 
@@ -24,4 +24,4 @@ const ramps = {
   magenta: colorRamp(chroma("#F69BE7")),
 };
 
-export const dark = createTheme(`${name}`, false, ramps);
+export const dark = createColorScheme(`${name}`, false, ramps);
diff --git a/styles/src/themes/summerfruit.ts b/styles/src/themes/summerfruit.ts
index 502e3893cbdf126862d621b76473da7dafa7d4ac..8f0096bb5e3ca315419176086c8dd90e701cc5e9 100644
--- a/styles/src/themes/summerfruit.ts
+++ b/styles/src/themes/summerfruit.ts
@@ -1,5 +1,5 @@
 import chroma from "chroma-js";
-import { colorRamp, createTheme } from "./common/base16";
+import { colorRamp, createColorScheme } from "./common/ramps";
 
 const name = "summerfruit";
 
@@ -24,5 +24,5 @@ const ramps = {
   magenta: colorRamp(chroma("#CC6633")),
 };
 
-export const dark = createTheme(`${name}-dark`, false, ramps);
-export const light = createTheme(`${name}-light`, true, ramps);
+export const dark = createColorScheme(`${name}-dark`, false, ramps);
+export const light = createColorScheme(`${name}-light`, true, ramps);
diff --git a/styles/src/themes/template.ts b/styles/src/themes/template.ts
index d8617287a26eb2b24db2c3fae47bc5b91e8229d6..9f9ba897998c429c1620d74e9a9c6a850fe978ac 100644
--- a/styles/src/themes/template.ts
+++ b/styles/src/themes/template.ts
@@ -3,7 +3,7 @@
  **/
 
 import chroma from "chroma-js";
-import { colorRamp, createTheme } from "./common/base16";
+import { colorRamp, createColorScheme } from "./common/ramps";
 
 /**
  * Theme Name
@@ -56,14 +56,14 @@ const ramps = {
 };
 
 /**
- * Theme Variants
+ * Color Scheme Variants
  *
  * Currently we only support (and require) dark and light themes
  * Eventually you will be able to have only a light or dark theme,
  * and define other variants here.
  *
- * createTheme([name], [isLight], [arrayOfRamps])
+ * createColorScheme([name], [isLight], [arrayOfRamps])
  **/
 
-export const dark = createTheme(`${name}-dark`, false, ramps);
-export const light = createTheme(`${name}-light`, true, ramps);
+export const dark = createColorScheme(`${name}-dark`, false, ramps);
+export const light = createColorScheme(`${name}-light`, true, ramps);

From db5c83eb3619639daf3ab0d5e01dc615bf19280a Mon Sep 17 00:00:00 2001
From: K Simmons <keith@zed.dev>
Date: Wed, 21 Sep 2022 15:57:39 -0700
Subject: [PATCH 02/50] add theme testbench command

---
 Cargo.lock                                    |  13 +
 crates/terminal/Cargo.toml                    |   1 -
 .../terminal/src/terminal_container_view.rs   |  11 -
 crates/theme/src/theme.rs                     |  72 ++-
 crates/theme_testbench/Cargo.toml             |  18 +
 crates/theme_testbench/src/theme_testbench.rs | 506 ++++++++++++++++++
 crates/zed/Cargo.toml                         |   1 +
 crates/zed/src/main.rs                        |   1 +
 styles/src/styleTree/app.ts                   |  55 ++
 styles/src/styleTree/editor.ts                |   4 +-
 styles/src/themes/common/ramps.ts             |  89 ++-
 11 files changed, 728 insertions(+), 43 deletions(-)
 create mode 100644 crates/theme_testbench/Cargo.toml
 create mode 100644 crates/theme_testbench/src/theme_testbench.rs

diff --git a/Cargo.lock b/Cargo.lock
index ea877a39d26286dc99d98aea9ea60769b70a7a27..a885db0b137f20c728920573661c267e6896a0e5 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -5551,6 +5551,18 @@ dependencies = [
  "workspace",
 ]
 
+[[package]]
+name = "theme_testbench"
+version = "0.1.0"
+dependencies = [
+ "gpui",
+ "project",
+ "settings",
+ "smallvec",
+ "theme",
+ "workspace",
+]
+
 [[package]]
 name = "thiserror"
 version = "1.0.31"
@@ -7180,6 +7192,7 @@ dependencies = [
  "text",
  "theme",
  "theme_selector",
+ "theme_testbench",
  "thiserror",
  "tiny_http",
  "toml",
diff --git a/crates/terminal/Cargo.toml b/crates/terminal/Cargo.toml
index 7831be1c5af47f1dd9e80bac7f5be5d070e21e51..e81ff413b1d4c9173b9c8c2891d9e15164f06fe2 100644
--- a/crates/terminal/Cargo.toml
+++ b/crates/terminal/Cargo.toml
@@ -30,7 +30,6 @@ libc = "0.2"
 anyhow = "1"
 thiserror = "1.0"
 
-
 [dev-dependencies]
 gpui = { path = "../gpui", features = ["test-support"] }
 client = { path = "../client", features = ["test-support"]}
diff --git a/crates/terminal/src/terminal_container_view.rs b/crates/terminal/src/terminal_container_view.rs
index 1699430eafe07cfc4ab0bc475f6f66dacf7e8393..9cf26ac743395b93c4b4f11600392d835415443f 100644
--- a/crates/terminal/src/terminal_container_view.rs
+++ b/crates/terminal/src/terminal_container_view.rs
@@ -45,7 +45,6 @@ impl TerminalContainerContent {
 }
 
 pub struct TerminalContainer {
-    modal: bool,
     pub content: TerminalContainerContent,
     associated_directory: Option<PathBuf>,
 }
@@ -133,7 +132,6 @@ impl TerminalContainer {
         cx.focus(content.handle());
 
         TerminalContainer {
-            modal,
             content,
             associated_directory: working_directory,
         }
@@ -146,7 +144,6 @@ impl TerminalContainer {
     ) -> Self {
         let connected_view = cx.add_view(|cx| TerminalView::from_terminal(terminal, modal, cx));
         TerminalContainer {
-            modal,
             content: TerminalContainerContent::Connected(connected_view),
             associated_directory: None,
         }
@@ -178,14 +175,6 @@ impl View for TerminalContainer {
             cx.focus(self.content.handle());
         }
     }
-
-    fn keymap_context(&self, _: &gpui::AppContext) -> gpui::keymap::Context {
-        let mut context = Self::default_keymap_context();
-        if self.modal {
-            context.set.insert("ModalTerminal".into());
-        }
-        context
-    }
 }
 
 impl View for ErrorView {
diff --git a/crates/theme/src/theme.rs b/crates/theme/src/theme.rs
index 9b7a0f24d4225a592fc6b051f2927947b1d3cb89..0f8b5778936c92afc8742575e1400aa7e286c799 100644
--- a/crates/theme/src/theme.rs
+++ b/crates/theme/src/theme.rs
@@ -2,7 +2,7 @@ mod theme_registry;
 
 use gpui::{
     color::Color,
-    elements::{ContainerStyle, ImageStyle, LabelStyle, TooltipStyle},
+    elements::{ContainerStyle, ImageStyle, LabelStyle, Shadow, TooltipStyle},
     fonts::{HighlightStyle, TextStyle},
     Border, MouseState,
 };
@@ -32,6 +32,7 @@ pub struct Theme {
     pub update_notification: UpdateNotification,
     pub tooltip: TooltipStyle,
     pub terminal: TerminalStyle,
+    pub color_scheme: ColorScheme,
 }
 
 #[derive(Deserialize, Default, Clone)]
@@ -728,3 +729,72 @@ pub struct TerminalStyle {
     pub bright_foreground: Color,
     pub dim_foreground: Color,
 }
+
+#[derive(Clone, Deserialize, Default)]
+pub struct ColorScheme {
+    pub name: String,
+    pub is_light: bool,
+
+    pub lowest: Elevation,
+    pub middle: Elevation,
+    pub highest: Elevation,
+
+    pub players: Vec<Player>,
+}
+
+#[derive(Clone, Deserialize, Default)]
+pub struct Elevation {
+    pub ramps: RampSet,
+
+    pub bottom: Layer,
+    pub middle: Layer,
+    pub top: Layer,
+
+    pub shadow: Option<Shadow>,
+}
+
+#[derive(Clone, Deserialize, Default)]
+pub struct Player {
+    pub cursor: Color,
+    pub selection: Color,
+}
+
+#[derive(Clone, Deserialize, Default)]
+pub struct RampSet {
+    pub neutral: Vec<Color>,
+    pub red: Vec<Color>,
+    pub orange: Vec<Color>,
+    pub yellow: Vec<Color>,
+    pub green: Vec<Color>,
+    pub cyan: Vec<Color>,
+    pub blue: Vec<Color>,
+    pub violet: Vec<Color>,
+    pub magenta: Vec<Color>,
+}
+
+#[derive(Clone, Deserialize, Default)]
+pub struct Layer {
+    pub base: StyleSet,
+    pub on: StyleSet,
+    pub info: StyleSet,
+    pub positive: StyleSet,
+    pub warning: StyleSet,
+    pub negative: StyleSet,
+}
+
+#[derive(Clone, Deserialize, Default)]
+pub struct StyleSet {
+    pub default: Style,
+    pub variant: Style,
+    pub active: Style,
+    pub disabled: Style,
+    pub hovered: Style,
+    pub pressed: Style,
+}
+
+#[derive(Clone, Deserialize, Default)]
+pub struct Style {
+    pub background: Color,
+    pub border: Color,
+    pub foreground: Color,
+}
diff --git a/crates/theme_testbench/Cargo.toml b/crates/theme_testbench/Cargo.toml
new file mode 100644
index 0000000000000000000000000000000000000000..9cb063c1e5c9646845b4d5a6edacb1f54e22b0c9
--- /dev/null
+++ b/crates/theme_testbench/Cargo.toml
@@ -0,0 +1,18 @@
+[package]
+name = "theme_testbench"
+version = "0.1.0"
+edition = "2021"
+
+[lib]
+path = "src/theme_testbench.rs"
+doctest = false
+
+
+[dependencies]
+gpui = { path = "../gpui" }
+theme = { path = "../theme" }
+settings = { path = "../settings" }
+workspace = { path = "../workspace" }
+project = { path = "../project" }
+
+smallvec = { version = "1.6", features = ["union"] }
\ No newline at end of file
diff --git a/crates/theme_testbench/src/theme_testbench.rs b/crates/theme_testbench/src/theme_testbench.rs
new file mode 100644
index 0000000000000000000000000000000000000000..43000306bf6e61a369700d50f87dc51f21ab1232
--- /dev/null
+++ b/crates/theme_testbench/src/theme_testbench.rs
@@ -0,0 +1,506 @@
+use gpui::{
+    actions,
+    color::Color,
+    elements::{
+        Canvas, ConstrainedBox, Container, ContainerStyle, ElementBox, Flex, Label, Margin,
+        MouseEventHandler, Padding, ParentElement,
+    },
+    fonts::TextStyle,
+    Border, Element, Entity, MutableAppContext, Quad, RenderContext, View, ViewContext,
+};
+use project::{Project, ProjectEntryId, ProjectPath};
+use settings::Settings;
+use smallvec::SmallVec;
+use theme::{ColorScheme, Elevation, Layer, Style, StyleSet};
+use workspace::{Item, Workspace};
+
+actions!(theme, [DeployThemeTestbench]);
+
+pub fn init(cx: &mut MutableAppContext) {
+    cx.add_action(ThemeTestbench::deploy);
+}
+
+pub struct ThemeTestbench {}
+
+impl ThemeTestbench {
+    pub fn deploy(
+        workspace: &mut Workspace,
+        _: &DeployThemeTestbench,
+        cx: &mut ViewContext<Workspace>,
+    ) {
+        let view = cx.add_view(|_| ThemeTestbench {});
+        workspace.add_item(Box::new(view), cx);
+    }
+
+    fn render_ramps(color_scheme: &ColorScheme) -> Flex {
+        fn display_ramp(ramp: &Vec<Color>) -> ElementBox {
+            Flex::row()
+                .with_children(ramp.iter().cloned().map(|color| {
+                    Canvas::new(move |bounds, _, cx| {
+                        cx.scene.push_quad(Quad {
+                            bounds,
+                            background: Some(color),
+                            ..Default::default()
+                        });
+                    })
+                    .flex(1.0, false)
+                    .boxed()
+                }))
+                .flex(1.0, false)
+                .boxed()
+        }
+
+        Flex::column()
+            .with_child(display_ramp(&color_scheme.lowest.ramps.neutral))
+            .with_child(display_ramp(&color_scheme.lowest.ramps.red))
+            .with_child(display_ramp(&color_scheme.lowest.ramps.orange))
+            .with_child(display_ramp(&color_scheme.lowest.ramps.yellow))
+            .with_child(display_ramp(&color_scheme.lowest.ramps.green))
+            .with_child(display_ramp(&color_scheme.lowest.ramps.cyan))
+            .with_child(display_ramp(&color_scheme.lowest.ramps.blue))
+            .with_child(display_ramp(&color_scheme.lowest.ramps.violet))
+            .with_child(display_ramp(&color_scheme.lowest.ramps.magenta))
+    }
+
+    fn render_elevation(
+        elevation_index: usize,
+        elevation: &Elevation,
+        cx: &mut RenderContext<'_, Self>,
+    ) -> Flex {
+        Flex::column()
+            .with_child(
+                Self::render_layer(elevation_index * 1000 + 100, &elevation.bottom, cx)
+                    .flex(1., true)
+                    .boxed(),
+            )
+            .with_child(
+                Self::render_layer(elevation_index * 1000 + 200, &elevation.middle, cx)
+                    .flex(1., true)
+                    .boxed(),
+            )
+            .with_child(
+                Self::render_layer(elevation_index * 1000 + 300, &elevation.top, cx)
+                    .flex(1., true)
+                    .boxed(),
+            )
+    }
+
+    fn render_layer(
+        layer_index: usize,
+        layer: &Layer,
+        cx: &mut RenderContext<'_, Self>,
+    ) -> Container {
+        Flex::column()
+            .with_child(
+                Flex::row()
+                    .with_child(Self::render_button(
+                        0,
+                        layer_index,
+                        "base",
+                        &layer.base,
+                        None,
+                        cx,
+                    ))
+                    .with_child(Self::render_button(
+                        1,
+                        layer_index,
+                        "active",
+                        &layer.base,
+                        Some(|style_set| &style_set.active),
+                        cx,
+                    ))
+                    .with_child(Self::render_button(
+                        2,
+                        layer_index,
+                        "disabled",
+                        &layer.base,
+                        Some(|style_set| &style_set.disabled),
+                        cx,
+                    ))
+                    .flex(1., false)
+                    .boxed(),
+            )
+            .with_child(
+                Flex::row()
+                    .with_child(Self::render_button(
+                        3,
+                        layer_index,
+                        "on",
+                        &layer.on,
+                        None,
+                        cx,
+                    ))
+                    .with_child(Self::render_button(
+                        4,
+                        layer_index,
+                        "active",
+                        &layer.on,
+                        Some(|style_set| &style_set.active),
+                        cx,
+                    ))
+                    .with_child(Self::render_button(
+                        5,
+                        layer_index,
+                        "disabled",
+                        &layer.on,
+                        Some(|style_set| &style_set.disabled),
+                        cx,
+                    ))
+                    .flex(1., false)
+                    .boxed(),
+            )
+            .with_child(
+                Flex::row()
+                    .with_child(Self::render_button(
+                        6,
+                        layer_index,
+                        "info",
+                        &layer.info,
+                        None,
+                        cx,
+                    ))
+                    .with_child(Self::render_button(
+                        7,
+                        layer_index,
+                        "active",
+                        &layer.info,
+                        Some(|style_set| &style_set.active),
+                        cx,
+                    ))
+                    .with_child(Self::render_button(
+                        8,
+                        layer_index,
+                        "disabled",
+                        &layer.info,
+                        Some(|style_set| &style_set.disabled),
+                        cx,
+                    ))
+                    .flex(1., false)
+                    .boxed(),
+            )
+            .with_child(
+                Flex::row()
+                    .with_child(Self::render_button(
+                        9,
+                        layer_index,
+                        "positive",
+                        &layer.positive,
+                        None,
+                        cx,
+                    ))
+                    .with_child(Self::render_button(
+                        10,
+                        layer_index,
+                        "active",
+                        &layer.positive,
+                        Some(|style_set| &style_set.active),
+                        cx,
+                    ))
+                    .with_child(Self::render_button(
+                        11,
+                        layer_index,
+                        "disabled",
+                        &layer.positive,
+                        Some(|style_set| &style_set.disabled),
+                        cx,
+                    ))
+                    .flex(1., false)
+                    .boxed(),
+            )
+            .with_child(
+                Flex::row()
+                    .with_child(Self::render_button(
+                        12,
+                        layer_index,
+                        "warning",
+                        &layer.warning,
+                        None,
+                        cx,
+                    ))
+                    .with_child(Self::render_button(
+                        13,
+                        layer_index,
+                        "active",
+                        &layer.warning,
+                        Some(|style_set| &style_set.active),
+                        cx,
+                    ))
+                    .with_child(Self::render_button(
+                        14,
+                        layer_index,
+                        "disabled",
+                        &layer.warning,
+                        Some(|style_set| &style_set.disabled),
+                        cx,
+                    ))
+                    .flex(1., false)
+                    .boxed(),
+            )
+            .with_child(
+                Flex::row()
+                    .with_child(Self::render_button(
+                        15,
+                        layer_index,
+                        "negative",
+                        &layer.negative,
+                        None,
+                        cx,
+                    ))
+                    .with_child(Self::render_button(
+                        16,
+                        layer_index,
+                        "active",
+                        &layer.negative,
+                        Some(|style_set| &style_set.active),
+                        cx,
+                    ))
+                    .with_child(Self::render_button(
+                        17,
+                        layer_index,
+                        "disabled",
+                        &layer.negative,
+                        Some(|style_set| &style_set.disabled),
+                        cx,
+                    ))
+                    .flex(1., false)
+                    .boxed(),
+            )
+            .contained()
+            .with_style(ContainerStyle {
+                margin: Margin {
+                    top: 10.,
+                    bottom: 10.,
+                    left: 10.,
+                    right: 10.,
+                },
+                background_color: Some(layer.base.default.background),
+                ..Default::default()
+            })
+    }
+
+    fn render_button(
+        button_index: usize,
+        layer_index: usize,
+        text: &'static str,
+        style_set: &StyleSet,
+        style_override: Option<fn(&StyleSet) -> &Style>,
+        cx: &mut RenderContext<'_, Self>,
+    ) -> ElementBox {
+        enum TestBenchButton {}
+        MouseEventHandler::<TestBenchButton>::new(layer_index + button_index, cx, |state, cx| {
+            let style = if let Some(style_override) = style_override {
+                style_override(&style_set)
+            } else if state.clicked.is_some() {
+                &style_set.pressed
+            } else if state.hovered {
+                &style_set.hovered
+            } else {
+                &style_set.default
+            };
+
+            Self::render_label(text.to_string(), style, cx)
+                .contained()
+                .with_style(ContainerStyle {
+                    margin: Margin {
+                        top: 4.,
+                        bottom: 4.,
+                        left: 4.,
+                        right: 4.,
+                    },
+                    padding: Padding {
+                        top: 4.,
+                        bottom: 4.,
+                        left: 4.,
+                        right: 4.,
+                    },
+                    background_color: Some(style.background),
+                    border: Border {
+                        width: 1.,
+                        color: style.border,
+                        overlay: false,
+                        top: true,
+                        bottom: true,
+                        left: true,
+                        right: true,
+                    },
+                    corner_radius: 2.,
+                    ..Default::default()
+                })
+                .boxed()
+        })
+        .flex(1., true)
+        .boxed()
+    }
+
+    fn render_label(text: String, style: &Style, cx: &mut RenderContext<'_, Self>) -> Label {
+        let settings = cx.global::<Settings>();
+        let font_cache = cx.font_cache();
+        let family_id = settings.buffer_font_family;
+        let font_size = settings.buffer_font_size;
+        let font_id = font_cache
+            .select_font(family_id, &Default::default())
+            .unwrap();
+
+        let text_style = TextStyle {
+            color: style.foreground,
+            font_family_id: family_id,
+            font_family_name: font_cache.family_name(family_id).unwrap(),
+            font_id,
+            font_size,
+            font_properties: Default::default(),
+            underline: Default::default(),
+        };
+
+        Label::new(text, text_style)
+    }
+
+    fn elevation_style(elevation: &Elevation) -> ContainerStyle {
+        let style = ContainerStyle {
+            margin: Margin {
+                top: 10.,
+                bottom: 10.,
+                left: 10.,
+                right: 10.,
+            },
+            background_color: Some(elevation.bottom.base.default.background),
+            ..Default::default()
+        };
+
+        if elevation.shadow.is_some() {
+            ContainerStyle {
+                padding: Padding {
+                    top: 10.,
+                    bottom: 10.,
+                    left: 10.,
+                    right: 10.,
+                },
+                border: Border {
+                    width: 1.,
+                    color: elevation.bottom.base.default.border,
+                    overlay: false,
+                    top: true,
+                    bottom: true,
+                    left: true,
+                    right: true,
+                },
+                corner_radius: 32.,
+                shadow: elevation.shadow,
+                ..style
+            }
+        } else {
+            style
+        }
+    }
+}
+
+impl Entity for ThemeTestbench {
+    type Event = ();
+}
+
+impl View for ThemeTestbench {
+    fn ui_name() -> &'static str {
+        "ThemeTestbench"
+    }
+
+    fn render(&mut self, cx: &mut gpui::RenderContext<'_, Self>) -> gpui::ElementBox {
+        let color_scheme = &cx.global::<Settings>().theme.clone().color_scheme;
+
+        Flex::row()
+            .with_child(
+                Self::render_ramps(color_scheme)
+                    .contained()
+                    .with_margin_right(10.)
+                    .flex(0.2, false)
+                    .boxed(),
+            )
+            .with_child(
+                Self::render_elevation(0, &color_scheme.lowest, cx)
+                    .flex(1., true)
+                    .boxed(),
+            )
+            .with_child(
+                Flex::row()
+                    .with_child(
+                        Self::render_elevation(1, &color_scheme.middle, cx)
+                            .flex(1., true)
+                            .boxed(),
+                    )
+                    .with_child(
+                        Container::new(
+                            Self::render_elevation(2, &color_scheme.highest, cx).boxed(),
+                        )
+                        .with_style(Self::elevation_style(&color_scheme.highest))
+                        .flex(1., true)
+                        .boxed(),
+                    )
+                    .contained()
+                    .with_style(Self::elevation_style(&color_scheme.middle))
+                    .flex(2., true)
+                    .boxed(),
+            )
+            .contained()
+            .with_style(Self::elevation_style(&color_scheme.lowest))
+            .boxed()
+    }
+}
+
+impl Item for ThemeTestbench {
+    fn tab_content(
+        &self,
+        _: Option<usize>,
+        style: &theme::Tab,
+        _: &gpui::AppContext,
+    ) -> gpui::ElementBox {
+        Label::new("Theme Testbench".into(), style.label.clone())
+            .aligned()
+            .contained()
+            .boxed()
+    }
+
+    fn project_path(&self, _: &gpui::AppContext) -> Option<ProjectPath> {
+        None
+    }
+
+    fn project_entry_ids(&self, _: &gpui::AppContext) -> SmallVec<[ProjectEntryId; 3]> {
+        SmallVec::new()
+    }
+
+    fn is_singleton(&self, _: &gpui::AppContext) -> bool {
+        false
+    }
+
+    fn set_nav_history(&mut self, _: workspace::ItemNavHistory, _: &mut ViewContext<Self>) {}
+
+    fn can_save(&self, _: &gpui::AppContext) -> bool {
+        false
+    }
+
+    fn save(
+        &mut self,
+        _: gpui::ModelHandle<Project>,
+        _: &mut ViewContext<Self>,
+    ) -> gpui::Task<gpui::anyhow::Result<()>> {
+        unreachable!("save should not have been called");
+    }
+
+    fn save_as(
+        &mut self,
+        _: gpui::ModelHandle<Project>,
+        _: std::path::PathBuf,
+        _: &mut ViewContext<Self>,
+    ) -> gpui::Task<gpui::anyhow::Result<()>> {
+        unreachable!("save_as should not have been called");
+    }
+
+    fn reload(
+        &mut self,
+        _: gpui::ModelHandle<Project>,
+        _: &mut ViewContext<Self>,
+    ) -> gpui::Task<gpui::anyhow::Result<()>> {
+        gpui::Task::ready(Ok(()))
+    }
+
+    fn to_item_events(_: &Self::Event) -> Vec<workspace::ItemEvent> {
+        Vec::new()
+    }
+}
diff --git a/crates/zed/Cargo.toml b/crates/zed/Cargo.toml
index 91815677ce7eef158c012e018f06a3180febfd9d..b2b795243b51067ed3bb1362ebe5f19d38efe562 100644
--- a/crates/zed/Cargo.toml
+++ b/crates/zed/Cargo.toml
@@ -50,6 +50,7 @@ text = { path = "../text" }
 terminal = { path = "../terminal" }
 theme = { path = "../theme" }
 theme_selector = { path = "../theme_selector" }
+theme_testbench = { path = "../theme_testbench" }
 util = { path = "../util" }
 vim = { path = "../vim" }
 workspace = { path = "../workspace" }
diff --git a/crates/zed/src/main.rs b/crates/zed/src/main.rs
index 84b9f3bc109022ad1d6e420d2c382d031d58c616..7e047429a32bbb60aeb57a58bcbb1717d41de6e6 100644
--- a/crates/zed/src/main.rs
+++ b/crates/zed/src/main.rs
@@ -119,6 +119,7 @@ fn main() {
         search::init(cx);
         vim::init(cx);
         terminal::init(cx);
+        theme_testbench::init(cx);
 
         let db = cx.background().block(db);
         cx.spawn(|cx| watch_themes(fs.clone(), themes.clone(), cx))
diff --git a/styles/src/styleTree/app.ts b/styles/src/styleTree/app.ts
index 1fbec2adf0c6c3a130cd1c3cd3342f3a78ddda0e..3716d1557bf39280e62ae6c5b50e0ba099a4b639 100644
--- a/styles/src/styleTree/app.ts
+++ b/styles/src/styleTree/app.ts
@@ -47,5 +47,60 @@ export default function app(colorScheme: ColorScheme): Object {
     updateNotification: updateNotification(colorScheme),
     tooltip: tooltip(colorScheme),
     terminal: terminal(colorScheme.lowest),
+    colorScheme: {
+      ...colorScheme,
+      lowest: {
+        ...colorScheme.lowest,
+        ramps: {
+          neutral: colorScheme.lowest.ramps.neutral.colors(100, "hex"),
+          red: colorScheme.lowest.ramps.red.colors(100, "hex"),
+          orange: colorScheme.lowest.ramps.orange.colors(100, "hex"),
+          yellow: colorScheme.lowest.ramps.yellow.colors(100, "hex"),
+          green: colorScheme.lowest.ramps.green.colors(100, "hex"),
+          cyan: colorScheme.lowest.ramps.cyan.colors(100, "hex"),
+          blue: colorScheme.lowest.ramps.blue.colors(100, "hex"),
+          violet: colorScheme.lowest.ramps.violet.colors(100, "hex"),
+          magenta: colorScheme.lowest.ramps.magenta.colors(100, "hex"),
+        }
+      },
+      middle: {
+        ...colorScheme.middle,
+        ramps: {
+          neutral: colorScheme.middle.ramps.neutral.colors(100, "hex"),
+          red: colorScheme.middle.ramps.red.colors(100, "hex"),
+          orange: colorScheme.middle.ramps.orange.colors(100, "hex"),
+          yellow: colorScheme.middle.ramps.yellow.colors(100, "hex"),
+          green: colorScheme.middle.ramps.green.colors(100, "hex"),
+          cyan: colorScheme.middle.ramps.cyan.colors(100, "hex"),
+          blue: colorScheme.middle.ramps.blue.colors(100, "hex"),
+          violet: colorScheme.middle.ramps.violet.colors(100, "hex"),
+          magenta: colorScheme.middle.ramps.magenta.colors(100, "hex"),
+        }
+      },
+      highest: {
+        ...colorScheme.highest,
+        ramps: {
+          neutral: colorScheme.highest.ramps.neutral.colors(100, "hex"),
+          red: colorScheme.highest.ramps.red.colors(100, "hex"),
+          orange: colorScheme.highest.ramps.orange.colors(100, "hex"),
+          yellow: colorScheme.highest.ramps.yellow.colors(100, "hex"),
+          green: colorScheme.highest.ramps.green.colors(100, "hex"),
+          cyan: colorScheme.highest.ramps.cyan.colors(100, "hex"),
+          blue: colorScheme.highest.ramps.blue.colors(100, "hex"),
+          violet: colorScheme.highest.ramps.violet.colors(100, "hex"),
+          magenta: colorScheme.highest.ramps.magenta.colors(100, "hex"),
+        }
+      },
+      players: [
+        colorScheme.players["0"],
+        colorScheme.players["1"],
+        colorScheme.players["2"],
+        colorScheme.players["3"],
+        colorScheme.players["4"],
+        colorScheme.players["5"],
+        colorScheme.players["6"],
+        colorScheme.players["7"],
+      ]
+    }
   };
 }
diff --git a/styles/src/styleTree/editor.ts b/styles/src/styleTree/editor.ts
index d5fceacedf8d3c549721cb91ff2212ed00f1db05..22a4d1bac01e6c0964ae30dd7ea33dac7c566367 100644
--- a/styles/src/styleTree/editor.ts
+++ b/styles/src/styleTree/editor.ts
@@ -133,8 +133,8 @@ export default function editor(colorScheme: ColorScheme) {
   return {
     textColor: syntax.primary.color,
     background: background(layer),
-    activeLineBackground: elevation.ramps.neutral(0.29).hex(),
-    highlightedLineBackground: elevation.ramps.neutral(0.18).hex(),
+    activeLineBackground: background(layer, "base", "variant"),
+    highlightedLineBackground: background(layer, "base", "variant"),
     codeActions: {
       indicator: foreground(layer, "base", "variant"),
       verticalScale: 0.618
diff --git a/styles/src/themes/common/ramps.ts b/styles/src/themes/common/ramps.ts
index a721dd3968f6b17be18b4378d59632521ba9d64e..2a2b56258e851a7eb47024d29435c5ee0c941551 100644
--- a/styles/src/themes/common/ramps.ts
+++ b/styles/src/themes/common/ramps.ts
@@ -123,14 +123,14 @@ function evenSamples(min: number, max: number): number[] {
 function resampleSet(ramps: RampSet, samples: number[]): RampSet {
   return {
     neutral: resample(ramps.neutral, samples),
-    red: resample(ramps.neutral, samples),
-    orange: resample(ramps.neutral, samples),
-    yellow: resample(ramps.neutral, samples),
-    green: resample(ramps.neutral, samples),
-    cyan: resample(ramps.neutral, samples),
-    blue: resample(ramps.neutral, samples),
-    violet: resample(ramps.neutral, samples),
-    magenta: resample(ramps.neutral, samples),
+    red: resample(ramps.red, samples),
+    orange: resample(ramps.orange, samples),
+    yellow: resample(ramps.yellow, samples),
+    green: resample(ramps.green, samples),
+    cyan: resample(ramps.cyan, samples),
+    blue: resample(ramps.blue, samples),
+    violet: resample(ramps.violet, samples),
+    magenta: resample(ramps.magenta, samples),
   }
 }
 
@@ -140,22 +140,65 @@ function resample(scale: Scale, samples: number[]): Scale {
 }
 
 function elevation(ramps: RampSet, isLight: boolean, shadow?: Shadow): Elevation {
-  let style: Style = {
-    background: ramps.neutral(0.25).hex(),
-    border: ramps.neutral(0.9).hex(),
+  return {
+    ramps,
+
+    bottom: topLayer(ramps, isLight),
+    middle: topLayer(ramps, isLight),
+    top: topLayer(ramps, isLight),
+
+    shadow,
+  };
+}
+
+function topLayer(ramps: RampSet, isLight: boolean): Layer {
+  let defaultStyle: Style = {
+    background: ramps.neutral(0).hex(),
+    border: ramps.neutral(0.7).hex(),
     foreground: ramps.neutral(1).hex(),
   };
 
+  let variantStyle: Style = {
+    background: ramps.neutral(0.2).hex(),
+    border: ramps.neutral(0.6).hex(),
+    foreground: ramps.neutral(0.8).hex(),
+  };
+
+
+  let hoveredStyle: Style = {
+    background: ramps.neutral(0.4).hex(),
+    border: ramps.neutral(1.0).hex(),
+    foreground: ramps.neutral(0.9).hex(),
+  };
+
+  let pressedStyle: Style = {
+    background: ramps.neutral(0.55).hex(),
+    border: ramps.neutral(0.9).hex(),
+    foreground: ramps.neutral(0.9).hex(),
+  };
+
+  let activeStyle: Style = {
+    background: ramps.neutral(0.8).hex(),
+    border: ramps.neutral(0.8).hex(),
+    foreground: ramps.neutral(0.1).hex(),
+  };
+
+  let disabledStyle: Style = {
+    background: ramps.neutral(0.25).hex(),
+    border: ramps.neutral(1).hex(),
+    foreground: ramps.neutral(0.9).hex(),
+  };
+
   let styleSet: StyleSet = {
-    default: style,
-    variant: style,
-    active: style,
-    disabled: style,
-    hovered: style,
-    pressed: style,
+    default: defaultStyle,
+    variant: variantStyle,
+    hovered: hoveredStyle,
+    pressed: pressedStyle,
+    active: activeStyle,
+    disabled: disabledStyle,
   };
 
-  let layer: Layer = {
+  return {
     base: styleSet,
     on: styleSet,
     info: styleSet,
@@ -163,14 +206,4 @@ function elevation(ramps: RampSet, isLight: boolean, shadow?: Shadow): Elevation
     warning: styleSet,
     negative: styleSet
   };
-
-  return {
-    ramps,
-
-    bottom: layer,
-    middle: layer,
-    top: layer,
-
-    shadow,
-  };
 }
\ No newline at end of file

From 79b942001714b7765b119dd9a5ee852669f6f5ff Mon Sep 17 00:00:00 2001
From: K Simmons <keith@zed.dev>
Date: Wed, 21 Sep 2022 16:25:07 -0700
Subject: [PATCH 03/50] minor tweaks

---
 styles/src/styleTree/tabBar.ts    |  4 +--
 styles/src/themes/common/ramps.ts | 59 +++++++++++++++++++++++++++++--
 2 files changed, 59 insertions(+), 4 deletions(-)

diff --git a/styles/src/styleTree/tabBar.ts b/styles/src/styleTree/tabBar.ts
index dfb631d07016c5dcba150681a35eb1396709cb09..091aba7801d216a4d658a1181d0efcdf0f3b17cc 100644
--- a/styles/src/styleTree/tabBar.ts
+++ b/styles/src/styleTree/tabBar.ts
@@ -36,7 +36,7 @@ export default function tabBar(colorScheme: ColorScheme) {
   const activePaneActiveTab = {
     ...tab,
     background: background(elevation.top),
-    text: text(elevation.top, "sans", "base", "active", { size: "sm" }),
+    text: text(elevation.top, "sans", { size: "sm" }),
     border: {
       ...tab.border,
       bottom: false
@@ -52,7 +52,7 @@ export default function tabBar(colorScheme: ColorScheme) {
   const inactivePaneActiveTab = {
     ...tab,
     background: background(layer),
-    text: text(layer, "sans", "base", "active", { size: "sm" }),
+    text: text(layer, "sans", "base", "variant", { size: "sm" }),
     border: {
       ...tab.border,
       bottom: false
diff --git a/styles/src/themes/common/ramps.ts b/styles/src/themes/common/ramps.ts
index 2a2b56258e851a7eb47024d29435c5ee0c941551..00ae645703457da35f1b96ce5815605fdda6cb93 100644
--- a/styles/src/themes/common/ramps.ts
+++ b/styles/src/themes/common/ramps.ts
@@ -144,13 +144,69 @@ function elevation(ramps: RampSet, isLight: boolean, shadow?: Shadow): Elevation
     ramps,
 
     bottom: topLayer(ramps, isLight),
-    middle: topLayer(ramps, isLight),
+    middle: middleLayer(ramps, isLight),
     top: topLayer(ramps, isLight),
 
     shadow,
   };
 }
 
+function middleLayer(ramps: RampSet, isLight: boolean): Layer {
+  let defaultStyle: Style = {
+    background: ramps.neutral(0.2).hex(),
+    border: ramps.neutral(0.7).hex(),
+    foreground: ramps.neutral(1).hex(),
+  };
+
+  let variantStyle: Style = {
+    background: ramps.neutral(0.3).hex(),
+    border: ramps.neutral(0.6).hex(),
+    foreground: ramps.neutral(0.8).hex(),
+  };
+
+  let hoveredStyle: Style = {
+    background: ramps.neutral(0.4).hex(),
+    border: ramps.neutral(1.0).hex(),
+    foreground: ramps.neutral(0.9).hex(),
+  };
+
+  let pressedStyle: Style = {
+    background: ramps.neutral(0.55).hex(),
+    border: ramps.neutral(0.9).hex(),
+    foreground: ramps.neutral(0.9).hex(),
+  };
+
+  let activeStyle: Style = {
+    background: ramps.neutral(0.8).hex(),
+    border: ramps.neutral(0.8).hex(),
+    foreground: ramps.neutral(0.1).hex(),
+  };
+
+  let disabledStyle: Style = {
+    background: ramps.neutral(0.25).hex(),
+    border: ramps.neutral(1).hex(),
+    foreground: ramps.neutral(0.9).hex(),
+  };
+
+  let styleSet: StyleSet = {
+    default: defaultStyle,
+    variant: variantStyle,
+    hovered: hoveredStyle,
+    pressed: pressedStyle,
+    active: activeStyle,
+    disabled: disabledStyle,
+  };
+
+  return {
+    base: styleSet,
+    on: styleSet,
+    info: styleSet,
+    positive: styleSet,
+    warning: styleSet,
+    negative: styleSet
+  };
+}
+
 function topLayer(ramps: RampSet, isLight: boolean): Layer {
   let defaultStyle: Style = {
     background: ramps.neutral(0).hex(),
@@ -164,7 +220,6 @@ function topLayer(ramps: RampSet, isLight: boolean): Layer {
     foreground: ramps.neutral(0.8).hex(),
   };
 
-
   let hoveredStyle: Style = {
     background: ramps.neutral(0.4).hex(),
     border: ramps.neutral(1.0).hex(),

From 593c7a8cd17351ca840d04c039a5902ad68c1233 Mon Sep 17 00:00:00 2001
From: K Simmons <keith@zed.dev>
Date: Wed, 21 Sep 2022 16:35:24 -0700
Subject: [PATCH 04/50] fix rebase error

---
 styles/src/styleTree/contactsPopover.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/styles/src/styleTree/contactsPopover.ts b/styles/src/styleTree/contactsPopover.ts
index e9de5dddaf627120d12ab452137fbd47508771a5..585af70fbdbe01f9a452c039e21bd49c5030bfb0 100644
--- a/styles/src/styleTree/contactsPopover.ts
+++ b/styles/src/styleTree/contactsPopover.ts
@@ -1,8 +1,8 @@
-import Theme from "../themes/common/theme";
-import { backgroundColor } from "./components";
+import { ColorScheme } from "../themes/common/colorScheme";
+import { background } from "./components";
 
-export default function workspace(theme: Theme) {
+export default function workspace(colorScheme: ColorScheme) {
   return {
-    background: backgroundColor(theme, 300),
+    background: background(colorScheme.lowest.middle),
   }
 }

From eabd687cbcb93ba8b24c78d6fdb15e38bdd2e83e Mon Sep 17 00:00:00 2001
From: K Simmons <keith@zed.dev>
Date: Wed, 21 Sep 2022 16:59:33 -0700
Subject: [PATCH 05/50] More tweaks and add variant to theme testbench

---
 crates/theme_testbench/src/theme_testbench.rs | 198 +++++-------------
 styles/src/styleTree/app.ts                   |   8 +-
 styles/src/styleTree/contactsPanel.ts         |   5 +-
 styles/src/styleTree/projectPanel.ts          |   3 +-
 styles/src/styleTree/tabBar.ts                |  15 +-
 styles/src/styleTree/workspace.ts             |  14 +-
 styles/src/themes/common/ramps.ts             |  58 ++++-
 7 files changed, 124 insertions(+), 177 deletions(-)

diff --git a/crates/theme_testbench/src/theme_testbench.rs b/crates/theme_testbench/src/theme_testbench.rs
index 43000306bf6e61a369700d50f87dc51f21ab1232..1a7bfbcd8946c54e126fb21a9b660a9991ee0930 100644
--- a/crates/theme_testbench/src/theme_testbench.rs
+++ b/crates/theme_testbench/src/theme_testbench.rs
@@ -92,176 +92,32 @@ impl ThemeTestbench {
     ) -> Container {
         Flex::column()
             .with_child(
-                Flex::row()
-                    .with_child(Self::render_button(
-                        0,
-                        layer_index,
-                        "base",
-                        &layer.base,
-                        None,
-                        cx,
-                    ))
-                    .with_child(Self::render_button(
-                        1,
-                        layer_index,
-                        "active",
-                        &layer.base,
-                        Some(|style_set| &style_set.active),
-                        cx,
-                    ))
-                    .with_child(Self::render_button(
-                        2,
-                        layer_index,
-                        "disabled",
-                        &layer.base,
-                        Some(|style_set| &style_set.disabled),
-                        cx,
-                    ))
+                Self::render_button_set(0, layer_index, "base", &layer.base, cx)
                     .flex(1., false)
                     .boxed(),
             )
             .with_child(
-                Flex::row()
-                    .with_child(Self::render_button(
-                        3,
-                        layer_index,
-                        "on",
-                        &layer.on,
-                        None,
-                        cx,
-                    ))
-                    .with_child(Self::render_button(
-                        4,
-                        layer_index,
-                        "active",
-                        &layer.on,
-                        Some(|style_set| &style_set.active),
-                        cx,
-                    ))
-                    .with_child(Self::render_button(
-                        5,
-                        layer_index,
-                        "disabled",
-                        &layer.on,
-                        Some(|style_set| &style_set.disabled),
-                        cx,
-                    ))
+                Self::render_button_set(1, layer_index, "on", &layer.on, cx)
                     .flex(1., false)
                     .boxed(),
             )
             .with_child(
-                Flex::row()
-                    .with_child(Self::render_button(
-                        6,
-                        layer_index,
-                        "info",
-                        &layer.info,
-                        None,
-                        cx,
-                    ))
-                    .with_child(Self::render_button(
-                        7,
-                        layer_index,
-                        "active",
-                        &layer.info,
-                        Some(|style_set| &style_set.active),
-                        cx,
-                    ))
-                    .with_child(Self::render_button(
-                        8,
-                        layer_index,
-                        "disabled",
-                        &layer.info,
-                        Some(|style_set| &style_set.disabled),
-                        cx,
-                    ))
+                Self::render_button_set(2, layer_index, "info", &layer.info, cx)
                     .flex(1., false)
                     .boxed(),
             )
             .with_child(
-                Flex::row()
-                    .with_child(Self::render_button(
-                        9,
-                        layer_index,
-                        "positive",
-                        &layer.positive,
-                        None,
-                        cx,
-                    ))
-                    .with_child(Self::render_button(
-                        10,
-                        layer_index,
-                        "active",
-                        &layer.positive,
-                        Some(|style_set| &style_set.active),
-                        cx,
-                    ))
-                    .with_child(Self::render_button(
-                        11,
-                        layer_index,
-                        "disabled",
-                        &layer.positive,
-                        Some(|style_set| &style_set.disabled),
-                        cx,
-                    ))
+                Self::render_button_set(3, layer_index, "positive", &layer.positive, cx)
                     .flex(1., false)
                     .boxed(),
             )
             .with_child(
-                Flex::row()
-                    .with_child(Self::render_button(
-                        12,
-                        layer_index,
-                        "warning",
-                        &layer.warning,
-                        None,
-                        cx,
-                    ))
-                    .with_child(Self::render_button(
-                        13,
-                        layer_index,
-                        "active",
-                        &layer.warning,
-                        Some(|style_set| &style_set.active),
-                        cx,
-                    ))
-                    .with_child(Self::render_button(
-                        14,
-                        layer_index,
-                        "disabled",
-                        &layer.warning,
-                        Some(|style_set| &style_set.disabled),
-                        cx,
-                    ))
+                Self::render_button_set(4, layer_index, "warning", &layer.warning, cx)
                     .flex(1., false)
                     .boxed(),
             )
             .with_child(
-                Flex::row()
-                    .with_child(Self::render_button(
-                        15,
-                        layer_index,
-                        "negative",
-                        &layer.negative,
-                        None,
-                        cx,
-                    ))
-                    .with_child(Self::render_button(
-                        16,
-                        layer_index,
-                        "active",
-                        &layer.negative,
-                        Some(|style_set| &style_set.active),
-                        cx,
-                    ))
-                    .with_child(Self::render_button(
-                        17,
-                        layer_index,
-                        "disabled",
-                        &layer.negative,
-                        Some(|style_set| &style_set.disabled),
-                        cx,
-                    ))
+                Self::render_button_set(5, layer_index, "negative", &layer.negative, cx)
                     .flex(1., false)
                     .boxed(),
             )
@@ -278,6 +134,48 @@ impl ThemeTestbench {
             })
     }
 
+    fn render_button_set(
+        set_index: usize,
+        layer_index: usize,
+        set_name: &'static str,
+        style_set: &StyleSet,
+        cx: &mut RenderContext<'_, Self>,
+    ) -> Flex {
+        Flex::row()
+            .with_child(Self::render_button(
+                set_index * 4,
+                layer_index,
+                set_name,
+                &style_set,
+                None,
+                cx,
+            ))
+            .with_child(Self::render_button(
+                set_index * 4 + 1,
+                layer_index,
+                "variant",
+                &style_set,
+                Some(|style_set| &style_set.variant),
+                cx,
+            ))
+            .with_child(Self::render_button(
+                set_index * 4 + 2,
+                layer_index,
+                "active",
+                &style_set,
+                Some(|style_set| &style_set.active),
+                cx,
+            ))
+            .with_child(Self::render_button(
+                set_index * 4 + 3,
+                layer_index,
+                "disabled",
+                &style_set,
+                Some(|style_set| &style_set.disabled),
+                cx,
+            ))
+    }
+
     fn render_button(
         button_index: usize,
         layer_index: usize,
diff --git a/styles/src/styleTree/app.ts b/styles/src/styleTree/app.ts
index 3716d1557bf39280e62ae6c5b50e0ba099a4b639..f6bff0414201782e160996c438a5bc3d86ca4e86 100644
--- a/styles/src/styleTree/app.ts
+++ b/styles/src/styleTree/app.ts
@@ -16,9 +16,9 @@ import tooltip from "./tooltip";
 import terminal from "./terminal";
 import { ColorScheme } from "../themes/common/colorScheme";
 
-export const panel = {
-  padding: { top: 12, bottom: 12 },
-};
+// export const panel = {
+//   padding: { top: 12, bottom: 12 },
+// };
 
 export default function app(colorScheme: ColorScheme): Object {
   return {
@@ -38,7 +38,7 @@ export default function app(colorScheme: ColorScheme): Object {
     contactFinder: contactFinder(colorScheme),
     search: search(colorScheme),
     breadcrumbs: {
-      ...text(colorScheme.lowest.top, "sans", "base", "variant"),
+      ...text(colorScheme.lowest.top, "sans"),
       padding: {
         left: 6,
       },
diff --git a/styles/src/styleTree/contactsPanel.ts b/styles/src/styleTree/contactsPanel.ts
index 94374b4f6a0182681b4d8f8a591d9a2bf6a78c8a..a239fd7fc065d359687b3aec2eefb4b10bb011b6 100644
--- a/styles/src/styleTree/contactsPanel.ts
+++ b/styles/src/styleTree/contactsPanel.ts
@@ -1,5 +1,4 @@
 import { ColorScheme } from "../themes/common/colorScheme";
-import { panel } from "./app";
 import {
   background,
   border,
@@ -49,8 +48,8 @@ export default function contactsPanel(colorScheme: ColorScheme) {
   };
 
   return {
-    ...panel,
-    padding: { top: panel.padding.top, bottom: 0 },
+    background: background(layer),
+    padding: { top: 12, bottom: 0 },
     userQueryEditor: {
       background: background(layer, "on"),
       cornerRadius: 6,
diff --git a/styles/src/styleTree/projectPanel.ts b/styles/src/styleTree/projectPanel.ts
index fbced14df9970f5425282f134ae4518881b276d9..87a12d0d6ab81c2812e99d643c245f684fed1c4b 100644
--- a/styles/src/styleTree/projectPanel.ts
+++ b/styles/src/styleTree/projectPanel.ts
@@ -1,11 +1,10 @@
 import { ColorScheme } from "../themes/common/colorScheme";
-import { panel } from "./app";
 import { background, foreground, text } from "./components";
 
 export default function projectPanel(colorScheme: ColorScheme) {
   let layer = colorScheme.lowest.middle;
   return {
-    ...panel,
+    background: background(layer),
     padding: { left: 12, right: 12, top: 6, bottom: 6 },
     indentWidth: 8,
     entry: {
diff --git a/styles/src/styleTree/tabBar.ts b/styles/src/styleTree/tabBar.ts
index 091aba7801d216a4d658a1181d0efcdf0f3b17cc..cbb17045daf405fde69662bcb400287f72c4d90f 100644
--- a/styles/src/styleTree/tabBar.ts
+++ b/styles/src/styleTree/tabBar.ts
@@ -12,7 +12,7 @@ export default function tabBar(colorScheme: ColorScheme) {
     height,
     background: background(layer),
     border: border(layer, {
-      left: true,
+      right: true,
       bottom: true,
       overlay: true,
     }),
@@ -22,7 +22,7 @@ export default function tabBar(colorScheme: ColorScheme) {
     iconDirty: foreground(layer, "info"),
     iconWidth: 8,
     spacing: 8,
-    text: text(layer, "sans", { size: "sm" }),
+    text: text(layer, "sans", "base", "variant", { size: "sm" }),
     padding: {
       left: 8,
       right: 8,
@@ -46,13 +46,13 @@ export default function tabBar(colorScheme: ColorScheme) {
   const inactivePaneInactiveTab = {
     ...tab,
     background: background(layer),
-    text: text(layer, "sans", { size: "sm" }),
+    text: text(layer, "sans", "base", "variant", { size: "sm" }),
   };
 
   const inactivePaneActiveTab = {
     ...tab,
-    background: background(layer),
-    text: text(layer, "sans", "base", "variant", { size: "sm" }),
+    background: background(elevation.top),
+    text: text(elevation.top, "sans", "base", "variant", { size: "sm" }),
     border: {
       ...tab.border,
       bottom: false
@@ -70,11 +70,6 @@ export default function tabBar(colorScheme: ColorScheme) {
     height,
     background: background(layer),
     dropTargetOverlayColor: withOpacity(foreground(layer), 0.6),
-    border: border(layer, {
-      left: true,
-      bottom: true,
-      overlay: true,
-    }),
     activePane: {
       activeTab: activePaneActiveTab,
       inactiveTab: tab,
diff --git a/styles/src/styleTree/workspace.ts b/styles/src/styleTree/workspace.ts
index af2e6db2a66b3de682e07bc8a655e7fd7e74d7f6..1bf72b437327fd08613ed5ce0a29949b0d07731f 100644
--- a/styles/src/styleTree/workspace.ts
+++ b/styles/src/styleTree/workspace.ts
@@ -12,7 +12,7 @@ import tabBar from "./tabBar";
 
 export default function workspace(colorScheme: ColorScheme) {
   const elevation = colorScheme.lowest;
-  const layer = elevation.middle;
+  const layer = elevation.bottom;
   const titlebarPadding = 6;
 
   return {
@@ -117,20 +117,20 @@ export default function workspace(colorScheme: ColorScheme) {
     },
     toolbar: {
       height: 34,
-      background: background(layer),
-      border: border(layer, "base", "variant", { bottom: true }),
+      background: background(elevation.top),
+      border: border(elevation.top, "base", "variant", { bottom: true }),
       itemSpacing: 8,
       navButton: {
-        color: foreground(layer, "on"),
+        color: foreground(elevation.top, "on"),
         iconWidth: 12,
         buttonWidth: 24,
         cornerRadius: 6,
         hover: {
-          color: foreground(layer, "on", "hovered"),
-          background: background(layer, "on", "hovered"),
+          color: foreground(elevation.top, "on", "hovered"),
+          background: background(elevation.top, "on", "hovered"),
         },
         disabled: {
-          color: foreground(layer, "on", "disabled"),
+          color: foreground(elevation.top, "on", "disabled"),
         },
       },
       padding: { left: 8, right: 8, top: 4, bottom: 4 },
diff --git a/styles/src/themes/common/ramps.ts b/styles/src/themes/common/ramps.ts
index 00ae645703457da35f1b96ce5815605fdda6cb93..d1b358e8eece562706618a12999a406ec4839119 100644
--- a/styles/src/themes/common/ramps.ts
+++ b/styles/src/themes/common/ramps.ts
@@ -143,7 +143,7 @@ function elevation(ramps: RampSet, isLight: boolean, shadow?: Shadow): Elevation
   return {
     ramps,
 
-    bottom: topLayer(ramps, isLight),
+    bottom: bottomLayer(ramps, isLight),
     middle: middleLayer(ramps, isLight),
     top: topLayer(ramps, isLight),
 
@@ -151,6 +151,62 @@ function elevation(ramps: RampSet, isLight: boolean, shadow?: Shadow): Elevation
   };
 }
 
+function bottomLayer(ramps: RampSet, isLight: boolean): Layer {
+  let defaultStyle: Style = {
+    background: ramps.neutral(0.25).hex(),
+    border: ramps.neutral(0.6).hex(),
+    foreground: ramps.neutral(1).hex(),
+  };
+
+  let variantStyle: Style = {
+    background: ramps.neutral(0.3).hex(),
+    border: ramps.neutral(0.6).hex(),
+    foreground: ramps.neutral(0.8).hex(),
+  };
+
+  let hoveredStyle: Style = {
+    background: ramps.neutral(0.4).hex(),
+    border: ramps.neutral(1.0).hex(),
+    foreground: ramps.neutral(0.9).hex(),
+  };
+
+  let pressedStyle: Style = {
+    background: ramps.neutral(0.55).hex(),
+    border: ramps.neutral(0.9).hex(),
+    foreground: ramps.neutral(0.9).hex(),
+  };
+
+  let activeStyle: Style = {
+    background: ramps.neutral(0.8).hex(),
+    border: ramps.neutral(0.8).hex(),
+    foreground: ramps.neutral(0.1).hex(),
+  };
+
+  let disabledStyle: Style = {
+    background: ramps.neutral(0.25).hex(),
+    border: ramps.neutral(1).hex(),
+    foreground: ramps.neutral(0.9).hex(),
+  };
+
+  let styleSet: StyleSet = {
+    default: defaultStyle,
+    variant: variantStyle,
+    hovered: hoveredStyle,
+    pressed: pressedStyle,
+    active: activeStyle,
+    disabled: disabledStyle,
+  };
+
+  return {
+    base: styleSet,
+    on: styleSet,
+    info: styleSet,
+    positive: styleSet,
+    warning: styleSet,
+    negative: styleSet
+  };
+}
+
 function middleLayer(ramps: RampSet, isLight: boolean): Layer {
   let defaultStyle: Style = {
     background: ramps.neutral(0.2).hex(),

From ebe8c952e443a92b541c5cf43ebc421eb60d6ab1 Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Thu, 22 Sep 2022 12:08:53 -0400
Subject: [PATCH 06/50] WIP work on bottom and middle layer sets

---
 styles/src/styleTree/workspace.ts     |   4 +-
 styles/src/themes/common/ramps.ts     | 866 +++++++++++++++++---------
 styles/src/themes/common/styleSets.ts |   2 +
 3 files changed, 586 insertions(+), 286 deletions(-)
 create mode 100644 styles/src/themes/common/styleSets.ts

diff --git a/styles/src/styleTree/workspace.ts b/styles/src/styleTree/workspace.ts
index 1bf72b437327fd08613ed5ce0a29949b0d07731f..56350458df8c147191bae278a907248cb4647c9a 100644
--- a/styles/src/styleTree/workspace.ts
+++ b/styles/src/styleTree/workspace.ts
@@ -72,8 +72,8 @@ export default function workspace(colorScheme: ColorScheme) {
       },
       border: border(layer, { bottom: true, overlay: true }),
       signInPrompt: {
-        background: background(layer),
-        border: border(layer),
+        background: background(layer, "on", "default"),
+        border: border(layer, "on", "default"),
         cornerRadius: 6,
         margin: {
           top: 1,
diff --git a/styles/src/themes/common/ramps.ts b/styles/src/themes/common/ramps.ts
index d1b358e8eece562706618a12999a406ec4839119..c4cfd5d0b2933ff13ef56201cc6c532bbd45f72a 100644
--- a/styles/src/themes/common/ramps.ts
+++ b/styles/src/themes/common/ramps.ts
@@ -2,319 +2,617 @@ import chroma, { Color, Scale } from "chroma-js";
 import { ColorScheme, Elevation, Layer, Player, RampSet, Shadow, Style, StyleSet } from "./colorScheme";
 
 export function colorRamp(color: Color): Scale {
-  let hue = color.hsl()[0];
-  let endColor = chroma.hsl(hue, 0.88, 0.96);
-  let startColor = chroma.hsl(hue, 0.68, 0.12);
-  return chroma.scale([startColor, color, endColor]).mode("hsl");
+    let hue = color.hsl()[0];
+    let endColor = chroma.hsl(hue, 0.88, 0.96);
+    let startColor = chroma.hsl(hue, 0.68, 0.12);
+    return chroma.scale([startColor, color, endColor]).mode("hsl");
 }
 
 export function createColorScheme(name: string, isLight: boolean, colorRamps: { [rampName: string]: Scale }): ColorScheme {
-  // Chromajs scales from 0 to 1 flipped if isLight is true
-  let baseRamps: typeof colorRamps = {};
-
-  // Chromajs mutates the underlying ramp when you call domain. This causes problems because
-  // we now store the ramps object in the theme so that we can pull colors out of them.
-  // So instead of calling domain and storing the result, we have to construct new ramps for each
-  // theme so that we don't modify the passed in ramps.
-  // This combined with an error in the type definitions for chroma js means we have to cast the colors
-  // function to any in order to get the colors back out from the original ramps.
-  if (isLight) {
-    for (var rampName in colorRamps) {
-      baseRamps[rampName] = chroma
-        .scale((colorRamps[rampName].colors as any)())
-        .domain([1, 0]);
+    // Chromajs scales from 0 to 1 flipped if isLight is true
+    let baseRamps: typeof colorRamps = {};
+
+    // Chromajs mutates the underlying ramp when you call domain. This causes problems because
+    // we now store the ramps object in the theme so that we can pull colors out of them.
+    // So instead of calling domain and storing the result, we have to construct new ramps for each
+    // theme so that we don't modify the passed in ramps.
+    // This combined with an error in the type definitions for chroma js means we have to cast the colors
+    // function to any in order to get the colors back out from the original ramps.
+    if (isLight) {
+        for (var rampName in colorRamps) {
+            baseRamps[rampName] = chroma
+                .scale((colorRamps[rampName].colors as any)())
+                .domain([1, 0]);
+        }
+        baseRamps.neutral = chroma
+            .scale((colorRamps.neutral.colors as any)())
+            .domain([1, 0]);
+    } else {
+        for (var rampName in colorRamps) {
+            baseRamps[rampName] = chroma
+                .scale((colorRamps[rampName].colors as any)())
+                .domain([0, 1]);
+        }
+        baseRamps.neutral = chroma
+            .scale((colorRamps.neutral.colors as any)())
+            .domain([0, 1]);
     }
-    baseRamps.neutral = chroma
-      .scale((colorRamps.neutral.colors as any)())
-      .domain([1, 0]);
-  } else {
-    for (var rampName in colorRamps) {
-      baseRamps[rampName] = chroma
-        .scale((colorRamps[rampName].colors as any)())
-        .domain([0, 1]);
-    }
-    baseRamps.neutral = chroma
-      .scale((colorRamps.neutral.colors as any)())
-      .domain([0, 1]);
-  }
-
-  let baseSet = {
-    neutral: baseRamps.neutral,
-    red: baseRamps.red,
-    orange: baseRamps.orange,
-    yellow: baseRamps.yellow,
-    green: baseRamps.green,
-    cyan: baseRamps.cyan,
-    blue: baseRamps.blue,
-    violet: baseRamps.violet,
-    magenta: baseRamps.magenta,
-  };
-
-  let lowest = elevation(
-    resampleSet(
-      baseSet,
-      evenSamples(0, 1)
-    ),
-    isLight,
-  );
-
-  let middle = elevation(
-    resampleSet(
-      baseSet,
-      evenSamples(0.125, 1)
-    ),
-    isLight,
-    {
-      blur: 4,
-      color: baseSet.neutral(isLight ? 7 : 0).darken().alpha(0.2).hex(), // TODO used blend previously. Replace with something else
-      offset: [1, 2],
-    }
-  );
-  lowest.above = middle;
-
-  let highest = elevation(
-    resampleSet(
-      baseSet,
-      evenSamples(0.25, 1)
-    ),
-    isLight,
-    {
-      blur: 16,
-      color: baseSet.neutral(isLight ? 7 : 0).darken().alpha(0.2).hex(), // TODO used blend previously. Replace with something else
-      offset: [0, 2],
+
+    let baseSet = {
+        neutral: baseRamps.neutral,
+        red: baseRamps.red,
+        orange: baseRamps.orange,
+        yellow: baseRamps.yellow,
+        green: baseRamps.green,
+        cyan: baseRamps.cyan,
+        blue: baseRamps.blue,
+        violet: baseRamps.violet,
+        magenta: baseRamps.magenta,
+    };
+
+    let lowest = elevation(
+        resampleSet(
+            baseSet,
+            evenSamples(0, 1)
+        ),
+        isLight,
+    );
+
+    let middle = elevation(
+        resampleSet(
+            baseSet,
+            evenSamples(0.125, 1)
+        ),
+        isLight,
+        {
+            blur: 4,
+            color: baseSet.neutral(isLight ? 7 : 0).darken().alpha(0.2).hex(), // TODO used blend previously. Replace with something else
+            offset: [1, 2],
+        }
+    );
+    lowest.above = middle;
+
+    let highest = elevation(
+        resampleSet(
+            baseSet,
+            evenSamples(0.25, 1)
+        ),
+        isLight,
+        {
+            blur: 16,
+            color: baseSet.neutral(isLight ? 7 : 0).darken().alpha(0.2).hex(), // TODO used blend previously. Replace with something else
+            offset: [0, 2],
+        }
+    );
+    middle.above = highest;
+
+    let players = {
+        "0": player(baseSet.blue),
+        "1": player(baseSet.green),
+        "2": player(baseSet.magenta),
+        "3": player(baseSet.orange),
+        "4": player(baseSet.violet),
+        "5": player(baseSet.cyan),
+        "6": player(baseSet.red),
+        "7": player(baseSet.yellow),
     }
-  );
-  middle.above = highest;
-
-  let players = {
-    "0": player(baseSet.blue),
-    "1": player(baseSet.green),
-    "2": player(baseSet.magenta),
-    "3": player(baseSet.orange),
-    "4": player(baseSet.violet),
-    "5": player(baseSet.cyan),
-    "6": player(baseSet.red),
-    "7": player(baseSet.yellow),
-  }
-
-  return {
-    name,
-    isLight,
-
-    lowest,
-    middle,
-    highest,
-
-    players,
-  };
+
+    return {
+        name,
+        isLight,
+
+        lowest,
+        middle,
+        highest,
+
+        players,
+    };
 }
 
 function player(ramp: Scale): Player {
-  return {
-    selection: ramp(0.5).alpha(0.24).hex(),
-    cursor: ramp(0.5).hex(),
-  }
+    return {
+        selection: ramp(0.5).alpha(0.24).hex(),
+        cursor: ramp(0.5).hex(),
+    }
 }
 
 function evenSamples(min: number, max: number): number[] {
-  return Array.from(Array(101).keys()).map((i) => (i / 100) * (max - min) + min);
+    return Array.from(Array(101).keys()).map((i) => (i / 100) * (max - min) + min);
 }
 
 function resampleSet(ramps: RampSet, samples: number[]): RampSet {
-  return {
-    neutral: resample(ramps.neutral, samples),
-    red: resample(ramps.red, samples),
-    orange: resample(ramps.orange, samples),
-    yellow: resample(ramps.yellow, samples),
-    green: resample(ramps.green, samples),
-    cyan: resample(ramps.cyan, samples),
-    blue: resample(ramps.blue, samples),
-    violet: resample(ramps.violet, samples),
-    magenta: resample(ramps.magenta, samples),
-  }
+    return {
+        neutral: resample(ramps.neutral, samples),
+        red: resample(ramps.red, samples),
+        orange: resample(ramps.orange, samples),
+        yellow: resample(ramps.yellow, samples),
+        green: resample(ramps.green, samples),
+        cyan: resample(ramps.cyan, samples),
+        blue: resample(ramps.blue, samples),
+        violet: resample(ramps.violet, samples),
+        magenta: resample(ramps.magenta, samples),
+    }
 }
 
 function resample(scale: Scale, samples: number[]): Scale {
-  let newColors = samples.map((sample) => scale(sample));
-  return chroma.scale(newColors);
+    let newColors = samples.map((sample) => scale(sample));
+    return chroma.scale(newColors);
 }
 
 function elevation(ramps: RampSet, isLight: boolean, shadow?: Shadow): Elevation {
-  return {
-    ramps,
+    return {
+        ramps,
 
-    bottom: bottomLayer(ramps, isLight),
-    middle: middleLayer(ramps, isLight),
-    top: topLayer(ramps, isLight),
+        bottom: bottomLayer(ramps, isLight),
+        middle: middleLayer(ramps, isLight),
+        top: topLayer(ramps, isLight),
 
-    shadow,
-  };
+        shadow,
+    };
 }
 
 function bottomLayer(ramps: RampSet, isLight: boolean): Layer {
-  let defaultStyle: Style = {
-    background: ramps.neutral(0.25).hex(),
-    border: ramps.neutral(0.6).hex(),
-    foreground: ramps.neutral(1).hex(),
-  };
-
-  let variantStyle: Style = {
-    background: ramps.neutral(0.3).hex(),
-    border: ramps.neutral(0.6).hex(),
-    foreground: ramps.neutral(0.8).hex(),
-  };
-
-  let hoveredStyle: Style = {
-    background: ramps.neutral(0.4).hex(),
-    border: ramps.neutral(1.0).hex(),
-    foreground: ramps.neutral(0.9).hex(),
-  };
-
-  let pressedStyle: Style = {
-    background: ramps.neutral(0.55).hex(),
-    border: ramps.neutral(0.9).hex(),
-    foreground: ramps.neutral(0.9).hex(),
-  };
-
-  let activeStyle: Style = {
-    background: ramps.neutral(0.8).hex(),
-    border: ramps.neutral(0.8).hex(),
-    foreground: ramps.neutral(0.1).hex(),
-  };
-
-  let disabledStyle: Style = {
-    background: ramps.neutral(0.25).hex(),
-    border: ramps.neutral(1).hex(),
-    foreground: ramps.neutral(0.9).hex(),
-  };
-
-  let styleSet: StyleSet = {
-    default: defaultStyle,
-    variant: variantStyle,
-    hovered: hoveredStyle,
-    pressed: pressedStyle,
-    active: activeStyle,
-    disabled: disabledStyle,
-  };
-
-  return {
-    base: styleSet,
-    on: styleSet,
-    info: styleSet,
-    positive: styleSet,
-    warning: styleSet,
-    negative: styleSet
-  };
+    let baseSet: StyleSet = {
+        default: {
+            background: ramps.neutral(0.15).hex(),
+            border: ramps.neutral(0.2).hex(),
+            foreground: ramps.neutral(1).hex(),
+        },
+        variant: {
+            background: ramps.neutral(0.1).hex(),
+            border: ramps.neutral(0.15).hex(),
+            foreground: ramps.neutral(0.7).hex(),
+        },
+        hovered: {
+            background: ramps.neutral(0.25).hex(),
+            border: ramps.neutral(1.0).hex(),
+            foreground: ramps.neutral(0.9).hex(),
+        },
+        pressed: {
+            background: ramps.neutral(0.55).hex(),
+            border: ramps.neutral(0.9).hex(),
+            foreground: ramps.neutral(0.9).hex(),
+        },
+        active: {
+            background: ramps.neutral(0.8).hex(),
+            border: ramps.neutral(0.8).hex(),
+            foreground: ramps.neutral(0.1).hex(),
+        },
+        disabled: {
+            background: ramps.neutral(0.25).hex(),
+            border: ramps.neutral(1).hex(),
+            foreground: ramps.neutral(0.9).hex(),
+        },
+    }
+
+    let onSet: StyleSet = {
+        default: {
+            background: ramps.neutral(0.15).hex(),
+            border: ramps.neutral(0.2).hex(),
+            foreground: ramps.neutral(1).hex(),
+        },
+        variant: {
+            background: ramps.neutral(0.1).hex(),
+            border: ramps.neutral(0.15).hex(),
+            foreground: ramps.neutral(0.7).hex(),
+        },
+        hovered: {
+            background: ramps.neutral(0.4).hex(),
+            border: ramps.neutral(1.0).hex(),
+            foreground: ramps.neutral(0.9).hex(),
+        },
+        pressed: {
+            background: ramps.neutral(0.55).hex(),
+            border: ramps.neutral(0.9).hex(),
+            foreground: ramps.neutral(0.9).hex(),
+        },
+        active: {
+            background: ramps.neutral(0.8).hex(),
+            border: ramps.neutral(0.8).hex(),
+            foreground: ramps.neutral(0.1).hex(),
+        },
+        disabled: {
+            background: ramps.neutral(0.25).hex(),
+            border: ramps.neutral(1).hex(),
+            foreground: ramps.neutral(0.9).hex(),
+        },
+    }
+
+    let defaultStyle: Style = {
+        background: ramps.neutral(0.2).hex(),
+        border: ramps.neutral(0.25).hex(),
+        foreground: ramps.neutral(1).hex(),
+    };
+
+    let variantStyle: Style = {
+        background: ramps.neutral(0.3).hex(),
+        border: ramps.neutral(0.6).hex(),
+        foreground: ramps.neutral(0.8).hex(),
+    };
+
+    let hoveredStyle: Style = {
+        background: ramps.neutral(0.1).hex(),
+        border: ramps.neutral(1.0).hex(),
+        foreground: ramps.neutral(0.9).hex(),
+    };
+
+    let pressedStyle: Style = {
+        background: ramps.neutral(0.55).hex(),
+        border: ramps.neutral(0.9).hex(),
+        foreground: ramps.neutral(0.9).hex(),
+    };
+
+    let activeStyle: Style = {
+        background: ramps.neutral(0.8).hex(),
+        border: ramps.neutral(0.8).hex(),
+        foreground: ramps.neutral(0.1).hex(),
+    };
+
+    let disabledStyle: Style = {
+        background: ramps.neutral(0.25).hex(),
+        border: ramps.neutral(1).hex(),
+        foreground: ramps.neutral(0.9).hex(),
+    };
+
+    let styleSet: StyleSet = {
+        default: defaultStyle,
+        variant: variantStyle,
+        hovered: hoveredStyle,
+        pressed: pressedStyle,
+        active: activeStyle,
+        disabled: disabledStyle,
+    };
+
+    return {
+        base: baseSet,
+        on: onSet,
+        info: styleSet,
+        positive: styleSet,
+        warning: styleSet,
+        negative: styleSet
+    };
 }
 
 function middleLayer(ramps: RampSet, isLight: boolean): Layer {
-  let defaultStyle: Style = {
-    background: ramps.neutral(0.2).hex(),
-    border: ramps.neutral(0.7).hex(),
-    foreground: ramps.neutral(1).hex(),
-  };
-
-  let variantStyle: Style = {
-    background: ramps.neutral(0.3).hex(),
-    border: ramps.neutral(0.6).hex(),
-    foreground: ramps.neutral(0.8).hex(),
-  };
-
-  let hoveredStyle: Style = {
-    background: ramps.neutral(0.4).hex(),
-    border: ramps.neutral(1.0).hex(),
-    foreground: ramps.neutral(0.9).hex(),
-  };
-
-  let pressedStyle: Style = {
-    background: ramps.neutral(0.55).hex(),
-    border: ramps.neutral(0.9).hex(),
-    foreground: ramps.neutral(0.9).hex(),
-  };
-
-  let activeStyle: Style = {
-    background: ramps.neutral(0.8).hex(),
-    border: ramps.neutral(0.8).hex(),
-    foreground: ramps.neutral(0.1).hex(),
-  };
-
-  let disabledStyle: Style = {
-    background: ramps.neutral(0.25).hex(),
-    border: ramps.neutral(1).hex(),
-    foreground: ramps.neutral(0.9).hex(),
-  };
-
-  let styleSet: StyleSet = {
-    default: defaultStyle,
-    variant: variantStyle,
-    hovered: hoveredStyle,
-    pressed: pressedStyle,
-    active: activeStyle,
-    disabled: disabledStyle,
-  };
-
-  return {
-    base: styleSet,
-    on: styleSet,
-    info: styleSet,
-    positive: styleSet,
-    warning: styleSet,
-    negative: styleSet
-  };
+    let defaultStyle: Style = {
+        background: ramps.neutral(0.2).hex(),
+        border: ramps.neutral(0.4).hex(),
+        foreground: ramps.neutral(1).hex(),
+    };
+
+    let variantStyle: Style = {
+        background: ramps.neutral(0.3).hex(),
+        border: ramps.neutral(0.6).hex(),
+        foreground: ramps.neutral(0.8).hex(),
+    };
+
+    let hoveredStyle: Style = {
+        background: ramps.neutral(0.4).hex(),
+        border: ramps.neutral(1.0).hex(),
+        foreground: ramps.neutral(0.9).hex(),
+    };
+
+    let pressedStyle: Style = {
+        background: ramps.neutral(0.55).hex(),
+        border: ramps.neutral(0.9).hex(),
+        foreground: ramps.neutral(0.9).hex(),
+    };
+
+    let activeStyle: Style = {
+        background: ramps.neutral(0.8).hex(),
+        border: ramps.neutral(0.8).hex(),
+        foreground: ramps.neutral(0.1).hex(),
+    };
+
+    let disabledStyle: Style = {
+        background: ramps.neutral(0.25).hex(),
+        border: ramps.neutral(1).hex(),
+        foreground: ramps.neutral(0.9).hex(),
+    };
+
+    let baseSet: StyleSet = {
+        default: {
+            background: ramps.neutral(0.1).hex(),
+            border: ramps.neutral(0.2).hex(),
+            foreground: ramps.neutral(1).hex(),
+        },
+        variant: {
+            background: ramps.neutral(0.1).hex(),
+            border: ramps.neutral(0.15).hex(),
+            foreground: ramps.neutral(0.7).hex(),
+        },
+        hovered: {
+            background: ramps.neutral(0.4).hex(),
+            border: ramps.neutral(1.0).hex(),
+            foreground: ramps.neutral(0.9).hex(),
+        },
+        pressed: {
+            background: ramps.neutral(0.55).hex(),
+            border: ramps.neutral(0.9).hex(),
+            foreground: ramps.neutral(0.9).hex(),
+        },
+        active: {
+            background: ramps.neutral(0.8).hex(),
+            border: ramps.neutral(0.8).hex(),
+            foreground: ramps.neutral(0.1).hex(),
+        },
+        disabled: {
+            background: ramps.neutral(0.25).hex(),
+            border: ramps.neutral(1).hex(),
+            foreground: ramps.neutral(0.9).hex(),
+        },
+    }
+
+    let styleSet: StyleSet = {
+        default: defaultStyle,
+        variant: variantStyle,
+        hovered: hoveredStyle,
+        pressed: pressedStyle,
+        active: activeStyle,
+        disabled: disabledStyle,
+    };
+
+    return {
+        base: baseSet,
+        on: styleSet,
+        info: styleSet,
+        positive: styleSet,
+        warning: styleSet,
+        negative: styleSet
+    };
 }
 
 function topLayer(ramps: RampSet, isLight: boolean): Layer {
-  let defaultStyle: Style = {
-    background: ramps.neutral(0).hex(),
-    border: ramps.neutral(0.7).hex(),
-    foreground: ramps.neutral(1).hex(),
-  };
-
-  let variantStyle: Style = {
-    background: ramps.neutral(0.2).hex(),
-    border: ramps.neutral(0.6).hex(),
-    foreground: ramps.neutral(0.8).hex(),
-  };
-
-  let hoveredStyle: Style = {
-    background: ramps.neutral(0.4).hex(),
-    border: ramps.neutral(1.0).hex(),
-    foreground: ramps.neutral(0.9).hex(),
-  };
-
-  let pressedStyle: Style = {
-    background: ramps.neutral(0.55).hex(),
-    border: ramps.neutral(0.9).hex(),
-    foreground: ramps.neutral(0.9).hex(),
-  };
-
-  let activeStyle: Style = {
-    background: ramps.neutral(0.8).hex(),
-    border: ramps.neutral(0.8).hex(),
-    foreground: ramps.neutral(0.1).hex(),
-  };
-
-  let disabledStyle: Style = {
-    background: ramps.neutral(0.25).hex(),
-    border: ramps.neutral(1).hex(),
-    foreground: ramps.neutral(0.9).hex(),
-  };
-
-  let styleSet: StyleSet = {
-    default: defaultStyle,
-    variant: variantStyle,
-    hovered: hoveredStyle,
-    pressed: pressedStyle,
-    active: activeStyle,
-    disabled: disabledStyle,
-  };
-
-  return {
-    base: styleSet,
-    on: styleSet,
-    info: styleSet,
-    positive: styleSet,
-    warning: styleSet,
-    negative: styleSet
-  };
+
+    let baseSet: StyleSet = {
+        default: {
+            background: ramps.neutral(0).hex(),
+            border: ramps.neutral(0.2).hex(),
+            foreground: ramps.neutral(1).hex(),
+        },
+        variant: {
+            background: ramps.neutral(0.1).hex(),
+            border: ramps.neutral(0.15).hex(),
+            foreground: ramps.neutral(0.7).hex(),
+        },
+        hovered: {
+            background: ramps.neutral(0.4).hex(),
+            border: ramps.neutral(1.0).hex(),
+            foreground: ramps.neutral(0.9).hex(),
+        },
+        pressed: {
+            background: ramps.neutral(0.55).hex(),
+            border: ramps.neutral(0.9).hex(),
+            foreground: ramps.neutral(0.9).hex(),
+        },
+        active: {
+            background: ramps.neutral(0.8).hex(),
+            border: ramps.neutral(0.8).hex(),
+            foreground: ramps.neutral(0.1).hex(),
+        },
+        disabled: {
+            background: ramps.neutral(0.25).hex(),
+            border: ramps.neutral(1).hex(),
+            foreground: ramps.neutral(0.9).hex(),
+        },
+    }
+
+    let onSet: StyleSet = {
+        default: {
+            background: ramps.neutral(0.3).hex(),
+            border: ramps.neutral(0.5).hex(),
+            foreground: ramps.neutral(1).hex(),
+        },
+        variant: {
+            background: ramps.neutral(0.2).hex(),
+            border: ramps.neutral(0.6).hex(),
+            foreground: ramps.neutral(0.8).hex(),
+        },
+        hovered: {
+            background: ramps.neutral(0.4).hex(),
+            border: ramps.neutral(1.0).hex(),
+            foreground: ramps.neutral(0.9).hex(),
+        },
+        pressed: {
+            background: ramps.neutral(0.55).hex(),
+            border: ramps.neutral(0.9).hex(),
+            foreground: ramps.neutral(0.9).hex(),
+        },
+        active: {
+            background: ramps.neutral(0.8).hex(),
+            border: ramps.neutral(0.8).hex(),
+            foreground: ramps.neutral(0.1).hex(),
+        },
+        disabled: {
+            background: ramps.neutral(0.25).hex(),
+            border: ramps.neutral(1).hex(),
+            foreground: ramps.neutral(0.9).hex(),
+        },
+    }
+
+    let infoSet: StyleSet = {
+        default: {
+            background: ramps.blue(0.3).hex(),
+            border: ramps.blue(0.5).hex(),
+            foreground: ramps.blue(1).hex(),
+        },
+        variant: {
+            background: ramps.blue(0.2).hex(),
+            border: ramps.blue(0.6).hex(),
+            foreground: ramps.blue(0.8).hex(),
+        },
+        hovered: {
+            background: ramps.blue(0.4).hex(),
+            border: ramps.blue(1.0).hex(),
+            foreground: ramps.blue(0.9).hex(),
+        },
+        pressed: {
+            background: ramps.blue(0.55).hex(),
+            border: ramps.blue(0.9).hex(),
+            foreground: ramps.blue(0.9).hex(),
+        },
+        active: {
+            background: ramps.blue(0.8).hex(),
+            border: ramps.blue(0.8).hex(),
+            foreground: ramps.blue(0.1).hex(),
+        },
+        disabled: {
+            background: ramps.blue(0.25).hex(),
+            border: ramps.blue(1).hex(),
+            foreground: ramps.blue(0.9).hex(),
+        },
+    }
+
+    let positiveSet: StyleSet = {
+        default: {
+            background: ramps.green(0.3).hex(),
+            border: ramps.green(0.5).hex(),
+            foreground: ramps.green(1).hex(),
+        },
+        variant: {
+            background: ramps.green(0.2).hex(),
+            border: ramps.green(0.6).hex(),
+            foreground: ramps.green(0.8).hex(),
+        },
+        hovered: {
+            background: ramps.green(0.4).hex(),
+            border: ramps.green(1.0).hex(),
+            foreground: ramps.green(0.9).hex(),
+        },
+        pressed: {
+            background: ramps.green(0.55).hex(),
+            border: ramps.green(0.9).hex(),
+            foreground: ramps.green(0.9).hex(),
+        },
+        active: {
+            background: ramps.green(0.8).hex(),
+            border: ramps.green(0.8).hex(),
+            foreground: ramps.green(0.1).hex(),
+        },
+        disabled: {
+            background: ramps.green(0.25).hex(),
+            border: ramps.green(1).hex(),
+            foreground: ramps.green(0.9).hex(),
+        },
+    }
+
+    let warningSet: StyleSet = {
+        default: {
+            background: ramps.yellow(0.3).hex(),
+            border: ramps.yellow(0.5).hex(),
+            foreground: ramps.yellow(1).hex(),
+        },
+        variant: {
+            background: ramps.yellow(0.2).hex(),
+            border: ramps.yellow(0.6).hex(),
+            foreground: ramps.yellow(0.8).hex(),
+        },
+        hovered: {
+            background: ramps.yellow(0.4).hex(),
+            border: ramps.yellow(1.0).hex(),
+            foreground: ramps.yellow(0.9).hex(),
+        },
+        pressed: {
+            background: ramps.yellow(0.55).hex(),
+            border: ramps.yellow(0.9).hex(),
+            foreground: ramps.yellow(0.9).hex(),
+        },
+        active: {
+            background: ramps.yellow(0.8).hex(),
+            border: ramps.yellow(0.8).hex(),
+            foreground: ramps.yellow(0.1).hex(),
+        },
+        disabled: {
+            background: ramps.yellow(0.25).hex(),
+            border: ramps.yellow(1).hex(),
+            foreground: ramps.yellow(0.9).hex(),
+        },
+    }
+
+    let negativeSet: StyleSet = {
+        default: {
+            background: ramps.red(0.3).hex(),
+            border: ramps.red(0.5).hex(),
+            foreground: ramps.red(1).hex(),
+        },
+        variant: {
+            background: ramps.red(0.2).hex(),
+            border: ramps.red(0.6).hex(),
+            foreground: ramps.red(0.8).hex(),
+        },
+        hovered: {
+            background: ramps.red(0.4).hex(),
+            border: ramps.red(1.0).hex(),
+            foreground: ramps.red(0.9).hex(),
+        },
+        pressed: {
+            background: ramps.red(0.55).hex(),
+            border: ramps.red(0.9).hex(),
+            foreground: ramps.red(0.9).hex(),
+        },
+        active: {
+            background: ramps.red(0.8).hex(),
+            border: ramps.red(0.8).hex(),
+            foreground: ramps.red(0.1).hex(),
+        },
+        disabled: {
+            background: ramps.red(0.25).hex(),
+            border: ramps.red(1).hex(),
+            foreground: ramps.red(0.9).hex(),
+        },
+    }
+
+    let defaultStyle: Style = {
+        background: ramps.neutral(0).hex(),
+        border: ramps.neutral(0.7).hex(),
+        foreground: ramps.neutral(1).hex(),
+    };
+
+    let variantStyle: Style = {
+        background: ramps.neutral(0.2).hex(),
+        border: ramps.neutral(0.6).hex(),
+        foreground: ramps.neutral(0.8).hex(),
+    };
+
+    let hoveredStyle: Style = {
+        background: ramps.neutral(0.4).hex(),
+        border: ramps.neutral(1.0).hex(),
+        foreground: ramps.neutral(0.9).hex(),
+    };
+
+    let pressedStyle: Style = {
+        background: ramps.neutral(0.55).hex(),
+        border: ramps.neutral(0.9).hex(),
+        foreground: ramps.neutral(0.9).hex(),
+    };
+
+    let activeStyle: Style = {
+        background: ramps.neutral(0.8).hex(),
+        border: ramps.neutral(0.8).hex(),
+        foreground: ramps.neutral(0.1).hex(),
+    };
+
+    let disabledStyle: Style = {
+        background: ramps.neutral(0.25).hex(),
+        border: ramps.neutral(1).hex(),
+        foreground: ramps.neutral(0.9).hex(),
+    };
+
+    let styleSet: StyleSet = {
+        default: defaultStyle,
+        variant: variantStyle,
+        hovered: hoveredStyle,
+        pressed: pressedStyle,
+        active: activeStyle,
+        disabled: disabledStyle,
+    };
+
+    return {
+        base: baseSet,
+        on: onSet,
+        info: infoSet,
+        positive: positiveSet,
+        warning: warningSet,
+        negative: negativeSet
+    };
 }
\ No newline at end of file
diff --git a/styles/src/themes/common/styleSets.ts b/styles/src/themes/common/styleSets.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2732602bc925440db11d36c9bea8460725647de1
--- /dev/null
+++ b/styles/src/themes/common/styleSets.ts
@@ -0,0 +1,2 @@
+export const top = {
+}
\ No newline at end of file

From 962f087ac2d7719ee4803cc52465d679d0fd3bed Mon Sep 17 00:00:00 2001
From: K Simmons <keith@zed.dev>
Date: Thu, 22 Sep 2022 13:29:19 -0700
Subject: [PATCH 07/50] promote variant to its own styleset

---
 crates/theme/src/theme.rs                     |    2 +-
 crates/theme_testbench/src/theme_testbench.rs |   29 +-
 styles/src/styleTree/components.ts            |  106 +-
 styles/src/styleTree/contactFinder.ts         |    6 +-
 styles/src/styleTree/contactsPanel.ts         |   18 +-
 styles/src/styleTree/contextMenu.ts           |   14 +-
 styles/src/styleTree/editor.ts                |   12 +-
 styles/src/styleTree/picker.ts                |    6 +-
 styles/src/styleTree/projectDiagnostics.ts    |    2 +-
 styles/src/styleTree/projectPanel.ts          |    8 +-
 styles/src/styleTree/search.ts                |    6 +-
 styles/src/styleTree/statusBar.ts             |   10 +-
 styles/src/styleTree/tabBar.ts                |   12 +-
 styles/src/styleTree/updateNotification.ts    |    4 +-
 styles/src/styleTree/workspace.ts             |    8 +-
 styles/src/themes/common/colorScheme.ts       |    2 +-
 styles/src/themes/common/ramps.ts             | 1111 ++++++++---------
 17 files changed, 657 insertions(+), 699 deletions(-)

diff --git a/crates/theme/src/theme.rs b/crates/theme/src/theme.rs
index 0f8b5778936c92afc8742575e1400aa7e286c799..11e2c704d376ae1de57503f0c5f274d2182169e6 100644
--- a/crates/theme/src/theme.rs
+++ b/crates/theme/src/theme.rs
@@ -775,6 +775,7 @@ pub struct RampSet {
 #[derive(Clone, Deserialize, Default)]
 pub struct Layer {
     pub base: StyleSet,
+    pub variant: StyleSet,
     pub on: StyleSet,
     pub info: StyleSet,
     pub positive: StyleSet,
@@ -785,7 +786,6 @@ pub struct Layer {
 #[derive(Clone, Deserialize, Default)]
 pub struct StyleSet {
     pub default: Style,
-    pub variant: Style,
     pub active: Style,
     pub disabled: Style,
     pub hovered: Style,
diff --git a/crates/theme_testbench/src/theme_testbench.rs b/crates/theme_testbench/src/theme_testbench.rs
index 1a7bfbcd8946c54e126fb21a9b660a9991ee0930..ce24dbc34ac7f7e6492533583e46b722c669b64a 100644
--- a/crates/theme_testbench/src/theme_testbench.rs
+++ b/crates/theme_testbench/src/theme_testbench.rs
@@ -2,8 +2,8 @@ use gpui::{
     actions,
     color::Color,
     elements::{
-        Canvas, ConstrainedBox, Container, ContainerStyle, ElementBox, Flex, Label, Margin,
-        MouseEventHandler, Padding, ParentElement,
+        Canvas, Container, ContainerStyle, ElementBox, Flex, Label, Margin, MouseEventHandler,
+        Padding, ParentElement,
     },
     fonts::TextStyle,
     Border, Element, Entity, MutableAppContext, Quad, RenderContext, View, ViewContext,
@@ -97,27 +97,32 @@ impl ThemeTestbench {
                     .boxed(),
             )
             .with_child(
-                Self::render_button_set(1, layer_index, "on", &layer.on, cx)
+                Self::render_button_set(1, layer_index, "variant", &layer.variant, cx)
                     .flex(1., false)
                     .boxed(),
             )
             .with_child(
-                Self::render_button_set(2, layer_index, "info", &layer.info, cx)
+                Self::render_button_set(2, layer_index, "on", &layer.on, cx)
                     .flex(1., false)
                     .boxed(),
             )
             .with_child(
-                Self::render_button_set(3, layer_index, "positive", &layer.positive, cx)
+                Self::render_button_set(3, layer_index, "info", &layer.info, cx)
                     .flex(1., false)
                     .boxed(),
             )
             .with_child(
-                Self::render_button_set(4, layer_index, "warning", &layer.warning, cx)
+                Self::render_button_set(4, layer_index, "positive", &layer.positive, cx)
                     .flex(1., false)
                     .boxed(),
             )
             .with_child(
-                Self::render_button_set(5, layer_index, "negative", &layer.negative, cx)
+                Self::render_button_set(5, layer_index, "warning", &layer.warning, cx)
+                    .flex(1., false)
+                    .boxed(),
+            )
+            .with_child(
+                Self::render_button_set(6, layer_index, "negative", &layer.negative, cx)
                     .flex(1., false)
                     .boxed(),
             )
@@ -153,21 +158,13 @@ impl ThemeTestbench {
             .with_child(Self::render_button(
                 set_index * 4 + 1,
                 layer_index,
-                "variant",
-                &style_set,
-                Some(|style_set| &style_set.variant),
-                cx,
-            ))
-            .with_child(Self::render_button(
-                set_index * 4 + 2,
-                layer_index,
                 "active",
                 &style_set,
                 Some(|style_set| &style_set.active),
                 cx,
             ))
             .with_child(Self::render_button(
-                set_index * 4 + 3,
+                set_index * 4 + 2,
                 layer_index,
                 "disabled",
                 &style_set,
diff --git a/styles/src/styleTree/components.ts b/styles/src/styleTree/components.ts
index 590af3f52c065c654eb42cdf91487373885765c5..f0c7f519987ae33780a41f6f340d93a6ff7a5e87 100644
--- a/styles/src/styleTree/components.ts
+++ b/styles/src/styleTree/components.ts
@@ -1,16 +1,45 @@
 import { fontFamilies, fontSizes, FontWeight } from "../common";
-import { Layer, Styles, StyleSets } from "../themes/common/colorScheme";
+import { Layer, Styles, StyleSets, Style } from "../themes/common/colorScheme";
 
-export function background(layer: Layer, styleSet?: StyleSets, style?: Styles): string {
-  return layer[styleSet ?? "base"][style ?? "default"].background;
+function isStyleSet(key: any): key is StyleSets {
+  return ["base", "variant", "on", "info", "positive", "warning", "negative"].includes(key);
 }
-export function borderColor(layer: Layer, styleSet?: StyleSets, style?: Styles): string {
-  return layer[styleSet ?? "base"][style ?? "default"].border;
+function isStyle(key: any): key is Styles {
+  return ["default", "active", "disabled", "hovered", "pressed"].includes(key);
 }
-export function foreground(layer: Layer, styleSet?: StyleSets, style?: Styles): string {
-  return layer[styleSet ?? "base"][style ?? "default"].foreground;
+function getStyle(layer: Layer, possibleStyleSetOrStyle?: any, possibleStyle?: any): Style {
+  let styleSet: StyleSets = "base";
+  let style: Styles = "default";
+  if (isStyleSet(possibleStyleSetOrStyle)) {
+    styleSet = possibleStyleSetOrStyle;
+  } else if (isStyle(possibleStyleSetOrStyle)) {
+    style = possibleStyleSetOrStyle;
+  }
+
+  if (isStyle(possibleStyle)) {
+    style = possibleStyle;
+  }
+
+  return layer[styleSet][style];
+}
+
+export function background(layer: Layer, style?: Styles): string;
+export function background(layer: Layer, styleSet?: StyleSets, style?: Styles): string;
+export function background(layer: Layer, styleSetOrStyles?: StyleSets | Styles, style?: Styles): string {
+  return getStyle(layer, styleSetOrStyles, style).background;
 }
 
+export function borderColor(layer: Layer, style?: Styles): string;
+export function borderColor(layer: Layer, styleSet?: StyleSets, style?: Styles): string;
+export function borderColor(layer: Layer, styleSetOrStyles?: StyleSets | Styles, style?: Styles): string {
+  return getStyle(layer, styleSetOrStyles, style).border;
+}
+
+export function foreground(layer: Layer, style?: Styles): string;
+export function foreground(layer: Layer, styleSet?: StyleSets, style?: Styles): string;
+export function foreground(layer: Layer, styleSetOrStyles?: StyleSets | Styles, style?: Styles): string {
+  return getStyle(layer, styleSetOrStyles, style).foreground;
+}
 
 interface Text {
   family: keyof typeof fontFamilies,
@@ -38,6 +67,11 @@ export function text(
   fontFamily: keyof typeof fontFamilies,
   styleSet: StyleSets,
   properties?: TextProperties): Text;
+export function text(
+  layer: Layer,
+  fontFamily: keyof typeof fontFamilies,
+  style: Styles,
+  properties?: TextProperties): Text;
 export function text(
   layer: Layer,
   fontFamily: keyof typeof fontFamilies,
@@ -45,29 +79,15 @@ export function text(
 export function text(
   layer: Layer,
   fontFamily: keyof typeof fontFamilies,
-  styleSetOrProperties?: StyleSets | TextProperties,
+  styleSetStyleOrProperties?: StyleSets | Styles | TextProperties,
   styleOrProperties?: Styles | TextProperties,
   properties?: TextProperties
 ) {
-  let styleSet: StyleSets = "base";
-  let style: Styles = "default";
-
-  if (typeof styleSetOrProperties === "string") {
-    styleSet = styleSetOrProperties
-  } else if (styleSetOrProperties !== undefined) {
-    properties = styleSetOrProperties;
-  }
-
-  if (typeof styleOrProperties === "string") {
-    style = styleOrProperties;
-  } else if (styleOrProperties !== undefined) {
-    properties = styleOrProperties;
-  }
-
+  let style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties);
   let size = fontSizes[properties?.size || "sm"];
   return {
     family: fontFamilies[fontFamily],
-    color: layer[styleSet][style].foreground,
+    color: style.foreground,
     ...properties,
     size,
   };
@@ -84,7 +104,7 @@ export interface Border {
   overlay?: boolean;
 }
 
-export interface BorderOptions {
+export interface BorderProperties {
   width?: number;
   top?: boolean;
   bottom?: boolean;
@@ -97,41 +117,33 @@ export function border(
   layer: Layer,
   styleSet: StyleSets,
   style: Styles,
-  options?: BorderOptions
+  properties?: BorderProperties
 ): Border;
 export function border(
   layer: Layer,
   styleSet: StyleSets,
-  options?: BorderOptions
+  properties?: BorderProperties
 ): Border;
 export function border(
   layer: Layer,
-  options?: BorderOptions
+  style: Styles,
+  properties?: BorderProperties
 ): Border;
 export function border(
   layer: Layer,
-  styleSetOrOptions?: StyleSets | BorderOptions,
-  styleOrOptions?: Styles | BorderOptions,
-  options?: BorderOptions
+  properties?: BorderProperties
+): Border;
+export function border(
+  layer: Layer,
+  styleSetStyleOrProperties?: StyleSets | Styles | BorderProperties,
+  styleOrProperties?: Styles | BorderProperties,
+  properties?: BorderProperties
 ): Border {
-  let styleSet: StyleSets = "base";
-  let style: Styles = "default";
-
-  if (typeof styleSetOrOptions === "string") {
-    styleSet = styleSetOrOptions
-  } else if (styleSetOrOptions !== undefined) {
-    options = styleSetOrOptions;
-  }
-
-  if (typeof styleOrOptions === "string") {
-    style = styleOrOptions;
-  } else if (styleOrOptions !== undefined) {
-    options = styleOrOptions;
-  }
+  let style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties);
 
   return {
-    color: layer[styleSet][style].border,
+    color: style.border,
     width: 1,
-    ...options,
+    ...properties,
   };
 }
\ No newline at end of file
diff --git a/styles/src/styleTree/contactFinder.ts b/styles/src/styleTree/contactFinder.ts
index d86b4306e855ef094c49ae166ccddacbda80ebb8..40ba6b3179faefec5ab5442bebd9e3e1855c6f22 100644
--- a/styles/src/styleTree/contactFinder.ts
+++ b/styles/src/styleTree/contactFinder.ts
@@ -27,13 +27,13 @@ export default function contactFinder(colorScheme: ColorScheme) {
     contactButton: {
       ...contactButton,
       hover: {
-        background: background(layer, "base", "hovered"),
+        background: background(layer, "hovered"),
       },
     },
     disabledContactButton: {
       ...contactButton,
-      background: background(layer, "base", "disabled"),
-      color: foreground(layer, "base", "disabled"),
+      background: background(layer, "disabled"),
+      color: foreground(layer, "disabled"),
     },
   };
 }
diff --git a/styles/src/styleTree/contactsPanel.ts b/styles/src/styleTree/contactsPanel.ts
index a239fd7fc065d359687b3aec2eefb4b10bb011b6..dc9224e93bd79c5d576f475603e03e4e2f359c93 100644
--- a/styles/src/styleTree/contactsPanel.ts
+++ b/styles/src/styleTree/contactsPanel.ts
@@ -91,8 +91,8 @@ export default function contactsPanel(colorScheme: ColorScheme) {
         right: sidePadding,
       },
       active: {
-        ...text(layer, "mono", "base", "active", { size: "sm" }),
-        background: background(layer, "base", "active"),
+        ...text(layer, "mono", "active", { size: "sm" }),
+        background: background(layer, "active"),
       },
     },
     contactRow: {
@@ -101,17 +101,17 @@ export default function contactsPanel(colorScheme: ColorScheme) {
         right: sidePadding,
       },
       active: {
-        background: background(layer, "base", "active"),
+        background: background(layer, "active"),
       },
     },
     treeBranch: {
       color: borderColor(layer),
       width: 1,
       hover: {
-        color: borderColor(layer, "base", "hovered"),
+        color: borderColor(layer, "hovered"),
       },
       active: {
-        color: borderColor(layer, "base", "active"),
+        color: borderColor(layer, "active"),
       },
     },
     contactAvatar: {
@@ -128,7 +128,7 @@ export default function contactsPanel(colorScheme: ColorScheme) {
     contactButton: {
       ...contactButton,
       hover: {
-        background: background(layer, "base", "hovered"),
+        background: background(layer, "hovered"),
       },
     },
     disabledButton: {
@@ -144,10 +144,10 @@ export default function contactsPanel(colorScheme: ColorScheme) {
         ...text(layer, "mono", { size: "sm" }),
       },
       hover: {
-        background: background(layer, "base", "hovered"),
+        background: background(layer, "hovered"),
       },
       active: {
-        background: background(layer, "base", "active"),
+        background: background(layer, "active"),
       },
     },
     inviteRow: {
@@ -158,7 +158,7 @@ export default function contactsPanel(colorScheme: ColorScheme) {
       border: border(layer, { top: true }),
       text: text(layer, "sans", { size: "sm" }),
       hover: {
-        text: text(layer, "sans", "base", "hovered", { size: "sm" }),
+        text: text(layer, "sans", "hovered", { size: "sm" }),
       },
     },
   };
diff --git a/styles/src/styleTree/contextMenu.ts b/styles/src/styleTree/contextMenu.ts
index 2d38cde80c795effb468e1e444f82cfb4fc4244c..97b323885c7d0392d431a6e158ff409b757f84e5 100644
--- a/styles/src/styleTree/contextMenu.ts
+++ b/styles/src/styleTree/contextMenu.ts
@@ -23,20 +23,20 @@ export default function contextMenu(colorScheme: ColorScheme) {
       cornerRadius: 6,
       label: text(layer, "sans", { size: "sm" }),
       keystroke: {
-        ...text(layer, "sans", "base", "variant", { size: "sm", weight: "bold" }),
+        ...text(layer, "sans", "variant", { size: "sm", weight: "bold" }),
         padding: { left: 3, right: 3 },
       },
       hover: {
-        background: background(layer, "base", "hovered"),
-        text: text(layer, "sans", "base", "hovered", { size: "sm" }),
+        background: background(layer, "hovered"),
+        text: text(layer, "sans", "hovered", { size: "sm" }),
       },
       active: {
-        background: background(layer, "base", "active"),
-        text: text(layer, "sans", "base", "active", { size: "sm" }),
+        background: background(layer, "active"),
+        text: text(layer, "sans", "active", { size: "sm" }),
       },
       activeHover: {
-        background: background(layer, "base", "active"),
-        text: text(layer, "sans", "base", "active", { size: "sm" }),
+        background: background(layer, "active"),
+        text: text(layer, "sans", "active", { size: "sm" }),
       },
     },
     separator: {
diff --git a/styles/src/styleTree/editor.ts b/styles/src/styleTree/editor.ts
index 22a4d1bac01e6c0964ae30dd7ea33dac7c566367..4a3605b52e083a14e57bc3558e33c8abb12239f6 100644
--- a/styles/src/styleTree/editor.ts
+++ b/styles/src/styleTree/editor.ts
@@ -133,10 +133,10 @@ export default function editor(colorScheme: ColorScheme) {
   return {
     textColor: syntax.primary.color,
     background: background(layer),
-    activeLineBackground: background(layer, "base", "variant"),
-    highlightedLineBackground: background(layer, "base", "variant"),
+    activeLineBackground: background(layer, "variant"),
+    highlightedLineBackground: background(layer, "variant"),
     codeActions: {
-      indicator: foreground(layer, "base", "variant"),
+      indicator: foreground(layer, "variant"),
       verticalScale: 0.618
     },
     diffBackgroundDeleted: background(layer, "negative"),
@@ -147,7 +147,7 @@ export default function editor(colorScheme: ColorScheme) {
     gutterBackground: background(layer),
     gutterPaddingFactor: 3.5,
     lineNumber: foreground(layer),
-    lineNumberActive: foreground(layer, "base", "active"),
+    lineNumberActive: foreground(layer, "active"),
     renameFade: 0.6,
     unnecessaryCodeFade: 0.5,
     selection: colorScheme.players[0],
@@ -169,7 +169,7 @@ export default function editor(colorScheme: ColorScheme) {
       item: autocompleteItem,
       hoveredItem: {
         ...autocompleteItem,
-        background: background(elevation.above.top, "base", "hovered"),
+        background: background(elevation.above.top, "hovered"),
       },
       margin: {
         left: -14,
@@ -177,7 +177,7 @@ export default function editor(colorScheme: ColorScheme) {
       matchHighlight: elevation.above.ramps.blue(0.5).hex(),
       selectedItem: {
         ...autocompleteItem,
-        background: background(elevation.above.top, "base", "active"),
+        background: background(elevation.above.top, "active"),
       },
     },
     diagnosticHeader: {
diff --git a/styles/src/styleTree/picker.ts b/styles/src/styleTree/picker.ts
index 49498f4e51a5a6940146f40ea92facaabbbd4e4b..7732fdff5fdc43471495e14eb123190c85b76523 100644
--- a/styles/src/styleTree/picker.ts
+++ b/styles/src/styleTree/picker.ts
@@ -23,11 +23,11 @@ export default function picker(colorScheme: ColorScheme) {
       text: text(layer, "sans"),
       highlightText: text(layer, "sans", { weight: "bold" }),
       active: {
-        background: background(layer, "base", "active"),
-        text: text(layer, "sans", "base", "active"),
+        background: background(layer, "active"),
+        text: text(layer, "sans", "active"),
       },
       hover: {
-        background: background(layer, "base", "hovered"),
+        background: background(layer, "hovered"),
       },
     },
     border: border(layer),
diff --git a/styles/src/styleTree/projectDiagnostics.ts b/styles/src/styleTree/projectDiagnostics.ts
index 25eac4713fd1ee1d132318aa4eef8688dcece7f6..32127a84c7a3069dc329aa0bca53048b80d00f39 100644
--- a/styles/src/styleTree/projectDiagnostics.ts
+++ b/styles/src/styleTree/projectDiagnostics.ts
@@ -8,6 +8,6 @@ export default function projectDiagnostics(colorScheme: ColorScheme) {
     tabIconSpacing: 4,
     tabIconWidth: 13,
     tabSummarySpacing: 10,
-    emptyMessage: text(layer, "sans", "base", "variant", { size: "md" }),
+    emptyMessage: text(layer, "sans", "variant", { size: "md" }),
   };
 }
diff --git a/styles/src/styleTree/projectPanel.ts b/styles/src/styleTree/projectPanel.ts
index 87a12d0d6ab81c2812e99d643c245f684fed1c4b..c22be76b638bcf05c1cd4bdebe37473cddec7603 100644
--- a/styles/src/styleTree/projectPanel.ts
+++ b/styles/src/styleTree/projectPanel.ts
@@ -17,12 +17,12 @@ export default function projectPanel(colorScheme: ColorScheme) {
         background: background(layer, "on", "hovered"),
       },
       active: {
-        background: background(layer, "base", "active"),
-        text: text(layer, "mono", "base", "active", { size: "sm" }),
+        background: background(layer, "active"),
+        text: text(layer, "mono", "active", { size: "sm" }),
       },
       activeHover: {
-        background: background(layer, "base", "hovered"),
-        text: text(layer, "mono", "base", "active", { size: "sm" }),
+        background: background(layer, "hovered"),
+        text: text(layer, "mono", "active", { size: "sm" }),
       },
     },
     cutEntryFade: 0.4,
diff --git a/styles/src/styleTree/search.ts b/styles/src/styleTree/search.ts
index 953b3351d35f912be8e57b8c3e0f64b5d2974456..3844c01334061d904d26c8229d27193883a736c7 100644
--- a/styles/src/styleTree/search.ts
+++ b/styles/src/styleTree/search.ts
@@ -10,9 +10,9 @@ export default function search(colorScheme: ColorScheme) {
     cornerRadius: 8,
     minWidth: 200,
     maxWidth: 500,
-    placeholderText: text(layer, "mono", "base", "disabled"),
+    placeholderText: text(layer, "mono", "disabled"),
     selection: colorScheme.players[0],
-    text: text(layer, "mono", "base", "active"),
+    text: text(layer, "mono", "active"),
     border: border(layer),
     margin: {
       right: 12,
@@ -65,7 +65,7 @@ export default function search(colorScheme: ColorScheme) {
       border: border(layer, "negative"),
     },
     matchIndex: {
-      ...text(layer, "mono", "on", "variant"),
+      ...text(layer, "mono", "variant"),
       padding: 6,
     },
     optionButtonGroup: {
diff --git a/styles/src/styleTree/statusBar.ts b/styles/src/styleTree/statusBar.ts
index 1a0876ecf4b344ab3b4f0580b66ac622627f1132..4f4aa09b4240d5cc9e778e4849c37c720e552d85 100644
--- a/styles/src/styleTree/statusBar.ts
+++ b/styles/src/styleTree/statusBar.ts
@@ -42,7 +42,7 @@ export default function statusBar(colorScheme: ColorScheme) {
     },
     diagnosticMessage: {
       ...text(layer, "sans"),
-      hover: text(layer, "sans", "base", "hovered"),
+      hover: text(layer, "sans", "hovered"),
     },
     feedback: {
       ...text(layer, "sans"),
@@ -98,12 +98,12 @@ export default function statusBar(colorScheme: ColorScheme) {
         iconSize: 16,
         iconColor: foreground(layer),
         hover: {
-          iconColor: foreground(layer, "base", "hovered"),
-          background: background(layer, "base", "hovered"),
+          iconColor: foreground(layer, "hovered"),
+          background: background(layer, "hovered"),
         },
         active: {
-          iconColor: foreground(layer, "base", "active"),
-          background: background(layer, "base", "active"),
+          iconColor: foreground(layer, "active"),
+          background: background(layer, "active"),
         },
       },
       badge: {
diff --git a/styles/src/styleTree/tabBar.ts b/styles/src/styleTree/tabBar.ts
index cbb17045daf405fde69662bcb400287f72c4d90f..24593f607937e0127724a7dc1c8535b8e684a962 100644
--- a/styles/src/styleTree/tabBar.ts
+++ b/styles/src/styleTree/tabBar.ts
@@ -17,19 +17,19 @@ export default function tabBar(colorScheme: ColorScheme) {
       overlay: true,
     }),
     iconClose: foreground(layer),
-    iconCloseActive: foreground(layer, "base", "active"),
+    iconCloseActive: foreground(layer, "active"),
     iconConflict: foreground(layer, "warning"),
     iconDirty: foreground(layer, "info"),
     iconWidth: 8,
     spacing: 8,
-    text: text(layer, "sans", "base", "variant", { size: "sm" }),
+    text: text(layer, "sans", "variant", { size: "sm" }),
     padding: {
       left: 8,
       right: 8,
     },
     description: {
       margin: { left: 6, top: 1 },
-      ...text(layer, "sans", "base", "variant", { size: "2xs" })
+      ...text(layer, "sans", "variant", { size: "2xs" })
     }
   };
 
@@ -46,13 +46,13 @@ export default function tabBar(colorScheme: ColorScheme) {
   const inactivePaneInactiveTab = {
     ...tab,
     background: background(layer),
-    text: text(layer, "sans", "base", "variant", { size: "sm" }),
+    text: text(layer, "sans", "variant", { size: "sm" }),
   };
 
   const inactivePaneActiveTab = {
     ...tab,
     background: background(elevation.top),
-    text: text(elevation.top, "sans", "base", "variant", { size: "sm" }),
+    text: text(elevation.top, "sans", "variant", { size: "sm" }),
     border: {
       ...tab.border,
       bottom: false
@@ -84,7 +84,7 @@ export default function tabBar(colorScheme: ColorScheme) {
       iconWidth: 12,
       buttonWidth: activePaneActiveTab.height,
       hover: {
-        color: foreground(layer, "base", "hovered"),
+        color: foreground(layer, "hovered"),
       },
     },
     paneButtonContainer: {
diff --git a/styles/src/styleTree/updateNotification.ts b/styles/src/styleTree/updateNotification.ts
index 6536b441bd879d6910c20318f605ef9640a09976..d0922a475650297e685a68dca1987435271e0860 100644
--- a/styles/src/styleTree/updateNotification.ts
+++ b/styles/src/styleTree/updateNotification.ts
@@ -14,7 +14,7 @@ export default function updateNotification(colorScheme: ColorScheme): Object {
       ...text(layer, "sans", { size: "xs" }),
       margin: { left: headerPadding, top: 6, bottom: 6 },
       hover: {
-        color: foreground(layer, "base", "hovered"),
+        color: foreground(layer, "hovered"),
       },
     },
     dismissButton: {
@@ -24,7 +24,7 @@ export default function updateNotification(colorScheme: ColorScheme): Object {
       buttonWidth: 8,
       buttonHeight: 8,
       hover: {
-        color: foreground(layer, "base", "hovered"),
+        color: foreground(layer, "hovered"),
       },
     },
   };
diff --git a/styles/src/styleTree/workspace.ts b/styles/src/styleTree/workspace.ts
index 56350458df8c147191bae278a907248cb4647c9a..34108981e1211a072cb19a9e450482bcf9dbd570 100644
--- a/styles/src/styleTree/workspace.ts
+++ b/styles/src/styleTree/workspace.ts
@@ -72,8 +72,8 @@ export default function workspace(colorScheme: ColorScheme) {
       },
       border: border(layer, { bottom: true, overlay: true }),
       signInPrompt: {
-        background: background(layer, "on", "default"),
-        border: border(layer, "on", "default"),
+        background: background(layer, "on"),
+        border: border(layer, "on"),
         cornerRadius: 6,
         margin: {
           top: 1,
@@ -118,7 +118,7 @@ export default function workspace(colorScheme: ColorScheme) {
     toolbar: {
       height: 34,
       background: background(elevation.top),
-      border: border(elevation.top, "base", "variant", { bottom: true }),
+      border: border(elevation.top, "variant", { bottom: true }),
       itemSpacing: 8,
       navButton: {
         color: foreground(elevation.top, "on"),
@@ -136,7 +136,7 @@ export default function workspace(colorScheme: ColorScheme) {
       padding: { left: 8, right: 8, top: 4, bottom: 4 },
     },
     breadcrumbs: {
-      ...text(layer, "mono", "on", "variant"),
+      ...text(layer, "mono", "variant"),
       padding: { left: 6 },
     },
     disconnectedOverlay: {
diff --git a/styles/src/themes/common/colorScheme.ts b/styles/src/themes/common/colorScheme.ts
index ce74b72fea51c7485d230906cb7e3db90da8cfea..94a7fa40c4ab4fad3b1a3a9337658a5a75351eef 100644
--- a/styles/src/themes/common/colorScheme.ts
+++ b/styles/src/themes/common/colorScheme.ts
@@ -47,6 +47,7 @@ export interface Shadow {
 export type StyleSets = keyof Layer;
 export interface Layer {
   base: StyleSet,
+  variant: StyleSet,
   on: StyleSet,
   info: StyleSet,
   positive: StyleSet,
@@ -69,7 +70,6 @@ export interface RampSet {
 export type Styles = keyof StyleSet;
 export interface StyleSet {
   default: Style,
-  variant: Style,
   active: Style,
   disabled: Style,
   hovered: Style,
diff --git a/styles/src/themes/common/ramps.ts b/styles/src/themes/common/ramps.ts
index c4cfd5d0b2933ff13ef56201cc6c532bbd45f72a..595bc3a07eda09bb8656fa7f277054a58b1f27d4 100644
--- a/styles/src/themes/common/ramps.ts
+++ b/styles/src/themes/common/ramps.ts
@@ -2,617 +2,566 @@ import chroma, { Color, Scale } from "chroma-js";
 import { ColorScheme, Elevation, Layer, Player, RampSet, Shadow, Style, StyleSet } from "./colorScheme";
 
 export function colorRamp(color: Color): Scale {
-    let hue = color.hsl()[0];
-    let endColor = chroma.hsl(hue, 0.88, 0.96);
-    let startColor = chroma.hsl(hue, 0.68, 0.12);
-    return chroma.scale([startColor, color, endColor]).mode("hsl");
+  let hue = color.hsl()[0];
+  let endColor = chroma.hsl(hue, 0.88, 0.96);
+  let startColor = chroma.hsl(hue, 0.68, 0.12);
+  return chroma.scale([startColor, color, endColor]).mode("hsl");
 }
 
 export function createColorScheme(name: string, isLight: boolean, colorRamps: { [rampName: string]: Scale }): ColorScheme {
-    // Chromajs scales from 0 to 1 flipped if isLight is true
-    let baseRamps: typeof colorRamps = {};
-
-    // Chromajs mutates the underlying ramp when you call domain. This causes problems because
-    // we now store the ramps object in the theme so that we can pull colors out of them.
-    // So instead of calling domain and storing the result, we have to construct new ramps for each
-    // theme so that we don't modify the passed in ramps.
-    // This combined with an error in the type definitions for chroma js means we have to cast the colors
-    // function to any in order to get the colors back out from the original ramps.
-    if (isLight) {
-        for (var rampName in colorRamps) {
-            baseRamps[rampName] = chroma
-                .scale((colorRamps[rampName].colors as any)())
-                .domain([1, 0]);
-        }
-        baseRamps.neutral = chroma
-            .scale((colorRamps.neutral.colors as any)())
-            .domain([1, 0]);
-    } else {
-        for (var rampName in colorRamps) {
-            baseRamps[rampName] = chroma
-                .scale((colorRamps[rampName].colors as any)())
-                .domain([0, 1]);
-        }
-        baseRamps.neutral = chroma
-            .scale((colorRamps.neutral.colors as any)())
-            .domain([0, 1]);
+  // Chromajs scales from 0 to 1 flipped if isLight is true
+  let baseRamps: typeof colorRamps = {};
+
+  // Chromajs mutates the underlying ramp when you call domain. This causes problems because
+  // we now store the ramps object in the theme so that we can pull colors out of them.
+  // So instead of calling domain and storing the result, we have to construct new ramps for each
+  // theme so that we don't modify the passed in ramps.
+  // This combined with an error in the type definitions for chroma js means we have to cast the colors
+  // function to any in order to get the colors back out from the original ramps.
+  if (isLight) {
+    for (var rampName in colorRamps) {
+      baseRamps[rampName] = chroma
+        .scale((colorRamps[rampName].colors as any)())
+        .domain([1, 0]);
     }
-
-    let baseSet = {
-        neutral: baseRamps.neutral,
-        red: baseRamps.red,
-        orange: baseRamps.orange,
-        yellow: baseRamps.yellow,
-        green: baseRamps.green,
-        cyan: baseRamps.cyan,
-        blue: baseRamps.blue,
-        violet: baseRamps.violet,
-        magenta: baseRamps.magenta,
-    };
-
-    let lowest = elevation(
-        resampleSet(
-            baseSet,
-            evenSamples(0, 1)
-        ),
-        isLight,
-    );
-
-    let middle = elevation(
-        resampleSet(
-            baseSet,
-            evenSamples(0.125, 1)
-        ),
-        isLight,
-        {
-            blur: 4,
-            color: baseSet.neutral(isLight ? 7 : 0).darken().alpha(0.2).hex(), // TODO used blend previously. Replace with something else
-            offset: [1, 2],
-        }
-    );
-    lowest.above = middle;
-
-    let highest = elevation(
-        resampleSet(
-            baseSet,
-            evenSamples(0.25, 1)
-        ),
-        isLight,
-        {
-            blur: 16,
-            color: baseSet.neutral(isLight ? 7 : 0).darken().alpha(0.2).hex(), // TODO used blend previously. Replace with something else
-            offset: [0, 2],
-        }
-    );
-    middle.above = highest;
-
-    let players = {
-        "0": player(baseSet.blue),
-        "1": player(baseSet.green),
-        "2": player(baseSet.magenta),
-        "3": player(baseSet.orange),
-        "4": player(baseSet.violet),
-        "5": player(baseSet.cyan),
-        "6": player(baseSet.red),
-        "7": player(baseSet.yellow),
+    baseRamps.neutral = chroma
+      .scale((colorRamps.neutral.colors as any)())
+      .domain([1, 0]);
+  } else {
+    for (var rampName in colorRamps) {
+      baseRamps[rampName] = chroma
+        .scale((colorRamps[rampName].colors as any)())
+        .domain([0, 1]);
     }
-
-    return {
-        name,
-        isLight,
-
-        lowest,
-        middle,
-        highest,
-
-        players,
-    };
+    baseRamps.neutral = chroma
+      .scale((colorRamps.neutral.colors as any)())
+      .domain([0, 1]);
+  }
+
+  let baseSet = {
+    neutral: baseRamps.neutral,
+    red: baseRamps.red,
+    orange: baseRamps.orange,
+    yellow: baseRamps.yellow,
+    green: baseRamps.green,
+    cyan: baseRamps.cyan,
+    blue: baseRamps.blue,
+    violet: baseRamps.violet,
+    magenta: baseRamps.magenta,
+  };
+
+  let lowest = elevation(
+    resampleSet(
+      baseSet,
+      evenSamples(0, 1)
+    ),
+    isLight,
+  );
+
+  let middle = elevation(
+    resampleSet(
+      baseSet,
+      evenSamples(0.125, 1)
+    ),
+    isLight,
+    {
+      blur: 4,
+      color: baseSet.neutral(isLight ? 7 : 0).darken().alpha(0.2).hex(), // TODO used blend previously. Replace with something else
+      offset: [1, 2],
+    }
+  );
+  lowest.above = middle;
+
+  let highest = elevation(
+    resampleSet(
+      baseSet,
+      evenSamples(0.25, 1)
+    ),
+    isLight,
+    {
+      blur: 16,
+      color: baseSet.neutral(isLight ? 7 : 0).darken().alpha(0.2).hex(), // TODO used blend previously. Replace with something else
+      offset: [0, 2],
+    }
+  );
+  middle.above = highest;
+
+  let players = {
+    "0": player(baseSet.blue),
+    "1": player(baseSet.green),
+    "2": player(baseSet.magenta),
+    "3": player(baseSet.orange),
+    "4": player(baseSet.violet),
+    "5": player(baseSet.cyan),
+    "6": player(baseSet.red),
+    "7": player(baseSet.yellow),
+  }
+
+  return {
+    name,
+    isLight,
+
+    lowest,
+    middle,
+    highest,
+
+    players,
+  };
 }
 
 function player(ramp: Scale): Player {
-    return {
-        selection: ramp(0.5).alpha(0.24).hex(),
-        cursor: ramp(0.5).hex(),
-    }
+  return {
+    selection: ramp(0.5).alpha(0.24).hex(),
+    cursor: ramp(0.5).hex(),
+  }
 }
 
 function evenSamples(min: number, max: number): number[] {
-    return Array.from(Array(101).keys()).map((i) => (i / 100) * (max - min) + min);
+  return Array.from(Array(101).keys()).map((i) => (i / 100) * (max - min) + min);
 }
 
 function resampleSet(ramps: RampSet, samples: number[]): RampSet {
-    return {
-        neutral: resample(ramps.neutral, samples),
-        red: resample(ramps.red, samples),
-        orange: resample(ramps.orange, samples),
-        yellow: resample(ramps.yellow, samples),
-        green: resample(ramps.green, samples),
-        cyan: resample(ramps.cyan, samples),
-        blue: resample(ramps.blue, samples),
-        violet: resample(ramps.violet, samples),
-        magenta: resample(ramps.magenta, samples),
-    }
+  return {
+    neutral: resample(ramps.neutral, samples),
+    red: resample(ramps.red, samples),
+    orange: resample(ramps.orange, samples),
+    yellow: resample(ramps.yellow, samples),
+    green: resample(ramps.green, samples),
+    cyan: resample(ramps.cyan, samples),
+    blue: resample(ramps.blue, samples),
+    violet: resample(ramps.violet, samples),
+    magenta: resample(ramps.magenta, samples),
+  }
 }
 
 function resample(scale: Scale, samples: number[]): Scale {
-    let newColors = samples.map((sample) => scale(sample));
-    return chroma.scale(newColors);
+  let newColors = samples.map((sample) => scale(sample));
+  return chroma.scale(newColors);
 }
 
 function elevation(ramps: RampSet, isLight: boolean, shadow?: Shadow): Elevation {
-    return {
-        ramps,
+  return {
+    ramps,
 
-        bottom: bottomLayer(ramps, isLight),
-        middle: middleLayer(ramps, isLight),
-        top: topLayer(ramps, isLight),
+    bottom: bottomLayer(ramps, isLight),
+    middle: middleLayer(ramps, isLight),
+    top: topLayer(ramps, isLight),
 
-        shadow,
-    };
+    shadow,
+  };
 }
 
 function bottomLayer(ramps: RampSet, isLight: boolean): Layer {
-    let baseSet: StyleSet = {
-        default: {
-            background: ramps.neutral(0.15).hex(),
-            border: ramps.neutral(0.2).hex(),
-            foreground: ramps.neutral(1).hex(),
-        },
-        variant: {
-            background: ramps.neutral(0.1).hex(),
-            border: ramps.neutral(0.15).hex(),
-            foreground: ramps.neutral(0.7).hex(),
-        },
-        hovered: {
-            background: ramps.neutral(0.25).hex(),
-            border: ramps.neutral(1.0).hex(),
-            foreground: ramps.neutral(0.9).hex(),
-        },
-        pressed: {
-            background: ramps.neutral(0.55).hex(),
-            border: ramps.neutral(0.9).hex(),
-            foreground: ramps.neutral(0.9).hex(),
-        },
-        active: {
-            background: ramps.neutral(0.8).hex(),
-            border: ramps.neutral(0.8).hex(),
-            foreground: ramps.neutral(0.1).hex(),
-        },
-        disabled: {
-            background: ramps.neutral(0.25).hex(),
-            border: ramps.neutral(1).hex(),
-            foreground: ramps.neutral(0.9).hex(),
-        },
-    }
-
-    let onSet: StyleSet = {
-        default: {
-            background: ramps.neutral(0.15).hex(),
-            border: ramps.neutral(0.2).hex(),
-            foreground: ramps.neutral(1).hex(),
-        },
-        variant: {
-            background: ramps.neutral(0.1).hex(),
-            border: ramps.neutral(0.15).hex(),
-            foreground: ramps.neutral(0.7).hex(),
-        },
-        hovered: {
-            background: ramps.neutral(0.4).hex(),
-            border: ramps.neutral(1.0).hex(),
-            foreground: ramps.neutral(0.9).hex(),
-        },
-        pressed: {
-            background: ramps.neutral(0.55).hex(),
-            border: ramps.neutral(0.9).hex(),
-            foreground: ramps.neutral(0.9).hex(),
-        },
-        active: {
-            background: ramps.neutral(0.8).hex(),
-            border: ramps.neutral(0.8).hex(),
-            foreground: ramps.neutral(0.1).hex(),
-        },
-        disabled: {
-            background: ramps.neutral(0.25).hex(),
-            border: ramps.neutral(1).hex(),
-            foreground: ramps.neutral(0.9).hex(),
-        },
-    }
-
-    let defaultStyle: Style = {
-        background: ramps.neutral(0.2).hex(),
-        border: ramps.neutral(0.25).hex(),
-        foreground: ramps.neutral(1).hex(),
-    };
-
-    let variantStyle: Style = {
-        background: ramps.neutral(0.3).hex(),
-        border: ramps.neutral(0.6).hex(),
-        foreground: ramps.neutral(0.8).hex(),
-    };
-
-    let hoveredStyle: Style = {
-        background: ramps.neutral(0.1).hex(),
-        border: ramps.neutral(1.0).hex(),
-        foreground: ramps.neutral(0.9).hex(),
-    };
-
-    let pressedStyle: Style = {
-        background: ramps.neutral(0.55).hex(),
-        border: ramps.neutral(0.9).hex(),
-        foreground: ramps.neutral(0.9).hex(),
-    };
-
-    let activeStyle: Style = {
-        background: ramps.neutral(0.8).hex(),
-        border: ramps.neutral(0.8).hex(),
-        foreground: ramps.neutral(0.1).hex(),
-    };
-
-    let disabledStyle: Style = {
-        background: ramps.neutral(0.25).hex(),
-        border: ramps.neutral(1).hex(),
-        foreground: ramps.neutral(0.9).hex(),
-    };
-
-    let styleSet: StyleSet = {
-        default: defaultStyle,
-        variant: variantStyle,
-        hovered: hoveredStyle,
-        pressed: pressedStyle,
-        active: activeStyle,
-        disabled: disabledStyle,
-    };
-
-    return {
-        base: baseSet,
-        on: onSet,
-        info: styleSet,
-        positive: styleSet,
-        warning: styleSet,
-        negative: styleSet
-    };
+  let baseSet: StyleSet = {
+    default: {
+      background: ramps.neutral(0.15).hex(),
+      border: ramps.neutral(0.2).hex(),
+      foreground: ramps.neutral(1).hex(),
+    },
+    hovered: {
+      background: ramps.neutral(0.25).hex(),
+      border: ramps.neutral(1.0).hex(),
+      foreground: ramps.neutral(0.9).hex(),
+    },
+    pressed: {
+      background: ramps.neutral(0.55).hex(),
+      border: ramps.neutral(0.9).hex(),
+      foreground: ramps.neutral(0.9).hex(),
+    },
+    active: {
+      background: ramps.neutral(0.8).hex(),
+      border: ramps.neutral(0.8).hex(),
+      foreground: ramps.neutral(0.1).hex(),
+    },
+    disabled: {
+      background: ramps.neutral(0.25).hex(),
+      border: ramps.neutral(1).hex(),
+      foreground: ramps.neutral(0.9).hex(),
+    },
+  }
+
+  let onSet: StyleSet = {
+    default: {
+      background: ramps.neutral(0.15).hex(),
+      border: ramps.neutral(0.2).hex(),
+      foreground: ramps.neutral(1).hex(),
+    },
+    hovered: {
+      background: ramps.neutral(0.4).hex(),
+      border: ramps.neutral(1.0).hex(),
+      foreground: ramps.neutral(0.9).hex(),
+    },
+    pressed: {
+      background: ramps.neutral(0.55).hex(),
+      border: ramps.neutral(0.9).hex(),
+      foreground: ramps.neutral(0.9).hex(),
+    },
+    active: {
+      background: ramps.neutral(0.8).hex(),
+      border: ramps.neutral(0.8).hex(),
+      foreground: ramps.neutral(0.1).hex(),
+    },
+    disabled: {
+      background: ramps.neutral(0.25).hex(),
+      border: ramps.neutral(1).hex(),
+      foreground: ramps.neutral(0.9).hex(),
+    },
+  }
+
+  let defaultStyle: Style = {
+    background: ramps.neutral(0.2).hex(),
+    border: ramps.neutral(0.25).hex(),
+    foreground: ramps.neutral(1).hex(),
+  };
+
+  let variantStyle: Style = {
+    background: ramps.neutral(0.3).hex(),
+    border: ramps.neutral(0.6).hex(),
+    foreground: ramps.neutral(0.8).hex(),
+  };
+
+  let hoveredStyle: Style = {
+    background: ramps.neutral(0.1).hex(),
+    border: ramps.neutral(1.0).hex(),
+    foreground: ramps.neutral(0.9).hex(),
+  };
+
+  let pressedStyle: Style = {
+    background: ramps.neutral(0.55).hex(),
+    border: ramps.neutral(0.9).hex(),
+    foreground: ramps.neutral(0.9).hex(),
+  };
+
+  let activeStyle: Style = {
+    background: ramps.neutral(0.8).hex(),
+    border: ramps.neutral(0.8).hex(),
+    foreground: ramps.neutral(0.1).hex(),
+  };
+
+  let disabledStyle: Style = {
+    background: ramps.neutral(0.25).hex(),
+    border: ramps.neutral(1).hex(),
+    foreground: ramps.neutral(0.9).hex(),
+  };
+
+  let styleSet: StyleSet = {
+    default: defaultStyle,
+    hovered: hoveredStyle,
+    pressed: pressedStyle,
+    active: activeStyle,
+    disabled: disabledStyle,
+  };
+
+  return {
+    base: baseSet,
+    variant: styleSet,
+    on: onSet,
+    info: styleSet,
+    positive: styleSet,
+    warning: styleSet,
+    negative: styleSet
+  };
 }
 
 function middleLayer(ramps: RampSet, isLight: boolean): Layer {
-    let defaultStyle: Style = {
-        background: ramps.neutral(0.2).hex(),
-        border: ramps.neutral(0.4).hex(),
-        foreground: ramps.neutral(1).hex(),
-    };
-
-    let variantStyle: Style = {
-        background: ramps.neutral(0.3).hex(),
-        border: ramps.neutral(0.6).hex(),
-        foreground: ramps.neutral(0.8).hex(),
-    };
-
-    let hoveredStyle: Style = {
-        background: ramps.neutral(0.4).hex(),
-        border: ramps.neutral(1.0).hex(),
-        foreground: ramps.neutral(0.9).hex(),
-    };
-
-    let pressedStyle: Style = {
-        background: ramps.neutral(0.55).hex(),
-        border: ramps.neutral(0.9).hex(),
-        foreground: ramps.neutral(0.9).hex(),
-    };
-
-    let activeStyle: Style = {
-        background: ramps.neutral(0.8).hex(),
-        border: ramps.neutral(0.8).hex(),
-        foreground: ramps.neutral(0.1).hex(),
-    };
-
-    let disabledStyle: Style = {
-        background: ramps.neutral(0.25).hex(),
-        border: ramps.neutral(1).hex(),
-        foreground: ramps.neutral(0.9).hex(),
-    };
-
-    let baseSet: StyleSet = {
-        default: {
-            background: ramps.neutral(0.1).hex(),
-            border: ramps.neutral(0.2).hex(),
-            foreground: ramps.neutral(1).hex(),
-        },
-        variant: {
-            background: ramps.neutral(0.1).hex(),
-            border: ramps.neutral(0.15).hex(),
-            foreground: ramps.neutral(0.7).hex(),
-        },
-        hovered: {
-            background: ramps.neutral(0.4).hex(),
-            border: ramps.neutral(1.0).hex(),
-            foreground: ramps.neutral(0.9).hex(),
-        },
-        pressed: {
-            background: ramps.neutral(0.55).hex(),
-            border: ramps.neutral(0.9).hex(),
-            foreground: ramps.neutral(0.9).hex(),
-        },
-        active: {
-            background: ramps.neutral(0.8).hex(),
-            border: ramps.neutral(0.8).hex(),
-            foreground: ramps.neutral(0.1).hex(),
-        },
-        disabled: {
-            background: ramps.neutral(0.25).hex(),
-            border: ramps.neutral(1).hex(),
-            foreground: ramps.neutral(0.9).hex(),
-        },
-    }
-
-    let styleSet: StyleSet = {
-        default: defaultStyle,
-        variant: variantStyle,
-        hovered: hoveredStyle,
-        pressed: pressedStyle,
-        active: activeStyle,
-        disabled: disabledStyle,
-    };
-
-    return {
-        base: baseSet,
-        on: styleSet,
-        info: styleSet,
-        positive: styleSet,
-        warning: styleSet,
-        negative: styleSet
-    };
+  let defaultStyle: Style = {
+    background: ramps.neutral(0.2).hex(),
+    border: ramps.neutral(0.4).hex(),
+    foreground: ramps.neutral(1).hex(),
+  };
+
+  let variantStyle: Style = {
+    background: ramps.neutral(0.3).hex(),
+    border: ramps.neutral(0.6).hex(),
+    foreground: ramps.neutral(0.8).hex(),
+  };
+
+  let hoveredStyle: Style = {
+    background: ramps.neutral(0.4).hex(),
+    border: ramps.neutral(1.0).hex(),
+    foreground: ramps.neutral(0.9).hex(),
+  };
+
+  let pressedStyle: Style = {
+    background: ramps.neutral(0.55).hex(),
+    border: ramps.neutral(0.9).hex(),
+    foreground: ramps.neutral(0.9).hex(),
+  };
+
+  let activeStyle: Style = {
+    background: ramps.neutral(0.8).hex(),
+    border: ramps.neutral(0.8).hex(),
+    foreground: ramps.neutral(0.1).hex(),
+  };
+
+  let disabledStyle: Style = {
+    background: ramps.neutral(0.25).hex(),
+    border: ramps.neutral(1).hex(),
+    foreground: ramps.neutral(0.9).hex(),
+  };
+
+  let baseSet: StyleSet = {
+    default: {
+      background: ramps.neutral(0.1).hex(),
+      border: ramps.neutral(0.2).hex(),
+      foreground: ramps.neutral(1).hex(),
+    },
+    hovered: {
+      background: ramps.neutral(0.4).hex(),
+      border: ramps.neutral(1.0).hex(),
+      foreground: ramps.neutral(0.9).hex(),
+    },
+    pressed: {
+      background: ramps.neutral(0.55).hex(),
+      border: ramps.neutral(0.9).hex(),
+      foreground: ramps.neutral(0.9).hex(),
+    },
+    active: {
+      background: ramps.neutral(0.8).hex(),
+      border: ramps.neutral(0.8).hex(),
+      foreground: ramps.neutral(0.1).hex(),
+    },
+    disabled: {
+      background: ramps.neutral(0.25).hex(),
+      border: ramps.neutral(1).hex(),
+      foreground: ramps.neutral(0.9).hex(),
+    },
+  }
+
+  let styleSet: StyleSet = {
+    default: defaultStyle,
+    hovered: hoveredStyle,
+    pressed: pressedStyle,
+    active: activeStyle,
+    disabled: disabledStyle,
+  };
+
+  return {
+    base: baseSet,
+    variant: styleSet,
+    on: styleSet,
+    info: styleSet,
+    positive: styleSet,
+    warning: styleSet,
+    negative: styleSet
+  };
 }
 
 function topLayer(ramps: RampSet, isLight: boolean): Layer {
 
-    let baseSet: StyleSet = {
-        default: {
-            background: ramps.neutral(0).hex(),
-            border: ramps.neutral(0.2).hex(),
-            foreground: ramps.neutral(1).hex(),
-        },
-        variant: {
-            background: ramps.neutral(0.1).hex(),
-            border: ramps.neutral(0.15).hex(),
-            foreground: ramps.neutral(0.7).hex(),
-        },
-        hovered: {
-            background: ramps.neutral(0.4).hex(),
-            border: ramps.neutral(1.0).hex(),
-            foreground: ramps.neutral(0.9).hex(),
-        },
-        pressed: {
-            background: ramps.neutral(0.55).hex(),
-            border: ramps.neutral(0.9).hex(),
-            foreground: ramps.neutral(0.9).hex(),
-        },
-        active: {
-            background: ramps.neutral(0.8).hex(),
-            border: ramps.neutral(0.8).hex(),
-            foreground: ramps.neutral(0.1).hex(),
-        },
-        disabled: {
-            background: ramps.neutral(0.25).hex(),
-            border: ramps.neutral(1).hex(),
-            foreground: ramps.neutral(0.9).hex(),
-        },
-    }
-
-    let onSet: StyleSet = {
-        default: {
-            background: ramps.neutral(0.3).hex(),
-            border: ramps.neutral(0.5).hex(),
-            foreground: ramps.neutral(1).hex(),
-        },
-        variant: {
-            background: ramps.neutral(0.2).hex(),
-            border: ramps.neutral(0.6).hex(),
-            foreground: ramps.neutral(0.8).hex(),
-        },
-        hovered: {
-            background: ramps.neutral(0.4).hex(),
-            border: ramps.neutral(1.0).hex(),
-            foreground: ramps.neutral(0.9).hex(),
-        },
-        pressed: {
-            background: ramps.neutral(0.55).hex(),
-            border: ramps.neutral(0.9).hex(),
-            foreground: ramps.neutral(0.9).hex(),
-        },
-        active: {
-            background: ramps.neutral(0.8).hex(),
-            border: ramps.neutral(0.8).hex(),
-            foreground: ramps.neutral(0.1).hex(),
-        },
-        disabled: {
-            background: ramps.neutral(0.25).hex(),
-            border: ramps.neutral(1).hex(),
-            foreground: ramps.neutral(0.9).hex(),
-        },
-    }
-
-    let infoSet: StyleSet = {
-        default: {
-            background: ramps.blue(0.3).hex(),
-            border: ramps.blue(0.5).hex(),
-            foreground: ramps.blue(1).hex(),
-        },
-        variant: {
-            background: ramps.blue(0.2).hex(),
-            border: ramps.blue(0.6).hex(),
-            foreground: ramps.blue(0.8).hex(),
-        },
-        hovered: {
-            background: ramps.blue(0.4).hex(),
-            border: ramps.blue(1.0).hex(),
-            foreground: ramps.blue(0.9).hex(),
-        },
-        pressed: {
-            background: ramps.blue(0.55).hex(),
-            border: ramps.blue(0.9).hex(),
-            foreground: ramps.blue(0.9).hex(),
-        },
-        active: {
-            background: ramps.blue(0.8).hex(),
-            border: ramps.blue(0.8).hex(),
-            foreground: ramps.blue(0.1).hex(),
-        },
-        disabled: {
-            background: ramps.blue(0.25).hex(),
-            border: ramps.blue(1).hex(),
-            foreground: ramps.blue(0.9).hex(),
-        },
-    }
-
-    let positiveSet: StyleSet = {
-        default: {
-            background: ramps.green(0.3).hex(),
-            border: ramps.green(0.5).hex(),
-            foreground: ramps.green(1).hex(),
-        },
-        variant: {
-            background: ramps.green(0.2).hex(),
-            border: ramps.green(0.6).hex(),
-            foreground: ramps.green(0.8).hex(),
-        },
-        hovered: {
-            background: ramps.green(0.4).hex(),
-            border: ramps.green(1.0).hex(),
-            foreground: ramps.green(0.9).hex(),
-        },
-        pressed: {
-            background: ramps.green(0.55).hex(),
-            border: ramps.green(0.9).hex(),
-            foreground: ramps.green(0.9).hex(),
-        },
-        active: {
-            background: ramps.green(0.8).hex(),
-            border: ramps.green(0.8).hex(),
-            foreground: ramps.green(0.1).hex(),
-        },
-        disabled: {
-            background: ramps.green(0.25).hex(),
-            border: ramps.green(1).hex(),
-            foreground: ramps.green(0.9).hex(),
-        },
-    }
-
-    let warningSet: StyleSet = {
-        default: {
-            background: ramps.yellow(0.3).hex(),
-            border: ramps.yellow(0.5).hex(),
-            foreground: ramps.yellow(1).hex(),
-        },
-        variant: {
-            background: ramps.yellow(0.2).hex(),
-            border: ramps.yellow(0.6).hex(),
-            foreground: ramps.yellow(0.8).hex(),
-        },
-        hovered: {
-            background: ramps.yellow(0.4).hex(),
-            border: ramps.yellow(1.0).hex(),
-            foreground: ramps.yellow(0.9).hex(),
-        },
-        pressed: {
-            background: ramps.yellow(0.55).hex(),
-            border: ramps.yellow(0.9).hex(),
-            foreground: ramps.yellow(0.9).hex(),
-        },
-        active: {
-            background: ramps.yellow(0.8).hex(),
-            border: ramps.yellow(0.8).hex(),
-            foreground: ramps.yellow(0.1).hex(),
-        },
-        disabled: {
-            background: ramps.yellow(0.25).hex(),
-            border: ramps.yellow(1).hex(),
-            foreground: ramps.yellow(0.9).hex(),
-        },
-    }
-
-    let negativeSet: StyleSet = {
-        default: {
-            background: ramps.red(0.3).hex(),
-            border: ramps.red(0.5).hex(),
-            foreground: ramps.red(1).hex(),
-        },
-        variant: {
-            background: ramps.red(0.2).hex(),
-            border: ramps.red(0.6).hex(),
-            foreground: ramps.red(0.8).hex(),
-        },
-        hovered: {
-            background: ramps.red(0.4).hex(),
-            border: ramps.red(1.0).hex(),
-            foreground: ramps.red(0.9).hex(),
-        },
-        pressed: {
-            background: ramps.red(0.55).hex(),
-            border: ramps.red(0.9).hex(),
-            foreground: ramps.red(0.9).hex(),
-        },
-        active: {
-            background: ramps.red(0.8).hex(),
-            border: ramps.red(0.8).hex(),
-            foreground: ramps.red(0.1).hex(),
-        },
-        disabled: {
-            background: ramps.red(0.25).hex(),
-            border: ramps.red(1).hex(),
-            foreground: ramps.red(0.9).hex(),
-        },
-    }
-
-    let defaultStyle: Style = {
-        background: ramps.neutral(0).hex(),
-        border: ramps.neutral(0.7).hex(),
-        foreground: ramps.neutral(1).hex(),
-    };
-
-    let variantStyle: Style = {
-        background: ramps.neutral(0.2).hex(),
-        border: ramps.neutral(0.6).hex(),
-        foreground: ramps.neutral(0.8).hex(),
-    };
-
-    let hoveredStyle: Style = {
-        background: ramps.neutral(0.4).hex(),
-        border: ramps.neutral(1.0).hex(),
-        foreground: ramps.neutral(0.9).hex(),
-    };
-
-    let pressedStyle: Style = {
-        background: ramps.neutral(0.55).hex(),
-        border: ramps.neutral(0.9).hex(),
-        foreground: ramps.neutral(0.9).hex(),
-    };
-
-    let activeStyle: Style = {
-        background: ramps.neutral(0.8).hex(),
-        border: ramps.neutral(0.8).hex(),
-        foreground: ramps.neutral(0.1).hex(),
-    };
-
-    let disabledStyle: Style = {
-        background: ramps.neutral(0.25).hex(),
-        border: ramps.neutral(1).hex(),
-        foreground: ramps.neutral(0.9).hex(),
-    };
-
-    let styleSet: StyleSet = {
-        default: defaultStyle,
-        variant: variantStyle,
-        hovered: hoveredStyle,
-        pressed: pressedStyle,
-        active: activeStyle,
-        disabled: disabledStyle,
-    };
-
-    return {
-        base: baseSet,
-        on: onSet,
-        info: infoSet,
-        positive: positiveSet,
-        warning: warningSet,
-        negative: negativeSet
-    };
+  let baseSet: StyleSet = {
+    default: {
+      background: ramps.neutral(0).hex(),
+      border: ramps.neutral(0.2).hex(),
+      foreground: ramps.neutral(1).hex(),
+    },
+    hovered: {
+      background: ramps.neutral(0.4).hex(),
+      border: ramps.neutral(1.0).hex(),
+      foreground: ramps.neutral(0.9).hex(),
+    },
+    pressed: {
+      background: ramps.neutral(0.55).hex(),
+      border: ramps.neutral(0.9).hex(),
+      foreground: ramps.neutral(0.9).hex(),
+    },
+    active: {
+      background: ramps.neutral(0.8).hex(),
+      border: ramps.neutral(0.8).hex(),
+      foreground: ramps.neutral(0.1).hex(),
+    },
+    disabled: {
+      background: ramps.neutral(0.25).hex(),
+      border: ramps.neutral(1).hex(),
+      foreground: ramps.neutral(0.9).hex(),
+    },
+  }
+
+  let onSet: StyleSet = {
+    default: {
+      background: ramps.neutral(0.3).hex(),
+      border: ramps.neutral(0.5).hex(),
+      foreground: ramps.neutral(1).hex(),
+    },
+    hovered: {
+      background: ramps.neutral(0.4).hex(),
+      border: ramps.neutral(1.0).hex(),
+      foreground: ramps.neutral(0.9).hex(),
+    },
+    pressed: {
+      background: ramps.neutral(0.55).hex(),
+      border: ramps.neutral(0.9).hex(),
+      foreground: ramps.neutral(0.9).hex(),
+    },
+    active: {
+      background: ramps.neutral(0.8).hex(),
+      border: ramps.neutral(0.8).hex(),
+      foreground: ramps.neutral(0.1).hex(),
+    },
+    disabled: {
+      background: ramps.neutral(0.25).hex(),
+      border: ramps.neutral(1).hex(),
+      foreground: ramps.neutral(0.9).hex(),
+    },
+  }
+
+  let infoSet: StyleSet = {
+    default: {
+      background: ramps.blue(0.3).hex(),
+      border: ramps.blue(0.5).hex(),
+      foreground: ramps.blue(1).hex(),
+    },
+    hovered: {
+      background: ramps.blue(0.4).hex(),
+      border: ramps.blue(1.0).hex(),
+      foreground: ramps.blue(0.9).hex(),
+    },
+    pressed: {
+      background: ramps.blue(0.55).hex(),
+      border: ramps.blue(0.9).hex(),
+      foreground: ramps.blue(0.9).hex(),
+    },
+    active: {
+      background: ramps.blue(0.8).hex(),
+      border: ramps.blue(0.8).hex(),
+      foreground: ramps.blue(0.1).hex(),
+    },
+    disabled: {
+      background: ramps.blue(0.25).hex(),
+      border: ramps.blue(1).hex(),
+      foreground: ramps.blue(0.9).hex(),
+    },
+  }
+
+  let positiveSet: StyleSet = {
+    default: {
+      background: ramps.green(0.3).hex(),
+      border: ramps.green(0.5).hex(),
+      foreground: ramps.green(1).hex(),
+    },
+    hovered: {
+      background: ramps.green(0.4).hex(),
+      border: ramps.green(1.0).hex(),
+      foreground: ramps.green(0.9).hex(),
+    },
+    pressed: {
+      background: ramps.green(0.55).hex(),
+      border: ramps.green(0.9).hex(),
+      foreground: ramps.green(0.9).hex(),
+    },
+    active: {
+      background: ramps.green(0.8).hex(),
+      border: ramps.green(0.8).hex(),
+      foreground: ramps.green(0.1).hex(),
+    },
+    disabled: {
+      background: ramps.green(0.25).hex(),
+      border: ramps.green(1).hex(),
+      foreground: ramps.green(0.9).hex(),
+    },
+  }
+
+  let warningSet: StyleSet = {
+    default: {
+      background: ramps.yellow(0.3).hex(),
+      border: ramps.yellow(0.5).hex(),
+      foreground: ramps.yellow(1).hex(),
+    },
+    hovered: {
+      background: ramps.yellow(0.4).hex(),
+      border: ramps.yellow(1.0).hex(),
+      foreground: ramps.yellow(0.9).hex(),
+    },
+    pressed: {
+      background: ramps.yellow(0.55).hex(),
+      border: ramps.yellow(0.9).hex(),
+      foreground: ramps.yellow(0.9).hex(),
+    },
+    active: {
+      background: ramps.yellow(0.8).hex(),
+      border: ramps.yellow(0.8).hex(),
+      foreground: ramps.yellow(0.1).hex(),
+    },
+    disabled: {
+      background: ramps.yellow(0.25).hex(),
+      border: ramps.yellow(1).hex(),
+      foreground: ramps.yellow(0.9).hex(),
+    },
+  }
+
+  let negativeSet: StyleSet = {
+    default: {
+      background: ramps.red(0.3).hex(),
+      border: ramps.red(0.5).hex(),
+      foreground: ramps.red(1).hex(),
+    },
+    hovered: {
+      background: ramps.red(0.4).hex(),
+      border: ramps.red(1.0).hex(),
+      foreground: ramps.red(0.9).hex(),
+    },
+    pressed: {
+      background: ramps.red(0.55).hex(),
+      border: ramps.red(0.9).hex(),
+      foreground: ramps.red(0.9).hex(),
+    },
+    active: {
+      background: ramps.red(0.8).hex(),
+      border: ramps.red(0.8).hex(),
+      foreground: ramps.red(0.1).hex(),
+    },
+    disabled: {
+      background: ramps.red(0.25).hex(),
+      border: ramps.red(1).hex(),
+      foreground: ramps.red(0.9).hex(),
+    },
+  }
+
+  let defaultStyle: Style = {
+    background: ramps.neutral(0).hex(),
+    border: ramps.neutral(0.7).hex(),
+    foreground: ramps.neutral(1).hex(),
+  };
+
+  let hoveredStyle: Style = {
+    background: ramps.neutral(0.4).hex(),
+    border: ramps.neutral(1.0).hex(),
+    foreground: ramps.neutral(0.9).hex(),
+  };
+
+  let pressedStyle: Style = {
+    background: ramps.neutral(0.55).hex(),
+    border: ramps.neutral(0.9).hex(),
+    foreground: ramps.neutral(0.9).hex(),
+  };
+
+  let activeStyle: Style = {
+    background: ramps.neutral(0.8).hex(),
+    border: ramps.neutral(0.8).hex(),
+    foreground: ramps.neutral(0.1).hex(),
+  };
+
+  let disabledStyle: Style = {
+    background: ramps.neutral(0.25).hex(),
+    border: ramps.neutral(1).hex(),
+    foreground: ramps.neutral(0.9).hex(),
+  };
+
+  let styleSet: StyleSet = {
+    default: defaultStyle,
+    hovered: hoveredStyle,
+    pressed: pressedStyle,
+    active: activeStyle,
+    disabled: disabledStyle,
+  };
+
+  return {
+    base: baseSet,
+    variant: styleSet,
+    on: onSet,
+    info: infoSet,
+    positive: positiveSet,
+    warning: warningSet,
+    negative: negativeSet
+  };
 }
\ No newline at end of file

From 96f9ee784de38d97751c383818b875c806c946fe Mon Sep 17 00:00:00 2001
From: K Simmons <keith@zed.dev>
Date: Thu, 22 Sep 2022 14:25:15 -0700
Subject: [PATCH 08/50] add more states to the theme testbench

---
 crates/theme_testbench/src/theme_testbench.rs |  22 +++-
 styles/src/styleTree/components.ts            |  15 +++
 styles/src/styleTree/workspace.ts             |   2 +-
 styles/src/themes/common/ramps.ts             | 101 +++++++++++-------
 4 files changed, 96 insertions(+), 44 deletions(-)

diff --git a/crates/theme_testbench/src/theme_testbench.rs b/crates/theme_testbench/src/theme_testbench.rs
index ce24dbc34ac7f7e6492533583e46b722c669b64a..9ff90c4427c3bb8f0bfe44f3977928b634fec88a 100644
--- a/crates/theme_testbench/src/theme_testbench.rs
+++ b/crates/theme_testbench/src/theme_testbench.rs
@@ -148,7 +148,7 @@ impl ThemeTestbench {
     ) -> Flex {
         Flex::row()
             .with_child(Self::render_button(
-                set_index * 4,
+                set_index * 6,
                 layer_index,
                 set_name,
                 &style_set,
@@ -156,7 +156,23 @@ impl ThemeTestbench {
                 cx,
             ))
             .with_child(Self::render_button(
-                set_index * 4 + 1,
+                set_index * 6 + 1,
+                layer_index,
+                "hovered",
+                &style_set,
+                Some(|style_set| &style_set.hovered),
+                cx,
+            ))
+            .with_child(Self::render_button(
+                set_index * 6 + 2,
+                layer_index,
+                "pressed",
+                &style_set,
+                Some(|style_set| &style_set.pressed),
+                cx,
+            ))
+            .with_child(Self::render_button(
+                set_index * 6 + 3,
                 layer_index,
                 "active",
                 &style_set,
@@ -164,7 +180,7 @@ impl ThemeTestbench {
                 cx,
             ))
             .with_child(Self::render_button(
-                set_index * 4 + 2,
+                set_index * 6 + 4,
                 layer_index,
                 "disabled",
                 &style_set,
diff --git a/styles/src/styleTree/components.ts b/styles/src/styleTree/components.ts
index f0c7f519987ae33780a41f6f340d93a6ff7a5e87..b6fcb35e4818d2f38a86729a18f1878be1090504 100644
--- a/styles/src/styleTree/components.ts
+++ b/styles/src/styleTree/components.ts
@@ -85,6 +85,14 @@ export function text(
 ) {
   let style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties);
   let size = fontSizes[properties?.size || "sm"];
+
+  if (typeof styleSetStyleOrProperties === "object") {
+    properties = styleSetStyleOrProperties;
+  }
+  if (typeof styleOrProperties === "object") {
+    properties = styleOrProperties;
+  }
+
   return {
     family: fontFamilies[fontFamily],
     color: style.foreground,
@@ -141,6 +149,13 @@ export function border(
 ): Border {
   let style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties);
 
+  if (typeof styleSetStyleOrProperties === "object") {
+    properties = styleSetStyleOrProperties;
+  }
+  if (typeof styleOrProperties === "object") {
+    properties = styleOrProperties;
+  }
+
   return {
     color: style.border,
     width: 1,
diff --git a/styles/src/styleTree/workspace.ts b/styles/src/styleTree/workspace.ts
index 34108981e1211a072cb19a9e450482bcf9dbd570..fdeac5689ffc9132d9e35f4d12aecd3bef9f7dad 100644
--- a/styles/src/styleTree/workspace.ts
+++ b/styles/src/styleTree/workspace.ts
@@ -118,7 +118,7 @@ export default function workspace(colorScheme: ColorScheme) {
     toolbar: {
       height: 34,
       background: background(elevation.top),
-      border: border(elevation.top, "variant", { bottom: true }),
+      border: border(elevation.top, { bottom: true }),
       itemSpacing: 8,
       navButton: {
         color: foreground(elevation.top, "on"),
diff --git a/styles/src/themes/common/ramps.ts b/styles/src/themes/common/ramps.ts
index 595bc3a07eda09bb8656fa7f277054a58b1f27d4..c0aee44363268d24b0bc233773986fb964a39aaf 100644
--- a/styles/src/themes/common/ramps.ts
+++ b/styles/src/themes/common/ramps.ts
@@ -1,5 +1,5 @@
 import chroma, { Color, Scale } from "chroma-js";
-import { ColorScheme, Elevation, Layer, Player, RampSet, Shadow, Style, StyleSet } from "./colorScheme";
+import { ColorScheme, Elevation, Layer, Player, RampSet, Shadow, Style, Styles, StyleSet } from "./colorScheme";
 
 export function colorRamp(color: Color): Scale {
   let hue = color.hsl()[0];
@@ -151,35 +151,68 @@ function elevation(ramps: RampSet, isLight: boolean, shadow?: Shadow): Elevation
   };
 }
 
-function bottomLayer(ramps: RampSet, isLight: boolean): Layer {
-  let baseSet: StyleSet = {
-    default: {
-      background: ramps.neutral(0.15).hex(),
-      border: ramps.neutral(0.2).hex(),
-      foreground: ramps.neutral(1).hex(),
-    },
-    hovered: {
-      background: ramps.neutral(0.25).hex(),
-      border: ramps.neutral(1.0).hex(),
-      foreground: ramps.neutral(0.9).hex(),
-    },
-    pressed: {
-      background: ramps.neutral(0.55).hex(),
-      border: ramps.neutral(0.9).hex(),
-      foreground: ramps.neutral(0.9).hex(),
-    },
-    active: {
-      background: ramps.neutral(0.8).hex(),
-      border: ramps.neutral(0.8).hex(),
-      foreground: ramps.neutral(0.1).hex(),
-    },
-    disabled: {
-      background: ramps.neutral(0.25).hex(),
-      border: ramps.neutral(1).hex(),
-      foreground: ramps.neutral(0.9).hex(),
-    },
+interface StyleColors {
+  default: number | Color,
+  hovered: number | Color,
+  pressed: number | Color,
+  active: number | Color,
+  disabled: number | Color,
+}
+function buildStyleSet(ramp: Scale, styleDefinitions: {
+  background: StyleColors,
+  border: StyleColors,
+  foreground: StyleColors,
+}): StyleSet {
+  function colorString(indexOrColor: number | Color): string {
+    if (typeof indexOrColor === "number") {
+      return ramp(indexOrColor).hex();
+    } else {
+      return indexOrColor.hex();
+    }
+  }
+
+  function buildStyle(style: Styles): Style {
+    return {
+      background: colorString(styleDefinitions.background[style]),
+      border: colorString(styleDefinitions.border[style]),
+      foreground: colorString(styleDefinitions.foreground[style]),
+    }
   }
 
+  return {
+    default: buildStyle("default"),
+    hovered: buildStyle("hovered"),
+    pressed: buildStyle("pressed"),
+    active: buildStyle("active"),
+    disabled: buildStyle("disabled"),
+  }
+}
+
+function bottomLayer(ramps: RampSet, isLight: boolean): Layer {
+  let baseSet = buildStyleSet(ramps.neutral, {
+    background: {
+      default: 0.15,
+      hovered: 0.25,
+      pressed: 0.55,
+      active: 0.8,
+      disabled: 0.25,
+    },
+    border: {
+      default: 0.2,
+      hovered: 1.0,
+      pressed: 0.9,
+      active: 0.8,
+      disabled: 1,
+    },
+    foreground: {
+      default: 1,
+      hovered: 0.9,
+      pressed: 0.9,
+      active: 0.1,
+      disabled: 0.9,
+    },
+  });
+
   let onSet: StyleSet = {
     default: {
       background: ramps.neutral(0.15).hex(),
@@ -214,12 +247,6 @@ function bottomLayer(ramps: RampSet, isLight: boolean): Layer {
     foreground: ramps.neutral(1).hex(),
   };
 
-  let variantStyle: Style = {
-    background: ramps.neutral(0.3).hex(),
-    border: ramps.neutral(0.6).hex(),
-    foreground: ramps.neutral(0.8).hex(),
-  };
-
   let hoveredStyle: Style = {
     background: ramps.neutral(0.1).hex(),
     border: ramps.neutral(1.0).hex(),
@@ -270,12 +297,6 @@ function middleLayer(ramps: RampSet, isLight: boolean): Layer {
     foreground: ramps.neutral(1).hex(),
   };
 
-  let variantStyle: Style = {
-    background: ramps.neutral(0.3).hex(),
-    border: ramps.neutral(0.6).hex(),
-    foreground: ramps.neutral(0.8).hex(),
-  };
-
   let hoveredStyle: Style = {
     background: ramps.neutral(0.4).hex(),
     border: ramps.neutral(1.0).hex(),

From c2ffc7086cdda650db2a2c382295949e27aed6d5 Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Mon, 26 Sep 2022 15:07:11 -0400
Subject: [PATCH 09/50] Minor styletree fixes

---
 styles/src/styleTree/projectPanel.ts  | 6 +++---
 styles/src/styleTree/search.ts        | 2 +-
 styles/src/themes/common/styleSets.ts | 2 --
 3 files changed, 4 insertions(+), 6 deletions(-)
 delete mode 100644 styles/src/themes/common/styleSets.ts

diff --git a/styles/src/styleTree/projectPanel.ts b/styles/src/styleTree/projectPanel.ts
index c22be76b638bcf05c1cd4bdebe37473cddec7603..437f76f51df511f42582124c5bf0fc636e4c2106 100644
--- a/styles/src/styleTree/projectPanel.ts
+++ b/styles/src/styleTree/projectPanel.ts
@@ -9,7 +9,7 @@ export default function projectPanel(colorScheme: ColorScheme) {
     indentWidth: 8,
     entry: {
       height: 24,
-      iconColor: foreground(layer, "on"),
+      iconColor: foreground(layer, "variant"),
       iconSize: 8,
       iconSpacing: 8,
       text: text(layer, "mono", "on", { size: "sm" }),
@@ -17,11 +17,11 @@ export default function projectPanel(colorScheme: ColorScheme) {
         background: background(layer, "on", "hovered"),
       },
       active: {
-        background: background(layer, "active"),
+        background: background(layer, "info", "active"),
         text: text(layer, "mono", "active", { size: "sm" }),
       },
       activeHover: {
-        background: background(layer, "hovered"),
+        background: background(layer, "info", "hovered"),
         text: text(layer, "mono", "active", { size: "sm" }),
       },
     },
diff --git a/styles/src/styleTree/search.ts b/styles/src/styleTree/search.ts
index 3844c01334061d904d26c8229d27193883a736c7..98c5b351843a52749833c629b51d4319cbb57a49 100644
--- a/styles/src/styleTree/search.ts
+++ b/styles/src/styleTree/search.ts
@@ -12,7 +12,7 @@ export default function search(colorScheme: ColorScheme) {
     maxWidth: 500,
     placeholderText: text(layer, "mono", "disabled"),
     selection: colorScheme.players[0],
-    text: text(layer, "mono", "active"),
+    text: text(layer, "mono", "default"),
     border: border(layer),
     margin: {
       right: 12,
diff --git a/styles/src/themes/common/styleSets.ts b/styles/src/themes/common/styleSets.ts
deleted file mode 100644
index 2732602bc925440db11d36c9bea8460725647de1..0000000000000000000000000000000000000000
--- a/styles/src/themes/common/styleSets.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export const top = {
-}
\ No newline at end of file

From c9786fe464c119430c98fa9ac1770ec549b0883c Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Mon, 26 Sep 2022 15:07:24 -0400
Subject: [PATCH 10/50] Create a baseline for ramps to start tweaking from

---
 styles/src/themes/common/ramps.ts | 774 ++++++++++++++++++------------
 1 file changed, 458 insertions(+), 316 deletions(-)

diff --git a/styles/src/themes/common/ramps.ts b/styles/src/themes/common/ramps.ts
index c0aee44363268d24b0bc233773986fb964a39aaf..1bc9f8329968826496ff4531fe0f770907c7b422 100644
--- a/styles/src/themes/common/ramps.ts
+++ b/styles/src/themes/common/ramps.ts
@@ -191,394 +191,536 @@ function buildStyleSet(ramp: Scale, styleDefinitions: {
 function bottomLayer(ramps: RampSet, isLight: boolean): Layer {
   let baseSet = buildStyleSet(ramps.neutral, {
     background: {
-      default: 0.15,
-      hovered: 0.25,
-      pressed: 0.55,
-      active: 0.8,
-      disabled: 0.25,
+      default: 0.16,
+      hovered: 0.31,
+      pressed: 0.41,
+      active: 1,
+      disabled: 0.16,
     },
     border: {
       default: 0.2,
-      hovered: 1.0,
-      pressed: 0.9,
-      active: 0.8,
-      disabled: 1,
+      hovered: 0.2,
+      pressed: 0.2,
+      active: 0.5,
+      disabled: 0.2,
     },
     foreground: {
       default: 1,
-      hovered: 0.9,
-      pressed: 0.9,
-      active: 0.1,
-      disabled: 0.9,
+      hovered: 1,
+      pressed: 1,
+      active: 0,
+      disabled: 0.4,
     },
   });
 
-  let onSet: StyleSet = {
-    default: {
-      background: ramps.neutral(0.15).hex(),
-      border: ramps.neutral(0.2).hex(),
-      foreground: ramps.neutral(1).hex(),
+  let variantSet = buildStyleSet(ramps.neutral, {
+    background: {
+      default: 0.16,
+      hovered: 0.31,
+      pressed: 0.41,
+      active: 1,
+      disabled: 0.16,
     },
-    hovered: {
-      background: ramps.neutral(0.4).hex(),
-      border: ramps.neutral(1.0).hex(),
-      foreground: ramps.neutral(0.9).hex(),
+    border: {
+      default: 0.2,
+      hovered: 0.2,
+      pressed: 0.2,
+      active: 0.5,
+      disabled: 0.2,
     },
-    pressed: {
-      background: ramps.neutral(0.55).hex(),
-      border: ramps.neutral(0.9).hex(),
-      foreground: ramps.neutral(0.9).hex(),
+    foreground: {
+      default: 0.7,
+      hovered: 0.7,
+      pressed: 0.7,
+      active: 0,
+      disabled: 0.4,
     },
-    active: {
-      background: ramps.neutral(0.8).hex(),
-      border: ramps.neutral(0.8).hex(),
-      foreground: ramps.neutral(0.1).hex(),
+  });
+
+  let onSet = buildStyleSet(ramps.neutral, {
+    background: {
+      default: 0.08,
+      hovered: 0.23,
+      pressed: 0.33,
+      active: 1,
+      disabled: 0.08,
     },
-    disabled: {
-      background: ramps.neutral(0.25).hex(),
-      border: ramps.neutral(1).hex(),
-      foreground: ramps.neutral(0.9).hex(),
+    border: {
+      default: 0.2,
+      hovered: 0.2,
+      pressed: 0.2,
+      active: 0.5,
+      disabled: 0.2,
     },
-  }
-
-  let defaultStyle: Style = {
-    background: ramps.neutral(0.2).hex(),
-    border: ramps.neutral(0.25).hex(),
-    foreground: ramps.neutral(1).hex(),
-  };
-
-  let hoveredStyle: Style = {
-    background: ramps.neutral(0.1).hex(),
-    border: ramps.neutral(1.0).hex(),
-    foreground: ramps.neutral(0.9).hex(),
-  };
+    foreground: {
+      default: 1,
+      hovered: 1,
+      pressed: 1,
+      active: 0,
+      disabled: 0.4,
+    },
+  });
 
-  let pressedStyle: Style = {
-    background: ramps.neutral(0.55).hex(),
-    border: ramps.neutral(0.9).hex(),
-    foreground: ramps.neutral(0.9).hex(),
-  };
+  let infoSet = buildStyleSet(ramps.blue, {
+    background: {
+      default: 0,
+      hovered: 0.15,
+      pressed: 0.25,
+      active: 1,
+      disabled: 0,
+    },
+    border: {
+      default: 0.2,
+      hovered: 0.2,
+      pressed: 0.2,
+      active: 0.5,
+      disabled: 0.2,
+    },
+    foreground: {
+      default: 1,
+      hovered: 1,
+      pressed: 1,
+      active: 0,
+      disabled: 0.4,
+    },
+  });
 
-  let activeStyle: Style = {
-    background: ramps.neutral(0.8).hex(),
-    border: ramps.neutral(0.8).hex(),
-    foreground: ramps.neutral(0.1).hex(),
-  };
+  let positiveSet = buildStyleSet(ramps.green, {
+    background: {
+      default: 0,
+      hovered: 0.15,
+      pressed: 0.25,
+      active: 1,
+      disabled: 0,
+    },
+    border: {
+      default: 0.2,
+      hovered: 0.2,
+      pressed: 0.2,
+      active: 0.5,
+      disabled: 0.2,
+    },
+    foreground: {
+      default: 1,
+      hovered: 1,
+      pressed: 1,
+      active: 0,
+      disabled: 0.4,
+    },
+  });
 
-  let disabledStyle: Style = {
-    background: ramps.neutral(0.25).hex(),
-    border: ramps.neutral(1).hex(),
-    foreground: ramps.neutral(0.9).hex(),
-  };
+  let warningSet = buildStyleSet(ramps.yellow, {
+    background: {
+      default: 0,
+      hovered: 0.15,
+      pressed: 0.25,
+      active: 1,
+      disabled: 0,
+    },
+    border: {
+      default: 0.2,
+      hovered: 0.2,
+      pressed: 0.2,
+      active: 0.5,
+      disabled: 0.2,
+    },
+    foreground: {
+      default: 1,
+      hovered: 1,
+      pressed: 1,
+      active: 0,
+      disabled: 0.4,
+    },
+  });
 
-  let styleSet: StyleSet = {
-    default: defaultStyle,
-    hovered: hoveredStyle,
-    pressed: pressedStyle,
-    active: activeStyle,
-    disabled: disabledStyle,
-  };
+  let negativeSet = buildStyleSet(ramps.red, {
+    background: {
+      default: 0,
+      hovered: 0.15,
+      pressed: 0.25,
+      active: 1,
+      disabled: 0,
+    },
+    border: {
+      default: 0.2,
+      hovered: 0.2,
+      pressed: 0.2,
+      active: 0.5,
+      disabled: 0.2,
+    },
+    foreground: {
+      default: 1,
+      hovered: 1,
+      pressed: 1,
+      active: 0,
+      disabled: 0.4,
+    },
+  });
 
   return {
     base: baseSet,
-    variant: styleSet,
+    variant: variantSet,
     on: onSet,
-    info: styleSet,
-    positive: styleSet,
-    warning: styleSet,
-    negative: styleSet
+    info: infoSet,
+    positive: positiveSet,
+    warning: warningSet,
+    negative: negativeSet
   };
 }
 
 function middleLayer(ramps: RampSet, isLight: boolean): Layer {
-  let defaultStyle: Style = {
-    background: ramps.neutral(0.2).hex(),
-    border: ramps.neutral(0.4).hex(),
-    foreground: ramps.neutral(1).hex(),
-  };
-
-  let hoveredStyle: Style = {
-    background: ramps.neutral(0.4).hex(),
-    border: ramps.neutral(1.0).hex(),
-    foreground: ramps.neutral(0.9).hex(),
-  };
+  let baseSet = buildStyleSet(ramps.neutral, {
+    background: {
+      default: 0.08,
+      hovered: 0.23,
+      pressed: 0.33,
+      active: 1,
+      disabled: 0.08,
+    },
+    border: {
+      default: 0.2,
+      hovered: 0.2,
+      pressed: 0.2,
+      active: 0.5,
+      disabled: 0.2,
+    },
+    foreground: {
+      default: 1,
+      hovered: 1,
+      pressed: 1,
+      active: 0,
+      disabled: 0.4,
+    },
+  });
 
-  let pressedStyle: Style = {
-    background: ramps.neutral(0.55).hex(),
-    border: ramps.neutral(0.9).hex(),
-    foreground: ramps.neutral(0.9).hex(),
-  };
+  let variantSet = buildStyleSet(ramps.neutral, {
+    background: {
+      default: 0.08,
+      hovered: 0.23,
+      pressed: 0.33,
+      active: 1,
+      disabled: 0.08,
+    },
+    border: {
+      default: 0.2,
+      hovered: 0.2,
+      pressed: 0.2,
+      active: 0.5,
+      disabled: 0.2,
+    },
+    foreground: {
+      default: 0.7,
+      hovered: 0.7,
+      pressed: 0.7,
+      active: 0,
+      disabled: 0.4,
+    },
+  });
 
-  let activeStyle: Style = {
-    background: ramps.neutral(0.8).hex(),
-    border: ramps.neutral(0.8).hex(),
-    foreground: ramps.neutral(0.1).hex(),
-  };
+  let onSet = buildStyleSet(ramps.neutral, {
+    background: {
+      default: 0,
+      hovered: 0.15,
+      pressed: 0.25,
+      active: 1,
+      disabled: 0,
+    },
+    border: {
+      default: 0.2,
+      hovered: 0.2,
+      pressed: 0.2,
+      active: 0.5,
+      disabled: 0.2,
+    },
+    foreground: {
+      default: 1,
+      hovered: 1,
+      pressed: 1,
+      active: 0,
+      disabled: 0.4,
+    },
+  });
 
-  let disabledStyle: Style = {
-    background: ramps.neutral(0.25).hex(),
-    border: ramps.neutral(1).hex(),
-    foreground: ramps.neutral(0.9).hex(),
-  };
+  let infoSet = buildStyleSet(ramps.blue, {
+    background: {
+      default: 0,
+      hovered: 0.15,
+      pressed: 0.25,
+      active: 1,
+      disabled: 0,
+    },
+    border: {
+      default: 0.2,
+      hovered: 0.2,
+      pressed: 0.2,
+      active: 0.5,
+      disabled: 0.2,
+    },
+    foreground: {
+      default: 1,
+      hovered: 1,
+      pressed: 1,
+      active: 0,
+      disabled: 0.4,
+    },
+  });
 
-  let baseSet: StyleSet = {
-    default: {
-      background: ramps.neutral(0.1).hex(),
-      border: ramps.neutral(0.2).hex(),
-      foreground: ramps.neutral(1).hex(),
+  let positiveSet = buildStyleSet(ramps.green, {
+    background: {
+      default: 0,
+      hovered: 0.15,
+      pressed: 0.25,
+      active: 1,
+      disabled: 0,
     },
-    hovered: {
-      background: ramps.neutral(0.4).hex(),
-      border: ramps.neutral(1.0).hex(),
-      foreground: ramps.neutral(0.9).hex(),
+    border: {
+      default: 0.2,
+      hovered: 0.2,
+      pressed: 0.2,
+      active: 0.5,
+      disabled: 0.2,
     },
-    pressed: {
-      background: ramps.neutral(0.55).hex(),
-      border: ramps.neutral(0.9).hex(),
-      foreground: ramps.neutral(0.9).hex(),
+    foreground: {
+      default: 1,
+      hovered: 1,
+      pressed: 1,
+      active: 0,
+      disabled: 0.4,
     },
-    active: {
-      background: ramps.neutral(0.8).hex(),
-      border: ramps.neutral(0.8).hex(),
-      foreground: ramps.neutral(0.1).hex(),
+  });
+
+  let warningSet = buildStyleSet(ramps.yellow, {
+    background: {
+      default: 0,
+      hovered: 0.15,
+      pressed: 0.25,
+      active: 1,
+      disabled: 0,
     },
-    disabled: {
-      background: ramps.neutral(0.25).hex(),
-      border: ramps.neutral(1).hex(),
-      foreground: ramps.neutral(0.9).hex(),
+    border: {
+      default: 0.2,
+      hovered: 0.2,
+      pressed: 0.2,
+      active: 0.5,
+      disabled: 0.2,
     },
-  }
+    foreground: {
+      default: 1,
+      hovered: 1,
+      pressed: 1,
+      active: 0,
+      disabled: 0.4,
+    },
+  });
 
-  let styleSet: StyleSet = {
-    default: defaultStyle,
-    hovered: hoveredStyle,
-    pressed: pressedStyle,
-    active: activeStyle,
-    disabled: disabledStyle,
-  };
+  let negativeSet = buildStyleSet(ramps.red, {
+    background: {
+      default: 0,
+      hovered: 0.15,
+      pressed: 0.25,
+      active: 1,
+      disabled: 0,
+    },
+    border: {
+      default: 0.2,
+      hovered: 0.2,
+      pressed: 0.2,
+      active: 0.5,
+      disabled: 0.2,
+    },
+    foreground: {
+      default: 1,
+      hovered: 1,
+      pressed: 1,
+      active: 0,
+      disabled: 0.4,
+    },
+  });
 
   return {
     base: baseSet,
-    variant: styleSet,
-    on: styleSet,
-    info: styleSet,
-    positive: styleSet,
-    warning: styleSet,
-    negative: styleSet
+    variant: variantSet,
+    on: onSet,
+    info: infoSet,
+    positive: positiveSet,
+    warning: warningSet,
+    negative: negativeSet
   };
 }
 
 function topLayer(ramps: RampSet, isLight: boolean): Layer {
 
-  let baseSet: StyleSet = {
-    default: {
-      background: ramps.neutral(0).hex(),
-      border: ramps.neutral(0.2).hex(),
-      foreground: ramps.neutral(1).hex(),
-    },
-    hovered: {
-      background: ramps.neutral(0.4).hex(),
-      border: ramps.neutral(1.0).hex(),
-      foreground: ramps.neutral(0.9).hex(),
-    },
-    pressed: {
-      background: ramps.neutral(0.55).hex(),
-      border: ramps.neutral(0.9).hex(),
-      foreground: ramps.neutral(0.9).hex(),
+  let baseSet = buildStyleSet(ramps.neutral, {
+    background: {
+      default: 0,
+      hovered: 0.15,
+      pressed: 0.25,
+      active: 1,
+      disabled: 0,
     },
-    active: {
-      background: ramps.neutral(0.8).hex(),
-      border: ramps.neutral(0.8).hex(),
-      foreground: ramps.neutral(0.1).hex(),
+    border: {
+      default: 0.2,
+      hovered: 0.2,
+      pressed: 0.2,
+      active: 0.5,
+      disabled: 0.2,
     },
-    disabled: {
-      background: ramps.neutral(0.25).hex(),
-      border: ramps.neutral(1).hex(),
-      foreground: ramps.neutral(0.9).hex(),
+    foreground: {
+      default: 1,
+      hovered: 1,
+      pressed: 1,
+      active: 0,
+      disabled: 0.4,
     },
-  }
+  });
 
-  let onSet: StyleSet = {
-    default: {
-      background: ramps.neutral(0.3).hex(),
-      border: ramps.neutral(0.5).hex(),
-      foreground: ramps.neutral(1).hex(),
-    },
-    hovered: {
-      background: ramps.neutral(0.4).hex(),
-      border: ramps.neutral(1.0).hex(),
-      foreground: ramps.neutral(0.9).hex(),
-    },
-    pressed: {
-      background: ramps.neutral(0.55).hex(),
-      border: ramps.neutral(0.9).hex(),
-      foreground: ramps.neutral(0.9).hex(),
+  let variantSet = buildStyleSet(ramps.neutral, {
+    background: {
+      default: 0,
+      hovered: 0.15,
+      pressed: 0.25,
+      active: 1,
+      disabled: 0,
     },
-    active: {
-      background: ramps.neutral(0.8).hex(),
-      border: ramps.neutral(0.8).hex(),
-      foreground: ramps.neutral(0.1).hex(),
+    border: {
+      default: 0.2,
+      hovered: 0.2,
+      pressed: 0.2,
+      active: 0.5,
+      disabled: 0.2,
     },
-    disabled: {
-      background: ramps.neutral(0.25).hex(),
-      border: ramps.neutral(1).hex(),
-      foreground: ramps.neutral(0.9).hex(),
+    foreground: {
+      default: 0.7,
+      hovered: 0.7,
+      pressed: 0.7,
+      active: 0,
+      disabled: 0.4,
     },
-  }
+  });
 
-  let infoSet: StyleSet = {
-    default: {
-      background: ramps.blue(0.3).hex(),
-      border: ramps.blue(0.5).hex(),
-      foreground: ramps.blue(1).hex(),
-    },
-    hovered: {
-      background: ramps.blue(0.4).hex(),
-      border: ramps.blue(1.0).hex(),
-      foreground: ramps.blue(0.9).hex(),
-    },
-    pressed: {
-      background: ramps.blue(0.55).hex(),
-      border: ramps.blue(0.9).hex(),
-      foreground: ramps.blue(0.9).hex(),
+  let onSet = buildStyleSet(ramps.neutral, {
+    background: {
+      default: 0.15,
+      hovered: 0.3,
+      pressed: 0.4,
+      active: 1,
+      disabled: 0,
     },
-    active: {
-      background: ramps.blue(0.8).hex(),
-      border: ramps.blue(0.8).hex(),
-      foreground: ramps.blue(0.1).hex(),
+    border: {
+      default: 0.2,
+      hovered: 0.2,
+      pressed: 0.2,
+      active: 0.5,
+      disabled: 0.2,
     },
-    disabled: {
-      background: ramps.blue(0.25).hex(),
-      border: ramps.blue(1).hex(),
-      foreground: ramps.blue(0.9).hex(),
+    foreground: {
+      default: 1,
+      hovered: 1,
+      pressed: 1,
+      active: 0,
+      disabled: 0.4,
     },
-  }
+  });
 
-  let positiveSet: StyleSet = {
-    default: {
-      background: ramps.green(0.3).hex(),
-      border: ramps.green(0.5).hex(),
-      foreground: ramps.green(1).hex(),
-    },
-    hovered: {
-      background: ramps.green(0.4).hex(),
-      border: ramps.green(1.0).hex(),
-      foreground: ramps.green(0.9).hex(),
-    },
-    pressed: {
-      background: ramps.green(0.55).hex(),
-      border: ramps.green(0.9).hex(),
-      foreground: ramps.green(0.9).hex(),
+  let infoSet = buildStyleSet(ramps.blue, {
+    background: {
+      default: 0,
+      hovered: 0.15,
+      pressed: 0.25,
+      active: 1,
+      disabled: 0,
     },
-    active: {
-      background: ramps.green(0.8).hex(),
-      border: ramps.green(0.8).hex(),
-      foreground: ramps.green(0.1).hex(),
+    border: {
+      default: 0.2,
+      hovered: 0.2,
+      pressed: 0.2,
+      active: 0.5,
+      disabled: 0.2,
     },
-    disabled: {
-      background: ramps.green(0.25).hex(),
-      border: ramps.green(1).hex(),
-      foreground: ramps.green(0.9).hex(),
+    foreground: {
+      default: 1,
+      hovered: 1,
+      pressed: 1,
+      active: 0,
+      disabled: 0.4,
     },
-  }
+  });
 
-  let warningSet: StyleSet = {
-    default: {
-      background: ramps.yellow(0.3).hex(),
-      border: ramps.yellow(0.5).hex(),
-      foreground: ramps.yellow(1).hex(),
-    },
-    hovered: {
-      background: ramps.yellow(0.4).hex(),
-      border: ramps.yellow(1.0).hex(),
-      foreground: ramps.yellow(0.9).hex(),
-    },
-    pressed: {
-      background: ramps.yellow(0.55).hex(),
-      border: ramps.yellow(0.9).hex(),
-      foreground: ramps.yellow(0.9).hex(),
+  let positiveSet = buildStyleSet(ramps.green, {
+    background: {
+      default: 0,
+      hovered: 0.15,
+      pressed: 0.25,
+      active: 1,
+      disabled: 0,
     },
-    active: {
-      background: ramps.yellow(0.8).hex(),
-      border: ramps.yellow(0.8).hex(),
-      foreground: ramps.yellow(0.1).hex(),
+    border: {
+      default: 0.2,
+      hovered: 0.2,
+      pressed: 0.2,
+      active: 0.5,
+      disabled: 0.2,
     },
-    disabled: {
-      background: ramps.yellow(0.25).hex(),
-      border: ramps.yellow(1).hex(),
-      foreground: ramps.yellow(0.9).hex(),
+    foreground: {
+      default: 1,
+      hovered: 1,
+      pressed: 1,
+      active: 0,
+      disabled: 0.4,
     },
-  }
+  });
 
-  let negativeSet: StyleSet = {
-    default: {
-      background: ramps.red(0.3).hex(),
-      border: ramps.red(0.5).hex(),
-      foreground: ramps.red(1).hex(),
+  let warningSet = buildStyleSet(ramps.yellow, {
+    background: {
+      default: 0,
+      hovered: 0.15,
+      pressed: 0.25,
+      active: 1,
+      disabled: 0,
     },
-    hovered: {
-      background: ramps.red(0.4).hex(),
-      border: ramps.red(1.0).hex(),
-      foreground: ramps.red(0.9).hex(),
+    border: {
+      default: 0.2,
+      hovered: 0.2,
+      pressed: 0.2,
+      active: 0.5,
+      disabled: 0.2,
     },
-    pressed: {
-      background: ramps.red(0.55).hex(),
-      border: ramps.red(0.9).hex(),
-      foreground: ramps.red(0.9).hex(),
+    foreground: {
+      default: 1,
+      hovered: 1,
+      pressed: 1,
+      active: 0,
+      disabled: 0.4,
     },
-    active: {
-      background: ramps.red(0.8).hex(),
-      border: ramps.red(0.8).hex(),
-      foreground: ramps.red(0.1).hex(),
+  });
+
+  let negativeSet = buildStyleSet(ramps.red, {
+    background: {
+      default: 0,
+      hovered: 0.15,
+      pressed: 0.25,
+      active: 1,
+      disabled: 0,
     },
-    disabled: {
-      background: ramps.red(0.25).hex(),
-      border: ramps.red(1).hex(),
-      foreground: ramps.red(0.9).hex(),
+    border: {
+      default: 0.2,
+      hovered: 0.2,
+      pressed: 0.2,
+      active: 0.5,
+      disabled: 0.2,
     },
-  }
-
-  let defaultStyle: Style = {
-    background: ramps.neutral(0).hex(),
-    border: ramps.neutral(0.7).hex(),
-    foreground: ramps.neutral(1).hex(),
-  };
-
-  let hoveredStyle: Style = {
-    background: ramps.neutral(0.4).hex(),
-    border: ramps.neutral(1.0).hex(),
-    foreground: ramps.neutral(0.9).hex(),
-  };
-
-  let pressedStyle: Style = {
-    background: ramps.neutral(0.55).hex(),
-    border: ramps.neutral(0.9).hex(),
-    foreground: ramps.neutral(0.9).hex(),
-  };
-
-  let activeStyle: Style = {
-    background: ramps.neutral(0.8).hex(),
-    border: ramps.neutral(0.8).hex(),
-    foreground: ramps.neutral(0.1).hex(),
-  };
-
-  let disabledStyle: Style = {
-    background: ramps.neutral(0.25).hex(),
-    border: ramps.neutral(1).hex(),
-    foreground: ramps.neutral(0.9).hex(),
-  };
-
-  let styleSet: StyleSet = {
-    default: defaultStyle,
-    hovered: hoveredStyle,
-    pressed: pressedStyle,
-    active: activeStyle,
-    disabled: disabledStyle,
-  };
+    foreground: {
+      default: 1,
+      hovered: 1,
+      pressed: 1,
+      active: 0,
+      disabled: 0.4,
+    },
+  });
 
   return {
     base: baseSet,
-    variant: styleSet,
+    variant: variantSet,
     on: onSet,
     info: infoSet,
     positive: positiveSet,

From 53f58f72f2bc312a0b783ea9ffa8ca650ac00f0e Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Mon, 26 Sep 2022 15:15:35 -0400
Subject: [PATCH 11/50] Add `zed-pro` as an internal theme

---
 styles/src/themes/internal/zed-pro.ts | 28 +++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 styles/src/themes/internal/zed-pro.ts

diff --git a/styles/src/themes/internal/zed-pro.ts b/styles/src/themes/internal/zed-pro.ts
new file mode 100644
index 0000000000000000000000000000000000000000..664ff002311bd59fbb6accf8a492bcce0ad9de68
--- /dev/null
+++ b/styles/src/themes/internal/zed-pro.ts
@@ -0,0 +1,28 @@
+import chroma from "chroma-js";
+import { colorRamp, createColorScheme } from "./common/ramps";
+
+const name = "zed-pro";
+
+const ramps = {
+    neutral: chroma.scale([
+        "#101010",
+        "#1C1C1C",
+        "#212121",
+        "#2D2D2D",
+        "#B9B9B9",
+        "#DADADA",
+        "#E6E6E6",
+        "#FFFFFF",
+    ]),
+    red: colorRamp(chroma("#DC604F")),
+    orange: colorRamp(chroma("#DE782F")),
+    yellow: colorRamp(chroma("#E0B750")),
+    green: colorRamp(chroma("#2A643D")),
+    cyan: colorRamp(chroma("#215050")),
+    blue: colorRamp(chroma("#2F6DB7")),
+    violet: colorRamp(chroma("#5874C1")),
+    magenta: colorRamp(chroma("#DE9AB8")),
+};
+
+export const dark = createColorScheme(`${name}-dark`, false, ramps);
+export const light = createColorScheme(`${name}-light`, true, ramps);

From 506c28d2b64a70cc221e0b2c6872c1f37dcff84c Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Mon, 26 Sep 2022 15:39:21 -0400
Subject: [PATCH 12/50] Fix incorrect import

---
 styles/src/themes/internal/zed-pro.ts | 38 +++++++++++++--------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/styles/src/themes/internal/zed-pro.ts b/styles/src/themes/internal/zed-pro.ts
index 664ff002311bd59fbb6accf8a492bcce0ad9de68..2ce7ebfa327325ead521459fd073dcde4fa4a8a0 100644
--- a/styles/src/themes/internal/zed-pro.ts
+++ b/styles/src/themes/internal/zed-pro.ts
@@ -1,27 +1,27 @@
 import chroma from "chroma-js";
-import { colorRamp, createColorScheme } from "./common/ramps";
+import { colorRamp, createColorScheme } from "../common/ramps";
 
 const name = "zed-pro";
 
 const ramps = {
-    neutral: chroma.scale([
-        "#101010",
-        "#1C1C1C",
-        "#212121",
-        "#2D2D2D",
-        "#B9B9B9",
-        "#DADADA",
-        "#E6E6E6",
-        "#FFFFFF",
-    ]),
-    red: colorRamp(chroma("#DC604F")),
-    orange: colorRamp(chroma("#DE782F")),
-    yellow: colorRamp(chroma("#E0B750")),
-    green: colorRamp(chroma("#2A643D")),
-    cyan: colorRamp(chroma("#215050")),
-    blue: colorRamp(chroma("#2F6DB7")),
-    violet: colorRamp(chroma("#5874C1")),
-    magenta: colorRamp(chroma("#DE9AB8")),
+  neutral: chroma.scale([
+    "#101010",
+    "#1C1C1C",
+    "#212121",
+    "#2D2D2D",
+    "#B9B9B9",
+    "#DADADA",
+    "#E6E6E6",
+    "#FFFFFF",
+  ]),
+  red: colorRamp(chroma("#DC604F")),
+  orange: colorRamp(chroma("#DE782F")),
+  yellow: colorRamp(chroma("#E0B750")),
+  green: colorRamp(chroma("#2A643D")),
+  cyan: colorRamp(chroma("#215050")),
+  blue: colorRamp(chroma("#2F6DB7")),
+  violet: colorRamp(chroma("#5874C1")),
+  magenta: colorRamp(chroma("#DE9AB8")),
 };
 
 export const dark = createColorScheme(`${name}-dark`, false, ramps);

From 01570504ad771318c39b152432e3a665b355db74 Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Mon, 26 Sep 2022 17:41:59 -0400
Subject: [PATCH 13/50] WIP Allow applying domains to theme ramps

Co-Authored-By: Kay Simmons <3323631+Kethku@users.noreply.github.com>
---
 styles/src/styleTree/picker.ts        |   4 +-
 styles/src/styleTree/projectPanel.ts  |   4 +-
 styles/src/styleTree/statusBar.ts     |  12 +-
 styles/src/styleTree/workspace.ts     |  12 +-
 styles/src/themes/common/ramps.ts     | 258 +++++++++++++-------------
 styles/src/themes/internal/zed-pro.ts |   9 +
 6 files changed, 152 insertions(+), 147 deletions(-)

diff --git a/styles/src/styleTree/picker.ts b/styles/src/styleTree/picker.ts
index 7732fdff5fdc43471495e14eb123190c85b76523..1c1e4495c390f2c939a4d882a0f7484f01eec07f 100644
--- a/styles/src/styleTree/picker.ts
+++ b/styles/src/styleTree/picker.ts
@@ -21,7 +21,7 @@ export default function picker(colorScheme: ColorScheme) {
       },
       cornerRadius: 8,
       text: text(layer, "sans"),
-      highlightText: text(layer, "sans", { weight: "bold" }),
+      highlightText: text(layer, "sans", "info", "active", { weight: "bold" }),
       active: {
         background: background(layer, "active"),
         text: text(layer, "sans", "active"),
@@ -32,7 +32,7 @@ export default function picker(colorScheme: ColorScheme) {
     },
     border: border(layer),
     empty: {
-      text: text(layer, "sans"),
+      text: text(layer, "sans", "variant"),
       padding: {
         bottom: 4,
         left: 12,
diff --git a/styles/src/styleTree/projectPanel.ts b/styles/src/styleTree/projectPanel.ts
index 437f76f51df511f42582124c5bf0fc636e4c2106..699457004714de26909524be4af8119c91cd39c1 100644
--- a/styles/src/styleTree/projectPanel.ts
+++ b/styles/src/styleTree/projectPanel.ts
@@ -17,11 +17,11 @@ export default function projectPanel(colorScheme: ColorScheme) {
         background: background(layer, "on", "hovered"),
       },
       active: {
-        background: background(layer, "info", "active"),
+        background: background(layer, "active"),
         text: text(layer, "mono", "active", { size: "sm" }),
       },
       activeHover: {
-        background: background(layer, "info", "hovered"),
+        background: background(layer, "active"),
         text: text(layer, "mono", "active", { size: "sm" }),
       },
     },
diff --git a/styles/src/styleTree/statusBar.ts b/styles/src/styleTree/statusBar.ts
index 4f4aa09b4240d5cc9e778e4849c37c720e552d85..219b0081c21ff6571fe0fcb63f7836b324692028 100644
--- a/styles/src/styleTree/statusBar.ts
+++ b/styles/src/styleTree/statusBar.ts
@@ -24,9 +24,9 @@ export default function statusBar(colorScheme: ColorScheme) {
       right: 6,
     },
     border: border(layer, { top: true, overlay: true }),
-    cursorPosition: text(layer, "sans"),
-    autoUpdateProgressMessage: text(layer, "sans"),
-    autoUpdateDoneMessage: text(layer, "sans"),
+    cursorPosition: text(layer, "sans", "variant"),
+    autoUpdateProgressMessage: text(layer, "sans", "variant"),
+    autoUpdateDoneMessage: text(layer, "sans", "variant"),
     lspStatus: {
       ...diagnosticStatusContainer,
       iconSpacing: 4,
@@ -45,11 +45,11 @@ export default function statusBar(colorScheme: ColorScheme) {
       hover: text(layer, "sans", "hovered"),
     },
     feedback: {
-      ...text(layer, "sans"),
-      hover: text(layer, "sans"),
+      ...text(layer, "sans", "variant"),
+      hover: text(layer, "sans", "variant", "hovered"),
     },
     diagnosticSummary: {
-      height: 16,
+      height: 20,
       iconWidth: 16,
       iconSpacing: 2,
       summarySpacing: 6,
diff --git a/styles/src/styleTree/workspace.ts b/styles/src/styleTree/workspace.ts
index fdeac5689ffc9132d9e35f4d12aecd3bef9f7dad..c31003992870118b7c6ae8329478a27bb327fe7d 100644
--- a/styles/src/styleTree/workspace.ts
+++ b/styles/src/styleTree/workspace.ts
@@ -50,7 +50,7 @@ export default function workspace(colorScheme: ColorScheme) {
     titlebar: {
       avatarWidth: 18,
       avatarMargin: 8,
-      height: 33,
+      height: 33, // 32px + 1px for overlaid border
       background: background(layer),
       padding: {
         left: 80,
@@ -72,7 +72,8 @@ export default function workspace(colorScheme: ColorScheme) {
       },
       border: border(layer, { bottom: true, overlay: true }),
       signInPrompt: {
-        background: background(layer, "on"),
+        ...text(layer, "sans", { size: "xs" }),
+        background: background(layer),
         border: border(layer, "on"),
         cornerRadius: 6,
         margin: {
@@ -84,11 +85,10 @@ export default function workspace(colorScheme: ColorScheme) {
           left: 7,
           right: 7,
         },
-        ...text(layer, "sans", { size: "xs" }),
         hover: {
-          ...text(layer, "sans", "on", "hovered", { size: "xs" }),
-          background: background(layer, "on", "hovered"),
-          border: border(layer, "on", "hovered"),
+          ...text(layer, "sans", "hovered", { size: "xs" }),
+          background: background(layer, "hovered"),
+          border: border(layer, "hovered"),
         },
       },
       offlineIcon: {
diff --git a/styles/src/themes/common/ramps.ts b/styles/src/themes/common/ramps.ts
index 1bc9f8329968826496ff4531fe0f770907c7b422..32cd0b10a838d6914f0d24f7217cba2c56a36cf6 100644
--- a/styles/src/themes/common/ramps.ts
+++ b/styles/src/themes/common/ramps.ts
@@ -21,21 +21,17 @@ export function createColorScheme(name: string, isLight: boolean, colorRamps: {
   if (isLight) {
     for (var rampName in colorRamps) {
       baseRamps[rampName] = chroma
-        .scale((colorRamps[rampName].colors as any)())
-        .domain([1, 0]);
+        .scale(colorRamps[rampName].colors(100).reverse());
     }
     baseRamps.neutral = chroma
-      .scale((colorRamps.neutral.colors as any)())
-      .domain([1, 0]);
+      .scale(colorRamps.neutral.colors(100).reverse());
   } else {
     for (var rampName in colorRamps) {
       baseRamps[rampName] = chroma
-        .scale((colorRamps[rampName].colors as any)())
-        .domain([0, 1]);
+        .scale(colorRamps[rampName].colors(100));
     }
     baseRamps.neutral = chroma
-      .scale((colorRamps.neutral.colors as any)())
-      .domain([0, 1]);
+      .scale(colorRamps.neutral.colors(100));
   }
 
   let baseSet = {
@@ -230,8 +226,8 @@ function bottomLayer(ramps: RampSet, isLight: boolean): Layer {
     },
     foreground: {
       default: 0.7,
-      hovered: 0.7,
-      pressed: 0.7,
+      hovered: 1,
+      pressed: 1,
       active: 0,
       disabled: 0.4,
     },
@@ -264,96 +260,96 @@ function bottomLayer(ramps: RampSet, isLight: boolean): Layer {
   let infoSet = buildStyleSet(ramps.blue, {
     background: {
       default: 0,
-      hovered: 0.15,
-      pressed: 0.25,
-      active: 1,
+      hovered: 0.1,
+      pressed: 0.2,
+      active: 0.4,
       disabled: 0,
     },
     border: {
       default: 0.2,
       hovered: 0.2,
       pressed: 0.2,
-      active: 0.5,
-      disabled: 0.2,
+      active: 0.6,
+      disabled: 0.1,
     },
     foreground: {
-      default: 1,
-      hovered: 1,
-      pressed: 1,
-      active: 0,
-      disabled: 0.4,
+      default: 0.9,
+      hovered: 0.9,
+      pressed: 0.9,
+      active: 0.9,
+      disabled: 0.2,
     },
   });
 
   let positiveSet = buildStyleSet(ramps.green, {
     background: {
       default: 0,
-      hovered: 0.15,
-      pressed: 0.25,
-      active: 1,
+      hovered: 0.1,
+      pressed: 0.2,
+      active: 0.4,
       disabled: 0,
     },
     border: {
       default: 0.2,
       hovered: 0.2,
       pressed: 0.2,
-      active: 0.5,
-      disabled: 0.2,
+      active: 0.6,
+      disabled: 0.1,
     },
     foreground: {
-      default: 1,
-      hovered: 1,
-      pressed: 1,
-      active: 0,
-      disabled: 0.4,
+      default: 0.9,
+      hovered: 0.9,
+      pressed: 0.9,
+      active: 0.9,
+      disabled: 0.2,
     },
   });
 
   let warningSet = buildStyleSet(ramps.yellow, {
     background: {
       default: 0,
-      hovered: 0.15,
-      pressed: 0.25,
-      active: 1,
+      hovered: 0.1,
+      pressed: 0.2,
+      active: 0.4,
       disabled: 0,
     },
     border: {
       default: 0.2,
       hovered: 0.2,
       pressed: 0.2,
-      active: 0.5,
-      disabled: 0.2,
+      active: 0.6,
+      disabled: 0.1,
     },
     foreground: {
-      default: 1,
-      hovered: 1,
-      pressed: 1,
-      active: 0,
-      disabled: 0.4,
+      default: 0.9,
+      hovered: 0.9,
+      pressed: 0.9,
+      active: 0.9,
+      disabled: 0.2,
     },
   });
 
   let negativeSet = buildStyleSet(ramps.red, {
     background: {
       default: 0,
-      hovered: 0.15,
-      pressed: 0.25,
-      active: 1,
+      hovered: 0.1,
+      pressed: 0.2,
+      active: 0.4,
       disabled: 0,
     },
     border: {
-      default: 0.2,
+      default: 0.1,
       hovered: 0.2,
       pressed: 0.2,
-      active: 0.5,
-      disabled: 0.2,
+      active: 0.6,
+      disabled: 0.1,
     },
     foreground: {
-      default: 1,
-      hovered: 1,
-      pressed: 1,
-      active: 0,
-      disabled: 0.4,
+      default: 0.9,
+      hovered: 0.9,
+      pressed: 0.9,
+      active: 0.9,
+      disabled: 0.2,
     },
   });
 
@@ -444,96 +440,96 @@ function middleLayer(ramps: RampSet, isLight: boolean): Layer {
   let infoSet = buildStyleSet(ramps.blue, {
     background: {
       default: 0,
-      hovered: 0.15,
-      pressed: 0.25,
-      active: 1,
+      hovered: 0.1,
+      pressed: 0.2,
+      active: 0.4,
       disabled: 0,
     },
     border: {
       default: 0.2,
       hovered: 0.2,
       pressed: 0.2,
-      active: 0.5,
-      disabled: 0.2,
+      active: 0.6,
+      disabled: 0.1,
     },
     foreground: {
-      default: 1,
-      hovered: 1,
-      pressed: 1,
-      active: 0,
-      disabled: 0.4,
+      default: 0.9,
+      hovered: 0.9,
+      pressed: 0.9,
+      active: 0.9,
+      disabled: 0.2,
     },
   });
 
   let positiveSet = buildStyleSet(ramps.green, {
     background: {
       default: 0,
-      hovered: 0.15,
-      pressed: 0.25,
-      active: 1,
+      hovered: 0.1,
+      pressed: 0.2,
+      active: 0.4,
       disabled: 0,
     },
     border: {
       default: 0.2,
       hovered: 0.2,
       pressed: 0.2,
-      active: 0.5,
-      disabled: 0.2,
+      active: 0.6,
+      disabled: 0.1,
     },
     foreground: {
-      default: 1,
-      hovered: 1,
-      pressed: 1,
-      active: 0,
-      disabled: 0.4,
+      default: 0.9,
+      hovered: 0.9,
+      pressed: 0.9,
+      active: 0.9,
+      disabled: 0.2,
     },
   });
 
   let warningSet = buildStyleSet(ramps.yellow, {
     background: {
       default: 0,
-      hovered: 0.15,
-      pressed: 0.25,
-      active: 1,
+      hovered: 0.1,
+      pressed: 0.2,
+      active: 0.4,
       disabled: 0,
     },
     border: {
       default: 0.2,
       hovered: 0.2,
       pressed: 0.2,
-      active: 0.5,
-      disabled: 0.2,
+      active: 0.6,
+      disabled: 0.1,
     },
     foreground: {
-      default: 1,
-      hovered: 1,
-      pressed: 1,
-      active: 0,
-      disabled: 0.4,
+      default: 0.9,
+      hovered: 0.9,
+      pressed: 0.9,
+      active: 0.9,
+      disabled: 0.2,
     },
   });
 
   let negativeSet = buildStyleSet(ramps.red, {
     background: {
       default: 0,
-      hovered: 0.15,
-      pressed: 0.25,
-      active: 1,
+      hovered: 0.1,
+      pressed: 0.2,
+      active: 0.4,
       disabled: 0,
     },
     border: {
       default: 0.2,
       hovered: 0.2,
       pressed: 0.2,
-      active: 0.5,
-      disabled: 0.2,
+      active: 0.6,
+      disabled: 0.1,
     },
     foreground: {
-      default: 1,
-      hovered: 1,
-      pressed: 1,
-      active: 0,
-      disabled: 0.4,
+      default: 0.9,
+      hovered: 0.9,
+      pressed: 0.9,
+      active: 0.9,
+      disabled: 0.2,
     },
   });
 
@@ -625,96 +621,96 @@ function topLayer(ramps: RampSet, isLight: boolean): Layer {
   let infoSet = buildStyleSet(ramps.blue, {
     background: {
       default: 0,
-      hovered: 0.15,
-      pressed: 0.25,
-      active: 1,
+      hovered: 0.1,
+      pressed: 0.2,
+      active: 0.4,
       disabled: 0,
     },
     border: {
       default: 0.2,
       hovered: 0.2,
       pressed: 0.2,
-      active: 0.5,
-      disabled: 0.2,
+      active: 0.6,
+      disabled: 0.1,
     },
     foreground: {
-      default: 1,
-      hovered: 1,
-      pressed: 1,
-      active: 0,
-      disabled: 0.4,
+      default: 0.9,
+      hovered: 0.9,
+      pressed: 0.9,
+      active: 0.9,
+      disabled: 0.2,
     },
   });
 
   let positiveSet = buildStyleSet(ramps.green, {
     background: {
       default: 0,
-      hovered: 0.15,
-      pressed: 0.25,
-      active: 1,
+      hovered: 0.1,
+      pressed: 0.2,
+      active: 0.4,
       disabled: 0,
     },
     border: {
       default: 0.2,
       hovered: 0.2,
       pressed: 0.2,
-      active: 0.5,
-      disabled: 0.2,
+      active: 0.6,
+      disabled: 0.1,
     },
     foreground: {
-      default: 1,
-      hovered: 1,
-      pressed: 1,
-      active: 0,
-      disabled: 0.4,
+      default: 0.9,
+      hovered: 0.9,
+      pressed: 0.9,
+      active: 0.9,
+      disabled: 0.2,
     },
   });
 
   let warningSet = buildStyleSet(ramps.yellow, {
     background: {
       default: 0,
-      hovered: 0.15,
-      pressed: 0.25,
-      active: 1,
+      hovered: 0.1,
+      pressed: 0.2,
+      active: 0.4,
       disabled: 0,
     },
     border: {
       default: 0.2,
       hovered: 0.2,
       pressed: 0.2,
-      active: 0.5,
-      disabled: 0.2,
+      active: 0.6,
+      disabled: 0.1,
     },
     foreground: {
-      default: 1,
-      hovered: 1,
-      pressed: 1,
-      active: 0,
-      disabled: 0.4,
+      default: 0.9,
+      hovered: 0.9,
+      pressed: 0.9,
+      active: 0.9,
+      disabled: 0.2,
     },
   });
 
   let negativeSet = buildStyleSet(ramps.red, {
     background: {
       default: 0,
-      hovered: 0.15,
-      pressed: 0.25,
-      active: 1,
+      hovered: 0.1,
+      pressed: 0.2,
+      active: 0.4,
       disabled: 0,
     },
     border: {
       default: 0.2,
       hovered: 0.2,
       pressed: 0.2,
-      active: 0.5,
-      disabled: 0.2,
+      active: 0.6,
+      disabled: 0.1,
     },
     foreground: {
-      default: 1,
-      hovered: 1,
-      pressed: 1,
-      active: 0,
-      disabled: 0.4,
+      default: 0.9,
+      hovered: 0.9,
+      pressed: 0.9,
+      active: 0.9,
+      disabled: 0.2,
     },
   });
 
diff --git a/styles/src/themes/internal/zed-pro.ts b/styles/src/themes/internal/zed-pro.ts
index 2ce7ebfa327325ead521459fd073dcde4fa4a8a0..16b9c682f203a41411b60c1566edf0e275aba768 100644
--- a/styles/src/themes/internal/zed-pro.ts
+++ b/styles/src/themes/internal/zed-pro.ts
@@ -13,6 +13,15 @@ const ramps = {
     "#DADADA",
     "#E6E6E6",
     "#FFFFFF",
+  ]).domain([
+    0,
+    0.1,
+    0.2,
+    0.3,
+    0.7,
+    0.8,
+    0.9,
+    1
   ]),
   red: colorRamp(chroma("#DC604F")),
   orange: colorRamp(chroma("#DE782F")),

From d0b35b5e195cf86519a566b3a9624c7152152611 Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Mon, 26 Sep 2022 22:51:00 -0400
Subject: [PATCH 14/50] WIP Update style trees

---
 styles/src/styleTree/app.ts            | 2 +-
 styles/src/styleTree/commandPalette.ts | 6 +++---
 styles/src/styleTree/contactFinder.ts  | 8 ++++----
 styles/src/styleTree/picker.ts         | 2 +-
 styles/src/styleTree/statusBar.ts      | 6 +++---
 5 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/styles/src/styleTree/app.ts b/styles/src/styleTree/app.ts
index f6bff0414201782e160996c438a5bc3d86ca4e86..1a78de05879b63312b7762cfb2ca660c2f13dab8 100644
--- a/styles/src/styleTree/app.ts
+++ b/styles/src/styleTree/app.ts
@@ -38,7 +38,7 @@ export default function app(colorScheme: ColorScheme): Object {
     contactFinder: contactFinder(colorScheme),
     search: search(colorScheme),
     breadcrumbs: {
-      ...text(colorScheme.lowest.top, "sans"),
+      ...text(colorScheme.lowest.top, "sans", "variant"),
       padding: {
         left: 6,
       },
diff --git a/styles/src/styleTree/commandPalette.ts b/styles/src/styleTree/commandPalette.ts
index a9fbf98695a7d763dae0c0b1094bc5ae93a4de6d..70af97e8451578b3dafa5e1847bb6092a07154cf 100644
--- a/styles/src/styleTree/commandPalette.ts
+++ b/styles/src/styleTree/commandPalette.ts
@@ -2,14 +2,13 @@ import { ColorScheme } from "../themes/common/colorScheme";
 import { text, border, background } from "./components";
 
 export default function commandPalette(colorScheme: ColorScheme) {
-  let layer = colorScheme.highest.bottom;
+  let layer = colorScheme.highest.top;
   return {
     keystrokeSpacing: 8,
     key: {
       text: text(layer, "mono", { size: "xs" }),
       cornerRadius: 4,
       background: background(layer, "on"),
-      border: border(layer),
       padding: {
         top: 2,
         bottom: 2,
@@ -20,7 +19,8 @@ export default function commandPalette(colorScheme: ColorScheme) {
         left: 2,
       },
       active: {
-        text: text(layer, "mono", "on", "active", { size: "xs" }),
+        text: text(layer, "mono", "active", { size: "xs" }),
+        background: background(layer, "on", "active"),
       },
     },
   };
diff --git a/styles/src/styleTree/contactFinder.ts b/styles/src/styleTree/contactFinder.ts
index 40ba6b3179faefec5ab5442bebd9e3e1855c6f22..2dc70918831f6922676b6ded873b01aed9f62099 100644
--- a/styles/src/styleTree/contactFinder.ts
+++ b/styles/src/styleTree/contactFinder.ts
@@ -3,10 +3,10 @@ import { ColorScheme } from "../themes/common/colorScheme";
 import { background, foreground } from "./components";
 
 export default function contactFinder(colorScheme: ColorScheme) {
-  let layer = colorScheme.middle.bottom;
+  let layer = colorScheme.highest.top;
   const contactButton = {
-    background: background(layer),
-    color: foreground(layer),
+    background: background(layer, "variant"),
+    color: foreground(layer, "variant"),
     iconWidth: 8,
     buttonWidth: 16,
     cornerRadius: 8,
@@ -27,7 +27,7 @@ export default function contactFinder(colorScheme: ColorScheme) {
     contactButton: {
       ...contactButton,
       hover: {
-        background: background(layer, "hovered"),
+        background: background(layer, "variant", "hovered"),
       },
     },
     disabledContactButton: {
diff --git a/styles/src/styleTree/picker.ts b/styles/src/styleTree/picker.ts
index 1c1e4495c390f2c939a4d882a0f7484f01eec07f..738824b16f162efe19ab77998fe07f7585238aad 100644
--- a/styles/src/styleTree/picker.ts
+++ b/styles/src/styleTree/picker.ts
@@ -7,7 +7,7 @@ import {
 
 export default function picker(colorScheme: ColorScheme) {
   let elevation = colorScheme.highest;
-  let layer = elevation.middle;
+  let layer = elevation.top;
   return {
     background: background(layer),
     cornerRadius: 8,
diff --git a/styles/src/styleTree/statusBar.ts b/styles/src/styleTree/statusBar.ts
index 219b0081c21ff6571fe0fcb63f7836b324692028..c539b8a7fb201d8f43409ac3ee84b5450c204144 100644
--- a/styles/src/styleTree/statusBar.ts
+++ b/styles/src/styleTree/statusBar.ts
@@ -96,10 +96,10 @@ export default function statusBar(colorScheme: ColorScheme) {
       item: {
         ...statusContainer,
         iconSize: 16,
-        iconColor: foreground(layer),
+        iconColor: foreground(layer, "variant"),
         hover: {
           iconColor: foreground(layer, "hovered"),
-          background: background(layer, "hovered"),
+          background: background(layer, "variant"),
         },
         active: {
           iconColor: foreground(layer, "active"),
@@ -111,7 +111,7 @@ export default function statusBar(colorScheme: ColorScheme) {
         padding: 2,
         margin: { bottom: -1, right: -1 },
         border: border(layer),
-        background: background(layer),
+        background: background(layer, "info"),
       },
     },
   };

From 0674ca14d91a181989a6dad695cdbd0d22fc5c65 Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Tue, 27 Sep 2022 12:49:51 -0400
Subject: [PATCH 15/50] Update the neutral ramp for Andromeda

---
 styles/src/themes/andromeda.ts | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/styles/src/themes/andromeda.ts b/styles/src/themes/andromeda.ts
index 8952830cf2863fb8d6520ad2ff4a87624e3e15a2..1006531b258d4f7ddcaa360255ac34c22446f90e 100644
--- a/styles/src/themes/andromeda.ts
+++ b/styles/src/themes/andromeda.ts
@@ -13,6 +13,15 @@ const ramps = {
     "#CBC9CF",
     "#E1DDE4",
     "#F7F7F8",
+  ]).domain([
+    0,
+    0.1,
+    0.2,
+    0.3,
+    0.7,
+    0.8,
+    0.9,
+    1
   ]),
   red: colorRamp(chroma("#F92672")),
   orange: colorRamp(chroma("#F39C12")),

From ab3a6f775e8cbb9b3e03987ce1b33191b7eaa9b5 Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Wed, 28 Sep 2022 13:01:12 -0400
Subject: [PATCH 16/50] WIP Titlebar styling

---
 styles/src/styleTree/workspace.ts | 39 ++++++++++++++++++-------------
 styles/src/themes/common/ramps.ts |  4 ++--
 2 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/styles/src/styleTree/workspace.ts b/styles/src/styleTree/workspace.ts
index c31003992870118b7c6ae8329478a27bb327fe7d..d0003f79c2297309968971ecf5df0a58116d45b8 100644
--- a/styles/src/styleTree/workspace.ts
+++ b/styles/src/styleTree/workspace.ts
@@ -48,15 +48,20 @@ export default function workspace(colorScheme: ColorScheme) {
     },
     statusBar: statusBar(colorScheme),
     titlebar: {
-      avatarWidth: 18,
-      avatarMargin: 8,
       height: 33, // 32px + 1px for overlaid border
       background: background(layer),
+      border: border(layer, { bottom: true, overlay: true }),
       padding: {
         left: 80,
         right: titlebarPadding,
       },
-      title: text(layer, "sans"),
+
+      // Project
+      title: text(layer, "sans", "variant"),
+
+      // Collaborators
+      avatarWidth: 18,
+      avatarMargin: 8,
       avatar: {
         cornerRadius: 10,
         border: {
@@ -67,30 +72,29 @@ export default function workspace(colorScheme: ColorScheme) {
       avatarRibbon: {
         height: 3,
         width: 12,
-        // TODO: The background for this ideally should be
-        // set with a token, not hardcoded in rust
+        // TODO: Chore: Make avatarRibbon colors driven by the theme rather than being hard coded.
       },
-      border: border(layer, { bottom: true, overlay: true }),
+
+      // Sign in buttom
+      // FlatButton, Variant
       signInPrompt: {
         ...text(layer, "sans", { size: "xs" }),
         background: background(layer),
-        border: border(layer, "on"),
+        border: border(layer),
         cornerRadius: 6,
-        margin: {
-          top: 1,
-        },
         padding: {
           top: 1,
           bottom: 1,
-          left: 7,
-          right: 7,
+          left: 8,
+          right: 8,
         },
         hover: {
           ...text(layer, "sans", "hovered", { size: "xs" }),
           background: background(layer, "hovered"),
-          border: border(layer, "hovered"),
         },
       },
+
+      // Offline Indicator
       offlineIcon: {
         color: foreground(layer, "on"),
         width: 16,
@@ -101,20 +105,23 @@ export default function workspace(colorScheme: ColorScheme) {
           right: 4,
         },
       },
+
+      // Notice that the collaboration server is out of date
       outdatedWarning: {
         ...text(layer, "sans", "warning", { size: "xs" }),
-        background: background(layer, "warning"),
+        background: withOpacity(background(layer, "warning"), 0.3),
         border: border(layer, "warning"),
         margin: {
           left: titlebarPadding,
         },
         padding: {
-          left: 6,
-          right: 6,
+          left: 8,
+          right: 8,
         },
         cornerRadius: 6,
       },
     },
+
     toolbar: {
       height: 34,
       background: background(elevation.top),
diff --git a/styles/src/themes/common/ramps.ts b/styles/src/themes/common/ramps.ts
index 32cd0b10a838d6914f0d24f7217cba2c56a36cf6..9e218e421706154238931ed2a162a0a9f69e756f 100644
--- a/styles/src/themes/common/ramps.ts
+++ b/styles/src/themes/common/ramps.ts
@@ -307,7 +307,7 @@ function bottomLayer(ramps: RampSet, isLight: boolean): Layer {
 
   let warningSet = buildStyleSet(ramps.yellow, {
     background: {
-      default: 0,
+      default: 0.1,
       hovered: 0.1,
       pressed: 0.2,
       active: 0.4,
@@ -321,7 +321,7 @@ function bottomLayer(ramps: RampSet, isLight: boolean): Layer {
       disabled: 0.1,
     },
     foreground: {
-      default: 0.9,
+      default: 0.6,
       hovered: 0.9,
       pressed: 0.9,
       active: 0.9,

From d0c50b4fbfcb8ad51b527bd99077d63a4163983a Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Wed, 28 Sep 2022 15:53:06 -0400
Subject: [PATCH 17/50] Style tab bar

---
 styles/src/styleTree/tabBar.ts | 55 ++++++++++++++++++++--------------
 1 file changed, 32 insertions(+), 23 deletions(-)

diff --git a/styles/src/styleTree/tabBar.ts b/styles/src/styleTree/tabBar.ts
index 24593f607937e0127724a7dc1c8535b8e684a962..57a8e93890ebac6fd99beedf85e7675848f962e7 100644
--- a/styles/src/styleTree/tabBar.ts
+++ b/styles/src/styleTree/tabBar.ts
@@ -6,37 +6,46 @@ export default function tabBar(colorScheme: ColorScheme) {
   const height = 32;
 
   let elevation = colorScheme.lowest;
-  let layer = elevation.middle;
+  let activeLayerActiveTab = elevation.top;
+  let activeLayerInactiveTab = elevation.middle;
+  let inactiveLayerActiveTab = elevation.middle;
+  let inactiveLayerInactiveTab = elevation.bottom;
 
   const tab = {
     height,
-    background: background(layer),
-    border: border(layer, {
+    text: text(activeLayerInactiveTab, "sans", "variant", { size: "sm" }),
+    background: background(activeLayerInactiveTab),
+    border: border(activeLayerInactiveTab, {
       right: true,
       bottom: true,
       overlay: true,
     }),
-    iconClose: foreground(layer),
-    iconCloseActive: foreground(layer, "active"),
-    iconConflict: foreground(layer, "warning"),
-    iconDirty: foreground(layer, "info"),
-    iconWidth: 8,
-    spacing: 8,
-    text: text(layer, "sans", "variant", { size: "sm" }),
     padding: {
       left: 8,
-      right: 8,
+      right: 12,
     },
+    spacing: 8,
+
+    // Close icons
+    iconWidth: 8,
+    iconClose: foreground(activeLayerInactiveTab, "variant"),
+    iconCloseActive: foreground(activeLayerInactiveTab),
+
+    // Indicators
+    iconConflict: foreground(activeLayerInactiveTab, "warning"),
+    iconDirty: foreground(activeLayerInactiveTab, "info"),
+
+    // When two tabs of the same name are open, a label appears next to them
     description: {
-      margin: { left: 6, top: 1 },
-      ...text(layer, "sans", "variant", { size: "2xs" })
+      margin: { left: 8 },
+      ...text(activeLayerInactiveTab, "sans", "disabled", { size: "2xs" })
     }
   };
 
   const activePaneActiveTab = {
     ...tab,
-    background: background(elevation.top),
-    text: text(elevation.top, "sans", { size: "sm" }),
+    background: background(activeLayerActiveTab),
+    text: text(activeLayerActiveTab, "sans", { size: "sm" }),
     border: {
       ...tab.border,
       bottom: false
@@ -45,14 +54,14 @@ export default function tabBar(colorScheme: ColorScheme) {
 
   const inactivePaneInactiveTab = {
     ...tab,
-    background: background(layer),
-    text: text(layer, "sans", "variant", { size: "sm" }),
+    background: background(inactiveLayerInactiveTab),
+    text: text(inactiveLayerInactiveTab, "sans", "variant", { size: "sm" }),
   };
 
   const inactivePaneActiveTab = {
     ...tab,
-    background: background(elevation.top),
-    text: text(elevation.top, "sans", "variant", { size: "sm" }),
+    background: background(inactiveLayerActiveTab),
+    text: text(inactiveLayerActiveTab, "sans", "variant", { size: "sm" }),
     border: {
       ...tab.border,
       bottom: false
@@ -68,8 +77,8 @@ export default function tabBar(colorScheme: ColorScheme) {
 
   return {
     height,
-    background: background(layer),
-    dropTargetOverlayColor: withOpacity(foreground(layer), 0.6),
+    background: background(activeLayerInactiveTab),
+    dropTargetOverlayColor: withOpacity(foreground(activeLayerInactiveTab), 0.6),
     activePane: {
       activeTab: activePaneActiveTab,
       inactiveTab: tab,
@@ -80,11 +89,11 @@ export default function tabBar(colorScheme: ColorScheme) {
     },
     draggedTab,
     paneButton: {
-      color: foreground(layer),
+      color: foreground(activeLayerInactiveTab, "variant"),
       iconWidth: 12,
       buttonWidth: activePaneActiveTab.height,
       hover: {
-        color: foreground(layer, "hovered"),
+        color: foreground(activeLayerInactiveTab, "hovered"),
       },
     },
     paneButtonContainer: {

From 48dcc465f229d9b5abfc025e50205f98c428b66f Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Wed, 28 Sep 2022 16:03:00 -0400
Subject: [PATCH 18/50] WIP

---
 styles/src/styleTree/editor.ts | 23 ++++++++++++-----------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/styles/src/styleTree/editor.ts b/styles/src/styleTree/editor.ts
index 4a3605b52e083a14e57bc3558e33c8abb12239f6..208ecdbfeea213f79e99063d4dcb005d00d13ec9 100644
--- a/styles/src/styleTree/editor.ts
+++ b/styles/src/styleTree/editor.ts
@@ -1,5 +1,6 @@
 import { fontWeights } from "../common";
 import { ColorScheme, Elevation, Layer, StyleSets } from "../themes/common/colorScheme";
+import { withOpacity } from "../utils/color";
 import {
   background,
   border,
@@ -133,11 +134,11 @@ export default function editor(colorScheme: ColorScheme) {
   return {
     textColor: syntax.primary.color,
     background: background(layer),
-    activeLineBackground: background(layer, "variant"),
-    highlightedLineBackground: background(layer, "variant"),
+    activeLineBackground: background(layer, "on"),
+    highlightedLineBackground: background(layer, "on"),
     codeActions: {
       indicator: foreground(layer, "variant"),
-      verticalScale: 0.618
+      verticalScale: 0.55
     },
     diffBackgroundDeleted: background(layer, "negative"),
     diffBackgroundInserted: background(layer, "positive"),
@@ -146,8 +147,8 @@ export default function editor(colorScheme: ColorScheme) {
     errorColor: foreground(layer, "negative"),
     gutterBackground: background(layer),
     gutterPaddingFactor: 3.5,
-    lineNumber: foreground(layer),
-    lineNumberActive: foreground(layer, "active"),
+    lineNumber: foreground(layer, "disabled"),
+    lineNumberActive: foreground(layer),
     renameFade: 0.6,
     unnecessaryCodeFade: 0.5,
     selection: colorScheme.players[0],
@@ -164,26 +165,26 @@ export default function editor(colorScheme: ColorScheme) {
       background: background(elevation.above.top),
       cornerRadius: 8,
       padding: 4,
+      margin: {
+        left: -14,
+      },
       border: border(elevation.above.top),
       shadow: elevation.above.shadow,
+      matchHighlight: elevation.above.ramps.blue(0.5).hex(),
       item: autocompleteItem,
       hoveredItem: {
         ...autocompleteItem,
         background: background(elevation.above.top, "hovered"),
       },
-      margin: {
-        left: -14,
-      },
-      matchHighlight: elevation.above.ramps.blue(0.5).hex(),
       selectedItem: {
         ...autocompleteItem,
-        background: background(elevation.above.top, "active"),
+        background: withOpacity(background(elevation.above.top, "active"), 0.2),
       },
     },
     diagnosticHeader: {
       background: background(elevation.middle),
       iconWidthFactor: 1.5,
-      textScaleFactor: 0.857, // NateQ: Will we need dynamic sizing for text? If so let's create tokens for these.
+      textScaleFactor: 0.857,
       border: border(elevation.middle, {
         bottom: true,
         top: true,

From a62e2a38d7d66c8ab70d0c9a43f657e84e179292 Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Wed, 28 Sep 2022 16:04:15 -0400
Subject: [PATCH 19/50] Update projectPanel.ts

---
 styles/src/styleTree/projectPanel.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/styles/src/styleTree/projectPanel.ts b/styles/src/styleTree/projectPanel.ts
index 699457004714de26909524be4af8119c91cd39c1..ea123260711ed635587705f318cd63a2f0135e4a 100644
--- a/styles/src/styleTree/projectPanel.ts
+++ b/styles/src/styleTree/projectPanel.ts
@@ -12,9 +12,9 @@ export default function projectPanel(colorScheme: ColorScheme) {
       iconColor: foreground(layer, "variant"),
       iconSize: 8,
       iconSpacing: 8,
-      text: text(layer, "mono", "on", { size: "sm" }),
+      text: text(layer, "mono", "variant", { size: "sm" }),
       hover: {
-        background: background(layer, "on", "hovered"),
+        background: background(layer, "variant", "hovered"),
       },
       active: {
         background: background(layer, "active"),

From a6cccf82f74b194b2a27de17275e9c356586f401 Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Thu, 29 Sep 2022 13:28:31 -0400
Subject: [PATCH 20/50] Fix illegible rename text

---
 styles/src/styleTree/projectPanel.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/styles/src/styleTree/projectPanel.ts b/styles/src/styleTree/projectPanel.ts
index ea123260711ed635587705f318cd63a2f0135e4a..e90fd05598dd8f058f745aa435ecb25dfafee1d1 100644
--- a/styles/src/styleTree/projectPanel.ts
+++ b/styles/src/styleTree/projectPanel.ts
@@ -29,7 +29,7 @@ export default function projectPanel(colorScheme: ColorScheme) {
     ignoredEntryFade: 0.6,
     filenameEditor: {
       background: background(layer, "on"),
-      text: text(layer, "mono", "on", "active", { size: "sm" }),
+      text: text(layer, "mono", "on", { size: "sm" }),
       selection: colorScheme.players[0],
     },
   };

From 7080dc9c235eadfbbc3ee7d3f3f6cb9d7f0ce1b3 Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Mon, 3 Oct 2022 14:08:01 -0400
Subject: [PATCH 21/50] WIP

---
 styles/src/styleTree/commandPalette.ts | 4 ++--
 styles/src/styleTree/editor.ts         | 2 +-
 styles/src/styleTree/picker.ts         | 3 ++-
 styles/src/themes/common/ramps.ts      | 2 +-
 4 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/styles/src/styleTree/commandPalette.ts b/styles/src/styleTree/commandPalette.ts
index 70af97e8451578b3dafa5e1847bb6092a07154cf..b4bc25bb8bacea77e181525643061e504c99d507 100644
--- a/styles/src/styleTree/commandPalette.ts
+++ b/styles/src/styleTree/commandPalette.ts
@@ -19,8 +19,8 @@ export default function commandPalette(colorScheme: ColorScheme) {
         left: 2,
       },
       active: {
-        text: text(layer, "mono", "active", { size: "xs" }),
-        background: background(layer, "on", "active"),
+        text: text(layer, "mono", { size: "xs" }),
+        background: background(layer),
       },
     },
   };
diff --git a/styles/src/styleTree/editor.ts b/styles/src/styleTree/editor.ts
index 208ecdbfeea213f79e99063d4dcb005d00d13ec9..3b4a46141b9b6494f6cbf61335d0bf2905b5088c 100644
--- a/styles/src/styleTree/editor.ts
+++ b/styles/src/styleTree/editor.ts
@@ -30,7 +30,7 @@ export default function editor(colorScheme: ColorScheme) {
       header: {
         border: border(layer, {
           top: true,
-        }),
+        })
       },
       message: {
         text: text(layer, "sans", styleSet, { size: "sm" }),
diff --git a/styles/src/styleTree/picker.ts b/styles/src/styleTree/picker.ts
index 738824b16f162efe19ab77998fe07f7585238aad..69648bf402fd67546fbae3c633e1184dea19bcbe 100644
--- a/styles/src/styleTree/picker.ts
+++ b/styles/src/styleTree/picker.ts
@@ -21,10 +21,11 @@ export default function picker(colorScheme: ColorScheme) {
       },
       cornerRadius: 8,
       text: text(layer, "sans"),
-      highlightText: text(layer, "sans", "info", "active", { weight: "bold" }),
+      highlightText: text(layer, "sans", "info", { weight: "bold" }),
       active: {
         background: background(layer, "active"),
         text: text(layer, "sans", "active"),
+        highlightText: text(layer, "sans", "info", "active", { weight: "bold" }),
       },
       hover: {
         background: background(layer, "hovered"),
diff --git a/styles/src/themes/common/ramps.ts b/styles/src/themes/common/ramps.ts
index 9e218e421706154238931ed2a162a0a9f69e756f..5c1d2b0e906a86a17fbdc0c5bde00bc530a34c93 100644
--- a/styles/src/themes/common/ramps.ts
+++ b/styles/src/themes/common/ramps.ts
@@ -637,7 +637,7 @@ function topLayer(ramps: RampSet, isLight: boolean): Layer {
       default: 0.9,
       hovered: 0.9,
       pressed: 0.9,
-      active: 0.9,
+      active: 0.5,
       disabled: 0.2,
     },
   });

From ce2112df436f49f7e3f4a38eb8b59d59646002e0 Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Tue, 4 Oct 2022 12:36:31 -0400
Subject: [PATCH 22/50] Update offline indicator

---
 styles/src/styleTree/workspace.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/styles/src/styleTree/workspace.ts b/styles/src/styleTree/workspace.ts
index d0003f79c2297309968971ecf5df0a58116d45b8..109ae5c9fb22e46064961a5cb4e14a0022799a15 100644
--- a/styles/src/styleTree/workspace.ts
+++ b/styles/src/styleTree/workspace.ts
@@ -96,7 +96,7 @@ export default function workspace(colorScheme: ColorScheme) {
 
       // Offline Indicator
       offlineIcon: {
-        color: foreground(layer, "on"),
+        color: foreground(layer, "variant"),
         width: 16,
         margin: {
           left: titlebarPadding,

From 0ed811b81bdd731264e36cb3cc1ed23a63592d51 Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Tue, 4 Oct 2022 13:16:11 -0400
Subject: [PATCH 23/50] Update palettes

---
 styles/src/styleTree/commandPalette.ts | 23 ++++++++++++---------
 styles/src/styleTree/picker.ts         | 28 +++++++++++++++-----------
 styles/src/themes/common/ramps.ts      |  8 ++++----
 3 files changed, 33 insertions(+), 26 deletions(-)

diff --git a/styles/src/styleTree/commandPalette.ts b/styles/src/styleTree/commandPalette.ts
index b4bc25bb8bacea77e181525643061e504c99d507..694f43496872c3b7c35b3fc6bee845639e41f640 100644
--- a/styles/src/styleTree/commandPalette.ts
+++ b/styles/src/styleTree/commandPalette.ts
@@ -1,26 +1,29 @@
 import { ColorScheme } from "../themes/common/colorScheme";
-import { text, border, background } from "./components";
+import { withOpacity } from "../utils/color";
+import { text, background } from "./components";
 
 export default function commandPalette(colorScheme: ColorScheme) {
   let layer = colorScheme.highest.top;
   return {
     keystrokeSpacing: 8,
     key: {
-      text: text(layer, "mono", { size: "xs" }),
-      cornerRadius: 4,
-      background: background(layer, "on"),
+      text: text(layer, "mono", "on", "default", { size: "xs" }),
+      cornerRadius: 2,
+      background: withOpacity(background(layer, "on"), 0.5),
       padding: {
-        top: 2,
-        bottom: 2,
-        left: 8,
-        right: 8,
+        top: 1,
+        bottom: 1,
+        left: 6,
+        right: 6,
       },
       margin: {
+        top: 1,
+        bottom: 1,
         left: 2,
       },
       active: {
-        text: text(layer, "mono", { size: "xs" }),
-        background: background(layer),
+        text: text(layer, "mono", "on", "active", { size: "xs" }),
+        background: withOpacity(background(layer, "on"), 0.2),
       },
     },
   };
diff --git a/styles/src/styleTree/picker.ts b/styles/src/styleTree/picker.ts
index 69648bf402fd67546fbae3c633e1184dea19bcbe..5a41187662ccce3cb10575e77a396c0ac9003469 100644
--- a/styles/src/styleTree/picker.ts
+++ b/styles/src/styleTree/picker.ts
@@ -10,8 +10,7 @@ export default function picker(colorScheme: ColorScheme) {
   let layer = elevation.top;
   return {
     background: background(layer),
-    cornerRadius: 8,
-    padding: 8,
+    cornerRadius: 12,
     item: {
       padding: {
         bottom: 4,
@@ -19,8 +18,12 @@ export default function picker(colorScheme: ColorScheme) {
         right: 12,
         top: 4,
       },
-      cornerRadius: 8,
-      text: text(layer, "sans"),
+      margin: {
+        left: 4,
+        right: 4
+      },
+      cornerRadius: 6,
+      text: text(layer, "sans", "variant"),
       highlightText: text(layer, "sans", "info", { weight: "bold" }),
       active: {
         background: background(layer, "active"),
@@ -35,25 +38,26 @@ export default function picker(colorScheme: ColorScheme) {
     empty: {
       text: text(layer, "sans", "variant"),
       padding: {
-        bottom: 4,
-        left: 12,
-        right: 12,
+        bottom: 8,
+        left: 16,
+        right: 16,
         top: 8,
       },
     },
     inputEditor: {
-      background: background(layer, "on"),
-      cornerRadius: 8,
       placeholderText: text(layer, "sans", "on", "disabled"),
       selection: colorScheme.players[0],
       text: text(layer, "mono", "on"),
-      border: border(layer, "on"),
+      border: border(layer, { bottom: true }),
       padding: {
-        bottom: 7,
+        bottom: 8,
         left: 16,
         right: 16,
-        top: 7,
+        top: 8,
       },
+      margin: {
+        bottom: 4
+      }
     },
     shadow: elevation.shadow,
   };
diff --git a/styles/src/themes/common/ramps.ts b/styles/src/themes/common/ramps.ts
index 5c1d2b0e906a86a17fbdc0c5bde00bc530a34c93..e3aef2a33035f8f1c48334677591a8f5c9bec905 100644
--- a/styles/src/themes/common/ramps.ts
+++ b/styles/src/themes/common/ramps.ts
@@ -57,7 +57,7 @@ export function createColorScheme(name: string, isLight: boolean, colorRamps: {
   let middle = elevation(
     resampleSet(
       baseSet,
-      evenSamples(0.125, 1)
+      evenSamples(0.08, 1)
     ),
     isLight,
     {
@@ -71,7 +71,7 @@ export function createColorScheme(name: string, isLight: boolean, colorRamps: {
   let highest = elevation(
     resampleSet(
       baseSet,
-      evenSamples(0.25, 1)
+      evenSamples(0.16, 1)
     ),
     isLight,
     {
@@ -634,10 +634,10 @@ function topLayer(ramps: RampSet, isLight: boolean): Layer {
       disabled: 0.1,
     },
     foreground: {
-      default: 0.9,
+      default: 0.6,
       hovered: 0.9,
       pressed: 0.9,
-      active: 0.5,
+      active: 0.3,
       disabled: 0.2,
     },
   });

From 0bbc02e10d39bf5a8fd6d991974ee4ff02fb9220 Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Tue, 4 Oct 2022 13:55:01 -0400
Subject: [PATCH 24/50] Add bottom padding and spacing between items to pickers

Co-Authored-By: gibusu <95764254+gibusu@users.noreply.github.com>
---
 styles/src/styleTree/picker.ts | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/styles/src/styleTree/picker.ts b/styles/src/styleTree/picker.ts
index 5a41187662ccce3cb10575e77a396c0ac9003469..412e0c1bee49dcf0e14754a372548f82e24104b7 100644
--- a/styles/src/styleTree/picker.ts
+++ b/styles/src/styleTree/picker.ts
@@ -10,7 +10,12 @@ export default function picker(colorScheme: ColorScheme) {
   let layer = elevation.top;
   return {
     background: background(layer),
+    border: border(layer),
+    shadow: elevation.shadow,
     cornerRadius: 12,
+    padding: {
+      bottom: 4
+    },
     item: {
       padding: {
         bottom: 4,
@@ -19,10 +24,11 @@ export default function picker(colorScheme: ColorScheme) {
         top: 4,
       },
       margin: {
+        top: 1,
         left: 4,
         right: 4
       },
-      cornerRadius: 6,
+      cornerRadius: 8,
       text: text(layer, "sans", "variant"),
       highlightText: text(layer, "sans", "info", { weight: "bold" }),
       active: {
@@ -34,7 +40,6 @@ export default function picker(colorScheme: ColorScheme) {
         background: background(layer, "hovered"),
       },
     },
-    border: border(layer),
     empty: {
       text: text(layer, "sans", "variant"),
       padding: {
@@ -59,6 +64,5 @@ export default function picker(colorScheme: ColorScheme) {
         bottom: 4
       }
     },
-    shadow: elevation.shadow,
   };
 }

From 84847ff181abd1eec3b14b39ae3e73bda96de22b Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Tue, 4 Oct 2022 14:49:57 -0400
Subject: [PATCH 25/50] Remap theme ramp domains

Co-Authored-By: gibusu <95764254+gibusu@users.noreply.github.com>
---
 styles/src/themes/abruzzo.ts        | 9 +++++++++
 styles/src/themes/andromeda.ts      | 6 +++---
 styles/src/themes/brushtrees.ts     | 9 +++++++++
 styles/src/themes/cave.ts           | 9 +++++++++
 styles/src/themes/one-dark.ts       | 9 +++++++++
 styles/src/themes/one-light.ts      | 5 +++++
 styles/src/themes/rose-pine-dawn.ts | 4 ++++
 styles/src/themes/rose-pine-moon.ts | 5 +++++
 styles/src/themes/sandcastle.ts     | 4 ++--
 styles/src/themes/solarized.ts      | 9 +++++++++
 styles/src/themes/sulphurpool.ts    | 9 +++++++++
 styles/src/themes/summercamp.ts     | 9 +++++++++
 12 files changed, 82 insertions(+), 5 deletions(-)

diff --git a/styles/src/themes/abruzzo.ts b/styles/src/themes/abruzzo.ts
index 8f96fce1d2199d57dc40de08519dbf69d4b990e1..c73aa311d42158dc9773fde4cf4a8374825c1147 100644
--- a/styles/src/themes/abruzzo.ts
+++ b/styles/src/themes/abruzzo.ts
@@ -13,6 +13,15 @@ const ramps = {
     "#c1825a",
     "#dda66e",
     "#fbf3e2",
+  ]).domain([
+    0,
+    0.15,
+    0.35,
+    0.5,
+    0.6,
+    0.75,
+    0.85,
+    1
   ]),
   red: colorRamp(chroma("#e594c4")),
   orange: colorRamp(chroma("#d9e87e")),
diff --git a/styles/src/themes/andromeda.ts b/styles/src/themes/andromeda.ts
index 1006531b258d4f7ddcaa360255ac34c22446f90e..1fc59baebfcf0a09a0480627b9d0f58344152b65 100644
--- a/styles/src/themes/andromeda.ts
+++ b/styles/src/themes/andromeda.ts
@@ -15,9 +15,9 @@ const ramps = {
     "#F7F7F8",
   ]).domain([
     0,
-    0.1,
-    0.2,
-    0.3,
+    0.15,
+    0.25,
+    0.35,
     0.7,
     0.8,
     0.9,
diff --git a/styles/src/themes/brushtrees.ts b/styles/src/themes/brushtrees.ts
index fd62c394214bfde7e1d9eaa248047344fb5bdd63..3366f5473783f6a039fb1d87a6c7528ab72f21f9 100644
--- a/styles/src/themes/brushtrees.ts
+++ b/styles/src/themes/brushtrees.ts
@@ -13,6 +13,15 @@ const ramps = {
     "#B0C5C8",
     "#C9DBDC",
     "#E3EFEF",
+  ]).domain([
+    0,
+    0.17,
+    0.32,
+    0.48,
+    0.6,
+    0.715,
+    0.858,
+    1
   ]),
   red: colorRamp(chroma("#b38686")),
   orange: colorRamp(chroma("#d8bba2")),
diff --git a/styles/src/themes/cave.ts b/styles/src/themes/cave.ts
index 53d8bd088cf20701cfc8cead9209025e40d93f74..f9c9b9d49e2843b92ad3b874cda68ecb19b0f10c 100644
--- a/styles/src/themes/cave.ts
+++ b/styles/src/themes/cave.ts
@@ -13,6 +13,15 @@ const ramps = {
     "#8b8792",
     "#e2dfe7",
     "#efecf4",
+  ]).domain([
+    0,
+    0.3,
+    0.45,
+    0.6,
+    0.65,
+    0.7,
+    0.85,
+    1
   ]),
   red: colorRamp(chroma("#be4678")),
   orange: colorRamp(chroma("#aa573c")),
diff --git a/styles/src/themes/one-dark.ts b/styles/src/themes/one-dark.ts
index f90e0331d352c6edf1cd73517cf603e5a4ce370f..af47ca930e7e3f38917fcbcdd1dfcb1785cd8e10 100644
--- a/styles/src/themes/one-dark.ts
+++ b/styles/src/themes/one-dark.ts
@@ -33,6 +33,15 @@ const ramps = {
     base05,
     base06,
     base07,
+  ]).domain([
+    0,
+    0.2,
+    0.3,
+    0.45,
+    0.62,
+    0.8,
+    0.9,
+    1
   ]),
   red: colorRamp(chroma(base08)),
   orange: colorRamp(chroma(base09)),
diff --git a/styles/src/themes/one-light.ts b/styles/src/themes/one-light.ts
index c857b1d052b755d2d06caa4c24ea7ed0888eec48..4a681a34752090eaadec4780733beab3eb165721 100644
--- a/styles/src/themes/one-light.ts
+++ b/styles/src/themes/one-light.ts
@@ -33,6 +33,11 @@ const ramps = {
     base05,
     base06,
     base07,
+  ]).domain([
+    0,
+    0.05,
+    0.77,
+    1
   ]),
   red: colorRamp(chroma(base08)),
   orange: colorRamp(chroma(base09)),
diff --git a/styles/src/themes/rose-pine-dawn.ts b/styles/src/themes/rose-pine-dawn.ts
index e27740ca93de4dd8f15b1e44954fac6c2771aa67..e3227d0139b79452d450a455bac9dc8baf64dfd0 100644
--- a/styles/src/themes/rose-pine-dawn.ts
+++ b/styles/src/themes/rose-pine-dawn.ts
@@ -13,6 +13,10 @@ const ramps = {
     "#F2E9E1",
     "#FFFAF3",
     "#FAF4ED",
+  ]).domain([
+    0,
+    0.73,
+    1
   ]),
   red: colorRamp(chroma("#B4637A")),
   orange: colorRamp(chroma("#D7827E")),
diff --git a/styles/src/themes/rose-pine-moon.ts b/styles/src/themes/rose-pine-moon.ts
index 927083f66caabb8857ddecf592c26615463832da..d0266a453dd718f97fbc0df5d2646462df60c2ce 100644
--- a/styles/src/themes/rose-pine-moon.ts
+++ b/styles/src/themes/rose-pine-moon.ts
@@ -13,6 +13,11 @@ const ramps = {
     "#6E6A86",
     "#908CAA",
     "#E0DEF4",
+  ]).domain([
+    0,
+    0.3,
+    0.55,
+    1
   ]),
   red: colorRamp(chroma("#EB6F92")),
   orange: colorRamp(chroma("#EBBCBA")),
diff --git a/styles/src/themes/sandcastle.ts b/styles/src/themes/sandcastle.ts
index feffb854b2752063e26eab909f9936e3c2255c6c..5e5230104b17f9c6d2c2f21bebd3913314ef9ade 100644
--- a/styles/src/themes/sandcastle.ts
+++ b/styles/src/themes/sandcastle.ts
@@ -17,9 +17,9 @@ const ramps = {
   red: colorRamp(chroma("#B4637A")),
   orange: colorRamp(chroma("#a07e3b")),
   yellow: colorRamp(chroma("#a07e3b")),
-  green: colorRamp(chroma("#528b8b")),
+  green: colorRamp(chroma("#83a598")),
   cyan: colorRamp(chroma("#83a598")),
-  blue: colorRamp(chroma("#83a598")),
+  blue: colorRamp(chroma("#528b8b")),
   violet: colorRamp(chroma("#d75f5f")),
   magenta: colorRamp(chroma("#a87322")),
 };
diff --git a/styles/src/themes/solarized.ts b/styles/src/themes/solarized.ts
index 7c0ea3ca029d932f4eefae3ff08540ae3899a545..577a43c0b6cbcb27e67ec65d62f781c58e869418 100644
--- a/styles/src/themes/solarized.ts
+++ b/styles/src/themes/solarized.ts
@@ -13,6 +13,15 @@ const ramps = {
     "#93a1a1",
     "#eee8d5",
     "#fdf6e3",
+  ]).domain([
+    0,
+    0.2,
+    0.38,
+    0.45,
+    0.65,
+    0.7,
+    0.85,
+    1
   ]),
   red: colorRamp(chroma("#dc322f")),
   orange: colorRamp(chroma("#cb4b16")),
diff --git a/styles/src/themes/sulphurpool.ts b/styles/src/themes/sulphurpool.ts
index e701ab3d21cc640dd15e59e90b96873008058d9a..2acd8041bd089abd0deaa25eadbb85723080707e 100644
--- a/styles/src/themes/sulphurpool.ts
+++ b/styles/src/themes/sulphurpool.ts
@@ -13,6 +13,15 @@ const ramps = {
     "#979db4",
     "#dfe2f1",
     "#f5f7ff",
+  ]).domain([
+    0,
+    0.2,
+    0.38,
+    0.45,
+    0.65,
+    0.7,
+    0.85,
+    1
   ]),
   red: colorRamp(chroma("#c94922")),
   orange: colorRamp(chroma("#c76b29")),
diff --git a/styles/src/themes/summercamp.ts b/styles/src/themes/summercamp.ts
index 706eb843444af8d22d4da3fc9b6bbebe6a38e1a9..6f2ecbcc9c1c919bed642654bb7a45cbb7e9949f 100644
--- a/styles/src/themes/summercamp.ts
+++ b/styles/src/themes/summercamp.ts
@@ -13,6 +13,15 @@ const ramps = {
     "#736e55",
     "#bab696",
     "#f8f5de",
+  ]).domain([
+    0,
+    0.2,
+    0.38,
+    0.4,
+    0.65,
+    0.7,
+    0.85,
+    1
   ]),
   red: colorRamp(chroma("#e35142")),
   orange: colorRamp(chroma("#fba11b")),

From 4a61b1011ebfed91cd85254c3c5724e4ee49b4f4 Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Tue, 4 Oct 2022 14:53:06 -0400
Subject: [PATCH 26/50] Minor one dark improvements

Co-Authored-By: gibusu <95764254+gibusu@users.noreply.github.com>
---
 styles/src/themes/one-dark.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/styles/src/themes/one-dark.ts b/styles/src/themes/one-dark.ts
index af47ca930e7e3f38917fcbcdd1dfcb1785cd8e10..508c8cb93526e24e294709302e73887e1aea8613 100644
--- a/styles/src/themes/one-dark.ts
+++ b/styles/src/themes/one-dark.ts
@@ -34,9 +34,9 @@ const ramps = {
     base06,
     base07,
   ]).domain([
-    0,
-    0.2,
-    0.3,
+    0.05,
+    0.22,
+    0.25,
     0.45,
     0.62,
     0.8,

From 5bc074005c31bca9cefbdb0dc5f616d167ecc907 Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Wed, 5 Oct 2022 12:40:38 -0400
Subject: [PATCH 27/50] WIP

---
 styles/src/styleTree/contextMenu.ts | 6 +++---
 styles/src/styleTree/statusBar.ts   | 2 +-
 styles/src/themes/solarized.ts      | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/styles/src/styleTree/contextMenu.ts b/styles/src/styleTree/contextMenu.ts
index 97b323885c7d0392d431a6e158ff409b757f84e5..c3c5262a2a2c5fd5fb583a36be4a53bbff7ba24e 100644
--- a/styles/src/styleTree/contextMenu.ts
+++ b/styles/src/styleTree/contextMenu.ts
@@ -11,15 +11,15 @@ export default function contextMenu(colorScheme: ColorScheme) {
   let layer = elevation.bottom;
   return {
     background: background(layer),
-    cornerRadius: 6,
-    padding: 6,
+    cornerRadius: 10,
+    padding: 4,
     shadow: elevation.shadow,
     border: border(layer),
     keystrokeMargin: 30,
     item: {
       iconSpacing: 8,
       iconWidth: 14,
-      padding: { left: 4, right: 4, top: 2, bottom: 2 },
+      padding: { left: 6, right: 6, top: 2, bottom: 2 },
       cornerRadius: 6,
       label: text(layer, "sans", { size: "sm" }),
       keystroke: {
diff --git a/styles/src/styleTree/statusBar.ts b/styles/src/styleTree/statusBar.ts
index c539b8a7fb201d8f43409ac3ee84b5450c204144..8af2eb17a4a6f17063f0cf7b91a3aa7870f1d90a 100644
--- a/styles/src/styleTree/statusBar.ts
+++ b/styles/src/styleTree/statusBar.ts
@@ -54,7 +54,7 @@ export default function statusBar(colorScheme: ColorScheme) {
       iconSpacing: 2,
       summarySpacing: 6,
       text: text(layer, "sans", { size: "sm" }),
-      iconColorOk: foreground(layer, "positive"),
+      iconColorOk: foreground(layer, "variant"),
       iconColorWarning: foreground(layer, "warning"),
       iconColorError: foreground(layer, "negative"),
       containerOk: {
diff --git a/styles/src/themes/solarized.ts b/styles/src/themes/solarized.ts
index 577a43c0b6cbcb27e67ec65d62f781c58e869418..d9c5be282c1dbffe664558f15d1fcda5d8c22977 100644
--- a/styles/src/themes/solarized.ts
+++ b/styles/src/themes/solarized.ts
@@ -34,4 +34,4 @@ const ramps = {
 };
 
 export const dark = createColorScheme(`${name}-dark`, false, ramps);
-export const light = createColorScheme(`${name}-light`, true, ramps);
+export const light = createColorScheme(`${name}-light`, true, ramps);
\ No newline at end of file

From 431ac1267a8bb86eaa1e41351c857b8c8ef20c62 Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Thu, 6 Oct 2022 21:08:53 -0400
Subject: [PATCH 28/50] Update contextMenu.ts

---
 styles/src/styleTree/contextMenu.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/styles/src/styleTree/contextMenu.ts b/styles/src/styleTree/contextMenu.ts
index c3c5262a2a2c5fd5fb583a36be4a53bbff7ba24e..b80c6757e897cb18b15a0c06ffb9284dbe94445d 100644
--- a/styles/src/styleTree/contextMenu.ts
+++ b/styles/src/styleTree/contextMenu.ts
@@ -28,15 +28,15 @@ export default function contextMenu(colorScheme: ColorScheme) {
       },
       hover: {
         background: background(layer, "hovered"),
-        text: text(layer, "sans", "hovered", { size: "sm" }),
+        label: text(layer, "sans", "hovered", { size: "sm" }),
       },
       active: {
         background: background(layer, "active"),
-        text: text(layer, "sans", "active", { size: "sm" }),
+        label: text(layer, "sans", "active", { size: "sm" }),
       },
       activeHover: {
         background: background(layer, "active"),
-        text: text(layer, "sans", "active", { size: "sm" }),
+        label: text(layer, "sans", "active", { size: "sm" }),
       },
     },
     separator: {

From 393d7287695ab46216b216570f2fe4e58fd69fa8 Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Sun, 9 Oct 2022 15:27:39 -0400
Subject: [PATCH 29/50] wip

---
 styles/src/themes/common/ramps.ts | 162 +++++++++---------------------
 1 file changed, 48 insertions(+), 114 deletions(-)

diff --git a/styles/src/themes/common/ramps.ts b/styles/src/themes/common/ramps.ts
index e3aef2a33035f8f1c48334677591a8f5c9bec905..77e74c5581cd33dca43e617b720f299037c40bd8 100644
--- a/styles/src/themes/common/ramps.ts
+++ b/styles/src/themes/common/ramps.ts
@@ -139,9 +139,9 @@ function elevation(ramps: RampSet, isLight: boolean, shadow?: Shadow): Elevation
   return {
     ramps,
 
-    bottom: bottomLayer(ramps, isLight),
-    middle: middleLayer(ramps, isLight),
-    top: topLayer(ramps, isLight),
+    bottom: bottomLayer("bottom", ramps, isLight),
+    middle: middleLayer("middle", ramps, isLight),
+    top: topLayer("top", ramps, isLight),
 
     shadow,
   };
@@ -184,30 +184,52 @@ function buildStyleSet(ramp: Scale, styleDefinitions: {
   }
 }
 
-function bottomLayer(ramps: RampSet, isLight: boolean): Layer {
-  let baseSet = buildStyleSet(ramps.neutral, {
+function buildLayer(layer: string) {
+  let base: number
+  let step: number
+
+  if (layer == "bottom") {
+    base = 0.2
+    step = 0.05
+  }
+
+  if (layer == "middle") {
+    base = 0.1
+    step = 0.05
+  }
+
+  if (layer == "top") {
+    base = 0
+    step = 0.05
+  }
+
+  return {
     background: {
-      default: 0.16,
-      hovered: 0.31,
-      pressed: 0.41,
-      active: 1,
-      disabled: 0.16,
+      default: base,
+      hovered: base + step,
+      pressed: base + (step * 2),
+      active: base + (step * 3),
+      disabled: base,
     },
     border: {
-      default: 0.2,
-      hovered: 0.2,
-      pressed: 0.2,
-      active: 0.5,
-      disabled: 0.2,
+      default: base + step,
+      hovered: base + step,
+      pressed: base + step,
+      active: base + step,
+      disabled: base + step,
     },
     foreground: {
       default: 1,
-      hovered: 1,
-      pressed: 1,
-      active: 0,
-      disabled: 0.4,
+      hovered: 1 - step,
+      pressed: 1 - (step * 2),
+      active: 1 - (step * 4),
+      disabled: 1,
     },
-  });
+  }
+}
+
+function bottomLayer(layer = "bottom", ramps: RampSet, isLight: boolean): Layer {
+  let baseSet = buildStyleSet(ramps.neutral, buildLayer(layer));
 
   let variantSet = buildStyleSet(ramps.neutral, {
     background: {
@@ -257,29 +279,7 @@ function bottomLayer(ramps: RampSet, isLight: boolean): Layer {
     },
   });
 
-  let infoSet = buildStyleSet(ramps.blue, {
-    background: {
-      default: 0,
-      hovered: 0.1,
-      pressed: 0.2,
-      active: 0.4,
-      disabled: 0,
-    },
-    border: {
-      default: 0.2,
-      hovered: 0.2,
-      pressed: 0.2,
-      active: 0.6,
-      disabled: 0.1,
-    },
-    foreground: {
-      default: 0.9,
-      hovered: 0.9,
-      pressed: 0.9,
-      active: 0.9,
-      disabled: 0.2,
-    },
-  });
+  let infoSet = buildStyleSet(ramps.blue, buildLayer(layer))
 
   let positiveSet = buildStyleSet(ramps.green, {
     background: {
@@ -364,30 +364,8 @@ function bottomLayer(ramps: RampSet, isLight: boolean): Layer {
   };
 }
 
-function middleLayer(ramps: RampSet, isLight: boolean): Layer {
-  let baseSet = buildStyleSet(ramps.neutral, {
-    background: {
-      default: 0.08,
-      hovered: 0.23,
-      pressed: 0.33,
-      active: 1,
-      disabled: 0.08,
-    },
-    border: {
-      default: 0.2,
-      hovered: 0.2,
-      pressed: 0.2,
-      active: 0.5,
-      disabled: 0.2,
-    },
-    foreground: {
-      default: 1,
-      hovered: 1,
-      pressed: 1,
-      active: 0,
-      disabled: 0.4,
-    },
-  });
+function middleLayer(layer: string = "middle", ramps: RampSet, isLight: boolean): Layer {
+  let baseSet = buildStyleSet(ramps.neutral, buildLayer(layer));
 
   let variantSet = buildStyleSet(ramps.neutral, {
     background: {
@@ -437,29 +415,7 @@ function middleLayer(ramps: RampSet, isLight: boolean): Layer {
     },
   });
 
-  let infoSet = buildStyleSet(ramps.blue, {
-    background: {
-      default: 0,
-      hovered: 0.1,
-      pressed: 0.2,
-      active: 0.4,
-      disabled: 0,
-    },
-    border: {
-      default: 0.2,
-      hovered: 0.2,
-      pressed: 0.2,
-      active: 0.6,
-      disabled: 0.1,
-    },
-    foreground: {
-      default: 0.9,
-      hovered: 0.9,
-      pressed: 0.9,
-      active: 0.9,
-      disabled: 0.2,
-    },
-  });
+  let infoSet = buildStyleSet(ramps.blue, buildLayer(layer))
 
   let positiveSet = buildStyleSet(ramps.green, {
     background: {
@@ -544,31 +500,9 @@ function middleLayer(ramps: RampSet, isLight: boolean): Layer {
   };
 }
 
-function topLayer(ramps: RampSet, isLight: boolean): Layer {
+function topLayer(layer: string = "top", ramps: RampSet, isLight: boolean): Layer {
 
-  let baseSet = buildStyleSet(ramps.neutral, {
-    background: {
-      default: 0,
-      hovered: 0.15,
-      pressed: 0.25,
-      active: 1,
-      disabled: 0,
-    },
-    border: {
-      default: 0.2,
-      hovered: 0.2,
-      pressed: 0.2,
-      active: 0.5,
-      disabled: 0.2,
-    },
-    foreground: {
-      default: 1,
-      hovered: 1,
-      pressed: 1,
-      active: 0,
-      disabled: 0.4,
-    },
-  });
+  let baseSet = buildStyleSet(ramps.neutral, buildLayer(layer));
 
   let variantSet = buildStyleSet(ramps.neutral, {
     background: {

From c4028ef116464e061836345a2b80f2b313c93205 Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Sun, 9 Oct 2022 16:11:02 -0400
Subject: [PATCH 30/50] Calculate styles dynamically

---
 styles/src/themes/common/ramps.ts | 499 +++---------------------------
 1 file changed, 46 insertions(+), 453 deletions(-)

diff --git a/styles/src/themes/common/ramps.ts b/styles/src/themes/common/ramps.ts
index 77e74c5581cd33dca43e617b720f299037c40bd8..8fa690a9109a4382d0e773e1b5414c4798dbb337 100644
--- a/styles/src/themes/common/ramps.ts
+++ b/styles/src/themes/common/ramps.ts
@@ -139,9 +139,9 @@ function elevation(ramps: RampSet, isLight: boolean, shadow?: Shadow): Elevation
   return {
     ramps,
 
-    bottom: bottomLayer("bottom", ramps, isLight),
-    middle: middleLayer("middle", ramps, isLight),
-    top: topLayer("top", ramps, isLight),
+    bottom: bottomLayer(ramps, isLight),
+    middle: middleLayer(ramps, isLight),
+    top: topLayer(ramps, isLight),
 
     shadow,
   };
@@ -184,477 +184,70 @@ function buildStyleSet(ramp: Scale, styleDefinitions: {
   }
 }
 
-function buildLayer(layer: string) {
-  let base: number
-  let step: number
-
-  if (layer == "bottom") {
-    base = 0.2
-    step = 0.05
-  }
-
-  if (layer == "middle") {
-    base = 0.1
-    step = 0.05
-  }
-
-  if (layer == "top") {
-    base = 0
-    step = 0.05
-  }
-
+function buildLayer(fgLayer: number, bgBase: number, fgBase: number, step: number) {
   return {
     background: {
-      default: base,
-      hovered: base + step,
-      pressed: base + (step * 2),
-      active: base + (step * 3),
-      disabled: base,
+      default: bgBase,
+      hovered: bgBase + step,
+      pressed: bgBase + (step * 1.5),
+      active: bgBase + (step * 2.5),
+      disabled: bgBase,
     },
     border: {
-      default: base + step,
-      hovered: base + step,
-      pressed: base + step,
-      active: base + step,
-      disabled: base + step,
+      default: bgBase + step,
+      hovered: bgBase + step,
+      pressed: bgBase + step,
+      active: bgBase + step,
+      disabled: bgBase + step,
     },
     foreground: {
-      default: 1,
-      hovered: 1 - step,
-      pressed: 1 - (step * 2),
-      active: 1 - (step * 4),
-      disabled: 1,
+      default: fgBase,
+      hovered: fgBase - step,
+      pressed: fgBase - step,
+      active: fgBase,
+      disabled: fgLayer - (step * 4),
     },
   }
 }
 
-function bottomLayer(layer = "bottom", ramps: RampSet, isLight: boolean): Layer {
-  let baseSet = buildStyleSet(ramps.neutral, buildLayer(layer));
-
-  let variantSet = buildStyleSet(ramps.neutral, {
-    background: {
-      default: 0.16,
-      hovered: 0.31,
-      pressed: 0.41,
-      active: 1,
-      disabled: 0.16,
-    },
-    border: {
-      default: 0.2,
-      hovered: 0.2,
-      pressed: 0.2,
-      active: 0.5,
-      disabled: 0.2,
-    },
-    foreground: {
-      default: 0.7,
-      hovered: 1,
-      pressed: 1,
-      active: 0,
-      disabled: 0.4,
-    },
-  });
-
-  let onSet = buildStyleSet(ramps.neutral, {
-    background: {
-      default: 0.08,
-      hovered: 0.23,
-      pressed: 0.33,
-      active: 1,
-      disabled: 0.08,
-    },
-    border: {
-      default: 0.2,
-      hovered: 0.2,
-      pressed: 0.2,
-      active: 0.5,
-      disabled: 0.2,
-    },
-    foreground: {
-      default: 1,
-      hovered: 1,
-      pressed: 1,
-      active: 0,
-      disabled: 0.4,
-    },
-  });
-
-  let infoSet = buildStyleSet(ramps.blue, buildLayer(layer))
-
-  let positiveSet = buildStyleSet(ramps.green, {
-    background: {
-      default: 0,
-      hovered: 0.1,
-      pressed: 0.2,
-      active: 0.4,
-      disabled: 0,
-    },
-    border: {
-      default: 0.2,
-      hovered: 0.2,
-      pressed: 0.2,
-      active: 0.6,
-      disabled: 0.1,
-    },
-    foreground: {
-      default: 0.9,
-      hovered: 0.9,
-      pressed: 0.9,
-      active: 0.9,
-      disabled: 0.2,
-    },
-  });
-
-  let warningSet = buildStyleSet(ramps.yellow, {
-    background: {
-      default: 0.1,
-      hovered: 0.1,
-      pressed: 0.2,
-      active: 0.4,
-      disabled: 0,
-    },
-    border: {
-      default: 0.2,
-      hovered: 0.2,
-      pressed: 0.2,
-      active: 0.6,
-      disabled: 0.1,
-    },
-    foreground: {
-      default: 0.6,
-      hovered: 0.9,
-      pressed: 0.9,
-      active: 0.9,
-      disabled: 0.2,
-    },
-  });
-
-  let negativeSet = buildStyleSet(ramps.red, {
-    background: {
-      default: 0,
-      hovered: 0.1,
-      pressed: 0.2,
-      active: 0.4,
-      disabled: 0,
-    },
-    border: {
-      default: 0.1,
-      hovered: 0.2,
-      pressed: 0.2,
-      active: 0.6,
-      disabled: 0.1,
-    },
-    foreground: {
-      default: 0.9,
-      hovered: 0.9,
-      pressed: 0.9,
-      active: 0.9,
-      disabled: 0.2,
-    },
-  });
+function bottomLayer(ramps: RampSet, isLight: boolean): Layer {
+  let fgLayer = 1
 
   return {
-    base: baseSet,
-    variant: variantSet,
-    on: onSet,
-    info: infoSet,
-    positive: positiveSet,
-    warning: warningSet,
-    negative: negativeSet
+    base: buildStyleSet(ramps.neutral, buildLayer(fgLayer, 0.2, 1, 0.08)),
+    variant: buildStyleSet(ramps.neutral, buildLayer(fgLayer, 0.2, 0.7, 0.08)),
+    on: buildStyleSet(ramps.neutral, buildLayer(fgLayer, 0.1, 1, 0.08)),
+    info: buildStyleSet(ramps.blue, buildLayer(fgLayer, 0.2, 1, 0.08)),
+    positive: buildStyleSet(ramps.green, buildLayer(fgLayer, 0.2, 1, 0.08)),
+    warning: buildStyleSet(ramps.yellow, buildLayer(fgLayer, 0.2, 1, 0.08)),
+    negative: buildStyleSet(ramps.red, buildLayer(fgLayer, 0.2, 1, 0.08))
   };
 }
 
-function middleLayer(layer: string = "middle", ramps: RampSet, isLight: boolean): Layer {
-  let baseSet = buildStyleSet(ramps.neutral, buildLayer(layer));
-
-  let variantSet = buildStyleSet(ramps.neutral, {
-    background: {
-      default: 0.08,
-      hovered: 0.23,
-      pressed: 0.33,
-      active: 1,
-      disabled: 0.08,
-    },
-    border: {
-      default: 0.2,
-      hovered: 0.2,
-      pressed: 0.2,
-      active: 0.5,
-      disabled: 0.2,
-    },
-    foreground: {
-      default: 0.7,
-      hovered: 0.7,
-      pressed: 0.7,
-      active: 0,
-      disabled: 0.4,
-    },
-  });
-
-  let onSet = buildStyleSet(ramps.neutral, {
-    background: {
-      default: 0,
-      hovered: 0.15,
-      pressed: 0.25,
-      active: 1,
-      disabled: 0,
-    },
-    border: {
-      default: 0.2,
-      hovered: 0.2,
-      pressed: 0.2,
-      active: 0.5,
-      disabled: 0.2,
-    },
-    foreground: {
-      default: 1,
-      hovered: 1,
-      pressed: 1,
-      active: 0,
-      disabled: 0.4,
-    },
-  });
-
-  let infoSet = buildStyleSet(ramps.blue, buildLayer(layer))
-
-  let positiveSet = buildStyleSet(ramps.green, {
-    background: {
-      default: 0,
-      hovered: 0.1,
-      pressed: 0.2,
-      active: 0.4,
-      disabled: 0,
-    },
-    border: {
-      default: 0.2,
-      hovered: 0.2,
-      pressed: 0.2,
-      active: 0.6,
-      disabled: 0.1,
-    },
-    foreground: {
-      default: 0.9,
-      hovered: 0.9,
-      pressed: 0.9,
-      active: 0.9,
-      disabled: 0.2,
-    },
-  });
-
-  let warningSet = buildStyleSet(ramps.yellow, {
-    background: {
-      default: 0,
-      hovered: 0.1,
-      pressed: 0.2,
-      active: 0.4,
-      disabled: 0,
-    },
-    border: {
-      default: 0.2,
-      hovered: 0.2,
-      pressed: 0.2,
-      active: 0.6,
-      disabled: 0.1,
-    },
-    foreground: {
-      default: 0.9,
-      hovered: 0.9,
-      pressed: 0.9,
-      active: 0.9,
-      disabled: 0.2,
-    },
-  });
-
-  let negativeSet = buildStyleSet(ramps.red, {
-    background: {
-      default: 0,
-      hovered: 0.1,
-      pressed: 0.2,
-      active: 0.4,
-      disabled: 0,
-    },
-    border: {
-      default: 0.2,
-      hovered: 0.2,
-      pressed: 0.2,
-      active: 0.6,
-      disabled: 0.1,
-    },
-    foreground: {
-      default: 0.9,
-      hovered: 0.9,
-      pressed: 0.9,
-      active: 0.9,
-      disabled: 0.2,
-    },
-  });
+function middleLayer(ramps: RampSet, isLight: boolean): Layer {
+  let fgLayer = 1
 
   return {
-    base: baseSet,
-    variant: variantSet,
-    on: onSet,
-    info: infoSet,
-    positive: positiveSet,
-    warning: warningSet,
-    negative: negativeSet
+    base: buildStyleSet(ramps.neutral, buildLayer(fgLayer, 0.1, 1, 0.08)),
+    variant: buildStyleSet(ramps.neutral, buildLayer(fgLayer, 0.1, 0.7, 0.08)),
+    on: buildStyleSet(ramps.neutral, buildLayer(fgLayer, 0, 1, 0.08)),
+    info: buildStyleSet(ramps.blue, buildLayer(fgLayer, 0.1, 1, 0.08)),
+    positive: buildStyleSet(ramps.green, buildLayer(fgLayer, 0.1, 1, 0.08)),
+    warning: buildStyleSet(ramps.yellow, buildLayer(fgLayer, 0.1, 1, 0.08)),
+    negative: buildStyleSet(ramps.red, buildLayer(fgLayer, 0.1, 1, 0.08))
   };
 }
 
-function topLayer(layer: string = "top", ramps: RampSet, isLight: boolean): Layer {
-
-  let baseSet = buildStyleSet(ramps.neutral, buildLayer(layer));
-
-  let variantSet = buildStyleSet(ramps.neutral, {
-    background: {
-      default: 0,
-      hovered: 0.15,
-      pressed: 0.25,
-      active: 1,
-      disabled: 0,
-    },
-    border: {
-      default: 0.2,
-      hovered: 0.2,
-      pressed: 0.2,
-      active: 0.5,
-      disabled: 0.2,
-    },
-    foreground: {
-      default: 0.7,
-      hovered: 0.7,
-      pressed: 0.7,
-      active: 0,
-      disabled: 0.4,
-    },
-  });
-
-  let onSet = buildStyleSet(ramps.neutral, {
-    background: {
-      default: 0.15,
-      hovered: 0.3,
-      pressed: 0.4,
-      active: 1,
-      disabled: 0,
-    },
-    border: {
-      default: 0.2,
-      hovered: 0.2,
-      pressed: 0.2,
-      active: 0.5,
-      disabled: 0.2,
-    },
-    foreground: {
-      default: 1,
-      hovered: 1,
-      pressed: 1,
-      active: 0,
-      disabled: 0.4,
-    },
-  });
-
-  let infoSet = buildStyleSet(ramps.blue, {
-    background: {
-      default: 0,
-      hovered: 0.1,
-      pressed: 0.2,
-      active: 0.4,
-      disabled: 0,
-    },
-    border: {
-      default: 0.2,
-      hovered: 0.2,
-      pressed: 0.2,
-      active: 0.6,
-      disabled: 0.1,
-    },
-    foreground: {
-      default: 0.6,
-      hovered: 0.9,
-      pressed: 0.9,
-      active: 0.3,
-      disabled: 0.2,
-    },
-  });
-
-  let positiveSet = buildStyleSet(ramps.green, {
-    background: {
-      default: 0,
-      hovered: 0.1,
-      pressed: 0.2,
-      active: 0.4,
-      disabled: 0,
-    },
-    border: {
-      default: 0.2,
-      hovered: 0.2,
-      pressed: 0.2,
-      active: 0.6,
-      disabled: 0.1,
-    },
-    foreground: {
-      default: 0.9,
-      hovered: 0.9,
-      pressed: 0.9,
-      active: 0.9,
-      disabled: 0.2,
-    },
-  });
-
-  let warningSet = buildStyleSet(ramps.yellow, {
-    background: {
-      default: 0,
-      hovered: 0.1,
-      pressed: 0.2,
-      active: 0.4,
-      disabled: 0,
-    },
-    border: {
-      default: 0.2,
-      hovered: 0.2,
-      pressed: 0.2,
-      active: 0.6,
-      disabled: 0.1,
-    },
-    foreground: {
-      default: 0.9,
-      hovered: 0.9,
-      pressed: 0.9,
-      active: 0.9,
-      disabled: 0.2,
-    },
-  });
-
-  let negativeSet = buildStyleSet(ramps.red, {
-    background: {
-      default: 0,
-      hovered: 0.1,
-      pressed: 0.2,
-      active: 0.4,
-      disabled: 0,
-    },
-    border: {
-      default: 0.2,
-      hovered: 0.2,
-      pressed: 0.2,
-      active: 0.6,
-      disabled: 0.1,
-    },
-    foreground: {
-      default: 0.9,
-      hovered: 0.9,
-      pressed: 0.9,
-      active: 0.9,
-      disabled: 0.2,
-    },
-  });
+function topLayer(ramps: RampSet, isLight: boolean): Layer {
+  let fgLayer = 1
 
   return {
-    base: baseSet,
-    variant: variantSet,
-    on: onSet,
-    info: infoSet,
-    positive: positiveSet,
-    warning: warningSet,
-    negative: negativeSet
+    base: buildStyleSet(ramps.neutral, buildLayer(fgLayer, 0, 1, 0.08)),
+    variant: buildStyleSet(ramps.neutral, buildLayer(fgLayer, 0, 0.7, 0.08)),
+    on: buildStyleSet(ramps.neutral, buildLayer(fgLayer, 0.1, 1, 0.08)),
+    info: buildStyleSet(ramps.blue, buildLayer(fgLayer, 0, 1, 0.08)),
+    positive: buildStyleSet(ramps.green, buildLayer(fgLayer, 0, 1, 0.08)),
+    warning: buildStyleSet(ramps.yellow, buildLayer(fgLayer, 0, 1, 0.08)),
+    negative: buildStyleSet(ramps.red, buildLayer(fgLayer, 0, 1, 0.08))
   };
 }
\ No newline at end of file

From 2d25e25ec31f7d073e64f35b854fc0413cf75d41 Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Sun, 9 Oct 2022 19:43:06 -0400
Subject: [PATCH 31/50] WIP + Format

---
 styles/src/buildThemes.ts               |   5 +-
 styles/src/colorSchemes.ts              |  18 ++-
 styles/src/styleTree/app.ts             |  12 +-
 styles/src/styleTree/components.ts      |  83 +++++++---
 styles/src/styleTree/contactsPopover.ts |   2 +-
 styles/src/styleTree/contextMenu.ts     |   7 +-
 styles/src/styleTree/editor.ts          |  23 ++-
 styles/src/styleTree/hoverPopover.ts    |   2 +-
 styles/src/styleTree/picker.ts          |  18 +--
 styles/src/styleTree/tabBar.ts          |  25 ++--
 styles/src/styleTree/terminal.ts        |  12 +-
 styles/src/styleTree/workspace.ts       |  13 +-
 styles/src/themes/abruzzo.ts            |  31 ++--
 styles/src/themes/andromeda.ts          |  31 ++--
 styles/src/themes/brushtrees.ts         |  31 ++--
 styles/src/themes/cave.ts               |  31 ++--
 styles/src/themes/common/colorScheme.ts | 100 ++++++-------
 styles/src/themes/common/ramps.ts       | 191 ++++++++++++------------
 styles/src/themes/internal/zed-pro.ts   |  31 ++--
 styles/src/themes/one-dark.ts           |  22 +--
 styles/src/themes/one-light.ts          |  18 +--
 styles/src/themes/rose-pine-dawn.ts     |  26 ++--
 styles/src/themes/rose-pine-moon.ts     |  27 ++--
 styles/src/themes/solarized.ts          |  33 ++--
 styles/src/themes/sulphurpool.ts        |  31 ++--
 styles/src/themes/summercamp.ts         |  31 ++--
 26 files changed, 407 insertions(+), 447 deletions(-)

diff --git a/styles/src/buildThemes.ts b/styles/src/buildThemes.ts
index 8967697dad825bedbc4e9b7324439019ff658322..2ea809f09ebc8ebdad39ef4fec72ef11c8d5b918 100644
--- a/styles/src/buildThemes.ts
+++ b/styles/src/buildThemes.ts
@@ -2,7 +2,10 @@ import * as fs from "fs";
 import * as path from "path";
 import { tmpdir } from "os";
 import app from "./styleTree/app";
-import colorSchemes, { internalColorSchemes, experimentalColorSchemes } from "./colorSchemes";
+import colorSchemes, {
+  internalColorSchemes,
+  experimentalColorSchemes,
+} from "./colorSchemes";
 import snakeCase from "./utils/snakeCase";
 import { ColorScheme } from "./themes/common/colorScheme";
 
diff --git a/styles/src/colorSchemes.ts b/styles/src/colorSchemes.ts
index 97faeab80e67b9610477147cf36382cd57d04fc1..746443119d44377409e685a9a83a4fd0cb2bf63d 100644
--- a/styles/src/colorSchemes.ts
+++ b/styles/src/colorSchemes.ts
@@ -6,11 +6,10 @@ const colorSchemes: ColorScheme[] = [];
 export default colorSchemes;
 
 const internalColorSchemes: ColorScheme[] = [];
-export { internalColorSchemes }
+export { internalColorSchemes };
 
 const experimentalColorSchemes: ColorScheme[] = [];
-export { experimentalColorSchemes }
-
+export { experimentalColorSchemes };
 
 function fillColorSchemes(themesPath: string, colorSchemes: ColorScheme[]) {
   for (const fileName of fs.readdirSync(themesPath)) {
@@ -25,7 +24,12 @@ function fillColorSchemes(themesPath: string, colorSchemes: ColorScheme[]) {
   }
 }
 
-fillColorSchemes(path.resolve(`${__dirname}/themes`), colorSchemes)
-fillColorSchemes(path.resolve(`${__dirname}/themes/internal`), internalColorSchemes)
-fillColorSchemes(path.resolve(`${__dirname}/themes/experiments`), experimentalColorSchemes)
-
+fillColorSchemes(path.resolve(`${__dirname}/themes`), colorSchemes);
+fillColorSchemes(
+  path.resolve(`${__dirname}/themes/internal`),
+  internalColorSchemes
+);
+fillColorSchemes(
+  path.resolve(`${__dirname}/themes/experiments`),
+  experimentalColorSchemes
+);
diff --git a/styles/src/styleTree/app.ts b/styles/src/styleTree/app.ts
index 1a78de05879b63312b7762cfb2ca660c2f13dab8..23d980ba4ef98080f74b3219addd47de0252feda 100644
--- a/styles/src/styleTree/app.ts
+++ b/styles/src/styleTree/app.ts
@@ -24,7 +24,7 @@ export default function app(colorScheme: ColorScheme): Object {
   return {
     meta: {
       name: colorScheme.name,
-      isLight: colorScheme.isLight
+      isLight: colorScheme.isLight,
     },
     picker: picker(colorScheme),
     workspace: workspace(colorScheme),
@@ -61,7 +61,7 @@ export default function app(colorScheme: ColorScheme): Object {
           blue: colorScheme.lowest.ramps.blue.colors(100, "hex"),
           violet: colorScheme.lowest.ramps.violet.colors(100, "hex"),
           magenta: colorScheme.lowest.ramps.magenta.colors(100, "hex"),
-        }
+        },
       },
       middle: {
         ...colorScheme.middle,
@@ -75,7 +75,7 @@ export default function app(colorScheme: ColorScheme): Object {
           blue: colorScheme.middle.ramps.blue.colors(100, "hex"),
           violet: colorScheme.middle.ramps.violet.colors(100, "hex"),
           magenta: colorScheme.middle.ramps.magenta.colors(100, "hex"),
-        }
+        },
       },
       highest: {
         ...colorScheme.highest,
@@ -89,7 +89,7 @@ export default function app(colorScheme: ColorScheme): Object {
           blue: colorScheme.highest.ramps.blue.colors(100, "hex"),
           violet: colorScheme.highest.ramps.violet.colors(100, "hex"),
           magenta: colorScheme.highest.ramps.magenta.colors(100, "hex"),
-        }
+        },
       },
       players: [
         colorScheme.players["0"],
@@ -100,7 +100,7 @@ export default function app(colorScheme: ColorScheme): Object {
         colorScheme.players["5"],
         colorScheme.players["6"],
         colorScheme.players["7"],
-      ]
-    }
+      ],
+    },
   };
 }
diff --git a/styles/src/styleTree/components.ts b/styles/src/styleTree/components.ts
index b6fcb35e4818d2f38a86729a18f1878be1090504..8170d38577620c6ec7fae305a8b06509b296ba84 100644
--- a/styles/src/styleTree/components.ts
+++ b/styles/src/styleTree/components.ts
@@ -2,12 +2,24 @@ import { fontFamilies, fontSizes, FontWeight } from "../common";
 import { Layer, Styles, StyleSets, Style } from "../themes/common/colorScheme";
 
 function isStyleSet(key: any): key is StyleSets {
-  return ["base", "variant", "on", "info", "positive", "warning", "negative"].includes(key);
+  return [
+    "base",
+    "variant",
+    "on",
+    "info",
+    "positive",
+    "warning",
+    "negative",
+  ].includes(key);
 }
 function isStyle(key: any): key is Styles {
   return ["default", "active", "disabled", "hovered", "pressed"].includes(key);
 }
-function getStyle(layer: Layer, possibleStyleSetOrStyle?: any, possibleStyle?: any): Style {
+function getStyle(
+  layer: Layer,
+  possibleStyleSetOrStyle?: any,
+  possibleStyle?: any
+): Style {
   let styleSet: StyleSets = "base";
   let style: Styles = "default";
   if (isStyleSet(possibleStyleSetOrStyle)) {
@@ -24,29 +36,53 @@ function getStyle(layer: Layer, possibleStyleSetOrStyle?: any, possibleStyle?: a
 }
 
 export function background(layer: Layer, style?: Styles): string;
-export function background(layer: Layer, styleSet?: StyleSets, style?: Styles): string;
-export function background(layer: Layer, styleSetOrStyles?: StyleSets | Styles, style?: Styles): string {
+export function background(
+  layer: Layer,
+  styleSet?: StyleSets,
+  style?: Styles
+): string;
+export function background(
+  layer: Layer,
+  styleSetOrStyles?: StyleSets | Styles,
+  style?: Styles
+): string {
   return getStyle(layer, styleSetOrStyles, style).background;
 }
 
 export function borderColor(layer: Layer, style?: Styles): string;
-export function borderColor(layer: Layer, styleSet?: StyleSets, style?: Styles): string;
-export function borderColor(layer: Layer, styleSetOrStyles?: StyleSets | Styles, style?: Styles): string {
+export function borderColor(
+  layer: Layer,
+  styleSet?: StyleSets,
+  style?: Styles
+): string;
+export function borderColor(
+  layer: Layer,
+  styleSetOrStyles?: StyleSets | Styles,
+  style?: Styles
+): string {
   return getStyle(layer, styleSetOrStyles, style).border;
 }
 
 export function foreground(layer: Layer, style?: Styles): string;
-export function foreground(layer: Layer, styleSet?: StyleSets, style?: Styles): string;
-export function foreground(layer: Layer, styleSetOrStyles?: StyleSets | Styles, style?: Styles): string {
+export function foreground(
+  layer: Layer,
+  styleSet?: StyleSets,
+  style?: Styles
+): string;
+export function foreground(
+  layer: Layer,
+  styleSetOrStyles?: StyleSets | Styles,
+  style?: Styles
+): string {
   return getStyle(layer, styleSetOrStyles, style).foreground;
 }
 
 interface Text {
-  family: keyof typeof fontFamilies,
-  color: string,
-  size: number,
-  weight?: FontWeight,
-  underline?: boolean,
+  family: keyof typeof fontFamilies;
+  color: string;
+  size: number;
+  weight?: FontWeight;
+  underline?: boolean;
 }
 
 interface TextProperties {
@@ -66,16 +102,19 @@ export function text(
   layer: Layer,
   fontFamily: keyof typeof fontFamilies,
   styleSet: StyleSets,
-  properties?: TextProperties): Text;
+  properties?: TextProperties
+): Text;
 export function text(
   layer: Layer,
   fontFamily: keyof typeof fontFamilies,
   style: Styles,
-  properties?: TextProperties): Text;
+  properties?: TextProperties
+): Text;
 export function text(
   layer: Layer,
   fontFamily: keyof typeof fontFamilies,
-  properties?: TextProperties): Text;
+  properties?: TextProperties
+): Text;
 export function text(
   layer: Layer,
   fontFamily: keyof typeof fontFamilies,
@@ -101,10 +140,9 @@ export function text(
   };
 }
 
-
 export interface Border {
-  color: string,
-  width: number,
+  color: string;
+  width: number;
   top?: boolean;
   bottom?: boolean;
   left?: boolean;
@@ -137,10 +175,7 @@ export function border(
   style: Styles,
   properties?: BorderProperties
 ): Border;
-export function border(
-  layer: Layer,
-  properties?: BorderProperties
-): Border;
+export function border(layer: Layer, properties?: BorderProperties): Border;
 export function border(
   layer: Layer,
   styleSetStyleOrProperties?: StyleSets | Styles | BorderProperties,
@@ -161,4 +196,4 @@ export function border(
     width: 1,
     ...properties,
   };
-}
\ No newline at end of file
+}
diff --git a/styles/src/styleTree/contactsPopover.ts b/styles/src/styleTree/contactsPopover.ts
index 585af70fbdbe01f9a452c039e21bd49c5030bfb0..1131a5be4a07979598efd157e3d4dd93b84cb768 100644
--- a/styles/src/styleTree/contactsPopover.ts
+++ b/styles/src/styleTree/contactsPopover.ts
@@ -4,5 +4,5 @@ import { background } from "./components";
 export default function workspace(colorScheme: ColorScheme) {
   return {
     background: background(colorScheme.lowest.middle),
-  }
+  };
 }
diff --git a/styles/src/styleTree/contextMenu.ts b/styles/src/styleTree/contextMenu.ts
index b80c6757e897cb18b15a0c06ffb9284dbe94445d..fcdf855e56afd58a82598ca82a4155627747ee3f 100644
--- a/styles/src/styleTree/contextMenu.ts
+++ b/styles/src/styleTree/contextMenu.ts
@@ -1,10 +1,5 @@
 import { ColorScheme } from "../themes/common/colorScheme";
-import {
-  background,
-  border,
-  borderColor,
-  text,
-} from "./components";
+import { background, border, borderColor, text } from "./components";
 
 export default function contextMenu(colorScheme: ColorScheme) {
   let elevation = colorScheme.middle;
diff --git a/styles/src/styleTree/editor.ts b/styles/src/styleTree/editor.ts
index 3b4a46141b9b6494f6cbf61335d0bf2905b5088c..430d366b71bda06a5af22e0e2292d795a1e937b9 100644
--- a/styles/src/styleTree/editor.ts
+++ b/styles/src/styleTree/editor.ts
@@ -1,5 +1,10 @@
 import { fontWeights } from "../common";
-import { ColorScheme, Elevation, Layer, StyleSets } from "../themes/common/colorScheme";
+import {
+  ColorScheme,
+  Elevation,
+  Layer,
+  StyleSets,
+} from "../themes/common/colorScheme";
 import { withOpacity } from "../utils/color";
 import {
   background,
@@ -30,7 +35,7 @@ export default function editor(colorScheme: ColorScheme) {
       header: {
         border: border(layer, {
           top: true,
-        })
+        }),
       },
       message: {
         text: text(layer, "sans", styleSet, { size: "sm" }),
@@ -129,7 +134,7 @@ export default function editor(colorScheme: ColorScheme) {
       weight: fontWeights.normal,
       italic: true,
     },
-  }
+  };
 
   return {
     textColor: syntax.primary.color,
@@ -138,12 +143,18 @@ export default function editor(colorScheme: ColorScheme) {
     highlightedLineBackground: background(layer, "on"),
     codeActions: {
       indicator: foreground(layer, "variant"),
-      verticalScale: 0.55
+      verticalScale: 0.55,
     },
     diffBackgroundDeleted: background(layer, "negative"),
     diffBackgroundInserted: background(layer, "positive"),
-    documentHighlightReadBackground: elevation.ramps.neutral(0.5).alpha(0.2).hex(), // TODO: This was blend
-    documentHighlightWriteBackground: elevation.ramps.neutral(0.5).alpha(0.4).hex(), // TODO: This was blend * 2
+    documentHighlightReadBackground: elevation.ramps
+      .neutral(0.5)
+      .alpha(0.2)
+      .hex(), // TODO: This was blend
+    documentHighlightWriteBackground: elevation.ramps
+      .neutral(0.5)
+      .alpha(0.4)
+      .hex(), // TODO: This was blend * 2
     errorColor: foreground(layer, "negative"),
     gutterBackground: background(layer),
     gutterPaddingFactor: 3.5,
diff --git a/styles/src/styleTree/hoverPopover.ts b/styles/src/styleTree/hoverPopover.ts
index 9e7022d19150f8e7208c4953cb4fd69ba61c0679..56121f20e2ee6bd59ec13052edaa02b1d95154e8 100644
--- a/styles/src/styleTree/hoverPopover.ts
+++ b/styles/src/styleTree/hoverPopover.ts
@@ -10,7 +10,7 @@ export default function HoverPopover(elevation: Elevation) {
       left: 8,
       right: 8,
       top: 4,
-      bottom: 4
+      bottom: 4,
     },
     shadow: elevation.shadow,
     border: border(layer),
diff --git a/styles/src/styleTree/picker.ts b/styles/src/styleTree/picker.ts
index 412e0c1bee49dcf0e14754a372548f82e24104b7..22b91e8d922f24811a6db463eb5349aa899df5eb 100644
--- a/styles/src/styleTree/picker.ts
+++ b/styles/src/styleTree/picker.ts
@@ -1,9 +1,5 @@
 import { ColorScheme } from "../themes/common/colorScheme";
-import {
-  background,
-  border,
-  text,
-} from "./components";
+import { background, border, text } from "./components";
 
 export default function picker(colorScheme: ColorScheme) {
   let elevation = colorScheme.highest;
@@ -14,7 +10,7 @@ export default function picker(colorScheme: ColorScheme) {
     shadow: elevation.shadow,
     cornerRadius: 12,
     padding: {
-      bottom: 4
+      bottom: 4,
     },
     item: {
       padding: {
@@ -26,7 +22,7 @@ export default function picker(colorScheme: ColorScheme) {
       margin: {
         top: 1,
         left: 4,
-        right: 4
+        right: 4,
       },
       cornerRadius: 8,
       text: text(layer, "sans", "variant"),
@@ -34,7 +30,9 @@ export default function picker(colorScheme: ColorScheme) {
       active: {
         background: background(layer, "active"),
         text: text(layer, "sans", "active"),
-        highlightText: text(layer, "sans", "info", "active", { weight: "bold" }),
+        highlightText: text(layer, "sans", "info", "active", {
+          weight: "bold",
+        }),
       },
       hover: {
         background: background(layer, "hovered"),
@@ -61,8 +59,8 @@ export default function picker(colorScheme: ColorScheme) {
         top: 8,
       },
       margin: {
-        bottom: 4
-      }
+        bottom: 4,
+      },
     },
   };
 }
diff --git a/styles/src/styleTree/tabBar.ts b/styles/src/styleTree/tabBar.ts
index 57a8e93890ebac6fd99beedf85e7675848f962e7..83ceba6c5e3313f7d3ce3d22e0b3bdb28534318e 100644
--- a/styles/src/styleTree/tabBar.ts
+++ b/styles/src/styleTree/tabBar.ts
@@ -38,8 +38,8 @@ export default function tabBar(colorScheme: ColorScheme) {
     // When two tabs of the same name are open, a label appears next to them
     description: {
       margin: { left: 8 },
-      ...text(activeLayerInactiveTab, "sans", "disabled", { size: "2xs" })
-    }
+      ...text(activeLayerInactiveTab, "sans", "disabled", { size: "2xs" }),
+    },
   };
 
   const activePaneActiveTab = {
@@ -48,7 +48,7 @@ export default function tabBar(colorScheme: ColorScheme) {
     text: text(activeLayerActiveTab, "sans", { size: "sm" }),
     border: {
       ...tab.border,
-      bottom: false
+      bottom: false,
     },
   };
 
@@ -64,21 +64,24 @@ export default function tabBar(colorScheme: ColorScheme) {
     text: text(inactiveLayerActiveTab, "sans", "variant", { size: "sm" }),
     border: {
       ...tab.border,
-      bottom: false
+      bottom: false,
     },
-  }
+  };
 
   const draggedTab = {
     ...activePaneActiveTab,
     background: withOpacity(tab.background, 0.8),
     border: undefined as any,
     shadow: elevation.above.shadow,
-  }
+  };
 
   return {
     height,
     background: background(activeLayerInactiveTab),
-    dropTargetOverlayColor: withOpacity(foreground(activeLayerInactiveTab), 0.6),
+    dropTargetOverlayColor: withOpacity(
+      foreground(activeLayerInactiveTab),
+      0.6
+    ),
     activePane: {
       activeTab: activePaneActiveTab,
       inactiveTab: tab,
@@ -101,7 +104,7 @@ export default function tabBar(colorScheme: ColorScheme) {
       border: {
         ...tab.border,
         right: false,
-      }
-    }
-  }
-}
\ No newline at end of file
+      },
+    },
+  };
+}
diff --git a/styles/src/styleTree/terminal.ts b/styles/src/styleTree/terminal.ts
index 061f3584e96f59b618916bb31d75d745196052f0..046ebf4e016740eeddafea11f264c260d8c6c33c 100644
--- a/styles/src/styleTree/terminal.ts
+++ b/styles/src/styleTree/terminal.ts
@@ -2,12 +2,12 @@ import { Elevation } from "../themes/common/colorScheme";
 
 export default function terminal(elevation: Elevation) {
   /**
-  * Colors are controlled per-cell in the terminal grid. 
-  * Cells can be set to any of these more 'theme-capable' colors
-  * or can be set directly with RGB values. 
-  * Here are the common interpretations of these names:
-  * https://en.wikipedia.org/wiki/ANSI_escape_code#Colors
-  */
+   * Colors are controlled per-cell in the terminal grid.
+   * Cells can be set to any of these more 'theme-capable' colors
+   * or can be set directly with RGB values.
+   * Here are the common interpretations of these names:
+   * https://en.wikipedia.org/wiki/ANSI_escape_code#Colors
+   */
   return {
     black: elevation.ramps.neutral(0).hex(),
     red: elevation.ramps.red(0.5).hex(),
diff --git a/styles/src/styleTree/workspace.ts b/styles/src/styleTree/workspace.ts
index 109ae5c9fb22e46064961a5cb4e14a0022799a15..7f6b39c4c242809030014714048a16a8f6a7a3ba 100644
--- a/styles/src/styleTree/workspace.ts
+++ b/styles/src/styleTree/workspace.ts
@@ -5,7 +5,7 @@ import {
   border,
   borderColor,
   foreground,
-  text
+  text,
 } from "./components";
 import statusBar from "./statusBar";
 import tabBar from "./tabBar";
@@ -37,10 +37,7 @@ export default function workspace(colorScheme: ColorScheme) {
     },
     sidebar: {
       initialSize: 240,
-      border: border(
-        layer,
-        { left: true, right: true }
-      ),
+      border: border(layer, { left: true, right: true }),
     },
     paneDivider: {
       color: borderColor(layer),
@@ -171,9 +168,9 @@ export default function workspace(colorScheme: ColorScheme) {
       },
       maximized: {
         margin: 32,
-        border: border(elevation.above.top, { "overlay": true }),
+        border: border(elevation.above.top, { overlay: true }),
         shadow: elevation.above.shadow,
-      }
-    }
+      },
+    },
   };
 }
diff --git a/styles/src/themes/abruzzo.ts b/styles/src/themes/abruzzo.ts
index c73aa311d42158dc9773fde4cf4a8374825c1147..915c81a0c905a39e710628366841f6c4796f3407 100644
--- a/styles/src/themes/abruzzo.ts
+++ b/styles/src/themes/abruzzo.ts
@@ -4,25 +4,18 @@ import { colorRamp, createColorScheme } from "./common/ramps";
 const name = "abruzzo";
 
 const ramps = {
-  neutral: chroma.scale([
-    "#1b0d05",
-    "#2c1e18",
-    "#654035",
-    "#9d5e4a",
-    "#b37354",
-    "#c1825a",
-    "#dda66e",
-    "#fbf3e2",
-  ]).domain([
-    0,
-    0.15,
-    0.35,
-    0.5,
-    0.6,
-    0.75,
-    0.85,
-    1
-  ]),
+  neutral: chroma
+    .scale([
+      "#1b0d05",
+      "#2c1e18",
+      "#654035",
+      "#9d5e4a",
+      "#b37354",
+      "#c1825a",
+      "#dda66e",
+      "#fbf3e2",
+    ])
+    .domain([0, 0.15, 0.35, 0.5, 0.6, 0.75, 0.85, 1]),
   red: colorRamp(chroma("#e594c4")),
   orange: colorRamp(chroma("#d9e87e")),
   yellow: colorRamp(chroma("#fd9d83")),
diff --git a/styles/src/themes/andromeda.ts b/styles/src/themes/andromeda.ts
index 1fc59baebfcf0a09a0480627b9d0f58344152b65..2c03c8c680619e4e3372cf22a4d304eb95afd545 100644
--- a/styles/src/themes/andromeda.ts
+++ b/styles/src/themes/andromeda.ts
@@ -4,25 +4,18 @@ import { colorRamp, createColorScheme } from "./common/ramps";
 const name = "andromeda";
 
 const ramps = {
-  neutral: chroma.scale([
-    "#1E2025",
-    "#23262E",
-    "#292E38",
-    "#2E323C",
-    "#ACA8AE",
-    "#CBC9CF",
-    "#E1DDE4",
-    "#F7F7F8",
-  ]).domain([
-    0,
-    0.15,
-    0.25,
-    0.35,
-    0.7,
-    0.8,
-    0.9,
-    1
-  ]),
+  neutral: chroma
+    .scale([
+      "#1E2025",
+      "#23262E",
+      "#292E38",
+      "#2E323C",
+      "#ACA8AE",
+      "#CBC9CF",
+      "#E1DDE4",
+      "#F7F7F8",
+    ])
+    .domain([0, 0.15, 0.25, 0.35, 0.7, 0.8, 0.9, 1]),
   red: colorRamp(chroma("#F92672")),
   orange: colorRamp(chroma("#F39C12")),
   yellow: colorRamp(chroma("#FFE66D")),
diff --git a/styles/src/themes/brushtrees.ts b/styles/src/themes/brushtrees.ts
index 3366f5473783f6a039fb1d87a6c7528ab72f21f9..8ffe07cd66411d10ca3166d359961b3ee103221e 100644
--- a/styles/src/themes/brushtrees.ts
+++ b/styles/src/themes/brushtrees.ts
@@ -4,25 +4,18 @@ import { colorRamp, createColorScheme } from "./common/ramps";
 const name = "brush-tree";
 
 const ramps = {
-  neutral: chroma.scale([
-    "#485867",
-    "#5A6D7A",
-    "#6D828E",
-    "#8299A1",
-    "#98AFB5",
-    "#B0C5C8",
-    "#C9DBDC",
-    "#E3EFEF",
-  ]).domain([
-    0,
-    0.17,
-    0.32,
-    0.48,
-    0.6,
-    0.715,
-    0.858,
-    1
-  ]),
+  neutral: chroma
+    .scale([
+      "#485867",
+      "#5A6D7A",
+      "#6D828E",
+      "#8299A1",
+      "#98AFB5",
+      "#B0C5C8",
+      "#C9DBDC",
+      "#E3EFEF",
+    ])
+    .domain([0, 0.17, 0.32, 0.48, 0.6, 0.715, 0.858, 1]),
   red: colorRamp(chroma("#b38686")),
   orange: colorRamp(chroma("#d8bba2")),
   yellow: colorRamp(chroma("#aab386")),
diff --git a/styles/src/themes/cave.ts b/styles/src/themes/cave.ts
index f9c9b9d49e2843b92ad3b874cda68ecb19b0f10c..23587e415664d4962994cfadd3736948db3dadc6 100644
--- a/styles/src/themes/cave.ts
+++ b/styles/src/themes/cave.ts
@@ -4,25 +4,18 @@ import { colorRamp, createColorScheme } from "./common/ramps";
 const name = "cave";
 
 const ramps = {
-  neutral: chroma.scale([
-    "#19171c",
-    "#26232a",
-    "#585260",
-    "#655f6d",
-    "#7e7887",
-    "#8b8792",
-    "#e2dfe7",
-    "#efecf4",
-  ]).domain([
-    0,
-    0.3,
-    0.45,
-    0.6,
-    0.65,
-    0.7,
-    0.85,
-    1
-  ]),
+  neutral: chroma
+    .scale([
+      "#19171c",
+      "#26232a",
+      "#585260",
+      "#655f6d",
+      "#7e7887",
+      "#8b8792",
+      "#e2dfe7",
+      "#efecf4",
+    ])
+    .domain([0, 0.3, 0.45, 0.6, 0.65, 0.7, 0.85, 1]),
   red: colorRamp(chroma("#be4678")),
   orange: colorRamp(chroma("#aa573c")),
   yellow: colorRamp(chroma("#a06e3b")),
diff --git a/styles/src/themes/common/colorScheme.ts b/styles/src/themes/common/colorScheme.ts
index 94a7fa40c4ab4fad3b1a3a9337658a5a75351eef..0265e6a3d0944e61e33f1e759f9d418583ec1bec 100644
--- a/styles/src/themes/common/colorScheme.ts
+++ b/styles/src/themes/common/colorScheme.ts
@@ -1,83 +1,83 @@
 import { Scale } from "chroma-js";
 
 export interface ColorScheme {
-  name: string,
-  isLight: boolean,
+  name: string;
+  isLight: boolean;
 
-  lowest: Elevation,
-  middle: Elevation,
-  highest: Elevation,
+  lowest: Elevation;
+  middle: Elevation;
+  highest: Elevation;
 
-  players: Players,
+  players: Players;
 }
 
 export interface Player {
-  cursor: string,
-  selection: string,
+  cursor: string;
+  selection: string;
 }
 
 export interface Players {
-  "0": Player,
-  "1": Player,
-  "2": Player,
-  "3": Player,
-  "4": Player,
-  "5": Player,
-  "6": Player,
-  "7": Player,
+  "0": Player;
+  "1": Player;
+  "2": Player;
+  "3": Player;
+  "4": Player;
+  "5": Player;
+  "6": Player;
+  "7": Player;
 }
 
 export interface Elevation {
-  ramps: RampSet,
+  ramps: RampSet;
 
-  bottom: Layer,
-  middle: Layer,
-  top: Layer,
+  bottom: Layer;
+  middle: Layer;
+  top: Layer;
 
-  above?: Elevation,
-  shadow?: Shadow
+  above?: Elevation;
+  shadow?: Shadow;
 }
 
 export interface Shadow {
-  blur: number,
-  color: string,
-  offset: number[],
+  blur: number;
+  color: string;
+  offset: number[];
 }
 
 export type StyleSets = keyof Layer;
 export interface Layer {
-  base: StyleSet,
-  variant: StyleSet,
-  on: StyleSet,
-  info: StyleSet,
-  positive: StyleSet,
-  warning: StyleSet,
-  negative: StyleSet,
+  base: StyleSet;
+  variant: StyleSet;
+  on: StyleSet;
+  info: StyleSet;
+  positive: StyleSet;
+  warning: StyleSet;
+  negative: StyleSet;
 }
 
 export interface RampSet {
-  neutral: Scale,
-  red: Scale,
-  orange: Scale,
-  yellow: Scale,
-  green: Scale,
-  cyan: Scale,
-  blue: Scale,
-  violet: Scale,
-  magenta: Scale,
+  neutral: Scale;
+  red: Scale;
+  orange: Scale;
+  yellow: Scale;
+  green: Scale;
+  cyan: Scale;
+  blue: Scale;
+  violet: Scale;
+  magenta: Scale;
 }
 
 export type Styles = keyof StyleSet;
 export interface StyleSet {
-  default: Style,
-  active: Style,
-  disabled: Style,
-  hovered: Style,
-  pressed: Style,
+  default: Style;
+  active: Style;
+  disabled: Style;
+  hovered: Style;
+  pressed: Style;
 }
 
 export interface Style {
-  background: string,
-  border: string,
-  foreground: string,
-}
\ No newline at end of file
+  background: string;
+  border: string;
+  foreground: string;
+}
diff --git a/styles/src/themes/common/ramps.ts b/styles/src/themes/common/ramps.ts
index 8fa690a9109a4382d0e773e1b5414c4798dbb337..1ce37af5938702d17cc51b260830316f133c481e 100644
--- a/styles/src/themes/common/ramps.ts
+++ b/styles/src/themes/common/ramps.ts
@@ -1,5 +1,15 @@
 import chroma, { Color, Scale } from "chroma-js";
-import { ColorScheme, Elevation, Layer, Player, RampSet, Shadow, Style, Styles, StyleSet } from "./colorScheme";
+import {
+  ColorScheme,
+  Elevation,
+  Layer,
+  Player,
+  RampSet,
+  Shadow,
+  Style,
+  Styles,
+  StyleSet,
+} from "./colorScheme";
 
 export function colorRamp(color: Color): Scale {
   let hue = color.hsl()[0];
@@ -8,7 +18,11 @@ export function colorRamp(color: Color): Scale {
   return chroma.scale([startColor, color, endColor]).mode("hsl");
 }
 
-export function createColorScheme(name: string, isLight: boolean, colorRamps: { [rampName: string]: Scale }): ColorScheme {
+export function createColorScheme(
+  name: string,
+  isLight: boolean,
+  colorRamps: { [rampName: string]: Scale }
+): ColorScheme {
   // Chromajs scales from 0 to 1 flipped if isLight is true
   let baseRamps: typeof colorRamps = {};
 
@@ -20,18 +34,16 @@ export function createColorScheme(name: string, isLight: boolean, colorRamps: {
   // function to any in order to get the colors back out from the original ramps.
   if (isLight) {
     for (var rampName in colorRamps) {
-      baseRamps[rampName] = chroma
-        .scale(colorRamps[rampName].colors(100).reverse());
+      baseRamps[rampName] = chroma.scale(
+        colorRamps[rampName].colors(100).reverse()
+      );
     }
-    baseRamps.neutral = chroma
-      .scale(colorRamps.neutral.colors(100).reverse());
+    baseRamps.neutral = chroma.scale(colorRamps.neutral.colors(100).reverse());
   } else {
     for (var rampName in colorRamps) {
-      baseRamps[rampName] = chroma
-        .scale(colorRamps[rampName].colors(100));
+      baseRamps[rampName] = chroma.scale(colorRamps[rampName].colors(100));
     }
-    baseRamps.neutral = chroma
-      .scale(colorRamps.neutral.colors(100));
+    baseRamps.neutral = chroma.scale(colorRamps.neutral.colors(100));
   }
 
   let baseSet = {
@@ -46,40 +58,28 @@ export function createColorScheme(name: string, isLight: boolean, colorRamps: {
     magenta: baseRamps.magenta,
   };
 
-  let lowest = elevation(
-    resampleSet(
-      baseSet,
-      evenSamples(0, 1)
-    ),
-    isLight,
-  );
+  let lowest = elevation(resampleSet(baseSet, evenSamples(0, 1)), isLight);
 
-  let middle = elevation(
-    resampleSet(
-      baseSet,
-      evenSamples(0.08, 1)
-    ),
-    isLight,
-    {
-      blur: 4,
-      color: baseSet.neutral(isLight ? 7 : 0).darken().alpha(0.2).hex(), // TODO used blend previously. Replace with something else
-      offset: [1, 2],
-    }
-  );
+  let middle = elevation(resampleSet(baseSet, evenSamples(0.08, 1)), isLight, {
+    blur: 4,
+    color: baseSet
+      .neutral(isLight ? 7 : 0)
+      .darken()
+      .alpha(0.2)
+      .hex(), // TODO used blend previously. Replace with something else
+    offset: [1, 2],
+  });
   lowest.above = middle;
 
-  let highest = elevation(
-    resampleSet(
-      baseSet,
-      evenSamples(0.16, 1)
-    ),
-    isLight,
-    {
-      blur: 16,
-      color: baseSet.neutral(isLight ? 7 : 0).darken().alpha(0.2).hex(), // TODO used blend previously. Replace with something else
-      offset: [0, 2],
-    }
-  );
+  let highest = elevation(resampleSet(baseSet, evenSamples(0.16, 1)), isLight, {
+    blur: 16,
+    color: baseSet
+      .neutral(isLight ? 7 : 0)
+      .darken()
+      .alpha(0.2)
+      .hex(), // TODO used blend previously. Replace with something else
+    offset: [0, 2],
+  });
   middle.above = highest;
 
   let players = {
@@ -91,7 +91,7 @@ export function createColorScheme(name: string, isLight: boolean, colorRamps: {
     "5": player(baseSet.cyan),
     "6": player(baseSet.red),
     "7": player(baseSet.yellow),
-  }
+  };
 
   return {
     name,
@@ -109,11 +109,13 @@ function player(ramp: Scale): Player {
   return {
     selection: ramp(0.5).alpha(0.24).hex(),
     cursor: ramp(0.5).hex(),
-  }
+  };
 }
 
 function evenSamples(min: number, max: number): number[] {
-  return Array.from(Array(101).keys()).map((i) => (i / 100) * (max - min) + min);
+  return Array.from(Array(101).keys()).map(
+    (i) => (i / 100) * (max - min) + min
+  );
 }
 
 function resampleSet(ramps: RampSet, samples: number[]): RampSet {
@@ -127,7 +129,7 @@ function resampleSet(ramps: RampSet, samples: number[]): RampSet {
     blue: resample(ramps.blue, samples),
     violet: resample(ramps.violet, samples),
     magenta: resample(ramps.magenta, samples),
-  }
+  };
 }
 
 function resample(scale: Scale, samples: number[]): Scale {
@@ -135,7 +137,11 @@ function resample(scale: Scale, samples: number[]): Scale {
   return chroma.scale(newColors);
 }
 
-function elevation(ramps: RampSet, isLight: boolean, shadow?: Shadow): Elevation {
+function elevation(
+  ramps: RampSet,
+  isLight: boolean,
+  shadow?: Shadow
+): Elevation {
   return {
     ramps,
 
@@ -148,17 +154,20 @@ function elevation(ramps: RampSet, isLight: boolean, shadow?: Shadow): Elevation
 }
 
 interface StyleColors {
-  default: number | Color,
-  hovered: number | Color,
-  pressed: number | Color,
-  active: number | Color,
-  disabled: number | Color,
+  default: number | Color;
+  hovered: number | Color;
+  pressed: number | Color;
+  active: number | Color;
+  disabled: number | Color;
 }
-function buildStyleSet(ramp: Scale, styleDefinitions: {
-  background: StyleColors,
-  border: StyleColors,
-  foreground: StyleColors,
-}): StyleSet {
+function buildStyleSet(
+  ramp: Scale,
+  styleDefinitions: {
+    background: StyleColors;
+    border: StyleColors;
+    foreground: StyleColors;
+  }
+): StyleSet {
   function colorString(indexOrColor: number | Color): string {
     if (typeof indexOrColor === "number") {
       return ramp(indexOrColor).hex();
@@ -172,7 +181,7 @@ function buildStyleSet(ramp: Scale, styleDefinitions: {
       background: colorString(styleDefinitions.background[style]),
       border: colorString(styleDefinitions.border[style]),
       foreground: colorString(styleDefinitions.foreground[style]),
-    }
+    };
   }
 
   return {
@@ -181,73 +190,67 @@ function buildStyleSet(ramp: Scale, styleDefinitions: {
     pressed: buildStyle("pressed"),
     active: buildStyle("active"),
     disabled: buildStyle("disabled"),
-  }
+  };
 }
 
-function buildLayer(fgLayer: number, bgBase: number, fgBase: number, step: number) {
+function buildLayer(bgBase: number, fgBase: number, step: number) {
   return {
     background: {
       default: bgBase,
       hovered: bgBase + step,
-      pressed: bgBase + (step * 1.5),
-      active: bgBase + (step * 2.5),
+      pressed: bgBase + step * 1.5,
+      active: bgBase + step * 3,
       disabled: bgBase,
     },
     border: {
-      default: bgBase + step,
+      default: bgBase + step * 1,
       hovered: bgBase + step,
       pressed: bgBase + step,
-      active: bgBase + step,
-      disabled: bgBase + step,
+      active: bgBase + step * 3,
+      disabled: bgBase + step * 0.5,
     },
     foreground: {
       default: fgBase,
       hovered: fgBase - step,
       pressed: fgBase - step,
       active: fgBase,
-      disabled: fgLayer - (step * 4),
+      disabled: bgBase + step * 4,
     },
-  }
+  };
 }
 
 function bottomLayer(ramps: RampSet, isLight: boolean): Layer {
-  let fgLayer = 1
-
   return {
-    base: buildStyleSet(ramps.neutral, buildLayer(fgLayer, 0.2, 1, 0.08)),
-    variant: buildStyleSet(ramps.neutral, buildLayer(fgLayer, 0.2, 0.7, 0.08)),
-    on: buildStyleSet(ramps.neutral, buildLayer(fgLayer, 0.1, 1, 0.08)),
-    info: buildStyleSet(ramps.blue, buildLayer(fgLayer, 0.2, 1, 0.08)),
-    positive: buildStyleSet(ramps.green, buildLayer(fgLayer, 0.2, 1, 0.08)),
-    warning: buildStyleSet(ramps.yellow, buildLayer(fgLayer, 0.2, 1, 0.08)),
-    negative: buildStyleSet(ramps.red, buildLayer(fgLayer, 0.2, 1, 0.08))
+    base: buildStyleSet(ramps.neutral, buildLayer(0.2, 1, 0.08)),
+    variant: buildStyleSet(ramps.neutral, buildLayer(0.2, 0.7, 0.08)),
+    on: buildStyleSet(ramps.neutral, buildLayer(0.1, 1, 0.08)),
+    info: buildStyleSet(ramps.blue, buildLayer(0.1, 1, 0.08)),
+    positive: buildStyleSet(ramps.green, buildLayer(0.1, 1, 0.08)),
+    warning: buildStyleSet(ramps.yellow, buildLayer(0.1, 1, 0.08)),
+    negative: buildStyleSet(ramps.red, buildLayer(0.1, 1, 0.08)),
   };
 }
 
 function middleLayer(ramps: RampSet, isLight: boolean): Layer {
-  let fgLayer = 1
-
   return {
-    base: buildStyleSet(ramps.neutral, buildLayer(fgLayer, 0.1, 1, 0.08)),
-    variant: buildStyleSet(ramps.neutral, buildLayer(fgLayer, 0.1, 0.7, 0.08)),
-    on: buildStyleSet(ramps.neutral, buildLayer(fgLayer, 0, 1, 0.08)),
-    info: buildStyleSet(ramps.blue, buildLayer(fgLayer, 0.1, 1, 0.08)),
-    positive: buildStyleSet(ramps.green, buildLayer(fgLayer, 0.1, 1, 0.08)),
-    warning: buildStyleSet(ramps.yellow, buildLayer(fgLayer, 0.1, 1, 0.08)),
-    negative: buildStyleSet(ramps.red, buildLayer(fgLayer, 0.1, 1, 0.08))
+    base: buildStyleSet(ramps.neutral, buildLayer(0.1, 1, 0.08)),
+    variant: buildStyleSet(ramps.neutral, buildLayer(0.1, 0.7, 0.08)),
+    on: buildStyleSet(ramps.neutral, buildLayer(0, 1, 0.08)),
+    info: buildStyleSet(ramps.blue, buildLayer(0.1, 1, 0.08)),
+    positive: buildStyleSet(ramps.green, buildLayer(0.1, 1, 0.08)),
+    warning: buildStyleSet(ramps.yellow, buildLayer(0.1, 1, 0.08)),
+    negative: buildStyleSet(ramps.red, buildLayer(0.1, 1, 0.08)),
   };
 }
 
 function topLayer(ramps: RampSet, isLight: boolean): Layer {
-  let fgLayer = 1
-
   return {
-    base: buildStyleSet(ramps.neutral, buildLayer(fgLayer, 0, 1, 0.08)),
-    variant: buildStyleSet(ramps.neutral, buildLayer(fgLayer, 0, 0.7, 0.08)),
-    on: buildStyleSet(ramps.neutral, buildLayer(fgLayer, 0.1, 1, 0.08)),
-    info: buildStyleSet(ramps.blue, buildLayer(fgLayer, 0, 1, 0.08)),
-    positive: buildStyleSet(ramps.green, buildLayer(fgLayer, 0, 1, 0.08)),
-    warning: buildStyleSet(ramps.yellow, buildLayer(fgLayer, 0, 1, 0.08)),
-    negative: buildStyleSet(ramps.red, buildLayer(fgLayer, 0, 1, 0.08))
+    base: buildStyleSet(ramps.neutral, buildLayer(0, 1, 0.08)),
+    variant: buildStyleSet(ramps.neutral, buildLayer(0, 0.7, 0.08)),
+    on: buildStyleSet(ramps.neutral, buildLayer(0.1, 1, 0.08)),
+    info: buildStyleSet(ramps.blue, buildLayer(0.1, 1, 0.08)),
+    positive: buildStyleSet(ramps.green, buildLayer(0.1, 1, 0.08)),
+    warning: buildStyleSet(ramps.yellow, buildLayer(0.1, 1, 0.08)),
+    negative: buildStyleSet(ramps.red, buildLayer(0.1, 1, 0.08)),
   };
-}
\ No newline at end of file
+}
diff --git a/styles/src/themes/internal/zed-pro.ts b/styles/src/themes/internal/zed-pro.ts
index 16b9c682f203a41411b60c1566edf0e275aba768..466db7a03d2a8a73f162b18b646a5e8711357b63 100644
--- a/styles/src/themes/internal/zed-pro.ts
+++ b/styles/src/themes/internal/zed-pro.ts
@@ -4,25 +4,18 @@ import { colorRamp, createColorScheme } from "../common/ramps";
 const name = "zed-pro";
 
 const ramps = {
-  neutral: chroma.scale([
-    "#101010",
-    "#1C1C1C",
-    "#212121",
-    "#2D2D2D",
-    "#B9B9B9",
-    "#DADADA",
-    "#E6E6E6",
-    "#FFFFFF",
-  ]).domain([
-    0,
-    0.1,
-    0.2,
-    0.3,
-    0.7,
-    0.8,
-    0.9,
-    1
-  ]),
+  neutral: chroma
+    .scale([
+      "#101010",
+      "#1C1C1C",
+      "#212121",
+      "#2D2D2D",
+      "#B9B9B9",
+      "#DADADA",
+      "#E6E6E6",
+      "#FFFFFF",
+    ])
+    .domain([0, 0.1, 0.2, 0.3, 0.7, 0.8, 0.9, 1]),
   red: colorRamp(chroma("#DC604F")),
   orange: colorRamp(chroma("#DE782F")),
   yellow: colorRamp(chroma("#E0B750")),
diff --git a/styles/src/themes/one-dark.ts b/styles/src/themes/one-dark.ts
index 508c8cb93526e24e294709302e73887e1aea8613..4af44444710e93cd04b3c05f6878d057392d32fe 100644
--- a/styles/src/themes/one-dark.ts
+++ b/styles/src/themes/one-dark.ts
@@ -24,25 +24,9 @@ const base0E = "#c678dd";
 const base0F = "#be5046";
 
 const ramps = {
-  neutral: chroma.scale([
-    base00,
-    base01,
-    base02,
-    base03,
-    base04,
-    base05,
-    base06,
-    base07,
-  ]).domain([
-    0.05,
-    0.22,
-    0.25,
-    0.45,
-    0.62,
-    0.8,
-    0.9,
-    1
-  ]),
+  neutral: chroma
+    .scale([base00, base01, base02, base03, base04, base05, base06, base07])
+    .domain([0.05, 0.22, 0.25, 0.45, 0.62, 0.8, 0.9, 1]),
   red: colorRamp(chroma(base08)),
   orange: colorRamp(chroma(base09)),
   yellow: colorRamp(chroma(base0A)),
diff --git a/styles/src/themes/one-light.ts b/styles/src/themes/one-light.ts
index 4a681a34752090eaadec4780733beab3eb165721..585ee7a170826f5b09e0f8b57be69cd3040c9b08 100644
--- a/styles/src/themes/one-light.ts
+++ b/styles/src/themes/one-light.ts
@@ -24,21 +24,9 @@ const base0E = "#a626a4";
 const base0F = "#986801";
 
 const ramps = {
-  neutral: chroma.scale([
-    base00,
-    base01,
-    base02,
-    base03,
-    base04,
-    base05,
-    base06,
-    base07,
-  ]).domain([
-    0,
-    0.05,
-    0.77,
-    1
-  ]),
+  neutral: chroma
+    .scale([base00, base01, base02, base03, base04, base05, base06, base07])
+    .domain([0, 0.05, 0.77, 1]),
   red: colorRamp(chroma(base08)),
   orange: colorRamp(chroma(base09)),
   yellow: colorRamp(chroma(base0A)),
diff --git a/styles/src/themes/rose-pine-dawn.ts b/styles/src/themes/rose-pine-dawn.ts
index e3227d0139b79452d450a455bac9dc8baf64dfd0..514e54bcd4cbf024b7bff024c99475c5c40fd502 100644
--- a/styles/src/themes/rose-pine-dawn.ts
+++ b/styles/src/themes/rose-pine-dawn.ts
@@ -4,20 +4,18 @@ import { colorRamp, createColorScheme } from "./common/ramps";
 const name = "rosé-pine-dawn";
 
 const ramps = {
-  neutral: chroma.scale([
-    "#575279",
-    "#797593",
-    "#9893A5",
-    "#B5AFB8",
-    "#D3CCCC",
-    "#F2E9E1",
-    "#FFFAF3",
-    "#FAF4ED",
-  ]).domain([
-    0,
-    0.73,
-    1
-  ]),
+  neutral: chroma
+    .scale([
+      "#575279",
+      "#797593",
+      "#9893A5",
+      "#B5AFB8",
+      "#D3CCCC",
+      "#F2E9E1",
+      "#FFFAF3",
+      "#FAF4ED",
+    ])
+    .domain([0, 0.73, 1]),
   red: colorRamp(chroma("#B4637A")),
   orange: colorRamp(chroma("#D7827E")),
   yellow: colorRamp(chroma("#EA9D34")),
diff --git a/styles/src/themes/rose-pine-moon.ts b/styles/src/themes/rose-pine-moon.ts
index d0266a453dd718f97fbc0df5d2646462df60c2ce..52a4252d31df5a0e0e54e3e5ea5de913c94672e9 100644
--- a/styles/src/themes/rose-pine-moon.ts
+++ b/styles/src/themes/rose-pine-moon.ts
@@ -4,21 +4,18 @@ import { colorRamp, createColorScheme } from "./common/ramps";
 const name = "rosé-pine-moon";
 
 const ramps = {
-  neutral: chroma.scale([
-    "#232136",
-    "#2A273F",
-    "#393552",
-    "#3E3A53",
-    "#56526C",
-    "#6E6A86",
-    "#908CAA",
-    "#E0DEF4",
-  ]).domain([
-    0,
-    0.3,
-    0.55,
-    1
-  ]),
+  neutral: chroma
+    .scale([
+      "#232136",
+      "#2A273F",
+      "#393552",
+      "#3E3A53",
+      "#56526C",
+      "#6E6A86",
+      "#908CAA",
+      "#E0DEF4",
+    ])
+    .domain([0, 0.3, 0.55, 1]),
   red: colorRamp(chroma("#EB6F92")),
   orange: colorRamp(chroma("#EBBCBA")),
   yellow: colorRamp(chroma("#F6C177")),
diff --git a/styles/src/themes/solarized.ts b/styles/src/themes/solarized.ts
index d9c5be282c1dbffe664558f15d1fcda5d8c22977..b528708eca8aa4325c34c310e9a3b6fb8d547759 100644
--- a/styles/src/themes/solarized.ts
+++ b/styles/src/themes/solarized.ts
@@ -4,25 +4,18 @@ import { colorRamp, createColorScheme } from "./common/ramps";
 const name = "solarized";
 
 const ramps = {
-  neutral: chroma.scale([
-    "#002b36",
-    "#073642",
-    "#586e75",
-    "#657b83",
-    "#839496",
-    "#93a1a1",
-    "#eee8d5",
-    "#fdf6e3",
-  ]).domain([
-    0,
-    0.2,
-    0.38,
-    0.45,
-    0.65,
-    0.7,
-    0.85,
-    1
-  ]),
+  neutral: chroma
+    .scale([
+      "#002b36",
+      "#073642",
+      "#586e75",
+      "#657b83",
+      "#839496",
+      "#93a1a1",
+      "#eee8d5",
+      "#fdf6e3",
+    ])
+    .domain([0, 0.2, 0.38, 0.45, 0.65, 0.7, 0.85, 1]),
   red: colorRamp(chroma("#dc322f")),
   orange: colorRamp(chroma("#cb4b16")),
   yellow: colorRamp(chroma("#b58900")),
@@ -34,4 +27,4 @@ const ramps = {
 };
 
 export const dark = createColorScheme(`${name}-dark`, false, ramps);
-export const light = createColorScheme(`${name}-light`, true, ramps);
\ No newline at end of file
+export const light = createColorScheme(`${name}-light`, true, ramps);
diff --git a/styles/src/themes/sulphurpool.ts b/styles/src/themes/sulphurpool.ts
index 2acd8041bd089abd0deaa25eadbb85723080707e..976e7cf7cda17afb09852dc59ae6389685c3dcfc 100644
--- a/styles/src/themes/sulphurpool.ts
+++ b/styles/src/themes/sulphurpool.ts
@@ -4,25 +4,18 @@ import { colorRamp, createColorScheme } from "./common/ramps";
 const name = "sulphurpool";
 
 const ramps = {
-  neutral: chroma.scale([
-    "#202746",
-    "#293256",
-    "#5e6687",
-    "#6b7394",
-    "#898ea4",
-    "#979db4",
-    "#dfe2f1",
-    "#f5f7ff",
-  ]).domain([
-    0,
-    0.2,
-    0.38,
-    0.45,
-    0.65,
-    0.7,
-    0.85,
-    1
-  ]),
+  neutral: chroma
+    .scale([
+      "#202746",
+      "#293256",
+      "#5e6687",
+      "#6b7394",
+      "#898ea4",
+      "#979db4",
+      "#dfe2f1",
+      "#f5f7ff",
+    ])
+    .domain([0, 0.2, 0.38, 0.45, 0.65, 0.7, 0.85, 1]),
   red: colorRamp(chroma("#c94922")),
   orange: colorRamp(chroma("#c76b29")),
   yellow: colorRamp(chroma("#c08b30")),
diff --git a/styles/src/themes/summercamp.ts b/styles/src/themes/summercamp.ts
index 6f2ecbcc9c1c919bed642654bb7a45cbb7e9949f..f762785414389ae776d4e951a60ddac56883cb76 100644
--- a/styles/src/themes/summercamp.ts
+++ b/styles/src/themes/summercamp.ts
@@ -4,25 +4,18 @@ import { colorRamp, createColorScheme } from "./common/ramps";
 const name = "summercamp";
 
 const ramps = {
-  neutral: chroma.scale([
-    "#1c1810",
-    "#2a261c",
-    "#3a3527",
-    "#3a3527",
-    "#5f5b45",
-    "#736e55",
-    "#bab696",
-    "#f8f5de",
-  ]).domain([
-    0,
-    0.2,
-    0.38,
-    0.4,
-    0.65,
-    0.7,
-    0.85,
-    1
-  ]),
+  neutral: chroma
+    .scale([
+      "#1c1810",
+      "#2a261c",
+      "#3a3527",
+      "#3a3527",
+      "#5f5b45",
+      "#736e55",
+      "#bab696",
+      "#f8f5de",
+    ])
+    .domain([0, 0.2, 0.38, 0.4, 0.65, 0.7, 0.85, 1]),
   red: colorRamp(chroma("#e35142")),
   orange: colorRamp(chroma("#fba11b")),
   yellow: colorRamp(chroma("#f2ff27")),

From 0c68abbe17c59353e4ea53130666253f2a215452 Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Mon, 10 Oct 2022 16:53:38 -0400
Subject: [PATCH 32/50] Revert tab bar to pre-elevation style

---
 styles/src/styleTree/tabBar.ts    | 44 +++++++++++++++----------------
 styles/src/themes/common/ramps.ts |  4 +--
 2 files changed, 23 insertions(+), 25 deletions(-)

diff --git a/styles/src/styleTree/tabBar.ts b/styles/src/styleTree/tabBar.ts
index 83ceba6c5e3313f7d3ce3d22e0b3bdb28534318e..1bde8ad83e3917a1b74d1702d41265b40f5d524f 100644
--- a/styles/src/styleTree/tabBar.ts
+++ b/styles/src/styleTree/tabBar.ts
@@ -6,16 +6,14 @@ export default function tabBar(colorScheme: ColorScheme) {
   const height = 32;
 
   let elevation = colorScheme.lowest;
-  let activeLayerActiveTab = elevation.top;
-  let activeLayerInactiveTab = elevation.middle;
-  let inactiveLayerActiveTab = elevation.middle;
-  let inactiveLayerInactiveTab = elevation.bottom;
+  let activeLayer = elevation.top;
+  let layer = elevation.middle;
 
   const tab = {
     height,
-    text: text(activeLayerInactiveTab, "sans", "variant", { size: "sm" }),
-    background: background(activeLayerInactiveTab),
-    border: border(activeLayerInactiveTab, {
+    text: text(layer, "sans", "variant", { size: "sm" }),
+    background: background(layer),
+    border: border(layer, {
       right: true,
       bottom: true,
       overlay: true,
@@ -28,24 +26,24 @@ export default function tabBar(colorScheme: ColorScheme) {
 
     // Close icons
     iconWidth: 8,
-    iconClose: foreground(activeLayerInactiveTab, "variant"),
-    iconCloseActive: foreground(activeLayerInactiveTab),
+    iconClose: foreground(layer, "variant"),
+    iconCloseActive: foreground(layer),
 
     // Indicators
-    iconConflict: foreground(activeLayerInactiveTab, "warning"),
-    iconDirty: foreground(activeLayerInactiveTab, "info"),
+    iconConflict: foreground(layer, "warning"),
+    iconDirty: foreground(layer, "info"),
 
     // When two tabs of the same name are open, a label appears next to them
     description: {
       margin: { left: 8 },
-      ...text(activeLayerInactiveTab, "sans", "disabled", { size: "2xs" }),
+      ...text(layer, "sans", "disabled", { size: "2xs" }),
     },
   };
 
   const activePaneActiveTab = {
     ...tab,
-    background: background(activeLayerActiveTab),
-    text: text(activeLayerActiveTab, "sans", { size: "sm" }),
+    background: background(activeLayer),
+    text: text(activeLayer, "sans", "active", { size: "sm" }),
     border: {
       ...tab.border,
       bottom: false,
@@ -54,14 +52,14 @@ export default function tabBar(colorScheme: ColorScheme) {
 
   const inactivePaneInactiveTab = {
     ...tab,
-    background: background(inactiveLayerInactiveTab),
-    text: text(inactiveLayerInactiveTab, "sans", "variant", { size: "sm" }),
+    background: background(layer),
+    text: text(layer, "sans", "variant", { size: "sm" }),
   };
 
   const inactivePaneActiveTab = {
     ...tab,
-    background: background(inactiveLayerActiveTab),
-    text: text(inactiveLayerActiveTab, "sans", "variant", { size: "sm" }),
+    background: background(activeLayer),
+    text: text(layer, "sans", "variant", { size: "sm" }),
     border: {
       ...tab.border,
       bottom: false,
@@ -70,16 +68,16 @@ export default function tabBar(colorScheme: ColorScheme) {
 
   const draggedTab = {
     ...activePaneActiveTab,
-    background: withOpacity(tab.background, 0.8),
+    background: withOpacity(tab.background, 0.95),
     border: undefined as any,
     shadow: elevation.above.shadow,
   };
 
   return {
     height,
-    background: background(activeLayerInactiveTab),
+    background: background(layer),
     dropTargetOverlayColor: withOpacity(
-      foreground(activeLayerInactiveTab),
+      foreground(layer),
       0.6
     ),
     activePane: {
@@ -92,11 +90,11 @@ export default function tabBar(colorScheme: ColorScheme) {
     },
     draggedTab,
     paneButton: {
-      color: foreground(activeLayerInactiveTab, "variant"),
+      color: foreground(layer, "variant"),
       iconWidth: 12,
       buttonWidth: activePaneActiveTab.height,
       hover: {
-        color: foreground(activeLayerInactiveTab, "hovered"),
+        color: foreground(layer, "hovered"),
       },
     },
     paneButtonContainer: {
diff --git a/styles/src/themes/common/ramps.ts b/styles/src/themes/common/ramps.ts
index 1ce37af5938702d17cc51b260830316f133c481e..fbf9987652e913a44550e114a86d5b938fcc4cd6 100644
--- a/styles/src/themes/common/ramps.ts
+++ b/styles/src/themes/common/ramps.ts
@@ -211,8 +211,8 @@ function buildLayer(bgBase: number, fgBase: number, step: number) {
     },
     foreground: {
       default: fgBase,
-      hovered: fgBase - step,
-      pressed: fgBase - step,
+      hovered: fgBase,
+      pressed: fgBase,
       active: fgBase,
       disabled: bgBase + step * 4,
     },

From a87d9d3578c20fa4b571d71a223ffe7f923b24ce Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Mon, 10 Oct 2022 17:35:12 -0400
Subject: [PATCH 33/50] Make code actions/autocomplete match contextMenu style

---
 styles/src/styleTree/editor.ts | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/styles/src/styleTree/editor.ts b/styles/src/styleTree/editor.ts
index 430d366b71bda06a5af22e0e2292d795a1e937b9..923c8719ffe1d48f8b0676f95d4c2b39da162daa 100644
--- a/styles/src/styleTree/editor.ts
+++ b/styles/src/styleTree/editor.ts
@@ -1,7 +1,6 @@
 import { fontWeights } from "../common";
 import {
   ColorScheme,
-  Elevation,
   Layer,
   StyleSets,
 } from "../themes/common/colorScheme";
@@ -173,23 +172,23 @@ export default function editor(colorScheme: ColorScheme) {
       colorScheme.players[7],
     ],
     autocomplete: {
-      background: background(elevation.above.top),
+      background: background(elevation.bottom),
       cornerRadius: 8,
       padding: 4,
       margin: {
         left: -14,
       },
-      border: border(elevation.above.top),
+      border: border(elevation.bottom),
       shadow: elevation.above.shadow,
       matchHighlight: elevation.above.ramps.blue(0.5).hex(),
       item: autocompleteItem,
       hoveredItem: {
         ...autocompleteItem,
-        background: background(elevation.above.top, "hovered"),
+        background: background(elevation.bottom, "hovered"),
       },
       selectedItem: {
         ...autocompleteItem,
-        background: withOpacity(background(elevation.above.top, "active"), 0.2),
+        background: background(elevation.bottom, "active"),
       },
     },
     diagnosticHeader: {

From 61dc703a588e3341264aa78ed3b78a1751eb7a40 Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Mon, 10 Oct 2022 17:42:23 -0400
Subject: [PATCH 34/50] Improve feedback button hover state

---
 styles/src/styleTree/statusBar.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/styles/src/styleTree/statusBar.ts b/styles/src/styleTree/statusBar.ts
index 8af2eb17a4a6f17063f0cf7b91a3aa7870f1d90a..65bd2025d5916f4987fd3c1ff47f06c86008df0f 100644
--- a/styles/src/styleTree/statusBar.ts
+++ b/styles/src/styleTree/statusBar.ts
@@ -46,7 +46,7 @@ export default function statusBar(colorScheme: ColorScheme) {
     },
     feedback: {
       ...text(layer, "sans", "variant"),
-      hover: text(layer, "sans", "variant", "hovered"),
+      hover: text(layer, "sans", "hovered"),
     },
     diagnosticSummary: {
       height: 20,

From 95bc18a9959b31e4177e5757eb5222133b047a6c Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Mon, 10 Oct 2022 17:50:41 -0400
Subject: [PATCH 35/50] Fix color ramps to use colored fg

---
 styles/src/styleTree/editor.ts    |  3 +--
 styles/src/themes/common/ramps.ts | 24 ++++++++++++------------
 2 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/styles/src/styleTree/editor.ts b/styles/src/styleTree/editor.ts
index 923c8719ffe1d48f8b0676f95d4c2b39da162daa..6199ba64c5cf71160414aa853e532e9ec51fb040 100644
--- a/styles/src/styleTree/editor.ts
+++ b/styles/src/styleTree/editor.ts
@@ -4,7 +4,6 @@ import {
   Layer,
   StyleSets,
 } from "../themes/common/colorScheme";
-import { withOpacity } from "../utils/color";
 import {
   background,
   border,
@@ -227,7 +226,7 @@ export default function editor(colorScheme: ColorScheme) {
     errorDiagnostic: diagnostic(elevation.middle, "negative"),
     warningDiagnostic: diagnostic(elevation.middle, "warning"),
     informationDiagnostic: diagnostic(elevation.middle, "info"),
-    hintDiagnostic: diagnostic(elevation.middle, "positive"),
+    hintDiagnostic: diagnostic(elevation.middle, "warning"),
     invalidErrorDiagnostic: diagnostic(elevation.middle, "base"),
     invalidHintDiagnostic: diagnostic(elevation.middle, "base"),
     invalidInformationDiagnostic: diagnostic(elevation.middle, "base"),
diff --git a/styles/src/themes/common/ramps.ts b/styles/src/themes/common/ramps.ts
index fbf9987652e913a44550e114a86d5b938fcc4cd6..cffd6f7af4e657c362bb585e5d23816d08014582 100644
--- a/styles/src/themes/common/ramps.ts
+++ b/styles/src/themes/common/ramps.ts
@@ -224,10 +224,10 @@ function bottomLayer(ramps: RampSet, isLight: boolean): Layer {
     base: buildStyleSet(ramps.neutral, buildLayer(0.2, 1, 0.08)),
     variant: buildStyleSet(ramps.neutral, buildLayer(0.2, 0.7, 0.08)),
     on: buildStyleSet(ramps.neutral, buildLayer(0.1, 1, 0.08)),
-    info: buildStyleSet(ramps.blue, buildLayer(0.1, 1, 0.08)),
-    positive: buildStyleSet(ramps.green, buildLayer(0.1, 1, 0.08)),
-    warning: buildStyleSet(ramps.yellow, buildLayer(0.1, 1, 0.08)),
-    negative: buildStyleSet(ramps.red, buildLayer(0.1, 1, 0.08)),
+    info: buildStyleSet(ramps.blue, buildLayer(0.1, 0.5, 0.08)),
+    positive: buildStyleSet(ramps.green, buildLayer(0.1, 0.5, 0.08)),
+    warning: buildStyleSet(ramps.yellow, buildLayer(0.1, 0.5, 0.08)),
+    negative: buildStyleSet(ramps.red, buildLayer(0.1, 0.5, 0.08)),
   };
 }
 
@@ -236,10 +236,10 @@ function middleLayer(ramps: RampSet, isLight: boolean): Layer {
     base: buildStyleSet(ramps.neutral, buildLayer(0.1, 1, 0.08)),
     variant: buildStyleSet(ramps.neutral, buildLayer(0.1, 0.7, 0.08)),
     on: buildStyleSet(ramps.neutral, buildLayer(0, 1, 0.08)),
-    info: buildStyleSet(ramps.blue, buildLayer(0.1, 1, 0.08)),
-    positive: buildStyleSet(ramps.green, buildLayer(0.1, 1, 0.08)),
-    warning: buildStyleSet(ramps.yellow, buildLayer(0.1, 1, 0.08)),
-    negative: buildStyleSet(ramps.red, buildLayer(0.1, 1, 0.08)),
+    info: buildStyleSet(ramps.blue, buildLayer(0.1, 0.5, 0.08)),
+    positive: buildStyleSet(ramps.green, buildLayer(0.1, 0.5, 0.08)),
+    warning: buildStyleSet(ramps.yellow, buildLayer(0.1, 0.5, 0.08)),
+    negative: buildStyleSet(ramps.red, buildLayer(0.1, 0.5, 0.08)),
   };
 }
 
@@ -248,9 +248,9 @@ function topLayer(ramps: RampSet, isLight: boolean): Layer {
     base: buildStyleSet(ramps.neutral, buildLayer(0, 1, 0.08)),
     variant: buildStyleSet(ramps.neutral, buildLayer(0, 0.7, 0.08)),
     on: buildStyleSet(ramps.neutral, buildLayer(0.1, 1, 0.08)),
-    info: buildStyleSet(ramps.blue, buildLayer(0.1, 1, 0.08)),
-    positive: buildStyleSet(ramps.green, buildLayer(0.1, 1, 0.08)),
-    warning: buildStyleSet(ramps.yellow, buildLayer(0.1, 1, 0.08)),
-    negative: buildStyleSet(ramps.red, buildLayer(0.1, 1, 0.08)),
+    info: buildStyleSet(ramps.blue, buildLayer(0.1, 0.5, 0.08)),
+    positive: buildStyleSet(ramps.green, buildLayer(0.1, 0.5, 0.08)),
+    warning: buildStyleSet(ramps.yellow, buildLayer(0.1, 0.5, 0.08)),
+    negative: buildStyleSet(ramps.red, buildLayer(0.1, 0.5, 0.08)),
   };
 }

From 5708879b5aab27582a01d33e592137dc5a870c95 Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Tue, 11 Oct 2022 17:38:28 -0400
Subject: [PATCH 36/50] Style elevations & update styleTrees

Also rename `info` -> `accent`

Co-Authored-By: Kay Simmons <3323631+Kethku@users.noreply.github.com>
---
 crates/theme/src/theme.rs                     |   3 +-
 crates/theme_testbench/src/theme_testbench.rs |  10 +-
 styles/src/styleTree/commandPalette.ts        |   4 +-
 styles/src/styleTree/components.ts            |   4 +-
 styles/src/styleTree/editor.ts                |   8 +-
 styles/src/styleTree/hoverPopover.ts          |   4 +-
 styles/src/styleTree/picker.ts                |   8 +-
 styles/src/styleTree/statusBar.ts             |   2 +-
 styles/src/styleTree/tabBar.ts                |   2 +-
 styles/src/themes/common/colorScheme.ts       |   3 +-
 styles/src/themes/common/ramps.ts             | 115 +++++++++---------
 11 files changed, 84 insertions(+), 79 deletions(-)

diff --git a/crates/theme/src/theme.rs b/crates/theme/src/theme.rs
index 11e2c704d376ae1de57503f0c5f274d2182169e6..b27a98e804df523f475a2950b6da58076831c5b2 100644
--- a/crates/theme/src/theme.rs
+++ b/crates/theme/src/theme.rs
@@ -777,7 +777,7 @@ pub struct Layer {
     pub base: StyleSet,
     pub variant: StyleSet,
     pub on: StyleSet,
-    pub info: StyleSet,
+    pub accent: StyleSet,
     pub positive: StyleSet,
     pub warning: StyleSet,
     pub negative: StyleSet,
@@ -790,6 +790,7 @@ pub struct StyleSet {
     pub disabled: Style,
     pub hovered: Style,
     pub pressed: Style,
+    pub inverted: Style,
 }
 
 #[derive(Clone, Deserialize, Default)]
diff --git a/crates/theme_testbench/src/theme_testbench.rs b/crates/theme_testbench/src/theme_testbench.rs
index 9ff90c4427c3bb8f0bfe44f3977928b634fec88a..2b5cadb398065abe1ea6295f9f32c5b0e5955fd0 100644
--- a/crates/theme_testbench/src/theme_testbench.rs
+++ b/crates/theme_testbench/src/theme_testbench.rs
@@ -107,7 +107,7 @@ impl ThemeTestbench {
                     .boxed(),
             )
             .with_child(
-                Self::render_button_set(3, layer_index, "info", &layer.info, cx)
+                Self::render_button_set(3, layer_index, "accent", &layer.accent, cx)
                     .flex(1., false)
                     .boxed(),
             )
@@ -187,6 +187,14 @@ impl ThemeTestbench {
                 Some(|style_set| &style_set.disabled),
                 cx,
             ))
+            .with_child(Self::render_button(
+                set_index * 6 + 5,
+                layer_index,
+                "inverted",
+                &style_set,
+                Some(|style_set| &style_set.inverted),
+                cx,
+            ))
     }
 
     fn render_button(
diff --git a/styles/src/styleTree/commandPalette.ts b/styles/src/styleTree/commandPalette.ts
index 694f43496872c3b7c35b3fc6bee845639e41f640..1aa45c8c57f927566128e62b422646ea2278c03f 100644
--- a/styles/src/styleTree/commandPalette.ts
+++ b/styles/src/styleTree/commandPalette.ts
@@ -9,7 +9,7 @@ export default function commandPalette(colorScheme: ColorScheme) {
     key: {
       text: text(layer, "mono", "on", "default", { size: "xs" }),
       cornerRadius: 2,
-      background: withOpacity(background(layer, "on"), 0.5),
+      background: background(layer, "on"),
       padding: {
         top: 1,
         bottom: 1,
@@ -22,7 +22,7 @@ export default function commandPalette(colorScheme: ColorScheme) {
         left: 2,
       },
       active: {
-        text: text(layer, "mono", "on", "active", { size: "xs" }),
+        text: text(layer, "mono", "on", "inverted", { size: "xs" }),
         background: withOpacity(background(layer, "on"), 0.2),
       },
     },
diff --git a/styles/src/styleTree/components.ts b/styles/src/styleTree/components.ts
index 8170d38577620c6ec7fae305a8b06509b296ba84..3062a73130cb1a9641086af32bc3b49221e9538d 100644
--- a/styles/src/styleTree/components.ts
+++ b/styles/src/styleTree/components.ts
@@ -6,14 +6,14 @@ function isStyleSet(key: any): key is StyleSets {
     "base",
     "variant",
     "on",
-    "info",
+    "accent",
     "positive",
     "warning",
     "negative",
   ].includes(key);
 }
 function isStyle(key: any): key is Styles {
-  return ["default", "active", "disabled", "hovered", "pressed"].includes(key);
+  return ["default", "active", "disabled", "hovered", "pressed", "inverted"].includes(key);
 }
 function getStyle(
   layer: Layer,
diff --git a/styles/src/styleTree/editor.ts b/styles/src/styleTree/editor.ts
index 6199ba64c5cf71160414aa853e532e9ec51fb040..67e38cdc62d3d5466ac640acd50754721bb5356d 100644
--- a/styles/src/styleTree/editor.ts
+++ b/styles/src/styleTree/editor.ts
@@ -36,8 +36,8 @@ export default function editor(colorScheme: ColorScheme) {
         }),
       },
       message: {
-        text: text(layer, "sans", styleSet, { size: "sm" }),
-        highlightText: text(layer, "sans", styleSet, {
+        text: text(layer, "sans", styleSet, "inverted", { size: "sm" }),
+        highlightText: text(layer, "sans", styleSet, "inverted", {
           size: "sm",
           weight: "bold",
         }),
@@ -153,7 +153,7 @@ export default function editor(colorScheme: ColorScheme) {
       .neutral(0.5)
       .alpha(0.4)
       .hex(), // TODO: This was blend * 2
-    errorColor: foreground(layer, "negative"),
+    errorColor: background(layer, "negative"),
     gutterBackground: background(layer),
     gutterPaddingFactor: 3.5,
     lineNumber: foreground(layer, "disabled"),
@@ -225,7 +225,7 @@ export default function editor(colorScheme: ColorScheme) {
     },
     errorDiagnostic: diagnostic(elevation.middle, "negative"),
     warningDiagnostic: diagnostic(elevation.middle, "warning"),
-    informationDiagnostic: diagnostic(elevation.middle, "info"),
+    informationDiagnostic: diagnostic(elevation.middle, "accent"),
     hintDiagnostic: diagnostic(elevation.middle, "warning"),
     invalidErrorDiagnostic: diagnostic(elevation.middle, "base"),
     invalidHintDiagnostic: diagnostic(elevation.middle, "base"),
diff --git a/styles/src/styleTree/hoverPopover.ts b/styles/src/styleTree/hoverPopover.ts
index 56121f20e2ee6bd59ec13052edaa02b1d95154e8..67b619890f87fa42cfb9972d50097855bb94c107 100644
--- a/styles/src/styleTree/hoverPopover.ts
+++ b/styles/src/styleTree/hoverPopover.ts
@@ -23,8 +23,8 @@ export default function HoverPopover(elevation: Elevation) {
     container: baseContainer,
     infoContainer: {
       ...baseContainer,
-      background: background(layer, "info"),
-      border: border(layer, "info"),
+      background: background(layer, "accent"),
+      border: border(layer, "accent"),
     },
     warningContainer: {
       ...baseContainer,
diff --git a/styles/src/styleTree/picker.ts b/styles/src/styleTree/picker.ts
index 22b91e8d922f24811a6db463eb5349aa899df5eb..79479c108fb40e081f0ee9c32255d78826f60d44 100644
--- a/styles/src/styleTree/picker.ts
+++ b/styles/src/styleTree/picker.ts
@@ -26,11 +26,11 @@ export default function picker(colorScheme: ColorScheme) {
       },
       cornerRadius: 8,
       text: text(layer, "sans", "variant"),
-      highlightText: text(layer, "sans", "info", { weight: "bold" }),
+      highlightText: text(layer, "sans", "accent", { weight: "bold" }),
       active: {
-        background: background(layer, "active"),
-        text: text(layer, "sans", "active"),
-        highlightText: text(layer, "sans", "info", "active", {
+        background: background(layer, "base", "inverted"),
+        text: text(layer, "sans", "base", "inverted"),
+        highlightText: text(layer, "sans", "accent", "inverted", {
           weight: "bold",
         }),
       },
diff --git a/styles/src/styleTree/statusBar.ts b/styles/src/styleTree/statusBar.ts
index 65bd2025d5916f4987fd3c1ff47f06c86008df0f..7af530b2731f0d1df51f92c99cb9ff311cf8341c 100644
--- a/styles/src/styleTree/statusBar.ts
+++ b/styles/src/styleTree/statusBar.ts
@@ -111,7 +111,7 @@ export default function statusBar(colorScheme: ColorScheme) {
         padding: 2,
         margin: { bottom: -1, right: -1 },
         border: border(layer),
-        background: background(layer, "info"),
+        background: background(layer, "accent"),
       },
     },
   };
diff --git a/styles/src/styleTree/tabBar.ts b/styles/src/styleTree/tabBar.ts
index 1bde8ad83e3917a1b74d1702d41265b40f5d524f..01ea3b3dd7196b3b14e361b3ff6ffb35f5074b7b 100644
--- a/styles/src/styleTree/tabBar.ts
+++ b/styles/src/styleTree/tabBar.ts
@@ -31,7 +31,7 @@ export default function tabBar(colorScheme: ColorScheme) {
 
     // Indicators
     iconConflict: foreground(layer, "warning"),
-    iconDirty: foreground(layer, "info"),
+    iconDirty: foreground(layer, "accent"),
 
     // When two tabs of the same name are open, a label appears next to them
     description: {
diff --git a/styles/src/themes/common/colorScheme.ts b/styles/src/themes/common/colorScheme.ts
index 0265e6a3d0944e61e33f1e759f9d418583ec1bec..c0118a67c3bef6256d5a111090b4aa799ad9f335 100644
--- a/styles/src/themes/common/colorScheme.ts
+++ b/styles/src/themes/common/colorScheme.ts
@@ -49,7 +49,7 @@ export interface Layer {
   base: StyleSet;
   variant: StyleSet;
   on: StyleSet;
-  info: StyleSet;
+  accent: StyleSet;
   positive: StyleSet;
   warning: StyleSet;
   negative: StyleSet;
@@ -74,6 +74,7 @@ export interface StyleSet {
   disabled: Style;
   hovered: Style;
   pressed: Style;
+  inverted: Style;
 }
 
 export interface Style {
diff --git a/styles/src/themes/common/ramps.ts b/styles/src/themes/common/ramps.ts
index cffd6f7af4e657c362bb585e5d23816d08014582..5d6f6ad3d3f7666d060b3f82ca53543d0d8df5cf 100644
--- a/styles/src/themes/common/ramps.ts
+++ b/styles/src/themes/common/ramps.ts
@@ -12,9 +12,8 @@ import {
 } from "./colorScheme";
 
 export function colorRamp(color: Color): Scale {
-  let hue = color.hsl()[0];
-  let endColor = chroma.hsl(hue, 0.88, 0.96);
-  let startColor = chroma.hsl(hue, 0.68, 0.12);
+  let endColor = color.desaturate(1).brighten(5);
+  let startColor = color.desaturate(1).darken(5);
   return chroma.scale([startColor, color, endColor]).mode("hsl");
 }
 
@@ -58,9 +57,9 @@ export function createColorScheme(
     magenta: baseRamps.magenta,
   };
 
-  let lowest = elevation(resampleSet(baseSet, evenSamples(0, 1)), isLight);
+  let lowest = elevation(resampleSet(baseSet, evenSamples(0, 1)));
 
-  let middle = elevation(resampleSet(baseSet, evenSamples(0.08, 1)), isLight, {
+  let middle = elevation(resampleSet(baseSet, evenSamples(0.08, 1)), {
     blur: 4,
     color: baseSet
       .neutral(isLight ? 7 : 0)
@@ -71,7 +70,7 @@ export function createColorScheme(
   });
   lowest.above = middle;
 
-  let highest = elevation(resampleSet(baseSet, evenSamples(0.16, 1)), isLight, {
+  let highest = elevation(resampleSet(baseSet, evenSamples(0.16, 1)), {
     blur: 16,
     color: baseSet
       .neutral(isLight ? 7 : 0)
@@ -139,35 +138,63 @@ function resample(scale: Scale, samples: number[]): Scale {
 
 function elevation(
   ramps: RampSet,
-  isLight: boolean,
   shadow?: Shadow
 ): Elevation {
   return {
     ramps,
 
-    bottom: bottomLayer(ramps, isLight),
-    middle: middleLayer(ramps, isLight),
-    top: topLayer(ramps, isLight),
+    bottom: bottomLayer(ramps),
+    middle: middleLayer(ramps),
+    top: topLayer(ramps),
 
     shadow,
   };
 }
 
-interface StyleColors {
-  default: number | Color;
-  hovered: number | Color;
-  pressed: number | Color;
-  active: number | Color;
-  disabled: number | Color;
+function bottomLayer(ramps: RampSet): Layer {
+  return {
+    base: buildStyleSet(ramps.neutral, 0.2, 1),
+    variant: buildStyleSet(ramps.neutral, 0.2, 0.7),
+    on: buildStyleSet(ramps.neutral, 0.1, 1),
+    accent: buildStyleSet(ramps.blue, 0.1, 0.5),
+    positive: buildStyleSet(ramps.green, 0.1, 0.5),
+    warning: buildStyleSet(ramps.yellow, 0.1, 0.5),
+    negative: buildStyleSet(ramps.red, 0.1, 0.5),
+  };
+}
+
+function middleLayer(ramps: RampSet): Layer {
+  return {
+    base: buildStyleSet(ramps.neutral, 0.1, 1),
+    variant: buildStyleSet(ramps.neutral, 0.1, 0.7),
+    on: buildStyleSet(ramps.neutral, 0, 1),
+    accent: buildStyleSet(ramps.blue, 0.1, 0.5),
+    positive: buildStyleSet(ramps.green, 0.1, 0.5),
+    warning: buildStyleSet(ramps.yellow, 0.1, 0.5),
+    negative: buildStyleSet(ramps.red, 0.1, 0.5),
+  };
+}
+
+function topLayer(ramps: RampSet): Layer {
+  return {
+    base: buildStyleSet(ramps.neutral, 0, 1),
+    variant: buildStyleSet(ramps.neutral, 0, 0.7),
+    on: buildStyleSet(ramps.neutral, 0.1, 1),
+    accent: buildStyleSet(ramps.blue, 0.1, 0.5),
+    positive: buildStyleSet(ramps.green, 0.1, 0.5),
+    warning: buildStyleSet(ramps.yellow, 0.1, 0.5),
+    negative: buildStyleSet(ramps.red, 0.1, 0.5),
+  };
 }
+
 function buildStyleSet(
   ramp: Scale,
-  styleDefinitions: {
-    background: StyleColors;
-    border: StyleColors;
-    foreground: StyleColors;
-  }
+  backgroundBase: number,
+  foregroundBase: number,
+  step: number = 0.08,
 ): StyleSet {
+  let styleDefinitions = buildStyleDefinition(backgroundBase, foregroundBase, step);
+
   function colorString(indexOrColor: number | Color): string {
     if (typeof indexOrColor === "number") {
       return ramp(indexOrColor).hex();
@@ -190,10 +217,11 @@ function buildStyleSet(
     pressed: buildStyle("pressed"),
     active: buildStyle("active"),
     disabled: buildStyle("disabled"),
+    inverted: buildStyle("inverted"),
   };
 }
 
-function buildLayer(bgBase: number, fgBase: number, step: number) {
+function buildStyleDefinition(bgBase: number, fgBase: number, step: number = 0.08) {
   return {
     background: {
       default: bgBase,
@@ -201,6 +229,7 @@ function buildLayer(bgBase: number, fgBase: number, step: number) {
       pressed: bgBase + step * 1.5,
       active: bgBase + step * 3,
       disabled: bgBase,
+      inverted: fgBase + step * 6,
     },
     border: {
       default: bgBase + step * 1,
@@ -208,49 +237,15 @@ function buildLayer(bgBase: number, fgBase: number, step: number) {
       pressed: bgBase + step,
       active: bgBase + step * 3,
       disabled: bgBase + step * 0.5,
+      inverted: bgBase - step * 3,
     },
     foreground: {
       default: fgBase,
       hovered: fgBase,
       pressed: fgBase,
-      active: fgBase,
+      active: fgBase + step * 6,
       disabled: bgBase + step * 4,
+      inverted: bgBase + step * 2,
     },
   };
-}
-
-function bottomLayer(ramps: RampSet, isLight: boolean): Layer {
-  return {
-    base: buildStyleSet(ramps.neutral, buildLayer(0.2, 1, 0.08)),
-    variant: buildStyleSet(ramps.neutral, buildLayer(0.2, 0.7, 0.08)),
-    on: buildStyleSet(ramps.neutral, buildLayer(0.1, 1, 0.08)),
-    info: buildStyleSet(ramps.blue, buildLayer(0.1, 0.5, 0.08)),
-    positive: buildStyleSet(ramps.green, buildLayer(0.1, 0.5, 0.08)),
-    warning: buildStyleSet(ramps.yellow, buildLayer(0.1, 0.5, 0.08)),
-    negative: buildStyleSet(ramps.red, buildLayer(0.1, 0.5, 0.08)),
-  };
-}
-
-function middleLayer(ramps: RampSet, isLight: boolean): Layer {
-  return {
-    base: buildStyleSet(ramps.neutral, buildLayer(0.1, 1, 0.08)),
-    variant: buildStyleSet(ramps.neutral, buildLayer(0.1, 0.7, 0.08)),
-    on: buildStyleSet(ramps.neutral, buildLayer(0, 1, 0.08)),
-    info: buildStyleSet(ramps.blue, buildLayer(0.1, 0.5, 0.08)),
-    positive: buildStyleSet(ramps.green, buildLayer(0.1, 0.5, 0.08)),
-    warning: buildStyleSet(ramps.yellow, buildLayer(0.1, 0.5, 0.08)),
-    negative: buildStyleSet(ramps.red, buildLayer(0.1, 0.5, 0.08)),
-  };
-}
-
-function topLayer(ramps: RampSet, isLight: boolean): Layer {
-  return {
-    base: buildStyleSet(ramps.neutral, buildLayer(0, 1, 0.08)),
-    variant: buildStyleSet(ramps.neutral, buildLayer(0, 0.7, 0.08)),
-    on: buildStyleSet(ramps.neutral, buildLayer(0.1, 1, 0.08)),
-    info: buildStyleSet(ramps.blue, buildLayer(0.1, 0.5, 0.08)),
-    positive: buildStyleSet(ramps.green, buildLayer(0.1, 0.5, 0.08)),
-    warning: buildStyleSet(ramps.yellow, buildLayer(0.1, 0.5, 0.08)),
-    negative: buildStyleSet(ramps.red, buildLayer(0.1, 0.5, 0.08)),
-  };
-}
+}
\ No newline at end of file

From b626ec3bf927dc5584c0bfe8317a496fed7793bc Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Tue, 11 Oct 2022 17:39:38 -0400
Subject: [PATCH 37/50] Use different dark and light ramps for cave

Co-Authored-By: Kay Simmons <3323631+Kethku@users.noreply.github.com>
---
 styles/src/themes/cave.ts | 27 +++++++++++++++++++++++----
 1 file changed, 23 insertions(+), 4 deletions(-)

diff --git a/styles/src/themes/cave.ts b/styles/src/themes/cave.ts
index 23587e415664d4962994cfadd3736948db3dadc6..3914fb03d714124a2e65d64112b7ec748e70a4c7 100644
--- a/styles/src/themes/cave.ts
+++ b/styles/src/themes/cave.ts
@@ -3,7 +3,7 @@ import { colorRamp, createColorScheme } from "./common/ramps";
 
 const name = "cave";
 
-const ramps = {
+export const dark = createColorScheme(`${name}-dark`, false, {
   neutral: chroma
     .scale([
       "#19171c",
@@ -24,7 +24,26 @@ const ramps = {
   blue: colorRamp(chroma("#576ddb")),
   violet: colorRamp(chroma("#955ae7")),
   magenta: colorRamp(chroma("#bf40bf")),
-};
+});
 
-export const dark = createColorScheme(`${name}-dark`, false, ramps);
-export const light = createColorScheme(`${name}-light`, true, ramps);
+export const light = createColorScheme(`${name}-light`, true, {
+  neutral: chroma
+    .scale([
+      "#19171c",
+      "#26232a",
+      "#585260",
+      "#655f6d",
+      "#7e7887",
+      "#8b8792",
+      "#e2dfe7",
+      "#efecf4",
+    ]).correctLightness(),
+  red: colorRamp(chroma("#be4678")),
+  orange: colorRamp(chroma("#aa573c")),
+  yellow: colorRamp(chroma("#a06e3b")),
+  green: colorRamp(chroma("#2a9292")),
+  cyan: colorRamp(chroma("#398bc6")),
+  blue: colorRamp(chroma("#576ddb")),
+  violet: colorRamp(chroma("#955ae7")),
+  magenta: colorRamp(chroma("#bf40bf")),
+});
\ No newline at end of file

From 6dfa34fcf807ed1022cf78f0ca3f804a871f62c9 Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Tue, 11 Oct 2022 17:40:45 -0400
Subject: [PATCH 38/50] Remove a few Zed default themes

Co-Authored-By: Kay Simmons <3323631+Kethku@users.noreply.github.com>
---
 styles/src/themes/abruzzo.ts     | 30 ------------------------------
 styles/src/themes/brushtrees.ts  | 30 ------------------------------
 styles/src/themes/summerfruit.ts | 28 ----------------------------
 3 files changed, 88 deletions(-)
 delete mode 100644 styles/src/themes/abruzzo.ts
 delete mode 100644 styles/src/themes/brushtrees.ts
 delete mode 100644 styles/src/themes/summerfruit.ts

diff --git a/styles/src/themes/abruzzo.ts b/styles/src/themes/abruzzo.ts
deleted file mode 100644
index 915c81a0c905a39e710628366841f6c4796f3407..0000000000000000000000000000000000000000
--- a/styles/src/themes/abruzzo.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import chroma from "chroma-js";
-import { colorRamp, createColorScheme } from "./common/ramps";
-
-const name = "abruzzo";
-
-const ramps = {
-  neutral: chroma
-    .scale([
-      "#1b0d05",
-      "#2c1e18",
-      "#654035",
-      "#9d5e4a",
-      "#b37354",
-      "#c1825a",
-      "#dda66e",
-      "#fbf3e2",
-    ])
-    .domain([0, 0.15, 0.35, 0.5, 0.6, 0.75, 0.85, 1]),
-  red: colorRamp(chroma("#e594c4")),
-  orange: colorRamp(chroma("#d9e87e")),
-  yellow: colorRamp(chroma("#fd9d83")),
-  green: colorRamp(chroma("#96adf7")),
-  cyan: colorRamp(chroma("#fc798f")),
-  blue: colorRamp(chroma("#BCD0F5")),
-  violet: colorRamp(chroma("#dac5eb")),
-  magenta: colorRamp(chroma("#c1a3ef")),
-};
-
-export const dark = createColorScheme(`${name}`, false, ramps);
-// export const light = createTheme(`${name}-light`, true, ramps);
diff --git a/styles/src/themes/brushtrees.ts b/styles/src/themes/brushtrees.ts
deleted file mode 100644
index 8ffe07cd66411d10ca3166d359961b3ee103221e..0000000000000000000000000000000000000000
--- a/styles/src/themes/brushtrees.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import chroma from "chroma-js";
-import { colorRamp, createColorScheme } from "./common/ramps";
-
-const name = "brush-tree";
-
-const ramps = {
-  neutral: chroma
-    .scale([
-      "#485867",
-      "#5A6D7A",
-      "#6D828E",
-      "#8299A1",
-      "#98AFB5",
-      "#B0C5C8",
-      "#C9DBDC",
-      "#E3EFEF",
-    ])
-    .domain([0, 0.17, 0.32, 0.48, 0.6, 0.715, 0.858, 1]),
-  red: colorRamp(chroma("#b38686")),
-  orange: colorRamp(chroma("#d8bba2")),
-  yellow: colorRamp(chroma("#aab386")),
-  green: colorRamp(chroma("#87b386")),
-  cyan: colorRamp(chroma("#86b3b3")),
-  blue: colorRamp(chroma("#868cb3")),
-  violet: colorRamp(chroma("#b386b2")),
-  magenta: colorRamp(chroma("#b39f9f")),
-};
-
-export const dark = createColorScheme(`${name}-dark`, false, ramps);
-export const light = createColorScheme(`${name}-light`, true, ramps);
diff --git a/styles/src/themes/summerfruit.ts b/styles/src/themes/summerfruit.ts
deleted file mode 100644
index 8f0096bb5e3ca315419176086c8dd90e701cc5e9..0000000000000000000000000000000000000000
--- a/styles/src/themes/summerfruit.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import chroma from "chroma-js";
-import { colorRamp, createColorScheme } from "./common/ramps";
-
-const name = "summerfruit";
-
-const ramps = {
-  neutral: chroma.scale([
-    "#151515",
-    "#202020",
-    "#303030",
-    "#505050",
-    "#B0B0B0",
-    "#D0D0D0",
-    "#E0E0E0",
-    "#FFFFFF",
-  ]),
-  red: colorRamp(chroma("#FF0086")),
-  orange: colorRamp(chroma("#FD8900")),
-  yellow: colorRamp(chroma("#ABA800")),
-  green: colorRamp(chroma("#00C918")),
-  cyan: colorRamp(chroma("#1FAAAA")),
-  blue: colorRamp(chroma("#3777E6")),
-  violet: colorRamp(chroma("#AD00A1")),
-  magenta: colorRamp(chroma("#CC6633")),
-};
-
-export const dark = createColorScheme(`${name}-dark`, false, ramps);
-export const light = createColorScheme(`${name}-light`, true, ramps);

From 571636c5264d68e241cd769b5515b35f0f02215f Mon Sep 17 00:00:00 2001
From: Mikayla Maki <mikayla.c.maki@gmail.com>
Date: Tue, 18 Oct 2022 22:26:14 -0700
Subject: [PATCH 39/50] Fixed cursor color being black

---
 styles/src/styleTree/app.ts      | 2 +-
 styles/src/styleTree/terminal.ts | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/styles/src/styleTree/app.ts b/styles/src/styleTree/app.ts
index 0a15cc032ad1c4600934a1c5f04598554a71a4d8..3a800c415bc5deba15f73d569b9faadf7cce54c9 100644
--- a/styles/src/styleTree/app.ts
+++ b/styles/src/styleTree/app.ts
@@ -50,7 +50,7 @@ export default function app(colorScheme: ColorScheme): Object {
     },
     updateNotification: updateNotification(colorScheme),
     tooltip: tooltip(colorScheme),
-    terminal: terminal(colorScheme.lowest),
+    terminal: terminal(colorScheme.lowest, colorScheme.players[0].cursor),
     colorScheme: {
       ...colorScheme,
       lowest: {
diff --git a/styles/src/styleTree/terminal.ts b/styles/src/styleTree/terminal.ts
index 046ebf4e016740eeddafea11f264c260d8c6c33c..a32a976fbfa0a32969be2596f8434342f6c9d4f3 100644
--- a/styles/src/styleTree/terminal.ts
+++ b/styles/src/styleTree/terminal.ts
@@ -1,6 +1,6 @@
 import { Elevation } from "../themes/common/colorScheme";
 
-export default function terminal(elevation: Elevation) {
+export default function terminal(elevation: Elevation, cursor_color: string) {
   /**
    * Colors are controlled per-cell in the terminal grid.
    * Cells can be set to any of these more 'theme-capable' colors
@@ -37,7 +37,7 @@ export default function terminal(elevation: Elevation) {
     /**
      * Default color for the cursor
      */
-    cursor: elevation.ramps.blue(0).hex(),
+    cursor: cursor_color,
     dimBlack: elevation.ramps.neutral(1).hex(),
     dimRed: elevation.ramps.red(0.75).hex(),
     dimGreen: elevation.ramps.green(0.75).hex(),

From 9e8e227b4684ae11922694b9707deb7be25b65e2 Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Wed, 19 Oct 2022 13:02:34 -0400
Subject: [PATCH 40/50] Rebalance `rose-pine-dawn`

---
 styles/src/themes/rose-pine-dawn.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/styles/src/themes/rose-pine-dawn.ts b/styles/src/themes/rose-pine-dawn.ts
index 514e54bcd4cbf024b7bff024c99475c5c40fd502..e0e72e21ec2944c59bbdbe8ee3f9fd5e6edd689e 100644
--- a/styles/src/themes/rose-pine-dawn.ts
+++ b/styles/src/themes/rose-pine-dawn.ts
@@ -15,7 +15,7 @@ const ramps = {
       "#FFFAF3",
       "#FAF4ED",
     ])
-    .domain([0, 0.73, 1]),
+    .domain([0, 0.35, 0.45, 0.65, 0.7, 0.8, 0.9, 1]),
   red: colorRamp(chroma("#B4637A")),
   orange: colorRamp(chroma("#D7827E")),
   yellow: colorRamp(chroma("#EA9D34")),

From 5b2dd8e4d0c546e1129c7849eeac4c1e92416f7d Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Wed, 19 Oct 2022 13:03:09 -0400
Subject: [PATCH 41/50] `build-themes` -> `build` to fix building themes on
 save

---
 crates/zed/build.rs    | 2 +-
 crates/zed/src/main.rs | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/crates/zed/build.rs b/crates/zed/build.rs
index 3d21703a158649b0175ec48a7454250f20bf2f56..f030f98e14b27b11075ec7dbea2ce194dd4ecc31 100644
--- a/crates/zed/build.rs
+++ b/crates/zed/build.rs
@@ -26,7 +26,7 @@ fn main() {
         .expect("failed to run npm");
     if !output.status.success() {
         panic!(
-            "build-themes script failed {}",
+            "build script failed {}",
             String::from_utf8_lossy(&output.stderr)
         );
     }
diff --git a/crates/zed/src/main.rs b/crates/zed/src/main.rs
index 8fd2d2451e8d234886d8fec751492fa1457c2b11..e17cbe558a7aa5288d3cfce1d7e498b83c0ed06a 100644
--- a/crates/zed/src/main.rs
+++ b/crates/zed/src/main.rs
@@ -441,7 +441,7 @@ async fn watch_themes(
     while (events.next().await).is_some() {
         let output = Command::new("npm")
             .current_dir("styles")
-            .args(["run", "build-themes"])
+            .args(["run", "build"])
             .output()
             .await
             .log_err()?;
@@ -449,7 +449,7 @@ async fn watch_themes(
             cx.update(|cx| theme_selector::ThemeSelector::reload(themes.clone(), cx))
         } else {
             eprintln!(
-                "build-themes script failed {}",
+                "build script failed {}",
                 String::from_utf8_lossy(&output.stderr)
             );
         }

From 75c79d60fedc5de5d8fdc4a5fd2e264e0ce16f90 Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Wed, 19 Oct 2022 13:03:34 -0400
Subject: [PATCH 42/50] Improve contrast/scanability of `constant`s

---
 styles/src/styleTree/editor.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/styles/src/styleTree/editor.ts b/styles/src/styleTree/editor.ts
index 9cc7215e0607b62d90500e232de9230eb140119a..dd6c5bead7dab3dd97e33f597f4e49164f7bfef5 100644
--- a/styles/src/styleTree/editor.ts
+++ b/styles/src/styleTree/editor.ts
@@ -60,7 +60,7 @@ export default function editor(colorScheme: ColorScheme) {
       weight: fontWeights.normal,
     },
     constant: {
-      color: elevation.ramps.neutral(0.57).hex(),
+      color: elevation.ramps.green(0.5).hex(),
       weight: fontWeights.normal,
     },
     keyword: {

From 364c3f2f0054f3d05c8ceae049bcf8164acd8dd6 Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Wed, 19 Oct 2022 13:03:58 -0400
Subject: [PATCH 43/50] Contrast rebalances

---
 styles/src/styleTree/picker.ts    | 6 +++---
 styles/src/styleTree/search.ts    | 6 +++---
 styles/src/themes/common/ramps.ts | 2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/styles/src/styleTree/picker.ts b/styles/src/styleTree/picker.ts
index 79479c108fb40e081f0ee9c32255d78826f60d44..3e126f4f2e8c82dc592b9b91d2d940769a951c50 100644
--- a/styles/src/styleTree/picker.ts
+++ b/styles/src/styleTree/picker.ts
@@ -28,9 +28,9 @@ export default function picker(colorScheme: ColorScheme) {
       text: text(layer, "sans", "variant"),
       highlightText: text(layer, "sans", "accent", { weight: "bold" }),
       active: {
-        background: background(layer, "base", "inverted"),
-        text: text(layer, "sans", "base", "inverted"),
-        highlightText: text(layer, "sans", "accent", "inverted", {
+        background: background(layer, "base", "active"),
+        text: text(layer, "sans", "base", "active"),
+        highlightText: text(layer, "sans", "accent", {
           weight: "bold",
         }),
       },
diff --git a/styles/src/styleTree/search.ts b/styles/src/styleTree/search.ts
index 98c5b351843a52749833c629b51d4319cbb57a49..a9a8a18821219465bb54a9d897eaa3c069c2e8c8 100644
--- a/styles/src/styleTree/search.ts
+++ b/styles/src/styleTree/search.ts
@@ -44,9 +44,9 @@ export default function search(colorScheme: ColorScheme) {
         top: 2,
       },
       active: {
-        ...text(layer, "mono", "on", "active"),
-        background: background(layer, "on", "active"),
-        border: border(layer, "on", "active"),
+        ...text(layer, "mono", "on", "inverted"),
+        background: background(layer, "on", "inverted"),
+        border: border(layer, "on", "inverted"),
       },
       clicked: {
         ...text(layer, "mono", "on", "pressed"),
diff --git a/styles/src/themes/common/ramps.ts b/styles/src/themes/common/ramps.ts
index 5d6f6ad3d3f7666d060b3f82ca53543d0d8df5cf..fcca61ad8c759858efdfb95af85e1afcf406af4c 100644
--- a/styles/src/themes/common/ramps.ts
+++ b/styles/src/themes/common/ramps.ts
@@ -227,7 +227,7 @@ function buildStyleDefinition(bgBase: number, fgBase: number, step: number = 0.0
       default: bgBase,
       hovered: bgBase + step,
       pressed: bgBase + step * 1.5,
-      active: bgBase + step * 3,
+      active: bgBase + step * 2.2,
       disabled: bgBase,
       inverted: fgBase + step * 6,
     },

From e0a477265d25f54172b25a28625f326e92afb3e7 Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Wed, 19 Oct 2022 14:35:09 -0400
Subject: [PATCH 44/50] Use lab color interpolation to improve the dark end of
 accent ramps

---
 styles/src/themes/common/ramps.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/styles/src/themes/common/ramps.ts b/styles/src/themes/common/ramps.ts
index fcca61ad8c759858efdfb95af85e1afcf406af4c..cb8f3c3dce216dc24bd07e6f9f55fc161dae4ad7 100644
--- a/styles/src/themes/common/ramps.ts
+++ b/styles/src/themes/common/ramps.ts
@@ -13,8 +13,8 @@ import {
 
 export function colorRamp(color: Color): Scale {
   let endColor = color.desaturate(1).brighten(5);
-  let startColor = color.desaturate(1).darken(5);
-  return chroma.scale([startColor, color, endColor]).mode("hsl");
+  let startColor = color.desaturate(1).darken(4);
+  return chroma.scale([startColor, color, endColor]).mode("lab");
 }
 
 export function createColorScheme(

From 8098697847a748ef599d716b262d92ea9802cffa Mon Sep 17 00:00:00 2001
From: Mikayla Maki <mikayla.c.maki@gmail.com>
Date: Wed, 19 Oct 2022 11:45:20 -0700
Subject: [PATCH 45/50] Re-removed chat panel

---
 crates/chat_panel/Cargo.toml        |  20 --
 crates/chat_panel/src/chat_panel.rs | 434 ----------------------------
 2 files changed, 454 deletions(-)
 delete mode 100644 crates/chat_panel/Cargo.toml
 delete mode 100644 crates/chat_panel/src/chat_panel.rs

diff --git a/crates/chat_panel/Cargo.toml b/crates/chat_panel/Cargo.toml
deleted file mode 100644
index b943757c7aa7cfe1eb0c13175cde5d4172affbc8..0000000000000000000000000000000000000000
--- a/crates/chat_panel/Cargo.toml
+++ /dev/null
@@ -1,20 +0,0 @@
-[package]
-name = "chat_panel"
-version = "0.1.0"
-edition = "2021"
-
-[lib]
-path = "src/chat_panel.rs"
-doctest = false
-
-[dependencies]
-client = { path = "../client" }
-editor = { path = "../editor" }
-gpui = { path = "../gpui" }
-menu = { path = "../menu" }
-settings = { path = "../settings" }
-theme = { path = "../theme" }
-util = { path = "../util" }
-workspace = { path = "../workspace" }
-postage = { version = "0.4.1", features = ["futures-traits"] }
-time = { version = "0.3", features = ["serde", "serde-well-known"] }
\ No newline at end of file
diff --git a/crates/chat_panel/src/chat_panel.rs b/crates/chat_panel/src/chat_panel.rs
deleted file mode 100644
index 595eac5f7a105fe29b6277a6170e79ae50e6d698..0000000000000000000000000000000000000000
--- a/crates/chat_panel/src/chat_panel.rs
+++ /dev/null
@@ -1,434 +0,0 @@
-
-use client::{
-    channel::{Channel, ChannelEvent, ChannelList, ChannelMessage},
-    Client,
-};
-use editor::Editor;
-use gpui::{
-    actions,
-    elements::*,
-    platform::CursorStyle,
-    views::{ItemType, Select, SelectStyle},
-    AnyViewHandle, AppContext, Entity, ModelHandle, MouseButton, MutableAppContext, RenderContext,
-    Subscription, Task, View, ViewContext, ViewHandle,
-};
-use menu::Confirm;
-use postage::prelude::Stream;
-use settings::{Settings, SoftWrap};
-use std::sync::Arc;
-use time::{OffsetDateTime, UtcOffset};
-use util::{ResultExt, TryFutureExt};
-
-const MESSAGE_LOADING_THRESHOLD: usize = 50;
-
-pub struct ChatPanel {
-    rpc: Arc<Client>,
-    channel_list: ModelHandle<ChannelList>,
-    active_channel: Option<(ModelHandle<Channel>, Subscription)>,
-    message_list: ListState,
-    input_editor: ViewHandle<Editor>,
-    channel_select: ViewHandle<Select>,
-    local_timezone: UtcOffset,
-    _observe_status: Task<()>,
-}
-
-pub enum Event {}
-
-actions!(chat_panel, [LoadMoreMessages]);
-
-pub fn init(cx: &mut MutableAppContext) {
-    cx.add_action(ChatPanel::send);
-    cx.add_action(ChatPanel::load_more_messages);
-}
-
-impl ChatPanel {
-    pub fn new(
-        rpc: Arc<Client>,
-        channel_list: ModelHandle<ChannelList>,
-        cx: &mut ViewContext<Self>,
-    ) -> Self {
-        let input_editor = cx.add_view(|cx| {
-            let mut editor =
-                Editor::auto_height(4, Some(|theme| theme.chat_panel.input_editor.clone()), cx);
-            editor.set_soft_wrap_mode(SoftWrap::EditorWidth, cx);
-            editor
-        });
-        let channel_select = cx.add_view(|cx| {
-            let channel_list = channel_list.clone();
-            Select::new(0, cx, {
-                move |ix, item_type, is_hovered, cx| {
-                    Self::render_channel_name(
-                        &channel_list,
-                        ix,
-                        item_type,
-                        is_hovered,
-                        &cx.global::<Settings>().theme.chat_panel.channel_select,
-                        cx,
-                    )
-                }
-            })
-            .with_style(move |cx| {
-                let theme = &cx.global::<Settings>().theme.chat_panel.channel_select;
-                SelectStyle {
-                    header: theme.header.container,
-                    menu: theme.menu,
-                }
-            })
-        });
-        
-        let mut message_list = ListState::new(0, Orientation::Bottom, 1000., cx, {
-            let this = cx.weak_handle();
-            move |_, ix, cx| {
-                let this = this.upgrade(cx).unwrap().read(cx);
-                let message = this.active_channel.as_ref().unwrap().0.read(cx).message(ix);
-                this.render_message(message, cx)
-            }
-        });
-        message_list.set_scroll_handler(|visible_range, cx| {
-            if visible_range.start < MESSAGE_LOADING_THRESHOLD {
-                cx.dispatch_action(LoadMoreMessages);
-            }
-        });
-        let _observe_status = cx.spawn_weak(|this, mut cx| {
-            let mut status = rpc.status();
-            async move {
-                while (status.recv().await).is_some() {
-                    if let Some(this) = this.upgrade(&cx) {
-                        this.update(&mut cx, |_, cx| cx.notify());
-                    } else {
-                        break;
-                    }
-                }
-            }
-        });
-        
-        let mut this = Self {
-            rpc,
-            channel_list,
-            active_channel: Default::default(),
-            message_list,
-            input_editor,
-            channel_select,
-            local_timezone: cx.platform().local_timezone(),
-            _observe_status,
-        };
-        
-        this.init_active_channel(cx);
-        cx.observe(&this.channel_list, |this, _, cx| {
-            this.init_active_channel(cx);
-        })
-        .detach();
-        cx.observe(&this.channel_select, |this, channel_select, cx| {
-            let selected_ix = channel_select.read(cx).selected_index();
-            let selected_channel = this.channel_list.update(cx, |channel_list, cx| {
-                let available_channels = channel_list.available_channels()?;
-                let channel_id = available_channels.get(selected_ix)?.id;
-                channel_list.get_channel(channel_id, cx)
-            });
-            if let Some(selected_channel) = selected_channel {
-                this.set_active_channel(selected_channel, cx);
-            }
-        })
-        .detach();
-        
-        this
-    }
-    
-    fn init_active_channel(&mut self, cx: &mut ViewContext<Self>) {
-        let (active_channel, channel_count) = self.channel_list.update(cx, |list, cx| {
-            let channel_count;
-            let mut active_channel = None;
-            
-            if let Some(available_channels) = list.available_channels() {
-                channel_count = available_channels.len();
-                if self.active_channel.is_none() {
-                    if let Some(channel_id) = available_channels.first().map(|channel| channel.id) {
-                        active_channel = list.get_channel(channel_id, cx);
-                    }
-                }
-            } else {
-                channel_count = 0;
-            }
-            
-            (active_channel, channel_count)
-        });
-        
-        if let Some(active_channel) = active_channel {
-            self.set_active_channel(active_channel, cx);
-        } else {
-            self.message_list.reset(0);
-            self.active_channel = None;
-        }
-        
-        self.channel_select.update(cx, |select, cx| {
-            select.set_item_count(channel_count, cx);
-        });
-    }
-    
-    fn set_active_channel(&mut self, channel: ModelHandle<Channel>, cx: &mut ViewContext<Self>) {
-        if self.active_channel.as_ref().map(|e| &e.0) != Some(&channel) {
-            {
-                let channel = channel.read(cx);
-                self.message_list.reset(channel.message_count());
-                let placeholder = format!("Message #{}", channel.name());
-                self.input_editor.update(cx, move |editor, cx| {
-                    editor.set_placeholder_text(placeholder, cx);
-                });
-            }
-            let subscription = cx.subscribe(&channel, Self::channel_did_change);
-            self.active_channel = Some((channel, subscription));
-        }
-    }
-    
-    fn channel_did_change(
-        &mut self,
-        _: ModelHandle<Channel>,
-        event: &ChannelEvent,
-        cx: &mut ViewContext<Self>,
-    ) {
-        match event {
-            ChannelEvent::MessagesUpdated {
-                old_range,
-                new_count,
-            } => {
-                self.message_list.splice(old_range.clone(), *new_count);
-            }
-        }
-        cx.notify();
-    }
-    
-    fn render_channel(&self, cx: &mut RenderContext<Self>) -> ElementBox {
-        let theme = &cx.global::<Settings>().theme;
-        Flex::column()
-            .with_child(
-                Container::new(ChildView::new(&self.channel_select, cx).boxed())
-                    .with_style(theme.chat_panel.channel_select.container)
-                    .boxed(),
-            )
-            .with_child(self.render_active_channel_messages())
-            .with_child(self.render_input_box(cx))
-            .boxed()
-    }
-    
-    fn render_active_channel_messages(&self) -> ElementBox {
-        let messages = if self.active_channel.is_some() {
-            List::new(self.message_list.clone()).boxed()
-        } else {
-            Empty::new().boxed()
-        };
-        
-        FlexItem::new(messages).flex(1., true).boxed()
-    }
-    
-    fn render_message(&self, message: &ChannelMessage, cx: &AppContext) -> ElementBox {
-        let now = OffsetDateTime::now_utc();
-        let settings = cx.global::<Settings>();
-        let theme = if message.is_pending() {
-            &settings.theme.chat_panel.pending_message
-        } else {
-            &settings.theme.chat_panel.message
-        };
-        
-        Container::new(
-            Flex::column()
-                .with_child(
-                    Flex::row()
-                        .with_child(
-                            Container::new(
-                                Label::new(
-                                    message.sender.github_login.clone(),
-                                    theme.sender.text.clone(),
-                                )
-                                .boxed(),
-                            )
-                            .with_style(theme.sender.container)
-                            .boxed(),
-                        )
-                        .with_child(
-                            Container::new(
-                                Label::new(
-                                    format_timestamp(message.timestamp, now, self.local_timezone),
-                                    theme.timestamp.text.clone(),
-                                )
-                                .boxed(),
-                            )
-                            .with_style(theme.timestamp.container)
-                            .boxed(),
-                        )
-                        .boxed(),
-                )
-                .with_child(Text::new(message.body.clone(), theme.body.clone()).boxed())
-                .boxed(),
-        )
-        .with_style(theme.container)
-        .boxed()
-    }
-    
-    fn render_input_box(&self, cx: &AppContext) -> ElementBox {
-        let theme = &cx.global::<Settings>().theme;
-        Container::new(ChildView::new(&self.input_editor, cx).boxed())
-            .with_style(theme.chat_panel.input_editor.container)
-            .boxed()
-    }
-    
-    fn render_channel_name(
-        channel_list: &ModelHandle<ChannelList>,
-        ix: usize,
-        item_type: ItemType,
-        is_hovered: bool,
-        theme: &theme::ChannelSelect,
-        cx: &AppContext,
-    ) -> ElementBox {
-        let channel = &channel_list.read(cx).available_channels().unwrap()[ix];
-        let theme = match (item_type, is_hovered) {
-            (ItemType::Header, _) => &theme.header,
-            (ItemType::Selected, false) => &theme.active_item,
-            (ItemType::Selected, true) => &theme.hovered_active_item,
-            (ItemType::Unselected, false) => &theme.item,
-            (ItemType::Unselected, true) => &theme.hovered_item,
-        };
-        Container::new(
-            Flex::row()
-                .with_child(
-                    Container::new(Label::new("#".to_string(), theme.hash.text.clone()).boxed())
-                        .with_style(theme.hash.container)
-                        .boxed(),
-                )
-                .with_child(Label::new(channel.name.clone(), theme.name.clone()).boxed())
-                .boxed(),
-        )
-        .with_style(theme.container)
-        .boxed()
-    }
-    
-    fn render_sign_in_prompt(&self, cx: &mut RenderContext<Self>) -> ElementBox {
-        let theme = cx.global::<Settings>().theme.clone();
-        let rpc = self.rpc.clone();
-        let this = cx.handle();
-        
-        enum SignInPromptLabel {}
-        
-        Align::new(
-            MouseEventHandler::<SignInPromptLabel>::new(0, cx, |mouse_state, _| {
-                Label::new(
-                    "Sign in to use chat".to_string(),
-                    if mouse_state.hovered() {
-                        theme.chat_panel.hovered_sign_in_prompt.clone()
-                    } else {
-                        theme.chat_panel.sign_in_prompt.clone()
-                    },
-                )
-                .boxed()
-            })
-            .with_cursor_style(CursorStyle::PointingHand)
-            .on_click(MouseButton::Left, move |_, cx| {
-                let rpc = rpc.clone();
-                let this = this.clone();
-                cx.spawn(|mut cx| async move {
-                    if rpc
-                        .authenticate_and_connect(true, &cx)
-                        .log_err()
-                        .await
-                        .is_some()
-                    {
-                        cx.update(|cx| {
-                            if let Some(this) = this.upgrade(cx) {
-                                if this.is_focused(cx) {
-                                    this.update(cx, |this, cx| cx.focus(&this.input_editor));
-                                }
-                            }
-                        })
-                    }
-                })
-                .detach();
-            })
-            .boxed(),
-        )
-        .boxed()
-    }
-    
-    fn send(&mut self, _: &Confirm, cx: &mut ViewContext<Self>) {
-        if let Some((channel, _)) = self.active_channel.as_ref() {
-            let body = self.input_editor.update(cx, |editor, cx| {
-                let body = editor.text(cx);
-                editor.clear(cx);
-                body
-            });
-            
-            if let Some(task) = channel
-                .update(cx, |channel, cx| channel.send_message(body, cx))
-                .log_err()
-            {
-                task.detach();
-            }
-        }
-    }
-    
-    fn load_more_messages(&mut self, _: &LoadMoreMessages, cx: &mut ViewContext<Self>) {
-        if let Some((channel, _)) = self.active_channel.as_ref() {
-            channel.update(cx, |channel, cx| {
-                channel.load_more_messages(cx);
-            })
-        }
-    }
-}
-
-impl Entity for ChatPanel {
-    type Event = Event;
-}
-
-impl View for ChatPanel {
-    fn ui_name() -> &'static str {
-        "ChatPanel"
-    }
-    
-    fn render(&mut self, cx: &mut RenderContext<Self>) -> ElementBox {
-        let element = if self.rpc.user_id().is_some() {
-            self.render_channel(cx)
-        } else {
-            self.render_sign_in_prompt(cx)
-        };
-        let theme = &cx.global::<Settings>().theme;
-        ConstrainedBox::new(
-            Container::new(element)
-                .with_style(theme.chat_panel.container)
-                .boxed(),
-        )
-        .with_min_width(150.)
-        .boxed()
-    }
-    
-    fn focus_in(&mut self, _: AnyViewHandle, cx: &mut ViewContext<Self>) {
-        if matches!(
-            *self.rpc.status().borrow(),
-            client::Status::Connected { .. }
-        ) {
-            cx.focus(&self.input_editor);
-        }
-    }
-}
-
-fn format_timestamp(
-    mut timestamp: OffsetDateTime,
-    mut now: OffsetDateTime,
-    local_timezone: UtcOffset,
-) -> String {
-    timestamp = timestamp.to_offset(local_timezone);
-    now = now.to_offset(local_timezone);
-    
-    let today = now.date();
-    let date = timestamp.date();
-    let mut hour = timestamp.hour();
-    let mut part = "am";
-    if hour > 12 {
-        hour -= 12;
-        part = "pm";
-    }
-    if date == today {
-        format!("{:02}:{:02}{}", hour, timestamp.minute(), part)
-    } else if date.next_day() == Some(today) {
-        format!("yesterday at {:02}:{:02}{}", hour, timestamp.minute(), part)
-    } else {
-        format!("{:02}/{}/{}", date.month() as u32, date.day(), date.year())
-    }
-}

From 0d9eecd2edc3fca520b02bb8265ec57ed47d03cd Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Wed, 19 Oct 2022 14:55:22 -0400
Subject: [PATCH 46/50] WIP command palette changes

---
 styles/src/styleTree/commandPalette.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/styles/src/styleTree/commandPalette.ts b/styles/src/styleTree/commandPalette.ts
index 1aa45c8c57f927566128e62b422646ea2278c03f..4bde81f7d895176a93a6379a6f0f9deb943277ba 100644
--- a/styles/src/styleTree/commandPalette.ts
+++ b/styles/src/styleTree/commandPalette.ts
@@ -7,7 +7,7 @@ export default function commandPalette(colorScheme: ColorScheme) {
   return {
     keystrokeSpacing: 8,
     key: {
-      text: text(layer, "mono", "on", "default", { size: "xs" }),
+      text: text(layer, "mono", "variant", "default", { size: "xs" }),
       cornerRadius: 2,
       background: background(layer, "on"),
       padding: {
@@ -22,7 +22,7 @@ export default function commandPalette(colorScheme: ColorScheme) {
         left: 2,
       },
       active: {
-        text: text(layer, "mono", "on", "inverted", { size: "xs" }),
+        text: text(layer, "mono", "on", "default", { size: "xs" }),
         background: withOpacity(background(layer, "on"), 0.2),
       },
     },

From e3809c267d51a5ebac6975d545c5de5ca670a722 Mon Sep 17 00:00:00 2001
From: K Simmons <keith@zed.dev>
Date: Wed, 19 Oct 2022 13:02:51 -0700
Subject: [PATCH 47/50] flattened layers and elevations

---
 Cargo.lock                                    |  16 ---
 crates/theme/src/theme.rs                     |  18 +--
 crates/theme_testbench/src/theme_testbench.rs | 109 ++++--------------
 styles/src/styleTree/app.ts                   |  70 +++--------
 styles/src/styleTree/commandPalette.ts        |   2 +-
 styles/src/styleTree/contactFinder.ts         |   2 +-
 styles/src/styleTree/contactList.ts           |   2 +-
 styles/src/styleTree/contactNotification.ts   |   2 +-
 styles/src/styleTree/contactsPopover.ts       |   4 +-
 styles/src/styleTree/contextMenu.ts           |   5 +-
 styles/src/styleTree/editor.ts                |  97 ++++++++--------
 styles/src/styleTree/hoverPopover.ts          |  10 +-
 .../src/styleTree/incomingCallNotification.ts |   2 +-
 styles/src/styleTree/picker.ts                |   5 +-
 styles/src/styleTree/projectDiagnostics.ts    |   2 +-
 styles/src/styleTree/projectPanel.ts          |   2 +-
 .../styleTree/projectSharedNotification.ts    |   5 +-
 styles/src/styleTree/search.ts                |   2 +-
 styles/src/styleTree/statusBar.ts             |   2 +-
 styles/src/styleTree/tabBar.ts                |   7 +-
 styles/src/styleTree/terminal.ts              |  64 +++++-----
 styles/src/styleTree/tooltip.ts               |   5 +-
 styles/src/styleTree/updateNotification.ts    |   2 +-
 styles/src/styleTree/workspace.ts             |  37 +++---
 styles/src/themes/common/colorScheme.ts       |  22 ++--
 styles/src/themes/common/ramps.ts             | 107 +++++------------
 26 files changed, 203 insertions(+), 398 deletions(-)

diff --git a/Cargo.lock b/Cargo.lock
index b442f8d71613551e843247b849a7a6eeb0a8291e..d960b467ad6e7b2b14ecb8017118374cf9c733cb 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -855,22 +855,6 @@ version = "1.0.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "baf1de4339761588bc0619e3cbc0120ee582ebb74b53b4efbf79117bd2da40fd"
 
-[[package]]
-name = "chat_panel"
-version = "0.1.0"
-dependencies = [
- "client",
- "editor",
- "gpui",
- "menu",
- "postage",
- "settings",
- "theme",
- "time 0.3.15",
- "util",
- "workspace",
-]
-
 [[package]]
 name = "chrono"
 version = "0.4.22"
diff --git a/crates/theme/src/theme.rs b/crates/theme/src/theme.rs
index 11296af6ab2b646e451ee7c74b3ee34d5782344e..b2e97ac8319795407f93bd44930357dc1afa0e96 100644
--- a/crates/theme/src/theme.rs
+++ b/crates/theme/src/theme.rs
@@ -797,22 +797,16 @@ pub struct ColorScheme {
     pub name: String,
     pub is_light: bool,
 
-    pub lowest: Elevation,
-    pub middle: Elevation,
-    pub highest: Elevation,
-
-    pub players: Vec<Player>,
-}
-
-#[derive(Clone, Deserialize, Default)]
-pub struct Elevation {
     pub ramps: RampSet,
 
-    pub bottom: Layer,
+    pub lowest: Layer,
     pub middle: Layer,
-    pub top: Layer,
+    pub highest: Layer,
+
+    pub popover_shadow: Shadow,
+    pub modal_shadow: Shadow,
 
-    pub shadow: Option<Shadow>,
+    pub players: Vec<Player>,
 }
 
 #[derive(Clone, Deserialize, Default)]
diff --git a/crates/theme_testbench/src/theme_testbench.rs b/crates/theme_testbench/src/theme_testbench.rs
index f9f0d96f4e877fa540279258b3fc6f6b7d24480f..ac78cce1c93c0286a5412e5193d83ebe828a58f7 100644
--- a/crates/theme_testbench/src/theme_testbench.rs
+++ b/crates/theme_testbench/src/theme_testbench.rs
@@ -11,7 +11,7 @@ use gpui::{
 use project::{Project, ProjectEntryId, ProjectPath};
 use settings::Settings;
 use smallvec::SmallVec;
-use theme::{ColorScheme, Elevation, Layer, Style, StyleSet};
+use theme::{ColorScheme, Layer, Style, StyleSet};
 use workspace::{Item, Workspace};
 
 actions!(theme, [DeployThemeTestbench]);
@@ -51,38 +51,15 @@ impl ThemeTestbench {
         }
 
         Flex::column()
-            .with_child(display_ramp(&color_scheme.lowest.ramps.neutral))
-            .with_child(display_ramp(&color_scheme.lowest.ramps.red))
-            .with_child(display_ramp(&color_scheme.lowest.ramps.orange))
-            .with_child(display_ramp(&color_scheme.lowest.ramps.yellow))
-            .with_child(display_ramp(&color_scheme.lowest.ramps.green))
-            .with_child(display_ramp(&color_scheme.lowest.ramps.cyan))
-            .with_child(display_ramp(&color_scheme.lowest.ramps.blue))
-            .with_child(display_ramp(&color_scheme.lowest.ramps.violet))
-            .with_child(display_ramp(&color_scheme.lowest.ramps.magenta))
-    }
-
-    fn render_elevation(
-        elevation_index: usize,
-        elevation: &Elevation,
-        cx: &mut RenderContext<'_, Self>,
-    ) -> Flex {
-        Flex::column()
-            .with_child(
-                Self::render_layer(elevation_index * 1000 + 100, &elevation.bottom, cx)
-                    .flex(1., true)
-                    .boxed(),
-            )
-            .with_child(
-                Self::render_layer(elevation_index * 1000 + 200, &elevation.middle, cx)
-                    .flex(1., true)
-                    .boxed(),
-            )
-            .with_child(
-                Self::render_layer(elevation_index * 1000 + 300, &elevation.top, cx)
-                    .flex(1., true)
-                    .boxed(),
-            )
+            .with_child(display_ramp(&color_scheme.ramps.neutral))
+            .with_child(display_ramp(&color_scheme.ramps.red))
+            .with_child(display_ramp(&color_scheme.ramps.orange))
+            .with_child(display_ramp(&color_scheme.ramps.yellow))
+            .with_child(display_ramp(&color_scheme.ramps.green))
+            .with_child(display_ramp(&color_scheme.ramps.cyan))
+            .with_child(display_ramp(&color_scheme.ramps.blue))
+            .with_child(display_ramp(&color_scheme.ramps.violet))
+            .with_child(display_ramp(&color_scheme.ramps.magenta))
     }
 
     fn render_layer(
@@ -272,44 +249,6 @@ impl ThemeTestbench {
 
         Label::new(text, text_style)
     }
-
-    fn elevation_style(elevation: &Elevation) -> ContainerStyle {
-        let style = ContainerStyle {
-            margin: Margin {
-                top: 10.,
-                bottom: 10.,
-                left: 10.,
-                right: 10.,
-            },
-            background_color: Some(elevation.bottom.base.default.background),
-            ..Default::default()
-        };
-
-        if elevation.shadow.is_some() {
-            ContainerStyle {
-                padding: Padding {
-                    top: 10.,
-                    bottom: 10.,
-                    left: 10.,
-                    right: 10.,
-                },
-                border: Border {
-                    width: 1.,
-                    color: elevation.bottom.base.default.border,
-                    overlay: false,
-                    top: true,
-                    bottom: true,
-                    left: true,
-                    right: true,
-                },
-                corner_radius: 32.,
-                shadow: elevation.shadow,
-                ..style
-            }
-        } else {
-            style
-        }
-    }
 }
 
 impl Entity for ThemeTestbench {
@@ -333,32 +272,24 @@ impl View for ThemeTestbench {
                     .boxed(),
             )
             .with_child(
-                Self::render_elevation(0, &color_scheme.lowest, cx)
-                    .flex(1., true)
-                    .boxed(),
-            )
-            .with_child(
-                Flex::row()
+                Flex::column()
                     .with_child(
-                        Self::render_elevation(1, &color_scheme.middle, cx)
+                        Self::render_layer(100, &color_scheme.lowest, cx)
                             .flex(1., true)
                             .boxed(),
                     )
                     .with_child(
-                        Container::new(
-                            Self::render_elevation(2, &color_scheme.highest, cx).boxed(),
-                        )
-                        .with_style(Self::elevation_style(&color_scheme.highest))
-                        .flex(1., true)
-                        .boxed(),
+                        Self::render_layer(200, &color_scheme.middle, cx)
+                            .flex(1., true)
+                            .boxed(),
+                    )
+                    .with_child(
+                        Self::render_layer(300, &color_scheme.highest, cx)
+                            .flex(1., true)
+                            .boxed(),
                     )
-                    .contained()
-                    .with_style(Self::elevation_style(&color_scheme.middle))
-                    .flex(2., true)
                     .boxed(),
             )
-            .contained()
-            .with_style(Self::elevation_style(&color_scheme.lowest))
             .boxed()
     }
 }
diff --git a/styles/src/styleTree/app.ts b/styles/src/styleTree/app.ts
index 3a800c415bc5deba15f73d569b9faadf7cce54c9..bc4b992ed3bace303615bd94f4cf2b2c54bd85d1 100644
--- a/styles/src/styleTree/app.ts
+++ b/styles/src/styleTree/app.ts
@@ -18,10 +18,6 @@ import contactList from "./contactList";
 import incomingCallNotification from "./incomingCallNotification";
 import { ColorScheme } from "../themes/common/colorScheme";
 
-// export const panel = {
-//   padding: { top: 12, bottom: 12 },
-// };
-
 export default function app(colorScheme: ColorScheme): Object {
   return {
     meta: {
@@ -43,68 +39,28 @@ export default function app(colorScheme: ColorScheme): Object {
     contactList: contactList(colorScheme),
     search: search(colorScheme),
     breadcrumbs: {
-      ...text(colorScheme.lowest.top, "sans", "variant"),
+      ...text(colorScheme.highest, "sans", "variant"),
       padding: {
         left: 6,
       },
     },
     updateNotification: updateNotification(colorScheme),
     tooltip: tooltip(colorScheme),
-    terminal: terminal(colorScheme.lowest, colorScheme.players[0].cursor),
+    terminal: terminal(colorScheme),
     colorScheme: {
       ...colorScheme,
-      lowest: {
-        ...colorScheme.lowest,
-        ramps: {
-          neutral: colorScheme.lowest.ramps.neutral.colors(100, "hex"),
-          red: colorScheme.lowest.ramps.red.colors(100, "hex"),
-          orange: colorScheme.lowest.ramps.orange.colors(100, "hex"),
-          yellow: colorScheme.lowest.ramps.yellow.colors(100, "hex"),
-          green: colorScheme.lowest.ramps.green.colors(100, "hex"),
-          cyan: colorScheme.lowest.ramps.cyan.colors(100, "hex"),
-          blue: colorScheme.lowest.ramps.blue.colors(100, "hex"),
-          violet: colorScheme.lowest.ramps.violet.colors(100, "hex"),
-          magenta: colorScheme.lowest.ramps.magenta.colors(100, "hex"),
-        },
-      },
-      middle: {
-        ...colorScheme.middle,
-        ramps: {
-          neutral: colorScheme.middle.ramps.neutral.colors(100, "hex"),
-          red: colorScheme.middle.ramps.red.colors(100, "hex"),
-          orange: colorScheme.middle.ramps.orange.colors(100, "hex"),
-          yellow: colorScheme.middle.ramps.yellow.colors(100, "hex"),
-          green: colorScheme.middle.ramps.green.colors(100, "hex"),
-          cyan: colorScheme.middle.ramps.cyan.colors(100, "hex"),
-          blue: colorScheme.middle.ramps.blue.colors(100, "hex"),
-          violet: colorScheme.middle.ramps.violet.colors(100, "hex"),
-          magenta: colorScheme.middle.ramps.magenta.colors(100, "hex"),
-        },
-      },
-      highest: {
-        ...colorScheme.highest,
-        ramps: {
-          neutral: colorScheme.highest.ramps.neutral.colors(100, "hex"),
-          red: colorScheme.highest.ramps.red.colors(100, "hex"),
-          orange: colorScheme.highest.ramps.orange.colors(100, "hex"),
-          yellow: colorScheme.highest.ramps.yellow.colors(100, "hex"),
-          green: colorScheme.highest.ramps.green.colors(100, "hex"),
-          cyan: colorScheme.highest.ramps.cyan.colors(100, "hex"),
-          blue: colorScheme.highest.ramps.blue.colors(100, "hex"),
-          violet: colorScheme.highest.ramps.violet.colors(100, "hex"),
-          magenta: colorScheme.highest.ramps.magenta.colors(100, "hex"),
-        },
+      players: Object.values(colorScheme.players),
+      ramps: {
+        neutral: colorScheme.ramps.neutral.colors(100, "hex"),
+        red: colorScheme.ramps.red.colors(100, "hex"),
+        orange: colorScheme.ramps.orange.colors(100, "hex"),
+        yellow: colorScheme.ramps.yellow.colors(100, "hex"),
+        green: colorScheme.ramps.green.colors(100, "hex"),
+        cyan: colorScheme.ramps.cyan.colors(100, "hex"),
+        blue: colorScheme.ramps.blue.colors(100, "hex"),
+        violet: colorScheme.ramps.violet.colors(100, "hex"),
+        magenta: colorScheme.ramps.magenta.colors(100, "hex"),
       },
-      players: [
-        colorScheme.players["0"],
-        colorScheme.players["1"],
-        colorScheme.players["2"],
-        colorScheme.players["3"],
-        colorScheme.players["4"],
-        colorScheme.players["5"],
-        colorScheme.players["6"],
-        colorScheme.players["7"],
-      ],
     },
   };
 }
diff --git a/styles/src/styleTree/commandPalette.ts b/styles/src/styleTree/commandPalette.ts
index 4bde81f7d895176a93a6379a6f0f9deb943277ba..0e0c10bed087be1351830bf3b243d638213dfb54 100644
--- a/styles/src/styleTree/commandPalette.ts
+++ b/styles/src/styleTree/commandPalette.ts
@@ -3,7 +3,7 @@ import { withOpacity } from "../utils/color";
 import { text, background } from "./components";
 
 export default function commandPalette(colorScheme: ColorScheme) {
-  let layer = colorScheme.highest.top;
+  let layer = colorScheme.highest;
   return {
     keystrokeSpacing: 8,
     key: {
diff --git a/styles/src/styleTree/contactFinder.ts b/styles/src/styleTree/contactFinder.ts
index 4ed49ef26c36d19b4a30f4449a74ceb9a5d468f1..c389c126a36b00f78d38f158043f60a2ec094f96 100644
--- a/styles/src/styleTree/contactFinder.ts
+++ b/styles/src/styleTree/contactFinder.ts
@@ -3,7 +3,7 @@ import { ColorScheme } from "../themes/common/colorScheme";
 import { background, border, foreground, text } from "./components";
 
 export default function contactFinder(colorScheme: ColorScheme) {
-  let layer = colorScheme.highest.top;
+  let layer = colorScheme.highest;
 
   const sideMargin = 6;
   const contactButton = {
diff --git a/styles/src/styleTree/contactList.ts b/styles/src/styleTree/contactList.ts
index 42f6ce884e846759e7ebf50d1a9fd0a56917425d..a58bf90fd1f17f543911c27ff2c18523ea5f1426 100644
--- a/styles/src/styleTree/contactList.ts
+++ b/styles/src/styleTree/contactList.ts
@@ -11,7 +11,7 @@ export default function contactsPanel(colorScheme: ColorScheme) {
   const nameMargin = 8;
   const sidePadding = 12;
 
-  let layer = colorScheme.lowest.middle;
+  let layer = colorScheme.middle;
 
   const contactButton = {
     background: background(layer, "on"),
diff --git a/styles/src/styleTree/contactNotification.ts b/styles/src/styleTree/contactNotification.ts
index 0908d8035dec41f396a2e01aa75a4c9f4b8a0b22..e0b967203d1f72a3eb2fd40c6f88786e6376aafc 100644
--- a/styles/src/styleTree/contactNotification.ts
+++ b/styles/src/styleTree/contactNotification.ts
@@ -5,7 +5,7 @@ const avatarSize = 12;
 const headerPadding = 8;
 
 export default function contactNotification(colorScheme: ColorScheme): Object {
-  let layer = colorScheme.middle.bottom;
+  let layer = colorScheme.lowest;
   return {
     headerAvatar: {
       height: avatarSize,
diff --git a/styles/src/styleTree/contactsPopover.ts b/styles/src/styleTree/contactsPopover.ts
index be792a1981cc79128acfe6cf8e3ffb3c5807d0b2..50a82517370b258c072f09caf075fa0ee29de1d3 100644
--- a/styles/src/styleTree/contactsPopover.ts
+++ b/styles/src/styleTree/contactsPopover.ts
@@ -2,14 +2,14 @@ import { ColorScheme } from "../themes/common/colorScheme";
 import { background, border, text } from "./components";
 
 export default function contactsPopover(colorScheme: ColorScheme) {
-  let layer = colorScheme.middle.middle;
+  let layer = colorScheme.middle;
   const sidePadding = 12;
   return {
     background: background(layer),
     cornerRadius: 6,
     padding: { top: 6 },
     margin: { top: -6 },
-    shadow: colorScheme.middle.shadow,
+    shadow: colorScheme.popoverShadow,
     border: border(layer),
     width: 300,
     height: 400,
diff --git a/styles/src/styleTree/contextMenu.ts b/styles/src/styleTree/contextMenu.ts
index fcdf855e56afd58a82598ca82a4155627747ee3f..440ef5b439d60a035c5822a7be55ba2baca4b4ac 100644
--- a/styles/src/styleTree/contextMenu.ts
+++ b/styles/src/styleTree/contextMenu.ts
@@ -2,13 +2,12 @@ import { ColorScheme } from "../themes/common/colorScheme";
 import { background, border, borderColor, text } from "./components";
 
 export default function contextMenu(colorScheme: ColorScheme) {
-  let elevation = colorScheme.middle;
-  let layer = elevation.bottom;
+  let layer = colorScheme.lowest;
   return {
     background: background(layer),
     cornerRadius: 10,
     padding: 4,
-    shadow: elevation.shadow,
+    shadow: colorScheme.popoverShadow,
     border: border(layer),
     keystrokeMargin: 30,
     item: {
diff --git a/styles/src/styleTree/editor.ts b/styles/src/styleTree/editor.ts
index dd6c5bead7dab3dd97e33f597f4e49164f7bfef5..3b961b7dc057a7369ff1a9c5202eb20d4097e8fd 100644
--- a/styles/src/styleTree/editor.ts
+++ b/styles/src/styleTree/editor.ts
@@ -15,8 +15,7 @@ import {
 import hoverPopover from "./hoverPopover";
 
 export default function editor(colorScheme: ColorScheme) {
-  let elevation = colorScheme.lowest;
-  let layer = elevation.top;
+  let layer = colorScheme.highest;
 
   const autocompleteItem = {
     cornerRadius: 6,
@@ -48,88 +47,88 @@ export default function editor(colorScheme: ColorScheme) {
 
   const syntax = {
     primary: {
-      color: elevation.ramps.neutral(1).hex(),
+      color: colorScheme.ramps.neutral(1).hex(),
       weight: fontWeights.normal,
     },
     comment: {
-      color: elevation.ramps.neutral(0.71).hex(),
+      color: colorScheme.ramps.neutral(0.71).hex(),
       weight: fontWeights.normal,
     },
     punctuation: {
-      color: elevation.ramps.neutral(0.86).hex(),
+      color: colorScheme.ramps.neutral(0.86).hex(),
       weight: fontWeights.normal,
     },
     constant: {
-      color: elevation.ramps.green(0.5).hex(),
+      color: colorScheme.ramps.green(0.5).hex(),
       weight: fontWeights.normal,
     },
     keyword: {
-      color: elevation.ramps.blue(0.5).hex(),
+      color: colorScheme.ramps.blue(0.5).hex(),
       weight: fontWeights.normal,
     },
     function: {
-      color: elevation.ramps.yellow(0.5).hex(),
+      color: colorScheme.ramps.yellow(0.5).hex(),
       weight: fontWeights.normal,
     },
     type: {
-      color: elevation.ramps.cyan(0.5).hex(),
+      color: colorScheme.ramps.cyan(0.5).hex(),
       weight: fontWeights.normal,
     },
     constructor: {
-      color: elevation.ramps.blue(0.5).hex(),
+      color: colorScheme.ramps.blue(0.5).hex(),
       weight: fontWeights.normal,
     },
     variant: {
-      color: elevation.ramps.blue(0.5).hex(),
+      color: colorScheme.ramps.blue(0.5).hex(),
       weight: fontWeights.normal,
     },
     property: {
-      color: elevation.ramps.blue(0.5).hex(),
+      color: colorScheme.ramps.blue(0.5).hex(),
       weight: fontWeights.normal,
     },
     enum: {
-      color: elevation.ramps.orange(0.5).hex(),
+      color: colorScheme.ramps.orange(0.5).hex(),
       weight: fontWeights.normal,
     },
     operator: {
-      color: elevation.ramps.orange(0.5).hex(),
+      color: colorScheme.ramps.orange(0.5).hex(),
       weight: fontWeights.normal,
     },
     string: {
-      color: elevation.ramps.orange(0.5).hex(),
+      color: colorScheme.ramps.orange(0.5).hex(),
       weight: fontWeights.normal,
     },
     number: {
-      color: elevation.ramps.green(0.5).hex(),
+      color: colorScheme.ramps.green(0.5).hex(),
       weight: fontWeights.normal,
     },
     boolean: {
-      color: elevation.ramps.green(0.5).hex(),
+      color: colorScheme.ramps.green(0.5).hex(),
       weight: fontWeights.normal,
     },
     predictive: {
-      color: elevation.ramps.neutral(0.57).hex(),
+      color: colorScheme.ramps.neutral(0.57).hex(),
       weight: fontWeights.normal,
     },
     title: {
-      color: elevation.ramps.yellow(0.5).hex(),
+      color: colorScheme.ramps.yellow(0.5).hex(),
       weight: fontWeights.bold,
     },
     emphasis: {
-      color: elevation.ramps.blue(0.5).hex(),
+      color: colorScheme.ramps.blue(0.5).hex(),
       weight: fontWeights.normal,
     },
     "emphasis.strong": {
-      color: elevation.ramps.blue(0.5).hex(),
+      color: colorScheme.ramps.blue(0.5).hex(),
       weight: fontWeights.bold,
     },
     linkUri: {
-      color: elevation.ramps.green(0.5).hex(),
+      color: colorScheme.ramps.green(0.5).hex(),
       weight: fontWeights.normal,
       underline: true,
     },
     linkText: {
-      color: elevation.ramps.orange(0.5).hex(),
+      color: colorScheme.ramps.orange(0.5).hex(),
       weight: fontWeights.normal,
       italic: true,
     },
@@ -152,11 +151,11 @@ export default function editor(colorScheme: ColorScheme) {
       widthEm: 0.16,
       cornerRadius: 0.05,
     },
-    documentHighlightReadBackground: elevation.ramps
+    documentHighlightReadBackground: colorScheme.ramps
       .neutral(0.5)
       .alpha(0.2)
       .hex(), // TODO: This was blend
-    documentHighlightWriteBackground: elevation.ramps
+    documentHighlightWriteBackground: colorScheme.ramps
       .neutral(0.5)
       .alpha(0.4)
       .hex(), // TODO: This was blend * 2
@@ -178,67 +177,69 @@ export default function editor(colorScheme: ColorScheme) {
       colorScheme.players[7],
     ],
     autocomplete: {
-      background: background(elevation.bottom),
+      background: background(colorScheme.lowest),
       cornerRadius: 8,
       padding: 4,
       margin: {
         left: -14,
       },
-      border: border(elevation.bottom),
-      shadow: elevation.above.shadow,
-      matchHighlight: elevation.above.ramps.blue(0.5).hex(),
+      border: border(colorScheme.lowest),
+      shadow: colorScheme.popoverShadow,
+      matchHighlight: foreground(colorScheme.lowest, "accent"),
       item: autocompleteItem,
       hoveredItem: {
         ...autocompleteItem,
-        background: background(elevation.bottom, "hovered"),
+        matchHighlight: foreground(colorScheme.lowest, "accent", "hovered"),
+        background: background(colorScheme.lowest, "hovered"),
       },
       selectedItem: {
         ...autocompleteItem,
-        background: background(elevation.bottom, "active"),
+        matchHighlight: foreground(colorScheme.lowest, "accent", "active"),
+        background: background(colorScheme.lowest, "active"),
       },
     },
     diagnosticHeader: {
-      background: background(elevation.middle),
+      background: background(colorScheme.middle),
       iconWidthFactor: 1.5,
       textScaleFactor: 0.857,
-      border: border(elevation.middle, {
+      border: border(colorScheme.middle, {
         bottom: true,
         top: true,
       }),
       code: {
-        ...text(elevation.middle, "mono", { size: "sm" }),
+        ...text(colorScheme.middle, "mono", { size: "sm" }),
         margin: {
           left: 10,
         },
       },
       message: {
-        highlightText: text(elevation.middle, "sans", {
+        highlightText: text(colorScheme.middle, "sans", {
           size: "sm",
           weight: "bold",
         }),
-        text: text(elevation.middle, "sans", { size: "sm" }),
+        text: text(colorScheme.middle, "sans", { size: "sm" }),
       },
     },
     diagnosticPathHeader: {
-      background: background(elevation.middle),
+      background: background(colorScheme.middle),
       textScaleFactor: 0.857,
-      filename: text(elevation.middle, "mono", { size: "sm" }),
+      filename: text(colorScheme.middle, "mono", { size: "sm" }),
       path: {
-        ...text(elevation.middle, "mono", { size: "sm" }),
+        ...text(colorScheme.middle, "mono", { size: "sm" }),
         margin: {
           left: 12,
         },
       },
     },
-    errorDiagnostic: diagnostic(elevation.middle, "negative"),
-    warningDiagnostic: diagnostic(elevation.middle, "warning"),
-    informationDiagnostic: diagnostic(elevation.middle, "accent"),
-    hintDiagnostic: diagnostic(elevation.middle, "warning"),
-    invalidErrorDiagnostic: diagnostic(elevation.middle, "base"),
-    invalidHintDiagnostic: diagnostic(elevation.middle, "base"),
-    invalidInformationDiagnostic: diagnostic(elevation.middle, "base"),
-    invalidWarningDiagnostic: diagnostic(elevation.middle, "base"),
-    hoverPopover: hoverPopover(elevation.above),
+    errorDiagnostic: diagnostic(colorScheme.middle, "negative"),
+    warningDiagnostic: diagnostic(colorScheme.middle, "warning"),
+    informationDiagnostic: diagnostic(colorScheme.middle, "accent"),
+    hintDiagnostic: diagnostic(colorScheme.middle, "warning"),
+    invalidErrorDiagnostic: diagnostic(colorScheme.middle, "base"),
+    invalidHintDiagnostic: diagnostic(colorScheme.middle, "base"),
+    invalidInformationDiagnostic: diagnostic(colorScheme.middle, "base"),
+    invalidWarningDiagnostic: diagnostic(colorScheme.middle, "base"),
+    hoverPopover: hoverPopover(colorScheme),
     linkDefinition: {
       color: syntax.linkUri.color,
       underline: syntax.linkUri.underline,
diff --git a/styles/src/styleTree/hoverPopover.ts b/styles/src/styleTree/hoverPopover.ts
index 67b619890f87fa42cfb9972d50097855bb94c107..ab4beee11b2a0001b8656a5232b173918a987411 100644
--- a/styles/src/styleTree/hoverPopover.ts
+++ b/styles/src/styleTree/hoverPopover.ts
@@ -1,8 +1,8 @@
-import { Elevation } from "../themes/common/colorScheme";
+import { ColorScheme } from "../themes/common/colorScheme";
 import { background, border, text } from "./components";
 
-export default function HoverPopover(elevation: Elevation) {
-  let layer = elevation.middle;
+export default function HoverPopover(colorScheme: ColorScheme) {
+  let layer = colorScheme.middle;
   let baseContainer = {
     background: background(layer),
     cornerRadius: 8,
@@ -12,7 +12,7 @@ export default function HoverPopover(elevation: Elevation) {
       top: 4,
       bottom: 4,
     },
-    shadow: elevation.shadow,
+    shadow: colorScheme.popoverShadow,
     border: border(layer),
     margin: {
       left: -8,
@@ -40,6 +40,6 @@ export default function HoverPopover(elevation: Elevation) {
       padding: { top: 4 },
     },
     prose: text(layer, "sans", { size: "sm" }),
-    highlight: elevation.ramps.neutral(0.5).alpha(0.2).hex(), // TODO: blend was used here. Replace with something better
+    highlight: colorScheme.ramps.neutral(0.5).alpha(0.2).hex(), // TODO: blend was used here. Replace with something better
   };
 }
diff --git a/styles/src/styleTree/incomingCallNotification.ts b/styles/src/styleTree/incomingCallNotification.ts
index f0eb6c3bf5e2cd90bb0e98ef354f3a7a007a44f6..2540e5e78a16c52a373984f5f6a47f5077b17ae3 100644
--- a/styles/src/styleTree/incomingCallNotification.ts
+++ b/styles/src/styleTree/incomingCallNotification.ts
@@ -2,7 +2,7 @@ import { ColorScheme } from "../themes/common/colorScheme";
 import { background, border, text } from "./components";
 
 export default function incomingCallNotification(colorScheme: ColorScheme): Object {
-  let layer = colorScheme.middle.middle;
+  let layer = colorScheme.middle;
   const avatarSize = 48;
   return {
     windowHeight: 74,
diff --git a/styles/src/styleTree/picker.ts b/styles/src/styleTree/picker.ts
index 3e126f4f2e8c82dc592b9b91d2d940769a951c50..4d0b89a1599d4e6ef120492b5b4ee3f3d91f4516 100644
--- a/styles/src/styleTree/picker.ts
+++ b/styles/src/styleTree/picker.ts
@@ -2,12 +2,11 @@ import { ColorScheme } from "../themes/common/colorScheme";
 import { background, border, text } from "./components";
 
 export default function picker(colorScheme: ColorScheme) {
-  let elevation = colorScheme.highest;
-  let layer = elevation.top;
+  let layer = colorScheme.highest;
   return {
     background: background(layer),
     border: border(layer),
-    shadow: elevation.shadow,
+    shadow: colorScheme.modalShadow,
     cornerRadius: 12,
     padding: {
       bottom: 4,
diff --git a/styles/src/styleTree/projectDiagnostics.ts b/styles/src/styleTree/projectDiagnostics.ts
index 32127a84c7a3069dc329aa0bca53048b80d00f39..c80a5e1052a4973bc37a1cf7771038de70423e1e 100644
--- a/styles/src/styleTree/projectDiagnostics.ts
+++ b/styles/src/styleTree/projectDiagnostics.ts
@@ -2,7 +2,7 @@ import { ColorScheme } from "../themes/common/colorScheme";
 import { background, text } from "./components";
 
 export default function projectDiagnostics(colorScheme: ColorScheme) {
-  let layer = colorScheme.lowest.top;
+  let layer = colorScheme.highest;
   return {
     background: background(layer),
     tabIconSpacing: 4,
diff --git a/styles/src/styleTree/projectPanel.ts b/styles/src/styleTree/projectPanel.ts
index e90fd05598dd8f058f745aa435ecb25dfafee1d1..9b906c893f8321c223664ed0087cf9c20957fd5b 100644
--- a/styles/src/styleTree/projectPanel.ts
+++ b/styles/src/styleTree/projectPanel.ts
@@ -2,7 +2,7 @@ import { ColorScheme } from "../themes/common/colorScheme";
 import { background, foreground, text } from "./components";
 
 export default function projectPanel(colorScheme: ColorScheme) {
-  let layer = colorScheme.lowest.middle;
+  let layer = colorScheme.middle;
   return {
     background: background(layer),
     padding: { left: 12, right: 12, top: 6, bottom: 6 },
diff --git a/styles/src/styleTree/projectSharedNotification.ts b/styles/src/styleTree/projectSharedNotification.ts
index 4c40544c03f3a9706caa02772218bdec974b6b26..05542ca20c3aded4be4f01ec20d76a830289763e 100644
--- a/styles/src/styleTree/projectSharedNotification.ts
+++ b/styles/src/styleTree/projectSharedNotification.ts
@@ -2,14 +2,13 @@ import { ColorScheme } from "../themes/common/colorScheme";
 import { background, border, text } from "./components";
 
 export default function projectSharedNotification(colorScheme: ColorScheme): Object {
-  let elevation = colorScheme.middle;
-  let layer = elevation.middle;
+  let layer = colorScheme.middle;
 
   const avatarSize = 48;
   return {
     windowHeight: 74,
     windowWidth: 380,
-    background: background(layer,),
+    background: background(layer),
     ownerContainer: {
       padding: 12,
     },
diff --git a/styles/src/styleTree/search.ts b/styles/src/styleTree/search.ts
index a9a8a18821219465bb54a9d897eaa3c069c2e8c8..b494c237cccf2b3c365241f2284513f9eba4ee22 100644
--- a/styles/src/styleTree/search.ts
+++ b/styles/src/styleTree/search.ts
@@ -2,7 +2,7 @@ import { ColorScheme } from "../themes/common/colorScheme";
 import { background, border, text } from "./components";
 
 export default function search(colorScheme: ColorScheme) {
-  let layer = colorScheme.lowest.top;
+  let layer = colorScheme.highest;
 
   // Search input
   const editor = {
diff --git a/styles/src/styleTree/statusBar.ts b/styles/src/styleTree/statusBar.ts
index 7af530b2731f0d1df51f92c99cb9ff311cf8341c..bd9a9e2f00a95b179c7f93d2c42005afabecb9b5 100644
--- a/styles/src/styleTree/statusBar.ts
+++ b/styles/src/styleTree/statusBar.ts
@@ -2,7 +2,7 @@ import { ColorScheme } from "../themes/common/colorScheme";
 import { background, border, foreground, text } from "./components";
 
 export default function statusBar(colorScheme: ColorScheme) {
-  let layer = colorScheme.lowest.bottom;
+  let layer = colorScheme.lowest;
 
   const statusContainer = {
     cornerRadius: 6,
diff --git a/styles/src/styleTree/tabBar.ts b/styles/src/styleTree/tabBar.ts
index 01ea3b3dd7196b3b14e361b3ff6ffb35f5074b7b..bd6070e0ed9aa8bb9eb6560487b90d2d6aab6334 100644
--- a/styles/src/styleTree/tabBar.ts
+++ b/styles/src/styleTree/tabBar.ts
@@ -5,9 +5,8 @@ import { text, border, background, foreground } from "./components";
 export default function tabBar(colorScheme: ColorScheme) {
   const height = 32;
 
-  let elevation = colorScheme.lowest;
-  let activeLayer = elevation.top;
-  let layer = elevation.middle;
+  let activeLayer = colorScheme.highest;
+  let layer = colorScheme.middle;
 
   const tab = {
     height,
@@ -70,7 +69,7 @@ export default function tabBar(colorScheme: ColorScheme) {
     ...activePaneActiveTab,
     background: withOpacity(tab.background, 0.95),
     border: undefined as any,
-    shadow: elevation.above.shadow,
+    shadow: colorScheme.popoverShadow,
   };
 
   return {
diff --git a/styles/src/styleTree/terminal.ts b/styles/src/styleTree/terminal.ts
index a32a976fbfa0a32969be2596f8434342f6c9d4f3..2f5c34e5b8d124c0a6dbdc64541b1b3ce55bccaa 100644
--- a/styles/src/styleTree/terminal.ts
+++ b/styles/src/styleTree/terminal.ts
@@ -1,6 +1,6 @@
-import { Elevation } from "../themes/common/colorScheme";
+import { ColorScheme } from "../themes/common/colorScheme";
 
-export default function terminal(elevation: Elevation, cursor_color: string) {
+export default function terminal(colorScheme: ColorScheme) {
   /**
    * Colors are controlled per-cell in the terminal grid.
    * Cells can be set to any of these more 'theme-capable' colors
@@ -9,44 +9,44 @@ export default function terminal(elevation: Elevation, cursor_color: string) {
    * https://en.wikipedia.org/wiki/ANSI_escape_code#Colors
    */
   return {
-    black: elevation.ramps.neutral(0).hex(),
-    red: elevation.ramps.red(0.5).hex(),
-    green: elevation.ramps.green(0.5).hex(),
-    yellow: elevation.ramps.yellow(0.5).hex(),
-    blue: elevation.ramps.blue(0.5).hex(),
-    magenta: elevation.ramps.magenta(0.5).hex(),
-    cyan: elevation.ramps.cyan(0.5).hex(),
-    white: elevation.ramps.neutral(1).hex(),
-    brightBlack: elevation.ramps.neutral(0.4).hex(),
-    brightRed: elevation.ramps.red(0.25).hex(),
-    brightGreen: elevation.ramps.green(0.25).hex(),
-    brightYellow: elevation.ramps.yellow(0.25).hex(),
-    brightBlue: elevation.ramps.blue(0.25).hex(),
-    brightMagenta: elevation.ramps.magenta(0.25).hex(),
-    brightCyan: elevation.ramps.cyan(0.25).hex(),
-    brightWhite: elevation.ramps.neutral(1).hex(),
+    black: colorScheme.ramps.neutral(0).hex(),
+    red: colorScheme.ramps.red(0.5).hex(),
+    green: colorScheme.ramps.green(0.5).hex(),
+    yellow: colorScheme.ramps.yellow(0.5).hex(),
+    blue: colorScheme.ramps.blue(0.5).hex(),
+    magenta: colorScheme.ramps.magenta(0.5).hex(),
+    cyan: colorScheme.ramps.cyan(0.5).hex(),
+    white: colorScheme.ramps.neutral(1).hex(),
+    brightBlack: colorScheme.ramps.neutral(0.4).hex(),
+    brightRed: colorScheme.ramps.red(0.25).hex(),
+    brightGreen: colorScheme.ramps.green(0.25).hex(),
+    brightYellow: colorScheme.ramps.yellow(0.25).hex(),
+    brightBlue: colorScheme.ramps.blue(0.25).hex(),
+    brightMagenta: colorScheme.ramps.magenta(0.25).hex(),
+    brightCyan: colorScheme.ramps.cyan(0.25).hex(),
+    brightWhite: colorScheme.ramps.neutral(1).hex(),
     /**
      * Default color for characters
      */
-    foreground: elevation.ramps.neutral(1).hex(),
+    foreground: colorScheme.ramps.neutral(1).hex(),
     /**
      * Default color for the rectangle background of a cell
      */
-    background: elevation.ramps.neutral(0).hex(),
-    modalBackground: elevation.ramps.neutral(0.1).hex(),
+    background: colorScheme.ramps.neutral(0).hex(),
+    modalBackground: colorScheme.ramps.neutral(0.1).hex(),
     /**
      * Default color for the cursor
      */
-    cursor: cursor_color,
-    dimBlack: elevation.ramps.neutral(1).hex(),
-    dimRed: elevation.ramps.red(0.75).hex(),
-    dimGreen: elevation.ramps.green(0.75).hex(),
-    dimYellow: elevation.ramps.yellow(0.75).hex(),
-    dimBlue: elevation.ramps.blue(0.75).hex(),
-    dimMagenta: elevation.ramps.magenta(0.75).hex(),
-    dimCyan: elevation.ramps.cyan(0.75).hex(),
-    dimWhite: elevation.ramps.neutral(0.6).hex(),
-    brightForeground: elevation.ramps.neutral(1).hex(),
-    dimForeground: elevation.ramps.neutral(0).hex(),
+    cursor: colorScheme.players[0].cursor,
+    dimBlack: colorScheme.ramps.neutral(1).hex(),
+    dimRed: colorScheme.ramps.red(0.75).hex(),
+    dimGreen: colorScheme.ramps.green(0.75).hex(),
+    dimYellow: colorScheme.ramps.yellow(0.75).hex(),
+    dimBlue: colorScheme.ramps.blue(0.75).hex(),
+    dimMagenta: colorScheme.ramps.magenta(0.75).hex(),
+    dimCyan: colorScheme.ramps.cyan(0.75).hex(),
+    dimWhite: colorScheme.ramps.neutral(0.6).hex(),
+    brightForeground: colorScheme.ramps.neutral(1).hex(),
+    dimForeground: colorScheme.ramps.neutral(0).hex(),
   };
 }
diff --git a/styles/src/styleTree/tooltip.ts b/styles/src/styleTree/tooltip.ts
index c6551f02fa428a05065c6e1dad37cbb40f62f59f..5a43b1ef4c6c5ce277f1ad275f932eda5154c750 100644
--- a/styles/src/styleTree/tooltip.ts
+++ b/styles/src/styleTree/tooltip.ts
@@ -2,14 +2,13 @@ import { ColorScheme } from "../themes/common/colorScheme";
 import { background, border, text } from "./components";
 
 export default function tooltip(colorScheme: ColorScheme) {
-  let elevation = colorScheme.middle;
-  let layer = colorScheme.middle.middle;
+  let layer = colorScheme.middle;
   return {
     background: background(layer),
     border: border(layer),
     padding: { top: 4, bottom: 4, left: 8, right: 8 },
     margin: { top: 6, left: 6 },
-    shadow: elevation.shadow,
+    shadow: colorScheme.popoverShadow,
     cornerRadius: 6,
     text: text(layer, "sans", { size: "xs" }),
     keystroke: {
diff --git a/styles/src/styleTree/updateNotification.ts b/styles/src/styleTree/updateNotification.ts
index d0922a475650297e685a68dca1987435271e0860..08c0b0843074160c962c0cb0e623c1f486603c76 100644
--- a/styles/src/styleTree/updateNotification.ts
+++ b/styles/src/styleTree/updateNotification.ts
@@ -4,7 +4,7 @@ import { foreground, text } from "./components";
 const headerPadding = 8;
 
 export default function updateNotification(colorScheme: ColorScheme): Object {
-  let layer = colorScheme.middle.middle;
+  let layer = colorScheme.middle;
   return {
     message: {
       ...text(layer, "sans", { size: "xs" }),
diff --git a/styles/src/styleTree/workspace.ts b/styles/src/styleTree/workspace.ts
index 9641e3f92ff89183dadca4d47189a3f1f6b24268..4b5ee4d0dea1a1c5ba46730b76fe29aac5dba141 100644
--- a/styles/src/styleTree/workspace.ts
+++ b/styles/src/styleTree/workspace.ts
@@ -11,8 +11,7 @@ import statusBar from "./statusBar";
 import tabBar from "./tabBar";
 
 export default function workspace(colorScheme: ColorScheme) {
-  const elevation = colorScheme.lowest;
-  const layer = elevation.bottom;
+  const layer = colorScheme.lowest;
   const titlebarPadding = 6;
   const titlebarButton = {
     cornerRadius: 6,
@@ -28,7 +27,7 @@ export default function workspace(colorScheme: ColorScheme) {
     hover: {
       ...text(layer, "sans", "hovered", { size: "xs" }),
       background: background(layer, "hovered"),
-      border: border(elevation.top, "hovered"),
+      border: border(layer, "hovered"),
     },
   };
   const avatarWidth = 18;
@@ -44,12 +43,12 @@ export default function workspace(colorScheme: ColorScheme) {
       ...text(layer, "sans", { size: "lg" }),
     },
     externalLocationMessage: {
-      background: background(elevation.middle, "accent"),
-      border: border(elevation.middle, "accent"),
+      background: background(colorScheme.middle, "accent"),
+      border: border(colorScheme.middle, "accent"),
       cornerRadius: 6,
       padding: 12,
       margin: { bottom: 8, right: 8 },
-      ...text(elevation.middle, "sans", "accent", { size: "xs" }),
+      ...text(colorScheme.middle, "sans", "accent", { size: "xs" }),
     },
     leaderBorderOpacity: 0.7,
     leaderBorderWidth: 2.0,
@@ -166,20 +165,20 @@ export default function workspace(colorScheme: ColorScheme) {
 
     toolbar: {
       height: 34,
-      background: background(elevation.top),
-      border: border(elevation.top, { bottom: true }),
+      background: background(colorScheme.highest),
+      border: border(colorScheme.highest, { bottom: true }),
       itemSpacing: 8,
       navButton: {
-        color: foreground(elevation.top, "on"),
+        color: foreground(colorScheme.highest, "on"),
         iconWidth: 12,
         buttonWidth: 24,
         cornerRadius: 6,
         hover: {
-          color: foreground(elevation.top, "on", "hovered"),
-          background: background(elevation.top, "on", "hovered"),
+          color: foreground(colorScheme.highest, "on", "hovered"),
+          background: background(colorScheme.highest, "on", "hovered"),
         },
         disabled: {
-          color: foreground(elevation.top, "on", "disabled"),
+          color: foreground(colorScheme.highest, "on", "disabled"),
         },
       },
       padding: { left: 8, right: 8, top: 4, bottom: 4 },
@@ -194,11 +193,11 @@ export default function workspace(colorScheme: ColorScheme) {
     },
     notification: {
       margin: { top: 10 },
-      background: background(elevation.above.middle),
+      background: background(colorScheme.middle),
       cornerRadius: 6,
       padding: 12,
-      border: border(elevation.above.middle),
-      shadow: elevation.above.shadow,
+      border: border(colorScheme.middle),
+      shadow: colorScheme.popoverShadow,
     },
     notifications: {
       width: 400,
@@ -207,14 +206,14 @@ export default function workspace(colorScheme: ColorScheme) {
     dock: {
       initialSizeRight: 640,
       initialSizeBottom: 480,
-      wash_color: withOpacity(background(elevation.top), 0.5),
+      wash_color: withOpacity(background(colorScheme.highest), 0.5),
       panel: {
-        border: border(elevation.top),
+        border: border(colorScheme.highest),
       },
       maximized: {
         margin: 32,
-        border: border(elevation.above.top, { overlay: true }),
-        shadow: elevation.above.shadow,
+        border: border(colorScheme.highest, { overlay: true }),
+        shadow: colorScheme.modalShadow,
       },
     },
   };
diff --git a/styles/src/themes/common/colorScheme.ts b/styles/src/themes/common/colorScheme.ts
index c0118a67c3bef6256d5a111090b4aa799ad9f335..1b2c2cf7e89dc0a0f678370be3ed55709a3a2a46 100644
--- a/styles/src/themes/common/colorScheme.ts
+++ b/styles/src/themes/common/colorScheme.ts
@@ -4,9 +4,14 @@ export interface ColorScheme {
   name: string;
   isLight: boolean;
 
-  lowest: Elevation;
-  middle: Elevation;
-  highest: Elevation;
+  lowest: Layer;
+  middle: Layer;
+  highest: Layer;
+
+  ramps: RampSet;
+
+  popoverShadow: Shadow;
+  modalShadow: Shadow;
 
   players: Players;
 }
@@ -27,17 +32,6 @@ export interface Players {
   "7": Player;
 }
 
-export interface Elevation {
-  ramps: RampSet;
-
-  bottom: Layer;
-  middle: Layer;
-  top: Layer;
-
-  above?: Elevation;
-  shadow?: Shadow;
-}
-
 export interface Shadow {
   blur: number;
   color: string;
diff --git a/styles/src/themes/common/ramps.ts b/styles/src/themes/common/ramps.ts
index cb8f3c3dce216dc24bd07e6f9f55fc161dae4ad7..81b94bdb84f665b033354077c36255364adfb13f 100644
--- a/styles/src/themes/common/ramps.ts
+++ b/styles/src/themes/common/ramps.ts
@@ -1,11 +1,9 @@
 import chroma, { Color, Scale } from "chroma-js";
 import {
   ColorScheme,
-  Elevation,
   Layer,
   Player,
   RampSet,
-  Shadow,
   Style,
   Styles,
   StyleSet,
@@ -23,7 +21,7 @@ export function createColorScheme(
   colorRamps: { [rampName: string]: Scale }
 ): ColorScheme {
   // Chromajs scales from 0 to 1 flipped if isLight is true
-  let baseRamps: typeof colorRamps = {};
+  let ramps: RampSet = {} as any;
 
   // Chromajs mutates the underlying ramp when you call domain. This causes problems because
   // we now store the ramps object in the theme so that we can pull colors out of them.
@@ -33,73 +31,66 @@ export function createColorScheme(
   // function to any in order to get the colors back out from the original ramps.
   if (isLight) {
     for (var rampName in colorRamps) {
-      baseRamps[rampName] = chroma.scale(
+      (ramps as any)[rampName] = chroma.scale(
         colorRamps[rampName].colors(100).reverse()
       );
     }
-    baseRamps.neutral = chroma.scale(colorRamps.neutral.colors(100).reverse());
+    ramps.neutral = chroma.scale(colorRamps.neutral.colors(100).reverse());
   } else {
     for (var rampName in colorRamps) {
-      baseRamps[rampName] = chroma.scale(colorRamps[rampName].colors(100));
+      (ramps as any)[rampName] = chroma.scale(colorRamps[rampName].colors(100));
     }
-    baseRamps.neutral = chroma.scale(colorRamps.neutral.colors(100));
+    ramps.neutral = chroma.scale(colorRamps.neutral.colors(100));
   }
 
-  let baseSet = {
-    neutral: baseRamps.neutral,
-    red: baseRamps.red,
-    orange: baseRamps.orange,
-    yellow: baseRamps.yellow,
-    green: baseRamps.green,
-    cyan: baseRamps.cyan,
-    blue: baseRamps.blue,
-    violet: baseRamps.violet,
-    magenta: baseRamps.magenta,
-  };
-
-  let lowest = elevation(resampleSet(baseSet, evenSamples(0, 1)));
+  let lowest = lowestLayer(ramps);
+  let middle = middleLayer(ramps);
+  let highest = highestLayer(ramps);
 
-  let middle = elevation(resampleSet(baseSet, evenSamples(0.08, 1)), {
+  let popoverShadow = {
     blur: 4,
-    color: baseSet
+    color: ramps
       .neutral(isLight ? 7 : 0)
       .darken()
       .alpha(0.2)
       .hex(), // TODO used blend previously. Replace with something else
     offset: [1, 2],
-  });
-  lowest.above = middle;
+  };
 
-  let highest = elevation(resampleSet(baseSet, evenSamples(0.16, 1)), {
+  let modalShadow = {
     blur: 16,
-    color: baseSet
+    color: ramps
       .neutral(isLight ? 7 : 0)
       .darken()
       .alpha(0.2)
       .hex(), // TODO used blend previously. Replace with something else
     offset: [0, 2],
-  });
-  middle.above = highest;
+  };
 
   let players = {
-    "0": player(baseSet.blue),
-    "1": player(baseSet.green),
-    "2": player(baseSet.magenta),
-    "3": player(baseSet.orange),
-    "4": player(baseSet.violet),
-    "5": player(baseSet.cyan),
-    "6": player(baseSet.red),
-    "7": player(baseSet.yellow),
+    "0": player(ramps.blue),
+    "1": player(ramps.green),
+    "2": player(ramps.magenta),
+    "3": player(ramps.orange),
+    "4": player(ramps.violet),
+    "5": player(ramps.cyan),
+    "6": player(ramps.red),
+    "7": player(ramps.yellow),
   };
 
   return {
     name,
     isLight,
 
+    ramps,
+
     lowest,
     middle,
     highest,
 
+    popoverShadow,
+    modalShadow,
+
     players,
   };
 }
@@ -111,47 +102,7 @@ function player(ramp: Scale): Player {
   };
 }
 
-function evenSamples(min: number, max: number): number[] {
-  return Array.from(Array(101).keys()).map(
-    (i) => (i / 100) * (max - min) + min
-  );
-}
-
-function resampleSet(ramps: RampSet, samples: number[]): RampSet {
-  return {
-    neutral: resample(ramps.neutral, samples),
-    red: resample(ramps.red, samples),
-    orange: resample(ramps.orange, samples),
-    yellow: resample(ramps.yellow, samples),
-    green: resample(ramps.green, samples),
-    cyan: resample(ramps.cyan, samples),
-    blue: resample(ramps.blue, samples),
-    violet: resample(ramps.violet, samples),
-    magenta: resample(ramps.magenta, samples),
-  };
-}
-
-function resample(scale: Scale, samples: number[]): Scale {
-  let newColors = samples.map((sample) => scale(sample));
-  return chroma.scale(newColors);
-}
-
-function elevation(
-  ramps: RampSet,
-  shadow?: Shadow
-): Elevation {
-  return {
-    ramps,
-
-    bottom: bottomLayer(ramps),
-    middle: middleLayer(ramps),
-    top: topLayer(ramps),
-
-    shadow,
-  };
-}
-
-function bottomLayer(ramps: RampSet): Layer {
+function lowestLayer(ramps: RampSet): Layer {
   return {
     base: buildStyleSet(ramps.neutral, 0.2, 1),
     variant: buildStyleSet(ramps.neutral, 0.2, 0.7),
@@ -175,7 +126,7 @@ function middleLayer(ramps: RampSet): Layer {
   };
 }
 
-function topLayer(ramps: RampSet): Layer {
+function highestLayer(ramps: RampSet): Layer {
   return {
     base: buildStyleSet(ramps.neutral, 0, 1),
     variant: buildStyleSet(ramps.neutral, 0, 0.7),

From caec9c1f450f82c239ca88d7304b93ad94184440 Mon Sep 17 00:00:00 2001
From: K Simmons <keith@zed.dev>
Date: Wed, 19 Oct 2022 13:13:50 -0700
Subject: [PATCH 48/50] fixed issue in testbench

---
 crates/theme_testbench/src/theme_testbench.rs | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/crates/theme_testbench/src/theme_testbench.rs b/crates/theme_testbench/src/theme_testbench.rs
index ac78cce1c93c0286a5412e5193d83ebe828a58f7..17b6248671d0a80397a5231fccdb207f3b272acb 100644
--- a/crates/theme_testbench/src/theme_testbench.rs
+++ b/crates/theme_testbench/src/theme_testbench.rs
@@ -268,7 +268,7 @@ impl View for ThemeTestbench {
                 Self::render_ramps(color_scheme)
                     .contained()
                     .with_margin_right(10.)
-                    .flex(0.2, false)
+                    .flex(0.1, false)
                     .boxed(),
             )
             .with_child(
@@ -288,6 +288,7 @@ impl View for ThemeTestbench {
                             .flex(1., true)
                             .boxed(),
                     )
+                    .flex(1., false)
                     .boxed(),
             )
             .boxed()

From b7c439f4c44db03eaff27906b1526d442ff78516 Mon Sep 17 00:00:00 2001
From: K Simmons <keith@zed.dev>
Date: Wed, 19 Oct 2022 13:39:46 -0700
Subject: [PATCH 49/50] Fixup some theme inconsistencies and incorrect layer
 selections

---
 styles/src/styleTree/editor.ts    | 14 +++++++-------
 styles/src/styleTree/picker.ts    |  2 +-
 styles/src/styleTree/workspace.ts | 10 +++++-----
 styles/src/themes/cave.ts         |  2 +-
 4 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/styles/src/styleTree/editor.ts b/styles/src/styleTree/editor.ts
index 3b961b7dc057a7369ff1a9c5202eb20d4097e8fd..c94b6d81d214967d24b1752e16fc4dca13f858c9 100644
--- a/styles/src/styleTree/editor.ts
+++ b/styles/src/styleTree/editor.ts
@@ -177,25 +177,25 @@ export default function editor(colorScheme: ColorScheme) {
       colorScheme.players[7],
     ],
     autocomplete: {
-      background: background(colorScheme.lowest),
+      background: background(colorScheme.middle),
       cornerRadius: 8,
       padding: 4,
       margin: {
         left: -14,
       },
-      border: border(colorScheme.lowest),
+      border: border(colorScheme.middle),
       shadow: colorScheme.popoverShadow,
-      matchHighlight: foreground(colorScheme.lowest, "accent"),
+      matchHighlight: foreground(colorScheme.middle, "accent"),
       item: autocompleteItem,
       hoveredItem: {
         ...autocompleteItem,
-        matchHighlight: foreground(colorScheme.lowest, "accent", "hovered"),
-        background: background(colorScheme.lowest, "hovered"),
+        matchHighlight: foreground(colorScheme.middle, "accent", "hovered"),
+        background: background(colorScheme.middle, "hovered"),
       },
       selectedItem: {
         ...autocompleteItem,
-        matchHighlight: foreground(colorScheme.lowest, "accent", "active"),
-        background: background(colorScheme.lowest, "active"),
+        matchHighlight: foreground(colorScheme.middle, "accent", "active"),
+        background: background(colorScheme.middle, "active"),
       },
     },
     diagnosticHeader: {
diff --git a/styles/src/styleTree/picker.ts b/styles/src/styleTree/picker.ts
index 4d0b89a1599d4e6ef120492b5b4ee3f3d91f4516..30608eeb9ed23186098f78720c0d41938bea90f0 100644
--- a/styles/src/styleTree/picker.ts
+++ b/styles/src/styleTree/picker.ts
@@ -2,7 +2,7 @@ import { ColorScheme } from "../themes/common/colorScheme";
 import { background, border, text } from "./components";
 
 export default function picker(colorScheme: ColorScheme) {
-  let layer = colorScheme.highest;
+  let layer = colorScheme.lowest;
   return {
     background: background(layer),
     border: border(layer),
diff --git a/styles/src/styleTree/workspace.ts b/styles/src/styleTree/workspace.ts
index 4b5ee4d0dea1a1c5ba46730b76fe29aac5dba141..dc3744415967c923848a9b68390dcf4fe6012ae5 100644
--- a/styles/src/styleTree/workspace.ts
+++ b/styles/src/styleTree/workspace.ts
@@ -21,13 +21,13 @@ export default function workspace(colorScheme: ColorScheme) {
       left: 8,
       right: 8,
     },
-    ...text(layer, "sans", { size: "xs" }),
-    background: background(layer),
+    ...text(layer, "sans", "variant", { size: "xs" }),
+    background: background(layer, "variant"),
     border: border(layer),
     hover: {
-      ...text(layer, "sans", "hovered", { size: "xs" }),
-      background: background(layer, "hovered"),
-      border: border(layer, "hovered"),
+      ...text(layer, "sans", "variant", "hovered", { size: "xs" }),
+      background: background(layer, "variant", "hovered"),
+      border: border(layer, "variant", "hovered"),
     },
   };
   const avatarWidth = 18;
diff --git a/styles/src/themes/cave.ts b/styles/src/themes/cave.ts
index 3914fb03d714124a2e65d64112b7ec748e70a4c7..f13b9f028a26f7e8ce9fc131c4f00a225f3b85ae 100644
--- a/styles/src/themes/cave.ts
+++ b/styles/src/themes/cave.ts
@@ -15,7 +15,7 @@ export const dark = createColorScheme(`${name}-dark`, false, {
       "#e2dfe7",
       "#efecf4",
     ])
-    .domain([0, 0.3, 0.45, 0.6, 0.65, 0.7, 0.85, 1]),
+    .domain([0, 0.15, 0.45, 0.6, 0.65, 0.7, 0.85, 1]),
   red: colorRamp(chroma("#be4678")),
   orange: colorRamp(chroma("#aa573c")),
   yellow: colorRamp(chroma("#a06e3b")),

From 2aa2e5af7a80d6b54cd8e87b33801585b311c0a1 Mon Sep 17 00:00:00 2001
From: K Simmons <keith@zed.dev>
Date: Wed, 19 Oct 2022 13:45:00 -0700
Subject: [PATCH 50/50] fix issue with text component and adjust layer
 selections some more

---
 styles/src/styleTree/components.ts  |  3 ++-
 styles/src/styleTree/contextMenu.ts |  2 +-
 styles/src/styleTree/workspace.ts   | 10 +++++-----
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/styles/src/styleTree/components.ts b/styles/src/styleTree/components.ts
index 3062a73130cb1a9641086af32bc3b49221e9538d..7776c4f14fe272cdc6c0d2ea571be93572194f2c 100644
--- a/styles/src/styleTree/components.ts
+++ b/styles/src/styleTree/components.ts
@@ -123,7 +123,6 @@ export function text(
   properties?: TextProperties
 ) {
   let style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties);
-  let size = fontSizes[properties?.size || "sm"];
 
   if (typeof styleSetStyleOrProperties === "object") {
     properties = styleSetStyleOrProperties;
@@ -132,6 +131,8 @@ export function text(
     properties = styleOrProperties;
   }
 
+  let size = fontSizes[properties?.size || "sm"];
+
   return {
     family: fontFamilies[fontFamily],
     color: style.foreground,
diff --git a/styles/src/styleTree/contextMenu.ts b/styles/src/styleTree/contextMenu.ts
index 440ef5b439d60a035c5822a7be55ba2baca4b4ac..49f3a3b472537ce50a0200ddd6f0ed2ced0d2e4d 100644
--- a/styles/src/styleTree/contextMenu.ts
+++ b/styles/src/styleTree/contextMenu.ts
@@ -2,7 +2,7 @@ import { ColorScheme } from "../themes/common/colorScheme";
 import { background, border, borderColor, text } from "./components";
 
 export default function contextMenu(colorScheme: ColorScheme) {
-  let layer = colorScheme.lowest;
+  let layer = colorScheme.middle;
   return {
     background: background(layer),
     cornerRadius: 10,
diff --git a/styles/src/styleTree/workspace.ts b/styles/src/styleTree/workspace.ts
index dc3744415967c923848a9b68390dcf4fe6012ae5..aced6d2a2ff4578bf2a1c7f593f22eb4f9f6f0cd 100644
--- a/styles/src/styleTree/workspace.ts
+++ b/styles/src/styleTree/workspace.ts
@@ -139,16 +139,16 @@ export default function workspace(colorScheme: ColorScheme) {
       },
       toggleContactsButton: {
         cornerRadius: 6,
-        color: foreground(layer),
+        color: foreground(layer, "variant"),
         iconWidth: 8,
         buttonWidth: 20,
         active: {
-          background: background(layer, "active"),
-          color: foreground(layer, "active"),
+          background: background(layer, "variant", "active"),
+          color: foreground(layer, "variant", "active"),
         },
         hover: {
-          background: background(layer, "hovered"),
-          color: foreground(layer, "hovered"),
+          background: background(layer, "variant", "hovered"),
+          color: foreground(layer, "variant", "hovered"),
         },
       },
       toggleContactsBadge: {