theme: Amend utility function bgBlur to not modulate background value
#485
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Amends the Stitches utility function `bgBlur` to set the passed background-color value as-is instead of appending `66` (for alpha), which only works for hex color codes. This change enables passing other color code formats, like `hsla()` and `rgb()`, just like the rest of NextUI. The previous implementation confuses users for why their color value does not work. Second, the previous implementation of setting the passed color alpha to 66% is hidden from the user. If the user wants to pass a value with a particular alpha that is not 66%, she must think about the additional 66% modification happening to her color. For example, I would like to set the background color for this blur effect to exactly `hsla(0, 0%, 100%, 0.1)`, where I can easily tweak the alpha value. However, this color code format is incompatible with the current implementation for the reason explained above. Second, if I instead find the corresponding hex color code for this value, I can not tweak the alpha easily; and when I do, I must also account for the 66% happening in the background.
jrgarciadev
approved these changes
May 24, 2022
There was a problem hiding this comment.
Hey @DannyNemer, thanks for the explanation and for solving this 馃檶馃徎
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
馃摑 Description
Amends the Stitches utility function
bgBlurto set the passed background-color value as-is instead of appending66(for alpha), which only works for hex color codes.This change enables passing other color code formats, like
hsla()andrgb(), and color tokens just like the rest of NextUI. The previous implementation confuses users for why their color value does not work.Second, the previous implementation of setting the passed color alpha to 66% is hidden from the user. If the user wants to pass a value with a particular alpha that is not 66%, she must think about the additional 66% modification happening to her color.
For example, I would like to set the background color for this blur effect to exactly
hsla(0, 0%, 100%, 0.1), where I can easily tweak the alpha value. However, this color code format is incompatible with the current implementation for the reason explained above. Second, if I instead find the corresponding hex color code for this value, I can not tweak the alpha easily; and when I do, I must also account for the 66% happening in the background.鉀筹笍 Current behavior (updates)
bgBlurto be a hex color code with a leading#.馃殌 New behavior
馃挘 Is this a breaking change (Yes/No):
Yes. Any existing users of this utility function (which I estimate is few considering it is tricky to enable if you do not know the passed value must be a hex color code with a leading
#), must append66to the passed value to achieve the same background as before.