fix: nested ThemeProvider

Author: shiftpsh

src/components/$List/ListItem.tsx

@@ -6,15 +6,13 @@ import { computeHoverColor, readableColor } from '../../utils/color'
 import { cssClickable, cssVariables } from '../../utils/styles'
 import { transparentHoverTemplate } from '../../utils/variables'
 
-export const listItemVariables = cssVariables(
+const { vars, v, styles } = cssVariables(
   {
     ...transparentHoverTemplate,
   },
   'listItem'
 )
 
-const { vars, v } = listItemVariables
-
 const paddingMap = {
   none: 'padding: 0;',
   normal: 'padding: 16px 8px;',
@@ -48,6 +46,7 @@ const whenClickable = css`
 `
 
 const ListItemContainer = styled.div<ListItemContainerProps>`
+  ${({ theme }) => styles(theme)}
   display: block;
   width: 100%;
   background: ${v.backgroundColor};

src/components/$Tab/Tab.tsx

@@ -7,16 +7,14 @@ import { computeHoverColor, readableColor } from '../../utils/color'
 import { cssClickable, cssVariables } from '../../utils/styles'
 import { transparentHoverTemplate } from '../../utils/variables'
 
-export const tabVariables = cssVariables(
+const { vars, v, styles } = cssVariables(
   {
     ...transparentHoverTemplate,
     accentColor: (theme) => theme.color.background.table.header,
   },
   'tab'
 )
 
-const { vars, v } = tabVariables
-
 interface TabContainerProps {
   current: boolean
 }
@@ -30,6 +28,7 @@ const whenCurrent = css`
 `
 
 const TabContainer = styled.button<TabContainerProps>`
+  ${({ theme }) => styles(theme)}
   ${cssClickable}
   ${ellipsis()}
   flex: 1 0 0;

src/components/Button.tsx

@@ -7,7 +7,7 @@ import { computeHoverColor, readableColor } from '../utils/color'
 import { cssClickable, cssVariables } from '../utils/styles'
 import { cardHoverTemplate } from '../utils/variables'
 
-export const buttonVariables = cssVariables(
+const { vars, v, styles } = cssVariables(
   {
     ...cardHoverTemplate,
     hoverShadow: (theme) =>
@@ -24,8 +24,6 @@ export const buttonVariables = cssVariables(
   'button'
 )
 
-const { vars, v } = buttonVariables
-
 const paddingMap = {
   none: 'padding: 0;',
   normal: 'padding: 12px 16px;',
@@ -38,6 +36,7 @@ interface ButtonContainerProps {
 }
 
 const ButtonContainer = styled.button<ButtonContainerProps>`
+  ${({ theme }) => styles(theme)}
   ${cssClickable}
   ${({ fullWidth }) => fullWidth && 'width: 100%;'}
   ${({ padding }) => paddingMap[padding]}

src/components/Card.tsx

@@ -6,15 +6,13 @@ import { computeHoverColor, readableColor } from '../utils/color'
 import { cssClickable, cssVariables } from '../utils/styles'
 import { cardHoverTemplate } from '../utils/variables'
 
-export const cardVariables = cssVariables(
+const { vars, v, styles } = cssVariables(
   {
     ...cardHoverTemplate,
   },
   'card'
 )
 
-const { vars, v } = cardVariables
-
 const paddingMap = {
   none: 'padding: 0;',
   normal: 'padding: 8px;',
@@ -37,6 +35,7 @@ const whenClickable = css`
 `
 
 const CardContainer = styled.div<CardContainerProps>`
+  ${({ theme }) => styles(theme)}
   display: block;
   background: ${v.backgroundColor};
   color: ${v.textColor};

src/components/Chip.tsx

@@ -5,17 +5,16 @@ import { PC, PP, PR } from '../types/PolymorphicElementProps'
 import { readableColor } from '../utils/color'
 import { cssVariables } from '../utils/styles'
 
-export const chipVariables = cssVariables(
+const { vars, v, styles } = cssVariables(
   {
     backgroundColor: (theme) => theme.color.background.card.dark,
     textColor: (theme) => theme.color.text.primary.main,
   },
   'chip'
 )
 
-const { vars, v } = chipVariables
-
 const ChipContainer = styled.div`
+  ${({ theme }) => styles(theme)}
   background-color: ${v.backgroundColor};
   color: ${v.textColor};
   padding: 8px 12px;

src/components/Container.tsx

@@ -3,15 +3,13 @@ import React, { ElementType } from 'react'
 import { PC, PP, PR } from '../types/PolymorphicElementProps'
 import { cssVariables } from '../utils/styles'
 
-export const containerVariables = cssVariables(
+const { vars, v, styles } = cssVariables(
   {
     width: '1200px',
   },
   'container'
 )
 
-const { vars, v } = containerVariables
-
 const paddingMap = {
   none: 'padding: 0;',
   normal: 'padding: 0 16px;',
@@ -24,6 +22,7 @@ interface ContainerContainerProps {
 }
 
 const ContainerContainer = styled.nav<ContainerContainerProps>`
+  ${({ theme }) => styles(theme)}
   max-width: ${v.width};
   ${({ padding }) => paddingMap[padding]}
   ${({ topBarPadding }) => topBarPadding && 'padding-top: 48px;'}

src/components/Footer.tsx

@@ -3,16 +3,14 @@ import React, { ElementType } from 'react'
 import { PC, PP, PR } from '../types/PolymorphicElementProps'
 import { cssVariables } from '../utils/styles'
 
-export const footerVariables = cssVariables(
+const { vars, v, styles } = cssVariables(
   {
     backgroundColor: (theme) => theme.color.background.footer,
     textColor: (theme) => theme.color.text.secondary.main,
   },
   'footer'
 )
 
-const { vars, v } = footerVariables
-
 const paddingMap = {
   none: 'padding: 0;',
   normal: 'padding: 16px 0;',
@@ -24,6 +22,7 @@ interface FooterContainerProps {
 }
 
 const FooterContainer = styled.nav<FooterContainerProps>`
+  ${({ theme }) => styles(theme)}
   background: ${v.backgroundColor};
   color: ${v.textColor};
   ${({ padding }) => paddingMap[padding]}

src/components/PaginationItem.tsx

@@ -7,7 +7,7 @@ import { computeHoverColor, readableColor } from '../utils/color'
 import { cssClickable, cssVariables } from '../utils/styles'
 import { transparentHoverTemplate } from '../utils/variables'
 
-export const paginationItemVariables = cssVariables(
+const { vars, v, styles } = cssVariables(
   {
     ...transparentHoverTemplate,
     activeBackgroundColor: (theme) =>
@@ -17,8 +17,6 @@ export const paginationItemVariables = cssVariables(
   'pagination-item'
 )
 
-const { vars, v } = paginationItemVariables
-
 interface PaginationItemContainerProps {
   current: boolean
 }
@@ -35,6 +33,7 @@ const whenCurrent = css`
 `
 
 const PaginationItemContainer = styled.button<PaginationItemContainerProps>`
+  ${({ theme }) => styles(theme)}
   ${ellipsis()}
   ${cssClickable}
   flex: 1 0 0;

src/components/Typo.tsx

@@ -85,10 +85,10 @@ const variants = (theme: SolvedTheme) =>
       margin-inline-end: 0px;
     `,
     small: css`
-      font-size: small;
+      font-size: 75%;
     `,
     smaller: css`
-      font-size: smaller;
+      font-size: 65%;
     `,
     tabular: css`
       font-feature-settings: 'tnum';

src/styles/GlobalStyles.tsx

@@ -2,29 +2,8 @@ import { css, Global, SerializedStyles, useTheme } from '@emotion/react'
 import emotionReset from 'emotion-reset'
 import { buttons, textInputs, transparentize } from 'polished'
 import React from 'react'
-import {
-  buttonVariables,
-  cardVariables,
-  chipVariables,
-  containerVariables,
-  footerVariables,
-  listItemVariables,
-  paginationItemVariables,
-  tabVariables
-} from '../components'
 import { SolvedTheme } from './Themes'
 
-const componentGlobalStyles = [
-  buttonVariables,
-  cardVariables,
-  chipVariables,
-  containerVariables,
-  footerVariables,
-  listItemVariables,
-  paginationItemVariables,
-  tabVariables,
-].map(({ styles }) => styles)
-
 const globalCss = (theme: SolvedTheme): SerializedStyles => css`
   ${emotionReset}
 
@@ -39,7 +18,6 @@ const globalCss = (theme: SolvedTheme): SerializedStyles => css`
     font-weight: 400;
     width: 100%;
     background: ${theme.color.background.footer};
-    ${componentGlobalStyles.map((fn) => fn(theme)).join('\n')}
   }
 
   body {