Skip to content

Commit

Permalink
Split color tokens keys in several enums
Browse files Browse the repository at this point in the history
  • Loading branch information
paulinea committed Oct 24, 2024
1 parent 9b7af14 commit 68d9e43
Show file tree
Hide file tree
Showing 15 changed files with 615 additions and 455 deletions.
4 changes: 2 additions & 2 deletions app/src/main/java/com/orange/ouds/app/ui/MainScreen.kt
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.OudsColorKeyToken
import com.orange.ouds.theme.tokens.OudsColorBackgroundKeyToken
import com.orange.ouds.theme.tokens.OudsSpaceFixedKeyToken
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(OudsColorKeyToken.BgSecondary.value)
.background(OudsColorBackgroundKeyToken.Secondary.value)
.selectableGroup()
) {
Text(
Expand Down
6 changes: 3 additions & 3 deletions app/src/main/java/com/orange/ouds/app/ui/TopBar.kt
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.OudsColorKeyToken
import com.orange.ouds.theme.tokens.OudsColorContentKeyToken
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(OudsColorKeyToken.ContentDefault.value)
colorFilter = ColorFilter.tint(OudsColorContentKeyToken.Default.value)
)
}
}
},
title = {
Text(
text = title,
color = OudsColorKeyToken.ContentDefault.value,
color = OudsColorContentKeyToken.Default.value,
modifier = Modifier.semantics { traversalIndex = -1f },
style = OudsTypographyKeyToken.HeadingMedium.value
)
Expand Down
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.OudsColorKeyToken
import com.orange.ouds.theme.tokens.OudsColorBackgroundKeyToken
import com.orange.ouds.theme.tokens.OudsGridKeyToken
import com.orange.ouds.theme.tokens.OudsSpaceFixedKeyToken

Expand All @@ -51,7 +51,7 @@ fun ComponentsScreen() {
.padding(top = OudsSpaceFixedKeyToken.Medium.value)
.width(OudsGridKeyToken.Margin.value)
.height(OudsGridKeyToken.ColumnGap.value)
.background(OudsColorKeyToken.BgBrandPrimary.value)
.background(OudsColorBackgroundKeyToken.BrandPrimary.value)
)
}
}
Expand Down
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.OudsColorKeyToken
import com.orange.ouds.theme.tokens.OudsColorContentKeyToken
import com.orange.ouds.theme.tokens.OudsSpaceFixedKeyToken
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 = OudsColorKeyToken.ContentMuted.value
color = OudsColorContentKeyToken.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 = OudsColorKeyToken.ContentMuted.value)
style = OudsTypographyKeyToken.BodyDefaultMedium.value.copy(color = OudsColorContentKeyToken.Muted.value)
)
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ import com.orange.ouds.theme.OudsBorderStyle
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.OudsColorKeyToken
import com.orange.ouds.theme.tokens.OudsColorBackgroundKeyToken
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 @@ -86,7 +86,7 @@ sealed class TokenProperty(
@Composable
fun Illustration(elevation: Dp) {
Surface(shadowElevation = elevation) {
IllustrationBox(backgroundColor = OudsColorKeyToken.BgSecondary.value)
IllustrationBox(backgroundColor = OudsColorBackgroundKeyToken.Secondary.value)
}
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,15 +40,17 @@ 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.OudsColorKeyToken
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

private val defaultIllustrationSize = 64.dp

@Composable
fun IllustrationBox(
modifier: Modifier = Modifier,
backgroundColor: Color = OudsColorKeyToken.BgEmphasized.value,
backgroundColor: Color = OudsColorBackgroundKeyToken.Emphasized.value,
contentAlignment: Alignment = Alignment.TopStart,
content: @Composable BoxScope.() -> Unit = { }
) {
Expand All @@ -68,14 +70,14 @@ fun BorderIllustrationBox(
shape: Shape = RectangleShape,
style: OudsBorderStyle = OudsBorderStyle.Solid
) {
val borderColor = OudsColorKeyToken.ContentDefault.value
val borderColor = OudsColorContentKeyToken.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 = OudsColorKeyToken.BgSecondary.value)
IllustrationBox(modifier = modifier, backgroundColor = OudsColorBackgroundKeyToken.Secondary.value)
}

@Composable
Expand All @@ -95,7 +97,7 @@ fun SpaceIllustrationBox(
}
IllustrationBox(contentAlignment = contentAlignment) {
Box(
modifier = dimensionBoxModifier.background(color = OudsColorKeyToken.AlwaysInfo.value)
modifier = dimensionBoxModifier.background(color = OudsColorAlwaysKeyToken.Info.value)
)
}
}
Expand All @@ -114,14 +116,14 @@ fun SpacePaddingInlineWithImageIllustrationRow(
Row(
modifier = modifier
.size(defaultIllustrationSize)
.background(color = OudsColorKeyToken.BgEmphasized.value),
.background(color = OudsColorBackgroundKeyToken.Emphasized.value),
verticalAlignment = Alignment.CenterVertically
) {
Box(
modifier = Modifier
.fillMaxHeight()
.width(width = spaceSize)
.background(color = OudsColorKeyToken.AlwaysInfo.value)
.background(color = OudsColorAlwaysKeyToken.Info.value)
)
Image(
modifier = imageModifier,
Expand All @@ -138,7 +140,7 @@ fun GridIllustrations() {
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = OudsSpaceFixedKeyToken.Medium.value)
.background(OudsColorKeyToken.BgEmphasized.value),
.background(OudsColorBackgroundKeyToken.Emphasized.value),
painter = painterResource(id = R.drawable.il_tokens_grid_column_margin),
contentDescription = null
)
Expand All @@ -147,7 +149,7 @@ fun GridIllustrations() {
.fillMaxWidth()
.padding(horizontal = OudsSpaceFixedKeyToken.Medium.value)
.padding(top = OudsSpaceFixedKeyToken.Medium.value)
.background(OudsColorKeyToken.BgEmphasized.value),
.background(OudsColorBackgroundKeyToken.Emphasized.value),
painter = painterResource(id = R.drawable.il_tokens_grid_min_width),
contentDescription = null
)
Expand All @@ -156,7 +158,7 @@ fun GridIllustrations() {
.fillMaxWidth()
.padding(horizontal = OudsSpaceFixedKeyToken.Medium.value)
.padding(top = OudsSpaceFixedKeyToken.Medium.value)
.background(OudsColorKeyToken.BgEmphasized.value),
.background(OudsColorBackgroundKeyToken.Emphasized.value),
painter = painterResource(id = R.drawable.il_tokens_grid_max_width),
contentDescription = null
)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -32,9 +32,10 @@ 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.OudsSpaceFixedKeyToken
import com.orange.ouds.theme.tokens.OudsTypographyKeyToken
import com.orange.ouds.theme.tokens.OudsColorKeyToken

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

Expand All @@ -68,7 +69,7 @@ private fun DetailScreenDescription(
Text(
modifier = modifier,
text = stringResource(descriptionRes),
color = OudsColorKeyToken.ContentDefault.value,
color = OudsColorContentKeyToken.Default.value,
style = OudsTypographyKeyToken.BodyDefaultLarge.value
)
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@ import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults.cardElevation
import androidx.compose.material3.CardElevation
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
Expand All @@ -35,10 +34,12 @@ 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.OudsElevationKeyToken
import com.orange.ouds.theme.tokens.OudsSpaceFixedKeyToken
import com.orange.ouds.theme.tokens.OudsTypographyKeyToken
import com.orange.ouds.theme.tokens.OudsColorKeyToken
import com.orange.ouds.theme.tokens.OudsElevationKeyToken

/**
* Temporary large card used by the demo app
Expand All @@ -51,23 +52,23 @@ fun LargeCard(
modifier: Modifier = Modifier,
) {
Card(modifier = modifier, shape = RectangleShape, elevation = cardElevation(defaultElevation = OudsElevationKeyToken.Raised.value), onClick = onClick) {
Column(modifier = Modifier.background(OudsColorKeyToken.ElevationRaised.value)) {
Column(modifier = Modifier.background(OudsColorElevationKeyToken.Raised.value)) {
Image(
painter = painterResource(imageRes),
colorFilter = ColorFilter.tint(OudsColorKeyToken.ContentDefaultOnBgEmphasized.value),
colorFilter = ColorFilter.tint(OudsColorContentKeyToken.DefaultOnBgEmphasized.value),
contentDescription = null,
modifier = Modifier
.fillMaxWidth()
.height(184.dp) //TODO use token when available
.background(OudsColorKeyToken.BgEmphasized.value),
.height(184.dp)
.background(OudsColorBackgroundKeyToken.Emphasized.value),
contentScale = ContentScale.None
)
Column(
modifier = Modifier.padding(OudsSpaceFixedKeyToken.Medium.value)
) {
Text(
text = title,
color = OudsColorKeyToken.ContentDefault.value,
color = OudsColorContentKeyToken.Default.value,
overflow = TextOverflow.Ellipsis,
maxLines = 1,
style = OudsTypographyKeyToken.HeadingMedium.value
Expand Down
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.OudsColorKeyToken
import com.orange.ouds.theme.tokens.OudsColorBackgroundKeyToken

@Composable
fun Screen(content: @Composable () -> Unit) {
Box(
modifier = Modifier
.fillMaxSize()
.background(OudsColorKeyToken.BgPrimary.value)
.background(OudsColorBackgroundKeyToken.Primary.value)
) {
content()
}
Expand Down
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.OudsColorKeyToken
import com.orange.ouds.theme.tokens.OudsColorContentKeyToken

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

0 comments on commit 68d9e43

Please sign in to comment.