Add multi-theme build artifacts to Polaris tokens #10153
Closed
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
|
/snapit |
|
🫰✨ Thanks @aaronccasanova! Your snapshots have been published to npm. Test the snapshots by updating your yarn add @shopify/polaris-cli@0.0.0-snapshot-release-20230821222927yarn add @shopify/polaris-codemods@0.0.0-snapshot-release-20230821222927yarn add @shopify/polaris-migrator@0.0.0-snapshot-release-20230821222927yarn add @shopify/polaris@0.0.0-snapshot-release-20230821222927yarn add @shopify/polaris-tokens@0.0.0-snapshot-release-20230821222927yarn add @shopify/stylelint-polaris@0.0.0-snapshot-release-20230821222927 |
Co-Authored-By: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com>
|
/snapit |
|
🫰✨ Thanks @lgriffee! Your snapshots have been published to npm. Test the snapshots by updating your yarn add @shopify/polaris-cli@0.0.0-snapshot-release-20230822165554yarn add @shopify/polaris-codemods@0.0.0-snapshot-release-20230822165554yarn add @shopify/polaris-migrator@0.0.0-snapshot-release-20230822165554yarn add @shopify/polaris@0.0.0-snapshot-release-20230822165554yarn add @shopify/polaris-tokens@0.0.0-snapshot-release-20230822165554yarn add @shopify/stylelint-polaris@0.0.0-snapshot-release-20230822165554 |
lgriffee
reviewed
Aug 22, 2023
Comment on lines
+26
to
+32
| "typesVersions": { | ||
| "*": { | ||
| "themes": [ | ||
| "./dist/types/build/themes.d.ts" | ||
| ] | ||
| } | ||
| }, |
There was a problem hiding this comment.
Added typesVersions to resolve themes types.
Before
After
|
Closed in favor of #10250 |
aaronccasanova
added a commit
that referenced
this pull request
Aug 31, 2023
Rework of PR #10153: - The dedicated `@shopify/polaris-tokens/themes` entry point has been removed in favor of accessing the `themes` directly from `@shopify/polaris-tokens`, avoiding `package.json` `exports` and `typesVersions` changes. - Instead of using arguments for each asset builder function, the dependent modules are now accessed directly, reducing unnecessary TypeScript boilerplate. - References to `themes.light` have been replaced with a `themeDefault` alias throughout the library and build scripts. This change should improve clarity and consistency in communicating the behavior. - The build function `toTokenValues` has been renamed to `toValues` as it now operates on `themes` rather than `tokens`. - The root entry point has been updated to expose both `themes` and `themePartials`. The `themes` object contains complete theme objects for each theme, serving as a replacement for the previously proposed `/themes` entry point. Currently, it is designed for building low-level integrations, such as React Native themes. On the other hand, the `themePartials` object contains partial override objects for each theme. Originally used in the `toStyleSheet` build script to generate the smallest possible CSS rule of themed custom properties, it is now being exposed to enable the creation of client-side integrations with minimal impact on bundle size. Note that a separate PR will introduce a `createThemeVariant` hook that accepts partials and dynamically constructs the complete theme object at runtime. **Before:** ```ts import {metadata} from '@shopify/polaris-tokens'; metadata.color['color-bg'].valueExperimental ``` ```ts import * as themes from '@shopify/polaris-tokens/themes'; themes.polarisSummerEditions2023.color['color-bg'] ``` **After:** ```ts import {themes} from '@shopify/polaris-tokens'; themes['Polaris-Summer-Editions-2023'].color['color-bg'] ``` --------- Co-authored-by: Laura Griffee <laura@mailzone.com>
aaronccasanova
added a commit
that referenced
this pull request
Sep 7, 2023
This PR consolidates the integration of three feature branches that collectively introduce a new base/variant theme architecture to Shopify Polaris. The merged PRs introduce multi-theme support, updated build artifacts, and a new `useTheme` hook for runtime Polaris tokens access. Below, you will find a brief overview of each PR, with links to the original PRs for a more detailed review. ## [Add multi-theme support to Polaris tokens](#10103) This PR introduces multi-theme support to `@shopify/polaris-tokens` by implementing a base/variant architecture. The base theme serves as the foundation for multiple variant themes, which extend the base theme and are the only themes exposed to consumers. Simplifying system changes by flattening the relationship between themes is the primary advantage of this pattern. The PR also includes implementation details like directory structure, stylesheet generation, and variant theme functionality. **Example `styles.scss` updates** ```scss :root { /* Default variant theme custom properties (light) */ } html.Polaris-Summer-Editions-2023 { /* Variant theme custom properties */ /* Note: The above selector is special cased for backward compatibility. See below for updated theme selector structure. */ } html.p-theme-light-high-contrast { /* Variant theme custom properties */ /* Note: Variant theme selectors contain a subset of custom properties overriding the base theme */ } html.p-theme-dark {/* ... */} html.p-theme-dark-high-contrast {/* ... */} html.p-theme-dim {/* ... */} ``` ## [Add multi-theme build artifacts to Polaris tokens](#10250) This PR is a rework of #10153, redefining how the `themes` are accessed from `@shopify/polaris-tokens`. It introduces changes on how asset builder functions are written and replaces reference to `themes.light` with a `themeDefault` alias. ```ts import {themes} from '@shopify/polaris-tokens'; themes['Polaris-Summer-Editions-2023'].color['color-bg'] ``` > Note: Future releases can reduce the bundle size impact of including all themes on one object and enable more flexibility (for example with a `createTheme` util that deep merges variant theme partials). However, that is not needed at this time and can be introduced in a minor release. ## [Add `useTheme` hook for runtime Polaris tokens access](#10252) This PR is a rework of #10229, brings updates to the `AppProvider` by incorporating a new `ThemeContext.Provider` and an associated `useTheme` hook. ```tsx import {useTheme} from '@shopify/polaris'; function App() { const theme = useTheme() theme.color['color-bg'] // '#123' } ``` --------- Co-authored-by: Laura Griffee <laura@mailzone.com>
AnnaCheba
pushed a commit
to AnnaCheba/polaris
that referenced
this pull request
Apr 22, 2024
This PR consolidates the integration of three feature branches that collectively introduce a new base/variant theme architecture to Shopify Polaris. The merged PRs introduce multi-theme support, updated build artifacts, and a new `useTheme` hook for runtime Polaris tokens access. Below, you will find a brief overview of each PR, with links to the original PRs for a more detailed review. ## [Add multi-theme support to Polaris tokens](Shopify#10103) This PR introduces multi-theme support to `@shopify/polaris-tokens` by implementing a base/variant architecture. The base theme serves as the foundation for multiple variant themes, which extend the base theme and are the only themes exposed to consumers. Simplifying system changes by flattening the relationship between themes is the primary advantage of this pattern. The PR also includes implementation details like directory structure, stylesheet generation, and variant theme functionality. **Example `styles.scss` updates** ```scss :root { /* Default variant theme custom properties (light) */ } html.Polaris-Summer-Editions-2023 { /* Variant theme custom properties */ /* Note: The above selector is special cased for backward compatibility. See below for updated theme selector structure. */ } html.p-theme-light-high-contrast { /* Variant theme custom properties */ /* Note: Variant theme selectors contain a subset of custom properties overriding the base theme */ } html.p-theme-dark {/* ... */} html.p-theme-dark-high-contrast {/* ... */} html.p-theme-dim {/* ... */} ``` ## [Add multi-theme build artifacts to Polaris tokens](Shopify#10250) This PR is a rework of Shopify#10153, redefining how the `themes` are accessed from `@shopify/polaris-tokens`. It introduces changes on how asset builder functions are written and replaces reference to `themes.light` with a `themeDefault` alias. ```ts import {themes} from '@shopify/polaris-tokens'; themes['Polaris-Summer-Editions-2023'].color['color-bg'] ``` > Note: Future releases can reduce the bundle size impact of including all themes on one object and enable more flexibility (for example with a `createTheme` util that deep merges variant theme partials). However, that is not needed at this time and can be introduced in a minor release. ## [Add `useTheme` hook for runtime Polaris tokens access](Shopify#10252) This PR is a rework of Shopify#10229, brings updates to the `AppProvider` by incorporating a new `ThemeContext.Provider` and an associated `useTheme` hook. ```tsx import {useTheme} from '@shopify/polaris'; function App() { const theme = useTheme() theme.color['color-bg'] // 'Shopify#123' } ``` --------- Co-authored-by: Laura Griffee <laura@mailzone.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.
Closes #10043
ESMandCJSbuild targets to support theming@shopify/polaris-tokens/themesentry point (configured in the package.json)JSONbuild targets as there are no usages of the existing exports (@samrose3 and I propose deprecating the entire build target in the next major release)valueExperimentaltype and tokens as the overrides are now accessible from thePolaris-Summer-Editions-2023theme (see below)Migrating from
metadata.<token-group>.<token-name>.valueExperimentalBefore:
After:
Example ESM artifact