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

Shared UI components lib

import { css } from 'styled-components';

export const feedback = css`
  /**
  * @tokens Feedback
  */
  --feedback-padding: var(--spacing-base) 0;
  --feedback-font-size: var(--font-size-base);
  --feedback-line-height: var(--line-height-base);
  --feedback-font-family: var(--font-family-base);
  --feedback-text-color: var(--text-color-primary);
  --feedback-bg-color: transparent;
  --feedback-star-color: var(--color-carrot-6);
  --feedback-width: fit-content; // @presenter Width
  --feedback-border-radius: var(--border-radius-lg);
  --feedback-report-dialog-max-width: 90%; // @presenter Width
  --feedback-report-dialog-max-height: 300px; // @presenter Height
  --feedback-report-dialog-width: 480px; // @presenter Width

  --feedback-header-text-color: var(--text-color-primary);
  --feedback-header-font-size: var(--font-size-lg);
  --feedback-header-line-height: var(--line-height-lg);

  --feedback-comment-min-width: 256px; // @presenter Width
  --feedback-comment-max-width: 480px; // @presenter Width

  @media screen and (max-width: 500px) {
    --feedback-comment-max-width: 100%;
  }
  // @tokens End
`