[Request] Create Theme color selection

[Chessel]

After adding my colors, I have to go to the next step "Create Theme", there the system asks me to add my primary secondary and tertiary color. However when the user clicks on the color selection dropdown the user is presented with a gradient scale of the color that they selected but there is not indication of which exact shade is the one they entered.

• [link to problem content]()

Proposed Solution

It would be nice that when that scale is presented the system flagged the color they input on the system in the previous step.

[aaronreed708]

@Chessel For clarification, do you mean you want an indication in the color gradient which is the color that was entered in the color palette on the previous panel? Please look at the suggested fix by @eliblurrtt in https://github.com/finos/a11y-theme-builder/pull/717 to make sure that meets your need. Thanks!

[Chessel]

I added comment on #717. The solution doesn't show the original color entered on the Color Palette step therefore that problem remains I cannot say exactly what shade of the gradient I entered originally. Maybe add the word (original) or an icon or something that shows me what color was entered initially

[aaronreed708]

@eliblurrtt I was speaking with @Chessel two days ago 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.

@Chessel to provide wireframes

[Chessel]

@eliblurrtt ok finally 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.

[evangk6]

Dorothy mentioned they were interested in working in this issue, so I will assign them.

EDIT: Can't assign her some reason. Perhaps only she can.

[aaronreed708]

Trying to assign to @Turntabl-DorothyEwuah.

I also failed. Dorothy, can you assign this issue to yourself?

[evangk6]

Still can't assign Dorothy - saw that Aaron was able to do it somehow in https://github.com/finos/a11y-theme-builder/issues/686, but looks like we can't assign her anymore.

@Turntabl-DorothyEwuah - are you able to assign yourself?

[evangk6]

No update from Turntabl - possibly move back into No Status, and use as mentorship project / good first issue.

[omesh-omg]

Hello @aaronreed708, @evangk6, and @Chessel. Could you kindly assign this issue to me, please ✋

[aaronreed708]

@omesh-omg please let us know if you want to discuss this issue or to get further guidance.

[omesh-omg]

Yes 🙌 @aaronreed708 waiting to hop in my first meeting with the team today was our last exam of this sem So I was busy with exams

[omesh-omg]

Hello @aaronreed708, @evangk6, and @Chessel I have added a PR for this issue please ,review it

[Chessel]

This definitely works!!!

[omesh-omg]

The PR for this is merged the issue has been solved , therefore closing the Issue