Improve handling material colors & previews

yasanglass · Mar 16, 2024 · 60c88e2 · 60c88e2
1 parent a98b5af
commit 60c88e2
Show file tree

Hide file tree

Showing 10 changed files with 208 additions and 47 deletions.
diff --git a/concrete/src/main/kotlin/glass/yasan/concrete/component/SpacerVertical.kt b/concrete/src/main/kotlin/glass/yasan/concrete/component/SpacerVertical.kt
diff --git a/concrete/src/main/kotlin/glass/yasan/concrete/component/Switch.kt b/concrete/src/main/kotlin/glass/yasan/concrete/component/Switch.kt
@@ -3,11 +3,14 @@ package glass.yasan.concrete.component
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.tooling.preview.PreviewParameterProvider
 import androidx.compose.ui.unit.sp
+import glass.yasan.concrete.component.internal.ConcretePreviews
+import glass.yasan.concrete.component.internal.PreviewTheme
 import glass.yasan.concrete.component.preference.Preference
 import glass.yasan.concrete.theme.ConcreteTheme
 import glass.yasan.spine.compose.foundation.grid
@@ -91,25 +94,34 @@ internal enum class SwitchPreviewParams(
     Disabled(
         enabled = false,
     ),
+    DisabledUnChecked(
+        enabled = false,
+        checked = false,
+    ),
 }
 
 internal class SwitchPreviewParamsProvider : PreviewParameterProvider<SwitchPreviewParams> {
     override val values: Sequence<SwitchPreviewParams> = SwitchPreviewParams.entries.asSequence()
 }
 
-@Preview
+@ConcretePreviews
 @Composable
 internal fun SwitchPreview(
     @PreviewParameter(SwitchPreviewParamsProvider::class)
     params: SwitchPreviewParams,
 ) {
-    ConcreteTheme {
+    PreviewTheme {
         with(params) {
+            val mutableChecked = remember {
+                mutableStateOf(checked)
+            }
             Switch(
                 title = title,
                 description = description,
-                checked = checked,
-                onCheckedChange = {},
+                checked = mutableChecked.value,
+                onCheckedChange = {
+                    mutableChecked.value = it
+                },
                 enabled = enabled,
             )
         }

diff --git a/concrete/src/main/kotlin/glass/yasan/concrete/component/Text.kt b/concrete/src/main/kotlin/glass/yasan/concrete/component/Text.kt
@@ -1,6 +1,5 @@
 package glass.yasan.concrete.component
 
-import androidx.compose.material3.Surface
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
@@ -10,10 +9,11 @@ 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 glass.yasan.spine.compose.type.rubikFamily
+import glass.yasan.concrete.component.internal.ConcretePreviews
+import glass.yasan.concrete.component.internal.PreviewTheme
 import glass.yasan.concrete.theme.ConcreteTheme
+import glass.yasan.spine.compose.type.rubikFamily
 import androidx.compose.material3.Text as Material3Text
 
 @Composable
@@ -54,17 +54,12 @@ public fun Text(
     )
 }
 
-@Preview
+@ConcretePreviews
 @Composable
 private fun TextPreview() {
-    ConcreteTheme {
-        Surface(
-            color = ConcreteTheme.colors.layer.foreground,
-        ) {
-            Text(
-                text = "Hello World",
-                color = Color.Black,
-            )
-        }
+    PreviewTheme {
+        Text(
+            text = "Concrete Text",
+        )
     }
 }
diff --git a/concrete/src/main/kotlin/glass/yasan/concrete/component/TextMono.kt b/concrete/src/main/kotlin/glass/yasan/concrete/component/TextMono.kt
@@ -9,6 +9,9 @@ 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.unit.TextUnit
+import glass.yasan.concrete.component.internal.ConcretePreviews
+import glass.yasan.concrete.component.internal.PreviewTheme
+import glass.yasan.concrete.theme.ConcreteTheme
 import glass.yasan.spine.compose.type.rubikMonoFamily
 
 @Composable
@@ -46,4 +49,15 @@ public fun TextMono(
         maxLines = maxLines,
         minLines = minLines,
     )
+}
+
+@ConcretePreviews
+@Composable
+private fun TextMonoPreview() {
+    PreviewTheme {
+        TextMono(
+            text = "Concrete Text Mono",
+            color = ConcreteTheme.colors.content.major,
+        )
+    }
 }
diff --git a/concrete/src/main/kotlin/glass/yasan/concrete/component/internal/Preview.kt b/concrete/src/main/kotlin/glass/yasan/concrete/component/internal/Preview.kt
@@ -0,0 +1,40 @@
+package glass.yasan.concrete.component.internal
+
+import android.content.res.Configuration
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.material3.Surface
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import glass.yasan.concrete.theme.ConcreteTheme
+import glass.yasan.concrete.theme.color.darkColors
+import glass.yasan.concrete.theme.color.lightColors
+
+@Composable
+internal fun PreviewTheme(
+    modifier: Modifier = Modifier,
+    content: @Composable () -> Unit,
+) {
+    val colors = when (!isSystemInDarkTheme()) {
+        true -> lightColors()
+        false -> darkColors()
+    }
+    ConcreteTheme(colors = colors) {
+        Surface(
+            modifier = modifier,
+        ) {
+            content()
+        }
+    }
+}
+
+@Preview(
+    name = "Light",
+    group = "light-mode",
+)
+@Preview(
+    name = "Dark",
+    group = "dark-mode",
+    uiMode = Configuration.UI_MODE_NIGHT_YES,
+)
+internal annotation class ConcretePreviews
diff --git a/concrete/src/main/kotlin/glass/yasan/concrete/component/preference/Preference.kt b/concrete/src/main/kotlin/glass/yasan/concrete/component/preference/Preference.kt
@@ -9,9 +9,10 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import glass.yasan.concrete.component.Text
+import glass.yasan.concrete.component.internal.ConcretePreviews
+import glass.yasan.concrete.component.internal.PreviewTheme
 import glass.yasan.concrete.theme.ConcreteTheme
 import glass.yasan.spine.compose.foundation.grid
 
@@ -72,10 +73,10 @@ public fun Preference(
 
 // region Preview
 
-@Preview
+@ConcretePreviews
 @Composable
 private fun PreferenceLayoutPreview() {
-    ConcreteTheme {
+    PreviewTheme {
         Preference(
             start = {
                 Text(

diff --git a/concrete/src/main/kotlin/glass/yasan/concrete/theme/Theme.kt b/concrete/src/main/kotlin/glass/yasan/concrete/theme/Theme.kt
@@ -1,5 +1,6 @@
 package glass.yasan.concrete.theme
 
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.ReadOnlyComposable
@@ -18,11 +19,15 @@ public fun ConcreteTheme(
     val rememberedColors = remember { colors.copy() }.apply { updateColorsFrom(colors) }
     val rememberedSizes = remember { sizes.copy() }.apply { updateSizesFrom(sizes) }
 
-    CompositionLocalProvider(
-        LocalColors provides rememberedColors,
-        LocalSizes provides rememberedSizes,
-        content = content
-    )
+    MaterialTheme(
+        colorScheme = colors.toMaterial3Colors(),
+    ) {
+        CompositionLocalProvider(
+            LocalColors provides rememberedColors,
+            LocalSizes provides rememberedSizes,
+            content = content
+        )
+    }
 }
 
 public object ConcreteTheme {

diff --git a/concrete/src/main/kotlin/glass/yasan/concrete/theme/color/ColorBuilders.kt b/concrete/src/main/kotlin/glass/yasan/concrete/theme/color/ColorBuilders.kt
@@ -3,15 +3,24 @@ package glass.yasan.concrete.theme.color
 import androidx.compose.ui.graphics.Color
 import glass.yasan.concrete.theme.color.Colors.Content
 import glass.yasan.concrete.theme.color.Colors.Layer
+import glass.yasan.concrete.theme.color.Colors.Theme
 
 public fun lightColors(
+    themePrimary: Color = ColorTokens.themePrimary,
+    themeSecondary: Color = ColorTokens.themeSecondary,
     layerForeground: Color = ColorTokens.layerForegroundLight,
     layerMidground: Color = ColorTokens.layerMidgroundLight,
     layerBackground: Color = ColorTokens.layerBackgroundLight,
-    layerBackgroundOpposite: Color = ColorTokens.layerBackgroundOppositeLight,
+    layerForegroundInverse: Color = ColorTokens.layerForegroundDark,
+    layerMidgroundInverse: Color = ColorTokens.layerMidgroundDark,
+    layerBackgroundInverse: Color = ColorTokens.layerBackgroundDark,
     textTitle: Color = ColorTokens.contentMajorLight,
     textDescription: Color = ColorTokens.contentMinorLight,
 ): Colors = Colors(
+    theme = Theme(
+        primary = themePrimary,
+        secondary = themeSecondary,
+    ),
     content = Content(
         major = textTitle,
         minor = textDescription,
@@ -20,24 +29,40 @@ public fun lightColors(
         foreground = layerForeground,
         midground = layerMidground,
         background = layerBackground,
-        backgroundOpposite = layerBackgroundOpposite,
+        foregroundInverse = layerForegroundInverse,
+        midgroundInverse = layerMidgroundInverse,
+        backgroundInverse = layerBackgroundInverse,
     ),
     isLight = true,
 )
 
 public fun darkColors(
+    themePrimary: Color = ColorTokens.themePrimary,
+    themeSecondary: Color = ColorTokens.themeSecondary,
     layerForeground: Color = ColorTokens.layerForegroundDark,
     layerMidground: Color = ColorTokens.layerMidgroundDark,
     layerBackground: Color = ColorTokens.layerBackgroundDark,
-    layerBackgroundOpposite: Color = ColorTokens.layerBackgroundOppositeDark,
+    layerForegroundInverse: Color = ColorTokens.layerForegroundLight,
+    layerMidgroundInverse: Color = ColorTokens.layerMidgroundLight,
+    layerBackgroundInverse: Color = ColorTokens.layerBackgroundLight,
     textTitle: Color = ColorTokens.contentMajorDark,
     textDescription: Color = ColorTokens.contentMinorDark,
 ): Colors = Colors(
-    layerForeground = layerForeground,
-    layerMidground = layerMidground,
-    layerBackground = layerBackground,
-    layerBackgroundOpposite = layerBackgroundOpposite,
-    contentMajor = textTitle,
-    contentMinor = textDescription,
-    isLight = false,
+    theme = Theme(
+        primary = themePrimary,
+        secondary = themeSecondary,
+    ),
+    content = Content(
+        major = textTitle,
+        minor = textDescription,
+    ),
+    layer = Layer(
+        foreground = layerForeground,
+        midground = layerMidground,
+        background = layerBackground,
+        foregroundInverse = layerForegroundInverse,
+        midgroundInverse = layerMidgroundInverse,
+        backgroundInverse = layerBackgroundInverse,
+    ),
+    isLight = true,
 )
diff --git a/concrete/src/main/kotlin/glass/yasan/concrete/theme/color/ColorTokens.kt b/concrete/src/main/kotlin/glass/yasan/concrete/theme/color/ColorTokens.kt
@@ -4,11 +4,14 @@ import androidx.compose.ui.graphics.Color
 
 internal object ColorTokens {
 
+    // Theme
+    val themePrimary = Color(0xFF006970)
+    val themeSecondary = Color(0xFF9f410c)
+
     // Light
     val layerForegroundLight = Color(0xFFFFFFFF)
     val layerMidgroundLight = Color(0xFFEEEEEE)
     val layerBackgroundLight = Color(0xFFD8D8D8)
-    val layerBackgroundOppositeLight = Color(0xFF000000)
     val contentMajorLight = Color(0xFF212121)
     val contentMinorLight = Color(0xFF666666)