Sulkta-OSS/element-x-ada
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add preview for colors.

Browse source
This commit is contained in:
Benoit Marty 2023-02-03 16:21:53 +01:00
parent 426005f298
commit 8413b9792f
14 changed files with 336 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -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(),
)
)
}

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

@ -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,
)

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

@ -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,
)

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

@ -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))
}
}
}

47
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/previews/ColorListPreview.kt Normal file
View file

@ -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))
}
}

64
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/previews/ColorPreview.kt Normal file
View file

@ -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)
)
}
}
}
}

68
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/previews/ColorsSchemePreview.kt Normal file
View file

@ -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,
)
}

26
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/utils/Colors.kt Normal file
View file

@ -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()
}

3
tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[io.element.android.libraries.designsystem.theme.components_null_DefaultGroup_TextDarkPreview_,NEXUS_5,1,en].png Normal file
View file

@ -0,0 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:5127c51e1eb76ceb0620073449a5dde0805f9ba3d0fae6368aaf15473e837c1f
size 104643

3
tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[io.element.android.libraries.designsystem.theme.components_null_DefaultGroup_TextLightPreview_,NEXUS_5,1,en].png Normal file
View file

@ -0,0 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:2239989d1ea3db71952a74282d79a08c4e2dbc321c1cea6478b7cf25957bfecb
size 102883

3
tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[io.element.android.libraries.designsystem.theme_null_DefaultGroup_ColorAliasesDarkPreview_,NEXUS_5,1,en].png Normal file
View file

@ -0,0 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:75ed390c5f71cdfebf87f722b3d377f6c1a047d2b3791812516ddad2c2326407
size 30804

3
tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[io.element.android.libraries.designsystem.theme_null_DefaultGroup_ColorAliasesLightPreview_,NEXUS_5,1,en].png Normal file
View file

@ -0,0 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:1f388b7b6dce61610a5bb3d839f3be11be19363cf734a3f70032354d33f2b0db
size 32087

3
tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[io.element.android.libraries.designsystem.theme_null_DefaultGroup_ColorsSchemePreviewDark_,NEXUS_5,1,en].png Normal file
View file

@ -0,0 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:425c923cf0e7993816c237d22a50c32962dc58e42a56bba788742f5b5ac2fdc6
size 115420

3
tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[io.element.android.libraries.designsystem.theme_null_DefaultGroup_ColorsSchemePreviewLight_,NEXUS_5,1,en].png Normal file
View file

@ -0,0 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:3c25192e1654d49d72af7591700ee88303562812de23ec1118e8f27d852da8a9
size 116950