fix(build): styling issues preventing build

Author: simeonoff

src/app/grid/grid-row-editing-style/grid-row-editing-style.component.scss

@@ -2,17 +2,26 @@
 @use "igniteui-angular/theming" as *;
 
 $banner-theme: banner-theme(
-  $banner-background: #e3e3e3,
-  $banner-message-color: color($purple-palette, "secondary", 600)
+    $banner-background: #e3e3e3,
+    $banner-message-color: color($purple-palette, "secondary", 600),
+);
+$banner-theme: banner-theme(
+    $banner-background: #494949,
+    $banner-message-color: #ffcd0f,
+);
+
+$icon-button-theme: icon-button-theme(
+    $foreground: #ffcd0f,
+    $hover-foreground: #ffffff
 );
 
 :host {
-  ::ng-deep {
-    @include css-vars($banner-theme);
-    @include css-vars($icon-button-theme);
-  }
+    ::ng-deep {
+        @include css-vars($banner-theme);
+        @include css-vars($icon-button-theme);
+    }
 }
 
 igx-grid {
-  @include palette($purple-palette);
-}
+    @include palette($purple-palette);
+}

src/app/theming/angular/angular-sample.component.scss

@@ -183,31 +183,31 @@ igx-expansion-panel-body {
 
             .mat-mdc-slider.secondary .mdc-slider__track--inactive,
             .mat-mdc-slider.secondary .mdc-slider__thumb-knob {
-                background-color: color($custom-mat-dark-theme, 'accent');
+                background-color: color($custom-mat-dark-theme, accent, default);
             }
 
             .mat-mdc-slider.secondary .mdc-slider__track--active_fill,
             .mat-mdc-slider.secondary .mdc-slider__thumb-knob {
-                border-color: color($custom-mat-dark-theme, 'accent');
+                border-color: color($custom-mat-dark-theme, accent, default);
             }
 
             .mat-mdc-slider.secondary .mat-mdc-slider-visual-thumb .mat-ripple > * {
-                background-color: color($custom-mat-dark-theme, 'accent');
+                background-color: color($custom-mat-dark-theme, accent, default);
                 opacity: .12;
             }
 
             .mat-step-header .mat-step-icon-selected {
-                background-color: color($custom-dark-palette, 'secondary');
+                background-color: color($custom-dark-palette, secondary);
             }
 
             .mat-stepper-horizontal,
             .mat-mdc-form-field-focus-overlay,
             .mdc-text-field--filled:not(.mdc-text-field--disabled) {
-                background: color($custom-dark-palette, 'surface');
+                background: color($custom-dark-palette, surface);
             }
 
             igx-expansion-panel h5 {
-                color: color($custom-dark-palette, 'gray', 800);
+                color: color($custom-dark-palette, gray, 800);
             }
         }
     }
@@ -233,16 +233,16 @@ igx-expansion-panel-body {
 
         .mat-mdc-slider.secondary .mdc-slider__track--inactive,
         .mat-mdc-slider.secondary .mdc-slider__thumb-knob {
-            background-color: color($custom-mat-light-theme, 'accent');
+            background-color: color($custom-mat-light-theme, accent, default);
         }
 
         .mat-mdc-slider.secondary .mdc-slider__track--active_fill,
         .mat-mdc-slider.secondary .mdc-slider__thumb-knob {
-            border-color: color($custom-mat-light-theme, 'accent');
+            border-color: color($custom-mat-light-theme, accent, default);
         }
 
         .mat-mdc-slider.secondary .mat-mdc-slider-visual-thumb .mat-ripple > * {
-            background-color: color($custom-mat-light-theme, 'accent');
+            background-color: color($custom-mat-light-theme, accent, default);
             opacity: .12;
         }