[EUI+] Initial typography and doc content updates (#7848)

packages/docusaurus-theme/src/components/call_out/index.tsx

@@ -0,0 +1,81 @@
+import { css } from '@emotion/react';
+import { EuiText, useEuiMemoizedStyles, UseEuiTheme } from '@elastic/eui';
+import { FunctionComponent, PropsWithChildren } from 'react';
+
+type VARIANTS = 'info' | 'tip' | 'note' | 'danger' | 'warning';
+type TEXT_COLORS = 'primaryText' | 'successText' | 'dangerText' | 'warningText';
+
+const VARIANT_TO_COLOR_MAP: Record<
+  VARIANTS,
+  { backgroundVariable: string; colorKey: TEXT_COLORS }
+> = {
+  info: {
+    backgroundVariable: 'var(--eui-background-color-primary)',
+    colorKey: 'primaryText',
+  },
+  note: {
+    backgroundVariable: 'var(--eui-background-color-primary)',
+    colorKey: 'primaryText',
+  },
+  tip: {
+    backgroundVariable: 'var(--eui-background-color-success)',
+    colorKey: 'successText',
+  },
+  danger: {
+    backgroundVariable: 'var(--eui-background-color-danger)',
+    colorKey: 'dangerText',
+  },
+  warning: {
+    backgroundVariable: 'var(--eui-background-color-warning)',
+    colorKey: 'warningText',
+  },
+};
+
+const getStyles = ({ euiTheme }: UseEuiTheme, variant: VARIANTS) => {
+  const colorKey = VARIANT_TO_COLOR_MAP[variant].colorKey;
+  const color = euiTheme.colors[colorKey];
+
+  return {
+    note: css`
+      &:not(:last-of-type) {
+        margin-block-end: ${euiTheme.size.m};
+      }
+
+      .alert {
+        --ifm-alert-background-color: ${VARIANT_TO_COLOR_MAP[variant]
+          .backgroundVariable};
+        --ifm-alert-foreground-color: ${euiTheme.colors.text};
+        --ifm-alert-padding-horizontal: ${euiTheme.size.base};
+        --ifm-alert-padding-vertical: ${euiTheme.size.base};
+        --ifm-alert-border-width: ${euiTheme.border.width.thin};
+        --ifm-alert-border-left-width: ${euiTheme.border.width.thin};
+        --ifm-alert-border-color: ${color};
+
+        [class^='admonitionHeading'] {
+          --ifm-alert-foreground-color: ${color};
+
+          color: var(--ifm-alert-foreground-color);
+        }
+      }
+    `,
+  };
+};
+
+type CallOutProps = PropsWithChildren & {
+  variant: VARIANTS;
+};
+
+export const CallOut: FunctionComponent<CallOutProps> = ({
+  children,
+  variant,
+}) => {
+  const styles = useEuiMemoizedStyles((euiTheme) =>
+    getStyles(euiTheme, variant)
+  );
+
+  return (
+    <EuiText size="s" css={styles.note}>
+      {children}
+    </EuiText>
+  );
+};

packages/docusaurus-theme/src/components/theme_context/theme_overrides.ts

@@ -6,4 +6,7 @@ export const EuiThemeOverrides: EuiThemeModifications = {
       body: '#fff',
     },
   },
+  font: {
+    lineHeightMultiplier: 1.75,
+  },
 };

packages/docusaurus-theme/src/theme/Admonition/Type/Danger.tsx

@@ -0,0 +1,16 @@
+import OriginalDanger from '@theme-init/Admonition/Type/Danger';
+import type WarningType from '@theme-init/Admonition/Type/Danger';
+import type { WrapperProps } from '@docusaurus/types';
+import { CallOut } from '../../../components/call_out';
+
+type Props = WrapperProps<typeof WarningType>;
+
+const Danger = (props: Props): JSX.Element => {
+  return (
+    <CallOut variant="danger">
+      <OriginalDanger {...props} />
+    </CallOut>
+  );
+};
+
+export default Danger;

packages/docusaurus-theme/src/theme/Admonition/Type/Info.tsx

@@ -0,0 +1,16 @@
+import OriginalInfo from '@theme-init/Admonition/Type/Info';
+import type InfoType from '@theme-init/Admonition/Type/Info';
+import type { WrapperProps } from '@docusaurus/types';
+import { CallOut } from '../../../components/call_out';
+
+type Props = WrapperProps<typeof InfoType>;
+
+const Note = (props: Props): JSX.Element => {
+  return (
+    <CallOut variant="info">
+      <OriginalInfo {...props} />
+    </CallOut>
+  );
+};
+
+export default Note;

packages/docusaurus-theme/src/theme/Admonition/Type/Note.tsx

@@ -0,0 +1,16 @@
+import OriginalNote from '@theme-init/Admonition/Type/Note';
+import type NoteType from '@theme-init/Admonition/Type/Note';
+import type { WrapperProps } from '@docusaurus/types';
+import { CallOut } from '../../../components/call_out';
+
+type Props = WrapperProps<typeof NoteType>;
+
+const Note = (props: Props): JSX.Element => {
+  return (
+    <CallOut variant="note">
+      <OriginalNote {...props} />
+    </CallOut>
+  );
+};
+
+export default Note;

packages/docusaurus-theme/src/theme/Admonition/Type/Tip.tsx

@@ -0,0 +1,16 @@
+import OriginalTip from '@theme-init/Admonition/Type/Tip';
+import type TipType from '@theme-init/Admonition/Type/Tip';
+import type { WrapperProps } from '@docusaurus/types';
+import { CallOut } from '../../../components/call_out';
+
+type Props = WrapperProps<typeof TipType>;
+
+const Tip = (props: Props): JSX.Element => {
+  return (
+    <CallOut variant="tip">
+      <OriginalTip {...props} />
+    </CallOut>
+  );
+};
+
+export default Tip;

packages/docusaurus-theme/src/theme/Admonition/Type/Warning.tsx

@@ -0,0 +1,16 @@
+import OriginalWarning from '@theme-init/Admonition/Type/Warning';
+import type WarningType from '@theme-init/Admonition/Type/Warning';
+import type { WrapperProps } from '@docusaurus/types';
+import { CallOut } from '../../../components/call_out';
+
+type Props = WrapperProps<typeof WarningType>;
+
+const Warning = (props: Props): JSX.Element => {
+  return (
+    <CallOut variant="warning">
+      <OriginalWarning {...props} />
+    </CallOut>
+  );
+};
+
+export default Warning;

packages/docusaurus-theme/src/theme/DocItem/Content/index.tsx

@@ -0,0 +1,33 @@
+import OriginalContent from '@theme-init/DocItem/Content';
+import type ContentType from '@theme-init/DocItem/Content';
+import type { WrapperProps } from '@docusaurus/types';
+import { useEuiMemoizedStyles, UseEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
+
+type Props = WrapperProps<typeof ContentType>;
+
+const getContentStyles = ({ euiTheme }: UseEuiTheme) => {
+  return {
+    content: css`
+      // required specificity to apply styles
+      .markdown header > h1 {
+        --ifm-h1-font-size: 2.86rem;
+        --ifm-h1-vertical-rhythm-bottom: 1.486;
+      }
+    `,
+  };
+};
+
+/* OriginalContent holds the document title and markdown content
+NOTE: ejecting this results in an error due to using useDoc() hook outside of DocProvider 
+https://github.com/facebook/docusaurus/blob/main/packages/docusaurus-theme-classic/src/theme/DocItem/Content/index.tsx */
+const Content = (props: Props): JSX.Element => {
+  const styles = useEuiMemoizedStyles(getContentStyles);
+  return (
+    <div css={styles.content}>
+      <OriginalContent {...props} />
+    </div>
+  );
+};
+
+export default Content;

packages/docusaurus-theme/src/theme/Footer/index.tsx

@@ -1,17 +1,28 @@
 import { css } from '@emotion/react';
-import { EuiText, EuiLink, UseEuiTheme, EuiThemeProvider, useEuiMemoizedStyles } from '@elastic/eui';
+import {
+  EuiText,
+  EuiLink,
+  UseEuiTheme,
+  EuiThemeProvider,
+  useEuiMemoizedStyles,
+} from '@elastic/eui';
 
-const ELASTIC_LICENSE_URL = "https://github.com/elastic/eui/blob/main/licenses/ELASTIC-LICENSE-2.0.md";
-const SSPL_LICENSE_URL = "https://github.com/elastic/eui/blob/main/licenses/SSPL-LICENSE.md";
+const ELASTIC_LICENSE_URL =
+  'https://github.com/elastic/eui/blob/main/licenses/ELASTIC-LICENSE-2.0.md';
+const SSPL_LICENSE_URL =
+  'https://github.com/elastic/eui/blob/main/licenses/SSPL-LICENSE.md';
 
 const getFooterStyles = ({ euiTheme }: UseEuiTheme) => {
   return {
     root: css`
-      background: #1C1E23; // Color not available in EUI
+      background: #1c1e23; // Color not available in EUI
       border-radius: ${euiTheme.size.s} ${euiTheme.size.s} 0 0;
       padding: ${euiTheme.size.l};
       text-align: center;
     `,
+    text: css`
+      line-height: var(--eui-line-height-s);
+    `,
     heart: css`
       color: ${euiTheme.colors.accent};
     `,
@@ -22,22 +33,21 @@ const Footer = () => {
   const styles = useEuiMemoizedStyles(getFooterStyles);
 
   return (
-    <EuiThemeProvider colorMode="inverse">
+    <EuiThemeProvider colorMode="dark">
       <footer css={styles.root}>
-        <EuiText textAlign="center" size="s">
-          EUI is dual-licensed under {' '}
-          <EuiLink href={ELASTIC_LICENSE_URL}>
-            Elastic License 2.0
-          </EuiLink>
+        <EuiText textAlign="center" size="s" css={styles.text}>
+          EUI is dual-licensed under{' '}
+          <EuiLink href={ELASTIC_LICENSE_URL}>Elastic License 2.0</EuiLink>
           {' and '}
           <EuiLink href={SSPL_LICENSE_URL}>
             Server Side Public License, v 1
           </EuiLink>
           {' | '}
-          Crafted with <span role="img" aria-label="love" css={styles.heart}>❤</span> by{' '}
-          <EuiLink href="https://elastic.co">
-            Elastic
-          </EuiLink>
+          Crafted with{' '}
+          <span role="img" aria-label="love" css={styles.heart}>
+            ❤
+          </span>{' '}
+          by <EuiLink href="https://elastic.co">Elastic</EuiLink>
         </EuiText>
       </footer>
     </EuiThemeProvider>

packages/docusaurus-theme/src/theme/MDXComponents/A.tsx

@@ -0,0 +1,22 @@
+import type AType from '@theme-init/MDXComponents/A';
+import type { WrapperProps } from '@docusaurus/types';
+import { css } from '@emotion/react';
+import { EuiLink, useEuiMemoizedStyles, UseEuiTheme } from '@elastic/eui';
+
+type Props = WrapperProps<typeof AType>;
+
+const getStyles = ({ euiTheme }: UseEuiTheme) => {
+  return {
+    link: css`
+      text-decoration: underline;
+    `,
+  };
+};
+
+const A = (props: Props): JSX.Element => {
+  const styles = useEuiMemoizedStyles(getStyles);
+
+  return <EuiLink {...props} css={styles.link} />;
+};
+
+export default A;

packages/docusaurus-theme/src/theme/MDXComponents/Code.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import type CodeType from '@theme-init/MDXComponents/Code';
+import type { WrapperProps } from '@docusaurus/types';
+import { css } from '@emotion/react';
+import {
+  EuiCode,
+  EuiCodeBlock,
+  useEuiMemoizedStyles,
+  UseEuiTheme,
+} from '@elastic/eui';
+
+type Props = WrapperProps<typeof CodeType>;
+
+const getStyles = ({ euiTheme }: UseEuiTheme) => {
+  return {
+    code: css`
+      // reset docusaurus code styles
+      border: none;
+      vertical-align: initial;
+    `,
+  };
+};
+
+const Code = ({ children, className, ...rest }: Props): JSX.Element => {
+  const styles = useEuiMemoizedStyles(getStyles);
+  const language = className?.startsWith('language-')
+    ? className.replace('language-', '')
+    : undefined;
+
+  const isInlineCode = children
+    ? React.Children.toArray(children).every(
+        (el) => typeof el === 'string' && !el.includes('\n')
+      )
+    : false;
+
+  return isInlineCode ? (
+    <EuiCode {...rest} language={language} css={styles.code}>
+      {children}
+    </EuiCode>
+  ) : (
+    <EuiCodeBlock {...rest} fontSize="m" language={language}>
+      {children}
+    </EuiCodeBlock>
+  );
+};
+
+export default Code;

packages/docusaurus-theme/src/theme/MDXComponents/Heading.tsx

@@ -0,0 +1,29 @@
+import OriginalHeading from '@theme-init/MDXComponents/Heading';
+import type HeadingType from '@theme-init/MDXComponents/Heading';
+import type { WrapperProps } from '@docusaurus/types';
+import { EuiTitle, EuiTitleSize } from '@elastic/eui';
+import { FunctionComponent } from 'react';
+
+type Props = WrapperProps<typeof HeadingType>;
+
+const SIZE_TO_LEVEL_MAP: Record<string, EuiTitleSize> = {
+  h6: 'xxxs',
+  h5: 'xxs',
+  h4: 'xs',
+  h3: 's',
+  h2: 'm',
+  h1: 'l',
+};
+
+const Heading: FunctionComponent<Omit<Props, 'as'> & { as: string }> = ({
+  as,
+  ...rest
+}): JSX.Element => {
+  return (
+    <EuiTitle size={SIZE_TO_LEVEL_MAP[as]}>
+      <OriginalHeading as={as} {...rest} />
+    </EuiTitle>
+  );
+};
+
+export default Heading;