Add variant option color on product page in demo store

[sergejasadchij]

Improve UI/UX of product colour option selection on product page in demo-store

WHAT is this pull request doing?

This implementation allows the user to see the colour of the product variants and select the product of the desired colour

• Clicking on a coloured square will take you to the page of the selected product variant.
• The selected colour variant is highlighted with a frame
• Unavailable colour variant is crossed out with a diagonal line.

it was also added colours to the options listbox (it shows up when there are more than 7 colours)

HOW to test your changes?

• Go to a page of product that has several colour variants
• Here you will see squares with the colours of the product variants.
• Click on a coloured square to take you to the page of the selected product variant.
• Chek selected and unavailabled pvoduct variants
• Go to a page of product that has more then 7 colour variants
• Here you will see variant colors in listbox
• Check with browser dark theme

Checklist

• I've read the Contributing Guidelines
• I've considered possible cross-platform impacts (Mac, Linux, Windows)
• I've added a changeset if this PR contains user-facing or noteworthy changes
• I've added tests to cover my changes
• I've added or updated the documentation

[michenly]

cc @mynameisadamf for UX review