New component: Toast

[gjones]

Summary

We need a toast component to communicate short messages to the user.

Recommended props

icon: IconType (if null don't show icon)
hasDescription: boolean
hasButton: boolean
state: default | success | warning | danger

Provided tokens

  --click-toast-color-icon-default: var(--click-toast-color-title-default);
  --click-toast-color-icon-danger: var(--click-feedback-color-danger-foreground);
  --click-toast-color-icon-warning: var(--click-feedback-color-warning-foreground);
  --click-toast-color-icon-success: var(--click-feedback-color-success-foreground);
  --click-toast-color-stroke-default: var(--click-popover-color-panel-stroke-default);
  --click-toast-color-description-default: var(--click-global-color-text-muted);
  --click-toast-color-title-default: var(--click-global-color-text-default);
  --click-toast-typography-description-default: var(--typography-styles-product-text-normal-sm);
  --click-toast-typography-title-default: var(--typography-styles-product-titles-sm);
  --click-toast-space-gap: var(--spaces-2);
  --click-toast-space-x: var(--spaces-3);
  --click-toast-space-y: var(--spaces-3);
  --click-toast-space-title-gap: var(--spaces-2);
  --click-toast-icon-size-width: var(--click-image-small-size-width);
  --click-toast-icon-size-height: var(--click-image-small-size-height);
  --click-toast-shadow: var(--click-popover-shadow-default);
  --click-toast-radii-all: var(--click-popover-radii-all);