Merge pull request #1118 from IgniteUI/didimmova/update-grid-lite-styling-sample

feat(grid-lite): use sass for styling the grid-lite component

Author: simeonoff

package-lock.json

@@ -5,6 +5,8 @@
     <meta charset="UTF-8" />
     <link rel="shortcut icon" href="https://dl.infragistics.com/x/img/browsers/wc.png" >
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Merriweather+Sans:wght@400;500;700&display=swap" />
+    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
     <link rel="stylesheet" href="https://dl.infragistics.com/x/css/samples/shared.v8.css" />

samples/grids/grid-lite/styling-custom-theme/index.html

@@ -44,7 +44,10 @@
     "file-loader": "^6.2.0",
     "fork-ts-checker-webpack-plugin": "^9.1.0",
     "html-webpack-plugin": "^5.6.4",
+    "igniteui-theming": "^24.0.2",
     "parcel-bundler": "^1.12.5",
+    "sass": "^1.96.0",
+    "sass-loader": "^16.0.6",
     "source-map": "^0.7.6",
     "style-loader": "^4.0.0",
     "tsconfig-paths-webpack-plugin": "^4.2.0",
@@ -55,4 +58,4 @@
     "worker-loader": "^3.0.8",
     "xml-loader": "^1.2.1"
   }
-}
+}

samples/grids/grid-lite/styling-custom-theme/package.json

@@ -0,0 +1,19 @@
+@use 'igniteui-theming' as *;
+@use '../node_modules/igniteui-theming/sass/typography/presets/bootstrap' as bootstrap;
+
+$custom-palette: palette(
+    $primary: #ddd020,
+    $secondary: #d5896f,
+    $surface: #031d44,
+    $gray: #04395e,
+);
+
+.grid-lite-wrapper {
+    width: 100%;
+    height: 100%;
+}
+
+.custom-styled {
+    @include palette($custom-palette);
+    @include typography('"Merriweather Sans", sans-serif', bootstrap.$type-scale);
+}

samples/grids/grid-lite/styling-custom-theme/src/index.css

@@ -3,7 +3,7 @@ import { defineComponents, IgcRatingComponent } from 'igniteui-webcomponents';
 import { GridLiteDataService, ProductInfo } from './GridLiteDataService';
 
 import "igniteui-webcomponents/themes/light/bootstrap.css";
-import "./index.css";
+import "./index.scss";
 
 IgcGridLite.register();
 defineComponents(IgcRatingComponent);

samples/grids/grid-lite/styling-custom-theme/src/index.scss

@@ -54,6 +54,22 @@ module.exports = env => {
                 { test: /\.(csv|tsv)$/, use: ['csv-loader'] },
                 { test: /\.xml$/, use: ['xml-loader'] },
                 { test: /\.css$/, sideEffects: true, use: ['style-loader', 'css-loader'] },
+                { 
+                    test: /\.scss$/, 
+                    sideEffects: true, 
+                    use: [
+                        'style-loader', 
+                        'css-loader', 
+                        {
+                            loader: 'sass-loader',
+                            options: {
+                                sassOptions: {
+                                    silenceDeprecations: ['color-functions', 'if-function'],
+                                }
+                            }
+                        }
+                    ] 
+                },
                 {
                     test: /worker\.(ts|js)$/,
                     use: [