chore(radio): simplify hcm styles

PiperOrigin-RevId: 569570652
material-components · Sep 29, 2023 · d7b40fb · d7b40fb
1 parent 99918a0
commit d7b40fb
Show file tree

Hide file tree

Showing 4 changed files with 142 additions and 155 deletions.
diff --git a/radio/internal/_radio.scss b/radio/internal/_radio.scss
@@ -33,153 +33,168 @@ $_md-sys-motion: tokens.md-sys-motion-values();
 @mixin styles() {
   $tokens: tokens.md-comp-radio-values();
 
-  :host {
-    @each $token, $value in $tokens {
-      --_#{$token}: var(--md-radio-#{$token}, #{$value});
-    }
-
-    @include ripple.theme(
-      (
-        hover-color: var(--_hover-state-layer-color),
-        hover-opacity: var(--_hover-state-layer-opacity),
-        pressed-color: var(--_pressed-state-layer-color),
-        pressed-opacity: var(--_pressed-state-layer-opacity),
-      )
-    );
-
-    display: inline-flex;
-    height: var(--_icon-size);
-    outline: none;
-    position: relative;
-    vertical-align: top; // Fix extra space when placed inside display: block
-    width: var(--_icon-size);
-    // Remove highlight color for mobile Safari
-    -webkit-tap-highlight-color: transparent;
-  }
+  @layer {
+    :host {
+      @each $token, $value in $tokens {
+        --_#{$token}: var(--md-radio-#{$token}, #{$value});
+      }
+
+      @include ripple.theme(
+        (
+          hover-color: var(--_hover-state-layer-color),
+          hover-opacity: var(--_hover-state-layer-opacity),
+          pressed-color: var(--_pressed-state-layer-color),
+          pressed-opacity: var(--_pressed-state-layer-opacity),
+        )
+      );
+
+      display: inline-flex;
+      height: var(--_icon-size);
+      outline: none;
+      position: relative;
+      vertical-align: top; // Fix extra space when placed inside display: block
+      width: var(--_icon-size);
+      // Remove highlight color for mobile Safari
+      -webkit-tap-highlight-color: transparent;
+    }
 
-  :host([touch-target='wrapper']) {
-    margin: max(0px, ((48px - var(--_icon-size)) / 2));
-  }
+    :host([touch-target='wrapper']) {
+      margin: max(0px, ((48px - var(--_icon-size)) / 2));
+    }
 
-  .container {
-    display: flex;
-    height: 100%;
-    place-content: center;
-    place-items: center;
-    width: 100%;
-  }
+    .container {
+      display: flex;
+      height: 100%;
+      place-content: center;
+      place-items: center;
+      width: 100%;
+    }
 
-  md-focus-ring {
-    height: 44px;
-    inset: unset;
-    width: 44px;
-  }
+    md-focus-ring {
+      height: 44px;
+      inset: unset;
+      width: 44px;
+    }
 
-  .checked {
-    @include ripple.theme(
-      (
-        hover-color: var(--_selected-hover-state-layer-color),
-        hover-opacity: var(--_selected-hover-state-layer-opacity),
-        pressed-color: var(--_selected-pressed-state-layer-color),
-        pressed-opacity: var(--_selected-pressed-state-layer-opacity),
-      )
-    );
-  }
+    .checked {
+      @include ripple.theme(
+        (
+          hover-color: var(--_selected-hover-state-layer-color),
+          hover-opacity: var(--_selected-hover-state-layer-opacity),
+          pressed-color: var(--_selected-pressed-state-layer-color),
+          pressed-opacity: var(--_selected-pressed-state-layer-opacity),
+        )
+      );
+    }
 
-  // <input> is also the touch target
-  input {
-    appearance: none;
-    height: 48px;
-    margin: 0;
-    position: absolute;
-    width: 48px;
-  }
+    // <input> is also the touch target
+    input {
+      appearance: none;
+      height: 48px;
+      margin: 0;
+      position: absolute;
+      width: 48px;
+    }
 
-  :host([touch-target='none']) input {
-    width: 100%;
-    height: 100%;
-  }
+    :host([touch-target='none']) input {
+      width: 100%;
+      height: 100%;
+    }
 
-  md-ripple {
-    border-radius: 50%;
-    height: var(--_state-layer-size);
-    inset: unset;
-    width: var(--_state-layer-size);
-  }
+    md-ripple {
+      border-radius: 50%;
+      height: var(--_state-layer-size);
+      inset: unset;
+      width: var(--_state-layer-size);
+    }
 
-  .icon {
-    fill: var(--_icon-color);
-    inset: 0;
-    position: absolute;
-  }
+    .icon {
+      fill: var(--_icon-color);
+      inset: 0;
+      position: absolute;
+    }
 
-  .outer.circle {
-    // Outline color enter/exit transition
-    transition: fill 50ms linear;
-  }
+    .outer.circle {
+      // Outline color enter/exit transition
+      transition: fill 50ms linear;
+    }
 
-  .inner.circle {
-    opacity: 0;
-    transform-origin: center;
-    transition: opacity 50ms linear;
-  }
+    .inner.circle {
+      opacity: 0;
+      transform-origin: center;
+      transition: opacity 50ms linear;
+    }
 
-  .checked .icon {
-    fill: var(--_selected-icon-color);
-  }
+    .checked .icon {
+      fill: var(--_selected-icon-color);
+    }
 
-  .checked .inner.circle {
-    animation: inner-circle-grow 300ms
-      map.get($_md-sys-motion, easing-emphasized-decelerate);
-    opacity: 1;
-  }
+    .checked .inner.circle {
+      animation: inner-circle-grow 300ms
+        map.get($_md-sys-motion, easing-emphasized-decelerate);
+      opacity: 1;
+    }
 
-  @keyframes inner-circle-grow {
-    from {
-      transform: scale(0);
+    @keyframes inner-circle-grow {
+      from {
+        transform: scale(0);
+      }
+      to {
+        transform: scale(1);
+      }
     }
-    to {
-      transform: scale(1);
+
+    // Don't animate when disabled
+    :host([disabled]) .circle {
+      animation-duration: 0s;
+      transition-duration: 0s;
     }
-  }
 
-  // Don't animate when disabled
-  :host([disabled]) .circle {
-    animation-duration: 0s;
-    transition-duration: 0s;
-  }
+    :host(:hover) .icon {
+      fill: var(--_hover-icon-color);
+    }
 
-  :host(:hover) .icon {
-    fill: var(--_hover-icon-color);
-  }
+    :host(:focus-within) .icon {
+      fill: var(--_focus-icon-color);
+    }
 
-  :host(:focus-within) .icon {
-    fill: var(--_focus-icon-color);
-  }
+    :host(:active) .icon {
+      fill: var(--_pressed-icon-color);
+    }
 
-  :host(:active) .icon {
-    fill: var(--_pressed-icon-color);
-  }
+    :host([disabled]) .icon {
+      fill: var(--_disabled-unselected-icon-color);
+      opacity: var(--_disabled-unselected-icon-opacity);
+    }
 
-  :host([disabled]) .icon {
-    fill: var(--_disabled-unselected-icon-color);
-    opacity: var(--_disabled-unselected-icon-opacity);
-  }
+    :host(:hover) .checked .icon {
+      fill: var(--_selected-hover-icon-color);
+    }
 
-  :host(:hover) .checked .icon {
-    fill: var(--_selected-hover-icon-color);
-  }
+    :host(:focus-within) .checked .icon {
+      fill: var(--_selected-focus-icon-color);
+    }
 
-  :host(:focus-within) .checked .icon {
-    fill: var(--_selected-focus-icon-color);
-  }
+    :host(:active) .checked .icon {
+      fill: var(--_selected-pressed-icon-color);
+    }
 
-  :host(:active) .checked .icon {
-    fill: var(--_selected-pressed-icon-color);
+    :host([disabled]) .checked .icon {
+      fill: var(--_disabled-selected-icon-color);
+      opacity: var(--_disabled-selected-icon-opacity);
+    }
   }
 
-  :host([disabled]) .checked .icon {
-    fill: var(--_disabled-selected-icon-color);
-    opacity: var(--_disabled-selected-icon-opacity);
+  @layer hcm {
+    @media (forced-colors: active) {
+      .icon {
+        fill: CanvasText;
+      }
+
+      :host([disabled]) .icon {
+        fill: GrayText;
+        opacity: 1;
+      }
+    }
   }
 }
diff --git a/radio/internal/forced-colors-styles.scss b/radio/internal/forced-colors-styles.scss
diff --git a/radio/radio.ts b/radio/radio.ts
@@ -6,7 +6,6 @@
 
 import {customElement} from 'lit/decorators.js';
 
-import {styles as forcedColorsStyles} from './internal/forced-colors-styles.css.js';
 import {Radio} from './internal/radio.js';
 import {styles} from './internal/radio-styles.css.js';
 
@@ -34,5 +33,5 @@ declare global {
  */
 @customElement('md-radio')
 export class MdRadio extends Radio {
-  static override styles = [styles, forcedColorsStyles];
+  static override styles = [styles];
 }
diff --git a/testing/transform-pseudo-classes.ts b/testing/transform-pseudo-classes.ts
@@ -96,7 +96,9 @@ export function transformPseudoClasses(
 function visitRule(
     rule: CSSRule, stylesheet: CSSStyleSheet|CSSGroupingRule, index: number,
     pseudoClasses: string[]) {
-  if (rule instanceof CSSMediaRule || rule instanceof CSSSupportsRule) {
+  // Closure externs don't know about `CSSGroupingRule`, which is why we need to
+  // reference `globalThis` and use quotes to ensure it is not renamed.
+  if (rule instanceof globalThis['CSSGroupingRule']) {
     for (let i = rule.cssRules.length - 1; i >= 0; i--) {
       visitRule(rule.cssRules[i], rule, i, pseudoClasses);
     }