feat: Add Color Picker

[saaaaaally]

Added basic and advanced color picker.

[mayank99]

3 major things from my perfunctory look before I do any "review":

• use variables, not magic numbers
• read about CSS/Sass specificity and nesting
• read about focus vs focus-visible (browser support/fallback, respecting input modality, etc)

1 minor thing:

• run prettier ("Format Document" Alt+Shift+F) before pushing

[mayank99]

Expanding a bit on my points above.

[mayank99]

I think the advanced part could use some restructuring/cleanup.

Maybe @FlyersPh9 could provide some guidance on the values/visuals

[FlyersPh9]

We discussed in a call to have the basic color picker's width be responsive. If there are only 2 color swatches, the width will shrink to fit the 2 swatches. If there are above 10 swatches, we will wrap the swatches to a new line so that only 10 swatches are on a row.

For the advanced color picker, the width will always be the same no matter how many saved colors are listed.

[FlyersPh9]

We also discussed in a call setting a max-height on the color swatches. If we have a scenario where we have dozens of rows that we will only display so many rows (undecided on how many) and will apply a vertical scrollbar.

[mayank99]

This PR is looking good and pretty close to completion!

I would recommend getting started on the React implementation (by linking the repos) while you finalize this. You might actually find that some CSS changes need to be made as you're working on React.

[saaaaaally]

@mayank99 @veekeys @gretanausedaite I think all the comments should be resolved now, please take a look and let me know if there is still something that needs to be fixed

[mayank99]

Looks good 👍 (unless we need some changes for React)

For some reason, the default color picker tests keep failing (despite no visual differences), so try re-running and/or updating images just in case.