Fade disabled buttons into luminance-gray color of current plane background #40559
+62
−4
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
Fade disabled buttons into luminance-gray color of current plane background.
Disabled buttons color is mixed with a gray having the identical luminance as the background-color. This results in the following color change of disabled buttons.
https://codepen.io/rr-it/pen/LYoOKrx
https://codepen.io/rr-it/pen/jOoYVMm
Lightness:
Lightened on light background and darkened on dark background.
In comparison:
Identical behaviour as before. Buttons lightness is slightly (
fade-percentage
) fading into the background.Saturation:
Slightly desaturated.
In comparison:
On black/white gray background: Identical behaviour as before.
On colorful background: Before there was an unintentional mix between bg-color and button-color saturation. Now the button is simply slightly (
fade-percentage
) desaturated.Hue:
Stays identical.
In comparison:
On black/white gray background: Identical behaviour as before.
On colorful background: Before there was an unintentional cross-fading between bg-color and button-color resulting in unfortunate dyeing of the button. Now the button keeps its color hue.
Introduction of new css-var
--bs-current-plane-bg
This introduces the css-var
--bs-current-plane-bg
to hold a reference to the bg-color of the current plane.Motivation:
inherit
is currently not usable inside CSS functions. See w3c/csswg-drafts#9757This css-var is set in
body
-tag.bg-<COLOR>
classesThis css-var should also be set for custom elements that set their own background-color.
Motivation & Context
Before disabled buttons simply used
opacity
and color-cross-fading happened.E.g. a disabled red button on a blue plane became purple.
More real world example:
Gray disabled button in a button-group on selected row with blue background:
![grafik](https://private-user-images.githubusercontent.com/29690343/340019848-0c83b23b-3c3c-45f3-8058-3800b5a458f7.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTg5MzM3NDYsIm5iZiI6MTcxODkzMzQ0NiwicGF0aCI6Ii8yOTY5MDM0My8zNDAwMTk4NDgtMGM4M2IyM2ItM2MzYy00NWYzLTgwNTgtMzgwMGI1YTQ1OGY3LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MjElMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjIxVDAxMzA0NlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPThmZjUzN2E0YzMwZmMwMTllMmJjN2ExMmNmNTE5NzVkYzY0YzUxM2VmZDU0MzkxZjQzNjY1MzMxNGFiZTdmZTQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.tnpqxnyZMxULcJSGSf3aHYyMs6gJcV4sHEF1AuBC6vk)
This 'disabled' button has a blueish look and thereby looks somehow activated.
Type of changes
Checklist
npm run lint
)Live previews
@deploy-preview-40559
)@5.3.3
)Related issues
Resolves #40557