Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update design tokens #378

Merged
merged 4 commits into from
Sep 4, 2024
Merged

Update design tokens #378

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f505bff
Update design tokens
haynlo Aug 29, 2024
b34175f
ANDROID-15048 Update. Replace old tokens with the new ones.
haynlo Aug 29, 2024
f8880d0
ANDROID-15048 Update. Compose migration with new titles
haynlo Aug 30, 2024
fe882a2
ANDROID-15048 Fix. Reame wrong url
haynlo Aug 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion catalog/src/main/java/com/telefonica/mistica/catalog/ui/compose/components/Titles.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -21,7 +23,8 @@ fun Titles() {
.padding(16.dp)
) {
DefaultTitles()
TitleStyle.values().forEach {
TitleStyle.entries.forEach {
Spacer(modifier = Modifier.height(24.dp))
Copy link
Contributor

@haynlo haynlo Aug 30, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just to make Title catalog easier to check for each Title type.

Copy link
Contributor

@jeprubio jeprubio Aug 30, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could also make TitlesWithStyleOverriden accept a modifier by parameter and set padding there.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, but the Composable TitlesWithStyleOverridden does not have a root composable component like Row, Column or Box, so I could not apply this parameterized modifier. I added a Spacer instead to make it as simple as possible with minimal code.

TitlesWithStyleOverridden(it)
}
}
Expand Down
133 changes: 118 additions & 15 deletions catalog/src/main/res/layout/title_catalog.xml
View file
Open in desktop
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Improve id's naming and add new Titles

Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand All @@ -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"
pmartinbTEF marked this conversation as resolved.
Show resolved Hide resolved
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
Expand All @@ -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>
18 changes: 9 additions & 9 deletions library/src/main/java/com/telefonica/mistica/compose/button/ButtonStyles.kt
View file
Open in desktop
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Apart from the change in titles, the names of the buttons that ended in "Selected" have also been changed to "Pressed"

Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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,
Expand All @@ -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
Expand All @@ -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
Expand All @@ -134,7 +134,7 @@ private fun link(
),
textColor = textColor,
disabledTextColor = textColor.disabled(),
rippleTheme = MisticaRippleTheme(MisticaTheme.colors.buttonLinkBackgroundSelected),
rippleTheme = MisticaRippleTheme(MisticaTheme.colors.buttonLinkBackgroundPressed),
)

@Composable
Expand All @@ -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,
Expand All @@ -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() =
Expand Down
3 changes: 3 additions & 0 deletions library/src/main/java/com/telefonica/mistica/compose/theme/MisticaTheme.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,9 @@ fun MisticaTheme(
presetSmallButtonFontWeight = brand.buttonFontWeight,
presetLinkFontWeight = brand.linkFontWeight,
presetTitle1FontWeight = brand.title1FontWeight,
presetTitle2FontWeight = brand.title2FontWeight,
presetTitle3FontWeight = brand.title3FontWeight,
presetTitle3FontSize = brand.title3FontSize,
Comment on lines 77 to +80
Copy link
Contributor

@haynlo haynlo Aug 30, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • Title1 -> Remains the same as before
  • Title2 -> based on Preset3 with custom font-weightfor each brand
  • Title3 -> based on Preset5 (as it was configured in the old Title2) with custom font-weight and text-size for each brand
  • Title4 -> based on Preset6 without any customization, so that's why I didn't add a specific preset for Title4.

ℹ️ You will see the same configuration in the XML-side.
More info here: https://www.figma.com/design/yQRVCOmRQNM98bnXndLPxK/%F0%9F%94%B8-Title-Specs?node-id=504-624&t=wuNyXP4uuHApFHcf-4

presetIndicatorFontWeight = brand.indicatorFontWeight,
presetTabsLabelFontWeight = brand.tabsLabelFontWeight,
presetTabsLabelFontSize = brand.tabsLabelFontSize,
Expand Down
8 changes: 8 additions & 0 deletions library/src/main/java/com/telefonica/mistica/compose/theme/brand/BlauBrand.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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

Expand Down Expand Up @@ -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
Expand Down
Loading
Loading