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

Try catching alpha color values #3684

Draft
wants to merge 7 commits into
base: main
Choose a base branch
from
Draft

Try catching alpha color values #3684

wants to merge 7 commits into from

Conversation

kjellr
Copy link
Contributor

@kjellr kjellr commented Dec 11, 2024

PR summary:

Modifies our existing color rules so they can accept alpha values.

What approach did you take?

I added alpha values to our color variables, and did an aggressive first pass at swapping out our rgb/rgba values to ensure they support these new variables. rgb definitions become rgba, and rgba rules use relative colors.

We use hardcoded transparency values intensely throughout Dawn. In order to retain those, I'm using color-mix to apply them on top of the user-provided color alpha. It's admittedly weird, but lets us retain the current appearance + functionality of Dawn.

Areas of improvement:

  • We should consolidate the hardcoded alpha values we use (the ones I'm using color-mix on). Currently we use tons of random values here — 0.075, 0.1, 0.4, 0.5, etc. I'd love to have a better strategy around this.
  • We should also standardize the way we use those alpha values. Maybe have them available as CSS variables instead of writing out the entire color-mix function every time.
  • We have a few "opacity" controls for things like border + shadow. These are redundant if colors have an alpha value already. But I've modified our existing controls to continue working for the time being.

Testing steps/scenarios

  • By default, nothing should look different at all. Compare to the main branch, and make sure the colors look the same.
  • Try supplying some theme colors with alpha values, see if they work as expected.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant