Merge pull request #24575 from storybookjs/22029-bug-preview-always-h…

…as-a-white-background Theming: Add theme variable to set the preview background color
storybookjs · Oct 31, 2023 · 8fdd30a · 8fdd30a
2 parents e437742 + 94eee1f
commit 8fdd30a
Show file tree

Hide file tree

Showing 8 changed files with 11 additions and 5 deletions.
diff --git a/code/lib/theming/src/base.ts b/code/lib/theming/src/base.ts
@@ -47,6 +47,7 @@ export const background = {
   app: '#F6F9FC',
   bar: color.lightest,
   content: color.lightest,
+  preview: color.lightest,
   gridCellSize: 10,
   hoverable: transparentize(0.9, color.secondary), // hover state for items in a list
 

diff --git a/code/lib/theming/src/convert.ts b/code/lib/theming/src/convert.ts
@@ -81,6 +81,7 @@ export const convert = (inherit: ThemeVars = themes[getPreferredColorScheme()]):
     colorSecondary,
     appBg,
     appContentBg,
+    appPreviewBg,
     appBorderColor,
     appBorderRadius,
     fontBase,
@@ -116,6 +117,7 @@ export const convert = (inherit: ThemeVars = themes[getPreferredColorScheme()]):
       app: appBg,
       bar: barBg,
       content: appContentBg,
+      preview: appPreviewBg,
       gridCellSize: gridCellSize || background.gridCellSize,
       hoverable: background.hoverable,
       positive: background.positive,

diff --git a/code/lib/theming/src/themes/dark.ts b/code/lib/theming/src/themes/dark.ts
@@ -11,6 +11,7 @@ const theme: ThemeVars = {
   // UI
   appBg: '#222425',
   appContentBg: '#1B1C1D',
+  appPreviewBg: color.lightest,
   appBorderColor: 'rgba(255,255,255,.1)',
   appBorderRadius: 4,
 

diff --git a/code/lib/theming/src/themes/light.ts b/code/lib/theming/src/themes/light.ts
@@ -11,6 +11,7 @@ const theme: ThemeVars = {
   // UI
   appBg: background.app,
   appContentBg: color.lightest,
+  appPreviewBg: color.lightest,
   appBorderColor: color.border,
   appBorderRadius: 4,
 

diff --git a/code/lib/theming/src/types.ts b/code/lib/theming/src/types.ts
@@ -17,6 +17,7 @@ export interface ThemeVarsColors {
   // UI
   appBg: string;
   appContentBg: string;
+  appPreviewBg: string;
   appBorderColor: string;
   appBorderRadius: number;
 

diff --git a/code/ui/manager/src/components/preview/iframe.tsx b/code/ui/manager/src/components/preview/iframe.tsx
@@ -3,8 +3,8 @@ import React from 'react';
 import { styled } from '@storybook/theming';
 import { Zoom } from '@storybook/components';
 
-const StyledIframe = styled.iframe({
-  backgroundColor: 'white',
+const StyledIframe = styled.iframe(({ theme }) => ({
+  backgroundColor: theme.background.preview,
   position: 'absolute',
   display: 'block',
   boxSizing: 'content-box',
@@ -13,7 +13,7 @@ const StyledIframe = styled.iframe({
   border: '0 none',
   transition: 'background-position 0s, visibility 0s',
   backgroundPosition: '-1px -1px, -1px -1px, -1px -1px, -1px -1px',
-});
+}));
 
 export interface IFrameProps {
   id: string;

diff --git a/code/ui/manager/src/components/preview/utils/components.ts b/code/ui/manager/src/components/preview/utils/components.ts
@@ -35,7 +35,6 @@ export const IframeWrapper = styled.div(({ theme }) => ({
   right: 0,
   width: '100%',
   height: '100%',
-  background: theme.background.content,
 }));
 
 export const LoaderWrapper = styled.div(({ theme }) => ({
@@ -44,6 +43,6 @@ export const LoaderWrapper = styled.div(({ theme }) => ({
   left: 0,
   bottom: 0,
   right: 0,
-  background: theme.background.content,
+  background: theme.background.preview,
   zIndex: 1,
 }));
diff --git a/docs/snippets/common/your-theme.js.mdx b/docs/snippets/common/your-theme.js.mdx
@@ -21,6 +21,7 @@ export default create({
   // UI
   appBg: '#ffffff',
   appContentBg: '#ffffff',
+  appPreviewBg: '#ffffff',
   appBorderColor: '#585C6D',
   appBorderRadius: 4,