commit acf62549250b47816dd8c7bac68e811196a479d8
parent 78734c2bf38171b9379ac0a40c3dc260f675b318
Author: Gabriel Luong <gabriel.luong@gmail.com>
Date: Thu, 16 Oct 2025 05:12:55 +0000
Bug 1993368 - Part 2: Add the Material3 color variables in XML r=android-reviewers,007
Differential Revision: https://phabricator.services.mozilla.com/D268060
Diffstat:
3 files changed, 234 insertions(+), 0 deletions(-)
diff --git a/mobile/android/fenix/app/src/main/res/values-night/colors.xml b/mobile/android/fenix/app/src/main/res/values-night/colors.xml
@@ -3,6 +3,52 @@
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<resources xmlns:tools="http://schemas.android.com/tools">
+ <!-- Material3 color variables -->
+ <color name="fx_mobile_primary">@color/photonViolet10</color>
+ <color name="fx_mobile_on_primary">@color/photonDarkGrey90</color>
+ <color name="fx_mobile_primary_container">@color/photonViolet80</color>
+ <color name="fx_mobile_on_primary_container">@color/photonLightGrey05</color>
+ <color name="fx_mobile_primary_inverse">@color/photonViolet70</color>
+ <color name="fx_mobile_secondary">@color/photonLightGrey40</color>
+ <color name="fx_mobile_on_secondary">@color/photonDarkGrey90</color>
+ <color name="fx_mobile_secondary_container">#FF4B3974</color>
+ <color name="fx_mobile_on_secondary_container">@color/photonLightGrey05</color>
+ <color name="fx_mobile_tertiary">@color/photonViolet20</color>
+ <color name="fx_mobile_on_tertiary">@color/photonDarkGrey90</color>
+ <color name="fx_mobile_tertiary_container">@color/photonPink80</color>
+ <color name="fx_mobile_on_tertiary_container">@color/photonLightGrey05</color>
+ <color name="fx_mobile_background">@color/photonDarkGrey60</color>
+ <color name="fx_mobile_on_background">@color/photonLightGrey05</color>
+ <color name="fx_mobile_surface">@color/photonDarkGrey60</color>
+ <color name="fx_mobile_on_surface">@color/photonLightGrey05</color>
+ <color name="fx_mobile_surface_variant">@color/photonDarkGrey40</color>
+ <color name="fx_mobile_on_surface_variant">@color/photonLightGrey40</color>
+ <color name="fx_mobile_surface_inverse">@color/photonLightGrey10</color>
+ <color name="fx_mobile_on_surface_inverse">@color/photonDarkGrey90</color>
+ <color name="fx_mobile_error">@color/photonRed20</color>
+ <color name="fx_mobile_on_error">@color/photonDarkGrey90</color>
+ <color name="fx_mobile_error_container">@color/photonRed80</color>
+ <color name="fx_mobile_on_error_container">@color/photonLightGrey05</color>
+ <color name="fx_mobile_outline">@color/photonLightGrey80</color>
+ <color name="fx_mobile_outline_variant">@color/photonDarkGrey05</color>
+ <color name="fx_mobile_surface_bright">@color/photonDarkGrey40</color>
+ <color name="fx_mobile_surface_dim">@color/photonDarkGrey80</color>
+ <color name="fx_mobile_surface_container">@color/photonDarkGrey60</color>
+ <color name="fx_mobile_surface_container_high">@color/photonDarkGrey50</color>
+ <color name="fx_mobile_surface_container_highest">@color/photonDarkGrey40</color>
+ <color name="fx_mobile_surface_container_low">@color/photonDarkGrey70</color>
+ <color name="fx_mobile_surface_container_lowest">@color/photonDarkGrey80</color>
+ <color name="fx_mobile_primary_fixed_dim">@color/photonViolet80</color>
+ <color name="fx_mobile_on_primary_fixed_variant">@color/photonDarkGrey90</color>
+ <color name="fx_mobile_secondary_fixed">#FF4B3974</color>
+ <color name="fx_mobile_secondary_fixed_dim">#FF4B3974</color>
+ <color name="fx_mobile_on_secondary_fixed">@color/photonLightGrey05</color>
+ <color name="fx_mobile_on_secondary_fixed_variant">@color/photonDarkGrey90</color>
+ <color name="fx_mobile_tertiary_fixed">@color/photonPink80</color>
+ <color name="fx_mobile_tertiary_fixed_dim">@color/photonPink80</color>
+ <color name="fx_mobile_on_tertiary_fixed">@color/photonLightGrey05</color>
+ <color name="fx_mobile_on_tertiary_fixed_variant">@color/photonDarkGrey90</color>
+
<!-- Design system color variables -->
<!-- Layers -->
diff --git a/mobile/android/fenix/app/src/main/res/values/colors.xml b/mobile/android/fenix/app/src/main/res/values/colors.xml
@@ -3,6 +3,52 @@
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<resources xmlns:tools="http://schemas.android.com/tools">
+ <!-- Material3 color variables -->
+ <color name="fx_mobile_primary">@color/photonInk20</color>
+ <color name="fx_mobile_on_primary">@color/photonLightGrey05</color>
+ <color name="fx_mobile_primary_container">@color/photonViolet05</color>
+ <color name="fx_mobile_on_primary_container">@color/photonDarkGrey90</color>
+ <color name="fx_mobile_primary_inverse">@color/photonViolet20</color>
+ <color name="fx_mobile_secondary">@color/photonDarkGrey05</color>
+ <color name="fx_mobile_on_secondary">@color/photonLightGrey05</color>
+ <color name="fx_mobile_secondary_container">#FFE6E0F5</color>
+ <color name="fx_mobile_on_secondary_container">@color/photonDarkGrey90</color>
+ <color name="fx_mobile_tertiary">@color/photonViolet70</color>
+ <color name="fx_mobile_on_tertiary">@color/photonLightGrey05</color>
+ <color name="fx_mobile_tertiary_container">@color/photonPink05</color>
+ <color name="fx_mobile_on_tertiary_container">@color/photonDarkGrey90</color>
+ <color name="fx_mobile_background">@color/photonLightGrey10</color>
+ <color name="fx_mobile_on_background">@color/photonDarkGrey90</color>
+ <color name="fx_mobile_surface">@color/photonLightGrey10</color>
+ <color name="fx_mobile_on_surface">@color/photonDarkGrey90</color>
+ <color name="fx_mobile_surface_variant">@color/photonLightGrey30</color>
+ <color name="fx_mobile_on_surface_variant">@color/photonDarkGrey05</color>
+ <color name="fx_mobile_surface_inverse">@color/photonDarkGrey60</color>
+ <color name="fx_mobile_on_surface_inverse">@color/photonLightGrey05</color>
+ <color name="fx_mobile_error">@color/photonRed70</color>
+ <color name="fx_mobile_on_error">@color/photonLightGrey05</color>
+ <color name="fx_mobile_error_container">@color/photonRed05</color>
+ <color name="fx_mobile_on_error_container">@color/photonDarkGrey90</color>
+ <color name="fx_mobile_outline">@color/photonLightGrey90</color>
+ <color name="fx_mobile_outline_variant">@color/photonLightGrey30</color>
+ <color name="fx_mobile_surface_bright">@color/photonWhite</color>
+ <color name="fx_mobile_surface_dim">@color/photonLightGrey30</color>
+ <color name="fx_mobile_surface_container">@color/photonLightGrey10</color>
+ <color name="fx_mobile_surface_container_high">@color/photonLightGrey20</color>
+ <color name="fx_mobile_surface_container_highest">@color/photonLightGrey30</color>
+ <color name="fx_mobile_surface_container_low">@color/photonLightGrey05</color>
+ <color name="fx_mobile_surface_container_lowest">@color/photonWhite</color>
+ <color name="fx_mobile_primary_fixed_dim">@color/photonViolet05</color>
+ <color name="fx_mobile_on_primary_fixed_variant">@color/photonLightGrey05</color>
+ <color name="fx_mobile_secondary_fixed">#FFE6E0F5</color>
+ <color name="fx_mobile_secondary_fixed_dim">#FFE6E0F5</color>
+ <color name="fx_mobile_on_secondary_fixed">@color/photonDarkGrey90</color>
+ <color name="fx_mobile_on_secondary_fixed_variant">@color/photonLightGrey05</color>
+ <color name="fx_mobile_tertiary_fixed">@color/photonPink05</color>
+ <color name="fx_mobile_tertiary_fixed_dim">@color/photonPink05</color>
+ <color name="fx_mobile_on_tertiary_fixed">@color/photonDarkGrey90</color>
+ <color name="fx_mobile_on_tertiary_fixed_variant">@color/photonLightGrey05</color>
+
<!-- Design system color variables -->
<!-- Layers -->
@@ -158,6 +204,52 @@
<!-- Private theme color variables -->
+ <!-- Material3 color variables -->
+ <color name="fx_mobile_private_primary">@color/photonViolet10</color>
+ <color name="fx_mobile_private_on_primary">@color/photonDarkGrey90</color>
+ <color name="fx_mobile_private_primary_container">@color/photonViolet80</color>
+ <color name="fx_mobile_private_on_primary_container">@color/photonLightGrey05</color>
+ <color name="fx_mobile_private_primary_inverse">@color/photonViolet70</color>
+ <color name="fx_mobile_private_secondary">@color/photonLightGrey40</color>
+ <color name="fx_mobile_private_on_secondary">@color/photonDarkGrey90</color>
+ <color name="fx_mobile_private_secondary_container">#FF4B3974</color>
+ <color name="fx_mobile_private_on_secondary_container">@color/photonLightGrey05</color>
+ <color name="fx_mobile_private_tertiary">@color/photonViolet20</color>
+ <color name="fx_mobile_private_on_tertiary">@color/photonDarkGrey90</color>
+ <color name="fx_mobile_private_tertiary_container">@color/photonPink80</color>
+ <color name="fx_mobile_private_on_tertiary_container">@color/photonLightGrey05</color>
+ <color name="fx_mobile_private_background">@color/photonLightGrey10</color>
+ <color name="fx_mobile_private_on_background">@color/photonDarkGrey90</color>
+ <color name="fx_mobile_private_surface">#FF342B4A</color>
+ <color name="fx_mobile_private_on_surface">@color/photonLightGrey05</color>
+ <color name="fx_mobile_private_surface_variant">#FF413857</color>
+ <color name="fx_mobile_private_on_surface_variant">@color/photonLightGrey40</color>
+ <color name="fx_mobile_private_surface_inverse">@color/photonLightGrey10</color>
+ <color name="fx_mobile_private_on_surface_inverse">@color/photonDarkGrey90</color>
+ <color name="fx_mobile_private_error">@color/photonRed20</color>
+ <color name="fx_mobile_private_on_error">@color/photonDarkGrey90</color>
+ <color name="fx_mobile_private_error_container">@color/photonRed80</color>
+ <color name="fx_mobile_private_on_error_container">@color/photonLightGrey05</color>
+ <color name="fx_mobile_private_outline">@color/photonLightGrey80</color>
+ <color name="fx_mobile_private_outline_variant">@color/photonDarkGrey05</color>
+ <color name="fx_mobile_private_surface_bright">#FF413857</color>
+ <color name="fx_mobile_private_surface_dim">@color/photonInk90</color>
+ <color name="fx_mobile_private_surface_container">#FF342B4A</color>
+ <color name="fx_mobile_private_surface_container_high">#FF3B3251</color>
+ <color name="fx_mobile_private_surface_container_highest">#FF413857</color>
+ <color name="fx_mobile_private_surface_container_low">#FF281C3D</color>
+ <color name="fx_mobile_private_surface_container_lowest">@color/photonInk90</color>
+ <color name="fx_mobile_private_primary_fixed_dim">@color/photonViolet80</color>
+ <color name="fx_mobile_private_on_primary_fixed_variant">@color/photonDarkGrey90</color>
+ <color name="fx_mobile_private_secondary_fixed">#FF4B3974</color>
+ <color name="fx_mobile_private_secondary_fixed_dim">#FF4B3974</color>
+ <color name="fx_mobile_private_on_secondary_fixed">@color/photonLightGrey05</color>
+ <color name="fx_mobile_private_on_secondary_fixed_variant">@color/photonDarkGrey90</color>
+ <color name="fx_mobile_private_tertiary_fixed">@color/photonPink80</color>
+ <color name="fx_mobile_private_tertiary_fixed_dim">@color/photonPink80</color>
+ <color name="fx_mobile_private_on_tertiary_fixed">@color/photonLightGrey05</color>
+ <color name="fx_mobile_private_on_tertiary_fixed_variant">@color/photonDarkGrey90</color>
+
<!-- Layers -->
<!-- Default Screen background, Frontlayer background, App Bar Top, App Bar Bottom, Frontlayer header -->
<color name="fx_mobile_private_layer_color_1">@color/photonViolet90</color>
diff --git a/mobile/android/fenix/app/src/main/res/values/styles.xml b/mobile/android/fenix/app/src/main/res/values/styles.xml
@@ -47,6 +47,54 @@
<item name="mozacSelectCreditCardHeaderTextStyle" tools:ignore="UnusedResources">@style/SelectPromptHeaderTextStyle</item>
<item name="mozacSelectAddressHeaderTextStyle" tools:ignore="UnusedResources">@style/SelectPromptHeaderTextStyle</item>
+ <!-- Material3 -->
+ <item name="colorPrimary">@color/fx_mobile_primary</item>
+ <item name="colorOnPrimary">@color/fx_mobile_on_primary</item>
+ <item name="colorPrimaryContainer">@color/fx_mobile_primary_container</item>
+ <item name="colorOnPrimaryContainer">@color/fx_mobile_on_primary_container</item>
+ <item name="colorPrimaryInverse">@color/fx_mobile_primary_inverse</item>
+ <item name="colorSecondary">@color/fx_mobile_secondary</item>
+ <item name="colorOnSecondary">@color/fx_mobile_on_secondary</item>
+ <item name="colorSecondaryContainer">@color/fx_mobile_secondary_container</item>
+ <item name="colorOnSecondaryContainer">@color/fx_mobile_on_secondary_container</item>
+ <item name="colorTertiary">@color/fx_mobile_tertiary</item>
+ <item name="colorOnTertiary">@color/fx_mobile_on_tertiary</item>
+ <item name="colorTertiaryContainer">@color/fx_mobile_tertiary_container</item>
+ <item name="colorOnTertiaryContainer">@color/fx_mobile_on_tertiary_container</item>
+ <item name="android:colorBackground">@color/fx_mobile_background</item>
+ <item name="colorOnBackground">@color/fx_mobile_on_background</item>
+ <item name="colorSurface">@color/fx_mobile_surface</item>
+ <item name="colorOnSurface">@color/fx_mobile_on_surface</item>
+ <item name="colorSurfaceVariant">@color/fx_mobile_surface_variant</item>
+ <item name="colorOnSurfaceVariant">@color/fx_mobile_on_surface_variant</item>
+ <item name="colorSurfaceInverse">@color/fx_mobile_surface_inverse</item>
+ <item name="colorOnSurfaceInverse">@color/fx_mobile_on_surface_inverse</item>
+ <item name="colorError">@color/fx_mobile_error</item>
+ <item name="colorOnError">@color/fx_mobile_on_error</item>
+ <item name="colorErrorContainer">@color/fx_mobile_error_container</item>
+ <item name="colorOnErrorContainer">@color/fx_mobile_on_error_container</item>
+ <item name="colorOutline">@color/fx_mobile_outline</item>
+ <item name="colorOutlineVariant">@color/fx_mobile_outline_variant</item>
+ <item name="colorSurfaceBright">@color/fx_mobile_surface_bright</item>
+ <item name="colorSurfaceDim">@color/fx_mobile_surface_dim</item>
+ <item name="colorSurfaceContainer">@color/fx_mobile_surface_container</item>
+ <item name="colorSurfaceContainerHigh">@color/fx_mobile_surface_container_high</item>
+ <item name="colorSurfaceContainerHighest">@color/fx_mobile_surface_container_highest</item>
+ <item name="colorSurfaceContainerLow">@color/fx_mobile_surface_container_low</item>
+ <item name="colorSurfaceContainerLowest">@color/fx_mobile_surface_container_lowest</item>
+ <item name="colorPrimaryFixed">@color/photonViolet05</item>
+ <item name="colorPrimaryFixedDim">@color/fx_mobile_primary_fixed_dim</item>
+ <item name="colorOnPrimaryFixed">@color/photonDarkGrey90</item>
+ <item name="colorOnPrimaryFixedVariant">@color/fx_mobile_on_primary_fixed_variant</item>
+ <item name="colorSecondaryFixed">@color/fx_mobile_secondary_fixed</item>
+ <item name="colorSecondaryFixedDim">@color/fx_mobile_secondary_fixed_dim</item>
+ <item name="colorOnSecondaryFixed">@color/fx_mobile_on_secondary_fixed</item>
+ <item name="colorOnSecondaryFixedVariant">@color/fx_mobile_on_secondary_fixed_variant</item>
+ <item name="colorTertiaryFixed">@color/fx_mobile_tertiary_fixed</item>
+ <item name="colorTertiaryFixedDim">@color/fx_mobile_tertiary_fixed_dim</item>
+ <item name="colorOnTertiaryFixed">@color/fx_mobile_on_tertiary_fixed</item>
+ <item name="colorOnTertiaryFixedVariant">@color/fx_mobile_on_tertiary_fixed_variant</item>
+
<!-- Design system color attributes -->
<!-- Layers -->
@@ -289,6 +337,54 @@
<item name="mozacSelectCreditCardHeaderTextStyle" tools:ignore="UnusedResources">@style/SelectPromptHeaderTextStyle</item>
<item name="mozacSelectAddressHeaderTextStyle" tools:ignore="UnusedResources">@style/SelectPromptHeaderTextStyle</item>
+ <!-- Material3 -->
+ <item name="colorPrimary">@color/fx_mobile_private_primary</item>
+ <item name="colorOnPrimary">@color/fx_mobile_private_on_primary</item>
+ <item name="colorPrimaryContainer">@color/fx_mobile_private_primary_container</item>
+ <item name="colorOnPrimaryContainer">@color/fx_mobile_private_on_primary_container</item>
+ <item name="colorPrimaryInverse">@color/fx_mobile_private_primary_inverse</item>
+ <item name="colorSecondary">@color/fx_mobile_private_secondary</item>
+ <item name="colorOnSecondary">@color/fx_mobile_private_on_secondary</item>
+ <item name="colorSecondaryContainer">@color/fx_mobile_private_secondary_container</item>
+ <item name="colorOnSecondaryContainer">@color/fx_mobile_private_on_secondary_container</item>
+ <item name="colorTertiary">@color/fx_mobile_private_tertiary</item>
+ <item name="colorOnTertiary">@color/fx_mobile_private_on_tertiary</item>
+ <item name="colorTertiaryContainer">@color/fx_mobile_private_tertiary_container</item>
+ <item name="colorOnTertiaryContainer">@color/fx_mobile_private_on_tertiary_container</item>
+ <item name="android:colorBackground">@color/fx_mobile_private_background</item>
+ <item name="colorOnBackground">@color/fx_mobile_private_on_background</item>
+ <item name="colorSurface">@color/fx_mobile_private_surface</item>
+ <item name="colorOnSurface">@color/fx_mobile_private_on_surface</item>
+ <item name="colorSurfaceVariant">@color/fx_mobile_private_surface_variant</item>
+ <item name="colorOnSurfaceVariant">@color/fx_mobile_private_on_surface_variant</item>
+ <item name="colorSurfaceInverse">@color/fx_mobile_private_surface_inverse</item>
+ <item name="colorOnSurfaceInverse">@color/fx_mobile_private_on_surface_inverse</item>
+ <item name="colorError">@color/fx_mobile_private_error</item>
+ <item name="colorOnError">@color/fx_mobile_private_on_error</item>
+ <item name="colorErrorContainer">@color/fx_mobile_private_error_container</item>
+ <item name="colorOnErrorContainer">@color/fx_mobile_private_on_error_container</item>
+ <item name="colorOutline">@color/fx_mobile_private_outline</item>
+ <item name="colorOutlineVariant">@color/fx_mobile_private_outline_variant</item>
+ <item name="colorSurfaceBright">@color/fx_mobile_private_surface_bright</item>
+ <item name="colorSurfaceDim">@color/fx_mobile_private_surface_dim</item>
+ <item name="colorSurfaceContainer">@color/fx_mobile_private_surface_container</item>
+ <item name="colorSurfaceContainerHigh">@color/fx_mobile_private_surface_container_high</item>
+ <item name="colorSurfaceContainerHighest">@color/fx_mobile_private_surface_container_highest</item>
+ <item name="colorSurfaceContainerLow">@color/fx_mobile_private_surface_container_low</item>
+ <item name="colorSurfaceContainerLowest">@color/fx_mobile_private_surface_container_lowest</item>
+ <item name="colorPrimaryFixed">@color/photonViolet05</item>
+ <item name="colorPrimaryFixedDim">@color/fx_mobile_private_primary_fixed_dim</item>
+ <item name="colorOnPrimaryFixed">@color/photonDarkGrey90</item>
+ <item name="colorOnPrimaryFixedVariant">@color/fx_mobile_private_on_primary_fixed_variant</item>
+ <item name="colorSecondaryFixed">@color/fx_mobile_private_secondary_fixed</item>
+ <item name="colorSecondaryFixedDim">@color/fx_mobile_private_secondary_fixed_dim</item>
+ <item name="colorOnSecondaryFixed">@color/fx_mobile_private_on_secondary_fixed</item>
+ <item name="colorOnSecondaryFixedVariant">@color/fx_mobile_private_on_secondary_fixed_variant</item>
+ <item name="colorTertiaryFixed">@color/fx_mobile_private_tertiary_fixed</item>
+ <item name="colorTertiaryFixedDim">@color/fx_mobile_private_tertiary_fixed_dim</item>
+ <item name="colorOnTertiaryFixed">@color/fx_mobile_private_on_tertiary_fixed</item>
+ <item name="colorOnTertiaryFixedVariant">@color/fx_mobile_private_on_tertiary_fixed_variant</item>
+
<!-- Design system color attributes -->
<!-- Layers -->
