@elastic/eui-docusaurus-theme 2.0.0

package/lib/theme/PaginatorNavLink/index.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import clsx from 'clsx';
+import { css } from '@emotion/react';
+import Link from '@docusaurus/Link';
+import { useEuiMemoizedStyles, EuiIcon } from '@elastic/eui';
+const getStyles = ({ euiTheme }) => {
+    return {
+        link: css `
+      --ifm-pagination-nav-color-hover: ${euiTheme.colors.primary};
+
+      border: ${euiTheme.border.thin};
+
+      .pagination-nav__label {
+        display: flex;
+        align-items: center;
+
+        font-size: var(--eui-font-size-m);
+        line-height: var(--eui-line-height-l);
+      }
+
+      &.pagination-nav__link--next .pagination-nav__label {
+        justify-content: flex-end;
+      }
+
+      .pagination-nav__label::before,
+      .pagination-nav__label::after {
+        content: '';
+      }
+
+      .pagination-nav__sublabel {
+        margin-block-end: ${euiTheme.size.xs};
+        font-size: var(--eui-font-size-s);
+        line-height: var(--eui-line-height-l);
+      }
+    `,
+    };
+};
+export default function PaginatorNavLink(props) {
+    const { permalink, title, subLabel, isNext } = props;
+    const isPrev = !isNext;
+    const styles = useEuiMemoizedStyles(getStyles);
+    return (_jsxs(Link, { className: clsx('pagination-nav__link', isNext ? 'pagination-nav__link--next' : 'pagination-nav__link--prev'), css: styles.link, to: permalink, children: [subLabel && _jsx("div", { className: "pagination-nav__sublabel", children: subLabel }), _jsxs("div", { className: "pagination-nav__label", children: [isPrev && _jsx(EuiIcon, { type: "arrowLeft" }), title, isNext && _jsx(EuiIcon, { type: "arrowRight" })] })] }));
+}

package/lib/theme/Root.d.ts

@@ -0,0 +1,3 @@
+import { Props } from '@theme/Root';
+declare const Root: ({ children }: Props) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default Root;

package/lib/theme/Root.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+import { useEffect, useState, } from 'react';
+import Head from '@docusaurus/Head';
+import chartsDarkThemeUrl from '!file-loader!@elastic/charts/dist/theme_only_dark.css';
+import chartsLightThemeUrl from '!file-loader!@elastic/charts/dist/theme_only_light.css';
+import { CacheProvider, css, Global } from '@emotion/react';
+import { useEuiTheme } from '@elastic/eui';
+import { AppThemeProvider, cssGlobalCache, useAppTheme, } from '../components/theme_context';
+import { getGlobalStyles } from './Root.styles';
+import { getResetStyles } from './reset.styles';
+import { getInfimaStyles } from './infima.styles';
+const styles = {
+    root: css `
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+  `,
+};
+const _Root = ({ children }) => {
+    const { colorMode } = useAppTheme();
+    const [mounted, setMounted] = useState(false);
+    const euiTheme = useEuiTheme();
+    const globalStyles = getGlobalStyles(euiTheme);
+    const resetStyles = getResetStyles(euiTheme);
+    const infimaStyles = getInfimaStyles();
+    // NOTE: This is a temp. solution
+    // Emotion styles are loaded dynamically on client in contrast
+    // to Docusaurus' SSR content. By rendering the content only
+    // after mount we can prevent some quite noticeable style updates
+    // and layout shifts. The drawback is that the page initially loads blank.
+    // TODO: remove this once we have an approach to inject HTML server-side
+    useEffect(() => {
+        if (!mounted) {
+            setMounted(true);
+        }
+    }, []);
+    // Load chart theme CSS based on color mode
+    useEffect(() => {
+        if (colorMode !== 'light' && colorMode !== 'dark') {
+            return;
+        }
+        const element = document.createElement('link');
+        element.rel = 'stylesheet';
+        element.href =
+            colorMode === 'light' ? chartsLightThemeUrl : chartsDarkThemeUrl;
+        element.dataset.elasticChartsTheme = 'true';
+        document.head.appendChild(element);
+        return () => {
+            document.head.removeChild(element);
+        };
+    }, [colorMode]);
+    return (_jsxs(_Fragment, { children: [_jsx(Head, { children: _jsx("link", { href: "https://fonts.googleapis.com/css2?family=Inter:wght@300..700&family=Roboto+Mono:ital,wght@0,400..700;1,400..700&display=swap", rel: "stylesheet" }) }), _jsx(CacheProvider, { value: cssGlobalCache, children: _jsx(Global, { styles: [resetStyles, infimaStyles, globalStyles] }) }), _jsx("div", { style: !mounted ? { display: 'none' } : undefined, css: styles.root, children: children })] }));
+};
+// Wrap docusaurus root component with <EuiProvider>
+// See https://docusaurus.io/docs/swizzling#wrapper-your-site-with-root
+const Root = ({ children }) => {
+    return (_jsx(AppThemeProvider, { children: _jsx(_Root, { children: children }) }));
+};
+export default Root;

package/lib/theme/Root.styles.d.ts

@@ -0,0 +1,2 @@
+import { UseEuiTheme } from '@elastic/eui';
+export declare const getGlobalStyles: (theme: UseEuiTheme) => import("@emotion/react").SerializedStyles;

package/lib/theme/Root.styles.js

@@ -0,0 +1,111 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+import { euiFontSizeFromScale, euiLineHeightFromBaseline, } from '@elastic/eui';
+import { css } from '@emotion/react';
+// override docusaurus variables as needed
+// NOTE: we use define variables with style calculations here
+// on the global level to reduce how often they are called
+export const getGlobalStyles = (theme) => {
+    const { euiTheme } = theme;
+    const { font, base, colors, size, components } = euiTheme;
+    const fontBodyScale = font.scale[font.body.scale];
+    const fontBase = {
+        fontFamily: font.family,
+        fontSize: `${font.defaultUnits === 'px' ? fontBodyScale * base : fontBodyScale}${font.defaultUnits}`,
+        fontWeight: font.weight[font.body.weight],
+    };
+    const fontSizeXXL = euiFontSizeFromScale('xxl', euiTheme);
+    const fontSizeXL = euiFontSizeFromScale('xl', euiTheme);
+    const fontSizeL = euiFontSizeFromScale('l', euiTheme);
+    const fontSizeM = euiFontSizeFromScale('m', euiTheme);
+    const fontSizeS = euiFontSizeFromScale('s', euiTheme);
+    const fontSizeXS = euiFontSizeFromScale('xs', euiTheme);
+    const fontSizeXXS = euiFontSizeFromScale('xxs', euiTheme);
+    const lineHeightXXL = '2rem';
+    const lineHeightXL = '1.75rem';
+    const lineHeightL = euiLineHeightFromBaseline('s', euiTheme);
+    const lineHeightM = '1.5rem';
+    const lineHeightS = euiLineHeightFromBaseline('xs', euiTheme);
+    const lineHeightXS = '1.33rem';
+    const lineHeightXXS = euiLineHeightFromBaseline('xxs', euiTheme);
+    return css `
+    // color theme related variables
+    :root,
+    [data-theme='dark']:root {
+      /* EUI theme variables */
+      --eui-background-color-primary: ${colors.backgroundBasePrimary};
+      --eui-background-color-success: ${colors.backgroundBaseSuccess};
+      --eui-background-color-danger: ${colors.backgroundBaseDanger};
+      --eui-background-color-warning: ${colors.backgroundBaseWarning};
+      --eui-background-color-accent: ${colors.backgroundBaseAccent};
+
+      --eui-color-danger-text: ${colors.textDanger};
+
+      /* Docusaurus theme variables */
+      --ifm-background-color: ${colors.backgroundBasePlain};
+      --ifm-font-color-base: ${colors.textParagraph};
+      --ifm-link-color: ${colors.link};
+      --ifm-link-hover-color: ${colors.link};
+
+      --ifm-menu-color: ${colors.textParagraph};
+      --ifm-menu-color-background-active: ${colors.backgroundBaseSubdued};
+      --ifm-menu-color-background-hover: var(--eui-background-color-primary);
+
+      --ifm-pre-background: ${components.codeBackground};
+    }
+
+    :root {
+      /* EUI theme variables */
+      --eui-font-size-base: ${fontBase.fontSize};
+      --eui-font-size-xxl: ${fontSizeXXL};
+      --eui-font-size-xl: ${fontSizeXL};
+      --eui-font-size-l: ${fontSizeL};
+      --eui-font-size-m: ${fontSizeM};
+      --eui-font-size-s: ${fontSizeS};
+      --eui-font-size-xs: ${fontSizeXS};
+      --eui-font-size-xxs: ${fontSizeXXS};
+
+      --eui-line-height-base: ${lineHeightXL};
+      --eui-line-height-xxl: ${lineHeightXXL};
+      --eui-line-height-xl: ${lineHeightXL};
+      --eui-line-height-l: ${lineHeightL};
+      --eui-line-height-m: ${lineHeightM};
+      --eui-line-height-s: ${lineHeightS};
+      --eui-line-height-xs: ${lineHeightXS};
+      --eui-line-height-xxs: ${lineHeightXXS};
+
+      --eui-size-xs: ${size.xs};
+      --eui-size-s: ${size.s};
+      --eui-size-m: ${size.m};
+
+      --eui-border-color-primary: ${colors.borderStrongPrimary};
+
+      --eui-theme-content-vertical-spacing: ${size.base};
+
+      /* Docusaurus theme variables */
+      --ifm-font-family-base: ${fontBase.fontFamily};
+      --ifm-font-size-base: var(--eui-font-size-base);
+      --ifm-font-weight-base: ${fontBase.fontWeight};
+      --ifm-line-height-base: var(--eui-line-height-base);
+
+      --ifm-h1-font-size: var(--eui-font-size-xl);
+      --ifm-h2-font-size: var(--eui-font-size-l);
+      --ifm-h3-font-size: var(--eui-font-size-m);
+      --ifm-h4-font-size: var(--eui-font-size-s);
+      --ifm-h5-font-size: var(--eui-font-size-xs);
+      --ifm-h6-font-size: var(--eui-font-size-xxs);
+
+      --ifm-global-radius: ${euiTheme.border.radius.small};
+
+      --ifm-toc-border-color: ${euiTheme.border.color};
+
+      --doc-sidebar-width: 258px;
+      --doc-sidebar-hidden-width: 30px;
+    }
+  `;
+};

package/lib/theme/TOCCollapsible/CollapseButton/index.d.ts

@@ -0,0 +1,3 @@
+import { JSX } from 'react';
+import type { Props } from '@theme-original/TOCCollapsible/CollapseButton';
+export default function TOCCollapsibleCollapseButton({ collapsed, ...props }: Props): JSX.Element;

package/lib/theme/TOCCollapsible/CollapseButton/index.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import clsx from 'clsx';
+import { css } from '@emotion/react';
+import Translate from '@docusaurus/Translate';
+import { EuiIcon, useEuiMemoizedStyles } from '@elastic/eui';
+// coverted from css modules to Emotion
+const getStyles = ({ euiTheme }) => {
+    return {
+        tocCollapsibleButton: css `
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      width: 100%;
+      padding: ${euiTheme.size.s} ${euiTheme.size.m};
+      border-radius: ${euiTheme.border.radius.small};
+      font-size: inherit;
+    `,
+    };
+};
+export default function TOCCollapsibleCollapseButton({ collapsed, ...props }) {
+    const styles = useEuiMemoizedStyles(getStyles);
+    return (_jsxs("button", { type: "button", ...props, className: clsx('clean-btn', props.className), css: styles.tocCollapsibleButton, children: [_jsx(Translate, { id: "theme.TOCCollapsible.toggleButtonLabel", description: "The label used by the button on the collapsible TOC component", children: "On this page" }), _jsx(EuiIcon, { type: collapsed ? 'arrowDown' : 'arrowUp' })] }));
+}

package/lib/theme/TOCItems/Tree.d.ts

@@ -0,0 +1,5 @@
+import React, { JSX } from 'react';
+import type { Props } from '@theme-original/TOCItems/Tree';
+declare function TOCItemTree({ toc, className, linkClassName, isChild, }: Props): JSX.Element | null;
+declare const _default: React.MemoExoticComponent<typeof TOCItemTree>;
+export default _default;

package/lib/theme/TOCItems/Tree.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+import React from 'react';
+import { css } from '@emotion/react';
+import Link from '@docusaurus/Link';
+import { useEuiMemoizedStyles } from '@elastic/eui';
+const getStyles = ({ euiTheme }) => {
+    return {
+        list: css `
+      // ensure specificity to apply override
+      :is(ul) li {
+        margin: 0;
+      }
+
+      &:is(ul.table-of-contents) {
+        padding: ${euiTheme.size.m};
+        border-top: ${euiTheme.border.width.thin} solid ${euiTheme.border.color};
+      }
+
+      .tree-item__inner {
+        font-size: var(--eui-font-size-s);
+        line-height: var(--eui-line-height-l);
+      }
+
+      @media (min-width: 997px) {
+        &:is(ul.table-of-contents) {
+          padding: 0;
+          border: none;
+        }
+
+        .tree-item__inner {
+          display: flex;
+          flex-direction: column;
+          padding: ${euiTheme.size.s} ${euiTheme.size.m} ${euiTheme.size.s} 0;
+          font-size: var(--eui-font-size-xs);
+          line-height: var(--eui-line-height-xxs);
+        }
+
+        // apply the decor border only to top level tree items
+        &.table-of-contents > li > .tree-item__inner {
+          padding: ${euiTheme.size.s} ${euiTheme.size.m};
+          border-left: ${euiTheme.border.width.thick} solid
+            ${euiTheme.border.color};
+
+          &:has(.table-of-contents__link--active) {
+            border-left-color: ${euiTheme.colors.link};
+          }
+        }
+      }
+
+      .table-of-contents__link--active {
+        color: ${euiTheme.colors.link};
+      }
+    `,
+        listChild: css `
+      padding-inline-start: ${euiTheme.size.m};
+    `,
+        link: css `
+      color: ${euiTheme.colors.textParagraph};
+    `,
+    };
+};
+// Recursive component rendering the toc tree
+function TOCItemTree({ toc, className, linkClassName, isChild, }) {
+    const styles = useEuiMemoizedStyles(getStyles);
+    if (!toc.length) {
+        return null;
+    }
+    return (_jsx("ul", { className: isChild ? undefined : className, css: [styles.list, isChild && styles.listChild], children: toc.map((heading) => (_jsx("li", { children: _jsxs("span", { className: "tree-item__inner", children: [_jsx(Link, { to: `#${heading.id}`, css: styles.link, className: linkClassName ?? undefined, 
+                        // Developer provided the HTML, so assume it's safe.
+                        dangerouslySetInnerHTML: { __html: heading.value } }), _jsx(TOCItemTree, { isChild: true, toc: heading.children, className: className, linkClassName: linkClassName })] }) }, heading.id))) }));
+}
+// Memo only the tree root is enough
+export default React.memo(TOCItemTree);

package/lib/theme/infima.styles.d.ts

@@ -0,0 +1 @@
+export declare const getInfimaStyles: () => import("@emotion/react").SerializedStyles;