diff --git a/src/app/data-display/badge/badge-styling-sample/badge-styling-sample.component.html b/src/app/data-display/badge/badge-styling-sample/badge-styling-sample.component.html
index 36c6a560c2..18cf6c5468 100644
--- a/src/app/data-display/badge/badge-styling-sample/badge-styling-sample.component.html
+++ b/src/app/data-display/badge/badge-styling-sample/badge-styling-sample.component.html
@@ -7,7 +7,7 @@
       <div class="wrapper">
         <div>
           <igx-avatar icon="person" shape="circle" size="small"></igx-avatar>
-          <igx-badge [icon]="member.icon" [type]="member.type" class="badge-style"></igx-badge>
+          <igx-badge [icon]="member.icon" shape="square" class="badge-style"></igx-badge>
         </div>
         <div class="contact-container">
           <span class="contact-name">{{ member.name }}</span>
diff --git a/src/app/data-display/badge/badge-styling-sample/badge-styling-sample.component.scss b/src/app/data-display/badge/badge-styling-sample/badge-styling-sample.component.scss
index 7b3e28eeec..4da299aca0 100644
--- a/src/app/data-display/badge/badge-styling-sample/badge-styling-sample.component.scss
+++ b/src/app/data-display/badge/badge-styling-sample/badge-styling-sample.component.scss
@@ -2,9 +2,8 @@
 @use "igniteui-angular/theming" as *;
 
 $custom-badge-theme: badge-theme(
-  $border-radius: 15px,
-  $icon-color: white,
-  $text-color: black
+  $background-color: #57a5cd,
+  $border-radius: 4px
 );
 
 @include css-vars($custom-badge-theme);
diff --git a/src/app/data-display/chip/chip-styling/chip-styling.component.scss b/src/app/data-display/chip/chip-styling/chip-styling.component.scss
index 975d79863a..02eda91f02 100644
--- a/src/app/data-display/chip/chip-styling/chip-styling.component.scss
+++ b/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);
- 
\ No newline at end of file
diff --git a/src/app/data-display/circular-progressbar/circular-styling-sample/circular-styling-sample.component.scss b/src/app/data-display/circular-progressbar/circular-styling-sample/circular-styling-sample.component.scss
index 699a7c61dc..e3a8672ad2 100644
--- a/src/app/data-display/circular-progressbar/circular-styling-sample/circular-styling-sample.component.scss
+++ b/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);
- 
\ No newline at end of file
diff --git a/src/app/data-display/linear-progressbar/linear-progressbar-styling-sample/linear-progressbar-styling-sample.component.scss b/src/app/data-display/linear-progressbar/linear-progressbar-styling-sample/linear-progressbar-styling-sample.component.scss
index fe4e1ec0bb..1ded704784 100644
--- a/src/app/data-display/linear-progressbar/linear-progressbar-styling-sample/linear-progressbar-styling-sample.component.scss
+++ b/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);
- 
\ No newline at end of file
diff --git a/src/app/data-entries/buttonGroup/button-group-style/button-group-style.component.scss b/src/app/data-entries/buttonGroup/button-group-style/button-group-style.component.scss
index 5dd331f72c..0498b2e0b1 100644
--- a/src/app/data-entries/buttonGroup/button-group-style/button-group-style.component.scss
+++ b/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);
- 
+
diff --git a/src/app/data-entries/buttons/buttons-style/buttons-style.component.scss b/src/app/data-entries/buttons/buttons-style/buttons-style.component.scss
index abd55c4266..c0b38ce1e9 100644
--- a/src/app/data-entries/buttons/buttons-style/buttons-style.component.scss
+++ b/src/app/data-entries/buttons/buttons-style/buttons-style.component.scss
@@ -22,5 +22,4 @@ $custom-fab-theme: fab-button-theme(
   @include css-vars($custom-flat-theme);
   @include css-vars($custom-outlined-theme);
   @include css-vars($custom-fab-theme);
-};
- 
\ No newline at end of file
+};
\ No newline at end of file
diff --git a/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.scss b/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.scss
index f7e5123af2..c5b8a77146 100644
--- a/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.scss
+++ b/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);
- 
\ No newline at end of file
diff --git a/src/app/data-entries/dropdown/dropdown-styling/dropdown-styling.component.scss b/src/app/data-entries/dropdown/dropdown-styling/dropdown-styling.component.scss
index 6f8ad200d9..3dcd00d6b1 100644
--- a/src/app/data-entries/dropdown/dropdown-styling/dropdown-styling.component.scss
+++ b/src/app/data-entries/dropdown/dropdown-styling/dropdown-styling.component.scss
@@ -2,20 +2,12 @@
 @use "igniteui-angular/theming" as *;
 
 $custom-drop-down-theme: drop-down-theme(
-  $background-color: #fdfdfd,
   $header-text-color: #345779,
   $item-text-color: #2dabe8,
-  $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,
+  $selected-item-background: #345779,
 );
 
 .drop-down__scroll-container {
   @include css-vars($custom-drop-down-theme);
 }
- 
\ No newline at end of file
diff --git a/src/app/data-entries/icon-button/icon-button-styling/icon-button-styling.component.scss b/src/app/data-entries/icon-button/icon-button-styling/icon-button-styling.component.scss
index 143fb9a626..e4110a6275 100644
--- a/src/app/data-entries/icon-button/icon-button-styling/icon-button-styling.component.scss
+++ b/src/app/data-entries/icon-button/icon-button-styling/icon-button-styling.component.scss
@@ -1,3 +1,5 @@
+@use "igniteui-angular/theming" as *;
+
 .wrapper {
   display: flex;
   flex-flow: row wrap;
@@ -12,6 +14,24 @@
   margin: 16px 0;
 }
 
+// $custom-flat: flat-icon-button-theme(
+//     $foreground: #011627,
+// );
+
+// $custom-contained: contained-icon-button-theme(
+//     $background: #ECAA53,
+// );
+
+// $custom-outlined: outlined-icon-button-theme(
+//     $foreground: #011627,
+// );
+
+// :host {
+//   @include css-vars($custom-flat);
+//   @include css-vars($custom-contained);
+//   @include css-vars($custom-outlined);
+// }
+
 [igxIconButton="flat"] {
   --foreground: #011627;
   --background: #FEFEFE;
diff --git a/src/app/data-entries/input-group/input-group-styling/input-group-styling.component.html b/src/app/data-entries/input-group/input-group-styling/input-group-styling.component.html
index 4d7b27fa48..85d8543382 100644
--- a/src/app/data-entries/input-group/input-group-styling/input-group-styling.component.html
+++ b/src/app/data-entries/input-group/input-group-styling/input-group-styling.component.html
@@ -8,4 +8,14 @@
         </igx-suffix>
         <igx-hint position="start">Ex.: +359 888 123 456</igx-hint>
     </igx-input-group>
+
+    <igx-input-group type="border">
+        <igx-prefix>+359</igx-prefix>
+        <label igxLabel for="phone">Phone</label>
+        <input type="tel" igxInput name="phone" />
+        <igx-suffix>
+            <igx-icon>phone</igx-icon>
+        </igx-suffix>
+        <igx-hint position="start">Ex.: +359 888 123 456</igx-hint>
+    </igx-input-group>
 </article>
diff --git a/src/app/data-entries/input-group/input-group-styling/input-group-styling.component.scss b/src/app/data-entries/input-group/input-group-styling/input-group-styling.component.scss
index 8dfd0c8007..cf5356ec80 100644
--- a/src/app/data-entries/input-group/input-group-styling/input-group-styling.component.scss
+++ b/src/app/data-entries/input-group/input-group-styling/input-group-styling.component.scss
@@ -1,15 +1,19 @@
 @use "layout.scss";
 @use "igniteui-angular/theming" as *;
 
+.sample-column {
+    gap: 1rem;
+}
+
 $custom-input-group: input-group-theme(
+  $border-color: #57a5cd,
   $filled-text-color: #288a54,
   $focused-text-color: #174f30,
   $idle-text-color: #288a54,
   $idle-bottom-line-color: #288a54,
   $hover-bottom-line-color: #288a54,
   $focused-secondary-color: #174f30,
-  $box-background: #eeeeee
+  $box-background: #57a5cd
 );
 
 @include css-vars($custom-input-group);
- 
\ No newline at end of file
diff --git a/src/app/data-entries/radio/radio-styling-sample/radio-styling-sample.component.scss b/src/app/data-entries/radio/radio-styling-sample/radio-styling-sample.component.scss
index e036fb1265..c2c3383809 100644
--- a/src/app/data-entries/radio/radio-styling-sample/radio-styling-sample.component.scss
+++ b/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);
- 
\ No newline at end of file
diff --git a/src/app/data-entries/select/select-styling/select-styling.component.scss b/src/app/data-entries/select/select-styling/select-styling.component.scss
index b9a35cb1ba..cfe9bae1ba 100644
--- a/src/app/data-entries/select/select-styling/select-styling.component.scss
+++ b/src/app/data-entries/select/select-styling/select-styling.component.scss
@@ -2,9 +2,7 @@
 @use "igniteui-angular/theming" as *;
 
 $custom-select-theme: select-theme(
-  $toggle-button-background: #2b2b2b,
-  $toggle-button-background-focus: #808080,
+  $toggle-button-background: #57a5cd,
 );
 
 @include css-vars($custom-select-theme);
- 
\ No newline at end of file
diff --git a/src/app/data-entries/switch/switch-styling/switch-styling.component.scss b/src/app/data-entries/switch/switch-styling/switch-styling.component.scss
index 2e54c8e4cc..e85a3e4c51 100644
--- a/src/app/data-entries/switch/switch-styling/switch-styling.component.scss
+++ b/src/app/data-entries/switch/switch-styling/switch-styling.component.scss
@@ -2,9 +2,8 @@
 @use "igniteui-angular/theming" as *;
 
 $custom-switch-theme: switch-theme(
+  $thumb-off-color: #7cadd5,
   $thumb-on-color: #ecaa53,
-  $track-on-color: #f0cb9c
 );
 
 @include css-vars($custom-switch-theme);
- 
\ No newline at end of file
diff --git a/src/app/interactions/dialog/dialog-styling-sample/dialog-styling-sample.component.scss b/src/app/interactions/dialog/dialog-styling-sample/dialog-styling-sample.component.scss
index e7978787f1..fbc831d6fe 100644
--- a/src/app/interactions/dialog/dialog-styling-sample/dialog-styling-sample.component.scss
+++ b/src/app/interactions/dialog/dialog-styling-sample/dialog-styling-sample.component.scss
@@ -4,22 +4,20 @@
 $my-dialog-theme: dialog-theme(
   $background: #011627,
   $title-color: #ecaa53,
-  $message-color: #fefefe,
-  $border-radius: .3,
+  $border-radius: 5px,
 );
 
-$dark-button: button-theme(
+$custom-button: contained-button-theme(
   $background: #ecaa53,
   $foreground: #011627,
 );
 
 .dialog-container {
-  @include css-vars($dark-button);
+  @include css-vars($custom-button);
 }
 
 :host {
   ::ng-deep {
-    @include css-vars($my-dialog-theme); 
+    @include css-vars($my-dialog-theme);
   }
 }
- 
\ No newline at end of file
diff --git a/src/app/interactions/query-builder/query-builder-style/query-builder-style.component.scss b/src/app/interactions/query-builder/query-builder-style/query-builder-style.component.scss
index 256ee12da3..620b939624 100644
--- a/src/app/interactions/query-builder/query-builder-style/query-builder-style.component.scss
+++ b/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;
 }
- 
\ No newline at end of file
diff --git a/src/app/interactions/slider/slider-styling-sample/app-slider-styling.component.scss b/src/app/interactions/slider/slider-styling-sample/app-slider-styling.component.scss
index dc0e11d904..a0196efc1c 100644
--- a/src/app/interactions/slider/slider-styling-sample/app-slider-styling.component.scss
+++ b/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);
- 
\ No newline at end of file
diff --git a/src/app/layouts/accordion/accordion-style/accordion-style.component.scss b/src/app/layouts/accordion/accordion-style/accordion-style.component.scss
index 78609314d7..77159e6010 100644
--- a/src/app/layouts/accordion/accordion-style/accordion-style.component.scss
+++ b/src/app/layouts/accordion/accordion-style/accordion-style.component.scss
@@ -2,10 +2,9 @@
 @use "igniteui-angular/theming" as *;
 
 $custom-panel-theme: expansion-panel-theme(
-  $expanded-margin: 10px,
-  $body-color: #282885,
-  $header-focus-background: #efefef
+  $header-background: #011627,
+  $body-background: #f0ece7,
+  $expanded-margin: 10px
 );
 
 @include css-vars($custom-panel-theme);
- 
\ No newline at end of file
diff --git a/src/app/layouts/avatar/avatar-styling/avatar-styling.component.html b/src/app/layouts/avatar/avatar-styling/avatar-styling.component.html
index 10ca42995e..3f167defa8 100644
--- a/src/app/layouts/avatar/avatar-styling/avatar-styling.component.html
+++ b/src/app/layouts/avatar/avatar-styling/avatar-styling.component.html
@@ -1,6 +1,6 @@
 <article class="avatars-wrapper">
   <div class="avatar-sample initials">
-    <igx-avatar initials="JS" size="medium"></igx-avatar>
+    <igx-avatar initials="JS" shape="rounded" size="medium"></igx-avatar>
   </div>
   <div class="avatar-sample icon">
     <igx-avatar icon="person" shape="circle" size="medium"></igx-avatar>
diff --git a/src/app/layouts/avatar/avatar-styling/avatar-styling.component.scss b/src/app/layouts/avatar/avatar-styling/avatar-styling.component.scss
index de0aa9bc7a..0479f13a1d 100644
--- a/src/app/layouts/avatar/avatar-styling/avatar-styling.component.scss
+++ b/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{
diff --git a/src/app/layouts/card/card-styling-sample/card-styling-sample.component.scss b/src/app/layouts/card/card-styling-sample/card-styling-sample.component.scss
index f71ac841b4..ceb14c46ba 100644
--- a/src/app/layouts/card/card-styling-sample/card-styling-sample.component.scss
+++ b/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);
- 
\ No newline at end of file
diff --git a/src/app/layouts/expansion-panel/expansion-styling/expansion-styling.component.scss b/src/app/layouts/expansion-panel/expansion-styling/expansion-styling.component.scss
index f63225154f..3981a2da76 100644
--- a/src/app/layouts/expansion-panel/expansion-styling/expansion-styling.component.scss
+++ b/src/app/layouts/expansion-panel/expansion-styling/expansion-styling.component.scss
@@ -1,29 +1,13 @@
 @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),
-  $border-radius: .5
+  $header-background: #353a4b,
+  $body-background: #353a4b,
+  $header-title-color: #ffd351,
+  $header-icon-color: #ffd351,
 );
 
-// Apply the custom themes to the compoents mixins.
+// Apply the custom themes to the components mixins.
 @include css-vars($custom-panel-theme);
- 
\ No newline at end of file
diff --git a/src/app/layouts/splitter/splitter-styling-sample/splitter-styling-sample.component.scss b/src/app/layouts/splitter/splitter-styling-sample/splitter-styling-sample.component.scss
index 89d73459e7..759451add1 100644
--- a/src/app/layouts/splitter/splitter-styling-sample/splitter-styling-sample.component.scss
+++ b/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);
- 
\ No newline at end of file
diff --git a/src/app/layouts/stepper/stepper-styling-sample/stepper-styling-sample.component.scss b/src/app/layouts/stepper/stepper-styling-sample/stepper-styling-sample.component.scss
index 1c29128b8b..3f98a27f79 100644
--- a/src/app/layouts/stepper/stepper-styling-sample/stepper-styling-sample.component.scss
+++ b/src/app/layouts/stepper/stepper-styling-sample/stepper-styling-sample.component.scss
@@ -2,26 +2,11 @@
 @use "igniteui-angular/theming" as *;
 
 $stepper-theme: stepper-theme(
-  $indicator-background: #fff,
-
+  $step-background: #351e65,
   $current-indicator-background: #f6cd28,
-  $current-indicator-outline: #351e65,
-
-  $current-title-color: #351e65,
-  $current-subtitle-color: #5f4691,
-
-  $complete-indicator-background: #351e65,
-  $complete-indicator-outline: #351e65,
-
-  $complete-title-color: red,
-  $complete-subtitle-color: #5f4691,
 
   $border-radius-step-header: 16px,
   $border-radius-indicator: 10px 4px 10px 4px,
-
-  $step-separator-color: #f6cd28,
-  $complete-step-separator-color: #351e65,
 );
 
 @include css-vars($stepper-theme);
- 
\ No newline at end of file
diff --git a/src/app/layouts/tabbar/tabbar-style/tabbar-style.component.scss b/src/app/layouts/tabbar/tabbar-style/tabbar-style.component.scss
index 605ef641aa..63360d9f6b 100644
--- a/src/app/layouts/tabbar/tabbar-style/tabbar-style.component.scss
+++ b/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);
- 
\ No newline at end of file
diff --git a/src/app/layouts/tabs/tabs-style/tabs-style.component.scss b/src/app/layouts/tabs/tabs-style/tabs-style.component.scss
index 4c553aae1f..89d254d01f 100644
--- a/src/app/layouts/tabs/tabs-style/tabs-style.component.scss
+++ b/src/app/layouts/tabs/tabs-style/tabs-style.component.scss
@@ -1,26 +1,9 @@
 @use "layout.scss";
 @use "igniteui-angular/theming" as *;
 
-$black-color: #292826;
-$yellow-color: #F4D45C;
-$light-color: #efefef;
-
-$dark-palette: palette(
-  $primary: $black-color,
-  $secondary: $yellow-color,
-  $surface: $light-color,
-  $gray: #fff
-);
-
 $dark-tabs: tabs-theme(
-  $item-text-color: color($dark-palette, "secondary", 400),
-  $item-background: color($dark-palette, "primary", 400),
-  $item-hover-background: color($dark-palette, "secondary", 400),
-  $item-hover-color: color($dark-palette, "primary", 400),
-  $item-active-color: color($dark-palette, "secondary", 400),
-  $item-active-icon-color: color($dark-palette, "secondary", 400),
-  $indicator-color: color($dark-palette, "secondary", 400),
-  $tab-ripple-color: color($dark-palette, "secondary", 400)
+  $item-background: #292826,
+  $item-active-color: #F4D45C,
 );
 
 @include css-vars($dark-tabs);
diff --git a/src/app/lists/combo/combo-styling/combo-styling.component.scss b/src/app/lists/combo/combo-styling/combo-styling.component.scss
index e86653bb51..99f5a88490 100644
--- a/src/app/lists/combo/combo-styling/combo-styling.component.scss
+++ b/src/app/lists/combo/combo-styling/combo-styling.component.scss
@@ -2,31 +2,18 @@
 @use "igniteui-angular/theming" as *;
 
 $custom-drop-down-theme: drop-down-theme(
-  $background-color: #d9f5d6,
-  $header-text-color: #1a5214,
-  $item-text-color: #1a5214,
-
-  $focused-item-background: #72da67,
-  $focused-item-text-color: #1a5214,
-  $hover-item-background: #a0e698,
-  $hover-item-text-color: #1a5214,
-
-  $selected-item-background: #a0e698,
-  $selected-item-text-color: #1a5214,
-  $selected-hover-item-background: #72da67,
-  $selected-hover-item-text-color: #1a5214,
-  $selected-focus-item-background: #72da67,
-  $selected-focus-item-text-color: #1a5214,
+  $background-color: #57a5cd,
 );
 
 $custom-combo-theme: combo-theme(
-  $search-separator-border-color: #1a5214
+  $search-separator-border-color: #1d3743,
+  $toggle-button-background: #57a5cd,
 );
 
 $custom-checkbox-theme: checkbox-theme(
   $border-radius: 10px,
-  $fill-color: #1a5214,
-  $empty-color: #1a5214,
+  $fill-color: #1d3743,
+  $empty-color: #1d3743,
 );
 
 :host ::ng-deep {
@@ -34,4 +21,3 @@ $custom-checkbox-theme: checkbox-theme(
   @include css-vars($custom-combo-theme);
   @include css-vars($custom-checkbox-theme);
 }
- 
\ No newline at end of file
diff --git a/src/app/lists/list/list-sample-8/list-sample-8.component.scss b/src/app/lists/list/list-sample-8/list-sample-8.component.scss
index 3b81ad8a3a..1f3f8f499e 100644
--- a/src/app/lists/list/list-sample-8/list-sample-8.component.scss
+++ b/src/app/lists/list/list-sample-8/list-sample-8.component.scss
@@ -2,8 +2,7 @@
 @use "igniteui-angular/theming" as *;
 
 $my-list-theme: list-theme(
-  $background: #0568ab
+    $background: #57a5cd
 );
 
 @include css-vars($my-list-theme);
- 
\ No newline at end of file
diff --git a/src/app/lists/tree/tree-styling/tree-styling.component.scss b/src/app/lists/tree/tree-styling/tree-styling.component.scss
index cc8e15836e..a6caa0069b 100644
--- a/src/app/lists/tree/tree-styling/tree-styling.component.scss
+++ b/src/app/lists/tree/tree-styling/tree-styling.component.scss
@@ -2,10 +2,7 @@
 @use "igniteui-angular/theming" as *;
 
 $custom-tree-theme: tree-theme(
-  $background-selected: #ffe6cc,
-  $background-active: #ecaa53,
-  $background-active-selected: #ff8c1a
+  $background: #ecaa53,
 );
 
 @include css-vars($custom-tree-theme);
- 
\ No newline at end of file
diff --git a/src/app/menus/action-strip/action-strip-paragraph-styling/action-strip-paragraph-styling.component.scss b/src/app/menus/action-strip/action-strip-paragraph-styling/action-strip-paragraph-styling.component.scss
index 874b7c8cbc..d834dd63b5 100644
--- a/src/app/menus/action-strip/action-strip-paragraph-styling/action-strip-paragraph-styling.component.scss
+++ b/src/app/menus/action-strip/action-strip-paragraph-styling/action-strip-paragraph-styling.component.scss
@@ -2,12 +2,9 @@
 @use "igniteui-angular/theming" as *;
 
 $custom-strip: action-strip-theme(
-  $background: rgba(150, 133, 143, 0.7),
-  $actions-background: rgba(109, 121, 147, 0.9),
-  $icon-color:  null,
-  $delete-action: null,
-  $actions-border-radius: 0
+  $background: rgba(109, 121, 147, 0.2),
+  $actions-background: rgba(#011627, 0.9),
+  $actions-border-radius: 0,
 );
 
 @include css-vars($custom-strip);
- 
\ No newline at end of file
diff --git a/src/app/menus/navbar/navbar-style/navbar-style.component.scss b/src/app/menus/navbar/navbar-style/navbar-style.component.scss
index fe39da7a35..117e7da741 100644
--- a/src/app/menus/navbar/navbar-style/navbar-style.component.scss
+++ b/src/app/menus/navbar/navbar-style/navbar-style.component.scss
@@ -1,11 +1,8 @@
 @use "igniteui-angular/theming" as *;
 
 $custom-navbar-theme: navbar-theme(
-  $text-color: #151515,
-  $background: #dedede,
-  $idle-icon-color: #151515,
-  $hover-icon-color: #8c8c8c
+  $background: #011627,
+  $idle-icon-color: #ecaa53,
 );
 
 @include css-vars($custom-navbar-theme);
- 
\ No newline at end of file
diff --git a/src/app/notifications/banner/banner-styling/banner-styling.component.scss b/src/app/notifications/banner/banner-styling/banner-styling.component.scss
index 79c2c68cdc..63ffb88be4 100644
--- a/src/app/notifications/banner/banner-styling/banner-styling.component.scss
+++ b/src/app/notifications/banner/banner-styling/banner-styling.component.scss
@@ -1,10 +1,7 @@
 @use "igniteui-angular/theming" as *;
 
 $custom-banner-theme: banner-theme(
-  $banner-message-color: #151515,
-  $banner-background: #dedede,
-  $banner-illustration-color: #666666
+  $banner-background: #011627,
 );
 
 @include css-vars($custom-banner-theme);
- 
\ No newline at end of file
diff --git a/src/app/notifications/toast/toast-style/toast-style.component.scss b/src/app/notifications/toast/toast-style/toast-style.component.scss
index 1ded3f8f0d..0176582c9f 100644
--- a/src/app/notifications/toast/toast-style/toast-style.component.scss
+++ b/src/app/notifications/toast/toast-style/toast-style.component.scss
@@ -2,10 +2,9 @@
 @use "igniteui-angular/theming" as *;
 
 $custom-toast-theme: toast-theme(
-  $background: #dedede,
-  $text-color: #151515,
+  $text-color: #ffcd0f,
+  $background: #292826,
   $border-radius: 12px
 );
 
 @include css-vars($custom-toast-theme);
- 
\ No newline at end of file
diff --git a/src/app/scheduling/calendar/calendar-styling-sample/calendar-styling-sample.component.scss b/src/app/scheduling/calendar/calendar-styling-sample/calendar-styling-sample.component.scss
index 4897af5dbe..7a54891f9c 100644
--- a/src/app/scheduling/calendar/calendar-styling-sample/calendar-styling-sample.component.scss
+++ b/src/app/scheduling/calendar/calendar-styling-sample/calendar-styling-sample.component.scss
@@ -2,19 +2,8 @@
 @use "igniteui-angular/theming" as *;
 
 $custom-calendar-theme: calendar-theme(
-  $header-background: #345779,
-  $content-background: #fdfdfd,
-  $header-foreground: #ffffff,
-  $date-current-foreground: #2dabe8,
-  $navigation-color: #2dabe8,
-  $date-selected-foreground: #fdfdfd,
-  $date-current-background: #fdfdfd,
-  $navigation-hover-color: #345779,
-  $ym-current-foreground: #2dabe8,
-  $ym-hover-foreground: #2dabe8,
-  $picker-foreground: #2dabe8,
-  $picker-hover-foreground: #345779,
+  $header-background: #ecaa53,
+  $content-background: #011627,
 );
 
 @include css-vars($custom-calendar-theme);
- 
\ No newline at end of file
diff --git a/src/app/scheduling/datepicker/datepicker-styling-sample/datepicker-styling-sample.component.scss b/src/app/scheduling/datepicker/datepicker-styling-sample/datepicker-styling-sample.component.scss
index 3e089c5d14..aced5ce9fd 100644
--- a/src/app/scheduling/datepicker/datepicker-styling-sample/datepicker-styling-sample.component.scss
+++ b/src/app/scheduling/datepicker/datepicker-styling-sample/datepicker-styling-sample.component.scss
@@ -2,18 +2,7 @@
 @use "igniteui-angular/theming" as *;
 
 $custom-datepicker-theme: calendar-theme(
-  $header-background: #345779,
-  $content-background: #fdfdfd,
-  $header-foreground: #ffffff,
-  $date-current-foreground: #2dabe8,
-  $navigation-color: #2dabe8,
-  $date-selected-foreground: #fdfdfd,
-  $date-current-background: #fdfdfd,
-  $navigation-hover-color: #345779,
-  $ym-current-foreground: #2dabe8,
-  $ym-hover-foreground: #2dabe8,
-  $picker-foreground: #2dabe8,
-  $picker-hover-foreground: #345779,
+    $header-background: #57a5cd,
 );
 
 :host {
@@ -21,4 +10,3 @@ $custom-datepicker-theme: calendar-theme(
     @include css-vars($custom-datepicker-theme);
   }
 }
- 
\ No newline at end of file
diff --git a/src/app/scheduling/monthpicker/monthpicker-styling/monthpicker-styling.component.scss b/src/app/scheduling/monthpicker/monthpicker-styling/monthpicker-styling.component.scss
index a06d05eee6..347190595a 100644
--- a/src/app/scheduling/monthpicker/monthpicker-styling/monthpicker-styling.component.scss
+++ b/src/app/scheduling/monthpicker/monthpicker-styling/monthpicker-styling.component.scss
@@ -3,15 +3,7 @@
 
 $my-calendar-theme: calendar-theme(
   $border-radius: 15px,
-  $content-background: #011627,
-  $picker-background: #011627,
-  $ym-current-foreground: #ecaa53,
-  $ym-hover-background: #ecaa53,
-  $navigation-color: #ecaa53,
-  $picker-hover-foreground: #d37b08,
-  $navigation-hover-color: #d37b08,
-  $picker-foreground: #ecaa53,
+  $content-background: #57a5cd,
 );
 
 @include css-vars($my-calendar-theme);
- 
\ No newline at end of file
diff --git a/src/app/scheduling/timepicker/timepicker-styling/timepicker-styling.component.scss b/src/app/scheduling/timepicker/timepicker-styling/timepicker-styling.component.scss
index 450c9d6295..e7ab5ef825 100644
--- a/src/app/scheduling/timepicker/timepicker-styling/timepicker-styling.component.scss
+++ b/src/app/scheduling/timepicker/timepicker-styling/timepicker-styling.component.scss
@@ -6,17 +6,14 @@ $my-time-picker-theme: time-picker-theme(
   $hover-text-color: #ecaa53,
   $selected-text-color: #ecaa53,
   $header-background: #ecaa53,
-  $header-hour-text-color: #011627,
   $background-color: #011627
 );
 
-$dark-button: button-theme(
+$dark-button: flat-button-theme(
   $foreground: #ecaa53,
-  $hover-background: #ecaa53
 );
 
 :host ::ng-deep {
   @include css-vars($my-time-picker-theme);
   @include css-vars($dark-button);
 }
- 
\ No newline at end of file