feat: Update @use @forward and hsla

packages/cli/migrations/update-4_2_3/index.spec.ts

@@ -26,7 +26,7 @@ describe("Update 4.2.3", () => {
 	it("should add Awesome Grid extra paginator style", async done => {
 		const stylesFile = "/src/app/awesome-grid/awesome-grid.component.scss";
 		appTree.create(stylesFile,
-`@import '~igniteui-angular/theming';
+`@use 'igniteui-angular/theming' as *;
 
 :host ::ng-deep {
 
@@ -46,7 +46,7 @@ describe("Update 4.2.3", () => {
 		await schematicRunner.runSchematicAsync("migration-04", {}, appTree).toPromise();
 		expect(appTree.readContent(stylesFile).replace(/\r\n/g, "\n"))
 			.toEqual(
-`@import '~igniteui-angular/theming';
+`@use 'igniteui-angular/theming' as *;
 
 :host ::ng-deep {
 

packages/cli/templates/webcomponents/igc-ts/projects/empty/files/index.html

@@ -15,7 +15,6 @@
     :host {
       display: block;
       padding: 25px;
-      color: var(--test-component-test-text-color, #000);
     }
 
     #outlet {

packages/igx-templates/Update.spec.ts

@@ -118,17 +118,13 @@ export class HomeComponent {
 }`}, {
 			path: "src/home.component.scss",
 			content:
-`@import '~igniteui-angular/theming';
-@import '~igniteui-dockmanager/styles/themes/test';
-@use 'igniteui-angular/theming';
-@forward 'igniteui-angular/theming';
+`@use 'igniteui-angular/theming' as *;
+@use 'igniteui-dockmanager/styles/themes/test' as *;
 @include igx-core();
 `,
 			expected:
-`@import '~@infragistics/igniteui-angular/theming';
-@import '~@infragistics/igniteui-dockmanager/styles/themes/test';
-@use '@infragistics/igniteui-angular/theming';
-@forward '@infragistics/igniteui-angular/theming';
+`@use '@infragistics/igniteui-angular/theming' as *;
+@use '@infragistics/igniteui-dockmanager/styles/themes/test' as *;
 @include igx-core();
 `}, {
 			path: "angular.json",

packages/igx-templates/igx-ts/custom-templates/awesome-grid/files/src/app/__path__/__filePrefix__.component.scss

@@ -1,5 +1,4 @@
-@import '~<%=igxPackage%>/theming';
-
+@use '<%=igxPackage%>/theming' as *;
 $grid-sample-theme: igx-grid-theme(
   $row-selected-background: #333,
   $row-selected-text-color: #ddd,

packages/igx-templates/igx-ts/custom-templates/crm-grid/files/src/app/__path__/__filePrefix__.component.scss

@@ -1,8 +1,7 @@
+@use '<%=igxPackage%>/theming' as *;
 @import url("https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fontawesome.css");
 @import url("https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fa-regular.css");
 @import url("https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fa-solid.css");
-@import '~<%=igxPackage%>/theming';
-
 :host ::ng-deep {
 
     $crm-grid-palette: igx-palette(

packages/igx-templates/igx-ts/custom-templates/fintech-grid/files/src/app/__path__/__filePrefix__.component.scss

@@ -1,3 +1,6 @@
+@use '<%=igxPackage%>/theming' as *;
+@use './themes/_mixins' as *;
+
 :host {
     display: block;
     width: 100%;
@@ -224,12 +227,10 @@
     height: 100%;
 }
 
-@import '~<%=igxPackage%>/theming';
 @include igx-core();
 @include igx-typography($font-family: $material-typeface, $type-scale: $material-type-scale);
 @include igx-theme($default-palette);
 
-@import './themes/_mixins';
 
 @include scrollbar-love();
 

packages/igx-templates/igx-ts/custom-templates/fintech-grid/files/src/app/__path__/themes/_mixins.scss

@@ -1,7 +1,9 @@
+@use '<%=igxPackage%>/theming' as *;
+
 @mixin scrollbar-love($scrollbar-color: null) {
     $scrollbar-track: hexrgba(igx-color($default-palette, 'grays', 200));
     $scrollbar-thumb: hexrgba(igx-color($default-palette, 'grays', 400));
-    
+
     @if $scrollbar-color and luminance($scrollbar-color) < .5 {
         $scrollbar-track: darken($scrollbar-color, 8%);
         $scrollbar-thumb: lighten($scrollbar-color, 20%);

packages/igx-templates/igx-ts/custom-templates/fintech-tree-grid/files/src/app/__path__/__filePrefix__.component.scss

@@ -1,3 +1,6 @@
+@use '<%=igxPackage%>/theming' as *;
+@use './themes/_mixins' as *;
+
 :host ::ng-deep {
     .finjs-icons {
         display: flex;
@@ -202,12 +205,10 @@
 // Custom Dark Theme
 
 // Import the theme utilities first
-@import '~<%=igxPackage%>/theming';
 @include igx-core();
 @include igx-typography($font-family: $material-typeface, $type-scale: $material-type-scale);
 @include igx-theme($default-palette);
 
-@import './themes/_mixins';
 
 $green-palette: igx-palette($primary: #09f,$secondary: #72da67, $surface: #333);
 

packages/igx-templates/igx-ts/custom-templates/fintech-tree-grid/files/src/app/__path__/themes/_mixins.scss

@@ -1,3 +1,5 @@
+@use '<%=igxPackage%>/theming' as *;
+
 @mixin scrollbar-love($scrollbar-color: null) {
     $scrollbar-track: hexrgba(igx-color($default-palette, 'grays', 200));
     $scrollbar-thumb: hexrgba(igx-color($default-palette, 'grays', 400));
@@ -16,4 +18,4 @@
      ::-webkit-scrollbar-thumb {
         background-color: $scrollbar-thumb;
     }
-}
+}

packages/igx-templates/igx-ts/projects/_base/files/src/styles.scss

@@ -1,6 +1,7 @@
 /* You can add global styles to this file, and also import other style files */
 // Standard CSS normalize, comment out if not required or using a different module
-@import "~minireset.css/minireset";
+@use "~minireset.css/minireset" as *;
+@forward "~minireset.css/minireset";
 
 <%=CustomTheme%>
 html, body {

packages/igx-templates/igx-ts/projects/_base/index.ts

@@ -23,7 +23,7 @@ export class BaseIgxProject implements ProjectTemplate {
 
 	private CUSTOM_THEME
 		= `/* See: https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/sass/index */
-@import "~igniteui-angular/theming";
+@use "igniteui-angular/theming" as *;
 
 $primary: #731963 !default;
 $secondary: #ce5712 !default;

packages/igx-templates/igx-ts/projects/empty/files/src/app/home/home.component.scss

@@ -1,4 +1,4 @@
-@import "~igniteui-angular/theming";
+@use '<%=igxPackage%>/theming' as *;
 
 %content-display {
   width: 100%;

packages/igx-templates/igx-ts/tree/default/files/src/app/__path__/__filePrefix__.component.scss

@@ -12,7 +12,7 @@ igx-tree {
 .node-refresh {
   cursor: pointer;
   padding: 0px 4px;
-  color: var(--igx-success-500);
+  color: hsla(var(--igx-success-500));
 }
 
 .node {

spec/unit/PromptSession-spec.ts

@@ -690,7 +690,7 @@ describe("Unit - PromptSession", () => {
 		await mockSession.start();
 		const CUSTOM_THEME = `
 		/* See: https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/sass/index */
-		@import "~igniteui-angular/theming";
+		@use "igniteui-angular/theming" as *;
 		$primary: #731963 !default;
 		$secondary: #ce5712 !default;
 		$app-palette: igx-palette($primary, $secondary);