payload-color-swatch-field-test/dist/fields/index.css

A color swatch field for Payload 3

.add-color.btn, .remove-color.btn {
  width: 2rem;
  height: 2rem;
  margin: .25rem;
  padding: 0;
}

.color-swatch-field__input {
  max-width: 6rem;
}

.color-swatch-field__colors {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
}

.color-swatch-field__color-custom-separator {
  width: 1px;
  height: 2rem;
  margin: .5rem 1rem;
  border-left: 1px solid #aaa;
}

.chip {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1px solid transparent;
  margin: .25rem;
  box-shadow: none;
  position: relative;
  box-shadow: 0px 0px 4px rgba(0,0,0,.5);
}

.chip--selected {
  border: 1px solid white;
  box-shadow: 0px 0px 8px rgba(0,0,0,.5);
}

.chip--clickable {
  cursor: pointer;
}

.chip.no-color {
  background-color: white;
}

.chip.no-color:after {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  content: ' ';
  display: block;
  position: absolute;
  top: -1px;
  right: -1px;
  background: linear-gradient(to top left,
  rgba(0,0,0,0) 0%,
  rgba(0,0,0,0) calc(50% - 2px),
  rgba(255,0,0,1) 50%,
  rgba(0,0,0,0) calc(50% + 2px),
  rgba(0,0,0,0) 100%)
}