fix(radio)!: remove "unselected" prefix from tokens

BREAKING CHANGE: Rename `--md-radio-unselected-<token>` to `--md-radio-<token>` PiperOrigin-RevId: 550907524
material-components · Jul 25, 2023 · fb1c603 · fb1c603
1 parent f7b3ef7
commit fb1c603
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 21 deletions.
diff --git a/radio/internal/_radio.scss b/radio/internal/_radio.scss
@@ -40,10 +40,10 @@ $_md-sys-motion: tokens.md-sys-motion-values();
 
     @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),
       )
     );
 
@@ -94,7 +94,7 @@ $_md-sys-motion: tokens.md-sys-motion-values();
   }
 
   .icon {
-    fill: var(--_unselected-icon-color);
+    fill: var(--_icon-color);
     height: var(--_icon-size);
     width: var(--_icon-size);
   }
@@ -136,15 +136,15 @@ $_md-sys-motion: tokens.md-sys-motion-values();
   }
 
   :host(:hover) .icon {
-    fill: var(--_unselected-hover-icon-color);
+    fill: var(--_hover-icon-color);
   }
 
   :host(:focus-within) .icon {
-    fill: var(--_unselected-focus-icon-color);
+    fill: var(--_focus-icon-color);
   }
 
   :host(:active) .icon {
-    fill: var(--_unselected-pressed-icon-color);
+    fill: var(--_pressed-icon-color);
   }
 
   :host([disabled]) .icon {

diff --git a/radio/internal/forced-colors-styles.scss b/radio/internal/forced-colors-styles.scss
@@ -19,10 +19,10 @@
         selected-hover-icon-color: CanvasText,
         selected-focus-icon-color: CanvasText,
         selected-pressed-icon-color: CanvasText,
-        unselected-icon-color: CanvasText,
-        unselected-hover-icon-color: CanvasText,
-        unselected-focus-icon-color: CanvasText,
-        unselected-pressed-icon-color: CanvasText,
+        icon-color: CanvasText,
+        hover-icon-color: CanvasText,
+        focus-icon-color: CanvasText,
+        pressed-icon-color: CanvasText,
       )
     );
   }

diff --git a/tokens/_md-comp-radio-button.scss b/tokens/_md-comp-radio-button.scss
@@ -16,7 +16,15 @@ $supported-tokens: (
   'disabled-selected-icon-opacity',
   'disabled-unselected-icon-color',
   'disabled-unselected-icon-opacity',
+  'focus-icon-color',
+  'hover-icon-color',
+  'hover-state-layer-color',
+  'hover-state-layer-opacity',
+  'icon-color',
   'icon-size',
+  'pressed-icon-color',
+  'pressed-state-layer-color',
+  'pressed-state-layer-opacity',
   'selected-focus-icon-color',
   'selected-hover-icon-color',
   'selected-hover-state-layer-color',
@@ -26,14 +34,6 @@ $supported-tokens: (
   'selected-pressed-state-layer-color',
   'selected-pressed-state-layer-opacity',
   'state-layer-size',
-  'unselected-focus-icon-color',
-  'unselected-hover-icon-color',
-  'unselected-hover-state-layer-color',
-  'unselected-hover-state-layer-opacity',
-  'unselected-icon-color',
-  'unselected-pressed-icon-color',
-  'unselected-pressed-state-layer-color',
-  'unselected-pressed-state-layer-opacity',
   // go/keep-sorted end
 );
 
@@ -55,7 +55,18 @@ $_default: (
   $tokens: values.validate(
     md-comp-radio-button.values($deps, $exclude-hardcoded-values),
     $supported-tokens: $supported-tokens,
-    $unsupported-tokens: $unsupported-tokens
+    $unsupported-tokens: $unsupported-tokens,
+    $renamed-tokens: (
+      // Remove default "unselected" prefix (b/292244480)
+      'unselected-focus-icon-color': 'focus-icon-color',
+      'unselected-hover-icon-color': 'hover-icon-color',
+      'unselected-hover-state-layer-color': 'hover-state-layer-color',
+      'unselected-hover-state-layer-opacity': 'hover-state-layer-opacity',
+      'unselected-icon-color': 'icon-color',
+      'unselected-pressed-icon-color': 'pressed-icon-color',
+      'unselected-pressed-state-layer-color': 'pressed-state-layer-color',
+      'unselected-pressed-state-layer-opacity': 'pressed-state-layer-opacity'
+    )
   );
 
   @return $tokens;