Scope html styles and CSS custom properties (#41527)

enterprise/frontend/src/embedding-sdk/components/private/SdkContentWrapper.tsx

 import styled from "@emotion/styled";
 
+import { baseStyle, getRootStyle } from "metabase/css/core/base.styled";
 import { alpha, color } from "metabase/lib/colors";
 import { aceEditorStyles } from "metabase/query_builder/components/NativeQueryEditor/NativeQueryEditor.styled";
 import { saveDomImageStyles } from "metabase/visualizations/lib/save-chart-image";
@@ -13,24 +14,9 @@ export const SdkContentWrapper = styled.div<{ font: string }>`
 
   ${aceEditorStyles}
   ${saveDomImageStyles}
+  ${({ theme }) => getRootStyle(theme)}
+  ${baseStyle}
 
-  --default-font-size: 0.875em;
-  --default-font-color: var(--color-text-dark);
-  --default-bg-color: var(--color-bg-light);
-
-  font-family: var(--default-font-family), sans-serif;
-  font-size: var(--default-font-size);
-  font-weight: 400;
-  font-style: normal;
-  color: var(--color-text-dark);
-  margin: 0;
-  height: 100%; /* ensure the entire page will fill the window */
-  display: flex;
-  flex-direction: column;
-  background-color: var(--color-bg-light);
-
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
 
   svg {
     display: inline;

frontend/src/metabase/css/core/base.module.css

-:root {
-  --default-font-size: 0.875em;
-  --default-font-color: var(--color-text-dark);
-  --default-bg-color: var(--color-bg-light);
-}
-
-html {
-  height: 100%; /* ensure the entire page will fill the window */
-  width: 100%;
-}
-
-@media print and (orientation: portrait) {
-  html {
-    width: 8.5in;
-  }
-}
-
-@media print and (orientation: landscape) {
-  html {
-    width: 11in;
-  }
-}
-
-body {
-  font-family: var(--default-font-family), sans-serif;
-  font-size: var(--default-font-size);
-  font-weight: 400;
-  font-style: normal;
-  color: var(--color-text-dark);
-  margin: 0;
-  height: 100%; /* ensure the entire page will fill the window */
-  display: flex;
-  flex-direction: column;
-  background-color: var(--color-bg-light);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-/*
-  override default padding and margin on lists
-  in most cases we won't be using list-style so
-  the padding isn't necessary
-*/
-ul,
-ol {
-  padding: 0;
-  margin: 0;
-  list-style-type: none;
-}
-
-/*
-  explicitly set the th text alignment to left. this is required for IE
-  which follows the suggested rendering and defaults to center, whereas
-  chrome and others do not
-*/
-th {
-  text-align: left;
-}
-
-/* reset button element */
-button {
-  font-size: 100%;
-  -webkit-appearance: none;
-  border: 0;
-  padding: 0;
-  margin: 0;
-  outline: none;
-  background-color: transparent;
-}
-
-a {
-  color: inherit;
-  cursor: pointer;
-  text-decoration: none;
-}
-
-button,
-input,
-textarea {
-  font-family: var(--default-font-family), "Helvetica Neue", Helvetica,
-    sans-serif;
-}
-
-textarea {
-  min-height: 110px;
-}
-
 .pointerEventsNone,
 .pointerEventsNone * {
   pointer-events: none;

frontend/src/metabase/css/core/base.styled.ts

+import type { Theme } from "@emotion/react";
+import { css } from "@emotion/react";
+
+export const getRootStyle = (theme: Theme) => css`
+  --default-font-size: 0.875em;
+  --default-font-color: ${theme.fn.themeColor("text-dark")};
+  --default-bg-color: ${theme.fn.themeColor("bg-light")};
+
+  font-family: var(--default-font-family), sans-serif;
+  font-size: var(--default-font-size);
+  font-weight: 400;
+  font-style: normal;
+  color: ${theme.fn.themeColor("text-dark")};
+  margin: 0;
+  height: 100%; /* ensure the entire page will fill the window */
+  display: flex;
+  flex-direction: column;
+  background-color: ${theme.fn.themeColor("bg-light")};
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+`;
+
+export const baseStyle = css`
+  html {
+    height: 100%; /* ensure the entire page will fill the window */
+    width: 100%;
+  }
+
+  @media print and (orientation: portrait) {
+    html {
+      width: 8.5in;
+    }
+  }
+
+  @media print and (orientation: landscape) {
+    html {
+      width: 11in;
+    }
+  }
+
+  /*
+  override default padding and margin on lists
+  in most cases we won't be using list-style so
+  the padding isn't necessary
+*/
+  ul,
+  ol {
+    padding: 0;
+    margin: 0;
+    list-style-type: none;
+  }
+
+  /*
+  explicitly set the th text alignment to left. this is required for IE
+  which follows the suggested rendering and defaults to center, whereas
+  chrome and others do not
+*/
+  th {
+    text-align: left;
+  }
+
+  /* reset button element */
+  button {
+    font-size: 100%;
+    -webkit-appearance: none;
+    border: 0;
+    padding: 0;
+    margin: 0;
+    outline: none;
+    background-color: transparent;
+  }
+
+  a {
+    color: inherit;
+    cursor: pointer;
+    text-decoration: none;
+  }
+
+  button,
+  input,
+  textarea {
+    font-family: var(--default-font-family), "Helvetica Neue", Helvetica,
+      sans-serif;
+  }
+
+  textarea {
+    min-height: 110px;
+  }
+`;

frontend/src/metabase/styled-components/containers/GlobalStyles/GlobalStyles.tsx

-import { css, Global } from "@emotion/react";
+import { css, Global, useTheme } from "@emotion/react";
 
+import { baseStyle, getRootStyle } from "metabase/css/core/base.styled";
 import { alpha, color } from "metabase/lib/colors";
 import { useSelector } from "metabase/lib/redux";
 import { aceEditorStyles } from "metabase/query_builder/components/NativeQueryEditor/NativeQueryEditor.styled";
@@ -10,6 +11,7 @@ import { getFont, getFontFiles } from "../../selectors";
 export const GlobalStyles = (): JSX.Element => {
   const font = useSelector(getFont);
   const fontFiles = useSelector(getFontFiles);
+  const theme = useTheme();
 
   const styles = css`
     :root {
@@ -34,6 +36,10 @@ export const GlobalStyles = (): JSX.Element => {
 
     ${aceEditorStyles}
     ${saveDomImageStyles}
+    body {
+      ${getRootStyle(theme)}
+    }
+    ${baseStyle}
   `;
 
   return <Global styles={styles} />;