From d7b40fbafd4303495a691db5ffc505f8dd83088e Mon Sep 17 00:00:00 2001 From: Elizabeth Mitchell Date: Fri, 29 Sep 2023 13:11:39 -0700 Subject: [PATCH] chore(radio): simplify hcm styles PiperOrigin-RevId: 569570652 --- radio/internal/_radio.scss | 261 ++++++++++++----------- radio/internal/forced-colors-styles.scss | 29 --- radio/radio.ts | 3 +- testing/transform-pseudo-classes.ts | 4 +- 4 files changed, 142 insertions(+), 155 deletions(-) delete mode 100644 radio/internal/forced-colors-styles.scss diff --git a/radio/internal/_radio.scss b/radio/internal/_radio.scss index ab686554c1..ada6deea9c 100644 --- 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), + ) + ); + } - // is also the touch target - input { - appearance: none; - height: 48px; - margin: 0; - position: absolute; - width: 48px; - } + // 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 deleted file mode 100644 index e316655942..0000000000 --- a/radio/internal/forced-colors-styles.scss +++ /dev/null @@ -1,29 +0,0 @@ -// -// Copyright 2023 Google LLC -// SPDX-License-Identifier: Apache-2.0 -// - -// go/keep-sorted start -@use './radio'; -// go/keep-sorted end - -@media (forced-colors: active) { - :host { - @include radio.theme( - ( - disabled-selected-icon-color: GrayText, - disabled-selected-icon-opacity: 1, - disabled-unselected-icon-color: GrayText, - disabled-unselected-icon-opacity: 1, - selected-icon-color: CanvasText, - selected-hover-icon-color: CanvasText, - selected-focus-icon-color: CanvasText, - selected-pressed-icon-color: CanvasText, - icon-color: CanvasText, - hover-icon-color: CanvasText, - focus-icon-color: CanvasText, - pressed-icon-color: CanvasText, - ) - ); - } -} diff --git a/radio/radio.ts b/radio/radio.ts index 1eabfd3c65..4971ef51e5 100644 --- 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 index 1f2374dbda..1f35e2928a 100644 --- 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); }