@redocly/theme 0.3.0 → 0.4.0

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

@@ -34,11 +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}
-      <ColorModeSwitcher />
+      <NavbarRow>
+        {logo}
+        <NavbarMenu menuItems={menu} />
+        {hideSearch ? null : search}
+        {profile}
+        <ColorModeSwitcher />
+      </NavbarRow>
     </NavbarContainer>
   );
 }
@@ -47,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;
   }
 
@@ -77,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

@@ -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/Panel/Panel.ts

@@ -3,18 +3,32 @@ import styled from 'styled-components';
 import { PanelHeader } from '@theme/Panel/PanelHeader';
 import { PanelBody } from '@theme/Panel/PanelBody';
 import { PanelComponent } from '@theme/Panel/PanelComponent';
+import { ShelfIcon } from '@theme/icons/ShelfIcon';
 
-export const Panel = styled(PanelComponent).attrs(() => ({
+export const Panel = styled(PanelComponent).attrs(({ className }) => ({
   'data-component-name': 'Panel/Panel',
+  className: className || 'panel-default',
 }))`
-  border-radius: var(--panels-border-radius);
+  background-color: var(--panel-background-color);
+  color: var(--panel-text-color);
+  font-family: var(--panel-font-family-local);
+  font-size: var(--panel-font-size-local);
+  font-weight: var(--panel-font-weight-local);
+  border: var(--panel-border-local);
+  border-radius: var(--panel-border-radius);
 
   ${PanelHeader} + ${PanelBody} {
     border-top-left-radius: 0;
     border-top-right-radius: 0;
   }
 
+  ${PanelHeader} {
+    ${ShelfIcon} {
+      fill: var(--panel-chevron-icon-color); // ?????
+    }
+  }
+
   &:not(:last-child) {
-    margin-bottom: 10px;
+    margin-bottom: var(--panel-gap-vertical);
   }
 `;

package/src/Panel/PanelBody.ts

@@ -24,9 +24,17 @@ export const PanelBody = styled.div.attrs(() => ({
   ${({ animate }) => animate && showPanelAnimation};
   ${({ hidden }) => hidden && 'visibility: hidden'};
 
-  border-top-left-radius: var(--panels-border-radius);
-  border-top-right-radius: var(--panels-border-radius);
-  border-bottom-right-radius: var(--panels-border-radius);
-  border-bottom-left-radius: var(--panels-border-radius);
-  background-color: var(--panels-background-color);
+  background-color: var(--panel-body-background-color);
+
+  font-family: var(--panel-body-font-family-local);
+  font-size: var(--panel-body-font-size-local);
+  font-weight: var(--panel-body-font-weight-local);
+  border: var(--panel-body-border-local);
+  padding: var(--panel-body-padding-local);
+  color: var(--panel-body-text-color);
+
+  border-top-left-radius: var(--panel-border-radius);
+  border-top-right-radius: var(--panel-border-radius);
+  border-bottom-right-radius: var(--panel-border-radius);
+  border-bottom-left-radius: var(--panel-border-radius);
 `;

package/src/Panel/PanelComponent.tsx

@@ -17,6 +17,7 @@ export interface PanelComponentProps {
   className?: string;
   header?: ReactNode | ((props: PanelHeaderProps) => ReactNode);
   onToggle?: (expanded: boolean) => void;
+  description?: React.ReactNode;
 }
 
 export function PanelComponent({
@@ -25,6 +26,7 @@ export function PanelComponent({
   className,
   children,
   onToggle,
+  description,
 }: PropsWithChildren<PanelComponentProps>): JSX.Element {
   const [isExpanded, setExpanded] = useState(expanded);
   const [animate, setAnimate] = useState(false);
@@ -54,6 +56,7 @@ export function PanelComponent({
             <InlineBox>
               <PanelHeaderTitle data-cy="title">{header}</PanelHeaderTitle>
               <ShelfIcon direction={isExpanded ? 'down' : 'right'} />
+              {description}
             </InlineBox>
           </PanelHeader>
         ))}

package/src/Panel/PanelHeader.ts

@@ -2,7 +2,7 @@ import { BaseSyntheticEvent } from 'react';
 import styled from 'styled-components';
 
 export interface PanelHeaderProps {
-  expanded: boolean;
+  expanded?: boolean;
   disabled?: boolean;
   toggle?: (e: BaseSyntheticEvent) => void;
 }
@@ -15,13 +15,20 @@ export const PanelHeader = styled.div.attrs(() => ({
   display: flex;
   align-items: center;
   justify-content: space-between;
-  white-space: nowrap;
+  white-space: var(--panel-heading-white-space-local);
+
   cursor: pointer;
 
-  border-top-left-radius: var(--panels-border-radius);
-  border-top-right-radius: var(--panels-border-radius);
-  border-bottom-right-radius: ${({ expanded }) => (expanded ? '0' : 'var(--panels-border-radius)')};
-  border-bottom-left-radius: ${({ expanded }) => (expanded ? '0' : 'var(--panels-border-radius)')};
+  line-height: var(--panel-heading-line-height-local);
+  font-size: var(--panel-heading-font-size-local);
+  padding: var(--panel-heading-padding-local);
+  border: var(--panel-heading-border);
+  background-color: var(--panel-heading-background-color);
+
+  border-top-left-radius: var(--panel-border-radius);
+  border-top-right-radius: var(--panel-border-radius);
+  border-bottom-right-radius: ${({ expanded }) => (expanded ? '0' : 'var(--panel-border-radius)')};
+  border-bottom-left-radius: ${({ expanded }) => (expanded ? '0' : 'var(--panel-border-radius)')};
 
   pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')};
 `;

package/src/Panel/PanelHeaderTitle.ts

@@ -3,11 +3,13 @@ import styled from 'styled-components';
 export const PanelHeaderTitle = styled.span.attrs(() => ({
   'data-component-name': 'Panel/PanelHeaderTitle',
 }))`
-  line-height: 1;
   margin-right: 5px;
-  font-weight: 700;
-  /* changed from var(--color-content-inverse) to var(--color-content)
+  font-weight: var(--panel-heading-font-weight-local);
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  /* changed from var(--text-color-inverse) to var(--text-color)
      should change several components in openapi/graphql reference-docs to use inverse color
    */
-  color: var(--color-content);
+  color: var(--panel-heading-text-color);
 `;

package/src/Panel/index.ts

@@ -1,6 +1,3 @@
-export * from '@theme/Panel/CodePanel';
-export * from '@theme/Panel/ContentPanel';
-export * from '@theme/Panel/DarkHeader';
 export * from '@theme/Panel/Panel';
 export * from '@theme/Panel/PanelBody';
 export * from '@theme/Panel/PanelComponent';

package/src/Profile/Profile.tsx

@@ -49,7 +49,7 @@ const ProfileWrapper = styled.div`
   align-items: center;
   cursor: pointer;
   width: auto;
-  padding-left: calc(var(--sidebar-spacing-horizontal) * 2);
+  padding: 0 var(--navbar-item-padding-horizontal);
 `;
 
 const StyledUserName = styled.span`

package/src/SamplesPanelControls/SamplesPanelControls.ts

@@ -5,25 +5,25 @@ import { CodeBlock } from '@theme/CodeBlock';
 export const SamplesControlButton = styled.button.attrs(() => ({
   'data-component-name': 'SamplesPanelControls/SamplesPanelControls',
 }))`
-  background-color: var(--samples-panel-controls-background-color);
+  background-color: var(--panel-samples-controls-background-color);
   border: 0;
   outline: 0;
-  border-radius: var(--global-border-radius);
+  border-radius: var(--border-radius);
   height: 20px;
-  color: var(--color-content-inverse);
+  color: var(--panel-samples-controls-text-color);
   font-size: 12px;
   line-height: 12px;
   cursor: pointer;
   padding: 1px 6px;
   min-width: 90px;
 
-  ${({ theme }) => theme.mediaQueries.small} {
+  ${({ theme }) => theme.mediaQueries?.small} {
     padding: 2px 20px;
   }
 
   :hover,
   :focus {
-    background-color: var(--samples-panel-controls-hover-background-color);
+    background-color: var(--panel-samples-controls-hover-background-color);
   }
 `;
 
@@ -43,7 +43,7 @@ export const SampleControls = styled.div`
     margin-top: 5px;
     margin-left: 10px;
 
-    ${({ theme }) => theme.mediaQueries.small} {
+    ${({ theme }) => theme.mediaQueries?.small} {
       margin-top: 0;
     }
 
@@ -64,9 +64,9 @@ export const PreformattedCodeBlock = styled(CodeBlock.withComponent('pre'))`
   margin: 0;
   font-family: var(--code-font-family);
   padding: 20px;
-  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-controls-background-color);
+  color: var(--text-color-inverse);
   font-size: var(--code-font-size);
   white-space: var(--code-wrap, pre);
 `;

package/src/Search/Autocomplete.tsx

@@ -125,5 +125,5 @@ const Overlay = styled.div`
 
 const Message = styled.div`
   padding: 24px;
-  color: var(--color-content);
+  color: var(--text-color);
 `;

package/src/Search/Input.tsx

@@ -6,7 +6,7 @@ export const FormInput = styled.input.attrs(() => ({
   padding: 1em 2.5em 1em 1em;
   background-color: var(--search-input-background-color);
   border-radius: var(--search-input-border-radius);
-  border: none;
+  border: var(--search-input-border);
   outline: none;
   color: var(--search-input-text-color);
   font-size: var(--search-input-font-size);
@@ -14,6 +14,11 @@ export const FormInput = styled.input.attrs(() => ({
   line-height: var(--search-input-line-height);
 
   ::placeholder {
-    color: var(--search-input-text-color);
+    color: var(--search-input-placeholder-color);
+  }
+
+  &:hover {
+    background-color: var(--search-input-hover-background-color);
+    border: var(--search-input-hover-border);
   }
 `;

package/src/Search/Parameters.tsx

@@ -39,7 +39,7 @@ export function Parameters({ parameters = [] }: ParametersProps): JSX.Element {
 }
 
 const Wrapper = styled.div`
-  border-left: 1px solid var(--global-border-color);
+  border-left: 1px solid var(--border-color);
   padding: 0 12px;
   margin-top: 8px;
   margin-bottom: 4px;

package/src/Search/Popover.tsx

@@ -12,9 +12,9 @@ export const Popover = styled.div.attrs(() => ({
   max-width: 90vw;
   max-height: 400px;
   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(--search-popover-backgrond-color);
+  box-shadow: var(--search-popover-shadow);
+  background: var(--search-popover-background-color);
   list-style: none;
   border-radius: var(--search-popover-border-radius);
+  border: var(--search-popover-border);
 `;

package/src/Search/Search.tsx

@@ -49,4 +49,6 @@ export function Search(): JSX.Element {
   );
 }
 
-const Wrapper = styled.div``;
+const Wrapper = styled.div`
+  margin: 0 auto;
+`;

package/src/Search/SearchItem.tsx

@@ -41,18 +41,31 @@ export function SearchItem({ item }: SearchItemProps): JSX.Element {
   );
 }
 
+const Title = styled.div`
+  font-weight: var(--font-weight-bold);
+  color: var(--search-item-title-text-color);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: var(--line-height-base);
+`;
+
 const SearchLink = styled(Link)`
   display: block;
   text-decoration: none;
-  padding: 8px 24px;
+  padding: var(--search-item-padding);
   transition: background-color 0.3s ease;
   outline: none;
   white-space: nowrap;
   color: var(--search-item-text-color);
+  background-color: var(--search-item-background-color);
 
   &:hover,
   &:focus {
+    color: var(--search-item-active-text-color);
     background-color: var(--search-item-active-background-color);
+    ${Title} {
+      color: var(--search-item-active-title-text-color);
+    }
   }
 `;
 
@@ -64,14 +77,6 @@ const Operation = styled.div`
   text-overflow: ellipsis;
 `;
 
-const Title = styled.div`
-  font-weight: var(--font-weight-bold);
-  color: var(--search-item-title-text-color);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  line-height: var(--line-height-base);
-`;
-
 const Description = styled.div`
   font-size: var(--font-size-base);
   overflow: hidden;

package/src/Search/utils.tsx

@@ -15,5 +15,5 @@ export const highlight = (text: string | string[]): JSX.Element | string => {
 };
 
 const Strong = styled.strong`
-  color: var(--color-content);
+  color: var(--search-highlight-text-color);
 `;

package/src/Sidebar/ApiCallItem.tsx

@@ -29,4 +29,11 @@ const Wrapper = styled.div``;
 export const Badge = styled(OperationBadge)`
   flex-shrink: 0;
   margin-top: 0;
+  width: 36px;
+  height: 14px;
+  font-size: var(--sidebar-item-badge-http-font-size);
+  font-family: var(--sidebar-item-badge-http-font-family);
+  font-weight: var(--sidebar-item-badge-http-font-weight);
+  border-radius: var(--sidebar-item-badge-http-border-radius);
+  color: var(--sidebar-item-badge-http-text-color);
 `;

package/src/Sidebar/ArrowBack.tsx

@@ -18,5 +18,5 @@ const Arrow = ({ className }: { className?: string }): JSX.Element => (
 );
 
 export const ArrowBack = styled(Arrow)`
-  fill: var(--sidebar-chevron-color);
+  fill: var(--sidebar-group-item-chevron-color);
 `;