Merge branch 'main' into dark-theme-buttons

Shopify · Mar 25, 2024 · b6fe014 · b6fe014
2 parents 3cd4754 + 13c8ee7
commit b6fe014
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 15 deletions.
diff --git a/polaris-react/src/components/ThemeProvider/ThemeProvider.stories.tsx b/polaris-react/src/components/ThemeProvider/ThemeProvider.stories.tsx
@@ -8,17 +8,17 @@ import {
   ThemeProvider,
   InlineStack,
 } from '@shopify/polaris';
-import {SidekickIcon, NotificationIcon} from '@shopify/polaris-icons';
+import {HeartIcon, NotificationIcon} from '@shopify/polaris-icons';
 
 export default {
   component: ThemeProvider,
 } as ComponentMeta<typeof ThemeProvider>;
 
 export function Default() {
-  const [isSidekickMenuOpen, setIsSidekickMenuOpen] = useState(true);
+  const [isHeartMenuOpen, setIsHeartMenuOpen] = useState(true);
 
-  const toggleIsSidekickMenuOpen = useCallback(
-    () => setIsSidekickMenuOpen((isSidekickMenuOpen) => !isSidekickMenuOpen),
+  const toggleIsHeartMenuOpen = useCallback(
+    () => setIsHeartMenuOpen((isHeartMenuOpen) => !isHeartMenuOpen),
     [],
   );
 
@@ -32,22 +32,22 @@ export function Default() {
     [],
   );
 
-  const sidekickMenu = (
+  const heartMenu = (
     <ThemeProvider theme="light">
       <TopBar.Menu
         activatorContent={
           <ThemeProvider theme="dark-experimental">
             <span>
-              <Icon source={SidekickIcon} />
+              <Icon source={HeartIcon} />
               <Text as="span" visuallyHidden>
                 Light theme popover button
               </Text>
             </span>
           </ThemeProvider>
         }
-        open={isSidekickMenuOpen}
-        onOpen={toggleIsSidekickMenuOpen}
-        onClose={toggleIsSidekickMenuOpen}
+        open={isHeartMenuOpen}
+        onOpen={toggleIsHeartMenuOpen}
+        onClose={toggleIsHeartMenuOpen}
         actions={[
           {
             items: [{content: 'Light theme popover'}],
@@ -86,7 +86,7 @@ export function Default() {
         <TopBar
           secondaryMenu={
             <InlineStack>
-              {sidekickMenu}
+              {heartMenu}
               {notificationsMenu}
             </InlineStack>
           }

diff --git a/polaris-tokens/scripts/toStyleSheet.ts b/polaris-tokens/scripts/toStyleSheet.ts
@@ -33,9 +33,15 @@ export function getMetaTokenGroupDecls(metaTokenGroup: MetaTokenGroupShape) {
         MetaTokenGroupShape[string],
       ];
 
-      return tokenName.startsWith('motion-keyframes')
-        ? `${createVarName(tokenName)}:p-${tokenName};`
-        : `${createVarName(tokenName)}:${value};`;
+      if (tokenName.startsWith('color-scheme')) {
+        return `color-scheme:${value};`;
+      }
+
+      if (tokenName.startsWith('motion-keyframes')) {
+        return `${createVarName(tokenName)}:p-${tokenName};`;
+      }
+
+      return `${createVarName(tokenName)}:${value};`;
     })
     .join('');
 }
@@ -68,7 +74,7 @@ export async function toStyleSheet() {
   const styles = [
     [
       `:root,${createThemeSelector(themeNameDefault)}`,
-      `{color-scheme:light;${getMetaThemeDecls(metaThemeDefault)}}`,
+      `{${getMetaThemeDecls(metaThemeDefault)}}`,
     ].join(''),
     metaThemePartialsEntries.map(
       ([themeName, metaThemePartial]) =>

diff --git a/polaris-tokens/src/themes/base/color.ts b/polaris-tokens/src/themes/base/color.ts
@@ -241,6 +241,7 @@ export type ColorTextAlias =
   | 'video-thumbnail-play-button-text-on-bg-fill';
 
 export type ColorTokenName =
+  | 'color-scheme'
   | `color-${ColorBackgroundAlias}`
   | `color-${ColorBorderAlias}`
   | `color-${ColorIconAlias}`
@@ -253,6 +254,9 @@ export type ColorTokenGroup = {
 export const color: {
   [TokenName in ColorTokenName]: MetaTokenProperties;
 } = {
+  'color-scheme': {
+    value: 'light',
+  },
   'color-bg': {
     value: colors.gray[6],
     description: 'The default background color of the admin.',

diff --git a/polaris-tokens/src/themes/dark.ts b/polaris-tokens/src/themes/dark.ts
@@ -4,6 +4,7 @@ import {createMetaTheme, createMetaThemePartial} from './utils';
 
 export const metaThemeDarkPartial = createMetaThemePartial({
   color: {
+    'color-scheme': {value: 'dark'},
     'color-bg': {value: colors.gray[16]},
     'color-bg-surface': {value: colors.gray[15]},
     'color-bg-fill': {value: colors.gray[15]},

diff --git a/polaris-tokens/tests/toStyleSheet.test.js b/polaris-tokens/tests/toStyleSheet.test.js
@@ -27,8 +27,22 @@ const mockMotionTokenGroup = {
     value: 'valueD',
   },
 };
+
+const mockColorTokenGroup = {
+  'color-scheme': {
+    value: 'light',
+  },
+  'color-token-1': {
+    value: 'valueA',
+  },
+  'color-token-2': {
+    value: 'valueB',
+  },
+};
+
 const mockTheme = {
   tokenGroupName: mockTokenGroup,
+  color: mockColorTokenGroup,
   motion: mockMotionTokenGroup,
 };
 
@@ -38,7 +52,10 @@ const expectedTokenGroupDecls =
 const expectedMotionTokenGroupDecls =
   '--p-motion-token-1:valueA;--p-motion-token-2:valueB;--p-motion-keyframes-token-1:p-motion-keyframes-token-1;--p-motion-keyframes-token-2:p-motion-keyframes-token-2;';
 
-const expectedThemeDecls = `${expectedTokenGroupDecls}${expectedMotionTokenGroupDecls}`;
+const expectedColorTokenGroupDecls =
+  'color-scheme:light;--p-color-token-1:valueA;--p-color-token-2:valueB;';
+
+const expectedThemeDecls = `${expectedTokenGroupDecls}${expectedColorTokenGroupDecls}${expectedMotionTokenGroupDecls}`;
 
 const expectedMotionKeyframes =
   '@keyframes p-motion-keyframes-token-1valueC@keyframes p-motion-keyframes-token-2valueD';
@@ -55,6 +72,12 @@ describe('getMetaTokenGroupDecls', () => {
 
     expect(tokenGroupDecls).toBe(expectedMotionTokenGroupDecls);
   });
+
+  it('creates a string of CSS declarations from color tokens', () => {
+    const tokenGroupDecls = getMetaTokenGroupDecls(mockColorTokenGroup);
+
+    expect(tokenGroupDecls).toBe(expectedColorTokenGroupDecls);
+  });
 });
 
 describe('getKeyframes', () => {