@redocly/theme 0.3.0 → 0.4.0

package/icons/ArrowIcon/ArrowIcon.js

@@ -29,5 +29,5 @@ var Icon = function (_a) {
         react_1.default.createElement("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 7 5", className: className },
             react_1.default.createElement("path", { d: "M3.5 2.51L5.806.205a.7.7 0 01.99.99l-2.8 2.8a.698.698 0 01-.99 0l-2.8-2.8a.7.7 0 11.99-.99L3.5 2.51z" }))));
 };
-exports.ArrowIcon = (0, styled_components_1.default)(Icon)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: var(--sidebar-chevron-size);\n  height: var(--sidebar-chevron-size);\n  fill: var(--sidebar-chevron-color);\n  transform: rotate(", "deg);\n\n  vertical-align: middle;\n"], ["\n  width: var(--sidebar-chevron-size);\n  height: var(--sidebar-chevron-size);\n  fill: var(--sidebar-chevron-color);\n  transform: rotate(", "deg);\n\n  vertical-align: middle;\n"])), directionToTransform);
+exports.ArrowIcon = (0, styled_components_1.default)(Icon)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: var(--sidebar-group-item-chevron-size);\n  height: var(--sidebar-group-item-chevron-size);\n  fill: var(--sidebar-group-item-chevron-color);\n  transform: rotate(", "deg);\n\n  vertical-align: middle;\n"], ["\n  width: var(--sidebar-group-item-chevron-size);\n  height: var(--sidebar-group-item-chevron-size);\n  fill: var(--sidebar-group-item-chevron-color);\n  transform: rotate(", "deg);\n\n  vertical-align: middle;\n"])), directionToTransform);
 var templateObject_1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Shared UI components",
   "author": "team@redocly.com",
   "license": "SEE LICENSE IN LICENSE",

package/src/Button/Button.tsx

@@ -57,7 +57,7 @@ export const baseButtonStyles = css`
   box-shadow: var(--button-box-shadow);
 
   &:hover {
-    box-shadow: var(--button-active-box-shadow);
+    box-shadow: var(--button-hover-box-shadow);
   }
 
   &:active {
@@ -80,15 +80,21 @@ const StyledButton = styled.button.attrs(({ color = 'default', extraClass }: But
     variant === 'outlined'
       ? css`
           color: var(--button-background-color);
-          border: 2px solid var(--button-background-color);
+          border: 2px solid var(--button-border-color);
           background-color: transparent;
           &:hover {
-            border: 2px solid var(--button-active-background-color);
-            background-color: transparent;
+            color: var(--button-hover-background-color);
+            border: 2px solid var(--button-hover-border-color);
           }
 
           &:active {
-            border: 2px solid var(--button-outlined-active-border-color);
+            color: var(--button-active-background-color);
+            border: 2px solid var(--button-active-border-color);
+          }
+
+          &:disabled {
+            color: var(--button-disabled-background-color);
+            background-color: transparent;
           }
         `
       : css`
@@ -125,7 +131,9 @@ const StyledButton = styled.button.attrs(({ color = 'default', extraClass }: But
       &,
       &:hover {
         cursor: default;
-        color: #999;
+        color: var(--button-disabled-color);
+        background-color: var(--button-disabled-background-color);
+        border-color: var(--button-disabled-background-color);
         pointer-events: none;
       }
     `}

package/src/CodeBlock/CodeBlock.ts

@@ -12,8 +12,6 @@ export const CodeBlock = styled.div.attrs(() => ({
   */
   code[class*='language-'],
   pre[class*='language-'] {
-    /* color: white;
-    background: none; */
     text-shadow: 0 -0.1em 0.2em black;
     text-align: left;
     white-space: pre;
@@ -62,13 +60,13 @@ export const CodeBlock = styled.div.attrs(() => ({
   .token.inserted {
     & + a,
     & + a:visited {
-      color: #4ed2ba;
+      color: var(--code-block-tokens-link-color);
       text-decoration: underline;
     }
   }
 
   .token.property.string {
-    color: #9efaa7;
+    color: var(--code-block-tokens-property-string-color);
   }
 
   .token.important,

package/src/ColorModeSwitcher/ColorModeSwitcher.tsx

@@ -41,7 +41,7 @@ export function ColorModeSwitcher(): JSX.Element | null {
 }
 
 const Wrapper = styled.div`
-  margin-left: calc(var(--sidebar-spacing-horizontal) * 2);
+  margin-left: var(--navbar-item-padding-horizontal);
   display: flex;
   align-items: center;
   cursor: pointer;

package/src/Footer/Footer.tsx

@@ -29,11 +29,12 @@ export function Footer({ data: { columns, copyrightText } }: FooterProps): JSX.E
 }
 
 const FooterContainer = styled.footer`
-  font-size: 1rem;
+  font-size: var(--footer-font-size);
   flex-shrink: 0;
   background-color: var(--footer-background-color);
   color: var(--footer-text-color);
-  font-family: var(--font-family-base);
+  font-family: var(--footer-font-family);
+  font-weight: var(--footer-font-weight);
   a,
   a:hover {
     color: var(--footer-text-color);

package/src/Footer/FooterColumn.tsx

@@ -34,10 +34,11 @@ export function FooterColumn({ column }: FooterColumnProps): JSX.Element {
 
 const FooterColumnTitle = styled.p`
   display: inline-block;
-  font-weight: var(--font-weight-regular);
-  font-size: 24px;
-  margin-bottom: 1.5em;
-  font-family: var(--h-font-family);
+  font-weight: var(--footer-title-font-weight);
+  font-size: var(--footer-title-font-size);
+  margin-bottom: var(--footer-title-margin-vertical);
+  font-family: var(--footer-font-family);
+  color: var(--footer-title-text-color);
 `;
 
 const FooterSeparator = styled.div`
@@ -45,21 +46,24 @@ const FooterSeparator = styled.div`
   margin: 10px 0 5px 0;
   font-size: 0.75em;
   text-transform: uppercase;
-  font-family: var(--h-font-family);
+  font-family: var(--footer-font-family);
 `;
 
 const FooterColumnContainer = styled.div`
   display: flex;
   flex-direction: column;
   text-align: left;
-  margin: 0 20px;
-  width: 20%;
+  margin: var(--footer-column-margin-horizontal) var(--footer-column-margin-vertical);
+  width: var(--footer-column-width);
   word-break: break-word;
 `;
 
 const FooterLink = styled(Link)`
   font-weight: var(--font-weight-bold);
-  padding-bottom: 0.75em;
-  color: var(--footer-text-color);
+  padding: var(--footer-item-padding-vertical) var(--footer-item-padding-horizontal);
+  color: var(--footer-link-text-color);
   text-decoration: none;
+  &:hover {
+    color: var(--footer-link-hover-color);
+  }
 `;

package/src/Footer/FooterColumns.tsx

@@ -26,11 +26,11 @@ export function FooterColumns({ columns }: FooterColumnsProps): JSX.Element | nu
 }
 
 export const FooterColumnsContainer = styled.div`
-  padding: 3em 20px 1em 20px;
+  padding: var(--footer-padding-vertical) var(--footer-padding-horizontal);
   display: flex;
   flex-direction: column;
   justify-content: center;
-  max-width: 1200px;
+  max-width: var(--footer-container-max-width);
   margin: 0 auto;
 
   ${({ theme }) => theme.mediaQueries.small} {

package/src/Footer/FooterCopyright.tsx

@@ -23,6 +23,6 @@ const Wrapper = styled.section`
   color: var(--footer-text-color);
   text-align: center;
   span {
-    max-width: 1200px;
+    max-width: var(--footer-container-max-width);
   }
 `;

package/src/JsonViewer/JsonViewer.tsx

@@ -115,8 +115,8 @@ export const JsonViewer = styled(Json).attrs(() => ({
   'data-component-name': 'JsonViewer/JsonViewer',
 }))<JsonProps>`
   .redoc-json code {
-    background-color: var(--samples-panel-controls-background-color);
-    color: var(--color-content-inverse);
+    background-color: var(--panel-samples-code-block-background-color);
+    color: var(--text-color-inverse);
     padding: inherit;
     border: none;
   }
@@ -125,9 +125,9 @@ export const JsonViewer = styled(Json).attrs(() => ({
   overflow-x: auto;
   position: relative;
   padding: 10px;
-  border-radius: var(--global-border-radius);
-  background-color: var(--samples-panel-controls-background-color);
-  color: var(--color-content-inverse);
+  border-radius: var(--border-radius);
+  background-color: var(--panel-samples-code-block-background-color);
+  color: var(--text-color-inverse);
   font-size: var(--code-font-size);
   font-family: var(--code-font-family);
   white-space: var(--code-wrap, pre);

package/src/Markdown/Admonition.tsx

@@ -39,6 +39,7 @@ const Wrapper = styled.div<AdmonitionTypeProps>`
   ${({ type }) => `
     background-color: var(--admonition-${type}-background-color);
     color: var(--admonition-${type}-text-color);
+    border: var(--admonition-${type}-border);
   `}
 `;
 
@@ -47,13 +48,13 @@ const Heading = styled.h5<AdmonitionTypeProps>`
   margin: 0 0 10px;
 
   letter-spacing: var(--admonition-heading-letter-spacing);
-  color: ${({ type }) => `var(--admonition-${type}-text-color)`};
+  color: ${({ type }) => `var(--admonition-${type}-heading-text-color)`};
 
   && {
     font-size: var(--admonition-heading-font-size);
     font-weight: var(--admonition-heading-font-weight);
     line-height: var(--admonition-line-height);
-    transform: var(--admonition-heading-transform);
+    text-transform: var(--admonition-heading-transform);
   }
 `;
 

package/src/Markdown/CodeSample/CodeSample.tsx

@@ -40,17 +40,20 @@ const CodeSampleButtonContainer = styled.div`
 `;
 
 const CopyCodeButton = styled.div`
-  padding: 0 5px;
-  border-radius: 4px;
-  display: none;
+  padding: var(--code-block-controls-padding);
+  border-radius: var(--code-block-controls-border-radius);
+  font-size: var(--code-block-controls-font-size);
+  font-family: var(--code-block-controls-font-family);
   &:hover {
     cursor: pointer;
   }
 `;
 
 const DoneIndicator = styled.div`
-  padding: 0 5px;
-  border-radius: 4px;
+  padding: var(--code-block-controls-padding);
+  border-radius: var(--code-block-controls-border-radius);
+  font-size: var(--code-block-controls-font-size);
+  font-family: var(--code-block-controls-font-family);
   cursor: default;
 `;
 
@@ -111,32 +114,30 @@ const Wrapper = styled.div`
 
   ${CopyCodeButton},
   ${DoneIndicator} {
-    color: rgba(255, 255, 255, 0.15);
+    color: var(--code-block-controls-text-color);
+    background-color: var(--code-block-controls-background-color);
+    opacity: var(--code-block-controls-opacity);
   }
   ${CopyCodeButton}:hover {
-    color: #fff;
-    background-color: rgba(255, 255, 255, 0.15);
+    color: var(--code-block-controls-hover-text-color);
+    background-color: var(--code-block-controls-hover-background-color);
+    opacity: var(--code-block-controls-active-opacity);
   }
 
-  &:hover {
-    ${CodeSampleButtonContainer} ${CopyCodeButton} {
-      display: block;
-    }
-  }
   pre {
     white-space: var(--code-wrap);
     color: white;
     padding: 12px 14px 15px 14px;
     overflow-x: auto;
     line-height: normal;
-    border-radius: 4px;
+    border-radius: var(--code-block-border-radius);
     font-family: var(--code-font-family);
-    background-color: var(--code-block-preformatted-background-color);
+    background-color: var(--code-block-background-color);
     code {
       background-color: transparent;
       border: 0;
       padding: 0;
-      color: white;
+      color: var(--code-block-text-color);
       &:before,
       &:after {
         content: none;
@@ -148,7 +149,7 @@ const Wrapper = styled.div`
     margin: 0.5em 0;
     overflow: auto;
     border: 0;
-    border-radius: var(--global-border-radius);
+    border-radius: var(--border-radius);
   }
   code[class='language-text'] {
     line-height: 1.2em;

package/src/Markdown/{ContentWrapper.tsx → ContainerWrapper.tsx}

@@ -1,13 +1,13 @@
 import styled from 'styled-components';
 
-export const ContentWrapper = styled.section.attrs(() => ({
-  'data-component-name': 'Markdown/ContentWrapper',
+export const ContainerWrapper = styled.section.attrs(() => ({
+  'data-component-name': 'Markdown/ContainerWrapper',
 }))<{ withToc: boolean }>`
-  max-width: var(--content-wrapper-max-width);
+  max-width: var(--md-container-max-width);
   width: 90%;
   margin: 0 auto;
 
-  padding: var(--content-wrapper-padding-vertical) var(--content-wrapper-padding-horizontal);
+  padding: var(--md-container-padding-vertical) var(--md-container-padding-horizontal);
 
   & > article:first-child > h1:first-child {
     // disable margin top for h1 on the title heading if there is no "Last updated at" block

package/src/Markdown/MarkdownLayout.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { PageWrapper } from '@theme/Markdown/PageWrapper';
-import { ContentWrapper } from '@theme/Markdown/ContentWrapper';
+import { ContainerWrapper } from '@theme/Markdown/ContainerWrapper';
 import { PageNavigation } from '@theme/PageNavigation/PageNavigation';
 
 type MarkdownLayoutProps = {
@@ -19,10 +19,10 @@ export function MarkdownLayout({
 }: MarkdownLayoutProps): JSX.Element {
   return (
     <PageWrapper data-component-name="Markdown/MarkdownLayout">
-      <ContentWrapper withToc={true}>
+      <ContainerWrapper withToc={true}>
         {markdownWrapper}
         <PageNavigation showPrevButton={showPrevButton} showNextButton={showNextButton} />
-      </ContentWrapper>
+      </ContainerWrapper>
       {tableOfContent}
     </PageWrapper>
   );

package/src/Markdown/MarkdownWrapper.tsx

@@ -10,60 +10,65 @@ export const baseTable = css`
     word-break: keep-all;
     border-collapse: separate;
     border-spacing: 0;
-    margin-top: 20px;
-    margin-bottom: 20px;
-    font-size: 14px;
+    margin-top: var(--md-table-margin-vertical);
+    margin-bottom: var(--md-table-margin-vertical);
+    font-size: var(--md-table-font-size);
 
     th,
     td {
-      padding: 12px;
-      border-bottom: 1px solid var(--global-border-color);
+      padding: var(--md-table-cell-padding);
+      border-bottom: 1px solid var(--md-table-border-color);
+      color: var(--md-table-cell-text-color);
+    }
+
+    tr {
+      background-color: var(--md-table-stripe-background-color);
     }
 
     th {
       text-align: left;
-      font-weight: bold;
-      background-color: var(--color-secondary-300);
+      font-weight: var(--md-table-head-font-weight);
+      color: var(--md-table-head-text-color);
+      background-color: var(--md-table-head-background-color);
     }
 
     tr th:first-child,
     tr td:first-child {
-      border-left: 1px solid var(--global-border-color);
+      border-left: 1px solid var(--md-table-border-color);
     }
 
     tr td:last-child,
     tr th:last-child {
-      border-right: 1px solid var(--global-border-color);
+      border-right: 1px solid var(--md-table-border-color);
     }
 
     thead td,
     thead th {
-      border-top: 1px solid var(--global-border-color);
+      border-top: 1px solid var(--md-table-border-color);
     }
 
     /* top-left border */
 
     thead tr:first-child th:first-child {
-      border-top-left-radius: var(--panels-border-radius);
+      border-top-left-radius: var(--md-table-border-radius);
     }
 
     /* top-right border */
 
     thead tr:first-child th:last-child {
-      border-top-right-radius: var(--panels-border-radius);
-      border-top: 1px solid var(--global-border-color);
+      border-top-right-radius: var(--md-table-border-radius);
     }
 
     /* bottom-left border */
 
     tbody tr:last-child td:first-child {
-      border-bottom-left-radius: var(--panels-border-radius);
+      border-bottom-left-radius: var(--md-table-border-radius);
     }
 
     /* bottom-right border */
 
     tbody tr:last-child td:last-child {
-      border-bottom-right-radius: var(--panels-border-radius);
+      border-bottom-right-radius: var(--md-table-border-radius);
     }
   }
 `;
@@ -75,7 +80,7 @@ export function headingAnchor(className = 'anchor'): FlattenSimpleInterpolation
       position: absolute;
       left: 0;
       transform: translateX(-100%);
-      padding-right: 4px;
+      padding-right: var(--heading-anchor-offset-right);
     }
 
     .${className}.after {
@@ -85,6 +90,7 @@ export function headingAnchor(className = 'anchor'): FlattenSimpleInterpolation
 
     svg,
     .${className} svg {
+      fill: var(--heading-anchor-color);
       visibility: hidden;
     }
 
@@ -101,21 +107,29 @@ export const MarkdownWrapper = styled.main.attrs(() => ({
   font-weight: var(--font-weight-regular);
   padding: 0;
 
-  color: var(--color-content);
+  color: var(--text-color);
   font-size: var(--font-size-base);
   font-family: var(--font-family-base);
   line-height: var(--line-height-base);
 
   a:not([role='button']) {
     text-decoration: var(--link-decoration);
-    color: var(--link-color);
+    color: var(--link-text-color);
+    font-weight: var(--link-font-weight);
 
     &:visited {
-      color: var(--link-color);
+      color: var(--link-visited-text-color);
+      text-decoration: var(--link-visited-decoration);
     }
 
     &:hover {
-      color: var(--link-color-hover);
+      text-decoration: var(--link-hover-decoration);
+      color: var(--link-hover-text-color);
+    }
+
+    &:focus {
+      color: var(--link-active-text-color);
+      text-decoration: var(--link-active-decoration);
     }
   }
 
@@ -129,8 +143,8 @@ export const MarkdownWrapper = styled.main.attrs(() => ({
   h4.md,
   h5.md,
   h6.md {
-    font-weight: var(--h-font-weight);
-    font-family: var(--h-font-family);
+    font-weight: var(--heading-font-weight);
+    font-family: var(--heading-font-family);
     position: relative;
 
     scroll-margin-top: 60px;
@@ -141,14 +155,17 @@ export const MarkdownWrapper = styled.main.attrs(() => ({
   }
 
   hr {
-    border-top: 1px solid var(--global-border-color);
+    border-top: 1px solid var(--md-hr-border-color);
+    background-color: var(--md-hr-background-color);
+    height: var(--md-hr-height);
+    margin: var(--md-hr-margin-vertical) 0;
   }
 
   details {
     margin: 1.125em 0;
 
     summary {
-      color: var(--color-content);
+      color: var(--text-color);
       font-weight: var(--font-weight-regular);
       outline: 0;
       padding: 0;
@@ -170,17 +187,17 @@ export const MarkdownWrapper = styled.main.attrs(() => ({
     .snippets-tabs-headers {
       font-size: 0.9em;
 
-      font-family: var(--h-font-family);
+      font-family: var(--heading-font-family);
 
       .tab-header {
         text-align: center;
         padding: 0.2em 0.5em;
         display: inline-block;
         cursor: pointer;
-        color: var(--color-content-secondary);
+        color: var(--text-color-secondary);
 
         &.active {
-          color: var(--h-color);
+          color: var(--heading-text-color);
           font-weight: var(--font-weight-bold);
         }
       }
@@ -201,6 +218,8 @@ export const MarkdownWrapper = styled.main.attrs(() => ({
   }
 
   p {
+    margin: var(--md-paragraph-margin-vertical) var(--md-paragraph-margin-horizontal);
+
     &:last-child {
       margin-bottom: 0;
     }
@@ -271,24 +290,25 @@ export const MarkdownWrapper = styled.main.attrs(() => ({
   }
 
   code {
-    color: var(--inline-code-color);
+    color: var(--inline-code-text-color);
     background-color: var(--inline-code-background-color);
 
-    border-radius: 2px;
-    border: 1px solid var(--global-border-color);
+    border-radius: var(--inline-code-border-radius);
+    border: 1px solid var(--inline-code-border-color);
     padding: 0.1em 0.25em 0.2em;
     font-weight: var(--code-font-weight);
     word-break: break-word;
-    font-size: var(--code-font-size);
+    font-size: var(--inline-code-font-size);
     font-family: var(--code-font-family);
   }
 
   blockquote {
-    margin: var(--bloquote-margin-vertical) var(--bloquote-margin-horizontal);
-    padding: var(--bloquote-padding-vertical) var(--bloquote-padding-horizontal);
-    border-left: 4px solid var(--global-border-color);
-    background-color: var(--bloquote-background-color);
-    color: var(--color-content);
+    margin: var(--md-blockquote-margin-vertical) var(--md-blockquote-margin-horizontal);
+    padding: var(--md-blockquote-padding-vertical) var(--md-blockquote-padding-horizontal);
+    border-left: var(--md-blockquote-border-left);
+    background-color: var(--md-blockquote-background-color);
+    color: var(--md-blockquote-text-color);
+    box-shadow: var(--md-blockquote-box-shadow);
 
     & > p:first-child {
       margin-top: 0;
@@ -305,18 +325,38 @@ export const MarkdownWrapper = styled.main.attrs(() => ({
     }
   }
 
-  > ul,
-  > p ul {
-    > ol,
-    > p ol {
-      padding-left: 2em;
-      margin: 0 0 1em;
+  ul,
+  ol {
+    padding-left: var(--md-list-left-padding);
+    margin: 0 0 var(--md-list-margin);
 
-      ul,
-      ol {
-        margin-bottom: 0;
-        margin-top: 0;
-      }
+    ul,
+    ol {
+      margin-bottom: 0;
+      margin-top: 0;
     }
   }
+
+  li {
+    margin: var(--md-list-item-margin);
+    list-style: var(--md-list-item-style);
+  }
+
+  ol > li {
+    list-style: var(--md-numbered-list-item-style);
+  }
+
+  ol > li:before {
+    content: counter(list-item);
+    display: var(--md-numbered-list-number-display);
+    color: var(--md-numbered-list-number-text-color);
+    font-size: var(--md-numbered-list-number-font-size);
+    font-family: var(--md-numbered-list-number-font-family);
+    font-weight: var(--md-numbered-list-number-font-weight);
+    background-color: var(--md-numbered-list-number-background-color);
+    border-radius: var(--md-numbered-list-number-border-radius);
+    border: var(--md-numbered-list-number-border);
+    margin-right: var(--md-numbered-list-number-margin-right);
+    padding: var(--md-numbered-list-number-padding);
+  }
 `;

package/src/Markdown/index.ts

@@ -1,6 +1,6 @@
 export * from '@theme/Markdown/Admonition';
 export * from '@theme/Markdown/CodeSample';
-export * from '@theme/Markdown/ContentWrapper';
+export * from '@theme/Markdown/ContainerWrapper';
 export * from '@theme/Markdown/Heading';
 export * from '@theme/Markdown/MarkdownLayout';
 export * from '@theme/Markdown/MarkdownWrapper';

package/src/Navbar/MobileNavbarItem.tsx

@@ -72,12 +72,10 @@ export const NavMenuItem = styled.li<{ active?: boolean }>`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: calc(var(--sidebar-spacing-horizontal) * 2);
+  padding: var(--navbar-item-padding-horizontal);
   text-align: left;
   line-height: 1;
   font-size: var(--navbar-item-font-size);
-  margin-left: var(--navbar-item-margin-horizontal);
-  margin-right: var(--navbar-item-margin-horizontal);
   font-weight: var(--navbar-item-font-weight);
   background: ${({ active }) => (active ? 'var(--navbar-item-active-background-color)' : 'none')};
   &:not(:last-child) {