@redocly/theme 0.18.2 → 0.18.3-patch.0

package/src/components/Select/Select.tsx

@@ -12,6 +12,10 @@ export interface SelectProps {
   withArrow?: boolean;
   triggerEvent?: 'click' | 'hover';
   onChange?: (value: React.ReactNode | string) => void;
+  placement?: 'top' | 'bottom';
+  alignment?: 'start' | 'end';
+  icon?: React.ReactNode;
+  onlyIcon?: boolean;
 }
 
 export const Select = ({
@@ -22,6 +26,10 @@ export const Select = ({
   withArrow,
   triggerEvent = 'click',
   onChange,
+  placement,
+  alignment,
+  icon,
+  onlyIcon,
 }: SelectProps) => {
   const selectRef = useRef<HTMLDivElement | null>(null);
 
@@ -64,11 +72,14 @@ export const Select = ({
       onClick={triggerEvent === 'click' ? handleToggle : undefined}
     >
       <SelectInput>
-        <SelectInputValue withArrow={withArrow}>{_selected}</SelectInputValue>
+        {!onlyIcon && (
+          <SelectInputValue withIcon={withArrow || !!icon}>{_selected}</SelectInputValue>
+        )}
+        {icon}
         {withArrow ? isOpen ? <ArrowIcon direction="up" /> : <ArrowIcon direction="down" /> : null}
       </SelectInput>
       {isOpen && (
-        <SelectList>
+        <SelectList placement={placement} alignment={alignment}>
           {options.map((option, index) => (
             <SelectListItem key={index} onClick={() => handleSelect(option)}>
               {option}
@@ -104,15 +115,17 @@ export const SelectInput = styled.div`
   cursor: pointer;
 `;
 
-export const SelectInputValue = styled.div<{ withArrow?: boolean }>`
+export const SelectInputValue = styled.div<{ withIcon?: boolean }>`
   pointer-events: none;
-  ${({ withArrow }) => (withArrow ? 'margin-right: 8px;' : '')}
+  ${({ withIcon }) => (withIcon ? 'margin-right: 8px;' : '')}
 `;
 
-export const SelectList = styled.ul`
+export const SelectList = styled.ul<{ placement?: string; alignment?: string }>`
   position: absolute;
-  top: 100%;
-  left: 0;
+  top: ${({ placement }) => (placement === 'top' ? 'auto' : '100%')};
+  bottom: ${({ placement }) => (placement === 'top' ? '100%' : 'auto')};
+  left: ${({ alignment }) => (alignment === 'start' ? '0' : 'auto')};
+  right: ${({ alignment }) => (alignment === 'end' ? '0' : 'auto')};
   margin: 0;
   min-width: var(--select-list-min-width);
   max-width: var(--select-list-max-width);

package/src/components/Select/index.ts

@@ -1 +1,2 @@
 export * from '@theme/components/Select/Select';
+export * from '@theme/components/Select/styledVariables';

package/src/components/Select/styledVariables.ts

@@ -0,0 +1,30 @@
+import { css } from "styled-components";
+
+export const select = css`
+  /**
+    * @tokens Select
+    * */
+  --select-font-size: var(--font-size-base); // @presenter FontSize
+  --select-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --select-line-height: var(--line-height-base); // @presenter LineHeight
+  --select-text-color: var(--text-secondary); // @presenter Color
+  --select-border-radius: var(--border-radius); // @presenter BorderRadius
+
+  --select-input-padding-horizontal: 16px;  // @presenter Spacing
+  --select-input-padding-vertical: 6px;  // @presenter Spacing
+  --select-input-border-radius: var(--border-radius); // @presenter BorderRadius
+
+  --select-list-min-width: 100px;
+  --select-list-max-width: 300px;
+  --select-list-padding: var(--spacing-xxs); // @presenter Spacing
+  --select-list-border-radius: var(--border-radius-lg); // @presenter BorderRadius
+  --select-list-background-color: var(--background-color); // @presenter Color
+  --select-list-box-shadow: var(--bg-raised-shadow); // @presenter Shadow
+
+  --select-list-item-horizontal-padding: var(--spacing-base); // @presenter Spacing
+  --select-list-item-vertical-padding: var(--spacing-xs); // @presenter Spacing
+  --select-list-item-border-radius: var(--border-radius); // @presenter BorderRadius
+  --select-list-item-active-background-color: var(--bg-raised); // @presenter Color
+
+  // @tokens End
+`;

package/src/components/Separator/SeparatorItem.tsx

@@ -9,12 +9,15 @@ export const SeparatorItem = styled(MenuItemLabel).attrs<{ className?: string }>
   }),
 )`
   cursor: default;
-  font-weight: var(--font-weight-bold);
-  color: var(--sidebar-separator-item-color);
-  font-family: var(--sidebar-item-separator-font-family);
+  font-weight: var(--sidebar-item-separator-font-weight);
+  color: var(--sidebar-item-separator-text-color);
   font-size: var(--sidebar-item-separator-font-size);
   text-transform: var(--sidebar-item-separator-text-transform);
   background: var(--mobile-menu-background);
+  border-radius: 0;
+  border-top: var(--sidebar-item-separator-border-width) solid
+    var(--sidebar-item-separator-border-color);
+  padding-top: var(--sidebar-item-separator-padding-top);
 
   ${({ theme }) => theme.mediaQueries.medium} {
     background: var(--sidebar-item-separator-background-color);
@@ -25,7 +28,6 @@ export const SeparatorItem = styled(MenuItemLabel).attrs<{ className?: string }>
   }
 
   :hover {
-    color: inherit;
-    background-color: inherit;
+    color: var(--sidebar-item-separator-text-color);
   }
 `;

package/src/components/Sidebar/ApiCallItem.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { OperationBadge } from '@theme/components/OperationBadge';
+import { Tag } from '@theme/components/Tag';
 import { MenuLinkItem } from '@theme/components/Menu/MenuLinkItem';
 import { SeparatorLine } from '@theme/components/Separator/SeparatorLine';
 import { MenuItemLabel } from '@theme/components/Menu/MenuItemLabel';
@@ -12,9 +12,9 @@ export function ApiCallItem({ item, className }: MenuItemProps): JSX.Element {
     <Wrapper data-component-name="Sidebar/ApiCallItem" className={className}>
       <MenuLinkItem item={item}>
         <Label active={item.active}>
-          <Badge type={item.httpVerb || ''}>
+          <HttpTag color={item.httpVerb || ''}>
             {item.httpVerb === 'hook' ? 'event' : item.httpVerb}
-          </Badge>
+          </HttpTag>
           {item.label}
         </Label>
       </MenuLinkItem>
@@ -34,14 +34,16 @@ const Label = styled(MenuItemLabel)`
 
 const Wrapper = styled.div``;
 
-export const Badge = styled(OperationBadge)`
+export const HttpTag = styled(Tag)`
   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);
+  text-transform: uppercase;
+
+  width: var(--sidebar-item-http-tag-width);
+  height: var(--sidebar-item-http-tag-height);
+
+  font-size: var(--sidebar-item-http-tag-font-size);
+  font-family: var(--sidebar-item-http-tag-font-family);
+  font-weight: var(--sidebar-item-http-tag-font-weight);
+  border-radius: var(--sidebar-item-http-tag-border-radius);
 `;

package/src/components/Sidebar/FooterWrapper.tsx

@@ -1,15 +1,14 @@
 import styled from 'styled-components';
 export const FooterWrapper = styled.div<{ collapsed?: boolean }>`
+  padding: var(--sidebar-footer-padding-vertical) var(--sidebar-footer-padding-horizontal);
+
   ${({ collapsed }) =>
     collapsed &&
     `
         position: sticky;
         bottom: 0;
+        padding: 0;
     `}
-  margin: var(--sidebar-offset-top) 0 var(--sidebar-spacing-unit) var(--sidebar-offset-left);
-  padding-top: var(--sidebar-spacing-unit);
-  padding-right: var(--sidebar-spacing-unit);
-  border-top: solid 1px var(--border-color);
 
   button {
     margin: 0;

package/src/components/Sidebar/HeaderWrapper.tsx

@@ -5,6 +5,6 @@ export const HeaderWrapper = styled.div.attrs<{ className?: string }>(({ classNa
   className,
 }))`
   margin: var(--sidebar-offset-top) 0 0 var(--sidebar-offset-left);
-  padding-bottom: var(--sidebar-spacing-unit);
-  border-bottom: solid 1px var(--border-color);
+  padding-bottom: var(--sidebar-header-padding-bottom);
+  border-bottom: solid 1px var(--border-secondary);
 `;

package/src/components/Sidebar/index.ts

@@ -11,3 +11,4 @@ export * from '@theme/components/Sidebar/FooterWrapper';
 export * from '@theme/components/Sidebar/HeaderWrapper';
 export * from '@theme/components/Sidebar/SidebarItemIcon';
 export * from '@theme/components/Sidebar/VersionPicker';
+export * from '@theme/components/Sidebar/styledVariables';

package/src/components/Sidebar/styledVariables.ts

@@ -0,0 +1,208 @@
+import { css } from 'styled-components';
+
+export const sidebar = css`
+  /* === Sidebar === */
+
+  /**
+    * @tokens Sidebar logo
+    */
+
+  --sidebar-logo-max-height: 285px; // @presenter Spacing
+  --sidebar-logo-max-width: 285px; // @presenter Spacing
+  --sidebar-logo-padding: 2px; // @presenter Spacing
+
+  /**
+    * @tokens Sidebar typography
+    */
+  --sidebar-word-break: inherit; // @presenter WordBreak
+
+  /**
+    * @tokens Sidebar colors
+    * @presenter Color
+    */
+  --sidebar-background-color: var(--bg-base); // @presenter Color
+  --sidebar-border-color: var(--border-secondary); // @presenter Color
+
+  /**
+    * @tokens Sidebar spacing
+    * @presenter Spacing
+    */
+  --sidebar-spacing-unit: var(--spacing-base); // @presenter Spacing
+  --sidebar-width: 285px; // @presenter Spacing
+
+  --sidebar-offset-top: var(--sidebar-spacing-unit); // @presenter Spacing
+  --sidebar-offset-left: var(--sidebar-spacing-unit); // @presenter Spacing
+
+  --sidebar-header-padding-bottom: var(--sidebar-spacing-unit); // @presenter Spacing
+
+  --sidebar-chevron-size: var(--spacing-xs); // @presenter Spacing
+
+  /* === Sidebar Item === */
+
+  /**
+    * @tokens Sidebar item typography
+    */
+  --sidebar-item-font-family: var(--font-family-base); // @presenter FontFamily
+  --sidebar-item-font-size: var(--font-size-base); // @presenter FontSize
+  --sidebar-item-font-weight: var(--font-weight-regular); // @presenter FontSize
+
+  /**
+    * @tokens Sidebar item colors
+    *  @presenter Color
+    */
+  --sidebar-item-text-color: var(--text-secondary); // @presenter Color
+  --sidebar-item-background-color: transparent; // @presenter Color
+
+  --sidebar-item-active-color: var(--text-primary); // @presenter Color
+  --sidebar-item-active-background-color: var(--bg-raised); // @presenter Color
+
+  --sidebar-item-hover-color: var(--text-primary); // @presenter Color
+
+  /**
+    * @tokens Sidebar item spacing
+    * @presenter Spacing
+    */
+
+  --sidebar-item-nested-offset: var(--spacing-xs); // @presenter Spacing
+  --sidebar-margin-horizontal: var(--spacing-base); // @presenter Spacing
+  --sidebar-item-padding-vertical: var(--spacing-xs); // @presenter Spacing
+  --sidebar-item-padding-horizontal: var(--spacing-xs); // @presenter Spacing
+
+  /**
+    * @tokens Sidebar item border
+    */
+  --sidebar-item-border-radius: 6px; // @presenter BorderRadius
+
+  /** 
+    * @tokens Sidebar item icon
+    */
+  --sidebar-item-icon-size: var(--spacing-xl);
+  --sidebar-item-icon-border-radius: 100%;
+
+  /**
+    * @tokens Sidebar item sublabel
+    */
+  --sidebar-item-sublabel-font-family: inherit; // sublabel is for drilldown only but I would like to support it in general
+  --sidebar-item-sublabel-font-size: var(--font-size-base); // @presenter FontSize
+  --sidebar-item-sublabel-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --sidebar-item-sublabel-text-color: var(--sidebar-item-text-color); // @presenter Color
+
+  /**
+    * @tokens Sidebar item drilldown
+    */
+
+  --sidebar-item-drilldown-font-family: var(--sidebar-item-font-family);
+  --sidebar-item-drilldown-font-size: var(--sidebar-item-font-size); // @presenter FontSize
+  --sidebar-text-drilldown-transform: inherit; // @presenter TextTransform
+  --sidebar-item-drilldown-text-color: var(--sidebar-item-text-color); // @presenter Color
+  --sidebar-item-drilldown-background-color: var(--sidebar-background-color); // @presenter Color
+
+  /**
+    * @tokens Sidebar item group
+    */
+  --sidebar-item-group-font-family: var(--sidebar-item-font-family);
+  --sidebar-item-group-font-size: var(--sidebar-item-font-size); // @presenter FontSize
+  --sidebar-text-group-transform: inherit;
+  --sidebar-item-group-text-color: var(--sidebar-item-text-color); // @presenter Color
+  --sidebar-item-group-background-color: var(--sidebar-background-color); // @presenter Color
+  --sidebar-item-group-active-text-color: var(--sidebar-item-active-color); // @presenter Color
+  --sidebar-item-group-active-background-color: var(--sidebar-item-active-background-color);
+
+  // we need a theme config for chevron-location: left (default), right-compact, right, none
+  // we need another theme config for chevron-style: up-down, down-up, right-down, down-right
+
+  --sidebar-group-item-chevron-size: var(--spacing-xs); // @presenter Spacing
+  --sidebar-group-item-chevron-color: var(--sidebar-item-text-color); // @presenter Color
+
+  /**
+    * @tokens Sidebar item separator
+    */
+  --sidebar-item-separator-font-family: var(--sidebar-item-font-family);
+  --sidebar-item-separator-font-size: var(--sidebar-item-font-size); // @presenter FontSize
+  --sidebar-item-separator-font-weight: var(--sidebar-item-font-weight); // @presenter FontWeight
+  --sidebar-item-separator-text-transform: inherit; // @presenter TextTransform
+  --sidebar-item-separator-text-color: var(--text-placeholder); // @presenter Color
+
+  --sidebar-item-separator-background-color: var(--sidebar-background-color); // @presenter Color
+  --sidebar-item-separator-line-color: var(--border-primary); // @presenter Color
+  --sidebar-item-separator-offset: var(--spacing-lg); // @presenter Spacing
+  --sidebar-item-separator-border-width: 1px; // @presenter Spacing
+  --sidebar-item-separator-border-color: var(--border-primary); // @presenter Color
+  --sidebar-item-separator-padding-top: var(--spacing-xxs); // @presenter Spacing
+
+  /**
+   * @tokens Sidebar item http tag
+   */
+
+  --sidebar-item-http-tag-width: 36px;
+  --sidebar-item-http-tag-height: 14px;
+  --sidebar-item-http-tag-font-family: var(--code-font-family); // @presenter FontFamily
+  --sidebar-item-http-tag-font-size: 8px; // @presenter FontSize
+  --sidebar-item-http-tag-font-weight: normal; //@presenter FontWeight
+  --sidebar-item-http-tag-border-radius: var(--border-radius-lg); // @presenter BorderRadius
+
+  /**
+    * @tokens Sidebar back button
+    */
+  --sidebar-back-button-font-family: var(--sidebar-item-font-family);
+  --sidebar-back-button-font-size: var(--sidebar-item-font-size); // @presenter FontSize
+  --sidebar-back-button-transform: inherit; // @presenter TextTransform
+  --sidebar-back-button-text-color: var(--sidebar-item-text-color); // @presenter Color
+  --sidebar-back-button-background-color: transparent; // @presenter Color
+  --sidebar-back-button-hover-text-color: var(--sidebar-item-active-color); // @presenter Color
+  --sidebar-back-button-hover-background-color: transparent; // @presenter Color
+  --sidebar-back-button-icon-color: var(--sidebar-item-text-color); // @presenter Color
+  --sidebar-back-button-margin: 0 0 var(--spacing-lg) 0; // @presenter Spacing
+  --sidebar-back-padding-left: var(--spacing-xs); // @presenter Spacing
+  --sidebar-back-button-icon: none;
+
+  /** 
+  * @tokens Sidebar footer
+  */
+  --sidebar-footer-padding-vertical: var(--spacing-sm); // @presenter Spacing
+  --sidebar-footer-padding-horizontal: var(--spacing-lg); // @presenter Spacing
+  --sidebar-collapse-button-background-color: var(--bg-overlay); // @presenter Color
+  --sidebar-collapse-button-icon-color: var(--text-primary); // @presenter Color
+  --sidebar-collapse-button-border-color: var(--border-primary); // @presenter Color
+  --sidebar-collapse-button-active-background-color: unset; // @presenter Color
+  --sidebar-collapse-button-active-border-color: 0; // @presenter Color
+
+  --sidebar-controls-collapsed-gap: var(--spacing-xs); // @presenter Spacing
+  --sidebar-controls-collapsed-padding-vertical: var(--spacing-xs); // @presenter Spacing
+  --sidebar-controls-collapsed-padding-horizontal: var(--spacing-xxs); // @presenter Spacing
+ 
+  // @tokens End
+`;
+
+export const versionPicker = css`
+  /**
+    * @tokens Version picker
+    * */
+
+  --version-picker-font-size: var(--font-size-base); // @presenter FontSize
+  --version-picker-font-weight: var(--select-font-weight); // @presenter FontWeight
+  --version-picker-line-height: var(--select-line-height); // @presenter LineHeight
+  --version-picker-text-color: var(--select-text-color); // @presenter Color
+  --version-picker-border-radius: var(--select-border-radius); // @presenter BorderRadius
+  --version-picker-margin-vertical: 10px; // @presenter Spacing
+  --version-picker-margin-horizontal: 15px; // @presenter Spacing
+
+  --version-picker-input-padding-horizontal: var(--select-input-padding-horizontal); // @presenter Spacing
+  --version-picker-input-padding-vertical: var(--select-input-padding-vertical); // @presenter Spacing
+  --version-picker-input-border: 1px solid var(--border-primary); // @presenter Border
+  --version-picker-input-border-radius: var(--select-input-border-radius); // @presenter BorderRadius
+
+  --version-picker-list-min-width: var(--select-list-min-width);
+  --version-picker-list-max-width: var(--select-list-max-width);
+  --version-picker-list-padding: var(--select-list-padding); // @presenter Spacing
+  --version-picker-list-border-radius: var(--select-list-border-radius); // @presenter BorderRadius
+  --version-picker-list-background-color: var(--select-list-background-color); // @presenter Color
+  --version-picker-list-box-shadow: var(--select-list-box-shadow); // @presenter Shadow
+
+  --version-picker-list-item-horizontal-padding: var(--select-list-item-horizontal-padding); // @presenter Spacing
+  --version-picker-list-item-vertical-padding: var(--select-list-item-vertical-padding); // @presenter Spacing
+  --version-picker-list-item-border-radius: var(--select-list-item-border-radius); // @presenter BorderRadius
+  --version-picker-list-item-active-background-color: var(--select-list-item-active-background-color); // @presenter Color
+  
+  // @tokens End
+`;

package/src/components/SidebarActions/CollapseSidebarButton.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import styled, { css } from 'styled-components';
 
 import {
   StyledToggleRightPanelButton,
@@ -15,11 +16,26 @@ export const CollapseSidebarButton = ({
   onClick,
 }: CollapseSidebarButtonProps): JSX.Element => {
   return (
-    <StyledToggleRightPanelButton
+    <ToggleButton
       title={initialValue ? 'Show sidebar' : 'Hide sidebar'}
       onClick={onClick}
+      collapsed={initialValue}
     >
       {initialValue ? <HideLeftPanelSVG /> : <ShowLeftPanelSVG />}
-    </StyledToggleRightPanelButton>
+    </ToggleButton>
   );
 };
+
+const ToggleButton = styled(StyledToggleRightPanelButton)<{ collapsed?: boolean }>`
+  background: var(--sidebar-collapse-button-background-color);
+  fill: var(--sidebar-collapse-button-icon-color);
+  margin-right: ${({ collapsed }) => (collapsed ? 0 : 'calc(var(--spacing-unit) * -9)')};
+  border: 1px solid var(--sidebar-collapse-button-border-color);
+
+  ${({ collapsed }) =>
+    collapsed &&
+    css`
+      background: var(--sidebar-collapse-button-active-background-color);
+      border: var(--sidebar-collapse-button-active-border-color);
+    `}
+`;

package/src/components/SidebarActions/styled.tsx

@@ -5,7 +5,7 @@ export const ShowLeftPanelSVG = styled(() => (
   <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M4.375 7L8.75 2.625L9.3625 3.2375L5.6 7L9.3625 10.7625L8.75 11.375L4.375 7Z"
-      fill="var(--color-emphasis-400)"
+      fill="var(--text-secondary)"
     />
   </svg>
 ))`
@@ -16,7 +16,7 @@ export const HideLeftPanelSVG = styled(() => (
   <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M9.62495 7L5.24995 11.375L4.63745 10.7625L8.39995 7L4.63745 3.2375L5.24995 2.625L9.62495 7Z"
-      fill="var(--color-emphasis-400)"
+      fill="var(--text-secondary)"
     />
   </svg>
 ))`
@@ -42,7 +42,7 @@ export const HideRightPanelSVG = styled(() => (
   <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M14 2H2C1.73478 2 1.48043 2.10536 1.29289 2.29289C1.10536 2.48043 1 2.73478 1 3V13C1 13.2652 1.10536 13.5196 1.29289 13.7071C1.48043 13.8946 1.73478 14 2 14H14C14.2652 14 14.5196 13.8946 14.7071 13.7071C14.8946 13.5196 15 13.2652 15 13V3C15 2.73478 14.8946 2.48043 14.7071 2.29289C14.5196 2.10536 14.2652 2 14 2V2ZM2 3H10V13H2V3Z"
-      fill="var(--color-emphasis-400)"
+      fill="currentColor"
     />
   </svg>
 ))`
@@ -53,7 +53,7 @@ export const ShowRightPanelSVG = styled(() => (
   <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M14 2H2C1.73478 2 1.48043 2.10536 1.29289 2.29289C1.10536 2.48043 1 2.73478 1 3V13C1 13.2652 1.10536 13.5196 1.29289 13.7071C1.48043 13.8946 1.73478 14 2 14H14C14.2652 14 14.5196 13.8946 14.7071 13.7071C14.8946 13.5196 15 13.2652 15 13V3C15 2.73478 14.8946 2.48043 14.7071 2.29289C14.5196 2.10536 14.2652 2 14 2V2ZM2 3H10V13H2V3ZM14 13H11V3H14V13Z"
-      fill="var(--color-emphasis-400)"
+      fill="currentColor"
     />
   </svg>
 ))`
@@ -78,17 +78,11 @@ export const StyledChangeViewButton = styled.a`
 
 export const ChangeViewSvgRow = styled(() => (
   <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="M1.75 2.625L12.25 2.625L12.25 1.75L1.75 1.75L1.75 2.625Z"
-      fill="var(--color-emphasis-400)"
-    />
-    <path
-      d="M1.75 5.6875L12.25 5.6875L12.25 4.8125L1.75 4.8125L1.75 5.6875Z"
-      fill="var(--color-emphasis-400)"
-    />
+    <path d="M1.75 2.625L12.25 2.625L12.25 1.75L1.75 1.75L1.75 2.625Z" fill="currentColor" />
+    <path d="M1.75 5.6875L12.25 5.6875L12.25 4.8125L1.75 4.8125L1.75 5.6875Z" fill="currentColor" />
     <path
       d="M2.625 11.375L2.625 8.75L11.375 8.75L11.375 11.375L2.625 11.375ZM2.625 12.25L11.375 12.25C11.6071 12.25 11.8296 12.1578 11.9937 11.9937C12.1578 11.8296 12.25 11.6071 12.25 11.375L12.25 8.75C12.25 8.51794 12.1578 8.29538 11.9937 8.13128C11.8296 7.96719 11.6071 7.875 11.375 7.875L2.625 7.875C2.39294 7.875 2.17038 7.96719 2.00628 8.13128C1.84219 8.29538 1.75 8.51793 1.75 8.75L1.75 11.375C1.75 11.6071 1.84219 11.8296 2.00628 11.9937C2.17038 12.1578 2.39294 12.25 2.625 12.25Z"
-      fill="var(--color-emphasis-400)"
+      fill="currentColor"
     />
   </svg>
 ))`
@@ -97,17 +91,14 @@ export const ChangeViewSvgRow = styled(() => (
 
 export const ChangeViewSvgColumn = styled(() => (
   <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="M2.625 12.25L2.625 1.75L1.75 1.75L1.75 12.25L2.625 12.25Z"
-      fill="var(--color-emphasis-400)"
-    />
+    <path d="M2.625 12.25L2.625 1.75L1.75 1.75L1.75 12.25L2.625 12.25Z" fill="currentColor" />
     <path
       d="M5.6875 12.25L5.6875 1.75L4.8125 1.75L4.8125 12.25L5.6875 12.25Z"
-      fill="var(--color-emphasis-400)"
+      fill="currentColor"
     />
     <path
       d="M11.375 11.375L8.75 11.375L8.75 2.625L11.375 2.625L11.375 11.375ZM12.25 11.375L12.25 2.625C12.25 2.39294 12.1578 2.17038 11.9937 2.00628C11.8296 1.84219 11.6071 1.75 11.375 1.75L8.75 1.75C8.51794 1.75 8.29538 1.84219 8.13128 2.00628C7.96719 2.17038 7.875 2.39294 7.875 2.625L7.875 11.375C7.875 11.6071 7.96719 11.8296 8.13128 11.9937C8.29538 12.1578 8.51794 12.25 8.75 12.25L11.375 12.25C11.6071 12.25 11.8296 12.1578 11.9937 11.9937C12.1578 11.8296 12.25 11.6071 12.25 11.375Z"
-      fill="var(--color-emphasis-400)"
+      fill="currentColor"
     />
   </svg>
 ))`
@@ -123,9 +114,9 @@ export const ControlsWrap = styled.span<{
   justify-content: ${({ isOpenapiDocs }) => (isOpenapiDocs ? 'space-between' : 'flex-end')};
   bottom: 0;
   flex-direction: row;
-  gap: var(--spacing-unit);
+  gap: var(--spacing-xxs);
   align-items: center;
-  margin-left: '15px';
+  margin-left: var(--sidebar-controls-margin-left);
   z-index: 2;
   background: var(--sidebar-background-color);
 
@@ -133,8 +124,10 @@ export const ControlsWrap = styled.span<{
     isCollapsed &&
     css`
       flex-direction: column;
-      gap: 10px;
-      padding-bottom: 10px;
+      margin-left: 0;
+      gap: var(--sidebar-controls-collapsed-gap);
+      padding: var(--sidebar-controls-collapsed-padding-vertical)
+        var(--sidebar-controls-collapsed-padding-horizontal);
     `}
 
   ${({ theme }) => css`

package/src/components/TableOfContent/TableOfContent.tsx

@@ -79,12 +79,13 @@ const TocHeader = styled.div`
   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;
+  text-transform: var(--toc-heading-text-transform);
 `;
 
 const MenuItem = styled.a<{ depth: number }>`
   display: block;
   color: var(--toc-item-text-color);
+  font-weight: var(--toc-item-font-weight);
   background-color: var(--toc-item-background-color);
   cursor: pointer;
   font-size: var(--toc-item-font-size);
@@ -98,7 +99,6 @@ const MenuItem = styled.a<{ depth: number }>`
   :hover,
   &.active {
     color: var(--toc-item-active-text-color);
-    background-color: var(--toc-item-active-background-color);
   }
 
   :empty {
@@ -121,7 +121,6 @@ const TableOfContentItems = styled.div`
   position: sticky;
   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/components/TableOfContent/index.ts

@@ -1 +1,2 @@
 export * from '@theme/components/TableOfContent/TableOfContent';
+export * from '@theme/components/TableOfContent/styledVariables';

package/src/components/TableOfContent/styledVariables.ts

@@ -0,0 +1,43 @@
+import { css } from 'styled-components';
+
+export const toc = css`
+  /**
+    * @tokens TOC
+    * */
+
+  --toc-width: 240px;
+  --toc-background-color: transparent;
+
+  --toc-spacing-unit: var(--spacing-xs);
+  --toc-offset-top: var(--toc-spacing-unit);
+
+  /**
+     * @tokens TOC item typography
+     */
+  --toc-item-font-family: var(--font-family-base); // @presenter FontFamily
+  --toc-item-font-size: var(--font-size-base); // @presenter FontSize
+
+  /**
+    * @tokens TOC item
+    */
+
+  --toc-item-text-color: var(--text-description); // @presenter Color
+  --toc-item-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --toc-item-active-text-color: var(--text-primary); // @presenter Color
+  --toc-item-background-color: transparent; // @presenter Color
+  --toc-item-nested-offset: calc(var(--toc-spacing-unit) * 2); // @presenter Spacing
+  --toc-item-padding-vertical: var(--toc-spacing-unit); // @presenter Spacing
+  --toc-item-padding-horizontal: calc(var(--toc-spacing-unit) * 2); // @presenter Spacing
+
+  /**
+    * @tokens TOC header
+    */
+
+  --toc-heading-font-size: var(--font-size-base); // @presenter FontSize
+  --toc-heading-font-family: var(--font-family-base); // @presenter FontFamily
+  --toc-heading-font-weight: var(--font-weight-bold); // @presenter FontWeight
+  --toc-heading-text-color: var(--text-primary); // @presenter Color
+  --toc-heading-text-transform: none; // @presenter TextTransform
+
+  // @tokens End
+`;

package/src/components/Tabs/Tab.tsx

@@ -34,7 +34,7 @@ const TabItem = styled.li<{ active: boolean }>`
       background-color: var(--background-color);
       border: solid var(--md-tabs-active-tab-border-color);
       border-width: 0 0 1px 0;
-      color: var(--text-color);
+      color: var(--text-primary);
     `
       : `
     &:hover {

package/src/components/Tabs/Tabs.tsx

@@ -51,7 +51,7 @@ const TabList = styled.ol`
   color: var(--md-tabs-tab-text-color);
   padding: 0;
   margin-block-end: 0;
-  border: solid var(--color-secondary-400);
+  border: solid var(--border-primary);
   border-width: 0 0 1px 0;
 
   li[class^='Tab__TabItem'] {