@redocly/theme 0.1.12 → 0.1.15

package/src/Markdown/CodeSample/styled.ts

@@ -1,45 +1,5 @@
-import { getLuminance } from 'polished';
 import styled, { css } from 'styled-components';
 
-import { typography } from '@theme/ui/Typography';
-import type { Tokens, Token } from '@theme/Markdown/CodeSample/types';
-import { AppTheme } from '@theme/types/portal';
-
-function genTokens(tokens?: Tokens | null) {
-  if (!tokens) {
-    return '';
-  }
-
-  let res = '';
-
-  for (const token of Object.keys(tokens)) {
-    if (token !== 'default') {
-      res += `.token.${token} { color: ${tokens[token as Token]?.color}; }\n`;
-    }
-  }
-
-  if (tokens.default) {
-    return css`
-      pre& {
-        ${typography(tokens.default)}
-      }
-      ${res}
-    `;
-  }
-
-  return res;
-}
-
-const getCodeBlockBackgroundColor = (theme: AppTheme) =>
-  Array.isArray(theme.codeBlock.backgroundColor)
-    ? theme.codeBlock.backgroundColor[0]
-    : theme.codeBlock.backgroundColor;
-
-export const CodeButton = css`
-  padding: 0 5px;
-  border-radius: 4px;
-`;
-
 export const CodeSampleButtonContainer = styled.div`
   position: absolute;
   top: 12px;
@@ -47,44 +7,20 @@ export const CodeSampleButtonContainer = styled.div`
 `;
 
 export const CopyCodeButton = styled.div`
-  ${CodeButton}
+  padding: 0 5px;
+  border-radius: 4px;
   display: none;
-
   &:hover {
     cursor: pointer;
   }
 `;
 
 export const DoneIndicator = styled.div`
-  ${CodeButton}
+  padding: 0 5px;
+  border-radius: 4px;
   cursor: default;
 `;
 
-const lightStyleCodeButton = css`
-  ${CopyCodeButton},
-  ${DoneIndicator} {
-    color: ${({ theme }) => theme.codeBlock.copyButton.visibleText};
-  }
-
-  ${CopyCodeButton}:hover {
-    color: ${({ theme }) => theme.codeBlock.copyButton.visibleText};
-    outline: 1px solid ${({ theme }) => theme.codeBlock.copyButton.visibleText};
-  }
-`;
-
-const darkStyleCodeButton = css`
-  ${CopyCodeButton},
-  ${DoneIndicator} {
-    color: ${({ theme }) => theme.codeBlock.copyButton.visibleText};
-  }
-
-  ${CopyCodeButton}:hover {
-    color: white;
-    color: ${({ theme }) => theme.codeBlock.copyButton.contrastText};
-    background-color: ${({ theme }) => theme.codeBlock.copyButton.background};
-  }
-`;
-
 const lightStyleTokens = css`
   .token.comment,
   .token.prolog,
@@ -93,11 +29,9 @@ const lightStyleTokens = css`
     color: #999988;
     font-style: italic;
   }
-
   .token.namespace {
     opacity: 0.7;
   }
-
   .token.string,
   .token.attr-value {
     color: #e3116c;
@@ -106,7 +40,6 @@ const lightStyleTokens = css`
   .token.operator {
     color: #393a34; /* no highlight */
   }
-
   .token.entity,
   .token.url,
   .token.symbol,
@@ -119,20 +52,17 @@ const lightStyleTokens = css`
   .token.inserted {
     color: #36acaa;
   }
-
   .token.atrule,
   .token.keyword,
   .token.attr-name,
   .language-autohotkey .token.selector {
     color: #00a4db;
   }
-
   .token.function,
   .token.deleted,
   .language-autohotkey .token.tag {
     color: #9a050f;
   }
-
   .token.tag,
   .token.selector,
   .language-autohotkey .token.keyword {
@@ -147,7 +77,6 @@ const darkStyleTokens = css`
   .token.cdata {
     color: hsl(30, 20%, 50%);
   }
-
   .token.property,
   .token.tag,
   .token.number,
@@ -186,7 +115,6 @@ const darkStyleTokens = css`
   .token.important {
     color: #e90;
   }
-
   .token.deleted {
     color: red;
   }
@@ -197,58 +125,53 @@ export const Wrapper = styled.div`
   border-radius: 4px;
   position: relative;
 
-  ${({ theme }) =>
-    getLuminance(getCodeBlockBackgroundColor(theme)) < 0.25
-      ? darkStyleCodeButton
-      : lightStyleCodeButton}
+  ${CopyCodeButton},
+  ${DoneIndicator} {
+    color: rgba(255, 255, 255, 0.15);
+  }
+  ${CopyCodeButton}:hover {
+    color: #fff;
+    background-color: rgba(255, 255, 255, 0.15);
+  }
 
   &:hover {
     ${CodeSampleButtonContainer} ${CopyCodeButton} {
       display: block;
     }
   }
-
   pre {
-    white-space: ${({ theme }) => (theme.typography.code.wrap ? 'pre-wrap' : 'pre')};
+    white-space: var(--code-wrap);
     color: white;
     padding: 12px 14px 15px 14px;
     overflow-x: auto;
     line-height: normal;
     border-radius: 4px;
-
-    font-family: ${({ theme }) => theme.typography.code.fontFamily};
-    background-color: ${({ theme }) => theme.codeBlock.backgroundColor};
-
+    font-family: var(--code-font-family);
+    background-color: var(--code-block-preformatted-background-color);
     code {
       background-color: transparent;
       border: 0;
       padding: 0;
-
-      color: ${({ theme }) =>
-        getLuminance(theme.codeBlock.backgroundColor) < 0.5 ? 'white' : '#393A34'};
-
+      color: white;
       &:before,
       &:after {
         content: none;
       }
     }
   }
-
   pre[class*='language-'] {
     padding: 1em;
     margin: 0.5em 0;
     overflow: auto;
     border: 0;
-    border-radius: ${({ theme }) => theme.shape.borderRadius};
+    border-radius: var(--global-border-radius);
   }
-
   code[class='language-text'] {
     line-height: 1.2em;
     display: inline-flex;
     white-space: pre-wrap;
     overflow-wrap: anywhere;
   }
-
   code[class*='language-'],
   pre[class*='language-'] {
     text-align: left;
@@ -264,7 +187,6 @@ export const Wrapper = styled.div`
     -moz-hyphens: none;
     -ms-hyphens: none;
     hyphens: none;
-
     .token.important,
     .token.bold {
       font-weight: bold;
@@ -282,8 +204,6 @@ export const Wrapper = styled.div`
       opacity: 0.7;
     }
 
-    ${({ theme }) =>
-      getLuminance(getCodeBlockBackgroundColor(theme)) < 0.5 ? darkStyleTokens : lightStyleTokens}
-    ${({ theme }) => genTokens(theme.codeBlock.tokens)}
+    ${darkStyleTokens};
   }
 `;

package/src/Markdown/StyledMarkdown.tsx

@@ -1,6 +1,6 @@
 import styled, { css, FlattenSimpleInterpolation } from 'styled-components';
 
-import { typography, typographyTokens, ITypography } from '@theme/ui/Typography';
+import { typography } from '@theme/utils';
 
 export const baseTable = css`
   table {
@@ -68,19 +68,6 @@ export const baseTable = css`
   }
 `;
 
-export function margins(theme: ITypography): FlattenSimpleInterpolation | string {
-  if (!theme) return '';
-
-  return css`
-    ${{
-      marginTop: theme.marginTop || theme.marginVertical || '',
-      marginBottom: theme.marginBottom || theme.marginVertical || '',
-      marginLeft: theme.marginLeft || theme.marginHorizontal || '',
-      marginRight: theme.marginRight || theme.marginHorizontal || '',
-    }}
-  `;
-}
-
 // TODO: Can users specify another className or we should hardcode it?
 export function headingAnchor(className = 'anchor'): FlattenSimpleInterpolation {
   return css`
@@ -220,8 +207,8 @@ export const StyledMarkdown = styled.main.attrs(() => ({
   }
 
   h1 {
-    ${typography(typographyTokens.heading1)};
-    ${margins(typographyTokens.heading1)};
+    ${typography('h1', 'h')};
+    margin: var(--h1-margin-top) var(--h1-margin-bottom);
     ${headingAnchor()};
 
     &:first-child {
@@ -230,32 +217,32 @@ export const StyledMarkdown = styled.main.attrs(() => ({
   }
 
   h2 {
-    ${typography(typographyTokens.heading2)};
-    ${margins(typographyTokens.heading2)};
+    ${typography('h2', 'h')};
+    margin: var(--h2-margin-top) var(--h2-margin-bottom);
     ${headingAnchor()};
   }
 
   h3 {
-    ${typography(typographyTokens.heading3)};
-    ${margins(typographyTokens.heading3)};
+    ${typography('h3', 'h')};
+    margin: var(--h3-margin-top) var(--h3-margin-bottom);
     ${headingAnchor()};
   }
 
   h4 {
-    ${typography(typographyTokens.heading4)};
-    ${margins(typographyTokens.heading4)};
+    ${typography('h4', 'h')};
+    margin: var(--h4-margin-top) var(--h4-margin-bottom);
     ${headingAnchor()};
   }
 
   h5 {
-    ${typography(typographyTokens.heading5)};
-    ${margins(typographyTokens.heading5)};
+    ${typography('h5', 'h')};
+    margin: var(--h5-margin-top) var(--h5-margin-bottom);
     ${headingAnchor()};
   }
 
   h6 {
-    ${typography(typographyTokens.heading6)};
-    ${margins(typographyTokens.heading6)};
+    ${typography('h6', 'h')};
+    margin: var(--h6-margin-top) var(--h6-margin-bottom);
     ${headingAnchor()};
   }
 
@@ -277,8 +264,7 @@ export const StyledMarkdown = styled.main.attrs(() => ({
     padding: var(--bloquote-padding-vertical) var(--bloquote-padding-horizontal);
     border-left: 4px solid var(--global-border-color);
     background-color: var(--bloquote-background-color);
-
-    ${typography(typographyTokens.blockquote)};
+    color: var(--color-content);
 
     & > p:first-child {
       margin-top: 0;

package/src/OperationBadge/OperationBadge.ts

@@ -3,7 +3,9 @@ import styled from 'styled-components';
 export const OperationBadge = styled.span.attrs((props: { type: string }) => ({
   className: `operation-type ${props.type}`,
 }))<{ type: string }>`
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   font-size: var(--http-badge-menu-font-size);
   font-family: var(--http-badge-font-family);
   font-weight: var(--http-badge-font-weight);
@@ -41,7 +43,8 @@ export const OperationBadge = styled.span.attrs((props: { type: string }) => ({
     background-color: var(--color-http-delete);
   }
 
-  &.basic {
+  &.basic,
+  &.schema {
     background-color: var(--color-http-basic);
   }
 

package/src/PageNavigation/NextPageLink.tsx

@@ -5,11 +5,11 @@ import { usePageData } from '@portal/hooks/usePageData';
 import { Button } from '@theme/ui';
 
 interface NextPageType {
-  nextPage: ResolvedNavLinkItem | null;
+  nextPage?: ResolvedNavLinkItem | null;
 }
 
 export function NextPageLink(): JSX.Element {
-  const { nextPage }: NextPageType = usePageData();
+  const { nextPage }: NextPageType = usePageData() || {};
   if (!nextPage) {
     return <div>&nbsp;</div>;
   }

package/src/PageNavigation/PreviousPageLink.tsx

@@ -5,11 +5,11 @@ import { usePageData } from '@portal/hooks/usePageData';
 import { Button } from '@theme/ui';
 
 interface PreviousPageType {
-  prevPage: ResolvedNavLinkItem | null;
+  prevPage?: ResolvedNavLinkItem | null;
 }
 
 export function PreviousPageLink(): JSX.Element {
-  const { prevPage }: PreviousPageType = usePageData();
+  const { prevPage }: PreviousPageType = usePageData() || {};
   if (!prevPage) {
     return <div>&nbsp;</div>;
   }

package/src/Search/SearchItem.tsx

@@ -25,7 +25,7 @@ export function SearchItem({ item }: SearchItemProps): JSX.Element {
       {item.httpVerb ? (
         <Operation>
           <OperationBadge type={item.httpVerb}>{item.httpVerb}</OperationBadge>
-          {highlight(item.pathName)}
+          {item.pathName ? highlight(item.pathName) : null}
         </Operation>
       ) : null}
       <Title>{highlight(item.title)}</Title>

package/src/globalStyle.ts

@@ -557,6 +557,42 @@ const code = css`
   --code-block-word-break: initial;
   --code-block-preformatted-background-color: #323f4b; // @presenter Color
 
+  --code-block-tokens-default-color: var(--color-content-inverse); // @presenter Color
+
+  --code-block-tokens-comment-color: hsl(30, 20%, 50%); // @presenter Color
+  --code-block-tokens-prolog-color: var(--code-block-tokens-comment-color); // @presenter Color
+  --code-block-tokens-doctype-color: var(--code-block-tokens-comment-color); // @presenter Color
+  --code-block-tokens-cdata-color: var(--code-block-tokens-comment-color); // @presenter Color
+
+  --code-block-tokens-property-color: var(--code-block-tokens-default-color); // @presenter Color
+  --code-block-tokens-tag-color: var(--code-block-tokens-default-color); // @presenter Color
+  --code-block-tokens-number-color: var(--code-block-tokens-default-color); // @presenter Color
+  --code-block-tokens-constant-color: var(--code-block-tokens-default-color); // @presenter Color
+  --code-block-tokens-symbol-color: var(--code-block-tokens-default-color); // @presenter Color
+
+  --code-block-tokens-boolean-color: var(--color-error-500); // @presenter Color
+
+  --code-block-tokens-string-color: #fee39e; // @presenter Color
+  --code-block-tokens-selector-color: var(--code-block-tokens-string-color); // @presenter Color
+  --code-block-tokens-attr-name-color: var(--code-block-tokens-string-color); // @presenter Color
+  --code-block-tokens-char-color: var(--code-block-tokens-string-color); // @presenter Color
+  --code-block-tokens-builtin-color: var(--code-block-tokens-string-color); // @presenter Color
+  --code-block-tokens-inserted-color: var(--code-block-tokens-string-color); // @presenter Color
+
+  --code-block-tokens-operator-color: #f5b83d; // @presenter Color
+  --code-block-tokens-entity-color: var(--code-block-tokens-operator-color); // @presenter Color
+  --code-block-tokens-url-color: var(--code-block-tokens-operator-color); // @presenter Color
+  --code-block-tokens-variable-color: var(--code-block-tokens-operator-color); // @presenter Color
+
+  --code-block-tokens-keyword-color: #ffdbf4; // @presenter Color
+  --code-block-tokens-atrule-color: var(--code-block-tokens-keyword-color); // @presenter Color
+  --code-block-tokens-attr-value-color: var(--code-block-tokens-keyword-color); // @presenter Color
+
+  --code-block-tokens-regex-color: #e90; // @presenter Color
+  --code-block-tokens-important-color: var(--code-block-tokens-regex-color); // @presenter Color
+
+  --code-block-tokens-deleted-color: red; // @presenter Color
+
   // @tokens End
 `;
 

package/src/mocks/hooks/usePageData.ts

@@ -3,7 +3,7 @@ import type { ResolvedNavLinkItem } from '@theme/types/portal';
 export function usePageData(): {
   prevPage: ResolvedNavLinkItem | null;
   nextPage: ResolvedNavLinkItem | null;
-} {
+} | 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(--h1-font-weight, var(--h-font-weight))',
-    lineHeight: 'var(--h1-line-height)',
-    color: 'var(--h-color)',
-    marginTop: 'var(--h1-margin-top)',
-    marginBottom: 'var(--h1-margin-bottom)',
-  },
-  heading2: {
-    fontSize: 'var(--h2-font-size)',
-    fontFamily: 'var(--h-font-family)',
-    fontWeight: 'var(--h2-font-weight, var(--h-font-weight))',
-    lineHeight: 'var(--h2-line-height)',
-    color: 'var(--h-color)',
-    marginTop: 'var(--h2-margin-top)',
-    marginBottom: 'var(--h2-margin-bottom)',
-  },
-  heading3: {
-    fontSize: 'var(--h3-font-size)',
-    fontFamily: 'var(--h-font-family)',
-    fontWeight: 'var(--h3-font-weight, var(--h-font-weight))',
-    lineHeight: 'var(--h3-line-height)',
-    color: 'var(--h-color)',
-    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};`}
@@ -152,7 +73,9 @@ 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};
   margin-top: ${({ mt }) => mt || '1em'};

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 !== 'undefined' && !!navigator.clipboard;
   }
 
-  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);
   }
 }