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