refactor(typography): treat :host selector the same as :root

sass/typography/_mixins.scss

@@ -111,7 +111,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 +123,7 @@
         }
     }
 
-    @if is-root() {
+    @if $root or $host {
         .ig-typography {
             @include type-style-elements();
             @include type-style-classes();

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', &);
+}

test/_utils.spec.scss

@@ -41,6 +41,35 @@
                 }
             }
         }
+
+        @include it('should resolve if the call context is :host') {
+            @include assert() {
+                @include output($selector: false) {
+                    // called from the :host
+                    :host {
+                        $is-host: is-host();
+
+                        content: $is-host;
+                    }
+                }
+
+                @include expect($selector: false) {
+                    :host {
+                        content: true;
+                    }
+                }
+            }
+
+            @include assert() {
+                @include output($selector: true) {
+                    content: is-root();
+                }
+
+                @include expect($selector: true) {
+                    content: false;
+                }
+            }
+        }
     }
 
     @include describe('map') {