feat: add color tokens in the demo app (#158)

Orange-OpenSource · Nov 8, 2024 · 4693d46 · 4693d46
1 parent 9b06479
commit 4693d46
Show file tree

Hide file tree

Showing 8 changed files with 121 additions and 4 deletions.
diff --git a/NOTICE.txt b/NOTICE.txt
@@ -18,6 +18,7 @@ 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_palette.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

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
@@ -13,6 +13,7 @@
 package com.orange.ouds.app.ui.tokens
 
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.unit.Dp
@@ -22,9 +23,15 @@ data class Token<T>(val name: String, val value: T) {
     val literalValue: String
         @Composable
         get() = when (value) {
+            is Color -> value.toHexString()
             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()
         }
 }
+
+/**
+ * @return the hexadecimal value of the Color
+ */
+private fun Color.toHexString() = "#" + value.toString(16).substring(2, 8).uppercase()
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
@@ -43,6 +43,23 @@ sealed class TokenCategory(
         listOf(TokenProperty.BorderWidth, TokenProperty.BorderRadius, TokenProperty.BorderStyle)
     )
 
+    data object Color : TokenCategory(
+        R.string.app_tokens_color_label,
+        R.drawable.ic_palette,
+        R.string.app_tokens_color_description_text,
+        listOf(
+            TokenProperty.ColorAction,
+            TokenProperty.ColorAlways,
+            TokenProperty.ColorBackground,
+            TokenProperty.ColorBorder,
+            TokenProperty.ColorBrand,
+            TokenProperty.ColorContent,
+            TokenProperty.ColorElevation,
+            TokenProperty.ColorGradient,
+            TokenProperty.ColorDecorative
+        )
+    )
+
     data object Dimension : TokenCategory(
         R.string.app_tokens_dimension_label,
         R.drawable.ic_dimension,

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
@@ -13,6 +13,7 @@
 package com.orange.ouds.app.ui.tokens
 
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
@@ -28,6 +29,7 @@ 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.stringResource
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.style.TextOverflow
@@ -126,7 +128,7 @@ fun TokenCategoryDetailScreen(tokenCategory: TokenCategory, onSubcategoryClick:
                                     Text(
                                         modifier = Modifier.fillMaxWidth(),
                                         text = token.name,
-                                        maxLines = 1,
+                                        maxLines = 2,
                                         overflow = TextOverflow.Ellipsis,
                                         style = if (tokenProperty == TokenProperty.Typography) {
                                             token.value as TextStyle
@@ -156,6 +158,15 @@ private fun TokenIllustration(tokenProperty: TokenProperty, token: Token<Any>) =
     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.ColorAction, TokenProperty.ColorAlways, TokenProperty.ColorBackground, TokenProperty.ColorBorder, TokenProperty.ColorBrand, TokenProperty.ColorContent,
+    TokenProperty.ColorElevation, TokenProperty.ColorGradient, TokenProperty.ColorDecorative -> {
+        val color = token.value as Color
+        if ((isSystemInDarkTheme() && color == Color.Black) || (!isSystemInDarkTheme() && color == Color.White)) {
+            BorderIllustrationBox(backgroundColor = color)
+        } else {
+            IllustrationBox(backgroundColor = color)
+        }
+    }
     is TokenProperty.Opacity -> OpacityIllustrationBox(opacity = token.value as Float)
     is TokenProperty.Elevation -> ElevationIllustrationSurface(elevation = token.value as Dp)
     is TokenProperty.SizeIconDecorative -> SizeIconDecorativeIllustrationBox(size = token.value as Dp)

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
@@ -17,6 +17,7 @@ import androidx.compose.runtime.Composable
 import com.orange.ouds.app.R
 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.OudsOpacityKeyToken
@@ -43,6 +44,51 @@ sealed class TokenProperty(
         tokens = { OudsBorderKeyToken.Width.entries.map { Token(it.name, it.value) } }
     )
 
+    data object ColorAction : TokenProperty(
+        nameRes = R.string.app_tokens_color_action_label,
+        tokens = { OudsColorKeyToken.Action.entries.map { Token(it.name, it.value) } }
+    )
+
+    data object ColorAlways : TokenProperty(
+        nameRes = R.string.app_tokens_color_always_label,
+        tokens = { OudsColorKeyToken.Always.entries.map { Token(it.name, it.value) } }
+    )
+
+    data object ColorBackground : TokenProperty(
+        nameRes = R.string.app_tokens_color_background_label,
+        tokens = { OudsColorKeyToken.Background.entries.map { Token(it.name, it.value) } }
+    )
+
+    data object ColorBorder : TokenProperty(
+        nameRes = R.string.app_tokens_color_border_label,
+        tokens = { OudsColorKeyToken.Border.entries.map { Token(it.name, it.value) } }
+    )
+
+    data object ColorBrand : TokenProperty(
+        nameRes = R.string.app_tokens_color_brand_label,
+        tokens = { OudsColorKeyToken.Brand.entries.map { Token(it.name, it.value) } }
+    )
+
+    data object ColorContent : TokenProperty(
+        nameRes = R.string.app_tokens_color_content_label,
+        tokens = { OudsColorKeyToken.Content.entries.map { Token(it.name, it.value) } }
+    )
+
+    data object ColorElevation : TokenProperty(
+        nameRes = R.string.app_tokens_color_elevation_label,
+        tokens = { OudsColorKeyToken.Elevation.entries.map { Token(it.name, it.value) } }
+    )
+
+    data object ColorGradient : TokenProperty(
+        nameRes = R.string.app_tokens_color_gradient_label,
+        tokens = { OudsColorKeyToken.Gradient.entries.map { Token(it.name, it.value) } }
+    )
+
+    data object ColorDecorative : TokenProperty(
+        nameRes = R.string.app_tokens_color_decorative_label,
+        tokens = { OudsColorKeyToken.Decorative.entries.map { Token(it.name, it.value) } }
+    )
+
     data object Elevation : TokenProperty(
         nameRes = null,
         tokens = { OudsElevationKeyToken.entries.map { Token(it.name, it.value) } }

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
@@ -76,7 +76,8 @@ fun IllustrationBox(
 fun BorderIllustrationBox(
     width: Dp = 1.dp,
     shape: Shape = RectangleShape,
-    style: OudsBorderStyle = OudsBorderStyle.Solid
+    style: OudsBorderStyle = OudsBorderStyle.Solid,
+    backgroundColor: Color = OudsColorKeyToken.Background.Secondary.value
 ) {
     val borderColor = OudsColorKeyToken.Content.Default.value
     val modifier = when (style) {
@@ -85,7 +86,7 @@ fun BorderIllustrationBox(
         OudsBorderStyle.Dashed -> Modifier.dashedBorder(width = width, color = borderColor, shape = shape)
         OudsBorderStyle.Dotted -> Modifier.dottedBorder(width = width, color = borderColor, shape = shape)
     }
-    IllustrationBox(modifier = modifier.clip(shape), backgroundColor = OudsColorKeyToken.Background.Secondary.value)
+    IllustrationBox(modifier = modifier.clip(shape), backgroundColor = backgroundColor)
 }
 
 @Composable

diff --git a/app/src/main/res/drawable/ic_palette.xml b/app/src/main/res/drawable/ic_palette.xml
@@ -0,0 +1,22 @@
+<!--
+  ~ 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
+  -->
+
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="80dp"
+    android:height="80dp"
+    android:viewportWidth="80"
+    android:viewportHeight="80">
+  <path
+      android:pathData="M40.423,55.963c0.02,-5.529 4.58,-9.968 10.104,-9.968h11.059c7.903,0 13.694,-7.528 11.576,-15.148a33.86,33.86 0,0 0,-8.713 -14.908C51.153,2.64 29.684,2.643 16.392,15.945 3.12,29.226 3.12,50.76 16.392,64.042c9.482,9.488 23.171,12.198 35.057,8.13 3.385,-1.16 2.547,-6.171 -1.03,-6.171a10,10 0,0 1,-9.996 -10.038m12.83,-37.973a5.002,5.002 0,1 1,-4.83 4.835,5 5,0 0,1 4.83,-4.835M14.438,37.156a4.998,4.998 0,1 1,4.832 4.835,5 5,0 0,1 -4.832,-4.835m7.158,18.84a5.002,5.002 0,1 1,4.832 -4.836,5 5,0 0,1 -4.832,4.835m3.998,-28.008a5.002,5.002 0,1 1,4.832 -4.835,5 5,0 0,1 -4.832,4.835m13.994,-6.001a5.002,5.002 0,1 1,4.832 -4.836,5 5,0 0,1 -4.832,4.835Z"
+      android:fillColor="#000000"
+      android:fillType="evenOdd"/>
+</vector>
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
@@ -41,6 +41,19 @@
     <string name="app_tokens_border_radius_label">Radius</string>
     <string name="app_tokens_border_style_label">Style</string>
 
+    <!-- Tokens: color -->
+    <string name="app_tokens_color_label">Color</string>
+    <string name="app_tokens_color_description_text">Colour reinforces our brand identity and ensures consistency across all product experiences. The semantic tokens described are the onse you should use when building a mobile app.</string>
+    <string name="app_tokens_color_action_label">Action</string>
+    <string name="app_tokens_color_always_label">Always</string>
+    <string name="app_tokens_color_background_label">Background</string>
+    <string name="app_tokens_color_border_label">Border</string>
+    <string name="app_tokens_color_brand_label">Brand</string>
+    <string name="app_tokens_color_content_label">Content</string>
+    <string name="app_tokens_color_elevation_label">Elevation</string>
+    <string name="app_tokens_color_gradient_label">Gradient</string>
+    <string name="app_tokens_color_decorative_label">Decorative</string>
+
     <!-- Tokens: dimension -->
     <string name="app_tokens_dimension_label">Dimension</string>
     <string name="app_tokens_dimension_description_text">Dimension provides standard sizing and spacing to ensure visual consistency across the UI.</string>
@@ -69,7 +82,6 @@
     <string name="app_tokens_dimension_size_iconWithText_label">Icon with text</string>
     <string name="app_tokens_dimension_size_iconWithTextTokenName_label">%1$s (%2$s)</string>
 
-
     <!-- Tokens: elevation -->
     <string name="app_tokens_elevation_label">Elevation</string>
     <string name="app_tokens_elevation_description_text">Shadows are used to give the impression of distance or elevation between surfaces, which adds depth to our designs.</string>