From 154a9711ba68bb552196288dff903bd30f57428e Mon Sep 17 00:00:00 2001
From: hasparus <hasparus@gmail.com>
Date: Fri, 21 Jan 2022 19:23:54 +0100
Subject: [PATCH] fix(color-modes): properly use print mode even if its name is
 the same as initialColorModeName

---
 packages/color-modes/src/custom-properties.ts | 19 +++++++++-----
 .../color-modes/test/custom-properties.tsx    | 26 +++++++++++++++++++
 2 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/packages/color-modes/src/custom-properties.ts b/packages/color-modes/src/custom-properties.ts
index 574aed316..0692e0bdf 100644
--- 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
index e52eea7e4..9341b6dfc 100644
--- 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: {