smooth-ui icon indicating copy to clipboard operation
smooth-ui copied to clipboard

Unable to retrieve the entire theme object from current ThemeProvider via `th`

Open ividic opened this issue 5 years ago • 0 comments

💥 Regression Report

In v10 I was able to retrieve any current value of the entire theme object from the current ThemeProvider via the th utility, which would get the default value if the one in the current theme is not set.

For example, in v10 I could style a react-select element via:

const StyledSelect = styled(Select)`
  .rs__control {
    background-color: ${th('inputBgColor')};
  }
}

In v11, if I try:

const StyledSelect = styled(Select)`
  .rs__control {
    background-color: ${th.color('formControl.background')};
  }
}

Unless I've specified the formControl.background in my own theme, the rendered css returns an invalid value of background-color: formControl.background;. Background is a trivial example, however the same applies to color, border, etc.

The way around this would be to deep merge the default theme from @smooth-ui/core-sc, into my own theme, however then I still can't retrieve values from the current mode or colors.formControl.

Last working version

Worked up to version: v10

Stopped working in version: v11

To Reproduce

Steps to reproduce the behavior:

See above and CodeSandbox

Expected behavior

While the default Input component from @smooth-ui/core-sc is able to receive the default and mode values, they cannot be used in any custom component without setting the values manually in each theme.

Expect same behaviour from v10 where the entire theme object is available in the th utility, with values from the closest ThemeProvider

Link to repl or repo (highly encouraged)

https://codesandbox.io/s/purple-hill-4wxye - See comments in App.js

Issues without a reproduction link are likely to stall.

Run npx envinfo --system --binaries --npmPackages @smooth-ui/core-sc,@smooth-ui/core-em,styled-components,@emotion/core,@emotion/styled,emotion-theming --markdown --clipboard

Paste the results here:

## System:
 - OS: macOS Mojave 10.14.6
 - CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
 - Memory: 55.46 MB / 16.00 GB
 - Shell: 3.2.57 - /bin/bash
## Binaries:
 - Node: 10.16.0 - ~/.nvm/versions/node/v10.16.0/bin/node
 - Yarn: 1.15.2 - ~/.yarn/bin/yarn
 - npm: 6.9.0 - ~/.nvm/versions/node/v10.16.0/bin/npm
## npmPackages:
 - @smooth-ui/core-sc: ^11.1.5 => 11.1.5 
 - styled-components: ^5.0.1 => 5.0.1 

ividic avatar Feb 19 '20 23:02 ividic