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

Shared UI components lib

import { css } from 'styled-components';

/* eslint-disable theme/no-raw-colors-in-styles */
export const catalog = css`
  /* === Catalog === */
  /**
    * @tokens Catalog page
    */
  --catalog-page-padding-vertical: var(--spacing-xl);
  --catalog-page-padding-horizontal: var(--spacing-xl);
  --catalog-page-padding: var(--catalog-page-padding-vertical) var(--catalog-page-padding-horizontal);
  --catalog-page-padding-mobile: var(--catalog-page-padding-vertical) var(--spacing-base);

  --catalog-filter-padding-vertical-mobile: 0;
  --catalog-filter-padding-horizontal-mobile: var(--spacing-base);

  --catalog-heading-margin: 0 0 var(--spacing-sm) 0;
  --catalog-sidebar-width: 285px;

  /**
    * @tokens Catalog page wrapper
    */
  --catalog-page-wrapper-font-weight: var(--font-weight-regular);
  --catalog-page-wrapper-text-color: var(--text-color-secondary);
  --catalog-page-wrapper-font-size: var(--font-size-base);
  --catalog-page-wrapper-font-family: var(--font-family-base);
  --catalog-page-wrapper-line-height: var(--line-height-base);

  /**
    * @tokens Catalog page content
    */
  --catalog-page-content-width: 100%;
  --catalog-page-content-margin: 0 auto;

  /**
    * @tokens Catalog page title
    */
  --catalog-title-text-color: var(--text-color-primary);
  --catalog-title-font-weight: var(--font-weight-bold);
  --catalog-title-font-size: var(--h3-font-size);
  --catalog-title-margin: var(--spacing-sm) 0 var(--spacing-sm) 0;
  --catalog-title-spacing-right: 8px;

  /**
    * @tokens Catalog page description
    */
  --catalog-description-text-color: var(--text-color-secondary);
  --catalog-description-font-weight: var(--font-weight-regular);
  --catalog-description-font-size: var(--font-size-lg);
  --catalog-description-margin: 0 0 var(--spacing-xl) 0;
  --catalog-description-line-height: var(--line-height-lg);

  /**
    * @tokens Catalog page separator
    */
  --catalog-separator-color: var(--text-color-secondary);
  --catalog-separator-font-size: var(--font-size-base);
  --catalog-separator-font-weight: var(--font-weight-regular);
  --catalog-separator-border-color: var(--border-color-secondary);
  --catalog-separator-margin: 0 0 var(--spacing-base) 0;
  --catalog-separator-padding: var(--spacing-xxs) 0 0 0;
  --catalog-separator-label-margin: 0 var(--spacing-xs);

  /**
    * @tokens Catalog separators and dividers
    */
  --catalog-hr-border-color: var(--border-color-primary);
  --catalog-hr-border-width: 1px;
  --catalog-hr-width: calc(100% + 48px);
  --catalog-hr-margin: auto -24px 0 -24px;

  /**
    * @tokens Catalog links
    */
  --catalog-link-color: var(--link-color-primary);
  --catalog-link-font-weight: var(--link-font-weight);
  --catalog-link-text-decoration: none;

  /**
    * @tokens Catalog selector
    */
  --catalog-select-border-radius: var(--filter-input-border-radius);
  --catalog-select-icon-color: var(--input-t-icon-color);
  --catalog-select-accordion-header-padding: 12px 16px 8px 16px;
  --catalog-select-accordion-body-padding: 0px 16px 12px 16px;
  --catalog-select-select-line-height: 1.15em;
  --catalog-select-select-input-padding: 8px 12px;

  /**
    * @tokens Catalog highlight
    */
  --catalog-highlight-bg-color: var(--search-highlight-bg-color);
  --catalog-highlight-text-color: var(--search-highlight-text-color);

  /**
    * @tokens Catalog entity
    */

  --catalog-entity-max-width: 1072px;
  --catalog-spacing-large: calc(var(--spacing-unit) * 16);
  --catalog-entity-padding: var(--spacing-xl) var(--catalog-spacing-large);
  --catalog-entity-padding-large: var(--spacing-lg) var(--catalog-spacing-large);
  --catalog-entity-padding-medium: var(--spacing-lg) var(--spacing-xl);
  --catalog-entity-padding-small: var(--spacing-lg) var(--spacing-base);
  --catalog-entity-margin: 0 auto;

  /**
    * @tokens Catalog entity icon
    */
  --catalog-entity-icon-color: var(--color-persian-green-8);
  --catalog-entity-border-color: var(--border-color-secondary);
  --catalog-entity-bg-color: var(--bg-color-tonal);

  --catalog-entity-icon-color-service: var(--color-blue-6);
  --catalog-entity-border-color-service: var(--color-blue-4);
  --catalog-entity-bg-color-service: var(--color-blue-1);

  --catalog-entity-icon-color-domain: var(--color-grass-8);
  --catalog-entity-border-color-domain: var(--color-grass-4);
  --catalog-entity-bg-color-domain: var(--color-grass-1);

  --catalog-entity-icon-color-team: var(--color-purple-7);
  --catalog-entity-border-color-team: var(--color-purple-4);
  --catalog-entity-bg-color-team: var(--color-purple-1);

  --catalog-entity-icon-color-user: var(--color-orange-7);
  --catalog-entity-border-color-user: var(--color-orange-4);
  --catalog-entity-bg-color-user: var(--color-orange-1);

  --catalog-entity-icon-color-api-description: var(--color-sky-8);
  --catalog-entity-border-color-api-description: var(--color-sky-5);
  --catalog-entity-bg-color-api-description: var(--color-sky-1);

  --catalog-entity-icon-color-data-schema: var(--color-carrot-8);
  --catalog-entity-border-color-data-schema: var(--color-carrot-6);
  --catalog-entity-bg-color-data-schema: var(--color-carrot-1);

  --catalog-entity-icon-color-api-operation: var(--color-raspberry-7);
  --catalog-entity-border-color-api-operation: var(--color-raspberry-3);
  --catalog-entity-bg-color-api-operation: var(--color-raspberry-1);

  --catalog-entity-icon-color-custom: var(--color-persian-green-8);
  --catalog-entity-border-color-custom: var(--color-persian-green-5);
  --catalog-entity-bg-color-custom: var(--color-persian-green-1);

  /**
    * @tokens Catalog tags
    */
  --catalog-tags-more-button-font-size: var(--font-size-base);
  --catalog-tags-more-button-margin-left: 4px;
  --catalog-tags-placeholder-bg-color: var(--bg-color);
  --catalog-tags-not-connected-font-size: var(--font-size-base);
  --catalog-tags-not-connected-line-height: var(--line-height-base);
  --catalog-tags-not-connected-color: var(--text-color-disabled);

  /**
    * @tokens Catalog empty state
    */
  --catalog-empty-state-padding: var(--catalog-table-empty-state-padding);
  --catalog-empty-state-font-weight: var(--font-weight-regular);

  /**
    * @tokens Catalog actions
    */
  --catalog-actions-row-margin-bottom: var(--spacing-xl);
  --catalog-controls-wrapper-gap: var(--spacing-sm);

  /**
    * @tokens Catalog filter
    */
  --catalog-filter-input-width: 360px;
  --catalog-filter-content-header-padding: var(--spacing-base) var(--spacing-base) var(--spacing-sm) var(--spacing-base);

  /**
    * @tokens Catalog search input wrapper
    */
  --catalog-search-input-wrapper-width: var(--catalog-filter-input-width);

  /**
    * @tokens Catalog controls wrapper
    */
  --catalog-controls-wrapper-display: flex;
  --catalog-controls-wrapper-align-items: center;
  --catalog-controls-wrapper-margin-left: auto;

  /**
    * @tokens Catalog sort button
    */
  --catalog-sort-trigger-gap: var(--spacing-xs);
  --catalog-sort-trigger-padding: 6px 8px;
  --catalog-sort-trigger-border-radius: var(--border-radius-md);
  --catalog-sort-trigger-hover-bg-color: var(--button-bg-color-secondary-hover);
  --catalog-sort-icon-color: var(--text-color-secondary);
  --catalog-sort-text-font-size: var(--font-size-sm);
  --catalog-sort-text-color: var(--text-color-secondary);
  --catalog-sort-text-font-weight: var(--font-weight-medium);

  /**
    * @tokens Catalog sidebar
    */
  --catalog-sidebar-display-mobile: none;
  --catalog-sidebar-display-desktop: flex;
  --catalog-sidebar-menu-container-padding-top: 0;

  /**
    * @tokens Catalog card
    */
  --catalog-card-height: 241px;
  --catalog-card-padding-vertical: var(--spacing-base);
  --catalog-card-padding-horizontal: var(--spacing-md);
  --catalog-card-gap: var(--spacing-sm);
  --catalog-card-text-color: var(--text-color-secondary);
  --catalog-card-font-size: var(--font-size-base);
  --catalog-card-font-weight: var(--font-weight-regular);
  --catalog-card-bg-color: var(--layer-color);
  --catalog-card-border-color: var(--border-color-secondary);
  --catalog-card-divider-color: var(--border-color-secondary);
  --catalog-card-border-width: var(--border-width);
  --catalog-card-border-style: var(--border-style);
  --catalog-card-border-color-hover: var(--border-color-primary);
  --catalog-card-border-radius: var(--border-radius-lg);
  --catalog-cards-group-margin: 0 0 var(--spacing-base) 0;
  --catalog-cards-group-gap: var(--spacing-lg);

  /**
    * @tokens Catalog card icon
    */
  --catalog-card-icon-width: 30px;
  --catalog-card-icon-height: 30px;
  --catalog-card-icon-border-radius: 4px;
  --catalog-card-icon-bg-color: var(--bg-color);
  --catalog-card-icon-border-color: var(--border-color-secondary);
  --catalog-card-icon-border-width: 1px;
  --catalog-card-icon-margin-right: var(--spacing-xs);

  /**
    * @tokens Catalog metadata
    */
  --catalog-metadata-section-margin-top: var(--spacing-base);
  --catalog-metadata-section-gap: var(--spacing-xs);
  --catalog-metadata-label-font-size: var(--font-size-base);
  --catalog-metadata-label-font-weight: var(--font-weight-medium);
  --catalog-metadata-label-color: var(--text-color-description);
  --catalog-metadata-column-half-gap: var(--spacing-sm);
  --catalog-metadata-heading-size: var(--font-size-md);

  /**
    * @tokens Catalog show more button
    */
  --catalog-show-more-button-gap: 0.5rem;
  --catalog-show-more-button-color: var(--text-color-primary);
  --catalog-show-more-button-color-hover: var(--text-color-secondary);

  /**
    * @tokens Catalog arrow circle
    */
  --catalog-arrow-circle-size: 32px;
  --catalog-arrow-circle-radius: 16px;
  --catalog-arrow-circle-bg-color: var(--button-bg-color-secondary);

  /**
    * @tokens Catalog card title
    */
  --catalog-card-title-color: var(--text-color-primary);
  --catalog-card-title-min-height: var(--spacing-xxl);
  --catalog-card-title-font-size: var(--font-size-xl);
  --catalog-card-title-font-weight: var(--font-weight-medium);
  --catalog-card-title-line-height: var(--line-height-xl);
  --catalog-card-title-height: 34px;
  --catalog-card-title-display: flex;
  --catalog-card-title-align-items: center;
  --catalog-card-title-margin-bottom: 2px;

  /**
    * @tokens Catalog card summary
    */
  --catalog-card-summary-font-size: var(--font-size-base);
  --catalog-card-summary-font-weight: var(--font-weight-regular);
  --catalog-card-summary-line-height: var(--line-height-base);

  /**
    * @tokens Catalog card footer
    */
  --catalog-card-footer-height: 72px;

  /**
    * @tokens Catalog card description
    */
  --catalog-card-description-line-clamp: 3;
  --catalog-card-description-color: var(--text-color-description);
  --catalog-card-description-font-size: var(--font-size-base);
  --catalog-card-description-line-height: var(--line-height-base);
  --catalog-card-description-font-weight: var(--font-weight-regular);
  --catalog-card-description-height: 62px;
  --catalog-card-description-margin-top: 8px;

  --catalog-card-content-gap: var(--spacing-xs);
  --catalog-card-content-gap-vertical: var(--spacing-sm);

  --catalog-card-tag-bg: transparent;

  --catalog-actions-gap: var(--spacing-xs);
  --catalog-actions-padding-vertical: var(--spacing-xs);
  --catalog-actions-padding-horizontal: 5%;
  --catalog-actions-min-height: 40px;
  --catalog-actions-bg-color: var(--bg-color-tonal);

  --catalog-page-badge-border-radius: var(--border-radius);
  --catalog-page-badge-padding: 0 var(--spacing-xs);
  --catalog-page-badge-font-size: var(--font-size-base);
  --catalog-page-badge-line-height: var(--line-height-base);

  --catalog-page-badge-dot-size: 6px;
  --catalog-page-badge-dot-border-color: var(--color-static-white);

  /**
   * @tokens Catalog card metadata
   */
  --catalog-card-metadata-owner-tag-left-padding: 2px;


  /**
    * @tokens Catalog table
    */
  --catalog-table-border-color: var(--border-color-secondary);
  --catalog-table-header-bg-color: var(--layer-color);
  --catalog-table-header-font-weight: var(--font-weight-medium);
  --catalog-table-header-cell-padding: 4px 8px;
  --catalog-table-cell-padding: 4px 8px;
  --catalog-table-row-hover-bg-color: var(--bg-color-hover, rgba(0, 0, 0, 0.04));
  --catalog-table-empty-state-padding: 32px;
  --catalog-table-empty-state-color: var(--text-color-secondary);
  --catalog-table-title-cell-gap: 12px;
  --catalog-table-entity-title-content-offset: 42px;

  /**
    * @tokens Catalog table header
    */
  --catalog-table-header-sort-icon-color-active: var(--text-color-primary);
  --catalog-table-header-sort-icon-color-inactive: var(--text-color-helper);
  --catalog-table-header-sort-indicator-color: var(--icon-color-primary);
  --catalog-table-header-sort-arrow-bg-active: var(--bg-color-active);

  /**
    * @tokens Catalog table icon
    */
  --catalog-table-icon-width: 32px;
  --catalog-table-icon-height: 32px;
  --catalog-table-icon-border-radius: 4px;
  --catalog-table-icon-bg-color: var(--bg-color-tonal);
  --catalog-table-icon-border-color: var(--border-color-secondary);
  --catalog-table-icon-border-width: 1px;

  /**
    * @tokens Catalog table entity title
    */
  --catalog-table-entity-title-font-size: var(--font-size-lg);
  --catalog-table-entity-title-line-height: var(--line-height-lg);
  --catalog-table-entity-title-font-weight: var(--font-weight-medium);

  /**
    * @tokens Catalog table description
    */
  --catalog-table-description-line-clamp: 3;
  --catalog-table-description-color: var(--text-color-description);
  --catalog-table-description-font-size: var(--font-size-base);
  --catalog-table-description-line-height: var(--line-height-base);
  --catalog-table-description-font-weight: var(--font-weight-regular);
  --catalog-table-description-height: 62px;
  --catalog-table-entity-summary-font-size: var(--font-size-sm);
  --catalog-table-entity-summary-line-height: var(--line-height-sm);

  --catalog-table-content-gap: var(--spacing-xxs);

  --catalog-table-tag-bg: transparent;

  /**
    * @tokens Catalog entity type tags
    */
  --catalog-entity-service-tag-text-color: var(--color-blue-7);
  --catalog-entity-service-tag-border-color: var(--color-blue-4);

  --catalog-entity-domain-tag-text-color: var(--color-grass-8);
  --catalog-entity-domain-tag-border-color: var(--color-grass-4);

  --catalog-entity-team-tag-text-color: var(--color-purple-7);
  --catalog-entity-team-tag-border-color: var(--color-purple-4);

  --catalog-entity-user-tag-text-color: var(--color-green-7);
  --catalog-entity-user-tag-border-color: var(--color-green-4);

  --catalog-entity-api-description-tag-text-color: var(--color-sky-8);
  --catalog-entity-api-description-tag-border-color: var(--color-sky-5);

  /**
    * @tokens Catalog view mode toggle
    */
  --catalog-view-mode-toggle-gap: var(--spacing-xxs);
  --catalog-view-mode-toggle-active-bg-color: var(--button-bg-color-secondary-hover);
  --catalog-view-mode-button-width: 32px;
  --catalog-view-mode-button-height: 32px;
  --catalog-view-mode-button-border-radius: var(--border-radius-md);
  --catalog-view-mode-table-icon-size: 12px;
  --catalog-view-mode-cards-icon-size: 13px;

  /**
    * @tokens Catalog empty state
    */
  --catalog-empty-state-text-color: var(--text-color-description);
  --catalog-empty-state-min-height: 300px;
  --catalog-empty-state-header-text-color: var(--text-color-primary);
  --catalog-empty-state-header-font-size: var(--font-size-xl);
  --catalog-empty-state-header-font-weight: var(--font-weight-medium);
  --catalog-empty-state-header-line-height: var(--line-height-xl);
  --catalog-empty-state-font-size: var(--font-size-base);
  --catalog-empty-state-line-height: var(--line-height-base);

  /**
    * @tokens Catalog avatar
    */
  --catalog-avatar-bg-color: #ededf2;
  --catalog-avatar-small-size: 20px;
  --catalog-avatar-medium-size: 32px;
  --catalog-avatar-large-size: 40px;
  --catalog-avatar-font-size-small: 10px;
  --catalog-avatar-font-size-medium: var(--font-size-base);
  --catalog-avatar-font-size-large: var(--font-size-lg);
  --catalog-avatar-font-weight: var(--font-weight-regular);
  --catalog-avatar-line-height: var(--line-height-base);
  // @tokens End

  /**
    * @tokens Catalog entity relations node
    */
  --catalog-entity-relations-node-padding-vertical: 8px;
  --catalog-entity-relations-node-padding-horizontal: 12px;
  --catalog-entity-relations-node-padding: var(--catalog-entity-relations-node-padding-vertical) var(--catalog-entity-relations-node-padding-horizontal);
  --catalog-entity-relations-node-gap: 4px;
  --catalog-entity-relations-node-border-radius: 10px;

  --catalog-entity-relations-node-bg-color: var(--layer-color);
  --catalog-entity-relations-node-text-color: var(--catalog-card-text-color);

  --catalog-entity-relations-node-border-color: var(--border-color-secondary);
  --catalog-entity-relations-node-border-width: var(--border-width);
  --catalog-entity-relations-node-border-style: var(--border-style);

  --catalog-entity-relations-node-font-weight: var(--font-weight-regular);

  --catalog-entity-relations-node-root-bg-color: var(--color-blue-6);
  --catalog-entity-relations-node-root-text-color: var(--color-static-white);
  --catalog-entity-relations-node-root-icon-color: var(--color-static-white);
  // @tokens End

  /**
    * @tokens Catalog entity relations edge
    */
  --catalog-entity-relations-edge-label-bg-color: var(--layer-color);
  --catalog-entity-relations-edge-label-text-color: var(--catalog-card-text-color);
  --catalog-entity-relations-edge-label-border-color: var(--border-color-secondary);
  --catalog-entity-relations-edge-label-border-width: var(--border-width);
  --catalog-entity-relations-edge-label-border-style: var(--border-style);
  --catalog-entity-relations-edge-label-border-radius: 10px;

  --catalog-entity-relations-edge-label-padding-vertical: 2px;
  --catalog-entity-relations-edge-label-padding-horizontal: 8px;
  --catalog-entity-relations-edge-label-padding: var(--catalog-entity-relations-edge-label-padding-vertical) var(--catalog-entity-relations-edge-label-padding-horizontal);

  --catalog-entity-relations-edge-label-font-size: 12px;
  --catalog-entity-relations-edge-label-line-height: 1.2;
  // @tokens End

  /**
    * @tokens Catalog history button
    */
  --catalog-history-button-width: 252px;
  --catalog-history-button-item-width: 244px;
  --catalog-history-separator-border-color: var(--border-color-secondary);
  --catalog-history-separator-margin-bottom: var(--spacing-sm);
  --catalog-history-item-padding: var(--spacing-xxs);
  --catalog-history-item-margin-bottom: calc(var(--spacing-xxs) * -1);
  --catalog-history-item-gap: var(--spacing-xs);
  --catalog-history-item-border-radius: var(--menu-item-label-border-radius);
  --catalog-history-item-bg-color-hover: var(--menu-item-bg-color-hover);
  --catalog-history-icon-size: 16px;
  --catalog-history-content-max-width: 212px;
  --catalog-history-text-font-family: var(--font-family-base);
  --catalog-history-text-font-size: var(--font-size-base);
  --catalog-history-text-font-weight: var(--font-weight-regular);
  --catalog-history-text-line-height: var(--line-height-base);
  --catalog-history-text-color: var(--text-color-primary);
  --catalog-history-pill-gap: var(--spacing-xxs);
  --catalog-history-pill-padding-vertical: 1px;
  --catalog-history-pill-padding-horizontal: var(--spacing-xs);
  --catalog-history-pill-border-color: var(--border-color-primary);
  --catalog-history-pill-border-radius: 12px;
  --catalog-history-pill-icon-size: 16px;
  --catalog-history-pill-icon-color: var(--color-green-8);
  --catalog-history-pill-font-family: var(--font-family-base);
  --catalog-history-pill-font-size: var(--font-size-base);
  --catalog-history-pill-line-height: var(--line-height-base);
  --catalog-history-pill-text-color: var(--text-color-primary);
  --catalog-history-pill-min-width: calc(100% - 118px - var(--catalog-history-item-gap));


  // @tokens End

  /**
    * @tokens Catalog history sidebar
    */
  --catalog-history-sidebar-width: 320px;
  --catalog-history-sidebar-bg-color: var(--sidebar-bg-color);
  --catalog-history-sidebar-border-color: var(--border-color-secondary);

  --catalog-history-sidebar-header-padding: var(--spacing-base) var(--spacing-sm) var(--spacing-base);
  --catalog-history-sidebar-header-font-family: var(--font-family-base);
  --catalog-history-sidebar-header-font-size: var(--font-size-base);
  --catalog-history-sidebar-header-font-weight: var(--font-weight-regular);
  --catalog-history-sidebar-header-line-height: var(--line-height-base);
  --catalog-history-sidebar-header-letter-spacing: 0;
  --catalog-history-sidebar-header-color: var(--text-color-primary);

  --catalog-history-sidebar-close-button-size: 32px;
  --catalog-history-sidebar-close-button-border-radius: var(--border-radius-md);
  --catalog-history-sidebar-close-button-bg-color-hover: var(--color-hover-base);
  --catalog-history-sidebar-close-icon-color: var(--text-color-primary);

  --catalog-history-sidebar-content-padding: 0 var(--spacing-sm);
  --catalog-history-sidebar-content-margin-top: calc(var(--spacing-xxs) * -1);

  --catalog-history-sidebar-version-header-padding: var(--spacing-xs) var(--spacing-xxs);
  --catalog-history-sidebar-version-header-border-radius: var(--border-radius-md);
  --catalog-history-sidebar-version-header-bg-color-hover: var(--color-hover-base);

  --catalog-history-sidebar-version-icon-size: 32px;
  --catalog-history-sidebar-version-icon-color: var(--text-color-secondary);
  --catalog-history-sidebar-version-icon-color-current: var(--color-static-white);
  --catalog-history-sidebar-version-icon-margin-right: var(--spacing-xs);
  --catalog-history-sidebar-chevron-icon-color: var(--text-color-secondary);
  --catalog-history-sidebar-version-info-gap: 2px;

  --catalog-history-sidebar-version-title-font-family: var(--font-family-base);
  --catalog-history-sidebar-version-title-font-size: var(--font-size-base);
  --catalog-history-sidebar-version-title-font-weight: var(--font-weight-medium);
  --catalog-history-sidebar-version-title-line-height: var(--line-height-base);
  --catalog-history-sidebar-version-title-color: var(--color-warm-grey-7);

  --catalog-history-sidebar-version-date-font-family: var(--font-family-base);
  --catalog-history-sidebar-version-date-font-size: var(--font-size-sm);
  --catalog-history-sidebar-version-date-font-weight: var(--font-weight-regular);
  --catalog-history-sidebar-version-date-line-height: var(--line-height-sm);
  --catalog-history-sidebar-version-date-color: var(--color-warm-grey-7);

  --catalog-history-sidebar-revisions-padding-left: 40px;
  --catalog-history-sidebar-revisions-padding-bottom: var(--spacing-base);

  --catalog-history-sidebar-revision-item-padding: var(--spacing-xs) var(--spacing-sm);
  --catalog-history-sidebar-revision-item-border-radius: var(--border-radius-md);
  --catalog-history-sidebar-revision-item-bg-color-hover: var(--bg-color-hover);

  --catalog-history-sidebar-revision-name-font-family: var(--font-family-base);
  --catalog-history-sidebar-revision-name-font-size: var(--font-size-base);
  --catalog-history-sidebar-revision-name-font-weight: var(--font-weight-regular);
  --catalog-history-sidebar-revision-name-line-height: var(--line-height-base);
  --catalog-history-sidebar-revision-name-color: var(--text-color-primary);

  --catalog-history-sidebar-revision-date-font-family: var(--font-family-base);
  --catalog-history-sidebar-revision-date-font-size: var(--font-size-sm);
  --catalog-history-sidebar-revision-date-font-weight: var(--font-weight-regular);
  --catalog-history-sidebar-revision-date-line-height: var(--line-height-sm);
  --catalog-history-sidebar-revision-date-color: var(--color-warm-grey-7);

  --catalog-history-sidebar-revision-line-color: var(--border-color-secondary);
  --catalog-history-sidebar-revision-item-bg-color-active: var(--bg-color-active);

  --catalog-history-sidebar-revisions-limit-message-color: var(--color-warm-grey-6);

  /**
   * @tokens Catalog history tag border radius
   */
  --catalog-history-sidebar-version-tag-border-radius: var(--border-radius-xl);
  --catalog-history-sidebar-revision-tag-border-radius: var(--border-radius-xl);
  // @tokens End
`;
/* eslint-enable theme/no-raw-colors-in-styles */