Merge pull request #8865 from IgniteUI/simeonoff/scoped-vars

refactor(themes): add scoped vars

Author: simeonoff

projects/igniteui-angular/src/lib/core/styles/base/utilities/_functions.scss

@@ -531,9 +531,9 @@ $p-test: igx-palette(#fff, #000);
     @if map-has-key($map, $key) {
         @if not(legacy()) {
             @if not($fallback) {
-                @return var(--#{map-get($map, 'name')}-#{$key})
+                @return var(--#{$key})
             }
-            @return var(--#{map-get($map, 'name')}-#{$key}, #{$fallback})
+            @return var(--#{$key}, #{$fallback})
         } @else {
             @return map-get($map, $key);
         }
@@ -849,7 +849,11 @@ $p-test: igx-palette(#fff, #000);
 @function str-replace($string, $search, $replace: '') {
     $index: str-index($string, $search);
     @if $index {
-        @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+        @return str-slice($string, 1, $index - 1) + $replace + str-replace(
+            str-slice($string, $index + str-length($search)),
+            $search,
+            $replace
+        );
     }
     @return $string;
 }

projects/igniteui-angular/src/lib/core/styles/base/utilities/_mixins.scss

@@ -3,29 +3,6 @@
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
 ////
 
-/// Help debug sass maps.
-/// @access privet
-/// @example scss - Sample usage
-///   input[type="checkbox"] {
-///     @include hide-default();
-///   }
-
-//@mixin debug-map($map) {
-//    @at-root {
-//        @debug-map {
-//            __toString__: inspect($map);
-//            __length__: length($map);
-//            __keys__: map-keys($map);
-//
-//            __properties__ {
-//                @each $key, $value in $map {
-//                    #{$key}: inspect($value);
-//                }
-//            }
-//        }
-//    }
-//}
-
 /// Hides the element from the DOM.
 /// @access public
 /// @example scss - Sample usage
@@ -218,43 +195,39 @@
 ///     @include css-vars-from-theme($my-theme);
 ///   }
 @mixin css-vars-from-theme($theme, $prefix: null) {
+    $name: map-get($theme, 'name');
+    $ignore: ('name', 'palette', 'variant', 'selector');
+
     @each $key, $value in $theme {
-        @if $key != 'name' and $key != 'palette' and type-of($value) != 'map' {
+        @if not(index($ignore, $key)) and type-of($value) != 'map' {
             @if $prefix {
-                --#{$prefix}-#{$key}: #{$value};
+                --#{$prefix}-#{$key}: var(--#{$name}-#{$key}, #{$value});
             } @else {
-                --#{$key}: #{$value};
+                --#{$key}: var(--#{$name}-#{$key}, #{$value});
             }
         }
     }
 }
 
-/// Add theme colors to the global root scope
-/// Ensures the operation is done only once.
-/// @access private
-/// @param {map} $theme - The component theme to register as css vars.
-/// @requires {mixin} css-vars-from-theme
-@mixin igx-root-css-vars($theme) {
-    $scope: &;
-
-    @if map-get($themes, $scope) == null {
-        $id: unique-id();
-        $themes: map-merge($themes, (#{$scope}: $id)) !global;
-        @include igx-css-vars($theme);
-    }
-}
-
 /// Add theme colors to a scope.
 /// @access public
 /// @param {map} $theme - The component theme to be used
 /// @requires {mixin} css-vars-from-theme
-@mixin igx-css-vars($theme) {
-    $scope: if(is-root(), ':root', '&');
-    $prefix: map-get($theme, 'name');
+@mixin igx-css-vars($theme, $scope: null, $prefix: null) {
+    $s: map-get($theme, 'selector');
+    $n: map-get($theme, 'name');
+    $name: if($scope, $scope, $s or $n);
 
     @if not(legacy()) {
-        #{$scope} {
-            @include css-vars-from-theme($theme, $prefix);
+        @if is-root() {
+            #{$name} {
+                @include css-vars-from-theme($theme, $prefix);
+            }
+        } @else {
+            &,
+            #{$name} {
+                @include css-vars-from-theme($theme, $prefix);
+            }
         }
     }
 }

projects/igniteui-angular/src/lib/core/styles/components/action-strip/_action-strip-theme.scss

@@ -65,11 +65,11 @@
 }
 
 /// @param {Map} $theme - The theme used to style the component.
-/// @requires {mixin} igx-root-css-vars
+/// @requires {mixin} igx-css-vars
 /// @requires rem
 /// @requires --var
 @mixin igx-action-strip($theme) {
-    @include igx-root-css-vars($theme);
+    @include igx-css-vars($theme);
 
     $padding: (
         comfortable: 0 rem(24px),

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

@@ -77,11 +77,11 @@
 }
 
 /// @param {Map} $theme - The theme used to style the component.
-/// @requires {mixin} igx-root-css-vars
+/// @requires {mixin} igx-css-vars
 /// @requires rem
 /// @requires --var
 @mixin igx-avatar($theme) {
-    @include igx-root-css-vars($theme);
+    @include igx-css-vars($theme);
 
     $small-size: 40px;
     $medium-size: 64px;

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

@@ -38,7 +38,7 @@
 ///   // Theming using css variables (not supported in IE11):
 ///   @include igx-css-vars($my-badge-theme);
 @function igx-badge-theme(
-    $palette: $default-palette,
+    $palette: null,
     $schema: $light-schema,
     $elevations: $elevations,
 
@@ -94,12 +94,12 @@
 }
 
 /// @param {Map} $theme - The theme used to style the component.
-/// @requires {mixin} igx-root-css-vars
+/// @requires {mixin} igx-css-vars
 /// @requires igx-color
 /// @requires rem
 /// @requires --var
 @mixin igx-badge($theme) {
-    @include igx-root-css-vars($theme);
+    @include igx-css-vars($theme);
 
     $palette: map-get($theme, 'palette');
 

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

@@ -58,11 +58,11 @@
 }
 
 /// @param {Map} $theme - The theme used to style the component.
-/// @requires {mixin} igx-root-css-vars
+/// @requires {mixin} igx-css-vars
 /// @requires rem
 /// @requires --var
 @mixin igx-banner($theme) {
-    @include igx-root-css-vars($theme);
+    @include igx-css-vars($theme);
 
     $left: if-ltr(left, right);
     $right: if-ltr(right, left);

projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss

@@ -70,7 +70,7 @@
 }
 
 /// @param {Map} $theme - The theme used to style the component.
-/// @requires {mixin} igx-root-css-vars
+/// @requires {mixin} igx-css-vars
 /// @requires {mixin} ellipsis
 /// @requires igx-bottom-nav-theme
 /// @requires igx-color
@@ -79,7 +79,7 @@
 /// @requires $ease-in-out-quad
 /// @requires --var
 @mixin igx-bottom-nav($theme) {
-    @include igx-root-css-vars($theme);
+    @include igx-css-vars($theme);
 
     $menu-height: 56px;
     $item-min-width: 80px;

projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss

@@ -74,6 +74,8 @@
     $selected-shadow-color: null
 ) {
     $name: 'igx-button-group';
+    $selector: 'igx-buttongroup';
+
     $button-group-schema: ();
 
     @if map-has-key($schema, $name) {
@@ -145,6 +147,7 @@
 
     @return extend($theme, (
         name: $name,
+        selector: $selector,
         palette: $palette,
         item-text-color: $item-text-color,
         item-background: $item-background,
@@ -168,11 +171,11 @@
 
 
 /// @param {Map} $theme - The theme used to style the component.
-/// @requires {mixin} igx-root-css-vars
+/// @requires {mixin} igx-css-vars
 /// @requires igx-color
 /// @requires --var
 @mixin igx-button-group($theme) {
-    @include igx-root-css-vars($theme);
+    @include igx-css-vars($theme);
     $group-item-min-width: 24px;
     $group-item-border-thickness: 1px;
     $group-items-margin: rem(10px, 16px);

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

@@ -171,6 +171,8 @@
     $disabled-background: null,
 ) {
     $name: 'igx-button';
+    $selector: '[igxButton]';
+
     $button-schema: ();
 
     @if map-has-key($schema, $name) {
@@ -335,6 +337,7 @@
 
     @return extend($theme, (
         name: $name,
+        selector: $selector,
         palette: $palette,
 
         flat-border-radius: $flat-border-radius,
@@ -409,11 +412,11 @@
 }
 
 /// @param {Map} $theme - The theme used to style the component.
-/// @requires {mixin} igx-root-css-vars
+/// @requires {mixin} igx-css-vars
 /// @requires rem
 /// @requires --var
 @mixin igx-button($theme) {
-    @include igx-root-css-vars($theme);
+    @include igx-css-vars($theme);
 
     $left: if-ltr(left, right);
     $right: if-ltr(right, left);

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

@@ -322,13 +322,13 @@
 
 /// @param {Map} $theme - The theme used to style the component.
 /// @requires {function} text-contrast
-/// @requires {mixin} igx-root-css-vars
+/// @requires {mixin} igx-css-vars
 /// @requires em
 /// @requires rem
 /// @requires {mixin} ellipsis
 /// @requires --var
 @mixin igx-calendar($theme) {
-    @include igx-root-css-vars($theme);
+    @include igx-css-vars($theme);
 
     $palette: map-get($theme, 'palette');
     $cal-header-year-margin: 0;