feat: add color tokens

NOTICE.txt

@@ -11,14 +11,47 @@ Any use or displaying shall constitute an infringement under intellectual proper
 app/src/main/res/drawable/ic_border.xml
 app/src/main/res/drawable/ic_component_atom.xml
 app/src/main/res/drawable/ic_design_token_figma.xml
+app/src/main/res/drawable/ic_design_token_figma_no_padding.xml
+app/src/main/res/drawable/ic_dimension.xml
 app/src/main/res/drawable/ic_filter_effects.xml
 app/src/main/res/drawable/ic_info.xml
 app/src/main/res/drawable/ic_layers.xml
+app/src/main/res/drawable/ic_menu_grid.xml
 app/src/main/res/drawable/ic_solar_palette.xml
 app/src/main/res/drawable/ic_typography.xml
 app/src/main/res/drawable/ic_ui_dark_mode.xml
 app/src/main/res/drawable/ic_ui_light_mode.xml
 app/src/main/res/drawable/il_opacity_union.xml
+app/src/main/res/drawable-hdpi/il_tokens_grid_column_margin.png
+app/src/main/res/drawable-hdpi/il_tokens_grid_max_width.png
+app/src/main/res/drawable-hdpi/il_tokens_grid_min_width.png
+app/src/main/res/drawable-mdpi/il_tokens_grid_column_margin.png
+app/src/main/res/drawable-mdpi/il_tokens_grid_max_width.png
+app/src/main/res/drawable-mdpi/il_tokens_grid_min_width.png
+app/src/main/res/drawable-xhdpi/il_tokens_grid_column_margin.png
+app/src/main/res/drawable-xhdpi/il_tokens_grid_max_width.png
+app/src/main/res/drawable-xhdpi/il_tokens_grid_min_width.png
+app/src/main/res/drawable-xxhdpi/il_tokens_grid_column_margin.png
+app/src/main/res/drawable-xxhdpi/il_tokens_grid_max_width.png
+app/src/main/res/drawable-xxhdpi/il_tokens_grid_min_width.png
+app/src/main/res/drawable-xxxhdpi/il_tokens_grid_column_margin.png
+app/src/main/res/drawable-xxxhdpi/il_tokens_grid_max_width.png
+app/src/main/res/drawable-xxxhdpi/il_tokens_grid_min_width.png
+app/src/main/res/drawable-night-hdpi/il_tokens_grid_column_margin.png
+app/src/main/res/drawable-night-hdpi/il_tokens_grid_max_width.png
+app/src/main/res/drawable-night-hdpi/il_tokens_grid_min_width.png
+app/src/main/res/drawable-night-mdpi/il_tokens_grid_column_margin.png
+app/src/main/res/drawable-night-mdpi/il_tokens_grid_max_width.png
+app/src/main/res/drawable-night-mdpi/il_tokens_grid_min_width.png
+app/src/main/res/drawable-night-xhdpi/il_tokens_grid_column_margin.png
+app/src/main/res/drawable-night-xhdpi/il_tokens_grid_max_width.png
+app/src/main/res/drawable-night-xhdpi/il_tokens_grid_min_width.png
+app/src/main/res/drawable-night-xxhdpi/il_tokens_grid_column_margin.png
+app/src/main/res/drawable-night-xxhdpi/il_tokens_grid_max_width.png
+app/src/main/res/drawable-night-xxhdpi/il_tokens_grid_min_width.png
+app/src/main/res/drawable-night-xxxhdpi/il_tokens_grid_column_margin.png
+app/src/main/res/drawable-night-xxxhdpi/il_tokens_grid_max_width.png
+app/src/main/res/drawable-night-xxxhdpi/il_tokens_grid_min_width.png
 
 docs/images/favicon-16x16.png
 docs/images/orange-logo.svg

app/src/main/java/com/orange/ouds/app/ui/MainScreen.kt

@@ -49,13 +49,16 @@ import com.orange.ouds.app.R
 import com.orange.ouds.app.ui.navigation.appNavGraph
 import com.orange.ouds.app.ui.utilities.isDarkModeEnabled
 import com.orange.ouds.core.theme.OudsTheme
+import com.orange.ouds.core.theme.value
 import com.orange.ouds.core.utilities.OudsPreview
 import com.orange.ouds.foundation.extensions.orElse
 import com.orange.ouds.foundation.utilities.UiModePreviews
 import com.orange.ouds.theme.OudsThemeContract
 import com.orange.ouds.theme.orange.ORANGE_THEME_NAME
 import com.orange.ouds.theme.orange.OrangeTheme
 import com.orange.ouds.theme.orangecountry.OrangeCountryTheme
+import com.orange.ouds.theme.tokens.OudsColorKeyToken
+import com.orange.ouds.theme.tokens.OudsSpaceKeyToken
 import com.orange.ouds.theme.whitelabel.WhiteLabelTheme
 
 @Composable
@@ -152,15 +155,14 @@ private fun ChangeThemeDialog(themeManager: ThemeManager, dismissDialog: () -> U
     Dialog(onDismissRequest = dismissDialog) {
         Column(
             modifier = Modifier
-                .background(OudsTheme.colorScheme.surfaceVariant)
+                .background(OudsColorKeyToken.Background.Secondary.value)
                 .selectableGroup()
         ) {
-            //TODO Replace hard coded values by tokens when available and use OUDS typography
             Text(
                 text = stringResource(R.string.app_themeDialog_label),
                 modifier = Modifier
-                    .padding(top = 16.dp, bottom = 8.dp)
-                    .padding(horizontal = 16.dp),
+                    .padding(top = OudsSpaceKeyToken.Fixed.Medium.value, bottom = OudsSpaceKeyToken.Fixed.Short.value)
+                    .padding(horizontal = OudsSpaceKeyToken.Fixed.Medium.value),
                 style = MaterialTheme.typography.titleLarge
             )
             themeManager.availableThemes.forEach { theme ->
@@ -180,7 +182,7 @@ private fun ChangeThemeDialog(themeManager: ThemeManager, dismissDialog: () -> U
                             },
                             role = Role.RadioButton
                         )
-                        .padding(horizontal = 16.dp),
+                        .padding(horizontal = OudsSpaceKeyToken.Fixed.Medium.value),
                     verticalAlignment = Alignment.CenterVertically
                 ) {
                     RadioButton(
@@ -190,7 +192,7 @@ private fun ChangeThemeDialog(themeManager: ThemeManager, dismissDialog: () -> U
                     Text(
                         text = theme.name,
                         style = MaterialTheme.typography.bodyLarge,
-                        modifier = Modifier.padding(start = 16.dp)
+                        modifier = Modifier.padding(start = OudsSpaceKeyToken.Fixed.Medium.value)
                     )
                 }
             }

app/src/main/java/com/orange/ouds/app/ui/TopBar.kt

@@ -34,8 +34,8 @@ import com.orange.ouds.app.ui.utilities.isDarkModeEnabled
 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.OudsColorKeyToken
 import com.orange.ouds.theme.tokens.OudsTypographyKeyToken
-import com.orange.ouds.theme.tokens.semantic.OudsColorKeyToken
 
 
 @Composable
@@ -70,15 +70,15 @@ private fun TopBar(
                     Image(
                         imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                         contentDescription = stringResource(id = R.string.app_common_back_a11y),
-                        colorFilter = ColorFilter.tint(OudsColorKeyToken.OnSurface.value) //TODO use ContentDefault token when available
+                        colorFilter = ColorFilter.tint(OudsColorKeyToken.Content.Default.value)
                     )
                 }
             }
         },
         title = {
             Text(
                 text = title,
-                color = OudsColorKeyToken.OnSurface.value, //TODO use ContentDefault token when available
+                color = OudsColorKeyToken.Content.Default.value,
                 modifier = Modifier.semantics { traversalIndex = -1f },
                 style = OudsTypographyKeyToken.HeadingMedium.value
             )

app/src/main/java/com/orange/ouds/app/ui/components/ComponentsScreen.kt

@@ -27,19 +27,18 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 import com.orange.ouds.app.ui.utilities.composable.Screen
 import com.orange.ouds.core.component.button.OudsButton
-import com.orange.ouds.core.theme.OudsTheme
 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.OudsColorKeyToken
 import com.orange.ouds.theme.tokens.OudsGridKeyToken
-import com.orange.ouds.theme.tokens.OudsSpacingFixedKeyToken
+import com.orange.ouds.theme.tokens.OudsSpaceKeyToken
 
 @Composable
 fun ComponentsScreen() {
     Screen {
         Column(
-            modifier = Modifier
-                .fillMaxSize(),
+            modifier = Modifier.fillMaxSize(),
             horizontalAlignment = Alignment.CenterHorizontally,
             verticalArrangement = Arrangement.Center
         ) {
@@ -49,10 +48,10 @@ fun ComponentsScreen() {
 
             Box(
                 modifier = Modifier
-                    .padding(top = OudsSpacingFixedKeyToken.Medium.value)
+                    .padding(top = OudsSpaceKeyToken.Fixed.Medium.value)
                     .width(OudsGridKeyToken.Margin.value)
                     .height(OudsGridKeyToken.ColumnGap.value)
-                    .background(OudsTheme.colorScheme.primary)
+                    .background(OudsColorKeyToken.Background.BrandPrimary.value)
             )
         }
     }

app/src/main/java/com/orange/ouds/app/ui/navigation/AppNavGraph.kt

@@ -28,7 +28,7 @@ import com.orange.ouds.app.ui.tokens.addTokensNavGraph
  * Root navigation graph of the application
  */
 fun NavGraphBuilder.appNavGraph(navController: NavController) {
-    addTokensNavGraph()
+    addTokensNavGraph(navController)
     addAboutNavGraph()
     addBottomBarNavGraph(navController)
 }
@@ -38,7 +38,7 @@ fun NavGraphBuilder.appNavGraph(navController: NavController) {
  */
 private fun NavGraphBuilder.addBottomBarNavGraph(navController: NavController) {
     composable(BottomBarItem.Tokens.route) { from ->
-        TokensScreen(onTokenClick = { id -> navController.navigateToElement(TokensNavigation.TokenCategoryDetailRoute, id, from) })
+        TokensScreen(onTokenCategoryClick = { id -> navController.navigateToElement(TokensNavigation.TokenCategoryDetailRoute, id, from) })
     }
     composable(BottomBarItem.Components.route) { _ ->
         ComponentsScreen()

app/src/main/java/com/orange/ouds/app/ui/tokens/Token.kt

@@ -0,0 +1,30 @@
+/*
+ * 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.tokens
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.unit.Dp
+import com.orange.ouds.app.R
+
+data class Token<T>(val name: String, val value: T) {
+    val literalValue: String
+        @Composable
+        get() = when (value) {
+            is Float -> stringResource(id = R.string.app_tokens_floatFormat_label, value)
+            is Dp -> stringResource(id = R.string.app_tokens_dpFormat_label, value.toString().replace(".0.dp", "").substringBeforeLast(".dp"))
+            is TextStyle -> stringResource(id = R.string.app_tokens_spFormat_label, value.fontSize.toString().replace(".0.sp", "").substringBeforeLast(".sp"))
+            else -> value.toString()
+        }
+}