fix: Customizable colors (#1273)

* button colors loop

* removed brand colors

* removed removed brand colors file

* restore bmd default colors

* fix

* fix missing brands overrides

* replaced "map-get($theme-colors, /name/)" with function "theme-color"

scss/_forms.scss

@@ -75,19 +75,19 @@ form {
 @include bmd-form-color($bmd-label-color, $bmd-label-color-focus, $input-border-color);
 
 .has-success {
-  @include bmd-form-color($brand-success, $brand-success, $brand-success);
+  @include bmd-form-color(theme-color(success), theme-color(success), theme-color(success));
 }
 
 .has-info {
-  @include bmd-form-color($brand-info, $brand-info, $brand-info);
+  @include bmd-form-color(theme-color(info), theme-color(info), theme-color(info));
 }
 
 .has-warning {
-  @include bmd-form-color($brand-warning, $brand-warning, $brand-warning);
+  @include bmd-form-color(theme-color(warning), theme-color(warning), theme-color(warning));
 }
 
 .has-danger {
-  @include bmd-form-color($brand-danger, $brand-danger, $brand-danger);
+  @include bmd-form-color(theme-color(danger), theme-color(danger), theme-color(danger));
 }
 
 // Reference http://www.google.com/design/spec/components/text-fields.html

scss/_variables.scss

@@ -19,12 +19,23 @@ $bmd-inverse-lighter: rgba($white, 0.54) !default;
 $bmd-label-color: $gray-light !default;
 $bmd-label-color-inner-focus: $gray !default; // e.g. radio label or text-muted not a control-label which is primary
 
+// Bootstrap Material Design default colors (these can be override by user)
+$theme-colors: () !default;
+$theme-colors: map-merge((
+  primary: $teal,
+  success: $green,
+  info: $light-blue,
+  warning: $deep-orange,
+  danger: $red,
+  light: $grey-100,
+  dark: $grey-800
+), $theme-colors);
+
 // Customized BS variables
 @import "variables/bootstrap/components";
 @import "variables/bootstrap/custom-forms";
 @import "variables/bootstrap/spacing";
 @import "variables/bootstrap/body";
-@import "variables/bootstrap/brand";
 @import "variables/bootstrap/buttons";
 @import "variables/bootstrap/card";
 @import "variables/bootstrap/code";
@@ -51,7 +62,7 @@ $enable-shadows: true; // enable shadows, set to false to turn off shadows
 @import "variables/drawer";
 @import "variables/snackbar";
 
-$bmd-label-color-focus: $brand-primary !default;
+$bmd-label-color-focus: theme-color(primary) !default;
 $bmd-invalid-underline: $red-a700 !default;
 $bmd-readonly-underline: $input-border-color !default;
 
@@ -100,7 +111,7 @@ $background-disabled: #eaeaea !default;
 $bmd-checkbox-size: 1.25rem !default;
 $bmd-checkbox-animation-ripple: 500ms !default;
 $bmd-checkbox-animation-check: 0.3s !default;
-$bmd-checkbox-checked-color: $brand-primary !default;
+$bmd-checkbox-checked-color: theme-color(primary) !default;
 $bmd-checkbox-label-padding: .3125rem !default; // 5px
 
 $bmd-checkbox-border-size: .125rem !default;
@@ -113,7 +124,7 @@ $bmd-switch-width: 2.125rem !default; // 34px
 $bmd-switch-height: .875rem !default; // 14px
 $bmd-switch-handle-size: 1.25rem !default; // 20px (was 18px)
 
-$bmd-switch-handle-checked-bg: $brand-primary !default;
+$bmd-switch-handle-checked-bg: theme-color(primary) !default;
 $bmd-switch-handle-unchecked-bg: #f1f1f1 !default;
 $bmd-switch-handle-disabled-bg: #bdbdbd !default;
 $bmd-switch-unchecked-bg: $gray-light !default;
@@ -134,7 +145,7 @@ $bmd-radio-ripple-offset: 1em !default;
 $bmd-radio-label-padding: .3125rem !default; // 5px
 
 $bmd-radio-color-off: $bmd-label-color-inner-focus !default; // FIXME seems inconsistent, check spec
-$bmd-radio-color-on: $brand-primary !default;
+$bmd-radio-color-on: theme-color(primary) !default;
 $bmd-radio-color-disabled: $gray-light; // light theme spec: Disabled: #000000, Opacity  26%
 $bmd-radio-color-disabled-inverse: rgba(
   $white,

scss/mixins/_buttons.scss

@@ -103,60 +103,30 @@
   @include bmd-flat-button-variant($bmd-btn-color);
 
   // flat bg with text color variations
-  &.btn-primary {
+  @each $color, $value in $theme-colors {
-    @include bmd-flat-button-variant($btn-primary-bg);
+    &.btn-#{$color} {
+      @include bmd-flat-button-variant($value);
     }
-  &.btn-secondary {
-    @include bmd-flat-button-variant($btn-secondary-color);
-  }
-  &.btn-info {
-    @include bmd-flat-button-variant($btn-info-bg);
-  }
-  &.btn-success {
-    @include bmd-flat-button-variant($btn-success-bg);
-  }
-  &.btn-warning {
-    @include bmd-flat-button-variant($btn-warning-bg);
-  }
-  &.btn-danger {
-    @include bmd-flat-button-variant($btn-danger-bg);
   }
 }
 
-@mixin bmd-outline-button-color() {
+@mixin bmd-outline-border() {
-  &.btn-outline,
-  &.btn-outline-primary,
-  &.btn-outline-secondary,
-  &.btn-outline-info,
-  &.btn-outline-success,
-  &.btn-outline-warning,
-  &.btn-outline-danger {
   border-color: currentColor;
   border-style: solid;
   border-width: 1px;
+}
+
+@mixin bmd-outline-button-color() {
+  &.btn-outline {
+    @include bmd-outline-border();
   }
 
   // flat bg with text and border color variations
-  &.btn-outline {
+  @each $color, $value in $theme-colors {
-    @include bmd-flat-button-variant($bmd-btn-color, $bmd-btn-color, $bmd-btn-color, $bmd-btn-color);
+    &.btn-outline-#{$color} {
+      @include bmd-outline-border();
+      @include bmd-flat-button-variant($value, $value, $value, $value);
     }
-  &.btn-outline-primary {
-    @include bmd-flat-button-variant($btn-primary-bg, $btn-primary-bg, $btn-primary-bg, $btn-primary-bg);
-  }
-  &.btn-outline-secondary {
-    @include bmd-flat-button-variant($btn-secondary-color, $btn-secondary-color, $btn-secondary-color, $btn-secondary-color);
-  }
-  &.btn-outline-info {
-    @include bmd-flat-button-variant($btn-info-bg, $btn-info-bg, $btn-info-bg, $btn-info-bg);
-  }
-  &.btn-outline-success {
-    @include bmd-flat-button-variant($btn-success-bg, $btn-success-bg, $btn-success-bg, $btn-success-bg);
-  }
-  &.btn-outline-warning {
-    @include bmd-flat-button-variant($btn-warning-bg, $btn-warning-bg, $btn-warning-bg, $btn-warning-bg);
-  }
-  &.btn-outline-danger {
-    @include bmd-flat-button-variant($btn-danger-bg, $btn-danger-bg, $btn-danger-bg, $btn-danger-bg);
   }
 }
 
@@ -184,22 +154,22 @@
 }
 
 @mixin bmd-raised-button-color() {
-  &.btn-primary {
+  @each $color, $value in $theme-colors {
-    @include bmd-raised-button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border-color);
+    &.btn-#{$color} {
+      @include bmd-raised-button-variant(#fff, $value, $value);
+    }
+  }
+}
+
+@mixin undo-bs-tab-focus() {
+  // clear out the tab-focus() from BS
+  &,
+  &:active,
+  &.active {
+    &:focus,
+    &.focus {
+      //@include tab-focus();
+      outline: 0;
     }
-  &.btn-secondary {
-    @include bmd-raised-button-variant($btn-secondary-color, $btn-secondary-bg, $btn-secondary-border-color);
-  }
-  &.btn-info {
-    @include bmd-raised-button-variant($btn-info-color, $btn-info-bg, $btn-info-border-color);
-  }
-  &.btn-success {
-    @include bmd-raised-button-variant($btn-success-color, $btn-success-bg, $btn-success-border-color);
-  }
-  &.btn-warning {
-    @include bmd-raised-button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border-color);
-  }
-  &.btn-danger {
-    @include bmd-raised-button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border-color);
   }
 }

scss/variables/bootstrap/_brand.scss

@@ -1,6 +0,0 @@
-// Bootstrap brand color customization
-$brand-primary: $teal !default;
-$brand-success: $green !default;
-$brand-danger: $red !default;
-$brand-warning: $deep-orange !default;
-$brand-info: $light-blue !default;

scss/variables/bootstrap/_buttons.scss

@@ -40,7 +40,7 @@ $btn-active-box-shadow:          none !default; // inset 0 3px 5px rgba(0,0,0,.1
 
 //
 $btn-primary-color:              #fff !default;
-$btn-primary-bg:                 $brand-primary !default;
+$btn-primary-bg:                 theme-color(primary) !default;
 $btn-primary-border-color:             $btn-primary-bg !default;
 //
 $btn-secondary-color:            $gray-dark !default;
@@ -48,19 +48,19 @@ $btn-secondary-bg:               $body-bg !default; // #fff
 $btn-secondary-border-color:           #ccc !default;
 //
 $btn-info-color:                 #fff !default;
-$btn-info-bg:                    $brand-info !default;
+$btn-info-bg:                    theme-color(info) !default;
 $btn-info-border-color:                $btn-info-bg !default;
 //
 $btn-success-color:              #fff !default;
-$btn-success-bg:                 $brand-success !default;
+$btn-success-bg:                 theme-color(success) !default;
 $btn-success-border-color:             $btn-success-bg !default;
 //
 $btn-warning-color:              #fff !default;
-$btn-warning-bg:                 $brand-warning !default;
+$btn-warning-bg:                 theme-color(warning) !default;
 $btn-warning-border-color:             $btn-warning-bg !default;
 //
 $btn-danger-color:               #fff !default;
-$btn-danger-bg:                  $brand-danger !default;
+$btn-danger-bg:                  theme-color(danger) !default;
 $btn-danger-border-color:              $btn-danger-bg !default;
 //
 $btn-link-disabled-color:        $gray-light !default;

scss/variables/bootstrap/_nav.scss

@@ -17,7 +17,7 @@ $bmd-nav-tabs-border-size: .214rem !default; // 3px
 
 $bmd-nav-tabs-color: $gray !default;
 $bmd-nav-tabs-active-color: $gray-dark !default;
-$bmd-nav-tabs-active-border-color: $brand-primary !default;
+$bmd-nav-tabs-active-border-color: theme-color(primary) !default;
 $bmd-nav-tabs-disabled-link-color: $nav-disabled-link-color !default;
 $bmd-nav-tabs-disabled-link-color-hover: $nav-disabled-link-hover-color !default;
 

scss/variables/bootstrap/_state.scss

@@ -2,13 +2,13 @@
 //
 // Define colors for form feedback states and, by default, alerts.
 $state-success-text: $bmd-inverse !default;
-$state-success-bg: $brand-success !default;
+$state-success-bg: theme-color(success) !default;
 
 $state-info-text: $bmd-inverse !default;
-$state-info-bg: $brand-info !default;
+$state-info-bg: theme-color(info) !default;
 
 $state-warning-text: $bmd-inverse !default;
-$state-warning-bg: $brand-warning !default;
+$state-warning-bg: theme-color(warning) !default;
 
 $state-danger-text: $bmd-inverse !default;
-$state-danger-bg: $brand-danger !default;
+$state-danger-bg: theme-color(danger) !default;