Skip to main content

guise/theme/
css.rs

1//! CSS-style color literals: a runtime parser and constructor functions that
2//! produce gpui [`Hsla`] (which carries alpha). Backs the [`color!`] macro.
3//!
4//! Supported notations:
5//! - hex — `#rgb`, `#rgba`, `#rrggbb`, `#rrggbbaa`
6//! - `rgb(r, g, b)` / `rgba(r, g, b, a)` — channels `0..=255` (or `%`), alpha `0..=1` (or `%`)
7//! - `hsl(h, s%, l%)` / `hsla(h, s%, l%, a)` — hue degrees, sat/lum percent
8//! - CSS named colors — `red`, `teal`, `rebeccapurple`, …
9//!
10//! [`color!`]: crate::color
11
12use std::fmt;
13
14use gpui::{Hsla, Rgba};
15
16/// Returned when a CSS color string can't be parsed.
17#[derive(Debug, Clone, PartialEq, Eq)]
18pub struct CssColorError(String);
19
20impl fmt::Display for CssColorError {
21  fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
22    write!(f, "guise: invalid CSS color `{}`", self.0)
23  }
24}
25
26impl std::error::Error for CssColorError {}
27
28// --- Constructors (also the macro's expansion targets) ---------------------
29
30fn rgba_f(r: f32, g: f32, b: f32, a: f32) -> Hsla {
31  Rgba {
32    r: (r / 255.0).clamp(0.0, 1.0),
33    g: (g / 255.0).clamp(0.0, 1.0),
34    b: (b / 255.0).clamp(0.0, 1.0),
35    a: a.clamp(0.0, 1.0),
36  }
37  .into()
38}
39
40/// An opaque color from 8-bit channels.
41pub fn rgb(r: u8, g: u8, b: u8) -> Hsla {
42  rgba(r, g, b, 1.0)
43}
44
45/// A color from 8-bit channels plus alpha in `0.0..=1.0`.
46pub fn rgba(r: u8, g: u8, b: u8, a: f32) -> Hsla {
47  rgba_f(r as f32, g as f32, b as f32, a)
48}
49
50/// An opaque color from hue (degrees) and saturation/lightness (`0..=100`).
51pub fn hsl(h: f32, s: f32, l: f32) -> Hsla {
52  hsla(h, s, l, 1.0)
53}
54
55/// A color from hue (degrees), saturation/lightness (`0..=100`), and alpha.
56pub fn hsla(h: f32, s: f32, l: f32, a: f32) -> Hsla {
57  Hsla {
58    h: (h / 360.0).rem_euclid(1.0),
59    s: (s / 100.0).clamp(0.0, 1.0),
60    l: (l / 100.0).clamp(0.0, 1.0),
61    a: a.clamp(0.0, 1.0),
62  }
63}
64
65// --- Parser ----------------------------------------------------------------
66
67/// Parse a CSS color string into an [`Hsla`].
68pub fn css(input: &str) -> Result<Hsla, CssColorError> {
69  let err = || CssColorError(input.to_string());
70  let s = input.trim();
71
72  if let Some(hex) = s.strip_prefix('#') {
73    return parse_hex(hex).ok_or_else(err);
74  }
75  let lower = s.to_ascii_lowercase();
76  if let Some(inner) = wrapped(&lower, "rgba").or_else(|| wrapped(&lower, "rgb")) {
77    return parse_rgb(inner).ok_or_else(err);
78  }
79  if let Some(inner) = wrapped(&lower, "hsla").or_else(|| wrapped(&lower, "hsl")) {
80    return parse_hsl(inner).ok_or_else(err);
81  }
82  named(&lower).map(|(r, g, b)| rgb(r, g, b)).ok_or_else(err)
83}
84
85/// Strip a `name( … )` wrapper, returning the inner argument text.
86fn wrapped<'a>(s: &'a str, name: &str) -> Option<&'a str> {
87  let rest = s.strip_prefix(name)?.trim_start();
88  let rest = rest.strip_prefix('(')?;
89  rest.strip_suffix(')')
90}
91
92fn nibble(b: u8) -> Option<u8> {
93  match b {
94    b'0'..=b'9' => Some(b - b'0'),
95    b'a'..=b'f' => Some(b - b'a' + 10),
96    b'A'..=b'F' => Some(b - b'A' + 10),
97    _ => None,
98  }
99}
100
101fn hex2(bytes: &[u8], i: usize) -> Option<f32> {
102  Some((nibble(bytes[i])? * 16 + nibble(bytes[i + 1])?) as f32)
103}
104
105fn parse_hex(hex: &str) -> Option<Hsla> {
106  let b = hex.as_bytes();
107  match b.len() {
108    3 => Some(rgba_f(
109      (nibble(b[0])? * 17) as f32,
110      (nibble(b[1])? * 17) as f32,
111      (nibble(b[2])? * 17) as f32,
112      1.0,
113    )),
114    4 => Some(rgba_f(
115      (nibble(b[0])? * 17) as f32,
116      (nibble(b[1])? * 17) as f32,
117      (nibble(b[2])? * 17) as f32,
118      (nibble(b[3])? * 17) as f32 / 255.0,
119    )),
120    6 => Some(rgba_f(hex2(b, 0)?, hex2(b, 2)?, hex2(b, 4)?, 1.0)),
121    8 => Some(rgba_f(
122      hex2(b, 0)?,
123      hex2(b, 2)?,
124      hex2(b, 4)?,
125      hex2(b, 6)? / 255.0,
126    )),
127    _ => None,
128  }
129}
130
131fn tokens(inner: &str) -> Vec<&str> {
132  inner
133    .split([',', ' ', '/'])
134    .filter(|t| !t.is_empty())
135    .collect()
136}
137
138fn num(tok: &str) -> Option<f32> {
139  tok.trim().parse().ok()
140}
141
142/// A color channel: `0..=255` or a percentage of 255.
143fn channel(tok: &str) -> Option<f32> {
144  let t = tok.trim();
145  match t.strip_suffix('%') {
146    Some(p) => Some(num(p)? / 100.0 * 255.0),
147    None => num(t),
148  }
149}
150
151/// An alpha value: `0..=1` or a percentage.
152fn alpha(tok: &str) -> Option<f32> {
153  let t = tok.trim();
154  match t.strip_suffix('%') {
155    Some(p) => Some(num(p)? / 100.0),
156    None => num(t),
157  }
158}
159
160fn parse_rgb(inner: &str) -> Option<Hsla> {
161  let parts = tokens(inner);
162  let a = match parts.len() {
163    3 => 1.0,
164    4 => alpha(parts[3])?,
165    _ => return None,
166  };
167  Some(rgba_f(
168    channel(parts[0])?,
169    channel(parts[1])?,
170    channel(parts[2])?,
171    a,
172  ))
173}
174
175fn parse_hsl(inner: &str) -> Option<Hsla> {
176  let parts = tokens(inner);
177  let a = match parts.len() {
178    3 => 1.0,
179    4 => alpha(parts[3])?,
180    _ => return None,
181  };
182  let h = num(parts[0].trim().trim_end_matches("deg"))?;
183  let s = num(parts[1].trim().trim_end_matches('%'))?;
184  let l = num(parts[2].trim().trim_end_matches('%'))?;
185  Some(hsla(h, s, l, a))
186}
187
188/// The standard CSS named colors.
189fn named(name: &str) -> Option<(u8, u8, u8)> {
190  let rgb = match name {
191    "transparent" => return Some((0, 0, 0)),
192    "aliceblue" => (240, 248, 255),
193    "antiquewhite" => (250, 235, 215),
194    "aqua" | "cyan" => (0, 255, 255),
195    "aquamarine" => (127, 255, 212),
196    "azure" => (240, 255, 255),
197    "beige" => (245, 245, 220),
198    "bisque" => (255, 228, 196),
199    "black" => (0, 0, 0),
200    "blanchedalmond" => (255, 235, 205),
201    "blue" => (0, 0, 255),
202    "blueviolet" => (138, 43, 226),
203    "brown" => (165, 42, 42),
204    "burlywood" => (222, 184, 135),
205    "cadetblue" => (95, 158, 160),
206    "chartreuse" => (127, 255, 0),
207    "chocolate" => (210, 105, 30),
208    "coral" => (255, 127, 80),
209    "cornflowerblue" => (100, 149, 237),
210    "cornsilk" => (255, 248, 220),
211    "crimson" => (220, 20, 60),
212    "darkblue" => (0, 0, 139),
213    "darkcyan" => (0, 139, 139),
214    "darkgoldenrod" => (184, 134, 11),
215    "darkgray" | "darkgrey" => (169, 169, 169),
216    "darkgreen" => (0, 100, 0),
217    "darkkhaki" => (189, 183, 107),
218    "darkmagenta" => (139, 0, 139),
219    "darkolivegreen" => (85, 107, 47),
220    "darkorange" => (255, 140, 0),
221    "darkorchid" => (153, 50, 204),
222    "darkred" => (139, 0, 0),
223    "darksalmon" => (233, 150, 122),
224    "darkseagreen" => (143, 188, 143),
225    "darkslateblue" => (72, 61, 139),
226    "darkslategray" | "darkslategrey" => (47, 79, 79),
227    "darkturquoise" => (0, 206, 209),
228    "darkviolet" => (148, 0, 211),
229    "deeppink" => (255, 20, 147),
230    "deepskyblue" => (0, 191, 255),
231    "dimgray" | "dimgrey" => (105, 105, 105),
232    "dodgerblue" => (30, 144, 255),
233    "firebrick" => (178, 34, 34),
234    "floralwhite" => (255, 250, 240),
235    "forestgreen" => (34, 139, 34),
236    "fuchsia" | "magenta" => (255, 0, 255),
237    "gainsboro" => (220, 220, 220),
238    "ghostwhite" => (248, 248, 255),
239    "gold" => (255, 215, 0),
240    "goldenrod" => (218, 165, 32),
241    "gray" | "grey" => (128, 128, 128),
242    "green" => (0, 128, 0),
243    "greenyellow" => (173, 255, 47),
244    "honeydew" => (240, 255, 240),
245    "hotpink" => (255, 105, 180),
246    "indianred" => (205, 92, 92),
247    "indigo" => (75, 0, 130),
248    "ivory" => (255, 255, 240),
249    "khaki" => (240, 230, 140),
250    "lavender" => (230, 230, 250),
251    "lavenderblush" => (255, 240, 245),
252    "lawngreen" => (124, 252, 0),
253    "lemonchiffon" => (255, 250, 205),
254    "lightblue" => (173, 216, 230),
255    "lightcoral" => (240, 128, 128),
256    "lightcyan" => (224, 255, 255),
257    "lightgoldenrodyellow" => (250, 250, 210),
258    "lightgray" | "lightgrey" => (211, 211, 211),
259    "lightgreen" => (144, 238, 144),
260    "lightpink" => (255, 182, 193),
261    "lightsalmon" => (255, 160, 122),
262    "lightseagreen" => (32, 178, 170),
263    "lightskyblue" => (135, 206, 250),
264    "lightslategray" | "lightslategrey" => (119, 136, 153),
265    "lightsteelblue" => (176, 196, 222),
266    "lightyellow" => (255, 255, 224),
267    "lime" => (0, 255, 0),
268    "limegreen" => (50, 205, 50),
269    "linen" => (250, 240, 230),
270    "maroon" => (128, 0, 0),
271    "mediumaquamarine" => (102, 205, 170),
272    "mediumblue" => (0, 0, 205),
273    "mediumorchid" => (186, 85, 211),
274    "mediumpurple" => (147, 112, 219),
275    "mediumseagreen" => (60, 179, 113),
276    "mediumslateblue" => (123, 104, 238),
277    "mediumspringgreen" => (0, 250, 154),
278    "mediumturquoise" => (72, 209, 204),
279    "mediumvioletred" => (199, 21, 133),
280    "midnightblue" => (25, 25, 112),
281    "mintcream" => (245, 255, 250),
282    "mistyrose" => (255, 228, 225),
283    "moccasin" => (255, 228, 181),
284    "navajowhite" => (255, 222, 173),
285    "navy" => (0, 0, 128),
286    "oldlace" => (253, 245, 230),
287    "olive" => (128, 128, 0),
288    "olivedrab" => (107, 142, 35),
289    "orange" => (255, 165, 0),
290    "orangered" => (255, 69, 0),
291    "orchid" => (218, 112, 214),
292    "palegoldenrod" => (238, 232, 170),
293    "palegreen" => (152, 251, 152),
294    "paleturquoise" => (175, 238, 238),
295    "palevioletred" => (219, 112, 147),
296    "papayawhip" => (255, 239, 213),
297    "peachpuff" => (255, 218, 185),
298    "peru" => (205, 133, 63),
299    "pink" => (255, 192, 203),
300    "plum" => (221, 160, 221),
301    "powderblue" => (176, 224, 230),
302    "purple" => (128, 0, 128),
303    "rebeccapurple" => (102, 51, 153),
304    "red" => (255, 0, 0),
305    "rosybrown" => (188, 143, 143),
306    "royalblue" => (65, 105, 225),
307    "saddlebrown" => (139, 69, 19),
308    "salmon" => (250, 128, 114),
309    "sandybrown" => (244, 164, 96),
310    "seagreen" => (46, 139, 87),
311    "seashell" => (255, 245, 238),
312    "sienna" => (160, 82, 45),
313    "silver" => (192, 192, 192),
314    "skyblue" => (135, 206, 235),
315    "slateblue" => (106, 90, 205),
316    "slategray" | "slategrey" => (112, 128, 144),
317    "snow" => (255, 250, 250),
318    "springgreen" => (0, 255, 127),
319    "steelblue" => (70, 130, 180),
320    "tan" => (210, 180, 140),
321    "teal" => (0, 128, 128),
322    "thistle" => (216, 191, 216),
323    "tomato" => (255, 99, 71),
324    "turquoise" => (64, 224, 208),
325    "violet" => (238, 130, 238),
326    "wheat" => (245, 222, 179),
327    "white" => (255, 255, 255),
328    "whitesmoke" => (245, 245, 245),
329    "yellow" => (255, 255, 0),
330    "yellowgreen" => (154, 205, 50),
331    _ => return None,
332  };
333  Some(rgb)
334}
335
336#[cfg(test)]
337mod tests {
338  use super::*;
339
340  #[test]
341  fn hex_forms() {
342    assert_eq!(css("#228be6").unwrap(), rgb(0x22, 0x8b, 0xe6));
343    assert!(css("228be6").is_err()); // needs the leading '#'
344    assert_eq!(css("#fff").unwrap(), rgb(255, 255, 255));
345    assert_eq!(
346      css("#ff000080").unwrap(),
347      rgba(255, 0, 0, 0x80 as f32 / 255.0)
348    );
349  }
350
351  #[test]
352  fn functional_forms() {
353    assert_eq!(css("rgb(34, 139, 230)").unwrap(), rgb(34, 139, 230));
354    assert_eq!(css("rgba(0,0,0,0.5)").unwrap(), rgba(0, 0, 0, 0.5));
355    assert_eq!(css("hsl(210, 80%, 52%)").unwrap(), hsl(210.0, 80.0, 52.0));
356    assert_eq!(
357      css("hsla(210,80%,52%,0.5)").unwrap(),
358      hsla(210.0, 80.0, 52.0, 0.5)
359    );
360  }
361
362  #[test]
363  fn named_colors() {
364    assert_eq!(css("teal").unwrap(), rgb(0, 128, 128));
365    assert_eq!(css("RebeccaPurple").unwrap(), rgb(102, 51, 153));
366    assert!(css("notacolor").is_err());
367  }
368}