Merge pull request #1572 from habx/feature/prepare-dark-theme-

APP-16937: Add preset on ThemeProvider

src/Background/Background.style.ts

@@ -2,12 +2,8 @@ import styled from 'styled-components'
 
 import { theme } from '../theme'
 
-export const BackgroundContainer = styled.div<{
-  backgroundColor: string
-}>`
+export const BackgroundContainer = styled.div`
   &:not([data-simulated='true']) {
-    background-color: ${theme.color('primary', {
-      valuePropName: 'backgroundColor',
-    })};
+    background-color: ${theme.color('background')};
   }
 `

src/Background/Background.tsx

@@ -33,12 +33,7 @@ export const Background = React.forwardRef<HTMLDivElement, BackgroundProps>(
 
     return (
       <BackgroundThemeProvider backgroundColor={backgroundColorWithOpacity}>
-        <BackgroundContainer
-          ref={ref}
-          {...rest}
-          backgroundColor={backgroundColorWithOpacity}
-          data-simulated={simulated}
-        />
+        <BackgroundContainer ref={ref} {...rest} data-simulated={simulated} />
       </BackgroundThemeProvider>
     )
   }

src/Card/Card.tsx

@@ -1,16 +1,19 @@
 import * as React from 'react'
 
+import { useCurrentBackground } from '../useCurrentBackground'
+
 import { CardProps } from './Card.interface'
 import { CardContainer } from './Card.style'
 
 export const Card = React.forwardRef<HTMLDivElement, CardProps>(
   (props, ref) => {
+    const defaultBackgroundColor = useCurrentBackground()
     const {
       animated,
       flat,
       children,
       spacing,
-      backgroundColor = '#FFFFFF',
+      backgroundColor = defaultBackgroundColor,
       ...rest
     } = props
 

src/HeaderBar/HeaderBar.interface.ts

@@ -1,10 +1,11 @@
 import { BackgroundProps } from '../Background'
+import { Color } from '../color'
 
 export interface HeaderBarProps
   extends Omit<BackgroundProps, 'backgroundColor'> {
   progress?: number
   small?: boolean
   large?: boolean
-  backgroundColor?: string
+  backgroundColor?: Color
   sticky?: boolean
 }

src/Layout/Layout.interface.ts

@@ -1,7 +1,8 @@
 import { BackgroundProps } from '../Background'
+import { Color } from '../color'
 
 export interface LayoutProps extends Omit<BackgroundProps, 'backgroundColor'> {
-  backgroundColor?: string
+  backgroundColor?: Color
 }
 
 export enum LayoutChild {

src/LightBox/LightBox.tsx

@@ -5,6 +5,7 @@ import * as ReactDOM from 'react-dom'
 import { isFunction } from '../_internal/data'
 import { isClientSide } from '../_internal/ssr'
 import { ANIMATION_DURATIONS } from '../animations'
+import { useCurrentBackground } from '../useCurrentBackground'
 import { withTriggerElement } from '../withTriggerElement'
 
 import { LightBoxInnerProps } from './LightBox.interface'
@@ -30,10 +31,12 @@ const InnerLightBox = React.forwardRef<HTMLDivElement, LightBoxInnerProps>(
       animationDuration: ANIMATION_DURATIONS.l,
     })
 
+    const backgroundColor = useCurrentBackground({ useRootTheme: true })
+
     const content = (
       <LightBoxContainer
         ref={ref}
-        backgroundColor="#FFFFFF"
+        backgroundColor={backgroundColor}
         data-state={modal.state}
         data-spacing={spacing}
         {...rest}
@@ -51,6 +54,6 @@ const InnerLightBox = React.forwardRef<HTMLDivElement, LightBoxInnerProps>(
   }
 )
 
-export const LightBox = withTriggerElement<HTMLDivElement>()<
-  LightBoxInnerProps
->(InnerLightBox)
+export const LightBox = withTriggerElement<HTMLDivElement>()<LightBoxInnerProps>(
+  InnerLightBox
+)

src/Menu/Menu.style.ts

@@ -1,10 +1,8 @@
 import styled from 'styled-components'
 
-import { Background } from '../Background'
 import { theme } from '../theme'
 
-export const FloatingMenuContainer = styled(Background)`
-  background-color: ${theme.color('background', { useRootTheme: true })};
+export const FloatingMenuContainer = styled.div`
   box-shadow: ${theme.shadow()};
   border-radius: 4px;
 `

src/Menu/Menu.tsx

@@ -6,7 +6,6 @@ import { buildUseOnlyOpenedInstanceHook } from '../_internal/useOnlyOpenedInstan
 import { useWindowSize } from '../_internal/useWindowSize'
 import { breakpoints } from '../breakpoints'
 import { TogglePanel, TogglePanelProps } from '../TogglePanel'
-import { useCurrentBackground } from '../useCurrentBackground'
 import { withTriggerElement } from '../withTriggerElement'
 
 import { MenuContext } from './Menu.context'
@@ -38,7 +37,6 @@ export const InnerMenu = React.forwardRef<HTMLDivElement, InnerMenuProps>(
     useOnlyOneMenuOpened({ open, onClose })
 
     const size = useWindowSize()
-    const background = useCurrentBackground({ useRootTheme: true })
 
     const getChildren = React.useCallback(
       (modal: Modal<HTMLDivElement>) => {
@@ -49,7 +47,7 @@ export const InnerMenu = React.forwardRef<HTMLDivElement, InnerMenuProps>(
             {fullScreenOnMobile && size.width < breakpoints.raw.phone ? (
               <FullScreenMenu>{content}</FullScreenMenu>
             ) : (
-              <FloatingMenuContainer backgroundColor={background}>
+              <FloatingMenuContainer>
                 <FloatingMenu data-scrollable={scrollable}>
                   {content}
                 </FloatingMenu>
@@ -58,14 +56,7 @@ export const InnerMenu = React.forwardRef<HTMLDivElement, InnerMenuProps>(
           </MenuContext.Provider>
         )
       },
-      [
-        background,
-        children,
-        fullScreenOnMobile,
-        onClose,
-        scrollable,
-        size.width,
-      ]
+      [children, fullScreenOnMobile, onClose, scrollable, size.width]
     )
 
     const setStyle = React.useCallback<Required<TogglePanelProps>['setStyle']>(

src/Modal/Modal.tsx

@@ -4,6 +4,7 @@ import * as ReactDOM from 'react-dom'
 
 import { isFunction } from '../_internal/data'
 import { isClientSide } from '../_internal/ssr'
+import { useCurrentBackground } from '../useCurrentBackground'
 import { withTriggerElement } from '../withTriggerElement'
 
 import { ModalInnerProps } from './Modal.interface'
@@ -42,10 +43,12 @@ const InnerModal = React.forwardRef<HTMLDivElement, ModalInnerProps>(
       animationDuration: ANIMATION_DURATION,
     })
 
+    const backgroundColor = useCurrentBackground({ useRootTheme: true })
+
     const content = (
       <ModalOverlay data-state={modal.state} data-testid="modal-overlay">
         <ModalContainer
-          backgroundColor="#FFFFFF"
+          backgroundColor={backgroundColor}
           ref={modal.ref}
           data-testid="modal-container"
           data-width={width}

src/Select/Select.style.ts

@@ -64,8 +64,8 @@ export const SelectContainer = styled.div`
     --select-border-width: 1.5px;
 
     &[data-background='true'] {
-      --select-background-color: #fff;
-      --select-border-color: ${theme.neutralColor(200)};
+      --select-background-color: ${theme.neutralColor(100)};
+      --select-border-color: ${theme.neutralColor(300)};
     }
 
     ${({ color }) =>
@@ -92,7 +92,7 @@ export const SelectContainer = styled.div`
   }
 
   &[data-light='true'] {
-    --select-background-color: #fff;
+    --select-background-color: ${theme.color('background')};
     font-size: ${fontScale.mars.size}px;
     padding: 0 12px;
 
@@ -143,7 +143,7 @@ export const SelectContainer = styled.div`
     }
 
     &:not([data-light='true']) {
-      background-color: #fff;
+      background-color: ${theme.neutralColor(100)};
     }
   }
 

src/TextInput/TextInput.style.ts

@@ -53,8 +53,8 @@ export const inputStyle = css`
     }
 
     &[data-background='true'] {
-      background-color: #fff;
-      border-color: #fff;
+      background-color: ${theme.neutralColor(100)};
+      border-color: ${theme.neutralColor(300)};
     }
 
     &[data-error='true'] {

src/ThemeProvider/ThemeProvider.interface.ts

@@ -1,19 +1,18 @@
 import * as React from 'react'
 
-import { Color } from '../color'
 import { ThemeVariant } from '../theme'
 
 type PartialRecursive<T> = T extends object
   ? { [K in keyof T]?: PartialRecursive<T[K]> }
   : T
 
 export interface DesignSystemThemePatch {
-  backgroundColor?: Color
   light?: PartialRecursive<ThemeVariant>
   dark?: PartialRecursive<ThemeVariant>
 }
 
 export interface ThemeProviderProps {
-  theme: DesignSystemThemePatch
+  theme?: DesignSystemThemePatch
+  preset?: 'dark' | 'light'
   children?: React.ReactNode
 }

src/ThemeProvider/ThemeProvider.style.ts

@@ -0,0 +1,7 @@
+import styled from 'styled-components'
+
+import { theme } from '../theme'
+
+export const ThemeProviderContainer = styled.div`
+  background-color: ${theme.color('background')};
+`

src/ThemeProvider/ThemeProvider.tsx

@@ -5,7 +5,6 @@ import {
   ThemeContext,
 } from 'styled-components'
 
-import { isColorDark } from '../color'
 import {
   DesignSystemTheme,
   DesignSystemProviderValue,
@@ -15,9 +14,11 @@ import {
 import { ThemeVariant } from '../theme'
 
 import { ThemeProviderProps } from './ThemeProvider.interface'
+import { ThemeProviderContainer } from './ThemeProvider.style'
 
 export const ThemeProvider: React.FunctionComponent<ThemeProviderProps> = ({
   theme,
+  preset = 'light',
   children,
 }) => {
   const styledTheme = React.useContext<StyledTheme>(ThemeContext)
@@ -28,30 +29,37 @@ export const ThemeProvider: React.FunctionComponent<ThemeProviderProps> = ({
     const newLightVariant: ThemeVariant = merge.recursive(
       true,
       currentTheme.light,
-      theme.light ?? {}
+      theme?.light ?? {}
     )
 
     const newDarkVariant: ThemeVariant = merge.recursive(
       true,
       currentTheme.dark,
-      theme.dark ?? {}
+      theme?.dark ?? {}
     )
 
-    const newBackgroundColor =
-      theme.backgroundColor ?? currentTheme.backgroundColor
-
     const newTheme: DesignSystemTheme = {
       light: newLightVariant,
       dark: newDarkVariant,
-      isDark: isColorDark(newBackgroundColor),
-      backgroundColor: newBackgroundColor,
+      isDark: preset === 'dark',
+      backgroundColor:
+        preset === 'dark'
+          ? newDarkVariant.defaultBackground
+          : newLightVariant.defaultBackground,
     }
 
     return {
       value: newTheme,
       rootValue: newTheme,
     }
-  }, [currentTheme, theme])
+  }, [
+    currentTheme.backgroundColor,
+    currentTheme.dark,
+    currentTheme.light,
+    preset,
+    theme?.dark,
+    theme?.light,
+  ])
 
   const newStyledTheme = React.useMemo<StyledTheme>(
     () => ({
@@ -63,7 +71,7 @@ export const ThemeProvider: React.FunctionComponent<ThemeProviderProps> = ({
 
   return (
     <BaseThemeProvider theme={newStyledTheme}>
-      <React.Fragment>{children}</React.Fragment>
+      <ThemeProviderContainer>{children}</ThemeProviderContainer>
     </BaseThemeProvider>
   )
 }

src/TogglePanel/TogglePanel.style.ts

@@ -2,8 +2,9 @@ import styled from 'styled-components'
 
 import { zIndex } from '../_internal/theme/zIndex'
 import { animations } from '../animations'
+import { Background } from '../Background'
 
-export const Container = styled.div`
+export const Container = styled(Background)`
   position: fixed;
   opacity: 1;
   z-index: ${zIndex.dropDowns};

src/TogglePanel/TogglePanel.tsx

@@ -8,6 +8,7 @@ import { useWindowSize } from '../_internal/useWindowSize'
 import { ANIMATION_DURATIONS } from '../animations'
 import { breakpoints } from '../breakpoints'
 import { Modal } from '../Modal'
+import { useCurrentBackground } from '../useCurrentBackground'
 import { withTriggerElement } from '../withTriggerElement'
 
 import { InnerTogglePanelProps } from './TogglePanel.interface'
@@ -100,6 +101,8 @@ const InnerTogglePanel = React.forwardRef<
 
     const parent = React.useContext(Context)
 
+    const backgroundColor = useCurrentBackground({ useRootTheme: true })
+
     if (!isClientSide) {
       return null
     }
@@ -121,6 +124,7 @@ const InnerTogglePanel = React.forwardRef<
         {withOverlay && modal.state === 'opened' && <Overlay />}
 
         <Container
+          backgroundColor={backgroundColor}
           data-state={modal.state}
           ref={modal.ref}
           style={customStyle}

src/theme/theme.data.ts

@@ -84,6 +84,7 @@ const LIGHT_THEME_VARIANT: ThemeVariant = {
       { x: 0, y: 16, blur: 36, opacity: 0.15 },
     ],
   },
+  defaultBackground: palette.neutralWhiteWithIntensityFading[1000],
 }
 
 const DARK_THEME_VARIANT: ThemeVariant = {
@@ -168,6 +169,8 @@ const DARK_THEME_VARIANT: ThemeVariant = {
       { x: 0, y: 16, blur: 36, opacity: 0.25 },
     ],
   },
+
+  defaultBackground: palette.neutralBlackWithIntensityFading[900],
 }
 
 export const DEFAULT_THEME: DesignSystemTheme = {

src/theme/theme.interface.ts

@@ -66,6 +66,7 @@ export interface ThemeVariant {
   typography: Typography
   neutralColor: NeutralGradients
   shadows: Shadows
+  defaultBackground: Color
 }
 
 export interface DesignSystemTheme {