igniteui-theming 1.3.0 → 1.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "1.3.0",
+  "version": "1.4.1",
   "description": "A set of Sass variables, mixins, and functions for generating palettes, typography, and elevations used by Ignite UI components.",
   "main": "index.js",
   "scripts": {

package/sass/color/_mixins.scss

@@ -5,6 +5,38 @@
 @use 'sass:string';
 @use '../utils/meta' as *;
 
+// Generates CSS variables for a base color
+// @access private
+@mixin _base($color, $shade, $value) {
+    $_shade: $shade == 500;
+    $_valid: meta.type-of($value == 'color');
+
+    @if $_shade and $_valid {
+        --ig-#{$color}-h: #{math.round(color.hue($value))};
+        --ig-#{$color}-s: #{math.round(color.saturation($value))};
+        --ig-#{$color}-l: #{math.round(color.lightness($value))};
+        --ig-#{$color}-a: #{color.alpha($value)};
+    }
+}
+
+// Generates CSS variables for a shade color
+// @access private
+@mixin _shade($color, $shade, $value, $contrast) {
+    $_shade: meta.type-of($shade) == 'string';
+    $_hsl: if($_shade, string.index($shade, 'hsl'), false);
+    $_contrast: if($_shade, string.index($shade, 'contrast'), false);
+
+    @if $_hsl {
+        $variant: string.slice($shade, 1, string.index($shade, '-hsl') - 1);
+
+        --ig-#{$color}-#{$variant}: #{$value};
+    }
+
+    @if $_contrast and $contrast {
+        --ig-#{$color}-#{$shade}: #{$value};
+    }
+}
+
 /// Generates CSS variables for a given palette.
 /// @access public
 /// @group Palettes
@@ -20,28 +52,8 @@
     #{$scope} {
         @each $color, $shades in map.remove($palette, '_meta') {
             @each $shade, $value in $shades {
-                $_base-shade: $shade == 500;
-                $_valid-color: meta.type-of($value == 'color');
-                $_other-shade: meta.type-of($shade) == 'string';
-                $_hsl: if($_other-shade, string.index($shade, 'hsl'), false);
-                $_contrast: if($_other-shade, string.index($shade, 'contrast'), false);
-
-                @if $_base-shade and $_valid-color {
-                    --ig-#{$color}-h: #{math.round(color.hue($value))};
-                    --ig-#{$color}-s: #{math.round(color.saturation($value))};
-                    --ig-#{$color}-l: #{math.round(color.lightness($value))};
-                    --ig-#{$color}-a: #{color.alpha($value)};
-                }
-
-                @if $_hsl {
-                    $variant: string.slice($shade, 1, string.index($shade, '-hsl') - 1);
-
-                    --ig-#{$color}-#{$variant}: #{$value};
-                }
-
-                @if $_contrast and $contrast {
-                    --ig-#{$color}-#{$shade}: #{$value};
-                }
+                @include _base($color, $shade, $value);
+                @include _shade($color, $shade, $value, $contrast);
             }
         }
     }

package/sass/typography/_mixins.scss

@@ -23,7 +23,11 @@
 
     @if $valid {
         @each $key, $value in types.$ITypeStyle {
-            #{$key}: var(--ig-#{$category}-#{$key});
+            @if #{$key} == 'font-family' {
+                font-family: var(--ig-#{$category}-#{$key}, var(--ig-font-family));
+            } @else {
+                #{$key}: var(--ig-#{$category}-#{$key});
+            }
         }
         @content;
     } @else {
@@ -39,7 +43,13 @@
 ///   @include type-style-vars('h1', $h1-style);
 @mixin type-style-vars($name, $type-style) {
     @each $key, $value in map.remove($type-style, '_meta') {
-        --ig-#{$name}-#{$key}: #{$value};
+        @if $key == 'font-family' and $value != inherit {
+            --ig-#{$name}-#{$key}: #{$value};
+        }
+
+        @if $key != 'font-family' {
+            --ig-#{$name}-#{$key}: #{$value};
+        }
     }
 }
 
@@ -111,7 +121,9 @@
 /// @example scss
 ///   @include typography('Roboto', $my-type-scale);
 @mixin typography($font-family, $type-scale) {
-    $scope: if(is-root(), ':root', '&');
+    $root: is-root();
+    $host: is-host();
+    $scope: if($root, ':root', '&');
 
     #{$scope} {
         --ig-font-family: #{string.unquote($font-family)};
@@ -121,7 +133,7 @@
         }
     }
 
-    @if is-root() {
+    @if $root or $host {
         .ig-typography {
             @include type-style-elements();
             @include type-style-classes();

package/sass/typography/_types.scss

@@ -25,7 +25,7 @@ $ITypeScale: (
 /// @type Map
 /// @access private
 $ITypeStyle: (
-    font-family: var(--ig-font-family),
+    font-family: inherit,
     font-size: null,
     font-weight: normal,
     font-style: normal,

package/sass/utils/_meta.scss

@@ -1,3 +1,5 @@
+@use 'sass:selector';
+
 /// Returns true if the scope where it's called is the root of the document.
 /// @access private
 /// @example scss Check if the current scope is root
@@ -11,6 +13,21 @@
 /// @return {Boolean} - Returns a boolean depending on the scope where it's called
 @function is-root() {
     @each $selector in & {
-        @return if($selector == null, true, false);
+        @return $selector == null;
     }
 }
+
+/// Returns true if the scope where it's called is :host.
+/// @access private
+/// @example scss Check if the current scope is :root
+///   @mixin smart-mixin() {
+///     $host: is-host();
+///
+///     @if is-host() {
+///       /* style rules here */
+///     }
+///   }
+/// @return {Boolean} - Returns a boolean depending on the scope where it's called
+@function is-host() {
+    @return not(is-root()) and selector.is-superselector(':host', &);
+}