Update design tokens (#378)

* Update design tokens * ANDROID-15048 Update. Replace old tokens with the new ones. * ANDROID-15048 Update. Compose migration with new titles * ANDROID-15048 Fix. Reame wrong url --------- Co-authored-by: haynlo <[email protected]> Co-authored-by: Fernando Garcia <[email protected]>
Telefonica · Sep 4, 2024 · 4650877 · 4650877
1 parent 4eacf9c
commit 4650877
Show file tree

Hide file tree

Showing 69 changed files with 859 additions and 587 deletions.
diff --git a/catalog/src/main/java/com/telefonica/mistica/catalog/ui/compose/components/Titles.kt b/catalog/src/main/java/com/telefonica/mistica/catalog/ui/compose/components/Titles.kt
@@ -1,7 +1,9 @@
 package com.telefonica.mistica.catalog.ui.compose.components
 
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
@@ -21,7 +23,8 @@ fun Titles() {
             .padding(16.dp)
     ) {
         DefaultTitles()
-        TitleStyle.values().forEach {
+        TitleStyle.entries.forEach {
+            Spacer(modifier = Modifier.height(24.dp))
             TitlesWithStyleOverridden(it)
         }
     }

diff --git a/catalog/src/main/res/layout/title_catalog.xml b/catalog/src/main/res/layout/title_catalog.xml
@@ -14,36 +14,40 @@
 			android:orientation="vertical">
 
 		<com.telefonica.mistica.title.TitleView
-				android:id="@+id/short_title"
+				android:id="@+id/short_default_title"
 				android:layout_width="match_parent"
 				android:layout_height="wrap_content"
 				android:layout_marginBottom="8dp"
 				app:isTitleHeading="true"
 				app:title="Short default Title" />
 
 		<com.telefonica.mistica.title.TitleView
-				android:id="@+id/long_title"
+				android:id="@+id/long_default_title"
 				android:layout_width="match_parent"
 				android:layout_height="wrap_content"
 				android:layout_marginBottom="8dp"
 				app:title="Some default title that can get really long and almost fill the whole line" />
 
 		<com.telefonica.mistica.title.TitleView
-				android:id="@+id/short_title_with_link"
+				android:id="@+id/short_default_title_with_link"
 				android:layout_width="match_parent"
 				android:layout_height="wrap_content"
 				android:layout_marginBottom="8dp"
 				app:link="Some link"
 				app:title="Short default Title" />
 
 		<com.telefonica.mistica.title.TitleView
-				android:id="@+id/long_title_with_link"
+				android:id="@+id/long_default_title_with_link"
 				android:layout_width="match_parent"
 				android:layout_height="wrap_content"
 				android:layout_marginBottom="8dp"
 				app:link="Some link"
 				app:title="Some default title that can get really long and almost fill the whole line" />
 
+		<Space
+				android:layout_width="match_parent"
+				android:layout_height="24dp" />
+
 		<com.telefonica.mistica.title.TitleView
 				android:layout_width="match_parent"
 				android:layout_height="wrap_content"
@@ -76,15 +80,29 @@
 				app:title="Some title 1 that can get really long and almost fill the whole line" />
 
 		<com.telefonica.mistica.title.TitleView
-				android:id="@+id/short_title_with_style_1"
+				android:id="@+id/short_title_with_style_1_with_link_and_chevron"
+				android:layout_width="match_parent"
+				android:layout_height="wrap_content"
+				android:layout_marginBottom="8dp"
+				app:link="Some link"
+				app:linkWithChevron="true"
+				app:titleStyle="title1"
+				app:title="Some title 1 with chevron" />
+
+		<Space
+				android:layout_width="match_parent"
+				android:layout_height="24dp" />
+
+		<com.telefonica.mistica.title.TitleView
+				android:id="@+id/short_title_with_style_2"
 				android:layout_width="match_parent"
 				android:layout_height="wrap_content"
 				android:layout_marginBottom="8dp"
 				app:titleStyle="title2"
 				app:title="Some title 2" />
 
 		<com.telefonica.mistica.title.TitleView
-				android:id="@+id/short_title_with_style_1_with_link"
+				android:id="@+id/short_title_with_style_2_with_link"
 				android:layout_width="match_parent"
 				android:layout_height="wrap_content"
 				android:layout_marginBottom="8dp"
@@ -93,15 +111,15 @@
 				app:title="Some title 2" />
 
 		<com.telefonica.mistica.title.TitleView
-				android:id="@+id/long_title_with_style_1"
+				android:id="@+id/long_title_with_style_2"
 				android:layout_width="match_parent"
 				android:layout_height="wrap_content"
 				android:layout_marginBottom="8dp"
 				app:titleStyle="title2"
 				app:title="Some title 2 that can get really long and almost fill the whole line" />
 
 		<com.telefonica.mistica.title.TitleView
-				android:id="@+id/long_title_with_style_1_with_link"
+				android:id="@+id/long_title_with_style_2_with_link"
 				android:layout_width="match_parent"
 				android:layout_height="wrap_content"
 				android:layout_marginBottom="8dp"
@@ -110,25 +128,110 @@
 				app:title="Some title 2 that can get really long and almost fill the whole line" />
 
 		<com.telefonica.mistica.title.TitleView
-				android:id="@+id/short_title_with_style_1_with_link_and_chevron"
+				android:id="@+id/short_title_with_style_2_with_link_and_chevron"
 				android:layout_width="match_parent"
 				android:layout_height="wrap_content"
 				android:layout_marginBottom="8dp"
 				app:link="Some link"
 				app:linkWithChevron="true"
-				app:titleStyle="title1"
-				app:title="Some title 1 with chevron" />
+				app:titleStyle="title2"
+				app:title="Some title 2 with chevron" />
+
+		<Space
+				android:layout_width="match_parent"
+				android:layout_height="24dp" />
 
 		<com.telefonica.mistica.title.TitleView
-				android:id="@+id/short_title_with_style_2_with_link_and_chevron"
+				android:id="@+id/short_title_with_style_3"
+				android:layout_width="match_parent"
+				android:layout_height="wrap_content"
+				android:layout_marginBottom="8dp"
+				app:titleStyle="title3"
+				app:title="Some title 3" />
+
+		<com.telefonica.mistica.title.TitleView
+				android:id="@+id/short_title_with_style_3_with_link"
+				android:layout_width="match_parent"
+				android:layout_height="wrap_content"
+				android:layout_marginBottom="8dp"
+				app:link="Some link"
+				app:titleStyle="title3"
+				app:title="Some title 3" />
+
+		<com.telefonica.mistica.title.TitleView
+				android:id="@+id/long_title_with_style_3"
+				android:layout_width="match_parent"
+				android:layout_height="wrap_content"
+				android:layout_marginBottom="8dp"
+				app:titleStyle="title3"
+				app:title="Some title 3 that can get really long and almost fill the whole line" />
+
+		<com.telefonica.mistica.title.TitleView
+				android:id="@+id/long_title_with_style_3_with_link"
+				android:layout_width="match_parent"
+				android:layout_height="wrap_content"
+				android:layout_marginBottom="8dp"
+				app:link="Some link"
+				app:titleStyle="title3"
+				app:title="Some title 3 that can get really long and almost fill the whole line" />
+
+		<com.telefonica.mistica.title.TitleView
+				android:id="@+id/short_title_with_style_3_with_link_and_chevron"
 				android:layout_width="match_parent"
 				android:layout_height="wrap_content"
 				android:layout_marginBottom="8dp"
 				app:link="Some link"
 				app:linkWithChevron="true"
-				app:titleStyle="title2"
-				app:title="Some title 2 with chevron" />
+				app:titleStyle="title3"
+				app:title="Some title 3 with chevron" />
 
-	</LinearLayout>
+		<Space
+				android:layout_width="match_parent"
+				android:layout_height="24dp" />
+
+		<com.telefonica.mistica.title.TitleView
+				android:id="@+id/short_title_with_style_4"
+				android:layout_width="match_parent"
+				android:layout_height="wrap_content"
+				android:layout_marginBottom="8dp"
+				app:titleStyle="title4"
+				app:title="Some title 4" />
+
+		<com.telefonica.mistica.title.TitleView
+				android:id="@+id/short_title_with_style_4_with_link"
+				android:layout_width="match_parent"
+				android:layout_height="wrap_content"
+				android:layout_marginBottom="8dp"
+				app:link="Some link"
+				app:titleStyle="title4"
+				app:title="Some title 4" />
 
+		<com.telefonica.mistica.title.TitleView
+				android:id="@+id/long_title_with_style_4"
+				android:layout_width="match_parent"
+				android:layout_height="wrap_content"
+				android:layout_marginBottom="8dp"
+				app:titleStyle="title4"
+				app:title="Some title 4 that can get really long and almost fill the whole line" />
+
+		<com.telefonica.mistica.title.TitleView
+				android:id="@+id/long_title_with_style_4_with_link"
+				android:layout_width="match_parent"
+				android:layout_height="wrap_content"
+				android:layout_marginBottom="8dp"
+				app:link="Some link"
+				app:titleStyle="title4"
+				app:title="Some title 4 that can get really long and almost fill the whole line" />
+
+		<com.telefonica.mistica.title.TitleView
+				android:id="@+id/short_title_with_style_4_with_link_and_chevron"
+				android:layout_width="match_parent"
+				android:layout_height="wrap_content"
+				android:layout_marginBottom="8dp"
+				app:link="Some link"
+				app:linkWithChevron="true"
+				app:titleStyle="title4"
+				app:title="Some title 4 with chevron" />
+
+	</LinearLayout>
 </ScrollView>
diff --git a/library/src/main/java/com/telefonica/mistica/compose/button/ButtonStyles.kt b/library/src/main/java/com/telefonica/mistica/compose/button/ButtonStyles.kt
@@ -64,7 +64,7 @@ private fun primary(
     ),
     textColor: Color = MisticaTheme.colors.textButtonPrimary,
     disabledTextColor: Color = textColor.disabled(),
-    rippleTheme: MisticaRippleTheme = MisticaRippleTheme(MisticaTheme.colors.buttonPrimaryBackgroundSelected),
+    rippleTheme: MisticaRippleTheme = MisticaRippleTheme(MisticaTheme.colors.buttonPrimaryBackgroundPressed),
 ) = ButtonStyleConfig(
     buttonColors = buttonColors,
     textColor = textColor,
@@ -78,16 +78,16 @@ private fun primaryInverse() = primary(
         backgroundColor = MisticaTheme.colors.buttonPrimaryBackgroundInverse,
         disabledBackgroundColor = MisticaTheme.colors.buttonPrimaryBackgroundInverse.disabled()
     ),
-    textColor = MisticaTheme.colors.textButtonPrimaryInverseSelected,
+    textColor = MisticaTheme.colors.textButtonPrimaryInversePressed,
     disabledTextColor = MisticaTheme.colors.textButtonPrimaryInverse,
-    rippleTheme = MisticaRippleTheme(MisticaTheme.colors.buttonPrimaryBackgroundInverseSelected),
+    rippleTheme = MisticaRippleTheme(MisticaTheme.colors.buttonPrimaryBackgroundInversePressed),
 )
 
 @Composable
 private fun secondary(
     textColor: Color = MisticaTheme.colors.textButtonSecondary,
     strokeColor: Color = MisticaTheme.colors.buttonSecondaryBorder,
-    rippleTheme: MisticaRippleTheme = MisticaRippleTheme(MisticaTheme.colors.buttonSecondaryBackgroundSelected)
+    rippleTheme: MisticaRippleTheme = MisticaRippleTheme(MisticaTheme.colors.buttonSecondaryBackgroundPressed)
 ) = ButtonStyleConfig(
     buttonColors = ButtonDefaults.outlinedButtonColors(
         backgroundColor = Color.Transparent,
@@ -112,7 +112,7 @@ private fun secondaryInverseConfig() =
     secondary(
         textColor = MisticaTheme.colors.textButtonSecondaryInverse,
         strokeColor = MisticaTheme.colors.buttonSecondaryBorderInverse,
-        rippleTheme = MisticaRippleTheme(MisticaTheme.colors.buttonSecondaryBackgroundInverseSelected)
+        rippleTheme = MisticaRippleTheme(MisticaTheme.colors.buttonSecondaryBackgroundInversePressed)
     )
 
 @Composable
@@ -121,7 +121,7 @@ private fun danger() = primary(
         backgroundColor = MisticaTheme.colors.buttonDangerBackground,
         disabledBackgroundColor = MisticaTheme.colors.buttonDangerBackground.disabled()
     ),
-    rippleTheme = MisticaRippleTheme(MisticaTheme.colors.buttonDangerBackgroundSelected)
+    rippleTheme = MisticaRippleTheme(MisticaTheme.colors.buttonDangerBackgroundPressed)
 )
 
 @Composable
@@ -134,7 +134,7 @@ private fun link(
     ),
     textColor = textColor,
     disabledTextColor = textColor.disabled(),
-    rippleTheme = MisticaRippleTheme(MisticaTheme.colors.buttonLinkBackgroundSelected),
+    rippleTheme = MisticaRippleTheme(MisticaTheme.colors.buttonLinkBackgroundPressed),
 )
 
 @Composable
@@ -147,7 +147,7 @@ private fun linkInverse() = link(
 private fun dangerLink(
     textColor: Color = MisticaTheme.colors.textLinkDanger,
     backgroundColor: Color = Color.Transparent,
-    selectedBackgroundColor: Color = MisticaTheme.colors.buttonLinkDangerBackgroundSelected,
+    selectedBackgroundColor: Color = MisticaTheme.colors.buttonLinkDangerBackgroundPressed,
 ) = primary(
     buttonColors = ButtonDefaults.buttonColors(
         backgroundColor = backgroundColor,
@@ -161,7 +161,7 @@ private fun dangerLink(
 @Composable
 private fun dangerLinkInverse() = dangerLink(
     backgroundColor = MisticaTheme.colors.buttonLinkDangerBackgroundInverse,
-    selectedBackgroundColor = MisticaTheme.colors.buttonLinkDangerBackgroundInverseSelected,
+    selectedBackgroundColor = MisticaTheme.colors.buttonLinkDangerBackgroundInversePressed,
 )
 
 private fun Color.disabled() =

diff --git a/library/src/main/java/com/telefonica/mistica/compose/theme/MisticaTheme.kt b/library/src/main/java/com/telefonica/mistica/compose/theme/MisticaTheme.kt
@@ -75,6 +75,9 @@ fun MisticaTheme(
             presetSmallButtonFontWeight = brand.buttonFontWeight,
             presetLinkFontWeight = brand.linkFontWeight,
             presetTitle1FontWeight = brand.title1FontWeight,
+            presetTitle2FontWeight = brand.title2FontWeight,
+            presetTitle3FontWeight = brand.title3FontWeight,
+            presetTitle3FontSize = brand.title3FontSize,
             presetIndicatorFontWeight = brand.indicatorFontWeight,
             presetTabsLabelFontWeight = brand.tabsLabelFontWeight,
             presetTabsLabelFontSize = brand.tabsLabelFontSize,

diff --git a/library/src/main/java/com/telefonica/mistica/compose/theme/brand/BlauBrand.kt b/library/src/main/java/com/telefonica/mistica/compose/theme/brand/BlauBrand.kt
@@ -1,5 +1,7 @@
 package com.telefonica.mistica.compose.theme.brand
 
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.TextUnit
 import com.telefonica.mistica.R
 import com.telefonica.mistica.compose.theme.brushes.MisticaBrushes
 
@@ -36,6 +38,12 @@ object BlauBrand : Brand {
 
     override val title1FontWeight = BlauBrandFontWeights.title1FontWeight
 
+    override val title2FontWeight = BlauBrandFontWeights.title2FontWeight
+
+    override val title3FontWeight = BlauBrandFontWeights.title3FontWeight
+
+    override val title3FontSize = BlauBrandFontSizes.title3FontSize
+
     override val indicatorFontWeight = BlauBrandFontWeights.indicatorFontWeight
 
     override val tabsLabelFontWeight = BlauBrandFontWeights.tabsLabelFontWeight