refactor(components): bind dark themes to shadow root (#940)

* Bumped theming package 
* Ignore themes generated templates from coverage and analyzer

---------

Co-authored-by: desig9stein <mspopovv@gmail.com>
Co-authored-by: sivanova <sivanova@infragistics.com>
Co-authored-by: Radoslav Karaivanov <rkaraivanov@infragistics.com>

Author: 4 people

package-lock.json

@@ -20,10 +20,10 @@
     "build:typescript": "tsc",
     "build:styles": "node scripts/build-styles.mjs",
     "build:watch": "npm run build:styles && concurrently -k -r \"npm:watch-scss\" \"npm:watch-ts\"",
-    "build:docs:md": "web-component-analyzer \"src/**/*.ts\" --outDir docs/md",
-    "build:docs:json": "web-component-analyzer \"src/**/*.ts\" --format json --outDir docs/json",
-    "build:docs:schema": "web-component-analyzer src --format json --outFile custom-elements.json",
-    "build:docs:vscode-schema": "web-component-analyzer src --format vscode --outFile vscode-html-custom-data.json",
+    "build:docs:md": "web-component-analyzer \"src/**/!(*.spec|*.css).ts\" --outDir docs/md",
+    "build:docs:json": "web-component-analyzer \"src/**/!(*.spec|*.css).ts\" --format json --outDir docs/json",
+    "build:docs:schema": "web-component-analyzer \"src/**/!(*.spec|*.css).ts\" --format json --outFile custom-elements.json",
+    "build:docs:vscode-schema": "web-component-analyzer \"src/**/!(*.spec|*.css).ts\" --format vscode --outFile vscode-html-custom-data.json",
     "build:meta": "node scripts/build-stories.js",
     "watch-meta": "node scripts/stories-watcher.js ",
     "watch-scss": "node scripts/styles-watcher.mjs",
@@ -82,7 +82,7 @@
     "eslint-plugin-storybook": "^0.6.15",
     "globby": "^13.2.2",
     "husky": "^8.0.3",
-    "igniteui-theming": "^3.2.0",
+    "igniteui-theming": "^3.3.0",
     "igniteui-typedoc-theme": "^3.1.0",
     "keep-a-changelog": "^2.4.1",
     "lint-staged": "^15.0.1",

package.json

@@ -18,7 +18,7 @@ export async function buildThemes() {
 
   for (const sassFile of paths) {
     const result = renderSass(sassFile, {
-      outputStyle: 'compressed',
+      style: 'compressed',
       loadPaths: ['node_modules', 'src']
     });
 

scripts/build-styles.mjs

@@ -22,7 +22,7 @@ const renderSass = sass.compileAsync;
 
 async function sassToCss(sassFile) {
   const result = await renderSass(sassFile, {
-    outputStyle: 'compressed',
+    style: 'compressed',
     loadPaths: ['node_modules', 'src']
   });
 

scripts/sass.mjs

@@ -1,4 +1,4 @@
-@use 'styles/utilities/index' as *;
+@use 'styles/utilities' as *;
 
 :host {
     ::slotted(igc-expansion-panel) {

src/components/accordion/themes/accordion.base.scss

@@ -1,4 +1,3 @@
-@use 'sass:map';
 @use 'styles/utilities' as *;
 @use 'igniteui-theming/sass/themes/schemas/components/dark/avatar' as *;
 

src/components/avatar/themes/dark/_themes.scss

@@ -1,4 +1,3 @@
-@use 'sass:map';
 @use 'styles/utilities' as *;
 @use 'themes' as *;
 

src/components/avatar/themes/dark/avatar.bootstrap.scss

@@ -1,4 +1,3 @@
-@use 'sass:map';
 @use 'styles/utilities' as *;
 @use 'themes' as *;
 

src/components/avatar/themes/dark/avatar.fluent.scss

@@ -1,5 +1,4 @@
-@use 'sass:map';
-@use '../../../../styles/utilities' as *;
+@use 'styles/utilities' as *;
 @use 'themes' as *;
 
 $theme: $indigo;

src/components/avatar/themes/dark/avatar.indigo.scss

@@ -1,4 +1,3 @@
-@use 'sass:map';
 @use 'styles/utilities' as *;
 @use 'themes' as *;