Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: interactive theme generator #508

Merged
merged 16 commits into from
Oct 31, 2023
Merged

docs: interactive theme generator #508

merged 16 commits into from
Oct 31, 2023

Conversation

mariohamann
Copy link
Contributor

@mariohamann mariohamann commented Oct 30, 2023

For creating accessible themes that map to Solid's color an interactive and automatic theme generator was needed.

It serves the following purposes:

  1. Automatically matches the luminescence of the Solid color scheme.
  2. Offers the option to switch to a normalized luminescence, which might fit better especially in some tones like e. g. green tones, but could lead to decreasing accessibility.
  3. Automatically generates CSS variables which can be copied to be used in themes.
  4. Makes it possible to enable and disable the theme.

I've created some docs, too: https://64469bd84c5ea1ce2dd5d016-ztwobyajkn.chromatic.com/?path=/docs/docs-general-tokens--docs

CleanShot.2023-10-30.at.17.08.28.mp4

PR notes:

  1. This is meant to be used by developer's, who might do this task several times, so I'm totally fine if not everyone finds it directly. UX of course could be improved, but after several trail and errors this was the best solution I could came up with where to place the tool.
  2. As this is just some additional tooling, I decided to explicitly not use Solid Components (especially as they would have to be implemented differently, and we have React here, etc.)
  3. I had to implement the option to normalize the colors, as this could otherwise lead to VERY dark colors when e. g. using green as primary color.

@mariohamann mariohamann merged commit fed3b6d into main Oct 31, 2023
11 checks passed
@mariohamann mariohamann deleted the feat/change-variables branch October 31, 2023 17:18
@Vahid1919 Vahid1919 restored the feat/change-variables branch November 17, 2023 10:36
@Vahid1919 Vahid1919 deleted the feat/change-variables branch November 17, 2023 10:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Development

Successfully merging this pull request may close these issues.

8 participants