For #23388 - Update scrim to match design system

app/src/main/java/org/mozilla/fenix/theme/FirefoxTheme.kt

@@ -46,9 +46,7 @@ private val darkColorPalette = FirefoxColors(
     layer3 = PhotonColors.DarkGrey30,
     layerAccent = PhotonColors.Violet40,
     layerNonOpaque = PhotonColors.Violet50A32,
-    scrim = PhotonColors.DarkGrey05A45,
-    scrimAccentStart = PhotonColors.Ink80A96,
-    scrimAccentEnd = PhotonColors.DarkGrey90A96,
+    scrim = PhotonColors.DarkGrey90A95,
     gradientStart = PhotonColors.Violet70,
     gradientEnd = PhotonColors.Violet40,
     actionPrimary = PhotonColors.Violet60,
@@ -107,9 +105,7 @@ private val lightColorPalette = FirefoxColors(
     layer3 = PhotonColors.LightGrey20,
     layerAccent = PhotonColors.Ink20,
     layerNonOpaque = PhotonColors.Violet70A12,
-    scrim = PhotonColors.DarkGrey05A45,
-    scrimAccentStart = PhotonColors.DarkGrey90A96,
-    scrimAccentEnd = PhotonColors.DarkGrey30A96,
+    scrim = PhotonColors.DarkGrey30A95,
     gradientStart = PhotonColors.Violet70,
     gradientEnd = PhotonColors.Violet40,
     actionPrimary = PhotonColors.Ink20,
@@ -174,8 +170,6 @@ class FirefoxColors(
     layerAccent: Color,
     layerNonOpaque: Color,
     scrim: Color,
-    scrimAccentStart: Color,
-    scrimAccentEnd: Color,
     gradientStart: Color,
     gradientEnd: Color,
     actionPrimary: Color,
@@ -246,10 +240,6 @@ class FirefoxColors(
         private set
     var scrim by mutableStateOf(scrim)
         private set
-    var scrimAccentStart by mutableStateOf(scrimAccentStart)
-        private set
-    var scrimAccentEnd by mutableStateOf(scrimAccentEnd)
-        private set
     // Tooltip
     var gradientStart by mutableStateOf(gradientStart)
         private set
@@ -414,8 +404,6 @@ class FirefoxColors(
         layerAccent = other.layerAccent
         layerNonOpaque = other.layerNonOpaque
         scrim = other.scrim
-        scrimAccentStart = other.scrimAccentStart
-        scrimAccentEnd = other.scrimAccentEnd
         gradientStart = other.gradientStart
         gradientEnd = other.gradientEnd
         actionPrimary = other.actionPrimary
@@ -475,8 +463,6 @@ class FirefoxColors(
         layerAccent = layerAccent,
         layerNonOpaque = layerNonOpaque,
         scrim = scrim,
-        scrimAccentStart = scrimAccentStart,
-        scrimAccentEnd = scrimAccentEnd,
         gradientStart = gradientStart,
         gradientEnd = gradientEnd,
         actionPrimary = actionPrimary,

app/src/main/res/drawable/scrim_background.xml

@@ -1,10 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
-   - 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/. -->
-<shape xmlns:android="http://schemas.android.com/apk/res/android">
-    <gradient
-        android:startColor="?scrimStart"
-        android:endColor="?scrimEnd"
-        android:angle="45" />
-</shape>

app/src/main/res/layout/component_collection_creation.xml

@@ -96,7 +96,7 @@
         android:layout_width="0dp"
         android:layout_height="0dp"
         android:alpha="0"
-        android:background="@drawable/scrim_background"
+        android:background="?scrim"
         android:visibility="gone"
         app:layout_constraintBottom_toBottomOf="@id/tab_list"
         app:layout_constraintEnd_toEndOf="parent"

app/src/main/res/layout/component_collection_creation_name_collection.xml

@@ -97,7 +97,7 @@
         android:layout_width="0dp"
         android:layout_height="0dp"
         android:alpha="0.5"
-        android:background="@drawable/scrim_background"
+        android:background="?scrim"
         android:visibility="visible"
         app:layout_constraintBottom_toBottomOf="@+id/tab_list"
         app:layout_constraintEnd_toEndOf="parent"

app/src/main/res/layout/component_collection_creation_select_collection.xml

@@ -101,7 +101,7 @@
         android:id="@+id/tab_list_dim"
         android:layout_width="0dp"
         android:layout_height="0dp"
-        android:background="@drawable/scrim_background"
+        android:background="?scrim"
         android:visibility="gone"
         app:layout_constraintBottom_toTopOf="@id/collections_list"
         app:layout_constraintEnd_toEndOf="parent"

app/src/main/res/layout/fragment_create_collection.xml

@@ -8,7 +8,7 @@
     android:id="@+id/createCollectionWrapper"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:background="@drawable/scrim_background"
+    android:background="?scrim"
     android:fitsSystemWindows="true"
     tools:context="org.mozilla.fenix.collections.CollectionCreationFragment">
 

app/src/main/res/layout/fragment_create_shortcut.xml

@@ -8,7 +8,7 @@
     android:id="@+id/createShortcutWrapper"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:background="@drawable/scrim_background"
+    android:background="?scrim"
     android:fitsSystemWindows="true"
     tools:context="org.mozilla.fenix.shortcut.CreateShortcutFragment">
 

app/src/main/res/layout/fragment_onboarding_home_dialog.xml

@@ -10,7 +10,7 @@
     android:overScrollMode="never"
     android:fitsSystemWindows="true"
     android:fillViewport="true"
-    android:background="@drawable/scrim_background"
+    android:background="?scrim"
     android:scrollbars="none">
 
     <androidx.constraintlayout.widget.ConstraintLayout

app/src/main/res/layout/fragment_pwa_onboarding.xml

@@ -8,7 +8,7 @@
     android:id="@+id/createShortcutWrapper"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:background="@drawable/scrim_background"
+    android:background="?scrim"
     android:fitsSystemWindows="true"
     tools:context="org.mozilla.fenix.shortcut.PwaOnboardingDialogFragment">
 

app/src/main/res/layout/fragment_share.xml

@@ -18,7 +18,7 @@
         android:id="@+id/closeSharingScrim"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
-        android:background="@drawable/scrim_background"/>
+        android:background="?scrim"/>
 
     <FrameLayout
         android:id="@+id/closeSharingContent"

app/src/main/res/values-night/colors.xml

@@ -16,9 +16,7 @@
     <color name="fx_mobile_layer_color_accent">@color/photonViolet40</color>
     <!-- Selected tab -->
     <color name="fx_mobile_layer_color_accent_nonopaque">@color/photonViolet50A32</color>
-    <color name="fx_mobile_layer_color_scrim" tools:ignore="UnusedResources">@color/photonDarkGrey05A45</color>
-    <color name="fx_mobile_layer_color_scrim_start">@color/photonInk80A96</color>
-    <color name="fx_mobile_layer_color_scrim_end">@color/photonDarkGrey90A96</color>
+    <color name="fx_mobile_layer_color_scrim">@color/photonDarkGrey90A95</color>
     <!-- Tooltip -->
     <color name="fx_mobile_layer_color_gradient_start">@color/photonViolet70</color>
     <!-- Tooltip -->

app/src/main/res/values/attrs.xml

@@ -4,12 +4,21 @@
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 <resources>
     <!-- Design system color attributes -->
+
+    <!-- Layers -->
     <!-- Search -->
     <attr name="layer3" format="reference" />
+    <attr name="scrim" format="reference" />
+
+    <!-- Text -->
     <!-- Small heading, Text link -->
     <attr name="textAccent" format="reference" />
+
+    <!-- Icon -->
     <!-- Active tab -->
     <attr name="iconActive" format="reference" />
+
+    <!-- Border -->
     <!-- Default, Divider, Dotted -->
     <attr name="borderPrimary" format="reference" />
 
@@ -29,8 +38,6 @@
     <attr name="neutralFaded" format="reference" />
     <attr name="destructive" format="reference"/>
     <attr name="disabled" format="reference" />
-    <attr name="scrimStart" format="reference"/>
-    <attr name="scrimEnd" format="reference"/>
     <attr name="preferenceSectionHeader" format="reference"/>
 
     <!-- Color used in DefaultToolbarMenu for buttons placed at the end of menu items -->

app/src/main/res/values/colors.xml

@@ -16,9 +16,7 @@
     <color name="fx_mobile_layer_color_accent">@color/photonInk20</color>
     <!-- Selected tab -->
     <color name="fx_mobile_layer_color_accent_nonopaque">@color/photonViolet70A12</color>
-    <color name="fx_mobile_layer_color_scrim" tools:ignore="UnusedResources">@color/photonDarkGrey05A45</color>
-    <color name="fx_mobile_layer_color_scrim_start">@color/photonDarkGrey90A96</color>
-    <color name="fx_mobile_layer_color_scrim_end">@color/photonDarkGrey30A96</color>
+    <color name="fx_mobile_layer_color_scrim">@color/photonDarkGrey30A95</color>
     <!-- Tooltip -->
     <color name="fx_mobile_layer_color_gradient_start">@color/photonViolet70</color>
     <!-- Tooltip -->
@@ -141,7 +139,7 @@
     <color name="fx_mobile_private_layer_color_accent" tools:ignore="UnusedResources">@color/photonViolet40</color>
     <!-- Selected tab -->
     <color name="fx_mobile_private_layer_color_accent_nonopaque" tools:ignore="UnusedResources">@color/photonViolet50A32</color>
-    <color name="fx_mobile_private_layer_color_scrim" tools:ignore="UnusedResources">@color/photonDarkGrey05A45</color>
+    <color name="fx_mobile_private_layer_color_scrim">@color/photonDarkGrey90A95</color>
     <!-- Tooltip -->
     <color name="fx_mobile_private_layer_color_gradient_start" tools:ignore="UnusedResources">@color/photonViolet70</color>
     <!-- Tooltip -->
@@ -258,8 +256,6 @@
     <color name="accent_high_contrast_private_theme">#AA71FF</color>
     <color name="neutral_private_theme">@color/photonGrey20</color>
     <color name="neutral_faded_private_theme">#1FFBFBFE</color>
-    <color name="scrimStart_private_theme">@color/photonInk80A96</color>
-    <color name="scrimEnd_private_theme">@color/photonDarkGrey90A96</color>
     <color name="snackbar_private_theme">@color/photonInk20</color>
     <color name="sync_disconnected_icon_fill_private_theme">@color/photonYellow70</color>
     <color name="sync_disconnected_background_private_theme">#5B5846</color>

app/src/main/res/values/styles.xml

@@ -32,12 +32,21 @@
         <item name="mozacSelectCreditCardHeaderTextStyle" tools:ignore="UnusedResources">@style/SelectPromptHeaderTextStyle</item>
 
         <!-- Design system color attributes -->
+
+        <!-- Layers -->
         <!-- Search -->
         <item name="layer3">@color/fx_mobile_layer_color_3</item>
+        <item name="scrim">@color/fx_mobile_layer_color_scrim</item>
+
+        <!-- Text -->
         <!-- Small heading, Text link -->
         <item name="textAccent">@color/fx_mobile_text_color_accent</item>
+
+        <!-- Icon -->
         <!-- Active tab -->
         <item name="iconActive">@color/fx_mobile_icon_color_active</item>
+
+        <!-- Border -->
         <!-- Default, Divider, Dotted -->
         <item name="borderPrimary">@color/fx_mobile_border_color_primary</item>
 
@@ -64,8 +73,6 @@
         <item name="neutralFaded">@color/neutral_faded_normal_theme</item>
         <item name="destructive">@color/fx_mobile_text_color_warning</item>
         <item name="disabled">@color/fx_mobile_text_color_disabled</item>
-        <item name="scrimStart">@color/fx_mobile_layer_color_scrim_start</item>
-        <item name="scrimEnd">@color/fx_mobile_layer_color_scrim_end</item>
         <item name="snackbar">@color/fx_mobile_action_color_primary</item>
         <item name="accentUsedOnDarkBackground">@color/fx_mobile_text_color_accent</item>
         <item name="toolbarStartGradient">@color/fx_mobile_layer_color_1</item>
@@ -212,12 +219,21 @@
         <item name="mozacSelectCreditCardHeaderTextStyle" tools:ignore="UnusedResources">@style/SelectPromptHeaderTextStyle</item>
 
         <!-- Design system color attributes -->
+
+        <!-- Layers -->
         <!-- Search -->
         <item name="layer3">@color/fx_mobile_private_layer_color_3</item>
+        <item name="scrim">@color/fx_mobile_private_layer_color_scrim</item>
+
+        <!-- Text -->
         <!-- Small heading, Text link -->
         <item name="textAccent">@color/fx_mobile_private_text_color_accent</item>
+
+        <!-- Icon -->
         <!-- Active tab -->
         <item name="iconActive">@color/fx_mobile_private_icon_color_active</item>
+
+        <!-- Border -->
         <!-- Default, Divider, Dotted -->
         <item name="borderPrimary">@color/fx_mobile_private_border_color_primary</item>
 
@@ -242,8 +258,6 @@
         <item name="neutralFaded">@color/neutral_faded_private_theme</item>
         <item name="destructive">@color/fx_mobile_private_text_color_warning</item>
         <item name="disabled">@color/fx_mobile_private_text_color_disabled</item>
-        <item name="scrimStart">@color/scrimStart_private_theme</item>
-        <item name="scrimEnd">@color/scrimEnd_private_theme</item>
         <item name="snackbar">@color/snackbar_private_theme</item>
         <item name="accentUsedOnDarkBackground">@color/accent_high_contrast_private_theme</item>
         <item name="toolbarStartGradient">@color/fx_mobile_private_layer_color_4_start</item>