Decision clean up

src-docs/src/views/app_view.js

@@ -14,7 +14,6 @@ import {
 } from '../../../src/components';
 
 import { EuiThemeAmsterdam } from '../../../src/themes/eui-amsterdam/theme';
-import { EuiThemeDefault } from '../../../src/themes/eui/theme';
 
 import { keys } from '../../../src/services';
 
@@ -67,9 +66,7 @@ export class AppView extends Component {
           <EuiProvider
             cache={emotionCache}
             resetStyles={true}
-            theme={
-              theme.includes('amsterdam') ? EuiThemeAmsterdam : EuiThemeDefault
-            }
+            theme={theme.includes('amsterdam') ? EuiThemeAmsterdam : null}
             colorMode={theme.includes('light') ? 'light' : 'dark'}
           >
             <Helmet>

src-docs/src/views/theme/consuming.tsx

@@ -1,9 +1,5 @@
 import React from 'react';
-import { EuiSpacer } from '../../../../src/components/spacer';
-import { EuiIcon } from '../../../../src/components/icon';
-import { EuiCode } from '../../../../src/components/code';
-import { EuiText } from '../../../../src/components/text';
-import { useEuiTheme } from '../../../../src/services';
+import { EuiIcon, EuiCode, EuiText, useEuiTheme } from '../../../../src';
 
 export default () => {
   const { euiTheme } = useEuiTheme();
@@ -17,19 +13,17 @@ export default () => {
         />{' '}
         This primary color will adjust based on the light or dark theme value
       </p>
-      <EuiSpacer />
-      <div
+
+      <p
         css={{
           background: euiTheme.colors.lightShade,
           padding: `calc(${euiTheme.size.base} * 2)`,
         }}
       >
-        <p>
-          The padding of this box is created using <EuiCode>calc()</EuiCode>{' '}
-          because EUI&apos;s theme sizes are string pixel values that are
-          calculated off the theme&apos;s <EuiCode>base</EuiCode>
-        </p>
-      </div>
+        The padding of this box is created using <EuiCode>calc()</EuiCode>{' '}
+        because EUI&apos;s theme sizes are string pixel values that are
+        calculated off the theme&apos;s <EuiCode>base</EuiCode>
+      </p>
     </EuiText>
   );
 };

src-docs/src/views/theme/provider.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import {
+  EuiIcon,
+  EuiCode,
+  EuiText,
+  useEuiTheme,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiPanel,
+} from '../../../../src';
+
+export default () => {
+  const { euiTheme, colorMode } = useEuiTheme();
+  return (
+    <EuiPanel grow={false} paddingSize="l" color="subdued">
+      <EuiFlexGroup responsive={false} alignItems="center">
+        <EuiFlexItem grow={false}>
+          <div>
+            <EuiIcon
+              aria-hidden="true"
+              type="stopFilled"
+              size="s"
+              css={{ color: euiTheme.colors.primary }}
+            />
+            <EuiIcon
+              aria-hidden="true"
+              type="stopFilled"
+              size="s"
+              css={{ color: euiTheme.colors.success }}
+            />
+            <EuiIcon
+              aria-hidden="true"
+              type="stopFilled"
+              size="s"
+              css={{ color: euiTheme.colors.text }}
+            />
+          </div>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiText size="s">
+            <strong>{euiTheme.themeName}</strong>
+          </EuiText>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiText size="s">
+            <EuiCode transparentBackground>colorMode:</EuiCode>
+          </EuiText>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiText size="s" color="subdued">
+            <p>
+              <code>{colorMode}</code>
+            </p>
+          </EuiText>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiPanel>
+  );
+};

src-docs/src/views/theme/theme_example.js

@@ -2,15 +2,11 @@ import React from 'react';
 
 import { GuideSectionTypes } from '../../components';
 
-import {
-  EuiText,
-  EuiSpacer,
-  EuiCallOut,
-  EuiCode,
-  EuiLink,
-} from '../../../../src/components';
+import { EuiText, EuiCode, EuiLink } from '../../../../src/components';
 import { EuiThemeProvider } from '../../../../src/services';
 
+import Provider from './provider';
+
 import Consuming from './consuming';
 const consumingSource = require('!!raw-loader!./consuming');
 
@@ -38,13 +34,11 @@ export const ThemeExample = {
       <EuiText>
         <p>
           EUI is in the progress of switching it&apos;s core styles processor
-          from Sass to <EuiLink to="https://emotion.sh">Emotion</EuiLink>. It
-          requires that all consumer applications wrap their core application
+          from Sass to <EuiLink href="https://emotion.sh">Emotion</EuiLink>. To
+          take full advantage of this context layer, wrap your core application
           with <strong>EuiThemeProvider</strong>.
         </p>
       </EuiText>
-      <EuiSpacer size="m" />
-      <EuiCallOut title="The following examples assume that you have wrapped your entire application with this provider." />
     </>
   ),
   sections: [
@@ -91,6 +85,7 @@ export const ThemeExample = {
           </p>
         </>
       ),
+      demo: <Provider />,
       props: { EuiThemeProvider },
     },
     {

src/components/provider/provider.tsx

@@ -16,8 +16,13 @@ import {
 import { EuiThemeProvider, EuiThemeProviderProps } from '../../services';
 
 export interface EuiProviderProps<T>
-  extends Omit<EuiThemeProviderProps<T>, 'children'>,
+  extends Omit<EuiThemeProviderProps<T>, 'children' | 'theme'>,
     EuiGlobalStylesProps {
+  /**
+   * Provide a specific EuiTheme; Defaults to EuiThemeDefault;
+   * Pass `null` to remove all theming including global reset and `colorMode`.
+   */
+  theme?: EuiThemeProviderProps<T>['theme'] | null;
   cache?: EmotionCache;
 }
 
@@ -26,19 +31,20 @@ export function EuiProvider<T = {}>({
   theme,
   colorMode,
   modify,
-  resetStyles,
   children,
 }: PropsWithChildren<EuiProviderProps<T>>) {
-  return (
+  return theme !== null ? (
     <EuiThemeProvider theme={theme} colorMode={colorMode} modify={modify}>
       {cache ? (
         <CacheProvider value={cache}>
-          <EuiGlobalStyles resetStyles={resetStyles} />
+          <EuiGlobalStyles />
         </CacheProvider>
       ) : (
-        <EuiGlobalStyles resetStyles={resetStyles} />
+        <EuiGlobalStyles />
       )}
       {children}
     </EuiThemeProvider>
+  ) : (
+    children
   );
 }

src/themes/eui-amsterdam/global_styling/reset/_reset.scss → src/global_styling/reset/_reset.scss

@@ -70,36 +70,30 @@ body {
 }
 
 *:focus {
-  // 👉 Safari and Firefox innately respect only showing the outline with keyboard only
-  // 💔 But they don't allow coloring of the 'auto'/default outline, so contrast is no good in dark mode.
-  // 👉 For these browsers we use the solid type in order to match with `currentColor`.
-  // 😦 Which does means the outline will be square
-  outline: $euiFocusRingSize solid currentColor;
-  outline-offset: -($euiFocusRingSize / 2);
-
-  // 👀 Chrome respects :focus-visible and allows coloring the `auto` style
-  &:focus-visible {
-    outline-style: auto;
+  outline: none;
+
+  // sass-lint:disable no-vendor-prefixes
+  // Disables border that shows up when tabbing in Firefox.
+  &::-moz-focus-inner {
+    border: none;
   }
 
-  //🙅‍♀️ But Chrome also needs to have the outline forcefully removed from regular `:focus` state
-  &:not(:focus-visible) {
+  &:-moz-focusring {
     outline: none;
   }
 }
 
-// Dark mode's highlighted doesn't work well so lets just set it the same as our focus background
-::selection {
-  background: $euiFocusBackgroundColor;
-}
-
 a {
   text-decoration: none;
   color: $euiColorPrimary;
 
-  &:hover,
+  &:hover {
+    text-decoration: none;
+  }
+
   &:focus {
     text-decoration: none;
+    outline: none;
   }
 }
 
@@ -121,6 +115,7 @@ button {
   border: none;
   padding: 0;
   margin: 0;
+  outline: none;
   font-size: inherit;
   color: inherit;
   border-radius: 0;
@@ -156,3 +151,10 @@ hr {
 fieldset {
   min-inline-size: auto;
 }
+
+/* Chrome has an issue around RTL languages in SVGs when letter-spacing is negative
+ * https://bugs.chromium.org/p/chromium/issues/detail?id=966480
+ */
+svg text {
+  letter-spacing: normal !important; // sass-lint:disable-line no-important
+}

src/global_styling/reset/global_styles.tsx

@@ -10,21 +10,16 @@ import React from 'react';
 import { Global, css } from '@emotion/react';
 import { useScrollBar } from '../mixins/_helpers';
 import { shade, tint, transparentize } from '../../services/color';
-import { useEuiTheme, isLegacyTheme } from '../../services/theme';
+import { useEuiTheme } from '../../services/theme';
 import { resetStyles as reset } from './reset';
 
-export interface EuiGlobalStylesProps {
-  resetStyles?: boolean;
-}
+export interface EuiGlobalStylesProps {}
 
-export const EuiGlobalStyles = ({
-  resetStyles = false,
-}: EuiGlobalStylesProps) => {
+export const EuiGlobalStyles = ({}: EuiGlobalStylesProps) => {
   const {
-    euiTheme: { base, border, colors, font, themeName },
+    euiTheme: { base, border, colors, font },
     colorMode,
   } = useEuiTheme();
-  const legacyTheme = isLegacyTheme(themeName);
 
   /**
    * Declaring the top level scrollbar colors to match the theme also requires setting the sizes on Chrome
@@ -58,22 +53,6 @@ export const EuiGlobalStyles = ({
    * Outline/Focus state resets
    */
   const focusReset = () => {
-    if (legacyTheme) {
-      // The legacy theme simply turns off all outlines in favor of component-specific handling using box-shadow
-      return `*:focus {
-        outline: none;
-
-        // Disables border that shows up when tabbing in Firefox.
-        &::-moz-focus-inner {
-          border: none;
-        }
-
-        &:-moz-focusring {
-          outline: none;
-        }
-      }`;
-    }
-
     // The latest theme utilizes `focus-visible` to turn on focus outlines.
     // But this is browser-dependend:
     // 👉 Safari and Firefox innately respect only showing the outline with keyboard only
@@ -108,7 +87,7 @@ export const EuiGlobalStyles = ({
    * Final styles
    */
   const styles = css`
-    ${resetStyles ? reset : ''}
+    ${reset}
 
     html {
       ${scrollbarStyles}