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

Shared UI components lib

import { css } from 'styled-components';

export const catalogClassic = css`
  /* === Catalog === */
  /**
    * @tokens Catalog page
    */
  --catalog-classic-page-padding-vertical: var(--spacing-lg);
  --catalog-classic-page-padding-horizontal: var(--spacing-xl);
  --catalog-classic-page-padding: var(--catalog-classic-page-padding-vertical) var(--catalog-classic-page-padding-horizontal);

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

  --catalog-classic-heading-margin: 0 0 var(--spacing-xl) 0;

  /**
    * @tokens Catalog page title
    */
  --catalog-classic-title-text-color: var(--text-color-primary);
  --catalog-classic-title-font-weight: var(--font-weight-bold);
  --catalog-classic-title-font-size: var(--font-size-heading-3);
  --catalog-classic-title-margin: 0 0 var(--spacing-sm) 0;

  /**
    * @tokens Catalog page description
    */
  --catalog-classic-description-text-color: var(--text-color-secondary);
  --catalog-classic-description-font-weight: var(--font-weight-regular);
  --catalog-classic-description-font-size: var(--font-size-base);
  --catalog-classic-description-margin: 0 0 var(--spacing-sm) 0;

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

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

  /**
    * @tokens Catalog card title
    */
  --catalog-classic-card-title-color: var(--text-color-primary);
  --catalog-classic-card-title-min-height: var(--spacing-xxl);
  --catalog-classic-card-title-font-size: var(--font-size-lg);
  --catalog-classic-card-title-font-weight: var(--font-weight-bold);
  --catalog-classic-card-title-line-height: var(--line-height-lg);
  --catalog-classic-card-title-line-clamp: 2;

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

  --catalog-classic-card-content-gap: var(--spacing-xxs);

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

  --catalog-classic-highlight-bg-color: none;
  --catalog-classic-highlight-text-color: var(--color-info-base);

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

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

  --catalog-classic-page-badge-dot-size: 6px;
  --catalog-classic-page-badge-dot-border-color: #ffffff;

  // @tokens End
`;