[data-swatch]::before {
  background-color: rgba(var(--text-color) / 0.08);
}

[data-swatch="red"]:before { background-color:#ff0000}[data-swatch="blue"]:before { background-color:#239cff}[data-swatch="gold"]:before { background-color:#ffdf47}[data-swatch="black"]:before { background-color:#262626}[data-swatch="carbon look"]:before { background-color:#606060}[data-swatch="orange"]:before { background-color:#ff9600}[data-swatch="space grey"]:before { background-color:#a0a0a0}[data-swatch="green"]:before { background-color:#0dc124}[data-swatch="yellow 495nm"]:before { background-color:#ffd502}[data-swatch="dark blue 435nm"]:before { background-color:#002fdc}[data-swatch="blue 470nm"]:before { background-color:#01bbe5}[data-swatch="green 500nm"]:before { background-color:#01bd60}[data-swatch="orange 570nm"]:before { background-color:#ff9d01}[data-swatch="red 610nm"]:before { background-color:#f6181a}