@redocly/theme 0.74.2-pingfed.3 → 0.81.2-rc.1

package/src/components/Search/variables.ts

@@ -0,0 +1,95 @@
+import { css } from 'styled-components';
+
+export const search = css`
+  /**
+    * @tokens Search
+    */
+  --search-modal-width: 700px;
+  --search-modal-min-height: 530px;
+  --search-modal-bg-color: var(--modal-bg-color);
+  --search-modal-box-shadow: var(--modal-box-shadow);
+  --search-modal-border-radius: var(--border-radius-lg);
+
+  --search-highlight-bg-color: none; // @presenter Color
+  --search-highlight-text-color: var(--color-info-base); // @presenter Color
+
+  --search-input-font-family: var(--font-family-base); // @presenter FontFamily
+  --search-input-font-size: var(--font-size-base); // @presenter FontSize
+  --search-input-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --search-input-line-height: var(--line-height-base); // @presenter LineHeight
+  --search-input-bg-color: var(--bg-color-tonal); // @presenter Color
+  --search-input-text-color: var(--input-content-color-active); // @presenter Color
+  --search-input-icon-color: var(--icon-color-interactive); // @presenter Color
+  --search-input-placeholder-color: var(--input-content-placeholder-color);
+  --search-input-padding: var(--spacing-sm);
+  --search-input-gap: var(--spacing-sm);
+  --search-input-height: 40px;
+  --search-input-border: none;
+  --search-input-border-radius: var(--border-radius); // @presenter BorderRadius
+
+  --search-item-text-color: var(--text-color-secondary); // @presenter Color
+  --search-item-text-color-hover: var(--text-color-primary); // @presenter Color
+  --search-item-title-font-size: var(--font-size-base); // @presenter FontSize
+  --search-item-title-font-weight: var(--font-weight-medium); // @presenter FontWeight
+  --search-item-title-line-height: var(--line-height-base); // @presenter LineHeight
+  --search-item-title-text-color: var(--text-color-primary); // @presenter Color
+  --search-item-title-padding: var(--spacing-xxs) 0 2px 0;
+  --search-item-path-text-color: var(--text-color-description); // @presenter Color
+  --search-item-bg-color: transparent; // @presenter Color
+  --search-item-bg-color-hover: var(--layer-color-ontonal-hover); // @presenter Color
+  --search-item-bg-color-active: var(--layer-color); // @presenter Color
+  --search-item-border-color-focused: var(--color-blue-4); // @presenter Color
+  --search-item-border-color: transparent; // @presenter Color
+  --search-item-padding: var(--spacing-sm) var(--spacing-lg);
+  --search-item-gap: var(--spacing-xxs);
+  --search-item-product-icon-size: 16px;
+
+  --search-recent-item-font-size: var(--font-size-base); // @presenter FontSize
+  --search-recent-item-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --search-recent-item-line-height: var(--line-height-base); // @presenter LineHeight
+  --search-recent-item-padding: var(--spacing-xs) var(--spacing-lg);
+  --search-recent-item-text-color: var(--search-item-text-color); // @presenter Color
+  --search-recent-item-text-color-hover: var(--search-item-text-color-active); // @presenter Color
+  --search-recent-item-bg-color-hover: var(--search-item-bg-color-hover); // @presenter Color
+  --search-recent-item-title-font-size: var(--font-size-base); // @presenter FontSize
+  --search-recent-item-title-font-weight: var(--font-weight-semibold); // @presenter FontWeight
+  --search-recent-item-title-line-height: var(--line-height-base); // @presenter LineHeight
+  --search-recent-item-title-text-color: var(--text-color-primary); // @presenter Color
+  --search-recent-item-title-padding: var(--spacing-md) var(--spacing-lg) var(--spacing-xxs) var(--spacing-lg); // @presenter Color
+  --search-recent-item-bg-color-active: var(--layer-color); // @presenter Color
+  --search-recent-item-border-color-focused: var(--color-blue-4); // @presenter Color
+
+  --search-suggested-item-font-size: var(--font-size-base); // @presenter FontSize
+  --search-suggested-item-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --search-suggested-item-line-height: var(--line-height-base); // @presenter LineHeight
+  --search-suggested-item-padding: var(--spacing-xs) var(--spacing-lg);
+  --search-suggested-item-text-color: var(--search-item-text-color); // @presenter Color
+  --search-suggested-item-text-color-hover: var(--search-item-text-color-active); // @presenter Color
+  --search-suggested-item-bg-color-hover: var(--search-item-bg-color-hover); // @presenter Color
+  --search-suggested-item-title-font-size: var(--font-size-base); // @presenter FontSize
+  --search-suggested-item-title-font-weight: var(--font-weight-semibold); // @presenter FontWeight
+  --search-suggested-item-title-line-height: var(--line-height-base); // @presenter LineHeight
+  --search-suggested-item-title-text-color: var(--text-color-primary); // @presenter Color
+  --search-suggested-item-title-padding: var(--spacing-md) var(--spacing-lg) var(--spacing-xxs) var(--spacing-lg); // @presenter Color
+  --search-suggested-item-bg-color-active: var(--layer-color); // @presenter Color
+  --search-suggested-item-border-color-focused: var(--color-blue-4); // @presenter Color
+
+  /**
+  * @tokens Navbar Search Trigger
+  */
+  --search-trigger-gap: var(--spacing-xs);
+  --search-trigger-border-width: var(--border-width);
+  --search-trigger-border-style: var(--border-style);
+  --search-trigger-border-color: var(--input-border-color);
+  --search-trigger-border-color-hover: var(--input-border-color-hover);
+  --search-trigger-border-radius: var(--border-radius-md);
+  --search-trigger-padding-vertical: var(--input-padding-vertical);
+  --search-trigger-padding-horizontal: var(--input-padding-horizontal);
+  --search-trigger-padding: var(--search-trigger-padding-vertical) var(--search-trigger-padding-horizontal);
+  --search-trigger-color: var(--input-content-placeholder-color);
+  --search-trigger-bg-color: var(--navbar-bg-color);
+  --search-trigger-icon-size: 16px;
+  --search-trigger-line-height: var(--line-height-base);
+
+  // @tokens End
+`;

package/src/components/Segmented/Segmented.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { typedMemo } from '@redocly/theme/core/hoc/typedMemo';
+
+import type { ReactElement } from 'react';
+import type { SelectOption } from '@redocly/theme/core/types/select-option';
+
+type SegmentedProps<T> = {
+  options: SelectOption<T>[];
+  value: T;
+  onChange: ({ label, value }: { label: string; value: T }) => void;
+  className?: string;
+  size?: 'regular' | 'small';
+};
+
+function SegmentedComponent<T>({
+  options,
+  onChange,
+  value,
+  className = '',
+  size = 'regular',
+}: SegmentedProps<T>): ReactElement {
+  return (
+    <SegmentedGroup
+      data-component-name="Segmented/Segmented"
+      className={`tag-grey ${size} ${className}`}
+      role="tablist"
+    >
+      {options.map((opt) => (
+        <SegmentedItem
+          key={opt.label}
+          role="tab"
+          title={opt.label}
+          onClick={() => onChange(opt)}
+          $isActive={value == opt.value}
+          $size={size}
+        >
+          {opt.label}
+        </SegmentedItem>
+      ))}
+    </SegmentedGroup>
+  );
+}
+
+export const Segmented = typedMemo(SegmentedComponent);
+
+const SegmentedGroup = styled.div`
+  display: flex;
+  background: var(--segmented-buttons-bg-color-main);
+  padding: calc(var(--spacing-xxs) / 2);
+  gap: calc(var(--spacing-xxs) / 2);
+  border-radius: var(--border-radius-md);
+  max-width: 100%;
+  width: fit-content;
+`;
+
+const SegmentedItem = styled.button<{ $isActive: boolean; $size: string }>`
+  ${({ $size }) =>
+    $size === 'small' &&
+    css`
+      --segmented-font-size: var(--font-size-sm);
+      --segmented-font-size-active: var(--font-size-sm);
+      --segmented-line-height: var(--line-height-sm);
+    `}
+
+  ${({ $isActive }) =>
+    $isActive
+      ? css`
+          font-size: var(--segmented-font-size-active);
+          font-weight: var(--segmented-font-weight-active);
+          background: var(--segmented-buttons-bg-color-inner);
+          color: var(--segmented-text-color-active);
+          cursor: default;
+          pointer-events: none;
+        `
+      : css`
+          font-size: var(--segmented-font-size);
+          font-weight: var(--segmented-font-weight);
+          color: var(--segmented-text-color);
+          cursor: pointer;
+        `}
+  line-height: var(--segmented-line-height);
+  border-radius: var(--border-radius);
+  padding: ${({ $size }) => ($size === 'small' ? 0 : '3px')} var(--spacing-sm);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+`;

package/src/components/Segmented/variables.dark.ts

@@ -0,0 +1,6 @@
+import { css } from 'styled-components';
+
+export const segmentedButtonsDarkMode = css`
+  --segmented-buttons-bg-color-inner: var(--color-warm-grey-3); // @presenter Color
+  --segmented-buttons-bg-color-main: var(--color-warm-grey-4); // @presenter Color
+`;

package/src/components/Segmented/variables.ts

@@ -0,0 +1,23 @@
+import { css } from 'styled-components';
+
+export const segmented = css`
+  /**
+    * @tokens Segmented
+    * */
+  --segmented-font-size: var(--font-size-base); // @presenter FontSize
+  --segmented-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --segmented-text-color: var(--text-color-secondary); // @presenter Color
+  --segmented-line-height: var(--line-height-base); // @presenter LineHeight
+
+  --segmented-font-size-active: var(--font-size-base); // @presenter FontSize
+  --segmented-font-weight-active: var(--font-weight-medium); // @presenter FontWeight
+  --segmented-text-color-active: var(--text-color-primary); // @presenter Color
+
+  --segmented-buttons-content-color: var(--color-warm-grey-8); // @presenter Color
+  --segmented-buttons-content-color-hover: var(--color-warm-grey-11); // @presenter Color
+  --segmented-buttons-content-color-active: var(--color-blue-11); // @presenter Color
+  --segmented-buttons-bg-color-inner: var(--color-white); // @presenter Color
+  --segmented-buttons-bg-color-main: var(--color-warm-grey-2); // @presenter Color
+
+  // @tokens End
+`;

package/src/components/Select/Select.tsx

@@ -1,13 +1,15 @@
 import React, { useRef, useState } from 'react';
 import styled from 'styled-components';
 
-import { ArrowIcon } from '@theme/icons';
-import { useOutsideClick } from '@theme/hooks';
+import { useOutsideClick } from '@redocly/theme/core/hooks';
+import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon';
+import { ChevronUpIcon } from '@redocly/theme/icons/ChevronUpIcon/ChevronUpIcon';
+import { CheckmarkIcon } from '@redocly/theme/icons/CheckmarkIcon/CheckmarkIcon';
 
 export interface SelectProps<T = any> {
   value: T;
   options: {
-    element: React.ReactNode | string;
+    element: React.ReactNode | JSX.Element | string;
     value: T;
     label?: string;
   }[];
@@ -22,23 +24,27 @@ export interface SelectProps<T = any> {
   onlyIcon?: boolean;
   placeholder?: string;
   disabled?: boolean;
+  renderInput?: (props: { isOpen: boolean }) => React.ReactElement;
 }
 
-export function Select<T>({
-  className,
-  value,
-  options,
-  dataAttributes,
-  withArrow = true,
-  triggerEvent = 'click',
-  onChange,
-  placement,
-  alignment,
-  icon,
-  onlyIcon,
-  disabled,
-  placeholder,
-}: SelectProps<T>) {
+export function Select<T>(props: SelectProps<T>) {
+  const {
+    className,
+    value,
+    options,
+    dataAttributes,
+    withArrow = true,
+    triggerEvent = 'click',
+    onChange,
+    placement,
+    alignment,
+    icon,
+    onlyIcon,
+    disabled,
+    placeholder,
+    renderInput,
+  } = props;
+
   const containerRef = useRef<HTMLDivElement | null>(null);
 
   const [isOpen, setIsOpen] = useState<boolean>(false);
@@ -71,8 +77,21 @@ export function Select<T>({
 
   const selectedOption = options.find((option) => option.value === value);
 
+  const renderDefaultInput = () => (
+    <SelectInput>
+      {!onlyIcon && (
+        <SelectInputValue>
+          {selectedOption?.label || selectedOption?.element || placeholder}
+        </SelectInputValue>
+      )}
+      {icon}
+      {withArrow ? isOpen ? <ChevronUpIcon size="14px" /> : <ChevronDownIcon size="14px" /> : null}
+    </SelectInput>
+  );
+
   return (
     <SelectContainer
+      data-component-name="Select/Select"
       {...dataAttributes}
       disabled={disabled}
       data-testid="select"
@@ -82,26 +101,22 @@ export function Select<T>({
       onPointerLeave={triggerEvent === 'hover' ? handleClose : undefined}
       onClick={triggerEvent === 'click' ? handleToggle : undefined}
     >
-      <SelectInput>
-        {!onlyIcon && (
-          <SelectInputValue>
-            {selectedOption?.label || selectedOption?.element || placeholder}
-          </SelectInputValue>
-        )}
-        {icon}
-        {withArrow ? isOpen ? <ArrowIcon direction="up" /> : <ArrowIcon direction="down" /> : null}
-      </SelectInput>
+      {renderInput ? renderInput({ isOpen }) : renderDefaultInput()}
       {isOpen && (
         <SelectList placement={placement} alignment={alignment}>
-          {options.map((option, index) => (
-            <SelectListItem
-              key={index}
-              onClick={() => handleSelect(option.value)}
-              selected={option.value === value}
-            >
-              {typeof option.element === 'string' ? <div>{option.element}</div> : option.element}
-            </SelectListItem>
-          ))}
+          {options.map((option, index) => {
+            const selected = option.value === value;
+            return (
+              <SelectListItem
+                key={index}
+                onClick={() => handleSelect(option.value)}
+                selected={selected}
+              >
+                {typeof option.element === 'string' ? <div>{option.element}</div> : option.element}
+                {selected && <CheckmarkIcon />}
+              </SelectListItem>
+            );
+          })}
         </SelectList>
       )}
     </SelectContainer>
@@ -123,7 +138,6 @@ export const SelectContainer = styled.div<{ disabled?: boolean }>`
     opacity: 0.59;
     pointer-events: none;
   `}
-
   a {
     display: block;
     text-decoration: none;
@@ -136,7 +150,7 @@ export const SelectInput = styled.div`
   align-items: center;
   justify-content: space-between;
   border-radius: var(--select-input-border-radius);
-  padding: var(--select-input-padding-vertical) var(--select-input-padding-horizontal);
+  padding: var(--select-input-padding);
   cursor: pointer;
   gap: 8px;
 `;
@@ -158,7 +172,7 @@ export const SelectList = styled.ul<{ placement?: string; alignment?: string }>`
   min-width: var(--select-list-min-width);
   max-width: var(--select-list-max-width);
   padding: var(--select-list-padding);
-  background-color: var(--select-list-background-color);
+  background-color: var(--select-list-bg-color);
   border-radius: var(--select-list-border-radius);
   box-shadow: var(--select-list-box-shadow);
   list-style-type: none;
@@ -169,22 +183,26 @@ export const SelectList = styled.ul<{ placement?: string; alignment?: string }>`
 `;
 
 export const SelectListItem = styled.li<{ selected: boolean }>`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   border-radius: var(--select-list-item-border-radius);
+  gap: var(--select-list-item-gap);
+  padding: var(--select-list-item-padding);
+  ${({ selected }) =>
+    selected &&
+    `
+      font-weight: var(--select-list-item-font-weight-active);
+      background-color: var(--select-list-item-bg-color-active);
+      &:hover { background-color: var(--select-list-item-bg-color-active)};
+    `}
 
   & > * {
-    padding: var(--select-list-item-vertical-padding) var(--select-list-item-horizontal-padding);
     overflow: hidden;
     text-overflow: ellipsis;
-    display: block;
   }
 
-  :hover {
-    background-color: var(--select-list-item-hover-background-color);
+  &:hover {
+    background-color: var(--select-list-item-bg-color-hover);
   }
-
-  ${({ selected }) =>
-    selected &&
-    `
-    &, &:hover { background-color: var(--select-list-item-active-background-color); }
-    `}
 `;

package/src/components/Select/variables.ts

@@ -0,0 +1,34 @@
+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-color-secondary); // @presenter Color
+  --select-border-radius: var(--border-radius); // @presenter BorderRadius
+  --select-input-padding-vertical: 6px; // @presenter Spacing
+  --select-input-padding-horizontal: 16px; // @presenter Spacing
+  --select-input-padding: var(--select-input-padding-vertical) var(--select-input-padding-horizontal);
+  --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-bg-color: var(--bg-color); // @presenter Color
+  --select-list-box-shadow: var(--bg-raised-shadow); // @presenter Shadow
+
+  --select-list-item-padding-vertical: var(--spacing-xs); // @presenter Spacing
+  --select-list-item-padding-horizontal: var(--spacing-base); // @presenter Spacing
+  --select-list-item-padding: var(--select-list-item-padding-vertical) var(--select-list-item-padding-horizontal);
+
+  --select-list-item-gap: var(--spacing-xs); // @presenter Spacing
+  --select-list-item-border-radius: var(--border-radius); // @presenter BorderRadius
+  --select-list-item-bg-color-active: transparent; // @presenter Color
+  --select-list-item-bg-color-hover: var(--menu-item-bg-color-hover); // @presenter Color
+  --select-list-item-font-weight-active: var(--font-weight-medium); // @presenter Color  
+  // @tokens End
+`;

package/src/components/Sidebar/Sidebar.tsx

@@ -1,31 +1,96 @@
+import React, { useEffect } from 'react';
 import styled from 'styled-components';
 
-interface SidebarProps {
-  opened?: boolean;
-  animate?: boolean;
-}
+import type { MenuItemsAnimation } from '@redocly/theme/core/types';
+
+import { breakpoints } from '@redocly/theme/core/utils';
+import { useThemeConfig, useMobileMenu } from '@redocly/theme/core/hooks';
+import { MenuContainer } from '@redocly/theme/components/Menu/MenuContainer';
+
+type SidebarProps = {
+  versions?: React.ReactNode;
+  menu?: React.ReactNode;
+  backLink?: {
+    label: string;
+    slug: string;
+  };
+  footer?: React.ReactNode;
+  actions?: React.ReactNode;
+  header?: React.ReactNode;
+  growContent?: boolean;
+  collapsed?: boolean;
+  onToggleMenu?: (isOpen: boolean) => void;
+  className?: string;
+  menuItemsAnimation?: MenuItemsAnimation;
+};
 
-export const Sidebar = styled.aside.attrs<{ className?: string }>(({ className }) => ({
-  'data-component-name': 'Sidebar/Sidebar',
+export function Sidebar({
+  versions,
+  menu,
+  footer,
+  header,
+  growContent,
+  collapsed,
   className,
-}))<SidebarProps>`
+  menuItemsAnimation,
+}: SidebarProps): JSX.Element | null {
+  const { isOpen } = useMobileMenu();
+  const [mappedCollapsed, setMappedCollapsed] = React.useState(collapsed);
+
+  useEffect(() => {
+    setMappedCollapsed(collapsed && !isOpen);
+  }, [isOpen, collapsed, setMappedCollapsed]);
+
+  const { sidebar } = useThemeConfig();
+
+  if (sidebar?.hide) {
+    return null;
+  }
+
+  return (
+    <SidebarContent
+      data-component-name="Sidebar/Sidebar"
+      animate={true}
+      opened={isOpen}
+      className={className}
+      collapsed={mappedCollapsed}
+    >
+      {header ? <SidebarHeader collapsed={mappedCollapsed}>{header}</SidebarHeader> : null}
+      {!mappedCollapsed && versions ? versions : null}
+      <MenuContainer
+        hidden={mappedCollapsed}
+        growContent={growContent}
+        animation={menuItemsAnimation}
+      >
+        {menu}
+      </MenuContainer>
+      {footer && !isOpen ? (
+        <SidebarFooter collapsed={mappedCollapsed} data-component-name="Sidebar/FooterWrapper">
+          {footer}
+        </SidebarFooter>
+      ) : null}
+    </SidebarContent>
+  );
+}
+
+const SidebarContent = styled.aside<{ opened?: boolean; animate?: boolean; collapsed?: boolean }>`
   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-item-font-size);
-  font-family: var(--sidebar-item-font-family);
-  color: var(--sidebar-item-text-color);
+  background: var(--sidebar-bg-color);
+  font-size: var(--sidebar-font-size);
+  font-family: var(--sidebar-font-family);
+  color: var(--sidebar-text-color);
   display: flex;
   flex-direction: column;
   width: 100%;
   -webkit-font-smoothing: antialiased;
   top: var(--navbar-height);
   height: calc(100vh - var(--navbar-height));
-
+  overflow-x: hidden;
   ${({ opened, animate }) => `
     opacity: ${opened ? '1' : '0'};
     pointer-events: ${opened ? 'auto' : 'none'};
@@ -36,20 +101,63 @@ export const Sidebar = styled.aside.attrs<{ className?: string }>(({ className }
     }
   `};
 
-  ${({ theme }) => theme.mediaQueries.medium} {
+  @media screen and (min-width: ${breakpoints.medium}) {
     position: sticky;
     pointer-events: auto;
     display: flex;
     opacity: 1;
     flex-shrink: 0;
-    width: var(--sidebar-width);
+    overflow: clip;
+
+    ${({ collapsed }) =>
+      collapsed
+        ? `
+          flex-direction: column;
+          width: var(--sidebar-collapsed-width);
+    `
+        : 'width: var(--sidebar-width);'}
 
     & > * {
       transform: none;
     }
   }
 
-  ${({ theme }) => theme.mediaQueries.large} {
+  @media screen and (min-width: ${breakpoints.large}) {
     transform: none;
   }
 `;
+
+const SidebarHeader = styled.div<{ collapsed?: boolean }>`
+  margin: var(--sidebar-offset-top) var(--sidebar-margin-horizontal) 0
+    var(--sidebar-margin-horizontal);
+  padding: 0 0 var(--sidebar-header-padding-bottom) 0;
+
+  ${({ collapsed }) =>
+    !collapsed &&
+    `
+      border-bottom: solid 1px var(--border-color-secondary);
+    `}
+`;
+
+const SidebarFooter = styled.div<{ collapsed?: boolean }>`
+  display: none;
+  padding: var(--sidebar-footer-padding-vertical) var(--sidebar-footer-padding-horizontal);
+
+  @media screen and (min-width: ${breakpoints.medium}) {
+    display: flex;
+    justify-content: ${({ collapsed }) => (collapsed ? 'center' : 'flex-end')};
+  }
+
+  ${({ collapsed }) =>
+    collapsed &&
+    `
+        position: sticky;
+        bottom: 0;
+        padding: 0;
+        margin-top: auto;
+    `}
+
+  button {
+    margin: 0;
+  }
+`;

package/src/components/Sidebar/variables.ts

@@ -0,0 +1,57 @@
+import { css } from 'styled-components';
+
+export const sidebar = css`
+
+  /**
+    * @tokens Sidebar typography
+    */
+
+  --sidebar-font-size: var(--font-size-base); // @presenter FontSize
+  --sidebar-font-family: var(--font-family-base); // @presenter FontFamily
+  --sidebar-word-break: inherit;
+
+  /**
+    * @tokens Sidebar colors
+    * @presenter Color
+    */
+
+  --sidebar-bg-color: var(--bg-color); // @presenter Color
+  --sidebar-border-color: var(--border-color-secondary); // @presenter Color
+  --sidebar-text-color: var(--tree-content-color-default); // @presenter Color
+
+  /**
+    * @tokens Sidebar spacing
+    * @presenter Spacing
+    */
+
+  --sidebar-spacing-unit: var(--spacing-base); // @presenter Spacing
+  --sidebar-width: 285px; // @presenter Spacing
+  --sidebar-collapsed-width: 55px; // @presenter Spacing
+  --sidebar-margin-horizontal: var(--spacing-base); // @presenter Spacing
+  --sidebar-offset-top: var(--sidebar-spacing-unit); // @presenter Spacing
+  --sidebar-offset-left: var(--sidebar-spacing-unit); // @presenter Spacing
+
+  --sidebar-chevron-size: var(--spacing-xs); // @presenter Spacing
+  
+  --sidebar-header-padding-bottom: var(--sidebar-spacing-unit);
+  --sidebar-footer-padding-vertical: var(--spacing-sm); // @presenter Spacing
+  --sidebar-footer-padding-horizontal: var(--spacing-base); // @presenter Spacing
+
+  /**
+    * @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 controls
+  */
+
+  --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
+`;