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

Shared UI components lib

import { css } from 'styled-components';

export const navbar = css`
  --navbar-bg-color: var(--bg-color); // @presenter Color
  --navbar-border-color: var(--border-color-secondary);
  --navbar-border: 1px solid var(--navbar-border-color);

  --navbar-text-color: var(--text-color-secondary); // @presenter Color
  --navbar-height: 64px; // @presenter Spacing
  --navbar-font-size: var(--font-size-base);
  --navbar-padding: 0 var(--spacing-xl); // @presenter Spacing
  --navbar-font-family: var(--font-family-base);
  --navbar-container-max-width: 100%;

  --navbar-menu-items-gap: var(--spacing-sm);
  --navbar-menu-justify-content: flex-start;

  --navbar-item-font-weight: var(--font-weight-regular);

  --navbar-item-text-color-active: var(--text-color-primary);
  --navbar-item-text-decoration-active: none;
  --navbar-item-bottom-border-active: none;

  --navbar-item-padding-vertical: var(--spacing-xxs);
  --navbar-item-padding-horizontal: var(--spacing-sm);
  --navbar-item-padding: var(--navbar-item-padding-vertical) var(--navbar-item-padding-horizontal);

  --navbar-item-line-height: var(--line-height-base);
  --navbar-item-bg-color-active: var(--bg-color-active);
  --navbar-item-border-radius: var(--border-radius);
  --navbar-item-bottom-border: none;

  --navbar-item-text-color-hover: var(--text-color-primary);
  --navbar-item-text-decoration-hover: none;
  --navbar-item-bg-color-hover: var(--bg-color);
  --navbar-item-bottom-border-hover: none;

  --navbar-item-icon-width: 1.5em; // @presenter Spacing
  --navbar-item-icon-height: 1.5em; // @presenter Spacing
  --navbar-item-icon-margin-right: 0.5em; // @presenter Spacing

  --navbar-logo-height: var(--logo-height);
  --navbar-logo-width: var(--logo-width);
  --navbar-logo-margin: var(--logo-margin);
  --navbar-logo-max-width: var(--logo-max-width);
  --navbar-logo-max-height: var(--logo-max-height);

  --navbar-separator-text-color: var(--text-color-description);
  --navbar-separator-font-size: var(--font-size-sm);
  --navbar-separator-line-height: var(--line-height-sm);
`;