freya_elements/_docs/
color_syntax.rs

1//! ### Color syntax
2//!
3//! The attributes that have colors as values can use the following syntax:
4//!
5//! #### Static colors
6//! - `red`
7//! - `blue`
8//! - `green`
9//! - `yellow`
10//! - `black` (default for `color` attribute)
11//! - `gray`
12//! - `white` (default for `background` attribute)
13//! - `orange`
14//! - `transparent`
15//!
16//! #### rgb() / hsl() / Hex
17//!
18//! - With RGB: `rgb(150, 60, 20)`
19//! - With RGB and alpha: `rgb(150, 60, 20, 0.7)`
20//!     - You can also use 0-255 for the alpha: `rgb(150, 60, 20, 70)`
21//! - With HSL: `hsl(28deg, 80%, 50%)`
22//! - With HSL and alpha: `hsl(28deg, 80%, 50%, 25%)`
23//! - With Hex: `#E93323`
24//!
25//! #### Gradients
26//!
27//! Syntax is `<type>-gradient(<angle>, ...[<color> <offset>],)`
28//!
29//! And supported types are `linear`/`radial`/`conic`
30//!
31//! Examples:
32//! - Linear: `linear-gradient(250deg, orange 15%, rgb(255, 0, 0) 50%, rgb(255, 192, 203) 80%)`
33//! - Radial: `radial-gradient(orange 15%, rgb(255, 0, 0) 50%, rgb(255, 192, 203) 80%)`
34//! - Conic: `conic-gradient(250deg, orange 15%, rgb(255, 0, 0) 50%, rgb(255, 192, 203) 80%)`
35//!
36//! #### SVG
37//!
38//! For the `svg` element you can also use:
39//!
40//! - `current_color`: Use the inherited color from the `color` attribute.