Merge pull request #3678 from IgniteUI/didimmova/update-styling-samples-vnext

feat(samples): update styling samples

Author: simeonoff

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>

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

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

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

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;