Add a theme entry for whitespace, use it to style whitespaces

Nate Butler , Antonio Scandurra , and Kirill Bulatov created 2 years ago

Co-Authored-By: Antonio Scandurra <[e-mail]>
Co-Authored-By: Kirill Bulatov <[e-mail]>

Change summary

crates/editor/src/element.rs   | 2 +-
crates/theme/src/theme.rs      | 1 +
styles/src/styleTree/editor.ts | 3 ++-
3 files changed, 4 insertions(+), 2 deletions(-)

Detailed changes

crates/editor/src/element.rs

@@ -2202,7 +2202,7 @@ impl Element<Editor> for EditorElement {
 
         let invisible_symbol_font_size = self.style.text.font_size / 2.0;
         let invisible_symbol_style = RunStyle {
-            color: self.style.line_number,
+            color: self.style.whitespace,
             font_id: self.style.text.font_id,
             underline: Default::default(),
         };

crates/theme/src/theme.rs

@@ -636,6 +636,7 @@ pub struct Editor {
     pub composition_mark: HighlightStyle,
     pub jump_icon: Interactive<IconButton>,
     pub scrollbar: Scrollbar,
+    pub whitespace: Color,
 }
 
 #[derive(Clone, Deserialize, Default)]

styles/src/styleTree/editor.ts

@@ -3,7 +3,7 @@ import { ColorScheme, Layer, StyleSets } from "../themes/common/colorScheme"
 import { background, border, borderColor, foreground, text } from "./components"
 import hoverPopover from "./hoverPopover"
 
-import { buildSyntax } from "../themes/common/syntax"
+import { SyntaxHighlightStyle, buildSyntax } from "../themes/common/syntax"
 
 export default function editor(colorScheme: ColorScheme) {
     let layer = colorScheme.highest
@@ -123,6 +123,7 @@ export default function editor(colorScheme: ColorScheme) {
         renameFade: 0.6,
         unnecessaryCodeFade: 0.5,
         selection: colorScheme.players[0],
+        whitespace: colorScheme.ramps.neutral(0.5).hex(),
         guestSelections: [
             colorScheme.players[1],
             colorScheme.players[2],