Support for localized theme overrides

Is your feature request related to a problem? Please describe. When creating an internationalized site, sometimes you would want different stylings for different languages. For example, languages such as Japanese or Chinese might require a different font family and font size, and some widths need to be adjusted to account for different text lengths across languages.

Currently, the only way to really do this is to query on individual languages across styles.

const { locale } = useIntl() // get locale from some provider
<Box
  sx={{
    fontFamily: locale === "ja" ? "Mincho" : "Helvetica"
  }} />

This is cumbersome, especially when multiple languages are involved across multiple components and styles.

Describe the solution you’d like Ideally, theme-ui would be able to define overrides on themes based on locale:

theme = {
  fonts: {
    body: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
    heading: 'Georgia, serif',
    monospace: 'Menlo, monospace',
  },
  fontSizes: [
    12, 14, 16, 20, 24, 32, 48, 64
  ],
  ja: { // Override fonts and font sizes for Japanese
    fonts: {
      body: 'Mincho, system-ui'
    },
    fontSizes: [
      10, 12, 14, 18, 22, 30, 40, 60
    ]
  }
}

The locale can be set using a useLocale() hook that works much like the useColorMode() hook:

const [, setLocale] = useLocale()
setLocale(locale) // set to locale

Describe alternatives you’ve considered N/A

Additional context Related: #689

[tesseralis]

I feel like the “partial themes” option is better and would be easier to work with from a developer perspective. You’re usually looking at a page in a single locale and thinking “what are the style edits I need to do to make this work” rather than, say, scrolling through all the languages and checking the fonts for each one.

As for interfacing with other i18n related tools – most of them provide a locale or lang value through a hook, HOC, or render prop and as long as theme-ui can interface with that, we should be good.

Some popular i18n tools for React are:

• react-intl
• react-i18next
• lingui

[hasparus]

hey @rojobuffalo, I update the link in Lachlan’s message.