rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-30 22:52:24 +01:00
Code Issues Actions Packages Releases Activity

Add checks to fix color contrast issues (#32085)

Browse Source
This commit is contained in:
Martijn Cuppens 2020-11-08 19:49:26 +01:00 committed by GitHub
parent 4ed742e4db
commit 67847b0aab
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 19 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
scss/_alert.scss
View File

@ -43,9 +43,15 @@
// scss-docs-start alert-modifiers
// Generate contextual modifier classes for colorizing the alert.
@each $color, $value in $theme-colors {
.alert-#{$color} {
@include alert-variant(scale-color($value, $alert-bg-scale), scale-color($value, $alert-border-scale), scale-color($value, $alert-color-scale));
@each $state, $value in $theme-colors {
$background: scale-color($value, $alert-bg-scale);
$border: scale-color($value, $alert-border-scale);
$color: scale-color($value, $alert-color-scale);
@if (contrast-ratio($background, $color) < $min-contrast-ratio) {
$color: mix($value, color-contrast($background), abs($alert-color-scale));
}
.alert-#{$state} {
@include alert-variant($background, $border, $color);
}
}
// scss-docs-end alert-modifiers

10
scss/_list-group.scss
View File

@ -151,7 +151,13 @@
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.
@each $color, $value in $theme-colors {
@include list-group-item-variant($color, scale-color($value, $list-group-item-bg-scale), scale-color($value, $list-group-item-color-scale));
@each $state, $value in $theme-colors {
$background: scale-color($value, $list-group-item-bg-scale);
$color: scale-color($value, $list-group-item-color-scale);
@if (contrast-ratio($background, $color) < $min-contrast-ratio) {
$color: mix($value, color-contrast($background), abs($alert-color-scale));
}
@include list-group-item-variant($state, $background, $color);
}
// scss-docs-end list-group-modifiers

4
scss/_variables.scss
View File

@ -1182,7 +1182,7 @@ $alert-border-width: $border-width !default;
$alert-bg-scale: -80% !default;
$alert-border-scale: -70% !default;
$alert-color-scale: 50% !default;
$alert-color-scale: 40% !default;
$alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
@ -1211,7 +1211,7 @@ $list-group-border-radius: $border-radius !default;
$list-group-item-padding-y: $spacer / 2 !default;
$list-group-item-padding-x: $spacer !default;
$list-group-item-bg-scale: -80% !default;
$list-group-item-color-scale: 50% !default;
$list-group-item-color-scale: 40% !default;
$list-group-hover-bg: $gray-100 !default;
$list-group-active-color: $component-active-color !default;