fix: Don't use dark mode for print media (#1204)

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 => {

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;
+    }
   }
 }

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' },
   },
 });