Fade disabled buttons into luminance-gray color of current plane background #40559

rr-it · 2024-06-15T16:11:58Z

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.

Before	New
Bootstrap CSS @5.3.3 https://codepen.io/rr-it/pen/LYoOKrx	Bootstrap CSS @deploy-preview-40559 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#9757

This css-var is set in

body-tag
.bg-<COLOR> classes
elements which serve as plane and set their own background-color

This css-var should also be set for custom elements that set their own background-color.

body {
  --bs-current-plane-bg: var(--bs-body-bg);
}

.bg-primary {
  --bs-current-plane-bg: var(--bs-primary);
}

.bg-secondary {
  --bs-current-plane-bg: var(--bs-secondary);
}

.bg-success {
  --bs-current-plane-bg: var(--bs-success);
}

[…]

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:

This 'disabled' button has a blueish look and thereby looks somehow activated.

Type of changes

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Refactoring (non-breaking change)
Breaking change (fix or feature that would change existing functionality)

Checklist

I have read the contributing guidelines
My code follows the code style of the project (using npm run lint)
My change introduces changes to the documentation
I have updated the documentation accordingly
I have added tests to cover my changes
All new and existing tests passed

Live previews

https://deploy-preview-40559--twbs-bootstrap.netlify.app/
New: https://codepen.io/rr-it/pen/jOoYVMm (Bootstrap CSS @deploy-preview-40559)
Before: https://codepen.io/rr-it/pen/LYoOKrx (Bootstrap CSS @5.3.3)

Related issues

Resolves #40557

…lor via `var()`-name in `.bg-<COLOR>` classes ```css body { --bs-current-plane-bg: var(--bs-body-bg); } .bg-primary { --bs-current-plane-bg: var(--bs-primary); } .bg-secondary { --bs-current-plane-bg: var(--bs-secondary); } .bg-success { --bs-current-plane-bg: var(--bs-success); } […] ```

…ground ### Before: Disabled buttons simply used `opacity` and color-cross-fading happened. E.g. a disabled red button on a blue plane became purple. ### With this change: 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. #### 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.

…r that might contain buttons

Imran-imtiaz48

Changes Made:
• Added the variable --#{$prefix}current-plane-bg to both the modal and modal-footer sections to reflect their respective background colors.
Improvements:

Commenting on Changes:
o Add comments explaining the purpose of the new --#{$prefix}current-plane-bg variable to make the code more understandable.
Consistency:
o Ensure that the SCSS code is consistently formatted and properly indented.
Reusability:
o If the --#{$prefix}current-plane-bg variable is intended for broader use, consider documenting its purpose and usage in the relevant style guide or documentation.
Fallbacks for CSS Variables:
o Include fallback values for CSS variables to ensure the styles are rendered even if the custom properties are not defined.
Improved Code:
scss
Copy code
color: var(--#{$prefix}modal-color);
pointer-events: auto;
background-color: var(--#{$prefix}modal-bg);
--#{$prefix}current-plane-bg: var(--#{$prefix}modal-bg); // Set current plane background for modal
background-clip: padding-box;
border: var(--#{$prefix}modal-border-width) solid var(--#{$prefix}modal-border-color);
@include border-radius(var(--#{$prefix}modal-border-radius));

...

justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
padding: calc(var(--#{$prefix}modal-padding) - var(--#{$prefix}modal-footer-gap) * 0.5);
background-color: var(--#{$prefix}modal-footer-bg);
--#{$prefix}current-plane-bg: var(--#{$prefix}modal-footer-bg); // Set current plane background for modal footer
border-top: var(--#{$prefix}modal-footer-border-width) solid var(--#{$prefix}modal-footer-border-color);
@include border-bottom-radius(var(--#{$prefix}modal-inner-border-radius));
Key Points:
• Explain the purpose of new variables with comments.
• Maintain consistent formatting.
• Ensure reusability by documenting new additions.
• Use fallback values for CSS variables for robustness.

rr-it · 2024-07-11T14:10:35Z

@Imran-imtiaz48 Thank you for your review.

In General

To get a full idea on this PR please have a look at the changes introduced by this PR.

E.g. npm run css-compile gives you the changes to the bootstrap.css file.

See additions to bootstrap.css (Click to open)

.btn {
  --bs-btn-disabled-opacity: 0.65;
  --bs-btn-disabled-fade-percentage: 35%;
}
.btn:disabled, .btn.disabled, fieldset:disabled .btn {
  --bs-btn-parent-bg-luminance-gray: lab(from var(--bs-current-plane-bg) l 0 0);
  color: color-mix(in srgb, var(--bs-btn-parent-bg-luminance-gray) var(--bs-btn-disabled-fade-percentage), var(--bs-btn-disabled-color));
  background-color: color-mix(in srgb, var(--bs-btn-parent-bg-luminance-gray) var(--bs-btn-disabled-fade-percentage), var(--bs-btn-disabled-bg));
  border-color: color-mix(in srgb, var(--bs-btn-parent-bg-luminance-gray) var(--bs-btn-disabled-fade-percentage), var(--bs-btn-disabled-border-color));
}
.btn:disabled.btn-link, .btn.disabled.btn-link, fieldset:disabled .btn.btn-link {
  border-color: var(--bs-btn-disabled-border-color);
}
.btn:disabled > *, .btn.disabled > *, fieldset:disabled .btn > * {
  color: var(--bs-btn-disabled-color);
  opacity: var(--bs-btn-disabled-opacity);
}

body {
  background-color: var(--bs-body-bg);
  --bs-current-plane-bg: var(--bs-body-bg);
}
.table > :not(caption) > * > * {
  background-color: var(--bs-table-bg);
  --bs-current-plane-bg: var(--bs-table-bg);
}
.toast {
  background-color: var(--bs-toast-bg);
  --bs-current-plane-bg: var(--bs-toast-bg);
}
.toast-header {
  background-color: var(--bs-toast-header-bg);
  --bs-current-plane-bg: var(--bs-toast-header-bg);
}
.modal-content {
  background-color: var(--bs-modal-bg);
  --bs-current-plane-bg: var(--bs-modal-bg);
}
.modal-footer {
  background-color: var(--bs-modal-footer-bg);
  --bs-current-plane-bg: var(--bs-modal-footer-bg);
}
.tooltip-inner {
  background-color: var(--bs-tooltip-bg);
  --bs-current-plane-bg: var(--bs-tooltip-bg);
}
.popover {
  background-color: var(--bs-popover-bg);
  --bs-current-plane-bg: var(--bs-popover-bg);
}
.popover-header {
  background-color: var(--bs-popover-header-bg);
  --bs-current-plane-bg: var(--bs-popover-header-bg);
}

.bg-primary {
  --bs-current-plane-bg: var(--bs-primary);
}
.bg-secondary {
  --bs-current-plane-bg: var(--bs-secondary);
}
.bg-success {
  --bs-current-plane-bg: var(--bs-success);
}
.bg-info {
  --bs-current-plane-bg: var(--bs-info);
}
.bg-warning {
  --bs-current-plane-bg: var(--bs-warning);
}
.bg-danger {
  --bs-current-plane-bg: var(--bs-danger);
}
.bg-light {
  --bs-current-plane-bg: var(--bs-light);
}
.bg-dark {
  --bs-current-plane-bg: var(--bs-dark);
}
.bg-black {
  --bs-current-plane-bg: var(--bs-black);
}
.bg-white {
  --bs-current-plane-bg: var(--bs-white);
}
.bg-body {
  --bs-current-plane-bg: var(--bs-body-bg);
}
.bg-body-secondary {
  --bs-current-plane-bg: var(--bs-secondary-bg);
}
.bg-body-tertiary {
  --bs-current-plane-bg: var(--bs-tertiary-bg);
}

About "1. Commenting on Changes:" and "3. Reusability:"

If the implemented approach to solve the issue is accepted, then comments can be added or the documentation can be changed.

About "2. Consistency:"

Consistency:
o Ensure that the SCSS code is consistently formatted and properly indented.

These checks give no code-style errors:

npm run css-lint
npm run css-test
npm run css-compile

So I do not see any code style issues here.

rr-it requested a review from a team as a code owner June 15, 2024 16:11

rr-it added 2 commits June 15, 2024 18:28

Set css-var --bs-current-plane-bg for elements with background-colo…

6a48cf0

…r that might contain buttons

rr-it force-pushed the feature/button-gray-fade branch from faa19cb to 6a48cf0 Compare June 15, 2024 16:28

julien-deramond added the css label Jun 16, 2024

rr-it mentioned this pull request Jun 20, 2024

Disabled buttons get colored on colorful background #40557

Open

3 tasks

Imran-imtiaz48 reviewed Jul 11, 2024

View reviewed changes

rr-it mentioned this pull request Jul 11, 2024

Disabled buttons get colored error fixed #40608

Open

10 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fade disabled buttons into luminance-gray color of current plane background #40559

Fade disabled buttons into luminance-gray color of current plane background #40559

rr-it commented Jun 15, 2024 •

edited

Loading

Imran-imtiaz48 left a comment

rr-it commented Jul 11, 2024

Fade disabled buttons into luminance-gray color of current plane background #40559

Are you sure you want to change the base?

Fade disabled buttons into luminance-gray color of current plane background #40559

Conversation

rr-it commented Jun 15, 2024 • edited Loading

Description

Lightness:

Saturation:

Hue:

Introduction of new css-var --bs-current-plane-bg

Motivation & Context

More real world example:

Type of changes

Checklist

Live previews

Related issues

Imran-imtiaz48 left a comment

Choose a reason for hiding this comment

rr-it commented Jul 11, 2024

In General

About "1. Commenting on Changes:" and "3. Reusability:"

About "2. Consistency:"

rr-it commented Jun 15, 2024 •

edited

Loading

Introduction of new css-var `--bs-current-plane-bg`