[EuiGlobalStyles]: Support adding partial global styles

packages/eui/changelogs/upcoming/7839.md

@@ -0,0 +1,2 @@
+- Updated `EuiGlobalStyles` to support adding partial styles
+

packages/eui/src-docs/src/views/provider/provider_example.js

@@ -95,6 +95,43 @@ export const ProviderExample = {
           <EuiCodeBlock language="tsx" fontSize="m" isCopyable>
             {'<EuiProvider globalStyles={false} utilityClasses={false} />'}
           </EuiCodeBlock>
+          <EuiSpacer />
+
+          <p>
+            If you would like to use only a subset of the global styles you can
+            pass a custom instance of <EuiCode>EuiGlobalStyles</EuiCode> to{' '}
+            <EuiCode>globalStyles</EuiCode> with specific style flags disabled.
+            The available props are:
+          </p>
+
+          <ul>
+            <li>
+              <EuiCode>hasReset</EuiCode>
+            </li>
+            <li>
+              <EuiCode>hasFont</EuiCode>
+            </li>
+            <li>
+              <EuiCode>hasBase</EuiCode>
+            </li>
+            <li>
+              <EuiCode>hasColor</EuiCode>
+            </li>
+            <li>
+              <EuiCode>hasLink</EuiCode>
+            </li>
+            <li>
+              <EuiCode>hasFocus</EuiCode>
+            </li>
+            <li>
+              <EuiCode>hasScrollbar</EuiCode>
+            </li>
+          </ul>
+
+          <EuiCodeBlock language="tsx" fontSize="m" isCopyable>
+            {`const CustomStyles = () => <EuiGlobalStyles hasReset={false} />\
+            <EuiProvider globalStyles={CustomStyles} utilityClasses={false} />`}
+          </EuiCodeBlock>
 
           <h3 id="cache-customization">@emotion/cache customization</h3>
           <p>

packages/eui/src/components/provider/provider.tsx

@@ -18,10 +18,7 @@ import {
 import { emitEuiProviderWarning } from '../../services/theme/warning';
 import { cache as fallbackCache } from '../../services/emotion/css';
 
-import {
-  EuiGlobalStyles,
-  EuiGlobalStylesProps,
-} from '../../global_styling/reset/global_styles';
+import { EuiGlobalStyles } from '../../global_styling/reset/global_styles';
 import { EuiUtilityClasses } from '../../global_styling/utility/utility';
 import { EuiThemeAmsterdam } from '../../themes';
 
@@ -38,7 +35,6 @@ const isEmotionCacheObject = (
 
 export interface EuiProviderProps<T>
   extends PropsWithChildren,
-    EuiGlobalStylesProps,
     Pick<EuiThemeProviderProps<T>, 'colorMode' | 'modify'> {
   /**
    * Provide a specific EuiTheme; Defaults to EuiThemeAmsterdam;

packages/eui/src/global_styling/reset/global_styles.tsx

@@ -14,9 +14,27 @@ import { shade, tint, transparentize } from '../../services/color';
 import { useEuiTheme } from '../../services/theme';
 import { resetStyles as reset } from './reset';
 
-export interface EuiGlobalStylesProps {}
-
-export const EuiGlobalStyles = ({}: EuiGlobalStylesProps) => {
+export interface EuiGlobalStylesProps {
+  hasReset?: boolean;
+  hasFontReset?: boolean;
+  hasFont?: boolean;
+  hasBase?: boolean;
+  hasColor?: boolean;
+  hasFocus?: boolean;
+  hasLink?: boolean;
+  hasScrollbar?: boolean;
+}
+
+export const EuiGlobalStyles = ({
+  hasReset = true,
+  hasFontReset = true,
+  hasFont = true,
+  hasBase = true,
+  hasColor = true,
+  hasFocus = true,
+  hasLink = true,
+  hasScrollbar = true,
+}: EuiGlobalStylesProps) => {
   const euiThemeContext = useEuiTheme();
   const { euiTheme, colorMode } = euiThemeContext;
   const { base, colors, font } = euiTheme;
@@ -51,72 +69,96 @@ export const EuiGlobalStyles = ({}: EuiGlobalStylesProps) => {
    * Final styles
    */
   const styles = css`
-    ${reset}
-
-    html {
-      ${scrollbarStyles}
-      ${fontReset}
-      text-size-adjust: 100%;
-      font-kerning: normal;
-      ${logicalCSS('height', '100%')}
-      background-color: ${colors.body};
-      color: ${colors.text};
-    }
-
-    code,
-    pre,
-    kbd,
-    samp {
-      font-family: ${font.familyCode};
-    }
-
-    input,
-    textarea,
-    select {
-      ${{
-        ...fontReset,
-        fontSize: '1rem', // Inherit from html root
-      }}
-    }
-
-    // Chrome has opinionated select:disabled opacity styles that need to be overridden
-    select:disabled {
-      opacity: 1;
-    }
-
-    button {
-      font-family: ${font.family};
-    }
+    ${hasReset && reset}
+
+    ${hasBase &&
+    css`
+      html {
+        ${hasScrollbar && scrollbarStyles}
+        ${hasFontReset && fontReset}
+        text-size-adjust: 100%;
+        font-kerning: normal;
+        ${logicalCSS('height', '100%')}
+        ${
+          hasColor && {
+            backgroundColor: colors.body,
+            color: colors.text,
+          }
+        }
+    `}
+
+    ${hasFont &&
+    css`
+      code,
+      pre,
+      kbd,
+      samp {
+        font-family: ${font.familyCode};
+      }
 
-    em {
-      font-style: italic;
-    }
+      input,
+      textarea,
+      select {
+        ${hasFontReset && {
+          ...fontReset,
+        }}
+        font-size: 1rem; // Inherit from html root
+      }
+    `}
 
-    strong {
-      font-weight: ${font.weight.bold};
-    }
+    ${hasBase &&
+    css`
+      // Chrome has opinionated select:disabled opacity styles that need to be overridden
+      select:disabled {
+        opacity: 1;
+      }
+    `}
 
-    *:focus {
-      ${euiFocusRing(euiThemeContext)}
-    }
+    ${hasFont &&
+    css`
+      button {
+        font-family: ${font.family};
+      }
 
-    // Dark mode's highlighted doesn't work well so lets just set it the same as our focus background
-    ::selection {
-      background: ${transparentize(
-        colors.primary,
-        colorMode === 'LIGHT' ? 0.1 : 0.2
-      )};
-    }
+      em {
+        font-style: italic;
+      }
 
-    a {
-      color: ${colors.primaryText};
+      strong {
+        font-weight: ${font.weight.bold};
+      }
+    `}
 
-      &,
-      &:hover,
-      &:focus {
-        text-decoration: none;
+    ${hasFocus &&
+    css`
+      *:focus {
+        ${euiFocusRing(euiThemeContext)}
       }
-    }
+    `}
+
+    ${hasColor &&
+    css`
+      // Dark mode's highlighted doesn't work well so lets just set it the same as our focus background
+      ::selection {
+        background: ${transparentize(
+          colors.primary,
+          colorMode === 'LIGHT' ? 0.1 : 0.2
+        )};
+      }
+    `}
+
+    ${hasLink &&
+    css`
+      a {
+        ${hasColor && { color: colors.primaryText }}
+
+        &,
+        &:hover,
+        &:focus {
+          text-decoration: none;
+        }
+      }
+    `}
 
     // A few EUI components (e.g. tooltip, combobox) use a portal to render content outside of the DOM hierarchy.
     // The portal content is absolutely positioned relative to the body.