From 1dbad15e0e40bd2ca08d11e1ef37c1fcc9948fd8 Mon Sep 17 00:00:00 2001 From: Ben Trengrove Date: Thu, 29 Aug 2024 07:54:10 +1200 Subject: [PATCH 1/2] Migrate CompositionLocal snippets to m3 (#321) --- .../state/CompositionLocalSnippets.kt | 50 +++++++++++-------- 1 file changed, 29 insertions(+), 21 deletions(-) diff --git a/compose/snippets/src/main/java/com/example/compose/snippets/state/CompositionLocalSnippets.kt b/compose/snippets/src/main/java/com/example/compose/snippets/state/CompositionLocalSnippets.kt index d81fc2cec..a2c2aa6dc 100644 --- a/compose/snippets/src/main/java/com/example/compose/snippets/state/CompositionLocalSnippets.kt +++ b/compose/snippets/src/main/java/com/example/compose/snippets/state/CompositionLocalSnippets.kt @@ -21,14 +21,13 @@ import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.compose.foundation.isSystemInDarkTheme import androidx.compose.foundation.layout.Column -import androidx.compose.material.Button -import androidx.compose.material.Card -import androidx.compose.material.Colors -import androidx.compose.material.ContentAlpha -import androidx.compose.material.LocalContentAlpha -import androidx.compose.material.MaterialTheme -import androidx.compose.material.Text -import androidx.compose.material.lightColors +import androidx.compose.material3.Button +import androidx.compose.material3.ColorScheme +import androidx.compose.material3.LocalContentColor +import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.Surface +import androidx.compose.material3.Text +import androidx.compose.material3.lightColorScheme import androidx.compose.runtime.Composable import androidx.compose.runtime.CompositionLocalProvider import androidx.compose.runtime.compositionLocalOf @@ -67,7 +66,7 @@ object CompositionLocalSnippets2 { fun MyApp() { // Provides a Theme whose values are propagated down its `content` MaterialTheme { - // New values for colors, typography, and shapes are available + // New values for colorScheme, typography, and shapes are available // in MaterialTheme's content lambda. // ... content here ... @@ -81,7 +80,7 @@ object CompositionLocalSnippets2 { text = labelText, // `primary` is obtained from MaterialTheme's // LocalColors CompositionLocal - color = MaterialTheme.colors.primary + color = MaterialTheme.colorScheme.primary ) } // [END android_compose_state_compositionlocal2] @@ -91,14 +90,19 @@ object CompositionLocalSnippets3 { // [START android_compose_state_compositionlocal3] @Composable fun CompositionLocalExample() { - MaterialTheme { // MaterialTheme sets ContentAlpha.high as default - Column { - Text("Uses MaterialTheme's provided alpha") - CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) { - Text("Medium value provided for LocalContentAlpha") - Text("This Text also uses the medium value") - CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.disabled) { - DescendantExample() + MaterialTheme { + // Surface provides contentColorFor(MaterialTheme.colorScheme.surface) by default + // This is to automatically make text and other content contrast to the background + // correctly. + Surface { + Column { + Text("Uses Surface's provided content color") + CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.primary) { + Text("Primary color provided by LocalContentColor") + Text("This Text also uses primary as textColor") + CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.error) { + DescendantExample() + } } } } @@ -108,7 +112,7 @@ object CompositionLocalSnippets3 { @Composable fun DescendantExample() { // CompositionLocalProviders also work across composable functions - Text("This Text uses the disabled alpha now") + Text("This Text uses the error color now") } // [END android_compose_state_compositionlocal3] } @@ -169,11 +173,15 @@ object CompositionLocalSnippets5_6_7 { fun SomeComposable() { // Access the globally defined LocalElevations variable to get the // current Elevations in this part of the Composition - Card(elevation = LocalElevations.current.card) { + MyCard(elevation = LocalElevations.current.card) { // Content } } // [END android_compose_state_compositionlocal7] + + @Composable + fun MyCard(elevation: Dp, content: @Composable () -> Unit) { + } } object CompositionLocalSnippets8 { @@ -267,7 +275,7 @@ object CompositionLocalSnippets11 { /*** * Fakes */ -fun colors(): Colors = lightColors() +fun colors(): ColorScheme = lightColorScheme() data class DataToDisplay(val title: String) class MyViewModel : ViewModel() { From 5bbe6402691d75a16634d5e23d4a2ac16ede9b3d Mon Sep 17 00:00:00 2001 From: Rebecca Franks Date: Tue, 3 Sep 2024 08:40:06 +0100 Subject: [PATCH 2/2] Migrate Custom design system page to M3 (#325) * Migrate Custom design system page to M3 * Apply Spotless --------- Co-authored-by: riggaroo --- .../designsystems/CustomDesignSystem.kt | 47 +++++++------------ 1 file changed, 16 insertions(+), 31 deletions(-) diff --git a/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/CustomDesignSystem.kt b/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/CustomDesignSystem.kt index c9489e455..fd864ac3d 100644 --- a/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/CustomDesignSystem.kt +++ b/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/CustomDesignSystem.kt @@ -16,13 +16,13 @@ package com.example.compose.snippets.designsystems +import androidx.compose.foundation.isSystemInDarkTheme import androidx.compose.foundation.layout.RowScope import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.shape.ZeroCornerSize -import androidx.compose.material.Colors -import androidx.compose.material.ContentAlpha import androidx.compose.material3.Button import androidx.compose.material3.ButtonDefaults +import androidx.compose.material3.ColorScheme import androidx.compose.material3.MaterialTheme import androidx.compose.material3.ProvideTextStyle import androidx.compose.material3.Shapes @@ -38,28 +38,13 @@ import androidx.compose.ui.text.TextStyle import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp -import com.example.compose.snippets.designsystems.FullyCustomDesignSystem.CustomTheme.elevation -/* -* Copyright 2022 The Android Open Source Project -* -* 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. -*/ private object CustomDesignSystemExtend { // [START android_compose_designsystems_custom_extend] - // Use with MaterialTheme.colors.snackbarAction - val Colors.snackbarAction: Color - get() = if (isLight) Red300 else Red700 + // Use with MaterialTheme.colorScheme.snackbarAction + val ColorScheme.snackbarAction: Color + @Composable + get() = if (isSystemInDarkTheme()) Red300 else Red700 // Use with MaterialTheme.typography.textFieldInput val Typography.textFieldInput: TextStyle @@ -78,14 +63,14 @@ private object CustomDesignSystemExtendTheme { // [START android_compose_designsystems_custom_extend_theme] @Immutable data class ExtendedColors( - val tertiary: Color, - val onTertiary: Color + val caution: Color, + val onCaution: Color ) val LocalExtendedColors = staticCompositionLocalOf { ExtendedColors( - tertiary = Color.Unspecified, - onTertiary = Color.Unspecified + caution = Color.Unspecified, + onCaution = Color.Unspecified ) } @@ -95,8 +80,8 @@ private object CustomDesignSystemExtendTheme { content: @Composable () -> Unit ) { val extendedColors = ExtendedColors( - tertiary = Color(0xFFA8EFF0), - onTertiary = Color(0xFF002021) + caution = Color(0xFFFFCC02), + onCaution = Color(0xFF2C2D30) ) CompositionLocalProvider(LocalExtendedColors provides extendedColors) { MaterialTheme( @@ -106,7 +91,7 @@ private object CustomDesignSystemExtendTheme { } } - // Use with eg. ExtendedTheme.colors.tertiary + // Use with eg. ExtendedTheme.colors.caution object ExtendedTheme { val colors: ExtendedColors @Composable @@ -123,8 +108,8 @@ private object CustomDesignSystemExtendTheme { ) { Button( colors = ButtonDefaults.buttonColors( - containerColor = ExtendedTheme.colors.tertiary, - contentColor = ExtendedTheme.colors.onTertiary + containerColor = ExtendedTheme.colors.caution, + contentColor = ExtendedTheme.colors.onCaution /* Other colors use values from MaterialTheme */ ), onClick = onClick, @@ -340,7 +325,7 @@ object FullyCustomDesignSystem { .copy(alpha = 0.12f) .compositeOver(CustomTheme.colors.component), disabledContentColor = CustomTheme.colors.content - .copy(alpha = ContentAlpha.disabled) + .copy(alpha = 0.38f) ), shape = ButtonShape, elevation = ButtonDefaults.elevatedButtonElevation(