From 4a8d52037b39be6ff8b8c4ddf95ba0b425b355b9 Mon Sep 17 00:00:00 2001 From: Patrick Yeo Date: Tue, 7 Nov 2017 12:04:25 -0800 Subject: [PATCH 1/2] Use `$component-active-bg`, `$component-active-color` in custom-control-indicators and pagination for checked, indeterminate, and active states --- scss/_variables.scss | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/scss/_variables.scss b/scss/_variables.scss index 99a5179a8119..0b7730e35a1d 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -446,20 +446,20 @@ $custom-control-indicator-box-shadow: inset 0 .25rem .25rem rgba($black, .1) ! $custom-control-indicator-disabled-bg: $gray-200 !default; $custom-control-description-disabled-color: $gray-600 !default; -$custom-control-indicator-checked-color: $white !default; -$custom-control-indicator-checked-bg: theme-color("primary") !default; +$custom-control-indicator-checked-color: $component-active-color !default; +$custom-control-indicator-checked-bg: $component-active-bg !default; $custom-control-indicator-checked-box-shadow: none !default; $custom-control-indicator-focus-box-shadow: 0 0 0 1px $body-bg, $input-btn-focus-box-shadow !default; -$custom-control-indicator-active-color: $white !default; -$custom-control-indicator-active-bg: lighten(theme-color("primary"), 35%) !default; +$custom-control-indicator-active-color: $component-active-color !default; +$custom-control-indicator-active-bg: lighten($component-active-bg, 35%) !default; $custom-control-indicator-active-box-shadow: none !default; $custom-checkbox-indicator-border-radius: $border-radius !default; $custom-checkbox-indicator-icon-checked: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"), "#", "%23") !default; -$custom-checkbox-indicator-indeterminate-bg: theme-color("primary") !default; +$custom-checkbox-indicator-indeterminate-bg: $component-active-bg !default; $custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default; $custom-checkbox-indicator-icon-indeterminate: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/%3E%3C/svg%3E"), "#", "%23") !default; $custom-checkbox-indicator-indeterminate-box-shadow: none !default; @@ -628,9 +628,9 @@ $pagination-hover-color: $link-hover-color !default; $pagination-hover-bg: $gray-200 !default; $pagination-hover-border-color: $gray-300 !default; -$pagination-active-color: $white !default; -$pagination-active-bg: theme-color("primary") !default; -$pagination-active-border-color: theme-color("primary") !default; +$pagination-active-color: $component-active-color !default; +$pagination-active-bg: $component-active-bg !default; +$pagination-active-border-color: $pagination-active-bg !default; $pagination-disabled-color: $gray-600 !default; $pagination-disabled-bg: $white !default; From 02845a9385b7965471338672ee1e8bf361a5ea30 Mon Sep 17 00:00:00 2001 From: Patrick Yeo Date: Tue, 7 Nov 2017 12:10:08 -0800 Subject: [PATCH 2/2] Button and Forms focus colors should be based on `$component-active-bg` --- scss/_variables.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/scss/_variables.scss b/scss/_variables.scss index 0b7730e35a1d..c7ac122dbccc 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -321,7 +321,7 @@ $input-btn-padding-x: .75rem !default; $input-btn-line-height: $line-height-base !default; $input-btn-focus-width: .2rem !default; -$input-btn-focus-color: rgba(theme-color("primary"), .25) !default; +$input-btn-focus-color: rgba($component-active-bg, .25) !default; $input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default; $input-btn-padding-y-sm: .25rem !default; @@ -399,7 +399,7 @@ $input-border-radius-lg: $border-radius-lg !default; $input-border-radius-sm: $border-radius-sm !default; $input-focus-bg: $input-bg !default; -$input-focus-border-color: lighten(theme-color("primary"), 25%) !default; +$input-focus-border-color: lighten($component-active-bg, 25%) !default; $input-focus-color: $input-color !default; $input-focus-width: $input-btn-focus-width !default; $input-focus-box-shadow: $input-btn-focus-box-shadow !default; @@ -483,7 +483,7 @@ $custom-select-border-width: $input-btn-border-width !default; $custom-select-border-color: $input-border-color !default; $custom-select-border-radius: $border-radius !default; -$custom-select-focus-border-color: lighten(theme-color("primary"), 25%) !default; +$custom-select-focus-border-color: lighten($component-active-bg, 25%) !default; $custom-select-focus-box-shadow: inset 0 1px 2px rgba($black, .075), 0 0 5px rgba($custom-select-focus-border-color, .5) !default; $custom-select-font-size-sm: 75% !default; @@ -491,7 +491,7 @@ $custom-select-height-sm: $input-height-sm !default; $custom-file-height: $input-height !default; $custom-file-width: 14rem !default; -$custom-file-focus-box-shadow: 0 0 0 .075rem $white, 0 0 0 .2rem theme-color("primary") !default; +$custom-file-focus-box-shadow: 0 0 0 .075rem $white, 0 0 0 .2rem $component-active-bg !default; $custom-file-padding-y: $input-btn-padding-y !default; $custom-file-padding-x: $input-btn-padding-x !default;