Merge pull request #9380 from IgniteUI/simeonoff/button-fixes

fix(button): themes not working correctly

Author: kdinev

projects/igniteui-angular/src/lib/core/styles/base/utilities/_mixins.scss

@@ -256,6 +256,7 @@
     $ignore: ('name', 'palette', 'variant', 'selector');
     $webc-prefix: 'igc';
     $webc: nth(str-split($name, '-'), 1) == $webc-prefix;
+    $themes: map-get($theme, 'themes');
 
     @if not($prefix) and $webc {
         $prefix: $webc-prefix;
@@ -265,6 +266,12 @@
         @error 'Theme should have a non-null or empty name property. Example: my-theme: (name: my-theme)';
     }
 
+    @if $themes and type-of($themes) == 'map' {
+        @each $theme in $themes {
+            @include igx-css-vars(nth($theme, 2));
+        }
+    }
+
     @each $key, $value in $theme {
         $elevation: str-index($key, 'elevation');
 

projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss

@@ -172,8 +172,9 @@
 
     @return (
         palette: $palette,
+        name: $name,
         variant: $variant,
-        themes: $themes
+        themes: $themes,
     );
 }
 
@@ -195,6 +196,12 @@
     $fab-theme: map-get(map-get($theme, 'themes'), 'fab');
     $icon-theme: map-get(map-get($theme, 'themes'), 'icon');
 
+    @include igx-css-vars($flat-theme);
+    @include igx-css-vars($outlined-theme);
+    @include igx-css-vars($raised-theme);
+    @include igx-css-vars($fab-theme);
+    @include igx-css-vars($icon-theme);
+
     $time: map-get((
         material: .1s,
         fluent: .1s,
@@ -293,9 +300,9 @@
     ), $variant);
 
     $button-floating-padding: (
-        comfortable: rem(8px) rem(16px),
-        cosy: rem(4px) rem(12px),
-        compact: 0 rem(8px)
+        comfortable: rem(8px) rem(14px),
+        cosy: rem(4px) rem(10px),
+        compact: 0 rem(6px)
     );
 
     $button-floating-size: (
@@ -411,8 +418,6 @@
     }
 
     %igx-button--flat {
-        @include igx-css-vars($flat-theme, '');
-
         background: --var($flat-theme, 'background');
         color: --var($flat-theme, 'foreground');
         border-radius: --var($flat-theme, 'border-radius');
@@ -431,8 +436,6 @@
     }
 
     %igx-button--outlined {
-        @include igx-css-vars($outlined-theme, '');
-
         background: --var($outlined-theme, 'background');
         color: --var($outlined-theme, 'foreground');
         border-radius: --var($outlined-theme, 'border-radius');
@@ -481,8 +484,6 @@
     }
 
     %igx-button--raised {
-        @include igx-css-vars($raised-theme, '');
-
         color: --var($raised-theme, 'foreground');
         background: --var($raised-theme, 'background');
         box-shadow: $raised-shadow;
@@ -525,8 +526,6 @@
     }
 
     %igx-button--fab {
-        @include igx-css-vars($fab-theme, '');
-
         padding: map-get($button-floating-padding, 'comfortable');
         min-width: map-get($button-floating-size, 'comfortable');
         min-height: map-get($button-floating-size, 'comfortable');
@@ -584,8 +583,6 @@
     }
 
     %igx-button--icon {
-        @include igx-css-vars($icon-theme, '');
-
         width: $button-icon-width;
         height: $button-icon-width;
         min-width: unset;

projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_button.scss

@@ -51,6 +51,8 @@ $_material-flat-button: extend(
     $_flat-elevation-button,
     $_material-shape-button,
     (
+        selector: '[igxButton="flat"]',
+
         background: transparent,
 
         foreground: (
@@ -86,6 +88,8 @@ $_material-flat-button: extend(
 $_material-outlined-button: extend(
     $_material-flat-button,
     (
+        selector: '[igxButton="outlined"]',
+
         border-color: (
             igx-color: ('grays', 300)
         ),
@@ -120,6 +124,8 @@ $_material-raised-button: extend(
     $_material-raised-elevation,
     $_material-shape-button,
     (
+        selector: '[igxButton="raised"]',
+
         background: (
             igx-color: ('secondary', 500)
         ),
@@ -158,7 +164,10 @@ $_material-raised-button: extend(
 $_material-fab-button: extend(
     $_material-raised-button,
     $_material-fab-elevation,
-    $_round-shape-button
+    $_round-shape-button,
+    (
+        selector: '[igxButton="fab"]',
+    )
 );
 
 /// @type {Map}
@@ -181,6 +190,8 @@ $_material-icon-button: extend(
     $_material-ib-elevation,
     $_round-shape-button,
     (
+        selector: '[igxButton="icon"]',
+
         background: transparent,
 
         foreground: (
@@ -363,8 +374,11 @@ $_fluent-raised-button: extend(
 /// @requires {function} extend
 $_fluent-fab-button: extend(
     $_fluent-base-button,
-    $_fluent-raised-button,
     $_round-shape-button,
+    $_fluent-raised-button,
+    (
+        selector: '[igxButton="fab"]',
+    )
 );
 
 /// @type {Map}
@@ -552,13 +566,35 @@ $_bootstrap-raised-button: extend(
 
 /// @type {Map}
 /// @requires {function} extend
+/// @prop {Map} background [igx-color: ('primary', 500)] - The background color of a raised button.
+/// @prop {Map} hover-background [igx-color: ('primary', 600)] - The hover background color of an raised button.
+/// @prop {Map} focus-background [igx-color: ('primary', 600)] - The focus background color of an raised button.
 /// @requires {Map} $_material-fab-button
 /// @requires {Map} $_bootstrap-base-button
 /// @requires {Map} $_bootstrap-raised-button
 $_bootstrap-fab-button: extend(
     $_material-fab-button,
     $_bootstrap-base-button,
-    $_bootstrap-raised-button
+    $_bootstrap-raised-button,
+    (
+        selector: '[igxButton="fab"]',
+
+        hover-foreground:  #fff,
+
+        focus-foreground: #fff,
+
+        background: (
+            igx-color: ('primary', 500)
+        ),
+
+        hover-background: (
+            igx-color: ('primary', 600)
+        ),
+
+        focus-background: (
+            igx-color: ('primary', 600)
+        ),
+    )
 );
 
 /// @type {Map}
@@ -573,8 +609,8 @@ $_bootstrap-fab-button: extend(
 /// @requires {Map} $_bootstrap-shape-button
 /// @requires {function} extend
 $_bootstrap-icon-button: extend(
-    $_material-icon-button,
     $_bootstrap-base-button,
+    $_material-icon-button,
     $_bootstrap-shape-button,
     (
         hover-background: (
@@ -755,7 +791,10 @@ $_indigo-raised-button: extend(
 $_indigo-fab-button: extend(
     $_material-fab-button,
     $_indigo-base-button,
-    $_indigo-raised-button
+    $_indigo-raised-button,
+    (
+        selector: '[igxButton="fab"]',
+    )
 );
 
 /// @type {Map}