refactor(custom-lite-grid): update sample to include themes

Author: simeonoff

src/app/grid-lite/grid-lite-styling-custom/grid-lite-styling-custom.component.scss

@@ -1,33 +1,47 @@
+@use "igniteui-angular/theming" as *;
+
 :host {
-  contain: content;
+    --ig-size: 2;
+
+    contain: content;
 }
 
 .grid-lite-wrapper {
-  width: 100%;
-  height: 100%;
+    width: 100%;
+    height: 100%;
 }
 
 .theme-switcher {
-  margin-bottom: 2rem;
+    margin-bottom: 2rem;
 }
 
 igc-grid-lite {
-  min-height: 400px;
-  --ig-size: 2;
+    min-height: rem(400px);
 }
 
-// Custom light theme
-igc-grid-lite.custom-light {
-  --ig-primary-500: #c1292e;
-  --ig-secondary-500: #f1d302;
-  --ig-surface-500: #fdfffc;
-  --ig-gray-500: #235789;
+$my-light-palette: palette(
+    $primary: #c1292e,
+    $secondary: #f1d302,
+    $surface: #fdfffc,
+    $gray: #235789,
+);
+
+$my_dark_palette: palette(
+    $primary: #ddd020,
+    $secondary: #d5896f,
+    $surface: #031d44,
+    $gray: #04395e,
+);
+
+.custom-light {
+    @include palette($my_light_palette);
+    @include typography('"Roboto", sans-serif', $bootstrap-type-scale);
 }
 
-// Custom dark theme
-igc-grid-lite.custom-dark {
-  --ig-primary-500: #ddd020;
-  --ig-secondary-500: #d5896f;
-  --ig-surface-500: #031d44;
-  --ig-gray-500: #04395e;
+.custom-dark {
+    @include palette($my_dark_palette);
+    @include typography(
+        '"Merriweather Sans", sans-serif',
+        $bootstrap-type-scale
+    );
 }

src/app/grid-lite/grid-lite-styling-custom/grid-lite-styling-custom.component.ts

@@ -1,4 +1,4 @@
-import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit, inject } from '@angular/core';
+import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit, inject, ViewEncapsulation } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { defineComponents, IgcSwitchComponent } from 'igniteui-webcomponents';
 import { IgcGridLite } from 'igniteui-grid-lite';
@@ -11,25 +11,26 @@ defineComponents(IgcSwitchComponent);
   selector: 'app-grid-lite-styling-custom',
   templateUrl: './grid-lite-styling-custom.component.html',
   styleUrls: ['./grid-lite-styling-custom.component.scss'],
+  encapsulation: ViewEncapsulation.None,
   imports: [CommonModule],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class GridLiteStylingCustomComponent implements OnInit {
   private dataService = inject(GridLiteDataService);
-  
+
   public data: ProductInfo[] = [];
   public columns: any[] = [];
   public theme: 'dark' | 'light' = 'dark';
 
   ngOnInit() {
     this.data = this.dataService.generateProducts(50);
-    
+
     this.columns = [
-      { 
-        key: 'name', 
-        headerText: 'Product', 
-        filter: true, 
-        sort: true 
+      {
+        key: 'name',
+        headerText: 'Product',
+        filter: true,
+        sort: true
       },
       {
         key: 'price',
@@ -38,15 +39,15 @@ export class GridLiteStylingCustomComponent implements OnInit {
         filter: true,
         sort: true
       },
-      { 
-        key: 'sold', 
-        type: 'number', 
+      {
+        key: 'sold',
+        type: 'number',
         headerText: 'Sold',
         filter: true,
         sort: true
       },
-      { 
-        key: 'total', 
+      {
+        key: 'total',
         headerText: 'Total',
         type: 'number',
         filter: true,