zng/
color.rs

Help
1//! Color and gradient types, functions, properties and macros.
2//!
3//! # Colors
4//!
5//! The example demonstrates multiple ways of declaring or selecting a color, all blue in this case.
6//!  
7//! ```
8//! use zng::prelude::*;
9//!
10//! fn sample(color: impl IntoVar<color::Rgba>) -> impl UiNode {
11//!     Wgt! {
12//!         layout::size = (100, 40);
13//!         widget::background_color = color;
14//!     }
15//! }
16//!
17//! # let _scope = APP.defaults();
18//! # let _ =
19//! Window! {
20//!     child = Stack!(top_to_bottom, 5, ui_vec![
21//!         sample(hex!(#00F)),
22//!         sample(rgb(0, 0, 255)),
23//!         sample(rgb(0.0, 0.0, 1.0)),
24//!         sample(colors::BLUE),
25//!         sample(hsv(240.deg(), 100.pct(), 100.pct())),
26//!         sample(hsl(240.deg(), 100.pct(), 50.pct())),
27//!     ]);
28//! }
29//! # ;
30//! ```
31//!
32//! The [`Rgba`] type also provides methods for basic color manipulation and mixing.
33//!
34//! ```
35//! # use zng::prelude::*;
36//! # fn sample(_: impl IntoVar<color::Rgba>) -> impl UiNode {
37//! # widget::node::NilUiNode
38//! # }
39//! # let _ = ui_vec![
40//! sample(colors::GREEN.darken(50.pct())),
41//! sample(colors::GREEN),
42//! sample(colors::GREEN.lighten(50.pct())),
43//! sample(colors::GREEN.desaturate(50.pct())),
44//! sample(colors::GREEN.with_alpha(50.pct()).mix_normal(colors::BLUE)),
45//! # ];
46//! ```
47//!
48//! Color mixing methods apply the color over the parameter, that is `foreground.mix_normal(background)`.
49//!
50//! # Color Filters
51//!
52//! The [`filter`] module provides implementation of pixel filter graphical effects that you may be
53//! familiar with from CSS.
54//!
55//! ```
56//! use zng::prelude::*;
57//!
58//! # let _scope = APP.defaults();
59//! # let _ =
60//! Window! {
61//!     clear_color = colors::BLACK.transparent();
62//!     color::filter::opacity = 50.pct();
63//!     child = Text!("translucent window");
64//! }
65//! # ;
66//! ```
67//!
68//! The example above applies [`filter::opacity`] on the window, making it translucent in view-process
69//! implementations that support transparent windows.
70//!
71//! [`filter::opacity`]: fn@filter::opacity
72//!
73//! # Gradients
74//!
75//! The [`gradient`] module provides implementation of linear, radial and conic gradients. Usually the
76//! gradient nodes are wrapped in some other property like [`widget::background_conic`], but they can be used directly.
77//!
78//! [`widget::background_conic`]: fn@crate::widget::background_conic
79//!
80//! ```
81//! use zng::prelude::*;
82//!
83//! # let _scope = APP.defaults();
84//! # let _ =
85//! Window! {
86//!     widget::background = color::gradient::conic_gradient(50.pct(), 45.deg(), color::gradient::stops![
87//!         colors::GREEN, (colors::RED, 30.pct()), colors::BLUE
88//!     ]);
89//!     // OR
90//!     widget::background_conic = {
91//!         center: 50.pct(),
92//!         angle: 45.deg(),
93//!         stops: color::gradient::stops![
94//!             colors::GREEN, (colors::RED, 30.pct()), colors::BLUE
95//!         ],
96//!     };
97//! }
98//! # ;
99//! ```
100//!
101//! See [`gradient::stops!`] for the macro syntax.
102//!
103//! # Full API
104//!
105//! See [`zng_color`], [`zng_wgt_filter`] and [`zng_wgt_fill`] for the full API.
106
107pub use zng_color::{
108    COLOR_SCHEME_VAR, ColorScheme, Hsla, Hsva, LerpSpace, LightDark, LightDarkVarExt, MixAdjust, MixBlendMode, PreMulRgba,
109    RenderMixBlendMode, Rgba, colors, hex, hsl, hsla, hsla_linear_sampler, hsla_sampler, hsv, hsva, lerp_space, light_dark, rgb, rgba,
110    rgba_sampler, web_colors, with_lerp_space,
111};
112
113pub use zng_wgt::{accent_color, base_color, color_scheme};
114
115pub use zng_wgt_fill::node::flood;
116
117/// Color filter types and properties.
118#[cfg(feature = "color_filter")]
119pub mod filter {
120    pub use zng_color::filter::{ColorMatrix, Filter, RenderFilter};
121
122    pub use zng_wgt_filter::{
123        backdrop_blur, backdrop_brightness, backdrop_color_matrix, backdrop_contrast, backdrop_filter, backdrop_grayscale,
124        backdrop_hue_rotate, backdrop_invert, backdrop_saturate, backdrop_sepia, blur, brightness, child_filter, child_mix_blend,
125        child_opacity, color_matrix, contrast, drop_shadow, filter, grayscale, hue_rotate, invert_color, mix_blend, opacity, saturate,
126        sepia,
127    };
128}
129
130/// Color gradient types and nodes.
131pub mod gradient {
132    pub use zng_color::gradient::{
133        ColorStop, ExtendMode, GradientRadius, GradientRadiusBase, GradientStop, GradientStops, LinearGradientAxis, RenderExtendMode,
134        RenderGradientStop, stops,
135    };
136
137    pub use zng_wgt_fill::node::{
138        ConicGradient, GradientBuilder, LinearGradient, RadialGradient, TiledConicGradient, TiledLinearGradient, TiledRadialGradient,
139        conic_gradient, gradient, linear_gradient, radial_gradient,
140    };
141}
zng/color.rs

zng/
color.rs
