Skip to content

Commit b9e8fb8

Browse files
raajkumarsraajkumars
committed
[Tokens][M3][Button] Integrate M3 Tokens.
PiperOrigin-RevId: 486679417
1 parent ba70cd7 commit b9e8fb8

File tree

4 files changed

+134
-28
lines changed

4 files changed

+134
-28
lines changed

‎lib/java/com/google/android/material/button/res/color/m3_text_button_ripple_color_selector.xml‎

Lines changed: 41 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -16,27 +16,56 @@
1616
-->
1717
<selector xmlns:android="http://schemas.android.com/apk/res/android">
1818
<!-- Uncheckable -->
19-
<item android:alpha="@dimen/m3_ripple_pressed_alpha" android:color="?attr/colorOnContainer" android:state_checkable="false" android:state_pressed="true" />
20-
<item android:alpha="@dimen/m3_ripple_focused_alpha" android:color="?attr/colorOnContainer" android:state_checkable="false" android:state_focused="true" />
21-
<item android:alpha="@dimen/m3_ripple_hovered_alpha" android:color="?attr/colorOnContainer" android:state_checkable="false" android:state_hovered="true" />
22-
<item android:alpha="@dimen/m3_ripple_default_alpha" android:color="?attr/colorOnContainer" android:state_checkable="false" />
19+
<item android:alpha="@dimen/m3_comp_text_button_pressed_state_layer_opacity"
20+
android:color="?attr/colorOnContainer"
21+
android:state_checkable="false"
22+
android:state_pressed="true" />
23+
<item android:alpha="@dimen/m3_comp_text_button_focus_state_layer_opacity"
24+
android:color="?attr/colorOnContainer"
25+
android:state_checkable="false"
26+
android:state_focused="true" />
27+
<item android:alpha="@dimen/m3_comp_text_button_hover_state_layer_opacity"
28+
android:color="?attr/colorOnContainer"
29+
android:state_checkable="false"
30+
android:state_hovered="true" />
31+
<item android:alpha="@dimen/m3_ripple_default_alpha"
32+
android:color="?attr/colorOnContainer"
33+
android:state_checkable="false" />
2334

2435
<!-- Checked -->
2536
<!-- The ripple color matches the color of the text / iconography on the element it's applied to.
2637
If the text / iconography changes color during a state change, the ripple color matches the end state's color.
2738
Pressing on a checked button will return it to the unchecked state at which point the text -->
28-
<item android:alpha="@dimen/m3_ripple_selectable_pressed_alpha" android:color="?attr/colorOnSurface" android:state_checked="true" android:state_pressed="true" />
29-
<item android:alpha="@dimen/m3_ripple_focused_alpha" android:color="?attr/colorOnSecondaryContainer" android:state_checked="true" android:state_focused="true" />
30-
<item android:alpha="@dimen/m3_ripple_hovered_alpha" android:color="?attr/colorOnSecondaryContainer" android:state_checked="true" android:state_hovered="true" />
31-
<item android:alpha="@dimen/m3_ripple_default_alpha" android:color="?attr/colorOnSecondaryContainer" android:state_checked="true" />
39+
<item android:alpha="@dimen/m3_comp_text_button_pressed_state_layer_opacity"
40+
android:color="?attr/colorOnSurface"
41+
android:state_checked="true"
42+
android:state_pressed="true" />
43+
<item android:alpha="@dimen/m3_comp_text_button_focus_state_layer_opacity"
44+
android:color="?attr/colorOnSecondaryContainer"
45+
android:state_checked="true"
46+
android:state_focused="true" />
47+
<item android:alpha="@dimen/m3_comp_text_button_hover_state_layer_opacity"
48+
android:color="?attr/colorOnSecondaryContainer"
49+
android:state_checked="true"
50+
android:state_hovered="true" />
51+
<item android:alpha="@dimen/m3_ripple_default_alpha"
52+
android:color="?attr/colorOnSecondaryContainer"
53+
android:state_checked="true" />
3254

3355
<!-- Unchecked -->
3456
<!-- Pressing on an unchecked, checkable chip will check it at which point the text / iconography
3557
will use "colorOnSecondaryContainer". Therefore, the ripple color for the pressed, checkable state is
3658
based on "colorOnSecondaryContainer". -->
37-
<item android:alpha="@dimen/m3_ripple_selectable_pressed_alpha" android:color="?attr/colorOnSecondaryContainer" android:state_pressed="true" />
38-
<item android:alpha="@dimen/m3_ripple_focused_alpha" android:color="?attr/colorOnSurface" android:state_focused="true" />
39-
<item android:alpha="@dimen/m3_ripple_hovered_alpha" android:color="?attr/colorOnSurface" android:state_hovered="true" />
40-
<item android:alpha="@dimen/m3_ripple_default_alpha" android:color="?attr/colorOnSurface" />
59+
<item android:alpha="@dimen/m3_comp_text_button_pressed_state_layer_opacity"
60+
android:color="?attr/colorOnSecondaryContainer"
61+
android:state_pressed="true" />
62+
<item android:alpha="@dimen/m3_comp_text_button_focus_state_layer_opacity"
63+
android:color="?attr/colorOnSurface"
64+
android:state_focused="true" />
65+
<item android:alpha="@dimen/m3_comp_text_button_hover_state_layer_opacity"
66+
android:color="?attr/colorOnSurface"
67+
android:state_hovered="true" />
68+
<item android:alpha="@dimen/m3_ripple_default_alpha"
69+
android:color="?attr/colorOnSurface" />
4170

4271
</selector>

‎lib/java/com/google/android/material/button/res/values/dimens.xml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@
6868
<!-- LINT.ThenChange(../../../dialog/res/values/dimens.xml) -->
6969

7070
<dimen name="m3_btn_elevation">0dp</dimen>
71-
<dimen name="m3_btn_elevated_btn_elevation">1dp</dimen>
71+
<dimen name="m3_btn_elevated_btn_elevation">@dimen/m3_comp_elevated_button_container_elevation</dimen>
7272
<dimen name="m3_btn_icon_btn_padding_left">16dp</dimen>
7373
<dimen name="m3_btn_icon_btn_padding_right">24dp</dimen>
7474
<dimen name="m3_btn_text_btn_padding_left">12dp</dimen>

‎lib/java/com/google/android/material/button/res/values/styles.xml‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -134,14 +134,14 @@
134134
<item name="android:paddingBottom">@dimen/m3_btn_padding_bottom</item>
135135
<item name="android:insetTop">@dimen/m3_btn_inset</item>
136136
<item name="android:insetBottom">@dimen/m3_btn_inset</item>
137-
<item name="android:textAppearance">?attr/textAppearanceLabelLarge</item>
138-
<item name="shapeAppearance">@style/ShapeAppearance.Material3.Corner.Full</item>
137+
<item name="android:textAppearance">@macro/m3_comp_filled_button_label_text_type</item>
138+
<item name="shapeAppearance">@style/ShapeAppearance.M3.Comp.FilledButton.Container.Shape</item>
139139
<item name="materialThemeOverlay">@style/ThemeOverlay.Material3.Button</item>
140140
<item name="android:stateListAnimator" tools:ignore="NewApi">@animator/m3_btn_state_list_anim</item>
141-
<item name="elevation">@dimen/m3_btn_elevation</item>
141+
<item name="elevation">@dimen/m3_comp_filled_button_container_elevation</item>
142142
<item name="android:textColor">@color/m3_button_foreground_color_selector</item>
143143
<item name="iconTint">@color/m3_button_foreground_color_selector</item>
144-
<item name="iconSize">18dp</item>
144+
<item name="iconSize">@dimen/m3_comp_filled_button_with_icon_icon_size</item>
145145
<item name="backgroundTint">@color/m3_button_background_color_selector</item>
146146
<item name="rippleColor">@color/m3_button_ripple_color_selector</item>
147147
</style>
@@ -160,13 +160,13 @@
160160
<item name="elevation">0dp</item>
161161
</style>
162162

163-
<!-- M3 tonal button style. -->
163+
<!-- M3 filled tonal button style. -->
164164
<style name="Widget.Material3.Button.TonalButton">
165165
<item name="rippleColor">@color/m3_tonal_button_ripple_color_selector</item>
166166
<item name="materialThemeOverlay">@style/ThemeOverlay.Material3.Button.TonalButton</item>
167167
</style>
168168

169-
<!-- M3 tonal button with a start-gravity icon style. This adjusts
169+
<!-- M3 filled tonal button with a start-gravity icon style. This adjusts
170170
padding slightly to achieve a better visual balance. This style should only be used with a
171171
start-gravity icon button. If your icon is end-gravity, mirror the padding such that this
172172
adjustment happens to the other side. -->
@@ -185,8 +185,8 @@
185185
<item name="android:paddingBottom">@dimen/m3_btn_padding_bottom</item>
186186
<item name="android:insetTop">@dimen/m3_btn_inset</item>
187187
<item name="android:insetBottom">@dimen/m3_btn_inset</item>
188-
<item name="android:textAppearance">?attr/textAppearanceLabelLarge</item>
189-
<item name="shapeAppearance">@style/ShapeAppearance.Material3.Corner.Full</item>
188+
<item name="android:textAppearance">@macro/m3_comp_text_button_label_text_type</item>
189+
<item name="shapeAppearance">@style/ShapeAppearance.M3.Comp.TextButton.Container.Shape</item>
190190
<item name="materialThemeOverlay">@style/ThemeOverlay.Material3.Button.TextButton</item>
191191
<item name="android:textColor">@color/m3_text_button_foreground_color_selector</item>
192192
<item name="iconTint">@color/m3_text_button_foreground_color_selector</item>
@@ -231,7 +231,7 @@
231231
<item name="android:paddingLeft">@dimen/m3_btn_padding_left</item>
232232
<item name="android:paddingRight">@dimen/m3_btn_padding_right</item>
233233
<item name="strokeColor">@color/m3_button_outline_color_selector</item>
234-
<item name="strokeWidth">@dimen/m3_btn_stroke_size</item>
234+
<item name="strokeWidth">@dimen/m3_comp_outlined_button_outline_width</item>
235235
</style>
236236

237237
<!-- M3 outlined button with a start-gravity icon style. -->
@@ -300,19 +300,19 @@
300300

301301
<style name="ThemeOverlay.Material3.Button" parent="">
302302
<!-- The colors used by the color selectors -->
303-
<item name="colorOnContainer">?attr/colorOnPrimary</item>
304-
<item name="colorContainer">?attr/colorPrimary</item>
303+
<item name="colorOnContainer">@macro/m3_comp_filled_button_label_text_color</item>
304+
<item name="colorContainer">@macro/m3_comp_filled_button_container_color</item>
305305
</style>
306306

307307
<style name="ThemeOverlay.Material3.Button.TonalButton">
308308
<!-- The colors used by the color selectors -->
309-
<item name="colorOnContainer">?attr/colorOnSecondaryContainer</item>
310-
<item name="colorContainer">?attr/colorSecondaryContainer</item>
309+
<item name="colorOnContainer">@macro/m3_comp_filled_tonal_button_label_text_color</item>
310+
<item name="colorContainer">@macro/m3_comp_filled_tonal_button_container_color</item>
311311
</style>
312312

313313
<style name="ThemeOverlay.Material3.Button.TextButton" parent="">
314314
<!-- The colors used by the color selectors -->
315-
<item name="colorOnContainer">?attr/colorPrimary</item>
315+
<item name="colorOnContainer">@macro/m3_comp_text_button_label_text_color</item>
316316
<item name="colorContainer">@android:color/transparent</item>
317317
</style>
318318

@@ -323,7 +323,7 @@
323323

324324
<style name="ThemeOverlay.Material3.Button.ElevatedButton" parent="ThemeOverlay.Material3.Button.TextButton">
325325
<!-- The colors used by the color selectors -->
326-
<item name="colorContainer">?attr/colorSurface</item>
326+
<item name="colorContainer">@macro/m3_comp_elevated_button_container_color</item>
327327
</style>
328328

329329
<style name="ThemeOverlay.Material3.Button.IconButton" parent="ThemeOverlay.Material3.Button.TextButton">

‎lib/java/com/google/android/material/button/res/values/tokens.xml‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<!--
3+
~ Copyright (C) 2022 The Android Open Source Project
4+
~
5+
~ Licensed under the Apache License, Version 2.0 (the "License");
6+
~ you may not use this file except in compliance with the License.
7+
~ You may obtain a copy of the License at
8+
~
9+
~ http://www.apache.org/licenses/LICENSE-2.0
10+
~
11+
~ Unless required by applicable law or agreed to in writing, software
12+
~ distributed under the License is distributed on an "AS IS" BASIS,
13+
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14+
~ See the License for the specific language governing permissions and
15+
~ limitations under the License.
16+
-->
17+
<!-- AUTOGENERATED FILE. DO NOT MODIFY. -->
18+
<!-- Version: v0.126 -->
19+
20+
<resources>
21+
<!-- Generated from token set (md.comp.filled-button) in default context. -->
22+
<!-- Enabled - Container -->
23+
<style name="ShapeAppearance.M3.Comp.FilledButton.Container.Shape" parent="ShapeAppearance.M3.Sys.Shape.Corner.Full"/>
24+
<dimen name="m3_comp_filled_button_container_elevation">@dimen/m3_sys_elevation_level0</dimen>
25+
<!-- Ignore (md.comp.filled-button.container.shadow-color) due to no theme attribute for (md.sys.color.shadow). -->
26+
<macro name="m3_comp_filled_button_container_color">?attr/colorPrimary</macro>
27+
<!-- Enabled - Label text -->
28+
<macro name="m3_comp_filled_button_label_text_type">?attr/textAppearanceLabelLarge</macro>
29+
<macro name="m3_comp_filled_button_label_text_color">?attr/colorOnPrimary</macro>
30+
<!-- Enabled - Icon -->
31+
<dimen name="m3_comp_filled_button_with_icon_icon_size">18dp</dimen>
32+
33+
<!-- Generated from token set (md.comp.filled-tonal-button) in default context. -->
34+
<!-- Enabled - Container -->
35+
<macro name="m3_comp_filled_tonal_button_container_color">?attr/colorSecondaryContainer</macro>
36+
<!-- Ignore (md.comp.filled-tonal-button.container.shadow-color) due to no theme attribute for (md.sys.color.shadow). -->
37+
<!-- Enabled - Label text -->
38+
<macro name="m3_comp_filled_tonal_button_label_text_color">?attr/colorOnSecondaryContainer</macro>
39+
40+
<!-- Generated from token set (md.comp.text-button) in default context. -->
41+
<!-- Enabled - Container -->
42+
<style name="ShapeAppearance.M3.Comp.TextButton.Container.Shape" parent="ShapeAppearance.M3.Sys.Shape.Corner.Full"/>
43+
<!-- Enabled - Label text -->
44+
<macro name="m3_comp_text_button_label_text_type">?attr/textAppearanceLabelLarge</macro>
45+
<macro name="m3_comp_text_button_label_text_color">?attr/colorPrimary</macro>
46+
<!-- Hovered - State layer -->
47+
<macro name="m3_comp_text_button_hover_state_layer_color">?attr/colorPrimary</macro>
48+
<dimen name="m3_comp_text_button_hover_state_layer_opacity">@dimen/m3_sys_state_hover_state_layer_opacity</dimen>
49+
<!-- Focused - State layer -->
50+
<macro name="m3_comp_text_button_focus_state_layer_color">?attr/colorPrimary</macro>
51+
<dimen name="m3_comp_text_button_focus_state_layer_opacity">@dimen/m3_sys_state_focus_state_layer_opacity</dimen>
52+
<!-- Pressed (rippple) - State layer -->
53+
<macro name="m3_comp_text_button_pressed_state_layer_color">?attr/colorPrimary</macro>
54+
<dimen name="m3_comp_text_button_pressed_state_layer_opacity">@dimen/m3_sys_state_pressed_state_layer_opacity</dimen>
55+
56+
<!-- Generated from token set (md.comp.outlined-button) in default context. -->
57+
<!-- Enabled - Outline -->
58+
<macro name="m3_comp_outlined_button_outline_color">?attr/colorOutline</macro>
59+
<dimen name="m3_comp_outlined_button_outline_width">1dp</dimen>
60+
<!-- Disabled - Outline -->
61+
<macro name="m3_comp_outlined_button_disabled_outline_color">?attr/colorOnSurface</macro>
62+
<item name="m3_comp_outlined_button_disabled_outline_opacity" format="float" type="dimen">0.12</item>
63+
<!-- Hovered - Outline -->
64+
<macro name="m3_comp_outlined_button_hover_outline_color">?attr/colorOutline</macro>
65+
<!-- Focused - Outline -->
66+
<macro name="m3_comp_outlined_button_focus_outline_color">?attr/colorPrimary</macro>
67+
<!-- Pressed (rippple) - Outline -->
68+
<macro name="m3_comp_outlined_button_pressed_outline_color">?attr/colorOutline</macro>
69+
70+
<!-- Generated from token set (md.comp.elevated-button) in default context. -->
71+
<!-- Enabled - Container -->
72+
<dimen name="m3_comp_elevated_button_container_elevation">@dimen/m3_sys_elevation_level1</dimen>
73+
<!-- Ignore (md.comp.elevated-button.container.shadow-color) due to no theme attribute for (md.sys.color.shadow). -->
74+
<macro name="m3_comp_elevated_button_container_color">?attr/colorSurface</macro>
75+
<!-- Disabled - Container -->
76+
<dimen name="m3_comp_elevated_button_disabled_container_elevation">@dimen/m3_sys_elevation_level0</dimen>
77+
</resources>

0 commit comments

Comments
 (0)