Improve color key tokens organization

Orange-OpenSource · Oct 25, 2024 · f6ee355 · f6ee355
1 parent ee0f866
commit f6ee355
Show file tree

Hide file tree

Showing 15 changed files with 489 additions and 503 deletions.
diff --git a/app/src/main/java/com/orange/ouds/app/ui/MainScreen.kt b/app/src/main/java/com/orange/ouds/app/ui/MainScreen.kt
@@ -57,7 +57,7 @@ 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.OudsColorBackgroundKeyToken
+import com.orange.ouds.theme.tokens.OudsColorKeyToken
 import com.orange.ouds.theme.tokens.OudsSpaceKeyToken
 import com.orange.ouds.theme.whitelabel.WhiteLabelTheme
 
@@ -155,7 +155,7 @@ private fun ChangeThemeDialog(themeManager: ThemeManager, dismissDialog: () -> U
     Dialog(onDismissRequest = dismissDialog) {
         Column(
             modifier = Modifier
-                .background(OudsColorBackgroundKeyToken.Secondary.value)
+                .background(OudsColorKeyToken.Background.Secondary.value)
                 .selectableGroup()
         ) {
             Text(

diff --git a/app/src/main/java/com/orange/ouds/app/ui/TopBar.kt b/app/src/main/java/com/orange/ouds/app/ui/TopBar.kt
@@ -34,7 +34,7 @@ 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.OudsColorContentKeyToken
+import com.orange.ouds.theme.tokens.OudsColorKeyToken
 import com.orange.ouds.theme.tokens.OudsTypographyKeyToken
 
 
@@ -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(OudsColorContentKeyToken.Default.value)
+                        colorFilter = ColorFilter.tint(OudsColorKeyToken.Content.Default.value)
                     )
                 }
             }
         },
         title = {
             Text(
                 text = title,
-                color = OudsColorContentKeyToken.Default.value,
+                color = OudsColorKeyToken.Content.Default.value,
                 modifier = Modifier.semantics { traversalIndex = -1f },
                 style = OudsTypographyKeyToken.HeadingMedium.value
             )

diff --git a/app/src/main/java/com/orange/ouds/app/ui/components/ComponentsScreen.kt b/app/src/main/java/com/orange/ouds/app/ui/components/ComponentsScreen.kt
@@ -30,7 +30,7 @@ import com.orange.ouds.core.component.button.OudsButton
 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.OudsColorBackgroundKeyToken
+import com.orange.ouds.theme.tokens.OudsColorKeyToken
 import com.orange.ouds.theme.tokens.OudsGridKeyToken
 import com.orange.ouds.theme.tokens.OudsSpaceKeyToken
 
@@ -51,7 +51,7 @@ fun ComponentsScreen() {
                     .padding(top = OudsSpaceKeyToken.Fixed.Medium.value)
                     .width(OudsGridKeyToken.Margin.value)
                     .height(OudsGridKeyToken.ColumnGap.value)
-                    .background(OudsColorBackgroundKeyToken.BrandPrimary.value)
+                    .background(OudsColorKeyToken.Background.BrandPrimary.value)
             )
         }
     }

diff --git a/app/src/main/java/com/orange/ouds/app/ui/tokens/TokenCategoryDetailScreen.kt b/app/src/main/java/com/orange/ouds/app/ui/tokens/TokenCategoryDetailScreen.kt
@@ -40,7 +40,7 @@ import com.orange.ouds.core.utilities.OudsPreview
 import com.orange.ouds.foundation.utilities.BasicPreviewParameterProvider
 import com.orange.ouds.foundation.utilities.UiModePreviews
 import com.orange.ouds.theme.OudsBorderStyle
-import com.orange.ouds.theme.tokens.OudsColorContentKeyToken
+import com.orange.ouds.theme.tokens.OudsColorKeyToken
 import com.orange.ouds.theme.tokens.OudsSpaceKeyToken
 import com.orange.ouds.theme.tokens.OudsTypographyKeyToken
 
@@ -109,7 +109,7 @@ fun TokenCategoryDetailScreen(tokenCategory: TokenCategory, onSubcategoryClick:
                                     maxLines = 1,
                                     overflow = TextOverflow.Ellipsis,
                                     style = OudsTypographyKeyToken.BodyDefaultMedium.value,
-                                    color = OudsColorContentKeyToken.Muted.value
+                                    color = OudsColorKeyToken.Content.Muted.value
                                 )
                             }
                         } else {
@@ -143,7 +143,7 @@ fun TokenCategoryDetailScreen(tokenCategory: TokenCategory, onSubcategoryClick:
                                         text = token.literalValue,
                                         maxLines = 1,
                                         overflow = TextOverflow.Ellipsis,
-                                        style = OudsTypographyKeyToken.BodyDefaultMedium.value.copy(color = OudsColorContentKeyToken.Muted.value)
+                                        style = OudsTypographyKeyToken.BodyDefaultMedium.value.copy(color = OudsColorKeyToken.Content.Muted.value)
                                     )
                                 }
                             }

diff --git a/app/src/main/java/com/orange/ouds/app/ui/tokens/TokenProperty.kt b/app/src/main/java/com/orange/ouds/app/ui/tokens/TokenProperty.kt
@@ -43,7 +43,7 @@ import com.orange.ouds.foundation.extensions.orElse
 import com.orange.ouds.theme.tokens.OudsBorderRadiusKeyToken
 import com.orange.ouds.theme.tokens.OudsBorderStyleKeyToken
 import com.orange.ouds.theme.tokens.OudsBorderWidthKeyToken
-import com.orange.ouds.theme.tokens.OudsColorBackgroundKeyToken
+import com.orange.ouds.theme.tokens.OudsColorKeyToken
 import com.orange.ouds.theme.tokens.OudsElevationKeyToken
 import com.orange.ouds.theme.tokens.OudsGridKeyToken
 import com.orange.ouds.theme.tokens.OudsOpacityKeyToken
@@ -77,7 +77,7 @@ sealed class TokenProperty(
         @Composable
         fun Illustration(elevation: Dp) {
             Surface(shadowElevation = elevation) {
-                IllustrationBox(backgroundColor = OudsColorBackgroundKeyToken.Secondary.value)
+                IllustrationBox(backgroundColor = OudsColorKeyToken.Background.Secondary.value)
             }
         }
     }

diff --git a/app/src/main/java/com/orange/ouds/app/ui/tokens/TokenPropertyIllustration.kt b/app/src/main/java/com/orange/ouds/app/ui/tokens/TokenPropertyIllustration.kt
@@ -40,17 +40,15 @@ import com.orange.ouds.core.theme.value
 import com.orange.ouds.theme.OudsBorderStyle
 import com.orange.ouds.theme.dashedBorder
 import com.orange.ouds.theme.dottedBorder
-import com.orange.ouds.theme.tokens.OudsColorAlwaysKeyToken
-import com.orange.ouds.theme.tokens.OudsColorBackgroundKeyToken
-import com.orange.ouds.theme.tokens.OudsColorContentKeyToken
+import com.orange.ouds.theme.tokens.OudsColorKeyToken
 import com.orange.ouds.theme.tokens.OudsSpaceKeyToken
 
 private val defaultIllustrationSize = 64.dp
 
 @Composable
 fun IllustrationBox(
     modifier: Modifier = Modifier,
-    backgroundColor: Color = OudsColorBackgroundKeyToken.Emphasized.value,
+    backgroundColor: Color = OudsColorKeyToken.Background.Emphasized.value,
     contentAlignment: Alignment = Alignment.TopStart,
     content: @Composable BoxScope.() -> Unit = { }
 ) {
@@ -70,14 +68,14 @@ fun BorderIllustrationBox(
     shape: Shape = RectangleShape,
     style: OudsBorderStyle = OudsBorderStyle.Solid
 ) {
-    val borderColor = OudsColorContentKeyToken.Default.value
+    val borderColor = OudsColorKeyToken.Content.Default.value
     val modifier = when (style) {
         OudsBorderStyle.None -> Modifier
         OudsBorderStyle.Solid -> Modifier.border(width = width, color = borderColor, shape = shape)
         OudsBorderStyle.Dashed -> Modifier.dashedBorder(width = width, color = borderColor, shape = shape)
         OudsBorderStyle.Dotted -> Modifier.dottedBorder(width = width, color = borderColor, shape = shape)
     }
-    IllustrationBox(modifier = modifier, backgroundColor = OudsColorBackgroundKeyToken.Secondary.value)
+    IllustrationBox(modifier = modifier, backgroundColor = OudsColorKeyToken.Background.Secondary.value)
 }
 
 @Composable
@@ -97,7 +95,7 @@ fun SpaceIllustrationBox(
     }
     IllustrationBox(contentAlignment = contentAlignment) {
         Box(
-            modifier = dimensionBoxModifier.background(color = OudsColorAlwaysKeyToken.Info.value)
+            modifier = dimensionBoxModifier.background(color = OudsColorKeyToken.Always.Info.value)
         )
     }
 }
@@ -116,14 +114,14 @@ fun SpacePaddingInlineWithImageIllustrationRow(
     Row(
         modifier = modifier
             .size(defaultIllustrationSize)
-            .background(color = OudsColorBackgroundKeyToken.Emphasized.value),
+            .background(color = OudsColorKeyToken.Background.Emphasized.value),
         verticalAlignment = Alignment.CenterVertically
     ) {
         Box(
             modifier = Modifier
                 .fillMaxHeight()
                 .width(width = spaceSize)
-                .background(color = OudsColorAlwaysKeyToken.Info.value)
+                .background(color = OudsColorKeyToken.Always.Info.value)
         )
         Image(
             modifier = imageModifier,
@@ -140,7 +138,7 @@ fun GridIllustrations() {
         modifier = Modifier
             .fillMaxWidth()
             .padding(horizontal = OudsSpaceKeyToken.Fixed.Medium.value)
-            .background(OudsColorBackgroundKeyToken.Emphasized.value),
+            .background(OudsColorKeyToken.Background.Emphasized.value),
         painter = painterResource(id = R.drawable.il_tokens_grid_column_margin),
         contentDescription = null
     )
@@ -149,7 +147,7 @@ fun GridIllustrations() {
             .fillMaxWidth()
             .padding(horizontal = OudsSpaceKeyToken.Fixed.Medium.value)
             .padding(top = OudsSpaceKeyToken.Fixed.Medium.value)
-            .background(OudsColorBackgroundKeyToken.Emphasized.value),
+            .background(OudsColorKeyToken.Background.Emphasized.value),
         painter = painterResource(id = R.drawable.il_tokens_grid_min_width),
         contentDescription = null
     )
@@ -158,7 +156,7 @@ fun GridIllustrations() {
             .fillMaxWidth()
             .padding(horizontal = OudsSpaceKeyToken.Fixed.Medium.value)
             .padding(top = OudsSpaceKeyToken.Fixed.Medium.value)
-            .background(OudsColorBackgroundKeyToken.Emphasized.value),
+            .background(OudsColorKeyToken.Background.Emphasized.value),
         painter = painterResource(id = R.drawable.il_tokens_grid_max_width),
         contentDescription = null
     )

diff --git a/app/src/main/java/com/orange/ouds/app/ui/utilities/composable/DetailScreenHeader.kt b/app/src/main/java/com/orange/ouds/app/ui/utilities/composable/DetailScreenHeader.kt
@@ -32,8 +32,7 @@ import com.orange.ouds.app.R
 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.OudsColorBackgroundKeyToken
-import com.orange.ouds.theme.tokens.OudsColorContentKeyToken
+import com.orange.ouds.theme.tokens.OudsColorKeyToken
 import com.orange.ouds.theme.tokens.OudsSpaceKeyToken
 import com.orange.ouds.theme.tokens.OudsTypographyKeyToken
 
@@ -45,12 +44,12 @@ fun DetailScreenHeader(
     Column {
         Image(
             painter = painterResource(imageRes),
-            colorFilter = ColorFilter.tint(OudsColorContentKeyToken.DefaultOnBgEmphasized.value),
+            colorFilter = ColorFilter.tint(OudsColorKeyToken.Content.DefaultOnBgEmphasized.value),
             contentDescription = null,
             modifier = Modifier
                 .fillMaxWidth()
                 .height(186.dp)
-                .background(OudsColorBackgroundKeyToken.Emphasized.value),
+                .background(OudsColorKeyToken.Background.Emphasized.value),
             contentScale = ContentScale.None
         )
 
@@ -69,7 +68,7 @@ private fun DetailScreenDescription(
     Text(
         modifier = modifier,
         text = stringResource(descriptionRes),
-        color = OudsColorContentKeyToken.Default.value,
+        color = OudsColorKeyToken.Content.Default.value,
         style = OudsTypographyKeyToken.BodyDefaultLarge.value
     )
 }

diff --git a/app/src/main/java/com/orange/ouds/app/ui/utilities/composable/LargeCard.kt b/app/src/main/java/com/orange/ouds/app/ui/utilities/composable/LargeCard.kt
@@ -34,9 +34,7 @@ import com.orange.ouds.app.R
 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.OudsColorBackgroundKeyToken
-import com.orange.ouds.theme.tokens.OudsColorContentKeyToken
-import com.orange.ouds.theme.tokens.OudsColorElevationKeyToken
+import com.orange.ouds.theme.tokens.OudsColorKeyToken
 import com.orange.ouds.theme.tokens.OudsElevationKeyToken
 import com.orange.ouds.theme.tokens.OudsSpaceKeyToken
 import com.orange.ouds.theme.tokens.OudsTypographyKeyToken
@@ -52,23 +50,23 @@ fun LargeCard(
     modifier: Modifier = Modifier,
 ) {
     Card(modifier = modifier, shape = RectangleShape, elevation = cardElevation(defaultElevation = OudsElevationKeyToken.Raised.value), onClick = onClick) {
-        Column(modifier = Modifier.background(OudsColorElevationKeyToken.Raised.value)) {
+        Column(modifier = Modifier.background(OudsColorKeyToken.Elevation.Raised.value)) {
             Image(
                 painter = painterResource(imageRes),
-                colorFilter = ColorFilter.tint(OudsColorContentKeyToken.DefaultOnBgEmphasized.value),
+                colorFilter = ColorFilter.tint(OudsColorKeyToken.Content.DefaultOnBgEmphasized.value),
                 contentDescription = null,
                 modifier = Modifier
                     .fillMaxWidth()
                     .height(184.dp)
-                    .background(OudsColorBackgroundKeyToken.Emphasized.value),
+                    .background(OudsColorKeyToken.Background.Emphasized.value),
                 contentScale = ContentScale.None
             )
             Column(
                 modifier = Modifier.padding(OudsSpaceKeyToken.Fixed.Medium.value)
             ) {
                 Text(
                     text = title,
-                    color = OudsColorContentKeyToken.Default.value,
+                    color = OudsColorKeyToken.Content.Default.value,
                     overflow = TextOverflow.Ellipsis,
                     maxLines = 1,
                     style = OudsTypographyKeyToken.HeadingMedium.value

diff --git a/app/src/main/java/com/orange/ouds/app/ui/utilities/composable/Screen.kt b/app/src/main/java/com/orange/ouds/app/ui/utilities/composable/Screen.kt
@@ -20,14 +20,14 @@ import androidx.compose.ui.Modifier
 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.OudsColorBackgroundKeyToken
+import com.orange.ouds.theme.tokens.OudsColorKeyToken
 
 @Composable
 fun Screen(content: @Composable () -> Unit) {
     Box(
         modifier = Modifier
             .fillMaxSize()
-            .background(OudsColorBackgroundKeyToken.Primary.value)
+            .background(OudsColorKeyToken.Background.Primary.value)
     ) {
         content()
     }

diff --git a/core/src/main/java/com/orange/ouds/core/component/button/OudsButton.kt b/core/src/main/java/com/orange/ouds/core/component/button/OudsButton.kt
@@ -28,7 +28,7 @@ import com.orange.ouds.core.theme.value
 import com.orange.ouds.core.utilities.OudsPreview
 import com.orange.ouds.foundation.utilities.BasicPreviewParameterProvider
 import com.orange.ouds.foundation.utilities.UiModePreviews
-import com.orange.ouds.theme.tokens.OudsColorContentKeyToken
+import com.orange.ouds.theme.tokens.OudsColorKeyToken
 
 @Composable
 fun OudsButton(
@@ -66,7 +66,7 @@ fun OudsButton(
                 modifier = modifier,
                 text = text,
                 style = labelStyle.value,
-                color = OudsColorContentKeyToken.OnActionPrimaryEnabled.value
+                color = OudsColorKeyToken.Content.OnActionPrimaryEnabled.value
             )
         }
     }