[data-swatch="black"] { --swatch-background-color: #000000}[data-swatch="red"] { --swatch-background-color: #ff0000}[data-swatch="white "] { --swatch-background-color:#fff}[data-swatch="yellow"] { --swatch-background-color: #FFFB0A}[data-swatch="green"] { --swatch-background-color: #2CB011}[data-swatch="orange"] { --swatch-background-color: #FFC40A}[data-swatch="blue"] { --swatch-background-color: #0A20FF}[data-swatch="violet"] { --swatch-background-color: #5C18A4}[data-swatch="grey"] { --swatch-background-color: #8a8a8a}[data-swatch="brown"] { --swatch-background-color: #6A4700}[data-swatch="black w/ white stripe"] { --swatch-background-image: linear-gradient(to right, #000000, #000000 50%, #ffffff 50%, #ffffff) }[data-swatch="red w/ white stripe"] { --swatch-background-image: linear-gradient(to right, #ff0000, #ff0000 50%, #ffffff 50%, #ffffff) }[data-swatch="yellow w/ white stripe"] { --swatch-background-image: linear-gradient(to right, #FFFB0A, #FFFB0A 50%, #ffffff 50%, #ffffff) }[data-swatch="green w/ white stripe"] { --swatch-background-image: linear-gradient(to right, #2CB011, #2CB011 50%, #ffffff 50%, #ffffff) }[data-swatch="orange w/ white stripe"] { --swatch-background-image: linear-gradient(to right, #FFC40A, #FFC40A 50%, #ffffff 50%, #ffffff) }[data-swatch="blue w/ white stripe"] { --swatch-background-image: linear-gradient(to right, #0A20FF, #0A20FF 50%, #ffffff 50%, #ffffff) }[data-swatch="violet w/ white stripe"] { --swatch-background-image: linear-gradient(to right, #5C18A4, #5C18A4 50%, #ffffff 50%, #ffffff) }[data-swatch="gray w/ white stripe"] { --swatch-background-image: linear-gradient(to right, #AEB6BF, #AEB6BF 50%, #ffffff 50%, #ffffff) }[data-swatch="brown w/ white stripe"] { --swatch-background-image: linear-gradient(to right, #6A4700, #6A4700 50%, #ffffff 50%, #ffffff) }