Theme provider should initialize standard theme fields to defaults

[wereHamster]

Is your feature request related to a problem? Please describe.

If you have a theme object which uses breakpoints, like so:

{
  box: {
    px: ["10px", "20px", "30px"]
  }
}

Then the theme will implicitly use the default breakpoints. But those defaults are not made available through the theme object. In other words, code like this will crash at runtime:

const { theme } = useThemeUI();
console.log(theme.breakpoints[2]);

I either have to define the breakpoints in the theme object, or use the same logic as internally by theme-ui to fall back to defaultBreakpoints.

Describe the solution you'd like

Material-UI solves this nicely by fully initializing the theme config that is provided to the context so that what is made available to components at runtime contains all standard fields. The split between the theme config and the actual theme object provided at runtime is explicit. Theme config has no required fields, everything is optional and overrides the defaults. Then the theme object at runtime includes all standard fields.

It would also simplify the theme-ui internal code because you would no longer have fall back to any defaults throughout the code (for example here.

Or, at least provide a makeTheme() function that will extend the theme object with defaults, where necessary:

const themeConfig = {
  box: {
    px: ["10px", "20px", "30px"]
  }
}

const theme = makeTheme(themeConfig);

<ThemeProvider theme={theme}>

Describe alternatives you've considered

Alternative 1: define the breakpoints in my theme object

import { defaultBreakpoints } from "@theme-ui/??"

{
  breakpoints: defaultBreakpoints,
  box: {
    px: ["10px", "20px", "30px"]
  }
}

Alternative 2: copy logic from theme-ui

import { defaultBreakpoints } from "@theme-ui/??"

const { theme } = useThemeUI();
console.log((theme.breakpoints || defaultBreakpoints)[2]);

Both require mit to import the defaults from the theme-ui package.

[jxnblk]

Thanks! We're planning on removing these defaults in v1 and providing a mechanism to handle this for the useThemeUI hook -- see #832

[lachlanjc]

As mentioned, these defaults are being removed. @hasparus I’m 👍 to close this