@redocly/theme/src/components/Sidebar/variables.ts

Shared UI components lib

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