From 6531e3702c70b003139f50712dd99733ec9118b4 Mon Sep 17 00:00:00 2001 From: Pauline Auvray Date: Wed, 16 Oct 2024 09:37:18 +0200 Subject: [PATCH 01/32] Add border tokens in the demo app --- .../main/java/com/orange/ouds/app/ui/tokens/TokenCategory.kt | 2 ++ .../com/orange/ouds/app/ui/tokens/TokenCategoryDetailScreen.kt | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/app/src/main/java/com/orange/ouds/app/ui/tokens/TokenCategory.kt b/app/src/main/java/com/orange/ouds/app/ui/tokens/TokenCategory.kt index 9c53cd9c..3a653d45 100644 --- a/app/src/main/java/com/orange/ouds/app/ui/tokens/TokenCategory.kt +++ b/app/src/main/java/com/orange/ouds/app/ui/tokens/TokenCategory.kt @@ -46,6 +46,8 @@ import com.orange.ouds.theme.tokens.semantic.OudsColorKeyToken val tokenCategories = TokenCategory::class.sealedSubclasses.mapNotNull { it.objectInstance } +private val defaultIllustrationSize = 64.dp + @Immutable sealed class TokenCategory( @StringRes val nameRes: Int, 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 index e0093adc..72a1b8ef 100644 --- 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 @@ -54,7 +54,7 @@ fun TokenCategoryDetailScreen(tokenCategory: TokenCategory) { items(tokenCategory.properties) { tokenProperty -> Spacer(modifier = Modifier.height(OudsSpacingFixedKeyToken.Medium.value)) - + tokenProperty.nameRes?.let { Text( modifier = Modifier From 234a97446a8e0ccd66806cc1b5264c89bc2510ae Mon Sep 17 00:00:00 2001 From: Pauline Auvray Date: Thu, 17 Oct 2024 13:29:04 +0200 Subject: [PATCH 02/32] Review: Change dashedBorder modifier signature --- .../main/java/com/orange/ouds/app/ui/tokens/TokenCategory.kt | 4 ++-- .../orange/ouds/app/ui/tokens/TokenCategoryDetailScreen.kt | 2 +- .../src/main/java/com/orange/ouds/theme/OudsBorderStyle.kt | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/app/src/main/java/com/orange/ouds/app/ui/tokens/TokenCategory.kt b/app/src/main/java/com/orange/ouds/app/ui/tokens/TokenCategory.kt index 3a653d45..11c2dc29 100644 --- a/app/src/main/java/com/orange/ouds/app/ui/tokens/TokenCategory.kt +++ b/app/src/main/java/com/orange/ouds/app/ui/tokens/TokenCategory.kt @@ -111,9 +111,9 @@ sealed class TokenProperty( .size(defaultIllustrationSize) .border( width = 1.dp, - color = OudsColorKeyToken.OnSurface.value, + color = OudsColorKeyToken.OnSurface.value, //TODO use ContentDefault token when available shape = RoundedCornerShape(radius) - ) //TODO use ContentDefault token when available + ) .background(color = OudsColorKeyToken.Surface.value), //TODO use BgDefaultSecondary token when available ) } 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 index 72a1b8ef..e0093adc 100644 --- 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 @@ -54,7 +54,7 @@ fun TokenCategoryDetailScreen(tokenCategory: TokenCategory) { items(tokenCategory.properties) { tokenProperty -> Spacer(modifier = Modifier.height(OudsSpacingFixedKeyToken.Medium.value)) - + tokenProperty.nameRes?.let { Text( modifier = Modifier diff --git a/theme-contract/src/main/java/com/orange/ouds/theme/OudsBorderStyle.kt b/theme-contract/src/main/java/com/orange/ouds/theme/OudsBorderStyle.kt index b02db859..67f75c4e 100644 --- a/theme-contract/src/main/java/com/orange/ouds/theme/OudsBorderStyle.kt +++ b/theme-contract/src/main/java/com/orange/ouds/theme/OudsBorderStyle.kt @@ -27,4 +27,4 @@ enum class OudsBorderStyle { } } } -} +} \ No newline at end of file From db9c8d08b8d82d90f9fb7734746390ecdb87436d Mon Sep 17 00:00:00 2001 From: Pauline Auvray Date: Thu, 17 Oct 2024 13:38:15 +0200 Subject: [PATCH 03/32] Review: Move defaultIllustrationSize variable in the companion object of TokenProperty --- .../main/java/com/orange/ouds/app/ui/tokens/TokenCategory.kt | 2 -- 1 file changed, 2 deletions(-) diff --git a/app/src/main/java/com/orange/ouds/app/ui/tokens/TokenCategory.kt b/app/src/main/java/com/orange/ouds/app/ui/tokens/TokenCategory.kt index 11c2dc29..ee737a08 100644 --- a/app/src/main/java/com/orange/ouds/app/ui/tokens/TokenCategory.kt +++ b/app/src/main/java/com/orange/ouds/app/ui/tokens/TokenCategory.kt @@ -46,8 +46,6 @@ import com.orange.ouds.theme.tokens.semantic.OudsColorKeyToken val tokenCategories = TokenCategory::class.sealedSubclasses.mapNotNull { it.objectInstance } -private val defaultIllustrationSize = 64.dp - @Immutable sealed class TokenCategory( @StringRes val nameRes: Int, From 84c3273f3468889328410e14465c55fda117a5fb Mon Sep 17 00:00:00 2001 From: Pauline Auvray Date: Thu, 17 Oct 2024 16:49:59 +0200 Subject: [PATCH 04/32] Add ic_spacing icon --- NOTICE.txt | 1 + app/src/main/res/drawable/ic_spacing.xml | 13 +++++++++++++ 2 files changed, 14 insertions(+) create mode 100644 app/src/main/res/drawable/ic_spacing.xml diff --git a/NOTICE.txt b/NOTICE.txt index 87a5c90e..9754cb9b 100644 --- a/NOTICE.txt +++ b/NOTICE.txt @@ -16,6 +16,7 @@ app/src/main/res/drawable/ic_info.xml app/src/main/res/drawable/ic_layers.xml app/src/main/res/drawable/ic_solar_palette.xml app/src/main/res/drawable/ic_typography.xml +app/src/main/res/drawable/ic_spacing.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 diff --git a/app/src/main/res/drawable/ic_spacing.xml b/app/src/main/res/drawable/ic_spacing.xml new file mode 100644 index 00000000..135d802a --- /dev/null +++ b/app/src/main/res/drawable/ic_spacing.xml @@ -0,0 +1,13 @@ + + + + + + From 036fa734bde0e3d24b52f6a4833ac0ca54a155c2 Mon Sep 17 00:00:00 2001 From: Pauline Auvray Date: Fri, 18 Oct 2024 15:57:52 +0200 Subject: [PATCH 05/32] Start adding dimension tokens in demo app --- .../ouds/app/ui/navigation/AppNavGraph.kt | 4 +- .../ouds/app/ui/tokens/TokenCategory.kt | 27 +++- .../ui/tokens/TokenCategoryDetailScreen.kt | 118 +++++++++++------- .../ouds/app/ui/tokens/TokensNavGraph.kt | 11 +- .../orange/ouds/app/ui/tokens/TokensScreen.kt | 8 +- app/src/main/res/drawable/ic_spacing.xml | 14 ++- app/src/main/res/values/strings.xml | 12 ++ 7 files changed, 135 insertions(+), 59 deletions(-) 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 fd7fa9c6..1b99d06b 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 @@ -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() diff --git a/app/src/main/java/com/orange/ouds/app/ui/tokens/TokenCategory.kt b/app/src/main/java/com/orange/ouds/app/ui/tokens/TokenCategory.kt index ee737a08..d5e2db7a 100644 --- a/app/src/main/java/com/orange/ouds/app/ui/tokens/TokenCategory.kt +++ b/app/src/main/java/com/orange/ouds/app/ui/tokens/TokenCategory.kt @@ -44,14 +44,16 @@ import com.orange.ouds.theme.tokens.OudsSpacingFixedKeyToken import com.orange.ouds.theme.tokens.OudsTypographyKeyToken import com.orange.ouds.theme.tokens.semantic.OudsColorKeyToken -val tokenCategories = TokenCategory::class.sealedSubclasses.mapNotNull { it.objectInstance } +val tokenCategories = TokenCategory::class.sealedSubclasses.mapNotNull { it.objectInstance }.filter { !it.subcategory } @Immutable sealed class TokenCategory( @StringRes val nameRes: Int, @DrawableRes val imageRes: Int, @StringRes val descriptionRes: Int, - val properties: List + val properties: List = emptyList(), + val subcategories: List = emptyList(), + val subcategory: Boolean = false ) { companion object { @@ -67,6 +69,27 @@ sealed class TokenCategory( listOf(TokenProperty.BorderWidth, TokenProperty.BorderRadius, TokenProperty.BorderStyle) ) + data object Dimension : TokenCategory( + R.string.app_tokens_dimension_label, + R.drawable.ic_spacing, + R.string.app_tokens_dimension_description_text, + subcategories = listOf(Spacing, Size) + ) { + data object Spacing : TokenCategory( + R.string.app_tokens_spacing_label, + R.drawable.ic_spacing, + R.string.app_tokens_spacing_description_text, + subcategory = true + ) + + data object Size : TokenCategory( + R.string.app_tokens_size_label, + R.drawable.ic_spacing, + R.string.app_tokens_size_description_text, + subcategory = true + ) + } + data object Elevation : TokenCategory( R.string.app_tokens_elevation_label, R.drawable.ic_layers, 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 index e0093adc..22f3ed11 100644 --- 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 @@ -12,6 +12,7 @@ package com.orange.ouds.app.ui.tokens +import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.Row @@ -41,7 +42,7 @@ import com.orange.ouds.theme.tokens.OudsTypographyKeyToken import com.orange.ouds.theme.tokens.semantic.OudsColorKeyToken @Composable -fun TokenCategoryDetailScreen(tokenCategory: TokenCategory) { +fun TokenCategoryDetailScreen(tokenCategory: TokenCategory, onSubcategoryClick: (Long) -> Unit) { Screen { LazyColumn(contentPadding = PaddingValues(bottom = OudsSpacingFixedKeyToken.Medium.value)) { @@ -52,61 +53,82 @@ fun TokenCategoryDetailScreen(tokenCategory: TokenCategory) { ) } - items(tokenCategory.properties) { tokenProperty -> - Spacer(modifier = Modifier.height(OudsSpacingFixedKeyToken.Medium.value)) - - tokenProperty.nameRes?.let { - Text( - modifier = Modifier - .fillMaxWidth() - .padding(OudsSpacingFixedKeyToken.Medium.value), - text = stringResource(id = tokenProperty.nameRes), - maxLines = 1, - overflow = TextOverflow.Ellipsis, - style = OudsTypographyKeyToken.HeadingMedium.value - ) - } - - tokenProperty.tokens().forEach { token -> + if (tokenCategory.subcategories.isNotEmpty()) { + items(tokenCategory.subcategories) { subcategory -> Row( modifier = Modifier .fillMaxWidth() - .padding(horizontal = OudsSpacingFixedKeyToken.Medium.value, vertical = OudsSpacingFixedKeyToken.Shorter.value) + .padding(top = OudsSpacingFixedKeyToken.Medium.value) + .clickable { onSubcategoryClick(subcategory.id) } ) { - when (tokenProperty) { - is TokenProperty.BorderWidth -> tokenProperty.Illustration(width = token.value as Dp) - is TokenProperty.BorderRadius -> tokenProperty.Illustration(radius = token.value as Dp) - is TokenProperty.BorderStyle -> tokenProperty.Illustration(style = token.value as OudsBorderStyle) - is TokenProperty.Elevation -> tokenProperty.Illustration(elevation = token.value as Dp) - is TokenProperty.Opacity -> tokenProperty.Illustration(opacity = token.value as Float) - is TokenProperty.Typography -> Unit - } + Text( + modifier = Modifier + .fillMaxWidth() + .padding(OudsSpacingFixedKeyToken.Medium.value), + text = stringResource(id = subcategory.nameRes), + maxLines = 1, + overflow = TextOverflow.Ellipsis, + style = OudsTypographyKeyToken.HeadingMedium.value + ) + } + } + } else { + items(tokenCategory.properties) { tokenProperty -> + Spacer(modifier = Modifier.height(OudsSpacingFixedKeyToken.Medium.value)) - val isTypographyProperty = tokenProperty is TokenProperty.Typography + tokenProperty.nameRes?.let { + Text( + modifier = Modifier + .fillMaxWidth() + .padding(OudsSpacingFixedKeyToken.Medium.value), + text = stringResource(id = tokenProperty.nameRes), + maxLines = 1, + overflow = TextOverflow.Ellipsis, + style = OudsTypographyKeyToken.HeadingMedium.value + ) + } - Column( + tokenProperty.tokens().forEach { token -> + Row( modifier = Modifier - .weight(1f) - .padding(start = if (isTypographyProperty) OudsSpacingFixedKeyToken.None.value else OudsSpacingFixedKeyToken.Medium.value) + .fillMaxWidth() + .padding(horizontal = OudsSpacingFixedKeyToken.Medium.value, vertical = OudsSpacingFixedKeyToken.Shorter.value) ) { - Text( - modifier = Modifier.fillMaxWidth(), - text = token.name, - maxLines = 1, - overflow = TextOverflow.Ellipsis, - style = if (isTypographyProperty) { - token.value as TextStyle - } else { - OudsTypographyKeyToken.BodyStrongLarge.value - } - ) - Text( - modifier = Modifier.fillMaxWidth(), - text = token.literalValue, - maxLines = 1, - overflow = TextOverflow.Ellipsis, - style = OudsTypographyKeyToken.BodyDefaultMedium.value.copy(color = OudsColorKeyToken.Tertiary.value) //TODO use ContentMuted token when available - ) + when (tokenProperty) { + is TokenProperty.BorderWidth -> tokenProperty.Illustration(width = token.value as Dp) + is TokenProperty.BorderRadius -> tokenProperty.Illustration(radius = token.value as Dp) + is TokenProperty.BorderStyle -> tokenProperty.Illustration(style = token.value as OudsBorderStyle) + is TokenProperty.Elevation -> tokenProperty.Illustration(elevation = token.value as Dp) + is TokenProperty.Opacity -> tokenProperty.Illustration(opacity = token.value as Float) + is TokenProperty.Typography -> Unit + } + + val isTypographyProperty = tokenProperty is TokenProperty.Typography + + Column( + modifier = Modifier + .weight(1f) + .padding(start = if (isTypographyProperty) OudsSpacingFixedKeyToken.None.value else OudsSpacingFixedKeyToken.Medium.value) + ) { + Text( + modifier = Modifier.fillMaxWidth(), + text = token.name, + maxLines = 1, + overflow = TextOverflow.Ellipsis, + style = if (isTypographyProperty) { + token.value as TextStyle + } else { + OudsTypographyKeyToken.BodyStrongLarge.value + } + ) + Text( + modifier = Modifier.fillMaxWidth(), + text = token.literalValue, + maxLines = 1, + overflow = TextOverflow.Ellipsis, + style = OudsTypographyKeyToken.BodyDefaultMedium.value.copy(color = OudsColorKeyToken.Tertiary.value) //TODO use ContentMuted token when available + ) + } } } } diff --git a/app/src/main/java/com/orange/ouds/app/ui/tokens/TokensNavGraph.kt b/app/src/main/java/com/orange/ouds/app/ui/tokens/TokensNavGraph.kt index 6dee7e28..aa740dd6 100644 --- a/app/src/main/java/com/orange/ouds/app/ui/tokens/TokensNavGraph.kt +++ b/app/src/main/java/com/orange/ouds/app/ui/tokens/TokensNavGraph.kt @@ -13,17 +13,19 @@ package com.orange.ouds.app.ui.tokens import androidx.compose.runtime.remember +import androidx.navigation.NavController import androidx.navigation.NavGraphBuilder import androidx.navigation.NavType import androidx.navigation.compose.composable import androidx.navigation.navArgument +import com.orange.ouds.app.ui.navigation.navigateToElement object TokensNavigation { const val TokenCategoryDetailRoute = "tokenCategory" const val TokenCategoryIdKey = "tokenCategoryId" } -fun NavGraphBuilder.addTokensNavGraph() { +fun NavGraphBuilder.addTokensNavGraph(navController: NavController) { composable( "${TokensNavigation.TokenCategoryDetailRoute}/{${TokensNavigation.TokenCategoryIdKey}}", arguments = listOf(navArgument(TokensNavigation.TokenCategoryIdKey) { type = NavType.LongType }) @@ -33,7 +35,12 @@ fun NavGraphBuilder.addTokensNavGraph() { val tokenCategory = remember(routeTokenCategoryId) { TokenCategory.fromId(routeTokenCategoryId) } tokenCategory?.let { - TokenCategoryDetailScreen(tokenCategory = tokenCategory) + TokenCategoryDetailScreen( + tokenCategory = tokenCategory, + onSubcategoryClick = { id -> + navController.navigateToElement(TokensNavigation.TokenCategoryDetailRoute, id, from) + } + ) } } } 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 index 78916b4f..487bc2dd 100644 --- 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 @@ -29,15 +29,15 @@ import com.orange.ouds.foundation.utilities.UiModePreviews import com.orange.ouds.theme.tokens.OudsSpacingFixedKeyToken @Composable -fun TokensScreen(onTokenClick: (Long) -> Unit) { +fun TokensScreen(onTokenCategoryClick: (Long) -> Unit) { TokensScreen( tokenCategories = tokenCategories, - onTokenClick = onTokenClick + onTokenCategoryClick = onTokenCategoryClick ) } @Composable -private fun TokensScreen(tokenCategories: List, onTokenClick: (Long) -> Unit) { +private fun TokensScreen(tokenCategories: List, onTokenCategoryClick: (Long) -> Unit) { Screen { Column( modifier = Modifier @@ -50,7 +50,7 @@ private fun TokensScreen(tokenCategories: List, onTokenClick: (Lo LargeCard( title = stringResource(id = token.nameRes), imageRes = token.imageRes, - onClick = { onTokenClick(token.id) } + onClick = { onTokenCategoryClick(token.id) } ) } } diff --git a/app/src/main/res/drawable/ic_spacing.xml b/app/src/main/res/drawable/ic_spacing.xml index 135d802a..e6fcd809 100644 --- a/app/src/main/res/drawable/ic_spacing.xml +++ b/app/src/main/res/drawable/ic_spacing.xml @@ -1,3 +1,15 @@ + + + android:fillColor="#000000"/> diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml index 8124a2fa..146877a2 100644 --- a/app/src/main/res/values/strings.xml +++ b/app/src/main/res/values/strings.xml @@ -41,6 +41,18 @@ Radius Style + + Dimension + Dimension provides standard sizing and spacing to ensure visual consistency across the UI. + + + Spacing + Space refers to the measurements used to define the spacing between UI elements. + + + Size + Size refers to the specific measurements used to define the dimensions of UI elements within the design system. + Elevation Shadows are used to give the impression of distance or elevation between surfaces, which adds depth to our designs. From d6e1bf10dff25f9dc5880bba32c9924abcf41e9d Mon Sep 17 00:00:00 2001 From: Pauline Auvray Date: Fri, 18 Oct 2024 16:51:52 +0200 Subject: [PATCH 06/32] Fix subcategories detail display --- .../main/java/com/orange/ouds/app/ui/tokens/TokenCategory.kt | 2 +- app/src/main/java/com/orange/ouds/app/ui/tokens/TokensScreen.kt | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/src/main/java/com/orange/ouds/app/ui/tokens/TokenCategory.kt b/app/src/main/java/com/orange/ouds/app/ui/tokens/TokenCategory.kt index d5e2db7a..525d57a6 100644 --- a/app/src/main/java/com/orange/ouds/app/ui/tokens/TokenCategory.kt +++ b/app/src/main/java/com/orange/ouds/app/ui/tokens/TokenCategory.kt @@ -44,7 +44,7 @@ import com.orange.ouds.theme.tokens.OudsSpacingFixedKeyToken import com.orange.ouds.theme.tokens.OudsTypographyKeyToken import com.orange.ouds.theme.tokens.semantic.OudsColorKeyToken -val tokenCategories = TokenCategory::class.sealedSubclasses.mapNotNull { it.objectInstance }.filter { !it.subcategory } +val tokenCategories = TokenCategory::class.sealedSubclasses.mapNotNull { it.objectInstance } @Immutable sealed class TokenCategory( 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 index 487bc2dd..c8c06512 100644 --- 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 @@ -46,7 +46,7 @@ private fun TokensScreen(tokenCategories: List, onTokenCategoryCl .padding(OudsSpacingFixedKeyToken.Medium.value), verticalArrangement = Arrangement.spacedBy(OudsSpacingFixedKeyToken.Medium.value) ) { - tokenCategories.forEach { token -> + tokenCategories.filter { !it.subcategory }.forEach { token -> LargeCard( title = stringResource(id = token.nameRes), imageRes = token.imageRes, From 84f5adac93f8c3f8b82186d7c908d49766c09099 Mon Sep 17 00:00:00 2001 From: Pauline Auvray Date: Mon, 21 Oct 2024 11:22:10 +0200 Subject: [PATCH 07/32] Reorder OudsSizeIconWithTextKeyToken --- .../ouds/theme/tokens/OudsSizeKeyTokens.kt | 42 +++++++++---------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/theme-contract/src/main/java/com/orange/ouds/theme/tokens/OudsSizeKeyTokens.kt b/theme-contract/src/main/java/com/orange/ouds/theme/tokens/OudsSizeKeyTokens.kt index a531a7fa..988f617a 100644 --- a/theme-contract/src/main/java/com/orange/ouds/theme/tokens/OudsSizeKeyTokens.kt +++ b/theme-contract/src/main/java/com/orange/ouds/theme/tokens/OudsSizeKeyTokens.kt @@ -23,18 +23,30 @@ enum class OudsSizeIconDecorativeKeyToken { } enum class OudsSizeIconWithTextKeyToken { - HeadingSmallSizeShort, - HeadingSmallSizeMedium, - HeadingSmallSizeTall, - HeadingMediumSizeShort, - HeadingMediumSizeMedium, - HeadingMediumSizeTall, - HeadingLargeSizeShort, - HeadingLargeSizeMedium, - HeadingLargeSizeTall, HeadingExtraLargeSizeShort, HeadingExtraLargeSizeMedium, HeadingExtraLargeSizeTall, + HeadingLargeSizeShort, + HeadingLargeSizeMedium, + HeadingLargeSizeTall, + HeadingMediumSizeShort, + HeadingMediumSizeMedium, + HeadingMediumSizeTall, + HeadingSmallSizeShort, + HeadingSmallSizeMedium, + HeadingSmallSizeTall, + BodyLargeSizeShort, + BodyLargeSizeMedium, + BodyLargeSizeTall, + BodyMediumSizeShort, + BodyMediumSizeMedium, + BodyMediumSizeTall, + BodySmallSizeShort, + BodySmallSizeMedium, + BodySmallSizeTall, + LabelExtraLargeSizeShort, + LabelExtraLargeSizeMedium, + LabelExtraLargeSizeTall, LabelLargeSizeShorter, LabelLargeSizeShort, LabelLargeSizeMedium, @@ -46,18 +58,6 @@ enum class OudsSizeIconWithTextKeyToken { LabelSmallSizeShort, LabelSmallSizeMedium, LabelSmallSizeTall, - LabelExtraLargeSizeShort, - LabelExtraLargeSizeMedium, - LabelExtraLargeSizeTall, - BodySmallSizeShort, - BodySmallSizeMedium, - BodySmallSizeTall, - BodyMediumSizeShort, - BodyMediumSizeMedium, - BodyMediumSizeTall, - BodyLargeSizeShort, - BodyLargeSizeMedium, - BodyLargeSizeTall, } enum class OudsSizeMaxWidthTypeKeyToken { From ee1249230cf9d6405043517d40fa2c6dbc76db01 Mon Sep 17 00:00:00 2001 From: Pauline Auvray Date: Mon, 21 Oct 2024 11:22:44 +0200 Subject: [PATCH 08/32] Display dimension size tokens --- .../ouds/app/ui/tokens/TokenCategory.kt | 62 +++++++++++++ .../ui/tokens/TokenCategoryDetailScreen.kt | 93 ++++++++++++------- app/src/main/res/values/strings.xml | 6 +- 3 files changed, 126 insertions(+), 35 deletions(-) diff --git a/app/src/main/java/com/orange/ouds/app/ui/tokens/TokenCategory.kt b/app/src/main/java/com/orange/ouds/app/ui/tokens/TokenCategory.kt index 525d57a6..ffbe3fd1 100644 --- a/app/src/main/java/com/orange/ouds/app/ui/tokens/TokenCategory.kt +++ b/app/src/main/java/com/orange/ouds/app/ui/tokens/TokenCategory.kt @@ -18,28 +18,38 @@ import androidx.compose.foundation.Image import androidx.compose.foundation.background import androidx.compose.foundation.border import androidx.compose.foundation.isSystemInDarkTheme +import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material3.Icon import androidx.compose.material3.Surface +import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.Immutable +import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource import androidx.compose.ui.text.TextStyle +import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp import com.orange.ouds.app.R import com.orange.ouds.core.theme.value +import com.orange.ouds.foundation.extensions.orElse import com.orange.ouds.theme.OudsBorderStyle import com.orange.ouds.theme.dashedBorder import com.orange.ouds.theme.dottedBorder import com.orange.ouds.theme.tokens.OudsBorderKeyToken import com.orange.ouds.theme.tokens.OudsElevationKeyToken import com.orange.ouds.theme.tokens.OudsOpacityKeyToken +import com.orange.ouds.theme.tokens.OudsSizeIconDecorativeKeyToken +import com.orange.ouds.theme.tokens.OudsSizeIconWithTextKeyToken import com.orange.ouds.theme.tokens.OudsSpacingFixedKeyToken import com.orange.ouds.theme.tokens.OudsTypographyKeyToken import com.orange.ouds.theme.tokens.semantic.OudsColorKeyToken @@ -86,6 +96,7 @@ sealed class TokenCategory( R.string.app_tokens_size_label, R.drawable.ic_spacing, R.string.app_tokens_size_description_text, + listOf(TokenProperty.SizeIconDecorative, TokenProperty.SizeIconWithLabel), subcategory = true ) } @@ -214,6 +225,57 @@ sealed class TokenProperty( } } + data object SizeIconDecorative : TokenProperty( + nameRes = R.string.app_tokens_size_iconDecorative_label, + tokens = { OudsSizeIconDecorativeKeyToken.entries.map { Token(it.name, it.value) } } + ) { + @Composable + fun Illustration(size: Dp) { + Box( + modifier = Modifier + .size(80.dp) + .background(color = OudsColorKeyToken.OnSurface.value), //TODO use BgEmphasizedPrimary token when available + contentAlignment = Alignment.Center, + ) { + Icon( + modifier = Modifier.size(size), + painter = painterResource(R.drawable.ic_design_token_figma), + tint = Color(0xFF26B2FF), //TODO use AlwaysInfo token when available + contentDescription = null + ) + } + } + } + + data object SizeIconWithLabel : TokenProperty( + nameRes = R.string.app_tokens_size_iconWithLabel_label, + tokens = { OudsSizeIconWithTextKeyToken.entries.map { Token(it.name, it.value) } } + ) { + @Composable + fun Illustration(size: Dp, tokenName: String) { + val label = tokenName.substringBefore("Size") + Row( + modifier = Modifier.fillMaxWidth(), + horizontalArrangement = Arrangement.spacedBy(OudsSpacingFixedKeyToken.Shorter.value), + verticalAlignment = Alignment.CenterVertically + ) { + Icon( + modifier = Modifier.size(size), + painter = painterResource(R.drawable.ic_design_token_figma), + tint = Color(0xFF26B2FF), //TODO use AlwaysInfo token when available + contentDescription = null + ) + Text( + modifier = Modifier.weight(1f), + text = label, + maxLines = 1, + overflow = TextOverflow.Ellipsis, + style = OudsTypographyKeyToken.entries.firstOrNull { it.name == label }?.value.orElse { OudsTypographyKeyToken.BodyStrongLarge.value } + ) + } + } + } + data object Typography : TokenProperty(nameRes = null, tokens = { OudsTypographyKeyToken.entries.map { Token(it.name, it.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 index 22f3ed11..51743d4b 100644 --- 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 @@ -30,13 +30,14 @@ import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.tooling.preview.PreviewParameter import androidx.compose.ui.unit.Dp +import com.orange.ouds.app.R import com.orange.ouds.app.ui.utilities.composable.DetailScreenHeader import com.orange.ouds.app.ui.utilities.composable.Screen import com.orange.ouds.core.theme.value -import com.orange.ouds.theme.OudsBorderStyle 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.OudsSpacingFixedKeyToken import com.orange.ouds.theme.tokens.OudsTypographyKeyToken import com.orange.ouds.theme.tokens.semantic.OudsColorKeyToken @@ -89,46 +90,58 @@ fun TokenCategoryDetailScreen(tokenCategory: TokenCategory, onSubcategoryClick: } tokenProperty.tokens().forEach { token -> - Row( - modifier = Modifier - .fillMaxWidth() - .padding(horizontal = OudsSpacingFixedKeyToken.Medium.value, vertical = OudsSpacingFixedKeyToken.Shorter.value) - ) { - when (tokenProperty) { - is TokenProperty.BorderWidth -> tokenProperty.Illustration(width = token.value as Dp) - is TokenProperty.BorderRadius -> tokenProperty.Illustration(radius = token.value as Dp) - is TokenProperty.BorderStyle -> tokenProperty.Illustration(style = token.value as OudsBorderStyle) - is TokenProperty.Elevation -> tokenProperty.Illustration(elevation = token.value as Dp) - is TokenProperty.Opacity -> tokenProperty.Illustration(opacity = token.value as Float) - is TokenProperty.Typography -> Unit - } - - val isTypographyProperty = tokenProperty is TokenProperty.Typography - + if (tokenProperty == TokenProperty.SizeIconWithLabel) { Column( modifier = Modifier - .weight(1f) - .padding(start = if (isTypographyProperty) OudsSpacingFixedKeyToken.None.value else OudsSpacingFixedKeyToken.Medium.value) + .fillMaxWidth() + .padding(horizontal = OudsSpacingFixedKeyToken.Medium.value, vertical = OudsSpacingFixedKeyToken.Shorter.value) ) { + TokenIllustration(tokenProperty = tokenProperty, token = token) Text( modifier = Modifier.fillMaxWidth(), - text = token.name, + text = stringResource(id = R.string.app_tokens_size_iconWithLabelTokenName_label, token.name, token.literalValue), maxLines = 1, overflow = TextOverflow.Ellipsis, - style = if (isTypographyProperty) { - token.value as TextStyle - } else { - OudsTypographyKeyToken.BodyStrongLarge.value - } - ) - Text( - modifier = Modifier.fillMaxWidth(), - text = token.literalValue, - maxLines = 1, - overflow = TextOverflow.Ellipsis, - style = OudsTypographyKeyToken.BodyDefaultMedium.value.copy(color = OudsColorKeyToken.Tertiary.value) //TODO use ContentMuted token when available + style = OudsTypographyKeyToken.BodyDefaultMedium.value, + color = OudsColorKeyToken.OnSurfaceVariant.value //TODO use ContentMuted token when available ) } + } else { + val isTypographyProperty = tokenProperty is TokenProperty.Typography + + Row( + modifier = Modifier + .fillMaxWidth() + .padding(horizontal = OudsSpacingFixedKeyToken.Medium.value, vertical = OudsSpacingFixedKeyToken.Shorter.value) + ) { + TokenIllustration(tokenProperty = tokenProperty, token = token) + + Column( + modifier = Modifier + .weight(1f) + .padding(start = if (isTypographyProperty) OudsSpacingFixedKeyToken.None.value else OudsSpacingFixedKeyToken.Medium.value) + ) { + Text( + modifier = Modifier.fillMaxWidth(), + text = token.name, + maxLines = 1, + overflow = TextOverflow.Ellipsis, + style = if (isTypographyProperty) { + token.value as TextStyle + } else { + OudsTypographyKeyToken.BodyStrongLarge.value + } + ) + Text( + modifier = Modifier.fillMaxWidth(), + text = token.literalValue, + maxLines = 1, + overflow = TextOverflow.Ellipsis, + style = OudsTypographyKeyToken.BodyDefaultMedium.value.copy(color = OudsColorKeyToken.Tertiary.value), //TODO use ContentMuted token when available + color = OudsColorKeyToken.OnSurfaceVariant.value //TODO use ContentMuted token when available + ) + } + } } } } @@ -137,12 +150,24 @@ fun TokenCategoryDetailScreen(tokenCategory: TokenCategory, onSubcategoryClick: } } +@Composable +private fun TokenIllustration(tokenProperty: TokenProperty, token: Token) = when (tokenProperty) { + is TokenProperty.BorderWidth -> tokenProperty.Illustration(width = token.value as Dp) + is TokenProperty.BorderRadius -> tokenProperty.Illustration(radius = token.value as Dp) + is TokenProperty.BorderStyle -> tokenProperty.Illustration(style = token.value as OudsBorderStyle) + is TokenProperty.Opacity -> tokenProperty.Illustration(opacity = token.value as Float) + is TokenProperty.Elevation -> tokenProperty.Illustration(elevation = token.value as Dp) + is TokenProperty.SizeIconDecorative -> tokenProperty.Illustration(size = token.value as Dp) + is TokenProperty.SizeIconWithLabel -> tokenProperty.Illustration(size = token.value as Dp, token.name) + is TokenProperty.Typography -> Unit +} + @UiModePreviews.Default @Composable private fun PreviewTokenCategoryDetailScreen( @PreviewParameter(TokenCategoryDetailScreenPreviewParameterProvider::class) parameter: TokenCategory ) = OudsPreview { - TokenCategoryDetailScreen(parameter) + TokenCategoryDetailScreen(parameter, {}) } private class TokenCategoryDetailScreenPreviewParameterProvider : BasicPreviewParameterProvider(*previewParameterValues.toTypedArray()) @@ -151,4 +176,4 @@ private val previewParameterValues: List get() = listOf( TokenCategory.Opacity, TokenCategory.Elevation - ) + ) \ No newline at end of file diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml index 146877a2..4ea691a8 100644 --- a/app/src/main/res/values/strings.xml +++ b/app/src/main/res/values/strings.xml @@ -49,9 +49,13 @@ Spacing Space refers to the measurements used to define the spacing between UI elements. - + Size Size refers to the specific measurements used to define the dimensions of UI elements within the design system. + Icon decorative + Icon with label + %1$s (%2$s) + Elevation From 0bb2e13777b2a0b0adc94a1be12b332bd4134a43 Mon Sep 17 00:00:00 2001 From: Pauline Auvray Date: Mon, 21 Oct 2024 16:29:49 +0200 Subject: [PATCH 09/32] Display all spacing tokens in the demo app --- .../ouds/app/ui/tokens/TokenCategory.kt | 208 +---------- .../ui/tokens/TokenCategoryDetailScreen.kt | 7 + .../ouds/app/ui/tokens/TokenProperty.kt | 343 ++++++++++++++++++ app/src/main/res/values/strings.xml | 7 + 4 files changed, 361 insertions(+), 204 deletions(-) create mode 100644 app/src/main/java/com/orange/ouds/app/ui/tokens/TokenProperty.kt diff --git a/app/src/main/java/com/orange/ouds/app/ui/tokens/TokenCategory.kt b/app/src/main/java/com/orange/ouds/app/ui/tokens/TokenCategory.kt index ffbe3fd1..eca73b4c 100644 --- a/app/src/main/java/com/orange/ouds/app/ui/tokens/TokenCategory.kt +++ b/app/src/main/java/com/orange/ouds/app/ui/tokens/TokenCategory.kt @@ -14,45 +14,8 @@ package com.orange.ouds.app.ui.tokens import androidx.annotation.DrawableRes import androidx.annotation.StringRes -import androidx.compose.foundation.Image -import androidx.compose.foundation.background -import androidx.compose.foundation.border -import androidx.compose.foundation.isSystemInDarkTheme -import androidx.compose.foundation.layout.Arrangement -import androidx.compose.foundation.layout.Box -import androidx.compose.foundation.layout.Row -import androidx.compose.foundation.layout.fillMaxWidth -import androidx.compose.foundation.layout.padding -import androidx.compose.foundation.layout.size -import androidx.compose.foundation.shape.RoundedCornerShape -import androidx.compose.material3.Icon -import androidx.compose.material3.Surface -import androidx.compose.material3.Text -import androidx.compose.runtime.Composable import androidx.compose.runtime.Immutable -import androidx.compose.ui.Alignment -import androidx.compose.ui.Modifier -import androidx.compose.ui.graphics.Color -import androidx.compose.ui.res.painterResource -import androidx.compose.ui.res.stringResource -import androidx.compose.ui.text.TextStyle -import androidx.compose.ui.text.style.TextOverflow -import androidx.compose.ui.unit.Dp -import androidx.compose.ui.unit.dp import com.orange.ouds.app.R -import com.orange.ouds.core.theme.value -import com.orange.ouds.foundation.extensions.orElse -import com.orange.ouds.theme.OudsBorderStyle -import com.orange.ouds.theme.dashedBorder -import com.orange.ouds.theme.dottedBorder -import com.orange.ouds.theme.tokens.OudsBorderKeyToken -import com.orange.ouds.theme.tokens.OudsElevationKeyToken -import com.orange.ouds.theme.tokens.OudsOpacityKeyToken -import com.orange.ouds.theme.tokens.OudsSizeIconDecorativeKeyToken -import com.orange.ouds.theme.tokens.OudsSizeIconWithTextKeyToken -import com.orange.ouds.theme.tokens.OudsSpacingFixedKeyToken -import com.orange.ouds.theme.tokens.OudsTypographyKeyToken -import com.orange.ouds.theme.tokens.semantic.OudsColorKeyToken val tokenCategories = TokenCategory::class.sealedSubclasses.mapNotNull { it.objectInstance } @@ -89,6 +52,10 @@ sealed class TokenCategory( R.string.app_tokens_spacing_label, R.drawable.ic_spacing, R.string.app_tokens_spacing_description_text, + listOf( + TokenProperty.SpacingScaled, TokenProperty.SpacingFixed, TokenProperty.SpacingPaddingInline, TokenProperty.SpacingPaddingStack, + TokenProperty.SpacingPaddingInset, TokenProperty.SpacingColumnGap, TokenProperty.SpacingRowGap + ), subcategory = true ) @@ -121,171 +88,4 @@ sealed class TokenCategory( R.string.app_tokens_typography_description_text, listOf(TokenProperty.Typography) ) - -} - -sealed class TokenProperty( - @StringRes val nameRes: Int?, - val tokens: @Composable () -> List> -) { - protected companion object { - val defaultIllustrationSize = 64.dp - } - - data object BorderRadius : TokenProperty( - nameRes = R.string.app_tokens_border_radius_label, - tokens = { OudsBorderKeyToken.Radius.entries.map { Token(it.name, it.value) } } - ) { - @Composable - fun Illustration(radius: Dp) { - Box( - modifier = Modifier - .size(defaultIllustrationSize) - .border( - width = 1.dp, - color = OudsColorKeyToken.OnSurface.value, //TODO use ContentDefault token when available - shape = RoundedCornerShape(radius) - ) - .background(color = OudsColorKeyToken.Surface.value), //TODO use BgDefaultSecondary token when available - ) - } - } - - data object BorderStyle : TokenProperty( - nameRes = R.string.app_tokens_border_style_label, - tokens = { OudsBorderKeyToken.Style.entries.map { Token(it.name, it.value) } } - ) { - @Composable - fun Illustration(style: OudsBorderStyle) { - val borderColor = OudsColorKeyToken.OnSurface.value //TODO use ContentDefault token when available - val borderWidth = 1.dp - val modifier = when (style) { - OudsBorderStyle.None -> Modifier - OudsBorderStyle.Solid -> Modifier.border(width = borderWidth, color = borderColor) - OudsBorderStyle.Dashed -> Modifier.dashedBorder(width = borderWidth, color = borderColor) - OudsBorderStyle.Dotted -> Modifier.dottedBorder(width = borderWidth, color = borderColor) - } - Box( - modifier = modifier - .size(defaultIllustrationSize) - .background(color = OudsColorKeyToken.Surface.value), //TODO use BgDefaultSecondary token when available - ) - } - } - - data object BorderWidth : TokenProperty( - nameRes = R.string.app_tokens_border_width_label, - tokens = { OudsBorderKeyToken.Width.entries.map { Token(it.name, it.value) } } - ) { - @Composable - fun Illustration(width: Dp) { - val borderColor = OudsColorKeyToken.OnSurface.value //TODO use ContentDefault token when available - Box( - modifier = Modifier - .size(defaultIllustrationSize) - .border(width = width, color = borderColor) - .background(color = OudsColorKeyToken.Surface.value), //TODO use BgDefaultSecondary token when available - ) - } - } - - data object Elevation : TokenProperty( - nameRes = null, - tokens = { OudsElevationKeyToken.entries.map { Token(it.name, it.value) } } - ) { - @Composable - fun Illustration(elevation: Dp) { - Surface(shadowElevation = elevation) { - Box( - modifier = Modifier - .size(defaultIllustrationSize) - .background(color = OudsColorKeyToken.Surface.value), //TODO use BgDefaultSecondary token when available - ) - } - } - } - - data object Opacity : TokenProperty( - nameRes = null, - tokens = { OudsOpacityKeyToken.entries.map { Token(it.name, it.value) } } - ) { - @Composable - fun Illustration(opacity: Float) { - val squareColor = if (isSystemInDarkTheme()) Color.White else Color.Black - Box { - Image(painter = painterResource(id = R.drawable.il_opacity_union), contentDescription = null) - Box( - modifier = Modifier - .padding(top = OudsSpacingFixedKeyToken.Medium.value, start = OudsSpacingFixedKeyToken.Medium.value) - .size(48.dp) - .background(color = squareColor.copy(alpha = opacity)) - .border(width = 1.dp, color = squareColor) - ) - } - } - } - - data object SizeIconDecorative : TokenProperty( - nameRes = R.string.app_tokens_size_iconDecorative_label, - tokens = { OudsSizeIconDecorativeKeyToken.entries.map { Token(it.name, it.value) } } - ) { - @Composable - fun Illustration(size: Dp) { - Box( - modifier = Modifier - .size(80.dp) - .background(color = OudsColorKeyToken.OnSurface.value), //TODO use BgEmphasizedPrimary token when available - contentAlignment = Alignment.Center, - ) { - Icon( - modifier = Modifier.size(size), - painter = painterResource(R.drawable.ic_design_token_figma), - tint = Color(0xFF26B2FF), //TODO use AlwaysInfo token when available - contentDescription = null - ) - } - } - } - - data object SizeIconWithLabel : TokenProperty( - nameRes = R.string.app_tokens_size_iconWithLabel_label, - tokens = { OudsSizeIconWithTextKeyToken.entries.map { Token(it.name, it.value) } } - ) { - @Composable - fun Illustration(size: Dp, tokenName: String) { - val label = tokenName.substringBefore("Size") - Row( - modifier = Modifier.fillMaxWidth(), - horizontalArrangement = Arrangement.spacedBy(OudsSpacingFixedKeyToken.Shorter.value), - verticalAlignment = Alignment.CenterVertically - ) { - Icon( - modifier = Modifier.size(size), - painter = painterResource(R.drawable.ic_design_token_figma), - tint = Color(0xFF26B2FF), //TODO use AlwaysInfo token when available - contentDescription = null - ) - Text( - modifier = Modifier.weight(1f), - text = label, - maxLines = 1, - overflow = TextOverflow.Ellipsis, - style = OudsTypographyKeyToken.entries.firstOrNull { it.name == label }?.value.orElse { OudsTypographyKeyToken.BodyStrongLarge.value } - ) - } - } - } - - data object Typography : TokenProperty(nameRes = null, tokens = { OudsTypographyKeyToken.entries.map { Token(it.name, it.value) } }) } - -data class Token(val name: String, val value: T) { - val literalValue: String - @Composable - get() = when (value) { - is Dp -> stringResource(id = R.string.app_tokens_dpFormat_label, value.toString().replace(".0.dp", "").substringBeforeLast(".dp")) - is Float -> stringResource(id = R.string.app_tokens_floatFormat_label, value) - is TextStyle -> stringResource(id = R.string.app_tokens_spFormat_label, value.fontSize.toString().replace(".0.sp", "").substringBeforeLast(".sp")) - else -> value.toString() - } -} \ No newline at end of file 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 index 51743d4b..318a8558 100644 --- 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 @@ -159,6 +159,13 @@ private fun TokenIllustration(tokenProperty: TokenProperty, token: Token) = is TokenProperty.Elevation -> tokenProperty.Illustration(elevation = token.value as Dp) is TokenProperty.SizeIconDecorative -> tokenProperty.Illustration(size = token.value as Dp) is TokenProperty.SizeIconWithLabel -> tokenProperty.Illustration(size = token.value as Dp, token.name) + is TokenProperty.SpacingColumnGap -> tokenProperty.Illustration(size = token.value as Dp) + is TokenProperty.SpacingPaddingInline -> tokenProperty.Illustration(size = token.value as Dp) + is TokenProperty.SpacingPaddingInset -> tokenProperty.Illustration(size = token.value as Dp) + is TokenProperty.SpacingPaddingStack -> tokenProperty.Illustration(size = token.value as Dp) + is TokenProperty.SpacingFixed -> tokenProperty.Illustration(size = token.value as Dp) + is TokenProperty.SpacingRowGap -> tokenProperty.Illustration(size = token.value as Dp) + is TokenProperty.SpacingScaled -> tokenProperty.Illustration(size = token.value as Dp) is TokenProperty.Typography -> Unit } 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 new file mode 100644 index 00000000..985e816e --- /dev/null +++ b/app/src/main/java/com/orange/ouds/app/ui/tokens/TokenProperty.kt @@ -0,0 +1,343 @@ +/* + * 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.annotation.StringRes +import androidx.compose.foundation.Image +import androidx.compose.foundation.background +import androidx.compose.foundation.border +import androidx.compose.foundation.isSystemInDarkTheme +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.fillMaxHeight +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.width +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material3.Icon +import androidx.compose.material3.Surface +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.res.painterResource +import androidx.compose.ui.res.stringResource +import androidx.compose.ui.text.TextStyle +import androidx.compose.ui.text.style.TextOverflow +import androidx.compose.ui.unit.Dp +import androidx.compose.ui.unit.dp +import com.orange.ouds.app.R +import com.orange.ouds.core.theme.value +import com.orange.ouds.foundation.extensions.orElse +import com.orange.ouds.theme.OudsBorderStyle +import com.orange.ouds.theme.dashedBorder +import com.orange.ouds.theme.dottedBorder +import com.orange.ouds.theme.tokens.OudsBorderKeyToken +import com.orange.ouds.theme.tokens.OudsElevationKeyToken +import com.orange.ouds.theme.tokens.OudsOpacityKeyToken +import com.orange.ouds.theme.tokens.OudsSizeIconDecorativeKeyToken +import com.orange.ouds.theme.tokens.OudsSizeIconWithTextKeyToken +import com.orange.ouds.theme.tokens.OudsSpacingColumnGapKeyToken +import com.orange.ouds.theme.tokens.OudsSpacingFixedKeyToken +import com.orange.ouds.theme.tokens.OudsSpacingInsetKeyToken +import com.orange.ouds.theme.tokens.OudsSpacingPaddingBlockKeyToken +import com.orange.ouds.theme.tokens.OudsSpacingPaddingInlineKeyToken +import com.orange.ouds.theme.tokens.OudsSpacingRowGapKeyToken +import com.orange.ouds.theme.tokens.OudsSpacingScaledKeyToken +import com.orange.ouds.theme.tokens.OudsTypographyKeyToken +import com.orange.ouds.theme.tokens.semantic.OudsColorKeyToken + +sealed class TokenProperty( + @StringRes val nameRes: Int?, + val tokens: @Composable () -> List> +) { + protected companion object { + val defaultIllustrationSize = 64.dp + } + + data object BorderRadius : TokenProperty( + nameRes = R.string.app_tokens_border_radius_label, + tokens = { OudsBorderKeyToken.Radius.entries.map { Token(it.name, it.value) } } + ) { + @Composable + fun Illustration(radius: Dp) { + Box( + modifier = Modifier + .size(defaultIllustrationSize) + .border( + width = 1.dp, + color = OudsColorKeyToken.OnSurface.value, //TODO use ContentDefault token when available + shape = RoundedCornerShape(radius) + ) + .background(color = OudsColorKeyToken.Surface.value), //TODO use BgDefaultSecondary token when available + ) + } + } + + data object BorderWidth : TokenProperty( + nameRes = R.string.app_tokens_border_width_label, + tokens = { OudsBorderKeyToken.Width.entries.map { Token(it.name, it.value) } } + ) { + @Composable + fun Illustration(width: Dp) { + Box( + modifier = Modifier + .size(defaultIllustrationSize) + .border(width = width, color = OudsColorKeyToken.OnSurface.value) //TODO use ContentDefault token when available + .background(color = OudsColorKeyToken.Surface.value), //TODO use BgDefaultSecondary token when available + ) + } + } + + data object BorderStyle : TokenProperty( + nameRes = R.string.app_tokens_border_style_label, + tokens = { OudsBorderKeyToken.Style.entries.map { Token(it.name, it.value) } } + ) { + @Composable + fun Illustration(style: OudsBorderStyle) { + val borderColor = OudsColorKeyToken.OnSurface.value //TODO use ContentDefault token when available + val borderWidth = 1.dp + val modifier = when (style) { + OudsBorderStyle.None -> Modifier + OudsBorderStyle.Solid -> Modifier.border(width = borderWidth, color = borderColor) + OudsBorderStyle.Dashed -> Modifier.dashedBorder(width = borderWidth, color = borderColor) + OudsBorderStyle.Dotted -> Modifier.dottedBorder(width = borderWidth, color = borderColor) + } + Box( + modifier = modifier + .size(defaultIllustrationSize) + .background(color = OudsColorKeyToken.Surface.value), //TODO use BgDefaultSecondary token when available + ) + } + } + + data object Elevation : TokenProperty( + nameRes = null, + tokens = { OudsElevationKeyToken.entries.map { Token(it.name, it.value) } } + ) { + @Composable + fun Illustration(elevation: Dp) { + Surface(shadowElevation = elevation) { + Box( + modifier = Modifier + .size(defaultIllustrationSize) + .background(color = OudsColorKeyToken.Surface.value), //TODO use BgDefaultSecondary token when available + ) + } + } + } + + data object Opacity : TokenProperty( + nameRes = null, + tokens = { OudsOpacityKeyToken.entries.map { Token(it.name, it.value) } } + ) { + @Composable + fun Illustration(opacity: Float) { + val squareColor = if (isSystemInDarkTheme()) Color.White else Color.Black + Box { + Image(painter = painterResource(id = R.drawable.il_opacity_union), contentDescription = null) + Box( + modifier = Modifier + .padding(top = OudsSpacingFixedKeyToken.Medium.value, start = OudsSpacingFixedKeyToken.Medium.value) + .size(48.dp) + .background(color = squareColor.copy(alpha = opacity)) + .border(width = 1.dp, color = squareColor) + ) + } + } + } + + data object SizeIconDecorative : TokenProperty( + nameRes = R.string.app_tokens_size_iconDecorative_label, + tokens = { OudsSizeIconDecorativeKeyToken.entries.map { Token(it.name, it.value) } } + ) { + @Composable + fun Illustration(size: Dp) { + Box( + modifier = Modifier + .size(80.dp) + .background(color = OudsColorKeyToken.OnSurface.value), //TODO use BgEmphasizedPrimary token when available + contentAlignment = Alignment.Center, + ) { + Icon( + modifier = Modifier.size(size), + painter = painterResource(R.drawable.ic_design_token_figma), + tint = Color(0xFF26B2FF), //TODO use AlwaysInfo token when available + contentDescription = null + ) + } + } + } + + data object SizeIconWithLabel : TokenProperty( + nameRes = R.string.app_tokens_size_iconWithLabel_label, + tokens = { OudsSizeIconWithTextKeyToken.entries.map { Token(it.name, it.value) } } + ) { + @Composable + fun Illustration(size: Dp, tokenName: String) { + val label = tokenName.substringBefore("Size") + Row( + modifier = Modifier.fillMaxWidth(), + horizontalArrangement = Arrangement.spacedBy(OudsSpacingFixedKeyToken.Shorter.value), + verticalAlignment = Alignment.CenterVertically + ) { + Icon( + modifier = Modifier.size(size), + painter = painterResource(R.drawable.ic_design_token_figma), + tint = Color(0xFF26B2FF), //TODO use AlwaysInfo token when available + contentDescription = null + ) + Text( + modifier = Modifier.weight(1f), + text = label, + maxLines = 1, + overflow = TextOverflow.Ellipsis, + style = OudsTypographyKeyToken.entries.firstOrNull { it.name == label }?.value.orElse { OudsTypographyKeyToken.BodyStrongLarge.value } + ) + } + } + } + + data object SpacingColumnGap : TokenProperty( + nameRes = R.string.app_tokens_spacing_columnGap_label, + tokens = { OudsSpacingColumnGapKeyToken.entries.map { Token(it.name, it.value) } } + ) { + @Composable + fun Illustration(size: Dp) = SpacingIllustration(size = size, contentAlignment = Alignment.Center) + } + + data object SpacingPaddingInline : TokenProperty( + nameRes = R.string.app_tokens_spacing_paddingInline_label, + tokens = { OudsSpacingPaddingInlineKeyToken.entries.map { Token(it.name, it.value) } } + ) { + @Composable + fun Illustration(size: Dp) = SpacingIllustration(size = size) + } + + data object SpacingPaddingStack : TokenProperty( + nameRes = R.string.app_tokens_spacing_paddingStack_label, + tokens = { OudsSpacingPaddingBlockKeyToken.entries.map { Token(it.name, it.value) } } + ) { + + @Composable + fun Illustration(size: Dp) = SpacingIllustration( + size = size, + orientation = DimensionOrientation.Vertical + ) + } + + data object SpacingPaddingInset : TokenProperty( + nameRes = R.string.app_tokens_spacing_paddingInset_label, + tokens = { OudsSpacingInsetKeyToken.entries.map { Token(it.name, it.value) } } + ) { + + @Composable + fun Illustration(size: Dp) { + Box( + modifier = Modifier + .size(defaultIllustrationSize) + .background(color = OudsColorKeyToken.OnSurface.value), //TODO use BgEmphasizedPrimary token when available + ) { + Box( + modifier = Modifier + .fillMaxWidth() + .height(height = size) + .background(Color(0xFF26B2FF)) //TODO use AlwaysInfo token when available + ) + Box( + modifier = Modifier + .fillMaxHeight() + .width(width = size) + .background(Color(0xFF26B2FF)) //TODO use AlwaysInfo token when available + ) + } + } + } + + data object SpacingFixed : TokenProperty( + nameRes = R.string.app_tokens_spacing_fixed_label, + tokens = { OudsSpacingFixedKeyToken.entries.map { Token(it.name, it.value) } } + ) { + @Composable + fun Illustration(size: Dp) = SpacingIllustration(size, contentAlignment = Alignment.Center) + } + + data object SpacingRowGap : TokenProperty( + nameRes = R.string.app_tokens_spacing_rowGap_label, + tokens = { OudsSpacingRowGapKeyToken.entries.map { Token(it.name, it.value) } } + ) { + + @Composable + fun Illustration(size: Dp) = SpacingIllustration( + size = size, + orientation = DimensionOrientation.Vertical, + contentAlignment = Alignment.Center + ) + } + + data object SpacingScaled : TokenProperty( + nameRes = R.string.app_tokens_spacing_scaled_label, + tokens = { OudsSpacingScaledKeyToken.entries.map { Token(it.name, it.value) } } + ) { + @Composable + fun Illustration(size: Dp) = SpacingIllustration(size = size, contentAlignment = Alignment.Center) + } + + data object Typography : TokenProperty(nameRes = null, tokens = { OudsTypographyKeyToken.entries.map { Token(it.name, it.value) } }) + + @Composable + protected fun SpacingIllustration( + size: Dp, + orientation: DimensionOrientation = DimensionOrientation.Horizontal, + contentAlignment: Alignment = Alignment.TopStart + ) { + val dimensionBoxModifier = when (orientation) { + DimensionOrientation.Horizontal -> Modifier + .fillMaxHeight() + .width(width = size) + + DimensionOrientation.Vertical -> Modifier + .fillMaxWidth() + .height(height = size) + } + Box( + modifier = Modifier + .size(defaultIllustrationSize) + .background(color = OudsColorKeyToken.OnSurface.value), //TODO use BgEmphasizedPrimary token when available + contentAlignment = contentAlignment, + ) { + Box( + modifier = dimensionBoxModifier.background(Color(0xFF26B2FF)) //TODO use AlwaysInfo token when available + ) + } + } + + protected enum class DimensionOrientation { + Horizontal, Vertical + } +} + +data class Token(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() + } +} diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml index 4ea691a8..d42158a4 100644 --- a/app/src/main/res/values/strings.xml +++ b/app/src/main/res/values/strings.xml @@ -48,6 +48,13 @@ Spacing Space refers to the measurements used to define the spacing between UI elements. + Scaled + Fixed + Padding inline + Padding stack + Padding inset + Column gap + Row gap Size From 7d7fbfae53ecaa25bfa1a601f8682e4abd0aadd7 Mon Sep 17 00:00:00 2001 From: Pauline Auvray Date: Tue, 22 Oct 2024 11:07:14 +0200 Subject: [PATCH 10/32] Apply filter before calling private composable --- .../main/java/com/orange/ouds/app/ui/tokens/TokensScreen.kt | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 index c8c06512..c9c5ca27 100644 --- 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 @@ -31,7 +31,7 @@ import com.orange.ouds.theme.tokens.OudsSpacingFixedKeyToken @Composable fun TokensScreen(onTokenCategoryClick: (Long) -> Unit) { TokensScreen( - tokenCategories = tokenCategories, + tokenCategories = tokenCategories.filter { !it.subcategory }, onTokenCategoryClick = onTokenCategoryClick ) } @@ -46,7 +46,7 @@ private fun TokensScreen(tokenCategories: List, onTokenCategoryCl .padding(OudsSpacingFixedKeyToken.Medium.value), verticalArrangement = Arrangement.spacedBy(OudsSpacingFixedKeyToken.Medium.value) ) { - tokenCategories.filter { !it.subcategory }.forEach { token -> + tokenCategories.forEach { token -> LargeCard( title = stringResource(id = token.nameRes), imageRes = token.imageRes, From 4d986073534b0ce3e4c2306ae11a85d32bc1fb19 Mon Sep 17 00:00:00 2001 From: Pauline Auvray Date: Tue, 22 Oct 2024 14:26:47 +0200 Subject: [PATCH 11/32] Reorder properties --- .../ouds/app/ui/tokens/TokenProperty.kt | 34 +++++++++---------- 1 file changed, 17 insertions(+), 17 deletions(-) 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 index 985e816e..d17f5690 100644 --- 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 @@ -66,7 +66,7 @@ sealed class TokenProperty( val tokens: @Composable () -> List> ) { protected companion object { - val defaultIllustrationSize = 64.dp + protected val defaultIllustrationSize = 64.dp } data object BorderRadius : TokenProperty( @@ -220,24 +220,20 @@ sealed class TokenProperty( fun Illustration(size: Dp) = SpacingIllustration(size = size, contentAlignment = Alignment.Center) } - data object SpacingPaddingInline : TokenProperty( - nameRes = R.string.app_tokens_spacing_paddingInline_label, - tokens = { OudsSpacingPaddingInlineKeyToken.entries.map { Token(it.name, it.value) } } + data object SpacingFixed : TokenProperty( + nameRes = R.string.app_tokens_spacing_fixed_label, + tokens = { OudsSpacingFixedKeyToken.entries.map { Token(it.name, it.value) } } ) { @Composable - fun Illustration(size: Dp) = SpacingIllustration(size = size) + fun Illustration(size: Dp) = SpacingIllustration(size, contentAlignment = Alignment.Center) } - data object SpacingPaddingStack : TokenProperty( - nameRes = R.string.app_tokens_spacing_paddingStack_label, - tokens = { OudsSpacingPaddingBlockKeyToken.entries.map { Token(it.name, it.value) } } + data object SpacingPaddingInline : TokenProperty( + nameRes = R.string.app_tokens_spacing_paddingInline_label, + tokens = { OudsSpacingPaddingInlineKeyToken.entries.map { Token(it.name, it.value) } } ) { - @Composable - fun Illustration(size: Dp) = SpacingIllustration( - size = size, - orientation = DimensionOrientation.Vertical - ) + fun Illustration(size: Dp) = SpacingIllustration(size = size) } data object SpacingPaddingInset : TokenProperty( @@ -268,12 +264,16 @@ sealed class TokenProperty( } } - data object SpacingFixed : TokenProperty( - nameRes = R.string.app_tokens_spacing_fixed_label, - tokens = { OudsSpacingFixedKeyToken.entries.map { Token(it.name, it.value) } } + data object SpacingPaddingStack : TokenProperty( + nameRes = R.string.app_tokens_spacing_paddingStack_label, + tokens = { OudsSpacingPaddingBlockKeyToken.entries.map { Token(it.name, it.value) } } ) { + @Composable - fun Illustration(size: Dp) = SpacingIllustration(size, contentAlignment = Alignment.Center) + fun Illustration(size: Dp) = SpacingIllustration( + size = size, + orientation = DimensionOrientation.Vertical + ) } data object SpacingRowGap : TokenProperty( From 727433d1a9e1e9513372ef870295cf6d93c574bf Mon Sep 17 00:00:00 2001 From: Pauline Auvray Date: Tue, 22 Oct 2024 15:36:19 +0200 Subject: [PATCH 12/32] Update illustrations for spacing inline with icon --- NOTICE.txt | 1 + .../ui/tokens/TokenCategoryDetailScreen.kt | 2 +- .../ouds/app/ui/tokens/TokenProperty.kt | 26 ++++++++++++++++++- .../ic_design_token_figma_no_padding.xml | 10 +++++++ 4 files changed, 37 insertions(+), 2 deletions(-) create mode 100644 app/src/main/res/drawable/ic_design_token_figma_no_padding.xml diff --git a/NOTICE.txt b/NOTICE.txt index 9754cb9b..be4522da 100644 --- a/NOTICE.txt +++ b/NOTICE.txt @@ -11,6 +11,7 @@ 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_filter_effects.xml app/src/main/res/drawable/ic_info.xml app/src/main/res/drawable/ic_layers.xml 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 index 318a8558..3f390caf 100644 --- 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 @@ -160,7 +160,7 @@ private fun TokenIllustration(tokenProperty: TokenProperty, token: Token) = is TokenProperty.SizeIconDecorative -> tokenProperty.Illustration(size = token.value as Dp) is TokenProperty.SizeIconWithLabel -> tokenProperty.Illustration(size = token.value as Dp, token.name) is TokenProperty.SpacingColumnGap -> tokenProperty.Illustration(size = token.value as Dp) - is TokenProperty.SpacingPaddingInline -> tokenProperty.Illustration(size = token.value as Dp) + is TokenProperty.SpacingPaddingInline -> tokenProperty.Illustration(size = token.value as Dp, token.name) is TokenProperty.SpacingPaddingInset -> tokenProperty.Illustration(size = token.value as Dp) is TokenProperty.SpacingPaddingStack -> tokenProperty.Illustration(size = token.value as Dp) is TokenProperty.SpacingFixed -> tokenProperty.Illustration(size = token.value as Dp) 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 index d17f5690..4eb6addf 100644 --- 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 @@ -34,6 +34,7 @@ import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color +import androidx.compose.ui.layout.ContentScale import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource import androidx.compose.ui.text.TextStyle @@ -233,7 +234,30 @@ sealed class TokenProperty( tokens = { OudsSpacingPaddingInlineKeyToken.entries.map { Token(it.name, it.value) } } ) { @Composable - fun Illustration(size: Dp) = SpacingIllustration(size = size) + fun Illustration(size: Dp, tokenName: String) = when { + tokenName.contains("WithIcon") -> { + Row( + modifier = Modifier + .size(defaultIllustrationSize) + .background(color = OudsColorKeyToken.OnSurface.value), //TODO use BgEmphasizedPrimary token when available + verticalAlignment = Alignment.CenterVertically + ) { + Box( + modifier = Modifier + .fillMaxHeight() + .width(width = size) + .background(Color(0xFF26B2FF)) //TODO use AlwaysInfo token when available + ) + Image( + modifier = Modifier.padding(horizontal = 1.dp), + painter = painterResource(R.drawable.ic_design_token_figma_no_padding), + contentDescription = null, + contentScale = ContentScale.None + ) + } + } + else -> SpacingIllustration(size = size) + } } data object SpacingPaddingInset : TokenProperty( diff --git a/app/src/main/res/drawable/ic_design_token_figma_no_padding.xml b/app/src/main/res/drawable/ic_design_token_figma_no_padding.xml new file mode 100644 index 00000000..e1a92b39 --- /dev/null +++ b/app/src/main/res/drawable/ic_design_token_figma_no_padding.xml @@ -0,0 +1,10 @@ + + + From e433d19ad2bbff8b31b6c2047b87b6596b2f5e0b Mon Sep 17 00:00:00 2001 From: Pauline Auvray Date: Wed, 23 Oct 2024 14:56:26 +0200 Subject: [PATCH 13/32] Rename spacing into space --- NOTICE.txt | 2 +- .../app/ui/components/ComponentsScreen.kt | 4 +- .../ouds/app/ui/tokens/TokenCategory.kt | 18 +- .../ui/tokens/TokenCategoryDetailScreen.kt | 32 +-- .../ouds/app/ui/tokens/TokenProperty.kt | 74 ++--- .../orange/ouds/app/ui/tokens/TokensScreen.kt | 6 +- .../composable/DetailScreenHeader.kt | 4 +- .../app/ui/utilities/composable/LargeCard.kt | 4 +- .../{ic_spacing.xml => ic_dimension.xml} | 0 app/src/main/res/values/strings.xml | 20 +- .../theme/{OudsSpacings.kt => OudsSpaces.kt} | 260 +++++++++--------- .../com/orange/ouds/core/theme/OudsTheme.kt | 8 +- .../orange/ouds/theme/OudsThemeContract.kt | 8 +- ...cingKeyTokens.kt => OudsSpaceKeyTokens.kt} | 14 +- .../tokens/components/OudsButtonTokens.kt | 6 +- ...icTokens.kt => OudsSpaceSemanticTokens.kt} | 2 +- .../ouds/theme/whitelabel/WhiteLabelTheme.kt | 6 +- 17 files changed, 234 insertions(+), 234 deletions(-) rename app/src/main/res/drawable/{ic_spacing.xml => ic_dimension.xml} (100%) rename core/src/main/java/com/orange/ouds/core/theme/{OudsSpacings.kt => OudsSpaces.kt} (57%) rename theme-contract/src/main/java/com/orange/ouds/theme/tokens/{OudsSpacingKeyTokens.kt => OudsSpaceKeyTokens.kt} (87%) rename theme-contract/src/main/java/com/orange/ouds/theme/tokens/semantic/{OudsSpacingSemanticTokens.kt => OudsSpaceSemanticTokens.kt} (99%) diff --git a/NOTICE.txt b/NOTICE.txt index be4522da..6b7545d7 100644 --- a/NOTICE.txt +++ b/NOTICE.txt @@ -12,12 +12,12 @@ 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_solar_palette.xml app/src/main/res/drawable/ic_typography.xml -app/src/main/res/drawable/ic_spacing.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 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 index 5231d3b9..05091940 100644 --- 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 @@ -32,7 +32,7 @@ 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.OudsGridKeyToken -import com.orange.ouds.theme.tokens.OudsSpacingFixedKeyToken +import com.orange.ouds.theme.tokens.OudsSpaceFixedKeyToken @Composable fun ComponentsScreen() { @@ -49,7 +49,7 @@ fun ComponentsScreen() { Box( modifier = Modifier - .padding(top = OudsSpacingFixedKeyToken.Medium.value) + .padding(top = OudsSpaceFixedKeyToken.Medium.value) .width(OudsGridKeyToken.Margin.value) .height(OudsGridKeyToken.ColumnGap.value) .background(OudsTheme.colorScheme.primary) diff --git a/app/src/main/java/com/orange/ouds/app/ui/tokens/TokenCategory.kt b/app/src/main/java/com/orange/ouds/app/ui/tokens/TokenCategory.kt index eca73b4c..e9c2ce76 100644 --- a/app/src/main/java/com/orange/ouds/app/ui/tokens/TokenCategory.kt +++ b/app/src/main/java/com/orange/ouds/app/ui/tokens/TokenCategory.kt @@ -44,24 +44,24 @@ sealed class TokenCategory( data object Dimension : TokenCategory( R.string.app_tokens_dimension_label, - R.drawable.ic_spacing, + R.drawable.ic_dimension, R.string.app_tokens_dimension_description_text, - subcategories = listOf(Spacing, Size) + subcategories = listOf(Space, Size) ) { - data object Spacing : TokenCategory( - R.string.app_tokens_spacing_label, - R.drawable.ic_spacing, - R.string.app_tokens_spacing_description_text, + data object Space : TokenCategory( + R.string.app_tokens_space_label, + R.drawable.ic_dimension, + R.string.app_tokens_space_description_text, listOf( - TokenProperty.SpacingScaled, TokenProperty.SpacingFixed, TokenProperty.SpacingPaddingInline, TokenProperty.SpacingPaddingStack, - TokenProperty.SpacingPaddingInset, TokenProperty.SpacingColumnGap, TokenProperty.SpacingRowGap + TokenProperty.SpaceScaled, TokenProperty.SpaceFixed, TokenProperty.SpacePaddingInline, TokenProperty.SpacePaddingStack, + TokenProperty.SpacePaddingInset, TokenProperty.SpaceColumnGap, TokenProperty.SpaceRowGap ), subcategory = true ) data object Size : TokenCategory( R.string.app_tokens_size_label, - R.drawable.ic_spacing, + R.drawable.ic_dimension, R.string.app_tokens_size_description_text, listOf(TokenProperty.SizeIconDecorative, TokenProperty.SizeIconWithLabel), subcategory = true 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 index 3f390caf..b6bbd7a0 100644 --- 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 @@ -38,7 +38,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.OudsSpacingFixedKeyToken +import com.orange.ouds.theme.tokens.OudsSpaceFixedKeyToken import com.orange.ouds.theme.tokens.OudsTypographyKeyToken import com.orange.ouds.theme.tokens.semantic.OudsColorKeyToken @@ -46,7 +46,7 @@ import com.orange.ouds.theme.tokens.semantic.OudsColorKeyToken fun TokenCategoryDetailScreen(tokenCategory: TokenCategory, onSubcategoryClick: (Long) -> Unit) { Screen { - LazyColumn(contentPadding = PaddingValues(bottom = OudsSpacingFixedKeyToken.Medium.value)) { + LazyColumn(contentPadding = PaddingValues(bottom = OudsSpaceFixedKeyToken.Medium.value)) { item { DetailScreenHeader( descriptionRes = tokenCategory.descriptionRes, @@ -59,13 +59,13 @@ fun TokenCategoryDetailScreen(tokenCategory: TokenCategory, onSubcategoryClick: Row( modifier = Modifier .fillMaxWidth() - .padding(top = OudsSpacingFixedKeyToken.Medium.value) + .padding(top = OudsSpaceFixedKeyToken.Medium.value) .clickable { onSubcategoryClick(subcategory.id) } ) { Text( modifier = Modifier .fillMaxWidth() - .padding(OudsSpacingFixedKeyToken.Medium.value), + .padding(OudsSpaceFixedKeyToken.Medium.value), text = stringResource(id = subcategory.nameRes), maxLines = 1, overflow = TextOverflow.Ellipsis, @@ -75,13 +75,13 @@ fun TokenCategoryDetailScreen(tokenCategory: TokenCategory, onSubcategoryClick: } } else { items(tokenCategory.properties) { tokenProperty -> - Spacer(modifier = Modifier.height(OudsSpacingFixedKeyToken.Medium.value)) + Spacer(modifier = Modifier.height(OudsSpaceFixedKeyToken.Medium.value)) tokenProperty.nameRes?.let { Text( modifier = Modifier .fillMaxWidth() - .padding(OudsSpacingFixedKeyToken.Medium.value), + .padding(OudsSpaceFixedKeyToken.Medium.value), text = stringResource(id = tokenProperty.nameRes), maxLines = 1, overflow = TextOverflow.Ellipsis, @@ -94,7 +94,7 @@ fun TokenCategoryDetailScreen(tokenCategory: TokenCategory, onSubcategoryClick: Column( modifier = Modifier .fillMaxWidth() - .padding(horizontal = OudsSpacingFixedKeyToken.Medium.value, vertical = OudsSpacingFixedKeyToken.Shorter.value) + .padding(horizontal = OudsSpaceFixedKeyToken.Medium.value, vertical = OudsSpaceFixedKeyToken.Shorter.value) ) { TokenIllustration(tokenProperty = tokenProperty, token = token) Text( @@ -112,14 +112,14 @@ fun TokenCategoryDetailScreen(tokenCategory: TokenCategory, onSubcategoryClick: Row( modifier = Modifier .fillMaxWidth() - .padding(horizontal = OudsSpacingFixedKeyToken.Medium.value, vertical = OudsSpacingFixedKeyToken.Shorter.value) + .padding(horizontal = OudsSpaceFixedKeyToken.Medium.value, vertical = OudsSpaceFixedKeyToken.Shorter.value) ) { TokenIllustration(tokenProperty = tokenProperty, token = token) Column( modifier = Modifier .weight(1f) - .padding(start = if (isTypographyProperty) OudsSpacingFixedKeyToken.None.value else OudsSpacingFixedKeyToken.Medium.value) + .padding(start = if (isTypographyProperty) OudsSpaceFixedKeyToken.None.value else OudsSpaceFixedKeyToken.Medium.value) ) { Text( modifier = Modifier.fillMaxWidth(), @@ -159,13 +159,13 @@ private fun TokenIllustration(tokenProperty: TokenProperty, token: Token) = is TokenProperty.Elevation -> tokenProperty.Illustration(elevation = token.value as Dp) is TokenProperty.SizeIconDecorative -> tokenProperty.Illustration(size = token.value as Dp) is TokenProperty.SizeIconWithLabel -> tokenProperty.Illustration(size = token.value as Dp, token.name) - is TokenProperty.SpacingColumnGap -> tokenProperty.Illustration(size = token.value as Dp) - is TokenProperty.SpacingPaddingInline -> tokenProperty.Illustration(size = token.value as Dp, token.name) - is TokenProperty.SpacingPaddingInset -> tokenProperty.Illustration(size = token.value as Dp) - is TokenProperty.SpacingPaddingStack -> tokenProperty.Illustration(size = token.value as Dp) - is TokenProperty.SpacingFixed -> tokenProperty.Illustration(size = token.value as Dp) - is TokenProperty.SpacingRowGap -> tokenProperty.Illustration(size = token.value as Dp) - is TokenProperty.SpacingScaled -> tokenProperty.Illustration(size = token.value as Dp) + is TokenProperty.SpaceColumnGap -> tokenProperty.Illustration(size = token.value as Dp) + is TokenProperty.SpacePaddingInline -> tokenProperty.Illustration(size = token.value as Dp, token.name) + is TokenProperty.SpacePaddingInset -> tokenProperty.Illustration(size = token.value as Dp) + is TokenProperty.SpacePaddingStack -> tokenProperty.Illustration(size = token.value as Dp) + is TokenProperty.SpaceFixed -> tokenProperty.Illustration(size = token.value as Dp) + is TokenProperty.SpaceRowGap -> tokenProperty.Illustration(size = token.value as Dp) + is TokenProperty.SpaceScaled -> tokenProperty.Illustration(size = token.value as Dp) is TokenProperty.Typography -> Unit } 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 index 4eb6addf..9d11e87b 100644 --- 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 @@ -52,13 +52,13 @@ import com.orange.ouds.theme.tokens.OudsElevationKeyToken import com.orange.ouds.theme.tokens.OudsOpacityKeyToken import com.orange.ouds.theme.tokens.OudsSizeIconDecorativeKeyToken import com.orange.ouds.theme.tokens.OudsSizeIconWithTextKeyToken -import com.orange.ouds.theme.tokens.OudsSpacingColumnGapKeyToken -import com.orange.ouds.theme.tokens.OudsSpacingFixedKeyToken -import com.orange.ouds.theme.tokens.OudsSpacingInsetKeyToken -import com.orange.ouds.theme.tokens.OudsSpacingPaddingBlockKeyToken -import com.orange.ouds.theme.tokens.OudsSpacingPaddingInlineKeyToken -import com.orange.ouds.theme.tokens.OudsSpacingRowGapKeyToken -import com.orange.ouds.theme.tokens.OudsSpacingScaledKeyToken +import com.orange.ouds.theme.tokens.OudsSpaceColumnGapKeyToken +import com.orange.ouds.theme.tokens.OudsSpaceFixedKeyToken +import com.orange.ouds.theme.tokens.OudsSpaceInsetKeyToken +import com.orange.ouds.theme.tokens.OudsSpacePaddingBlockKeyToken +import com.orange.ouds.theme.tokens.OudsSpacePaddingInlineKeyToken +import com.orange.ouds.theme.tokens.OudsSpaceRowGapKeyToken +import com.orange.ouds.theme.tokens.OudsSpaceScaledKeyToken import com.orange.ouds.theme.tokens.OudsTypographyKeyToken import com.orange.ouds.theme.tokens.semantic.OudsColorKeyToken @@ -153,7 +153,7 @@ sealed class TokenProperty( Image(painter = painterResource(id = R.drawable.il_opacity_union), contentDescription = null) Box( modifier = Modifier - .padding(top = OudsSpacingFixedKeyToken.Medium.value, start = OudsSpacingFixedKeyToken.Medium.value) + .padding(top = OudsSpaceFixedKeyToken.Medium.value, start = OudsSpaceFixedKeyToken.Medium.value) .size(48.dp) .background(color = squareColor.copy(alpha = opacity)) .border(width = 1.dp, color = squareColor) @@ -193,7 +193,7 @@ sealed class TokenProperty( val label = tokenName.substringBefore("Size") Row( modifier = Modifier.fillMaxWidth(), - horizontalArrangement = Arrangement.spacedBy(OudsSpacingFixedKeyToken.Shorter.value), + horizontalArrangement = Arrangement.spacedBy(OudsSpaceFixedKeyToken.Shorter.value), verticalAlignment = Alignment.CenterVertically ) { Icon( @@ -213,25 +213,25 @@ sealed class TokenProperty( } } - data object SpacingColumnGap : TokenProperty( - nameRes = R.string.app_tokens_spacing_columnGap_label, - tokens = { OudsSpacingColumnGapKeyToken.entries.map { Token(it.name, it.value) } } + data object SpaceColumnGap : TokenProperty( + nameRes = R.string.app_tokens_space_columnGap_label, + tokens = { OudsSpaceColumnGapKeyToken.entries.map { Token(it.name, it.value) } } ) { @Composable - fun Illustration(size: Dp) = SpacingIllustration(size = size, contentAlignment = Alignment.Center) + fun Illustration(size: Dp) = SpaceIllustration(size = size, contentAlignment = Alignment.Center) } - data object SpacingFixed : TokenProperty( - nameRes = R.string.app_tokens_spacing_fixed_label, - tokens = { OudsSpacingFixedKeyToken.entries.map { Token(it.name, it.value) } } + data object SpaceFixed : TokenProperty( + nameRes = R.string.app_tokens_space_fixed_label, + tokens = { OudsSpaceFixedKeyToken.entries.map { Token(it.name, it.value) } } ) { @Composable - fun Illustration(size: Dp) = SpacingIllustration(size, contentAlignment = Alignment.Center) + fun Illustration(size: Dp) = SpaceIllustration(size, contentAlignment = Alignment.Center) } - data object SpacingPaddingInline : TokenProperty( - nameRes = R.string.app_tokens_spacing_paddingInline_label, - tokens = { OudsSpacingPaddingInlineKeyToken.entries.map { Token(it.name, it.value) } } + data object SpacePaddingInline : TokenProperty( + nameRes = R.string.app_tokens_space_paddingInline_label, + tokens = { OudsSpacePaddingInlineKeyToken.entries.map { Token(it.name, it.value) } } ) { @Composable fun Illustration(size: Dp, tokenName: String) = when { @@ -256,13 +256,13 @@ sealed class TokenProperty( ) } } - else -> SpacingIllustration(size = size) + else -> SpaceIllustration(size = size) } } - data object SpacingPaddingInset : TokenProperty( - nameRes = R.string.app_tokens_spacing_paddingInset_label, - tokens = { OudsSpacingInsetKeyToken.entries.map { Token(it.name, it.value) } } + data object SpacePaddingInset : TokenProperty( + nameRes = R.string.app_tokens_space_paddingInset_label, + tokens = { OudsSpaceInsetKeyToken.entries.map { Token(it.name, it.value) } } ) { @Composable @@ -288,43 +288,43 @@ sealed class TokenProperty( } } - data object SpacingPaddingStack : TokenProperty( - nameRes = R.string.app_tokens_spacing_paddingStack_label, - tokens = { OudsSpacingPaddingBlockKeyToken.entries.map { Token(it.name, it.value) } } + data object SpacePaddingStack : TokenProperty( + nameRes = R.string.app_tokens_space_paddingStack_label, + tokens = { OudsSpacePaddingBlockKeyToken.entries.map { Token(it.name, it.value) } } ) { @Composable - fun Illustration(size: Dp) = SpacingIllustration( + fun Illustration(size: Dp) = SpaceIllustration( size = size, orientation = DimensionOrientation.Vertical ) } - data object SpacingRowGap : TokenProperty( - nameRes = R.string.app_tokens_spacing_rowGap_label, - tokens = { OudsSpacingRowGapKeyToken.entries.map { Token(it.name, it.value) } } + data object SpaceRowGap : TokenProperty( + nameRes = R.string.app_tokens_space_rowGap_label, + tokens = { OudsSpaceRowGapKeyToken.entries.map { Token(it.name, it.value) } } ) { @Composable - fun Illustration(size: Dp) = SpacingIllustration( + fun Illustration(size: Dp) = SpaceIllustration( size = size, orientation = DimensionOrientation.Vertical, contentAlignment = Alignment.Center ) } - data object SpacingScaled : TokenProperty( - nameRes = R.string.app_tokens_spacing_scaled_label, - tokens = { OudsSpacingScaledKeyToken.entries.map { Token(it.name, it.value) } } + data object SpaceScaled : TokenProperty( + nameRes = R.string.app_tokens_space_scaled_label, + tokens = { OudsSpaceScaledKeyToken.entries.map { Token(it.name, it.value) } } ) { @Composable - fun Illustration(size: Dp) = SpacingIllustration(size = size, contentAlignment = Alignment.Center) + fun Illustration(size: Dp) = SpaceIllustration(size = size, contentAlignment = Alignment.Center) } data object Typography : TokenProperty(nameRes = null, tokens = { OudsTypographyKeyToken.entries.map { Token(it.name, it.value) } }) @Composable - protected fun SpacingIllustration( + protected fun SpaceIllustration( size: Dp, orientation: DimensionOrientation = DimensionOrientation.Horizontal, contentAlignment: Alignment = Alignment.TopStart 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 index c9c5ca27..c4fd6daf 100644 --- 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 @@ -26,7 +26,7 @@ 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.OudsSpacingFixedKeyToken +import com.orange.ouds.theme.tokens.OudsSpaceFixedKeyToken @Composable fun TokensScreen(onTokenCategoryClick: (Long) -> Unit) { @@ -43,8 +43,8 @@ private fun TokensScreen(tokenCategories: List, onTokenCategoryCl modifier = Modifier .fillMaxSize() .verticalScroll(rememberScrollState()) - .padding(OudsSpacingFixedKeyToken.Medium.value), - verticalArrangement = Arrangement.spacedBy(OudsSpacingFixedKeyToken.Medium.value) + .padding(OudsSpaceFixedKeyToken.Medium.value), + verticalArrangement = Arrangement.spacedBy(OudsSpaceFixedKeyToken.Medium.value) ) { tokenCategories.forEach { token -> LargeCard( 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 index 9d857644..c5a51e17 100644 --- 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,7 +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.OudsSpacingFixedKeyToken +import com.orange.ouds.theme.tokens.OudsSpaceFixedKeyToken import com.orange.ouds.theme.tokens.OudsTypographyKeyToken import com.orange.ouds.theme.tokens.semantic.OudsColorKeyToken @@ -54,7 +54,7 @@ fun DetailScreenHeader( ) DetailScreenDescription( - modifier = Modifier.padding(all = OudsSpacingFixedKeyToken.Medium.value), + modifier = Modifier.padding(all = OudsSpaceFixedKeyToken.Medium.value), descriptionRes = descriptionRes ) } 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 index f3d39646..163c0faa 100644 --- 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 @@ -32,7 +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.OudsSpacingFixedKeyToken +import com.orange.ouds.theme.tokens.OudsSpaceFixedKeyToken import com.orange.ouds.theme.tokens.OudsTypographyKeyToken import com.orange.ouds.theme.tokens.semantic.OudsColorKeyToken @@ -59,7 +59,7 @@ fun LargeCard( contentScale = ContentScale.None ) Column( - modifier = Modifier.padding(OudsSpacingFixedKeyToken.Medium.value) + modifier = Modifier.padding(OudsSpaceFixedKeyToken.Medium.value) ) { Text( text = title, diff --git a/app/src/main/res/drawable/ic_spacing.xml b/app/src/main/res/drawable/ic_dimension.xml similarity index 100% rename from app/src/main/res/drawable/ic_spacing.xml rename to app/src/main/res/drawable/ic_dimension.xml diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml index d42158a4..ae18cb43 100644 --- a/app/src/main/res/values/strings.xml +++ b/app/src/main/res/values/strings.xml @@ -45,16 +45,16 @@ Dimension Dimension provides standard sizing and spacing to ensure visual consistency across the UI. - - Spacing - Space refers to the measurements used to define the spacing between UI elements. - Scaled - Fixed - Padding inline - Padding stack - Padding inset - Column gap - Row gap + + Space + Space refers to the measurements used to define the spacing between UI elements. + Scaled + Fixed + Padding inline + Padding stack + Padding inset + Column gap + Row gap Size diff --git a/core/src/main/java/com/orange/ouds/core/theme/OudsSpacings.kt b/core/src/main/java/com/orange/ouds/core/theme/OudsSpaces.kt similarity index 57% rename from core/src/main/java/com/orange/ouds/core/theme/OudsSpacings.kt rename to core/src/main/java/com/orange/ouds/core/theme/OudsSpaces.kt index e7db845e..3286f1cd 100644 --- a/core/src/main/java/com/orange/ouds/core/theme/OudsSpacings.kt +++ b/core/src/main/java/com/orange/ouds/core/theme/OudsSpaces.kt @@ -20,16 +20,16 @@ import androidx.compose.ui.unit.dp import com.orange.ouds.theme.OudsAdaptiveTokenValue import com.orange.ouds.theme.OudsAdaptiveWindowType import com.orange.ouds.theme.currentWindowWidth -import com.orange.ouds.theme.tokens.OudsSpacingColumnGapKeyToken -import com.orange.ouds.theme.tokens.OudsSpacingFixedKeyToken -import com.orange.ouds.theme.tokens.OudsSpacingInsetKeyToken -import com.orange.ouds.theme.tokens.OudsSpacingPaddingBlockKeyToken -import com.orange.ouds.theme.tokens.OudsSpacingPaddingInlineKeyToken -import com.orange.ouds.theme.tokens.OudsSpacingRowGapKeyToken -import com.orange.ouds.theme.tokens.OudsSpacingScaledKeyToken -import com.orange.ouds.theme.tokens.semantic.OudsSpacingSemanticTokens +import com.orange.ouds.theme.tokens.OudsSpaceColumnGapKeyToken +import com.orange.ouds.theme.tokens.OudsSpaceFixedKeyToken +import com.orange.ouds.theme.tokens.OudsSpaceInsetKeyToken +import com.orange.ouds.theme.tokens.OudsSpacePaddingBlockKeyToken +import com.orange.ouds.theme.tokens.OudsSpacePaddingInlineKeyToken +import com.orange.ouds.theme.tokens.OudsSpaceRowGapKeyToken +import com.orange.ouds.theme.tokens.OudsSpaceScaledKeyToken +import com.orange.ouds.theme.tokens.semantic.OudsSpaceSemanticTokens -data class OudsSpacings( +data class OudsSpaces( val fixedNone: Dp, val fixedSmash: Dp, val fixedShortest: Dp, @@ -131,7 +131,7 @@ data class OudsSpacings( val rowGapWithIconTall: Dp, ) -fun OudsSpacingSemanticTokens.getSpacings() = OudsSpacings( +fun OudsSpaceSemanticTokens.getSpaces() = OudsSpaces( fixedNone = fixedNone.dp, fixedSmash = fixedSmash.dp, fixedShortest = fixedShortest.dp, @@ -274,36 +274,36 @@ fun OudsSpacingSemanticTokens.getSpacings() = OudsSpacings( ) @Stable -fun OudsSpacings.fromToken(token: OudsSpacingFixedKeyToken): Dp { +fun OudsSpaces.fromToken(token: OudsSpaceFixedKeyToken): Dp { return when (token) { - OudsSpacingFixedKeyToken.None -> fixedNone - OudsSpacingFixedKeyToken.Smash -> fixedSmash - OudsSpacingFixedKeyToken.Shortest -> fixedShortest - OudsSpacingFixedKeyToken.Shorter -> fixedShorter - OudsSpacingFixedKeyToken.Short -> fixedShort - OudsSpacingFixedKeyToken.Medium -> fixedMedium - OudsSpacingFixedKeyToken.Tall -> fixedTall - OudsSpacingFixedKeyToken.Taller -> fixedTaller - OudsSpacingFixedKeyToken.Tallest -> fixedTallest - OudsSpacingFixedKeyToken.Spacious -> fixedSpacious - OudsSpacingFixedKeyToken.Huge -> fixedHuge - OudsSpacingFixedKeyToken.Jumbo -> fixedJumbo + OudsSpaceFixedKeyToken.None -> fixedNone + OudsSpaceFixedKeyToken.Smash -> fixedSmash + OudsSpaceFixedKeyToken.Shortest -> fixedShortest + OudsSpaceFixedKeyToken.Shorter -> fixedShorter + OudsSpaceFixedKeyToken.Short -> fixedShort + OudsSpaceFixedKeyToken.Medium -> fixedMedium + OudsSpaceFixedKeyToken.Tall -> fixedTall + OudsSpaceFixedKeyToken.Taller -> fixedTaller + OudsSpaceFixedKeyToken.Tallest -> fixedTallest + OudsSpaceFixedKeyToken.Spacious -> fixedSpacious + OudsSpaceFixedKeyToken.Huge -> fixedHuge + OudsSpaceFixedKeyToken.Jumbo -> fixedJumbo } } @Stable -fun OudsSpacings.fromToken(token: OudsSpacingScaledKeyToken, adaptiveWindowType: OudsAdaptiveWindowType): Dp { +fun OudsSpaces.fromToken(token: OudsSpaceScaledKeyToken, adaptiveWindowType: OudsAdaptiveWindowType): Dp { val dimensionAdaptableSpaceToken = when (token) { - OudsSpacingScaledKeyToken.None -> scaledNone - OudsSpacingScaledKeyToken.Smash -> scaledSmash - OudsSpacingScaledKeyToken.Shortest -> scaledShortest - OudsSpacingScaledKeyToken.Shorter -> scaledShorter - OudsSpacingScaledKeyToken.Short -> scaledShort - OudsSpacingScaledKeyToken.Medium -> scaledMedium - OudsSpacingScaledKeyToken.Tall -> scaledTall - OudsSpacingScaledKeyToken.Taller -> scaledTaller - OudsSpacingScaledKeyToken.Tallest -> scaledTallest - OudsSpacingScaledKeyToken.Spacious -> scaledSpacious + OudsSpaceScaledKeyToken.None -> scaledNone + OudsSpaceScaledKeyToken.Smash -> scaledSmash + OudsSpaceScaledKeyToken.Shortest -> scaledShortest + OudsSpaceScaledKeyToken.Shorter -> scaledShorter + OudsSpaceScaledKeyToken.Short -> scaledShort + OudsSpaceScaledKeyToken.Medium -> scaledMedium + OudsSpaceScaledKeyToken.Tall -> scaledTall + OudsSpaceScaledKeyToken.Taller -> scaledTaller + OudsSpaceScaledKeyToken.Tallest -> scaledTallest + OudsSpaceScaledKeyToken.Spacious -> scaledSpacious } return when (adaptiveWindowType) { @@ -314,163 +314,163 @@ fun OudsSpacings.fromToken(token: OudsSpacingScaledKeyToken, adaptiveWindowType: } @Stable -fun OudsSpacings.fromToken(token: OudsSpacingPaddingInlineKeyToken): Dp { +fun OudsSpaces.fromToken(token: OudsSpacePaddingInlineKeyToken): Dp { return when (token) { - OudsSpacingPaddingInlineKeyToken.None -> paddingInlineNone - OudsSpacingPaddingInlineKeyToken.Shorter -> paddingInlineShorter - OudsSpacingPaddingInlineKeyToken.Short -> paddingInlineShort - OudsSpacingPaddingInlineKeyToken.Medium -> paddingInlineMedium - OudsSpacingPaddingInlineKeyToken.Tall -> paddingInlineTall - OudsSpacingPaddingInlineKeyToken.Taller -> paddingInlineTaller - OudsSpacingPaddingInlineKeyToken.Tallest -> paddingInlineTallest - OudsSpacingPaddingInlineKeyToken.WithIconNone -> paddingInlineWithIconNone - OudsSpacingPaddingInlineKeyToken.WithIconShortest -> paddingInlineWithIconShortest - OudsSpacingPaddingInlineKeyToken.WithIconShorter -> paddingInlineWithIconShorter - OudsSpacingPaddingInlineKeyToken.WithIconShort -> paddingInlineWithIconShort - OudsSpacingPaddingInlineKeyToken.WithIconMedium -> paddingInlineWithIconMedium - OudsSpacingPaddingInlineKeyToken.WithIconTall -> paddingInlineWithIconTall - OudsSpacingPaddingInlineKeyToken.WithIconTaller -> paddingInlineWithIconTaller - OudsSpacingPaddingInlineKeyToken.WithIconTallest -> paddingInlineWithIconTallest - OudsSpacingPaddingInlineKeyToken.WithArrowNone -> paddingInlineWithArrowNone - OudsSpacingPaddingInlineKeyToken.WithArrowShortest -> paddingInlineWithArrowShortest - OudsSpacingPaddingInlineKeyToken.WithArrowShorter -> paddingInlineWithArrowShorter - OudsSpacingPaddingInlineKeyToken.WithArrowShort -> paddingInlineWithArrowShort - OudsSpacingPaddingInlineKeyToken.WithArrowMedium -> paddingInlineWithArrowMedium - OudsSpacingPaddingInlineKeyToken.WithArrowTall -> paddingInlineWithArrowTall - OudsSpacingPaddingInlineKeyToken.WithArrowTaller -> paddingInlineWithArrowTaller - OudsSpacingPaddingInlineKeyToken.WithArrowTallest -> paddingInlineWithArrowTallest + OudsSpacePaddingInlineKeyToken.None -> paddingInlineNone + OudsSpacePaddingInlineKeyToken.Shorter -> paddingInlineShorter + OudsSpacePaddingInlineKeyToken.Short -> paddingInlineShort + OudsSpacePaddingInlineKeyToken.Medium -> paddingInlineMedium + OudsSpacePaddingInlineKeyToken.Tall -> paddingInlineTall + OudsSpacePaddingInlineKeyToken.Taller -> paddingInlineTaller + OudsSpacePaddingInlineKeyToken.Tallest -> paddingInlineTallest + OudsSpacePaddingInlineKeyToken.WithIconNone -> paddingInlineWithIconNone + OudsSpacePaddingInlineKeyToken.WithIconShortest -> paddingInlineWithIconShortest + OudsSpacePaddingInlineKeyToken.WithIconShorter -> paddingInlineWithIconShorter + OudsSpacePaddingInlineKeyToken.WithIconShort -> paddingInlineWithIconShort + OudsSpacePaddingInlineKeyToken.WithIconMedium -> paddingInlineWithIconMedium + OudsSpacePaddingInlineKeyToken.WithIconTall -> paddingInlineWithIconTall + OudsSpacePaddingInlineKeyToken.WithIconTaller -> paddingInlineWithIconTaller + OudsSpacePaddingInlineKeyToken.WithIconTallest -> paddingInlineWithIconTallest + OudsSpacePaddingInlineKeyToken.WithArrowNone -> paddingInlineWithArrowNone + OudsSpacePaddingInlineKeyToken.WithArrowShortest -> paddingInlineWithArrowShortest + OudsSpacePaddingInlineKeyToken.WithArrowShorter -> paddingInlineWithArrowShorter + OudsSpacePaddingInlineKeyToken.WithArrowShort -> paddingInlineWithArrowShort + OudsSpacePaddingInlineKeyToken.WithArrowMedium -> paddingInlineWithArrowMedium + OudsSpacePaddingInlineKeyToken.WithArrowTall -> paddingInlineWithArrowTall + OudsSpacePaddingInlineKeyToken.WithArrowTaller -> paddingInlineWithArrowTaller + OudsSpacePaddingInlineKeyToken.WithArrowTallest -> paddingInlineWithArrowTallest } } @Stable -fun OudsSpacings.fromToken(token: OudsSpacingPaddingBlockKeyToken): Dp { +fun OudsSpaces.fromToken(token: OudsSpacePaddingBlockKeyToken): Dp { return when (token) { - OudsSpacingPaddingBlockKeyToken.None -> paddingBlockNone - OudsSpacingPaddingBlockKeyToken.Shorter -> paddingBlockShorter - OudsSpacingPaddingBlockKeyToken.Short -> paddingBlockShort - OudsSpacingPaddingBlockKeyToken.Medium -> paddingBlockMedium - OudsSpacingPaddingBlockKeyToken.Tall -> paddingBlockTall - OudsSpacingPaddingBlockKeyToken.Taller -> paddingBlockTaller - OudsSpacingPaddingBlockKeyToken.Tallest -> paddingBlockTallest - OudsSpacingPaddingBlockKeyToken.WithIconNone -> paddingBlockWithIconNone - OudsSpacingPaddingBlockKeyToken.WithIconShortest -> paddingBlockWithIconShortest - OudsSpacingPaddingBlockKeyToken.WithIconShorter -> paddingBlockWithIconShorter - OudsSpacingPaddingBlockKeyToken.WithIconShort -> paddingBlockWithIconShort - OudsSpacingPaddingBlockKeyToken.WithIconMedium -> paddingBlockWithIconMedium - OudsSpacingPaddingBlockKeyToken.WithIconTall -> paddingBlockWithIconTall - OudsSpacingPaddingBlockKeyToken.WithIconTaller -> paddingBlockWithIconTaller + OudsSpacePaddingBlockKeyToken.None -> paddingBlockNone + OudsSpacePaddingBlockKeyToken.Shorter -> paddingBlockShorter + OudsSpacePaddingBlockKeyToken.Short -> paddingBlockShort + OudsSpacePaddingBlockKeyToken.Medium -> paddingBlockMedium + OudsSpacePaddingBlockKeyToken.Tall -> paddingBlockTall + OudsSpacePaddingBlockKeyToken.Taller -> paddingBlockTaller + OudsSpacePaddingBlockKeyToken.Tallest -> paddingBlockTallest + OudsSpacePaddingBlockKeyToken.WithIconNone -> paddingBlockWithIconNone + OudsSpacePaddingBlockKeyToken.WithIconShortest -> paddingBlockWithIconShortest + OudsSpacePaddingBlockKeyToken.WithIconShorter -> paddingBlockWithIconShorter + OudsSpacePaddingBlockKeyToken.WithIconShort -> paddingBlockWithIconShort + OudsSpacePaddingBlockKeyToken.WithIconMedium -> paddingBlockWithIconMedium + OudsSpacePaddingBlockKeyToken.WithIconTall -> paddingBlockWithIconTall + OudsSpacePaddingBlockKeyToken.WithIconTaller -> paddingBlockWithIconTaller } } @Stable -fun OudsSpacings.fromToken(token: OudsSpacingInsetKeyToken): Dp { +fun OudsSpaces.fromToken(token: OudsSpaceInsetKeyToken): Dp { return when (token) { - OudsSpacingInsetKeyToken.None -> insetNone - OudsSpacingInsetKeyToken.Smash -> insetSmash - OudsSpacingInsetKeyToken.Shortest -> insetShortest - OudsSpacingInsetKeyToken.Shorter -> insetShorter - OudsSpacingInsetKeyToken.Short -> insetShort - OudsSpacingInsetKeyToken.Medium -> insetMedium - OudsSpacingInsetKeyToken.Tall -> insetTall - OudsSpacingInsetKeyToken.Taller -> insetTaller - OudsSpacingInsetKeyToken.Tallest -> insetTallest - OudsSpacingInsetKeyToken.Spacious -> insetSpacious + OudsSpaceInsetKeyToken.None -> insetNone + OudsSpaceInsetKeyToken.Smash -> insetSmash + OudsSpaceInsetKeyToken.Shortest -> insetShortest + OudsSpaceInsetKeyToken.Shorter -> insetShorter + OudsSpaceInsetKeyToken.Short -> insetShort + OudsSpaceInsetKeyToken.Medium -> insetMedium + OudsSpaceInsetKeyToken.Tall -> insetTall + OudsSpaceInsetKeyToken.Taller -> insetTaller + OudsSpaceInsetKeyToken.Tallest -> insetTallest + OudsSpaceInsetKeyToken.Spacious -> insetSpacious } } @Stable -fun OudsSpacings.fromToken(token: OudsSpacingColumnGapKeyToken): Dp { +fun OudsSpaces.fromToken(token: OudsSpaceColumnGapKeyToken): Dp { return when (token) { - OudsSpacingColumnGapKeyToken.None -> columnGapNone - OudsSpacingColumnGapKeyToken.Shorter -> columnGapShorter - OudsSpacingColumnGapKeyToken.Short -> columnGapShort - OudsSpacingColumnGapKeyToken.Medium -> columnGapMedium - OudsSpacingColumnGapKeyToken.Tall -> columnGapTall - OudsSpacingColumnGapKeyToken.Taller -> columnGapTaller - OudsSpacingColumnGapKeyToken.WithIconNone -> columnGapWithIconNone - OudsSpacingColumnGapKeyToken.WithIconShortest -> columnGapWithIconShortest - OudsSpacingColumnGapKeyToken.WithIconShorter -> columnGapWithIconShorter - OudsSpacingColumnGapKeyToken.WithIconShort -> columnGapWithIconShort - OudsSpacingColumnGapKeyToken.WithIconMedium -> columnGapWithIconMedium - OudsSpacingColumnGapKeyToken.WithIconTall -> columnGapWithIconTall - OudsSpacingColumnGapKeyToken.WithArrowNone -> columnGapWithArrowNone - OudsSpacingColumnGapKeyToken.WithArrowShortest -> columnGapWithArrowShortest - OudsSpacingColumnGapKeyToken.WithArrowShorter -> columnGapWithArrowShorter - OudsSpacingColumnGapKeyToken.WithArrowShort -> columnGapWithArrowShort - OudsSpacingColumnGapKeyToken.WithArrowMedium -> columnGapWithArrowMedium - OudsSpacingColumnGapKeyToken.WithArrowTall -> columnGapWithArrowTall + OudsSpaceColumnGapKeyToken.None -> columnGapNone + OudsSpaceColumnGapKeyToken.Shorter -> columnGapShorter + OudsSpaceColumnGapKeyToken.Short -> columnGapShort + OudsSpaceColumnGapKeyToken.Medium -> columnGapMedium + OudsSpaceColumnGapKeyToken.Tall -> columnGapTall + OudsSpaceColumnGapKeyToken.Taller -> columnGapTaller + OudsSpaceColumnGapKeyToken.WithIconNone -> columnGapWithIconNone + OudsSpaceColumnGapKeyToken.WithIconShortest -> columnGapWithIconShortest + OudsSpaceColumnGapKeyToken.WithIconShorter -> columnGapWithIconShorter + OudsSpaceColumnGapKeyToken.WithIconShort -> columnGapWithIconShort + OudsSpaceColumnGapKeyToken.WithIconMedium -> columnGapWithIconMedium + OudsSpaceColumnGapKeyToken.WithIconTall -> columnGapWithIconTall + OudsSpaceColumnGapKeyToken.WithArrowNone -> columnGapWithArrowNone + OudsSpaceColumnGapKeyToken.WithArrowShortest -> columnGapWithArrowShortest + OudsSpaceColumnGapKeyToken.WithArrowShorter -> columnGapWithArrowShorter + OudsSpaceColumnGapKeyToken.WithArrowShort -> columnGapWithArrowShort + OudsSpaceColumnGapKeyToken.WithArrowMedium -> columnGapWithArrowMedium + OudsSpaceColumnGapKeyToken.WithArrowTall -> columnGapWithArrowTall } } @Stable -fun OudsSpacings.fromToken(token: OudsSpacingRowGapKeyToken): Dp { +fun OudsSpaces.fromToken(token: OudsSpaceRowGapKeyToken): Dp { return when (token) { - OudsSpacingRowGapKeyToken.None -> rowGapNone - OudsSpacingRowGapKeyToken.Shortest -> rowGapShortest - OudsSpacingRowGapKeyToken.Shorter -> rowGapShorter - OudsSpacingRowGapKeyToken.Short -> rowGapShort - OudsSpacingRowGapKeyToken.Medium -> rowGapMedium - OudsSpacingRowGapKeyToken.Tall -> rowGapTall - OudsSpacingRowGapKeyToken.WithIconNone -> rowGapWithIconNone - OudsSpacingRowGapKeyToken.WithIconShortest -> rowGapWithIconShortest - OudsSpacingRowGapKeyToken.WithIconShorter -> rowGapWithIconShorter - OudsSpacingRowGapKeyToken.WithIconShort -> rowGapWithIconShort - OudsSpacingRowGapKeyToken.WithIconMedium -> rowGapWithIconMedium - OudsSpacingRowGapKeyToken.WithIconTall -> rowGapWithIconTall + OudsSpaceRowGapKeyToken.None -> rowGapNone + OudsSpaceRowGapKeyToken.Shortest -> rowGapShortest + OudsSpaceRowGapKeyToken.Shorter -> rowGapShorter + OudsSpaceRowGapKeyToken.Short -> rowGapShort + OudsSpaceRowGapKeyToken.Medium -> rowGapMedium + OudsSpaceRowGapKeyToken.Tall -> rowGapTall + OudsSpaceRowGapKeyToken.WithIconNone -> rowGapWithIconNone + OudsSpaceRowGapKeyToken.WithIconShortest -> rowGapWithIconShortest + OudsSpaceRowGapKeyToken.WithIconShorter -> rowGapWithIconShorter + OudsSpaceRowGapKeyToken.WithIconShort -> rowGapWithIconShort + OudsSpaceRowGapKeyToken.WithIconMedium -> rowGapWithIconMedium + OudsSpaceRowGapKeyToken.WithIconTall -> rowGapWithIconTall } } /** * Converts an OUDS column gap space token to the local column gap space value provided by the theme. */ -val OudsSpacingColumnGapKeyToken.value: Dp +val OudsSpaceColumnGapKeyToken.value: Dp @ReadOnlyComposable @Composable - get() = OudsTheme.spacings.fromToken(this) + get() = OudsTheme.spaces.fromToken(this) /** * Converts an OUDS fixed space token to the local space value provided by the theme. */ -val OudsSpacingFixedKeyToken.value: Dp +val OudsSpaceFixedKeyToken.value: Dp @ReadOnlyComposable @Composable - get() = OudsTheme.spacings.fromToken(this) + get() = OudsTheme.spaces.fromToken(this) /** * Converts an OUDS block padding token to the local block padding value provided by the theme. */ -val OudsSpacingPaddingBlockKeyToken.value: Dp +val OudsSpacePaddingBlockKeyToken.value: Dp @ReadOnlyComposable @Composable - get() = OudsTheme.spacings.fromToken(this) + get() = OudsTheme.spaces.fromToken(this) /** * Converts an OUDS inline padding token to the local inline padding value provided by the theme. */ -val OudsSpacingPaddingInlineKeyToken.value: Dp +val OudsSpacePaddingInlineKeyToken.value: Dp @ReadOnlyComposable @Composable - get() = OudsTheme.spacings.fromToken(this) + get() = OudsTheme.spaces.fromToken(this) /** * Converts an OUDS inset token to the local inset value provided by the theme. */ -val OudsSpacingInsetKeyToken.value: Dp +val OudsSpaceInsetKeyToken.value: Dp @ReadOnlyComposable @Composable - get() = OudsTheme.spacings.fromToken(this) + get() = OudsTheme.spaces.fromToken(this) /** * Converts an OUDS row gap space token to the local row gap space value provided by the theme. */ -val OudsSpacingRowGapKeyToken.value: Dp +val OudsSpaceRowGapKeyToken.value: Dp @ReadOnlyComposable @Composable - get() = OudsTheme.spacings.fromToken(this) + get() = OudsTheme.spaces.fromToken(this) /** * Converts an OUDS scaled space token to the local space value provided by the theme depending on the window size. */ -val OudsSpacingScaledKeyToken.value: Dp +val OudsSpaceScaledKeyToken.value: Dp @Composable - get() = OudsTheme.spacings.fromToken(this, OudsAdaptiveWindowType.fromWindowWidth(currentWindowWidth())) + get() = OudsTheme.spaces.fromToken(this, OudsAdaptiveWindowType.fromWindowWidth(currentWindowWidth())) diff --git a/core/src/main/java/com/orange/ouds/core/theme/OudsTheme.kt b/core/src/main/java/com/orange/ouds/core/theme/OudsTheme.kt index 21fba5ae..48b1079f 100644 --- a/core/src/main/java/com/orange/ouds/core/theme/OudsTheme.kt +++ b/core/src/main/java/com/orange/ouds/core/theme/OudsTheme.kt @@ -32,7 +32,7 @@ private val LocalTypography = staticCompositionLocalOf { missing private val LocalGrids = staticCompositionLocalOf { missingCompositionLocalError("LocalGrids") } private val LocalOpacities = staticCompositionLocalOf { missingCompositionLocalError("LocalOpacities") } private val LocalSizes = staticCompositionLocalOf { missingCompositionLocalError("LocalSizes") } -private val LocalSpacing = staticCompositionLocalOf { missingCompositionLocalError("LocalSpacing") } +private val LocalSpaces = staticCompositionLocalOf { missingCompositionLocalError("LocalSpaces") } private val LocalComponentsTokens = staticCompositionLocalOf { missingCompositionLocalError("LocalComponentsTokens") } object OudsTheme { @@ -71,10 +71,10 @@ object OudsTheme { @ReadOnlyComposable get() = LocalSizes.current - val spacings: OudsSpacings + val spaces: OudsSpaces @Composable @ReadOnlyComposable - get() = LocalSpacing.current + get() = LocalSpaces.current val componentsTokens: OudsComponentsTokens @Composable @@ -106,7 +106,7 @@ fun OudsTheme( LocalGrids provides themeContract.gridTokens.getGrids(), LocalOpacities provides themeContract.opacityTokens.getOpacity(), LocalSizes provides themeContract.sizeTokens.getSizes(), - LocalSpacing provides themeContract.spacingTokens.getSpacings(), + LocalSpaces provides themeContract.spaceTokens.getSpaces(), LocalComponentsTokens provides themeContract.componentsTokens ) { MaterialTheme(colorScheme = if (darkThemeEnabled) themeContract.colorTokens.materialDarkColorScheme else themeContract.colorTokens.materialLightColorScheme) { diff --git a/theme-contract/src/main/java/com/orange/ouds/theme/OudsThemeContract.kt b/theme-contract/src/main/java/com/orange/ouds/theme/OudsThemeContract.kt index 10e669c0..6cf9eb90 100644 --- a/theme-contract/src/main/java/com/orange/ouds/theme/OudsThemeContract.kt +++ b/theme-contract/src/main/java/com/orange/ouds/theme/OudsThemeContract.kt @@ -22,7 +22,7 @@ import com.orange.ouds.theme.tokens.semantic.OudsFontSemanticTokens import com.orange.ouds.theme.tokens.semantic.OudsGridSemanticTokens import com.orange.ouds.theme.tokens.semantic.OudsOpacitySemanticTokens import com.orange.ouds.theme.tokens.semantic.OudsSizeSemanticTokens -import com.orange.ouds.theme.tokens.semantic.OudsSpacingSemanticTokens +import com.orange.ouds.theme.tokens.semantic.OudsSpaceSemanticTokens interface OudsThemeContract : Parcelable { @@ -80,10 +80,10 @@ interface OudsThemeContract : Parcelable { get() = OudsSizeSemanticTokens() /** - * Spacing semantic tokens values used in the theme + * Space semantic tokens values used in the theme */ - val spacingTokens: OudsSpacingSemanticTokens - get() = OudsSpacingSemanticTokens() + val spaceTokens: OudsSpaceSemanticTokens + get() = OudsSpaceSemanticTokens() /** * Customization of the OUDS components if needed diff --git a/theme-contract/src/main/java/com/orange/ouds/theme/tokens/OudsSpacingKeyTokens.kt b/theme-contract/src/main/java/com/orange/ouds/theme/tokens/OudsSpaceKeyTokens.kt similarity index 87% rename from theme-contract/src/main/java/com/orange/ouds/theme/tokens/OudsSpacingKeyTokens.kt rename to theme-contract/src/main/java/com/orange/ouds/theme/tokens/OudsSpaceKeyTokens.kt index 505dd368..30246e55 100644 --- a/theme-contract/src/main/java/com/orange/ouds/theme/tokens/OudsSpacingKeyTokens.kt +++ b/theme-contract/src/main/java/com/orange/ouds/theme/tokens/OudsSpaceKeyTokens.kt @@ -12,7 +12,7 @@ package com.orange.ouds.theme.tokens -enum class OudsSpacingFixedKeyToken { +enum class OudsSpaceFixedKeyToken { None, Smash, Shortest, @@ -27,7 +27,7 @@ enum class OudsSpacingFixedKeyToken { Jumbo } -enum class OudsSpacingScaledKeyToken { +enum class OudsSpaceScaledKeyToken { None, Smash, Shortest, @@ -40,7 +40,7 @@ enum class OudsSpacingScaledKeyToken { Spacious } -enum class OudsSpacingPaddingInlineKeyToken { +enum class OudsSpacePaddingInlineKeyToken { None, Shorter, Short, @@ -66,7 +66,7 @@ enum class OudsSpacingPaddingInlineKeyToken { WithArrowTallest, } -enum class OudsSpacingPaddingBlockKeyToken { +enum class OudsSpacePaddingBlockKeyToken { None, Shorter, Short, @@ -83,7 +83,7 @@ enum class OudsSpacingPaddingBlockKeyToken { WithIconTaller, } -enum class OudsSpacingInsetKeyToken { +enum class OudsSpaceInsetKeyToken { None, Smash, Shortest, @@ -96,7 +96,7 @@ enum class OudsSpacingInsetKeyToken { Spacious, } -enum class OudsSpacingColumnGapKeyToken { +enum class OudsSpaceColumnGapKeyToken { None, Shorter, Short, @@ -117,7 +117,7 @@ enum class OudsSpacingColumnGapKeyToken { WithArrowTall, } -enum class OudsSpacingRowGapKeyToken { +enum class OudsSpaceRowGapKeyToken { None, Shortest, Shorter, diff --git a/theme-contract/src/main/java/com/orange/ouds/theme/tokens/components/OudsButtonTokens.kt b/theme-contract/src/main/java/com/orange/ouds/theme/tokens/components/OudsButtonTokens.kt index 383e221f..24dcecc0 100644 --- a/theme-contract/src/main/java/com/orange/ouds/theme/tokens/components/OudsButtonTokens.kt +++ b/theme-contract/src/main/java/com/orange/ouds/theme/tokens/components/OudsButtonTokens.kt @@ -14,7 +14,7 @@ package com.orange.ouds.theme.tokens.components import com.orange.ouds.theme.tokens.OudsBorderKeyToken import com.orange.ouds.theme.tokens.OudsElevationKeyToken -import com.orange.ouds.theme.tokens.OudsSpacingFixedKeyToken +import com.orange.ouds.theme.tokens.OudsSpaceFixedKeyToken import com.orange.ouds.theme.tokens.OudsTypographyKeyToken import com.orange.ouds.theme.tokens.semantic.OudsColorKeyToken @@ -30,6 +30,6 @@ open class OudsButtonTokens( val hoveredElevation: OudsElevationKeyToken = OudsElevationKeyToken.None, val disabledElevation: OudsElevationKeyToken = OudsElevationKeyToken.None, val labelStyle: OudsTypographyKeyToken = OudsTypographyKeyToken.BodyStrongLarge, - val verticalContentPadding: OudsSpacingFixedKeyToken = OudsSpacingFixedKeyToken.Smash, - val horizontalContentPadding: OudsSpacingFixedKeyToken = OudsSpacingFixedKeyToken.Tall + val verticalContentPadding: OudsSpaceFixedKeyToken = OudsSpaceFixedKeyToken.Smash, + val horizontalContentPadding: OudsSpaceFixedKeyToken = OudsSpaceFixedKeyToken.Tall ) \ No newline at end of file diff --git a/theme-contract/src/main/java/com/orange/ouds/theme/tokens/semantic/OudsSpacingSemanticTokens.kt b/theme-contract/src/main/java/com/orange/ouds/theme/tokens/semantic/OudsSpaceSemanticTokens.kt similarity index 99% rename from theme-contract/src/main/java/com/orange/ouds/theme/tokens/semantic/OudsSpacingSemanticTokens.kt rename to theme-contract/src/main/java/com/orange/ouds/theme/tokens/semantic/OudsSpaceSemanticTokens.kt index 872f8fd3..6cbd2a48 100644 --- a/theme-contract/src/main/java/com/orange/ouds/theme/tokens/semantic/OudsSpacingSemanticTokens.kt +++ b/theme-contract/src/main/java/com/orange/ouds/theme/tokens/semantic/OudsSpaceSemanticTokens.kt @@ -14,7 +14,7 @@ package com.orange.ouds.theme.tokens.semantic import com.orange.ouds.tokens.global.raw.DimensionRawTokens -data class OudsSpacingSemanticTokens( +data class OudsSpaceSemanticTokens( val fixedNone: Float = DimensionRawTokens.dimension0, val fixedSmash: Float = DimensionRawTokens.dimension25, val fixedShortest: Float = DimensionRawTokens.dimension50, diff --git a/theme-white-label/src/main/java/com/orange/ouds/theme/whitelabel/WhiteLabelTheme.kt b/theme-white-label/src/main/java/com/orange/ouds/theme/whitelabel/WhiteLabelTheme.kt index 2c9947e3..1430b05a 100644 --- a/theme-white-label/src/main/java/com/orange/ouds/theme/whitelabel/WhiteLabelTheme.kt +++ b/theme-white-label/src/main/java/com/orange/ouds/theme/whitelabel/WhiteLabelTheme.kt @@ -17,7 +17,7 @@ import androidx.compose.ui.text.font.FontFamily import com.orange.ouds.theme.OudsThemeContract import com.orange.ouds.theme.tokens.OudsBorderKeyToken import com.orange.ouds.theme.tokens.OudsElevationKeyToken -import com.orange.ouds.theme.tokens.OudsSpacingFixedKeyToken +import com.orange.ouds.theme.tokens.OudsSpaceFixedKeyToken import com.orange.ouds.theme.tokens.OudsTypographyKeyToken import com.orange.ouds.theme.tokens.components.OudsButtonTokens import com.orange.ouds.theme.tokens.components.OudsComponentsTokens @@ -45,8 +45,8 @@ open class WhiteLabelTheme : OudsThemeContract { focusedElevation = OudsElevationKeyToken.OverlayDefault, hoveredElevation = OudsElevationKeyToken.OverlayDefault, labelStyle = OudsTypographyKeyToken.BodyDefaultLarge, - verticalContentPadding = OudsSpacingFixedKeyToken.Shortest, - horizontalContentPadding = OudsSpacingFixedKeyToken.Short + verticalContentPadding = OudsSpaceFixedKeyToken.Shortest, + horizontalContentPadding = OudsSpaceFixedKeyToken.Short ) ) } From 5f6dce11c43b464db3d08c5c3649b39cdcec27c9 Mon Sep 17 00:00:00 2001 From: Pauline Auvray Date: Wed, 23 Oct 2024 14:59:12 +0200 Subject: [PATCH 14/32] Rename strings --- .../ouds/app/ui/tokens/TokenCategory.kt | 8 +++--- .../ui/tokens/TokenCategoryDetailScreen.kt | 2 +- .../ouds/app/ui/tokens/TokenProperty.kt | 18 ++++++------ app/src/main/res/values/strings.xml | 28 +++++++++---------- 4 files changed, 28 insertions(+), 28 deletions(-) diff --git a/app/src/main/java/com/orange/ouds/app/ui/tokens/TokenCategory.kt b/app/src/main/java/com/orange/ouds/app/ui/tokens/TokenCategory.kt index e9c2ce76..98f3bb3d 100644 --- a/app/src/main/java/com/orange/ouds/app/ui/tokens/TokenCategory.kt +++ b/app/src/main/java/com/orange/ouds/app/ui/tokens/TokenCategory.kt @@ -49,9 +49,9 @@ sealed class TokenCategory( subcategories = listOf(Space, Size) ) { data object Space : TokenCategory( - R.string.app_tokens_space_label, + R.string.app_tokens_dimension_space_label, R.drawable.ic_dimension, - R.string.app_tokens_space_description_text, + R.string.app_tokens_dimension_space_description_text, listOf( TokenProperty.SpaceScaled, TokenProperty.SpaceFixed, TokenProperty.SpacePaddingInline, TokenProperty.SpacePaddingStack, TokenProperty.SpacePaddingInset, TokenProperty.SpaceColumnGap, TokenProperty.SpaceRowGap @@ -60,9 +60,9 @@ sealed class TokenCategory( ) data object Size : TokenCategory( - R.string.app_tokens_size_label, + R.string.app_tokens_dimension_size_label, R.drawable.ic_dimension, - R.string.app_tokens_size_description_text, + R.string.app_tokens_dimension_size_description_text, listOf(TokenProperty.SizeIconDecorative, TokenProperty.SizeIconWithLabel), subcategory = true ) 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 index b6bbd7a0..c5080b6d 100644 --- 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 @@ -99,7 +99,7 @@ fun TokenCategoryDetailScreen(tokenCategory: TokenCategory, onSubcategoryClick: TokenIllustration(tokenProperty = tokenProperty, token = token) Text( modifier = Modifier.fillMaxWidth(), - text = stringResource(id = R.string.app_tokens_size_iconWithLabelTokenName_label, token.name, token.literalValue), + text = stringResource(id = R.string.app_tokens_dimension_size_iconWithLabelTokenName_label, token.name, token.literalValue), maxLines = 1, overflow = TextOverflow.Ellipsis, style = OudsTypographyKeyToken.BodyDefaultMedium.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 index 9d11e87b..676681a7 100644 --- 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 @@ -163,7 +163,7 @@ sealed class TokenProperty( } data object SizeIconDecorative : TokenProperty( - nameRes = R.string.app_tokens_size_iconDecorative_label, + nameRes = R.string.app_tokens_dimension_size_iconDecorative_label, tokens = { OudsSizeIconDecorativeKeyToken.entries.map { Token(it.name, it.value) } } ) { @Composable @@ -185,7 +185,7 @@ sealed class TokenProperty( } data object SizeIconWithLabel : TokenProperty( - nameRes = R.string.app_tokens_size_iconWithLabel_label, + nameRes = R.string.app_tokens_dimension_size_iconWithLabel_label, tokens = { OudsSizeIconWithTextKeyToken.entries.map { Token(it.name, it.value) } } ) { @Composable @@ -214,7 +214,7 @@ sealed class TokenProperty( } data object SpaceColumnGap : TokenProperty( - nameRes = R.string.app_tokens_space_columnGap_label, + nameRes = R.string.app_tokens_dimension_space_columnGap_label, tokens = { OudsSpaceColumnGapKeyToken.entries.map { Token(it.name, it.value) } } ) { @Composable @@ -222,7 +222,7 @@ sealed class TokenProperty( } data object SpaceFixed : TokenProperty( - nameRes = R.string.app_tokens_space_fixed_label, + nameRes = R.string.app_tokens_dimension_space_fixed_label, tokens = { OudsSpaceFixedKeyToken.entries.map { Token(it.name, it.value) } } ) { @Composable @@ -230,7 +230,7 @@ sealed class TokenProperty( } data object SpacePaddingInline : TokenProperty( - nameRes = R.string.app_tokens_space_paddingInline_label, + nameRes = R.string.app_tokens_dimension_space_paddingInline_label, tokens = { OudsSpacePaddingInlineKeyToken.entries.map { Token(it.name, it.value) } } ) { @Composable @@ -261,7 +261,7 @@ sealed class TokenProperty( } data object SpacePaddingInset : TokenProperty( - nameRes = R.string.app_tokens_space_paddingInset_label, + nameRes = R.string.app_tokens_dimension_space_paddingInset_label, tokens = { OudsSpaceInsetKeyToken.entries.map { Token(it.name, it.value) } } ) { @@ -289,7 +289,7 @@ sealed class TokenProperty( } data object SpacePaddingStack : TokenProperty( - nameRes = R.string.app_tokens_space_paddingStack_label, + nameRes = R.string.app_tokens_dimension_space_paddingStack_label, tokens = { OudsSpacePaddingBlockKeyToken.entries.map { Token(it.name, it.value) } } ) { @@ -301,7 +301,7 @@ sealed class TokenProperty( } data object SpaceRowGap : TokenProperty( - nameRes = R.string.app_tokens_space_rowGap_label, + nameRes = R.string.app_tokens_dimension_space_rowGap_label, tokens = { OudsSpaceRowGapKeyToken.entries.map { Token(it.name, it.value) } } ) { @@ -314,7 +314,7 @@ sealed class TokenProperty( } data object SpaceScaled : TokenProperty( - nameRes = R.string.app_tokens_space_scaled_label, + nameRes = R.string.app_tokens_dimension_space_scaled_label, tokens = { OudsSpaceScaledKeyToken.entries.map { Token(it.name, it.value) } } ) { @Composable diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml index ae18cb43..615753fc 100644 --- a/app/src/main/res/values/strings.xml +++ b/app/src/main/res/values/strings.xml @@ -46,22 +46,22 @@ Dimension provides standard sizing and spacing to ensure visual consistency across the UI. - Space - Space refers to the measurements used to define the spacing between UI elements. - Scaled - Fixed - Padding inline - Padding stack - Padding inset - Column gap - Row gap + Space + Space refers to the measurements used to define the spacing between UI elements. + Scaled + Fixed + Padding inline + Padding stack + Padding inset + Column gap + Row gap - Size - Size refers to the specific measurements used to define the dimensions of UI elements within the design system. - Icon decorative - Icon with label - %1$s (%2$s) + Size + Size refers to the specific measurements used to define the dimensions of UI elements within the design system. + Icon decorative + Icon with label + %1$s (%2$s) From b1654ac0371cc3a1143c3b6176d9ff402c20fac9 Mon Sep 17 00:00:00 2001 From: Pauline Auvray Date: Wed, 23 Oct 2024 16:13:27 +0200 Subject: [PATCH 15/32] Add WithArrow tokens illustrations Factorize token properties illustrations --- .../com/orange/ouds/app/ui/tokens/Token.kt | 30 ++++ .../ouds/app/ui/tokens/TokenProperty.kt | 170 +++--------------- .../ui/tokens/TokenPropertyIllustration.kt | 129 +++++++++++++ app/src/main/res/drawable/ic_chevron_down.xml | 9 + 4 files changed, 197 insertions(+), 141 deletions(-) create mode 100644 app/src/main/java/com/orange/ouds/app/ui/tokens/Token.kt create mode 100644 app/src/main/java/com/orange/ouds/app/ui/tokens/TokenPropertyIllustration.kt create mode 100644 app/src/main/res/drawable/ic_chevron_down.xml diff --git a/app/src/main/java/com/orange/ouds/app/ui/tokens/Token.kt b/app/src/main/java/com/orange/ouds/app/ui/tokens/Token.kt new file mode 100644 index 00000000..aa38901e --- /dev/null +++ b/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(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() + } +} 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 index 676681a7..a23a6acf 100644 --- 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 @@ -34,10 +34,7 @@ import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color -import androidx.compose.ui.layout.ContentScale import androidx.compose.ui.res.painterResource -import androidx.compose.ui.res.stringResource -import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp @@ -45,8 +42,6 @@ import com.orange.ouds.app.R import com.orange.ouds.core.theme.value import com.orange.ouds.foundation.extensions.orElse import com.orange.ouds.theme.OudsBorderStyle -import com.orange.ouds.theme.dashedBorder -import com.orange.ouds.theme.dottedBorder import com.orange.ouds.theme.tokens.OudsBorderKeyToken import com.orange.ouds.theme.tokens.OudsElevationKeyToken import com.orange.ouds.theme.tokens.OudsOpacityKeyToken @@ -66,64 +61,28 @@ sealed class TokenProperty( @StringRes val nameRes: Int?, val tokens: @Composable () -> List> ) { - protected companion object { - protected val defaultIllustrationSize = 64.dp - } - data object BorderRadius : TokenProperty( nameRes = R.string.app_tokens_border_radius_label, tokens = { OudsBorderKeyToken.Radius.entries.map { Token(it.name, it.value) } } ) { @Composable - fun Illustration(radius: Dp) { - Box( - modifier = Modifier - .size(defaultIllustrationSize) - .border( - width = 1.dp, - color = OudsColorKeyToken.OnSurface.value, //TODO use ContentDefault token when available - shape = RoundedCornerShape(radius) - ) - .background(color = OudsColorKeyToken.Surface.value), //TODO use BgDefaultSecondary token when available - ) - } + fun Illustration(radius: Dp) = BorderIllustrationBox(shape = RoundedCornerShape(radius)) } - data object BorderWidth : TokenProperty( - nameRes = R.string.app_tokens_border_width_label, - tokens = { OudsBorderKeyToken.Width.entries.map { Token(it.name, it.value) } } + data object BorderStyle : TokenProperty( + nameRes = R.string.app_tokens_border_style_label, + tokens = { OudsBorderKeyToken.Style.entries.map { Token(it.name, it.value) } } ) { @Composable - fun Illustration(width: Dp) { - Box( - modifier = Modifier - .size(defaultIllustrationSize) - .border(width = width, color = OudsColorKeyToken.OnSurface.value) //TODO use ContentDefault token when available - .background(color = OudsColorKeyToken.Surface.value), //TODO use BgDefaultSecondary token when available - ) - } + fun Illustration(style: OudsBorderStyle) = BorderIllustrationBox(style = style) } - data object BorderStyle : TokenProperty( - nameRes = R.string.app_tokens_border_style_label, - tokens = { OudsBorderKeyToken.Style.entries.map { Token(it.name, it.value) } } + data object BorderWidth : TokenProperty( + nameRes = R.string.app_tokens_border_width_label, + tokens = { OudsBorderKeyToken.Width.entries.map { Token(it.name, it.value) } } ) { @Composable - fun Illustration(style: OudsBorderStyle) { - val borderColor = OudsColorKeyToken.OnSurface.value //TODO use ContentDefault token when available - val borderWidth = 1.dp - val modifier = when (style) { - OudsBorderStyle.None -> Modifier - OudsBorderStyle.Solid -> Modifier.border(width = borderWidth, color = borderColor) - OudsBorderStyle.Dashed -> Modifier.dashedBorder(width = borderWidth, color = borderColor) - OudsBorderStyle.Dotted -> Modifier.dottedBorder(width = borderWidth, color = borderColor) - } - Box( - modifier = modifier - .size(defaultIllustrationSize) - .background(color = OudsColorKeyToken.Surface.value), //TODO use BgDefaultSecondary token when available - ) - } + fun Illustration(width: Dp) = BorderIllustrationBox(width = width) } data object Elevation : TokenProperty( @@ -133,11 +92,7 @@ sealed class TokenProperty( @Composable fun Illustration(elevation: Dp) { Surface(shadowElevation = elevation) { - Box( - modifier = Modifier - .size(defaultIllustrationSize) - .background(color = OudsColorKeyToken.Surface.value), //TODO use BgDefaultSecondary token when available - ) + IllustrationBox(backgroundColor = OudsColorKeyToken.Surface.value) //TODO use BgDefaultSecondary token when available } } } @@ -168,12 +123,7 @@ sealed class TokenProperty( ) { @Composable fun Illustration(size: Dp) { - Box( - modifier = Modifier - .size(80.dp) - .background(color = OudsColorKeyToken.OnSurface.value), //TODO use BgEmphasizedPrimary token when available - contentAlignment = Alignment.Center, - ) { + IllustrationBox(modifier = Modifier.size(80.dp), contentAlignment = Alignment.Center) { Icon( modifier = Modifier.size(size), painter = painterResource(R.drawable.ic_design_token_figma), @@ -218,7 +168,7 @@ sealed class TokenProperty( tokens = { OudsSpaceColumnGapKeyToken.entries.map { Token(it.name, it.value) } } ) { @Composable - fun Illustration(size: Dp) = SpaceIllustration(size = size, contentAlignment = Alignment.Center) + fun Illustration(size: Dp) = SpaceIllustrationBox(size = size, contentAlignment = Alignment.Center) } data object SpaceFixed : TokenProperty( @@ -226,7 +176,7 @@ sealed class TokenProperty( tokens = { OudsSpaceFixedKeyToken.entries.map { Token(it.name, it.value) } } ) { @Composable - fun Illustration(size: Dp) = SpaceIllustration(size, contentAlignment = Alignment.Center) + fun Illustration(size: Dp) = SpaceIllustrationBox(size, contentAlignment = Alignment.Center) } data object SpacePaddingInline : TokenProperty( @@ -235,28 +185,16 @@ sealed class TokenProperty( ) { @Composable fun Illustration(size: Dp, tokenName: String) = when { - tokenName.contains("WithIcon") -> { - Row( - modifier = Modifier - .size(defaultIllustrationSize) - .background(color = OudsColorKeyToken.OnSurface.value), //TODO use BgEmphasizedPrimary token when available - verticalAlignment = Alignment.CenterVertically - ) { - Box( - modifier = Modifier - .fillMaxHeight() - .width(width = size) - .background(Color(0xFF26B2FF)) //TODO use AlwaysInfo token when available - ) - Image( - modifier = Modifier.padding(horizontal = 1.dp), - painter = painterResource(R.drawable.ic_design_token_figma_no_padding), - contentDescription = null, - contentScale = ContentScale.None - ) - } - } - else -> SpaceIllustration(size = size) + tokenName.contains("WithIcon") -> SpacePaddingInlineWithImageIllustrationRow( + spaceSize = size, + imagePainter = painterResource(R.drawable.ic_design_token_figma_no_padding), + imageModifier = Modifier.padding(horizontal = 1.dp) + ) + tokenName.contains("WithArrow") -> SpacePaddingInlineWithImageIllustrationRow( + spaceSize = size, + imagePainter = painterResource(R.drawable.ic_chevron_down) + ) + else -> SpaceIllustrationBox(size = size) } } @@ -267,11 +205,7 @@ sealed class TokenProperty( @Composable fun Illustration(size: Dp) { - Box( - modifier = Modifier - .size(defaultIllustrationSize) - .background(color = OudsColorKeyToken.OnSurface.value), //TODO use BgEmphasizedPrimary token when available - ) { + IllustrationBox { Box( modifier = Modifier .fillMaxWidth() @@ -292,23 +226,18 @@ sealed class TokenProperty( nameRes = R.string.app_tokens_dimension_space_paddingStack_label, tokens = { OudsSpacePaddingBlockKeyToken.entries.map { Token(it.name, it.value) } } ) { - @Composable - fun Illustration(size: Dp) = SpaceIllustration( - size = size, - orientation = DimensionOrientation.Vertical - ) + fun Illustration(size: Dp) = SpaceIllustrationBox(size = size, orientation = SpaceOrientation.Vertical) } data object SpaceRowGap : TokenProperty( nameRes = R.string.app_tokens_dimension_space_rowGap_label, tokens = { OudsSpaceRowGapKeyToken.entries.map { Token(it.name, it.value) } } ) { - @Composable - fun Illustration(size: Dp) = SpaceIllustration( + fun Illustration(size: Dp) = SpaceIllustrationBox( size = size, - orientation = DimensionOrientation.Vertical, + orientation = SpaceOrientation.Vertical, contentAlignment = Alignment.Center ) } @@ -318,50 +247,9 @@ sealed class TokenProperty( tokens = { OudsSpaceScaledKeyToken.entries.map { Token(it.name, it.value) } } ) { @Composable - fun Illustration(size: Dp) = SpaceIllustration(size = size, contentAlignment = Alignment.Center) + fun Illustration(size: Dp) = SpaceIllustrationBox(size = size, contentAlignment = Alignment.Center) } data object Typography : TokenProperty(nameRes = null, tokens = { OudsTypographyKeyToken.entries.map { Token(it.name, it.value) } }) - @Composable - protected fun SpaceIllustration( - size: Dp, - orientation: DimensionOrientation = DimensionOrientation.Horizontal, - contentAlignment: Alignment = Alignment.TopStart - ) { - val dimensionBoxModifier = when (orientation) { - DimensionOrientation.Horizontal -> Modifier - .fillMaxHeight() - .width(width = size) - - DimensionOrientation.Vertical -> Modifier - .fillMaxWidth() - .height(height = size) - } - Box( - modifier = Modifier - .size(defaultIllustrationSize) - .background(color = OudsColorKeyToken.OnSurface.value), //TODO use BgEmphasizedPrimary token when available - contentAlignment = contentAlignment, - ) { - Box( - modifier = dimensionBoxModifier.background(Color(0xFF26B2FF)) //TODO use AlwaysInfo token when available - ) - } - } - - protected enum class DimensionOrientation { - Horizontal, Vertical - } -} - -data class Token(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() - } -} +} \ No newline at end of file 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 new file mode 100644 index 00000000..ffe2f491 --- /dev/null +++ b/app/src/main/java/com/orange/ouds/app/ui/tokens/TokenPropertyIllustration.kt @@ -0,0 +1,129 @@ +/* + * 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.foundation.Image +import androidx.compose.foundation.background +import androidx.compose.foundation.border +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.BoxScope +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.fillMaxHeight +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.size +import androidx.compose.foundation.layout.width +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.graphics.RectangleShape +import androidx.compose.ui.graphics.Shape +import androidx.compose.ui.graphics.painter.Painter +import androidx.compose.ui.layout.ContentScale +import androidx.compose.ui.unit.Dp +import androidx.compose.ui.unit.dp +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.semantic.OudsColorKeyToken + +private val defaultIllustrationSize = 64.dp + +@Composable +fun IllustrationBox( + modifier: Modifier = Modifier, + backgroundColor: Color = OudsColorKeyToken.OnSurface.value, + contentAlignment: Alignment = Alignment.TopStart, + content: @Composable BoxScope.() -> Unit = { } +) { + Box( + modifier = modifier + .size(defaultIllustrationSize) + .background(color = backgroundColor), + contentAlignment = contentAlignment, + ) { + content() + } +} + +@Composable +fun BorderIllustrationBox( + width: Dp = 1.dp, + shape: Shape = RectangleShape, + style: OudsBorderStyle = OudsBorderStyle.Solid +) { + val borderColor = OudsColorKeyToken.OnSurface.value //TODO use ContentDefault token when available + 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 = Color.Transparent) +} + +@Composable +fun SpaceIllustrationBox( + size: Dp, + orientation: SpaceOrientation = SpaceOrientation.Horizontal, + contentAlignment: Alignment = Alignment.TopStart +) { + val dimensionBoxModifier = when (orientation) { + SpaceOrientation.Horizontal -> Modifier + .fillMaxHeight() + .width(width = size) + + SpaceOrientation.Vertical -> Modifier + .fillMaxWidth() + .height(height = size) + } + IllustrationBox(contentAlignment = contentAlignment) { + Box( + modifier = dimensionBoxModifier.background(Color(0xFF26B2FF)) //TODO use AlwaysInfo token when available + ) + } +} + +enum class SpaceOrientation { + Horizontal, Vertical +} + +@Composable +fun SpacePaddingInlineWithImageIllustrationRow( + spaceSize: Dp, + imagePainter: Painter, + modifier: Modifier = Modifier, + imageModifier: Modifier = Modifier +) { + Row( + modifier = modifier + .size(defaultIllustrationSize) + .background(color = OudsColorKeyToken.OnSurface.value), //TODO use BgEmphasizedPrimary token when available + verticalAlignment = Alignment.CenterVertically + ) { + Box( + modifier = Modifier + .fillMaxHeight() + .width(width = spaceSize) + .background(Color(0xFF26B2FF)) //TODO use AlwaysInfo token when available + ) + Image( + modifier = imageModifier, + painter = imagePainter, + contentDescription = null, + contentScale = ContentScale.None + ) + } +} \ No newline at end of file diff --git a/app/src/main/res/drawable/ic_chevron_down.xml b/app/src/main/res/drawable/ic_chevron_down.xml new file mode 100644 index 00000000..1bd51497 --- /dev/null +++ b/app/src/main/res/drawable/ic_chevron_down.xml @@ -0,0 +1,9 @@ + + + From d7b9d405254bb0254744a56c61127e38044bb38a Mon Sep 17 00:00:00 2001 From: Pauline Auvray Date: Thu, 24 Oct 2024 10:36:59 +0200 Subject: [PATCH 16/32] Replace hardcoded spaces by tokens --- .../main/java/com/orange/ouds/app/ui/MainScreen.kt | 11 ++++++----- 1 file changed, 6 insertions(+), 5 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 index 7acf746c..e2eb13ef 100644 --- a/app/src/main/java/com/orange/ouds/app/ui/MainScreen.kt +++ b/app/src/main/java/com/orange/ouds/app/ui/MainScreen.kt @@ -49,6 +49,7 @@ 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 @@ -56,6 +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.OudsSpaceFixedKeyToken import com.orange.ouds.theme.whitelabel.WhiteLabelTheme @Composable @@ -155,12 +157,11 @@ private fun ChangeThemeDialog(themeManager: ThemeManager, dismissDialog: () -> U .background(OudsTheme.colorScheme.surfaceVariant) .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 = OudsSpaceFixedKeyToken.Medium.value, bottom = OudsSpaceFixedKeyToken.Short.value) + .padding(horizontal = OudsSpaceFixedKeyToken.Medium.value), style = MaterialTheme.typography.titleLarge ) themeManager.availableThemes.forEach { theme -> @@ -180,7 +181,7 @@ private fun ChangeThemeDialog(themeManager: ThemeManager, dismissDialog: () -> U }, role = Role.RadioButton ) - .padding(horizontal = 16.dp), + .padding(horizontal = OudsSpaceFixedKeyToken.Medium.value), verticalAlignment = Alignment.CenterVertically ) { RadioButton( @@ -190,7 +191,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 = OudsSpaceFixedKeyToken.Medium.value) ) } } From f8ec679260c3898251a9d8841749673a1a46dacf Mon Sep 17 00:00:00 2001 From: Pauline Auvray Date: Thu, 24 Oct 2024 17:35:12 +0200 Subject: [PATCH 17/32] Factorize some code --- .../ui/tokens/TokenCategoryDetailScreen.kt | 21 +++++---- .../ouds/app/ui/tokens/TokenProperty.kt | 46 ++++--------------- 2 files changed, 20 insertions(+), 47 deletions(-) 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 index c5080b6d..363daa5a 100644 --- 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 @@ -22,8 +22,10 @@ import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.items +import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.Text import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.res.stringResource import androidx.compose.ui.text.TextStyle @@ -152,20 +154,21 @@ fun TokenCategoryDetailScreen(tokenCategory: TokenCategory, onSubcategoryClick: @Composable private fun TokenIllustration(tokenProperty: TokenProperty, token: Token) = when (tokenProperty) { - is TokenProperty.BorderWidth -> tokenProperty.Illustration(width = token.value as Dp) - is TokenProperty.BorderRadius -> tokenProperty.Illustration(radius = token.value as Dp) - is TokenProperty.BorderStyle -> tokenProperty.Illustration(style = token.value as OudsBorderStyle) + is TokenProperty.BorderWidth -> BorderIllustrationBox(width = token.value as Dp) + is TokenProperty.BorderRadius -> BorderIllustrationBox(shape = RoundedCornerShape(token.value as Dp)) + is TokenProperty.BorderStyle -> BorderIllustrationBox(style = token.value as OudsBorderStyle) is TokenProperty.Opacity -> tokenProperty.Illustration(opacity = token.value as Float) is TokenProperty.Elevation -> tokenProperty.Illustration(elevation = token.value as Dp) is TokenProperty.SizeIconDecorative -> tokenProperty.Illustration(size = token.value as Dp) is TokenProperty.SizeIconWithLabel -> tokenProperty.Illustration(size = token.value as Dp, token.name) - is TokenProperty.SpaceColumnGap -> tokenProperty.Illustration(size = token.value as Dp) + is TokenProperty.SpaceColumnGap, TokenProperty.SpaceFixed, TokenProperty.SpaceScaled -> SpaceIllustrationBox( + size = token.value as Dp, + contentAlignment = Alignment.Center + ) is TokenProperty.SpacePaddingInline -> tokenProperty.Illustration(size = token.value as Dp, token.name) is TokenProperty.SpacePaddingInset -> tokenProperty.Illustration(size = token.value as Dp) - is TokenProperty.SpacePaddingStack -> tokenProperty.Illustration(size = token.value as Dp) - is TokenProperty.SpaceFixed -> tokenProperty.Illustration(size = token.value as Dp) - is TokenProperty.SpaceRowGap -> tokenProperty.Illustration(size = token.value as Dp) - is TokenProperty.SpaceScaled -> tokenProperty.Illustration(size = token.value as Dp) + is TokenProperty.SpacePaddingStack -> SpaceIllustrationBox(size = token.value as Dp, orientation = SpaceOrientation.Vertical) + is TokenProperty.SpaceRowGap -> SpaceIllustrationBox(size = token.value as Dp, orientation = SpaceOrientation.Vertical, contentAlignment = Alignment.Center) is TokenProperty.Typography -> Unit } @@ -174,7 +177,7 @@ private fun TokenIllustration(tokenProperty: TokenProperty, token: Token) = private fun PreviewTokenCategoryDetailScreen( @PreviewParameter(TokenCategoryDetailScreenPreviewParameterProvider::class) parameter: TokenCategory ) = OudsPreview { - TokenCategoryDetailScreen(parameter, {}) + TokenCategoryDetailScreen(parameter) {} } private class TokenCategoryDetailScreenPreviewParameterProvider : BasicPreviewParameterProvider(*previewParameterValues.toTypedArray()) 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 index a23a6acf..dabe2918 100644 --- 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 @@ -26,7 +26,6 @@ import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.width -import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.Icon import androidx.compose.material3.Surface import androidx.compose.material3.Text @@ -41,7 +40,6 @@ import androidx.compose.ui.unit.dp import com.orange.ouds.app.R import com.orange.ouds.core.theme.value import com.orange.ouds.foundation.extensions.orElse -import com.orange.ouds.theme.OudsBorderStyle import com.orange.ouds.theme.tokens.OudsBorderKeyToken import com.orange.ouds.theme.tokens.OudsElevationKeyToken import com.orange.ouds.theme.tokens.OudsOpacityKeyToken @@ -64,26 +62,17 @@ sealed class TokenProperty( data object BorderRadius : TokenProperty( nameRes = R.string.app_tokens_border_radius_label, tokens = { OudsBorderKeyToken.Radius.entries.map { Token(it.name, it.value) } } - ) { - @Composable - fun Illustration(radius: Dp) = BorderIllustrationBox(shape = RoundedCornerShape(radius)) - } + ) data object BorderStyle : TokenProperty( nameRes = R.string.app_tokens_border_style_label, tokens = { OudsBorderKeyToken.Style.entries.map { Token(it.name, it.value) } } - ) { - @Composable - fun Illustration(style: OudsBorderStyle) = BorderIllustrationBox(style = style) - } + ) data object BorderWidth : TokenProperty( nameRes = R.string.app_tokens_border_width_label, tokens = { OudsBorderKeyToken.Width.entries.map { Token(it.name, it.value) } } - ) { - @Composable - fun Illustration(width: Dp) = BorderIllustrationBox(width = width) - } + ) data object Elevation : TokenProperty( nameRes = null, @@ -166,18 +155,12 @@ sealed class TokenProperty( data object SpaceColumnGap : TokenProperty( nameRes = R.string.app_tokens_dimension_space_columnGap_label, tokens = { OudsSpaceColumnGapKeyToken.entries.map { Token(it.name, it.value) } } - ) { - @Composable - fun Illustration(size: Dp) = SpaceIllustrationBox(size = size, contentAlignment = Alignment.Center) - } + ) data object SpaceFixed : TokenProperty( nameRes = R.string.app_tokens_dimension_space_fixed_label, tokens = { OudsSpaceFixedKeyToken.entries.map { Token(it.name, it.value) } } - ) { - @Composable - fun Illustration(size: Dp) = SpaceIllustrationBox(size, contentAlignment = Alignment.Center) - } + ) data object SpacePaddingInline : TokenProperty( nameRes = R.string.app_tokens_dimension_space_paddingInline_label, @@ -225,30 +208,17 @@ sealed class TokenProperty( data object SpacePaddingStack : TokenProperty( nameRes = R.string.app_tokens_dimension_space_paddingStack_label, tokens = { OudsSpacePaddingBlockKeyToken.entries.map { Token(it.name, it.value) } } - ) { - @Composable - fun Illustration(size: Dp) = SpaceIllustrationBox(size = size, orientation = SpaceOrientation.Vertical) - } + ) data object SpaceRowGap : TokenProperty( nameRes = R.string.app_tokens_dimension_space_rowGap_label, tokens = { OudsSpaceRowGapKeyToken.entries.map { Token(it.name, it.value) } } - ) { - @Composable - fun Illustration(size: Dp) = SpaceIllustrationBox( - size = size, - orientation = SpaceOrientation.Vertical, - contentAlignment = Alignment.Center - ) - } + ) data object SpaceScaled : TokenProperty( nameRes = R.string.app_tokens_dimension_space_scaled_label, tokens = { OudsSpaceScaledKeyToken.entries.map { Token(it.name, it.value) } } - ) { - @Composable - fun Illustration(size: Dp) = SpaceIllustrationBox(size = size, contentAlignment = Alignment.Center) - } + ) data object Typography : TokenProperty(nameRes = null, tokens = { OudsTypographyKeyToken.entries.map { Token(it.name, it.value) } }) From 08000a5c41391dc0c8e0b764d9e5745b1015326e Mon Sep 17 00:00:00 2001 From: Pauline Auvray Date: Fri, 25 Oct 2024 12:03:12 +0200 Subject: [PATCH 18/32] Improve size and space key tokens organization --- .../java/com/orange/ouds/app/ui/MainScreen.kt | 10 +- .../app/ui/components/ComponentsScreen.kt | 4 +- .../ui/tokens/TokenCategoryDetailScreen.kt | 18 +- .../ouds/app/ui/tokens/TokenProperty.kt | 33 +-- .../orange/ouds/app/ui/tokens/TokensScreen.kt | 6 +- .../composable/DetailScreenHeader.kt | 4 +- .../app/ui/utilities/composable/LargeCard.kt | 4 +- .../com/orange/ouds/core/theme/OudsSizes.kt | 120 +++++---- .../com/orange/ouds/core/theme/OudsSpaces.kt | 234 +++++++++--------- .../ouds/theme/tokens/OudsSizeKeyToken.kt | 76 ++++++ .../ouds/theme/tokens/OudsSizeKeyTokens.kt | 74 ------ .../ouds/theme/tokens/OudsSpaceKeyToken.kt | 135 ++++++++++ .../ouds/theme/tokens/OudsSpaceKeyTokens.kt | 133 ---------- .../tokens/components/OudsButtonTokens.kt | 6 +- .../ouds/theme/whitelabel/WhiteLabelTheme.kt | 6 +- 15 files changed, 426 insertions(+), 437 deletions(-) create mode 100644 theme-contract/src/main/java/com/orange/ouds/theme/tokens/OudsSizeKeyToken.kt delete mode 100644 theme-contract/src/main/java/com/orange/ouds/theme/tokens/OudsSizeKeyTokens.kt create mode 100644 theme-contract/src/main/java/com/orange/ouds/theme/tokens/OudsSpaceKeyToken.kt delete mode 100644 theme-contract/src/main/java/com/orange/ouds/theme/tokens/OudsSpaceKeyTokens.kt 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 index e2eb13ef..c632789d 100644 --- 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.OudsSpaceFixedKeyToken +import com.orange.ouds.theme.tokens.OudsSpaceKeyToken import com.orange.ouds.theme.whitelabel.WhiteLabelTheme @Composable @@ -160,8 +160,8 @@ private fun ChangeThemeDialog(themeManager: ThemeManager, dismissDialog: () -> U Text( text = stringResource(R.string.app_themeDialog_label), modifier = Modifier - .padding(top = OudsSpaceFixedKeyToken.Medium.value, bottom = OudsSpaceFixedKeyToken.Short.value) - .padding(horizontal = OudsSpaceFixedKeyToken.Medium.value), + .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 -> @@ -181,7 +181,7 @@ private fun ChangeThemeDialog(themeManager: ThemeManager, dismissDialog: () -> U }, role = Role.RadioButton ) - .padding(horizontal = OudsSpaceFixedKeyToken.Medium.value), + .padding(horizontal = OudsSpaceKeyToken.Fixed.Medium.value), verticalAlignment = Alignment.CenterVertically ) { RadioButton( @@ -191,7 +191,7 @@ private fun ChangeThemeDialog(themeManager: ThemeManager, dismissDialog: () -> U Text( text = theme.name, style = MaterialTheme.typography.bodyLarge, - modifier = Modifier.padding(start = OudsSpaceFixedKeyToken.Medium.value) + modifier = Modifier.padding(start = OudsSpaceKeyToken.Fixed.Medium.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 index 05091940..1b2d401c 100644 --- 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 @@ -32,7 +32,7 @@ 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.OudsGridKeyToken -import com.orange.ouds.theme.tokens.OudsSpaceFixedKeyToken +import com.orange.ouds.theme.tokens.OudsSpaceKeyToken @Composable fun ComponentsScreen() { @@ -49,7 +49,7 @@ fun ComponentsScreen() { Box( modifier = Modifier - .padding(top = OudsSpaceFixedKeyToken.Medium.value) + .padding(top = OudsSpaceKeyToken.Fixed.Medium.value) .width(OudsGridKeyToken.Margin.value) .height(OudsGridKeyToken.ColumnGap.value) .background(OudsTheme.colorScheme.primary) 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 index 363daa5a..e825582b 100644 --- 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.OudsSpaceFixedKeyToken +import com.orange.ouds.theme.tokens.OudsSpaceKeyToken import com.orange.ouds.theme.tokens.OudsTypographyKeyToken import com.orange.ouds.theme.tokens.semantic.OudsColorKeyToken @@ -48,7 +48,7 @@ import com.orange.ouds.theme.tokens.semantic.OudsColorKeyToken fun TokenCategoryDetailScreen(tokenCategory: TokenCategory, onSubcategoryClick: (Long) -> Unit) { Screen { - LazyColumn(contentPadding = PaddingValues(bottom = OudsSpaceFixedKeyToken.Medium.value)) { + LazyColumn(contentPadding = PaddingValues(bottom = OudsSpaceKeyToken.Fixed.Medium.value)) { item { DetailScreenHeader( descriptionRes = tokenCategory.descriptionRes, @@ -61,13 +61,13 @@ fun TokenCategoryDetailScreen(tokenCategory: TokenCategory, onSubcategoryClick: Row( modifier = Modifier .fillMaxWidth() - .padding(top = OudsSpaceFixedKeyToken.Medium.value) + .padding(top = OudsSpaceKeyToken.Fixed.Medium.value) .clickable { onSubcategoryClick(subcategory.id) } ) { Text( modifier = Modifier .fillMaxWidth() - .padding(OudsSpaceFixedKeyToken.Medium.value), + .padding(OudsSpaceKeyToken.Fixed.Medium.value), text = stringResource(id = subcategory.nameRes), maxLines = 1, overflow = TextOverflow.Ellipsis, @@ -77,13 +77,13 @@ fun TokenCategoryDetailScreen(tokenCategory: TokenCategory, onSubcategoryClick: } } else { items(tokenCategory.properties) { tokenProperty -> - Spacer(modifier = Modifier.height(OudsSpaceFixedKeyToken.Medium.value)) + Spacer(modifier = Modifier.height(OudsSpaceKeyToken.Fixed.Medium.value)) tokenProperty.nameRes?.let { Text( modifier = Modifier .fillMaxWidth() - .padding(OudsSpaceFixedKeyToken.Medium.value), + .padding(OudsSpaceKeyToken.Fixed.Medium.value), text = stringResource(id = tokenProperty.nameRes), maxLines = 1, overflow = TextOverflow.Ellipsis, @@ -96,7 +96,7 @@ fun TokenCategoryDetailScreen(tokenCategory: TokenCategory, onSubcategoryClick: Column( modifier = Modifier .fillMaxWidth() - .padding(horizontal = OudsSpaceFixedKeyToken.Medium.value, vertical = OudsSpaceFixedKeyToken.Shorter.value) + .padding(horizontal = OudsSpaceKeyToken.Fixed.Medium.value, vertical = OudsSpaceKeyToken.Fixed.Shorter.value) ) { TokenIllustration(tokenProperty = tokenProperty, token = token) Text( @@ -114,14 +114,14 @@ fun TokenCategoryDetailScreen(tokenCategory: TokenCategory, onSubcategoryClick: Row( modifier = Modifier .fillMaxWidth() - .padding(horizontal = OudsSpaceFixedKeyToken.Medium.value, vertical = OudsSpaceFixedKeyToken.Shorter.value) + .padding(horizontal = OudsSpaceKeyToken.Fixed.Medium.value, vertical = OudsSpaceKeyToken.Fixed.Shorter.value) ) { TokenIllustration(tokenProperty = tokenProperty, token = token) Column( modifier = Modifier .weight(1f) - .padding(start = if (isTypographyProperty) OudsSpaceFixedKeyToken.None.value else OudsSpaceFixedKeyToken.Medium.value) + .padding(start = if (isTypographyProperty) OudsSpaceKeyToken.Fixed.None.value else OudsSpaceKeyToken.Fixed.Medium.value) ) { Text( modifier = Modifier.fillMaxWidth(), 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 index dabe2918..648caf0e 100644 --- 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,15 +43,8 @@ import com.orange.ouds.foundation.extensions.orElse import com.orange.ouds.theme.tokens.OudsBorderKeyToken import com.orange.ouds.theme.tokens.OudsElevationKeyToken import com.orange.ouds.theme.tokens.OudsOpacityKeyToken -import com.orange.ouds.theme.tokens.OudsSizeIconDecorativeKeyToken -import com.orange.ouds.theme.tokens.OudsSizeIconWithTextKeyToken -import com.orange.ouds.theme.tokens.OudsSpaceColumnGapKeyToken -import com.orange.ouds.theme.tokens.OudsSpaceFixedKeyToken -import com.orange.ouds.theme.tokens.OudsSpaceInsetKeyToken -import com.orange.ouds.theme.tokens.OudsSpacePaddingBlockKeyToken -import com.orange.ouds.theme.tokens.OudsSpacePaddingInlineKeyToken -import com.orange.ouds.theme.tokens.OudsSpaceRowGapKeyToken -import com.orange.ouds.theme.tokens.OudsSpaceScaledKeyToken +import com.orange.ouds.theme.tokens.OudsSizeKeyToken +import com.orange.ouds.theme.tokens.OudsSpaceKeyToken import com.orange.ouds.theme.tokens.OudsTypographyKeyToken import com.orange.ouds.theme.tokens.semantic.OudsColorKeyToken @@ -97,7 +90,7 @@ sealed class TokenProperty( Image(painter = painterResource(id = R.drawable.il_opacity_union), contentDescription = null) Box( modifier = Modifier - .padding(top = OudsSpaceFixedKeyToken.Medium.value, start = OudsSpaceFixedKeyToken.Medium.value) + .padding(top = OudsSpaceKeyToken.Fixed.Medium.value, start = OudsSpaceKeyToken.Fixed.Medium.value) .size(48.dp) .background(color = squareColor.copy(alpha = opacity)) .border(width = 1.dp, color = squareColor) @@ -108,7 +101,7 @@ sealed class TokenProperty( data object SizeIconDecorative : TokenProperty( nameRes = R.string.app_tokens_dimension_size_iconDecorative_label, - tokens = { OudsSizeIconDecorativeKeyToken.entries.map { Token(it.name, it.value) } } + tokens = { OudsSizeKeyToken.IconDecorative.entries.map { Token(it.name, it.value) } } ) { @Composable fun Illustration(size: Dp) { @@ -125,14 +118,14 @@ sealed class TokenProperty( data object SizeIconWithLabel : TokenProperty( nameRes = R.string.app_tokens_dimension_size_iconWithLabel_label, - tokens = { OudsSizeIconWithTextKeyToken.entries.map { Token(it.name, it.value) } } + tokens = { OudsSizeKeyToken.IconWithText.entries.map { Token(it.name, it.value) } } ) { @Composable fun Illustration(size: Dp, tokenName: String) { val label = tokenName.substringBefore("Size") Row( modifier = Modifier.fillMaxWidth(), - horizontalArrangement = Arrangement.spacedBy(OudsSpaceFixedKeyToken.Shorter.value), + horizontalArrangement = Arrangement.spacedBy(OudsSpaceKeyToken.Fixed.Shorter.value), verticalAlignment = Alignment.CenterVertically ) { Icon( @@ -154,17 +147,17 @@ sealed class TokenProperty( data object SpaceColumnGap : TokenProperty( nameRes = R.string.app_tokens_dimension_space_columnGap_label, - tokens = { OudsSpaceColumnGapKeyToken.entries.map { Token(it.name, it.value) } } + tokens = { OudsSpaceKeyToken.ColumnGap.entries.map { Token(it.name, it.value) } } ) data object SpaceFixed : TokenProperty( nameRes = R.string.app_tokens_dimension_space_fixed_label, - tokens = { OudsSpaceFixedKeyToken.entries.map { Token(it.name, it.value) } } + tokens = { OudsSpaceKeyToken.Fixed.entries.map { Token(it.name, it.value) } } ) data object SpacePaddingInline : TokenProperty( nameRes = R.string.app_tokens_dimension_space_paddingInline_label, - tokens = { OudsSpacePaddingInlineKeyToken.entries.map { Token(it.name, it.value) } } + tokens = { OudsSpaceKeyToken.PaddingInline.entries.map { Token(it.name, it.value) } } ) { @Composable fun Illustration(size: Dp, tokenName: String) = when { @@ -183,7 +176,7 @@ sealed class TokenProperty( data object SpacePaddingInset : TokenProperty( nameRes = R.string.app_tokens_dimension_space_paddingInset_label, - tokens = { OudsSpaceInsetKeyToken.entries.map { Token(it.name, it.value) } } + tokens = { OudsSpaceKeyToken.Inset.entries.map { Token(it.name, it.value) } } ) { @Composable @@ -207,17 +200,17 @@ sealed class TokenProperty( data object SpacePaddingStack : TokenProperty( nameRes = R.string.app_tokens_dimension_space_paddingStack_label, - tokens = { OudsSpacePaddingBlockKeyToken.entries.map { Token(it.name, it.value) } } + tokens = { OudsSpaceKeyToken.PaddingBlock.entries.map { Token(it.name, it.value) } } ) data object SpaceRowGap : TokenProperty( nameRes = R.string.app_tokens_dimension_space_rowGap_label, - tokens = { OudsSpaceRowGapKeyToken.entries.map { Token(it.name, it.value) } } + tokens = { OudsSpaceKeyToken.RowGap.entries.map { Token(it.name, it.value) } } ) data object SpaceScaled : TokenProperty( nameRes = R.string.app_tokens_dimension_space_scaled_label, - tokens = { OudsSpaceScaledKeyToken.entries.map { Token(it.name, it.value) } } + tokens = { OudsSpaceKeyToken.Scaled.entries.map { Token(it.name, it.value) } } ) data object Typography : TokenProperty(nameRes = null, tokens = { OudsTypographyKeyToken.entries.map { Token(it.name, it.value) } }) 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 index c4fd6daf..e7d312c0 100644 --- 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 @@ -26,7 +26,7 @@ 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.OudsSpaceFixedKeyToken +import com.orange.ouds.theme.tokens.OudsSpaceKeyToken @Composable fun TokensScreen(onTokenCategoryClick: (Long) -> Unit) { @@ -43,8 +43,8 @@ private fun TokensScreen(tokenCategories: List, onTokenCategoryCl modifier = Modifier .fillMaxSize() .verticalScroll(rememberScrollState()) - .padding(OudsSpaceFixedKeyToken.Medium.value), - verticalArrangement = Arrangement.spacedBy(OudsSpaceFixedKeyToken.Medium.value) + .padding(OudsSpaceKeyToken.Fixed.Medium.value), + verticalArrangement = Arrangement.spacedBy(OudsSpaceKeyToken.Fixed.Medium.value) ) { tokenCategories.forEach { token -> LargeCard( 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 index c5a51e17..3e649f77 100644 --- 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,7 +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.OudsSpaceFixedKeyToken +import com.orange.ouds.theme.tokens.OudsSpaceKeyToken import com.orange.ouds.theme.tokens.OudsTypographyKeyToken import com.orange.ouds.theme.tokens.semantic.OudsColorKeyToken @@ -54,7 +54,7 @@ fun DetailScreenHeader( ) DetailScreenDescription( - modifier = Modifier.padding(all = OudsSpaceFixedKeyToken.Medium.value), + modifier = Modifier.padding(all = OudsSpaceKeyToken.Fixed.Medium.value), descriptionRes = descriptionRes ) } 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 index 163c0faa..37bd6af4 100644 --- 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 @@ -32,7 +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.OudsSpaceFixedKeyToken +import com.orange.ouds.theme.tokens.OudsSpaceKeyToken import com.orange.ouds.theme.tokens.OudsTypographyKeyToken import com.orange.ouds.theme.tokens.semantic.OudsColorKeyToken @@ -59,7 +59,7 @@ fun LargeCard( contentScale = ContentScale.None ) Column( - modifier = Modifier.padding(OudsSpaceFixedKeyToken.Medium.value) + modifier = Modifier.padding(OudsSpaceKeyToken.Fixed.Medium.value) ) { Text( text = title, diff --git a/core/src/main/java/com/orange/ouds/core/theme/OudsSizes.kt b/core/src/main/java/com/orange/ouds/core/theme/OudsSizes.kt index b05b004c..40e7a888 100644 --- a/core/src/main/java/com/orange/ouds/core/theme/OudsSizes.kt +++ b/core/src/main/java/com/orange/ouds/core/theme/OudsSizes.kt @@ -20,9 +20,7 @@ import androidx.compose.ui.unit.dp import com.orange.ouds.theme.OudsAdaptiveTokenValue import com.orange.ouds.theme.OudsAdaptiveWindowType import com.orange.ouds.theme.currentWindowWidth -import com.orange.ouds.theme.tokens.OudsSizeIconDecorativeKeyToken -import com.orange.ouds.theme.tokens.OudsSizeIconWithTextKeyToken -import com.orange.ouds.theme.tokens.OudsSizeMaxWidthTypeKeyToken +import com.orange.ouds.theme.tokens.OudsSizeKeyToken import com.orange.ouds.theme.tokens.semantic.OudsSizeSemanticTokens data class OudsSizes( @@ -260,56 +258,56 @@ fun OudsSizeSemanticTokens.getSizes() = OudsSizes( ) @Stable -fun OudsSizes.fromToken(token: OudsSizeIconDecorativeKeyToken): Dp { +fun OudsSizes.fromToken(token: OudsSizeKeyToken.IconDecorative): Dp { return when (token) { - OudsSizeIconDecorativeKeyToken.Shortest -> iconDecorativeShortest - OudsSizeIconDecorativeKeyToken.Shorter -> iconDecorativeShorter - OudsSizeIconDecorativeKeyToken.Short -> iconDecorativeShort - OudsSizeIconDecorativeKeyToken.Medium -> iconDecorativeMedium - OudsSizeIconDecorativeKeyToken.Tall -> iconDecorativeTall - OudsSizeIconDecorativeKeyToken.Taller -> iconDecorativeTaller - OudsSizeIconDecorativeKeyToken.Tallest -> iconDecorativeTallest + OudsSizeKeyToken.IconDecorative.Shortest -> iconDecorativeShortest + OudsSizeKeyToken.IconDecorative.Shorter -> iconDecorativeShorter + OudsSizeKeyToken.IconDecorative.Short -> iconDecorativeShort + OudsSizeKeyToken.IconDecorative.Medium -> iconDecorativeMedium + OudsSizeKeyToken.IconDecorative.Tall -> iconDecorativeTall + OudsSizeKeyToken.IconDecorative.Taller -> iconDecorativeTaller + OudsSizeKeyToken.IconDecorative.Tallest -> iconDecorativeTallest } } @Stable -fun OudsSizes.fromToken(token: OudsSizeIconWithTextKeyToken, adaptiveWindowType: OudsAdaptiveWindowType): Dp { +fun OudsSizes.fromToken(token: OudsSizeKeyToken.IconWithText, adaptiveWindowType: OudsAdaptiveWindowType): Dp { val dimensionSizeIconWithTextValue: Any = when (token) { - OudsSizeIconWithTextKeyToken.HeadingSmallSizeShort -> iconWithHeadingSmallSizeShort - OudsSizeIconWithTextKeyToken.HeadingSmallSizeMedium -> iconWithHeadingSmallSizeMedium - OudsSizeIconWithTextKeyToken.HeadingSmallSizeTall -> iconWithHeadingSmallSizeTall - OudsSizeIconWithTextKeyToken.HeadingMediumSizeShort -> iconWithHeadingMediumSizeShort - OudsSizeIconWithTextKeyToken.HeadingMediumSizeMedium -> iconWithHeadingMediumSizeMedium - OudsSizeIconWithTextKeyToken.HeadingMediumSizeTall -> iconWithHeadingMediumSizeTall - OudsSizeIconWithTextKeyToken.HeadingLargeSizeShort -> iconWithHeadingLargeSizeShort - OudsSizeIconWithTextKeyToken.HeadingLargeSizeMedium -> iconWithBodyLargeSizeMedium - OudsSizeIconWithTextKeyToken.HeadingLargeSizeTall -> iconWithHeadingLargeSizeTall - OudsSizeIconWithTextKeyToken.HeadingExtraLargeSizeShort -> iconWithHeadingExtraLargeSizeShort - OudsSizeIconWithTextKeyToken.HeadingExtraLargeSizeMedium -> iconWithHeadingExtraLargeSizeMedium - OudsSizeIconWithTextKeyToken.HeadingExtraLargeSizeTall -> iconWithHeadingExtraLargeSizeTall - OudsSizeIconWithTextKeyToken.LabelLargeSizeShorter -> iconWithLabelLargeSizeShorter - OudsSizeIconWithTextKeyToken.LabelLargeSizeShort -> iconWithLabelLargeSizeShort - OudsSizeIconWithTextKeyToken.LabelLargeSizeMedium -> iconWithLabelLargeSizeMedium - OudsSizeIconWithTextKeyToken.LabelLargeSizeTall -> iconWithLabelLargeSizeTall - OudsSizeIconWithTextKeyToken.LabelLargeSizeTaller -> iconWithLabelLargeSizeTaller - OudsSizeIconWithTextKeyToken.LabelMediumSizeShort -> iconWithLabelMediumSizeShort - OudsSizeIconWithTextKeyToken.LabelMediumSizeMedium -> iconWithLabelMediumSizeMedium - OudsSizeIconWithTextKeyToken.LabelMediumSizeTall -> iconWithLabelMediumSizeTall - OudsSizeIconWithTextKeyToken.LabelSmallSizeShort -> iconWithLabelSmallSizeShort - OudsSizeIconWithTextKeyToken.LabelSmallSizeMedium -> iconWithLabelSmallSizeMedium - OudsSizeIconWithTextKeyToken.LabelSmallSizeTall -> iconWithLabelSmallSizeTall - OudsSizeIconWithTextKeyToken.LabelExtraLargeSizeShort -> iconWithLabelExtraLargeSizeShort - OudsSizeIconWithTextKeyToken.LabelExtraLargeSizeMedium -> iconWithLabelExtraLargeSizeMedium - OudsSizeIconWithTextKeyToken.LabelExtraLargeSizeTall -> iconWithLabelExtraLargeSizeTall - OudsSizeIconWithTextKeyToken.BodySmallSizeShort -> iconWithBodySmallSizeShort - OudsSizeIconWithTextKeyToken.BodySmallSizeMedium -> iconWithBodySmallSizeMedium - OudsSizeIconWithTextKeyToken.BodySmallSizeTall -> iconWithBodySmallSizeTall - OudsSizeIconWithTextKeyToken.BodyMediumSizeShort -> iconWithBodyMediumSizeShort - OudsSizeIconWithTextKeyToken.BodyMediumSizeMedium -> iconWithBodyMediumSizeMedium - OudsSizeIconWithTextKeyToken.BodyMediumSizeTall -> iconWithBodyMediumSizeTall - OudsSizeIconWithTextKeyToken.BodyLargeSizeShort -> iconWithBodyLargeSizeShort - OudsSizeIconWithTextKeyToken.BodyLargeSizeMedium -> iconWithBodyLargeSizeMedium - OudsSizeIconWithTextKeyToken.BodyLargeSizeTall -> iconWithBodyLargeSizeTall + OudsSizeKeyToken.IconWithText.HeadingSmallSizeShort -> iconWithHeadingSmallSizeShort + OudsSizeKeyToken.IconWithText.HeadingSmallSizeMedium -> iconWithHeadingSmallSizeMedium + OudsSizeKeyToken.IconWithText.HeadingSmallSizeTall -> iconWithHeadingSmallSizeTall + OudsSizeKeyToken.IconWithText.HeadingMediumSizeShort -> iconWithHeadingMediumSizeShort + OudsSizeKeyToken.IconWithText.HeadingMediumSizeMedium -> iconWithHeadingMediumSizeMedium + OudsSizeKeyToken.IconWithText.HeadingMediumSizeTall -> iconWithHeadingMediumSizeTall + OudsSizeKeyToken.IconWithText.HeadingLargeSizeShort -> iconWithHeadingLargeSizeShort + OudsSizeKeyToken.IconWithText.HeadingLargeSizeMedium -> iconWithBodyLargeSizeMedium + OudsSizeKeyToken.IconWithText.HeadingLargeSizeTall -> iconWithHeadingLargeSizeTall + OudsSizeKeyToken.IconWithText.HeadingExtraLargeSizeShort -> iconWithHeadingExtraLargeSizeShort + OudsSizeKeyToken.IconWithText.HeadingExtraLargeSizeMedium -> iconWithHeadingExtraLargeSizeMedium + OudsSizeKeyToken.IconWithText.HeadingExtraLargeSizeTall -> iconWithHeadingExtraLargeSizeTall + OudsSizeKeyToken.IconWithText.LabelLargeSizeShorter -> iconWithLabelLargeSizeShorter + OudsSizeKeyToken.IconWithText.LabelLargeSizeShort -> iconWithLabelLargeSizeShort + OudsSizeKeyToken.IconWithText.LabelLargeSizeMedium -> iconWithLabelLargeSizeMedium + OudsSizeKeyToken.IconWithText.LabelLargeSizeTall -> iconWithLabelLargeSizeTall + OudsSizeKeyToken.IconWithText.LabelLargeSizeTaller -> iconWithLabelLargeSizeTaller + OudsSizeKeyToken.IconWithText.LabelMediumSizeShort -> iconWithLabelMediumSizeShort + OudsSizeKeyToken.IconWithText.LabelMediumSizeMedium -> iconWithLabelMediumSizeMedium + OudsSizeKeyToken.IconWithText.LabelMediumSizeTall -> iconWithLabelMediumSizeTall + OudsSizeKeyToken.IconWithText.LabelSmallSizeShort -> iconWithLabelSmallSizeShort + OudsSizeKeyToken.IconWithText.LabelSmallSizeMedium -> iconWithLabelSmallSizeMedium + OudsSizeKeyToken.IconWithText.LabelSmallSizeTall -> iconWithLabelSmallSizeTall + OudsSizeKeyToken.IconWithText.LabelExtraLargeSizeShort -> iconWithLabelExtraLargeSizeShort + OudsSizeKeyToken.IconWithText.LabelExtraLargeSizeMedium -> iconWithLabelExtraLargeSizeMedium + OudsSizeKeyToken.IconWithText.LabelExtraLargeSizeTall -> iconWithLabelExtraLargeSizeTall + OudsSizeKeyToken.IconWithText.BodySmallSizeShort -> iconWithBodySmallSizeShort + OudsSizeKeyToken.IconWithText.BodySmallSizeMedium -> iconWithBodySmallSizeMedium + OudsSizeKeyToken.IconWithText.BodySmallSizeTall -> iconWithBodySmallSizeTall + OudsSizeKeyToken.IconWithText.BodyMediumSizeShort -> iconWithBodyMediumSizeShort + OudsSizeKeyToken.IconWithText.BodyMediumSizeMedium -> iconWithBodyMediumSizeMedium + OudsSizeKeyToken.IconWithText.BodyMediumSizeTall -> iconWithBodyMediumSizeTall + OudsSizeKeyToken.IconWithText.BodyLargeSizeShort -> iconWithBodyLargeSizeShort + OudsSizeKeyToken.IconWithText.BodyLargeSizeMedium -> iconWithBodyLargeSizeMedium + OudsSizeKeyToken.IconWithText.BodyLargeSizeTall -> iconWithBodyLargeSizeTall } return if (dimensionSizeIconWithTextValue is OudsAdaptiveTokenValue<*>) { @@ -320,18 +318,18 @@ fun OudsSizes.fromToken(token: OudsSizeIconWithTextKeyToken, adaptiveWindowType: } @Stable -fun OudsSizes.fromToken(token: OudsSizeMaxWidthTypeKeyToken, adaptiveWindowType: OudsAdaptiveWindowType): Dp { +fun OudsSizes.fromToken(token: OudsSizeKeyToken.MaxWidthType, adaptiveWindowType: OudsAdaptiveWindowType): Dp { val dimensionMaxWidthTypeToken = when (token) { - OudsSizeMaxWidthTypeKeyToken.DisplaySmall -> maxWidthTypeDisplaySmall - OudsSizeMaxWidthTypeKeyToken.DisplayMedium -> maxWidthTypeDisplayMedium - OudsSizeMaxWidthTypeKeyToken.DisplayLarge -> maxWidthTypeDisplayLarge - OudsSizeMaxWidthTypeKeyToken.HeadingSmall -> maxWidthTypeHeadingSmall - OudsSizeMaxWidthTypeKeyToken.HeadingMedium -> maxWidthTypeHeadingMedium - OudsSizeMaxWidthTypeKeyToken.HeadingLarge -> maxWidthTypeHeadingLarge - OudsSizeMaxWidthTypeKeyToken.HeadingExtraLarge -> maxWidthTypeHeadingExtraLarge - OudsSizeMaxWidthTypeKeyToken.BodySmall -> maxWidthTypeBodySmall - OudsSizeMaxWidthTypeKeyToken.BodyMedium -> maxWidthTypeBodyMedium - OudsSizeMaxWidthTypeKeyToken.BodyLarge -> maxWidthTypeBodyLarge + OudsSizeKeyToken.MaxWidthType.DisplaySmall -> maxWidthTypeDisplaySmall + OudsSizeKeyToken.MaxWidthType.DisplayMedium -> maxWidthTypeDisplayMedium + OudsSizeKeyToken.MaxWidthType.DisplayLarge -> maxWidthTypeDisplayLarge + OudsSizeKeyToken.MaxWidthType.HeadingSmall -> maxWidthTypeHeadingSmall + OudsSizeKeyToken.MaxWidthType.HeadingMedium -> maxWidthTypeHeadingMedium + OudsSizeKeyToken.MaxWidthType.HeadingLarge -> maxWidthTypeHeadingLarge + OudsSizeKeyToken.MaxWidthType.HeadingExtraLarge -> maxWidthTypeHeadingExtraLarge + OudsSizeKeyToken.MaxWidthType.BodySmall -> maxWidthTypeBodySmall + OudsSizeKeyToken.MaxWidthType.BodyMedium -> maxWidthTypeBodyMedium + OudsSizeKeyToken.MaxWidthType.BodyLarge -> maxWidthTypeBodyLarge } return when (adaptiveWindowType) { @@ -344,7 +342,7 @@ fun OudsSizes.fromToken(token: OudsSizeMaxWidthTypeKeyToken, adaptiveWindowType: /** * Converts an OUDS decorative icon size token to the local decorative icon size value provided by the theme. */ -val OudsSizeIconDecorativeKeyToken.value: Dp +val OudsSizeKeyToken.IconDecorative.value: Dp @ReadOnlyComposable @Composable get() = OudsTheme.sizes.fromToken(this) @@ -352,13 +350,13 @@ val OudsSizeIconDecorativeKeyToken.value: Dp /** * Converts an OUDS icon size with typography token to the local icon size with typography value provided by the theme depending on the window size. */ -val OudsSizeIconWithTextKeyToken.value: Dp +val OudsSizeKeyToken.IconWithText.value: Dp @Composable get() = OudsTheme.sizes.fromToken(this, OudsAdaptiveWindowType.fromWindowWidth(currentWindowWidth())) /** * Converts an OUDS max width with typography token to the local max width with typography value provided by the theme depending on the window size. */ -val OudsSizeMaxWidthTypeKeyToken.value: Dp +val OudsSizeKeyToken.MaxWidthType.value: Dp @Composable get() = OudsTheme.sizes.fromToken(this, OudsAdaptiveWindowType.fromWindowWidth(currentWindowWidth())) \ No newline at end of file diff --git a/core/src/main/java/com/orange/ouds/core/theme/OudsSpaces.kt b/core/src/main/java/com/orange/ouds/core/theme/OudsSpaces.kt index 3286f1cd..5612623b 100644 --- a/core/src/main/java/com/orange/ouds/core/theme/OudsSpaces.kt +++ b/core/src/main/java/com/orange/ouds/core/theme/OudsSpaces.kt @@ -20,13 +20,7 @@ import androidx.compose.ui.unit.dp import com.orange.ouds.theme.OudsAdaptiveTokenValue import com.orange.ouds.theme.OudsAdaptiveWindowType import com.orange.ouds.theme.currentWindowWidth -import com.orange.ouds.theme.tokens.OudsSpaceColumnGapKeyToken -import com.orange.ouds.theme.tokens.OudsSpaceFixedKeyToken -import com.orange.ouds.theme.tokens.OudsSpaceInsetKeyToken -import com.orange.ouds.theme.tokens.OudsSpacePaddingBlockKeyToken -import com.orange.ouds.theme.tokens.OudsSpacePaddingInlineKeyToken -import com.orange.ouds.theme.tokens.OudsSpaceRowGapKeyToken -import com.orange.ouds.theme.tokens.OudsSpaceScaledKeyToken +import com.orange.ouds.theme.tokens.OudsSpaceKeyToken import com.orange.ouds.theme.tokens.semantic.OudsSpaceSemanticTokens data class OudsSpaces( @@ -274,36 +268,36 @@ fun OudsSpaceSemanticTokens.getSpaces() = OudsSpaces( ) @Stable -fun OudsSpaces.fromToken(token: OudsSpaceFixedKeyToken): Dp { +fun OudsSpaces.fromToken(token: OudsSpaceKeyToken.Fixed): Dp { return when (token) { - OudsSpaceFixedKeyToken.None -> fixedNone - OudsSpaceFixedKeyToken.Smash -> fixedSmash - OudsSpaceFixedKeyToken.Shortest -> fixedShortest - OudsSpaceFixedKeyToken.Shorter -> fixedShorter - OudsSpaceFixedKeyToken.Short -> fixedShort - OudsSpaceFixedKeyToken.Medium -> fixedMedium - OudsSpaceFixedKeyToken.Tall -> fixedTall - OudsSpaceFixedKeyToken.Taller -> fixedTaller - OudsSpaceFixedKeyToken.Tallest -> fixedTallest - OudsSpaceFixedKeyToken.Spacious -> fixedSpacious - OudsSpaceFixedKeyToken.Huge -> fixedHuge - OudsSpaceFixedKeyToken.Jumbo -> fixedJumbo + OudsSpaceKeyToken.Fixed.None -> fixedNone + OudsSpaceKeyToken.Fixed.Smash -> fixedSmash + OudsSpaceKeyToken.Fixed.Shortest -> fixedShortest + OudsSpaceKeyToken.Fixed.Shorter -> fixedShorter + OudsSpaceKeyToken.Fixed.Short -> fixedShort + OudsSpaceKeyToken.Fixed.Medium -> fixedMedium + OudsSpaceKeyToken.Fixed.Tall -> fixedTall + OudsSpaceKeyToken.Fixed.Taller -> fixedTaller + OudsSpaceKeyToken.Fixed.Tallest -> fixedTallest + OudsSpaceKeyToken.Fixed.Spacious -> fixedSpacious + OudsSpaceKeyToken.Fixed.Huge -> fixedHuge + OudsSpaceKeyToken.Fixed.Jumbo -> fixedJumbo } } @Stable -fun OudsSpaces.fromToken(token: OudsSpaceScaledKeyToken, adaptiveWindowType: OudsAdaptiveWindowType): Dp { +fun OudsSpaces.fromToken(token: OudsSpaceKeyToken.Scaled, adaptiveWindowType: OudsAdaptiveWindowType): Dp { val dimensionAdaptableSpaceToken = when (token) { - OudsSpaceScaledKeyToken.None -> scaledNone - OudsSpaceScaledKeyToken.Smash -> scaledSmash - OudsSpaceScaledKeyToken.Shortest -> scaledShortest - OudsSpaceScaledKeyToken.Shorter -> scaledShorter - OudsSpaceScaledKeyToken.Short -> scaledShort - OudsSpaceScaledKeyToken.Medium -> scaledMedium - OudsSpaceScaledKeyToken.Tall -> scaledTall - OudsSpaceScaledKeyToken.Taller -> scaledTaller - OudsSpaceScaledKeyToken.Tallest -> scaledTallest - OudsSpaceScaledKeyToken.Spacious -> scaledSpacious + OudsSpaceKeyToken.Scaled.None -> scaledNone + OudsSpaceKeyToken.Scaled.Smash -> scaledSmash + OudsSpaceKeyToken.Scaled.Shortest -> scaledShortest + OudsSpaceKeyToken.Scaled.Shorter -> scaledShorter + OudsSpaceKeyToken.Scaled.Short -> scaledShort + OudsSpaceKeyToken.Scaled.Medium -> scaledMedium + OudsSpaceKeyToken.Scaled.Tall -> scaledTall + OudsSpaceKeyToken.Scaled.Taller -> scaledTaller + OudsSpaceKeyToken.Scaled.Tallest -> scaledTallest + OudsSpaceKeyToken.Scaled.Spacious -> scaledSpacious } return when (adaptiveWindowType) { @@ -314,116 +308,116 @@ fun OudsSpaces.fromToken(token: OudsSpaceScaledKeyToken, adaptiveWindowType: Oud } @Stable -fun OudsSpaces.fromToken(token: OudsSpacePaddingInlineKeyToken): Dp { +fun OudsSpaces.fromToken(token: OudsSpaceKeyToken.PaddingInline): Dp { return when (token) { - OudsSpacePaddingInlineKeyToken.None -> paddingInlineNone - OudsSpacePaddingInlineKeyToken.Shorter -> paddingInlineShorter - OudsSpacePaddingInlineKeyToken.Short -> paddingInlineShort - OudsSpacePaddingInlineKeyToken.Medium -> paddingInlineMedium - OudsSpacePaddingInlineKeyToken.Tall -> paddingInlineTall - OudsSpacePaddingInlineKeyToken.Taller -> paddingInlineTaller - OudsSpacePaddingInlineKeyToken.Tallest -> paddingInlineTallest - OudsSpacePaddingInlineKeyToken.WithIconNone -> paddingInlineWithIconNone - OudsSpacePaddingInlineKeyToken.WithIconShortest -> paddingInlineWithIconShortest - OudsSpacePaddingInlineKeyToken.WithIconShorter -> paddingInlineWithIconShorter - OudsSpacePaddingInlineKeyToken.WithIconShort -> paddingInlineWithIconShort - OudsSpacePaddingInlineKeyToken.WithIconMedium -> paddingInlineWithIconMedium - OudsSpacePaddingInlineKeyToken.WithIconTall -> paddingInlineWithIconTall - OudsSpacePaddingInlineKeyToken.WithIconTaller -> paddingInlineWithIconTaller - OudsSpacePaddingInlineKeyToken.WithIconTallest -> paddingInlineWithIconTallest - OudsSpacePaddingInlineKeyToken.WithArrowNone -> paddingInlineWithArrowNone - OudsSpacePaddingInlineKeyToken.WithArrowShortest -> paddingInlineWithArrowShortest - OudsSpacePaddingInlineKeyToken.WithArrowShorter -> paddingInlineWithArrowShorter - OudsSpacePaddingInlineKeyToken.WithArrowShort -> paddingInlineWithArrowShort - OudsSpacePaddingInlineKeyToken.WithArrowMedium -> paddingInlineWithArrowMedium - OudsSpacePaddingInlineKeyToken.WithArrowTall -> paddingInlineWithArrowTall - OudsSpacePaddingInlineKeyToken.WithArrowTaller -> paddingInlineWithArrowTaller - OudsSpacePaddingInlineKeyToken.WithArrowTallest -> paddingInlineWithArrowTallest + OudsSpaceKeyToken.PaddingInline.None -> paddingInlineNone + OudsSpaceKeyToken.PaddingInline.Shorter -> paddingInlineShorter + OudsSpaceKeyToken.PaddingInline.Short -> paddingInlineShort + OudsSpaceKeyToken.PaddingInline.Medium -> paddingInlineMedium + OudsSpaceKeyToken.PaddingInline.Tall -> paddingInlineTall + OudsSpaceKeyToken.PaddingInline.Taller -> paddingInlineTaller + OudsSpaceKeyToken.PaddingInline.Tallest -> paddingInlineTallest + OudsSpaceKeyToken.PaddingInline.WithIconNone -> paddingInlineWithIconNone + OudsSpaceKeyToken.PaddingInline.WithIconShortest -> paddingInlineWithIconShortest + OudsSpaceKeyToken.PaddingInline.WithIconShorter -> paddingInlineWithIconShorter + OudsSpaceKeyToken.PaddingInline.WithIconShort -> paddingInlineWithIconShort + OudsSpaceKeyToken.PaddingInline.WithIconMedium -> paddingInlineWithIconMedium + OudsSpaceKeyToken.PaddingInline.WithIconTall -> paddingInlineWithIconTall + OudsSpaceKeyToken.PaddingInline.WithIconTaller -> paddingInlineWithIconTaller + OudsSpaceKeyToken.PaddingInline.WithIconTallest -> paddingInlineWithIconTallest + OudsSpaceKeyToken.PaddingInline.WithArrowNone -> paddingInlineWithArrowNone + OudsSpaceKeyToken.PaddingInline.WithArrowShortest -> paddingInlineWithArrowShortest + OudsSpaceKeyToken.PaddingInline.WithArrowShorter -> paddingInlineWithArrowShorter + OudsSpaceKeyToken.PaddingInline.WithArrowShort -> paddingInlineWithArrowShort + OudsSpaceKeyToken.PaddingInline.WithArrowMedium -> paddingInlineWithArrowMedium + OudsSpaceKeyToken.PaddingInline.WithArrowTall -> paddingInlineWithArrowTall + OudsSpaceKeyToken.PaddingInline.WithArrowTaller -> paddingInlineWithArrowTaller + OudsSpaceKeyToken.PaddingInline.WithArrowTallest -> paddingInlineWithArrowTallest } } @Stable -fun OudsSpaces.fromToken(token: OudsSpacePaddingBlockKeyToken): Dp { +fun OudsSpaces.fromToken(token: OudsSpaceKeyToken.PaddingBlock): Dp { return when (token) { - OudsSpacePaddingBlockKeyToken.None -> paddingBlockNone - OudsSpacePaddingBlockKeyToken.Shorter -> paddingBlockShorter - OudsSpacePaddingBlockKeyToken.Short -> paddingBlockShort - OudsSpacePaddingBlockKeyToken.Medium -> paddingBlockMedium - OudsSpacePaddingBlockKeyToken.Tall -> paddingBlockTall - OudsSpacePaddingBlockKeyToken.Taller -> paddingBlockTaller - OudsSpacePaddingBlockKeyToken.Tallest -> paddingBlockTallest - OudsSpacePaddingBlockKeyToken.WithIconNone -> paddingBlockWithIconNone - OudsSpacePaddingBlockKeyToken.WithIconShortest -> paddingBlockWithIconShortest - OudsSpacePaddingBlockKeyToken.WithIconShorter -> paddingBlockWithIconShorter - OudsSpacePaddingBlockKeyToken.WithIconShort -> paddingBlockWithIconShort - OudsSpacePaddingBlockKeyToken.WithIconMedium -> paddingBlockWithIconMedium - OudsSpacePaddingBlockKeyToken.WithIconTall -> paddingBlockWithIconTall - OudsSpacePaddingBlockKeyToken.WithIconTaller -> paddingBlockWithIconTaller + OudsSpaceKeyToken.PaddingBlock.None -> paddingBlockNone + OudsSpaceKeyToken.PaddingBlock.Shorter -> paddingBlockShorter + OudsSpaceKeyToken.PaddingBlock.Short -> paddingBlockShort + OudsSpaceKeyToken.PaddingBlock.Medium -> paddingBlockMedium + OudsSpaceKeyToken.PaddingBlock.Tall -> paddingBlockTall + OudsSpaceKeyToken.PaddingBlock.Taller -> paddingBlockTaller + OudsSpaceKeyToken.PaddingBlock.Tallest -> paddingBlockTallest + OudsSpaceKeyToken.PaddingBlock.WithIconNone -> paddingBlockWithIconNone + OudsSpaceKeyToken.PaddingBlock.WithIconShortest -> paddingBlockWithIconShortest + OudsSpaceKeyToken.PaddingBlock.WithIconShorter -> paddingBlockWithIconShorter + OudsSpaceKeyToken.PaddingBlock.WithIconShort -> paddingBlockWithIconShort + OudsSpaceKeyToken.PaddingBlock.WithIconMedium -> paddingBlockWithIconMedium + OudsSpaceKeyToken.PaddingBlock.WithIconTall -> paddingBlockWithIconTall + OudsSpaceKeyToken.PaddingBlock.WithIconTaller -> paddingBlockWithIconTaller } } @Stable -fun OudsSpaces.fromToken(token: OudsSpaceInsetKeyToken): Dp { +fun OudsSpaces.fromToken(token: OudsSpaceKeyToken.Inset): Dp { return when (token) { - OudsSpaceInsetKeyToken.None -> insetNone - OudsSpaceInsetKeyToken.Smash -> insetSmash - OudsSpaceInsetKeyToken.Shortest -> insetShortest - OudsSpaceInsetKeyToken.Shorter -> insetShorter - OudsSpaceInsetKeyToken.Short -> insetShort - OudsSpaceInsetKeyToken.Medium -> insetMedium - OudsSpaceInsetKeyToken.Tall -> insetTall - OudsSpaceInsetKeyToken.Taller -> insetTaller - OudsSpaceInsetKeyToken.Tallest -> insetTallest - OudsSpaceInsetKeyToken.Spacious -> insetSpacious + OudsSpaceKeyToken.Inset.None -> insetNone + OudsSpaceKeyToken.Inset.Smash -> insetSmash + OudsSpaceKeyToken.Inset.Shortest -> insetShortest + OudsSpaceKeyToken.Inset.Shorter -> insetShorter + OudsSpaceKeyToken.Inset.Short -> insetShort + OudsSpaceKeyToken.Inset.Medium -> insetMedium + OudsSpaceKeyToken.Inset.Tall -> insetTall + OudsSpaceKeyToken.Inset.Taller -> insetTaller + OudsSpaceKeyToken.Inset.Tallest -> insetTallest + OudsSpaceKeyToken.Inset.Spacious -> insetSpacious } } @Stable -fun OudsSpaces.fromToken(token: OudsSpaceColumnGapKeyToken): Dp { +fun OudsSpaces.fromToken(token: OudsSpaceKeyToken.ColumnGap): Dp { return when (token) { - OudsSpaceColumnGapKeyToken.None -> columnGapNone - OudsSpaceColumnGapKeyToken.Shorter -> columnGapShorter - OudsSpaceColumnGapKeyToken.Short -> columnGapShort - OudsSpaceColumnGapKeyToken.Medium -> columnGapMedium - OudsSpaceColumnGapKeyToken.Tall -> columnGapTall - OudsSpaceColumnGapKeyToken.Taller -> columnGapTaller - OudsSpaceColumnGapKeyToken.WithIconNone -> columnGapWithIconNone - OudsSpaceColumnGapKeyToken.WithIconShortest -> columnGapWithIconShortest - OudsSpaceColumnGapKeyToken.WithIconShorter -> columnGapWithIconShorter - OudsSpaceColumnGapKeyToken.WithIconShort -> columnGapWithIconShort - OudsSpaceColumnGapKeyToken.WithIconMedium -> columnGapWithIconMedium - OudsSpaceColumnGapKeyToken.WithIconTall -> columnGapWithIconTall - OudsSpaceColumnGapKeyToken.WithArrowNone -> columnGapWithArrowNone - OudsSpaceColumnGapKeyToken.WithArrowShortest -> columnGapWithArrowShortest - OudsSpaceColumnGapKeyToken.WithArrowShorter -> columnGapWithArrowShorter - OudsSpaceColumnGapKeyToken.WithArrowShort -> columnGapWithArrowShort - OudsSpaceColumnGapKeyToken.WithArrowMedium -> columnGapWithArrowMedium - OudsSpaceColumnGapKeyToken.WithArrowTall -> columnGapWithArrowTall + OudsSpaceKeyToken.ColumnGap.None -> columnGapNone + OudsSpaceKeyToken.ColumnGap.Shorter -> columnGapShorter + OudsSpaceKeyToken.ColumnGap.Short -> columnGapShort + OudsSpaceKeyToken.ColumnGap.Medium -> columnGapMedium + OudsSpaceKeyToken.ColumnGap.Tall -> columnGapTall + OudsSpaceKeyToken.ColumnGap.Taller -> columnGapTaller + OudsSpaceKeyToken.ColumnGap.WithIconNone -> columnGapWithIconNone + OudsSpaceKeyToken.ColumnGap.WithIconShortest -> columnGapWithIconShortest + OudsSpaceKeyToken.ColumnGap.WithIconShorter -> columnGapWithIconShorter + OudsSpaceKeyToken.ColumnGap.WithIconShort -> columnGapWithIconShort + OudsSpaceKeyToken.ColumnGap.WithIconMedium -> columnGapWithIconMedium + OudsSpaceKeyToken.ColumnGap.WithIconTall -> columnGapWithIconTall + OudsSpaceKeyToken.ColumnGap.WithArrowNone -> columnGapWithArrowNone + OudsSpaceKeyToken.ColumnGap.WithArrowShortest -> columnGapWithArrowShortest + OudsSpaceKeyToken.ColumnGap.WithArrowShorter -> columnGapWithArrowShorter + OudsSpaceKeyToken.ColumnGap.WithArrowShort -> columnGapWithArrowShort + OudsSpaceKeyToken.ColumnGap.WithArrowMedium -> columnGapWithArrowMedium + OudsSpaceKeyToken.ColumnGap.WithArrowTall -> columnGapWithArrowTall } } @Stable -fun OudsSpaces.fromToken(token: OudsSpaceRowGapKeyToken): Dp { +fun OudsSpaces.fromToken(token: OudsSpaceKeyToken.RowGap): Dp { return when (token) { - OudsSpaceRowGapKeyToken.None -> rowGapNone - OudsSpaceRowGapKeyToken.Shortest -> rowGapShortest - OudsSpaceRowGapKeyToken.Shorter -> rowGapShorter - OudsSpaceRowGapKeyToken.Short -> rowGapShort - OudsSpaceRowGapKeyToken.Medium -> rowGapMedium - OudsSpaceRowGapKeyToken.Tall -> rowGapTall - OudsSpaceRowGapKeyToken.WithIconNone -> rowGapWithIconNone - OudsSpaceRowGapKeyToken.WithIconShortest -> rowGapWithIconShortest - OudsSpaceRowGapKeyToken.WithIconShorter -> rowGapWithIconShorter - OudsSpaceRowGapKeyToken.WithIconShort -> rowGapWithIconShort - OudsSpaceRowGapKeyToken.WithIconMedium -> rowGapWithIconMedium - OudsSpaceRowGapKeyToken.WithIconTall -> rowGapWithIconTall + OudsSpaceKeyToken.RowGap.None -> rowGapNone + OudsSpaceKeyToken.RowGap.Shortest -> rowGapShortest + OudsSpaceKeyToken.RowGap.Shorter -> rowGapShorter + OudsSpaceKeyToken.RowGap.Short -> rowGapShort + OudsSpaceKeyToken.RowGap.Medium -> rowGapMedium + OudsSpaceKeyToken.RowGap.Tall -> rowGapTall + OudsSpaceKeyToken.RowGap.WithIconNone -> rowGapWithIconNone + OudsSpaceKeyToken.RowGap.WithIconShortest -> rowGapWithIconShortest + OudsSpaceKeyToken.RowGap.WithIconShorter -> rowGapWithIconShorter + OudsSpaceKeyToken.RowGap.WithIconShort -> rowGapWithIconShort + OudsSpaceKeyToken.RowGap.WithIconMedium -> rowGapWithIconMedium + OudsSpaceKeyToken.RowGap.WithIconTall -> rowGapWithIconTall } } /** * Converts an OUDS column gap space token to the local column gap space value provided by the theme. */ -val OudsSpaceColumnGapKeyToken.value: Dp +val OudsSpaceKeyToken.ColumnGap.value: Dp @ReadOnlyComposable @Composable get() = OudsTheme.spaces.fromToken(this) @@ -431,7 +425,7 @@ val OudsSpaceColumnGapKeyToken.value: Dp /** * Converts an OUDS fixed space token to the local space value provided by the theme. */ -val OudsSpaceFixedKeyToken.value: Dp +val OudsSpaceKeyToken.Fixed.value: Dp @ReadOnlyComposable @Composable get() = OudsTheme.spaces.fromToken(this) @@ -439,7 +433,7 @@ val OudsSpaceFixedKeyToken.value: Dp /** * Converts an OUDS block padding token to the local block padding value provided by the theme. */ -val OudsSpacePaddingBlockKeyToken.value: Dp +val OudsSpaceKeyToken.PaddingBlock.value: Dp @ReadOnlyComposable @Composable get() = OudsTheme.spaces.fromToken(this) @@ -447,7 +441,7 @@ val OudsSpacePaddingBlockKeyToken.value: Dp /** * Converts an OUDS inline padding token to the local inline padding value provided by the theme. */ -val OudsSpacePaddingInlineKeyToken.value: Dp +val OudsSpaceKeyToken.PaddingInline.value: Dp @ReadOnlyComposable @Composable get() = OudsTheme.spaces.fromToken(this) @@ -455,7 +449,7 @@ val OudsSpacePaddingInlineKeyToken.value: Dp /** * Converts an OUDS inset token to the local inset value provided by the theme. */ -val OudsSpaceInsetKeyToken.value: Dp +val OudsSpaceKeyToken.Inset.value: Dp @ReadOnlyComposable @Composable get() = OudsTheme.spaces.fromToken(this) @@ -463,7 +457,7 @@ val OudsSpaceInsetKeyToken.value: Dp /** * Converts an OUDS row gap space token to the local row gap space value provided by the theme. */ -val OudsSpaceRowGapKeyToken.value: Dp +val OudsSpaceKeyToken.RowGap.value: Dp @ReadOnlyComposable @Composable get() = OudsTheme.spaces.fromToken(this) @@ -471,6 +465,6 @@ val OudsSpaceRowGapKeyToken.value: Dp /** * Converts an OUDS scaled space token to the local space value provided by the theme depending on the window size. */ -val OudsSpaceScaledKeyToken.value: Dp +val OudsSpaceKeyToken.Scaled.value: Dp @Composable get() = OudsTheme.spaces.fromToken(this, OudsAdaptiveWindowType.fromWindowWidth(currentWindowWidth())) diff --git a/theme-contract/src/main/java/com/orange/ouds/theme/tokens/OudsSizeKeyToken.kt b/theme-contract/src/main/java/com/orange/ouds/theme/tokens/OudsSizeKeyToken.kt new file mode 100644 index 00000000..305de011 --- /dev/null +++ b/theme-contract/src/main/java/com/orange/ouds/theme/tokens/OudsSizeKeyToken.kt @@ -0,0 +1,76 @@ +/* + * 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.theme.tokens + +class OudsSizeKeyToken { + enum class IconDecorative { + Shortest, + Shorter, + Short, + Medium, + Tall, + Taller, + Tallest, + } + + enum class IconWithText { + HeadingExtraLargeSizeShort, + HeadingExtraLargeSizeMedium, + HeadingExtraLargeSizeTall, + HeadingLargeSizeShort, + HeadingLargeSizeMedium, + HeadingLargeSizeTall, + HeadingMediumSizeShort, + HeadingMediumSizeMedium, + HeadingMediumSizeTall, + HeadingSmallSizeShort, + HeadingSmallSizeMedium, + HeadingSmallSizeTall, + BodyLargeSizeShort, + BodyLargeSizeMedium, + BodyLargeSizeTall, + BodyMediumSizeShort, + BodyMediumSizeMedium, + BodyMediumSizeTall, + BodySmallSizeShort, + BodySmallSizeMedium, + BodySmallSizeTall, + LabelExtraLargeSizeShort, + LabelExtraLargeSizeMedium, + LabelExtraLargeSizeTall, + LabelLargeSizeShorter, + LabelLargeSizeShort, + LabelLargeSizeMedium, + LabelLargeSizeTall, + LabelLargeSizeTaller, + LabelMediumSizeShort, + LabelMediumSizeMedium, + LabelMediumSizeTall, + LabelSmallSizeShort, + LabelSmallSizeMedium, + LabelSmallSizeTall, + } + + enum class MaxWidthType { + DisplaySmall, + DisplayMedium, + DisplayLarge, + HeadingSmall, + HeadingMedium, + HeadingLarge, + HeadingExtraLarge, + BodySmall, + BodyMedium, + BodyLarge + } +} \ No newline at end of file diff --git a/theme-contract/src/main/java/com/orange/ouds/theme/tokens/OudsSizeKeyTokens.kt b/theme-contract/src/main/java/com/orange/ouds/theme/tokens/OudsSizeKeyTokens.kt deleted file mode 100644 index 988f617a..00000000 --- a/theme-contract/src/main/java/com/orange/ouds/theme/tokens/OudsSizeKeyTokens.kt +++ /dev/null @@ -1,74 +0,0 @@ -/* - * 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.theme.tokens - -enum class OudsSizeIconDecorativeKeyToken { - Shortest, - Shorter, - Short, - Medium, - Tall, - Taller, - Tallest, -} - -enum class OudsSizeIconWithTextKeyToken { - HeadingExtraLargeSizeShort, - HeadingExtraLargeSizeMedium, - HeadingExtraLargeSizeTall, - HeadingLargeSizeShort, - HeadingLargeSizeMedium, - HeadingLargeSizeTall, - HeadingMediumSizeShort, - HeadingMediumSizeMedium, - HeadingMediumSizeTall, - HeadingSmallSizeShort, - HeadingSmallSizeMedium, - HeadingSmallSizeTall, - BodyLargeSizeShort, - BodyLargeSizeMedium, - BodyLargeSizeTall, - BodyMediumSizeShort, - BodyMediumSizeMedium, - BodyMediumSizeTall, - BodySmallSizeShort, - BodySmallSizeMedium, - BodySmallSizeTall, - LabelExtraLargeSizeShort, - LabelExtraLargeSizeMedium, - LabelExtraLargeSizeTall, - LabelLargeSizeShorter, - LabelLargeSizeShort, - LabelLargeSizeMedium, - LabelLargeSizeTall, - LabelLargeSizeTaller, - LabelMediumSizeShort, - LabelMediumSizeMedium, - LabelMediumSizeTall, - LabelSmallSizeShort, - LabelSmallSizeMedium, - LabelSmallSizeTall, -} - -enum class OudsSizeMaxWidthTypeKeyToken { - DisplaySmall, - DisplayMedium, - DisplayLarge, - HeadingSmall, - HeadingMedium, - HeadingLarge, - HeadingExtraLarge, - BodySmall, - BodyMedium, - BodyLarge -} diff --git a/theme-contract/src/main/java/com/orange/ouds/theme/tokens/OudsSpaceKeyToken.kt b/theme-contract/src/main/java/com/orange/ouds/theme/tokens/OudsSpaceKeyToken.kt new file mode 100644 index 00000000..7e4efd2b --- /dev/null +++ b/theme-contract/src/main/java/com/orange/ouds/theme/tokens/OudsSpaceKeyToken.kt @@ -0,0 +1,135 @@ +/* + * 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.theme.tokens + +class OudsSpaceKeyToken { + enum class Fixed { + None, + Smash, + Shortest, + Shorter, + Short, + Medium, + Tall, + Taller, + Tallest, + Spacious, + Huge, + Jumbo + } + + enum class Scaled { + None, + Smash, + Shortest, + Shorter, + Short, + Medium, + Tall, + Taller, + Tallest, + Spacious + } + + enum class PaddingInline { + None, + Shorter, + Short, + Medium, + Tall, + Taller, + Tallest, + WithIconNone, + WithIconShortest, + WithIconShorter, + WithIconShort, + WithIconMedium, + WithIconTall, + WithIconTaller, + WithIconTallest, + WithArrowNone, + WithArrowShortest, + WithArrowShorter, + WithArrowShort, + WithArrowMedium, + WithArrowTall, + WithArrowTaller, + WithArrowTallest, + } + + enum class PaddingBlock { + None, + Shorter, + Short, + Medium, + Tall, + Taller, + Tallest, + WithIconNone, + WithIconShortest, + WithIconShorter, + WithIconShort, + WithIconMedium, + WithIconTall, + WithIconTaller, + } + + enum class Inset { + None, + Smash, + Shortest, + Shorter, + Short, + Medium, + Tall, + Taller, + Tallest, + Spacious, + } + + enum class ColumnGap { + None, + Shorter, + Short, + Medium, + Tall, + Taller, + WithIconNone, + WithIconShortest, + WithIconShorter, + WithIconShort, + WithIconMedium, + WithIconTall, + WithArrowNone, + WithArrowShortest, + WithArrowShorter, + WithArrowShort, + WithArrowMedium, + WithArrowTall, + } + + enum class RowGap { + None, + Shortest, + Shorter, + Short, + Medium, + Tall, + WithIconNone, + WithIconShortest, + WithIconShorter, + WithIconShort, + WithIconMedium, + WithIconTall, + } +} \ No newline at end of file diff --git a/theme-contract/src/main/java/com/orange/ouds/theme/tokens/OudsSpaceKeyTokens.kt b/theme-contract/src/main/java/com/orange/ouds/theme/tokens/OudsSpaceKeyTokens.kt deleted file mode 100644 index 30246e55..00000000 --- a/theme-contract/src/main/java/com/orange/ouds/theme/tokens/OudsSpaceKeyTokens.kt +++ /dev/null @@ -1,133 +0,0 @@ -/* - * 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.theme.tokens - -enum class OudsSpaceFixedKeyToken { - None, - Smash, - Shortest, - Shorter, - Short, - Medium, - Tall, - Taller, - Tallest, - Spacious, - Huge, - Jumbo -} - -enum class OudsSpaceScaledKeyToken { - None, - Smash, - Shortest, - Shorter, - Short, - Medium, - Tall, - Taller, - Tallest, - Spacious -} - -enum class OudsSpacePaddingInlineKeyToken { - None, - Shorter, - Short, - Medium, - Tall, - Taller, - Tallest, - WithIconNone, - WithIconShortest, - WithIconShorter, - WithIconShort, - WithIconMedium, - WithIconTall, - WithIconTaller, - WithIconTallest, - WithArrowNone, - WithArrowShortest, - WithArrowShorter, - WithArrowShort, - WithArrowMedium, - WithArrowTall, - WithArrowTaller, - WithArrowTallest, -} - -enum class OudsSpacePaddingBlockKeyToken { - None, - Shorter, - Short, - Medium, - Tall, - Taller, - Tallest, - WithIconNone, - WithIconShortest, - WithIconShorter, - WithIconShort, - WithIconMedium, - WithIconTall, - WithIconTaller, -} - -enum class OudsSpaceInsetKeyToken { - None, - Smash, - Shortest, - Shorter, - Short, - Medium, - Tall, - Taller, - Tallest, - Spacious, -} - -enum class OudsSpaceColumnGapKeyToken { - None, - Shorter, - Short, - Medium, - Tall, - Taller, - WithIconNone, - WithIconShortest, - WithIconShorter, - WithIconShort, - WithIconMedium, - WithIconTall, - WithArrowNone, - WithArrowShortest, - WithArrowShorter, - WithArrowShort, - WithArrowMedium, - WithArrowTall, -} - -enum class OudsSpaceRowGapKeyToken { - None, - Shortest, - Shorter, - Short, - Medium, - Tall, - WithIconNone, - WithIconShortest, - WithIconShorter, - WithIconShort, - WithIconMedium, - WithIconTall, -} \ No newline at end of file diff --git a/theme-contract/src/main/java/com/orange/ouds/theme/tokens/components/OudsButtonTokens.kt b/theme-contract/src/main/java/com/orange/ouds/theme/tokens/components/OudsButtonTokens.kt index 24dcecc0..9a8c9112 100644 --- a/theme-contract/src/main/java/com/orange/ouds/theme/tokens/components/OudsButtonTokens.kt +++ b/theme-contract/src/main/java/com/orange/ouds/theme/tokens/components/OudsButtonTokens.kt @@ -14,7 +14,7 @@ package com.orange.ouds.theme.tokens.components import com.orange.ouds.theme.tokens.OudsBorderKeyToken import com.orange.ouds.theme.tokens.OudsElevationKeyToken -import com.orange.ouds.theme.tokens.OudsSpaceFixedKeyToken +import com.orange.ouds.theme.tokens.OudsSpaceKeyToken import com.orange.ouds.theme.tokens.OudsTypographyKeyToken import com.orange.ouds.theme.tokens.semantic.OudsColorKeyToken @@ -30,6 +30,6 @@ open class OudsButtonTokens( val hoveredElevation: OudsElevationKeyToken = OudsElevationKeyToken.None, val disabledElevation: OudsElevationKeyToken = OudsElevationKeyToken.None, val labelStyle: OudsTypographyKeyToken = OudsTypographyKeyToken.BodyStrongLarge, - val verticalContentPadding: OudsSpaceFixedKeyToken = OudsSpaceFixedKeyToken.Smash, - val horizontalContentPadding: OudsSpaceFixedKeyToken = OudsSpaceFixedKeyToken.Tall + val verticalContentPadding: OudsSpaceKeyToken.Fixed = OudsSpaceKeyToken.Fixed.Smash, + val horizontalContentPadding: OudsSpaceKeyToken.Fixed = OudsSpaceKeyToken.Fixed.Tall ) \ No newline at end of file diff --git a/theme-white-label/src/main/java/com/orange/ouds/theme/whitelabel/WhiteLabelTheme.kt b/theme-white-label/src/main/java/com/orange/ouds/theme/whitelabel/WhiteLabelTheme.kt index 1430b05a..e7556cc5 100644 --- a/theme-white-label/src/main/java/com/orange/ouds/theme/whitelabel/WhiteLabelTheme.kt +++ b/theme-white-label/src/main/java/com/orange/ouds/theme/whitelabel/WhiteLabelTheme.kt @@ -17,7 +17,7 @@ import androidx.compose.ui.text.font.FontFamily import com.orange.ouds.theme.OudsThemeContract import com.orange.ouds.theme.tokens.OudsBorderKeyToken import com.orange.ouds.theme.tokens.OudsElevationKeyToken -import com.orange.ouds.theme.tokens.OudsSpaceFixedKeyToken +import com.orange.ouds.theme.tokens.OudsSpaceKeyToken import com.orange.ouds.theme.tokens.OudsTypographyKeyToken import com.orange.ouds.theme.tokens.components.OudsButtonTokens import com.orange.ouds.theme.tokens.components.OudsComponentsTokens @@ -45,8 +45,8 @@ open class WhiteLabelTheme : OudsThemeContract { focusedElevation = OudsElevationKeyToken.OverlayDefault, hoveredElevation = OudsElevationKeyToken.OverlayDefault, labelStyle = OudsTypographyKeyToken.BodyDefaultLarge, - verticalContentPadding = OudsSpaceFixedKeyToken.Shortest, - horizontalContentPadding = OudsSpaceFixedKeyToken.Short + verticalContentPadding = OudsSpaceKeyToken.Fixed.Shortest, + horizontalContentPadding = OudsSpaceKeyToken.Fixed.Short ) ) } From 5f0c15ce31700127a19bc559846b49cd9daebc55 Mon Sep 17 00:00:00 2001 From: Pauline Auvray Date: Mon, 4 Nov 2024 10:54:50 +0100 Subject: [PATCH 19/32] Review: Use object instead of class --- .../main/java/com/orange/ouds/theme/tokens/OudsSizeKeyToken.kt | 2 +- .../main/java/com/orange/ouds/theme/tokens/OudsSpaceKeyToken.kt | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/theme-contract/src/main/java/com/orange/ouds/theme/tokens/OudsSizeKeyToken.kt b/theme-contract/src/main/java/com/orange/ouds/theme/tokens/OudsSizeKeyToken.kt index 305de011..3623189a 100644 --- a/theme-contract/src/main/java/com/orange/ouds/theme/tokens/OudsSizeKeyToken.kt +++ b/theme-contract/src/main/java/com/orange/ouds/theme/tokens/OudsSizeKeyToken.kt @@ -12,7 +12,7 @@ package com.orange.ouds.theme.tokens -class OudsSizeKeyToken { +object OudsSizeKeyToken { enum class IconDecorative { Shortest, Shorter, diff --git a/theme-contract/src/main/java/com/orange/ouds/theme/tokens/OudsSpaceKeyToken.kt b/theme-contract/src/main/java/com/orange/ouds/theme/tokens/OudsSpaceKeyToken.kt index 7e4efd2b..b71ccaa4 100644 --- a/theme-contract/src/main/java/com/orange/ouds/theme/tokens/OudsSpaceKeyToken.kt +++ b/theme-contract/src/main/java/com/orange/ouds/theme/tokens/OudsSpaceKeyToken.kt @@ -12,7 +12,7 @@ package com.orange.ouds.theme.tokens -class OudsSpaceKeyToken { +object OudsSpaceKeyToken { enum class Fixed { None, Smash, From c627d3b7838017464f2cc9c0218c8738792de478 Mon Sep 17 00:00:00 2001 From: Pauline Auvray Date: Mon, 4 Nov 2024 14:28:06 +0100 Subject: [PATCH 20/32] Review: Add nested data classes in OudsSizes and OudsSpaces --- .../com/orange/ouds/core/theme/OudsSizes.kt | 680 +++++++++------- .../com/orange/ouds/core/theme/OudsSpaces.kt | 743 ++++++++++-------- 2 files changed, 811 insertions(+), 612 deletions(-) diff --git a/core/src/main/java/com/orange/ouds/core/theme/OudsSizes.kt b/core/src/main/java/com/orange/ouds/core/theme/OudsSizes.kt index 40e7a888..0eafa537 100644 --- a/core/src/main/java/com/orange/ouds/core/theme/OudsSizes.kt +++ b/core/src/main/java/com/orange/ouds/core/theme/OudsSizes.kt @@ -24,290 +24,410 @@ import com.orange.ouds.theme.tokens.OudsSizeKeyToken import com.orange.ouds.theme.tokens.semantic.OudsSizeSemanticTokens data class OudsSizes( - val iconDecorativeShortest: Dp, - val iconDecorativeShorter: Dp, - val iconDecorativeShort: Dp, - val iconDecorativeMedium: Dp, - val iconDecorativeTall: Dp, - val iconDecorativeTaller: Dp, - val iconDecorativeTallest: Dp, - val iconWithHeadingSmallSizeShort: OudsAdaptiveTokenValue, - val iconWithHeadingSmallSizeMedium: OudsAdaptiveTokenValue, - val iconWithHeadingSmallSizeTall: OudsAdaptiveTokenValue, - val iconWithHeadingMediumSizeShort: OudsAdaptiveTokenValue, - val iconWithHeadingMediumSizeMedium: OudsAdaptiveTokenValue, - val iconWithHeadingMediumSizeTall: OudsAdaptiveTokenValue, - val iconWithHeadingLargeSizeShort: OudsAdaptiveTokenValue, - val iconWithHeadingLargeSizeMedium: OudsAdaptiveTokenValue, - val iconWithHeadingLargeSizeTall: OudsAdaptiveTokenValue, - val iconWithHeadingExtraLargeSizeShort: OudsAdaptiveTokenValue, - val iconWithHeadingExtraLargeSizeMedium: OudsAdaptiveTokenValue, - val iconWithHeadingExtraLargeSizeTall: OudsAdaptiveTokenValue, - val iconWithLabelSmallSizeShort: Dp, - val iconWithLabelSmallSizeMedium: Dp, - val iconWithLabelSmallSizeTall: Dp, - val iconWithLabelMediumSizeShort: Dp, - val iconWithLabelMediumSizeMedium: Dp, - val iconWithLabelMediumSizeTall: Dp, - val iconWithLabelLargeSizeShorter: Dp, - val iconWithLabelLargeSizeShort: Dp, - val iconWithLabelLargeSizeMedium: Dp, - val iconWithLabelLargeSizeTall: Dp, - val iconWithLabelLargeSizeTaller: Dp, - val iconWithLabelExtraLargeSizeShort: Dp, - val iconWithLabelExtraLargeSizeMedium: Dp, - val iconWithLabelExtraLargeSizeTall: Dp, - val iconWithBodySmallSizeShort: OudsAdaptiveTokenValue, - val iconWithBodySmallSizeMedium: OudsAdaptiveTokenValue, - val iconWithBodySmallSizeTall: OudsAdaptiveTokenValue, - val iconWithBodyMediumSizeShort: OudsAdaptiveTokenValue, - val iconWithBodyMediumSizeMedium: OudsAdaptiveTokenValue, - val iconWithBodyMediumSizeTall: OudsAdaptiveTokenValue, - val iconWithBodyLargeSizeShort: OudsAdaptiveTokenValue, - val iconWithBodyLargeSizeMedium: OudsAdaptiveTokenValue, - val iconWithBodyLargeSizeTall: OudsAdaptiveTokenValue, - val maxWidthTypeDisplaySmall: OudsAdaptiveTokenValue, - val maxWidthTypeDisplayMedium: OudsAdaptiveTokenValue, - val maxWidthTypeDisplayLarge: OudsAdaptiveTokenValue, - val maxWidthTypeHeadingSmall: OudsAdaptiveTokenValue, - val maxWidthTypeHeadingMedium: OudsAdaptiveTokenValue, - val maxWidthTypeHeadingLarge: OudsAdaptiveTokenValue, - val maxWidthTypeHeadingExtraLarge: OudsAdaptiveTokenValue, - val maxWidthTypeBodySmall: OudsAdaptiveTokenValue, - val maxWidthTypeBodyMedium: OudsAdaptiveTokenValue, - val maxWidthTypeBodyLarge: OudsAdaptiveTokenValue, -) + val icon: Icon, + val maxWidthType: MaxWidthType +) { + data class Icon( + val decorative: Decorative, + val withHeading: WithHeading, + val withLabel: WithLabel, + val withBody: WithBody + ) { + data class Decorative( + val shortest: Dp, + val shorter: Dp, + val short: Dp, + val medium: Dp, + val tall: Dp, + val taller: Dp, + val tallest: Dp, + ) + + data class WithHeading( + val small: Small, + val medium: Medium, + val large: Large, + val extraLarge: ExtraLarge + ) { + data class Small( + val sizeShort: OudsAdaptiveTokenValue, + val sizeMedium: OudsAdaptiveTokenValue, + val sizeTall: OudsAdaptiveTokenValue, + ) + + data class Medium( + val sizeShort: OudsAdaptiveTokenValue, + val sizeMedium: OudsAdaptiveTokenValue, + val sizeTall: OudsAdaptiveTokenValue, + ) + + data class Large( + val sizeShort: OudsAdaptiveTokenValue, + val sizeMedium: OudsAdaptiveTokenValue, + val sizeTall: OudsAdaptiveTokenValue, + ) + + data class ExtraLarge( + val sizeShort: OudsAdaptiveTokenValue, + val sizeMedium: OudsAdaptiveTokenValue, + val sizeTall: OudsAdaptiveTokenValue, + ) + } + + data class WithLabel( + val small: Small, + val medium: Medium, + val large: Large, + val extraLarge: ExtraLarge + ) { + data class Small( + val sizeShort: Dp, + val sizeMedium: Dp, + val sizeTall: Dp, + ) + + data class Medium( + val sizeShort: Dp, + val sizeMedium: Dp, + val sizeTall: Dp, + ) + + data class Large( + val sizeShorter: Dp, + val sizeShort: Dp, + val sizeMedium: Dp, + val sizeTall: Dp, + val sizeTaller: Dp, + ) + + data class ExtraLarge( + val sizeShort: Dp, + val sizeMedium: Dp, + val sizeTall: Dp, + ) + } + + data class WithBody( + val small: Small, + val medium: Medium, + val large: Large, + ) { + data class Small( + val sizeShort: OudsAdaptiveTokenValue, + val sizeMedium: OudsAdaptiveTokenValue, + val sizeTall: OudsAdaptiveTokenValue, + ) + + data class Medium( + val sizeShort: OudsAdaptiveTokenValue, + val sizeMedium: OudsAdaptiveTokenValue, + val sizeTall: OudsAdaptiveTokenValue, + ) + + data class Large( + val sizeShort: OudsAdaptiveTokenValue, + val sizeMedium: OudsAdaptiveTokenValue, + val sizeTall: OudsAdaptiveTokenValue, + ) + } + } + + data class MaxWidthType( + val display: Display, + val heading: Heading, + val body: Body + ) { + data class Display( + val small: OudsAdaptiveTokenValue, + val medium: OudsAdaptiveTokenValue, + val large: OudsAdaptiveTokenValue, + ) + + data class Heading( + val small: OudsAdaptiveTokenValue, + val medium: OudsAdaptiveTokenValue, + val large: OudsAdaptiveTokenValue, + val extraLarge: OudsAdaptiveTokenValue, + ) + + data class Body( + val small: OudsAdaptiveTokenValue, + val medium: OudsAdaptiveTokenValue, + val large: OudsAdaptiveTokenValue, + ) + } +} fun OudsSizeSemanticTokens.getSizes() = OudsSizes( - iconDecorativeShortest = iconDecorativeShortest.dp, - iconDecorativeShorter = iconDecorativeShorter.dp, - iconDecorativeShort = iconDecorativeShort.dp, - iconDecorativeMedium = iconDecorativeMedium.dp, - iconDecorativeTall = iconDecorativeTall.dp, - iconDecorativeTaller = iconDecorativeTaller.dp, - iconDecorativeTallest = iconDecorativeTallest.dp, - iconWithHeadingSmallSizeShort = OudsAdaptiveTokenValue( - iconWithHeadingSmallSizeShortMobile.dp, - iconWithHeadingSmallSizeShortMobile.dp, - iconWithHeadingSmallSizeShortTablet.dp - ), - iconWithHeadingSmallSizeMedium = OudsAdaptiveTokenValue( - iconWithHeadingSmallSizeMediumMobile.dp, - iconWithHeadingSmallSizeMediumMobile.dp, - iconWithHeadingSmallSizeMediumTablet.dp - ), - iconWithHeadingSmallSizeTall = OudsAdaptiveTokenValue( - iconWithHeadingSmallSizeTallMobile.dp, - iconWithHeadingSmallSizeTallMobile.dp, - iconWithHeadingSmallSizeTallTablet.dp - ), - iconWithHeadingMediumSizeShort = OudsAdaptiveTokenValue( - iconWithHeadingMediumSizeShortMobile.dp, - iconWithHeadingMediumSizeShortMobile.dp, - iconWithHeadingMediumSizeShortTablet.dp - ), - iconWithHeadingMediumSizeMedium = OudsAdaptiveTokenValue( - iconWithHeadingMediumSizeMediumMobile.dp, - iconWithHeadingMediumSizeMediumMobile.dp, - iconWithHeadingMediumSizeMediumTablet.dp - ), - iconWithHeadingMediumSizeTall = OudsAdaptiveTokenValue( - iconWithHeadingMediumSizeTallMobile.dp, - iconWithHeadingMediumSizeTallMobile.dp, - iconWithHeadingMediumSizeTallTablet.dp - ), - iconWithHeadingLargeSizeShort = OudsAdaptiveTokenValue( - iconWithHeadingLargeSizeShortMobile.dp, - iconWithHeadingLargeSizeShortMobile.dp, - iconWithHeadingLargeSizeShortTablet.dp - ), - iconWithHeadingLargeSizeMedium = OudsAdaptiveTokenValue( - iconWithHeadingLargeSizeMediumMobile.dp, - iconWithHeadingLargeSizeMediumMobile.dp, - iconWithHeadingLargeSizeMediumTablet.dp - ), - iconWithHeadingLargeSizeTall = OudsAdaptiveTokenValue( - iconWithHeadingLargeSizeTallMobile.dp, - iconWithHeadingLargeSizeTallMobile.dp, - iconWithHeadingLargeSizeTallTablet.dp - ), - iconWithHeadingExtraLargeSizeShort = OudsAdaptiveTokenValue( - iconWithHeadingXlargeSizeShortMobile.dp, - iconWithHeadingXlargeSizeShortMobile.dp, - iconWithHeadingXlargeSizeShortTablet.dp - ), - iconWithHeadingExtraLargeSizeMedium = OudsAdaptiveTokenValue( - iconWithHeadingXlargeSizeMediumMobile.dp, - iconWithHeadingXlargeSizeMediumMobile.dp, - iconWithHeadingXlargeSizeMediumTablet.dp - ), - iconWithHeadingExtraLargeSizeTall = OudsAdaptiveTokenValue( - iconWithHeadingXlargeSizeTallMobile.dp, - iconWithHeadingXlargeSizeTallMobile.dp, - iconWithHeadingXlargeSizeTallTablet.dp - ), - iconWithLabelSmallSizeShort = iconWithLabelSmallSizeShort.dp, - iconWithLabelSmallSizeMedium = iconWithLabelSmallSizeMedium.dp, - iconWithLabelSmallSizeTall = iconWithLabelSmallSizeTall.dp, - iconWithLabelMediumSizeShort = iconWithLabelMediumSizeShort.dp, - iconWithLabelMediumSizeMedium = iconWithLabelMediumSizeMedium.dp, - iconWithLabelMediumSizeTall = iconWithLabelMediumSizeTall.dp, - iconWithLabelLargeSizeShorter = iconWithLabelLargeSizeShorter.dp, - iconWithLabelLargeSizeShort = iconWithLabelLargeSizeShort.dp, - iconWithLabelLargeSizeMedium = iconWithLabelLargeSizeMedium.dp, - iconWithLabelLargeSizeTall = iconWithLabelLargeSizeTall.dp, - iconWithLabelLargeSizeTaller = iconWithLabelLargeSizeTaller.dp, - iconWithLabelExtraLargeSizeShort = iconWithLabelXlargeSizeShort.dp, - iconWithLabelExtraLargeSizeMedium = iconWithLabelXlargeSizeMedium.dp, - iconWithLabelExtraLargeSizeTall = iconWithLabelXlargeSizeTall.dp, - iconWithBodySmallSizeShort = OudsAdaptiveTokenValue( - iconWithBodySmallSizeShortMobile.dp, - iconWithBodySmallSizeShortMobile.dp, - iconWithBodySmallSizeShortTablet.dp - ), - iconWithBodySmallSizeMedium = OudsAdaptiveTokenValue( - iconWithBodySmallSizeMediumMobile.dp, - iconWithBodySmallSizeMediumMobile.dp, - iconWithBodySmallSizeMediumTablet.dp - ), - iconWithBodySmallSizeTall = OudsAdaptiveTokenValue( - iconWithBodySmallSizeTallMobile.dp, - iconWithBodySmallSizeTallMobile.dp, - iconWithBodySmallSizeTallTablet.dp - ), - iconWithBodyMediumSizeShort = OudsAdaptiveTokenValue( - iconWithBodyMediumSizeShortMobile.dp, - iconWithBodyMediumSizeShortMobile.dp, - iconWithBodyMediumSizeShortTablet.dp - ), - iconWithBodyMediumSizeMedium = OudsAdaptiveTokenValue( - iconWithBodyMediumSizeMediumMobile.dp, - iconWithBodyMediumSizeMediumMobile.dp, - iconWithBodyMediumSizeMediumTablet.dp - ), - iconWithBodyMediumSizeTall = OudsAdaptiveTokenValue( - iconWithBodyMediumSizeTallMobile.dp, - iconWithBodyMediumSizeTallMobile.dp, - iconWithBodyMediumSizeTallTablet.dp - ), - iconWithBodyLargeSizeShort = OudsAdaptiveTokenValue( - iconWithBodyLargeSizeShortMobile.dp, - iconWithBodyLargeSizeShortMobile.dp, - iconWithBodyLargeSizeShortTablet.dp - ), - iconWithBodyLargeSizeMedium = OudsAdaptiveTokenValue( - iconWithBodyLargeSizeMediumMobile.dp, - iconWithBodyLargeSizeMediumMobile.dp, - iconWithBodyLargeSizeMediumTablet.dp - ), - iconWithBodyLargeSizeTall = OudsAdaptiveTokenValue( - iconWithBodyLargeSizeTallMobile.dp, - iconWithBodyLargeSizeTallMobile.dp, - iconWithBodyLargeSizeTallTablet.dp - ), - maxWidthTypeDisplaySmall = OudsAdaptiveTokenValue( - maxWidthTypeDisplaySmallMobile.dp, - maxWidthTypeDisplaySmallMobile.dp, - maxWidthTypeDisplaySmallTablet.dp - ), - maxWidthTypeDisplayMedium = OudsAdaptiveTokenValue( - maxWidthTypeDisplayMediumMobile.dp, - maxWidthTypeDisplayMediumMobile.dp, - maxWidthTypeDisplayMediumTablet.dp - ), - maxWidthTypeDisplayLarge = OudsAdaptiveTokenValue( - maxWidthTypeDisplayLargeMobile.dp, - maxWidthTypeDisplayLargeMobile.dp, - maxWidthTypeDisplayLargeTablet.dp - ), - maxWidthTypeHeadingSmall = OudsAdaptiveTokenValue( - maxWidthTypeHeadingSmallMobile.dp, - maxWidthTypeHeadingSmallMobile.dp, - maxWidthTypeHeadingSmallTablet.dp - ), - maxWidthTypeHeadingMedium = OudsAdaptiveTokenValue( - maxWidthTypeHeadingMediumMobile.dp, - maxWidthTypeHeadingMediumMobile.dp, - maxWidthTypeHeadingMediumTablet.dp - ), - maxWidthTypeHeadingLarge = OudsAdaptiveTokenValue( - maxWidthTypeHeadingLargeMobile.dp, - maxWidthTypeHeadingLargeMobile.dp, - maxWidthTypeHeadingLargeTablet.dp - ), - maxWidthTypeHeadingExtraLarge = OudsAdaptiveTokenValue( - maxWidthTypeHeadingXlargeMobile.dp, - maxWidthTypeHeadingXlargeMobile.dp, - maxWidthTypeHeadingXlargeTablet.dp - ), - maxWidthTypeBodySmall = OudsAdaptiveTokenValue( - maxWidthTypeBodySmallMobile.dp, - maxWidthTypeBodySmallMobile.dp, - maxWidthTypeBodySmallTablet.dp - ), - maxWidthTypeBodyMedium = OudsAdaptiveTokenValue( - maxWidthTypeBodyMediumMobile.dp, - maxWidthTypeBodyMediumMobile.dp, - maxWidthTypeBodyMediumTablet.dp - ), - maxWidthTypeBodyLarge = OudsAdaptiveTokenValue( - maxWidthTypeBodyLargeMobile.dp, - maxWidthTypeBodyLargeMobile.dp, - maxWidthTypeBodyLargeTablet.dp + icon = OudsSizes.Icon( + decorative = OudsSizes.Icon.Decorative( + shortest = iconDecorativeShortest.dp, + shorter = iconDecorativeShorter.dp, + short = iconDecorativeShort.dp, + medium = iconDecorativeMedium.dp, + tall = iconDecorativeTall.dp, + taller = iconDecorativeTaller.dp, + tallest = iconDecorativeTallest.dp, + ), + withHeading = OudsSizes.Icon.WithHeading( + small = OudsSizes.Icon.WithHeading.Small( + sizeShort = OudsAdaptiveTokenValue( + iconWithHeadingSmallSizeShortMobile.dp, + iconWithHeadingSmallSizeShortMobile.dp, + iconWithHeadingSmallSizeShortTablet.dp + ), + sizeMedium = OudsAdaptiveTokenValue( + iconWithHeadingSmallSizeMediumMobile.dp, + iconWithHeadingSmallSizeMediumMobile.dp, + iconWithHeadingSmallSizeMediumTablet.dp + ), + sizeTall = OudsAdaptiveTokenValue( + iconWithHeadingSmallSizeTallMobile.dp, + iconWithHeadingSmallSizeTallMobile.dp, + iconWithHeadingSmallSizeTallTablet.dp + ), + ), + medium = OudsSizes.Icon.WithHeading.Medium( + sizeShort = OudsAdaptiveTokenValue( + iconWithHeadingMediumSizeShortMobile.dp, + iconWithHeadingMediumSizeShortMobile.dp, + iconWithHeadingMediumSizeShortTablet.dp + ), + sizeMedium = OudsAdaptiveTokenValue( + iconWithHeadingMediumSizeMediumMobile.dp, + iconWithHeadingMediumSizeMediumMobile.dp, + iconWithHeadingMediumSizeMediumTablet.dp + ), + sizeTall = OudsAdaptiveTokenValue( + iconWithHeadingMediumSizeTallMobile.dp, + iconWithHeadingMediumSizeTallMobile.dp, + iconWithHeadingMediumSizeTallTablet.dp + ), + ), + large = OudsSizes.Icon.WithHeading.Large( + sizeShort = OudsAdaptiveTokenValue( + iconWithHeadingLargeSizeShortMobile.dp, + iconWithHeadingLargeSizeShortMobile.dp, + iconWithHeadingLargeSizeShortTablet.dp + ), + sizeMedium = OudsAdaptiveTokenValue( + iconWithHeadingLargeSizeMediumMobile.dp, + iconWithHeadingLargeSizeMediumMobile.dp, + iconWithHeadingLargeSizeMediumTablet.dp + ), + sizeTall = OudsAdaptiveTokenValue( + iconWithHeadingLargeSizeTallMobile.dp, + iconWithHeadingLargeSizeTallMobile.dp, + iconWithHeadingLargeSizeTallTablet.dp + ), + ), + extraLarge = OudsSizes.Icon.WithHeading.ExtraLarge( + sizeShort = OudsAdaptiveTokenValue( + iconWithHeadingXlargeSizeShortMobile.dp, + iconWithHeadingXlargeSizeShortMobile.dp, + iconWithHeadingXlargeSizeShortTablet.dp + ), + sizeMedium = OudsAdaptiveTokenValue( + iconWithHeadingXlargeSizeMediumMobile.dp, + iconWithHeadingXlargeSizeMediumMobile.dp, + iconWithHeadingXlargeSizeMediumTablet.dp + ), + sizeTall = OudsAdaptiveTokenValue( + iconWithHeadingXlargeSizeTallMobile.dp, + iconWithHeadingXlargeSizeTallMobile.dp, + iconWithHeadingXlargeSizeTallTablet.dp + ), + ) + ), + withLabel = OudsSizes.Icon.WithLabel( + small = OudsSizes.Icon.WithLabel.Small( + sizeShort = iconWithLabelSmallSizeShort.dp, + sizeMedium = iconWithLabelSmallSizeMedium.dp, + sizeTall = iconWithLabelSmallSizeTall.dp, + ), + medium = OudsSizes.Icon.WithLabel.Medium( + sizeShort = iconWithLabelMediumSizeShort.dp, + sizeMedium = iconWithLabelMediumSizeMedium.dp, + sizeTall = iconWithLabelMediumSizeTall.dp, + ), + large = OudsSizes.Icon.WithLabel.Large( + sizeShorter = iconWithLabelLargeSizeShorter.dp, + sizeShort = iconWithLabelLargeSizeShort.dp, + sizeMedium = iconWithLabelLargeSizeMedium.dp, + sizeTall = iconWithLabelLargeSizeTall.dp, + sizeTaller = iconWithLabelLargeSizeTaller.dp, + ), + extraLarge = OudsSizes.Icon.WithLabel.ExtraLarge( + sizeShort = iconWithLabelXlargeSizeShort.dp, + sizeMedium = iconWithLabelXlargeSizeMedium.dp, + sizeTall = iconWithLabelXlargeSizeTall.dp, + ) + ), + withBody = OudsSizes.Icon.WithBody( + small = OudsSizes.Icon.WithBody.Small( + sizeShort = OudsAdaptiveTokenValue( + iconWithBodySmallSizeShortMobile.dp, + iconWithBodySmallSizeShortMobile.dp, + iconWithBodySmallSizeShortTablet.dp + ), + sizeMedium = OudsAdaptiveTokenValue( + iconWithBodySmallSizeMediumMobile.dp, + iconWithBodySmallSizeMediumMobile.dp, + iconWithBodySmallSizeMediumTablet.dp + ), + sizeTall = OudsAdaptiveTokenValue( + iconWithBodySmallSizeTallMobile.dp, + iconWithBodySmallSizeTallMobile.dp, + iconWithBodySmallSizeTallTablet.dp + ), + ), + medium = OudsSizes.Icon.WithBody.Medium( + sizeShort = OudsAdaptiveTokenValue( + iconWithBodyMediumSizeShortMobile.dp, + iconWithBodyMediumSizeShortMobile.dp, + iconWithBodyMediumSizeShortTablet.dp + ), + sizeMedium = OudsAdaptiveTokenValue( + iconWithBodyMediumSizeMediumMobile.dp, + iconWithBodyMediumSizeMediumMobile.dp, + iconWithBodyMediumSizeMediumTablet.dp + ), + sizeTall = OudsAdaptiveTokenValue( + iconWithBodyMediumSizeTallMobile.dp, + iconWithBodyMediumSizeTallMobile.dp, + iconWithBodyMediumSizeTallTablet.dp + ), + ), + large = OudsSizes.Icon.WithBody.Large( + sizeShort = OudsAdaptiveTokenValue( + iconWithBodyLargeSizeShortMobile.dp, + iconWithBodyLargeSizeShortMobile.dp, + iconWithBodyLargeSizeShortTablet.dp + ), + sizeMedium = OudsAdaptiveTokenValue( + iconWithBodyLargeSizeMediumMobile.dp, + iconWithBodyLargeSizeMediumMobile.dp, + iconWithBodyLargeSizeMediumTablet.dp + ), + sizeTall = OudsAdaptiveTokenValue( + iconWithBodyLargeSizeTallMobile.dp, + iconWithBodyLargeSizeTallMobile.dp, + iconWithBodyLargeSizeTallTablet.dp + ), + ), + ), ), + maxWidthType = OudsSizes.MaxWidthType( + display = OudsSizes.MaxWidthType.Display( + small = OudsAdaptiveTokenValue( + maxWidthTypeDisplaySmallMobile.dp, + maxWidthTypeDisplaySmallMobile.dp, + maxWidthTypeDisplaySmallTablet.dp + ), + medium = OudsAdaptiveTokenValue( + maxWidthTypeDisplayMediumMobile.dp, + maxWidthTypeDisplayMediumMobile.dp, + maxWidthTypeDisplayMediumTablet.dp + ), + large = OudsAdaptiveTokenValue( + maxWidthTypeDisplayLargeMobile.dp, + maxWidthTypeDisplayLargeMobile.dp, + maxWidthTypeDisplayLargeTablet.dp + ), + ), + heading = OudsSizes.MaxWidthType.Heading( + small = OudsAdaptiveTokenValue( + maxWidthTypeHeadingSmallMobile.dp, + maxWidthTypeHeadingSmallMobile.dp, + maxWidthTypeHeadingSmallTablet.dp + ), + medium = OudsAdaptiveTokenValue( + maxWidthTypeHeadingMediumMobile.dp, + maxWidthTypeHeadingMediumMobile.dp, + maxWidthTypeHeadingMediumTablet.dp + ), + large = OudsAdaptiveTokenValue( + maxWidthTypeHeadingLargeMobile.dp, + maxWidthTypeHeadingLargeMobile.dp, + maxWidthTypeHeadingLargeTablet.dp + ), + extraLarge = OudsAdaptiveTokenValue( + maxWidthTypeHeadingXlargeMobile.dp, + maxWidthTypeHeadingXlargeMobile.dp, + maxWidthTypeHeadingXlargeTablet.dp + ), + ), + body = OudsSizes.MaxWidthType.Body( + small = OudsAdaptiveTokenValue( + maxWidthTypeBodySmallMobile.dp, + maxWidthTypeBodySmallMobile.dp, + maxWidthTypeBodySmallTablet.dp + ), + medium = OudsAdaptiveTokenValue( + maxWidthTypeBodyMediumMobile.dp, + maxWidthTypeBodyMediumMobile.dp, + maxWidthTypeBodyMediumTablet.dp + ), + large = OudsAdaptiveTokenValue( + maxWidthTypeBodyLargeMobile.dp, + maxWidthTypeBodyLargeMobile.dp, + maxWidthTypeBodyLargeTablet.dp + ), + ) + ) ) @Stable fun OudsSizes.fromToken(token: OudsSizeKeyToken.IconDecorative): Dp { return when (token) { - OudsSizeKeyToken.IconDecorative.Shortest -> iconDecorativeShortest - OudsSizeKeyToken.IconDecorative.Shorter -> iconDecorativeShorter - OudsSizeKeyToken.IconDecorative.Short -> iconDecorativeShort - OudsSizeKeyToken.IconDecorative.Medium -> iconDecorativeMedium - OudsSizeKeyToken.IconDecorative.Tall -> iconDecorativeTall - OudsSizeKeyToken.IconDecorative.Taller -> iconDecorativeTaller - OudsSizeKeyToken.IconDecorative.Tallest -> iconDecorativeTallest + OudsSizeKeyToken.IconDecorative.Shortest -> icon.decorative.shortest + OudsSizeKeyToken.IconDecorative.Shorter -> icon.decorative.shorter + OudsSizeKeyToken.IconDecorative.Short -> icon.decorative.short + OudsSizeKeyToken.IconDecorative.Medium -> icon.decorative.medium + OudsSizeKeyToken.IconDecorative.Tall -> icon.decorative.tall + OudsSizeKeyToken.IconDecorative.Taller -> icon.decorative.taller + OudsSizeKeyToken.IconDecorative.Tallest -> icon.decorative.tallest } } @Stable fun OudsSizes.fromToken(token: OudsSizeKeyToken.IconWithText, adaptiveWindowType: OudsAdaptiveWindowType): Dp { val dimensionSizeIconWithTextValue: Any = when (token) { - OudsSizeKeyToken.IconWithText.HeadingSmallSizeShort -> iconWithHeadingSmallSizeShort - OudsSizeKeyToken.IconWithText.HeadingSmallSizeMedium -> iconWithHeadingSmallSizeMedium - OudsSizeKeyToken.IconWithText.HeadingSmallSizeTall -> iconWithHeadingSmallSizeTall - OudsSizeKeyToken.IconWithText.HeadingMediumSizeShort -> iconWithHeadingMediumSizeShort - OudsSizeKeyToken.IconWithText.HeadingMediumSizeMedium -> iconWithHeadingMediumSizeMedium - OudsSizeKeyToken.IconWithText.HeadingMediumSizeTall -> iconWithHeadingMediumSizeTall - OudsSizeKeyToken.IconWithText.HeadingLargeSizeShort -> iconWithHeadingLargeSizeShort - OudsSizeKeyToken.IconWithText.HeadingLargeSizeMedium -> iconWithBodyLargeSizeMedium - OudsSizeKeyToken.IconWithText.HeadingLargeSizeTall -> iconWithHeadingLargeSizeTall - OudsSizeKeyToken.IconWithText.HeadingExtraLargeSizeShort -> iconWithHeadingExtraLargeSizeShort - OudsSizeKeyToken.IconWithText.HeadingExtraLargeSizeMedium -> iconWithHeadingExtraLargeSizeMedium - OudsSizeKeyToken.IconWithText.HeadingExtraLargeSizeTall -> iconWithHeadingExtraLargeSizeTall - OudsSizeKeyToken.IconWithText.LabelLargeSizeShorter -> iconWithLabelLargeSizeShorter - OudsSizeKeyToken.IconWithText.LabelLargeSizeShort -> iconWithLabelLargeSizeShort - OudsSizeKeyToken.IconWithText.LabelLargeSizeMedium -> iconWithLabelLargeSizeMedium - OudsSizeKeyToken.IconWithText.LabelLargeSizeTall -> iconWithLabelLargeSizeTall - OudsSizeKeyToken.IconWithText.LabelLargeSizeTaller -> iconWithLabelLargeSizeTaller - OudsSizeKeyToken.IconWithText.LabelMediumSizeShort -> iconWithLabelMediumSizeShort - OudsSizeKeyToken.IconWithText.LabelMediumSizeMedium -> iconWithLabelMediumSizeMedium - OudsSizeKeyToken.IconWithText.LabelMediumSizeTall -> iconWithLabelMediumSizeTall - OudsSizeKeyToken.IconWithText.LabelSmallSizeShort -> iconWithLabelSmallSizeShort - OudsSizeKeyToken.IconWithText.LabelSmallSizeMedium -> iconWithLabelSmallSizeMedium - OudsSizeKeyToken.IconWithText.LabelSmallSizeTall -> iconWithLabelSmallSizeTall - OudsSizeKeyToken.IconWithText.LabelExtraLargeSizeShort -> iconWithLabelExtraLargeSizeShort - OudsSizeKeyToken.IconWithText.LabelExtraLargeSizeMedium -> iconWithLabelExtraLargeSizeMedium - OudsSizeKeyToken.IconWithText.LabelExtraLargeSizeTall -> iconWithLabelExtraLargeSizeTall - OudsSizeKeyToken.IconWithText.BodySmallSizeShort -> iconWithBodySmallSizeShort - OudsSizeKeyToken.IconWithText.BodySmallSizeMedium -> iconWithBodySmallSizeMedium - OudsSizeKeyToken.IconWithText.BodySmallSizeTall -> iconWithBodySmallSizeTall - OudsSizeKeyToken.IconWithText.BodyMediumSizeShort -> iconWithBodyMediumSizeShort - OudsSizeKeyToken.IconWithText.BodyMediumSizeMedium -> iconWithBodyMediumSizeMedium - OudsSizeKeyToken.IconWithText.BodyMediumSizeTall -> iconWithBodyMediumSizeTall - OudsSizeKeyToken.IconWithText.BodyLargeSizeShort -> iconWithBodyLargeSizeShort - OudsSizeKeyToken.IconWithText.BodyLargeSizeMedium -> iconWithBodyLargeSizeMedium - OudsSizeKeyToken.IconWithText.BodyLargeSizeTall -> iconWithBodyLargeSizeTall + OudsSizeKeyToken.IconWithText.HeadingSmallSizeShort -> icon.withHeading.small.sizeShort + OudsSizeKeyToken.IconWithText.HeadingSmallSizeMedium -> icon.withHeading.small.sizeMedium + OudsSizeKeyToken.IconWithText.HeadingSmallSizeTall -> icon.withHeading.small.sizeTall + OudsSizeKeyToken.IconWithText.HeadingMediumSizeShort -> icon.withHeading.medium.sizeShort + OudsSizeKeyToken.IconWithText.HeadingMediumSizeMedium -> icon.withHeading.medium.sizeMedium + OudsSizeKeyToken.IconWithText.HeadingMediumSizeTall -> icon.withHeading.medium.sizeTall + OudsSizeKeyToken.IconWithText.HeadingLargeSizeShort -> icon.withHeading.large.sizeShort + OudsSizeKeyToken.IconWithText.HeadingLargeSizeMedium -> icon.withHeading.large.sizeMedium + OudsSizeKeyToken.IconWithText.HeadingLargeSizeTall -> icon.withHeading.large.sizeTall + OudsSizeKeyToken.IconWithText.HeadingExtraLargeSizeShort -> icon.withHeading.extraLarge.sizeShort + OudsSizeKeyToken.IconWithText.HeadingExtraLargeSizeMedium -> icon.withHeading.extraLarge.sizeMedium + OudsSizeKeyToken.IconWithText.HeadingExtraLargeSizeTall -> icon.withHeading.extraLarge.sizeTall + OudsSizeKeyToken.IconWithText.LabelLargeSizeShorter -> icon.withLabel.large.sizeShorter + OudsSizeKeyToken.IconWithText.LabelLargeSizeShort -> icon.withLabel.large.sizeShort + OudsSizeKeyToken.IconWithText.LabelLargeSizeMedium -> icon.withLabel.large.sizeMedium + OudsSizeKeyToken.IconWithText.LabelLargeSizeTall -> icon.withLabel.large.sizeTall + OudsSizeKeyToken.IconWithText.LabelLargeSizeTaller -> icon.withLabel.large.sizeTaller + OudsSizeKeyToken.IconWithText.LabelMediumSizeShort -> icon.withLabel.medium.sizeShort + OudsSizeKeyToken.IconWithText.LabelMediumSizeMedium -> icon.withLabel.medium.sizeMedium + OudsSizeKeyToken.IconWithText.LabelMediumSizeTall -> icon.withLabel.medium.sizeTall + OudsSizeKeyToken.IconWithText.LabelSmallSizeShort -> icon.withLabel.small.sizeShort + OudsSizeKeyToken.IconWithText.LabelSmallSizeMedium -> icon.withLabel.small.sizeMedium + OudsSizeKeyToken.IconWithText.LabelSmallSizeTall -> icon.withLabel.small.sizeTall + OudsSizeKeyToken.IconWithText.LabelExtraLargeSizeShort -> icon.withLabel.extraLarge.sizeShort + OudsSizeKeyToken.IconWithText.LabelExtraLargeSizeMedium -> icon.withLabel.extraLarge.sizeMedium + OudsSizeKeyToken.IconWithText.LabelExtraLargeSizeTall -> icon.withLabel.extraLarge.sizeTall + OudsSizeKeyToken.IconWithText.BodySmallSizeShort -> icon.withBody.small.sizeShort + OudsSizeKeyToken.IconWithText.BodySmallSizeMedium -> icon.withBody.small.sizeMedium + OudsSizeKeyToken.IconWithText.BodySmallSizeTall -> icon.withBody.small.sizeTall + OudsSizeKeyToken.IconWithText.BodyMediumSizeShort -> icon.withBody.medium.sizeShort + OudsSizeKeyToken.IconWithText.BodyMediumSizeMedium -> icon.withBody.medium.sizeMedium + OudsSizeKeyToken.IconWithText.BodyMediumSizeTall -> icon.withBody.medium.sizeTall + OudsSizeKeyToken.IconWithText.BodyLargeSizeShort -> icon.withBody.large.sizeShort + OudsSizeKeyToken.IconWithText.BodyLargeSizeMedium -> icon.withBody.large.sizeMedium + OudsSizeKeyToken.IconWithText.BodyLargeSizeTall -> icon.withBody.large.sizeTall } return if (dimensionSizeIconWithTextValue is OudsAdaptiveTokenValue<*>) { @@ -320,16 +440,16 @@ fun OudsSizes.fromToken(token: OudsSizeKeyToken.IconWithText, adaptiveWindowType @Stable fun OudsSizes.fromToken(token: OudsSizeKeyToken.MaxWidthType, adaptiveWindowType: OudsAdaptiveWindowType): Dp { val dimensionMaxWidthTypeToken = when (token) { - OudsSizeKeyToken.MaxWidthType.DisplaySmall -> maxWidthTypeDisplaySmall - OudsSizeKeyToken.MaxWidthType.DisplayMedium -> maxWidthTypeDisplayMedium - OudsSizeKeyToken.MaxWidthType.DisplayLarge -> maxWidthTypeDisplayLarge - OudsSizeKeyToken.MaxWidthType.HeadingSmall -> maxWidthTypeHeadingSmall - OudsSizeKeyToken.MaxWidthType.HeadingMedium -> maxWidthTypeHeadingMedium - OudsSizeKeyToken.MaxWidthType.HeadingLarge -> maxWidthTypeHeadingLarge - OudsSizeKeyToken.MaxWidthType.HeadingExtraLarge -> maxWidthTypeHeadingExtraLarge - OudsSizeKeyToken.MaxWidthType.BodySmall -> maxWidthTypeBodySmall - OudsSizeKeyToken.MaxWidthType.BodyMedium -> maxWidthTypeBodyMedium - OudsSizeKeyToken.MaxWidthType.BodyLarge -> maxWidthTypeBodyLarge + OudsSizeKeyToken.MaxWidthType.DisplaySmall -> maxWidthType.display.small + OudsSizeKeyToken.MaxWidthType.DisplayMedium -> maxWidthType.display.medium + OudsSizeKeyToken.MaxWidthType.DisplayLarge -> maxWidthType.display.large + OudsSizeKeyToken.MaxWidthType.HeadingSmall -> maxWidthType.heading.small + OudsSizeKeyToken.MaxWidthType.HeadingMedium -> maxWidthType.heading.medium + OudsSizeKeyToken.MaxWidthType.HeadingLarge -> maxWidthType.heading.large + OudsSizeKeyToken.MaxWidthType.HeadingExtraLarge -> maxWidthType.heading.extraLarge + OudsSizeKeyToken.MaxWidthType.BodySmall -> maxWidthType.body.small + OudsSizeKeyToken.MaxWidthType.BodyMedium -> maxWidthType.body.medium + OudsSizeKeyToken.MaxWidthType.BodyLarge -> maxWidthType.body.large } return when (adaptiveWindowType) { diff --git a/core/src/main/java/com/orange/ouds/core/theme/OudsSpaces.kt b/core/src/main/java/com/orange/ouds/core/theme/OudsSpaces.kt index 5612623b..26d194d6 100644 --- a/core/src/main/java/com/orange/ouds/core/theme/OudsSpaces.kt +++ b/core/src/main/java/com/orange/ouds/core/theme/OudsSpaces.kt @@ -24,280 +24,359 @@ import com.orange.ouds.theme.tokens.OudsSpaceKeyToken import com.orange.ouds.theme.tokens.semantic.OudsSpaceSemanticTokens data class OudsSpaces( - val fixedNone: Dp, - val fixedSmash: Dp, - val fixedShortest: Dp, - val fixedShorter: Dp, - val fixedShort: Dp, - val fixedMedium: Dp, - val fixedTall: Dp, - val fixedTaller: Dp, - val fixedTallest: Dp, - val fixedSpacious: Dp, - val fixedHuge: Dp, - val fixedJumbo: Dp, - val scaledNone: OudsAdaptiveTokenValue, - val scaledSmash: OudsAdaptiveTokenValue, - val scaledShortest: OudsAdaptiveTokenValue, - val scaledShorter: OudsAdaptiveTokenValue, - val scaledShort: OudsAdaptiveTokenValue, - val scaledMedium: OudsAdaptiveTokenValue, - val scaledTall: OudsAdaptiveTokenValue, - val scaledTaller: OudsAdaptiveTokenValue, - val scaledTallest: OudsAdaptiveTokenValue, - val scaledSpacious: OudsAdaptiveTokenValue, - val paddingInlineNone: Dp, - val paddingInlineShorter: Dp, - val paddingInlineShort: Dp, - val paddingInlineMedium: Dp, - val paddingInlineTall: Dp, - val paddingInlineTaller: Dp, - val paddingInlineTallest: Dp, - val paddingInlineWithIconNone: Dp, - val paddingInlineWithIconShortest: Dp, - val paddingInlineWithIconShorter: Dp, - val paddingInlineWithIconShort: Dp, - val paddingInlineWithIconMedium: Dp, - val paddingInlineWithIconTall: Dp, - val paddingInlineWithIconTaller: Dp, - val paddingInlineWithIconTallest: Dp, - val paddingInlineWithArrowNone: Dp, - val paddingInlineWithArrowShortest: Dp, - val paddingInlineWithArrowShorter: Dp, - val paddingInlineWithArrowShort: Dp, - val paddingInlineWithArrowMedium: Dp, - val paddingInlineWithArrowTall: Dp, - val paddingInlineWithArrowTaller: Dp, - val paddingInlineWithArrowTallest: Dp, - val paddingBlockNone: Dp, - val paddingBlockShorter: Dp, - val paddingBlockShort: Dp, - val paddingBlockMedium: Dp, - val paddingBlockTall: Dp, - val paddingBlockTaller: Dp, - val paddingBlockTallest: Dp, - val paddingBlockWithIconNone: Dp, - val paddingBlockWithIconShortest: Dp, - val paddingBlockWithIconShorter: Dp, - val paddingBlockWithIconShort: Dp, - val paddingBlockWithIconMedium: Dp, - val paddingBlockWithIconTall: Dp, - val paddingBlockWithIconTaller: Dp, - val insetNone: Dp, - val insetSmash: Dp, - val insetShortest: Dp, - val insetShorter: Dp, - val insetShort: Dp, - val insetMedium: Dp, - val insetTall: Dp, - val insetTaller: Dp, - val insetTallest: Dp, - val insetSpacious: Dp, - val columnGapNone: Dp, - val columnGapShorter: Dp, - val columnGapShort: Dp, - val columnGapMedium: Dp, - val columnGapTall: Dp, - val columnGapTaller: Dp, - val columnGapWithIconNone: Dp, - val columnGapWithIconShortest: Dp, - val columnGapWithIconShorter: Dp, - val columnGapWithIconShort: Dp, - val columnGapWithIconMedium: Dp, - val columnGapWithIconTall: Dp, - val columnGapWithArrowNone: Dp, - val columnGapWithArrowShortest: Dp, - val columnGapWithArrowShorter: Dp, - val columnGapWithArrowShort: Dp, - val columnGapWithArrowMedium: Dp, - val columnGapWithArrowTall: Dp, - val rowGapNone: Dp, - val rowGapShortest: Dp, - val rowGapShorter: Dp, - val rowGapShort: Dp, - val rowGapMedium: Dp, - val rowGapTall: Dp, - val rowGapWithIconNone: Dp, - val rowGapWithIconShortest: Dp, - val rowGapWithIconShorter: Dp, - val rowGapWithIconShort: Dp, - val rowGapWithIconMedium: Dp, - val rowGapWithIconTall: Dp, -) + val fixed: Fixed, + val scaled: Scaled, + val paddingInline: PaddingInline, + val paddingBlock: PaddingBlock, + val inset: Inset, + val columnGap: ColumnGap, + val rowGap: RowGap +) { + + data class Fixed( + val none: Dp, + val smash: Dp, + val shortest: Dp, + val shorter: Dp, + val short: Dp, + val medium: Dp, + val tall: Dp, + val taller: Dp, + val tallest: Dp, + val spacious: Dp, + val huge: Dp, + val jumbo: Dp + ) + + data class Scaled( + val none: OudsAdaptiveTokenValue, + val smash: OudsAdaptiveTokenValue, + val shortest: OudsAdaptiveTokenValue, + val shorter: OudsAdaptiveTokenValue, + val short: OudsAdaptiveTokenValue, + val medium: OudsAdaptiveTokenValue, + val tall: OudsAdaptiveTokenValue, + val taller: OudsAdaptiveTokenValue, + val tallest: OudsAdaptiveTokenValue, + val spacious: OudsAdaptiveTokenValue + ) + + data class PaddingInline( + val none: Dp, + val shorter: Dp, + val short: Dp, + val medium: Dp, + val tall: Dp, + val taller: Dp, + val tallest: Dp, + val withIcon: WithIcon, + val withArrow: WithArrow + ) { + data class WithIcon( + val none: Dp, + val shortest: Dp, + val shorter: Dp, + val short: Dp, + val medium: Dp, + val tall: Dp, + val taller: Dp, + val tallest: Dp, + ) + + data class WithArrow( + val none: Dp, + val shortest: Dp, + val shorter: Dp, + val short: Dp, + val medium: Dp, + val tall: Dp, + val taller: Dp, + val tallest: Dp, + ) + } + + data class PaddingBlock( + val none: Dp, + val shorter: Dp, + val short: Dp, + val medium: Dp, + val tall: Dp, + val taller: Dp, + val tallest: Dp, + val withIcon: WithIcon + ) { + data class WithIcon( + val none: Dp, + val shortest: Dp, + val shorter: Dp, + val short: Dp, + val medium: Dp, + val tall: Dp, + val taller: Dp, + ) + } + + data class Inset( + val none: Dp, + val smash: Dp, + val shortest: Dp, + val shorter: Dp, + val short: Dp, + val medium: Dp, + val tall: Dp, + val taller: Dp, + val tallest: Dp, + val spacious: Dp, + ) + + data class ColumnGap( + val none: Dp, + val shorter: Dp, + val short: Dp, + val medium: Dp, + val tall: Dp, + val taller: Dp, + val withIcon: WithIcon, + val withArrow: WithArrow + ) { + data class WithIcon( + val none: Dp, + val shortest: Dp, + val shorter: Dp, + val short: Dp, + val medium: Dp, + val tall: Dp, + ) + + data class WithArrow( + val none: Dp, + val shortest: Dp, + val shorter: Dp, + val short: Dp, + val medium: Dp, + val tall: Dp, + ) + } + + data class RowGap( + val none: Dp, + val shortest: Dp, + val shorter: Dp, + val short: Dp, + val medium: Dp, + val tall: Dp, + val withIcon: WithIcon + ) { + data class WithIcon( + val none: Dp, + val shortest: Dp, + val shorter: Dp, + val short: Dp, + val medium: Dp, + val tall: Dp, + ) + } +} fun OudsSpaceSemanticTokens.getSpaces() = OudsSpaces( - fixedNone = fixedNone.dp, - fixedSmash = fixedSmash.dp, - fixedShortest = fixedShortest.dp, - fixedShorter = fixedShorter.dp, - fixedShort = fixedShort.dp, - fixedMedium = fixedMedium.dp, - fixedTall = fixedTall.dp, - fixedTaller = fixedTaller.dp, - fixedTallest = fixedTallest.dp, - fixedSpacious = fixedSpacious.dp, - fixedHuge = fixedHuge.dp, - fixedJumbo = fixedJumbo.dp, - scaledNone = OudsAdaptiveTokenValue( - scaledNoneMobile.dp, - scaledNoneMobile.dp, - scaledNoneTablet.dp - ), - scaledSmash = OudsAdaptiveTokenValue( - scaledSmashMobile.dp, - scaledSmashMobile.dp, - scaledSmashTablet.dp - ), - scaledShortest = OudsAdaptiveTokenValue( - scaledShortestMobile.dp, - scaledShortestMobile.dp, - scaledShortestTablet.dp - ), - scaledShorter = OudsAdaptiveTokenValue( - scaledShorterMobile.dp, - scaledShorterMobile.dp, - scaledShorterTablet.dp - ), - scaledShort = OudsAdaptiveTokenValue( - scaledShortMobile.dp, - scaledShortMobile.dp, - scaledShortTablet.dp + fixed = OudsSpaces.Fixed( + none = fixedNone.dp, + smash = fixedSmash.dp, + shortest = fixedShortest.dp, + shorter = fixedShorter.dp, + short = fixedShort.dp, + medium = fixedMedium.dp, + tall = fixedTall.dp, + taller = fixedTaller.dp, + tallest = fixedTallest.dp, + spacious = fixedSpacious.dp, + huge = fixedHuge.dp, + jumbo = fixedJumbo.dp, ), - scaledMedium = OudsAdaptiveTokenValue( - scaledMediumMobile.dp, - scaledMediumMobile.dp, - scaledMediumTablet.dp + scaled = OudsSpaces.Scaled( + none = OudsAdaptiveTokenValue( + scaledNoneMobile.dp, + scaledNoneMobile.dp, + scaledNoneTablet.dp + ), + smash = OudsAdaptiveTokenValue( + scaledSmashMobile.dp, + scaledSmashMobile.dp, + scaledSmashTablet.dp + ), + shortest = OudsAdaptiveTokenValue( + scaledShortestMobile.dp, + scaledShortestMobile.dp, + scaledShortestTablet.dp + ), + shorter = OudsAdaptiveTokenValue( + scaledShorterMobile.dp, + scaledShorterMobile.dp, + scaledShorterTablet.dp + ), + short = OudsAdaptiveTokenValue( + scaledShortMobile.dp, + scaledShortMobile.dp, + scaledShortTablet.dp + ), + medium = OudsAdaptiveTokenValue( + scaledMediumMobile.dp, + scaledMediumMobile.dp, + scaledMediumTablet.dp + ), + tall = OudsAdaptiveTokenValue( + scaledTallMobile.dp, + scaledTallMobile.dp, + scaledTallTablet.dp + ), + taller = OudsAdaptiveTokenValue( + scaledTallerMobile.dp, + scaledTallerMobile.dp, + scaledTallerTablet.dp + ), + tallest = OudsAdaptiveTokenValue( + scaledTallestMobile.dp, + scaledTallestMobile.dp, + scaledTallestTablet.dp + ), + spacious = OudsAdaptiveTokenValue( + scaledSpaciousMobile.dp, + scaledSpaciousMobile.dp, + scaledSpaciousTablet.dp + ), ), - scaledTall = OudsAdaptiveTokenValue( - scaledTallMobile.dp, - scaledTallMobile.dp, - scaledTallTablet.dp + paddingInline = OudsSpaces.PaddingInline( + none = paddingInlineNone.dp, + shorter = paddingInlineShorter.dp, + short = paddingInlineShort.dp, + medium = paddingInlineMedium.dp, + tall = paddingInlineTall.dp, + taller = paddingInlineTaller.dp, + tallest = paddingInlineTallest.dp, + withIcon = OudsSpaces.PaddingInline.WithIcon( + none = paddingInlineWithIconNone.dp, + shortest = paddingInlineWithIconShortest.dp, + shorter = paddingInlineWithIconShorter.dp, + short = paddingInlineWithIconShort.dp, + medium = paddingInlineWithIconMedium.dp, + tall = paddingInlineWithIconTall.dp, + taller = paddingInlineWithIconTaller.dp, + tallest = paddingInlineWithIconTallest.dp, + ), + withArrow = OudsSpaces.PaddingInline.WithArrow( + none = paddingInlineWithArrowNone.dp, + shortest = paddingInlineWithArrowShortest.dp, + shorter = paddingInlineWithArrowShorter.dp, + short = paddingInlineWithArrowShort.dp, + medium = paddingInlineWithArrowMedium.dp, + tall = paddingInlineWithArrowTall.dp, + taller = paddingInlineWithArrowTaller.dp, + tallest = paddingInlineWithArrowTallest.dp, + ), ), - scaledTaller = OudsAdaptiveTokenValue( - scaledTallerMobile.dp, - scaledTallerMobile.dp, - scaledTallerTablet.dp + paddingBlock = OudsSpaces.PaddingBlock( + none = paddingBlockNone.dp, + shorter = paddingBlockShorter.dp, + short = paddingBlockShort.dp, + medium = paddingBlockMedium.dp, + tall = paddingBlockTall.dp, + taller = paddingBlockTaller.dp, + tallest = paddingBlockTallest.dp, + withIcon = OudsSpaces.PaddingBlock.WithIcon( + none = paddingBlockWithIconNone.dp, + shortest = paddingBlockWithIconShortest.dp, + shorter = paddingBlockWithIconShorter.dp, + short = paddingBlockWithIconShort.dp, + medium = paddingBlockWithIconMedium.dp, + tall = paddingBlockWithIconTall.dp, + taller = paddingBlockWithIconTaller.dp, + ), ), - scaledTallest = OudsAdaptiveTokenValue( - scaledTallestMobile.dp, - scaledTallestMobile.dp, - scaledTallestTablet.dp + inset = OudsSpaces.Inset( + none = insetNone.dp, + smash = insetSmash.dp, + shortest = insetShortest.dp, + shorter = insetShorter.dp, + short = insetShort.dp, + medium = insetMedium.dp, + tall = insetTall.dp, + taller = insetTaller.dp, + tallest = insetTallest.dp, + spacious = insetSpacious.dp, ), - scaledSpacious = OudsAdaptiveTokenValue( - scaledSpaciousMobile.dp, - scaledSpaciousMobile.dp, - scaledSpaciousTablet.dp + columnGap = OudsSpaces.ColumnGap( + none = columnGapNone.dp, + shorter = columnGapShorter.dp, + short = columnGapShort.dp, + medium = columnGapMedium.dp, + tall = columnGapTall.dp, + taller = columnGapTaller.dp, + withIcon = OudsSpaces.ColumnGap.WithIcon( + none = columnGapWithIconNone.dp, + shortest = columnGapWithIconShortest.dp, + shorter = columnGapWithIconShorter.dp, + short = columnGapWithIconShort.dp, + medium = columnGapWithIconMedium.dp, + tall = columnGapWithIconTall.dp, + ), + withArrow = OudsSpaces.ColumnGap.WithArrow( + none = columnGapWithArrowNone.dp, + shortest = columnGapWithArrowShortest.dp, + shorter = columnGapWithArrowShorter.dp, + short = columnGapWithArrowShort.dp, + medium = columnGapWithArrowMedium.dp, + tall = columnGapWithArrowTall.dp, + ), ), - paddingInlineNone = paddingInlineNone.dp, - paddingInlineShorter = paddingInlineShorter.dp, - paddingInlineShort = paddingInlineShort.dp, - paddingInlineMedium = paddingInlineMedium.dp, - paddingInlineTall = paddingInlineTall.dp, - paddingInlineTaller = paddingInlineTaller.dp, - paddingInlineTallest = paddingInlineTallest.dp, - paddingInlineWithIconNone = paddingInlineWithIconNone.dp, - paddingInlineWithIconShortest = paddingInlineWithIconShortest.dp, - paddingInlineWithIconShorter = paddingInlineWithIconShorter.dp, - paddingInlineWithIconShort = paddingInlineWithIconShort.dp, - paddingInlineWithIconMedium = paddingInlineWithIconMedium.dp, - paddingInlineWithIconTall = paddingInlineWithIconTall.dp, - paddingInlineWithIconTaller = paddingInlineWithIconTaller.dp, - paddingInlineWithIconTallest = paddingInlineWithIconTallest.dp, - paddingInlineWithArrowNone = paddingInlineWithArrowNone.dp, - paddingInlineWithArrowShortest = paddingInlineWithArrowShortest.dp, - paddingInlineWithArrowShorter = paddingInlineWithArrowShorter.dp, - paddingInlineWithArrowShort = paddingInlineWithArrowShort.dp, - paddingInlineWithArrowMedium = paddingInlineWithArrowMedium.dp, - paddingInlineWithArrowTall = paddingInlineWithArrowTall.dp, - paddingInlineWithArrowTaller = paddingInlineWithArrowTaller.dp, - paddingInlineWithArrowTallest = paddingInlineWithArrowTallest.dp, - paddingBlockNone = paddingBlockNone.dp, - paddingBlockShorter = paddingBlockShorter.dp, - paddingBlockShort = paddingBlockShort.dp, - paddingBlockMedium = paddingBlockMedium.dp, - paddingBlockTall = paddingBlockTall.dp, - paddingBlockTaller = paddingBlockTaller.dp, - paddingBlockTallest = paddingBlockTallest.dp, - paddingBlockWithIconNone = paddingBlockWithIconNone.dp, - paddingBlockWithIconShortest = paddingBlockWithIconShortest.dp, - paddingBlockWithIconShorter = paddingBlockWithIconShorter.dp, - paddingBlockWithIconShort = paddingBlockWithIconShort.dp, - paddingBlockWithIconMedium = paddingBlockWithIconMedium.dp, - paddingBlockWithIconTall = paddingBlockWithIconTall.dp, - paddingBlockWithIconTaller = paddingBlockWithIconTaller.dp, - insetNone = insetNone.dp, - insetSmash = insetSmash.dp, - insetShortest = insetShortest.dp, - insetShorter = insetShorter.dp, - insetShort = insetShort.dp, - insetMedium = insetMedium.dp, - insetTall = insetTall.dp, - insetTaller = insetTaller.dp, - insetTallest = insetTallest.dp, - insetSpacious = insetSpacious.dp, - columnGapNone = columnGapNone.dp, - columnGapShorter = columnGapShorter.dp, - columnGapShort = columnGapShort.dp, - columnGapMedium = columnGapMedium.dp, - columnGapTall = columnGapTall.dp, - columnGapTaller = columnGapTaller.dp, - columnGapWithIconNone = columnGapWithIconNone.dp, - columnGapWithIconShortest = columnGapWithIconShortest.dp, - columnGapWithIconShorter = columnGapWithIconShorter.dp, - columnGapWithIconShort = columnGapWithIconShort.dp, - columnGapWithIconMedium = columnGapWithIconMedium.dp, - columnGapWithIconTall = columnGapWithIconTall.dp, - columnGapWithArrowNone = columnGapWithArrowNone.dp, - columnGapWithArrowShortest = columnGapWithArrowShortest.dp, - columnGapWithArrowShorter = columnGapWithArrowShorter.dp, - columnGapWithArrowShort = columnGapWithArrowShort.dp, - columnGapWithArrowMedium = columnGapWithArrowMedium.dp, - columnGapWithArrowTall = columnGapWithArrowTall.dp, - rowGapNone = rowGapNone.dp, - rowGapShortest = rowGapShortest.dp, - rowGapShorter = rowGapShorter.dp, - rowGapShort = rowGapShort.dp, - rowGapMedium = rowGapMedium.dp, - rowGapTall = rowGapTall.dp, - rowGapWithIconNone = rowGapWithIconNone.dp, - rowGapWithIconShortest = rowGapWithIconShortest.dp, - rowGapWithIconShorter = rowGapWithIconShorter.dp, - rowGapWithIconShort = rowGapWithIconShort.dp, - rowGapWithIconMedium = rowGapWithIconMedium.dp, - rowGapWithIconTall = rowGapWithIconTall.dp, + rowGap = OudsSpaces.RowGap( + none = rowGapNone.dp, + shortest = rowGapShortest.dp, + shorter = rowGapShorter.dp, + short = rowGapShort.dp, + medium = rowGapMedium.dp, + tall = rowGapTall.dp, + withIcon = OudsSpaces.RowGap.WithIcon( + none = rowGapWithIconNone.dp, + shortest = rowGapWithIconShortest.dp, + shorter = rowGapWithIconShorter.dp, + short = rowGapWithIconShort.dp, + medium = rowGapWithIconMedium.dp, + tall = rowGapWithIconTall.dp, + ) + ) ) @Stable fun OudsSpaces.fromToken(token: OudsSpaceKeyToken.Fixed): Dp { return when (token) { - OudsSpaceKeyToken.Fixed.None -> fixedNone - OudsSpaceKeyToken.Fixed.Smash -> fixedSmash - OudsSpaceKeyToken.Fixed.Shortest -> fixedShortest - OudsSpaceKeyToken.Fixed.Shorter -> fixedShorter - OudsSpaceKeyToken.Fixed.Short -> fixedShort - OudsSpaceKeyToken.Fixed.Medium -> fixedMedium - OudsSpaceKeyToken.Fixed.Tall -> fixedTall - OudsSpaceKeyToken.Fixed.Taller -> fixedTaller - OudsSpaceKeyToken.Fixed.Tallest -> fixedTallest - OudsSpaceKeyToken.Fixed.Spacious -> fixedSpacious - OudsSpaceKeyToken.Fixed.Huge -> fixedHuge - OudsSpaceKeyToken.Fixed.Jumbo -> fixedJumbo + OudsSpaceKeyToken.Fixed.None -> fixed.none + OudsSpaceKeyToken.Fixed.Smash -> fixed.smash + OudsSpaceKeyToken.Fixed.Shortest -> fixed.shortest + OudsSpaceKeyToken.Fixed.Shorter -> fixed.shorter + OudsSpaceKeyToken.Fixed.Short -> fixed.short + OudsSpaceKeyToken.Fixed.Medium -> fixed.medium + OudsSpaceKeyToken.Fixed.Tall -> fixed.tall + OudsSpaceKeyToken.Fixed.Taller -> fixed.taller + OudsSpaceKeyToken.Fixed.Tallest -> fixed.tallest + OudsSpaceKeyToken.Fixed.Spacious -> fixed.spacious + OudsSpaceKeyToken.Fixed.Huge -> fixed.huge + OudsSpaceKeyToken.Fixed.Jumbo -> fixed.jumbo } } @Stable fun OudsSpaces.fromToken(token: OudsSpaceKeyToken.Scaled, adaptiveWindowType: OudsAdaptiveWindowType): Dp { val dimensionAdaptableSpaceToken = when (token) { - OudsSpaceKeyToken.Scaled.None -> scaledNone - OudsSpaceKeyToken.Scaled.Smash -> scaledSmash - OudsSpaceKeyToken.Scaled.Shortest -> scaledShortest - OudsSpaceKeyToken.Scaled.Shorter -> scaledShorter - OudsSpaceKeyToken.Scaled.Short -> scaledShort - OudsSpaceKeyToken.Scaled.Medium -> scaledMedium - OudsSpaceKeyToken.Scaled.Tall -> scaledTall - OudsSpaceKeyToken.Scaled.Taller -> scaledTaller - OudsSpaceKeyToken.Scaled.Tallest -> scaledTallest - OudsSpaceKeyToken.Scaled.Spacious -> scaledSpacious + OudsSpaceKeyToken.Scaled.None -> scaled.none + OudsSpaceKeyToken.Scaled.Smash -> scaled.smash + OudsSpaceKeyToken.Scaled.Shortest -> scaled.shortest + OudsSpaceKeyToken.Scaled.Shorter -> scaled.shorter + OudsSpaceKeyToken.Scaled.Short -> scaled.short + OudsSpaceKeyToken.Scaled.Medium -> scaled.medium + OudsSpaceKeyToken.Scaled.Tall -> scaled.tall + OudsSpaceKeyToken.Scaled.Taller -> scaled.taller + OudsSpaceKeyToken.Scaled.Tallest -> scaled.tallest + OudsSpaceKeyToken.Scaled.Spacious -> scaled.spacious } return when (adaptiveWindowType) { @@ -310,107 +389,107 @@ fun OudsSpaces.fromToken(token: OudsSpaceKeyToken.Scaled, adaptiveWindowType: Ou @Stable fun OudsSpaces.fromToken(token: OudsSpaceKeyToken.PaddingInline): Dp { return when (token) { - OudsSpaceKeyToken.PaddingInline.None -> paddingInlineNone - OudsSpaceKeyToken.PaddingInline.Shorter -> paddingInlineShorter - OudsSpaceKeyToken.PaddingInline.Short -> paddingInlineShort - OudsSpaceKeyToken.PaddingInline.Medium -> paddingInlineMedium - OudsSpaceKeyToken.PaddingInline.Tall -> paddingInlineTall - OudsSpaceKeyToken.PaddingInline.Taller -> paddingInlineTaller - OudsSpaceKeyToken.PaddingInline.Tallest -> paddingInlineTallest - OudsSpaceKeyToken.PaddingInline.WithIconNone -> paddingInlineWithIconNone - OudsSpaceKeyToken.PaddingInline.WithIconShortest -> paddingInlineWithIconShortest - OudsSpaceKeyToken.PaddingInline.WithIconShorter -> paddingInlineWithIconShorter - OudsSpaceKeyToken.PaddingInline.WithIconShort -> paddingInlineWithIconShort - OudsSpaceKeyToken.PaddingInline.WithIconMedium -> paddingInlineWithIconMedium - OudsSpaceKeyToken.PaddingInline.WithIconTall -> paddingInlineWithIconTall - OudsSpaceKeyToken.PaddingInline.WithIconTaller -> paddingInlineWithIconTaller - OudsSpaceKeyToken.PaddingInline.WithIconTallest -> paddingInlineWithIconTallest - OudsSpaceKeyToken.PaddingInline.WithArrowNone -> paddingInlineWithArrowNone - OudsSpaceKeyToken.PaddingInline.WithArrowShortest -> paddingInlineWithArrowShortest - OudsSpaceKeyToken.PaddingInline.WithArrowShorter -> paddingInlineWithArrowShorter - OudsSpaceKeyToken.PaddingInline.WithArrowShort -> paddingInlineWithArrowShort - OudsSpaceKeyToken.PaddingInline.WithArrowMedium -> paddingInlineWithArrowMedium - OudsSpaceKeyToken.PaddingInline.WithArrowTall -> paddingInlineWithArrowTall - OudsSpaceKeyToken.PaddingInline.WithArrowTaller -> paddingInlineWithArrowTaller - OudsSpaceKeyToken.PaddingInline.WithArrowTallest -> paddingInlineWithArrowTallest + OudsSpaceKeyToken.PaddingInline.None -> paddingInline.none + OudsSpaceKeyToken.PaddingInline.Shorter -> paddingInline.shorter + OudsSpaceKeyToken.PaddingInline.Short -> paddingInline.short + OudsSpaceKeyToken.PaddingInline.Medium -> paddingInline.medium + OudsSpaceKeyToken.PaddingInline.Tall -> paddingInline.tall + OudsSpaceKeyToken.PaddingInline.Taller -> paddingInline.taller + OudsSpaceKeyToken.PaddingInline.Tallest -> paddingInline.tallest + OudsSpaceKeyToken.PaddingInline.WithIconNone -> paddingInline.withIcon.none + OudsSpaceKeyToken.PaddingInline.WithIconShortest -> paddingInline.withIcon.shortest + OudsSpaceKeyToken.PaddingInline.WithIconShorter -> paddingInline.withIcon.shorter + OudsSpaceKeyToken.PaddingInline.WithIconShort -> paddingInline.withIcon.short + OudsSpaceKeyToken.PaddingInline.WithIconMedium -> paddingInline.withIcon.medium + OudsSpaceKeyToken.PaddingInline.WithIconTall -> paddingInline.withIcon.tall + OudsSpaceKeyToken.PaddingInline.WithIconTaller -> paddingInline.withIcon.taller + OudsSpaceKeyToken.PaddingInline.WithIconTallest -> paddingInline.withIcon.tallest + OudsSpaceKeyToken.PaddingInline.WithArrowNone -> paddingInline.withArrow.none + OudsSpaceKeyToken.PaddingInline.WithArrowShortest -> paddingInline.withArrow.shortest + OudsSpaceKeyToken.PaddingInline.WithArrowShorter -> paddingInline.withArrow.shorter + OudsSpaceKeyToken.PaddingInline.WithArrowShort -> paddingInline.withArrow.short + OudsSpaceKeyToken.PaddingInline.WithArrowMedium -> paddingInline.withArrow.medium + OudsSpaceKeyToken.PaddingInline.WithArrowTall -> paddingInline.withArrow.tall + OudsSpaceKeyToken.PaddingInline.WithArrowTaller -> paddingInline.withArrow.taller + OudsSpaceKeyToken.PaddingInline.WithArrowTallest -> paddingInline.withArrow.tallest } } @Stable fun OudsSpaces.fromToken(token: OudsSpaceKeyToken.PaddingBlock): Dp { return when (token) { - OudsSpaceKeyToken.PaddingBlock.None -> paddingBlockNone - OudsSpaceKeyToken.PaddingBlock.Shorter -> paddingBlockShorter - OudsSpaceKeyToken.PaddingBlock.Short -> paddingBlockShort - OudsSpaceKeyToken.PaddingBlock.Medium -> paddingBlockMedium - OudsSpaceKeyToken.PaddingBlock.Tall -> paddingBlockTall - OudsSpaceKeyToken.PaddingBlock.Taller -> paddingBlockTaller - OudsSpaceKeyToken.PaddingBlock.Tallest -> paddingBlockTallest - OudsSpaceKeyToken.PaddingBlock.WithIconNone -> paddingBlockWithIconNone - OudsSpaceKeyToken.PaddingBlock.WithIconShortest -> paddingBlockWithIconShortest - OudsSpaceKeyToken.PaddingBlock.WithIconShorter -> paddingBlockWithIconShorter - OudsSpaceKeyToken.PaddingBlock.WithIconShort -> paddingBlockWithIconShort - OudsSpaceKeyToken.PaddingBlock.WithIconMedium -> paddingBlockWithIconMedium - OudsSpaceKeyToken.PaddingBlock.WithIconTall -> paddingBlockWithIconTall - OudsSpaceKeyToken.PaddingBlock.WithIconTaller -> paddingBlockWithIconTaller + OudsSpaceKeyToken.PaddingBlock.None -> paddingBlock.none + OudsSpaceKeyToken.PaddingBlock.Shorter -> paddingBlock.shorter + OudsSpaceKeyToken.PaddingBlock.Short -> paddingBlock.short + OudsSpaceKeyToken.PaddingBlock.Medium -> paddingBlock.medium + OudsSpaceKeyToken.PaddingBlock.Tall -> paddingBlock.tall + OudsSpaceKeyToken.PaddingBlock.Taller -> paddingBlock.taller + OudsSpaceKeyToken.PaddingBlock.Tallest -> paddingBlock.tallest + OudsSpaceKeyToken.PaddingBlock.WithIconNone -> paddingBlock.withIcon.none + OudsSpaceKeyToken.PaddingBlock.WithIconShortest -> paddingBlock.withIcon.shortest + OudsSpaceKeyToken.PaddingBlock.WithIconShorter -> paddingBlock.withIcon.shorter + OudsSpaceKeyToken.PaddingBlock.WithIconShort -> paddingBlock.withIcon.short + OudsSpaceKeyToken.PaddingBlock.WithIconMedium -> paddingBlock.withIcon.medium + OudsSpaceKeyToken.PaddingBlock.WithIconTall -> paddingBlock.withIcon.tall + OudsSpaceKeyToken.PaddingBlock.WithIconTaller -> paddingBlock.withIcon.taller } } @Stable fun OudsSpaces.fromToken(token: OudsSpaceKeyToken.Inset): Dp { return when (token) { - OudsSpaceKeyToken.Inset.None -> insetNone - OudsSpaceKeyToken.Inset.Smash -> insetSmash - OudsSpaceKeyToken.Inset.Shortest -> insetShortest - OudsSpaceKeyToken.Inset.Shorter -> insetShorter - OudsSpaceKeyToken.Inset.Short -> insetShort - OudsSpaceKeyToken.Inset.Medium -> insetMedium - OudsSpaceKeyToken.Inset.Tall -> insetTall - OudsSpaceKeyToken.Inset.Taller -> insetTaller - OudsSpaceKeyToken.Inset.Tallest -> insetTallest - OudsSpaceKeyToken.Inset.Spacious -> insetSpacious + OudsSpaceKeyToken.Inset.None -> inset.none + OudsSpaceKeyToken.Inset.Smash -> inset.smash + OudsSpaceKeyToken.Inset.Shortest -> inset.shortest + OudsSpaceKeyToken.Inset.Shorter -> inset.shorter + OudsSpaceKeyToken.Inset.Short -> inset.short + OudsSpaceKeyToken.Inset.Medium -> inset.medium + OudsSpaceKeyToken.Inset.Tall -> inset.tall + OudsSpaceKeyToken.Inset.Taller -> inset.taller + OudsSpaceKeyToken.Inset.Tallest -> inset.tallest + OudsSpaceKeyToken.Inset.Spacious -> inset.spacious } } @Stable fun OudsSpaces.fromToken(token: OudsSpaceKeyToken.ColumnGap): Dp { return when (token) { - OudsSpaceKeyToken.ColumnGap.None -> columnGapNone - OudsSpaceKeyToken.ColumnGap.Shorter -> columnGapShorter - OudsSpaceKeyToken.ColumnGap.Short -> columnGapShort - OudsSpaceKeyToken.ColumnGap.Medium -> columnGapMedium - OudsSpaceKeyToken.ColumnGap.Tall -> columnGapTall - OudsSpaceKeyToken.ColumnGap.Taller -> columnGapTaller - OudsSpaceKeyToken.ColumnGap.WithIconNone -> columnGapWithIconNone - OudsSpaceKeyToken.ColumnGap.WithIconShortest -> columnGapWithIconShortest - OudsSpaceKeyToken.ColumnGap.WithIconShorter -> columnGapWithIconShorter - OudsSpaceKeyToken.ColumnGap.WithIconShort -> columnGapWithIconShort - OudsSpaceKeyToken.ColumnGap.WithIconMedium -> columnGapWithIconMedium - OudsSpaceKeyToken.ColumnGap.WithIconTall -> columnGapWithIconTall - OudsSpaceKeyToken.ColumnGap.WithArrowNone -> columnGapWithArrowNone - OudsSpaceKeyToken.ColumnGap.WithArrowShortest -> columnGapWithArrowShortest - OudsSpaceKeyToken.ColumnGap.WithArrowShorter -> columnGapWithArrowShorter - OudsSpaceKeyToken.ColumnGap.WithArrowShort -> columnGapWithArrowShort - OudsSpaceKeyToken.ColumnGap.WithArrowMedium -> columnGapWithArrowMedium - OudsSpaceKeyToken.ColumnGap.WithArrowTall -> columnGapWithArrowTall + OudsSpaceKeyToken.ColumnGap.None -> columnGap.none + OudsSpaceKeyToken.ColumnGap.Shorter -> columnGap.shorter + OudsSpaceKeyToken.ColumnGap.Short -> columnGap.short + OudsSpaceKeyToken.ColumnGap.Medium -> columnGap.medium + OudsSpaceKeyToken.ColumnGap.Tall -> columnGap.tall + OudsSpaceKeyToken.ColumnGap.Taller -> columnGap.taller + OudsSpaceKeyToken.ColumnGap.WithIconNone -> columnGap.withIcon.none + OudsSpaceKeyToken.ColumnGap.WithIconShortest -> columnGap.withIcon.shortest + OudsSpaceKeyToken.ColumnGap.WithIconShorter -> columnGap.withIcon.shorter + OudsSpaceKeyToken.ColumnGap.WithIconShort -> columnGap.withIcon.short + OudsSpaceKeyToken.ColumnGap.WithIconMedium -> columnGap.withIcon.medium + OudsSpaceKeyToken.ColumnGap.WithIconTall -> columnGap.withIcon.tall + OudsSpaceKeyToken.ColumnGap.WithArrowNone -> columnGap.withArrow.none + OudsSpaceKeyToken.ColumnGap.WithArrowShortest -> columnGap.withArrow.shortest + OudsSpaceKeyToken.ColumnGap.WithArrowShorter -> columnGap.withArrow.shorter + OudsSpaceKeyToken.ColumnGap.WithArrowShort -> columnGap.withArrow.short + OudsSpaceKeyToken.ColumnGap.WithArrowMedium -> columnGap.withArrow.medium + OudsSpaceKeyToken.ColumnGap.WithArrowTall -> columnGap.withArrow.tall } } @Stable fun OudsSpaces.fromToken(token: OudsSpaceKeyToken.RowGap): Dp { return when (token) { - OudsSpaceKeyToken.RowGap.None -> rowGapNone - OudsSpaceKeyToken.RowGap.Shortest -> rowGapShortest - OudsSpaceKeyToken.RowGap.Shorter -> rowGapShorter - OudsSpaceKeyToken.RowGap.Short -> rowGapShort - OudsSpaceKeyToken.RowGap.Medium -> rowGapMedium - OudsSpaceKeyToken.RowGap.Tall -> rowGapTall - OudsSpaceKeyToken.RowGap.WithIconNone -> rowGapWithIconNone - OudsSpaceKeyToken.RowGap.WithIconShortest -> rowGapWithIconShortest - OudsSpaceKeyToken.RowGap.WithIconShorter -> rowGapWithIconShorter - OudsSpaceKeyToken.RowGap.WithIconShort -> rowGapWithIconShort - OudsSpaceKeyToken.RowGap.WithIconMedium -> rowGapWithIconMedium - OudsSpaceKeyToken.RowGap.WithIconTall -> rowGapWithIconTall + OudsSpaceKeyToken.RowGap.None -> rowGap.none + OudsSpaceKeyToken.RowGap.Shortest -> rowGap.shortest + OudsSpaceKeyToken.RowGap.Shorter -> rowGap.shorter + OudsSpaceKeyToken.RowGap.Short -> rowGap.short + OudsSpaceKeyToken.RowGap.Medium -> rowGap.medium + OudsSpaceKeyToken.RowGap.Tall -> rowGap.tall + OudsSpaceKeyToken.RowGap.WithIconNone -> rowGap.withIcon.none + OudsSpaceKeyToken.RowGap.WithIconShortest -> rowGap.withIcon.shortest + OudsSpaceKeyToken.RowGap.WithIconShorter -> rowGap.withIcon.shorter + OudsSpaceKeyToken.RowGap.WithIconShort -> rowGap.withIcon.short + OudsSpaceKeyToken.RowGap.WithIconMedium -> rowGap.withIcon.medium + OudsSpaceKeyToken.RowGap.WithIconTall -> rowGap.withIcon.tall } } From eeb7232c0b932e5553dae81caea0fe37d708ae72 Mon Sep 17 00:00:00 2001 From: Pauline Auvray Date: Mon, 4 Nov 2024 15:17:51 +0100 Subject: [PATCH 21/32] Review: Create nested enum classes for space key tokens --- .../ouds/app/ui/tokens/TokenProperty.kt | 55 +++++- .../com/orange/ouds/core/theme/OudsSpaces.kt | 168 +++++++++++++----- .../ouds/theme/tokens/OudsSpaceKeyToken.kt | 108 ++++++----- 3 files changed, 241 insertions(+), 90 deletions(-) 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 index 648caf0e..22387ba0 100644 --- 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 @@ -147,7 +147,23 @@ sealed class TokenProperty( data object SpaceColumnGap : TokenProperty( nameRes = R.string.app_tokens_dimension_space_columnGap_label, - tokens = { OudsSpaceKeyToken.ColumnGap.entries.map { Token(it.name, it.value) } } + tokens = { + mutableListOf>().apply { + addAll(OudsSpaceKeyToken.ColumnGap.entries.map { Token(it.name, it.value) }) + addAll(OudsSpaceKeyToken.ColumnGap.WithIcon.entries.map { + Token( + "${OudsSpaceKeyToken.ColumnGap.WithIcon::class.simpleName}.${it.name}", + it.value + ) + }) + addAll(OudsSpaceKeyToken.ColumnGap.WithArrow.entries.map { + Token( + "${OudsSpaceKeyToken.ColumnGap.WithArrow::class.simpleName}.${it.name}", + it.value + ) + }) + } + } ) data object SpaceFixed : TokenProperty( @@ -157,7 +173,23 @@ sealed class TokenProperty( data object SpacePaddingInline : TokenProperty( nameRes = R.string.app_tokens_dimension_space_paddingInline_label, - tokens = { OudsSpaceKeyToken.PaddingInline.entries.map { Token(it.name, it.value) } } + tokens = { + mutableListOf>().apply { + addAll(OudsSpaceKeyToken.PaddingInline.entries.map { Token(it.name, it.value) }) + addAll(OudsSpaceKeyToken.PaddingInline.WithIcon.entries.map { + Token( + "${OudsSpaceKeyToken.PaddingInline.WithIcon::class.simpleName}.${it.name}", + it.value + ) + }) + addAll(OudsSpaceKeyToken.PaddingInline.WithArrow.entries.map { + Token( + "${OudsSpaceKeyToken.PaddingInline.WithArrow::class.simpleName}.${it.name}", + it.value + ) + }) + }.toList() + } ) { @Composable fun Illustration(size: Dp, tokenName: String) = when { @@ -200,12 +232,27 @@ sealed class TokenProperty( data object SpacePaddingStack : TokenProperty( nameRes = R.string.app_tokens_dimension_space_paddingStack_label, - tokens = { OudsSpaceKeyToken.PaddingBlock.entries.map { Token(it.name, it.value) } } + tokens = { + mutableListOf>().apply { + addAll(OudsSpaceKeyToken.PaddingBlock.entries.map { Token(it.name, it.value) }) + addAll(OudsSpaceKeyToken.PaddingBlock.WithIcon.entries.map { + Token( + "${OudsSpaceKeyToken.PaddingBlock.WithIcon::class.simpleName}.${it.name}", + it.value + ) + }) + } + } ) data object SpaceRowGap : TokenProperty( nameRes = R.string.app_tokens_dimension_space_rowGap_label, - tokens = { OudsSpaceKeyToken.RowGap.entries.map { Token(it.name, it.value) } } + tokens = { + mutableListOf>().apply { + addAll(OudsSpaceKeyToken.RowGap.entries.map { Token(it.name, it.value) }) + addAll(OudsSpaceKeyToken.RowGap.WithIcon.entries.map { Token("${OudsSpaceKeyToken.RowGap.WithIcon::class.simpleName}.${it.name}", it.value) }) + } + } ) data object SpaceScaled : TokenProperty( diff --git a/core/src/main/java/com/orange/ouds/core/theme/OudsSpaces.kt b/core/src/main/java/com/orange/ouds/core/theme/OudsSpaces.kt index 26d194d6..1ab85055 100644 --- a/core/src/main/java/com/orange/ouds/core/theme/OudsSpaces.kt +++ b/core/src/main/java/com/orange/ouds/core/theme/OudsSpaces.kt @@ -396,22 +396,34 @@ fun OudsSpaces.fromToken(token: OudsSpaceKeyToken.PaddingInline): Dp { OudsSpaceKeyToken.PaddingInline.Tall -> paddingInline.tall OudsSpaceKeyToken.PaddingInline.Taller -> paddingInline.taller OudsSpaceKeyToken.PaddingInline.Tallest -> paddingInline.tallest - OudsSpaceKeyToken.PaddingInline.WithIconNone -> paddingInline.withIcon.none - OudsSpaceKeyToken.PaddingInline.WithIconShortest -> paddingInline.withIcon.shortest - OudsSpaceKeyToken.PaddingInline.WithIconShorter -> paddingInline.withIcon.shorter - OudsSpaceKeyToken.PaddingInline.WithIconShort -> paddingInline.withIcon.short - OudsSpaceKeyToken.PaddingInline.WithIconMedium -> paddingInline.withIcon.medium - OudsSpaceKeyToken.PaddingInline.WithIconTall -> paddingInline.withIcon.tall - OudsSpaceKeyToken.PaddingInline.WithIconTaller -> paddingInline.withIcon.taller - OudsSpaceKeyToken.PaddingInline.WithIconTallest -> paddingInline.withIcon.tallest - OudsSpaceKeyToken.PaddingInline.WithArrowNone -> paddingInline.withArrow.none - OudsSpaceKeyToken.PaddingInline.WithArrowShortest -> paddingInline.withArrow.shortest - OudsSpaceKeyToken.PaddingInline.WithArrowShorter -> paddingInline.withArrow.shorter - OudsSpaceKeyToken.PaddingInline.WithArrowShort -> paddingInline.withArrow.short - OudsSpaceKeyToken.PaddingInline.WithArrowMedium -> paddingInline.withArrow.medium - OudsSpaceKeyToken.PaddingInline.WithArrowTall -> paddingInline.withArrow.tall - OudsSpaceKeyToken.PaddingInline.WithArrowTaller -> paddingInline.withArrow.taller - OudsSpaceKeyToken.PaddingInline.WithArrowTallest -> paddingInline.withArrow.tallest + } +} + +@Stable +fun OudsSpaces.fromToken(token: OudsSpaceKeyToken.PaddingInline.WithIcon): Dp { + return when (token) { + OudsSpaceKeyToken.PaddingInline.WithIcon.None -> paddingInline.withIcon.none + OudsSpaceKeyToken.PaddingInline.WithIcon.Shortest -> paddingInline.withIcon.shortest + OudsSpaceKeyToken.PaddingInline.WithIcon.Shorter -> paddingInline.withIcon.shorter + OudsSpaceKeyToken.PaddingInline.WithIcon.Short -> paddingInline.withIcon.short + OudsSpaceKeyToken.PaddingInline.WithIcon.Medium -> paddingInline.withIcon.medium + OudsSpaceKeyToken.PaddingInline.WithIcon.Tall -> paddingInline.withIcon.tall + OudsSpaceKeyToken.PaddingInline.WithIcon.Taller -> paddingInline.withIcon.taller + OudsSpaceKeyToken.PaddingInline.WithIcon.Tallest -> paddingInline.withIcon.tallest + } +} + +@Stable +fun OudsSpaces.fromToken(token: OudsSpaceKeyToken.PaddingInline.WithArrow): Dp { + return when (token) { + OudsSpaceKeyToken.PaddingInline.WithArrow.None -> paddingInline.withArrow.none + OudsSpaceKeyToken.PaddingInline.WithArrow.Shortest -> paddingInline.withArrow.shortest + OudsSpaceKeyToken.PaddingInline.WithArrow.Shorter -> paddingInline.withArrow.shorter + OudsSpaceKeyToken.PaddingInline.WithArrow.Short -> paddingInline.withArrow.short + OudsSpaceKeyToken.PaddingInline.WithArrow.Medium -> paddingInline.withArrow.medium + OudsSpaceKeyToken.PaddingInline.WithArrow.Tall -> paddingInline.withArrow.tall + OudsSpaceKeyToken.PaddingInline.WithArrow.Taller -> paddingInline.withArrow.taller + OudsSpaceKeyToken.PaddingInline.WithArrow.Tallest -> paddingInline.withArrow.tallest } } @@ -425,13 +437,19 @@ fun OudsSpaces.fromToken(token: OudsSpaceKeyToken.PaddingBlock): Dp { OudsSpaceKeyToken.PaddingBlock.Tall -> paddingBlock.tall OudsSpaceKeyToken.PaddingBlock.Taller -> paddingBlock.taller OudsSpaceKeyToken.PaddingBlock.Tallest -> paddingBlock.tallest - OudsSpaceKeyToken.PaddingBlock.WithIconNone -> paddingBlock.withIcon.none - OudsSpaceKeyToken.PaddingBlock.WithIconShortest -> paddingBlock.withIcon.shortest - OudsSpaceKeyToken.PaddingBlock.WithIconShorter -> paddingBlock.withIcon.shorter - OudsSpaceKeyToken.PaddingBlock.WithIconShort -> paddingBlock.withIcon.short - OudsSpaceKeyToken.PaddingBlock.WithIconMedium -> paddingBlock.withIcon.medium - OudsSpaceKeyToken.PaddingBlock.WithIconTall -> paddingBlock.withIcon.tall - OudsSpaceKeyToken.PaddingBlock.WithIconTaller -> paddingBlock.withIcon.taller + } +} + +@Stable +fun OudsSpaces.fromToken(token: OudsSpaceKeyToken.PaddingBlock.WithIcon): Dp { + return when (token) { + OudsSpaceKeyToken.PaddingBlock.WithIcon.None -> paddingBlock.withIcon.none + OudsSpaceKeyToken.PaddingBlock.WithIcon.Shortest -> paddingBlock.withIcon.shortest + OudsSpaceKeyToken.PaddingBlock.WithIcon.Shorter -> paddingBlock.withIcon.shorter + OudsSpaceKeyToken.PaddingBlock.WithIcon.Short -> paddingBlock.withIcon.short + OudsSpaceKeyToken.PaddingBlock.WithIcon.Medium -> paddingBlock.withIcon.medium + OudsSpaceKeyToken.PaddingBlock.WithIcon.Tall -> paddingBlock.withIcon.tall + OudsSpaceKeyToken.PaddingBlock.WithIcon.Taller -> paddingBlock.withIcon.taller } } @@ -460,18 +478,30 @@ fun OudsSpaces.fromToken(token: OudsSpaceKeyToken.ColumnGap): Dp { OudsSpaceKeyToken.ColumnGap.Medium -> columnGap.medium OudsSpaceKeyToken.ColumnGap.Tall -> columnGap.tall OudsSpaceKeyToken.ColumnGap.Taller -> columnGap.taller - OudsSpaceKeyToken.ColumnGap.WithIconNone -> columnGap.withIcon.none - OudsSpaceKeyToken.ColumnGap.WithIconShortest -> columnGap.withIcon.shortest - OudsSpaceKeyToken.ColumnGap.WithIconShorter -> columnGap.withIcon.shorter - OudsSpaceKeyToken.ColumnGap.WithIconShort -> columnGap.withIcon.short - OudsSpaceKeyToken.ColumnGap.WithIconMedium -> columnGap.withIcon.medium - OudsSpaceKeyToken.ColumnGap.WithIconTall -> columnGap.withIcon.tall - OudsSpaceKeyToken.ColumnGap.WithArrowNone -> columnGap.withArrow.none - OudsSpaceKeyToken.ColumnGap.WithArrowShortest -> columnGap.withArrow.shortest - OudsSpaceKeyToken.ColumnGap.WithArrowShorter -> columnGap.withArrow.shorter - OudsSpaceKeyToken.ColumnGap.WithArrowShort -> columnGap.withArrow.short - OudsSpaceKeyToken.ColumnGap.WithArrowMedium -> columnGap.withArrow.medium - OudsSpaceKeyToken.ColumnGap.WithArrowTall -> columnGap.withArrow.tall + } +} + +@Stable +fun OudsSpaces.fromToken(token: OudsSpaceKeyToken.ColumnGap.WithIcon): Dp { + return when (token) { + OudsSpaceKeyToken.ColumnGap.WithIcon.None -> columnGap.withIcon.none + OudsSpaceKeyToken.ColumnGap.WithIcon.Shortest -> columnGap.withIcon.shortest + OudsSpaceKeyToken.ColumnGap.WithIcon.Shorter -> columnGap.withIcon.shorter + OudsSpaceKeyToken.ColumnGap.WithIcon.Short -> columnGap.withIcon.short + OudsSpaceKeyToken.ColumnGap.WithIcon.Medium -> columnGap.withIcon.medium + OudsSpaceKeyToken.ColumnGap.WithIcon.Tall -> columnGap.withIcon.tall + } +} + +@Stable +fun OudsSpaces.fromToken(token: OudsSpaceKeyToken.ColumnGap.WithArrow): Dp { + return when (token) { + OudsSpaceKeyToken.ColumnGap.WithArrow.None -> columnGap.withArrow.none + OudsSpaceKeyToken.ColumnGap.WithArrow.Shortest -> columnGap.withArrow.shortest + OudsSpaceKeyToken.ColumnGap.WithArrow.Shorter -> columnGap.withArrow.shorter + OudsSpaceKeyToken.ColumnGap.WithArrow.Short -> columnGap.withArrow.short + OudsSpaceKeyToken.ColumnGap.WithArrow.Medium -> columnGap.withArrow.medium + OudsSpaceKeyToken.ColumnGap.WithArrow.Tall -> columnGap.withArrow.tall } } @@ -484,12 +514,18 @@ fun OudsSpaces.fromToken(token: OudsSpaceKeyToken.RowGap): Dp { OudsSpaceKeyToken.RowGap.Short -> rowGap.short OudsSpaceKeyToken.RowGap.Medium -> rowGap.medium OudsSpaceKeyToken.RowGap.Tall -> rowGap.tall - OudsSpaceKeyToken.RowGap.WithIconNone -> rowGap.withIcon.none - OudsSpaceKeyToken.RowGap.WithIconShortest -> rowGap.withIcon.shortest - OudsSpaceKeyToken.RowGap.WithIconShorter -> rowGap.withIcon.shorter - OudsSpaceKeyToken.RowGap.WithIconShort -> rowGap.withIcon.short - OudsSpaceKeyToken.RowGap.WithIconMedium -> rowGap.withIcon.medium - OudsSpaceKeyToken.RowGap.WithIconTall -> rowGap.withIcon.tall + } +} + +@Stable +fun OudsSpaces.fromToken(token: OudsSpaceKeyToken.RowGap.WithIcon): Dp { + return when (token) { + OudsSpaceKeyToken.RowGap.WithIcon.None -> rowGap.withIcon.none + OudsSpaceKeyToken.RowGap.WithIcon.Shortest -> rowGap.withIcon.shortest + OudsSpaceKeyToken.RowGap.WithIcon.Shorter -> rowGap.withIcon.shorter + OudsSpaceKeyToken.RowGap.WithIcon.Short -> rowGap.withIcon.short + OudsSpaceKeyToken.RowGap.WithIcon.Medium -> rowGap.withIcon.medium + OudsSpaceKeyToken.RowGap.WithIcon.Tall -> rowGap.withIcon.tall } } @@ -501,6 +537,23 @@ val OudsSpaceKeyToken.ColumnGap.value: Dp @Composable get() = OudsTheme.spaces.fromToken(this) +/** + * Converts an OUDS column gap with icon space token to the local column gap with icon space value provided by the theme. + */ +val OudsSpaceKeyToken.ColumnGap.WithIcon.value: Dp + @ReadOnlyComposable + @Composable + get() = OudsTheme.spaces.fromToken(this) + +/** + * Converts an OUDS column gap with arrow space token to the local column gap with arrow space value provided by the theme. + */ +val OudsSpaceKeyToken.ColumnGap.WithArrow.value: Dp + @ReadOnlyComposable + @Composable + get() = OudsTheme.spaces.fromToken(this) + + /** * Converts an OUDS fixed space token to the local space value provided by the theme. */ @@ -517,6 +570,15 @@ val OudsSpaceKeyToken.PaddingBlock.value: Dp @Composable get() = OudsTheme.spaces.fromToken(this) +/** + * Converts an OUDS block with icon padding token to the local block with icon padding value provided by the theme. + */ +val OudsSpaceKeyToken.PaddingBlock.WithIcon.value: Dp + @ReadOnlyComposable + @Composable + get() = OudsTheme.spaces.fromToken(this) + + /** * Converts an OUDS inline padding token to the local inline padding value provided by the theme. */ @@ -525,6 +587,22 @@ val OudsSpaceKeyToken.PaddingInline.value: Dp @Composable get() = OudsTheme.spaces.fromToken(this) +/** + * Converts an OUDS inline padding with icon token to the local inline padding with icon value provided by the theme. + */ +val OudsSpaceKeyToken.PaddingInline.WithIcon.value: Dp + @ReadOnlyComposable + @Composable + get() = OudsTheme.spaces.fromToken(this) + +/** + * Converts an OUDS inline padding with arrow token to the local inline padding with arrow value provided by the theme. + */ +val OudsSpaceKeyToken.PaddingInline.WithArrow.value: Dp + @ReadOnlyComposable + @Composable + get() = OudsTheme.spaces.fromToken(this) + /** * Converts an OUDS inset token to the local inset value provided by the theme. */ @@ -541,6 +619,14 @@ val OudsSpaceKeyToken.RowGap.value: Dp @Composable get() = OudsTheme.spaces.fromToken(this) +/** + * Converts an OUDS row gap with icon space token to the local row gap with icon space value provided by the theme. + */ +val OudsSpaceKeyToken.RowGap.WithIcon.value: Dp + @ReadOnlyComposable + @Composable + get() = OudsTheme.spaces.fromToken(this) + /** * Converts an OUDS scaled space token to the local space value provided by the theme depending on the window size. */ diff --git a/theme-contract/src/main/java/com/orange/ouds/theme/tokens/OudsSpaceKeyToken.kt b/theme-contract/src/main/java/com/orange/ouds/theme/tokens/OudsSpaceKeyToken.kt index b71ccaa4..5ec00f4a 100644 --- a/theme-contract/src/main/java/com/orange/ouds/theme/tokens/OudsSpaceKeyToken.kt +++ b/theme-contract/src/main/java/com/orange/ouds/theme/tokens/OudsSpaceKeyToken.kt @@ -48,23 +48,29 @@ object OudsSpaceKeyToken { Medium, Tall, Taller, - Tallest, - WithIconNone, - WithIconShortest, - WithIconShorter, - WithIconShort, - WithIconMedium, - WithIconTall, - WithIconTaller, - WithIconTallest, - WithArrowNone, - WithArrowShortest, - WithArrowShorter, - WithArrowShort, - WithArrowMedium, - WithArrowTall, - WithArrowTaller, - WithArrowTallest, + Tallest; + + enum class WithIcon { + None, + Shortest, + Shorter, + Short, + Medium, + Tall, + Taller, + Tallest, + } + + enum class WithArrow { + None, + Shortest, + Shorter, + Short, + Medium, + Tall, + Taller, + Tallest, + } } enum class PaddingBlock { @@ -74,14 +80,17 @@ object OudsSpaceKeyToken { Medium, Tall, Taller, - Tallest, - WithIconNone, - WithIconShortest, - WithIconShorter, - WithIconShort, - WithIconMedium, - WithIconTall, - WithIconTaller, + Tallest; + + enum class WithIcon { + None, + Shortest, + Shorter, + Short, + Medium, + Tall, + Taller, + } } enum class Inset { @@ -103,19 +112,25 @@ object OudsSpaceKeyToken { Short, Medium, Tall, - Taller, - WithIconNone, - WithIconShortest, - WithIconShorter, - WithIconShort, - WithIconMedium, - WithIconTall, - WithArrowNone, - WithArrowShortest, - WithArrowShorter, - WithArrowShort, - WithArrowMedium, - WithArrowTall, + Taller; + + enum class WithIcon { + None, + Shortest, + Shorter, + Short, + Medium, + Tall, + } + + enum class WithArrow { + None, + Shortest, + Shorter, + Short, + Medium, + Tall, + } } enum class RowGap { @@ -124,12 +139,15 @@ object OudsSpaceKeyToken { Shorter, Short, Medium, - Tall, - WithIconNone, - WithIconShortest, - WithIconShorter, - WithIconShort, - WithIconMedium, - WithIconTall, + Tall; + + enum class WithIcon { + None, + Shortest, + Shorter, + Short, + Medium, + Tall, + } } } \ No newline at end of file From 88543449ddb1cc66d193e74c93a8e17ba86d69c4 Mon Sep 17 00:00:00 2001 From: Pauline Auvray Date: Mon, 4 Nov 2024 15:19:31 +0100 Subject: [PATCH 22/32] Review: Add ic_chevron_down to NOTICE.txt --- NOTICE.txt | 1 + 1 file changed, 1 insertion(+) diff --git a/NOTICE.txt b/NOTICE.txt index 6b7545d7..32428401 100644 --- a/NOTICE.txt +++ b/NOTICE.txt @@ -9,6 +9,7 @@ and reproducing the content of the NOTICE and DOCUMENTATION files. Any use or displaying shall constitute an infringement under intellectual property laws of France and international conventions. app/src/main/res/drawable/ic_border.xml +app/src/main/res/drawable/ic_chevron_down.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 From 6c73395e575dcc059d854f20e6dad4d5509e16b1 Mon Sep 17 00:00:00 2001 From: Pauline Auvray Date: Mon, 4 Nov 2024 15:20:48 +0100 Subject: [PATCH 23/32] Review: Add missing copyrights --- app/src/main/res/drawable/ic_chevron_down.xml | 18 ++++++++++++++--- .../ic_design_token_figma_no_padding.xml | 20 +++++++++++++++---- 2 files changed, 31 insertions(+), 7 deletions(-) diff --git a/app/src/main/res/drawable/ic_chevron_down.xml b/app/src/main/res/drawable/ic_chevron_down.xml index 1bd51497..0c708ab5 100644 --- a/app/src/main/res/drawable/ic_chevron_down.xml +++ b/app/src/main/res/drawable/ic_chevron_down.xml @@ -1,9 +1,21 @@ + + - + diff --git a/app/src/main/res/drawable/ic_design_token_figma_no_padding.xml b/app/src/main/res/drawable/ic_design_token_figma_no_padding.xml index e1a92b39..732bc7d8 100644 --- a/app/src/main/res/drawable/ic_design_token_figma_no_padding.xml +++ b/app/src/main/res/drawable/ic_design_token_figma_no_padding.xml @@ -1,10 +1,22 @@ + + - + From 2996c7a58f26001c45e966647efec2683070c5e2 Mon Sep 17 00:00:00 2001 From: Pauline Auvray Date: Mon, 4 Nov 2024 15:23:43 +0100 Subject: [PATCH 24/32] Review: Update preview --- .../java/com/orange/ouds/app/ui/tokens/TokensScreen.kt | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) 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 index e7d312c0..73387628 100644 --- 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 @@ -60,5 +60,13 @@ private fun TokensScreen(tokenCategories: List, onTokenCategoryCl @UiModePreviews.Default @Composable private fun PreviewTokensScreen() = OudsPreview { - TokensScreen(tokenCategories = listOf(TokenCategory.Elevation, TokenCategory.Opacity)) {} + TokensScreen( + tokenCategories = listOf( + TokenCategory.Border, + TokenCategory.Dimension, + TokenCategory.Elevation, + TokenCategory.Opacity, + TokenCategory.Typography + ) + ) {} } From 96441d4e8682d2d7402c8476741e4405143ee75f Mon Sep 17 00:00:00 2001 From: Pauline Auvray Date: Mon, 4 Nov 2024 15:36:50 +0100 Subject: [PATCH 25/32] Review: Compute isSubcategory property at runtime --- .../main/java/com/orange/ouds/app/ui/tokens/TokenCategory.kt | 5 ++--- .../main/java/com/orange/ouds/app/ui/tokens/TokensScreen.kt | 2 +- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/app/src/main/java/com/orange/ouds/app/ui/tokens/TokenCategory.kt b/app/src/main/java/com/orange/ouds/app/ui/tokens/TokenCategory.kt index 98f3bb3d..3c022921 100644 --- a/app/src/main/java/com/orange/ouds/app/ui/tokens/TokenCategory.kt +++ b/app/src/main/java/com/orange/ouds/app/ui/tokens/TokenCategory.kt @@ -26,7 +26,6 @@ sealed class TokenCategory( @StringRes val descriptionRes: Int, val properties: List = emptyList(), val subcategories: List = emptyList(), - val subcategory: Boolean = false ) { companion object { @@ -34,6 +33,8 @@ sealed class TokenCategory( } val id: Long = TokenCategory::class.sealedSubclasses.indexOf(this::class).toLong() + val isSubcategory: Boolean + get() = tokenCategories.any { it.subcategories.contains(this) } data object Border : TokenCategory( R.string.app_tokens_border_label, @@ -56,7 +57,6 @@ sealed class TokenCategory( TokenProperty.SpaceScaled, TokenProperty.SpaceFixed, TokenProperty.SpacePaddingInline, TokenProperty.SpacePaddingStack, TokenProperty.SpacePaddingInset, TokenProperty.SpaceColumnGap, TokenProperty.SpaceRowGap ), - subcategory = true ) data object Size : TokenCategory( @@ -64,7 +64,6 @@ sealed class TokenCategory( R.drawable.ic_dimension, R.string.app_tokens_dimension_size_description_text, listOf(TokenProperty.SizeIconDecorative, TokenProperty.SizeIconWithLabel), - subcategory = true ) } 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 index 73387628..e6375c74 100644 --- 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 @@ -31,7 +31,7 @@ import com.orange.ouds.theme.tokens.OudsSpaceKeyToken @Composable fun TokensScreen(onTokenCategoryClick: (Long) -> Unit) { TokensScreen( - tokenCategories = tokenCategories.filter { !it.subcategory }, + tokenCategories = tokenCategories.filter { !it.isSubcategory }, onTokenCategoryClick = onTokenCategoryClick ) } From fdee1dabd0bc7fcafa73e625d6f6c5c6b4e326e1 Mon Sep 17 00:00:00 2001 From: Pauline Auvray Date: Mon, 4 Nov 2024 15:57:22 +0100 Subject: [PATCH 26/32] Review: Replace SizeIconWithLabel by SizeIconWithText --- .../main/java/com/orange/ouds/app/ui/tokens/TokenCategory.kt | 2 +- .../orange/ouds/app/ui/tokens/TokenCategoryDetailScreen.kt | 4 ++-- .../main/java/com/orange/ouds/app/ui/tokens/TokenProperty.kt | 4 ++-- app/src/main/res/values/strings.xml | 2 +- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/app/src/main/java/com/orange/ouds/app/ui/tokens/TokenCategory.kt b/app/src/main/java/com/orange/ouds/app/ui/tokens/TokenCategory.kt index 3c022921..843a9b26 100644 --- a/app/src/main/java/com/orange/ouds/app/ui/tokens/TokenCategory.kt +++ b/app/src/main/java/com/orange/ouds/app/ui/tokens/TokenCategory.kt @@ -63,7 +63,7 @@ sealed class TokenCategory( R.string.app_tokens_dimension_size_label, R.drawable.ic_dimension, R.string.app_tokens_dimension_size_description_text, - listOf(TokenProperty.SizeIconDecorative, TokenProperty.SizeIconWithLabel), + listOf(TokenProperty.SizeIconDecorative, TokenProperty.SizeIconWithText), ) } 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 index e825582b..5a2bc4bd 100644 --- 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 @@ -92,7 +92,7 @@ fun TokenCategoryDetailScreen(tokenCategory: TokenCategory, onSubcategoryClick: } tokenProperty.tokens().forEach { token -> - if (tokenProperty == TokenProperty.SizeIconWithLabel) { + if (tokenProperty == TokenProperty.SizeIconWithText) { Column( modifier = Modifier .fillMaxWidth() @@ -160,7 +160,7 @@ private fun TokenIllustration(tokenProperty: TokenProperty, token: Token) = is TokenProperty.Opacity -> tokenProperty.Illustration(opacity = token.value as Float) is TokenProperty.Elevation -> tokenProperty.Illustration(elevation = token.value as Dp) is TokenProperty.SizeIconDecorative -> tokenProperty.Illustration(size = token.value as Dp) - is TokenProperty.SizeIconWithLabel -> tokenProperty.Illustration(size = token.value as Dp, token.name) + is TokenProperty.SizeIconWithText -> tokenProperty.Illustration(size = token.value as Dp, token.name) is TokenProperty.SpaceColumnGap, TokenProperty.SpaceFixed, TokenProperty.SpaceScaled -> SpaceIllustrationBox( size = token.value as Dp, contentAlignment = Alignment.Center 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 index 22387ba0..7eff7a32 100644 --- 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 @@ -116,8 +116,8 @@ sealed class TokenProperty( } } - data object SizeIconWithLabel : TokenProperty( - nameRes = R.string.app_tokens_dimension_size_iconWithLabel_label, + data object SizeIconWithText : TokenProperty( + nameRes = R.string.app_tokens_dimension_size_iconWithText_label, tokens = { OudsSizeKeyToken.IconWithText.entries.map { Token(it.name, it.value) } } ) { @Composable diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml index 615753fc..fd81b121 100644 --- a/app/src/main/res/values/strings.xml +++ b/app/src/main/res/values/strings.xml @@ -60,7 +60,7 @@ Size Size refers to the specific measurements used to define the dimensions of UI elements within the design system. Icon decorative - Icon with label + Icon with text %1$s (%2$s) From efb08051ae97f8f656647942ace99c4c4016386b Mon Sep 17 00:00:00 2001 From: Pauline Auvray Date: Mon, 4 Nov 2024 16:00:44 +0100 Subject: [PATCH 27/32] Review: Fix body and label text styles --- .../main/java/com/orange/ouds/app/ui/tokens/TokenProperty.kt | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) 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 index 7eff7a32..654c2189 100644 --- 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 @@ -27,6 +27,7 @@ import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.width import androidx.compose.material3.Icon +import androidx.compose.material3.LocalTextStyle import androidx.compose.material3.Surface import androidx.compose.material3.Text import androidx.compose.runtime.Composable @@ -139,7 +140,7 @@ sealed class TokenProperty( text = label, maxLines = 1, overflow = TextOverflow.Ellipsis, - style = OudsTypographyKeyToken.entries.firstOrNull { it.name == label }?.value.orElse { OudsTypographyKeyToken.BodyStrongLarge.value } + style = OudsTypographyKeyToken.entries.firstOrNull { it.name.replace("Strong", "") == label }?.value.orElse { LocalTextStyle.current } ) } } From 585fe3c42f43594074a4c05b430ad134a6e28950 Mon Sep 17 00:00:00 2001 From: Pauline Auvray Date: Mon, 4 Nov 2024 16:01:51 +0100 Subject: [PATCH 28/32] Review: Simplify code --- .../orange/ouds/app/ui/tokens/TokenPropertyIllustration.kt | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) 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 index ffe2f491..99373ac3 100644 --- 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 @@ -53,9 +53,8 @@ fun IllustrationBox( .size(defaultIllustrationSize) .background(color = backgroundColor), contentAlignment = contentAlignment, - ) { - content() - } + content = content + ) } @Composable From 415998b33eae6a76216b13ce5a83dc87ab5625b2 Mon Sep 17 00:00:00 2001 From: Pauline Auvray Date: Mon, 4 Nov 2024 16:12:47 +0100 Subject: [PATCH 29/32] Review: Manage token property illustrations in the same file --- .../ui/tokens/TokenCategoryDetailScreen.kt | 12 +- .../ouds/app/ui/tokens/TokenProperty.kt | 129 +---------------- .../ui/tokens/TokenPropertyIllustration.kt | 137 +++++++++++++++--- 3 files changed, 132 insertions(+), 146 deletions(-) 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 index 5a2bc4bd..80170bc6 100644 --- 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 @@ -157,16 +157,16 @@ private fun TokenIllustration(tokenProperty: TokenProperty, token: Token) = is TokenProperty.BorderWidth -> BorderIllustrationBox(width = token.value as Dp) is TokenProperty.BorderRadius -> BorderIllustrationBox(shape = RoundedCornerShape(token.value as Dp)) is TokenProperty.BorderStyle -> BorderIllustrationBox(style = token.value as OudsBorderStyle) - is TokenProperty.Opacity -> tokenProperty.Illustration(opacity = token.value as Float) - is TokenProperty.Elevation -> tokenProperty.Illustration(elevation = token.value as Dp) - is TokenProperty.SizeIconDecorative -> tokenProperty.Illustration(size = token.value as Dp) - is TokenProperty.SizeIconWithText -> tokenProperty.Illustration(size = token.value as Dp, token.name) + is TokenProperty.Opacity -> OpacityIllustrationBox(opacity = token.value as Float) + is TokenProperty.Elevation -> ElevationIllustrationSurface(elevation = token.value as Dp) + is TokenProperty.SizeIconDecorative -> SizeIconDecorativeIllustrationBox(size = token.value as Dp) + is TokenProperty.SizeIconWithText -> SizeIconWithTextIllustrationRow(size = token.value as Dp, token.name) is TokenProperty.SpaceColumnGap, TokenProperty.SpaceFixed, TokenProperty.SpaceScaled -> SpaceIllustrationBox( size = token.value as Dp, contentAlignment = Alignment.Center ) - is TokenProperty.SpacePaddingInline -> tokenProperty.Illustration(size = token.value as Dp, token.name) - is TokenProperty.SpacePaddingInset -> tokenProperty.Illustration(size = token.value as Dp) + is TokenProperty.SpacePaddingInline -> SpacePaddingInlineIllustration(size = token.value as Dp, token.name) + is TokenProperty.SpacePaddingInset -> SpacePaddingInsetIllustrationBox(size = token.value as Dp) is TokenProperty.SpacePaddingStack -> SpaceIllustrationBox(size = token.value as Dp, orientation = SpaceOrientation.Vertical) is TokenProperty.SpaceRowGap -> SpaceIllustrationBox(size = token.value as Dp, orientation = SpaceOrientation.Vertical, contentAlignment = Alignment.Center) is TokenProperty.Typography -> Unit 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 index 654c2189..99d0068f 100644 --- 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 @@ -13,41 +13,15 @@ package com.orange.ouds.app.ui.tokens import androidx.annotation.StringRes -import androidx.compose.foundation.Image -import androidx.compose.foundation.background -import androidx.compose.foundation.border -import androidx.compose.foundation.isSystemInDarkTheme -import androidx.compose.foundation.layout.Arrangement -import androidx.compose.foundation.layout.Box -import androidx.compose.foundation.layout.Row -import androidx.compose.foundation.layout.fillMaxHeight -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.width -import androidx.compose.material3.Icon -import androidx.compose.material3.LocalTextStyle -import androidx.compose.material3.Surface -import androidx.compose.material3.Text import androidx.compose.runtime.Composable -import androidx.compose.ui.Alignment -import androidx.compose.ui.Modifier -import androidx.compose.ui.graphics.Color -import androidx.compose.ui.res.painterResource -import androidx.compose.ui.text.style.TextOverflow -import androidx.compose.ui.unit.Dp -import androidx.compose.ui.unit.dp import com.orange.ouds.app.R import com.orange.ouds.core.theme.value -import com.orange.ouds.foundation.extensions.orElse import com.orange.ouds.theme.tokens.OudsBorderKeyToken import com.orange.ouds.theme.tokens.OudsElevationKeyToken import com.orange.ouds.theme.tokens.OudsOpacityKeyToken import com.orange.ouds.theme.tokens.OudsSizeKeyToken import com.orange.ouds.theme.tokens.OudsSpaceKeyToken import com.orange.ouds.theme.tokens.OudsTypographyKeyToken -import com.orange.ouds.theme.tokens.semantic.OudsColorKeyToken sealed class TokenProperty( @StringRes val nameRes: Int?, @@ -71,80 +45,22 @@ sealed class TokenProperty( data object Elevation : TokenProperty( nameRes = null, tokens = { OudsElevationKeyToken.entries.map { Token(it.name, it.value) } } - ) { - @Composable - fun Illustration(elevation: Dp) { - Surface(shadowElevation = elevation) { - IllustrationBox(backgroundColor = OudsColorKeyToken.Surface.value) //TODO use BgDefaultSecondary token when available - } - } - } + ) data object Opacity : TokenProperty( nameRes = null, tokens = { OudsOpacityKeyToken.entries.map { Token(it.name, it.value) } } - ) { - @Composable - fun Illustration(opacity: Float) { - val squareColor = if (isSystemInDarkTheme()) Color.White else Color.Black - Box { - Image(painter = painterResource(id = R.drawable.il_opacity_union), contentDescription = null) - Box( - modifier = Modifier - .padding(top = OudsSpaceKeyToken.Fixed.Medium.value, start = OudsSpaceKeyToken.Fixed.Medium.value) - .size(48.dp) - .background(color = squareColor.copy(alpha = opacity)) - .border(width = 1.dp, color = squareColor) - ) - } - } - } + ) data object SizeIconDecorative : TokenProperty( nameRes = R.string.app_tokens_dimension_size_iconDecorative_label, tokens = { OudsSizeKeyToken.IconDecorative.entries.map { Token(it.name, it.value) } } - ) { - @Composable - fun Illustration(size: Dp) { - IllustrationBox(modifier = Modifier.size(80.dp), contentAlignment = Alignment.Center) { - Icon( - modifier = Modifier.size(size), - painter = painterResource(R.drawable.ic_design_token_figma), - tint = Color(0xFF26B2FF), //TODO use AlwaysInfo token when available - contentDescription = null - ) - } - } - } + ) data object SizeIconWithText : TokenProperty( nameRes = R.string.app_tokens_dimension_size_iconWithText_label, tokens = { OudsSizeKeyToken.IconWithText.entries.map { Token(it.name, it.value) } } - ) { - @Composable - fun Illustration(size: Dp, tokenName: String) { - val label = tokenName.substringBefore("Size") - Row( - modifier = Modifier.fillMaxWidth(), - horizontalArrangement = Arrangement.spacedBy(OudsSpaceKeyToken.Fixed.Shorter.value), - verticalAlignment = Alignment.CenterVertically - ) { - Icon( - modifier = Modifier.size(size), - painter = painterResource(R.drawable.ic_design_token_figma), - tint = Color(0xFF26B2FF), //TODO use AlwaysInfo token when available - contentDescription = null - ) - Text( - modifier = Modifier.weight(1f), - text = label, - maxLines = 1, - overflow = TextOverflow.Ellipsis, - style = OudsTypographyKeyToken.entries.firstOrNull { it.name.replace("Strong", "") == label }?.value.orElse { LocalTextStyle.current } - ) - } - } - } + ) data object SpaceColumnGap : TokenProperty( nameRes = R.string.app_tokens_dimension_space_columnGap_label, @@ -191,45 +107,12 @@ sealed class TokenProperty( }) }.toList() } - ) { - @Composable - fun Illustration(size: Dp, tokenName: String) = when { - tokenName.contains("WithIcon") -> SpacePaddingInlineWithImageIllustrationRow( - spaceSize = size, - imagePainter = painterResource(R.drawable.ic_design_token_figma_no_padding), - imageModifier = Modifier.padding(horizontal = 1.dp) - ) - tokenName.contains("WithArrow") -> SpacePaddingInlineWithImageIllustrationRow( - spaceSize = size, - imagePainter = painterResource(R.drawable.ic_chevron_down) - ) - else -> SpaceIllustrationBox(size = size) - } - } + ) data object SpacePaddingInset : TokenProperty( nameRes = R.string.app_tokens_dimension_space_paddingInset_label, tokens = { OudsSpaceKeyToken.Inset.entries.map { Token(it.name, it.value) } } - ) { - - @Composable - fun Illustration(size: Dp) { - IllustrationBox { - Box( - modifier = Modifier - .fillMaxWidth() - .height(height = size) - .background(Color(0xFF26B2FF)) //TODO use AlwaysInfo token when available - ) - Box( - modifier = Modifier - .fillMaxHeight() - .width(width = size) - .background(Color(0xFF26B2FF)) //TODO use AlwaysInfo token when available - ) - } - } - } + ) data object SpacePaddingStack : TokenProperty( nameRes = R.string.app_tokens_dimension_space_paddingStack_label, 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 index 99373ac3..01ae2693 100644 --- 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 @@ -15,14 +15,21 @@ package com.orange.ouds.app.ui.tokens import androidx.compose.foundation.Image import androidx.compose.foundation.background import androidx.compose.foundation.border +import androidx.compose.foundation.isSystemInDarkTheme +import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.BoxScope import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.fillMaxHeight 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.width +import androidx.compose.material3.Icon +import androidx.compose.material3.LocalTextStyle +import androidx.compose.material3.Surface +import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier @@ -31,12 +38,18 @@ import androidx.compose.ui.graphics.RectangleShape import androidx.compose.ui.graphics.Shape import androidx.compose.ui.graphics.painter.Painter import androidx.compose.ui.layout.ContentScale +import androidx.compose.ui.res.painterResource +import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp +import com.orange.ouds.app.R import com.orange.ouds.core.theme.value +import com.orange.ouds.foundation.extensions.orElse import com.orange.ouds.theme.OudsBorderStyle import com.orange.ouds.theme.dashedBorder import com.orange.ouds.theme.dottedBorder +import com.orange.ouds.theme.tokens.OudsSpaceKeyToken +import com.orange.ouds.theme.tokens.OudsTypographyKeyToken import com.orange.ouds.theme.tokens.semantic.OudsColorKeyToken private val defaultIllustrationSize = 64.dp @@ -74,29 +87,75 @@ fun BorderIllustrationBox( } @Composable -fun SpaceIllustrationBox( - size: Dp, - orientation: SpaceOrientation = SpaceOrientation.Horizontal, - contentAlignment: Alignment = Alignment.TopStart -) { - val dimensionBoxModifier = when (orientation) { - SpaceOrientation.Horizontal -> Modifier - .fillMaxHeight() - .width(width = size) - - SpaceOrientation.Vertical -> Modifier - .fillMaxWidth() - .height(height = size) +fun ElevationIllustrationSurface(elevation: Dp) { + Surface(shadowElevation = elevation) { + IllustrationBox(backgroundColor = OudsColorKeyToken.Surface.value) //TODO use BgDefaultSecondary token when available } - IllustrationBox(contentAlignment = contentAlignment) { +} + +@Composable +fun OpacityIllustrationBox(opacity: Float) { + val squareColor = if (isSystemInDarkTheme()) Color.White else Color.Black + Box { + Image(painter = painterResource(id = R.drawable.il_opacity_union), contentDescription = null) Box( - modifier = dimensionBoxModifier.background(Color(0xFF26B2FF)) //TODO use AlwaysInfo token when available + modifier = Modifier + .padding(top = OudsSpaceKeyToken.Fixed.Medium.value, start = OudsSpaceKeyToken.Fixed.Medium.value) + .size(48.dp) + .background(color = squareColor.copy(alpha = opacity)) + .border(width = 1.dp, color = squareColor) ) } } -enum class SpaceOrientation { - Horizontal, Vertical +@Composable +fun SizeIconDecorativeIllustrationBox(size: Dp) { + IllustrationBox(modifier = Modifier.size(80.dp), contentAlignment = Alignment.Center) { + Icon( + modifier = Modifier.size(size), + painter = painterResource(R.drawable.ic_design_token_figma), + tint = Color(0xFF26B2FF), //TODO use AlwaysInfo token when available + contentDescription = null + ) + } +} + +@Composable +fun SizeIconWithTextIllustrationRow(size: Dp, tokenName: String) { + val label = tokenName.substringBefore("Size") + Row( + modifier = Modifier.fillMaxWidth(), + horizontalArrangement = Arrangement.spacedBy(OudsSpaceKeyToken.Fixed.Shorter.value), + verticalAlignment = Alignment.CenterVertically + ) { + Icon( + modifier = Modifier.size(size), + painter = painterResource(R.drawable.ic_design_token_figma), + tint = Color(0xFF26B2FF), //TODO use AlwaysInfo token when available + contentDescription = null + ) + Text( + modifier = Modifier.weight(1f), + text = label, + maxLines = 1, + overflow = TextOverflow.Ellipsis, + style = OudsTypographyKeyToken.entries.firstOrNull { it.name.replace("Strong", "") == label }?.value.orElse { LocalTextStyle.current } + ) + } +} + +@Composable +fun SpacePaddingInlineIllustration(size: Dp, tokenName: String) = when { + tokenName.contains("WithIcon") -> SpacePaddingInlineWithImageIllustrationRow( + spaceSize = size, + imagePainter = painterResource(R.drawable.ic_design_token_figma_no_padding), + imageModifier = Modifier.padding(horizontal = 1.dp) + ) + tokenName.contains("WithArrow") -> SpacePaddingInlineWithImageIllustrationRow( + spaceSize = size, + imagePainter = painterResource(R.drawable.ic_chevron_down) + ) + else -> SpaceIllustrationBox(size = size) } @Composable @@ -125,4 +184,48 @@ fun SpacePaddingInlineWithImageIllustrationRow( contentScale = ContentScale.None ) } +} + +@Composable +fun SpacePaddingInsetIllustrationBox(size: Dp) { + IllustrationBox { + Box( + modifier = Modifier + .fillMaxWidth() + .height(height = size) + .background(Color(0xFF26B2FF)) //TODO use AlwaysInfo token when available + ) + Box( + modifier = Modifier + .fillMaxHeight() + .width(width = size) + .background(Color(0xFF26B2FF)) //TODO use AlwaysInfo token when available + ) + } +} + +@Composable +fun SpaceIllustrationBox( + size: Dp, + orientation: SpaceOrientation = SpaceOrientation.Horizontal, + contentAlignment: Alignment = Alignment.TopStart +) { + val dimensionBoxModifier = when (orientation) { + SpaceOrientation.Horizontal -> Modifier + .fillMaxHeight() + .width(width = size) + + SpaceOrientation.Vertical -> Modifier + .fillMaxWidth() + .height(height = size) + } + IllustrationBox(contentAlignment = contentAlignment) { + Box( + modifier = dimensionBoxModifier.background(Color(0xFF26B2FF)) //TODO use AlwaysInfo token when available + ) + } +} + +enum class SpaceOrientation { + Horizontal, Vertical } \ No newline at end of file From e0e1bc6b736f2a78235cc0261a2838227210b3bc Mon Sep 17 00:00:00 2001 From: Pauline Auvray Date: Mon, 4 Nov 2024 17:20:09 +0100 Subject: [PATCH 30/32] Review: Split tokens with icon/arrow and add corresponding illustrations --- .../ouds/app/ui/tokens/TokenCategory.kt | 15 +++- .../ui/tokens/TokenCategoryDetailScreen.kt | 7 +- .../ouds/app/ui/tokens/TokenProperty.kt | 85 ++++++++----------- .../ui/tokens/TokenPropertyIllustration.kt | 50 +++++++++-- app/src/main/res/values/strings.xml | 6 ++ 5 files changed, 104 insertions(+), 59 deletions(-) diff --git a/app/src/main/java/com/orange/ouds/app/ui/tokens/TokenCategory.kt b/app/src/main/java/com/orange/ouds/app/ui/tokens/TokenCategory.kt index 843a9b26..a7c1f900 100644 --- a/app/src/main/java/com/orange/ouds/app/ui/tokens/TokenCategory.kt +++ b/app/src/main/java/com/orange/ouds/app/ui/tokens/TokenCategory.kt @@ -54,8 +54,19 @@ sealed class TokenCategory( R.drawable.ic_dimension, R.string.app_tokens_dimension_space_description_text, listOf( - TokenProperty.SpaceScaled, TokenProperty.SpaceFixed, TokenProperty.SpacePaddingInline, TokenProperty.SpacePaddingStack, - TokenProperty.SpacePaddingInset, TokenProperty.SpaceColumnGap, TokenProperty.SpaceRowGap + TokenProperty.SpaceScaled, + TokenProperty.SpaceFixed, + TokenProperty.SpacePaddingInline, + TokenProperty.SpacePaddingInlineWithIcon, + TokenProperty.SpacePaddingInlineWithArrow, + TokenProperty.SpacePaddingStack, + TokenProperty.SpacePaddingStackWithIcon, + TokenProperty.SpacePaddingInset, + TokenProperty.SpaceColumnGap, + TokenProperty.SpaceColumnGapWithIcon, + TokenProperty.SpaceColumnGapWithArrow, + TokenProperty.SpaceRowGap, + TokenProperty.SpaceRowGapWithIcon ), ) 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 index 80170bc6..abc9e619 100644 --- 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 @@ -13,6 +13,7 @@ package com.orange.ouds.app.ui.tokens import androidx.compose.foundation.clickable +import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.Row @@ -165,10 +166,14 @@ private fun TokenIllustration(tokenProperty: TokenProperty, token: Token) = size = token.value as Dp, contentAlignment = Alignment.Center ) - is TokenProperty.SpacePaddingInline -> SpacePaddingInlineIllustration(size = token.value as Dp, token.name) + is TokenProperty.SpacePaddingInline -> SpaceIllustrationBox(size = token.value as Dp) + is TokenProperty.SpacePaddingInlineWithIcon, TokenProperty.SpaceColumnGapWithIcon -> SpaceWithIconIllustrationRow(size = token.value as Dp) + is TokenProperty.SpacePaddingInlineWithArrow, TokenProperty.SpaceColumnGapWithArrow -> SpaceWithArrowIllustrationRow(size = token.value as Dp) is TokenProperty.SpacePaddingInset -> SpacePaddingInsetIllustrationBox(size = token.value as Dp) is TokenProperty.SpacePaddingStack -> SpaceIllustrationBox(size = token.value as Dp, orientation = SpaceOrientation.Vertical) is TokenProperty.SpaceRowGap -> SpaceIllustrationBox(size = token.value as Dp, orientation = SpaceOrientation.Vertical, contentAlignment = Alignment.Center) + is TokenProperty.SpaceRowGapWithIcon -> SpaceWithIconIllustrationColumn(size = token.value as Dp, verticalArrangement = Arrangement.Bottom) + is TokenProperty.SpacePaddingStackWithIcon -> SpaceWithIconIllustrationColumn(size = token.value as Dp) is TokenProperty.Typography -> Unit } 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 index 99d0068f..f1ef99d3 100644 --- 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 @@ -64,23 +64,17 @@ sealed class TokenProperty( data object SpaceColumnGap : TokenProperty( nameRes = R.string.app_tokens_dimension_space_columnGap_label, - tokens = { - mutableListOf>().apply { - addAll(OudsSpaceKeyToken.ColumnGap.entries.map { Token(it.name, it.value) }) - addAll(OudsSpaceKeyToken.ColumnGap.WithIcon.entries.map { - Token( - "${OudsSpaceKeyToken.ColumnGap.WithIcon::class.simpleName}.${it.name}", - it.value - ) - }) - addAll(OudsSpaceKeyToken.ColumnGap.WithArrow.entries.map { - Token( - "${OudsSpaceKeyToken.ColumnGap.WithArrow::class.simpleName}.${it.name}", - it.value - ) - }) - } - } + tokens = { OudsSpaceKeyToken.ColumnGap.entries.map { Token(it.name, it.value) } } + ) + + data object SpaceColumnGapWithIcon : TokenProperty( + nameRes = R.string.app_tokens_dimension_space_columnGapWithIcon_label, + tokens = { OudsSpaceKeyToken.ColumnGap.WithIcon.entries.map { Token(it.name, it.value) } } + ) + + data object SpaceColumnGapWithArrow : TokenProperty( + nameRes = R.string.app_tokens_dimension_space_columnGapWithArrow_label, + tokens = { OudsSpaceKeyToken.ColumnGap.WithArrow.entries.map { Token(it.name, it.value) } } ) data object SpaceFixed : TokenProperty( @@ -90,23 +84,17 @@ sealed class TokenProperty( data object SpacePaddingInline : TokenProperty( nameRes = R.string.app_tokens_dimension_space_paddingInline_label, - tokens = { - mutableListOf>().apply { - addAll(OudsSpaceKeyToken.PaddingInline.entries.map { Token(it.name, it.value) }) - addAll(OudsSpaceKeyToken.PaddingInline.WithIcon.entries.map { - Token( - "${OudsSpaceKeyToken.PaddingInline.WithIcon::class.simpleName}.${it.name}", - it.value - ) - }) - addAll(OudsSpaceKeyToken.PaddingInline.WithArrow.entries.map { - Token( - "${OudsSpaceKeyToken.PaddingInline.WithArrow::class.simpleName}.${it.name}", - it.value - ) - }) - }.toList() - } + tokens = { OudsSpaceKeyToken.PaddingInline.entries.map { Token(it.name, it.value) } } + ) + + data object SpacePaddingInlineWithIcon : TokenProperty( + nameRes = R.string.app_tokens_dimension_space_paddingInlineWithIcon_label, + tokens = { OudsSpaceKeyToken.PaddingInline.WithIcon.entries.map { Token(it.name, it.value) } } + ) + + data object SpacePaddingInlineWithArrow : TokenProperty( + nameRes = R.string.app_tokens_dimension_space_paddingInlineWithArrow_label, + tokens = { OudsSpaceKeyToken.PaddingInline.WithArrow.entries.map { Token(it.name, it.value) } } ) data object SpacePaddingInset : TokenProperty( @@ -116,27 +104,22 @@ sealed class TokenProperty( data object SpacePaddingStack : TokenProperty( nameRes = R.string.app_tokens_dimension_space_paddingStack_label, - tokens = { - mutableListOf>().apply { - addAll(OudsSpaceKeyToken.PaddingBlock.entries.map { Token(it.name, it.value) }) - addAll(OudsSpaceKeyToken.PaddingBlock.WithIcon.entries.map { - Token( - "${OudsSpaceKeyToken.PaddingBlock.WithIcon::class.simpleName}.${it.name}", - it.value - ) - }) - } - } + tokens = { OudsSpaceKeyToken.PaddingBlock.entries.map { Token(it.name, it.value) } } + ) + + data object SpacePaddingStackWithIcon : TokenProperty( + nameRes = R.string.app_tokens_dimension_space_paddingStackWithIcon_label, + tokens = { OudsSpaceKeyToken.PaddingBlock.WithIcon.entries.map { Token(it.name, it.value) } } ) data object SpaceRowGap : TokenProperty( nameRes = R.string.app_tokens_dimension_space_rowGap_label, - tokens = { - mutableListOf>().apply { - addAll(OudsSpaceKeyToken.RowGap.entries.map { Token(it.name, it.value) }) - addAll(OudsSpaceKeyToken.RowGap.WithIcon.entries.map { Token("${OudsSpaceKeyToken.RowGap.WithIcon::class.simpleName}.${it.name}", it.value) }) - } - } + tokens = { OudsSpaceKeyToken.RowGap.entries.map { Token(it.name, it.value) } } + ) + + data object SpaceRowGapWithIcon : TokenProperty( + nameRes = R.string.app_tokens_dimension_space_rowGapWithIcon_label, + tokens = { OudsSpaceKeyToken.RowGap.WithIcon.entries.map { Token(it.name, it.value) } } ) data object SpaceScaled : TokenProperty( 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 index 01ae2693..beea17ba 100644 --- 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 @@ -19,6 +19,7 @@ import androidx.compose.foundation.isSystemInDarkTheme import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.BoxScope +import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.fillMaxHeight import androidx.compose.foundation.layout.fillMaxWidth @@ -145,21 +146,60 @@ fun SizeIconWithTextIllustrationRow(size: Dp, tokenName: String) { } @Composable -fun SpacePaddingInlineIllustration(size: Dp, tokenName: String) = when { - tokenName.contains("WithIcon") -> SpacePaddingInlineWithImageIllustrationRow( +fun SpaceWithIconIllustrationColumn(size: Dp, verticalArrangement: Arrangement.Vertical = Arrangement.Top) { + Column( + modifier = Modifier + .size(defaultIllustrationSize) + .background(color = OudsColorKeyToken.OnSurface.value), //TODO use BgEmphasizedPrimary token when available + horizontalAlignment = Alignment.CenterHorizontally, + verticalArrangement = verticalArrangement + ) { + val image: @Composable () -> Unit = { + Image( + painter = painterResource(R.drawable.ic_design_token_figma_no_padding), + contentDescription = null, + contentScale = ContentScale.None + ) + } + + val space: @Composable () -> Unit = { + Box( + modifier = Modifier + .fillMaxWidth() + .height(height = size) + .background(Color(0xFF26B2FF)) //TODO use AlwaysInfo token when available + ) + } + + if (verticalArrangement == Arrangement.Bottom) { + image() + space() + } else { + space() + image() + } + } +} + +@Composable +fun SpaceWithIconIllustrationRow(size: Dp) { + SpacePaddingInlineWithImageIllustrationRow( spaceSize = size, imagePainter = painterResource(R.drawable.ic_design_token_figma_no_padding), imageModifier = Modifier.padding(horizontal = 1.dp) ) - tokenName.contains("WithArrow") -> SpacePaddingInlineWithImageIllustrationRow( +} + +@Composable +fun SpaceWithArrowIllustrationRow(size: Dp) { + SpacePaddingInlineWithImageIllustrationRow( spaceSize = size, imagePainter = painterResource(R.drawable.ic_chevron_down) ) - else -> SpaceIllustrationBox(size = size) } @Composable -fun SpacePaddingInlineWithImageIllustrationRow( +private fun SpacePaddingInlineWithImageIllustrationRow( spaceSize: Dp, imagePainter: Painter, modifier: Modifier = Modifier, diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml index fd81b121..68202317 100644 --- a/app/src/main/res/values/strings.xml +++ b/app/src/main/res/values/strings.xml @@ -51,10 +51,16 @@ Scaled Fixed Padding inline + Padding inline with icon + Padding inline with arrow Padding stack + Padding stack with icon Padding inset Column gap + Column gap with icon + Column gap with arrow Row gap + Row gap with icon Size From 57a101d2699da4a3e6e62876e8f708e50c410b86 Mon Sep 17 00:00:00 2001 From: Pauline Auvray Date: Fri, 8 Nov 2024 14:19:03 +0100 Subject: [PATCH 31/32] Review: Rename iconWithLabel by iconWithText --- .../com/orange/ouds/app/ui/tokens/TokenCategoryDetailScreen.kt | 2 +- app/src/main/res/values/strings.xml | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) 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 index abc9e619..b0744932 100644 --- 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 @@ -102,7 +102,7 @@ fun TokenCategoryDetailScreen(tokenCategory: TokenCategory, onSubcategoryClick: TokenIllustration(tokenProperty = tokenProperty, token = token) Text( modifier = Modifier.fillMaxWidth(), - text = stringResource(id = R.string.app_tokens_dimension_size_iconWithLabelTokenName_label, token.name, token.literalValue), + text = stringResource(id = R.string.app_tokens_dimension_size_iconWithTextTokenName_label, token.name, token.literalValue), maxLines = 1, overflow = TextOverflow.Ellipsis, style = OudsTypographyKeyToken.BodyDefaultMedium.value, diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml index 68202317..641e08ac 100644 --- a/app/src/main/res/values/strings.xml +++ b/app/src/main/res/values/strings.xml @@ -67,7 +67,7 @@ Size refers to the specific measurements used to define the dimensions of UI elements within the design system. Icon decorative Icon with text - %1$s (%2$s) + %1$s (%2$s) From 550678d2c12f578ee4150a2b55b0bb1d14a33ba7 Mon Sep 17 00:00:00 2001 From: Pauline Auvray Date: Fri, 8 Nov 2024 14:21:04 +0100 Subject: [PATCH 32/32] Review: Rename composable --- .../orange/ouds/app/ui/tokens/TokenPropertyIllustration.kt | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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 index beea17ba..8c091788 100644 --- 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 @@ -183,7 +183,7 @@ fun SpaceWithIconIllustrationColumn(size: Dp, verticalArrangement: Arrangement.V @Composable fun SpaceWithIconIllustrationRow(size: Dp) { - SpacePaddingInlineWithImageIllustrationRow( + SpaceWithImageIllustrationRow( spaceSize = size, imagePainter = painterResource(R.drawable.ic_design_token_figma_no_padding), imageModifier = Modifier.padding(horizontal = 1.dp) @@ -192,14 +192,14 @@ fun SpaceWithIconIllustrationRow(size: Dp) { @Composable fun SpaceWithArrowIllustrationRow(size: Dp) { - SpacePaddingInlineWithImageIllustrationRow( + SpaceWithImageIllustrationRow( spaceSize = size, imagePainter = painterResource(R.drawable.ic_chevron_down) ) } @Composable -private fun SpacePaddingInlineWithImageIllustrationRow( +private fun SpaceWithImageIllustrationRow( spaceSize: Dp, imagePainter: Painter, modifier: Modifier = Modifier,