@igniteui/angular-templates 13.0.901 → 13.0.902

package/Update.spec.js

@@ -116,16 +116,12 @@ 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';
+                content: `@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';
+                expected: `@use '@infragistics/igniteui-angular/theming' as *;
+@use '@infragistics/igniteui-dockmanager/styles/themes/test' as *;
 @include igx-core();
 `
             }, {

package/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,

package/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(

package/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();
 

package/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%);

package/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);
 

package/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;
     }
-}
+}

package/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 {

package/igx-ts/projects/_base/index.js

@@ -33,7 +33,7 @@ class BaseIgxProject {
             }
         };
         this.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;

package/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%;

package/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 {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@igniteui/angular-templates",
-  "version": "13.0.901",
+  "version": "13.0.902",
   "description": "Templates for Ignite UI for Angular projects and components",
   "repository": {
     "type": "git",
@@ -12,7 +12,7 @@
   "author": "Infragistics",
   "license": "MIT",
   "dependencies": {
-    "@igniteui/cli-core": "~9.0.1",
+    "@igniteui/cli-core": "~9.0.2",
     "typescript": "~4.4.4"
   }
 }