igniteui-theming 1.3.0 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "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,33 +5,39 @@
 @use 'sass:string';
 @use '../utils/meta' as *;
 
-/// Generates CSS variables for a given palette.
-/// @access public
-/// @group Palettes
-/// @param {Map} $palette - The palette used to generate CSS variables.
-/// @param {Boolean} $contrast [true] - Specify if contrast colors should be included.
-/// @example scss Generate css variables for a palette
-///    $palette: palette($primary: red, $secondary: blue, $gray: #000);
-///    @include palette($palette);
-/// @require {function} is-root
-@mixin palette($palette, $contrast: true) {
+// Generates CSS variables for the base colors.
+// @access private
+@mixin _base-colors($palette) {
     $scope: if(is-root(), ':root', '&');
 
     #{$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);
+                $_shade: $shade == 500;
+                $_valid: meta.type-of($value == 'color');
 
-                @if $_base-shade and $_valid-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 shade CSS variables from the base colors.
+// @access private
+@mixin _shade-colors($palette, $contrast: true) {
+    $scope: if(is-root(), '*', '&');
+
+    #{$scope} {
+        @each $color, $shades in map.remove($palette, '_meta') {
+            @each $shade, $value in $shades {
+                $_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);
@@ -46,3 +52,17 @@
         }
     }
 }
+
+/// Generates CSS variables for a given palette.
+/// @access public
+/// @group Palettes
+/// @param {Map} $palette - The palette used to generate CSS variables.
+/// @param {Boolean} $contrast [true] - Specify if contrast colors should be included.
+/// @example scss Generate css variables for a palette
+///    $palette: palette($primary: red, $secondary: blue, $gray: #000);
+///    @include palette($palette);
+/// @require {function} is-root
+@mixin palette($palette, $contrast: true) {
+    @include _base-colors($palette);
+    @include _shade-colors($palette, $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', &);
+}