[Color system] add theme provider readme #2756
Conversation
danrosenthal
requested review from
BPScott,
mirualves,
sadiesaurus,
sarahill and
tmlayton
danrosenthal
added
the
🤖Skip Changelog
|
🟢 No significant changes to |
|
|
||
| ### Theme provider rendered by the app provider | ||
|
|
||
| The app provider component renders a theme provider component and a theme. By default, theme falls back to the current design language. The new design language is enabled by passing `{newDesignLanguage: true}` to the `features` prop on the app provider component. |
There was a problem hiding this comment.
Wondering if we might want to move away from using "current" and "new" when talking about design language. Could this be confusing and will it need to be changed in the future?
There was a problem hiding this comment.
This feels like a temporary problem, as this content pretty much goes away when the new design language is the design language. My vote is this stays as-is for now, but I am open to any language that can add some clarity.
There was a problem hiding this comment.
Fair point. What if we keep it but change "current" to "old" to be sure that folks don't mistake "current" for "new"?
|
There was a Github outage earlier and some weird race condition on Github's end happened, that's why there's two splash comments above. I went ahead and deleted the stale one, sorry for the confusion friends |
danrosenthal
force-pushed
the
theme-provider-docs
branch
from
c90a44a to
12d416c
Compare
danrosenthal
changed the title
|
This is ready to ship, but we'll need to make sure that the style guide does not wrap these examples in an app provider, as it will break the examples. |
tmlayton
force-pushed
the
theme-provider-docs
branch
from
7be18f8 to
0bc9871
Compare
| - color scheme | ||
| - light mode | ||
| - dark mode | ||
| omitAppProvider: true |
There was a problem hiding this comment.
This is the secret sauce for turning off the wrapping AppProvider in Storybook and the Style Guide
|
|
||
| ## Consuming theme colors in a component | ||
|
|
||
| The theme provider component uses [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) to share color values with components. For a full list of available CSS custom properties, see the [Polaris tokens docs](link/to/polaris/tokens/docs). |
There was a problem hiding this comment.
Just noticed this link is broken which causes the Style Guide build to fail (link checker)—might require a patch release. For now this can point to https://github.com/Shopify/polaris-react/blob/master/documentation/Color%20system.md.
5 participants
Todo