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.

Sign up for GitHub

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: create colored container component #242

Merged
merged 5 commits into from
Dec 31, 2024
Merged

feat: create colored container component #242

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
85793f2
Add OudsContrastedSurface
florentmaitre Dec 18, 2024
881a926
Refactor getTokens method now that OudsKeyToken exists
florentmaitre Dec 20, 2024
3370d24
Rename OudsContrastedSurface to OudsColoredBox
florentmaitre Dec 30, 2024
b062366
Review: Add sample for OudsColoredBox
florentmaitre Dec 31, 2024
0a2f571
Review: Add padding around OudsColoredBox previews to differentiate l…
florentmaitre Dec 31, 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
20 changes: 10 additions & 10 deletions app/src/main/java/com/orange/ouds/app/ui/tokens/TokenCategory.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,11 @@ import androidx.annotation.DrawableRes
import androidx.annotation.StringRes
import androidx.compose.runtime.Immutable
import com.orange.ouds.app.R
import com.orange.ouds.app.ui.utilities.getTokenName
import com.orange.ouds.theme.tokens.OudsBorderKeyToken
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.OudsKeyToken
import com.orange.ouds.theme.tokens.OudsOpacityKeyToken
import com.orange.ouds.theme.tokens.OudsSizeKeyToken
import com.orange.ouds.theme.tokens.OudsSpaceKeyToken
Expand Down Expand Up @@ -50,15 +50,15 @@ sealed class TokenCategory<T>(
R.string.app_tokens_border_label,
R.drawable.ic_border,
R.string.app_tokens_border_description_text,
getTokenValueCode<OudsBorderKeyToken.Width.None>(),
getTokenValueCode(OudsBorderKeyToken.Width.None),
listOf(TokenProperty.BorderWidth, TokenProperty.BorderRadius, TokenProperty.BorderStyle),
)

data object Color : TokenCategory<Color>(
R.string.app_tokens_color_label,
R.drawable.ic_palette,
R.string.app_tokens_color_description_text,
getTokenValueCode<OudsColorKeyToken.Action.Disabled>(),
getTokenValueCode(OudsColorKeyToken.Action.Disabled),
listOf(
TokenProperty.ColorAction,
TokenProperty.ColorAlways,
Expand All @@ -81,7 +81,7 @@ sealed class TokenCategory<T>(
R.string.app_tokens_dimension_space_label,
R.drawable.ic_dimension,
R.string.app_tokens_dimension_space_description_text,
getTokenValueCode<OudsSpaceKeyToken.Scaled.None>(),
getTokenValueCode(OudsSpaceKeyToken.Scaled.None),
listOf(
TokenProperty.SpaceScaled,
TokenProperty.SpaceFixed,
Expand All @@ -97,7 +97,7 @@ sealed class TokenCategory<T>(
R.string.app_tokens_dimension_size_label,
R.drawable.ic_dimension,
R.string.app_tokens_dimension_size_description_text,
getTokenValueCode<OudsSizeKeyToken.Icon.Decorative.ExtraExtraSmall>(),
getTokenValueCode(OudsSizeKeyToken.Icon.Decorative.ExtraExtraSmall),
listOf(TokenProperty.SizeIconDecorative, TokenProperty.SizeIconWithText),
)
}
Expand All @@ -106,33 +106,33 @@ sealed class TokenCategory<T>(
R.string.app_tokens_elevation_label,
R.drawable.ic_layers,
R.string.app_tokens_elevation_description_text,
getTokenValueCode<OudsElevationKeyToken.None>(),
getTokenValueCode(OudsElevationKeyToken.None),
listOf(TokenProperty.Elevation)
)

data object Grid : TokenCategory<Grid>(
R.string.app_tokens_grid_label,
R.drawable.ic_menu_grid,
R.string.app_tokens_grid_description_text,
getTokenValueCode<OudsGridKeyToken.MinWidth>(),
getTokenValueCode(OudsGridKeyToken.MinWidth),
listOf(TokenProperty.Grid)
)

data object Opacity : TokenCategory<Opacity>(
R.string.app_tokens_opacity_label,
R.drawable.ic_filter_effects,
R.string.app_tokens_opacity_description_text,
getTokenValueCode<OudsOpacityKeyToken.Invisible>(),
getTokenValueCode(OudsOpacityKeyToken.Invisible),
listOf(TokenProperty.Opacity)
)

data object Typography : TokenCategory<Typography>(
R.string.app_tokens_typography_label,
R.drawable.ic_typography,
R.string.app_tokens_typography_description_text,
getTokenValueCode<OudsTypographyKeyToken.Display.Large>(),
getTokenValueCode(OudsTypographyKeyToken.Display.Large),
listOf(TokenProperty.Typography)
)
}

private inline fun <reified T> getTokenValueCode() = "${T::class.getTokenName()}.value"
private fun getTokenValueCode(keyToken: OudsKeyToken) = "${keyToken.name}.value"
111 changes: 85 additions & 26 deletions app/src/main/java/com/orange/ouds/app/ui/tokens/TokenProperty.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,13 @@ package com.orange.ouds.app.ui.tokens

import androidx.annotation.StringRes
import com.orange.ouds.app.R
import com.orange.ouds.app.ui.utilities.getTokenName
import com.orange.ouds.app.ui.utilities.getTokens
import com.orange.ouds.app.ui.utilities.getSealedSubclasses
import com.orange.ouds.core.theme.value
import com.orange.ouds.theme.tokens.OudsBorderKeyToken
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.OudsKeyToken
import com.orange.ouds.theme.tokens.OudsOpacityKeyToken
import com.orange.ouds.theme.tokens.OudsSizeKeyToken
import com.orange.ouds.theme.tokens.OudsSpaceKeyToken
Expand All @@ -34,91 +35,91 @@ sealed class TokenProperty<T>(

data object BorderRadius : TokenProperty<TokenCategory.Border>(
nameRes = R.string.app_tokens_border_radius_label,
tokens = OudsBorderKeyToken.Radius::class.getTokens(),
tokens = getTokens<OudsBorderKeyToken.Radius>(),
categoryClass = TokenCategory.Border::class
)

data object BorderStyle : TokenProperty<TokenCategory.Border>(
nameRes = R.string.app_tokens_border_style_label,
tokens = OudsBorderKeyToken.Style::class.getTokens(),
tokens = getTokens<OudsBorderKeyToken.Style>(),
categoryClass = TokenCategory.Border::class
)

data object BorderWidth : TokenProperty<TokenCategory.Border>(
nameRes = R.string.app_tokens_border_width_label,
tokens = OudsBorderKeyToken.Width::class.getTokens(),
tokens = getTokens<OudsBorderKeyToken.Width>(),
categoryClass = TokenCategory.Border::class
)

data object ColorAction : TokenProperty<TokenCategory.Color>(
nameRes = R.string.app_tokens_color_action_label,
tokens = OudsColorKeyToken.Action::class.getTokens(),
tokens = getTokens<OudsColorKeyToken.Action>(),
categoryClass = TokenCategory.Color::class
)

data object ColorAlways : TokenProperty<TokenCategory.Color>(
nameRes = R.string.app_tokens_color_always_label,
tokens = OudsColorKeyToken.Always::class.getTokens(),
tokens = getTokens<OudsColorKeyToken.Always>(),
categoryClass = TokenCategory.Color::class
)

data object ColorBackground : TokenProperty<TokenCategory.Color>(
nameRes = R.string.app_tokens_color_background_label,
tokens = OudsColorKeyToken.Background::class.getTokens(),
tokens = getTokens<OudsColorKeyToken.Background>(),
categoryClass = TokenCategory.Color::class
)

data object ColorBorder : TokenProperty<TokenCategory.Color>(
nameRes = R.string.app_tokens_color_border_label,
tokens = OudsColorKeyToken.Border::class.getTokens(),
tokens = getTokens<OudsColorKeyToken.Border>(),
categoryClass = TokenCategory.Color::class
)

data object ColorContent : TokenProperty<TokenCategory.Color>(
nameRes = R.string.app_tokens_color_content_label,
tokens = OudsColorKeyToken.Content::class.getTokens(),
tokens = getTokens<OudsColorKeyToken.Content>(),
categoryClass = TokenCategory.Color::class
)

data object ColorDecorative : TokenProperty<TokenCategory.Color>(
nameRes = R.string.app_tokens_color_decorative_label,
tokens = OudsColorKeyToken.Decorative::class.getTokens(),
tokens = getTokens<OudsColorKeyToken.Decorative>(),
categoryClass = TokenCategory.Color::class
)

data object ColorOverlay : TokenProperty<TokenCategory.Color>(
nameRes = R.string.app_tokens_color_overlay_label,
tokens = OudsColorKeyToken.Overlay::class.getTokens(),
tokens = getTokens<OudsColorKeyToken.Overlay>(),
categoryClass = TokenCategory.Color::class
)

data object ColorSurface : TokenProperty<TokenCategory.Color>(
nameRes = R.string.app_tokens_color_surface_label,
tokens = OudsColorKeyToken.Surface::class.getTokens(),
tokens = getTokens<OudsColorKeyToken.Surface>(),
categoryClass = TokenCategory.Color::class
)

data object Elevation : TokenProperty<TokenCategory.Elevation>(
nameRes = null,
tokens = OudsElevationKeyToken::class.getTokens(),
tokens = getTokens<OudsElevationKeyToken>(),
categoryClass = TokenCategory.Elevation::class
)

data object Grid : TokenProperty<TokenCategory.Grid>(
nameRes = null,
tokens = OudsGridKeyToken::class.getTokens(),
tokens = getTokens<OudsGridKeyToken>(),
categoryClass = TokenCategory.Grid::class
)

data object Opacity : TokenProperty<TokenCategory.Opacity>(
nameRes = null,
tokens = OudsOpacityKeyToken::class.getTokens(),
tokens = getTokens<OudsOpacityKeyToken>(),
categoryClass = TokenCategory.Opacity::class
)

data object SizeIconDecorative : TokenProperty<TokenCategory.Dimension.Size>(
nameRes = R.string.app_tokens_dimension_size_iconDecorative_label,
tokens = OudsSizeKeyToken.Icon.Decorative::class.getTokens(),
tokens = getTokens<OudsSizeKeyToken.Icon.Decorative>(),
categoryClass = TokenCategory.Dimension.Size::class
)

Expand All @@ -137,60 +138,118 @@ sealed class TokenProperty<T>(
OudsSizeKeyToken.Icon.WithLabel.Medium::class,
OudsSizeKeyToken.Icon.WithLabel.Small::class,
).flatMap { keyTokenClass ->
keyTokenClass.getTokens(tokenName = { it.getTokenName(OudsSizeKeyToken.Icon::class).removePrefix("With") })
getTokens(keyTokenClass, tokenName = { it.getRelativeName(OudsSizeKeyToken.Icon::class).removePrefix("With") })
},
categoryClass = TokenCategory.Dimension.Size::class
)

data object SpaceColumnGap : TokenProperty<TokenCategory.Dimension.Space>(
nameRes = R.string.app_tokens_dimension_space_columnGap_label,
tokens = OudsSpaceKeyToken.ColumnGap::class.getTokens(recursive = false),
tokens = getTokens<OudsSpaceKeyToken.ColumnGap>(recursive = false),
categoryClass = TokenCategory.Dimension.Space::class
)

data object SpaceFixed : TokenProperty<TokenCategory.Dimension.Space>(
nameRes = R.string.app_tokens_dimension_space_fixed_label,
tokens = OudsSpaceKeyToken.Fixed::class.getTokens(),
tokens = getTokens<OudsSpaceKeyToken.Fixed>(),
categoryClass = TokenCategory.Dimension.Space::class
)

data object SpacePaddingInline : TokenProperty<TokenCategory.Dimension.Space>(
nameRes = R.string.app_tokens_dimension_space_paddingInline_label,
tokens = OudsSpaceKeyToken.PaddingInline::class.getTokens(recursive = false),
tokens = getTokens<OudsSpaceKeyToken.PaddingInline>(recursive = false),
categoryClass = TokenCategory.Dimension.Space::class
)

data object SpacePaddingInset : TokenProperty<TokenCategory.Dimension.Space>(
nameRes = R.string.app_tokens_dimension_space_paddingInset_label,
tokens = OudsSpaceKeyToken.Inset::class.getTokens(),
tokens = getTokens<OudsSpaceKeyToken.Inset>(),
categoryClass = TokenCategory.Dimension.Space::class
)

data object SpacePaddingStack : TokenProperty<TokenCategory.Dimension.Space>(
nameRes = R.string.app_tokens_dimension_space_paddingStack_label,
tokens = OudsSpaceKeyToken.PaddingBlock::class.getTokens(recursive = false),
tokens = getTokens<OudsSpaceKeyToken.PaddingBlock>(recursive = false),
categoryClass = TokenCategory.Dimension.Space::class
)

data object SpaceRowGap : TokenProperty<TokenCategory.Dimension.Space>(
nameRes = R.string.app_tokens_dimension_space_rowGap_label,
tokens = OudsSpaceKeyToken.RowGap::class.getTokens(recursive = false),
tokens = getTokens<OudsSpaceKeyToken.RowGap>(recursive = false),
categoryClass = TokenCategory.Dimension.Space::class
)

data object SpaceScaled : TokenProperty<TokenCategory.Dimension.Space>(
nameRes = R.string.app_tokens_dimension_space_scaled_label,
tokens = OudsSpaceKeyToken.Scaled::class.getTokens(),
tokens = getTokens<OudsSpaceKeyToken.Scaled>(),
categoryClass = TokenCategory.Dimension.Space::class
)

data object Typography : TokenProperty<TokenCategory.Typography>(
nameRes = null,
tokens = OudsTypographyKeyToken::class.getTokens(),
tokens = getTokens<OudsTypographyKeyToken>(),
categoryClass = TokenCategory.Typography::class
)
}

inline fun <reified T> getTokens(
recursive: Boolean = true,
noinline tokenName: (T) -> String = { it.getRelativeName(T::class) }
): List<Token<*>> where T : OudsKeyToken {
return getTokens(T::class, recursive, tokenName)
}

fun <T> getTokens(
clazz: KClass<T>,
recursive: Boolean = true,
tokenName: (T) -> String = { it.getRelativeName(clazz) }
): List<Token<*>> where T : OudsKeyToken {
return clazz.getSealedSubclasses(recursive)
.mapNotNull { it.objectInstance }
.sortedBy { keyToken ->
when (keyToken) {
is OudsBorderKeyToken.Radius -> keyToken.order
is OudsBorderKeyToken.Width -> keyToken.order
is OudsElevationKeyToken -> keyToken.order
is OudsOpacityKeyToken -> keyToken.order
is OudsSizeKeyToken.Icon -> keyToken.order
is OudsSpaceKeyToken.ColumnGap -> keyToken.order
is OudsSpaceKeyToken.Fixed -> keyToken.order
is OudsSpaceKeyToken.Inset -> keyToken.order
is OudsSpaceKeyToken.PaddingBlock -> keyToken.order
is OudsSpaceKeyToken.PaddingInline -> keyToken.order
is OudsSpaceKeyToken.RowGap -> keyToken.order
is OudsSpaceKeyToken.Scaled -> keyToken.order
else -> 0
}
}.map { keyToken ->
Token(
name = tokenName(keyToken),
value = {
when (keyToken) {
is OudsBorderKeyToken.Radius -> keyToken.value
is OudsBorderKeyToken.Style -> keyToken.value
is OudsBorderKeyToken.Width -> keyToken.value
is OudsColorKeyToken -> keyToken.value
is OudsElevationKeyToken -> keyToken.value
is OudsGridKeyToken -> keyToken.value
is OudsOpacityKeyToken -> keyToken.value
is OudsSizeKeyToken -> keyToken.value
is OudsSpaceKeyToken -> keyToken.value
is OudsTypographyKeyToken -> keyToken.value
else -> null
}
}
)
}
}

fun <T, S> T.getRelativeName(parent: KClass<S>): String where T : S, S : OudsKeyToken {
val parentPackageName = parent.java.`package`?.name.orEmpty()
val prefix = parent.qualifiedName.orEmpty().removePrefix("$parentPackageName.")
return name.removePrefix("$prefix.")
}

val OudsBorderKeyToken.Radius.order: Int
get() = when (this) {
OudsBorderKeyToken.Radius.None -> 0
Expand Down
3 changes: 1 addition & 2 deletions app/src/main/java/com/orange/ouds/app/ui/tokens/TokenPropertyIllustration.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,6 @@ 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.app.ui.utilities.getTokens
import com.orange.ouds.core.theme.value
import com.orange.ouds.foundation.extensions.asOrNull
import com.orange.ouds.foundation.extensions.orElse
Expand Down Expand Up @@ -137,7 +136,7 @@ fun SizeIconWithTextIllustrationRow(size: Dp, tokenName: String) {
contentDescription = null
)
val tokenTypography = tokenName.split('.').take(2).joinToString(".")
val style = OudsTypographyKeyToken::class.getTokens()
val style = getTokens<OudsTypographyKeyToken>()
.asOrNull<List<Token<TextStyle>>>()
?.firstOrNull { typographyToken ->
typographyToken.name.replace(".Strong", "") == tokenTypography
Expand Down
Loading
Loading