feat(dev-demos):

1. fix lint error
2. remove unused files
3. use generated class for colors

Author: MPopov

src/app/app.component.ts

@@ -516,14 +516,10 @@ export class AppComponent implements OnInit {
         iconService.registerFontSetAlias('fa-solid', 'fa');
         iconService.registerFontSetAlias('fa-brands', 'fab');
 
-        router.events.pipe(
-            filter(event => event instanceof NavigationEnd)
-        ).subscribe(event => {
-            for(let component of this.componentLinks) {
-                console.log(component.link);
-                console.log(router.url);
-                if(component.link === router.url) {
-                    this.urlString = component.name
+        router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(event => {
+            for (const component of this.componentLinks) {
+                if (component.link === router.url) {
+                    this.urlString = component.name;
                 }
             }
         });

src/app/pageHeading/pageHeading.styles.scss

@@ -1,5 +1,4 @@
 @import '../../../projects/igniteui-angular/src/lib/core/styles/base/index';
-@import '../../styles/app-palettes';
 
 :host {
     display: block;
@@ -26,11 +25,11 @@
     align-items: center;
     height: rem(90px);
     padding: 0 rem(16px);
-    background: igx-color($palette, 'primary');
+    background: var(--igx-primary-500);
     overflow: hidden;
 
     .title {
-        color: igx-contrast-color($palette, 'primary');
+        color: var(--igx-primary-500-contrast);
         margin: 0;
         text-transform: capitalize;
         white-space: nowrap;

src/app/styleguide/colors/color.sample.html

@@ -10,7 +10,6 @@ <h4 class="color-title igx-{{color.name}}-500">{{color.name}}</h4>
                     </div>
                 </div>
             </div>
-
         </div>
     </article>
 

src/app/styleguide/colors/color.sample.scss

@@ -1,5 +1,4 @@
 @import '../../../../projects/igniteui-angular/src/lib/core/styles/themes/utilities';
-@import '../../../styles/app-palettes';
 @import'../../../styles/igniteui-theme.scss';
 
 .sample-wrapper {
@@ -35,8 +34,6 @@
 
 .color-container {
     @include igx-color-classes('background', $palette: $palette);
-
-    color: #fff;
 }
 
 .color-title {
@@ -53,19 +50,23 @@
     padding: 8px 16px;
 }
 
-.igx-success-500{
+.igx-success-500 {
     background: var(--igx-success-500);
+    color: var(--igx-success-500-contrast);
 }
 
-.igx-info-500{
+.igx-info-500 {
     background: var(--igx-info-500);
+    color: var(--igx-info-500-contrast);
 }
 
-.igx-warn-500{
+.igx-warn-500 {
     background: var(--igx-warn-500);
+    color: var(--igx-warn-500-contrast);
 }
 
-.igx-error-500{
+.igx-error-500 {
     background: var(--igx-error-500);
+    color: var(--igx-error-500-contrast);
 }
 

src/styles/_app-palettes.scss

@@ -1,9 +1,12 @@
 @import url('https://fonts.googleapis.com/icon?family=Material+Icons');
 @import url('https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600,700');
-@import 'app-palettes';
+@import '../../projects/igniteui-angular/src/lib/core/styles/themes/index';
 @import 'mixins';
 @import 'app-layout';
 
+$palette: $dark-indigo-palette;
+$schema: $dark-indigo-schema;
+
 /* autoprefixer grid: on */
 $igx-background-color: darken(igx-color($palette, 'surface'), 5%);
 $igx-foreground-color: igx-color($palette, 'grays', 900);
@@ -34,3 +37,5 @@ body {
     }
 }
 
+
+