Add a story showcasing the color scales

Marshall Bowers created 2 years ago

Change summary

crates/storybook2/src/stories.rs        |  2 +
crates/storybook2/src/stories/colors.rs | 28 +++++++++++++++++++++++++++
crates/storybook2/src/story_selector.rs |  2 +
crates/theme2/src/default.rs            |  5 +--
crates/theme2/src/scale.rs              |  9 +++----
crates/theme2/src/theme2.rs             |  2 +
6 files changed, 40 insertions(+), 8 deletions(-)

Detailed changes

crates/storybook2/src/stories.rs

@@ -1,9 +1,11 @@
+mod colors;
 mod focus;
 mod kitchen_sink;
 mod scroll;
 mod text;
 mod z_index;
 
+pub use colors::*;
 pub use focus::*;
 pub use kitchen_sink::*;
 pub use scroll::*;

crates/storybook2/src/stories/colors.rs

@@ -0,0 +1,28 @@
+use ui::prelude::*;
+
+use crate::story::Story;
+
+#[derive(Component)]
+pub struct ColorsStory;
+
+impl ColorsStory {
+    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+        let color_scales = theme2::default_color_scales();
+
+        Story::container(cx)
+            .child(Story::title(cx, "Colors"))
+            .child(
+                div()
+                    .id("colors")
+                    .flex()
+                    .flex_col()
+                    .overflow_y_scroll()
+                    .text_color(gpui2::white())
+                    .children(color_scales.into_iter().map(|(name, scale)| {
+                        div().child(name.to_string()).child(div().flex().children(
+                            (1..=12).map(|step| div().flex().size_4().bg(scale.step(cx, step))),
+                        ))
+                    })),
+            )
+    }
+}

crates/storybook2/src/story_selector.rs

@@ -14,6 +14,7 @@ use ui::prelude::*;
 pub enum ElementStory {
     Avatar,
     Button,
+    Colors,
     Details,
     Focus,
     Icon,
@@ -29,6 +30,7 @@ impl ElementStory {
         match self {
             Self::Avatar => { cx.build_view(|cx| (), |_, _| ui::AvatarStory.render()) }.into_any(),
             Self::Button => { cx.build_view(|cx| (), |_, _| ui::ButtonStory.render()) }.into_any(),
+            Self::Colors => { cx.build_view(|cx| (), |_, _| ColorsStory.render()) }.into_any(),
             Self::Details => {
                 { cx.build_view(|cx| (), |_, _| ui::DetailsStory.render()) }.into_any()
             }

crates/theme2/src/default.rs

@@ -1,6 +1,5 @@
-use std::collections::HashMap;
-
 use gpui2::Rgba;
+use indexmap::IndexMap;
 
 use crate::scale::{ColorScaleName, ColorScaleSet, ColorScales};
 
@@ -35,7 +34,7 @@ impl From<DefaultColorScaleSet> for ColorScaleSet {
 pub fn default_color_scales() -> ColorScales {
     use ColorScaleName::*;
 
-    HashMap::from_iter([
+    IndexMap::from_iter([
         (Gray, gray().into()),
         (Mauve, mauve().into()),
         (Slate, slate().into()),

crates/theme2/src/scale.rs

@@ -1,6 +1,5 @@
-use std::collections::HashMap;
-
 use gpui2::{AppContext, Hsla};
+use indexmap::IndexMap;
 
 use crate::{theme, Appearance};
 
@@ -87,7 +86,7 @@ impl std::fmt::Display for ColorScaleName {
 
 pub type ColorScale = [Hsla; 12];
 
-pub type ColorScales = HashMap<ColorScaleName, ColorScaleSet>;
+pub type ColorScales = IndexMap<ColorScaleName, ColorScaleSet>;
 
 /// A one-based step in a [`ColorScale`].
 pub type ColorScaleStep = usize;
@@ -146,7 +145,7 @@ impl ColorScaleSet {
         }
     }
 
-    pub fn step(self, cx: &AppContext, step: ColorScaleStep) -> Hsla {
+    pub fn step(&self, cx: &AppContext, step: ColorScaleStep) -> Hsla {
         let appearance = Self::current_appearance(cx);
 
         match appearance {
@@ -155,7 +154,7 @@ impl ColorScaleSet {
         }
     }
 
-    pub fn step_alpha(self, cx: &AppContext, step: ColorScaleStep) -> Hsla {
+    pub fn step_alpha(&self, cx: &AppContext, step: ColorScaleStep) -> Hsla {
         let appearance = Self::current_appearance(cx);
         match appearance {
             Appearance::Light => self.light_alpha(step),

crates/theme2/src/theme2.rs

@@ -4,7 +4,9 @@ mod scale;
 mod settings;
 mod themes;
 
+pub use default::*;
 pub use registry::*;
+pub use scale::*;
 pub use settings::*;
 
 use gpui2::{AppContext, HighlightStyle, Hsla, SharedString};