use hsl values and reduce number of CSS variables

[thomasheyenbrock]

Inspired by #2635, this is a proposal for how we can prepare v2 so that adding a theme prop down the road won't be a breaking change.

The main idea is to move the color conversion (non-transparent to transparent) into CSS instead of doing it in JS. We achieve this by storing the HSL values as list in the CSS variables. To applying a color we can then just do hsl(var(--color-pink). To apply a transparent shade of a color we can do hsla(var(--color-pink), 0.15).

This reduces the number of CSS variables that users need to care about when creating their custom theme, and it should align nicely with the idea of @jonathanawesome to have a theme prop like this in future versions:

<GraphiQL theme={{ colors: { primary: "<some-color>" } }} />

[changeset-bot]

⚠️ No Changeset found

Latest commit: 36c42d6

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[codecov]

Codecov Report

Merging #2637 (36c42d6) into graphiql-v2 (d5aef50) will not change coverage.
The diff coverage is n/a.

@@             Coverage Diff              @@
##           graphiql-v2    #2637   +/-   ##
============================================
  Coverage        57.61%   57.61%           
============================================
  Files               93       93           
  Lines             5384     5384           
  Branches          1753     1753           
============================================
  Hits              3102     3102           
  Misses            2262     2262           
  Partials            20       20           

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

[jonathanawesome]

The switch to alpha values is especially apparent in dark mode...it's a drastic difference and much more accurate to the design in the Figma file.

Before/after screenshots for those that aren't interested in running the app.

Before:

After:

[jonathanawesome]

This is where we may run into extensibility issues in the future. I did some testing auto-generating dark mode values was less reliable than it was in light mode. It's a well-understood dark theme problem, and we can decide how to deal with it down the road.

[jonathanawesome]

This is much more clean, well done! Once the theme API is opened up, it may be a stretch to require implementors to provide hsl values, but we can do some conversion if we have to, and once we get there.