@redocly/theme 0.2.2 → 0.4.0

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) {

package/src/Navbar/MobileNavbarMenu.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import type { ResolvedConfigLinks, ResolvedNavItem } from '@theme/types/portal';
 
-import { NavMenuItem, NavMenuItemWithDropdownWrapper } from '@theme/Navbar/NavbarItem';
+import { NavbarMenuItem, NavbarMenuItemWithDropdownWrapper } from '@theme/Navbar/NavbarItem';
 import { MobileNavbarItem } from '@theme/Navbar/MobileNavbarItem';
 import { DropdownWrapper } from '@theme/Navbar/NavbarDropdown';
 import { isPrimitive, isEmptyArray } from '@theme/utils';
@@ -20,8 +20,8 @@ export function MobileNavbarMenu({
   }
 
   return (
-    <NavItemsWrapper data-component-name="Navbar/MobileNavbarMenu">
-      <NavItemsContainer>
+    <NavbarItemsWrapper data-component-name="Navbar/MobileNavbarMenu">
+      <NavbarItemsContainer>
         {(menuItems as ResolvedNavItem[]).map((navItem, index) => {
           return (
             <MobileNavbarItem
@@ -31,13 +31,13 @@ export function MobileNavbarMenu({
             />
           );
         })}
-      </NavItemsContainer>
-      <NavItemsClosableArea onClick={closeMenu} />
-    </NavItemsWrapper>
+      </NavbarItemsContainer>
+      <NavbarItemsClosableArea onClick={closeMenu} />
+    </NavbarItemsWrapper>
   );
 }
 
-const NavItemsWrapper = styled.div`
+const NavbarItemsWrapper = styled.div`
   height: 100%;
   width: 100%;
   position: fixed;
@@ -63,7 +63,7 @@ const NavItemsWrapper = styled.div`
   }
 `;
 
-const NavItemsClosableArea = styled.div`
+const NavbarItemsClosableArea = styled.div`
   display: flex;
   flex: 1;
   min-width: 50px;
@@ -71,7 +71,7 @@ const NavItemsClosableArea = styled.div`
   background-color: rgba(255, 255, 255, 0.4);
 `;
 
-const NavItemsContainer = styled.ul` 
+const NavbarItemsContainer = styled.ul`
   width: 70%;
   list-style: none;
   margin: 0;
@@ -80,26 +80,28 @@ const NavItemsContainer = styled.ul`
   flex-direction: column;
   background: var(--navbar-background-color);
 
-  ${NavMenuItem}  { 
-    &:not(:last-child){
+  ${NavbarMenuItem} {
+    &:not(:last-child) {
       border-bottom: 1px solid var(--navbar-item-separator-line-color, #dadada);
     }
     border-radius: 0;
     padding: 1em 0;
-    width: 100%;  
+    width: 100%;
   }
-  
-  ${NavMenuItemWithDropdownWrapper} {
+
+  ${NavbarMenuItemWithDropdownWrapper} {
     display: block;
-    &:not(:last-child){
+    &:not(:last-child) {
       border-bottom: 1px solid var(--navbar-item-separator-line-color, #dadada);
       border-radius: 0;
     }
-    ${NavMenuItem}  {
+    ${NavbarMenuItem} {
       border-bottom: none;
     }
+  }
+
   ${DropdownWrapper} {
-    background-color: var(--navbar-background-color); 
+    background-color: var(--navbar-background-color);
     width: 100%;
     padding: 0;
     position: relative;

package/src/Navbar/Navbar.tsx

@@ -8,6 +8,7 @@ import { NavbarMenu } from '@theme/Navbar';
 import { useMobileMenu } from '@theme/hooks/useMobileMenu';
 import { MobileNavbarMenuButton } from '@theme/Navbar/MobileNavbarMenuButton';
 import { MobileNavbarMenu } from '@theme/Navbar/MobileNavbarMenu';
+import { ColorModeSwitcher } from '@theme/ColorModeSwitcher/ColorModeSwitcher';
 
 interface NavbarProps {
   menu: ResolvedConfigLinks;
@@ -33,10 +34,13 @@ export function Navbar({ menu, logo, search, profile }: NavbarProps): JSX.Elemen
     <NavbarContainer data-component-name="Navbar/Navbar">
       <MobileNavbarMenuButton onClick={openMobileMenu} />
       {isOpen && <MobileNavbarMenu closeMenu={closeMobileMenu} menuItems={menu} />}
-      {logo}
-      <NavbarMenu menuItems={menu} />
-      {hideSearch ? null : search}
-      {profile}
+      <NavbarRow>
+        {logo}
+        <NavbarMenu menuItems={menu} />
+        {hideSearch ? null : search}
+        {profile}
+        <ColorModeSwitcher />
+      </NavbarRow>
     </NavbarContainer>
   );
 }
@@ -45,21 +49,18 @@ export const NavbarContainer = styled.nav`
   height: var(--navbar-height);
   box-sizing: border-box;
   display: flex;
-  color: var(--navbar-text-color);
   align-items: center;
-  justify-content: space-between;
   flex-shrink: 0;
 
   font-size: 0.875rem;
   position: sticky;
   top: 0;
   z-index: 200;
-  padding: 10px var(--sidebar-margin-left);
+  padding: var(--navbar-item-paddin-vertical) var(--navbar-item-padding-horizontal);
   background: var(--navbar-background-color);
-  font-family: var(--h-font-family);
+  font-family: var(--navbar-item-font-family);
 
   ${({ theme }) => theme.mediaQueries.medium} {
-    padding: 10px var(--sidebar-margin-left);
     font-size: 1rem;
   }
 
@@ -75,3 +76,13 @@ export const NavbarContainer = styled.nav`
     }
   }
 `;
+
+export const NavbarRow = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 0 auto;
+  width: 100%;
+
+  max-width: var(--navbar-container-max-width);
+`;

package/src/Navbar/NavbarDropdown.tsx

@@ -24,7 +24,8 @@ export function NavbarDropdown({ items }: NavbarDropdownProps): JSX.Element {
 export const DropdownWrapper = styled.div`
   display: none;
   position: absolute;
-  background: var(--navbar-item-active-background-color);
+  background: var(--navbar-dropdown-background);
+  border: var(--navbar-item-border);
   border-radius: var(--navbar-item-border-radius);
   padding: 10px 15px;
   width: max-content;

package/src/Navbar/NavbarItem.tsx

@@ -24,30 +24,38 @@ export function NavbarItem({ navItem, className }: NavbarItemProps): JSX.Element
     const item = navItem as ResolvedNavLinkItem;
     const isActive = pathname === withPathPrefix(item.link);
     return (
-      <NavMenuItem active={isActive} data-component-name="Navbar/NavbarItem" className={className}>
-        <NavLink to={item.link} active={isActive}>
-          <NavLabel>{item.label}</NavLabel>
-        </NavLink>
-      </NavMenuItem>
+      <NavbarMenuItem
+        active={isActive}
+        data-component-name="Navbar/NavbarItem"
+        className={className}
+      >
+        <NavbarLink to={item.link} active={isActive}>
+          <NavbarLabel>{item.label}</NavbarLabel>
+        </NavbarLink>
+      </NavbarMenuItem>
     );
   }
 
   if ((navItem as ResolvedNavGroupItem).items) {
     const item = navItem as ResolvedNavGroupItem;
     return (
-      <NavMenuItemWithDropdownWrapper>
-        <NavMenuItem active={false} data-component-name="Navbar/NavbarItem" className={className}>
-          <NavLabel>{item.label}</NavLabel>
-        </NavMenuItem>
+      <NavbarMenuItemWithDropdownWrapper>
+        <NavbarMenuItem
+          active={false}
+          data-component-name="Navbar/NavbarItem"
+          className={className}
+        >
+          <NavbarLabel>{item.label}</NavbarLabel>
+        </NavbarMenuItem>
         <NavbarDropdown items={item.items as ResolvedNavLinkItem[]} />
-      </NavMenuItemWithDropdownWrapper>
+      </NavbarMenuItemWithDropdownWrapper>
     );
   }
 
   return null;
 }
 
-export const NavMenuItemWithDropdownWrapper = styled.div`
+export const NavbarMenuItemWithDropdownWrapper = styled.div`
   display: inline-block;
   position: relative;
   border-radius: var(--navbar-item-border-radius);
@@ -59,27 +67,36 @@ export const NavMenuItemWithDropdownWrapper = styled.div`
   }
 `;
 
-export const NavMenuItem = styled.li<{ active?: boolean }>`
+export const NavbarLink = styled(Link)`
+  color: ${({ active }) =>
+    active ? 'var(--navbar-item-active-text-color)' : 'var(--navbar-text-color)'};
+  text-decoration: ${({ active }) =>
+    active ? 'var(--navbar-item-active-text-decoration)' : 'none'};
+`;
+
+export const NavbarMenuItem = styled.li<{ active?: boolean }>`
   display: inline-block;
-  padding: 8px calc(var(--sidebar-spacing-horizontal) * 2);
+  padding: var(--navbar-item-paddin-vertical) var(--navbar-item-padding-horizontal);
+  margin-left: var(--navbar-item-margin-horizontal);
   text-align: center;
   line-height: 1;
   font-size: var(--navbar-item-font-size);
-  margin-left: var(--navbar-item-margin-horizontal);
-  margin-right: var(--navbar-item-margin-horizontal);
   border-radius: var(--navbar-item-border-radius);
   font-weight: var(--navbar-item-font-weight);
-  background: ${({ active }) => (active ? 'var(--navbar-item-active-background-color)' : 'none')};
-`;
-
-export const NavLink = styled(Link)`
-  color: ${({ active }) =>
-    active ? 'var(--navbar-item-active-text-color)' : 'var(--navbar-text-color)'};
-  text-decoration: ${({ active }) =>
-    active ? 'var(--navbar-item-active-text-decoration)' : 'none'};
+  background: ${({ active }) => active && 'var(--navbar-item-active-background-color)'};
+  color: ${({ active }) => active && 'var(--navbar-item-active-text-color)'};
+  &:hover {
+    color: var(--navbar-item-hover-text-color);
+    text-decoration: var(--navbar-item-hover-text-decoration);
+    background: var(--navbar-item-hover-background-color);
+    ${NavbarLink} {
+      color: var(--navbar-item-hover-text-color);
+      text-decoration: var(--navbar-item-hover-text-decoration);
+    }
+  }
 `;
 
-const NavLabel = styled.span`
+const NavbarLabel = styled.span`
   cursor: pointer;
   vertical-align: middle;
 `;

package/src/Navbar/NavbarMenu.tsx

@@ -4,10 +4,10 @@ import styled from 'styled-components';
 import type { ResolvedConfigLinks, ResolvedNavItem } from '@theme/types/portal';
 
 import { NavbarItem } from '@theme/Navbar/NavbarItem';
-import { isPrimitive, isEmptyArray } from '@theme/utils';
+import { isPrimitive } from '@theme/utils';
 
 export function NavbarMenu({ menuItems }: { menuItems: ResolvedConfigLinks }): JSX.Element | null {
-  if (isPrimitive(menuItems) || isEmptyArray(menuItems)) {
+  if (isPrimitive(menuItems)) {
     return null;
   }
 
@@ -24,7 +24,7 @@ export function NavbarMenu({ menuItems }: { menuItems: ResolvedConfigLinks }): J
 
 const NavItemsContainer = styled.ul`
   list-style: none;
-  margin: 0 7px;
+  margin: 0 var(--navbar-item-margin-horizontal);
   padding: 0;
   display: none;
   flex-wrap: nowrap;

package/src/NavbarLogo/NavbarLogo.tsx

@@ -17,8 +17,8 @@ export function NavbarLogo({ logo }: NavbarLogoProps): JSX.Element | null {
 }
 
 const NavLogo = styled.img`
-  max-width: var(--logo-max-width);
-  max-height: var(--logo-max-height);
-  height: var(--logo-height);
-  margin: var(--logo-margin);
+  max-width: var(--navbar-logo-max-width);
+  max-height: var(--navbar-logo-max-height);
+  height: var(--navbar-logo-height);
+  margin: var(--navbar-logo-margin);
 `;

package/src/OperationBadge/OperationBadge.ts

@@ -7,15 +7,14 @@ export const OperationBadge = styled.span.attrs((props: { type: string }) => ({
   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);
-  line-height: var(--http-badge-menu-line-height);
-  color: var(--http-badge-color);
-  background-color: #333;
-  border-radius: var(--http-badge-border-radius);
-  width: 36px;
-  height: 14px;
+  font-size: var(--badge-http-font-size);
+  font-family: var(--badge-http-font-family);
+  font-weight: var(--badge-http-font-weight);
+  line-height: var(--badge-http-line-height);
+  color: var(--badge-http-text-color);
+  background-color: var(--badge-background-color);
+  border-radius: var(--badge-http-border-radius);
+  width: 58px;
   text-transform: uppercase;
   text-align: center;
   margin-right: 6px;

package/src/PageNavigation/PageNavigation.tsx

@@ -6,7 +6,15 @@ import { NextPageLink } from '@theme/PageNavigation/NextPageLink';
 import { useThemeSettings } from '@portal/hooks';
 import { DEFAULT_THEME_NAME } from '@portal/constants';
 
-export function PageNavigation(): JSX.Element | null {
+type PageNavigationProps = {
+  showPrevButton?: boolean;
+  showNextButton?: boolean;
+};
+
+export function PageNavigation({
+  showPrevButton = true,
+  showNextButton = true,
+}: PageNavigationProps): JSX.Element | null {
   const { navigation } = useThemeSettings(DEFAULT_THEME_NAME);
 
   if (navigation?.hide) {
@@ -15,8 +23,8 @@ export function PageNavigation(): JSX.Element | null {
 
   return (
     <PageNavigationWrapper data-component-name="PageNavigation/PageNavigation">
-      <PreviousPageLink />
-      <NextPageLink />
+      {showPrevButton && <PreviousPageLink />}
+      {showNextButton && <NextPageLink />}
     </PageNavigationWrapper>
   );
 }