Add a simple set of default colors to gpui
(#17110)
This PR adds an initial set of default colors to `gpui`. These will power default-styled gpui components (things like checkboxes, buttons, inputs, etc.), storybook, and give a very simple, appearance-aware set of colors out of the box for folks to build with. These colors will evolve and be updated in the near future, they are literally pulled from Finder for now :) The API might not be perfect, I focused on getting something in quickly that we can iterate on! ### Usage ```rs use gpui::{colors, DefaultColor} fn auto(cx: &WindowContext) -> { // Init the full set of DefaultColors let colors = colors(cx.appearance()); // Use a color // It will automatically give you the correct color for the system's // current appearance. let background = DefaultColor::Background.hsla(&colors) } fn manual() -> { // Init the full sets of DefaultColors let light_colors = DefaultColors::light(); let dark_colors = DefaultColors::dark(); // Use a color // Maybe for some fancy inverted element let background = DefaultColor::Background.hsla(&light_colors) let inverted_background = DefaultColor::Background.hsla(&dark_colors) let inverted_text = DefaultColor::Text.hsla(&dark_colors) } ``` Note: We need `cx` for the auto way as we need to get the system appearance from the App/Window/ViewContext via `cx.appearance()`. ### Example You can run `script/storybook default_colors` to open the Default Colors story: | Light | Dark | |-------|------| |  |  | Release Notes: - N/A
This commit is contained in:
parent
82ceb4c091
commit
01f8d27f22
5 changed files with 211 additions and 2 deletions
114
crates/gpui/src/elements/common.rs
Normal file
114
crates/gpui/src/elements/common.rs
Normal file
|
@ -0,0 +1,114 @@
|
|||
use crate::{rgb, Hsla, Rgba, WindowAppearance};
|
||||
|
||||
#[derive(Debug, Default, Clone, Copy, PartialEq, Eq)]
|
||||
/// The appearance of the base gpui colors, used to style gpui elements
|
||||
///
|
||||
/// Varries based on the system's current [WindowAppearance].
|
||||
pub enum DefaultThemeAppearance {
|
||||
#[default]
|
||||
/// Use the set of colors for light appearances
|
||||
Light,
|
||||
/// Use the set of colors for dark appearances
|
||||
Dark,
|
||||
}
|
||||
|
||||
impl From<WindowAppearance> for DefaultThemeAppearance {
|
||||
fn from(appearance: WindowAppearance) -> Self {
|
||||
match appearance {
|
||||
WindowAppearance::Light | WindowAppearance::VibrantLight => Self::Light,
|
||||
WindowAppearance::Dark | WindowAppearance::VibrantDark => Self::Dark,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// Get the default colors for the given appearance
|
||||
pub fn colors(appearance: DefaultThemeAppearance) -> DefaultColors {
|
||||
match appearance {
|
||||
DefaultThemeAppearance::Light => DefaultColors::light(),
|
||||
DefaultThemeAppearance::Dark => DefaultColors::dark(),
|
||||
}
|
||||
}
|
||||
|
||||
/// A collection of colors
|
||||
#[derive(Debug, Clone, Copy, PartialEq)]
|
||||
pub struct DefaultColors {
|
||||
text: Rgba,
|
||||
selected_text: Rgba,
|
||||
background: Rgba,
|
||||
disabled: Rgba,
|
||||
selected: Rgba,
|
||||
border: Rgba,
|
||||
separator: Rgba,
|
||||
container: Rgba,
|
||||
}
|
||||
|
||||
impl DefaultColors {
|
||||
/// Get the default light colors
|
||||
pub fn dark() -> Self {
|
||||
Self {
|
||||
text: rgb(0xFFFFFF),
|
||||
selected_text: rgb(0xFFFFFF),
|
||||
disabled: rgb(0x565656),
|
||||
selected: rgb(0x2457CA),
|
||||
background: rgb(0x222222),
|
||||
border: rgb(0x000000),
|
||||
separator: rgb(0xD9D9D9),
|
||||
container: rgb(0x262626),
|
||||
}
|
||||
}
|
||||
|
||||
/// Get the default dark colors
|
||||
pub fn light() -> Self {
|
||||
Self {
|
||||
text: rgb(0x252525),
|
||||
selected_text: rgb(0xFFFFFF),
|
||||
background: rgb(0xFFFFFF),
|
||||
disabled: rgb(0xB0B0B0),
|
||||
selected: rgb(0x2A63D9),
|
||||
border: rgb(0xD9D9D9),
|
||||
separator: rgb(0xE6E6E6),
|
||||
container: rgb(0xF4F5F5),
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// A default gpui color
|
||||
#[derive(Debug, Clone, Copy, PartialEq, Eq, strum::EnumIter)]
|
||||
pub enum DefaultColor {
|
||||
/// Text color
|
||||
Text,
|
||||
/// Selected text color
|
||||
SelectedText,
|
||||
/// Background color
|
||||
Background,
|
||||
/// Disabled color
|
||||
Disabled,
|
||||
/// Selected color
|
||||
Selected,
|
||||
/// Border color
|
||||
Border,
|
||||
/// Separator color
|
||||
Separator,
|
||||
/// Container color
|
||||
Container,
|
||||
}
|
||||
impl DefaultColor {
|
||||
/// Get the Rgb color for the given color type
|
||||
pub fn color(&self, colors: &DefaultColors) -> Rgba {
|
||||
match self {
|
||||
DefaultColor::Text => colors.text,
|
||||
DefaultColor::SelectedText => colors.selected_text,
|
||||
DefaultColor::Background => colors.background,
|
||||
DefaultColor::Disabled => colors.disabled,
|
||||
DefaultColor::Selected => colors.selected,
|
||||
DefaultColor::Border => colors.border,
|
||||
DefaultColor::Separator => colors.separator,
|
||||
DefaultColor::Container => colors.container,
|
||||
}
|
||||
}
|
||||
|
||||
/// Get the Hsla color for the given color type
|
||||
pub fn hsla(&self, colors: &DefaultColors) -> Hsla {
|
||||
self.color(&colors).into()
|
||||
}
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue