refactor: use param to toggle host context / root context (#544)

src/app/header/header.component.scss

@@ -15,7 +15,7 @@ header {
   @include borders.panel(bottom);
   background-color: var(--app-color-toolbar-background);
 
-  @include animations.when-motion-host-context {
+  @include animations.when-motion {
     @include animations.multiple-transitions(
       (background-color, border-color),
       animations.$emphasized-style

src/app/header/light-dark-toggle/light-dark-toggle.component.scss

@@ -15,7 +15,7 @@ button {
     }
   }
 
-  @include animations.when-motion-host-context {
+  @include animations.when-motion {
     @include animations.single-transition(color, animations.$emphasized-style);
   }
 

src/app/header/tab/tab.component.scss

@@ -27,7 +27,7 @@
     }
   }
 
-  @include animations.when-motion-host-context {
+  @include animations.when-motion {
     @include animations.multiple-transitions(
       (border-bottom-color, color),
       animations.$emphasized-style

src/app/resume-page/attribute/attribute.component.scss

@@ -8,7 +8,7 @@
   cursor: pointer;
   color: var(--ui-text);
 
-  @include animations.when-motion-host-context {
+  @include animations.when-motion {
     @include animations.single-transition(color);
   }
 
@@ -29,7 +29,7 @@
   visibility: hidden;
   right: 150%;
   opacity: 0;
-  @include animations.when-motion-host-context {
+  @include animations.when-motion {
     @include animations.multiple-transitions(
       (right, opacity, visibility, background-color, color, border-color),
       animations.$emphasized-style

src/app/resume-page/card/card-header/card-header-detail/card-header-detail.component.scss

@@ -3,7 +3,7 @@
 :host {
   font-size: 1rem;
   color: var(--ui-text);
-  @include animations.when-motion-host-context {
+  @include animations.when-motion {
     @include animations.single-transition(color, animations.$emphasized-style);
   }
 }

src/app/resume-page/card/card-header/card-header-image/card-header-image.component.scss

@@ -8,7 +8,7 @@
 img {
   border-radius: card-header-image.$size;
   filter: var(--img-filter);
-  @include animations.when-motion-host-context {
+  @include animations.when-motion {
     @include animations.single-transition(filter, animations.$emphasized-style);
   }
 }

src/app/resume-page/card/card-header/card-header-subtitle/card-header-subtitle.component.scss

@@ -4,7 +4,7 @@
   font-size: 1.15rem;
   color: var(--ui-text);
 
-  @include animations.when-motion-host-context {
+  @include animations.when-motion {
     @include animations.single-transition(color, animations.$emphasized-style);
   }
 }

src/app/resume-page/card/card.component.scss

@@ -11,7 +11,7 @@
   @include borders.panel;
   background-color: var(--sys-color-surface1);
 
-  @include animations.when-motion-host-context {
+  @include animations.when-motion {
     @include animations.multiple-transitions(
       (background-color, border-color),
       animations.$emphasized-style

src/app/resume-page/chip/chip.component.scss

@@ -11,7 +11,7 @@
   color: var(--sys-color-on-surface);
   border-color: var(--adorner-border-color);
 
-  @include animations.when-motion-host-context {
+  @include animations.when-motion {
     @include animations.multiple-transitions(
       (background-color, color, border-color),
       animations.$emphasized-style

src/app/resume-page/content-chip/content-chip.component.scss

@@ -7,7 +7,7 @@
   padding: paddings.$s;
   background-color: var(--sys-color-surface3);
 
-  @include animations.when-motion-host-context {
+  @include animations.when-motion {
     @include animations.multiple-transitions(
       (background-color, border-color),
       animations.$emphasized-style

src/app/resume-page/languages-section/language-item/language-tag/language-tag.component.scss

@@ -27,7 +27,7 @@ code {
   font-weight: bold;
   font-size: math.div(3 * card-header-image.$size, 8);
 
-  @include animations.when-motion-host-context {
+  @include animations.when-motion {
     @include animations.multiple-transitions(
       (background-color),
       animations.$emphasized-style

src/app/resume-page/profile-section/profile-contacts/profile-contacts.component.scss

@@ -22,7 +22,7 @@ li {
     &:hover {
       color: var(--sys-color-on-surface);
     }
-    @include animations.when-motion-host-context {
+    @include animations.when-motion {
       @include animations.single-transition(
         color,
         animations.$emphasized-style

src/app/resume-page/profile-section/profile-picture/profile-picture.component.scss

@@ -44,7 +44,7 @@ img {
   border-color: var(--sys-color-divider);
   filter: var(--img-filter);
 
-  @include animations.when-motion-host-context {
+  @include animations.when-motion {
     transition: animations.transition(opacity),
       animations.transition(visibility),
       animations.transition(filter, animations.$emphasized-style),
@@ -78,7 +78,7 @@ img {
   padding: paddings.$s;
   border-radius: paddings.$s;
 
-  @include animations.when-motion-host-context {
+  @include animations.when-motion {
     @include animations.multiple-transitions((opacity, visibility));
   }
 

src/app/resume-page/section-title/section-title.component.scss

@@ -16,7 +16,7 @@
   background-color: var(--app-color-toolbar-background);
   color: var(--ui-text);
 
-  @include animations.when-motion-host-context {
+  @include animations.when-motion {
     @include animations.multiple-transitions(
       (color, background-color, border-color),
       animations.$emphasized-style

src/app/sports-page/sports-page.component.scss

@@ -11,10 +11,10 @@
 @include texts.page;
 
 img.sports-equation {
-  @include theming.when-dark-mode-host-context {
+  @include theming.when-dark-mode {
     filter: invert(1);
   }
-  @include animations.when-motion-host-context {
+  @include animations.when-motion {
     @include animations.single-transition(filter, animations.$emphasized-style);
   }
 }

src/sass/_animations.scss

@@ -53,23 +53,10 @@ $emphasized-style: (
 
 $_reduced-motion-attribute-selector: '[data-reduced-motion]';
 $_no-reduced-motion-selector: ':not(#{$_reduced-motion-attribute-selector})';
-@mixin when-motion-host-context() {
-  @include root-attribute.host-context($_no-reduced-motion-selector) {
-    @include no-reduced-motion-preference {
+@mixin when-motion($hostContext: true) {
+  @include root-attribute.context($_no-reduced-motion-selector, $hostContext) {
+    @media (prefers-reduced-motion: no-preference) {
       @content;
     }
   }
 }
-@mixin when-motion() {
-  @include root-attribute.context($_no-reduced-motion-selector) {
-    @include no-reduced-motion-preference {
-      @content;
-    }
-  }
-}
-
-@mixin no-reduced-motion-preference() {
-  @media (prefers-reduced-motion: no-preference) {
-    @content;
-  }
-}

src/sass/_theming.scss

@@ -50,11 +50,11 @@
 
 $_no-color-scheme-attribute-selector: ':not([data-color-scheme])';
 $_dark-mode-attribute-selector: '[data-color-scheme="dark"]';
-@mixin when-dark-mode-host-context {
-  @include root-attribute.host-context($_dark-mode-attribute-selector) {
+@mixin when-dark-mode {
+  @include root-attribute.context($_dark-mode-attribute-selector) {
     @content;
   }
-  @include root-attribute.host-context($_no-color-scheme-attribute-selector) {
+  @include root-attribute.context($_no-color-scheme-attribute-selector) {
     @media (prefers-color-scheme: dark) {
       @content;
     }

src/sass/helpers/_root-attribute.scss

@@ -2,7 +2,20 @@
 @use 'sass:string';
 
 $_root-selector: 'html'; // could use :root 🤷
-@mixin host-context($attributeSelector) {
+
+@mixin context($attributeSelector, $hostContext: true) {
+  @if ($hostContext) {
+    @include _host-context($attributeSelector) {
+      @content;
+    }
+  } @else {
+    @include _root-context($attributeSelector) {
+      @content;
+    }
+  }
+}
+
+@mixin _host-context($attributeSelector) {
   @at-root {
     // 👇 Angular adds [_nghost-ng-g4rb4g3] when using :host-context(selector) twice to:
     //      - Match selector in host: `selector:host`
@@ -24,7 +37,7 @@ $_root-selector: 'html'; // could use :root 🤷
   }
 }
 
-@mixin context($attributeSelector) {
+@mixin _root-context($attributeSelector) {
   @at-root {
     #{selector.nest(_root-attribute-selector($attributeSelector), &)} {
       @content;

src/styles.scss

@@ -28,7 +28,7 @@ body {
   // Do not allow scroll "bounce" effect
   overscroll-behavior: none;
 
-  @include animations.when-motion {
+  @include animations.when-motion($hostContext: false) {
     @include animations.multiple-transitions(
       (color, background-color),
       animations.$emphasized-style
@@ -51,7 +51,7 @@ a {
   text-decoration-line: underline;
   text-decoration-thickness: 1px;
 
-  @include animations.when-motion {
+  @include animations.when-motion($hostContext: false) {
     @include animations.multiple-transitions(
       (color, text-decoration-color),
       animations.$emphasized-style