Feature: Adapt all colors to latest designs (#221)

* grey background & removed light button elevation

* light theme

* dark & stable colors

* fix

Corona-Warn-App/src/main/res/layout/fragment_main.xml

@@ -119,8 +119,8 @@
                 layout="@layout/include_divider"
                 android:layout_width="0dp"
                 android:layout_height="@dimen/card_divider"
-                app:layout_constraintEnd_toStartOf="@+id/guideline_end"
-                app:layout_constraintStart_toStartOf="@+id/guideline_start"
+                app:layout_constraintEnd_toStartOf="parent"
+                app:layout_constraintStart_toStartOf="parent"
                 app:layout_constraintTop_toBottomOf="@+id/main_tracing" />
 
             <include

Corona-Warn-App/src/main/res/layout/fragment_main_overview.xml

@@ -98,7 +98,7 @@
                     android:layout_height="wrap_content"
                     android:layout_marginTop="@dimen/spacing_small"
                     app:iconStart="@{@drawable/ic_main_overview_circle}"
-                    app:iconTint="@{@color/colorRiskCardIncreasedRisk}"
+                    app:iconTint="@{@color/colorSemanticHighRisk}"
                     app:layout_constraintEnd_toEndOf="parent"
                     app:layout_constraintStart_toStartOf="parent"
                     app:layout_constraintTop_toBottomOf="@+id/main_overview_risk_subtitle"
@@ -110,7 +110,7 @@
                     android:layout_width="0dp"
                     android:layout_height="wrap_content"
                     app:iconStart="@{@drawable/ic_main_overview_circle}"
-                    app:iconTint="@{@color/colorRiskCardLowRisk}"
+                    app:iconTint="@{@color/colorSemanticLowRisk}"
                     app:layout_constraintEnd_toEndOf="parent"
                     app:layout_constraintStart_toStartOf="parent"
                     app:layout_constraintTop_toBottomOf="@+id/main_overview_risk_increased_risk"
@@ -122,7 +122,7 @@
                     android:layout_width="0dp"
                     android:layout_height="wrap_content"
                     app:iconStart="@{@drawable/ic_main_overview_circle}"
-                    app:iconTint="@{@color/colorRiskCardUnknownRisk}"
+                    app:iconTint="@{@color/colorSemanticNeutralRisk}"
                     app:layout_constraintEnd_toEndOf="parent"
                     app:layout_constraintStart_toStartOf="parent"
                     app:layout_constraintTop_toBottomOf="@+id/main_overview_risk_low_risk"

Corona-Warn-App/src/main/res/layout/fragment_settings_tracing.xml

@@ -150,12 +150,10 @@
 
 
                 <androidx.constraintlayout.widget.ConstraintLayout
+                    style="@style/greyBodyBackground"
                     android:id="@+id/risk_details_body"
                     android:layout_width="match_parent"
                     android:layout_height="wrap_content"
-                    android:layout_marginTop="@dimen/spacing_normal"
-                    android:background="@color/colorGreyLight"
-                    android:padding="@dimen/spacing_normal"
                     app:layout_constraintBottom_toBottomOf="parent"
                     app:layout_constraintEnd_toEndOf="parent"
                     app:layout_constraintStart_toStartOf="parent"

Corona-Warn-App/src/main/res/layout/fragment_submission_qr_code_scan.xml

@@ -57,7 +57,7 @@
             android:layout_width="@dimen/icon_size"
             android:layout_height="@dimen/icon_size"
             android:background="@drawable/ic_registration_qr_code_scan_torch_toggle"
-            android:backgroundTint="@color/iconColor"
+            android:backgroundTint="@color/colorTextPrimary3"
             android:textOff=""
             android:textOn=""
             app:layout_constraintBottom_toTopOf="@+id/submission_qr_code_scan_guideline_top"

Corona-Warn-App/src/main/res/layout/include_button_icon.xml

@@ -8,7 +8,6 @@
             name="icon"
             type="android.graphics.drawable.Drawable" />
 
-
     </data>
 
     <androidx.constraintlayout.widget.ConstraintLayout

Corona-Warn-App/src/main/res/layout/include_divider.xml

@@ -10,10 +10,10 @@
         app:layout_constraintTop_toTopOf="parent">
 
         <View
-            android:id="@+id/dividerColor"
+            android:id="@+id/colorHairline"
             android:layout_width="match_parent"
             android:layout_height="@dimen/card_divider"
-            android:background="@color/dividerColor"
+            android:background="@color/colorHairline"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toTopOf="parent" />

Corona-Warn-App/src/main/res/layout/include_risk_card.xml

@@ -57,7 +57,7 @@
                 android:layout_height="wrap_content"
                 android:layout_marginStart="@dimen/spacing_small"
                 android:indeterminate="true"
-                android:indeterminateTint="@color/stableBackgroundColor"
+                android:indeterminateTint="@color/colorStableLight"
                 app:layout_constraintBottom_toBottomOf="parent"
                 app:layout_constraintStart_toStartOf="parent"
                 app:layout_constraintTop_toTopOf="parent" />
@@ -164,7 +164,7 @@
                     <de.rki.coronawarnapp.ui.view.CircleProgress
                         android:layout_width="23dp"
                         android:layout_height="23dp"
-                        app:circleColor="@color/stableLightTransparent"
+                        app:circleColor="@color/colorStableMedium"
                         app:disableText="true"
                         app:layout_constraintBottom_toBottomOf="parent"
                         app:layout_constraintEnd_toEndOf="parent"
@@ -172,7 +172,7 @@
                         app:layout_constraintTop_toTopOf="parent"
                         app:circleWidth="5"
                         app:progress="@{tracingViewModel.activeTracingDaysInRetentionPeriod}"
-                        app:progressColor="@color/stableIconColor" />
+                        app:progressColor="@color/colorStableLight" />
 
                 </androidx.constraintlayout.widget.ConstraintLayout>
 

Corona-Warn-App/src/main/res/layout/include_submission_contact.xml

@@ -76,7 +76,7 @@
                         android:layout_height="wrap_content"
                         android:layout_marginTop="@dimen/spacing_small"
                         android:text="@string/submission_contact_number"
-                        android:textColor="@color/textColorBlue"
+                        android:textColor="@color/colorTextTint"
                         app:layout_constraintEnd_toEndOf="parent"
                         app:layout_constraintStart_toStartOf="parent"
                         app:layout_constraintTop_toBottomOf="@id/submission_contact_step_1_body" />

Corona-Warn-App/src/main/res/layout/include_test_result_card.xml

@@ -17,7 +17,7 @@
     <androidx.constraintlayout.widget.ConstraintLayout
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:background="@color/colorGreyLight"
+        android:background="@color/colorSurface2"
         android:padding="@dimen/card_padding">
 
         <TextView

Corona-Warn-App/src/main/res/layout/view_circle_progress.xml

@@ -21,7 +21,7 @@
                 android:layout_height="wrap_content"
                 android:contentDescription="Sie haben alle tage erfasst"
                 android:src="@drawable/ic_risk_card_saved_days"
-                android:tint="@color/colorPrimary"
+                android:tint="@color/colorAccentTintIcon"
                 app:layout_constraintBottom_toBottomOf="parent"
                 app:layout_constraintEnd_toEndOf="parent"
                 app:layout_constraintStart_toStartOf="parent"

Corona-Warn-App/src/main/res/layout/view_step_entry.xml

@@ -38,7 +38,7 @@
             android:id="@+id/step_entry_line"
             android:layout_width="@dimen/test_result_step_progress_line_width"
             android:layout_height="@dimen/match_constraint"
-            android:background="@color/colorGreyLight"
+            android:background="@color/colorSurface2"
             app:layout_constraintBottom_toBottomOf="@+id/step_entry_placeholder"
             app:layout_constraintEnd_toEndOf="@id/step_entry_icon"
             app:layout_constraintStart_toStartOf="@id/step_entry_icon"

Corona-Warn-App/src/main/res/values-night/colors.xml

@@ -9,6 +9,7 @@
     <!-- Backgrounds and Separators -->
     <color name="colorBackground">#000000</color>
     <color name="colorSurface1">#232324</color>
+    <color name="colorSurface1Pressed">#39393A</color>
     <color name="colorSurface2">#434445</color>
     <color name="colorHairline">#4DFFFFFF</color>
 
@@ -22,63 +23,22 @@
     <color name="colorTextSemanticNeutral">#B8C8D9</color>
     <color name="colorTextTint">#83D2F2</color>
 
-    <!-- Accent -->
-    <color name="colorAccentTintButton">#007FAD</color>
-    <color name="colorAccentTintIcon">#83D2F2</color>
-
     <!-- Semantic -->
     <color name="colorSemanticHighRisk">#C4314A</color>
+    <color name="colorSemanticHighRiskPressed">#CA465C</color>
     <color name="colorSemanticLowRisk">#378250</color>
+    <color name="colorSemanticLowRiskPressed">#378250</color>
     <color name="colorSemanticNeutralRisk">#5D6E80</color>
+    <color name="colorSemanticNeutralRiskPressed">#556675</color>
+    <color name="colorSemanticUnknownRisk">#232324</color>
+    <color name="colorSemanticUnknownRiskPressed">#39393A</color>
 
-    <!-- TODO: Add variables when colors are final to reduce maintenance -->
-
-    <!-- App Color -->
-    <color name="appTheme">#000000</color>
+    <!-- Accent -->
+    <color name="colorAccentTintButton">#007FAD</color>
+    <color name="colorAccentTintButtonPressed">#1B4865</color>
+    <color name="colorAccentTintIcon">#83D2F2</color>
 
-    <!-- Primary Colors -->
-    <color name="colorPrimary">#2C79A9</color>
-    <color name="colorPrimaryDark">#1B4865</color>
+    <!-- Misc -->
     <color name="colorTransparent">#00FFFFFF</color>
 
-    <!-- Risk Card Colors -->
-    <color name="colorRiskCardIncreasedRiskPressed">#A30C26</color>
-    <color name="colorRiskCardLowRiskPressed">#27713F</color>
-    <color name="colorRiskCardNoCalculationPossible">@color/colorLight</color>
-    <color name="colorRiskCardNoCalculationPossiblePressed">@color/colorGreyLight</color>
-    <color name="colorRiskCardOutdatedRisk">#657888</color>
-    <color name="colorRiskCardOutdatedRiskPressed">#556673</color>
-    <color name="colorRiskCardUnknownRisk">#657888</color>
-    <color name="colorRiskCardUnknownRiskPressed">#556673</color>
-    <color name="riskCardGrey">#F5F5F5</color>
-
-    <!-- Light Colors -->
-    <color name="colorLight">#212121</color>
-    <color name="colorGrey">#434343</color>
-    <color name="colorGreyLight">#565656</color>
-
-    <!-- Text Colors -->
-    <color name="textColorPrimary">#ffffff</color>
-    <color name="textColorSecondary">#DFD8D8</color>
-    <color name="textColorLight">#ffffff</color>
-    <color name="textColorBlue">#2C79A9</color>
-    <color name="textColorGrey">#D3D3D3</color>
-
-    <!-- Visual Elements-->
-    <color name="dividerColor">#0D000000</color>
-    <color name="iconColor">#ffffff</color>
-
-    <!-- Stable Colors TODO: can be removed after testing -->
-    <color name="stableBackgroundColor">#ffffff</color>
-    <color name="stableHighlightColor">#C3C3C3</color>
-    <color name="stableTextColor">#000000</color>
-    <color name="stableIconColor">#ffffff</color>
-
-    <!-- Tracing Icon -->
-    <color name="tracingIconActive">#80CDEC</color>
-    <color name="tracingIconInactive">#DE4355</color>
-
-    <!-- Settings Icon -->
-    <color name="settingsIconInactive">#C3C3C3</color>
-
 </resources>

Corona-Warn-App/src/main/res/values/colors.xml

@@ -9,6 +9,7 @@
     <!-- Backgrounds and Separators -->
     <color name="colorBackground">#FFFFFF</color>
     <color name="colorSurface1">#FFFFFF</color>
+    <color name="colorSurface1Pressed">#E7E8E8</color>
     <color name="colorSurface2">#F5F5F5</color>
     <color name="colorHairline">#3317191A</color>
 
@@ -21,70 +22,32 @@
     <color name="colorTextSemanticGreen">#2E854B</color>
     <color name="colorTextSemanticNeutral">#5D6E80</color>
     <color name="colorTextTint">#007FAD</color>
-
-    <!-- Accent -->
-    <color name="colorAccentTintButton">#007FAD</color>
-    <color name="colorAccentTintIcon">#007FAD</color>
+    <color name="colorTextLight">#FFFFFF</color>
 
     <!-- Semantic -->
     <color name="colorSemanticHighRisk">#C00F2D</color>
+    <color name="colorSemanticHighRiskPressed">#AE102B</color>
     <color name="colorSemanticLowRisk">#2E854B</color>
+    <color name="colorSemanticLowRiskPressed">#2B7A46</color>
     <color name="colorSemanticNeutralRisk">#5D6E80</color>
+    <color name="colorSemanticNeutralRiskPressed">#556675</color>
+    <color name="colorSemanticUnknownRisk">#FFFFFF</color>
+    <color name="colorSemanticUnknownRiskPressed">#E7E8E8</color>
 
-    <!-- TODO: Add variables when colors are final to reduce maintenance -->
-
-    <!-- App Color -->
-    <color name="appTheme">#ffffff</color>
+    <!-- Accent -->
+    <color name="colorAccentTintButton">#007FAD</color>
+    <color name="colorAccentTintButtonPressed">#02759E</color>
+    <color name="colorAccentTintIcon">#007FAD</color>
 
-    <!-- Primary Colors -->
-    <color name="colorPrimary">#2C79A9</color>
-    <color name="colorPrimaryDark">#1B4865</color>
+    <!-- Misc -->
     <color name="colorTransparent">#00FFFFFF</color>
 
-    <!-- Risk Card Colors -->
-    <color name="colorRiskCardIncreasedRisk">@color/colorSemanticHighRisk</color>
-    <color name="colorRiskCardIncreasedRiskPressed">#A30C26</color>
-    <color name="colorRiskCardLowRisk">@color/colorSemanticLowRisk</color>
-    <color name="colorRiskCardLowRiskPressed">#27713F</color>
-    <color name="colorRiskCardNoCalculationPossible">@color/colorLight</color>
-    <color name="colorRiskCardNoCalculationPossiblePressed">@color/colorGreyLight</color>
-    <color name="colorRiskCardOutdatedRisk">#657888</color>
-    <color name="colorRiskCardOutdatedRiskPressed">#556673</color>
-    <color name="colorRiskCardUnknownRisk">#657888</color>
-    <color name="colorRiskCardUnknownRiskPressed">#556673</color>
-    <color name="riskCardGrey">#F5F5F5</color>
-
-    <!-- Light/Grey Colors -->
-    <color name="colorLight">#ffffff</color>
-    <color name="colorGrey">#747576</color>
-    <color name="colorGreyLight">#F5F5F5</color>
-    <color name="colorGreyDisabled">#9917191A</color>
-
-    <!-- OLD Text Colors -->
-    <color name="textColorPrimary">#000000</color>
-    <color name="textColorSecondary">#333333</color>
-    <color name="textColorLight">#ffffff</color>
-    <color name="textColorBlue">#2C79A9</color>
-    <color name="textColorGrey">#747576</color>
-
-    <!-- Visual Elements -->
-    <color name="dividerColor">#0D000000</color>
-    <color name="iconColor">@color/colorGrey</color>
-
-    <!-- Stable Colors -->
-    <color name="stableBackgroundColor">#ffffff</color>
-    <color name="stableHighlightColor">#C3C3C3</color>
-    <color name="stableTextColor">#000000</color>
-    <color name="stableIconColor">#ffffff</color>
-    <color name="stableLightTransparent">#33FFFFFF</color>
-
-    <!-- Tracing Icon -->
-    <color name="tracingIconActive">#007FAD</color>
-    <color name="tracingIconInactive">#C00F2D</color>
-    <color name="settingsIconInactive">#C3C3C3</color>
-
     <!-- Tan Input -->
     <color name="tanInputBackground">#1A17191A</color>
 
+    <!-- Stable Colors -->
+    <color name="colorStableDark">#000000</color>
+    <color name="colorStableMedium">#4D17191A</color>
+    <color name="colorStableLight">#FFFFFF</color>
 
 </resources>

Corona-Warn-App/src/main/res/values/styles.xml

 <resources xmlns:android="http://schemas.android.com/apk/res/android">
 
     <style name="AppTheme" parent="Theme.AppCompat.DayNight">
-        <item name="colorPrimary">@color/colorPrimary</item>
-        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
-        <item name="android:windowBackground">@color/appTheme</item>
+        <item name="colorPrimary">@color/colorBrandSecondary</item>
+        <item name="colorPrimaryDark">@color/colorAccentTintButtonPressed</item>
+        <item name="android:windowBackground">@color/colorBackground</item>
     </style>
 
     <style name="AppTheme.NoActionBar">
@@ -24,7 +24,7 @@
     <style name="AppTheme.Main" parent="AppTheme.NoActionBar" />
 
     <style name="actionBar" parent="@style/ThemeOverlay.MaterialComponents.ActionBar">
-        <item name="android:background">@color/colorLight</item>
+        <item name="android:background">@color/colorSurface1</item>
     </style>
 
     <!-- ####################################
@@ -62,7 +62,7 @@
     </style>
 
     <style name="buttonTracing">
-        <item name="android:textColor">@color/textColorPrimary</item>
+        <item name="android:textColor">@color/colorTextPrimary1</item>
         <item name="android:background">@drawable/rectangle</item>
         <item name="android:backgroundTint">@color/button_main_tracing</item>
         <item name="android:paddingStart">@dimen/button_padding_start_end</item>
@@ -72,7 +72,7 @@
     </style>
 
     <style name="switchBase" parent="@style/Widget.AppCompat.CompoundButton.Switch">
-        <item name="android:colorControlActivated">@color/colorPrimary</item>
+        <item name="android:colorControlActivated">@color/colorAccentTintIcon</item>
     </style>
 
     <!-- ####################################
@@ -86,7 +86,7 @@
         <item name="android:elevation">@dimen/elevation_weak</item>
         <item name="android:textAllCaps">false</item>
         <item name="android:background">@drawable/row</item>
-        <item name="android:textColor">@color/textColorPrimary</item>
+        <item name="android:textColor">@color/colorTextPrimary1</item>
     </style>
 
     <style name="rowDanger" parent="row">
@@ -108,24 +108,24 @@
     <style name="cardTracing">
         <item name="android:padding">@dimen/card_padding</item>
         <item name="android:background">@drawable/card</item>
-        <item name="android:backgroundTint">@color/colorGreyLight</item>
+        <item name="android:backgroundTint">@color/colorSurface2</item>
     </style>
     <!-- todo unify padding with main card - tbr -->
 
     <style name="cardHeadline" parent="@style/Widget.AppCompat.TextView">
         <item name="android:textSize">@dimen/font_larger</item>
-        <item name="android:textColor">@color/textColorLight</item>
+        <item name="android:textColor">@color/colorTextLight</item>
         <item name="android:textStyle">bold</item>
     </style>
 
     <style name="cardText" parent="@style/Widget.AppCompat.TextView">
         <item name="android:textSize">@dimen/font_normal</item>
-        <item name="android:textColor">@color/textColorLight</item>
+        <item name="android:textColor">@color/colorTextLight</item>
     </style>
 
     <style name="cardTextDispatcher" parent="@style/Widget.AppCompat.TextView">
         <item name="android:textSize">@dimen/font_normal</item>
-        <item name="android:textColor">@color/textColorSecondary</item>
+        <item name="android:textColor">@color/colorTextPrimary2</item>
     </style>
 
     <style name="cardGrey">
@@ -231,7 +231,7 @@
 
     <style name="textLargeEmphasized" parent="@style/TextAppearance.AppCompat.Headline">
         <item name="android:textSize">@dimen/font_large</item>
-        <item name="android:textColor">@color/textColorPrimary</item>
+        <item name="android:textColor">@color/colorTextPrimary1</item>
         <item name="android:textStyle">bold</item>
     </style>
 
@@ -249,7 +249,7 @@
     </style>
 
     <style name="textLink" parent="@style/textMultilineEmphasized">
-        <item name="android:textColor">@color/textColorBlue</item>
+        <item name="android:textColor">@color/colorTextTint</item>
         <item name="android:textSize">@dimen/font_large</item>
     </style>
 
@@ -257,11 +257,15 @@
               Icons
     ###################################### -->
     <style name="icon">
-        <item name="android:tint">@color/iconColor</item>
+        <item name="android:tint">@color/colorTextPrimary1</item>
     </style>
 
     <style name="iconStable">
-        <item name="android:tint">@color/stableIconColor</item>
+        <item name="android:tint">@color/colorStableLight</item>
+    </style>
+
+    <style name="iconTracingStatus">
+        <item name="android:tint">@color/colorAccentTintIcon</item>
     </style>
 
     <!-- ####################################
@@ -308,7 +312,7 @@
 
     <style name="testResultCardLargeText">
         <item name="android:textSize">@dimen/font_larger</item>
-        <item name="android:textColor">@color/textColorPrimary</item>
+        <item name="android:textColor">@color/colorTextPrimary1</item>
     </style>
 
     <!-- ####################################
@@ -316,7 +320,7 @@
     ###################################### -->
     <style name="registrationQRCodeScanBody">
         <item name="android:textAlignment">center</item>
-        <item name="android:textColor">@color/colorLight</item>
+        <item name="android:textColor">@color/colorTextLight</item>
         <item name="android:textSize">14sp</item>
     </style>
 </resources>