@buun_group/brutalist-ui/src/react/skeleton/Skeleton.module.css

A brutalist-styled component library

/* Base skeleton styles */
.skeleton {
  background-color: var(--brutal-gray-200);
  border: var(--brutal-border-width-thin) var(--brutal-border-style) var(--brutal-black);
  display: block;
  position: relative;
  overflow: hidden;
}

/* Shape variants */
.text {
  height: 1.2em;
  border-radius: 0; /* Brutalist: no rounded corners */
}

.circular {
  border-radius: 50%;
  min-width: 40px;
  min-height: 40px;
}

.rectangular {
  min-width: 200px;
  min-height: 120px;
}

/* Variant styles */
.default {
  /* Default brutalist style - sharp edges */
}

.rounded {
  /* For non-brutalist contexts */
  border-radius: 4px;
}

.rounded.circular {
  border-radius: 50%; /* Circular stays circular */
}

/* Animation variants */
.pulse {
  animation: skeletonPulse 2s ease-in-out infinite;
}

.wave {
  animation: skeletonWave 1.6s linear infinite;
  background: linear-gradient(
    90deg,
    var(--brutal-gray-200) 25%,
    var(--brutal-gray-100) 50%,
    var(--brutal-gray-200) 75%
  );
  background-size: 200% 100%;
}

.none {
  /* No animation */
}

/* Container for multiple text lines */
.textContainer {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Animation keyframes */
@keyframes skeletonPulse {
  0% {
    background-color: var(--brutal-gray-200);
  }
  50% {
    background-color: var(--brutal-gray-100);
  }
  100% {
    background-color: var(--brutal-gray-200);
  }
}

@keyframes skeletonWave {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Brutalist design enhancements */
.skeleton::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.02) 2px,
    rgba(0, 0, 0, 0.02) 4px
  );
  pointer-events: none;
}

/* Remove pattern for wave animation */
.wave::before {
  display: none;
}

/* Text skeleton specific styles */
.text.skeleton {
  line-height: var(--brutal-leading-normal);
  margin: 0;
}

/* Add some visual weight for brutalist feel */
.skeleton {
  box-shadow: inset 1px 1px 0px rgba(0, 0, 0, 0.1);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .rectangular {
    min-width: 150px;
    min-height: 100px;
  }
  
  .circular {
    min-width: 32px;
    min-height: 32px;
  }
}

/* High contrast mode adjustments */
@media (prefers-contrast: high) {
  .skeleton {
    border-width: var(--brutal-border-width);
    background-color: var(--brutal-gray-300);
  }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .pulse,
  .wave {
    animation: none;
  }
  
  .skeleton {
    background-color: var(--brutal-gray-200);
  }
}