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

Shared UI components lib

import { css } from 'styled-components';

export const code = css`
  /**
    * Tree view icons font
    */
  @font-face {
    font-family: 'TreeViewIcons';
    /**
    * Use the following escape sequences to refer to a specific icon:
    *
    * - \\ea01 file
    * - \\ea02 folder
    * - \\ea03 image
    * - \\ea04 audio
    * - \\ea05 video
    * - \\ea06 text
    * - \\ea07 code
    * - \\ea08 archive
    * - \\ea09 pdf
    * - \\ea0a excel
    * - \\ea0b powerpoint
    * - \\ea0c word
    */
    src: url('data:application/font-woff;base64,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') format('woff');
  }
  
  /**
    * @tokens Code base styles
    */
  --code-font-size: var(--font-size-sm); // @presenter FontSize
  --code-font-family: var(--font-family-monospaced); // @presenter FontFamily
  --code-font-weight: var(--font-weight-regular); // @presenter FontWeight
  --code-line-height: var(--line-height-sm); // @presenter LineHeight
  --code-wrap: pre;
  --code-word-break: break-word;

  /**
    * @tokens Inline Code
    */
  --inline-code-font-size: var(--code-font-size); // @presenter FontSize
  --inline-code-font-family: var(--code-font-family); // @presenter FontFamily
  --inline-code-font-weight: var(--code-font-weight); // @presenter FontWeight
  --inline-code-line-height: var(--code-line-height); // @presenter LineHeight
  --inline-code-text-color: var(--text-color-secondary); // @presenter Color
  --inline-code-bg-color: var(--border-color-secondary); // @presenter Color
  --inline-code-border-color: var(--border-color-primary); // @presenter Color
  --inline-code-border-radius: var(--border-radius); // @presenter BorderRadius

  /**
    * @tokens Code Block
    */
  --code-block-font-size: var(--code-font-size); // @presenter FontSize
  --code-block-font-family: var(--code-font-family); // @presenter FontFamily
  --code-block-line-height: var(--code-line-height); // @presenter LineHeight
  --code-block-font-weight: var(--code-font-weight); // @presenter FontWeight
  --code-block-text-color: var(--text-color-secondary); // @presenter Color
  --code-block-bg-color: var(--layer-color); // @presenter Color
  --code-block-padding: var(--spacing-xs) 0 var(--spacing-xs) var(--spacing-sm);
  --code-block-margin: 0;
  --code-block-max-height: calc(100vh - 300px); // Where 300 is combined value of navbar, code block heading, controls height and paddings
  --code-block-word-break: initial;

  /**
    * @tokens Code Block controls
    */

  --code-block-controls-font-size: var(--font-size-base); // @presenter FontSize
  --code-block-controls-font-family: var(--font-family-base); // @presenter FontFamily
  --code-block-controls-text-color: var(--text-color-primary); // @presenter Color
  --code-block-controls-font-weight: var(--font-weight-medium); // @presenter Color
  --code-block-controls-bg-color: transparent; // @presenter Color
  --code-block-controls-border: 1px solid var(--border-color-secondary); // @presenter Border
  --code-block-icon-controls-bg-color: var(--code-block-controls-bg-color);
  --code-block-text-controls-bg-color: var(--code-block-controls-bg-color);
  --code-block-controls-padding: var(--spacing-unit) var(--spacing-unit) var(--spacing-unit) var(--spacing-base);
  --code-block-controls-height: 20px;
  --code-block-controls-width: 20px;

  /**
    * @tokens Code Block tokens
   */
  --code-block-tokens-default-color: var(--text-color-secondary); // @presenter Color
  --code-block-tokens-comment-color: var(--input-content-placeholder-color); // @presenter Color
  --code-block-tokens-prolog-color: var(--code-block-tokens-comment-color); // @presenter Color
  --code-block-tokens-doctype-color: var(--code-block-tokens-comment-color); // @presenter Color
  --code-block-tokens-cdata-color: var(--code-block-tokens-comment-color); // @presenter Color
  --code-block-tokens-property-color: var(--code-block-tokens-default-color); // @presenter Color
  --code-block-tokens-tag-color: var(--code-block-tokens-default-color); // @presenter Color
  --code-block-tokens-number-color: var(--code-block-tokens-default-color); // @presenter Color
  --code-block-tokens-constant-color: var(--code-block-tokens-default-color); // @presenter Color
  --code-block-tokens-symbol-color: var(--code-block-tokens-default-color); // @presenter Color
  --code-block-tokens-boolean-color: var(--color-green-7); // @presenter Color
  --code-block-tokens-string-color: var(--color-blue-7); // @presenter Color
  --code-block-tokens-property-string-color: var(--color-blue-7); // @presenter Color
  --code-block-tokens-selector-color: var(--code-block-tokens-string-color); // @presenter Color
  --code-block-tokens-attr-name-color: var(--code-block-tokens-string-color); // @presenter Color
  --code-block-tokens-char-color: var(--code-block-tokens-string-color); // @presenter Color
  --code-block-tokens-builtin-color: var(--code-block-tokens-string-color); // @presenter Color
  --code-block-tokens-inserted-color: var(--code-block-tokens-string-color); // @presenter Color
  --code-block-tokens-link-color: var(--color-blue-7); // @presenter Color
  --code-block-tokens-operator-color: var(--color-carrot-7); // @presenter Color
  --code-block-tokens-entity-color: var(--code-block-tokens-operator-color); // @presenter Color
  --code-block-tokens-url-color: var(--code-block-tokens-operator-color); // @presenter Color
  --code-block-tokens-variable-color: var(--code-block-tokens-operator-color); // @presenter Color
  --code-block-tokens-keyword-color: var(--color-magenta-7); // @presenter Color
  --code-block-tokens-atrule-color: var(--code-block-tokens-keyword-color); // @presenter Color
  --code-block-tokens-attr-value-color: var(--code-block-tokens-keyword-color); // @presenter Color
  --code-block-tokens-regex-color: var(--color-carrot-7); // @presenter Color
  --code-block-tokens-regex-char-escape-color: var(--color-grass-8); // @presenter Color
  --code-block-tokens-important-color: var(--code-block-tokens-regex-color); // @presenter Color
  --code-block-tokens-deleted-color: var(--color-red-7); // @presenter Color
  --code-block-tokens-class-name-color: var(--color-carrot-7); // @presenter Color
  --code-block-tokens-function-color: var(--color-carrot-7); // @presenter Color
  --code-block-tokens-invalid-color: var(--color-orange-8); // @presenter Color
  --code-block-tokens-message-error-color: var(--code-block-tokens-invalid-color); // @presenter Color
  --code-block-tokens-unmatched-color: var(--code-block-tokens-invalid-color); // @presenter Color
  --code-block-tokens-markup-bg-color: var(--color-grass-1); // @presenter Color
  --code-block-tokens-markup-foreground-color: var(--color-grass-8); // @presenter Color
  --code-block-tokens-markup-changed-color: var(--color-carrot-1); // @presenter Color
  --code-block-tokens-markup-deleted-color: var(--color-magenta-1); // @presenter Color
  --code-block-tokens-markup-quote-color: var(--color-grass-8); // @presenter Color
  --code-block-tokens-markup-ignored-color: var(--color-blue-1); // @presenter Color
  --code-block-tokens-warm-bg-color: var(--color-warm-grey-2); // @presenter Color
  --code-block-tokens-warm-foreground-color: var(--color-warm-grey-8); // @presenter Color
  --code-block-tokens-meta-diff-range-color: var(--color-purple-8); // @presenter Color

  /**
    * @tokens Code Block tree view
   */
  --code-block-tree-view-icon-font-family: 'TreeViewIcons'; // @presenter FontFamily
  --code-block-tree-view-lines-color: var(--border-color-primary); // @presenter Color
  --code-block-tree-view-comment-color: var(--input-content-placeholder-color); // @presenter Color

  // @tokens End
`;