Skip to content

Commit

Permalink
[Card] Integrated M3 tokens.
Browse files Browse the repository at this point in the history 
PiperOrigin-RevId: 490569453
  • Loading branch information
@pekingme @drchen
pekingme authored and drchen committed Nov 28, 2022
1 parent 03bd77f commit bf7b3c2
Show file tree
Hide file tree
Showing 6 changed files with 210 additions and 21 deletions.
35 changes: 26 additions & 9 deletions lib/java/com/google/android/material/card/res/color/m3_card_ripple_color.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,23 +23,40 @@
Pressing on a checked card will return it to the unchecked state at which point the text /
iconography will use "colorOnSurfaceVariant". Therefore, the ripple color for the pressed,
checked state is based on "colorOnSurfaceVariant". -->
<item android:alpha="@dimen/m3_ripple_selectable_pressed_alpha" android:color="?attr/colorOnSurfaceVariant" android:state_pressed="true" android:state_checked="true"/>
<item android:alpha="@dimen/m3_ripple_focused_alpha" android:color="?attr/colorSecondary" android:state_focused="true" android:state_checked="true"/>
<item android:alpha="@dimen/m3_ripple_hovered_alpha" android:color="?attr/colorSecondary" android:state_hovered="true" android:state_checked="true"/>
<item android:alpha="@dimen/m3_ripple_default_alpha" android:color="?attr/colorSecondary" android:state_checked="true"/>
<item android:alpha="@dimen/m3_comp_filled_card_pressed_state_layer_opacity"
android:color="?attr/colorOnSurfaceVariant"
android:state_pressed="true" android:state_checked="true"/>
<item android:alpha="@dimen/m3_comp_filled_card_focus_state_layer_opacity"
android:color="?attr/colorSecondary"
android:state_focused="true" android:state_checked="true"/>
<item android:alpha="@dimen/m3_comp_filled_card_hover_state_layer_opacity"
android:color="?attr/colorSecondary"
android:state_hovered="true" android:state_checked="true"/>
<item android:alpha="@dimen/m3_ripple_default_alpha"
android:color="?attr/colorSecondary"
android:state_checked="true"/>

<!-- Unchecked. -->

<!-- Pressing on an unchecked, checkable card will check it at which point the text / iconography
will use "colorSecondary". Therefore, the ripple color for the pressed, checkable state is
based on "colorSecondary". -->
<item android:alpha="@dimen/m3_ripple_selectable_pressed_alpha" android:color="?attr/colorSecondary" android:state_checkable="true" android:state_pressed="true"/>
<item android:alpha="@dimen/m3_comp_filled_card_pressed_state_layer_opacity"
android:color="?attr/colorSecondary"
android:state_checkable="true" android:state_pressed="true"/>
<!-- Pressing on an uncheckable card will remain in the unchecked state at which point the text /
iconography will continue to use "colorOnSurfaceVariant". Therefore, the ripple color for the
pressed, uncheckable state is based on "colorOnSurfaceVariant". -->
<item android:alpha="@dimen/m3_ripple_pressed_alpha" android:color="?attr/colorOnSurfaceVariant" android:state_checkable="false" android:state_pressed="true"/>
<item android:alpha="@dimen/m3_ripple_focused_alpha" android:color="?attr/colorOnSurfaceVariant" android:state_focused="true"/>
<item android:alpha="@dimen/m3_ripple_hovered_alpha" android:color="?attr/colorOnSurfaceVariant" android:state_hovered="true"/>
<item android:alpha="@dimen/m3_ripple_default_alpha" android:color="?attr/colorOnSurfaceVariant"/>
<item android:alpha="@dimen/m3_comp_filled_card_pressed_state_layer_opacity"
android:color="?attr/colorOnSurfaceVariant"
android:state_checkable="false" android:state_pressed="true"/>
<item android:alpha="@dimen/m3_comp_filled_card_focus_state_layer_opacity"
android:color="?attr/colorOnSurfaceVariant"
android:state_focused="true"/>
<item android:alpha="@dimen/m3_comp_filled_card_hover_state_layer_opacity"
android:color="?attr/colorOnSurfaceVariant"
android:state_hovered="true"/>
<item android:alpha="@dimen/m3_comp_filled_card_dragged_state_layer_opacity"
android:color="?attr/colorOnSurfaceVariant"/>

</selector>
27 changes: 24 additions & 3 deletions lib/java/com/google/android/material/card/res/color/m3_card_stroke_color.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,28 @@
See the License for the specific language governing permissions and
limitations under the License.
-->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="?attr/colorSecondary" android:state_checked="true"/>
<item android:color="?attr/colorOutline"/>
<selector
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<!-- Disabled -->
<item android:alpha="@dimen/m3_comp_outlined_card_disabled_outline_opacity"
android:color="@macro/m3_comp_outlined_card_disabled_outline_color"
android:state_enabled="false"/>
<!-- Checked -->
<item android:color="?attr/colorSecondary"
android:state_checked="true"/>
<!-- Hovered -->
<item android:color="@macro/m3_comp_outlined_card_hover_outline_color"
android:state_hovered="true"/>
<!-- Focused -->
<item android:color="@macro/m3_comp_outlined_card_focus_outline_color"
android:state_focused="true"/>
<!-- Pressed -->
<item android:color="@macro/m3_comp_outlined_card_pressed_outline_color"
android:state_pressed="true"/>
<!-- Dragged -->
<item android:color="@macro/m3_comp_outlined_card_dragged_outline_color"
app:state_dragged="true"/>
<!-- Default -->
<item android:color="@macro/m3_comp_outlined_card_outline_color"/>
</selector>
12 changes: 7 additions & 5 deletions lib/java/com/google/android/material/card/res/values/dimens.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,11 +32,13 @@
<dimen name="mtrl_card_dragged_z">5dp</dimen>

<dimen name="m3_card_elevation">@dimen/m3_sys_elevation_level0</dimen>
<dimen name="m3_card_hovered_z">@dimen/m3_sys_elevation_level1</dimen>
<dimen name="m3_card_dragged_z">@dimen/m3_sys_elevation_level3</dimen>
<dimen name="m3_card_hovered_z">1dp</dimen> <!-- Transitions from level 0 to level 1 -->
<dimen name="m3_card_dragged_z">6dp</dimen> <!-- Transitions from level 0 to level 3 -->
<dimen name="m3_card_disabled_z">0dp</dimen>
<dimen name="m3_card_stroke_width">1dp</dimen>

<dimen name="m3_card_elevated_elevation">@dimen/m3_sys_elevation_level1</dimen>
<dimen name="m3_card_elevated_hovered_z">2dp</dimen> <!-- level1 -> level2 -->
<dimen name="m3_card_elevated_dragged_z">7dp</dimen> <!-- level1 -> level4 -->
<dimen name="m3_card_elevated_elevation">@dimen/m3_comp_elevated_card_container_elevation</dimen>
<dimen name="m3_card_elevated_hovered_z">2dp</dimen> <!-- Transitions from level1 to level2 -->
<dimen name="m3_card_elevated_dragged_z">7dp</dimen> <!-- Transitions from level1 to level4 -->
<dimen name="m3_card_elevated_disabled_z">0dp</dimen>
</resources>
20 changes: 16 additions & 4 deletions lib/java/com/google/android/material/card/res/values/styles.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,19 +51,31 @@
<item name="shapeAppearance">?attr/shapeAppearanceCornerMedium</item>
</style>

<style name="Widget.Material3.CardView.Outlined" parent="Base.Widget.Material3.CardView"/>

<style name="Widget.Material3.CardView.Filled" parent="Base.Widget.Material3.CardView">
<item name="strokeWidth">0dp</item>
<item name="cardBackgroundColor">?attr/colorSurfaceVariant</item>
<item name="cardElevation">@dimen/m3_comp_filled_card_container_elevation</item>
<item name="cardBackgroundColor">@macro/m3_comp_filled_card_container_color</item>
<item name="checkedIconSize">@dimen/m3_comp_filled_card_icon_size</item>
<item name="shapeAppearance">@macro/m3_comp_filled_card_container_shape</item>
</style>

<style name="Widget.Material3.CardView.Outlined" parent="Base.Widget.Material3.CardView">
<item name="strokeWidth">@dimen/m3_comp_outlined_card_outline_width</item>
<item name="cardElevation">@dimen/m3_comp_outlined_card_container_elevation</item>
<item name="cardBackgroundColor">@macro/m3_comp_outlined_card_container_color</item>
<item name="checkedIconSize">@dimen/m3_comp_outlined_card_icon_size</item>
<item name="shapeAppearance">@macro/m3_comp_outlined_card_container_shape</item>
</style>

<style name="Widget.Material3.CardView.Elevated" parent="Base.Widget.Material3.CardView">
<item name="android:stateListAnimator" tools:ignore="NewApi">
@animator/m3_card_elevated_state_list_anim
</item>
<item name="cardElevation">@dimen/m3_card_elevated_elevation</item>
<item name="strokeWidth">0dp</item>
<item name="cardElevation">@dimen/m3_card_elevated_elevation</item>
<item name="cardBackgroundColor">@macro/m3_comp_elevated_card_container_color</item>
<item name="checkedIconSize">@dimen/m3_comp_elevated_card_icon_size</item>
<item name="shapeAppearance">@macro/m3_comp_elevated_card_container_shape</item>
</style>

</resources>
68 changes: 68 additions & 0 deletions lib/java/com/google/android/material/card/res/values/tokens.xml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
<?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.141 -->

<resources>

<!-- Generated from token set (md.comp.filled-card) in context (platform=android, audience=3p). -->
<!-- Enabled - Container -->
<macro name="m3_comp_filled_card_container_color">?attr/colorSurfaceVariant</macro>
<dimen name="m3_comp_filled_card_container_elevation">@dimen/m3_sys_elevation_level0</dimen>
<macro name="m3_comp_filled_card_container_shape">?attr/shapeAppearanceCornerMedium</macro>
<!-- Enabled - Icon -->
<dimen name="m3_comp_filled_card_icon_size">24dp</dimen>
<!-- Hovered - State layer -->
<dimen name="m3_comp_filled_card_hover_state_layer_opacity">@dimen/m3_sys_state_hover_state_layer_opacity</dimen>
<!-- Focused - State layer -->
<dimen name="m3_comp_filled_card_focus_state_layer_opacity">@dimen/m3_sys_state_focus_state_layer_opacity</dimen>
<!-- Pressed (ripple) - State layer -->
<dimen name="m3_comp_filled_card_pressed_state_layer_opacity">@dimen/m3_sys_state_pressed_state_layer_opacity</dimen>
<!-- Dragged - State layer -->
<dimen name="m3_comp_filled_card_dragged_state_layer_opacity">@dimen/m3_sys_state_dragged_state_layer_opacity</dimen>

<!-- Generated from token set (md.comp.outlined-card) in context (platform=android, audience=3p). -->
<!-- Enabled - Container -->
<macro name="m3_comp_outlined_card_container_color">?attr/colorSurface</macro>
<dimen name="m3_comp_outlined_card_container_elevation">@dimen/m3_sys_elevation_level0</dimen>
<macro name="m3_comp_outlined_card_container_shape">?attr/shapeAppearanceCornerMedium</macro>
<!-- Enabled - Outline -->
<dimen name="m3_comp_outlined_card_outline_width">1dp</dimen>
<macro name="m3_comp_outlined_card_outline_color">?attr/colorOutline</macro>
<!-- Enabled - Icon -->
<dimen name="m3_comp_outlined_card_icon_size">24dp</dimen>
<!-- Disabled - Outline -->
<macro name="m3_comp_outlined_card_disabled_outline_color">?attr/colorOutline</macro>
<item name="m3_comp_outlined_card_disabled_outline_opacity" format="float" type="dimen">0.12</item>
<!-- Hovered - Outline -->
<macro name="m3_comp_outlined_card_hover_outline_color">?attr/colorOutline</macro>
<!-- Focused - Outline -->
<macro name="m3_comp_outlined_card_focus_outline_color">?attr/colorOnSurface</macro>
<!-- Pressed (rippple) - Outline -->
<macro name="m3_comp_outlined_card_pressed_outline_color">?attr/colorOutline</macro>
<!-- Dragged - Outline -->
<macro name="m3_comp_outlined_card_dragged_outline_color">?attr/colorOutline</macro>

<!-- Generated from token set (md.comp.elevated-card) in context (platform=android, audience=3p). -->
<!-- Enabled - Container -->
<macro name="m3_comp_elevated_card_container_color">?attr/colorSurface</macro>
<dimen name="m3_comp_elevated_card_container_elevation">@dimen/m3_sys_elevation_level1</dimen>
<macro name="m3_comp_elevated_card_container_shape">?attr/shapeAppearanceCornerMedium</macro>
<!-- Enabled - Icon -->
<dimen name="m3_comp_elevated_card_icon_size">24dp</dimen>

</resources>
Loading

0 comments on commit bf7b3c2

Please sign in to comment.