From b3f18f9e431f9af94a2517eab9654f0e3bcf7595 Mon Sep 17 00:00:00 2001 From: Aditi Bhatia Date: Fri, 26 Jan 2024 16:51:17 -0800 Subject: [PATCH 01/16] Add light/dark color palette definitions --- .../designsystem/DesignSystemColors.kt | 46 +++++++++++++++++++ 1 file changed, 46 insertions(+) create mode 100644 WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColors.kt diff --git a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColors.kt b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColors.kt new file mode 100644 index 000000000000..77bf3eb01907 --- /dev/null +++ b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColors.kt @@ -0,0 +1,46 @@ +package org.wordpress.android.designsystem + +import android.annotation.SuppressLint +import androidx.compose.foundation.isSystemInDarkTheme +import androidx.compose.runtime.Composable + +@SuppressLint("ConflictingOnColor") +val DesignSystemLightPalette = lightColors( + primaryForeground = DesignSystemAppColor.Black, + primaryBackground = DesignSystemAppColor.White, + secondaryForeground = DesignSystemAppColor.Gray60, + secondaryBackground = DesignSystemAppColor.OffWhite, + tertiaryForeground = DesignSystemAppColor.Gray30, + tertiaryBackground = DesignSystemAppColor.Gray, + quartenaryBackground = DesignSystemAppColor.Gray2, + brandForeground = DesignSystemAppColor.JetpackGreen50, + brandBackground = DesignSystemAppColor.JetpackGreen50, + error = DesignSystemAppColor.Red50, + warning = DesignSystemAppColor.Orange40, + wp = DesignSystemAppColor.Blue50, + wpBackground = DesignSystemAppColor.Blue50 + +) + +@SuppressLint("ConflictingOnColor") +val DesignSystemDarkPalette = darkColors( + primaryForeground = DesignSystemAppColor.White, + primaryBackground = DesignSystemAppColor.Black, + secondaryForeground = DesignSystemAppColor.OffWhite60, + secondaryBackground = DesignSystemAppColor.DarkGrey, + tertiaryForeground = DesignSystemAppColor.Gray, + tertiaryBackground = DesignSystemAppColor.Gray3, + quartenaryBackground = DesignSystemAppColor.Gray4, + brandForeground = DesignSystemAppColor.JetpackGreen30, + brandBackground = DesignSystemAppColor.JetpackGreen1, + error = DesignSystemAppColor.Red1, + warning = DesignSystemAppColor.Orange1, + wp = DesignSystemAppColor.Blue30, + wpBackground = DesignSystemAppColor.Blue1 +) + +@Composable +fun designSystemColorPalette(isDarkTheme: Boolean = isSystemInDarkTheme()) = when (isDarkTheme) { + true -> DesignSystemDarkPalette + else -> DesignSystemLightPalette +} From fc883b45fe25fafbf1f25d9aa5748a5397bd9229 Mon Sep 17 00:00:00 2001 From: Aditi Bhatia Date: Mon, 29 Jan 2024 15:41:10 -0800 Subject: [PATCH 02/16] Color definitions --- .../designsystem/DesignSystemAppColor.kt | 80 +++++++++++++++++++ 1 file changed, 80 insertions(+) create mode 100644 WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemAppColor.kt diff --git a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemAppColor.kt b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemAppColor.kt new file mode 100644 index 000000000000..8bbcbfc933f7 --- /dev/null +++ b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemAppColor.kt @@ -0,0 +1,80 @@ +package org.wordpress.android.designsystem + +import androidx.compose.runtime.Stable +import androidx.compose.ui.graphics.Color + +/** + * Object containing static common colors used throughout the project. Note that the colors here are not SEMANTIC, + * meaning they don't represent the usage of the color (e.g.: PrimaryButtonBackground) but instead they are raw + * colors used throughout this app's design (e.g.: Green50). + */ +object DesignSystemAppColor { + // Black & White + @Stable + val Black = Color(0xFF000000) + + @Stable + val White = Color(0xFFFFFFFF) + + // Grays + @Stable + val Gray = Color(0xFFF2F2F7) + + @Stable + val Gray10 = Color(0xFFC2C2C6) + + @Stable + val Gray20 = Color(0x99EBEBF5) + + @Stable + val Gray30 = Color(0xFF9B9B9E) + + @Stable + val Gray40 = Color(0xFF4E4E4F) + + @Stable + val Gray50 = Color(0xFF3A3A3C) + + @Stable + val Gray60 = Color(0xFF2C2C2E) + + @Stable + val GrayWIP2 = Color(0x993C3C43) // this doesn't look right - foreground light mode: secondary + + @Stable + val GrayWIP = Color(0x4D3C3C43) // this doesn't look right - foreground light mode: tertiary + + // Blues + @Stable + val Blue = Color(0xFF0675C4) + + @Stable + val Blue10 = Color(0xFF399CE3) + + @Stable + val Blue20 = Color(0xFF1689DB) + + // Greens + @Stable + val Green = Color(0xFF008710) + + @Stable + val Green10 = Color(0xFF2FB41F) + + @Stable + val Green20 = Color(0xFF069E08) + + // Reds + @Stable + val Red = Color(0xFFD63638) + + @Stable + val Red10 = Color(0xFFE65054) + + // Oranges + @Stable + val Orange = Color(0xFFD67709) + + @Stable + val Orange10 = Color(0xFFE68B28) +} From 8db9e7e4c128225a4d0f45ca3231f1ae3df3cbea Mon Sep 17 00:00:00 2001 From: Aditi Bhatia Date: Tue, 30 Jan 2024 11:49:50 -0800 Subject: [PATCH 03/16] Add dark theme to activity --- .../android/designsystem/DesignSystemActivity.kt | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemActivity.kt b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemActivity.kt index 5d15ef196cc9..c8ce323af22b 100644 --- a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemActivity.kt +++ b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemActivity.kt @@ -2,6 +2,7 @@ package org.wordpress.android.designsystem import android.content.res.Configuration import android.os.Bundle +import androidx.compose.foundation.isSystemInDarkTheme import androidx.compose.runtime.Composable import androidx.compose.ui.tooling.preview.Preview import org.wordpress.android.ui.LocaleAwareActivity @@ -10,8 +11,11 @@ import org.wordpress.android.util.extensions.setContent class DesignSystemActivity : LocaleAwareActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) - setContent { - DesignSystem(onBackPressedDispatcher::onBackPressed) + setContent { + val colors = if (isSystemInDarkTheme()) darkColors() else lightColors() + DesignSystemTheme(colors) { + DesignSystem(onBackPressedDispatcher::onBackPressed) + } } } @@ -21,11 +25,8 @@ class DesignSystemActivity : LocaleAwareActivity() { showBackground = true, name = "Dark Mode" ) - @Composable fun PreviewDesignSystemActivity() { DesignSystem(onBackPressedDispatcher::onBackPressed) } } - - From f218f17ea9c684b43b103d916b6a2a03323ebc04 Mon Sep 17 00:00:00 2001 From: Aditi Bhatia Date: Tue, 30 Jan 2024 11:50:50 -0800 Subject: [PATCH 04/16] Clean up color naming --- .../designsystem/DesignSystemColors.kt | 44 +++++++++---------- 1 file changed, 22 insertions(+), 22 deletions(-) diff --git a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColors.kt b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColors.kt index 77bf3eb01907..b02fb68ff75b 100644 --- a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColors.kt +++ b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColors.kt @@ -8,17 +8,17 @@ import androidx.compose.runtime.Composable val DesignSystemLightPalette = lightColors( primaryForeground = DesignSystemAppColor.Black, primaryBackground = DesignSystemAppColor.White, - secondaryForeground = DesignSystemAppColor.Gray60, - secondaryBackground = DesignSystemAppColor.OffWhite, - tertiaryForeground = DesignSystemAppColor.Gray30, - tertiaryBackground = DesignSystemAppColor.Gray, - quartenaryBackground = DesignSystemAppColor.Gray2, - brandForeground = DesignSystemAppColor.JetpackGreen50, - brandBackground = DesignSystemAppColor.JetpackGreen50, - error = DesignSystemAppColor.Red50, - warning = DesignSystemAppColor.Orange40, - wp = DesignSystemAppColor.Blue50, - wpBackground = DesignSystemAppColor.Blue50 + secondaryForeground = DesignSystemAppColor.GrayWIP2, + secondaryBackground = DesignSystemAppColor.Gray, + tertiaryForeground = DesignSystemAppColor.GrayWIP, + tertiaryBackground = DesignSystemAppColor.Gray10, + quartenaryBackground = DesignSystemAppColor.Gray30, + brandForeground = DesignSystemAppColor.Green, + brandBackground = DesignSystemAppColor.Green, + error = DesignSystemAppColor.Red, + warning = DesignSystemAppColor.Orange, + wp = DesignSystemAppColor.Blue, + wpBackground = DesignSystemAppColor.Blue ) @@ -26,17 +26,17 @@ val DesignSystemLightPalette = lightColors( val DesignSystemDarkPalette = darkColors( primaryForeground = DesignSystemAppColor.White, primaryBackground = DesignSystemAppColor.Black, - secondaryForeground = DesignSystemAppColor.OffWhite60, - secondaryBackground = DesignSystemAppColor.DarkGrey, - tertiaryForeground = DesignSystemAppColor.Gray, - tertiaryBackground = DesignSystemAppColor.Gray3, - quartenaryBackground = DesignSystemAppColor.Gray4, - brandForeground = DesignSystemAppColor.JetpackGreen30, - brandBackground = DesignSystemAppColor.JetpackGreen1, - error = DesignSystemAppColor.Red1, - warning = DesignSystemAppColor.Orange1, - wp = DesignSystemAppColor.Blue30, - wpBackground = DesignSystemAppColor.Blue1 + secondaryForeground = DesignSystemAppColor.Gray20, + secondaryBackground = DesignSystemAppColor.Gray50, + tertiaryForeground = DesignSystemAppColor.Gray10, + tertiaryBackground = DesignSystemAppColor.Gray60, + quartenaryBackground = DesignSystemAppColor.Gray40, + brandForeground = DesignSystemAppColor.Green10, + brandBackground = DesignSystemAppColor.Green20, + error = DesignSystemAppColor.Red10, + warning = DesignSystemAppColor.Orange10, + wp = DesignSystemAppColor.Blue10, + wpBackground = DesignSystemAppColor.Blue20 ) @Composable From 1832a8b67308c59fa00974b43e0c1fb7fa944cb9 Mon Sep 17 00:00:00 2001 From: Aditi Bhatia Date: Tue, 30 Jan 2024 11:50:58 -0800 Subject: [PATCH 05/16] Create DesignSystemTheme.kt --- .../android/designsystem/DesignSystemTheme.kt | 27 +++++++++++++++++++ 1 file changed, 27 insertions(+) create mode 100644 WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemTheme.kt diff --git a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemTheme.kt b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemTheme.kt new file mode 100644 index 000000000000..cec6735aba31 --- /dev/null +++ b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemTheme.kt @@ -0,0 +1,27 @@ +package org.wordpress.android.designsystem + +import androidx.compose.runtime.Composable +import androidx.compose.runtime.CompositionLocalProvider +import androidx.compose.runtime.ReadOnlyComposable +import androidx.compose.runtime.remember + +@Composable +fun DesignSystemTheme( + colors: DesignSystemColorsBase = DesignSystemTheme.colors, + content: @Composable () -> Unit +) { + val rememberedColors = remember { colors.copy() }.apply { updateColorsFrom(colors) } + CompositionLocalProvider( + LocalColors provides rememberedColors + ) { + content() + } +} + + object DesignSystemTheme { + val colors: DesignSystemColorsBase + @Composable + @ReadOnlyComposable + get() = LocalColors.current + } + From 74af32506491346876606dbc7d1197dd3d6db2c0 Mon Sep 17 00:00:00 2001 From: Aditi Bhatia Date: Tue, 30 Jan 2024 13:59:54 -0800 Subject: [PATCH 06/16] Update preview to use dark/light mode --- .../wordpress/android/designsystem/DesignSystemActivity.kt | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemActivity.kt b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemActivity.kt index c8ce323af22b..96857d9b4264 100644 --- a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemActivity.kt +++ b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemActivity.kt @@ -27,6 +27,9 @@ class DesignSystemActivity : LocaleAwareActivity() { ) @Composable fun PreviewDesignSystemActivity() { - DesignSystem(onBackPressedDispatcher::onBackPressed) + val colors = if (isSystemInDarkTheme()) darkColors() else lightColors() + DesignSystemTheme(colors) { + DesignSystem(onBackPressedDispatcher::onBackPressed) + } } } From d1bda1aea86a5ae966d2592044ebf354b1ce9460 Mon Sep 17 00:00:00 2001 From: Aditi Bhatia Date: Tue, 30 Jan 2024 14:03:57 -0800 Subject: [PATCH 07/16] Create DesignSystemColorsBase.kt --- .../designsystem/DesignSystemColorsBase.kt | 205 ++++++++++++++++++ 1 file changed, 205 insertions(+) create mode 100644 WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColorsBase.kt diff --git a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColorsBase.kt b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColorsBase.kt new file mode 100644 index 000000000000..74667affb62d --- /dev/null +++ b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColorsBase.kt @@ -0,0 +1,205 @@ +package org.wordpress.android.designsystem + +import androidx.compose.material.Colors +import androidx.compose.runtime.Stable +import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.setValue +import androidx.compose.runtime.staticCompositionLocalOf +import androidx.compose.runtime.structuralEqualityPolicy +import androidx.compose.ui.graphics.Color + +@Stable +class DesignSystemColorsBase( + primaryForeground: Color, + primaryBackground: Color, + secondaryForeground: Color, + secondaryBackground: Color, + tertiaryForeground: Color, + tertiaryBackground: Color, + quartenaryBackground: Color, + brandForeground: Color, + brandBackground: Color, + error: Color, + warning: Color, + wp: Color, + wpBackground: Color, + isLight: Boolean +) { + var primaryForeground by mutableStateOf(primaryForeground, structuralEqualityPolicy()) + internal set + var primaryBackground by mutableStateOf(primaryBackground, structuralEqualityPolicy()) + internal set + var secondaryForeground by mutableStateOf(secondaryForeground, structuralEqualityPolicy()) + internal set + var secondaryBackground by mutableStateOf(secondaryBackground, structuralEqualityPolicy()) + internal set + var tertiaryForeground by mutableStateOf(tertiaryForeground, structuralEqualityPolicy()) + internal set + var tertiaryBackground by mutableStateOf(tertiaryBackground, structuralEqualityPolicy()) + internal set + var quartenaryBackground by mutableStateOf(quartenaryBackground, structuralEqualityPolicy()) + internal set + var brandForeground by mutableStateOf(brandForeground, structuralEqualityPolicy()) + internal set + var brandBackground by mutableStateOf(brandBackground, structuralEqualityPolicy()) + internal set + var error by mutableStateOf(error, structuralEqualityPolicy()) + internal set + var warning by mutableStateOf(warning, structuralEqualityPolicy()) + internal set + var wp by mutableStateOf(wp, structuralEqualityPolicy()) + internal set + var wpBackground by mutableStateOf(wpBackground, structuralEqualityPolicy()) + internal set + var isLight by mutableStateOf(isLight, structuralEqualityPolicy()) + internal set + + /** + * Returns a copy of this Colors, optionally overriding some of the values. + */ + fun copy( + primaryForeground: Color = this.primaryForeground, + primaryBackground: Color = this.primaryBackground, + secondaryForeground: Color = this.secondaryForeground, + secondaryBackground: Color = this.secondaryBackground, + tertiaryForeground: Color = this.tertiaryForeground, + tertiaryBackground: Color = this.tertiaryBackground, + quartenaryBackground: Color = this.quartenaryBackground, + brandForeground: Color = this.brandForeground, + brandBackground: Color = this.brandBackground, + error: Color = this.error, + warning: Color = this.warning, + wp: Color = this.wp, + wpBackground: Color = this.wpBackground, + isLight: Boolean = this.isLight + ): DesignSystemColorsBase = DesignSystemColorsBase( + primaryForeground, + primaryBackground, + secondaryForeground, + secondaryBackground, + tertiaryForeground, + tertiaryBackground, + quartenaryBackground, + brandForeground, + brandBackground, + error, + warning, + wp, + wpBackground, + isLight + ) + + override fun toString(): String { + return "Colors(" + + "primaryForeground=$primaryForeground, " + + "primaryBackground=$primaryBackground, " + + "secondaryForeground=$secondaryForeground, " + + "secondaryBackground=$secondaryBackground, " + + "tertiaryForeground=$tertiaryForeground, " + + "tertiaryBackground=$tertiaryBackground, " + + "quartenaryBackground=$quartenaryBackground, " + + "brandForeground=$brandForeground, " + + "brandBackground=$brandBackground, " + + "error=$error, " + + "warning=$warning, " + + "wp=$wp, " + + "wpBackground=$wpBackground, " + + "isLight=$isLight" + + ")" + } +} + +/** + * Creates a complete color definition for the Design System light theme. + * + * @see darkColors + */ +fun lightColors( + primaryForeground: Color = DesignSystemAppColor.Black, + primaryBackground: Color = DesignSystemAppColor.White, + secondaryForeground: Color = DesignSystemAppColor.GrayWIP2, + secondaryBackground: Color = DesignSystemAppColor.Gray, + tertiaryForeground: Color = DesignSystemAppColor.GrayWIP, + tertiaryBackground: Color = DesignSystemAppColor.Gray10, + quartenaryBackground: Color = DesignSystemAppColor.Gray30, + brandForeground: Color = DesignSystemAppColor.Green, + brandBackground: Color = DesignSystemAppColor.Green, + error: Color = DesignSystemAppColor.Red, + warning: Color = DesignSystemAppColor.Orange, + wp: Color = DesignSystemAppColor.Blue, + wpBackground: Color = DesignSystemAppColor.Blue +): DesignSystemColorsBase = DesignSystemColorsBase( + primaryForeground, + primaryBackground, + secondaryForeground, + secondaryBackground, + tertiaryForeground, + tertiaryBackground, + quartenaryBackground, + brandForeground, + brandBackground, + error, + warning, + wp, + wpBackground, + true +) + +/** + * Creates a complete color definition for the Design System dark theme. + * + * @see lightColors + */ +fun darkColors( + primaryForeground: Color = DesignSystemAppColor.White, + primaryBackground: Color = DesignSystemAppColor.Black, + secondaryForeground: Color = DesignSystemAppColor.Gray20, + secondaryBackground: Color = DesignSystemAppColor.Gray50, + tertiaryForeground: Color = DesignSystemAppColor.Gray10, + tertiaryBackground: Color = DesignSystemAppColor.Gray60, + quartenaryBackground: Color = DesignSystemAppColor.Gray40, + brandForeground: Color = DesignSystemAppColor.Green10, + brandBackground: Color = DesignSystemAppColor.Green20, + error: Color = DesignSystemAppColor.Red10, + warning: Color = DesignSystemAppColor.Orange10, + wp: Color = DesignSystemAppColor.Blue10, + wpBackground: Color = DesignSystemAppColor.Blue20 +): DesignSystemColorsBase = DesignSystemColorsBase( + primaryForeground, + primaryBackground, + secondaryForeground, + secondaryBackground, + tertiaryForeground, + tertiaryBackground, + quartenaryBackground, + brandForeground, + brandBackground, + error, + warning, + wp, + wpBackground, + false +) + +internal fun DesignSystemColorsBase.updateColorsFrom(other: DesignSystemColorsBase) { + primaryForeground = other.primaryForeground + primaryBackground = other.primaryBackground + secondaryForeground = other.secondaryForeground + secondaryBackground = other.secondaryBackground + tertiaryForeground = other.tertiaryForeground + tertiaryBackground = other.tertiaryBackground + quartenaryBackground = other.quartenaryBackground + brandForeground = other.brandForeground + error = other.error + warning = other.warning + wp = other.wp + wpBackground = other.wpBackground + isLight = other.isLight +} + +/** + * CompositionLocal used to pass [Colors] down the tree. + */ +internal val LocalColors = staticCompositionLocalOf { lightColors() } + From 0207293f0909fba85e3409da0ca00e53c9ff4c59 Mon Sep 17 00:00:00 2001 From: Aditi Bhatia Date: Tue, 30 Jan 2024 15:54:20 -0800 Subject: [PATCH 08/16] Update colors + renaming --- .../android/designsystem/DesignSystemScreen.kt | 13 +++++++------ .../android/designsystem/DesignSystemStartScreen.kt | 6 +++--- 2 files changed, 10 insertions(+), 9 deletions(-) diff --git a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemScreen.kt b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemScreen.kt index 2168e7048b22..9d154c4c7b94 100644 --- a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemScreen.kt +++ b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemScreen.kt @@ -1,12 +1,12 @@ package org.wordpress.android.designsystem import androidx.annotation.StringRes +import androidx.compose.foundation.background import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.widthIn import androidx.compose.material3.Button import androidx.compose.material3.ButtonDefaults -import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Scaffold import androidx.compose.material3.Text import androidx.compose.runtime.Composable @@ -37,7 +37,7 @@ fun SelectOptionButton( Button( onClick = onClick, modifier = modifier.widthIn(min = 250.dp), - colors = ButtonDefaults.buttonColors(containerColor = MaterialTheme.colorScheme.primary) + colors = ButtonDefaults.buttonColors(containerColor = DesignSystemTheme.colors.brandForeground) ) { Text(stringResource(labelResourceId)) } @@ -60,18 +60,19 @@ fun DesignSystem( title = stringResource(R.string.preference_design_system), navigationIcon = NavigationIcons.BackIcon, onNavigationIconClick = { onBackTapped() }, - backgroundColor = MaterialTheme.colorScheme.surface, - contentColor = MaterialTheme.colorScheme.onSurface, + backgroundColor = DesignSystemTheme.colors.primaryBackground, + contentColor = DesignSystemTheme.colors.primaryForeground, ) - }, + } ) { innerPadding -> NavHost( + modifier = Modifier.background(DesignSystemTheme.colors.primaryBackground), navController = navController, startDestination = DesignSystemScreen.Start.name ) { composable(route = DesignSystemScreen.Start.name) { DesignSystemStartScreen( - onNextButtonClicked = { + onButtonClicked = { navController.navigate(it) }, modifier = Modifier diff --git a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemStartScreen.kt b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemStartScreen.kt index e082a6fb5f64..3a4fecb26c92 100644 --- a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemStartScreen.kt +++ b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemStartScreen.kt @@ -13,7 +13,7 @@ import org.wordpress.android.R @Composable fun DesignSystemStartScreen( - onNextButtonClicked: (String) -> Unit, + onButtonClicked: (String) -> Unit, modifier: Modifier = Modifier ) { LazyColumn ( @@ -27,7 +27,7 @@ fun DesignSystemStartScreen( DesignSystemDataSource.startScreenButtonOptions.forEach { item -> SelectOptionButton( labelResourceId = item.first, - onClick = { onNextButtonClicked(item.second) } + onClick = { onButtonClicked(item.second) } ) } } @@ -38,7 +38,7 @@ fun DesignSystemStartScreen( @Composable fun StartDesignSystemStartScreenPreview(){ DesignSystemStartScreen( - onNextButtonClicked = {}, + onButtonClicked = {}, modifier = Modifier .fillMaxSize() .padding(dimensionResource(R.dimen.button_container_shadow_height)) From 509302a6d30b05bb7b4a2d6cf2d67e503075f70c Mon Sep 17 00:00:00 2001 From: Aditi Bhatia Date: Tue, 30 Jan 2024 16:29:41 -0800 Subject: [PATCH 09/16] Remove redundancy + detekt --- .../designsystem/DesignSystemColors.kt | 46 ------------------- .../designsystem/DesignSystemColorsBase.kt | 1 + 2 files changed, 1 insertion(+), 46 deletions(-) delete mode 100644 WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColors.kt diff --git a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColors.kt b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColors.kt deleted file mode 100644 index b02fb68ff75b..000000000000 --- a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColors.kt +++ /dev/null @@ -1,46 +0,0 @@ -package org.wordpress.android.designsystem - -import android.annotation.SuppressLint -import androidx.compose.foundation.isSystemInDarkTheme -import androidx.compose.runtime.Composable - -@SuppressLint("ConflictingOnColor") -val DesignSystemLightPalette = lightColors( - primaryForeground = DesignSystemAppColor.Black, - primaryBackground = DesignSystemAppColor.White, - secondaryForeground = DesignSystemAppColor.GrayWIP2, - secondaryBackground = DesignSystemAppColor.Gray, - tertiaryForeground = DesignSystemAppColor.GrayWIP, - tertiaryBackground = DesignSystemAppColor.Gray10, - quartenaryBackground = DesignSystemAppColor.Gray30, - brandForeground = DesignSystemAppColor.Green, - brandBackground = DesignSystemAppColor.Green, - error = DesignSystemAppColor.Red, - warning = DesignSystemAppColor.Orange, - wp = DesignSystemAppColor.Blue, - wpBackground = DesignSystemAppColor.Blue - -) - -@SuppressLint("ConflictingOnColor") -val DesignSystemDarkPalette = darkColors( - primaryForeground = DesignSystemAppColor.White, - primaryBackground = DesignSystemAppColor.Black, - secondaryForeground = DesignSystemAppColor.Gray20, - secondaryBackground = DesignSystemAppColor.Gray50, - tertiaryForeground = DesignSystemAppColor.Gray10, - tertiaryBackground = DesignSystemAppColor.Gray60, - quartenaryBackground = DesignSystemAppColor.Gray40, - brandForeground = DesignSystemAppColor.Green10, - brandBackground = DesignSystemAppColor.Green20, - error = DesignSystemAppColor.Red10, - warning = DesignSystemAppColor.Orange10, - wp = DesignSystemAppColor.Blue10, - wpBackground = DesignSystemAppColor.Blue20 -) - -@Composable -fun designSystemColorPalette(isDarkTheme: Boolean = isSystemInDarkTheme()) = when (isDarkTheme) { - true -> DesignSystemDarkPalette - else -> DesignSystemLightPalette -} diff --git a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColorsBase.kt b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColorsBase.kt index 74667affb62d..f736caad4013 100644 --- a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColorsBase.kt +++ b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColorsBase.kt @@ -9,6 +9,7 @@ import androidx.compose.runtime.staticCompositionLocalOf import androidx.compose.runtime.structuralEqualityPolicy import androidx.compose.ui.graphics.Color +@Suppress("complexity:LongParameterList") @Stable class DesignSystemColorsBase( primaryForeground: Color, From cb4ec5738083bb0d1b81a2ed63cca3e39645da8e Mon Sep 17 00:00:00 2001 From: Aditi Bhatia Date: Tue, 30 Jan 2024 16:35:04 -0800 Subject: [PATCH 10/16] Rename DesignSystemColors --- ...DesignSystemColorsBase.kt => DesignSystemColors.kt} | 10 +++++----- .../android/designsystem/DesignSystemTheme.kt | 4 ++-- 2 files changed, 7 insertions(+), 7 deletions(-) rename WordPress/src/main/java/org/wordpress/android/designsystem/{DesignSystemColorsBase.kt => DesignSystemColors.kt} (96%) diff --git a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColorsBase.kt b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColors.kt similarity index 96% rename from WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColorsBase.kt rename to WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColors.kt index f736caad4013..326a4249f6b3 100644 --- a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColorsBase.kt +++ b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColors.kt @@ -11,7 +11,7 @@ import androidx.compose.ui.graphics.Color @Suppress("complexity:LongParameterList") @Stable -class DesignSystemColorsBase( +class DesignSystemColors( primaryForeground: Color, primaryBackground: Color, secondaryForeground: Color, @@ -74,7 +74,7 @@ class DesignSystemColorsBase( wp: Color = this.wp, wpBackground: Color = this.wpBackground, isLight: Boolean = this.isLight - ): DesignSystemColorsBase = DesignSystemColorsBase( + ): DesignSystemColors = DesignSystemColors( primaryForeground, primaryBackground, secondaryForeground, @@ -130,7 +130,7 @@ fun lightColors( warning: Color = DesignSystemAppColor.Orange, wp: Color = DesignSystemAppColor.Blue, wpBackground: Color = DesignSystemAppColor.Blue -): DesignSystemColorsBase = DesignSystemColorsBase( +): DesignSystemColors = DesignSystemColors( primaryForeground, primaryBackground, secondaryForeground, @@ -166,7 +166,7 @@ fun darkColors( warning: Color = DesignSystemAppColor.Orange10, wp: Color = DesignSystemAppColor.Blue10, wpBackground: Color = DesignSystemAppColor.Blue20 -): DesignSystemColorsBase = DesignSystemColorsBase( +): DesignSystemColors = DesignSystemColors( primaryForeground, primaryBackground, secondaryForeground, @@ -183,7 +183,7 @@ fun darkColors( false ) -internal fun DesignSystemColorsBase.updateColorsFrom(other: DesignSystemColorsBase) { +internal fun DesignSystemColors.updateColorsFrom(other: DesignSystemColors) { primaryForeground = other.primaryForeground primaryBackground = other.primaryBackground secondaryForeground = other.secondaryForeground diff --git a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemTheme.kt b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemTheme.kt index cec6735aba31..53caf983dd7b 100644 --- a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemTheme.kt +++ b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemTheme.kt @@ -7,7 +7,7 @@ import androidx.compose.runtime.remember @Composable fun DesignSystemTheme( - colors: DesignSystemColorsBase = DesignSystemTheme.colors, + colors: DesignSystemColors = DesignSystemTheme.colors, content: @Composable () -> Unit ) { val rememberedColors = remember { colors.copy() }.apply { updateColorsFrom(colors) } @@ -19,7 +19,7 @@ fun DesignSystemTheme( } object DesignSystemTheme { - val colors: DesignSystemColorsBase + val colors: DesignSystemColors @Composable @ReadOnlyComposable get() = LocalColors.current From 7eb2507802d6e51d79002e20edbff035dd23a7df Mon Sep 17 00:00:00 2001 From: Aditi Bhatia Date: Wed, 31 Jan 2024 14:24:05 -0800 Subject: [PATCH 11/16] Update color names --- .../android/designsystem/DesignSystemAppColor.kt | 10 +++++----- .../android/designsystem/DesignSystemColors.kt | 10 +++++----- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemAppColor.kt b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemAppColor.kt index 8bbcbfc933f7..fe3cf85b052c 100644 --- a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemAppColor.kt +++ b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemAppColor.kt @@ -30,19 +30,19 @@ object DesignSystemAppColor { val Gray30 = Color(0xFF9B9B9E) @Stable - val Gray40 = Color(0xFF4E4E4F) + val Gray40 = Color(0x993C3C43) @Stable - val Gray50 = Color(0xFF3A3A3C) + val Gray50 = Color(0x4D3C3C43) @Stable - val Gray60 = Color(0xFF2C2C2E) + val Gray60 = Color(0xFF4E4E4F) @Stable - val GrayWIP2 = Color(0x993C3C43) // this doesn't look right - foreground light mode: secondary + val Gray70 = Color(0xFF3A3A3C) @Stable - val GrayWIP = Color(0x4D3C3C43) // this doesn't look right - foreground light mode: tertiary + val Gray80 = Color(0xFF2C2C2E) // Blues @Stable diff --git a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColors.kt b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColors.kt index 326a4249f6b3..36ccf4d72b08 100644 --- a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColors.kt +++ b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColors.kt @@ -119,9 +119,9 @@ class DesignSystemColors( fun lightColors( primaryForeground: Color = DesignSystemAppColor.Black, primaryBackground: Color = DesignSystemAppColor.White, - secondaryForeground: Color = DesignSystemAppColor.GrayWIP2, + secondaryForeground: Color = DesignSystemAppColor.Gray40, secondaryBackground: Color = DesignSystemAppColor.Gray, - tertiaryForeground: Color = DesignSystemAppColor.GrayWIP, + tertiaryForeground: Color = DesignSystemAppColor.Gray50, tertiaryBackground: Color = DesignSystemAppColor.Gray10, quartenaryBackground: Color = DesignSystemAppColor.Gray30, brandForeground: Color = DesignSystemAppColor.Green, @@ -156,10 +156,10 @@ fun darkColors( primaryForeground: Color = DesignSystemAppColor.White, primaryBackground: Color = DesignSystemAppColor.Black, secondaryForeground: Color = DesignSystemAppColor.Gray20, - secondaryBackground: Color = DesignSystemAppColor.Gray50, + secondaryBackground: Color = DesignSystemAppColor.Gray70, tertiaryForeground: Color = DesignSystemAppColor.Gray10, - tertiaryBackground: Color = DesignSystemAppColor.Gray60, - quartenaryBackground: Color = DesignSystemAppColor.Gray40, + tertiaryBackground: Color = DesignSystemAppColor.Gray80, + quartenaryBackground: Color = DesignSystemAppColor.Gray60, brandForeground: Color = DesignSystemAppColor.Green10, brandBackground: Color = DesignSystemAppColor.Green20, error: Color = DesignSystemAppColor.Red10, From 62c01d024ce3df39792d3c8119659046dd761afe Mon Sep 17 00:00:00 2001 From: Aditi Bhatia Date: Fri, 2 Feb 2024 14:45:04 -0800 Subject: [PATCH 12/16] Remove independent theme --- .../designsystem/DesignSystemColors.kt | 206 ------------------ .../android/designsystem/DesignSystemTheme.kt | 27 --- 2 files changed, 233 deletions(-) delete mode 100644 WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColors.kt delete mode 100644 WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemTheme.kt diff --git a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColors.kt b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColors.kt deleted file mode 100644 index 36ccf4d72b08..000000000000 --- a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColors.kt +++ /dev/null @@ -1,206 +0,0 @@ -package org.wordpress.android.designsystem - -import androidx.compose.material.Colors -import androidx.compose.runtime.Stable -import androidx.compose.runtime.getValue -import androidx.compose.runtime.mutableStateOf -import androidx.compose.runtime.setValue -import androidx.compose.runtime.staticCompositionLocalOf -import androidx.compose.runtime.structuralEqualityPolicy -import androidx.compose.ui.graphics.Color - -@Suppress("complexity:LongParameterList") -@Stable -class DesignSystemColors( - primaryForeground: Color, - primaryBackground: Color, - secondaryForeground: Color, - secondaryBackground: Color, - tertiaryForeground: Color, - tertiaryBackground: Color, - quartenaryBackground: Color, - brandForeground: Color, - brandBackground: Color, - error: Color, - warning: Color, - wp: Color, - wpBackground: Color, - isLight: Boolean -) { - var primaryForeground by mutableStateOf(primaryForeground, structuralEqualityPolicy()) - internal set - var primaryBackground by mutableStateOf(primaryBackground, structuralEqualityPolicy()) - internal set - var secondaryForeground by mutableStateOf(secondaryForeground, structuralEqualityPolicy()) - internal set - var secondaryBackground by mutableStateOf(secondaryBackground, structuralEqualityPolicy()) - internal set - var tertiaryForeground by mutableStateOf(tertiaryForeground, structuralEqualityPolicy()) - internal set - var tertiaryBackground by mutableStateOf(tertiaryBackground, structuralEqualityPolicy()) - internal set - var quartenaryBackground by mutableStateOf(quartenaryBackground, structuralEqualityPolicy()) - internal set - var brandForeground by mutableStateOf(brandForeground, structuralEqualityPolicy()) - internal set - var brandBackground by mutableStateOf(brandBackground, structuralEqualityPolicy()) - internal set - var error by mutableStateOf(error, structuralEqualityPolicy()) - internal set - var warning by mutableStateOf(warning, structuralEqualityPolicy()) - internal set - var wp by mutableStateOf(wp, structuralEqualityPolicy()) - internal set - var wpBackground by mutableStateOf(wpBackground, structuralEqualityPolicy()) - internal set - var isLight by mutableStateOf(isLight, structuralEqualityPolicy()) - internal set - - /** - * Returns a copy of this Colors, optionally overriding some of the values. - */ - fun copy( - primaryForeground: Color = this.primaryForeground, - primaryBackground: Color = this.primaryBackground, - secondaryForeground: Color = this.secondaryForeground, - secondaryBackground: Color = this.secondaryBackground, - tertiaryForeground: Color = this.tertiaryForeground, - tertiaryBackground: Color = this.tertiaryBackground, - quartenaryBackground: Color = this.quartenaryBackground, - brandForeground: Color = this.brandForeground, - brandBackground: Color = this.brandBackground, - error: Color = this.error, - warning: Color = this.warning, - wp: Color = this.wp, - wpBackground: Color = this.wpBackground, - isLight: Boolean = this.isLight - ): DesignSystemColors = DesignSystemColors( - primaryForeground, - primaryBackground, - secondaryForeground, - secondaryBackground, - tertiaryForeground, - tertiaryBackground, - quartenaryBackground, - brandForeground, - brandBackground, - error, - warning, - wp, - wpBackground, - isLight - ) - - override fun toString(): String { - return "Colors(" + - "primaryForeground=$primaryForeground, " + - "primaryBackground=$primaryBackground, " + - "secondaryForeground=$secondaryForeground, " + - "secondaryBackground=$secondaryBackground, " + - "tertiaryForeground=$tertiaryForeground, " + - "tertiaryBackground=$tertiaryBackground, " + - "quartenaryBackground=$quartenaryBackground, " + - "brandForeground=$brandForeground, " + - "brandBackground=$brandBackground, " + - "error=$error, " + - "warning=$warning, " + - "wp=$wp, " + - "wpBackground=$wpBackground, " + - "isLight=$isLight" + - ")" - } -} - -/** - * Creates a complete color definition for the Design System light theme. - * - * @see darkColors - */ -fun lightColors( - primaryForeground: Color = DesignSystemAppColor.Black, - primaryBackground: Color = DesignSystemAppColor.White, - secondaryForeground: Color = DesignSystemAppColor.Gray40, - secondaryBackground: Color = DesignSystemAppColor.Gray, - tertiaryForeground: Color = DesignSystemAppColor.Gray50, - tertiaryBackground: Color = DesignSystemAppColor.Gray10, - quartenaryBackground: Color = DesignSystemAppColor.Gray30, - brandForeground: Color = DesignSystemAppColor.Green, - brandBackground: Color = DesignSystemAppColor.Green, - error: Color = DesignSystemAppColor.Red, - warning: Color = DesignSystemAppColor.Orange, - wp: Color = DesignSystemAppColor.Blue, - wpBackground: Color = DesignSystemAppColor.Blue -): DesignSystemColors = DesignSystemColors( - primaryForeground, - primaryBackground, - secondaryForeground, - secondaryBackground, - tertiaryForeground, - tertiaryBackground, - quartenaryBackground, - brandForeground, - brandBackground, - error, - warning, - wp, - wpBackground, - true -) - -/** - * Creates a complete color definition for the Design System dark theme. - * - * @see lightColors - */ -fun darkColors( - primaryForeground: Color = DesignSystemAppColor.White, - primaryBackground: Color = DesignSystemAppColor.Black, - secondaryForeground: Color = DesignSystemAppColor.Gray20, - secondaryBackground: Color = DesignSystemAppColor.Gray70, - tertiaryForeground: Color = DesignSystemAppColor.Gray10, - tertiaryBackground: Color = DesignSystemAppColor.Gray80, - quartenaryBackground: Color = DesignSystemAppColor.Gray60, - brandForeground: Color = DesignSystemAppColor.Green10, - brandBackground: Color = DesignSystemAppColor.Green20, - error: Color = DesignSystemAppColor.Red10, - warning: Color = DesignSystemAppColor.Orange10, - wp: Color = DesignSystemAppColor.Blue10, - wpBackground: Color = DesignSystemAppColor.Blue20 -): DesignSystemColors = DesignSystemColors( - primaryForeground, - primaryBackground, - secondaryForeground, - secondaryBackground, - tertiaryForeground, - tertiaryBackground, - quartenaryBackground, - brandForeground, - brandBackground, - error, - warning, - wp, - wpBackground, - false -) - -internal fun DesignSystemColors.updateColorsFrom(other: DesignSystemColors) { - primaryForeground = other.primaryForeground - primaryBackground = other.primaryBackground - secondaryForeground = other.secondaryForeground - secondaryBackground = other.secondaryBackground - tertiaryForeground = other.tertiaryForeground - tertiaryBackground = other.tertiaryBackground - quartenaryBackground = other.quartenaryBackground - brandForeground = other.brandForeground - error = other.error - warning = other.warning - wp = other.wp - wpBackground = other.wpBackground - isLight = other.isLight -} - -/** - * CompositionLocal used to pass [Colors] down the tree. - */ -internal val LocalColors = staticCompositionLocalOf { lightColors() } - diff --git a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemTheme.kt b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemTheme.kt deleted file mode 100644 index 53caf983dd7b..000000000000 --- a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemTheme.kt +++ /dev/null @@ -1,27 +0,0 @@ -package org.wordpress.android.designsystem - -import androidx.compose.runtime.Composable -import androidx.compose.runtime.CompositionLocalProvider -import androidx.compose.runtime.ReadOnlyComposable -import androidx.compose.runtime.remember - -@Composable -fun DesignSystemTheme( - colors: DesignSystemColors = DesignSystemTheme.colors, - content: @Composable () -> Unit -) { - val rememberedColors = remember { colors.copy() }.apply { updateColorsFrom(colors) } - CompositionLocalProvider( - LocalColors provides rememberedColors - ) { - content() - } -} - - object DesignSystemTheme { - val colors: DesignSystemColors - @Composable - @ReadOnlyComposable - get() = LocalColors.current - } - From ab145c7686946b9bf903171e9404a7c5b2e09cc5 Mon Sep 17 00:00:00 2001 From: Aditi Bhatia Date: Fri, 2 Feb 2024 14:53:30 -0800 Subject: [PATCH 13/16] Create DesignSystemTheme.kt --- .../android/designsystem/DesignSystemTheme.kt | 137 ++++++++++++++++++ 1 file changed, 137 insertions(+) create mode 100644 WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemTheme.kt diff --git a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemTheme.kt b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemTheme.kt new file mode 100644 index 000000000000..6581b6bc180d --- /dev/null +++ b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemTheme.kt @@ -0,0 +1,137 @@ +package org.wordpress.android.designsystem + +import androidx.compose.foundation.isSystemInDarkTheme +import androidx.compose.material3.ColorScheme +import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.ProvideTextStyle +import androidx.compose.material3.Surface +import androidx.compose.material3.darkColorScheme +import androidx.compose.material3.lightColorScheme +import androidx.compose.runtime.Composable +import androidx.compose.runtime.CompositionLocalProvider +import androidx.compose.runtime.ReadOnlyComposable +import androidx.compose.runtime.staticCompositionLocalOf +import androidx.compose.ui.graphics.Color + +private val localColors = staticCompositionLocalOf { extraPaletteLight } + +@Composable +fun DesignSystemTheme( + isDarkTheme: Boolean = isSystemInDarkTheme(), + content: @Composable () -> Unit +) { + DesignSystemThemeWithoutBackground(isDarkTheme) { + ContentInSurface(content) + } +} + +@Composable +fun DesignSystemThemeWithoutBackground( + isDarkTheme: Boolean = isSystemInDarkTheme(), + content: @Composable () -> Unit +) { + val extraColors = if (isDarkTheme) { + extraPaletteDark + } else { + extraPaletteLight + } + CompositionLocalProvider (localColors provides extraColors) { + MaterialTheme( + colorScheme = if (isDarkTheme) { + darkColorScheme( + primary = DesignSystemAppColor.White, + primaryContainer = DesignSystemAppColor.Black, + secondary = DesignSystemAppColor.Gray20, + secondaryContainer = DesignSystemAppColor.Gray70, + tertiary = DesignSystemAppColor.Gray10, + tertiaryContainer = DesignSystemAppColor.Gray80, + error = DesignSystemAppColor.Red10, + ) + } else { + lightColorScheme( + primary = DesignSystemAppColor.Black, + primaryContainer = DesignSystemAppColor.White, + secondary = DesignSystemAppColor.Gray40, + secondaryContainer = DesignSystemAppColor.Gray, + tertiary = DesignSystemAppColor.Gray50, + tertiaryContainer = DesignSystemAppColor.Gray10, + error = DesignSystemAppColor.Red, + ) + }, + content = content + ) + } +} + +private val extraPaletteLight = ExtraColors( + quartenaryContainer = DesignSystemAppColor.Gray30, + brand = DesignSystemAppColor.Green, + brandContainer = DesignSystemAppColor.Green, + warning = DesignSystemAppColor.Orange, + wp = DesignSystemAppColor.Blue, + wpContainer = DesignSystemAppColor.Blue + ) + +private val extraPaletteDark = ExtraColors( + quartenaryContainer = DesignSystemAppColor.Gray60, + brand = DesignSystemAppColor.Green10, + brandContainer = DesignSystemAppColor.Green20, + warning = DesignSystemAppColor.Orange10, + wp = DesignSystemAppColor.Blue10, + wpContainer = DesignSystemAppColor.Blue20 + ) + +data class ExtraColors( + val quartenaryContainer: Color, + val brand: Color, + val brandContainer: Color, + val warning: Color, + val wp: Color, + val wpContainer: Color, + ) +@Suppress("UnusedReceiverParameter") +val ColorScheme.quartenary + @Composable + @ReadOnlyComposable + get() = localColors.current.quartenaryContainer + +@Suppress("UnusedReceiverParameter") +val ColorScheme.brand + @Composable + @ReadOnlyComposable + get() = localColors.current.brand + +@Suppress("UnusedReceiverParameter") +val ColorScheme.brandContainer + @Composable + @ReadOnlyComposable + get() = localColors.current.brandContainer + +@Suppress("UnusedReceiverParameter") +val ColorScheme.warning + @Composable + @ReadOnlyComposable + get() = localColors.current.warning + +@Suppress("UnusedReceiverParameter") +val ColorScheme.wp + @Composable + @ReadOnlyComposable + get() = localColors.current.wp + +@Suppress("UnusedReceiverParameter") +val ColorScheme.wpContainer + @Composable + @ReadOnlyComposable + get() = localColors.current.wpContainer + +@Composable +private fun ContentInSurface( + content: @Composable () -> Unit +) { + Surface(color = MaterialTheme.colorScheme.background) { + ProvideTextStyle(value = MaterialTheme.typography.bodyMedium) { + content() + } + } +} From c78fb91fb66f8ce0bba299073447043ee023ed22 Mon Sep 17 00:00:00 2001 From: Aditi Bhatia Date: Fri, 2 Feb 2024 15:05:53 -0800 Subject: [PATCH 14/16] Update DesignSystemActivity.kt to use new theme --- .../wordpress/android/designsystem/DesignSystemActivity.kt | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemActivity.kt b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemActivity.kt index 96857d9b4264..cdfca9f87357 100644 --- a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemActivity.kt +++ b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemActivity.kt @@ -12,8 +12,7 @@ class DesignSystemActivity : LocaleAwareActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { - val colors = if (isSystemInDarkTheme()) darkColors() else lightColors() - DesignSystemTheme(colors) { + DesignSystemTheme(isSystemInDarkTheme()) { DesignSystem(onBackPressedDispatcher::onBackPressed) } } @@ -27,8 +26,7 @@ class DesignSystemActivity : LocaleAwareActivity() { ) @Composable fun PreviewDesignSystemActivity() { - val colors = if (isSystemInDarkTheme()) darkColors() else lightColors() - DesignSystemTheme(colors) { + DesignSystemTheme(isSystemInDarkTheme()) { DesignSystem(onBackPressedDispatcher::onBackPressed) } } From 9e80727b75844baf293b0661666392049c78eb94 Mon Sep 17 00:00:00 2001 From: Aditi Bhatia Date: Fri, 2 Feb 2024 15:07:16 -0800 Subject: [PATCH 15/16] Update DesignSystemScreen.kt to use new theme --- .../android/designsystem/DesignSystemScreen.kt | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemScreen.kt b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemScreen.kt index 9d154c4c7b94..bbe2753a09ac 100644 --- a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemScreen.kt +++ b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemScreen.kt @@ -2,11 +2,13 @@ package org.wordpress.android.designsystem import androidx.annotation.StringRes import androidx.compose.foundation.background +import androidx.compose.foundation.isSystemInDarkTheme import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.widthIn import androidx.compose.material3.Button import androidx.compose.material3.ButtonDefaults +import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Scaffold import androidx.compose.material3.Text import androidx.compose.runtime.Composable @@ -37,7 +39,10 @@ fun SelectOptionButton( Button( onClick = onClick, modifier = modifier.widthIn(min = 250.dp), - colors = ButtonDefaults.buttonColors(containerColor = DesignSystemTheme.colors.brandForeground) + colors = ButtonDefaults.buttonColors( + containerColor = MaterialTheme.colorScheme.brand, + contentColor = MaterialTheme.colorScheme.primaryContainer + ) ) { Text(stringResource(labelResourceId)) } @@ -46,7 +51,9 @@ fun SelectOptionButton( @Preview @Composable fun StartDesignSystemPreview(){ - DesignSystem {} + DesignSystemTheme(isSystemInDarkTheme()) { + DesignSystem {} + } } @Composable @@ -60,13 +67,13 @@ fun DesignSystem( title = stringResource(R.string.preference_design_system), navigationIcon = NavigationIcons.BackIcon, onNavigationIconClick = { onBackTapped() }, - backgroundColor = DesignSystemTheme.colors.primaryBackground, - contentColor = DesignSystemTheme.colors.primaryForeground, + backgroundColor = MaterialTheme.colorScheme.primaryContainer, + contentColor = MaterialTheme.colorScheme.primary, ) } ) { innerPadding -> NavHost( - modifier = Modifier.background(DesignSystemTheme.colors.primaryBackground), + modifier = Modifier.background(MaterialTheme.colorScheme.primaryContainer), navController = navController, startDestination = DesignSystemScreen.Start.name ) { From b3147f98d1e73b087dd1f6225ec62b1b113be4d8 Mon Sep 17 00:00:00 2001 From: Aditi Bhatia Date: Mon, 5 Feb 2024 11:42:01 -0800 Subject: [PATCH 16/16] Move out light/dark scheme definitions to separate variables --- .../android/designsystem/DesignSystemTheme.kt | 42 +++++++++---------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemTheme.kt b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemTheme.kt index 6581b6bc180d..42e76196ac5e 100644 --- a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemTheme.kt +++ b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemTheme.kt @@ -35,33 +35,33 @@ fun DesignSystemThemeWithoutBackground( } else { extraPaletteLight } + CompositionLocalProvider (localColors provides extraColors) { MaterialTheme( - colorScheme = if (isDarkTheme) { - darkColorScheme( - primary = DesignSystemAppColor.White, - primaryContainer = DesignSystemAppColor.Black, - secondary = DesignSystemAppColor.Gray20, - secondaryContainer = DesignSystemAppColor.Gray70, - tertiary = DesignSystemAppColor.Gray10, - tertiaryContainer = DesignSystemAppColor.Gray80, - error = DesignSystemAppColor.Red10, - ) - } else { - lightColorScheme( - primary = DesignSystemAppColor.Black, - primaryContainer = DesignSystemAppColor.White, - secondary = DesignSystemAppColor.Gray40, - secondaryContainer = DesignSystemAppColor.Gray, - tertiary = DesignSystemAppColor.Gray50, - tertiaryContainer = DesignSystemAppColor.Gray10, - error = DesignSystemAppColor.Red, - ) - }, + colorScheme = if (isDarkTheme) paletteDarkScheme else paletteLightScheme, content = content ) } } +private val paletteLightScheme = lightColorScheme( + primary = DesignSystemAppColor.Black, + primaryContainer = DesignSystemAppColor.White, + secondary = DesignSystemAppColor.Gray40, + secondaryContainer = DesignSystemAppColor.Gray, + tertiary = DesignSystemAppColor.Gray50, + tertiaryContainer = DesignSystemAppColor.Gray10, + error = DesignSystemAppColor.Red, + ) + +private val paletteDarkScheme = darkColorScheme( + primary = DesignSystemAppColor.White, + primaryContainer = DesignSystemAppColor.Black, + secondary = DesignSystemAppColor.Gray20, + secondaryContainer = DesignSystemAppColor.Gray70, + tertiary = DesignSystemAppColor.Gray10, + tertiaryContainer = DesignSystemAppColor.Gray80, + error = DesignSystemAppColor.Red10, + ) private val extraPaletteLight = ExtraColors( quartenaryContainer = DesignSystemAppColor.Gray30,