feat(lsd-react): provide default light and dark themes

packages/lsd-react/src/components/CSSBaseline/CSSBaseline.tsx

@@ -1,11 +1,10 @@
 import { Global } from '@emotion/react'
 import React, { useMemo } from 'react'
 import { ButtonStyles } from '../Button/Button.styles'
-import { Theme } from '../Theme'
-import { defaultTheme } from '../Theme/defaultTheme'
+import { defaultThemes, Theme } from '../Theme'
 
 export const CSSBaseline: React.FC<{ theme?: Theme }> = ({
-  theme = defaultTheme,
+  theme = defaultThemes.light,
 }) => {
   const styles = useMemo(
     () =>

packages/lsd-react/src/components/Theme/baseTheme.ts

@@ -2,7 +2,7 @@ import { css } from '@emotion/react'
 import { createThemeGlobalStyles } from './globalStyles'
 import { Theme } from './types'
 
-export const defaultTheme: Theme = {
+export const baseTheme: Theme = {
   breakpoints: {
     xs: {
       width: 0,
@@ -179,4 +179,4 @@ export const defaultTheme: Theme = {
   globalStyles: css``,
 }
 
-defaultTheme.globalStyles = createThemeGlobalStyles(defaultTheme)
+baseTheme.globalStyles = createThemeGlobalStyles(baseTheme)

packages/lsd-react/src/components/Theme/createTheme.ts

@@ -1,8 +1,8 @@
 import { css } from '@emotion/react'
 import defaultsDeep from 'lodash/defaultsDeep'
 import { pairs } from '../../utils/object.utils'
+import { baseTheme } from './baseTheme'
 import { THEME_BREAKPOINTS, THEME_TYPOGRAPHY_VARIANTS } from './constants'
-import { defaultTheme } from './defaultTheme'
 import { createThemeGlobalStyles } from './globalStyles'
 import type {
   BreakpointStyles,
@@ -73,7 +73,7 @@ const createPaletteStyles = (theme: CreateThemeProps, defaultTheme: Theme) =>
 
 export const createTheme = (
   props: CreateThemeProps,
-  from = defaultTheme,
+  from = baseTheme,
 ): Theme => {
   const theme: Theme = {
     typography: createTypographyStyles(props, from),

packages/lsd-react/src/components/Theme/defaultThemes.ts

@@ -0,0 +1,35 @@
+import { baseTheme } from './baseTheme'
+import { createTheme } from './createTheme'
+
+const lightTheme = createTheme(
+  {
+    breakpoints: {},
+    typography: {},
+    palette: {},
+  },
+  baseTheme,
+)
+
+const darkTheme = createTheme(
+  {
+    breakpoints: {},
+    typography: {},
+    palette: {
+      background: {
+        primary: '#000',
+      },
+      surface: {
+        primary: '#fff',
+      },
+      text: {
+        primary: 'rgb(255, 255, 255)',
+      },
+    },
+  },
+  lightTheme,
+)
+
+export const defaultThemes = {
+  light: lightTheme,
+  dark: darkTheme,
+}

packages/lsd-react/src/components/Theme/index.ts

@@ -6,6 +6,7 @@ export {
   THEME_VARIANT_PROPERTIES,
 } from './constants'
 export { createTheme } from './createTheme'
+export { defaultThemes } from './defaultThemes'
 export { createThemeGlobalStyles, globalStyles } from './globalStyles'
 export { ThemeProvider, type ThemeProviderProps } from './ThemeProvider'
 export * from './types'

packages/lsd-react/src/components/Theme/useTheme.ts

@@ -1,10 +1,10 @@
 import { useContext } from 'react'
-import { defaultTheme } from './defaultTheme'
+import { defaultThemes } from './defaultThemes'
 import { ThemeContext } from './ThemeProvider'
 import type { Theme } from './types'
 
 export const useTheme = <T extends Theme>() => {
   const theme = useContext(ThemeContext).theme as T
 
-  return theme ?? defaultTheme
+  return theme ?? defaultThemes.light
 }