-
Notifications
You must be signed in to change notification settings - Fork 1.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #20082 from wordpress-mobile/feature/19802-designs…
…ystem-part3 Add custom theme for Design System
- Loading branch information
Showing
5 changed files
with
242 additions
and
15 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
80 changes: 80 additions & 0 deletions
80
WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemAppColor.kt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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(0x993C3C43) | ||
|
|
||
| @Stable | ||
| val Gray50 = Color(0x4D3C3C43) | ||
|
|
||
| @Stable | ||
| val Gray60 = Color(0xFF4E4E4F) | ||
|
|
||
| @Stable | ||
| val Gray70 = Color(0xFF3A3A3C) | ||
|
|
||
| @Stable | ||
| val Gray80 = Color(0xFF2C2C2E) | ||
|
|
||
| // 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) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
137 changes: 137 additions & 0 deletions
137
WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemTheme.kt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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) 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, | ||
| 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() | ||
| } | ||
| } | ||
| } |