@redocly/theme 0.3.0 → 0.4.0

package/src/Sidebar/BackButton.tsx

@@ -21,24 +21,29 @@ export function BackButton({
 
 const Button = styled.button`
   width: 100%;
-  background-color: transparent;
+  background-color: var(--sidebar-back-button-background-color);
   padding: 0;
   border: 0;
   outline: 0;
-  color: var(--color-content);
   display: flex;
   align-items: center;
   cursor: pointer;
-  font-size: var(--sidebar-font-size);
+  color: var(--sidebar-back-button-text-color);
+  font-size: var(--sidebar-back-button-font-size);
+  font-family: var(--sidebar-back-button-font-family);
+  text-transform: var(--sidebar-back-button-transform);
+
   transition: color 0.25s ease;
   text-align: left;
-  margin-bottom: calc(var(--sidebar-spacing-padding-vertical) * 3);
+  margin: var(--sidebar-back-button-margin);
 
   svg {
     margin-right: calc(var(--sidebar-spacing-unit) * 1.5);
+    fill: var(--sidebar-back-button-icon-color);
   }
 
   &:hover {
-    color: var(--sidebar-item-color);
+    color: var(--sidebar-back-button-hover-text-color);
+    background: var(--sidebar-back-button-hover-background-color);
   }
 `;

package/src/Sidebar/Drilldown.tsx

@@ -34,9 +34,7 @@ export function Drilldown({
 const Wrapper = styled.div``;
 
 const DrilldownLabel = styled(MenuItemLabel)`
-  padding-top: calc(var(--sidebar-spacing-padding-vertical) * 2);
-  padding-bottom: calc(var(--sidebar-spacing-padding-vertical) * 2);
-  padding-left: var(--sidebar-spacing-padding-horizontal);
+  padding: var(--sidebar-item-nested-offset) var(--sidebar-item-padding-horizontal);
   font-weight: var(--font-weight-bold);
 
   &:hover {

package/src/Sidebar/DrilldownMenu.tsx

@@ -31,7 +31,7 @@ const MenuContainer = styled.div`
   bottom: 0;
   width: 100%;
   z-index: 100;
-  background-color: var(--sidebar-background-color);
+  background-color: var(--sidebar-item-drilldown-background-color);
 `;
 
 const slideInAnimation = keyframes`
@@ -52,7 +52,7 @@ const MenuContent = styled.div`
 `;
 
 const MenuWrapper = styled.div`
-  padding: var(--sidebar-spacing-padding-vertical) var(--sidebar-spacing-padding-horizontal);
+  padding: var(--sidebar-item-padding-vertical) var(--sidebar-item-padding-horizontal);
   margin-bottom: calc(var(--sidebar-spacing-unit) * 3);
   word-break: break-word;
 `;

package/src/Sidebar/DrilldownMenuItem.tsx

@@ -18,23 +18,27 @@ export function DrilldownMenuItem({ item }: MenuItemProps): JSX.Element {
 const Container = styled.div`
   display: flex;
   align-items: center;
-  color: var(--sidebar-item-color);
-  font-size: var(--sidebar-font-size);
+  color: var(--sidebar-item-drilldown-text-color);
   font-weight: var(--font-weight-bold);
+  font-size: var(--sidebar-item-drilldown-font-size);
+  font-family: var(--sidebar-item-drilldown-font-family);
+  text-transform: var(--sidebar-text-drilldown-transform);
+  background: var(--sidebar-item-drilldown-background-color);
 `;
 
 const Icon = styled.img`
-  width: calc(var(--sidebar-spacing-unit) * 4);
-  height: calc(var(--sidebar-spacing-unit) * 4);
+  width: var(--sidebar-item-icon-size);
+  height: var(--sidebar-item-icon-size);
   margin-right: var(--sidebar-spacing-unit);
-  border-radius: 50%;
+  border-radius: var(--sidebar-item-icon-border-radius);
   flex-shrink: 0;
   overflow: hidden;
 `;
 
 const SubLabel = styled.div`
   margin-top: 2px;
-  font-size: 0.85rem;
-  color: var(--color-content);
-  font-weight: var(--font-weight-regular);
+  color: var(--sidebar-item-sublabel-text-color);
+  font-weight: var(-sidebar-item-sublabel-font-weight);
+  font-size: var(--sidebar-item-sublabel-font-size);
+  font-family: var(--sidebar-item-sublabel-font-family);
 `;

package/src/Sidebar/ExternalIcon.tsx

@@ -33,5 +33,5 @@ export const ExternalIcon = styled(Icon)`
   width: 10px;
   height: 10px;
   margin-left: 5px;
-  fill: var(--sidebar-chevron-color);
+  fill: var(--sidebar-group-item-chevron-color);
 `;

package/src/Sidebar/Menu.tsx

@@ -6,6 +6,6 @@ export const Menu = styled.ul.attrs(() => ({
   padding: 0;
   margin: 0;
   list-style: none;
-  color: var(--sidebar-item-color);
+  color: var(--sidebar-item-text-color);
   position: relative;
 `;

package/src/Sidebar/MenuContainer.tsx

@@ -6,5 +6,5 @@ export const MenuContainer = styled.div.attrs(() => ({
   position: relative;
   overflow-y: auto;
   flex-grow: 1;
-  padding-top: var(--sidebar-spacing-offset-top);
+  padding-top: var(--sidebar-offset-top);
 `;

package/src/Sidebar/MenuGroup.tsx

@@ -42,12 +42,22 @@ export function MenuGroup({
 const Wrapper = styled.div``;
 
 const MenuWrapper = styled.div`
-  padding-left: var(--sidebar-spacing-offset-nesting);
+  padding-left: var(--sidebar-item-nested-offset);
 `;
 
 const MenuGroupLabel = styled(MenuItemLabel)<{ isAlwaysExpanded?: boolean }>`
-  padding-left: var(--sidebar-spacing-padding-horizontal);
+  padding-left: var(--sidebar-item-padding-horizontal);
   cursor: ${(props) => (props.isAlwaysExpanded ? 'default' : 'pointer')};
+  font-family: var(--sidebar-item-group-font-family);
+  font-size: var(--sidebar-item-group-font-size);
+  text-transform: var(--sidebar-text-group-transform);
+  color: var(--sidebar-item-group-text-color);
+  background: var(--sidebar-item-group-background-color);
+  ${(props) =>
+    props.active
+      ? `color: var(--sidebar-item-group-active-text-color);
+        background-color: var(--sidebar-item-group-active-background-color);`
+      : null};
 `;
 
 const MenuGroupArrow = styled(ArrowIcon)`

package/src/Sidebar/MenuItemLabel.tsx

@@ -10,17 +10,17 @@ export const MenuItemLabel = styled.li.attrs(() => ({
   word-break: break-word;
   margin-bottom: 1px;
 
-  font-family: var(--sidebar-font-family);
-  font-size: var(--sidebar-font-size);
+  background-color: var(--sidebar-item-background-color);
+  font-family: var(--sidebar-item-font-family);
+  font-size: var(--sidebar-item-font-size);
   font-weight: var(--font-weight-regular);
-  margin-left: var(--sidebar-spacing-offset-left);
-  padding: var(--sidebar-spacing-padding-vertical) var(--sidebar-spacing-padding-horizontal);
+  margin-left: var(--sidebar-offset-left);
+  padding: var(--sidebar-item-padding-vertical) var(--sidebar-item-padding-horizontal);
   padding-left: calc(
-    var(--sidebar-spacing-padding-horizontal) + var(--sidebar-chevron-size) +
+    var(--sidebar-item-padding-horizontal) + var(--sidebar-group-item-chevron-size) +
       var(--sidebar-spacing-unit) * 0.5
   );
-  border-top-left-radius: var(--sidebar-border-radius);
-  border-bottom-left-radius: var(--sidebar-border-radius);
+  border-radius: var(--sidebar-item-border-radius);
 
   ${(props) =>
     props.active

package/src/Sidebar/MenuLink.tsx

@@ -6,7 +6,7 @@ export const MenuLink = styled(UniversalLink).attrs(() => ({
   'data-component-name': 'Sidebar/MenuLink',
 }))<UniversalLinkProps>`
   text-decoration: none;
-  color: var(--sidebar-item-color);
+  color: var(--sidebar-item-text-color);
 
   &&.external-url:after {
     content: none;

package/src/Sidebar/SeparatorItem.tsx

@@ -7,7 +7,11 @@ export const SeparatorItem = styled(MenuItemLabel).attrs(() => ({
 }))`
   cursor: default;
   font-weight: var(--font-weight-bold);
-  color: var(--sidebar-separator-label-color);
+  color: var(--sidebar-separator-item-color);
+  font-family: var(--sidebar-item-separator-font-family);
+  font-size: var(--sidebar-item-separator-font-size);
+  text-transform: var(--sidebar-item-separator-text-transform);
+  background: var(--sidebar-item-separator-background-color);
 
   :hover {
     color: inherit;

package/src/Sidebar/SeparatorLine.tsx

@@ -4,6 +4,6 @@ export const SeparatorLine = styled.div.attrs(() => ({
   'data-component-name': 'Sidebar/SeparatorLine',
 }))`
   height: 1px;
-  background-color: var(--sidebar-separator-line-color);
-  margin: var(--sidebar-spacing-padding-vertical) 0;
+  background-color: var(--sidebar-item-separator-line-color);
+  margin: var(--sidebar-item-padding-vertical) 0;
 `;

package/src/Sidebar/Sidebar.tsx

@@ -8,16 +8,16 @@ interface SidebarProps {
 export const Sidebar = styled.aside.attrs(() => ({
   'data-component-name': 'Sidebar/Sidebar',
 }))<SidebarProps>`
-  border-right: 1px solid var(--sidebar-right-line-color);
+  border-right: 1px solid var(--sidebar-border-color);
   position: fixed;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 2;
   background: var(--sidebar-background-color);
-  font-size: var(--sidebar-font-size);
-  font-family: var(--sidebar-font-family);
-  color: var(--sidebar-item-color);
+  font-size: var(--sidebar-item-font-size);
+  font-family: var(--sidebar-item-font-family);
+  color: var(--sidebar-item-text-color);
   top: var(--navbar-height);
   height: calc(100vh - var(--navbar-height));
   display: flex;

package/src/SidebarLogo/SidebarLogo.tsx

@@ -34,9 +34,9 @@ export function SidebarLogo({
 }
 
 const LogoImgEl = styled.img`
-  max-height: var(--logo-max-height);
-  max-width: var(--logo-max-width);
-  padding: var(--logo-padding);
+  max-height: var(--sidebar-logo-max-height);
+  max-width: var(--sidebar-logo-max-width);
+  padding: var(--sidebar-logo-padding);
   width: 100%;
   display: block;
 `;

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};