diff --git a/AGENTS.md b/AGENTS.md index 746fc8cca87..b01eb8a4dfd 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -172,13 +172,28 @@ OUDS framework provides SwiftUI view modifiers to apply typography on texts (usi For example, if a user wants to apply typography `theme.fonts.bodyDefaultMedium` he must not use the `font()` method from SwiftUI but instead the dedicated OUDS view modifier with the same name as the typography, i.e. `bodyDefaultMedium(theme)`. -#### Background and foreground color +#### Apply colors -OUDS framework provides a SwiftUI view modifier to apply foreground color (using a token). -For example if a user want to apply in foreground the color `theme.colors.contentDefault`, he must not use the `foregroundColor()` method from SwiftUI but instead -the dedicated OUDS view modifier `oudsForegroundColor(color)`. +OUDS framework provides SwiftUI view modifiers to apply colors (using tokens). +For example, given the token of color `theme.colors.contentDefault`= -The logic is the same for `backgroundColor` which must be replaced by `oudsBackground(color)`. +```swift +// Change foreground color +view.oudsForegroundColor(theme.colors.contentDefault) // DO +view.foregroundColor(theme.colors.contentDefault) // DON'T + +// Change tint color +view.oudsTintColor(theme.colors.contentDefault) // DO +view.tintColor(theme.colors.contentDefault) // DON'T + +// Change accent color +view.oudsAccentColor(theme.colors.contentDefault) // DO +view.accentColor(theme.colors.contentDefault) // DON'T + +// Change background color +view.oudsBackground(theme.colors.contentDefault) // DO +view.background(theme.colors.contentDefault) // DON'T +``` #### Add border diff --git a/CHANGELOG.md b/CHANGELOG.md index c034aee955a..a16d9dd2855 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added +- `oudsTintColor` view modifier helper to apply tint color from a `MultipleColorSemanticToken` (Orange-OpenSource/ouds-ios#1370) - `verbose` flag on `OUDSLogger` to suppress debug and log messages by default (Orange-OpenSource/ouds-ios#1365) ## [1.3.0](https://github.com/Orange-OpenSource/ouds-ios/compare/1.2.0...1.3.0) - 2026-03-26 diff --git a/OUDS/Core/Components/Sources/_/Extensions/View+Color.swift b/OUDS/Core/Components/Sources/_/Extensions/View+Color.swift index 486fdd40e1e..c60c9f641d5 100644 --- a/OUDS/Core/Components/Sources/_/Extensions/View+Color.swift +++ b/OUDS/Core/Components/Sources/_/Extensions/View+Color.swift @@ -49,6 +49,14 @@ extension View { public func oudsAccentColor(_ color: MultipleColorSemanticToken) -> some View { modifier(ColorSchemeBasedAccentColor(color: color)) } + + /// Applies a **tint color** on the current view by using the given tokens of colors. + /// Uses the current color scheme so as to load the suitable color to apply in the end + /// - Parameter color: The token from which the color to use must be extracted + /// - Returns: The modified `View` + public func oudsTintColor(_ color: MultipleColorSemanticToken) -> some View { + modifier(ColorSchemeBasedTintColor(color: color)) + } } // MARK: - Color Scheme Based Foreground Style @@ -110,3 +118,18 @@ private struct ColorSchemeBasedAccentColor: ViewModifier { content.accentColor(color.color(for: colorScheme)) } } + +// MARK: - Color Scheme Based Tint Color + +/// Depending to the current color scheme, will load the expected `ColorSemanticToken` from the given +/// `MultipleColorSemanticToken` object and applies it as **tint color** on the calling view. +private struct ColorSchemeBasedTintColor: ViewModifier { + + let color: MultipleColorSemanticToken + + @Environment(\.colorScheme) private var colorScheme + + func body(content: Content) -> some View { + content.tint(color.color(for: colorScheme)) + } +} diff --git a/OUDS/Core/Components/Sources/_OUDSComponents.docc/_OUDSComponents.md b/OUDS/Core/Components/Sources/_OUDSComponents.docc/_OUDSComponents.md index cc925653732..e45ddc7f37f 100644 --- a/OUDS/Core/Components/Sources/_OUDSComponents.docc/_OUDSComponents.md +++ b/OUDS/Core/Components/Sources/_OUDSComponents.docc/_OUDSComponents.md @@ -105,7 +105,7 @@ var body: some View { ### Apply specific colors -Colors can be applied on view for background and foreground colors, foreground style or also accent color. +Colors can be applied on view for background and foreground colors, foreground style, accent color or tint color. Some helpers are available in the OUDS API to avoid to use the `color(for:)` method. ```swift @@ -125,6 +125,9 @@ someView.oudsBackground(theme.colors.bgPrimary) // Apply an accent color someView.oudsAccentColor(theme.colors.bgPrimary) + +// Apply a tint color +someView.oudsTintColor(theme.colors.bgPrimary) ``` ## Flip images according to layouts