Skip to content

Commit

Permalink
[Tokens][M3][Button] Integrate M3 Tokens.
Browse files Browse the repository at this point in the history 
PiperOrigin-RevId: 486679417
  • Loading branch information
@raajkumars
raajkumars committed Nov 9, 2022
1 parent ba70cd7 commit b9e8fb8
Show file tree
Hide file tree
Showing 4 changed files with 134 additions and 28 deletions.
53 changes: 41 additions & 12 deletions ...ava/com/google/android/material/button/res/color/m3_text_button_ripple_color_selector.xml
View file
Expand Up @@ -16,27 +16,56 @@
-->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Uncheckable -->
<item android:alpha="@dimen/m3_ripple_pressed_alpha" android:color="?attr/colorOnContainer" android:state_checkable="false" android:state_pressed="true" />
<item android:alpha="@dimen/m3_ripple_focused_alpha" android:color="?attr/colorOnContainer" android:state_checkable="false" android:state_focused="true" />
<item android:alpha="@dimen/m3_ripple_hovered_alpha" android:color="?attr/colorOnContainer" android:state_checkable="false" android:state_hovered="true" />
<item android:alpha="@dimen/m3_ripple_default_alpha" android:color="?attr/colorOnContainer" android:state_checkable="false" />
<item android:alpha="@dimen/m3_comp_text_button_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"
android:color="?attr/colorOnContainer"
android:state_checkable="false"
android:state_focused="true" />
<item android:alpha="@dimen/m3_comp_text_button_hover_state_layer_opacity"
android:color="?attr/colorOnContainer"
android:state_checkable="false"
android:state_hovered="true" />
<item android:alpha="@dimen/m3_ripple_default_alpha"
android:color="?attr/colorOnContainer"
android:state_checkable="false" />

<!-- Checked -->
<!-- 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_ripple_selectable_pressed_alpha" android:color="?attr/colorOnSurface" android:state_checked="true" android:state_pressed="true" />
<item android:alpha="@dimen/m3_ripple_focused_alpha" android:color="?attr/colorOnSecondaryContainer" android:state_checked="true" android:state_focused="true" />
<item android:alpha="@dimen/m3_ripple_hovered_alpha" android:color="?attr/colorOnSecondaryContainer" android:state_checked="true" android:state_hovered="true" />
<item android:alpha="@dimen/m3_ripple_default_alpha" android:color="?attr/colorOnSecondaryContainer" android:state_checked="true" />
<item android:alpha="@dimen/m3_comp_text_button_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"
android:color="?attr/colorOnSecondaryContainer"
android:state_checked="true"
android:state_focused="true" />
<item android:alpha="@dimen/m3_comp_text_button_hover_state_layer_opacity"
android:color="?attr/colorOnSecondaryContainer"
android:state_checked="true"
android:state_hovered="true" />
<item android:alpha="@dimen/m3_ripple_default_alpha"
android:color="?attr/colorOnSecondaryContainer"
android:state_checked="true" />

<!-- Unchecked -->
<!-- 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_ripple_selectable_pressed_alpha" android:color="?attr/colorOnSecondaryContainer" android:state_pressed="true" />
<item android:alpha="@dimen/m3_ripple_focused_alpha" android:color="?attr/colorOnSurface" android:state_focused="true" />
<item android:alpha="@dimen/m3_ripple_hovered_alpha" android:color="?attr/colorOnSurface" android:state_hovered="true" />
<item android:alpha="@dimen/m3_ripple_default_alpha" android:color="?attr/colorOnSurface" />
<item android:alpha="@dimen/m3_comp_text_button_pressed_state_layer_opacity"
android:color="?attr/colorOnSecondaryContainer"
android:state_pressed="true" />
<item android:alpha="@dimen/m3_comp_text_button_focus_state_layer_opacity"
android:color="?attr/colorOnSurface"
android:state_focused="true" />
<item android:alpha="@dimen/m3_comp_text_button_hover_state_layer_opacity"
android:color="?attr/colorOnSurface"
android:state_hovered="true" />
<item android:alpha="@dimen/m3_ripple_default_alpha"
android:color="?attr/colorOnSurface" />

</selector>
2 changes: 1 addition & 1 deletion lib/java/com/google/android/material/button/res/values/dimens.xml
View file
Expand Up @@ -68,7 +68,7 @@
<!-- LINT.ThenChange(../../../dialog/res/values/dimens.xml) -->

<dimen name="m3_btn_elevation">0dp</dimen>
<dimen name="m3_btn_elevated_btn_elevation">1dp</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>
Expand Down
30 changes: 15 additions & 15 deletions lib/java/com/google/android/material/button/res/values/styles.xml
View file
Expand Up @@ -134,14 +134,14 @@
<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">?attr/textAppearanceLabelLarge</item>
<item name="shapeAppearance">@style/ShapeAppearance.Material3.Corner.Full</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="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_btn_elevation</item>
<item name="elevation">@dimen/m3_comp_filled_button_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">18dp</item>
<item name="iconSize">@dimen/m3_comp_filled_button_with_icon_icon_size</item>
<item name="backgroundTint">@color/m3_button_background_color_selector</item>
<item name="rippleColor">@color/m3_button_ripple_color_selector</item>
</style>
Expand All @@ -160,13 +160,13 @@
<item name="elevation">0dp</item>
</style>

<!-- M3 tonal button style. -->
<!-- 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>

<!-- M3 tonal button with a start-gravity icon style. This adjusts
<!-- M3 filled tonal button with a start-gravity icon style. This adjusts
padding slightly to achieve a better visual balance. This style should only be used with a
start-gravity icon button. If your icon is end-gravity, mirror the padding such that this
adjustment happens to the other side. -->
Expand All @@ -185,8 +185,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">?attr/textAppearanceLabelLarge</item>
<item name="shapeAppearance">@style/ShapeAppearance.Material3.Corner.Full</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="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>
Expand Down Expand Up @@ -231,7 +231,7 @@
<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_btn_stroke_size</item>
<item name="strokeWidth">@dimen/m3_comp_outlined_button_outline_width</item>
</style>

<!-- M3 outlined button with a start-gravity icon style. -->
Expand Down Expand Up @@ -300,19 +300,19 @@

<style name="ThemeOverlay.Material3.Button" parent="">
<!-- The colors used by the color selectors -->
<item name="colorOnContainer">?attr/colorOnPrimary</item>
<item name="colorContainer">?attr/colorPrimary</item>
<item name="colorOnContainer">@macro/m3_comp_filled_button_label_text_color</item>
<item name="colorContainer">@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">?attr/colorOnSecondaryContainer</item>
<item name="colorContainer">?attr/colorSecondaryContainer</item>
<item name="colorOnContainer">@macro/m3_comp_filled_tonal_button_label_text_color</item>
<item name="colorContainer">@macro/m3_comp_filled_tonal_button_container_color</item>
</style>

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

Expand All @@ -323,7 +323,7 @@

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

<style name="ThemeOverlay.Material3.Button.IconButton" parent="ThemeOverlay.Material3.Button.TextButton">
Expand Down
77 changes: 77 additions & 0 deletions lib/java/com/google/android/material/button/res/values/tokens.xml
View file
@@ -0,0 +1,77 @@
<?xml version="1.0" encoding="utf-8"?>
<!--
~ Copyright (C) 2022 The Android Open Source Project
~
~ Licensed under the Apache License, Version 2.0 (the "License");
~ you may not use this file except in compliance with the License.
~ You may obtain a copy of the License at
~
~ http://www.apache.org/licenses/LICENSE-2.0
~
~ Unless required by applicable law or agreed to in writing, software
~ distributed under the License is distributed on an "AS IS" BASIS,
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
~ See the License for the specific language governing permissions and
~ limitations under the License.
-->
<!-- AUTOGENERATED FILE. DO NOT MODIFY. -->
<!-- Version: v0.126 -->

<resources>
<!-- Generated from token set (md.comp.filled-button) in default context. -->
<!-- Enabled - Container -->
<style name="ShapeAppearance.M3.Comp.FilledButton.Container.Shape" parent="ShapeAppearance.M3.Sys.Shape.Corner.Full"/>
<dimen name="m3_comp_filled_button_container_elevation">@dimen/m3_sys_elevation_level0</dimen>
<!-- Ignore (md.comp.filled-button.container.shadow-color) due to no theme attribute for (md.sys.color.shadow). -->
<macro name="m3_comp_filled_button_container_color">?attr/colorPrimary</macro>
<!-- Enabled - Label text -->
<macro name="m3_comp_filled_button_label_text_type">?attr/textAppearanceLabelLarge</macro>
<macro name="m3_comp_filled_button_label_text_color">?attr/colorOnPrimary</macro>
<!-- Enabled - Icon -->
<dimen name="m3_comp_filled_button_with_icon_icon_size">18dp</dimen>

<!-- Generated from token set (md.comp.filled-tonal-button) in default context. -->
<!-- Enabled - Container -->
<macro name="m3_comp_filled_tonal_button_container_color">?attr/colorSecondaryContainer</macro>
<!-- Ignore (md.comp.filled-tonal-button.container.shadow-color) due to no theme attribute for (md.sys.color.shadow). -->
<!-- Enabled - Label text -->
<macro name="m3_comp_filled_tonal_button_label_text_color">?attr/colorOnSecondaryContainer</macro>

<!-- Generated from token set (md.comp.text-button) in default context. -->
<!-- Enabled - Container -->
<style name="ShapeAppearance.M3.Comp.TextButton.Container.Shape" parent="ShapeAppearance.M3.Sys.Shape.Corner.Full"/>
<!-- Enabled - Label text -->
<macro name="m3_comp_text_button_label_text_type">?attr/textAppearanceLabelLarge</macro>
<macro name="m3_comp_text_button_label_text_color">?attr/colorPrimary</macro>
<!-- Hovered - State layer -->
<macro name="m3_comp_text_button_hover_state_layer_color">?attr/colorPrimary</macro>
<dimen name="m3_comp_text_button_hover_state_layer_opacity">@dimen/m3_sys_state_hover_state_layer_opacity</dimen>
<!-- Focused - State layer -->
<macro name="m3_comp_text_button_focus_state_layer_color">?attr/colorPrimary</macro>
<dimen name="m3_comp_text_button_focus_state_layer_opacity">@dimen/m3_sys_state_focus_state_layer_opacity</dimen>
<!-- Pressed (rippple) - State layer -->
<macro name="m3_comp_text_button_pressed_state_layer_color">?attr/colorPrimary</macro>
<dimen name="m3_comp_text_button_pressed_state_layer_opacity">@dimen/m3_sys_state_pressed_state_layer_opacity</dimen>

<!-- Generated from token set (md.comp.outlined-button) in default context. -->
<!-- Enabled - Outline -->
<macro name="m3_comp_outlined_button_outline_color">?attr/colorOutline</macro>
<dimen name="m3_comp_outlined_button_outline_width">1dp</dimen>
<!-- Disabled - Outline -->
<macro name="m3_comp_outlined_button_disabled_outline_color">?attr/colorOnSurface</macro>
<item name="m3_comp_outlined_button_disabled_outline_opacity" format="float" type="dimen">0.12</item>
<!-- Hovered - Outline -->
<macro name="m3_comp_outlined_button_hover_outline_color">?attr/colorOutline</macro>
<!-- Focused - Outline -->
<macro name="m3_comp_outlined_button_focus_outline_color">?attr/colorPrimary</macro>
<!-- Pressed (rippple) - Outline -->
<macro name="m3_comp_outlined_button_pressed_outline_color">?attr/colorOutline</macro>

<!-- Generated from token set (md.comp.elevated-button) in default context. -->
<!-- Enabled - Container -->
<dimen name="m3_comp_elevated_button_container_elevation">@dimen/m3_sys_elevation_level1</dimen>
<!-- Ignore (md.comp.elevated-button.container.shadow-color) due to no theme attribute for (md.sys.color.shadow). -->
<macro name="m3_comp_elevated_button_container_color">?attr/colorSurface</macro>
<!-- Disabled - Container -->
<dimen name="m3_comp_elevated_button_disabled_container_elevation">@dimen/m3_sys_elevation_level0</dimen>
</resources>

0 comments on commit b9e8fb8

Please sign in to comment.