diff --git a/NOTICE.txt b/NOTICE.txt index 87a5c90e..b15ca0f5 100644 --- a/NOTICE.txt +++ b/NOTICE.txt @@ -11,14 +11,47 @@ Any use or displaying shall constitute an infringement under intellectual proper app/src/main/res/drawable/ic_border.xml app/src/main/res/drawable/ic_component_atom.xml app/src/main/res/drawable/ic_design_token_figma.xml +app/src/main/res/drawable/ic_design_token_figma_no_padding.xml +app/src/main/res/drawable/ic_dimension.xml app/src/main/res/drawable/ic_filter_effects.xml app/src/main/res/drawable/ic_info.xml app/src/main/res/drawable/ic_layers.xml +app/src/main/res/drawable/ic_menu_grid.xml app/src/main/res/drawable/ic_solar_palette.xml app/src/main/res/drawable/ic_typography.xml app/src/main/res/drawable/ic_ui_dark_mode.xml app/src/main/res/drawable/ic_ui_light_mode.xml app/src/main/res/drawable/il_opacity_union.xml +app/src/main/res/drawable-hdpi/il_tokens_grid_column_margin.png +app/src/main/res/drawable-hdpi/il_tokens_grid_max_width.png +app/src/main/res/drawable-hdpi/il_tokens_grid_min_width.png +app/src/main/res/drawable-mdpi/il_tokens_grid_column_margin.png +app/src/main/res/drawable-mdpi/il_tokens_grid_max_width.png +app/src/main/res/drawable-mdpi/il_tokens_grid_min_width.png +app/src/main/res/drawable-xhdpi/il_tokens_grid_column_margin.png +app/src/main/res/drawable-xhdpi/il_tokens_grid_max_width.png +app/src/main/res/drawable-xhdpi/il_tokens_grid_min_width.png +app/src/main/res/drawable-xxhdpi/il_tokens_grid_column_margin.png +app/src/main/res/drawable-xxhdpi/il_tokens_grid_max_width.png +app/src/main/res/drawable-xxhdpi/il_tokens_grid_min_width.png +app/src/main/res/drawable-xxxhdpi/il_tokens_grid_column_margin.png +app/src/main/res/drawable-xxxhdpi/il_tokens_grid_max_width.png +app/src/main/res/drawable-xxxhdpi/il_tokens_grid_min_width.png +app/src/main/res/drawable-night-hdpi/il_tokens_grid_column_margin.png +app/src/main/res/drawable-night-hdpi/il_tokens_grid_max_width.png +app/src/main/res/drawable-night-hdpi/il_tokens_grid_min_width.png +app/src/main/res/drawable-night-mdpi/il_tokens_grid_column_margin.png +app/src/main/res/drawable-night-mdpi/il_tokens_grid_max_width.png +app/src/main/res/drawable-night-mdpi/il_tokens_grid_min_width.png +app/src/main/res/drawable-night-xhdpi/il_tokens_grid_column_margin.png +app/src/main/res/drawable-night-xhdpi/il_tokens_grid_max_width.png +app/src/main/res/drawable-night-xhdpi/il_tokens_grid_min_width.png +app/src/main/res/drawable-night-xxhdpi/il_tokens_grid_column_margin.png +app/src/main/res/drawable-night-xxhdpi/il_tokens_grid_max_width.png +app/src/main/res/drawable-night-xxhdpi/il_tokens_grid_min_width.png +app/src/main/res/drawable-night-xxxhdpi/il_tokens_grid_column_margin.png +app/src/main/res/drawable-night-xxxhdpi/il_tokens_grid_max_width.png +app/src/main/res/drawable-night-xxxhdpi/il_tokens_grid_min_width.png docs/images/favicon-16x16.png docs/images/orange-logo.svg 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..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 @@ -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.OudsSpaceKeyToken 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 = OudsSpaceKeyToken.Fixed.Medium.value, bottom = OudsSpaceKeyToken.Fixed.Short.value) + .padding(horizontal = OudsSpaceKeyToken.Fixed.Medium.value), style = MaterialTheme.typography.titleLarge ) themeManager.availableThemes.forEach { theme -> @@ -180,7 +181,7 @@ private fun ChangeThemeDialog(themeManager: ThemeManager, dismissDialog: () -> U }, role = Role.RadioButton ) - .padding(horizontal = 16.dp), + .padding(horizontal = OudsSpaceKeyToken.Fixed.Medium.value), verticalAlignment = Alignment.CenterVertically ) { RadioButton( @@ -190,7 +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 = 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 5231d3b9..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.OudsSpacingFixedKeyToken +import com.orange.ouds.theme.tokens.OudsSpaceKeyToken @Composable fun ComponentsScreen() { @@ -49,7 +49,7 @@ fun ComponentsScreen() { Box( modifier = Modifier - .padding(top = OudsSpacingFixedKeyToken.Medium.value) + .padding(top = OudsSpaceKeyToken.Fixed.Medium.value) .width(OudsGridKeyToken.Margin.value) .height(OudsGridKeyToken.ColumnGap.value) .background(OudsTheme.colorScheme.primary) 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/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/TokenCategory.kt b/app/src/main/java/com/orange/ouds/app/ui/tokens/TokenCategory.kt index cf533e24..e936d630 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,37 +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.Box -import androidx.compose.foundation.layout.padding -import androidx.compose.foundation.layout.size -import androidx.compose.foundation.shape.RoundedCornerShape -import androidx.compose.material3.Surface -import androidx.compose.runtime.Composable import androidx.compose.runtime.Immutable -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.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.theme.OudsBorderStyle -import com.orange.ouds.theme.dashedBorder -import com.orange.ouds.theme.dottedBorder -import com.orange.ouds.theme.tokens.OudsBorderRadiusKeyToken -import com.orange.ouds.theme.tokens.OudsBorderStyleKeyToken -import com.orange.ouds.theme.tokens.OudsBorderWidthKeyToken -import com.orange.ouds.theme.tokens.OudsElevationKeyToken -import com.orange.ouds.theme.tokens.OudsOpacityKeyToken -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 } @@ -53,7 +24,9 @@ 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 { @@ -69,6 +42,32 @@ sealed class TokenCategory( listOf(TokenProperty.BorderWidth, TokenProperty.BorderRadius, TokenProperty.BorderStyle) ) + data object Dimension : TokenCategory( + R.string.app_tokens_dimension_label, + R.drawable.ic_dimension, + R.string.app_tokens_dimension_description_text, + subcategories = listOf(Space, Size) + ) { + data object Space : TokenCategory( + R.string.app_tokens_dimension_space_label, + 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 + ), + subcategory = true + ) + + data object Size : 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), + subcategory = true + ) + } + data object Elevation : TokenCategory( R.string.app_tokens_elevation_label, R.drawable.ic_layers, @@ -76,6 +75,13 @@ sealed class TokenCategory( listOf(TokenProperty.Elevation) ) + data object Grid : TokenCategory( + R.string.app_tokens_grid_label, + R.drawable.ic_menu_grid, + R.string.app_tokens_grid_description_text, + listOf(TokenProperty.Grid) + ) + data object Opacity : TokenCategory( R.string.app_tokens_opacity_label, R.drawable.ic_filter_effects, @@ -89,120 +95,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 = { OudsBorderRadiusKeyToken.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, - shape = RoundedCornerShape(radius) - ) //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 = { OudsBorderStyleKeyToken.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 = { OudsBorderWidthKeyToken.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 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 e0093adc..71b2e8e5 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 @@ -21,92 +22,132 @@ 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 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.tokens.OudsSpacingFixedKeyToken +import com.orange.ouds.theme.OudsBorderStyle +import com.orange.ouds.theme.tokens.OudsSpaceKeyToken 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)) { + LazyColumn(contentPadding = PaddingValues(bottom = OudsSpaceKeyToken.Fixed.Medium.value)) { item { DetailScreenHeader( descriptionRes = tokenCategory.descriptionRes, imageRes = tokenCategory.imageRes ) - } - 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 - ) + if (tokenCategory == TokenCategory.Grid) { + GridIllustrations() } + } - 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 = OudsSpaceKeyToken.Fixed.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 - } - - val isTypographyProperty = tokenProperty is TokenProperty.Typography + Text( + modifier = Modifier + .fillMaxWidth() + .padding(OudsSpaceKeyToken.Fixed.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(OudsSpaceKeyToken.Fixed.Medium.value)) - Column( + tokenProperty.nameRes?.let { + Text( 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 + .fillMaxWidth() + .padding(OudsSpaceKeyToken.Fixed.Medium.value), + text = stringResource(id = tokenProperty.nameRes), + maxLines = 1, + overflow = TextOverflow.Ellipsis, + style = OudsTypographyKeyToken.HeadingMedium.value + ) + } + + tokenProperty.tokens().forEach { token -> + if (tokenProperty == TokenProperty.SizeIconWithLabel) { + Column( + modifier = Modifier + .fillMaxWidth() + .padding(horizontal = OudsSpaceKeyToken.Fixed.Medium.value, vertical = OudsSpaceKeyToken.Fixed.Shorter.value) + ) { + TokenIllustration(tokenProperty = tokenProperty, token = token) + Text( + modifier = Modifier.fillMaxWidth(), + text = stringResource(id = R.string.app_tokens_dimension_size_iconWithLabelTokenName_label, token.name, token.literalValue), + maxLines = 1, + overflow = TextOverflow.Ellipsis, + style = OudsTypographyKeyToken.BodyDefaultMedium.value, + color = OudsColorKeyToken.OnSurfaceVariant.value //TODO use ContentMuted token when available + ) + } + } else { + val noIllustrationProperty = tokenProperty in listOf(TokenProperty.Typography, TokenProperty.Grid) + + Row( + modifier = Modifier + .fillMaxWidth() + .padding(horizontal = OudsSpaceKeyToken.Fixed.Medium.value, vertical = OudsSpaceKeyToken.Fixed.Shorter.value) + ) { + TokenIllustration(tokenProperty = tokenProperty, token = token) + + Column( + modifier = Modifier + .weight(1f) + .padding(start = if (noIllustrationProperty) OudsSpaceKeyToken.Fixed.None.value else OudsSpaceKeyToken.Fixed.Medium.value) + ) { + Text( + modifier = Modifier.fillMaxWidth(), + text = token.name, + maxLines = 1, + overflow = TextOverflow.Ellipsis, + style = if (tokenProperty == TokenProperty.Typography) { + 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 + ) } - ) - 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 - ) + } } } } @@ -115,12 +156,32 @@ fun TokenCategoryDetailScreen(tokenCategory: TokenCategory) { } } +@Composable +private fun TokenIllustration(tokenProperty: TokenProperty, token: Token) = when (tokenProperty) { + 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.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 -> 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, TokenProperty.Grid -> Unit +} + @UiModePreviews.Default @Composable private fun PreviewTokenCategoryDetailScreen( @PreviewParameter(TokenCategoryDetailScreenPreviewParameterProvider::class) parameter: TokenCategory ) = OudsPreview { - TokenCategoryDetailScreen(parameter) + TokenCategoryDetailScreen(parameter) {} } private class TokenCategoryDetailScreenPreviewParameterProvider : BasicPreviewParameterProvider(*previewParameterValues.toTypedArray()) @@ -128,5 +189,6 @@ private class TokenCategoryDetailScreenPreviewParameterProvider : BasicPreviewPa private val previewParameterValues: List get() = listOf( TokenCategory.Opacity, - TokenCategory.Elevation - ) + TokenCategory.Elevation, + TokenCategory.Grid + ) \ No newline at end of file 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..219ecfa1 --- /dev/null +++ b/app/src/main/java/com/orange/ouds/app/ui/tokens/TokenProperty.kt @@ -0,0 +1,226 @@ +/* + * 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.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.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.OudsBorderRadiusKeyToken +import com.orange.ouds.theme.tokens.OudsBorderStyleKeyToken +import com.orange.ouds.theme.tokens.OudsBorderWidthKeyToken +import com.orange.ouds.theme.tokens.OudsElevationKeyToken +import com.orange.ouds.theme.tokens.OudsGridKeyToken +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?, + val tokens: @Composable () -> List> +) { + data object BorderRadius : TokenProperty( + nameRes = R.string.app_tokens_border_radius_label, + tokens = { OudsBorderRadiusKeyToken.entries.map { Token(it.name, it.value) } } + ) + + data object BorderStyle : TokenProperty( + nameRes = R.string.app_tokens_border_style_label, + tokens = { OudsBorderStyleKeyToken.entries.map { Token(it.name, it.value) } } + ) + + data object BorderWidth : TokenProperty( + nameRes = R.string.app_tokens_border_width_label, + tokens = { OudsBorderWidthKeyToken.entries.map { Token(it.name, it.value) } } + ) + + 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 Grid : TokenProperty( + nameRes = null, + tokens = { OudsGridKeyToken.entries.map { Token(it.name, it.value) } } + ) + + 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 SizeIconWithLabel : TokenProperty( + nameRes = R.string.app_tokens_dimension_size_iconWithLabel_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 == label }?.value.orElse { OudsTypographyKeyToken.BodyStrongLarge.value } + ) + } + } + } + + data object SpaceColumnGap : TokenProperty( + nameRes = R.string.app_tokens_dimension_space_columnGap_label, + tokens = { OudsSpaceKeyToken.ColumnGap.entries.map { Token(it.name, it.value) } } + ) + + data object SpaceFixed : TokenProperty( + nameRes = R.string.app_tokens_dimension_space_fixed_label, + tokens = { OudsSpaceKeyToken.Fixed.entries.map { Token(it.name, it.value) } } + ) + + data object SpacePaddingInline : TokenProperty( + nameRes = R.string.app_tokens_dimension_space_paddingInline_label, + tokens = { OudsSpaceKeyToken.PaddingInline.entries.map { Token(it.name, it.value) } } + ) { + @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, + tokens = { OudsSpaceKeyToken.PaddingBlock.entries.map { Token(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) } } + ) + + data object SpaceScaled : TokenProperty( + nameRes = R.string.app_tokens_dimension_space_scaled_label, + 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) } }) + +} \ 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..86fbc797 --- /dev/null +++ b/app/src/main/java/com/orange/ouds/app/ui/tokens/TokenPropertyIllustration.kt @@ -0,0 +1,163 @@ +/* + * 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.padding +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.res.painterResource +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.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.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 + ) + } +} + +@Composable +fun GridIllustrations() { + Image( + modifier = Modifier + .fillMaxWidth() + .padding(horizontal = OudsSpaceKeyToken.Fixed.Medium.value) + .background(OudsColorKeyToken.OnSurface.value), //TODO use BgEmphasizedPrimary token when available + painter = painterResource(id = R.drawable.il_tokens_grid_column_margin), + contentDescription = null + ) + Image( + modifier = Modifier + .fillMaxWidth() + .padding(horizontal = OudsSpaceKeyToken.Fixed.Medium.value) + .padding(top = OudsSpaceKeyToken.Fixed.Medium.value) + .background(OudsColorKeyToken.OnSurface.value), //TODO use BgEmphasizedPrimary token when available + painter = painterResource(id = R.drawable.il_tokens_grid_min_width), + contentDescription = null + ) + Image( + modifier = Modifier + .fillMaxWidth() + .padding(horizontal = OudsSpaceKeyToken.Fixed.Medium.value) + .padding(top = OudsSpaceKeyToken.Fixed.Medium.value) + .background(OudsColorKeyToken.OnSurface.value), //TODO use BgEmphasizedPrimary token when available + painter = painterResource(id = R.drawable.il_tokens_grid_max_width), + contentDescription = null + ) +} \ No newline at end of file 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..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,31 +26,31 @@ 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.OudsSpaceKeyToken @Composable -fun TokensScreen(onTokenClick: (Long) -> Unit) { +fun TokensScreen(onTokenCategoryClick: (Long) -> Unit) { TokensScreen( - tokenCategories = tokenCategories, - onTokenClick = onTokenClick + tokenCategories = tokenCategories.filter { !it.subcategory }, + onTokenCategoryClick = onTokenCategoryClick ) } @Composable -private fun TokensScreen(tokenCategories: List, onTokenClick: (Long) -> Unit) { +private fun TokensScreen(tokenCategories: List, onTokenCategoryClick: (Long) -> Unit) { Screen { Column( modifier = Modifier .fillMaxSize() .verticalScroll(rememberScrollState()) - .padding(OudsSpacingFixedKeyToken.Medium.value), - verticalArrangement = Arrangement.spacedBy(OudsSpacingFixedKeyToken.Medium.value) + .padding(OudsSpaceKeyToken.Fixed.Medium.value), + verticalArrangement = Arrangement.spacedBy(OudsSpaceKeyToken.Fixed.Medium.value) ) { tokenCategories.forEach { token -> LargeCard( title = stringResource(id = token.nameRes), imageRes = token.imageRes, - onClick = { onTokenClick(token.id) } + onClick = { onTokenCategoryClick(token.id) } ) } } 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..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.OudsSpacingFixedKeyToken +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 = OudsSpacingFixedKeyToken.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 f3d39646..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.OudsSpacingFixedKeyToken +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(OudsSpacingFixedKeyToken.Medium.value) + modifier = Modifier.padding(OudsSpaceKeyToken.Fixed.Medium.value) ) { Text( text = title, diff --git a/app/src/main/res/drawable-hdpi/il_tokens_grid_column_margin.png b/app/src/main/res/drawable-hdpi/il_tokens_grid_column_margin.png new file mode 100644 index 00000000..1ae4ef4a Binary files /dev/null and b/app/src/main/res/drawable-hdpi/il_tokens_grid_column_margin.png differ diff --git a/app/src/main/res/drawable-hdpi/il_tokens_grid_max_width.png b/app/src/main/res/drawable-hdpi/il_tokens_grid_max_width.png new file mode 100644 index 00000000..b285e6a5 Binary files /dev/null and b/app/src/main/res/drawable-hdpi/il_tokens_grid_max_width.png differ diff --git a/app/src/main/res/drawable-hdpi/il_tokens_grid_min_width.png b/app/src/main/res/drawable-hdpi/il_tokens_grid_min_width.png new file mode 100644 index 00000000..b61e5cad Binary files /dev/null and b/app/src/main/res/drawable-hdpi/il_tokens_grid_min_width.png differ diff --git a/app/src/main/res/drawable-mdpi/il_tokens_grid_column_margin.png b/app/src/main/res/drawable-mdpi/il_tokens_grid_column_margin.png new file mode 100644 index 00000000..5b8ac22f Binary files /dev/null and b/app/src/main/res/drawable-mdpi/il_tokens_grid_column_margin.png differ diff --git a/app/src/main/res/drawable-mdpi/il_tokens_grid_max_width.png b/app/src/main/res/drawable-mdpi/il_tokens_grid_max_width.png new file mode 100644 index 00000000..2984b8e8 Binary files /dev/null and b/app/src/main/res/drawable-mdpi/il_tokens_grid_max_width.png differ diff --git a/app/src/main/res/drawable-mdpi/il_tokens_grid_min_width.png b/app/src/main/res/drawable-mdpi/il_tokens_grid_min_width.png new file mode 100644 index 00000000..4ebc3c11 Binary files /dev/null and b/app/src/main/res/drawable-mdpi/il_tokens_grid_min_width.png differ diff --git a/app/src/main/res/drawable-night-hdpi/il_tokens_grid_column_margin.png b/app/src/main/res/drawable-night-hdpi/il_tokens_grid_column_margin.png new file mode 100644 index 00000000..311d3a7c Binary files /dev/null and b/app/src/main/res/drawable-night-hdpi/il_tokens_grid_column_margin.png differ diff --git a/app/src/main/res/drawable-night-hdpi/il_tokens_grid_max_width.png b/app/src/main/res/drawable-night-hdpi/il_tokens_grid_max_width.png new file mode 100644 index 00000000..0daae302 Binary files /dev/null and b/app/src/main/res/drawable-night-hdpi/il_tokens_grid_max_width.png differ diff --git a/app/src/main/res/drawable-night-hdpi/il_tokens_grid_min_width.png b/app/src/main/res/drawable-night-hdpi/il_tokens_grid_min_width.png new file mode 100644 index 00000000..7dda0312 Binary files /dev/null and b/app/src/main/res/drawable-night-hdpi/il_tokens_grid_min_width.png differ diff --git a/app/src/main/res/drawable-night-mdpi/il_tokens_grid_column_margin.png b/app/src/main/res/drawable-night-mdpi/il_tokens_grid_column_margin.png new file mode 100644 index 00000000..aecea085 Binary files /dev/null and b/app/src/main/res/drawable-night-mdpi/il_tokens_grid_column_margin.png differ diff --git a/app/src/main/res/drawable-night-mdpi/il_tokens_grid_max_width.png b/app/src/main/res/drawable-night-mdpi/il_tokens_grid_max_width.png new file mode 100644 index 00000000..0c394643 Binary files /dev/null and b/app/src/main/res/drawable-night-mdpi/il_tokens_grid_max_width.png differ diff --git a/app/src/main/res/drawable-night-mdpi/il_tokens_grid_min_width.png b/app/src/main/res/drawable-night-mdpi/il_tokens_grid_min_width.png new file mode 100644 index 00000000..2c28a0c1 Binary files /dev/null and b/app/src/main/res/drawable-night-mdpi/il_tokens_grid_min_width.png differ diff --git a/app/src/main/res/drawable-night-xhdpi/il_tokens_grid_column_margin.png b/app/src/main/res/drawable-night-xhdpi/il_tokens_grid_column_margin.png new file mode 100644 index 00000000..741f740a Binary files /dev/null and b/app/src/main/res/drawable-night-xhdpi/il_tokens_grid_column_margin.png differ diff --git a/app/src/main/res/drawable-night-xhdpi/il_tokens_grid_max_width.png b/app/src/main/res/drawable-night-xhdpi/il_tokens_grid_max_width.png new file mode 100644 index 00000000..817fb52d Binary files /dev/null and b/app/src/main/res/drawable-night-xhdpi/il_tokens_grid_max_width.png differ diff --git a/app/src/main/res/drawable-night-xhdpi/il_tokens_grid_min_width.png b/app/src/main/res/drawable-night-xhdpi/il_tokens_grid_min_width.png new file mode 100644 index 00000000..0585141b Binary files /dev/null and b/app/src/main/res/drawable-night-xhdpi/il_tokens_grid_min_width.png differ diff --git a/app/src/main/res/drawable-night-xxhdpi/il_tokens_grid_column_margin.png b/app/src/main/res/drawable-night-xxhdpi/il_tokens_grid_column_margin.png new file mode 100644 index 00000000..d1c5bb1b Binary files /dev/null and b/app/src/main/res/drawable-night-xxhdpi/il_tokens_grid_column_margin.png differ diff --git a/app/src/main/res/drawable-night-xxhdpi/il_tokens_grid_max_width.png b/app/src/main/res/drawable-night-xxhdpi/il_tokens_grid_max_width.png new file mode 100644 index 00000000..0dd45f94 Binary files /dev/null and b/app/src/main/res/drawable-night-xxhdpi/il_tokens_grid_max_width.png differ diff --git a/app/src/main/res/drawable-night-xxhdpi/il_tokens_grid_min_width.png b/app/src/main/res/drawable-night-xxhdpi/il_tokens_grid_min_width.png new file mode 100644 index 00000000..5f0d109c Binary files /dev/null and b/app/src/main/res/drawable-night-xxhdpi/il_tokens_grid_min_width.png differ diff --git a/app/src/main/res/drawable-night-xxxhdpi/il_tokens_grid_column_margin.png b/app/src/main/res/drawable-night-xxxhdpi/il_tokens_grid_column_margin.png new file mode 100644 index 00000000..d1c5bb1b Binary files /dev/null and b/app/src/main/res/drawable-night-xxxhdpi/il_tokens_grid_column_margin.png differ diff --git a/app/src/main/res/drawable-night-xxxhdpi/il_tokens_grid_max_width.png b/app/src/main/res/drawable-night-xxxhdpi/il_tokens_grid_max_width.png new file mode 100644 index 00000000..0dd45f94 Binary files /dev/null and b/app/src/main/res/drawable-night-xxxhdpi/il_tokens_grid_max_width.png differ diff --git a/app/src/main/res/drawable-night-xxxhdpi/il_tokens_grid_min_width.png b/app/src/main/res/drawable-night-xxxhdpi/il_tokens_grid_min_width.png new file mode 100644 index 00000000..5f0d109c Binary files /dev/null and b/app/src/main/res/drawable-night-xxxhdpi/il_tokens_grid_min_width.png differ diff --git a/app/src/main/res/drawable-xhdpi/il_tokens_grid_column_margin.png b/app/src/main/res/drawable-xhdpi/il_tokens_grid_column_margin.png new file mode 100644 index 00000000..09f936f9 Binary files /dev/null and b/app/src/main/res/drawable-xhdpi/il_tokens_grid_column_margin.png differ diff --git a/app/src/main/res/drawable-xhdpi/il_tokens_grid_max_width.png b/app/src/main/res/drawable-xhdpi/il_tokens_grid_max_width.png new file mode 100644 index 00000000..dd885145 Binary files /dev/null and b/app/src/main/res/drawable-xhdpi/il_tokens_grid_max_width.png differ diff --git a/app/src/main/res/drawable-xhdpi/il_tokens_grid_min_width.png b/app/src/main/res/drawable-xhdpi/il_tokens_grid_min_width.png new file mode 100644 index 00000000..d35067db Binary files /dev/null and b/app/src/main/res/drawable-xhdpi/il_tokens_grid_min_width.png differ diff --git a/app/src/main/res/drawable-xxhdpi/il_tokens_grid_column_margin.png b/app/src/main/res/drawable-xxhdpi/il_tokens_grid_column_margin.png new file mode 100644 index 00000000..381ad2f5 Binary files /dev/null and b/app/src/main/res/drawable-xxhdpi/il_tokens_grid_column_margin.png differ diff --git a/app/src/main/res/drawable-xxhdpi/il_tokens_grid_max_width.png b/app/src/main/res/drawable-xxhdpi/il_tokens_grid_max_width.png new file mode 100644 index 00000000..140a3ea2 Binary files /dev/null and b/app/src/main/res/drawable-xxhdpi/il_tokens_grid_max_width.png differ diff --git a/app/src/main/res/drawable-xxhdpi/il_tokens_grid_min_width.png b/app/src/main/res/drawable-xxhdpi/il_tokens_grid_min_width.png new file mode 100644 index 00000000..856d1384 Binary files /dev/null and b/app/src/main/res/drawable-xxhdpi/il_tokens_grid_min_width.png differ diff --git a/app/src/main/res/drawable-xxxhdpi/il_tokens_grid_column_margin.png b/app/src/main/res/drawable-xxxhdpi/il_tokens_grid_column_margin.png new file mode 100644 index 00000000..bca049c3 Binary files /dev/null and b/app/src/main/res/drawable-xxxhdpi/il_tokens_grid_column_margin.png differ diff --git a/app/src/main/res/drawable-xxxhdpi/il_tokens_grid_max_width.png b/app/src/main/res/drawable-xxxhdpi/il_tokens_grid_max_width.png new file mode 100644 index 00000000..5d984120 Binary files /dev/null and b/app/src/main/res/drawable-xxxhdpi/il_tokens_grid_max_width.png differ diff --git a/app/src/main/res/drawable-xxxhdpi/il_tokens_grid_min_width.png b/app/src/main/res/drawable-xxxhdpi/il_tokens_grid_min_width.png new file mode 100644 index 00000000..f189a900 Binary files /dev/null and b/app/src/main/res/drawable-xxxhdpi/il_tokens_grid_min_width.png differ 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 @@ + + + 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 @@ + + + diff --git a/app/src/main/res/drawable/ic_dimension.xml b/app/src/main/res/drawable/ic_dimension.xml new file mode 100644 index 00000000..e6fcd809 --- /dev/null +++ b/app/src/main/res/drawable/ic_dimension.xml @@ -0,0 +1,25 @@ + + + + + + + + diff --git a/app/src/main/res/drawable/ic_menu_grid.xml b/app/src/main/res/drawable/ic_menu_grid.xml new file mode 100644 index 00000000..971d435a --- /dev/null +++ b/app/src/main/res/drawable/ic_menu_grid.xml @@ -0,0 +1,22 @@ + + + + + diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml index 8124a2fa..3b1491ab 100644 --- a/app/src/main/res/values/strings.xml +++ b/app/src/main/res/values/strings.xml @@ -41,10 +41,36 @@ Radius Style + + Dimension + Dimension provides standard sizing and spacing to ensure visual consistency across the UI. + + + 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) + + + 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 + Elevation Shadows are used to give the impression of distance or elevation between surfaces, which adds depth to our designs. + + Grid + Grids are used to position content and create consistent page layouts. + Opacity Opacity can help distinguish foreground elements from background elements, making content easier to read and important actions more noticeable. 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/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..5612623b 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,10 @@ 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.OudsSpaceKeyToken +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 +125,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 +268,36 @@ fun OudsSpacingSemanticTokens.getSpacings() = OudsSpacings( ) @Stable -fun OudsSpacings.fromToken(token: OudsSpacingFixedKeyToken): Dp { +fun OudsSpaces.fromToken(token: OudsSpaceKeyToken.Fixed): 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 + 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 OudsSpacings.fromToken(token: OudsSpacingScaledKeyToken, adaptiveWindowType: OudsAdaptiveWindowType): Dp { +fun OudsSpaces.fromToken(token: OudsSpaceKeyToken.Scaled, 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 + 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,163 +308,163 @@ fun OudsSpacings.fromToken(token: OudsSpacingScaledKeyToken, adaptiveWindowType: } @Stable -fun OudsSpacings.fromToken(token: OudsSpacingPaddingInlineKeyToken): Dp { +fun OudsSpaces.fromToken(token: OudsSpaceKeyToken.PaddingInline): 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 + 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 OudsSpacings.fromToken(token: OudsSpacingPaddingBlockKeyToken): Dp { +fun OudsSpaces.fromToken(token: OudsSpaceKeyToken.PaddingBlock): 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 + 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 OudsSpacings.fromToken(token: OudsSpacingInsetKeyToken): Dp { +fun OudsSpaces.fromToken(token: OudsSpaceKeyToken.Inset): 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 + 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 OudsSpacings.fromToken(token: OudsSpacingColumnGapKeyToken): Dp { +fun OudsSpaces.fromToken(token: OudsSpaceKeyToken.ColumnGap): 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 + 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 OudsSpacings.fromToken(token: OudsSpacingRowGapKeyToken): Dp { +fun OudsSpaces.fromToken(token: OudsSpaceKeyToken.RowGap): 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 + 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 OudsSpacingColumnGapKeyToken.value: Dp +val OudsSpaceKeyToken.ColumnGap.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 OudsSpaceKeyToken.Fixed.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 OudsSpaceKeyToken.PaddingBlock.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 OudsSpaceKeyToken.PaddingInline.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 OudsSpaceKeyToken.Inset.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 OudsSpaceKeyToken.RowGap.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 OudsSpaceKeyToken.Scaled.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/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 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/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 a531a7fa..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 { - HeadingSmallSizeShort, - HeadingSmallSizeMedium, - HeadingSmallSizeTall, - HeadingMediumSizeShort, - HeadingMediumSizeMedium, - HeadingMediumSizeTall, - HeadingLargeSizeShort, - HeadingLargeSizeMedium, - HeadingLargeSizeTall, - HeadingExtraLargeSizeShort, - HeadingExtraLargeSizeMedium, - HeadingExtraLargeSizeTall, - LabelLargeSizeShorter, - LabelLargeSizeShort, - LabelLargeSizeMedium, - LabelLargeSizeTall, - LabelLargeSizeTaller, - LabelMediumSizeShort, - LabelMediumSizeMedium, - LabelMediumSizeTall, - LabelSmallSizeShort, - LabelSmallSizeMedium, - LabelSmallSizeTall, - LabelExtraLargeSizeShort, - LabelExtraLargeSizeMedium, - LabelExtraLargeSizeTall, - BodySmallSizeShort, - BodySmallSizeMedium, - BodySmallSizeTall, - BodyMediumSizeShort, - BodyMediumSizeMedium, - BodyMediumSizeTall, - BodyLargeSizeShort, - BodyLargeSizeMedium, - BodyLargeSizeTall, -} - -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/OudsSpacingKeyTokens.kt b/theme-contract/src/main/java/com/orange/ouds/theme/tokens/OudsSpacingKeyTokens.kt deleted file mode 100644 index 505dd368..00000000 --- a/theme-contract/src/main/java/com/orange/ouds/theme/tokens/OudsSpacingKeyTokens.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 OudsSpacingFixedKeyToken { - None, - Smash, - Shortest, - Shorter, - Short, - Medium, - Tall, - Taller, - Tallest, - Spacious, - Huge, - Jumbo -} - -enum class OudsSpacingScaledKeyToken { - None, - Smash, - Shortest, - Shorter, - Short, - Medium, - Tall, - Taller, - Tallest, - Spacious -} - -enum class OudsSpacingPaddingInlineKeyToken { - 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 OudsSpacingPaddingBlockKeyToken { - None, - Shorter, - Short, - Medium, - Tall, - Taller, - Tallest, - WithIconNone, - WithIconShortest, - WithIconShorter, - WithIconShort, - WithIconMedium, - WithIconTall, - WithIconTaller, -} - -enum class OudsSpacingInsetKeyToken { - None, - Smash, - Shortest, - Shorter, - Short, - Medium, - Tall, - Taller, - Tallest, - Spacious, -} - -enum class OudsSpacingColumnGapKeyToken { - None, - Shorter, - Short, - Medium, - Tall, - Taller, - WithIconNone, - WithIconShortest, - WithIconShorter, - WithIconShort, - WithIconMedium, - WithIconTall, - WithArrowNone, - WithArrowShortest, - WithArrowShorter, - WithArrowShort, - WithArrowMedium, - WithArrowTall, -} - -enum class OudsSpacingRowGapKeyToken { - 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 afc4d8bc..7a8d09f6 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.OudsBorderRadiusKeyToken import com.orange.ouds.theme.tokens.OudsElevationKeyToken -import com.orange.ouds.theme.tokens.OudsSpacingFixedKeyToken +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: OudsSpacingFixedKeyToken = OudsSpacingFixedKeyToken.Smash, - val horizontalContentPadding: OudsSpacingFixedKeyToken = OudsSpacingFixedKeyToken.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-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 fbbdbbf3..43bd9a4c 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.OudsBorderRadiusKeyToken import com.orange.ouds.theme.tokens.OudsElevationKeyToken -import com.orange.ouds.theme.tokens.OudsSpacingFixedKeyToken +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 = OudsSpacingFixedKeyToken.Shortest, - horizontalContentPadding = OudsSpacingFixedKeyToken.Short + verticalContentPadding = OudsSpaceKeyToken.Fixed.Shortest, + horizontalContentPadding = OudsSpaceKeyToken.Fixed.Short ) ) }