Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add color tokens #152

Draft
wants to merge 33 commits into
base: develop
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
33 commits
Select commit Hold shift + click to select a range
4384ce7
Add border tokens in the demo app
paulinea Oct 16, 2024
6a862e3
Review: Change dashedBorder modifier signature
paulinea Oct 17, 2024
5d0f34a
Review: Move defaultIllustrationSize variable in the companion object…
paulinea Oct 17, 2024
c81a14b
Add ic_spacing icon
paulinea Oct 17, 2024
858ae97
Start adding dimension tokens in demo app
paulinea Oct 18, 2024
8254ed5
Fix subcategories detail display
paulinea Oct 18, 2024
457a2b6
Reorder OudsSizeIconWithTextKeyToken
paulinea Oct 21, 2024
378812b
Display dimension size tokens
paulinea Oct 21, 2024
1d6cbcd
Display all spacing tokens in the demo app
paulinea Oct 21, 2024
3da3c0d
Apply filter before calling private composable
paulinea Oct 22, 2024
057b1c7
Reorder properties
paulinea Oct 22, 2024
a04f3d3
Update illustrations for spacing inline with icon
paulinea Oct 22, 2024
0b22f2b
Rename spacing into space
paulinea Oct 23, 2024
7f91d84
Rename strings
paulinea Oct 23, 2024
9b76204
Add WithArrow tokens illustrations
paulinea Oct 23, 2024
b696f73
Replace hardcoded spaces by tokens
paulinea Oct 24, 2024
79ca7ab
Factorize some code
paulinea Oct 24, 2024
3776da3
Improve size and space key tokens organization
paulinea Oct 25, 2024
d42faf4
Start adding dimension tokens in demo app
paulinea Oct 18, 2024
2629b8e
Add grid icon
paulinea Oct 22, 2024
116c516
Display grid tokens in demo app
paulinea Oct 22, 2024
cb5932d
Add grid illustrations
paulinea Oct 22, 2024
45db7e5
Replace Spacing by Space
paulinea Oct 23, 2024
f02c08f
Add header
paulinea Oct 24, 2024
d846e48
Move grid illustrations in TokenPropertyIllustration file
paulinea Oct 24, 2024
7fabe55
Fix broken build during rebase
paulinea Oct 25, 2024
133e5cb
Add grid illustrations
paulinea Oct 22, 2024
ae85afa
Add color tokens to the library and use them in the demo app
paulinea Oct 23, 2024
b1891e8
Split color semantic tokens file in several files
paulinea Oct 23, 2024
5fa3502
Fix colors to match demo app design
paulinea Oct 24, 2024
4d1a863
Update paparazzi snapshots
paulinea Oct 24, 2024
ee0f866
Split color tokens keys in several enums
paulinea Oct 24, 2024
f6ee355
Improve color key tokens organization
paulinea Oct 25, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion app/src/main/java/com/orange/ouds/app/ui/MainScreen.kt
Original file line number Diff line number Diff line change
Expand Up @@ -57,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.OudsColorKeyToken
import com.orange.ouds.theme.tokens.OudsSpaceKeyToken
import com.orange.ouds.theme.whitelabel.WhiteLabelTheme

Expand Down Expand Up @@ -154,7 +155,7 @@ private fun ChangeThemeDialog(themeManager: ThemeManager, dismissDialog: () -> U
Dialog(onDismissRequest = dismissDialog) {
Column(
modifier = Modifier
.background(OudsTheme.colorScheme.surfaceVariant)
.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
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,8 @@ 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.OudsTypographyKeyToken
import com.orange.ouds.theme.tokens.semantic.OudsColorKeyToken


@Composable
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.OnSurface.value) //TODO use ContentDefault token when available
colorFilter = ColorFilter.tint(OudsColorKeyToken.Content.Default.value)
)
}
}
},
title = {
Text(
text = title,
color = OudsColorKeyToken.OnSurface.value, //TODO use ContentDefault token when available
color = OudsColorKeyToken.Content.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 @@ -27,19 +27,18 @@ import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.orange.ouds.app.ui.utilities.composable.Screen
import com.orange.ouds.core.component.button.OudsButton
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.utilities.UiModePreviews
import com.orange.ouds.theme.tokens.OudsColorKeyToken
import com.orange.ouds.theme.tokens.OudsGridKeyToken
import com.orange.ouds.theme.tokens.OudsSpaceKeyToken

@Composable
fun ComponentsScreen() {
Screen {
Column(
modifier = Modifier
.fillMaxSize(),
modifier = Modifier.fillMaxSize(),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
Expand All @@ -52,7 +51,7 @@ fun ComponentsScreen() {
.padding(top = OudsSpaceKeyToken.Fixed.Medium.value)
.width(OudsGridKeyToken.Margin.value)
.height(OudsGridKeyToken.ColumnGap.value)
.background(OudsTheme.colorScheme.primary)
.background(OudsColorKeyToken.Background.BrandPrimary.value)
)
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,9 +40,9 @@ 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.OudsSpaceKeyToken
import com.orange.ouds.theme.tokens.OudsTypographyKeyToken
import com.orange.ouds.theme.tokens.semantic.OudsColorKeyToken

@Composable
fun TokenCategoryDetailScreen(tokenCategory: TokenCategory, onSubcategoryClick: (Long) -> Unit) {
Expand Down Expand Up @@ -109,7 +109,7 @@ fun TokenCategoryDetailScreen(tokenCategory: TokenCategory, onSubcategoryClick:
maxLines = 1,
overflow = TextOverflow.Ellipsis,
style = OudsTypographyKeyToken.BodyDefaultMedium.value,
color = OudsColorKeyToken.OnSurfaceVariant.value //TODO use ContentMuted token when available
color = OudsColorKeyToken.Content.Muted.value
)
}
} else {
Expand Down Expand Up @@ -143,8 +143,7 @@ fun TokenCategoryDetailScreen(tokenCategory: TokenCategory, onSubcategoryClick:
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
style = OudsTypographyKeyToken.BodyDefaultMedium.value.copy(color = OudsColorKeyToken.Content.Muted.value)
)
}
}
Expand Down
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are some TODOs left in this file.

Original file line number Diff line number Diff line change
Expand Up @@ -43,13 +43,13 @@ 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.OudsColorKeyToken
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?,
Expand Down Expand Up @@ -77,7 +77,7 @@ sealed class TokenProperty(
@Composable
fun Illustration(elevation: Dp) {
Surface(shadowElevation = elevation) {
IllustrationBox(backgroundColor = OudsColorKeyToken.Surface.value) //TODO use BgDefaultSecondary token when available
IllustrationBox(backgroundColor = OudsColorKeyToken.Background.Secondary.value)
}
}
}
Expand Down Expand Up @@ -106,7 +106,7 @@ sealed class TokenProperty(
}
}
}

data object SizeIconDecorative : TokenProperty(
nameRes = R.string.app_tokens_dimension_size_iconDecorative_label,
tokens = { OudsSizeKeyToken.IconDecorative.entries.map { Token(it.name, it.value) } }
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,15 +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.OudsColorKeyToken
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,
backgroundColor: Color = OudsColorKeyToken.Background.Emphasized.value,
contentAlignment: Alignment = Alignment.TopStart,
content: @Composable BoxScope.() -> Unit = { }
) {
Expand All @@ -68,14 +68,14 @@ fun BorderIllustrationBox(
shape: Shape = RectangleShape,
style: OudsBorderStyle = OudsBorderStyle.Solid
) {
val borderColor = OudsColorKeyToken.OnSurface.value //TODO use ContentDefault token when available
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 = Color.Transparent)
IllustrationBox(modifier = modifier, backgroundColor = OudsColorKeyToken.Background.Secondary.value)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is an issue with the pill radius background because it is not clipped to the border:

Screenshot_20241030_154034

Here is the fix:

Suggested change
IllustrationBox(modifier = modifier, backgroundColor = OudsColorKeyToken.Background.Secondary.value)
IllustrationBox(modifier = modifier.clip(shape), backgroundColor = OudsColorKeyToken.Background.Secondary.value)

}

@Composable
Expand All @@ -95,7 +95,7 @@ fun SpaceIllustrationBox(
}
IllustrationBox(contentAlignment = contentAlignment) {
Box(
modifier = dimensionBoxModifier.background(Color(0xFF26B2FF)) //TODO use AlwaysInfo token when available
modifier = dimensionBoxModifier.background(color = OudsColorKeyToken.Always.Info.value)
)
}
}
Expand All @@ -114,14 +114,14 @@ fun SpacePaddingInlineWithImageIllustrationRow(
Row(
modifier = modifier
.size(defaultIllustrationSize)
.background(color = OudsColorKeyToken.OnSurface.value), //TODO use BgEmphasizedPrimary token when available
.background(color = OudsColorKeyToken.Background.Emphasized.value),
verticalAlignment = Alignment.CenterVertically
) {
Box(
modifier = Modifier
.fillMaxHeight()
.width(width = spaceSize)
.background(Color(0xFF26B2FF)) //TODO use AlwaysInfo token when available
.background(color = OudsColorKeyToken.Always.Info.value)
)
Image(
modifier = imageModifier,
Expand All @@ -138,7 +138,7 @@ fun GridIllustrations() {
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = OudsSpaceKeyToken.Fixed.Medium.value)
.background(OudsColorKeyToken.OnSurface.value), //TODO use BgEmphasizedPrimary token when available
.background(OudsColorKeyToken.Background.Emphasized.value),
painter = painterResource(id = R.drawable.il_tokens_grid_column_margin),
contentDescription = null
)
Expand All @@ -147,7 +147,7 @@ fun GridIllustrations() {
.fillMaxWidth()
.padding(horizontal = OudsSpaceKeyToken.Fixed.Medium.value)
.padding(top = OudsSpaceKeyToken.Fixed.Medium.value)
.background(OudsColorKeyToken.OnSurface.value), //TODO use BgEmphasizedPrimary token when available
.background(OudsColorKeyToken.Background.Emphasized.value),
painter = painterResource(id = R.drawable.il_tokens_grid_min_width),
contentDescription = null
)
Expand All @@ -156,7 +156,7 @@ fun GridIllustrations() {
.fillMaxWidth()
.padding(horizontal = OudsSpaceKeyToken.Fixed.Medium.value)
.padding(top = OudsSpaceKeyToken.Fixed.Medium.value)
.background(OudsColorKeyToken.OnSurface.value), //TODO use BgEmphasizedPrimary token when available
.background(OudsColorKeyToken.Background.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,9 @@ 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.OudsColorKeyToken
import com.orange.ouds.theme.tokens.OudsSpaceKeyToken
import com.orange.ouds.theme.tokens.OudsTypographyKeyToken
import com.orange.ouds.theme.tokens.semantic.OudsColorKeyToken

@Composable
fun DetailScreenHeader(
Expand All @@ -44,12 +44,12 @@ fun DetailScreenHeader(
Column {
Image(
painter = painterResource(imageRes),
colorFilter = ColorFilter.tint(OudsColorKeyToken.InverseOnSurface.value), //TODO use OnBgEmphasized token when available
colorFilter = ColorFilter.tint(OudsColorKeyToken.Content.DefaultOnBgEmphasized.value),
contentDescription = null,
modifier = Modifier
.fillMaxWidth()
.height(186.dp)
.background(OudsColorKeyToken.OnSurface.value), //TODO use BgEmphasizedPrimary token when available
.background(OudsColorKeyToken.Background.Emphasized.value),
contentScale = ContentScale.None
)

Expand All @@ -68,7 +68,7 @@ private fun DetailScreenDescription(
Text(
modifier = modifier,
text = stringResource(descriptionRes),
color = OudsColorKeyToken.OnSurface.value, //TODO use ContentDefault token when available
color = OudsColorKeyToken.Content.Default.value,
style = OudsTypographyKeyToken.BodyDefaultLarge.value
)
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,12 @@ import androidx.compose.foundation.layout.fillMaxWidth
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.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.graphics.RectangleShape
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.style.TextOverflow
Expand All @@ -32,9 +34,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.OudsColorKeyToken
import com.orange.ouds.theme.tokens.OudsElevationKeyToken
import com.orange.ouds.theme.tokens.OudsSpaceKeyToken
import com.orange.ouds.theme.tokens.OudsTypographyKeyToken
import com.orange.ouds.theme.tokens.semantic.OudsColorKeyToken

/**
* Temporary large card used by the demo app
Expand All @@ -46,24 +49,24 @@ fun LargeCard(
onClick: () -> Unit,
modifier: Modifier = Modifier,
) {
Card(modifier = modifier, onClick = onClick) {
Column {
Card(modifier = modifier, shape = RectangleShape, elevation = cardElevation(defaultElevation = OudsElevationKeyToken.Raised.value), onClick = onClick) {
Column(modifier = Modifier.background(OudsColorKeyToken.Elevation.Raised.value)) {
Image(
painter = painterResource(imageRes),
colorFilter = ColorFilter.tint(OudsColorKeyToken.InverseOnSurface.value), //TODO use OnBgEmphasized token when available
colorFilter = ColorFilter.tint(OudsColorKeyToken.Content.DefaultOnBgEmphasized.value),
contentDescription = null,
modifier = Modifier
.fillMaxWidth()
.height(184.dp) //TODO use token when available
.background(OudsColorKeyToken.OnSurface.value), //TODO use BgEmphasizedPrimary token when available
.height(184.dp)
.background(OudsColorKeyToken.Background.Emphasized.value),
contentScale = ContentScale.None
)
Column(
modifier = Modifier.padding(OudsSpaceKeyToken.Fixed.Medium.value)
) {
Text(
text = title,
color = OudsColorKeyToken.OnSurface.value, //TODO use ContentDefault token when available
color = OudsColorKeyToken.Content.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.semantic.OudsColorKeyToken
import com.orange.ouds.theme.tokens.OudsColorKeyToken

@Composable
fun Screen(content: @Composable () -> Unit) {
Box(
modifier = Modifier
.fillMaxSize()
.background(OudsColorKeyToken.Background.value) //TODO use BgDefaultPrimary token when available
.background(OudsColorKeyToken.Background.Primary.value)
) {
content()
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +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

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