@redocly/theme 0.1.11 → 0.1.14

package/src/Markdown/CodeSample/styled.ts

@@ -1,44 +1,6 @@
-import { getLuminance } from 'polished';
-import styled, { css } from 'styled-components';
+import styled 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;
-`;
+import { generateCodeBlockTokens } from '@theme';
 
 export const CodeSampleButtonContainer = styled.div`
   position: absolute;
@@ -47,208 +9,72 @@ 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};
-  }
-`;
+export const Wrapper = styled.div`
+  overflow: auto;
+  border-radius: 4px;
+  position: relative;
 
-const darkStyleCodeButton = css`
   ${CopyCodeButton},
   ${DoneIndicator} {
-    color: ${({ theme }) => theme.codeBlock.copyButton.visibleText};
+    color: rgba(255, 255, 255, 0.15);
   }
-
   ${CopyCodeButton}:hover {
     color: white;
-    color: ${({ theme }) => theme.codeBlock.copyButton.contrastText};
-    background-color: ${({ theme }) => theme.codeBlock.copyButton.background};
-  }
-`;
-
-const lightStyleTokens = css`
-  .token.comment,
-  .token.prolog,
-  .token.doctype,
-  .token.cdata {
-    color: #999988;
-    font-style: italic;
-  }
-
-  .token.namespace {
-    opacity: 0.7;
-  }
-
-  .token.string,
-  .token.attr-value {
-    color: #e3116c;
-  }
-  .token.punctuation,
-  .token.operator {
-    color: #393a34; /* no highlight */
-  }
-
-  .token.entity,
-  .token.url,
-  .token.symbol,
-  .token.number,
-  .token.boolean,
-  .token.variable,
-  .token.constant,
-  .token.property,
-  .token.regex,
-  .token.inserted {
-    color: #36acaa;
-  }
-
-  .token.atrule,
-  .token.keyword,
-  .token.attr-name,
-  .language-autohotkey .token.selector {
-    color: #00a4db;
+    outline: 1px solid white;
   }
 
-  .token.function,
-  .token.deleted,
-  .language-autohotkey .token.tag {
-    color: #9a050f;
-  }
-
-  .token.tag,
-  .token.selector,
-  .language-autohotkey .token.keyword {
-    color: #00009f;
-  }
-`;
-
-const darkStyleTokens = css`
-  .token.comment,
-  .token.prolog,
-  .token.doctype,
-  .token.cdata {
-    color: hsl(30, 20%, 50%);
-  }
-
-  .token.property,
-  .token.tag,
-  .token.number,
-  .token.constant,
-  .token.symbol {
-    color: #62bff9;
-  }
-  .token.boolean {
-    color: firebrick;
-  }
-  .token.selector,
-  .token.attr-name,
-  .token.string,
-  .token.char,
-  .token.builtin,
-  .token.inserted {
-    color: #a0fbaa;
-    & + a,
-    & + a:visited {
-      color: #4ed2ba;
-      text-decoration: underline;
-    }
-  }
-  .token.operator,
-  .token.entity,
-  .token.url,
-  .token.variable {
-    color: hsl(40, 90%, 60%);
-  }
-  .token.atrule,
-  .token.attr-value,
-  .token.keyword {
-    color: hsl(350, 40%, 70%);
-  }
-  .token.regex,
-  .token.important {
-    color: #e90;
-  }
-
-  .token.deleted {
-    color: red;
-  }
-`;
-
-export const Wrapper = styled.div`
-  overflow: auto;
-  border-radius: 4px;
-  position: relative;
-
-  ${({ theme }) =>
-    getLuminance(getCodeBlockBackgroundColor(theme)) < 0.25
-      ? darkStyleCodeButton
-      : lightStyleCodeButton}
-
   &: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 +90,6 @@ export const Wrapper = styled.div`
     -moz-hyphens: none;
     -ms-hyphens: none;
     hyphens: none;
-
     .token.important,
     .token.bold {
       font-weight: bold;
@@ -282,8 +107,53 @@ export const Wrapper = styled.div`
       opacity: 0.7;
     }
 
-    ${({ theme }) =>
-      getLuminance(getCodeBlockBackgroundColor(theme)) < 0.5 ? darkStyleTokens : lightStyleTokens}
-    ${({ theme }) => genTokens(theme.codeBlock.tokens)}
+    .token.comment,
+    .token.prolog,
+    .token.doctype,
+    .token.cdata {
+      color: #999988;
+      font-style: italic;
+    }
+    .token.namespace {
+      opacity: 0.7;
+    }
+    .token.string,
+    .token.attr-value {
+      color: #e3116c;
+    }
+    .token.punctuation,
+    .token.operator {
+      color: #393a34; /* no highlight */
+    }
+    .token.entity,
+    .token.url,
+    .token.symbol,
+    .token.number,
+    .token.boolean,
+    .token.variable,
+    .token.constant,
+    .token.property,
+    .token.regex,
+    .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 {
+      color: #00009f;
+    }
+
+    ${generateCodeBlockTokens()}
   }
 `;

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/ClearIcon.tsx

@@ -21,7 +21,7 @@ export const ClearIcon = styled(Icon)`
   width: 0.5em;
   height: 0.5em;
   right: 1.2em;
-  fill: var(--input-text-color);
+  fill: var(--search-input-text-color);
 
   ${({ theme }) => theme.mediaQueries.medium} {
     width: 0.625em;

package/src/Search/Input.tsx

@@ -4,16 +4,16 @@ export const FormInput = styled.input.attrs(() => ({
   'data-component-name': 'Search/Input',
 }))`
   padding: 1em 2.5em 1em 1em;
-  background-color: var(--input-background-color);
-  border-radius: var(--input-border-radius);
+  background-color: var(--search-input-background-color);
+  border-radius: var(--search-input-border-radius);
   border: none;
   outline: none;
-  color: var(--input-text-color);
-  font-size: var(--input-font-size);
-  font-family: var(--input-font-family);
-  line-height: var(--input-line-height);
+  color: var(--search-input-text-color);
+  font-size: var(--search-input-font-size);
+  font-family: var(--search-input-font-family);
+  line-height: var(--search-input-line-height);
 
   ::placeholder {
-    color: var(--input-text-color);
+    color: var(--search-input-text-color);
   }
 `;

package/src/Search/Popover.tsx

@@ -14,7 +14,7 @@ export const Popover = styled.div.attrs(() => ({
   overflow-y: auto;
   box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12),
     0 8px 10px -5px rgba(0, 0, 0, 0.4);
-  background: var(--popover-backgrond-color);
+  background: var(--search-popover-backgrond-color);
   list-style: none;
-  border-radius: var(--popover-border-radius);
+  border-radius: var(--search-popover-border-radius);
 `;

package/src/Search/SearchIcon.tsx

@@ -21,7 +21,7 @@ export const SearchIcon = styled(Icon)`
   width: 1em;
   height: 1em;
   right: 1em;
-  fill: var(--input-text-color);
+  fill: var(--search-input-text-color);
   z-index: -1;
 
   ${({ theme }) => theme.mediaQueries.medium} {

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/Sidebar/ApiCallItem.tsx

@@ -12,8 +12,7 @@ export function ApiCallItem({ item }: MenuItemProps): JSX.Element {
     <Wrapper data-component-name="Sidebar/ApiCallItem">
       <MenuLinkItem item={item}>
         <MenuItemLabel active={item.active}>
-          {/* TODO: not sure item.httpVerb || 'event' is correct */}
-          <Badge type={item.httpVerb || 'event'}>
+          <Badge type={item.httpVerb || ''}>
             {item.httpVerb === 'hook' ? 'event' : item.httpVerb}
           </Badge>
           {item.label}