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 |
|-------|------|
| ![CleanShot 2024-08-29 at 16 19
20@2x](https://github.com/user-attachments/assets/80369de4-8926-4b30-80f5-f81a8a7b9531)
| ![CleanShot 2024-08-29 at 16 19
33@2x](https://github.com/user-attachments/assets/fd7a2aae-27e6-460f-a054-8f37623dc96d)
|


Release Notes:

- N/A

crates/storybook/src/stories.rs

@@ -1,5 +1,6 @@
 mod auto_height_editor;
 mod cursor;
+mod default_colors;
 mod focus;
 mod kitchen_sink;
 mod overflow_scroll;
@@ -11,6 +12,7 @@ mod with_rem_size;
 
 pub use auto_height_editor::*;
 pub use cursor::*;
+pub use default_colors::*;
 pub use focus::*;
 pub use kitchen_sink::*;
 pub use overflow_scroll::*;

crates/storybook/src/stories/default_colors.rs

@@ -0,0 +1,89 @@
+use gpui::{
+    colors, div, prelude::*, DefaultColor, DefaultThemeAppearance, Hsla, Render, View, ViewContext,
+    WindowContext,
+};
+use story::Story;
+use strum::IntoEnumIterator;
+use ui::{h_flex, ActiveTheme};
+
+pub struct DefaultColorsStory;
+
+impl DefaultColorsStory {
+    pub fn view(cx: &mut WindowContext) -> View<Self> {
+        cx.new_view(|_cx| Self)
+    }
+}
+
+impl Render for DefaultColorsStory {
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
+        let appearances = [DefaultThemeAppearance::Light, DefaultThemeAppearance::Dark];
+
+        Story::container()
+            .child(Story::title("Default Colors"))
+            .children(appearances.iter().map(|&appearance| {
+                let colors = colors(appearance);
+                let color_types = DefaultColor::iter()
+                    .map(|color| {
+                        let name = format!("{:?}", color);
+                        let rgba = color.hsla(&colors);
+                        (name, rgba)
+                    })
+                    .collect::<Vec<_>>();
+
+                div()
+                    .flex()
+                    .flex_col()
+                    .gap_4()
+                    .p_4()
+                    .child(Story::label(format!("{:?} Appearance", appearance)))
+                    .children(color_types.iter().map(|(name, color)| {
+                        let color: Hsla = *color;
+
+                        div()
+                            .flex()
+                            .items_center()
+                            .gap_2()
+                            .child(
+                                div()
+                                    .w_12()
+                                    .h_12()
+                                    .bg(color)
+                                    .border_1()
+                                    .border_color(cx.theme().colors().border),
+                            )
+                            .child(Story::label(format!("{}: {:?}", name, color.clone())))
+                    }))
+                    .child(
+                        h_flex()
+                            .gap_1()
+                            .child(
+                                h_flex()
+                                    .bg(DefaultColor::Background.hsla(&colors))
+                                    .h_8()
+                                    .p_2()
+                                    .text_sm()
+                                    .text_color(DefaultColor::Text.hsla(&colors))
+                                    .child("Default Text"),
+                            )
+                            .child(
+                                h_flex()
+                                    .bg(DefaultColor::Container.hsla(&colors))
+                                    .h_8()
+                                    .p_2()
+                                    .text_sm()
+                                    .text_color(DefaultColor::Text.hsla(&colors))
+                                    .child("Text on Container"),
+                            )
+                            .child(
+                                h_flex()
+                                    .bg(DefaultColor::Selected.hsla(&colors))
+                                    .h_8()
+                                    .p_2()
+                                    .text_sm()
+                                    .text_color(DefaultColor::SelectedText.hsla(&colors))
+                                    .child("Selected Text"),
+                            ),
+                    )
+            }))
+    }
+}

crates/storybook/src/story_selector.rs

@@ -20,6 +20,7 @@ pub enum ComponentStory {
     CollabNotification,
     ContextMenu,
     Cursor,
+    DefaultColors,
     Disclosure,
     Focus,
     Icon,
@@ -54,6 +55,7 @@ impl ComponentStory {
                 .into(),
             Self::ContextMenu => cx.new_view(|_| ui::ContextMenuStory).into(),
             Self::Cursor => cx.new_view(|_| crate::stories::CursorStory).into(),
+            Self::DefaultColors => DefaultColorsStory::view(cx).into(),
             Self::Disclosure => cx.new_view(|_| ui::DisclosureStory).into(),
             Self::Focus => FocusStory::view(cx).into(),
             Self::Icon => cx.new_view(|_| ui::IconStory).into(),
@@ -64,15 +66,15 @@ impl ComponentStory {
             Self::ListHeader => cx.new_view(|_| ui::ListHeaderStory).into(),
             Self::ListItem => cx.new_view(|_| ui::ListItemStory).into(),
             Self::OverflowScroll => cx.new_view(|_| crate::stories::OverflowScrollStory).into(),
+            Self::Picker => PickerStory::new(cx).into(),
             Self::Scroll => ScrollStory::view(cx).into(),
-            Self::Text => TextStory::view(cx).into(),
             Self::Tab => cx.new_view(|_| ui::TabStory).into(),
             Self::TabBar => cx.new_view(|_| ui::TabBarStory).into(),
+            Self::Text => TextStory::view(cx).into(),
             Self::ToggleButton => cx.new_view(|_| ui::ToggleButtonStory).into(),
             Self::ToolStrip => cx.new_view(|_| ui::ToolStripStory).into(),
             Self::ViewportUnits => cx.new_view(|_| crate::stories::ViewportUnitsStory).into(),
             Self::WithRemSize => cx.new_view(|_| crate::stories::WithRemSizeStory).into(),
-            Self::Picker => PickerStory::new(cx).into(),
         }
     }
 }