Merge pull request #2090 from system-ui/printmode-fix

fix(color-modes): properly use print mode even if its name is `initialColorModeName`
system-ui · Mar 21, 2022 · f20e2ba · f20e2ba
2 parents baec10c + 154a971
commit f20e2ba
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 6 deletions.
diff --git a/packages/color-modes/src/custom-properties.ts b/packages/color-modes/src/custom-properties.ts
@@ -88,13 +88,20 @@ export const __createColorStyles = (theme: Theme = {}) => {
   const styles = __createColorProperties(colors, modes)
 
   if (printColorModeName) {
-    const mode =
-      printColorModeName === 'initial' ||
-      printColorModeName === initialColorModeName
-        ? colors
-        : modes[printColorModeName]
-    styles['@media print'] = __objectToVars('colors', mode)
+    let printMode = modes[printColorModeName]
+    if (!printMode && printColorModeName === initialColorModeName)
+      printMode = colors
+
+    if (printMode) {
+      styles['@media print'] = __objectToVars('colors', printMode)
+    } else {
+      console.error(
+        `Theme UI \`printColorModeName\` was not found in colors scale`,
+        { colors, printColorModeName }
+      )
+    }
   }
+
   const colorToVarValue = (color: string) => toVarValue(`colors-${color}`)
 
   return css({

diff --git a/packages/color-modes/test/custom-properties.tsx b/packages/color-modes/test/custom-properties.tsx
@@ -185,6 +185,7 @@ describe('__createColorStyles', () => {
         },
       },
     })
+
     expect(styles).toEqual({
       color: 'var(--theme-ui-colors-text)',
       backgroundColor: 'var(--theme-ui-colors-background)',
@@ -201,6 +202,31 @@ describe('__createColorStyles', () => {
     })
   })
 
+  test('creates styles for print color mode if its name is the same as initialColorModeName', () => {
+    const styles = __createColorStyles({
+      config: {
+        initialColorModeName: 'light',
+        useColorSchemeMediaQuery: true,
+        printColorModeName: 'light',
+      },
+      colors: {
+        text: '#fff',
+        background: '#000',
+        modes: {
+          light: {
+            text: '#000',
+            background: '#fff',
+          },
+        },
+      },
+    })
+
+    expect(styles['@media print']).toEqual({
+      '--theme-ui-colors-text': '#000',
+      '--theme-ui-colors-background': '#fff',
+    })
+  })
+
   test('creates styles for initial print color mode', () => {
     const styles = __createColorStyles({
       config: {