feat: support page background in the playground

packages/widget-playground/src/components/DrawerControls/DesignControls/AppearanceControl.tsx

@@ -13,12 +13,12 @@ import type {
 } from 'react';
 import { useEffect } from 'react';
 import type { ThemeMode } from '../../../hooks';
-import { useThemeMode } from '../../../hooks';
+import { useDefaultViewportColorForMode, useThemeMode } from '../../../hooks';
 import type { ThemeItem } from '../../../store';
 import {
   useConfigActions,
   useConfigAppearance,
-  useEditToolsActions,
+  useSetViewportBackgroundColor,
   useThemeValues,
 } from '../../../store';
 import { cloneStructuredConfig, patch } from '../../../utils';
@@ -89,8 +89,9 @@ export const AppearanceControl = () => {
   const themeMode = useThemeMode();
   const { setAppearance, setConfigTheme, getCurrentConfigTheme } =
     useConfigActions();
-  const { setViewportBackgroundColor } = useEditToolsActions();
+  const { setViewportBackgroundColor } = useSetViewportBackgroundColor();
   const { selectedThemeItem } = useThemeValues();
+  const { getDefaultViewportForAppearance } = useDefaultViewportColorForMode();
 
   const restricted = !!(
     selectedThemeItem && Object.keys(selectedThemeItem.theme).length < 2
@@ -128,7 +129,8 @@ export const AppearanceControl = () => {
       setConfigTheme(newTheme, selectedThemeItem.id);
 
       const viewportBackground =
-        selectedThemeItem.theme[newAppearance].playground?.background;
+        selectedThemeItem.theme[newAppearance].playground?.background ??
+        getDefaultViewportForAppearance(value);
       setViewportBackgroundColor(viewportBackground as string | undefined);
     }
 

packages/widget-playground/src/components/DrawerControls/DesignControls/LayoutControls.tsx

@@ -10,6 +10,7 @@ import {
   useEditToolsActions,
   useHeaderAndFooterToolValues,
   useLayoutValues,
+  usePlaygroundSettingValues,
 } from '../../../store';
 import {
   CardRowColumn,
@@ -82,6 +83,8 @@ const getLayoutMode = (container?: CSSProperties) => {
 export const LayoutControls = () => {
   const inputId = useId();
   const { config } = useConfig();
+  const { viewportColor } = usePlaygroundSettingValues();
+
   const { variant } = useConfigVariant();
   const { showMockHeader } = useHeaderAndFooterToolValues();
   const { setHeader, setContainer, getCurrentConfigTheme, setVariant } =
@@ -135,6 +138,15 @@ export const LayoutControls = () => {
         setHeader({
           position: 'fixed',
           top: showMockHeader ? 48 : 0,
+          pageBackground: viewportColor,
+          ...(getCurrentConfigTheme()?.container?.borderRadius
+            ? {
+                borderTopLeftRadius:
+                  getCurrentConfigTheme()?.container?.borderRadius,
+                borderTopRightRadius:
+                  getCurrentConfigTheme()?.container?.borderRadius,
+              }
+            : {}),
         });
 
         const fullHeightContainer = {

packages/widget-playground/src/components/DrawerControls/DesignControls/PlaygroundSettingsControl/HeaderAndFooterControls.tsx

@@ -3,12 +3,14 @@ import {
   useConfigActions,
   useEditToolsActions,
   useHeaderAndFooterToolValues,
+  useThemeHeader,
 } from '../../../../store';
 import { CardRowColumn } from '../../../Card';
 import { Switch } from '../../../Switch';
 import { ControlContainer, ControlRowContainer } from '../DesignControls.style';
 
 export const HeaderAndFooterControls = () => {
+  const { header } = useThemeHeader();
   const { showMockHeader, showMockFooter, isFooterFixed } =
     useHeaderAndFooterToolValues();
   const { setHeaderVisibility, setFooterVisibility, setFixedFooter } =
@@ -23,8 +25,8 @@ export const HeaderAndFooterControls = () => {
   ) => void = (_, checked) => {
     setHeaderVisibility(checked);
 
-    if (config?.theme?.header?.position === 'fixed') {
-      setHeader({ position: 'fixed', top: checked ? 48 : 0 });
+    if (header?.position === 'fixed') {
+      setHeader({ ...header, top: checked ? 48 : 0 });
     }
   };
 

packages/widget-playground/src/components/DrawerControls/DesignControls/PlaygroundSettingsControl/ViewportColorSelector.tsx

@@ -1,8 +1,8 @@
 import type { BoxProps } from '@mui/material';
-import { useTheme } from '@mui/material';
+import { useDefaultViewportColor } from '../../../../hooks';
 import {
-  useEditToolsActions,
   usePlaygroundSettingValues,
+  useSetViewportBackgroundColor,
 } from '../../../../store';
 import { safe6DigitHexColor } from '../../../../utils';
 import {
@@ -12,14 +12,9 @@ import {
 } from '../DesignControls.style';
 
 export const ViewportColorSelector = ({ ...rest }: BoxProps) => {
-  const theme = useTheme();
+  const { defaultColor } = useDefaultViewportColor();
   const { viewportColor } = usePlaygroundSettingValues();
-  const { setViewportBackgroundColor } = useEditToolsActions();
-
-  const defaultColor =
-    theme.palette.mode === 'light'
-      ? theme.palette.grey[100]
-      : theme.palette.common.black;
+  const { setViewportBackgroundColor } = useSetViewportBackgroundColor();
 
   return (
     <ColorControlContainer {...rest}>

packages/widget-playground/src/hooks/index.ts

@@ -1,2 +1,3 @@
+export * from './useDefaultViewportColor';
 export * from './useDevView';
 export * from './useThemeMode';

packages/widget-playground/src/hooks/useDefaultViewportColor.ts

@@ -0,0 +1,36 @@
+import type { Appearance } from '@lifi/widget';
+import { useMediaQuery, useTheme } from '@mui/material';
+
+export const useDefaultViewportColor = () => {
+  const theme = useTheme();
+
+  const defaultColor =
+    theme.palette.mode === 'light'
+      ? theme.palette.grey[100]
+      : theme.palette.common.black;
+
+  return {
+    defaultColor,
+  };
+};
+
+export const useDefaultViewportColorForMode = () => {
+  const theme = useTheme();
+  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+
+  const defaultViewportColors = {
+    light: theme.palette.grey[100],
+    dark: theme.palette.common.black,
+  };
+
+  const getDefaultViewportForAppearance = (appearance: Appearance) => {
+    const mode =
+      appearance === 'auto' ? (prefersDarkMode ? 'dark' : 'light') : appearance;
+
+    return defaultViewportColors[mode];
+  };
+
+  return {
+    getDefaultViewportForAppearance,
+  };
+};

packages/widget-playground/src/store/editTools/index.ts

@@ -8,4 +8,5 @@ export * from './useFontToolValues';
 export * from './useHeaderAndFooterToolValues';
 export * from './useLayoutValues';
 export * from './usePlaygroundSettingValues';
+export * from './useSetViewportBackgroundColor';
 export * from './useSkeletonToolValues';

packages/widget-playground/src/store/editTools/useSetViewportBackgroundColor.ts

@@ -0,0 +1,22 @@
+import { useConfigActions, useThemeHeader } from '../widgetConfig';
+import { useEditToolsActions } from './useEditToolsActions';
+
+export const useSetViewportBackgroundColor = () => {
+  const { header } = useThemeHeader();
+  const { setHeader } = useConfigActions();
+  const { setViewportBackgroundColor: setViewportColorEditTools } =
+    useEditToolsActions();
+
+  const setViewportBackgroundColor = (color: string | undefined) => {
+    if (header) {
+      setHeader({
+        ...header,
+        pageBackground: color,
+      });
+    }
+
+    setViewportColorEditTools(color);
+  };
+
+  return { setViewportBackgroundColor };
+};

packages/widget-playground/src/store/widgetConfig/useConfig.ts

@@ -8,3 +8,14 @@ export const useConfig = () => {
     config,
   };
 };
+
+export const useThemeHeader = () => {
+  const header = useWidgetConfigStore(
+    (state) => state.config?.theme?.header,
+    shallow,
+  );
+
+  return {
+    header,
+  };
+};