Test styles skill

Jetsnack/app/build.gradle.kts

@@ -86,6 +86,7 @@ android {
     kotlin {
         compilerOptions {
             jvmTarget = JvmTarget.fromTarget("17")
+            freeCompilerArgs.add("-opt-in=androidx.compose.foundation.style.ExperimentalFoundationStyleApi")
         }
     }
     compileOptions {

Jetsnack/app/src/main/java/com/example/jetsnack/ui/components/Button.kt

@@ -17,9 +17,10 @@
 package com.example.jetsnack.ui.components
 
 import android.content.res.Configuration.UI_MODE_NIGHT_YES
-import androidx.compose.foundation.BorderStroke
+
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.indication
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Arrangement
@@ -28,7 +29,9 @@ import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.RowScope
 import androidx.compose.foundation.layout.defaultMinSize
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.style.MutableStyleState
+import androidx.compose.foundation.style.Style
+import androidx.compose.foundation.style.styleable
 import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.ProvideTextStyle
@@ -38,11 +41,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
-import androidx.compose.ui.graphics.Brush
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.RectangleShape
-import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.semantics.Role
 import androidx.compose.ui.tooling.preview.Preview
 import com.example.jetsnack.ui.theme.JetsnackTheme
@@ -51,36 +50,24 @@ import com.example.jetsnack.ui.theme.JetsnackTheme
 fun JetsnackButton(
     onClick: () -> Unit,
     modifier: Modifier = Modifier,
+    style: Style = Style,
     enabled: Boolean = true,
     interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
-    shape: Shape = ButtonShape,
-    border: BorderStroke? = null,
-    backgroundGradient: List<Color> = JetsnackTheme.colors.interactivePrimary,
-    disabledBackgroundGradient: List<Color> = JetsnackTheme.colors.interactiveSecondary,
-    contentColor: Color = JetsnackTheme.colors.textInteractive,
-    disabledContentColor: Color = JetsnackTheme.colors.textHelp,
     contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
     content: @Composable RowScope.() -> Unit,
 ) {
-    JetsnackSurface(
-        shape = shape,
-        color = Color.Transparent,
-        contentColor = if (enabled) contentColor else disabledContentColor,
-        border = border,
+    val styleState = remember(interactionSource) { MutableStyleState(interactionSource) }
+    styleState.isEnabled = enabled
+    Row(
         modifier = modifier
-            .clip(shape)
-            .background(
-                Brush.horizontalGradient(
-                    colors = if (enabled) backgroundGradient else disabledBackgroundGradient,
-                ),
-            )
             .clickable(
                 onClick = onClick,
                 enabled = enabled,
                 role = Role.Button,
                 interactionSource = interactionSource,
                 indication = null,
-            ),
+            )
+            .styleable(styleState, JetsnackTheme.styles.buttonStyle, style),
     ) {
         ProvideTextStyle(
             value = MaterialTheme.typography.labelLarge,
@@ -101,8 +88,6 @@ fun JetsnackButton(
     }
 }
 
-private val ButtonShape = RoundedCornerShape(percent = 50)
-
 @Preview("default", "round")
 @Preview("dark theme", "round", uiMode = UI_MODE_NIGHT_YES)
 @Preview("large font", "round", fontScale = 2f)
@@ -122,7 +107,7 @@ private fun ButtonPreview() {
 private fun RectangleButtonPreview() {
     JetsnackTheme {
         JetsnackButton(
-            onClick = {}, shape = RectangleShape,
+            onClick = {},
         ) {
             Text(text = "Demo")
         }

Jetsnack/app/src/main/java/com/example/jetsnack/ui/home/FilterScreen.kt

@@ -269,9 +269,10 @@ fun MaxCalories(sliderPosition: Float, onValueChanged: (Float) -> Unit) {
 
 @Composable
 fun FilterTitle(text: String) {
+) {
     Text(
         text = text,
-        style = MaterialTheme.typography.titleLarge,
+        style = MaterialTheme.typography.titleLarg        style = MaterialTheme.typography.titleLarge,
         color = JetsnackTheme.colors.brand,
         modifier = Modifier.padding(bottom = 8.dp),
     )

Jetsnack/app/src/main/java/com/example/jetsnack/ui/theme/ComponentStyles.kt

@@ -0,0 +1,58 @@
+/*
+ * Copyright 2024 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
+ *
+ *     https://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 com.example.jetsnack.ui.theme
+
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.style.Style
+import androidx.compose.foundation.style.background
+import androidx.compose.foundation.style.clip
+import androidx.compose.foundation.style.contentColor
+import androidx.compose.foundation.style.contentPadding
+import androidx.compose.foundation.style.disabled
+import androidx.compose.foundation.style.minHeight
+import androidx.compose.foundation.style.minWidth
+import androidx.compose.foundation.style.pressed
+import androidx.compose.foundation.style.shape
+import androidx.compose.foundation.style.textStyle
+import androidx.compose.runtime.Immutable
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.unit.dp
+import com.example.jetsnack.ui.theme.JetsnackTheme.colors
+import com.example.jetsnack.ui.theme.JetsnackTheme.typography
+
+@Immutable
+data class AppStyles(
+    val buttonStyle: Style = buttonStyle,
+)
+
+private val buttonStyle = Style {
+    minWidth(58.dp)
+    minHeight(40.dp)
+    contentPadding(8.dp, 24.dp)
+    background(Brush.horizontalGradient(colors.interactivePrimary))
+    shape(RoundedCornerShape(50))
+    clip()
+    textStyle(typography.labelLarge)
+    contentColor(colors.textInteractive)
+    disabled {
+        background(Brush.horizontalGradient(colors.interactiveSecondary))
+        contentColor(colors.textHelp)
+    }
+    pressed {
+        background(Brush.horizontalGradient(colors.interactivePrimary))
+    }
+}

Jetsnack/app/src/main/java/com/example/jetsnack/ui/theme/Theme.kt

@@ -24,6 +24,7 @@ import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.Immutable
 import androidx.compose.runtime.staticCompositionLocalOf
 import androidx.compose.ui.graphics.Color
+import androidx.compose.runtime.compositionLocalOf
 
 private val LightColorPalette = JetsnackColors(
     brand = Shadow5,
@@ -80,21 +81,28 @@ private val DarkColorPalette = JetsnackColors(
 @Composable
 fun JetsnackTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit) {
     val colors = if (darkTheme) DarkColorPalette else LightColorPalette
+    val styles = AppStyles()
 
     ProvideJetsnackColors(colors) {
-        MaterialTheme(
-            colorScheme = debugColors(darkTheme),
-            typography = Typography,
-            shapes = Shapes,
-            content = content,
-        )
+        CompositionLocalProvider(LocalAppStyles provides styles) {
+            MaterialTheme(
+                colorScheme = debugColors(darkTheme),
+                typography = Typography,
+                shapes = Shapes,
+                content = content,
+            )
+        }
     }
 }
 
 object JetsnackTheme {
     val colors: JetsnackColors
         @Composable
         get() = LocalJetsnackColors.current
+
+    val styles: AppStyles
+        @Composable
+        get() = LocalAppStyles.current
 }
 
 /**
@@ -141,6 +149,8 @@ private val LocalJetsnackColors = staticCompositionLocalOf<JetsnackColors> {
     error("No JetsnackColorPalette provided")
 }
 
+private val LocalAppStyles = compositionLocalOf { AppStyles() }
+
 /**
  * A Material [Colors] implementation which sets all colors to [debugColor] to discourage usage of
  * [MaterialTheme.colorScheme] in preference to [JetsnackTheme.colors].

Jetsnack/gradle/libs.versions.toml

@@ -4,7 +4,7 @@ android-material3 = "1.14.0-alpha09"
 androidGradlePlugin = "9.0.1"
 androidx-activity-compose = "1.13.0"
 androidx-appcompat = "1.7.1"
-androidx-compose-bom = "2026.03.00"
+androidx-compose-bom = "2026.04.01"
 androidx-core-splashscreen = "1.2.0"
 androidx-corektx = "1.17.0"
 androidx-glance = "1.2.0-rc01"