Skip to content

Commit

Permalink
Feat(Title): Update title component and Mistica tokens (#396)
Browse files Browse the repository at this point in the history 
BREAKING CHANGE: Add some title styles and modify the existing ones. Rename the color tokens from mistica-design.

* Update tokens

* Update tokens again

* Fix breaking change

* IOS-10491 Update Title component (#397)

* Update Title styles

* Fix current screenshots

* Add tests for new title styles

* Add new title styles to the catalog

* Keep the previous one as default to avoid breaking changes

* Fix font tests due to new tokens
  • Loading branch information
@amegias
amegias authored Aug 26, 2024
1 parent bfccd47 commit d3df994
Show file tree
Hide file tree
Showing 133 changed files with 724 additions and 504 deletions.
10 changes: 9 additions & 1 deletion MisticaCatalog/Source/Catalog/Mistica/Components/UICatalogSectionTitleViewController.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,15 @@ private enum Constants {
Style(titleStyle: .title2, title: "Title2 with link", linkTitle: "Text link"),
Style(titleStyle: .title2, title: "Title2 with no link", linkTitle: nil),
Style(titleStyle: .title2, title: "Title2 with link and some large title using 2 lines", linkTitle: "Text link"),
Style(titleStyle: .title2, title: "Title2 with no link and some large title using 2 lines", linkTitle: nil)
Style(titleStyle: .title2, title: "Title2 with no link and some large title using 2 lines", linkTitle: nil),
Style(titleStyle: .title3, title: "Title3 with link", linkTitle: "Text link"),
Style(titleStyle: .title3, title: "Title3 with no link", linkTitle: nil),
Style(titleStyle: .title3, title: "Title3 with link and some large title using 2 lines", linkTitle: "Text link"),
Style(titleStyle: .title3, title: "Title3 with no link and some large title using 2 lines", linkTitle: nil),
Style(titleStyle: .title4, title: "Title4 with link", linkTitle: "Text link"),
Style(titleStyle: .title4, title: "Title4 with no link", linkTitle: nil),
Style(titleStyle: .title4, title: "Title4 with link and some large title using 2 lines", linkTitle: "Text link"),
Style(titleStyle: .title4, title: "Title4 with no link and some large title using 2 lines", linkTitle: nil)
]
}
}
Expand Down
18 changes: 9 additions & 9 deletions Sources/Mistica/Components/Button/ButtonStyle+Toolkit.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ public extension Button.Style {
allowsBleedingAlignment: false,
stateStyleByState: [
.normal: Button.StateStyle(textColor: .textButtonPrimary, backgroundColor: .buttonPrimaryBackground, borderColor: .buttonPrimaryBackground),
.selected: Button.StateStyle(textColor: .textButtonPrimary, backgroundColor: .buttonPrimaryBackgroundSelected, borderColor: .buttonPrimaryBackgroundSelected),
.selected: Button.StateStyle(textColor: .textButtonPrimary, backgroundColor: .buttonPrimaryBackgroundPressed, borderColor: .buttonPrimaryBackgroundPressed),
.disabled: Button.StateStyle(textColor: .textButtonPrimary, backgroundColor: .buttonPrimaryBackground, borderColor: .buttonPrimaryBackground),
.loading: Button.StateStyle(textColor: .textButtonPrimary, backgroundColor: .buttonPrimaryBackground, borderColor: .buttonPrimaryBackground)
]
Expand All @@ -45,7 +45,7 @@ public extension Button.Style {
allowsBleedingAlignment: false,
stateStyleByState: [
.normal: Button.StateStyle(textColor: .textButtonSecondary, backgroundColor: backgroundColor, borderColor: .buttonSecondaryBorder),
.selected: Button.StateStyle(textColor: .textButtonSecondarySelected, backgroundColor: backgroundColor, borderColor: .buttonSecondaryBackgroundSelected),
.selected: Button.StateStyle(textColor: .textButtonSecondaryPressed, backgroundColor: backgroundColor, borderColor: .buttonSecondaryBackgroundPressed),
.disabled: Button.StateStyle(textColor: .textButtonSecondary, backgroundColor: backgroundColor, borderColor: .buttonSecondaryBorder),
.loading: Button.StateStyle(textColor: .textButtonSecondary, backgroundColor: backgroundColor, borderColor: .buttonSecondaryBorder)
]
Expand All @@ -59,7 +59,7 @@ public extension Button.Style {
allowsBleedingAlignment: false,
stateStyleByState: [
.normal: Button.StateStyle(textColor: textColor, backgroundColor: .buttonDangerBackground, borderColor: .buttonDangerBackground),
.selected: Button.StateStyle(textColor: textColor, backgroundColor: .buttonDangerBackgroundSelected, borderColor: .buttonDangerBackgroundSelected),
.selected: Button.StateStyle(textColor: textColor, backgroundColor: .buttonDangerBackgroundPressed, borderColor: .buttonDangerBackgroundPressed),
.disabled: Button.StateStyle(textColor: textColor, backgroundColor: .buttonDangerBackground, borderColor: .buttonDangerBackground),
.loading: Button.StateStyle(textColor: textColor, backgroundColor: .buttonDangerBackground, borderColor: .buttonDangerBackground)
]
Expand All @@ -73,7 +73,7 @@ public extension Button.Style {
allowsBleedingAlignment: true,
stateStyleByState: [
.normal: Button.StateStyle(textColor: .textLink, backgroundColor: backgroundColor, borderColor: backgroundColor),
.selected: Button.StateStyle(textColor: .textLink, backgroundColor: .buttonLinkBackgroundSelected, borderColor: backgroundColor),
.selected: Button.StateStyle(textColor: .textLink, backgroundColor: .buttonLinkBackgroundPressed, borderColor: backgroundColor),
.disabled: Button.StateStyle(textColor: .textLink, backgroundColor: backgroundColor, borderColor: backgroundColor),
.loading: Button.StateStyle(textColor: .textLink, backgroundColor: backgroundColor, borderColor: backgroundColor)
]
Expand All @@ -89,7 +89,7 @@ public extension Button.Style {
allowsBleedingAlignment: true,
stateStyleByState: [
.normal: Button.StateStyle(textColor: .textLinkDanger, backgroundColor: .clear, borderColor: .clear),
.selected: Button.StateStyle(textColor: .textLinkDanger, backgroundColor: .buttonLinkDangerBackgroundSelected, borderColor: .clear),
.selected: Button.StateStyle(textColor: .textLinkDanger, backgroundColor: .buttonLinkDangerBackgroundPressed, borderColor: .clear),
.disabled: Button.StateStyle(textColor: .textLinkDanger, backgroundColor: .clear, borderColor: .clear),
.loading: Button.StateStyle(textColor: .textLinkDanger, backgroundColor: .clear, borderColor: .clear)
]
Expand All @@ -105,7 +105,7 @@ public extension Button.Style {
allowsBleedingAlignment: true,
stateStyleByState: [
.normal: Button.StateStyle(textColor: .textLinkDanger, backgroundColor: .buttonLinkDangerBackgroundInverse, borderColor: .clear),
.selected: Button.StateStyle(textColor: .textLinkDanger, backgroundColor: .buttonLinkDangerBackgroundInverseSelected, borderColor: .clear),
.selected: Button.StateStyle(textColor: .textLinkDanger, backgroundColor: .buttonLinkDangerBackgroundInversePressed, borderColor: .clear),
.disabled: Button.StateStyle(textColor: .textLinkDanger, backgroundColor: .clear, borderColor: .clear),
.loading: Button.StateStyle(textColor: .textLinkDanger, backgroundColor: .clear, borderColor: .clear)
]
Expand All @@ -121,7 +121,7 @@ public extension Button.Style {
allowsBleedingAlignment: false,
stateStyleByState: [
.normal: Button.StateStyle(textColor: .textButtonPrimaryInverse, backgroundColor: .buttonPrimaryBackgroundInverse, borderColor: .buttonPrimaryBackgroundInverse),
.selected: Button.StateStyle(textColor: .textButtonPrimaryInverseSelected, backgroundColor: .buttonPrimaryBackgroundInverseSelected, borderColor: .buttonPrimaryBackgroundInverseSelected),
.selected: Button.StateStyle(textColor: .textButtonPrimaryInversePressed, backgroundColor: .buttonPrimaryBackgroundInversePressed, borderColor: .buttonPrimaryBackgroundInversePressed),
.disabled: Button.StateStyle(textColor: .textButtonPrimaryInverse, backgroundColor: .buttonPrimaryBackgroundInverse, borderColor: .buttonPrimaryBackgroundInverse),
.loading: Button.StateStyle(textColor: .textButtonPrimaryInverse, backgroundColor: .buttonPrimaryBackgroundInverse, borderColor: .buttonPrimaryBackgroundInverse)
]
Expand All @@ -133,7 +133,7 @@ public extension Button.Style {
allowsBleedingAlignment: false,
stateStyleByState: [
.normal: Button.StateStyle(textColor: .textButtonSecondaryInverse, backgroundColor: .clear, borderColor: .buttonSecondaryBorderInverse),
.selected: Button.StateStyle(textColor: .textButtonSecondaryInverseSelected, backgroundColor: .clear, borderColor: .buttonSecondaryBorderInverseSelected),
.selected: Button.StateStyle(textColor: .textButtonSecondaryInversePressed, backgroundColor: .clear, borderColor: .buttonSecondaryBorderInversePressed),
.disabled: Button.StateStyle(textColor: .textButtonSecondaryInverse, backgroundColor: .clear, borderColor: .buttonSecondaryBorderInverse),
.loading: Button.StateStyle(textColor: .textButtonSecondaryInverse, backgroundColor: .clear, borderColor: .buttonSecondaryBorderInverse)
]
Expand All @@ -146,7 +146,7 @@ public extension Button.Style {
allowsBleedingAlignment: true,
stateStyleByState: [
.normal: Button.StateStyle(textColor: .textLinkInverse, backgroundColor: backgroundColor, borderColor: backgroundColor),
.selected: Button.StateStyle(textColor: .textLinkInverse, backgroundColor: .buttonLinkBackgroundInverseSelected, borderColor: backgroundColor),
.selected: Button.StateStyle(textColor: .textLinkInverse, backgroundColor: .buttonLinkBackgroundInversePressed, borderColor: backgroundColor),
.disabled: Button.StateStyle(textColor: .textLinkInverse, backgroundColor: backgroundColor, borderColor: backgroundColor),
.loading: Button.StateStyle(textColor: .textLinkInverse, backgroundColor: backgroundColor, borderColor: backgroundColor)
]
Expand Down
2 changes: 1 addition & 1 deletion Sources/Mistica/Components/Crouton/Domain/CroutonConfig.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ private extension Button.Style {
allowsBleedingAlignment: true,
stateStyleByState: [
.normal: Button.StateStyle(textColor: .textLinkSnackbar, backgroundColor: backgroundColor, borderColor: backgroundColor),
.selected: Button.StateStyle(textColor: .textLinkSnackbar, backgroundColor: .buttonLinkBackgroundSelected, borderColor: backgroundColor),
.selected: Button.StateStyle(textColor: .textLinkSnackbar, backgroundColor: .buttonLinkBackgroundPressed, borderColor: backgroundColor),
.disabled: Button.StateStyle(textColor: .textLinkSnackbar, backgroundColor: backgroundColor, borderColor: backgroundColor),
.loading: Button.StateStyle(textColor: .textLinkSnackbar, backgroundColor: backgroundColor, borderColor: backgroundColor)
]
Expand Down
18 changes: 14 additions & 4 deletions Sources/Mistica/Components/Title/TitleView.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,21 +19,29 @@ public class TitleView: UIView {
public enum Style {
case title1
case title2
case title3
case title4

var font: UIFont {
switch self {
case .title1:
return .textPreset1(weight: .title1)
case .title2:
return .textPreset5()
return .textPreset3(weight: .title2)
case .title3:
return .textTitle3()
case .title4:
return .textPreset6()
}
}

var textColor: UIColor {
switch self {
case .title1:
return .textSecondary
case .title2:
case .title2,
.title3,
.title4:
return .textPrimary
}
}
Expand All @@ -42,7 +50,9 @@ public class TitleView: UIView {
switch self {
case .title1:
return text?.uppercased()
case .title2:
case .title2,
.title3,
.title4:
return text
}
}
Expand Down Expand Up @@ -161,7 +171,7 @@ private extension TitleView.Style {
static var `default`: Self {
switch MisticaConfig.brandStyle {
case .movistar:
return .title2
return .title3
case .blau, .o2, .o2New, .vivo, .custom, .vivoNew, .telefonica, .tu:
return .title1
}
Expand Down
39 changes: 25 additions & 14 deletions Sources/MisticaCommon/Colors/BlauColorPalette.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,59 +67,59 @@ struct BlauColors: MisticaColors {

let buttonDangerBackground = BlauColors.palette.blauRed

let buttonDangerBackgroundSelected = BlauColors.palette.blauRed70
let buttonDangerBackgroundPressed = BlauColors.palette.blauRed70

let buttonDangerBackgroundHover = BlauColors.palette.blauRed70

let buttonLinkDangerBackgroundSelected = BlauColors.palette.blauRed10 | BlauColors.palette.blauPurple.withAlphaComponent(0.3)
let buttonLinkDangerBackgroundPressed = BlauColors.palette.blauRed10 | BlauColors.palette.blauPurple.withAlphaComponent(0.3)

let buttonLinkDangerBackgroundInverse = BlauColors.palette.white | BlauColors.palette.white.withAlphaComponent(0)

let buttonLinkDangerBackgroundInverseSelected = BlauColors.palette.blauRed10 | BlauColors.palette.blauPurple.withAlphaComponent(0.3)
let buttonLinkDangerBackgroundInversePressed = BlauColors.palette.blauRed10 | BlauColors.palette.blauPurple.withAlphaComponent(0.3)

let buttonLinkBackgroundSelected = BlauColors.palette.blauPurple10 | BlauColors.palette.blauPurple.withAlphaComponent(0.3)
let buttonLinkBackgroundPressed = BlauColors.palette.blauPurple10 | BlauColors.palette.blauPurple.withAlphaComponent(0.3)

let buttonLinkBackgroundInverseSelected = BlauColors.palette.white.withAlphaComponent(0.15) | BlauColors.palette.blauPurple.withAlphaComponent(0.3)
let buttonLinkBackgroundInversePressed = BlauColors.palette.white.withAlphaComponent(0.15) | BlauColors.palette.blauPurple.withAlphaComponent(0.3)

let buttonPrimaryBackground = BlauColors.palette.blauBlueSecondary

let buttonPrimaryBackgroundInverse = BlauColors.palette.white | BlauColors.palette.blauBluePrimary

let buttonPrimaryBackgroundSelected = BlauColors.palette.blauBlueSecondary60
let buttonPrimaryBackgroundPressed = BlauColors.palette.blauBlueSecondary60

let buttonPrimaryBackgroundHover = BlauColors.palette.blauBlueSecondary60

let buttonPrimaryBackgroundInverseSelected = BlauColors.palette.blauBluePrimary30 | BlauColors.palette.blauBlueSecondary60
let buttonPrimaryBackgroundInversePressed = BlauColors.palette.blauBluePrimary30 | BlauColors.palette.blauBlueSecondary60

let buttonSecondaryBorder = BlauColors.palette.blauBlueSecondary | BlauColors.palette.white

let buttonSecondaryBorderSelected = BlauColors.palette.blauBlueSecondary60 | BlauColors.palette.white
let buttonSecondaryBorderPressed = BlauColors.palette.blauBlueSecondary60 | BlauColors.palette.white

let buttonSecondaryBorderInverse = BlauColors.palette.white

let buttonSecondaryBackgroundHover = BlauColors.palette.blauBlueSecondary10 | BlauColors.palette.white.withAlphaComponent(0.15)

let buttonSecondaryBackgroundSelected = BlauColors.palette.blauBlueSecondary10 | BlauColors.palette.white.withAlphaComponent(0.15)
let buttonSecondaryBackgroundPressed = BlauColors.palette.blauBlueSecondary10 | BlauColors.palette.white.withAlphaComponent(0.15)

let buttonSecondaryBorderInverseSelected = BlauColors.palette.white
let buttonSecondaryBorderInversePressed = BlauColors.palette.white

let buttonSecondaryBackgroundInverseHover = BlauColors.palette.white.withAlphaComponent(0.2) | BlauColors.palette.white.withAlphaComponent(0.15)

let buttonSecondaryBackgroundInverseSelected = BlauColors.palette.white.withAlphaComponent(0.2) | BlauColors.palette.white.withAlphaComponent(0.15)
let buttonSecondaryBackgroundInversePressed = BlauColors.palette.white.withAlphaComponent(0.2) | BlauColors.palette.white.withAlphaComponent(0.15)

let textButtonPrimary = BlauColors.palette.white | BlauColors.palette.grey2

let textButtonPrimaryInverse = BlauColors.palette.blauBlueSecondary | BlauColors.palette.grey2

let textButtonPrimaryInverseSelected = BlauColors.palette.blauBlueSecondary60 | BlauColors.palette.grey2
let textButtonPrimaryInversePressed = BlauColors.palette.blauBlueSecondary60 | BlauColors.palette.grey2

let textButtonSecondary = BlauColors.palette.blauBlueSecondary | BlauColors.palette.grey2

let textButtonSecondarySelected = BlauColors.palette.blauBlueSecondary60 | BlauColors.palette.grey2
let textButtonSecondaryPressed = BlauColors.palette.blauBlueSecondary60 | BlauColors.palette.grey2

let textButtonSecondaryInverse = BlauColors.palette.white | BlauColors.palette.grey2

let textButtonSecondaryInverseSelected = BlauColors.palette.white | BlauColors.palette.grey2
let textButtonSecondaryInversePressed = BlauColors.palette.white | BlauColors.palette.grey2

let textLink = BlauColors.palette.blauPurple | BlauColors.palette.blauPurple30

Expand Down Expand Up @@ -268,6 +268,17 @@ struct BlauColors: MisticaColors {
let tagBackgroundWarning = BlauColors.palette.blauYellow10 | BlauColors.palette.darkModeGrey6

let tagBackgroundError = BlauColors.palette.blauRed10 | BlauColors.palette.darkModeGrey6

let cardContentOverlay = MisticaColor.gradient(MisticaGradient(
colors:
[
BlauColors.palette.grey6.withAlphaComponent(0),
BlauColors.palette.grey6.withAlphaComponent(0.4),
BlauColors.palette.grey6.withAlphaComponent(0.7)
],
stops: [0, 0.3, 1],
angle: 180
))
}

public struct BlauColorPalette {
Expand Down
Loading

0 comments on commit d3df994

Please sign in to comment.