Theme-ui: Theme Nesting?

[mrlubos]

Is your feature request related to a problem? Please describe.
I want to be able to reference other theme values from the theme itself. Sorry if this is already a feature!

Describe the solution you'd like
Ideally, the same way react-i18next works. You can reference strings from the same file with the nesting feature.

Describe alternatives you've considered
Hard-coding values or not putting nested styles inside, neither of which are ideal.

Additional context
I want to be able to set primary colour like this.

colors: {
  gray-500: '#ccc',
  primary: 'gray-500',
}

This currently does not work, I have to hard-code primary value and leave a comment explaining what it is. The same applies for other keys in the theme object I believe.

[lachlanjc]

Yup, this would be awesome. #961 covers it as well

[atanasster]

@mrlubos , I just added the following to #961 (I believe its the main thread for covering this request, but just in case here as well to continue the conversation)

Hi guys,

Great conversation, just came across and put together a babel plugin, where we can enforce theme files to be called ie purple.theme.js to use it. https://github.com/atanasster/babel-plugin-theme-ui

Can you please check if it would be an ok direction for string-based paths (the existing function shortcuts to access theme props already exist).

The project is a very simple conversation starter, just to check the overall expectations. Please also add more test cases for required transformations. The examples are only for colors but it should work for any keys inside the theme.

From this theme definition:
https://github.com/atanasster/babel-plugin-theme-ui/blob/master/tests/fixtures/theme-ui%20parser/code.js

It would transform to the following output:
https://github.com/atanasster/babel-plugin-theme-ui/blob/master/tests/fixtures/theme-ui%20parser/output.js

Of note:

in the following example the lookup will in the current section of the theme (green.30 is inside colors)
colors: {
green:{
30: '#00aa00',
},
secondary: 'green.30'
},
in the following example the lookup is in a global scope of the theme colors.primary
colors: {
primary: '#ffffff',
},
input: {
bg: 'colors.primary'
}

[atanasster]

@hasparus I think we can close this in favor of #1234

[mrlubos]

Like it!

[hasparus]

Closing in favor of #1234

This currently does not work, I have to hard-code primary value and leave a comment explaining what it is. The same applies for other keys in the theme object I believe.

There is a workaround btw.

const baseColors = {
  blue: {
    '500': '#00f'
  }
}
const moreColors = {
  primary: baseColors.blue['500']
}
const colors = {
  ...baseColors, ...moreColors
}