Skip to content

Commit

Permalink
Improve color key tokens organization
Browse files Browse the repository at this point in the history
  • Loading branch information
@paulinea
paulinea committed Oct 25, 2024
1 parent a40a960 commit 6b1a29b
Show file tree
Hide file tree
Showing 15 changed files with 495 additions and 509 deletions.
4 changes: 2 additions & 2 deletions app/src/main/java/com/orange/ouds/app/ui/MainScreen.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ import com.orange.ouds.theme.OudsThemeContract
import com.orange.ouds.theme.orange.ORANGE_THEME_NAME
import com.orange.ouds.theme.orange.OrangeTheme
import com.orange.ouds.theme.orangecountry.OrangeCountryTheme
import com.orange.ouds.theme.tokens.OudsColorBackgroundKeyToken
import com.orange.ouds.theme.tokens.OudsColorKeyToken
import com.orange.ouds.theme.tokens.OudsSpaceKeyToken
import com.orange.ouds.theme.whitelabel.WhiteLabelTheme

Expand Down Expand Up @@ -155,7 +155,7 @@ private fun ChangeThemeDialog(themeManager: ThemeManager, dismissDialog: () -> U
Dialog(onDismissRequest = dismissDialog) {
Column(
modifier = Modifier
.background(OudsColorBackgroundKeyToken.Secondary.value)
.background(OudsColorKeyToken.Background.Secondary.value)
.selectableGroup()
) {
Text(
Expand Down
6 changes: 3 additions & 3 deletions app/src/main/java/com/orange/ouds/app/ui/TopBar.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ import com.orange.ouds.app.ui.utilities.isDarkModeEnabled
import com.orange.ouds.core.theme.value
import com.orange.ouds.core.utilities.OudsPreview
import com.orange.ouds.foundation.utilities.UiModePreviews
import com.orange.ouds.theme.tokens.OudsColorContentKeyToken
import com.orange.ouds.theme.tokens.OudsColorKeyToken
import com.orange.ouds.theme.tokens.OudsTypographyKeyToken


Expand Down Expand Up @@ -70,15 +70,15 @@ private fun TopBar(
Image(
imageVector = Icons.AutoMirrored.Filled.ArrowBack,
contentDescription = stringResource(id = R.string.app_common_back_a11y),
colorFilter = ColorFilter.tint(OudsColorContentKeyToken.Default.value)
colorFilter = ColorFilter.tint(OudsColorKeyToken.Content.Default.value)
)
}
}
},
title = {
Text(
text = title,
color = OudsColorContentKeyToken.Default.value,
color = OudsColorKeyToken.Content.Default.value,
modifier = Modifier.semantics { traversalIndex = -1f },
style = OudsTypographyKeyToken.HeadingMedium.value
)
Expand Down
4 changes: 2 additions & 2 deletions app/src/main/java/com/orange/ouds/app/ui/components/ComponentsScreen.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ import com.orange.ouds.core.component.button.OudsButton
import com.orange.ouds.core.theme.value
import com.orange.ouds.core.utilities.OudsPreview
import com.orange.ouds.foundation.utilities.UiModePreviews
import com.orange.ouds.theme.tokens.OudsColorBackgroundKeyToken
import com.orange.ouds.theme.tokens.OudsColorKeyToken
import com.orange.ouds.theme.tokens.OudsGridKeyToken
import com.orange.ouds.theme.tokens.OudsSpaceKeyToken

Expand All @@ -51,7 +51,7 @@ fun ComponentsScreen() {
.padding(top = OudsSpaceKeyToken.Fixed.Medium.value)
.width(OudsGridKeyToken.Margin.value)
.height(OudsGridKeyToken.ColumnGap.value)
.background(OudsColorBackgroundKeyToken.BrandPrimary.value)
.background(OudsColorKeyToken.Background.BrandPrimary.value)
)
}
}
Expand Down
6 changes: 3 additions & 3 deletions app/src/main/java/com/orange/ouds/app/ui/tokens/TokenCategoryDetailScreen.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ import com.orange.ouds.core.utilities.OudsPreview
import com.orange.ouds.foundation.utilities.BasicPreviewParameterProvider
import com.orange.ouds.foundation.utilities.UiModePreviews
import com.orange.ouds.theme.OudsBorderStyle
import com.orange.ouds.theme.tokens.OudsColorContentKeyToken
import com.orange.ouds.theme.tokens.OudsColorKeyToken
import com.orange.ouds.theme.tokens.OudsSpaceKeyToken
import com.orange.ouds.theme.tokens.OudsTypographyKeyToken

Expand Down Expand Up @@ -109,7 +109,7 @@ fun TokenCategoryDetailScreen(tokenCategory: TokenCategory, onSubcategoryClick:
maxLines = 1,
overflow = TextOverflow.Ellipsis,
style = OudsTypographyKeyToken.BodyDefaultMedium.value,
color = OudsColorContentKeyToken.Muted.value
color = OudsColorKeyToken.Content.Muted.value
)
}
} else {
Expand Down Expand Up @@ -143,7 +143,7 @@ fun TokenCategoryDetailScreen(tokenCategory: TokenCategory, onSubcategoryClick:
text = token.literalValue,
maxLines = 1,
overflow = TextOverflow.Ellipsis,
style = OudsTypographyKeyToken.BodyDefaultMedium.value.copy(color = OudsColorContentKeyToken.Muted.value)
style = OudsTypographyKeyToken.BodyDefaultMedium.value.copy(color = OudsColorKeyToken.Content.Muted.value)
)
}
}
Expand Down
4 changes: 2 additions & 2 deletions app/src/main/java/com/orange/ouds/app/ui/tokens/TokenProperty.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ import com.orange.ouds.foundation.extensions.orElse
import com.orange.ouds.theme.tokens.OudsBorderRadiusKeyToken
import com.orange.ouds.theme.tokens.OudsBorderStyleKeyToken
import com.orange.ouds.theme.tokens.OudsBorderWidthKeyToken
import com.orange.ouds.theme.tokens.OudsColorBackgroundKeyToken
import com.orange.ouds.theme.tokens.OudsColorKeyToken
import com.orange.ouds.theme.tokens.OudsElevationKeyToken
import com.orange.ouds.theme.tokens.OudsGridKeyToken
import com.orange.ouds.theme.tokens.OudsOpacityKeyToken
Expand Down Expand Up @@ -77,7 +77,7 @@ sealed class TokenProperty(
@Composable
fun Illustration(elevation: Dp) {
Surface(shadowElevation = elevation) {
IllustrationBox(backgroundColor = OudsColorBackgroundKeyToken.Secondary.value)
IllustrationBox(backgroundColor = OudsColorKeyToken.Background.Secondary.value)
}
}
}
Expand Down
34 changes: 16 additions & 18 deletions app/src/main/java/com/orange/ouds/app/ui/tokens/TokenPropertyIllustration.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,17 +40,15 @@ import com.orange.ouds.core.theme.value
import com.orange.ouds.theme.OudsBorderStyle
import com.orange.ouds.theme.dashedBorder
import com.orange.ouds.theme.dottedBorder
import com.orange.ouds.theme.tokens.OudsColorAlwaysKeyToken
import com.orange.ouds.theme.tokens.OudsColorBackgroundKeyToken
import com.orange.ouds.theme.tokens.OudsColorContentKeyToken
import com.orange.ouds.theme.tokens.OudsSpaceFixedKeyToken
import com.orange.ouds.theme.tokens.OudsColorKeyToken
import com.orange.ouds.theme.tokens.OudsSpaceKeyToken

private val defaultIllustrationSize = 64.dp

@Composable
fun IllustrationBox(
modifier: Modifier = Modifier,
backgroundColor: Color = OudsColorBackgroundKeyToken.Emphasized.value,
backgroundColor: Color = OudsColorKeyToken.Background.Emphasized.value,
contentAlignment: Alignment = Alignment.TopStart,
content: @Composable BoxScope.() -> Unit = { }
) {
Expand All @@ -70,14 +68,14 @@ fun BorderIllustrationBox(
shape: Shape = RectangleShape,
style: OudsBorderStyle = OudsBorderStyle.Solid
) {
val borderColor = OudsColorContentKeyToken.Default.value
val borderColor = OudsColorKeyToken.Content.Default.value
val modifier = when (style) {
OudsBorderStyle.None -> Modifier
OudsBorderStyle.Solid -> Modifier.border(width = width, color = borderColor, shape = shape)
OudsBorderStyle.Dashed -> Modifier.dashedBorder(width = width, color = borderColor, shape = shape)
OudsBorderStyle.Dotted -> Modifier.dottedBorder(width = width, color = borderColor, shape = shape)
}
IllustrationBox(modifier = modifier, backgroundColor = OudsColorBackgroundKeyToken.Secondary.value)
IllustrationBox(modifier = modifier, backgroundColor = OudsColorKeyToken.Background.Secondary.value)
}

@Composable
Expand All @@ -97,7 +95,7 @@ fun SpaceIllustrationBox(
}
IllustrationBox(contentAlignment = contentAlignment) {
Box(
modifier = dimensionBoxModifier.background(color = OudsColorAlwaysKeyToken.Info.value)
modifier = dimensionBoxModifier.background(color = OudsColorKeyToken.Always.Info.value)
)
}
}
Expand All @@ -116,14 +114,14 @@ fun SpacePaddingInlineWithImageIllustrationRow(
Row(
modifier = modifier
.size(defaultIllustrationSize)
.background(color = OudsColorBackgroundKeyToken.Emphasized.value),
.background(color = OudsColorKeyToken.Background.Emphasized.value),
verticalAlignment = Alignment.CenterVertically
) {
Box(
modifier = Modifier
.fillMaxHeight()
.width(width = spaceSize)
.background(color = OudsColorAlwaysKeyToken.Info.value)
.background(color = OudsColorKeyToken.Always.Info.value)
)
Image(
modifier = imageModifier,
Expand All @@ -139,26 +137,26 @@ fun GridIllustrations() {
Image(
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = OudsSpaceFixedKeyToken.Medium.value)
.background(OudsColorBackgroundKeyToken.Emphasized.value),
.padding(horizontal = OudsSpaceKeyToken.Fixed.Medium.value)
.background(OudsColorKeyToken.Background.Emphasized.value),
painter = painterResource(id = R.drawable.il_tokens_grid_column_margin),
contentDescription = null
)
Image(
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = OudsSpaceFixedKeyToken.Medium.value)
.padding(top = OudsSpaceFixedKeyToken.Medium.value)
.background(OudsColorBackgroundKeyToken.Emphasized.value),
.padding(horizontal = OudsSpaceKeyToken.Fixed.Medium.value)
.padding(top = OudsSpaceKeyToken.Fixed.Medium.value)
.background(OudsColorKeyToken.Background.Emphasized.value),
painter = painterResource(id = R.drawable.il_tokens_grid_min_width),
contentDescription = null
)
Image(
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = OudsSpaceFixedKeyToken.Medium.value)
.padding(top = OudsSpaceFixedKeyToken.Medium.value)
.background(OudsColorBackgroundKeyToken.Emphasized.value),
.padding(horizontal = OudsSpaceKeyToken.Fixed.Medium.value)
.padding(top = OudsSpaceKeyToken.Fixed.Medium.value)
.background(OudsColorKeyToken.Background.Emphasized.value),
painter = painterResource(id = R.drawable.il_tokens_grid_max_width),
contentDescription = null
)
Expand Down
9 changes: 4 additions & 5 deletions app/src/main/java/com/orange/ouds/app/ui/utilities/composable/DetailScreenHeader.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,7 @@ import com.orange.ouds.app.R
import com.orange.ouds.core.theme.value
import com.orange.ouds.core.utilities.OudsPreview
import com.orange.ouds.foundation.utilities.UiModePreviews
import com.orange.ouds.theme.tokens.OudsColorBackgroundKeyToken
import com.orange.ouds.theme.tokens.OudsColorContentKeyToken
import com.orange.ouds.theme.tokens.OudsColorKeyToken
import com.orange.ouds.theme.tokens.OudsSpaceKeyToken
import com.orange.ouds.theme.tokens.OudsTypographyKeyToken

Expand All @@ -45,12 +44,12 @@ fun DetailScreenHeader(
Column {
Image(
painter = painterResource(imageRes),
colorFilter = ColorFilter.tint(OudsColorContentKeyToken.DefaultOnBgEmphasized.value),
colorFilter = ColorFilter.tint(OudsColorKeyToken.Content.DefaultOnBgEmphasized.value),
contentDescription = null,
modifier = Modifier
.fillMaxWidth()
.height(186.dp)
.background(OudsColorBackgroundKeyToken.Emphasized.value),
.background(OudsColorKeyToken.Background.Emphasized.value),
contentScale = ContentScale.None
)

Expand All @@ -69,7 +68,7 @@ private fun DetailScreenDescription(
Text(
modifier = modifier,
text = stringResource(descriptionRes),
color = OudsColorContentKeyToken.Default.value,
color = OudsColorKeyToken.Content.Default.value,
style = OudsTypographyKeyToken.BodyDefaultLarge.value
)
}
Expand Down
12 changes: 5 additions & 7 deletions app/src/main/java/com/orange/ouds/app/ui/utilities/composable/LargeCard.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,7 @@ import com.orange.ouds.app.R
import com.orange.ouds.core.theme.value
import com.orange.ouds.core.utilities.OudsPreview
import com.orange.ouds.foundation.utilities.UiModePreviews
import com.orange.ouds.theme.tokens.OudsColorBackgroundKeyToken
import com.orange.ouds.theme.tokens.OudsColorContentKeyToken
import com.orange.ouds.theme.tokens.OudsColorElevationKeyToken
import com.orange.ouds.theme.tokens.OudsColorKeyToken
import com.orange.ouds.theme.tokens.OudsElevationKeyToken
import com.orange.ouds.theme.tokens.OudsSpaceKeyToken
import com.orange.ouds.theme.tokens.OudsTypographyKeyToken
Expand All @@ -52,23 +50,23 @@ fun LargeCard(
modifier: Modifier = Modifier,
) {
Card(modifier = modifier, shape = RectangleShape, elevation = cardElevation(defaultElevation = OudsElevationKeyToken.Raised.value), onClick = onClick) {
Column(modifier = Modifier.background(OudsColorElevationKeyToken.Raised.value)) {
Column(modifier = Modifier.background(OudsColorKeyToken.Elevation.Raised.value)) {
Image(
painter = painterResource(imageRes),
colorFilter = ColorFilter.tint(OudsColorContentKeyToken.DefaultOnBgEmphasized.value),
colorFilter = ColorFilter.tint(OudsColorKeyToken.Content.DefaultOnBgEmphasized.value),
contentDescription = null,
modifier = Modifier
.fillMaxWidth()
.height(184.dp)
.background(OudsColorBackgroundKeyToken.Emphasized.value),
.background(OudsColorKeyToken.Background.Emphasized.value),
contentScale = ContentScale.None
)
Column(
modifier = Modifier.padding(OudsSpaceKeyToken.Fixed.Medium.value)
) {
Text(
text = title,
color = OudsColorContentKeyToken.Default.value,
color = OudsColorKeyToken.Content.Default.value,
overflow = TextOverflow.Ellipsis,
maxLines = 1,
style = OudsTypographyKeyToken.HeadingMedium.value
Expand Down
4 changes: 2 additions & 2 deletions app/src/main/java/com/orange/ouds/app/ui/utilities/composable/Screen.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,14 +20,14 @@ import androidx.compose.ui.Modifier
import com.orange.ouds.core.theme.value
import com.orange.ouds.core.utilities.OudsPreview
import com.orange.ouds.foundation.utilities.UiModePreviews
import com.orange.ouds.theme.tokens.OudsColorBackgroundKeyToken
import com.orange.ouds.theme.tokens.OudsColorKeyToken

@Composable
fun Screen(content: @Composable () -> Unit) {
Box(
modifier = Modifier
.fillMaxSize()
.background(OudsColorBackgroundKeyToken.Primary.value)
.background(OudsColorKeyToken.Background.Primary.value)
) {
content()
}
Expand Down
4 changes: 2 additions & 2 deletions core/src/main/java/com/orange/ouds/core/component/button/OudsButton.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ import com.orange.ouds.core.theme.value
import com.orange.ouds.core.utilities.OudsPreview
import com.orange.ouds.foundation.utilities.BasicPreviewParameterProvider
import com.orange.ouds.foundation.utilities.UiModePreviews
import com.orange.ouds.theme.tokens.OudsColorContentKeyToken
import com.orange.ouds.theme.tokens.OudsColorKeyToken

@Composable
fun OudsButton(
Expand Down Expand Up @@ -66,7 +66,7 @@ fun OudsButton(
modifier = modifier,
text = text,
style = labelStyle.value,
color = OudsColorContentKeyToken.OnActionPrimaryEnabled.value
color = OudsColorKeyToken.Content.OnActionPrimaryEnabled.value
)
}
}
Expand Down
Loading

0 comments on commit 6b1a29b

Please sign in to comment.