feat: add css to color swtach buttons (forcedotcom#32)

Author: gurpreetsainisalesforce

force-app/main/default/lwc/productDetails/productDetails.scoped.css

@@ -97,6 +97,36 @@ ul:not(.browser-default) li {
     border-color: var(--dxp-g-brand-3, #333333);
 }
 
+.variant-button.color-button {
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    border: none;
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    margin: 0 8px 8px 0;
+    display: inline-block;
+    cursor: pointer;
+    transition: border-color 0.2s, box-shadow 0.2s;
+    outline: none;
+    padding: 0;
+}
+
+.variant-button.color-button.selected {
+    border: none;
+    box-shadow: 0 0 0 2px #fff, 0 0 0 3px #111;
+}
+
+.variant-button.color-button:hover:not(.selected):not(:disabled) {
+    border: none;
+    box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--dxp-g-neutral-3, #666);
+}
+
+.variant-message {
+    font-size: small;
+}
+
 .disabled {
     cursor: not-allowed;
 }