fix(all): remove focus state layer tokens

BREAKING CHANGE: Remove any *-focus-state-layer-* custom properties (they don't do anything) PiperOrigin-RevId: 535302944
material-components · May 25, 2023 · 933fc2e · 933fc2e
1 parent b69e242
commit 933fc2e
Show file tree

Hide file tree

Showing 43 changed files with 263 additions and 278 deletions.
diff --git a/button/lib/_shared.scss b/button/lib/_shared.scss
@@ -29,10 +29,8 @@
     @include ripple.theme(
       (
         hover-color: var(--_hover-state-layer-color),
-        focus-color: var(--_focus-state-layer-color),
         pressed-color: var(--_pressed-state-layer-color),
         hover-opacity: var(--_hover-state-layer-opacity),
-        focus-opacity: var(--_focus-state-layer-opacity),
         pressed-opacity: var(--_pressed-state-layer-opacity),
       )
     );

diff --git a/checkbox/lib/_checkbox.scss b/checkbox/lib/_checkbox.scss
@@ -175,8 +175,6 @@ $_checkmark-bottom-left: 7px, -14px;
 
     @include ripple.theme(
       (
-        focus-color: var(--_unselected-focus-state-layer-color),
-        focus-opacity: var(--_unselected-focus-state-layer-opacity),
         hover-color: var(--_unselected-hover-state-layer-color),
         hover-opacity: var(--_unselected-hover-state-layer-opacity),
         pressed-color: var(--_unselected-pressed-state-layer-color),
@@ -188,8 +186,6 @@ $_checkmark-bottom-left: 7px, -14px;
   .selected md-ripple {
     @include ripple.theme(
       (
-        focus-color: var(--_selected-focus-state-layer-color),
-        focus-opacity: var(--_selected-focus-state-layer-opacity),
         hover-color: var(--_selected-hover-state-layer-color),
         hover-opacity: var(--_selected-hover-state-layer-opacity),
         pressed-color: var(--_selected-pressed-state-layer-color),
@@ -201,8 +197,6 @@ $_checkmark-bottom-left: 7px, -14px;
   .error md-ripple {
     @include ripple.theme(
       (
-        focus-color: var(--_error-focus-state-layer-color),
-        focus-opacity: var(--_error-focus-state-layer-opacity),
         hover-color: var(--_error-hover-state-layer-color),
         hover-opacity: var(--_error-hover-state-layer-opacity),
         pressed-color: var(--_error-pressed-state-layer-color),

diff --git a/chips/lib/_selectable.scss b/chips/lib/_selectable.scss
@@ -11,8 +11,6 @@
   .selected {
     @include ripple.theme(
       (
-        focus-color: var(--_selected-focus-state-layer-color),
-        focus-opacity: var(--_selected-focus-state-layer-opacity),
         hover-color: var(--_selected-hover-state-layer-color),
         hover-opacity: var(--_selected-hover-state-layer-opacity),
         pressed-color: var(--_selected-pressed-state-layer-color),

diff --git a/chips/lib/_shared.scss b/chips/lib/_shared.scss
@@ -23,8 +23,6 @@
 
     @include ripple.theme(
       (
-        'focus-color': var(--_focus-state-layer-color),
-        'focus-opacity': var(--_focus-state-layer-opacity),
         'hover-color': var(--_hover-state-layer-color),
         'hover-opacity': var(--_hover-state-layer-opacity),
         'pressed-color': var(--_pressed-state-layer-color),

diff --git a/fab/lib/_fab.scss b/fab/lib/_fab.scss
@@ -117,7 +117,6 @@
         (
           'container-color': var(--_primary-container-color),
           'focus-icon-color': var(--_primary-focus-icon-color),
-          'focus-state-layer-color': var(--_primary-focus-state-layer-color),
           'hover-icon-color': var(--_primary-hover-icon-color),
           'hover-state-layer-color': var(--_primary-hover-state-layer-color),
           'icon-color': var(--_primary-icon-color),
@@ -136,7 +135,6 @@
         (
           'container-color': var(--_secondary-container-color),
           'focus-icon-color': var(--_secondary-focus-icon-color),
-          'focus-state-layer-color': var(--_secondary-focus-state-layer-color),
           'hover-icon-color': var(--_secondary-hover-icon-color),
           'hover-state-layer-color': var(--_secondary-hover-state-layer-color),
           'icon-color': var(--_secondary-icon-color),
@@ -156,7 +154,6 @@
         (
           'container-color': var(--_tertiary-container-color),
           'focus-icon-color': var(--_tertiary-focus-icon-color),
-          'focus-state-layer-color': var(--_tertiary-focus-state-layer-color),
           'hover-icon-color': var(--_tertiary-hover-icon-color),
           'hover-state-layer-color': var(--_tertiary-hover-state-layer-color),
           'icon-color': var(--_tertiary-icon-color),
@@ -206,7 +203,6 @@
   @include ripple.theme(
     (
       hover-color: map.get($colors, hover-state-layer-color),
-      focus-color: map.get($colors, focus-state-layer-color),
       pressed-color: map.get($colors, pressed-state-layer-color),
     )
   );

diff --git a/fab/lib/_shared.scss b/fab/lib/_shared.scss
@@ -21,7 +21,6 @@ $_md-sys-motion: tokens.md-sys-motion-values();
     @include ripple.theme(
       (
         hover-opacity: var(--_hover-state-layer-opacity),
-        focus-opacity: var(--_focus-state-layer-opacity),
         pressed-opacity: var(--_pressed-state-layer-opacity),
       )
     );
@@ -113,7 +112,6 @@ $_md-sys-motion: tokens.md-sys-motion-values();
     @include fab.color(
       (
         'container-color': var(--_container-color),
-        'focus-state-layer-color': var(--_focus-state-layer-color),
         'hover-state-layer-color': var(--_hover-state-layer-color),
         'pressed-state-layer-color': var(--_pressed-state-layer-color),
         'label-text-color': var(--_label-text-color),

diff --git a/iconbutton/lib/_filled-icon-button.scss b/iconbutton/lib/_filled-icon-button.scss
@@ -82,8 +82,6 @@
 
     @include ripple.theme(
       (
-        focus-color: var(--_focus-state-layer-color),
-        focus-opacity: var(--_focus-state-layer-opacity),
         hover-color: var(--_hover-state-layer-color),
         hover-opacity: var(--_hover-state-layer-opacity),
         pressed-color: var(--_pressed-state-layer-color),
@@ -130,7 +128,6 @@
 
     @include ripple.theme(
       (
-        focus-color: var(--_toggle-unselected-focus-state-layer-color),
         hover-color: var(--_toggle-unselected-hover-state-layer-color),
         pressed-color: var(--_toggle-unselected-pressed-state-layer-color),
       )
@@ -160,7 +157,6 @@
 
     @include ripple.theme(
       (
-        focus-color: var(--_toggle-selected-focus-state-layer-color),
         hover-color: var(--_toggle-selected-hover-state-layer-color),
         pressed-color: var(--_toggle-selected-pressed-state-layer-color),
       )

diff --git a/iconbutton/lib/_filled-tonal-icon-button.scss b/iconbutton/lib/_filled-tonal-icon-button.scss
@@ -84,8 +84,6 @@ $_custom-property-prefix: 'filled-tonal-icon-button';
 
     @include ripple.theme(
       (
-        focus-color: var(--_focus-state-layer-color),
-        focus-opacity: var(--_focus-state-layer-opacity),
         hover-color: var(--_hover-state-layer-color),
         hover-opacity: var(--_hover-state-layer-opacity),
         pressed-color: var(--_pressed-state-layer-color),
@@ -132,7 +130,6 @@ $_custom-property-prefix: 'filled-tonal-icon-button';
 
     @include ripple.theme(
       (
-        focus-color: var(--_toggle-unselected-focus-state-layer-color),
         hover-color: var(--_toggle-unselected-hover-state-layer-color),
         pressed-color: var(--_toggle-unselected-pressed-state-layer-color),
       )
@@ -162,7 +159,6 @@ $_custom-property-prefix: 'filled-tonal-icon-button';
 
     @include ripple.theme(
       (
-        focus-color: var(--_toggle-selected-focus-state-layer-color),
         hover-color: var(--_toggle-selected-hover-state-layer-color),
         pressed-color: var(--_toggle-selected-pressed-state-layer-color),
       )

diff --git a/iconbutton/lib/_outlined-icon-button.scss b/iconbutton/lib/_outlined-icon-button.scss
@@ -68,8 +68,6 @@
 
     @include ripple.theme(
       (
-        focus-color: var(--_unselected-focus-state-layer-color),
-        focus-opacity: var(--_focus-state-layer-opacity),
         hover-color: var(--_unselected-hover-state-layer-color),
         hover-opacity: var(--_hover-state-layer-opacity),
         pressed-color: var(--_unselected-pressed-state-layer-color),
@@ -146,8 +144,6 @@
 
     @include ripple.theme(
       (
-        focus-color: var(--_selected-focus-state-layer-color),
-        focus-opacity: var(--_focus-state-layer-opacity),
         hover-color: var(--_selected-hover-state-layer-color),
         hover-opacity: var(--_hover-state-layer-opacity),
         pressed-color: var(--_selected-pressed-state-layer-color),

diff --git a/iconbutton/lib/_standard-icon-button.scss b/iconbutton/lib/_standard-icon-button.scss
@@ -51,8 +51,6 @@
 
     @include ripple.theme(
       (
-        focus-color: var(--_unselected-focus-state-layer-color),
-        focus-opacity: var(--_unselected-focus-state-layer-opacity),
         hover-color: var(--_unselected-hover-state-layer-color),
         hover-opacity: var(--_unselected-hover-state-layer-opacity),
         pressed-color: var(--_unselected-pressed-state-layer-color),
@@ -104,8 +102,6 @@
 
     @include ripple.theme(
       (
-        focus-color: var(--_selected-focus-state-layer-color),
-        focus-opacity: var(--_selected-focus-state-layer-opacity),
         hover-color: var(--_selected-hover-state-layer-color),
         hover-opacity: var(--_selected-hover-state-layer-opacity),
         pressed-color: var(--_selected-pressed-state-layer-color),

diff --git a/list/lib/listitem/_list-item.scss b/list/lib/listitem/_list-item.scss
@@ -56,8 +56,6 @@
         hover-opacity: var(--_list-item-hover-state-layer-opacity),
         pressed-color: var(--_list-item-pressed-state-layer-color),
         pressed-opacity: var(--_list-item-pressed-state-layer-opacity),
-        focus-color: var(--_list-item-focus-state-layer-color),
-        focus-opacity: var(--_list-item-focus-state-layer-opacity),
       )
     );
   }

diff --git a/navigationtab/lib/_navigation-tab.scss b/navigationtab/lib/_navigation-tab.scss
@@ -199,10 +199,8 @@ $_custom-property-prefix: 'navigation-bar';
     @include ripple.theme(
       (
         hover-color: var(--_active-hover-state-layer-color),
-        focus-color: var(--_active-focus-state-layer-color),
         pressed-color: var(--_active-pressed-state-layer-color),
         hover-opacity: var(--_hover-state-layer-opacity),
-        focus-opacity: var(--_focus-state-layer-opacity),
         pressed-opacity: var(--_pressed-state-layer-opacity),
       )
     );
@@ -250,10 +248,8 @@ $_custom-property-prefix: 'navigation-bar';
     @include ripple.theme(
       (
         hover-color: var(--_inactive-hover-state-layer-color),
-        focus-color: var(--_inactive-focus-state-layer-color),
         pressed-color: var(--_inactive-pressed-state-layer-color),
         hover-opacity: var(--_hover-state-layer-opacity),
-        focus-opacity: var(--_focus-state-layer-opacity),
         pressed-opacity: var(--_pressed-state-layer-opacity),
       )
     );

diff --git a/radio/lib/_radio.scss b/radio/lib/_radio.scss
@@ -4,38 +4,42 @@
 //
 
 // go/keep-sorted start
+@use 'sass:list';
 @use 'sass:map';
 // go/keep-sorted end
 // go/keep-sorted start
 @use '../../focus/focus-ring';
 @use '../../motion/animation';
 @use '../../ripple/ripple';
-@use '../../sass/theme';
 @use '../../tokens';
 // go/keep-sorted end
 
 $_md-sys-motion: tokens.md-sys-motion-values();
 
 @mixin theme($tokens) {
-  $tokens: theme.validate-theme(tokens.md-comp-radio-button-values(), $tokens);
-  $tokens: theme.create-theme-vars($tokens, 'radio');
+  $supported-tokens: tokens.$md-comp-radio-button-supported-tokens;
 
-  @include theme.emit-theme-vars($tokens);
+  @each $token, $value in $tokens {
+    @if list.index($supported-tokens, $token) == null {
+      @error 'Token `#{$token}` is not a supported token.';
+    }
+
+    @if $value {
+      --md-radio-#{$token}: #{$value};
+    }
+  }
 }
 
 @mixin styles() {
   $tokens: tokens.md-comp-radio-button-values();
-  $tokens: theme.create-theme-vars($tokens, 'radio');
 
   :host {
     @each $token, $value in $tokens {
-      --_#{$token}: #{$value};
+      --_#{$token}: var(--md-radio-#{$token}, #{$value});
     }
 
     @include ripple.theme(
       (
-        focus-color: var(--_unselected-focus-state-layer-color),
-        focus-opacity: var(--_unselected-focus-state-layer-opacity),
         hover-color: var(--_unselected-hover-state-layer-color),
         hover-opacity: var(--_unselected-hover-state-layer-opacity),
         pressed-color: var(--_unselected-pressed-state-layer-color),
@@ -61,8 +65,6 @@ $_md-sys-motion: tokens.md-sys-motion-values();
   :host([checked]) {
     @include ripple.theme(
       (
-        focus-color: var(--_selected-focus-state-layer-color),
-        focus-opacity: var(--_selected-focus-state-layer-opacity),
         hover-color: var(--_selected-hover-state-layer-color),
         hover-opacity: var(--_selected-hover-state-layer-opacity),
         pressed-color: var(--_selected-pressed-state-layer-color),

diff --git a/ripple/lib/_ripple.scss b/ripple/lib/_ripple.scss
@@ -88,12 +88,6 @@
     opacity: var(--_hover-opacity);
   }
 
-  .focused::before {
-    background-color: var(--_focus-color);
-    opacity: var(--_focus-opacity);
-    transition-duration: 75ms;
-  }
-
   .pressed::after {
     // press ripple fade-in
     opacity: var(--_pressed-opacity);

diff --git a/ripple/lib/ripple.ts b/ripple/lib/ripple.ts
@@ -80,7 +80,6 @@ export class Ripple extends LitElement {
   @property({type: Boolean, reflect: true}) disabled = false;
 
   @state() private hovered = false;
-  @state() private focused = false;
   @state() private pressed = false;
 
   @query('.surface') private readonly mdRoot!: HTMLElement|null;
@@ -113,14 +112,6 @@ export class Ripple extends LitElement {
     }
   }
 
-  handleFocusin() {
-    this.focused = true;
-  }
-
-  handleFocusout() {
-    this.focused = false;
-  }
-
   handlePointerup(event: PointerEvent) {
     if (!this.shouldReactToEvent(event)) {
       return;
@@ -212,7 +203,6 @@ export class Ripple extends LitElement {
   protected override render() {
     const classes = {
       'hovered': this.hovered,
-      'focused': this.focused,
       'pressed': this.pressed,
     };
 
@@ -222,7 +212,6 @@ export class Ripple extends LitElement {
   protected override update(changedProps: PropertyValues<this>) {
     if (changedProps.has('disabled') && this.disabled) {
       this.hovered = false;
-      this.focused = false;
       this.pressed = false;
     }
     super.update(changedProps);

diff --git a/ripple/lib/ripple_test.ts b/ripple/lib/ripple_test.ts
@@ -16,7 +16,6 @@ import {Ripple} from './ripple.js';
 
 enum RippleStateClasses {
   HOVERED = 'hovered',
-  FOCUSED = 'focused',
   PRESSED = 'pressed',
 }
 
@@ -40,9 +39,7 @@ describe('Ripple', () => {
   async function setupTest() {
     const rippleRef = createRef<TestRipple>();
     const root = env.render(html`
-      <div ${ripple(() => rippleRef.value || null)}
-          @focusin=${() => rippleRef.value?.handleFocusin()}
-          @focusout=${() => rippleRef.value?.handleFocusout()}>
+      <div ${ripple(() => rippleRef.value || null)}>
         <test-ripple ${ref(rippleRef)}></test-ripple>
       </div>
     `);
@@ -98,23 +95,6 @@ describe('Ripple', () => {
       expect(surface).not.toHaveClass(RippleStateClasses.PRESSED);
     });
 
-    it('sets focused class on focus', async () => {
-      const {harness, surface} = await setupTest();
-      await harness.focusWithKeyboard();
-      await env.waitForStability();
-
-      expect(surface).toHaveClass(RippleStateClasses.FOCUSED);
-    });
-
-    it('removes focused class on blur', async () => {
-      const {harness, surface} = await setupTest();
-      await harness.focusWithKeyboard();
-      await harness.blur();
-      await env.waitForStability();
-
-      expect(surface).not.toHaveClass(RippleStateClasses.FOCUSED);
-    });
-
     it('sets hover class on pointer enter', async () => {
       const {harness, surface} = await setupTest();
       await harness.startHover();
@@ -142,6 +122,7 @@ describe('Ripple', () => {
 
       expect(surface).not.toHaveClass(RippleStateClasses.HOVERED);
     });
+
     it('responds to keyboard click after mouse click', async () => {
       const {instance, harness} = await setupTest();
       const STATE_INACTIVE = 0;