Skip to content

ALFMOB-269: Refactor Badge component to use design tokens #93

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

Open
khoinguyen-mindera wants to merge 4 commits into
base: main
Choose a base branch
from
Open

ALFMOB-269: Refactor Badge component to use design tokens #93

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
71aa320
ALFMOB-269: Source Badge styling from design tokens (semantic colors …
khoinguyen-mindera Jul 9, 2026
97d809a
ALFMOB-269: Add plan & decision log for Badge token refactor
khoinguyen-mindera Jul 9, 2026
681a226
chore: remove plan after PR (ALFMOB-269)
khoinguyen-mindera Jul 9, 2026
7dd6541
ALFMOB-269: Source badge border width from borderWeightDefault token
khoinguyen-mindera Jul 9, 2026
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
4 changes: 2 additions & 2 deletions Alfie/AlfieKit/Sources/SharedUI/Components/Indicators/BadgeTabViewModifier.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,12 @@ public struct BadgeTabViewModifier: ViewModifier {
}

private func setAppearance() {
UITabBarItem.appearance().badgeColor = Primitives.Colours.semanticError600.ui
UITabBarItem.appearance().badgeColor = Theme.surfaceBackgroundDestructive.ui

let font = theme.font.body.small.uiFont
let attributes: [NSAttributedString.Key: Any] = [
.font: font,
.foregroundColor: Primitives.Colours.neutrals0.ui,
.foregroundColor: Theme.contentContentInvertedPrimary.ui,
]
UITabBarItem.appearance().setBadgeTextAttributes(attributes, for: .normal)
UITabBarItem.appearance().setBadgeTextAttributes(attributes, for: .selected)
Expand Down
23 changes: 11 additions & 12 deletions Alfie/AlfieKit/Sources/SharedUI/Components/Indicators/BadgeViewModifier.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,12 @@ import SwiftUI
/// If the value is set to higher than `maxValue`, the badge will show `maxValue+`
public struct BadgeViewModifier: ViewModifier {
private enum Constants {
static let badgeHeight = 16.0
static let badgePadding = 4.0
static let textPadding = 4.0
static let indicatorHeight = 12.0
static let indicatorWidth = 12.0
static let capsuleOffsetXFactor = 3
static let borderLineWidth = 1.0
static let badgeHeight = Primitives.Spacing.spacing16
static let textPadding = Primitives.Spacing.spacing4
static let indicatorHeight = Primitives.Spacing.spacing12
static let indicatorWidth = Primitives.Spacing.spacing12
static let capsuleOffsetXFactor = 3 // layout multiplier, no design token
static let borderLineWidth = 1.0 // hairline, no design token (no spacing1)
Comment thread
khoinguyen-mindera marked this conversation as resolved.
Outdated
}

private var helper: BadgeHelper
Expand All @@ -34,13 +33,13 @@ public struct BadgeViewModifier: ViewModifier {
let badgeLabelsOffsetX = CGFloat(helper.badgeLabel.count * Constants.capsuleOffsetXFactor)
ZStack(alignment: .center) {
RoundedRectangle(cornerRadius: Sizing.radiusRounded)
.fill(Primitives.Colours.semanticError600)
.fill(Theme.surfaceBackgroundDestructive)
.frame(height: Constants.badgeHeight)
RoundedRectangle(cornerRadius: Sizing.radiusRounded)
.stroke(Primitives.Colours.neutrals0, lineWidth: Constants.borderLineWidth)
.stroke(Theme.surfaceBackgroundPrimary, lineWidth: Constants.borderLineWidth)
.frame(height: Constants.badgeHeight)
Text.build(theme.font.body.small(helper.badgeLabel))
.foregroundStyle(Primitives.Colours.neutrals0)
.foregroundStyle(Theme.contentContentInvertedPrimary)
.padding(.all, Constants.textPadding)
}
.frame(height: Constants.badgeHeight)
Expand All @@ -50,10 +49,10 @@ public struct BadgeViewModifier: ViewModifier {
} else {
ZStack(alignment: .center) {
Circle()
.fill(Primitives.Colours.semanticError600)
.fill(Theme.surfaceBackgroundDestructive)
.frame(width: Constants.indicatorWidth, height: Constants.indicatorHeight)
RoundedRectangle(cornerRadius: Sizing.radiusRounded)
.stroke(Primitives.Colours.neutrals0, lineWidth: Constants.borderLineWidth)
.stroke(Theme.surfaceBackgroundPrimary, lineWidth: Constants.borderLineWidth)
.frame(width: Constants.indicatorWidth, height: Constants.indicatorHeight)
}
.offset(x: (Constants.indicatorWidth / 2), y: -((Constants.indicatorHeight / 2)))
Expand Down