@casoon/dragonfly/ui/components/avatar.css

Modular, lightweight CSS framework and design system for modern web projects. Optimized for Astro JS, LightningCSS and Container Queries with @layer-based architecture and comprehensive accessibility.

/*
 * Avatar
 *
 * Circular user images with optional status indicators.
 */

/**
 * Component Documentation
 * 
 * Avatars visually represent users or entities, typically as profile pictures,
 * initials, or icons. They can be displayed in various sizes and shapes and
 * can include status indicators.
 * 
 * @layer: elements
 * 
 * Compatibility:
 * - Full support in modern browsers
 * - Fallbacks for older browsers without CSS variables
 * - Functional in high-contrast mode
 * 
 * Basic usage:
 * <div class="avatar">
 *   <img class="image" src="user.jpg" alt="User Name">
 * </div>
 * 
 * With status:
 * <div class="avatar">
 *   <img class="image" src="user.jpg" alt="User Name">
 *   <span class="status status--online" aria-label="Online status"></span>
 * </div>
 * 
 * With initials:
 * <div class="avatar avatar--placeholder">JD</div>
 * 
 * Sizes:
 * <div class="avatar avatar--xs">...</div>
 * <div class="avatar avatar--sm">...</div>
 * <div class="avatar avatar--md">...</div> (default)
 * <div class="avatar avatar--lg">...</div>
 * <div class="avatar avatar--xl">...</div>
 * 
 * Shapes:
 * <div class="avatar">...</div> (circular)
 * <div class="avatar avatar--rounded">...</div> (rounded corners)
 * <div class="avatar avatar--square">...</div> (square with slight rounding)
 * 
 * Colors:
 * <div class="avatar avatar--primary">...</div>
 * <div class="avatar avatar--secondary">...</div>
 * <div class="avatar avatar--success">...</div>
 * <div class="avatar avatar--warning">...</div>
 * <div class="avatar avatar--danger">...</div>
 * <div class="avatar avatar--info">...</div>
 */

@layer elements {
  /* Base Avatar */
  .avatar {
    align-items: center;
    background-color: var(--color-neutral-200, #e5e7eb);
    border-radius: var(--radius-full, 9999px);
    color: var(--color-neutral-700, #374151);
    display: inline-flex;
    font-weight: var(--font-medium, 500);
    height: 3rem;
    justify-content: center;
    overflow: hidden;
    position: relative;
    width: 3rem;
  }
  
  /* Avatar Sizes */
  .avatar--xs {
    font-size: var(--text-xs, 0.75rem);
    height: 1%.5rem;
    width: 1%.5rem;
  }
  
  .avatar--sm {
    font-size: var(--text-sm, 0.875rem);
    height: 2rem;
    width: 2rem;
  }
  
  .avatar--md {
    font-size: var(--text-base);
    height: 3rem;
    width: 3rem;
  }
  
  .avatar--lg {
    font-size: var(--text-lg);
    height: 4rem;
    width: 4rem;
  }
  
  .avatar--xl {
    font-size: var(--text-xl);
    height: 6rem;
    width: 6rem;
  }
  
  /* Avatar Shapes */
  .avatar--rounded {
    border-radius: var(--radius-lg, 0.5rem);
  }
  
  .avatar--square {
    border-radius: var(--radius-md, 0.375rem);
  }
  
  /* Avatar Image */
  & .image {
    height: 100%;
    object-fit: cover;
    width: 100%;
  }
  
  /* Status Indicator */
  & .status {
    background-color: var(--color-neutral-400, #9ca3af);
    border: 2px solid var(--color-surface-100, #f3f4f6);
    border-radius: var(--radius-full, 9999px);
    bottom: 0%;
    height: 2%5%;
    max-height: 1rem;
    max-width: 1rem;
    min-height: 0%.5rem;
    min-width: 0%.5rem;
    position: absolute;
    right: 0%;
    width: 2%5%;
  }
  
  & .status--online {
    background-color: var(--color-success-500);
  }
  
  & .status--busy {
    background-color: var(--color-error-500);
  }
  
  & .status--away {
    background-color: var(--color-warning-500);
  }
  
  & .status--offline {
    background-color: var(--color-neutral-400, #9ca3af);
  }
  
  /* Avatar Group */
  .avatar-group {
    display: inline-flex;
  }
  
  .avatar-group .avatar {
    border: 2px solid var(--color-surface-100, #f3f4f6);
    margin-left: -0.75rem;
  }
  
  .avatar-group .avatar:first-child {
    margin-left: 0%;
  }
  
  /* Avatar with Placeholder */
  .avatar--placeholder {
    background-color: var(--color-neutral-200, #e5e7eb);
    color: var(--color-neutral-700, #374151);
    font-weight: var(--font-medium, 500);
  }
  
  /* Colored Avatars */
  .avatar--primary {
    background-color: var(--color-primary-100, #dbeafe);
    color: var(--color-primary-800, #1e40af);
  }
  
  .avatar--secondary {
    background-color: var(--color-secondary-100, #f1f5f9);
    color: var(--color-secondary-800, #1e293b);
  }
  
  .avatar--success {
    background-color: var(--color-success-100, #d1fae5);
    color: var(--color-success-800, #065f46);
  }
  
  .avatar--warning {
    background-color: var(--color-warning-100, #fef3c7);
    color: var(--color-warning-800, #92400e);
  }
  
  .avatar--danger {
    background-color: var(--color-error-100, #fee2e2);
    color: var(--color-error-800, #991b1b);
  }
  
  .avatar--info {
    background-color: var(--color-info-100, #dbeafe);
    color: var(--color-info-800, #1e40af);
  }
}