[next] Add multi-theme support to Polaris #10423
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
aaronccasanova
requested review from
laurkim,
lgriffee,
kyledurand and
sophschneider
and removed request for
laurkim
|
Looking at the 300+ pending baselines that need to be accepted, I think a majority of them are coming from the fact that the font size is using the Edit— |
sam-b-rose
approved these changes
Sep 13, 2023
AnnaCheba
pushed a commit
to AnnaCheba/polaris
that referenced
this pull request
Apr 22, 2024
Continuation of Shopify#10290 This PR contains breaking changes in both Polaris and Polaris tokens to enable global multi-theme support. ### Polaris changes: - Updated the `AppProvider` component - **Breaking:** Removed `features` class name toggle from `setRootAttributes` - Added a new `theme` prop which accepts a Polaris tokens `ThemeName`. This prop is used for: - Toggling the theme class names on the root element, and - Setting the theme object on the root `ThemeContext.Provider` - Added global theme toggle to Storybook ### Polaris tokens changes: - **Breaking:** Moved the `light-uplift` overrides to base token groups (e.g. `light-uplift` is now the default theme) - Normalized specificity of the default theme > [!NOTE] > Currently, our browser support requirements don't allow us to use the `:where()` selector to flatten our theme class name specificity to `0`. Therefore, I'm proposing a solution that normalizes the specificity to `11`. **Theme selector breakdown:** - `:root, html.p-<default-variant-theme>{...}` - The generated stylesheet outputs the default theme custom properties to both the `:root` selector and a dedicated `html.p-*` selector. This allows the page to apply the default theme via `:root` initially (specificity `10`) and then `html.p-*` when the `AppProvider` initializes (specificity `11`) - `html.p-<variant-theme-1>{...}html.p-<variant-theme-2> {...}html.p-...` - All other variant themes have specificity `11` - Thus, theme classes in the Admin should always have specificity `11` after rendering the `AppProvider` **Example** theme selector output:  - Initialized a new `light-high-contrast-experimental` theme https://github.com/Shopify/polaris/assets/32409546/ad228532-e277-4107-af5c-95511f3e3297 --------- Co-authored-by: Lo Kim <lo.kim@shopify.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Continuation of #10290
This PR contains breaking changes in both Polaris and Polaris tokens to enable global multi-theme support.
Polaris changes:
AppProvidercomponentfeaturesclass name toggle fromsetRootAttributesthemeprop which accepts a Polaris tokensThemeName. This prop is used for:ThemeContext.ProviderPolaris tokens changes:
light-upliftoverrides to base token groups (e.g.light-upliftis now the default theme)Note
Currently, our browser support requirements don't allow us to use the
:where()selector to flatten our theme class name specificity to0. Therefore, I'm proposing a solution that normalizes the specificity to11.Theme selector breakdown:
:root, html.p-<default-variant-theme>{...}- The generated stylesheet outputs the default theme custom properties to both the:rootselector and a dedicatedhtml.p-*selector. This allows the page to apply the default theme via:rootinitially (specificity10) and thenhtml.p-*when theAppProviderinitializes (specificity11)html.p-<variant-theme-1>{...}html.p-<variant-theme-2> {...}html.p-...- All other variant themes have specificity1111after rendering theAppProviderExample theme selector output:
light-high-contrast-experimentalthemeScreen.Recording.2023-09-12.at.5.01.17.PM.mov