@enhanced-dom/slides 0.0.2

package/LICENSE.md

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2021-present CD9B4A105290E17E0948E021DF4105107C88693C59C0B891CCC08366C51AEA990902A6A156AC87D88A2FC41422A5E1C3C4071F251F19441C4516000EC25F87DF
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1 @@
+Basic building blocks for html slides

package/components/component-wave.component.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Wave } from './wave.component';
+export declare class ComponentWave extends Wave {
+    static Slot: ({ children }: {
+        children: any;
+    }) => any;
+    protected toColumns: (items: React.ReactElement[]) => [React.ReactElement<any, string | React.JSXElementConstructor<any>>[], React.ReactElement<any, string | React.JSXElementConstructor<any>>[]];
+}

package/components/component-wave.component.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Wave } from './wave.component';
+const ComponentWaveSlot = ({ children }) => {
+    return children || null;
+};
+export class ComponentWave extends Wave {
+    constructor() {
+        super(...arguments);
+        this.toColumns = (items) => {
+            const columns = Array(2)
+                .fill(null)
+                .map(() => []);
+            items.forEach((item) => {
+                const isComponentSlot = item.type && typeof item.type === typeof ComponentWaveSlot;
+                if (isComponentSlot) {
+                    columns[0].push(item);
+                    columns[1].push(React.createElement('div', {}, []));
+                }
+                else {
+                    const step = columns[0].length - 1;
+                    columns[1][step].props.children.push(item);
+                }
+            });
+            return columns;
+        };
+    }
+}
+ComponentWave.Slot = ComponentWaveSlot;

package/components/image-wave.component.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { Wave } from './wave.component';
+export declare class ImageWave extends Wave {
+    protected toColumns: (items: React.ReactElement[]) => [React.ReactElement<any, string | React.JSXElementConstructor<any>>[], React.ReactElement<any, string | React.JSXElementConstructor<any>>[]];
+}

package/components/image-wave.component.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Wave } from './wave.component';
+export class ImageWave extends Wave {
+    constructor() {
+        super(...arguments);
+        this.toColumns = (items) => {
+            const columns = Array(2)
+                .fill(null)
+                .map(() => []);
+            items.forEach((item) => {
+                const isImg = item.props && item.props.mdxType === 'img';
+                if (isImg) {
+                    const img = React.cloneElement(item, {
+                        style: { objectFit: 'contain', margin: 0 },
+                    });
+                    columns[0].push(img);
+                    columns[1].push(React.createElement('div', {}, []));
+                }
+                else {
+                    const step = columns[0].length - 1;
+                    columns[1][step].props.children.push(item);
+                }
+            });
+            return columns;
+        };
+    }
+}

package/components/index.d.ts

@@ -0,0 +1,3 @@
+export * from './toc.component';
+export * from './component-wave.component';
+export * from './image-wave.component';

package/components/index.js

@@ -0,0 +1,3 @@
+export * from './toc.component';
+export * from './component-wave.component';
+export * from './image-wave.component';

package/components/toc.component.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+interface TocItemProps {
+    heading: string;
+    to?: string;
+    explanation?: string;
+}
+export declare const Toc: {
+    ({ headings }: {
+        headings: TocItemProps[];
+    }): JSX.Element;
+    Heading: ({ heading }: {
+        heading: string;
+    }) => JSX.Element;
+};
+export {};

package/components/toc.component.js

@@ -0,0 +1,14 @@
+import React from 'react';
+const Heading = ({ heading }) => (React.createElement("h2", null,
+    heading,
+    React.createElement("a", { style: { display: 'none' }, id: heading.toLowerCase().replace(/\s/, '-') })));
+const TocItem = ({ heading, to, explanation }) => {
+    const anchor = to !== null && to !== void 0 ? to : heading;
+    return (React.createElement("li", null,
+        React.createElement("a", { href: anchor.toLowerCase().replace(/\s/, '-') },
+            React.createElement("em", null, heading)),
+        explanation ? ': ' : '',
+        explanation));
+};
+export const Toc = ({ headings }) => (React.createElement("ul", null, headings.map((h, idx) => (React.createElement(TocItem, Object.assign({ key: idx }, h))))));
+Toc.Heading = Heading;

package/components/wave.component.d.ts

@@ -0,0 +1,10 @@
+/** @jsx jsx */
+import { jsx } from 'theme-ui';
+import React from 'react';
+export declare abstract class Wave extends React.PureComponent<{
+    children: React.ReactNode;
+}> {
+    protected abstract toColumns: (children: React.ReactElement[]) => [React.ReactElement[], React.ReactElement[]];
+    private childrenToColumns;
+    render(): jsx.JSX.Element;
+}

package/components/wave.component.js

@@ -0,0 +1,37 @@
+/** @jsx jsx */
+import { jsx } from 'theme-ui';
+import React from 'react';
+import Scroller from 'gatsby-theme-waves/src/components/bar-scroller';
+import BaseWave from 'gatsby-theme-waves/src/components/wave';
+const Sticker = ({ progress = 0, steps, variant = 'default' }) => {
+    const currentStep = Math.round(progress);
+    const prev = steps[currentStep - 1];
+    const curr = steps[currentStep];
+    const next = steps[currentStep + 1];
+    return (jsx("div", { sx: {
+            variant: `styles.waves.${variant}.StickerContainer`,
+        } },
+        jsx("div", { sx: { variant: `styles.waves.${variant}.Sticker` } },
+            prev && (jsx("div", { sx: {
+                    variant: `styles.waves.${variant}.StickerStep`,
+                }, style: { opacity: Math.max(0, currentStep - progress) }, key: currentStep - 1 }, prev)),
+            jsx("div", { sx: {
+                    variant: `styles.waves.${variant}.StickerStep`,
+                }, style: { opacity: 1 - Math.abs(currentStep - progress) }, key: currentStep }, curr),
+            next && (jsx("div", { sx: {
+                    variant: `styles.waves.${variant}.StickerStep`,
+                }, style: { opacity: Math.max(0, progress - currentStep) }, key: currentStep + 1 }, next)))));
+};
+export class Wave extends React.PureComponent {
+    constructor() {
+        super(...arguments);
+        this.childrenToColumns = (children) => {
+            const items = React.Children.toArray(children);
+            const columns = this.toColumns(items);
+            return columns;
+        };
+    }
+    render() {
+        return jsx(BaseWave, Object.assign({ columnComponents: [Sticker, Scroller], childrenToStepColumns: this.childrenToColumns }, this.props));
+    }
+}

package/index.d.ts

@@ -0,0 +1,3 @@
+export * from './shell';
+export * from './components';
+export { default as defaultTheme } from './theme';

package/index.js

@@ -0,0 +1,3 @@
+export * from './shell';
+export * from './components';
+export { default as defaultTheme } from './theme';

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@enhanced-dom/slides",
+  "version": "0.0.2",
+  "description": "Basic building blocks for html slides",
+  "keywords": [],
+  "repository": "https://github.com/enhanced-dom/slides.git",
+  "license": "MIT",
+  "author": "CD9B4A105290E17E0948E021DF4105107C88693C59C0B891CCC08366C51AEA990902A6A156AC87D88A2FC41422A5E1C3C4071F251F19441C4516000EC25F87DF",
+  "main": "index.js",
+  "scripts": {
+    "package": "cd dist && npm pack",
+    "prebuild": "rimraf dist/*",
+    "build": "tsc -p ./tsconfig.json",
+    "postbuild": "copyfiles package.json LICENSE.md README.md dist && copyfiles -u 1 src/**/*.scss* dist",
+    "lint": "eslint src/** --fix --config eslint.config.js"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.4.0",
+    "@enhanced-dom/fontawesome": "^0.0.2",
+    "@enhanced-dom/icon": "^0.0.2",
+    "@enhanced-dom/react": "^0.0.2",
+    "@fontsource/montserrat": "^4.4.5",
+    "@fortawesome/free-regular-svg-icons": "^5.15.3",
+    "@fortawesome/free-solid-svg-icons": "^5.15.3",
+    "@theme-ui/typography": "^0.10.0",
+    "deepmerge": "^4.2.2",
+    "gatsby-theme-blog": "^3.0.0",
+    "gatsby-theme-waves": "^0.1.6",
+    "lodash.pick": "^4.4.0",
+    "react-card-flip": "^1.1.1",
+    "theme-ui": "^0.9.1",
+    "typography-theme-wordpress-2016": "^0.16.19"
+  },
+  "devDependencies": {
+    "@enhanced-dom/lint": "^0.0.3",
+    "@types/lodash.pick": "^4.4.6",
+    "@types/react": "^17.0.8",
+    "@types/react-dom": "^17.0.5",
+    "copyfiles": "2.4.1",
+    "rimraf": "3.0.2",
+    "typescript": "4.2.2"
+  },
+  "engines": {
+    "node": ">=14.17.0",
+    "npm": ">=8.0.0"
+  }
+}

package/shell/header.component.d.ts

@@ -0,0 +1,7 @@
+/** @jsx jsx */
+import { jsx } from 'theme-ui';
+export declare const ShellHeader: ({ title, author, date }: {
+    title: string;
+    author: string;
+    date: string;
+}) => jsx.JSX.Element;

package/shell/header.component.js

@@ -0,0 +1,24 @@
+/** @jsx jsx */
+import { Themed, jsx } from 'theme-ui';
+import { SizeVariableNames, ColorVariableNames } from '../theme';
+export const ShellHeader = ({ title, author, date }) => {
+    return (jsx("div", { sx: { position: 'relative' } },
+        jsx("div", { sx: {
+                position: ['static', 'absolute'],
+                width: '100%',
+                height: ['auto', '100%'],
+                right: ['auto', SizeVariableNames.FULL_CONTENT_WIDTH],
+                color: ['text', ColorVariableNames.LIGHT_TEXT],
+            } },
+            jsx("div", { sx: {
+                    float: ['none', 'right'],
+                    display: ['block', 'inline-block'],
+                    textAlign: ['left', 'right'],
+                } },
+                jsx(Themed.h1, { sx: { paddingBottom: '80px' } }, title))),
+        jsx("div", null,
+            jsx(Themed.p, { sx: { paddingTop: 1 } },
+                jsx(Themed.a, { href: "/", sx: { textDecoration: 'none', color: 'inherit', border: 'none' } }, author),
+                jsx("br", null),
+                jsx("span", { sx: { fontSize: 1 } }, date)))));
+};

package/shell/index.d.ts

@@ -0,0 +1 @@
+export * from './shell.component';

package/shell/index.js

@@ -0,0 +1 @@
+export * from './shell.component';

package/shell/scroll-top/icon.component.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { IconWebComponent, IIconConfig } from '@enhanced-dom/icon';
+import { IconDefinition } from '@fortawesome/fontawesome-common-types';
+declare type IconConfigType = IIconConfig<IconDefinition>;
+declare interface IconAttributes extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<IconWebComponent>, IconWebComponent>, 'class' | 'style'> {
+    className?: string;
+    style?: React.CSSProperties;
+    config: IconConfigType;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            ['enhanced-dom-icon']: IconAttributes;
+        }
+    }
+}
+export declare const Icon: import("react").ComponentType<IconAttributes> & {
+    renderer: import("@enhanced-dom/icon").MultiIconRenderer;
+} & Record<string, AnalyserNode>;
+export {};

package/shell/scroll-top/icon.component.js

@@ -0,0 +1,8 @@
+import { withReactAdapter } from '@enhanced-dom/react';
+import { IconWebComponent } from '@enhanced-dom/icon';
+import { FontawesomeIconRenderer } from '@enhanced-dom/fontawesome';
+IconWebComponent.addIconInterpreter('fa5', new FontawesomeIconRenderer());
+export const Icon = withReactAdapter({
+    type: IconWebComponent,
+    name: 'enhanced-dom-icon',
+});

package/shell/scroll-top/index.d.ts

@@ -0,0 +1 @@
+export * from './scroll-top.component';

package/shell/scroll-top/index.js

@@ -0,0 +1 @@
+export * from './scroll-top.component';

package/shell/scroll-top/scroll-top.component.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ScrollTop: React.FunctionComponent;

package/shell/scroll-top/scroll-top.component.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import ReactCardFlip from 'react-card-flip';
+import { faArrowAltCircleUp } from '@fortawesome/free-regular-svg-icons';
+import * as styles from './scroll-top.style.scss';
+import { Icon } from './icon.component';
+const getBodyScroll = () => {
+    return document.body.scrollTop !== 0 || document.documentElement.scrollTop !== 0;
+};
+const scrollToTop = () => {
+    if (getBodyScroll()) {
+        window.scrollBy(0, -50);
+        requestAnimationFrame(scrollToTop);
+    }
+};
+export const ScrollTop = ({ children }) => {
+    const [isFlipped, setFlipped] = React.useState(false);
+    const showButton = () => {
+        if (getBodyScroll()) {
+            setFlipped(true);
+        }
+    };
+    const showFront = () => {
+        setFlipped(false);
+    };
+    const buttonContents = children ? (React.createElement(ReactCardFlip, { isFlipped: isFlipped, flipDirection: "horizontal" },
+        React.createElement("div", null, children),
+        React.createElement("div", { className: styles.brandingBack },
+            React.createElement(Icon, { config: { ...faArrowAltCircleUp, namespace: 'fa5' } })))) : (React.createElement("div", { className: styles.brandingBack },
+        React.createElement(Icon, { config: { ...faArrowAltCircleUp, namespace: 'fa5' } })));
+    return (React.createElement("div", { className: styles.branding, tabIndex: 0, role: "button", onClick: scrollToTop, onFocus: showButton, onBlur: showFront, onMouseEnter: showButton, onMouseLeave: showFront }, buttonContents));
+};

package/shell/scroll-top/scroll-top.style.scss

@@ -0,0 +1,26 @@
+.branding {
+    width: 3rem;
+    height: 3rem;
+    position: fixed;
+    bottom: 2.5rem;
+    right: 2.5rem;
+    z-index: 1;
+    outline-color: #e2001a;
+    color: #e2001a;
+
+    > div {
+        height: 100%;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+    }
+    
+    &-back {
+        background-color: transparent;
+        font-size: 2rem;
+        color: #e2001a;
+        cursor: pointer;
+    }
+    
+}

package/shell/scroll-top/scroll-top.style.scss.d.ts

@@ -0,0 +1,2 @@
+export const branding: string;
+export const brandingBack: string;

package/shell/shell.component.d.ts

@@ -0,0 +1,16 @@
+/** @jsx jsx */
+/** @jsxFrag React.Fragment */
+import { Theme } from 'theme-ui';
+import React from 'react';
+import { ShellHeader } from './header.component';
+declare const BrandingSlot: ({ children }: {
+    children: any;
+}) => any;
+declare const ContentsSlot: React.FC<React.ComponentProps<typeof ShellHeader>>;
+export declare const Shell: React.FC<{
+    theme?: Theme;
+}> & {
+    Branding: typeof BrandingSlot;
+    Contents: typeof ContentsSlot;
+};
+export {};

package/shell/shell.component.js

@@ -0,0 +1,51 @@
+/** @jsx jsx */
+/** @jsxFrag React.Fragment */
+import { jsx, Themed, ThemeProvider } from 'theme-ui';
+import { Global } from '@emotion/react';
+import React from 'react';
+import defaultTheme, { ColorVariableNames, SizeVariableNames } from '../theme';
+import { ShellHeader } from './header.component';
+import { ScrollTop } from './scroll-top';
+const BrandingSlot = ({ children }) => {
+    return children || null;
+};
+const ContentsSlot = ({ children, ...rest }) => {
+    return (jsx(React.Fragment, null,
+        jsx(ShellHeader, Object.assign({}, rest)),
+        children || null));
+};
+const getBranding = (children) => React.Children.toArray(children).find((item) => { var _a; return ((_a = item) === null || _a === void 0 ? void 0 : _a.type) === BrandingSlot; });
+const getContents = (children) => React.Children.toArray(children).find((item) => { var _a; return ((_a = item) === null || _a === void 0 ? void 0 : _a.type) === ContentsSlot; });
+export const Shell = ({ children, theme, }) => {
+    const branding = getBranding(children);
+    const contents = getContents(children);
+    return (jsx(ThemeProvider, { theme: theme },
+        jsx(Themed.root, { sx: {
+                display: 'flex',
+                width: '100vw',
+            } },
+            jsx(Global, { styles: {
+                    body: { margin: 0, overflowX: 'hidden' },
+                } }),
+            jsx("aside", { sx: {
+                    bg: ColorVariableNames.DARK_BACKGROUND,
+                    color: ColorVariableNames.LIGHT_TEXT,
+                    width: [0, '40vw'],
+                    minHeight: '100vh',
+                } }),
+            jsx("div", { sx: { bg: ColorVariableNames.BACKGROUND, color: ColorVariableNames.TEXT, width: ['100vw', '60vw'] } },
+                jsx("main", { sx: {
+                        py: [5, SizeVariableNames.TOP_MARGIN],
+                        pl: [0, SizeVariableNames.INNER_MARGIN],
+                        width: [SizeVariableNames.CONTENT, SizeVariableNames.CONTENT],
+                        maxWidth: ['80%', 'none'],
+                        mx: ['auto', 0],
+                    } },
+                    contents,
+                    branding ? jsx(ScrollTop, null, branding) : null)))));
+};
+Shell.defaultProps = {
+    theme: defaultTheme,
+};
+Shell.Branding = BrandingSlot;
+Shell.Contents = ContentsSlot;

package/theme.d.ts

@@ -0,0 +1,49 @@
+import '@fontsource/montserrat';
+export declare enum ColorVariableNames {
+    BACKGROUND = "background",
+    TEXT = "text",
+    DARK_BACKGROUND = "darkBackground",
+    LIGHT_TEXT = "lightText",
+    HIGHLIGHT = "highlight",
+    MUTED = "muted",
+    LIGHTER_BLUE = "lighterBlue",
+    LIGHT_BLUE = "lightBlue",
+    HEADING = "heading"
+}
+export declare enum SizeVariableNames {
+    CONTENT = "content",
+    INNER_MARGIN = "innerMargin",
+    CENTRAL_GAP = "centralGap",
+    TOP_MARGIN = "topMargin",
+    FULL_CONTENT = "fullContent",
+    FULL_CONTENT_WIDTH = "fullContentWidth"
+}
+export declare enum FontVariableNames {
+    BODY = "body",
+    MONOSPACE = "monospace"
+}
+export declare const variables: {
+    colors: {
+        background: string;
+        text: string;
+        darkBackground: string;
+        lightText: string;
+        muted: string;
+        lighterBlue: string;
+        heading: string;
+        lightBlue: string;
+    };
+    sizes: {
+        content: number;
+        innerMargin: number;
+        topMargin: number;
+        centralGap: number;
+        fullContentWidth: number;
+    };
+    fonts: {
+        body: string;
+        monospace: string;
+    };
+};
+declare const theme: any;
+export default theme;

package/theme.js

@@ -0,0 +1,234 @@
+import { toTheme } from '@theme-ui/typography';
+import typography from 'typography-theme-wordpress-2016';
+import merge from 'deepmerge';
+import '@fontsource/montserrat';
+import pick from 'lodash.pick';
+// @ts-nocheck
+import blogTheme from 'gatsby-theme-blog/src/gatsby-plugin-theme-ui/components';
+const typographyTheme = toTheme(typography);
+export var ColorVariableNames;
+(function (ColorVariableNames) {
+    ColorVariableNames["BACKGROUND"] = "background";
+    ColorVariableNames["TEXT"] = "text";
+    ColorVariableNames["DARK_BACKGROUND"] = "darkBackground";
+    ColorVariableNames["LIGHT_TEXT"] = "lightText";
+    ColorVariableNames["HIGHLIGHT"] = "highlight";
+    ColorVariableNames["MUTED"] = "muted";
+    ColorVariableNames["LIGHTER_BLUE"] = "lighterBlue";
+    ColorVariableNames["LIGHT_BLUE"] = "lightBlue";
+    ColorVariableNames["HEADING"] = "heading";
+})(ColorVariableNames || (ColorVariableNames = {}));
+export var SizeVariableNames;
+(function (SizeVariableNames) {
+    SizeVariableNames["CONTENT"] = "content";
+    SizeVariableNames["INNER_MARGIN"] = "innerMargin";
+    SizeVariableNames["CENTRAL_GAP"] = "centralGap";
+    SizeVariableNames["TOP_MARGIN"] = "topMargin";
+    SizeVariableNames["FULL_CONTENT"] = "fullContent";
+    SizeVariableNames["FULL_CONTENT_WIDTH"] = "fullContentWidth";
+})(SizeVariableNames || (SizeVariableNames = {}));
+export var FontVariableNames;
+(function (FontVariableNames) {
+    FontVariableNames["BODY"] = "body";
+    FontVariableNames["MONOSPACE"] = "monospace";
+})(FontVariableNames || (FontVariableNames = {}));
+export const variables = {
+    colors: {
+        [ColorVariableNames.BACKGROUND]: '#f1f5f8',
+        [ColorVariableNames.TEXT]: '#3D4851',
+        [ColorVariableNames.DARK_BACKGROUND]: '#3D4851',
+        [ColorVariableNames.LIGHT_TEXT]: 'white',
+        [ColorVariableNames.MUTED]: '#3D4851',
+        [ColorVariableNames.LIGHTER_BLUE]: '#ebfcf6',
+        [ColorVariableNames.HEADING]: '#e2001a',
+        [ColorVariableNames.LIGHT_BLUE]: '#aaf6d9',
+    },
+    sizes: {
+        [SizeVariableNames.CONTENT]: 420,
+        [SizeVariableNames.INNER_MARGIN]: 85,
+        [SizeVariableNames.TOP_MARGIN]: 256,
+        [SizeVariableNames.CENTRAL_GAP]: 85 * 2,
+        [SizeVariableNames.FULL_CONTENT_WIDTH]: 85 * 2 + 420,
+    },
+    fonts: {
+        [FontVariableNames.BODY]: 'Montserrat, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, sans-serif',
+        [FontVariableNames.MONOSPACE]: `Consolas, Menlo, Monaco, source-code-pro, Courier New, monospace`,
+    },
+};
+const theme = merge.all([
+    blogTheme,
+    typographyTheme,
+    {
+        colors: variables.colors,
+        space: {
+            ...typographyTheme.space,
+            ...pick(variables.sizes, [
+                SizeVariableNames.INNER_MARGIN,
+                SizeVariableNames.TOP_MARGIN,
+                SizeVariableNames.FULL_CONTENT_WIDTH,
+                SizeVariableNames.CENTRAL_GAP,
+            ]),
+        },
+        sizes: pick(variables.sizes, [SizeVariableNames.CONTENT]),
+        fonts: variables.fonts,
+        styles: {
+            root: {
+                fontFamily: FontVariableNames.BODY,
+            },
+            a: {
+                color: 'inherit',
+                textDecoration: 'none',
+                borderBottom: '1px solid',
+                borderColor: ColorVariableNames.MUTED,
+            },
+            li: {
+                marginBottom: '4px',
+                code: {
+                    fontSize: `inherit`,
+                },
+            },
+            pre: {
+                variant: `prism`,
+                fontFamily: FontVariableNames.MONOSPACE,
+                tabSize: 2,
+                hyphens: `none`,
+                overflow: `auto`,
+                borderRadius: 10,
+                p: 0,
+                pl: 2,
+                color: ColorVariableNames.TEXT,
+                backgroundColor: ColorVariableNames.BACKGROUND,
+                marginBottom: '28px',
+                whiteSpace: 'pre-wrap',
+            },
+            code: {
+                fontFamily: FontVariableNames.MONOSPACE,
+                fontSize: `inherit`,
+            },
+            h1: {
+                fontStyle: 'italic',
+                color: ColorVariableNames.HEADING,
+            },
+            h2: {
+                marginTop: '60px',
+                fontStyle: 'italic',
+            },
+            h3: {
+                marginTop: '4px',
+            },
+            inlineCode: {
+                borderRadius: `0.3em`,
+                paddingTop: `0.15em`,
+                paddingBottom: `0.05em`,
+                paddingX: `0.2em`,
+            },
+            hr: {
+                borderColor: ColorVariableNames.MUTED,
+            },
+            p: {
+                marginBottom: '20px',
+                marginTop: '20px',
+                code: {
+                    fontSize: `inherit`,
+                },
+            },
+            blockquote: {
+                color: `inherit`,
+                borderLeftColor: `inherit`,
+                opacity: 0.8,
+                '&.translation': {
+                    fontSize: `1em`,
+                },
+            },
+            waves: {
+                default: {
+                    Wave: {
+                        width: ['100%', variables.sizes[SizeVariableNames.CONTENT] * 2 + variables.sizes[SizeVariableNames.CENTRAL_GAP]],
+                        // marginTop: "40px",
+                        marginLeft: [0, -(variables.sizes[SizeVariableNames.CONTENT] + variables.sizes[SizeVariableNames.CENTRAL_GAP])],
+                        marginBottom: '28px',
+                        position: 'relative',
+                        display: ['block', 'flex'],
+                    },
+                    ScrollerContainer: {
+                        paddingTop: ['80px', 0],
+                        width: ['auto', SizeVariableNames.CONTENT],
+                        marginLeft: [0, SizeVariableNames.CENTRAL_GAP],
+                    },
+                    ScrollerStep: {
+                        position: 'relative',
+                        padding: 0,
+                        minHeight: '400px',
+                        display: 'flex',
+                        alignItems: 'center',
+                        borderLeft: 0,
+                    },
+                    ScrollerProgress: {
+                        backgroundColor: ColorVariableNames.MUTED,
+                        borderRadius: '3px',
+                        position: 'absolute',
+                        left: '-24px',
+                    },
+                    StickerContainer: {
+                        width: ['100vw', SizeVariableNames.CONTENT],
+                        marginLeft: ['calc(50% - 50vw)', 0],
+                        position: ['sticky', 'static'],
+                        top: [0, 'auto'],
+                        zIndex: [1, 'auto'],
+                        height: ['50vh', 'auto'],
+                        paddingRight: [0, SizeVariableNames.INNER_MARGIN],
+                        backgroundColor: ColorVariableNames.DARK_BACKGROUND,
+                        color: ColorVariableNames.LIGHT_TEXT,
+                    },
+                    Sticker: {
+                        position: ['static', 'sticky'],
+                        width: '100%',
+                        height: ['100%', '80vh'],
+                        maxHeight: ['100%', '80vh'],
+                        top: ['auto', '2rem'],
+                        marginLeft: [0, variables.sizes.innerMargin],
+                    },
+                    StickerStep: {
+                        position: 'absolute',
+                        height: '100%',
+                        width: '100%',
+                        display: 'flex',
+                        justifyContent: 'center',
+                    },
+                    // this is used to select the active scroller step
+                    // 0.5 selects the step that is at half the screen height
+                    // 0.7 the step that is at 70% the screen height
+                    focus: [0.7, 0.5],
+                },
+            },
+            CodeSurfer: {
+                pre: {
+                    color: ColorVariableNames.LIGHT_TEXT,
+                    backgroundColor: ColorVariableNames.DARK_BACKGROUND,
+                },
+                code: {
+                    color: ColorVariableNames.LIGHT_TEXT,
+                    backgroundColor: ColorVariableNames.DARK_BACKGROUND,
+                },
+                tokens: {
+                    'comment cdata doctype': {
+                        fontStyle: 'italic',
+                    },
+                    'builtin changed keyword punctuation operator tag deleted string attr-value char number inserted': {
+                        color: ColorVariableNames.LIGHT_BLUE,
+                    },
+                },
+            },
+        },
+    },
+]);
+theme.breakpoints = ['1000px'];
+theme.prism = {
+    '.builtin, .changed, .keyword, .punctuation, .operator, .tag, .deleted, .string, .attr-value, .char, .number, .inserted': {
+        color: '#0f8f5e',
+    },
+    '.comment, .cdata, .doctype': {
+        fontStyle: 'italic',
+    },
+};
+export default theme;