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

Shared UI components lib

import { css } from 'styled-components';

export const markdown = css`
  /**
  * @tokens Markdown Content
  */

  --md-content-max-width: 688px;
  --md-content-padding: 25px 0px 25px 0px; // @presenter Spacing
  --md-content-font-size: var(--font-size-base); // @presenter FontSize
  --md-content-font-family: var(--font-family-base); // @presenter FontFamily
  --md-content-line-height: var(--line-height-base); // @presenter LineHeight
  --md-content-font-weight: var(--font-weight-regular); // @presenter FontWeight
  --md-content-text-color: var(--text-color-secondary); // @presenter Color

  /**
  * @tokens Markdown Blockquote
  */

  --md-blockquote-margin-vertical: 1.5em; // @presenter Spacing
  --md-blockquote-margin-horizontal: 0; // @presenter Spacing
  --md-blockquote-padding-vertical: 0; // @presenter Spacing
  --md-blockquote-padding-horizontal: var(--spacing-base); // @presenter Spacing
  --md-blockquote-border-color: var(--border-color-primary); // @presenter Color
  --md-blockquote-bg-color: transparent; // @presenter Color
  --md-blockquote-border-left: 4px solid var(--md-blockquote-border-color); // @presenter Border
  --md-blockquote-text-color: var(--text-color-secondary); // @presenter Color
  --md-blockquote-box-shadow: none; // @presenter Shadow

  /**
  * @tokens Markdown Paragraph
  */

  --md-paragraph-margin: 0 0 var(--spacing-xs) 0;
  /**
  * @tokens Markdown Table
  */

  --md-table-font-size: var(--md-content-font-size); // @presenter FontSize
  --md-table-line-height: var(--line-height-md); // @presenter FontSize
  --md-table-margin-vertical: 20px; // @presenter Spacing
  --md-table-bg-color: transparent; // @presenter Color
  --md-table-border-radius: var(--border-radius);

  --md-table-border-width: 1px;
  --md-table-header-bg-color: var(--layer-color);
  --md-table-border-color: var(--border-color-secondary); // @presenter Color

  --md-table-stripe-bg-color: var(--md-table-bg-color); // @presenter Color

  --md-table-cell-text-color: var(--text-color-secondary); // @presenter Color
  --md-table-cell-padding: var(--spacing-xs) var(--spacing-sm); // @presenter Spacing
  --md-table-footer-cell-padding: var(--spacing-xxs) var(--spacing-sm); // @presenter Spacing

  --md-table-head-bg-color: var(--md-table-bg-color); // @presenter Color
  --md-table-head-text-color: var(--text-color-primary); // @presenter Color
  --md-table-head-font-weight: var(--font-weight-medium); // @presenter FontWeight

  /**
  * @tokens Markdown Horizontal Rule
  */

  --md-hr-bg-color: transparent; // @presenter Color
  --md-hr-border-color: var(--border-color-secondary); // @presenter Color
  --md-hr-height: unset;
  --md-hr-margin-vertical: 20px; // @presenter Spacing

  /**
  * @tokens Markdown List
  */

  --md-list-left-padding: 1.25rem; // @presenter Spacing
  --md-list-margin: 0 0 var(--spacing-xs) 0; // @presenter Spacing
  --md-list-item-margin: 0.25rem; // @presenter Spacing
  --md-list-item-style: inherit;

  /**
  * @tokens Markdown Checkbox List
  */

  --md-checkbox-list-item-style: none;

  /**
  * @tokens Markdown Numbered List
  */

  --md-numbered-list-number-display: none;
  --md-numbered-list-item-style: var(--md-list-item-style);
  --md-numbered-list-number-text-color: var(--md-content-text-color); // @presenter Color
  --md-numbered-list-number-font-size: var(--md-content-font-size); // @presenter FontSize
  --md-numbered-list-number-font-family: var(--md-content-font-family); // @presenter FontFamily
  --md-numbered-list-number-font-weight: var(--md-content-font-weight); // @presenter FontWeight
  --md-numbered-list-number-bg-color: var(--bg-color-active); // @presenter Color
  --md-numbered-list-number-border-radius: 10px; // @presenter BorderRadius
  --md-numbered-list-number-margin-right: 5px; // @presenter Spacing
  --md-numbered-list-number-padding: 0 5px; // @presenter Spacing


  --md-pre-margin: 0 0 var(--spacing-xs) 0; // @presenter Spacing
  // @tokens End
`;