More SC theme improvements, including a reworked light theme

Change-Id: I373daedc45bee3aa9e24e09bb632b01e27754010

library/ui-styles/src/main/res/values-v23/theme_sc.xml

@@ -18,7 +18,7 @@
     </style>
 
     <style name="AppTheme.SC.Light.v23" parent="AppTheme.Base.SC.Light">
-        <item name="android:statusBarColor">@color/android_status_bar_background_light</item>
+        <item name="android:statusBarColor">@color/background_sc_light_statusbar</item>
         <item name="android:windowLightStatusBar">true</item>
     </style>
 

library/ui-styles/src/main/res/values/colors_sc.xml

@@ -1,6 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
 
+    <!-- Accent colors -->
     <color name="accent_sc">#8BC34A</color>
     <color name="accent_sc_alpha25">#3F8BC34A</color>
     <color name="accent_sc_alpha12">#1E8BC34A</color>
@@ -13,29 +14,52 @@
     <color name="accent_sc_pale">@color/accent_sc_300</color>
     <color name="direct_chat_ring_color_sc">@color/accent_sc_dark</color>
 
+    <!-- Username/avatar colors -->
     <color name="avatar_fill_sc_1">@color/accent_sc</color>
     <color name="username_sc_1">@color/accent_sc</color>
 
+    <!-- Dark theme text/foreground colors -->
     <color name="text_color_primary_sc">#ffffff</color>
     <color name="text_color_secondary_sc">#b3ffffff</color>
     <color name="text_color_tertiary_sc">#80ffffff</color>
     <color name="text_color_disabled_sc">#80ffffff</color>
 
+    <!-- Dark theme background colors -->
     <color name="background_sc">#ff303030</color>
     <color name="background_dark_sc">#ff212121</color>
     <color name="background_black_sc">#ff000000</color>
     <color name="background_floating_sc">#ff424242</color>
     <color name="background_touch_guard_sc">#bf000000</color>
 
+    <!-- Light theme text/foreground colors -->
+    <color name="text_color_primary_sc_light">#de000000</color>
+    <color name="text_color_secondary_sc_light">#8a000000</color>
+    <color name="text_color_tertiary_sc_light">#4c000000</color>
+    <color name="text_color_disabled_sc_light">#4c000000</color>
+
+    <!-- Light theme background colors -->
+    <color name="background_sc_light_bright">#ffffffff</color>
+    <color name="background_sc_light">#fffafafa</color>
+    <color name="background_sc_light_secondary">#ffeeeeee</color>
+    <color name="background_sc_light_toolbar">#fff5f5f5</color>
+    <color name="background_sc_light_statusbar">#ffe0e0e0</color>
+    <color name="background_floating_sc_light">#ffffffff</color>
+    <color name="background_touch_guard_sc_light">#61000000</color>
+
+    <!-- List divider colors -->
     <color name="list_divider_color_sc">#1fffffff</color>
     <color name="list_divider_color_sc_light">#1f000000</color>
 
+    <!-- Timestamp colors -->
     <color name="timestamp_overlay_fg">#ffffff</color>
     <color name="timestamp_overlay_bg">#80000000</color>
 
+    <!-- Reaction colors -->
     <color name="sc_reaction_background_on_light">@color/accent_sc_50</color>
     <color name="sc_reaction_background_on_dark">@color/accent_sc_900</color>
 
+    <!-- Exposed Element colors -->
     <!-- This is actually not an SC color, but the one found in element for ic_material_play_circle PNGs -->
     <color name="element_accent_pale">#76cfa6</color>
+
 </resources>

library/ui-styles/src/main/res/values/styles_app_bar_layout.xml

@@ -3,7 +3,9 @@
 
     <style name="Widget.Vector.AppBarLayout" parent="Widget.MaterialComponents.AppBarLayout.Primary">
         <item name="android:background">?vctr_toolbar_background</item>
+        <!-- Defining this here actually breaks elevation...?
         <item name="elevation">4dp</item>
+        -->
     </style>
 
 </resources>

library/ui-styles/src/main/res/values/theme_sc.xml

@@ -27,7 +27,7 @@
         <item name="vctr_room_active_widgets_banner_text">?vctr_content_secondary</item>
         <item name="vctr_reaction_background_off">@color/background_sc</item>
         <item name="vctr_reaction_background_on">@color/sc_reaction_background_on_dark</item>
-        <item name="vctr_waiting_background_color">#555555</item>
+        <item name="vctr_waiting_background_color">#55555555</item>
         <item name="vctr_chat_effect_snow_background">@android:color/transparent</item>
         <item name="vctr_toolbar_background">?android:colorBackground</item>
 

library/ui-styles/src/main/res/values/theme_sc_light.xml

@@ -3,51 +3,98 @@
 
     <!-- SC THEME COLORS -->
     <style name="AppTheme.Base.SC.Light" parent="Base.Theme.Vector.Light">
-        <item name="colorPrimary">@color/accent_sc</item>
+        <!-- Element attribute for palette -->
-        <item name="colorPrimaryVariant">@color/accent_sc</item>
+        <!-- content colors -->
-        <item name="colorSecondary">@color/accent_sc</item>
+        <item name="vctr_content_primary">@color/text_color_primary_sc_light</item>
-        <item name="colorSecondaryVariant">@color/accent_sc</item>
+        <item name="vctr_content_secondary">@color/text_color_secondary_sc_light</item>
+        <item name="vctr_content_tertiary">@color/text_color_tertiary_sc_light</item>
+        <item name="vctr_content_quaternary">@color/text_color_tertiary_sc_light</item>
+        <item name="vctr_content_quinary">@color/text_color_disabled_sc_light</item>
 
-        <!-- Keep color accent for legacy widget-->
+        <!-- system colors -->
-        <item name="colorAccent">@color/accent_sc</item>
+        <item name="vctr_system">@color/background_sc_light</item>
+
+        <!-- other colors -->
+        <item name="vctr_unread_room_badge">?colorAccent</item>
+        <item name="vctr_fab_label_bg">@color/background_floating_sc_light</item>
+        <item name="vctr_fab_label_stroke">@color/background_floating_sc_light</item>
+        <item name="vctr_fab_label_color">?vctr_content_primary</item>
+        <item name="vctr_touch_guard_bg">@color/background_touch_guard_sc_light</item>
+        <item name="vctr_keys_backup_banner_accent_color">@color/background_floating_sc_light</item>
+        <item name="vctr_attachment_selector_background">?colorBackgroundFloating</item>
+        <item name="vctr_attachment_selector_border">@color/list_divider_color_sc_light</item>
+        <item name="vctr_room_active_widgets_banner_bg">@color/background_floating_sc_light</item>
+        <item name="vctr_room_active_widgets_banner_text">?vctr_content_secondary</item>
+        <item name="vctr_reaction_background_off">@color/background_sc_light_secondary</item>
+        <item name="vctr_reaction_background_on">@color/sc_reaction_background_on_light</item>
+        <item name="vctr_waiting_background_color">#AAAAAAAA</item>
+        <item name="vctr_chat_effect_snow_background">@color/black_alpha</item>
+        <item name="vctr_toolbar_background">@color/background_sc_light_toolbar</item>
+
+        <!-- room message colors -->
+        <item name="vctr_notice_secondary">?vctr_content_secondary</item>
+        <item name="vctr_unsent_message_text_color">?colorError</item>
+        <item name="vctr_message_text_color">?vctr_content_primary</item>
+        <item name="vctr_notice_text_color">?vctr_content_primary</item>
+        <item name="vctr_encrypting_message_text_color">@color/accent_sc</item>
+        <item name="vctr_sending_message_text_color">?vctr_content_secondary</item>
+        <item name="vctr_markdown_block_background_color">@color/background_sc_light</item> <!-- needs contrast on background_sc_light_bright for no-bubble case, and background_sc_light_secondary for bubble case -->
+        <item name="vctr_spoiler_background_color">#FF000000</item>
+
+        <!-- Some alias -->
+        <item name="vctr_header_background">@color/background_sc_light_bright</item>
+        <!--
+        <item name="vctr_header_background">?android:colorBackground</item>
+        -->
+        <item name="vctr_list_separator">@color/list_divider_color_sc_light</item>
+        <item name="vctr_list_separator_system">?vctr_list_separator</item>
+        <item name="vctr_list_separator_on_surface">?vctr_list_separator</item>
+
+        <!-- Material color -->
+        <item name="colorPrimary">?colorAccent</item>
+        <item name="colorPrimaryVariant">?colorAccent</item>
+        <item name="colorOnPrimary">@color/text_color_primary_sc</item><!-- primary = accent -> better to use a light text color -->
+        <item name="colorSecondary">?colorAccent</item>
+        <item name="colorSecondaryVariant">?colorAccent</item>
+        <item name="colorOnSecondary">?colorOnPrimary</item><!-- primary = accent -> better to use a light text color -->
+        <item name="colorError">@color/element_alert_light</item>
+        <item name="colorOnError">@color/text_color_primary_sc</item> <!-- needs light text, e.g. used for unread counter badges -->
+        <item name="colorSurface">?android:colorBackground</item>
+        <item name="colorOnSurface">?vctr_content_primary</item>
+        <item name="android:colorBackground">@color/background_sc_light</item>
+        <item name="colorOnBackground">?vctr_content_primary</item>
+
+
+
+        <item name="android:textColorLink">@color/element_link_light</item>
+
+        <!-- Menu text color -->
+        <item name="android:actionMenuTextColor">?colorSecondary</item>
+
+        <!-- Default color for text View -->
+        <item name="android:textColorTertiary">?vctr_content_tertiary</item>
 
         <item name="materialAlertDialogTheme">@style/VectorAlertDialogStyleLight.SC</item>
 
-        <item name="vctr_encrypting_message_text_color">@color/accent_sc</item>
-
         <!-- custom action bar -->
         <item name="android:actionBarStyle">@style/Vector.Styled.ActionBar.SC</item>
         <item name="actionBarStyle">@style/Vector.Styled.ActionBar.SC</item>
 
-        <!-- SC additions -->
-        <item name="sc_message_bg_incoming">#FFEEEEEE</item>
-        <item name="sc_message_bg_outgoing">@color/accent_sc_alpha12</item>
-        <item name="riotx_unread_unimportant_room_badge">?vctr_content_tertiary</item>
-        <item name="colorAccentPale">@color/accent_sc_pale</item>
-
         <item name="bottomSheetDialogTheme">@style/Vector.BottomSheet.SC.Light</item>
 
-        <item name="vctr_unread_room_badge">?colorAccent</item>
+        <!-- SC additions -->
+        <item name="colorAccent">@color/accent_sc</item>
+        <item name="android:colorAccent">@color/accent_sc</item>
+        <item name="sc_message_bg_incoming">@color/background_sc_light_secondary</item>
+        <item name="sc_message_bg_outgoing">@color/accent_sc_alpha12</item>
+        <item name="riotx_unread_unimportant_room_badge">#737373</item><!-- like text_color_secondary_sc_light, but without transparency -->
+        <item name="colorAccentPale">@color/accent_sc_pale</item>
+        <!-- OptionsMenu background -->
+        <item name="itemBackground">@color/background_sc_light_bright</item>
+        <item name="android:itemBackground">@color/background_sc_light_bright</item>
 
-        <!-- Use dark color, to have enough contrast with icons color. windowLightStatusBar is only available in API 23+ -->
         <item name="android:statusBarColor">@color/background_black_sc</item>
-        <!-- Use dark color, to have enough contrast with icons color. windowLightNavigationBar is only available in API 27+ -->
         <item name="android:navigationBarColor">@color/background_black_sc</item>
-
-        <!-- enable window content transitions -->
-        <item name="android:windowContentTransitions">true</item>
-
-        <!-- specify shared element enter and exit transitions -->
-        <item name="android:windowSharedElementEnterTransition">@transition/image_preview_transition</item>
-        <item name="android:windowSharedElementExitTransition">@transition/image_preview_transition</item>
-
-        <item name="vctr_reaction_background_off">@color/vctr_reaction_background_off_light</item>
-        <item name="vctr_reaction_background_on">@color/sc_reaction_background_on_light</item>
-
-        <!-- Some alias -->
-        <item name="vctr_list_separator">@color/list_divider_color_sc_light</item>
-        <item name="vctr_list_separator_system">?vctr_list_separator</item>
-        <item name="vctr_list_separator_on_surface">?vctr_list_separator</item>
     </style>
 
     <!-- Default AppTheme for usage where settings don't apply -->

vector/src/main/java/im/vector/app/core/ui/list/GenericFooterItem.kt

@@ -16,6 +16,7 @@
 package im.vector.app.core.ui.list
 
 import android.view.Gravity
+import android.widget.LinearLayout
 import android.widget.TextView
 import androidx.annotation.ColorInt
 import com.airbnb.epoxy.EpoxyAttribute
@@ -53,6 +54,10 @@ abstract class GenericFooterItem : VectorEpoxyModel<GenericFooterItem.Holder>()
     @ColorInt
     var textColor: Int? = null
 
+    @EpoxyAttribute
+    @ColorInt
+    var backgroundColor: Int? = null
+
     override fun bind(holder: Holder) {
         super.bind(holder)
 
@@ -67,10 +72,17 @@ abstract class GenericFooterItem : VectorEpoxyModel<GenericFooterItem.Holder>()
             holder.text.setTextColor(ThemeUtils.getColor(holder.view.context, R.attr.vctr_content_secondary))
         }
 
+        if (backgroundColor != null) {
+            holder.layout.setBackgroundColor(backgroundColor!!)
+        } else  {
+            holder.layout.background = null
+        }
+
         holder.view.onClick(itemClickAction)
     }
 
     class Holder : VectorEpoxyHolder() {
         val text by bind<TextView>(R.id.itemGenericFooterText)
+        val layout by bind<LinearLayout>(R.id.itemGenericFooterLayout)
     }
 }

vector/src/main/java/im/vector/app/features/roomprofile/RoomProfileController.kt

@@ -22,6 +22,7 @@ import im.vector.app.R
 import im.vector.app.core.epoxy.expandableTextItem
 import im.vector.app.core.epoxy.profiles.buildProfileAction
 import im.vector.app.core.epoxy.profiles.buildProfileSection
+import im.vector.app.core.resources.ColorProvider
 import im.vector.app.core.resources.StringProvider
 import im.vector.app.core.ui.list.genericFooterItem
 import im.vector.app.features.home.ShortcutCreator
@@ -34,6 +35,7 @@ import javax.inject.Inject
 
 class RoomProfileController @Inject constructor(
         private val stringProvider: StringProvider,
+        private val colorProvider: ColorProvider,
         private val vectorPreferences: VectorPreferences,
         private val shortcutCreator: ShortcutCreator
 ) : TypedEpoxyController<RoomProfileViewState>() {
@@ -98,6 +100,7 @@ class RoomProfileController @Inject constructor(
             id("e2e info")
             centered(false)
             text(host.stringProvider.getString(learnMoreSubtitle))
+            backgroundColor(host.colorProvider.getColorFromAttribute(R.attr.vctr_header_background))
         }
         // SC: Move down in the list, this one-time action is not important to enough to show this prevalent at the top
         //buildEncryptionAction(data.actionPermissions, roomSummary)

vector/src/main/res/layout/item_expandable_textview.xml

@@ -4,7 +4,7 @@
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
-    android:background="?android:colorBackground"
+    android:background="?vctr_header_background"
     android:padding="16dp">
 
     <im.vector.app.core.ui.views.NonScrollingTextView
@@ -34,4 +34,4 @@
         app:tint="?vctr_content_secondary"
         tools:ignore="MissingPrefix" />
 
-</androidx.constraintlayout.widget.ConstraintLayout>
+</androidx.constraintlayout.widget.ConstraintLayout>

vector/src/main/res/layout/item_generic_footer.xml

@@ -1,9 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools"
+    android:id="@+id/itemGenericFooterLayout"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
-    android:background="?vctr_header_background"
     android:orientation="vertical"
     android:padding="16dp">