Merge pull request #6029 from IgniteUI/fix-#6016

refactor(themes): component themes should accept individual schema

Author: kdinev

projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss

@@ -34,7 +34,13 @@
     $image-background: null
 ) {
     $name: 'igx-avatar';
-    $theme: apply-palette(map-get($schema, $name), $palette);
+    $theme: ();
+
+    @if map-has-key($schema, $name) {
+        $theme: apply-palette(map-get($schema, $name), $palette);
+    } @else {
+        $theme: apply-palette($schema, $palette);
+    }
 
     @if not($icon-color) and $icon-background {
         $icon-color: text-contrast($icon-background);

projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss

@@ -54,10 +54,16 @@
     $disable-border: true
 ) {
     $name: 'igx-badge';
-    $badge-schema: map-get($schema, $name);
-    $border-width: if($disable-border == true, 0, rem(1px));
-    $theme: apply-palette($badge-schema, $palette);
+    $badge-schema: ();
+
+    @if map-has-key($schema, $name) {
+        $badge-schema: map-get($schema, $name);
+    } @else {
+        $badge-schema: $schema;
+    }
 
+    $theme: apply-palette($badge-schema, $palette);
+    $border-width: if($disable-border == true, 0, rem(1px));
     $border-radius: round-borders(
         if($border-radius, $border-radius, map-get($badge-schema, 'border-radius')), 0, 11px
     );

projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-theme.scss

@@ -34,7 +34,15 @@
     $banner-illustration-color: null
 ) {
     $name: 'igx-banner';
-    $theme: apply-palette(map-get($schema, $name), $palette);
+    $banner-schema: ();
+
+    @if map-has-key($schema, $name) {
+        $banner-schema: map-get($schema, $name);
+    } @else {
+        $banner-schema: $schema;
+    }
+
+    $theme: apply-palette($banner-schema, $palette);
 
     @if not($banner-message-color) and $banner-background {
         $banner-message-color: text-contrast($banner-background);

projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss

@@ -38,7 +38,13 @@
     $shadow: null
 ) {
     $name: 'igx-bottom-nav';
-    $bottom-nav-schema: map-get($schema, $name);
+    $bottom-nav-schema: ();
+
+    @if map-has-key($schema, $name) {
+        $bottom-nav-schema: map-get($schema, $name);
+    } @else {
+        $bottom-nav-schema: $schema;
+    }
 
     $theme: apply-palette($bottom-nav-schema, $palette);
 

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

@@ -70,7 +70,14 @@
     $item-selected-hover-background: null
 ) {
     $name: 'igx-button-group';
-    $button-group-schema: map-get($schema, $name);
+    $button-group-schema: ();
+
+    @if map-has-key($schema, $name) {
+        $button-group-schema: map-get($schema, $name);
+    } @else {
+        $button-group-schema: $schema;
+    }
+
     $theme: apply-palette($button-group-schema, $palette);
 
     $border: 1px solid map-get($theme, 'item-selected-border-color');

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

@@ -158,7 +158,14 @@
     $disabled-background: null
 ) {
     $name: 'igx-button';
-    $button-schema: map-get($schema, $name);
+    $button-schema: ();
+
+    @if map-has-key($schema, $name) {
+        $button-schema: map-get($schema, $name);
+    } @else {
+        $button-schema: $schema;
+    }
+
     $theme: apply-palette($button-schema, $palette);
 
     $flat-border-radius: round-borders(
@@ -409,35 +416,35 @@
         cosy: rem(6px, 16px) rem(16px, 16px),
         compact: rem(3px, 16px) rem(16px, 16px)
     );
-    
+
     $button-padding-fluent: (
         comfortable: 0 rem(16px, 16px),
         cosy: 0 rem(16px, 16px),
         compact: 0 rem(16px, 16px)
     );
-    
+
     $button-padding: map-get((
         material: $button-padding-material,
         fluent: $button-padding-fluent
     ), map-get($theme, variant));
-    
+
     $button--size-material: (
         comfortable: rem(36px),
         cosy: rem(30px),
         compact: rem(24px)
     );
-    
+
     $button--size-fluent: (
         comfortable: rem(32px),
         cosy: rem(28px),
         compact: rem(24px)
     );
-    
+
     $button-size: map-get((
         material: $button--size-material,
         fluent: $button--size-fluent
     ), map-get($theme, variant));
-    
+
 
     $button-floating-padding: (
         comfortable: rem(15px),
@@ -564,13 +571,13 @@
             color: --var($theme, 'raised-hover-text-color');
             background: --var($theme, 'raised-hover-background');
             box-shadow: --var($theme, 'raised-hover-shadow');
-            
-            
+
+
             %igx-icon-display {
                 color: --var($theme, 'raised-hover-icon-color')
             }
         }
-        
+
         &:active {
             color: --var($theme, 'raised-focus-text-color');
             background: --var($theme, 'raised-focus-background');

projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss

@@ -112,7 +112,14 @@
     $date-disabled-background: null,
 ) {
     $name: 'igx-calendar';
-    $calendar-schema: map-get($schema, $name);
+    $calendar-schema: ();
+
+    @if map-has-key($schema, $name) {
+        $calendar-schema: map-get($schema, $name);
+    } @else {
+        $calendar-schema: $schema;
+    }
+
     $theme: apply-palette($calendar-schema, $palette);
 
     $border-radius: round-borders(

projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss

@@ -54,7 +54,14 @@
     $card-border-color: null
 ) {
     $name: 'igx-card';
-    $card-schema: map-get($schema, $name);
+    $card-schema: ();
+
+    @if map-has-key($schema, $name) {
+        $card-schema: map-get($schema, $name);
+    } @else {
+        $card-schema: $schema;
+    }
+
     $theme: apply-palette($card-schema, $palette);
 
     $border-radius: round-borders(

projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss

@@ -52,7 +52,14 @@
     $indicator-active-border-color: null,
 ){
     $name: 'igx-carousel';
-    $carousel-schema: map-get($schema, $name);
+    $carousel-schema: ();
+
+    @if map-has-key($schema, $name) {
+        $carousel-schema: map-get($schema, $name);
+    } @else {
+        $carousel-schema: $schema;
+    }
+
     $theme: apply-palette($carousel-schema, $palette);
 
     $border-radius: round-borders(

projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss

@@ -43,7 +43,14 @@
     $border-radius-ripple: null
 ) {
     $name: 'igx-checkbox';
-    $checkbox-schema: map-get($schema, $name);
+    $checkbox-schema: ();
+
+    @if map-has-key($schema, $name) {
+        $checkbox-schema: map-get($schema, $name);
+    } @else {
+        $checkbox-schema: $schema;
+    }
+
     $theme: apply-palette($checkbox-schema, $palette);
 
     $border-radius: round-borders(
@@ -54,7 +61,6 @@
         if($border-radius-ripple, $border-radius-ripple, map-get($checkbox-schema, 'border-radius-ripple')), 0, 24px
     );
 
-
     @return extend($theme, (
         name: $name,
         palette: $palette,