From 8c9f3a7322ee2be43859e6cc7976e08433382c54 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Mon, 15 Jan 2024 17:01:07 -0500 Subject: [PATCH 1/4] init color crate --- Cargo.lock | 76 +++++++++++++++++++++++- crates/color/Cargo.toml | 32 +++++++++++ crates/color/src/color.rs | 118 ++++++++++++++++++++++++++++++++++++++ crates/zed/Cargo.toml | 1 + 4 files changed, 225 insertions(+), 2 deletions(-) create mode 100644 crates/color/Cargo.toml create mode 100644 crates/color/src/color.rs diff --git a/Cargo.lock b/Cargo.lock index 056fab49cd576915fca5443922b0f094591237e1..1b0c6e4bb97ebc9fb8ce9615729fb370a5b18a34 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -1580,6 +1580,28 @@ dependencies = [ "rustc-hash", ] +[[package]] +name = "color" +version = "0.1.0" +dependencies = [ + "anyhow", + "fs", + "indexmap 1.9.3", + "itertools 0.11.0", + "palette", + "parking_lot 0.11.2", + "refineable", + "schemars", + "serde", + "serde_derive", + "serde_json", + "settings", + "story", + "toml 0.5.11", + "util", + "uuid 1.4.1", +] + [[package]] name = "color_quant" version = "1.1.0" @@ -4976,6 +4998,7 @@ dependencies = [ "approx", "fast-srgb8", "palette_derive", + "phf", ] [[package]] @@ -5164,6 +5187,48 @@ dependencies = [ "indexmap 2.0.0", ] +[[package]] +name = "phf" +version = "0.11.2" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "ade2d8b8f33c7333b51bcf0428d37e217e9f32192ae4772156f65063b8ce03dc" +dependencies = [ + "phf_macros", + "phf_shared", +] + +[[package]] +name = "phf_generator" +version = "0.11.2" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "48e4cc64c2ad9ebe670cb8fd69dd50ae301650392e81c05f9bfcb2d5bdbc24b0" +dependencies = [ + "phf_shared", + "rand 0.8.5", +] + +[[package]] +name = "phf_macros" +version = "0.11.2" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "3444646e286606587e49f3bcf1679b8cef1dc2c5ecc29ddacaffc305180d464b" +dependencies = [ + "phf_generator", + "phf_shared", + "proc-macro2", + "quote", + "syn 2.0.37", +] + +[[package]] +name = "phf_shared" +version = "0.11.2" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "90fcb95eef784c2ac79119d1dd819e162b5da872ce6f3c3abe1e8ca1c082f72b" +dependencies = [ + "siphasher 0.3.11", +] + [[package]] name = "picker" version = "0.1.0" @@ -7073,6 +7138,12 @@ version = "0.2.3" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "0b8de496cf83d4ed58b6be86c3a275b8602f6ffe98d3024a869e124147a9a3ac" +[[package]] +name = "siphasher" +version = "0.3.11" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "38b58827f4464d87d377d175e90bf58eb00fd8716ff0a62f80356b5e61555d0d" + [[package]] name = "slab" version = "0.4.9" @@ -7643,7 +7714,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "9c536faaff1a10837cfe373142583f6e27d81e96beba339147e77b67c9f260ff" dependencies = [ "float-cmp", - "siphasher", + "siphasher 0.2.3", ] [[package]] @@ -8857,7 +8928,7 @@ dependencies = [ "roxmltree", "rustybuzz", "simplecss", - "siphasher", + "siphasher 0.2.3", "svgtypes", "ttf-parser 0.12.3", "unicode-bidi", @@ -9649,6 +9720,7 @@ dependencies = [ "client", "collab_ui", "collections", + "color", "command_palette", "copilot", "copilot_ui", diff --git a/crates/color/Cargo.toml b/crates/color/Cargo.toml new file mode 100644 index 0000000000000000000000000000000000000000..c6416f9691b3ca417c1f7426ace5359c199be88b --- /dev/null +++ b/crates/color/Cargo.toml @@ -0,0 +1,32 @@ +[package] +name = "color" +version = "0.1.0" +edition = "2021" +publish = false + +[features] +default = [] +stories = ["dep:itertools", "dep:story"] + +[lib] +path = "src/color.rs" +doctest = true + +[dependencies] +# TODO: Clean up dependencies +anyhow.workspace = true +fs = { path = "../fs" } +indexmap = "1.6.2" +parking_lot.workspace = true +refineable.workspace = true +schemars.workspace = true +serde.workspace = true +serde_derive.workspace = true +serde_json.workspace = true +settings = { path = "../settings" } +story = { path = "../story", optional = true } +toml.workspace = true +uuid.workspace = true +util = { path = "../util" } +itertools = { version = "0.11.0", optional = true } +palette = "0.7.3" diff --git a/crates/color/src/color.rs b/crates/color/src/color.rs new file mode 100644 index 0000000000000000000000000000000000000000..77818eb7b8f76c23cc9b05e31402ad04a89aeca3 --- /dev/null +++ b/crates/color/src/color.rs @@ -0,0 +1,118 @@ +//! # Color +//! +//! 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. +//! +//! It is used to create a manipulate colors when building themes. +//! +//! **Note:** This crate does not depend on `gpui`, so it does not provide any +//! interfaces for converting to `gpui` style colors. + +use palette::{FromColor, Hsl, Hsla, Mix, Srgba, WithAlpha}; + +#[derive(Debug, Copy, Clone, PartialEq, Eq)] +pub enum BlendMode { + Multiply, + Screen, + Overlay, + Darken, + Lighten, + Dodge, + Burn, + HardLight, + SoftLight, + Difference, + Exclusion, +} + +/// Creates a new [`palette::Hsl`] color. +pub fn hsl(h: f32, s: f32, l: f32) -> Hsl { + Hsl::new_srgb(h, s, l) +} + +/// Converts a hexadecimal color string to a `palette::Hsla` color. +/// +/// This function supports the following hex formats: +/// `#RGB`, `#RGBA`, `#RRGGBB`, `#RRGGBBAA`. +pub fn hex_to_hsla(s: &str) -> Result { + let hex = s.trim_start_matches('#'); + + // Expand shorthand formats #RGB and #RGBA to #RRGGBB and #RRGGBBAA + let hex = match hex.len() { + 3 => hex + .chars() + .map(|c| c.to_string().repeat(2)) + .collect::(), + 4 => { + let (rgb, alpha) = hex.split_at(3); + let rgb = rgb + .chars() + .map(|c| c.to_string().repeat(2)) + .collect::(); + let alpha = alpha.chars().next().unwrap().to_string().repeat(2); + format!("{}{}", rgb, alpha) + } + 6 => format!("{}ff", hex), // Add alpha if missing + 8 => hex.to_string(), // Already in full format + _ => return Err("Invalid hexadecimal string length".to_string()), + }; + + let hex_val = + u32::from_str_radix(&hex, 16).map_err(|_| format!("Invalid hexadecimal string: {}", s))?; + + let r = ((hex_val >> 24) & 0xFF) as f32 / 255.0; + let g = ((hex_val >> 16) & 0xFF) as f32 / 255.0; + let b = ((hex_val >> 8) & 0xFF) as f32 / 255.0; + let a = (hex_val & 0xFF) as f32 / 255.0; + + let srgba = Srgba::new(r, g, b, a); + let hsl = Hsl::from_color(srgba); + let hsla = Hsla::from(hsl).with_alpha(a); + + Ok(hsla) +} + +/// Mixes two [`palette::Hsl`] colors at the given `mix_ratio`. +pub fn hsl_mix(hsla_1: Hsl, hsla_2: Hsl, mix_ratio: f32) -> Hsl { + hsla_1.mix(hsla_2, mix_ratio).into() +} + +/// Represents a color +/// An interstitial state used to provide a consistent API for colors +/// with additional functionality like color mixing, blending, etc. +/// +/// Does not return [gpui] colors as the `color` crate does not +/// depend on [gpui]. +#[derive(Debug, Copy, Clone)] +pub struct Color { + value: Hsla, +} + +impl Color { + /// Creates a new [`Color`] + pub fn new(hue: f32, saturation: f32, lightness: f32) -> Self { + let hsl = hsl(hue, saturation, lightness); + + Self { value: hsl.into() } + } + + /// Creates a new [`Color`] with an alpha value. + pub fn from_hsla(hue: f32, saturation: f32, lightness: f32, alpha: f32) -> Self { + Self { + value: Hsla::new(hue, saturation, lightness, alpha), + } + } + + /// Returns the [`palette::Hsla`] value of this color. + pub fn value(&self) -> Hsla { + self.value + } + + /// Mixes this color with another [`palette::Hsl`] color at the given `mix_ratio`. + pub fn mix(&self, other: Hsl, mix_ratio: f32) -> Self { + let mixed = self.value.mix(other.into(), mix_ratio); + + Self { + value: mixed.into(), + } + } +} diff --git a/crates/zed/Cargo.toml b/crates/zed/Cargo.toml index 734c225cb1e610c64dab92112accad9634632fee..1e21648408e4855e74cf4f411bc287345bac2bee 100644 --- a/crates/zed/Cargo.toml +++ b/crates/zed/Cargo.toml @@ -29,6 +29,7 @@ command_palette = { path = "../command_palette" } # component_test = { path = "../component_test" } client = { path = "../client" } # clock = { path = "../clock" } +color = { path = "../color" } copilot = { path = "../copilot" } copilot_ui = { path = "../copilot_ui" } diagnostics = { path = "../diagnostics" } From bdb06f183b09a15340c9a83221432d54fc10a41a Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Tue, 16 Jan 2024 00:07:06 -0500 Subject: [PATCH 2/4] Add a rudimentary state color builder --- Cargo.lock | 1 + crates/color/src/color.rs | 57 +++++++++++++++++++++++++++++++++------ crates/theme/Cargo.toml | 1 + crates/theme/src/theme.rs | 7 +++++ 4 files changed, 58 insertions(+), 8 deletions(-) diff --git a/Cargo.lock b/Cargo.lock index 1b0c6e4bb97ebc9fb8ce9615729fb370a5b18a34..728fc695ac0891bb20f06a70d6c35ee2dfe65876 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -7925,6 +7925,7 @@ name = "theme" version = "0.1.0" dependencies = [ "anyhow", + "color", "fs", "gpui", "indexmap 1.9.3", diff --git a/crates/color/src/color.rs b/crates/color/src/color.rs index 77818eb7b8f76c23cc9b05e31402ad04a89aeca3..8a7f3f17525cd097dfb4072c43b83675f54323c3 100644 --- a/crates/color/src/color.rs +++ b/crates/color/src/color.rs @@ -88,25 +88,28 @@ pub struct Color { } impl Color { - /// Creates a new [`Color`] - pub fn new(hue: f32, saturation: f32, lightness: f32) -> Self { - let hsl = hsl(hue, saturation, lightness); - - Self { value: hsl.into() } - } - /// Creates a new [`Color`] with an alpha value. - pub fn from_hsla(hue: f32, saturation: f32, lightness: f32, alpha: f32) -> Self { + pub fn new(hue: f32, saturation: f32, lightness: f32, alpha: f32) -> Self { Self { value: Hsla::new(hue, saturation, lightness, alpha), } } + /// Creates a new [`Color`] with an alpha value of `1.0`. + pub fn hsl(hue: f32, saturation: f32, lightness: f32) -> Self { + Self::new(hue, saturation, lightness, 1.0) + } + /// Returns the [`palette::Hsla`] value of this color. pub fn value(&self) -> Hsla { self.value } + /// Returns a set of states for this color. + pub fn states(&self, is_light: bool) -> ColorStates { + states_for_color(*self, is_light) + } + /// Mixes this color with another [`palette::Hsl`] color at the given `mix_ratio`. pub fn mix(&self, other: Hsl, mix_ratio: f32) -> Self { let mixed = self.value.mix(other.into(), mix_ratio); @@ -116,3 +119,41 @@ impl Color { } } } + +/// A set of colors for different states of an element. +#[derive(Debug, Copy, Clone)] +pub struct ColorStates { + /// The default color. + pub default: Color, + /// The color when the mouse is hovering over the element. + pub hover: Color, + /// The color when the mouse button is held down on the element. + pub active: Color, + /// The color when the element is focused with the keyboard. + pub focused: Color, + /// The color when the element is disabled. + pub disabled: Color, +} + +/// Returns a set of colors for different states of an element. +/// +/// todo!("Test and improve this function") +pub fn states_for_color(color: Color, is_light: bool) -> ColorStates { + let hover_lightness = if is_light { 0.9 } else { 0.1 }; + let active_lightness = if is_light { 0.8 } else { 0.2 }; + let focused_lightness = if is_light { 0.7 } else { 0.3 }; + let disabled_lightness = if is_light { 0.6 } else { 0.5 }; + + let hover = color.mix(hsl(0.0, 0.0, hover_lightness), 0.1); + let active = color.mix(hsl(0.0, 0.0, active_lightness), 0.1); + let focused = color.mix(hsl(0.0, 0.0, focused_lightness), 0.1); + let disabled = color.mix(hsl(0.0, 0.0, disabled_lightness), 0.1); + + ColorStates { + default: color, + hover, + active, + focused, + disabled, + } +} diff --git a/crates/theme/Cargo.toml b/crates/theme/Cargo.toml index 1c30176b25b41130b79ccbc8879167fe34275895..428bcaac10b76501c78a772652f44370d4a74156 100644 --- a/crates/theme/Cargo.toml +++ b/crates/theme/Cargo.toml @@ -34,6 +34,7 @@ story = { path = "../story", optional = true } toml.workspace = true uuid.workspace = true util = { path = "../util" } +color = {path = "../color"} itertools = { version = "0.11.0", optional = true } [dev-dependencies] diff --git a/crates/theme/src/theme.rs b/crates/theme/src/theme.rs index f8d90b7bdc823b0b52348fe94908454002616347..c40d7c8ceb2a1d99b1e7b97f7efb0b18b9bea48f 100644 --- a/crates/theme/src/theme.rs +++ b/crates/theme/src/theme.rs @@ -147,3 +147,10 @@ pub fn color_alpha(color: Hsla, alpha: f32) -> Hsla { color.a = alpha; color } + +pub fn to_gpui_hsla(color: color::Color) -> gpui::Hsla { + let hsla = color.value(); + let hue: f32 = hsla.hue.into(); + + gpui::hsla(hue / 360.0, hsla.saturation, hsla.lightness, hsla.alpha) +} From dde0056845d31e1bcc60feb28e63622502017e0a Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Tue, 16 Jan 2024 01:08:17 -0500 Subject: [PATCH 3/4] Use srgb, get mix and blend working --- crates/color/src/color.rs | 160 +++++++++++++++++++++++++------------- crates/theme/src/theme.rs | 7 -- 2 files changed, 107 insertions(+), 60 deletions(-) diff --git a/crates/color/src/color.rs b/crates/color/src/color.rs index 8a7f3f17525cd097dfb4072c43b83675f54323c3..d3d832099af16d85f2afd0e5e6551bca966618c6 100644 --- a/crates/color/src/color.rs +++ b/crates/color/src/color.rs @@ -7,7 +7,9 @@ //! **Note:** This crate does not depend on `gpui`, so it does not provide any //! interfaces for converting to `gpui` style colors. -use palette::{FromColor, Hsl, Hsla, Mix, Srgba, WithAlpha}; +use palette::{ + blend::Blend, convert::FromColorUnclamped, encoding, rgb::Rgb, Clamp, Mix, Srgb, WithAlpha, +}; #[derive(Debug, Copy, Clone, PartialEq, Eq)] pub enum BlendMode { @@ -24,16 +26,11 @@ pub enum BlendMode { Exclusion, } -/// Creates a new [`palette::Hsl`] color. -pub fn hsl(h: f32, s: f32, l: f32) -> Hsl { - Hsl::new_srgb(h, s, l) -} - /// Converts a hexadecimal color string to a `palette::Hsla` color. /// /// This function supports the following hex formats: /// `#RGB`, `#RGBA`, `#RRGGBB`, `#RRGGBBAA`. -pub fn hex_to_hsla(s: &str) -> Result { +pub fn hex_to_hsla(s: &str) -> Result { let hex = s.trim_start_matches('#'); // Expand shorthand formats #RGB and #RGBA to #RRGGBB and #RRGGBBAA @@ -64,64 +61,112 @@ pub fn hex_to_hsla(s: &str) -> Result { let b = ((hex_val >> 8) & 0xFF) as f32 / 255.0; let a = (hex_val & 0xFF) as f32 / 255.0; - let srgba = Srgba::new(r, g, b, a); - let hsl = Hsl::from_color(srgba); - let hsla = Hsla::from(hsl).with_alpha(a); + let color = Color { r, g, b, a }; - Ok(hsla) + Ok(color) } -/// Mixes two [`palette::Hsl`] colors at the given `mix_ratio`. -pub fn hsl_mix(hsla_1: Hsl, hsla_2: Hsl, mix_ratio: f32) -> Hsl { - hsla_1.mix(hsla_2, mix_ratio).into() +// This implements conversion to and from all Palette colors. +#[derive(FromColorUnclamped, WithAlpha, Debug, Clone)] +// We have to tell Palette that we will take care of converting to/from sRGB. +#[palette(skip_derives(Rgb), rgb_standard = "encoding::Srgb")] +pub struct Color { + r: f32, + g: f32, + b: f32, + // Let Palette know this is our alpha channel. + #[palette(alpha)] + a: f32, } -/// Represents a color -/// An interstitial state used to provide a consistent API for colors -/// with additional functionality like color mixing, blending, etc. -/// -/// Does not return [gpui] colors as the `color` crate does not -/// depend on [gpui]. -#[derive(Debug, Copy, Clone)] -pub struct Color { - value: Hsla, +// There's no blanket implementation for Self -> Self, unlike the From trait. +// This is to better allow cases like Self -> Self. +impl FromColorUnclamped for Color { + fn from_color_unclamped(color: Color) -> Color { + color + } } -impl Color { - /// Creates a new [`Color`] with an alpha value. - pub fn new(hue: f32, saturation: f32, lightness: f32, alpha: f32) -> Self { - Self { - value: Hsla::new(hue, saturation, lightness, alpha), +// Convert from any kind of f32 sRGB. +impl FromColorUnclamped> for Color +where + Srgb: FromColorUnclamped>, +{ + fn from_color_unclamped(color: Rgb) -> Color { + let srgb = Srgb::from_color_unclamped(color); + Color { + r: srgb.red, + g: srgb.green, + b: srgb.blue, + a: 1.0, } } +} + +// Convert into any kind of f32 sRGB. +impl FromColorUnclamped for Rgb +where + Rgb: FromColorUnclamped, +{ + fn from_color_unclamped(color: Color) -> Self { + let srgb = Srgb::new(color.r, color.g, color.b); + Self::from_color_unclamped(srgb) + } +} - /// Creates a new [`Color`] with an alpha value of `1.0`. - pub fn hsl(hue: f32, saturation: f32, lightness: f32) -> Self { - Self::new(hue, saturation, lightness, 1.0) +// Add the required clamping. +impl Clamp for Color { + fn clamp(self) -> Self { + Color { + r: self.r.min(1.0).max(0.0), + g: self.g.min(1.0).max(0.0), + b: self.b.min(1.0).max(0.0), + a: self.a.min(1.0).max(0.0), + } } +} - /// Returns the [`palette::Hsla`] value of this color. - pub fn value(&self) -> Hsla { - self.value +impl Color { + pub fn new(r: f32, g: f32, b: f32, a: f32) -> Self { + Color { r, g, b, a } } /// Returns a set of states for this color. - pub fn states(&self, is_light: bool) -> ColorStates { - states_for_color(*self, is_light) + pub fn states(self, is_light: bool) -> ColorStates { + states_for_color(self, is_light) } /// Mixes this color with another [`palette::Hsl`] color at the given `mix_ratio`. - pub fn mix(&self, other: Hsl, mix_ratio: f32) -> Self { - let mixed = self.value.mix(other.into(), mix_ratio); + pub fn mixed(&self, other: Color, mix_ratio: f32) -> Self { + let srgb_self = Srgb::new(self.r, self.g, self.b); + let srgb_other = Srgb::new(other.r, other.g, other.b); + + // Directly mix the colors as sRGB values + let mixed = srgb_self.mix(srgb_other, mix_ratio); + Color::from_color_unclamped(mixed) + } + + pub fn blend(&self, other: Color, blend_mode: BlendMode) -> Self { + let srgb_self = Srgb::new(self.r, self.g, self.b); + let srgb_other = Srgb::new(other.r, other.g, other.b); + + let blended = match blend_mode { + // replace hsl methods with the respective sRGB methods + BlendMode::Multiply => srgb_self.multiply(srgb_other), + _ => unimplemented!(), + }; Self { - value: mixed.into(), + r: blended.red, + g: blended.green, + b: blended.blue, + a: self.a, } } } /// A set of colors for different states of an element. -#[derive(Debug, Copy, Clone)] +#[derive(Debug, Clone)] pub struct ColorStates { /// The default color. pub default: Color, @@ -139,21 +184,30 @@ pub struct ColorStates { /// /// todo!("Test and improve this function") pub fn states_for_color(color: Color, is_light: bool) -> ColorStates { - let hover_lightness = if is_light { 0.9 } else { 0.1 }; - let active_lightness = if is_light { 0.8 } else { 0.2 }; - let focused_lightness = if is_light { 0.7 } else { 0.3 }; - let disabled_lightness = if is_light { 0.6 } else { 0.5 }; + let adjustment_factor = if is_light { 0.1 } else { -0.1 }; + let hover_adjustment = 1.0 - adjustment_factor; + let active_adjustment = 1.0 - 2.0 * adjustment_factor; + let focused_adjustment = 1.0 - 3.0 * adjustment_factor; + let disabled_adjustment = 1.0 - 4.0 * adjustment_factor; + + let make_adjustment = |color: Color, adjustment: f32| -> Color { + // Adjust lightness for each state + // Note: Adjustment logic may differ; simplify as needed for sRGB + Color::new( + color.r * adjustment, + color.g * adjustment, + color.b * adjustment, + color.a, + ) + }; - let hover = color.mix(hsl(0.0, 0.0, hover_lightness), 0.1); - let active = color.mix(hsl(0.0, 0.0, active_lightness), 0.1); - let focused = color.mix(hsl(0.0, 0.0, focused_lightness), 0.1); - let disabled = color.mix(hsl(0.0, 0.0, disabled_lightness), 0.1); + let color = color.clamp(); ColorStates { - default: color, - hover, - active, - focused, - disabled, + default: color.clone(), + hover: make_adjustment(color.clone(), hover_adjustment), + active: make_adjustment(color.clone(), active_adjustment), + focused: make_adjustment(color.clone(), focused_adjustment), + disabled: make_adjustment(color.clone(), disabled_adjustment), } } diff --git a/crates/theme/src/theme.rs b/crates/theme/src/theme.rs index c40d7c8ceb2a1d99b1e7b97f7efb0b18b9bea48f..f8d90b7bdc823b0b52348fe94908454002616347 100644 --- a/crates/theme/src/theme.rs +++ b/crates/theme/src/theme.rs @@ -147,10 +147,3 @@ pub fn color_alpha(color: Hsla, alpha: f32) -> Hsla { color.a = alpha; color } - -pub fn to_gpui_hsla(color: color::Color) -> gpui::Hsla { - let hsla = color.value(); - let hue: f32 = hsla.hue.into(); - - gpui::hsla(hue / 360.0, hsla.saturation, hsla.lightness, hsla.alpha) -} From 4cdcac1b16da71692802cf72c1b2abab41f5e58e Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Wed, 17 Jan 2024 11:39:09 -0500 Subject: [PATCH 4/4] Update docs --- crates/color/src/color.rs | 93 ++++++++++++++++++++++++--------------- 1 file changed, 57 insertions(+), 36 deletions(-) diff --git a/crates/color/src/color.rs b/crates/color/src/color.rs index d3d832099af16d85f2afd0e5e6551bca966618c6..8529f3bc5feea6b3248875e412914dc24b39a4b5 100644 --- a/crates/color/src/color.rs +++ b/crates/color/src/color.rs @@ -4,25 +4,49 @@ //! //! It is used to create a manipulate colors when building themes. //! -//! **Note:** This crate does not depend on `gpui`, so it does not provide any -//! interfaces for converting to `gpui` style colors. - +//! === In development note === +//! +//! This crate is meant to sit between gpui and the theme/ui for all the color related stuff. +//! +//! It could be folded into gpui, ui or theme potentially but for now we'll continue +//! to develop it in isolation. +//! +//! Once we have a good idea of the needs of the theme system and color in gpui in general I see 3 paths: +//! 1. Use `palette` (or another color library) directly in gpui and everywhere else, rather than rolling our own color system. +//! 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. +//! 3. Build the needed functionality into gpui and keep using it's color system everywhere. +//! +//! I'm leaning towards 2 in the short term and 1 in the long term, but we'll need to discuss it more. +//! +//! === End development note === use palette::{ blend::Blend, convert::FromColorUnclamped, encoding, rgb::Rgb, Clamp, Mix, Srgb, WithAlpha, }; +/// The types of blend modes supported #[derive(Debug, Copy, Clone, PartialEq, Eq)] pub enum BlendMode { + /// Multiplies the colors, resulting in a darker color. This mode is useful for creating shadows. Multiply, + /// Lightens the color by adding the source and destination colors. It results in a lighter color. Screen, + /// 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. Overlay, + /// Selects the darker of the base or blend color as the resulting color. Useful for darkening images without affecting the overall contrast. Darken, + /// Selects the lighter of the base or blend color as the resulting color. Useful for lightening images without affecting the overall contrast. Lighten, + /// Brightens the base color to reflect the blend color. The result is a lightened image. Dodge, + /// Darkens the base color to reflect the blend color. The result is a darkened image. Burn, + /// Similar to Overlay, but with a stronger effect. Hard Light can either multiply or screen colors, depending on the blend color. HardLight, + /// A softer version of Hard Light. Soft Light either darkens or lightens colors, depending on the blend color. SoftLight, + /// Subtracts the darker of the two constituent colors from the lighter color. Difference mode is useful for creating more vivid colors. Difference, + /// Similar to Difference, but with a lower contrast. Exclusion mode produces an effect similar to Difference but with less intensity. Exclusion, } @@ -30,7 +54,7 @@ pub enum BlendMode { /// /// This function supports the following hex formats: /// `#RGB`, `#RGBA`, `#RRGGBB`, `#RRGGBBAA`. -pub fn hex_to_hsla(s: &str) -> Result { +pub fn hex_to_hsla(s: &str) -> Result { let hex = s.trim_start_matches('#'); // Expand shorthand formats #RGB and #RGBA to #RRGGBB and #RRGGBBAA @@ -61,16 +85,15 @@ pub fn hex_to_hsla(s: &str) -> Result { let b = ((hex_val >> 8) & 0xFF) as f32 / 255.0; let a = (hex_val & 0xFF) as f32 / 255.0; - let color = Color { r, g, b, a }; + let color = RGBAColor { r, g, b, a }; Ok(color) } -// This implements conversion to and from all Palette colors. +// These derives implement to and from palette's color types. #[derive(FromColorUnclamped, WithAlpha, Debug, Clone)] -// We have to tell Palette that we will take care of converting to/from sRGB. #[palette(skip_derives(Rgb), rgb_standard = "encoding::Srgb")] -pub struct Color { +pub struct RGBAColor { r: f32, g: f32, b: f32, @@ -79,22 +102,19 @@ pub struct Color { a: f32, } -// There's no blanket implementation for Self -> Self, unlike the From trait. -// This is to better allow cases like Self -> Self. -impl FromColorUnclamped for Color { - fn from_color_unclamped(color: Color) -> Color { +impl FromColorUnclamped for RGBAColor { + fn from_color_unclamped(color: RGBAColor) -> RGBAColor { color } } -// Convert from any kind of f32 sRGB. -impl FromColorUnclamped> for Color +impl FromColorUnclamped> for RGBAColor where Srgb: FromColorUnclamped>, { - fn from_color_unclamped(color: Rgb) -> Color { + fn from_color_unclamped(color: Rgb) -> RGBAColor { let srgb = Srgb::from_color_unclamped(color); - Color { + RGBAColor { r: srgb.red, g: srgb.green, b: srgb.blue, @@ -103,21 +123,19 @@ where } } -// Convert into any kind of f32 sRGB. -impl FromColorUnclamped for Rgb +impl FromColorUnclamped for Rgb where Rgb: FromColorUnclamped, { - fn from_color_unclamped(color: Color) -> Self { + fn from_color_unclamped(color: RGBAColor) -> Self { let srgb = Srgb::new(color.r, color.g, color.b); Self::from_color_unclamped(srgb) } } -// Add the required clamping. -impl Clamp for Color { +impl Clamp for RGBAColor { fn clamp(self) -> Self { - Color { + RGBAColor { r: self.r.min(1.0).max(0.0), g: self.g.min(1.0).max(0.0), b: self.b.min(1.0).max(0.0), @@ -126,9 +144,12 @@ impl Clamp for Color { } } -impl Color { +impl RGBAColor { + /// Creates a new color from the given RGBA values. + /// + /// This color can be used to convert to any [`palette::Color`] type. pub fn new(r: f32, g: f32, b: f32, a: f32) -> Self { - Color { r, g, b, a } + RGBAColor { r, g, b, a } } /// Returns a set of states for this color. @@ -137,16 +158,16 @@ impl Color { } /// Mixes this color with another [`palette::Hsl`] color at the given `mix_ratio`. - pub fn mixed(&self, other: Color, mix_ratio: f32) -> Self { + pub fn mixed(&self, other: RGBAColor, mix_ratio: f32) -> Self { let srgb_self = Srgb::new(self.r, self.g, self.b); let srgb_other = Srgb::new(other.r, other.g, other.b); // Directly mix the colors as sRGB values let mixed = srgb_self.mix(srgb_other, mix_ratio); - Color::from_color_unclamped(mixed) + RGBAColor::from_color_unclamped(mixed) } - pub fn blend(&self, other: Color, blend_mode: BlendMode) -> Self { + pub fn blend(&self, other: RGBAColor, blend_mode: BlendMode) -> Self { let srgb_self = Srgb::new(self.r, self.g, self.b); let srgb_other = Srgb::new(other.r, other.g, other.b); @@ -169,31 +190,31 @@ impl Color { #[derive(Debug, Clone)] pub struct ColorStates { /// The default color. - pub default: Color, + pub default: RGBAColor, /// The color when the mouse is hovering over the element. - pub hover: Color, + pub hover: RGBAColor, /// The color when the mouse button is held down on the element. - pub active: Color, + pub active: RGBAColor, /// The color when the element is focused with the keyboard. - pub focused: Color, + pub focused: RGBAColor, /// The color when the element is disabled. - pub disabled: Color, + pub disabled: RGBAColor, } /// Returns a set of colors for different states of an element. /// -/// todo!("Test and improve this function") -pub fn states_for_color(color: Color, is_light: bool) -> ColorStates { +/// todo!("This should take a theme and use appropriate colors from it") +pub fn states_for_color(color: RGBAColor, is_light: bool) -> ColorStates { let adjustment_factor = if is_light { 0.1 } else { -0.1 }; let hover_adjustment = 1.0 - adjustment_factor; let active_adjustment = 1.0 - 2.0 * adjustment_factor; let focused_adjustment = 1.0 - 3.0 * adjustment_factor; let disabled_adjustment = 1.0 - 4.0 * adjustment_factor; - let make_adjustment = |color: Color, adjustment: f32| -> Color { + let make_adjustment = |color: RGBAColor, adjustment: f32| -> RGBAColor { // Adjust lightness for each state // Note: Adjustment logic may differ; simplify as needed for sRGB - Color::new( + RGBAColor::new( color.r * adjustment, color.g * adjustment, color.b * adjustment,