Refactor OudsBorders, OudsColorScheme, OudsSizes and OudsTypography

Orange-OpenSource · Jan 9, 2025 · 17a2b0b · 17a2b0b
1 parent 75be6f9
commit 17a2b0b
Show file tree

Hide file tree

Showing 18 changed files with 1,318 additions and 949 deletions.
diff --git a/app/src/main/java/com/orange/ouds/app/ui/BottomBar.kt b/app/src/main/java/com/orange/ouds/app/ui/BottomBar.kt
@@ -31,7 +31,7 @@ import com.orange.ouds.foundation.utilities.UiModePreviews
 fun BottomBar(currentRoute: String, navigateToRoute: (String) -> Unit) {
     val items = BottomBarItem.entries.toTypedArray()
     NavigationBar(
-        containerColor = OudsTheme.colorScheme.backgroundColors.secondary, //TODO Temporary color. Waiting for Material colors from Maxime.
+        containerColor = OudsTheme.colorScheme.background.secondary, //TODO Temporary color. Waiting for Material colors from Maxime.
         content = {
             items.forEach { item ->
                 NavigationBarItem(

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
@@ -152,7 +152,7 @@ private fun ChangeThemeDialog(themeManager: ThemeManager, dismissDialog: () -> U
     Dialog(onDismissRequest = dismissDialog) {
         Column(
             modifier = Modifier
-                .background(OudsTheme.colorScheme.backgroundColors.secondary)
+                .background(OudsTheme.colorScheme.background.secondary)
                 .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
@@ -68,17 +68,17 @@ private fun TopBar(
                     Image(
                         imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                         contentDescription = stringResource(id = R.string.app_common_back_a11y),
-                        colorFilter = ColorFilter.tint(OudsTheme.colorScheme.contentColors.default)
+                        colorFilter = ColorFilter.tint(OudsTheme.colorScheme.content.default)
                     )
                 }
             }
         },
         title = {
             Text(
                 text = title,
-                color = OudsTheme.colorScheme.contentColors.default,
+                color = OudsTheme.colorScheme.content.default,
                 modifier = Modifier.semantics { traversalIndex = -1f },
-                style = OudsTheme.typography.headingMedium
+                style = OudsTheme.typography.heading.medium
             )
         },
         actions = {

diff --git a/app/src/main/java/com/orange/ouds/app/ui/components/button/ButtonDemoScreen.kt b/app/src/main/java/com/orange/ouds/app/ui/components/button/ButtonDemoScreen.kt
@@ -98,7 +98,7 @@ fun ButtonDemoScreen() = DemoScreen(rememberButtonDemoState()) {
 private fun ButtonDemo(state: ButtonDemoState) {
     Box(
         modifier = Modifier
-            .background(OudsTheme.colorScheme.backgroundColors.primary)
+            .background(OudsTheme.colorScheme.background.primary)
             .padding(all = OudsTheme.spaces.fixed.medium)
             .fillMaxWidth(),
         contentAlignment = Alignment.Center

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
@@ -110,7 +110,7 @@ fun TokenCategoryDetailScreen(tokenCategory: TokenCategory<*>, onSubcategoryClic
                             text = stringResource(id = subcategory.nameRes),
                             maxLines = 1,
                             overflow = TextOverflow.Ellipsis,
-                            style = OudsTheme.typography.headingMedium
+                            style = OudsTheme.typography.heading.medium
                         )
                     }
                 }
@@ -124,16 +124,16 @@ fun TokenCategoryDetailScreen(tokenCategory: TokenCategory<*>, onSubcategoryClic
                             Text(
                                 modifier = Modifier
                                     .fillMaxWidth()
-                                    .background(color = OudsTheme.colorScheme.backgroundColors.primary)
+                                    .background(color = OudsTheme.colorScheme.background.primary)
                                     .padding(all = OudsTheme.spaces.fixed.medium)
                                     .semantics {
                                         heading()
                                     },
                                 text = stringResource(id = tokenProperty.nameRes),
-                                color = OudsTheme.colorScheme.contentColors.default,
+                                color = OudsTheme.colorScheme.content.default,
                                 maxLines = 1,
                                 overflow = TextOverflow.Ellipsis,
-                                style = OudsTheme.typography.headingMedium
+                                style = OudsTheme.typography.heading.medium
                             )
                         }
                     }
@@ -199,15 +199,15 @@ private fun TokenRow(tokenProperty: TokenProperty<out TokenCategory<*>>, token:
                 style = if (tokenProperty == TokenProperty.Typography) {
                     token.value() as TextStyle
                 } else {
-                    OudsTheme.typography.bodyStrongLarge
+                    OudsTheme.typography.body.strong.large
                 }
             )
             Text(
                 modifier = Modifier.fillMaxWidth(),
                 text = token.literalValue,
                 maxLines = 1,
                 overflow = TextOverflow.Ellipsis,
-                style = OudsTheme.typography.bodyDefaultMedium.copy(color = OudsTheme.colorScheme.contentColors.muted)
+                style = OudsTheme.typography.body.default.medium.copy(color = OudsTheme.colorScheme.content.muted)
             )
         }
     }
@@ -284,22 +284,22 @@ private fun CodeColumn(codeExample: String, modifier: Modifier = Modifier) {
             ) {
                 Text(
                     text = stringResource(R.string.app_tokens_viewCodeExample_label),
-                    style = OudsTheme.typography.labelStrongLarge,
-                    color = OudsTheme.colorScheme.contentColors.default
+                    style = OudsTheme.typography.label.strong.large,
+                    color = OudsTheme.colorScheme.content.default
                 )
                 Icon(
                     modifier = Modifier.rotate(linkArrowRotation),
                     painter = painterResource(R.drawable.ic_chevron_down),
-                    tint = OudsTheme.colorScheme.contentColors.brandPrimary,
+                    tint = OudsTheme.colorScheme.content.brandPrimary,
                     contentDescription = null
                 )
             }
         }
         AnimatedVisibility(visible = isExpanded, enter = fadeIn(tween(delayMillis = 150)) + expandVertically()) {
             Box(
                 modifier = Modifier
-                    .background(color = OudsTheme.colorScheme.backgroundColors.secondary)
-                    .border(width = 1.dp, color = OudsTheme.colorScheme.borderColors.default, shape = RectangleShape)
+                    .background(color = OudsTheme.colorScheme.background.secondary)
+                    .border(width = 1.dp, color = OudsTheme.colorScheme.border.default, shape = RectangleShape)
             ) {
                 Row(
                     horizontalArrangement = Arrangement.spacedBy(OudsTheme.spaces.fixed.short),
@@ -311,7 +311,7 @@ private fun CodeColumn(codeExample: String, modifier: Modifier = Modifier) {
                             .padding(vertical = OudsTheme.spaces.fixed.medium)
                             .padding(start = OudsTheme.spaces.fixed.medium),
                         text = codeExample, style = TextStyle(fontFamily = FontFamily.Monospace),
-                        color = OudsTheme.colorScheme.contentColors.default
+                        color = OudsTheme.colorScheme.content.default
                     )
                     IconButton(onClick = { copyCodeToClipboard(context, codeExample, clipboardManager) }) {
                         Icon(painter = painterResource(R.drawable.ic_copy), contentDescription = stringResource(R.string.app_common_copyCode_a11y))

diff --git a/app/src/main/java/com/orange/ouds/app/ui/tokens/TokenPropertyHeader.kt b/app/src/main/java/com/orange/ouds/app/ui/tokens/TokenPropertyHeader.kt
@@ -64,7 +64,7 @@ fun GridHeader(modifier: Modifier = Modifier) {
             Image(
                 modifier = Modifier
                     .fillMaxWidth()
-                    .background(OudsTheme.colorScheme.surfaceColors.statusNeutralMuted),
+                    .background(OudsTheme.colorScheme.surface.status.neutral.muted),
                 painter = painterResource(id = resourceId),
                 contentDescription = null
             )
@@ -80,20 +80,20 @@ fun SizeIconWithTextHeader(
 ) {
     Row(
         modifier = modifier
-            .background(color = OudsTheme.colorScheme.surfaceColors.statusNeutralMuted)
+            .background(color = OudsTheme.colorScheme.surface.status.neutral.muted)
             .padding(all = OudsTheme.spaces.fixed.medium),
         horizontalArrangement = Arrangement.spacedBy(OudsTheme.spaces.fixed.shorter),
         verticalAlignment = Alignment.CenterVertically
     ) {
         Icon(
             modifier = Modifier.size(size),
             painter = painterResource(R.drawable.ic_design_token_figma),
-            tint = OudsTheme.colorScheme.contentColors.statusInfo,
+            tint = OudsTheme.colorScheme.content.status.info,
             contentDescription = null
         )
 
         val style = if (LocalInspectionMode.current) {
-            OudsTheme.typography.headingSmall
+            OudsTheme.typography.heading.small
         } else {
             getTokens<OudsTypographyKeyToken>()
                 .asOrNull<List<Token<TextStyle>>>()
@@ -109,7 +109,7 @@ fun SizeIconWithTextHeader(
             maxLines = 1,
             overflow = TextOverflow.Ellipsis,
             style = style,
-            color = OudsTheme.colorScheme.contentColors.default
+            color = OudsTheme.colorScheme.content.default
         )
     }
 }
@@ -121,7 +121,7 @@ fun SpaceHeader(
 ) {
     Box(
         modifier = modifier
-            .background(color = OudsTheme.colorScheme.surfaceColors.statusNeutralMuted)
+            .background(color = OudsTheme.colorScheme.surface.status.neutral.muted)
             .padding(all = OudsTheme.spaces.fixed.medium)
     ) {
         SpaceHeaderContent(spaceTokenProperty = spaceTokenProperty)
@@ -142,9 +142,9 @@ private fun SpaceHeaderContent(spaceTokenProperty: TokenProperty<TokenCategory.D
     }
 
     val modifier = Modifier
-        .dashedBorder(width = dashedBorderWidth, color = OudsTheme.colorScheme.contentColors.default)
+        .dashedBorder(width = dashedBorderWidth, color = OudsTheme.colorScheme.content.default)
         .padding(all = dashedBorderWidth)
-        .background(color = OudsTheme.colorScheme.contentColors.statusInfo)
+        .background(color = OudsTheme.colorScheme.content.status.info)
         .padding(externalSpaceValues)
 
     val column = remember {
@@ -196,11 +196,11 @@ private fun SpaceHeaderText(spaceTokenProperty: TokenProperty<TokenCategory.Dime
     if (textResId != null) {
         Text(
             modifier = modifier
-                .background(color = OudsTheme.colorScheme.backgroundColors.primary)
-                .background(color = OudsTheme.colorScheme.surfaceColors.statusNeutralMuted),
+                .background(color = OudsTheme.colorScheme.background.primary)
+                .background(color = OudsTheme.colorScheme.surface.status.neutral.muted),
             text = stringResource(id = textResId),
-            color = OudsTheme.colorScheme.contentColors.default,
-            style = OudsTheme.typography.bodyDefaultMedium
+            color = OudsTheme.colorScheme.content.default,
+            style = OudsTheme.typography.body.default.medium
         )
     }
 }

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
@@ -47,7 +47,7 @@ private val defaultIllustrationSize = 64.dp
 @Composable
 fun IllustrationBox(
     modifier: Modifier = Modifier,
-    backgroundColor: Color = OudsTheme.colorScheme.surfaceColors.statusNeutralMuted,
+    backgroundColor: Color = OudsTheme.colorScheme.surface.status.neutral.muted,
     contentAlignment: Alignment = Alignment.TopStart,
     content: @Composable BoxScope.() -> Unit = { }
 ) {
@@ -65,9 +65,9 @@ fun BorderIllustrationBox(
     width: Dp = 1.dp,
     shape: Shape = RectangleShape,
     style: OudsBorderStyle = OudsBorderStyle.Solid,
-    backgroundColor: Color = OudsTheme.colorScheme.backgroundColors.secondary
+    backgroundColor: Color = OudsTheme.colorScheme.background.secondary
 ) {
-    val borderColor = OudsTheme.colorScheme.borderColors.emphasized
+    val borderColor = OudsTheme.colorScheme.border.emphasized
     val modifier = when (style) {
         OudsBorderStyle.None -> Modifier
         OudsBorderStyle.Solid -> Modifier.border(width = width, color = borderColor, shape = shape)
@@ -80,7 +80,7 @@ fun BorderIllustrationBox(
 @Composable
 fun ElevationIllustrationSurface(elevation: Dp) {
     Surface(shadowElevation = elevation) {
-        IllustrationBox(backgroundColor = OudsTheme.colorScheme.backgroundColors.secondary)
+        IllustrationBox(backgroundColor = OudsTheme.colorScheme.background.secondary)
     }
 }
 
@@ -105,7 +105,7 @@ fun SizeIconIllustrationBox(size: Dp) {
         Icon(
             modifier = Modifier.size(size),
             painter = painterResource(R.drawable.ic_design_token_figma),
-            tint = OudsTheme.colorScheme.contentColors.statusInfo,
+            tint = OudsTheme.colorScheme.content.status.info,
             contentDescription = null
         )
     }
@@ -118,13 +118,13 @@ fun SpacePaddingInsetIllustrationBox(size: Dp) {
             modifier = Modifier
                 .fillMaxWidth()
                 .height(height = size)
-                .background(OudsTheme.colorScheme.contentColors.statusInfo)
+                .background(OudsTheme.colorScheme.content.status.info)
         )
         Box(
             modifier = Modifier
                 .fillMaxHeight()
                 .width(width = size)
-                .background(OudsTheme.colorScheme.contentColors.statusInfo)
+                .background(OudsTheme.colorScheme.content.status.info)
         )
     }
 }
@@ -146,7 +146,7 @@ fun SpaceIllustrationBox(
     }
     IllustrationBox(contentAlignment = contentAlignment) {
         Box(
-            modifier = dimensionBoxModifier.background(color = OudsTheme.colorScheme.contentColors.statusInfo)
+            modifier = dimensionBoxModifier.background(color = OudsTheme.colorScheme.content.status.info)
         )
     }
 }

diff --git a/app/src/main/java/com/orange/ouds/app/ui/tokens/TokensScreen.kt b/app/src/main/java/com/orange/ouds/app/ui/tokens/TokensScreen.kt
@@ -50,7 +50,7 @@ private fun TokensScreen(tokenCategories: List<TokenCategory<*>>, onTokenCategor
                     title = stringResource(id = token.nameRes),
                     imageRes = token.imageRes,
                     onClick = { onTokenCategoryClick(token.id) },
-                    imageTint = OudsTheme.colorScheme.contentColors.default
+                    imageTint = OudsTheme.colorScheme.content.default
                 )
             }
         }

diff --git a/app/src/main/java/com/orange/ouds/app/ui/utilities/composable/CustomizationBottomSheet.kt b/app/src/main/java/com/orange/ouds/app/ui/utilities/composable/CustomizationBottomSheet.kt
@@ -100,12 +100,12 @@ fun CustomizationBottomSheetScaffold(
                     modifier = Modifier.rotate(angle),
                     painter = painterResource(id = R.drawable.ic_chevron_down),
                     contentDescription = null,
-                    tint = OudsTheme.colorScheme.contentColors.default
+                    tint = OudsTheme.colorScheme.content.default
                 )
                 Text(
                     modifier = Modifier.padding(start = OudsTheme.spaces.fixed.medium),
                     text = stringResource(id = titleResId),
-                    style = OudsTheme.typography.headingMedium
+                    style = OudsTheme.typography.heading.medium
                 )
             }
 
@@ -118,7 +118,7 @@ fun CustomizationBottomSheetScaffold(
             modifier = Modifier
                 .padding(innerPadding)
                 .fillMaxSize()
-                .background(OudsTheme.colorScheme.backgroundColors.primary),
+                .background(OudsTheme.colorScheme.background.primary),
             content = content
         )
     }

diff --git a/app/src/main/java/com/orange/ouds/app/ui/utilities/composable/CustomizationElements.kt b/app/src/main/java/com/orange/ouds/app/ui/utilities/composable/CustomizationElements.kt
@@ -40,7 +40,7 @@ fun CustomizationSwitchListItem(label: String, checked: Boolean, onCheckedChange
         modifier = Modifier
             .fillMaxWidth()
             .clickable(enabled = enabled) { onCheckedChange(!checked) },
-        headlineContent = { Text(text = label, style = OudsTheme.typography.headingMedium) },
+        headlineContent = { Text(text = label, style = OudsTheme.typography.heading.medium) },
         trailingContent = { Switch(checked = checked, onCheckedChange = null, enabled = enabled) }
     )
 }
@@ -54,7 +54,7 @@ fun CustomizationChoiceChipsColumn(
     modifier: Modifier = Modifier
 ) {
     Column(modifier = modifier.fillMaxWidth()) {
-        Text(modifier = Modifier.padding(horizontal = OudsTheme.spaces.fixed.medium), text = label, style = OudsTheme.typography.headingMedium)
+        Text(modifier = Modifier.padding(horizontal = OudsTheme.spaces.fixed.medium), text = label, style = OudsTheme.typography.heading.medium)
         Row(
             Modifier
                 .fillMaxWidth()

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
@@ -41,12 +41,12 @@ fun DetailScreenHeader(
     Column {
         Image(
             painter = painterResource(imageRes),
-            colorFilter = ColorFilter.tint(OudsTheme.colorScheme.contentColors.default),
+            colorFilter = ColorFilter.tint(OudsTheme.colorScheme.content.default),
             contentDescription = null,
             modifier = Modifier
                 .fillMaxWidth()
                 .height(186.dp)
-                .background(OudsTheme.colorScheme.surfaceColors.statusNeutralMuted),
+                .background(OudsTheme.colorScheme.surface.status.neutral.muted),
             contentScale = ContentScale.None
         )
 
@@ -67,8 +67,8 @@ fun DetailScreenDescription(
     Text(
         modifier = modifier,
         text = stringResource(descriptionRes),
-        color = OudsTheme.colorScheme.contentColors.default,
-        style = OudsTheme.typography.bodyDefaultLarge
+        color = OudsTheme.colorScheme.content.default,
+        style = OudsTheme.typography.body.default.large
     )
 }
 

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
@@ -47,33 +47,32 @@ fun LargeCard(
     imageTint: Color? = null
 ) {
     Card(shape = RectangleShape, elevation = cardElevation(defaultElevation = OudsTheme.elevations.raised), onClick = onClick) {
-        Column(modifier = Modifier.background(OudsTheme.colorScheme.backgroundColors.primary)) {
+        Column(modifier = Modifier.background(OudsTheme.colorScheme.background.primary)) {
             Image(
                 painter = painterResource(imageRes),
                 colorFilter = imageTint?.let { ColorFilter.tint(imageTint) },
                 contentDescription = null,
                 modifier = Modifier
                     .fillMaxWidth()
                     .height(184.dp)
-                    .background(OudsTheme.colorScheme.overlayColors.default)
-                    .background(OudsTheme.colorScheme.surfaceColors.statusNeutralMuted),
+                    .background(OudsTheme.colorScheme.overlay.default)
+                    .background(OudsTheme.colorScheme.surface.status.neutral.muted),
                 contentScale = ContentScale.None
             )
             Column(
                 modifier = Modifier
                     .fillMaxWidth()
-                    .background(OudsTheme.colorScheme.overlayColors.default)
+                    .background(OudsTheme.colorScheme.overlay.default)
                     .padding(OudsTheme.spaces.fixed.medium)
             ) {
                 Text(
                     text = title,
-                    color = OudsTheme.colorScheme.contentColors.default,
+                    color = OudsTheme.colorScheme.content.default,
                     overflow = TextOverflow.Ellipsis,
                     maxLines = 1,
-                    style = OudsTheme.typography.headingMedium
+                    style = OudsTheme.typography.heading.medium
                 )
             }
-
         }
     }
 }
@@ -85,6 +84,6 @@ private fun PreviewLargeCard() = OudsPreview {
         title = "Title",
         imageRes = R.drawable.ic_filter_effects,
         onClick = {},
-        imageTint = OudsTheme.colorScheme.contentColors.default
+        imageTint = OudsTheme.colorScheme.content.default
     )
 }