@redocly/theme 0.2.2 → 0.4.0

package/src/TableOfContent/TableOfContent.tsx

@@ -71,28 +71,32 @@ export function TableOfContent(props: TableOfContentProps): JSX.Element | null {
 }
 
 const TocHeader = styled.div`
-  font-size: 0.8em;
-  padding: 10px 15px;
-  font-weight: bold;
+  font-family: var(--toc-heading-font-family);
+  font-size: var(--toc-heading-font-size);
+  font-weight: var(--toc-heading-font-weight);
+  padding: var(--toc-item-padding-vertical) var(--toc-item-padding-horizontal);
+  color: var(--toc-heading-text-color);
   text-transform: uppercase;
 `;
 
 const MenuItem = styled.a<{ depth: number }>`
   display: block;
-  color: var(--color-content);
+  color: var(--toc-item-text-color);
+  background-color: var(--toc-item-background-color);
   cursor: pointer;
-  font-size: 0.8em;
-  padding: 10px 15px;
-  padding-left: ${({ depth }) => depth * 15}px;
+  font-size: var(--toc-item-font-size);
+  font-family: var(--toc-item-font-family);
+  padding: var(--toc-item-padding-vertical) var(--toc-item-padding-horizontal);
+  padding-left: calc(var(--toc-item-nested-offset) * ${({ depth }) => depth});
   transition: background-color 0.3s, color 0.3s;
   text-decoration: none;
   word-break: break-word;
-  font-family: var(--h-font-family);
+  font-family: var(--heading-font-family);
 
   :hover,
   &.active {
-    color: var(--sidebar-item-active-color);
-    background-color: var(--sidebar-item-active-background-color);
+    color: var(--toc-item-active-text-color);
+    background-color: var(--toc-item-active-background-color);
   }
 
   :empty {
@@ -101,11 +105,9 @@ const MenuItem = styled.a<{ depth: number }>`
 `;
 
 const TableOfContentMenu = styled.aside`
-  font-size: 1rem;
-  background-color: transparent;
+  background-color: var(--toc-background-color);
   flex-shrink: 0;
   display: none !important;
-  font-family: var(--font-family-base);
 
   ${({ theme }) => theme.mediaQueries.medium} {
     width: var(--toc-width);
@@ -115,9 +117,9 @@ const TableOfContentMenu = styled.aside`
 
 const TableOfContentItems = styled.div`
   position: sticky;
-  top: calc(var(--navbar-height) + 20px);
-  max-height: calc(100vh - var(--navbar-height) - 20px);
-  border-left: 1px solid var(--global-border-color);
+  top: calc(var(--navbar-height) + var(--toc-offset-top));
+  max-height: calc(100vh - var(--navbar-height) - var(--toc-offset-top));
+  border-left: 1px solid var(--toc-border-color);
   overflow-y: auto;
   width: var(--toc-width); ;
 `;

package/src/Tooltip/Tooltip.tsx

@@ -172,7 +172,7 @@ const TooltipBody = styled.span<
   white-space: normal;
   overflow-wrap: break-word;
 
-  border-radius: var(--global-border-radius);
+  border-radius: var(--border-radius);
   transition: opacity 0.3s ease-out;
 
   font-size: 13px;
@@ -188,7 +188,7 @@ const TooltipBody = styled.span<
   }
 
   background: var(--tooltip-background-color);
-  color: var(--tooltip-color);
+  color: var(--tooltip-text-color);
   box-shadow: rgb(0 0 0 / 25%) 0 2px 4px;
 
   width: ${({ width }) => width || '120px'};

package/src/Typography/H1.ts

@@ -5,8 +5,8 @@ import { typography } from '@theme/utils';
 export const H1 = styled.h1.attrs(() => ({
   'data-component-name': 'Typography/H1',
 }))`
-  color: var(--color-content);
-  margin: 0 0 25px;
+  color: var(--h1-text-color);
+  margin: var(--h1-margin-top) 0 var(--h1-margin-bottom);
 
   ${typography('h1', 'h')};
 `;

package/src/Typography/H2.ts

@@ -5,8 +5,8 @@ import { typography } from '@theme/utils';
 export const H2 = styled.h2.attrs(() => ({
   'data-component-name': 'Typography/H2',
 }))`
-  color: var(--color-content);
-  margin: 0 0 20px;
+  color: var(--h2-text-color);
+  margin: var(--h2-margin-top) 0 var(--h2-margin-bottom);
 
   ${typography('h2', 'h')};
 `;

package/src/Typography/H3.ts

@@ -5,7 +5,8 @@ import { typography } from '@theme/utils';
 export const H3 = styled.h3.attrs(() => ({
   'data-component-name': 'Typography/H3',
 }))`
-  color: var(--color-content);
+  color: var(--h3-text-color);
+  margin: var(--h3-margin-top) 0 var(--h3-margin-bottom);
 
   ${typography('h3', 'h')};
 `;

package/src/Typography/SectionHeader.ts

@@ -3,11 +3,11 @@ import styled from 'styled-components';
 export const SectionHeader = styled.h2.attrs(() => ({
   'data-component-name': 'Typography/SectionHeader',
 }))`
-  color: var(--h-color);
-  font-size: 1.75em;
-  font-weight: var(--font-weight-regular);
+  color: var(--h2-color);
+  font-size: var(--h2-font-size);
+  font-weight: var(--h2-font-weight);
   text-align: center;
   margin: 2.65em 0;
   padding: 0 20px;
-  font-family: var(--h-font-family);
+  font-family: var(--h2-font-family);
 `;

package/src/Typography/Typography.ts

@@ -16,7 +16,7 @@ export interface TypographyProps {
 export const Typography = styled.div.attrs(() => ({
   'data-component-name': 'Typography/Typography',
 }))<TypographyProps>`
-  color: ${({ color }) => color || 'var(--color-content)'};
+  color: ${({ color }) => color || 'var(--text-color)'};
   font-family: ${({ fontFamily }) => fontFamily || 'var(--font-family-base)'};
   font-size: ${({ fontSize }) => fontSize || 'var(--font-size-base)'};
   font-style: ${({ fontStyle }) => fontStyle};