Post visual update: Update tab card style

app/src/main/java/com/duckduckgo/app/global/view/FaviconImageView.kt

@@ -49,7 +49,7 @@ fun ImageView.loadFavicon(
             .load(file)
             .diskCacheStrategy(DiskCacheStrategy.NONE)
             .skipMemoryCache(true)
-            .transform(RoundedCorners(10))
+            .transform(RoundedCorners(context.resources.getDimensionPixelSize(CommonR.dimen.verySmallShapeCornerRadius)))
             .placeholder(defaultDrawable)
             .error(defaultDrawable)
             .into(this)
@@ -70,7 +70,7 @@ fun ImageView.loadFavicon(
             .load(bitmap)
             .diskCacheStrategy(DiskCacheStrategy.NONE)
             .skipMemoryCache(true)
-            .transform(RoundedCorners(10))
+            .transform(RoundedCorners(context.resources.getDimensionPixelSize(CommonR.dimen.verySmallShapeCornerRadius)))
             .placeholder(defaultDrawable)
             .error(defaultDrawable)
             .into(this)
@@ -97,7 +97,7 @@ fun generateDefaultDrawable(
     context: Context,
     domain: String,
     overridePlaceholderCharacter: String? = null,
-    @DimenRes cornerRadius: Int = CommonR.dimen.keyline_0,
+    @DimenRes cornerRadius: Int = CommonR.dimen.verySmallShapeCornerRadius,
 ): Drawable {
     return object : Drawable() {
         private val baseHost: String = domain.toUri().baseHost ?: ""

app/src/main/java/com/duckduckgo/app/tabs/ui/TabSwitcherAdapter.kt

@@ -19,8 +19,10 @@ package com.duckduckgo.app.tabs.ui
 import android.annotation.SuppressLint
 import android.content.Context
 import android.graphics.Bitmap
+import android.graphics.Rect
 import android.os.Bundle
 import android.view.LayoutInflater
+import android.view.TouchDelegate
 import android.view.View
 import android.view.ViewGroup
 import android.widget.ImageView
@@ -65,6 +67,7 @@ import com.duckduckgo.app.tabs.ui.TabSwitcherItem.TrackerAnimationInfoPanel.Comp
 import com.duckduckgo.app.tabs.ui.TabSwitcherItem.TrackerAnimationInfoPanel.Companion.ANIMATED_TILE_NO_REPLACE_ALPHA
 import com.duckduckgo.common.ui.view.hide
 import com.duckduckgo.common.ui.view.show
+import com.duckduckgo.common.ui.view.toPx
 import com.duckduckgo.common.utils.DispatcherProvider
 import com.duckduckgo.common.utils.swap
 import com.duckduckgo.mobile.android.R as AndroidR
@@ -104,10 +107,12 @@ class TabSwitcherAdapter(
         return when (viewType) {
             GRID_TAB -> {
                 val binding = ItemTabGridBinding.inflate(inflater, parent, false)
+                addExtraCloseButtonTouchArea(binding.close)
                 TabSwitcherViewHolder.GridTabViewHolder(binding)
             }
             LIST_TAB -> {
                 val binding = ItemTabListBinding.inflate(inflater, parent, false)
+                addExtraCloseButtonTouchArea(binding.close)
                 TabSwitcherViewHolder.ListTabViewHolder(binding)
             }
             TRACKER_ANIMATION_TILE_INFO_PANEL -> {
@@ -460,6 +465,8 @@ class TabSwitcherAdapter(
             const val GRID_TAB = 0
             const val LIST_TAB = 1
             const val TRACKER_ANIMATION_TILE_INFO_PANEL = 2
+
+            const val EXTRA_CLOSE_BUTTON_TOUCH_AREA = 6 // dp
         }
 
         interface TabViewHolder {
@@ -518,3 +525,17 @@ class TabSwitcherAdapter(
         ) : TabSwitcherViewHolder(binding.root)
     }
 }
+
+private fun addExtraCloseButtonTouchArea(closeButton: ImageView) {
+    val parent = closeButton.parent as View
+    parent.post {
+        val extraSpace = TabSwitcherAdapter.TabSwitcherViewHolder.Companion.EXTRA_CLOSE_BUTTON_TOUCH_AREA.toPx()
+        val touchableArea = Rect()
+        closeButton.getHitRect(touchableArea)
+        touchableArea.top -= extraSpace
+        touchableArea.bottom += extraSpace
+        touchableArea.left -= extraSpace
+        touchableArea.right += extraSpace
+        parent.touchDelegate = TouchDelegate(touchableArea, closeButton)
+    }
+}

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

@@ -19,6 +19,7 @@
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:layout_margin="@dimen/keyline_2"
+    style="@style/Widget.DuckDuckGo.TabCardView"
     app:cardCornerRadius="@dimen/mediumShapeCornerRadius">
 
     <androidx.constraintlayout.widget.ConstraintLayout
@@ -58,7 +59,7 @@
             android:contentDescription="@string/closeContentDescription"
             android:layout_marginTop="2dp"
             android:padding="8dp"
-            android:src="@drawable/ic_close_solid_16"
+            android:src="@drawable/ic_close_16"
             android:background="@drawable/selectable_circular_ripple"
             app:tint="?attr/daxColorTabHighlight"
             app:layout_constraintEnd_toEndOf="parent"

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

@@ -20,6 +20,7 @@
     android:layout_height="wrap_content"
     android:layout_margin="@dimen/keyline_2"
     android:minHeight="72dp"
+    style="@style/Widget.DuckDuckGo.TabCardView"
     app:cardCornerRadius="@dimen/mediumShapeCornerRadius">
 
     <androidx.constraintlayout.widget.ConstraintLayout
@@ -61,7 +62,7 @@
             android:layout_height="wrap_content"
             android:contentDescription="@string/closeContentDescription"
             android:padding="@dimen/keyline_2"
-            android:src="@drawable/ic_close_solid_16"
+            android:src="@drawable/ic_close_16"
             android:background="@drawable/selectable_circular_ripple"
             app:tint="?attr/daxColorTabHighlight"
             app:layout_constraintBottom_toBottomOf="parent"

common/common-ui/src/main/res/drawable/ic_close_16.xml

@@ -0,0 +1,25 @@
+<!--
+  ~ Copyright (c) 2025 DuckDuckGo
+  ~
+  ~ 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.
+  -->
+
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="16dp"
+    android:height="16dp"
+    android:viewportWidth="16"
+    android:viewportHeight="16">
+  <path
+      android:pathData="M13.817,3.067a0.625,0.625 0,1 0,-0.884 -0.884L8,7.116 3.067,2.183a0.625,0.625 0,1 0,-0.884 0.884L7.116,8l-4.933,4.933a0.625,0.625 0,1 0,0.884 0.884L8,8.884l4.933,4.933a0.625,0.625 0,1 0,0.884 -0.884L8.884,8l4.933,-4.933Z"
+      android:fillColor="?attr/daxColorPrimaryIcon" />
+</vector>

common/common-ui/src/main/res/values/design-system-colors.xml

@@ -48,6 +48,7 @@
     <attr name="daxColorSurface" format="color"/>
     <attr name="daxColorContainer" format="color"/>
     <attr name="daxColorWindow" format="color"/>
+    <attr name="daxColorCanvas" format="color"/>
     <attr name="daxColorPrimaryText" format="color"/>
     <attr name="daxColorPrimaryInvertedText" format="color"/>
     <attr name="daxColorSecondaryText" format="color"/>
@@ -58,6 +59,7 @@
     <attr name="daxColorIconDisabled" format="color"/>
     <attr name="daxColorDestructive" format="color"/>
     <attr name="daxColorLines" format="color"/>
+    <attr name="daxColorShade" format="color"/>
     <attr name="daxColorAccentBlue" format="color"/>
     <attr name="daxColorAccentYellow" format="color"/>
     <attr name="daxColorAccentContentPrimary" format="color"/>
@@ -263,9 +265,10 @@
     <color name="accent_content_primary_dark">@color/blue80</color>
 
     <!-- Backgrounds -->
-    <color name="background_background_dark">#27282A</color>
-    <color name="background_surface_dark">#333538</color>
-    <color name="background_window_dark">#404145</color>
+    <color name="background_background_dark">#282828</color>
+    <color name="background_surface_dark">#373737</color>
+    <color name="background_window_dark">#474747</color>
+    <color name="background_canvas_dark">#1F1F1F</color>
     <color name="background_container_dark">#404145</color>
 
     <!-- Text -->
@@ -281,6 +284,9 @@
     <!-- Lines-->
     <color name="lines_dark">#1FF9F9F9</color>
 
+    <!-- Tone -->
+    <color name="shade_dark">#52171718</color>
+
     <!-- Controls -->
     <color name="controls_fill_primary_dark">#1FF9F9F9</color>
     <color name="controls_fill_secondary_dark">#2EF9F9F9</color>
@@ -295,6 +301,7 @@
     <color name="background_background_light">#F2F2F2</color>
     <color name="background_surface_light">#F9F9F9</color>
     <color name="background_window_light">#FFFFFF</color>
+    <color name="background_canvas_light">#FFFFFF</color>
     <color name="background_container_light">#FFFFFF</color>
 
     <!-- Text -->
@@ -310,6 +317,9 @@
     <!-- Lines-->
     <color name="lines_light">#171F1F1F</color>
 
+    <!-- Tone -->
+    <color name="shade_light">#2E1F1F1F</color>
+
     <!-- Controls -->
     <color name="controls_fill_primary_light">#171F1F1F</color>
     <color name="controls_fill_secondary_light">#1F1F1F1F</color>

common/common-ui/src/main/res/values/design-system-dimensions.xml

@@ -28,6 +28,7 @@
     <dimen name="keyline_7">48dp</dimen>
 
     <!-- Shape radius -->
+    <dimen name="verySmallShapeCornerRadius">4dp</dimen>
     <dimen name="smallShapeCornerRadius">8dp</dimen>
     <dimen name="mediumShapeCornerRadius">12dp</dimen>
     <dimen name="largeShapeCornerRadius">16dp</dimen>

common/common-ui/src/main/res/values/widgets.xml

@@ -465,7 +465,7 @@
 
     <!-- Cards -->
     <style name="Widget.DuckDuckGo.CardView" parent="Widget.MaterialComponents.CardView">
-        <item name="cardBackgroundColor">?attr/daxColorSurface</item>
+        <item name="cardBackgroundColor">?attr/daxColorWindow</item>
         <item name="shapeAppearance">@style/ShapeAppearance.DuckDuckGo.MediumComponent</item>
     </style>
 
@@ -474,6 +474,10 @@
         <item name="cardCornerRadius">@dimen/largeShapeCornerRadius</item>
     </style>
 
+    <style name="Widget.DuckDuckGo.TabCardView" parent="Widget.MaterialComponents.CardView">
+        <item name="cardBackgroundColor">?attr/daxColorWindow</item>
+    </style>
+
     <style name="Widget.DuckDuckGo.Card">
         <item name="android:layout_width">match_parent</item>
         <item name="android:layout_height">wrap_content</item>