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

feat(grid-lite): update styling sample to use sass theme

Author: simeonoff

browser/package-lock.json

@@ -27,6 +27,7 @@
     "igniteui-grid-lite": "^0.0.1",
     "igniteui-react": "^19.4.0",
     "igniteui-react-charts": "19.3.1",
+    "igniteui-theming": "^24.0.2",
     "igniteui-react-core": "19.3.1",
     "igniteui-react-dashboards": "19.3.1",
     "igniteui-react-data-grids": "19.3.1",
@@ -96,6 +97,7 @@
     "remark": "^14.0.2",
     "remark-frontmatter": "^2.0.0",
     "run-sequence": "^2.2.1",
+    "sass-embedded": "^1.84.0",
     "ts-loader": "^9.5.4",
     "ts-node": "^10.9.2",
     "typescript": "^4.8.4",

browser/package.json

@@ -30,6 +30,14 @@ export default defineConfig(({ mode }) => ({
       'jszip/dist/jszip'
     ],
   },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        includePaths: ['node_modules'],
+        loadPaths: [resolve(__dirname, 'node_modules')]
+      }
+    }
+  },
   build: {
     outDir: 'build',
     commonjsOptions: {

browser/vite.config.js

@@ -16,6 +16,7 @@
   "dependencies": {
     "igniteui-grid-lite": "^0.0.1",
     "igniteui-react": "^19.4.0",
+    "igniteui-theming": "^24.0.2",
     "igniteui-webcomponents": "^6.3.0",
     "lit-html": "^3.2.0",
     "react": "^19.2.0",
@@ -30,6 +31,7 @@
     "@vitejs/plugin-react": "^5.0.4",
     "@vitest/browser": "^3.2.4",
     "eslint": "^8.33.0",
+    "sass": "^1.83.0",
     "eslint-config-react": "^1.1.7",
     "eslint-plugin-react": "^7.20.0",
     "typescript": "^4.8.4",

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

@@ -0,0 +1,19 @@
+@use 'igniteui-theming' as *;
+@import 'igniteui-theming/sass/typography/presets';
+
+$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

@@ -10,7 +10,7 @@ import {
 } from 'igniteui-webcomponents';
 
 import "igniteui-webcomponents/themes/light/bootstrap.css";
-import "./index.css";
+import "./index.scss";
 
 // Register components
 IgcGridLite.register();

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

@@ -1,8 +1,16 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
+import { resolve } from 'path';
 
 export default defineConfig({
   plugins: [react()],
+  css: {
+    preprocessorOptions: {
+      scss: {
+        loadPaths: [resolve(__dirname, 'node_modules')]
+      }
+    }
+  },
   build: {
     outDir: 'build'
   },