@redocly/theme 0.1.10 → 0.1.13

package/src/CodeBlock/CodeBlock.ts

@@ -1,5 +1,7 @@
 import styled from 'styled-components';
 
+import { generateCodeBlockTokens } from '@theme/utils';
+
 export const CodeBlock = styled.div`
   max-height: var(--code-block-max-height, 600px);
   word-break: var(--code-block-word-break, initial);
@@ -42,13 +44,6 @@ export const CodeBlock = styled.div`
     overflow: auto;
   }
 
-  .token.comment,
-  .token.prolog,
-  .token.doctype,
-  .token.cdata {
-    color: hsl(30, 20%, 50%);
-  }
-
   .token.punctuation {
     opacity: 1;
   }
@@ -57,26 +52,12 @@ export const CodeBlock = styled.div`
     opacity: 0.7;
   }
 
-  .token.property,
-  .token.tag,
-  .token.number,
-  .token.constant,
-  .token.symbol {
-    color: var(--color-content-inverse);
-  }
-
-  .token.boolean {
-    color: var(--color-error-500);
-  }
-
   .token.selector,
   .token.attr-name,
   .token.string,
   .token.char,
   .token.builtin,
   .token.inserted {
-    color: #fee39e;
-
     & + a,
     & + a:visited {
       color: #4ed2ba;
@@ -88,24 +69,6 @@ export const CodeBlock = styled.div`
     color: #9efaa7;
   }
 
-  .token.operator,
-  .token.entity,
-  .token.url,
-  .token.variable {
-    color: #f5b83d;
-  }
-
-  .token.atrule,
-  .token.attr-value,
-  .token.keyword {
-    color: #ffdbf4;
-  }
-
-  .token.regex,
-  .token.important {
-    color: #e90;
-  }
-
   .token.important,
   .token.bold {
     font-weight: bold;
@@ -119,7 +82,5 @@ export const CodeBlock = styled.div`
     cursor: help;
   }
 
-  .token.deleted {
-    color: red;
-  }
+  ${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/Markdown/index.ts

@@ -1,4 +1,3 @@
-export * from '@theme/Markdown/CodeSample';
 export * from '@theme/Markdown/Tabs';
 export * from '@theme/Markdown/Admonition';
 export * from '@theme/Markdown/ContentWrapper';

package/src/Navbar/NavbarMenu.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import { NavbarItem } from '@theme/Navbar/NavbarItem';
 
 export function NavbarMenu({ menuItems }: { menuItems: any[] }): JSX.Element | null {
-  if (!menuItems || !menuItems.length) {
+  if (!menuItems?.length) {
     return null;
   }
 

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

@@ -2,18 +2,17 @@ import React, { SVGProps } from 'react';
 import styled from 'styled-components';
 
 const Icon = (props: SVGProps<SVGSVGElement>) => (
-  <span data-component-name="Search/ClearIcon">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      version="1.1"
-      x="0"
-      y="0"
-      viewBox="0 0 298.7 298.7"
-      {...props}
-    >
-      <polygon points="298.7 30.2 268.5 0 149.3 119.1 30.2 0 0 30.2 119.1 149.3 0 268.5 30.2 298.7 149.3 179.5 268.5 298.7 298.7 268.5 179.5 149.3 " />
-    </svg>
-  </span>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    version="1.1"
+    x="0"
+    y="0"
+    viewBox="0 0 298.7 298.7"
+    data-component-name="Search/ClearIcon"
+    {...props}
+  >
+    <polygon points="298.7 30.2 268.5 0 149.3 119.1 30.2 0 0 30.2 119.1 149.3 0 268.5 30.2 298.7 149.3 179.5 268.5 298.7 298.7 268.5 179.5 149.3 " />
+  </svg>
 );
 
 export const ClearIcon = styled(Icon)`
@@ -22,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

@@ -2,18 +2,17 @@ import React, { SVGProps } from 'react';
 import styled from 'styled-components';
 
 const Icon = (props: SVGProps<SVGSVGElement>) => (
-  <span data-component-name="Search/SearchIcon">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      version="1.1"
-      x="0"
-      y="0"
-      viewBox="0 0 490 490"
-      {...props}
-    >
-      <path d="M484 455.2L366.2 337.4c29.2-35.6 46.8-81.2 46.8-130.9C413 92.5 320.5 0 206.5 0 92.4 0 0 92.5 0 206.5S92.4 413 206.5 413c49.7 0 95.2-17.5 130.8-46.7L455.1 484c8 8 20.9 8 28.9 0C492 476.1 492 463.1 484 455.2zM206.5 371.9C115.2 371.9 41 297.7 41 206.5S115.2 41 206.5 41C297.7 41 372 115.3 372 206.5S297.7 371.9 206.5 371.9z" />
-    </svg>
-  </span>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    version="1.1"
+    x="0"
+    y="0"
+    viewBox="0 0 490 490"
+    data-component-name="Search/SearchIcon"
+    {...props}
+  >
+    <path d="M484 455.2L366.2 337.4c29.2-35.6 46.8-81.2 46.8-130.9C413 92.5 320.5 0 206.5 0 92.4 0 0 92.5 0 206.5S92.4 413 206.5 413c49.7 0 95.2-17.5 130.8-46.7L455.1 484c8 8 20.9 8 28.9 0C492 476.1 492 463.1 484 455.2zM206.5 371.9C115.2 371.9 41 297.7 41 206.5S115.2 41 206.5 41C297.7 41 372 115.3 372 206.5S297.7 371.9 206.5 371.9z" />
+  </svg>
 );
 
 export const SearchIcon = styled(Icon)`
@@ -22,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/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}

package/src/TableOfContent/TableOfContent.tsx

@@ -12,13 +12,13 @@ interface TableOfContentProps {
 }
 
 export function TableOfContent(props: TableOfContentProps): JSX.Element | null {
-  const { headings, tocMaxDepth } = props;
+  const { headings, tocMaxDepth, contentWrapper } = props;
 
   const sidebar = useRef<HTMLDivElement | null>(null);
   useFullHeight(sidebar);
-  const activeHeadingId = useActiveHeading(props.contentWrapper);
+  const activeHeadingId = useActiveHeading(contentWrapper);
 
-  if (headings && headings.length === 1 && headings[0]?.depth === 1) {
+  if (headings && headings.length === 1 && (!headings[0] || headings[0].depth === 1)) {
     return null;
   }
   if (!headings?.length) {
@@ -46,8 +46,8 @@ export function TableOfContent(props: TableOfContentProps): JSX.Element | null {
               return (
                 <MenuItem
                   key={href}
-                  depth={heading.depth || 0}
                   href={href}
+                  depth={heading.depth || 0}
                   className={activeHeadingId === heading.id ? 'active' : ''}
                   dangerouslySetInnerHTML={{ __html: heading.value || '' }}
                   data-cy={`toc-${heading.value}`}
@@ -79,11 +79,13 @@ const MenuItem = styled.a<{ depth: number }>`
   text-decoration: none;
   word-break: break-word;
   font-family: var(--h-font-family);
+
   :hover,
   &.active {
     color: var(--sidebar-item-active-color);
     background-color: var(--sidebar-item-active-background-color);
   }
+
   :empty {
     padding: 0;
   }