feat(samples): update styling samples

didimmova · didimmova · commit 8b918524e690 · 2025-05-13T16:13:47.000+03:00
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
@@ -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
@@ -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-entries/buttons/buttons-style/buttons-style.component.scss b/src/app/data-entries/buttons/buttons-style/buttons-style.component.scss
@@ -1,17 +1,10 @@
 @use "layout.scss";
 @use "igniteui-angular/theming" as *;
 
-$custom-button-theme: button-theme(
-  $foreground: #fdfdfd,
-  $hover-foreground: #fdfdfd,
-  $focus-foreground: #fdfdfd,
+$custom-button-theme: contained-button-theme(
   $background: #345779,
-  $hover-background: #2e4d6b,
-  $focus-background: #2e4d6b,
-  $disabled-foreground: #2e4d6b,
 );
 
 .button-sample {
   @include css-vars($custom-button-theme);
 }
- 
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
@@ -6,7 +6,6 @@ $custom-drop-down-theme: drop-down-theme(
   $item-text-color: #2dabe8,
   $hover-item-text-color: #345779,
   $selected-item-background: #345779,
-  $hover-item-background: rgba(0, 0, 0, 0.12),
 );
 
 .drop-down__scroll-container {
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
@@ -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
@@ -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
@@ -1,12 +1,13 @@
 @use "layout.scss";
 @use "igniteui-angular/theming" as *;
 
+.sample-column {
+    gap: 1rem;
+}
+
 $custom-input-group: input-group-theme(
-  $filled-text-color: #288a54,
-  $idle-text-color: #288a54,
-  $idle-bottom-line-color: #288a54,
-  $focused-secondary-color: #174f30,
-  $box-background: #eeeeee
+    $box-background: #57a5cd,
+    $border-color: #57a5cd,
 );
 
 @include css-vars($custom-input-group);
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
@@ -2,8 +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);
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
@@ -2,6 +2,7 @@
 @use "igniteui-angular/theming" as *;
 
 $custom-switch-theme: switch-theme(
+  $thumb-off-color: #7cadd5,
   $thumb-on-color: #ecaa53,
 );
 
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
@@ -4,16 +4,16 @@
 $my-dialog-theme: dialog-theme(
   $background: #011627,
   $title-color: #ecaa53,
-  $border-radius: .3,
+  $border-radius: 5px,
 );
 
-$dark-button: contained-button-theme(
+$custom-button: contained-button-theme(
   $background: #ecaa53,
   $foreground: #011627,
 );
 
 .dialog-container {
-  @include css-vars($dark-button);
+  @include css-vars($custom-button);
 }
 
 :host {
diff --git a/src/app/layouts/accordion/accordion-style/accordion-style.component.scss b/src/app/layouts/accordion/accordion-style/accordion-style.component.scss
@@ -3,7 +3,8 @@
 
 $custom-panel-theme: expansion-panel-theme(
   $header-background: #011627,
-  $expanded-margin: 10px,
+  $body-background: #f0ece7,
+  $expanded-margin: 10px
 );
 
 @include css-vars($custom-panel-theme);
diff --git 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/expansion-panel/expansion-styling/expansion-styling.component.scss b/src/app/layouts/expansion-panel/expansion-styling/expansion-styling.component.scss
@@ -4,10 +4,9 @@
 // Create expansion panel theme
 $custom-panel-theme: expansion-panel-theme(
   $header-background: #353a4b,
+  $body-background: #353a4b,
   $header-title-color: #ffd351,
   $header-icon-color: #ffd351,
-  $body-background: #353a4b,
-  $border-radius: .5
 );
 
 // Apply the custom themes to the components mixins.
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
@@ -2,24 +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-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);
diff --git 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/list/list-sample-8/list-sample-8.component.scss b/src/app/lists/list/list-sample-8/list-sample-8.component.scss
@@ -2,7 +2,7 @@
 @use "igniteui-angular/theming" as *;
 
 $my-list-theme: list-theme(
-  $background: #57a5cd
+    $background: #57a5cd
 );
 
 @include css-vars($my-list-theme);
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
@@ -4,12 +4,7 @@
 $custom-strip: action-strip-theme(
   $background: rgba(109, 121, 147, 0.2),
   $actions-background: rgba(#011627, 0.9),
-  $actions-border-radius: 0
-);
-
-$custom-btn: flat-button-theme(
-    $foreground: #ecaa53
+  $actions-border-radius: 0,
 );
 
 @include css-vars($custom-strip);
-@include css-vars($custom-btn);
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
@@ -3,7 +3,7 @@
 
 $custom-datepicker-theme: calendar-theme(
     $header-background: #57a5cd,
-  );
+);
 
 :host {
   ::ng-deep {
