WIP

Nate Butler created 2 years ago

Change summary

crates/theme2/src/default_colors.rs  | 128 +++++++++++++++---------------
crates/theme2/src/scale.rs           |   2 
crates/ui2/src/components/tooltip.rs |   4 
3 files changed, 68 insertions(+), 66 deletions(-)

Detailed changes

crates/theme2/src/default_colors.rs

@@ -102,7 +102,7 @@ impl PlayerColors {
 }
 
 fn neutral() -> ColorScaleSet {
-    slate()
+    olive()
 }
 
 impl Default for SystemColors {
@@ -142,24 +142,24 @@ impl SyntaxTheme {
                 ("boolean".into(), tomato().light().step_11().into()),
                 ("comment".into(), neutral().light().step_11().into()),
                 ("comment.doc".into(), iris().light().step_12().into()),
-                ("constant".into(), red().light().step_7().into()),
-                ("constructor".into(), red().light().step_7().into()),
-                ("embedded".into(), red().light().step_7().into()),
-                ("emphasis".into(), red().light().step_7().into()),
-                ("emphasis.strong".into(), red().light().step_7().into()),
-                ("enum".into(), red().light().step_7().into()),
-                ("function".into(), red().light().step_7().into()),
-                ("hint".into(), red().light().step_7().into()),
+                ("constant".into(), red().light().step_9().into()),
+                ("constructor".into(), red().light().step_9().into()),
+                ("embedded".into(), red().light().step_9().into()),
+                ("emphasis".into(), red().light().step_9().into()),
+                ("emphasis.strong".into(), red().light().step_9().into()),
+                ("enum".into(), red().light().step_9().into()),
+                ("function".into(), red().light().step_9().into()),
+                ("hint".into(), red().light().step_9().into()),
                 ("keyword".into(), orange().light().step_11().into()),
-                ("label".into(), red().light().step_7().into()),
-                ("link_text".into(), red().light().step_7().into()),
-                ("link_uri".into(), red().light().step_7().into()),
-                ("number".into(), red().light().step_7().into()),
-                ("operator".into(), red().light().step_7().into()),
-                ("predictive".into(), red().light().step_7().into()),
-                ("preproc".into(), red().light().step_7().into()),
-                ("primary".into(), red().light().step_7().into()),
-                ("property".into(), red().light().step_7().into()),
+                ("label".into(), red().light().step_9().into()),
+                ("link_text".into(), red().light().step_9().into()),
+                ("link_uri".into(), red().light().step_9().into()),
+                ("number".into(), red().light().step_9().into()),
+                ("operator".into(), red().light().step_9().into()),
+                ("predictive".into(), red().light().step_9().into()),
+                ("preproc".into(), red().light().step_9().into()),
+                ("primary".into(), red().light().step_9().into()),
+                ("property".into(), red().light().step_9().into()),
                 ("punctuation".into(), neutral().light().step_11().into()),
                 (
                     "punctuation.bracket".into(),
@@ -173,22 +173,22 @@ impl SyntaxTheme {
                     "punctuation.list_marker".into(),
                     blue().light().step_11().into(),
                 ),
-                ("punctuation.special".into(), red().light().step_7().into()),
+                ("punctuation.special".into(), red().light().step_9().into()),
                 ("string".into(), jade().light().step_11().into()),
-                ("string.escape".into(), red().light().step_7().into()),
+                ("string.escape".into(), red().light().step_9().into()),
                 ("string.regex".into(), tomato().light().step_11().into()),
-                ("string.special".into(), red().light().step_7().into()),
+                ("string.special".into(), red().light().step_9().into()),
                 (
                     "string.special.symbol".into(),
-                    red().light().step_7().into(),
+                    red().light().step_9().into(),
                 ),
-                ("tag".into(), red().light().step_7().into()),
-                ("text.literal".into(), red().light().step_7().into()),
-                ("title".into(), red().light().step_7().into()),
-                ("type".into(), red().light().step_7().into()),
-                ("variable".into(), red().light().step_7().into()),
-                ("variable.special".into(), red().light().step_7().into()),
-                ("variant".into(), red().light().step_7().into()),
+                ("tag".into(), red().light().step_9().into()),
+                ("text.literal".into(), red().light().step_9().into()),
+                ("title".into(), red().light().step_9().into()),
+                ("type".into(), red().light().step_9().into()),
+                ("variable".into(), red().light().step_9().into()),
+                ("variable.special".into(), red().light().step_9().into()),
+                ("variant".into(), red().light().step_9().into()),
             ],
             inlay_style: tomato().light().step_1().into(), // todo!("nate: use a proper style")
             suggestion_style: orange().light().step_1().into(), // todo!("nate: use proper style")
@@ -202,24 +202,24 @@ impl SyntaxTheme {
                 ("boolean".into(), tomato().dark().step_11().into()),
                 ("comment".into(), neutral().dark().step_11().into()),
                 ("comment.doc".into(), iris().dark().step_12().into()),
-                ("constant".into(), red().dark().step_7().into()),
-                ("constructor".into(), red().dark().step_7().into()),
-                ("embedded".into(), red().dark().step_7().into()),
-                ("emphasis".into(), red().dark().step_7().into()),
-                ("emphasis.strong".into(), red().dark().step_7().into()),
-                ("enum".into(), red().dark().step_7().into()),
-                ("function".into(), red().dark().step_7().into()),
-                ("hint".into(), red().dark().step_7().into()),
+                ("constant".into(), red().dark().step_9().into()),
+                ("constructor".into(), red().dark().step_9().into()),
+                ("embedded".into(), red().dark().step_9().into()),
+                ("emphasis".into(), red().dark().step_9().into()),
+                ("emphasis.strong".into(), red().dark().step_9().into()),
+                ("enum".into(), red().dark().step_9().into()),
+                ("function".into(), red().dark().step_9().into()),
+                ("hint".into(), red().dark().step_9().into()),
                 ("keyword".into(), orange().dark().step_11().into()),
-                ("label".into(), red().dark().step_7().into()),
-                ("link_text".into(), red().dark().step_7().into()),
-                ("link_uri".into(), red().dark().step_7().into()),
-                ("number".into(), red().dark().step_7().into()),
-                ("operator".into(), red().dark().step_7().into()),
-                ("predictive".into(), red().dark().step_7().into()),
-                ("preproc".into(), red().dark().step_7().into()),
-                ("primary".into(), red().dark().step_7().into()),
-                ("property".into(), red().dark().step_7().into()),
+                ("label".into(), red().dark().step_9().into()),
+                ("link_text".into(), red().dark().step_9().into()),
+                ("link_uri".into(), red().dark().step_9().into()),
+                ("number".into(), red().dark().step_9().into()),
+                ("operator".into(), red().dark().step_9().into()),
+                ("predictive".into(), red().dark().step_9().into()),
+                ("preproc".into(), red().dark().step_9().into()),
+                ("primary".into(), red().dark().step_9().into()),
+                ("property".into(), red().dark().step_9().into()),
                 ("punctuation".into(), neutral().dark().step_11().into()),
                 (
                     "punctuation.bracket".into(),
@@ -233,19 +233,19 @@ impl SyntaxTheme {
                     "punctuation.list_marker".into(),
                     blue().dark().step_11().into(),
                 ),
-                ("punctuation.special".into(), red().dark().step_7().into()),
+                ("punctuation.special".into(), red().dark().step_9().into()),
                 ("string".into(), jade().dark().step_11().into()),
-                ("string.escape".into(), red().dark().step_7().into()),
+                ("string.escape".into(), red().dark().step_9().into()),
                 ("string.regex".into(), tomato().dark().step_11().into()),
-                ("string.special".into(), red().dark().step_7().into()),
-                ("string.special.symbol".into(), red().dark().step_7().into()),
-                ("tag".into(), red().dark().step_7().into()),
-                ("text.literal".into(), red().dark().step_7().into()),
-                ("title".into(), red().dark().step_7().into()),
-                ("type".into(), red().dark().step_7().into()),
-                ("variable".into(), red().dark().step_7().into()),
-                ("variable.special".into(), red().dark().step_7().into()),
-                ("variant".into(), red().dark().step_7().into()),
+                ("string.special".into(), red().dark().step_9().into()),
+                ("string.special.symbol".into(), red().dark().step_9().into()),
+                ("tag".into(), red().dark().step_9().into()),
+                ("text.literal".into(), red().dark().step_9().into()),
+                ("title".into(), red().dark().step_9().into()),
+                ("type".into(), red().dark().step_9().into()),
+                ("variable".into(), red().dark().step_9().into()),
+                ("variable.special".into(), red().dark().step_9().into()),
+                ("variant".into(), red().dark().step_9().into()),
             ],
             inlay_style: tomato().dark().step_1().into(), // todo!("nate: use a proper style")
             suggestion_style: orange().dark().step_1().into(), // todo!("nate: use a proper style")
@@ -278,7 +278,7 @@ impl ThemeColors {
             ghost_element_active: neutral().light().step_5(),
             ghost_element_selected: neutral().light().step_5(),
             ghost_element_disabled: neutral().light_alpha().step_3(),
-            text: neutral().light().step_12(),
+            text: yellow().light().step_9(),
             text_muted: neutral().light().step_11(),
             text_placeholder: neutral().light().step_10(),
             text_disabled: neutral().light().step_9(),
@@ -350,8 +350,8 @@ impl ThemeColors {
             ghost_element_active: neutral().dark().step_5(),
             ghost_element_selected: neutral().dark().step_5(),
             ghost_element_disabled: neutral().dark_alpha().step_3(),
-            text: neutral().dark().step_12(),
-            text_muted: neutral().dark().step_11(),
+            text: green().dark().step_9(),
+            text_muted: blue().dark().step_9(),
             text_placeholder: neutral().dark().step_10(),
             text_disabled: neutral().dark().step_9(),
             text_accent: blue().dark().step_11(),
@@ -367,11 +367,11 @@ impl ThemeColors {
             tab_active_background: neutral().dark().step_1(),
             tab_inactive_background: neutral().dark().step_2(),
             editor_background: neutral().dark().step_1(),
-            editor_gutter_background: neutral().dark().step_1(), // todo!("pick the right colors")
-            editor_subheader_background: neutral().dark().step_2(),
+            editor_gutter_background: neutral().dark().step_1(),
+            editor_subheader_background: neutral().dark().step_3(),
             editor_active_line_background: neutral().dark_alpha().step_3(),
-            editor_line_number: neutral().dark_alpha().step_3(), // todo!("pick the right colors")
-            editor_active_line_number: neutral().dark_alpha().step_3(), // todo!("pick the right colors")
+            editor_line_number: neutral().dark_alpha().step_10(),
+            editor_active_line_number: neutral().dark_alpha().step_12(),
             editor_highlighted_line_background: neutral().dark_alpha().step_4(), // todo!("pick the right colors")
             editor_invisible: neutral().dark_alpha().step_4(), // todo!("pick the right colors")
             editor_wrap_guide: neutral().dark_alpha().step_4(), // todo!("pick the right colors")

crates/theme2/src/scale.rs

@@ -128,6 +128,8 @@ impl ColorScale {
     }
 
     /// `Step 10` - Used for hovered or active solid backgrounds, particularly when `Step 9` is their normal state.
+    ///
+    /// May also be used for extremely low contrast text. This should be used sparingly, as it may be difficult to read.
     #[inline]
     pub fn step_10(&self) -> Hsla {
         self.step(ColorScaleStep::TEN)

crates/ui2/src/components/tooltip.rs

@@ -1,4 +1,4 @@
-use gpui::{div, px, Div, ParentElement, Render, SharedString, Styled, ViewContext};
+use gpui::{div, Div, ParentElement, Render, SharedString, Styled, ViewContext};
 use theme2::ActiveTheme;
 
 #[derive(Clone, Debug)]
@@ -19,7 +19,7 @@ impl Render for TextTooltip {
         let theme = cx.theme();
         div()
             .bg(theme.colors().background)
-            .rounded(px(8.))
+            .rounded_lg()
             .border()
             .font("Zed Sans")
             .border_color(theme.colors().border)