Adjusting focus rings

Refs #203

CHANGELOG.md

@@ -84,6 +84,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - If the root widget of a window is a `Resize` with an exact width and height,
   the window will have its resizable attribute disabled. This will not update
   the resizable `Dynamic<bool>` on `Window`.
+- Transparent buttons' focus rings are now drawn using the same corner radius as
+  the button and have padding between the label and the focus ring.
 
 ### Fixed
 
@@ -269,6 +271,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   @danbulant for helping with this change!
 - `ScrollBar` is a new widget that renders a scroll bar meant to scroll through
   a large container.
+- `OutlineWidth` is a new component that is used to control the width of most
+  outlines drawn in the user interface.
+- `FocusColor` is a new component that controls the color of the keyboard focus
+  indicator.
 
 
 [139]: https://github.com/khonsulabs/cushy/issues/139

examples/theme.rs

@@ -96,7 +96,8 @@ fn theme_editor(cushy: Cushy) -> impl MakeWidget {
         }))
         .into_rows()
         .pad()
-        .vertical_scroll();
+        .vertical_scroll()
+        .expand();
 
     editors
         .and(fixed_themes(

src/context.rs

@@ -15,7 +15,7 @@ use crate::fonts::{LoadedFont, LoadedFontFace};
 use crate::graphics::{FontState, Graphics};
 use crate::styles::components::{
     CornerRadius, FontFamily, FontStyle, FontWeight, HighlightColor, LayoutOrder, LineHeight,
-    Opacity, TextSize, WidgetBackground,
+    Opacity, OutlineWidth, TextSize, WidgetBackground,
 };
 use crate::styles::{ComponentDefinition, FontFamilyList, Styles, Theme, ThemePair};
 use crate::tree::Tree;
@@ -672,7 +672,8 @@ impl<'context, 'clip, 'gfx, 'pass> GraphicsContext<'context, 'clip, 'gfx, 'pass>
         }
 
         let color = self.get(&HighlightColor);
-        self.stroke_outline::<Lp>(color, StrokeOptions::lp_wide(Lp::points(2)));
+        let width = self.get(&OutlineWidth).into_px(self.gfx.scale()).ceil();
+        self.stroke_outline(color, StrokeOptions::px_wide(width));
     }
 
     /// Applies the current style settings for font family, text size, font

src/styles/components.rs

@@ -174,6 +174,10 @@ define_components! {
         TextColorVariant(Color, "text_color_variant", .surface.on_color_variant)
         /// A [`Color`] to be used as a highlight color.
         HighlightColor(Color,"highlight_color", .primary.color.with_alpha(128))
+        /// A [`Color`] to be used as to indicate keyboard focus.
+        FocusColor(Color,"focus_color", @HighlightColor)
+        /// The width of outlines drawn around widgets.
+        OutlineWidth(Dimension,"outline_width", Dimension::Lp(Lp::points(1)))
         /// The primary color from the current theme.
         PrimaryColor(Color, "primary_color", .primary.color)
         /// The secondary color from the current theme.

src/widgets/button.rs

@@ -1,8 +1,8 @@
 //! A clickable, labeled button
 use std::time::{Duration, Instant};
 
-use figures::units::{Lp, Px, UPx};
-use figures::{IntoSigned, Point, Rect, Round, ScreenScale, Size};
+use figures::units::{Px, UPx};
+use figures::{IntoSigned, Point, Rect, Round, ScreenScale, Size, Zero};
 use kludgine::app::winit::event::{Modifiers, MouseButton};
 use kludgine::app::winit::window::CursorIcon;
 use kludgine::shapes::{Shape, StrokeOptions};
@@ -11,10 +11,11 @@ use kludgine::Color;
 use crate::animation::{AnimationHandle, AnimationTarget, IntoAnimate, LinearInterpolate, Spawn};
 use crate::context::{AsEventContext, EventContext, GraphicsContext, LayoutContext, WidgetContext};
 use crate::styles::components::{
-    AutoFocusableControls, DefaultActiveBackgroundColor, DefaultActiveForegroundColor,
-    DefaultBackgroundColor, DefaultDisabledBackgroundColor, DefaultDisabledForegroundColor,
-    DefaultForegroundColor, DefaultHoveredBackgroundColor, DefaultHoveredForegroundColor, Easing,
-    HighlightColor, IntrinsicPadding, OpaqueWidgetColor, OutlineColor, SurfaceColor, TextColor,
+    AutoFocusableControls, CornerRadius, DefaultActiveBackgroundColor,
+    DefaultActiveForegroundColor, DefaultBackgroundColor, DefaultDisabledBackgroundColor,
+    DefaultDisabledForegroundColor, DefaultForegroundColor, DefaultHoveredBackgroundColor,
+    DefaultHoveredForegroundColor, Easing, HighlightColor, IntrinsicPadding, OpaqueWidgetColor,
+    OutlineColor, OutlineWidth, SurfaceColor, TextColor,
 };
 use crate::styles::{ColorExt, Styles};
 use crate::value::{Destination, Dynamic, IntoValue, Source, Value};
@@ -370,12 +371,16 @@ impl Widget for Button {
         let style = self.current_style(context);
         context.fill(style.background);
 
-        let two_lp_stroke = StrokeOptions::lp_wide(Lp::points(2));
-        context.stroke_outline(style.outline, two_lp_stroke);
+        let outline_options = StrokeOptions::px_wide(
+            context
+                .get(&OutlineWidth)
+                .into_px(context.gfx.scale())
+                .ceil(),
+        );
+        context.stroke_outline(style.outline, outline_options);
 
         if context.focused(true) {
             if current_style == ButtonKind::Transparent {
-                let two_lp_stroke = two_lp_stroke.into_px(context.gfx.scale());
                 let focus_color = context.get(&HighlightColor);
                 // Some states of a transparent button have solid background
                 // colors. most_contrasting from a 0-alpha color is not a
@@ -389,17 +394,27 @@ impl Widget for Button {
                         .most_contrasting(&[focus_color, context.get(&TextColor)])
                 } else {
                     focus_color
-                };
+                }
+                .with_alpha(128);
 
-                let inset = context.get(&IntrinsicPadding).into_px(context.gfx.scale());
+                let inset = (context.get(&IntrinsicPadding).into_px(context.gfx.scale())
+                    - outline_options.line_width)
+                    / 2;
 
-                let focus_ring = Shape::stroked_rect(
-                    Rect::new(Point::squared(inset), context.gfx.region().size - inset * 2),
-                    two_lp_stroke.colored(color),
-                );
+                let options = outline_options.colored(color);
+                let radii = context.get(&CornerRadius);
+                let radii = radii.map(|r| r.into_px(context.gfx.scale()));
+                let ring_rect =
+                    Rect::new(Point::squared(inset), context.gfx.region().size - inset * 2);
+
+                let focus_ring = if radii.is_zero() {
+                    Shape::stroked_rect(ring_rect, options.into_px(context.gfx.scale()))
+                } else {
+                    Shape::stroked_round_rect(ring_rect, radii, options)
+                };
                 context.gfx.draw_shape(&focus_ring);
             } else if context.is_default() {
-                context.stroke_outline(context.get(&OutlineColor), two_lp_stroke);
+                context.stroke_outline(context.get(&OutlineColor), outline_options);
             } else {
                 context.draw_focus_ring();
             }

src/widgets/color.rs

@@ -10,7 +10,9 @@ use kludgine::{Color, DrawableExt, Origin};
 
 use crate::animation::{LinearInterpolate, PercentBetween, ZeroToOne};
 use crate::context::{EventContext, GraphicsContext, LayoutContext};
-use crate::styles::components::{HighlightColor, OutlineColor, SurfaceColor, TextColor};
+use crate::styles::components::{
+    HighlightColor, OutlineColor, OutlineWidth, SurfaceColor, TextColor,
+};
 use crate::styles::{ColorExt, ColorSource, Hsl, Hsla};
 use crate::value::{
     Destination, Dynamic, ForEachCloned, IntoDynamic, IntoReadOnly, IntoValue, MapEach, ReadOnly,
@@ -491,9 +493,13 @@ where
             context.get(&OutlineColor)
         };
 
-        let options = StrokeOptions::lp_wide(Lp::points(1))
-            .colored(outline_color)
-            .into_px(context.gfx.scale());
+        let options = StrokeOptions::px_wide(
+            context
+                .get(&OutlineWidth)
+                .into_px(context.gfx.scale())
+                .ceil(),
+        )
+        .colored(outline_color);
         self.visible_rect = Rect::new(
             Point::squared(options.line_width) + Point::new(loupe_size / 2, Px::ZERO),
             size - Size::squared(options.line_width * 2) - Size::new(loupe_size, Px::ZERO),
@@ -664,9 +670,9 @@ impl Widget for ColorSourcePicker {
             context.get(&OutlineColor)
         };
 
-        let options = StrokeOptions::lp_wide(Lp::points(1))
-            .colored(outline_color)
-            .into_px(context.gfx.scale());
+        let options =
+            StrokeOptions::px_wide(context.get(&OutlineWidth).into_px(context.gfx.scale()))
+                .colored(outline_color);
         self.visible_rect = Rect::new(
             Point::squared(options.line_width) + loupe_size / 2,
             size - Point::squared(options.line_width * 2) - loupe_size,

src/widgets/menu.rs

@@ -5,7 +5,7 @@ use std::sync::Arc;
 use std::time::Duration;
 
 use alot::LotId;
-use figures::units::{Lp, Px, UPx};
+use figures::units::{Px, UPx};
 use figures::{Angle, IntoSigned, Point, Rect, Round, ScreenScale, Size, Zero};
 use kludgine::shapes::{PathBuilder, Shape, StrokeOptions};
 use kludgine::DrawableExt;
@@ -19,7 +19,7 @@ use super::Button;
 use crate::animation::{AnimationHandle, AnimationTarget, Spawn};
 use crate::context::{AsEventContext, EventContext, GraphicsContext, LayoutContext};
 use crate::styles::components::{
-    CornerRadius, Easing, IntrinsicPadding, OpaqueWidgetColor, TextColor,
+    CornerRadius, Easing, IntrinsicPadding, OpaqueWidgetColor, OutlineWidth, TextColor,
 };
 use crate::styles::Styles;
 use crate::value::{Dynamic, IntoValue, Source, Value};
@@ -579,9 +579,13 @@ where
             .line_to(Point::new(full_size.width - self.padding * 2, UPx::ZERO))
             .close()
             .stroke(
-                StrokeOptions::lp_wide(Lp::points(2))
-                    .into_upx(context.gfx.scale())
-                    .colored(context.theme().surface.color),
+                StrokeOptions::upx_wide(
+                    context
+                        .get(&OutlineWidth)
+                        .into_upx(context.gfx.scale())
+                        .ceil(),
+                )
+                .colored(context.theme().surface.color),
             );
         for rendered in &mut self.items {
             match &mut rendered.item {

src/widgets/radio.rs

@@ -1,13 +1,12 @@
 //! A labeled widget with a circular indicator representing a value.
 use std::fmt::Debug;
 
-use figures::units::Lp;
-use figures::{Point, ScreenScale, Size};
+use figures::{Point, Round, ScreenScale, Size};
 use kludgine::shapes::{Shape, StrokeOptions};
 use kludgine::DrawableExt;
 
 use crate::context::{GraphicsContext, LayoutContext};
-use crate::styles::components::{LineHeight, OutlineColor, WidgetAccentColor};
+use crate::styles::components::{LineHeight, OutlineColor, OutlineWidth, WidgetAccentColor};
 use crate::styles::Dimension;
 use crate::value::{Destination, Dynamic, DynamicReader, IntoDynamic, IntoValue, Source, Value};
 use crate::widget::{MakeWidget, MakeWidgetWithTag, Widget, WidgetInstance};
@@ -89,7 +88,12 @@ where
             .min(context.gfx.region().size.height);
         let vertical_center = context.gfx.region().size.height / 2;
 
-        let stroke_options = StrokeOptions::lp_wide(Lp::points(2)).into_px(context.gfx.scale());
+        let stroke_options = StrokeOptions::px_wide(
+            context
+                .get(&OutlineWidth)
+                .into_px(context.gfx.scale())
+                .ceil(),
+        );
         context.redraw_when_changed(&self.state);
         let selected = self.state.map_ref(|state| state == &self.value);
         let color = context.get(&OutlineColor);