refactor(themes): resolve Sass deprecation warnings (#15099)

Author: simeonoff

projects/igniteui-angular/src/lib/core/styles/components/dock-manager/_dock-manager-theme.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:meta';
 @use '../../base' as *;
 @use '../../themes/schemas' as *;
 
@@ -65,7 +66,7 @@
 
     $theme: digest-schema($dock-manager-schema);
 
-    @return extend($theme, (name: $name, prefix: 'igc'), keywords($rest));
+    @return extend($theme, (name: $name, prefix: 'igc'), meta.keywords($rest));
 }
 
 /// @deprecated Use the `css-vars` mixin instead.

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss

@@ -1434,15 +1434,15 @@
         }
 
         &%igx-grid__tr--ghost {
+            background: var-get($theme, 'row-ghost-background');
+            color: var-get($theme, 'row-drag-color');
+            z-index: 10002;
+
             @include css-vars((
                 name: 'igx-grid-row',
                 row-ghost-background: map.get($theme, 'row-ghost-background'),
                 row-drag-color: map.get($theme, 'row-drago-color')
             ));
-
-            background: var-get($theme, 'row-ghost-background');
-            color: var-get($theme, 'row-drag-color');
-            z-index: 10002;
         }
     }
 
@@ -2797,9 +2797,9 @@
             compact: calc(#{$i * map.get($grid-grouping-indicator-padding, 'compact')} + #{$indicator-icon-width})
         );
 
-        $level--comfortable: map-get($row-indentation-level, 'comfortable');
-        $level--cosy: map-get($row-indentation-level, 'cosy');
-        $level--compact: map-get($row-indentation-level, 'compact');
+        $level--comfortable: map.get($row-indentation-level, 'comfortable');
+        $level--cosy: map.get($row-indentation-level, 'cosy');
+        $level--compact: map.get($row-indentation-level, 'compact');
 
         %igx-grid__row-indentation--level-#{$i} {
             --indicator-inline-inset: #{sizable(

projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss

@@ -1884,15 +1884,14 @@
     %form-group-bundle-start--bootstrap,
     %form-group-bundle-end--bootstrap {
         flex: none;
-
-        &:empty {
-            display: none;
-        }
-
         border-width: rem(1px);
         border-style: solid;
         border-color: var-get($theme, 'border-color');
         overflow: hidden;
+
+        &:empty {
+            display: none;
+        }
     }
 
     %form-group-bundle-start--bootstrap {

projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss

@@ -520,6 +520,10 @@
     }
 
     %igx-list-item-content--active {
+        color: var-get($theme, 'item-text-color-active');
+        background: var-get($theme, 'item-background-active');
+        z-index: 3;
+
         %igx-list__item-line-title {
             color: var-get($theme, 'item-title-color-active')
         }
@@ -544,10 +548,6 @@
                 color: var-get($theme, 'item-thumbnail-color-active')
             }
         }
-
-        color: var-get($theme, 'item-text-color-active');
-        background: var-get($theme, 'item-background-active');
-        z-index: 3;
     }
 
     %igx-list-item-content--inactive {

projects/igniteui-angular/src/lib/core/styles/components/rating/_rating-theme.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:meta';
 @use '../../base' as *;
 @use '../../themes/schemas' as *;
 
@@ -40,7 +41,7 @@
 
     $theme: digest-schema($rating-schema);
 
-    @return extend($theme, (name: $name), keywords($rest));
+    @return extend($theme, (name: $name), meta.keywords($rest));
 }
 
 /// @deprecated Use the `css-vars` mixin instead.

projects/igniteui-angular/src/lib/core/styles/components/scrollbar/scrollbar-theme.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:meta';
 @use '../../base' as *;
 @use '../../themes/schemas' as *;
 
@@ -99,7 +100,7 @@
         }
 
         ::-webkit-scrollbar {
-            @if type-of(map.get($theme, 'sb-size') == 'string') {
+            @if meta.type-of(map.get($theme, 'sb-size') == 'string') {
                 width: var-get($theme, 'sb-size');
                 height: var-get($theme, 'sb-size');
             }

projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss

@@ -360,13 +360,6 @@
     }
 
     %tabs-header-item {
-        > * {
-            margin-inline-start: rem(if($variant != 'indigo', 12px, 8px));
-
-            &:first-child {
-                margin-inline-start: 0;
-            }
-        }
         display: inline-flex;
         justify-content: center;
         align-items: center;
@@ -390,32 +383,6 @@
             color: var-get($theme, 'item-icon-color');
         }
 
-        &::-moz-focus-inner {
-            border: 0;
-        }
-
-        &:focus {
-            background: var-get($theme, 'item-active-background');
-            color: var-get($theme, 'item-hover-color');
-            border-bottom-color: transparent;
-        }
-
-        &:hover {
-            background: var-get($theme, 'item-hover-background');
-            color: var-get($theme, 'item-hover-color');
-
-            @if $bootstrap-theme {
-                box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'border-color--hover');
-            }
-        }
-
-        &:hover,
-        &:focus {
-            igx-icon {
-                color: var-get($theme, 'item-hover-icon-color');
-            }
-        }
-
         @if $bootstrap-theme {
             padding-block: rem(12px);
             border-start-start-radius: var-get($theme, 'border-radius');
@@ -448,6 +415,40 @@
             }
         }
 
+        > * {
+            margin-inline-start: rem(if($variant != 'indigo', 12px, 8px));
+
+            &:first-child {
+                margin-inline-start: 0;
+            }
+        }
+
+        &::-moz-focus-inner {
+            border: 0;
+        }
+
+        &:focus {
+            background: var-get($theme, 'item-active-background');
+            color: var-get($theme, 'item-hover-color');
+            border-bottom-color: transparent;
+        }
+
+        &:hover {
+            background: var-get($theme, 'item-hover-background');
+            color: var-get($theme, 'item-hover-color');
+
+            @if $bootstrap-theme {
+                box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'border-color--hover');
+            }
+        }
+
+        &:hover,
+        &:focus {
+            igx-icon {
+                color: var-get($theme, 'item-hover-icon-color');
+            }
+        }
+
         @include ripple($tabs-ripple-theme);
         @include css-vars($tabs-ripple-theme);
     }

src/app/pageHeading/pageHeading.styles.scss

@@ -1,4 +1,4 @@
-@import '../../../projects/igniteui-angular/src/lib/core/styles/base/index';
+@use '../../../projects/igniteui-angular/src/lib/core/styles/base' as *;
 
 :host {
     display: block;

src/app/pagination/pagination.styles.scss

@@ -1,4 +1,4 @@
-@import '../../../projects/igniteui-angular/src/lib/core/styles/base/index';
+@use '../../../projects/igniteui-angular/src/lib/core/styles/base' as *;
 
 :host {
     display: block;

src/app/slider/slider.sample.scss

@@ -1,4 +1,4 @@
-@import '../../../projects/igniteui-angular/src/lib/core/styles/themes/utilities';
+@use '../../../projects/igniteui-angular/src/lib/core/styles/themes/utilities' as *;
 
 .ellipsis {
     @include ellipsis();