From 3505d6b609ef602623140b92919a8c6a5c15a4b0 Mon Sep 17 00:00:00 2001
From: Pauline Auvray <pauline.auvray@orange.com>
Date: Mon, 18 Nov 2024 17:53:58 +0100
Subject: [PATCH 1/4] Add M3 components screen

---
 .idea/inspectionProfiles/Project_Default.xml  |  27 +
 .../app/ui/about/AboutM3ComponentsScreen.kt   | 918 ++++++++++++++++++
 .../ouds/app/ui/about/AboutNavigation.kt      |   7 +-
 .../orange/ouds/app/ui/about/AboutScreen.kt   |  25 +-
 .../ouds/app/ui/navigation/AppNavGraph.kt     |  12 +-
 app/src/main/res/values/strings.xml           |   1 +
 6 files changed, 978 insertions(+), 12 deletions(-)
 create mode 100644 app/src/main/java/com/orange/ouds/app/ui/about/AboutM3ComponentsScreen.kt

diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
index 44ca2d9b..6195b36e 100644
--- a/.idea/inspectionProfiles/Project_Default.xml
+++ b/.idea/inspectionProfiles/Project_Default.xml
@@ -1,6 +1,30 @@
 <component name="InspectionProjectProfileManager">
   <profile version="1.0">
     <option name="myName" value="Project Default" />
+    <inspection_tool class="ComposePreviewDimensionRespectsLimit" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="ComposePreviewMustBeTopLevelFunction" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="ComposePreviewNeedsComposableAnnotation" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="ComposePreviewNotSupportedInUnitTestFiles" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="GlancePreviewDimensionRespectsLimit" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="GlancePreviewMustBeTopLevelFunction" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="GlancePreviewNeedsComposableAnnotation" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="GlancePreviewNotSupportedInUnitTestFiles" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+    </inspection_tool>
     <inspection_tool class="PreviewAnnotationInFunctionWithParameters" enabled="true" level="ERROR" enabled_by_default="true">
       <option name="composableFile" value="true" />
       <option name="previewFile" value="true" />
@@ -9,6 +33,9 @@
       <option name="composableFile" value="true" />
       <option name="previewFile" value="true" />
     </inspection_tool>
+    <inspection_tool class="PreviewDeviceShouldUseNewSpec" enabled="true" level="WEAK WARNING" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+    </inspection_tool>
     <inspection_tool class="PreviewDimensionRespectsLimit" enabled="true" level="WARNING" enabled_by_default="true">
       <option name="composableFile" value="true" />
       <option name="previewFile" value="true" />
diff --git a/app/src/main/java/com/orange/ouds/app/ui/about/AboutM3ComponentsScreen.kt b/app/src/main/java/com/orange/ouds/app/ui/about/AboutM3ComponentsScreen.kt
new file mode 100644
index 00000000..b904600f
--- /dev/null
+++ b/app/src/main/java/com/orange/ouds/app/ui/about/AboutM3ComponentsScreen.kt
@@ -0,0 +1,918 @@
+/*
+ * Software Name: OUDS Android
+ * SPDX-FileCopyrightText: Copyright (c) Orange SA
+ * SPDX-License-Identifier: MIT
+ *
+ * This software is distributed under the MIT license,
+ * the text of which is available at https://opensource.org/license/MIT/
+ * or see the "LICENSE" file for more details.
+ *
+ * Software description: Android library of reusable graphical components
+ */
+
+package com.orange.ouds.app.ui.about
+
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ColumnScope
+import androidx.compose.foundation.layout.ExperimentalLayoutApi
+import androidx.compose.foundation.layout.FlowRow
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.wrapContentSize
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.selection.selectableGroup
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.automirrored.filled.ArrowBack
+import androidx.compose.material.icons.filled.AccountCircle
+import androidx.compose.material.icons.filled.Add
+import androidx.compose.material.icons.filled.Build
+import androidx.compose.material.icons.filled.Call
+import androidx.compose.material.icons.filled.Check
+import androidx.compose.material.icons.filled.CheckCircle
+import androidx.compose.material.icons.filled.Done
+import androidx.compose.material.icons.filled.Edit
+import androidx.compose.material.icons.filled.Email
+import androidx.compose.material.icons.filled.Favorite
+import androidx.compose.material.icons.filled.Home
+import androidx.compose.material.icons.filled.Info
+import androidx.compose.material.icons.filled.Menu
+import androidx.compose.material.icons.filled.MoreVert
+import androidx.compose.material.icons.filled.Person
+import androidx.compose.material.icons.filled.Place
+import androidx.compose.material.icons.filled.Settings
+import androidx.compose.material.icons.filled.ShoppingCart
+import androidx.compose.material.icons.filled.Star
+import androidx.compose.material.icons.filled.ThumbUp
+import androidx.compose.material.icons.outlined.Edit
+import androidx.compose.material.icons.outlined.Email
+import androidx.compose.material.icons.outlined.FavoriteBorder
+import androidx.compose.material.icons.outlined.Home
+import androidx.compose.material.icons.outlined.Settings
+import androidx.compose.material.icons.outlined.Star
+import androidx.compose.material3.AlertDialog
+import androidx.compose.material3.AssistChip
+import androidx.compose.material3.AssistChipDefaults
+import androidx.compose.material3.Badge
+import androidx.compose.material3.BadgedBox
+import androidx.compose.material3.BottomAppBar
+import androidx.compose.material3.BottomAppBarDefaults
+import androidx.compose.material3.BottomSheetScaffold
+import androidx.compose.material3.BottomSheetScaffoldState
+import androidx.compose.material3.Button
+import androidx.compose.material3.Card
+import androidx.compose.material3.Checkbox
+import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.DatePicker
+import androidx.compose.material3.DrawerState
+import androidx.compose.material3.DrawerValue
+import androidx.compose.material3.DropdownMenu
+import androidx.compose.material3.DropdownMenuItem
+import androidx.compose.material3.ElevatedAssistChip
+import androidx.compose.material3.ElevatedButton
+import androidx.compose.material3.ElevatedCard
+import androidx.compose.material3.ElevatedFilterChip
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.ExtendedFloatingActionButton
+import androidx.compose.material3.FilledTonalButton
+import androidx.compose.material3.FilterChip
+import androidx.compose.material3.FilterChipDefaults
+import androidx.compose.material3.FloatingActionButton
+import androidx.compose.material3.FloatingActionButtonDefaults
+import androidx.compose.material3.HorizontalDivider
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.InputChip
+import androidx.compose.material3.InputChipDefaults
+import androidx.compose.material3.LargeFloatingActionButton
+import androidx.compose.material3.LinearProgressIndicator
+import androidx.compose.material3.ListItem
+import androidx.compose.material3.ModalDrawerSheet
+import androidx.compose.material3.ModalNavigationDrawer
+import androidx.compose.material3.MultiChoiceSegmentedButtonRow
+import androidx.compose.material3.NavigationBar
+import androidx.compose.material3.NavigationBarItem
+import androidx.compose.material3.NavigationDrawerItem
+import androidx.compose.material3.NavigationDrawerItemDefaults
+import androidx.compose.material3.NavigationRail
+import androidx.compose.material3.NavigationRailItem
+import androidx.compose.material3.OutlinedButton
+import androidx.compose.material3.OutlinedCard
+import androidx.compose.material3.OutlinedTextField
+import androidx.compose.material3.RadioButton
+import androidx.compose.material3.SecondaryTabRow
+import androidx.compose.material3.SegmentedButton
+import androidx.compose.material3.SegmentedButtonDefaults
+import androidx.compose.material3.Slider
+import androidx.compose.material3.SmallFloatingActionButton
+import androidx.compose.material3.SnackbarHost
+import androidx.compose.material3.SnackbarHostState
+import androidx.compose.material3.SuggestionChip
+import androidx.compose.material3.Switch
+import androidx.compose.material3.SwitchDefaults
+import androidx.compose.material3.Tab
+import androidx.compose.material3.TabRow
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextButton
+import androidx.compose.material3.TextField
+import androidx.compose.material3.TopAppBar
+import androidx.compose.material3.rememberBottomSheetScaffoldState
+import androidx.compose.material3.rememberDatePickerState
+import androidx.compose.material3.rememberDrawerState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.MutableState
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableFloatStateOf
+import androidx.compose.runtime.mutableIntStateOf
+import androidx.compose.runtime.mutableStateListOf
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.semantics.contentDescription
+import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.dp
+import com.orange.ouds.app.ui.utilities.composable.Screen
+import com.orange.ouds.core.theme.value
+import com.orange.ouds.core.utilities.OudsPreview
+import com.orange.ouds.foundation.utilities.UiModePreviews
+import com.orange.ouds.theme.tokens.OudsSpaceKeyToken
+import com.orange.ouds.theme.tokens.OudsTypographyKeyToken
+import kotlinx.coroutines.CoroutineScope
+import kotlinx.coroutines.launch
+import kotlin.math.roundToInt
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun AboutM3ComponentsScreen() {
+    val drawerState = rememberDrawerState(DrawerValue.Closed)
+    val scaffoldState = rememberBottomSheetScaffoldState()
+    val snackbarHostState = remember { SnackbarHostState() }
+    val scope = rememberCoroutineScope()
+
+    Screen {
+        BottomSheetScaffoldSample(scope = scope, snackbarHostState = snackbarHostState, scaffoldState = scaffoldState) {
+            NavigationDrawerSample(drawerState = drawerState, scope = scope) {
+                Column(
+                    modifier = Modifier
+                        .fillMaxSize()
+                        .padding(bottom = OudsSpaceKeyToken.Fixed.Medium.value)
+                        .verticalScroll(rememberScrollState())
+                ) {
+
+                    // APP BARS
+                    SectionColumn(title = "App bars") {
+                        AppBarsSample()
+                    }
+
+                    // BUTTONS
+                    SectionColumn(title = "Buttons") {
+                        Column(verticalArrangement = Arrangement.spacedBy(OudsSpaceKeyToken.Fixed.Short.value)) {
+                            CommonButtonsSample()
+                            CommonButtonsSample(enabled = false)
+                            FloatingActionButtonsSample()
+                            SegmentedButtonsSample()
+                        }
+                    }
+
+                    // CARDS
+                    SectionColumn(title = "Cards") {
+                        CardsSample()
+                    }
+
+                    // CHECKBOXES
+                    SectionColumn(title = "Checkboxes") {
+                        CheckboxesSample()
+                        CheckboxesSample(enabled = false)
+                    }
+
+                    // CHIPS
+                    SectionColumn(title = "Chips") {
+                        ChipsSample()
+                        ChipsSample(enabled = false)
+                    }
+
+                    // DATE PICKER
+                    SectionColumn(title = "Date picker") {
+                        val datePickerState = rememberDatePickerState(initialSelectedDateMillis = 1578096000000)
+                        DatePicker(state = datePickerState)
+                    }
+
+                    // DIALOG
+                    SectionColumn(title = "Dialog") {
+                        DialogSample()
+                    }
+
+                    // LIST ITEM
+                    SectionColumn(title = "List items", hasContentHorizontalPadding = false) {
+                        ListItemsSample()
+                    }
+
+                    // MENUS
+                    SectionColumn(title = "Menus") {
+                        MenusSample()
+                    }
+
+                    // NAVIGATION
+                    SectionColumn(title = "Navigation") {
+                        Column(verticalArrangement = Arrangement.spacedBy(OudsSpaceKeyToken.Fixed.Short.value)) {
+                            NavigationBarSample()
+                            FilledTonalButton(onClick = { scope.launch { drawerState.open() } }) { Text("Open Navigation Drawer") }
+                            NavigationRailSample()
+                        }
+                    }
+
+                    // PROGRESS INDICATORS
+                    SectionColumn(title = "Progress indicators") {
+                        LinearProgressIndicator()
+                        CircularProgressIndicator(modifier = Modifier.padding(top = OudsSpaceKeyToken.Fixed.Short.value))
+                    }
+
+                    // RADIO BUTTONS
+                    SectionColumn(title = "Radio buttons") {
+                        RadioButtonsSample()
+                        RadioButtonsSample(enabled = false)
+                    }
+
+                    // SHEETS
+                    SectionColumn(title = "Sheets") {
+                        FilledTonalButton(
+                            onClick = { scope.launch { scaffoldState.bottomSheetState.expand() } }
+                        ) { Text("Open sheet") }
+                    }
+
+                    // SLIDERS
+                    SectionColumn(title = "Sliders") {
+                        SlidersSample()
+                        SlidersSample(enabled = false)
+                    }
+
+                    // SNACKBAR
+                    SectionColumn(title = "Snackbar") {
+                        FilledTonalButton(
+                            onClick = { scope.launch { snackbarHostState.showSnackbar(message = "Snackbar message", actionLabel = "Action") } }
+                        ) { Text("Show snackbar") }
+                    }
+
+                    // SWITCHES
+                    SectionColumn(title = "Switches") {
+                        SwitchesSample()
+                        SwitchesSample(enabled = false)
+                    }
+
+                    // TABS
+                    SectionColumn("Tabs") {
+                        TabsSample()
+                    }
+
+                    // TEXT FIELDS
+                    SectionColumn("Text fields") {
+                        Column(verticalArrangement = Arrangement.spacedBy(OudsSpaceKeyToken.Fixed.Short.value)) {
+                            TextFieldsSample()
+                            TextFieldsSample(isError = true)
+                            TextFieldsSample(enabled = false)
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+private fun AppBarsSample() {
+    TopAppBar(
+        title = {
+            Text("Top App Bar")
+        },
+        navigationIcon = {
+            IconButton(onClick = { /* do something */ }) {
+                Icon(
+                    imageVector = Icons.AutoMirrored.Filled.ArrowBack,
+                    contentDescription = null
+                )
+            }
+        },
+        actions = {
+            IconButton(onClick = { /* do something */ }) {
+                Icon(
+                    imageVector = Icons.Filled.Menu,
+                    contentDescription = null
+                )
+            }
+        },
+    )
+
+    val imageVectors = listOf(Icons.Filled.Check, Icons.Filled.Edit, Icons.Filled.AccountCircle, Icons.Filled.Build)
+    BottomAppBar(
+        actions = {
+            imageVectors.forEach { icon ->
+                IconButton(onClick = { /* do something */ }) {
+                    Icon(icon, contentDescription = null)
+                }
+            }
+        },
+        floatingActionButton = {
+            FloatingActionButton(
+                onClick = { /* do something */ },
+                containerColor = BottomAppBarDefaults.bottomAppBarFabColor,
+                elevation = FloatingActionButtonDefaults.bottomAppBarFabElevation()
+            ) {
+                Icon(Icons.Filled.Add, null)
+            }
+        }
+    )
+}
+
+@OptIn(ExperimentalLayoutApi::class)
+@Composable
+private fun CommonButtonsSample(enabled: Boolean = true) {
+    FlowRow(
+        horizontalArrangement = Arrangement.spacedBy(OudsSpaceKeyToken.Fixed.Short.value),
+        verticalArrangement = Arrangement.spacedBy(OudsSpaceKeyToken.Fixed.Shortest.value)
+    ) {
+        Button(onClick = { /* do something */ }, enabled = enabled) { Text("Filled") }
+        FilledTonalButton(onClick = { /* do something */ }, enabled = enabled) { Text("Tonal") }
+        OutlinedButton(onClick = { /* do something */ }, enabled = enabled) { Text("Outlined") }
+        ElevatedButton(onClick = { /* do something */ }, enabled = enabled) { Text("Elevated") }
+        TextButton(onClick = { /* do something */ }, enabled = enabled) { Text("Text Button") }
+    }
+}
+
+@OptIn(ExperimentalLayoutApi::class)
+@Composable
+private fun FloatingActionButtonsSample() {
+    FlowRow(
+        horizontalArrangement = Arrangement.spacedBy(OudsSpaceKeyToken.Fixed.Short.value),
+        verticalArrangement = Arrangement.spacedBy(OudsSpaceKeyToken.Fixed.Short.value)
+    ) {
+        FloatingActionButton(onClick = { /* do something */ }) { Icon(Icons.Filled.Add, "Floating action button.") }
+        SmallFloatingActionButton(onClick = { /* do something */ }) { Icon(Icons.Filled.Add, "Floating action button.") }
+        LargeFloatingActionButton(onClick = { /* do something */ }) { Icon(Icons.Filled.Add, "Large floating action button") }
+        ExtendedFloatingActionButton(
+            onClick = { /* do something */ },
+            icon = { Icon(Icons.Filled.Edit, "Extended floating action button.") },
+            text = { Text(text = "Extended FAB") },
+        )
+    }
+}
+
+@Composable
+private fun SegmentedButtonsSample() {
+    val checkedList = remember { mutableStateListOf<Int>() }
+    val options = listOf("Favorites", "Trending", "Saved")
+    val icons = listOf(
+        Icons.Filled.Star,
+        Icons.Filled.ShoppingCart,
+        Icons.Filled.ThumbUp
+    )
+
+    MultiChoiceSegmentedButtonRow {
+        options.forEachIndexed { index, label ->
+            SegmentedButton(
+                shape = SegmentedButtonDefaults.itemShape(index = index, count = options.size),
+                icon = {
+                    SegmentedButtonDefaults.Icon(active = index in checkedList) {
+                        Icon(
+                            imageVector = icons[index],
+                            contentDescription = null,
+                            modifier = Modifier.size(SegmentedButtonDefaults.IconSize)
+                        )
+                    }
+                },
+                onCheckedChange = {
+                    if (index in checkedList) {
+                        checkedList.remove(index)
+                    } else {
+                        checkedList.add(index)
+                    }
+                },
+                checked = index in checkedList,
+                enabled = index != 2
+            ) {
+                Text(label)
+            }
+        }
+    }
+}
+
+@Composable
+private fun CardsSample() {
+    val cardHeight = 60.dp
+    Column(verticalArrangement = Arrangement.spacedBy(OudsSpaceKeyToken.Fixed.Shorter.value)) {
+        Card(modifier = Modifier.fillMaxWidth().height(cardHeight)) {
+            Box(modifier = Modifier.fillMaxSize()) { Text(text = "Filled card", modifier = Modifier.align(Alignment.Center)) }
+        }
+
+        OutlinedCard(modifier = Modifier.fillMaxWidth().height(cardHeight)) {
+            Box(modifier = Modifier.fillMaxSize()) { Text(text = "Outlined card", modifier = Modifier.align(Alignment.Center)) }
+        }
+
+        ElevatedCard(modifier = Modifier.fillMaxWidth().height(cardHeight)) {
+            Box(modifier = Modifier.fillMaxSize()) { Text(text = "Outlined card", modifier = Modifier.align(Alignment.Center)) }
+        }
+    }
+}
+
+@Composable
+private fun CheckboxesSample(enabled: Boolean = true) {
+    val checkedState = remember { mutableStateOf(true) }
+    Row(horizontalArrangement = Arrangement.spacedBy(OudsSpaceKeyToken.Fixed.Short.value)) {
+        Checkbox(checked = checkedState.value, enabled = enabled, onCheckedChange = { checkedState.value = it })
+        Checkbox(checked = !checkedState.value, enabled = enabled, onCheckedChange = { checkedState.value = !it })
+    }
+}
+
+@Composable
+private fun ChipsSample(enabled: Boolean = true) {
+    val settingsIcon: @Composable () -> Unit = {
+        Icon(
+            Icons.Filled.Settings,
+            contentDescription = "Localized description",
+            Modifier.size(AssistChipDefaults.IconSize)
+        )
+    }
+
+    Row(
+        horizontalArrangement = Arrangement.spacedBy(OudsSpaceKeyToken.Fixed.Short.value),
+    ) {
+        AssistChip(
+            onClick = { /* Do something! */ },
+            label = { Text("Assist Chip") },
+            leadingIcon = settingsIcon,
+            enabled = enabled
+        )
+
+        ElevatedAssistChip(
+            onClick = { /* Do something! */ },
+            label = { Text("Elevated Assist Chip") },
+            leadingIcon = settingsIcon,
+            enabled = enabled
+        )
+    }
+
+    FilterChipsRow(enabled = enabled, selected = false)
+    FilterChipsRow(enabled = enabled, selected = true)
+
+    var inputChipSelected by remember { mutableStateOf(false) }
+
+    InputChip(
+        selected = inputChipSelected,
+        onClick = { inputChipSelected = !inputChipSelected },
+        label = { Text("Input Chip") },
+        avatar = {
+            Icon(
+                Icons.Filled.Person,
+                contentDescription = "Localized description",
+                Modifier.size(InputChipDefaults.AvatarSize)
+            )
+        },
+        enabled = enabled
+    )
+
+    SuggestionChip(onClick = { /* Do something! */ }, label = { Text("Suggestion Chip") }, enabled = enabled)
+}
+
+@Composable
+private fun FilterChipsRow(enabled: Boolean, selected: Boolean) {
+    Row(horizontalArrangement = Arrangement.spacedBy(OudsSpaceKeyToken.Fixed.Short.value)) {
+        var filterChipSelected by remember { mutableStateOf(selected) }
+
+        FilterChip(
+            selected = filterChipSelected,
+            onClick = { filterChipSelected = !filterChipSelected },
+            label = { Text("Filter chip") },
+            leadingIcon = if (filterChipSelected) {
+                {
+                    Icon(
+                        imageVector = Icons.Filled.Done,
+                        contentDescription = "Localized Description",
+                        modifier = Modifier.size(FilterChipDefaults.IconSize)
+                    )
+                }
+            } else {
+                null
+            },
+            enabled = enabled
+        )
+
+        ElevatedFilterChip(
+            selected = filterChipSelected,
+            onClick = { filterChipSelected = !filterChipSelected },
+            label = { Text("Elevated filter chip") },
+            leadingIcon =
+            if (filterChipSelected) {
+                {
+                    Icon(
+                        imageVector = Icons.Filled.Done,
+                        contentDescription = "Localized Description",
+                        modifier = Modifier.size(FilterChipDefaults.IconSize)
+                    )
+                }
+            } else {
+                null
+            },
+            enabled = enabled
+        )
+    }
+}
+
+@Composable
+private fun DialogSample() {
+    val openDialog = remember { mutableStateOf(false) }
+    FilledTonalButton(onClick = { openDialog.value = true }) { Text("Open dialog") }
+
+    if (openDialog.value) {
+        AlertDialog(
+            onDismissRequest = {
+                openDialog.value = false
+            },
+            title = { Text(text = "Title") },
+            text = { Text(text = "Turned on by default") },
+            confirmButton = {
+                TextButton(onClick = { openDialog.value = false }) { Text("Confirm") }
+            },
+            dismissButton = {
+                TextButton(onClick = { openDialog.value = false }) { Text("Dismiss") }
+            }
+        )
+    }
+}
+
+@Composable
+private fun ListItemsSample() {
+    val favoriteIcon: @Composable () -> Unit = {
+        Icon(
+            Icons.Filled.Favorite,
+            contentDescription = "Localized description",
+        )
+    }
+    val trailingContent: @Composable () -> Unit = { Text("meta") }
+
+    ListItem(
+        modifier = Modifier.clickable {  },
+        headlineContent = { Text("One line list item with 24x24 icon") },
+        leadingContent = favoriteIcon
+    )
+    ListItem(
+        modifier = Modifier.clickable {  },
+        headlineContent = { Text("Two line list item with trailing") },
+        supportingContent = { Text("Secondary text") },
+        trailingContent = trailingContent,
+        leadingContent = favoriteIcon
+    )
+    ListItem(
+        modifier = Modifier.clickable {  },
+        headlineContent = { Text("Three line list item") },
+        supportingContent = {
+            Text("Secondary text that is long and perhaps goes onto another line")
+        },
+        leadingContent = favoriteIcon,
+        trailingContent = trailingContent
+    )
+
+}
+
+@Composable
+private fun MenusSample() {
+    var expanded by remember { mutableStateOf(false) }
+    Row(verticalAlignment = Alignment.CenterVertically) {
+        Text(text = "Click to expand")
+        Box(
+            modifier = Modifier
+                .fillMaxSize()
+                .wrapContentSize(Alignment.TopStart)
+        ) {
+            IconButton(onClick = { expanded = true }) {
+                Icon(Icons.Default.MoreVert, contentDescription = "Localized description")
+            }
+            DropdownMenu(expanded = expanded, onDismissRequest = { expanded = false }) {
+                DropdownMenuItem(
+                    text = { Text("Edit") },
+                    onClick = { /* Handle edit! */ },
+                    leadingIcon = { Icon(Icons.Outlined.Edit, contentDescription = null) }
+                )
+                DropdownMenuItem(
+                    text = { Text("Settings") },
+                    onClick = { /* Handle settings! */ },
+                    leadingIcon = { Icon(Icons.Outlined.Settings, contentDescription = null) }
+                )
+                HorizontalDivider()
+                DropdownMenuItem(
+                    text = { Text("Send Feedback") },
+                    onClick = { /* Handle send feedback! */ },
+                    leadingIcon = { Icon(Icons.Outlined.Email, contentDescription = null) },
+                    trailingIcon = { Text("F11", textAlign = TextAlign.Center) }
+                )
+            }
+        }
+    }
+}
+
+@Composable
+private fun NavigationBarSample() {
+    var selectedItem by remember { mutableIntStateOf(0) }
+    val items = listOf("Songs", "Artists", "Playlists")
+    val selectedIcons = listOf(Icons.Filled.Home, Icons.Filled.Favorite, Icons.Filled.Star)
+    val unselectedIcons = listOf(Icons.Outlined.Home, Icons.Outlined.FavoriteBorder, Icons.Outlined.Star)
+
+    NavigationBar {
+        items.forEachIndexed { index, item ->
+            NavigationBarItem(
+                icon = {
+                    BadgedBox(
+                        badge = {
+                            Badge {
+                                val badgeNumber = "2"
+                                Text(
+                                    badgeNumber,
+                                    modifier =
+                                    Modifier.semantics {
+                                        contentDescription = "$badgeNumber new notifications"
+                                    }
+                                )
+                            }
+                        }
+                    ) {
+                        Icon(
+                            if (selectedItem == index) selectedIcons[index] else unselectedIcons[index],
+                            contentDescription = item
+                        )
+                    }
+                },
+                label = { Text(item) },
+                selected = selectedItem == index,
+                onClick = { selectedItem = index }
+            )
+        }
+    }
+}
+
+@Composable
+private fun NavigationDrawerSample(drawerState: DrawerState, scope: CoroutineScope, content: @Composable () -> Unit) {
+    val items = listOf(
+        Icons.Default.AccountCircle,
+        Icons.Default.Build,
+        Icons.Default.Call,
+        Icons.Default.Email,
+        Icons.Default.Favorite,
+        Icons.Default.Home,
+        Icons.Default.Info,
+        Icons.Default.Place,
+        Icons.Default.CheckCircle,
+    )
+    val selectedItem = remember { mutableStateOf(items[0]) }
+    ModalNavigationDrawer(
+        drawerState = drawerState,
+        drawerContent = {
+            ModalDrawerSheet(drawerState) {
+                Column(Modifier.verticalScroll(rememberScrollState())) {
+                    Spacer(Modifier.height(12.dp))
+                    items.forEach { item ->
+                        NavigationDrawerItem(
+                            icon = { Icon(item, contentDescription = null) },
+                            label = { Text(item.name.substringAfterLast(".")) },
+                            selected = item == selectedItem.value,
+                            onClick = {
+                                scope.launch { drawerState.close() }
+                                selectedItem.value = item
+                            },
+                            modifier = Modifier.padding(NavigationDrawerItemDefaults.ItemPadding)
+                        )
+                    }
+                }
+            }
+        },
+        content = content
+    )
+}
+
+@Composable
+private fun NavigationRailSample() {
+    var selectedItem by remember { mutableIntStateOf(0) }
+    val items = listOf("Home", "Search", "Settings")
+    val selectedIcons = listOf(Icons.Filled.Home, Icons.Filled.Favorite, Icons.Filled.Star)
+    val unselectedIcons = listOf(Icons.Outlined.Home, Icons.Outlined.FavoriteBorder, Icons.Outlined.Star)
+    NavigationRail {
+        items.forEachIndexed { index, item ->
+            NavigationRailItem(
+                icon = {
+                    Icon(
+                        if (selectedItem == index) selectedIcons[index] else unselectedIcons[index],
+                        contentDescription = item
+                    )
+                },
+                label = { Text(item) },
+                selected = selectedItem == index,
+                onClick = { selectedItem = index }
+            )
+        }
+    }
+}
+
+@Composable
+private fun RadioButtonsSample(enabled: Boolean = true) {
+    var state by remember { mutableStateOf(true) }
+    Row(Modifier.selectableGroup()) {
+        RadioButton(
+            selected = state,
+            onClick = { state = false },
+            modifier = Modifier.semantics { contentDescription = "Localized Description" },
+            enabled = enabled
+        )
+        RadioButton(
+            selected = !state,
+            onClick = { state = false },
+            modifier = Modifier.semantics { contentDescription = "Localized Description" },
+            enabled = enabled
+        )
+    }
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+private fun BottomSheetScaffoldSample(
+    scope: CoroutineScope,
+    snackbarHostState: SnackbarHostState,
+    scaffoldState: BottomSheetScaffoldState,
+    content: @Composable () -> Unit
+) {
+    BottomSheetScaffold(
+        snackbarHost = { SnackbarHost(snackbarHostState) },
+        scaffoldState = scaffoldState,
+        sheetPeekHeight = 0.dp,
+        sheetContent = {
+            Column(Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) {
+                Text("Sheet content")
+                FilledTonalButton(
+                    modifier = Modifier.padding(top = OudsSpaceKeyToken.Fixed.Short.value, bottom = OudsSpaceKeyToken.Fixed.Huge.value),
+                    onClick = { scope.launch { scaffoldState.bottomSheetState.partialExpand() } }
+                ) {
+                    Text("Collapse sheet")
+                }
+            }
+        }
+    ) { innerPadding ->
+        Box(
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(innerPadding)
+        ) {
+            content()
+        }
+    }
+}
+
+@Composable
+private fun SlidersSample(enabled: Boolean = true) {
+    Column {
+        var sliderPosition by remember { mutableFloatStateOf(0.3f) }
+        Text(text = "%.2f".format(sliderPosition))
+        Slider(
+            modifier = Modifier.semantics { contentDescription = "Localized Description" },
+            value = sliderPosition,
+            onValueChange = { sliderPosition = it },
+            enabled = enabled
+        )
+        var steppedSliderPosition by remember { mutableFloatStateOf(10f) }
+        Text(text = steppedSliderPosition.roundToInt().toString())
+        Slider(
+            modifier = Modifier.semantics { contentDescription = "Localized Description" },
+            value = steppedSliderPosition,
+            onValueChange = { steppedSliderPosition = it },
+            valueRange = 0f..100f,
+            onValueChangeFinished = {},
+            steps = 9,
+            enabled = enabled
+        )
+    }
+}
+
+@Composable
+private fun SwitchesSample(enabled: Boolean = true) {
+    var checked by remember { mutableStateOf(true) }
+    val checkIcon: @Composable () -> Unit = {
+        Icon(
+            imageVector = Icons.Filled.Check,
+            contentDescription = null,
+            modifier = Modifier.size(SwitchDefaults.IconSize),
+        )
+    }
+
+    Row(horizontalArrangement = Arrangement.spacedBy(OudsSpaceKeyToken.Fixed.Short.value)) {
+        Switch(
+            checked = checked,
+            onCheckedChange = { checked = it },
+            enabled = enabled
+        )
+        Switch(
+            checked = !checked,
+            onCheckedChange = { checked = it },
+            enabled = enabled
+        )
+        Switch(
+            checked = checked,
+            onCheckedChange = { checked = it },
+            thumbContent = { if (checked) checkIcon() },
+            enabled = enabled
+        )
+        Switch(
+            checked = !checked,
+            onCheckedChange = { checked = it },
+            thumbContent = { if (checked) checkIcon() },
+            enabled = enabled
+        )
+    }
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+private fun TabsSample() {
+    var state by remember { mutableIntStateOf(0) }
+    TabRow(selectedTabIndex = state) {
+        Tabs(state = state, onTabClick = { index -> state = index })
+    }
+
+    SecondaryTabRow(modifier = Modifier.padding(top = OudsSpaceKeyToken.Fixed.Short.value), selectedTabIndex = state) {
+        Tabs(state = state, onTabClick = { index -> state = index })
+    }
+}
+
+@Composable
+private fun Tabs(state: Int, onTabClick: (Int) -> Unit) {
+    val titles = listOf("Tab 1", "Tab 2", "Tab 3 with lots of text")
+    titles.forEachIndexed { index, title ->
+        Tab(
+            selected = state == index,
+            onClick = { onTabClick(index) },
+            text = { Text(text = title, maxLines = 2, overflow = TextOverflow.Ellipsis) }
+        )
+    }
+}
+
+@Composable
+private fun TextFieldsSample(enabled: Boolean = true, isError: Boolean = false) {
+    val text: MutableState<String> = rememberSaveable { mutableStateOf("") }
+    val textForOutlined: MutableState<String> = rememberSaveable { mutableStateOf("") }
+
+    val label: @Composable () -> Unit = { Text(text = "Label") }
+    val placeholder: @Composable () -> Unit = { Text(text = "Placeholder") }
+    val supportingText: @Composable () -> Unit = { Text(text = "Supporting text") }
+    val icon: @Composable () -> Unit = { Icon(Icons.Filled.Favorite, contentDescription = null) }
+
+    TextField(
+        modifier = Modifier.fillMaxWidth(),
+        value = text.value,
+        onValueChange = { text.value = it },
+        label = label,
+        placeholder = placeholder,
+        leadingIcon = icon,
+        isError = isError,
+        supportingText = supportingText,
+        enabled = enabled
+    )
+
+    OutlinedTextField(
+        modifier = Modifier.fillMaxWidth(),
+        value = textForOutlined.value,
+        onValueChange = { textForOutlined.value = it },
+        label = label,
+        placeholder = placeholder,
+        trailingIcon = icon,
+        isError = isError,
+        supportingText = supportingText,
+        enabled = enabled
+    )
+}
+
+@Composable
+private fun ColumnScope.SectionColumn(title: String, hasContentHorizontalPadding: Boolean = true, content: @Composable () -> Unit) {
+    Text(
+        text = title,
+        style = OudsTypographyKeyToken.HeadingMedium.value,
+        modifier = Modifier.padding(bottom = OudsSpaceKeyToken.Fixed.Short.value, top = OudsSpaceKeyToken.Fixed.Taller.value).padding(horizontal = OudsSpaceKeyToken.Fixed.Medium.value)
+    )
+    Column(modifier = if (hasContentHorizontalPadding) Modifier.padding(horizontal = OudsSpaceKeyToken.Fixed.Medium.value) else Modifier) {
+        content()
+    }
+}
+
+@UiModePreviews.Default
+@Composable
+private fun PreviewAboutM3ComponentsScreen() = OudsPreview {
+    AboutM3ComponentsScreen()
+}
diff --git a/app/src/main/java/com/orange/ouds/app/ui/about/AboutNavigation.kt b/app/src/main/java/com/orange/ouds/app/ui/about/AboutNavigation.kt
index dcc5fe35..2ecf77a3 100644
--- a/app/src/main/java/com/orange/ouds/app/ui/about/AboutNavigation.kt
+++ b/app/src/main/java/com/orange/ouds/app/ui/about/AboutNavigation.kt
@@ -21,6 +21,7 @@ import com.orange.ouds.app.ui.about.AboutNavigationKey.MenuItemIdKey
 
 object AboutDestinations {
     const val FileRoute = "ouds/module/about/file"
+    const val M3ComponentsRoute = "ouds/module/about/m3Components"
 }
 
 object AboutNavigationKey {
@@ -34,6 +35,10 @@ fun NavGraphBuilder.addAboutNavGraph() {
     ) { navBackStackEntry ->
         val aboutMenuItemId = requireNotNull(navBackStackEntry.arguments).getLong(MenuItemIdKey).toInt()
         val aboutItem = AboutMenuItem.fromId(aboutMenuItemId)
-        aboutItem?.let { AboutFileScreen(it.fileRes, isSystemInDarkTheme()) }
+        (aboutItem as? AboutFileMenuItem)?.let { AboutFileScreen(it.fileRes, isSystemInDarkTheme()) }
+    }
+
+    composable(AboutDestinations.M3ComponentsRoute) { _ ->
+        AboutM3ComponentsScreen()
     }
 }
diff --git a/app/src/main/java/com/orange/ouds/app/ui/about/AboutScreen.kt b/app/src/main/java/com/orange/ouds/app/ui/about/AboutScreen.kt
index d64dcb7a..97fdcbe0 100644
--- a/app/src/main/java/com/orange/ouds/app/ui/about/AboutScreen.kt
+++ b/app/src/main/java/com/orange/ouds/app/ui/about/AboutScreen.kt
@@ -27,11 +27,25 @@ import com.orange.ouds.app.ui.utilities.composable.Screen
 import com.orange.ouds.core.utilities.OudsPreview
 import com.orange.ouds.foundation.utilities.UiModePreviews
 
+private val oudsAboutMenuItems = listOf(
+    AboutFileMenuItem(1, R.string.app_about_legalInformation_label, R.raw.about_legal_information),
+    AboutFileMenuItem(2, R.string.app_about_privacyPolicy_label, R.raw.about_privacy_policy),
+    AboutRouteMenuItem(3, R.string.app_about_defaultM3Components_label, AboutDestinations.M3ComponentsRoute)
+)
+
+sealed class AboutMenuItem(val id: Int, @StringRes val labelRes: Int) {
+    companion object {
+        fun fromId(id: Int) = oudsAboutMenuItems.firstOrNull { it.id == id }
+    }
+}
+class AboutFileMenuItem(id: Int, @StringRes labelRes: Int, @RawRes val fileRes: Int) : AboutMenuItem(id, labelRes)
+class AboutRouteMenuItem(id: Int, @StringRes labelRes: Int, val route: String) : AboutMenuItem(id, labelRes)
+
 @Composable
 fun AboutScreen(onMenuItemClick: (id: Int) -> Unit) {
     Screen {
         LazyColumn {
-            items(AboutMenuItem.entries) { item ->
+            items(oudsAboutMenuItems) { item ->
                 ListItem(
                     modifier = Modifier.clickable { onMenuItemClick(item.id) },
                     headlineContent = { Text(text = stringResource(id = item.labelRes)) }
@@ -41,15 +55,6 @@ fun AboutScreen(onMenuItemClick: (id: Int) -> Unit) {
     }
 }
 
-enum class AboutMenuItem(val id: Int, @StringRes val labelRes: Int, @RawRes val fileRes: Int) {
-    LegalInformation(1, R.string.app_about_legalInformation_label, R.raw.about_legal_information),
-    PrivacyPolicy(2, R.string.app_about_privacyPolicy_label, R.raw.about_privacy_policy);
-
-    companion object {
-        fun fromId(id: Int) = AboutMenuItem.entries.firstOrNull { it.id == id }
-    }
-}
-
 @UiModePreviews.Default
 @Composable
 private fun PreviewAboutScreen() = OudsPreview {
diff --git a/app/src/main/java/com/orange/ouds/app/ui/navigation/AppNavGraph.kt b/app/src/main/java/com/orange/ouds/app/ui/navigation/AppNavGraph.kt
index 1b99d06b..b7424d7f 100644
--- a/app/src/main/java/com/orange/ouds/app/ui/navigation/AppNavGraph.kt
+++ b/app/src/main/java/com/orange/ouds/app/ui/navigation/AppNavGraph.kt
@@ -17,6 +17,9 @@ import androidx.navigation.NavGraphBuilder
 import androidx.navigation.compose.composable
 import com.orange.ouds.app.ui.BottomBarItem
 import com.orange.ouds.app.ui.about.AboutDestinations
+import com.orange.ouds.app.ui.about.AboutFileMenuItem
+import com.orange.ouds.app.ui.about.AboutMenuItem
+import com.orange.ouds.app.ui.about.AboutRouteMenuItem
 import com.orange.ouds.app.ui.about.AboutScreen
 import com.orange.ouds.app.ui.about.addAboutNavGraph
 import com.orange.ouds.app.ui.components.ComponentsScreen
@@ -44,6 +47,13 @@ private fun NavGraphBuilder.addBottomBarNavGraph(navController: NavController) {
         ComponentsScreen()
     }
     composable(BottomBarItem.About.route) { _ ->
-        AboutScreen { id -> navController.navigate("${AboutDestinations.FileRoute}/$id") }
+        AboutScreen { id ->
+            when (AboutMenuItem.fromId(id)) {
+                is AboutFileMenuItem -> navController.navigate("${AboutDestinations.FileRoute}/$id")
+                is AboutRouteMenuItem -> navController.navigate(AboutDestinations.M3ComponentsRoute)
+                else -> {}
+            }
+
+        }
     }
 }
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
index 53fc88fc..a180809a 100644
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -101,5 +101,6 @@
     <!-- About screen -->
     <string name="app_about_privacyPolicy_label">Privacy policy</string>
     <string name="app_about_legalInformation_label">Legal information</string>
+    <string name="app_about_defaultM3Components_label">Default M3 components</string>
 
 </resources>
\ No newline at end of file

From 5b53dfe5c789b8f9d1927b570120b6f3b4321e5d Mon Sep 17 00:00:00 2001
From: Pauline Auvray <pauline.auvray@orange.com>
Date: Wed, 20 Nov 2024 11:34:54 +0100
Subject: [PATCH 2/4] Add brandNegativeLowDark semantic token manually in order
 to test Material colors provided by Maxime

---
 .../semantic/OudsColorBrandSemanticTokens.kt  | 141 +++++++++---------
 1 file changed, 71 insertions(+), 70 deletions(-)

diff --git a/theme-contract/src/main/java/com/orange/ouds/theme/tokens/semantic/OudsColorBrandSemanticTokens.kt b/theme-contract/src/main/java/com/orange/ouds/theme/tokens/semantic/OudsColorBrandSemanticTokens.kt
index 75abf80b..5e3d5474 100644
--- a/theme-contract/src/main/java/com/orange/ouds/theme/tokens/semantic/OudsColorBrandSemanticTokens.kt
+++ b/theme-contract/src/main/java/com/orange/ouds/theme/tokens/semantic/OudsColorBrandSemanticTokens.kt
@@ -17,74 +17,75 @@ import com.orange.ouds.tokens.global.raw.ColorRawTokens
 import com.orange.ouds.tokens.global.raw.OrangeBrandColorRawTokens
 
 data class OudsColorBrandSemanticTokens(
-  val brandAccentDefaultLight: Color = ColorRawTokens.colorFunctionalSun500,
-  val brandAccentHighLight: Color = ColorRawTokens.colorFunctionalSun600,
-  val brandAccentHighestLight: Color = OrangeBrandColorRawTokens.colorWarmGray900,
-  val brandAccentLowestLight: Color = OrangeBrandColorRawTokens.colorWarmGray100,
-  val brandAccentDefaultDark: Color = ColorRawTokens.colorFunctionalSun500,
-  val brandAccentHighDark: Color = ColorRawTokens.colorFunctionalSun600,
-  val brandAccentHighestDark: Color = OrangeBrandColorRawTokens.colorWarmGray900,
-  val brandAccentLowestDark: Color = OrangeBrandColorRawTokens.colorWarmGray100,
-  val brandInfoDefaultLight: Color = ColorRawTokens.colorFunctionalDodgerBlue500,
-  val brandInfoHighestLight: Color = ColorRawTokens.colorFunctionalDodgerBlue900,
-  val brandInfoLowestLight: Color = ColorRawTokens.colorFunctionalDodgerBlue100,
-  val brandInfoDefaultDark: Color = ColorRawTokens.colorFunctionalDodgerBlue500,
-  val brandInfoHighestDark: Color = ColorRawTokens.colorFunctionalDodgerBlue900,
-  val brandInfoLowestDark: Color = ColorRawTokens.colorFunctionalDodgerBlue100,
-  val brandNegativeDefaultLight: Color = ColorRawTokens.colorFunctionalScarlet600,
-  val brandNegativeHighLight: Color = ColorRawTokens.colorFunctionalScarlet700,
-  val brandNegativeHigherLight: Color = ColorRawTokens.colorFunctionalScarlet800,
-  val brandNegativeHighestLight: Color = ColorRawTokens.colorFunctionalScarlet900,
-  val brandNegativeLowestLight: Color = ColorRawTokens.colorFunctionalScarlet100,
-  val brandNegativeDefaultDark: Color = ColorRawTokens.colorFunctionalScarlet600,
-  val brandNegativeHighDark: Color = ColorRawTokens.colorFunctionalScarlet700,
-  val brandNegativeHigherDark: Color = ColorRawTokens.colorFunctionalScarlet800,
-  val brandNegativeHighestDark: Color = ColorRawTokens.colorFunctionalScarlet900,
-  val brandNegativeLowestDark: Color = ColorRawTokens.colorFunctionalScarlet100,
-  val brandNeutralEmphasizedBlackLight: Color = ColorRawTokens.colorFunctionalBlack,
-  val brandNeutralEmphasizedHighLight: Color = ColorRawTokens.colorFunctionalDarkGray720,
-  val brandNeutralEmphasizedHigherLight: Color = ColorRawTokens.colorFunctionalDarkGray800,
-  val brandNeutralEmphasizedHighestLight: Color = ColorRawTokens.colorFunctionalDarkGray880,
-  val brandNeutralEmphasizedLowLight: Color = ColorRawTokens.colorFunctionalDarkGray560,
-  val brandNeutralEmphasizedLowerLight: Color = ColorRawTokens.colorFunctionalDarkGray480,
-  val brandNeutralEmphasizedLowestLight: Color = ColorRawTokens.colorFunctionalDarkGray400,
-  val brandNeutralEmphasizedMediumLight: Color = ColorRawTokens.colorFunctionalDarkGray640,
-  val brandNeutralEmphasizedBlackDark: Color = ColorRawTokens.colorFunctionalBlack,
-  val brandNeutralEmphasizedHighDark: Color = ColorRawTokens.colorFunctionalDarkGray720,
-  val brandNeutralEmphasizedHigherDark: Color = ColorRawTokens.colorFunctionalDarkGray800,
-  val brandNeutralEmphasizedHighestDark: Color = ColorRawTokens.colorFunctionalDarkGray880,
-  val brandNeutralEmphasizedLowDark: Color = ColorRawTokens.colorFunctionalDarkGray560,
-  val brandNeutralEmphasizedLowerDark: Color = ColorRawTokens.colorFunctionalDarkGray480,
-  val brandNeutralEmphasizedLowestDark: Color = ColorRawTokens.colorFunctionalDarkGray400,
-  val brandNeutralEmphasizedMediumDark: Color = ColorRawTokens.colorFunctionalDarkGray640,
-  val brandNeutralMutedHighestLight: Color = ColorRawTokens.colorFunctionalDarkGray160,
-  val brandNeutralMutedLowLight: Color = ColorRawTokens.colorFunctionalLightGray400,
-  val brandNeutralMutedLowerLight: Color = ColorRawTokens.colorFunctionalLightGray160,
-  val brandNeutralMutedLowestLight: Color = ColorRawTokens.colorFunctionalLightGray80,
-  val brandNeutralMutedMediumLight: Color = ColorRawTokens.colorFunctionalLightGray560,
-  val brandNeutralMutedWhiteLight: Color = ColorRawTokens.colorFunctionalWhite,
-  val brandNeutralMutedHighestDark: Color = ColorRawTokens.colorFunctionalDarkGray160,
-  val brandNeutralMutedLowDark: Color = ColorRawTokens.colorFunctionalLightGray400,
-  val brandNeutralMutedLowerDark: Color = ColorRawTokens.colorFunctionalLightGray160,
-  val brandNeutralMutedLowestDark: Color = ColorRawTokens.colorFunctionalLightGray80,
-  val brandNeutralMutedMediumDark: Color = ColorRawTokens.colorFunctionalLightGray560,
-  val brandNeutralMutedWhiteDark: Color = ColorRawTokens.colorFunctionalWhite,
-  val brandPositiveDefaultLight: Color = ColorRawTokens.colorFunctionalMalachite500,
-  val brandPositiveHighestLight: Color = ColorRawTokens.colorFunctionalMalachite900,
-  val brandPositiveLowestLight: Color = ColorRawTokens.colorFunctionalMalachite100,
-  val brandPositiveDefaultDark: Color = ColorRawTokens.colorFunctionalMalachite500,
-  val brandPositiveHighestDark: Color = ColorRawTokens.colorFunctionalMalachite900,
-  val brandPositiveLowestDark: Color = ColorRawTokens.colorFunctionalMalachite100,
-  val brandPrimaryDefaultLight: Color = OrangeBrandColorRawTokens.colorOrange550,
-  val brandPrimaryLowLight: Color = OrangeBrandColorRawTokens.colorOrange500,
-  val brandPrimaryDefaultDark: Color = OrangeBrandColorRawTokens.colorOrange550,
-  val brandPrimaryLowDark: Color = OrangeBrandColorRawTokens.colorOrange500,
-  val brandWarningDefaultLight: Color = ColorRawTokens.colorFunctionalSun500,
-  val brandWarningHighLight: Color = ColorRawTokens.colorFunctionalSun600,
-  val brandWarningHighestLight: Color = ColorRawTokens.colorFunctionalSun900,
-  val brandWarningLowestLight: Color = ColorRawTokens.colorFunctionalSun100,
-  val brandWarningDefaultDark: Color = ColorRawTokens.colorFunctionalSun500,
-  val brandWarningHighDark: Color = ColorRawTokens.colorFunctionalSun600,
-  val brandWarningHighestDark: Color = ColorRawTokens.colorFunctionalSun900,
-  val brandWarningLowestDark: Color = ColorRawTokens.colorFunctionalSun100
+    val brandAccentDefaultLight: Color = ColorRawTokens.colorFunctionalSun500,
+    val brandAccentHighLight: Color = ColorRawTokens.colorFunctionalSun600,
+    val brandAccentHighestLight: Color = OrangeBrandColorRawTokens.colorWarmGray900,
+    val brandAccentLowestLight: Color = OrangeBrandColorRawTokens.colorWarmGray100,
+    val brandAccentDefaultDark: Color = ColorRawTokens.colorFunctionalSun500,
+    val brandAccentHighDark: Color = ColorRawTokens.colorFunctionalSun600,
+    val brandAccentHighestDark: Color = OrangeBrandColorRawTokens.colorWarmGray900,
+    val brandAccentLowestDark: Color = OrangeBrandColorRawTokens.colorWarmGray100,
+    val brandInfoDefaultLight: Color = ColorRawTokens.colorFunctionalDodgerBlue500,
+    val brandInfoHighestLight: Color = ColorRawTokens.colorFunctionalDodgerBlue900,
+    val brandInfoLowestLight: Color = ColorRawTokens.colorFunctionalDodgerBlue100,
+    val brandInfoDefaultDark: Color = ColorRawTokens.colorFunctionalDodgerBlue500,
+    val brandInfoHighestDark: Color = ColorRawTokens.colorFunctionalDodgerBlue900,
+    val brandInfoLowestDark: Color = ColorRawTokens.colorFunctionalDodgerBlue100,
+    val brandNegativeDefaultLight: Color = ColorRawTokens.colorFunctionalScarlet600,
+    val brandNegativeHighLight: Color = ColorRawTokens.colorFunctionalScarlet700,
+    val brandNegativeHigherLight: Color = ColorRawTokens.colorFunctionalScarlet800,
+    val brandNegativeHighestLight: Color = ColorRawTokens.colorFunctionalScarlet900,
+    val brandNegativeLowDark: Color = ColorRawTokens.colorFunctionalScarlet300,
+    val brandNegativeLowestLight: Color = ColorRawTokens.colorFunctionalScarlet100,
+    val brandNegativeDefaultDark: Color = ColorRawTokens.colorFunctionalScarlet600,
+    val brandNegativeHighDark: Color = ColorRawTokens.colorFunctionalScarlet700,
+    val brandNegativeHigherDark: Color = ColorRawTokens.colorFunctionalScarlet800,
+    val brandNegativeHighestDark: Color = ColorRawTokens.colorFunctionalScarlet900,
+    val brandNegativeLowestDark: Color = ColorRawTokens.colorFunctionalScarlet100,
+    val brandNeutralEmphasizedBlackLight: Color = ColorRawTokens.colorFunctionalBlack,
+    val brandNeutralEmphasizedHighLight: Color = ColorRawTokens.colorFunctionalDarkGray720,
+    val brandNeutralEmphasizedHigherLight: Color = ColorRawTokens.colorFunctionalDarkGray800,
+    val brandNeutralEmphasizedHighestLight: Color = ColorRawTokens.colorFunctionalDarkGray880,
+    val brandNeutralEmphasizedLowLight: Color = ColorRawTokens.colorFunctionalDarkGray560,
+    val brandNeutralEmphasizedLowerLight: Color = ColorRawTokens.colorFunctionalDarkGray480,
+    val brandNeutralEmphasizedLowestLight: Color = ColorRawTokens.colorFunctionalDarkGray400,
+    val brandNeutralEmphasizedMediumLight: Color = ColorRawTokens.colorFunctionalDarkGray640,
+    val brandNeutralEmphasizedBlackDark: Color = ColorRawTokens.colorFunctionalBlack,
+    val brandNeutralEmphasizedHighDark: Color = ColorRawTokens.colorFunctionalDarkGray720,
+    val brandNeutralEmphasizedHigherDark: Color = ColorRawTokens.colorFunctionalDarkGray800,
+    val brandNeutralEmphasizedHighestDark: Color = ColorRawTokens.colorFunctionalDarkGray880,
+    val brandNeutralEmphasizedLowDark: Color = ColorRawTokens.colorFunctionalDarkGray560,
+    val brandNeutralEmphasizedLowerDark: Color = ColorRawTokens.colorFunctionalDarkGray480,
+    val brandNeutralEmphasizedLowestDark: Color = ColorRawTokens.colorFunctionalDarkGray400,
+    val brandNeutralEmphasizedMediumDark: Color = ColorRawTokens.colorFunctionalDarkGray640,
+    val brandNeutralMutedHighestLight: Color = ColorRawTokens.colorFunctionalDarkGray160,
+    val brandNeutralMutedLowLight: Color = ColorRawTokens.colorFunctionalLightGray400,
+    val brandNeutralMutedLowerLight: Color = ColorRawTokens.colorFunctionalLightGray160,
+    val brandNeutralMutedLowestLight: Color = ColorRawTokens.colorFunctionalLightGray80,
+    val brandNeutralMutedMediumLight: Color = ColorRawTokens.colorFunctionalLightGray560,
+    val brandNeutralMutedWhiteLight: Color = ColorRawTokens.colorFunctionalWhite,
+    val brandNeutralMutedHighestDark: Color = ColorRawTokens.colorFunctionalDarkGray160,
+    val brandNeutralMutedLowDark: Color = ColorRawTokens.colorFunctionalLightGray400,
+    val brandNeutralMutedLowerDark: Color = ColorRawTokens.colorFunctionalLightGray160,
+    val brandNeutralMutedLowestDark: Color = ColorRawTokens.colorFunctionalLightGray80,
+    val brandNeutralMutedMediumDark: Color = ColorRawTokens.colorFunctionalLightGray560,
+    val brandNeutralMutedWhiteDark: Color = ColorRawTokens.colorFunctionalWhite,
+    val brandPositiveDefaultLight: Color = ColorRawTokens.colorFunctionalMalachite500,
+    val brandPositiveHighestLight: Color = ColorRawTokens.colorFunctionalMalachite900,
+    val brandPositiveLowestLight: Color = ColorRawTokens.colorFunctionalMalachite100,
+    val brandPositiveDefaultDark: Color = ColorRawTokens.colorFunctionalMalachite500,
+    val brandPositiveHighestDark: Color = ColorRawTokens.colorFunctionalMalachite900,
+    val brandPositiveLowestDark: Color = ColorRawTokens.colorFunctionalMalachite100,
+    val brandPrimaryDefaultLight: Color = OrangeBrandColorRawTokens.colorOrange550,
+    val brandPrimaryLowLight: Color = OrangeBrandColorRawTokens.colorOrange500,
+    val brandPrimaryDefaultDark: Color = OrangeBrandColorRawTokens.colorOrange550,
+    val brandPrimaryLowDark: Color = OrangeBrandColorRawTokens.colorOrange500,
+    val brandWarningDefaultLight: Color = ColorRawTokens.colorFunctionalSun500,
+    val brandWarningHighLight: Color = ColorRawTokens.colorFunctionalSun600,
+    val brandWarningHighestLight: Color = ColorRawTokens.colorFunctionalSun900,
+    val brandWarningLowestLight: Color = ColorRawTokens.colorFunctionalSun100,
+    val brandWarningDefaultDark: Color = ColorRawTokens.colorFunctionalSun500,
+    val brandWarningHighDark: Color = ColorRawTokens.colorFunctionalSun600,
+    val brandWarningHighestDark: Color = ColorRawTokens.colorFunctionalSun900,
+    val brandWarningLowestDark: Color = ColorRawTokens.colorFunctionalSun100
 )

From 66c26ad868e85a33584e3bfe9be2d6de4ef2dcd6 Mon Sep 17 00:00:00 2001
From: Pauline Auvray <pauline.auvray@orange.com>
Date: Wed, 20 Nov 2024 11:35:15 +0100
Subject: [PATCH 3/4] Apply Material colors provided by Maxime

---
 .../orange/ouds/core/theme/OudsColorScheme.kt | 130 ++++++++++--------
 1 file changed, 72 insertions(+), 58 deletions(-)

diff --git a/core/src/main/java/com/orange/ouds/core/theme/OudsColorScheme.kt b/core/src/main/java/com/orange/ouds/core/theme/OudsColorScheme.kt
index 26f36ddb..7f059a6e 100644
--- a/core/src/main/java/com/orange/ouds/core/theme/OudsColorScheme.kt
+++ b/core/src/main/java/com/orange/ouds/core/theme/OudsColorScheme.kt
@@ -1020,68 +1020,82 @@ fun OudsColorScheme.fromToken(token: OudsColorKeyToken.Transparent): Color {
 
 val OudsColorSemanticTokens.materialLightColorScheme: ColorScheme
     get() = lightColorScheme(
-        primary = backgroundColorTokens.bgBrandPrimaryLight,
-        onPrimary = contentColorTokens.contentDefaultLight,
-        primaryContainer = backgroundColorTokens.bgPrimaryLight,
-        onPrimaryContainer = contentColorTokens.contentDefaultLight,
-        inversePrimary = backgroundColorTokens.bgBrandPrimaryDark,
-        secondary = backgroundColorTokens.bgSecondaryLight,
-        onSecondary = elevationColorTokens.elevationDragOnBgSecondaryLight,
-        secondaryContainer = backgroundColorTokens.bgEmphasizedLight,
-        onSecondaryContainer = contentColorTokens.contentDefaultDark,
-        tertiary = backgroundColorTokens.bgTertiaryLight,
-        onTertiary = contentColorTokens.contentDefaultDark,
-        tertiaryContainer = decorativeColorTokens.decorativeBrandTertiaryLight,
-        onTertiaryContainer = contentColorTokens.contentDefaultOnBgEmphasizedLight,
-        background = backgroundColorTokens.bgPrimaryLight,
-        onBackground = contentColorTokens.contentDefaultLight,
-        surface = elevationColorTokens.elevationRaisedLight,
-        onSurface = contentColorTokens.contentDefaultLight,
-        surfaceVariant = elevationColorTokens.elevationModalLight,
-        onSurfaceVariant = contentColorTokens.contentDefaultLight,
-        surfaceTint = elevationColorTokens.elevationModalLight,
-        inverseSurface = elevationColorTokens.elevationRaisedDark,
-        inverseOnSurface = contentColorTokens.contentDefaultDark,
-        error = backgroundColorTokens.bgStatusNegativeMutedLight,
-        onError = contentColorTokens.contentOnActionNegativeLight,
-        errorContainer = backgroundColorTokens.bgStatusNegativeEmphasizedLight,
-        onErrorContainer = contentColorTokens.contentOnActionDisabledOnBgEmphasizedLight,
-        outline = borderColorTokens.borderBrandPrimaryLight,
-        outlineVariant = borderColorTokens.borderBrandPrimaryLight,
-        scrim = contentColorTokens.contentBrandPrimaryLight,
+        primary = brandColorTokens.brandNeutralEmphasizedBlackLight,
+        onPrimary = brandColorTokens.brandNeutralMutedLowerLight,
+        primaryContainer = brandColorTokens.brandNeutralEmphasizedBlackLight,
+        onPrimaryContainer = brandColorTokens.brandNeutralMutedWhiteLight,
+        secondary = brandColorTokens.brandNeutralEmphasizedBlackLight,
+        onSecondary = brandColorTokens.brandNeutralMutedLowerLight,
+        secondaryContainer = brandColorTokens.brandNeutralEmphasizedBlackLight,
+        onSecondaryContainer = brandColorTokens.brandNeutralMutedWhiteLight,
+        tertiary = brandColorTokens.brandNeutralMutedWhiteLight,
+        onTertiary = brandColorTokens.brandNeutralEmphasizedBlackLight,
+        tertiaryContainer = brandColorTokens.brandNeutralMutedWhiteLight,
+        onTertiaryContainer = brandColorTokens.brandNeutralEmphasizedBlackLight,
+        error = brandColorTokens.brandNegativeDefaultLight,
+        onError = brandColorTokens.brandNeutralMutedWhiteLight,
+        errorContainer = brandColorTokens.brandNegativeLowestLight,
+        onErrorContainer = brandColorTokens.brandNeutralEmphasizedBlackLight,
+        surfaceDim = brandColorTokens.brandNeutralMutedLowestLight,
+        surface = brandColorTokens.brandNeutralMutedWhiteLight,
+        surfaceBright = brandColorTokens.brandNeutralMutedWhiteLight,
+        onSurface = brandColorTokens.brandNeutralMutedWhiteLight,
+        onSurfaceVariant = brandColorTokens.brandNeutralEmphasizedLowestLight,
+        surfaceContainerLowest = brandColorTokens.brandNeutralMutedWhiteLight,
+        surfaceContainerLow = brandColorTokens.brandNeutralMutedWhiteLight,
+        surfaceContainer = brandColorTokens.brandNeutralMutedLowestLight,
+        surfaceContainerHigh = brandColorTokens.brandNeutralMutedLowestLight,
+        surfaceContainerHighest = brandColorTokens.brandNeutralMutedLowestLight,
+        inverseSurface = brandColorTokens.brandNeutralEmphasizedHighLight,
+        inverseOnSurface = brandColorTokens.brandNeutralMutedWhiteLight,
+        inversePrimary = brandColorTokens.brandNeutralMutedWhiteLight,
+        outline = brandColorTokens.brandNeutralEmphasizedBlackLight,
+        outlineVariant = brandColorTokens.brandNeutralMutedLowLight,
+        scrim = brandColorTokens.brandNeutralEmphasizedBlackLight,
+        background = brandColorTokens.brandNeutralMutedWhiteLight,
+        onBackground = brandColorTokens.brandNeutralMutedWhiteLight,
+        surfaceVariant = brandColorTokens.brandNeutralMutedLowestLight,
+        surfaceTint = brandColorTokens.brandNeutralMutedLowestLight,
     )
 
 val OudsColorSemanticTokens.materialDarkColorScheme: ColorScheme
     get() = darkColorScheme(
-        primary = backgroundColorTokens.bgBrandPrimaryDark,
-        onPrimary = contentColorTokens.contentDefaultDark,
-        primaryContainer = backgroundColorTokens.bgPrimaryDark,
-        onPrimaryContainer = contentColorTokens.contentDefaultDark,
-        inversePrimary = backgroundColorTokens.bgBrandPrimaryLight,
-        secondary = backgroundColorTokens.bgSecondaryDark,
-        onSecondary = elevationColorTokens.elevationDragOnBgSecondaryDark,
-        secondaryContainer = backgroundColorTokens.bgEmphasizedDark,
-        onSecondaryContainer = contentColorTokens.contentDefaultOnBgEmphasizedDark,
-        tertiary = backgroundColorTokens.bgTertiaryDark,
-        onTertiary = contentColorTokens.contentDefaultDark,
-        tertiaryContainer = decorativeColorTokens.decorativeBrandTertiaryDark,
-        onTertiaryContainer = contentColorTokens.contentDefaultOnBgEmphasizedDark,
-        background = backgroundColorTokens.bgPrimaryDark,
-        onBackground = contentColorTokens.contentDefaultDark,
-        surface = elevationColorTokens.elevationRaisedDark,
-        onSurface = contentColorTokens.contentDefaultDark,
-        surfaceVariant = elevationColorTokens.elevationModalDark,
-        onSurfaceVariant = contentColorTokens.contentDefaultDark,
-        surfaceTint = elevationColorTokens.elevationModalDark,
-        inverseSurface = elevationColorTokens.elevationRaisedLight,
-        inverseOnSurface = contentColorTokens.contentDefaultLight,
-        error = backgroundColorTokens.bgStatusNegativeMutedDark,
-        onError = contentColorTokens.contentOnActionNegativeDark,
-        errorContainer = backgroundColorTokens.bgStatusNegativeEmphasizedDark,
-        onErrorContainer = contentColorTokens.contentOnStatusNegativeEmphasizedDark,
-        outline = borderColorTokens.borderBrandPrimaryDark,
-        outlineVariant = borderColorTokens.borderBrandPrimaryDark,
-        scrim = contentColorTokens.contentBrandPrimaryDark,
+        primary = brandColorTokens.brandNeutralMutedLowerDark,
+        onPrimary = brandColorTokens.brandNeutralEmphasizedBlackDark,
+        primaryContainer = brandColorTokens.brandNeutralMutedLowerDark,
+        onPrimaryContainer = brandColorTokens.brandNeutralEmphasizedBlackDark,
+        secondary = brandColorTokens.brandNeutralMutedLowerDark,
+        onSecondary = brandColorTokens.brandNeutralEmphasizedBlackDark,
+        secondaryContainer = brandColorTokens.brandNeutralMutedLowerDark,
+        onSecondaryContainer = brandColorTokens.brandNeutralEmphasizedBlackDark,
+        tertiary = brandColorTokens.brandNeutralEmphasizedHighestDark,
+        onTertiary = brandColorTokens.brandNeutralMutedLowerDark,
+        tertiaryContainer = brandColorTokens.brandNeutralEmphasizedHighestDark,
+        onTertiaryContainer = brandColorTokens.brandNeutralMutedLowerDark,
+        error = brandColorTokens.brandNegativeLowDark,
+        onError = brandColorTokens.brandNeutralEmphasizedBlackDark,
+        errorContainer = brandColorTokens.brandNegativeHighestDark,
+        onErrorContainer = brandColorTokens.brandNeutralMutedLowerDark,
+        surfaceDim = brandColorTokens.brandNeutralEmphasizedHighestDark,
+        surface = brandColorTokens.brandNeutralEmphasizedHighestDark,
+        surfaceBright = brandColorTokens.brandNeutralEmphasizedMediumDark,
+        onSurface = brandColorTokens.brandNeutralMutedLowerDark,
+        onSurfaceVariant = brandColorTokens.brandNeutralMutedMediumDark,
+        surfaceContainerLowest = brandColorTokens.brandNeutralEmphasizedHighestDark,
+        surfaceContainerLow = brandColorTokens.brandNeutralEmphasizedHighestDark,
+        surfaceContainer = brandColorTokens.brandNeutralMutedLowestDark,
+        surfaceContainerHigh = brandColorTokens.brandNeutralMutedLowestDark,
+        surfaceContainerHighest = brandColorTokens.brandNeutralMutedLowestDark,
+        inverseSurface = brandColorTokens.brandNeutralMutedLowerDark,
+        inverseOnSurface = brandColorTokens.brandNeutralEmphasizedBlackDark,
+        inversePrimary = brandColorTokens.brandNeutralEmphasizedBlackDark,
+        outline = brandColorTokens.brandNeutralMutedLowerDark,
+        outlineVariant = brandColorTokens.brandNeutralEmphasizedLowestDark,
+        scrim = brandColorTokens.brandNeutralEmphasizedBlackDark,
+        background = brandColorTokens.brandNeutralEmphasizedHighestDark,
+        onBackground = brandColorTokens.brandNeutralMutedLowerDark,
+        surfaceVariant = brandColorTokens.brandNeutralMutedLowestDark,
+        surfaceTint = brandColorTokens.brandNeutralMutedLowestDark,
     )
 
 /**

From 08bdd3c6f3a37132f6d251bd3d9fcea2edb0f406 Mon Sep 17 00:00:00 2001
From: Pauline Auvray <pauline.auvray@orange.com>
Date: Wed, 20 Nov 2024 11:35:33 +0100
Subject: [PATCH 4/4] Fix elevated card text

---
 .../com/orange/ouds/app/ui/about/AboutM3ComponentsScreen.kt     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/src/main/java/com/orange/ouds/app/ui/about/AboutM3ComponentsScreen.kt b/app/src/main/java/com/orange/ouds/app/ui/about/AboutM3ComponentsScreen.kt
index b904600f..49394e60 100644
--- a/app/src/main/java/com/orange/ouds/app/ui/about/AboutM3ComponentsScreen.kt
+++ b/app/src/main/java/com/orange/ouds/app/ui/about/AboutM3ComponentsScreen.kt
@@ -423,7 +423,7 @@ private fun CardsSample() {
         }
 
         ElevatedCard(modifier = Modifier.fillMaxWidth().height(cardHeight)) {
-            Box(modifier = Modifier.fillMaxSize()) { Text(text = "Outlined card", modifier = Modifier.align(Alignment.Center)) }
+            Box(modifier = Modifier.fillMaxSize()) { Text(text = "Elevated card", modifier = Modifier.align(Alignment.Center)) }
         }
     }
 }