gpui: Fix default colors blue, red, green to match in CSS default colors (#20851)

Jason Lee created 1 year ago

Release Notes:

- N/A

---

This change to let the default colors to 100% match with CSS default
colors.

And update the methods to as `const`.

Here is an example:

<img width="338" alt="image"
src="https://github.com/user-attachments/assets/dd17b46a-3ad4-4122-8dca-e800644c75b0">

https://codepen.io/huacnlee/pen/ZEgNXJZ

But the before version for example blue: `h: 0.6 * 360 = 216`, but we
expected `240`, `240 / 360 = 0.666666666`, so the before version are
lose the precision. (Here is a test tool: https://hslpicker.com/#0000FF)

## After Update

```bash
cargo run -p gpui --example hello_world
```

<img width="612" alt="image"
src="https://github.com/user-attachments/assets/97d479d8-9c71-4be3-95e0-09af45fe47e2">

Change summary

crates/gpui/examples/hello_world.rs | 19 +++++++++++++--
crates/gpui/src/color.rs            | 36 +++++++++++++++---------------
2 files changed, 34 insertions(+), 21 deletions(-)

Detailed changes

crates/gpui/examples/hello_world.rs

@@ -8,8 +8,10 @@ impl Render for HelloWorld {
     fn render(&mut self, _cx: &mut ViewContext<Self>) -> impl IntoElement {
         div()
             .flex()
-            .bg(rgb(0x2e7d32))
-            .size(Length::Definite(Pixels(300.0).into()))
+            .flex_col()
+            .gap_3()
+            .bg(rgb(0x505050))
+            .size(Length::Definite(Pixels(500.0).into()))
             .justify_center()
             .items_center()
             .shadow_lg()
@@ -18,12 +20,23 @@ impl Render for HelloWorld {
             .text_xl()
             .text_color(rgb(0xffffff))
             .child(format!("Hello, {}!", &self.text))
+            .child(
+                div()
+                    .flex()
+                    .gap_2()
+                    .child(div().size_8().bg(gpui::red()))
+                    .child(div().size_8().bg(gpui::green()))
+                    .child(div().size_8().bg(gpui::blue()))
+                    .child(div().size_8().bg(gpui::yellow()))
+                    .child(div().size_8().bg(gpui::black()))
+                    .child(div().size_8().bg(gpui::white())),
+            )
     }
 }
 
 fn main() {
     App::new().run(|cx: &mut AppContext| {
-        let bounds = Bounds::centered(None, size(px(300.0), px(300.0)), cx);
+        let bounds = Bounds::centered(None, size(px(500.), px(500.0)), cx);
         cx.open_window(
             WindowOptions {
                 window_bounds: Some(WindowBounds::Windowed(bounds)),

crates/gpui/src/color.rs

@@ -314,7 +314,7 @@ pub fn hsla(h: f32, s: f32, l: f32, a: f32) -> Hsla {
 }
 
 /// Pure black in [`Hsla`]
-pub fn black() -> Hsla {
+pub const fn black() -> Hsla {
     Hsla {
         h: 0.,
         s: 0.,
@@ -324,7 +324,7 @@ pub fn black() -> Hsla {
 }
 
 /// Transparent black in [`Hsla`]
-pub fn transparent_black() -> Hsla {
+pub const fn transparent_black() -> Hsla {
     Hsla {
         h: 0.,
         s: 0.,
@@ -334,7 +334,7 @@ pub fn transparent_black() -> Hsla {
 }
 
 /// Transparent black in [`Hsla`]
-pub fn transparent_white() -> Hsla {
+pub const fn transparent_white() -> Hsla {
     Hsla {
         h: 0.,
         s: 0.,
@@ -354,7 +354,7 @@ pub fn opaque_grey(lightness: f32, opacity: f32) -> Hsla {
 }
 
 /// Pure white in [`Hsla`]
-pub fn white() -> Hsla {
+pub const fn white() -> Hsla {
     Hsla {
         h: 0.,
         s: 0.,
@@ -364,7 +364,7 @@ pub fn white() -> Hsla {
 }
 
 /// The color red in [`Hsla`]
-pub fn red() -> Hsla {
+pub const fn red() -> Hsla {
     Hsla {
         h: 0.,
         s: 1.,
@@ -374,9 +374,9 @@ pub fn red() -> Hsla {
 }
 
 /// The color blue in [`Hsla`]
-pub fn blue() -> Hsla {
+pub const fn blue() -> Hsla {
     Hsla {
-        h: 0.6,
+        h: 0.6666666667,
         s: 1.,
         l: 0.5,
         a: 1.,
@@ -384,19 +384,19 @@ pub fn blue() -> Hsla {
 }
 
 /// The color green in [`Hsla`]
-pub fn green() -> Hsla {
+pub const fn green() -> Hsla {
     Hsla {
-        h: 0.33,
+        h: 0.3333333333,
         s: 1.,
-        l: 0.5,
+        l: 0.25,
         a: 1.,
     }
 }
 
 /// The color yellow in [`Hsla`]
-pub fn yellow() -> Hsla {
+pub const fn yellow() -> Hsla {
     Hsla {
-        h: 0.16,
+        h: 0.1666666667,
         s: 1.,
         l: 0.5,
         a: 1.,
@@ -410,32 +410,32 @@ impl Hsla {
     }
 
     /// The color red
-    pub fn red() -> Self {
+    pub const fn red() -> Self {
         red()
     }
 
     /// The color green
-    pub fn green() -> Self {
+    pub const fn green() -> Self {
         green()
     }
 
     /// The color blue
-    pub fn blue() -> Self {
+    pub const fn blue() -> Self {
         blue()
     }
 
     /// The color black
-    pub fn black() -> Self {
+    pub const fn black() -> Self {
         black()
     }
 
     /// The color white
-    pub fn white() -> Self {
+    pub const fn white() -> Self {
         white()
     }
 
     /// The color transparent black
-    pub fn transparent_black() -> Self {
+    pub const fn transparent_black() -> Self {
         transparent_black()
     }