Add component level theming #11691

aaronccasanova · 2024-03-05T20:03:12Z

Removed html from theme classes to remove global theme constraint
Added ThemeProvider component
Updated useTheme to be context aware of parent themes
Updated Portal component to be context aware of parent themes
Initialized a dark-experimental theme

Example

function App() {
  return (
    /** Sets the default theme globally on the root HTML element (optional) */
    <AppProvider theme="light">
        {/* Sets the dark theme on an internal container element */}
        <ThemeProvider theme="dark-experimental">
          {/* ... */}
        </ThemeProvider>
    </AppProvider>
  )
}

Tophat

Note: In web we will be restricting imports of the ThemeProvider to only areas that Polaris approves

Make sure everything looks the same on spin. The p-theme-light class should be added to the top html element

https://admin.web.web-xubz.sophie-schneider.us.spin.dev/store/shop1

aaronccasanova · 2024-03-05T20:03:32Z

/snapit

github-actions · 2024-03-05T20:06:28Z

🫰✨ Thanks @aaronccasanova! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]

aaronccasanova · 2024-03-05T20:42:01Z

/snapit

github-actions · 2024-03-05T20:45:04Z

🫰✨ Thanks @aaronccasanova! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]

aaronccasanova · 2024-03-06T17:09:51Z

/snapit

github-actions · 2024-03-06T17:13:05Z

🫰✨ Thanks @aaronccasanova! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]

aaronccasanova · 2024-03-08T19:11:47Z

/snapit

github-actions · 2024-03-08T19:14:49Z

🫰✨ Thanks @aaronccasanova! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]

sophschneider · 2024-03-21T17:40:20Z

/snapit

github-actions · 2024-03-21T17:43:37Z

🫰✨ Thanks @sophschneider! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]

sophschneider · 2024-03-22T20:29:53Z

/snapit

github-actions · 2024-03-22T20:33:04Z

🫰✨ Thanks @sophschneider! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]

sophschneider · 2024-03-25T13:17:58Z

/snapit

github-actions · 2024-03-25T13:21:11Z

🫰✨ Thanks @sophschneider! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]

sam-b-rose

Awesome work! This looks great 👍

kyledurand

Looks good! Welcome back, ThemeProvider

kyledurand · 2024-03-25T15:35:02Z

polaris-react/src/components/ThemeProvider/ThemeProvider.tsx

+type ThemeNameLocal = typeof themeNamesLocal[number];
+
+export const isThemeNameLocal = (name: string): name is ThemeNameLocal =>
+  themeNamesLocal.includes(name as any);


Weird typing going on here. Is this temporary until we can use satisfies?

This will get lightly cleaned up with the addition of satisfies but the underlying type guard setup would remain the same. This util allows us to narrow any string before passing it to the ThemeProvider (i.e. in Portal) and used to apply runtime adherence of this design decision

Co-authored-by: aaronccasanova <[email protected]>

@heyjoethomas

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @shopify/[email protected] ### Minor Changes - [#11778](#11778) [`d689bd8f4`](d689bd8) Thanks [@heyjoethomas](https://github.com/heyjoethomas)! - Added `PersonSegment` icon ## @shopify/[email protected] ### Minor Changes - [#11764](#11764) [`880f31b44`](880f31b) Thanks [@itwasmattgregg](https://github.com/itwasmattgregg)! - Added align property for FooterHelp - [#11691](#11691) [`1e613de8b`](1e613de) Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - - Added `ThemeProvider` component - Removed `html` from theme classes to remove global theme constraint - Updated `useTheme` to be context aware of parent themes - Updated `Portal` component to be context aware of parent themes - Initialized a `dark-experimental` theme - [#11787](#11787) [`c3aefafe2`](c3aefaf) Thanks [@chloerice](https://github.com/chloerice)! - Added support for destructive `promotodBulkActions` to `BulkActions` ### Patch Changes - Updated dependencies \[[`1e613de8b`](1e613de), [`d689bd8f4`](d689bd8)]: - @shopify/[email protected] - @shopify/[email protected] ## @shopify/[email protected] ### Minor Changes - [#11691](#11691) [`1e613de8b`](1e613de) Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - - Added `ThemeProvider` component - Removed `html` from theme classes to remove global theme constraint - Updated `useTheme` to be context aware of parent themes - Updated `Portal` component to be context aware of parent themes - Initialized a `dark-experimental` theme ## @shopify/[email protected] ### Patch Changes - Updated dependencies \[[`1e613de8b`](1e613de)]: - @shopify/[email protected] - @shopify/[email protected] ## @shopify/[email protected] ### Patch Changes - Updated dependencies \[[`1e613de8b`](1e613de)]: - @shopify/[email protected] ## [email protected] ### Patch Changes - Updated dependencies \[[`1e613de8b`](1e613de)]: - @shopify/[email protected] ## [email protected] ### Patch Changes - [#11776](#11776) [`ca8eb99ea`](ca8eb99) Thanks [@sarahill](https://github.com/sarahill)! - Updated common action patterns example - Updated dependencies \[[`880f31b44`](880f31b), [`1e613de8b`](1e613de), [`d689bd8f4`](d689bd8), [`c3aefafe2`](c3aefaf)]: - @shopify/[email protected] - @shopify/[email protected] - @shopify/[email protected] Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Part of [this issue](Shopify/polaris-internal#1513) - Removed `html` from theme classes to remove global theme constraint - Added `ThemeProvider` component - Updated `useTheme` to be context aware of parent themes - Updated `Portal` component to be context aware of parent themes - Initialized a `dark-experimental` theme Example ```tsx function App() { return ( /** Sets the default theme globally on the root HTML element (optional) */ <AppProvider theme="light"> {/* Sets the dark theme on an internal container element */} <ThemeProvider theme="dark-experimental"> {/* ... */} </ThemeProvider> </AppProvider> ) } ``` ## Tophat Note: In web we will be restricting imports of the `ThemeProvider` to only areas that Polaris approves Make sure everything looks the same on spin. The `p-theme-light` class should be added to the top html element https://admin.web.web-xubz.sophie-schneider.us.spin.dev/store/shop1 --------- Co-authored-by: Sophie Schneider <[email protected]>

sophschneider added the #gsd:38420 Top bar and global reframe project label Mar 8, 2024

sophschneider force-pushed the component-level-theming branch from 2fb8dcc to 9b4d070 Compare March 21, 2024 17:39

sophschneider force-pushed the component-level-theming branch 2 times, most recently from c80a43b to d727992 Compare March 22, 2024 20:27

sophschneider changed the title ~~Explore component level theming~~ Add component level theming Mar 22, 2024

aaronccasanova added 11 commits March 25, 2024 13:48

Update selector to remove global theme constraint

42a7cb8

Init dark theme

968e84d

Refine dark theme

c56e03b

Add default ThemeProvider storybook

56bf821

Init ThemeProvider component

0d73c03

Add ThemeProvider support to Portal

7846080

Override all dark theme values

a0e5f6c

Constrain global and local themes

cde3c80

Add constants to separate global and local themes

ae12d08

Refine constants to use themeNameDefault

203760f

Revert constants and scope local themes to the ThemeProvider

375e4c2

aaronccasanova and others added 9 commits March 25, 2024 13:48

Add a11y labels

98b35cf

Migrate scss theme provider to css

a37100c

Update theme name to dark-experimental

22dc5a2

Update dark experimental theme tokens to basic subset

62cc4d2

Change ThemeProvider story to TopBar component

8af0cbe

Update changelog

b08923e

Add ThemeProvider tests

634a6f3

Fix accessibility tests

e6a9d12

Add bg surface secondary active and hover tokens

5430450

sophschneider force-pushed the component-level-theming branch from 2d4c209 to 5430450 Compare March 25, 2024 13:48

sophschneider marked this pull request as ready for review March 25, 2024 14:03

sophschneider approved these changes Mar 25, 2024

View reviewed changes

sophschneider requested review from dominikwilkowski, yurm04, kyledurand, sam-b-rose, chloerice, alex-page and laurkim March 25, 2024 14:04

sam-b-rose approved these changes Mar 25, 2024

View reviewed changes

kyledurand approved these changes Mar 25, 2024

View reviewed changes

Update ThemeProvider story icon

f07e31e

sophschneider force-pushed the component-level-theming branch from 4065232 to f07e31e Compare March 25, 2024 18:18

laurkim approved these changes Mar 25, 2024

View reviewed changes

Update toStyleSheet to set theme color-scheme

60a3b08

Co-authored-by: aaronccasanova <[email protected]>

sophschneider merged commit 1e613de into main Mar 25, 2024
14 checks passed

sophschneider deleted the component-level-theming branch March 25, 2024 21:20

shopify-github-actions-access bot mentioned this pull request Mar 25, 2024

Version Packages #11777

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add component level theming #11691

Add component level theming #11691

aaronccasanova commented Mar 5, 2024 •

edited by sophschneider

Loading

aaronccasanova commented Mar 5, 2024

github-actions bot commented Mar 5, 2024

aaronccasanova commented Mar 5, 2024

github-actions bot commented Mar 5, 2024

aaronccasanova commented Mar 6, 2024

github-actions bot commented Mar 6, 2024

aaronccasanova commented Mar 8, 2024

github-actions bot commented Mar 8, 2024

sophschneider commented Mar 21, 2024

github-actions bot commented Mar 21, 2024

sophschneider commented Mar 22, 2024

github-actions bot commented Mar 22, 2024

sophschneider commented Mar 25, 2024

github-actions bot commented Mar 25, 2024

sam-b-rose left a comment

kyledurand left a comment

kyledurand Mar 25, 2024

aaronccasanova Mar 25, 2024

Add component level theming #11691

Add component level theming #11691

Conversation

aaronccasanova commented Mar 5, 2024 • edited by sophschneider Loading

Tophat

aaronccasanova commented Mar 5, 2024

github-actions bot commented Mar 5, 2024

aaronccasanova commented Mar 5, 2024

github-actions bot commented Mar 5, 2024

aaronccasanova commented Mar 6, 2024

github-actions bot commented Mar 6, 2024

aaronccasanova commented Mar 8, 2024

github-actions bot commented Mar 8, 2024

sophschneider commented Mar 21, 2024

github-actions bot commented Mar 21, 2024

sophschneider commented Mar 22, 2024

github-actions bot commented Mar 22, 2024

sophschneider commented Mar 25, 2024

github-actions bot commented Mar 25, 2024

sam-b-rose left a comment

Choose a reason for hiding this comment

kyledurand left a comment

Choose a reason for hiding this comment

kyledurand Mar 25, 2024

Choose a reason for hiding this comment

aaronccasanova Mar 25, 2024

Choose a reason for hiding this comment

aaronccasanova commented Mar 5, 2024 •

edited by sophschneider

Loading