Custom styling

[hecrj]

Fixes #112, closes #102, and closes #93.

This PR implements basic custom styling support for Container, TextInput, Button, Scrollable, Slider, ProgressBar, Radio, and Checkbox.

Renderer-agnostic styles

Custom styling is opt-in. Widgets will use a default style unless a custom style is explicitly set using the new style methods.

The Style of each widget is defined by the renderer implementation as an associated type.
This makes styling renderer-agnostic. For instance, a sprite-based renderer could decide to simply not support background colors or borders and use enums instead.

A new subcrate: iced_style

The style attributes that are supported by iced_wgpu (and in the near future iced_web) have been gathered in a new subcrate: iced_style.

For now, the custom styling in iced takes a dynamic approach. A StyleSheet trait exists for every widget and it defines the Style of the widget in different states. This trait can be implemented by users and then provided to the style method of a particular widget. Many of the examples now showcase this approach.

It is important to note that, in iced, anything that can affect layout is not considered "style" . For instance, specifying a font or text size is not considered styling. This means that your whole layout will stay consistent independently of your style sheets!

In any case, this is just meant to lay the foundations for custom styling! We will definitely need to extend each widget style attributes and maybe change strategies as we learn about more use cases.

Relevant changes

A Defaults type has been added to iced_wgpu. This type is meant to be leveraged to allow for style inheritance. For instance, a Container can set some text color and all the Text inside will be affected unless the Text itself defines a color of its own.

Moreover, the Quad primitive in iced_wgpu now supports a border_width and border_color. Also, a bug has been fixed where color was incorrectly blended when the border_radius was 0.

Finally, a styling example has been added. It showcases a simple way to use different themes in the same GUI by creating a style module and a Theme enum. It would be great to extend this example with more themes. It may also be interesting to offer some built-in themes in iced_style at some point.

Pending work

• Write missing documentation
• Reenable deny(missing_docs)

[piaoger]

Just about the theme itself: it seems that some widgets in back theme are not very clear. Maybe adding border or ....

[hecrj]

@piaoger Keep in mind that this is not a built-in theme or anything. All the styling is defined in this particular example. It was meant to showcase how you can basically change style completely.

In any case, I agree they are not very clear. It should be fixed now! I've also updated the GIF. Let me know :)

[piaoger]

@piaoger Keep in mind that this is not a built-in theme or anything. All the styling is defined in this particular example. It was meant to showcase how you can basically change style completely.

In any case, I agree they are not very clear. It should be fixed now! I've also updated the GIF. Let me know :)

HAHA 👍
Also adding border for Scrollable? :)

[JakubKoralewski]

This is awesome. Will this allow theoretically in the future to have something resembling the CSS transform property with rotations and translations?

[hecrj]

@JakubKoralewski The CSS transform property affects the layout, so it would not currently be considered styling. As of now, styling only can affect the appearance of widgets.

[JakubKoralewski]

I don't want to go too off-topic here, but my OCD does... not.. allow...

@JakubKoralewski The CSS transform property affects the layout.

According to w3 most of the time the transform property does not affect layout:

For elements whose layout is governed by the CSS box model, the transform property does not affect the flow of the content surrounding the transformed element

It just rotates, skews, translates etc. without taking layout into account at all. With this knowledge now, would that be possible 😄 ?

[hecrj]

@JakubKoralewski It does affect the layout (position and boundaries) of the element you are transforming and its contents. As a consequence, there are other systems besides rendering that need to be aware of this transformation.

Custom styling is currently just a way to configure rendering on a per widget basis.