From ec4471427121febc2de1f66c9263d525a5f5e219 Mon Sep 17 00:00:00 2001
From: Gethin Webster <gethinw@amazon.de>
Date: Thu, 15 Jun 2023 09:59:31 +0200
Subject: [PATCH] fix: Don't use dark mode for print media (#1204)

---
 src/internal/hooks/use-visual-mode/index.ts |  3 +++
 src/internal/styles/utils/theming.scss      | 10 ++++++----
 style-dictionary/utils/modes.ts             |  2 +-
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/internal/hooks/use-visual-mode/index.ts b/src/internal/hooks/use-visual-mode/index.ts
index 4197f20d7d..d3160077e4 100644
--- a/src/internal/hooks/use-visual-mode/index.ts
+++ b/src/internal/hooks/use-visual-mode/index.ts
@@ -8,6 +8,9 @@ import { useMutationObserver } from '../use-mutation-observer';
 import { isDevelopment } from '../../is-development';
 import { warnOnce } from '../../logging';
 
+// Note that this hook doesn't take into consideration @media print (unlike the dark mode CSS),
+// due to challenges with cross-browser implementations of media/print state change listeners.
+// This means that components using this hook will render in dark mode even when printing.
 export function useCurrentMode(elementRef: React.RefObject<HTMLElement>) {
   const [value, setValue] = useState<'light' | 'dark'>('light');
   useMutationObserver(elementRef, node => {
diff --git a/src/internal/styles/utils/theming.scss b/src/internal/styles/utils/theming.scss
index b8bb453001..661b6ed42c 100644
--- a/src/internal/styles/utils/theming.scss
+++ b/src/internal/styles/utils/theming.scss
@@ -3,9 +3,11 @@
  SPDX-License-Identifier: Apache-2.0
 */
 @mixin dark-mode-only($selector: '') {
-  /* stylelint-disable selector-combinator-disallowed-list, selector-class-pattern */
-  :global(#{$selector}.awsui-polaris-dark-mode) &,
-  :global(#{$selector}.awsui-dark-mode) & {
-    @content;
+  @media not print {
+    /* stylelint-disable selector-combinator-disallowed-list, selector-class-pattern */
+    :global(#{$selector}.awsui-polaris-dark-mode) &,
+    :global(#{$selector}.awsui-dark-mode) & {
+      @content;
+    }
   }
 }
diff --git a/style-dictionary/utils/modes.ts b/style-dictionary/utils/modes.ts
index 52a884119f..26c7e385fc 100644
--- a/style-dictionary/utils/modes.ts
+++ b/style-dictionary/utils/modes.ts
@@ -4,7 +4,7 @@ export const createColorMode = (darkSelector: string) => ({
   id: 'color',
   states: {
     light: { default: true },
-    dark: { selector: darkSelector },
+    dark: { selector: darkSelector, media: 'not print' },
   },
 });