Style tweaks (#450)

* Tweak style

More compact, less round, less noisy

* Button text is now same size as body text
* The rounder corners are now less rounded
* Collapsing headers no longer have a frame around them
* Combo-boxes looks better when opened
* Slightly more muted colors
* Remove extra line spacing after `\n` (i.e. between paragraphs)

* Thinner scrollbars

* Tweak light mode

* Tweak shadows

* Fix broken doc link

* Add style tweak to CHANGELOG

Author: emilk

CHANGELOG.md

@@ -24,6 +24,7 @@ NOTE: [`eframe`](eframe/CHANGELOG.md), [`egui_web`](egui_web/CHANGELOG.md) and [
 * Add `ScrollArea::enable_scrolling` to allow freezing scrolling when editing TextEdit widgets within it
 
 ### Changed 🔧
+* [Tweaked the default visuals style](https://github.com/emilk/egui/pull/450).
 * Plot: Changed `Curve` to `Line`.
 * `TopPanel::top` is now `TopBottomPanel::top`.
 * `SidePanel::left` no longet takes the default width by argument, but by a builder call.

egui/src/containers/collapsing_header.rs

@@ -246,13 +246,16 @@ impl CollapsingHeader {
 
         let visuals = ui.style().interact(&header_response);
         let text_color = visuals.text_color();
-        ui.painter().add(Shape::Rect {
-            rect: header_response.rect.expand(visuals.expansion),
-            corner_radius: visuals.corner_radius,
-            fill: visuals.bg_fill,
-            stroke: visuals.bg_stroke,
-            // stroke: Default::default(),
-        });
+
+        if ui.visuals().collapsing_header_frame {
+            ui.painter().add(Shape::Rect {
+                rect: header_response.rect.expand(visuals.expansion),
+                corner_radius: visuals.corner_radius,
+                fill: visuals.bg_fill,
+                stroke: visuals.bg_stroke,
+                // stroke: Default::default(),
+            });
+        }
 
         {
             let (mut icon_rect, _) = ui.spacing().icon_rectangles(header_response.rect);

egui/src/containers/combo_box.rs

@@ -176,8 +176,8 @@ fn combo_box(
 ) -> Response {
     let popup_id = button_id.with("popup");
 
-    let button_active = ui.memory().is_popup_open(popup_id);
-    let button_response = button_frame(ui, button_id, button_active, Sense::click(), |ui| {
+    let is_popup_open = ui.memory().is_popup_open(popup_id);
+    let button_response = button_frame(ui, button_id, is_popup_open, Sense::click(), |ui| {
         // We don't want to change width when user selects something new
         let full_minimum_width = ui.spacing().slider_width;
         let icon_size = Vec2::splat(ui.spacing().icon_width);
@@ -193,10 +193,14 @@ fn combo_box(
         let (_, rect) = ui.allocate_space(Vec2::new(width, height));
         let button_rect = ui.min_rect().expand2(ui.spacing().button_padding);
         let response = ui.interact(button_rect, button_id, Sense::click());
-        // response.active |= button_active;
+        // response.active |= is_popup_open;
 
         let icon_rect = Align2::RIGHT_CENTER.align_size_within_rect(icon_size, rect);
-        let visuals = ui.style().interact(&response);
+        let visuals = if is_popup_open {
+            &ui.visuals().widgets.open
+        } else {
+            ui.style().interact(&response)
+        };
         paint_icon(ui.painter(), icon_rect.expand(visuals.expansion), visuals);
 
         let text_rect = Align2::LEFT_CENTER.align_size_within_rect(galley.size, rect);
@@ -207,9 +211,8 @@ fn combo_box(
     if button_response.clicked() {
         ui.memory().toggle_popup(popup_id);
     }
-    const MAX_COMBO_HEIGHT: f32 = 128.0;
     crate::popup::popup_below_widget(ui, popup_id, &button_response, |ui| {
-        ScrollArea::from_max_height(MAX_COMBO_HEIGHT).show(ui, menu_contents)
+        ScrollArea::from_max_height(ui.spacing().combo_height).show(ui, menu_contents)
     });
 
     button_response
@@ -218,7 +221,7 @@ fn combo_box(
 fn button_frame(
     ui: &mut Ui,
     id: Id,
-    button_active: bool,
+    is_popup_open: bool,
     sense: Sense,
     add_contents: impl FnOnce(&mut Ui),
 ) -> Response {
@@ -237,9 +240,12 @@ fn button_frame(
     let mut outer_rect = content_ui.min_rect().expand2(margin);
     outer_rect.set_height(outer_rect.height().at_least(interact_size.y));
 
-    let mut response = ui.interact(outer_rect, id, sense);
-    response.is_pointer_button_down_on |= button_active;
-    let visuals = ui.style().interact(&response);
+    let response = ui.interact(outer_rect, id, sense);
+    let visuals = if is_popup_open {
+        &ui.visuals().widgets.open
+    } else {
+        ui.style().interact(&response)
+    };
 
     ui.painter().set(
         where_to_put_background,

egui/src/containers/frame.rs

@@ -24,8 +24,8 @@ impl Frame {
     pub fn group(style: &Style) -> Self {
         Self {
             margin: Vec2::new(8.0, 6.0),
-            corner_radius: 4.0,
-            stroke: style.visuals.window_stroke(),
+            corner_radius: style.visuals.widgets.noninteractive.corner_radius,
+            stroke: style.visuals.widgets.noninteractive.bg_stroke,
             ..Default::default()
         }
     }
@@ -63,8 +63,8 @@ impl Frame {
     pub fn menu(style: &Style) -> Self {
         Self {
             margin: Vec2::splat(1.0),
-            corner_radius: 2.0,
-            shadow: Shadow::small(),
+            corner_radius: style.visuals.widgets.noninteractive.corner_radius,
+            shadow: style.visuals.popup_shadow,
             fill: style.visuals.window_fill(),
             stroke: style.visuals.window_stroke(),
         }
@@ -73,8 +73,8 @@ impl Frame {
     pub fn popup(style: &Style) -> Self {
         Self {
             margin: style.spacing.window_padding,
-            corner_radius: 5.0,
-            shadow: Shadow::small(),
+            corner_radius: style.visuals.widgets.noninteractive.corner_radius,
+            shadow: style.visuals.popup_shadow,
             fill: style.visuals.window_fill(),
             stroke: style.visuals.window_stroke(),
         }
@@ -84,7 +84,7 @@ impl Frame {
     pub fn dark_canvas(style: &Style) -> Self {
         Self {
             margin: Vec2::new(10.0, 10.0),
-            corner_radius: 5.0,
+            corner_radius: style.visuals.widgets.noninteractive.corner_radius,
             fill: Color32::from_black_alpha(250),
             stroke: style.visuals.window_stroke(),
             ..Default::default()

egui/src/containers/scroll_area.rs

@@ -357,7 +357,6 @@ impl Prepared {
             let margin = animation_t * ui.spacing().item_spacing.x;
             let left = inner_rect.right() + margin;
             let right = outer_rect.right();
-            let corner_radius = (right - left) / 2.0;
             let top = inner_rect.top();
             let bottom = inner_rect.bottom();
 
@@ -415,7 +414,7 @@ impl Prepared {
                 pos2(left, from_content(state.offset.y)),
                 pos2(right, from_content(state.offset.y + inner_rect.height())),
             );
-            let min_handle_height = (2.0 * corner_radius).max(8.0);
+            let min_handle_height = ui.spacing().scroll_bar_width;
             if handle_rect.size().y < min_handle_height {
                 handle_rect = Rect::from_center_size(
                     handle_rect.center(),
@@ -429,21 +428,17 @@ impl Prepared {
                 &ui.style().visuals.widgets.inactive
             };
 
-            ui.painter().add(epaint::Shape::Rect {
-                rect: outer_scroll_rect,
-                corner_radius,
-                fill: ui.visuals().extreme_bg_color,
-                stroke: Default::default(),
-                // fill: visuals.bg_fill,
-                // stroke: visuals.bg_stroke,
-            });
-
-            ui.painter().add(epaint::Shape::Rect {
-                rect: handle_rect.expand(-2.0),
-                corner_radius,
-                fill: visuals.bg_fill,
-                stroke: visuals.bg_stroke,
-            });
+            ui.painter().add(epaint::Shape::rect_filled(
+                outer_scroll_rect,
+                visuals.corner_radius,
+                ui.visuals().extreme_bg_color,
+            ));
+
+            ui.painter().add(epaint::Shape::rect_filled(
+                handle_rect,
+                visuals.corner_radius,
+                visuals.bg_fill,
+            ));
         }
 
         let size = vec2(
@@ -465,5 +460,5 @@ impl Prepared {
 }
 
 fn max_scroll_bar_width_with_margin(ui: &Ui) -> f32 {
-    ui.spacing().item_spacing.x + 16.0
+    ui.spacing().item_spacing.x + ui.spacing().scroll_bar_width
 }

egui/src/grid.rs

@@ -198,12 +198,7 @@ impl GridLayout {
                 let rect = rect.expand2(0.5 * self.spacing.y * Vec2::Y);
                 let rect = rect.expand2(2.0 * Vec2::X); // HACK: just looks better with some spacing on the sides
 
-                let color = if self.style.visuals.dark_mode {
-                    Rgba::from_white_alpha(0.0075)
-                } else {
-                    Rgba::from_black_alpha(0.075)
-                };
-                painter.rect_filled(rect, 2.0, color);
+                painter.rect_filled(rect, 2.0, self.style.visuals.faint_bg_color);
             }
         }
     }

egui/src/introspection.rs

@@ -132,14 +132,17 @@ impl Widget for &mut epaint::TessellationOptions {
                 debug_paint_text_rects,
                 debug_ignore_clip_rects,
             } = self;
-            ui.checkbox(anti_alias, "Antialias");
-            ui.checkbox(
-                coarse_tessellation_culling,
-                "Do coarse culling in the tessellator",
-            );
-            ui.checkbox(debug_ignore_clip_rects, "Ignore clip rectangles (debug)");
-            ui.checkbox(debug_paint_clip_rects, "Paint clip rectangles (debug)");
-            ui.checkbox(debug_paint_text_rects, "Paint text bounds (debug)");
+            ui.checkbox(anti_alias, "Antialias")
+                .on_hover_text("Turn off for small performance gain.");
+            ui.collapsing("debug", |ui| {
+                ui.checkbox(
+                    coarse_tessellation_culling,
+                    "Do coarse culling in the tessellator)",
+                );
+                ui.checkbox(debug_ignore_clip_rects, "Ignore clip rectangles");
+                ui.checkbox(debug_paint_clip_rects, "Paint clip rectangles");
+                ui.checkbox(debug_paint_text_rects, "Paint text bounds");
+            });
         })
         .response
     }

egui/src/menu.rs

@@ -75,7 +75,8 @@ fn menu_impl<'c>(ui: &mut Ui, title: impl ToString, add_contents: Box<dyn FnOnce
     let mut button = Button::new(title);
 
     if bar_state.open_menu == Some(menu_id) {
-        button = button.fill(Some(ui.visuals().selection.bg_fill));
+        button = button.fill(ui.visuals().widgets.open.bg_fill);
+        button = button.stroke(ui.visuals().widgets.open.bg_stroke);
     }
 
     let button_response = ui.add(button);