fix(iconbutton)!: remove unselected token prefix

BREAKING CHANGE: Remove "unselected" from `--md-*-icon-button-*` custom properties. PiperOrigin-RevId: 552836196
material-components · Aug 1, 2023 · 0a63c26 · 0a63c26
1 parent fa103cb
commit 0a63c26
Show file tree

Hide file tree

Showing 9 changed files with 147 additions and 86 deletions.
diff --git a/docs/components/icon-button.md b/docs/components/icon-button.md
@@ -285,11 +285,11 @@ terms of color, and shape.
 
 ### Icon Button tokens
 
-Token                                    | Default value
----------------------------------------- | -----------------------------------
-`--md-icon-button-unselected-icon-color` | `--md-sys-color-on-surface-variant`
-`--md-icon-button-state-layer-shape`     | `9999px`
-`--md-icon-button-icon-size`             | `24px`
+Token                                | Default value
+------------------------------------ | -----------------------------------
+`--md-icon-button-icon-color`        | `--md-sys-color-on-surface-variant`
+`--md-icon-button-state-layer-shape` | `9999px`
+`--md-icon-button-icon-size`         | `24px`
 
 *   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-icon-button.scss)
     <!-- {.external} -->
@@ -387,13 +387,13 @@ Token                                                    | Default value
 
 ### Outlined Icon Button tokens
 
-Token                                                | Default value
----------------------------------------------------- | ------------------------
-`--md-outlined-icon-button-unselected-outline-color` | `--md-sys-color-outline`
-`--md-outlined-icon-button-unselected-outline-width` | `1px`
-`--md-outlined-icon-button-container-shape`          | `9999px`
-`--md-outlined-icon-button-container-size`           | `40px`
-`--md-outlined-icon-button-icon-size`                | `24px`
+Token                                       | Default value
+------------------------------------------- | ------------------------
+`--md-outlined-icon-button-outline-color`   | `--md-sys-color-outline`
+`--md-outlined-icon-button-outline-width`   | `1px`
+`--md-outlined-icon-button-container-shape` | `9999px`
+`--md-outlined-icon-button-container-size`  | `40px`
+`--md-outlined-icon-button-icon-size`       | `24px`
 
 ### Outlined Icon Button example
 
@@ -410,7 +410,7 @@ Token                                                | Default value
   --md-outlined-icon-button-container-size: 80px;
   --md-outlined-icon-button-container-shape: 0px;
   --md-outlined-icon-button-icon-size: 40px;
-  --md-outlined-icon-button-unselected-outline-width: 4px;
+  --md-outlined-icon-button-outline-width: 4px;
   --md-sys-color-outline: #006A6A;
 }
 </style>

diff --git a/iconbutton/internal/_filled-icon-button.scss b/iconbutton/internal/_filled-icon-button.scss
@@ -111,30 +111,32 @@
 
   .toggle-filled {
     &:not(:disabled) {
-      color: var(--_toggle-unselected-icon-color);
+      color: var(--_toggle-icon-color);
 
       &:hover {
-        color: var(--_toggle-unselected-hover-icon-color);
+        color: var(--_toggle-hover-icon-color);
       }
 
       &:focus {
-        color: var(--_toggle-unselected-focus-icon-color);
+        color: var(--_toggle-focus-icon-color);
       }
 
       &:active {
-        color: var(--_toggle-unselected-pressed-icon-color);
+        color: var(--_toggle-pressed-icon-color);
       }
     }
 
     @include ripple.theme(
       (
-        hover-color: var(--_toggle-unselected-hover-state-layer-color),
-        pressed-color: var(--_toggle-unselected-pressed-state-layer-color),
+        hover-color: var(--_toggle-hover-state-layer-color),
+        pressed-color: var(--_toggle-pressed-state-layer-color),
       )
     );
   }
 
   .toggle-filled:not(:disabled)::before {
+    // Note: filled icon buttons have three container colors,
+    // "container-color" for regular, then selected/unselected for toggle.
     background-color: var(--_unselected-container-color);
   }
 

diff --git a/iconbutton/internal/_filled-tonal-icon-button.scss b/iconbutton/internal/_filled-tonal-icon-button.scss
@@ -113,30 +113,32 @@ $_custom-property-prefix: 'filled-tonal-icon-button';
 
   .toggle-filled-tonal {
     &:not(:disabled) {
-      color: var(--_toggle-unselected-icon-color);
+      color: var(--_toggle-icon-color);
 
       &:hover {
-        color: var(--_toggle-unselected-hover-icon-color);
+        color: var(--_toggle-hover-icon-color);
       }
 
       &:focus {
-        color: var(--_toggle-unselected-focus-icon-color);
+        color: var(--_toggle-focus-icon-color);
       }
 
       &:active {
-        color: var(--_toggle-unselected-pressed-icon-color);
+        color: var(--_toggle-pressed-icon-color);
       }
     }
 
     @include ripple.theme(
       (
-        hover-color: var(--_toggle-unselected-hover-state-layer-color),
-        pressed-color: var(--_toggle-unselected-pressed-state-layer-color),
+        hover-color: var(--_toggle-hover-state-layer-color),
+        pressed-color: var(--_toggle-pressed-state-layer-color),
       )
     );
   }
 
   .toggle-filled-tonal:not(:disabled)::before {
+    // Note: filled tonal icon buttons have three container colors,
+    // "container-color" for regular, then selected/unselected for toggle.
     background-color: var(--_unselected-container-color);
   }
 

diff --git a/iconbutton/internal/_icon-button.scss b/iconbutton/internal/_icon-button.scss
@@ -52,27 +52,27 @@
 
   .standard {
     background-color: transparent;
-    color: var(--_unselected-icon-color);
+    color: var(--_icon-color);
 
     @include ripple.theme(
       (
-        hover-color: var(--_unselected-hover-state-layer-color),
-        hover-opacity: var(--_unselected-hover-state-layer-opacity),
-        pressed-color: var(--_unselected-pressed-state-layer-color),
-        pressed-opacity: var(--_unselected-pressed-state-layer-opacity),
+        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),
       )
     );
 
     &:hover {
-      color: var(--_unselected-hover-icon-color);
+      color: var(--_hover-icon-color);
     }
 
     &:focus {
-      color: var(--_unselected-focus-icon-color);
+      color: var(--_focus-icon-color);
     }
 
     &:active {
-      color: var(--_unselected-pressed-icon-color);
+      color: var(--_pressed-icon-color);
     }
 
     &:disabled {

diff --git a/iconbutton/internal/_outlined-icon-button.scss b/iconbutton/internal/_outlined-icon-button.scss
@@ -64,40 +64,40 @@
 
   .outlined {
     background-color: transparent;
-    color: var(--_unselected-icon-color);
+    color: var(--_icon-color);
 
     @include ripple.theme(
       (
-        hover-color: var(--_unselected-hover-state-layer-color),
+        hover-color: var(--_hover-state-layer-color),
         hover-opacity: var(--_hover-state-layer-opacity),
-        pressed-color: var(--_unselected-pressed-state-layer-color),
+        pressed-color: var(--_pressed-state-layer-color),
         pressed-opacity: var(--_pressed-state-layer-opacity),
       )
     );
 
     &::before {
-      border-color: var(--_unselected-outline-color);
-      border-width: var(--_unselected-outline-width);
+      border-color: var(--_outline-color);
+      border-width: var(--_outline-width);
     }
 
     &:hover {
-      color: var(--_unselected-hover-icon-color);
+      color: var(--_hover-icon-color);
     }
 
     &:focus {
-      color: var(--_unselected-focus-icon-color);
+      color: var(--_focus-icon-color);
     }
 
     &:active {
-      color: var(--_unselected-pressed-icon-color);
+      color: var(--_pressed-icon-color);
     }
 
     &:disabled {
       color: var(--_disabled-icon-color);
 
       &::before {
-        border-color: var(--_disabled-unselected-outline-color);
-        opacity: var(--_disabled-unselected-outline-opacity);
+        border-color: var(--_disabled-outline-color);
+        opacity: var(--_disabled-outline-opacity);
       }
     }
   }
@@ -165,13 +165,13 @@
     // Selected button in HCM has an outline.
     .selected {
       &::before {
-        border-color: var(--_unselected-outline-color);
-        border-width: var(--_unselected-outline-width);
+        border-color: var(--_outline-color);
+        border-width: var(--_outline-width);
       }
 
       &:disabled::before {
-        border-color: var(--_disabled-unselected-outline-color);
-        opacity: var(--_disabled-unselected-outline-opacity);
+        border-color: var(--_disabled-outline-color);
+        opacity: var(--_disabled-outline-opacity);
       }
     }
   }

diff --git a/tokens/_md-comp-filled-icon-button.scss b/tokens/_md-comp-filled-icon-button.scss
@@ -30,18 +30,20 @@ $supported-tokens: (
   'pressed-state-layer-color',
   'pressed-state-layer-opacity',
   'selected-container-color',
+  'toggle-focus-icon-color',
+  'toggle-hover-icon-color',
+  'toggle-hover-state-layer-color',
+  'toggle-icon-color',
+  'toggle-pressed-icon-color',
+  'toggle-pressed-state-layer-color',
   'toggle-selected-focus-icon-color',
   'toggle-selected-hover-icon-color',
   'toggle-selected-hover-state-layer-color',
   'toggle-selected-icon-color',
   'toggle-selected-pressed-icon-color',
   'toggle-selected-pressed-state-layer-color',
-  'toggle-unselected-focus-icon-color',
-  'toggle-unselected-hover-icon-color',
-  'toggle-unselected-hover-state-layer-color',
-  'toggle-unselected-icon-color',
-  'toggle-unselected-pressed-icon-color',
-  'toggle-unselected-pressed-state-layer-color',
+  // Note: filled icon buttons have three container colors,
+  // "container-color" for regular, then selected/unselected for toggle.
   'unselected-container-color',
   // go/keep-sorted end
 );
@@ -50,8 +52,8 @@ $unsupported-tokens: (
   // go/keep-sorted start
   'focus-state-layer-color',
   'focus-state-layer-opacity',
+  'toggle-focus-state-layer-color',
   'toggle-selected-focus-state-layer-color',
-  'toggle-unselected-focus-state-layer-color',
   // go/keep-sorted end
 );
 
@@ -65,7 +67,20 @@ $_default: (
   $tokens: values.validate(
     md-comp-filled-icon-button.values($deps, $exclude-hardcoded-values),
     $supported-tokens: $supported-tokens,
-    $unsupported-tokens: $unsupported-tokens
+    $unsupported-tokens: $unsupported-tokens,
+    $renamed-tokens: (
+      // TODO(b/292244480): remove default unselected prefix
+      'toggle-unselected-focus-icon-color': 'toggle-focus-icon-color',
+      'toggle-unselected-hover-icon-color': 'toggle-hover-icon-color',
+      'toggle-unselected-hover-state-layer-color':
+        'toggle-hover-state-layer-color',
+      'toggle-unselected-icon-color': 'toggle-icon-color',
+      'toggle-unselected-pressed-icon-color': 'toggle-pressed-icon-color',
+      'toggle-unselected-pressed-state-layer-color':
+        'toggle-pressed-state-layer-color',
+      'toggle-unselected-focus-state-layer-color':
+        'toggle-focus-state-layer-color'
+    )
   );
 
   @return $tokens;

diff --git a/tokens/_md-comp-filled-tonal-icon-button.scss b/tokens/_md-comp-filled-tonal-icon-button.scss
@@ -30,18 +30,20 @@ $supported-tokens: (
   'pressed-state-layer-color',
   'pressed-state-layer-opacity',
   'selected-container-color',
+  'toggle-focus-icon-color',
+  'toggle-hover-icon-color',
+  'toggle-hover-state-layer-color',
+  'toggle-icon-color',
+  'toggle-pressed-icon-color',
+  'toggle-pressed-state-layer-color',
   'toggle-selected-focus-icon-color',
   'toggle-selected-hover-icon-color',
   'toggle-selected-hover-state-layer-color',
   'toggle-selected-icon-color',
   'toggle-selected-pressed-icon-color',
   'toggle-selected-pressed-state-layer-color',
-  'toggle-unselected-focus-icon-color',
-  'toggle-unselected-hover-icon-color',
-  'toggle-unselected-hover-state-layer-color',
-  'toggle-unselected-icon-color',
-  'toggle-unselected-pressed-icon-color',
-  'toggle-unselected-pressed-state-layer-color',
+  // Note: filled icon buttons have three container colors,
+  // "container-color" for regular, then selected/unselected for toggle.
   'unselected-container-color',
   // go/keep-sorted end
 );
@@ -50,8 +52,8 @@ $unsupported-tokens: (
   // go/keep-sorted start
   'focus-state-layer-color',
   'focus-state-layer-opacity',
+  'toggle-focus-state-layer-color',
   'toggle-selected-focus-state-layer-color',
-  'toggle-unselected-focus-state-layer-color',
   // go/keep-sorted end
 );
 
@@ -65,7 +67,20 @@ $_default: (
   $tokens: values.validate(
     md-comp-filled-tonal-icon-button.values($deps, $exclude-hardcoded-values),
     $supported-tokens: $supported-tokens,
-    $unsupported-tokens: $unsupported-tokens
+    $unsupported-tokens: $unsupported-tokens,
+    $renamed-tokens: (
+      // TODO(b/292244480): remove default unselected prefix
+      'toggle-unselected-focus-icon-color': 'toggle-focus-icon-color',
+      'toggle-unselected-hover-icon-color': 'toggle-hover-icon-color',
+      'toggle-unselected-hover-state-layer-color':
+        'toggle-hover-state-layer-color',
+      'toggle-unselected-icon-color': 'toggle-icon-color',
+      'toggle-unselected-pressed-icon-color': 'toggle-pressed-icon-color',
+      'toggle-unselected-pressed-state-layer-color':
+        'toggle-pressed-state-layer-color',
+      'toggle-unselected-focus-state-layer-color':
+        'toggle-focus-state-layer-color'
+    )
   );
 
   @return $tokens;