Add preview for colors.

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/ColorAliases.kt

@@ -18,8 +18,13 @@ package io.element.android.libraries.designsystem.theme
 
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.tooling.preview.Preview
 import io.element.android.libraries.designsystem.SystemGrey4Dark
 import io.element.android.libraries.designsystem.SystemGrey6Light
+import io.element.android.libraries.designsystem.preview.ElementPreviewDark
+import io.element.android.libraries.designsystem.preview.ElementPreviewLight
+import io.element.android.libraries.designsystem.theme.previews.ColorListPreview
 
 /**
  * Room list.
@@ -38,3 +43,26 @@ fun MaterialTheme.roomListUnreadIndicator() = colorScheme.primary
 
 @Composable
 fun ElementColors.roomListPlaceHolder() = if (isLight) SystemGrey6Light else SystemGrey4Dark
+
+@Preview
+@Composable
+fun ColorAliasesLightPreview() = ElementPreviewLight { ContentToPreview() }
+
+@Preview
+@Composable
+fun ColorAliasesDarkPreview() = ElementPreviewDark { ContentToPreview() }
+
+@Composable
+private fun ContentToPreview() {
+    ColorListPreview(
+        backgroundColor = Color.Black,
+        foregroundColor = Color.White,
+        colors = mapOf(
+            "roomListRoomName" to MaterialTheme.roomListRoomName(),
+            "roomListRoomMessage" to MaterialTheme.roomListRoomMessage(),
+            "roomListRoomMessageDate" to MaterialTheme.roomListRoomMessageDate(),
+            "roomListUnreadIndicator" to MaterialTheme.roomListUnreadIndicator(),
+            "roomListPlaceHolder" to ElementTheme.colors.roomListPlaceHolder(),
+        )
+    )
+}

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/ColorsDark.kt

@@ -17,11 +17,14 @@
 package io.element.android.libraries.designsystem.theme
 
 import androidx.compose.material3.darkColorScheme
+import androidx.compose.runtime.Composable
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.tooling.preview.Preview
 import io.element.android.libraries.designsystem.Azure
 import io.element.android.libraries.designsystem.DarkGrey
 import io.element.android.libraries.designsystem.SystemGrey5Dark
 import io.element.android.libraries.designsystem.SystemGrey6Dark
+import io.element.android.libraries.designsystem.theme.previews.ColorsSchemePreview
 
 fun elementColorsDark() = ElementColors(
     messageFromMeBackground = SystemGrey5Dark,
@@ -62,3 +65,11 @@ val materialColorSchemeDark = darkColorScheme(
     // TODO outlineVariant = ColorDarkTokens.OutlineVariant,
     // TODO scrim = ColorDarkTokens.Scrim,
 )
+
+@Preview
+@Composable
+fun ColorsSchemePreviewDark() = ColorsSchemePreview(
+    Color.White,
+    Color.Black,
+    materialColorSchemeDark,
+)

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/ColorsLight.kt

@@ -17,11 +17,14 @@
 package io.element.android.libraries.designsystem.theme
 
 import androidx.compose.material3.lightColorScheme
+import androidx.compose.runtime.Composable
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.tooling.preview.Preview
 import io.element.android.libraries.designsystem.Azure
 import io.element.android.libraries.designsystem.LightGrey
 import io.element.android.libraries.designsystem.SystemGrey5Light
 import io.element.android.libraries.designsystem.SystemGrey6Light
+import io.element.android.libraries.designsystem.theme.previews.ColorsSchemePreview
 
 fun elementColorsLight() = ElementColors(
     messageFromMeBackground = SystemGrey5Light,
@@ -62,3 +65,11 @@ val materialColorSchemeLight = lightColorScheme(
     // TODO outlineVariant = ColorLightTokens.OutlineVariant,
     // TODO scrim = ColorLightTokens.Scrim,
 )
+
+@Preview
+@Composable
+fun ColorsSchemePreviewLight() = ColorsSchemePreview(
+    Color.Black,
+    Color.White,
+    materialColorSchemeLight,
+)

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/Text.kt

@@ -16,8 +16,19 @@
 
 package io.element.android.libraries.designsystem.theme.components
 
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.IntrinsicSize
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.text.InlineTextContent
 import androidx.compose.material3.LocalTextStyle
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.contentColorFor
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
@@ -30,7 +41,12 @@ import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextDecoration
 import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.TextUnit
+import androidx.compose.ui.unit.dp
+import io.element.android.libraries.designsystem.preview.ElementPreviewDark
+import io.element.android.libraries.designsystem.preview.ElementPreviewLight
+import io.element.android.libraries.designsystem.utils.toHrf
 import kotlinx.collections.immutable.ImmutableMap
 import kotlinx.collections.immutable.persistentMapOf
 
@@ -113,3 +129,50 @@ fun Text(
         style = style,
     )
 }
+
+@Preview
+@Composable
+fun TextLightPreview() = ElementPreviewLight { ContentToPreview() }
+
+@Preview
+@Composable
+fun TextDarkPreview() = ElementPreviewDark { ContentToPreview() }
+
+@Composable
+private fun ContentToPreview() {
+    val colors = mapOf(
+        "primary" to MaterialTheme.colorScheme.primary,
+        "secondary" to MaterialTheme.colorScheme.secondary,
+        "tertiary" to MaterialTheme.colorScheme.tertiary,
+        "background" to MaterialTheme.colorScheme.background,
+        "error" to MaterialTheme.colorScheme.error,
+        "surface" to MaterialTheme.colorScheme.surface,
+        "surfaceVariant" to MaterialTheme.colorScheme.surfaceVariant,
+        "primaryContainer" to MaterialTheme.colorScheme.primaryContainer,
+        "secondaryContainer" to MaterialTheme.colorScheme.secondaryContainer,
+        "tertiaryContainer" to MaterialTheme.colorScheme.tertiaryContainer,
+        // "inversePrimary" to MaterialTheme.colorScheme.inversePrimary,
+        "errorContainer" to MaterialTheme.colorScheme.errorContainer,
+        "inverseSurface" to MaterialTheme.colorScheme.inverseSurface,
+    )
+    Column(
+        modifier = Modifier.width(IntrinsicSize.Max)
+    ) {
+        colors.keys.forEach { name ->
+            val color = colors[name]!!
+            val textColor = contentColorFor(backgroundColor = color)
+            Box(
+                modifier = Modifier
+                    .background(color = color)
+                    .fillMaxWidth()
+                    .padding(2.dp)
+            ) {
+                Text(
+                    text = "Text on $name\n${textColor.toHrf()} on ${color.toHrf()}",
+                    color = textColor,
+                )
+            }
+            Spacer(modifier = Modifier.height(2.dp))
+        }
+    }
+}

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/previews/ColorListPreview.kt

@@ -0,0 +1,47 @@
+/*
+ * Copyright (c) 2023 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package io.element.android.libraries.designsystem.theme.previews
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+
+@Composable
+internal fun ColorListPreview(
+    backgroundColor: Color,
+    foregroundColor: Color,
+    colors: Map<String, Color>,
+    modifier: Modifier = Modifier,
+) {
+    Column(
+        modifier = modifier
+            .background(color = backgroundColor)
+            .fillMaxWidth()
+    ) {
+        colors.keys.forEach { name ->
+            val color = colors[name]!!
+            ColorPreview(backgroundColor = backgroundColor, foregroundColor = foregroundColor, name = name, color = color)
+        }
+        Spacer(modifier = Modifier.height(2.dp))
+    }
+}

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/previews/ColorPreview.kt

@@ -0,0 +1,64 @@
+/*
+ * Copyright (c) 2023 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package io.element.android.libraries.designsystem.theme.previews
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import io.element.android.libraries.designsystem.theme.components.Text
+import io.element.android.libraries.designsystem.utils.toHrf
+
+@Composable
+internal fun ColorPreview(
+    backgroundColor: Color,
+    foregroundColor: Color,
+    name: String, color: Color,
+    modifier: Modifier = Modifier,
+) {
+    Column(modifier = modifier.fillMaxWidth()) {
+        Text(text = name + " " + color.toHrf(), fontSize = 6.sp, color = foregroundColor)
+        val backgroundBrush = Brush.linearGradient(
+            listOf(
+                backgroundColor,
+                foregroundColor,
+            )
+        )
+        Row(
+            modifier = Modifier.background(backgroundBrush)
+        ) {
+            repeat(2) {
+                Box(
+                    modifier = Modifier
+                        .padding(1.dp)
+                        .background(color = color)
+                        .height(10.dp)
+                        .weight(1f)
+                )
+            }
+        }
+    }
+}

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/previews/ColorsSchemePreview.kt

@@ -0,0 +1,68 @@
+/*
+ * Copyright (c) 2023 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package io.element.android.libraries.designsystem.theme.previews
+
+import androidx.compose.material3.ColorScheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+
+@Composable
+internal fun ColorsSchemePreview(
+    backgroundColor: Color,
+    foregroundColor: Color,
+    colorScheme: ColorScheme,
+    modifier: Modifier = Modifier,
+) {
+    val colors = mapOf(
+        "primary" to colorScheme.primary,
+        "onPrimary" to colorScheme.onPrimary,
+        "primaryContainer" to colorScheme.primaryContainer,
+        "onPrimaryContainer" to colorScheme.onPrimaryContainer,
+        "inversePrimary" to colorScheme.inversePrimary,
+        "secondary" to colorScheme.secondary,
+        "onSecondary" to colorScheme.onSecondary,
+        "secondaryContainer" to colorScheme.secondaryContainer,
+        "onSecondaryContainer" to colorScheme.onSecondaryContainer,
+        "tertiary" to colorScheme.tertiary,
+        "onTertiary" to colorScheme.onTertiary,
+        "tertiaryContainer" to colorScheme.tertiaryContainer,
+        "onTertiaryContainer" to colorScheme.onTertiaryContainer,
+        "background" to colorScheme.background,
+        "onBackground" to colorScheme.onBackground,
+        "surface" to colorScheme.surface,
+        "onSurface" to colorScheme.onSurface,
+        "surfaceVariant" to colorScheme.surfaceVariant,
+        "onSurfaceVariant" to colorScheme.onSurfaceVariant,
+        "surfaceTint" to colorScheme.surfaceTint,
+        "inverseSurface" to colorScheme.inverseSurface,
+        "inverseOnSurface" to colorScheme.inverseOnSurface,
+        "error" to colorScheme.error,
+        "onError" to colorScheme.onError,
+        "errorContainer" to colorScheme.errorContainer,
+        "onErrorContainer" to colorScheme.onErrorContainer,
+        "outline" to colorScheme.outline,
+        "outlineVariant" to colorScheme.outlineVariant,
+        "scrim" to colorScheme.scrim,
+    )
+    ColorListPreview(
+        backgroundColor = backgroundColor,
+        foregroundColor = foregroundColor,
+        colors = colors,
+        modifier = modifier,
+    )
+}

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/utils/Colors.kt

@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) 2023 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package io.element.android.libraries.designsystem.utils
+
+import androidx.compose.ui.graphics.Color
+
+/**
+ * Convert color to Human Readable Format.
+ */
+internal fun Color.toHrf(): String {
+    return "0x" + value.toString(16).take(8).uppercase()
+}