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

Multi-brand React design system with design tokens from Figma

/* Base Alert */
.ds-alert {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--size3, 12px);
  padding: var(--size3, 12px) var(--size4, 16px);
  border-radius: var(--br-xs, 4px);
  border: 1px solid;
  font-family: var(--font-family, 'Satoshi', sans-serif);
  width: 100%;
  box-sizing: border-box;
}

/* Content wrapper */
.ds-alert__content {
  display: flex;
  align-items: flex-start;
  gap: var(--size2, 8px);
  flex: 1;
  min-width: 0;
}

/* Icon */
.ds-alert__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.ds-alert__icon svg {
  width: 24px;
  height: 24px;
  display: block;
}

/* Text content */
.ds-alert__text {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--size2, 8px);
  flex: 1;
  min-width: 0;
}

.ds-alert__message {
  font-size: var(--body-small-fontSize, 14px);
  font-weight: var(--font-weight-regular, 400);
  line-height: var(--line-height-body, 1.5);
  word-wrap: break-word;
  flex: 1;
}

.ds-alert__link {
  font-size: var(--body-small-fontSize, 14px);
  font-weight: var(--font-weight-medium, 500);
  line-height: var(--line-height-body, 1.5);
  text-decoration: underline;
  cursor: pointer;
  transition: text-decoration 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.ds-alert__link:hover {
  text-decoration: none;
}

/* Close button */
.ds-alert__close {
  flex-shrink: 0;
  margin: -4px -4px 0 0; /* Compensate for padding */
}

.ds-alert__close svg {
  width: 20px;
  height: 20px;
}

/* Variant: Error */
.ds-alert--error {
  background-color: var(--alert-error-bg);
  border-color: var(--alert-error-border);
  color: var(--semantic-text-error);
}

.ds-alert--error .ds-alert__icon {
  color: var(--semantic-icon-error);
}

.ds-alert--error .ds-alert__link {
  color: var(--semantic-text-error);
}

.ds-alert--error .ds-alert__close svg {
  color: var(--semantic-icon-error);
}

/* Variant: Warning */
.ds-alert--warning {
  background-color: var(--alert-warning-bg);
  border-color: var(--alert-warning-border);
  color: var(--semantic-text-warning);
}

.ds-alert--warning .ds-alert__icon {
  color: var(--semantic-icon-warning);
}

.ds-alert--warning .ds-alert__link {
  color: var(--semantic-text-warning);
}

.ds-alert--warning .ds-alert__close svg {
  color: var(--semantic-icon-warning);
}

/* Variant: Info */
.ds-alert--info {
  background-color: var(--alert-info-bg);
  border-color: var(--alert-info-border);
  color: var(--semantic-text-indigo-primary);
}

.ds-alert--info .ds-alert__icon {
  color: var(--semantic-icon-brand-bold);
}

.ds-alert--info .ds-alert__link {
  color: var(--semantic-text-indigo-primary);
}

.ds-alert--info .ds-alert__close svg {
  color: var(--semantic-icon-brand-bold);
}

/* Variant: Success */
.ds-alert--success {
  background-color: var(--alert-success-bg);
  border-color: var(--alert-success-border);
  color: var(--semantic-text-success);
}

.ds-alert--success .ds-alert__icon {
  color: var(--semantic-icon-success);
}

.ds-alert--success .ds-alert__link {
  color: var(--semantic-text-success);
}

.ds-alert--success .ds-alert__close svg {
  color: var(--semantic-icon-success);
}

/* Variant: Neutral */
.ds-alert--neutral {
  background-color: var(--alert-neutral-bg);
  border-color: var(--alert-neutral-border);
  color: var(--semantic-text-white-primary);
}

.ds-alert--neutral .ds-alert__link {
  color: var(--semantic-text-white-primary);
}

.ds-alert--neutral .ds-alert__close svg {
  color: var(--semantic-icon-inverse-bold);
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .ds-alert {
    padding: var(--size2, 8px) var(--size3, 12px);
  }
  
  .ds-alert__content {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .ds-alert__text {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--size1, 4px);
    width: 100%;
  }
  
  .ds-alert__link {
    padding-left: 0;
    align-self: flex-start;
  }
}