@redocly/theme/src/markdoc/components/Cards/variables.ts

Shared UI components lib

import { css } from 'styled-components';

export const cards = css`
  --cards-gap: var(--spacing-sm);

  /**
   * @tokens Card default colors
   */
  --card-icon-bg-color: var(--color-warm-grey-1);
  --card-icon-border-color: var(--border-color-secondary);
  --card-text-color: var(--text-color-secondary);
  --card-title-text-color: var(--h2-text-color);
  --card-icon-color: var(--card-title-text-color);

  /**
   * @tokens Card default values
   */
  --card-border-radius: var(--border-radius-md);
  --card-border-style: solid;
  --card-link-cursor: pointer;
  --card-link-icon-width: var(--h3-font-size);
  --card-link-icon-height: var(--h3-font-size);
  --card-border-width: 1px;
  --card-icon-border-radius: var(--border-radius-md);
  --card-icon-padding: var(--spacing-xs);
  --card-icon-size: 24px;
  --card-icon-height: var(--card-icon-size);
  --card-icon-width: var(--card-icon-size);
  --card-icon-gap: var(--spacing-base);
  --card-title-margin: 0;
  --card-title-font-weight: var(--font-weight-semibold);
  --card-content-gap: 4px;
  --card-padding: 16px 20px;
  --card-body-font-size: var(--font-size-base);
  --card-body-line-height: var(--line-height-base);

  /**
   * @tokens Card variants
   */
  .card-variant-filled {
    --card-bg-color: var(--color-warm-grey-1);
    --card-bg-color-hover: var(--color-warm-grey-2);
    --card-border-color: var(--color-warm-grey-2);
    --card-border-color-hover: var(--color-warm-grey-1);
    --card-icon-bg-color: var(--color-white);
    --card-icon-border-color: var(--card-border-color);
  }

  .card-variant-outlined {
    --card-bg-color: transparent;
    --card-border-color: var(--color-warm-grey-2);
    --card-border-color-hover: var(--color-warm-grey-3);
  }

  .card-variant-elevated {
    --card-bg-color: transparent;
    --card-border-color: transparent;
    --card-border-color-hover: transparent;
    --card-box-shadow: 0px 8px 24px -4px #232A6114, 0px 6px 12px -6px #232A611F;
    --card-box-shadow-hover: 0px 14px 64px -4px #232A611F, 0px 8px 22px -6px #232A611F;
  }

  .card-variant-ghost {
    --card-bg-color: transparent;
    --card-border-width: 0;
  }

`