@fluentui-react-native/storybook-desktop-runtime 0.3.4 → 0.3.5

package/AGENTS.md

@@ -15,8 +15,9 @@ authenticated bridge, Metro, theme, and platform chrome.
   test reporting belong to the integration and harness packages.
 - Preserve the authenticated nonce, correlated request/run IDs, readiness,
   error signaling, and native story-root verification.
-- Keep one `ThemedRoot` around app content and chrome. Preserve explicit story
-  background overrides and safe fallback behavior for opaque native colors.
+- Keep one Flex `ThemedRoot` around app content and chrome; apply the selected
+  theme only to story content through the nested provider. Preserve explicit
+  story background overrides and safe fallback behavior for opaque native colors.
 - Keep platform-specific behavior in platform files. Preserve Win32's
   desktop-only chrome and keep macOS/Windows on upstream LiteUI.
 - Metro configuration has side effects: loading it can generate the runtime

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @fluentui-react-native/storybook-desktop-runtime
 
+## 0.3.5
+
+### Patch Changes
+
+- 06b458f: Keep the Storybook chrome and story canvas on the Flex theme. The Theme selector now applies Flex or Fluent only to
+  story content, while scheme, contrast, and tone still apply to the chrome.
+- 06b458f: Read Storybook chrome colors through the design package's interactive color envelope.
+- 06b458f: Replace the fixed Storybook theme buttons with Theme (Flex or Fluent), Scheme (light, dark, or system), Contrast, and Tone dropdowns. The toolbar now defaults to Flex light, standard contrast, and cool tone, independent of the host appearance.
+- Updated dependencies [06b458f]
+- Updated dependencies [06b458f]
+- Updated dependencies [06b458f]
+- Updated dependencies [ccb458e]
+- Updated dependencies [06b458f]
+- Updated dependencies [06b458f]
+- Updated dependencies [06b458f]
+- Updated dependencies [ccb458e]
+- Updated dependencies [06b458f]
+  - @fluentui-react-native/default-theme@0.28.0
+  - @fluentui-react-native/design@0.6.0
+  - @fluentui-react-native/native-core@0.2.0
+
 ## 0.3.4
 
 ### Patch Changes

package/lib/StorybookTheme.d.ts

@@ -1,3 +1,17 @@
 import * as React from 'react';
+import type { ColorTone } from '@fluentui-react-native/design';
+/** The theme configuration selected in the Storybook toolbar. */
+export type StorybookThemeSelection = {
+    /** The story theme: the package's Flex defaults or the legacy Fluent default theme. The chrome always uses Flex. */
+    source: 'flex' | 'fluent';
+    colorScheme: 'light' | 'dark' | 'system';
+    contrast: 'standard' | 'highContrast';
+    /** Flex palette and interaction tone. Legacy Fluent themes have no tone. */
+    colorTone: ColorTone;
+};
+/** A deterministic default that does not depend on the host appearance. */
+export declare const defaultStorybookThemeSelection: Readonly<StorybookThemeSelection>;
 export declare function StorybookThemeHost({ children }: React.PropsWithChildren): import("react/jsx-runtime").JSX.Element;
+/** Applies the selected story theme inside the Flex chrome without adding a view or a second input root. */
+export declare function StorybookStoryTheme({ children }: React.PropsWithChildren): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=StorybookTheme.d.ts.map

package/lib/StorybookTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StorybookTheme.d.ts","sourceRoot":"","sources":["../src/StorybookTheme.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAwB/B,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,EAAE,KAAK,CAAC,iBAAiB,2CAWvE"}
+{"version":3,"file":"StorybookTheme.d.ts","sourceRoot":"","sources":["../src/StorybookTheme.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,SAAS,EAAuC,MAAM,+BAA+B,CAAC;AAIpG,iEAAiE;AACjE,MAAM,MAAM,uBAAuB,GAAG;IACpC,oHAAoH;IACpH,MAAM,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC1B,WAAW,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;IACzC,QAAQ,EAAE,UAAU,GAAG,cAAc,CAAC;IACtC,4EAA4E;IAC5E,SAAS,EAAE,SAAS,CAAC;CACtB,CAAC;AAYF,2EAA2E;AAC3E,eAAO,MAAM,8BAA8B,EAAE,QAAQ,CAAC,uBAAuB,CAK3E,CAAC;AAqDH,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,EAAE,KAAK,CAAC,iBAAiB,2CAkBvE;AAED,4GAA4G;AAC5G,wBAAgB,mBAAmB,CAAC,EAAE,QAAQ,EAAE,EAAE,KAAK,CAAC,iBAAiB,2CAUxE"}

package/lib/StorybookTheme.js

@@ -1,30 +1,90 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { Pressable, StyleSheet, Text, View } from 'react-native';
 import { createDefaultTheme } from '@fluentui-react-native/default-theme';
-import { ThemedRoot, themedStyleSheetFactory, useThemeState } from '@fluentui-react-native/design';
+import { FlexThemeReference, ThemedRoot, ThemeProvider, themedStyleSheetFactory, useThemeState } from '@fluentui-react-native/design';
 import { useDesktopStorybookTestID } from './DesktopStorybookConfig';
-const themeChoiceNames = ['none', 'light', 'dark', 'highContrast'];
-const themeChoices = {
-    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' }) },
+/** A deterministic default that does not depend on the host appearance. */
+export const defaultStorybookThemeSelection = Object.freeze({
+    source: 'flex',
+    colorScheme: 'light',
+    contrast: 'standard',
+    colorTone: 'cool',
+});
+function themeAxis(key, id, label, options) {
+    return { key, id, label, options };
+}
+const themeAxes = [
+    themeAxis('source', 'source', 'Theme', [
+        { value: 'flex', label: 'Flex' },
+        { value: 'fluent', label: 'Fluent' },
+    ]),
+    themeAxis('colorScheme', 'scheme', 'Scheme', [
+        { value: 'light', label: 'Light' },
+        { value: 'dark', label: 'Dark' },
+        { value: 'system', label: 'System' },
+    ]),
+    themeAxis('contrast', 'contrast', 'Contrast', [
+        { value: 'standard', label: 'Standard' },
+        { value: 'highContrast', label: 'High' },
+    ]),
+    themeAxis('colorTone', 'tone', 'Tone', [
+        { value: 'cool', label: 'Cool' },
+        { value: 'warm', label: 'Warm' },
+    ]),
+];
+// Each source resolves every appearance itself, so selection changes only the appearance request.
+const themeSources = {
+    flex: new FlexThemeReference(),
+    fluent: createDefaultTheme({ appearance: 'dynamic' }),
 };
+function appearanceFromSelection({ source, colorScheme, contrast, colorTone }) {
+    // Omitting tone for Fluent keeps the resolved appearance at its cool default.
+    return source === 'flex' ? { colorScheme, contrast, colorTone } : { colorScheme, contrast };
+}
+function isAxisDisabled(key, selection) {
+    return key === 'colorTone' && selection.source !== 'flex';
+}
+const StoryThemeContext = React.createContext(undefined);
 export function StorybookThemeHost({ children }) {
-    const [selectedName, setSelectedName] = React.useState('none');
+    const [selection, setSelection] = React.useState(defaultStorybookThemeSelection);
+    const storyTheme = React.useMemo(() => ({ theme: themeSources[selection.source], appearance: appearanceFromSelection(selection) }), [selection]);
     const testID = useDesktopStorybookTestID('app-root');
-    return (_jsx(ThemedRoot, { style: layoutStyles.root, testID: testID, theme: themeChoices[selectedName].theme, children: _jsx(StorybookThemeContent, { selectedName: selectedName, onSelect: setSelectedName, children: children }) }));
+    // The chrome always uses Flex at the selected appearance; only story content follows the selected source.
+    return (_jsx(ThemedRoot, { appearance: storyTheme.appearance, style: layoutStyles.root, testID: testID, theme: themeSources.flex, children: _jsx(StoryThemeContext.Provider, { value: storyTheme, children: _jsx(StorybookThemeContent, { selection: selection, onSelectionChange: setSelection, children: children }) }) }));
 }
-function StorybookThemeContent({ children, selectedName, onSelect, }) {
+/** Applies the selected story theme inside the Flex chrome without adding a view or a second input root. */
+export function StorybookStoryTheme({ children }) {
+    const storyTheme = React.useContext(StoryThemeContext);
+    if (!storyTheme) {
+        return _jsx(_Fragment, { children: children });
+    }
+    return (_jsx(ThemeProvider, { appearance: storyTheme.appearance, theme: storyTheme.theme, children: children }));
+}
+function StorybookThemeContent({ children, selection, onSelectionChange, }) {
     const styles = getStyles(useThemeState());
     const toolbarTestID = useDesktopStorybookTestID('theme-toolbar');
-    const optionTestID = useDesktopStorybookTestID('theme');
-    return (_jsxs(View, { style: styles.root, children: [_jsxs(View, { accessibilityRole: "toolbar", style: styles.header, testID: toolbarTestID, children: [_jsx(Text, { style: styles.label, children: "Theme" }), themeChoiceNames.map((name) => {
-                        const choice = themeChoices[name];
-                        const selected = name === selectedName;
-                        return (_jsx(Pressable, { accessibilityRole: "button", accessibilityState: { selected }, onPress: () => onSelect(name), style: ({ pressed }) => [styles.option, selected && styles.selectedOption, pressed && styles.pressedOption], testID: `${optionTestID}-${name}`, children: _jsx(Text, { style: [styles.optionText, selected && styles.selectedOptionText], children: choice.label }) }, name));
-                    })] }), _jsx(View, { style: layoutStyles.root, children: children })] }));
+    const axisTestID = useDesktopStorybookTestID('theme');
+    const [openAxis, setOpenAxis] = React.useState();
+    const select = (key, value) => {
+        onSelectionChange((current) => (current[key] === value ? current : { ...current, [key]: value }));
+        setOpenAxis(undefined);
+    };
+    return (_jsxs(View, { style: styles.root, children: [_jsx(View, { accessibilityRole: "toolbar", style: styles.header, testID: toolbarTestID, children: themeAxes.map((axis) => {
+                    const disabled = isAxisDisabled(axis.key, selection);
+                    return (_jsx(ThemeAxisDropdown, { axis: axis, disabled: disabled, open: !disabled && openAxis === axis.key, styles: styles, testID: `${axisTestID}-${axis.id}`, value: disabled ? defaultStorybookThemeSelection[axis.key] : selection[axis.key], onSelect: (value) => select(axis.key, value), onToggle: () => setOpenAxis((current) => (current === axis.key ? undefined : axis.key)) }, axis.key));
+                }) }), _jsx(View, { style: layoutStyles.root, children: children })] }));
+}
+function ThemeAxisDropdown({ axis, disabled, open, styles, testID, value, onSelect, onToggle }) {
+    const selectedLabel = axis.options.find((option) => option.value === value)?.label ?? value;
+    return (_jsxs(View, { style: styles.field, children: [_jsx(Text, { style: [styles.label, disabled && styles.disabledText], children: axis.label }), _jsxs(View, { children: [_jsxs(Pressable, { accessibilityLabel: axis.label, accessibilityRole: "combobox", accessibilityState: { disabled, expanded: open }, accessibilityValue: { text: selectedLabel }, disabled: disabled, onPress: onToggle, style: ({ pressed }) => [styles.option, styles.trigger, pressed && styles.pressedOption, disabled && styles.disabledOption], testID: testID, children: [_jsx(Text, { style: [styles.optionText, disabled && styles.disabledText], children: selectedLabel }), _jsx(Text, { style: [styles.chevron, disabled && styles.disabledText], children: open ? '\u25b4' : '\u25be' })] }), open ? (_jsx(View, { accessibilityRole: "list", style: styles.menu, testID: `${testID}-menu`, children: axis.options.map((option) => {
+                            const selected = option.value === value;
+                            return (_jsx(Pressable, { accessibilityRole: "button", accessibilityState: { selected }, onPress: () => onSelect(option.value), style: ({ pressed }) => [
+                                    styles.menuOption,
+                                    selected && styles.selectedOption,
+                                    pressed && (selected ? styles.pressedSelectedOption : styles.pressedMenuOption),
+                                ], testID: `${testID}-${option.value}`, children: _jsx(Text, { style: [styles.optionText, selected && styles.selectedOptionText], children: option.label }) }, option.value));
+                        }) })) : null] })] }));
 }
 const layoutStyles = StyleSheet.create({
     root: {
@@ -34,48 +94,91 @@ const layoutStyles = StyleSheet.create({
 const getStyles = themedStyleSheetFactory('StorybookTheme', ({ tokens }) => StyleSheet.create({
     root: {
         flex: 1,
-        backgroundColor: tokens.color.surfaceNeutralFar,
+        backgroundColor: tokens.color.surfaceNeutralFar.rest,
     },
     header: {
-        alignItems: 'center',
-        backgroundColor: tokens.color.backgroundNeutralSubtle,
-        borderBottomColor: tokens.color.strokeNeutralSubtle,
+        alignItems: 'flex-start',
+        backgroundColor: tokens.color.backgroundNeutralSubtle.rest,
+        borderBottomColor: tokens.color.strokeNeutralSubtle.rest,
         borderBottomWidth: 1,
         flexDirection: 'row',
         flexWrap: 'wrap',
-        gap: 8,
+        gap: 16,
         minHeight: 44,
         paddingHorizontal: 12,
-        paddingVertical: 6,
+        paddingVertical: 8,
+    },
+    field: {
+        alignItems: 'flex-start',
+        flexDirection: 'row',
+        gap: 6,
     },
     label: {
-        color: tokens.color.foregroundNeutralPrimary,
+        color: tokens.color.foregroundNeutralPrimary.rest,
         fontSize: 14,
         fontWeight: '600',
-        marginEnd: 4,
+        paddingVertical: 5,
     },
     option: {
-        backgroundColor: tokens.color.backgroundNeutralLoud,
-        borderColor: tokens.color.strokeNeutralSoft,
+        backgroundColor: tokens.color.surfaceNeutralNearer.rest,
+        borderColor: tokens.color.strokeNeutralLoud.rest,
         borderRadius: 4,
         borderWidth: 1,
         paddingHorizontal: 10,
         paddingVertical: 5,
     },
-    selectedOption: {
-        backgroundColor: tokens.color.backgroundBrandHeavy,
-        borderColor: tokens.color.strokeBrandLoud,
+    trigger: {
+        alignItems: 'center',
+        flexDirection: 'row',
+        gap: 8,
+        justifyContent: 'space-between',
+        minWidth: 96,
     },
     pressedOption: {
-        opacity: 0.75,
+        backgroundColor: tokens.color.surfaceNeutralNearer.pressed,
+        borderColor: tokens.color.strokeNeutralLoud.pressed,
+    },
+    disabledOption: {
+        backgroundColor: tokens.color.backgroundNeutralDisabled.rest,
+        borderColor: tokens.color.strokeNeutralDisabled.rest,
+    },
+    menu: {
+        backgroundColor: tokens.color.surfaceNeutralNearer.rest,
+        borderColor: tokens.color.strokeNeutralSubtle.rest,
+        borderRadius: 4,
+        borderWidth: 1,
+        gap: 2,
+        marginTop: 4,
+        padding: 2,
+    },
+    menuOption: {
+        backgroundColor: tokens.color.backgroundNeutralTransparent.rest,
+        borderRadius: 3,
+        paddingHorizontal: 10,
+        paddingVertical: 5,
+    },
+    pressedMenuOption: {
+        backgroundColor: tokens.color.backgroundNeutralTransparent.pressed,
+    },
+    selectedOption: {
+        backgroundColor: tokens.color.backgroundNeutralSoft.rest,
+    },
+    pressedSelectedOption: {
+        backgroundColor: tokens.color.backgroundNeutralSoft.pressed,
     },
     optionText: {
-        color: tokens.color.foregroundNeutralPrimary,
+        color: tokens.color.foregroundNeutralPrimary.rest,
+        fontSize: 12,
+    },
+    chevron: {
+        color: tokens.color.foregroundNeutralSecondary.rest,
         fontSize: 12,
     },
     selectedOptionText: {
-        color: tokens.color.foregroundBrandOnloud,
         fontWeight: '600',
     },
+    disabledText: {
+        color: tokens.color.foregroundNeutralDisabled.rest,
+    },
 }));
 //# sourceMappingURL=StorybookTheme.js.map

package/lib/StorybookTheme.js.map

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

package/lib/StorybookTheme.test.js

@@ -1,8 +1,9 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
-import { StyleSheet, Text } from 'react-native';
+import { Appearance, StyleSheet, Text } from 'react-native';
 import { fireEvent, render } from '@testing-library/react-native';
-import { useRootSettings, useThemeState } from '@fluentui-react-native/design';
+import { FlexThemeReference, useRootSettings, useThemeAppearance, useThemeState } from '@fluentui-react-native/design';
+import { ThemeContext } from '@fluentui-react-native/design/theming';
 import { defaultFlexTokens } from '@fluentui-react-native/design/testing';
 import { theme as lightTheme } from '@storybook/react-native-theming';
 import { createDesktopStorybookApp } from './createDesktopStorybookApp';
@@ -14,11 +15,16 @@ function createTestApp(storyBackgroundColor) {
     const roots = [];
     const bridgeRoots = [];
     const themes = [];
+    const chromeThemes = [];
+    const appearances = [];
+    const legacyThemes = [];
     const mounted = jest.fn();
     const unmounted = jest.fn();
     function Story() {
         roots.push(useRootSettings());
         themes.push(useThemeState());
+        appearances.push(useThemeAppearance());
+        legacyThemes.push(React.useContext(ThemeContext));
         React.useEffect(() => {
             mounted();
             return unmounted;
@@ -29,7 +35,10 @@ function createTestApp(storyBackgroundColor) {
         bridgeRoots.push(useRootSettings());
         return null;
     });
-    jest.mocked(StorybookUIComponent).mockImplementation(({ children }) => _jsx(_Fragment, { children: children }));
+    jest.mocked(StorybookUIComponent).mockImplementation(({ children }) => {
+        chromeThemes.push(useThemeState());
+        return _jsx(_Fragment, { children: children });
+    });
     const getStorybookUI = jest.fn((params) => {
         const UI = params?.CustomUIComponent;
         if (!UI) {
@@ -38,21 +47,55 @@ function createTestApp(storyBackgroundColor) {
         return () => (_jsx(UI, { storyBackgroundColor: storyBackgroundColor, storyHash: {}, setStory: jest.fn(), storage: { getItem: () => null, setItem: () => undefined }, theme: lightTheme, children: _jsx(Story, {}) }));
     });
     const App = createDesktopStorybookApp({ getStorybookUI }, { enableWebsockets: false, testIDPrefix: 'test' });
-    return { App, roots, bridgeRoots, themes, mounted, unmounted, getStorybookUI };
+    return { App, roots, bridgeRoots, themes, chromeThemes, appearances, legacyThemes, mounted, unmounted, getStorybookUI };
+}
+async function selectTheme(scene, axis, value) {
+    await fireEvent.press(scene.getByTestId(`test-theme-${axis}`));
+    await fireEvent.press(scene.getByTestId(`test-theme-${axis}-${value}`));
 }
+function latestStorybookTheme() {
+    const calls = jest.mocked(StorybookUIComponent).mock.calls;
+    return calls[calls.length - 1][0].theme;
+}
+const selectionSteps = [
+    ['scheme', 'dark'],
+    ['tone', 'warm'],
+    ['contrast', 'highContrast'],
+    ['source', 'fluent'],
+    ['contrast', 'standard'],
+    ['scheme', 'light'],
+    ['source', 'flex'],
+    ['tone', 'cool'],
+];
 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();
+    it('places the toolbar, UI, story, and runtime bridge in one deterministic default Flex scene', async () => {
+        const { App, roots, bridgeRoots, themes, chromeThemes, appearances, legacyThemes } = createTestApp();
         const scene = await render(_jsx(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();
+        for (const [axis, label] of [
+            ['source', 'Flex'],
+            ['scheme', 'Light'],
+            ['contrast', 'Standard'],
+            ['tone', 'Cool'],
+        ]) {
+            const trigger = scene.getByTestId(`test-theme-${axis}`);
+            expect(trigger.props.accessibilityValue).toEqual({ text: label });
+            expect(trigger.props.accessibilityState).toEqual({ disabled: false, expanded: false });
+        }
+        expect(appearances[0]).toEqual({
+            requested: { colorScheme: 'light', contrast: 'standard', interfaceLevel: 'system', colorTone: 'cool' },
+            resolved: { colorScheme: 'light', contrast: 'standard', interfaceLevel: 'base', colorTone: 'cool' },
+        });
+        expect(themes[0].appearance).toBe(appearances[0].resolved);
         expect(themes[0].tokens).toEqual(defaultFlexTokens);
+        expect(chromeThemes[0]).toBe(themes[0]);
+        expect(legacyThemes[0]).toBeUndefined();
         expect(bridgeRoots.every((root) => root === roots[0])).toBe(true);
         expect(roots[0].inputModality).toBe('pointer');
     });
@@ -71,58 +114,132 @@ describe('Storybook app theme root', () => {
         expect(roots[0].inputModality).toBe('pointer');
         expect(roots).toHaveLength(renderCount);
     });
-    it.each(['none', 'light', 'dark'])('keeps the %s canvas distinct from the Secondary Button fill', async (choice) => {
+    it('opens one axis menu at a time and closes it after a selection', async () => {
+        const { App } = createTestApp();
+        const scene = await render(_jsx(App, {}));
+        await fireEvent.press(scene.getByTestId('test-theme-scheme'));
+        expect(scene.getByTestId('test-theme-scheme').props.accessibilityState.expanded).toBe(true);
+        expect(scene.getByTestId('test-theme-scheme-light').props.accessibilityState.selected).toBe(true);
+        expect(scene.getByTestId('test-theme-scheme-system')).toBeOnTheScreen();
+        await fireEvent.press(scene.getByTestId('test-theme-source'));
+        expect(scene.queryByTestId('test-theme-scheme-menu')).toBeNull();
+        expect(scene.getByTestId('test-theme-source-menu')).toBeOnTheScreen();
+        await fireEvent.press(scene.getByTestId('test-theme-source'));
+        expect(scene.queryByTestId('test-theme-source-menu')).toBeNull();
+        await selectTheme(scene, 'scheme', 'dark');
+        expect(scene.queryByTestId('test-theme-scheme-menu')).toBeNull();
+        expect(scene.getByTestId('test-theme-scheme').props.accessibilityValue).toEqual({ text: 'Dark' });
+    });
+    it('applies scheme, contrast, and tone to the Flex defaults', async () => {
         const { App, themes } = createTestApp();
         const scene = await render(_jsx(App, {}));
-        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;
-        expect(theme.background.content).toBe(state.tokens.color.surfaceNeutralFar);
+        const coolLight = themes[themes.length - 1].tokens;
+        await selectTheme(scene, 'tone', 'warm');
+        const warmLight = themes[themes.length - 1];
+        expect(warmLight.appearance).toEqual({ colorScheme: 'light', contrast: 'standard', interfaceLevel: 'base', colorTone: 'warm' });
+        expect(warmLight.tokens.color.surfaceNeutralFar.rest).not.toBe(coolLight.color.surfaceNeutralFar.rest);
+        await selectTheme(scene, 'scheme', 'dark');
+        const warmDark = themes[themes.length - 1];
+        expect(warmDark.appearance.colorScheme).toBe('dark');
+        expect(warmDark.tokens.color.surfaceNeutralFar.rest).not.toBe(warmLight.tokens.color.surfaceNeutralFar.rest);
+        expect(warmDark.tokens.color.backgroundBrandLoud.hover).not.toBe(warmDark.tokens.color.backgroundBrandLoud.rest);
+        await selectTheme(scene, 'contrast', 'highContrast');
+        const highContrast = themes[themes.length - 1];
+        expect(highContrast.appearance.contrast).toBe('highContrast');
+        expect(highContrast.tokens.color.backgroundBrandLoud.hover).toBe(highContrast.tokens.color.backgroundBrandLoud.rest);
+        expect(highContrast.tokens.color.backgroundBrandLoud.pressed).toBe(highContrast.tokens.color.backgroundBrandLoud.rest);
+    });
+    it('follows the platform scheme only when System is selected', async () => {
+        jest.spyOn(Appearance, 'getColorScheme').mockReturnValue('dark');
+        const { App, themes, appearances } = createTestApp();
+        const scene = await render(_jsx(App, {}));
+        expect(themes[themes.length - 1].appearance.colorScheme).toBe('light');
+        await selectTheme(scene, 'scheme', 'system');
+        expect(appearances[appearances.length - 1].requested.colorScheme).toBe('system');
+        expect(themes[themes.length - 1].appearance.colorScheme).toBe('dark');
+    });
+    it('applies the legacy Fluent default theme to stories without tone and restores the Flex tone', async () => {
+        const { App, themes, chromeThemes, legacyThemes } = createTestApp();
+        const scene = await render(_jsx(App, {}));
+        await selectTheme(scene, 'tone', 'warm');
+        await selectTheme(scene, 'source', 'fluent');
+        const tone = scene.getByTestId('test-theme-tone');
+        expect(tone.props.accessibilityState).toEqual({ disabled: true, expanded: false });
+        expect(tone.props.accessibilityValue).toEqual({ text: 'Cool' });
+        await fireEvent.press(tone);
+        expect(scene.queryByTestId('test-theme-tone-menu')).toBeNull();
+        expect(themes[themes.length - 1].appearance.colorTone).toBe('cool');
+        expect(themes[themes.length - 1].tokens).not.toEqual(defaultFlexTokens);
+        expect(chromeThemes[chromeThemes.length - 1].tokens).toEqual(defaultFlexTokens);
+        expect(legacyThemes[legacyThemes.length - 1]?.host.appearance).toBe('light');
+        await selectTheme(scene, 'scheme', 'dark');
+        expect(legacyThemes[legacyThemes.length - 1]?.host.appearance).toBe('dark');
+        await selectTheme(scene, 'contrast', 'highContrast');
+        expect(legacyThemes[legacyThemes.length - 1]?.host.appearance).toBe('highContrast');
+        await selectTheme(scene, 'source', 'flex');
+        expect(legacyThemes[legacyThemes.length - 1]).toBeUndefined();
+        expect(scene.getByTestId('test-theme-tone').props.accessibilityValue).toEqual({ text: 'Warm' });
+        expect(themes[themes.length - 1].appearance.colorTone).toBe('warm');
+    });
+    it.each([
+        ['flex', 'light'],
+        ['flex', 'dark'],
+        ['fluent', 'light'],
+        ['fluent', 'dark'],
+    ])('keeps the Flex canvas distinct from the %s %s Secondary Button fill', async (source, scheme) => {
+        const { App, themes, chromeThemes } = createTestApp();
+        const scene = await render(_jsx(App, {}));
+        await selectTheme(scene, 'source', source);
+        await selectTheme(scene, 'scheme', scheme);
+        const story = themes[themes.length - 1];
+        const chrome = chromeThemes[chromeThemes.length - 1];
+        const theme = latestStorybookTheme();
+        expect(theme.background.content).toBe(chrome.tokens.color.surfaceNeutralFar.rest);
         expect(theme.background.content).toBe(theme.background.preview);
-        expect(theme.background.content).not.toBe(state.tokens.color.backgroundNeutralSubtle);
+        expect(theme.background.content).not.toBe(story.tokens.color.backgroundNeutralSubtle.rest);
     });
     it.each(['#ffeedd', 'transparent'])('preserves the explicit %s story background across theme changes', async (storyBackgroundColor) => {
         const { App } = createTestApp(storyBackgroundColor);
         const scene = await render(_jsx(App, {}));
-        for (const choice of ['none', 'dark', 'light']) {
-            await fireEvent.press(scene.getByTestId(`test-theme-${choice}`));
+        for (const [axis, value] of selectionSteps) {
+            await selectTheme(scene, axis, value);
             const calls = jest.mocked(StorybookUIComponent).mock.calls;
             expect(calls[calls.length - 1][0].storyBackgroundColor).toBe(storyBackgroundColor);
         }
     });
-    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();
+    it('switches Flex chrome and selected story colors together without recreating Storybook or resetting the scene', async () => {
+        const flex = new FlexThemeReference();
+        const { App, roots, themes, chromeThemes, mounted, unmounted, getStorybookUI } = createTestApp();
         const scene = await render(_jsx(App, {}));
         const root = roots[0];
-        const defaultBackground = themes[0].tokens.color.surfaceNeutralFar;
-        const backgrounds = {};
+        const defaultBackground = themes[0].tokens.color.surfaceNeutralFar.rest;
+        const backgrounds = new Set([defaultBackground]);
+        let source = 'flex';
         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, fallback) => (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.surfaceNeutralFar, 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));
+        for (const [axis, value] of selectionSteps) {
+            await selectTheme(scene, axis, value);
+            source = axis === 'source' ? value : source;
+            const story = themes[themes.length - 1];
+            const chrome = chromeThemes[chromeThemes.length - 1];
+            const { color } = chrome.tokens;
+            const theme = latestStorybookTheme();
+            backgrounds.add(theme.background.app);
+            expect(chrome.appearance).toEqual(story.appearance);
+            expect(chrome.tokens).toEqual(flex.resolveFlexTokens(chrome.appearance));
+            expect(story === chrome).toBe(source === 'flex');
+            expect(StyleSheet.flatten(scene.getByTestId('test-theme-toolbar').props.style).backgroundColor).toBe(color.backgroundNeutralSubtle.rest);
+            expect(StyleSheet.flatten(scene.getByText('Theme').props.style).color).toBe(color.foregroundNeutralPrimary.rest);
+            expect(theme.background.app).toBe(color.surfaceNeutralFar.rest);
+            expect(theme.background.content).toBe(color.surfaceNeutralFar.rest);
+            expect(theme.background.preview).toBe(color.surfaceNeutralFar.rest);
+            expect(theme.color.defaultText).toBe(color.foregroundNeutralPrimary.rest);
+            expect(theme.input.color).toBe(color.foregroundNeutralPrimary.rest);
+            expect(theme.button.background).toBe(color.backgroundNeutralLoud.rest);
             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(themes[themes.length - 1].tokens.color.surfaceNeutralFar.rest).toBe(defaultBackground);
+        expect(backgrounds.size).toBeGreaterThan(3);
         expect(getStorybookUI).toHaveBeenCalledTimes(1);
         expect(mounted).toHaveBeenCalledTimes(1);
         expect(unmounted).not.toHaveBeenCalled();