From 38ed70d5ccb4f6f2205d393bf12a3737a160e614 Mon Sep 17 00:00:00 2001 From: Mikayla Maki Date: Tue, 28 Jun 2022 17:07:18 -0700 Subject: [PATCH] Added theme support --- crates/terminal/src/element.rs | 72 +++++++++++++++--------------- crates/theme/src/theme.rs | 34 ++++++++++++++ styles/src/styleTree/app.ts | 2 + styles/src/styleTree/terminal.ts | 35 +++++++++++++++ styles/src/themes/cave.ts | 3 ++ styles/src/themes/common/base16.ts | 22 ++++++--- styles/src/themes/common/theme.ts | 3 ++ 7 files changed, 131 insertions(+), 40 deletions(-) create mode 100644 styles/src/styleTree/terminal.ts diff --git a/crates/terminal/src/element.rs b/crates/terminal/src/element.rs index 111a2fd65481b8d7f31edcf88aafe8b57af7f36c..04828e8d6583778f3374086c29e1acc6d27c174e 100644 --- a/crates/terminal/src/element.rs +++ b/crates/terminal/src/element.rs @@ -23,6 +23,7 @@ use mio_extras::channel::Sender; use ordered_float::OrderedFloat; use settings::Settings; use std::sync::Arc; +use theme::TerminalStyle; use crate::{Input, ZedListener}; @@ -62,7 +63,8 @@ impl Element for TerminalEl { ) -> (gpui::geometry::vector::Vector2F, Self::LayoutState) { let size = constraint.max; let settings = cx.global::(); - let theme = &settings.theme.editor; + let editor_theme = &settings.theme.editor; + let terminal_theme = &settings.theme.terminal; //Get terminal let mut term = self.term.lock(); @@ -78,7 +80,7 @@ impl Element for TerminalEl { let font_size = settings.buffer_font_size; let text_style = TextStyle { - color: theme.text_color, + color: editor_theme.text_color, font_family_id: settings.buffer_font_family, font_family_name, font_id, @@ -122,7 +124,7 @@ impl Element for TerminalEl { }, //TODO: Learn what 'CellExtra does' } = cell; - let new_highlight = make_style_from_cell(fg, flags); + let new_highlight = make_style_from_cell(fg, flags, &terminal_theme); if line != last_line { line_count += 1; @@ -248,8 +250,8 @@ impl Element for TerminalEl { } } -fn make_style_from_cell(fg: &AnsiColor, flags: &Flags) -> HighlightStyle { - let fg = Some(alac_color_to_gpui_color(fg)); +fn make_style_from_cell(fg: &AnsiColor, flags: &Flags, style: &TerminalStyle) -> HighlightStyle { + let fg = Some(alac_color_to_gpui_color(fg, style)); let underline = if flags.contains(Flags::UNDERLINE) { Some(Underline { color: fg, @@ -266,38 +268,38 @@ fn make_style_from_cell(fg: &AnsiColor, flags: &Flags) -> HighlightStyle { } } -fn alac_color_to_gpui_color(allac_color: &AnsiColor) -> Color { +fn alac_color_to_gpui_color(allac_color: &AnsiColor, style: &TerminalStyle) -> Color { match allac_color { alacritty_terminal::ansi::Color::Named(n) => match n { - alacritty_terminal::ansi::NamedColor::Black => Color::black(), - alacritty_terminal::ansi::NamedColor::Red => Color::red(), - alacritty_terminal::ansi::NamedColor::Green => Color::green(), - alacritty_terminal::ansi::NamedColor::Yellow => Color::yellow(), - alacritty_terminal::ansi::NamedColor::Blue => Color::blue(), - alacritty_terminal::ansi::NamedColor::Magenta => Color::new(188, 63, 188, 1), - alacritty_terminal::ansi::NamedColor::Cyan => Color::new(17, 168, 205, 1), - alacritty_terminal::ansi::NamedColor::White => Color::white(), - alacritty_terminal::ansi::NamedColor::BrightBlack => Color::new(102, 102, 102, 1), - alacritty_terminal::ansi::NamedColor::BrightRed => Color::new(102, 102, 102, 1), - alacritty_terminal::ansi::NamedColor::BrightGreen => Color::new(35, 209, 139, 1), - alacritty_terminal::ansi::NamedColor::BrightYellow => Color::new(245, 245, 67, 1), - alacritty_terminal::ansi::NamedColor::BrightBlue => Color::new(59, 142, 234, 1), - alacritty_terminal::ansi::NamedColor::BrightMagenta => Color::new(214, 112, 214, 1), - alacritty_terminal::ansi::NamedColor::BrightCyan => Color::new(41, 184, 219, 1), - alacritty_terminal::ansi::NamedColor::BrightWhite => Color::new(229, 229, 229, 1), - alacritty_terminal::ansi::NamedColor::Foreground => Color::white(), - alacritty_terminal::ansi::NamedColor::Background => Color::black(), - alacritty_terminal::ansi::NamedColor::Cursor => Color::white(), - alacritty_terminal::ansi::NamedColor::DimBlack => Color::white(), - alacritty_terminal::ansi::NamedColor::DimRed => Color::white(), - alacritty_terminal::ansi::NamedColor::DimGreen => Color::white(), - alacritty_terminal::ansi::NamedColor::DimYellow => Color::white(), - alacritty_terminal::ansi::NamedColor::DimBlue => Color::white(), - alacritty_terminal::ansi::NamedColor::DimMagenta => Color::white(), - alacritty_terminal::ansi::NamedColor::DimCyan => Color::white(), - alacritty_terminal::ansi::NamedColor::DimWhite => Color::white(), - alacritty_terminal::ansi::NamedColor::BrightForeground => Color::white(), - alacritty_terminal::ansi::NamedColor::DimForeground => Color::white(), + 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, }, //Theme defined alacritty_terminal::ansi::Color::Spec(rgb) => Color::new(rgb.r, rgb.g, rgb.b, 1), alacritty_terminal::ansi::Color::Indexed(_) => Color::white(), //Color cube weirdness diff --git a/crates/theme/src/theme.rs b/crates/theme/src/theme.rs index ae269c00cbacfc35bdd213d5ecdd5a0cf6e816ed..184b1880f0c0a05cc581059b80766b3d282cc9cc 100644 --- a/crates/theme/src/theme.rs +++ b/crates/theme/src/theme.rs @@ -33,6 +33,7 @@ pub struct Theme { pub contact_notification: ContactNotification, pub update_notification: UpdateNotification, pub tooltip: TooltipStyle, + pub terminal: TerminalStyle, } #[derive(Deserialize, Default)] @@ -633,3 +634,36 @@ pub struct HoverPopover { pub prose: TextStyle, pub highlight: Color, } + +#[derive(Clone, Deserialize, Default)] +pub struct TerminalStyle { + pub black: Color, + pub red: Color, + pub green: Color, + pub yellow: Color, + pub blue: Color, + pub magenta: Color, + pub cyan: Color, + pub white: Color, + pub bright_black: Color, + pub bright_red: Color, + pub bright_green: Color, + pub bright_yellow: Color, + pub bright_blue: Color, + pub bright_magenta: Color, + pub bright_cyan: Color, + pub bright_white: Color, + pub foreground: Color, + pub background: Color, + pub cursor: Color, + pub dim_black: Color, + pub dim_red: Color, + pub dim_green: Color, + pub dim_yellow: Color, + pub dim_blue: Color, + pub dim_magenta: Color, + pub dim_cyan: Color, + pub dim_white: Color, + pub bright_foreground: Color, + pub dim_foreground: Color, +} diff --git a/styles/src/styleTree/app.ts b/styles/src/styleTree/app.ts index e015895e9c3522e186dfbdfef2e1a44123321247..fe67cf701d2071206d8faed0bfe74a8a3412e909 100644 --- a/styles/src/styleTree/app.ts +++ b/styles/src/styleTree/app.ts @@ -14,6 +14,7 @@ import projectDiagnostics from "./projectDiagnostics"; import contactNotification from "./contactNotification"; import updateNotification from "./updateNotification"; import tooltip from "./tooltip"; +import terminal from "./terminal"; export const panel = { padding: { top: 12, bottom: 12 }, @@ -41,5 +42,6 @@ export default function app(theme: Theme): Object { contactNotification: contactNotification(theme), updateNotification: updateNotification(theme), tooltip: tooltip(theme), + terminal: terminal(theme), }; } diff --git a/styles/src/styleTree/terminal.ts b/styles/src/styleTree/terminal.ts new file mode 100644 index 0000000000000000000000000000000000000000..ef9e4f93ddf1a66d96ed683769bd52655247a326 --- /dev/null +++ b/styles/src/styleTree/terminal.ts @@ -0,0 +1,35 @@ +import Theme from "../themes/common/theme"; + +export default function terminal(theme: Theme) { + return { + 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(2).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(), + foreground: theme.ramps.neutral(7).hex(), + background: theme.ramps.neutral(0).hex(), + cursor: theme.ramps.neutral(7).hex(), + 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(), + }; +} \ No newline at end of file diff --git a/styles/src/themes/cave.ts b/styles/src/themes/cave.ts index 2e66f4baf465c473ea4660adc46cfd22e416adbe..d588f84c536fe76b91bbd1be3123eea00dcc85aa 100644 --- a/styles/src/themes/cave.ts +++ b/styles/src/themes/cave.ts @@ -26,3 +26,6 @@ const ramps = { export const dark = createTheme(`${name}-dark`, false, ramps); export const light = createTheme(`${name}-light`, true, ramps); + +console.log(JSON.stringify(dark.ramps.neutral.domain())) +console.log(JSON.stringify(light.ramps.neutral.domain())) \ No newline at end of file diff --git a/styles/src/themes/common/base16.ts b/styles/src/themes/common/base16.ts index 21a02cde25ab0ada2cf10f65c2d8b0043bf335f2..729cf32ee5354ff9411dbaaa1f5a566bbbb820f6 100644 --- a/styles/src/themes/common/base16.ts +++ b/styles/src/themes/common/base16.ts @@ -13,15 +13,25 @@ export function colorRamp(color: Color): Scale { export function createTheme( name: string, isLight: boolean, - ramps: { [rampName: string]: Scale }, + 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 ramps) { - ramps[rampName] = ramps[rampName].domain([1, 0]); + for (var rampName in color_ramps) { + ramps[rampName] = chroma.scale((color_ramps[rampName].colors as any)()).domain([1, 0]); } - ramps.neutral = ramps.neutral.domain([7, 0]); + ramps.neutral = chroma.scale((color_ramps.neutral.colors as any)()).domain([7, 0]); } else { - ramps.neutral = ramps.neutral.domain([0, 7]); + 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; @@ -237,6 +247,7 @@ export function createTheme( return { name, + isLight, backgroundColor, borderColor, textColor, @@ -245,5 +256,6 @@ export function createTheme( syntax, player, shadow, + ramps, }; } diff --git a/styles/src/themes/common/theme.ts b/styles/src/themes/common/theme.ts index 92b1f8eff895842b7e08b336ab2457fdb60fb5f2..7f32f48974796481f4e25e026d916456e6a81da6 100644 --- a/styles/src/themes/common/theme.ts +++ b/styles/src/themes/common/theme.ts @@ -1,3 +1,4 @@ +import { Scale } from "chroma-js"; import { FontWeight } from "../../common"; import { withOpacity } from "../../utils/color"; @@ -60,6 +61,7 @@ export interface Syntax { export default interface Theme { name: string; + isLight: boolean, backgroundColor: { // Basically just Title Bar // Lowest background level @@ -155,4 +157,5 @@ export default interface Theme { 8: Player; }, shadow: string; + ramps: { [rampName: string]: Scale }; }