@fluentui-react-native/storybook-desktop-runtime 0.3.0 → 0.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.cache/tsconfig.tsbuildinfo +1 -1
- package/CHANGELOG.md +9 -0
- package/README.md +8 -0
- package/lib/StorybookTheme.test.js +23 -3
- package/lib/StorybookTheme.test.js.map +1 -1
- package/lib/useStorybookTheme.js +2 -1
- package/lib/useStorybookTheme.js.map +1 -1
- package/lib/useStorybookTheme.test.js +23 -0
- package/lib/useStorybookTheme.test.js.map +1 -1
- package/package.json +4 -4
- package/src/StorybookTheme.test.tsx +34 -3
- package/src/useStorybookTheme.test.tsx +29 -0
- package/src/useStorybookTheme.ts +2 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,14 @@
|
|
|
1
1
|
# @fluentui-react-native/storybook-desktop-runtime
|
|
2
2
|
|
|
3
|
+
## 0.3.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 3dbc30f: Align Storybook's actual canvas background with its preview surface so Secondary Button fills remain visible in Default Flex, light, and dark themes. Preserve explicit story background overrides and native-color fallbacks.
|
|
8
|
+
- @fluentui-react-native/design@0.5.1
|
|
9
|
+
- @fluentui-react-native/callout@0.29.6
|
|
10
|
+
- @fluentui-react-native/default-theme@0.27.14
|
|
11
|
+
|
|
3
12
|
## 0.3.0
|
|
4
13
|
|
|
5
14
|
### Minor Changes
|
package/README.md
CHANGED
|
@@ -26,6 +26,14 @@ utilities cannot consume opaque colors such as high-contrast `PlatformColor`
|
|
|
26
26
|
values, so the chrome adapter warns and substitutes contrasting fixed colors
|
|
27
27
|
from the selected theme for those values.
|
|
28
28
|
|
|
29
|
+
Both `background.content` and `background.preview` use `surfaceNeutralFar`.
|
|
30
|
+
Upstream LiteUI and its inner StoryView paint the canvas with `content`, even
|
|
31
|
+
when the surrounding desktop layout uses `preview`. Keeping those roles aligned
|
|
32
|
+
prevents the stock Default Flex, light, and dark canvases from matching the
|
|
33
|
+
Secondary Button's `backgroundNeutralSubtle` fill. Explicit story background
|
|
34
|
+
overrides still take precedence; component tokens and interaction colors are
|
|
35
|
+
unchanged.
|
|
36
|
+
|
|
29
37
|
It does not own W3C routing, WebdriverIO, test execution, evidence persistence,
|
|
30
38
|
or native accessibility/input/screenshot providers. Those responsibilities
|
|
31
39
|
belong to `@fluentui-react-native/desktop-driver`.
|
|
@@ -10,7 +10,7 @@ import { DesktopDriverBridge } from './DesktopDriverBridge';
|
|
|
10
10
|
import { StorybookUIComponent } from './StorybookUI';
|
|
11
11
|
jest.mock('./DesktopDriverBridge', () => ({ DesktopDriverBridge: jest.fn(() => null) }));
|
|
12
12
|
jest.mock('./StorybookUI', () => ({ StorybookUIComponent: jest.fn(() => null) }));
|
|
13
|
-
function createTestApp() {
|
|
13
|
+
function createTestApp(storyBackgroundColor) {
|
|
14
14
|
const roots = [];
|
|
15
15
|
const bridgeRoots = [];
|
|
16
16
|
const themes = [];
|
|
@@ -35,7 +35,7 @@ function createTestApp() {
|
|
|
35
35
|
if (!UI) {
|
|
36
36
|
throw new Error('Expected the app factory to configure the themed UI.');
|
|
37
37
|
}
|
|
38
|
-
return () => (_jsx(UI, { storyHash: {}, setStory: jest.fn(), storage: { getItem: () => null, setItem: () => undefined }, theme: lightTheme, children: _jsx(Story, {}) }));
|
|
38
|
+
return () => (_jsx(UI, { storyBackgroundColor: storyBackgroundColor, storyHash: {}, setStory: jest.fn(), storage: { getItem: () => null, setItem: () => undefined }, theme: lightTheme, children: _jsx(Story, {}) }));
|
|
39
39
|
});
|
|
40
40
|
const App = createDesktopStorybookApp({ getStorybookUI }, { enableWebsockets: false, testIDPrefix: 'test' });
|
|
41
41
|
return { App, roots, bridgeRoots, themes, mounted, unmounted, getStorybookUI };
|
|
@@ -71,6 +71,26 @@ describe('Storybook app theme root', () => {
|
|
|
71
71
|
expect(roots[0].inputModality).toBe('pointer');
|
|
72
72
|
expect(roots).toHaveLength(renderCount);
|
|
73
73
|
});
|
|
74
|
+
it.each(['none', 'light', 'dark'])('keeps the %s canvas distinct from the Secondary Button fill', async (choice) => {
|
|
75
|
+
const { App, themes } = createTestApp();
|
|
76
|
+
const scene = await render(_jsx(App, {}));
|
|
77
|
+
await fireEvent.press(scene.getByTestId(`test-theme-${choice}`));
|
|
78
|
+
const state = themes[themes.length - 1];
|
|
79
|
+
const calls = jest.mocked(StorybookUIComponent).mock.calls;
|
|
80
|
+
const theme = calls[calls.length - 1][0].theme;
|
|
81
|
+
expect(theme.background.content).toBe(state.tokens.color.surfaceNeutralFar);
|
|
82
|
+
expect(theme.background.content).toBe(theme.background.preview);
|
|
83
|
+
expect(theme.background.content).not.toBe(state.tokens.color.backgroundNeutralSubtle);
|
|
84
|
+
});
|
|
85
|
+
it.each(['#ffeedd', 'transparent'])('preserves the explicit %s story background across theme changes', async (storyBackgroundColor) => {
|
|
86
|
+
const { App } = createTestApp(storyBackgroundColor);
|
|
87
|
+
const scene = await render(_jsx(App, {}));
|
|
88
|
+
for (const choice of ['none', 'dark', 'light']) {
|
|
89
|
+
await fireEvent.press(scene.getByTestId(`test-theme-${choice}`));
|
|
90
|
+
const calls = jest.mocked(StorybookUIComponent).mock.calls;
|
|
91
|
+
expect(calls[calls.length - 1][0].storyBackgroundColor).toBe(storyBackgroundColor);
|
|
92
|
+
}
|
|
93
|
+
});
|
|
74
94
|
it('switches chrome and story colors together without recreating Storybook or resetting the scene', async () => {
|
|
75
95
|
const warn = jest.spyOn(console, 'warn').mockImplementation();
|
|
76
96
|
const { App, roots, themes, mounted, unmounted, getStorybookUI } = createTestApp();
|
|
@@ -92,7 +112,7 @@ describe('Storybook app theme root', () => {
|
|
|
92
112
|
const background = theme.base === 'dark' ? state.tokens.color.fixedBlack : state.tokens.color.fixedWhite;
|
|
93
113
|
const literal = (value, fallback) => (typeof value === 'string' ? value : fallback);
|
|
94
114
|
expect(theme.background.app).toBe(literal(state.tokens.color.surfaceNeutralFar, background));
|
|
95
|
-
expect(theme.background.content).toBe(literal(state.tokens.color.
|
|
115
|
+
expect(theme.background.content).toBe(literal(state.tokens.color.surfaceNeutralFar, background));
|
|
96
116
|
expect(theme.background.preview).toBe(literal(state.tokens.color.surfaceNeutralFar, background));
|
|
97
117
|
expect(theme.color.defaultText).toBe(literal(state.tokens.color.foregroundNeutralPrimary, foreground));
|
|
98
118
|
expect(theme.input.color).toBe(literal(state.tokens.color.foregroundNeutralPrimary, foreground));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StorybookTheme.test.js","sourceRoot":"","sources":["../src/StorybookTheme.test.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEhD,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAClE,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAE/E,OAAO,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAC;AAE1E,OAAO,EAAE,KAAK,IAAI,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAEtE,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AACxE,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAErD,IAAI,CAAC,IAAI,CAAC,uBAAuB,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,mBAAmB,EAAE,IAAI,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;AACzF,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,oBAAoB,EAAE,IAAI,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;AAElF,SAAS,aAAa;
|
|
1
|
+
{"version":3,"file":"StorybookTheme.test.js","sourceRoot":"","sources":["../src/StorybookTheme.test.tsx"],"names":[],"mappings":"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"}
|
package/lib/useStorybookTheme.js
CHANGED
|
@@ -69,7 +69,8 @@ function storybookThemeFromThemeState({ appearance, highContrast, tokens }) {
|
|
|
69
69
|
...base.background,
|
|
70
70
|
app: color('surfaceNeutralFar', 'background'),
|
|
71
71
|
bar: color('backgroundNeutralSubtle', 'background'),
|
|
72
|
-
content
|
|
72
|
+
// LiteUI and StoryView paint the canvas with content rather than preview.
|
|
73
|
+
content: color('surfaceNeutralFar', 'background'),
|
|
73
74
|
preview: color('surfaceNeutralFar', 'background'),
|
|
74
75
|
hoverable: color('backgroundNeutralSoft', 'background'),
|
|
75
76
|
positive: color('backgroundSuccessSubtle', 'background'),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useStorybookTheme.js","sourceRoot":"","sources":["../src/useStorybookTheme.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"useStorybookTheme.js","sourceRoot":"","sources":["../src/useStorybookTheme.ts"],"names":[],"mappings":"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"}
|
|
@@ -21,11 +21,15 @@ describe('Storybook theme palette', () => {
|
|
|
21
21
|
});
|
|
22
22
|
const scene = await render(_jsx(ThemedRoot, { theme: source, children: _jsx(Probe, { themes: themes, states: states }) }));
|
|
23
23
|
expect(themes[0].background.app).toBe('#123456');
|
|
24
|
+
expect(themes[0].background.content).toBe('#123456');
|
|
25
|
+
expect(themes[0].background.preview).toBe('#123456');
|
|
24
26
|
expect(themes[0].color.defaultText).toBe('#abcdef');
|
|
25
27
|
await scene.rerender(_jsx(ThemedRoot, { theme: source, children: _jsx(Probe, { themes: themes, states: states }) }));
|
|
26
28
|
expect(themes[themes.length - 1]).toBe(themes[0]);
|
|
27
29
|
await act(() => source.update({ color: { surfaceNeutralFar: '#654321' } }));
|
|
28
30
|
expect(themes[themes.length - 1].background.app).toBe('#654321');
|
|
31
|
+
expect(themes[themes.length - 1].background.content).toBe('#654321');
|
|
32
|
+
expect(themes[themes.length - 1].background.preview).toBe('#654321');
|
|
29
33
|
expect(themes[themes.length - 1]).not.toBe(themes[0]);
|
|
30
34
|
expect(themes[themes.length - 1].appBorderColor).toBe(states[states.length - 1].tokens.color.strokeNeutralSubtle);
|
|
31
35
|
});
|
|
@@ -39,5 +43,24 @@ describe('Storybook theme palette', () => {
|
|
|
39
43
|
expect(warn).toHaveBeenCalledTimes(1);
|
|
40
44
|
expect(warn).toHaveBeenCalledWith(expect.stringContaining('foregroundBrandPrimary'));
|
|
41
45
|
});
|
|
46
|
+
it.each([
|
|
47
|
+
['light', 'standard', 'fixedWhite'],
|
|
48
|
+
['dark', 'standard', 'fixedBlack'],
|
|
49
|
+
['light', 'highContrast', 'fixedBlack'],
|
|
50
|
+
['dark', 'highContrast', 'fixedBlack'],
|
|
51
|
+
])('retains the native canvas fallback for %s/%s', async (colorScheme, contrast, fallback) => {
|
|
52
|
+
const warn = jest.spyOn(console, 'warn').mockImplementation();
|
|
53
|
+
const themes = [];
|
|
54
|
+
const states = [];
|
|
55
|
+
const source = new FlexThemeReference({
|
|
56
|
+
appearance: { colorScheme, contrast },
|
|
57
|
+
base: { color: { surfaceNeutralFar: PlatformColor('windowBackgroundColor') } },
|
|
58
|
+
});
|
|
59
|
+
await render(_jsx(ThemedRoot, { theme: source, children: _jsx(Probe, { themes: themes, states: states }) }));
|
|
60
|
+
expect(themes[0].background.content).toBe(states[0].tokens.color[fallback]);
|
|
61
|
+
expect(themes[0].background.preview).toBe(states[0].tokens.color[fallback]);
|
|
62
|
+
expect(warn).toHaveBeenCalledTimes(1);
|
|
63
|
+
expect(warn).toHaveBeenCalledWith(expect.stringContaining('surfaceNeutralFar'));
|
|
64
|
+
});
|
|
42
65
|
});
|
|
43
66
|
//# sourceMappingURL=useStorybookTheme.test.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useStorybookTheme.test.js","sourceRoot":"","sources":["../src/useStorybookTheme.test.tsx"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"useStorybookTheme.test.js","sourceRoot":"","sources":["../src/useStorybookTheme.test.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui-react-native/storybook-desktop-runtime",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.1",
|
|
4
4
|
"description": "React Native runtime and Metro services for desktop Storybook applications",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "",
|
|
@@ -31,9 +31,9 @@
|
|
|
31
31
|
"test": "fluentui-scripts jest"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@fluentui-react-native/callout": "0.29.
|
|
35
|
-
"@fluentui-react-native/default-theme": "0.27.
|
|
36
|
-
"@fluentui-react-native/design": "0.5.
|
|
34
|
+
"@fluentui-react-native/callout": "0.29.6",
|
|
35
|
+
"@fluentui-react-native/default-theme": "0.27.14",
|
|
36
|
+
"@fluentui-react-native/design": "0.5.1",
|
|
37
37
|
"@rnx-kit/metro-config": "^2.2.4",
|
|
38
38
|
"@rnx-kit/metro-resolver-symlinks": "^0.3.1",
|
|
39
39
|
"@storybook/react-native": "^10.4.7",
|
|
@@ -15,7 +15,7 @@ import { StorybookUIComponent } from './StorybookUI';
|
|
|
15
15
|
jest.mock('./DesktopDriverBridge', () => ({ DesktopDriverBridge: jest.fn(() => null) }));
|
|
16
16
|
jest.mock('./StorybookUI', () => ({ StorybookUIComponent: jest.fn(() => null) }));
|
|
17
17
|
|
|
18
|
-
function createTestApp() {
|
|
18
|
+
function createTestApp(storyBackgroundColor?: string) {
|
|
19
19
|
const roots: RootSettings[] = [];
|
|
20
20
|
const bridgeRoots: RootSettings[] = [];
|
|
21
21
|
const themes: ThemeState[] = [];
|
|
@@ -44,7 +44,13 @@ function createTestApp() {
|
|
|
44
44
|
throw new Error('Expected the app factory to configure the themed UI.');
|
|
45
45
|
}
|
|
46
46
|
return () => (
|
|
47
|
-
<UI
|
|
47
|
+
<UI
|
|
48
|
+
storyBackgroundColor={storyBackgroundColor}
|
|
49
|
+
storyHash={{}}
|
|
50
|
+
setStory={jest.fn()}
|
|
51
|
+
storage={{ getItem: () => null, setItem: () => undefined }}
|
|
52
|
+
theme={lightTheme}
|
|
53
|
+
>
|
|
48
54
|
<Story />
|
|
49
55
|
</UI>
|
|
50
56
|
);
|
|
@@ -89,6 +95,31 @@ describe('Storybook app theme root', () => {
|
|
|
89
95
|
expect(roots).toHaveLength(renderCount);
|
|
90
96
|
});
|
|
91
97
|
|
|
98
|
+
it.each(['none', 'light', 'dark'])('keeps the %s canvas distinct from the Secondary Button fill', async (choice) => {
|
|
99
|
+
const { App, themes } = createTestApp();
|
|
100
|
+
const scene = await render(<App />);
|
|
101
|
+
|
|
102
|
+
await fireEvent.press(scene.getByTestId(`test-theme-${choice}`));
|
|
103
|
+
|
|
104
|
+
const state = themes[themes.length - 1];
|
|
105
|
+
const calls = jest.mocked(StorybookUIComponent).mock.calls;
|
|
106
|
+
const theme = calls[calls.length - 1][0].theme;
|
|
107
|
+
expect(theme.background.content).toBe(state.tokens.color.surfaceNeutralFar);
|
|
108
|
+
expect(theme.background.content).toBe(theme.background.preview);
|
|
109
|
+
expect(theme.background.content).not.toBe(state.tokens.color.backgroundNeutralSubtle);
|
|
110
|
+
});
|
|
111
|
+
|
|
112
|
+
it.each(['#ffeedd', 'transparent'])('preserves the explicit %s story background across theme changes', async (storyBackgroundColor) => {
|
|
113
|
+
const { App } = createTestApp(storyBackgroundColor);
|
|
114
|
+
const scene = await render(<App />);
|
|
115
|
+
|
|
116
|
+
for (const choice of ['none', 'dark', 'light']) {
|
|
117
|
+
await fireEvent.press(scene.getByTestId(`test-theme-${choice}`));
|
|
118
|
+
const calls = jest.mocked(StorybookUIComponent).mock.calls;
|
|
119
|
+
expect(calls[calls.length - 1][0].storyBackgroundColor).toBe(storyBackgroundColor);
|
|
120
|
+
}
|
|
121
|
+
});
|
|
122
|
+
|
|
92
123
|
it('switches chrome and story colors together without recreating Storybook or resetting the scene', async () => {
|
|
93
124
|
const warn = jest.spyOn(console, 'warn').mockImplementation();
|
|
94
125
|
const { App, roots, themes, mounted, unmounted, getStorybookUI } = createTestApp();
|
|
@@ -114,7 +145,7 @@ describe('Storybook app theme root', () => {
|
|
|
114
145
|
const background = theme.base === 'dark' ? state.tokens.color.fixedBlack : state.tokens.color.fixedWhite;
|
|
115
146
|
const literal = (value: unknown, fallback: unknown) => (typeof value === 'string' ? value : fallback);
|
|
116
147
|
expect(theme.background.app).toBe(literal(state.tokens.color.surfaceNeutralFar, background));
|
|
117
|
-
expect(theme.background.content).toBe(literal(state.tokens.color.
|
|
148
|
+
expect(theme.background.content).toBe(literal(state.tokens.color.surfaceNeutralFar, background));
|
|
118
149
|
expect(theme.background.preview).toBe(literal(state.tokens.color.surfaceNeutralFar, background));
|
|
119
150
|
expect(theme.color.defaultText).toBe(literal(state.tokens.color.foregroundNeutralPrimary, foreground));
|
|
120
151
|
expect(theme.input.color).toBe(literal(state.tokens.color.foregroundNeutralPrimary, foreground));
|
|
@@ -32,6 +32,8 @@ describe('Storybook theme palette', () => {
|
|
|
32
32
|
);
|
|
33
33
|
|
|
34
34
|
expect(themes[0].background.app).toBe('#123456');
|
|
35
|
+
expect(themes[0].background.content).toBe('#123456');
|
|
36
|
+
expect(themes[0].background.preview).toBe('#123456');
|
|
35
37
|
expect(themes[0].color.defaultText).toBe('#abcdef');
|
|
36
38
|
await scene.rerender(
|
|
37
39
|
<ThemedRoot theme={source}>
|
|
@@ -42,6 +44,8 @@ describe('Storybook theme palette', () => {
|
|
|
42
44
|
|
|
43
45
|
await act(() => source.update({ color: { surfaceNeutralFar: '#654321' } }));
|
|
44
46
|
expect(themes[themes.length - 1].background.app).toBe('#654321');
|
|
47
|
+
expect(themes[themes.length - 1].background.content).toBe('#654321');
|
|
48
|
+
expect(themes[themes.length - 1].background.preview).toBe('#654321');
|
|
45
49
|
expect(themes[themes.length - 1]).not.toBe(themes[0]);
|
|
46
50
|
expect(themes[themes.length - 1].appBorderColor).toBe(states[states.length - 1].tokens.color.strokeNeutralSubtle);
|
|
47
51
|
});
|
|
@@ -60,4 +64,29 @@ describe('Storybook theme palette', () => {
|
|
|
60
64
|
expect(warn).toHaveBeenCalledTimes(1);
|
|
61
65
|
expect(warn).toHaveBeenCalledWith(expect.stringContaining('foregroundBrandPrimary'));
|
|
62
66
|
});
|
|
67
|
+
|
|
68
|
+
it.each([
|
|
69
|
+
['light', 'standard', 'fixedWhite'],
|
|
70
|
+
['dark', 'standard', 'fixedBlack'],
|
|
71
|
+
['light', 'highContrast', 'fixedBlack'],
|
|
72
|
+
['dark', 'highContrast', 'fixedBlack'],
|
|
73
|
+
] as const)('retains the native canvas fallback for %s/%s', async (colorScheme, contrast, fallback) => {
|
|
74
|
+
const warn = jest.spyOn(console, 'warn').mockImplementation();
|
|
75
|
+
const themes: Theme[] = [];
|
|
76
|
+
const states: ThemeState[] = [];
|
|
77
|
+
const source = new FlexThemeReference({
|
|
78
|
+
appearance: { colorScheme, contrast },
|
|
79
|
+
base: { color: { surfaceNeutralFar: PlatformColor('windowBackgroundColor') } },
|
|
80
|
+
});
|
|
81
|
+
await render(
|
|
82
|
+
<ThemedRoot theme={source}>
|
|
83
|
+
<Probe themes={themes} states={states} />
|
|
84
|
+
</ThemedRoot>,
|
|
85
|
+
);
|
|
86
|
+
|
|
87
|
+
expect(themes[0].background.content).toBe(states[0].tokens.color[fallback]);
|
|
88
|
+
expect(themes[0].background.preview).toBe(states[0].tokens.color[fallback]);
|
|
89
|
+
expect(warn).toHaveBeenCalledTimes(1);
|
|
90
|
+
expect(warn).toHaveBeenCalledWith(expect.stringContaining('surfaceNeutralFar'));
|
|
91
|
+
});
|
|
63
92
|
});
|
package/src/useStorybookTheme.ts
CHANGED
|
@@ -77,7 +77,8 @@ function storybookThemeFromThemeState({ appearance, highContrast, tokens }: Them
|
|
|
77
77
|
...base.background,
|
|
78
78
|
app: color('surfaceNeutralFar', 'background'),
|
|
79
79
|
bar: color('backgroundNeutralSubtle', 'background'),
|
|
80
|
-
content
|
|
80
|
+
// LiteUI and StoryView paint the canvas with content rather than preview.
|
|
81
|
+
content: color('surfaceNeutralFar', 'background'),
|
|
81
82
|
preview: color('surfaceNeutralFar', 'background'),
|
|
82
83
|
hoverable: color('backgroundNeutralSoft', 'background'),
|
|
83
84
|
positive: color('backgroundSuccessSubtle', 'background'),
|