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

Multi-brand React design system with design tokens from Figma

/* Base Avatar */
.ds-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--br-full, 9999px);
  background-color: var(--avatar-bg-default);
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  -webkit-font-smoothing: antialiased;
  outline: none;
}

/* Sizes */
.ds-avatar--large { width: 88px; height: 88px; }
.ds-avatar--medium { width: 72px; height: 72px; }
.ds-avatar--small { width: 56px; height: 56px; }
.ds-avatar--xsmall { width: 40px; height: 40px; }

/* States */
.ds-avatar:hover:not(.ds-avatar--disabled) {
  background-color: var(--avatar-bg-hover);
}

.ds-avatar:active:not(.ds-avatar--disabled) {
  background-color: var(--avatar-bg-active);
}

.ds-avatar:focus-visible {
  box-shadow: var(--semantic-focus-indigo);
}

.ds-avatar--disabled {
  background-color: var(--avatar-bg-disabled);
  cursor: not-allowed;
  opacity: 0.6;
  box-shadow: none;
}

.ds-avatar--disabled .ds-avatar__icon,
.ds-avatar--disabled .ds-avatar__initials {
  color: var(--semantic-icon-brand-disabled);
}

.ds-avatar--disabled .ds-avatar__icon img,
.ds-avatar--disabled .ds-avatar__img {
  opacity: 0.5;
}

/* Icon content */
.ds-avatar__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--semantic-icon-brand-default);
  width: 100%;
  height: 100%;
}

.ds-avatar__icon svg {
  display: block;
  width: 50%;
  height: 50%;
}

/* Initials */
.ds-avatar__initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--semantic-icon-brand-default);
  font-family: var(--font-family, 'Satoshi', sans-serif);
  font-weight: var(--font-weight-regular, 400);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
  line-height: 1;
}

.ds-avatar--large .ds-avatar__initials {
  font: var(--heading-h2, 400 40px/110% Satoshi);
}

.ds-avatar--medium .ds-avatar__initials {
  font: var(--heading-h3, 400 28px/110% Satoshi);
}

.ds-avatar--small .ds-avatar__initials {
  font: var(--heading-h4, 400 24px/110% Satoshi);
}

.ds-avatar--xsmall .ds-avatar__initials {
  font: var(--heading-h5, 400 18px/110% Satoshi);
}

/* Image */
.ds-avatar__img {
  width: 100%;
  height: 100%;
  border-radius: var(--br-full, 9999px);
  object-fit: cover;
  display: block;
}