feat(samples): update styling samples

src/app/data-display/chip/chip-styling/chip-styling.component.scss

@@ -2,17 +2,10 @@
 @use "igniteui-angular/theming" as *;
 
 $custom-theme: chip-theme(
-  $background: #011627,
-  $hover-background: #011627dc,
-  $focus-background: #0116276c,
+  $background: #57a5cd,
   $selected-background: #ecaa53,
-  $hover-selected-background: #ecaa53,
-  $focus-selected-background: #ecaa53,
-  $text-color: #fefefe,
-  $remove-icon-color: #f14545,
-  $remove-icon-color-focus: #da0000,
+  $remove-icon-color: #d81414,
   $border-radius: 5px,
 );
 
 @include css-vars($custom-theme);
-

src/app/data-display/circular-progressbar/circular-styling-sample/circular-styling-sample.component.scss

@@ -1,9 +1,7 @@
 @use "igniteui-angular/theming" as *;
 
 $custom-theme: progress-circular-theme(
-  $base-circle-color: lightgray,
   $fill-color-default: rgb(32, 192, 17),
 );
 
 @include css-vars($custom-theme);
-

src/app/data-display/linear-progressbar/linear-progressbar-styling-sample/linear-progressbar-styling-sample.component.scss

@@ -2,10 +2,8 @@
 @use "igniteui-angular/theming" as *;
 
 $custom-theme: progress-linear-theme(
-  $track-color: #d3d3d3,
   $fill-color-default: #ecaa53,
   $text-color: #ecaa53,
 );
 
 @include css-vars($custom-theme);
-

src/app/data-entries/buttonGroup/button-group-style/button-group-style.component.scss

@@ -2,16 +2,8 @@
 @use "igniteui-angular/theming" as *;
 
 $custom-button-group: button-group-theme(
-  $item-text-color: #fdfdfd,
-  $item-background: #2f4d6a,
-  $item-hover-text-color: #fdfdfd,
-  $item-hover-background: #1f3347,
-  $item-selected-text-color: #fdfdfd,
-  $item-selected-background: #1f3347,
-  $item-selected-hover-background: #1f3347,
-  $disabled-text-color: gray,
-  $disabled-background-color: lightgray,
+  $item-background: #57a5cd,
 );
 
 @include css-vars($custom-button-group);
- 
+

src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.scss

@@ -2,12 +2,9 @@
 @use "igniteui-angular/theming" as *;
 
 $custom-checkbox-theme: checkbox-theme(
-  $border-radius: 10px,
-  $label-color: #011627,
   $empty-color: #ecaa53,
   $fill-color: #ecaa53,
-  $tick-color: #011627,
+  $border-radius: 5px
 );
 
 @include css-vars($custom-checkbox-theme);
-

src/app/data-entries/dropdown/dropdown-styling/dropdown-styling.component.scss

@@ -2,20 +2,13 @@
 @use "igniteui-angular/theming" as *;
 
 $custom-drop-down-theme: drop-down-theme(
-  $background-color: #fdfdfd,
   $header-text-color: #345779,
   $item-text-color: #2dabe8,
+  $hover-item-text-color: #345779,
   $selected-item-background: #345779,
-  $selected-item-text-color: #fdfdfd,
-  $selected-hover-item-background: #345779,
-  $selected-hover-item-text-color: #fdfdfd,
-  $selected-focus-item-background: #345779,
-  $selected-focus-item-text-color: #fdfdfd,
   $hover-item-background: rgba(0, 0, 0, 0.12),
-  $hover-item-text-color: #345779,
 );
 
 .drop-down__scroll-container {
   @include css-vars($custom-drop-down-theme);
 }
-

src/app/data-entries/input-group/input-group-styling/input-group-styling.component.scss

@@ -3,14 +3,10 @@
 
 $custom-input-group: input-group-theme(
   $filled-text-color: #288a54,
-  $focused-text-color: #174f30,
   $idle-text-color: #288a54,
   $idle-bottom-line-color: #288a54,
-  $interim-bottom-line-color: #288a54,
-  $hover-bottom-line-color: #288a54,
   $focused-secondary-color: #174f30,
   $box-background: #eeeeee
 );
 
 @include css-vars($custom-input-group);
-

src/app/data-entries/radio/radio-styling-sample/radio-styling-sample.component.scss

@@ -2,12 +2,8 @@
 @use "igniteui-angular/theming" as *;
 
 $custom-radio-theme: radio-theme(
-  $disabled-color: lightgray,
   $empty-color:  #345779,
   $fill-color: #2dabe8,
-  $fill-color-hover: #2dabe8,
-  $fill-hover-border-color: #2dabe8
 );
 
 @include css-vars($custom-radio-theme);
-

src/app/data-entries/select/select-styling/select-styling.component.scss

@@ -7,4 +7,3 @@ $custom-select-theme: select-theme(
 );
 
 @include css-vars($custom-select-theme);
-

src/app/data-entries/switch/switch-styling/switch-styling.component.scss

@@ -3,8 +3,6 @@
 
 $custom-switch-theme: switch-theme(
   $thumb-on-color: #ecaa53,
-  $track-on-color: #f0cb9c
 );
 
 @include css-vars($custom-switch-theme);
-

src/app/interactions/dialog/dialog-styling-sample/dialog-styling-sample.component.scss

@@ -4,11 +4,10 @@
 $my-dialog-theme: dialog-theme(
   $background: #011627,
   $title-color: #ecaa53,
-  $message-color: #fefefe,
   $border-radius: .3,
 );
 
-$dark-button: button-theme(
+$dark-button: contained-button-theme(
   $background: #ecaa53,
   $foreground: #011627,
 );
@@ -19,7 +18,6 @@ $dark-button: button-theme(
 
 :host {
   ::ng-deep {
-    @include css-vars($my-dialog-theme); 
+    @include css-vars($my-dialog-theme);
   }
 }
-

src/app/interactions/query-builder/query-builder-style/query-builder-style.component.scss

@@ -8,23 +8,11 @@ $muted-yellow: #ffe482;
 $custom-query-builder: query-builder-theme(
   $schema: $dark-material-schema,
   $background: $black,
-  $subquery-header-background: #373532,
-  $subquery-border-color: #4e4d4a,
-  $header-background: $black,
-  $header-foreground: $yellow,
-  $color-expression-group-and: #4e78ea,
-  $color-expression-group-or: #b64fcb
 );
 
-$custom-button: button-theme(
+$custom-button: flat-button-theme(
   $schema: $dark-material-schema,
-  $background: $black,
   $foreground: $yellow,
-  $hover-foreground: $black,
-  $hover-background: $yellow,
-  $focus-foreground: $yellow,
-  $focus-background: $black,
-  $border-color: $yellow
 );
 
 $custom-input-group: input-group-theme(
@@ -34,13 +22,11 @@ $custom-input-group: input-group-theme(
 $custom-chip: chip-theme(
   $schema: $dark-material-schema,
   $background: $yellow,
-  $text-color: $black
 );
 
-$custom-icon-button: icon-button-theme(
+$custom-icon-button: outlined-icon-button-theme(
   $schema: $dark-material-schema,
-  $background: $yellow,
-  $foreground: $black
+  $foreground: $yellow,
 );
 
 @include css-vars($custom-query-builder);
@@ -51,10 +37,7 @@ $custom-icon-button: icon-button-theme(
     @include css-vars($custom-input-group);
     @include css-vars($custom-chip);
     @include css-vars($custom-icon-button);
-
-    .igx-filter-tree__buttons {
-      @include css-vars($custom-button);
-    }
+    @include css-vars($custom-button);
   }
 }
 
@@ -63,4 +46,3 @@ $custom-icon-button: icon-button-theme(
     height: 100%;
     overflow-y: auto;
 }
-

src/app/interactions/slider/slider-styling-sample/app-slider-styling.component.scss

@@ -3,17 +3,8 @@
 
 $custom-slider-theme: slider-theme(
   $track-color: #ff7400,
-  $track-hover-color: #ff7400,
-
-  $thumb-color: #ff7400,
-
-  $base-track-color: #ddd,
-  $base-track-hover-color: #ccc,
-
   $tick-label-color: #b246c2,
-
   $tick-color: #b246c2
 );
 
 @include css-vars($custom-slider-theme);
-

src/app/layouts/accordion/accordion-style/accordion-style.component.scss

@@ -2,10 +2,8 @@
 @use "igniteui-angular/theming" as *;
 
 $custom-panel-theme: expansion-panel-theme(
+  $header-background: #011627,
   $expanded-margin: 10px,
-  $body-color: #282885,
-  $header-focus-background: #efefef
 );
 
 @include css-vars($custom-panel-theme);
-

src/app/layouts/avatar/avatar-styling/avatar-styling.component.scss

@@ -3,13 +3,11 @@
 
 $initials-avatar-theme: avatar-theme(
   $background: #72da67,
-  $color: #000000,
   $border-radius: 16px
 );
 
 $icon-avatar-theme: avatar-theme(
   $background: #217346,
-  $color: #ffffff
 );
 
 .initials{

src/app/layouts/card/card-styling-sample/card-styling-sample.component.scss

@@ -3,10 +3,7 @@
 
 $colorful-card: card-theme(
   $background: #011627,
-  $header-text-color: #fefefe,
   $subtitle-text-color: #ecaa53,
-  $content-text-color: #fefefe
 );
 
 @include css-vars($colorful-card);
-

src/app/layouts/expansion-panel/expansion-styling/expansion-styling.component.scss

@@ -1,29 +1,14 @@
 @use "layout.scss";
 @use "igniteui-angular/theming" as *;
 
-// Add your brand colors
-$my-primary-color:#353a4b;
-$my-secondary-color: #ffd351;
-$my-surface-color: #efefef;
-
-// Create custom palette.
-$my-color-palette: palette(
-  $primary: $my-primary-color,
-  $secondary: $my-secondary-color,
-  $surface: $my-surface-color
-);
-
 // Create expansion panel theme
 $custom-panel-theme: expansion-panel-theme(
-  $header-background: color($my-color-palette, "primary", 700),
-  $header-focus-background: color($my-color-palette, "primary", 700),
-  $header-title-color: color($my-color-palette, "secondary"),
-  $header-icon-color: color($my-color-palette, "secondary"),
-  $body-background: color($my-color-palette, "primary", 700),
-  $body-color: color($my-color-palette, "secondary", 100),
+  $header-background: #353a4b,
+  $header-title-color: #ffd351,
+  $header-icon-color: #ffd351,
+  $body-background: #353a4b,
   $border-radius: .5
 );
 
-// Apply the custom themes to the compoents mixins.
+// Apply the custom themes to the components mixins.
 @include css-vars($custom-panel-theme);
-

src/app/layouts/splitter/splitter-styling-sample/splitter-styling-sample.component.scss

@@ -5,10 +5,7 @@ $splitter-theme: splitter-theme(
   $bar-color: #011627,
   $handle-color: #ecaa53,
   $expander-color: #ecaa53,
-  $border-radius: 0,
-  $focus-color: #ecaa53,
   $size: 4px
 );
 
 @include css-vars($splitter-theme);
-

src/app/layouts/stepper/stepper-styling-sample/stepper-styling-sample.component.scss

@@ -11,7 +11,6 @@ $stepper-theme: stepper-theme(
   $current-subtitle-color: #5f4691,
 
   $complete-indicator-background: #351e65,
-  $complete-indicator-outline: #351e65,
 
   $complete-title-color: red,
   $complete-subtitle-color: #5f4691,
@@ -24,4 +23,3 @@ $stepper-theme: stepper-theme(
 );
 
 @include css-vars($stepper-theme);
-

src/app/layouts/tabbar/tabbar-style/tabbar-style.component.scss

@@ -2,9 +2,8 @@
 @use "igniteui-angular/theming" as *;
 
 $dark-bottom-nav: bottom-nav-theme(
-  $background: #292826,
+  $background: #011627,
   $icon-selected-color: #F4D45C
 );
 
 @include css-vars($dark-bottom-nav);
-