Merge branch 'v4-dev' of https://github.com/coreui/coreui into v4-dev

mrholek · mrholek · commit b52ac5cfb201 · 2021-03-09T00:16:30.000+01:00
# Conflicts:
#	scss/_variables.scss
diff --git a/scss/_accordion.scss b/scss/_accordion.scss
@@ -26,7 +26,7 @@
     background-color: var(--#{$variable-prefix}accordion-button-active-bg, $accordion-button-active-bg);
 
     &::after {
-      background-image: escape-svg($accordion-button-active-icon);
+      background-image: var(--#{$variable-prefix}accordion-button-active-icon, escape-svg($accordion-button-active-icon));
       transform: $accordion-icon-transform;
     }
   }
@@ -38,7 +38,7 @@
     height: $accordion-icon-width;
     margin-left: auto;
     content: "";
-    background-image: escape-svg($accordion-button-icon);
+    background-image: var(--#{$variable-prefix}accordion-button-icon, escape-svg($accordion-button-icon));
     background-repeat: no-repeat;
     background-size: $accordion-icon-width;
     @include transition($accordion-icon-transition);
diff --git a/scss/_alert.scss b/scss/_alert.scss
@@ -48,9 +48,13 @@
   $border: var(--#{$variable-prefix}alert-#{$state}-border-color, map-get($map, "border"));
   $color: var(--#{$variable-prefix}alert-#{$state}-color, map-get($map, "color"));
   $link-color: var(--#{$variable-prefix}alert-#{$state}-link-color, map-get($map, "link-color"));
-  // @if (contrast-ratio($background, $color) < $min-contrast-ratio) {
-  //   $color: mix($value, color-contrast($background), abs($alert-color-scale));
-  // }
+  // TODO: refactor
+  @if ($enable-contrast-ratio-correction and contrast-ratio(map-get($map, "background"), map-get($map, "color")) < $min-contrast-ratio) {
+    @if $enable-contrast-ratio-warnings {
+      @warn "Alert #{$state} contrast ratio #{contrast-ratio(map-get($map, "background"), map-get($map, "color"))}.";
+    }
+    $color: var(--#{$variable-prefix}alert-#{$state}-color, mix(map-get($map, "color"), color-contrast(map-get($map, "background")), abs($alert-color-scale)));
+  }
   .alert-#{$state} {
     @include alert-variant($background, $border, $color, $link-color);
   }
diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
@@ -164,14 +164,14 @@
   &:focus {
     color: var(--#{$variable-prefix}dropdown-link-hover-color, $dropdown-link-hover-color);
     text-decoration: if($link-hover-decoration == underline, none, null);
-    @include gradient-bg($dropdown-link-hover-bg); // TODO: vars
+    @include gradient-bg(var(--#{$variable-prefix}dropdown-link-hover-bg, $dropdown-link-hover-bg));
   }
 
   &.active,
   &:active {
     color: var(--#{$variable-prefix}dropdown-link-active-color, $dropdown-link-active-color);
     text-decoration: none;
-    @include gradient-bg($dropdown-link-active-bg);// TODO: vars
+    @include gradient-bg(var(--#{$variable-prefix}dropdown-link-active-bg, $dropdown-link-active-bg));
   }
 
   &.disabled,
@@ -221,12 +221,12 @@
   .dropdown-item {
     &:hover,
     &:focus {
-      @include gradient-bg($dropdown-dark-link-hover-bg); // TODO: vars
+      @include gradient-bg(var(--#{$variable-prefix}dropdown-dark-link-hover-bg, $dropdown-dark-link-hover-bg));
     }
 
     &.active,
     &:active {
-      @include gradient-bg($dropdown-dark-link-active-bg); // TODO: vars
+      @include gradient-bg(var(--#{$variable-prefix}dropdown-dark-link-active-bg, $dropdown-dark-link-active-bg));
     }
   }
 }
diff --git a/scss/_list-group.scss b/scss/_list-group.scss
@@ -155,9 +155,13 @@
   $background: var(--#{$variable-prefix}list-group-#{$state}-background, map-get($map, "background"));
   $background-hover: var(--#{$variable-prefix}list-group-#{$state}-background-hover, map-get($map, "background-hover"));
   $color: var(--#{$variable-prefix}list-group-#{$state}-color, map-get($map, "color"));
-  // @if (contrast-ratio($background, $color) < $min-contrast-ratio) {
-  //   $color: mix($value, color-contrast($background), abs($alert-color-scale));
-  // }
+  // TODO: refactor
+  @if ($enable-contrast-ratio-correction and contrast-ratio(map-get($map, "background"), map-get($map, "color")) < $min-contrast-ratio) {
+    @if $enable-contrast-ratio-warnings {
+      @warn "List group item #{$state} contrast ratio #{contrast-ratio(map-get($map, "background"), map-get($map, "color"))}.";
+    }
+    $color: var(--#{$variable-prefix}list-group-#{$state}-color, mix(map-get($map, "color"), color-contrast(map-get($map, "background")), abs($alert-color-scale)));
+  }
 
   @include list-group-item-variant($state, $background, $background-hover, $color);
 }
diff --git a/scss/_nav.scss b/scss/_nav.scss
@@ -92,7 +92,7 @@
   .nav-link.active,
   .show > .nav-link {
     color: var(--#{$variable-prefix}nav-pills-link-active-color, $nav-pills-link-active-color);
-    @include gradient-bg($nav-pills-link-active-bg); // TODO: vars
+    @include gradient-bg(var(--#{$variable-prefix}nav-pills-link-active-bg, $nav-pills-link-active-bg));
   }
 }
 
diff --git a/scss/_pagination.scss b/scss/_pagination.scss
@@ -37,7 +37,7 @@
   &.active .page-link {
     z-index: 3;
     color: var(--#{$variable-prefix}pagination-active-color, $pagination-active-color);
-    @include gradient-bg($pagination-active-bg); // TODO: vars
+    @include gradient-bg(var(--#{$variable-prefix}pagination-active-bg, $pagination-active-bg));
     border-color: var(--#{$variable-prefix}pagination-active-border-color, $pagination-active-border-color);
   }
 
diff --git a/scss/_utilities.scss b/scss/_utilities.scss
@@ -95,7 +95,7 @@ $utilities: map-merge(
       values: (
         null: $border-width solid $border-color,
         0: 0,
-      )
+      ),
     ),
     "border-top": (
       property: border-top,
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -317,21 +317,23 @@ $escaped-characters: (
 //
 // Quickly modify global styling by enabling or disabling optional features.
 
-$enable-caret:                true !default;
-$enable-rounded:              true !default;
-$enable-shadows:              false !default;
-$enable-gradients:            false !default;
-$enable-transitions:          true !default;
-$enable-reduced-motion:       true !default;
-$enable-smooth-scroll:        true !default;
-$enable-grid-classes:         true !default;
-$enable-button-pointers:      true !default;
-$enable-rfs:                  true !default;
-$enable-validation-icons:     true !default;
-$enable-negative-margins:     false !default;
-$enable-deprecation-messages: true !default;
-$enable-important-utilities:  true !default;
-$enable-elevations:  true !default;
+$enable-caret:                      true !default;
+$enable-rounded:                    true !default;
+$enable-shadows:                    false !default;
+$enable-gradients:                  false !default;
+$enable-transitions:                true !default;
+$enable-reduced-motion:             true !default;
+$enable-smooth-scroll:              true !default;
+$enable-grid-classes:               true !default;
+$enable-button-pointers:            true !default;
+$enable-rfs:                        true !default;
+$enable-validation-icons:           true !default;
+$enable-negative-margins:           false !default;
+$enable-deprecation-messages:       true !default;
+$enable-important-utilities:        true !default;
+$enable-contrast-ratio-correction:  true !default;
+$enable-contrast-ratio-warnings:    true !default;
+$enable-elevations:                 true !default;
 
 // Set mobile breakpoint
 
diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss
@@ -79,7 +79,7 @@
     margin: (-$input-padding-y) (-$input-padding-x);
     margin-inline-end: $input-padding-x;
     color: var(--#{$variable-prefix}form-file-button-color, $form-file-button-color);
-    @include gradient-bg($form-file-button-bg); // TODO: vars
+    @include gradient-bg(var(--#{$variable-prefix}form-file-button-bg, $form-file-button-bg));
     pointer-events: none;
     border-color: inherit;
     border-style: solid;
@@ -99,7 +99,7 @@
     margin: (-$input-padding-y) (-$input-padding-x);
     margin-inline-end: $input-padding-x;
     color: var(--#{$variable-prefix}form-file-button-color, $form-file-button-color);
-    @include gradient-bg($form-file-button-bg); // TODO: vars
+    @include gradient-bg(var(--#{$variable-prefix}form-file-button-bg, $form-file-button-bg));
     pointer-events: none;
     border-color: inherit;
     border-style: solid;
diff --git a/scss/forms/_form-range.scss b/scss/forms/_form-range.scss
@@ -28,15 +28,15 @@
     width: $form-range-thumb-width;
     height: $form-range-thumb-height;
     margin-top: ($form-range-track-height - $form-range-thumb-height) / 2; // Webkit specific
-    @include gradient-bg($form-range-thumb-bg); // TODO: vars
+    @include gradient-bg(var(--#{$variable-prefix}form-range-thumb-bg, $form-range-thumb-bg));
     border: $form-range-thumb-border;
     @include border-radius($form-range-thumb-border-radius);
     @include box-shadow($form-range-thumb-box-shadow);
     @include transition($form-range-thumb-transition);
     appearance: none;
 
     &:active {
-      @include gradient-bg($form-range-thumb-active-bg); // TODO: vars
+      @include gradient-bg(var(--#{$variable-prefix}form-range-thumb-active-bg, $form-range-thumb-active-bg));
     }
   }
 
@@ -54,15 +54,15 @@
   &::-moz-range-thumb {
     width: $form-range-thumb-width;
     height: $form-range-thumb-height;
-    @include gradient-bg($form-range-thumb-bg); // TODO: vars
+    @include gradient-bg(var(--#{$variable-prefix}form-range-thumb-bg, $form-range-thumb-bg));
     border: $form-range-thumb-border;
     @include border-radius($form-range-thumb-border-radius);
     @include box-shadow($form-range-thumb-box-shadow);
     @include transition($form-range-thumb-transition);
     appearance: none;
 
     &:active {
-      @include gradient-bg($form-range-thumb-active-bg); // TODO: vars
+      @include gradient-bg(var(--#{$variable-prefix}form-range-thumb-active-bg, $form-range-thumb-active-bg));
     }
   }
 

Original file line number	Diff line number	Diff line change
`@@ -164,14 +164,14 @@`
`164`	`164`	`&:focus {`
`165`	`165`	`color: var(--#{$variable-prefix}dropdown-link-hover-color, $dropdown-link-hover-color);`
`166`	`166`	`text-decoration: if($link-hover-decoration == underline, none, null);`
`167`		`- @include gradient-bg($dropdown-link-hover-bg); // TODO: vars`
	`167`	`+ @include gradient-bg(var(--#{$variable-prefix}dropdown-link-hover-bg, $dropdown-link-hover-bg));`
`168`	`168`	`}`
`169`	`169`
`170`	`170`	`&.active,`
`171`	`171`	`&:active {`
`172`	`172`	`color: var(--#{$variable-prefix}dropdown-link-active-color, $dropdown-link-active-color);`
`173`	`173`	`text-decoration: none;`
`174`		`- @include gradient-bg($dropdown-link-active-bg);// TODO: vars`
	`174`	`+ @include gradient-bg(var(--#{$variable-prefix}dropdown-link-active-bg, $dropdown-link-active-bg));`
`175`	`175`	`}`
`176`	`176`
`177`	`177`	`&.disabled,`
`@@ -221,12 +221,12 @@`
`221`	`221`	`.dropdown-item {`
`222`	`222`	`&:hover,`
`223`	`223`	`&:focus {`
`224`		`- @include gradient-bg($dropdown-dark-link-hover-bg); // TODO: vars`
	`224`	`+ @include gradient-bg(var(--#{$variable-prefix}dropdown-dark-link-hover-bg, $dropdown-dark-link-hover-bg));`
`225`	`225`	`}`
`226`	`226`
`227`	`227`	`&.active,`
`228`	`228`	`&:active {`
`229`		`- @include gradient-bg($dropdown-dark-link-active-bg); // TODO: vars`
	`229`	`+ @include gradient-bg(var(--#{$variable-prefix}dropdown-dark-link-active-bg, $dropdown-dark-link-active-bg));`
`230`	`230`	`}`
`231`	`231`	`}`
`232`	`232`	`}`
Original file line number	Diff line number	Diff line change
`@@ -92,7 +92,7 @@`
`92`	`92`	`.nav-link.active,`
`93`	`93`	`.show > .nav-link {`
`94`	`94`	`color: var(--#{$variable-prefix}nav-pills-link-active-color, $nav-pills-link-active-color);`
`95`		`- @include gradient-bg($nav-pills-link-active-bg); // TODO: vars`
	`95`	`+ @include gradient-bg(var(--#{$variable-prefix}nav-pills-link-active-bg, $nav-pills-link-active-bg));`
`96`	`96`	`}`
`97`	`97`	`}`
`98`	`98`
Original file line number	Diff line number	Diff line change
`@@ -37,7 +37,7 @@`
`37`	`37`	`&.active .page-link {`
`38`	`38`	`z-index: 3;`
`39`	`39`	`color: var(--#{$variable-prefix}pagination-active-color, $pagination-active-color);`
`40`		`- @include gradient-bg($pagination-active-bg); // TODO: vars`
	`40`	`+ @include gradient-bg(var(--#{$variable-prefix}pagination-active-bg, $pagination-active-bg));`
`41`	`41`	`border-color: var(--#{$variable-prefix}pagination-active-border-color, $pagination-active-border-color);`
`42`	`42`	`}`
`43`	`43`