@penaprieto/design-system/dist/components/Popover/Popover.css

Multi-brand React design system with design tokens from Figma

/* Trigger */
.ds-popover-trigger {
  display: inline-block;
}

/* Base Popover */
.ds-popover {
  z-index: 1100;
  min-width: 200px;
  max-width: 400px;
  background-color: var(--semantic-bg-surface-default);
  border: 1px solid var(--semantic-border-default-default);
  border-radius: var(--br-sm, 8px);
  box-shadow: var(--semantic-elevation-elevation2);
  -webkit-font-smoothing: antialiased;
  animation: ds-popover-fade-in 0.2s ease-out;
}

/* Content */
.ds-popover__content {
  padding: var(--size4, 16px);
  font-family: var(--body-regular-fontFamily, var(--font-family, 'Satoshi', sans-serif));
  font-size: var(--body-regular-fontSize, 16px);
  font-weight: var(--body-regular-fontWeight, 400);
  line-height: var(--body-regular-lineHeight, 150%);
  color: var(--semantic-text-corp-secondary);
}

/* Animations */
@keyframes ds-popover-fade-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}