feat(Color component): Appearance changed on colors component

[josue2591]

Summary

This PR tries to improve a little bit the appearance of the color component.

We made a similar build in a recent project, after showing it to some emulsify team members there was an interest for including this into compound.

Documentation update (required)

How to review this pull request

• [ ] After recompiling, check the Color component
• [ ] It should look as the screenshot above

[codeb-a]

Hey @josue2591 leaving a review here. This looks great! I can confirm the colors palette is displaying. The only difference I see from the screen shot provided is that my background is showing a dark grey instead of a white background. Maybe this is a change from a different PR? (see screen shot).

Just realized you probably have it in "light mode". You can ignore the previous comment. 😆

[joetower]

@josue2591 This is a great improvement!

In addition to what Marvin mentioned, I'm wondering if we should add something like the following, if the user is using dark-mode.

.cl-colors__swatch {
  display: block;
  width: 11rem;
  height: 6rem;

  @media (prefers-color-scheme: dark) {
    border: 2px solid;
    box-shadow: 0px 4px 10px rgba(0,0,0, 0.27);
  }
}

My system, like Brandon's is using dark mode which, the way in which the swatches are rendering now, make the light mode text color #666666 swatch hard to differentiate from the background color in dark mode, which is also #666666. Here is a video demoing this addition.

https://user-images.githubusercontent.com/366413/236527747-4bc12645-511e-4f6b-8e86-9fc4c33721b0.mp4

[josue2591]

Thanks @joetower I applied your suggestion but actually for any theme mode, because the issue was also for the light colors when the system mode was light.

@callinmullaney I think this is good to go

[github-actions[bot]]

:tada: This PR is included in version 1.18.0 :tada:

The release is available on GitHub release

Your semantic-release bot :package::rocket: