added shade label to theme color selector

[eliblurrtt]

Closes ticket #541

[netlify]

✅ Deploy Preview for glistening-gecko-6b417a ready!

Name	Link
🔨 Latest commit	98a2577
🔍 Latest deploy log	https://app.netlify.com/sites/glistening-gecko-6b417a/deploys/654a185fdc3b6f000966e04f
😎 Deploy Preview	https://deploy-preview-717--glistening-gecko-6b417a.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[Chessel]

@eliblurrtt this is great! But to complete #541 We would have to indicate on that scale which is the original color entered in the Color Palate that produced the gradiante for the, in this case, Red, Green, and Blue

[eliblurrtt]

Hello @Chessel, thank you for your feedback. Could you kindly elaborate further on your follow up task to close the task. It would be great to have the same mental image as you do.

[aaronreed708]

@eliblurrtt I was speaking with @Chessel today and she had some thoughts on what this could maybe look like. So you will probably get some images/mockups from her within the next day or two.

In the meantime, can you try to see if you can identify which color value that the user selected for each color in the color palette? For example, if I start with a new design system and a blank color palette and I add a color to the color palette with the name "red" and the value "#e80909", when I go to the Color Theme panel and click on the Primary dropdown, I will see 10 shades of "red". One of which will have the value #e80909. This is the shade in the dropdown for which @Chessel would like to see some sort of visual indicator. So this way if I am adding 4 or 5 specific color hex values to the color palette that my company uses in themes for their web pages, I don't have to guess which one of the 40 or 50 shades that will appear in the dropdown has the specific value that I specified in the color palette. The dropdown should indicate that for me.

[aaronreed708]

@Chessel to provide wireframes

[Chessel]

Hi @eliblurrtt! and @eliblurrtt working on finalizing the designs I'll post them hopefully EOD

[Chessel]

@eliblurrtt ok finali the designs are here!

@aaronreed708 , Lise and I went back and forth on the best way to add the change. We noticed that the component on the dropdown is very similar if not the same as the one on the previous step Color Palette, so we wanted to make sure that whatever changes we made would make sense on both cases. So we decided to bring the gradient number under the swatch and add a small legend 'base' under the color that was originally input by the user.

On the color palette screen we'll add a background to highlight the original color which is the base of the color gradient generated by the theme builder.