WIP

Antonio Scandurra created 2 years ago

Change summary

crates/gpui3/src/window.rs                     |  39 
crates/storybook2/src/storybook2.rs            |   1 
crates/storybook2/src/theme.rs                 |  14 
crates/storybook2/src/themes.rs                |   3 
crates/storybook2/src/themes/rose_pine_dawn.rs | 845 ++++++++++++++++++++
crates/storybook2/src/workspace.rs             |   5 
6 files changed, 895 insertions(+), 12 deletions(-)

Detailed changes

crates/gpui3/src/window.rs

@@ -4,9 +4,15 @@ use crate::{
     Style, TaffyLayoutEngine, TextStyle, TextStyleRefinement, WeakHandle, WindowOptions,
 };
 use anyhow::Result;
+use collections::HashMap;
 use derive_more::{Deref, DerefMut};
 use refineable::Refineable;
-use std::{any::TypeId, future, marker::PhantomData, sync::Arc};
+use std::{
+    any::{Any, TypeId},
+    future,
+    marker::PhantomData,
+    sync::Arc,
+};
 use util::ResultExt;
 
 pub struct AnyWindow {}
@@ -18,6 +24,7 @@ pub struct Window {
     content_size: Size<Pixels>,
     layout_engine: TaffyLayoutEngine,
     text_style_stack: Vec<TextStyleRefinement>,
+    cascading_states: HashMap<TypeId, Vec<Box<dyn Any + Send + Sync>>>,
     pub(crate) root_view: Option<AnyView<()>>,
     mouse_position: Point<Pixels>,
     pub(crate) scene: Scene,
@@ -39,9 +46,7 @@ impl Window {
             let handle = handle;
             let cx = cx.to_async();
             move |content_size, scale_factor| {
-                dbg!("!!!!!!!!!!!!");
                 cx.update_window(handle, |cx| {
-                    dbg!("!!!!!!!!");
                     cx.window.scene = Scene::new(scale_factor);
                     cx.window.content_size = content_size;
                     cx.window.dirty = true;
@@ -59,6 +64,7 @@ impl Window {
             content_size,
             layout_engine: TaffyLayoutEngine::new(),
             text_style_stack: Vec::new(),
+            cascading_states: HashMap::default(),
             root_view: None,
             mouse_position,
             scene: Scene::new(scale_factor),
@@ -160,6 +166,33 @@ impl<'a, 'w> WindowContext<'a, 'w> {
         self.window.text_style_stack.pop();
     }
 
+    pub fn push_cascading_state<T: Send + Sync + 'static>(&mut self, theme: T) {
+        self.window
+            .cascading_states
+            .entry(TypeId::of::<T>())
+            .or_default()
+            .push(Box::new(theme));
+    }
+
+    pub fn pop_cascading_state<T: Send + Sync + 'static>(&mut self) {
+        self.window
+            .cascading_states
+            .get_mut(&TypeId::of::<T>())
+            .and_then(|stack| stack.pop())
+            .expect("cascading state not found");
+    }
+
+    pub fn cascading_state<T: Send + Sync + 'static>(&self) -> &T {
+        let type_id = TypeId::of::<T>();
+        self.window
+            .cascading_states
+            .get(&type_id)
+            .and_then(|stack| stack.last())
+            .expect("no cascading state of the specified type has been pushed")
+            .downcast_ref::<T>()
+            .unwrap()
+    }
+
     pub fn text_style(&self) -> TextStyle {
         let mut style = TextStyle::default();
         for refinement in &self.window.text_style_stack {

crates/storybook2/src/storybook2.rs

@@ -11,6 +11,7 @@ mod collab_panel;
 // mod components;
 mod element_ext;
 mod theme;
+mod themes;
 mod workspace;
 
 // gpui2::actions! {

crates/storybook2/src/theme.rs

@@ -144,9 +144,9 @@ impl<E: Element> Element for Themed<E> {
     where
         Self: Sized,
     {
-        // cx.push_theme(self.theme.clone());
+        cx.push_cascading_state(self.theme.clone());
         let result = self.child.layout(state, cx);
-        // cx.pop_theme();
+        cx.pop_cascading_state::<Theme>();
         result
     }
 
@@ -160,10 +160,9 @@ impl<E: Element> Element for Themed<E> {
     where
         Self: Sized,
     {
-        // todo!
-        // cx.push_theme(self.theme.clone());
-        self.child.paint(layout, state, frame_state, cx);
-        // cx.pop_theme();
+        cx.push_cascading_state(self.theme.clone());
+        self.child.paint(layout, state, frame_state, cx)?;
+        cx.pop_cascading_state::<Theme>();
         Ok(())
     }
 }
@@ -185,6 +184,5 @@ impl<E: Element> Element for Themed<E> {
 // }
 
 pub fn theme<'a>(cx: &'a WindowContext) -> &'a Theme {
-    todo!()
-    // cx.theme::<Theme>()
+    cx.cascading_state()
 }

crates/storybook2/src/themes.rs

@@ -0,0 +1,3 @@
+mod rose_pine_dawn;
+
+pub use rose_pine_dawn::*;

crates/storybook2/src/themes/rose_pine_dawn.rs

@@ -0,0 +1,845 @@
+use crate::theme::Theme;
+use gpui3::serde_json::{self, json};
+
+pub fn rose_pine_dawn() -> Theme {
+    serde_json::from_value(json! {
+        {
+          "name": "Rosé Pine",
+          "is_light": false,
+          "ramps": {},
+          "lowest": {
+            "base": {
+              "default": {
+                "background": "#292739",
+                "border": "#423f55",
+                "foreground": "#e0def4"
+              },
+              "hovered": {
+                "background": "#423f55",
+                "border": "#423f55",
+                "foreground": "#e0def4"
+              },
+              "pressed": {
+                "background": "#4e4b63",
+                "border": "#423f55",
+                "foreground": "#e0def4"
+              },
+              "active": {
+                "background": "#47445b",
+                "border": "#36334a",
+                "foreground": "#e0def4"
+              },
+              "disabled": {
+                "background": "#292739",
+                "border": "#353347",
+                "foreground": "#2f2b43"
+              },
+              "inverted": {
+                "background": "#e0def4",
+                "border": "#191724",
+                "foreground": "#4b4860"
+              }
+            },
+            "variant": {
+              "default": {
+                "background": "#292739",
+                "border": "#423f55",
+                "foreground": "#75718e"
+              },
+              "hovered": {
+                "background": "#423f55",
+                "border": "#423f55",
+                "foreground": "#75718e"
+              },
+              "pressed": {
+                "background": "#4e4b63",
+                "border": "#423f55",
+                "foreground": "#75718e"
+              },
+              "active": {
+                "background": "#47445b",
+                "border": "#36334a",
+                "foreground": "#e0def4"
+              },
+              "disabled": {
+                "background": "#292739",
+                "border": "#353347",
+                "foreground": "#2f2b43"
+              },
+              "inverted": {
+                "background": "#e0def4",
+                "border": "#191724",
+                "foreground": "#4b4860"
+              }
+            },
+            "on": {
+              "default": {
+                "background": "#1d1b2a",
+                "border": "#232132",
+                "foreground": "#e0def4"
+              },
+              "hovered": {
+                "background": "#232132",
+                "border": "#232132",
+                "foreground": "#e0def4"
+              },
+              "pressed": {
+                "background": "#2f2d40",
+                "border": "#232132",
+                "foreground": "#e0def4"
+              },
+              "active": {
+                "background": "#403e53",
+                "border": "#504d65",
+                "foreground": "#e0def4"
+              },
+              "disabled": {
+                "background": "#1d1b2a",
+                "border": "#1e1c2c",
+                "foreground": "#3b384f"
+              },
+              "inverted": {
+                "background": "#e0def4",
+                "border": "#191724",
+                "foreground": "#3b394e"
+              }
+            },
+            "accent": {
+              "default": {
+                "background": "#2f3739",
+                "border": "#435255",
+                "foreground": "#9cced7"
+              },
+              "hovered": {
+                "background": "#435255",
+                "border": "#435255",
+                "foreground": "#9cced7"
+              },
+              "pressed": {
+                "background": "#4e6164",
+                "border": "#435255",
+                "foreground": "#9cced7"
+              },
+              "active": {
+                "background": "#5d757a",
+                "border": "#6e8f94",
+                "foreground": "#fbfdfd"
+              },
+              "disabled": {
+                "background": "#2f3739",
+                "border": "#3a4446",
+                "foreground": "#85aeb5"
+              },
+              "inverted": {
+                "background": "#fbfdfd",
+                "border": "#171717",
+                "foreground": "#587074"
+              }
+            },
+            "positive": {
+              "default": {
+                "background": "#182e23",
+                "border": "#254839",
+                "foreground": "#5dc2a3"
+              },
+              "hovered": {
+                "background": "#254839",
+                "border": "#254839",
+                "foreground": "#5dc2a3"
+              },
+              "pressed": {
+                "background": "#2c5645",
+                "border": "#254839",
+                "foreground": "#5dc2a3"
+              },
+              "active": {
+                "background": "#356b57",
+                "border": "#40836c",
+                "foreground": "#f9fdfb"
+              },
+              "disabled": {
+                "background": "#182e23",
+                "border": "#1e3b2e",
+                "foreground": "#4ea287"
+              },
+              "inverted": {
+                "background": "#f9fdfb",
+                "border": "#000e00",
+                "foreground": "#326552"
+              }
+            },
+            "warning": {
+              "default": {
+                "background": "#50341a",
+                "border": "#6d4d2b",
+                "foreground": "#f5c177"
+              },
+              "hovered": {
+                "background": "#6d4d2b",
+                "border": "#6d4d2b",
+                "foreground": "#f5c177"
+              },
+              "pressed": {
+                "background": "#7e5a34",
+                "border": "#6d4d2b",
+                "foreground": "#f5c177"
+              },
+              "active": {
+                "background": "#946e41",
+                "border": "#b0854f",
+                "foreground": "#fffcf9"
+              },
+              "disabled": {
+                "background": "#50341a",
+                "border": "#5e4023",
+                "foreground": "#d2a263"
+              },
+              "inverted": {
+                "background": "#fffcf9",
+                "border": "#2c1600",
+                "foreground": "#8e683c"
+              }
+            },
+            "negative": {
+              "default": {
+                "background": "#431820",
+                "border": "#612834",
+                "foreground": "#ea6f92"
+              },
+              "hovered": {
+                "background": "#612834",
+                "border": "#612834",
+                "foreground": "#ea6f92"
+              },
+              "pressed": {
+                "background": "#71303f",
+                "border": "#612834",
+                "foreground": "#ea6f92"
+              },
+              "active": {
+                "background": "#883c4f",
+                "border": "#a44961",
+                "foreground": "#fff9fa"
+              },
+              "disabled": {
+                "background": "#431820",
+                "border": "#52202a",
+                "foreground": "#c75c79"
+              },
+              "inverted": {
+                "background": "#fff9fa",
+                "border": "#230000",
+                "foreground": "#82384a"
+              }
+            }
+          },
+          "middle": {
+            "base": {
+              "default": {
+                "background": "#1d1b2a",
+                "border": "#232132",
+                "foreground": "#e0def4"
+              },
+              "hovered": {
+                "background": "#232132",
+                "border": "#232132",
+                "foreground": "#e0def4"
+              },
+              "pressed": {
+                "background": "#2f2d40",
+                "border": "#232132",
+                "foreground": "#e0def4"
+              },
+              "active": {
+                "background": "#403e53",
+                "border": "#504d65",
+                "foreground": "#e0def4"
+              },
+              "disabled": {
+                "background": "#1d1b2a",
+                "border": "#1e1c2c",
+                "foreground": "#3b384f"
+              },
+              "inverted": {
+                "background": "#e0def4",
+                "border": "#191724",
+                "foreground": "#3b394e"
+              }
+            },
+            "variant": {
+              "default": {
+                "background": "#1d1b2a",
+                "border": "#232132",
+                "foreground": "#75718e"
+              },
+              "hovered": {
+                "background": "#232132",
+                "border": "#232132",
+                "foreground": "#75718e"
+              },
+              "pressed": {
+                "background": "#2f2d40",
+                "border": "#232132",
+                "foreground": "#75718e"
+              },
+              "active": {
+                "background": "#403e53",
+                "border": "#504d65",
+                "foreground": "#e0def4"
+              },
+              "disabled": {
+                "background": "#1d1b2a",
+                "border": "#1e1c2c",
+                "foreground": "#3b384f"
+              },
+              "inverted": {
+                "background": "#e0def4",
+                "border": "#191724",
+                "foreground": "#3b394e"
+              }
+            },
+            "on": {
+              "default": {
+                "background": "#191724",
+                "border": "#1c1a29",
+                "foreground": "#e0def4"
+              },
+              "hovered": {
+                "background": "#1c1a29",
+                "border": "#1c1a29",
+                "foreground": "#e0def4"
+              },
+              "pressed": {
+                "background": "#1d1b2b",
+                "border": "#1c1a29",
+                "foreground": "#e0def4"
+              },
+              "active": {
+                "background": "#222031",
+                "border": "#353347",
+                "foreground": "#e0def4"
+              },
+              "disabled": {
+                "background": "#191724",
+                "border": "#1a1826",
+                "foreground": "#4e4b63"
+              },
+              "inverted": {
+                "background": "#e0def4",
+                "border": "#191724",
+                "foreground": "#1f1d2e"
+              }
+            },
+            "accent": {
+              "default": {
+                "background": "#2f3739",
+                "border": "#435255",
+                "foreground": "#9cced7"
+              },
+              "hovered": {
+                "background": "#435255",
+                "border": "#435255",
+                "foreground": "#9cced7"
+              },
+              "pressed": {
+                "background": "#4e6164",
+                "border": "#435255",
+                "foreground": "#9cced7"
+              },
+              "active": {
+                "background": "#5d757a",
+                "border": "#6e8f94",
+                "foreground": "#fbfdfd"
+              },
+              "disabled": {
+                "background": "#2f3739",
+                "border": "#3a4446",
+                "foreground": "#85aeb5"
+              },
+              "inverted": {
+                "background": "#fbfdfd",
+                "border": "#171717",
+                "foreground": "#587074"
+              }
+            },
+            "positive": {
+              "default": {
+                "background": "#182e23",
+                "border": "#254839",
+                "foreground": "#5dc2a3"
+              },
+              "hovered": {
+                "background": "#254839",
+                "border": "#254839",
+                "foreground": "#5dc2a3"
+              },
+              "pressed": {
+                "background": "#2c5645",
+                "border": "#254839",
+                "foreground": "#5dc2a3"
+              },
+              "active": {
+                "background": "#356b57",
+                "border": "#40836c",
+                "foreground": "#f9fdfb"
+              },
+              "disabled": {
+                "background": "#182e23",
+                "border": "#1e3b2e",
+                "foreground": "#4ea287"
+              },
+              "inverted": {
+                "background": "#f9fdfb",
+                "border": "#000e00",
+                "foreground": "#326552"
+              }
+            },
+            "warning": {
+              "default": {
+                "background": "#50341a",
+                "border": "#6d4d2b",
+                "foreground": "#f5c177"
+              },
+              "hovered": {
+                "background": "#6d4d2b",
+                "border": "#6d4d2b",
+                "foreground": "#f5c177"
+              },
+              "pressed": {
+                "background": "#7e5a34",
+                "border": "#6d4d2b",
+                "foreground": "#f5c177"
+              },
+              "active": {
+                "background": "#946e41",
+                "border": "#b0854f",
+                "foreground": "#fffcf9"
+              },
+              "disabled": {
+                "background": "#50341a",
+                "border": "#5e4023",
+                "foreground": "#d2a263"
+              },
+              "inverted": {
+                "background": "#fffcf9",
+                "border": "#2c1600",
+                "foreground": "#8e683c"
+              }
+            },
+            "negative": {
+              "default": {
+                "background": "#431820",
+                "border": "#612834",
+                "foreground": "#ea6f92"
+              },
+              "hovered": {
+                "background": "#612834",
+                "border": "#612834",
+                "foreground": "#ea6f92"
+              },
+              "pressed": {
+                "background": "#71303f",
+                "border": "#612834",
+                "foreground": "#ea6f92"
+              },
+              "active": {
+                "background": "#883c4f",
+                "border": "#a44961",
+                "foreground": "#fff9fa"
+              },
+              "disabled": {
+                "background": "#431820",
+                "border": "#52202a",
+                "foreground": "#c75c79"
+              },
+              "inverted": {
+                "background": "#fff9fa",
+                "border": "#230000",
+                "foreground": "#82384a"
+              }
+            }
+          },
+          "highest": {
+            "base": {
+              "default": {
+                "background": "#191724",
+                "border": "#1c1a29",
+                "foreground": "#e0def4"
+              },
+              "hovered": {
+                "background": "#1c1a29",
+                "border": "#1c1a29",
+                "foreground": "#e0def4"
+              },
+              "pressed": {
+                "background": "#1d1b2b",
+                "border": "#1c1a29",
+                "foreground": "#e0def4"
+              },
+              "active": {
+                "background": "#222031",
+                "border": "#353347",
+                "foreground": "#e0def4"
+              },
+              "disabled": {
+                "background": "#191724",
+                "border": "#1a1826",
+                "foreground": "#4e4b63"
+              },
+              "inverted": {
+                "background": "#e0def4",
+                "border": "#191724",
+                "foreground": "#1f1d2e"
+              }
+            },
+            "variant": {
+              "default": {
+                "background": "#191724",
+                "border": "#1c1a29",
+                "foreground": "#75718e"
+              },
+              "hovered": {
+                "background": "#1c1a29",
+                "border": "#1c1a29",
+                "foreground": "#75718e"
+              },
+              "pressed": {
+                "background": "#1d1b2b",
+                "border": "#1c1a29",
+                "foreground": "#75718e"
+              },
+              "active": {
+                "background": "#222031",
+                "border": "#353347",
+                "foreground": "#e0def4"
+              },
+              "disabled": {
+                "background": "#191724",
+                "border": "#1a1826",
+                "foreground": "#4e4b63"
+              },
+              "inverted": {
+                "background": "#e0def4",
+                "border": "#191724",
+                "foreground": "#1f1d2e"
+              }
+            },
+            "on": {
+              "default": {
+                "background": "#1d1b2a",
+                "border": "#232132",
+                "foreground": "#e0def4"
+              },
+              "hovered": {
+                "background": "#232132",
+                "border": "#232132",
+                "foreground": "#e0def4"
+              },
+              "pressed": {
+                "background": "#2f2d40",
+                "border": "#232132",
+                "foreground": "#e0def4"
+              },
+              "active": {
+                "background": "#403e53",
+                "border": "#504d65",
+                "foreground": "#e0def4"
+              },
+              "disabled": {
+                "background": "#1d1b2a",
+                "border": "#1e1c2c",
+                "foreground": "#3b384f"
+              },
+              "inverted": {
+                "background": "#e0def4",
+                "border": "#191724",
+                "foreground": "#3b394e"
+              }
+            },
+            "accent": {
+              "default": {
+                "background": "#2f3739",
+                "border": "#435255",
+                "foreground": "#9cced7"
+              },
+              "hovered": {
+                "background": "#435255",
+                "border": "#435255",
+                "foreground": "#9cced7"
+              },
+              "pressed": {
+                "background": "#4e6164",
+                "border": "#435255",
+                "foreground": "#9cced7"
+              },
+              "active": {
+                "background": "#5d757a",
+                "border": "#6e8f94",
+                "foreground": "#fbfdfd"
+              },
+              "disabled": {
+                "background": "#2f3739",
+                "border": "#3a4446",
+                "foreground": "#85aeb5"
+              },
+              "inverted": {
+                "background": "#fbfdfd",
+                "border": "#171717",
+                "foreground": "#587074"
+              }
+            },
+            "positive": {
+              "default": {
+                "background": "#182e23",
+                "border": "#254839",
+                "foreground": "#5dc2a3"
+              },
+              "hovered": {
+                "background": "#254839",
+                "border": "#254839",
+                "foreground": "#5dc2a3"
+              },
+              "pressed": {
+                "background": "#2c5645",
+                "border": "#254839",
+                "foreground": "#5dc2a3"
+              },
+              "active": {
+                "background": "#356b57",
+                "border": "#40836c",
+                "foreground": "#f9fdfb"
+              },
+              "disabled": {
+                "background": "#182e23",
+                "border": "#1e3b2e",
+                "foreground": "#4ea287"
+              },
+              "inverted": {
+                "background": "#f9fdfb",
+                "border": "#000e00",
+                "foreground": "#326552"
+              }
+            },
+            "warning": {
+              "default": {
+                "background": "#50341a",
+                "border": "#6d4d2b",
+                "foreground": "#f5c177"
+              },
+              "hovered": {
+                "background": "#6d4d2b",
+                "border": "#6d4d2b",
+                "foreground": "#f5c177"
+              },
+              "pressed": {
+                "background": "#7e5a34",
+                "border": "#6d4d2b",
+                "foreground": "#f5c177"
+              },
+              "active": {
+                "background": "#946e41",
+                "border": "#b0854f",
+                "foreground": "#fffcf9"
+              },
+              "disabled": {
+                "background": "#50341a",
+                "border": "#5e4023",
+                "foreground": "#d2a263"
+              },
+              "inverted": {
+                "background": "#fffcf9",
+                "border": "#2c1600",
+                "foreground": "#8e683c"
+              }
+            },
+            "negative": {
+              "default": {
+                "background": "#431820",
+                "border": "#612834",
+                "foreground": "#ea6f92"
+              },
+              "hovered": {
+                "background": "#612834",
+                "border": "#612834",
+                "foreground": "#ea6f92"
+              },
+              "pressed": {
+                "background": "#71303f",
+                "border": "#612834",
+                "foreground": "#ea6f92"
+              },
+              "active": {
+                "background": "#883c4f",
+                "border": "#a44961",
+                "foreground": "#fff9fa"
+              },
+              "disabled": {
+                "background": "#431820",
+                "border": "#52202a",
+                "foreground": "#c75c79"
+              },
+              "inverted": {
+                "background": "#fff9fa",
+                "border": "#230000",
+                "foreground": "#82384a"
+              }
+            }
+          },
+          "popover_shadow": {
+            "blur": 4,
+            "color": "#00000033",
+            "offset": [
+              1,
+              2
+            ]
+          },
+          "modal_shadow": {
+            "blur": 16,
+            "color": "#00000033",
+            "offset": [
+              0,
+              2
+            ]
+          },
+          "players": {
+            "0": {
+              "selection": "#9cced73d",
+              "cursor": "#9cced7"
+            },
+            "1": {
+              "selection": "#5dc2a33d",
+              "cursor": "#5dc2a3"
+            },
+            "2": {
+              "selection": "#9d76913d",
+              "cursor": "#9d7691"
+            },
+            "3": {
+              "selection": "#c4a7e63d",
+              "cursor": "#c4a7e6"
+            },
+            "4": {
+              "selection": "#c4a7e63d",
+              "cursor": "#c4a7e6"
+            },
+            "5": {
+              "selection": "#32748f3d",
+              "cursor": "#32748f"
+            },
+            "6": {
+              "selection": "#ea6f923d",
+              "cursor": "#ea6f92"
+            },
+            "7": {
+              "selection": "#f5c1773d",
+              "cursor": "#f5c177"
+            }
+          },
+          "syntax": {
+            "comment": {
+              "color": "#6e6a86"
+            },
+            "operator": {
+              "color": "#31748f"
+            },
+            "punctuation": {
+              "color": "#908caa"
+            },
+            "variable": {
+              "color": "#e0def4"
+            },
+            "string": {
+              "color": "#f6c177"
+            },
+            "type": {
+              "color": "#9ccfd8"
+            },
+            "type.builtin": {
+              "color": "#9ccfd8"
+            },
+            "boolean": {
+              "color": "#ebbcba"
+            },
+            "function": {
+              "color": "#ebbcba"
+            },
+            "keyword": {
+              "color": "#31748f"
+            },
+            "tag": {
+              "color": "#9ccfd8"
+            },
+            "function.method": {
+              "color": "#ebbcba"
+            },
+            "title": {
+              "color": "#f6c177"
+            },
+            "link_text": {
+              "color": "#9ccfd8",
+              "italic": false
+            },
+            "link_uri": {
+              "color": "#ebbcba"
+            }
+          },
+          "color_family": {
+            "neutral": {
+              "low": 11.568627450980392,
+              "high": 91.37254901960785,
+              "range": 79.80392156862746,
+              "scaling_value": 1.2530712530712529
+            },
+            "red": {
+              "low": 6.862745098039216,
+              "high": 100,
+              "range": 93.13725490196079,
+              "scaling_value": 1.0736842105263158
+            },
+            "orange": {
+              "low": 5.490196078431373,
+              "high": 100,
+              "range": 94.50980392156863,
+              "scaling_value": 1.058091286307054
+            },
+            "yellow": {
+              "low": 8.627450980392156,
+              "high": 100,
+              "range": 91.37254901960785,
+              "scaling_value": 1.094420600858369
+            },
+            "green": {
+              "low": 2.7450980392156863,
+              "high": 100,
+              "range": 97.25490196078431,
+              "scaling_value": 1.028225806451613
+            },
+            "cyan": {
+              "low": 0,
+              "high": 100,
+              "range": 100,
+              "scaling_value": 1
+            },
+            "blue": {
+              "low": 9.019607843137255,
+              "high": 100,
+              "range": 90.98039215686275,
+              "scaling_value": 1.0991379310344827
+            },
+            "violet": {
+              "low": 5.490196078431373,
+              "high": 100,
+              "range": 94.50980392156863,
+              "scaling_value": 1.058091286307054
+            },
+            "magenta": {
+              "low": 0,
+              "high": 100,
+              "range": 100,
+              "scaling_value": 1
+            }
+          }
+        }
+    })
+    .unwrap()
+}

crates/storybook2/src/workspace.rs

@@ -1,6 +1,8 @@
 use crate::{
     collab_panel::{collab_panel, CollabPanel},
+    element_ext::ElementExt,
     theme::theme,
+    themes::rose_pine_dawn,
 };
 use gpui3::{
     div, img, svg, view, Context, Element, ParentElement, RootView, StyleHelpers, View,
@@ -27,7 +29,7 @@ impl Workspace {
     }
 
     fn render(&mut self, cx: &mut ViewContext<Self>) -> impl Element<State = Self> {
-        let theme = theme(cx);
+        let theme = rose_pine_dawn();
 
         div::<Self>()
             .size_full()
@@ -52,6 +54,7 @@ impl Workspace {
                     .child(self.right_panel.clone()),
             )
             .child(statusbar::statusbar(cx))
+            .themed(theme)
     }
 }