From 26994c3e5cd4d82d7d30818a42cc4e50f3a5c829 Mon Sep 17 00:00:00 2001
From: Adrian Petrov <adrian.ptrv1@gmail.com>
Date: Tue, 29 Apr 2025 17:21:31 +0300
Subject: [PATCH 1/2] refactor(button): new button sample

---
 .../buttons-style.component.html              | 23 +++++++----
 .../buttons-style.component.scss              | 41 ++++++++++++++-----
 2 files changed, 47 insertions(+), 17 deletions(-)

diff --git a/src/app/data-entries/buttons/buttons-style/buttons-style.component.html b/src/app/data-entries/buttons/buttons-style/buttons-style.component.html
index a6029e94e..349481f20 100644
--- a/src/app/data-entries/buttons/buttons-style/buttons-style.component.html
+++ b/src/app/data-entries/buttons/buttons-style/buttons-style.component.html
@@ -1,8 +1,17 @@
 <div class="buttons-sample">
-    <div class="button-sample">
-        <button igxButton="contained" igxRipple="#fdfdfd">Styled Button</button>
-    </div>
-    <div class="button-sample">
-        <button igxButton="contained" [disabled]="'true'" igxRipple>Disabled</button>
-    </div>
-</div>
+  <div class="button-sample">
+    <button igxButton="contained" igxRipple>Contained Button</button>
+  </div>
+  <div class="button-sample">
+    <button igxButton="flat" igxRipple>Flat Button</button>
+  </div>
+  <div class="button-sample">
+    <button igxButton="outlined" igxRipple>Outlined Button</button>
+  </div>
+  <div class="button-sample">
+    <button igxButton="fab" igxRipple>Fab Button</button>
+  </div>
+  <div class="button-sample">
+    <button igxButton="contained" [disabled]="'true'">Disabled</button>
+  </div>
+</div>
\ No newline at end of file
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 e8a543e3d..4ec158d60 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
@@ -1,17 +1,38 @@
 @use "layout.scss";
 @use "igniteui-angular/theming" as *;
 
-$custom-button-theme: button-theme(
-  $foreground: #fdfdfd,
-  $hover-foreground: #fdfdfd,
-  $focus-foreground: #fdfdfd,
-  $background: #345779,
-  $hover-background: #2e4d6b,
-  $focus-background: #2e4d6b,
-  $disabled-foreground: #2e4d6b,
+$custom-contained-theme: contained-button-theme(
+  $background: #348ae0,
+  $hover-background: #2e7bc8,
+  $focus-visible-background: #2e7bc8
+);
+
+$custom-flat-theme: flat-button-theme(
+  $foreground: var(--ig-error-500-contrast),
+  $hover-foreground: var(--ig-error-800-contrast),
+  $focus-visible-foreground: var(--ig-error-800-contrast),
+  $background: var(--ig-error-500),
+  $hover-background: var(--ig-error-800),
+  $focus-visible-background: var(--ig-error-800)
+);
+
+$custom-outlined-theme: outlined-button-theme(
+  $foreground: var(--ig-success-500),
+  $hover-foreground: var(--ig-success-700),
+  $focus-foreground: var(--ig-success-700),
+  $border-color: var(--ig-success-500),
+  $hover-border-color: var(--ig-success-700),
+  $focus-border-color: var(--ig-success-700)
+);
+
+$custom-fab-theme: fab-button-theme(
+  $background: #ffc506
 );
 
 .button-sample {
-  @include css-vars($custom-button-theme);
-}
+  @include css-vars($custom-contained-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

From b55032f827c6806b2bb627af4b442f9da208e078 Mon Sep 17 00:00:00 2001
From: Adrian Petrov <adrian.ptrv1@gmail.com>
Date: Wed, 30 Apr 2025 09:36:28 +0300
Subject: [PATCH 2/2] refactor(button): new CSS properties

---
 .../buttons-style/buttons-style.component.scss | 18 +++---------------
 1 file changed, 3 insertions(+), 15 deletions(-)

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 4ec158d60..abd55c426 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
@@ -2,27 +2,15 @@
 @use "igniteui-angular/theming" as *;
 
 $custom-contained-theme: contained-button-theme(
-  $background: #348ae0,
-  $hover-background: #2e7bc8,
-  $focus-visible-background: #2e7bc8
+  $background: #348ae0
 );
 
 $custom-flat-theme: flat-button-theme(
-  $foreground: var(--ig-error-500-contrast),
-  $hover-foreground: var(--ig-error-800-contrast),
-  $focus-visible-foreground: var(--ig-error-800-contrast),
-  $background: var(--ig-error-500),
-  $hover-background: var(--ig-error-800),
-  $focus-visible-background: var(--ig-error-800)
+  $foreground: var(--ig-error-800)
 );
 
 $custom-outlined-theme: outlined-button-theme(
-  $foreground: var(--ig-success-500),
-  $hover-foreground: var(--ig-success-700),
-  $focus-foreground: var(--ig-success-700),
-  $border-color: var(--ig-success-500),
-  $hover-border-color: var(--ig-success-700),
-  $focus-border-color: var(--ig-success-700)
+  $foreground: var(--ig-success-500)
 );
 
 $custom-fab-theme: fab-button-theme(