refactor(button): new button sample

Author: adrianptrv

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>

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);
+};