glance: header title inset, surface-variant and widget-background remote colour roles

2026-10-23 17:59:33 +02:00
parent 76e07fe8cb
commit f2ffaed925
6 changed files with 17 additions and 2 deletions
@@ -35,6 +35,8 @@ enum class WidgetColorRole(@ColorRes internal val resId: Int) {
    PRIMARY(R.color.floret_widget_primary),
    ON_PRIMARY(R.color.floret_widget_on_primary),
    ON_SECONDARY_CONTAINER(R.color.floret_widget_on_secondary_container),
+    SURFACE_VARIANT(R.color.floret_widget_surface_variant),
+    WIDGET_BACKGROUND(R.color.floret_widget_widget_background),
 }

 /**
@@ -128,4 +130,6 @@ private fun ColorProviders.provider(role: WidgetColorRole): ColorProvider = when
    WidgetColorRole.PRIMARY -> primary
    WidgetColorRole.ON_PRIMARY -> onPrimary
    WidgetColorRole.ON_SECONDARY_CONTAINER -> onSecondaryContainer
+    WidgetColorRole.SURFACE_VARIANT -> surfaceVariant
+    WidgetColorRole.WIDGET_BACKGROUND -> widgetBackground
 }
@@ -38,13 +38,16 @@ enum class WidgetActionStyle { TONAL, FILLED }
 * weighted to fill, and a trailing slot for [WidgetActionButton]s. On a
 * [WidgetBackground.TRANSPARENT] root the title gets its own small pill behind
 * it, so it stays legible over an arbitrary wallpaper (calendula#292); on a
- * filled root it sits directly on the surface, as before.
+ * filled root it sits directly on the surface, as before, [titleInset] in from
+ * the start to line it up with the content below. The pill sits flush instead,
+ * like the actions on the other side, its own padding insetting the text.
 */
@Composable
 fun WidgetHeader(
    title: String,
    modifier: GlanceModifier = GlanceModifier,
    titleAction: Action? = null,
+    titleInset: Dp = 0.dp,
    actions: @Composable RowScope.() -> Unit = {},
 ) {
    val transparentTitle = LocalWidgetBackground.current == WidgetBackground.TRANSPARENT
@@ -66,7 +69,7 @@ fun WidgetHeader(
            }
            Spacer(GlanceModifier.defaultWeight())
        } else {
-            Box(modifier = GlanceModifier.defaultWeight().then(clickable)) {
+            Box(modifier = GlanceModifier.defaultWeight().then(clickable).padding(start = titleInset)) {
                HeaderText(title)
            }
        }
@@ -6,4 +6,6 @@
    <color name="floret_widget_primary">@android:color/system_accent1_200</color>
    <color name="floret_widget_on_primary">@android:color/system_accent1_800</color>
    <color name="floret_widget_on_secondary_container">@android:color/system_accent2_100</color>
+    <color name="floret_widget_surface_variant">@android:color/system_neutral2_700</color>
+    <color name="floret_widget_widget_background">@android:color/system_accent2_800</color>
 </resources>
@@ -6,4 +6,6 @@
    <color name="floret_widget_primary">#FFBAC3FF</color>
    <color name="floret_widget_on_primary">#FF08218A</color>
    <color name="floret_widget_on_secondary_container">#FFDEE1F9</color>
+    <color name="floret_widget_surface_variant">#FF46464F</color>
+    <color name="floret_widget_widget_background">#FF2B2D3A</color>
 </resources>
@@ -6,4 +6,6 @@
    <color name="floret_widget_primary">@android:color/system_accent1_600</color>
    <color name="floret_widget_on_primary">@android:color/system_accent1_0</color>
    <color name="floret_widget_on_secondary_container">@android:color/system_accent2_900</color>
+    <color name="floret_widget_surface_variant">@android:color/system_neutral2_100</color>
+    <color name="floret_widget_widget_background">@android:color/system_accent2_50</color>
 </resources>
@@ -6,4 +6,6 @@
    <color name="floret_widget_primary">#FF4355B9</color>
    <color name="floret_widget_on_primary">#FFFFFFFF</color>
    <color name="floret_widget_on_secondary_container">#FF171B2C</color>
+    <color name="floret_widget_surface_variant">#FFE3E1EC</color>
+    <color name="floret_widget_widget_background">#FFF3F3FA</color>
 </resources>