From a63999c2a4c56a68b803c8e8624db913662e91b0 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Wed, 31 Jul 2024 15:05:01 +0200
Subject: [PATCH 01/13] rename the theme global we use internally to
 `sb_theme`. add addon-themes to template stories, and to main storybook.

---
 code/.storybook/main.ts                       |  5 +
 code/.storybook/preview.tsx                   |  5 +-
 .../template/stories/conditional.stories.ts   |  8 +-
 .../src/components/Interaction.stories.tsx    |  2 +-
 .../components/InteractionsPanel.stories.tsx  |  2 +-
 .../template/stories/basics.stories.ts        |  2 +-
 code/addons/themes/src/constants.ts           |  1 +
 .../src/decorators/class-name.decorator.tsx   |  4 +-
 .../decorators/data-attribute.decorator.tsx   |  2 +-
 .../src/decorators/provider.decorator.tsx     |  2 +-
 code/addons/themes/src/preview.tsx            |  7 +-
 code/addons/themes/src/theme-switcher.tsx     | 85 +++++++++--------
 .../template/stories/decorators.stories.ts    | 93 +++++++++++++++++++
 .../template/stories/globals.stories.ts       | 64 +++++++++++++
 .../template/stories/parameters.stories.ts    | 81 ++++++++++++++++
 .../template/stories/globals.stories.ts       |  4 +-
 .../toolbars/template/stories/preview.ts      |  4 +-
 .../components/tabs/tabs.stories.tsx          |  2 +-
 .../components/layout/Layout.stories.tsx      |  6 +-
 .../mobile/about/MobileAbout.stories.tsx      |  4 +-
 .../navigation/MobileNavigation.stories.tsx   |  4 +-
 .../components/preview/Iframe.stories.tsx     |  2 +-
 .../components/sidebar/Explorer.stories.tsx   |  2 +-
 .../sidebar/FileSearchModal.stories.tsx       |  2 +-
 .../components/sidebar/Tree.stories.tsx       | 28 +++---
 code/core/src/preview-api/Errors.stories.tsx  |  2 +-
 .../theme-decorator/decorators.stories.ts     |  4 +-
 .../blocks/src/examples/Button.stories.tsx    |  2 +-
 ...uttonWithMetaDescriptionAsBoth.stories.tsx |  2 +-
 ...onWithMetaDescriptionAsComment.stories.tsx |  2 +-
 ...WithMetaDescriptionAsParameter.stories.tsx |  3 +-
 .../ButtonWithMetaSubtitleAsBoth.stories.tsx  |  3 +-
 ...etaSubtitleAsComponentSubtitle.stories.tsx |  3 +-
 ...WithMetaSubtitleAsDocsSubtitle.stories.tsx |  3 +-
 .../src/examples/StoryParameters.stories.tsx  |  3 +-
 code/package.json                             |  1 +
 36 files changed, 350 insertions(+), 99 deletions(-)
 create mode 100644 code/addons/themes/template/stories/decorators.stories.ts
 create mode 100644 code/addons/themes/template/stories/globals.stories.ts
 create mode 100644 code/addons/themes/template/stories/parameters.stories.ts

diff --git a/code/.storybook/main.ts b/code/.storybook/main.ts
index 0f44dde28aa1..24c266d000de 100644
--- a/code/.storybook/main.ts
+++ b/code/.storybook/main.ts
@@ -68,6 +68,10 @@ const config: StorybookConfig = {
       directory: '../addons/toolbars/template/stories',
       titlePrefix: 'addons/toolbars',
     },
+    {
+      directory: '../addons/themes/template/stories',
+      titlePrefix: 'addons/themes',
+    },
     {
       directory: '../addons/onboarding/src',
       titlePrefix: 'addons/onboarding',
@@ -83,6 +87,7 @@ const config: StorybookConfig = {
   ],
   addons: [
     '@storybook/addon-links',
+    '@storybook/addon-themes',
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
     '@storybook/addon-storysource',
diff --git a/code/.storybook/preview.tsx b/code/.storybook/preview.tsx
index 1f66c2396d9d..9299f42052b3 100644
--- a/code/.storybook/preview.tsx
+++ b/code/.storybook/preview.tsx
@@ -166,7 +166,7 @@ export const decorators = [
    * This decorator renders the stories side-by-side, stacked or default based on the theme switcher in the toolbar
    */
   (StoryFn, { globals, playFunction, args, storyGlobals, parameters }) => {
-    let theme = globals.theme;
+    let theme = globals.sb_theme;
     let showPlayFnNotice = false;
 
     // this makes the decorator be out of 'phase' with the actually selected theme in the toolbar
@@ -315,6 +315,9 @@ export const parameters = {
   viewport: {
     options: MINIMAL_VIEWPORTS,
   },
+  themes: {
+    disable: true,
+  },
   backgrounds: {
     options: {
       light: { name: 'light', value: '#edecec' },
diff --git a/code/addons/controls/template/stories/conditional.stories.ts b/code/addons/controls/template/stories/conditional.stories.ts
index 32f795b63f16..ed3c51d8ba8e 100644
--- a/code/addons/controls/template/stories/conditional.stories.ts
+++ b/code/addons/controls/template/stories/conditional.stories.ts
@@ -54,9 +54,9 @@ export const ToggleExpandCollapse = {
 
 export const GlobalBased = {
   argTypes: {
-    ifThemeExists: { control: 'text', if: { global: 'theme' } },
-    ifThemeNotExists: { control: 'text', if: { global: 'theme', exists: false } },
-    ifLightTheme: { control: 'text', if: { global: 'theme', eq: 'light' } },
-    ifNotLightTheme: { control: 'text', if: { global: 'theme', neq: 'light' } },
+    ifThemeExists: { control: 'text', if: { global: 'sb_theme' } },
+    ifThemeNotExists: { control: 'text', if: { global: 'sb_theme', exists: false } },
+    ifLightTheme: { control: 'text', if: { global: 'sb_theme', eq: 'light' } },
+    ifNotLightTheme: { control: 'text', if: { global: 'sb_theme', neq: 'light' } },
   },
 };
diff --git a/code/addons/interactions/src/components/Interaction.stories.tsx b/code/addons/interactions/src/components/Interaction.stories.tsx
index 731d5dca8f0b..98f579090986 100644
--- a/code/addons/interactions/src/components/Interaction.stories.tsx
+++ b/code/addons/interactions/src/components/Interaction.stories.tsx
@@ -54,7 +54,7 @@ export const Disabled: Story = {
 
 export const Hovered: Story = {
   ...Done,
-  globals: { theme: 'light' },
+  globals: { sb_theme: 'light' },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     await userEvent.hover(canvas.getByRole('button'));
diff --git a/code/addons/interactions/src/components/InteractionsPanel.stories.tsx b/code/addons/interactions/src/components/InteractionsPanel.stories.tsx
index 3d673e2605b0..322c3a416001 100644
--- a/code/addons/interactions/src/components/InteractionsPanel.stories.tsx
+++ b/code/addons/interactions/src/components/InteractionsPanel.stories.tsx
@@ -34,7 +34,7 @@ const meta = {
     ),
   ],
   parameters: { layout: 'fullscreen' },
-  globals: { theme: 'light' },
+  globals: { sb_theme: 'light' },
   args: {
     calls: new Map(getCalls(CallStates.DONE).map((call) => [call.id, call])),
     controls: SubnavStories.args.controls,
diff --git a/code/addons/interactions/template/stories/basics.stories.ts b/code/addons/interactions/template/stories/basics.stories.ts
index 76112af830c1..459471817711 100644
--- a/code/addons/interactions/template/stories/basics.stories.ts
+++ b/code/addons/interactions/template/stories/basics.stories.ts
@@ -15,7 +15,7 @@ export default {
     onSuccess: fn(),
   },
   globals: {
-    theme: 'light',
+    sb_theme: 'light',
   },
 };
 
diff --git a/code/addons/themes/src/constants.ts b/code/addons/themes/src/constants.ts
index 677c9499a7b4..654cc57ea893 100644
--- a/code/addons/themes/src/constants.ts
+++ b/code/addons/themes/src/constants.ts
@@ -15,6 +15,7 @@ export const DEFAULT_ADDON_STATE: ThemeAddonState = {
 
 export interface ThemeParameters {
   themeOverride?: string;
+  disable?: boolean;
 }
 
 export const DEFAULT_THEME_PARAMETERS: ThemeParameters = {};
diff --git a/code/addons/themes/src/decorators/class-name.decorator.tsx b/code/addons/themes/src/decorators/class-name.decorator.tsx
index b8ebe8c89810..4bc56202f038 100644
--- a/code/addons/themes/src/decorators/class-name.decorator.tsx
+++ b/code/addons/themes/src/decorators/class-name.decorator.tsx
@@ -14,7 +14,7 @@ const DEFAULT_ELEMENT_SELECTOR = 'html';
 const classStringToArray = (classString: string) => classString.split(' ').filter(Boolean);
 
 // TODO check with @kasperpeulen: change the types so they can be correctly inferred from context e.g. <Story extends (...args: any[]) => any>
-export const withThemeByClassName = <TRenderer extends Renderer = any>({
+export const withThemeByClassName = <TRenderer extends Renderer = Renderer>({
   themes,
   defaultTheme,
   parentSelector = DEFAULT_ELEMENT_SELECTOR,
@@ -47,7 +47,7 @@ export const withThemeByClassName = <TRenderer extends Renderer = any>({
       if (newThemeClasses.length > 0) {
         parentElement.classList.add(...newThemeClasses);
       }
-    }, [themeOverride, selected, parentSelector]);
+    }, [themeOverride, selected]);
 
     return storyFn();
   };
diff --git a/code/addons/themes/src/decorators/data-attribute.decorator.tsx b/code/addons/themes/src/decorators/data-attribute.decorator.tsx
index dee9988ec7d0..05ad62792e7c 100644
--- a/code/addons/themes/src/decorators/data-attribute.decorator.tsx
+++ b/code/addons/themes/src/decorators/data-attribute.decorator.tsx
@@ -31,7 +31,7 @@ export const withThemeByDataAttribute = <TRenderer extends Renderer = any>({
       if (parentElement) {
         parentElement.setAttribute(attributeName, themes[themeKey]);
       }
-    }, [themeOverride, selected, parentSelector, attributeName]);
+    }, [themeOverride, selected]);
 
     return storyFn();
   };
diff --git a/code/addons/themes/src/decorators/provider.decorator.tsx b/code/addons/themes/src/decorators/provider.decorator.tsx
index 09eb5824c488..f8b477810035 100644
--- a/code/addons/themes/src/decorators/provider.decorator.tsx
+++ b/code/addons/themes/src/decorators/provider.decorator.tsx
@@ -38,7 +38,7 @@ export const withThemeFromJSXProvider = <TRenderer extends Renderer = any>({
       const pairs = Object.entries(themes);
 
       return pairs.length === 1 ? pluckThemeFromKeyPairTuple(pairs[0]) : themes[selectedThemeName];
-    }, [themes, selected, themeOverride]);
+    }, [selected, themeOverride]);
 
     if (!Provider) {
       return (
diff --git a/code/addons/themes/src/preview.tsx b/code/addons/themes/src/preview.tsx
index 28c52bdbb57a..6f4a444e7f7c 100644
--- a/code/addons/themes/src/preview.tsx
+++ b/code/addons/themes/src/preview.tsx
@@ -1,7 +1,6 @@
 import type { Renderer, ProjectAnnotations } from 'storybook/internal/types';
-import { GLOBAL_KEY } from './constants';
+import { GLOBAL_KEY as KEY } from './constants';
 
-export const globals: ProjectAnnotations<Renderer>['globals'] = {
-  // Required to make sure SB picks this up from URL params
-  [GLOBAL_KEY]: '',
+export const initialGlobals: ProjectAnnotations<Renderer>['initialGlobals'] = {
+  [KEY]: '',
 };
diff --git a/code/addons/themes/src/theme-switcher.tsx b/code/addons/themes/src/theme-switcher.tsx
index bbc836177ea0..d57b9ce1e5e8 100644
--- a/code/addons/themes/src/theme-switcher.tsx
+++ b/code/addons/themes/src/theme-switcher.tsx
@@ -1,4 +1,4 @@
-import React, { Fragment, useMemo } from 'react';
+import React from 'react';
 import {
   useAddonState,
   useChannel,
@@ -17,6 +17,7 @@ import {
   THEMING_EVENTS,
   DEFAULT_ADDON_STATE,
   DEFAULT_THEME_PARAMETERS,
+  GLOBAL_KEY as KEY,
 } from './constants';
 
 const IconButtonLabel = styled.div(({ theme }) => ({
@@ -27,11 +28,11 @@ const hasMultipleThemes = (themesList: ThemeAddonState['themesList']) => themesL
 const hasTwoThemes = (themesList: ThemeAddonState['themesList']) => themesList.length === 2;
 
 export const ThemeSwitcher = React.memo(function ThemeSwitcher() {
-  const { themeOverride } = useParameter<ThemeParameters>(
+  const { themeOverride, disable } = useParameter<ThemeParameters>(
     PARAM_KEY,
     DEFAULT_THEME_PARAMETERS
   ) as ThemeParameters;
-  const [{ theme: selected }, updateGlobals] = useGlobals();
+  const [{ theme: selected }, updateGlobals, storyGlobals] = useGlobals();
 
   const channel = addons.getChannel();
   const fromLast = channel.last(THEMING_EVENTS.REGISTER_THEMES);
@@ -45,6 +46,8 @@ export const ThemeSwitcher = React.memo(function ThemeSwitcher() {
     initializeThemeState
   );
 
+  const isLocked = KEY in storyGlobals || !!themeOverride;
+
   useChannel({
     [THEMING_EVENTS.REGISTER_THEMES]: ({ themes, defaultTheme }) => {
       updateState((state) => ({
@@ -55,21 +58,24 @@ export const ThemeSwitcher = React.memo(function ThemeSwitcher() {
     },
   });
 
-  const label = useMemo(() => {
-    if (themeOverride) {
-      return <>Story override</>;
-    }
-
-    const themeName = selected || themeDefault;
+  const themeName = selected || themeDefault;
+  let label = '';
+  if (isLocked) {
+    label = 'Story override';
+  } else if (themeName) {
+    label = `${themeName} theme`;
+  }
 
-    return themeName && <>{`${themeName} theme`}</>;
-  }, [themeOverride, themeDefault, selected]);
+  if (disable) {
+    return null;
+  }
 
   if (hasTwoThemes(themesList)) {
     const currentTheme = selected || themeDefault;
     const alternateTheme = themesList.find((theme) => theme !== currentTheme);
     return (
       <IconButton
+        disabled={isLocked}
         key={THEME_SWITCHER_ID}
         active={!themeOverride}
         title="Theme"
@@ -78,40 +84,43 @@ export const ThemeSwitcher = React.memo(function ThemeSwitcher() {
         }}
       >
         <PaintBrushIcon />
-        {label && <IconButtonLabel>{label}</IconButtonLabel>}
+        {label ? <IconButtonLabel>{label}</IconButtonLabel> : null}
       </IconButton>
     );
   }
 
   if (hasMultipleThemes(themesList)) {
     return (
-      <Fragment>
-        <WithTooltip
-          placement="top"
-          trigger="click"
-          closeOnOutsideClick
-          tooltip={({ onHide }) => {
-            return (
-              <TooltipLinkList
-                links={themesList.map((theme) => ({
-                  id: theme,
-                  title: theme,
-                  active: selected === theme,
-                  onClick: () => {
-                    updateGlobals({ theme });
-                    onHide();
-                  },
-                }))}
-              />
-            );
-          }}
+      <WithTooltip
+        placement="top"
+        trigger="click"
+        closeOnOutsideClick
+        tooltip={({ onHide }) => {
+          return (
+            <TooltipLinkList
+              links={themesList.map((theme) => ({
+                id: theme,
+                title: theme,
+                active: selected === theme,
+                onClick: () => {
+                  updateGlobals({ theme });
+                  onHide();
+                },
+              }))}
+            />
+          );
+        }}
+      >
+        <IconButton
+          key={THEME_SWITCHER_ID}
+          active={!themeOverride}
+          title="Theme"
+          disabled={isLocked}
         >
-          <IconButton key={THEME_SWITCHER_ID} active={!themeOverride} title="Theme">
-            <PaintBrushIcon />
-            {label && <IconButtonLabel>{label}</IconButtonLabel>}
-          </IconButton>
-        </WithTooltip>
-      </Fragment>
+          <PaintBrushIcon />
+          {label && <IconButtonLabel>{label}</IconButtonLabel>}
+        </IconButton>
+      </WithTooltip>
     );
   }
 
diff --git a/code/addons/themes/template/stories/decorators.stories.ts b/code/addons/themes/template/stories/decorators.stories.ts
new file mode 100644
index 000000000000..b5ac268e6956
--- /dev/null
+++ b/code/addons/themes/template/stories/decorators.stories.ts
@@ -0,0 +1,93 @@
+import { global as globalThis } from '@storybook/global';
+import {
+  withThemeByClassName,
+  withThemeByDataAttribute,
+  withThemeFromJSXProvider,
+} from '@storybook/addon-themes';
+import { useEffect } from 'storybook/internal/preview-api';
+
+const cleanup = () => {
+  const existing = globalThis.document.querySelector('style[data-theme-css]');
+  if (existing) {
+    existing.remove();
+  }
+};
+
+const addStyleSheetDecorator = (storyFn: any) => {
+  useEffect(() => {
+    cleanup();
+
+    const sheet = globalThis.document.createElement('style');
+    sheet.setAttribute('data-theme-css', '');
+    sheet.textContent = `
+      [data-theme="theme-a"], .theme-a {
+        background-color: white;
+        color: black;
+      }
+      [data-theme="theme-b"], .theme-b {
+        background-color: black;
+        color: white;
+      }
+    `;
+
+    globalThis.document.body.appendChild(sheet);
+
+    return cleanup;
+  });
+
+  return storyFn();
+};
+
+export default {
+  component: globalThis.Components.Pre,
+  args: {
+    text: 'Testing the themes',
+  },
+  parameters: {
+    chromatic: { disable: true },
+    themes: { disable: false },
+  },
+  decorators: [addStyleSheetDecorator],
+};
+
+export const WithThemeByClassName = {
+  globals: {},
+  decorators: [
+    withThemeByClassName({
+      defaultTheme: 'a',
+      themes: { a: 'theme-a', b: 'theme-b' },
+      parentSelector: '#storybook-root > *',
+    }),
+  ],
+};
+
+export const WithThemeByDataAttribute = {
+  globals: {},
+  decorators: [
+    withThemeByDataAttribute({
+      defaultTheme: 'a',
+      themes: { a: 'theme-a', b: 'theme-b' },
+      parentSelector: '#storybook-root > *',
+    }),
+  ],
+};
+
+export const WithThemeFromJSXProvider = {
+  globals: {},
+  decorators: [
+    withThemeFromJSXProvider({
+      defaultTheme: 'a',
+      themes: { a: { custom: 'theme-a' }, b: { custom: 'theme-b' } },
+      Provider: ({ theme, children }: any) => {
+        // this is not was a normal provider looks like obviously, but this needs to work in non-react as well
+        // the timeout is to wait for the render to complete, as it's not possible to use the useEffect hook here
+        setTimeout(() => {
+          const element = globalThis.document.querySelector('#storybook-root > *');
+          element?.classList.remove('theme-a', 'theme-b');
+          element?.classList.add(theme.custom);
+        }, 16);
+        return children;
+      },
+    }),
+  ],
+};
diff --git a/code/addons/themes/template/stories/globals.stories.ts b/code/addons/themes/template/stories/globals.stories.ts
new file mode 100644
index 000000000000..d18025328edc
--- /dev/null
+++ b/code/addons/themes/template/stories/globals.stories.ts
@@ -0,0 +1,64 @@
+import { global as globalThis } from '@storybook/global';
+import {
+  withThemeByClassName,
+  withThemeByDataAttribute,
+  withThemeFromJSXProvider,
+} from '@storybook/addon-themes';
+import { useEffect } from 'storybook/internal/preview-api';
+
+const cleanup = () => {
+  const existing = globalThis.document.querySelector('style[data-theme-css]');
+  if (existing) {
+    existing.remove();
+  }
+};
+
+const addStyleSheetDecorator = (storyFn: any) => {
+  useEffect(() => {
+    cleanup();
+
+    const sheet = globalThis.document.createElement('style');
+    sheet.setAttribute('data-theme-css', '');
+    sheet.textContent = `
+      [data-theme="theme-a"], .theme-a {
+        background-color: white;
+        color: black;
+      }
+      [data-theme="theme-b"], .theme-b {
+        background-color: black;
+        color: white;
+      }
+    `;
+
+    globalThis.document.body.appendChild(sheet);
+
+    return cleanup;
+  });
+
+  return storyFn();
+};
+
+export default {
+  component: globalThis.Components.Pre,
+  args: {
+    text: 'Testing the themes',
+  },
+  parameters: {
+    chromatic: { disable: true },
+    themes: { disable: false },
+  },
+  decorators: [addStyleSheetDecorator],
+};
+
+export const SetGlobal = {
+  globals: {
+    theme: 'b',
+  },
+  decorators: [
+    withThemeByClassName({
+      defaultTheme: 'a',
+      themes: { a: 'theme-a', b: 'theme-b' },
+      parentSelector: '#storybook-root > *',
+    }),
+  ],
+};
diff --git a/code/addons/themes/template/stories/parameters.stories.ts b/code/addons/themes/template/stories/parameters.stories.ts
new file mode 100644
index 000000000000..acf9171d5ac2
--- /dev/null
+++ b/code/addons/themes/template/stories/parameters.stories.ts
@@ -0,0 +1,81 @@
+import { global as globalThis } from '@storybook/global';
+import {
+  withThemeByClassName,
+  withThemeByDataAttribute,
+  withThemeFromJSXProvider,
+} from '@storybook/addon-themes';
+import { useEffect } from 'storybook/internal/preview-api';
+
+const cleanup = () => {
+  const existing = globalThis.document.querySelector('style[data-theme-css]');
+  if (existing) {
+    existing.remove();
+  }
+};
+
+const addStyleSheetDecorator = (storyFn: any) => {
+  useEffect(() => {
+    cleanup();
+
+    const sheet = globalThis.document.createElement('style');
+    sheet.setAttribute('data-theme-css', '');
+    sheet.textContent = `
+      [data-theme="theme-a"], .theme-a {
+        background-color: white;
+        color: black;
+      }
+      [data-theme="theme-b"], .theme-b {
+        background-color: black;
+        color: white;
+      }
+    `;
+
+    globalThis.document.body.appendChild(sheet);
+
+    return cleanup;
+  });
+
+  return storyFn();
+};
+
+export default {
+  component: globalThis.Components.Pre,
+  args: {
+    text: 'Testing the themes',
+  },
+  parameters: {
+    chromatic: { disable: true },
+    themes: { disable: false },
+  },
+  decorators: [addStyleSheetDecorator],
+};
+
+export const SetOverride = {
+  parameters: {
+    themes: {
+      themeOverride: 'b',
+    },
+  },
+  decorators: [
+    withThemeByClassName({
+      defaultTheme: 'a',
+      themes: { a: 'theme-a', b: 'theme-b' },
+      parentSelector: '#storybook-root > *',
+    }),
+  ],
+};
+
+export const Disabled = {
+  parameters: {
+    themes: {
+      disable: true,
+    },
+  },
+  decorators: [
+    withThemeByClassName({
+      defaultTheme: 'a',
+      themes: { a: 'theme-a', b: 'theme-b' },
+      parentSelector: '#storybook-root > *',
+    }),
+  ],
+};
diff --git a/code/addons/toolbars/template/stories/globals.stories.ts b/code/addons/toolbars/template/stories/globals.stories.ts
index 0dd6a353dd84..dd5b52ddece0 100644
--- a/code/addons/toolbars/template/stories/globals.stories.ts
+++ b/code/addons/toolbars/template/stories/globals.stories.ts
@@ -40,13 +40,13 @@ export const OverrideLocale = {
 
 export const OverrideTheme = {
   globals: {
-    theme: 'dark',
+    sb_theme: 'dark',
   },
 };
 
 export const OverrideBoth = {
   globals: {
     locale: 'kr',
-    theme: 'dark',
+    sb_theme: 'dark',
   },
 };
diff --git a/code/addons/toolbars/template/stories/preview.ts b/code/addons/toolbars/template/stories/preview.ts
index 0df95d7080d1..fe2f2531df93 100644
--- a/code/addons/toolbars/template/stories/preview.ts
+++ b/code/addons/toolbars/template/stories/preview.ts
@@ -1,5 +1,5 @@
 export const globalTypes = {
-  theme: {
+  sb_theme: {
     name: 'Theme',
     description: 'Global theme for components',
     toolbar: {
@@ -44,6 +44,6 @@ export const globalTypes = {
 };
 
 export const initialGlobals = {
-  theme: 'light',
+  sb_theme: 'light',
   locale: 'en',
 };
diff --git a/code/core/src/components/components/tabs/tabs.stories.tsx b/code/core/src/components/components/tabs/tabs.stories.tsx
index 1e8994ca0503..1958c3e18555 100644
--- a/code/core/src/components/components/tabs/tabs.stories.tsx
+++ b/code/core/src/components/components/tabs/tabs.stories.tsx
@@ -181,7 +181,7 @@ export const StatefulDynamicWithOpenTooltip = {
     },
     chromatic: { viewports: [380] },
   },
-  globals: { theme: 'light', viewport: 'sized' },
+  globals: { sb_theme: 'light', viewport: 'sized' },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
diff --git a/code/core/src/manager/components/layout/Layout.stories.tsx b/code/core/src/manager/components/layout/Layout.stories.tsx
index 7240c364b50b..8282d8434587 100644
--- a/code/core/src/manager/components/layout/Layout.stories.tsx
+++ b/code/core/src/manager/components/layout/Layout.stories.tsx
@@ -63,7 +63,7 @@ const meta = {
     setManagerLayoutState: fn(),
     hasTab: false,
   },
-  globals: { theme: 'light' },
+  globals: { sb_theme: 'light' },
   parameters: { layout: 'fullscreen' },
   decorators: [
     MobileNavigationStoriesMeta.decorators[0] as any,
@@ -95,7 +95,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Desktop: Story = {};
 export const Dark: Story = {
-  globals: { theme: 'dark' },
+  globals: { sb_theme: 'dark' },
 };
 export const DesktopHorizontal: Story = {
   args: {
@@ -125,7 +125,7 @@ export const Mobile = {
 };
 export const MobileDark = {
   ...Mobile,
-  globals: { theme: 'dark' },
+  globals: { sb_theme: 'dark' },
 };
 
 export const MobileDocs = {
diff --git a/code/core/src/manager/components/mobile/about/MobileAbout.stories.tsx b/code/core/src/manager/components/mobile/about/MobileAbout.stories.tsx
index 27a8c1197d43..e552171cca4b 100644
--- a/code/core/src/manager/components/mobile/about/MobileAbout.stories.tsx
+++ b/code/core/src/manager/components/mobile/about/MobileAbout.stories.tsx
@@ -19,7 +19,7 @@ const OpenAboutHelper = ({ children }: { children: any }) => {
 const meta = {
   component: MobileAbout,
   title: 'Mobile/About',
-  globals: { theme: 'light' },
+  globals: { sb_theme: 'light' },
   parameters: {
     layout: 'fullscreen',
     viewport: {
@@ -56,7 +56,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};
 export const Dark: Story = {
-  globals: { theme: 'dark' },
+  globals: { sb_theme: 'dark' },
 };
 
 export const Closed: Story = {
diff --git a/code/core/src/manager/components/mobile/navigation/MobileNavigation.stories.tsx b/code/core/src/manager/components/mobile/navigation/MobileNavigation.stories.tsx
index 5d0b8fe8a4ab..552556add58c 100644
--- a/code/core/src/manager/components/mobile/navigation/MobileNavigation.stories.tsx
+++ b/code/core/src/manager/components/mobile/navigation/MobileNavigation.stories.tsx
@@ -86,10 +86,10 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-  globals: { theme: 'light' },
+  globals: { sb_theme: 'light' },
 };
 export const Dark: Story = {
-  globals: { theme: 'dark' },
+  globals: { sb_theme: 'dark' },
   parameters: { chromatic: { disable: true } },
 };
 
diff --git a/code/core/src/manager/components/preview/Iframe.stories.tsx b/code/core/src/manager/components/preview/Iframe.stories.tsx
index 7d95583f3b54..ba63911b6f71 100644
--- a/code/core/src/manager/components/preview/Iframe.stories.tsx
+++ b/code/core/src/manager/components/preview/Iframe.stories.tsx
@@ -22,7 +22,7 @@ export default {
     },
     chromatic: { viewports: [700] },
   },
-  globals: { theme: 'light' },
+  globals: { sb_theme: 'light' },
 };
 
 const style: CSSProperties = {
diff --git a/code/core/src/manager/components/sidebar/Explorer.stories.tsx b/code/core/src/manager/components/sidebar/Explorer.stories.tsx
index 813163595329..9cf8c887397f 100644
--- a/code/core/src/manager/components/sidebar/Explorer.stories.tsx
+++ b/code/core/src/manager/components/sidebar/Explorer.stories.tsx
@@ -9,7 +9,7 @@ import { IconSymbols } from './IconSymbols';
 export default {
   component: Explorer,
   title: 'Sidebar/Explorer',
-  globals: { theme: 'side-by-side' },
+  globals: { sb_theme: 'side-by-side' },
   parameters: { layout: 'fullscreen' },
   decorators: [
     RefStories.default.decorators[0],
diff --git a/code/core/src/manager/components/sidebar/FileSearchModal.stories.tsx b/code/core/src/manager/components/sidebar/FileSearchModal.stories.tsx
index e419bd2b57ab..c86f3729f63c 100644
--- a/code/core/src/manager/components/sidebar/FileSearchModal.stories.tsx
+++ b/code/core/src/manager/components/sidebar/FileSearchModal.stories.tsx
@@ -19,7 +19,7 @@ const meta = {
     (Story, context) => {
       const [container, setContainer] = useState<HTMLElement | null>(null);
 
-      if (context.globals.theme === 'side-by-side') {
+      if (context.globals.sb_theme === 'side-by-side') {
         return (
           <div
             ref={(element) => {
diff --git a/code/core/src/manager/components/sidebar/Tree.stories.tsx b/code/core/src/manager/components/sidebar/Tree.stories.tsx
index 7b8ba3ae817c..dfc2a9e41910 100644
--- a/code/core/src/manager/components/sidebar/Tree.stories.tsx
+++ b/code/core/src/manager/components/sidebar/Tree.stories.tsx
@@ -8,27 +8,27 @@ import { within, expect } from '@storybook/test';
 import { Tree } from './Tree';
 import { index } from './mockdata.large';
 import { DEFAULT_REF_ID } from './Sidebar';
-import { viewport } from '@popperjs/core';
-
-const customViewports = {
-  sized: {
-    name: 'Sized',
-    styles: {
-      width: '380px',
-      height: '90%',
-    },
-  },
-};
 
 const meta = {
   component: Tree,
   title: 'Sidebar/Tree',
   excludeStories: /.*Data$/,
-  globals: { theme: 'light', viewport: 'sized', viewportRotated: false },
+  globals: {
+    sb_theme: 'light',
+    viewport: { value: 'sized' },
+  },
   parameters: {
     layout: 'fullscreen',
     viewport: {
-      viewports: customViewports,
+      viewports: {
+        sized: {
+          name: 'Sized',
+          styles: {
+            width: '380px',
+            height: '90%',
+          },
+        },
+      },
     },
     chromatic: { viewports: [380] },
   },
@@ -64,7 +64,7 @@ export const Full: Story = {
 };
 export const Dark: Story = {
   ...Full,
-  globals: { theme: 'dark' },
+  globals: { sb_theme: 'dark' },
 };
 
 export const SingleStoryComponents: Story = {
diff --git a/code/core/src/preview-api/Errors.stories.tsx b/code/core/src/preview-api/Errors.stories.tsx
index 53147f848611..231905e9bca5 100644
--- a/code/core/src/preview-api/Errors.stories.tsx
+++ b/code/core/src/preview-api/Errors.stories.tsx
@@ -40,7 +40,7 @@ export default {
   parameters: {
     layout: 'fullscreen',
   },
-  globals: { theme: 'light' },
+  globals: { sb_theme: 'light' },
   title: 'Errors',
   args: {
     id: 'sb-errordisplay',
diff --git a/code/frameworks/angular/template/stories/core/decorators/theme-decorator/decorators.stories.ts b/code/frameworks/angular/template/stories/core/decorators/theme-decorator/decorators.stories.ts
index 11bba5843353..71bb347eac71 100644
--- a/code/frameworks/angular/template/stories/core/decorators/theme-decorator/decorators.stories.ts
+++ b/code/frameworks/angular/template/stories/core/decorators/theme-decorator/decorators.stories.ts
@@ -1,7 +1,7 @@
 import { Args, Meta, componentWrapperDecorator } from '@storybook/angular';
 
 export const Base = (args: Args) => ({
-  template: 'Change theme with the brush in toolbar',
+  template: 'Change sb_theme with the brush in toolbar',
   props: {
     ...args,
   },
@@ -14,7 +14,7 @@ export default {
     componentWrapperDecorator(
       (story) => `<div [class]="myTheme">${story}</div>`,
 
-      ({ globals }) => ({ myTheme: `${globals['theme']}-theme` })
+      ({ globals }) => ({ myTheme: `${globals['sb_theme']}-theme` })
     ),
   ],
 } as Meta;
diff --git a/code/lib/blocks/src/examples/Button.stories.tsx b/code/lib/blocks/src/examples/Button.stories.tsx
index a7fac335a7c2..71678472a9e7 100644
--- a/code/lib/blocks/src/examples/Button.stories.tsx
+++ b/code/lib/blocks/src/examples/Button.stories.tsx
@@ -12,7 +12,7 @@ const meta = {
     backgroundColor: { control: 'color' },
   },
   // Stop *this* story from being stacked in Chromatic
-  globals: { theme: 'default' },
+  globals: { sb_theme: 'default' },
   parameters: {
     // these are to test the deprecated features of the Description block
     notes: 'These are notes for the Button stories',
diff --git a/code/lib/blocks/src/examples/ButtonWithMetaDescriptionAsBoth.stories.tsx b/code/lib/blocks/src/examples/ButtonWithMetaDescriptionAsBoth.stories.tsx
index 84596bac72e9..38c70ac80a86 100644
--- a/code/lib/blocks/src/examples/ButtonWithMetaDescriptionAsBoth.stories.tsx
+++ b/code/lib/blocks/src/examples/ButtonWithMetaDescriptionAsBoth.stories.tsx
@@ -14,7 +14,7 @@ const meta = {
     backgroundColor: { control: 'color' },
   },
   // Stop *this* story from being stacked in Chromatic
-  globals: { theme: 'default' },
+  globals: { sb_theme: 'default' },
   parameters: {
     docs: {
       description: {
diff --git a/code/lib/blocks/src/examples/ButtonWithMetaDescriptionAsComment.stories.tsx b/code/lib/blocks/src/examples/ButtonWithMetaDescriptionAsComment.stories.tsx
index 4fb7a5ad5d3a..3060eb59cbfc 100644
--- a/code/lib/blocks/src/examples/ButtonWithMetaDescriptionAsComment.stories.tsx
+++ b/code/lib/blocks/src/examples/ButtonWithMetaDescriptionAsComment.stories.tsx
@@ -13,7 +13,7 @@ const meta = {
     backgroundColor: { control: 'color' },
   },
   // Stop *this* story from being stacked in Chromatic
-  globals: { theme: 'default' },
+  globals: { sb_theme: 'light' },
 } satisfies Meta<typeof Button>;
 
 export default meta;
diff --git a/code/lib/blocks/src/examples/ButtonWithMetaDescriptionAsParameter.stories.tsx b/code/lib/blocks/src/examples/ButtonWithMetaDescriptionAsParameter.stories.tsx
index ce59432f86dd..e4de6047b668 100644
--- a/code/lib/blocks/src/examples/ButtonWithMetaDescriptionAsParameter.stories.tsx
+++ b/code/lib/blocks/src/examples/ButtonWithMetaDescriptionAsParameter.stories.tsx
@@ -7,8 +7,7 @@ const meta = {
   argTypes: {
     backgroundColor: { control: 'color' },
   },
-  // Stop *this* story from being stacked in Chromatic
-  globals: { theme: 'default' },
+  globals: { sb_theme: 'light' },
   parameters: {
     docs: {
       description: {
diff --git a/code/lib/blocks/src/examples/ButtonWithMetaSubtitleAsBoth.stories.tsx b/code/lib/blocks/src/examples/ButtonWithMetaSubtitleAsBoth.stories.tsx
index ebae54acd1dd..04a6cec92d54 100644
--- a/code/lib/blocks/src/examples/ButtonWithMetaSubtitleAsBoth.stories.tsx
+++ b/code/lib/blocks/src/examples/ButtonWithMetaSubtitleAsBoth.stories.tsx
@@ -7,8 +7,7 @@ const meta = {
   argTypes: {
     backgroundColor: { control: 'color' },
   },
-  // Stop *this* story from being stacked in Chromatic
-  globals: { theme: 'default' },
+  globals: { sb_theme: 'light' },
   parameters: {
     // this is to test the deprecated features of the Subtitle block
     componentSubtitle: 'This subtitle is set in parameters.componentSubtitle',
diff --git a/code/lib/blocks/src/examples/ButtonWithMetaSubtitleAsComponentSubtitle.stories.tsx b/code/lib/blocks/src/examples/ButtonWithMetaSubtitleAsComponentSubtitle.stories.tsx
index f4df18d010e6..11ee4d719169 100644
--- a/code/lib/blocks/src/examples/ButtonWithMetaSubtitleAsComponentSubtitle.stories.tsx
+++ b/code/lib/blocks/src/examples/ButtonWithMetaSubtitleAsComponentSubtitle.stories.tsx
@@ -7,8 +7,7 @@ const meta = {
   argTypes: {
     backgroundColor: { control: 'color' },
   },
-  // Stop *this* story from being stacked in Chromatic
-  globals: { theme: 'default' },
+  globals: { sb_theme: 'light' },
   parameters: {
     // this is to test the deprecated features of the Subtitle block
     componentSubtitle: 'This subtitle is set in parameters.componentSubtitle',
diff --git a/code/lib/blocks/src/examples/ButtonWithMetaSubtitleAsDocsSubtitle.stories.tsx b/code/lib/blocks/src/examples/ButtonWithMetaSubtitleAsDocsSubtitle.stories.tsx
index 971bd1d123db..a36e8ce3bbcb 100644
--- a/code/lib/blocks/src/examples/ButtonWithMetaSubtitleAsDocsSubtitle.stories.tsx
+++ b/code/lib/blocks/src/examples/ButtonWithMetaSubtitleAsDocsSubtitle.stories.tsx
@@ -7,8 +7,7 @@ const meta = {
   argTypes: {
     backgroundColor: { control: 'color' },
   },
-  // Stop *this* story from being stacked in Chromatic
-  globals: { theme: 'default' },
+  globals: { sb_theme: 'light' },
   parameters: {
     docs: {
       subtitle: 'This subtitle is set in parameters.docs.subtitle',
diff --git a/code/lib/blocks/src/examples/StoryParameters.stories.tsx b/code/lib/blocks/src/examples/StoryParameters.stories.tsx
index a8bc66c9e04b..62f5c545df9e 100644
--- a/code/lib/blocks/src/examples/StoryParameters.stories.tsx
+++ b/code/lib/blocks/src/examples/StoryParameters.stories.tsx
@@ -4,8 +4,7 @@ import { SimpleSizeTest } from './SimpleSizeTest';
 const meta = {
   title: 'examples/Stories for the Story Block',
   component: SimpleSizeTest,
-  // Stop *this* story from being stacked in Chromatic (we want the caller to stack though)
-  globals: { theme: 'default' },
+  globals: { sb_theme: 'light' },
 } satisfies Meta<typeof SimpleSizeTest>;
 export default meta;
 
diff --git a/code/package.json b/code/package.json
index 34e857d4681e..fc4a1c93c6ab 100644
--- a/code/package.json
+++ b/code/package.json
@@ -108,6 +108,7 @@
     "@storybook/addon-onboarding": "workspace:*",
     "@storybook/addon-outline": "workspace:*",
     "@storybook/addon-storysource": "workspace:*",
+    "@storybook/addon-themes": "workspace:*",
     "@storybook/addon-toolbars": "workspace:*",
     "@storybook/addon-viewport": "workspace:*",
     "@storybook/angular": "workspace:*",

From 6a273c172ba30a959bb6fddcde2d1897470be101 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Wed, 31 Jul 2024 16:02:25 +0200
Subject: [PATCH 02/13] fix lockfile

---
 code/yarn.lock | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/code/yarn.lock b/code/yarn.lock
index 8eea5e0814e1..4b2b7b5fc5b9 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -5382,7 +5382,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-themes@workspace:addons/themes":
+"@storybook/addon-themes@workspace:*, @storybook/addon-themes@workspace:addons/themes":
   version: 0.0.0-use.local
   resolution: "@storybook/addon-themes@workspace:addons/themes"
   dependencies:
@@ -6499,6 +6499,7 @@ __metadata:
     "@storybook/addon-onboarding": "workspace:*"
     "@storybook/addon-outline": "workspace:*"
     "@storybook/addon-storysource": "workspace:*"
+    "@storybook/addon-themes": "workspace:*"
     "@storybook/addon-toolbars": "workspace:*"
     "@storybook/addon-viewport": "workspace:*"
     "@storybook/angular": "workspace:*"

From f621766c44b3545ec3d5756a05308c8180a1f6d1 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Wed, 31 Jul 2024 16:58:25 +0200
Subject: [PATCH 03/13] fix

---
 code/core/src/manager/components/sidebar/Tree.stories.tsx | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/code/core/src/manager/components/sidebar/Tree.stories.tsx b/code/core/src/manager/components/sidebar/Tree.stories.tsx
index dfc2a9e41910..ab965dfb7d51 100644
--- a/code/core/src/manager/components/sidebar/Tree.stories.tsx
+++ b/code/core/src/manager/components/sidebar/Tree.stories.tsx
@@ -20,7 +20,7 @@ const meta = {
   parameters: {
     layout: 'fullscreen',
     viewport: {
-      viewports: {
+      options: {
         sized: {
           name: 'Sized',
           styles: {
@@ -206,11 +206,6 @@ export const SkipToCanvasLinkFocused: Story = {
   ...DocsOnlySingleStoryComponents,
   parameters: {
     chromatic: { disable: true },
-    viewport: {
-      defaultViewport: 'sized',
-      viewports: customViewports,
-      defaultOrientation: 'landscape',
-    },
   },
   play: async ({ canvasElement }) => {
     const screen = await within(canvasElement);

From 690368d8f4570288bb153630c287ca5bd983e0c7 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Wed, 31 Jul 2024 18:22:45 +0200
Subject: [PATCH 04/13] improvements

---
 code/.storybook/preview.tsx                   | 50 +++++++++++++------
 .../template/stories/decorators.stories.ts    |  3 ++
 .../template/stories/globals.stories.ts       |  9 ++--
 .../template/stories/parameters.stories.ts    |  9 ++--
 code/lib/blocks/src/blocks/Anchor.stories.tsx |  1 +
 .../blocks/src/blocks/ArgTypes.stories.tsx    |  1 +
 code/lib/blocks/src/blocks/Canvas.stories.tsx |  1 +
 .../blocks/src/blocks/Controls.stories.tsx    |  1 +
 .../blocks/src/blocks/Description.stories.tsx |  1 +
 .../blocks/src/blocks/DocsPage.stories.tsx    |  1 +
 .../blocks/src/blocks/Markdown.stories.tsx    |  5 +-
 .../lib/blocks/src/blocks/Primary.stories.tsx |  1 +
 code/lib/blocks/src/blocks/Source.stories.tsx |  1 +
 .../lib/blocks/src/blocks/Stories.stories.tsx |  5 +-
 code/lib/blocks/src/blocks/Story.stories.tsx  |  1 +
 .../blocks/src/blocks/Subtitle.stories.tsx    |  1 +
 code/lib/blocks/src/blocks/Title.stories.tsx  |  1 +
 .../components/ArgsTable/ArgRow.stories.tsx   |  1 +
 18 files changed, 67 insertions(+), 26 deletions(-)

diff --git a/code/.storybook/preview.tsx b/code/.storybook/preview.tsx
index 9299f42052b3..846a858ed75f 100644
--- a/code/.storybook/preview.tsx
+++ b/code/.storybook/preview.tsx
@@ -34,7 +34,7 @@ const ThemeBlock = styled.div<{ side: 'left' | 'right'; layout: string }>(
     overflow: 'auto',
   },
   ({ layout }) => ({
-    padding: layout === 'fullscreen' ? 0 : 10,
+    padding: layout === 'fullscreen' ? 0 : '1rem',
   }),
   ({ theme }) => ({
     background: theme.background.content,
@@ -55,14 +55,15 @@ const ThemeBlock = styled.div<{ side: 'left' | 'right'; layout: string }>(
 const ThemeStack = styled.div<{ layout: string }>(
   {
     position: 'relative',
-    minHeight: 'calc(50vh - 15px)',
+    // minHeight: 'calc(50vh - 15px)',
+    flex: 1,
   },
   ({ theme }) => ({
     background: theme.background.content,
     color: theme.color.defaultText,
   }),
   ({ layout }) => ({
-    padding: layout === 'fullscreen' ? 0 : 10,
+    padding: layout === 'fullscreen' ? 0 : '1rem',
   })
 );
 
@@ -86,6 +87,25 @@ const PlayFnNotice = styled.div(
   })
 );
 
+const StackContainer = ({ children, layout }) => (
+  <div
+    style={{
+      height: '100%',
+      display: 'flex',
+      flexDirection: 'column',
+      // margin: layout === 'fullscreen' ? 0 : '-1rem',
+    }}
+  >
+    <style dangerouslySetInnerHTML={{ __html: 'html, body, #storybook-root { height: 100%; }' }} />
+    {layout === 'fullscreen' ? null : (
+      <style
+        dangerouslySetInnerHTML={{ __html: 'html, body { padding: 0!important; margin: 0; }' }}
+      />
+    )}
+    {children}
+  </div>
+);
+
 const ThemedSetRoot = () => {
   const theme = useTheme();
 
@@ -176,7 +196,7 @@ export const decorators = [
     if (playFunction && args.autoplay !== false && !(theme === 'light' || theme === 'dark')) {
       theme = 'light';
       showPlayFnNotice = true;
-    } else if (isChromatic() && !storyGlobals.theme && !playFunction) {
+    } else if (isChromatic() && !storyGlobals.sb_theme && !playFunction) {
       theme = 'stacked';
     }
 
@@ -206,16 +226,18 @@ export const decorators = [
             <ThemeProvider theme={convert(themes.light)}>
               <Global styles={createReset} />
             </ThemeProvider>
-            <ThemeProvider theme={convert(themes.light)}>
-              <ThemeStack data-side="left" layout={parameters.layout}>
-                <StoryFn />
-              </ThemeStack>
-            </ThemeProvider>
-            <ThemeProvider theme={convert(themes.dark)}>
-              <ThemeStack data-side="right" layout={parameters.layout}>
-                <StoryFn />
-              </ThemeStack>
-            </ThemeProvider>
+            <StackContainer layout={parameters.layout}>
+              <ThemeProvider theme={convert(themes.light)}>
+                <ThemeStack data-side="left" layout={parameters.layout}>
+                  <StoryFn />
+                </ThemeStack>
+              </ThemeProvider>
+              <ThemeProvider theme={convert(themes.dark)}>
+                <ThemeStack data-side="right" layout={parameters.layout}>
+                  <StoryFn />
+                </ThemeStack>
+              </ThemeProvider>
+            </StackContainer>
           </Fragment>
         );
       }
diff --git a/code/addons/themes/template/stories/decorators.stories.ts b/code/addons/themes/template/stories/decorators.stories.ts
index b5ac268e6956..aba8f17d0e79 100644
--- a/code/addons/themes/template/stories/decorators.stories.ts
+++ b/code/addons/themes/template/stories/decorators.stories.ts
@@ -43,6 +43,9 @@ export default {
   args: {
     text: 'Testing the themes',
   },
+  globals: {
+    sb_theme: 'light',
+  },
   parameters: {
     chromatic: { disable: true },
     themes: { disable: false },
diff --git a/code/addons/themes/template/stories/globals.stories.ts b/code/addons/themes/template/stories/globals.stories.ts
index d18025328edc..3d193d1fa71a 100644
--- a/code/addons/themes/template/stories/globals.stories.ts
+++ b/code/addons/themes/template/stories/globals.stories.ts
@@ -1,9 +1,5 @@
 import { global as globalThis } from '@storybook/global';
-import {
-  withThemeByClassName,
-  withThemeByDataAttribute,
-  withThemeFromJSXProvider,
-} from '@storybook/addon-themes';
+import { withThemeByClassName } from '@storybook/addon-themes';
 import { useEffect } from 'storybook/internal/preview-api';
 
 const cleanup = () => {
@@ -47,6 +43,9 @@ export default {
     chromatic: { disable: true },
     themes: { disable: false },
   },
+  globals: {
+    sb_theme: 'light',
+  },
   decorators: [addStyleSheetDecorator],
 };
 
diff --git a/code/addons/themes/template/stories/parameters.stories.ts b/code/addons/themes/template/stories/parameters.stories.ts
index acf9171d5ac2..f2906696859f 100644
--- a/code/addons/themes/template/stories/parameters.stories.ts
+++ b/code/addons/themes/template/stories/parameters.stories.ts
@@ -1,9 +1,5 @@
 import { global as globalThis } from '@storybook/global';
-import {
-  withThemeByClassName,
-  withThemeByDataAttribute,
-  withThemeFromJSXProvider,
-} from '@storybook/addon-themes';
+import { withThemeByClassName } from '@storybook/addon-themes';
 import { useEffect } from 'storybook/internal/preview-api';
 
 const cleanup = () => {
@@ -43,6 +39,9 @@ export default {
   args: {
     text: 'Testing the themes',
   },
+  globals: {
+    sb_theme: 'light',
+  },
   parameters: {
     chromatic: { disable: true },
     themes: { disable: false },
diff --git a/code/lib/blocks/src/blocks/Anchor.stories.tsx b/code/lib/blocks/src/blocks/Anchor.stories.tsx
index bc940993573e..75051f1760be 100644
--- a/code/lib/blocks/src/blocks/Anchor.stories.tsx
+++ b/code/lib/blocks/src/blocks/Anchor.stories.tsx
@@ -4,6 +4,7 @@ import { Anchor } from './Anchor';
 const meta = {
   component: Anchor,
   parameters: {
+    layout: 'fullscreen',
     docsStyles: true,
   },
 } as Meta<typeof Anchor>;
diff --git a/code/lib/blocks/src/blocks/ArgTypes.stories.tsx b/code/lib/blocks/src/blocks/ArgTypes.stories.tsx
index 39d4a1c66b9c..30e5386a1ffd 100644
--- a/code/lib/blocks/src/blocks/ArgTypes.stories.tsx
+++ b/code/lib/blocks/src/blocks/ArgTypes.stories.tsx
@@ -11,6 +11,7 @@ const meta: Meta<typeof ArgTypes> = {
   title: 'Blocks/ArgTypes',
   component: ArgTypes,
   parameters: {
+    layout: 'fullscreen',
     relativeCsfPaths: [
       '../examples/ArgTypesParameters.stories',
       '../examples/ArgTypesWithSubcomponentsParameters.stories',
diff --git a/code/lib/blocks/src/blocks/Canvas.stories.tsx b/code/lib/blocks/src/blocks/Canvas.stories.tsx
index ac32440ba608..4319ef5a0653 100644
--- a/code/lib/blocks/src/blocks/Canvas.stories.tsx
+++ b/code/lib/blocks/src/blocks/Canvas.stories.tsx
@@ -10,6 +10,7 @@ import * as SourceParameterStories from '../examples/SourceParameters.stories';
 const meta: Meta<typeof Canvas> = {
   component: Canvas,
   parameters: {
+    layout: 'fullscreen',
     relativeCsfPaths: [
       '../examples/Button.stories',
       '../examples/CanvasParameters.stories',
diff --git a/code/lib/blocks/src/blocks/Controls.stories.tsx b/code/lib/blocks/src/blocks/Controls.stories.tsx
index b004b08bd614..6d39ab537b89 100644
--- a/code/lib/blocks/src/blocks/Controls.stories.tsx
+++ b/code/lib/blocks/src/blocks/Controls.stories.tsx
@@ -11,6 +11,7 @@ import * as EmptyArgTypesStories from '../examples/EmptyArgTypes.stories';
 const meta = {
   component: Controls,
   parameters: {
+    layout: 'fullscreen',
     relativeCsfPaths: [
       '../examples/ControlsParameters.stories',
       '../examples/EmptyArgTypes.stories',
diff --git a/code/lib/blocks/src/blocks/Description.stories.tsx b/code/lib/blocks/src/blocks/Description.stories.tsx
index d57d808ff554..ee9922b43074 100644
--- a/code/lib/blocks/src/blocks/Description.stories.tsx
+++ b/code/lib/blocks/src/blocks/Description.stories.tsx
@@ -10,6 +10,7 @@ import * as ButtonStoriesWithMetaDescriptionAsBoth from '../examples/ButtonWithM
 const meta: Meta<typeof Description> = {
   component: Description,
   parameters: {
+    layout: 'fullscreen',
     controls: {
       include: [],
     },
diff --git a/code/lib/blocks/src/blocks/DocsPage.stories.tsx b/code/lib/blocks/src/blocks/DocsPage.stories.tsx
index c52674e31c41..6812f7b70586 100644
--- a/code/lib/blocks/src/blocks/DocsPage.stories.tsx
+++ b/code/lib/blocks/src/blocks/DocsPage.stories.tsx
@@ -4,6 +4,7 @@ import { DocsPage } from './DocsPage';
 const meta = {
   component: DocsPage,
   parameters: {
+    layout: 'fullscreen',
     docsStyles: true,
     chromatic: {
       disableSnapshot: true,
diff --git a/code/lib/blocks/src/blocks/Markdown.stories.tsx b/code/lib/blocks/src/blocks/Markdown.stories.tsx
index 69cc118fd6d1..4a4d1bc80d19 100644
--- a/code/lib/blocks/src/blocks/Markdown.stories.tsx
+++ b/code/lib/blocks/src/blocks/Markdown.stories.tsx
@@ -5,7 +5,10 @@ import mdContent from '../examples/Markdown-content.md?raw';
 
 export default {
   component: MarkdownComponent,
-  parameters: { docsStyles: true },
+  parameters: {
+    layout: 'fullscreen',
+    docsStyles: true,
+  },
 };
 
 export const Markdown = {
diff --git a/code/lib/blocks/src/blocks/Primary.stories.tsx b/code/lib/blocks/src/blocks/Primary.stories.tsx
index 4412881fd702..7640be8399dd 100644
--- a/code/lib/blocks/src/blocks/Primary.stories.tsx
+++ b/code/lib/blocks/src/blocks/Primary.stories.tsx
@@ -6,6 +6,7 @@ import * as StoriesParametersStories from '../examples/StoriesParameters.stories
 const meta = {
   component: Primary,
   parameters: {
+    layout: 'fullscreen',
     // workaround for https://github.com/storybookjs/storybook/issues/20505
     docs: { source: { type: 'code' } },
     docsStyles: true,
diff --git a/code/lib/blocks/src/blocks/Source.stories.tsx b/code/lib/blocks/src/blocks/Source.stories.tsx
index 70d85b9d40bd..5ecd69b92fb1 100644
--- a/code/lib/blocks/src/blocks/Source.stories.tsx
+++ b/code/lib/blocks/src/blocks/Source.stories.tsx
@@ -10,6 +10,7 @@ import { argsHash, SourceContext } from './SourceContainer';
 const meta: Meta<typeof Source> = {
   component: Source,
   parameters: {
+    layout: 'fullscreen',
     relativeCsfPaths: ['../examples/SourceParameters.stories'],
     snippets: {
       'storybook-blocks-examples-stories-for-the-source-block--no-parameters': {
diff --git a/code/lib/blocks/src/blocks/Stories.stories.tsx b/code/lib/blocks/src/blocks/Stories.stories.tsx
index 0c91aec638e6..77b2285a8a5a 100644
--- a/code/lib/blocks/src/blocks/Stories.stories.tsx
+++ b/code/lib/blocks/src/blocks/Stories.stories.tsx
@@ -3,7 +3,10 @@ import { Stories } from './Stories';
 
 const meta = {
   component: Stories,
-  parameters: { docsStyles: true },
+  parameters: {
+    layout: 'fullscreen',
+    docsStyles: true,
+  },
 } satisfies Meta<typeof Stories>;
 
 export default meta;
diff --git a/code/lib/blocks/src/blocks/Story.stories.tsx b/code/lib/blocks/src/blocks/Story.stories.tsx
index 27d0770395a2..9bf42b26ad46 100644
--- a/code/lib/blocks/src/blocks/Story.stories.tsx
+++ b/code/lib/blocks/src/blocks/Story.stories.tsx
@@ -10,6 +10,7 @@ import * as StoryParametersStories from '../examples/StoryParameters.stories';
 const meta: Meta<typeof StoryBlock> = {
   component: StoryBlock,
   parameters: {
+    layout: 'fullscreen',
     relativeCsfPaths: ['../examples/Button.stories', '../examples/StoryParameters.stories'],
     docsStyles: true,
   },
diff --git a/code/lib/blocks/src/blocks/Subtitle.stories.tsx b/code/lib/blocks/src/blocks/Subtitle.stories.tsx
index 77accb6d447a..bd38129c5757 100644
--- a/code/lib/blocks/src/blocks/Subtitle.stories.tsx
+++ b/code/lib/blocks/src/blocks/Subtitle.stories.tsx
@@ -9,6 +9,7 @@ import * as ButtonStoriesWithMetaSubtitleAsDocsSubtitle from '../examples/Button
 const meta: Meta<typeof Subtitle> = {
   component: Subtitle,
   parameters: {
+    layout: 'fullscreen',
     controls: {
       include: [],
       hideNoControlsWarning: true,
diff --git a/code/lib/blocks/src/blocks/Title.stories.tsx b/code/lib/blocks/src/blocks/Title.stories.tsx
index a75b6ef72d98..9ac72a10a737 100644
--- a/code/lib/blocks/src/blocks/Title.stories.tsx
+++ b/code/lib/blocks/src/blocks/Title.stories.tsx
@@ -6,6 +6,7 @@ const meta: Meta<typeof Title> = {
   component: Title,
   title: 'Blocks/Title',
   parameters: {
+    layout: 'fullscreen',
     controls: {
       include: [],
       hideNoControlsWarning: true,
diff --git a/code/lib/blocks/src/components/ArgsTable/ArgRow.stories.tsx b/code/lib/blocks/src/components/ArgsTable/ArgRow.stories.tsx
index 439d27363ad4..54d929d0a24f 100644
--- a/code/lib/blocks/src/components/ArgsTable/ArgRow.stories.tsx
+++ b/code/lib/blocks/src/components/ArgsTable/ArgRow.stories.tsx
@@ -6,6 +6,7 @@ import { TableWrapper } from './ArgsTable';
 export default {
   component: ArgRow,
   title: 'Components/ArgsTable/ArgRow',
+
   decorators: [
     (getStory: any) => (
       <ResetWrapper>

From 892fc28b9c5f7f252f15abf6dd402b876a768273 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Wed, 31 Jul 2024 19:13:36 +0200
Subject: [PATCH 05/13] improve

---
 .../components/InteractionsPanel.stories.tsx  | 59 +++++++++----------
 1 file changed, 29 insertions(+), 30 deletions(-)

diff --git a/code/addons/interactions/src/components/InteractionsPanel.stories.tsx b/code/addons/interactions/src/components/InteractionsPanel.stories.tsx
index 322c3a416001..9105ea7f2a3a 100644
--- a/code/addons/interactions/src/components/InteractionsPanel.stories.tsx
+++ b/code/addons/interactions/src/components/InteractionsPanel.stories.tsx
@@ -34,7 +34,6 @@ const meta = {
     ),
   ],
   parameters: { layout: 'fullscreen' },
-  globals: { sb_theme: 'light' },
   args: {
     calls: new Map(getCalls(CallStates.DONE).map((call) => [call.id, call])),
     controls: SubnavStories.args.controls,
@@ -58,35 +57,35 @@ export const Passing: Story = {
   args: {
     interactions: getInteractions(CallStates.DONE),
   },
-};
-Passing.play = async ({ args, canvasElement }) => {
-  if (isChromatic()) return;
-  const canvas = within(canvasElement);
-
-  await waitFor(async () => {
-    await userEvent.click(canvas.getByLabelText('Go to start'));
-    await expect(args.controls.start).toHaveBeenCalled();
-  });
-
-  await waitFor(async () => {
-    await userEvent.click(canvas.getByLabelText('Go back'));
-    await expect(args.controls.back).toHaveBeenCalled();
-  });
-
-  await waitFor(async () => {
-    await userEvent.click(canvas.getByLabelText('Go forward'));
-    await expect(args.controls.next).not.toHaveBeenCalled();
-  });
-
-  await waitFor(async () => {
-    await userEvent.click(canvas.getByLabelText('Go to end'));
-    await expect(args.controls.end).not.toHaveBeenCalled();
-  });
-
-  await waitFor(async () => {
-    await userEvent.click(canvas.getByLabelText('Rerun'));
-    await expect(args.controls.rerun).toHaveBeenCalled();
-  });
+  play: async ({ args, canvasElement }) => {
+    if (isChromatic()) return;
+    const canvas = within(canvasElement);
+
+    await waitFor(async () => {
+      await userEvent.click(canvas.getByLabelText('Go to start'));
+      await expect(args.controls.start).toHaveBeenCalled();
+    });
+
+    await waitFor(async () => {
+      await userEvent.click(canvas.getByLabelText('Go back'));
+      await expect(args.controls.back).toHaveBeenCalled();
+    });
+
+    await waitFor(async () => {
+      await userEvent.click(canvas.getByLabelText('Go forward'));
+      await expect(args.controls.next).not.toHaveBeenCalled();
+    });
+
+    await waitFor(async () => {
+      await userEvent.click(canvas.getByLabelText('Go to end'));
+      await expect(args.controls.end).not.toHaveBeenCalled();
+    });
+
+    await waitFor(async () => {
+      await userEvent.click(canvas.getByLabelText('Rerun'));
+      await expect(args.controls.rerun).toHaveBeenCalled();
+    });
+  },
 };
 
 export const Paused: Story = {

From a1b492cfd25739863ad9ab1a3b9034f61be21fec Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Wed, 31 Jul 2024 19:25:41 +0200
Subject: [PATCH 06/13] improve

---
 code/addons/interactions/src/components/Subnav.stories.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/code/addons/interactions/src/components/Subnav.stories.tsx b/code/addons/interactions/src/components/Subnav.stories.tsx
index 02515ea13f7a..bdaa5fae2831 100644
--- a/code/addons/interactions/src/components/Subnav.stories.tsx
+++ b/code/addons/interactions/src/components/Subnav.stories.tsx
@@ -1,10 +1,14 @@
 import { action } from '@storybook/addon-actions';
 import { CallStates } from '@storybook/instrumenter';
 import { Subnav } from './Subnav';
+import { parameters } from '../preview';
 
 export default {
   title: 'Subnav',
   component: Subnav,
+  parameters: {
+    layout: 'fullscreen',
+  },
   args: {
     controls: {
       start: action('start'),

From 9f3480c86981b0e13dc23a417871d06cfde00b2d Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Wed, 31 Jul 2024 19:44:59 +0200
Subject: [PATCH 07/13] improve

---
 code/lib/blocks/src/components/Story.stories.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/code/lib/blocks/src/components/Story.stories.tsx b/code/lib/blocks/src/components/Story.stories.tsx
index 564fe2bc7ff2..c77cb20708fa 100644
--- a/code/lib/blocks/src/components/Story.stories.tsx
+++ b/code/lib/blocks/src/components/Story.stories.tsx
@@ -29,8 +29,10 @@ const meta: Meta<ExtendedStoryProps> = {
   // @ts-expect-error getting too complex with props
   component: StoryComponent,
   parameters: {
+    layout: 'fullscreen',
     relativeCsfPaths: ['../examples/Button.stories'],
   },
+  globals: { sb_theme: 'light' },
   args: {
     height: '100px',
     primary: false,
@@ -48,7 +50,10 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Loading = () => <StorySkeleton />;
+export const Loading = {
+  globals: { sb_theme: 'side-by-side' },
+  render: () => <StorySkeleton />,
+};
 
 export const Inline: Story = {
   args: {

From 9eabbc03d3eb71ddcfeefe2934b40becdd570361 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Wed, 31 Jul 2024 20:15:19 +0200
Subject: [PATCH 08/13] improve

---
 .../sidebar/FileSearchModal.stories.tsx       | 39 +++++++++----------
 1 file changed, 19 insertions(+), 20 deletions(-)

diff --git a/code/core/src/manager/components/sidebar/FileSearchModal.stories.tsx b/code/core/src/manager/components/sidebar/FileSearchModal.stories.tsx
index c86f3729f63c..8d6d2b7e9c3a 100644
--- a/code/core/src/manager/components/sidebar/FileSearchModal.stories.tsx
+++ b/code/core/src/manager/components/sidebar/FileSearchModal.stories.tsx
@@ -14,31 +14,30 @@ const meta = {
     onOpenChange: fn(),
     setFileSearchQuery: fn(),
   },
+  parameters: {
+    layout: 'fullscreen',
+  },
   // This decorator is used to show the modal in the side by side view
   decorators: [
     (Story, context) => {
       const [container, setContainer] = useState<HTMLElement | null>(null);
 
-      if (context.globals.sb_theme === 'side-by-side') {
-        return (
-          <div
-            ref={(element) => {
-              setContainer(element);
-            }}
-            style={{
-              width: '100%',
-              height: '100%',
-              minHeight: '600px',
-              transform: 'translateZ(0)',
-            }}
-          >
-            {/* @ts-expect-error (non strict) */}
-            {Story({ args: { ...context.args, container } })}
-          </div>
-        );
-      }
-
-      return Story();
+      return (
+        <div
+          ref={(element) => {
+            setContainer(element);
+          }}
+          style={{
+            width: '100%',
+            height: '100%',
+            minHeight: '600px',
+            transform: 'translateZ(0)',
+          }}
+        >
+          {/* @ts-expect-error (non strict) */}
+          {Story({ args: { ...context.args, container } })}
+        </div>
+      );
     },
   ],
 } satisfies Meta<typeof FileSearchModal>;

From 5da8c117a6f51218fea55429c9cdc1f8fd2bc6f1 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Wed, 31 Jul 2024 20:58:12 +0200
Subject: [PATCH 09/13] improvement

---
 .../components/sidebar/Heading.stories.tsx    |  1 +
 .../components/sidebar/Menu.stories.tsx       |  1 +
 .../components/sidebar/Refs.stories.tsx       |  1 +
 .../components/sidebar/Search.stories.tsx     |  1 +
 .../sidebar/SearchResults.stories.tsx         |  1 +
 .../components/sidebar/Sidebar.stories.tsx    | 19 ++++++++++++++++++-
 6 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/code/core/src/manager/components/sidebar/Heading.stories.tsx b/code/core/src/manager/components/sidebar/Heading.stories.tsx
index 067b6207112e..a086e13a345f 100644
--- a/code/core/src/manager/components/sidebar/Heading.stories.tsx
+++ b/code/core/src/manager/components/sidebar/Heading.stories.tsx
@@ -15,6 +15,7 @@ export default {
   title: 'Sidebar/Heading',
   excludeStories: /.*Data$/,
   parameters: { layout: 'fullscreen' },
+  globals: { sb_theme: 'side-by-side' },
   decorators: [
     (storyFn) => <div style={{ padding: '0 20px', maxWidth: '230px' }}>{storyFn()}</div>,
   ],
diff --git a/code/core/src/manager/components/sidebar/Menu.stories.tsx b/code/core/src/manager/components/sidebar/Menu.stories.tsx
index 2e83d1f78dd3..d8acc4331e15 100644
--- a/code/core/src/manager/components/sidebar/Menu.stories.tsx
+++ b/code/core/src/manager/components/sidebar/Menu.stories.tsx
@@ -22,6 +22,7 @@ const meta = {
   args: {
     menu: fakemenu,
   },
+  globals: { sb_theme: 'side-by-side' },
   decorators: [(storyFn) => <LayoutProvider>{storyFn()}</LayoutProvider>],
 } satisfies Meta<typeof SidebarMenu>;
 export default meta;
diff --git a/code/core/src/manager/components/sidebar/Refs.stories.tsx b/code/core/src/manager/components/sidebar/Refs.stories.tsx
index 9018d5208df0..6b89f1b13a57 100644
--- a/code/core/src/manager/components/sidebar/Refs.stories.tsx
+++ b/code/core/src/manager/components/sidebar/Refs.stories.tsx
@@ -12,6 +12,7 @@ export default {
   title: 'Sidebar/Refs',
   excludeStories: /.*Data$/,
   parameters: { layout: 'fullscreen' },
+  globals: { sb_theme: 'side-by-side' },
   decorators: [
     (storyFn: any) => (
       <ManagerContext.Provider value={{ state: { docsOptions: {} } } as any}>
diff --git a/code/core/src/manager/components/sidebar/Search.stories.tsx b/code/core/src/manager/components/sidebar/Search.stories.tsx
index c34f6e56f5c8..8de58e633373 100644
--- a/code/core/src/manager/components/sidebar/Search.stories.tsx
+++ b/code/core/src/manager/components/sidebar/Search.stories.tsx
@@ -24,6 +24,7 @@ const meta = {
   component: Search,
   title: 'Sidebar/Search',
   parameters: { layout: 'fullscreen' },
+  globals: { sb_theme: 'side-by-side' },
   decorators: [
     (storyFn: any) => (
       <div style={{ padding: 20, maxWidth: '230px' }}>
diff --git a/code/core/src/manager/components/sidebar/SearchResults.stories.tsx b/code/core/src/manager/components/sidebar/SearchResults.stories.tsx
index a732a676a5d1..c45473a9c3d3 100644
--- a/code/core/src/manager/components/sidebar/SearchResults.stories.tsx
+++ b/code/core/src/manager/components/sidebar/SearchResults.stories.tsx
@@ -12,6 +12,7 @@ export default {
   title: 'Sidebar/SearchResults',
   includeStories: /^[A-Z]/,
   parameters: { layout: 'fullscreen' },
+  globals: { sb_theme: 'side-by-side' },
   decorators: [
     (storyFn: any) => (
       <div style={{ padding: '0 20px', maxWidth: '230px' }}>
diff --git a/code/core/src/manager/components/sidebar/Sidebar.stories.tsx b/code/core/src/manager/components/sidebar/Sidebar.stories.tsx
index b954cefc84c2..7dd66ca42088 100644
--- a/code/core/src/manager/components/sidebar/Sidebar.stories.tsx
+++ b/code/core/src/manager/components/sidebar/Sidebar.stories.tsx
@@ -73,6 +73,7 @@ const meta = {
       </ManagerContext.Provider>
     ),
   ],
+  globals: { sb_theme: 'side-by-side' },
 } satisfies Meta<typeof Sidebar>;
 
 export default meta;
@@ -208,6 +209,14 @@ export const StatusesOpen: Story = {
 export const Searching: Story = {
   ...StatusesOpen,
   parameters: { chromatic: { delay: 2200 } },
+  globals: { sb_theme: 'light' },
+  decorators: [
+    (StoryFn) => (
+      <div style={{ width: '100vw', height: '100vh', position: 'relative' }}>
+        <StoryFn />
+      </div>
+    ),
+  ],
   play: async ({ canvasElement, step }) => {
     await step('wait 2000ms', () => wait(2000));
     const canvas = await within(canvasElement);
@@ -273,12 +282,20 @@ export const Scrolled: Story = {
   args: {
     storyId: 'group-1--child-b1',
   },
+  decorators: [
+    (StoryFn) => (
+      <div style={{ width: '100vw', height: '100vh', position: 'relative' }}>
+        <StoryFn />
+      </div>
+    ),
+  ],
+
   render: (args) => {
     const [, setState] = React.useState(0);
     return (
       <>
         <button
-          style={{ position: 'absolute', zIndex: 10 }}
+          style={{ position: 'absolute', zIndex: 10, bottom: 0, right: 0 }}
           onClick={() => setState(() => Math.random())}
         >
           Change state

From 46b7025ebd3376b33fd891834e55384580ebd49a Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Wed, 31 Jul 2024 21:00:11 +0200
Subject: [PATCH 10/13] improvement

---
 code/core/src/manager/components/sidebar/TreeNode.stories.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/code/core/src/manager/components/sidebar/TreeNode.stories.tsx b/code/core/src/manager/components/sidebar/TreeNode.stories.tsx
index cf636c64b48e..b78a9b704773 100644
--- a/code/core/src/manager/components/sidebar/TreeNode.stories.tsx
+++ b/code/core/src/manager/components/sidebar/TreeNode.stories.tsx
@@ -7,7 +7,8 @@ import { IconSymbols } from './IconSymbols';
 
 export default {
   title: 'Sidebar/TreeNode',
-  parameters: { layout: 'fullscreen' },
+  parameters: { layout: 'padded' },
+  globals: { sb_theme: 'side-by-side' },
   component: StoryNode,
   decorators: [
     (StoryFn: any) => (

From 10336b0facc2817a9867f917d6ed59cae1ded186 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Wed, 31 Jul 2024 21:30:27 +0200
Subject: [PATCH 11/13] improvements

---
 code/core/src/manager/components/sidebar/Heading.stories.tsx | 1 +
 code/core/src/manager/components/sidebar/Menu.stories.tsx    | 1 +
 code/core/src/manager/components/sidebar/Sidebar.stories.tsx | 1 +
 3 files changed, 3 insertions(+)

diff --git a/code/core/src/manager/components/sidebar/Heading.stories.tsx b/code/core/src/manager/components/sidebar/Heading.stories.tsx
index a086e13a345f..0308cae7dd50 100644
--- a/code/core/src/manager/components/sidebar/Heading.stories.tsx
+++ b/code/core/src/manager/components/sidebar/Heading.stories.tsx
@@ -230,6 +230,7 @@ export const SkipToCanvasLinkFocused: StoryObj<typeof Heading> = {
     extra: [],
     isLoading: false,
   },
+  globals: { sb_theme: 'light' },
   parameters: { layout: 'padded', chromatic: { delay: 300 } },
   play: () => {
     // focus each instance for chromatic/storybook's stacked theme
diff --git a/code/core/src/manager/components/sidebar/Menu.stories.tsx b/code/core/src/manager/components/sidebar/Menu.stories.tsx
index d8acc4331e15..e4873e751b05 100644
--- a/code/core/src/manager/components/sidebar/Menu.stories.tsx
+++ b/code/core/src/manager/components/sidebar/Menu.stories.tsx
@@ -48,6 +48,7 @@ const DoubleThemeRenderingHack = styled.div({
 });
 
 export const Expanded: Story = {
+  globals: { sb_theme: 'light' },
   render: () => {
     const menu = useMenu(
       { whatsNewData: { status: 'SUCCESS', disableWhatsNewNotifications: false } } as State,
diff --git a/code/core/src/manager/components/sidebar/Sidebar.stories.tsx b/code/core/src/manager/components/sidebar/Sidebar.stories.tsx
index 7dd66ca42088..3179587c2123 100644
--- a/code/core/src/manager/components/sidebar/Sidebar.stories.tsx
+++ b/code/core/src/manager/components/sidebar/Sidebar.stories.tsx
@@ -282,6 +282,7 @@ export const Scrolled: Story = {
   args: {
     storyId: 'group-1--child-b1',
   },
+  globals: { sb_theme: 'light' },
   decorators: [
     (StoryFn) => (
       <div style={{ width: '100vw', height: '100vh', position: 'relative' }}>

From 8d09bac78699d43df189fda9000fa3c0d29367f1 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Wed, 31 Jul 2024 22:40:08 +0200
Subject: [PATCH 12/13] update docs

---
 code/addons/themes/README.md | 14 ++++----------
 1 file changed, 4 insertions(+), 10 deletions(-)

diff --git a/code/addons/themes/README.md b/code/addons/themes/README.md
index c529f8a60258..0c71eb3ce159 100644
--- a/code/addons/themes/README.md
+++ b/code/addons/themes/README.md
@@ -45,11 +45,8 @@ import { Button } from './Button';
 export default {
   title: 'Example/Button',
   component: Button,
-  parameters: {
-    themes: {
-      themeOverride: 'light', // component level override
-    },
-  },
+  // meta level override
+  globals: { theme: 'dark' },
 };
 
 export const Primary = {
@@ -64,10 +61,7 @@ export const PrimaryDark = {
     primary: true,
     label: 'Button',
   },
-  parameters: {
-    themes: {
-      themeOverride: 'dark', // Story level override
-    },
-  },
+  // story level override
+  globals: { theme: 'dark' },
 };
 ```

From a37cd7f0bdfc2831cbdd4d32eb86458dd139ca51 Mon Sep 17 00:00:00 2001
From: Valentin Palkovic <valentin@chromatic.com>
Date: Thu, 1 Aug 2024 14:08:33 +0200
Subject: [PATCH 13/13] Cleanup

---
 code/.storybook/main.ts                    | 1 -
 code/.storybook/preview.tsx                | 1 -
 code/core/src/types/modules/core-common.ts | 4 ----
 3 files changed, 6 deletions(-)

diff --git a/code/.storybook/main.ts b/code/.storybook/main.ts
index 24c266d000de..6a1f51f62f7c 100644
--- a/code/.storybook/main.ts
+++ b/code/.storybook/main.ts
@@ -125,7 +125,6 @@ const config: StorybookConfig = {
   features: {
     viewportStoryGlobals: true,
     backgroundsStoryGlobals: true,
-    // themesStoryGlobals: true,
   },
   viteFinal: (viteConfig, { configType }) =>
     mergeConfig(viteConfig, {
diff --git a/code/.storybook/preview.tsx b/code/.storybook/preview.tsx
index 846a858ed75f..548f29473efc 100644
--- a/code/.storybook/preview.tsx
+++ b/code/.storybook/preview.tsx
@@ -55,7 +55,6 @@ const ThemeBlock = styled.div<{ side: 'left' | 'right'; layout: string }>(
 const ThemeStack = styled.div<{ layout: string }>(
   {
     position: 'relative',
-    // minHeight: 'calc(50vh - 15px)',
     flex: 1,
   },
   ({ theme }) => ({
diff --git a/code/core/src/types/modules/core-common.ts b/code/core/src/types/modules/core-common.ts
index d1c161692a30..e7ee49c67109 100644
--- a/code/core/src/types/modules/core-common.ts
+++ b/code/core/src/types/modules/core-common.ts
@@ -384,10 +384,6 @@ export interface StorybookConfigRaw {
      * use globals & globalTypes for configuring the backgrounds addon
      */
     backgroundsStoryGlobals?: boolean;
-    /**
-     * use globals & globalTypes for configuring the themes addon
-     */
-    themesStoryGlobals?: boolean;
   };
 
   build?: TestBuildConfig;