freya_elements/attributes/style_attributes.rs
1use crate::def_attribute;
2
3def_attribute!(
4 /// Specify a color as the background of an element.
5 ///
6 /// You can learn about the syntax of this attribute in [`Color Syntax`](crate::_docs::color_syntax).
7 ///
8 /// ### Example
9 ///
10 /// ```rust, no_run
11 /// # use freya::prelude::*;
12 /// fn app() -> Element {
13 /// rsx!(
14 /// rect {
15 /// background: "red"
16 /// }
17 /// )
18 /// }
19 /// ```
20 background,
21
22 /// Specify the opacity of an element's background color.
23 ///
24 /// ### Example
25 ///
26 /// ```rust, no_run
27 /// # use freya::prelude::*;
28 /// fn app() -> Element {
29 /// rsx!(
30 /// rect {
31 /// background: "red",
32 /// background_opacity: "0.5"
33 /// }
34 /// )
35 /// }
36 /// ```
37 background_opacity,
38
39 /// Specify borders for an element.
40 ///
41 /// The `border` attribute follows this syntax:
42 /// border: `<width(s)> <alignment> <fill>`
43 ///
44 /// Width specification follows CSS-like patterns:
45 /// - Single value: Applied to all sides
46 /// - Two values: First for top/bottom, second for left/right
47 /// - Three values: First for top, second for left/right, third for bottom
48 /// - Four values: Top, right, bottom, left (clockwise from top)
49 ///
50 /// Alignment must be one of:
51 /// - `inner`: Border drawn inside the element bounds
52 /// - `outer`: Border drawn outside the element bounds
53 /// - `center` (default): Border centered on the element bounds
54 ///
55 /// *Border alignment* determines how the border is positioned relative to the element's edge. Alignment can be `inner`, `outer`, or `center`.
56 ///
57 /// Note: Borders exist outside the layout system, which means they will be drawn underneath child elements and may overlap with adjacent elements.
58 /// Add appropriate padding or margin to prevent border overlap with other content.
59 ///
60 /// ### Examples
61 ///
62 /// A solid, black border with a width of 2 pixels on every side. Border is aligned to the inside of the rect's edge.
63 ///
64 /// ```rust, no_run
65 /// # use freya::prelude::*;
66 /// fn app() -> Element {
67 /// rsx!(
68 /// rect {
69 /// border: "2 inner black",
70 /// }
71 /// )
72 /// }
73 /// ```
74 ///
75 /// A solid, red border with different widths on each side. Border is aligned to the center of the rect's edge.
76 ///
77 /// ```rust, no_run
78 /// # use freya::prelude::*;
79 /// fn app() -> Element {
80 /// rsx!(
81 /// rect {
82 /// border: "1 2 3 4 center red",
83 /// }
84 /// )
85 /// }
86 /// ```
87 ///
88 /// Borders can take any valid fill type, including gradients.
89 ///
90 /// ```rust, no_run
91 /// # use freya::prelude::*;
92 /// fn app() -> Element {
93 /// rsx!(
94 /// rect {
95 /// border: "1 inner linear-gradient(red, green, yellow 40%, blue)",
96 /// }
97 /// )
98 /// }
99 /// ```
100 ///
101 /// Similarly to the `shadow` attribute, multiple borders can be drawn on a single element when separated by a comma. Borders specified later in the list are drawn on top of previous ones.
102 ///
103 /// ```rust, no_run
104 /// # use freya::prelude::*;
105 /// fn app() -> Element {
106 /// rsx!(
107 /// rect {
108 /// border: "6 outer red, 5 outer orange, 4 outer yellow, 3 outer green, 2 outer blue, 1 outer purple",
109 /// }
110 /// )
111 /// }
112 /// ```
113 border,
114
115 /// Draw a shadow of the element.
116 ///
117 /// The `shadow` attribute follows this syntax:
118 /// shadow: `<x> <y> <intensity> <size> <color>`
119 ///
120 /// - `x` and `y`: Define the offset position of the shadow
121 /// - `intensity`: Controls the shadow's blur amount
122 /// - `size`: Specifies the shadow's size/spread
123 /// - `color`: Any valid color value for the shadow
124 ///
125 /// ### Example
126 ///
127 /// ```rust, no_run
128 /// # use freya::prelude::*;
129 /// fn app() -> Element {
130 /// rsx!(
131 /// rect {
132 /// shadow: "0 0 25 2 rgb(0, 0, 0, 120)"
133 /// }
134 /// )
135 /// }
136 /// ```
137 shadow,
138
139 /// Round the corners of an element by a specified radius.
140 ///
141 /// The `corner_radius` attribute follows this syntax:
142 /// corner_radius: `<all> | <tl-tr> <bl-br> | <tl> <tr> <br> <bl>`
143 ///
144 /// - Single value: Applied to all corners
145 /// - Two values: First for top-left & top-right, second for bottom-left & bottom-right
146 /// - Four values: Top-left, top-right, bottom-right, bottom-left (clockwise from top-left)
147 ///
148 /// This creates rounded corners on rectangular elements like rects or buttons.
149 ///
150 /// ### Example
151 ///
152 /// ```rust, no_run
153 /// # use freya::prelude::*;
154 /// fn app() -> Element {
155 /// rsx!(
156 /// rect {
157 /// corner_radius: "10" // All corners
158 /// }
159 /// )
160 /// }
161 /// ```
162 ///
163 /// ```rust, no_run
164 /// # use freya::prelude::*;
165 /// fn app() -> Element {
166 /// rsx!(
167 /// rect {
168 /// corner_radius: "10 5" // 10 for top corners, 5 for bottom corners
169 /// }
170 /// )
171 /// }
172 /// ```
173 ///
174 /// ```rust, no_run
175 /// # use freya::prelude::*;
176 /// fn app() -> Element {
177 /// rsx!(
178 /// rect {
179 /// corner_radius: "10 20 30 40" // Different radius for each corner
180 /// }
181 /// )
182 /// }
183 /// ```
184 corner_radius,
185
186 /// Control the smoothing effect for rounded corners to create a "squircle" effect.
187 ///
188 /// Higher values create more of a squircle shape (rounded square), while lower values
189 /// result in a more traditionally rounded corner.
190 ///
191 /// ### Example
192 ///
193 /// ```rust, no_run
194 /// # use freya::prelude::*;
195 /// fn app() -> Element {
196 /// rsx!(
197 /// rect {
198 /// corner_radius: "10",
199 /// corner_smoothing: "75%"
200 /// }
201 /// )
202 /// }
203 /// ```
204 corner_smoothing,
205);