ANDROID-14558 Mistica Gradients Support & O2New Brand (#352)

* ANDROID-14558 Modify script to not generate colors for gradient susceptible tokens

* ANDROID-14558 Fix parsing types and add o2New

* ANDROID-14558 Generate compose brushes

* ANDROID-14558 Fixes to previous commit

* ANDROID-14558 Generate compose angled linear gradients

* ANDROID-14558 Fix compose brand brushes generation

* ANDROID-14558 Generate xml gradients

* ANDROID-14558 Generate gradients enum for xml usage

* ANDROID-14558 Provide method to obtain gradient drawables from xml

* ANDROID-14558 Regenerate tokens

* ANDROID-14558 Fix color parsing and add o2New

* ANDROID-14558 Remove old gradients

* ANDROID-14558 Remove vivo old gradients

* ANDROID-14558 configure xml for o2new

* ANDROID-14558 Adapt all mistica usages to gradients

* ANDROID-14558 Fix tests

* ANDROID-14558 Provide builder for gradients with most common operations

* ANDROID-14558 Simplify shaders creation for xml and compose

* ANDROID-14558 Extract common code to get color resource names

* ANDROID-14558 Cleanup and reorganize

* ANDROID-14558 Minor cleanup

* ANDROID-14558 Change color descriptions in tests to notice its not important for color parsing

* ANDROID-14558 Fix tests

* ANDROID-14558 Add o2 new brand to screenshot tests

* Updated screenshots baseline

* ANDROID-14558 Reference gradient attributes constants

* ANDROID-14558 Cleanup Api 24 implementation

* ANDROID-14558 Correct comments

* ANDROID-14558 Big simplification of drawable handling keeping just a single attr for xml

* ANDROID-14558 Cleanup & self review

* ANDROID-14558 Improve heterogeneous tokens semantics

* ANDROID-14558 CS

* ANDROID-14575 Remove constructor arguments from both MisticaColors and MisticaBrushes and regenerate tokens

* ANDROID-14558 Declare consumer required proguard rules

* Update README.md

* Update README.md

* Update README.md

* Update README.md

* Update README.md

* Create README.md

* Update README.md

* Update README.md

* Update README.md

* Update README.md

* Update README.md

* Update README.md

* Update README.md

* Update README.md

* Update UPGRADING.md

* ANDROID-14558 Remove copy method as it has too many arguments

* Updated screenshots baseline

* ANDROID-14558 Fix script to parse correctly alphas

* Updated screenshots baseline

* ANDROID-14558 Allow programatic configuration of ripple color

* ANDROID-14558 Fix compose highlighted card

* ANDROID-14558 Remove support for apis less than 24 & update tokens

* ANDROID-14558 Specify which file failed to be parsed

* ANDROID-14558 Remove non necessary sdk checks after raising to min api 24

* ANDROID-14558 Remove obsolete v-24 resource dirs

* ANDROID-14558 Just expose PaintDrawable as return type for drawables to allow more customization flexibility on consumer apps.

---------

Co-authored-by: dpastor <[email protected]>

README.md

@@ -96,6 +96,12 @@ Library includes a set of available [Text Appearance](library/src/main/res/value
 Mistica defines 3 typographic styles to be used along with the library, these typefaces are defined as attributes and can be override using some allowed fonts.
 More info [here](library/src/main/java/com/telefonica/mistica/fonts)
 
+## Working with semantic colors/gradients
+
+For each supported brand, Mistica exposes a set of theme properties (attributes in xml) customized accordingly for each brand.
+
+More info [here](library/src/main/java/com/telefonica/mistica/theme)
+
 ## Demo app
 
 There is a demo of currently implemented components in this repository. A full list of implemented components can be found here: [Components](library/src/main/java/com/telefonica/mistica).

UPGRADING.md

@@ -1,5 +1,9 @@
 # Upgrading guide
 
+**For versions newer than 11.1.1, breaking changes and corresponding upgrade guides will be published with their respective [releases](https://github.com/Telefonica/mistica-android/releases)**
+
+This document is just kept for reference for older versions, but it should not be modified.
+
 ## Upgrade to version 11.1.1
 Both `preset9FontWeight` and `preset10FontWeight` have been added to `Brand` interface.
 We should add these new values to our brand implementations.

build.gradle

@@ -1,7 +1,7 @@
 // Top-level build file where you can add configuration options common to all sub-projects/modules.
 buildscript {
     ext {
-        min_sdk_version = 21
+        min_sdk_version = 24
         target_sdk_version = 34
         compose_ui_version = "1.5.4"
         compose_compiler_version = '1.5.7'

catalog/src/main/java/com/telefonica/mistica/catalog/ui/CatalogMainActivity.kt

@@ -15,6 +15,7 @@ import com.telefonica.mistica.compose.theme.brand.BrandType
 import com.telefonica.mistica.compose.theme.brand.BrandType.BLAU
 import com.telefonica.mistica.compose.theme.brand.BrandType.MOVISTAR
 import com.telefonica.mistica.compose.theme.brand.BrandType.O2
+import com.telefonica.mistica.compose.theme.brand.BrandType.O2_NEW
 import com.telefonica.mistica.compose.theme.brand.BrandType.TELEFONICA
 import com.telefonica.mistica.compose.theme.brand.BrandType.TU
 import com.telefonica.mistica.compose.theme.brand.BrandType.VIVO
@@ -52,6 +53,7 @@ class CatalogMainActivity : AppCompatActivity() {
             ComponentStyle("Telefonica", R.style.MisticaTheme_Telefonica, TELEFONICA),
             ComponentStyle("Blau", R.style.MisticaTheme_Blau, BLAU),
             ComponentStyle("Tu", R.style.MisticaTheme_Tu, TU),
+            ComponentStyle("O2New", R.style.MisticaTheme_O2New, O2_NEW),
         )
 
         findViewById<DropDownInput>(R.id.drop_down_themes)?.apply {

catalog/src/main/java/com/telefonica/mistica/catalog/ui/ComponentCatalogActivity.kt

@@ -69,12 +69,14 @@ import com.telefonica.mistica.compose.theme.brand.BrandType
 import com.telefonica.mistica.compose.theme.brand.BrandType.BLAU
 import com.telefonica.mistica.compose.theme.brand.BrandType.MOVISTAR
 import com.telefonica.mistica.compose.theme.brand.BrandType.O2
+import com.telefonica.mistica.compose.theme.brand.BrandType.O2_NEW
 import com.telefonica.mistica.compose.theme.brand.BrandType.TELEFONICA
 import com.telefonica.mistica.compose.theme.brand.BrandType.TU
 import com.telefonica.mistica.compose.theme.brand.BrandType.VIVO
 import com.telefonica.mistica.compose.theme.brand.BrandType.VIVO_NEW
 import com.telefonica.mistica.compose.theme.brand.MovistarBrand
 import com.telefonica.mistica.compose.theme.brand.O2Brand
+import com.telefonica.mistica.compose.theme.brand.O2NewBrand
 import com.telefonica.mistica.compose.theme.brand.TelefonicaBrand
 import com.telefonica.mistica.compose.theme.brand.TuBrand
 import com.telefonica.mistica.compose.theme.brand.VivoBrand
@@ -254,6 +256,7 @@ class ComponentCatalogActivity : AppCompatActivity() {
             TELEFONICA -> TelefonicaBrand
             BLAU -> BlauBrand
             TU -> TuBrand
+            O2_NEW -> O2NewBrand
         }
 
         setTheme(classicThemeOverride)

catalog/src/main/java/com/telefonica/mistica/catalog/ui/classic/components/CalloutsCatalogFragment.kt

@@ -17,6 +17,7 @@ import com.telefonica.mistica.input.CheckBoxInput
 import com.telefonica.mistica.input.DropDownInput
 import com.telefonica.mistica.input.TextInput
 import com.telefonica.mistica.util.getThemeColor
+import com.telefonica.mistica.util.getMisticaThemeDrawable
 
 class CalloutsCatalogFragment : Fragment() {
 
@@ -87,7 +88,7 @@ class CalloutsCatalogFragment : Fragment() {
             setInverse(inverse)
             with(view.findViewById<View>(R.id.callout_preview_container)) {
                 if (inverse) {
-                    setBackgroundColor(context.getThemeColor(R.attr.colorBackgroundBrand))
+                    background = context.getMisticaThemeDrawable(com.telefonica.mistica.R.attr.drawableBackgroundBrand)
                 } else {
                     setBackgroundColor(context.getThemeColor(R.attr.colorBackground))
                 }

catalog/src/main/java/com/telefonica/mistica/catalog/ui/compose/components/Buttons.kt

@@ -43,7 +43,7 @@ fun Buttons() {
         )
         Buttons(
             modifier = Modifier
-                .background(MisticaTheme.colors.backgroundBrand),
+                .background(MisticaTheme.brushes.backgroundBrand),
             filter = { it.name.contains("INVERSE") }
         )
     }

catalog/src/main/java/com/telefonica/mistica/catalog/ui/compose/components/Callouts.kt

@@ -135,13 +135,13 @@ fun Callouts() {
                 modifier = Modifier
                     .padding(vertical = 8.dp)
                     .fillMaxWidth()
-                    .background(
+                    .let {
                         if (inverse) {
-                            MisticaTheme.colors.backgroundBrand
+                            it.background(MisticaTheme.brushes.backgroundBrand)
                         } else {
-                            MisticaTheme.colors.background
+                            it.background(MisticaTheme.colors.background)
                         }
-                    ),
+                    },
             ) {
                 Callout(
                     modifier = Modifier

catalog/src/main/java/com/telefonica/mistica/catalog/ui/compose/components/Inputs.kt

@@ -81,7 +81,7 @@ fun Inputs() {
         Title("Inverse inputs")
         Column(
             modifier = Modifier
-                .background(MisticaTheme.colors.backgroundBrand)
+                .background(MisticaTheme.brushes.backgroundBrand)
                 .padding(bottom = 16.dp)
         ) {
             TextInputWithError(isInverse = true)

catalog/src/main/java/com/telefonica/mistica/catalog/ui/compose/components/Skeletons.kt

@@ -64,7 +64,7 @@ fun Skeletons() {
         }
         Column(
             modifier = Modifier
-                .background(MisticaTheme.colors.backgroundBrand)
+                .background(MisticaTheme.brushes.backgroundBrand)
                 .wrapContentHeight()
                 .padding(16.dp)
         ) {

catalog/src/main/res/drawable/ic_mistica_logo_text.xml

@@ -19,6 +19,17 @@
     <path
         android:pathData="M36.28,34.724L33.094,25.972L32.803,25.175C30.91,20.408 26.238,21.55 26.238,21.55L23.633,28.7C22.834,30.895 22.939,33.318 23.926,35.435C24.913,37.552 26.701,39.19 28.897,39.989C32.159,41.177 35.814,40.338 38.232,37.847C37.368,36.956 36.702,35.891 36.28,34.724Z"
         android:fillAlpha="0.4">
+      <aapt:attr name="android:fillColor">
+        <gradient
+            android:startY="15.422"
+            android:startX="40.2107"
+            android:endY="40.5725"
+            android:endX="24.1607"
+            android:type="linear">
+          <item android:offset="0" android:color="#FF000000"/>
+          <item android:offset="1" android:color="#00000000"/>
+        </gradient>
+      </aapt:attr>
     </path>
     <path
         android:pathData="M75.161,31.686V24.565C75.161,22.812 74.244,21.221 72.437,21.221C70.657,21.221 69.605,22.814 69.605,24.565V31.686H66.313V18.362H69.362L69.604,19.98C70.306,18.633 71.842,18.146 73.108,18.146C74.701,18.146 76.294,18.794 77.046,20.628C78.233,18.74 79.77,18.2 81.496,18.2C85.272,18.2 87.133,20.52 87.133,24.512V31.686H83.842V24.512C83.842,22.759 83.113,21.276 81.333,21.276C79.554,21.276 78.447,22.812 78.447,24.567V31.688L75.161,31.686Z"

catalog/src/main/res/layout/screen_buttons_catalog.xml

@@ -339,7 +339,7 @@
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:layout_marginTop="8dp"
-            android:background="?attr/colorBackgroundBrand"
+            android:background="?attr/drawableBackgroundBrand"
             android:gravity="center_horizontal"
             android:orientation="vertical">
 

catalog/src/main/res/layout/screen_inputs_catalog.xml

@@ -331,7 +331,7 @@
         <LinearLayout
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:background="?attr/colorBackgroundBrand"
+            android:background="?attr/drawableBackgroundBrand"
             android:orientation="vertical"
             android:padding="16dp">
 

library-test-utils/build.gradle

@@ -37,7 +37,7 @@ android {
 dependencies {
     implementation project(':library')
 
-    implementation 'androidx.core:core-ktx:1.12.0'
+    implementation 'androidx.core:core-ktx:1.13.0'
     implementation 'androidx.appcompat:appcompat:1.6.1'
     implementation 'com.google.android.material:material:1.11.0'
 }

library/build.gradle

@@ -14,6 +14,8 @@ android {
         minSdkVersion min_sdk_version
         targetSdkVersion target_sdk_version
 
+        consumerProguardFiles 'proguard-rules.txt'
+
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         vectorDrawables {
             useSupportLibrary true

library/proguard-rules.txt

@@ -0,0 +1,2 @@
+# Required rules for library consumers
+-keep class com.telefonica.mistica.theme.drawable.** { *; }

library/src/main/java/com/telefonica/mistica/compose/README.md

@@ -65,7 +65,7 @@ Mística-compose supports a subset of the Mística elements. The objective is to
 ## Fonts
 
 Mística-compose supports the same fonts supported in Mística.
-See [MisticaTypography](https://github.com/Telefonica/mistica-android/blob/main/library/src/main/java/com/telefonica/mistica/compose/theme/text/MisticaTypography.kt#L14)
+See [MisticaTypography](theme/text/MisticaTypography.kt#L14)
 
 Example of use:
 
@@ -76,6 +76,35 @@ Text(
 )
 ```
 
+## Colors
+
+Mística-compose supports the same colors supported in mistica.
+See [MisticaColors](theme/color/MisticaColorsAutogenerated.kt)
+
+Example of use:
+
+```kotlin
+Box(
+    modifier = Modifier.background(MisticaTheme.colors.background)
+)
+```
+
+## Brushes
+
+Appart from colors. Mística-compose also supports brushes, which are the same elements supported as drawables in xml themes.
+
+This is an heterogeneous compose type which can be defined internally as a solid color or as a gradient depending on the specific brand theme.
+
+See [MisticaBrushes](theme/brushes/MisticaBrushesAutogenerated.kt)
+
+Example of use:
+
+```kotlin
+Box(
+    modifier = Modifier.background(MisticaTheme.brushes.backgroundBrand)
+)
+```
+
 ## Demo app
 
 There is a Mística-compose catalog in the [Demo app](https://github.com/Telefonica/mistica-android/blob/main/README.md#demo-app) Search for Compose in your

library/src/main/java/com/telefonica/mistica/compose/card/highlightedcard/HighLightedCard.kt

@@ -5,6 +5,7 @@ import android.graphics.BitmapFactory
 import androidx.annotation.DrawableRes
 import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.defaultMinSize
 import androidx.compose.foundation.layout.padding
@@ -52,24 +53,28 @@ fun HighLightedCard(
     val verticalMargin = 24.dp
     val resources = LocalContext.current.resources
     androidx.compose.material.Card(
-        modifier = modifier.defaultMinSize(minHeight = 100.dp),
-        shape = RoundedCornerShape(1.dp),
+        modifier = modifier
+            .defaultMinSize(minHeight = 100.dp),
+        shape = RoundedCornerShape(MisticaTheme.radius.containerBorderRadius),
         elevation = 0.dp,
-        backgroundColor = if (inverseDisplay)
-            MisticaTheme.colors.backgroundBrand
-        else
-            MisticaTheme.colors.backgroundContainer,
         border = BorderStroke(width = 1.dp, color = MisticaTheme.colors.border)
     ) {
+        val bitmap = getBackgroundBitmap(resources, customBackground)
         ConstraintLayout(
-            modifier = modifier.drawBehind {
-                val bitmap = getBackgroundBitmap(resources, customBackground)
-                if (bitmap != null)
-                    drawImage(
-                        image = bitmap,
-                        dstSize = IntSize(this.size.width.toInt(), this.size.height.toInt())
-
-                    )
+            modifier = modifier.let {
+                when {
+                    bitmap != null ->
+                        it.drawBehind {
+                            drawImage(
+                                image = bitmap,
+                                dstSize = IntSize(this.size.width.toInt(), this.size.height.toInt())
+                            )
+                        }
+                    inverseDisplay ->
+                        it.background(MisticaTheme.brushes.backgroundBrand)
+                    else ->
+                        it.background(MisticaTheme.colors.backgroundContainer)
+                }
             }
         ) {
             val (

library/src/main/java/com/telefonica/mistica/compose/list/ListRowItem.kt

@@ -158,7 +158,7 @@ private fun ListRowItemImp(
 
         BackgroundType.TYPE_BOXED_INVERSE -> Modifier
             .background(
-                color = MisticaTheme.colors.backgroundBrand,
+                brush = MisticaTheme.brushes.backgroundBrand,
                 shape = RoundedCornerShape(MisticaTheme.radius.containerBorderRadius),
             )
     }