@create-figma-plugin/ui/lib/components/icon-toggle-button/icon-toggle-button.module.css

Production-grade Preact components that replicate the Figma UI design

.iconToggleButton {
  position: relative;
  width: var(--space-24);
  height: var(--space-24);
}

.disabled,
.disabled * {
  cursor: not-allowed;
}

.input {
  position: absolute;
  z-index: var(--z-index-1); /* stack above .icon */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
}

.box {
  position: relative;
  width: 100%;
  height: 100%;
  border: var(--border-width-1) solid transparent;
  border-radius: var(--border-radius-6);
  color: var(--figma-color-icon);
}

.iconToggleButton:not(.disabled) .input:focus-visible ~ .box {
  border-color: var(--figma-color-border-selected);
}
.iconToggleButton:not(.disabled) .input:hover ~ .box,
.iconToggleButton:not(.disabled) .input:active ~ .box {
  background-color: var(--figma-color-bg-hover);
}
.iconToggleButton:not(.disabled) .input:checked ~ .box {
  background-color: var(--figma-color-bg-brand-tertiary);
  color: var(--figma-color-icon-brand);
}

.disabled .input ~ .box {
  color: var(--figma-color-icon-disabled);
}
.disabled .input:checked ~ .box {
  background-color: var(--figma-color-bg-secondary);
}

.icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}