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

Shared UI components lib

import { css } from 'styled-components';

export const tooltip = css`
  /**
    * @tokens Tooltip Base
    * @presenter Color
    */

  --tooltip-text-color: var(--color-static-white);
  --tooltip-bg-color: var(--color-warm-grey-10);
  --tooltip-arrow-color: var(--tooltip-border-color);
  --tooltip-border-width: 2px;
  --tooltip-border-style: solid;
  --tooltip-border-color: var(--color-warm-grey-8);
  --tooltip-padding-vertical: var(--spacing-xxs);
  --tooltip-padding-horizontal: var(--spacing-xs);
  --tooltip-padding: var(--tooltip-padding-vertical) var(--tooltip-padding-horizontal);
  --tooltip-max-width: 400px;

  .tooltip-copy-button {
    --tooltip-text-color: var(--color-static-white);
    --tooltip-bg-color: var(--color-warm-grey-10);
    --tooltip-arrow-color: var(--tooltip-border-color);
  }

  .tooltip-catalog {
    --tooltip-text-color: var(--text-color-primary);
    --tooltip-bg-color: var(--layer-color);
    --tooltip-arrow-color: var(--border-color-secondary);
    --tooltip-border-width: 2px;
    --tooltip-border-color: var(--border-color-secondary);
    --tooltip-padding-vertical: var(--spacing-xs);
    --tooltip-padding-horizontal: var(--spacing-sm);
    --tooltip-padding: var(--tooltip-padding-vertical) var(--tooltip-padding-horizontal);
    --tooltip-max-width: 300px;
  }

  // @tokens End
`;