feat(website): inline global styles

website/gatsby-browser.js

@@ -1,13 +1,18 @@
 import React from 'react'
-import PageWrapper from './src/components/PageWrapper'
+import { RootWrapper } from './src/components/RootWrapper'
+import { PageWrapper } from './src/components/PageWrapper'
 
-export const wrapPageElement = ({ element }) => {
-    return (
-        <PageWrapper>
-            {element}
-        </PageWrapper>
-    )
-}
+export const wrapRootElement = ({ element }) => (
+    <RootWrapper>
+        {element}
+    </RootWrapper>
+)
+
+export const wrapPageElement = ({ element }) => (
+    <PageWrapper>
+        {element}
+    </PageWrapper>
+)
 
 export const onServiceWorkerUpdateReady = () => {
     const answer = window.confirm([

website/gatsby-ssr.js

@@ -1,10 +1,15 @@
 import React from 'react'
-import PageWrapper from './src/components/PageWrapper'
+import { RootWrapper } from './src/components/RootWrapper'
+import { PageWrapper } from './src/components/PageWrapper'
 
-export const wrapRootElement = ({ element }) => {
-    return (
-        <PageWrapper>
-            {element}
-        </PageWrapper>
-    )
-}
+export const wrapRootElement = ({ element }) => (
+    <RootWrapper>
+        {element}
+    </RootWrapper>
+)
+
+export const wrapPageElement = ({ element }) => (
+    <PageWrapper>
+        {element}
+    </PageWrapper>
+)

website/src/components/Highlight.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import HighlightBase, { defaultProps, Language } from 'prism-react-renderer'
-import { useTheme } from '../theming/context'
+import { useTheme } from 'styled-components'
 
 interface HighlightProps {
     code: string

website/src/components/PageWrapper.tsx

@@ -1,38 +1,16 @@
-import '../styles/index.css'
-import React, { useReducer } from 'react'
-import { ThemeProvider } from 'styled-components'
+import React from 'react'
 import { GlobalStyle } from '../theming/GlobalStyle'
-import theme from '../theming/theme'
-import { themeContext } from '../theming/context'
-import { globalDispatchContext, globalStateContext, globalStateReducer } from './state'
-// import useLocalStorage from '../lib/useLocalStorage'
-
-const PageWrapper = ({ children }) => {
-    // const [themeId] = useLocalStorage('theme', 'light')
-    const [state, dispatch] = useReducer(globalStateReducer, {
-        theme: 'light',
-    })
-    const currentTheme = theme[state.theme]
 
+export const PageWrapper = ({ children }: { children: any }) => {
     const isCapturing =
         children.props &&
         children.props.location &&
         children.props.location.search.indexOf('capture=1') !== -1
 
     return (
-        <globalDispatchContext.Provider value={dispatch}>
-            <globalStateContext.Provider value={state}>
-                <themeContext.Provider value={currentTheme}>
-                    <ThemeProvider theme={currentTheme}>
-                        <div className={isCapturing ? 'isCapturing' : ''}>
-                            <GlobalStyle isCapturing={isCapturing} />
-                            {children}
-                        </div>
-                    </ThemeProvider>
-                </themeContext.Provider>
-            </globalStateContext.Provider>
-        </globalDispatchContext.Provider>
+        <>
+            <GlobalStyle isCapturing={isCapturing} />
+            <div className={isCapturing ? 'isCapturing' : ''}>{children}</div>
+        </>
     )
 }
-
-export default PageWrapper

website/src/components/RootWrapper.tsx

@@ -0,0 +1,7 @@
+import React, { ReactNode } from 'react'
+import { SwitchableThemeProvider } from '../theming/SwitchableThemeProvider'
+import '../styles/index.css'
+
+export const RootWrapper = ({ children }: { children: ReactNode }) => (
+    <SwitchableThemeProvider>{children}</SwitchableThemeProvider>
+)

website/src/components/ThemeSelector.tsx

@@ -1,27 +1,23 @@
 import React, { useCallback, useMemo } from 'react'
-import styled from 'styled-components'
-import { useTheme } from '../theming/context'
-import { useGlobalDispatch, useGlobalState } from './state'
+import styled, { useTheme } from 'styled-components'
+import { useSetTheme } from '../theming/SwitchableThemeProvider'
 import { Switch } from './controls/Switch'
-// import useLocalStorage from '../lib/useLocalStorage'
 
 const ThemeSelector = () => {
-    // const [themeId, saveThemeId] = useLocalStorage('theme')
-    const dispatch = useGlobalDispatch()
-    const state = useGlobalState()
+    const theme = useTheme()
+    const themeId = theme.id
+    const setThemeId = useSetTheme()
+
     const toggleTheme = useCallback(() => {
-        const theme = state.theme === 'light' ? 'dark' : 'light'
-        // saveThemeId(theme)
-        dispatch({ type: 'setTheme', theme })
-    }, [dispatch, state.theme])
+        setThemeId(themeId === 'light' ? 'dark' : 'light')
+    }, [theme, themeId])
+
     const setTheme = useCallback(
         theme => {
-            // saveThemeId(theme)
-            dispatch({ type: 'setTheme', theme })
+            setThemeId(theme)
         },
-        [dispatch]
+        [setThemeId]
     )
-    const theme = useTheme()
     const colors = useMemo(
         () => ({
             on: theme.colors.cardBackground,
@@ -35,20 +31,20 @@ const ThemeSelector = () => {
         <ToggleContainer>
             <ToggleItem
                 id="lightTheme"
-                isActive={state.theme === 'light'}
+                isActive={themeId === 'light'}
                 onClick={() => setTheme('light')}
             >
                 light
             </ToggleItem>
             <Switch
                 id="themeToggle"
-                value={state.theme === 'dark'}
+                value={themeId === 'dark'}
                 onChange={toggleTheme}
                 colors={colors}
             />
             <ToggleItem
                 id="darkTheme"
-                isActive={state.theme === 'dark'}
+                isActive={themeId === 'dark'}
                 onClick={() => setTheme('dark')}
             >
                 dark

website/src/components/components/ComponentTabs.tsx

@@ -1,7 +1,6 @@
 import React, { PropsWithChildren, useState } from 'react'
-import styled from 'styled-components'
+import styled, { useTheme } from 'styled-components'
 import media from '../../theming/mediaQueries'
-import { useTheme } from '../../theming/context'
 import { Highlight } from '../Highlight'
 import { CodeBlock } from '../CodeBlock'
 

website/src/components/components/ComponentTemplate.tsx

@@ -1,10 +1,10 @@
 import React, { useState, useCallback, useMemo } from 'react'
 import { IGatsbyImageData } from 'gatsby-plugin-image'
+import { useTheme } from 'styled-components'
 import { Theme as NivoTheme } from '@nivo/core'
 import { startCase } from 'lodash'
 import { Seo } from '../Seo'
 import Layout from '../Layout'
-import { useTheme } from '../../theming/context'
 import { generateChartCode } from '../../lib/generateChartCode'
 import { ComponentPage } from './ComponentPage'
 import { ComponentHeader } from './ComponentHeader'

website/src/components/components/api-client/ApiTabs.tsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react'
-import styled, { keyframes } from 'styled-components'
+import styled, { keyframes, useTheme } from 'styled-components'
 import media from '../../../theming/mediaQueries'
-import { useTheme } from '../../../theming/context'
 import { CodeBlock } from '../../CodeBlock'
 import { ApiPreview } from './ApiPreview'
 

website/src/components/components/explorer/ComponentsGridItem.tsx

@@ -1,8 +1,7 @@
 import React, { memo } from 'react'
 import { Link } from 'gatsby'
-import styled from 'styled-components'
+import styled, { useTheme } from 'styled-components'
 import media from '../../../theming/mediaQueries'
-import { useTheme } from '../../../theming/context'
 
 interface ComponentsGridItemProps {
     path: string

website/src/components/controls/OpacityControl.tsx

@@ -1,11 +1,9 @@
 import React, { useCallback } from 'react'
-import styled from 'styled-components'
+import styled, { useTheme } from 'styled-components'
 import { Control } from './Control'
 import { PropertyHeader } from './PropertyHeader'
 import { TextInput } from './TextInput'
 import { Help } from './Help'
-// @ts-ignore
-import { useTheme } from '../../theming/context'
 import { Flavor, ChartProperty } from '../../types'
 import { OpacityControlConfig } from './types'
 

website/src/components/controls/Select.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import ReactSelect from 'react-select'
-import { useTheme } from '../../theming/context'
+import { useTheme } from 'styled-components'
 
 const Select = props => {
     const theme = useTheme()

website/src/components/guides/axes/theme.tsx

@@ -1,6 +1,6 @@
 import { useMemo } from 'react'
 import { Theme } from '@nivo/core'
-import { useTheme } from '../../../theming/context'
+import { useTheme } from 'styled-components'
 
 export const useAxisTheme = (): Theme => {
     const theme = useTheme()

website/src/components/guides/colors/ColorsIllustrations.js

@@ -1,10 +1,10 @@
 import React from 'react'
+import { useTheme } from 'styled-components'
 import { ResponsiveBar } from '@nivo/bar'
 import { ResponsiveStream } from '@nivo/stream'
 import { ResponsiveTreeMap } from '@nivo/treemap'
 import { generateCountriesData } from '@nivo/generators'
 import { FullWidthBanner } from '../../styled'
-import { useTheme } from '../../../theming/context'
 
 const ColorsIllustrations = () => {
     const theme = useTheme()

website/src/components/guides/gradients/GradientsIllustrations.js

@@ -1,11 +1,11 @@
 import React from 'react'
+import { useTheme } from 'styled-components'
 import { linearGradientDef } from '@nivo/core'
 import { ResponsiveBar } from '@nivo/bar'
 import { ResponsiveStream } from '@nivo/stream'
 import { ResponsiveTreeMap } from '@nivo/treemap'
 import { generateCountriesData } from '@nivo/generators'
 import { FullWidthBanner } from '../../styled'
-import { useTheme } from '../../../theming/context'
 
 const GradientsIllustrations = () => {
     const theme = useTheme()

website/src/components/guides/legends/LegendDirection.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
+import { useTheme } from 'styled-components'
 import { BoxLegendSvg } from '@nivo/legends'
-import { useTheme } from '../../../theming/context'
 
 const legendProps = {
     containerWidth: 800,

website/src/components/guides/legends/LegendItemDirection.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
+import { useTheme } from 'styled-components'
 import { LegendSvgItem } from '@nivo/legends'
-import { useTheme } from '../../../theming/context'
 
 const itemDirections = ['left-to-right', 'right-to-left', 'top-to-bottom', 'bottom-to-top'] as const
 

website/src/components/guides/legends/LegendPosition.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import omit from 'lodash/omit'
+import { useTheme } from 'styled-components'
 import { BoxLegendSvg } from '@nivo/legends'
-import { useTheme } from '../../../theming/context'
 
 const anchors = [
     'top-left',

website/src/components/guides/legends/SymbolShape.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
+import { useTheme } from 'styled-components'
 import { LegendSvgItem } from '@nivo/legends'
 import { Highlight } from '../../Highlight'
-import { useTheme } from '../../../theming/context'
 
 const shapes = ['square', 'circle', 'triangle', 'diamond'] as const
 

website/src/components/guides/patterns/PatternsIllustrations.tsx

@@ -1,13 +1,11 @@
 import React from 'react'
-// @ts-ignore
+import { useTheme } from 'styled-components'
 import { patternDotsDef, patternLinesDef, patternSquaresDef } from '@nivo/core'
 import { ResponsiveBar } from '@nivo/bar'
 import { ResponsiveStream } from '@nivo/stream'
 import { ResponsiveTreeMap } from '@nivo/treemap'
 import { generateCountriesData } from '@nivo/generators'
 import { FullWidthBanner } from '../../styled'
-// @ts-ignore
-import { useTheme } from '../../../theming/context'
 
 export const PatternsIllustrations = () => {
     const theme = useTheme()

website/src/components/home/Home.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { useTheme } from '../../theming/context'
+import { useTheme } from 'styled-components'
 import { Container, HomeBaseline, HomeLogo } from './styled'
 import { HomeChord } from './HomeChord'
 import HomeLine from './HomeLine'

website/src/components/nav/MiniNavLink.js

@@ -1,7 +1,6 @@
 import React, { memo } from 'react'
 import { Link } from 'gatsby'
-import styled from 'styled-components'
-import { useTheme } from '../../theming/context'
+import styled, { useTheme } from 'styled-components'
 
 const Label = styled.span`
     position: absolute;

website/src/pages/guides/legends.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
+import { useTheme } from 'styled-components'
 // @ts-ignore
 import { themeContext } from '@nivo/core'
-import { useTheme } from '../../theming/context'
 import Layout from '../../components/Layout'
 import { Seo } from '../../components/Seo'
 import PageContent from '../../components/PageContent'