@buun_group/brutalist-ui/src/react/theme/ThemePicker.module.css

A brutalist-styled component library

.container {
  display: flex;
  flex-direction: column;
  gap: var(--brutal-space-4);
  padding: var(--brutal-space-4);
  border: var(--brutal-border-width) var(--brutal-border-style) var(--brutal-black);
  background-color: var(--brutal-white);
  font-family: var(--brutal-font-sans);
}

.container.withShadow {
  box-shadow: var(--brutal-shadow-sm);
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--brutal-space-3);
}

.title {
  font-size: var(--brutal-text-base);
  font-weight: var(--brutal-font-bold);
  color: var(--brutal-black);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.actions {
  display: flex;
  gap: var(--brutal-space-2);
}

.actionButton {
  padding: var(--brutal-space-2) var(--brutal-space-3);
  border: var(--brutal-border-width-thin) var(--brutal-border-style) var(--brutal-black);
  background-color: var(--brutal-white);
  color: var(--brutal-black);
  font-family: var(--brutal-font-sans);
  font-size: var(--brutal-text-sm);
  font-weight: var(--brutal-font-medium);
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--brutal-transition-base);
}

.actionButton:hover {
  background-color: var(--brutal-gray-100);
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0px var(--brutal-black);
}

.actionButton:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0px var(--brutal-black);
}

.themeGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--brutal-space-3);
}

.themeCard {
  border: var(--brutal-border-width-thin) var(--brutal-border-style) var(--brutal-black);
  background-color: var(--brutal-white);
  cursor: pointer;
  transition: all var(--brutal-transition-base);
  overflow: hidden;
}

.themeCard:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0px var(--brutal-black);
}

.themeCard:active {
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0px var(--brutal-black);
}

.themeCard.active {
  border-width: var(--brutal-border-width);
  background-color: var(--brutal-accent);
  color: var(--brutal-white);
}

.themeCard.active .themeInfo {
  background-color: var(--brutal-accent);
  color: var(--brutal-white);
}

.colorPreview {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: 40px;
}

.colorSwatch {
  border: none;
  margin: 0;
  padding: 0;
}

.themeInfo {
  padding: var(--brutal-space-3);
  background-color: var(--brutal-white);
}

.themeName {
  font-size: var(--brutal-text-sm);
  font-weight: var(--brutal-font-bold);
  color: var(--brutal-black);
  margin: 0 0 var(--brutal-space-1) 0;
  text-transform: uppercase;
}

.themeDescription {
  font-size: var(--brutal-text-xs);
  color: var(--brutal-gray-700);
  margin: 0;
  line-height: var(--brutal-leading-tight);
}

.themeCard.active .themeName,
.themeCard.active .themeDescription {
  color: var(--brutal-white);
}

.currentTheme {
  display: flex;
  flex-direction: column;
  gap: var(--brutal-space-2);
}

.currentThemeTitle {
  font-size: var(--brutal-text-sm);
  font-weight: var(--brutal-font-bold);
  color: var(--brutal-black);
  margin: 0;
  text-transform: uppercase;
}

.currentThemeInfo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--brutal-space-3);
}

.currentThemeName {
  font-size: var(--brutal-text-base);
  font-weight: var(--brutal-font-medium);
  color: var(--brutal-accent);
  margin: 0;
}

.copyButton {
  padding: var(--brutal-space-2) var(--brutal-space-3);
  border: var(--brutal-border-width-thin) var(--brutal-border-style) var(--brutal-black);
  background-color: var(--brutal-accent);
  color: var(--brutal-white);
  font-family: var(--brutal-font-sans);
  font-size: var(--brutal-text-xs);
  font-weight: var(--brutal-font-bold);
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--brutal-transition-base);
}

.copyButton:hover {
  background-color: var(--brutal-accent-dark);
  transform: translate(-1px, -1px);
  box-shadow: 2px 2px 0px var(--brutal-black);
}

.copyButton:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0px var(--brutal-black);
}

.colorPalette {
  display: flex;
  gap: var(--brutal-space-1);
  flex-wrap: wrap;
}

.paletteColor {
  width: 24px;
  height: 24px;
  border: var(--brutal-border-width-thin) var(--brutal-border-style) var(--brutal-black);
  cursor: pointer;
  position: relative;
  transition: all var(--brutal-transition-base);
}

.paletteColor:hover {
  transform: scale(1.1);
  z-index: 1;
}

.paletteColor::after {
  content: attr(title);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--brutal-black);
  color: var(--brutal-white);
  padding: var(--brutal-space-1) var(--brutal-space-2);
  font-size: var(--brutal-text-xs);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--brutal-transition-base);
  z-index: 2;
}

.paletteColor:hover::after {
  opacity: 1;
}

.codeSection {
  border-top: var(--brutal-border-width-thin) var(--brutal-border-style) var(--brutal-black);
  padding-top: var(--brutal-space-4);
  margin-top: var(--brutal-space-2);
}

.codeToggle {
  background: none;
  border: none;
  color: var(--brutal-accent);
  font-family: var(--brutal-font-sans);
  font-size: var(--brutal-text-sm);
  font-weight: var(--brutal-font-bold);
  text-transform: uppercase;
  cursor: pointer;
  margin-bottom: var(--brutal-space-3);
  text-decoration: underline;
}

.codeToggle:hover {
  color: var(--brutal-accent-dark);
}

.codeBlock {
  background-color: var(--brutal-gray-100);
  border: var(--brutal-border-width-thin) var(--brutal-border-style) var(--brutal-black);
  padding: var(--brutal-space-3);
  font-family: var(--brutal-font-mono);
  font-size: var(--brutal-text-xs);
  line-height: var(--brutal-leading-relaxed);
  overflow-x: auto;
  position: relative;
}

.codeBlock pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-all;
}

.codeCopyButton {
  position: absolute;
  top: var(--brutal-space-2);
  right: var(--brutal-space-2);
  padding: var(--brutal-space-1) var(--brutal-space-2);
  border: var(--brutal-border-width-thin) var(--brutal-border-style) var(--brutal-black);
  background-color: var(--brutal-white);
  color: var(--brutal-black);
  font-family: var(--brutal-font-sans);
  font-size: var(--brutal-text-xs);
  font-weight: var(--brutal-font-bold);
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--brutal-transition-base);
}

.codeCopyButton:hover {
  background-color: var(--brutal-accent);
  color: var(--brutal-white);
}

/* Compact variant */
.compact {
  padding: var(--brutal-space-3);
}

.compact .title {
  font-size: var(--brutal-text-sm);
}

.compact .themeGrid {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--brutal-space-2);
}

.compact .colorPreview {
  height: 24px;
}

.compact .themeInfo {
  padding: var(--brutal-space-2);
}

.compact .themeName {
  font-size: var(--brutal-text-xs);
}

.compact .themeDescription {
  display: none;
}

/* Mobile responsive */
@media (max-width: 640px) {
  .themeGrid {
    grid-template-columns: 1fr;
  }
  
  .header {
    flex-direction: column;
    align-items: stretch;
  }
  
  .actions {
    justify-content: center;
  }
  
  .currentThemeInfo {
    flex-direction: column;
    align-items: stretch;
    gap: var(--brutal-space-2);
  }
}