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

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">
This commit is contained in:
Jason Lee 2024-11-28 16:08:07 +08:00 committed by GitHub
parent 461ab24a06
commit e9e260776b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 34 additions and 21 deletions

View file

@ -8,8 +8,10 @@ impl Render for HelloWorld {
fn render(&mut self, _cx: &mut ViewContext<Self>) -> impl IntoElement { fn render(&mut self, _cx: &mut ViewContext<Self>) -> impl IntoElement {
div() div()
.flex() .flex()
.bg(rgb(0x2e7d32)) .flex_col()
.size(Length::Definite(Pixels(300.0).into())) .gap_3()
.bg(rgb(0x505050))
.size(Length::Definite(Pixels(500.0).into()))
.justify_center() .justify_center()
.items_center() .items_center()
.shadow_lg() .shadow_lg()
@ -18,12 +20,23 @@ impl Render for HelloWorld {
.text_xl() .text_xl()
.text_color(rgb(0xffffff)) .text_color(rgb(0xffffff))
.child(format!("Hello, {}!", &self.text)) .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() { fn main() {
App::new().run(|cx: &mut AppContext| { 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( cx.open_window(
WindowOptions { WindowOptions {
window_bounds: Some(WindowBounds::Windowed(bounds)), window_bounds: Some(WindowBounds::Windowed(bounds)),

View file

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