Feature/fix nested themeprovider

example/src/stories/Typo.stories.tsx

@@ -13,7 +13,7 @@ export default {
     variant: {
       control: {
         type: 'select',
-        optopns: [
+        options: [
           'default',
           'description',
           'error',

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

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react'
 import styled from '@emotion/styled'
 import React, { ElementType } from 'react'
-import { SolvedTheme } from '../styles'
+import { SolvedTheme, solvedThemes } from '../styles'
 import { PC, PP, PR } from '../types/PolymorphicElementProps'
 
 const variants = (theme: SolvedTheme) =>
@@ -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';
@@ -104,7 +104,13 @@ const variants = (theme: SolvedTheme) =>
     `,
   } as const)
 
-export type TypoVariant = keyof ReturnType<typeof variants>
+const variantKeys = Object.keys(variants(solvedThemes.light))
+
+type VariantsObject = ReturnType<typeof variants>
+type OptionalVariables = {
+  [key in keyof VariantsObject]: boolean
+}
+export type TypoVariant = keyof VariantsObject
 
 const asMap = {
   h1: 'h1',
@@ -118,23 +124,18 @@ const asMap = {
 } as const
 
 interface TypoContainerProps {
-  variant: TypoVariant | TypoVariant[]
+  variant: TypoVariant[]
 }
 
 const TypoContainer = styled.span<TypoContainerProps>`
-  ${({ theme, variant }) =>
-    typeof variant === 'string'
-      ? variants(theme)[variant]
-      : variant.map((v) => variants(theme)[v])}
+  ${({ theme, variant }) => variant.map((v) => variants(theme)[v])}
 `
 
-export interface TypoProps {
+export type TypoProps = {
   variant?: TypoVariant | TypoVariant[]
-}
+} & OptionalVariables
 
-const firstVariant = (
-  variant?: TypoVariant | TypoVariant[]
-): TypoVariant | undefined => {
+const firstVariant = (variant?: TypoVariant[]): TypoVariant | undefined => {
   if (typeof variant === 'string') return variant
   if (Array.isArray(variant) && variant.length > 0) return variant[0]
   return undefined
@@ -144,12 +145,30 @@ export const Typo: PC<'span', TypoProps> = React.forwardRef(
   <T extends ElementType>(props: PP<T, TypoProps>, ref?: PR<T>) => {
     const { variant = [], as, ...rest } = props
 
+    const calculatedVariants = [
+      ...(typeof variant === 'string' ? [variant] : variant),
+      ...Object.entries(rest)
+        .filter(
+          ([k, v]) => variantKeys.includes(k) && typeof v === 'boolean' && v
+        )
+        .map(([k]) => k),
+    ] as TypoVariant[]
+
     // TODO types are wrong when `as` is inferred by variant
     const calculatedAs =
-      as || asMap[firstVariant(variant) ?? 'default'] || 'span'
+      as || asMap[firstVariant(calculatedVariants) ?? 'default'] || 'span'
+
+    const filteredRest = Object.fromEntries(
+      Object.entries(rest).filter(([k]) => !variantKeys.includes(k))
+    )
 
     return (
-      <TypoContainer ref={ref} as={calculatedAs} variant={variant} {...rest} />
+      <TypoContainer
+        ref={ref}
+        as={calculatedAs}
+        variant={calculatedVariants}
+        {...filteredRest}
+      />
     )
   }
 )

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 {