@fluentui-react-native/storybook-desktop-runtime 0.2.0 → 0.3.0

package/lib/createDesktopStorybookPreview.js

@@ -1,11 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { StyleSheet, View } from 'react-native';
 import { DesktopStoryRoot } from './DesktopStoryRoot';
-import { StorybookThemeProvider } from './StorybookTheme';
 export function createDesktopStorybookPreview() {
     return {
         decorators: [
-            (Story, context) => (_jsx(StorybookThemeProvider, { children: _jsx(DesktopStoryRoot, { storyId: context.id, children: _jsx(View, { style: styles.story, children: _jsx(Story, {}) }) }) })),
+            (Story, context) => (_jsx(DesktopStoryRoot, { storyId: context.id, children: _jsx(View, { style: styles.story, children: _jsx(Story, {}) }) })),
         ],
         parameters: {},
     };

package/lib/createDesktopStorybookPreview.js.map

@@ -1 +1 @@
-{"version":3,"file":"createDesktopStorybookPreview.js","sourceRoot":"","sources":["../src/createDesktopStorybookPreview.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAGhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAE1D,MAAM,UAAU,6BAA6B;IAC3C,OAAO;QACL,UAAU,EAAE;YACV,CAAC,KAAK,EAAE,OAAO,EAAE,EAAE,CAAC,CAClB,KAAC,sBAAsB,cACrB,KAAC,gBAAgB,IAAC,OAAO,EAAE,OAAO,CAAC,EAAE,YACnC,KAAC,IAAI,IAAC,KAAK,EAAE,MAAM,CAAC,KAAK,YACvB,KAAC,KAAK,KAAG,GACJ,GACU,GACI,CAC1B;SACF;QACD,UAAU,EAAE,EAAE;KACf,CAAC;AACJ,CAAC;AAED,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,KAAK,EAAE;QACL,UAAU,EAAE,QAAQ;QACpB,IAAI,EAAE,CAAC;QACP,cAAc,EAAE,QAAQ;QACxB,OAAO,EAAE,EAAE;KACZ;CACF,CAAC,CAAC"}
+{"version":3,"file":"createDesktopStorybookPreview.js","sourceRoot":"","sources":["../src/createDesktopStorybookPreview.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAGhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,MAAM,UAAU,6BAA6B;IAC3C,OAAO;QACL,UAAU,EAAE;YACV,CAAC,KAAK,EAAE,OAAO,EAAE,EAAE,CAAC,CAClB,KAAC,gBAAgB,IAAC,OAAO,EAAE,OAAO,CAAC,EAAE,YACnC,KAAC,IAAI,IAAC,KAAK,EAAE,MAAM,CAAC,KAAK,YACvB,KAAC,KAAK,KAAG,GACJ,GACU,CACpB;SACF;QACD,UAAU,EAAE,EAAE;KACf,CAAC;AACJ,CAAC;AAED,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,KAAK,EAAE;QACL,UAAU,EAAE,QAAQ;QACpB,IAAI,EAAE,CAAC;QACP,cAAc,EAAE,QAAQ;QACxB,OAAO,EAAE,EAAE;KACZ;CACF,CAAC,CAAC"}

package/lib/useStorybookTheme.d.ts

@@ -0,0 +1,3 @@
+import type { Theme } from '@storybook/react-native-theming';
+export declare function useStorybookTheme(): Theme;
+//# sourceMappingURL=useStorybookTheme.d.ts.map

package/lib/useStorybookTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStorybookTheme.d.ts","sourceRoot":"","sources":["../src/useStorybookTheme.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,iCAAiC,CAAC;AAE7D,wBAAgB,iBAAiB,IAAI,KAAK,CAWzC"}

package/lib/useStorybookTheme.js

@@ -0,0 +1,105 @@
+import * as React from 'react';
+import { useThemeState } from '@fluentui-react-native/design';
+import { darkTheme, theme as lightTheme } from '@storybook/react-native-theming';
+export function useStorybookTheme() {
+    const state = useThemeState();
+    const { theme, nativeColors } = React.useMemo(() => storybookThemeFromThemeState(state), [state]);
+    React.useEffect(() => {
+        if (nativeColors.length > 0) {
+            console.warn(`Storybook chrome cannot resolve native system colors; using fixed contrasting theme colors for: ${nativeColors.join(', ')}.`);
+        }
+    }, [nativeColors]);
+    return theme;
+}
+function storybookThemeFromThemeState({ appearance, highContrast, tokens }) {
+    const base = highContrast || appearance.colorScheme === 'dark' ? darkTheme : lightTheme;
+    const foreground = base.base === 'dark' ? 'fixedWhite' : 'fixedBlack';
+    const background = base.base === 'dark' ? 'fixedBlack' : 'fixedWhite';
+    const nativeColors = new Set();
+    const color = (name, role = 'foreground') => {
+        const value = tokens.color[name];
+        // Storybook also passes these colors to JS color utilities, not just native styles.
+        if (typeof value === 'string') {
+            return value;
+        }
+        nativeColors.add(name);
+        const fallbackName = role === 'foreground' ? foreground : background;
+        const fallback = tokens.color[fallbackName];
+        if (typeof fallback !== 'string') {
+            throw new Error(`Storybook chrome requires a literal "${fallbackName}" fallback for the "${name}" theme token.`);
+        }
+        return fallback;
+    };
+    const theme = {
+        ...base,
+        color: {
+            ...base.color,
+            primary: color('foregroundBrandPrimary'),
+            secondary: color('backgroundBrandHeavy'),
+            secondaryLighter: color('backgroundBrandSoft', 'background'),
+            tertiary: color('foregroundSuccessPrimary'),
+            ancillary: color('foregroundBrandPrimary'),
+            orange: color('foregroundWarningPrimary'),
+            gold: color('foregroundWarningPrimary'),
+            green: color('foregroundSuccessPrimary'),
+            seafoam: color('foregroundSuccessPrimary'),
+            purple: color('foregroundBrandPrimary'),
+            ultraviolet: color('foregroundBrandPrimary'),
+            lightest: color('foregroundBrandOnloud', 'background'),
+            lighter: color('surfaceNeutralNear', 'background'),
+            light: color('backgroundNeutralSubtle', 'background'),
+            mediumlight: color('strokeNeutralSubtle'),
+            medium: color('strokeNeutralSoft'),
+            mediumdark: color('foregroundNeutralSecondary'),
+            dark: color('foregroundNeutralPrimary'),
+            darker: color('foregroundNeutralPrimary'),
+            darkest: color('foregroundNeutralPrimary'),
+            border: color('strokeNeutralSoft'),
+            positive: color('foregroundSuccessPrimary'),
+            negative: color('foregroundDangerPrimary'),
+            warning: color('foregroundWarningPrimary'),
+            critical: color('foregroundDangerPrimary'),
+            defaultText: color('foregroundNeutralPrimary'),
+            inverseText: color('foregroundNeutralOnloud', 'background'),
+            positiveText: color('foregroundSuccessPrimary'),
+            negativeText: color('foregroundDangerPrimary'),
+            warningText: color('foregroundWarningPrimary'),
+        },
+        background: {
+            ...base.background,
+            app: color('surfaceNeutralFar', 'background'),
+            bar: color('backgroundNeutralSubtle', 'background'),
+            content: color('surfaceNeutralNear', 'background'),
+            preview: color('surfaceNeutralFar', 'background'),
+            hoverable: color('backgroundNeutralSoft', 'background'),
+            positive: color('backgroundSuccessSubtle', 'background'),
+            negative: color('backgroundDangerSubtle', 'background'),
+            warning: color('backgroundWarningSubtle', 'background'),
+            critical: color('backgroundDangerSubtle', 'background'),
+        },
+        textMutedColor: color('foregroundNeutralTertiary'),
+        input: {
+            ...base.input,
+            border: color('strokeNeutralSoft'),
+            background: color('backgroundNeutralLoud', 'background'),
+            color: color('foregroundNeutralPrimary'),
+        },
+        button: {
+            ...base.button,
+            background: color('backgroundNeutralLoud', 'background'),
+            border: color('strokeNeutralSoft'),
+        },
+        boolean: {
+            ...base.boolean,
+            background: color('backgroundNeutralSoft', 'background'),
+            selectedBackground: color('backgroundBrandHeavy'),
+        },
+        appBorderColor: color('strokeNeutralSubtle'),
+        barTextColor: color('foregroundNeutralPrimary'),
+        barHoverColor: color('foregroundBrandPrimary'),
+        barSelectedColor: color('foregroundBrandPrimary'),
+        barBg: color('backgroundNeutralSubtle', 'background'),
+    };
+    return { theme, nativeColors: [...nativeColors] };
+}
+//# sourceMappingURL=useStorybookTheme.js.map

package/lib/useStorybookTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStorybookTheme.js","sourceRoot":"","sources":["../src/useStorybookTheme.ts"],"names":[],"mappings":"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"}

package/lib/useStorybookTheme.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=useStorybookTheme.test.d.ts.map

package/lib/useStorybookTheme.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStorybookTheme.test.d.ts","sourceRoot":"","sources":["../src/useStorybookTheme.test.tsx"],"names":[],"mappings":""}

package/lib/useStorybookTheme.test.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PlatformColor } from 'react-native';
+import { act, render } from '@testing-library/react-native';
+import { FlexThemeReference, ThemedRoot, useThemeState } from '@fluentui-react-native/design';
+import { useStorybookTheme } from './useStorybookTheme';
+function Probe({ themes, states }) {
+    themes.push(useStorybookTheme());
+    const state = useThemeState();
+    states?.push(state);
+    return null;
+}
+describe('Storybook theme palette', () => {
+    afterEach(() => {
+        jest.restoreAllMocks();
+    });
+    it('derives colors from the current tokens and updates after source invalidation', async () => {
+        const themes = [];
+        const states = [];
+        const source = new FlexThemeReference({
+            base: { color: { surfaceNeutralFar: '#123456', foregroundNeutralPrimary: '#abcdef' } },
+        });
+        const scene = await render(_jsx(ThemedRoot, { theme: source, children: _jsx(Probe, { themes: themes, states: states }) }));
+        expect(themes[0].background.app).toBe('#123456');
+        expect(themes[0].color.defaultText).toBe('#abcdef');
+        await scene.rerender(_jsx(ThemedRoot, { theme: source, children: _jsx(Probe, { themes: themes, states: states }) }));
+        expect(themes[themes.length - 1]).toBe(themes[0]);
+        await act(() => source.update({ color: { surfaceNeutralFar: '#654321' } }));
+        expect(themes[themes.length - 1].background.app).toBe('#654321');
+        expect(themes[themes.length - 1]).not.toBe(themes[0]);
+        expect(themes[themes.length - 1].appBorderColor).toBe(states[states.length - 1].tokens.color.strokeNeutralSubtle);
+    });
+    it('warns and substitutes a contrasting theme color for native opaque colors', async () => {
+        const warn = jest.spyOn(console, 'warn').mockImplementation();
+        const themes = [];
+        const states = [];
+        const source = new FlexThemeReference({ base: { color: { foregroundBrandPrimary: PlatformColor('labelColor') } } });
+        await render(_jsx(ThemedRoot, { theme: source, children: _jsx(Probe, { themes: themes, states: states }) }));
+        expect(themes[0].color.primary).toBe(states[0].tokens.color.fixedBlack);
+        expect(warn).toHaveBeenCalledTimes(1);
+        expect(warn).toHaveBeenCalledWith(expect.stringContaining('foregroundBrandPrimary'));
+    });
+});
+//# sourceMappingURL=useStorybookTheme.test.js.map

package/lib/useStorybookTheme.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStorybookTheme.test.js","sourceRoot":"","sources":["../src/useStorybookTheme.test.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/storybook-desktop-runtime",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "React Native runtime and Metro services for desktop Storybook applications",
   "license": "MIT",
   "author": "",
@@ -27,12 +27,13 @@
     "build": "tsc -b",
     "clean": "fluentui-scripts clean",
     "format": "fluentui-scripts format",
-    "lint": "fluentui-scripts lint"
+    "lint": "fluentui-scripts lint",
+    "test": "fluentui-scripts jest"
   },
   "dependencies": {
-    "@fluentui-react-native/callout": "0.29.4",
-    "@fluentui-react-native/default-theme": "0.27.11",
-    "@fluentui-react-native/design": "0.4.0",
+    "@fluentui-react-native/callout": "0.29.5",
+    "@fluentui-react-native/default-theme": "0.27.13",
+    "@fluentui-react-native/design": "0.5.0",
     "@rnx-kit/metro-config": "^2.2.4",
     "@rnx-kit/metro-resolver-symlinks": "^0.3.1",
     "@storybook/react-native": "^10.4.7",
@@ -46,12 +47,17 @@
     "@babel/core": "^7.20.0",
     "@fluentui-react-native/scripts": "0.1.0",
     "@office-iss/react-native-win32": "^0.81.0",
+    "@react-native-community/cli": "^20.0.0",
+    "@react-native-community/cli-platform-android": "^20.0.0",
+    "@react-native-community/cli-platform-ios": "^20.0.0",
     "@react-native/babel-preset": "^0.81.0",
+    "@testing-library/react-native": "^14.0.1",
     "@types/react": "~19.1.4",
     "react": "19.1.4",
     "react-native": "^0.81.6",
     "react-native-macos": "^0.81.0",
-    "react-native-windows": "^0.81.0"
+    "react-native-windows": "^0.81.0",
+    "test-renderer": "1.1.0"
   },
   "peerDependencies": {
     "@office-iss/react-native-win32": "^0.81.0",
@@ -76,6 +82,7 @@
     }
   },
   "furn": {
+    "jestPlatform": "macos",
     "knip": {
       "ignoreDependencies": [
         "@fluentui-react-native/callout"

package/src/DesktopStoryRoot.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { Platform, StyleSheet, View } from 'react-native';
 import { addons } from 'storybook/preview-api';
 
 import { desktopStoryErrorEvent, desktopStoryReadyEvent } from './DesktopDriverBridge';
@@ -13,6 +13,7 @@ type DesktopStoryRootProps = {
 export function DesktopStoryRoot({ children, storyId }: DesktopStoryRootProps) {
   const { runtimeInstance, selection } = useDesktopStorybookConfig();
   const testID = useDesktopStorybookTestID('story-root');
+  const exposeNativeMarker = Platform.OS === 'macos' || Platform.OS === 'windows' || Platform.OS === ('win32' as any);
   const activeSelection = selection?.storyId === storyId ? selection : undefined;
 
   React.useEffect(() => {
@@ -49,7 +50,7 @@ export function DesktopStoryRoot({ children, storyId }: DesktopStoryRootProps) {
         }
       }}
     >
-      <View accessibilityLabel={marker} style={styles.root} testID={testID}>
+      <View accessibilityLabel={marker} accessible={exposeNativeMarker || undefined} style={styles.root} testID={testID}>
         {children}
       </View>
     </StoryRenderErrorBoundary>

package/src/StorybookTheme.test.tsx

@@ -0,0 +1,133 @@
+import * as React from 'react';
+import { StyleSheet, Text } from 'react-native';
+
+import { fireEvent, render } from '@testing-library/react-native';
+import { useRootSettings, useThemeState } from '@fluentui-react-native/design';
+import type { RootSettings, ThemeState } from '@fluentui-react-native/design';
+import { defaultFlexTokens } from '@fluentui-react-native/design/testing';
+import type { View as StorybookView } from '@storybook/react-native';
+import { theme as lightTheme } from '@storybook/react-native-theming';
+
+import { createDesktopStorybookApp } from './createDesktopStorybookApp';
+import { DesktopDriverBridge } from './DesktopDriverBridge';
+import { StorybookUIComponent } from './StorybookUI';
+
+jest.mock('./DesktopDriverBridge', () => ({ DesktopDriverBridge: jest.fn(() => null) }));
+jest.mock('./StorybookUI', () => ({ StorybookUIComponent: jest.fn(() => null) }));
+
+function createTestApp() {
+  const roots: RootSettings[] = [];
+  const bridgeRoots: RootSettings[] = [];
+  const themes: ThemeState[] = [];
+  const mounted = jest.fn();
+  const unmounted = jest.fn();
+
+  function Story() {
+    roots.push(useRootSettings());
+    themes.push(useThemeState());
+    React.useEffect(() => {
+      mounted();
+      return unmounted;
+    }, []);
+    return <Text testID="selected-story">Selected story</Text>;
+  }
+
+  jest.mocked(DesktopDriverBridge).mockImplementation(() => {
+    bridgeRoots.push(useRootSettings());
+    return null;
+  });
+  jest.mocked(StorybookUIComponent).mockImplementation(({ children }) => <>{children}</>);
+
+  const getStorybookUI = jest.fn<ReturnType<StorybookView['getStorybookUI']>, Parameters<StorybookView['getStorybookUI']>>((params) => {
+    const UI = params?.CustomUIComponent;
+    if (!UI) {
+      throw new Error('Expected the app factory to configure the themed UI.');
+    }
+    return () => (
+      <UI storyHash={{}} setStory={jest.fn()} storage={{ getItem: () => null, setItem: () => undefined }} theme={lightTheme}>
+        <Story />
+      </UI>
+    );
+  });
+  const App = createDesktopStorybookApp({ getStorybookUI }, { enableWebsockets: false, testIDPrefix: 'test' });
+  return { App, roots, bridgeRoots, themes, mounted, unmounted, getStorybookUI };
+}
+
+afterEach(() => {
+  jest.clearAllMocks();
+  jest.restoreAllMocks();
+});
+
+describe('Storybook app theme root', () => {
+  it('places the toolbar, UI, story, and runtime bridge in the same default Flex scene', async () => {
+    const { App, roots, bridgeRoots, themes } = createTestApp();
+    const scene = await render(<App />);
+
+    expect(scene.getByTestId('test-app-root')).toBeOnTheScreen();
+    expect(scene.getByTestId('test-theme-toolbar')).toBeOnTheScreen();
+    expect(scene.getByTestId('selected-story')).toBeOnTheScreen();
+    expect(scene.getByRole('button', { name: 'Default Flex' })).toBeOnTheScreen();
+    expect(themes[0].tokens).toEqual(defaultFlexTokens);
+    expect(bridgeRoots.every((root) => root === roots[0])).toBe(true);
+    expect(roots[0].inputModality).toBe('pointer');
+  });
+
+  it('observes app-root input without rerendering the story', async () => {
+    const { App, roots, bridgeRoots } = createTestApp();
+    const scene = await render(<App />);
+    const renderCount = roots.length;
+    const root = scene.getByTestId('test-app-root');
+
+    await fireEvent(root, 'keyDownCapture', { nativeEvent: { key: 'Tab' } });
+    expect(roots[0].inputModality).toBe('keyboard');
+    expect(bridgeRoots[0].inputModality).toBe('keyboard');
+    await fireEvent(root, 'pointerDownCapture', {});
+    expect(roots[0].inputModality).toBe('pointer');
+    await fireEvent(root, 'keyDownCapture', { nativeEvent: { key: 'ArrowRight' } });
+    await fireEvent(root, 'startShouldSetResponderCapture', {});
+    expect(roots[0].inputModality).toBe('pointer');
+    expect(roots).toHaveLength(renderCount);
+  });
+
+  it('switches chrome and story colors together without recreating Storybook or resetting the scene', async () => {
+    const warn = jest.spyOn(console, 'warn').mockImplementation();
+    const { App, roots, themes, mounted, unmounted, getStorybookUI } = createTestApp();
+    const scene = await render(<App />);
+    const root = roots[0];
+    const defaultBackground = themes[0].tokens.color.surfaceNeutralFar;
+    const backgrounds: Record<string, unknown> = {};
+    await fireEvent(scene.getByTestId('test-app-root'), 'keyDownCapture', { nativeEvent: { key: 'Tab' } });
+
+    for (const choice of ['dark', 'highContrast', 'light', 'none']) {
+      await fireEvent.press(scene.getByTestId(`test-theme-${choice}`));
+      const state = themes[themes.length - 1];
+      const calls = jest.mocked(StorybookUIComponent).mock.calls;
+      const theme = calls[calls.length - 1][0].theme;
+      backgrounds[choice] = theme.background.app;
+
+      expect(scene.getByTestId(`test-theme-${choice}`).props.accessibilityState.selected).toBe(true);
+      expect(StyleSheet.flatten(scene.getByTestId('test-theme-toolbar').props.style).backgroundColor).toBe(
+        state.tokens.color.backgroundNeutralSubtle,
+      );
+      expect(StyleSheet.flatten(scene.getByText('Theme').props.style).color).toBe(state.tokens.color.foregroundNeutralPrimary);
+      const foreground = theme.base === 'dark' ? state.tokens.color.fixedWhite : state.tokens.color.fixedBlack;
+      const background = theme.base === 'dark' ? state.tokens.color.fixedBlack : state.tokens.color.fixedWhite;
+      const literal = (value: unknown, fallback: unknown) => (typeof value === 'string' ? value : fallback);
+      expect(theme.background.app).toBe(literal(state.tokens.color.surfaceNeutralFar, background));
+      expect(theme.background.content).toBe(literal(state.tokens.color.surfaceNeutralNear, background));
+      expect(theme.background.preview).toBe(literal(state.tokens.color.surfaceNeutralFar, background));
+      expect(theme.color.defaultText).toBe(literal(state.tokens.color.foregroundNeutralPrimary, foreground));
+      expect(theme.input.color).toBe(literal(state.tokens.color.foregroundNeutralPrimary, foreground));
+      expect(theme.button.background).toBe(literal(state.tokens.color.backgroundNeutralLoud, background));
+      expect(root.inputModality).toBe('keyboard');
+      expect(roots.every((settings) => settings === root)).toBe(true);
+    }
+
+    expect(backgrounds.dark).not.toBe(backgrounds.light);
+    expect(backgrounds.none).toBe(defaultBackground);
+    expect(warn).toHaveBeenCalledWith(expect.stringContaining('Storybook chrome cannot resolve native system colors'));
+    expect(getStorybookUI).toHaveBeenCalledTimes(1);
+    expect(mounted).toHaveBeenCalledTimes(1);
+    expect(unmounted).not.toHaveBeenCalled();
+  });
+});

package/src/StorybookTheme.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Pressable, StyleSheet, Text, View } from 'react-native';
 
 import { createDefaultTheme } from '@fluentui-react-native/default-theme';
-import { ThemeProvider } from '@fluentui-react-native/design/theming';
+import { ThemedRoot, themedStyleSheetFactory, useThemeState } from '@fluentui-react-native/design';
 import type { ThemeReference } from '@fluentui-react-native/design/theming';
 
 import { useDesktopStorybookTestID } from './DesktopStorybookConfig';
@@ -16,99 +16,112 @@ const themeChoiceNames = ['none', 'light', 'dark', 'highContrast'] as const;
 type ThemeChoiceName = (typeof themeChoiceNames)[number];
 
 const themeChoices: Record<ThemeChoiceName, ThemeChoice> = {
-  none: { label: 'No theme' },
+  none: { label: 'Default Flex' },
   light: { label: 'Light', theme: createDefaultTheme({ appearance: 'light' }) },
   dark: { label: 'Dark', theme: createDefaultTheme({ appearance: 'dark' }) },
   highContrast: { label: 'High contrast', theme: createDefaultTheme({ appearance: 'highContrast' }) },
 };
 
-const StorybookThemeContext = React.createContext<ThemeReference | undefined>(undefined);
-
 export function StorybookThemeHost({ children }: React.PropsWithChildren) {
   const [selectedName, setSelectedName] = React.useState<ThemeChoiceName>('none');
-  const selectedTheme = themeChoices[selectedName].theme;
+  const testID = useDesktopStorybookTestID('app-root');
+
+  return (
+    <ThemedRoot style={layoutStyles.root} testID={testID} theme={themeChoices[selectedName].theme}>
+      <StorybookThemeContent selectedName={selectedName} onSelect={setSelectedName}>
+        {children}
+      </StorybookThemeContent>
+    </ThemedRoot>
+  );
+}
+
+function StorybookThemeContent({
+  children,
+  selectedName,
+  onSelect,
+}: React.PropsWithChildren<{ selectedName: ThemeChoiceName; onSelect: (name: ThemeChoiceName) => void }>) {
+  const styles = getStyles(useThemeState());
   const toolbarTestID = useDesktopStorybookTestID('theme-toolbar');
   const optionTestID = useDesktopStorybookTestID('theme');
 
   return (
-    <StorybookThemeContext.Provider value={selectedTheme}>
-      <View style={styles.root}>
-        <View accessibilityRole="toolbar" style={styles.header} testID={toolbarTestID}>
-          <Text style={styles.label}>Theme</Text>
-          {themeChoiceNames.map((name) => {
-            const choice = themeChoices[name];
-            const selected = name === selectedName;
-            return (
-              <Pressable
-                accessibilityRole="button"
-                accessibilityState={{ selected }}
-                key={name}
-                onPress={() => setSelectedName(name)}
-                style={({ pressed }) => [styles.option, selected && styles.selectedOption, pressed && styles.pressedOption]}
-                testID={`${optionTestID}-${name}`}
-              >
-                <Text style={[styles.optionText, selected && styles.selectedOptionText]}>{choice.label}</Text>
-              </Pressable>
-            );
-          })}
-        </View>
-        <View style={styles.storybook}>{children}</View>
+    <View style={styles.root}>
+      <View accessibilityRole="toolbar" style={styles.header} testID={toolbarTestID}>
+        <Text style={styles.label}>Theme</Text>
+        {themeChoiceNames.map((name) => {
+          const choice = themeChoices[name];
+          const selected = name === selectedName;
+          return (
+            <Pressable
+              accessibilityRole="button"
+              accessibilityState={{ selected }}
+              key={name}
+              onPress={() => onSelect(name)}
+              style={({ pressed }) => [styles.option, selected && styles.selectedOption, pressed && styles.pressedOption]}
+              testID={`${optionTestID}-${name}`}
+            >
+              <Text style={[styles.optionText, selected && styles.selectedOptionText]}>{choice.label}</Text>
+            </Pressable>
+          );
+        })}
       </View>
-    </StorybookThemeContext.Provider>
+      <View style={layoutStyles.root}>{children}</View>
+    </View>
   );
 }
 
-export function StorybookThemeProvider({ children }: React.PropsWithChildren) {
-  const theme = React.useContext(StorybookThemeContext);
-  return theme ? <ThemeProvider theme={theme}>{children}</ThemeProvider> : children;
-}
-
-const styles = StyleSheet.create({
+const layoutStyles = StyleSheet.create({
   root: {
     flex: 1,
   },
-  header: {
-    alignItems: 'center',
-    backgroundColor: '#f5f5f5',
-    borderBottomColor: '#d1d1d1',
-    borderBottomWidth: 1,
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    gap: 8,
-    minHeight: 44,
-    paddingHorizontal: 12,
-    paddingVertical: 6,
-  },
-  label: {
-    color: '#242424',
-    fontSize: 14,
-    fontWeight: '600',
-    marginEnd: 4,
-  },
-  option: {
-    backgroundColor: '#ffffff',
-    borderColor: '#b3b3b3',
-    borderRadius: 4,
-    borderWidth: 1,
-    paddingHorizontal: 10,
-    paddingVertical: 5,
-  },
-  selectedOption: {
-    backgroundColor: '#0f6cbd',
-    borderColor: '#0f6cbd',
-  },
-  pressedOption: {
-    opacity: 0.75,
-  },
-  optionText: {
-    color: '#242424',
-    fontSize: 12,
-  },
-  selectedOptionText: {
-    color: '#ffffff',
-    fontWeight: '600',
-  },
-  storybook: {
-    flex: 1,
-  },
 });
+
+const getStyles = themedStyleSheetFactory('StorybookTheme', ({ tokens }) =>
+  StyleSheet.create({
+    root: {
+      flex: 1,
+      backgroundColor: tokens.color.surfaceNeutralFar,
+    },
+    header: {
+      alignItems: 'center',
+      backgroundColor: tokens.color.backgroundNeutralSubtle,
+      borderBottomColor: tokens.color.strokeNeutralSubtle,
+      borderBottomWidth: 1,
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      gap: 8,
+      minHeight: 44,
+      paddingHorizontal: 12,
+      paddingVertical: 6,
+    },
+    label: {
+      color: tokens.color.foregroundNeutralPrimary,
+      fontSize: 14,
+      fontWeight: '600',
+      marginEnd: 4,
+    },
+    option: {
+      backgroundColor: tokens.color.backgroundNeutralLoud,
+      borderColor: tokens.color.strokeNeutralSoft,
+      borderRadius: 4,
+      borderWidth: 1,
+      paddingHorizontal: 10,
+      paddingVertical: 5,
+    },
+    selectedOption: {
+      backgroundColor: tokens.color.backgroundBrandHeavy,
+      borderColor: tokens.color.strokeBrandLoud,
+    },
+    pressedOption: {
+      opacity: 0.75,
+    },
+    optionText: {
+      color: tokens.color.foregroundNeutralPrimary,
+      fontSize: 12,
+    },
+    selectedOptionText: {
+      color: tokens.color.foregroundBrandOnloud,
+      fontWeight: '600',
+    },
+  }),
+);

package/src/StorybookUI.win32.tsx

@@ -14,7 +14,7 @@ import { Win32ResizeHandle } from './Win32ResizeHandle';
 const emptyRefs = {};
 const emptyStatus = {};
 
-export const StorybookUIComponent: SBUI = ({ children, setStory, storage, story, storyHash, theme }) => {
+export const StorybookUIComponent: SBUI = ({ children, setStory, storage, story, storyHash, storyBackgroundColor, theme }) => {
   const storiesAnchorRef = React.useRef<View>(null);
   const addonsAnchorRef = React.useRef<View>(null);
   const [sidebarVisible, setSidebarVisible] = React.useState(true);
@@ -67,7 +67,7 @@ export const StorybookUIComponent: SBUI = ({ children, setStory, storage, story,
   return (
     <ThemeProvider theme={theme}>
       <StorageProvider storage={storage}>
-        <View style={styles.root} testID={chromeTestID}>
+        <View style={[styles.root, { backgroundColor: theme.background.app }]} testID={chromeTestID}>
           {sidebarVisible ? (
             <>
               <View
@@ -174,7 +174,7 @@ export const StorybookUIComponent: SBUI = ({ children, setStory, storage, story,
                 </Text>
               </View>
             ) : null}
-            <View style={styles.preview} testID={previewTestID}>
+            <View style={[styles.preview, { backgroundColor: storyBackgroundColor ?? theme.background.preview }]} testID={previewTestID}>
               {children}
             </View>
             {addonsVisible ? (

package/src/ThemedStorybookUI.tsx

@@ -0,0 +1,9 @@
+import type { SBUI } from '@storybook/react-native-ui-common';
+
+import { StorybookUIComponent } from './StorybookUI';
+import { useStorybookTheme } from './useStorybookTheme';
+
+export const ThemedStorybookUI: SBUI = (props) => {
+  const theme = useStorybookTheme();
+  return <StorybookUIComponent {...props} theme={theme} />;
+};