From 664251f3f5c7b76f69a97683af1468094bba887f Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Sat, 14 May 2022 01:47:55 +0200 Subject: Draft first-class `Theme` support RFC: https://github.com/iced-rs/rfcs/pull/6 --- examples/clock/src/main.rs | 12 +++-- examples/component/src/main.rs | 4 ++ examples/counter/src/main.rs | 5 +- examples/custom_widget/src/main.rs | 1 + examples/download_progress/src/main.rs | 9 ++-- examples/events/src/main.rs | 10 ++-- examples/game_of_life/src/main.rs | 8 +-- examples/game_of_life/src/style.rs | 69 +------------------------- examples/geometry/src/main.rs | 11 +++-- examples/integration_opengl/src/main.rs | 1 + examples/integration_wgpu/src/main.rs | 1 + examples/pane_grid/src/main.rs | 84 +++++-------------------------- examples/pokedex/src/main.rs | 36 +++----------- examples/pure/component/src/main.rs | 9 +++- examples/pure/game_of_life/src/main.rs | 17 +++++-- examples/pure/game_of_life/src/style.rs | 69 +------------------------- examples/pure/pane_grid/src/main.rs | 81 ++++-------------------------- examples/pure/todos/src/main.rs | 66 +++---------------------- examples/pure/tour/src/main.rs | 37 ++------------ examples/solar_system/src/main.rs | 12 +++-- examples/stopwatch/src/main.rs | 56 +++++++-------------- examples/styling/src/main.rs | 85 +++++--------------------------- examples/system_information/src/main.rs | 3 +- examples/todos/src/main.rs | 64 +++--------------------- examples/tour/src/main.rs | 49 +++++------------- examples/url_handler/src/main.rs | 8 +-- examples/websocket/src/main.rs | 3 +- glow/src/lib.rs | 4 +- glow/src/window/compositor.rs | 19 +++++-- glutin/src/application.rs | 16 ++++-- graphics/src/renderer.rs | 18 ++++--- graphics/src/widget/canvas.rs | 19 ++++--- graphics/src/widget/pure/canvas.rs | 19 ++++--- graphics/src/widget/pure/qr_code.rs | 21 ++++---- graphics/src/widget/qr_code.rs | 12 +++-- lazy/src/component.rs | 13 ++++- lazy/src/pure/component.rs | 5 +- lazy/src/pure/responsive.rs | 10 +++- lazy/src/responsive.rs | 5 +- native/src/element.rs | 24 +++++++-- native/src/lib.rs | 2 + native/src/overlay.rs | 1 + native/src/overlay/element.rs | 8 ++- native/src/overlay/menu.rs | 12 ++++- native/src/program/state.rs | 5 +- native/src/renderer.rs | 3 ++ native/src/renderer/null.rs | 4 +- native/src/user_interface.rs | 7 ++- native/src/widget.rs | 1 + native/src/widget/button.rs | 40 ++++++++++----- native/src/widget/checkbox.rs | 1 + native/src/widget/column.rs | 10 +++- native/src/widget/container.rs | 2 + native/src/widget/image.rs | 1 + native/src/widget/image/viewer.rs | 1 + native/src/widget/pane_grid.rs | 10 +++- native/src/widget/pane_grid/content.rs | 13 ++++- native/src/widget/pane_grid/title_bar.rs | 3 ++ native/src/widget/pick_list.rs | 1 + native/src/widget/progress_bar.rs | 1 + native/src/widget/radio.rs | 1 + native/src/widget/row.rs | 10 +++- native/src/widget/rule.rs | 1 + native/src/widget/scrollable.rs | 2 + native/src/widget/slider.rs | 1 + native/src/widget/space.rs | 1 + native/src/widget/svg.rs | 1 + native/src/widget/text.rs | 1 + native/src/widget/text_input.rs | 1 + native/src/widget/toggler.rs | 1 + native/src/widget/tooltip.rs | 3 ++ pure/src/element.rs | 7 ++- pure/src/helpers.rs | 7 ++- pure/src/lib.rs | 6 ++- pure/src/overlay.rs | 5 +- pure/src/widget.rs | 6 ++- pure/src/widget/button.rs | 32 +++++++++--- pure/src/widget/checkbox.rs | 2 + pure/src/widget/column.rs | 2 + pure/src/widget/container.rs | 2 + pure/src/widget/image.rs | 2 + pure/src/widget/pane_grid.rs | 2 + pure/src/widget/pane_grid/content.rs | 4 ++ pure/src/widget/pane_grid/title_bar.rs | 3 ++ pure/src/widget/pick_list.rs | 1 + pure/src/widget/progress_bar.rs | 2 + pure/src/widget/radio.rs | 2 + pure/src/widget/row.rs | 2 + pure/src/widget/rule.rs | 2 + pure/src/widget/scrollable.rs | 2 + pure/src/widget/slider.rs | 1 + pure/src/widget/space.rs | 2 + pure/src/widget/svg.rs | 2 + pure/src/widget/text.rs | 2 + pure/src/widget/text_input.rs | 1 + pure/src/widget/toggler.rs | 2 + pure/src/widget/tooltip.rs | 3 ++ pure/src/widget/tree.rs | 13 +++-- src/application.rs | 33 +++++++++---- src/element.rs | 4 +- src/lib.rs | 3 ++ src/pure.rs | 4 +- src/pure/application.rs | 25 +++++++--- src/pure/sandbox.rs | 25 ++++++++-- src/pure/widget.rs | 67 ++++++++++++++----------- src/sandbox.rs | 25 ++++++++-- src/widget.rs | 67 ++++++++++++++----------- style/src/button.rs | 46 ++++------------- style/src/lib.rs | 3 ++ style/src/theme.rs | 45 +++++++++++++++++ wgpu/src/lib.rs | 4 +- wgpu/src/window/compositor.rs | 14 ++++-- winit/src/application.rs | 19 +++++-- 113 files changed, 767 insertions(+), 878 deletions(-) create mode 100644 style/src/theme.rs diff --git a/examples/clock/src/main.rs b/examples/clock/src/main.rs index 3b8a1d6a..fa4181a9 100644 --- a/examples/clock/src/main.rs +++ b/examples/clock/src/main.rs @@ -1,7 +1,10 @@ +use iced::canvas::{ + self, Cache, Canvas, Cursor, Geometry, LineCap, Path, Stroke, +}; +use iced::executor; use iced::{ - canvas::{self, Cache, Canvas, Cursor, Geometry, LineCap, Path, Stroke}, - executor, Application, Color, Command, Container, Element, Length, Point, - Rectangle, Settings, Subscription, Vector, + Application, Color, Command, Container, Element, Length, Point, Rectangle, + Settings, Subscription, Theme, Vector, }; pub fn main() -> iced::Result { @@ -22,8 +25,9 @@ enum Message { } impl Application for Clock { - type Executor = executor::Default; type Message = Message; + type Theme = Theme; + type Executor = executor::Default; type Flags = (); fn new(_flags: ()) -> (Self, Command) { diff --git a/examples/component/src/main.rs b/examples/component/src/main.rs index 39335cf1..d863c58f 100644 --- a/examples/component/src/main.rs +++ b/examples/component/src/main.rs @@ -95,6 +95,8 @@ mod numeric_input { for NumericInput<'a, Message> where Renderer: 'a + text::Renderer, + Renderer::Theme: button::StyleSheet, + ::Variant: Default + Copy, { type Event = Event; @@ -172,6 +174,8 @@ mod numeric_input { where Message: 'a, Renderer: text::Renderer + 'a, + Renderer::Theme: button::StyleSheet, + ::Variant: Default + Copy, { fn from(numeric_input: NumericInput<'a, Message>) -> Self { component::view(numeric_input) diff --git a/examples/counter/src/main.rs b/examples/counter/src/main.rs index 931cf5e1..e92f07f2 100644 --- a/examples/counter/src/main.rs +++ b/examples/counter/src/main.rs @@ -1,6 +1,5 @@ -use iced::{ - button, Alignment, Button, Column, Element, Sandbox, Settings, Text, -}; +use iced::button::{self, Button}; +use iced::{Alignment, Column, Element, Sandbox, Settings, Text}; pub fn main() -> iced::Result { Counter::run(Settings::default()) diff --git a/examples/custom_widget/src/main.rs b/examples/custom_widget/src/main.rs index 28edf256..ce5306ba 100644 --- a/examples/custom_widget/src/main.rs +++ b/examples/custom_widget/src/main.rs @@ -46,6 +46,7 @@ mod circle { fn draw( &self, renderer: &mut Renderer, + _theme: &Renderer::Theme, _style: &renderer::Style, layout: Layout<'_>, _cursor_position: Point, diff --git a/examples/download_progress/src/main.rs b/examples/download_progress/src/main.rs index 21804a0a..4a801ba4 100644 --- a/examples/download_progress/src/main.rs +++ b/examples/download_progress/src/main.rs @@ -1,6 +1,8 @@ +use iced::button; +use iced::executor; use iced::{ - button, executor, Alignment, Application, Button, Column, Command, - Container, Element, Length, ProgressBar, Settings, Subscription, Text, + Alignment, Application, Button, Column, Command, Container, Element, + Length, ProgressBar, Settings, Subscription, Text, Theme, }; mod download; @@ -24,8 +26,9 @@ pub enum Message { } impl Application for Example { - type Executor = executor::Default; type Message = Message; + type Theme = Theme; + type Executor = executor::Default; type Flags = (); fn new(_flags: ()) -> (Example, Command) { diff --git a/examples/events/src/main.rs b/examples/events/src/main.rs index 7f024c56..c87fbc72 100644 --- a/examples/events/src/main.rs +++ b/examples/events/src/main.rs @@ -1,6 +1,9 @@ +use iced::alignment; +use iced::button; +use iced::executor; use iced::{ - alignment, button, executor, Alignment, Application, Button, Checkbox, - Column, Command, Container, Element, Length, Settings, Subscription, Text, + Alignment, Application, Button, Checkbox, Column, Command, Container, + Element, Length, Settings, Subscription, Text, Theme, }; use iced_native::{window, Event}; @@ -27,8 +30,9 @@ enum Message { } impl Application for Events { - type Executor = executor::Default; type Message = Message; + type Theme = Theme; + type Executor = executor::Default; type Flags = (); fn new(_flags: ()) -> (Events, Command) { diff --git a/examples/game_of_life/src/main.rs b/examples/game_of_life/src/main.rs index ab8b80e4..3e9c24a0 100644 --- a/examples/game_of_life/src/main.rs +++ b/examples/game_of_life/src/main.rs @@ -8,6 +8,7 @@ use iced::button::{self, Button}; use iced::executor; use iced::pick_list::{self, PickList}; use iced::slider::{self, Slider}; +use iced::theme::{self, Theme}; use iced::time; use iced::window; use iced::{ @@ -55,6 +56,7 @@ enum Message { impl Application for GameOfLife { type Message = Message; + type Theme = Theme; type Executor = executor::Default; type Flags = (); @@ -836,12 +838,12 @@ impl Controls { Text::new(if is_playing { "Pause" } else { "Play" }), ) .on_press(Message::TogglePlayback) - .style(style::Button), + .style(theme::Button::Primary), ) .push( Button::new(&mut self.next_button, Text::new("Next")) .on_press(Message::Next) - .style(style::Button), + .style(theme::Button::Secondary), ); let speed_controls = Row::new() @@ -885,7 +887,7 @@ impl Controls { .push( Button::new(&mut self.clear_button, Text::new("Clear")) .on_press(Message::Clear) - .style(style::Clear), + .style(theme::Button::Destructive), ) .into() } diff --git a/examples/game_of_life/src/style.rs b/examples/game_of_life/src/style.rs index be9a0e96..688635e0 100644 --- a/examples/game_of_life/src/style.rs +++ b/examples/game_of_life/src/style.rs @@ -1,4 +1,4 @@ -use iced::{button, container, pick_list, slider, Background, Color}; +use iced::{container, pick_list, slider, Background, Color}; const ACTIVE: Color = Color::from_rgb( 0x72 as f32 / 255.0, @@ -6,12 +6,6 @@ const ACTIVE: Color = Color::from_rgb( 0xDA as f32 / 255.0, ); -const DESTRUCTIVE: Color = Color::from_rgb( - 0xC0 as f32 / 255.0, - 0x47 as f32 / 255.0, - 0x47 as f32 / 255.0, -); - const HOVERED: Color = Color::from_rgb( 0x67 as f32 / 255.0, 0x7B as f32 / 255.0, @@ -38,67 +32,6 @@ impl container::StyleSheet for Container { } } -pub struct Button; - -impl button::StyleSheet for Button { - fn active(&self) -> button::Style { - button::Style { - background: Some(Background::Color(ACTIVE)), - border_radius: 3.0, - text_color: Color::WHITE, - ..button::Style::default() - } - } - - fn hovered(&self) -> button::Style { - button::Style { - background: Some(Background::Color(HOVERED)), - text_color: Color::WHITE, - ..self.active() - } - } - - fn pressed(&self) -> button::Style { - button::Style { - border_width: 1.0, - border_color: Color::WHITE, - ..self.hovered() - } - } -} - -pub struct Clear; - -impl button::StyleSheet for Clear { - fn active(&self) -> button::Style { - button::Style { - background: Some(Background::Color(DESTRUCTIVE)), - border_radius: 3.0, - text_color: Color::WHITE, - ..button::Style::default() - } - } - - fn hovered(&self) -> button::Style { - button::Style { - background: Some(Background::Color(Color { - a: 0.5, - ..DESTRUCTIVE - })), - text_color: Color::WHITE, - ..self.active() - } - } - - fn pressed(&self) -> button::Style { - button::Style { - border_width: 1.0, - border_color: Color::WHITE, - ..self.hovered() - } - } -} - pub struct Slider; impl slider::StyleSheet for Slider { diff --git a/examples/geometry/src/main.rs b/examples/geometry/src/main.rs index 58dfa3ad..ba4b808e 100644 --- a/examples/geometry/src/main.rs +++ b/examples/geometry/src/main.rs @@ -25,7 +25,7 @@ mod rainbow { } } - impl Widget> for Rainbow + impl Widget> for Rainbow where B: Backend, { @@ -39,7 +39,7 @@ mod rainbow { fn layout( &self, - _renderer: &Renderer, + _renderer: &Renderer, limits: &layout::Limits, ) -> layout::Node { let size = limits.width(Length::Fill).resolve(Size::ZERO); @@ -49,7 +49,8 @@ mod rainbow { fn draw( &self, - renderer: &mut Renderer, + renderer: &mut Renderer, + _theme: &T, _style: &renderer::Style, layout: Layout<'_>, cursor_position: Point, @@ -147,11 +148,11 @@ mod rainbow { } } - impl<'a, Message, B> Into>> for Rainbow + impl<'a, Message, B, T> Into>> for Rainbow where B: Backend, { - fn into(self) -> Element<'a, Message, Renderer> { + fn into(self) -> Element<'a, Message, Renderer> { Element::new(self) } } diff --git a/examples/integration_opengl/src/main.rs b/examples/integration_opengl/src/main.rs index 1007b90f..cd46e9fd 100644 --- a/examples/integration_opengl/src/main.rs +++ b/examples/integration_opengl/src/main.rs @@ -125,6 +125,7 @@ pub fn main() { viewport.scale_factor(), ), &mut renderer, + &iced_glow::Theme::Dark, &mut clipboard, &mut debug, ); diff --git a/examples/integration_wgpu/src/main.rs b/examples/integration_wgpu/src/main.rs index 045ee0d3..76f35eef 100644 --- a/examples/integration_wgpu/src/main.rs +++ b/examples/integration_wgpu/src/main.rs @@ -188,6 +188,7 @@ pub fn main() { viewport.scale_factor(), ), &mut renderer, + &iced_wgpu::Theme::Dark, &mut clipboard, &mut debug, ); diff --git a/examples/pane_grid/src/main.rs b/examples/pane_grid/src/main.rs index 2962ca25..4c955b6a 100644 --- a/examples/pane_grid/src/main.rs +++ b/examples/pane_grid/src/main.rs @@ -4,6 +4,7 @@ use iced::executor; use iced::keyboard; use iced::pane_grid::{self, PaneGrid}; use iced::scrollable::{self, Scrollable}; +use iced::theme::{self, Theme}; use iced::{ Application, Color, Column, Command, Container, Element, Length, Row, Settings, Size, Subscription, Text, @@ -36,6 +37,7 @@ enum Message { impl Application for Example { type Message = Message; + type Theme = Theme; type Executor = executor::Default; type Flags = (); @@ -171,7 +173,7 @@ impl Application for Example { let text = if *is_pinned { "Unpin" } else { "Pin" }; let pin_button = Button::new(pin_button, Text::new(text).size(14)) .on_press(Message::TogglePin(id)) - .style(style::Button::Pin) + .style(theme::Button::Secondary) .padding(3); let title = Row::with_children(vec![ @@ -309,7 +311,7 @@ impl Content { .. } = self; - let button = |state, label, message, style| { + let button = |state, label, message| { Button::new( state, Text::new(label) @@ -320,7 +322,6 @@ impl Content { .width(Length::Fill) .padding(8) .on_press(message) - .style(style) }; let mut controls = Column::new() @@ -330,22 +331,18 @@ impl Content { split_horizontally, "Split horizontally", Message::Split(pane_grid::Axis::Horizontal, pane), - style::Button::Primary, )) .push(button( split_vertically, "Split vertically", Message::Split(pane_grid::Axis::Vertical, pane), - style::Button::Primary, )); if total_panes > 1 && !is_pinned { - controls = controls.push(button( - close, - "Close", - Message::Close(pane), - style::Button::Destructive, - )); + controls = controls.push( + button(close, "Close", Message::Close(pane)) + .style(theme::Button::Destructive), + ); } let content = Scrollable::new(scroll) @@ -379,8 +376,9 @@ impl Controls { ) -> Element { let mut button = Button::new(&mut self.close, Text::new("Close").size(14)) - .style(style::Button::Control) + .style(theme::Button::Destructive) .padding(3); + if total_panes > 1 && !is_pinned { button = button.on_press(Message::Close(pane)); } @@ -389,8 +387,7 @@ impl Controls { } mod style { - use crate::PANE_ID_COLOR_FOCUSED; - use iced::{button, container, Background, Color, Vector}; + use iced::{container, Background, Color}; const SURFACE: Color = Color::from_rgb( 0xF2 as f32 / 255.0, @@ -398,18 +395,6 @@ mod style { 0xF5 as f32 / 255.0, ); - const ACTIVE: Color = Color::from_rgb( - 0x72 as f32 / 255.0, - 0x89 as f32 / 255.0, - 0xDA as f32 / 255.0, - ); - - const HOVERED: Color = Color::from_rgb( - 0x67 as f32 / 255.0, - 0x7B as f32 / 255.0, - 0xC4 as f32 / 255.0, - ); - pub enum TitleBar { Active, Focused, @@ -449,51 +434,4 @@ mod style { } } } - - pub enum Button { - Primary, - Destructive, - Control, - Pin, - } - - impl button::StyleSheet for Button { - fn active(&self) -> button::Style { - let (background, text_color) = match self { - Button::Primary => (Some(ACTIVE), Color::WHITE), - Button::Destructive => { - (None, Color::from_rgb8(0xFF, 0x47, 0x47)) - } - Button::Control => (Some(PANE_ID_COLOR_FOCUSED), Color::WHITE), - Button::Pin => (Some(ACTIVE), Color::WHITE), - }; - - button::Style { - text_color, - background: background.map(Background::Color), - border_radius: 5.0, - shadow_offset: Vector::new(0.0, 0.0), - ..button::Style::default() - } - } - - fn hovered(&self) -> button::Style { - let active = self.active(); - - let background = match self { - Button::Primary => Some(HOVERED), - Button::Destructive => Some(Color { - a: 0.2, - ..active.text_color - }), - Button::Control => Some(PANE_ID_COLOR_FOCUSED), - Button::Pin => Some(HOVERED), - }; - - button::Style { - background: background.map(Background::Color), - ..active - } - } - } } diff --git a/examples/pokedex/src/main.rs b/examples/pokedex/src/main.rs index 85c26987..4b0e913d 100644 --- a/examples/pokedex/src/main.rs +++ b/examples/pokedex/src/main.rs @@ -1,6 +1,9 @@ +use iced::button; +use iced::futures; +use iced::image; use iced::{ - button, futures, image, Alignment, Application, Button, Column, Command, - Container, Element, Length, Row, Settings, Text, + Alignment, Application, Button, Column, Command, Container, Element, + Length, Row, Settings, Text, Theme, }; pub fn main() -> iced::Result { @@ -26,8 +29,9 @@ enum Message { } impl Application for Pokedex { - type Executor = iced::executor::Default; type Message = Message; + type Theme = Theme; + type Executor = iced::executor::Default; type Flags = (); fn new(_flags: ()) -> (Pokedex, Command) { @@ -238,29 +242,5 @@ impl From for Error { } fn button<'a>(state: &'a mut button::State, text: &str) -> Button<'a, Message> { - Button::new(state, Text::new(text)) - .padding(10) - .style(style::Button::Primary) -} - -mod style { - use iced::{button, Background, Color, Vector}; - - pub enum Button { - Primary, - } - - impl button::StyleSheet for Button { - fn active(&self) -> button::Style { - button::Style { - background: Some(Background::Color(match self { - Button::Primary => Color::from_rgb(0.11, 0.42, 0.87), - })), - border_radius: 12.0, - shadow_offset: Vector::new(1.0, 1.0), - text_color: Color::WHITE, - ..button::Style::default() - } - } - } + Button::new(state, Text::new(text)).padding(10) } diff --git a/examples/pure/component/src/main.rs b/examples/pure/component/src/main.rs index b38d6fca..2f98f768 100644 --- a/examples/pure/component/src/main.rs +++ b/examples/pure/component/src/main.rs @@ -47,12 +47,13 @@ impl Sandbox for Component { } mod numeric_input { - use iced::pure::{button, row, text, text_input}; use iced_lazy::pure::{self, Component}; use iced_native::alignment::{self, Alignment}; use iced_native::text; + use iced_native::widget; use iced_native::Length; use iced_pure::Element; + use iced_pure::{button, row, text, text_input}; pub struct NumericInput { value: Option, @@ -88,6 +89,9 @@ mod numeric_input { impl Component for NumericInput where Renderer: text::Renderer + 'static, + Renderer::Theme: widget::button::StyleSheet, + ::Variant: + Default + Copy, { type State = (); type Event = Event; @@ -158,6 +162,9 @@ mod numeric_input { where Message: 'a, Renderer: 'static + text::Renderer, + Renderer::Theme: widget::button::StyleSheet, + ::Variant: + Default + Copy, { fn from(numeric_input: NumericInput) -> Self { pure::component(numeric_input) diff --git a/examples/pure/game_of_life/src/main.rs b/examples/pure/game_of_life/src/main.rs index a3164701..a3e46888 100644 --- a/examples/pure/game_of_life/src/main.rs +++ b/examples/pure/game_of_life/src/main.rs @@ -9,6 +9,7 @@ use iced::pure::{ button, checkbox, column, container, pick_list, row, slider, text, }; use iced::pure::{Application, Element}; +use iced::theme::{self, Theme}; use iced::time; use iced::window; use iced::{Alignment, Color, Command, Length, Settings, Subscription}; @@ -52,6 +53,7 @@ enum Message { impl Application for GameOfLife { type Message = Message; + type Theme = Theme; type Executor = executor::Default; type Flags = (); @@ -168,10 +170,13 @@ fn view_controls<'a>( .spacing(10) .push( button(if is_playing { "Pause" } else { "Play" }) - .on_press(Message::TogglePlayback) - .style(style::Button), + .on_press(Message::TogglePlayback), ) - .push(button("Next").on_press(Message::Next).style(style::Button)); + .push( + button("Next") + .on_press(Message::Next) + .style(theme::Button::Secondary), + ); let speed_controls = row() .width(Length::Fill) @@ -201,7 +206,11 @@ fn view_controls<'a>( .text_size(16) .style(style::PickList), ) - .push(button("Clear").on_press(Message::Clear).style(style::Clear)) + .push( + button("Clear") + .on_press(Message::Clear) + .style(theme::Button::Destructive), + ) .into() } diff --git a/examples/pure/game_of_life/src/style.rs b/examples/pure/game_of_life/src/style.rs index 1a64cf4a..dbd70c26 100644 --- a/examples/pure/game_of_life/src/style.rs +++ b/examples/pure/game_of_life/src/style.rs @@ -1,4 +1,4 @@ -use iced::{button, container, pick_list, slider, Background, Color}; +use iced::{container, pick_list, slider, Color}; const ACTIVE: Color = Color::from_rgb( 0x72 as f32 / 255.0, @@ -6,12 +6,6 @@ const ACTIVE: Color = Color::from_rgb( 0xDA as f32 / 255.0, ); -const DESTRUCTIVE: Color = Color::from_rgb( - 0xC0 as f32 / 255.0, - 0x47 as f32 / 255.0, - 0x47 as f32 / 255.0, -); - const HOVERED: Color = Color::from_rgb( 0x67 as f32 / 255.0, 0x7B as f32 / 255.0, @@ -35,67 +29,6 @@ impl container::StyleSheet for Container { } } -pub struct Button; - -impl button::StyleSheet for Button { - fn active(&self) -> button::Style { - button::Style { - background: Some(Background::Color(ACTIVE)), - border_radius: 3.0, - text_color: Color::WHITE, - ..button::Style::default() - } - } - - fn hovered(&self) -> button::Style { - button::Style { - background: Some(Background::Color(HOVERED)), - text_color: Color::WHITE, - ..self.active() - } - } - - fn pressed(&self) -> button::Style { - button::Style { - border_width: 1.0, - border_color: Color::WHITE, - ..self.hovered() - } - } -} - -pub struct Clear; - -impl button::StyleSheet for Clear { - fn active(&self) -> button::Style { - button::Style { - background: Some(Background::Color(DESTRUCTIVE)), - border_radius: 3.0, - text_color: Color::WHITE, - ..button::Style::default() - } - } - - fn hovered(&self) -> button::Style { - button::Style { - background: Some(Background::Color(Color { - a: 0.5, - ..DESTRUCTIVE - })), - text_color: Color::WHITE, - ..self.active() - } - } - - fn pressed(&self) -> button::Style { - button::Style { - border_width: 1.0, - border_color: Color::WHITE, - ..self.hovered() - } - } -} - pub struct Slider; impl slider::StyleSheet for Slider { diff --git a/examples/pure/pane_grid/src/main.rs b/examples/pure/pane_grid/src/main.rs index 65516956..2825a5c2 100644 --- a/examples/pure/pane_grid/src/main.rs +++ b/examples/pure/pane_grid/src/main.rs @@ -4,6 +4,7 @@ use iced::keyboard; use iced::pure::widget::pane_grid::{self, PaneGrid}; use iced::pure::{button, column, container, row, scrollable, text}; use iced::pure::{Application, Element}; +use iced::theme::{self, Theme}; use iced::{Color, Command, Length, Settings, Size, Subscription}; use iced_lazy::pure::responsive; use iced_native::{event, subscription, Event}; @@ -33,6 +34,7 @@ enum Message { impl Application for Example { type Message = Message; + type Theme = Theme; type Executor = executor::Default; type Flags = (); @@ -161,7 +163,6 @@ impl Application for Example { text(if pane.is_pinned { "Unpin" } else { "Pin" }).size(14), ) .on_press(Message::TogglePin(id)) - .style(style::Button::Pin) .padding(3); let title = row() @@ -259,7 +260,7 @@ fn view_content<'a>( is_pinned: bool, size: Size, ) -> Element<'a, Message> { - let button = |label, message, style| { + let button = |label, message| { button( text(label) .width(Length::Fill) @@ -269,7 +270,6 @@ fn view_content<'a>( .width(Length::Fill) .padding(8) .on_press(message) - .style(style) }; let mut controls = column() @@ -278,20 +278,17 @@ fn view_content<'a>( .push(button( "Split horizontally", Message::Split(pane_grid::Axis::Horizontal, pane), - style::Button::Primary, )) .push(button( "Split vertically", Message::Split(pane_grid::Axis::Vertical, pane), - style::Button::Primary, )); if total_panes > 1 && !is_pinned { - controls = controls.push(button( - "Close", - Message::Close(pane), - style::Button::Destructive, - )); + controls = controls.push( + button("Close", Message::Close(pane)) + .style(theme::Button::Destructive), + ); } let content = column() @@ -315,7 +312,7 @@ fn view_controls<'a>( is_pinned: bool, ) -> Element<'a, Message> { let mut button = button(text("Close").size(14)) - .style(style::Button::Control) + .style(theme::Button::Destructive) .padding(3); if total_panes > 1 && !is_pinned { @@ -326,8 +323,7 @@ fn view_controls<'a>( } mod style { - use crate::PANE_ID_COLOR_FOCUSED; - use iced::{button, container, Background, Color, Vector}; + use iced::{container, Background, Color}; const SURFACE: Color = Color::from_rgb( 0xF2 as f32 / 255.0, @@ -335,18 +331,6 @@ mod style { 0xF5 as f32 / 255.0, ); - const ACTIVE: Color = Color::from_rgb( - 0x72 as f32 / 255.0, - 0x89 as f32 / 255.0, - 0xDA as f32 / 255.0, - ); - - const HOVERED: Color = Color::from_rgb( - 0x67 as f32 / 255.0, - 0x7B as f32 / 255.0, - 0xC4 as f32 / 255.0, - ); - pub enum TitleBar { Active, Focused, @@ -386,51 +370,4 @@ mod style { } } } - - pub enum Button { - Primary, - Destructive, - Control, - Pin, - } - - impl button::StyleSheet for Button { - fn active(&self) -> button::Style { - let (background, text_color) = match self { - Button::Primary => (Some(ACTIVE), Color::WHITE), - Button::Destructive => { - (None, Color::from_rgb8(0xFF, 0x47, 0x47)) - } - Button::Control => (Some(PANE_ID_COLOR_FOCUSED), Color::WHITE), - Button::Pin => (Some(ACTIVE), Color::WHITE), - }; - - button::Style { - text_color, - background: background.map(Background::Color), - border_radius: 5.0, - shadow_offset: Vector::new(0.0, 0.0), - ..button::Style::default() - } - } - - fn hovered(&self) -> button::Style { - let active = self.active(); - - let background = match self { - Button::Primary => Some(HOVERED), - Button::Destructive => Some(Color { - a: 0.2, - ..active.text_color - }), - Button::Control => Some(PANE_ID_COLOR_FOCUSED), - Button::Pin => Some(HOVERED), - }; - - button::Style { - background: background.map(Background::Color), - ..active - } - } - } } diff --git a/examples/pure/todos/src/main.rs b/examples/pure/todos/src/main.rs index 6a6c6300..ea772def 100644 --- a/examples/pure/todos/src/main.rs +++ b/examples/pure/todos/src/main.rs @@ -4,6 +4,7 @@ use iced::pure::{ button, checkbox, column, container, row, scrollable, text, text_input, Application, Element, }; +use iced::theme::{self, Theme}; use iced::window; use iced::{Command, Font, Length, Settings}; use serde::{Deserialize, Serialize}; @@ -44,8 +45,9 @@ enum Message { } impl Application for Todos { - type Executor = iced::executor::Default; type Message = Message; + type Theme = Theme; + type Executor = iced::executor::Default; type Flags = (); fn new(_flags: ()) -> (Todos, Command) { @@ -287,7 +289,7 @@ impl Task { button(edit_icon()) .on_press(TaskMessage::Edit) .padding(10) - .style(style::Button::Icon), + .style(theme::Button::Text), ) .into() } @@ -313,7 +315,7 @@ impl Task { ) .on_press(TaskMessage::Delete) .padding(10) - .style(style::Button::Destructive), + .style(theme::Button::Destructive), ) .into() } @@ -328,9 +330,9 @@ fn view_controls(tasks: &[Task], current_filter: Filter) -> Element { let label = text(label).size(16); let button = button(label).style(if filter == current_filter { - style::Button::FilterSelected + theme::Button::Primary } else { - style::Button::FilterActive + theme::Button::Text }); button.on_press(Message::FilterChanged(filter)).padding(8) @@ -552,57 +554,3 @@ impl SavedState { Ok(()) } } - -mod style { - use iced::{button, Background, Color, Vector}; - - pub enum Button { - FilterActive, - FilterSelected, - Icon, - Destructive, - } - - impl button::StyleSheet for Button { - fn active(&self) -> button::Style { - match self { - Button::FilterActive => button::Style::default(), - Button::FilterSelected => button::Style { - background: Some(Background::Color(Color::from_rgb( - 0.2, 0.2, 0.7, - ))), - border_radius: 10.0, - text_color: Color::WHITE, - ..button::Style::default() - }, - Button::Icon => button::Style { - text_color: Color::from_rgb(0.5, 0.5, 0.5), - ..button::Style::default() - }, - Button::Destructive => button::Style { - background: Some(Background::Color(Color::from_rgb( - 0.8, 0.2, 0.2, - ))), - border_radius: 5.0, - text_color: Color::WHITE, - shadow_offset: Vector::new(1.0, 1.0), - ..button::Style::default() - }, - } - } - - fn hovered(&self) -> button::Style { - let active = self.active(); - - button::Style { - text_color: match self { - Button::Icon => Color::from_rgb(0.2, 0.2, 0.7), - Button::FilterActive => Color::from_rgb(0.2, 0.2, 0.7), - _ => active.text_color, - }, - shadow_offset: active.shadow_offset + Vector::new(0.0, 1.0), - ..active - } - } - } -} diff --git a/examples/pure/tour/src/main.rs b/examples/pure/tour/src/main.rs index a44d99f3..2002ad98 100644 --- a/examples/pure/tour/src/main.rs +++ b/examples/pure/tour/src/main.rs @@ -5,6 +5,7 @@ use iced::pure::{ scrollable, slider, text, text_input, toggler, vertical_space, }; use iced::pure::{Element, Sandbox}; +use iced::theme; use iced::{Color, Length, Settings}; pub fn main() -> iced::Result { @@ -55,7 +56,7 @@ impl Sandbox for Tour { controls = controls.push( button("Back") .on_press(Message::BackPressed) - .style(style::Button::Secondary), + .style(theme::Button::Secondary), ); } @@ -65,7 +66,7 @@ impl Sandbox for Tour { controls = controls.push( button("Next") .on_press(Message::NextPressed) - .style(style::Button::Primary), + .style(theme::Button::Primary), ); } @@ -669,35 +670,3 @@ pub enum Layout { Row, Column, } - -mod style { - use iced::{button, Background, Color, Vector}; - - pub enum Button { - Primary, - Secondary, - } - - impl button::StyleSheet for Button { - fn active(&self) -> button::Style { - button::Style { - background: Some(Background::Color(match self { - Button::Primary => Color::from_rgb(0.11, 0.42, 0.87), - Button::Secondary => Color::from_rgb(0.5, 0.5, 0.5), - })), - border_radius: 12.0, - shadow_offset: Vector::new(1.0, 1.0), - text_color: Color::from_rgb8(0xEE, 0xEE, 0xEE), - ..button::Style::default() - } - } - - fn hovered(&self) -> button::Style { - button::Style { - text_color: Color::WHITE, - shadow_offset: Vector::new(1.0, 2.0), - ..self.active() - } - } - } -} diff --git a/examples/solar_system/src/main.rs b/examples/solar_system/src/main.rs index 12184dd1..308c8c39 100644 --- a/examples/solar_system/src/main.rs +++ b/examples/solar_system/src/main.rs @@ -6,10 +6,13 @@ //! Inspired by the example found in the MDN docs[1]. //! //! [1]: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations#An_animated_solar_system +use iced::canvas::{self, Cursor, Path, Stroke}; +use iced::executor; +use iced::time; +use iced::window; use iced::{ - canvas::{self, Cursor, Path, Stroke}, - executor, time, window, Application, Canvas, Color, Command, Element, - Length, Point, Rectangle, Settings, Size, Subscription, Vector, + Application, Canvas, Color, Command, Element, Length, Point, Rectangle, + Settings, Size, Subscription, Theme, Vector, }; use std::time::Instant; @@ -31,8 +34,9 @@ enum Message { } impl Application for SolarSystem { - type Executor = executor::Default; type Message = Message; + type Theme = Theme; + type Executor = executor::Default; type Flags = (); fn new(_flags: ()) -> (Self, Command) { diff --git a/examples/stopwatch/src/main.rs b/examples/stopwatch/src/main.rs index 377d7a2d..b83b92ec 100644 --- a/examples/stopwatch/src/main.rs +++ b/examples/stopwatch/src/main.rs @@ -1,7 +1,13 @@ +use iced::alignment; +use iced::button; +use iced::executor; +use iced::theme::{self, Theme}; +use iced::time; use iced::{ - alignment, button, executor, time, Alignment, Application, Button, Column, - Command, Container, Element, Length, Row, Settings, Subscription, Text, + Alignment, Application, Button, Column, Command, Container, Element, + Length, Row, Settings, Subscription, Text, }; + use std::time::{Duration, Instant}; pub fn main() -> iced::Result { @@ -28,8 +34,9 @@ enum Message { } impl Application for Stopwatch { - type Executor = executor::Default; type Message = Message; + type Theme = Theme; + type Executor = executor::Default; type Flags = (); fn new(_flags: ()) -> (Stopwatch, Command) { @@ -99,7 +106,7 @@ impl Application for Stopwatch { )) .size(40); - let button = |state, label, style| { + let button = |state, label| { Button::new( state, Text::new(label) @@ -107,21 +114,20 @@ impl Application for Stopwatch { ) .padding(10) .width(Length::Units(80)) - .style(style) }; let toggle_button = { - let (label, color) = match self.state { - State::Idle => ("Start", style::Button::Primary), - State::Ticking { .. } => ("Stop", style::Button::Destructive), + let label = match self.state { + State::Idle => "Start", + State::Ticking { .. } => "Stop", }; - button(&mut self.toggle, label, color).on_press(Message::Toggle) + button(&mut self.toggle, label).on_press(Message::Toggle) }; - let reset_button = - button(&mut self.reset, "Reset", style::Button::Secondary) - .on_press(Message::Reset); + let reset_button = button(&mut self.reset, "Reset") + .style(theme::Button::Destructive) + .on_press(Message::Reset); let controls = Row::new() .spacing(20) @@ -142,29 +148,3 @@ impl Application for Stopwatch { .into() } } - -mod style { - use iced::{button, Background, Color, Vector}; - - pub enum Button { - Primary, - Secondary, - Destructive, - } - - impl button::StyleSheet for Button { - fn active(&self) -> button::Style { - button::Style { - background: Some(Background::Color(match self { - Button::Primary => Color::from_rgb(0.11, 0.42, 0.87), - Button::Secondary => Color::from_rgb(0.5, 0.5, 0.5), - Button::Destructive => Color::from_rgb(0.8, 0.2, 0.2), - })), - border_radius: 12.0, - shadow_offset: Vector::new(1.0, 1.0), - text_color: Color::WHITE, - ..button::Style::default() - } - } - } -} diff --git a/examples/styling/src/main.rs b/examples/styling/src/main.rs index b4ef3e87..e6c4ac37 100644 --- a/examples/styling/src/main.rs +++ b/examples/styling/src/main.rs @@ -1,7 +1,11 @@ +use iced::button; +use iced::scrollable; +use iced::slider; +use iced::text_input; use iced::{ - button, scrollable, slider, text_input, Alignment, Button, Checkbox, - Column, Container, Element, Length, ProgressBar, Radio, Row, Rule, Sandbox, - Scrollable, Settings, Slider, Space, Text, TextInput, Toggler, + Alignment, Button, Checkbox, Column, Container, Element, Length, + ProgressBar, Radio, Row, Rule, Sandbox, Scrollable, Settings, Slider, + Space, Text, TextInput, Toggler, }; pub fn main() -> iced::Result { @@ -81,8 +85,7 @@ impl Sandbox for Styling { let button = Button::new(&mut self.button, Text::new("Submit")) .padding(10) - .on_press(Message::ButtonPressed) - .style(self.theme); + .on_press(Message::ButtonPressed); let slider = Slider::new( &mut self.slider, @@ -156,8 +159,8 @@ impl Sandbox for Styling { mod style { use iced::{ - button, checkbox, container, progress_bar, radio, rule, scrollable, - slider, text_input, toggler, + checkbox, container, progress_bar, radio, rule, scrollable, slider, + text_input, toggler, }; #[derive(Debug, Clone, Copy, PartialEq, Eq)] @@ -203,15 +206,6 @@ mod style { } } - impl<'a> From for Box { - fn from(theme: Theme) -> Self { - match theme { - Theme::Light => light::Button.into(), - Theme::Dark => dark::Button.into(), - } - } - } - impl<'a> From for Box { fn from(theme: Theme) -> Self { match theme { @@ -266,36 +260,10 @@ mod style { } } - mod light { - use iced::{button, Color, Vector}; - - pub struct Button; - - impl button::StyleSheet for Button { - fn active(&self) -> button::Style { - button::Style { - background: Color::from_rgb(0.11, 0.42, 0.87).into(), - border_radius: 12.0, - shadow_offset: Vector::new(1.0, 1.0), - text_color: Color::from_rgb8(0xEE, 0xEE, 0xEE), - ..button::Style::default() - } - } - - fn hovered(&self) -> button::Style { - button::Style { - text_color: Color::WHITE, - shadow_offset: Vector::new(1.0, 2.0), - ..self.active() - } - } - } - } - mod dark { use iced::{ - button, checkbox, container, progress_bar, radio, rule, scrollable, - slider, text_input, toggler, Color, + checkbox, container, progress_bar, radio, rule, scrollable, slider, + text_input, toggler, Color, }; const SURFACE: Color = Color::from_rgb( @@ -396,35 +364,6 @@ mod style { } } - pub struct Button; - - impl button::StyleSheet for Button { - fn active(&self) -> button::Style { - button::Style { - background: ACTIVE.into(), - border_radius: 3.0, - text_color: Color::WHITE, - ..button::Style::default() - } - } - - fn hovered(&self) -> button::Style { - button::Style { - background: HOVERED.into(), - text_color: Color::WHITE, - ..self.active() - } - } - - fn pressed(&self) -> button::Style { - button::Style { - border_width: 1.0, - border_color: Color::WHITE, - ..self.hovered() - } - } - } - pub struct Scrollable; impl scrollable::StyleSheet for Scrollable { diff --git a/examples/system_information/src/main.rs b/examples/system_information/src/main.rs index 560220b8..9e6a2f61 100644 --- a/examples/system_information/src/main.rs +++ b/examples/system_information/src/main.rs @@ -1,6 +1,6 @@ use iced::{ button, executor, system, Application, Button, Column, Command, Container, - Element, Length, Settings, Text, + Element, Length, Settings, Text, Theme, }; use bytesize::ByteSize; @@ -25,6 +25,7 @@ enum Message { impl Application for Example { type Message = Message; + type Theme = Theme; type Executor = executor::Default; type Flags = (); diff --git a/examples/todos/src/main.rs b/examples/todos/src/main.rs index 0b889407..453cddc3 100644 --- a/examples/todos/src/main.rs +++ b/examples/todos/src/main.rs @@ -2,6 +2,7 @@ use iced::alignment::{self, Alignment}; use iced::button::{self, Button}; use iced::scrollable::{self, Scrollable}; use iced::text_input::{self, TextInput}; +use iced::theme::{self, Theme}; use iced::{ Application, Checkbox, Column, Command, Container, Element, Font, Length, Row, Settings, Text, @@ -42,6 +43,7 @@ enum Message { impl Application for Todos { type Executor = iced::executor::Default; + type Theme = Theme; type Message = Message; type Flags = (); @@ -304,7 +306,7 @@ impl Task { Button::new(edit_button, edit_icon()) .on_press(TaskMessage::Edit) .padding(10) - .style(style::Button::Icon), + .style(theme::Button::Text), ) .into() } @@ -335,7 +337,7 @@ impl Task { ) .on_press(TaskMessage::Delete) .padding(10) - .style(style::Button::Destructive), + .style(theme::Button::Destructive), ) .into() } @@ -364,9 +366,9 @@ impl Controls { let label = Text::new(label).size(16); let button = Button::new(state, label).style(if filter == current_filter { - style::Button::FilterSelected + theme::Button::Primary } else { - style::Button::FilterActive + theme::Button::Text }); button.on_press(Message::FilterChanged(filter)).padding(8) @@ -599,57 +601,3 @@ impl SavedState { Ok(()) } } - -mod style { - use iced::{button, Background, Color, Vector}; - - pub enum Button { - FilterActive, - FilterSelected, - Icon, - Destructive, - } - - impl button::StyleSheet for Button { - fn active(&self) -> button::Style { - match self { - Button::FilterActive => button::Style::default(), - Button::FilterSelected => button::Style { - background: Some(Background::Color(Color::from_rgb( - 0.2, 0.2, 0.7, - ))), - border_radius: 10.0, - text_color: Color::WHITE, - ..button::Style::default() - }, - Button::Icon => button::Style { - text_color: Color::from_rgb(0.5, 0.5, 0.5), - ..button::Style::default() - }, - Button::Destructive => button::Style { - background: Some(Background::Color(Color::from_rgb( - 0.8, 0.2, 0.2, - ))), - border_radius: 5.0, - text_color: Color::WHITE, - shadow_offset: Vector::new(1.0, 1.0), - ..button::Style::default() - }, - } - } - - fn hovered(&self) -> button::Style { - let active = self.active(); - - button::Style { - text_color: match self { - Button::Icon => Color::from_rgb(0.2, 0.2, 0.7), - Button::FilterActive => Color::from_rgb(0.2, 0.2, 0.7), - _ => active.text_color, - }, - shadow_offset: active.shadow_offset + Vector::new(0.0, 1.0), - ..active - } - } - } -} diff --git a/examples/tour/src/main.rs b/examples/tour/src/main.rs index 2024d25a..8bdc7f1d 100644 --- a/examples/tour/src/main.rs +++ b/examples/tour/src/main.rs @@ -1,7 +1,13 @@ +use iced::alignment; +use iced::button; +use iced::scrollable; +use iced::slider; +use iced::text_input; +use iced::theme; use iced::{ - alignment, button, scrollable, slider, text_input, Button, Checkbox, Color, - Column, Container, ContentFit, Element, Image, Length, Radio, Row, Sandbox, - Scrollable, Settings, Slider, Space, Text, TextInput, Toggler, + Button, Checkbox, Color, Column, Container, ContentFit, Element, Image, + Length, Radio, Row, Sandbox, Scrollable, Settings, Slider, Space, Text, + TextInput, Toggler, }; pub fn main() -> iced::Result { @@ -64,7 +70,7 @@ impl Sandbox for Tour { controls = controls.push( button(back_button, "Back") .on_press(Message::BackPressed) - .style(style::Button::Secondary), + .style(theme::Button::Secondary), ); } @@ -74,7 +80,7 @@ impl Sandbox for Tour { controls = controls.push( button(next_button, "Next") .on_press(Message::NextPressed) - .style(style::Button::Primary), + .style(theme::Button::Primary), ); } @@ -818,36 +824,3 @@ pub enum Layout { Row, Column, } - -mod style { - use iced::button; - use iced::{Background, Color, Vector}; - - pub enum Button { - Primary, - Secondary, - } - - impl button::StyleSheet for Button { - fn active(&self) -> button::Style { - button::Style { - background: Some(Background::Color(match self { - Button::Primary => Color::from_rgb(0.11, 0.42, 0.87), - Button::Secondary => Color::from_rgb(0.5, 0.5, 0.5), - })), - border_radius: 12.0, - shadow_offset: Vector::new(1.0, 1.0), - text_color: Color::from_rgb8(0xEE, 0xEE, 0xEE), - ..button::Style::default() - } - } - - fn hovered(&self) -> button::Style { - button::Style { - text_color: Color::WHITE, - shadow_offset: Vector::new(1.0, 2.0), - ..self.active() - } - } - } -} diff --git a/examples/url_handler/src/main.rs b/examples/url_handler/src/main.rs index ee2d249a..b544c30d 100644 --- a/examples/url_handler/src/main.rs +++ b/examples/url_handler/src/main.rs @@ -1,6 +1,7 @@ +use iced::executor; use iced::{ - executor, Application, Command, Container, Element, Length, Settings, - Subscription, Text, + Application, Command, Container, Element, Length, Settings, Subscription, + Text, Theme, }; use iced_native::{ event::{MacOS, PlatformSpecific}, @@ -22,8 +23,9 @@ enum Message { } impl Application for App { - type Executor = executor::Default; type Message = Message; + type Theme = Theme; + type Executor = executor::Default; type Flags = (); fn new(_flags: ()) -> (App, Command) { diff --git a/examples/websocket/src/main.rs b/examples/websocket/src/main.rs index c03a9f3a..65120710 100644 --- a/examples/websocket/src/main.rs +++ b/examples/websocket/src/main.rs @@ -7,7 +7,7 @@ use iced::scrollable::{self, Scrollable}; use iced::text_input::{self, TextInput}; use iced::{ Application, Color, Column, Command, Container, Element, Length, Row, - Settings, Subscription, Text, + Settings, Subscription, Text, Theme, }; pub fn main() -> iced::Result { @@ -34,6 +34,7 @@ enum Message { impl Application for WebSocket { type Message = Message; + type Theme = Theme; type Flags = (); type Executor = executor::Default; diff --git a/glow/src/lib.rs b/glow/src/lib.rs index d7c0854d..043c5b13 100644 --- a/glow/src/lib.rs +++ b/glow/src/lib.rs @@ -30,6 +30,7 @@ pub use settings::Settings; pub(crate) use iced_graphics::Transformation; pub use iced_graphics::{Error, Viewport}; +pub use iced_native::Theme; pub use iced_native::alignment; pub use iced_native::{Alignment, Background, Color, Command, Length, Vector}; @@ -38,4 +39,5 @@ pub use iced_native::{Alignment, Background, Color, Command, Length, Vector}; /// /// [`glow`]: https://github.com/grovesNL/glow /// [`iced`]: https://github.com/iced-rs/iced -pub type Renderer = iced_graphics::Renderer; +pub type Renderer = + iced_graphics::Renderer; diff --git a/glow/src/window/compositor.rs b/glow/src/window/compositor.rs index 622d7fc0..f6afaa68 100644 --- a/glow/src/window/compositor.rs +++ b/glow/src/window/compositor.rs @@ -1,18 +1,21 @@ use crate::{Backend, Color, Error, Renderer, Settings, Viewport}; -use core::ffi::c_void; use glow::HasContext; use iced_graphics::{compositor, Antialiasing, Size}; +use core::ffi::c_void; +use std::marker::PhantomData; + /// A window graphics backend for iced powered by `glow`. #[allow(missing_debug_implementations)] -pub struct Compositor { +pub struct Compositor { gl: glow::Context, + theme: PhantomData, } -impl iced_graphics::window::GLCompositor for Compositor { +impl iced_graphics::window::GLCompositor for Compositor { type Settings = Settings; - type Renderer = Renderer; + type Renderer = Renderer; unsafe fn new( settings: Self::Settings, @@ -46,7 +49,13 @@ impl iced_graphics::window::GLCompositor for Compositor { let renderer = Renderer::new(Backend::new(&gl, settings)); - Ok((Self { gl }, renderer)) + Ok(( + Self { + gl, + theme: PhantomData, + }, + renderer, + )) } fn sample_count(settings: &Settings) -> u32 { diff --git a/glutin/src/application.rs b/glutin/src/application.rs index dbc9b580..d93059e5 100644 --- a/glutin/src/application.rs +++ b/glutin/src/application.rs @@ -209,6 +209,8 @@ async fn run_instance( let mut state = application::State::new(&application, context.window()); let mut viewport_version = state.viewport_version(); + let theme = application.theme(); + let mut user_interface = ManuallyDrop::new(application::build_user_interface( &mut application, @@ -288,8 +290,11 @@ async fn run_instance( } debug.draw_started(); - let new_mouse_interaction = - user_interface.draw(&mut renderer, state.cursor_position()); + let new_mouse_interaction = user_interface.draw( + &mut renderer, + &theme, + state.cursor_position(), + ); debug.draw_finished(); if new_mouse_interaction != mouse_interaction { @@ -341,8 +346,11 @@ async fn run_instance( debug.layout_finished(); debug.draw_started(); - let new_mouse_interaction = user_interface - .draw(&mut renderer, state.cursor_position()); + let new_mouse_interaction = user_interface.draw( + &mut renderer, + &theme, + state.cursor_position(), + ); debug.draw_finished(); if new_mouse_interaction != mouse_interaction { diff --git a/graphics/src/renderer.rs b/graphics/src/renderer.rs index cb31ea5f..3c19fbfb 100644 --- a/graphics/src/renderer.rs +++ b/graphics/src/renderer.rs @@ -10,19 +10,23 @@ use iced_native::{Background, Element, Font, Point, Rectangle, Size}; pub use iced_native::renderer::Style; +use std::marker::PhantomData; + /// A backend-agnostic renderer that supports all the built-in widgets. #[derive(Debug)] -pub struct Renderer { +pub struct Renderer { backend: B, primitives: Vec, + theme: PhantomData, } -impl Renderer { +impl Renderer { /// Creates a new [`Renderer`] from the given [`Backend`]. pub fn new(backend: B) -> Self { Self { backend, primitives: Vec::new(), + theme: PhantomData, } } @@ -43,10 +47,12 @@ impl Renderer { } } -impl iced_native::Renderer for Renderer +impl iced_native::Renderer for Renderer where B: Backend, { + type Theme = T; + fn layout<'a, Message>( &mut self, element: &Element<'a, Message, Self>, @@ -114,7 +120,7 @@ where } } -impl text::Renderer for Renderer +impl text::Renderer for Renderer where B: Backend + backend::Text, { @@ -171,7 +177,7 @@ where } } -impl image::Renderer for Renderer +impl image::Renderer for Renderer where B: Backend + backend::Image, { @@ -186,7 +192,7 @@ where } } -impl svg::Renderer for Renderer +impl svg::Renderer for Renderer where B: Backend + backend::Svg, { diff --git a/graphics/src/widget/canvas.rs b/graphics/src/widget/canvas.rs index 23444b2b..0de08b01 100644 --- a/graphics/src/widget/canvas.rs +++ b/graphics/src/widget/canvas.rs @@ -127,7 +127,7 @@ impl> Canvas { } } -impl Widget> for Canvas +impl Widget> for Canvas where P: Program, B: Backend, @@ -142,7 +142,7 @@ where fn layout( &self, - _renderer: &Renderer, + _renderer: &Renderer, limits: &layout::Limits, ) -> layout::Node { let limits = limits.width(self.width).height(self.height); @@ -156,7 +156,7 @@ where event: iced_native::Event, layout: Layout<'_>, cursor_position: Point, - _renderer: &Renderer, + _renderer: &Renderer, _clipboard: &mut dyn Clipboard, shell: &mut Shell<'_, Message>, ) -> event::Status { @@ -193,7 +193,7 @@ where layout: Layout<'_>, cursor_position: Point, _viewport: &Rectangle, - _renderer: &Renderer, + _renderer: &Renderer, ) -> mouse::Interaction { let bounds = layout.bounds(); let cursor = Cursor::from_window_position(cursor_position); @@ -203,7 +203,8 @@ where fn draw( &self, - renderer: &mut Renderer, + renderer: &mut Renderer, + _theme: &T, _style: &renderer::Style, layout: Layout<'_>, cursor_position: Point, @@ -233,14 +234,16 @@ where } } -impl<'a, Message, P, B> From> - for Element<'a, Message, Renderer> +impl<'a, Message, P, B, T> From> + for Element<'a, Message, Renderer> where Message: 'static, P: Program + 'a, B: Backend, { - fn from(canvas: Canvas) -> Element<'a, Message, Renderer> { + fn from( + canvas: Canvas, + ) -> Element<'a, Message, Renderer> { Element::new(canvas) } } diff --git a/graphics/src/widget/pure/canvas.rs b/graphics/src/widget/pure/canvas.rs index 2e3e7ede..d53b20f6 100644 --- a/graphics/src/widget/pure/canvas.rs +++ b/graphics/src/widget/pure/canvas.rs @@ -103,7 +103,7 @@ where } } -impl Widget> for Canvas +impl Widget> for Canvas where P: Program, B: Backend, @@ -126,7 +126,7 @@ where fn layout( &self, - _renderer: &Renderer, + _renderer: &Renderer, limits: &layout::Limits, ) -> layout::Node { let limits = limits.width(self.width).height(self.height); @@ -141,7 +141,7 @@ where event: iced_native::Event, layout: Layout<'_>, cursor_position: Point, - _renderer: &Renderer, + _renderer: &Renderer, _clipboard: &mut dyn Clipboard, shell: &mut Shell<'_, Message>, ) -> event::Status { @@ -181,7 +181,7 @@ where layout: Layout<'_>, cursor_position: Point, _viewport: &Rectangle, - _renderer: &Renderer, + _renderer: &Renderer, ) -> mouse::Interaction { let bounds = layout.bounds(); let cursor = Cursor::from_window_position(cursor_position); @@ -193,7 +193,8 @@ where fn draw( &self, tree: &Tree, - renderer: &mut Renderer, + renderer: &mut Renderer, + _theme: &T, _style: &renderer::Style, layout: Layout<'_>, cursor_position: Point, @@ -224,14 +225,16 @@ where } } -impl<'a, Message, P, B> From> - for Element<'a, Message, Renderer> +impl<'a, Message, P, B, T> From> + for Element<'a, Message, Renderer> where Message: 'a, P: Program + 'a, B: Backend, { - fn from(canvas: Canvas) -> Element<'a, Message, Renderer> { + fn from( + canvas: Canvas, + ) -> Element<'a, Message, Renderer> { Element::new(canvas) } } diff --git a/graphics/src/widget/pure/qr_code.rs b/graphics/src/widget/pure/qr_code.rs index 9d517374..23a8ceb6 100644 --- a/graphics/src/widget/pure/qr_code.rs +++ b/graphics/src/widget/pure/qr_code.rs @@ -9,24 +9,24 @@ use iced_native::{Length, Point, Rectangle}; use iced_pure::widget::tree::Tree; use iced_pure::{Element, Widget}; -impl<'a, Message, B> Widget> for QRCode<'a> +impl<'a, Message, B, T> Widget> for QRCode<'a> where B: Backend, { fn width(&self) -> Length { - >>::width(self) + >>::width(self) } fn height(&self) -> Length { - >>::height(self) + >>::height(self) } fn layout( &self, - renderer: &Renderer, + renderer: &Renderer, limits: &layout::Limits, ) -> layout::Node { - >>::layout( + >>::layout( self, renderer, limits, ) } @@ -34,15 +34,17 @@ where fn draw( &self, _tree: &Tree, - renderer: &mut Renderer, + renderer: &mut Renderer, + theme: &T, style: &renderer::Style, layout: Layout<'_>, cursor_position: Point, viewport: &Rectangle, ) { - >>::draw( + >>::draw( self, renderer, + theme, style, layout, cursor_position, @@ -51,11 +53,12 @@ where } } -impl<'a, Message, B> Into>> for QRCode<'a> +impl<'a, Message, B, T> Into>> + for QRCode<'a> where B: Backend, { - fn into(self) -> Element<'a, Message, Renderer> { + fn into(self) -> Element<'a, Message, Renderer> { Element::new(self) } } diff --git a/graphics/src/widget/qr_code.rs b/graphics/src/widget/qr_code.rs index 907794b7..1eb862ba 100644 --- a/graphics/src/widget/qr_code.rs +++ b/graphics/src/widget/qr_code.rs @@ -47,7 +47,7 @@ impl<'a> QRCode<'a> { } } -impl<'a, Message, B> Widget> for QRCode<'a> +impl<'a, Message, B, T> Widget> for QRCode<'a> where B: Backend, { @@ -61,7 +61,7 @@ where fn layout( &self, - _renderer: &Renderer, + _renderer: &Renderer, _limits: &layout::Limits, ) -> layout::Node { let side_length = (self.state.width + 2 * QUIET_ZONE) as f32 @@ -75,7 +75,8 @@ where fn draw( &self, - renderer: &mut Renderer, + renderer: &mut Renderer, + _theme: &T, _style: &renderer::Style, layout: Layout<'_>, _cursor_position: Point, @@ -127,11 +128,12 @@ where } } -impl<'a, Message, B> Into>> for QRCode<'a> +impl<'a, Message, B, T> Into>> + for QRCode<'a> where B: Backend, { - fn into(self) -> Element<'a, Message, Renderer> { + fn into(self) -> Element<'a, Message, Renderer> { Element::new(self) } } diff --git a/lazy/src/component.rs b/lazy/src/component.rs index 9e5937e9..3f22bc7d 100644 --- a/lazy/src/component.rs +++ b/lazy/src/component.rs @@ -206,13 +206,21 @@ where fn draw( &self, renderer: &mut Renderer, + theme: &Renderer::Theme, style: &renderer::Style, layout: Layout<'_>, cursor_position: Point, viewport: &Rectangle, ) { self.with_element(|element| { - element.draw(renderer, style, layout, cursor_position, viewport); + element.draw( + renderer, + theme, + style, + layout, + cursor_position, + viewport, + ); }); } @@ -337,12 +345,13 @@ where fn draw( &self, renderer: &mut Renderer, + theme: &Renderer::Theme, style: &renderer::Style, layout: Layout<'_>, cursor_position: Point, ) { self.with_overlay_maybe(|overlay| { - overlay.draw(renderer, style, layout, cursor_position); + overlay.draw(renderer, theme, style, layout, cursor_position); }); } diff --git a/lazy/src/pure/component.rs b/lazy/src/pure/component.rs index 2971d2b7..b19913ae 100644 --- a/lazy/src/pure/component.rs +++ b/lazy/src/pure/component.rs @@ -233,6 +233,7 @@ where &self, tree: &Tree, renderer: &mut Renderer, + theme: &Renderer::Theme, style: &renderer::Style, layout: Layout<'_>, cursor_position: Point, @@ -242,6 +243,7 @@ where element.as_widget().draw( &tree.children[0], renderer, + theme, style, layout, cursor_position, @@ -376,12 +378,13 @@ where fn draw( &self, renderer: &mut Renderer, + theme: &Renderer::Theme, style: &renderer::Style, layout: Layout<'_>, cursor_position: Point, ) { self.with_overlay_maybe(|overlay| { - overlay.draw(renderer, style, layout, cursor_position); + overlay.draw(renderer, theme, style, layout, cursor_position); }); } diff --git a/lazy/src/pure/responsive.rs b/lazy/src/pure/responsive.rs index e464d156..96b89fd6 100644 --- a/lazy/src/pure/responsive.rs +++ b/lazy/src/pure/responsive.rs @@ -53,7 +53,10 @@ struct Content<'a, Message, Renderer> { element: Element<'a, Message, Renderer>, } -impl<'a, Message, Renderer> Content<'a, Message, Renderer> { +impl<'a, Message, Renderer> Content<'a, Message, Renderer> +where + Renderer: iced_native::Renderer, +{ fn update( &mut self, tree: &mut Tree, @@ -174,6 +177,7 @@ where &self, tree: &Tree, renderer: &mut Renderer, + theme: &Renderer::Theme, style: &renderer::Style, layout: Layout<'_>, cursor_position: Point, @@ -191,6 +195,7 @@ where element.as_widget().draw( tree, renderer, + theme, style, layout, cursor_position, @@ -331,12 +336,13 @@ where fn draw( &self, renderer: &mut Renderer, + theme: &Renderer::Theme, style: &renderer::Style, layout: Layout<'_>, cursor_position: Point, ) { self.with_overlay_maybe(|overlay| { - overlay.draw(renderer, style, layout, cursor_position); + overlay.draw(renderer, theme, style, layout, cursor_position); }); } diff --git a/lazy/src/responsive.rs b/lazy/src/responsive.rs index 20a80dac..86c8db6b 100644 --- a/lazy/src/responsive.rs +++ b/lazy/src/responsive.rs @@ -119,6 +119,7 @@ where fn draw( &self, renderer: &mut Renderer, + theme: &Renderer::Theme, style: &renderer::Style, layout: Layout<'_>, cursor_position: Point, @@ -129,6 +130,7 @@ where internal.resolve(renderer, |state, renderer, content| { content.draw( renderer, + theme, style, state.layout(layout), cursor_position, @@ -356,12 +358,13 @@ where fn draw( &self, renderer: &mut Renderer, + theme: &Renderer::Theme, style: &renderer::Style, layout: Layout<'_>, cursor_position: Point, ) { self.with_overlay_maybe(|overlay| { - overlay.draw(renderer, style, layout, cursor_position); + overlay.draw(renderer, theme, style, layout, cursor_position); }); } diff --git a/native/src/element.rs b/native/src/element.rs index 119b7892..425bddc2 100644 --- a/native/src/element.rs +++ b/native/src/element.rs @@ -244,13 +244,20 @@ where pub fn draw( &self, renderer: &mut Renderer, + theme: &Renderer::Theme, style: &renderer::Style, layout: Layout<'_>, cursor_position: Point, viewport: &Rectangle, ) { - self.widget - .draw(renderer, style, layout, cursor_position, viewport) + self.widget.draw( + renderer, + theme, + style, + layout, + cursor_position, + viewport, + ) } /// Returns the current [`mouse::Interaction`] of the [`Element`]. @@ -350,13 +357,20 @@ where fn draw( &self, renderer: &mut Renderer, + theme: &Renderer::Theme, style: &renderer::Style, layout: Layout<'_>, cursor_position: Point, viewport: &Rectangle, ) { - self.widget - .draw(renderer, style, layout, cursor_position, viewport) + self.widget.draw( + renderer, + theme, + style, + layout, + cursor_position, + viewport, + ) } fn mouse_interaction( @@ -444,6 +458,7 @@ where fn draw( &self, renderer: &mut Renderer, + theme: &Renderer::Theme, style: &renderer::Style, layout: Layout<'_>, cursor_position: Point, @@ -471,6 +486,7 @@ where self.element.widget.draw( renderer, + theme, style, layout, cursor_position, diff --git a/native/src/lib.rs b/native/src/lib.rs index db60976f..948fdff0 100644 --- a/native/src/lib.rs +++ b/native/src/lib.rs @@ -76,6 +76,7 @@ pub use iced_core::{ Rectangle, Size, Vector, }; pub use iced_futures::{executor, futures}; +pub use iced_style::theme; #[doc(no_inline)] pub use executor::Executor; @@ -93,5 +94,6 @@ pub use renderer::Renderer; pub use runtime::Runtime; pub use shell::Shell; pub use subscription::Subscription; +pub use theme::Theme; pub use user_interface::UserInterface; pub use widget::Widget; diff --git a/native/src/overlay.rs b/native/src/overlay.rs index 86878f6a..792d2905 100644 --- a/native/src/overlay.rs +++ b/native/src/overlay.rs @@ -34,6 +34,7 @@ where fn draw( &self, renderer: &mut Renderer, + theme: &Renderer::Theme, style: &renderer::Style, layout: Layout<'_>, cursor_position: Point, diff --git a/native/src/overlay/element.rs b/native/src/overlay/element.rs index 24c0fe01..de2e1f37 100644 --- a/native/src/overlay/element.rs +++ b/native/src/overlay/element.rs @@ -94,11 +94,13 @@ where pub fn draw( &self, renderer: &mut Renderer, + theme: &Renderer::Theme, style: &renderer::Style, layout: Layout<'_>, cursor_position: Point, ) { - self.overlay.draw(renderer, style, layout, cursor_position) + self.overlay + .draw(renderer, theme, style, layout, cursor_position) } } @@ -173,10 +175,12 @@ where fn draw( &self, renderer: &mut Renderer, + theme: &Renderer::Theme, style: &renderer::Style, layout: Layout<'_>, cursor_position: Point, ) { - self.content.draw(renderer, style, layout, cursor_position) + self.content + .draw(renderer, theme, style, layout, cursor_position) } } diff --git a/native/src/overlay/menu.rs b/native/src/overlay/menu.rs index 13fa7beb..78d65d13 100644 --- a/native/src/overlay/menu.rs +++ b/native/src/overlay/menu.rs @@ -241,6 +241,7 @@ where fn draw( &self, renderer: &mut Renderer, + theme: &Renderer::Theme, style: &renderer::Style, layout: Layout<'_>, cursor_position: Point, @@ -257,8 +258,14 @@ where self.style.background, ); - self.container - .draw(renderer, style, layout, cursor_position, &bounds); + self.container.draw( + renderer, + theme, + style, + layout, + cursor_position, + &bounds, + ); } } @@ -389,6 +396,7 @@ where fn draw( &self, renderer: &mut Renderer, + _theme: &Renderer::Theme, _style: &renderer::Style, layout: Layout<'_>, _cursor_position: Point, diff --git a/native/src/program/state.rs b/native/src/program/state.rs index cb87a628..6ab6051b 100644 --- a/native/src/program/state.rs +++ b/native/src/program/state.rs @@ -86,6 +86,7 @@ where bounds: Size, cursor_position: Point, renderer: &mut P::Renderer, + theme: &::Theme, clipboard: &mut dyn Clipboard, debug: &mut Debug, ) -> Option> { @@ -115,7 +116,7 @@ where if messages.is_empty() { debug.draw_started(); self.mouse_interaction = - user_interface.draw(renderer, cursor_position); + user_interface.draw(renderer, theme, cursor_position); debug.draw_finished(); self.cache = Some(user_interface.into_cache()); @@ -147,7 +148,7 @@ where debug.draw_started(); self.mouse_interaction = - user_interface.draw(renderer, cursor_position); + user_interface.draw(renderer, theme, cursor_position); debug.draw_finished(); self.cache = Some(user_interface.into_cache()); diff --git a/native/src/renderer.rs b/native/src/renderer.rs index 73d2f401..a7305a55 100644 --- a/native/src/renderer.rs +++ b/native/src/renderer.rs @@ -9,6 +9,9 @@ use crate::{Background, Color, Element, Rectangle, Vector}; /// A component that can be used by widgets to draw themselves on a screen. pub trait Renderer: Sized { + /// The supported theme of the [`Renderer`]. + type Theme; + /// Lays out the elements of a user interface. /// /// You should override this if you need to perform any operations before or diff --git a/native/src/renderer/null.rs b/native/src/renderer/null.rs index a5b2f277..c591f4e2 100644 --- a/native/src/renderer/null.rs +++ b/native/src/renderer/null.rs @@ -1,6 +1,6 @@ use crate::renderer::{self, Renderer}; use crate::text::{self, Text}; -use crate::{Background, Font, Point, Rectangle, Size, Vector}; +use crate::{Background, Font, Point, Rectangle, Size, Theme, Vector}; /// A renderer that does nothing. /// @@ -16,6 +16,8 @@ impl Null { } impl Renderer for Null { + type Theme = Theme; + fn with_layer(&mut self, _bounds: Rectangle, _f: impl FnOnce(&mut Self)) {} fn with_translation( diff --git a/native/src/user_interface.rs b/native/src/user_interface.rs index f80786aa..12f9827d 100644 --- a/native/src/user_interface.rs +++ b/native/src/user_interface.rs @@ -274,7 +274,7 @@ where /// [completing the last example](#example-1): /// /// ```no_run - /// use iced_native::{clipboard, Size, Point}; + /// use iced_native::{clipboard, Size, Point, Theme}; /// use iced_native::user_interface::{self, UserInterface}; /// use iced_wgpu::Renderer; /// @@ -322,7 +322,7 @@ where /// ); /// /// // Draw the user interface - /// let mouse_cursor = user_interface.draw(&mut renderer, cursor_position); + /// let mouse_cursor = user_interface.draw(&mut renderer, &Theme::default(), cursor_position); /// /// cache = user_interface.into_cache(); /// @@ -337,6 +337,7 @@ where pub fn draw( &mut self, renderer: &mut Renderer, + theme: &Renderer::Theme, cursor_position: Point, ) -> mouse::Interaction { // TODO: Move to shell level (?) @@ -368,6 +369,7 @@ where self.root.widget.draw( renderer, + theme, &renderer::Style::default(), Layout::new(&self.base), base_cursor, @@ -409,6 +411,7 @@ where renderer.with_layer(overlay_bounds, |renderer| { overlay.draw( renderer, + theme, &renderer::Style::default(), Layout::new(layout), cursor_position, diff --git a/native/src/widget.rs b/native/src/widget.rs index 8417dad1..9fe96e33 100644 --- a/native/src/widget.rs +++ b/native/src/widget.rs @@ -125,6 +125,7 @@ where fn draw( &self, renderer: &mut Renderer, + theme: &Renderer::Theme, style: &renderer::Style, layout: Layout<'_>, cursor_position: Point, diff --git a/native/src/widget/button.rs b/native/src/widget/button.rs index b03d9f27..09c59cbe 100644 --- a/native/src/widget/button.rs +++ b/native/src/widget/button.rs @@ -55,20 +55,26 @@ pub use iced_style::button::{Style, StyleSheet}; /// } /// ``` #[allow(missing_debug_implementations)] -pub struct Button<'a, Message, Renderer> { +pub struct Button<'a, Message, Renderer> +where + Renderer: crate::Renderer, + Renderer::Theme: StyleSheet, +{ state: &'a mut State, content: Element<'a, Message, Renderer>, on_press: Option, width: Length, height: Length, padding: Padding, - style_sheet: Box, + variant: ::Variant, } impl<'a, Message, Renderer> Button<'a, Message, Renderer> where Message: Clone, Renderer: crate::Renderer, + Renderer::Theme: StyleSheet, + ::Variant: Default, { /// Creates a new [`Button`] with some local [`State`] and the given /// content. @@ -83,7 +89,7 @@ where width: Length::Shrink, height: Length::Shrink, padding: Padding::new(5), - style_sheet: Default::default(), + variant: ::Variant::default(), } } @@ -112,12 +118,12 @@ where self } - /// Sets the style of the [`Button`]. + /// Sets the style variant of this [`Button`]. pub fn style( mut self, - style_sheet: impl Into>, + variant: ::Variant, ) -> Self { - self.style_sheet = style_sheet.into(); + self.variant = variant; self } } @@ -190,28 +196,29 @@ pub fn update<'a, Message: Clone>( } /// Draws a [`Button`]. -pub fn draw<'a, Renderer: crate::Renderer>( +pub fn draw<'a, Renderer: crate::Renderer, Variant>( renderer: &mut Renderer, bounds: Rectangle, cursor_position: Point, is_enabled: bool, - style_sheet: &dyn StyleSheet, + style_sheet: &dyn StyleSheet, + variation: Variant, state: impl FnOnce() -> &'a State, ) -> Style { let is_mouse_over = bounds.contains(cursor_position); let styling = if !is_enabled { - style_sheet.disabled() + style_sheet.disabled(variation) } else if is_mouse_over { let state = state(); if state.is_pressed { - style_sheet.pressed() + style_sheet.pressed(variation) } else { - style_sheet.hovered() + style_sheet.hovered(variation) } } else { - style_sheet.active() + style_sheet.active(variation) }; if styling.background.is_some() || styling.border_width > 0.0 { @@ -287,6 +294,8 @@ impl<'a, Message, Renderer> Widget where Message: Clone, Renderer: crate::Renderer, + Renderer::Theme: StyleSheet, + ::Variant: Copy, { fn width(&self) -> Length { self.width @@ -354,6 +363,7 @@ where fn draw( &self, renderer: &mut Renderer, + theme: &Renderer::Theme, _style: &renderer::Style, layout: Layout<'_>, cursor_position: Point, @@ -367,12 +377,14 @@ where bounds, cursor_position, self.on_press.is_some(), - self.style_sheet.as_ref(), + theme, + self.variant, || &self.state, ); self.content.draw( renderer, + theme, &renderer::Style { text_color: styling.text_color, }, @@ -397,6 +409,8 @@ impl<'a, Message, Renderer> From> where Message: 'a + Clone, Renderer: 'a + crate::Renderer, + Renderer::Theme: StyleSheet, + ::Variant: Copy, { fn from( button: Button<'a, Message, Renderer>, diff --git a/native/src/widget/checkbox.rs b/native/src/widget/checkbox.rs index b6d920df..290cb114 100644 --- a/native/src/widget/checkbox.rs +++ b/native/src/widget/checkbox.rs @@ -197,6 +197,7 @@ where fn draw( &self, renderer: &mut Renderer, + theme: &Renderer::Theme, style: &renderer::Style, layout: Layout<'_>, cursor_position: Point, diff --git a/native/src/widget/column.rs b/native/src/widget/column.rs index 268218b1..01ddd9f1 100644 --- a/native/src/widget/column.rs +++ b/native/src/widget/column.rs @@ -187,13 +187,21 @@ where fn draw( &self, renderer: &mut Renderer, + theme: &Renderer::Theme, style: &renderer::Style, layout: Layout<'_>, cursor_position: Point, viewport: &Rectangle, ) { for (child, layout) in self.children.iter().zip(layout.children()) { - child.draw(renderer, style, layout, cursor_position, viewport); + child.draw( + renderer, + theme, + style, + layout, + cursor_position, + viewport, + ); } } diff --git a/native/src/widget/container.rs b/native/src/widget/container.rs index 0e7c301e..efcecb1e 100644 --- a/native/src/widget/container.rs +++ b/native/src/widget/container.rs @@ -209,6 +209,7 @@ where fn draw( &self, renderer: &mut Renderer, + theme: &Renderer::Theme, renderer_style: &renderer::Style, layout: Layout<'_>, cursor_position: Point, @@ -220,6 +221,7 @@ where self.content.draw( renderer, + theme, &renderer::Style { text_color: style .text_color diff --git a/native/src/widget/image.rs b/native/src/widget/image.rs index 8e7a28e5..1e753219 100644 --- a/native/src/widget/image.rs +++ b/native/src/widget/image.rs @@ -136,6 +136,7 @@ where fn draw( &self, renderer: &mut Renderer, + theme: &Renderer::Theme, _style: &renderer::Style, layout: Layout<'_>, _cursor_position: Point, diff --git a/native/src/widget/image/viewer.rs b/native/src/widget/image/viewer.rs index 840b88e5..1aa75aa0 100644 --- a/native/src/widget/image/viewer.rs +++ b/native/src/widget/image/viewer.rs @@ -303,6 +303,7 @@ where fn draw( &self, renderer: &mut Renderer, + _theme: &Renderer::Theme, _style: &renderer::Style, layout: Layout<'_>, _cursor_position: Point, diff --git a/native/src/widget/pane_grid.rs b/native/src/widget/pane_grid.rs index 0ceec83e..fb056f79 100644 --- a/native/src/widget/pane_grid.rs +++ b/native/src/widget/pane_grid.rs @@ -754,6 +754,7 @@ where fn draw( &self, renderer: &mut Renderer, + theme: &Renderer::Theme, style: &renderer::Style, layout: Layout<'_>, cursor_position: Point, @@ -772,7 +773,14 @@ where self.style_sheet.as_ref(), self.elements.iter().map(|(pane, content)| (*pane, content)), |pane, renderer, style, layout, cursor_position, rectangle| { - pane.draw(renderer, style, layout, cursor_position, rectangle); + pane.draw( + renderer, + theme, + style, + layout, + cursor_position, + rectangle, + ); }, ) } diff --git a/native/src/widget/pane_grid/content.rs b/native/src/widget/pane_grid/content.rs index 407f5458..6b3ff680 100644 --- a/native/src/widget/pane_grid/content.rs +++ b/native/src/widget/pane_grid/content.rs @@ -59,6 +59,7 @@ where pub fn draw( &self, renderer: &mut Renderer, + theme: &Renderer::Theme, style: &renderer::Style, layout: Layout<'_>, cursor_position: Point, @@ -81,6 +82,7 @@ where title_bar.draw( renderer, + theme, style, title_bar_layout, cursor_position, @@ -90,14 +92,21 @@ where self.body.draw( renderer, + theme, style, body_layout, cursor_position, viewport, ); } else { - self.body - .draw(renderer, style, layout, cursor_position, viewport); + self.body.draw( + renderer, + theme, + style, + layout, + cursor_position, + viewport, + ); } } diff --git a/native/src/widget/pane_grid/title_bar.rs b/native/src/widget/pane_grid/title_bar.rs index a10181af..1392d505 100644 --- a/native/src/widget/pane_grid/title_bar.rs +++ b/native/src/widget/pane_grid/title_bar.rs @@ -86,6 +86,7 @@ where pub fn draw( &self, renderer: &mut Renderer, + theme: &Renderer::Theme, inherited_style: &renderer::Style, layout: Layout<'_>, cursor_position: Point, @@ -108,6 +109,7 @@ where self.content.draw( renderer, + theme, &inherited_style, title_layout, cursor_position, @@ -120,6 +122,7 @@ where if show_controls || self.always_show_controls { controls.draw( renderer, + theme, &inherited_style, controls_layout, cursor_position, diff --git a/native/src/widget/pick_list.rs b/native/src/widget/pick_list.rs index 0374aef7..64a236e7 100644 --- a/native/src/widget/pick_list.rs +++ b/native/src/widget/pick_list.rs @@ -490,6 +490,7 @@ where fn draw( &self, renderer: &mut Renderer, + theme: &Renderer::Theme, _style: &renderer::Style, layout: Layout<'_>, cursor_position: Point, diff --git a/native/src/widget/progress_bar.rs b/native/src/widget/progress_bar.rs index c26c38fa..2963451c 100644 --- a/native/src/widget/progress_bar.rs +++ b/native/src/widget/progress_bar.rs @@ -97,6 +97,7 @@ where fn draw( &self, renderer: &mut Renderer, + theme: &Renderer::Theme, _style: &renderer::Style, layout: Layout<'_>, _cursor_position: Point, diff --git a/native/src/widget/radio.rs b/native/src/widget/radio.rs index 657ae786..5d936eaf 100644 --- a/native/src/widget/radio.rs +++ b/native/src/widget/radio.rs @@ -211,6 +211,7 @@ where fn draw( &self, renderer: &mut Renderer, + theme: &Renderer::Theme, style: &renderer::Style, layout: Layout<'_>, cursor_position: Point, diff --git a/native/src/widget/row.rs b/native/src/widget/row.rs index 7a7c70c6..9cff74c6 100644 --- a/native/src/widget/row.rs +++ b/native/src/widget/row.rs @@ -187,13 +187,21 @@ where fn draw( &self, renderer: &mut Renderer, + theme: &Renderer::Theme, style: &renderer::Style, layout: Layout<'_>, cursor_position: Point, viewport: &Rectangle, ) { for (child, layout) in self.children.iter().zip(layout.children()) { - child.draw(renderer, style, layout, cursor_position, viewport); + child.draw( + renderer, + theme, + style, + layout, + cursor_position, + viewport, + ); } } diff --git a/native/src/widget/rule.rs b/native/src/widget/rule.rs index 69619583..fc3b0202 100644 --- a/native/src/widget/rule.rs +++ b/native/src/widget/rule.rs @@ -70,6 +70,7 @@ where fn draw( &self, renderer: &mut Renderer, + theme: &Renderer::Theme, _style: &renderer::Style, layout: Layout<'_>, _cursor_position: Point, diff --git a/native/src/widget/scrollable.rs b/native/src/widget/scrollable.rs index 8958f6da..5c59b8b2 100644 --- a/native/src/widget/scrollable.rs +++ b/native/src/widget/scrollable.rs @@ -702,6 +702,7 @@ where fn draw( &self, renderer: &mut Renderer, + theme: &Renderer::Theme, style: &renderer::Style, layout: Layout<'_>, cursor_position: Point, @@ -719,6 +720,7 @@ where |renderer, layout, cursor_position, viewport| { self.content.draw( renderer, + theme, style, layout, cursor_position, diff --git a/native/src/widget/slider.rs b/native/src/widget/slider.rs index f2e84ea9..3143aed9 100644 --- a/native/src/widget/slider.rs +++ b/native/src/widget/slider.rs @@ -410,6 +410,7 @@ where fn draw( &self, renderer: &mut Renderer, + theme: &Renderer::Theme, _style: &renderer::Style, layout: Layout<'_>, cursor_position: Point, diff --git a/native/src/widget/space.rs b/native/src/widget/space.rs index 4135d1b8..81338306 100644 --- a/native/src/widget/space.rs +++ b/native/src/widget/space.rs @@ -60,6 +60,7 @@ where fn draw( &self, _renderer: &mut Renderer, + _theme: &Renderer::Theme, _style: &renderer::Style, _layout: Layout<'_>, _cursor_position: Point, diff --git a/native/src/widget/svg.rs b/native/src/widget/svg.rs index 008ab356..76b3eb8b 100644 --- a/native/src/widget/svg.rs +++ b/native/src/widget/svg.rs @@ -110,6 +110,7 @@ where fn draw( &self, renderer: &mut Renderer, + _theme: &Renderer::Theme, _style: &renderer::Style, layout: Layout<'_>, _cursor_position: Point, diff --git a/native/src/widget/text.rs b/native/src/widget/text.rs index a7855c30..5f7e9159 100644 --- a/native/src/widget/text.rs +++ b/native/src/widget/text.rs @@ -130,6 +130,7 @@ where fn draw( &self, renderer: &mut Renderer, + _theme: &Renderer::Theme, style: &renderer::Style, layout: Layout<'_>, _cursor_position: Point, diff --git a/native/src/widget/text_input.rs b/native/src/widget/text_input.rs index 5ecd68e9..8230398c 100644 --- a/native/src/widget/text_input.rs +++ b/native/src/widget/text_input.rs @@ -812,6 +812,7 @@ where fn draw( &self, renderer: &mut Renderer, + _theme: &Renderer::Theme, _style: &renderer::Style, layout: Layout<'_>, cursor_position: Point, diff --git a/native/src/widget/toggler.rs b/native/src/widget/toggler.rs index 6d7592f3..c19b9a32 100644 --- a/native/src/widget/toggler.rs +++ b/native/src/widget/toggler.rs @@ -208,6 +208,7 @@ where fn draw( &self, renderer: &mut Renderer, + _theme: &Renderer::Theme, style: &renderer::Style, layout: Layout<'_>, cursor_position: Point, diff --git a/native/src/widget/tooltip.rs b/native/src/widget/tooltip.rs index c929395f..141aa5c8 100644 --- a/native/src/widget/tooltip.rs +++ b/native/src/widget/tooltip.rs @@ -267,6 +267,7 @@ where fn draw( &self, renderer: &mut Renderer, + theme: &Renderer::Theme, inherited_style: &renderer::Style, layout: Layout<'_>, cursor_position: Point, @@ -274,6 +275,7 @@ where ) { self.content.draw( renderer, + theme, inherited_style, layout, cursor_position, @@ -299,6 +301,7 @@ where Widget::<(), Renderer>::draw( tooltip, renderer, + theme, defaults, layout, cursor_position, diff --git a/pure/src/element.rs b/pure/src/element.rs index 5450db20..35c68716 100644 --- a/pure/src/element.rs +++ b/pure/src/element.rs @@ -25,7 +25,10 @@ pub struct Element<'a, Message, Renderer> { impl<'a, Message, Renderer> Element<'a, Message, Renderer> { /// Creates a new [`Element`] containing the given [`Widget`]. - pub fn new(widget: impl Widget + 'a) -> Self { + pub fn new(widget: impl Widget + 'a) -> Self + where + Renderer: iced_native::Renderer, + { Self { widget: Box::new(widget), } @@ -278,6 +281,7 @@ where &self, tree: &Tree, renderer: &mut Renderer, + theme: &Renderer::Theme, style: &renderer::Style, layout: Layout<'_>, cursor_position: Point, @@ -286,6 +290,7 @@ where self.widget.draw( tree, renderer, + theme, style, layout, cursor_position, diff --git a/pure/src/helpers.rs b/pure/src/helpers.rs index 746b807d..ad6f10b1 100644 --- a/pure/src/helpers.rs +++ b/pure/src/helpers.rs @@ -50,7 +50,12 @@ where /// [`Button`]: widget::Button pub fn button<'a, Message, Renderer>( content: impl Into>, -) -> widget::Button<'a, Message, Renderer> { +) -> widget::Button<'a, Message, Renderer> +where + Renderer: iced_native::Renderer, + Renderer::Theme: widget::button::StyleSheet, + ::Variant: Default, +{ widget::Button::new(content) } diff --git a/pure/src/lib.rs b/pure/src/lib.rs index fa5fd46f..95aa3098 100644 --- a/pure/src/lib.rs +++ b/pure/src/lib.rs @@ -174,7 +174,9 @@ impl State { fn diff( &mut self, new_element: &Element<'_, Message, Renderer>, - ) { + ) where + Renderer: iced_native::Renderer, + { self.state_tree.diff(new_element); } } @@ -224,6 +226,7 @@ where fn draw( &self, renderer: &mut Renderer, + theme: &Renderer::Theme, style: &renderer::Style, layout: Layout<'_>, cursor_position: Point, @@ -232,6 +235,7 @@ where self.element.as_widget().draw( &self.state.state_tree, renderer, + theme, style, layout, cursor_position, diff --git a/pure/src/overlay.rs b/pure/src/overlay.rs index fecaa2ac..b82d8a67 100644 --- a/pure/src/overlay.rs +++ b/pure/src/overlay.rs @@ -14,7 +14,10 @@ pub fn from_children<'a, Message, Renderer>( tree: &'a mut Tree, layout: Layout<'_>, renderer: &Renderer, -) -> Option> { +) -> Option> +where + Renderer: iced_native::Renderer, +{ children .iter() .zip(&mut tree.children) diff --git a/pure/src/widget.rs b/pure/src/widget.rs index cc04cc96..ab63f7cc 100644 --- a/pure/src/widget.rs +++ b/pure/src/widget.rs @@ -53,7 +53,10 @@ use iced_native::{Clipboard, Length, Point, Rectangle, Shell}; /// /// If you want to build your own widgets, you will need to implement this /// trait. -pub trait Widget { +pub trait Widget +where + Renderer: iced_native::Renderer, +{ /// Returns the width of the [`Widget`]. fn width(&self) -> Length; @@ -75,6 +78,7 @@ pub trait Widget { &self, state: &Tree, renderer: &mut Renderer, + theme: &Renderer::Theme, style: &renderer::Style, layout: Layout<'_>, cursor_position: Point, diff --git a/pure/src/widget/button.rs b/pure/src/widget/button.rs index 456c2509..45f4a6aa 100644 --- a/pure/src/widget/button.rs +++ b/pure/src/widget/button.rs @@ -50,25 +50,34 @@ use button::State; /// disabled_button().on_press(Message::ButtonPressed) /// } /// ``` -pub struct Button<'a, Message, Renderer> { +pub struct Button<'a, Message, Renderer> +where + Renderer: iced_native::Renderer, + Renderer::Theme: StyleSheet, +{ content: Element<'a, Message, Renderer>, on_press: Option, - style_sheet: Box, width: Length, height: Length, padding: Padding, + variant: ::Variant, } -impl<'a, Message, Renderer> Button<'a, Message, Renderer> { +impl<'a, Message, Renderer> Button<'a, Message, Renderer> +where + Renderer: iced_native::Renderer, + Renderer::Theme: StyleSheet, + ::Variant: Default, +{ /// Creates a new [`Button`] with the given content. pub fn new(content: impl Into>) -> Self { Button { content: content.into(), on_press: None, - style_sheet: Default::default(), width: Length::Shrink, height: Length::Shrink, padding: Padding::new(5), + variant: ::Variant::default(), } } @@ -98,12 +107,12 @@ impl<'a, Message, Renderer> Button<'a, Message, Renderer> { self } - /// Sets the style of the [`Button`]. + /// Sets the style variant of this [`Button`]. pub fn style( mut self, - style_sheet: impl Into>, + variant: ::Variant, ) -> Self { - self.style_sheet = style_sheet.into(); + self.variant = variant; self } } @@ -113,6 +122,8 @@ impl<'a, Message, Renderer> Widget where Message: 'a + Clone, Renderer: 'a + iced_native::Renderer, + Renderer::Theme: StyleSheet, + ::Variant: Copy, { fn tag(&self) -> tree::Tag { tree::Tag::of::() @@ -191,6 +202,7 @@ where &self, tree: &Tree, renderer: &mut Renderer, + theme: &Renderer::Theme, _style: &renderer::Style, layout: Layout<'_>, cursor_position: Point, @@ -204,13 +216,15 @@ where bounds, cursor_position, self.on_press.is_some(), - self.style_sheet.as_ref(), + theme, + self.variant, || tree.state.downcast_ref::(), ); self.content.as_widget().draw( &tree.children[0], renderer, + theme, &renderer::Style { text_color: styling.text_color, }, @@ -254,6 +268,8 @@ impl<'a, Message, Renderer> Into> where Message: Clone + 'a, Renderer: iced_native::Renderer + 'a, + Renderer::Theme: StyleSheet, + ::Variant: Copy, { fn into(self) -> Element<'a, Message, Renderer> { Element::new(self) diff --git a/pure/src/widget/checkbox.rs b/pure/src/widget/checkbox.rs index 98f55a56..a6a6f8de 100644 --- a/pure/src/widget/checkbox.rs +++ b/pure/src/widget/checkbox.rs @@ -59,6 +59,7 @@ where &self, _tree: &Tree, renderer: &mut Renderer, + theme: &Renderer::Theme, style: &renderer::Style, layout: Layout<'_>, cursor_position: Point, @@ -67,6 +68,7 @@ where >::draw( self, renderer, + theme, style, layout, cursor_position, diff --git a/pure/src/widget/column.rs b/pure/src/widget/column.rs index 7256f474..74d789a1 100644 --- a/pure/src/widget/column.rs +++ b/pure/src/widget/column.rs @@ -194,6 +194,7 @@ where &self, tree: &Tree, renderer: &mut Renderer, + theme: &Renderer::Theme, style: &renderer::Style, layout: Layout<'_>, cursor_position: Point, @@ -208,6 +209,7 @@ where child.as_widget().draw( state, renderer, + theme, style, layout, cursor_position, diff --git a/pure/src/widget/container.rs b/pure/src/widget/container.rs index 91db1f3f..0ec2351a 100644 --- a/pure/src/widget/container.rs +++ b/pure/src/widget/container.rs @@ -201,6 +201,7 @@ where &self, tree: &Tree, renderer: &mut Renderer, + theme: &Renderer::Theme, renderer_style: &renderer::Style, layout: Layout<'_>, cursor_position: Point, @@ -213,6 +214,7 @@ where self.content.as_widget().draw( &tree.children[0], renderer, + theme, &renderer::Style { text_color: style .text_color diff --git a/pure/src/widget/image.rs b/pure/src/widget/image.rs index ef764ec2..c42113dc 100644 --- a/pure/src/widget/image.rs +++ b/pure/src/widget/image.rs @@ -38,6 +38,7 @@ where &self, _tree: &Tree, renderer: &mut Renderer, + theme: &Renderer::Theme, style: &renderer::Style, layout: Layout<'_>, cursor_position: Point, @@ -46,6 +47,7 @@ where >::draw( self, renderer, + theme, style, layout, cursor_position, diff --git a/pure/src/widget/pane_grid.rs b/pure/src/widget/pane_grid.rs index c532a6de..168fe12b 100644 --- a/pure/src/widget/pane_grid.rs +++ b/pure/src/widget/pane_grid.rs @@ -331,6 +331,7 @@ where &self, tree: &Tree, renderer: &mut Renderer, + theme: &Renderer::Theme, style: &renderer::Style, layout: Layout<'_>, cursor_position: Point, @@ -360,6 +361,7 @@ where content.draw( tree, renderer, + theme, style, layout, cursor_position, diff --git a/pure/src/widget/pane_grid/content.rs b/pure/src/widget/pane_grid/content.rs index e66ac40b..5069bd4a 100644 --- a/pure/src/widget/pane_grid/content.rs +++ b/pure/src/widget/pane_grid/content.rs @@ -89,6 +89,7 @@ where &self, tree: &Tree, renderer: &mut Renderer, + theme: &Renderer::Theme, style: &renderer::Style, layout: Layout<'_>, cursor_position: Point, @@ -112,6 +113,7 @@ where title_bar.draw( &tree.children[1], renderer, + theme, style, title_bar_layout, cursor_position, @@ -122,6 +124,7 @@ where self.body.as_widget().draw( &tree.children[0], renderer, + theme, style, body_layout, cursor_position, @@ -131,6 +134,7 @@ where self.body.as_widget().draw( &tree.children[0], renderer, + theme, style, layout, cursor_position, diff --git a/pure/src/widget/pane_grid/title_bar.rs b/pure/src/widget/pane_grid/title_bar.rs index 4a7c8c17..28a3d7fc 100644 --- a/pure/src/widget/pane_grid/title_bar.rs +++ b/pure/src/widget/pane_grid/title_bar.rs @@ -113,6 +113,7 @@ where &self, tree: &Tree, renderer: &mut Renderer, + theme: &Renderer::Theme, inherited_style: &renderer::Style, layout: Layout<'_>, cursor_position: Point, @@ -136,6 +137,7 @@ where self.content.as_widget().draw( &tree.children[0], renderer, + theme, &inherited_style, title_layout, cursor_position, @@ -149,6 +151,7 @@ where controls.as_widget().draw( &tree.children[1], renderer, + theme, &inherited_style, controls_layout, cursor_position, diff --git a/pure/src/widget/pick_list.rs b/pure/src/widget/pick_list.rs index 255e3681..78302a7d 100644 --- a/pure/src/widget/pick_list.rs +++ b/pure/src/widget/pick_list.rs @@ -181,6 +181,7 @@ where &self, _tree: &Tree, renderer: &mut Renderer, + _theme: &Renderer::Theme, _style: &renderer::Style, layout: Layout<'_>, cursor_position: Point, diff --git a/pure/src/widget/progress_bar.rs b/pure/src/widget/progress_bar.rs index 3016a81a..47a299ac 100644 --- a/pure/src/widget/progress_bar.rs +++ b/pure/src/widget/progress_bar.rs @@ -57,6 +57,7 @@ where &self, _tree: &Tree, renderer: &mut Renderer, + theme: &Renderer::Theme, style: &renderer::Style, layout: Layout<'_>, cursor_position: Point, @@ -65,6 +66,7 @@ where >::draw( self, renderer, + theme, style, layout, cursor_position, diff --git a/pure/src/widget/radio.rs b/pure/src/widget/radio.rs index 7c98c937..c92c8dbc 100644 --- a/pure/src/widget/radio.rs +++ b/pure/src/widget/radio.rs @@ -60,6 +60,7 @@ where &self, _tree: &Tree, renderer: &mut Renderer, + theme: &Renderer::Theme, style: &renderer::Style, layout: Layout<'_>, cursor_position: Point, @@ -68,6 +69,7 @@ where >::draw( self, renderer, + theme, style, layout, cursor_position, diff --git a/pure/src/widget/row.rs b/pure/src/widget/row.rs index 0385b8bd..e747adfc 100644 --- a/pure/src/widget/row.rs +++ b/pure/src/widget/row.rs @@ -181,6 +181,7 @@ where &self, tree: &Tree, renderer: &mut Renderer, + theme: &Renderer::Theme, style: &renderer::Style, layout: Layout<'_>, cursor_position: Point, @@ -195,6 +196,7 @@ where child.as_widget().draw( state, renderer, + theme, style, layout, cursor_position, diff --git a/pure/src/widget/rule.rs b/pure/src/widget/rule.rs index ab8537ae..8e6af58e 100644 --- a/pure/src/widget/rule.rs +++ b/pure/src/widget/rule.rs @@ -57,6 +57,7 @@ where &self, _tree: &Tree, renderer: &mut Renderer, + theme: &Renderer::Theme, style: &renderer::Style, layout: Layout<'_>, cursor_position: Point, @@ -65,6 +66,7 @@ where >::draw( self, renderer, + theme, style, layout, cursor_position, diff --git a/pure/src/widget/scrollable.rs b/pure/src/widget/scrollable.rs index 70e951ef..a0180dc0 100644 --- a/pure/src/widget/scrollable.rs +++ b/pure/src/widget/scrollable.rs @@ -171,6 +171,7 @@ where &self, tree: &Tree, renderer: &mut Renderer, + theme: &Renderer::Theme, style: &renderer::Style, layout: Layout<'_>, cursor_position: Point, @@ -189,6 +190,7 @@ where self.content.as_widget().draw( &tree.children[0], renderer, + theme, style, layout, cursor_position, diff --git a/pure/src/widget/slider.rs b/pure/src/widget/slider.rs index 4d8bbce4..2f934a48 100644 --- a/pure/src/widget/slider.rs +++ b/pure/src/widget/slider.rs @@ -195,6 +195,7 @@ where &self, tree: &Tree, renderer: &mut Renderer, + theme: &Renderer::Theme, _style: &renderer::Style, layout: Layout<'_>, cursor_position: Point, diff --git a/pure/src/widget/space.rs b/pure/src/widget/space.rs index b408153b..7d95ebd7 100644 --- a/pure/src/widget/space.rs +++ b/pure/src/widget/space.rs @@ -56,6 +56,7 @@ where &self, _tree: &Tree, renderer: &mut Renderer, + theme: &Renderer::Theme, style: &renderer::Style, layout: Layout<'_>, cursor_position: Point, @@ -64,6 +65,7 @@ where >::draw( self, renderer, + theme, style, layout, cursor_position, diff --git a/pure/src/widget/svg.rs b/pure/src/widget/svg.rs index 14180097..501d9bfa 100644 --- a/pure/src/widget/svg.rs +++ b/pure/src/widget/svg.rs @@ -36,6 +36,7 @@ where &self, _tree: &Tree, renderer: &mut Renderer, + theme: &Renderer::Theme, style: &renderer::Style, layout: Layout<'_>, cursor_position: Point, @@ -44,6 +45,7 @@ where >::draw( self, renderer, + theme, style, layout, cursor_position, diff --git a/pure/src/widget/text.rs b/pure/src/widget/text.rs index 58a939c1..0a51b628 100644 --- a/pure/src/widget/text.rs +++ b/pure/src/widget/text.rs @@ -34,6 +34,7 @@ where &self, _tree: &Tree, renderer: &mut Renderer, + theme: &Renderer::Theme, style: &renderer::Style, layout: Layout<'_>, cursor_position: Point, @@ -42,6 +43,7 @@ where >::draw( self, renderer, + theme, style, layout, cursor_position, diff --git a/pure/src/widget/text_input.rs b/pure/src/widget/text_input.rs index 57ad26d9..7d768513 100644 --- a/pure/src/widget/text_input.rs +++ b/pure/src/widget/text_input.rs @@ -190,6 +190,7 @@ where &self, tree: &Tree, renderer: &mut Renderer, + theme: &Renderer::Theme, _style: &renderer::Style, layout: Layout<'_>, cursor_position: Point, diff --git a/pure/src/widget/toggler.rs b/pure/src/widget/toggler.rs index b9c5ec02..e08b5f47 100644 --- a/pure/src/widget/toggler.rs +++ b/pure/src/widget/toggler.rs @@ -38,6 +38,7 @@ where &self, _state: &Tree, renderer: &mut Renderer, + theme: &Renderer::Theme, style: &renderer::Style, layout: Layout<'_>, cursor_position: Point, @@ -46,6 +47,7 @@ where >::draw( self, renderer, + theme, style, layout, cursor_position, diff --git a/pure/src/widget/tooltip.rs b/pure/src/widget/tooltip.rs index 3887732a..15aa32fe 100644 --- a/pure/src/widget/tooltip.rs +++ b/pure/src/widget/tooltip.rs @@ -157,6 +157,7 @@ where &self, tree: &Tree, renderer: &mut Renderer, + theme: &Renderer::Theme, inherited_style: &renderer::Style, layout: Layout<'_>, cursor_position: Point, @@ -165,6 +166,7 @@ where self.content.as_widget().draw( &tree.children[0], renderer, + theme, inherited_style, layout, cursor_position, @@ -191,6 +193,7 @@ where tooltip, &Tree::empty(), renderer, + theme, defaults, layout, cursor_position, diff --git a/pure/src/widget/tree.rs b/pure/src/widget/tree.rs index 0bb3107a..2f876523 100644 --- a/pure/src/widget/tree.rs +++ b/pure/src/widget/tree.rs @@ -31,7 +31,10 @@ impl Tree { /// Creates a new [`Tree`] for the provided [`Element`]. pub fn new<'a, Message, Renderer>( widget: impl Borrow + 'a>, - ) -> Self { + ) -> Self + where + Renderer: iced_native::Renderer, + { let widget = widget.borrow(); Self { @@ -52,7 +55,9 @@ impl Tree { pub fn diff<'a, Message, Renderer>( &mut self, new: impl Borrow + 'a>, - ) { + ) where + Renderer: iced_native::Renderer, + { if self.tag == new.borrow().tag() { new.borrow().diff(self) } else { @@ -64,7 +69,9 @@ impl Tree { pub fn diff_children<'a, Message, Renderer>( &mut self, new_children: &[impl Borrow + 'a>], - ) { + ) where + Renderer: iced_native::Renderer, + { self.diff_children_custom( new_children, |tree, widget| tree.diff(widget.borrow()), diff --git a/src/application.rs b/src/application.rs index 11735b93..f05d2c4b 100644 --- a/src/application.rs +++ b/src/application.rs @@ -57,7 +57,7 @@ use crate::{Color, Command, Element, Executor, Settings, Subscription}; /// says "Hello, world!": /// /// ```no_run -/// use iced::{executor, Application, Command, Element, Settings, Text}; +/// use iced::{executor, Application, Command, Element, Settings, Text, Theme}; /// /// pub fn main() -> iced::Result { /// Hello::run(Settings::default()) @@ -67,8 +67,9 @@ use crate::{Color, Command, Element, Executor, Settings, Subscription}; /// /// impl Application for Hello { /// type Executor = executor::Default; -/// type Message = (); /// type Flags = (); +/// type Message = (); +/// type Theme = Theme; /// /// fn new(_flags: ()) -> (Hello, Command) { /// (Hello, Command::none()) @@ -99,6 +100,9 @@ pub trait Application: Sized { /// The type of __messages__ your [`Application`] will produce. type Message: std::fmt::Debug + Send; + /// The theme of your [`Application`]. + type Theme: Default; + /// The data needed to initialize your [`Application`]. type Flags; @@ -129,6 +133,16 @@ pub trait Application: Sized { /// Any [`Command`] returned will be executed immediately in the background. fn update(&mut self, message: Self::Message) -> Command; + /// Returns the widgets to display in the [`Application`]. + /// + /// These widgets can produce __messages__ based on user interaction. + fn view(&mut self) -> Element<'_, Self::Message, Self::Theme>; + + /// Returns the current [`Theme`] of the [`Application`]. + fn theme(&self) -> Self::Theme { + Self::Theme::default() + } + /// Returns the event [`Subscription`] for the current state of the /// application. /// @@ -141,11 +155,6 @@ pub trait Application: Sized { Subscription::none() } - /// Returns the widgets to display in the [`Application`]. - /// - /// These widgets can produce __messages__ based on user interaction. - fn view(&mut self) -> Element<'_, Self::Message>; - /// Returns the current [`Application`] mode. /// /// The runtime will automatically transition your application if a new mode @@ -213,7 +222,7 @@ pub trait Application: Sized { Ok(crate::runtime::application::run::< Instance, Self::Executor, - crate::renderer::window::Compositor, + crate::renderer::window::Compositor, >(settings.into(), renderer_settings)?) } } @@ -224,14 +233,14 @@ impl iced_winit::Program for Instance where A: Application, { - type Renderer = crate::renderer::Renderer; + type Renderer = crate::renderer::Renderer; type Message = A::Message; fn update(&mut self, message: Self::Message) -> Command { self.0.update(message) } - fn view(&mut self) -> Element<'_, Self::Message> { + fn view(&mut self) -> Element<'_, Self::Message, A::Theme> { self.0.view() } } @@ -252,6 +261,10 @@ where self.0.title() } + fn theme(&self) -> A::Theme { + self.0.theme() + } + fn mode(&self) -> iced_winit::Mode { match self.0.mode() { window::Mode::Windowed => iced_winit::Mode::Windowed, diff --git a/src/element.rs b/src/element.rs index 8bad18c1..439a4508 100644 --- a/src/element.rs +++ b/src/element.rs @@ -1,5 +1,5 @@ /// A generic widget. /// /// This is an alias of an `iced_native` element with a default `Renderer`. -pub type Element<'a, Message> = - crate::runtime::Element<'a, Message, crate::renderer::Renderer>; +pub type Element<'a, Message, Theme = iced_native::Theme> = + crate::runtime::Element<'a, Message, crate::Renderer>; diff --git a/src/lib.rs b/src/lib.rs index 298beae3..df40ad3e 100644 --- a/src/lib.rs +++ b/src/lib.rs @@ -211,6 +211,8 @@ use iced_wgpu as renderer; #[cfg(feature = "glow")] use iced_glow as renderer; +pub use iced_native::theme; + #[doc(no_inline)] pub use widget::*; @@ -222,6 +224,7 @@ pub use renderer::Renderer; pub use result::Result; pub use sandbox::Sandbox; pub use settings::Settings; +pub use theme::Theme; pub use runtime::alignment; pub use runtime::futures; diff --git a/src/pure.rs b/src/pure.rs index 7785a104..b2b3ade7 100644 --- a/src/pure.rs +++ b/src/pure.rs @@ -108,5 +108,5 @@ pub use iced_pure::Widget; pub use iced_pure::{Pure, State}; /// A generic, pure [`Widget`]. -pub type Element<'a, Message> = - iced_pure::Element<'a, Message, crate::Renderer>; +pub type Element<'a, Message, Theme = crate::Theme> = + iced_pure::Element<'a, Message, crate::Renderer>; diff --git a/src/pure/application.rs b/src/pure/application.rs index 5f400bea..77f68c9e 100644 --- a/src/pure/application.rs +++ b/src/pure/application.rs @@ -21,6 +21,9 @@ pub trait Application: Sized { /// The type of __messages__ your [`Application`] will produce. type Message: std::fmt::Debug + Send; + /// The theme of your [`Application`]. + type Theme: Default; + /// The data needed to initialize your [`Application`]. type Flags; @@ -51,6 +54,16 @@ pub trait Application: Sized { /// Any [`Command`] returned will be executed immediately in the background. fn update(&mut self, message: Self::Message) -> Command; + /// Returns the widgets to display in the [`Application`]. + /// + /// These widgets can produce __messages__ based on user interaction. + fn view(&self) -> pure::Element<'_, Self::Message, Self::Theme>; + + /// Returns the current [`Theme`] of the [`Application`]. + fn theme(&self) -> Self::Theme { + Self::Theme::default() + } + /// Returns the event [`Subscription`] for the current state of the /// application. /// @@ -63,11 +76,6 @@ pub trait Application: Sized { Subscription::none() } - /// Returns the widgets to display in the [`Application`]. - /// - /// These widgets can produce __messages__ based on user interaction. - fn view(&self) -> pure::Element<'_, Self::Message>; - /// Returns the current [`Application`] mode. /// /// The runtime will automatically transition your application if a new mode @@ -137,6 +145,7 @@ where type Executor = A::Executor; type Message = A::Message; type Flags = A::Flags; + type Theme = A::Theme; fn new(flags: Self::Flags) -> (Self, Command) { let (application, command) = A::new(flags); @@ -162,12 +171,16 @@ where A::subscription(&self.application) } - fn view(&mut self) -> crate::Element<'_, Self::Message> { + fn view(&mut self) -> crate::Element<'_, Self::Message, Self::Theme> { let content = A::view(&self.application); Pure::new(&mut self.state, content).into() } + fn theme(&self) -> Self::Theme { + A::theme(&self.application) + } + fn mode(&self) -> window::Mode { A::mode(&self.application) } diff --git a/src/pure/sandbox.rs b/src/pure/sandbox.rs index fbd1d7a8..207a32bd 100644 --- a/src/pure/sandbox.rs +++ b/src/pure/sandbox.rs @@ -1,5 +1,5 @@ use crate::pure; -use crate::{Color, Command, Error, Settings, Subscription}; +use crate::{Color, Command, Error, Settings, Subscription, Theme}; /// A pure version of [`Sandbox`]. /// @@ -34,6 +34,16 @@ pub trait Sandbox { /// These widgets can produce __messages__ based on user interaction. fn view(&self) -> pure::Element<'_, Self::Message>; + /// Returns the current [`Theme`] of the [`Sandbox`]. + /// + /// If you want to use your own custom theme type, you will have to use an + /// [`Application`]. + /// + /// By default, it returns [`Theme::default`]. + fn theme(&self) -> Theme { + Theme::default() + } + /// Returns the background color of the [`Sandbox`]. /// /// By default, it returns [`Color::WHITE`]. @@ -82,6 +92,7 @@ where type Executor = iced_futures::backend::null::Executor; type Flags = (); type Message = T::Message; + type Theme = Theme; fn new(_flags: ()) -> (Self, Command) { (T::new(), Command::none()) @@ -97,14 +108,18 @@ where Command::none() } - fn subscription(&self) -> Subscription { - Subscription::none() - } - fn view(&self) -> pure::Element<'_, T::Message> { T::view(self) } + fn theme(&self) -> Self::Theme { + T::theme(self) + } + + fn subscription(&self) -> Subscription { + Subscription::none() + } + fn background_color(&self) -> Color { T::background_color(self) } diff --git a/src/pure/widget.rs b/src/pure/widget.rs index c84edde3..1c0a32a6 100644 --- a/src/pure/widget.rs +++ b/src/pure/widget.rs @@ -1,23 +1,24 @@ //! Pure versions of the widgets. /// A container that distributes its contents vertically. -pub type Column<'a, Message> = - iced_pure::widget::Column<'a, Message, crate::Renderer>; +pub type Column<'a, Message, Theme = crate::Theme> = + iced_pure::widget::Column<'a, Message, crate::Renderer>; /// A container that distributes its contents horizontally. -pub type Row<'a, Message> = - iced_pure::widget::Row<'a, Message, crate::Renderer>; +pub type Row<'a, Message, Theme = crate::Theme> = + iced_pure::widget::Row<'a, Message, crate::Renderer>; /// A paragraph of text. -pub type Text = iced_pure::widget::Text; +pub type Text = + iced_pure::widget::Text>; pub mod button { //! Allow your users to perform actions by pressing a button. pub use iced_pure::widget::button::{Style, StyleSheet}; /// A widget that produces a message when clicked. - pub type Button<'a, Message> = - iced_pure::widget::Button<'a, Message, crate::Renderer>; + pub type Button<'a, Message, Theme = crate::Theme> = + iced_pure::widget::Button<'a, Message, crate::Renderer>; } pub mod checkbox { @@ -25,8 +26,8 @@ pub mod checkbox { pub use iced_pure::widget::checkbox::{Style, StyleSheet}; /// A box that can be checked. - pub type Checkbox<'a, Message> = - iced_native::widget::Checkbox<'a, Message, crate::Renderer>; + pub type Checkbox<'a, Message, Theme> = + iced_native::widget::Checkbox<'a, Message, crate::Renderer>; } pub mod container { @@ -34,8 +35,8 @@ pub mod container { pub use iced_pure::widget::container::{Style, StyleSheet}; /// An element decorating some content. - pub type Container<'a, Message> = - iced_pure::widget::Container<'a, Message, crate::Renderer>; + pub type Container<'a, Message, Theme = crate::Theme> = + iced_pure::widget::Container<'a, Message, crate::Renderer>; } pub mod pane_grid { @@ -57,16 +58,24 @@ pub mod pane_grid { /// to completely fill the space available. /// /// [![Pane grid - Iced](https://thumbs.gfycat.com/MixedFlatJellyfish-small.gif)](https://gfycat.com/mixedflatjellyfish) - pub type PaneGrid<'a, Message> = - iced_pure::widget::PaneGrid<'a, Message, crate::Renderer>; + pub type PaneGrid<'a, Message, Theme> = + iced_pure::widget::PaneGrid<'a, Message, crate::Renderer>; /// The content of a [`Pane`]. - pub type Content<'a, Message> = - iced_pure::widget::pane_grid::Content<'a, Message, crate::Renderer>; + pub type Content<'a, Message, Theme> = + iced_pure::widget::pane_grid::Content< + 'a, + Message, + crate::Renderer, + >; /// The title bar of a [`Pane`]. - pub type TitleBar<'a, Message> = - iced_pure::widget::pane_grid::TitleBar<'a, Message, crate::Renderer>; + pub type TitleBar<'a, Message, Theme> = + iced_pure::widget::pane_grid::TitleBar< + 'a, + Message, + crate::Renderer, + >; } pub mod pick_list { @@ -75,8 +84,8 @@ pub mod pick_list { pub use iced_pure::widget::pick_list::{Style, StyleSheet}; /// A widget allowing the selection of a single value from a list of options. - pub type PickList<'a, T, Message> = - iced_pure::widget::PickList<'a, T, Message, crate::Renderer>; + pub type PickList<'a, T, Message, Theme> = + iced_pure::widget::PickList<'a, T, Message, crate::Renderer>; } pub mod radio { @@ -84,8 +93,8 @@ pub mod radio { pub use iced_pure::widget::radio::{Style, StyleSheet}; /// A circular button representing a choice. - pub type Radio<'a, Message> = - iced_pure::widget::Radio<'a, Message, crate::Renderer>; + pub type Radio<'a, Message, Theme> = + iced_pure::widget::Radio<'a, Message, crate::Renderer>; } pub mod scrollable { @@ -94,8 +103,8 @@ pub mod scrollable { /// A widget that can vertically display an infinite amount of content /// with a scrollbar. - pub type Scrollable<'a, Message> = - iced_pure::widget::Scrollable<'a, Message, crate::Renderer>; + pub type Scrollable<'a, Message, Theme> = + iced_pure::widget::Scrollable<'a, Message, crate::Renderer>; } pub mod toggler { @@ -103,8 +112,8 @@ pub mod toggler { pub use iced_pure::widget::toggler::{Style, StyleSheet}; /// A toggler widget. - pub type Toggler<'a, Message> = - iced_pure::widget::Toggler<'a, Message, crate::Renderer>; + pub type Toggler<'a, Message, Theme> = + iced_pure::widget::Toggler<'a, Message, crate::Renderer>; } pub mod text_input { @@ -114,8 +123,8 @@ pub mod text_input { pub use iced_pure::widget::text_input::{Style, StyleSheet}; /// A field that can be filled with text. - pub type TextInput<'a, Message> = - iced_pure::widget::TextInput<'a, Message, Renderer>; + pub type TextInput<'a, Message, Theme> = + iced_pure::widget::TextInput<'a, Message, Renderer>; } pub mod tooltip { @@ -123,8 +132,8 @@ pub mod tooltip { pub use iced_pure::widget::tooltip::Position; /// A widget allowing the selection of a single value from a list of options. - pub type Tooltip<'a, Message> = - iced_pure::widget::Tooltip<'a, Message, crate::Renderer>; + pub type Tooltip<'a, Message, Theme> = + iced_pure::widget::Tooltip<'a, Message, crate::Renderer>; } pub use iced_pure::widget::progress_bar; diff --git a/src/sandbox.rs b/src/sandbox.rs index e7e97920..16819569 100644 --- a/src/sandbox.rs +++ b/src/sandbox.rs @@ -1,5 +1,5 @@ use crate::{ - Application, Color, Command, Element, Error, Settings, Subscription, + Application, Color, Command, Element, Error, Settings, Subscription, Theme, }; /// A sandboxed [`Application`]. @@ -111,6 +111,16 @@ pub trait Sandbox { /// These widgets can produce __messages__ based on user interaction. fn view(&mut self) -> Element<'_, Self::Message>; + /// Returns the current [`Theme`] of the [`Sandbox`]. + /// + /// If you want to use your own custom theme type, you will have to use an + /// [`Application`]. + /// + /// By default, it returns [`Theme::default`]. + fn theme(&self) -> Theme { + Theme::default() + } + /// Returns the background color of the [`Sandbox`]. /// /// By default, it returns [`Color::WHITE`]. @@ -159,6 +169,7 @@ where type Executor = iced_futures::backend::null::Executor; type Flags = (); type Message = T::Message; + type Theme = Theme; fn new(_flags: ()) -> (Self, Command) { (T::new(), Command::none()) @@ -174,14 +185,18 @@ where Command::none() } - fn subscription(&self) -> Subscription { - Subscription::none() - } - fn view(&mut self) -> Element<'_, T::Message> { T::view(self) } + fn theme(&self) -> Self::Theme { + T::theme(self) + } + + fn subscription(&self) -> Subscription { + Subscription::none() + } + fn background_color(&self) -> Color { T::background_color(self) } diff --git a/src/widget.rs b/src/widget.rs index 5e2b63fc..e40ed108 100644 --- a/src/widget.rs +++ b/src/widget.rs @@ -15,15 +15,16 @@ //! [`TextInput`] has some [`text_input::State`]. /// A container that distributes its contents vertically. -pub type Column<'a, Message> = - iced_native::widget::Column<'a, Message, crate::Renderer>; +pub type Column<'a, Message, Theme = crate::Theme> = + iced_native::widget::Column<'a, Message, crate::Renderer>; /// A container that distributes its contents horizontally. -pub type Row<'a, Message> = - iced_native::widget::Row<'a, Message, crate::Renderer>; +pub type Row<'a, Message, Theme = crate::Theme> = + iced_native::widget::Row<'a, Message, crate::Renderer>; /// A paragraph of text. -pub type Text = iced_native::widget::Text; +pub type Text = + iced_native::widget::Text>; pub mod button { //! Allow your users to perform actions by pressing a button. @@ -32,8 +33,8 @@ pub mod button { pub use iced_native::widget::button::{State, Style, StyleSheet}; /// A widget that produces a message when clicked. - pub type Button<'a, Message> = - iced_native::widget::Button<'a, Message, crate::Renderer>; + pub type Button<'a, Message, Theme = crate::Theme> = + iced_native::widget::Button<'a, Message, crate::Renderer>; } pub mod checkbox { @@ -41,8 +42,8 @@ pub mod checkbox { pub use iced_native::widget::checkbox::{Style, StyleSheet}; /// A box that can be checked. - pub type Checkbox<'a, Message> = - iced_native::widget::Checkbox<'a, Message, crate::Renderer>; + pub type Checkbox<'a, Message, Theme> = + iced_native::widget::Checkbox<'a, Message, crate::Renderer>; } pub mod container { @@ -50,8 +51,8 @@ pub mod container { pub use iced_native::widget::container::{Style, StyleSheet}; /// An element decorating some content. - pub type Container<'a, Message> = - iced_native::widget::Container<'a, Message, crate::Renderer>; + pub type Container<'a, Message, Theme = crate::Theme> = + iced_native::widget::Container<'a, Message, crate::Renderer>; } pub mod pane_grid { @@ -73,16 +74,24 @@ pub mod pane_grid { /// to completely fill the space available. /// /// [![Pane grid - Iced](https://thumbs.gfycat.com/MixedFlatJellyfish-small.gif)](https://gfycat.com/mixedflatjellyfish) - pub type PaneGrid<'a, Message> = - iced_native::widget::PaneGrid<'a, Message, crate::Renderer>; + pub type PaneGrid<'a, Message, Theme> = + iced_native::widget::PaneGrid<'a, Message, crate::Renderer>; /// The content of a [`Pane`]. - pub type Content<'a, Message> = - iced_native::widget::pane_grid::Content<'a, Message, crate::Renderer>; + pub type Content<'a, Message, Theme> = + iced_native::widget::pane_grid::Content< + 'a, + Message, + crate::Renderer, + >; /// The title bar of a [`Pane`]. - pub type TitleBar<'a, Message> = - iced_native::widget::pane_grid::TitleBar<'a, Message, crate::Renderer>; + pub type TitleBar<'a, Message, Theme> = + iced_native::widget::pane_grid::TitleBar< + 'a, + Message, + crate::Renderer, + >; } pub mod pick_list { @@ -91,8 +100,8 @@ pub mod pick_list { pub use iced_native::widget::pick_list::{State, Style, StyleSheet}; /// A widget allowing the selection of a single value from a list of options. - pub type PickList<'a, T, Message> = - iced_native::widget::PickList<'a, T, Message, crate::Renderer>; + pub type PickList<'a, T, Message, Theme> = + iced_native::widget::PickList<'a, T, Message, crate::Renderer>; } pub mod radio { @@ -100,8 +109,8 @@ pub mod radio { pub use iced_native::widget::radio::{Style, StyleSheet}; /// A circular button representing a choice. - pub type Radio<'a, Message> = - iced_native::widget::Radio<'a, Message, crate::Renderer>; + pub type Radio<'a, Message, Theme> = + iced_native::widget::Radio<'a, Message, crate::Renderer>; } pub mod scrollable { @@ -112,8 +121,8 @@ pub mod scrollable { /// A widget that can vertically display an infinite amount of content /// with a scrollbar. - pub type Scrollable<'a, Message> = - iced_native::widget::Scrollable<'a, Message, crate::Renderer>; + pub type Scrollable<'a, Message, Theme> = + iced_native::widget::Scrollable<'a, Message, crate::Renderer>; } pub mod toggler { @@ -121,8 +130,8 @@ pub mod toggler { pub use iced_native::widget::toggler::{Style, StyleSheet}; /// A toggler widget. - pub type Toggler<'a, Message> = - iced_native::widget::Toggler<'a, Message, crate::Renderer>; + pub type Toggler<'a, Message, Theme> = + iced_native::widget::Toggler<'a, Message, crate::Renderer>; } pub mod text_input { @@ -134,8 +143,8 @@ pub mod text_input { pub use iced_native::widget::text_input::{State, Style, StyleSheet}; /// A field that can be filled with text. - pub type TextInput<'a, Message> = - iced_native::widget::TextInput<'a, Message, Renderer>; + pub type TextInput<'a, Message, Theme> = + iced_native::widget::TextInput<'a, Message, Renderer>; } pub mod tooltip { @@ -143,8 +152,8 @@ pub mod tooltip { pub use iced_native::widget::tooltip::Position; /// A widget allowing the selection of a single value from a list of options. - pub type Tooltip<'a, Message> = - iced_native::widget::Tooltip<'a, Message, crate::Renderer>; + pub type Tooltip<'a, Message, Theme> = + iced_native::widget::Tooltip<'a, Message, crate::Renderer>; } pub use iced_native::widget::progress_bar; diff --git a/style/src/button.rs b/style/src/button.rs index de2de4f4..9f00185c 100644 --- a/style/src/button.rs +++ b/style/src/button.rs @@ -27,10 +27,12 @@ impl std::default::Default for Style { /// A set of rules that dictate the style of a button. pub trait StyleSheet { - fn active(&self) -> Style; + type Variant; - fn hovered(&self) -> Style { - let active = self.active(); + fn active(&self, variant: Self::Variant) -> Style; + + fn hovered(&self, variant: Self::Variant) -> Style { + let active = self.active(variant); Style { shadow_offset: active.shadow_offset + Vector::new(0.0, 1.0), @@ -38,15 +40,15 @@ pub trait StyleSheet { } } - fn pressed(&self) -> Style { + fn pressed(&self, variant: Self::Variant) -> Style { Style { shadow_offset: Vector::default(), - ..self.active() + ..self.active(variant) } } - fn disabled(&self) -> Style { - let active = self.active(); + fn disabled(&self, variant: Self::Variant) -> Style { + let active = self.active(variant); Style { shadow_offset: Vector::default(), @@ -64,33 +66,3 @@ pub trait StyleSheet { } } } - -struct Default; - -impl StyleSheet for Default { - fn active(&self) -> Style { - Style { - shadow_offset: Vector::new(0.0, 0.0), - background: Some(Background::Color([0.87, 0.87, 0.87].into())), - border_radius: 2.0, - border_width: 1.0, - border_color: [0.7, 0.7, 0.7].into(), - text_color: Color::BLACK, - } - } -} - -impl<'a> std::default::Default for Box { - fn default() -> Self { - Box::new(Default) - } -} - -impl<'a, T> From for Box -where - T: StyleSheet + 'a, -{ - fn from(style_sheet: T) -> Self { - Box::new(style_sheet) - } -} diff --git a/style/src/lib.rs b/style/src/lib.rs index e4556f67..d9c3259e 100644 --- a/style/src/lib.rs +++ b/style/src/lib.rs @@ -21,4 +21,7 @@ pub mod rule; pub mod scrollable; pub mod slider; pub mod text_input; +pub mod theme; pub mod toggler; + +pub use theme::Theme; diff --git a/style/src/theme.rs b/style/src/theme.rs new file mode 100644 index 00000000..7d420c8a --- /dev/null +++ b/style/src/theme.rs @@ -0,0 +1,45 @@ +use crate::button; + +use iced_core::{Color, Vector}; + +#[derive(Debug, Clone, Copy, PartialEq, Eq)] +pub enum Theme { + Light, + Dark, +} + +impl Default for Theme { + fn default() -> Self { + Self::Light + } +} + +#[derive(Debug, Clone, Copy, PartialEq, Eq)] +pub enum Button { + Primary, + Secondary, + Positive, + Destructive, + Text, +} + +impl Default for Button { + fn default() -> Self { + Self::Primary + } +} + +impl button::StyleSheet for Theme { + type Variant = Button; + + fn active(&self, _variant: Self::Variant) -> button::Style { + button::Style { + shadow_offset: Vector::default(), + background: None, + border_radius: 0.0, + border_width: 0.0, + border_color: Color::TRANSPARENT, + text_color: Color::BLACK, + } + } +} diff --git a/wgpu/src/lib.rs b/wgpu/src/lib.rs index ebe48510..d1ad6cd9 100644 --- a/wgpu/src/lib.rs +++ b/wgpu/src/lib.rs @@ -39,6 +39,7 @@ mod quad; mod text; pub use iced_graphics::{Antialiasing, Color, Error, Primitive, Viewport}; +pub use iced_native::Theme; pub use wgpu; pub use backend::Backend; @@ -53,4 +54,5 @@ mod image; /// /// [`wgpu`]: https://github.com/gfx-rs/wgpu-rs /// [`iced`]: https://github.com/iced-rs/iced -pub type Renderer = iced_graphics::Renderer; +pub type Renderer = + iced_graphics::Renderer; diff --git a/wgpu/src/window/compositor.rs b/wgpu/src/window/compositor.rs index 54ea8247..bfb18bfa 100644 --- a/wgpu/src/window/compositor.rs +++ b/wgpu/src/window/compositor.rs @@ -5,9 +5,11 @@ use iced_graphics::compositor; use iced_native::futures; use raw_window_handle::HasRawWindowHandle; +use std::marker::PhantomData; + /// A window graphics backend for iced powered by `wgpu`. #[allow(missing_debug_implementations)] -pub struct Compositor { +pub struct Compositor { settings: Settings, instance: wgpu::Instance, adapter: wgpu::Adapter, @@ -16,9 +18,10 @@ pub struct Compositor { staging_belt: wgpu::util::StagingBelt, local_pool: futures::executor::LocalPool, format: wgpu::TextureFormat, + theme: PhantomData, } -impl Compositor { +impl Compositor { const CHUNK_SIZE: u64 = 10 * 1024; /// Requests a new [`Compositor`] with the given [`Settings`]. @@ -101,6 +104,7 @@ impl Compositor { staging_belt, local_pool, format, + theme: PhantomData, }) } @@ -110,15 +114,15 @@ impl Compositor { } } -impl iced_graphics::window::Compositor for Compositor { +impl iced_graphics::window::Compositor for Compositor { type Settings = Settings; - type Renderer = Renderer; + type Renderer = Renderer; type Surface = wgpu::Surface; fn new( settings: Self::Settings, compatible_window: Option<&W>, - ) -> Result<(Self, Renderer), Error> { + ) -> Result<(Self, Self::Renderer), Error> { let compositor = futures::executor::block_on(Self::request( settings, compatible_window, diff --git a/winit/src/application.rs b/winit/src/application.rs index 90b03d56..abe6b8a9 100644 --- a/winit/src/application.rs +++ b/winit/src/application.rs @@ -51,6 +51,9 @@ pub trait Application: Program { /// title of your application when necessary. fn title(&self) -> String; + /// Returns the current [`Theme`] of the [`Application`]. + fn theme(&self) -> ::Theme; + /// Returns the event `Subscription` for the current state of the /// application. /// @@ -255,6 +258,7 @@ async fn run_instance( let mut state = State::new(&application, &window); let mut viewport_version = state.viewport_version(); + let mut theme = application.theme(); let physical_size = state.physical_size(); @@ -327,6 +331,7 @@ async fn run_instance( let should_exit = application.should_exit(); + theme = application.theme(); user_interface = ManuallyDrop::new(build_user_interface( &mut application, cache, @@ -341,8 +346,11 @@ async fn run_instance( } debug.draw_started(); - let new_mouse_interaction = - user_interface.draw(&mut renderer, state.cursor_position()); + let new_mouse_interaction = user_interface.draw( + &mut renderer, + &theme, + state.cursor_position(), + ); debug.draw_finished(); if new_mouse_interaction != mouse_interaction { @@ -389,8 +397,11 @@ async fn run_instance( debug.layout_finished(); debug.draw_started(); - let new_mouse_interaction = user_interface - .draw(&mut renderer, state.cursor_position()); + let new_mouse_interaction = user_interface.draw( + &mut renderer, + &theme, + state.cursor_position(), + ); if new_mouse_interaction != mouse_interaction { window.set_cursor_icon(conversion::mouse_interaction( -- cgit From 2cfb307f8c3927a0876c6b754a5d7d673b9edfee Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Sat, 21 May 2022 17:33:31 -0400 Subject: Implement basic theming `Palette` --- style/Cargo.toml | 7 ++ style/src/theme.rs | 79 ++++++++++++++++-- style/src/theme/palette.rs | 202 +++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 280 insertions(+), 8 deletions(-) create mode 100644 style/src/theme/palette.rs diff --git a/style/Cargo.toml b/style/Cargo.toml index bb2a9645..cf9d328b 100644 --- a/style/Cargo.toml +++ b/style/Cargo.toml @@ -13,3 +13,10 @@ categories = ["gui"] [dependencies.iced_core] version = "0.5" path = "../core" +features = ["palette"] + +[dependencies.palette] +version = "0.6" + +[dependencies.lazy_static] +version = "1.4" diff --git a/style/src/theme.rs b/style/src/theme.rs index 7d420c8a..91a9e921 100644 --- a/style/src/theme.rs +++ b/style/src/theme.rs @@ -1,6 +1,10 @@ +mod palette; + +pub use self::palette::Palette; + use crate::button; -use iced_core::{Color, Vector}; +use iced_core::Background; #[derive(Debug, Clone, Copy, PartialEq, Eq)] pub enum Theme { @@ -8,6 +12,22 @@ pub enum Theme { Dark, } +impl Theme { + pub fn palette(self) -> Palette { + match self { + Self::Light => Palette::LIGHT, + Self::Dark => Palette::DARK, + } + } + + fn extended_palette(&self) -> &palette::Extended { + match self { + Self::Light => &palette::EXTENDED_LIGHT, + Self::Dark => &palette::EXTENDED_DARK, + } + } +} + impl Default for Theme { fn default() -> Self { Self::Light @@ -32,14 +52,57 @@ impl Default for Button { impl button::StyleSheet for Theme { type Variant = Button; - fn active(&self, _variant: Self::Variant) -> button::Style { + fn active(&self, variant: Self::Variant) -> button::Style { + let palette = self.extended_palette(); + + let style = button::Style { + border_radius: 2.0, + ..button::Style::default() + }; + + match variant { + Button::Primary => button::Style { + background: Some(palette.primary.strong.into()), + text_color: palette.primary.text, + ..style + }, + Button::Secondary => button::Style { + background: Some(palette.background.weak.into()), + text_color: palette.background.text, + ..style + }, + Button::Positive => button::Style { + background: Some(palette.success.base.into()), + text_color: palette.success.text, + ..style + }, + Button::Destructive => button::Style { + background: Some(palette.danger.base.into()), + text_color: palette.danger.text, + ..style + }, + Button::Text => button::Style { + text_color: palette.background.text, + ..style + }, + } + } + + fn hovered(&self, variant: Self::Variant) -> button::Style { + let active = self.active(variant); + let palette = self.extended_palette(); + + let background = match variant { + Button::Primary => Some(palette.primary.base), + Button::Secondary => Some(palette.background.strong), + Button::Positive => Some(palette.success.strong), + Button::Destructive => Some(palette.danger.strong), + Button::Text => None, + }; + button::Style { - shadow_offset: Vector::default(), - background: None, - border_radius: 0.0, - border_width: 0.0, - border_color: Color::TRANSPARENT, - text_color: Color::BLACK, + background: background.map(Background::from), + ..active } } } diff --git a/style/src/theme/palette.rs b/style/src/theme/palette.rs new file mode 100644 index 00000000..74139e6b --- /dev/null +++ b/style/src/theme/palette.rs @@ -0,0 +1,202 @@ +use iced_core::Color; + +use lazy_static::lazy_static; +use palette::{FromColor, Hsl, Mix, RelativeContrast, Srgb}; + +#[derive(Debug, Clone, Copy, PartialEq)] +pub struct Palette { + background: Color, + text: Color, + primary: Color, + success: Color, + danger: Color, +} + +impl Palette { + pub const LIGHT: Self = Self { + background: Color::WHITE, + text: Color::BLACK, + primary: Color::from_rgb( + 0x5E as f32 / 255.0, + 0x7C as f32 / 255.0, + 0xE2 as f32 / 255.0, + ), + success: Color::from_rgb( + 0x12 as f32 / 255.0, + 0x66 as f32 / 255.0, + 0x4F as f32 / 255.0, + ), + danger: Color::from_rgb( + 0xC3 as f32 / 255.0, + 0x42 as f32 / 255.0, + 0x3F as f32 / 255.0, + ), + }; + + pub const DARK: Self = Self { + background: Color::WHITE, + text: Color::BLACK, + primary: Color::from_rgb( + 0x5E as f32 / 255.0, + 0x7C as f32 / 255.0, + 0xE2 as f32 / 255.0, + ), + success: Color::from_rgb( + 0x12 as f32 / 255.0, + 0x66 as f32 / 255.0, + 0x4F as f32 / 255.0, + ), + danger: Color::from_rgb( + 0xC3 as f32 / 255.0, + 0x42 as f32 / 255.0, + 0x3F as f32 / 255.0, + ), + }; +} + +pub struct Extended { + pub background: Background, + pub primary: Group, + pub success: Group, + pub danger: Group, +} + +lazy_static! { + pub static ref EXTENDED_LIGHT: Extended = + Extended::generate(Palette::LIGHT); + pub static ref EXTENDED_DARK: Extended = Extended::generate(Palette::DARK); +} + +impl Extended { + pub fn generate(palette: Palette) -> Self { + Self { + background: Background::new(palette.background, palette.text), + primary: Group::new( + palette.primary, + palette.background, + palette.text, + ), + success: Group::new( + palette.success, + palette.background, + palette.text, + ), + danger: Group::new( + palette.danger, + palette.background, + palette.text, + ), + } + } +} + +pub struct Background { + pub base: Color, + pub weak: Color, + pub strong: Color, + pub text: Color, +} + +impl Background { + pub fn new(base: Color, text: Color) -> Self { + Self { + base, + weak: muted(base, 0.1), + strong: muted(base, 0.2), + text, + } + } +} + +pub struct Group { + pub base: Color, + pub weak: Color, + pub strong: Color, + pub text: Color, +} + +impl Group { + pub fn new(base: Color, background: Color, text: Color) -> Self { + Self { + base, + weak: mix(base, background, 0.4), + strong: if is_dark(background) { + lighten(base, 0.1) + } else { + darken(base, 0.1) + }, + text: if is_readable(base, text) { + text + } else if is_dark(text) { + Color::WHITE + } else { + Color::BLACK + }, + } + } +} + +fn muted(color: Color, amount: f32) -> Color { + let mut hsl = to_hsl(color); + + hsl.lightness = if is_dark(color) { + let delta = amount * (1.0 - hsl.lightness).powi(7); + hsl.lightness + delta + } else { + let delta = amount * hsl.lightness.powi(5); + hsl.lightness - delta + }; + + from_hsl(hsl) +} + +fn darken(color: Color, amount: f32) -> Color { + let mut hsl = to_hsl(color); + + hsl.lightness = if hsl.lightness - amount < 0.0 { + 0.0 + } else { + hsl.lightness - amount + }; + + from_hsl(hsl) +} + +fn mix(a: Color, b: Color, factor: f32) -> Color { + let a_lin = Srgb::from(a).into_linear(); + let b_lin = Srgb::from(b).into_linear(); + + let mixed = a_lin.mix(&b_lin, factor); + Srgb::from_linear(mixed).into() +} + +fn lighten(color: Color, amount: f32) -> Color { + let mut hsl = to_hsl(color); + + hsl.lightness = if hsl.lightness + amount > 1.0 { + 1.0 + } else { + hsl.lightness + amount + }; + + from_hsl(hsl) +} + +fn is_dark(color: Color) -> bool { + to_hsl(color).lightness < 0.5 +} + +fn is_readable(a: Color, b: Color) -> bool { + let a_srgb = Srgb::from(a); + let b_srgb = Srgb::from(b); + + a_srgb.has_enhanced_contrast_text(&b_srgb) +} + +fn to_hsl(color: Color) -> Hsl { + Hsl::from_color(Srgb::from(color)) +} + +fn from_hsl(hsl: Hsl) -> Color { + Srgb::from_color(hsl).into() +} -- cgit From 03eda9b162012c503ead649e5ccb95b7ef1d10ed Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Wed, 25 May 2022 05:01:18 +0200 Subject: Let a `Theme` control the background color of an application ... and remove `Application::background_color` --- examples/pure/game_of_life/src/main.rs | 6 +----- glutin/src/application.rs | 5 ++++- src/application.rs | 16 +++------------- src/pure/application.rs | 16 +++------------- src/pure/sandbox.rs | 13 +------------ src/sandbox.rs | 13 +------------ style/src/theme.rs | 14 +++++++++++++- winit/src/application.rs | 16 ++++++---------- winit/src/application/state.rs | 13 +------------ 9 files changed, 33 insertions(+), 79 deletions(-) diff --git a/examples/pure/game_of_life/src/main.rs b/examples/pure/game_of_life/src/main.rs index a3e46888..0eded2ce 100644 --- a/examples/pure/game_of_life/src/main.rs +++ b/examples/pure/game_of_life/src/main.rs @@ -12,7 +12,7 @@ use iced::pure::{Application, Element}; use iced::theme::{self, Theme}; use iced::time; use iced::window; -use iced::{Alignment, Color, Command, Length, Settings, Subscription}; +use iced::{Alignment, Command, Length, Settings, Subscription}; use preset::Preset; use std::time::{Duration, Instant}; @@ -71,10 +71,6 @@ impl Application for GameOfLife { String::from("Game of Life - Iced") } - fn background_color(&self) -> Color { - style::BACKGROUND - } - fn update(&mut self, message: Message) -> Command { match message { Message::Grid(message, version) => { diff --git a/glutin/src/application.rs b/glutin/src/application.rs index d93059e5..7a5d78ea 100644 --- a/glutin/src/application.rs +++ b/glutin/src/application.rs @@ -9,6 +9,7 @@ use iced_winit::application; use iced_winit::conversion; use iced_winit::futures; use iced_winit::futures::channel::mpsc; +use iced_winit::theme::{self, Definition as _}; use iced_winit::user_interface; use iced_winit::{Clipboard, Debug, Proxy, Settings}; @@ -25,6 +26,7 @@ where A: Application + 'static, E: Executor + 'static, C: window::GLCompositor + 'static, + ::Theme: theme::Definition, { use futures::task; use futures::Future; @@ -203,6 +205,7 @@ async fn run_instance( A: Application + 'static, E: Executor + 'static, C: window::GLCompositor + 'static, + ::Theme: theme::Definition, { use glutin::event; use iced_winit::futures::stream::StreamExt; @@ -376,7 +379,7 @@ async fn run_instance( compositor.present( &mut renderer, state.viewport(), - state.background_color(), + theme.background_color(), &debug.overlay(), ); diff --git a/src/application.rs b/src/application.rs index f05d2c4b..01571b56 100644 --- a/src/application.rs +++ b/src/application.rs @@ -1,5 +1,6 @@ +use crate::theme; use crate::window; -use crate::{Color, Command, Element, Executor, Settings, Subscription}; +use crate::{Command, Element, Executor, Settings, Subscription}; /// An interactive cross-platform application. /// @@ -101,7 +102,7 @@ pub trait Application: Sized { type Message: std::fmt::Debug + Send; /// The theme of your [`Application`]. - type Theme: Default; + type Theme: Default + theme::Definition; /// The data needed to initialize your [`Application`]. type Flags; @@ -167,13 +168,6 @@ pub trait Application: Sized { window::Mode::Windowed } - /// Returns the background color of the [`Application`]. - /// - /// By default, it returns [`Color::WHITE`]. - fn background_color(&self) -> Color { - Color::WHITE - } - /// Returns the scale factor of the [`Application`]. /// /// It can be used to dynamically control the size of the UI at runtime @@ -277,10 +271,6 @@ where self.0.subscription() } - fn background_color(&self) -> Color { - self.0.background_color() - } - fn scale_factor(&self) -> f64 { self.0.scale_factor() } diff --git a/src/pure/application.rs b/src/pure/application.rs index 77f68c9e..1306ab6c 100644 --- a/src/pure/application.rs +++ b/src/pure/application.rs @@ -1,6 +1,7 @@ use crate::pure::{self, Pure}; +use crate::theme; use crate::window; -use crate::{Color, Command, Executor, Settings, Subscription}; +use crate::{Command, Executor, Settings, Subscription}; /// A pure version of [`Application`]. /// @@ -22,7 +23,7 @@ pub trait Application: Sized { type Message: std::fmt::Debug + Send; /// The theme of your [`Application`]. - type Theme: Default; + type Theme: Default + theme::Definition; /// The data needed to initialize your [`Application`]. type Flags; @@ -88,13 +89,6 @@ pub trait Application: Sized { window::Mode::Windowed } - /// Returns the background color of the [`Application`]. - /// - /// By default, it returns [`Color::WHITE`]. - fn background_color(&self) -> Color { - Color::WHITE - } - /// Returns the scale factor of the [`Application`]. /// /// It can be used to dynamically control the size of the UI at runtime @@ -185,10 +179,6 @@ where A::mode(&self.application) } - fn background_color(&self) -> Color { - A::background_color(&self.application) - } - fn scale_factor(&self) -> f64 { A::scale_factor(&self.application) } diff --git a/src/pure/sandbox.rs b/src/pure/sandbox.rs index 207a32bd..a58cace7 100644 --- a/src/pure/sandbox.rs +++ b/src/pure/sandbox.rs @@ -1,5 +1,5 @@ use crate::pure; -use crate::{Color, Command, Error, Settings, Subscription, Theme}; +use crate::{Command, Error, Settings, Subscription, Theme}; /// A pure version of [`Sandbox`]. /// @@ -44,13 +44,6 @@ pub trait Sandbox { Theme::default() } - /// Returns the background color of the [`Sandbox`]. - /// - /// By default, it returns [`Color::WHITE`]. - fn background_color(&self) -> Color { - Color::WHITE - } - /// Returns the scale factor of the [`Sandbox`]. /// /// It can be used to dynamically control the size of the UI at runtime @@ -120,10 +113,6 @@ where Subscription::none() } - fn background_color(&self) -> Color { - T::background_color(self) - } - fn scale_factor(&self) -> f64 { T::scale_factor(self) } diff --git a/src/sandbox.rs b/src/sandbox.rs index 16819569..f03562fb 100644 --- a/src/sandbox.rs +++ b/src/sandbox.rs @@ -1,5 +1,5 @@ use crate::{ - Application, Color, Command, Element, Error, Settings, Subscription, Theme, + Application, Command, Element, Error, Settings, Subscription, Theme, }; /// A sandboxed [`Application`]. @@ -121,13 +121,6 @@ pub trait Sandbox { Theme::default() } - /// Returns the background color of the [`Sandbox`]. - /// - /// By default, it returns [`Color::WHITE`]. - fn background_color(&self) -> Color { - Color::WHITE - } - /// Returns the scale factor of the [`Sandbox`]. /// /// It can be used to dynamically control the size of the UI at runtime @@ -197,10 +190,6 @@ where Subscription::none() } - fn background_color(&self) -> Color { - T::background_color(self) - } - fn scale_factor(&self) -> f64 { T::scale_factor(self) } diff --git a/style/src/theme.rs b/style/src/theme.rs index 91a9e921..16f24923 100644 --- a/style/src/theme.rs +++ b/style/src/theme.rs @@ -4,7 +4,7 @@ pub use self::palette::Palette; use crate::button; -use iced_core::Background; +use iced_core::{Background, Color}; #[derive(Debug, Clone, Copy, PartialEq, Eq)] pub enum Theme { @@ -34,6 +34,18 @@ impl Default for Theme { } } +pub trait Definition { + fn background_color(&self) -> Color; +} + +impl Definition for Theme { + fn background_color(&self) -> Color { + let palette = self.extended_palette(); + + palette.background.base + } +} + #[derive(Debug, Clone, Copy, PartialEq, Eq)] pub enum Button { Primary, diff --git a/winit/src/application.rs b/winit/src/application.rs index abe6b8a9..55fd9e73 100644 --- a/winit/src/application.rs +++ b/winit/src/application.rs @@ -6,9 +6,10 @@ pub use state::State; use crate::clipboard::{self, Clipboard}; use crate::conversion; use crate::mouse; +use crate::theme::{self, Definition as _}; use crate::{ - Color, Command, Debug, Error, Executor, Mode, Proxy, Runtime, Settings, - Size, Subscription, + Command, Debug, Error, Executor, Mode, Proxy, Runtime, Settings, Size, + Subscription, }; use iced_futures::futures; @@ -77,13 +78,6 @@ pub trait Application: Program { Mode::Windowed } - /// Returns the background [`Color`] of the [`Application`]. - /// - /// By default, it returns [`Color::WHITE`]. - fn background_color(&self) -> Color { - Color::WHITE - } - /// Returns the scale factor of the [`Application`]. /// /// It can be used to dynamically control the size of the UI at runtime @@ -115,6 +109,7 @@ where A: Application + 'static, E: Executor + 'static, C: window::Compositor + 'static, + ::Theme: theme::Definition, { use futures::task; use futures::Future; @@ -250,6 +245,7 @@ async fn run_instance( A: Application + 'static, E: Executor + 'static, C: window::Compositor + 'static, + ::Theme: theme::Definition, { use iced_futures::futures::stream::StreamExt; use winit::event; @@ -425,7 +421,7 @@ async fn run_instance( &mut renderer, &mut surface, state.viewport(), - state.background_color(), + theme.background_color(), &debug.overlay(), ) { Ok(()) => { diff --git a/winit/src/application/state.rs b/winit/src/application/state.rs index b54d3aed..34a9b10e 100644 --- a/winit/src/application/state.rs +++ b/winit/src/application/state.rs @@ -1,5 +1,5 @@ use crate::conversion; -use crate::{Application, Color, Debug, Mode, Point, Size, Viewport}; +use crate::{Application, Debug, Mode, Point, Size, Viewport}; use std::marker::PhantomData; use winit::event::{Touch, WindowEvent}; @@ -10,7 +10,6 @@ use winit::window::Window; pub struct State { title: String, mode: Mode, - background_color: Color, scale_factor: f64, viewport: Viewport, viewport_version: usize, @@ -24,7 +23,6 @@ impl State { pub fn new(application: &A, window: &Window) -> Self { let title = application.title(); let mode = application.mode(); - let background_color = application.background_color(); let scale_factor = application.scale_factor(); let viewport = { @@ -39,7 +37,6 @@ impl State { Self { title, mode, - background_color, scale_factor, viewport, viewport_version: 0, @@ -50,11 +47,6 @@ impl State { } } - /// Returns the current background [`Color`] of the [`State`]. - pub fn background_color(&self) -> Color { - self.background_color - } - /// Returns the current [`Viewport`] of the [`State`]. pub fn viewport(&self) -> &Viewport { &self.viewport @@ -187,9 +179,6 @@ impl State { self.mode = new_mode; } - // Update background color - self.background_color = application.background_color(); - // Update scale factor let new_scale_factor = application.scale_factor(); -- cgit From 3a820b45f336398c48f8bedf7b8c4b8af876efff Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Thu, 26 May 2022 00:40:27 +0200 Subject: Implement theme styling for `Slider` --- examples/tour/src/main.rs | 2 +- native/src/widget/slider.rs | 46 ++++++++++++++++++++----------- pure/src/helpers.rs | 8 +++--- pure/src/widget/slider.rs | 31 ++++++++++++++------- style/src/slider.rs | 66 ++++----------------------------------------- style/src/theme.rs | 54 +++++++++++++++++++++++++++++++++++++ style/src/theme/palette.rs | 2 ++ 7 files changed, 118 insertions(+), 91 deletions(-) diff --git a/examples/tour/src/main.rs b/examples/tour/src/main.rs index 8bdc7f1d..c7ca8534 100644 --- a/examples/tour/src/main.rs +++ b/examples/tour/src/main.rs @@ -776,7 +776,7 @@ fn color_slider( state: &mut slider::State, component: f32, update: impl Fn(f32) -> Color + 'static, -) -> Slider { +) -> Slider { Slider::new(state, 0.0..=1.0, f64::from(component), move |c| { StepMessage::TextColorChanged(update(c as f32)) }) diff --git a/native/src/widget/slider.rs b/native/src/widget/slider.rs index 3143aed9..f42bca28 100644 --- a/native/src/widget/slider.rs +++ b/native/src/widget/slider.rs @@ -40,7 +40,11 @@ pub use iced_style::slider::{Handle, HandleShape, Style, StyleSheet}; /// /// ![Slider drawn by Coffee's renderer](https://github.com/hecrj/coffee/blob/bda9818f823dfcb8a7ad0ff4940b4d4b387b5208/images/ui/slider.png?raw=true) #[allow(missing_debug_implementations)] -pub struct Slider<'a, T, Message> { +pub struct Slider<'a, T, Message, Renderer> +where + Renderer: crate::Renderer, + Renderer::Theme: StyleSheet, +{ state: &'a mut State, range: RangeInclusive, step: T, @@ -49,13 +53,15 @@ pub struct Slider<'a, T, Message> { on_release: Option, width: Length, height: u16, - style_sheet: Box, + variant: ::Variant, } -impl<'a, T, Message> Slider<'a, T, Message> +impl<'a, T, Message, Renderer> Slider<'a, T, Message, Renderer> where T: Copy + From + std::cmp::PartialOrd, Message: Clone, + Renderer: crate::Renderer, + Renderer::Theme: StyleSheet, { /// The default height of a [`Slider`]. pub const DEFAULT_HEIGHT: u16 = 22; @@ -99,7 +105,7 @@ where on_release: None, width: Length::Fill, height: Self::DEFAULT_HEIGHT, - style_sheet: Default::default(), + variant: Default::default(), } } @@ -129,9 +135,9 @@ where /// Sets the style of the [`Slider`]. pub fn style( mut self, - style_sheet: impl Into>, + variant: impl Into<::Variant>, ) -> Self { - self.style_sheet = style_sheet.into(); + self.variant = variant.into(); self } @@ -230,26 +236,29 @@ where } /// Draws a [`Slider`]. -pub fn draw( - renderer: &mut impl crate::Renderer, +pub fn draw( + renderer: &mut R, layout: Layout<'_>, cursor_position: Point, state: &State, value: T, range: &RangeInclusive, - style_sheet: &dyn StyleSheet, + style_sheet: &dyn StyleSheet::Variant>, + variant: ::Variant, ) where T: Into + Copy, + R: crate::Renderer, + R::Theme: StyleSheet, { let bounds = layout.bounds(); let is_mouse_over = bounds.contains(cursor_position); let style = if state.is_dragging { - style_sheet.dragging() + style_sheet.dragging(variant) } else if is_mouse_over { - style_sheet.hovered() + style_sheet.hovered(variant) } else { - style_sheet.active() + style_sheet.active(variant) }; let rail_y = bounds.y + (bounds.height / 2.0).round(); @@ -357,11 +366,12 @@ impl State { } impl<'a, T, Message, Renderer> Widget - for Slider<'a, T, Message> + for Slider<'a, T, Message, Renderer> where T: Copy + Into + num_traits::FromPrimitive, Message: Clone, Renderer: crate::Renderer, + Renderer::Theme: StyleSheet, { fn width(&self) -> Length { self.width @@ -423,7 +433,8 @@ where &self.state, self.value, &self.range, - self.style_sheet.as_ref(), + theme, + self.variant, ) } @@ -438,14 +449,17 @@ where } } -impl<'a, T, Message, Renderer> From> +impl<'a, T, Message, Renderer> From> for Element<'a, Message, Renderer> where T: 'a + Copy + Into + num_traits::FromPrimitive, Message: 'a + Clone, Renderer: 'a + crate::Renderer, + Renderer::Theme: StyleSheet, { - fn from(slider: Slider<'a, T, Message>) -> Element<'a, Message, Renderer> { + fn from( + slider: Slider<'a, T, Message, Renderer>, + ) -> Element<'a, Message, Renderer> { Element::new(slider) } } diff --git a/pure/src/helpers.rs b/pure/src/helpers.rs index ad6f10b1..71ae7635 100644 --- a/pure/src/helpers.rs +++ b/pure/src/helpers.rs @@ -147,14 +147,16 @@ where /// Creates a new [`Slider`]. /// /// [`Slider`]: widget::Slider -pub fn slider<'a, Message, T>( +pub fn slider<'a, T, Message, Renderer>( range: std::ops::RangeInclusive, value: T, on_change: impl Fn(T) -> Message + 'a, -) -> widget::Slider<'a, T, Message> +) -> widget::Slider<'a, T, Message, Renderer> where - Message: Clone, T: Copy + From + std::cmp::PartialOrd, + Message: Clone, + Renderer: iced_native::Renderer, + Renderer::Theme: widget::slider::StyleSheet, { widget::Slider::new(range, value, on_change) } diff --git a/pure/src/widget/slider.rs b/pure/src/widget/slider.rs index 2f934a48..a6deda41 100644 --- a/pure/src/widget/slider.rs +++ b/pure/src/widget/slider.rs @@ -37,7 +37,11 @@ pub use iced_style::slider::{Handle, HandleShape, Style, StyleSheet}; /// /// ![Slider drawn by Coffee's renderer](https://github.com/hecrj/coffee/blob/bda9818f823dfcb8a7ad0ff4940b4d4b387b5208/images/ui/slider.png?raw=true) #[allow(missing_debug_implementations)] -pub struct Slider<'a, T, Message> { +pub struct Slider<'a, T, Message, Renderer> +where + Renderer: iced_native::Renderer, + Renderer::Theme: StyleSheet, +{ range: RangeInclusive, step: T, value: T, @@ -45,13 +49,15 @@ pub struct Slider<'a, T, Message> { on_release: Option, width: Length, height: u16, - style_sheet: Box, + variant: ::Variant, } -impl<'a, T, Message> Slider<'a, T, Message> +impl<'a, T, Message, Renderer> Slider<'a, T, Message, Renderer> where T: Copy + From + std::cmp::PartialOrd, Message: Clone, + Renderer: iced_native::Renderer, + Renderer::Theme: StyleSheet, { /// The default height of a [`Slider`]. pub const DEFAULT_HEIGHT: u16 = 22; @@ -88,7 +94,7 @@ where on_release: None, width: Length::Fill, height: Self::DEFAULT_HEIGHT, - style_sheet: Default::default(), + variant: Default::default(), } } @@ -118,9 +124,9 @@ where /// Sets the style of the [`Slider`]. pub fn style( mut self, - style_sheet: impl Into>, + variant: impl Into<::Variant>, ) -> Self { - self.style_sheet = style_sheet.into(); + self.variant = variant.into(); self } @@ -132,11 +138,12 @@ where } impl<'a, T, Message, Renderer> Widget - for Slider<'a, T, Message> + for Slider<'a, T, Message, Renderer> where T: Copy + Into + num_traits::FromPrimitive, Message: Clone, Renderer: iced_native::Renderer, + Renderer::Theme: StyleSheet, { fn tag(&self) -> tree::Tag { tree::Tag::of::() @@ -208,7 +215,8 @@ where tree.state.downcast_ref::(), self.value, &self.range, - self.style_sheet.as_ref(), + theme, + self.variant, ) } @@ -228,14 +236,17 @@ where } } -impl<'a, T, Message, Renderer> From> +impl<'a, T, Message, Renderer> From> for Element<'a, Message, Renderer> where T: 'a + Copy + Into + num_traits::FromPrimitive, Message: 'a + Clone, Renderer: 'a + iced_native::Renderer, + Renderer::Theme: StyleSheet, { - fn from(slider: Slider<'a, T, Message>) -> Element<'a, Message, Renderer> { + fn from( + slider: Slider<'a, T, Message, Renderer>, + ) -> Element<'a, Message, Renderer> { Element::new(slider) } } diff --git a/style/src/slider.rs b/style/src/slider.rs index 1bb28b09..2bf0de73 100644 --- a/style/src/slider.rs +++ b/style/src/slider.rs @@ -26,70 +26,14 @@ pub enum HandleShape { /// A set of rules that dictate the style of a slider. pub trait StyleSheet { + type Variant: Default + Copy; + /// Produces the style of an active slider. - fn active(&self) -> Style; + fn active(&self, variant: Self::Variant) -> Style; /// Produces the style of an hovered slider. - fn hovered(&self) -> Style; + fn hovered(&self, variant: Self::Variant) -> Style; /// Produces the style of a slider that is being dragged. - fn dragging(&self) -> Style; -} - -struct Default; - -impl StyleSheet for Default { - fn active(&self) -> Style { - Style { - rail_colors: ([0.6, 0.6, 0.6, 0.5].into(), Color::WHITE), - handle: Handle { - shape: HandleShape::Rectangle { - width: 8, - border_radius: 4.0, - }, - color: Color::from_rgb(0.95, 0.95, 0.95), - border_color: Color::from_rgb(0.6, 0.6, 0.6), - border_width: 1.0, - }, - } - } - - fn hovered(&self) -> Style { - let active = self.active(); - - Style { - handle: Handle { - color: Color::from_rgb(0.90, 0.90, 0.90), - ..active.handle - }, - ..active - } - } - - fn dragging(&self) -> Style { - let active = self.active(); - - Style { - handle: Handle { - color: Color::from_rgb(0.85, 0.85, 0.85), - ..active.handle - }, - ..active - } - } -} - -impl<'a> std::default::Default for Box { - fn default() -> Self { - Box::new(Default) - } -} - -impl<'a, T> From for Box -where - T: StyleSheet + 'a, -{ - fn from(style_sheet: T) -> Self { - Box::new(style_sheet) - } + fn dragging(&self, variant: Self::Variant) -> Style; } diff --git a/style/src/theme.rs b/style/src/theme.rs index 16f24923..e3c0efc6 100644 --- a/style/src/theme.rs +++ b/style/src/theme.rs @@ -3,6 +3,7 @@ mod palette; pub use self::palette::Palette; use crate::button; +use crate::slider; use iced_core::{Background, Color}; @@ -118,3 +119,56 @@ impl button::StyleSheet for Theme { } } } + +impl slider::StyleSheet for Theme { + type Variant = (); + + fn active(&self, _variant: Self::Variant) -> slider::Style { + let palette = self.extended_palette(); + + let handle = slider::Handle { + shape: slider::HandleShape::Rectangle { + width: 8, + border_radius: 4.0, + }, + color: Color::WHITE, + border_color: Color::WHITE, + border_width: 1.0, + }; + + slider::Style { + rail_colors: (palette.background.strong, palette.background.base), + handle: slider::Handle { + color: palette.background.base, + border_color: palette.border, + ..handle + }, + } + } + + fn hovered(&self, variant: Self::Variant) -> slider::Style { + let active = self.active(variant); + let palette = self.extended_palette(); + + slider::Style { + handle: slider::Handle { + color: palette.background.weak, + ..active.handle + }, + ..active + } + } + + fn dragging(&self, variant: Self::Variant) -> slider::Style { + let active = self.active(variant); + let palette = self.extended_palette(); + + slider::Style { + handle: slider::Handle { + color: palette.background.strong, + ..active.handle + }, + ..active + } + } +} diff --git a/style/src/theme/palette.rs b/style/src/theme/palette.rs index 74139e6b..bbb122ef 100644 --- a/style/src/theme/palette.rs +++ b/style/src/theme/palette.rs @@ -59,6 +59,7 @@ pub struct Extended { pub primary: Group, pub success: Group, pub danger: Group, + pub border: Color, } lazy_static! { @@ -86,6 +87,7 @@ impl Extended { palette.background, palette.text, ), + border: mix(palette.background, palette.text, 0.7), } } } -- cgit From 822a3cd04f9edeb887d85164b0b3e556c3fde6bb Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Thu, 26 May 2022 01:10:26 +0200 Subject: Let a `Theme` control the `text_color` of an application --- native/src/program/state.rs | 7 ++++++- native/src/user_interface.rs | 6 +++++- style/src/theme.rs | 10 +++++++++- style/src/theme/palette.rs | 40 +++++++++++++++++++++++++--------------- winit/src/application.rs | 5 ++++- 5 files changed, 49 insertions(+), 19 deletions(-) diff --git a/native/src/program/state.rs b/native/src/program/state.rs index 6ab6051b..0c133484 100644 --- a/native/src/program/state.rs +++ b/native/src/program/state.rs @@ -1,4 +1,5 @@ use crate::mouse; +use crate::theme; use crate::user_interface::{self, UserInterface}; use crate::{Clipboard, Command, Debug, Event, Point, Program, Size}; @@ -19,6 +20,7 @@ where impl

State

where P: Program + 'static, + ::Theme: theme::Definition, { /// Creates a new [`State`] with the provided [`Program`], initializing its /// primitive with the given logical bounds and renderer. @@ -164,7 +166,10 @@ fn build_user_interface<'a, P: Program>( renderer: &mut P::Renderer, size: Size, debug: &mut Debug, -) -> UserInterface<'a, P::Message, P::Renderer> { +) -> UserInterface<'a, P::Message, P::Renderer> +where + ::Theme: theme::Definition, +{ debug.view_started(); let view = program.view(); debug.view_finished(); diff --git a/native/src/user_interface.rs b/native/src/user_interface.rs index 12f9827d..c8496112 100644 --- a/native/src/user_interface.rs +++ b/native/src/user_interface.rs @@ -3,6 +3,7 @@ use crate::event::{self, Event}; use crate::layout; use crate::mouse; use crate::renderer; +use crate::theme::{self, Definition as _}; use crate::{Clipboard, Element, Layout, Point, Rectangle, Shell, Size}; /// A set of interactive graphical elements with a specific [`Layout`]. @@ -28,6 +29,7 @@ pub struct UserInterface<'a, Message, Renderer> { impl<'a, Message, Renderer> UserInterface<'a, Message, Renderer> where Renderer: crate::Renderer, + Renderer::Theme: theme::Definition, { /// Builds a user interface for an [`Element`]. /// @@ -370,7 +372,9 @@ where self.root.widget.draw( renderer, theme, - &renderer::Style::default(), + &renderer::Style { + text_color: theme.text_color(), + }, Layout::new(&self.base), base_cursor, &viewport, diff --git a/style/src/theme.rs b/style/src/theme.rs index e3c0efc6..1ddf97c3 100644 --- a/style/src/theme.rs +++ b/style/src/theme.rs @@ -31,12 +31,14 @@ impl Theme { impl Default for Theme { fn default() -> Self { - Self::Light + Self::Dark } } pub trait Definition { fn background_color(&self) -> Color; + + fn text_color(&self) -> Color; } impl Definition for Theme { @@ -45,6 +47,12 @@ impl Definition for Theme { palette.background.base } + + fn text_color(&self) -> Color { + let palette = self.extended_palette(); + + palette.background.text + } } #[derive(Debug, Clone, Copy, PartialEq, Eq)] diff --git a/style/src/theme/palette.rs b/style/src/theme/palette.rs index bbb122ef..0394700b 100644 --- a/style/src/theme/palette.rs +++ b/style/src/theme/palette.rs @@ -34,8 +34,12 @@ impl Palette { }; pub const DARK: Self = Self { - background: Color::WHITE, - text: Color::BLACK, + background: Color::from_rgb( + 0x20 as f32 / 255.0, + 0x22 as f32 / 255.0, + 0x25 as f32 / 255.0, + ), + text: Color::from_rgb(0.90, 0.90, 0.90), primary: Color::from_rgb( 0x5E as f32 / 255.0, 0x7C as f32 / 255.0, @@ -119,21 +123,17 @@ pub struct Group { impl Group { pub fn new(base: Color, background: Color, text: Color) -> Self { + let strong = if is_dark(base) { + lighten(base, 0.1) + } else { + darken(base, 0.1) + }; + Self { base, weak: mix(base, background, 0.4), - strong: if is_dark(background) { - lighten(base, 0.1) - } else { - darken(base, 0.1) - }, - text: if is_readable(base, text) { - text - } else if is_dark(text) { - Color::WHITE - } else { - Color::BLACK - }, + strong, + text: readable(strong, text), } } } @@ -184,8 +184,18 @@ fn lighten(color: Color, amount: f32) -> Color { from_hsl(hsl) } +fn readable(background: Color, text: Color) -> Color { + if is_readable(background, text) { + text + } else if is_dark(background) { + Color::WHITE + } else { + Color::BLACK + } +} + fn is_dark(color: Color) -> bool { - to_hsl(color).lightness < 0.5 + to_hsl(color).lightness < 0.6 } fn is_readable(a: Color, b: Color) -> bool { diff --git a/winit/src/application.rs b/winit/src/application.rs index 55fd9e73..12279bbb 100644 --- a/winit/src/application.rs +++ b/winit/src/application.rs @@ -504,7 +504,10 @@ pub fn build_user_interface<'a, A: Application>( renderer: &mut A::Renderer, size: Size, debug: &mut Debug, -) -> UserInterface<'a, A::Message, A::Renderer> { +) -> UserInterface<'a, A::Message, A::Renderer> +where + ::Theme: theme::Definition, +{ debug.view_started(); let view = application.view(); debug.view_finished(); -- cgit From 5a39dad506a1614fd0ccacb1f56e83acbaf4961a Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Thu, 26 May 2022 05:31:25 +0200 Subject: Tweak styling of `Slider` and improve contrast of `Background` --- style/src/theme.rs | 10 +++++----- style/src/theme/palette.rs | 24 +++++++++++------------- 2 files changed, 16 insertions(+), 18 deletions(-) diff --git a/style/src/theme.rs b/style/src/theme.rs index 1ddf97c3..cf939824 100644 --- a/style/src/theme.rs +++ b/style/src/theme.rs @@ -31,7 +31,7 @@ impl Theme { impl Default for Theme { fn default() -> Self { - Self::Dark + Self::Light } } @@ -145,10 +145,10 @@ impl slider::StyleSheet for Theme { }; slider::Style { - rail_colors: (palette.background.strong, palette.background.base), + rail_colors: (palette.primary.base, palette.background.base), handle: slider::Handle { color: palette.background.base, - border_color: palette.border, + border_color: palette.primary.base, ..handle }, } @@ -160,7 +160,7 @@ impl slider::StyleSheet for Theme { slider::Style { handle: slider::Handle { - color: palette.background.weak, + color: palette.primary.weak, ..active.handle }, ..active @@ -173,7 +173,7 @@ impl slider::StyleSheet for Theme { slider::Style { handle: slider::Handle { - color: palette.background.strong, + color: palette.primary.base, ..active.handle }, ..active diff --git a/style/src/theme/palette.rs b/style/src/theme/palette.rs index 0394700b..acc147ed 100644 --- a/style/src/theme/palette.rs +++ b/style/src/theme/palette.rs @@ -63,7 +63,6 @@ pub struct Extended { pub primary: Group, pub success: Group, pub danger: Group, - pub border: Color, } lazy_static! { @@ -91,7 +90,6 @@ impl Extended { palette.background, palette.text, ), - border: mix(palette.background, palette.text, 0.7), } } } @@ -107,8 +105,8 @@ impl Background { pub fn new(base: Color, text: Color) -> Self { Self { base, - weak: muted(base, 0.1), - strong: muted(base, 0.2), + weak: mix(base, text, 0.15), + strong: mix(base, text, 0.25), text, } } @@ -142,7 +140,7 @@ fn muted(color: Color, amount: f32) -> Color { let mut hsl = to_hsl(color); hsl.lightness = if is_dark(color) { - let delta = amount * (1.0 - hsl.lightness).powi(7); + let delta = amount * (1.0 - hsl.lightness).powi(5); hsl.lightness + delta } else { let delta = amount * hsl.lightness.powi(5); @@ -164,14 +162,6 @@ fn darken(color: Color, amount: f32) -> Color { from_hsl(hsl) } -fn mix(a: Color, b: Color, factor: f32) -> Color { - let a_lin = Srgb::from(a).into_linear(); - let b_lin = Srgb::from(b).into_linear(); - - let mixed = a_lin.mix(&b_lin, factor); - Srgb::from_linear(mixed).into() -} - fn lighten(color: Color, amount: f32) -> Color { let mut hsl = to_hsl(color); @@ -184,6 +174,14 @@ fn lighten(color: Color, amount: f32) -> Color { from_hsl(hsl) } +fn mix(a: Color, b: Color, factor: f32) -> Color { + let a_lin = Srgb::from(a).into_linear(); + let b_lin = Srgb::from(b).into_linear(); + + let mixed = a_lin.mix(&b_lin, factor); + Srgb::from_linear(mixed).into() +} + fn readable(background: Color, text: Color) -> Color { if is_readable(background, text) { text -- cgit From 3e8f4cdd138d3f927ce8a3ea451cbfcca52af0d9 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Thu, 26 May 2022 05:31:55 +0200 Subject: Add "Theming" section to the `tour` example --- examples/tour/src/main.rs | 70 ++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 60 insertions(+), 10 deletions(-) diff --git a/examples/tour/src/main.rs b/examples/tour/src/main.rs index c7ca8534..155592d5 100644 --- a/examples/tour/src/main.rs +++ b/examples/tour/src/main.rs @@ -7,7 +7,7 @@ use iced::theme; use iced::{ Button, Checkbox, Color, Column, Container, ContentFit, Element, Image, Length, Radio, Row, Sandbox, Scrollable, Settings, Slider, Space, Text, - TextInput, Toggler, + TextInput, Theme, Toggler, }; pub fn main() -> iced::Result { @@ -21,6 +21,7 @@ pub struct Tour { scroll: scrollable::State, back_button: button::State, next_button: button::State, + theme: Theme, debug: bool, } @@ -33,6 +34,7 @@ impl Sandbox for Tour { scroll: scrollable::State::new(), back_button: button::State::new(), next_button: button::State::new(), + theme: Theme::default(), debug: false, } } @@ -50,7 +52,8 @@ impl Sandbox for Tour { self.steps.advance(); } Message::StepMessage(step_msg) => { - self.steps.update(step_msg, &mut self.debug); + self.steps + .update(step_msg, &mut self.theme, &mut self.debug); } } } @@ -88,7 +91,7 @@ impl Sandbox for Tour { .max_width(540) .spacing(20) .padding(20) - .push(steps.view(self.debug).map(Message::StepMessage)) + .push(steps.view(self.theme, self.debug).map(Message::StepMessage)) .push(controls) .into(); @@ -106,6 +109,10 @@ impl Sandbox for Tour { .center_y() .into() } + + fn theme(&self) -> Theme { + self.theme + } } #[derive(Debug, Clone)] @@ -125,6 +132,7 @@ impl Steps { Steps { steps: vec![ Step::Welcome, + Step::Theming, Step::Slider { state: slider::State::new(), value: 50, @@ -138,7 +146,7 @@ impl Steps { size_slider: slider::State::new(), size: 30, color_sliders: [slider::State::new(); 3], - color: Color::BLACK, + color: Color::from_rgb(0.5, 0.5, 0.5), }, Step::Radio { selection: None }, Step::Toggler { @@ -162,12 +170,17 @@ impl Steps { } } - fn update(&mut self, msg: StepMessage, debug: &mut bool) { - self.steps[self.current].update(msg, debug); + fn update( + &mut self, + msg: StepMessage, + theme: &mut Theme, + debug: &mut bool, + ) { + self.steps[self.current].update(msg, theme, debug); } - fn view(&mut self, debug: bool) -> Element { - self.steps[self.current].view(debug) + fn view(&mut self, theme: Theme, debug: bool) -> Element { + self.steps[self.current].view(theme, debug) } fn advance(&mut self) { @@ -198,6 +211,7 @@ impl Steps { enum Step { Welcome, + Theming, Slider { state: slider::State, value: u8, @@ -236,6 +250,7 @@ enum Step { #[derive(Debug, Clone)] pub enum StepMessage { + ThemeSelected(Theme), SliderChanged(u8), LayoutChanged(Layout), SpacingChanged(u16), @@ -251,8 +266,16 @@ pub enum StepMessage { } impl<'a> Step { - fn update(&mut self, msg: StepMessage, debug: &mut bool) { + fn update( + &mut self, + msg: StepMessage, + theme: &mut Theme, + debug: &mut bool, + ) { match msg { + StepMessage::ThemeSelected(new_theme) => { + *theme = new_theme; + } StepMessage::DebugToggled(value) => { if let Step::Debugger = self { *debug = value; @@ -319,6 +342,7 @@ impl<'a> Step { fn title(&self) -> &str { match self { Step::Welcome => "Welcome", + Step::Theming => "Theming", Step::Radio { .. } => "Radio button", Step::Toggler { .. } => "Toggler", Step::Slider { .. } => "Slider", @@ -335,6 +359,7 @@ impl<'a> Step { fn can_continue(&self) -> bool { match self { Step::Welcome => true, + Step::Theming => true, Step::Radio { selection } => *selection == Some(Language::Rust), Step::Toggler { can_continue } => *can_continue, Step::Slider { .. } => true, @@ -348,9 +373,10 @@ impl<'a> Step { } } - fn view(&mut self, debug: bool) -> Element { + fn view(&mut self, theme: Theme, debug: bool) -> Element { match self { Step::Welcome => Self::welcome(), + Step::Theming => Self::theme(theme), Step::Radio { selection } => Self::radio(*selection), Step::Toggler { can_continue } => Self::toggler(*can_continue), Step::Slider { state, value } => Self::slider(state, *value), @@ -415,6 +441,30 @@ impl<'a> Step { )) } + fn theme(theme: Theme) -> Column<'a, StepMessage> { + let light_radio = Radio::new( + Theme::Light, + "Light", + Some(theme), + StepMessage::ThemeSelected, + ); + + let dark_radio = Radio::new( + Theme::Dark, + "Dark", + Some(theme), + StepMessage::ThemeSelected, + ); + + Self::container("Theming") + .push(Text::new( + "You can easily change the appearance of an application made \ + with Iced by selecting a different theme!", + )) + .push(light_radio) + .push(dark_radio) + } + fn slider( state: &'a mut slider::State, value: u8, -- cgit From 7f3b7075db68a215f4331b4bfba1c8ddd1c4d7f3 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Thu, 26 May 2022 19:02:15 +0200 Subject: Rename `theme::Definition` to `application::StyleSheet` --- glutin/src/application.rs | 6 +++--- native/src/lib.rs | 1 + native/src/program/state.rs | 6 +++--- native/src/user_interface.rs | 9 ++++++--- src/application.rs | 5 +++-- src/lib.rs | 4 ++-- src/pure.rs | 2 +- src/pure/application.rs | 5 +++-- style/src/application.rs | 7 +++++++ style/src/lib.rs | 1 + style/src/theme.rs | 9 ++------- winit/src/application.rs | 9 +++++---- 12 files changed, 37 insertions(+), 27 deletions(-) create mode 100644 style/src/application.rs diff --git a/glutin/src/application.rs b/glutin/src/application.rs index 7a5d78ea..5fce58be 100644 --- a/glutin/src/application.rs +++ b/glutin/src/application.rs @@ -2,6 +2,7 @@ use crate::mouse; use crate::{Error, Executor, Runtime}; +pub use iced_winit::application::StyleSheet; pub use iced_winit::Application; use iced_graphics::window; @@ -9,7 +10,6 @@ use iced_winit::application; use iced_winit::conversion; use iced_winit::futures; use iced_winit::futures::channel::mpsc; -use iced_winit::theme::{self, Definition as _}; use iced_winit::user_interface; use iced_winit::{Clipboard, Debug, Proxy, Settings}; @@ -26,7 +26,7 @@ where A: Application + 'static, E: Executor + 'static, C: window::GLCompositor + 'static, - ::Theme: theme::Definition, + ::Theme: StyleSheet, { use futures::task; use futures::Future; @@ -205,7 +205,7 @@ async fn run_instance( A: Application + 'static, E: Executor + 'static, C: window::GLCompositor + 'static, - ::Theme: theme::Definition, + ::Theme: StyleSheet, { use glutin::event; use iced_winit::futures::stream::StreamExt; diff --git a/native/src/lib.rs b/native/src/lib.rs index 948fdff0..2d0dd6ec 100644 --- a/native/src/lib.rs +++ b/native/src/lib.rs @@ -76,6 +76,7 @@ pub use iced_core::{ Rectangle, Size, Vector, }; pub use iced_futures::{executor, futures}; +pub use iced_style::application; pub use iced_style::theme; #[doc(no_inline)] diff --git a/native/src/program/state.rs b/native/src/program/state.rs index 0c133484..c881a64f 100644 --- a/native/src/program/state.rs +++ b/native/src/program/state.rs @@ -1,5 +1,5 @@ +use crate::application; use crate::mouse; -use crate::theme; use crate::user_interface::{self, UserInterface}; use crate::{Clipboard, Command, Debug, Event, Point, Program, Size}; @@ -20,7 +20,7 @@ where impl

State

where P: Program + 'static, - ::Theme: theme::Definition, + ::Theme: application::StyleSheet, { /// Creates a new [`State`] with the provided [`Program`], initializing its /// primitive with the given logical bounds and renderer. @@ -168,7 +168,7 @@ fn build_user_interface<'a, P: Program>( debug: &mut Debug, ) -> UserInterface<'a, P::Message, P::Renderer> where - ::Theme: theme::Definition, + ::Theme: application::StyleSheet, { debug.view_started(); let view = program.view(); diff --git a/native/src/user_interface.rs b/native/src/user_interface.rs index c8496112..26850f0a 100644 --- a/native/src/user_interface.rs +++ b/native/src/user_interface.rs @@ -1,9 +1,9 @@ //! Implement your own event loop to drive a user interface. +use crate::application; use crate::event::{self, Event}; use crate::layout; use crate::mouse; use crate::renderer; -use crate::theme::{self, Definition as _}; use crate::{Clipboard, Element, Layout, Point, Rectangle, Shell, Size}; /// A set of interactive graphical elements with a specific [`Layout`]. @@ -29,7 +29,7 @@ pub struct UserInterface<'a, Message, Renderer> { impl<'a, Message, Renderer> UserInterface<'a, Message, Renderer> where Renderer: crate::Renderer, - Renderer::Theme: theme::Definition, + Renderer::Theme: application::StyleSheet, { /// Builds a user interface for an [`Element`]. /// @@ -373,7 +373,10 @@ where renderer, theme, &renderer::Style { - text_color: theme.text_color(), + text_color: { + use application::StyleSheet; + theme.text_color() + }, }, Layout::new(&self.base), base_cursor, diff --git a/src/application.rs b/src/application.rs index 01571b56..b7c8cf9f 100644 --- a/src/application.rs +++ b/src/application.rs @@ -1,7 +1,8 @@ -use crate::theme; use crate::window; use crate::{Command, Element, Executor, Settings, Subscription}; +pub use iced_native::application::StyleSheet; + /// An interactive cross-platform application. /// /// This trait is the main entrypoint of Iced. Once implemented, you can run @@ -102,7 +103,7 @@ pub trait Application: Sized { type Message: std::fmt::Debug + Send; /// The theme of your [`Application`]. - type Theme: Default + theme::Definition; + type Theme: Default + StyleSheet; /// The data needed to initialize your [`Application`]. type Flags; diff --git a/src/lib.rs b/src/lib.rs index df40ad3e..277740f3 100644 --- a/src/lib.rs +++ b/src/lib.rs @@ -174,18 +174,18 @@ #![doc( html_logo_url = "https://raw.githubusercontent.com/iced-rs/iced/9ab6923e943f784985e9ef9ca28b10278297225d/docs/logo.svg" )] -#![deny(missing_docs)] +//#![deny(missing_docs)] #![deny(missing_debug_implementations)] #![deny(unused_results)] #![forbid(unsafe_code)] #![forbid(rust_2018_idioms)] #![cfg_attr(docsrs, feature(doc_cfg))] -mod application; mod element; mod error; mod result; mod sandbox; +pub mod application; pub mod clipboard; pub mod executor; pub mod keyboard; diff --git a/src/pure.rs b/src/pure.rs index b2b3ade7..1efacdf4 100644 --- a/src/pure.rs +++ b/src/pure.rs @@ -95,9 +95,9 @@ //! [the original widgets]: crate::widget //! [`button::State`]: crate::widget::button::State //! [impure `Application`]: crate::Application +pub mod application; pub mod widget; -mod application; mod sandbox; pub use application::Application; diff --git a/src/pure/application.rs b/src/pure/application.rs index 1306ab6c..4a7df13e 100644 --- a/src/pure/application.rs +++ b/src/pure/application.rs @@ -1,8 +1,9 @@ use crate::pure::{self, Pure}; -use crate::theme; use crate::window; use crate::{Command, Executor, Settings, Subscription}; +pub use iced_native::application::StyleSheet; + /// A pure version of [`Application`]. /// /// Unlike the impure version, the `view` method of this trait takes an @@ -23,7 +24,7 @@ pub trait Application: Sized { type Message: std::fmt::Debug + Send; /// The theme of your [`Application`]. - type Theme: Default + theme::Definition; + type Theme: Default + StyleSheet; /// The data needed to initialize your [`Application`]. type Flags; diff --git a/style/src/application.rs b/style/src/application.rs new file mode 100644 index 00000000..4aa950fb --- /dev/null +++ b/style/src/application.rs @@ -0,0 +1,7 @@ +use iced_core::Color; + +pub trait StyleSheet { + fn background_color(&self) -> Color; + + fn text_color(&self) -> Color; +} diff --git a/style/src/lib.rs b/style/src/lib.rs index d9c3259e..4a0a6a14 100644 --- a/style/src/lib.rs +++ b/style/src/lib.rs @@ -9,6 +9,7 @@ )] pub use iced_core::{Background, Color}; +pub mod application; pub mod button; pub mod checkbox; pub mod container; diff --git a/style/src/theme.rs b/style/src/theme.rs index cf939824..9cfbd1d5 100644 --- a/style/src/theme.rs +++ b/style/src/theme.rs @@ -2,6 +2,7 @@ mod palette; pub use self::palette::Palette; +use crate::application; use crate::button; use crate::slider; @@ -35,13 +36,7 @@ impl Default for Theme { } } -pub trait Definition { - fn background_color(&self) -> Color; - - fn text_color(&self) -> Color; -} - -impl Definition for Theme { +impl application::StyleSheet for Theme { fn background_color(&self) -> Color { let palette = self.extended_palette(); diff --git a/winit/src/application.rs b/winit/src/application.rs index 12279bbb..c7905c60 100644 --- a/winit/src/application.rs +++ b/winit/src/application.rs @@ -6,7 +6,6 @@ pub use state::State; use crate::clipboard::{self, Clipboard}; use crate::conversion; use crate::mouse; -use crate::theme::{self, Definition as _}; use crate::{ Command, Debug, Error, Executor, Mode, Proxy, Runtime, Settings, Size, Subscription, @@ -19,6 +18,8 @@ use iced_graphics::window; use iced_native::program::Program; use iced_native::user_interface::{self, UserInterface}; +pub use iced_native::application::StyleSheet; + use std::mem::ManuallyDrop; /// An interactive, native cross-platform application. @@ -109,7 +110,7 @@ where A: Application + 'static, E: Executor + 'static, C: window::Compositor + 'static, - ::Theme: theme::Definition, + ::Theme: StyleSheet, { use futures::task; use futures::Future; @@ -245,7 +246,7 @@ async fn run_instance( A: Application + 'static, E: Executor + 'static, C: window::Compositor + 'static, - ::Theme: theme::Definition, + ::Theme: StyleSheet, { use iced_futures::futures::stream::StreamExt; use winit::event; @@ -506,7 +507,7 @@ pub fn build_user_interface<'a, A: Application>( debug: &mut Debug, ) -> UserInterface<'a, A::Message, A::Renderer> where - ::Theme: theme::Definition, + ::Theme: StyleSheet, { debug.view_started(); let view = application.view(); -- cgit From cf0230072c01ea9523f4d98a3656f5c975b3f347 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Thu, 26 May 2022 23:07:34 +0200 Subject: Rename `Variant` to `Style` and `Style` to `Appearance` --- examples/component/src/main.rs | 2 -- examples/pure/component/src/main.rs | 4 --- native/src/widget/button.rs | 38 +++++++++++++------------ native/src/widget/slider.rs | 22 +++++++-------- pure/src/helpers.rs | 1 - pure/src/widget/button.rs | 15 ++++------ pure/src/widget/slider.rs | 12 ++++---- src/pure/widget.rs | 2 +- src/widget.rs | 2 +- style/src/button.rs | 26 ++++++++--------- style/src/slider.rs | 10 +++---- style/src/theme.rs | 56 ++++++++++++++++++------------------- 12 files changed, 91 insertions(+), 99 deletions(-) diff --git a/examples/component/src/main.rs b/examples/component/src/main.rs index d863c58f..ec7c658f 100644 --- a/examples/component/src/main.rs +++ b/examples/component/src/main.rs @@ -96,7 +96,6 @@ mod numeric_input { where Renderer: 'a + text::Renderer, Renderer::Theme: button::StyleSheet, - ::Variant: Default + Copy, { type Event = Event; @@ -175,7 +174,6 @@ mod numeric_input { Message: 'a, Renderer: text::Renderer + 'a, Renderer::Theme: button::StyleSheet, - ::Variant: Default + Copy, { fn from(numeric_input: NumericInput<'a, Message>) -> Self { component::view(numeric_input) diff --git a/examples/pure/component/src/main.rs b/examples/pure/component/src/main.rs index 2f98f768..2c065231 100644 --- a/examples/pure/component/src/main.rs +++ b/examples/pure/component/src/main.rs @@ -90,8 +90,6 @@ mod numeric_input { where Renderer: text::Renderer + 'static, Renderer::Theme: widget::button::StyleSheet, - ::Variant: - Default + Copy, { type State = (); type Event = Event; @@ -163,8 +161,6 @@ mod numeric_input { Message: 'a, Renderer: 'static + text::Renderer, Renderer::Theme: widget::button::StyleSheet, - ::Variant: - Default + Copy, { fn from(numeric_input: NumericInput) -> Self { pure::component(numeric_input) diff --git a/native/src/widget/button.rs b/native/src/widget/button.rs index 09c59cbe..d4e88424 100644 --- a/native/src/widget/button.rs +++ b/native/src/widget/button.rs @@ -12,7 +12,7 @@ use crate::{ Rectangle, Shell, Vector, Widget, }; -pub use iced_style::button::{Style, StyleSheet}; +pub use iced_style::button::{Appearance, StyleSheet}; /// A generic widget that produces a message when pressed. /// @@ -66,7 +66,7 @@ where width: Length, height: Length, padding: Padding, - variant: ::Variant, + style: ::Style, } impl<'a, Message, Renderer> Button<'a, Message, Renderer> @@ -74,7 +74,6 @@ where Message: Clone, Renderer: crate::Renderer, Renderer::Theme: StyleSheet, - ::Variant: Default, { /// Creates a new [`Button`] with some local [`State`] and the given /// content. @@ -89,7 +88,7 @@ where width: Length::Shrink, height: Length::Shrink, padding: Padding::new(5), - variant: ::Variant::default(), + style: Default::default(), } } @@ -118,12 +117,12 @@ where self } - /// Sets the style variant of this [`Button`]. + /// Sets the style of this [`Button`]. pub fn style( mut self, - variant: ::Variant, + style: ::Style, ) -> Self { - self.variant = variant; + self.style = style; self } } @@ -196,29 +195,34 @@ pub fn update<'a, Message: Clone>( } /// Draws a [`Button`]. -pub fn draw<'a, Renderer: crate::Renderer, Variant>( +pub fn draw<'a, Renderer: crate::Renderer>( renderer: &mut Renderer, bounds: Rectangle, cursor_position: Point, is_enabled: bool, - style_sheet: &dyn StyleSheet, - variation: Variant, + style_sheet: &dyn StyleSheet< + Style = ::Style, + >, + style: ::Style, state: impl FnOnce() -> &'a State, -) -> Style { +) -> Appearance +where + Renderer::Theme: StyleSheet, +{ let is_mouse_over = bounds.contains(cursor_position); let styling = if !is_enabled { - style_sheet.disabled(variation) + style_sheet.disabled(style) } else if is_mouse_over { let state = state(); if state.is_pressed { - style_sheet.pressed(variation) + style_sheet.pressed(style) } else { - style_sheet.hovered(variation) + style_sheet.hovered(style) } } else { - style_sheet.active(variation) + style_sheet.active(style) }; if styling.background.is_some() || styling.border_width > 0.0 { @@ -295,7 +299,6 @@ where Message: Clone, Renderer: crate::Renderer, Renderer::Theme: StyleSheet, - ::Variant: Copy, { fn width(&self) -> Length { self.width @@ -378,7 +381,7 @@ where cursor_position, self.on_press.is_some(), theme, - self.variant, + self.style, || &self.state, ); @@ -410,7 +413,6 @@ where Message: 'a + Clone, Renderer: 'a + crate::Renderer, Renderer::Theme: StyleSheet, - ::Variant: Copy, { fn from( button: Button<'a, Message, Renderer>, diff --git a/native/src/widget/slider.rs b/native/src/widget/slider.rs index f42bca28..7042e0ad 100644 --- a/native/src/widget/slider.rs +++ b/native/src/widget/slider.rs @@ -13,7 +13,7 @@ use crate::{ use std::ops::RangeInclusive; -pub use iced_style::slider::{Handle, HandleShape, Style, StyleSheet}; +pub use iced_style::slider::{Appearance, Handle, HandleShape, StyleSheet}; /// An horizontal bar and a handle that selects a single value from a range of /// values. @@ -53,7 +53,7 @@ where on_release: Option, width: Length, height: u16, - variant: ::Variant, + style: ::Style, } impl<'a, T, Message, Renderer> Slider<'a, T, Message, Renderer> @@ -105,7 +105,7 @@ where on_release: None, width: Length::Fill, height: Self::DEFAULT_HEIGHT, - variant: Default::default(), + style: Default::default(), } } @@ -135,9 +135,9 @@ where /// Sets the style of the [`Slider`]. pub fn style( mut self, - variant: impl Into<::Variant>, + style: impl Into<::Style>, ) -> Self { - self.variant = variant.into(); + self.style = style.into(); self } @@ -243,8 +243,8 @@ pub fn draw( state: &State, value: T, range: &RangeInclusive, - style_sheet: &dyn StyleSheet::Variant>, - variant: ::Variant, + style_sheet: &dyn StyleSheet