Mirrors/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-12-28 05:33:57 +00:00
Code Issues Actions 23 Packages Projects Releases Wiki Activity

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

Browse Source 
### 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.
This commit is contained in:
Ayke Halder 2024-06-15 17:50:52 +02:00
parent 02e24fb9c0
commit c806aaa323
2 changed files with 31 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
scss/_buttons.scss
View File

@ -18,6 +18,7 @@
--#{$prefix}btn-hover-border-color: transparent;
--#{$prefix}btn-box-shadow: #{$btn-box-shadow};
--#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity};
--#{$prefix}btn-disabled-fade-percentage: #{$btn-disabled-fade-percentage};
--#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5);
// scss-docs-end btn-css-vars
@ -112,13 +113,38 @@
&:disabled,
&.disabled,
fieldset:disabled & {
color: var(--#{$prefix}btn-disabled-color);
--#{$prefix}btn-parent-bg-luminance-gray: lab(from var(--#{$prefix}current-plane-bg) l 0 0);
color:
color-mix(
in srgb,
var(--#{$prefix}btn-parent-bg-luminance-gray) var(--#{$prefix}btn-disabled-fade-percentage),
var(--#{$prefix}btn-disabled-color)
);
pointer-events: none;
background-color: var(--#{$prefix}btn-disabled-bg);
background-color:
color-mix(
in srgb,
var(--#{$prefix}btn-parent-bg-luminance-gray) var(--#{$prefix}btn-disabled-fade-percentage),
var(--#{$prefix}btn-disabled-bg)
);
background-image: if($enable-gradients, none, null);
border-color: var(--#{$prefix}btn-disabled-border-color);
opacity: var(--#{$prefix}btn-disabled-opacity);
@include box-shadow(none);
border-color:
color-mix(
in srgb,
var(--#{$prefix}btn-parent-bg-luminance-gray) var(--#{$prefix}btn-disabled-fade-percentage),
var(--#{$prefix}btn-disabled-border-color)
);
&.btn-link {
border-color: var(--#{$prefix}btn-disabled-border-color);
}
> * {
color: var(--#{$prefix}btn-disabled-color);
opacity: var(--#{$prefix}btn-disabled-opacity);
}
}
}

1
scss/_variables.scss
View File

@ -838,6 +838,7 @@ $btn-box-shadow: inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($b
$btn-focus-width: $input-btn-focus-width !default;
$btn-focus-box-shadow: $input-btn-focus-box-shadow !default;
$btn-disabled-opacity: .65 !default;
$btn-disabled-fade-percentage: 35% !default;
$btn-active-box-shadow: inset 0 3px 5px rgba($black, .125) !default;
$btn-link-color: var(--#{$prefix}link-color) !default;