1//! # Color
2//!
3//! The `color` crate provides a set utilities for working with colors. It is a wrapper around the [`palette`](https://docs.rs/palette) crate with some additional functionality.
4//!
5//! It is used to create a manipulate colors when building themes.
6//!
7//! === In development note ===
8//!
9//! This crate is meant to sit between gpui and the theme/ui for all the color related stuff.
10//!
11//! It could be folded into gpui, ui or theme potentially but for now we'll continue
12//! to develop it in isolation.
13//!
14//! Once we have a good idea of the needs of the theme system and color in gpui in general I see 3 paths:
15//! 1. Use `palette` (or another color library) directly in gpui and everywhere else, rather than rolling our own color system.
16//! 2. Keep this crate as a thin wrapper around `palette` and use it everywhere except gpui, and convert to gpui's color system when needed.
17//! 3. Build the needed functionality into gpui and keep using its color system everywhere.
18//!
19//! I'm leaning towards 2 in the short term and 1 in the long term, but we'll need to discuss it more.
20//!
21//! === End development note ===
22use palette::{
23 blend::Blend, convert::FromColorUnclamped, encoding, rgb::Rgb, Clamp, Mix, Srgb, WithAlpha,
24};
25
26/// The types of blend modes supported
27#[derive(Debug, Copy, Clone, PartialEq, Eq)]
28pub enum BlendMode {
29 /// Multiplies the colors, resulting in a darker color. This mode is useful for creating shadows.
30 Multiply,
31 /// Lightens the color by adding the source and destination colors. It results in a lighter color.
32 Screen,
33 /// Combines Multiply and Screen blend modes. Parts of the image that are lighter than 50% gray are lightened, and parts that are darker are darkened.
34 Overlay,
35 /// Selects the darker of the base or blend color as the resulting color. Useful for darkening images without affecting the overall contrast.
36 Darken,
37 /// Selects the lighter of the base or blend color as the resulting color. Useful for lightening images without affecting the overall contrast.
38 Lighten,
39 /// Brightens the base color to reflect the blend color. The result is a lightened image.
40 Dodge,
41 /// Darkens the base color to reflect the blend color. The result is a darkened image.
42 Burn,
43 /// Similar to Overlay, but with a stronger effect. Hard Light can either multiply or screen colors, depending on the blend color.
44 HardLight,
45 /// A softer version of Hard Light. Soft Light either darkens or lightens colors, depending on the blend color.
46 SoftLight,
47 /// Subtracts the darker of the two constituent colors from the lighter color. Difference mode is useful for creating more vivid colors.
48 Difference,
49 /// Similar to Difference, but with a lower contrast. Exclusion mode produces an effect similar to Difference but with less intensity.
50 Exclusion,
51}
52
53/// Converts a hexadecimal color string to a `palette::Hsla` color.
54///
55/// This function supports the following hex formats:
56/// `#RGB`, `#RGBA`, `#RRGGBB`, `#RRGGBBAA`.
57pub fn hex_to_hsla(s: &str) -> Result<RGBAColor, String> {
58 let hex = s.trim_start_matches('#');
59
60 // Expand shorthand formats #RGB and #RGBA to #RRGGBB and #RRGGBBAA
61 let h = hex.as_bytes();
62 let arr: [u8; 8] = match h.len() {
63 // #RGB => #RRGGBBAA
64 3 => [h[0], h[0], h[1], h[1], h[2], h[2], b'f', b'f'],
65 // #RGBA => #RRGGBBAA
66 4 => [h[0], h[0], h[1], h[1], h[2], h[2], h[3], h[3]],
67 // #RRGGBB => #RRGGBBAA
68 6 => [h[0], h[1], h[2], h[3], h[4], h[5], b'f', b'f'],
69 // Already in #RRGGBBAA
70 8 => h.try_into().unwrap(),
71 _ => return Err("Invalid hexadecimal string length".to_string()),
72 };
73
74 let hex =
75 std::str::from_utf8(&arr).map_err(|_| format!("Invalid hexadecimal string: {}", s))?;
76 let hex_val =
77 u32::from_str_radix(hex, 16).map_err(|_| format!("Invalid hexadecimal string: {}", s))?;
78
79 Ok(RGBAColor {
80 r: ((hex_val >> 24) & 0xFF) as f32 / 255.0,
81 g: ((hex_val >> 16) & 0xFF) as f32 / 255.0,
82 b: ((hex_val >> 8) & 0xFF) as f32 / 255.0,
83 a: (hex_val & 0xFF) as f32 / 255.0,
84 })
85}
86
87// These derives implement to and from palette's color types.
88#[derive(FromColorUnclamped, WithAlpha, Debug, Clone)]
89#[palette(skip_derives(Rgb), rgb_standard = "encoding::Srgb")]
90pub struct RGBAColor {
91 r: f32,
92 g: f32,
93 b: f32,
94 // Let Palette know this is our alpha channel.
95 #[palette(alpha)]
96 a: f32,
97}
98
99impl FromColorUnclamped<RGBAColor> for RGBAColor {
100 fn from_color_unclamped(color: RGBAColor) -> RGBAColor {
101 color
102 }
103}
104
105impl<S> FromColorUnclamped<Rgb<S, f32>> for RGBAColor
106where
107 Srgb: FromColorUnclamped<Rgb<S, f32>>,
108{
109 fn from_color_unclamped(color: Rgb<S, f32>) -> RGBAColor {
110 let srgb = Srgb::from_color_unclamped(color);
111 RGBAColor {
112 r: srgb.red,
113 g: srgb.green,
114 b: srgb.blue,
115 a: 1.0,
116 }
117 }
118}
119
120impl<S> FromColorUnclamped<RGBAColor> for Rgb<S, f32>
121where
122 Rgb<S, f32>: FromColorUnclamped<Srgb>,
123{
124 fn from_color_unclamped(color: RGBAColor) -> Self {
125 Self::from_color_unclamped(Srgb::new(color.r, color.g, color.b))
126 }
127}
128
129impl Clamp for RGBAColor {
130 fn clamp(self) -> Self {
131 RGBAColor {
132 r: self.r.min(1.0).max(0.0),
133 g: self.g.min(1.0).max(0.0),
134 b: self.b.min(1.0).max(0.0),
135 a: self.a.min(1.0).max(0.0),
136 }
137 }
138}
139
140impl RGBAColor {
141 /// Creates a new color from the given RGBA values.
142 ///
143 /// This color can be used to convert to any [`palette::Color`] type.
144 pub fn new(r: f32, g: f32, b: f32, a: f32) -> Self {
145 RGBAColor { r, g, b, a }
146 }
147
148 /// Returns a set of states for this color.
149 pub fn states(self, is_light: bool) -> ColorStates {
150 states_for_color(self, is_light)
151 }
152
153 /// Mixes this color with another [`palette::Hsl`] color at the given `mix_ratio`.
154 pub fn mixed(&self, other: RGBAColor, mix_ratio: f32) -> Self {
155 let srgb_self = Srgb::new(self.r, self.g, self.b);
156 let srgb_other = Srgb::new(other.r, other.g, other.b);
157
158 // Directly mix the colors as sRGB values
159 let mixed = srgb_self.mix(srgb_other, mix_ratio);
160 RGBAColor::from_color_unclamped(mixed)
161 }
162
163 pub fn blend(&self, other: RGBAColor, blend_mode: BlendMode) -> Self {
164 let srgb_self = Srgb::new(self.r, self.g, self.b);
165 let srgb_other = Srgb::new(other.r, other.g, other.b);
166
167 let blended = match blend_mode {
168 // replace hsl methods with the respective sRGB methods
169 BlendMode::Multiply => srgb_self.multiply(srgb_other),
170 _ => unimplemented!(),
171 };
172
173 Self {
174 r: blended.red,
175 g: blended.green,
176 b: blended.blue,
177 a: self.a,
178 }
179 }
180}
181
182/// A set of colors for different states of an element.
183#[derive(Debug, Clone)]
184pub struct ColorStates {
185 /// The default color.
186 pub default: RGBAColor,
187 /// The color when the mouse is hovering over the element.
188 pub hover: RGBAColor,
189 /// The color when the mouse button is held down on the element.
190 pub active: RGBAColor,
191 /// The color when the element is focused with the keyboard.
192 pub focused: RGBAColor,
193 /// The color when the element is disabled.
194 pub disabled: RGBAColor,
195}
196
197/// Returns a set of colors for different states of an element.
198///
199/// todo("This should take a theme and use appropriate colors from it")
200pub fn states_for_color(color: RGBAColor, is_light: bool) -> ColorStates {
201 let adjustment_factor = if is_light { 0.1 } else { -0.1 };
202 let hover_adjustment = 1.0 - adjustment_factor;
203 let active_adjustment = 1.0 - 2.0 * adjustment_factor;
204 let focused_adjustment = 1.0 - 3.0 * adjustment_factor;
205 let disabled_adjustment = 1.0 - 4.0 * adjustment_factor;
206
207 let make_adjustment = |color: RGBAColor, adjustment: f32| -> RGBAColor {
208 // Adjust lightness for each state
209 // Note: Adjustment logic may differ; simplify as needed for sRGB
210 RGBAColor::new(
211 color.r * adjustment,
212 color.g * adjustment,
213 color.b * adjustment,
214 color.a,
215 )
216 };
217
218 let color = color.clamp();
219
220 ColorStates {
221 default: color.clone(),
222 hover: make_adjustment(color.clone(), hover_adjustment),
223 active: make_adjustment(color.clone(), active_adjustment),
224 focused: make_adjustment(color.clone(), focused_adjustment),
225 disabled: make_adjustment(color.clone(), disabled_adjustment),
226 }
227}