[Button] Updated expressive styles color and structure.

PiperOrigin-RevId: 658586627
material-components · Aug 5, 2024 · 75ff33f · 75ff33f
1 parent d3f2ca8
commit 75ff33f
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 10 deletions.
diff --git a/...a/com/google/android/material/button/res/animator/m3_btn_elevated_btn_state_list_anim.xml b/...a/com/google/android/material/button/res/animator/m3_btn_elevated_btn_state_list_anim.xml
@@ -22,6 +22,7 @@
         android:state_enabled="true"
         android:state_hovered="true">
       <set>
+        <!-- TODO(b/356201474) change valueTo to m3_btn_elevated_translation_z_hovered. -->
         <objectAnimator
             android:duration="@integer/m3_btn_anim_duration_ms"
             android:propertyName="translationZ"

diff --git a/lib/java/com/google/android/material/button/res/values/dimens.xml b/lib/java/com/google/android/material/button/res/values/dimens.xml
@@ -85,6 +85,7 @@
 
   <dimen name="m3_btn_translation_z_base">0dp</dimen>
   <dimen name="m3_btn_translation_z_hovered">1dp</dimen>
+  <dimen name="m3_btn_elevated_translation_z_hovered">2dp</dimen>
   <dimen name="m3_btn_disabled_translation_z">0dp</dimen>
   <dimen name="m3_btn_disabled_elevation">0dp</dimen>
 

diff --git a/lib/java/com/google/android/material/button/res/values/styles.xml b/lib/java/com/google/android/material/button/res/values/styles.xml
@@ -162,7 +162,6 @@
 
   <!-- M3 filled tonal button style. -->
   <style name="Widget.Material3.Button.TonalButton">
-    <item name="rippleColor">@color/m3_tonal_button_ripple_color_selector</item>
     <item name="materialThemeOverlay">@style/ThemeOverlay.Material3.Button.TonalButton</item>
   </style>
 
@@ -301,13 +300,21 @@
   <style name="ThemeOverlay.Material3.Button" parent="">
     <!-- The colors used by the color selectors -->
     <item name="colorOnContainer">@macro/m3_comp_filled_button_label_text_color</item>
+    <item name="colorOnContainerChecked">@macro/m3_comp_filled_button_label_text_color</item>
+    <item name="colorOnContainerUnchecked">@macro/m3_comp_filled_button_label_text_color</item>
     <item name="colorContainer">@macro/m3_comp_filled_button_container_color</item>
+    <item name="colorContainerChecked">@macro/m3_comp_filled_button_container_color</item>
+    <item name="colorContainerUnchecked">@macro/m3_comp_filled_button_container_color</item>
   </style>
 
   <style name="ThemeOverlay.Material3.Button.TonalButton">
     <!-- The colors used by the color selectors -->
     <item name="colorOnContainer">@macro/m3_comp_filled_tonal_button_label_text_color</item>
+    <item name="colorOnContainerChecked">@macro/m3_comp_filled_tonal_button_label_text_color</item>
+    <item name="colorOnContainerUnchecked">@macro/m3_comp_filled_tonal_button_label_text_color</item>
     <item name="colorContainer">@macro/m3_comp_filled_tonal_button_container_color</item>
+    <item name="colorContainerChecked">@macro/m3_comp_filled_tonal_button_container_color</item>
+    <item name="colorContainerUnchecked">@macro/m3_comp_filled_tonal_button_container_color</item>
   </style>
 
   <style name="ThemeOverlay.Material3.Button.TextButton" parent="">
@@ -324,6 +331,8 @@
   <style name="ThemeOverlay.Material3.Button.ElevatedButton" parent="ThemeOverlay.Material3.Button.TextButton">
     <!-- The colors used by the color selectors -->
     <item name="colorContainer">@macro/m3_comp_elevated_button_container_color</item>
+    <item name="colorContainerChecked">@macro/m3_comp_elevated_button_container_color</item>
+    <item name="colorContainerUnchecked">@macro/m3_comp_elevated_button_container_color</item>
   </style>
 
   <style name="ThemeOverlay.Material3.Button.IconButton" parent="ThemeOverlay.Material3.Button.TextButton">

diff --git a/lib/java/com/google/android/material/color/res/color/m3_button_background_color_selector.xml b/lib/java/com/google/android/material/color/res/color/m3_button_background_color_selector.xml
@@ -15,6 +15,9 @@
   ~ limitations under the License.
 -->
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
-  <item android:color="?attr/colorContainer" android:state_enabled="true"/>
-  <item android:alpha="@dimen/material_emphasis_disabled_background" android:color="?attr/colorOnSurface"/>
+  <item android:state_enabled="false"
+    android:alpha="@dimen/material_emphasis_disabled_background" android:color="?attr/colorOnSurface"/>
+  <item android:state_checked="true" android:color="?attr/colorContainerChecked"/>
+  <item android:state_checkable="true" android:color="?attr/colorContainerUnchecked"/>
+  <item android:color="?attr/colorContainer" />
 </selector>
diff --git a/lib/java/com/google/android/material/color/res/color/m3_button_foreground_color_selector.xml b/lib/java/com/google/android/material/color/res/color/m3_button_foreground_color_selector.xml
@@ -15,6 +15,11 @@
   ~ limitations under the License.
 -->
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
-  <item android:color="?attr/colorOnContainer" android:state_enabled="true"/>
-  <item android:alpha="@dimen/material_emphasis_disabled" android:color="?attr/colorOnSurface"/>
+  <item android:state_enabled="false"
+    android:alpha="@dimen/material_emphasis_disabled" android:color="?attr/colorOnSurface"/>
+  <item android:state_checkable="true" android:state_checked="true"
+    android:color="?attr/colorOnContainerChecked"/>
+  <item android:state_checkable="true"
+    android:color="?attr/colorOnContainerUnchecked"/>
+  <item android:color="?attr/colorOnContainer"/>
 </selector>
diff --git a/lib/java/com/google/android/material/color/res/color/m3_button_ripple_color_selector.xml b/lib/java/com/google/android/material/color/res/color/m3_button_ripple_color_selector.xml
@@ -15,8 +15,33 @@
   ~ limitations under the License.
 -->
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
-  <item android:alpha="@dimen/m3_ripple_pressed_alpha" android:color="?attr/colorOnContainer" android:state_pressed="true"/>
-  <item android:alpha="@dimen/m3_ripple_focused_alpha" android:color="?attr/colorOnContainer" android:state_focused="true"/>
-  <item android:alpha="@dimen/m3_ripple_hovered_alpha" android:color="?attr/colorOnContainer" android:state_hovered="true"/>
-  <item android:alpha="@dimen/m3_ripple_default_alpha" android:color="?attr/colorOnContainer"/>
+  <!-- Uncheckable -->
+  <item android:state_checkable="false" android:state_pressed="true"
+    android:alpha="@dimen/m3_ripple_pressed_alpha" android:color="?attr/colorOnContainer"/>
+  <item android:state_checkable="false" android:state_focused="true"
+    android:alpha="@dimen/m3_ripple_focused_alpha" android:color="?attr/colorOnContainer"/>
+  <item android:state_checkable="false" android:state_hovered="true"
+    android:alpha="@dimen/m3_ripple_hovered_alpha" android:color="?attr/colorOnContainer"/>
+  <item android:state_checkable="false"
+    android:alpha="@dimen/m3_ripple_default_alpha" android:color="?attr/colorOnContainer"/>
+
+  <!-- Checkable, checked -->
+  <item android:state_pressed="true" android:state_checked="true"
+    android:alpha="@dimen/m3_ripple_pressed_alpha" android:color="?attr/colorOnContainerChecked"/>
+  <item android:state_focused="true" android:state_checked="true"
+    android:alpha="@dimen/m3_ripple_focused_alpha" android:color="?attr/colorOnContainerChecked"/>
+  <item android:state_hovered="true" android:state_checked="true"
+    android:alpha="@dimen/m3_ripple_hovered_alpha" android:color="?attr/colorOnContainerChecked"/>
+  <item android:state_checked="true"
+    android:alpha="@dimen/m3_ripple_default_alpha" android:color="?attr/colorOnContainerChecked"/>
+
+  <!-- Checkable, unchecked -->
+  <item android:state_pressed="true"
+    android:alpha="@dimen/m3_ripple_pressed_alpha" android:color="?attr/colorOnContainerUnchecked"/>
+  <item android:state_focused="true"
+    android:alpha="@dimen/m3_ripple_focused_alpha" android:color="?attr/colorOnContainerUnchecked"/>
+  <item android:state_hovered="true"
+    android:alpha="@dimen/m3_ripple_hovered_alpha" android:color="?attr/colorOnContainerUnchecked"/>
+  <item
+    android:alpha="@dimen/m3_ripple_default_alpha" android:color="?attr/colorOnContainerUnchecked"/>
 </selector>
diff --git a/lib/java/com/google/android/material/color/res/values/attrs.xml b/lib/java/com/google/android/material/color/res/values/attrs.xml
@@ -135,12 +135,21 @@
   <!-- These container colors are only meant to be used in component-level
        styles and resources as a means of indirection. They enable remapping
        to other attrs like primary, secondary, surface, etc. -->
-  <!-- Container background color. -->
+  <!-- Color to use for background container. -->
   <attr name="colorContainer" format="color"/>
 
+  <!-- Color to use for checkable background container in checked state. -->
+  <attr name="colorContainerChecked" format="color"/>
+
+  <!-- Color to use for checkable background container in unchecked state. -->
+  <attr name="colorContainerUnchecked" format="color"/>
+
   <!-- Color to use for foreground elements on top of colorContainer. -->
   <attr name="colorOnContainer" format="color"/>
 
+  <!-- Color to use for checkable foreground elements in checked state on top of colorContainer. -->
+  <attr name="colorOnContainerChecked" format="color"/>
+
   <!-- Color to use for checkable foreground elements in unchecked state on top of colorContainer. -->
   <attr name="colorOnContainerUnchecked" format="color"/>