[Button] Integrated new tokens.

PiperOrigin-RevId: 669112326
material-components · Aug 30, 2024 · 7bccdc2 · 7bccdc2
1 parent 9188b8f
commit 7bccdc2
Show file tree

Hide file tree

Showing 6 changed files with 80 additions and 94 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
@@ -31,7 +31,7 @@
         <objectAnimator
             android:duration="0"
             android:propertyName="elevation"
-            android:valueTo="@dimen/m3_btn_elevated_btn_elevation"
+            android:valueTo="@dimen/m3_comp_button_elevated_container_elevation"
             android:valueType="floatType"/>
       </set>
     </item>
@@ -48,7 +48,7 @@
         <objectAnimator
             android:duration="0"
             android:propertyName="elevation"
-            android:valueTo="@dimen/m3_btn_elevated_btn_elevation"
+            android:valueTo="@dimen/m3_comp_button_elevated_container_elevation"
             android:valueType="floatType"/>
       </set>
     </item>
@@ -64,7 +64,7 @@
         <objectAnimator
             android:duration="0"
             android:propertyName="elevation"
-            android:valueTo="@dimen/m3_btn_disabled_elevation"
+            android:valueTo="@dimen/m3_comp_button_elevated_disabled_container_elevation"
             android:valueType="floatType"/>
       </set>
     </item>

diff --git a/lib/java/com/google/android/material/button/res/animator/m3_btn_state_list_anim.xml b/lib/java/com/google/android/material/button/res/animator/m3_btn_state_list_anim.xml
@@ -30,7 +30,7 @@
         <objectAnimator
             android:duration="0"
             android:propertyName="elevation"
-            android:valueTo="@dimen/m3_btn_elevation"
+            android:valueTo="@dimen/m3_comp_button_filled_container_elevation"
             android:valueType="floatType"/>
       </set>
     </item>
@@ -47,7 +47,7 @@
         <objectAnimator
             android:duration="0"
             android:propertyName="elevation"
-            android:valueTo="@dimen/m3_btn_elevation"
+            android:valueTo="@dimen/m3_comp_button_filled_container_elevation"
             android:valueType="floatType"/>
       </set>
     </item>
@@ -63,7 +63,7 @@
         <objectAnimator
             android:duration="0"
             android:propertyName="elevation"
-            android:valueTo="@dimen/m3_btn_disabled_elevation"
+            android:valueTo="@dimen/m3_comp_button_filled_disabled_container_elevation"
             android:valueType="floatType"/>
       </set>
     </item>

diff --git a/...ava/com/google/android/material/button/res/color/m3_text_button_ripple_color_selector.xml b/...ava/com/google/android/material/button/res/color/m3_text_button_ripple_color_selector.xml
@@ -16,15 +16,15 @@
 -->
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
   <!-- Uncheckable -->
-  <item android:alpha="@dimen/m3_comp_text_button_pressed_state_layer_opacity"
+  <item android:alpha="@dimen/m3_comp_button_text_pressed_state_layer_opacity"
         android:color="?attr/colorOnContainer"
         android:state_checkable="false"
         android:state_pressed="true" />
-  <item android:alpha="@dimen/m3_comp_text_button_focus_state_layer_opacity"
+  <item android:alpha="@dimen/m3_comp_button_text_focused_state_layer_opacity"
         android:color="?attr/colorOnContainer"
         android:state_checkable="false"
         android:state_focused="true" />
-  <item android:alpha="@dimen/m3_comp_text_button_hover_state_layer_opacity"
+  <item android:alpha="@dimen/m3_comp_button_text_hovered_state_layer_opacity"
         android:color="?attr/colorOnContainer"
         android:state_checkable="false"
         android:state_hovered="true" />
@@ -36,15 +36,15 @@
   <!-- The ripple color matches the color of the text / iconography on the element it's applied to.
        If the text / iconography changes color during a state change, the ripple color matches the end state's color.
        Pressing on a checked button will return it to the unchecked state at which point the text -->
-  <item android:alpha="@dimen/m3_comp_text_button_pressed_state_layer_opacity"
+  <item android:alpha="@dimen/m3_comp_button_text_pressed_state_layer_opacity"
         android:color="?attr/colorOnSurface"
         android:state_checked="true"
         android:state_pressed="true" />
-  <item android:alpha="@dimen/m3_comp_text_button_focus_state_layer_opacity"
+  <item android:alpha="@dimen/m3_comp_button_text_focused_state_layer_opacity"
         android:color="?attr/colorOnSecondaryContainer"
         android:state_checked="true"
         android:state_focused="true" />
-  <item android:alpha="@dimen/m3_comp_text_button_hover_state_layer_opacity"
+  <item android:alpha="@dimen/m3_comp_button_text_hovered_state_layer_opacity"
         android:color="?attr/colorOnSecondaryContainer"
         android:state_checked="true"
         android:state_hovered="true" />
@@ -56,13 +56,13 @@
   <!-- Pressing on an unchecked, checkable chip will check it at which point the text / iconography
        will use "colorOnSecondaryContainer". Therefore, the ripple color for the pressed, checkable state is
        based on "colorOnSecondaryContainer". -->
-  <item android:alpha="@dimen/m3_comp_text_button_pressed_state_layer_opacity"
+  <item android:alpha="@dimen/m3_comp_button_text_pressed_state_layer_opacity"
         android:color="?attr/colorOnSecondaryContainer"
         android:state_pressed="true" />
-  <item android:alpha="@dimen/m3_comp_text_button_focus_state_layer_opacity"
+  <item android:alpha="@dimen/m3_comp_button_text_focused_state_layer_opacity"
         android:color="?attr/colorOnSurface"
         android:state_focused="true" />
-  <item android:alpha="@dimen/m3_comp_text_button_hover_state_layer_opacity"
+  <item android:alpha="@dimen/m3_comp_button_text_hovered_state_layer_opacity"
         android:color="?attr/colorOnSurface"
         android:state_hovered="true" />
   <item android:alpha="@dimen/m3_ripple_default_alpha"

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
@@ -68,7 +68,6 @@
   <!-- LINT.ThenChange(../../../dialog/res/values/dimens.xml) -->
 
   <dimen name="m3_btn_elevation">0dp</dimen>
-  <dimen name="m3_btn_elevated_btn_elevation">@dimen/m3_comp_elevated_button_container_elevation</dimen>
   <dimen name="m3_btn_icon_btn_padding_left">16dp</dimen>
   <dimen name="m3_btn_icon_btn_padding_right">24dp</dimen>
   <dimen name="m3_btn_text_btn_padding_left">12dp</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
@@ -148,14 +148,15 @@
     <item name="android:paddingBottom">@dimen/m3_btn_padding_bottom</item>
     <item name="android:insetTop">@dimen/m3_btn_inset</item>
     <item name="android:insetBottom">@dimen/m3_btn_inset</item>
-    <item name="android:textAppearance">@macro/m3_comp_filled_button_label_text_type</item>
-    <item name="shapeAppearance">@style/ShapeAppearance.M3.Comp.FilledButton.Container.Shape</item>
+    <item name="android:textAppearance">@macro/m3_comp_button_small_label_text</item>
+    <item name="shapeAppearance">@style/ShapeAppearance.M3.Comp.Button.Small.Container.Shape.Round</item>
     <item name="materialThemeOverlay">@style/ThemeOverlay.Material3.Button</item>
     <item name="android:stateListAnimator" tools:ignore="NewApi">@animator/m3_btn_state_list_anim</item>
-    <item name="elevation">@dimen/m3_comp_filled_button_container_elevation</item>
+    <item name="elevation">@dimen/m3_comp_button_filled_container_elevation</item>
     <item name="android:textColor">@color/m3_button_foreground_color_selector</item>
     <item name="iconTint">@color/m3_button_foreground_color_selector</item>
-    <item name="iconSize">@dimen/m3_comp_filled_button_with_icon_icon_size</item>
+    <item name="iconSize">18dp</item>
+    <item name="iconPadding">@dimen/m3_comp_button_small_icon_label_space</item>
     <item name="backgroundTint">@color/m3_button_background_color_selector</item>
     <item name="rippleColor">@color/m3_button_ripple_color_selector</item>
   </style>
@@ -165,7 +166,7 @@
        start-gravity icon button. If your icon is end-gravity, mirror the padding such that this
        adjustment happens on the other side. -->
   <style name="Widget.Material3.Button.Icon">
-    <item name="android:paddingLeft">@dimen/m3_btn_icon_btn_padding_left</item>
+    <item name="android:paddingLeft">@dimen/m3_comp_button_small_leading_space</item>
     <item name="android:paddingRight">@dimen/m3_btn_icon_btn_padding_right</item>
   </style>
 
@@ -184,7 +185,7 @@
        start-gravity icon button. If your icon is end-gravity, mirror the padding such that this
        adjustment happens to the other side. -->
   <style name="Widget.Material3.Button.TonalButton.Icon">
-    <item name="android:paddingLeft">@dimen/m3_btn_icon_btn_padding_left</item>
+    <item name="android:paddingLeft">@dimen/m3_comp_button_small_leading_space</item>
     <item name="android:paddingRight">@dimen/m3_btn_icon_btn_padding_right</item>
   </style>
 
@@ -198,8 +199,8 @@
     <item name="android:paddingBottom">@dimen/m3_btn_padding_bottom</item>
     <item name="android:insetTop">@dimen/m3_btn_inset</item>
     <item name="android:insetBottom">@dimen/m3_btn_inset</item>
-    <item name="android:textAppearance">@macro/m3_comp_text_button_label_text_type</item>
-    <item name="shapeAppearance">@style/ShapeAppearance.M3.Comp.TextButton.Container.Shape</item>
+    <item name="android:textAppearance">@macro/m3_comp_button_small_label_text</item>
+    <item name="shapeAppearance">@style/ShapeAppearance.M3.Comp.Button.Small.Container.Shape.Round</item>
     <item name="materialThemeOverlay">@style/ThemeOverlay.Material3.Button.TextButton</item>
     <item name="android:textColor">@color/m3_text_button_foreground_color_selector</item>
     <item name="iconTint">@color/m3_text_button_foreground_color_selector</item>
@@ -244,12 +245,12 @@
     <item name="android:paddingLeft">@dimen/m3_btn_padding_left</item>
     <item name="android:paddingRight">@dimen/m3_btn_padding_right</item>
     <item name="strokeColor">@color/m3_button_outline_color_selector</item>
-    <item name="strokeWidth">@dimen/m3_comp_outlined_button_outline_width</item>
+    <item name="strokeWidth">@dimen/m3_comp_button_small_outlined_outline_width</item>
   </style>
 
   <!-- M3 outlined button with a start-gravity icon style. -->
   <style name="Widget.Material3.Button.OutlinedButton.Icon">
-    <item name="android:paddingLeft">@dimen/m3_btn_icon_btn_padding_left</item>
+    <item name="android:paddingLeft">@dimen/m3_comp_button_small_leading_space</item>
     <item name="android:paddingRight">@dimen/m3_btn_icon_btn_padding_right</item>
   </style>
 
@@ -259,15 +260,15 @@
       @animator/m3_btn_elevated_btn_state_list_anim
     </item>
     <item name="android:textColor">@color/m3_text_button_foreground_color_selector</item>
-    <item name="elevation">@dimen/m3_btn_elevated_btn_elevation</item>
+    <item name="elevation">@dimen/m3_comp_button_elevated_container_elevation</item>
     <item name="iconTint">@color/m3_text_button_foreground_color_selector</item>
     <item name="rippleColor">@color/m3_text_button_ripple_color_selector</item>
     <item name="materialThemeOverlay">@style/ThemeOverlay.Material3.Button.ElevatedButton</item>
   </style>
 
   <!-- M3 elevated button with a start-gravity icon style. -->
   <style name="Widget.Material3.Button.ElevatedButton.Icon">
-    <item name="android:paddingLeft">@dimen/m3_btn_icon_btn_padding_left</item>
+    <item name="android:paddingLeft">@dimen/m3_comp_button_small_leading_space</item>
     <item name="android:paddingRight">@dimen/m3_btn_icon_btn_padding_right</item>
   </style>
 
@@ -313,27 +314,27 @@
 
   <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>
+    <item name="colorOnContainer">@macro/m3_comp_button_filled_icon_color</item>
+    <item name="colorOnContainerChecked">@macro/m3_comp_button_filled_icon_color</item>
+    <item name="colorOnContainerUnchecked">@macro/m3_comp_button_filled_icon_color</item>
+    <item name="colorContainer">@macro/m3_comp_button_filled_container_color</item>
+    <item name="colorContainerChecked">@macro/m3_comp_button_filled_container_color</item>
+    <item name="colorContainerUnchecked">@macro/m3_comp_button_filled_container_color</item>
   </style>
 
-  <style name="ThemeOverlay.Material3.Button.TonalButton">
+  <style name="ThemeOverlay.Material3.Button.TonalButton" parent="">
     <!-- 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>
+    <item name="colorOnContainer">@macro/m3_comp_button_tonal_icon_color</item>
+    <item name="colorOnContainerChecked">@macro/m3_comp_button_tonal_icon_color</item>
+    <item name="colorOnContainerUnchecked">@macro/m3_comp_button_tonal_icon_color</item>
+    <item name="colorContainer">@macro/m3_comp_button_tonal_container_color</item>
+    <item name="colorContainerChecked">@macro/m3_comp_button_tonal_container_color</item>
+    <item name="colorContainerUnchecked">@macro/m3_comp_button_tonal_container_color</item>
   </style>
 
   <style name="ThemeOverlay.Material3.Button.TextButton" parent="">
     <!-- The colors used by the color selectors -->
-    <item name="colorOnContainer">@macro/m3_comp_text_button_label_text_color</item>
+    <item name="colorOnContainer">@macro/m3_comp_button_text_icon_color</item>
     <item name="colorContainer">@android:color/transparent</item>
   </style>
 
@@ -344,9 +345,10 @@
 
   <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>
+    <item name="colorContainer">@macro/m3_comp_button_elevated_container_color</item>
+    <item name="colorContainerChecked">@macro/m3_comp_button_elevated_container_color</item>
+    <item name="colorContainerUnchecked">@macro/m3_comp_button_elevated_container_color</item>
+    <item name="colorOnContainer">@macro/m3_comp_button_elevated_icon_color</item>
   </style>
 
   <style name="ThemeOverlay.Material3.Button.IconButton" parent="ThemeOverlay.Material3.Button.TextButton">