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

Shared UI components lib

import { css } from 'styled-components';

/* eslint-disable theme/no-raw-colors-in-styles */
export const toast = css`
  /**
    * @tokens Toast
    * @presenter BoxShadow
    */

  --toast-box-shadow: 2px 2px 12px 0 rgba(0, 0, 0, 0.04), 2px 2px 24px 8px rgba(0, 0, 0, 0.04);

  /**
    * @tokens Toast surface
    */
  --toast-min-width: 240px;
  --toast-max-width: 360px;
  --toast-bg-color: var(--layer-color); // @presenter Color
  --toast-border: var(--border-width) var(--border-style) var(--border-color-secondary); // @presenter Border
  --toast-border-radius: var(--border-radius-md); // @presenter BorderRadius
  --toast-font-family: var(--font-family-base); // @presenter FontFamily

  /**
    * @tokens Toast spacing
    */
  --toast-simple-gap: var(--spacing-unit);
  --toast-simple-padding: var(--spacing-xs) var(--spacing-sm);
  --toast-detailed-padding: var(--spacing-sm);
  --toast-content-gap: var(--spacing-xs);
  --toast-title-gap: var(--spacing-xs);
  --toast-description-gap: var(--spacing-xs);

  /**
    * @tokens Toast icon
    */
  --toast-icon-size: 14px;
  --toast-icon-line-height: var(--line-height-base); // @presenter LineHeight
  --toast-icon-color-info: var(--color-info-base); // @presenter Color
  --toast-icon-color-success: var(--color-success-base); // @presenter Color
  --toast-icon-color-warning: var(--color-warning-base); // @presenter Color
  --toast-icon-color-error: var(--color-error-base); // @presenter Color
  --toast-icon-color-loading: var(--loading-spinner-color); // @presenter Color
  --toast-loading-animation-duration: 3s;

  /**
    * @tokens Toast typography
    */
  --toast-text-font-size: var(--font-size-base); // @presenter FontSize
  --toast-text-line-height: var(--line-height-base); // @presenter LineHeight
  --toast-text-color: var(--text-color-primary); // @presenter Color
  --toast-title-font-weight: var(--font-weight-semibold); // @presenter FontWeight
  --toast-body-font-weight: var(--font-weight-regular); // @presenter FontWeight

  /**
    * @tokens Toast close button
    */
  --toast-close-button-padding: 3px;
  --toast-close-button-icon-size: 14px;
  --toast-close-button-icon-color: var(--icon-color-secondary); // @presenter Color

  // @tokens End
`;