Merge pull request #287799 from garchiro7/uilibrary-font-color

Add first version of font color in the UI Library

Author: v-dirichards

articles/communication-services/concepts/ui-library/includes/mobile-ui-use-cases.md

@@ -190,9 +190,9 @@ For more information, see [How to customize the button bar](../../../how-tos/ui-
 
 UI Library provides the capability to join a call skipping the setup screen of the call join experience. By default, user goes through a setup screen to join a call. Here, user sets the call configuration such as camera turn on or off, microphone turn on or off and audio device selection before joining a call. This screen requires user interaction to join a call, which might be unnecessary for some users. So we provide the capability to join a call by skipping the setup screen and providing the call configuration APIs. For more information, see [How to use Skip Setup Screen Feature.](../../../how-tos/ui-library-sdk/skip-setup-screen.md)
 
-### Theming
+### Theming & colors
 
-You can use the UI Library call composite for iOS and Android to create a custom theme of a caller's experience. To create the platform experience, pass a set of theming colors as shown in the following table. For more information, see [How to create your theme](../../../how-tos/ui-library-sdk/theming.md).
+You can use the UI Library call composite for iOS and Android to create a custom theme of a caller's experience. You have the flexibility to customize the primary colors. This feature allows you to tailor the color scheme to match your specific branding needs. By adjusting primary colors, you can ensure the interface seamlessly integrates with your brand’s visual identity, enhancing user experience while maintaining consistency across your applications. For more information, see [How to create your theme](../../../how-tos/ui-library-sdk/theming.md).
 
 | Android                            | iOS                                     |
 | -------------------------------------------------------- | --------------------------------------------------------------- |

articles/communication-services/how-tos/ui-library-sdk/includes/button-injection/android.md

@@ -12,6 +12,8 @@ ms.service: azure-communication-services
 
 `CallCompositeCallScreenControlBarOptions`, allow the flexibility to customize the button bar by removing specific buttons such as camera, microphone, and audio controls. This API allows you to tailor the user interface according to their specific application requirements and user experience design. Just set the `visible` or `enabled` to `false` for the `CallCompositeButtonViewData` to hide or disable button.
 
+:::image type="content" source="../../media/remove-button-experience.png" alt-text="Screenshot that shows the experience removing buttons in the UI Library.":::
+
 #### [Kotlin](#tab/kotlin)
 ```kotlin
 val controlBarOptions = CallCompositeCallScreenControlBarOptions()
@@ -72,6 +74,8 @@ cameraButton.setVisible(true);
 
 `Call composite` is using Fluent UI icons. You can download the icons directly from [the Fluent UI GitHub repository](https://github.com/microsoft/fluentui-system-icons/) and incorporate them into your project as needed. This approach guarantees visual consistency across all user interface elements, enhancing the overall user experience.
 
+:::image type="content" source="../../media/add-button-experience.png" alt-text="Screenshot that shows the experienc when you add a new button the UI Library.":::
+
 #### [Kotlin](#tab/kotlin)
 ```kotlin
 val controlBarOptions = CallCompositeCallScreenControlBarOptions()

articles/communication-services/how-tos/ui-library-sdk/includes/button-injection/ios.md

@@ -13,6 +13,8 @@ ms.service: azure-communication-services
 
 `CallScreenControlBarOptions`, allow the flexibility to customize the button bar by removing specific buttons such as camera, microphone, and audio controls. This API allows you to tailor the user interface according to their specific application requirements and user experience design. Just set the `visible` or `enabled` to `false` for the `ButtonViewData` to hide or disable button.
 
+:::image type="content" source="../../media/remove-button-experience.png" alt-text="Screenshot that shows the experience removing buttons in the UI Library.":::
+
 ```swift
 let cameraButton = ButtonViewData(visible: false)
 
@@ -33,11 +35,12 @@ Button can be updated after launching call composite.
 cameraButton.visible = true
 ```
 
-
 ## Add custom actions
 
 `Call composite` is using Fluent UI icons. You can download the icons directly from [the Fluent UI GitHub repository](https://github.com/microsoft/fluentui-system-icons/) and incorporate them into your project as needed. This approach guarantees visual consistency across all user interface elements, enhancing the overall user experience.
 
+:::image type="content" source="../../media/add-button-experience.png" alt-text="Screenshot that shows the experienc when you add a new button the UI Library.":::
+
 ```swift
 let customButton = CustomButtonOptions(image: UIImage(named: "...")!,
                                        title: "My button") {_ in

articles/communication-services/how-tos/ui-library-sdk/includes/theming/android.md

@@ -8,6 +8,8 @@ ms.topic: include
 ms.service: azure-communication-services
 ---
 
+[!INCLUDE [Public Preview Notice](../../../../includes/public-preview-include.md)]
+
 For more information, see the [open-source Android UI Library](https://github.com/Azure/communication-ui-library-android) and the [sample application code](https://github.com/Azure-Samples/communication-services-android-quickstarts/tree/main/ui-calling).
 
 ### Defining a theme
@@ -21,6 +23,7 @@ Theming on Android is handled via XML resource files. We expose the following re
     <public name="azure_communication_ui_calling_primary_color_tint10" type="attr" />
     <public name="azure_communication_ui_calling_primary_color_tint20" type="attr" />
     <public name="azure_communication_ui_calling_primary_color_tint30" type="attr" />
+    <public name="azure_communication_ui_calling_foreground_on_primary_color" type="attr" />
 </resources>
 ```
 
@@ -32,6 +35,7 @@ You can implement a theme like the following one in your apps to supply the prim
     <item name="azure_communication_ui_calling_primary_color_tint10">#882BD8</item>
     <item name="azure_communication_ui_calling_primary_color_tint20">#E0C7F4</item>
     <item name="azure_communication_ui_calling_primary_color_tint30">#ECDEF9</item>
+    <item name="azure_communication_ui_calling_foreground_on_primary_color">#00FF00</item>
 </style>
 ```
 
@@ -79,3 +83,7 @@ The Android resource system handles the night theme. Night mode on Android is a
 To enable night mode programmatically, Android provides the following function. However, this configuration applies globally to the application. There's no reliable way to set night mode for a single activity. To enforce a dark theme, use the following setting in your applications:
 
 `AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)`
+
+### Font color
+
+The `azure_communication_ui_calling_foreground_on_primary_color` allows you to configure the font color that appears on elements using the primary color. You can use this setting when you want to match a specific theme or brand guidelines. By changing `azure_communication_ui_calling_foreground_on_primary_color`, you should ensure that the text remains legible and visually appealing by selecting an appropriate contrasting font color for the primary-colored components.

articles/communication-services/how-tos/ui-library-sdk/includes/theming/ios.md

@@ -8,6 +8,8 @@ ms.topic: include
 ms.service: azure-communication-services
 ---
 
+[!INCLUDE [Public Preview Notice](../../../../includes/public-preview-include.md)]
+
 For more information, see the [open-source iOS UI Library](https://github.com/Azure/communication-ui-library-ios) and the [sample application code](https://github.com/Azure-Samples/communication-services-ios-quickstarts/tree/main/ui-calling).
 
 ### Defining a theme
@@ -58,6 +60,49 @@ class CustomThemeOptions: ThemeOptions {
 let callCompositeOptions = CallCompositeOptions(theme: CustomThemeOptions())
 ```
 
+### Font color
+
+The `foregroundOnPrimaryColor` allows you to programmatically update the font color that appears on elements using the primary color. You can use this method when you want to match a specific theme or brand guidelines. By invoking `foregroundOnPrimaryColor`, you should ensure that the text remains legible and visually appealing by selecting an appropriate contrasting font color for the primary-colored components.
+
+```swift
+struct CustomColorTheming: ThemeOptions {    
+
+    private var envConfigSubject: EnvConfigSubject  
+
+    init(envConfigSubject: EnvConfigSubject) {        
+        self.envConfigSubject = envConfigSubject    
+    }    
+
+    var primaryColor: UIColor {        
+        return UIColor(envConfigSubject.primaryColor)    
+    }    
+    
+    var primaryColorTint10: UIColor {        
+        return UIColor(envConfigSubject.tint10)    
+    }    
+    
+    var primaryColorTint20: UIColor {        
+        return UIColor(envConfigSubject.tint20)    
+    }    
+    
+    var primaryColorTint30: UIColor {        
+        return UIColor(envConfigSubject.tint30)    
+    }    
+    
+    var foregroundOnPrimaryColor: UIColor {        
+        return UIColor(envConfigSubject.foregroundOnPrimaryColor)    
+    }    
+
+    var colorSchemeOverride: UIUserInterfaceStyle {        
+        return envConfigSubject.colorSchemeOverride    
+    }
+}
+
+
+let callCompositeOptions = CallCompositeOptions(theme: CustomColorTheming())
+
+```
+
 ### Defining color assets
 
 Define each color in the assets, with a shade for the light and dark modes. The following reference image shows how to configure the assets on an Xcode project.

articles/communication-services/how-tos/ui-library-sdk/media/add-button-experience.png

@@ -21,6 +21,8 @@ Developers now have the capability to customize the title and subtitle of a call
 
 For instance, in a customer support scenario, the title could display the issue being addressed, while the subtitle could show the customer's name or ticket number.
 
+:::image type="content" source="./media/title-subtitle.png" alt-text="Screenshot that shows the experience of title and subtitle in the UI Library.":::
+
 Additionally, if tracking time spent in various segments of the call is crucial, the subtitle could dynamically update to display the elapsed call duration, helping to manage the meeting or session effectively.
 
 ## Prerequisites