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

[rr-it]

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 https://github.com/w3c/csswg-drafts/issues/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)
• [x] New feature (non-breaking change which adds functionality)
• [ ] Refactoring (non-breaking change)
• [x] Breaking change (fix or feature that would change existing functionality)

Checklist

• [x] I have read the contributing guidelines
• [x] 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 https://github.com/twbs/bootstrap/issues/40557

[rr-it]

@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.

[mdo]

With the use of color-mix() this would need to be pushed to v6.