@redocly/theme 0.1.10 → 0.1.13

package/src/mocks/Link.tsx

@@ -1,7 +1,10 @@
-import * as React from 'react';
+import React from 'react';
+import { omit } from 'lodash';
 
 // TODO: use real typings here
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export function Link(props: any): JSX.Element {
-  return <a href={props.to} {...props} />;
+  // We omit "active" property to avoid "Warning: Received `false` for a non-boolean attribute `active`."
+  const filteredProps = omit(props, ['active', 'httpVerb', 'hasActiveSubItem']);
+  return <a href={filteredProps.to} {...filteredProps} />;
 }

package/src/mocks/hooks/usePageData.ts

@@ -4,5 +4,8 @@ export function usePageData(): {
   prevPage: ResolvedNavLinkItem | null;
   nextPage: ResolvedNavLinkItem | null;
 } {
-  return { prevPage: null, nextPage: null };
+  return {
+    prevPage: { label: 'Intro', type: 'link', link: '#prev' },
+    nextPage: { label: 'FAQ', type: 'link', link: '#next' },
+  };
 }

package/src/ui/Typography.tsx

@@ -1,86 +1,7 @@
-import styled, { css, SimpleInterpolation } from 'styled-components';
+import styled from 'styled-components';
 import { color, typography as typographySystem, ColorProps, TypographyProps } from 'styled-system';
 
-export interface ITypography {
-  fontSize?: string;
-  fontWeight?: string | number;
-  fontFamily?: string;
-  lineHeight?: string;
-  color?: string;
-  transform?: string;
-  marginTop?: string;
-  marginRight?: string;
-  marginLeft?: string;
-  marginBottom?: string;
-  marginVertical?: string;
-  marginHorizontal?: string;
-}
-
-export const typographyTokens = {
-  typography: {
-    fontSize: 'var(--font-size-base)',
-    fontFamily: 'var(--h-font-family)',
-    lineHeight: 'var(--line-height-base)',
-  },
-  heading1: {
-    fontSize: 'var(--h1-font-size)',
-    fontFamily: 'var(--h-font-family)',
-    fontWeight: 'var(--font-weight-bold)',
-    lineHeight: 'var(--h1-line-height)',
-    color: 'var(--color-content)',
-    marginTop: 'var(--h1-margin-top)',
-    marginBottom: 'var(--h1-margin-bottom)',
-  },
-  heading2: {
-    fontSize: 'var(--h2-font-size)',
-    fontFamily: 'var(--h-font-family)',
-    fontWeight: 'var(--font-weight-bold)',
-    lineHeight: 'var(--h2-line-height)',
-    color: 'var(--color-content)',
-    marginTop: 'var(--h2-margin-top)',
-    marginBottom: 'var(--h2-margin-bottom)',
-  },
-  heading3: {
-    fontSize: 'var(--h3-font-size)',
-    fontFamily: 'var(--h-font-family)',
-    fontWeight: 'var(--font-weight-bold)',
-    lineHeight: 'var(--h3-line-height)',
-    color: 'var(--color-content)',
-    marginTop: 'var(--h3-margin-top)',
-    marginBottom: 'var(--h3-margin-bottom)',
-  },
-  heading4: {},
-  heading5: {},
-  heading6: {},
-  blockquote: {
-    color: 'var(--color-content)',
-  },
-  alert: {
-    fontSize: 'var(--admonition-font-size)',
-    fontWeight: 'var(--admonition-font-weight)',
-    lineHeight: 'var(--admonition-line-height)',
-    marginTop: 'var(--admonition-margin-vertical)',
-    marginBottom: 'var(--admonition-margin-vertical)',
-    heading: {
-      fontSize: 'var(--admonition-heading-font-size)',
-      fontWeight: 'var(--admonition-heading-font-weight)',
-      lineHeight: 'var(--admonition-line-height)',
-      transform: 'var(--admonition-heading-transform)',
-    },
-  },
-};
-
-export function typography(theme?: ITypography): string | SimpleInterpolation {
-  if (!theme) return '';
-  return css`
-    font-size: ${theme.fontSize || ''};
-    font-weight: ${theme.fontWeight || ''};
-    font-family: ${theme.fontFamily || ''};
-    line-height: ${theme.lineHeight || ''};
-    color: ${theme.color || ''};
-    text-transform: ${theme.transform || ''};
-  `;
-}
+import { typography } from '@theme/utils';
 
 type HeadingProps = TypographyProps &
   ColorProps & {
@@ -97,7 +18,7 @@ export const Emphasis = styled.strong.attrs(() => ({
 export const H1 = styled.h1.attrs(() => ({
   'data-component-name': 'ui/Typography/H1',
 }))<HeadingProps>`
-  ${typography(typographyTokens.heading1)};
+  ${typography('h1', 'h')};
   margin: 1.35em 0 0.9em;
   && {
     ${({ mt }) => mt && `margin-top: ${mt};`}
@@ -107,10 +28,10 @@ export const H1 = styled.h1.attrs(() => ({
   }
 `;
 
-export const H2 = styled.h1.attrs(() => ({
+export const H2 = styled.h2.attrs(() => ({
   'data-component-name': 'ui/Typography/H2',
 }))<HeadingProps>`
-  ${typography(typographyTokens.heading2)};
+  ${typography('h2', 'h')};
   margin: 1.25em 0 0.8em;
   && {
     ${({ mt }) => mt && `margin-top: ${mt};`}
@@ -120,10 +41,10 @@ export const H2 = styled.h1.attrs(() => ({
   }
 `;
 
-export const H3 = styled.h1.attrs(() => ({
+export const H3 = styled.h3.attrs(() => ({
   'data-component-name': 'ui/Typography/H3',
 }))<HeadingProps>`
-  ${typography(typographyTokens.heading3)};
+  ${typography('h3', 'h')};
   margin: 1.25em 0 0.8em;
   && {
     ${({ mt }) => mt && `margin-top: ${mt};`}
@@ -139,7 +60,7 @@ export const SectionHeader = styled.h2`
   font-weight: var(--font-weight-regular);
   text-align: center;
   margin: 2.65em 0;
-  padding: 0px 20px;
+  padding: 0 20px;
   font-family: var(--h-font-family);
 `;
 
@@ -152,9 +73,11 @@ export const Typography = styled.p.attrs(() => ({
     mb?: string;
   }
 >`
-  ${typography(typographyTokens.typography)};
+  font-size: var(--font-size-base);
+  font-family: var(--font-family-base);
+  line-height: var(--line-height-base);
   color: var(--color-content);
-  ${color}
+  ${color};
   margin-top: ${({ mt }) => mt || '1em'};
   margin-bottom: ${({ mb }) => mb || '1em'};
   ${typographySystem}

package/src/ui/UniversalLink.tsx

@@ -3,7 +3,6 @@ import { useLocation, LinkProps } from 'react-router-dom';
 import styled from 'styled-components';
 
 import { isUrl } from '@theme/utils/isUrl';
-import { replaceHashInColor } from '@theme/utils/replaceHashInColor';
 import { Link } from '@portal/Link';
 
 const StyledExternalLink = styled.a`
@@ -14,15 +13,11 @@ const StyledExternalLink = styled.a`
       content: '';
       display: inline-block;
       position: absolute;
-      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' x='0' y='0' viewBox='0 0 100 125' enable-background='new 0 0 100 100' xml:space='preserve'%3E%3Cpath fill='${({
-        theme,
-      }) =>
-        replaceHashInColor(
-          theme.colors.text.primary,
-        )}' d='M-408.2-318.5 98.6 4.8c0-0.1 0-0.2-0.1-0.3 0-0.1-0.1-0.2-0.1-0.3 0-0.1 0-0.1-0.1-0.2 0 0 0-0.1 0-0.1 0-0.1-0.1-0.2-0.2-0.3 0-0.1-0.1-0.2-0.2-0.3 -0.1-0.1-0.1-0.2-0.2-0.3C97.7 2.9 97.6 2.8 97.5 2.7c-0.1-0.1-0.2-0.2-0.3-0.3 -0.1-0.1-0.1-0.1-0.2-0.2 -0.1-0.1-0.2-0.2-0.3-0.2 -0.1-0.1-0.2-0.1-0.2-0.2 -0.1-0.1-0.2-0.1-0.3-0.2 -0.1 0-0.2-0.1-0.3-0.1 0 0-0.1 0-0.1-0.1 -0.1 0-0.2 0-0.2-0.1 -0.1 0-0.2-0.1-0.3-0.1 -0.1 0-0.2-0.1-0.4-0.1 -0.1 0-0.2 0-0.3 0 -0.1 0-0.3 0-0.4 0 -0.1 0-0.1 0-0.2 0L63.8 1.3c-2.5 0-4.6 2.1-4.6 4.6 0 2.5 2.1 4.6 4.6 4.5l19.3-0.1 -29.8 30.2c-1.1 1.1-1.5 2.7-1.2 4.1 0.2 0.9 0.6 1.7 1.3 2.4 0.9 0.9 2.1 1.3 3.2 1.3 1.2 0 2.3-0.5 3.2-1.4l0 0 29.8-30.2 0.1 19.3c0 2.5 2.1 4.6 4.6 4.5 1.3 0 2.4-0.5 3.2-1.4 0.8-0.8 1.3-2 1.3-3.2L98.7 5.7c0-0.1 0-0.1 0-0.2 0-0.1 0-0.2 0-0.4C98.6 5 98.6 4.9 98.6 4.8zM6.5 83.3c0 5.7 4.6 10.4 10.4 10.4l55.6 0.1c5.7 0 10.4-4.6 10.4-10.4l-0.1-40.8h6.1v40.8c0 9-7.3 16.3-16.3 16.3l-56.4-0.1c-8.6 0-15.6-7-15.6-15.6L0.6 27.8c0-9 7.3-16.3 16.3-16.3l41.1-0.1v6.1L17 17.5c-5.7 0-10.4 4.6-10.4 10.4L6.5 83.3z'/%3E%3C/svg%3E");
+      background: var(--color-content);
+      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' x='0' y='0' viewBox='0 0 100 125' enable-background='new 0 0 100 100' xml:space='preserve'%3E%3Cpath d='M-408.2-318.5 98.6 4.8c0-0.1 0-0.2-0.1-0.3 0-0.1-0.1-0.2-0.1-0.3 0-0.1 0-0.1-0.1-0.2 0 0 0-0.1 0-0.1 0-0.1-0.1-0.2-0.2-0.3 0-0.1-0.1-0.2-0.2-0.3 -0.1-0.1-0.1-0.2-0.2-0.3C97.7 2.9 97.6 2.8 97.5 2.7c-0.1-0.1-0.2-0.2-0.3-0.3 -0.1-0.1-0.1-0.1-0.2-0.2 -0.1-0.1-0.2-0.2-0.3-0.2 -0.1-0.1-0.2-0.1-0.2-0.2 -0.1-0.1-0.2-0.1-0.3-0.2 -0.1 0-0.2-0.1-0.3-0.1 0 0-0.1 0-0.1-0.1 -0.1 0-0.2 0-0.2-0.1 -0.1 0-0.2-0.1-0.3-0.1 -0.1 0-0.2-0.1-0.4-0.1 -0.1 0-0.2 0-0.3 0 -0.1 0-0.3 0-0.4 0 -0.1 0-0.1 0-0.2 0L63.8 1.3c-2.5 0-4.6 2.1-4.6 4.6 0 2.5 2.1 4.6 4.6 4.5l19.3-0.1 -29.8 30.2c-1.1 1.1-1.5 2.7-1.2 4.1 0.2 0.9 0.6 1.7 1.3 2.4 0.9 0.9 2.1 1.3 3.2 1.3 1.2 0 2.3-0.5 3.2-1.4l0 0 29.8-30.2 0.1 19.3c0 2.5 2.1 4.6 4.6 4.5 1.3 0 2.4-0.5 3.2-1.4 0.8-0.8 1.3-2 1.3-3.2L98.7 5.7c0-0.1 0-0.1 0-0.2 0-0.1 0-0.2 0-0.4C98.6 5 98.6 4.9 98.6 4.8zM6.5 83.3c0 5.7 4.6 10.4 10.4 10.4l55.6 0.1c5.7 0 10.4-4.6 10.4-10.4l-0.1-40.8h6.1v40.8c0 9-7.3 16.3-16.3 16.3l-56.4-0.1c-8.6 0-15.6-7-15.6-15.6L0.6 27.8c0-9 7.3-16.3 16.3-16.3l41.1-0.1v6.1L17 17.5c-5.7 0-10.4 4.6-10.4 10.4L6.5 83.3z'/%3E%3C/svg%3E");
+      mask-repeat: no-repeat;
       width: 10px;
       height: 10px;
-      background-repeat: no-repeat;
       top: 50%;
       right: -15px;
       transform: translateY(-50%);

package/src/utils/ClipboardService.ts

@@ -1,92 +1,9 @@
 export class ClipboardService {
   static isSupported(): boolean {
-    return (
-      typeof document !== 'undefined' &&
-      !!document.queryCommandSupported &&
-      document.queryCommandSupported('copy')
-    );
+    return typeof navigator?.clipboard !== 'undefined';
   }
 
-  static selectElement(element: HTMLDivElement | null): void {
-    if (!element) {
-      return;
-    }
-    let range;
-    let selection;
-    if ((document.body as any).createTextRange) {
-      range = (document.body as any).createTextRange();
-      range.moveToElementText(element);
-      range.select();
-    } else if (document.createRange && window.getSelection) {
-      selection = window.getSelection();
-      range = document.createRange();
-      range.selectNodeContents(element);
-      selection?.removeAllRanges();
-      selection?.addRange(range);
-    }
-  }
-
-  static deselect(): void {
-    if ((document as any).selection) {
-      (document as any).selection.empty();
-    } else if (window.getSelection) {
-      const selection = window.getSelection();
-      if (selection) {
-        selection.removeAllRanges();
-      }
-    }
-  }
-
-  static copySelected(): boolean {
-    let result;
-    try {
-      result = document.execCommand('copy');
-    } catch (err) {
-      result = false;
-    }
-    return result;
-  }
-
-  static copyElement(element: HTMLDivElement | null): boolean {
-    ClipboardService.selectElement(element);
-    const res = ClipboardService.copySelected();
-    if (res) {
-      ClipboardService.deselect();
-    }
-    return res;
-  }
-
-  static copyCustom(text: string): boolean {
-    const textArea = document.createElement('textarea');
-    textArea.style.position = 'fixed';
-    textArea.style.top = '0';
-    textArea.style.left = '0';
-
-    // Ensure it has a small width and height. Setting to 1px / 1em
-    // doesn't work as this gives a negative w/h on some browsers.
-    textArea.style.width = '2em';
-    textArea.style.height = '2em';
-
-    // We don't need padding, reducing the size if it does flash render.
-    textArea.style.padding = '0';
-
-    // Clean up any borders.
-    textArea.style.border = 'none';
-    textArea.style.outline = 'none';
-    textArea.style.boxShadow = 'none';
-
-    // Avoid flash of white box if rendered for any reason.
-    textArea.style.background = 'transparent';
-
-    textArea.value = text;
-
-    document.body.appendChild(textArea);
-
-    textArea.select();
-
-    const res = ClipboardService.copySelected();
-
-    document.body.removeChild(textArea);
-    return res;
+  static copyCustom(text: string): Promise<void> {
+    return navigator.clipboard.writeText(text);
   }
 }

package/src/utils/isUrl.ts

@@ -12,16 +12,16 @@ const nonLocalhostDomainRE = /^[^\s.]+\.\S{2,}$/;
 /**
  * Loosely validate a URL `string`.
  *
- * @param {String} string
+ * @param {String} input
  * @return {Boolean}
  */
 
-export function isUrl(string: string): boolean {
-  if (typeof string !== 'string') {
+export function isUrl(input: unknown): boolean {
+  if (typeof input !== 'string') {
     return false;
   }
 
-  const match = string.match(protocolAndDomainRE);
+  const match = input.match(protocolAndDomainRE);
   if (!match) {
     return false;
   }

package/src/utils/theme-helpers.ts

@@ -1,6 +1,36 @@
 import type { FlattenSimpleInterpolation } from 'styled-components';
 import { css } from 'styled-components';
 
+enum Token {
+  Comment = 'comment',
+  Prolog = 'prolog',
+  Doctype = 'doctype',
+  Cdata = 'cdata',
+  Punctuation = 'punctuation',
+  property = 'property',
+  Tag = 'tag',
+  Number = 'number',
+  Constant = 'constant',
+  Symbol = 'symbol',
+  Boolean = 'boolean',
+  Selector = 'selector',
+  String = 'string',
+  Char = 'char',
+  Builtin = 'builtin',
+  Inserted = 'inserted',
+  Operator = 'operator',
+  Entity = 'entity',
+  Url = 'url',
+  Variable = 'variable',
+  Atrule = 'atrule',
+  Keyword = 'keyword',
+  Regex = 'regex',
+  Important = 'important',
+  Bold = 'bold',
+  Italic = 'italic',
+  Deleted = 'deleted',
+}
+
 const typographyProperties = Object.entries({
   fontSize: 'font-size',
   fontWeight: 'font-weight',
@@ -32,3 +62,19 @@ export function typography(
     ${getTypographyCssRulesByComponentName(componentName, fallbackName)}
   `;
 }
+
+export function generateCodeBlockTokens(): FlattenSimpleInterpolation | string {
+  let res = '';
+
+  for (const token of Object.values(Token)) {
+    const cssTokenColorVariableName = `--code-block-tokens-${token}-color`;
+    res += `.token.${token} { color: var(${cssTokenColorVariableName})}; }\n`;
+  }
+
+  return css`
+    pre& {
+      color: var(--code-block-tokens-default-color);
+    }
+    ${res}
+  `;
+}

package/ui/Typography.d.ts

@@ -1,73 +1,4 @@
-import { SimpleInterpolation } from 'styled-components';
 import { ColorProps, TypographyProps } from 'styled-system';
-export interface ITypography {
-    fontSize?: string;
-    fontWeight?: string | number;
-    fontFamily?: string;
-    lineHeight?: string;
-    color?: string;
-    transform?: string;
-    marginTop?: string;
-    marginRight?: string;
-    marginLeft?: string;
-    marginBottom?: string;
-    marginVertical?: string;
-    marginHorizontal?: string;
-}
-export declare const typographyTokens: {
-    typography: {
-        fontSize: string;
-        fontFamily: string;
-        lineHeight: string;
-    };
-    heading1: {
-        fontSize: string;
-        fontFamily: string;
-        fontWeight: string;
-        lineHeight: string;
-        color: string;
-        marginTop: string;
-        marginBottom: string;
-    };
-    heading2: {
-        fontSize: string;
-        fontFamily: string;
-        fontWeight: string;
-        lineHeight: string;
-        color: string;
-        marginTop: string;
-        marginBottom: string;
-    };
-    heading3: {
-        fontSize: string;
-        fontFamily: string;
-        fontWeight: string;
-        lineHeight: string;
-        color: string;
-        marginTop: string;
-        marginBottom: string;
-    };
-    heading4: {};
-    heading5: {};
-    heading6: {};
-    blockquote: {
-        color: string;
-    };
-    alert: {
-        fontSize: string;
-        fontWeight: string;
-        lineHeight: string;
-        marginTop: string;
-        marginBottom: string;
-        heading: {
-            fontSize: string;
-            fontWeight: string;
-            lineHeight: string;
-            transform: string;
-        };
-    };
-};
-export declare function typography(theme?: ITypography): string | SimpleInterpolation;
 export declare const Emphasis: import("styled-components").StyledComponent<"strong", any, {
     'data-component-name': string;
 }, "data-component-name">;
@@ -77,13 +8,13 @@ export declare const H1: import("styled-components").StyledComponent<"h1", any,
     mt?: string | undefined;
     mb?: string | undefined;
 }, "data-component-name">;
-export declare const H2: import("styled-components").StyledComponent<"h1", any, {
+export declare const H2: import("styled-components").StyledComponent<"h2", any, {
     'data-component-name': string;
 } & TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & {
     mt?: string | undefined;
     mb?: string | undefined;
 }, "data-component-name">;
-export declare const H3: import("styled-components").StyledComponent<"h1", any, {
+export declare const H3: import("styled-components").StyledComponent<"h3", any, {
     'data-component-name': string;
 } & TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & {
     mt?: string | undefined;

package/ui/Typography.js

@@ -3,126 +3,48 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CompactTypography = exports.Typography = exports.SectionHeader = exports.H3 = exports.H2 = exports.H1 = exports.Emphasis = exports.typography = exports.typographyTokens = void 0;
-var styled_components_1 = __importStar(require("styled-components"));
+exports.CompactTypography = exports.Typography = exports.SectionHeader = exports.H3 = exports.H2 = exports.H1 = exports.Emphasis = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
 var styled_system_1 = require("styled-system");
-exports.typographyTokens = {
-    typography: {
-        fontSize: 'var(--font-size-base)',
-        fontFamily: 'var(--h-font-family)',
-        lineHeight: 'var(--line-height-base)',
-    },
-    heading1: {
-        fontSize: 'var(--h1-font-size)',
-        fontFamily: 'var(--h-font-family)',
-        fontWeight: 'var(--font-weight-bold)',
-        lineHeight: 'var(--h1-line-height)',
-        color: 'var(--color-content)',
-        marginTop: 'var(--h1-margin-top)',
-        marginBottom: 'var(--h1-margin-bottom)',
-    },
-    heading2: {
-        fontSize: 'var(--h2-font-size)',
-        fontFamily: 'var(--h-font-family)',
-        fontWeight: 'var(--font-weight-bold)',
-        lineHeight: 'var(--h2-line-height)',
-        color: 'var(--color-content)',
-        marginTop: 'var(--h2-margin-top)',
-        marginBottom: 'var(--h2-margin-bottom)',
-    },
-    heading3: {
-        fontSize: 'var(--h3-font-size)',
-        fontFamily: 'var(--h-font-family)',
-        fontWeight: 'var(--font-weight-bold)',
-        lineHeight: 'var(--h3-line-height)',
-        color: 'var(--color-content)',
-        marginTop: 'var(--h3-margin-top)',
-        marginBottom: 'var(--h3-margin-bottom)',
-    },
-    heading4: {},
-    heading5: {},
-    heading6: {},
-    blockquote: {
-        color: 'var(--color-content)',
-    },
-    alert: {
-        fontSize: 'var(--admonition-font-size)',
-        fontWeight: 'var(--admonition-font-weight)',
-        lineHeight: 'var(--admonition-line-height)',
-        marginTop: 'var(--admonition-margin-vertical)',
-        marginBottom: 'var(--admonition-margin-vertical)',
-        heading: {
-            fontSize: 'var(--admonition-heading-font-size)',
-            fontWeight: 'var(--admonition-heading-font-weight)',
-            lineHeight: 'var(--admonition-line-height)',
-            transform: 'var(--admonition-heading-transform)',
-        },
-    },
-};
-function typography(theme) {
-    if (!theme)
-        return '';
-    return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-size: ", ";\n    font-weight: ", ";\n    font-family: ", ";\n    line-height: ", ";\n    color: ", ";\n    text-transform: ", ";\n  "], ["\n    font-size: ", ";\n    font-weight: ", ";\n    font-family: ", ";\n    line-height: ", ";\n    color: ", ";\n    text-transform: ", ";\n  "])), theme.fontSize || '', theme.fontWeight || '', theme.fontFamily || '', theme.lineHeight || '', theme.color || '', theme.transform || '');
-}
-exports.typography = typography;
+var utils_1 = require("../utils");
 exports.Emphasis = styled_components_1.default.strong.attrs(function () { return ({
     'data-component-name': 'ui/Typography/Emphasis',
-}); })(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-weight: var(--font-weight-bold);\n"], ["\n  font-weight: var(--font-weight-bold);\n"])));
+}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-weight: var(--font-weight-bold);\n"], ["\n  font-weight: var(--font-weight-bold);\n"])));
 exports.H1 = styled_components_1.default.h1.attrs(function () { return ({
     'data-component-name': 'ui/Typography/H1',
-}); })(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", ";\n  margin: 1.35em 0 0.9em;\n  && {\n    ", "\n    ", "\n    ", "\n    ", "\n  }\n"], ["\n  ", ";\n  margin: 1.35em 0 0.9em;\n  && {\n    ", "\n    ", "\n    ", "\n    ", "\n  }\n"])), typography(exports.typographyTokens.heading1), function (_a) {
+}); })(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", ";\n  margin: 1.35em 0 0.9em;\n  && {\n    ", "\n    ", "\n    ", "\n    ", "\n  }\n"], ["\n  ", ";\n  margin: 1.35em 0 0.9em;\n  && {\n    ", "\n    ", "\n    ", "\n    ", "\n  }\n"])), (0, utils_1.typography)('h1', 'h'), function (_a) {
     var mt = _a.mt;
     return mt && "margin-top: ".concat(mt, ";");
 }, function (_a) {
     var mb = _a.mb;
     return mb && "margin-bottom: ".concat(mb, ";");
 }, styled_system_1.color, styled_system_1.typography);
-exports.H2 = styled_components_1.default.h1.attrs(function () { return ({
+exports.H2 = styled_components_1.default.h2.attrs(function () { return ({
     'data-component-name': 'ui/Typography/H2',
-}); })(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", ";\n  margin: 1.25em 0 0.8em;\n  && {\n    ", "\n    ", "\n    ", "\n    ", "\n  }\n"], ["\n  ", ";\n  margin: 1.25em 0 0.8em;\n  && {\n    ", "\n    ", "\n    ", "\n    ", "\n  }\n"])), typography(exports.typographyTokens.heading2), function (_a) {
+}); })(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", ";\n  margin: 1.25em 0 0.8em;\n  && {\n    ", "\n    ", "\n    ", "\n    ", "\n  }\n"], ["\n  ", ";\n  margin: 1.25em 0 0.8em;\n  && {\n    ", "\n    ", "\n    ", "\n    ", "\n  }\n"])), (0, utils_1.typography)('h2', 'h'), function (_a) {
     var mt = _a.mt;
     return mt && "margin-top: ".concat(mt, ";");
 }, function (_a) {
     var mb = _a.mb;
     return mb && "margin-bottom: ".concat(mb, ";");
 }, styled_system_1.color, styled_system_1.typography);
-exports.H3 = styled_components_1.default.h1.attrs(function () { return ({
+exports.H3 = styled_components_1.default.h3.attrs(function () { return ({
     'data-component-name': 'ui/Typography/H3',
-}); })(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", ";\n  margin: 1.25em 0 0.8em;\n  && {\n    ", "\n    ", "\n    ", "\n    ", "\n  }\n"], ["\n  ", ";\n  margin: 1.25em 0 0.8em;\n  && {\n    ", "\n    ", "\n    ", "\n    ", "\n  }\n"])), typography(exports.typographyTokens.heading3), function (_a) {
+}); })(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", ";\n  margin: 1.25em 0 0.8em;\n  && {\n    ", "\n    ", "\n    ", "\n    ", "\n  }\n"], ["\n  ", ";\n  margin: 1.25em 0 0.8em;\n  && {\n    ", "\n    ", "\n    ", "\n    ", "\n  }\n"])), (0, utils_1.typography)('h3', 'h'), function (_a) {
     var mt = _a.mt;
     return mt && "margin-top: ".concat(mt, ";");
 }, function (_a) {
     var mb = _a.mb;
     return mb && "margin-bottom: ".concat(mb, ";");
 }, styled_system_1.color, styled_system_1.typography);
-exports.SectionHeader = styled_components_1.default.h2(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  color: var(--h-color);\n  font-size: 1.75em;\n  font-weight: var(--font-weight-regular);\n  text-align: center;\n  margin: 2.65em 0;\n  padding: 0px 20px;\n  font-family: var(--h-font-family);\n"], ["\n  color: var(--h-color);\n  font-size: 1.75em;\n  font-weight: var(--font-weight-regular);\n  text-align: center;\n  margin: 2.65em 0;\n  padding: 0px 20px;\n  font-family: var(--h-font-family);\n"])));
+exports.SectionHeader = styled_components_1.default.h2(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  color: var(--h-color);\n  font-size: 1.75em;\n  font-weight: var(--font-weight-regular);\n  text-align: center;\n  margin: 2.65em 0;\n  padding: 0 20px;\n  font-family: var(--h-font-family);\n"], ["\n  color: var(--h-color);\n  font-size: 1.75em;\n  font-weight: var(--font-weight-regular);\n  text-align: center;\n  margin: 2.65em 0;\n  padding: 0 20px;\n  font-family: var(--h-font-family);\n"])));
 exports.Typography = styled_components_1.default.p.attrs(function () { return ({
     'data-component-name': 'ui/Typography/Typography',
-}); })(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", ";\n  color: var(--color-content);\n  ", "\n  margin-top: ", ";\n  margin-bottom: ", ";\n  ", "\n"], ["\n  ", ";\n  color: var(--color-content);\n  ", "\n  margin-top: ", ";\n  margin-bottom: ", ";\n  ", "\n"])), typography(exports.typographyTokens.typography), styled_system_1.color, function (_a) {
+}); })(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  font-size: var(--font-size-base);\n  font-family: var(--font-family-base);\n  line-height: var(--line-height-base);\n  color: var(--color-content);\n  ", ";\n  margin-top: ", ";\n  margin-bottom: ", ";\n  ", "\n"], ["\n  font-size: var(--font-size-base);\n  font-family: var(--font-family-base);\n  line-height: var(--line-height-base);\n  color: var(--color-content);\n  ", ";\n  margin-top: ", ";\n  margin-bottom: ", ";\n  ", "\n"])), styled_system_1.color, function (_a) {
     var mt = _a.mt;
     return mt || '1em';
 }, function (_a) {
@@ -133,5 +55,5 @@ exports.CompactTypography = (0, styled_components_1.default)(exports.Typography)
     mt: '0em',
     mb: '0em',
     'data-component-name': 'ui/Typography/CompactTypography',
-}); })(templateObject_8 || (templateObject_8 = __makeTemplateObject([""], [""])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+}); })(templateObject_7 || (templateObject_7 = __makeTemplateObject([""], [""])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/ui/UniversalLink.js

@@ -23,12 +23,8 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var react_router_dom_1 = require("react-router-dom");
 var styled_components_1 = __importDefault(require("styled-components"));
 var isUrl_1 = require("../utils/isUrl");
-var replaceHashInColor_1 = require("../utils/replaceHashInColor");
 var Link_1 = require("../mocks/Link");
-var StyledExternalLink = styled_components_1.default.a(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  &.external-url {\n    position: relative;\n\n    :after {\n      content: '';\n      display: inline-block;\n      position: absolute;\n      background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' x='0' y='0' viewBox='0 0 100 125' enable-background='new 0 0 100 100' xml:space='preserve'%3E%3Cpath fill='", "' d='M-408.2-318.5 98.6 4.8c0-0.1 0-0.2-0.1-0.3 0-0.1-0.1-0.2-0.1-0.3 0-0.1 0-0.1-0.1-0.2 0 0 0-0.1 0-0.1 0-0.1-0.1-0.2-0.2-0.3 0-0.1-0.1-0.2-0.2-0.3 -0.1-0.1-0.1-0.2-0.2-0.3C97.7 2.9 97.6 2.8 97.5 2.7c-0.1-0.1-0.2-0.2-0.3-0.3 -0.1-0.1-0.1-0.1-0.2-0.2 -0.1-0.1-0.2-0.2-0.3-0.2 -0.1-0.1-0.2-0.1-0.2-0.2 -0.1-0.1-0.2-0.1-0.3-0.2 -0.1 0-0.2-0.1-0.3-0.1 0 0-0.1 0-0.1-0.1 -0.1 0-0.2 0-0.2-0.1 -0.1 0-0.2-0.1-0.3-0.1 -0.1 0-0.2-0.1-0.4-0.1 -0.1 0-0.2 0-0.3 0 -0.1 0-0.3 0-0.4 0 -0.1 0-0.1 0-0.2 0L63.8 1.3c-2.5 0-4.6 2.1-4.6 4.6 0 2.5 2.1 4.6 4.6 4.5l19.3-0.1 -29.8 30.2c-1.1 1.1-1.5 2.7-1.2 4.1 0.2 0.9 0.6 1.7 1.3 2.4 0.9 0.9 2.1 1.3 3.2 1.3 1.2 0 2.3-0.5 3.2-1.4l0 0 29.8-30.2 0.1 19.3c0 2.5 2.1 4.6 4.6 4.5 1.3 0 2.4-0.5 3.2-1.4 0.8-0.8 1.3-2 1.3-3.2L98.7 5.7c0-0.1 0-0.1 0-0.2 0-0.1 0-0.2 0-0.4C98.6 5 98.6 4.9 98.6 4.8zM6.5 83.3c0 5.7 4.6 10.4 10.4 10.4l55.6 0.1c5.7 0 10.4-4.6 10.4-10.4l-0.1-40.8h6.1v40.8c0 9-7.3 16.3-16.3 16.3l-56.4-0.1c-8.6 0-15.6-7-15.6-15.6L0.6 27.8c0-9 7.3-16.3 16.3-16.3l41.1-0.1v6.1L17 17.5c-5.7 0-10.4 4.6-10.4 10.4L6.5 83.3z'/%3E%3C/svg%3E\");\n      width: 10px;\n      height: 10px;\n      background-repeat: no-repeat;\n      top: 50%;\n      right: -15px;\n      transform: translateY(-50%);\n    }\n  }\n"], ["\n  &.external-url {\n    position: relative;\n\n    :after {\n      content: '';\n      display: inline-block;\n      position: absolute;\n      background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' x='0' y='0' viewBox='0 0 100 125' enable-background='new 0 0 100 100' xml:space='preserve'%3E%3Cpath fill='", "' d='M-408.2-318.5 98.6 4.8c0-0.1 0-0.2-0.1-0.3 0-0.1-0.1-0.2-0.1-0.3 0-0.1 0-0.1-0.1-0.2 0 0 0-0.1 0-0.1 0-0.1-0.1-0.2-0.2-0.3 0-0.1-0.1-0.2-0.2-0.3 -0.1-0.1-0.1-0.2-0.2-0.3C97.7 2.9 97.6 2.8 97.5 2.7c-0.1-0.1-0.2-0.2-0.3-0.3 -0.1-0.1-0.1-0.1-0.2-0.2 -0.1-0.1-0.2-0.2-0.3-0.2 -0.1-0.1-0.2-0.1-0.2-0.2 -0.1-0.1-0.2-0.1-0.3-0.2 -0.1 0-0.2-0.1-0.3-0.1 0 0-0.1 0-0.1-0.1 -0.1 0-0.2 0-0.2-0.1 -0.1 0-0.2-0.1-0.3-0.1 -0.1 0-0.2-0.1-0.4-0.1 -0.1 0-0.2 0-0.3 0 -0.1 0-0.3 0-0.4 0 -0.1 0-0.1 0-0.2 0L63.8 1.3c-2.5 0-4.6 2.1-4.6 4.6 0 2.5 2.1 4.6 4.6 4.5l19.3-0.1 -29.8 30.2c-1.1 1.1-1.5 2.7-1.2 4.1 0.2 0.9 0.6 1.7 1.3 2.4 0.9 0.9 2.1 1.3 3.2 1.3 1.2 0 2.3-0.5 3.2-1.4l0 0 29.8-30.2 0.1 19.3c0 2.5 2.1 4.6 4.6 4.5 1.3 0 2.4-0.5 3.2-1.4 0.8-0.8 1.3-2 1.3-3.2L98.7 5.7c0-0.1 0-0.1 0-0.2 0-0.1 0-0.2 0-0.4C98.6 5 98.6 4.9 98.6 4.8zM6.5 83.3c0 5.7 4.6 10.4 10.4 10.4l55.6 0.1c5.7 0 10.4-4.6 10.4-10.4l-0.1-40.8h6.1v40.8c0 9-7.3 16.3-16.3 16.3l-56.4-0.1c-8.6 0-15.6-7-15.6-15.6L0.6 27.8c0-9 7.3-16.3 16.3-16.3l41.1-0.1v6.1L17 17.5c-5.7 0-10.4 4.6-10.4 10.4L6.5 83.3z'/%3E%3C/svg%3E\");\n      width: 10px;\n      height: 10px;\n      background-repeat: no-repeat;\n      top: 50%;\n      right: -15px;\n      transform: translateY(-50%);\n    }\n  }\n"])), function (_a) {
-    var theme = _a.theme;
-    return (0, replaceHashInColor_1.replaceHashInColor)(theme.colors.text.primary);
-});
+var StyledExternalLink = styled_components_1.default.a(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  &.external-url {\n    position: relative;\n\n    :after {\n      content: '';\n      display: inline-block;\n      position: absolute;\n      background: var(--color-content);\n      mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' x='0' y='0' viewBox='0 0 100 125' enable-background='new 0 0 100 100' xml:space='preserve'%3E%3Cpath d='M-408.2-318.5 98.6 4.8c0-0.1 0-0.2-0.1-0.3 0-0.1-0.1-0.2-0.1-0.3 0-0.1 0-0.1-0.1-0.2 0 0 0-0.1 0-0.1 0-0.1-0.1-0.2-0.2-0.3 0-0.1-0.1-0.2-0.2-0.3 -0.1-0.1-0.1-0.2-0.2-0.3C97.7 2.9 97.6 2.8 97.5 2.7c-0.1-0.1-0.2-0.2-0.3-0.3 -0.1-0.1-0.1-0.1-0.2-0.2 -0.1-0.1-0.2-0.2-0.3-0.2 -0.1-0.1-0.2-0.1-0.2-0.2 -0.1-0.1-0.2-0.1-0.3-0.2 -0.1 0-0.2-0.1-0.3-0.1 0 0-0.1 0-0.1-0.1 -0.1 0-0.2 0-0.2-0.1 -0.1 0-0.2-0.1-0.3-0.1 -0.1 0-0.2-0.1-0.4-0.1 -0.1 0-0.2 0-0.3 0 -0.1 0-0.3 0-0.4 0 -0.1 0-0.1 0-0.2 0L63.8 1.3c-2.5 0-4.6 2.1-4.6 4.6 0 2.5 2.1 4.6 4.6 4.5l19.3-0.1 -29.8 30.2c-1.1 1.1-1.5 2.7-1.2 4.1 0.2 0.9 0.6 1.7 1.3 2.4 0.9 0.9 2.1 1.3 3.2 1.3 1.2 0 2.3-0.5 3.2-1.4l0 0 29.8-30.2 0.1 19.3c0 2.5 2.1 4.6 4.6 4.5 1.3 0 2.4-0.5 3.2-1.4 0.8-0.8 1.3-2 1.3-3.2L98.7 5.7c0-0.1 0-0.1 0-0.2 0-0.1 0-0.2 0-0.4C98.6 5 98.6 4.9 98.6 4.8zM6.5 83.3c0 5.7 4.6 10.4 10.4 10.4l55.6 0.1c5.7 0 10.4-4.6 10.4-10.4l-0.1-40.8h6.1v40.8c0 9-7.3 16.3-16.3 16.3l-56.4-0.1c-8.6 0-15.6-7-15.6-15.6L0.6 27.8c0-9 7.3-16.3 16.3-16.3l41.1-0.1v6.1L17 17.5c-5.7 0-10.4 4.6-10.4 10.4L6.5 83.3z'/%3E%3C/svg%3E\");\n      mask-repeat: no-repeat;\n      width: 10px;\n      height: 10px;\n      top: 50%;\n      right: -15px;\n      transform: translateY(-50%);\n    }\n  }\n"], ["\n  &.external-url {\n    position: relative;\n\n    :after {\n      content: '';\n      display: inline-block;\n      position: absolute;\n      background: var(--color-content);\n      mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' x='0' y='0' viewBox='0 0 100 125' enable-background='new 0 0 100 100' xml:space='preserve'%3E%3Cpath d='M-408.2-318.5 98.6 4.8c0-0.1 0-0.2-0.1-0.3 0-0.1-0.1-0.2-0.1-0.3 0-0.1 0-0.1-0.1-0.2 0 0 0-0.1 0-0.1 0-0.1-0.1-0.2-0.2-0.3 0-0.1-0.1-0.2-0.2-0.3 -0.1-0.1-0.1-0.2-0.2-0.3C97.7 2.9 97.6 2.8 97.5 2.7c-0.1-0.1-0.2-0.2-0.3-0.3 -0.1-0.1-0.1-0.1-0.2-0.2 -0.1-0.1-0.2-0.2-0.3-0.2 -0.1-0.1-0.2-0.1-0.2-0.2 -0.1-0.1-0.2-0.1-0.3-0.2 -0.1 0-0.2-0.1-0.3-0.1 0 0-0.1 0-0.1-0.1 -0.1 0-0.2 0-0.2-0.1 -0.1 0-0.2-0.1-0.3-0.1 -0.1 0-0.2-0.1-0.4-0.1 -0.1 0-0.2 0-0.3 0 -0.1 0-0.3 0-0.4 0 -0.1 0-0.1 0-0.2 0L63.8 1.3c-2.5 0-4.6 2.1-4.6 4.6 0 2.5 2.1 4.6 4.6 4.5l19.3-0.1 -29.8 30.2c-1.1 1.1-1.5 2.7-1.2 4.1 0.2 0.9 0.6 1.7 1.3 2.4 0.9 0.9 2.1 1.3 3.2 1.3 1.2 0 2.3-0.5 3.2-1.4l0 0 29.8-30.2 0.1 19.3c0 2.5 2.1 4.6 4.6 4.5 1.3 0 2.4-0.5 3.2-1.4 0.8-0.8 1.3-2 1.3-3.2L98.7 5.7c0-0.1 0-0.1 0-0.2 0-0.1 0-0.2 0-0.4C98.6 5 98.6 4.9 98.6 4.8zM6.5 83.3c0 5.7 4.6 10.4 10.4 10.4l55.6 0.1c5.7 0 10.4-4.6 10.4-10.4l-0.1-40.8h6.1v40.8c0 9-7.3 16.3-16.3 16.3l-56.4-0.1c-8.6 0-15.6-7-15.6-15.6L0.6 27.8c0-9 7.3-16.3 16.3-16.3l41.1-0.1v6.1L17 17.5c-5.7 0-10.4 4.6-10.4 10.4L6.5 83.3z'/%3E%3C/svg%3E\");\n      mask-repeat: no-repeat;\n      width: 10px;\n      height: 10px;\n      top: 50%;\n      right: -15px;\n      transform: translateY(-50%);\n    }\n  }\n"])));
 // TODO: We're using our own Link component so probably filtering is not necessary here.
 // filter out unnecessary props
 var propsList = [

package/utils/ClipboardService.d.ts

@@ -1,8 +1,4 @@
 export declare class ClipboardService {
     static isSupported(): boolean;
-    static selectElement(element: HTMLDivElement | null): void;
-    static deselect(): void;
-    static copySelected(): boolean;
-    static copyElement(element: HTMLDivElement | null): boolean;
-    static copyCustom(text: string): boolean;
+    static copyCustom(text: string): Promise<void>;
 }