[Tabs] Integrated tokens into M3 styles.

PiperOrigin-RevId: 481709158

lib/java/com/google/android/material/tabs/res/color/m3_tabs_icon_color.xml

@@ -20,8 +20,9 @@
       android:state_enabled="false"/>
 
   <!-- Selected -->
-  <item android:color="?attr/colorPrimary" android:state_selected="true"/>
+  <item android:color="@macro/m3_comp_primary_navigation_tab_with_icon_active_icon_color"
+        android:state_selected="true"/>
 
   <!-- Not selected -->
-  <item android:color="?attr/colorOnSurfaceVariant"/>
+  <item android:color="@macro/m3_comp_primary_navigation_tab_with_icon_inactive_icon_color"/>
 </selector>

lib/java/com/google/android/material/tabs/res/color/m3_tabs_icon_color_secondary.xml

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  Copyright 2021 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
+
+      https://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.
+  -->
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+  <item android:alpha="@dimen/material_emphasis_disabled"
+      android:color="?attr/colorOnSurface"
+      android:state_enabled="false"/>
+
+  <!-- Selected -->
+  <item android:color="@macro/m3_comp_secondary_navigation_tab_with_icon_active_icon_color"
+        android:state_selected="true"/>
+
+  <!-- Not selected -->
+  <item android:color="@macro/m3_comp_secondary_navigation_tab_with_icon_inactive_icon_color"/>
+</selector>

lib/java/com/google/android/material/tabs/res/color/m3_tabs_ripple_color.xml

@@ -20,14 +20,14 @@
 
   <!-- Uses the primary state layer since tapping a selected tab keeps it
        selected. -->
-  <item android:alpha="@dimen/m3_ripple_pressed_alpha"
-      android:color="?attr/colorPrimary"
+  <item android:alpha="@dimen/m3_comp_primary_navigation_tab_active_pressed_state_layer_opacity"
+      android:color="@macro/m3_comp_primary_navigation_tab_active_pressed_state_layer_color"
       android:state_pressed="true" android:state_selected="true"/>
-  <item android:alpha="@dimen/m3_ripple_focused_alpha"
-      android:color="?attr/colorPrimary"
+  <item android:alpha="@dimen/m3_comp_primary_navigation_tab_active_focus_state_layer_opacity"
+      android:color="@macro/m3_comp_primary_navigation_tab_active_focus_state_layer_color"
       android:state_focused="true" android:state_selected="true"/>
-  <item android:alpha="@dimen/m3_ripple_hovered_alpha"
-      android:color="?attr/colorPrimary"
+  <item android:alpha="@dimen/m3_comp_primary_navigation_tab_active_hover_state_layer_opacity"
+      android:color="@macro/m3_comp_primary_navigation_tab_active_hover_state_layer_color"
       android:state_hovered="true" android:state_selected="true"/>
   <item android:alpha="@dimen/m3_ripple_default_alpha"
       android:color="?attr/colorPrimary"
@@ -37,14 +37,14 @@
 
   <!-- Uses the primary state layer since tapping an non-selected tab will
        select it. -->
-  <item android:alpha="@dimen/m3_ripple_selectable_pressed_alpha"
-      android:color="?attr/colorPrimary"
+  <item android:alpha="@dimen/m3_comp_primary_navigation_tab_inactive_pressed_state_layer_opacity"
+      android:color="@macro/m3_comp_primary_navigation_tab_inactive_pressed_state_layer_color"
       android:state_pressed="true"/>
-  <item android:alpha="@dimen/m3_ripple_focused_alpha"
-      android:color="?attr/colorOnSurfaceVariant"
+  <item android:alpha="@dimen/m3_comp_primary_navigation_tab_inactive_focus_state_layer_opacity"
+      android:color="@macro/m3_comp_primary_navigation_tab_inactive_focus_state_layer_color"
       android:state_focused="true"/>
-  <item android:alpha="@dimen/m3_ripple_hovered_alpha"
-      android:color="?attr/colorOnSurfaceVariant"
+  <item android:alpha="@dimen/m3_comp_primary_navigation_tab_inactive_hover_state_layer_opacity"
+      android:color="@macro/m3_comp_primary_navigation_tab_inactive_hover_state_layer_color"
       android:state_hovered="true"/>
   <item android:alpha="@dimen/m3_ripple_default_alpha"
       android:color="?attr/colorOnSurfaceVariant"/>

lib/java/com/google/android/material/tabs/res/color/m3_tabs_ripple_color_secondary.xml

@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  Copyright 2021 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
+
+      https://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.
+  -->
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+
+  <!-- Selected -->
+
+  <!-- Uses the primary state layer since tapping a selected tab keeps it
+       selected. -->
+  <item android:alpha="@dimen/m3_comp_secondary_navigation_tab_pressed_state_layer_opacity"
+      android:color="@macro/m3_comp_secondary_navigation_tab_pressed_state_layer_color"
+      android:state_pressed="true" android:state_selected="true"/>
+  <item android:alpha="@dimen/m3_comp_secondary_navigation_tab_focus_state_layer_opacity"
+      android:color="@macro/m3_comp_secondary_navigation_tab_focus_state_layer_color"
+      android:state_focused="true" android:state_selected="true"/>
+  <item android:alpha="@dimen/m3_comp_secondary_navigation_tab_hover_state_layer_opacity"
+      android:color="@macro/m3_comp_secondary_navigation_tab_hover_state_layer_color"
+      android:state_hovered="true" android:state_selected="true"/>
+  <item android:alpha="@dimen/m3_ripple_default_alpha"
+      android:color="?attr/colorPrimary"
+      android:state_selected="true"/>
+
+  <!-- Not selected -->
+
+  <!-- Uses the primary state layer since tapping an non-selected tab will
+       select it. -->
+  <item android:alpha="@dimen/m3_comp_secondary_navigation_tab_pressed_state_layer_opacity"
+      android:color="@macro/m3_comp_secondary_navigation_tab_pressed_state_layer_color"
+      android:state_pressed="true"/>
+  <item android:alpha="@dimen/m3_comp_secondary_navigation_tab_focus_state_layer_opacity"
+      android:color="@macro/m3_comp_secondary_navigation_tab_focus_state_layer_color"
+      android:state_focused="true"/>
+  <item android:alpha="@dimen/m3_comp_secondary_navigation_tab_hover_state_layer_opacity"
+      android:color="@macro/m3_comp_secondary_navigation_tab_hover_state_layer_color"
+      android:state_hovered="true"/>
+  <item android:alpha="@dimen/m3_ripple_default_alpha"
+      android:color="?attr/colorOnSurfaceVariant"/>
+
+</selector>

lib/java/com/google/android/material/tabs/res/color/m3_tabs_text_color.xml

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  Copyright 2021 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
+
+      https://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.
+  -->
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+  <item android:alpha="@dimen/material_emphasis_disabled"
+      android:color="?attr/colorOnSurface"
+      android:state_enabled="false"/>
+
+  <!-- Selected -->
+  <item android:color="@macro/m3_comp_primary_navigation_tab_with_label_text_active_label_text_color"
+        android:state_selected="true"/>
+
+  <!-- Not selected -->
+  <item android:color="@macro/m3_comp_primary_navigation_tab_with_label_text_inactive_label_text_color"/>
+</selector>

lib/java/com/google/android/material/tabs/res/color/m3_tabs_text_color_secondary.xml

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  Copyright 2021 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
+
+      https://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.
+  -->
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+  <item android:alpha="@dimen/material_emphasis_disabled"
+      android:color="?attr/colorOnSurface"
+      android:state_enabled="false"/>
+
+  <!-- Selected -->
+  <item android:color="@macro/m3_comp_secondary_navigation_tab_active_label_text_color"
+        android:state_selected="true"/>
+
+  <!-- Not selected -->
+  <item android:color="@macro/m3_comp_secondary_navigation_tab_inactive_label_text_color"/>
+</selector>

lib/java/com/google/android/material/tabs/res/drawable-v21/m3_tabs_background.xml

@@ -15,17 +15,19 @@
   limitations under the License.
   -->
 <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+  <!-- Fills the entire area with the divider's color first... -->
   <item>
     <shape
         android:shape="rectangle">
-      <solid android:color="?attr/colorSurfaceVariant"/>
+      <solid android:color="@macro/m3_comp_primary_navigation_tab_divider_color"/>
     </shape>
   </item>
+  <!-- ..., then draws a rectangle with the container color to cover the area not for the divider. -->
   <item
-      android:bottom="1dp">
+      android:bottom="@dimen/m3_comp_primary_navigation_tab_divider_height">
     <shape
         android:shape="rectangle">
-      <solid android:color="?attr/colorSurface"/>
+      <solid android:color="@macro/m3_comp_primary_navigation_tab_container_color"/>
     </shape>
   </item>
 </layer-list>

lib/java/com/google/android/material/tabs/res/drawable-v23/m3_tabs_background.xml

@@ -15,17 +15,19 @@
   limitations under the License.
   -->
 <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+  <!-- Fills the entire area with the container's color first... -->
   <item>
     <shape
         android:shape="rectangle">
-      <solid android:color="?attr/colorSurface"/>
+      <solid android:color="@macro/m3_comp_primary_navigation_tab_container_color"/>
     </shape>
   </item>
+  <!-- ..., then draws a rectangle for the divider at the bottom. -->
   <item
       android:gravity="bottom">
     <shape>
-      <size android:height="1dp" />
-      <solid android:color="?attr/colorSurfaceVariant" />
+      <size android:height="@dimen/m3_comp_primary_navigation_tab_divider_height" />
+      <solid android:color="@macro/m3_comp_primary_navigation_tab_divider_color" />
     </shape>
   </item>
 </layer-list>

lib/java/com/google/android/material/tabs/res/drawable/m3_tabs_line_indicator.xml

@@ -17,6 +17,7 @@
 
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
     android:shape="rectangle">
+  <!-- Color is assigned programmatically with the value of "tabIndicatorColor". -->
   <solid android:color="@android:color/white"/>
-  <size android:height="2dp"/>
+  <size android:height="@dimen/m3_comp_secondary_navigation_tab_active_indicator_height"/>
 </shape>

lib/java/com/google/android/material/tabs/res/drawable/m3_tabs_rounded_line_indicator.xml

@@ -21,13 +21,14 @@
       android:right="2dp">
     <shape
         android:shape="rectangle">
+      <!-- Color is assigned programmatically with the value of "tabIndicatorColor". -->
       <solid android:color="@android:color/white"/>
       <corners
           android:bottomLeftRadius="0dp"
           android:bottomRightRadius="0dp"
           android:topLeftRadius="3dp"
           android:topRightRadius="3dp"/>
-      <size android:height="3dp"/>
+      <size android:height="@dimen/m3_comp_primary_navigation_tab_active_indicator_height"/>
     </shape>
   </item>
 </layer-list>

lib/java/com/google/android/material/tabs/res/layout/design_layout_tab_icon.xml

@@ -16,7 +16,7 @@
   -->
 
 <ImageView xmlns:android="http://schemas.android.com/apk/res/android"
-    android:layout_width="24dp"
-    android:layout_height="24dp"
+    android:layout_width="@dimen/m3_comp_primary_navigation_tab_with_icon_icon_size"
+    android:layout_height="@dimen/m3_comp_primary_navigation_tab_with_icon_icon_size"
     android:contentDescription="@null"
     android:scaleType="centerInside"/>

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

@@ -70,13 +70,14 @@
 
   <!-- Styles for M3 Tabs -->
   <style name="Base.Widget.Material3.TabLayout" parent="Widget.MaterialComponents.TabLayout">
+    <item name="android:background">@macro/m3_comp_primary_navigation_tab_container_color</item>
     <item name="enforceTextAppearance">false</item>
     <item name="tabIconTint">@color/m3_tabs_icon_color</item>
-    <item name="tabTextAppearance">?attr/textAppearanceLabelLarge</item>
-    <item name="tabTextColor">@color/m3_tabs_icon_color</item>
+    <item name="tabTextAppearance">@macro/m3_comp_primary_navigation_tab_with_label_text_label_text_type</item>
+    <item name="tabTextColor">@color/m3_tabs_text_color</item>
     <item name="tabIndicator">@drawable/m3_tabs_rounded_line_indicator</item>
     <item name="tabIndicatorAnimationMode">elastic</item>
-    <item name="tabIndicatorColor">?attr/colorPrimary</item>
+    <item name="tabIndicatorColor">@macro/m3_comp_primary_navigation_tab_active_indicator_color</item>
     <item name="tabRippleColor">@color/m3_tabs_ripple_color</item>
     <item name="tabIndicatorFullWidth">false</item>
     <item name="tabIndicatorAnimationDuration">?attr/motionDurationLong2</item>
@@ -95,7 +96,13 @@
        present in the UI. This style does not have a bottom divider, which is added in v21 because
        the drawable cannot use theme colors pre-21. -->
   <style name="Base.Widget.Material3.TabLayout.Secondary" parent="Widget.Material3.TabLayout">
+    <item name="android:background">@macro/m3_comp_secondary_navigation_tab_container_color</item>
+    <item name="tabIconTint">@color/m3_tabs_icon_color_secondary</item>
+    <item name="tabTextAppearance">@macro/m3_comp_secondary_navigation_tab_label_text_type</item>
+    <item name="tabTextColor">@color/m3_tabs_text_color_secondary</item>
     <item name="tabIndicator">@drawable/m3_tabs_line_indicator</item>
+    <item name="tabIndicatorColor">@macro/m3_comp_secondary_navigation_tab_active_indicator_color</item>
+    <item name="tabRippleColor">@color/m3_tabs_ripple_color_secondary</item>
     <item name="tabIndicatorFullWidth">true</item>
   </style>
 

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

@@ -0,0 +1,76 @@
+<?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.primary-navigation-tab) in default context. -->
+  <!-- Enabled - Container -->
+  <macro name="m3_comp_primary_navigation_tab_container_color">?attr/colorSurface</macro>
+  <!-- Enabled - Label text -->
+  <macro name="m3_comp_primary_navigation_tab_with_label_text_label_text_type">?attr/textAppearanceTitleSmall</macro>
+  <macro name="m3_comp_primary_navigation_tab_with_label_text_active_label_text_color">?attr/colorPrimary</macro>
+  <macro name="m3_comp_primary_navigation_tab_with_label_text_inactive_label_text_color">?attr/colorOnSurfaceVariant</macro>
+  <!-- Enabled - Icon -->
+  <dimen name="m3_comp_primary_navigation_tab_with_icon_icon_size">24dp</dimen>
+  <macro name="m3_comp_primary_navigation_tab_with_icon_active_icon_color">?attr/colorPrimary</macro>
+  <macro name="m3_comp_primary_navigation_tab_with_icon_inactive_icon_color">?attr/colorOnSurfaceVariant</macro>
+  <!-- Enabled - Divider -->
+  <macro name="m3_comp_primary_navigation_tab_divider_color">?attr/colorSurfaceVariant</macro>
+  <dimen name="m3_comp_primary_navigation_tab_divider_height">1dp</dimen>
+  <!-- Enabled - Active indicator -->
+  <macro name="m3_comp_primary_navigation_tab_active_indicator_color">?attr/colorPrimary</macro>
+  <dimen name="m3_comp_primary_navigation_tab_active_indicator_height">3dp</dimen>
+  <!-- Hovered - State layer -->
+  <macro name="m3_comp_primary_navigation_tab_active_hover_state_layer_color">?attr/colorPrimary</macro>
+  <dimen name="m3_comp_primary_navigation_tab_active_hover_state_layer_opacity">@dimen/m3_sys_state_hover_state_layer_opacity</dimen>
+  <macro name="m3_comp_primary_navigation_tab_inactive_hover_state_layer_color">?attr/colorOnSurface</macro>
+  <dimen name="m3_comp_primary_navigation_tab_inactive_hover_state_layer_opacity">@dimen/m3_sys_state_hover_state_layer_opacity</dimen>
+  <!-- Focused - State layer -->
+  <macro name="m3_comp_primary_navigation_tab_active_focus_state_layer_color">?attr/colorPrimary</macro>
+  <dimen name="m3_comp_primary_navigation_tab_active_focus_state_layer_opacity">@dimen/m3_sys_state_focus_state_layer_opacity</dimen>
+  <macro name="m3_comp_primary_navigation_tab_inactive_focus_state_layer_color">?attr/colorOnSurface</macro>
+  <dimen name="m3_comp_primary_navigation_tab_inactive_focus_state_layer_opacity">@dimen/m3_sys_state_focus_state_layer_opacity</dimen>
+  <!-- Pressed (rippple) - State layer -->
+  <macro name="m3_comp_primary_navigation_tab_active_pressed_state_layer_color">?attr/colorPrimary</macro>
+  <dimen name="m3_comp_primary_navigation_tab_active_pressed_state_layer_opacity">@dimen/m3_sys_state_pressed_state_layer_opacity</dimen>
+  <macro name="m3_comp_primary_navigation_tab_inactive_pressed_state_layer_color">?attr/colorPrimary</macro>
+  <dimen name="m3_comp_primary_navigation_tab_inactive_pressed_state_layer_opacity">@dimen/m3_sys_state_pressed_state_layer_opacity</dimen>
+
+  <!-- Generated from token set (md.comp.secondary-navigation-tab) in default context. -->
+  <!-- Enabled - Container -->
+  <macro name="m3_comp_secondary_navigation_tab_container_color">?attr/colorSurface</macro>
+  <!-- Enabled - Label text -->
+  <macro name="m3_comp_secondary_navigation_tab_label_text_type">?attr/textAppearanceTitleSmall</macro>
+  <macro name="m3_comp_secondary_navigation_tab_active_label_text_color">?attr/colorOnSurface</macro>
+  <macro name="m3_comp_secondary_navigation_tab_inactive_label_text_color">?attr/colorOnSurfaceVariant</macro>
+  <!-- Enabled - Icon -->
+  <macro name="m3_comp_secondary_navigation_tab_with_icon_active_icon_color">?attr/colorOnSurface</macro>
+  <macro name="m3_comp_secondary_navigation_tab_with_icon_inactive_icon_color">?attr/colorOnSurfaceVariant</macro>
+  <!-- Enabled - Active indicator -->
+  <macro name="m3_comp_secondary_navigation_tab_active_indicator_color">?attr/colorPrimary</macro>
+  <dimen name="m3_comp_secondary_navigation_tab_active_indicator_height">2dp</dimen>
+  <!-- Hovered - State layer -->
+  <macro name="m3_comp_secondary_navigation_tab_hover_state_layer_color">?attr/colorOnSurface</macro>
+  <dimen name="m3_comp_secondary_navigation_tab_hover_state_layer_opacity">@dimen/m3_sys_state_hover_state_layer_opacity</dimen>
+  <!-- Focused - State layer -->
+  <macro name="m3_comp_secondary_navigation_tab_focus_state_layer_color">?attr/colorOnSurface</macro>
+  <dimen name="m3_comp_secondary_navigation_tab_focus_state_layer_opacity">@dimen/m3_sys_state_focus_state_layer_opacity</dimen>
+  <!-- Pressed (rippple) - State layer -->
+  <macro name="m3_comp_secondary_navigation_tab_pressed_state_layer_color">?attr/colorOnSurface</macro>
+  <dimen name="m3_comp_secondary_navigation_tab_pressed_state_layer_opacity">@dimen/m3_sys_state_pressed_state_layer_opacity</dimen>
+</resources>