fix(samples): update samples styling

live-editing/configs/ButtonConfigGenerator.ts

@@ -79,15 +79,13 @@ export class ButtonConfigGenerator implements IConfigGenerator {
         // button styling
         configs.push(new Config({
             component: 'ButtonStylingComponent',
-            additionalFiles: ["/src/app/data-entries/button/button-styling/layout.scss"],
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-entries/button/"
         }));
 
         // button tailwind styling
         configs.push(new Config({
             component: 'ButtonTailwindStylingComponent',
-            additionalFiles: ["/src/app/data-entries/button/button-tailwind-styling/layout.scss"],
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-entries/button/"
         }));

src/app/data-display/badge/badge-dot/badge-dot.component.scss

@@ -2,8 +2,6 @@
 @use "igniteui-theming/sass/typography" as *;
 
 :host {
-    --sample-accent: var(--ig-primary-800);
-
     display: grid;
     grid-auto-flow: column;
     place-content: center;
@@ -103,7 +101,7 @@ $anchors: icon, avatar;
     color: var(--ig-gray-700);
 
     &.active {
-        color: var(--sample-accent);
+        color: var(--ig-primary-500);
     }
 }
 

src/app/data-display/badge/badge-outlined/badge-outlined.component.html

@@ -1,4 +1,6 @@
-<igx-avatar class="icon-anchor" icon="favorite_border" shape="circle" size="small"></igx-avatar>
+<div class="icon-anchor">
+    <igx-icon>favorite_border</igx-icon>
+</div>
 <igx-badge value="23" type="info" outlined></igx-badge>
 
 <igx-avatar class="initials-anchor" initials="AZ" shape="rounded" size="small"></igx-avatar>

src/app/data-display/badge/badge-outlined/badge-outlined.component.scss

@@ -21,7 +21,17 @@
 }
 
 .icon-anchor {
-    --ig-avatar-background: #{color($color: gray, $variant: 900, $opacity: 0.08)};
+    display: grid;
+    place-items: center;
+    inline-size: rem(36px);
+    block-size: rem(36px);
+    border-radius: 50%;
+    background: var(--ig-gray-200);
+    color: var(--ig-gray-800);
+
+    igx-icon {
+        font-size: rem(18px);
+    }
 }
 
 igx-badge {
@@ -32,6 +42,11 @@ igx-badge {
     inset-inline-start: anchor(85.5%);
     translate: -50% -50%;
 
+    &:nth-of-type(1) {
+        inset-block-start: anchor(10%);
+        inset-inline-start: anchor(100%);
+    }
+
     &:nth-of-type(2) {
         inset-block-start: anchor(85.5%);
     }

src/app/data-display/badge/badge-outlined/badge-outlined.component.ts

@@ -1,13 +1,14 @@
 import { Component } from '@angular/core';
 import { IgxAvatarComponent } from 'igniteui-angular/avatar';
 import { IgxBadgeComponent } from 'igniteui-angular/badge';
+import { IgxIconComponent } from 'igniteui-angular/icon';
 import { IGX_STEPPER_DIRECTIVES } from 'igniteui-angular/stepper';
 
 @Component({
   selector: 'app-badge-outlined',
   styleUrls: ['./badge-outlined.component.scss'],
   templateUrl: './badge-outlined.component.html',
-  imports: [IgxAvatarComponent, IgxBadgeComponent, IGX_STEPPER_DIRECTIVES]
+  imports: [IgxAvatarComponent, IgxBadgeComponent, IgxIconComponent, IGX_STEPPER_DIRECTIVES]
 })
 
 export class BadgeOutlinedComponent {

src/app/data-display/badge/badge-overview/badge-overview.component.scss

@@ -17,6 +17,20 @@ igx-icon {
 
 igx-chip {
     --ig-size: var(--ig-size-large);
+    --ig-chip-background: var(--ig-gray-300);
+    --ig-chip-border-radius: #{rem(16px)};
+
+    ::ng-deep .igx-chip__item {
+        @include type-style("body-2") {
+            margin: 0;
+        }
+
+        font-family: "Titillium Web", sans-serif;
+        font-size: rem(14px);
+        font-weight: 400;
+        line-height: rem(20px);
+        letter-spacing: rem(0.25px);
+    }
 }
 
 igx-badge {
@@ -32,6 +46,10 @@ igx-badge:nth-of-type(1) {
     inset-block-start: anchor(85.5%);
 }
 
+igx-badge:nth-of-type(3) {
+    inset-inline-start: anchor(93%);
+}
+
 $anchors: avatar, mail, events, notifications;
 
 @each $anchor in $anchors {

src/app/data-display/badge/badge-shape/badge-shape.component.scss

@@ -12,20 +12,20 @@
 }
 
 span {
+    @include type-style("body-2") {
+        margin: 0;
+    }
+
     justify-self: end;
     color: var(--ig-gray-600);
     font-family: "Aktiv Grotesk", sans-serif;
     font-size: rem(13px);
     font-weight: 400;
     line-height: rem(20px);
     letter-spacing: rem(0.3px);
-
-    @include type-style("body-2") {
-        margin: 0;
-    }
 }
 
-$sizes: small, medium, large;
+$sizes: large, medium, small;
 
 @each $size in $sizes {
     $i: list.index($sizes, $size);

src/app/data-display/badge/badge-size/badge-size.component.scss

@@ -12,17 +12,17 @@
 }
 
 span {
+    @include type-style("body-2") {
+        margin: 0;
+    }
+
     justify-self: end;
     color: var(--ig-gray-600);
     font-family: "Aktiv Grotesk", sans-serif;
     font-size: rem(13px);
     font-weight: 400;
     line-height: rem(20px);
     letter-spacing: rem(0.3px);
-
-    @include type-style("body-2") {
-        margin: 0;
-    }
 }
 
 $sizes: small, medium, large;

src/app/data-display/badge/badge-type/badge-type.component.scss

@@ -16,12 +16,14 @@ $types: dot, icon, text;
 }
 
 igx-avatar {
-    --ig-avatar-size: #{rem(40px)};
-
     grid-row: 1;
 }
 
 span {
+    @include type-style("caption") {
+        margin: 0;
+    }
+
     grid-row: 2;
     text-align: center;
     color: var(--ig-gray-600);
@@ -30,10 +32,6 @@ span {
     font-weight: 400;
     line-height: rem(20px);
     letter-spacing: rem(0.3px);
-
-    @include type-style("caption") {
-        margin: 0;
-    }
 }
 
 igx-badge {

src/app/data-display/badge/badge-variants/badge-variants.component.scss

@@ -20,6 +20,10 @@ igx-avatar {
 }
 
 span {
+    @include type-style("body-2") {
+        margin: 0;
+    }
+
     grid-row: 2;
     text-align: center;
     color: var(--ig-gray-600);
@@ -28,10 +32,6 @@ span {
     font-weight: 400;
     line-height: rem(20px);
     letter-spacing: rem(0.3px);
-
-    @include type-style("body-2") {
-        margin: 0;
-    }
 }
 
 igx-badge {

src/app/data-entries/button/button-contained/button-contained.component.scss

@@ -1,9 +1,11 @@
+@use "igniteui-theming/sass/typography" as *;
+
 .button-sample {
     display: flex;
-    padding: 2.5rem;
+    padding: rem(40px);
 }
 
 .button-sample button {
-    width: 46%;
+    inline-size: 46%;
     margin: auto;
 }

src/app/data-entries/button/button-download/button-download.component.scss

@@ -1,9 +1,11 @@
+@use "igniteui-theming/sass/typography" as *;
+
 .button-sample {
     display: flex;
-    padding: 2.5rem;
+    padding: rem(40px);
 }
 
 .button-sample a {
-    width: 46%;
+    inline-size: 46%;
     margin: auto;
 }

src/app/data-entries/button/button-fab/button-fab.component.scss

@@ -1,9 +1,11 @@
+@use "igniteui-theming/sass/typography" as *;
+
 .button-sample {
     display: flex;
-    padding: 2rem;
+    padding: rem(32px);
 }
 
 .button-sample button {
-    width: 45%;
+    inline-size: 45%;
     margin: auto;
 }

src/app/data-entries/button/button-flat/button-flat.component.scss

@@ -1,9 +1,11 @@
+@use "igniteui-theming/sass/typography" as *;
+
 .button-sample {
     display: flex;
-    padding: 2.5rem;
+    padding: rem(40px);
 }
 
 .button-sample button {
-    width: 46%;
+    inline-size: 46%;
     margin: auto;
 }

src/app/data-entries/button/button-interaction-states/button-interaction-states.component.scss

@@ -1,34 +1,39 @@
-@use "igniteui-angular/theming" as *;
+@use "igniteui-theming/sass/typography" as *;
 
 .button-container {
     display: flex;
     justify-content: center;
     align-items: center;
-    gap: 2rem;
-    padding: 1rem;
+    gap: rem(32px);
+    padding: rem(16px);
 }
 
 .button-item {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 0.75rem;
     --hover-background: var(--ig-contained-button-hover-background);
     --hover-foreground: var(--ig-contained-button-hover-foreground);
     --focus-background: var(--ig-contained-button-focus-background);
     --focus-foreground: var(--ig-contained-button-focus-foreground);
     --focus-hover-background: var(--ig-contained-button-focus-hover-background);
     --focus-hover-foreground: var(--ig-contained-button-focus-hover-foreground);
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: rem(12px);
 }
 
 .button-label {
+    @include type-style("body-2") {
+        margin: 0;
+    }
+
     color: var(--ig-gray-600);
     font-family: "Aktiv Grotesk", sans-serif;
-    font-size: 13px;
+    font-size: rem(13px);
     font-weight: 400;
     font-style: normal;
-    line-height: 20px;
-    letter-spacing: 0.3px;
+    line-height: rem(20px);
+    letter-spacing: rem(0.3px);
 }
 
 .button-item button.state-hover {

src/app/data-entries/button/button-layout/button-layout.component.scss

@@ -1,24 +1,26 @@
+@use "igniteui-theming/sass/typography" as *;
+
 .button-container {
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: 1rem;
-    width: 100%;
+    gap: rem(16px);
+    inline-size: 100%;
     box-sizing: border-box;
-    padding: 2.5rem;
+    padding: rem(40px);
 }
 
 .button-item {
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: 0.75rem;
+    gap: rem(12px);
 }
 
 .button-container button {
-    --ig-font-family: 'Titillium Web', sans-serif;
+    --ig-font-family: "Titillium Web", sans-serif;
     --ig-button-text-transform: uppercase;
 
-    font-size: 0.85rem;
-    letter-spacing: 1px;
+    font-size: rem(13.6px);
+    letter-spacing: rem(1px);
 }

src/app/data-entries/button/button-outlined/button-outlined.component.scss

@@ -1,9 +1,11 @@
+@use "igniteui-theming/sass/typography" as *;
+
 .button-sample {
     display: flex;
-    padding: 2.5rem;
+    padding: rem(40px);
 }
 
 .button-sample button {
-    width: 46%;
+    inline-size: 46%;
     margin: auto;
 }