Add useTheme hook for runtime Polaris tokens access

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

@@ -1,10 +1,13 @@
 import React, {Component} from 'react';
+import type {ThemeName} from '@shopify/polaris-tokens';
+import {themeNameDefault} from '@shopify/polaris-tokens';
 
 import {EphemeralPresenceManager} from '../EphemeralPresenceManager';
 import {MediaQueryProvider} from '../MediaQueryProvider';
 import {FocusManager} from '../FocusManager';
 import {PortalsManager} from '../PortalsManager';
 import {I18n, I18nContext} from '../../utilities/i18n';
+import {ThemeContext, getTheme} from '../../utilities/use-theme';
 import {
   ScrollLockManager,
   ScrollLockManagerContext,
@@ -115,32 +118,40 @@ export class AppProvider extends Component<AppProviderProps, State> {
     };
   };
 
+  getThemeName = (): ThemeName =>
+    this.getFeatures().polarisSummerEditions2023
+      ? 'Polaris-Summer-Editions-2023'
+      : themeNameDefault;
+
   render() {
     const {children} = this.props;
     const features = this.getFeatures();
+    const themeName = this.getThemeName();
 
     const {intl, link} = this.state;
 
     return (
-      <FeaturesContext.Provider value={features}>
-        <I18nContext.Provider value={intl}>
-          <ScrollLockManagerContext.Provider value={this.scrollLockManager}>
-            <StickyManagerContext.Provider value={this.stickyManager}>
-              <LinkContext.Provider value={link}>
-                <MediaQueryProvider>
-                  <PortalsManager>
-                    <FocusManager>
-                      <EphemeralPresenceManager>
-                        {children}
-                      </EphemeralPresenceManager>
-                    </FocusManager>
-                  </PortalsManager>
-                </MediaQueryProvider>
-              </LinkContext.Provider>
-            </StickyManagerContext.Provider>
-          </ScrollLockManagerContext.Provider>
-        </I18nContext.Provider>
-      </FeaturesContext.Provider>
+      <ThemeContext.Provider value={getTheme(themeName)}>
+        <FeaturesContext.Provider value={features}>
+          <I18nContext.Provider value={intl}>
+            <ScrollLockManagerContext.Provider value={this.scrollLockManager}>
+              <StickyManagerContext.Provider value={this.stickyManager}>
+                <LinkContext.Provider value={link}>
+                  <MediaQueryProvider>
+                    <PortalsManager>
+                      <FocusManager>
+                        <EphemeralPresenceManager>
+                          {children}
+                        </EphemeralPresenceManager>
+                      </FocusManager>
+                    </PortalsManager>
+                  </MediaQueryProvider>
+                </LinkContext.Provider>
+              </StickyManagerContext.Provider>
+            </ScrollLockManagerContext.Provider>
+          </I18nContext.Provider>
+        </FeaturesContext.Provider>
+      </ThemeContext.Provider>
     );
   }
 }

polaris-react/src/index.ts

@@ -423,6 +423,7 @@ export {
 export {ScrollLockManagerContext as _SECRET_INTERNAL_SCROLL_LOCK_MANAGER_CONTEXT} from './utilities/scroll-lock-manager';
 export {WithinContentContext as _SECRET_INTERNAL_WITHIN_CONTENT_CONTEXT} from './utilities/within-content-context';
 export {useEventListener} from './utilities/use-event-listener';
+export {useTheme} from './utilities/use-theme';
 export {useIndexResourceState} from './utilities/use-index-resource-state';
 export {
   useRowHovered as useIndexTableRowHovered,

polaris-react/src/utilities/use-theme.ts

@@ -0,0 +1,21 @@
+import {createContext, useContext} from 'react';
+import type {ThemeName} from '@shopify/polaris-tokens';
+import {themes, themeNameDefault} from '@shopify/polaris-tokens';
+
+export function getTheme(themeName: ThemeName) {
+  return themes[themeName];
+}
+
+export const ThemeContext = createContext(getTheme(themeNameDefault));
+
+export function useTheme() {
+  const theme = useContext(ThemeContext);
+
+  if (!theme) {
+    throw new Error(
+      'No theme was provided. Your application must be wrapped in an <AppProvider> component. See https://polaris.shopify.com/components/app-provider for implementation instructions.',
+    );
+  }
+
+  return theme;
+}

polaris-tokens/scripts/toJSON.ts

@@ -1,7 +1,7 @@
 import fs from 'fs';
 import path from 'path';
 
-import {themeDefault} from '../src/themes';
+import {metaThemeDefault} from '../src/themes';
 
 const outputDir = path.join(__dirname, '../dist/json');
 
@@ -12,9 +12,11 @@ export async function toJSON() {
     }
   });
 
-  for (const [tokenGroupName, tokenGroup] of Object.entries(themeDefault)) {
+  for (const [tokenGroupName, metaTokenGroup] of Object.entries(
+    metaThemeDefault,
+  )) {
     const filePath = path.join(outputDir, `${tokenGroupName}.json`);
 
-    await fs.promises.writeFile(filePath, JSON.stringify(tokenGroup));
+    await fs.promises.writeFile(filePath, JSON.stringify(metaTokenGroup));
   }
 }

polaris-tokens/scripts/toMediaConditions.ts

@@ -2,9 +2,8 @@ import fs from 'fs';
 import path from 'path';
 
 import {getMediaConditions} from '../src';
-import {themeDefault} from '../src/themes';
-
-import {extractTokenGroupValues} from './utils';
+import {metaThemeDefault} from '../src/themes';
+import {extractMetaTokenGroupValues} from '../src/themes/utils';
 
 const scssOutputDir = path.join(__dirname, '../dist/scss');
 const scssOutputPath = path.join(scssOutputDir, 'media-queries.scss');
@@ -17,7 +16,9 @@ export async function toMediaConditions() {
   });
 
   const mediaConditionEntries = Object.entries(
-    getMediaConditions(extractTokenGroupValues(themeDefault.breakpoints)),
+    getMediaConditions(
+      extractMetaTokenGroupValues(metaThemeDefault.breakpoints),
+    ),
   );
 
   const styles = mediaConditionEntries

polaris-tokens/scripts/toStyleSheet.ts

@@ -1,8 +1,8 @@
 import fs from 'fs';
 import path from 'path';
 
-import type {ThemeShape, TokenGroupShape} from '../src/themes/types';
-import {themePartials, themeDefault} from '../src/themes';
+import type {MetaThemeShape, MetaTokenGroupShape} from '../src/themes/types';
+import {metaThemeVariantPartials, metaThemeDefault} from '../src/themes';
 import {themeNameDefault} from '../src/themes/constants';
 import {createThemeSelector} from '../src/themes/utils';
 import {createVar} from '../src/utilities';
@@ -13,28 +13,28 @@ const cssOutputPath = path.join(cssOutputDir, 'styles.css');
 const scssOutputPath = path.join(scssOutputDir, 'styles.scss');
 
 /** Creates CSS declarations from a base or variant partial theme. */
-export function getThemeDecls(theme: ThemeShape) {
-  return Object.values(theme)
-    .map((tokenGroup) => getTokenGroupDecls(tokenGroup))
+export function getMetaThemeDecls(metaTheme: MetaThemeShape) {
+  return Object.values(metaTheme)
+    .map((metaTokenGroup) => getMetaTokenGroupDecls(metaTokenGroup))
     .join('');
 }
 
 /** Creates CSS declarations from a token group. */
-export function getTokenGroupDecls(tokenGroup: TokenGroupShape) {
-  return Object.entries(tokenGroup)
-    .map(([token, {value}]) =>
-      token.startsWith('motion-keyframes')
-        ? `${createVar(token)}:p-${token};`
-        : `${createVar(token)}:${value};`,
+export function getMetaTokenGroupDecls(metaTokenGroup: MetaTokenGroupShape) {
+  return Object.entries(metaTokenGroup)
+    .map(([tokenName, {value}]) =>
+      tokenName.startsWith('motion-keyframes')
+        ? `${createVar(tokenName)}:p-${tokenName};`
+        : `${createVar(tokenName)}:${value};`,
     )
     .join('');
 }
 
 /** Creates `@keyframes` rules for `motion-keyframes-*` tokens. */
-export function getKeyframes(motion: TokenGroupShape) {
+export function getKeyframes(motion: MetaTokenGroupShape) {
   return Object.entries(motion)
-    .filter(([token]) => token.startsWith('motion-keyframes'))
-    .map(([token, {value}]) => `@keyframes p-${token}${value}`)
+    .filter(([tokenName]) => tokenName.startsWith('motion-keyframes'))
+    .map(([tokenName, {value}]) => `@keyframes p-${tokenName}${value}`)
     .join('');
 }
 
@@ -51,17 +51,19 @@ export async function toStyleSheet() {
     }
   });
 
-  const themePartialsEntries = Object.entries(themePartials).filter(
-    ([themeName]) => themeName !== themeNameDefault,
-  );
+  const metaThemeVariantPartialsEntries = Object.entries(
+    metaThemeVariantPartials,
+  ).filter(([themeName]) => themeName !== themeNameDefault);
 
   const styles = [
-    `:root{color-scheme:light;${getThemeDecls(themeDefault)}}`,
-    themePartialsEntries.map(
-      ([themeName, themePartial]) =>
-        `${createThemeSelector(themeName)}{${getThemeDecls(themePartial)}}`,
+    `:root{color-scheme:light;${getMetaThemeDecls(metaThemeDefault)}}`,
+    metaThemeVariantPartialsEntries.map(
+      ([themeName, metaThemeVariantPartial]) =>
+        `${createThemeSelector(themeName)}{${getMetaThemeDecls(
+          metaThemeVariantPartial,
+        )}}`,
     ),
-    getKeyframes(themeDefault.motion),
+    getKeyframes(metaThemeDefault.motion),
     // Newline terminator
     '',
   ]

polaris-tokens/scripts/toValues.ts

@@ -1,14 +1,8 @@
 import fs from 'fs';
 import path from 'path';
 
-import {camelCase, camelCaseTransformMerge} from 'change-case';
-
-import type {Entry, Entries} from '../src/types';
-import type {ThemeShape} from '../src/themes/types';
-import {createThemeVariant, themePartials, themeDefault} from '../src/themes';
-
-import type {ExtractThemeValues} from './utils';
-import {extractThemeValues, extractTokenGroupValues} from './utils';
+import {metaThemeVariants, metaThemeDefault} from '../src/themes';
+import {extractMetaThemeValues} from '../src/themes/utils';
 
 const outputDir = path.join(__dirname, '../build');
 
@@ -19,37 +13,24 @@ export async function toValues() {
     }
   });
 
-  const themeDefaultEntries: Entries<ExtractThemeValues<ThemeShape>> =
-    Object.entries(themeDefault).map(
-      ([tokenGroupName, tokenGroup]): Entry<ExtractThemeValues<ThemeShape>> => [
-        tokenGroupName,
-        extractTokenGroupValues(tokenGroup),
-      ],
-    );
+  const themeDefault = extractMetaThemeValues(metaThemeDefault);
 
   await fs.promises.writeFile(
     path.join(outputDir, 'index.ts'),
 
     [
       `export * from '../src/index';`,
-      themeDefaultEntries.map(createExport),
-      createExport(['tokens', Object.fromEntries(themeDefaultEntries)]),
-      createExport([
-        'themePartials',
-        Object.fromEntries(
-          Object.entries(themePartials).map(([themeName, themePartial]) => [
-            themeName,
-            extractThemeValues(themePartial),
-          ]),
-        ),
-      ]),
+      Object.entries(themeDefault).map(createExport),
+      createExport(['tokens', themeDefault]),
       createExport([
         'themes',
         Object.fromEntries(
-          Object.entries(themePartials).map(([themeName, themePartial]) => [
-            themeName,
-            extractThemeValues(createThemeVariant(themePartial)),
-          ]),
+          Object.entries(metaThemeVariants).map(
+            ([themeName, metaThemeVariant]) => [
+              themeName,
+              extractMetaThemeValues(metaThemeVariant),
+            ],
+          ),
         ),
       ]),
     ]

polaris-tokens/src/index.ts

@@ -8,6 +8,10 @@ export type {
   MetadataGroup,
 } from './types';
 
+export type {ThemeName} from './themes/types';
+
+export {themeNameDefault} from './themes/constants';
+
 export type {
   BorderTokenGroup,
   BorderTokenName,

polaris-tokens/src/metadata.ts

@@ -1,7 +1,7 @@
-import {themeDefault} from './themes';
+import {metaThemeDefault} from './themes';
 import type {Exact, MetadataBase} from './types';
 
-export const metadata = themeDefault;
+export const metadata = metaThemeDefault;
 
 export type Metadata = typeof metadata;
 

polaris-tokens/src/themes/base.ts

@@ -8,11 +8,11 @@ import {shadow} from '../token-groups/shadow';
 import {space} from '../token-groups/space';
 import {zIndex} from '../token-groups/zIndex';
 
-import type {ThemeShape} from './types';
+import type {MetaThemeShape} from './types';
 
-const createThemeBase = createExact<ThemeShape>();
+const createMetaThemeBase = createExact<MetaThemeShape>();
 
-export const themeBase = createThemeBase({
+export const metaThemeBase = createMetaThemeBase({
   breakpoints: tokensToRems(breakpoints),
   border: tokensToRems(border),
   color,
@@ -22,5 +22,3 @@ export const themeBase = createThemeBase({
   space: tokensToRems(space),
   zIndex,
 });
-
-export type ThemeBase = typeof themeBase;

polaris-tokens/src/themes/index.ts

@@ -1,15 +1,25 @@
-import type {ThemePartials} from './types';
-import {createThemeVariant} from './utils';
+import type {MetaThemeVariantPartials, MetaThemeVariants} from './types';
+import {createMetaThemeVariant} from './utils';
 import {themeNameDefault} from './constants';
-import {themeLightPartial} from './light';
-import {themeLightUpliftPartial} from './light-uplift';
+import {metaThemeLight, metaThemeLightPartial} from './light';
+import {
+  metaThemeLightUplift,
+  metaThemeLightUpliftPartial,
+} from './light-uplift';
 
-export {createThemeVariant} from './utils';
+export {createMetaThemeVariant} from './utils';
 
-export const themePartials: ThemePartials = {
-  light: themeLightPartial,
-  'Polaris-Summer-Editions-2023': themeLightUpliftPartial,
+export const metaThemeVariants: MetaThemeVariants = {
+  light: metaThemeLight,
+  'Polaris-Summer-Editions-2023': metaThemeLightUplift,
 };
 
-export const themeDefaultPartial = themePartials[themeNameDefault];
-export const themeDefault = createThemeVariant(themeDefaultPartial);
+export const metaThemeVariantPartials: MetaThemeVariantPartials = {
+  light: metaThemeLightPartial,
+  'Polaris-Summer-Editions-2023': metaThemeLightUpliftPartial,
+};
+
+export const metaThemeDefaultPartial =
+  metaThemeVariantPartials[themeNameDefault];
+
+export const metaThemeDefault = createMetaThemeVariant(metaThemeDefaultPartial);

polaris-tokens/src/themes/light-uplift.ts

@@ -1,8 +1,8 @@
 import * as colors from '../colors-experimental';
 
-import {createThemeVariantPartial} from './utils';
+import {createMetaThemeVariant, createMetaThemeVariantPartial} from './utils';
 
-export const themeLightUpliftPartial = createThemeVariantPartial({
+export const metaThemeLightUpliftPartial = createMetaThemeVariantPartial({
   motion: {
     'motion-ease-out': {value: 'cubic-bezier(0.19, 0.91, 0.38, 1)'},
   },
@@ -171,3 +171,7 @@ export const themeLightUpliftPartial = createThemeVariantPartial({
     'color-text-magic': {value: colors.purple[14]},
   },
 });
+
+export const metaThemeLightUplift = createMetaThemeVariant(
+  metaThemeLightUpliftPartial,
+);

polaris-tokens/src/themes/light.ts

@@ -1,3 +1,5 @@
-import {createThemeVariantPartial} from './utils';
+import {createMetaThemeVariant, createMetaThemeVariantPartial} from './utils';
 
-export const themeLightPartial = createThemeVariantPartial({});
+export const metaThemeLightPartial = createMetaThemeVariantPartial({});
+
+export const metaThemeLight = createMetaThemeVariant(metaThemeLightPartial);