refactor: colors of texts and bullets for alert message component (#1342) (#1348)

Change colors for label, description and bullet list (items and bullets) for alert message component

Closes #1342

Tested-by: Anton Astafev <anton.astafev@orange.com>
Reviewed-by: Copilot <198982749+Copilot@users.noreply.github.com>
Reviewed-by: Ludovic Pinel <ludovic.pinel@orange.com>
Signed-off-by: Pierre-Yves Lapersonne <pierreyves.lapersonne@orange.com>

Author: pylapp

CHANGELOG.md

@@ -17,6 +17,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- `alert message` component with new label colors (Orange-OpenSource/ouds-ios#1342)
 - Rename in `bullet list` component API "unordered icon" to "unordered asset" (Orange-OpenSource/ouds-ios#1326)
 - AGENTS.md file to focus only on users (Orange-OpenSource/ouds-ios#1341)
 - Signatures of control-item-based components (Orange-OpenSource/ouds-ios#1314)

OUDS/Core/Components/Sources/Dialogs/Alert/Internal/AlertMessage/AlertMessageBulletList.swift

@@ -19,6 +19,7 @@ struct AlertMessageBulletListItem: View {
     // MARK: - Properties
 
     let text: String
+    let status: OUDSAlertStatus
 
     @Environment(\.theme) private var theme
     @Environment(\.horizontalSizeClass) private var horizontalSizeClass
@@ -30,19 +31,21 @@ struct AlertMessageBulletListItem: View {
     var body: some View {
         HStack(alignment: .top, spacing: theme.bulletList.spaceColumnGapBodyMedium) {
             HStack(alignment: .center) {
-                OUDSIcon(assetName: "ic_bullet_list_level0", color: theme.colors.contentMuted)
+                OUDSIcon(assetName: "ic_bullet_list_level0", color: foregroundColor)
                     .frame(width: iconSize, height: iconSize)
             }
             .frame(width: width, alignment: .trailing)
             .frame(maxHeight: maxHeight, alignment: .center)
 
             Text(text)
                 .labelDefaultMedium(theme)
-                .oudsForegroundColor(theme.colors.contentMuted)
+                .oudsForegroundColor(foregroundColor)
                 .frame(maxWidth: theme.sizes.maxWidthTypeLabelMedium.dimension(for: horizontalSizeClass ?? .regular), alignment: .leading)
         }
     }
 
+    // MARK: - Helpers
+
     private var iconSize: CGFloat {
         let rawSize = theme.sizes.iconWithLabelMediumSizeSmall
         return rawSize * dynamicTypeSize.percentageRate / 100
@@ -57,4 +60,21 @@ struct AlertMessageBulletListItem: View {
         let rawSize = theme.fonts.lineHeightBodyMedium.lineHeight(for: verticalSizeClass ?? .regular)
         return rawSize * dynamicTypeSize.percentageRate / 100
     }
+
+    private var foregroundColor: MultipleColorSemanticToken {
+        switch status {
+        case .neutral:
+            theme.colors.contentDefault
+        case .accent:
+            theme.colors.contentOnStatusAccentMuted
+        case .positive:
+            theme.colors.contentOnStatusPositiveMuted
+        case .negative:
+            theme.colors.contentOnStatusNegativeMuted
+        case .warning:
+            theme.colors.contentOnStatusWarningMuted
+        case .info:
+            theme.colors.contentOnStatusInfoMuted
+        }
+    }
 }

OUDS/Core/Components/Sources/Dialogs/Alert/Internal/AlertMessage/AlertMessageContent.swift

@@ -19,6 +19,7 @@ struct AlertMessageContent: View {
     // MARK: - Properties
 
     let text: String
+    let status: OUDSAlertStatus
     let description: String?
     let bulletList: [String]
     let link: OUDSAlertMessage.Link?
@@ -32,20 +33,20 @@ struct AlertMessageContent: View {
             VStack(alignment: .leading, spacing: theme.alert.spaceRowGap) {
                 Text(text)
                     .labelModerateLarge(theme)
-                    .oudsForegroundColor(theme.colors.contentDefault)
+                    .oudsForegroundColor(foregroundColor)
                     .frame(maxWidth: .infinity, alignment: .leading)
 
                 if let description, !description.isEmpty {
                     Text(description)
                         .labelDefaultMedium(theme)
-                        .oudsForegroundColor(theme.colors.contentMuted)
+                        .oudsForegroundColor(foregroundColor)
                         .frame(maxWidth: .infinity, alignment: .leading)
                 }
 
                 if !bulletList.isEmpty {
                     VStack(alignment: .leading, spacing: theme.alert.spaceRowGapBullet) {
                         ForEach(Array(bulletList.enumerated()), id: \.offset) { _, text in
-                            AlertMessageBulletListItem(text: text)
+                            AlertMessageBulletListItem(text: text, status: status)
                         }
                     }
                 }
@@ -59,4 +60,23 @@ struct AlertMessageContent: View {
         .padding(.vertical, theme.alert.spacePaddingBlock)
         .fixedSize(horizontal: false, vertical: true)
     }
+
+    // MARK: - Helpers
+
+    private var foregroundColor: MultipleColorSemanticToken {
+        switch status {
+        case .neutral:
+            theme.colors.contentDefault
+        case .accent:
+            theme.colors.contentOnStatusAccentMuted
+        case .positive:
+            theme.colors.contentOnStatusPositiveMuted
+        case .negative:
+            theme.colors.contentOnStatusNegativeMuted
+        case .warning:
+            theme.colors.contentOnStatusWarningMuted
+        case .info:
+            theme.colors.contentOnStatusInfoMuted
+        }
+    }
 }

OUDS/Core/Components/Sources/Dialogs/Alert/OUDSAlertMessage.swift

@@ -65,7 +65,7 @@ import SwiftUI
 ///
 /// ![An alert message component in light and dark modes with Wireframe theme](component_alertMessage_Wireframe)
 ///
-/// - Version: 1.0.0 (Figma component design version)
+/// - Version: 1.1.0 (Figma component design version)
 /// - Since: 1.3.0
 @available(iOS 15, macOS 13, visionOS 1, tvOS 16, *)
 public struct OUDSAlertMessage: View {
@@ -162,7 +162,7 @@ public struct OUDSAlertMessage: View {
         HStack(alignment: .top, spacing: theme.alert.spaceColumnGap) {
             AlertLeadingIcon(status: status)
                 .padding(.top, theme.alert.spacePaddingBlock)
-            AlertMessageContent(text: text, description: description, bulletList: bulletList, link: link)
+            AlertMessageContent(text: text, status: status, description: description, bulletList: bulletList, link: link)
             AlertMessageAction(link: link, onClose: onClose)
         }
         .padding(.leading, theme.alert.spacePaddingInline)

OUDS/Core/Components/Sources/_/Extensions/View+Grids.swift

@@ -11,7 +11,6 @@
 // Software description: A SwiftUI components library with code examples for Orange Unified Design System
 //
 
-import OUDSThemesContract
 import SwiftUI
 
 extension View {

OUDS/Core/ThemesContract/Sources/TokenatorConstants.swift

@@ -76,8 +76,8 @@ public enum OUDSVersions {
 
     // MARK: - Components versions - Dialog
 
-    /// Version of the Figma specifications for the component alert (alert message)  (1.0.0)
-    public static let componentAlertMessageVersion = "1.0.0"
+    /// Version of the Figma specifications for the component alert (alert message)  (1.1.0)
+    public static let componentAlertMessageVersion = "1.1.0" // WARNING: Manually updated as tokenator not updated yet
     /// Version of the Figma specifications for the component alert (inline alert) (1.0.0)
     public static let componentInlineAlertVersion = "1.0.0"